Function bodies 615 total

export default function Page() {
  return <PreviewFrame src="/preview/operator-profile.html" title="About | Operator Profile" />;
}

export default function Page() {
  return <PreviewFrame src="/ai-context.html" title="AI Context" />;
}

function StatCard({ label, value, sub, color = C.amber }) {
  return (
    <div style={{
      background: C.card, border: `1px solid ${color}20`,
      borderRadius: 8, padding: '18px 20px', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: color, opacity: 0.5 }} />
      <div style={{ fontFamily: font.mono, fontSize: 9, color, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>{label}</div>
      <div style={{ fontFamily: font.mono, fontSize: 28, fontWeight: 700, color: C.cream, lineHeight: 1 }}>{value}</div>
      {sub && <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, marginTop: 6 }}>{sub}</div>}
    </div>
  );
}

function CommitBar({ commit, maxFiles }) {
  const date = new Date(commit.commit.author.date);
  const msg = commit.commit.message.split('\n')[0];
  const files = commit.files || 0;
  const width = maxFiles > 0 ? Math.max(4, (files / maxFiles) * 100) : 4;

  return (
    <div style={{
      padding: '10px 14px', marginBottom: 4,
      background: C.cardDeep, border: `1px solid ${C.border}`,
      borderRadius: 6, display: 'flex', gap: 12, alignItems: 'center',
    }}>
      <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, width: 72, flexShrink: 0 }}>
        {date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: font.mono, fontSize: 11, color: C.creamMid, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{msg}</div>
        <div style={{ marginTop: 5, height: 3, borderRadius: 2, background: C.border }}>
          <div style={{ width: `${wi

function WeekGrid({ weeklyData }) {
  if (!weeklyData.length) return null;
  const max = Math.max(...weeklyData.map(w => w.count), 1);
  return (
    <div style={{ display: 'flex', gap: 3, alignItems: 'flex-end', height: 60 }}>
      {weeklyData.map((w, i) => {
        const h = Math.max(3, (w.count / max) * 56);
        return (
          <div key={i} title={`${w.label}: ${w.count} commits`} style={{
            flex: 1, height: h, borderRadius: '2px 2px 0 0',
            background: w.count > 0 ? C.amber : C.border,
            opacity: w.count > 0 ? 0.6 + (w.count / max) * 0.4 : 1,
            transition: 'height 0.3s ease',
            cursor: 'default',
          }} />
        );
      })}
    </div>
  );
}

function DeployRow({ deploy }) {
  const date = new Date(deploy.createdAt);
  const duration = deploy.buildingAt && deploy.ready
    ? Math.round((deploy.ready - deploy.buildingAt) / 1000)
    : null;
  const stateColor = deploy.state === 'READY' ? C.green : deploy.state === 'ERROR' ? C.crimson : C.amber;
  const stateLabel = deploy.state === 'READY' ? 'PASS' : deploy.state === 'ERROR' ? 'FAIL' : deploy.state;

  return (
    <div style={{
      padding: '10px 14px', marginBottom: 4,
      background: C.cardDeep, border: `1px solid ${C.border}`,
      borderRadius: 6, display: 'flex', gap: 12, alignItems: 'center',
    }}>
      <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, width: 72, flexShrink: 0 }}>
        {date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: font.mono, fontSize: 11, color: C.creamMid, whiteSpace: 'nowrap', overflow: 'hidden', textOve

export default function BuildLog() {
  const [ghData, setGhData] = useState(null);
  const [commits, setCommits] = useState([]);
  const [weeklyData, setWeeklyData] = useState([]);
  const [deploys, setDeploys] = useState([]);
  const [loading, setLoading] = useState({ gh: true, vercel: false });
  const [error, setError] = useState({ gh: null, vercel: null });
  const [mounted, setMounted] = useState(false);
  const [activeTab, setActiveTab] = useState('overview');

  useEffect(() => {
    setMounted(true);
  }, []);

  // Fetch GitHub data via server-side API route
  useEffect(() => {
    async function fetchGH() {
      try {
        setLoading(l => ({ ...l, gh: true }));

        const res = await fetch('/api/github');
        const { repo, commits: commitsData, error } = await res.json();

        if (error) throw new Error(error);

        setGhData(repo);
        setCommits(commitsData);

        // Build weekly grid — last 16 weeks
        const now = new Date();
        const 

    async function fetchGH() {
      try {
        setLoading(l => ({ ...l, gh: true }));

        const res = await fetch('/api/github');
        const { repo, commits: commitsData, error } = await res.json();

        if (error) throw new Error(error);

        setGhData(repo);
        setCommits(commitsData);

        // Build weekly grid — last 16 weeks
        const now = new Date();
        const weeks = [];
        for (let i = 15; i >= 0; i--) {
          const start = new Date(now);
          start.setDate(start.getDate() - (i + 1) * 7);
          const end = new Date(now);
          end.setDate(end.getDate() - i * 7);
          const count = commitsData.filter(c => {
            const d = new Date(c.commit.author.date);
            return d >= start && d < end;
          }).length;
          weeks.push({
            label: start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
            count,
          });
        }
        setWeeklyData(weeks);
        set

    async function fetchVercel() {
      try {
        setLoading(l => ({ ...l, vercel: true }));
        const res = await fetch('/api/vercel');
        const data = await res.json();
        if (data.error) throw new Error(data.error);
        setDeploys(data.deployments || []);
        setLoading(l => ({ ...l, vercel: false }));
        setError(err => ({ ...err, vercel: null }));
      } catch (e) {
        setError(err => ({ ...err, vercel: e.message }));
        setLoading(l => ({ ...l, vercel: false }));
      }
    }

function Tag({ label, color = C.blue }) {
  return (<span style={{ fontFamily: font.mono, fontSize: 9, padding: "3px 8px", borderRadius: 3, background: color + "18", color, letterSpacing: "0.04em", whiteSpace: "nowrap" }}>{label}</span>);
}

function ShowCard({ name, color, subtitle, recursionType, density, replayValue, techniques, examples, measurement }) {
  const [open, setOpen] = useState(false);

  const densityBars = { LOW: 1, MEDIUM: 2, HIGH: 3, EXTREME: 4 };
  const replayBars = { LOW: 1, MEDIUM: 2, HIGH: 3, ESSENTIAL: 4 };

  return (
    <div style={{
      background: C.card, border: `1px solid ${color}25`, borderRadius: 8,
      marginBottom: 10, position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: color, opacity: 0.4 }} />

      {/* Header — always visible */}
      <div
        onClick={() => setOpen(!open)}
        style={{ padding: "16px 20px", cursor: "pointer", userSelect: "none" }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 8, marginBottom: 8 }}>
          <div>
            <div style={{ fontFamily: font.display, fontSize: 18, font

export default function CallbackEngine() {
  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream, fontFamily: font.body }}>
      <div style={{ position: "fixed", inset: 0, opacity: 0.025, pointerEvents: "none", zIndex: 0, backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`, backgroundSize: "200px" }} />

      <div style={{ position: "relative", zIndex: 1, maxWidth: 820, margin: "0 auto", padding: "48px 24px 64px" }}>
        <div style={{ fontFamily: font.mono, fontSize: 9, color: C.amber, letterSpacing: "0.25em", textTransform: "uppercase", marginBottom: 32 }}>
          DDL · CONSOLE · The Callback Engine
        </div>

        <h1 style={{ fontFamily: font.body, fontSize: 36, fontWeight: 400, font

function Tag({ label, color = C.blue }) {
  return (
    <span style={{
      fontFamily: font.mono, fontSize: 9, padding: "3px 8px", borderRadius: 3,
      background: color + "18", color, letterSpacing: "0.04em", whiteSpace: "nowrap",
    }}>{label}</span>
  );
}

function KPI({ label, value, sub, color = C.cream }) {
  return (
    <div style={{
      flex: "1 1 150px", minWidth: 135, background: C.card,
      border: `1px solid ${C.border}`, borderRadius: 6,
      padding: "16px 14px 12px", position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: color, opacity: 0.5 }} />
      <div style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 6 }}>{label}</div>
      <div style={{ fontFamily: font.mono, fontSize: 22, fontWeight: 700, color, lineHeight: 1 }}>{value}</div>
      {sub && <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

function MappingRow({ sonic, measurement, instrument, score, mechanism, accentColor }) {
  return (
    <div style={{
      display: "flex", gap: 0, marginBottom: 2, minHeight: 72,
    }}>
      {/* Sonic trait (left) */}
      <div style={{
        flex: "1 1 40%", padding: "12px 14px",
        background: C.card, border: `1px solid ${C.border}`,
        borderRadius: "6px 0 0 6px", borderRight: "none",
      }}>
        <div style={{ fontFamily: font.display, fontSize: 13, fontWeight: 600, color: C.cream, marginBottom: 4 }}>{sonic}</div>
      </div>

      {/* Bridge arrow */}
      <div style={{
        width: 36, display: "flex", alignItems: "center", justifyContent: "center",
        background: accentColor + "12", borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}`,
      }}>
        <span style={{ fontFamily: font.mono, fontSize: 14, color: accentColor }}>→</span>
      </div>

      {/* Measurement (right) */}
      <div style={{
        flex: "1 1 60%", 

function WaveformViz({ type, color }) {
  // Melodic bass: build → peak → resolve pattern
  // Math rock: complex, irregular, interlocking
  const melodicBass = [12, 18, 25, 32, 40, 50, 62, 75, 88, 95, 100, 85, 60, 40, 30, 22, 16, 14, 15, 20, 28, 38, 50, 65, 80, 92, 100, 78, 50, 32, 20, 15];
  const mathRock = [45, 72, 30, 85, 55, 90, 28, 68, 95, 35, 78, 42, 88, 50, 70, 25, 82, 60, 38, 92, 48, 75, 32, 86, 55, 40, 95, 62, 30, 80, 45, 70];

  const data = type === "melodic" ? melodicBass : mathRock;

  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 1, height: 40 }}>
      {data.map((v, i) => (
        <div key={i} style={{
          flex: 1, height: `${v}%`, background: color,
          borderRadius: "2px 2px 0 0", opacity: 0.4 + (v / 200),
          transition: "height 0.3s",
        }} />
      ))}
    </div>
  );
}

function ArtistProfile({ name, genre, minutes, hours, songs, topSong, color, waveType, traits }) {
  return (
    <div style={{
      background: C.card, border: `1px solid ${color}30`,
      borderRadius: 8, padding: "20px", marginBottom: 16,
      position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: color, opacity: 0.6 }} />

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16, flexWrap: "wrap", gap: 12 }}>
        <div>
          <div style={{ fontFamily: font.display, fontSize: 24, fontWeight: 700, color: C.cream }}>{name}</div>
          <div style={{ fontFamily: font.mono, fontSize: 11, color, marginTop: 2 }}>{genre}</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontFamily: font.mono, fontSize: 28, fontWeight: 700, color, lineHeight: 1 }}>{hours}h</div>
          <div style={{ fontFamily: 

export default function CatnipMap() {
  const [focus, setFocus] = useState("both");

  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream, fontFamily: font.body }}>
      {/* Noise */}
      <div style={{
        position: "fixed", inset: 0, opacity: 0.03, pointerEvents: "none", zIndex: 0,
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
        backgroundSize: "200px",
      }} />

      <div style={{ position: "relative", zIndex: 1, maxWidth: 820, margin: "0 auto", padding: "48px 24px 64px" }}>
        {/* Template tag */}
        <div style={{ fontFamily: font.mono, fontSize: 9, color: C.amber, letterSpacing: "0.25em", textTransform: "uppercase", marginBottom: 32 }}>
          DDL · CONS

function Overview({onDrillDown}: {onDrillDown: (c: string) => void}) {
  return <div style={{display:"flex",flexDirection:"column",gap:24}}>
    <Panel title="Message Volume by Relationship" sub="Top 10 contacts — click any bar to deep dive">
      <div style={{display:"flex",flexDirection:"column",gap:10}}>
        {STATS.map(s=>{const pct=s.t/STATS[0].t*100; return <div key={s.c} style={{display:"flex",alignItems:"center",gap:12,cursor:"pointer"}} onClick={()=>onDrillDown(s.c)}>
          <div style={{width:85,flexShrink:0}}>
            <div style={{fontSize:13,fontWeight:600,color:CLR[s.c]}}>{s.c}</div>
            <div style={{fontSize:10,color:"#5a6a8a"}}>{s.sub}</div>
          </div>
          <div style={{flex:1,height:28,background:"#0d1117",borderRadius:6,overflow:"hidden"}}>
            <div style={{height:"100%",width:`${pct}%`,background:`linear-gradient(90deg,${CLR[s.c]}66,${CLR[s.c]})`,borderRadius:6,display:"flex",alignItems:"center",justifyContent:"flex-end",paddingRi

function Timeline() {
  const [metric,setMetric] = useState("msgs");
  const data = useMemo(()=>ML.map((label,i)=>{
    const row: Record<string, any> = {month:label};
    C.forEach(c=>{const d=MD[c][i];row[c]=metric==="msgs"?d[0]:d[1];});
    return row;
  }),[metric]);

  return <div style={{display:"flex",flexDirection:"column",gap:24}}>
    <div style={{display:"flex",gap:8}}>
      <TabBtn active={metric==="msgs"} onClick={()=>setMetric("msgs")}>Messages</TabBtn>
      <TabBtn active={metric==="words"} onClick={()=>setMetric("words")}>Words</TabBtn>
    </div>
    <Panel title={`Monthly ${metric==="msgs"?"Message":"Word"} Volume`} sub="All 10 relationships stacked over 27 months">
      <ResponsiveContainer width="100%" height={380}>
        <AreaChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="#2a2a4a"/>
          <XAxis dataKey="month" stroke="#5a6a8a" fontSize={10} interval={2}/>
          <YAxis stroke="#5a6a8a" fontSize={11} tickFormatter={fmt}/>
    

function DeepDive({selected,setSelected}: {selected: string|null; setSelected: (c: string) => void}) {
  const sel = STATS.find(s=>s.c===selected);
  const monthly = selected ? MD[selected] : null;
  const heatData = useMemo(()=>{
    if(!selected) return null;
    const h=HOURLY[selected]; const mx=Math.max(...h);
    return h.map((v,i)=>({hour:HRS[i],count:v,pct:mx>0?v/mx:0}));
  },[selected]);
  const dowData = useMemo(()=>{
    if(!selected) return null;
    return DAYS.map((d,i)=>({day:d,count:DOWDATA[selected][i]}));
  },[selected]);

  return <div style={{display:"flex",flexDirection:"column",gap:24}}>
    <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
      {C.map(c=><button key={c} onClick={()=>setSelected(c)} style={{
        background:selected===c?CLR[c]:"transparent",color:selected===c?"#fff":"#8892b0",
        border:`1px solid ${selected===c?CLR[c]:"#2a2a4a"}`,borderRadius:8,padding:"6px 14px",
        fontSize:12,fontWeight:600,cursor:"pointer",transition:"all 0.2

function Patterns() {
  return <div style={{display:"flex",flexDirection:"column",gap:24}}>
    <Panel title="Who Initiates?" sub="Sent/Received ratio per contact">
      <div style={{display:"flex",justifyContent:"center",gap:16,flexWrap:"wrap",marginBottom:16}}>
        {[...STATS].sort((a,b)=>(b.s/b.r)-(a.s/a.r)).map(s=>{const ratio=s.s/s.r; return <div key={s.c} style={{textAlign:"center",minWidth:70}}>
          <div style={{fontSize:22,fontWeight:800,fontFamily:"'JetBrains Mono',monospace",color:ratio>1?CLR[s.c]:"#5a6a8a"}}>{ratio.toFixed(2)}</div>
          <div style={{fontSize:10,color:CLR[s.c],fontWeight:600}}>{s.c}</div>
          <div style={{fontSize:9,color:"#3a4a6a"}}>{ratio>1?"Dave >":"Them >"}</div>
        </div>;})}
      </div>
    </Panel>
    <Panel title="Activity Heatmap — All Contacts by Hour" sub="Brightness = message density">
      <div style={{overflowX:"auto"}}>
        <div style={{display:"grid",gridTemplateColumns:"75px repeat(24,1fr)",gap:2,minWidth:55

export default function DexDashPage() {
  const [tab,setTab] = useState("overview");
  const [selected,setSelected] = useState<string|null>(null);
  const drillDown = (contact: string) => { setSelected(contact); setTab("contact"); };

  return <div style={{fontFamily:"'Inter',-apple-system,sans-serif",background:"linear-gradient(180deg,#0d1117 0%,#161b22 50%,#0d1117 100%)",color:"#e6edf3",minHeight:"100vh",padding:"100px 24px 32px"}}>
    <style>{`@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700;800&display=swap');`}</style>
    <div style={{maxWidth:1100,margin:"0 auto"}}>
      <div style={{marginBottom:32,display:"flex",alignItems:"flex-end",justifyContent:"space-between",flexWrap:"wrap",gap:16}}>
        <div>
          <div style={{fontSize:11,textTransform:"uppercase",letterSpacing:3,color:"#14b8a6",fontWeight:700,marginBottom:8}}>Communication Analytics</div>
          <h1 style={{fontSize:36,fontWeight:800,m

function KPI({ label, value, sub, color = C.cream }) {
  return (
    <div style={{
      flex: "1 1 155px", minWidth: 140, background: C.card,
      border: `1px solid ${C.border}`, borderRadius: 6,
      padding: "16px 14px 12px", position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: color, opacity: 0.5 }} />
      <div style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 6 }}>{label}</div>
      <div style={{ fontFamily: font.mono, fontSize: 24, fontWeight: 700, color, lineHeight: 1 }}>{value}</div>
      {sub && <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

function Tag({ label, color = C.blue }) {
  return (
    <span style={{
      fontFamily: font.mono, fontSize: 9, padding: "3px 8px", borderRadius: 3,
      background: color + "18", color, letterSpacing: "0.04em", whiteSpace: "nowrap",
    }}>{label}</span>
  );
}

function SectionLabel({ number, title, color = C.amber }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20, marginTop: 48 }}>
      <div style={{
        width: 28, height: 28, borderRadius: 5, background: color + "20",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: font.mono, fontSize: 12, fontWeight: 700, color,
      }}>{number}</div>
      <span style={{ fontFamily: font.mono, fontSize: 11, letterSpacing: "0.15em", color: C.creamMid, textTransform: "uppercase" }}>{title}</span>
      <div style={{ flex: 1, height: 1, background: C.border }} />
    </div>
  );
}

function CrossoverChart() {
  const points = [
    { year: "2001", age: 15, label: "PSAT Soph", verbal: 63, quant: 81, instrument: "PSAT/NMSQT" },
    { year: "2002", age: 16, label: "PSAT Jr", verbal: 83, quant: 92, instrument: "PSAT/NMSQT" },
    { year: "2005", age: 18, label: "Strong", verbal: null, quant: null, interest: true, instrument: "Strong Interest Inventory", note: "Math Interest: 51 (Avg) · Writing: 31 (VL)" },
    { year: "2008", age: 21, label: "GMAT", verbal: 75, quant: 44, instrument: "GMAT" },
  ];

  const chartW = 680;
  const chartH = 200;
  const padL = 50;
  const padR = 30;
  const padT = 20;
  const padB = 40;
  const innerW = chartW - padL - padR;
  const innerH = chartH - padT - padB;

  const scored = points.filter(p => p.verbal !== null);
  const xPositions = { "2001": 0, "2002": 0.15, "2005": 0.55, "2008": 1 };

  const toX = (year) => padL + xPositions[year] * innerW;
  const toY = (pct) => padT + innerH - (pct / 100) * innerH;

  const vLine = scored.ma

function RIASECHex() {
  const themes = [
    { code: "R", label: "Realistic", score: 44, norm: 0.44, color: C.creamDim },
    { code: "I", label: "Investigative", score: 40, norm: 0.40, color: C.creamDim },
    { code: "A", label: "Artistic", score: 31, norm: 0.31, color: C.rose },
    { code: "S", label: "Social", score: 45, norm: 0.45, color: C.blue },
    { code: "E", label: "Enterprising", score: 40, norm: 0.40, color: C.green },
    { code: "C", label: "Conventional", score: 75, norm: 0.75, color: C.amber },
  ];

  const cx = 150, cy = 130, maxR = 100;
  const angleOffset = -Math.PI / 2;

  const getXY = (i, r) => {
    const angle = angleOffset + (2 * Math.PI * i) / 6;
    return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) };
  };

  const outerPoly = themes.map((_, i) => { const p = getXY(i, maxR); return `${p.x},${p.y}`; }).join(" ");
  const midPoly = themes.map((_, i) => { const p = getXY(i, maxR * 0.5); return `${p.x},${p.y}`; }).join(" ");
  const dataPoly 

function EFRadar() {
  const domains = [
    { label: "Activation", t: 70, pct: 95, desc: "Organizing, prioritizing, activating" },
    { label: "Focus", t: 74, pct: 98, desc: "Sustaining, shifting attention" },
    { label: "Effort", t: 68, pct: 93, desc: "Alertness, processing speed" },
    { label: "Emotion", t: 60, pct: 82, desc: "Frustration, modulating" },
    { label: "Memory", t: 70, pct: 95, desc: "Working memory, recall" },
    { label: "Action", t: 66, pct: 91, desc: "Self-regulation" },
  ];

  const getColor = (t) => t >= 70 ? C.crimson : t >= 60 ? C.amber : C.green;
  const getClass = (t) => t >= 70 ? "MARKEDLY ATYPICAL" : t >= 60 ? "MODERATELY ATYPICAL" : "TYPICAL";

  return (
    <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 8, padding: "20px 16px 16px" }}>
      <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 4 }}>
        Executive Function Prof

function ProcessingSplit() {
  const metrics = [
    { label: "Response Control", aud: 82, vis: 107 },
    { label: "Attention", aud: 91, vis: 110 },
    { label: "Sustained Attention", aud: 99, vis: 111 },
  ];

  const vineland = [
    { label: "Receptive (listening)", score: 16, color: C.creamMid },
    { label: "Expressive (speaking)", score: 12, color: C.crimson },
    { label: "Written (reading/writing)", score: 16, color: C.creamMid },
  ];

  return (
    <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 8, padding: "20px 16px 16px" }}>
      <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 16 }}>
        Processing Channel — Auditory vs Visual
      </div>

      {/* IVA bars */}
      <div style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, marginBottom: 8 }}>IVA Continuous Performance Test · Age 37</div>
      {metrics.map(m => (
        <div key

function SensoryQuadrant() {
  const quads = [
    { label: "Low Registration", score: 29, max: 75, cls: "Similar to Most", color: C.creamMid },
    { label: "Sensation Seeking", score: 37, max: 75, cls: "Less Than Most", color: C.amber },
    { label: "Sensory Sensitivity", score: 38, max: 75, cls: "Similar to Most", color: C.creamMid },
    { label: "Sensation Avoiding", score: 50, max: 75, cls: "MUCH MORE Than Most", color: C.crimson },
  ];

  return (
    <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 8, padding: "20px 16px 16px" }}>
      <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 16 }}>
        Sensory Processing — Adolescent/Adult Sensory Profile · Age 37
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        {quads.map(q => {
          const pct = (q.score / q.max) * 100;
          return (
            <d

function AdaptiveBehavior() {
  const domains = [
    { label: "Communication", score: 96, pct: 39, color: C.blue },
    { label: "Daily Living Skills", score: 83, pct: 13, color: C.crimson, flag: "Weakness" },
    { label: "Socialization", score: 107, pct: 68, color: C.green, flag: "Strength" },
  ];

  return (
    <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 8, padding: "20px 16px 16px" }}>
      <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 4 }}>
        Adaptive Behavior — Vineland-3 · Age 37
      </div>
      <div style={{ fontFamily: font.mono, fontSize: 11, color: C.creamMid, marginBottom: 16 }}>
        ABC: 93 · 32nd percentile · Respondent: Emily K. Kitchens
      </div>

      <div style={{ display: "flex", gap: 8 }}>
        {domains.map(d => (
          <div key={d.label} style={{
            flex: 1, textAlign: "center", padding: "16px 10px", ba

function MusicSignature() {
  const artists = [
    { name: "ILLENIUM", mins: 9400, genre: "Melodic Bass", color: C.crimson },
    { name: "Polyphia", mins: 2534, genre: "Math Rock", color: C.violet },
    { name: "Said The Sky", mins: 1937, genre: "Melodic Bass", color: C.blue },
    { name: "Seven Lions", mins: 868, genre: "Melodic Bass", color: C.crimson },
    { name: "Excision", mins: 680, genre: "Melodic Bass", color: C.crimson },
    { name: "Chainsmokers", mins: 624, genre: "Melodic Bass", color: C.crimson },
    { name: "Gryffin", mins: 599, genre: "Melodic Bass", color: C.crimson },
    { name: "Good Charlotte", mins: 556, genre: "Pop-Punk", color: C.rose },
    { name: "NFG", mins: 555, genre: "Pop-Punk", color: C.rose },
    { name: "Yellowcard", mins: 553, genre: "Pop-Punk", color: C.rose },
  ];
  const max = artists[0].mins;

  return (
    <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 8, padding: "20px 16px 16px" }}>
      <div style={

function AcademicArc() {
  const semesters = [
    { term: "F04", gpa: 3.37, label: "Liberal Arts", color: C.blue },
    { term: "S05", gpa: 3.19, label: "Liberal Arts", color: C.blue },
    { term: "F05", gpa: 2.80, label: "Liberal Arts", color: C.blue },
    { term: "S06", gpa: 3.10, label: "Transfer", color: C.creamDim },
    { term: "F06", gpa: 3.15, label: "Business UG", color: C.green },
    { term: "S07", gpa: 3.36, label: "Business UG", color: C.green },
    { term: "Su07", gpa: 3.35, label: "Business UG", color: C.green },
    { term: "F07", gpa: 3.33, label: "Business UG", color: C.green },
    { term: "S08", gpa: 3.31, label: "Business UG", color: C.green },
    { term: "F08", gpa: 3.35, label: "Graduate", color: C.amber },
    { term: "S09", gpa: 3.67, label: "Graduate", color: C.amber },
  ];

  const barH = 100;

  return (
    <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 8, padding: "20px 16px 16px" }}>
      <div style={{ fontFamily: 

export default function ConsoleMap() {
  const [view, setView] = useState("aptitude");

  const views = [
    { id: "aptitude", label: "Aptitude Arc" },
    { id: "interest", label: "Interest Profile" },
    { id: "executive", label: "Executive Function" },
    { id: "processing", label: "Processing Split" },
    { id: "sensory", label: "Sensory Profile" },
    { id: "adaptive", label: "Adaptive Behavior" },
    { id: "academic", label: "Academic Record" },
    { id: "music", label: "Auditory Stimulus" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream, fontFamily: font.body }}>
      {/* Noise */}
      <div style={{
        position: "fixed", inset: 0, opacity: 0.03, pointerEvents: "none", zIndex: 0,
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3C

export default function GrammarlyPage() {
  const [tab, setTab] = useState("overview");
  const [hoveredTone, setHoveredTone] = useState<string | null>(null);

  const activeWeeks = RAW.filter(w => w.words > 10);
  const totalWords = RAW[RAW.length - 1].cumulative;
  const avgWords = Math.round(activeWeeks.reduce((s, w) => s + w.words, 0) / activeWeeks.length);
  const peakWeek = RAW.reduce((a, b) => a.words > b.words ? a : b);
  const avgAccuracy = Math.round(activeWeeks.reduce((s, w) => s + w.accPct, 0) / activeWeeks.length);
  const avgVocab = Math.round(activeWeeks.reduce((s, w) => s + w.vocabPct, 0) / activeWeeks.length);

  const toneAgg = useMemo(() => {
    const counts: Record<string, number> = {};
    activeWeeks.forEach(w => {
      Object.entries(w.tones).forEach(([t, v]) => {
        counts[t] = (counts[t] || 0) + v;
      });
    });
    return Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 10);
  }, []);

  const topTones = ["Confident", "Direct", "Formal", 

function FadeIn({ delay = 0, children }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setVisible(true), delay);
    return () => clearTimeout(t);
  }, [delay]);
  return (
    <div style={{
      opacity: visible ? 1 : 0,
      transform: visible ? "translateY(0)" : "translateY(16px)",
      transition: "opacity 0.8s ease, transform 0.8s ease",
    }}>
      {children}
    </div>
  );
}

function PullQuote({ quote, attribution, color = C.crimson }) {
  return (
    <div style={{
      margin: "40px 0",
      padding: "24px 28px",
      borderLeft: `3px solid ${color}`,
      background: color + "08",
      borderRadius: "0 8px 8px 0",
    }}>
      <div style={{
        fontFamily: font.body,
        fontSize: 20,
        color: C.cream,
        fontStyle: "italic",
        lineHeight: 1.55,
        marginBottom: attribution ? 10 : 0,
      }}>"{quote}"</div>
      {attribution && (
        <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, letterSpacing: "0.06em" }}>
          {attribution}
        </div>
      )}
    </div>
  );
}

function TimelineMoment({ date, label, color, children }) {
  return (
    <div style={{
      display: "flex",
      gap: 20,
      margin: "32px 0",
      paddingLeft: 20,
    }}>
      <div style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        flexShrink: 0,
        width: 56,
      }}>
        <div style={{
          width: 12, height: 12, borderRadius: "50%",
          background: color + "30", border: `2px solid ${color}`,
        }} />
        <div style={{ width: 2, flex: 1, background: color + "20", marginTop: 4 }} />
      </div>
      <div style={{ flex: 1, paddingBottom: 8 }}>
        <div style={{ fontFamily: font.mono, fontSize: 10, color, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 4 }}>
          {date}
        </div>
        <div style={{ fontFamily: font.display, fontSize: 16, fontWeight: 600, color: C.cream, marginBottom: 10 }}>
          {label}
        </div>
        <div style={{ fontFamily:

function InsightCallout({ label, color, children }) {
  return (
    <div style={{
      margin: "36px 0",
      padding: "18px 22px",
      background: color + "10",
      border: `1px solid ${color}30`,
      borderLeft: `3px solid ${color}`,
      borderRadius: "0 7px 7px 0",
    }}>
      <div style={{
        fontFamily: font.mono, fontSize: 9, color,
        letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8,
      }}>{label}</div>
      <div style={{ fontFamily: font.body, fontSize: 14, color: C.creamMid, lineHeight: 1.75 }}>
        {children}
      </div>
    </div>
  );
}

function Prose({ children }) {
  return (
    <div style={{
      fontFamily: font.body,
      fontSize: 16,
      color: C.creamMid,
      lineHeight: 1.85,
      marginBottom: 24,
    }}>
      {children}
    </div>
  );
}

function SectionBreak({ numeral, title, color = C.crimson }) {
  return (
    <div style={{ margin: "56px 0 32px", display: "flex", alignItems: "center", gap: 16 }}>
      <div style={{
        width: 36, height: 36, borderRadius: 6,
        background: color + "15", border: `1px solid ${color}30`,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: font.mono, fontSize: 14, fontWeight: 700, color,
      }}>{numeral}</div>
      <div style={{
        fontFamily: font.mono, fontSize: 11, letterSpacing: "0.15em",
        color: C.creamMid, textTransform: "uppercase",
      }}>{title}</div>
      <div style={{ flex: 1, height: 1, background: C.border }} />
    </div>
  );
}

export default function InterviewChronicle() {
  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream }}>
      {/* Noise overlay */}
      <div style={{
        position: "fixed", inset: 0, opacity: 0.025, pointerEvents: "none", zIndex: 0,
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
        backgroundSize: "200px",
      }} />

      <div style={{ position: "relative", zIndex: 1, maxWidth: 700, margin: "0 auto", padding: "64px 24px 80px" }}>

        {/* ── HERO ── */}
        <FadeIn delay={0}>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.crimson, letterSpacing: "0.25em", textTransform: "uppercase", marginBottom: 24 }}>
            DDL · CHRONICLE · Origin Stor

function MasterIndex() {
  const [sort,setSort] = useState("narrative");
  const data = sort==="narrative" ? EX : [...EX].sort((a,b)=>(a[4]||0)-(b[4]||0));
  return <div style={{display:"flex",flexDirection:"column",gap:20}}>
    <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(160px,1fr))",gap:12}}>
      {[
        {label:"Excerpts",value:"49",color:"#d97706"},{label:"Total Words",value:fmt(totalWords),color:"#f59e0b"},
        {label:"Avg Length",value:String(Math.round(totalWords/49)),color:"#b45309"},{label:"Timeline",value:"2004–2025",color:"#78350f"},
      ].map(c=><div key={c.label} style={{background:"linear-gradient(135deg,#1c1917,#292524)",borderRadius:12,padding:"16px 20px",border:"1px solid #44403c"}}>
        <div style={{fontSize:10,textTransform:"uppercase",letterSpacing:1.5,color:"#78716c",fontWeight:600}}>{c.label}</div>
        <div style={{fontSize:26,fontWeight:800,color:c.color,lineHeight:1.1,marginTop:6,fontFamily:"monospace"}}>{c.value}</

function NarrativeArc() {
  const arcData = EX.map((e: any)=>({name:`${e[0]}`,intensity:e[5],words:e[2],phase:PHASES[e[8]]?.label,title:e[1],color:PHASES[e[8]]?.color}));
  return <div style={{display:"flex",flexDirection:"column",gap:24}}>
    <div style={{background:"#1c1917",borderRadius:14,padding:24,border:"1px solid #44403c"}}>
      <h3 style={{margin:"0 0 16px",fontSize:16,fontWeight:700,color:"#e7e5e4"}}>Emotional Intensity Arc</h3>
      <ResponsiveContainer width="100%" height={300}>
        <AreaChart data={arcData}>
          <defs><linearGradient id="arcGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#d97706" stopOpacity={0.6}/><stop offset="100%" stopColor="#d97706" stopOpacity={0.05}/></linearGradient></defs>
          <CartesianGrid strokeDasharray="3 3" stroke="#44403c"/>
          <XAxis dataKey="name" stroke="#78716c" fontSize={10} interval={2}/>
          <YAxis stroke="#78716c" fontSize={11} domain={[0,10]}/>
          <Tooltip content={({active,pay

function Themes() {
  const [sel,setSel] = useState<string|null>(null);
  return <div style={{display:"flex",flexDirection:"column",gap:24}}>
    <div style={{background:"#1c1917",borderRadius:14,padding:24,border:"1px solid #44403c"}}>
      <h3 style={{margin:"0 0 16px",fontSize:16,fontWeight:700,color:"#e7e5e4"}}>Thematic Clusters</h3>
      {Object.entries(CLUSTERS).map(([name,c])=><div key={name} onClick={()=>setSel(sel===name?null:name)} style={{background:sel===name?"#292524":"transparent",borderRadius:10,padding:14,border:`1px solid ${sel===name?c.color+"66":"#44403c"}`,cursor:"pointer",marginBottom:8}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
          <div style={{fontSize:14,fontWeight:700,color:c.color}}>{name}</div>
          <div style={{fontSize:12,color:"#78716c",fontFamily:"monospace"}}>{c.excerpts.length} excerpts</div>
        </div>
        <div style={{fontSize:12,color:"#a8a29e",marginTop:6,lineHeight:1.5}}>{c.desc

function Findings() {
  return <div style={{display:"flex",flexDirection:"column",gap:24}}>
    <div style={{background:"#1c1917",borderRadius:14,padding:24,border:"1px solid #44403c"}}>
      <h3 style={{margin:"0 0 16px",fontSize:16,fontWeight:700,color:"#e7e5e4"}}>Structural Findings</h3>
      {[
        {title:"The Double Arc is the structural signature",color:"#d97706",body:"Most addiction memoirs have one arc. This one has TWO complete crisis-recovery cycles. Arc 1 (addiction) and Arc 2 (undiagnosed mental health). The bridge between them isn't filler — it's the false summit."},
        {title:"Excerpt 27 is the structural black hole",color:"#ef4444",body:"At 427 words, it's the shortest excerpt. It contains suicidal ideation, desk drinking, and the Frank Costanza intervention. The compression is the point."},
        {title:"Emily is not a love interest — she's a control environment",color:"#f472b6",body:"In audit terms, Emily is the control that compensates for the deficiency.

export default function MemoirAnalysisPage() {
  const [tab,setTab] = useState("index");
  return <div style={{fontFamily:"'Newsreader','Georgia',serif",background:"linear-gradient(180deg,#0c0a09 0%,#1c1917 50%,#0c0a09 100%)",color:"#e7e5e4",minHeight:"100vh",padding:"100px 24px 32px"}}>
    <style>{`@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');`}</style>
    <div style={{maxWidth:1100,margin:"0 auto"}}>
      <div style={{marginBottom:32}}>
        <div style={{fontSize:11,textTransform:"uppercase",letterSpacing:3,color:"#d97706",fontWeight:700,fontFamily:"monospace",marginBottom:8}}>Manuscript Analysis</div>
        <h1 style={{fontSize:38,fontWeight:800,margin:0,color:"#fef3c7",lineHeight:1.1}}>Little to Know Experience</h1>
        <div style={{color:"#78716c",fontSize:15,marginTop:8,fontStyle:"italic"}}>49 excerpts · 52,595 words · 21 years · 2 arcs · 1 kitchen</div>
      </div>
      <div style={{display:

function DashCard({ href, title, stat, statLabel, color, desc }) {
  const [hovered, setHovered] = useState(false);
  return (
    <Link href={href}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'block', textDecoration: 'none',
        background: hovered ? color + '08' : C.card,
        border: `1px solid ${hovered ? color + '30' : C.border}`,
        borderRadius: 8, padding: '24px 20px',
        transition: 'all 0.2s',
        transform: hovered ? 'translateY(-2px)' : 'none',
      }}
    >
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        gap: 16,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{
            fontFamily: font.display, fontSize: 18, fontWeight: 600,
            color: color, marginBottom: 8,
          }}>{title}</div>
          <div style={{
            fontFamily: font.body, fontSize: 14, color: C.creamMid,
      

export default function AnalyticsLanding() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  return (
    <div style={{
      maxWidth: 900, margin: '0 auto', padding: '60px 24px 100px',
      opacity: mounted ? 1 : 0,
      transform: mounted ? 'translateY(0)' : 'translateY(8px)',
      transition: 'all 0.6s ease',
    }}>
      {/* Header */}
      <div style={{ marginBottom: 48 }}>
        <div style={{
          fontFamily: font.mono, fontSize: 9, letterSpacing: '0.2em',
          textTransform: 'uppercase', color: C.amber, marginBottom: 12,
        }}>DDL Analytics</div>
        <div style={{
          fontFamily: font.display, fontSize: 32, fontWeight: 700,
          color: C.cream, marginBottom: 12, letterSpacing: '-0.5px',
        }}>Analytics Dashboard</div>
        <div style={{
          fontFamily: font.body, fontSize: 17, color: C.creamMid,
          lineHeight: 1.8, maxWidth: 620,
        }}>
          Data-driven analysis acro