@contraagent/ui 0.9.1 → 0.9.2

package/src/adapters/graph/matrix.ts

@@ -1,7 +1,7 @@
 // A loop's passes: a loop box unrolled into units by (node, pass).
 import type { Plan, TaskState } from '@contraagent/api';
 import { arrange, type GraphOrder } from '@contraagent/elements/graph';
-import { cmpPasses, passesAt, push, type FlowTask } from './flow-index.js';
+import { passesAt, push, type FlowTask } from './flow-index.js';
 import { arranged, flowMarks, project, shapeOf, taskMark, type Draft, type Projection } from './project.js';
 import { SEVERITY, worstOf } from './states.js';
 import { LOOP_SEGMENT, type LayerMark, type GraphNode, type LoopBox } from './types.js';
@@ -62,10 +62,39 @@ export function passMatrix(plan: Plan, path: readonly string[], box: string, pre
   const rel = (t: FlowTask) => passesAt(t, d).slice(i0);
   const leaves = (x: LoopBox): string[] => x.layers.flat().flatMap((id) => (byBox.has(id) ? leaves(byBox.get(id) as LoopBox) : [id]));
   const tasksOf = (x: LoopBox): FlowTask[] => leaves(x).flatMap((id) => drafts.get(id)?.tasks ?? []);
-  const same = (a: readonly number[], p: readonly number[]) => a.length === p.length && cmpPasses(a, p) === 0;
-  const build = (x: LoopBox, prefix: number[]): ColTree[] => {
+  // Two pass lists are the same (`cmpPasses`, of one length) exactly when their JSON is.
+  const passKey = (v: readonly number[]) => JSON.stringify(v);
+  // Each node's tasks by their passes, in task order.
+  const byPasses = new Map<string, Map<string, FlowTask[]>>();
+  const tasksAt = (id: string, at: readonly number[]): readonly FlowTask[] => {
+    let m = byPasses.get(id);
+    if (!m) {
+      m = new Map();
+      for (const t of drafts.get(id)?.tasks ?? []) push(m, passKey(rel(t)), t);
+      byPasses.set(id, m);
+    }
+    return m.get(passKey(at)) ?? [];
+  };
+  // The passes the tasks of a box ran after each list of earlier passes: by box, by the length of that list.
+  const nextPasses = new Map<LoopBox, Map<number, Map<string, Set<number>>>>();
+  const passesAfter = (x: LoopBox, prefix: readonly number[]): number[] => {
     const k = prefix.length;
-    const passes = [...new Set(tasksOf(x).map(rel).filter((v) => v.length > k && cmpPasses(v.slice(0, k), prefix) === 0).map((v) => v[k] as number))].sort((a, c) => a - c);
+    let byK = nextPasses.get(x);
+    if (!byK) nextPasses.set(x, (byK = new Map<number, Map<string, Set<number>>>()));
+    let byPrefix = byK.get(k);
+    if (!byPrefix) {
+      byPrefix = new Map();
+      for (const v of tasksOf(x).map(rel)) {
+        if (v.length <= k) continue;
+        const key = passKey(v.slice(0, k));
+        (byPrefix.get(key) ?? byPrefix.set(key, new Set()).get(key))?.add(v[k] as number);
+      }
+      byK.set(k, byPrefix);
+    }
+    return [...(byPrefix.get(passKey(prefix)) ?? [])].sort((a, c) => a - c);
+  };
+  const build = (x: LoopBox, prefix: number[]): ColTree[] => {
+    const passes = passesAfter(x, prefix);
     return passes.flatMap((p): ColTree[] => {
       const at = [...prefix, p];
       const kids = x.layers.flat().flatMap((id): ColTree[] => {
@@ -75,7 +104,7 @@ export function passMatrix(plan: Plan, path: readonly string[], box: string, pre
           return sub.length ? [{ type: 'loop', box: inner, kids: sub }] : [];
         }
         const node = byNode.get(id);
-        return node && drafts.get(id)?.tasks.some((t) => same(rel(t), at)) ? [{ type: 'node', node, passes: at }] : [];
+        return node && tasksAt(id, at).length ? [{ type: 'node', node, passes: at }] : [];
       });
       return kids.length ? [{ type: 'pass', box: x, pass: p, kids }] : [];
     });
@@ -103,7 +132,7 @@ export function passMatrix(plan: Plan, path: readonly string[], box: string, pre
   const rowUnits = [...graph.units.filter((u) => unitsIn.has(u)), ...(unitsIn.has('') ? [''] : [])];
   const cellTasks = new Map<string, FlowTask[]>(); // `${column}\0${unit}`
   columns.forEach((c, ci) => {
-    for (const t of drafts.get(c.node.id)?.tasks ?? []) if (same(rel(t), c.passes)) push(cellTasks, `${ci}\u0000${t.n.unit || ''}`, t);
+    for (const t of tasksAt(c.node.id, c.passes)) push(cellTasks, `${ci}\u0000${t.n.unit || ''}`, t);
   });
   const markOf = (c: MatrixColumn, ts: readonly FlowTask[], unit: string): LayerMark | null => {
     const x = drafts.get(c.node.id) as Draft;
@@ -111,12 +140,14 @@ export function passMatrix(plan: Plan, path: readonly string[], box: string, pre
     const m = flowMarks(ts, d, x.name, ix.calls);
     return unit ? (m.byUnit.get(unit) ?? m.single[0] ?? null) : (m.single[0] ?? null);
   };
+  const mineOf = new Map<string, FlowTask[]>();
+  for (const t of mine) push(mineOf, t.n.unit || '', t);
   const rows = rowUnits.map((unit): MatrixRow => {
     const cells = columns.map((c, ci) => {
       const ts = cellTasks.get(`${ci}\u0000${unit}`);
       return ts?.length ? markOf(c, ts, unit) : null;
     });
-    const passes = new Set(mine.filter((t) => (t.n.unit || '') === unit).map((t) => passesAt(t, d).slice(0, i0 + 1).join('.'))).size;
+    const passes = new Set((mineOf.get(unit) ?? []).map((t) => passesAt(t, d).slice(0, i0 + 1).join('.'))).size;
     return { unit, passes, state: worstOf(cells.filter((m): m is LayerMark => m !== null).map((m) => m.state)), cells };
   });
   return { box: b, columns, head, rows };

package/src/adapters/lanes.ts

@@ -5,6 +5,7 @@ import { isLaunched, isPython, runRelative, type JournalRow, type TaskOutcome }
 import type { Lane, LaneBar, LaneStyle } from '@contraagent/elements/lanes';
 import { msg, str } from '@lit/localize';
 import { getLocale } from '../core/i18n.js';
+import { clockFormat } from '../words/clock-format.js';
 import { facts, fmtDur, kindUnit } from '../words/format.js';
 import { modelSwitch, notStartedCause, stopLabel } from '../words/index.js';
 
@@ -28,7 +29,8 @@ export interface TimelineLanes {
   omitted: number;
 }
 
-const hhmmss = (t: number) => new Date(t).toLocaleTimeString(getLocale(), { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23' });
+// The same text as `toLocaleTimeString` with these options, from a format made once.
+const hhmmss = (t: number) => clockFormat(getLocale(), false).format(new Date(t));
 
 /**
  * The bars' looks and the legend: who ran it is an identity cue (Python
@@ -67,6 +69,28 @@ function rowLabel(e: JournalRow, end: number, outcomes: ReadonlyMap<string, Task
     .join('\n');
 }
 
+type FinishedBar = { lane: string; bar: LaneBar & { end: number } };
+
+/** The finished bars last made for a journal, and what else they were made from. */
+const made = new WeakMap<readonly JournalRow[], { outcomes: ReadonlyMap<string, TaskOutcome>; run: string; locale: string; bars: FinishedBar[] }>();
+
+/** Each finished row's bar, on its lane: made again only when the journal, the outcomes, the run or the language changed. */
+function finishedBars(journal: readonly JournalRow[], outcomes: ReadonlyMap<string, TaskOutcome>, run: string): readonly FinishedBar[] {
+  const locale = getLocale();
+  const had = made.get(journal);
+  if (had && had.outcomes === outcomes && had.run === run && had.locale === locale) return had.bars;
+  const bars: FinishedBar[] = [];
+  journal.forEach((e, i) => {
+    if (!e.ts) return;
+    const end = Date.parse(e.ts);
+    if (Number.isNaN(end)) return;
+    const style: LaneStyleKey = !isLaunched(e) ? 'idle' : !e.ok ? 'bad' : isPython(e) ? 'py' : 'llm';
+    bars.push({ lane: e.kind || '?', bar: { id: `j${i}`, style, start: end - (e.wall_s || 0) * 1000, end, label: rowLabel(e, end, outcomes, run) } });
+  });
+  made.set(journal, { outcomes, run, locale, bars });
+  return bars;
+}
+
 /**
  * Every finished task as a bar on its kind's lane, in order of first start,
  * and the running ones (`end` null); finished tasks that ended more than six
@@ -78,17 +102,11 @@ export function lanesFromJournal(
   outcomes: ReadonlyMap<string, TaskOutcome>,
   run: string,
 ): TimelineLanes | null {
-  /** Each finished row's bar, on its lane. */
-  const bars: { lane: string; bar: LaneBar & { end: number } }[] = [];
-  journal.forEach((e, i) => {
-    if (!e.ts) return;
-    const end = Date.parse(e.ts);
-    if (Number.isNaN(end)) return;
-    const style: LaneStyleKey = !isLaunched(e) ? 'idle' : !e.ok ? 'bad' : isPython(e) ? 'py' : 'llm';
-    bars.push({ lane: e.kind || '?', bar: { id: `j${i}`, style, start: end - (e.wall_s || 0) * 1000, end, label: rowLabel(e, end, outcomes, run) } });
-  });
+  const bars = finishedBars(journal, outcomes, run);
   if (!bars.length && !live.length) return null;
-  const newest = Math.max(...bars.map((x) => x.bar.end), ...live.map((a) => a.t0));
+  let newest = -Infinity;
+  for (const x of bars) newest = Math.max(newest, x.bar.end);
+  for (const a of live) newest = Math.max(newest, a.t0);
   const vis: { lane: string; bar: LaneBar }[] = bars.filter((x) => x.bar.end >= newest - TIMELINE_WINDOW_MS);
   const omitted = bars.length - vis.length;
   live.forEach((a, i) => vis.push({ lane: a.kind, bar: { id: `live${i}`, style: 'run', start: a.t0, end: null, label: `${a.kind}\n${msg('running')}` } }));

package/src/adapters/panel-body.ts

@@ -19,15 +19,25 @@ export const rowTone = (r: BodyRow): Tone | undefined => (typeof r._tone === 'st
 /** The formats of numbers: their columns are right-aligned. */
 const NUMERIC = new Set(['usd', 'pct', 'duration', 'tokens', 'number']);
 
-/** A cell as the text it is ordered by. */
-const cellKey = (v: unknown): string => (typeof v === 'string' ? v : JSON.stringify(v));
+/** A cell as the text it is ordered by; an object's is written once. */
+const objectKeys = new WeakMap<object, string>();
+const cellKey = (v: unknown): string => {
+  if (typeof v === 'string') return v;
+  if (typeof v !== 'object' || v === null) return JSON.stringify(v);
+  let k = objectKeys.get(v);
+  if (k === undefined) objectKeys.set(v, (k = JSON.stringify(v)));
+  return k;
+};
+
+/** The order `localeCompare` gives, made once. */
+const text = new Intl.Collator();
 
 /** The order of two cells: numbers by value, then text; empty cells last. */
 function compareCells(a: unknown, b: unknown): number {
   const empty = (v: unknown) => v === null || v === undefined || v === '';
   if (empty(a) || empty(b)) return empty(a) === empty(b) ? 0 : empty(a) ? 1 : -1;
   if (typeof a === 'number' && typeof b === 'number') return a - b;
-  return cellKey(a).localeCompare(cellKey(b));
+  return text.compare(cellKey(a), cellKey(b));
 }
 
 /** `v` as a URL a cell may lead to: http or https only; null for anything else. */

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

@@ -29,6 +29,9 @@ export const taskName = (c: { key: string; kind?: string; unit?: string }): stri
 /** Problems first (the order of `CT_ORDER`), then by task. */
 const rank = (s: ContractStatus | null | undefined) => (s ? CT_ORDER.indexOf(s) : CT_ORDER.length);
 
+/** The tasks' keys in the order `localeCompare` puts them, made once. */
+const byKey = new Intl.Collator();
+
 /**
  * The files each task must write (`OutputContract`) and read (`InputContract`),
  * problems first, each with the chip of its status, then the passed ones under
@@ -77,6 +80,10 @@ export class CaContracts extends LitElement {
   /** The run's plan: with the journal, what happened to the task that writes a missing input. Optional. */
   @property({ attribute: false }) plan: Plan | null = null;
   private outcomes: ReadonlyMap<string, TaskOutcome> = new Map();
+  /** The outputs' rows sorted, each output's writer, and each task's last journal row: for the objects they were made from. */
+  private sorted: { outputs: Outputs | null; outs: (readonly [ContractRecord, ContractSpec])[] } | null = null;
+  private writers: { outputs: Outputs | null; by: Map<string, readonly [ContractRecord, ContractSpec]> } | null = null;
+  private lastRows: { journal: JournalRow[]; by: Map<string, JournalRow> } | null = null;
 
   /** Which contracts the reader opened, kept across Back and reload. */
   private readonly open = new RememberedSet('contracts:open', this);
@@ -87,9 +94,13 @@ export class CaContracts extends LitElement {
     if (!cs.length) {
       return html`<div class="blank"><span class="ic" aria-hidden="true">▣</span><b>${facts(msg('No checked files'), msg('no task declares an OutputContract or an InputContract'))}</b></div>`;
     }
-    const outs = cs
-      .flatMap((c) => (c.outputs ?? []).map((o) => [c, o] as const))
-      .sort(([a, x], [b, y]) => rank(x.status) - rank(y.status) || a.key.localeCompare(b.key));
+    if (this.sorted?.outputs !== this.outputs) {
+      const outs = cs
+        .flatMap((c) => (c.outputs ?? []).map((o) => [c, o] as const))
+        .sort(([a, x], [b, y]) => rank(x.status) - rank(y.status) || byKey.compare(a.key, b.key));
+      this.sorted = { outputs: this.outputs, outs };
+    }
+    const outs = this.sorted.outs;
     const ins = cs.flatMap((c) => (c.inputs ?? []).map((i) => [c, i] as const));
     const others = outs.filter(([, o]) => o.status !== 'valid');
     const passed = outs.filter(([, o]) => o.status === 'valid');
@@ -139,20 +150,27 @@ export class CaContracts extends LitElement {
 
   /** Who writes each output file: for naming the task a missing input should have come from. */
   private producerOf = (path: string): Producer | undefined => {
-    for (const c of this.outputs?.contracts ?? []) {
-      const o = (c.outputs ?? []).find((x) => x.path === path);
-      if (o) return { name: taskName(c), written: !!o.file.exists, outcome: this.outcomes.get(c.key)?.outcome };
+    if (this.writers?.outputs !== this.outputs) {
+      // The first task that declares the path, and its first output of it.
+      const by = new Map<string, readonly [ContractRecord, ContractSpec]>();
+      for (const c of this.outputs?.contracts ?? []) for (const o of c.outputs ?? []) if (!by.has(o.path)) by.set(o.path, [c, o]);
+      this.writers = { outputs: this.outputs, by };
     }
-    return undefined;
+    const w = this.writers.by.get(path);
+    if (!w) return undefined;
+    const [c, o] = w;
+    return { name: taskName(c), written: !!o.file.exists, outcome: this.outcomes.get(c.key)?.outcome };
   };
 
   /** The reason of a task's last journal row (run-relative), when the journal was given. */
   private reasonOf(key: string): string {
-    for (let i = this.journal.length - 1; i >= 0; i--) {
-      const r = this.journal[i];
-      if (r?.key === key) return runRelative(r.reason, this.run);
+    if (this.lastRows?.journal !== this.journal) {
+      const by = new Map<string, JournalRow>();
+      for (const r of this.journal) by.set(r.key, r);
+      this.lastRows = { journal: this.journal, by };
     }
-    return '';
+    const r = this.lastRows.by.get(key);
+    return r ? runRelative(r.reason, this.run) : '';
   }
 
   private outRow(c: ContractRecord, o: ContractSpec) {

package/src/elements/lists/ca-journal-table.ts

@@ -95,23 +95,37 @@ export class CaJournalTable extends LitElement {
   /** The run is a replay that also launched (`mixedReplay`): each attempt played from its recording is marked, and counted in a filter. */
   @property({ type: Boolean, attribute: 'replay-marks' }) replayMarks = false;
 
+  /** The counts of the rows, and the rows shown: for the rows (and filter) they were made from. */
+  private counts: { rows: JournalRow[]; replayMarks: boolean; fixups: number; retried: number; replayed: number; tally: ReturnType<typeof journalTally> } | null = null;
+  private shown: { rows: JournalRow[]; kind: string; stop: string; q: string; shown: JournalRow[] } | null = null;
+
   private open(rows: readonly JournalRow[], id: string): void {
     const e = rows.find((r) => rowId(r) === id);
     if (e) emit(this, 'ca-open-task', isPython(e) ? { key: e.key, view: 'output' } : { key: e.key });
   }
 
   override render() {
-    const rows = filterJournal(this.rows, this.kind, this.stop, this.q).reverse();
-    const fixups = this.rows.filter(hadFixup).length;
-    const retried = retriedKeys(this.rows).size;
-    const replayed = this.replayMarks ? this.rows.filter((r) => r.replayed).length : 0;
+    const s = this.shown;
+    const rows = s && s.rows === this.rows && s.kind === this.kind && s.stop === this.stop && s.q === this.q ? s.shown : filterJournal(this.rows, this.kind, this.stop, this.q).reverse();
+    this.shown = { rows: this.rows, kind: this.kind, stop: this.stop, q: this.q, shown: rows };
+    if (this.counts?.rows !== this.rows || this.counts.replayMarks !== this.replayMarks) {
+      this.counts = {
+        rows: this.rows,
+        replayMarks: this.replayMarks,
+        fixups: this.rows.filter(hadFixup).length,
+        retried: retriedKeys(this.rows).size,
+        replayed: this.replayMarks ? this.rows.filter((r) => r.replayed).length : 0,
+        tally: journalTally(this.rows),
+      };
+    }
+    const { fixups, retried, replayed, tally } = this.counts;
     const chip = (k: string, label: string, n: number, tip: string, tone: Tone = 'neutral') =>
       html`<button type="button" class="jchip ${this.stop === k ? 'on' : ''}" data-tone=${toneAttr(tone)} data-mark=${markOf(tone) ?? nothing}
         aria-pressed=${this.stop === k} title=${tip}
         @click=${() => emit(this, 'ca-filter', { stop: this.stop === k ? '' : k })}>${label} <b>${n}</b></button>`;
     const columns = journalColumns({ run: this.run, outcomes: deriveRun(this.rows, this.plan).outcomes, journal: this.rows, rows, extras: this.extras, replayMarks: this.replayMarks });
     return html`<div class="jtally">
-        ${journalTally(this.rows).map(([k, c]) => chip(k, shortStop(k), c, k, stopTone(k)))}
+        ${tally.map(([k, c]) => chip(k, shortStop(k), c, k, stopTone(k)))}
         ${fixups ? chip('fixup', msg('attempts with corrections'), fixups, correctionTip()) : nothing}
         ${retried ? chip('retried', msg('tasks retried'), retried, retryTip()) : nothing}
         ${replayed ? chip('replayed', msg('attempts replayed'), replayed, replayedTip()) : nothing}

package/src/elements/lists/ca-panel-body.ts

@@ -85,6 +85,8 @@ export class CaPanelBody extends LitElement {
 
   /** The order of each table's rows, by the table's place in the body. */
   @state() private sorts = new Map<string, SortState>();
+  /** Each table's rows as last sorted, for the body and the order they were sorted for. */
+  private sorted = new Map<string, { b: TableBody; sort: SortState; rows: BodyRow[] }>();
   /** The node the reader selected in each tree, by the tree's place in the body. */
   @state() private picks = new Map<string, string>();
 
@@ -191,12 +193,20 @@ export class CaPanelBody extends LitElement {
     }
   }
 
+  private sortedRows(at: string, b: TableBody, sort: SortState, make: () => BodyRow[]): BodyRow[] {
+    const had = this.sorted.get(at);
+    if (had && had.b === b && had.sort === sort) return had.rows;
+    const rows = make();
+    this.sorted.set(at, { b, sort, rows });
+    return rows;
+  }
+
   private table(b: TableBody, at: string): TemplateResult {
     const columns = bodyColumns(b);
     const rows = b.rows as BodyRow[];
     const keys = new Map(rows.map((r, i) => [r, String(i)]));
     const sort = this.sorts.get(at) ?? null;
-    const shown = sort ? sortRows(rows, columns, sort) : rows;
+    const shown = sort ? this.sortedRows(at, b, sort, () => sortRows(rows, columns, sort)) : rows;
     return html`<cae-data-table
       .columns=${columns}
       .rows=${shown}

package/src/elements/lists/ca-task-table.ts

@@ -60,6 +60,9 @@ export class CaTaskTable extends LitElement {
   /** The run id: paths in a cause are shown relative to it. */
   @property() run = '';
 
+  /** The rows shown, for the rows, kind and text they were filtered and sorted from. */
+  private shown: { all: readonly TaskRow[]; kind: string; q: string; rows: TaskRow[] } | null = null;
+
   private open(rows: readonly TaskRow[], key: string): void {
     const t = rows.find((r) => r.key === key);
     // A Python task has no transcript, but its detail shows what it was given and what it left.
@@ -69,7 +72,9 @@ export class CaTaskTable extends LitElement {
   override render() {
     const d = this.plan ? deriveRun(this.journal, this.plan) : null;
     const all = d?.rows ?? [];
-    const rows = sortTasks(filterTasks(all, this.kind, this.q));
+    const had = this.shown;
+    const rows = had && had.all === all && had.kind === this.kind && had.q === this.q ? had.rows : sortTasks(filterTasks(all, this.kind, this.q));
+    this.shown = { all, kind: this.kind, q: this.q, rows };
     if (!rows.length)
       return html`<div class="blank"><span class="ic" aria-hidden="true">≡</span>${all.length ? msg('No tasks match the filter') : msg('No tasks')}</div>`;
     const columns = taskColumns({ run: this.run, live: this.live, outcomes: d?.outcomes ?? new Map(), all, rows, journal: this.journal });

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

@@ -22,8 +22,10 @@ import {
 import { localized, msg, str } from '@lit/localize';
 import { LitElement, css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { guard } from 'lit/directives/guard.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { emit } from '../../core/events.js';
+import { getLocale } from '../../core/i18n.js';
 import { facts, kindUnit, localTime, sentence } from '../../words/format.js';
 import { notStartedCause, outcomeLabel, stateCount, stopLabel } from '../../words/index.js';
 import { base } from '@contraagent/elements/styles';
@@ -263,7 +265,7 @@ export class CaOverview extends LitElement {
         ${s.cursor
           ? html`<section class="panel enter">
               <h3 title=${msg('Stage and step per unit (CursorStore)')}>${msg('Resume cursor')}</h3>
-              ${this.cursor()}
+              ${guard([s.cursor, getLocale()], () => this.cursor())}
             </section>`
           : nothing}
       </div>

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

@@ -273,7 +273,9 @@ export class CaPipelineGraph extends LitElement {
       this.prevOrder = this.orders.get(path.join('/'));
     }
     const locale = getLocale();
-    const words = structure || changed.has('journal') || changed.has('live') || changed.has('forecast') || locale !== this.locale;
+    // The journal says only why a task did not start: with none, the words stay as they are.
+    const why = changed.has('journal') && this.plan.nodes.some((n) => n.state === 'blocked');
+    const words = structure || why || changed.has('live') || changed.has('forecast') || locale !== this.locale;
     if (words || changed.has('sort')) this.build(words, locale);
   }
 
@@ -470,19 +472,61 @@ export class CaPipelineGraph extends LitElement {
     return this.controls && this.tree.length && w >= OUTLINE_WIDE ? w - OUTLINE_COLUMN : w;
   }
 
-  /** The place keys on the way to the layer shown (the functions of its path). */
+  /** The place keys on the way to the layer shown (the functions of its path), for the layer and the places they were found for. */
+  private current: { segments: string[]; stats: Map<string, PlaceStats>; keys: Set<string> } | null = null;
   private currentKeys(): Set<string> {
+    const c = this.current;
+    if (c && c.segments === this.segments && c.stats === this.flowStats) return c.keys;
     const { path } = splitLayer(this.segments);
     const out = new Set<string>();
     for (const s of this.flowStats.values()) {
       const d = s.layer.length;
       if (d < path.length && startsWith(path, s.layer) && path[d] === s.name) out.add(s.key);
     }
+    this.current = { segments: this.segments, stats: this.flowStats, keys: out };
     return out;
   }
 
+  /** The places the outline unfolds on its own (`expanded`), and what they were found from. */
+  private unfolded: { current: Set<string>; open: Set<string>; selected: string; want: Set<string>; holds: Map<OutlineItem, boolean> } | null = null;
+  private unfoldedKeys(): Set<string> {
+    const current = this.currentKeys();
+    const selected = this.selectedItem();
+    const u = this.unfolded;
+    if (u && u.current === current && u.open === this.shownOpen && u.selected === selected) return u.want;
+    const want = new Set([...current, ...this.shownOpen, selected]);
+    this.unfolded = { current, open: this.shownOpen, selected, want, holds: new Map() };
+    return want;
+  }
+
+  /** The outline's items by id, the first in the tree's order, for the tree they are of. */
+  private items: { tree: OutlineItem[]; byId: Map<string, OutlineItem> } | null = null;
+  private itemById(id: string): OutlineItem | undefined {
+    if (this.items?.tree !== this.tree) {
+      const byId = new Map<string, OutlineItem>();
+      const walk = (xs: readonly OutlineItem[]): void => {
+        for (const it of xs) {
+          if (!byId.has(it.id)) byId.set(it.id, it);
+          walk(it.kids);
+        }
+      };
+      walk(this.tree);
+      this.items = { tree: this.tree, byId };
+    }
+    return this.items.byId.get(id);
+  }
+
   /** The place (or loop item) the selection is, or is in: '' for none. */
+  private selectedOf: { sel: string; graph: LayerGraph; item: string } | null = null;
   private selectedItem(): string {
+    const had = this.selectedOf;
+    if (had && had.sel === this.sel && had.graph === this.graph) return had.item;
+    const item = this.findSelectedItem();
+    this.selectedOf = { sel: this.sel, graph: this.graph, item };
+    return item;
+  }
+
+  private findSelectedItem(): string {
     const sel = this.sel;
     if (!sel) return '';
     if (sel.startsWith(FLOW_BOX)) return sel.slice(FLOW_BOX.length);
@@ -527,9 +571,14 @@ export class CaPipelineGraph extends LitElement {
         const own = el.folds.get(id);
         if (own !== undefined) return own;
         // Unfolded by default: the top items, and those on the way to the layer shown, to what is open and to the selection.
-        const want = new Set([...el.currentKeys(), ...el.shownOpen, el.selectedItem()]);
-        const has = (it: OutlineItem): boolean => want.has(it.id) || it.kids.some(has);
-        const it = findItem(el.tree, id);
+        const want = el.unfoldedKeys();
+        const holds = el.unfolded?.holds ?? new Map<OutlineItem, boolean>();
+        const has = (it: OutlineItem): boolean => {
+          let h = holds.get(it);
+          if (h === undefined) holds.set(it, (h = want.has(it.id) || it.kids.some(has)));
+          return h;
+        };
+        const it = el.itemById(id);
         return !!it && (el.tree.includes(it) || has(it));
       },
       expand(id, on) {
@@ -621,16 +670,6 @@ function lightsOf(plan: Plan, links: TaskLinks, g: LayerGraph): (key: string) =>
   };
 }
 
-/** The outline item `id`, wherever it is in the tree. */
-function findItem(items: readonly OutlineItem[], id: string): OutlineItem | undefined {
-  for (const it of items) {
-    if (it.id === id) return it;
-    const k = findItem(it.kids, id);
-    if (k) return k;
-  }
-  return undefined;
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'ca-pipeline-graph': CaPipelineGraph;

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

@@ -87,7 +87,8 @@ function inspect(h: PipelineHost, s: Selected) {
       </dl>
       <div class="acts">${link(msg(str`Inside ${shortName(m.flow)}`), () => primary(h, s), true)}${clear}</div>`;
   }
-  const rows = h.journal.filter((r) => m.keys.includes(r.key));
+  const keys = new Set(m.keys);
+  const rows = h.journal.filter((r) => keys.has(r.key));
   const ran = rows.filter(isLaunched);
   const costs = ran.map((r) => r.cost_usd).filter((x): x is number => typeof x === 'number');
   const wall = ran.reduce((a, r) => a + (r.wall_s ?? 0), 0);

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

@@ -2,6 +2,7 @@
 import type { LayeredGraphStrings } from '@contraagent/elements/graph';
 import type { MarkMatrixStrings } from '@contraagent/elements/matrix';
 import { msg, str } from '@lit/localize';
+import { getLocale } from '../../../core/i18n.js';
 import { listText } from '../../../words/format.js';
 import { lineageWord } from '../../../words/lineage.js';
 
@@ -11,6 +12,17 @@ import { lineageWord } from '../../../words/lineage.js';
  * node always has its `progress`, so the words of a node's default count are not needed.
  */
 export function graphStrings(up: boolean, functions: boolean): Omit<LayeredGraphStrings, 'progress'> {
+  // The same words are the same object: the graph does not draw its nodes again for them.
+  const id = `${getLocale()}|${up}|${functions}`;
+  let words = made.get(id);
+  if (!words) made.set(id, (words = makeGraphStrings(up, functions)));
+  return words;
+}
+
+const made = new Map<string, Omit<LayeredGraphStrings, 'progress'>>();
+let madeMatrix: { locale: string; words: MarkMatrixStrings } | null = null;
+
+function makeGraphStrings(up: boolean, functions: boolean): Omit<LayeredGraphStrings, 'progress'> {
   const enter = msg('Enter: open');
   return {
     graph: msg('Graph', { id: 'view-graph', desc: 'Button: show the pipeline as a graph' }),
@@ -52,5 +64,7 @@ export function graphStrings(up: boolean, functions: boolean): Omit<LayeredGraph
 
 /** The words of a loop's passes. */
 export function matrixStrings(): MarkMatrixStrings {
-  return { sortBy: msg('Sort units'), rowsHeader: msg('Unit') };
+  const locale = getLocale();
+  if (madeMatrix?.locale !== locale) madeMatrix = { locale, words: { sortBy: msg('Sort units'), rowsHeader: msg('Unit') } };
+  return madeMatrix.words;
 }

package/src/words/clock-format.ts

@@ -0,0 +1,20 @@
+// The one time format of rows and chips (`localTime`), made once per language.
+
+const formats = new Map<string, Intl.DateTimeFormat>();
+
+/** The time of day `10:38:40`, or with the date `Oct 12, 10:38:40`, as `locale` writes it. */
+export function clockFormat(locale: string, withDate: boolean): Intl.DateTimeFormat {
+  const id = `${locale}|${withDate}`;
+  let f = formats.get(id);
+  if (!f) {
+    f = new Intl.DateTimeFormat(locale, {
+      ...(withDate ? { month: 'short', day: 'numeric' } : {}),
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hourCycle: 'h23',
+    });
+    formats.set(id, f);
+  }
+  return f;
+}

package/src/words/format.ts

@@ -1,27 +1,11 @@
 // Durations, times and small text helpers shared by the views.
 import { msg, str } from '@lit/localize';
 import { getLocale } from '../core/i18n.js';
+import { clockFormat } from './clock-format.js';
 
 // The formats that read the same in every language are the generic package's.
 export { esc, fmtDur } from '@contraagent/elements';
 
-const formats = new Map<string, Intl.DateTimeFormat>();
-function formatter(locale: string, withDate: boolean): Intl.DateTimeFormat {
-  const id = `${locale}|${withDate}`;
-  let f = formats.get(id);
-  if (!f) {
-    f = new Intl.DateTimeFormat(locale, {
-      ...(withDate ? { month: 'short', day: 'numeric' } : {}),
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      hourCycle: 'h23',
-    });
-    formats.set(id, f);
-  }
-  return f;
-}
-
 /**
  * An ISO time in the reader's time zone, as the UI locale writes it: `10:38:40`,
  * or with the date `Oct 12, 10:38:40` (the month as a word, so no reader takes
@@ -31,7 +15,7 @@ export function localTime(ts: string | null | undefined, withDate = false, local
   if (!ts) return '';
   const d = new Date(ts);
   if (Number.isNaN(d.getTime())) return ts;
-  return formatter(locale, withDate).format(d);
+  return clockFormat(locale, withDate).format(d);
 }
 
 /** An ISO time as `just now`, `5m ago`, `3h ago`, `2d ago` (the run picker only; rows and chips show `localTime`). */