@qvac/harness 1.0.0-rc.0 → 1.0.0-rc.2

package/dist-lib/plugins/run-report/story.d.ts

@@ -0,0 +1,48 @@
+export type Outcome = 'ok' | 'failed' | 'rejected' | 'denied' | 'pending';
+export interface StoryCall {
+    round: number;
+    id: string;
+    name: string;
+    args: unknown;
+    outcome: Outcome;
+    detail: string;
+    result: unknown;
+    approved: boolean | null;
+    durationMs: number | null;
+    step: number | null;
+}
+export interface StoryRound {
+    round: number;
+    text: string;
+    calls: StoryCall[];
+    durationMs: number | null;
+    tokens: number | null;
+    step: number | null;
+}
+export interface Problem {
+    label: string;
+    count: number;
+}
+export interface ToolTally {
+    name: string;
+    calls: number;
+    outcomes: Record<Outcome, number>;
+    problems: Problem[];
+}
+export interface Story {
+    prompt: string;
+    rounds: StoryRound[];
+    tools: ToolTally[];
+}
+export interface SeenCall {
+    name: string;
+    args: unknown;
+    step: number;
+}
+export interface StoryInput {
+    context: Record<string, unknown>;
+    calls: Map<string, SeenCall>;
+    approvals: Map<string, boolean>;
+    requests: Map<number, number>;
+}
+export declare function story(input: StoryInput): Story;

package/dist-lib/plugins/run-report/story.js

@@ -0,0 +1,188 @@
+import { isRecord } from '../../lib/guards.js';
+const TOOL_RESULT = /^\[Tool: (.+?) \((.+?)\)\]\n?/;
+export function story(input) {
+    const teller = new Teller(input);
+    const history = Array.isArray(input.context.history) ? input.context.history : [];
+    for (const message of history) {
+        teller.add(Object(message));
+    }
+    teller.unanswered();
+    const asked = Object(history.find((message) => Object(message).role === 'user')).content;
+    return { prompt: request(asked), rounds: teller.rounds, tools: tally(teller.rounds) };
+}
+class Teller {
+    rounds = [];
+    input;
+    failures;
+    roundMetrics;
+    toolMetrics;
+    timed = new Set();
+    told = new Set();
+    constructor(input) {
+        const metrics = Object(input.context.metrics);
+        this.input = input;
+        this.failures = isRecord(input.context.failureResults) ? input.context.failureResults : {};
+        this.roundMetrics = Array.isArray(metrics.rounds) ? metrics.rounds : [];
+        this.toolMetrics = Array.isArray(metrics.tools) ? metrics.tools : [];
+    }
+    add(entry) {
+        if (entry.role === 'assistant') {
+            this.open(entry);
+            return;
+        }
+        const reply = replyOf(entry, this.failures);
+        const current = this.rounds.at(-1);
+        if (reply && current) {
+            current.calls.push(this.call(current.round, reply));
+        }
+    }
+    open(entry) {
+        const round = this.rounds.length;
+        const measured = Object(this.roundMetrics.find((item) => Object(item).round === round));
+        this.rounds.push({
+            round,
+            text: prose(entry.content),
+            calls: [],
+            durationMs: typeof measured.durationMs === 'number' ? measured.durationMs : null,
+            tokens: typeof measured.generatedTokens === 'number' ? measured.generatedTokens : null,
+            step: this.input.requests.get(round) ?? null
+        });
+    }
+    unanswered() {
+        for (const [key, seen] of this.input.calls) {
+            const round = this.rounds[Number(key.split(':')[0])];
+            if (!this.told.has(key) && round) {
+                const id = key.slice(key.indexOf(':') + 1);
+                round.calls.push({
+                    ...this.call(round.round, { name: seen.name, id, result: undefined }),
+                    outcome: 'pending',
+                    detail: 'no result'
+                });
+            }
+        }
+    }
+    call(round, reply) {
+        const key = `${round}:${reply.id}`;
+        this.told.add(key);
+        const [outcome, detail] = judge(reply.result);
+        const seen = this.input.calls.get(key);
+        return {
+            round,
+            id: reply.id,
+            name: reply.name,
+            args: seen?.args,
+            outcome,
+            detail,
+            result: reply.result,
+            approved: this.input.approvals.get(key) ?? null,
+            durationMs: this.duration(round, reply.name),
+            step: seen?.step ?? null
+        };
+    }
+    duration(round, name) {
+        const at = this.toolMetrics.findIndex((item, index) => !this.timed.has(index) && Object(item).round === round && Object(item).name === name);
+        this.timed.add(at);
+        const measured = Object(this.toolMetrics[at]).durationMs;
+        return typeof measured === 'number' ? measured : null;
+    }
+}
+function replyOf(entry, failures) {
+    if (entry.type === 'qvac-failure-result-ref' && typeof entry.ref === 'string') {
+        const kept = Object(failures[entry.ref]);
+        const result = Object(kept.result);
+        return { name: String(kept.name ?? '?'), id: String(entry.callId), result: result.value };
+    }
+    if (entry.role !== 'tool' || typeof entry.content !== 'string') {
+        return null;
+    }
+    const head = TOOL_RESULT.exec(entry.content);
+    if (!head) {
+        return null;
+    }
+    return {
+        name: head[1] ?? '?',
+        id: head[2] ?? '?',
+        result: parse(entry.content.slice(head[0].length))
+    };
+}
+function judge(result) {
+    const body = Object(result);
+    if (body.denied === true) {
+        return ['denied', 'declined'];
+    }
+    if (body.guidance === true) {
+        return ['rejected', line(body.error)];
+    }
+    const error = errorOf(result);
+    return error === null ? ['ok', ''] : ['failed', label(error, body)];
+}
+function errorOf(result) {
+    if (typeof result === 'string') {
+        return /^(error|failed)\b/i.test(result.trim()) ? result : null;
+    }
+    const body = Object(result);
+    if (body.error !== undefined && body.error !== null && body.error !== false) {
+        return typeof body.error === 'string'
+            ? body.error
+            : String(Object(body.error).message ?? JSON.stringify(body.error));
+    }
+    return body.ok === false ? String(body.message ?? 'not ok') : null;
+}
+function label(error, body) {
+    const status = [body.status, body.statusCode, Object(body.error).status].find((value) => typeof value === 'number' && value >= 400);
+    if (typeof status === 'number') {
+        return `HTTP ${status}`;
+    }
+    const named = /\b(?:HTTP|status(?: code)?)\D{0,3}([45]\d\d)\b/i.exec(error);
+    return named ? `HTTP ${named[1]}` : line(error);
+}
+function tally(rounds) {
+    const tools = new Map();
+    for (const call of rounds.flatMap((round) => round.calls)) {
+        const tool = tools.get(call.name) ?? {
+            name: call.name,
+            calls: 0,
+            outcomes: { ok: 0, failed: 0, rejected: 0, denied: 0, pending: 0 },
+            problems: []
+        };
+        tool.calls++;
+        tool.outcomes[call.outcome]++;
+        if (call.outcome !== 'ok') {
+            const known = tool.problems.find((problem) => problem.label === call.detail);
+            if (known) {
+                known.count++;
+            }
+            else {
+                tool.problems.push({ label: call.detail, count: 1 });
+            }
+        }
+        tools.set(call.name, tool);
+    }
+    return [...tools.values()].sort((a, b) => b.calls - a.calls);
+}
+function prose(content) {
+    const text = typeof content === 'string' ? content : '';
+    return text
+        .replace(/<think>[\s\S]*?<\/think>/g, '')
+        .replace(/<tool_call>[\s\S]*?<\/tool_call>/g, '')
+        .replace(/<function=[\s\S]*?<\/function>/g, '')
+        .trim();
+}
+function request(content) {
+    const text = typeof content === 'string' ? content : '';
+    return text.replace(/^\[Current local time:[^\]]*\]\s*/, '').trim();
+}
+function parse(text) {
+    try {
+        return JSON.parse(text);
+    }
+    catch {
+        return text;
+    }
+}
+function line(value) {
+    const first = String(value ?? '')
+        .split('\n')[0]
+        ?.trim() ?? '';
+    return first.length > 90 ? `${first.slice(0, 90)}…` : first;
+}

package/dist-lib/plugins/run-report/style.d.ts

@@ -0,0 +1 @@
+export declare const STYLE = "\n:root {\n  color-scheme: light;\n  --canvas: #eef0f3;\n  --surface: #ffffff;\n  --raised: #eef0f3;\n  --fg: #1c1e21;\n  --fg-muted: #646a73;\n  --fg-faint: #a3a8b0;\n  --border: #e9ecef;\n  --primary: #08735f;\n  --primary-soft: #e3f4ef;\n  --on-primary: #ffffff;\n  --good-bg: #e4f6ea;\n  --good-fg: #1a7a43;\n  --bad-bg: #fde8e8;\n  --bad-fg: #c53030;\n  --warn-bg: #fef3d7;\n  --warn-fg: #8a5a0f;\n  --info-bg: #ccdff8;\n  --info-fg: #1e56a3;\n  --violet-bg: #ddd3fa;\n  --violet-fg: #5737b5;\n  --shadow-soft: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06);\n  --shadow-card: 0 2px 6px -2px rgb(16 24 40 / 0.06), 0 8px 24px -6px rgb(16 24 40 / 0.1);\n  --mono: 'Inconsolata', ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme='light']) {\n    color-scheme: dark;\n    --canvas: #161718;\n    --surface: #252728;\n    --raised: #1e1f20;\n    --fg: #ffffff;\n    --fg-muted: #9a9b9c;\n    --fg-faint: #5f6163;\n    --border: #2e3031;\n    --primary: #16e3c1;\n    --primary-soft: #095b4d;\n    --on-primary: #0f1010;\n    --good-bg: #18482d;\n    --good-fg: #5cc98a;\n    --bad-bg: #602222;\n    --bad-fg: #f58b8b;\n    --warn-bg: #65511a;\n    --warn-fg: #fdca40;\n    --info-bg: #1b2b42;\n    --info-fg: #8db9f5;\n    --violet-bg: #2b2442;\n    --violet-fg: #b6a3f6;\n    --shadow-soft: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 2px rgb(0 0 0 / 0.3);\n    --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 2px 8px -2px rgb(0 0 0 / 0.35), 0 12px 32px -8px rgb(0 0 0 / 0.45);\n  }\n}\n:root[data-theme='dark'] {\n  color-scheme: dark;\n  --canvas: #161718;\n  --surface: #252728;\n  --raised: #1e1f20;\n  --fg: #ffffff;\n  --fg-muted: #9a9b9c;\n  --fg-faint: #5f6163;\n  --border: #2e3031;\n  --primary: #16e3c1;\n  --primary-soft: #095b4d;\n  --on-primary: #0f1010;\n  --good-bg: #18482d;\n  --good-fg: #5cc98a;\n  --bad-bg: #602222;\n  --bad-fg: #f58b8b;\n  --warn-bg: #65511a;\n  --warn-fg: #fdca40;\n  --info-bg: #1b2b42;\n  --info-fg: #8db9f5;\n  --violet-bg: #2b2442;\n  --violet-fg: #b6a3f6;\n  --shadow-soft: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 2px rgb(0 0 0 / 0.3);\n  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 2px 8px -2px rgb(0 0 0 / 0.35), 0 12px 32px -8px rgb(0 0 0 / 0.45);\n}\n* { box-sizing: border-box; }\nhtml, body { background: var(--canvas); }\nbody {\n  margin: 0;\n  color: var(--fg);\n  font: 14px/1.55 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\ncode, .mono { font-family: var(--mono); font-weight: 600; }\ncode { background: var(--raised); padding: 1px 5px; border-radius: 4px; font-size: 0.95em; }\nbutton { font: inherit; color: inherit; }\nmain { max-width: 1480px; margin: 0 auto; padding: 0 16px 80px; }\n\n.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }\n.brand { display: flex; align-items: center; gap: 12px; color: var(--primary); }\n.brand svg { display: block; }\n.brand span {\n  color: var(--fg-muted); font: 500 13px/1 var(--mono); letter-spacing: 0.06em;\n  text-transform: uppercase; padding-left: 12px; border-left: 1px solid var(--border);\n}\n.pill {\n  font-size: 13px; color: var(--fg-muted); background: var(--surface); border: 0;\n  border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow-soft); cursor: pointer;\n}\n.pill:hover { color: var(--fg); }\n.pill[aria-pressed='true'] { background: var(--primary-soft); color: var(--fg); }\n\n.card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); }\n.hero { padding: 28px 32px 24px; position: relative; overflow: hidden; }\n.hero::after {\n  content: ''; position: absolute; inset: 0 0 auto auto; width: 320px; height: 320px;\n  background: radial-gradient(circle at 70% 30%, var(--primary-soft), transparent 65%); pointer-events: none;\n}\n.hero > * { position: relative; z-index: 1; }\n.eyebrow {\n  font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;\n  color: var(--primary); margin: 0 0 10px;\n}\nh1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; }\nh2 { font-size: 18px; letter-spacing: -0.01em; margin: 0 0 4px; }\nh3 { font-size: 13px; margin: 18px 0 8px; color: var(--fg-muted); font-weight: 600; }\n.lede { color: var(--fg-muted); margin: 0; }\n.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }\n.chip {\n  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; border-radius: 999px;\n  padding: 3px 10px; background: var(--raised); color: var(--fg-muted); white-space: nowrap;\n}\n.chip.good { background: var(--good-bg); color: var(--good-fg); }\n.chip.bad { background: var(--bad-bg); color: var(--bad-fg); }\n.chip.warn { background: var(--warn-bg); color: var(--warn-fg); }\n.chip.info { background: var(--info-bg); color: var(--info-fg); }\n.chip.accent { background: var(--primary-soft); color: var(--fg); }\n.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 20px; }\n.tile { background: var(--raised); border-radius: 12px; padding: 12px 14px; }\n.tile b { display: block; font-size: 20px; letter-spacing: -0.02em; }\n.tile span { color: var(--fg-muted); font: 500 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }\ndetails.answer { margin-top: 16px; }\ndetails summary { cursor: pointer; color: var(--fg-muted); }\ndetails summary:hover { color: var(--fg); }\n\nsection { margin-top: 28px; }\n.section-lede { color: var(--fg-muted); margin: 0 0 14px; max-width: 900px; }\n.notice { background: var(--warn-bg); color: var(--warn-fg); border-radius: 10px; padding: 10px 14px; margin-top: 14px; }\n\n.board { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; align-items: start; }\n@media (max-width: 1080px) { .board { grid-template-columns: minmax(0, 1fr); } }\n.flow { padding: 0; overflow: hidden; display: flex; flex-direction: column; }\n.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }\n.toolbar .grow { flex: 1; }\n.legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--fg-muted); font-size: 12px; }\n.legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }\n.legend .l-taken i { border-color: var(--primary); border-top-width: 3px; }\n.legend .l-now i { border-color: var(--fg); border-top-width: 3px; }\n.legend .l-trouble i { border-color: var(--warn-fg); border-top-width: 3px; }\n.legend .l-person i { border-color: var(--info-fg); border-top-width: 3px; }\n.legend .l-error i { border-color: var(--bad-fg); border-top-width: 3px; }\n.legend .l-not i { border-color: var(--fg-faint); border-top-style: dashed; }\n.canvas { overflow: auto; height: min(78vh, 900px); cursor: grab; background:\n  radial-gradient(circle, var(--border) 1px, transparent 1.2px) 0 0 / 18px 18px; }\n.canvas.dragging { cursor: grabbing; }\n.canvas svg { display: block; }\n\n.player { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--border); }\n.player .buttons { display: flex; gap: 6px; }\n.player button {\n  border: 0; background: var(--raised); border-radius: 8px; width: 34px; height: 30px; cursor: pointer; color: var(--fg-muted);\n}\n.player button:hover { color: var(--fg); }\n.player button.play { background: var(--primary); color: var(--on-primary); }\n.player input[type='range'] { width: 100%; accent-color: var(--primary); }\n.player .where { font: 600 13px/1.2 var(--mono); color: var(--fg-muted); white-space: nowrap; }\n.ticks { grid-column: 1 / -1; display: flex; height: 10px; gap: 1px; }\n.ticks { height: 16px; align-items: flex-end; }\n.ticks span { flex: 1; height: 8px; border-radius: 2px; background: var(--fg-faint); opacity: 0.35; cursor: pointer; }\n.ticks span.gap { margin-left: 4px; }\n.ticks span.s-ok, .ticks span.s-done { background: var(--good-fg); opacity: 0.45; }\n.ticks span.s-rejected { background: var(--warn-fg); opacity: 0.8; }\n.ticks span.s-failed, .ticks span.s-error { background: var(--bad-fg); opacity: 0.8; }\n.ticks span.s-denied { background: var(--violet-fg); opacity: 0.8; }\n.ticks span.decide { height: 16px; opacity: 1; }\n.ticks span.asked { background: var(--info-fg); opacity: 0.9; height: 12px; }\n.ticks span.at { opacity: 1; height: 16px; outline: 2px solid var(--primary); outline-offset: 1px; }\n.jumps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--border); }\n.jumps .chip { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; }\n.ctx { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--raised); color: var(--fg-muted); cursor: pointer; text-decoration: none; }\n.ctx.s-rejected { background: var(--warn-bg); color: var(--warn-fg); }\n.ctx.s-failed, .ctx.s-error { background: var(--bad-bg); color: var(--bad-fg); }\n.ctx.s-denied { background: var(--violet-bg); color: var(--violet-fg); }\n.ctx.s-ok { background: var(--good-bg); color: var(--good-fg); }\n.reason.t-trouble, .reason.t-limit { background: var(--warn-bg); color: var(--warn-fg); }\n.reason.t-person { background: var(--info-bg); color: var(--info-fg); }\n.reason.t-error { background: var(--bad-bg); color: var(--bad-fg); }\n.reason:not([class*=' o-']):not([class*=' t-']) { background: var(--raised); color: var(--fg); font-weight: 500; }\n\n/* what happened */\n.offered { color: var(--fg-muted); font-size: 13px; margin: 12px 0 0; }\n.chip.o-failed, .call.o-failed .badge, .bar .o-failed { background: var(--bad-bg); color: var(--bad-fg); }\n.chip.o-rejected, .call.o-rejected .badge, .bar .o-rejected { background: var(--warn-bg); color: var(--warn-fg); }\n.chip.o-denied, .call.o-denied .badge, .bar .o-denied { background: var(--violet-bg); color: var(--violet-fg); }\n.chip.o-pending, .call.o-pending .badge, .bar .o-pending { background: var(--raised); color: var(--fg-muted); }\n.chip.o-ok, .call.o-ok .badge, .bar .o-ok { background: var(--good-bg); color: var(--good-fg); }\n.bar .o-ok { background: var(--good-fg); }\n.bar .o-failed { background: var(--bad-fg); }\n.bar .o-rejected { background: var(--warn-fg); }\n.bar .o-denied { background: var(--violet-fg); }\n.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }\n.tool { padding: 14px 16px; box-shadow: var(--shadow-soft); }\n.tool.trouble { box-shadow: var(--shadow-soft), inset 3px 0 0 var(--bad-fg); }\n.tool-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }\n.tool-head code { font-size: 14px; background: none; padding: 0; }\n.muted { color: var(--fg-muted); font-size: 12.5px; }\n.bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 10px 0 2px; gap: 2px; background: var(--raised); }\n.tool .chips { margin-top: 8px; }\n.problems { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--fg-muted); }\n.problems .count { font: 700 12px var(--mono); color: var(--bad-fg); }\n.timeline { padding: 6px 0; }\n.round { padding: 12px 20px; border-top: 1px solid var(--border); }\n.round:first-child { border-top: 0; }\n.round-head { display: flex; align-items: baseline; gap: 10px; }\n.round-head .step { margin-left: auto; }\n.round blockquote { margin: 8px 0 4px; padding: 6px 12px; border-left: 3px solid var(--primary); color: var(--fg); white-space: pre-wrap; font-size: 13.5px; background: var(--raised); border-radius: 0 8px 8px 0; }\n.call { margin-top: 6px; border-radius: 10px; background: var(--raised); }\n.call summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 10px; list-style: none; }\n.call summary::-webkit-details-marker { display: none; }\n.call summary code { background: none; padding: 0; }\n.call .badge { font: 700 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 7px; border-radius: 6px; }\n.call .args { color: var(--fg-muted); font: 500 12px var(--mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 160px; }\n.call .detail { color: var(--bad-fg); font-size: 12.5px; flex-basis: 100%; }\n.call.o-rejected .detail { color: var(--warn-fg); }\n.call.o-denied .detail { color: var(--violet-fg); }\n.call .muted { margin-left: auto; }\n.call .sides { padding: 0 10px 10px; }\n.call[open] { box-shadow: inset 0 0 0 1px var(--border); }\n\n/* the run's flowchart */\n.views { display: flex; gap: 4px; padding: 3px; background: var(--raised); border-radius: 999px; }\n.views .pill { box-shadow: none; background: none; }\n.views .pill[aria-pressed='true'] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-soft); }\n.machine-only { display: none !important; }\n.on-machine .machine-only { display: flex !important; }\n.on-machine button.machine-only { display: inline-block !important; }\n.on-machine .flow-only { display: none !important; }\n.legend span i { border-color: currentColor; }\n.legend .o-ok { color: var(--good-fg); }\n.legend .o-failed { color: var(--bad-fg); }\n.legend .o-rejected { color: var(--warn-fg); }\n.legend .o-denied { color: var(--violet-fg); }\n.legend .o-ok i, .legend .o-failed i, .legend .o-rejected i, .legend .o-denied i { border-top-width: 3px; }\n.fn { cursor: pointer; }\n.fn .body { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }\n.fn .title { fill: var(--fg); font: 700 13.5px 'Geist', sans-serif; }\n.fn .title.mono { font: 700 13.5px var(--mono); }\n.fn .meta { fill: var(--fg-muted); font: 500 11.5px var(--mono); }\n.fn .line { fill: var(--fg-muted); font: 500 12.5px 'Geist', sans-serif; }\n.fn .badge { fill: var(--info-fg); font: 600 11.5px 'Geist', sans-serif; }\n.fn .pill-t { font: 700 10px var(--mono); letter-spacing: 0.06em; }\n.fn.k-start .body, .fn.k-round .body { fill: var(--raised); }\n.fn.k-round .title::before { content: ''; }\n.fn.s-ok .body { stroke: var(--good-fg); }\n.fn.s-ok .pill { fill: var(--good-bg); } .fn.s-ok .pill-t { fill: var(--good-fg); }\n.fn.s-failed .body { stroke: var(--bad-fg); stroke-width: 2.5; fill: var(--bad-bg); }\n.fn.s-failed .pill { fill: var(--bad-fg); } .fn.s-failed .pill-t { fill: var(--surface); }\n.fn.s-failed .line { fill: var(--bad-fg); font-weight: 600; }\n.fn.s-rejected .body { stroke: var(--warn-fg); stroke-width: 2.5; fill: var(--warn-bg); }\n.fn.s-rejected .pill { fill: var(--warn-fg); } .fn.s-rejected .pill-t { fill: var(--surface); }\n.fn.s-rejected .line { fill: var(--warn-fg); font-weight: 600; }\n.fn.s-denied .body { stroke: var(--violet-fg); stroke-width: 2.5; fill: var(--violet-bg); }\n.fn.s-denied .pill { fill: var(--violet-fg); } .fn.s-denied .pill-t { fill: var(--surface); }\n.fn.s-denied .line { fill: var(--violet-fg); font-weight: 600; }\n.fn.s-pending .body { stroke: var(--fg-faint); stroke-dasharray: 5 3; }\n.fn.s-pending .pill { fill: var(--raised); } .fn.s-pending .pill-t { fill: var(--fg-muted); }\n.fn.s-done .body { stroke: var(--good-fg); stroke-width: 2.5; }\n.fn.s-error .body { stroke: var(--bad-fg); stroke-width: 2.5; fill: var(--bad-bg); }\n.fn.s-error .line { fill: var(--bad-fg); }\n.fn.now .body { filter: drop-shadow(0 0 7px var(--primary)) drop-shadow(0 0 2px var(--primary)); }\n.fn.picked .body { stroke: var(--info-fg); stroke-width: 3.5; }\n.fn:hover .body { filter: brightness(1.06); }\n.fe { fill: none; stroke: var(--fg-faint); stroke-width: 1.6; }\n.fe.s-failed { stroke: var(--bad-fg); stroke-width: 2.2; }\n.fe.s-rejected { stroke: var(--warn-fg); stroke-width: 2.2; }\n.fe.s-denied { stroke: var(--violet-fg); stroke-width: 2.2; }\n.reason { border-radius: 10px; padding: 10px 12px; margin: 12px 0; font-size: 13.5px; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }\n.reason.o-failed { background: var(--bad-bg); color: var(--bad-fg); }\n.reason.o-rejected { background: var(--warn-bg); color: var(--warn-fg); }\n.reason.o-denied { background: var(--violet-bg); color: var(--violet-fg); }\n.reason.o-pending { background: var(--raised); color: var(--fg-muted); }\ndetails.mstep { border-top: 1px solid var(--border); padding: 6px 0; }\ndetails.mstep > summary { font-size: 13px; }\ndetails.mstep > summary .idx { font: 600 12px var(--mono); color: var(--fg-muted); margin-right: 6px; }\ndetails.mstep[open] { padding-bottom: 12px; }\ndetails.mstep.at > summary { color: var(--primary); font-weight: 600; }\ndetails.mstep .kicker { display: none; }\ndetails.mstep h2 { font-size: 14px; }\n\n/* the chart */\n.n rect, .n circle { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }\n.n text { fill: var(--fg); font: 600 13px var(--mono); }\n.n .grp { fill: var(--fg-muted); font: 600 9.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }\n.n .count { fill: var(--fg-muted); font: 500 11px var(--mono); }\n.n.unvisited rect { fill: var(--raised); stroke-dasharray: 4 3; }\n.n.unvisited text { fill: var(--fg-faint); }\n.n.visited rect { stroke: var(--primary); }\n.n.final rect { stroke-width: 3; stroke: var(--fg-muted); }\n.n.final.visited rect { stroke: var(--good-fg); }\n.n.start circle { fill: var(--fg); stroke: none; }\n.n.any rect { fill: var(--raised); stroke: var(--fg-faint); stroke-dasharray: 5 3; }\n.n.any text { fill: var(--fg-muted); font-style: italic; }\n.n.history circle { fill: var(--raised); }\n.n.now rect, .n.now circle { stroke: var(--fg); stroke-width: 3; filter: drop-shadow(0 0 6px var(--primary)); }\n.n.via rect { stroke: var(--fg); stroke-dasharray: 3 3; stroke-width: 2; }\n.n.picked rect, .n.picked circle { stroke: var(--info-fg); stroke-dasharray: 7 3; stroke-width: 3; }\n.n { cursor: pointer; }\n.e .line { fill: none; stroke: var(--fg-faint); stroke-width: 1.2; stroke-dasharray: 4 4; }\n.e .lab rect { fill: var(--surface); }\n.e .lab text { fill: var(--fg-faint); font: 500 11px var(--mono); }\n.e.taken .line { stroke: var(--primary); stroke-dasharray: none; }\n.e.taken .lab text { fill: var(--fg); }\n.e.taken .lab .n-taken { fill: var(--primary); font-weight: 700; }\n.e.hot .line { stroke: var(--fg) !important; stroke-width: 3.5 !important; }\n.e.hot .lab rect { fill: var(--surface); stroke: var(--fg); stroke-width: 1.5; }\n.e.hot .lab text { fill: var(--fg); }\n.ord circle { fill: var(--fg); }\n.ord text { fill: var(--surface); font: 700 11px var(--mono); }\n.callout rect { fill: var(--surface); stroke-width: 2; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.25)); }\n.callout text { fill: var(--fg); font: 500 12.5px 'Geist', sans-serif; }\n.callout text.head { font-weight: 700; }\n.callout.s-rejected rect { stroke: var(--warn-fg); } .callout.s-rejected text.head { fill: var(--warn-fg); }\n.callout.s-failed rect { stroke: var(--bad-fg); } .callout.s-failed text.head { fill: var(--bad-fg); }\n.callout.s-denied rect { stroke: var(--violet-fg); } .callout.s-denied text.head { fill: var(--violet-fg); }\n.e.picked .line { stroke: var(--info-fg); stroke-width: 4 !important; }\n.e { cursor: pointer; }\n.e .hit { stroke: transparent; stroke-width: 14; stroke-dasharray: none; fill: none; }\n\n/* what states mean, on the machine */\n.n.t-trouble.visited rect { stroke: var(--warn-fg); stroke-width: 2.5; fill: var(--warn-bg); }\n.n.t-person.visited rect { stroke: var(--info-fg); stroke-width: 2.5; fill: var(--info-bg); }\n.n.t-limit.visited rect { stroke: var(--warn-fg); stroke-width: 2.5; }\n.n.t-error.visited rect { stroke: var(--bad-fg); stroke-width: 2.5; fill: var(--bad-bg); }\n.n.t-trouble.unvisited rect, .n.t-limit.unvisited rect { stroke: var(--warn-fg); stroke-opacity: 0.5; }\n.n.t-error.unvisited rect { stroke: var(--bad-fg); stroke-opacity: 0.5; }\n.e.taken.to-trouble .line, .e.taken.to-limit .line { stroke: var(--warn-fg); }\n.e.taken.to-person .line { stroke: var(--info-fg); }\n.e.taken.to-error .line { stroke: var(--bad-fg); }\n.e.to-trouble .lab text, .e.to-limit .lab text { fill: var(--warn-fg); }\n.e.to-error .lab text { fill: var(--bad-fg); }\n.tb { cursor: pointer; }\n.tb rect { stroke: var(--surface); stroke-width: 2; }\n.tb text { font: 700 10.5px var(--mono); }\n.tb.o-rejected rect { fill: var(--warn-fg); } .tb.o-rejected text { fill: var(--surface); }\n.tb.o-failed rect { fill: var(--bad-fg); } .tb.o-failed text { fill: var(--surface); }\n.tb.o-denied rect { fill: var(--violet-fg); } .tb.o-denied text { fill: var(--surface); }\n.tb.o-ok rect { fill: var(--good-fg); } .tb.o-ok text { fill: var(--surface); }\n\n/* the side panel */\n.panel { padding: 18px 20px 20px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }\n.panel .kicker { font: 600 11.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }\n.panel h2 { font-size: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.panel .meta { color: var(--fg-muted); font-size: 13px; margin: 4px 0 0; }\n.route { font: 600 13.5px var(--mono); }\n.route .to { color: var(--primary); }\n.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }\n.why li { border-radius: 10px; padding: 8px 10px; background: var(--raised); }\n.why li.taken { background: var(--good-bg); box-shadow: inset 3px 0 0 var(--good-fg); }\n.why li.rejected { opacity: 0.8; }\n.why li.bad { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn-fg); }\n.why li.bad .v { color: var(--warn-fg); }\n.why li .v { font: 700 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 6px; }\n.why li.taken .v { color: var(--good-fg); }\n.why li.taken.t-trouble, .why li.taken.t-limit { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn-fg); }\n.why li.taken.t-trouble .v, .why li.taken.t-limit .v { color: var(--warn-fg); }\n.why li.taken.t-person { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--info-fg); }\n.why li.taken.t-person .v { color: var(--info-fg); }\n.why li.taken.t-error { background: var(--bad-bg); box-shadow: inset 3px 0 0 var(--bad-fg); }\n.why li.taken.t-error .v { color: var(--bad-fg); }\n.why li.rejected .v { color: var(--fg-muted); }\n.why li.unchecked .v, .why li.unevaluable .v { color: var(--fg-muted); }\n.why .guard { font: 600 12.5px var(--mono); }\n.why .facts { color: var(--fg-muted); font-size: 12.5px; margin-top: 3px; }\n.why .parts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }\n.kv { display: grid; grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); gap: 4px 12px; font-size: 12.5px; }\n.kv > div:nth-child(odd) { color: var(--fg-muted); font-family: var(--mono); font-weight: 600; overflow-wrap: anywhere; }\n.kv > div { min-width: 0; overflow-wrap: anywhere; }\n.change { border-top: 1px solid var(--border); padding: 8px 0; }\n.change .path { font: 600 12.5px var(--mono); overflow-wrap: anywhere; }\ndetails.raw { margin-top: 14px; }\n.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }\n.sides > div { min-width: 0; }\n.sides small { color: var(--fg-muted); font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }\npre.json {\n  margin: 2px 0 0; padding: 8px 10px; background: var(--raised); border-radius: 8px; font: 500 12px/1.45 var(--mono);\n  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto;\n}\n.val { font: 500 12.5px var(--mono); overflow-wrap: anywhere; }\n.msg { border-radius: 10px; background: var(--raised); padding: 8px 10px; margin-top: 6px; }\n.msg .role { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--info-fg); }\n.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; margin-top: 2px; }\n.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }\n.list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; cursor: pointer; }\n.list li:hover { background: var(--raised); }\n.list li.at { background: var(--warn-bg); }\n.list .idx { font: 600 12px var(--mono); color: var(--fg-muted); }\n.list .t { color: var(--fg-muted); font: 500 11.5px var(--mono); }\n.list .kind-request .what { color: var(--info-fg); }\n.list .kind-receipt .what { color: var(--violet-fg); }\n.list .facts .what { color: var(--fg-faint); }\n.tabs { display: flex; gap: 6px; margin-bottom: 14px; }\n.empty { color: var(--fg-muted); }\na.step { color: var(--primary); cursor: pointer; font: 600 12.5px var(--mono); text-decoration: none; }\na.step:hover { text-decoration: underline; }\n.steps-inline { display: flex; flex-wrap: wrap; gap: 4px 8px; }\n";