const DS=()=>window.HelixCyberDesignSystem_c2a1e7;
function Fig({caption,children}){
return <figure style={{margin:'32px 0',padding:24,background:'var(--surface-card)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-2)'}}>{children}
<figcaption style={{marginTop:16,fontSize:11,color:'var(--text-faint)',letterSpacing:'var(--tracking-wide)'}}>{caption}</figcaption></figure>;
}
function EraTimeline(){
const eras=[['2020–22','PROMPT','craft the input'],['2023','AGENT','give it tools'],['2024–25','HARNESS','build the runtime'],['2025–','LOOP','trust the cycle']];
return <div style={{display:'grid',gridTemplateColumns:'1fr 24px 1fr 24px 1fr 24px 1fr',alignItems:'stretch',gap:0}}>
{eras.map(([y,t,d],i)=><React.Fragment key={t}>
<div style={{border:'1px solid '+(i===3?'var(--line-accent)':'var(--border-default)'),borderRadius:'var(--radius-1)',padding:'14px 12px',background:'var(--bg-0)'}}>
<div style={{fontSize:10,color:'var(--text-faint)',marginBottom:6}}>{y}</div>
<div style={{fontFamily:'var(--font-display)',fontSize:11,letterSpacing:'.1em',color:i===3?'var(--accent)':'var(--text-body)',marginBottom:6}}>{t}</div>
<div style={{fontSize:11,color:'var(--text-muted)'}}>{d}</div></div>
{i<3&&<div style={{display:'flex',alignItems:'center',justifyContent:'center',color:'var(--accent)'}}>→</div>}
</React.Fragment>)}</div>;
}
function LoopDiagram(){
const box=(t,sub,hi)=><div style={{border:'1px solid '+(hi?'var(--line-accent)':'var(--border-default)'),borderRadius:'var(--radius-1)',padding:'12px 14px',background:'var(--bg-0)',textAlign:'center'}}>
<div style={{fontSize:12,fontWeight:700,color:hi?'var(--accent)':'var(--text-body)'}}>{t}</div>
<div style={{fontSize:10,color:'var(--text-faint)',marginTop:4}}>{sub}</div></div>;
const arrow=(g)=><div style={{display:'flex',alignItems:'center',justifyContent:'center',color:'var(--text-faint)'}}>{g}</div>;
return <div>
<div style={{display:'grid',gridTemplateColumns:'1fr 32px 1fr 32px 1fr',gap:8,alignItems:'center'}}>
{box('context','system prompt · memory · files')}{arrow('→')}{box('model','reasoning',true)}{arrow('→')}{box('action','tool call')}
</div>
<div style={{display:'grid',gridTemplateColumns:'1fr 32px 1fr 32px 1fr',gap:8,alignItems:'center',marginTop:8}}>
{arrow('↑')}<div></div>{arrow('')}<div></div>{arrow('↓')}
</div>
<div style={{display:'grid',gridTemplateColumns:'1fr 32px 1fr 32px 1fr',gap:8,alignItems:'center',marginTop:8}}>
{box('feedback','observation folded back in')}{arrow('←')}{box('verify','tests · checks · judge')}{arrow('←')}{box('environment','fs · network · APIs')}
</div>
<div style={{marginTop:16,fontSize:11,color:'var(--text-faint)'}}><span style={{color:'var(--accent)'}}>$</span> while (!done) {'{ act(); observe(); }'} — the harness owns every edge of this cycle.</div>
</div>;
}
window.BlogFig=Fig;window.EraTimeline=EraTimeline;window.LoopDiagram=LoopDiagram;
function Code({lang,children}){
return <div style={{margin:'24px 0',border:'1px solid var(--border-default)',borderRadius:'var(--radius-2)',overflow:'hidden',background:'#08090B'}}>
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'8px 14px',borderBottom:'1px solid var(--border-subtle)',fontSize:10,letterSpacing:'var(--tracking-wide)',color:'var(--text-faint)'}}><span>{lang}</span><span style={{color:'var(--accent)'}}>■</span></div>
<pre style={{margin:0,padding:'16px 18px',fontFamily:'var(--font-mono)',fontSize:12.5,lineHeight:1.65,color:'var(--fg-1)',overflowX:'auto',whiteSpace:'pre'}}>{children}</pre></div>;
}
function Callout({children}){
return <div style={{margin:'24px 0',padding:'14px 18px',background:'var(--accent-dim)',borderLeft:'2px solid var(--accent)',fontSize:13,color:'var(--text-body)',lineHeight:1.6}}>{children}</div>;
}
window.Code=Code;window.Callout=Callout;
function HexMap(){
const rows=[['0x00','u32','id','clean — 4B'],['0x04','u8','flags','1B, then 3B pad'],['0x08','ptr','name','8B, aligned'],['0x10','u16','port','packed after ptr'],['0x12','u16','—','2B tail pad → sizeof 0x18']];
return <div style={{border:'1px solid var(--border-default)',borderRadius:'var(--radius-1)',overflow:'hidden',fontSize:12}}>
{rows.map((r,i)=><div key={r[0]} style={{display:'grid',gridTemplateColumns:'70px 50px 90px 1fr',gap:0,padding:'8px 12px',borderTop:i?'1px solid var(--border-subtle)':'none',background:i%2?'var(--bg-0)':'var(--surface-card)'}}>
<span style={{color:'var(--accent)'}}>{r[0]}</span><span style={{color:'var(--text-faint)'}}>{r[1]}</span><span style={{color:'var(--text-body)'}}>{r[2]}</span><span style={{color:'var(--text-muted)'}}>{r[3]}</span></div>)}
</div>;
}
window.HexMap=HexMap;
