app.js

const cases = JSON.parse(document.getElementById('recorded-data').textContent);
const panel = document.getElementById('case-panel');
const tabs = [...document.querySelectorAll('[role="tab"]')];

function element(tag, text, className) {
  const node = document.createElement(tag);
  if (text !== undefined) node.textContent = text;
  if (className) node.className = className;
  return node;
}

function disclosure(title) {
  const details = element('details');
  details.append(element('summary', title));
  const body = element('div', undefined, 'evidence-body');
  details.append(body);
  return [details, body];
}

function showCase(index) {
  const record = cases[index];
  tabs.forEach((tab, i) => {
    tab.setAttribute('aria-selected', String(i === index));
    tab.tabIndex = i === index ? 0 : -1;
  });
  panel.setAttribute('aria-labelledby', tabs[index].id);
  panel.replaceChildren(element('p', 'Recorded run · synthetic data', 'case-label'), element('h3', record.title), element('p', record.summary, 'case-summary'));
  const metrics = element('div', undefined, 'metrics');
  record.metrics.forEach(([value, label]) => {
    const metric = element('div', undefined, 'metric');
    metric.append(element('strong', value), element('span', label));
    metrics.append(metric);
  });
  const figure = element('figure');
  const link = element('a');
  link.href = record.full_capture;
  link.target = '_blank';
  link.rel = 'noopener';
  const image = element('img');
  image.src = record.capture;
  image.alt = record.capture_alt;
  image.loading = 'lazy';
  link.append(image);
  figure.append(link, element('figcaption', 'Original recorded application capture. Select the image to open the full screenshot.'));
  panel.append(metrics, figure, element('p', `Recorded model identifier: ${record.model} · ${record.calls.length} tool calls · Run ${record.run_id}`, 'run-meta'));
  const [calls, callBody] = disclosure(`Recorded tool calls (${record.calls.length})`);
  callBody.append(element('p', 'Selected recorded tool arguments. Prompts, raw event logs and tool-result payloads are omitted.'));
  record.calls.forEach((call, i) => {
    const [row, body] = disclosure(`${i + 1}. ${call.name}`);
    body.append(element('pre', JSON.stringify(call.arguments, null, 2)));
    callBody.append(row);
  });
  const [checks, checkBody] = disclosure(`Outcome checks (${record.checks.filter(check => check.passed).length}/${record.checks.length} passed)`);
  record.checks.forEach(check => {
    const [row, body] = disclosure(`${check.passed ? 'Pass' : 'Fail'} · ${check.label}`);
    body.append(element('p', 'Expected'), element('pre', JSON.stringify(check.expected, null, 2)), element('p', 'Recorded result'), element('pre', JSON.stringify(check.actual, null, 2)));
    checkBody.append(row);
  });
  panel.append(calls, checks);
}

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => showCase(index));
  tab.addEventListener('keydown', event => {
    const target = { ArrowLeft: (index + tabs.length - 1) % tabs.length, ArrowRight: (index + 1) % tabs.length, Home: 0, End: tabs.length - 1 }[event.key];
    if (target === undefined) return;
    event.preventDefault();
    showCase(target);
    tabs[target].focus();
  });
});
showCase(0);