diff --git a/web/dashboard/dashboard.js b/web/dashboard/dashboard.js new file mode 100644 index 0000000..480c36c --- /dev/null +++ b/web/dashboard/dashboard.js @@ -0,0 +1,1358 @@ +import { routeCase } from "../routing.mjs"; + +const FAMILY = { + ownership: "Missing ownership proof", + ordinary: "Routine listing", + takeover: "Account takeover signals", + double_selling: "Shares already committed", + bank_change: "Verified bank change", + phishing: "Off-platform request", + linked: "Linked counterparties", + front_person: "Third-party funding", + accreditation: "Accreditation conflict", + price: "Rapid bid cancellations", + authorized_funds: "Authorized third-party funds", + large_verified: "Large, verified holding", + office_ip: "Shared office network", + corrected_bids: "Corrected duplicate bids", +}; +// Measured medians at 1×; worker counts match the Elixir Oban queues. +const LAT = { travel: 900, decision: 128, sft: 1535, arrival: 700 }; +const WORKERS = { decision: 4, sft: 1 }; +const STEP = 40; +const DAY_START = (9 * 3600 + 30 * 60) * 1000; +const POS = { + intake: [95, 200], + decision: [345, 200], + sft: [620, 115], + review: [895, 55], + escalate: [895, 200], + clear: [895, 345], +}; +const EDGES = [ + ["intake", "decision"], + ["decision", "sft", "flagged or uncertain"], + ["decision", "clear", "P(review) < 2%"], + ["sft", "review"], + ["sft", "escalate"], +]; +const TAB_FOR_NODE = { + intake: "all", + decision: "all", + sft: "review", + review: "review", + escalate: "escalate", + clear: "clear", +}; +const NS = "http://www.w3.org/2000/svg"; +const reduced = matchMedia("(prefers-reduced-motion: reduce)"); + +const $ = (id) => document.getElementById(id); +function h(tag, props = {}, ...kids) { + const n = document.createElement(tag); + for (const [k, v] of Object.entries(props)) { + if (v == null || v === false) continue; + if (k === "class") n.className = v; + else if (k === "text") n.textContent = v; + else if (k.startsWith("on")) n.addEventListener(k.slice(2), v); + else n.setAttribute(k, v === true ? "" : v); + } + for (const kid of kids.flat()) + if (kid != null && kid !== false) n.append(kid); + return n; +} +function s(tag, attrs = {}, text) { + const n = document.createElementNS(NS, tag); + for (const [k, v] of Object.entries(attrs)) n.setAttribute(k, v); + if (text != null) n.textContent = text; + return n; +} +function hash(str) { + let x = 2166136261; + for (let i = 0; i < str.length; i++) { + x ^= str.charCodeAt(i); + x = Math.imul(x, 16777619); + } + return (x >>> 0) / 4294967296; +} +const money = (v) => + v >= 1e6 + ? `$${(v / 1e6).toFixed(v >= 1e7 ? 0 : 1)}M` + : `$${Math.round(v / 1e3)}K`; +const moneyFull = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + maximumFractionDigits: 0, +}); +const pct = (p) => + p < 1e-5 + ? "<0.001%" + : p > 0.99999 + ? ">99.99%" + : `${(p * 100).toFixed(p < 0.01 ? 3 : 1)}%`; +const human = (code) => { + const t = code.replaceAll("_", " ").toLowerCase(); + return t[0].toUpperCase() + t.slice(1); +}; +const clock = (t) => new Date(DAY_START + t).toISOString().slice(11, 19); +const seconds = (ms) => `${(ms / 1000).toFixed(1)} s`; +function waited(ms) { + const total = Math.max(0, Math.floor(ms / 1000)); + return total < 60 + ? `${total}s` + : `${Math.floor(total / 60)}m ${String(total % 60).padStart(2, "0")}s`; +} +function before(minutes) { + if (minutes < 60) return `${minutes} min before`; + if (minutes < 1440) return `${Math.round(minutes / 60)} h before`; + return `${Math.round(minutes / 1440).toLocaleString()} d before`; +} +const median = (xs) => { + if (!xs.length) return null; + const v = [...xs].sort((a, b) => a - b); + const m = v.length >> 1; + return v.length % 2 ? v[m] : (v[m - 1] + v[m]) / 2; +}; +const logX = (p) => (Math.log10(Math.min(Math.max(p, 1e-14), 1)) + 14) / 14; + +let ORDER = []; +let S = null; +let speed = 1; +let tab = "review"; +let pressedNode = null; +let selected = null; +let selectedStage = null; +const paths = {}; +const lengths = {}; +const edgeEls = {}; +const particles = new Map(); +let particleLayer; +let queueLayer; +let stripDots; +let queueDotCount = -1; +let waitingCells = []; + +function prepare(c) { + const route = routeCase(c, { audit: hash(`${c.id}:audit`) < 0.02 }); + const outcome = !route.forward + ? "clear" + : route.escalate + ? "escalate" + : "review"; + return { + c, + id: c.id, + route, + outcome, + tone: route.audit ? "audit" : outcome, + value: c.shares * c.price, + title: FAMILY[c.family] ?? human(c.family), + kind: c.kind === "bid_placed" ? "Bid" : "Listing", + }; +} + +function fresh() { + return { + t: 0, + next: 0, + idx: 0, + running: false, + items: [], + decisionQueue: [], + sftQueue: [], + decisionBusy: 0, + sftBusy: 0, + done: [], + scored: [], + sfted: [], + feed: [], + edges: Object.fromEntries(EDGES.map(([a, b]) => [`${a}-${b}`, 0])), + counts: { + intake: 0, + decision: 0, + sft: 0, + review: 0, + escalate: 0, + clear: 0, + }, + actions: new Map(), + animated: new Set(), + dirty: new Set(["all"]), + }; +} +const mark = (...keys) => keys.forEach((k) => S.dirty.add(k)); +// Rows are rebuilt on every update, so play each entrance animation once. +function enter(key) { + if (S.animated.has(key)) return ""; + S.animated.add(key); + return S.dirty.has("all") ? "" : "fresh"; +} +const finished = () => S.idx === ORDER.length && S.items.length === 0; + +/* Simulation */ +function arrive(p, at) { + const it = { + ...p, + stage: "toDecision", + edge: "intake-decision", + t0: at, + arrivedAt: at, + }; + S.items.push(it); + S.edges["intake-decision"]++; + S.counts.intake++; + S.feed.unshift(it); + S.feed.length = Math.min(S.feed.length, 7); + mark("feed", "kpi", "nodes", "edges"); +} +function go(it, edge, stage) { + it.edge = edge; + it.stage = stage; + S.edges[edge]++; + mark("edges", "feed", "drawer"); +} +function advance(it) { + const elapsed = S.t - it.t0; + if (it.stage === "toDecision" && elapsed >= LAT.travel) { + it.t0 += LAT.travel; + it.stage = "waitDecision"; + S.decisionQueue.push(it); + } else if (it.stage === "decision" && elapsed >= LAT.decision) { + it.t0 += LAT.decision; + S.decisionBusy--; + S.counts.decision++; + it.scored = true; + S.scored.push(it); + mark("strip", "nodes"); + if (it.route.forward) go(it, "decision-sft", "toSft"); + else go(it, "decision-clear", "toOutcome"); + } else if (it.stage === "toSft" && elapsed >= LAT.travel) { + it.t0 += LAT.travel; + it.stage = "waitSft"; + S.sftQueue.push(it); + mark("nodes", "feed", "drawer", "kpi"); + } else if (it.stage === "sft" && elapsed >= LAT.sft) { + it.t0 += LAT.sft; + S.sftBusy--; + S.counts.sft++; + it.sftDone = true; + S.sfted.push(it); + mark("charts", "nodes"); + go( + it, + it.outcome === "escalate" ? "sft-escalate" : "sft-review", + "toOutcome", + ); + } else if (it.stage === "toOutcome" && elapsed >= LAT.travel) { + it.t0 += LAT.travel; + it.stage = "done"; + it.finishedAt = it.t0; + S.items.splice(S.items.indexOf(it), 1); + S.done.push(it); + S.counts[it.outcome]++; + mark("kpi", "nodes", "queue", "feed", "drawer", `bump-${it.outcome}`); + } +} +function dispatch() { + while (S.decisionBusy < WORKERS.decision && S.decisionQueue.length) { + const it = S.decisionQueue.shift(); + it.stage = "decision"; + it.t0 = S.t; + S.decisionBusy++; + mark("nodes", "feed", "drawer"); + } + while (S.sftBusy < WORKERS.sft && S.sftQueue.length) { + const it = S.sftQueue.shift(); + it.stage = "sft"; + it.t0 = S.t; + S.sftBusy++; + mark("nodes", "feed", "drawer", "kpi"); + } +} +function substep(dt) { + S.t += dt; + while (S.idx < ORDER.length && S.next <= S.t) { + arrive(ORDER[S.idx++], S.next); + S.next += LAT.arrival; + } + for (const it of [...S.items]) advance(it); + dispatch(); +} + +/* Graph */ +function buildGraph() { + const svg = $("wires"); + const base = s("g"); + const flow = s("g"); + const labels = s("g"); + queueLayer = s("g"); + particleLayer = s("g"); + for (const [a, b, caption] of EDGES) { + const key = `${a}-${b}`; + const [x1, y1] = POS[a]; + const [x2, y2] = POS[b]; + const mx = (x1 + x2) / 2; + const d = `M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}`; + const tone = + { clear: "clear", review: "review", escalate: "escalate" }[b] ?? ""; + const line = s("path", { + d, + class: `wire-base ${tone}`, + "stroke-width": 2, + }); + const dash = s("path", { d, class: "wire-flow" }); + base.append(line); + flow.append(dash); + paths[key] = line; + lengths[key] = line.getTotalLength(); + const mid = line.getPointAtLength(lengths[key] / 2); + const label = s("g", { class: "edge-label" }); + const rect = s("rect", { y: mid.y - 11, height: 22, rx: 11 }); + const txt = s("text", { x: mid.x, y: mid.y }, "0"); + label.append(rect, txt); + labels.append(label); + if (caption) { + const above = b !== "clear"; + labels.append( + s( + "text", + { + x: mid.x - 16, + y: mid.y + (above ? -26 : 30), + class: "edge-caption", + "text-anchor": "end", + }, + caption, + ), + ); + } + edgeEls[key] = { line, dash, rect, txt, mid }; + } + svg.append(base, flow, queueLayer, particleLayer, labels); +} +function renderEdges() { + const total = Math.max(ORDER.length, 1); + for (const [key, el] of Object.entries(edgeEls)) { + const n = S.edges[key]; + el.line.setAttribute( + "stroke-width", + (2 + 9 * Math.sqrt(n / total)).toFixed(2), + ); + el.dash.classList.toggle("used", n > 0); + el.txt.textContent = n; + const w = String(n).length * 8 + 16; + el.rect.setAttribute("x", el.mid.x - w / 2); + el.rect.setAttribute("width", w); + } +} +function setCount(id, value) { + const el = $(id); + const text = String(value); + if (el.textContent === text) return; + el.textContent = text; + if (S.dirty.has("all")) return; + el.classList.remove("bump"); + void el.offsetWidth; + el.classList.add("bump"); +} +function renderNodes() { + const routed = Math.max(S.done.length, 1); + setCount("c-intake", S.counts.intake); + setCount("c-decision", S.counts.decision); + setCount("c-sft", S.counts.sft); + for (const o of ["review", "escalate", "clear"]) + setCount(`c-${o}`, S.counts[o]); + $("n-intake").textContent = `${ORDER.length - S.idx} to come`; + $("n-decision").textContent = `${S.decisionBusy}/${WORKERS.decision} busy`; + $("n-sft").textContent = `Queue ${S.sftQueue.length}`; + $("n-review").textContent = S.done.length + ? `${Math.round((S.counts.review / routed) * 100)}% of routed` + : "By priority"; + $("n-escalate").textContent = S.done.length + ? `${Math.round((S.counts.escalate / routed) * 100)}% of routed` + : "Conflicts"; + $("n-clear").textContent = S.done.length + ? `${Math.round((S.counts.clear / routed) * 100)}% of routed` + : "SFT skipped"; + document + .querySelector('[data-node="decision"]') + .classList.toggle("busy", S.decisionBusy > 0); + document + .querySelector('[data-node="sft"]') + .classList.toggle("busy", S.sftBusy > 0); +} +const ease = (x) => (x < 0.5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2); +function drawParticles() { + const live = new Set(); + for (const it of S.items) { + if (!it.stage.startsWith("to")) continue; + const progress = Math.min((S.t - it.t0) / LAT.travel, 1); + const pt = paths[it.edge].getPointAtLength( + lengths[it.edge] * ease(progress), + ); + let dot = particles.get(it.id); + if (!dot) { + dot = s("circle", { r: 5.5 }); + particleLayer.append(dot); + particles.set(it.id, dot); + } + const tone = + it.stage === "toDecision" + ? "neutral" + : it.stage === "toSft" + ? it.route.audit + ? "audit" + : "review" + : it.tone; + dot.setAttribute("class", `particle ${tone}`); + dot.setAttribute("cx", pt.x.toFixed(1)); + dot.setAttribute("cy", pt.y.toFixed(1)); + live.add(it.id); + } + for (const [id, dot] of particles) + if (!live.has(id)) { + dot.remove(); + particles.delete(id); + } + const q = Math.min(S.sftQueue.length, 9); + if (q !== queueDotCount) { + queueDotCount = q; + queueLayer.replaceChildren(); + const [x, y] = POS.sft; + for (let i = 0; i < q; i++) + queueLayer.append( + s("circle", { + cx: x - 70 - i * 11, + cy: y - 2, + r: 3.5, + class: "queue-dot", + }), + ); + } +} + +/* KPIs */ +function renderKpis() { + const done = S.done.length; + $("k-done").textContent = done; + $("k-total").textContent = `/ ${ORDER.length}`; + $("k-flight").textContent = `${S.items.length} in flight`; + const clear = S.counts.clear; + $("k-clear").textContent = clear; + $("k-clear-pct").textContent = done + ? `${Math.round((clear / done) * 100)}%` + : "—"; + $("k-clear-bar").style.width = done ? `${(clear / done) * 100}%` : "0"; + + const queued = S.done.filter((it) => it.outcome !== "clear"); + const open = queued.filter((it) => !S.actions.has(it.id)); + $("k-review").textContent = open.length; + const levels = [5, 4, 3, 2, 1].map((l) => [ + l, + queued.filter((it) => it.c.verdict.risk_level === l).length, + ]); + const stack = $("k-priorities"); + stack.replaceChildren( + ...(queued.length + ? levels + .filter(([, n]) => n) + .map(([l, n]) => + h("i", { + class: `p${l}`, + style: `flex-grow:${n}`, + title: `Priority ${l}: ${n}`, + }), + ) + : [h("i", { class: "empty-bar" })]), + ); + $("k-priority-sub").textContent = queued.length + ? levels + .filter(([, n]) => n) + .map(([l, n]) => `P${l} ${n}`) + .join(" · ") + : "By priority"; + + const esc = S.counts.escalate; + $("k-escalate").textContent = esc; + $("k-escalate-bar").style.width = S.sfted.length + ? `${(esc / S.sfted.length) * 100}%` + : "0"; + $("k-escalate-sub").textContent = S.sfted.length + ? `Of ${S.sfted.length} SFT verdicts` + : "Model conflicts"; + + const all = median(S.done.map((it) => it.finishedAt - it.arrivedAt)); + const cleared = median( + S.done + .filter((it) => it.outcome === "clear") + .map((it) => it.finishedAt - it.arrivedAt), + ); + const reviewed = median(queued.map((it) => it.finishedAt - it.arrivedAt)); + $("k-latency").textContent = all == null ? "—" : seconds(all); + $("k-latency-split").replaceChildren( + h( + "span", + {}, + h("i", { class: "dot clear" }), + `Clear ${cleared == null ? "—" : seconds(cleared)}`, + ), + h( + "span", + {}, + h("i", { class: "dot review" }), + `Review ${reviewed == null ? "—" : seconds(reviewed)}`, + ), + ); + renderSpark(); +} +function renderSpark() { + const bins = 24; + const span = ORDER.length * LAT.arrival + 5000; + const counts = new Array(bins).fill(0); + for (const it of S.done) + counts[Math.min(bins - 1, Math.floor((it.finishedAt / span) * bins))]++; + const upto = Math.min(bins, Math.floor((S.t / span) * bins) + 1); + let total = 0; + const pts = counts.slice(0, upto).map((n, i) => { + total += n; + return [(i / (bins - 1)) * 120, 30 - (total / ORDER.length) * 28]; + }); + const spark = $("spark"); + spark.replaceChildren( + s("line", { + x1: 0, + x2: 120, + y1: 30.5, + y2: 30.5, + stroke: "var(--line)", + "vector-effect": "non-scaling-stroke", + }), + ); + if (pts.length < 2) return; + const line = pts.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(" "); + spark.append( + s("polygon", { + class: "area", + points: `0,30 ${line} ${pts.at(-1)[0].toFixed(1)},30`, + }), + s("polyline", { class: "line", points: line }), + ); +} + +/* Charts */ +const STRIP = { left: 40, right: 610, top: 44, bottom: 132 }; +const stripX = (p) => STRIP.left + logX(p) * (STRIP.right - STRIP.left); +function buildStrip() { + const svg = $("strip"); + svg.replaceChildren(); + const t1 = stripX(0.02); + svg.append( + s("rect", { + class: "zone-clear", + x: STRIP.left, + y: STRIP.top - 8, + width: t1 - STRIP.left, + height: STRIP.bottom - STRIP.top + 16, + rx: 8, + }), + s("rect", { + class: "zone-review", + x: t1, + y: STRIP.top - 8, + width: STRIP.right - t1 + 8, + height: STRIP.bottom - STRIP.top + 16, + rx: 8, + }), + ); + for (let e = -14; e <= 0; e += 2) { + const x = stripX(10 ** e); + const g = s("g", { class: "tick" }); + g.append( + s("line", { x1: x, x2: x, y1: STRIP.bottom + 8, y2: STRIP.bottom + 13 }), + s( + "text", + { x, y: STRIP.bottom + 26, "text-anchor": "middle" }, + e === 0 ? "1" : `1e${e}`, + ), + ); + svg.append(g); + } + svg.append( + s("line", { + class: "axis", + x1: STRIP.left, + x2: STRIP.right + 8, + y1: STRIP.bottom + 8, + y2: STRIP.bottom + 8, + }), + s("line", { + class: "threshold", + x1: t1, + x2: t1, + y1: STRIP.top - 14, + y2: STRIP.bottom + 34, + }), + s( + "text", + { + class: "threshold-label", + x: t1 - 6, + y: STRIP.bottom + 46, + "text-anchor": "end", + }, + "auto-clear below 2%", + ), + ); + const left = s("text", { class: "cluster-label", x: STRIP.left, y: 14 }); + left.append( + s("tspan", { id: "strip-ok" }, "0"), + document.createTextNode(" ok"), + ); + const right = s("text", { + class: "cluster-label", + x: STRIP.right + 8, + y: 14, + "text-anchor": "end", + }); + right.append( + s("tspan", { id: "strip-review" }, "0"), + document.createTextNode(" flagged"), + ); + stripDots = s("g"); + svg.append(left, right, stripDots); +} +function renderStrip(full) { + if (full) stripDots.replaceChildren(); + const have = stripDots.childElementCount; + for (const it of S.scored.slice(have)) { + const tone = it.route.forward + ? it.route.audit + ? "audit" + : "review" + : "clear"; + const dot = s("circle", { + cx: stripX(it.c.decision.p_review).toFixed(1), + cy: (STRIP.top + hash(`${it.id}:y`) * (STRIP.bottom - STRIP.top)).toFixed( + 1, + ), + r: 4, + fill: `var(--${tone})`, + class: full ? "" : "fresh", + }); + dot.append( + s("title", {}, `${it.title} · P(review) ${pct(it.c.decision.p_review)}`), + ); + stripDots.append(dot); + } + const ok = S.scored.filter((it) => !it.route.forward).length; + $("strip-ok").textContent = ok; + $("strip-review").textContent = S.scored.length - ok; +} +function renderCharts() { + const levels = $("levels"); + if (!S.sfted.length) { + levels.replaceChildren( + h("p", { + class: "chart-empty", + text: "Waiting for the first SFT verdict.", + }), + ); + } else { + const counts = [5, 4, 3, 2, 1].map((l) => [ + l, + S.sfted.filter((it) => it.c.verdict.risk_level === l).length, + ]); + const max = Math.max(...counts.map(([, n]) => n), 1); + const colour = { + 5: "var(--escalate)", + 4: "var(--review)", + 3: "color-mix(in srgb, var(--review) 55%, var(--card))", + 2: "var(--audit)", + 1: "var(--audit)", + }; + levels.replaceChildren( + ...counts.map(([l, n]) => + h( + "div", + { class: "bar-row" }, + h("span", { text: `Level ${l}` }), + h( + "span", + { class: "bar-track" }, + h("i", { + style: `width:${(n / max) * 100}%;background:${colour[l]}`, + }), + ), + h("b", { text: n }), + ), + ), + ); + } + const reasons = $("reasons"); + const tally = new Map(); + for (const it of S.sfted) + for (const r of it.c.verdict.reasons) + if (r !== "NO_CONCERN") tally.set(r, (tally.get(r) ?? 0) + 1); + const top = [...tally].sort((a, b) => b[1] - a[1]).slice(0, 6); + if (!top.length) { + reasons.replaceChildren( + h("li", { class: "chart-empty", text: "No reason codes yet." }), + ); + return; + } + const max = top[0][1]; + reasons.replaceChildren( + ...top.map(([code, n]) => + h( + "li", + {}, + h("span", { text: human(code), title: code }), + h( + "span", + { class: "bar-track" }, + h("i", { style: `width:${(n / max) * 100}%` }), + ), + h("b", { text: n }), + ), + ), + ); +} + +/* Feed */ +function stageChip(it) { + if (["toDecision", "waitDecision", "decision"].includes(it.stage)) + return h("span", { class: "chip working", text: "Scoring" }); + if (it.stage === "toSft" || it.stage === "waitSft") + return h("span", { + class: `chip ${it.route.audit ? "audit" : "review"}`, + text: "Waiting for SFT", + }); + if (it.stage === "sft") + return h("span", { class: "chip review working", text: "SFT" }); + return outcomeChip(it); +} +function outcomeChip(it) { + const level = it.sftDone ? ` · P${it.c.verdict.risk_level}` : ""; + if (it.outcome === "clear") + return h("span", { class: "chip clear", text: "Cleared" }); + if (it.outcome === "escalate") + return h("span", { class: "chip escalate", text: `Escalated${level}` }); + if (it.route.audit) + return h("span", { class: "chip audit", text: `Audit${level}` }); + return h("span", { class: "chip review", text: `Review${level}` }); +} +function renderFeed() { + const feed = $("feed"); + if (!S.feed.length) { + feed.replaceChildren( + h("li", { + class: "feed-empty", + text: "Press play to start the intake stream.", + }), + ); + return; + } + feed.replaceChildren( + ...S.feed.map((it) => + h( + "li", + { + class: enter(`feed:${it.id}`), + "data-case": it.id, + tabindex: 0, + onclick: () => openCase(it), + onkeydown: (e) => openOnKey(e, it), + }, + h("time", { text: clock(it.arrivedAt) }), + h("span", { class: "feed-title", text: it.title }), + stageChip(it), + h("span", { + class: "feed-meta", + text: `${it.kind} · ${money(it.value)} · ${it.id.slice(2, 10)}`, + }), + ), + ), + ); +} + +/* Queue */ +function rowsForTab() { + const by = (o) => S.done.filter((it) => it.outcome === o); + const priority = (a, b) => + b.c.verdict.risk_level - a.c.verdict.risk_level || + a.finishedAt - b.finishedAt; + const recent = (a, b) => b.finishedAt - a.finishedAt; + if (tab === "review") return by("review").sort(priority); + if (tab === "escalate") return by("escalate").sort(priority); + if (tab === "clear") return by("clear").sort(recent); + return [...S.done].sort(recent); +} +const ACTION = { + clear: ["clear", "Cleared by reviewer"], + confirm: ["review", "Risk confirmed"], + escalate: ["escalate", "Escalated by reviewer"], +}; +function statusChip(it) { + const action = S.actions.get(it.id); + if (action) { + const [cls, label] = ACTION[action.kind]; + return h("span", { class: `chip ${cls}`, text: label }); + } + if (it.outcome === "clear") + return h("span", { class: "chip clear", text: "Auto-cleared" }); + if (it.outcome === "escalate") + return h("span", { class: "chip escalate", text: "Escalated" }); + return h("span", { class: "chip", text: "Open" }); +} +function signals(it) { + if (!it.sftDone) return h("span", { class: "mono", text: "SFT skipped" }); + const codes = it.c.verdict.reasons.filter((r) => r !== "NO_CONCERN"); + const box = h("span", { class: "signals" }); + if (it.route.audit) + box.append(h("span", { class: "chip audit", text: "Audit sample" })); + if (!codes.length && !it.route.audit) + box.append(h("span", { class: "mono", text: "No concern" })); + codes + .slice(0, 2) + .forEach((r) => + box.append(h("span", { class: "signal", text: human(r), title: r })), + ); + if (codes.length > 2) + box.append(h("span", { class: "signal", text: `+${codes.length - 2}` })); + return box; +} +function waitingText(it) { + if (it.outcome === "clear" || S.actions.has(it.id)) return "—"; + return waited(S.t - it.finishedAt); +} +function renderQueue() { + const counts = { + review: S.counts.review, + escalate: S.counts.escalate, + clear: S.counts.clear, + all: S.done.length, + }; + for (const [k, n] of Object.entries(counts)) $(`t-${k}`).textContent = n; + document + .querySelectorAll("[data-tab]") + .forEach((b) => + b.setAttribute("aria-selected", String(b.dataset.tab === tab)), + ); + const rows = rowsForTab(); + waitingCells = []; + $("rows").replaceChildren( + ...rows.map((it) => { + const wait = h("td", { class: "num mono", text: waitingText(it) }); + waitingCells.push([wait, it]); + const level = it.c.verdict.risk_level; + return h( + "tr", + { + class: enter(`row:${it.id}`), + "data-case": it.id, + tabindex: 0, + onclick: () => openCase(it), + onkeydown: (e) => openOnKey(e, it), + }, + h( + "td", + {}, + h("span", { + class: `prio ${it.sftDone ? `p${level}` : ""}`, + text: it.sftDone ? level : "–", + }), + ), + h( + "td", + { class: "case-cell" }, + h("strong", { text: it.title }), + h("span", { class: "mono", text: it.id }), + ), + h("td", { text: it.kind }), + h("td", { class: "num", text: money(it.value) }), + h("td", {}, signals(it)), + h("td", { class: "num mono", text: pct(it.c.decision.p_review) }), + wait, + h("td", {}, statusChip(it)), + ); + }), + ); + const empty = $("empty"); + empty.hidden = rows.length > 0; + empty.textContent = S.done.length + ? tab === "escalate" + ? "No escalations. The decision and SFT models have agreed on every case so far." + : "Nothing in this view yet." + : "Cases appear here as the replay routes them."; +} +function tickWaiting() { + for (const [cell, it] of waitingCells) cell.textContent = waitingText(it); +} + +/* Drawer */ +function section(title, ...kids) { + return h("section", {}, h("h3", { text: title }), ...kids); +} +// Drawer re-renders on every state change, so fold state lives outside the DOM. +const openFolds = new Set(); +function fold(title, ...kids) { + const key = title.replace(/ $\d+$$/, ""); + return h( + "details", + { + class: "fold", + open: openFolds.has(key), + ontoggle: (e) => + e.currentTarget.open ? openFolds.add(key) : openFolds.delete(key), + }, + h("summary", { text: title }), + ...kids, + ); +} +function fact(label, value) { + return h("div", {}, h("dt", { text: label }), h("dd", { text: value })); +} +function caseSignals(c) { + const out = []; + const l = c.links; + const add = (n, label) => n && out.push(`${label}: ${n}`); + add(l.accounts_sharing_bank, "Accounts sharing bank"); + add(l.accounts_sharing_device, "Accounts sharing device"); + add(l.accounts_sharing_ip, "Accounts sharing IP"); + add(l.accounts_sharing_address, "Accounts sharing address"); + add(l.linked_accounts_traded_with, "Linked accounts traded with"); + const m = c.summaries; + add(m.failed_logins_last_24h, "Failed logins (24 h)"); + add(m.orders_cancelled_last_24h, "Orders cancelled (24 h)"); + if (m.bank_changed_within_24h) out.push("Bank changed within 24 h"); + if (m.new_device_within_24h) out.push("New device within 24 h"); + if (m.high_risk_country) out.push("High-risk country"); + return out; +} +function renderDrawer() { + const it = selected; + if (!it) return; + selectedStage = it.stage; + const c = it.c; + const body = $("d-body"); + const scroll = body.scrollTop; + $("d-kicker").textContent = `${it.kind} · ${it.id}`; + $("d-title").textContent = it.title; + const isDone = it.stage === "done"; + const badges = h("div", { class: "badges" }, stageChip(it)); + if (it.route.audit) + badges.append(h("span", { class: "chip audit", text: "Audit sample" })); + badges.append( + h("span", { class: "chip", text: `Arrived ${clock(it.arrivedAt)}` }), + ); + + const facts = h( + "dl", + { class: "facts" }, + fact("Order value", moneyFull.format(it.value)), + fact( + "Answer-token mass", + it.scored ? `${(c.decision.answer_mass * 100).toFixed(2)}%` : "—", + ), + fact( + "Shares × price", + `${c.shares.toLocaleString()} × $${c.price.toFixed(2)}`, + ), + fact("Account age", `${c.account_days.toLocaleString()} days`), + fact("Ownership proof", human(c.ownership)), + fact("Accreditation", human(c.account.accreditation)), + fact("Country", c.account.country), + fact("Size vs typical holding", `${c.holding_ratio}×`), + fact( + "Price vs last trade", + `${c.summaries.price_vs_last_trade_pct > 0 ? "+" : ""}${c.summaries.price_vs_last_trade_pct}%`, + ), + ); + + const outcomeName = { + clear: "Auto-clear", + review: "Human review", + escalate: "Escalate", + }[it.outcome]; + const path = h( + "div", + { class: "path" }, + h("span", { text: "Intake" }), + h("i", { text: "→" }), + h("span", { text: "Decision" }), + h("i", { text: "→" }), + h("span", { class: it.route.forward ? "" : "skipped", text: "SFT" }), + h("i", { text: "→" }), + h("span", { text: isDone ? outcomeName : "…" }), + ); + const routeNote = h("p", { + class: "path-note", + text: it.scored + ? `${it.route.reason}.${isDone ? ` Routed in ${seconds(it.finishedAt - it.arrivedAt)}.` : ""}` + : "The decision model has not scored this case yet.", + }); + + const decisionBox = h( + "div", + { class: "score" }, + h("small", { text: "Decision · P(review)" }), + ); + if (it.scored) { + decisionBox.append( + h("b", { text: pct(c.decision.p_review) }), + h( + "div", + { class: "scale" }, + h("i", { style: `left:${logX(c.decision.p_review) * 100}%` }), + ), + ); + } else decisionBox.append(h("b", { text: "Scoring…" })); + const sftBox = h( + "div", + { class: "score" }, + h("small", { text: "SFT · risk level" }), + ); + if (it.sftDone) { + const level = c.verdict.risk_level; + sftBox.append( + h("b", { text: `${level} / 5` }), + h( + "div", + { class: `pips l${level}` }, + ...[1, 2, 3, 4, 5].map((n) => + h("i", { class: n <= level ? "on" : "" }), + ), + ), + ); + } else if (it.scored && !it.route.forward) { + sftBox.append(h("b", { text: "Skipped" })); + } else + sftBox.append( + h("b", { text: it.stage === "sft" ? "Working…" : "Pending" }), + ); + + const parts = [ + badges, + section("Route", path, routeNote), + section("Model output", h("div", { class: "scores" }, decisionBox, sftBox)), + ]; + if (it.sftDone) { + parts.push( + section( + "Reasons", + h( + "div", + { class: "reason-list" }, + ...c.verdict.reasons.map((r) => + h("div", { class: "reason-item", title: r }, human(r)), + ), + ), + ), + ); + } + if (isDone && it.outcome !== "clear") { + const action = S.actions.get(it.id); + const button = (kind, label) => + h("button", { + "aria-pressed": String(action?.kind === kind), + onclick: () => { + if (action?.kind === kind) S.actions.delete(it.id); + else S.actions.set(it.id, { kind, at: S.t }); + mark("queue", "kpi", "drawer"); + }, + text: label, + }); + parts.push( + section( + "Reviewer decision", + h( + "div", + { class: "actions" }, + button("clear", "Clear"), + button("confirm", "Confirm risk"), + button("escalate", "Escalate"), + ), + h("p", { + class: "action-note", + text: action + ? `Recorded at ${clock(action.at)}. Not saved.` + : "Replay only. Not saved.", + }), + ), + ); + } + const sig = caseSignals(c); + parts.push( + fold( + "Facts and signals", + facts, + sig.length && + h( + "div", + { class: "signals", style: "flex-wrap:wrap;margin-top:14px" }, + ...sig.map((t) => h("span", { class: "signal", text: t })), + ), + ), + ); + const events = c.events.slice(-8); + const timeline = h("ol", { class: "timeline" }); + if (c.events.length > events.length) + timeline.append( + h( + "li", + {}, + `${c.events.length - events.length} earlier events`, + h("small", { text: "Not shown" }), + ), + ); + for (const e of events) + timeline.append( + h("li", {}, human(e.type), h("small", { text: before(e.minutes_ago) })), + ); + timeline.append( + h( + "li", + { class: "target" }, + c.kind === "bid_placed" ? "Bid placed" : "Listing created", + h("small", { text: "Under review now" }), + ), + ); + parts.push(fold("Account timeline", timeline)); + const texts = [ + ...c.messages.map( + (m) => `${m.direction === "in" ? "Received" : "Sent"}: ${m.text}`, + ), + ...(c.document + ? [ + `Document: ${c.document.length > 280 ? `${c.document.slice(0, 280)}…` : c.document}`, + ] + : []), + ]; + if (texts.length) + parts.push( + fold( + `Text evidence (${texts.length})`, + ...texts.map((t) => h("p", { class: "quote", text: t })), + ), + ); + parts.push( + fold("Raw evidence packet", h("pre", { text: JSON.stringify(c, null, 2) })), + ); + body.replaceChildren(...parts); + body.scrollTop = scroll; +} +let lastFocus = null; +// Without preventDefault the same Enter press activates the drawer's close button. +function openOnKey(e, it) { + if (e.key !== "Enter" && e.key !== " ") return; + e.preventDefault(); + openCase(it); +} +function openCase(it) { + const wasOpen = !!selected; + selected = it; + if (!wasOpen) lastFocus = document.activeElement; + $("d-body").scrollTop = 0; + renderDrawer(); + $("drawer").classList.add("open"); + $("drawer").removeAttribute("inert"); + $("drawer").setAttribute("aria-hidden", "false"); + $("scrim").hidden = false; + if (!wasOpen) $("d-close").focus({ preventScroll: true }); +} +function closeCase() { + if (!selected) return; + const id = selected.id; + selected = null; + $("drawer").classList.remove("open"); + $("drawer").setAttribute("inert", ""); + $("drawer").setAttribute("aria-hidden", "true"); + $("scrim").hidden = true; + // The opener may have been rebuilt while the drawer was open. + const target = lastFocus?.isConnected + ? lastFocus + : lastFocus?.dataset?.case && + document.querySelector(`${lastFocus.tagName}[data-case="${id}"]`); + target?.focus?.({ preventScroll: true }); +} + +/* Controls */ +function renderControls() { + const done = finished(); + const live = $("live"); + live.classList.toggle("on", S.running); + $("live-text").textContent = S.running + ? "Live replay" + : done + ? "Replay complete" + : S.t === 0 + ? "Ready" + : "Paused"; + $("play-label").textContent = S.running + ? "Pause replay" + : done + ? "Replay again" + : S.t === 0 + ? "Play replay" + : "Resume replay"; + $("play-icon").setAttribute("href", S.running ? "#i-pause" : "#i-play"); + $("skip").disabled = done; + $("graph").classList.toggle("running", S.running); + document + .querySelectorAll("[data-speed]") + .forEach((b) => + b.setAttribute("aria-checked", String(Number(b.dataset.speed) === speed)), + ); +} +function resetReplay() { + S = fresh(); + particles.forEach((dot) => dot.remove()); + particles.clear(); + queueDotCount = -1; + closeCase(); +} +function render(tick) { + const d = S.dirty; + const all = d.has("all"); + if (all || d.has("edges")) renderEdges(); + if (all || d.has("nodes")) renderNodes(); + if (all || d.has("kpi")) renderKpis(); + else if (tick && S.running) renderSpark(); + if (all || d.has("strip")) renderStrip(all); + if (all || d.has("charts")) renderCharts(); + if (all || d.has("feed")) renderFeed(); + if (all || d.has("queue")) renderQueue(); + else if (tick) tickWaiting(); + if ( + selected && + (d.has("drawer") || all) && + (selected.stage !== selectedStage || d.has("queue") || all) + ) + renderDrawer(); + renderControls(); + d.clear(); +} +let last = performance.now(); +let lastTick = 0; +function frame(now) { + const dt = Math.min(now - last, 100); + last = now; + if (S.running) { + let left = dt * speed; + while (left > 0) { + const step = Math.min(left, STEP); + substep(step); + left -= step; + } + if (finished()) { + S.running = false; + mark("controls"); + } + } + drawParticles(); + $("clock").textContent = clock(S.t); + const tick = now - lastTick > 1000; + if (tick) lastTick = now; + if (S.dirty.size || tick) render(tick); + requestAnimationFrame(frame); +} + +function bind() { + $("play").addEventListener("click", () => { + if (finished()) resetReplay(); + S.running = !S.running; + mark("controls"); + }); + $("skip").addEventListener("click", () => { + while (!finished()) substep(STEP); + S.running = false; + mark("all"); + }); + $("reset").addEventListener("click", () => { + resetReplay(); + mark("all"); + }); + document.querySelectorAll("[data-speed]").forEach((b) => + b.addEventListener("click", () => { + speed = Number(b.dataset.speed); + mark("controls"); + }), + ); + document.querySelectorAll("[data-tab]").forEach((b) => + b.addEventListener("click", () => { + tab = b.dataset.tab; + pressedNode = null; + document + .querySelectorAll("[data-node]") + .forEach((n) => n.setAttribute("aria-pressed", "false")); + mark("queue"); + }), + ); + document.querySelectorAll("[data-node]").forEach((n) => { + n.setAttribute("aria-pressed", "false"); + n.title = "Filter the review queue"; + n.addEventListener("click", () => { + pressedNode = pressedNode === n.dataset.node ? null : n.dataset.node; + document + .querySelectorAll("[data-node]") + .forEach((m) => + m.setAttribute( + "aria-pressed", + String(m.dataset.node === pressedNode), + ), + ); + if (pressedNode) { + tab = TAB_FOR_NODE[pressedNode]; + mark("queue"); + $("queue").scrollIntoView({ + behavior: reduced.matches ? "auto" : "smooth", + block: "start", + }); + } + }); + }); + $("d-close").addEventListener("click", closeCase); + $("scrim").addEventListener("click", closeCase); + document.addEventListener("keydown", (e) => { + if (e.key === "Escape") closeCase(); + }); + const themeButton = $("theme"); + const syncTheme = () => { + const dark = document.documentElement.dataset.theme === "dark"; + themeButton.setAttribute("aria-pressed", String(dark)); + themeButton.setAttribute( + "aria-label", + dark ? "Switch to light mode" : "Switch to dark mode", + ); + }; + themeButton.addEventListener("click", () => { + const theme = + document.documentElement.dataset.theme === "dark" ? "light" : "dark"; + document.documentElement.dataset.theme = theme; + localStorage.setItem("trace-theme", theme); + syncTheme(); + }); + syncTheme(); +} + +fetch("../cases.json") + .then((r) => { + if (!r.ok) throw Error("No cases"); + return r.json(); + }) + .then((cases) => { + ORDER = cases + .map(prepare) + .sort((a, b) => hash(`${a.id}:order`) - hash(`${b.id}:order`)); + buildGraph(); + buildStrip(); + S = fresh(); + bind(); + const params = new URLSearchParams(location.search); + if (params.has("end")) while (!finished()) substep(STEP); + S.running = !params.has("paused") && !params.has("end"); + requestAnimationFrame(frame); + }) + .catch(() => { + $("live-text").textContent = "Recorded cases unavailable"; + });

Replace trace prototypes with operations dashboard

Changes