const pretty = {
  phase1_reasoning_bug: 'Reasoning budget',
  phase2_benchmarks: 'Capability probes',
  phase6_security: 'Security behavior',
  phase7_codereview: 'Code review',
  phase8_comparison: 'Head-to-head',
  phase11_hallucination: 'Hallucination',
  phase12_formats: 'Format following',
  phase13_variance: 'Variance',
  phase16_edge_cases: 'Edge cases',
  v6_tool_calling: 'Tool calling',
  v6_long_context: 'Long context',
  v6_multiturn: 'Multi-turn coding',
  completed: 'Completed',
  truncated_response: 'Truncated',
  empty_length: 'Empty / length',
  empty_response: 'Empty response',
  api_error: 'API error',
  standard: 'Standard schema',
  v6_messages: 'v6 message schema',
  v6_messages_tools: 'v6 message + tools'
};

const $ = (selector) => document.querySelector(selector);
const label = (value) => pretty[value] || value.replaceAll('_', ' ');
const percent = (value, total) => `${Math.round((value / total) * 100)}%`;

function renderBars(target, items, total) {
  const max = Math.max(...items.map(item => item.count));
  $(target).innerHTML = items.map(item => `
    <div class="bar-row">
      <span class="bar-label" title="${label(item.name)}">${label(item.name)}</span>
      <span class="bar-track"><span class="bar-fill" style="width:${(item.count / max) * 100}%"></span></span>
      <span class="bar-value">${item.count}</span>
    </div>`).join('');
}

function renderPhases(items) {
  $('#phases').innerHTML = items.map(item => `
    <div class="phase-card"><strong>${item.count}</strong><span>${label(item.name)}</span></div>`).join('');
}

fetch('dashboard_data.json')
  .then(response => {
    if (!response.ok) throw new Error('dashboard_data.json unavailable');
    return response.json();
  })
  .then(data => {
    $('#records').textContent = data.records;
    renderBars('#results', data.results, data.records);
    renderBars('#schemas', data.schemas, data.records);
    renderPhases(data.phases);
  })
  .catch(error => {
    console.error(error);
    $('#records').textContent = '—';
    document.querySelectorAll('.bar-list, .phase-grid').forEach(node => {
      node.innerHTML = '<p class="note">Unable to load the local aggregate summary.</p>';
    });
  });