/* global React, window, PidDiagram, KgSubgraph, SOURCES */ /* ============================================================ Arena UI chrome, header, controls, drawers, scoreboard, evidence section, upload modal. Presentational + light state. ============================================================ */ const { useState, useEffect, useRef } = React; function UIcon({ d, size = 16, color = "currentColor", sw = 2, fill = "none" }) { return ( {d} ); } const Plus = (p) => } />; const BankIco = (p) => } />; const Check = (p) => } />; const Eye = (p) => } />; const EyeOff = (p) => } />; const Graph = (p) => } />; const Close = (p) => } />; const Upload = (p) => } />; const Cmd = (p) => } />; const CAT_COLORS = { Valves: "#2563EB", Tags: "#A855F7", Connectivity: "#0EA5A4", Safety: "#DC2626", }; // ── Header ─────────────────────────────────────────────────────── function Header({ corpus, setCorpus, corpora, blind, setBlind, revealed, onReveal, onUpload, running, uploadedCount }) { return (
{/* brand */}
P&ID Arena
{/* corpus selector */}
Corpus
{corpora.map((c) => { const on = c.id === corpus; return ( ); })}
{/* status chip */}
{uploadedCount > 0 ? "Corpus + " + uploadedCount + " of your drawing" + (uploadedCount > 1 ? "s" : "") + " · in Knowledge Graph" : "Corpus loaded · parsed into Knowledge Graph"}
{/* blind toggle / reveal */}
{blind && !revealed && ( )}
{/* upload */}
); } // ── Question bar ───────────────────────────────────────────────── function QuestionBar({ value, setValue, onRun, onToggleBank, bankOpen, running, corpusDetail, competitors, selected, onToggleCompetitor }) { const ref = useRef(null); useEffect(() => { function onKey(e) { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); onRun(); } } window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onRun]); return (
setValue(e.target.value)} placeholder="Ask all models…" disabled={running} onKeyDown={(e) => { if (e.key === "Enter" && !e.metaKey && !e.ctrlKey) onRun(); }} style={{ width: "100%", height: 52, padding: "0 18px", borderRadius: 12, border: "1px solid var(--border)", background: "var(--surface)", outline: "none", font: "400 16px var(--font-sans)", color: "var(--fg-1)", boxShadow: "var(--shadow-xs)" }} />
{corpusDetail} {competitors && competitors.length > 0 && ( Compare against {(() => { const allOn = competitors.every((c) => selected[c.key]); return ( ); })()} {competitors.map((c) => { const on = !!selected[c.key]; return ( ); })} )}
); } // ── Question bank drawer ───────────────────────────────────────── function QuestionBank({ open, questions, onPick, onClose }) { if (!open) return null; return (
Suggested questions
{questions.map((q) => { const cat = CAT_COLORS[q.category] || "var(--fg-3)"; return ( ); })}
); } Object.assign(window, { Header, QuestionBar, QuestionBank, UIcon, CAT_COLORS });