{stages.map((stage, i) => { const timing = PIPELINE_TIMING[stage.id]; let status = null; if (playhead >= timing.start && playhead < timing.end) status = "started"; else if (playhead >= timing.end) status = "completed"; const Ic = Icons[stage.icon]; let borderColor = T.borderHi; let bgColor = "#111119"; let iconColor = T.dim; let glow = "none"; if (status === "started") { borderColor = T.accent; bgColor = "#1e3a5f"; iconColor = T.accent2; glow = "0 0 16px rgba(59,130,246,0.4)"; } else if (status === "completed") { borderColor = T.safe; bgColor = "#0f2e1a"; iconColor = T.safe; glow = "0 0 8px rgba(34,197,94,0.2)"; } return (

{i > 0 && (

)}

{status === "started" ? ( ) : status === "completed" ? ( ) : ( )}

{stage.label}

); })}

); } /* ============ TERMINAL (streaming reasoning) ============ */ function TypedText({ text, charsVisible }) { const shown = text.slice(0, Math.max(0, charsVisible)); const isTyping = charsVisible < text.length; return ( {shown} {isTyping && ( )} ); } function ReasoningBlock({ stageId, label, icon: Ic, reasoning, status, charsVisible, sast }) { if (!status) return null; const isRunning = status === "started"; return (

[{label}] {isRunning ? "Processing..." : "Complete"} {isRunning && }

{reasoning && (

)} {stageId === "sast" && sast && status === "completed" && (

SAST: {sast.passed ? "PASS" : "FAIL"} — {sast.findings} findings ({sast.critical} critical, {sast.high} high)

)}

); } /* ============ CITATION CARD ============ */ function CitationCard({ id }) { const c = CITATIONS[id]; const [open, setOpen] = useState(false); if (!c) return null; return (

{open && (

"{c.text}"

{c.url.replace(/^https?:\/\//, "")} Licence · {c.licence}

)}

); } /* ============ DIFF VIEWER ============ */ function DiffViewer({ patch }) { if (!patch) return null; return (

      {patch.split("\n").map((line, i) => {
        let color = "#94a3b8";
        if (line.startsWith("+") && !line.startsWith("+++")) color = T.safe;
        else if (line.startsWith("-") && !line.startsWith("---")) color = T.unsafe;
        else if (line.startsWith("@@")) color = T.accent2;
        else if (line.startsWith("---") || line.startsWith("+++")) color = T.text;
        return {line}{"\n"};
      })}

); } /* ============ VERDICT PANEL ============ */ function VerdictPanel({ pr, visible }) { if (!visible) return null; const v = pr.verdict; const isSafe = v === "Safe"; const isEscalated = v === "Escalated"; const colour = isSafe ? T.safe : isEscalated ? T.warn : T.unsafe; const bg = isSafe ? "rgba(22,101,52,0.15)" : isEscalated ? "rgba(133,77,14,0.15)" : "rgba(127,29,29,0.15)"; const bd = isSafe ? "#166534" : isEscalated ? "#854d0e" : "#7f1d1d"; const Ic = isSafe ? Icons.ShieldCheck : isEscalated ? Icons.ShieldAlert : Icons.ShieldX; return (

VERDICT: {v.toUpperCase()}

SAST Gate + LLM Evaluator + Adversarial Auditor · attempt 1

); } /* ============ DETAIL VIEW ============ */ function EvaluationDetail({ prId, onBack }) { const pr = PRS.find(p => p.id === prId); if (!pr) return null; const hasRemediation = pr.status === "unsafe" || pr.status === "remediated"; const terminalEnd = hasRemediation ? PIPELINE_TIMING.remediation.end : PIPELINE_TIMING.auditor.end; const totalDuration = terminalEnd + 0.6; const [playhead, setPlayhead] = useState(0); const [playing, setPlaying] = useState(true); const [showRaw, setShowRaw] = useState(false); const rafRef = useRef(null); const lastTsRef = useRef(null); const scrollRef = useRef(null); useEffect(() => { // Reset on PR change setPlayhead(0); setPlaying(true); }, [prId]); useEffect(() => { if (!playing) { lastTsRef.current = null; return; } const step = (ts) => { if (lastTsRef.current == null) lastTsRef.current = ts; const dt = (ts - lastTsRef.current) / 1000; lastTsRef.current = ts; setPlayhead(p => { const next = p + dt; if (next >= totalDuration) { setPlaying(false); return totalDuration; } return next; }); rafRef.current = requestAnimationFrame(step); }; rafRef.current = requestAnimationFrame(step); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); lastTsRef.current = null; }; }, [playing, totalDuration]); // Auto-scroll terminal as new content streams in useEffect(() => { const el = scrollRef.current; if (el && playing) el.scrollTop = el.scrollHeight; }, [playhead, playing]); const stageStatus = (sid) => { const t = PIPELINE_TIMING[sid]; if (playhead < t.start) return null; if (playhead < t.end) return "started"; return "completed"; }; const charsForStage = (sid, text) => { if (!text) return 0; const t = PIPELINE_TIMING[sid]; if (playhead < t.start) return 0; if (playhead >= t.end) return text.length; const prog = (playhead - t.start) / (t.end - t.start); return Math.floor(text.length * prog); }; const showCitations = playhead > PIPELINE_TIMING.evaluator.start + 0.4 && pr.findings.length > 0; const showPatch = playhead > PIPELINE_TIMING.remediation.start + 0.6 && pr.patch; const showVerdict = playhead > terminalEnd - 0.1 && pr.verdict; const replay = () => { setPlayhead(0); setPlaying(true); }; const skipToEnd = () => { setPlayhead(totalDuration); setPlaying(false); }; return (

{/* breadcrumb + header */}

#{pr.githubPrNumber}

{pr.title}

{pr.headBranch} → {pr.baseBranch} {pr.repo} @{pr.author} {pr.headSha} +{pr.diff.add} −{pr.diff.del} {pr.diff.files} files {timeAgo(pr.createdAt)}

{/* Pipeline */}

{ setPlayhead(t); setPlaying(false); }} playing={playing} onPlayPause={() => setPlaying(p => !p)} />

0 ? "1fr 360px" : "1fr", gap: 18 }}> {/* Terminal / reasoning */}

osynax-eval — {pr.repo.split("/").pop()}/pull/{pr.githubPrNumber}

{STAGES.filter(s => hasRemediation || s.id !== "remediation").map(s => ( ))} {showPatch && (

Remediation patch opened as PR #{pr.githubPrNumber}-fix

)} {pr.status === "evaluating" && (

Live evaluation in progress · webhook received {timeAgo(pr.createdAt)}

)}

{/* Citations sidebar */} {pr.findings.length > 0 && ( )}

); } function PipelineScrub({ playhead, total, onSeek, playing, onPlayPause }) { const trackRef = useRef(null); const seek = (e) => { if (!trackRef.current) return; const r = trackRef.current.getBoundingClientRect(); const x = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); onSeek(x * total); }; const pct = total > 0 ? (playhead / total) * 100 : 0; return (

{playhead.toFixed(1)}s / {total.toFixed(1)}s

); } const btnGhost = { display: "inline-flex", alignItems: "center", gap: 6, background: "transparent", border: `1px solid ${T.borderHi}`, borderRadius: 6, padding: "7px 12px", color: T.muted, fontSize: 12, cursor: "pointer", fontFamily: T.mono, }; /* ============ ANALYTICS placeholder ============ */ function AnalyticsPage() { return (

Analytics

7-day verdict distribution · framework hit rate · evaluator agreement

Verdict mix · last 7 days

Demo data · the live dashboard pulls from /api/analytics/verdicts.

); } function Legend({ color, label }) { return ( {label} ); } /* ============ STREAM placeholder — jumps you to the in-progress PR ============ */ function StreamPage({ onOpenPR }) { return (

Live Stream

One PR is mid-evaluation. Open it to watch the agents work.

{PRS.filter(p => p.status === "evaluating").map(pr => (

onOpenPR(pr.id)} style={{ display: "flex", alignItems: "center", gap: 14, padding: "12px 14px", borderRadius: 8, cursor: "pointer", background: "#11111a", border: `1px solid ${T.accent}`, }}>

#{pr.githubPrNumber} {pr.title}

{pr.author} · {pr.headBranch} → {pr.baseBranch} · {timeAgo(pr.createdAt)}

))}

); } /* ============ ROOT APP ============ */ function App() { const [route, setRoute] = useState({ page: "evaluations", prId: null }); const onNav = (id) => setRoute({ page: id, prId: null }); const onOpenPR = (prId) => setRoute({ page: "detail", prId }); const onBack = () => setRoute({ page: "evaluations", prId: null }); return (

p.id === route.prId)?.githubPrNumber}` : `Dashboard · ${route.page}` } style={{ minHeight: "100%", background: T.bg, color: T.text, fontFamily: T.mono, }}>

); } window.OsynaxApp = App;

osynax dashboard

{pr.title}

Analytics

Live Stream