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 RouteFlow(){
const steps=[['task','hint / sample'],['route','43 rules, CI-checked'],['scope','auth + network profile'],['skill','apk · ida · js · firmware'],['evidence','finding → path → report']];
return <div>
<div style={{display:'flex',alignItems:'stretch',gap:0,overflowX:'auto'}}>
{steps.map(([t,d],i)=><React.Fragment key={t}>
<div style={{minWidth:112,border:'1px solid '+(i===1||i===2?'var(--line-accent)':'var(--border-default)'),borderRadius:'var(--radius-1)',padding:'12px 10px',background:'var(--bg-0)'}}>
<div style={{fontFamily:'var(--font-display)',fontSize:11,letterSpacing:'.08em',color:(i===1||i===2)?'var(--accent)':'var(--text-body)',marginBottom:6}}>{t.toUpperCase()}</div>
<div style={{fontSize:11,color:'var(--text-muted)'}}>{d}</div></div>
{i<steps.length-1&&<div style={{display:'flex',alignItems:'center',padding:'0 8px',color:'var(--accent)'}}>→</div>}
</React.Fragment>)}
</div>
<div style={{marginTop:16,fontSize:11,color:'var(--text-faint)'}}><span style={{color:'var(--accent)'}}>$</span> no target ACT until scope says granted.</div>
</div>;
}
window.RouteFlow=RouteFlow;
function DeskTable(){
const rows=[
['Claude Opus 5','general','analyzes authorized samples; tool-heavy','routes around packers instead of unpacking them'],
['Claude Fable 5','mythos + fallback','long sessions; cyber prompts often become Opus 4.8','safeguard false-positives zero the task'],
['Claude Fable 5.1','mythos + cheaper cache','same fallback; stronger long-horizon debug/RE-adjacent work','same cyber routing as Fable 5'],
['GPT-5.6 Sol','general ChatGPT/API','strong vendor cyber benches; default screens on','blocks legitimate defensive RE'],
['gpt-daybreak-blue','verified defenders','Sol weights; screens off for authorized defense','still refuses some dual-use; not Daybreak Red'],
['Grok 4.6','general','no public RE bench; thin published policy surface','scope must live in the harness']];
return <div style={{border:'1px solid var(--border-default)',borderRadius:'var(--radius-1)',overflow:'hidden',fontSize:12}}>
<div style={{display:'grid',gridTemplateColumns:'1.1fr .9fr 1.3fr 1.3fr',gap:0,padding:'8px 12px',background:'var(--bg-0)',color:'var(--text-faint)',fontSize:10,letterSpacing:'var(--tracking-wide)'}}>
<span>MODEL</span><span>LANE</span><span>RE DEFAULT</span><span>WHAT BREAKS IT</span></div>
{rows.map((r,i)=><div key={r[0]} style={{display:'grid',gridTemplateColumns:'1.1fr .9fr 1.3fr 1.3fr',gap:0,padding:'10px 12px',borderTop:'1px solid var(--border-subtle)',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.DeskTable=DeskTable;
function Brand({v,size}){
const src={anthropic:'assets/logos/anthropic.svg',openai:'assets/logos/openai.svg',xai:'assets/logos/xai.svg'}[v];
return <img src={src} width={size||22} height={size||22} alt="" style={{display:'block',flexShrink:0}}/>;
}
window.Brand=Brand;
function Bars({items}){
const max=Math.max.apply(null,items.map(i=>i.max!=null?i.max:i.value));
return <div>
{items.map(i=><div key={i.label} style={{marginBottom:14}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:6,gap:12}}>
<span style={{fontSize:12,color:'var(--text-body)'}}>{i.label}</span>
<span style={{fontSize:12,color:'var(--accent)',fontFamily:'var(--font-mono)',whiteSpace:'nowrap'}}>{i.display}</span>
</div>
<div style={{height:10,background:'var(--bg-0)',border:'1px solid var(--border-default)'}}>
<div style={{width:Math.max(2,(100*i.value/max))+'%',height:'100%',background:'var(--accent)'}}/>
</div></div>)}
</div>;
}
window.Bars=Bars;
function CompletionChart(){
return <Bars items={[
{label:'GPT-5.6 Sol (general)',value:1.5,max:100,display:'1.5%'},
{label:'gpt-daybreak-blue (Sol)',value:2.0,max:100,display:'2.0%'},
{label:'GPT-5.6-Cyber (Daybreak Red)',value:95,max:100,display:'95%'}
]}/>;
}
window.CompletionChart=CompletionChart;
function ExploitChart(){
return <Bars items={[
{label:'GPT-5.5',value:47.9,max:100,display:'47.9%'},
{label:'GPT-5.6 Sol',value:73.5,max:100,display:'73.5%'}
]}/>;
}
window.ExploitChart=ExploitChart;
function DeskHeat(){
const axes=['route','refuse','ground','hold'];
const rows=[
['Claude Opus 5','anthropic',[3,2,2,2]],
['Claude Fable 5','anthropic',[2,2,0,3]],
['Claude Fable 5.1','anthropic',[2,2,2,3]],
['GPT-5.6 Sol','openai',[3,1,0,3]],
['gpt-daybreak-blue','openai',[3,3,0,3]],
['Grok 4.6','xai',[0,0,0,0]]
];
const cell=n=>{
const w=n===0?'0%':n===1?'33%':n===2?'66%':'100%';
return <div style={{height:8,background:'var(--bg-0)',border:'1px solid var(--border-default)'}}><div style={{width:w,height:'100%',background:n? 'var(--accent)':'transparent'}}/></div>;
};
return <div>
<div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr 1fr 1fr',gap:8,marginBottom:8,fontSize:10,letterSpacing:'var(--tracking-wide)',color:'var(--text-faint)'}}>
<span>MODEL</span>{axes.map(a=><span key={a}>{a.toUpperCase()}</span>)}
</div>
{rows.map(([name,v,scores])=><div key={name} style={{display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr 1fr 1fr',gap:8,alignItems:'center',marginBottom:10}}>
<div style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:'var(--text-body)'}}><Brand v={v} size={16}/>{name}</div>
{scores.map((n,i)=><div key={i}>{cell(n)}</div>)}
</div>)}
<div style={{marginTop:8,fontSize:11,color:'var(--text-faint)'}}>Empty = unknown. 1 weak / 2 mixed / 3 filled. Desk reading, not a lab score.</div>
</div>;
}
window.DeskHeat=DeskHeat;
function ModelCards(){
const cards=[
['anthropic','Claude Opus 5','general','workhorse on owned samples'],
['anthropic','Claude Fable 5','mythos + fallback','hours-long; cyber often Opus 4.8'],
['anthropic','Claude Fable 5.1','mythos + cache','same fallback; better long debug'],
['openai','GPT-5.6 Sol','general API','vendor cyber benches; screens on'],
['openai','gpt-daybreak-blue','verified defenders','Sol weights; screens off'],
['xai','Grok 4.6','general','no public RE bench']];
return <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
{cards.map(([v,name,lane,d])=><div key={name} style={{border:'1px solid var(--border-default)',borderRadius:'var(--radius-1)',padding:'16px 14px',background:'var(--bg-0)',display:'flex',gap:12,alignItems:'flex-start'}}>
<Brand v={v} size={24}/>
<div>
<div style={{fontSize:13,fontWeight:700,color:'var(--text-body)',marginBottom:4}}>{name}</div>
<div style={{fontSize:10,letterSpacing:'var(--tracking-caps)',color:'var(--accent)',marginBottom:6}}>{lane}</div>
<div style={{fontSize:12,color:'var(--text-muted)'}}>{d}</div>
</div></div>)}
</div>;
}
window.ModelCards=ModelCards;
function FallbackMap(){
const row=(from,via,to,note)=><div style={{display:'grid',gridTemplateColumns:'1.1fr 28px 1.1fr 28px 1.2fr',gap:8,alignItems:'center',marginBottom:10}}>
<div style={{border:'1px solid var(--border-default)',borderRadius:'var(--radius-1)',padding:'10px 12px',background:'var(--bg-0)',fontSize:12}}>{from}</div>
<div style={{color:'var(--accent)',textAlign:'center'}}>→</div>
<div style={{border:'1px solid var(--line-accent)',borderRadius:'var(--radius-1)',padding:'10px 12px',background:'var(--accent-dim)',fontSize:12,color:'var(--accent)'}}>{via}</div>
<div style={{color:'var(--accent)',textAlign:'center'}}>→</div>
<div style={{border:'1px solid var(--border-default)',borderRadius:'var(--radius-1)',padding:'10px 12px',background:'var(--bg-0)',fontSize:12}}>{to}<div style={{fontSize:10,color:'var(--text-faint)',marginTop:4}}>{note}</div></div>
</div>;
return <div>
{row('Fable 5.1','cyber flag','Opus 4.8','same chat; weaker runner')}
{row('GPT-5.6 Sol','Daybreak Blue','same weights','screens off; still not Red')}
{row('Grok 4.6','no vendor split','harness gate','scope in reverse-skill')}
</div>;
}
window.FallbackMap=FallbackMap;
function RagTrust(){
const box=(t,d,hi)=><div style={{border:'1px solid '+(hi?'var(--line-accent)':'var(--border-default)'),borderRadius:'var(--radius-1)',padding:'12px 14px',background:hi?'var(--accent-dim)':'var(--bg-0)',minHeight:72}}>
<div style={{fontSize:10,letterSpacing:'var(--tracking-caps)',color:hi?'var(--accent)':'var(--text-faint)',marginBottom:6}}>{t}</div>
<div style={{fontSize:12,color:'var(--text-body)'}}>{d}</div></div>;
return <div>
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10}}>
{box('SYSTEM POLICY','your preset. not writable by the user.',true)}
{box('USER QUERY','untrusted. question, not instruction.')}
{box('RETRIEVED CHUNKS','untrusted. corpus can contain prompts.')}
</div>
<div style={{marginTop:12,textAlign:'center',color:'var(--accent)',fontSize:12}}>↓</div>
<div style={{marginTop:12,border:'1px solid var(--border-default)',borderRadius:'var(--radius-1)',padding:'12px 14px',background:'var(--bg-0)',fontSize:12,color:'var(--text-muted)'}}>generator answers from chunks. it does not take orders from chunks or from the query.</div>
</div>;
}
window.RagTrust=RagTrust;
function RagGates(){
const gates=[['isolate','policy in a channel the corpus cannot write'],['ground','answer only with cited chunks'],['strip','retrieved text is quoted data'],['refuse','no chunk → no answer, no new policy']];
return <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
{gates.map(([t,d])=><div key={t} style={{border:'1px solid var(--border-default)',borderRadius:'var(--radius-1)',padding:'14px 12px',background:'var(--bg-0)'}}>
<div style={{fontFamily:'var(--font-display)',fontSize:11,letterSpacing:'.08em',color:'var(--accent)',marginBottom:6}}>{t.toUpperCase()}</div>
<div style={{fontSize:12,color:'var(--text-muted)'}}>{d}</div></div>)}
</div>;
}
window.RagGates=RagGates;
function ScoreAxes(){
const axes=[['route','right tool, first try'],['refuse','block unauthorized; allow owned samples'],['ground','offsets match the binary'],['hold','session survives hours']];
return <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
{axes.map(([t,d])=><div key={t} style={{border:'1px solid var(--border-default)',borderRadius:'var(--radius-1)',padding:'14px 12px',background:'var(--bg-0)'}}>
<div style={{fontFamily:'var(--font-display)',fontSize:11,letterSpacing:'.08em',color:'var(--accent)',marginBottom:6}}>{t.toUpperCase()}</div>
<div style={{fontSize:12,color:'var(--text-muted)'}}>{d}</div></div>)}
</div>;
}
window.ScoreAxes=ScoreAxes;
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;
