omkit 0.8.9 → 0.8.10

package/dist/core/ExecutionTree.d.ts

@@ -22,6 +22,8 @@ export declare class ExecutionTree {
     readonly store: LogStore;
     readonly folder: RunFolder;
     readonly root: ActionRun;
+    /** The om's name, as given to `om(name)`. */
+    readonly name: string;
     /**
      * The om's `.describe(…)` summary, carried here from the builder so it survives the
      * terminal `.run(...)` call. Stored so it is retrievable; nothing reads it yet.
@@ -122,6 +124,8 @@ export declare class ExecutionTree {
      * artifact name is free-form, so any printable separator can be forged inside a key.
      */
     private curatedArtifacts;
+    /** {@link curatedArtifacts}, each still carrying the node that registered it (for the report). */
+    private curatedArtifactsWithNode;
     /**
      * Absolute `.log` path for a node — root is `main.log`, children drop the `main/`
      * prefix. One directory level per ancestor, mirroring the tree.

package/dist/core/ExecutionTree.js

@@ -13,6 +13,7 @@ import { LiveRenderer } from "../output/LiveRenderer.js";
 import { writeNodeLogs } from "../output/writers/NodeLogWriter.js";
 import { writeRollup } from "../output/writers/RollupWriter.js";
 import { writeResult } from "../output/writers/ResultWriter.js";
+import { writeReport } from "../output/writers/ReportWriter.js";
 import { ActionRun } from "./ActionRun.js";
 import { procRegistry } from "../system/proc.js";
 import { currentNode } from "./context.js";
@@ -41,6 +42,8 @@ export class ExecutionTree {
     store = new LogStore();
     folder;
     root;
+    /** The om's name, as given to `om(name)`. */
+    name;
     /**
      * The om's `.describe(…)` summary, carried here from the builder so it survives the
      * terminal `.run(...)` call. Stored so it is retrievable; nothing reads it yet.
@@ -84,6 +87,7 @@ export class ExecutionTree {
     onUncaught = (e) => this.onFatal("uncaughtException", e);
     onUnhandled = (e) => this.onFatal("unhandledRejection", e);
     constructor(name, definedAt, description, mcp) {
+        this.name = name;
         this.description = description;
         this.mcp = mcp;
         // The run's identity: its name + where om() is written (not how it was launched),
@@ -307,7 +311,22 @@ export class ExecutionTree {
         await writeRollup(at("asserts.log"), flat, entries, (e) => e.level === "assert", assertSummary);
         await writeRollup(at("snapshots.log"), flat, entries, (e) => e.level === "snapshot");
         await writeRollup(at("artifacts.log"), flat, entries, (e) => e.level === "artifact");
-        await writeResult(at("result.json"), this.runView());
+        const run = this.runView();
+        await writeResult(at("result.json"), run);
+        // The page is a convenience over the record above — a failure to build it must not
+        // cost the run its verdict, its exit code, or its other files.
+        try {
+            await writeReport(at("report.html"), {
+                name: this.name,
+                folder: this.folder.path(),
+                run,
+                entries,
+                artifacts: this.curatedArtifactsWithNode(),
+            });
+        }
+        catch (e) {
+            this.originalLog(`omkit: report.html not written — ${e instanceof Error ? e.message : String(e)}`);
+        }
         // Only now let go of the process hooks — a Ctrl+C during the writes must still be
         // caught (as a no-op) so it can't fall through to Node's kill-without-log default.
         process.off("SIGINT", this.onSigint);
@@ -338,6 +357,7 @@ export class ExecutionTree {
             `  asserts   → ${at("asserts.log")}   ${assertSummary}`,
             `  snapshots → ${at("snapshots.log")}`,
             `  artifacts → ${at("artifacts.log")}`,
+            `  report    → ${at("report.html")}`,
         ];
     }
     /** The recap to the terminal (files are already written). */
@@ -412,6 +432,10 @@ export class ExecutionTree {
      * artifact name is free-form, so any printable separator can be forged inside a key.
      */
     curatedArtifacts() {
+        return this.curatedArtifactsWithNode().map(({ nodeId: _nodeId, ...view }) => view);
+    }
+    /** {@link curatedArtifacts}, each still carrying the node that registered it (for the report). */
+    curatedArtifactsWithNode() {
         const byKey = new Map();
         for (const { name, file, description, mime, nodeId } of this.artifactStore.all()) {
             byKey.set(`${nodeId}\0${name}`, {
@@ -419,6 +443,7 @@ export class ExecutionTree {
                 file,
                 mime,
                 ...(description === undefined ? {} : { description }),
+                nodeId,
             });
         }
         return [...byKey.values()];

package/dist/output/writers/ReportWriter.d.ts

@@ -0,0 +1,16 @@
+import type { LogEntry } from "../../foundation/LogEntry.ts";
+import type { ArtifactView, RunView } from "./views.ts";
+export interface ReportInput {
+    /** The om's name, as given to `om(name)`. */
+    readonly name: string;
+    /** The run folder (absolute). */
+    readonly folder: string;
+    readonly run: RunView;
+    readonly entries: readonly LogEntry[];
+    /** The curated artifacts, as in `run.artifacts`, with the node that registered each. */
+    readonly artifacts: ReadonlyArray<ArtifactView & {
+        readonly nodeId: string;
+    }>;
+}
+/** Writes `report.html` for a finished run. */
+export declare function writeReport(file: string, input: ReportInput): Promise<void>;

package/dist/output/writers/ReportWriter.js

@@ -0,0 +1,238 @@
+import { readFile, readdir, stat, writeFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+/**
+ * `report.html` — the run as one self-contained page: the run view, every log entry, the
+ * snapshot payloads, the run's images (as base64), d3, and the viewer itself, all inlined so
+ * the file opens straight from disk, survives being zipped or attached, and needs no server.
+ *
+ * Heavy by design. Images are kept out of the main JSON — each sits in its own inert
+ * `<script type="text/plain">` block the viewer decodes only when it shows that image — so the
+ * page's one `JSON.parse` stays proportional to the log, not to the screenshots. The viewer
+ * paints a loader first and swaps it out once the data is parsed.
+ */
+/** Snapshot payloads larger than this are embedded as truncated text, not parsed JSON. */
+const SNAPSHOT_CAP = 2 * 1024 * 1024;
+/** A single image larger than this is listed but not embedded. */
+const IMAGE_CAP = 25 * 1024 * 1024;
+/** Images stop being embedded once this many bytes are in the page. */
+const IMAGES_TOTAL_CAP = 200 * 1024 * 1024;
+/** Text artifacts (logs, json, md, …) are embedded up to this size. */
+const TEXT_CAP = 1024 * 1024;
+const IMAGE_MIME = {
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".gif": "image/gif",
+    ".webp": "image/webp",
+    ".svg": "image/svg+xml",
+};
+/** Writes `report.html` for a finished run. */
+export async function writeReport(file, input) {
+    const assets = [];
+    const files = await collectFiles(input, assets);
+    const snapshots = await collectSnapshots(input);
+    const payload = {
+        version: 1,
+        name: input.name,
+        folder: input.folder,
+        generatedAt: Date.now(),
+        run: input.run,
+        entries: input.entries,
+        snapshots,
+        files,
+    };
+    const [d3, css, client] = await Promise.all([
+        readFile(d3Path(), "utf8"),
+        readFile(assetPath("report.css"), "utf8"),
+        readFile(assetPath("report.js"), "utf8"),
+    ]);
+    await writeFile(file, renderPage(input, payload, assets, { d3, css, client }), "utf8");
+}
+function renderPage(input, payload, assets, code) {
+    const title = `Run: ${input.name}`;
+    const blobs = assets
+        .map((a) => `<script type="text/plain" id="${a.id}" data-mime="${a.mime}">${a.data}</script>`)
+        .join("\n");
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(title)}</title>
+<style>${code.css}</style>
+</head>
+<body>
+<div id="loader" role="status" aria-live="polite">
+  <div class="loader-card">
+    <div class="loader-spin"></div>
+    <div class="loader-title">${escapeHtml(title)}</div>
+    <div class="loader-step" id="loader-step">Loading the run record…</div>
+  </div>
+</div>
+<div id="app" hidden></div>
+<script id="omkit-data" type="application/json">${inertJson(payload)}</script>
+${blobs}
+<script>${inertScript(code.d3)}</script>
+<script>${inertScript(code.client)}</script>
+</body>
+</html>
+`;
+}
+async function collectFiles(input, assets) {
+    const out = [];
+    const seen = new Set();
+    let budget = IMAGES_TOTAL_CAP;
+    const artifactTs = artifactTimes(input.entries);
+    const add = async (abs, meta) => {
+        const key = path.resolve(abs).toLowerCase();
+        if (seen.has(key))
+            return;
+        seen.add(key);
+        const base = { ...meta, file: abs, rel: relTo(input.folder, abs) };
+        let size;
+        try {
+            size = (await stat(abs)).size;
+        }
+        catch {
+            out.push({ ...base, size: 0, omitted: "file not found" });
+            return;
+        }
+        if (meta.mime.startsWith("image/")) {
+            if (size > IMAGE_CAP) {
+                out.push({ ...base, size, omitted: `larger than ${mb(IMAGE_CAP)}` });
+            }
+            else if (size > budget) {
+                out.push({ ...base, size, omitted: `page image budget (${mb(IMAGES_TOTAL_CAP)}) spent` });
+            }
+            else {
+                budget -= size;
+                const id = `asset-${assets.length + 1}`;
+                assets.push({ id, mime: meta.mime, data: (await readFile(abs)).toString("base64") });
+                out.push({ ...base, size, asset: id });
+            }
+        }
+        else if (isText(meta.mime) && size <= TEXT_CAP) {
+            out.push({ ...base, size, text: await readFile(abs, "utf8") });
+        }
+        else {
+            out.push({ ...base, size, omitted: isText(meta.mime) ? `larger than ${mb(TEXT_CAP)}` : "binary" });
+        }
+    };
+    for (const a of input.artifacts) {
+        const ts = artifactTs.get(`${a.nodeId}\0${path.resolve(a.file)}`);
+        await add(a.file, {
+            name: a.name,
+            mime: a.mime,
+            curated: true,
+            nodeId: a.nodeId,
+            ...(ts === undefined ? {} : { ts }),
+            ...(a.description === undefined ? {} : { description: a.description }),
+        });
+    }
+    // Images the run left in its folder without labelling them still belong in the picture.
+    for (const abs of await walk(input.folder)) {
+        const mime = IMAGE_MIME[path.extname(abs).toLowerCase()];
+        if (mime)
+            await add(abs, { name: path.basename(abs), mime, curated: false });
+    }
+    return out;
+}
+async function collectSnapshots(input) {
+    const out = [];
+    let seq = 0;
+    for (const e of input.entries) {
+        if (e.level !== "snapshot")
+            continue;
+        const split = e.message.lastIndexOf(" → ");
+        if (split < 0)
+            continue;
+        const name = e.message.slice(0, split);
+        const abs = e.message.slice(split + 3);
+        const base = { seq: ++seq, name, nodeId: e.nodeId, ts: e.ts, file: abs, rel: relTo(input.folder, abs) };
+        try {
+            const raw = await readFile(abs, "utf8");
+            if (raw.length > SNAPSHOT_CAP) {
+                out.push({ ...base, text: raw.slice(0, SNAPSHOT_CAP), truncated: true });
+            }
+            else {
+                try {
+                    out.push({ ...base, value: JSON.parse(raw) });
+                }
+                catch {
+                    out.push({ ...base, text: raw });
+                }
+            }
+        }
+        catch {
+            out.push({ ...base, text: "(snapshot file not found)" });
+        }
+    }
+    return out;
+}
+/** `ts` of each `artifact` timeline line, keyed by `(nodeId, file)` — the latest wins. */
+function artifactTimes(entries) {
+    const out = new Map();
+    for (const e of entries) {
+        if (e.level !== "artifact")
+            continue;
+        const split = e.message.lastIndexOf(" → ");
+        if (split >= 0)
+            out.set(`${e.nodeId}\0${path.resolve(e.message.slice(split + 3))}`, e.ts);
+    }
+    return out;
+}
+async function walk(dir, depth = 0) {
+    if (depth > 4)
+        return [];
+    let names;
+    try {
+        names = await readdir(dir, { withFileTypes: true });
+    }
+    catch {
+        return [];
+    }
+    const out = [];
+    for (const d of names) {
+        const abs = path.join(dir, d.name);
+        if (d.isDirectory())
+            out.push(...(await walk(abs, depth + 1)));
+        else if (d.isFile())
+            out.push(abs);
+    }
+    return out.sort();
+}
+function relTo(folder, abs) {
+    const rel = path.relative(folder, abs);
+    return rel.startsWith("..") || path.isAbsolute(rel) ? abs : rel.split(path.sep).join("/");
+}
+function isText(mime) {
+    return (mime.startsWith("text/") ||
+        mime === "application/json" ||
+        mime === "application/x-ndjson" ||
+        mime === "image/svg+xml");
+}
+function mb(bytes) {
+    return `${Math.round(bytes / 1024 / 1024)} MB`;
+}
+/** JSON safe to sit inside a `<script>` block: no `</script>`, no `<!--`. */
+function inertJson(value) {
+    return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+/** JS safe to sit inside a `<script>` block. */
+function inertScript(code) {
+    return code.replace(/<\/script/gi, "<\\/script");
+}
+function escapeHtml(s) {
+    return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+}
+/** The viewer's own files, next to this module (`report/`) in both `src` and `dist`. */
+function assetPath(name) {
+    return fileURLToPath(new URL(`./report/${name}`, import.meta.url));
+}
+/** d3's UMD bundle — the package's `exports` hide `dist/`, so go via its resolved entry. */
+function d3Path() {
+    const entry = createRequire(import.meta.url).resolve("d3");
+    return path.join(path.dirname(entry), "..", "dist", "d3.min.js");
+}

package/dist/output/writers/report/report.css

@@ -0,0 +1,272 @@
+:root {
+  --bg: #0b1020;
+  --panel: #111831;
+  --panel-2: #0e152b;
+  --raise: #18213f;
+  --line: #222c4d;
+  --line-soft: #1a2342;
+  --text: #e6eaf5;
+  --text-2: #a9b2cc;
+  --text-3: #6f7a99;
+  --accent: #3b82f6;
+  --accent-soft: rgba(59, 130, 246, 0.18);
+  --ok: #22c55e;
+  --fail: #ef4444;
+  --cancel: #f59e0b;
+  --running: #38bdf8;
+  --c1: #4f8ff7;
+  --c2: #8b5cf6;
+  --c3: #22c55e;
+  --c4: #f59e0b;
+  --c5: #f0568c;
+  --c6: #22d3ee;
+  --c7: #a3e635;
+  --c8: #fb7185;
+  --bar-text: #0b1020;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color-scheme: dark;
+}
+:root[data-theme="light"] {
+  --bg: #f4f6fb;
+  --panel: #ffffff;
+  --panel-2: #f8f9fc;
+  --raise: #eef1f8;
+  --line: #dde2ee;
+  --line-soft: #e9ecf4;
+  --text: #182033;
+  --text-2: #4b5672;
+  --text-3: #8590ab;
+  --accent: #2563eb;
+  --accent-soft: rgba(37, 99, 235, 0.12);
+  --bar-text: #0b1020;
+  --shadow: 0 10px 30px rgba(20, 30, 60, 0.15);
+  color-scheme: light;
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    --bg: #f4f6fb;
+    --panel: #ffffff;
+    --panel-2: #f8f9fc;
+    --raise: #eef1f8;
+    --line: #dde2ee;
+    --line-soft: #e9ecf4;
+    --text: #182033;
+    --text-2: #4b5672;
+    --text-3: #8590ab;
+    --accent: #2563eb;
+    --accent-soft: rgba(37, 99, 235, 0.12);
+    --shadow: 0 10px 30px rgba(20, 30, 60, 0.15);
+    color-scheme: light;
+  }
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 13px/1.4 var(--sans);
+  overflow: hidden;
+}
+button { font: inherit; color: inherit; }
+[hidden] { display: none !important; }
+
+/* ── loader ─────────────────────────────────────────────── */
+#loader {
+  position: fixed; inset: 0; display: grid; place-items: center;
+  background: var(--bg); z-index: 100;
+}
+.loader-card { display: grid; justify-items: center; gap: 14px; }
+.loader-spin {
+  width: 42px; height: 42px; border-radius: 50%;
+  border: 3px solid var(--line); border-top-color: var(--accent);
+  animation: spin 0.9s linear infinite;
+}
+.loader-title { font-size: 16px; font-weight: 600; }
+.loader-step { color: var(--text-3); font-size: 12px; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ── shell ──────────────────────────────────────────────── */
+#app {
+  height: 100vh; display: grid; gap: 10px; padding: 12px 14px 14px;
+  grid-template-rows: auto minmax(0, 1fr) 230px;
+}
+.top { display: flex; align-items: center; gap: 14px; min-width: 0; }
+.top .titles { min-width: 0; flex: 1; }
+.top h1 { margin: 0; font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.top .meta { color: var(--text-2); display: flex; gap: 10px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
+.top .meta .sep { color: var(--text-3); }
+.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
+.dot.ok { background: var(--ok); }
+.dot.failed { background: var(--fail); }
+.dot.cancelled { background: var(--cancel); }
+.dot.running { background: var(--running); }
+
+.btn-group { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
+.btn {
+  border: 0; background: transparent; padding: 7px 12px; cursor: pointer;
+  display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); white-space: nowrap;
+}
+.btn + .btn { border-left: 1px solid var(--line); }
+.btn:hover { background: var(--raise); color: var(--text); }
+.btn.active { background: var(--accent); color: #fff; }
+.btn svg { width: 15px; height: 15px; }
+.btn.solo { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
+
+.main {
+  display: grid; gap: 10px; min-height: 0;
+  grid-template-columns: minmax(0, 1fr) 320px;
+}
+.main.no-details { grid-template-columns: minmax(0, 1fr); }
+.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-height: 0; min-width: 0; }
+
+/* ── timeline: tree + chart share one vertical scroll ──── */
+.timeline { display: grid; grid-template-rows: 34px minmax(0, 1fr); overflow: hidden; }
+.tl-head { display: grid; grid-template-columns: var(--tree-w, 420px) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
+.tl-head .cols { display: grid; grid-template-columns: minmax(0, 1fr) 84px 82px; align-items: center; border-right: 1px solid var(--line); }
+.tl-head .cols > div { padding: 0 12px; color: var(--text-2); font-weight: 600; font-size: 12px; }
+.tl-head .cols > div + div { border-left: 1px solid var(--line-soft); height: 100%; display: flex; align-items: center; }
+.tl-head svg { display: block; width: 100%; height: 34px; }
+.tl-body { overflow: auto; display: grid; grid-template-columns: var(--tree-w, 420px) minmax(0, 1fr); align-items: start; position: relative; }
+.timeline.no-tree .tl-head, .timeline.no-tree .tl-body { grid-template-columns: minmax(0, 1fr); }
+.timeline.no-tree .tree, .timeline.no-tree .tl-head .cols { display: none; }
+
+.tree { border-right: 1px solid var(--line); position: sticky; left: 0; background: var(--panel); z-index: 2; }
+.row {
+  height: var(--row-h); display: grid; grid-template-columns: minmax(0, 1fr) 84px 82px;
+  align-items: center; cursor: pointer; border-bottom: 1px solid transparent;
+}
+.row:hover { background: var(--raise); }
+.row.selected { background: var(--accent-soft); }
+.row .name { display: flex; align-items: center; gap: 7px; min-width: 0; padding-right: 8px; }
+.row .name .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.row .name .tagchip { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.row .twist { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--text-3); border: 0; background: none; padding: 0; cursor: pointer; }
+.row .twist svg { width: 12px; height: 12px; transition: transform 0.12s; }
+.row .twist.open svg { transform: rotate(90deg); }
+.row .icon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; }
+.row .icon svg { width: 14px; height: 14px; }
+.row .status, .row .dur { padding: 0 12px; display: flex; align-items: center; gap: 7px; color: var(--text-2); font-variant-numeric: tabular-nums; }
+.guide { width: 14px; flex: none; align-self: stretch; position: relative; }
+.guide::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
+
+.chart { position: relative; min-width: 0; }
+.chart svg { display: block; }
+.chart .bar-label { font-size: 12px; fill: var(--bar-text); font-weight: 500; pointer-events: none; }
+.chart .bar-label.outside { fill: var(--text); }
+.chart .mark-label { font-size: 11px; fill: var(--text-2); pointer-events: none; }
+.chart .grid line { stroke: var(--line-soft); }
+.chart .cursor { stroke: var(--text-2); stroke-dasharray: 3 3; pointer-events: none; }
+.chart .link { fill: none; stroke: var(--text-3); stroke-width: 1.2; }
+.chart .bar { cursor: pointer; }
+.chart .bar.selected { stroke: var(--text); stroke-width: 2; }
+.chart .mark { cursor: pointer; stroke: var(--panel); stroke-width: 1.5; }
+.axis text { fill: var(--text-2); font-size: 11px; }
+.axis line, .axis path { stroke: var(--line); }
+
+.flow-view, .flame-view { position: absolute; inset: 0; }
+.flow-view svg, .flame-view svg { width: 100%; height: 100%; display: block; cursor: grab; }
+.flow-card rect.box { fill: var(--raise); stroke: var(--line); rx: 8; }
+.flow-card.selected rect.box { stroke: var(--accent); stroke-width: 2; }
+.flow-card text { fill: var(--text); font-size: 12px; }
+.flow-card text.sub { fill: var(--text-3); font-size: 11px; }
+.flow-link { fill: none; stroke: var(--text-3); stroke-width: 1.3; }
+.flame-rect { cursor: pointer; stroke: var(--panel); stroke-width: 1; }
+.flame-rect.selected { stroke: var(--text); stroke-width: 2; }
+.flame-text { font-size: 11px; fill: var(--bar-text); pointer-events: none; }
+
+/* ── details ────────────────────────────────────────────── */
+.details { display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
+.details .dh { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-weight: 600; }
+.details .x { border: 0; background: none; cursor: pointer; color: var(--text-2); padding: 2px; }
+.details .who { display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; }
+.details .who .icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
+.details .who .icon svg { width: 16px; height: 16px; }
+.details .who .nm { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--raise); font-size: 12px; }
+.details .scroll { overflow: auto; padding: 0 14px 14px; }
+.kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; margin: 2px 0 12px; }
+.kv .k { color: var(--text-2); }
+.kv .v { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 10px; overflow-x: auto; }
+.tab { border: 0; background: none; padding: 7px 9px; cursor: pointer; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; }
+.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
+.section-title { font-weight: 600; margin: 14px 0 8px; }
+.ev-list { list-style: none; margin: 0; padding: 0; position: relative; }
+.ev-list li { display: grid; grid-template-columns: 64px 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px 0; }
+.ev-list .t { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
+.ev-list .m { overflow-wrap: anywhere; }
+.ev-ico { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
+.ev-ico svg { width: 10px; height: 10px; }
+pre.code {
+  margin: 0; padding: 10px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px;
+  font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto;
+}
+.muted { color: var(--text-3); }
+.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
+.thumb { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--panel-2); aspect-ratio: 16 / 10; display: grid; place-items: center; }
+.thumb:hover { border-color: var(--accent); }
+.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.thumb .json-ico { font: 600 12px var(--mono); color: var(--text-3); }
+
+/* ── bottom strip ───────────────────────────────────────── */
+.bottom { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 270px 250px; min-height: 0; }
+.lower { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
+.lower .tabs { margin: 0; padding: 0 10px; align-items: center; }
+.lower .tabs .spacer { flex: 1; }
+.filter { border: 1px solid var(--line); background: var(--panel-2); border-radius: 7px; padding: 5px 9px; color: var(--text); width: 200px; margin: 4px 0; }
+.lower .body { overflow: auto; padding: 10px 12px; }
+.gallery { display: flex; gap: 12px; }
+.gal-item { flex: none; width: 160px; cursor: pointer; border: 1px solid transparent; border-radius: 8px; padding: 4px; }
+.gal-item:hover, .gal-item.active { border-color: var(--accent); background: var(--accent-soft); }
+.gal-item .thumb { aspect-ratio: 16 / 10; }
+.gal-item .cap { display: flex; gap: 8px; margin-top: 5px; font-size: 12px; }
+.gal-item .cap .t { color: var(--text-2); font-variant-numeric: tabular-nums; }
+.gal-item .cap .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gal-item .sz { color: var(--text-3); font-size: 11px; }
+table.list { width: 100%; border-collapse: collapse; font-size: 12px; }
+table.list td { padding: 3px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
+table.list td.t { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; width: 1%; }
+table.list td.p { color: var(--text-3); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; width: 1%; }
+table.list td.m { font-family: var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
+table.list tr.err td.m { color: var(--fail); }
+table.list tr { cursor: pointer; }
+table.list tr:hover td { background: var(--raise); }
+.legend { padding: 10px 14px; }
+.legend h3, .overview h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
+.legend .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
+.legend .li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; }
+.overview { padding: 10px 14px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
+.overview .range { color: var(--text-2); font-size: 11px; text-align: right; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
+.overview svg { width: 100%; height: 100%; display: block; }
+.overview .brush .selection { fill: var(--accent-soft); stroke: var(--text-2); }
+
+/* ── floating ───────────────────────────────────────────── */
+.tip {
+  position: fixed; pointer-events: none; z-index: 50; background: var(--panel); border: 1px solid var(--line);
+  border-radius: 8px; padding: 8px 10px; box-shadow: var(--shadow); max-width: 360px; font-size: 12px;
+}
+.tip .tt { font-weight: 600; margin-bottom: 2px; }
+.tip .ts { color: var(--text-2); }
+.tip img { display: block; max-width: 240px; max-height: 150px; border-radius: 4px; margin: 6px 0; border: 1px solid var(--line); }
+.modal { position: fixed; inset: 0; background: rgba(5, 8, 18, 0.72); z-index: 60; display: grid; place-items: center; padding: 28px; }
+.modal .box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-width: min(1200px, 100%); max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
+.modal .mh { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
+.modal .mh .nm { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.modal .mb { overflow: auto; padding: 14px; }
+.modal img { max-width: 100%; display: block; margin: auto; }
+.menu { position: fixed; z-index: 55; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; min-width: 200px; }
+.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
+.menu button:hover { background: var(--raise); }
+.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--raise); border: 1px solid var(--line); padding: 7px 14px; border-radius: 8px; z-index: 70; }
+
+@media (max-width: 1100px) {
+  .bottom { grid-template-columns: minmax(0, 1fr); }
+  .legend, .overview { display: none; }
+  .main { grid-template-columns: minmax(0, 1fr); }
+  .details { display: none; }
+}