File size: 2,200 Bytes
fed1528 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | import { Activity, Sparkles } from "lucide-react";
import { usePresenceStore } from "@/store/presenceStore";
/** Slim vanity chrome — dense telemetry lives in Cortex + Backend Studio. */
export function AppHeader() {
const stage = usePresenceStore((s) => s.stage);
const controlMs = usePresenceStore((s) => s.controlMs);
const phaseLabel = usePresenceStore((s) => s.phaseLabel);
const controlLive = controlMs < 1000;
return (
<header
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 16,
padding: "0 16px",
borderBottom: "1px solid var(--panel-border)",
background:
"linear-gradient(180deg, rgba(6,8,12,0.98), rgba(2,3,4,0.96))",
backdropFilter: "blur(10px)",
}}
>
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
<div
style={{
width: 34,
height: 34,
borderRadius: 10,
display: "grid",
placeItems: "center",
background:
"radial-gradient(circle at 30% 30%, rgba(61,180,255,0.28), transparent 55%), linear-gradient(135deg, #0b1a2e, #05080f)",
border: "1px solid rgba(61,180,255,0.45)",
boxShadow: "0 0 22px rgba(61,180,255,0.18)",
}}
>
<Sparkles size={16} color="var(--spark)" />
</div>
<div>
<div style={{ fontWeight: 700, letterSpacing: "0.03em", fontSize: 14 }}>
The Cerebral Project
</div>
<div className="muted" style={{ fontSize: 11 }}>
Cognitive research · LLM presence systems
</div>
</div>
</div>
<div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
<span className="badge spark" title="Cognitive research surface">
Research
</span>
<span className={`badge${controlLive ? " live" : " warn"}`}>
<span className="dot" />
{stage}
</span>
<span className="badge">
<Activity size={12} />
{phaseLabel}
</span>
</div>
</header>
);
}
|