// V3 — NEURAL WIRE (Terminal/77 restyle)
// Layout + content unchanged: wire-graph + live turn + fleet + control
// console. Rendered in Terminal/77 ink+amber palette with JetBrains Mono.

const N_BG     = '#0b0b0c';   // T_BG
const N_BG2    = '#111112';   // T_PANEL
const N_PANEL  = '#141311';
const N_LINE   = '#1e1d1a';   // T_LINE
const N_LINE2  = '#2a2924';   // T_LINE2
const N_INK    = '#e6d8b8';   // T_INK
const N_DIM    = '#6f6a5f';   // T_DIM
const N_MUTED  = '#44403a';   // T_MUTED
const N_CYAN   = '#4fd1c5';   // T_TEAL — was electric cyan
const N_CYAN2  = '#3aa095';
const N_MAG    = '#d46aa6';   // T_MAG
const N_AMBER  = '#e8b44a';   // T_AMBER
const N_GREEN  = '#7fd67f';   // T_GREEN
const N_RED    = '#ff5548';   // T_RED
const N_VIOLET = '#b6863a';   // T_AMBER2 — nudged into amber family

const nSans = '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace';
const nMono = '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace';
const nDisplay = '"JetBrains Mono", ui-monospace, monospace';

function NPanel({ title, right, children, style, pad=14 }) {
  return (
    <div style={{
      background:N_PANEL, border:`1px solid ${N_LINE}`, borderRadius:8,
      position:'relative', overflow:'hidden', display:'flex', flexDirection:'column', minHeight:0, ...style
    }}>
      <div style={{position:'absolute', top:0, left:0, right:0, height:1, background:`linear-gradient(90deg, transparent, ${N_CYAN2}55, transparent)`}}/>
      <div style={{padding:'8px 12px', display:'flex', justifyContent:'space-between', alignItems:'center', borderBottom:`1px solid ${N_LINE}`}}>
        <div style={{fontFamily:nDisplay, fontSize:12, letterSpacing:'0.28em', color:N_INK, textTransform:'uppercase'}}>{title}</div>
        <div style={{fontFamily:nMono, fontSize:9.5, color:N_DIM, letterSpacing:'0.1em'}}>{right}</div>
      </div>
      <div style={{padding:pad, flex:1, minHeight:0, overflow:'hidden'}}>{children}</div>
    </div>
  );
}

function NDot({ c=N_CYAN, size=8, pulse }) {
  return <span style={{
    display:'inline-block', width:size, height:size, borderRadius:'50%',
    background:c, boxShadow:`0 0 ${size*1.5}px ${c}, 0 0 ${size*3}px ${c}55`,
    animation: pulse?'npulse 1.8s ease-in-out infinite':'none', verticalAlign:'middle'
  }}/>;
}

function NMetric({ label, value, sub, color=N_CYAN }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:2}}>
      <div style={{fontFamily:nMono, fontSize:9, letterSpacing:'0.18em', color:N_DIM, textTransform:'uppercase'}}>{label}</div>
      <div style={{fontFamily:nDisplay, fontSize:28, color, lineHeight:1, letterSpacing:'-0.01em'}}>{value}</div>
      {sub && <div style={{fontFamily:nMono, fontSize:9.5, color:N_MUTED}}>{sub}</div>}
    </div>
  );
}

// ─── MONITOR ────────────────────────────────────────────────
function NeuralMonitor() {
  // Wire-graph layout (SVG coords within 720×440 viewbox)
  const nodes = {
    'arca-0': { x:360, y:170, r:42, label:'arca',            state:'thinking',  role:'orchestrator' },
    'arca-1': { x:150, y:330, r:26, label:'code-reviewer',   state:'tool-call', role:'subagent' },
    'arca-2': { x:290, y:360, r:24, label:'research-scout',  state:'streaming', role:'subagent' },
    'arca-3': { x:440, y:370, r:22, label:'structural-eng',  state:'idle',      role:'subagent' },
    'arca-4': { x:580, y:330, r:22, label:'sysadmin-probe',  state:'paused',    role:'subagent' },
    'cli':    { x:120, y:80,  r:18, label:'cli',    state:'channel' },
    'web':    { x:360, y:50,  r:20, label:'web',    state:'channel' },
    'tg':     { x:600, y:80,  r:18, label:'tg',     state:'channel' },
    'mem':    { x:660, y:220, r:16, label:'memory', state:'store' },
    'skills': { x:60,  y:220, r:16, label:'skills', state:'store' },
  };
  const channelEdges = [['cli','arca-0'],['web','arca-0'],['tg','arca-0']];
  const subEdges = [['arca-0','arca-1'],['arca-0','arca-2'],['arca-0','arca-3'],['arca-0','arca-4']];
  const storeEdges = [['arca-0','mem'],['arca-0','skills']];

  const stateColor = (s)=>({thinking:N_AMBER,'tool-call':N_CYAN,streaming:N_GREEN,idle:N_DIM,paused:'#c89000',channel:N_MAG,store:N_VIOLET}[s]||N_DIM);

  return (
    <div style={{width:'100%', height:'100%', background:N_BG, color:N_INK, fontFamily:nSans, display:'grid', gridTemplateRows:'auto 1fr auto', position:'relative'}}>
      <style>{`
        @keyframes npulse{0%,100%{opacity:1}50%{opacity:.45}}
        @keyframes nflow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-30}}
        @keyframes nring{0%{r:44;opacity:.9}100%{r:70;opacity:0}}
        @keyframes ngrid{0%{background-position:0 0}100%{background-position:40px 40px}}
        .n-grid{background-image:linear-gradient(${N_LINE}55 1px,transparent 1px),linear-gradient(90deg,${N_LINE}55 1px,transparent 1px);background-size:40px 40px}
      `}</style>

      {/* TOP BAR */}
      <div style={{display:'grid', gridTemplateColumns:'auto 1fr auto', alignItems:'center', padding:'10px 20px', borderBottom:`1px solid ${N_LINE}`, background:`linear-gradient(180deg, ${N_BG2}, ${N_BG})`, gap:18}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <div style={{width:28, height:28, borderRadius:8, background:N_AMBER, display:'grid', placeItems:'center', fontFamily:nDisplay, fontSize:16, color:N_BG, border:`1px solid ${N_AMBER}`}}>A</div>
          <div>
            <div style={{fontFamily:nDisplay, fontSize:14, letterSpacing:'0.32em', color:N_INK}}>ARCA · NEURAL WIRE</div>
            <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.14em', marginTop:2}}>MONITOR · v2.0 · {ARCA_NOW}</div>
          </div>
        </div>
        <div style={{display:'flex', justifyContent:'center', gap:4}}>
          {[['MONITOR',true],['CONTROL',false],['MEMORY',false],['SKILLS',false],['SESSIONS',false],['TASKS',false],['AUDIT',false]].map(([l,a])=>(
            <div key={l} style={{padding:'6px 14px', borderRadius:999, fontFamily:nMono, fontSize:10, letterSpacing:'0.18em', color:a?N_BG:N_DIM, background:a?N_CYAN:'transparent', border:`1px solid ${a?N_CYAN:'transparent'}`}}>{l}</div>
          ))}
        </div>
        <div style={{display:'flex', gap:14, fontFamily:nMono, fontSize:10}}>
          <span><NDot c={N_GREEN} pulse/> <span style={{color:N_INK, marginLeft:6}}>3 channels</span></span>
          <span><NDot c={N_AMBER} pulse/> <span style={{color:N_INK, marginLeft:6}}>1 thinking</span></span>
          <span style={{color:N_DIM}}>uptime 72:14</span>
          <span style={{color:N_CYAN}}>$12.41</span>
        </div>
      </div>

      {/* MAIN */}
      <div style={{display:'grid', gridTemplateColumns:'1fr 420px', gridTemplateRows:'1fr 1fr', gap:14, padding:14, minHeight:0}}>

        {/* Wire graph */}
        <NPanel title="Wire Graph · live" right={`${Object.keys(nodes).length} nodes · 9 edges · Δ 42ms`} style={{gridRow:'1 / span 2'}} pad={0}>
          <div style={{position:'relative', width:'100%', height:'100%', background:`radial-gradient(circle at 50% 45%, ${N_BG2} 0%, ${N_BG} 70%)`}}>
            <div style={{position:'absolute', inset:0, opacity:0.5}} className="n-grid"/>

            <svg viewBox="0 0 720 440" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
              <defs>
                <filter id="glow"><feGaussianBlur stdDeviation="3"/></filter>
                <marker id="ah" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
                  <path d="M0,0 L10,5 L0,10 Z" fill={N_CYAN}/>
                </marker>
                <marker id="ahm" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
                  <path d="M0,0 L10,5 L0,10 Z" fill={N_MAG}/>
                </marker>
                <marker id="ahv" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
                  <path d="M0,0 L10,5 L0,10 Z" fill={N_VIOLET}/>
                </marker>
              </defs>

              {/* Channel edges (magenta, inbound, animated) */}
              {channelEdges.map(([a,b],i)=>{
                const A=nodes[a], B=nodes[b];
                return <g key={i}>
                  <path d={`M${A.x},${A.y} Q${(A.x+B.x)/2},${A.y+(B.y-A.y)*0.4} ${B.x},${B.y-B.r}`} fill="none" stroke={N_MAG} strokeWidth={1.2} strokeDasharray="4 4" style={{animation:'nflow 2s linear infinite'}} markerEnd="url(#ahm)" opacity="0.85"/>
                </g>;
              })}

              {/* Subagent edges (cyan) */}
              {subEdges.map(([a,b],i)=>{
                const A=nodes[a], B=nodes[b];
                const col = stateColor(nodes[b].state);
                const flowing = nodes[b].state==='tool-call'||nodes[b].state==='streaming';
                return <g key={i}>
                  <path d={`M${A.x},${A.y+A.r} Q${(A.x+B.x)/2},${(A.y+B.y)/2+30} ${B.x},${B.y-B.r}`} fill="none" stroke={col} strokeWidth={1.4} strokeDasharray={flowing?'6 6':'2 5'} style={flowing?{animation:'nflow 1.2s linear infinite'}:{}} opacity="0.85"/>
                </g>;
              })}

              {/* Store edges (violet) */}
              {storeEdges.map(([a,b],i)=>{
                const A=nodes[a], B=nodes[b];
                return <path key={i} d={`M${A.x},${A.y} L${B.x-B.r},${B.y}`} stroke={N_VIOLET} strokeWidth={1} strokeDasharray="2 3" opacity="0.5" fill="none"/>;
              })}

              {/* Pulse rings on thinking orchestrator */}
              <circle cx={nodes['arca-0'].x} cy={nodes['arca-0'].y} r="44" fill="none" stroke={N_AMBER} strokeWidth="1" opacity="0.5" style={{animation:'nring 2.4s ease-out infinite'}}/>
              <circle cx={nodes['arca-0'].x} cy={nodes['arca-0'].y} r="44" fill="none" stroke={N_AMBER} strokeWidth="1" opacity="0.5" style={{animation:'nring 2.4s ease-out infinite', animationDelay:'1.2s'}}/>

              {/* Nodes */}
              {Object.entries(nodes).map(([id,n])=>{
                const col = stateColor(n.state);
                const isOrch = n.role==='orchestrator';
                return <g key={id}>
                  <circle cx={n.x} cy={n.y} r={n.r+6} fill={col} opacity="0.08" filter="url(#glow)"/>
                  <circle cx={n.x} cy={n.y} r={n.r} fill={N_BG2} stroke={col} strokeWidth={isOrch?2:1.2}/>
                  {isOrch && <circle cx={n.x} cy={n.y} r={n.r-6} fill="none" stroke={col} strokeWidth="0.7" opacity="0.6"/>}
                  <text x={n.x} y={n.y+4} textAnchor="middle" style={{fontFamily:nDisplay, fontSize:isOrch?16:10, fill:N_INK, letterSpacing:'0.1em'}}>{n.label}</text>
                  <text x={n.x} y={n.y+n.r+14} textAnchor="middle" style={{fontFamily:nMono, fontSize:8.5, fill:col, letterSpacing:'0.1em'}}>{n.state.toUpperCase()}</text>
                </g>;
              })}

              {/* Legend */}
              <g transform="translate(16,16)">
                <rect x="0" y="0" width="160" height="82" rx="4" fill={N_BG2} stroke={N_LINE} opacity="0.9"/>
                <text x="10" y="16" style={{fontFamily:nMono, fontSize:9, fill:N_DIM, letterSpacing:'0.16em'}}>EDGE · LEGEND</text>
                <g transform="translate(10,26)"><line x1="0" y1="5" x2="20" y2="5" stroke={N_MAG} strokeWidth="1.2" strokeDasharray="4 4"/><text x="26" y="9" style={{fontFamily:nMono, fontSize:9, fill:N_INK}}>inbound · channel</text></g>
                <g transform="translate(10,42)"><line x1="0" y1="5" x2="20" y2="5" stroke={N_CYAN} strokeWidth="1.4" strokeDasharray="6 6"/><text x="26" y="9" style={{fontFamily:nMono, fontSize:9, fill:N_INK}}>spawn · subagent</text></g>
                <g transform="translate(10,58)"><line x1="0" y1="5" x2="20" y2="5" stroke={N_VIOLET} strokeWidth="1" strokeDasharray="2 3"/><text x="26" y="9" style={{fontFamily:nMono, fontSize:9, fill:N_INK}}>read · store</text></g>
              </g>

              {/* HUD readout */}
              <g transform="translate(540,14)">
                <rect x="0" y="0" width="168" height="74" rx="4" fill={N_BG2} stroke={N_LINE} opacity="0.9"/>
                <text x="10" y="16" style={{fontFamily:nMono, fontSize:9, fill:N_DIM, letterSpacing:'0.16em'}}>TURN · t-00042</text>
                <text x="10" y="34" style={{fontFamily:nDisplay, fontSize:18, fill:N_INK}}>+4.21s</text>
                <text x="10" y="50" style={{fontFamily:nMono, fontSize:8.5, fill:N_DIM}}>model sonnet-4.6</text>
                <text x="10" y="64" style={{fontFamily:nMono, fontSize:8.5, fill:N_CYAN}}>9,142 tok in · 0 out</text>
              </g>
            </svg>
          </div>
        </NPanel>

        {/* Live turn */}
        <NPanel title="Live turn" right={`t-00042 · s-4819 · ${ARCA_TURN.channel}`}>
          <div style={{fontFamily:nSans, fontSize:12, color:N_DIM, marginBottom:8, lineHeight:1.4}}>
            <span style={{color:N_MAG, fontFamily:nMono, fontSize:10}}>dan @web &gt; </span>
            <span style={{color:N_INK}}>{ARCA_TURN.prompt}</span>
          </div>
          <div style={{display:'flex', gap:4, flexWrap:'wrap', marginBottom:10}}>
            {ARCA_TURN.skillsLoaded.map(s=><span key={s} style={{fontFamily:nMono, fontSize:9, color:N_VIOLET, border:`1px solid ${N_VIOLET}44`, padding:'2px 8px', borderRadius:999, background:`${N_VIOLET}11`}}>+ {s}</span>)}
          </div>
          <div style={{position:'relative', paddingLeft:16}}>
            <div style={{position:'absolute', left:6, top:0, bottom:0, width:1, background:`linear-gradient(180deg, ${N_CYAN}, ${N_MAG})`, opacity:0.4}}/>
            {ARCA_TURN.steps.map((s,i)=>{
              const col = s.k==='thought'?N_AMBER:s.k==='tool'?N_CYAN:N_DIM;
              return (
                <div key={i} style={{position:'relative', padding:'4px 0', opacity: s.active?1:0.85}}>
                  <div style={{position:'absolute', left:-14, top:8, width:7, height:7, borderRadius:'50%', background:col, boxShadow:`0 0 6px ${col}`}}/>
                  <div style={{display:'flex', justifyContent:'space-between', fontFamily:nMono, fontSize:9, color:N_MUTED}}>
                    <span>{s.k}</span><span>{s.at}</span>
                  </div>
                  <div style={{fontFamily:nSans, fontSize:11.5, color:N_INK, lineHeight:1.35}}>
                    {s.k==='tool' ? (
                      <>
                        <span style={{color:N_CYAN}}>{s.name}</span>
                        <span style={{color:N_DIM}}> · {s.out} · {s.ms}ms</span>
                      </>
                    ) : (s.text)}
                    {s.active && <span style={{color:N_AMBER, marginLeft:4}}>▮</span>}
                  </div>
                </div>
              );
            })}
          </div>
        </NPanel>

        {/* Fleet roster + tools */}
        <NPanel title="Fleet" right={`${ARCA_AGENTS.length} agents`}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:12}}>
            <NMetric label="today" value={`$${ARCA_COSTS.today.toFixed(2)}`} sub="12% of budget" color={N_CYAN}/>
            <NMetric label="turns / hr" value="48" sub="peak 71 @ 13:00" color={N_MAG}/>
          </div>
          <div style={{display:'grid', gap:4}}>
            {ARCA_AGENTS.slice(0,5).map(a=>(
              <div key={a.id} style={{display:'grid', gridTemplateColumns:'auto 1fr auto', gap:8, padding:'6px 8px', background:N_BG2, border:`1px solid ${N_LINE}`, borderRadius:4, alignItems:'center'}}>
                <NDot c={stateColor(a.state)} pulse={['thinking','streaming','tool-call'].includes(a.state)}/>
                <div style={{minWidth:0}}>
                  <div style={{fontFamily:nMono, fontSize:11, color:a.role==='orchestrator'?N_CYAN:N_INK}}>{a.name}</div>
                  <div style={{fontFamily:nMono, fontSize:9, color:N_DIM}}>{a.state} · {a.model}</div>
                </div>
                <div style={{fontFamily:nMono, fontSize:10, color:N_AMBER}}>${a.spend.toFixed(2)}</div>
              </div>
            ))}
          </div>
        </NPanel>
      </div>

      {/* STATUS */}
      <div style={{padding:'8px 20px', borderTop:`1px solid ${N_LINE}`, display:'flex', justifyContent:'space-between', fontFamily:nMono, fontSize:10, color:N_DIM}}>
        <span>soul.md · 2857b · facts 8 · journal (tail 50) · 5 skills loaded</span>
        <span style={{color:N_CYAN}}>⌘K command palette · ⌘↵ spawn · Esc clear</span>
        <span>load 0.12 · 28MB rss · cache-hit 94%</span>
      </div>
    </div>
  );
}

// ─── CONTROL ────────────────────────────────────────────────
function NeuralControl() {
  return (
    <div style={{width:'100%', height:'100%', background:N_BG, color:N_INK, fontFamily:nSans, display:'grid', gridTemplateRows:'auto 1fr auto'}}>
      <style>{`@keyframes npulse{0%,100%{opacity:1}50%{opacity:.45}} @keyframes nflow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-30}}`}</style>

      <div style={{display:'grid', gridTemplateColumns:'auto 1fr auto', alignItems:'center', padding:'10px 20px', borderBottom:`1px solid ${N_LINE}`, background:`linear-gradient(180deg, ${N_BG2}, ${N_BG})`, gap:18}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <div style={{width:28, height:28, borderRadius:8, background:N_AMBER, display:'grid', placeItems:'center', fontFamily:nDisplay, fontSize:16, color:N_BG, border:`1px solid ${N_AMBER}`}}>A</div>
          <div>
            <div style={{fontFamily:nDisplay, fontSize:14, letterSpacing:'0.32em', color:N_INK}}>ARCA · NEURAL WIRE</div>
            <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.14em', marginTop:2}}>CONTROL · REACTOR · RESTRICTED</div>
          </div>
        </div>
        <div style={{display:'flex', justifyContent:'center', gap:4}}>
          {[['MONITOR',false],['CONTROL',true],['MEMORY',false],['SKILLS',false],['SESSIONS',false],['TASKS',false],['AUDIT',false]].map(([l,a])=>(
            <div key={l} style={{padding:'6px 14px', borderRadius:999, fontFamily:nMono, fontSize:10, letterSpacing:'0.18em', color:a?N_BG:N_DIM, background:a?N_MAG:'transparent'}}>{l}</div>
          ))}
        </div>
        <div style={{display:'flex', gap:10, fontFamily:nMono, fontSize:10}}>
          <span style={{color:N_RED}}>● ARMED</span>
          <span style={{color:N_DIM}}>{ARCA_NOW}</span>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr 1fr', gap:14, padding:14, minHeight:0}}>

        {/* SPAWN composer */}
        <NPanel title="Spawn · reactor" right="new subagent">
          <div style={{display:'grid', gap:10}}>
            <div>
              <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>NAME</div>
              <input defaultValue="journal-auditor" style={{width:'100%', background:N_BG2, border:`1px solid ${N_LINE2}`, borderRadius:4, padding:'8px 10px', fontFamily:nMono, fontSize:13, color:N_CYAN, outline:'none'}}/>
            </div>
            <div>
              <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>ROLE</div>
              <div style={{display:'flex', gap:4}}>
                {['orchestrator','subagent','scheduled','ephemeral'].map((r,i)=>(
                  <div key={r} style={{padding:'6px 12px', fontFamily:nMono, fontSize:10, borderRadius:4, background: i===1?N_CYAN:'transparent', color:i===1?N_BG:N_DIM, border:`1px solid ${i===1?N_CYAN:N_LINE2}`, cursor:'pointer'}}>{r}</div>
                ))}
              </div>
            </div>
            <div>
              <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>MODEL</div>
              <div style={{display:'flex', gap:4}}>
                {['sonnet-4.6','haiku-4.5','opus-4.1'].map((m,i)=>(
                  <div key={m} style={{flex:1, padding:'10px 12px', borderRadius:4, background: i===0?`${N_CYAN}11`:'transparent', border:`1px solid ${i===0?N_CYAN:N_LINE2}`, cursor:'pointer'}}>
                    <div style={{fontFamily:nMono, fontSize:10, color: i===0?N_CYAN:N_INK}}>{m}</div>
                    <div style={{fontFamily:nMono, fontSize:8.5, color:N_DIM, marginTop:2}}>{['$3/Mtok','$0.25/Mtok','$15/Mtok'][i]}</div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>SKILLS</div>
              <div style={{display:'flex', gap:4, flexWrap:'wrap'}}>
                {ARCA_SKILLS.map((s,i)=>{
                  const on=[0,3].includes(i);
                  return <div key={s.file} style={{padding:'4px 10px', fontFamily:nMono, fontSize:10, borderRadius:999, background: on?`${N_VIOLET}22`:'transparent', color: on?N_VIOLET:N_DIM, border:`1px solid ${on?N_VIOLET:N_LINE2}`, cursor:'pointer'}}>{on?'✓ ':''}{s.file.replace('.md','')}</div>;
                })}
              </div>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8}}>
              <div><div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>MAX TURNS</div><div style={{fontFamily:nDisplay, fontSize:22, color:N_INK}}>10</div></div>
              <div><div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>BUDGET</div><div style={{fontFamily:nDisplay, fontSize:22, color:N_AMBER}}>$0.50</div></div>
              <div><div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>TIMEOUT</div><div style={{fontFamily:nDisplay, fontSize:22, color:N_INK}}>120s</div></div>
            </div>
            <div>
              <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>SEED PROMPT</div>
              <div style={{background:N_BG2, border:`1px solid ${N_LINE2}`, borderRadius:4, padding:10, fontFamily:nMono, fontSize:11, color:N_INK, lineHeight:1.5, minHeight:60}}>
                review memory/journal.md for duplicate or contradictory entries from the last 30 days; suggest merges as a unified diff. do not write.
              </div>
            </div>
            <div>
              <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>TOOL ALLOWLIST</div>
              <div style={{fontFamily:nMono, fontSize:10, color:N_CYAN}}>Read · Grep · mcp__arca__search_memory <span style={{color:N_MUTED}}>(Bash, Write, Edit denied)</span></div>
            </div>
            <div style={{display:'flex', gap:8, marginTop:4}}>
              <button style={{padding:'10px 20px', background:N_AMBER, color:N_BG, border:'none', borderRadius:4, fontFamily:nMono, fontSize:11, letterSpacing:'0.2em', fontWeight:600, cursor:'pointer'}}>▶ SPAWN</button>
              <button style={{padding:'10px 20px', background:'transparent', color:N_INK, border:`1px solid ${N_LINE2}`, borderRadius:4, fontFamily:nMono, fontSize:11, letterSpacing:'0.2em', cursor:'pointer'}}>DRY-RUN</button>
              <button style={{padding:'10px 20px', background:'transparent', color:N_DIM, border:`1px solid ${N_LINE2}`, borderRadius:4, fontFamily:nMono, fontSize:11, letterSpacing:'0.2em', cursor:'pointer'}}>TEMPLATE</button>
            </div>
          </div>
        </NPanel>

        {/* FLEET CONTROL */}
        <NPanel title="Fleet · act" right="select · then act">
          <div style={{display:'grid', gap:4, marginBottom:10}}>
            {ARCA_AGENTS.map((a,i)=>(
              <div key={a.id} style={{
                display:'grid', gridTemplateColumns:'auto 1fr auto auto', gap:8, padding:'8px 10px',
                background: i===1?`${N_CYAN}11`:N_BG2, border:`1px solid ${i===1?N_CYAN:N_LINE}`, borderRadius:4, alignItems:'center'
              }}>
                <NDot c={AGENT_STATE_COLOR[a.state]} pulse={['thinking','streaming','tool-call'].includes(a.state)}/>
                <div style={{minWidth:0}}>
                  <div style={{fontFamily:nMono, fontSize:11.5, color:a.role==='orchestrator'?N_CYAN:N_INK}}>
                    {a.role==='orchestrator' && '▸ '}{a.name}
                  </div>
                  <div style={{fontFamily:nMono, fontSize:9, color:N_DIM}}>{a.state} · pid {a.pid??'—'} · #{a.turns}</div>
                </div>
                <div style={{fontFamily:nMono, fontSize:9.5, color:N_AMBER}}>${a.spend.toFixed(2)}</div>
                <div style={{display:'flex', gap:2}}>
                  {['▶','⏸','■'].map((s,j)=><div key={j} style={{width:22, height:22, display:'grid', placeItems:'center', border:`1px solid ${N_LINE2}`, borderRadius:3, fontSize:10, color:[N_GREEN,N_AMBER,N_RED][j], cursor:'pointer'}}>{s}</div>)}
                </div>
              </div>
            ))}
          </div>

          <div style={{borderTop:`1px solid ${N_LINE}`, paddingTop:10}}>
            <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:6}}>BULK ACTIONS</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
              {[
                ['⏸ PAUSE IDLE', N_AMBER],
                ['■ KILL PAUSED', N_RED],
                ['↻ RESTART ALL SUB', N_CYAN],
                ['◉ ATTACH TO arca-0', N_VIOLET],
              ].map(([l,c])=><button key={l} style={{padding:'8px 10px', background:'transparent', color:c, border:`1px solid ${c}44`, borderRadius:4, fontFamily:nMono, fontSize:10, letterSpacing:'0.12em', cursor:'pointer'}}>{l}</button>)}
            </div>
          </div>

          <div style={{marginTop:12, borderTop:`1px solid ${N_LINE}`, paddingTop:10}}>
            <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:6}}>CHANNELS</div>
            {ARCA_CHANNELS.map(c=>(
              <div key={c.id} style={{display:'flex', justifyContent:'space-between', padding:'5px 0', borderBottom:`1px dotted ${N_LINE}`, fontFamily:nMono, fontSize:10.5}}>
                <span><NDot c={N_GREEN} pulse/> <span style={{color:N_INK, marginLeft:6}}>{c.id}</span> <span style={{color:N_DIM}}> · {c.bind}</span></span>
                <span style={{color:N_CYAN}}>{c.sessions}s · {c.latencyMs}ms</span>
              </div>
            ))}
          </div>
        </NPanel>

        {/* MEMORY / SKILLS / DANGER */}
        <div style={{display:'grid', gridTemplateRows:'1fr 1fr 1fr', gap:14, minHeight:0}}>
          <NPanel title="Soul + memory" right="2857b · 8 facts">
            <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>SOUL.md · rules</div>
            <div style={{fontFamily:nMono, fontSize:10.5, color:N_INK, lineHeight:1.5, marginBottom:8}}>
              <div>· never destructive w/o confirm</div>
              <div>· show reasoning before action</div>
              <div>· python first, plain JS for fe</div>
            </div>
            <div style={{fontFamily:nMono, fontSize:9, color:N_DIM, letterSpacing:'0.2em', marginBottom:4}}>FACTS · tail</div>
            {ARCA_MEMORY.facts.slice(-3).map((f,i)=>(
              <div key={i} style={{fontFamily:nMono, fontSize:10, color:N_INK, padding:'2px 0', borderBottom:`1px dotted ${N_LINE}`}}>
                <span style={{color:N_MUTED}}>{f.t.slice(5)} </span>{f.line}
              </div>
            ))}
          </NPanel>

          <NPanel title="Scheduled" right={`${ARCA_TASKS.length} cron`}>
            {ARCA_TASKS.map(t=>(
              <div key={t.name} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:6, padding:'4px 0', borderBottom:`1px dotted ${N_LINE}`}}>
                <div>
                  <div style={{fontFamily:nMono, fontSize:11, color:N_INK}}>{t.name}</div>
                  <div style={{fontFamily:nMono, fontSize:9, color:N_DIM}}>{t.cron} · next {t.next}</div>
                </div>
                <div style={{fontFamily:nMono, fontSize:9.5, color: t.lastStatus==='done'?N_GREEN:N_RED, alignSelf:'center'}}>{t.lastStatus}</div>
              </div>
            ))}
          </NPanel>

          <NPanel title="Danger" right="destructive">
            <div style={{display:'grid', gap:6}}>
              {[
                ['Kill all subagents', N_RED, '6 processes'],
                ['Wipe journal 7d', N_AMBER, '14 entries'],
                ['Rotate API key', N_MAG, 're-auth'],
              ].map(([l,c,sub])=>(
                <div key={l} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'6px 8px', border:`1px solid ${c}44`, background:`${c}08`, borderRadius:4}}>
                  <div>
                    <div style={{fontFamily:nMono, fontSize:10.5, color:c}}>{l}</div>
                    <div style={{fontFamily:nMono, fontSize:8.5, color:N_MUTED}}>{sub}</div>
                  </div>
                  <button style={{padding:'4px 10px', background:'transparent', color:c, border:`1px solid ${c}`, borderRadius:3, fontFamily:nMono, fontSize:9, letterSpacing:'0.1em', cursor:'pointer'}}>EXEC</button>
                </div>
              ))}
            </div>
          </NPanel>
        </div>
      </div>

      <div style={{padding:'8px 20px', borderTop:`1px solid ${N_LINE}`, display:'flex', justifyContent:'space-between', fontFamily:nMono, fontSize:10, color:N_DIM}}>
        <span>permission mode: acceptEdits · deny bash</span>
        <span style={{color:N_CYAN}}>⌘↵ spawn · ⌘K palette · ⌘. kill</span>
        <span>confirm destructive actions in-flight</span>
      </div>
    </div>
  );
}

Object.assign(window, { NeuralMonitor, NeuralControl });