// V2 — ARCA BLUEPRINT (Terminal/77 restyle)
// Layout + content unchanged from the engineer's-drafting-table direction —
// same sheet frames, title blocks, dimension lines, stamps, general notes —
// but rendered in Terminal/77's ink+amber palette with JetBrains Mono.

// Palette now maps 1:1 onto Terminal/77 tokens
const B_PAPER   = '#0b0b0c'; // T_BG
const B_PAPER2  = '#141311'; // inset well
const B_INK     = '#e8b44a'; // T_AMBER — was ink, now amber rules
const B_INK2    = '#b6863a'; // T_AMBER2
const B_RULE    = '#6f6a5f'; // T_DIM
const B_GRID    = 'rgba(232,180,74,0.06)';
const B_GRID2   = 'rgba(232,180,74,0.14)';
const B_RED     = '#ff5548'; // T_RED
const B_BLUE    = '#4fd1c5'; // T_TEAL (blueprints → CRT teal)
const B_MUSTARD = '#e8b44a'; // amber
const B_GREEN   = '#7fd67f';
const B_INKTEXT = '#e6d8b8'; // T_INK — body text color

const bSans = '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace';
const bMono = '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace';
const bSerif = '"JetBrains Mono", ui-monospace, monospace';

function SheetFrame({ sheetNo, title, rev, children, stamps=[] }) {
  return (
    <div style={{
      width:'100%', height:'100%', background:B_PAPER, color:B_INKTEXT,
      fontFamily:bSans, position:'relative', overflow:'hidden',
      backgroundImage:`
        linear-gradient(${B_GRID} 1px, transparent 1px),
        linear-gradient(90deg, ${B_GRID} 1px, transparent 1px),
        linear-gradient(${B_GRID2} 1px, transparent 1px),
        linear-gradient(90deg, ${B_GRID2} 1px, transparent 1px)
      `,
      backgroundSize:'20px 20px, 20px 20px, 100px 100px, 100px 100px'
    }}>
      {/* Outer border */}
      <div style={{position:'absolute', inset:18, border:`2px solid ${B_INK}`, pointerEvents:'none'}}/>
      <div style={{position:'absolute', inset:24, border:`0.5px solid ${B_INK}`, pointerEvents:'none'}}/>

      {/* Corner tick marks (ruler) */}
      {[0,1,2,3,4,5,6,7,8,9].map(i=>(
        <React.Fragment key={i}>
          <div style={{position:'absolute', top:18, left:24+i*150, width:1, height:6, background:B_INK}}/>
          <div style={{position:'absolute', top:18, left:24+i*150, color:B_RULE, fontSize:8, fontFamily:bMono, transform:'translate(-50%, -10px)'}}>{i*4}'</div>
          <div style={{position:'absolute', left:18, top:60+i*100, width:6, height:1, background:B_INK}}/>
        </React.Fragment>
      ))}

      {/* Title block - bottom right */}
      <div style={{
        position:'absolute', right:24, bottom:24, width:460, borderTop:`2px solid ${B_INK}`, borderLeft:`2px solid ${B_INK}`,
        background:B_PAPER, display:'grid', gridTemplateColumns:'1fr 90px 90px',
        fontFamily:bMono, fontSize:9.5, zIndex:5
      }}>
        <div style={{padding:'6px 10px', borderRight:`1px solid ${B_INK2}`, borderBottom:`1px solid ${B_INK2}`}}>
          <div style={{fontSize:7.5, color:B_RULE, letterSpacing:'0.18em'}}>PROJECT</div>
          <div style={{fontFamily:bMono, fontSize:12, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500}}>Arca / ArcaClaw</div>
          <div style={{fontSize:8.5, color:B_INK2}}>Personal Agent Platform · Barron Engineering</div>
        </div>
        <div style={{padding:'6px 8px', borderRight:`1px solid ${B_INK2}`, borderBottom:`1px solid ${B_INK2}`, textAlign:'center'}}>
          <div style={{fontSize:7.5, color:B_RULE, letterSpacing:'0.18em'}}>SHEET</div>
          <div style={{fontSize:22, fontWeight:600, fontFamily:bSerif}}>{sheetNo}</div>
        </div>
        <div style={{padding:'6px 8px', borderBottom:`1px solid ${B_INK2}`, textAlign:'center'}}>
          <div style={{fontSize:7.5, color:B_RULE, letterSpacing:'0.18em'}}>REV</div>
          <div style={{fontSize:22, fontWeight:600, fontFamily:bSerif, color:B_RED}}>{rev}</div>
        </div>
        <div style={{padding:'4px 10px', gridColumn:'1 / span 3', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', fontSize:8.5}}>
          <div><span style={{color:B_RULE}}>DRAWN</span> D.B.</div>
          <div><span style={{color:B_RULE}}>DATE</span> 2026-04-22</div>
          <div><span style={{color:B_RULE}}>SCALE</span> 1"=1'-0"</div>
        </div>
      </div>

      {/* Revision stamps */}
      {stamps.map((s, i)=>(
        <div key={i} style={{
          position:'absolute', ...s.pos,
          padding:'4px 10px', border:`2px solid ${s.color||B_RED}`, color:s.color||B_RED,
          fontFamily:bMono, fontSize:10, letterSpacing:'0.16em', fontWeight:700,
          transform:`rotate(${s.rot||-4}deg)`, background:'rgba(11,11,12,0.88)',
          zIndex:6
        }}>{s.text}</div>
      ))}

      {/* Sheet title */}
      <div style={{position:'absolute', top:32, left:48, zIndex:4}}>
        <div style={{fontFamily:bMono, fontSize:9.5, color:B_RULE, letterSpacing:'0.24em'}}>SHEET {sheetNo} · REV {rev}</div>
        <div style={{fontFamily:bMono, fontSize:34, lineHeight:1, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500}}>{title}</div>
      </div>

      {/* Content area */}
      <div style={{position:'absolute', top:110, left:40, right:40, bottom:130, zIndex:3}}>
        {children}
      </div>
    </div>
  );
}

function BNote({ children, style, rot }) {
  return (
    <div style={{
      fontFamily:bMono, fontSize:10, color:B_INK2, letterSpacing:'0.04em',
      textTransform:'uppercase', ...style,
      transform: rot?`rotate(${rot}deg)`:'none'
    }}>{children}</div>
  );
}

// Dimension line — double-headed arrow with measurement
function DimLine({ x1, y1, x2, y2, label, above=true }) {
  const horiz = y1===y2;
  const mx = (x1+x2)/2, my = (y1+y2)/2;
  return (
    <svg style={{position:'absolute', inset:0, pointerEvents:'none', overflow:'visible'}}>
      <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={B_INK} strokeWidth={0.7}/>
      {horiz ? (<>
        <line x1={x1} y1={y1-4} x2={x1} y2={y1+4} stroke={B_INK} strokeWidth={0.7}/>
        <line x1={x2} y1={y2-4} x2={x2} y2={y2+4} stroke={B_INK} strokeWidth={0.7}/>
        <polygon points={`${x1},${y1} ${x1+6},${y1-3} ${x1+6},${y1+3}`} fill={B_INK}/>
        <polygon points={`${x2},${y2} ${x2-6},${y2-3} ${x2-6},${y2+3}`} fill={B_INK}/>
      </>) : (<>
        <line x1={x1-4} y1={y1} x2={x1+4} y2={y1} stroke={B_INK} strokeWidth={0.7}/>
        <line x1={x2-4} y1={y2} x2={x2+4} y2={y2} stroke={B_INK} strokeWidth={0.7}/>
      </>)}
      <text x={mx} y={horiz ? (above?my-5:my+11) : my} textAnchor="middle"
        style={{fontFamily:bMono, fontSize:9, fill:B_INK, letterSpacing:'0.05em'}}>{label}</text>
    </svg>
  );
}

// ── MONITOR — SHEET A-01 ────────────────────────────────────
function BlueprintMonitor() {
  // Agent tree node positions
  const nodes = {
    'arca-0': {x:330, y:120, w:180, h:78, label:'arca', role:'ORCHESTRATOR', state:'thinking'},
    'arca-1': {x:80,  y:280, w:150, h:66, label:'code-reviewer',  role:'SUBAGENT',   state:'tool-call'},
    'arca-2': {x:250, y:280, w:150, h:66, label:'research-scout', role:'SUBAGENT',   state:'streaming'},
    'arca-3': {x:420, y:280, w:150, h:66, label:'structural-eng', role:'SUBAGENT',   state:'idle'},
    'arca-4': {x:590, y:280, w:150, h:66, label:'sysadmin-probe', role:'SUBAGENT',   state:'paused'},
  };

  return (
    <SheetFrame sheetNo="A-01" title="Agent Fleet · Plan View" rev="04" stamps={[
      {text:'AS-BUILT · 14:07 EDT', pos:{top:50, right:220}, rot:-3, color:B_RED},
      {text:'LIVE · T-00042', pos:{top:80, right:140}, rot:2, color:B_BLUE},
    ]}>
      <div style={{display:'grid', gridTemplateColumns:'820px 1fr', gap:28, height:'100%'}}>

        {/* DRAWING — agent fleet */}
        <div style={{position:'relative', border:`1.5px solid ${B_INK}`, background:B_PAPER2}}>
          <div style={{position:'absolute', top:8, left:10, fontFamily:bMono, fontSize:10, letterSpacing:'0.16em', color:B_RULE}}>
            1/ PLAN — FLEET TOPOLOGY · SCALE 1:1
          </div>
          <div style={{position:'absolute', top:8, right:10, fontFamily:bMono, fontSize:10, color:B_RULE}}>
            N ↑ · GRID A–H / 1–6
          </div>

          {/* Column/row letters */}
          {['A','B','C','D','E','F','G','H'].map((c,i)=>(
            <div key={c} style={{position:'absolute', top:26, left:56+i*90, fontFamily:bMono, fontSize:10, color:B_RULE, width:20, textAlign:'center'}}>{c}</div>
          ))}
          {[1,2,3,4,5].map(r=>(
            <div key={r} style={{position:'absolute', left:14, top:52+r*70, fontFamily:bMono, fontSize:10, color:B_RULE}}>{r}</div>
          ))}

          {/* Connection lines — orchestrator → subagents */}
          <svg style={{position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none'}}>
            <defs>
              <marker id="arrHead" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                <path d="M0,0 L10,5 L0,10 Z" fill={B_INK}/>
              </marker>
              <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
                <line x1="0" y1="0" x2="0" y2="6" stroke={B_INK} strokeWidth="0.6"/>
              </pattern>
            </defs>
            {['arca-1','arca-2','arca-3','arca-4'].map(id=>{
              const p = nodes['arca-0'], c = nodes[id];
              const x1 = p.x+p.w/2, y1 = p.y+p.h, x2 = c.x+c.w/2, y2 = c.y;
              const dash = nodes[id].state==='paused' ? '4 4' : nodes[id].state==='idle' ? '2 3' : '0';
              const color = nodes[id].state==='tool-call'?B_BLUE:nodes[id].state==='streaming'?B_GREEN:nodes[id].state==='paused'?B_RULE:B_INK;
              return (
                <g key={id}>
                  <path d={`M${x1},${y1} C${x1},${y1+40} ${x2},${y2-40} ${x2},${y2}`} fill="none" stroke={color} strokeWidth={1.2} strokeDasharray={dash} markerEnd="url(#arrHead)"/>
                  <text x={(x1+x2)/2} y={(y1+y2)/2} textAnchor="middle" style={{fontFamily:bMono, fontSize:8.5, fill:color, letterSpacing:'0.05em'}} dy={-2}>
                    {nodes[id].state.toUpperCase()}
                  </text>
                </g>
              );
            })}
            {/* center axis */}
            <line x1={nodes['arca-0'].x+nodes['arca-0'].w/2} y1={60} x2={nodes['arca-0'].x+nodes['arca-0'].w/2} y2={120} stroke={B_RED} strokeWidth={0.7} strokeDasharray="2 2"/>
            <text x={nodes['arca-0'].x+nodes['arca-0'].w/2} y={54} textAnchor="middle" style={{fontFamily:bMono, fontSize:9, fill:B_RED}}>CH. WEB · s-4819</text>
          </svg>

          {/* Nodes */}
          {Object.entries(nodes).map(([id, n])=>{
            const agent = ARCA_AGENTS.find(a=>a.id===id);
            const isOrch = agent.role==='orchestrator';
            return (
              <div key={id} style={{
                position:'absolute', left:n.x, top:n.y, width:n.w, height:n.h,
                border:`${isOrch?2:1.2}px solid ${B_INK}`, background:B_PAPER,
                boxShadow: isOrch? `3px 3px 0 ${B_INK}` : 'none',
                padding:'6px 8px', display:'flex', flexDirection:'column', justifyContent:'space-between'
              }}>
                {/* corner marks */}
                {[[0,0,'ne-start'],[1,0,'ne-end'],[0,1,'sw-start'],[1,1,'sw-end']].map(([x,y],i)=>(
                  <div key={i} style={{position:'absolute', [x?'right':'left']:-3, [y?'bottom':'top']:-3, width:6, height:6, background:B_INK}}/>
                ))}
                <div style={{display:'flex', justifyContent:'space-between'}}>
                  <span style={{fontFamily:bMono, fontSize:8, color:B_RULE, letterSpacing:'0.16em'}}>{n.role} · {id.toUpperCase()}</span>
                  <span style={{fontFamily:bMono, fontSize:8, color:B_RED}}>REV {isOrch?'04':'01'}</span>
                </div>
                <div style={{fontFamily:bSerif, fontSize:isOrch?22:18, fontStyle:'italic', lineHeight:1}}>{n.label}</div>
                <div style={{display:'flex', justifyContent:'space-between', fontFamily:bMono, fontSize:8.5, color:B_INK2}}>
                  <span>{agent.state}</span>
                  <span>pid {agent.pid??'—'}</span>
                  <span>{agent.model}</span>
                </div>
              </div>
            );
          })}

          {/* Dimension lines */}
          <DimLine x1={80} y1={370} x2={740} y2={370} label='6 SUBAGENTS · 660 px · "fleet width"'/>
          <DimLine x1={330} y1={198} x2={330} y2={280} label='SPAWN LATENCY · 12ms' above={false}/>

          {/* Agentic loop — section below drawing */}
          <div style={{position:'absolute', bottom:14, left:14, right:14, borderTop:`1px solid ${B_INK}`, paddingTop:10}}>
            <div style={{display:'flex', justifyContent:'space-between', marginBottom:8}}>
              <span style={{fontFamily:bMono, fontSize:10, letterSpacing:'0.16em', color:B_RULE}}>2/ SECTION — AGENTIC LOOP (CURRENT TURN t-00042)</span>
              <span style={{fontFamily:bMono, fontSize:9, color:B_RED}}>●◌◌◌◌◌◌◌ ELAPSED 4.21s / 60s</span>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(8, 1fr)', gap:4, position:'relative'}}>
              {[
                {k:'PROMPT',t:'+0.00',label:'user input'},
                {k:'SYS',t:'+0.02',label:'assemble system'},
                {k:'THINK',t:'+0.12',label:'plan'},
                {k:'TOOL',t:'+0.41',label:'Read'},
                {k:'TOOL',t:'+0.89',label:'Bash'},
                {k:'THINK',t:'+2.74',label:'analyze'},
                {k:'SPAWN',t:'+3.78',label:'structural-eng'},
                {k:'STREAM',t:'+4.18',label:'respond', active:true},
              ].map((s,i)=>(
                <div key={i} style={{
                  border:`1px solid ${B_INK}`, padding:'5px 6px', background: s.active ? `${B_INK}22` : B_PAPER,
                  boxShadow: s.active? `2px 2px 0 ${B_RED}` : 'none'
                }}>
                  <div style={{fontFamily:bMono, fontSize:8, color:B_RULE}}>{s.t}s</div>
                  <div style={{fontFamily:bMono, fontSize:9, color:B_INK, letterSpacing:'0.08em'}}>{s.k}</div>
                  <div style={{fontFamily:bMono, fontSize:10, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500}}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* SIDE — detail + annotations */}
        <div style={{display:'grid', gridTemplateRows:'auto auto auto 1fr', gap:18}}>

          {/* Detail callout — orchestrator */}
          <div style={{border:`1.5px solid ${B_INK}`, padding:14, background:B_PAPER2}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:6}}>
              <BNote>DETAIL 1 / A-01 · orchestrator</BNote>
              <BNote style={{color:B_RED}}>REV 04</BNote>
            </div>
            <div style={{fontFamily:bMono, fontSize:17, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500, lineHeight:1}}>arca</div>
            <div style={{fontFamily:bMono, fontSize:10, color:B_INK2, marginBottom:10}}>session s-4819 · turn #4817 · 72h 14m uptime</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6, fontFamily:bMono, fontSize:10}}>
              {[
                ['model','sonnet-4.6'],
                ['state','thinking'],
                ['pid','28471'],
                ['channel','web :7777'],
                ['tokens in','1.28M'],
                ['tokens out','312k'],
                ['spend · 24h','$12.41'],
                ['max-turns','50'],
              ].map(([k,v])=>(
                <div key={k} style={{display:'flex', justifyContent:'space-between', borderBottom:`1px dotted ${B_INK2}`, padding:'2px 0'}}>
                  <span style={{color:B_RULE}}>{k}</span><span>{v}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Token budget — as load diagram */}
          <div style={{border:`1.5px solid ${B_INK}`, padding:14}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <BNote>DETAIL 2 / A-01 · context load</BNote>
              <BNote>{ARCA_PROMPT.totalTokens} / {ARCA_PROMPT.budget} TOK</BNote>
            </div>
            <div style={{fontFamily:bMono, fontSize:14, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500, margin:'2px 0 8px'}}>System prompt composition</div>
            <div style={{display:'flex', height:24, border:`1.2px solid ${B_INK}`, marginBottom:8}}>
              {ARCA_PROMPT.sections.map((s,i)=>{
                const pct = s.tokens/ARCA_PROMPT.totalTokens;
                const fill = s.k==='soul'? `url(#hatch)`: s.k==='skill'? B_MUSTARD : s.k==='journal'?B_BLUE: s.k==='facts'? B_GREEN : B_PAPER2;
                return (
                  <div key={i} style={{flex:pct, borderRight: i<ARCA_PROMPT.sections.length-1?`1px solid ${B_INK}`:'none', background: s.k==='soul'?B_INK:fill, color:s.k==='soul'?B_PAPER:B_INK, display:'grid', placeItems:'center', fontFamily:bMono, fontSize:9}}>
                    {s.tokens}
                  </div>
                );
              })}
            </div>
            {ARCA_PROMPT.sections.map((s,i)=>(
              <div key={i} style={{display:'grid', gridTemplateColumns:'10px 1fr auto', fontFamily:bMono, fontSize:9.5, padding:'2px 0', gap:6}}>
                <span style={{color: s.k==='soul'?B_INK:s.k==='skill'?B_MUSTARD:s.k==='journal'?B_BLUE:s.k==='facts'?B_GREEN:B_RULE}}>■</span>
                <span>{s.label}</span>
                <span>{s.tokens} tok</span>
              </div>
            ))}
          </div>

          {/* Channels */}
          <div style={{border:`1.5px solid ${B_INK}`, padding:14}}>
            <BNote style={{marginBottom:6}}>SCHEDULE OF CHANNELS · DETAIL 3</BNote>
            <div style={{display:'grid', gridTemplateColumns:'auto 1fr auto', gap:6, fontFamily:bMono, fontSize:10}}>
              {ARCA_CHANNELS.map(c=>(
                <React.Fragment key={c.id}>
                  <span style={{textTransform:'uppercase', letterSpacing:'0.1em'}}>◆ {c.id}</span>
                  <span style={{color:B_INK2}}>{c.bind}</span>
                  <span style={{color:B_GREEN}}>{c.sessions}s · {c.latencyMs}ms</span>
                </React.Fragment>
              ))}
            </div>
          </div>

          {/* Cost as load schedule */}
          <div style={{border:`1.5px solid ${B_INK}`, padding:14}}>
            <BNote style={{marginBottom:6}}>SCHEDULE OF LOADS · cost · 24h</BNote>
            <div style={{display:'flex', alignItems:'flex-end', gap:2, height:60, padding:'4px 0', borderBottom:`1px solid ${B_INK}`}}>
              {ARCA_BURN_24H.map((v,i)=>{
                const max = Math.max(...ARCA_BURN_24H);
                return <div key={i} style={{flex:1, height:`${(v/max)*100}%`, background: i===ARCA_BURN_24H.length-1?B_RED:B_INK}}/>;
              })}
            </div>
            <div style={{display:'flex', justifyContent:'space-between', fontFamily:bMono, fontSize:8.5, color:B_RULE, padding:'2px 0'}}>
              <span>-24h</span><span>-12h</span><span>NOW</span>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:6, marginTop:8, fontFamily:bMono, fontSize:10}}>
              <div><div style={{color:B_RULE, fontSize:8.5}}>TODAY</div><div style={{fontSize:18, fontFamily:bMono, color:B_INK, fontWeight:600}}>${ARCA_COSTS.today}</div></div>
              <div><div style={{color:B_RULE, fontSize:8.5}}>WEEK</div><div style={{fontSize:18, fontFamily:bMono, color:B_INK, fontWeight:600}}>${ARCA_COSTS.week}</div></div>
              <div><div style={{color:B_RULE, fontSize:8.5}}>MONTH</div><div style={{fontSize:18, fontFamily:bMono, color:B_RED, fontWeight:600}}>${ARCA_COSTS.month}</div></div>
            </div>
          </div>
        </div>
      </div>

      {/* GENERAL NOTES strip above title block */}
      <div style={{position:'absolute', left:40, right:510, bottom:24, height:90, border:`1.5px solid ${B_INK}`, padding:'6px 10px', background:B_PAPER2, fontFamily:bMono, fontSize:9, zIndex:5}}>
        <div style={{fontSize:9, color:B_RULE, letterSpacing:'0.18em', marginBottom:4}}>GENERAL NOTES · SHEET A-01</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'2px 16px', lineHeight:1.3}}>
          <div>1. All agents inherit <b>soul.md</b> (2857b). Subagents receive scoped permissions only.</div>
          <div>2. Spawn latency target ≤ 50 ms (actual: 12 ms). See detail 1/A-01.</div>
          <div>3. Orchestrator budget: 50 turns/session, $20/day hard cap, acceptEdits mode.</div>
          <div>4. Subagents: max 10 turns, $0.50/spawn, read-only unless explicitly promoted.</div>
          <div>5. Scheduled tasks see A-02/Sh. Daily journal writes to <b>memory/journal.md</b> @ 22:00.</div>
          <div>6. All tool calls logged to ring buffer (1024 entries) · see Tool Audit, A-02.</div>
        </div>
      </div>
    </SheetFrame>
  );
}

// ── CONTROL — SHEET A-02 ────────────────────────────────────
function BlueprintControl() {
  return (
    <SheetFrame sheetNo="A-02" title="Configuration · Spawn & Permissions" rev="04" stamps={[
      {text:'ISSUED FOR CONSTRUCTION', pos:{top:58, right:200}, rot:-3, color:B_RED},
    ]}>
      <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr 1fr', gap:18, height:'100%'}}>

        {/* LEFT — spawn form as spec sheet */}
        <div style={{border:`1.5px solid ${B_INK}`, padding:16, position:'relative'}}>
          <BNote>SPECIFICATION · SPAWN SUBAGENT</BNote>
          <div style={{fontFamily:bMono, fontSize:23, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500, lineHeight:1, margin:'4px 0 14px'}}>Agent spec sheet</div>

          <table style={{width:'100%', fontFamily:bMono, fontSize:10.5, borderCollapse:'collapse'}}>
            <tbody>
              {[
                ['§1.1','NAME','journal-auditor',{edit:true}],
                ['§1.2','ROLE','subagent',{select:['orchestrator','subagent','scheduled','ephemeral'], selected:1}],
                ['§1.3','PARENT','arca (orchestrator)',{}],
                ['§2.1','MODEL','claude-sonnet-4-6',{select:['sonnet-4.6','haiku-4.5','opus-4.1'], selected:0}],
                ['§2.2','MAX TURNS','10 / budget $0.50 / timeout 120s',{}],
                ['§2.3','PERMISSION MODE','acceptEdits',{warn:true}],
                ['§3.1','SKILLS','code_review, structural_eng',{multi:true}],
                ['§3.2','TOOLS','Read, Grep, mcp__arca__search_memory',{code:true}],
                ['§3.3','MCP SERVERS','arca-memory, arca-journal',{}],
                ['§4.1','CHANNEL','inherit (web s-4819)',{}],
                ['§4.2','LOG LEVEL','info',{}],
              ].map(([ref, k, v, opts],i)=>(
                <tr key={i} style={{borderBottom:`1px dotted ${B_INK2}`}}>
                  <td style={{color:B_RED, padding:'6px 0', fontSize:9, width:38}}>{ref}</td>
                  <td style={{color:B_RULE, fontSize:9, width:110, letterSpacing:'0.08em'}}>{k}</td>
                  <td style={{padding:'6px 0', color: opts.warn?B_RED:B_INK}}>
                    {opts.code ? <code style={{background:B_PAPER2, padding:'1px 4px'}}>{v}</code> : v}
                    {opts.edit && <span style={{color:B_RED, marginLeft:6}}>✎</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          <div style={{marginTop:14, padding:'8px 10px', border:`1px dashed ${B_INK}`}}>
            <div style={{fontFamily:bMono, fontSize:9, color:B_RULE, letterSpacing:'0.16em', marginBottom:4}}>§5 SEED PROMPT</div>
            <div style={{fontFamily:bMono, fontSize:11, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500, lineHeight:1.4}}>
              "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={{display:'flex', gap:8, marginTop:14}}>
            <button style={{padding:'8px 16px', background:B_INK, color:B_PAPER, border:'none', fontFamily:bMono, fontSize:10.5, letterSpacing:'0.18em', cursor:'pointer'}}>▸ SPAWN</button>
            <button style={{padding:'8px 16px', background:B_PAPER, color:B_INK, border:`1.5px solid ${B_INK}`, fontFamily:bMono, fontSize:10.5, letterSpacing:'0.18em', cursor:'pointer'}}>DRY-RUN</button>
            <button style={{padding:'8px 16px', background:B_PAPER, color:B_INK2, border:`1px solid ${B_INK2}`, fontFamily:bMono, fontSize:10.5, letterSpacing:'0.18em', cursor:'pointer'}}>SAVE AS TEMPLATE</button>
          </div>

          {/* approval stamp */}
          <div style={{
            position:'absolute', right:16, bottom:16, width:140, height:80,
            border:`2px solid ${B_BLUE}`, color:B_BLUE, transform:'rotate(4deg)',
            fontFamily:bMono, padding:'8px 10px'
          }}>
            <div style={{fontSize:9, letterSpacing:'0.16em'}}>APPROVED BY</div>
            <div style={{fontFamily:bMono, fontSize:17, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500, lineHeight:1, margin:'2px 0'}}>D. Barron, PE</div>
            <div style={{fontSize:8, letterSpacing:'0.12em'}}>CT #PE-48219 · 2026-04-22</div>
          </div>
        </div>

        {/* CENTER — skills registry + memory */}
        <div style={{display:'grid', gridTemplateRows:'1fr 1fr', gap:18}}>
          <div style={{border:`1.5px solid ${B_INK}`, padding:14}}>
            <BNote>SCHEDULE · SKILLS REGISTRY</BNote>
            <div style={{fontFamily:bMono, fontSize:17, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500, lineHeight:1, margin:'2px 0 10px'}}>Skills · 5</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr auto auto auto', gap:'4px 10px', fontFamily:bMono, fontSize:10}}>
              <div style={{color:B_RULE, fontSize:8.5, letterSpacing:'0.12em', borderBottom:`1px solid ${B_INK}`, paddingBottom:2}}>FILE</div>
              <div style={{color:B_RULE, fontSize:8.5, letterSpacing:'0.12em', borderBottom:`1px solid ${B_INK}`, paddingBottom:2, textAlign:'right'}}>LINES</div>
              <div style={{color:B_RULE, fontSize:8.5, letterSpacing:'0.12em', borderBottom:`1px solid ${B_INK}`, paddingBottom:2, textAlign:'right'}}>24H</div>
              <div style={{color:B_RULE, fontSize:8.5, letterSpacing:'0.12em', borderBottom:`1px solid ${B_INK}`, paddingBottom:2, textAlign:'right'}}>HIT</div>
              {ARCA_SKILLS.map(s=>(
                <React.Fragment key={s.file}>
                  <div style={{color:B_INK}}>{s.file}</div>
                  <div style={{textAlign:'right', color:B_INK2}}>{s.lines}</div>
                  <div style={{textAlign:'right', color:B_BLUE}}>{s.matches24h}×</div>
                  <div style={{textAlign:'right', color: s.hitRate>0.85?B_GREEN:B_MUSTARD}}>{Math.round(s.hitRate*100)}%</div>
                </React.Fragment>
              ))}
            </div>
            <div style={{marginTop:10, padding:6, background:B_PAPER2, fontFamily:bMono, fontSize:9, color:B_INK2}}>
              TRIGGER KEYWORDS scanned against user prompt; top-K matches load into system.
            </div>
          </div>
          <div style={{border:`1.5px solid ${B_INK}`, padding:14}}>
            <BNote>MEMORY · FACTS & PREFERENCES</BNote>
            <div style={{fontFamily:bMono, fontSize:17, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500, lineHeight:1, margin:'2px 0 10px'}}>memory/*.md</div>
            <div style={{display:'grid', gap:3, fontFamily:bMono, fontSize:9.5}}>
              {ARCA_MEMORY.facts.slice(0,4).map((f,i)=>(
                <div key={i} style={{display:'grid', gridTemplateColumns:'58px 1fr 14px', gap:6, borderBottom:`1px dotted ${B_INK2}`, paddingBottom:2}}>
                  <span style={{color:B_RULE, fontSize:8.5}}>{f.t.slice(5)}</span>
                  <span>{f.line}</span>
                  <span style={{color:B_RED}}>✎</span>
                </div>
              ))}
              <div style={{marginTop:6, color:B_BLUE, fontSize:9}}>+ ADD FACT</div>
              <div style={{color:B_RULE, fontSize:8.5, letterSpacing:'0.12em', marginTop:8}}>PREFERENCES · 7</div>
              {ARCA_MEMORY.preferences.slice(0,3).map((p,i)=>(
                <div key={i} style={{fontSize:9.5, paddingLeft:8, position:'relative'}}><span style={{position:'absolute', left:0, color:B_MUSTARD}}>◇</span>{p}</div>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT — tasks, tools, danger */}
        <div style={{display:'grid', gridTemplateRows:'auto auto 1fr', gap:18}}>
          <div style={{border:`1.5px solid ${B_INK}`, padding:14}}>
            <BNote>SCHEDULED TASKS · cron</BNote>
            <div style={{fontFamily:bMono, fontSize:17, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500, lineHeight:1, margin:'2px 0 10px'}}>Tasks · 4</div>
            {ARCA_TASKS.map(t=>(
              <div key={t.name} style={{borderBottom:`1px dotted ${B_INK2}`, padding:'5px 0', fontFamily:bMono, fontSize:10}}>
                <div style={{display:'flex', justifyContent:'space-between'}}>
                  <span>{t.name}</span>
                  <span style={{color: t.lastStatus==='done'?B_GREEN:B_RED}}>{t.lastStatus.toUpperCase()}</span>
                </div>
                <div style={{fontSize:9, color:B_RULE, display:'flex', justifyContent:'space-between'}}>
                  <span>{t.cron}</span><span>next {t.next}</span>
                </div>
              </div>
            ))}
          </div>

          <div style={{border:`1.5px solid ${B_INK}`, padding:14}}>
            <BNote>TOOL AUDIT · 24h</BNote>
            <div style={{display:'grid', gridTemplateColumns:'1fr auto auto', gap:'3px 8px', fontFamily:bMono, fontSize:10, marginTop:6}}>
              {ARCA_TOOLCALLS_24H.slice(0,6).map(t=>(
                <React.Fragment key={t.tool}>
                  <span style={{color: t.tool.startsWith('mcp')?B_BLUE:B_INK}}>{t.tool}</span>
                  <span style={{textAlign:'right'}}>{t.count}</span>
                  <span style={{textAlign:'right', color:B_RULE}}>{t.avgMs}ms</span>
                </React.Fragment>
              ))}
            </div>
          </div>

          <div style={{border:`2px solid ${B_RED}`, padding:14, position:'relative'}}>
            <div style={{position:'absolute', top:-10, left:10, background:B_PAPER, padding:'0 8px', fontFamily:bMono, fontSize:10, color:B_RED, letterSpacing:'0.18em'}}>
              ⚠ DANGER · DESTRUCTIVE
            </div>
            <div style={{display:'grid', gap:6, marginTop:6}}>
              {[
                ['Kill all subagents','6 processes', B_RED],
                ['Wipe journal tail (7d)','14 entries', B_MUSTARD],
                ['Rebuild prompt cache','clear 4k tok', B_BLUE],
                ['Rotate API key','requires re-auth', B_INK],
                ['Archive session < 24h','soft-deletes 6', B_GREEN],
              ].map(([l,sub,c])=>(
                <div key={l} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:6, borderBottom:`1px dotted ${B_INK2}`, padding:'4px 0'}}>
                  <div>
                    <div style={{fontFamily:bMono, fontSize:10, color:B_INK, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500}}>{l}</div>
                    <div style={{fontFamily:bMono, fontSize:9, color:B_RULE}}>{sub}</div>
                  </div>
                  <button style={{padding:'4px 10px', background:B_PAPER, color:c, border:`1px solid ${c}`, fontFamily:bMono, fontSize:9.5, letterSpacing:'0.12em', cursor:'pointer'}}>EXEC</button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{position:'absolute', left:40, right:510, bottom:24, height:90, border:`1.5px solid ${B_INK}`, padding:'6px 10px', background:B_PAPER2, fontFamily:bMono, fontSize:9, zIndex:5}}>
        <div style={{fontSize:9, color:B_RULE, letterSpacing:'0.18em', marginBottom:4}}>GENERAL NOTES · SHEET A-02</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'2px 16px', lineHeight:1.3}}>
          <div>1. All destructive actions require typed confirmation matching the stamp token.</div>
          <div>2. Spawn template saves to <b>templates/*.toml</b>, versioned w/ git.</div>
          <div>3. Permission modes: <code>default</code> / <code>acceptEdits</code> / <code>bypassPermissions</code>. Use bypass only for sandboxed runs.</div>
          <div>4. Tool allowlist applies per spawn; deny-list at orchestrator overrides.</div>
          <div>5. Approval block above requires PE stamp for production-impacting changes.</div>
          <div>6. Audit log retained 90 days · exported nightly to <b>cold-storage</b>.</div>
        </div>
      </div>
    </SheetFrame>
  );
}

Object.assign(window, { BlueprintMonitor, BlueprintControl });