// V1 — TERMINAL/77
// Bloomberg-meets-BBS. Monospace, dense. Amber ink (#e8b44a) on ink (#0b0b0c),
// with CRT teal (#4fd1c5) and alert red (#ff5548). ASCII sparklines, framed
// panels with box-drawing chars, keyboard hints everywhere.

const T_BG     = '#0b0b0c';
const T_PANEL  = '#111112';
const T_LINE   = '#1e1d1a';
const T_LINE2  = '#2a2924';
const T_AMBER  = '#e8b44a';
const T_AMBER2 = '#b6863a';
const T_DIM    = '#6f6a5f';
const T_MUTED  = '#44403a';
const T_TEAL   = '#4fd1c5';
const T_RED    = '#ff5548';
const T_GREEN  = '#7fd67f';
const T_MAG    = '#d46aa6';
const T_INK    = '#e6d8b8';

const tMono = '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace';

function TermBox({ title, right, children, flex, style, pad=10 }) {
  return (
    <div style={{
      border:`1px solid ${T_LINE2}`, background:T_PANEL,
      display:'flex', flexDirection:'column', flex: flex||'none',
      minHeight:0, ...style
    }}>
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'3px 8px', borderBottom:`1px solid ${T_LINE2}`,
        background:'linear-gradient(180deg,#141311,#0e0d0c)',
        fontFamily:tMono, fontSize:10.5, letterSpacing:'0.14em',
        color:T_AMBER2, textTransform:'uppercase'
      }}>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <span style={{color:T_AMBER}}>▎</span>
          <span>{title}</span>
        </div>
        <div style={{color:T_DIM, fontSize:10}}>{right}</div>
      </div>
      <div style={{padding:pad, minHeight:0, flex:1, overflow:'hidden', fontFamily:tMono, color:T_INK, fontSize:11.5, lineHeight:1.45}}>
        {children}
      </div>
    </div>
  );
}

function kbd(label) {
  return <span style={{
    display:'inline-block', padding:'0 5px', border:`1px solid ${T_LINE2}`,
    borderBottomWidth:2, background:'#17161400', color:T_AMBER2,
    fontFamily:tMono, fontSize:9.5, letterSpacing:'0.05em', borderRadius:2
  }}>{label}</span>;
}

function sparkline(vals, len=40) {
  const ticks = '▁▂▃▄▅▆▇█';
  const min = Math.min(...vals), max = Math.max(...vals);
  const step = Math.max(1, Math.floor(vals.length/len));
  const out = [];
  for (let i=0;i<vals.length;i+=step) {
    const v = vals[i];
    const n = Math.round(((v-min)/(max-min||1))*7);
    out.push(ticks[n]);
  }
  return out.join('');
}

function Dot({c, pulse}) {
  return <span style={{
    display:'inline-block', width:7, height:7, borderRadius:1,
    background:c, boxShadow:`0 0 6px ${c}`,
    animation: pulse ? 'tpulse 1.4s ease-in-out infinite' : 'none',
    marginRight:6, verticalAlign:'middle'
  }}/>;
}

function TerminalMonitor() {
  return (
    <div style={{
      width:'100%', height:'100%', background:T_BG,
      color:T_INK, fontFamily:tMono, fontSize:12,
      display:'grid', gridTemplateRows:'auto 1fr auto', position:'relative'
    }}>
      <style>{`@keyframes tpulse{0%,100%{opacity:1}50%{opacity:.35}}
        @keyframes tcaret{0%,49%{opacity:1}50%,100%{opacity:0}}
        .tcaret{animation:tcaret 1s steps(1) infinite}
      `}</style>

      <div style={{
        display:'grid', gridTemplateColumns:'auto 1fr auto', alignItems:'center',
        borderBottom:`1px solid ${T_LINE2}`, padding:'6px 12px', gap:14,
        background:'linear-gradient(180deg,#151412,#0d0c0b)'
      }}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:18, height:18, border:`1px solid ${T_AMBER}`, display:'grid',placeItems:'center', color:T_AMBER, fontSize:11, fontWeight:700}}>A</div>
          <div style={{color:T_AMBER, fontWeight:700, letterSpacing:'0.26em', fontSize:12}}>ARCA · TERMINAL/77</div>
          <div style={{color:T_DIM, fontSize:10, letterSpacing:'0.14em'}}>v2.0 · MONITOR</div>
        </div>
        <div style={{display:'flex', gap:18, fontSize:10.5, color:T_DIM, justifyContent:'center'}}>
          {['F1 MONITOR','F2 CONTROL','F3 MEMORY','F4 SKILLS','F5 TASKS','F6 SESSIONS','F7 TOOLS','F8 COSTS'].map((x,i)=>(
            <span key={i} style={{color: i===0?T_AMBER:T_DIM}}>{x}</span>
          ))}
        </div>
        <div style={{display:'flex',gap:14, fontSize:10.5, color:T_DIM}}>
          <span><Dot c={T_GREEN} pulse/> CLI</span>
          <span><Dot c={T_GREEN} pulse/> WEB :7777</span>
          <span><Dot c={T_GREEN} pulse/> TG</span>
          <span style={{color:T_AMBER}}>{ARCA_NOW}</span>
        </div>
      </div>

      <div style={{
        display:'grid',
        gridTemplateColumns:'260px 1fr 1fr 320px',
        gridTemplateRows:'auto auto 1fr',
        gap:1, background:T_LINE2, padding:1, minHeight:0
      }}>

        <TermBox title="AGENT FLEET" right={`${ARCA_AGENTS.length} · live`} style={{gridRow:'1 / span 3'}} pad={0}>
          <div style={{padding:'4px 8px', borderBottom:`1px solid ${T_LINE}`, display:'grid',
            gridTemplateColumns:'10px 1fr auto', fontSize:9.5, color:T_DIM, letterSpacing:'0.1em'}}>
            <span></span><span>NAME · ROLE</span><span>TURN</span>
          </div>
          <div style={{overflow:'auto', height:'calc(100% - 22px)'}}>
          {ARCA_AGENTS.map((a,i)=>(
            <div key={a.id} style={{
              display:'grid', gridTemplateColumns:'10px 1fr auto',
              padding:'7px 8px', borderBottom:`1px solid ${T_LINE}`,
              background: i===0?'#1a150b':'transparent', gap:6, alignItems:'center'
            }}>
              <Dot c={AGENT_STATE_COLOR[a.state]} pulse={a.state==='thinking'||a.state==='streaming'||a.state==='tool-call'}/>
              <div style={{minWidth:0}}>
                <div style={{color: a.role==='orchestrator'?T_AMBER:T_INK, fontWeight:a.role==='orchestrator'?700:500, fontSize:12}}>
                  {a.role==='orchestrator' && '▸ '}{a.name}
                </div>
                <div style={{color:T_DIM, fontSize:10}}>
                  {a.role} · {a.state} · {a.model}
                </div>
                <div style={{color:T_MUTED, fontSize:9.5, marginTop:2}}>
                  pid {a.pid??'—'} · ${a.spend.toFixed(2)}
                </div>
              </div>
              <div style={{textAlign:'right', color:T_TEAL, fontSize:10}}>
                #{String(a.turns).padStart(4,'0')}
              </div>
            </div>
          ))}
          </div>
        </TermBox>

        <TermBox title="LIVE TURN · agentic loop" right={`t-00042 · s-4819 · +${(ARCA_TURN.elapsedMs/1000).toFixed(2)}s`} style={{gridColumn:'2 / span 2'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr', gap:4}}>
            <div style={{color:T_DIM, fontSize:10.5}}>
              <span style={{color:T_AMBER2}}>dan@web&gt;</span> {ARCA_TURN.prompt}
            </div>
            <div style={{height:1, background:T_LINE, margin:'4px 0'}}/>
            <div style={{display:'flex', gap:4, flexWrap:'wrap', fontSize:10, color:T_DIM}}>
              <span>skills loaded:</span>
              {ARCA_TURN.skillsLoaded.map(s=><span key={s} style={{color:T_TEAL, border:`1px solid ${T_LINE2}`, padding:'0 5px'}}>+ {s}</span>)}
              <span style={{marginLeft:'auto', color:T_AMBER2}}>tokens in {ARCA_TURN.tokensIn.toLocaleString()}</span>
            </div>
            <div style={{height:1, background:T_LINE, margin:'4px 0'}}/>
            {ARCA_TURN.steps.map((s, i)=>{
              const gutter = s.k==='thought' ? '◆' : s.k==='tool' ? '●' : s.k==='waiting' ? '◌' : '·';
              const col = s.k==='thought'?T_AMBER : s.k==='tool'?T_TEAL : T_DIM;
              return (
                <div key={i} style={{display:'grid', gridTemplateColumns:'46px 14px 1fr', fontSize:11, lineHeight:1.4, opacity: s.active?1:0.9}}>
                  <div style={{color:T_MUTED}}>{s.at}</div>
                  <div style={{color:col}}>{gutter}</div>
                  <div style={{color:T_INK}}>
                    {s.k==='thought' && <span style={{color:T_AMBER2}}>thought · </span>}
                    {s.k==='waiting' && <span style={{color:T_DIM}}>waiting · </span>}
                    {s.k==='tool' && (
                      <>
                        <span style={{color:T_TEAL}}>{s.name}</span>
                        <span style={{color:T_MUTED}}>({Object.entries(s.args).map(([k,v])=>`${k}=${typeof v==='string'?JSON.stringify(v):v}`).join(', ')})</span>
                        <span style={{color:s.ok?T_GREEN:T_RED}}> → {s.out}</span>
                        <span style={{color:T_MUTED}}> · {s.ms}ms</span>
                      </>
                    )}
                    {(s.k==='thought'||s.k==='waiting') && <span>{s.text}</span>}
                    {s.active && <span className="tcaret" style={{color:T_AMBER, marginLeft:4}}>▮</span>}
                  </div>
                </div>
              );
            })}
          </div>
        </TermBox>

        <TermBox title="TOKENS · 24h" right="usd" style={{gridColumn:'4'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6, marginBottom:6}}>
            <div>
              <div style={{color:T_DIM, fontSize:9.5, letterSpacing:'0.12em'}}>TODAY</div>
              <div style={{color:T_AMBER, fontSize:22, fontWeight:700, letterSpacing:'-0.02em'}}>${ARCA_COSTS.today.toFixed(2)}</div>
            </div>
            <div>
              <div style={{color:T_DIM, fontSize:9.5, letterSpacing:'0.12em'}}>MONTH</div>
              <div style={{color:T_TEAL, fontSize:22, fontWeight:700}}>${ARCA_COSTS.month.toFixed(0)}</div>
            </div>
          </div>
          <div style={{fontSize:10, color:T_DIM, marginBottom:2}}>budget ${ARCA_COSTS.budget.toFixed(0)} · {Math.round(ARCA_COSTS.month/ARCA_COSTS.budget*100)}%</div>
          <div style={{height:6, background:T_LINE, position:'relative', marginBottom:10}}>
            <div style={{position:'absolute',top:0,left:0,bottom:0,width:`${ARCA_COSTS.month/ARCA_COSTS.budget*100}%`, background:`linear-gradient(90deg,${T_AMBER},${T_TEAL})`}}/>
          </div>
          <div style={{color:T_DIM, fontSize:10, letterSpacing:'0.12em', marginBottom:2}}>BURN · TOKENS/HR</div>
          <div style={{color:T_AMBER, fontSize:16, fontFamily:tMono, letterSpacing:'-0.02em'}}>{sparkline(ARCA_BURN_24H, 24)}</div>
          <div style={{display:'flex', justifyContent:'space-between', color:T_MUTED, fontSize:9}}>
            <span>-24h</span><span>-12h</span><span>now</span>
          </div>
          <div style={{height:1, background:T_LINE, margin:'8px 0'}}/>
          <div style={{color:T_DIM, fontSize:10, letterSpacing:'0.12em', marginBottom:4}}>TOP SPEND · session</div>
          {ARCA_SESSIONS.slice(0,4).map(s=>(
            <div key={s.id} style={{display:'grid',gridTemplateColumns:'50px 1fr auto', fontSize:10.5, padding:'2px 0'}}>
              <span style={{color:T_TEAL}}>{s.id}</span>
              <span style={{color:T_DIM, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', paddingRight:8}}>{s.topic}</span>
              <span style={{color:T_AMBER}}>${s.spend.toFixed(2)}</span>
            </div>
          ))}
        </TermBox>

        <TermBox title="SYSTEM PROMPT · t-00042" right={`${ARCA_PROMPT.totalTokens}/${ARCA_PROMPT.budget} tok`} style={{gridColumn:'2'}}>
          <div style={{display:'flex', gap:2, height:8, marginBottom:8}}>
            {ARCA_PROMPT.sections.map((s,i)=>{
              const pct = s.tokens/ARCA_PROMPT.totalTokens;
              const col = s.k==='soul'?T_AMBER:s.k==='facts'?T_TEAL:s.k==='preferences'?T_GREEN:s.k==='journal'?T_MAG:T_AMBER2;
              return <div key={i} title={`${s.label} ${s.tokens}`} style={{flex:pct, background:col}}/>;
            })}
          </div>
          {ARCA_PROMPT.sections.map((s,i)=>(
            <div key={i} style={{display:'grid', gridTemplateColumns:'10px 1fr auto', fontSize:10.5, padding:'2px 0', borderBottom:`1px dotted ${T_LINE}`}}>
              <span style={{color: s.k==='soul'?T_AMBER:s.k==='skill'?T_AMBER2:T_TEAL}}>
                {s.k==='soul'?'▣':s.k==='skill'?'◈':'◇'}
              </span>
              <span style={{color:T_INK}}>{s.label}
                {s.matched && <span style={{color:T_MUTED}}> · match: {s.matched.join(', ')}</span>}
              </span>
              <span style={{color:T_AMBER}}>{s.tokens}</span>
            </div>
          ))}
        </TermBox>

        <TermBox title="TOOL CALLS · 24h" right="count · avg ms" style={{gridColumn:'3'}}>
          {ARCA_TOOLCALLS_24H.map(t=>{
            const max = Math.max(...ARCA_TOOLCALLS_24H.map(x=>x.count));
            const pct = t.count/max;
            return (
              <div key={t.tool} style={{display:'grid',gridTemplateColumns:'160px 1fr 48px 40px', gap:6, padding:'2px 0', alignItems:'center', fontSize:10.5}}>
                <span style={{color: t.tool.startsWith('mcp')?T_MAG:T_TEAL}}>{t.tool}</span>
                <div style={{height:4, background:T_LINE, position:'relative'}}>
                  <div style={{position:'absolute',top:0,left:0,bottom:0,width:`${pct*100}%`, background:T_AMBER}}/>
                </div>
                <span style={{color:T_AMBER, textAlign:'right'}}>{t.count}</span>
                <span style={{color:T_MUTED, textAlign:'right'}}>{t.avgMs}ms</span>
              </div>
            );
          })}
          <div style={{height:1, background:T_LINE, margin:'8px 0'}}/>
          <div style={{color:T_DIM, fontSize:10, letterSpacing:'0.12em', marginBottom:4}}>RECENT · ring buffer</div>
          {[
            ['14:07:33','arca-0','Bash','pytest deck-calc/...','ok','1820'],
            ['14:07:31','arca-0','Grep','pg\\s*= deck-calc/','ok','22'],
            ['14:07:30','arca-0','mcp__arca__search_memory','ASCE 7-22','ok','14'],
            ['14:07:28','arca-0','Spawn','structural-eng','ok','12'],
            ['14:06:12','arca-1','Read','src/joist.py','ok','38'],
            ['14:05:44','arca-2','WebSearch','ASCE 7-22 §7.3','ok','412'],
          ].map((r,i)=>(
            <div key={i} style={{display:'grid',gridTemplateColumns:'56px 60px 96px 1fr 26px 44px', fontSize:10, gap:4, color:T_DIM}}>
              <span>{r[0]}</span>
              <span style={{color:T_AMBER2}}>{r[1]}</span>
              <span style={{color: r[2].startsWith('mcp')?T_MAG:T_TEAL}}>{r[2]}</span>
              <span style={{color:T_INK, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{r[3]}</span>
              <span style={{color:T_GREEN}}>{r[4]}</span>
              <span style={{textAlign:'right'}}>{r[5]}ms</span>
            </div>
          ))}
        </TermBox>

        <TermBox title="CHANNELS" right="pty · http · bot" style={{gridColumn:'4'}}>
          {ARCA_CHANNELS.map(c=>(
            <div key={c.id} style={{display:'grid',gridTemplateColumns:'14px 70px 1fr auto', padding:'5px 0', borderBottom:`1px dotted ${T_LINE}`, gap:6, alignItems:'center'}}>
              <Dot c={T_GREEN} pulse/>
              <span style={{color:T_AMBER, textTransform:'uppercase', fontSize:11, letterSpacing:'0.12em'}}>{c.id}</span>
              <span style={{color:T_DIM, fontSize:10}}>{c.bind}</span>
              <span style={{color:T_INK, fontSize:10}}>{c.sessions}s · {c.msgs24h}m · {c.latencyMs}ms</span>
            </div>
          ))}
          <div style={{height:1, background:T_LINE, margin:'8px 0'}}/>
          <div style={{color:T_DIM, fontSize:10, letterSpacing:'0.12em', marginBottom:4}}>ACTIVE SESSIONS</div>
          {ARCA_SESSIONS.slice(0,4).map(s=>(
            <div key={s.id} style={{display:'grid',gridTemplateColumns:'50px 34px 1fr', gap:4, fontSize:10.5, padding:'1px 0'}}>
              <span style={{color:T_TEAL}}>{s.id}</span>
              <span style={{color:T_MUTED}}>{s.ch}</span>
              <span style={{color:T_INK, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{s.topic}</span>
            </div>
          ))}
        </TermBox>

        <TermBox title="SCHEDULER · cron" right={`${ARCA_TASKS.length} tasks`} style={{gridColumn:'2'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 110px 110px 50px 50px', gap:6, fontSize:10, color:T_DIM, letterSpacing:'0.1em', paddingBottom:4, borderBottom:`1px solid ${T_LINE}`}}>
            <span>NAME</span><span>CRON</span><span>NEXT</span><span>LAST</span><span style={{textAlign:'right'}}>DUR</span>
          </div>
          {ARCA_TASKS.map(t=>(
            <div key={t.name} style={{display:'grid',gridTemplateColumns:'1fr 110px 110px 50px 50px', gap:6, padding:'3px 0', fontSize:10.5, borderBottom:`1px dotted ${T_LINE}`}}>
              <span style={{color:T_AMBER}}>{t.name}</span>
              <span style={{color:T_TEAL}}>{t.cron}</span>
              <span style={{color:T_INK}}>{t.next}</span>
              <span style={{color: t.lastStatus==='done'?T_GREEN:T_RED}}>{t.lastStatus}</span>
              <span style={{color:T_MUTED, textAlign:'right'}}>{(t.durMs/1000).toFixed(1)}s</span>
            </div>
          ))}
        </TermBox>

        <TermBox title="SKILLS · last 24h" right="matches · hit-rate" style={{gridColumn:'3'}}>
          {ARCA_SKILLS.map(s=>(
            <div key={s.file} style={{display:'grid',gridTemplateColumns:'130px 1fr 60px 50px', gap:6, padding:'3px 0', fontSize:10.5, borderBottom:`1px dotted ${T_LINE}`, alignItems:'center'}}>
              <span style={{color:T_AMBER}}>{s.file}</span>
              <span style={{color:T_DIM, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{s.triggers.slice(0,4).join(' · ')}</span>
              <span style={{color:T_TEAL, textAlign:'right'}}>{s.matches24h}×</span>
              <span style={{color: s.hitRate>0.85?T_GREEN:T_AMBER, textAlign:'right'}}>{Math.round(s.hitRate*100)}%</span>
            </div>
          ))}
        </TermBox>

        <TermBox title="JOURNAL · tail" right="memory/journal.md" style={{gridColumn:'4'}}>
          {ARCA_MEMORY.journal.slice().reverse().map((j,i)=>(
            <div key={i} style={{padding:'3px 0', borderBottom:`1px dotted ${T_LINE}`, fontSize:10.5}}>
              <div style={{color:T_MUTED, fontSize:9.5}}>{j.t}</div>
              <div style={{color:T_INK}}>{j.line}</div>
            </div>
          ))}
        </TermBox>
      </div>

      <div style={{
        display:'grid', gridTemplateColumns:'1fr auto auto auto auto auto 1fr', gap:16,
        padding:'4px 12px', borderTop:`1px solid ${T_LINE2}`, background:'#0a0908',
        fontSize:10, color:T_DIM, alignItems:'center'
      }}>
        <span>soul: Arca · 2857b · facts 8 · journal 50 · skills 5 loaded</span>
        {kbd('/')} <span style={{color:T_AMBER}}>cmd</span>
        {kbd('g a')} <span>agent fleet</span>
        {kbd('g m')} <span>memory</span>
        {kbd('k')} <span style={{color:T_RED}}>kill selected</span>
        {kbd('? help')}
        <span style={{textAlign:'right', color:T_AMBER2}}>uptime 72:14:33 · load 0.12 · 28MB rss</span>
      </div>
    </div>
  );
}

function TerminalControl() {
  const sel = ARCA_AGENTS[1];
  return (
    <div style={{
      width:'100%', height:'100%', background:T_BG, color:T_INK, fontFamily:tMono, fontSize:12,
      display:'grid', gridTemplateRows:'auto 1fr auto'
    }}>
      <style>{`@keyframes tpulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes tcaret2{0%,49%{opacity:1}50%,100%{opacity:0}} .tcaret2{animation:tcaret2 1s steps(1) infinite}`}</style>

      <div style={{
        display:'grid', gridTemplateColumns:'auto 1fr auto', alignItems:'center',
        borderBottom:`1px solid ${T_LINE2}`, padding:'6px 12px', gap:14,
        background:'linear-gradient(180deg,#151412,#0d0c0b)'
      }}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:18, height:18, border:`1px solid ${T_AMBER}`, display:'grid',placeItems:'center', color:T_AMBER, fontSize:11, fontWeight:700}}>A</div>
          <div style={{color:T_AMBER, fontWeight:700, letterSpacing:'0.26em', fontSize:12}}>ARCA · TERMINAL/77</div>
          <div style={{color:T_DIM, fontSize:10, letterSpacing:'0.14em'}}>v2.0 · CONTROL</div>
        </div>
        <div style={{display:'flex', gap:18, fontSize:10.5, color:T_DIM, justifyContent:'center'}}>
          {['F1 MONITOR','F2 CONTROL','F3 MEMORY','F4 SKILLS','F5 TASKS','F6 SESSIONS','F7 TOOLS','F8 COSTS'].map((x,i)=>(
            <span key={i} style={{color: i===1?T_AMBER:T_DIM}}>{x}</span>
          ))}
        </div>
        <div style={{display:'flex',gap:10, fontSize:10.5, color:T_AMBER2}}>
          <span style={{color:T_RED}}>● RESTRICTED MODE</span>
          <span>{ARCA_NOW}</span>
        </div>
      </div>

      <div style={{
        display:'grid',
        gridTemplateColumns:'280px 1fr 340px',
        gridTemplateRows:'auto 1fr',
        gap:1, background:T_LINE2, padding:1, minHeight:0
      }}>
        <TermBox title="FLEET · select" right={`${ARCA_AGENTS.length}`} style={{gridRow:'1 / span 2'}} pad={0}>
          <div style={{overflow:'auto'}}>
          {ARCA_AGENTS.map((a)=>(
            <div key={a.id} style={{
              padding:'8px 10px', borderBottom:`1px solid ${T_LINE}`, cursor:'pointer',
              background: a.id===sel.id ? '#1a150b' : 'transparent',
              borderLeft: a.id===sel.id ? `2px solid ${T_AMBER}` : '2px solid transparent'
            }}>
              <div style={{display:'flex', alignItems:'center', gap:6}}>
                <Dot c={AGENT_STATE_COLOR[a.state]} pulse={a.state==='thinking'}/>
                <span style={{color: a.role==='orchestrator'?T_AMBER:T_INK, fontWeight:a.role==='orchestrator'?700:500}}>
                  {a.role==='orchestrator' && '▸ '}{a.name}
                </span>
              </div>
              <div style={{color:T_DIM, fontSize:9.5, marginTop:2, paddingLeft:14}}>
                {a.state} · pid {a.pid??'—'} · {a.model}
              </div>
            </div>
          ))}
          <div style={{padding:10, borderTop:`1px solid ${T_LINE2}`}}>
            <button style={{
              width:'100%', padding:'8px', border:`1px dashed ${T_AMBER}`, background:'transparent',
              color:T_AMBER, fontFamily:tMono, fontSize:11, letterSpacing:'0.14em', cursor:'pointer'
            }}>+ SPAWN NEW AGENT  {kbd('N')}</button>
          </div>
          </div>
        </TermBox>

        <div style={{display:'grid', gridTemplateRows:'auto auto 1fr', gap:1, background:T_LINE2, minHeight:0}}>
          <TermBox title={`AGENT · ${sel.name}`} right={`pid ${sel.pid??'—'} · ${sel.started}`}>
            <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10, marginBottom:10}}>
              {[
                ['ROLE',sel.role,T_AMBER],
                ['STATE',sel.state,AGENT_STATE_COLOR[sel.state]],
                ['MODEL',sel.model,T_TEAL],
                ['SESSION',sel.session,T_MAG],
                ['TURNS',sel.turns.toLocaleString(),T_INK],
                ['IN',sel.tokensIn.toLocaleString(),T_INK],
                ['OUT',sel.tokensOut.toLocaleString(),T_INK],
                ['SPEND',`$${sel.spend.toFixed(2)}`,T_AMBER],
              ].map(([k,v,c])=>(
                <div key={k} style={{borderLeft:`2px solid ${c}`, paddingLeft:8}}>
                  <div style={{fontSize:9.5, color:T_DIM, letterSpacing:'0.14em'}}>{k}</div>
                  <div style={{color:c, fontSize:14, fontWeight:600}}>{v}</div>
                </div>
              ))}
            </div>

            <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
              {[
                ['▶ RESUME',T_GREEN,'R'],
                ['⏸ PAUSE',T_AMBER,'P'],
                ['■ KILL',T_RED,'K'],
                ['↻ RESTART',T_TEAL,'T'],
                ['⇄ REASSIGN',T_MAG,'A'],
                ['◉ ATTACH',T_INK,'⏎'],
                ['✎ EDIT PROMPT',T_AMBER2,'E'],
                ['↓ EXPORT LOG',T_DIM,'X'],
              ].map(([l,c,k])=>(
                <button key={l} style={{
                  padding:'6px 10px', border:`1px solid ${T_LINE2}`, background:'transparent',
                  color:c, fontFamily:tMono, fontSize:11, letterSpacing:'0.1em', cursor:'pointer',
                  display:'flex', alignItems:'center', gap:8
                }}>{l}{kbd(k)}</button>
              ))}
            </div>
          </TermBox>

          <TermBox title="SPAWN · new agent" right="/spawn --role=subagent">
            <div style={{display:'grid', gridTemplateColumns:'160px 1fr', gap:8, fontSize:11}}>
              <div style={{color:T_DIM}}>NAME</div>
              <div style={{borderBottom:`1px solid ${T_LINE2}`, padding:'2px 0', color:T_AMBER}}>journal-auditor<span className="tcaret2" style={{color:T_AMBER}}>▮</span></div>
              <div style={{color:T_DIM}}>ROLE</div>
              <div style={{padding:'2px 0'}}>
                {['orchestrator','subagent','scheduled','ephemeral'].map((r,i)=>(
                  <span key={r} style={{
                    padding:'2px 8px', marginRight:4, border:`1px solid ${i===1?T_AMBER:T_LINE2}`,
                    color: i===1?T_AMBER:T_DIM, background: i===1?'#1a150b':'transparent'
                  }}>{r}</span>
                ))}
              </div>
              <div style={{color:T_DIM}}>MODEL</div>
              <div style={{padding:'2px 0'}}>
                {['sonnet-4.6','haiku-4.5','opus-4.1'].map((m,i)=>(
                  <span key={m} style={{
                    padding:'2px 8px', marginRight:4, border:`1px solid ${i===1?T_AMBER:T_LINE2}`,
                    color: i===1?T_AMBER:T_DIM, background: i===1?'#1a150b':'transparent'
                  }}>{m}</span>
                ))}
              </div>
              <div style={{color:T_DIM}}>SKILLS</div>
              <div style={{padding:'2px 0', display:'flex', gap:4, flexWrap:'wrap'}}>
                {ARCA_SKILLS.map((s,i)=>(
                  <span key={s.file} style={{
                    padding:'2px 8px', border:`1px solid ${[0,3].includes(i)?T_TEAL:T_LINE2}`,
                    color:[0,3].includes(i)?T_TEAL:T_DIM
                  }}>{[0,3].includes(i)?'✓ ':''}{s.file.replace('.md','')}</span>
                ))}
              </div>
              <div style={{color:T_DIM}}>MAX TURNS</div>
              <div style={{padding:'2px 0', color:T_INK}}>10 <span style={{color:T_MUTED}}>· budget $0.50 · timeout 120s</span></div>
              <div style={{color:T_DIM}}>ALLOWED TOOLS</div>
              <div style={{padding:'2px 0', color:T_TEAL, fontSize:10.5}}>Read, Grep, mcp__arca__search_memory <span style={{color:T_MUTED}}>(Bash/Write gated)</span></div>
              <div style={{color:T_DIM}}>SEED PROMPT</div>
              <div style={{padding:'6px 8px', border:`1px dashed ${T_LINE2}`, color:T_INK, fontSize:10.5, lineHeight:1.5}}>
                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 style={{marginTop:12, display:'flex', gap:6}}>
              <button style={{padding:'8px 16px', background:T_AMBER, color:T_BG, border:'none', fontFamily:tMono, fontWeight:700, letterSpacing:'0.14em', fontSize:11, cursor:'pointer'}}>▶ SPAWN {kbd('⏎')}</button>
              <button style={{padding:'8px 16px', background:'transparent', color:T_DIM, border:`1px solid ${T_LINE2}`, fontFamily:tMono, fontSize:11, letterSpacing:'0.14em', cursor:'pointer'}}>DRY-RUN {kbd('⌘↵')}</button>
              <button style={{padding:'8px 16px', background:'transparent', color:T_DIM, border:`1px solid ${T_LINE2}`, fontFamily:tMono, fontSize:11, letterSpacing:'0.14em', cursor:'pointer'}}>SAVE TEMPLATE</button>
            </div>
          </TermBox>

          <TermBox title="AGENT LOG · tail" right={`${sel.name} · stderr/stdout`}>
            {[
              ['14:07:33','info','turn 12 begin'],
              ['14:07:33','tool','Read(/home/odin/deck-calc/joist.py) → 412 lines · 38ms'],
              ['14:07:34','tool','Bash(pytest deck-calc/tests/test_joist.py -q) → 14 passed · 1820ms'],
              ['14:07:36','think','tests pass. cross-check snow load vs ASCE 7-22 §7.3'],
              ['14:07:37','tool','Grep(pg\\s*=, deck-calc/) → 3 matches · 22ms'],
              ['14:07:38','tool','mcp__arca__search_memory("ASCE 7-22") → 2 hits · 14ms'],
              ['14:07:38','spawn','↳ structural-eng pid 29118'],
              ['14:07:39','recv','structural-eng → formula matches §7.3.4'],
              ['14:07:40','emit','streaming response to web channel s-4819'],
            ].map((r,i)=>(
              <div key={i} style={{display:'grid',gridTemplateColumns:'56px 46px 1fr', fontSize:10.5, gap:6, padding:'2px 0'}}>
                <span style={{color:T_MUTED}}>{r[0]}</span>
                <span style={{color: r[1]==='tool'?T_TEAL : r[1]==='think'?T_AMBER : r[1]==='spawn'?T_MAG : r[1]==='recv'?T_GREEN : T_DIM}}>{r[1]}</span>
                <span style={{color:T_INK}}>{r[2]}</span>
              </div>
            ))}
          </TermBox>
        </div>

        <div style={{display:'grid', gridTemplateRows:'auto auto auto 1fr', gap:1, background:T_LINE2, minHeight:0}}>
          <TermBox title="SOUL.md · edit" right="2857b · diff 0">
            <div style={{fontSize:10.5, color:T_DIM, marginBottom:6}}>## Rules</div>
            {[
              'Never execute destructive commands without confirmation',
              'Always show reasoning before taking action',
              'When unsure, ask — don\'t guess',
              'Prefer Python for scripting, plain JS for frontend',
            ].map((r,i)=>(
              <div key={i} style={{fontSize:10.5, color:T_INK, padding:'1px 0'}}>
                <span style={{color:T_AMBER2}}>- </span>{r}
              </div>
            ))}
            <div style={{display:'flex', gap:6, marginTop:8}}>
              <button style={{padding:'4px 10px', background:T_AMBER, color:T_BG, border:'none', fontFamily:tMono, fontSize:10, fontWeight:700, cursor:'pointer'}}>SAVE</button>
              <button style={{padding:'4px 10px', background:'transparent', color:T_DIM, border:`1px solid ${T_LINE2}`, fontFamily:tMono, fontSize:10, cursor:'pointer'}}>DIFF</button>
              <button style={{padding:'4px 10px', background:'transparent', color:T_DIM, border:`1px solid ${T_LINE2}`, fontFamily:tMono, fontSize:10, cursor:'pointer'}}>OPEN FULL</button>
            </div>
          </TermBox>

          <TermBox title="MEMORY · facts.md">
            {ARCA_MEMORY.facts.slice(0,5).map((f,i)=>(
              <div key={i} style={{display:'grid',gridTemplateColumns:'64px 1fr', gap:6, fontSize:10.5, padding:'2px 0', borderBottom:`1px dotted ${T_LINE}`}}>
                <span style={{color:T_MUTED}}>{f.t.slice(5)}</span>
                <span style={{color:T_INK}}>{f.line}</span>
              </div>
            ))}
            <div style={{color:T_MUTED, fontSize:10, marginTop:6}}>… 3 more · 8 total · 214 tok</div>
          </TermBox>

          <TermBox title="SKILLS · registry">
            {ARCA_SKILLS.map(s=>(
              <div key={s.file} style={{display:'grid',gridTemplateColumns:'1fr auto', fontSize:10.5, padding:'2px 0', borderBottom:`1px dotted ${T_LINE}`}}>
                <span style={{color:T_AMBER}}>{s.file}</span>
                <span style={{color:T_TEAL}}>{s.matches24h}× · {Math.round(s.hitRate*100)}%</span>
              </div>
            ))}
          </TermBox>

          <TermBox title="DANGER ZONE" right="destructive">
            <div style={{display:'grid', gap:6}}>
              {[
                ['KILL ALL SUBAGENTS', T_RED, '6 processes'],
                ['WIPE JOURNAL TAIL (7d)', T_AMBER, '14 entries'],
                ['REBUILD PROMPT CACHE', T_TEAL, 'clears 4k tokens'],
                ['ROTATE API KEY', T_MAG, 'requires re-auth'],
              ].map(([l,c,sub])=>(
                <div key={l} style={{border:`1px solid ${T_LINE2}`, padding:'6px 8px', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                  <div>
                    <div style={{color:c, fontSize:11, letterSpacing:'0.1em'}}>{l}</div>
                    <div style={{color:T_MUTED, fontSize:9.5}}>{sub}</div>
                  </div>
                  <button style={{padding:'4px 10px', background:'transparent', color:c, border:`1px solid ${c}`, fontFamily:tMono, fontSize:10, cursor:'pointer'}}>EXEC</button>
                </div>
              ))}
            </div>
          </TermBox>
        </div>
      </div>

      <div style={{
        display:'grid', gridTemplateColumns:'1fr auto auto auto auto 1fr', gap:16,
        padding:'4px 12px', borderTop:`1px solid ${T_LINE2}`, background:'#0a0908',
        fontSize:10, color:T_DIM, alignItems:'center'
      }}>
        <span>selected: {sel.name} · pid {sel.pid??'—'} · turns {sel.turns}</span>
        {kbd('R resume')} {kbd('K kill')} {kbd('N spawn')} {kbd('Esc deselect')}
        <span style={{textAlign:'right', color:T_AMBER2}}>permissionMode: acceptEdits · max-turns 10</span>
      </div>
    </div>
  );
}

Object.assign(window, { TerminalMonitor, TerminalControl });