Files
skills/orchestrator/templates/page-graph-charts.js
T
Kevin Veen-BirkenbachandClaude Opus 5.5 c035373518 feat(orchestrator)!: S0 English everywhere, Sécurité, NATO hashes, ICAO digits
Requirement 001 phase 6, S0:

- Speech: the security class shows as "Sécurité" and is spoken as in
  maritime radio, "say-cure-ee-tay" three times. A hex run of 7 or more
  characters with a letter and a digit (commit, session, message ids) is
  spelled in the NATO alphabet; every other digit is spoken on its own
  in ICAO pronunciation (42305: four two tree zero fife). The spelling
  runs inside clip() before the length cut, so a phrase still fits
  SPEECH_LIMIT; the displayed text keeps its digits and hashes.
- English: every orchestrator label, tooltip, message, error, script
  output, document and test string is English (Regeln -> Firewall,
  Hierarchie -> Hierarchy, Steuerung -> Controls, Ausführen -> Run, ...);
  the page declares lang="en" and formats dates as en-GB. Task filter
  ids are English. German stays only in the skill trigger phrases that
  quote the operator, and as identifiers: the view keys (view=) and the
  leitstand id.
- tests/test_english.py scans every tracked text file for umlauts and
  German words, with an allowlist of the quoted trigger phrases.

BREAKING CHANGE: the Stream search tokens art: and seit: are now kind:
and since:; an old art: or seit: token counts as a plain word.

Evidence: make test 657 OK, ruff and markdownlint clean
(/tmp/s0-make-test-1.log); e2e 17 OK, none skipped (/tmp/s0-e2e-1.log);
MEDUSA 86 files, 24 findings on reworded strings accepted after an
independent skeptic (21 path:line, 0 rejected, no behaviour change in
signing, approving, rules, denying, offices, events), rescan 0 open.

🎯 Fix: 93 %
💥 Break: 4 %
💸 Cost: 100 %
⏱️ Time: –
🛡️ Security: 100 %
🏆 Score: 89
🚦 Gate: ✅ 90/5, cost and time <= 100, security 100 %

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-08 17:26:51 +00:00

197 lines
11 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
function orbit() {
const nodes = state.graph.nodes;
positions = layout(nodes);
const svg = chartFrame(400, "Orbit: operator in the middle; whoever works or radios together moves closer, the silent drift outward");
svg.append(...RINGS.map((r) => s("circle", {class: "ring", r})));
const edgeLayer = s("g", {});
const halos = new Map();
for (const link of aggregate()) {
const from = positions.get(link.source);
const shade = tone(link.cls);
const words = `${link.count}× ${CLASSES[link.cls] || link.cls}`;
if (!from) {
continue;
}
if (link.target === "*") {
const index = halos.get(link.source) || 0;
halos.set(link.source, index + 1);
edgeLayer.append(s("circle", {class: `halo t-${shade}`, cx: fixed(from.x), cy: fixed(from.y), r: radiusOf(link.source) + 7 + index * 7, "stroke-width": width(link.count)},
s("title", {}, `${link.source} to all: ${words}`)));
continue;
}
const to = positions.get(link.target);
if (!to || to === from) {
continue;
}
const control = Space.bend(from, to);
const start = toward(from, control, radiusOf(link.source) + 2);
const end = toward(to, control, radiusOf(link.target) + 4);
edgeLayer.append(s("path", {class: `edge t-${shade}`, d: `M${fixed(start.x)},${fixed(start.y)} Q${fixed(control.x)},${fixed(control.y)} ${fixed(end.x)},${fixed(end.y)}`, "stroke-width": fixed(width(link.count)), "marker-end": `url(#tip-${shade})`},
s("title", {}, `${link.source} → ${link.target}: ${words}`)));
}
const nodeLayer = s("g", {}, nodes.map((node) => nodeMark(node, positions.get(node.id), node.kind === "operator" || node.kind === "subagent" ? null : RADIUS[node.kind] + 9)));
const pulseLayer = s("g", {});
svg.append(edgeLayer, nodeLayer, pulseLayer);
graphDom.pulses = pulseLayer;
return svg;
}
function chord() {
const nodes = state.graph.nodes.filter((node) => node.kind !== "subagent");
const fresh = targets();
const radius = 250;
const step = (2 * Math.PI) / Math.max(nodes.length, 1);
const spots = new Map(nodes.map((node) => {
const angle = spotOf(node.id, fresh).chord;
return [node.id, {x: radius * Math.cos(angle), y: radius * Math.sin(angle), angle}];
}));
const svg = chartFrame(450, "Chord: messages between agents, ordered by closeness");
const arcs = s("g", {});
const point = (angle, r) => `${fixed(r * Math.cos(angle))},${fixed(r * Math.sin(angle))}`;
for (const node of nodes) {
const at = spots.get(node.id);
const half = Math.min(step * 0.36, 0.5);
arcs.append(s("path", {class: `group-arc k-${node.kind}`, d: `M${point(at.angle - half, radius + 14)} A${radius + 14},${radius + 14} 0 0 1 ${point(at.angle + half, radius + 14)}`}));
}
const pairs = new Map();
const fans = new Map();
for (const link of aggregate()) {
const shade = tone(link.cls);
if (!spots.has(link.source)) {
continue;
}
if (link.target === "*") {
const key = `${link.source}\u0000${shade}`;
fans.set(key, {source: link.source, shade, count: (fans.has(key) ? fans.get(key).count : 0) + link.count});
continue;
}
if (!spots.has(link.target) || link.target === link.source) {
continue;
}
const [a, b] = [link.source, link.target].sort();
const key = `${a}\u0000${b}\u0000${shade}`;
pairs.set(key, {a, b, shade, count: (pairs.has(key) ? pairs.get(key).count : 0) + link.count});
}
const lanes = LEGEND.map(([name]) => name);
for (const pair of pairs.values()) {
const from = spots.get(pair.a);
const to = spots.get(pair.b);
const pull = 0.06 + 0.12 * lanes.indexOf(pair.shade);
const control = {x: ((from.x + to.x) / 2) * pull, y: ((from.y + to.y) / 2) * pull};
const start = toward(from, control, RADIUS.session + 2);
const end = toward(to, control, RADIUS.session + 2);
arcs.append(s("path", {class: `edge t-${pair.shade}`, d: `M${fixed(start.x)},${fixed(start.y)} Q${fixed(control.x)},${fixed(control.y)} ${fixed(end.x)},${fixed(end.y)}`, "stroke-width": fixed(width(pair.count))},
s("title", {}, `${pair.a} ↔ ${pair.b}: ${pair.count}× ${LEGEND.find(([name]) => name === pair.shade)[1]}`)));
}
const offsets = new Map();
for (const fan of fans.values()) {
const at = spots.get(fan.source);
const index = offsets.get(fan.source) || 0;
offsets.set(fan.source, index + 1);
const angle = at.angle + (index - 1) * 0.05;
const length = Math.min(8 + 6 * Math.log2(1 + fan.count), 40);
arcs.append(s("line", {class: `tick t-${fan.shade}`, x1: fixed((radius + 22) * Math.cos(angle)), y1: fixed((radius + 22) * Math.sin(angle)), x2: fixed((radius + 22 + length) * Math.cos(angle)), y2: fixed((radius + 22 + length) * Math.sin(angle)), "stroke-width": 4},
s("title", {}, `${fan.source} to all: ${fan.count}×`)));
}
svg.append(arcs, s("g", {}, nodes.map((node) => nodeMark(node, spots.get(node.id), 74))));
return svg;
}
function swimlane() {
const rank = new Map([HUMAN, ...state.graph.layout.order].map((id, index) => [id, index]));
const lanes = state.graph.nodes.filter((node) => node.kind !== "subagent").sort((a, b) => (rank.has(a.id) ? rank.get(a.id) : 1e6) - (rank.has(b.id) ? rank.get(b.id) : 1e6));
const begin = state.since;
const end = Math.max(state.until, state.since + 1);
const left = 160;
const right = 24;
const top = 40;
const lane = 36;
const full = 1120;
const height = top + lanes.length * lane + 12;
const x = (ts) => left + ((ts - begin) / (end - begin)) * (full - left - right);
const y = new Map(lanes.map((node, index) => [node.id, top + index * lane + lane / 2]));
const svg = s("svg", {viewBox: `0 0 ${full} ${height}`, class: "chart", role: "img", "aria-label": "Swimlane: messages over time"}, defs());
lanes.forEach((node, index) => {
svg.append(s("rect", {class: index % 2 ? "lane odd" : "lane", x: 0, y: top + index * lane, width: full, height: lane}));
svg.append(s("text", {class: "lane-label", x: 14, y: top + index * lane + lane / 2, dy: "0.35em", "text-anchor": "start", on: {click: () => select(node.id)}}, node.label));
});
for (let index = 0; index <= 6; index += 1) {
const ts = begin + ((end - begin) * index) / 6;
svg.append(s("line", {class: "grid", x1: fixed(x(ts)), x2: fixed(x(ts)), y1: top - 6, y2: height - 8}));
svg.append(s("text", {class: "axis", x: fixed(x(ts)), y: top - 14, "text-anchor": index === 0 ? "start" : index === 6 ? "end" : "middle"}, (end - begin > DAY ? absolute : clock).format(stampOf(ts))));
}
if (live()) {
svg.append(s("line", {class: "now", x1: fixed(x(end)), x2: fixed(x(end)), y1: top - 6, y2: height - 8}));
}
const marks = s("g", {});
const arrows = (cls, ts, from, to, words) => {
const x0 = fixed(x(ts));
const y0 = y.get(from);
if (y0 === undefined) {
return;
}
const shade = tone(cls);
const hint = s("title", {}, `${clock.format(stampOf(ts))} · ${dash(labelOf(from))} → ${to.length ? to.map(labelOf).join(", ") : "all"}\n${words}`);
if (!to.length) {
const rays = [[-6, -13], [0, -15], [6, -13], [-6, 13], [0, 15], [6, 13]].map(([dx, dy]) => `M${x0},${y0} l${dx},${dy}`).join(" ");
marks.append(s("g", {class: `mark t-${shade}`}, hint, s("path", {d: rays}), s("circle", {cx: x0, cy: y0, r: 3.5})));
return;
}
const bundle = s("g", {class: `mark t-${shade}`}, hint, s("circle", {cx: x0, cy: y0, r: 3}));
for (const target of to) {
const y1 = y.get(target);
if (y1 !== undefined && y1 !== y0) {
bundle.append(s("line", {x1: x0, y1: y0, x2: x0, y2: y1 > y0 ? y1 - 6 : y1 + 6, "marker-end": `url(#tip-${shade})`}));
}
}
marks.append(bundle);
};
for (const row of state.radio) {
arrows(row.class, row.ts, row.source, row.targets, row.text.length > 120 ? `${row.text.slice(0, 120)}…` : row.text);
}
for (const grant of state.grants) {
arrows("grant", grant.ts, chairKey(), [grant.target], `Queue grant ${grant.kind} (${grant.id})`);
}
svg.append(marks);
return svg;
}
function legend() {
return h("div", {class: "legend"}, LEGEND.map(([name, label]) => h("span", {}, h("i", {class: `swatch t-${name}`}), label)),
h("span", {class: "muted"}, "Line width = count · closeness = recent collaboration"));
}
function side() {
const node = state.graph.nodes.find((entry) => entry.id === ui.node);
if (!node) {
return [h("h2", {class: "panel-title"}, "Details"), h("p", {class: "muted"}, "Click a node: its panel shows tasks, claims, subagents and history.")];
}
const messages = state.radio.filter((row) => row.source === node.id || row.targets.includes(node.id)).slice(-10).reverse();
return [
h("div", {class: "panel-head"},
h("div", {}, h("h2", {class: "panel-title"}, node.label), h("span", {class: "muted"}, `${NODE_KINDS[node.kind]}${node.parent ? ` of ${labelOf(node.parent)}` : ""}`)),
iconBtn("bi-x-lg", "Close", "btn small ghost", () => select(node.id))),
h("h3", {}, "Latest messages", counter(messages.length)),
messages.length ? h("ul", {class: "mini"}, messages.map((row) => h("li", {},
h("div", {class: "row"}, klass(row.class), when(row.ts)),
h("span", {class: "muted"}, `${dash(row.from)} → ${targetsOf(row)}`),
h("span", {}, row.text)))) : h("p", {class: "muted"}, "No messages in the chosen time range."),
];
}
function viewSwitch(screen) {
return h("div", {class: "segmented", role: "group", "aria-label": "View"}, Nav.viewsOf(screen).map(([id, name]) => h("button", {
type: "button", class: "icon-only", ...named(name), "aria-pressed": String(ui.views[screen] === id), on: {click: () => go(screen, id)},
}, icon(Nav.ICONS[id]))));
}
function agentsScreen() {
const view = ui.views.agents;
const stageBox = h("div", {class: "stage"});
const aside = h("aside", {class: "card panel", "aria-live": "polite"});
const toolbar = agentsToolbar();
graphDom = {stage: stageBox, aside, pulses: null, toolbar};
const body = view === "tree" ? spawnScreen() : view === "hierarchy" ? hierarchyScreen() : h("div", {class: "graph-body"}, h("div", {class: "card stage-card"}, stageBox, view === "3d" ? null : legend()), aside);
return h("div", {class: "graph"}, toolbar.bar, h("div", {class: "card controls"}, viewSwitch("agents"), view === "3d" ? layoutTools("agents") : null), body);
}