diff --git a/web/app.js b/web/app.js new file mode 100644 index 0000000..2dc317b --- /dev/null +++ b/web/app.js @@ -0,0 +1,610 @@ +import { routeCase } from "./routing.mjs"; +const $ = (id) => document.getElementById(id); +const names = { + 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", +}; +const state = { + cases: [], + current: null, + busy: false, + completed: new Set(), + route: null, + open: null, + results: new Map(), + batchIndex: 0, + batchRunning: false, + pauseRequested: false, + speed: 1, +}; +const edges = [ + ["incoming", "decision"], + ["decision", "sft"], + ["decision", "clear"], + ["sft", "review"], + ["sft", "escalate"], +]; +const paths = new Map(); +const reduced = matchMedia("(prefers-reduced-motion: reduce)"); +function playback(duration, onFrame) { + let elapsed = 0; + let previous = performance.now(); + return new Promise((resolve) => { + function frame(now) { + elapsed += (now - previous) * state.speed; + previous = now; + const progress = reduced.matches ? 1 : Math.min(elapsed / duration, 1); + onFrame?.(progress); + if (progress < 1) requestAnimationFrame(frame); + else resolve(); + } + requestAnimationFrame(frame); + }); +} +const human = (text) => text.replaceAll("_", " ").toLowerCase(); +const percent = (p) => + p < 0.00001 + ? "<0.001%" + : p > 0.99999 + ? ">99.999%" + : `${(p * 100).toFixed(2)}%`; +function el(tag, text, cls) { + const n = document.createElement(tag); + n.textContent = text; + if (cls) n.className = cls; + return n; +} +function makeSVG(tag, attrs) { + const n = document.createElementNS("http://www.w3.org/2000/svg", tag); + Object.entries(attrs).forEach(([k, v]) => n.setAttribute(k, v)); + return n; +} +function drawWires() { + const box = $("graph").getBoundingClientRect(); + $("wires").setAttribute("viewBox", `0 0 ${box.width} ${box.height}`); + for (const [a, b] of edges) { + const ar = $(a).querySelector(".orb").getBoundingClientRect(), + br = $(b).querySelector(".orb").getBoundingClientRect(); + const x1 = ar.left + ar.width / 2 - box.left, + y1 = ar.top + ar.height / 2 - box.top, + x2 = br.left + br.width / 2 - box.left, + y2 = br.top + br.height / 2 - box.top; + const vertical = Math.abs(x2 - x1) < Math.abs(y2 - y1) * 0.65; + const side = x1 < box.width / 2 ? -1 : 1; + const startX = x1 + (side * ar.width) / 2; + const endX = x2 + (side * br.width) / 2; + const d = vertical + ? `M${startX},${y1} C${startX + side * 40},${y1} ${endX + side * 40},${y2} ${endX},${y2}` + : `M${x1},${y1} C${(x1 + x2) / 2},${y1} ${(x1 + x2) / 2},${y2} ${x2},${y2}`; + const key = `${a}-${b}`; + if (!paths.has(key)) { + const under = makeSVG("path", { class: "wire-under" }), + line = makeSVG("path", { class: "wire" }); + $("wire-paths").append(under, line); + paths.set(key, { under, line }); + } + const { under, line } = paths.get(key); + under.setAttribute("d", d); + line.setAttribute("d", d); + } +} +function reset(close = true) { + state.completed.clear(); + state.route = null; + if (close) closeDetail(false); + document + .querySelectorAll(".node") + .forEach((n) => n.classList.remove("active", "visited")); + paths.forEach(({ line }) => line.classList.remove("visited")); + $("traveller").setAttribute("hidden", ""); + $("decision-value").textContent = "128 ms · one pass"; + $("sft-value").textContent = "1.5 s · a closer look"; + updateOutcomes(); + $("status").textContent = "Press play. Tap any node to look inside."; +} +function selected() { + state.batchIndex = 0; + state.current = + $("scenario").value === "all" + ? state.cases[0] + : state.cases.find((c) => c.id === $("scenario").value); + reset(); + $("incoming-value").textContent = + `${state.current.shares.toLocaleString()} shares`; + if ($("scenario").value === "all") { + $("status").textContent = + `${state.cases.length} cases. One at a time. Press play to begin.`; + } + busy(false); +} +function mark(id) { + $(id).classList.remove("active"); + $(id).classList.add("visited"); + state.completed.add(id); + if (state.open === id) showDetail(id, false); +} +async function travel(a, b) { + const path = paths.get(`${a}-${b}`).line; + path.classList.add("visited"); + const length = path.getTotalLength(); + $("traveller").removeAttribute("hidden"); + await playback(1500, (progress) => { + const p = path.getPointAtLength(length * progress); + $("traveller").setAttribute("transform", `translate(${p.x},${p.y})`); + }); + $("traveller").setAttribute("hidden", ""); +} +function busy(value) { + state.busy = value; + ["scenario", "unusual", "conflict", "audit", "reset"].forEach( + (id) => ($(id).disabled = value), + ); + const all = $("scenario").value === "all"; + $("play").disabled = value && !state.batchRunning; + $("play").setAttribute( + "aria-label", + value && all ? "Pause after current case" : "Run trace", + ); + $("play").firstElementChild.textContent = value && all ? "Ⅱ" : "▶"; + $("play-label").textContent = value + ? all + ? "Pause batch" + : "Following…" + : all + ? state.batchIndex > 0 && state.batchIndex < state.cases.length + ? "Resume batch" + : "Run all cases" + : "Replay trace"; +} +async function run() { + if (state.busy) { + if (state.batchRunning) { + state.pauseRequested = true; + $("play").disabled = true; + $("play-label").textContent = "Pausing…"; + } + return; + } + if (!state.current) return; + state.batchRunning = $("scenario").value === "all"; + state.pauseRequested = false; + if (state.batchRunning && state.batchIndex === state.cases.length) + state.batchIndex = 0; + if (state.batchRunning && state.batchIndex === 0) state.results.clear(); + busy(true); + $("options").hidden = true; + $("settings").setAttribute("aria-expanded", "false"); + if (state.batchRunning) { + while (state.batchIndex < state.cases.length && !state.pauseRequested) { + const index = state.batchIndex; + await runCase(state.cases[index]); + state.batchIndex++; + $("status").textContent = + `${state.batchIndex} / ${state.cases.length} complete · ${names[state.current.family]}`; + if (state.batchIndex < state.cases.length && !state.pauseRequested) + await playback(750); + } + $("status").textContent = state.pauseRequested + ? `Paused · ${state.batchIndex} / ${state.cases.length} complete. Press play to resume.` + : `All ${state.cases.length} cases placed. Open a destination to inspect them.`; + } else await runCase(state.current); + state.batchRunning = false; + busy(false); +} +async function runCase(c) { + state.current = c; + reset(false); + $("incoming-value").textContent = state.batchRunning + ? `${state.batchIndex + 1} / ${state.cases.length} · ${c.shares.toLocaleString()} shares` + : `${c.shares.toLocaleString()} shares`; + const route = routeCase(c, { + unusual: $("unusual").checked, + conflict: $("conflict").checked, + audit: $("audit").checked || Math.random() < 0.02, + }); + state.route = route; + if (state.open) showDetail(state.open, false); + mark("incoming"); + $("status").textContent = "A case enters the decision model."; + await travel("incoming", "decision"); + $("decision").classList.add("active"); + await playback(128); + mark("decision"); + $("decision-value").textContent = `${percent(c.decision.p_review)} review`; + if (!route.forward) { + $("sft-value").textContent = "Not needed"; + await travel("decision", "clear"); + mark("clear"); + recordOutcome(c, "clear", route); + $("status").textContent = + "Auto-cleared. The generative model was not needed."; + return; + } + $("status").textContent = `${route.reason}. Taking a closer look.`; + await travel("decision", "sft"); + $("sft").classList.add("active"); + await playback(1535); + mark("sft"); + $("sft-value").textContent = `Risk ${c.verdict.risk_level} / 5`; + const end = route.escalate ? "escalate" : "review"; + await travel("sft", end); + mark(end); + recordOutcome(c, end, route); + $("status").textContent = route.escalate + ? "Conflicting case. A senior reviewer takes over." + : route.audit + ? "Low-risk case sampled for audit." + : `Risk level ${c.verdict.risk_level}. Ready for human review.`; +} +function recordOutcome(c, outcome, route) { + state.results.set(c.id, { + id: c.id, + title: names[c.family], + level: c.verdict.risk_level, + outcome, + audit: route.audit, + }); + updateOutcomes(); + if (state.open) showDetail(state.open, false); +} +function updateOutcomes() { + for (const [outcome, label, empty] of [ + ["clear", "cleared", "Low risk"], + ["review", "queued", "Sorted by risk"], + ["escalate", "escalated", "Hard or conflicting"], + ]) { + const count = [...state.results.values()].filter( + (r) => r.outcome === outcome, + ).length; + $(outcome + "-value").textContent = count ? `${count} ${label}` : empty; + } +} +function caseList(rows) { + const list = el("ul", ""); + for (const row of rows) { + const c = state.cases.find((c) => c.id === row.id); + const item = el("li", ""); + const details = el("details", "", "queued-case"); + details.dataset.key = row.id; + const summary = el("summary", row.title); + summary.append( + el("small", `${row.id}${row.audit ? " · Audit sample" : ""}`), + ); + details.append( + summary, + el( + "p", + row.outcome === "clear" + ? "Auto-cleared by the decision model. SFT was skipped." + : c.verdict.reasons.map(human).join(" · "), + ), + evidence(c), + ); + item.append(details); + list.append(item); + } + return list; +} +function facts(items) { + const dl = el("dl", ""); + for (const [key, value] of items) + dl.append(el("dt", key), el("dd", String(value))); + return dl; +} +function evidence(c) { + const d = el("details", ""); + d.dataset.key = `evidence-${c.id}`; + d.append(el("summary", "Inspect the evidence packet")); + const data = { + ownership: c.ownership, + holding_ratio: c.holding_ratio, + account: c.account, + summaries: c.summaries, + links: c.links, + events: c.events, + document: c.document, + messages: c.messages, + }; + d.append(el("pre", JSON.stringify(data, null, 2))); + return d; +} +function showDetail(id, focus = true) { + if (!state.current) return; + const openKeys = + state.open === id + ? [...$("detail-body").querySelectorAll("details[open]")].map( + (d) => d.dataset.key, + ) + : []; + const focusedKey = document.activeElement.closest("details")?.dataset.key; + state.open = id; + document + .querySelectorAll(".node") + .forEach((n) => n.setAttribute("aria-expanded", String(n.id === id))); + $("detail").hidden = false; + const c = state.current; + const done = state.completed.has(id); + const body = $("detail-body"); + body.replaceChildren(); + const titles = { + incoming: "The incoming case", + decision: "A single decision", + sft: "The SFT verdict", + clear: "The fast path", + review: "Human review", + escalate: "A second opinion", + about: "Inside the replay", + }; + $("detail-title").textContent = + id === "sft" && !done ? "A closer look" : titles[id]; + $("detail-kicker").textContent = + id === "about" + ? "TRACE / RESEARCH" + : id === "incoming" + ? c.id + : id === "decision" + ? "STAGE 01 / 128 MS" + : id === "sft" + ? "STAGE 02 / ~1.5 S" + : "ROUTING OUTCOME"; + if (id === "incoming") { + body.append( + el("p", names[c.family]), + facts([ + [ + "Order value", + new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + maximumFractionDigits: 0, + }).format(c.shares * c.price), + ], + ["Account age", `${c.account_days} days`], + ["Ownership", human(c.ownership)], + ["Holding ratio", `${c.holding_ratio}× typical`], + ]), + ); + const list = el("ul", ""); + c.events.slice(-5).forEach((e) => { + const li = el("li", human(e.type)); + li.append( + el("small", `${e.minutes_ago.toLocaleString()} minutes before listing`), + ); + list.append(li); + }); + body.append(list, evidence(c)); + } + if (id === "decision") { + body.append( + el( + "p", + "Qwen3.5-4B reads the case once. Two answer-token logits give P(ok) and P(review). No text is generated.", + ), + ); + if (done) { + const score = el("div", percent(c.decision.p_review), "score"); + score.append(el("small", "P(review)")); + body.append( + score, + facts([ + ["Route", state.route.reason], + [ + "Answer-token mass", + `${(c.decision.answer_mass * 100).toFixed(2)}%`, + ], + ]), + ); + } else + body.append(el("p", "Run the trace to reveal its recorded decision.")); + body.append( + el( + "p", + "Below 2%: auto-clear, with a 2% random audit. Uncertainty or unusual inputs bypass the fast path. Scores are not calibrated for unfamiliar cases.", + ), + ); + } + if (id === "sft") { + if (done) { + const score = el("div", `${c.verdict.risk_level} / 5`, "score"); + score.append(el("small", "Risk level")); + body.append(score, el("h3", "Recorded reasons")); + c.verdict.reasons.forEach((r) => { + const reason = el("div", human(r), "reason"); + reason.append(el("small", r)); + body.append(reason); + }); + body.append( + facts([ + ["Ownership", human(c.ownership)], + ["Holding ratio", `${c.holding_ratio}× typical`], + ]), + evidence(c), + ); + } else + body.append( + el( + "p", + "The generative 4B model returns a risk level and fixed reason codes, only when the router calls it. Run a flagged case to see its verdict.", + ), + ); + } + if (id === "clear") { + body.append( + el( + "p", + done + ? "Very low review probability. No routing override. Not selected for the random audit. Stage 2 was skipped." + : "Only very low-risk cases take this path. A small random sample still goes through SFT for audit.", + ), + ); + body.append( + caseList( + [...state.results.values()].filter((r) => r.outcome === "clear"), + ), + ); + } + if (id === "review") { + body.append( + el( + "p", + "Cases are ordered by risk level, highest first. No automatic rejection.", + ), + ); + const rows = [...state.results.values()].filter( + (r) => r.outcome === "review", + ); + if (!rows.length) body.append(el("p", "No cases queued in this session.")); + else { + for (const level of [5, 4, 3, 2, 1]) { + const group = rows.filter((r) => r.level === level); + if (level < 3 && !group.length) continue; + const section = el("details", "", "priority-group"); + section.dataset.key = `priority-${level}`; + const summary = el("summary", `Priority ${level}`); + summary.append(el("span", String(group.length), "case-count")); + section.append(summary, caseList(group)); + body.append(section); + } + } + } + if (id === "escalate") { + body.append( + el( + "p", + done + ? "The routing override flagged a conflict, or the two model decisions disagree. A frontier model or senior reviewer must resolve it." + : "Hard or conflicting cases leave the automatic path. Use Routing options to preview this handoff.", + ), + el( + "p", + "This replay does not call a frontier model. The conflict control changes routing, not the recorded case or verdict.", + ), + ); + body.append( + caseList( + [...state.results.values()].filter((r) => r.outcome === "escalate"), + ), + ); + } + if (id === "about") + body.append( + el( + "p", + "Real saved outputs. Synthetic cases. Both models use Qwen3.5-4B with separate LoRA adapters.", + ), + facts([ + ["Decision median", "128 ms"], + ["SFT median", "1,535 ms"], + ["Test cases", "124"], + ]), + el( + "p", + "At 1×, model waits use measured median latency. Playback speed changes the visualization only; no GPU inference runs here. The routing policy is a simulation, not a validated production system.", + ), + ); + for (const details of body.querySelectorAll("details")) { + details.open = openKeys.includes(details.dataset.key); + if (!focus && details.dataset.key === focusedKey) + details.querySelector("summary").focus({ preventScroll: true }); + } + if (focus) $("close-detail").focus({ preventScroll: true }); +} +function closeDetail(focus = true) { + const previous = state.open; + state.open = null; + $("detail").hidden = true; + document + .querySelectorAll(".node") + .forEach((n) => n.setAttribute("aria-expanded", "false")); + if (focus && previous && $(previous)) + $(previous).focus({ preventScroll: true }); +} +document + .querySelectorAll("[data-node]") + .forEach((n) => + n.addEventListener("click", () => + state.open === n.id ? closeDetail() : showDetail(n.id), + ), + ); +$("close-detail").addEventListener("click", () => closeDetail()); +$("about").addEventListener("click", () => showDetail("about")); +$("play").addEventListener("click", run); +$("speed").addEventListener("change", () => { + state.speed = Number($("speed").value); +}); +$("scenario").addEventListener("change", selected); +$("settings").addEventListener("click", () => { + const open = $("options").hidden; + $("options").hidden = !open; + $("settings").setAttribute("aria-expanded", String(open)); +}); +["unusual", "conflict", "audit"].forEach((id) => + $(id).addEventListener("change", reset), +); +$("reset").addEventListener("click", () => { + state.results.clear(); + state.batchIndex = 0; + ["unusual", "conflict", "audit"].forEach((id) => ($(id).checked = false)); + selected(); +}); +function updateThemeButton() { + const dark = document.documentElement.dataset.theme === "dark"; + $("theme").setAttribute("aria-pressed", String(dark)); + $("theme").setAttribute( + "aria-label", + dark ? "Switch to light mode" : "Switch to dark mode", + ); +} +$("theme").addEventListener("click", () => { + const theme = + document.documentElement.dataset.theme === "dark" ? "light" : "dark"; + document.documentElement.dataset.theme = theme; + localStorage.setItem("trace-theme", theme); + updateThemeButton(); +}); +updateThemeButton(); +document.addEventListener("keydown", (e) => { + if (e.key === "Escape") { + closeDetail(); + $("options").hidden = true; + $("settings").setAttribute("aria-expanded", "false"); + } +}); +new ResizeObserver(drawWires).observe($("graph")); +fetch("cases.json") + .then((r) => { + if (!r.ok) throw Error("No cases"); + return r.json(); + }) + .then((cases) => { + state.cases = cases; + const all = el("option", `All cases · ${cases.length}`); + all.value = "all"; + $("scenario").append(all); + Object.keys(names).forEach((family) => { + const c = cases.find((c) => c.family === family); + const option = el("option", names[family]); + option.value = c.id; + $("scenario").append(option); + }); + $("scenario").firstElementChild.remove(); + busy(false); + $("play-label").textContent = "Follow trace"; + selected(); + drawWires(); + }) + .catch(() => { + $("status").textContent = "Recorded cases unavailable. Please reload."; + });

Add decision model serving and trace design prototypes

Changes