app.js

const D = window.BRIDGE_DATA;
const $ = (id) => document.getElementById(id);
$('trk').textContent = D.receipt.trace_resonance_key;

function shortHash(h){ return h ? h.slice(0,12).toUpperCase() : 'MISSING'; }

$('sources').innerHTML = D.manifest.sources.map(s => `
  <div class="source">
    <b>${s.source_id}</b> — ${s.title || ''}
    <div class="muted">${s.source_class}</div>
    <div class="muted">Use: ${s.use_in_layer}</div>
    <div class="mono">SHA-256: ${shortHash(s.sha256)}…</div>
  </div>
`).join('');

const sourceFilters = ['ALL', ...new Set(D.atoms.map(a => a.source_id))];
let current = 'ALL';
function renderTabs(){
  $('tabs').innerHTML = sourceFilters.map(f => `<button class="tab ${f===current?'active':''}" data-filter="${f}">${f}</button>`).join('');
  document.querySelectorAll('.tab').forEach(b => b.onclick = () => { current = b.dataset.filter; renderTabs(); renderAtoms(); });
}
function renderAtoms(){
  const list = current==='ALL' ? D.atoms : D.atoms.filter(a => a.source_id===current);
  $('atoms').innerHTML = list.map(a => `
    <div class="atom">
      <div><span class="id">${a.atom_id}</span><span class="gate ${a.gate_status}">${a.gate_status}</span></div>
      <h3>${a.atom_type.replaceAll('_',' ')}</h3>
      <p>${a.derived_summary}</p>
      <p class="muted"><b>Source:</b> ${a.source_id} · ${a.source_location}</p>
      <p class="muted"><b>Coupling relevance:</b> ${a.coupling_relevance}</p>
      ${a.export_variable ? `<div class="mono">export: ${a.export_variable}</div>` : ''}
    </div>
  `).join('');
}
function renderGates(){
  const sum = D.receipt.gate_summary;
  const total = Object.values(sum).reduce((a,b)=>a+b,0) || 1;
  $('gates').innerHTML = Object.entries(sum).map(([k,v]) => `
    <p><b>${k}</b> <span class="muted">${v} atoms</span></p>
    <div class="bar"><span style="width:${Math.round((v/total)*100)}%"></span></div>
  `).join('');
}
$('blocked').innerHTML = D.simulatorExport.blocked_exports.map(x => `<li>${x.replaceAll('_',' ')}</li>`).join('');
$('edges').innerHTML = D.edgeRules.edge_types.map(e => `<li><b>${e.edge_type}</b><br><span class="muted">${e.description}</span></li>`).join('');
$('exports').innerHTML = D.simulatorExport.allowed_exports.map(x => `<li><code>${x}</code></li>`).join('');
renderTabs(); renderAtoms(); renderGates();