@contraagent/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,75 @@
+// The line above the frame: where the layer is, the pinned unit, and a layer the run does not have.
+import { msg, str } from '@lit/localize';
+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 { go } from './actions.js';
+import type { PipelineHost } from './host.js';
+
+/** Which functions are drawn open: those the graph chooses, every one, or only those the reader opened. */
+export type OpenMode = 'auto' | 'all' | 'none';
+
+/** "Show all inside" and "Hide all inside": each sets its mode, and, pressed again, gives the choice back to the graph. */
+export function openControls(mode: OpenMode, set: (m: OpenMode) => void): TemplateResult {
+  const button = (m: OpenMode, label: string) =>
+    html`<button type="button" class="switch" aria-pressed=${mode === m} @click=${() => set(mode === m ? 'auto' : m)}>${label}</button>`;
+  return html`<span class="opens">${button('all', msg('Show all inside'))}${button('none', msg('Hide all inside'))}</span>`;
+}
+
+/**
+ * Where the layer is: "Pipeline", then every level down to the one shown, auto-descended
+ * levels included; a nested loop's box is a level below the box it is in. `controls`
+ * (the open controls) end the line.
+ */
+export function crumbs(h: PipelineHost, controls: TemplateResult | null = null) {
+  const segs = h.segments;
+  const pinned = h.unit;
+  if (!segs.length && !pinned && !controls) return nothing;
+  const { path, loop } = splitLayer(segs);
+  const levels = [
+    ...path.map((fn, i) => ({ name: shortName(fn), tip: fn, to: path.slice(0, i + 1) })),
+    // A loop by where it is: two loops one in the other are told apart.
+    ...(loop ? loop.slice(LOOP_SEGMENT.length).split('.') : []).map((line, i, lines) => {
+      const id = LOOP_SEGMENT + lines.slice(0, i + 1).join('.');
+      const file = h.graph.boxes.find((b) => b.id === id)?.file || h.matrix?.box.file || '';
+      const known = /^\d+$/.test(line);
+      return {
+        name: known ? msg(str`Loop at ${where(line, file)}`) : msg('Loop'),
+        tip: known && file ? `${file}:${line}` : '',
+        to: [...path, id],
+      };
+    }),
+  ];
+  return html`<div class="bar">
+    ${segs.length
+      ? html`<nav aria-label=${msg('Pipeline layer')}>
+          <ol class="crumbs">
+            <li><button type="button" @click=${() => go(h, [])}>${msg('Pipeline')}</button></li>
+            ${levels.map((l, i) => {
+              const last = i === levels.length - 1;
+              return html`<li><span class="sep" aria-hidden="true">›</span>
+                ${last
+                  ? html`<span aria-current="page" title=${l.tip || nothing}>${l.name}</span>`
+                  : html`<button type="button" title=${l.tip || nothing} @click=${() => go(h, l.to)}>${l.name}</button>`}</li>`;
+            })}
+          </ol>
+        </nav>`
+      : nothing}
+    ${pinned
+      ? html`<span class="pin">${msg(str`Unit: ${pinned}`)}
+          <button type="button" class="switch" @click=${() => emit(h.el, 'ca-navigate', { unit: '' })}>${msg('Clear highlight')}</button></span>`
+      : nothing}
+    ${controls ?? nothing}
+  </div>`;
+}
+
+/** The layer the view route named that this run does not have. */
+export function missingLine(missing: string) {
+  if (!missing) return nothing;
+  const segs = missing.split('/');
+  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>`;
+}

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

@@ -0,0 +1,26 @@
+// What the pipeline graph's parts read from `ca-pipeline-graph`: the run, the layer
+// shown, and its model as the plan has it (the generic graph draws it).
+import type { JournalRow, Plan } from '@contraagent/api';
+import type { TaskLinks } from '../../../adapters/graph/highlight.js';
+import type { PassMatrix } from '../../../adapters/graph/matrix.js';
+import type { LayerGraph } from '../../../adapters/graph/types.js';
+
+export interface PipelineHost {
+  readonly el: HTMLElement;
+  readonly plan: Plan;
+  readonly journal: readonly JournalRow[];
+  /** The run id: paths in a cause are shown relative to it. */
+  readonly run: string;
+  readonly live: boolean;
+  /** The view route's selection and pinned unit. */
+  readonly sel: string;
+  readonly unit: string;
+  /** The layer shown (its segments), and the layer the graph opens on. */
+  readonly segments: readonly string[];
+  readonly auto: readonly string[];
+  /** The layer, arranged as it is drawn. */
+  readonly graph: LayerGraph;
+  /** A loop's passes, when the layer shown is a loop. */
+  readonly matrix: PassMatrix | null;
+  readonly links: TaskLinks;
+}

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

@@ -0,0 +1,104 @@
+// The selection's card: what is selected, its facts and where it leads. The
+// generic graph places it beside the item (its `inspector` slot).
+import { isLaunched } from '@contraagent/api';
+import { cycleIcon, innerIcon } from '@contraagent/elements/graph';
+import { toneAttr } from '@contraagent/elements';
+import { msg, str } from '@lit/localize';
+import { html, nothing } from 'lit';
+import { shortName } from '../../../adapters/graph/flow-index.js';
+import { causeOf } from '../../../adapters/graph/input.js';
+import type { Selected } from '../../../adapters/graph/selection.js';
+import { doneOf, exceptions, executorWord, neighbours, notDone, stateWord, taskStateStyles, where } from '../../../adapters/graph/words.js';
+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 { primary, select, tasksOf } from './actions.js';
+import type { PipelineHost } from './host.js';
+
+/** The selection's card content, for the graph's `inspector` slot: its heading names the item, `[data-status]` its status. */
+export function inspector(h: PipelineHost, s: Selected) {
+  return html`<div slot="inspector" class="card">${inspect(h, s)}</div>`;
+}
+
+function inspect(h: PipelineHost, s: Selected) {
+  const row = (dt: string, dd: unknown) => html`<dt>${dt}</dt><dd>${dd}</dd>`;
+  const link = (text: string, go: () => void, primary = false) =>
+    html`<button type="button" class="go ${primary ? 'primary' : ''}" @click=${go}>${text}</button>`;
+  const clear = html`<button type="button" class="switch" @click=${() => select(h, '')}>${msg('Clear selection')}</button>`;
+  const list = (xs: string[]) => (xs.length ? listText(xs) : msg('none', { id: 'none', desc: 'An empty value' }));
+  if (s.type === 'box') {
+    const b = s.box;
+    const at = where(b.loop, b.file);
+    return html`<h4 title=${b.file ? `${b.file}:${b.loop}` : nothing}>${cycleIcon(16)}${msg(str`Loop at ${at}`)}</h4>
+      <dl>
+        ${row(msg('Passes'), passCount(b.passes))}
+        ${b.spread.length > 1 ? row(msg('Units by number of passes'), passSpread(b.spread)) : nothing}
+      </dl>
+      <div class="acts">${link(msg(str`Passes of the loop at ${at}`), () => primary(h, s), true)}${clear}</div>`;
+  }
+  if (s.type === 'node') {
+    const n = s.node;
+    const c = n.counts;
+    const { waits, after, feeds } = neighbours(n, h.graph);
+    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>
+        <div class="sub">${msg('Function')}</div>
+        <dl>
+          ${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}
+          ${row(msg('Later tasks'), list(feeds))}
+        </dl>
+        <div class="acts">${link(msg(str`Inside ${n.label}`), () => primary(h, s), true)}${clear}</div>`;
+    }
+    return html`<h4>${n.executor && n.executor !== 'mixed' ? executorIcon(n.executor === 'python') : nothing}${n.label}</h4>
+      <div class="sub">${executorWord(n)}</div>
+      <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}
+        ${row(msg('Later tasks'), list(feeds))}
+      </dl>
+      <div class="acts">${link(msg(str`Tasks of ${n.label}`), () => primary(h, s), true)}${clear}</div>`;
+  }
+  const { node, mark: m, passes } = s;
+  const task = m.flow || m.count !== 1 ? undefined : h.links.byKey.get(m.key);
+  const name = kindUnit({ kind: task?.kind ?? node.label, unit: m.unit });
+  const cause = !m.flow && m.state === 'blocked' ? causeOf(h)(m.key) : '';
+  const status = html`<span data-status class=${m.state === 'failed' ? 'err' : m.state === 'blocked' || m.state === 'partial' ? 'warn' : ''}>${stateWord(m.state, h.live)}</span>`;
+  const look = taskStateStyles(h.live)[m.state];
+  const head = html`<h4 title=${m.flow ? msg(str`Flow call ${m.key}`) : m.key}><i class="mark" data-tone=${toneAttr(look?.tone)} data-shape=${look?.shape ?? nothing} aria-hidden="true"></i>${name}</h4>`;
+  const pass = passes.length ? listText(passes.map(passLabel)) : m.passes ? passesRan(m.passes) : '';
+  if (m.flow) {
+    const c = m.counts;
+    return html`${head}
+      <dl>
+        ${row(msg('Status', { id: 'status', desc: 'The status of a task: done, failed, not started' }), status)}
+        ${pass ? row(msg('Pass'), pass) : nothing}
+        ${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}
+      </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 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);
+  return html`${head}
+    <dl>
+      ${row(msg('Status', { id: 'status', desc: 'The status of a task: done, failed, not started' }), cause ? html`${status}<div>${cause}</div>` : status)}
+      ${pass ? row(msg('Pass'), pass) : nothing}
+      ${m.count > 1 ? row(msg('Tasks', { id: 'tasks', desc: 'A count of tasks' }), msg(str`${m.count} tasks`)) : nothing}
+      ${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)) : '—')}
+    </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>`;
+}

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

@@ -0,0 +1,150 @@
+// The outline beside the pipeline graph: every function of the run's flow, and the loops
+// they are in, as a tree, each with its tasks done of its tasks and what is not done. It
+// shows the whole flow at once, whatever the graph draws open; the graph shows how its
+// parts connect.
+import { cycleIcon } from '@contraagent/elements/graph';
+import { msg, str } from '@lit/localize';
+import { html, nothing } from 'lit';
+import type { PlaceStats } from '../../../adapters/graph/compound.js';
+import { shortName } from '../../../adapters/graph/flow-index.js';
+import { LOOP_SEGMENT, type NodeCounts } from '../../../adapters/graph/types.js';
+import { doneOf, exceptions, where } from '../../../adapters/graph/words.js';
+
+/** An item of the outline: a function (its place) or a loop of the layer it is in. */
+export interface OutlineItem {
+  /** A function's place key; a loop's `<layer>|loop:<line>`. */
+  id: string;
+  type: 'fn' | 'loop';
+  label: string;
+  tip: string;
+  /** The layer it is in (function names, outermost first). */
+  layer: string[];
+  /** A function: its name; a loop: its segment (`loop:12`, `loop:12.30`). */
+  name: string;
+  counts: NodeCounts;
+  errors: boolean;
+  kids: OutlineItem[];
+  /**
+   * The functions it stands for, outermost first: itself, then, for a chain of functions
+   * each the only function in the layer of the one before, the rest of the chain (as the
+   * graph draws it in one box). Going into it goes into the last.
+   */
+  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 });
+
+/** 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[] {
+  const kidsOf = new Map<string | null, PlaceStats[]>();
+  for (const s of stats.values()) (kidsOf.get(s.parent) ?? kidsOf.set(s.parent, []).get(s.parent))?.push(s);
+  const build = (parent: string | null): OutlineItem[] => {
+    const out: OutlineItem[] = [];
+    const loops = new Map<string, OutlineItem>();
+    for (const s of kidsOf.get(parent) ?? []) {
+      const item: OutlineItem = {
+        id: s.key,
+        type: 'fn',
+        label: shortName(s.name),
+        tip: s.name,
+        layer: s.layer,
+        name: s.name,
+        counts: s.counts,
+        errors: s.errors,
+        kids: build(s.key),
+        parts: [{ id: s.key, layer: s.layer, name: s.name }],
+      };
+      // In a loop: inside the loop's item (a nested loop's inside its outer one).
+      let into = out;
+      s.loops.forEach((_, i) => {
+        const seg = `${LOOP_SEGMENT}${s.loops.slice(0, i + 1).join('.')}`;
+        const id = `${s.layer.join('/')}|${seg}`;
+        let loop = loops.get(id);
+        if (!loop) {
+          const line = s.loops[i] as number;
+          loop = { id, type: 'loop', label: msg(str`Loop at ${where(line, s.file)}`), tip: s.file ? `${s.file}:${line}` : '', layer: s.layer, name: seg, counts: ZERO(), errors: false, kids: [], parts: [{ id, layer: s.layer, name: seg }] };
+          loops.set(id, loop);
+          into.push(loop);
+        }
+        for (const k of Object.keys(loop.counts) as (keyof NodeCounts)[]) loop.counts[k] += s.counts[k];
+        loop.errors ||= s.errors;
+        into = loop.kids;
+      });
+      into.push(item);
+    }
+    return out;
+  };
+  return build(null);
+}
+
+/**
+ * The items with each chain of single functions as one item named by its path (as the
+ * graph draws it in one box): a function whose only item is a function, with no loop
+ * between. A function on the way to the layer shown (`current`) stays an item of its own.
+ */
+export function chained(items: readonly OutlineItem[], current: (id: string) => boolean): OutlineItem[] {
+  const chain = (it: OutlineItem): OutlineItem => {
+    let x = it;
+    while (x.type === 'fn' && !current(x.id) && x.kids.length === 1 && x.kids[0]?.type === 'fn' && !current(x.kids[0].id)) {
+      const k = x.kids[0];
+      x = { ...x, label: `${x.label} › ${k.label}`, tip: `${x.tip}\n${k.tip}`, kids: k.kids, parts: [...x.parts, ...k.parts] };
+    }
+    return { ...x, kids: x.kids.map(chain) };
+  };
+  return items.map(chain);
+}
+
+/** What the outline reads and does: which items are expanded, current or selected, and what a pick and Enter do. */
+export interface OutlineHost {
+  readonly live: boolean;
+  expanded(id: string): boolean;
+  expand(id: string, on: boolean): void;
+  /** The item is on the way to the layer shown, or is it. */
+  current(id: string): boolean;
+  /** The item is the layer shown. */
+  here(id: string): boolean;
+  selected(id: string): boolean;
+  /** Show the item in the graph, selected. */
+  pick(item: OutlineItem): void;
+  /** Go into the item: a function's layer, a loop's passes. */
+  enter(item: OutlineItem): void;
+}
+
+/** The outline: a tree of buttons; a click shows an item in the graph, a double click or Enter goes into it. */
+export function outline(h: OutlineHost, tree: readonly OutlineItem[]) {
+  const items = chained(tree, (id) => h.current(id));
+  const notesOf = (it: OutlineItem) => exceptions({ counts: it.counts, errors: it.errors ? 1 : 0 }, h.live);
+  // A note only where it says something the item around it does not: where the problem narrows.
+  const row = (it: OutlineItem, above = ''): unknown => {
+    const open = it.kids.length > 0 && h.expanded(it.id);
+    const c = it.counts;
+    const pct = c.total ? Math.round(((c.done + c.partial + c.skipped) / c.total) * 100) : 0;
+    const all = notesOf(it);
+    const said = all.map(([, t]) => t).join('|');
+    const notes = said === above ? [] : all;
+    const cur = it.parts.some((p) => h.current(p.id));
+    const here = it.parts.some((p) => h.here(p.id));
+    return html`<li>
+      <div class="orow ${cur ? 'cur' : ''} ${it.parts.some((p) => h.selected(p.id)) ? 'sel' : ''}">
+        ${it.kids.length
+          ? html`<button type="button" class="odisc" aria-expanded=${open} aria-label=${open ? msg(str`Fold ${it.label}`) : msg(str`Unfold ${it.label}`)}
+              @click=${() => h.expand(it.id, !open)}><span aria-hidden="true">${open ? '▾' : '▸'}</span></button>`
+          : html`<span class="odisc" aria-hidden="true"></span>`}
+        <button type="button" class="oname" title=${it.tip || nothing} aria-current=${here ? 'location' : nothing}
+          @click=${(e: MouseEvent) => e.detail < 2 && h.pick(it)} @dblclick=${() => h.enter(it)}
+          @keydown=${(e: KeyboardEvent) => {
+            if (e.key !== 'Enter') return;
+            e.preventDefault();
+            h.enter(it);
+          }}>
+          ${it.type === 'loop' ? cycleIcon(12) : nothing}<span class="ol">${it.label}</span>
+          <span class="obar" aria-hidden="true"><i style="width:${pct}%"></i></span>
+          <span class="ocount" title=${doneOf(c)}>${c.done}/${c.total}</span>
+        </button>
+        ${notes.length ? html`<div class="onote">${notes.map(([cls, text]) => html`<span class=${cls}>${text}</span>`)}</div>` : nothing}
+      </div>
+      ${open ? html`<ul>${it.kids.map((k) => row(k, said))}</ul>` : nothing}
+    </li>`;
+  };
+  return html`<nav class="outline" aria-label=${msg('Outline of the flow')}><ul class="otree">${items.map((it) => row(it))}</ul></nav>`;
+}

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

@@ -0,0 +1,53 @@
+// The generic graph's and mark matrix's words, as the pipeline graph says them.
+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';
+
+/**
+ * Every word of the graph (`up`: Escape's hint without a selection, '' at the top;
+ * `functions`: the layer has function nodes, so a row names a kind or a function); a
+ * 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'> {
+  const enter = msg('Enter: open');
+  return {
+    graph: msg('Graph', { id: 'view-graph', desc: 'Button: show the pipeline as a graph' }),
+    table: msg('Table', { id: 'view-table', desc: 'Button: show the pipeline as a table' }),
+    view: msg('View'),
+    zoomIn: msg('Zoom in'),
+    zoomInTip: msg('Zoom in (Ctrl + scroll)'),
+    zoomOut: msg('Zoom out'),
+    zoomOutTip: msg('Zoom out (Ctrl + scroll)'),
+    showAll: msg('Show all'),
+    graphKeys: [msg('Tab: next node'), msg('Arrow keys: marks'), msg('Shift + arrow keys: earlier and later tasks'), enter],
+    tableKeys: [msg('Tab: next row'), enter],
+    matrixKeys: [msg('Arrow keys: marks'), enter],
+    clearKey: msg('Esc: clear selection'),
+    upKey: up ? msg('Esc: up a level') : '',
+    inspector: msg('Selected item'),
+    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'),
+    cycle: msg('next pass'),
+    drill: msg('has a level below'),
+    open: msg('Show inside'),
+    close: msg('Hide inside'),
+    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'),
+    dashedHeader: msg('Created after'),
+    laterHeader: msg('Later tasks'),
+    none: msg('none', { id: 'none', desc: 'An empty value' }),
+    inCluster: (label) => msg(str`${label} in the loop`),
+    list: (items) => listText(items),
+  };
+}
+
+/** The words of a loop's passes. */
+export function matrixStrings(): MarkMatrixStrings {
+  return { sortBy: msg('Sort units'), rowsHeader: msg('Unit') };
+}

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

@@ -0,0 +1,97 @@
+// The pipeline graph's own styles: the line above the graph (where the layer is, the
+// pinned unit, a missing layer) and the card's content, which it renders into the
+// generic graph's slots; and the executor icons the generic graph draws for it.
+import { base, markStyles } from '@contraagent/elements/styles';
+import { css } from 'lit';
+import { executorIconStyles } from '../../../words/executor.js';
+
+export const graphStyles = [
+  base,
+  executorIconStyles,
+  markStyles,
+  css`
+    /* A column: a height set on the host is the graph's, less the outline's line above it. */
+    :host { display: flex; flex-direction: column; }
+    cae-layered-graph { flex: auto; min-height: 0; }
+
+    .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; font-size: 12px; }
+    .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
+    .crumbs li { display: inline-flex; align-items: center; gap: 4px; }
+    .crumbs .sep { color: var(--text-muted); }
+    .crumbs button { all: unset; cursor: pointer; color: var(--accent); font-family: var(--mono); }
+    .crumbs button:hover { text-decoration: underline; }
+    .crumbs button:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; border-radius: 3px; }
+    .crumbs [aria-current] { font-family: var(--mono); color: var(--text); font-weight: 600; }
+    .pin { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
+    .pin b { font-family: var(--mono); }
+    .missing { margin-bottom: 8px; font-size: 12px; color: var(--status-attention); }
+    .missing code { font-family: var(--mono); }
+
+    /* The card's content: laid out by the card itself. */
+    .card { display: contents; }
+    .ic { display: block; flex: none; }
+    .loop-ic { color: var(--text-2); }
+    .in-ic { color: var(--text-muted); }
+    .card h4 { margin: 0; display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 13px; font-weight: 600;
+      color: var(--text); overflow-wrap: anywhere; }
+    .card h4 .mark { --m: 11px; flex: none; cursor: default; animation: none; }
+    .card h4 .mark:hover { transform: none; outline: none; }
+    .card h4 .k-ic { width: 18px; height: 18px; margin: 0; border-radius: 5px; font-size: 10px; }
+    .card .sub { color: var(--text-2); }
+    .card dl { display: grid; grid-template-columns: fit-content(42%) minmax(0, 1fr); gap: 4px 12px; margin: 0; }
+    .card dt { color: var(--text-muted); word-break: keep-all; overflow-wrap: break-word; }
+    .card dd { margin: 0; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+    .card dd .err { color: var(--status-failed); }
+    .card dd .warn { color: var(--status-attention); }
+    .card .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 2px; }
+    .card .go { all: unset; cursor: pointer; color: var(--accent); overflow-wrap: anywhere; }
+    .card .go.primary { font-weight: 600; }
+    .card .go:hover { text-decoration: underline; }
+    .card .go:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; border-radius: 3px; }
+    .card .acts .switch { margin-left: auto; }
+    .switch { all: unset; cursor: pointer; font-size: 11.5px; color: var(--text-2); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); }
+    .switch:hover { color: var(--text); border-color: var(--line2); }
+    .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; }
+
+    /* 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; }
+    .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; }
+    .orow { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; border-radius: 6px; }
+    .orow.sel { background: var(--accent-bg); }
+    .orow.cur .ol { font-weight: 600; color: var(--text); }
+    .odisc { all: unset; cursor: pointer; width: 16px; text-align: center; color: var(--text-muted); font-size: 10px; line-height: 22px; }
+    .odisc:focus-visible, .oname:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; border-radius: 4px; }
+    .oname { all: unset; cursor: pointer; display: flex; align-items: flex-start; gap: 6px; min-width: 0; padding: 3px 6px 3px 2px; border-radius: 6px; color: var(--text-2); }
+    .oname:hover { background: var(--raise); color: var(--text); }
+    .oname .loop-ic { flex: none; color: var(--text-muted); }
+    .ol { flex: 1; min-width: 0; overflow-wrap: break-word; font-family: var(--mono); line-height: 1.35; }
+    .obar { flex: none; width: 32px; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--track); overflow: hidden; }
+    .obar i { display: block; height: 100%; background: var(--meter); }
+    .ocount { flex: none; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+    .onote { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0 6px 2px 2px; font-size: 11px; }
+    .onote .err { color: var(--status-failed); }
+    .onote .warn { color: var(--status-attention); }
+    .onote .live { color: var(--status-running); }
+    .onote .mut { color: var(--text-muted); }
+    .odet { margin-bottom: 8px; }
+    .odet > summary { cursor: pointer; font-size: 12px; color: var(--text-2); padding: 2px 0; }
+    .odet .outline { border-right: none; max-height: 50vh; }
+  `,
+];
+
+/** The executor icons as the generic graph draws them: in a node's name, the legend, the table and a loop's passes. */
+export const iconStyles = [
+  executorIconStyles,
+  css`
+    .node .k-ic { width: 16px; height: 16px; margin-right: 6px; border-radius: 4px; font-size: 9.5px; }
+    .legend .k-ic { width: 14px; height: 14px; margin: 0; border-radius: 4px; font-size: 8.5px; }
+    .list .k-ic { width: 16px; height: 16px; border-radius: 4px; font-size: 9.5px; }
+    .list .nm .k-ic { margin: 0 -2px 0 0; }
+    .matrix thead th.nh .k-ic { width: 14px; height: 14px; margin-right: 5px; border-radius: 4px; font-size: 8.5px; vertical-align: -2px; }
+  `,
+];