front31

frontend/src/App.jsx

@@ -4,6 +4,26 @@ const API_BASE = window.location.protocol === 'file:'
     ? 'http://localhost:8000'
     : window.location.origin
 
+// ─── Global CSS ───────────────────────────────────────────────────────────────
+const globalCSS = `
+@import url('https://fonts.bunny.net/css?family=clash-display:400,500,600,700');
+* { cursor: none !important; box-sizing: border-box; }
+body { background: #080808; margin: 0; }
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: #080808; }
+::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 2px; }
+::-webkit-scrollbar-thumb:hover { background: #b8ff57; }
+.clash-display { font-family: 'Clash Display', sans-serif; }
+@keyframes probe-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
+@keyframes badge-spin { to { transform: rotate(360deg) } }
+@keyframes shine-sweep { from{background-position:200% 0} to{background-position:-200% 0} }
+@keyframes slide-up { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
+@keyframes rocm-pulse { 0%,100%{opacity:1} 50%{opacity:0.2} }
+@keyframes nav-dot-pulse { 0%,100%{opacity:1;box-shadow:0 0 6px #ff4d00} 50%{opacity:0.5;box-shadow:0 0 2px #ff4d00} }
+@keyframes seg-glow { 0%,100%{box-shadow:4px 0 10px rgba(255,77,0,0.6)} 50%{box-shadow:4px 0 18px rgba(255,77,0,0.9)} }
+.benchmark-footer { animation: slide-up 300ms ease forwards; }
+`
+
 // ─── Template Kernels ─────────────────────────────────────────────────────────
 
 const KERNEL_VECTOR_ADD = String.raw`
@@ -522,65 +542,683 @@ const AGENT_LABEL = {
     coordinator: 'COORDINATOR',
 }
 
-// Tailwind class strings per status — all literals so JIT can scan them
 const STATUS = {
     idle: {
-        dot: 'bg-[#1E2D40]',
-        badge: 'bg-[#1E2D40] text-[#6B7A99]',
+        dot: '#1a1a1a',
         label: 'IDLE',
+        borderLeft: '2px solid #1a1a1a',
+        cardShadow: 'none',
+        badgeColor: null,
     },
     running: {
-        dot: 'bg-[#FFB800] animate-rocm-pulse',
-        badge: 'bg-[#1A1500] text-[#FFB800]',
+        dot: '#ff4d00',
         label: 'RUNNING',
+        borderLeft: '2px solid #ff4d00',
+        cardShadow: '-4px 0 12px rgba(255,77,0,0.15)',
+        badgeColor: 'orange',
     },
     done: {
-        dot: 'bg-[#00FF88]',
-        badge: 'bg-[#001A0D] text-[#00FF88]',
+        dot: '#b8ff57',
         label: 'DONE',
+        borderLeft: '2px solid #b8ff57',
+        cardShadow: 'none',
+        badgeColor: 'green',
     },
     failed: {
-        dot: 'bg-[#FF3B3B]',
-        badge: 'bg-[#1A0000] text-[#FF3B3B]',
+        dot: '#ff3366',
         label: 'FAILED',
+        borderLeft: '2px solid #ff3366',
+        cardShadow: 'none',
+        badgeColor: 'coral',
     },
 }
 
 const INITIAL_AGENTS = Object.fromEntries(
-    AGENT_LIST.map(a => [a, { status: 'idle', message: 'Waiting…', detail: '' }])
+    AGENT_LIST.map(a => [a, { status: 'idle', message: 'Waiting\u2026', detail: '' }])
 )
 
+// ─── Component 1: ROCmCursor ──────────────────────────────────────────────────
+
+const BRACKET_STYLES = `
+[data-bracket-state="default"] .bkt-corner { border-color: rgba(184,255,87,0.7); }
+[data-bracket-state="default"] .bkt-tl { top:0; left:0; }
+[data-bracket-state="default"] .bkt-tr { top:0; right:0; }
+[data-bracket-state="default"] .bkt-bl { bottom:0; left:0; }
+[data-bracket-state="default"] .bkt-br { bottom:0; right:0; }
+
+[data-bracket-state="button"] .bkt-corner { border-color: rgba(255,77,0,1); }
+[data-bracket-state="button"] .bkt-tl { top:6px; left:6px; }
+[data-bracket-state="button"] .bkt-tr { top:6px; right:6px; }
+[data-bracket-state="button"] .bkt-bl { bottom:6px; left:6px; }
+[data-bracket-state="button"] .bkt-br { bottom:6px; right:6px; }
+
+[data-bracket-state="input"] .bkt-corner { border-color: rgba(179,232,255,0.7); }
+[data-bracket-state="input"] .bkt-tl { top:0; left:0; }
+[data-bracket-state="input"] .bkt-tr { top:0; right:0; }
+[data-bracket-state="input"] .bkt-bl { bottom:0; left:0; }
+[data-bracket-state="input"] .bkt-br { bottom:0; right:0; }
+
+[data-bracket-state="running"] .bkt-corner { border-color: rgba(255,77,0,0.9); }
+[data-bracket-state="running"] .bkt-tl { top:0; left:0; }
+[data-bracket-state="running"] .bkt-tr { top:0; right:0; }
+[data-bracket-state="running"] .bkt-bl { bottom:0; left:0; }
+[data-bracket-state="running"] .bkt-br { bottom:0; right:0; }
+
+.bkt-corner {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  transition: top 180ms ease, left 180ms ease, right 180ms ease, bottom 180ms ease, border-color 150ms ease;
+}
+.bkt-tl { border-top: 1.5px solid; border-left: 1.5px solid; border-bottom: 1.5px solid transparent; border-right: 1.5px solid transparent; }
+.bkt-tr { border-top: 1.5px solid; border-right: 1.5px solid; border-bottom: 1.5px solid transparent; border-left: 1.5px solid transparent; }
+.bkt-bl { border-bottom: 1.5px solid; border-left: 1.5px solid; border-top: 1.5px solid transparent; border-right: 1.5px solid transparent; }
+.bkt-br { border-bottom: 1.5px solid; border-right: 1.5px solid; border-top: 1.5px solid transparent; border-left: 1.5px solid transparent; }
+`
+
+function ROCmCursor({ running }) {
+    const dotRef = useRef(null)
+    const boxRef = useRef(null)
+    const mouseRef = useRef({ x: -200, y: -200 })
+    const lerpRef = useRef({ x: -200, y: -200 })
+    const rafRef = useRef(null)
+    const targetTypeRef = useRef('default')
+    const runningRef = useRef(running)
+
+    useEffect(() => { runningRef.current = running }, [running])
+
+    useEffect(() => {
+        const onMove = (e) => {
+            mouseRef.current = { x: e.clientX, y: e.clientY }
+            if (dotRef.current) {
+                dotRef.current.style.left = (e.clientX - 4) + 'px'
+                dotRef.current.style.top = (e.clientY - 9) + 'px'
+            }
+        }
+
+        const onOver = (e) => {
+            const el = e.target
+            if (el.closest('button, [role=button]')) {
+                targetTypeRef.current = 'button'
+            } else if (el.closest('textarea, input')) {
+                targetTypeRef.current = 'input'
+            } else {
+                targetTypeRef.current = 'default'
+            }
+        }
+
+        window.addEventListener('mousemove', onMove)
+        window.addEventListener('mouseover', onOver)
+
+        const loop = () => {
+            const lx = lerpRef.current.x + (mouseRef.current.x - lerpRef.current.x) * 0.10
+            const ly = lerpRef.current.y + (mouseRef.current.y - lerpRef.current.y) * 0.10
+            lerpRef.current = { x: lx, y: ly }
+
+            if (boxRef.current) {
+                boxRef.current.style.left = (lx - 18) + 'px'
+                boxRef.current.style.top = (ly - 18) + 'px'
+                const state = runningRef.current ? 'running' : targetTypeRef.current
+                boxRef.current.setAttribute('data-bracket-state', state)
+            }
+
+            rafRef.current = requestAnimationFrame(loop)
+        }
+        rafRef.current = requestAnimationFrame(loop)
+
+        return () => {
+            window.removeEventListener('mousemove', onMove)
+            window.removeEventListener('mouseover', onOver)
+            cancelAnimationFrame(rafRef.current)
+        }
+    }, [running])
+
+    const blinkDuration = running ? '0.5s' : '1s'
+    const dotColor = running ? '#ff4d00' : '#b8ff57'
+
+    return (
+        <>
+            <style dangerouslySetInnerHTML={{ __html: BRACKET_STYLES }} />
+            <span
+                ref={dotRef}
+                style={{
+                    position: 'fixed',
+                    zIndex: 9999,
+                    pointerEvents: 'none',
+                    fontFamily: '"JetBrains Mono", monospace',
+                    fontSize: '12px',
+                    color: dotColor,
+                    lineHeight: 1,
+                    userSelect: 'none',
+                    animation: `probe-blink ${blinkDuration} step-end infinite`,
+                }}
+            >
+                &#9611;
+            </span>
+            <div
+                ref={boxRef}
+                data-bracket-state="default"
+                style={{
+                    position: 'fixed',
+                    width: '36px',
+                    height: '36px',
+                    zIndex: 9998,
+                    pointerEvents: 'none',
+                }}
+            >
+                <div className="bkt-corner bkt-tl" />
+                <div className="bkt-corner bkt-tr" />
+                <div className="bkt-corner bkt-bl" />
+                <div className="bkt-corner bkt-br" />
+            </div>
+        </>
+    )
+}
+
+// ─── Component 2: AetherFlowHero ─────────────────────────────────────────────
+
+function AetherFlowHero({ running, mousePos }) {
+    const canvasRef = useRef(null)
+    const particlesRef = useRef([])
+    const rafRef = useRef(null)
+    const runningRef = useRef(running)
+
+    useEffect(() => {
+        runningRef.current = running
+    }, [running])
+
+    useEffect(() => {
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const ctx = canvas.getContext('2d')
+
+        const COLORS = [
+            '#b8ff57', '#b8ff57', '#b8ff57', '#b8ff57',
+            '#ff4d00', '#ff4d00',
+            '#b3e8ff', '#b3e8ff',
+            '#ff3366',
+            '#ffd60a',
+        ]
+
+        const resize = () => {
+            canvas.width = window.innerWidth
+            canvas.height = window.innerHeight
+        }
+        resize()
+
+        const initParticles = () => {
+            particlesRef.current = Array.from({ length: 80 }, () => ({
+                x: Math.random() * canvas.width,
+                y: Math.random() * canvas.height,
+                vx: (Math.random() - 0.5) * 0.6,
+                vy: (Math.random() - 0.5) * 0.6,
+                radius: 1 + Math.random(),
+                opacity: 0.3 + Math.random() * 0.5,
+                color: COLORS[Math.floor(Math.random() * COLORS.length)],
+            }))
+        }
+        initParticles()
+
+        let debounceTimer = null
+        const onResize = () => {
+            clearTimeout(debounceTimer)
+            debounceTimer = setTimeout(() => { resize(); initParticles() }, 100)
+        }
+        window.addEventListener('resize', onResize)
+
+        const draw = () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            const ps = particlesRef.current
+            const isRunning = runningRef.current
+            const mx = mousePos && mousePos.current ? mousePos.current.x : -999
+            const my = mousePos && mousePos.current ? mousePos.current.y : -999
+            const speedMult = isRunning ? 2.5 : 1
+            const opacityBonus = isRunning ? 0.2 : 0
+            const connMult = isRunning ? 3 : 1
+
+            for (const p of ps) {
+                const pdx = p.x - mx
+                const pdy = p.y - my
+                const dist = Math.sqrt(pdx * pdx + pdy * pdy)
+                if (dist < 100 && dist > 0) {
+                    const force = Math.min(1.5, 80 / dist)
+                    p.vx += (pdx / dist) * force * 0.04
+                    p.vy += (pdy / dist) * force * 0.04
+                }
+
+                const maxSpeed = 0.3 * speedMult
+                const spd = Math.sqrt(p.vx * p.vx + p.vy * p.vy)
+                if (spd > maxSpeed) {
+                    p.vx = (p.vx / spd) * maxSpeed
+                    p.vy = (p.vy / spd) * maxSpeed
+                }
+
+                p.x += p.vx * speedMult
+                p.y += p.vy * speedMult
+
+                if (p.x < 0) p.x += canvas.width
+                if (p.x > canvas.width) p.x -= canvas.width
+                if (p.y < 0) p.y += canvas.height
+                if (p.y > canvas.height) p.y -= canvas.height
+
+                const op = Math.min(1, p.opacity + opacityBonus)
+                const hexOp = Math.round(op * 255).toString(16).padStart(2, '0')
+                ctx.beginPath()
+                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2)
+                ctx.fillStyle = p.color + hexOp
+                ctx.fill()
+            }
+
+            for (let i = 0; i < ps.length; i++) {
+                for (let j = i + 1; j < ps.length; j++) {
+                    const cdx = ps[i].x - ps[j].x
+                    const cdy = ps[i].y - ps[j].y
+                    const d = Math.sqrt(cdx * cdx + cdy * cdy)
+                    if (d < 120) {
+                        const alpha = (1 - d / 120) * 0.15 * connMult
+                        ctx.beginPath()
+                        ctx.moveTo(ps[i].x, ps[i].y)
+                        ctx.lineTo(ps[j].x, ps[j].y)
+                        ctx.strokeStyle = `rgba(184,255,87,${Math.min(1, alpha)})`
+                        ctx.lineWidth = 0.5
+                        ctx.stroke()
+                    }
+                }
+            }
+
+            rafRef.current = requestAnimationFrame(draw)
+        }
+        rafRef.current = requestAnimationFrame(draw)
+
+        return () => {
+            cancelAnimationFrame(rafRef.current)
+            window.removeEventListener('resize', onResize)
+            clearTimeout(debounceTimer)
+        }
+    }, [])
+
+    return (
+        <canvas
+            ref={canvasRef}
+            style={{
+                position: 'fixed',
+                inset: 0,
+                zIndex: -1,
+                pointerEvents: 'none',
+                width: '100vw',
+                height: '100vh',
+            }}
+        />
+    )
+}
+
+// ─── Component 3: AnimatedShinyText ──────────────────────────────────────────
+
+function AnimatedShinyText({ children, className }) {
+    return (
+        <span style={{ position: 'relative', display: 'inline-block' }} className={className}>
+            {children}
+            <span
+                style={{
+                    position: 'absolute',
+                    inset: 0,
+                    background: 'linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%)',
+                    backgroundSize: '200% 100%',
+                    animation: 'shine-sweep 2.4s linear infinite',
+                    pointerEvents: 'none',
+                    borderRadius: 'inherit',
+                }}
+            />
+        </span>
+    )
+}
+
+// ─── Component 4: HeroBadge ───────────────────────────────────────────────────
+
+const BADGE_COLOR_MAP = {
+    green: '#b8ff57',
+    gold: '#ffd60a',
+    orange: '#ff4d00',
+    coral: '#ff3366',
+    blue: '#b3e8ff',
+}
+
+function HeroBadge({ children, color }) {
+    const c = BADGE_COLOR_MAP[color] || '#b8ff57'
+    return (
+        <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', padding: '1px', borderRadius: '3px', overflow: 'hidden', flexShrink: 0 }}>
+            <span style={{
+                position: 'absolute',
+                inset: '-50%',
+                width: '200%',
+                height: '200%',
+                background: `conic-gradient(from 0deg, transparent 0%, ${c} 20%, transparent 40%)`,
+                animation: 'badge-spin 3s linear infinite',
+                zIndex: 0,
+            }} />
+            <span style={{
+                position: 'relative',
+                zIndex: 1,
+                background: '#0f0f0f',
+                borderRadius: '2px',
+                padding: '2px 8px',
+                fontFamily: '"JetBrains Mono", monospace',
+                fontSize: '10px',
+                color: c,
+                whiteSpace: 'nowrap',
+            }}>
+                {children}
+            </span>
+        </span>
+    )
+}
+
+// ─── Component 5: ModernAnimatedHero ─────────────────────────────────────────
+
+const HERO_WORDS = ['cudaMalloc', 'hipMalloc', '__global__', 'wavefront64', 'gfx942', 'rocprof', 'HIP', 'ROCm', 'LDS', 'vsmem', 'tid', 'blockDim', 'threadIdx', '__syncthreads', '0xFF', '0x3F', '\u223f', '\u2295', '\u2593', '\u2591']
+const SCRAMBLE_POOL = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\u223f\u2295\u2593\u2591'
+const HERO_TARGET_STR = 'CUDA \u2192 ROCm / MI300X'
+
+function ModernAnimatedHero() {
+    const canvasRef = useRef(null)
+    const rafRef = useRef(null)
+    const [displayChars, setDisplayChars] = useState(
+        () => HERO_TARGET_STR.split('').map(c => ({ char: c, scrambling: false }))
+    )
+
+    useEffect(() => {
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const ctx = canvas.getContext('2d')
+
+        const setSize = () => {
+            canvas.width = canvas.offsetWidth || window.innerWidth
+            canvas.height = 56
+        }
+        setSize()
+
+        const NUM_COLS = 20
+        const cols = Array.from({ length: NUM_COLS }, (_, i) => ({
+            x: (canvas.width / NUM_COLS) * i + (canvas.width / NUM_COLS / 2),
+            y: Math.random() * 56,
+            speed: 0.4 + Math.random() * 0.8,
+            wordIdx: Math.floor(Math.random() * HERO_WORDS.length),
+        }))
+
+        const draw = () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            ctx.font = '9px "JetBrains Mono", monospace'
+            for (const col of cols) {
+                const word = HERO_WORDS[col.wordIdx % HERO_WORDS.length]
+                ctx.fillStyle = 'rgba(184,255,87,0.25)'
+                ctx.fillText(word[0], col.x, col.y)
+                col.y += col.speed
+                if (col.y > 70) {
+                    col.y = -10
+                    col.wordIdx = (col.wordIdx + 1) % HERO_WORDS.length
+                }
+            }
+            rafRef.current = requestAnimationFrame(draw)
+        }
+        rafRef.current = requestAnimationFrame(draw)
+        return () => cancelAnimationFrame(rafRef.current)
+    }, [])
+
+    const scrambleAll = () => {
+        const target = HERO_TARGET_STR.split('')
+        target.forEach((finalChar, i) => {
+            const delay = i * 30
+            const duration = 600
+            setTimeout(() => {
+                const start = Date.now()
+                const tick = setInterval(() => {
+                    const elapsed = Date.now() - start
+                    if (elapsed >= duration) {
+                        clearInterval(tick)
+                        setDisplayChars(prev => {
+                            const next = [...prev]
+                            next[i] = { char: finalChar, scrambling: false }
+                            return next
+                        })
+                    } else {
+                        setDisplayChars(prev => {
+                            const next = [...prev]
+                            next[i] = { char: SCRAMBLE_POOL[Math.floor(Math.random() * SCRAMBLE_POOL.length)], scrambling: true }
+                            return next
+                        })
+                    }
+                }, 40)
+            }, delay)
+        })
+    }
+
+    useEffect(() => {
+        scrambleAll()
+        const id = setInterval(scrambleAll, 8000)
+        return () => clearInterval(id)
+    }, [])
+
+    return (
+        <div style={{ position: 'relative', height: '56px', width: '100%', overflow: 'hidden', background: '#080808', borderBottom: '1px solid #1a1a1a', flexShrink: 0 }}>
+            <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '56px' }} />
+            <div style={{
+                position: 'absolute', inset: 0,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                pointerEvents: 'none',
+                fontFamily: '"JetBrains Mono", monospace',
+                fontSize: '13px',
+                fontWeight: 600,
+                letterSpacing: '2px',
+            }}>
+                {displayChars.map((c, i) => (
+                    <span key={i} style={{ color: c.scrambling ? '#555555' : '#b8ff57' }}>{c.char}</span>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+// ─── Component 6: HeroDitheringCard ──────────────────────────────────────────
+
+const BAYER_4X4 = [[0, 8, 2, 10], [12, 4, 14, 6], [3, 11, 1, 9], [15, 7, 13, 5]]
+
+function HeroDitheringCard({ children, style: extraStyle }) {
+    const canvasRef = useRef(null)
+    const drawnRef = useRef(false)
+
+    useEffect(() => {
+        const canvas = canvasRef.current
+        if (!canvas || drawnRef.current) return
+        const w = Math.max(canvas.offsetWidth, 200)
+        const h = Math.max(canvas.offsetHeight, 80)
+        canvas.width = w
+        canvas.height = h
+        drawnRef.current = true
+        const ctx = canvas.getContext('2d')
+        const img = ctx.createImageData(w, h)
+        for (let y = 0; y < h; y++) {
+            for (let x = 0; x < w; x++) {
+                const threshold = BAYER_4X4[y % 4][x % 4] / 16
+                const idx = (y * w + x) * 4
+                if (threshold > 0.5) {
+                    img.data[idx] = 184; img.data[idx + 1] = 255; img.data[idx + 2] = 87; img.data[idx + 3] = 255
+                } else {
+                    img.data[idx] = 8; img.data[idx + 1] = 8; img.data[idx + 2] = 8; img.data[idx + 3] = 255
+                }
+            }
+        }
+        ctx.putImageData(img, 0, 0)
+    }, [])
+
+    return (
+        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: '2px', ...extraStyle }}>
+            <canvas
+                ref={canvasRef}
+                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 0, opacity: 0.06, pointerEvents: 'none' }}
+            />
+            <div style={{ position: 'relative', zIndex: 1 }}>
+                {children}
+            </div>
+        </div>
+    )
+}
+
+// ─── Component 7: WrapShader ──────────────────────────────────────────────────
+
+let _wrapId = 0
+
+function WrapShader({ children, active }) {
+    const idRef = useRef(null)
+    if (!idRef.current) idRef.current = `rocm-wrap-${++_wrapId}`
+    const dispMapRef = useRef(null)
+    const rafRef = useRef(null)
+    const startRef = useRef(null)
+    const activeRef = useRef(active)
+
+    useEffect(() => { activeRef.current = active }, [active])
+
+    useEffect(() => {
+        if (!active) {
+            cancelAnimationFrame(rafRef.current)
+            if (dispMapRef.current) dispMapRef.current.setAttribute('scale', '3')
+            return
+        }
+        startRef.current = performance.now()
+        const animate = (now) => {
+            if (!activeRef.current) {
+                if (dispMapRef.current) dispMapRef.current.setAttribute('scale', '3')
+                return
+            }
+            const t = ((now - startRef.current) % 2000) / 2000
+            const scale = 3 + Math.sin(t * Math.PI * 2) * 3
+            if (dispMapRef.current) dispMapRef.current.setAttribute('scale', String(scale.toFixed(2)))
+            rafRef.current = requestAnimationFrame(animate)
+        }
+        rafRef.current = requestAnimationFrame(animate)
+        return () => cancelAnimationFrame(rafRef.current)
+    }, [active])
+
+    const filterId = idRef.current
+
+    return (
+        <div style={{ position: 'relative', width: '42%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+            <svg style={{ position: 'absolute', width: 0, height: 0, overflow: 'visible' }} aria-hidden="true">
+                <defs>
+                    <filter id={filterId}>
+                        <feTurbulence type="fractalNoise" baseFrequency="0.015 0.015" numOctaves="2" seed="8" result="noise" />
+                        <feDisplacementMap ref={dispMapRef} in="SourceGraphic" in2="noise" scale="3" xChannelSelector="R" yChannelSelector="G" />
+                    </filter>
+                </defs>
+            </svg>
+            <div style={{ filter: `url(#${filterId})`, flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+                {children}
+            </div>
+        </div>
+    )
+}
+
+// ─── MagneticButton ───────────────────────────────────────────────────────────
+
+function MagneticButton({ children, onClick, disabled }) {
+    const btnRef = useRef(null)
+    const [transform, setTransform] = useState('translate(0px,0px)')
+    const [isHover, setIsHover] = useState(false)
+
+    const onMouseMove = (e) => {
+        if (disabled) return
+        const rect = btnRef.current.getBoundingClientRect()
+        const cx = rect.left + rect.width / 2
+        const cy = rect.top + rect.height / 2
+        const dx = Math.max(-10, Math.min(10, (e.clientX - cx) * 0.35))
+        const dy = Math.max(-10, Math.min(10, (e.clientY - cy) * 0.35))
+        setTransform(`translate(${dx}px,${dy}px)`)
+    }
+
+    const onMouseLeave = () => {
+        setTransform('translate(0px,0px)')
+        setIsHover(false)
+    }
+
+    const onMouseEnter = () => { if (!disabled) setIsHover(true) }
+
+    return (
+        <button
+            ref={btnRef}
+            onClick={onClick}
+            disabled={disabled}
+            onMouseMove={onMouseMove}
+            onMouseLeave={onMouseLeave}
+            onMouseEnter={onMouseEnter}
+            style={{
+                width: '100%',
+                height: '52px',
+                background: disabled ? '#1a1a1a' : (isHover ? '#ff3300' : '#ff4d00'),
+                color: disabled ? '#333333' : '#ffffff',
+                border: 'none',
+                borderRadius: '3px',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                transform: disabled ? 'translate(0px,0px)' : transform,
+                transition: isHover
+                    ? 'transform 100ms linear, box-shadow 150ms, background 150ms'
+                    : 'transform 400ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 150ms, background 150ms',
+                boxShadow: !disabled && isHover ? '0 0 32px rgba(255,77,0,0.45)' : 'none',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            {children}
+        </button>
+    )
+}
+
 // ─── AgentCard ────────────────────────────────────────────────────────────────
 
 function AgentCard({ name, state }) {
     const s = STATUS[state.status] ?? STATUS.idle
+    const isRunning = state.status === 'running'
+    const isDoneCoord = state.status === 'done' && name === 'coordinator'
+
     return (
-        <div className="rounded-lg border border-[#1E2D40] bg-[#111827] p-3">
-            <div className="flex items-center gap-3">
-                {/* Status dot */}
-                <span className={`shrink-0 w-2 h-2 rounded-full ${s.dot}`} />
-
-                {/* Agent info */}
-                <div className="flex-1 min-w-0">
-                    <div className="font-code text-[11px] text-[#6B7A99] tracking-widest uppercase">
+        <div style={{ background: 'transparent', padding: '12px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{
+                    flexShrink: 0,
+                    width: '8px',
+                    height: '8px',
+                    borderRadius: '50%',
+                    background: s.dot,
+                    display: 'inline-block',
+                    animation: isRunning ? 'rocm-pulse 1.1s ease-in-out infinite' : 'none',
+                }} />
+                <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: '10px', color: '#555555', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
                         {AGENT_LABEL[name]}
                     </div>
-                    <div className="font-ui text-[13px] text-[#F0F4FF] mt-0.5 truncate">
-                        {state.message || 'Waiting…'}
+                    <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: '13px', color: '#e8e8e8', marginTop: '2px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {isDoneCoord
+                            ? <AnimatedShinyText><span style={{ color: '#b8ff57' }}>{state.message || 'Waiting\u2026'}</span></AnimatedShinyText>
+                            : (state.message || 'Waiting\u2026')}
                     </div>
                 </div>
-
-                {/* Status badge */}
-                <span
-                    className={`shrink-0 font-code text-[10px] font-semibold px-2 py-0.5 rounded tracking-wider ${s.badge}`}
-                >
-                    {s.label}
-                </span>
+                {s.badgeColor && (
+                    <HeroBadge color={s.badgeColor}>{s.label}</HeroBadge>
+                )}
             </div>
-
-            {/* Detail (collapsible — shown only when present) */}
             {state.detail && (
-                <p className="mt-2 font-ui text-[11px] text-[#6B7A99] italic leading-relaxed line-clamp-3">
+                <p style={{
+                    marginTop: '8px',
+                    fontFamily: '"JetBrains Mono", monospace',
+                    fontSize: '11px',
+                    color: '#555555',
+                    fontStyle: 'italic',
+                    lineHeight: '1.5',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 3,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    margin: '8px 0 0 0',
+                }}>
                     {state.detail}
                 </p>
             )}
@@ -601,10 +1239,17 @@ export default function App() {
 
     const timerRef = useRef(null)
     const startRef = useRef(null)
+    const mousePos = useRef({ x: -999, y: -999 })
 
     const lineCount = code ? code.split('\n').length : 1
 
-    // ── Timer ────────────────────────────────────────────────────────────────────
+    useEffect(() => {
+        const onMove = (e) => { mousePos.current = { x: e.clientX, y: e.clientY } }
+        window.addEventListener('mousemove', onMove)
+        return () => window.removeEventListener('mousemove', onMove)
+    }, [])
+
+    // ── Timer ─────────────────────────────────────────────────────────────────
     const startTimer = () => {
         startRef.current = Date.now()
         timerRef.current = setInterval(
@@ -620,10 +1265,10 @@ export default function App() {
 
     useEffect(() => () => stopTimer(), [])
 
-    // ── Helpers ───────────────────────────────────────────────────────────────────
+    // ── Helpers ───────────────────────────────────────────────────────────────
     const resetAgents = () =>
         setAgents(Object.fromEntries(
-            AGENT_LIST.map(a => [a, { status: 'idle', message: 'Waiting…', detail: '' }])
+            AGENT_LIST.map(a => [a, { status: 'idle', message: 'Waiting\u2026', detail: '' }])
         ))
 
     const updateAgent = (agent, patch) =>
@@ -636,19 +1281,19 @@ export default function App() {
 
     const fmtElapsed = (ms) => `${(ms / 1000).toFixed(1)}s`
 
-    // ── Demo mode fallback ────────────────────────────────────────────────────────
+    // ── Demo mode fallback ────────────────────────────────────────────────────
     const runDemo = async () => {
         const steps = [
-            { agent: 'analyzer', status: 'running', message: 'Scanning CUDA patterns…', detail: '' },
+            { agent: 'analyzer', status: 'running', message: 'Scanning CUDA patterns\u2026', detail: '' },
             { agent: 'analyzer', status: 'done', message: 'Found 3 critical AMD issues', detail: 'warp-32 assumption in reduction tail, threadIdx%32 idiom, LDS bank conflict pattern' },
-            { agent: 'translator', status: 'running', message: 'Running hipify + LLM pass…', detail: '' },
+            { agent: 'translator', status: 'running', message: 'Running hipify + LLM pass\u2026', detail: '' },
             { agent: 'translator', status: 'done', message: 'Translation complete', detail: 'hipify applied; 7 additional LLM corrections for wavefront-64 semantics' },
-            { agent: 'optimizer', status: 'running', message: 'Proposing optimizations…', detail: '' },
+            { agent: 'optimizer', status: 'running', message: 'Proposing optimizations\u2026', detail: '' },
             { agent: 'optimizer', status: 'done', message: '4 optimization patches generated', detail: 'LDS padding, wavefront-aware reduction, coalesced access pattern' },
-            { agent: 'tester', status: 'running', message: 'Compiling with hipcc…', detail: '' },
-            { agent: 'tester', status: 'done', message: 'Compiled and profiled on gfx942', detail: 'rocprof: 0.026 ms — correctness verified' },
-            { agent: 'coordinator', status: 'running', message: 'Assembling final report…', detail: '' },
-            { agent: 'coordinator', status: 'done', message: 'Migration complete — 2.61× speedup', detail: 'data_source: demo_artifact' },
+            { agent: 'tester', status: 'running', message: 'Compiling with hipcc\u2026', detail: '' },
+            { agent: 'tester', status: 'done', message: 'Compiled and profiled on gfx942', detail: 'rocprof: 0.026 ms \u2014 correctness verified' },
+            { agent: 'coordinator', status: 'running', message: 'Assembling final report\u2026', detail: '' },
+            { agent: 'coordinator', status: 'done', message: 'Migration complete \u2014 2.61\u00d7 speedup', detail: 'data_source: demo_artifact' },
         ]
 
         for (const step of steps) {
@@ -666,7 +1311,7 @@ export default function App() {
         setRunning(false)
     }
 
-    // ── Main action ───────────────────────────────��───────────────────────────────
+    // ── Main action ───────────────────────────────────────────────────────────
     const handlePort = async () => {
         if (running || !code.trim()) return
 
@@ -699,7 +1344,7 @@ export default function App() {
 
                 buf += dec.decode(value, { stream: true })
                 const lines = buf.split('\n')
-                buf = lines.pop() // keep any incomplete trailing line
+                buf = lines.pop()
 
                 for (const line of lines) {
                     if (!line.startsWith('data: ')) continue
@@ -716,20 +1361,15 @@ export default function App() {
                             detail: ev.detail ?? '',
                         })
 
-                        // Extract benchmark data from the coordinator's done event
                         if (ev.agent === 'coordinator' && ev.status === 'done') {
                             let report = ev.result ?? null
                             if (!report && ev.detail) {
-                                try {
-                                    report = JSON.parse(ev.detail)
-                                } catch (_) {
-                                    report = null
-                                }
+                                try { report = JSON.parse(ev.detail) } catch (_) { report = null }
                             }
                             const r = report ?? ev
                             setBenchmark({
-                                total_changes: r.total_changes ?? r.changes_made ?? '—',
-                                bugs_found: r.bugs_found ?? r.critical_bugs ?? r.static_risk_report?.critical_count ?? '—',
+                                total_changes: r.total_changes ?? r.changes_made ?? '\u2014',
+                                bugs_found: r.bugs_found ?? r.critical_bugs ?? r.static_risk_report?.critical_count ?? '\u2014',
                                 compiled_successfully: r.compiled_successfully ?? r.compiled ?? r.migration_success ?? false,
                                 data_source: r.data_source ?? 'unknown',
                             })
@@ -738,147 +1378,307 @@ export default function App() {
                 }
             }
         } catch {
-            setErrorBanner('Backend unavailable — running in demo mode')
+            setErrorBanner('Backend unavailable \u2014 running in demo mode')
             runDemo()
-            return // runDemo handles stopTimer + setRunning(false)
+            return
         }
 
         stopTimer()
         setRunning(false)
     }
 
-    // ── Render ────────────────────────────────────────────────────────────────────
-    return (
-        <div
-            className="min-h-screen flex flex-col text-[#F0F4FF] font-ui"
-            style={{ background: 'linear-gradient(180deg, #0A0E1A 0%, #0D1220 100%)' }}
-        >
-            {/* ── Error banner ──────────────────────────────────────────────────────── */}
-            {errorBanner && (
-                <div className="flex-none px-6 py-2.5 border-b border-[#FF3B3B] bg-[#1A0000] font-code text-[13px] text-[#FF3B3B]">
-                    ⚠ {errorBanner}
-                </div>
-            )}
-
-            {/* ── Two-column main layout ────────────────────────────────────────────── */}
-            <div className="flex flex-1 overflow-hidden">
+    // ── Segment data ──────────────────────────────────────────────────────────
+    const segLabels = ['ANA', 'TRA', 'OPT', 'TES', 'CORD']
+    const segAgents = ['analyzer', 'translator', 'optimizer', 'tester', 'coordinator']
 
-                {/* ──── LEFT PANEL  58% ─────────────────────────────────────────────── */}
-                <div className="w-[58%] flex flex-col p-5 gap-4 border-r border-[#1E2D40] overflow-y-auto">
+    const cardStyle = (status) => ({
+        borderLeft: STATUS[status]?.borderLeft || '2px solid #1a1a1a',
+        boxShadow: STATUS[status]?.cardShadow || 'none',
+        background: '#0f0f0f',
+    })
 
-                    {/* Editor header */}
-                    <div className="flex justify-between items-center">
-                        <span className="font-code text-[12px] text-[#6B7A99]">// CUDA source</span>
-                        <span className="font-code text-[12px] text-[#6B7A99]">{lineCount} lines</span>
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (
+        <>
+            <style dangerouslySetInnerHTML={{ __html: globalCSS }} />
+
+            <ROCmCursor running={running} />
+            <AetherFlowHero running={running} mousePos={mousePos} />
+
+            <div style={{
+                minHeight: '100vh',
+                display: 'flex',
+                flexDirection: 'column',
+                background: 'rgba(8,8,8,0.82)',
+                color: '#f0f0f0',
+                fontFamily: '"JetBrains Mono", monospace',
+            }}>
+
+                {/* ── Error banner ─────────────────────────────────────────────── */}
+                {errorBanner && (
+                    <div style={{
+                        flexShrink: 0,
+                        padding: '8px 24px',
+                        background: '#0c0000',
+                        borderBottom: '1px solid #ff3366',
+                        color: '#ff3366',
+                        fontFamily: '"JetBrains Mono", monospace',
+                        fontSize: '12px',
+                    }}>
+                        \u26a0 {errorBanner}
                     </div>
-
-                    {/* Code editor */}
-                    <textarea
-                        value={code}
-                        onChange={e => { setCode(e.target.value); setActiveTemplate(null) }}
-                        placeholder={'// Paste CUDA code here\n// or pick a demo below'}
-                        spellCheck={false}
-                        className={[
-                            'w-full min-h-[300px] resize-y rounded-lg p-4',
-                            'border border-[#1E2D40] bg-[#0D1525]',
-                            'text-[#F0F4FF] font-code text-[13px] leading-[1.6]',
-                            'focus:outline-none focus:border-[#00D4FF] transition-colors duration-150',
-                            '[tab-size:4] [caret-color:#00D4FF]',
-                        ].join(' ')}
-                    />
-
-                    {/* Template selector */}
-                    <div>
-                        <p className="font-ui text-[12px] text-[#6B7A99] mb-2.5">Select a template:</p>
-                        <div className="flex flex-wrap gap-2">
-                            {Object.keys(TEMPLATES).map(name => (
-                                <button
-                                    key={name}
-                                    onClick={() => selectTemplate(name)}
-                                    className={[
-                                        'px-4 py-1.5 rounded-full border font-ui text-[13px]',
-                                        'cursor-pointer transition-colors duration-150',
-                                        activeTemplate === name
-                                            ? 'bg-[#001A24] border-[#00D4FF] text-[#00D4FF]'
-                                            : 'bg-[#111827] border-[#1E2D40] text-[#F0F4FF] hover:border-[#00D4FF]',
-                                    ].join(' ')}
-                                >
-                                    {name}
-                                </button>
-                            ))}
-                        </div>
+                )}
+
+                {/* ── NAVBAR ───────────────────────────────────────────────────── */}
+                <nav style={{
+                    flexShrink: 0,
+                    height: '40px',
+                    background: '#080808',
+                    borderBottom: '1px solid #1a1a1a',
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 50,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '0 20px',
+                }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                        <span className="clash-display" style={{ fontSize: '16px', fontWeight: 700, letterSpacing: '-0.02em', display: 'inline-flex', alignItems: 'center' }}>
+                            <AnimatedShinyText>
+                                <span style={{ color: '#f0f0f0' }}>ROCmPort</span>
+                            </AnimatedShinyText>
+                            <span style={{ color: '#b8ff57' }}>AI</span>
+                        </span>
+                        <HeroBadge color="gold">AMD MI300X</HeroBadge>
                     </div>
-
-                    {/* PORT TO ROCM button */}
-                    <button
-                        onClick={handlePort}
-                        disabled={running || !code.trim()}
-                        className={[
-                            'w-full h-12 rounded-lg font-code text-[14px] text-white font-semibold',
-                            '[letter-spacing:2px] transition-all duration-150',
-                            running || !code.trim()
-                                ? 'bg-[#FF3B3B] opacity-50 cursor-not-allowed'
-                                : 'bg-[#FF3B3B] hover:bg-[#FF1A1A] hover:shadow-[0_0_20px_rgba(255,59,59,0.35)] cursor-pointer',
-                        ].join(' ')}
-                    >
-                        {running ? 'RUNNING...' : 'PORT TO ROCM'}
-                    </button>
-                </div>
-
-                {/* ──── RIGHT PANEL  42% ────────────────────────────────────────────── */}
-                <div className="w-[42%] flex flex-col p-5 gap-4 overflow-y-auto">
-
-                    {/* Pipeline header */}
-                    <div className="flex justify-between items-center">
-                        <span className="font-code text-[12px] text-[#6B7A99]">// Pipeline</span>
-                        <span className={`font-code text-[12px] transition-colors duration-300 ${running ? 'text-[#FFB800]' : 'text-[#6B7A99]'}`}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <span style={{
+                            fontFamily: '"JetBrains Mono", monospace',
+                            fontSize: '13px',
+                            color: running ? '#b8ff57' : '#333333',
+                            transition: 'color 0.3s',
+                        }}>
                             {fmtElapsed(elapsed)}
                         </span>
+                        <span style={{
+                            width: '7px',
+                            height: '7px',
+                            borderRadius: '50%',
+                            background: running ? '#ff4d00' : (benchmark ? '#b8ff57' : '#2a2a2a'),
+                            animation: running ? 'nav-dot-pulse 1s ease-in-out infinite' : 'none',
+                            display: 'inline-block',
+                            flexShrink: 0,
+                        }} />
                     </div>
+                </nav>
+
+                {/* ── HERO STRIP ───────────────────────────────────────────────── */}
+                <ModernAnimatedHero />
+
+                {/* ── TWO-COLUMN MAIN ──────────────────────────────────────────── */}
+                <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+
+                    {/* ── LEFT PANEL 58% ─────────────────────────────────────────── */}
+                    <div style={{
+                        width: '58%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        padding: '20px',
+                        gap: '16px',
+                        borderRight: '1px solid #1a1a1a',
+                        overflowY: 'auto',
+                    }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: '11px', color: '#555555' }}>// CUDA source</span>
+                            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: '11px', color: '#555555' }}>{lineCount} lines</span>
+                        </div>
 
-                    {/* Agent cards */}
-                    <div className="flex flex-col gap-2">
-                        {AGENT_LIST.map(agent => (
-                            <AgentCard key={agent} name={agent} state={agents[agent]} />
-                        ))}
+                        <textarea
+                            value={code}
+                            onChange={e => { setCode(e.target.value); setActiveTemplate(null) }}
+                            placeholder={'// Paste CUDA code here\n// or pick a demo below'}
+                            spellCheck={false}
+                            style={{
+                                width: '100%',
+                                minHeight: '340px',
+                                resize: 'vertical',
+                                background: '#0c0c0c',
+                                border: '1px solid #1a1a1a',
+                                borderRadius: '4px',
+                                padding: '16px',
+                                color: '#e8e8e8',
+                                fontFamily: '"JetBrains Mono", monospace',
+                                fontSize: '13px',
+                                lineHeight: '1.65',
+                                caretColor: '#b8ff57',
+                                tabSize: 4,
+                                outline: 'none',
+                                transition: 'border-color 0.15s, box-shadow 0.15s',
+                            }}
+                            onFocus={e => {
+                                e.target.style.borderColor = '#b8ff57'
+                                e.target.style.boxShadow = '0 0 0 2px rgba(184,255,87,0.08)'
+                            }}
+                            onBlur={e => {
+                                e.target.style.borderColor = '#1a1a1a'
+                                e.target.style.boxShadow = 'none'
+                            }}
+                        />
+
+                        <div>
+                            <p style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: '11px', color: '#555555', marginBottom: '10px', marginTop: 0 }}>
+                                Select a template:
+                            </p>
+                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+                                {Object.keys(TEMPLATES).map(name => (
+                                    <button
+                                        key={name}
+                                        onClick={() => selectTemplate(name)}
+                                        style={{
+                                            border: activeTemplate === name ? '1px solid #b8ff57' : '1px solid #1a1a1a',
+                                            background: activeTemplate === name ? 'rgba(184,255,87,0.06)' : '#0f0f0f',
+                                            color: activeTemplate === name ? '#b8ff57' : '#888888',
+                                            fontFamily: '"JetBrains Mono", monospace',
+                                            fontSize: '12px',
+                                            borderRadius: '4px',
+                                            padding: '4px 12px',
+                                            cursor: 'pointer',
+                                            transition: 'border-color 0.15s, color 0.15s',
+                                        }}
+                                        onMouseEnter={e => {
+                                            if (activeTemplate !== name) {
+                                                e.currentTarget.style.borderColor = 'rgba(184,255,87,0.4)'
+                                                e.currentTarget.style.color = 'rgba(184,255,87,0.6)'
+                                            }
+                                        }}
+                                        onMouseLeave={e => {
+                                            if (activeTemplate !== name) {
+                                                e.currentTarget.style.borderColor = '#1a1a1a'
+                                                e.currentTarget.style.color = '#888888'
+                                            }
+                                        }}
+                                    >
+                                        {name}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
+                        <MagneticButton onClick={handlePort} disabled={running || !code.trim()}>
+                            <AnimatedShinyText>
+                                <span style={{
+                                    fontFamily: '"JetBrains Mono", monospace',
+                                    fontSize: '14px',
+                                    letterSpacing: '3px',
+                                    textTransform: 'uppercase',
+                                    fontWeight: 600,
+                                }}>
+                                    {running ? 'RUNNING\u2026' : 'PORT TO ROCM'}
+                                </span>
+                            </AnimatedShinyText>
+                        </MagneticButton>
                     </div>
-                </div>
-            </div>
 
-            {/* ── Benchmark footer (hidden until run completes) ─────────────────────── */}
-            {benchmark && (
-                <div className="flex-none flex flex-wrap gap-6 px-6 py-4 border-t border-[#1E2D40] bg-[#0D1525]">
-                    {[
-                        { label: 'CHANGES MADE', value: benchmark.total_changes },
-                        { label: 'BUGS FOUND', value: benchmark.bugs_found },
-                        {
-                            label: 'COMPILE STATUS',
-                            value: benchmark.compiled_successfully ? 'SUCCESS' : 'FAILED',
-                            color: benchmark.compiled_successfully ? '#00FF88' : '#FF3B3B',
-                        },
-                        { label: 'DATA SOURCE', value: benchmark.data_source, isSource: true },
-                    ].map(({ label, value, color, isSource }) => (
-                        <div key={label} className="flex flex-col gap-1 min-w-[120px]">
-                            <span className="font-ui text-[10px] text-[#6B7A99] uppercase tracking-widest">
-                                {label}
-                            </span>
-                            <div className="flex items-center gap-2">
-                                <span
-                                    className="font-code text-[18px] font-semibold"
-                                    style={{ color: color ?? '#00D4FF' }}
-                                >
-                                    {String(value ?? '—')}
+                    {/* ── RIGHT PANEL 42% (WrapShader owns the width) ─────────── */}
+                    <WrapShader active={running}>
+                        <div style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            padding: '20px',
+                            gap: '16px',
+                            overflowY: 'auto',
+                            height: '100%',
+                            isolation: 'isolate',
+                        }}>
+                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: '11px', color: '#555555' }}>// Pipeline</span>
+                                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: '12px', color: running ? '#b8ff57' : '#333333', transition: 'color 0.3s' }}>
+                                    {fmtElapsed(elapsed)}
                                 </span>
-                                {isSource && value === 'real_rocm' && (
-                                    <span className="font-code text-[10px] text-[#00D4FF] border border-[#00D4FF] bg-[#001A24] px-2 py-0.5 rounded">
-                                        LIVE HARDWARE
-                                    </span>
-                                )}
+                            </div>
+
+                            {/* Pipeline bar */}
+                            <div>
+                                <div style={{ display: 'flex', gap: '2px', height: '6px', marginBottom: '6px' }}>
+                                    {segAgents.map((agent) => {
+                                        const st = agents[agent].status
+                                        const isRun = st === 'running'
+                                        const isDone = st === 'done'
+                                        return (
+                                            <div key={agent} style={{
+                                                flex: 1,
+                                                borderRadius: '2px',
+                                                background: isDone ? '#b8ff57' : isRun ? '#ff4d00' : '#1a1a1a',
+                                                boxShadow: isRun ? '4px 0 12px rgba(255,77,0,0.6)' : 'none',
+                                                transition: 'background 0.3s',
+                                            }} />
+                                        )
+                                    })}
+                                </div>
+                                <div style={{ display: 'flex', gap: '2px' }}>
+                                    {segLabels.map(lbl => (
+                                        <div key={lbl} style={{ flex: 1, fontFamily: '"JetBrains Mono", monospace', fontSize: '9px', color: '#555555', textAlign: 'center' }}>
+                                            {lbl}
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+
+                            {/* Agent cards */}
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                                {AGENT_LIST.map(agent => (
+                                    <HeroDitheringCard key={agent} style={cardStyle(agents[agent].status)}>
+                                        <AgentCard name={agent} state={agents[agent]} />
+                                    </HeroDitheringCard>
+                                ))}
                             </div>
                         </div>
-                    ))}
+                    </WrapShader>
+
                 </div>
-            )}
-        </div>
+
+                {/* ── BENCHMARK FOOTER ─────────────────────────────────────────── */}
+                {benchmark && (
+                    <div className="benchmark-footer" style={{
+                        flexShrink: 0,
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: '24px',
+                        padding: '16px 24px',
+                        background: '#0c0c0c',
+                        borderTop: '1px solid #1a1a1a',
+                    }}>
+                        {[
+                            { label: 'CHANGES MADE', value: benchmark.total_changes, color: '#ffd60a' },
+                            { label: 'BUGS FOUND', value: benchmark.bugs_found, color: '#ff3366' },
+                            {
+                                label: 'COMPILE STATUS',
+                                value: benchmark.compiled_successfully ? 'SUCCESS' : 'FAILED',
+                                color: benchmark.compiled_successfully ? '#b8ff57' : '#ff3366',
+                            },
+                            { label: 'DATA SOURCE', value: benchmark.data_source, color: '#b3e8ff', isSource: true },
+                        ].map(({ label, value, color, isSource }) => (
+                            <div key={label} style={{ display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '120px' }}>
+                                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: '10px', color: '#555555', textTransform: 'uppercase', letterSpacing: '0.15em' }}>
+                                    {label}
+                                </span>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                    <AnimatedShinyText>
+                                        <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: '24px', fontWeight: 600, color, lineHeight: 1.1 }}>
+                                            {String(value ?? '\u2014')}
+                                        </span>
+                                    </AnimatedShinyText>
+                                    {isSource && value === 'real_rocm' && (
+                                        <HeroBadge color="green">LIVE HARDWARE</HeroBadge>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+            </div>
+        </>
     )
 }

frontend/tailwind.config.js

@@ -6,6 +6,7 @@ export default {
             fontFamily: {
                 code: ['"JetBrains Mono"', 'monospace'],
                 ui: ['Inter', 'sans-serif'],
+                display: ['"Clash Display"', 'sans-serif'],
             },
             keyframes: {
                 'rocm-pulse': {