/* global React, ReactDOM */ // BlueSci demo — animated CLI walkthrough, first interaction → final report const { useState, useEffect, useRef, useMemo } = React; // ────────────────────────────────────────────────────────────────── // Timeline — each step is one line in the terminal. // Types: prompt, sys, ok, dim, sev, banner, sec, big, ask, done, code, blast // `delay` is ms BEFORE the line appears (after previous). // ────────────────────────────────────────────────────────────────── const BANNER = String.raw` ▄▄▄▄ █ █ ▄▄▄▄ ▄▄▄▄ ▄▄▄▄ █ █ █ █ █ █ █ █ █ █▄▄▄▀ █ █ █▄▄▄ █▄▄▄ █ █ █ █ █ █ █ █ █ █ █▄▄▄▀ █▄▄▄ █ ▄▄▄▄ ▄▄▄▄ ▄▄▄▄ █▄▄▄▄ `; const TIMELINE = [ // ── INSTALL & FIRST RUN ───────────────────────────────── { t: "prompt", text: "npx @bluesci/cli init ./mlpipe", delay: 400 }, { t: "dim", text: "↳ resolving @bluesci/cli@0.8.3", delay: 700 }, { t: "dim", text: "↳ verified signature (sigstore) ed25519:4f3a…c20e", delay: 500 }, { t: "dim", text: "↳ installed 14 packages in 2.1s", delay: 600 }, { t: "banner", text: BANNER, delay: 500 }, { t: "dim", text: "BlueSci · autonomous red-team for source code v0.8.3", delay: 200 }, { t: "blank", delay: 400 }, // ── REPO DETECTION ────────────────────────────────────── { t: "sec", text: "WORKSPACE", delay: 300 }, { t: "ok", text: "detected repo github.com/acme-labs/mlpipe", delay: 350 }, { t: "ok", text: "language profile python 3.11 · 84% · 41,208 LOC", delay: 300 }, { t: "ok", text: "entrypoints 12 detected (api/, jobs/, scripts/)", delay: 300 }, { t: "ok", text: "dep graph 312 packages · 41 direct", delay: 300 }, { t: "ok", text: "ci pipelines github actions · 4 workflows", delay: 300 }, { t: "blank", delay: 200 }, // ── PLAN ──────────────────────────────────────────────── { t: "sec", text: "ENGAGEMENT PLAN", delay: 350, color: "violet" }, { t: "plan", text: "01 recon & surface mapping", delay: 200, eta: "~2m" }, { t: "plan", text: "02 static + taint analysis", delay: 200, eta: "~6m" }, { t: "plan", text: "03 supply-chain & secret hunt", delay: 200, eta: "~3m" }, { t: "plan", text: "04 attack-chain reasoning", delay: 200, eta: "~4m" }, { t: "plan", text: "05 PoC generation & sandbox", delay: 200, eta: "~7m" }, { t: "plan", text: "06 report & remediation", delay: 200, eta: "~1m" }, { t: "blank", delay: 200 }, { t: "sec", text: "SAFETY", delay: 300 }, { t: "dim", text: "network sandboxed (gVisor) · egress denied · destructive ops denied", delay: 300 }, { t: "blank", delay: 300 }, // ── CONFIRM ───────────────────────────────────────────── { t: "ask", text: "proceed with autonomous red-team? [y]es [n]o [e]dit", delay: 400 }, { t: "prompt", text: "y", delay: 900, dim: true }, { t: "blank", delay: 200 }, // ── PHASE 1 RECON ─────────────────────────────────────── { t: "phase", text: "01 · RECON", delay: 400 }, { t: "prog", text: "ast build", delay: 250, pct: 100, sub: "41,208 nodes" }, { t: "prog", text: "call graph", delay: 350, pct: 100, sub: "84,103 edges" }, { t: "prog", text: "taint map", delay: 400, pct: 100, sub: "18 sources · 47 sinks" }, { t: "blank", delay: 200 }, // ── PHASE 2 DISCOVERY ─────────────────────────────────── { t: "phase", text: "02 · DISCOVERY", delay: 350 }, { t: "find", ts: "01:08", sev: "CRIT", code: "BS-001", title: "Unsafe pickle deserialization", path: "api/models/loader.py:42", delay: 600 }, { t: "find", ts: "01:23", sev: "HIGH", code: "BS-014", title: "Hardcoded AWS credentials", path: "jobs/etl/sync_s3.py:11", delay: 500 }, { t: "find", ts: "01:40", sev: "MED", code: "BS-031", title: "SQL string concatenation", path: "api/db/query.py:88", delay: 500 }, { t: "find", ts: "02:02", sev: "HIGH", code: "BS-022", title: "Server-side request forgery", path: "api/webhooks/handler.py:54", delay: 500 }, { t: "find", ts: "02:18", sev: "CRIT", code: "BS-007", title: "yaml.load with full Loader", path: "config/loader.py:19", delay: 500 }, { t: "find", ts: "02:34", sev: "LOW", code: "BS-082", title: "Weak hash (md5) in cache", path: "utils/cache.py:7", delay: 450 }, { t: "find", ts: "02:51", sev: "HIGH", code: "BS-018", title: "Path traversal on artifact", path: "api/artifacts/serve.py:30", delay: 500 }, { t: "find", ts: "03:12", sev: "CRIT", code: "BS-003", title: "Code injection via eval()", path: "ml/registry/register.py:64", delay: 500 }, { t: "blank", delay: 200 }, // ── PHASE 3 SUPPLY CHAIN ──────────────────────────────── { t: "phase", text: "03 · SUPPLY CHAIN", delay: 400 }, { t: "dim", text: "resolved 312 transitive dependencies", delay: 350 }, { t: "find", ts: "04:01", sev: "HIGH", code: "BS-026", title: "Pinned-vulnerable: tensorflow 2.8.0 (CVE-2023-44982)", path: "requirements.txt:14", delay: 450 }, { t: "find", ts: "04:09", sev: "MED", code: "BS-029", title: "Typosquat candidate: numpyy 1.0.0", path: "requirements.txt:23", delay: 400 }, { t: "blank", delay: 200 }, // ── PHASE 4 ATTACK CHAIN ──────────────────────────────── { t: "phase", text: "04 · ATTACK-CHAIN REASONING", delay: 400 }, { t: "dim", text: "reasoning over 17 findings · evaluating 84 chain candidates", delay: 400 }, { t: "dim", text: "↳ pruning by feasibility · pruning by preconditions · scoring …", delay: 700 }, { t: "blank", delay: 200 }, { t: "chain", text: "CHAIN 01 untrusted YAML → SSRF → eval(model_def)", cvss: "9.4", color: "crit", delay: 700 }, { t: "chain", text: "CHAIN 02 hardcoded AWS key → S3 model swap → poisoned inference", cvss: "7.8", color: "high", delay: 500 }, { t: "chain", text: "CHAIN 03 path traversal → /etc/secrets exfil via artifact serve", cvss: "6.4", color: "high", delay: 500 }, { t: "blank", delay: 200 }, // ── PHASE 5 POC SANDBOX ───────────────────────────────── { t: "phase", text: "05 · POC · SANDBOX EXECUTION", delay: 400 }, { t: "dim", text: "generating PoC for chain 01 → poc_eval_via_yaml.py", delay: 500 }, { t: "code", delay: 600, lines: [ "import requests, yaml", "TARGET = \"http://mlpipe.internal:8080\"", "payload = yaml.dump({", " \"model_def\": \"__import__('os').system('id > /tmp/owned')\",", " \"name\": \"benign-classifier-v2\",", "})", "r = requests.post(f\"{TARGET}/api/webhooks/handler\",", " json={\"callback\": \"http://localhost:9001/registry/register\",", " \"body\": payload})", ]}, { t: "blank", delay: 200 }, { t: "dim", text: "spinning ephemeral sandbox · gVisor · no egress · fs read-only", delay: 500 }, { t: "dim", text: "booted in 1.84s · target snapshot @ 8a3f04c", delay: 500 }, { t: "ok", text: "[+] payload accepted — eval scheduled", delay: 500 }, { t: "ok", text: "[+] worker picked up job j-9f3a-001", delay: 400 }, { t: "ok", text: "[+] reading /tmp/owned …", delay: 500 }, { t: "blank", delay: 200 }, { t: "rce", delay: 700 }, { t: "blank", delay: 300 }, { t: "sec", text: "BLAST RADIUS", delay: 350 }, { t: "blast", k: "code execution", v: "root in training worker", delay: 200 }, { t: "blast", k: "lateral", v: "kube SA token reachable", delay: 200 }, { t: "blast", k: "data", v: "2.3 TB training set readable", delay: 200 }, { t: "blast", k: "persistence", v: "model weights writable", delay: 200 }, { t: "blank", delay: 300 }, // ── PHASE 6 REPORT ────────────────────────────────────── { t: "phase", text: "06 · REPORT", delay: 400 }, { t: "dim", text: "rendering report.md · signing evidence package · attaching replay .pcap", delay: 600 }, { t: "ok", text: "→ report.md (17 findings · 3 chains)", delay: 400 }, { t: "ok", text: "→ report.html (white-labeled · Mandrake Security)", delay: 400 }, { t: "ok", text: "→ evidence.tgz (signed · 84 MB)", delay: 400 }, { t: "blank", delay: 300 }, // ── SUMMARY ───────────────────────────────────────────── { t: "big", delay: 800 }, { t: "blank", delay: 200 }, { t: "dim", text: "engagement complete in 23m 41s · agent idle", delay: 400 }, { t: "prompt", text: "_", delay: 600, cursor: true }, ]; const COLOR = { crit: "var(--bs-crit-500)", high: "var(--bs-high-500)", med: "var(--bs-med-500)", low: "var(--bs-low-500)", violet: "var(--bs-violet-400)", cyan: "var(--bs-cyan-500)", ok: "var(--bs-ok-500)", }; // ────────────────────────────────────────────────────────────────── // Renderers per line type // ────────────────────────────────────────────────────────────────── function LineRow({ step }) { const base = { fontFamily: "var(--bs-font-mono)", fontSize: 13.5, lineHeight: 1.6, color: "var(--bs-fog-100)" }; if (step.t === "blank") return
; if (step.t === "prompt") { return (
›{" "} bluesci{" "} {step.text} {step.cursor && }
); } if (step.t === "dim") return
{step.text}
; if (step.t === "ok") return (
✓{" "} {step.text}
); if (step.t === "banner") return ( 
{step.text}
); if (step.t === "sec") return (
── {step.text} ──
); if (step.t === "phase") return (
{step.text}
); if (step.t === "plan") return (
{step.text.slice(0, 2)} {step.text.slice(2)} {step.eta}
); if (step.t === "ask") return (
› {step.text}
); if (step.t === "prog") { return (
{step.text} {step.pct}% {step.sub}
); } if (step.t === "find") { const sevColor = COLOR[step.sev.toLowerCase()] || "var(--bs-fog-100)"; const sevBg = `rgba(${step.sev === "CRIT" ? "255,61,92" : step.sev === "HIGH" ? "255,138,61" : step.sev === "MED" ? "242,201,76" : "94,190,250"}, 0.10)`; return (
[{step.ts}] {step.sev} {step.code}{" "} {step.title} {step.path}
); } if (step.t === "chain") { const color = COLOR[step.color]; return (
{step.text.slice(0, 8)} {step.text.slice(8)} CVSS {step.cvss}
); } if (step.t === "code") return (
{step.lines.map((ln, i) => (
{i + 1} {ln}
))}
); if (step.t === "rce") return (
RCE CONFIRMED
uid=0(root) gid=0(root) groups=0(root)
hostname: mlpipe-worker-0
); if (step.t === "blast") return (
{step.k} {step.v}
); if (step.t === "big") return (
ENGAGEMENT COMPLETE · acme-labs / mlpipe
17 findings · 3 chains · 1 sandbox-verified RCE
); return null; } function BigKV({ k, v, color, sub }) { return (
{k}
{v}
{sub &&
{sub}
}
); } // ────────────────────────────────────────────────────────────────── // Demo controller // ────────────────────────────────────────────────────────────────── function Demo() { const [index, setIndex] = useState(0); const [playing, setPlaying] = useState(true); const [speed, setSpeed] = useState(1); const scrollerRef = useRef(null); const timerRef = useRef(null); // Advance timer useEffect(() => { if (!playing) return; if (index >= TIMELINE.length) return; const step = TIMELINE[index]; timerRef.current = setTimeout(() => { setIndex(i => i + 1); }, Math.max(80, (step.delay || 200) / speed)); return () => clearTimeout(timerRef.current); }, [playing, index, speed]); // Autoscroll useEffect(() => { const el = scrollerRef.current; if (el) el.scrollTop = el.scrollHeight; }, [index]); const restart = () => { setIndex(0); setPlaying(true); }; const visible = TIMELINE.slice(0, index); const pct = Math.min(100, (index / TIMELINE.length) * 100); const elapsed = useMemo(() => { const ms = TIMELINE.slice(0, index).reduce((a, s) => a + (s.delay || 0), 0); const total = Math.floor(ms / 1000); const m = String(Math.floor(total / 60)).padStart(2, "0"); const s = String(total % 60).padStart(2, "0"); return `${m}:${s}`; }, [index]); return (
{/* Header */}
BlueSci / Live demo · CLI engagement
● {playing ? "running" : "paused"} step {index} / {TIMELINE.length} elapsed {elapsed}
{/* Progress strip */}
{/* Terminal body */}
{/* Window chrome */}
~/projects/mlpipe — bluesci
{/* Scroller */}
{/* faint scanlines */}
{visible.map((step, i) => )}
{/* Controls */}
speed {[0.5, 1, 2, 4].map(s => ( ))}
{/* Scrubber */}
{ setIndex(parseInt(e.target.value, 10)); setPlaying(false); }} style={{ flex: 1, accentColor: "var(--bs-cyan-500)" }} /> {Math.round(pct)}%
); } function ctrlBtnStyle(primary) { return { padding: "7px 14px", borderRadius: "var(--bs-r-2)", fontFamily: "var(--bs-font-sans)", fontSize: 12.5, fontWeight: 500, border: primary ? "1px solid var(--bs-cyan-500)" : "1px solid var(--bs-border-2)", background: primary ? "var(--bs-cyan-500)" : "transparent", color: primary ? "var(--bs-ink-1000)" : "var(--bs-fog-100)", cursor: "pointer", boxShadow: primary ? "0 0 16px rgba(20,217,201,0.3)" : "none", }; } ReactDOM.createRoot(document.getElementById("root")).render();