const phases = {
  plan: { model: 'OPUS / REASONING', title: 'Turn ambiguity into work', copy: 'Inspect the repository, choose the architecture, split the request, and write acceptance criteria.', code: 'plan → decompose → define acceptance' },
  build: { model: 'SONNET, HAIKU, OR EQUIVALENT', title: 'Execute one bounded slice', copy: 'Give each worker enough context, one responsibility, and its own worktree. Less context; less collision.', code: 'brief + worktree → implement → test' },
  review: { model: 'STRONG MODEL OR HUMAN', title: 'Reconnect result to intent', copy: 'Check the diff against the original brief, run the checks, then merge, request changes, or discard.', code: 'diff + checks → review → merge / iterate' }
};
const panel = document.querySelector('#phase-panel');
const render = (id) => { const phase = phases[id]; panel.innerHTML = `<div class="phase-meta"><span>${phase.model}</span><small>context: isolated</small></div><h3>${phase.title}</h3><p>${phase.copy}</p><code>${phase.code}</code>`; document.querySelectorAll('[data-phase]').forEach((button) => { const active = button.dataset.phase === id; button.classList.toggle('active', active); button.setAttribute('aria-selected', String(active)); }); };
document.querySelectorAll('[data-phase]').forEach((button) => button.addEventListener('click', () => render(button.dataset.phase)));
render('plan');