page-pcb.js

import { initNav, renderSourcesFooter, loadMeta } from './common.js?v=47'
// Fuse.js is loaded LAZILY (see ensureFuse) instead of a top-level CDN import.
// A static `import ... from <CDN>` that fails to fetch kills the ENTIRE module
// (page goes blank). Lazy + try/catch keeps the tool working if the CDN is
// unreachable — only fuzzy chip-search degrades.

initNav('pcb')        // no-op: app shell has no #nav
renderSourcesFooter() // no-op: app shell has no footer
loadMeta()            // best-effort metadata fetch

// ── App shell wiring (modal / drawer / banner / first-run) ────────
const shell = {
  modal:          document.getElementById('modal-settings'),
  modalBackdrop:  document.getElementById('modal-backdrop'),
  btnSettings:    document.getElementById('btn-settings'),
  btnCloseSet:    document.getElementById('btn-close-settings'),
  drawer:         document.getElementById('drawer-help'),
  btnHelp:        document.getElementById('btn-help'),
  btnCloseHelp:   document.getElementById('btn-close-help'),
  banner:         document.getElementById('banner-quality'),
  btnDismissBan:  document.getElementById('btn-dismiss-banner'),
  modelLabel:     document.getElementById('app-model-label'),
  fileLabel:      document.getElementById('app-file-label'),
  imagePane:      document.querySelector('.app-image-pane'),
  detCount:       document.getElementById('det-count'),
}

function openModal() { if (shell.modal) shell.modal.style.display = 'flex' }
function closeModal() { if (shell.modal) shell.modal.style.display = 'none' }
shell.btnSettings?.addEventListener('click', openModal)
shell.btnCloseSet?.addEventListener('click', closeModal)
shell.modalBackdrop?.addEventListener('click', closeModal)
window.addEventListener('keydown', e => {
  if (e.key === 'Escape' && shell.modal?.style.display === 'flex') closeModal()
})

function openDrawer() { if (shell.drawer) shell.drawer.style.display = '' }
function closeDrawer() { if (shell.drawer) shell.drawer.style.display = 'none' }
shell.btnHelp?.addEventListener('click', openDrawer)
shell.btnCloseHelp?.addEventListener('click', closeDrawer)

// One-time image-quality banner — appears unless previously dismissed.
const BANNER_LS = 'eol-pcb-banner-dismissed-v1'
if (shell.banner) {
  try {
    if (!localStorage.getItem(BANNER_LS)) shell.banner.style.display = ''
  } catch { shell.banner.style.display = '' }
}
shell.btnDismissBan?.addEventListener('click', () => {
  if (shell.banner) shell.banner.style.display = 'none'
  try { localStorage.setItem(BANNER_LS, '1') } catch {}
})

function updateModelLabel() {
  if (!shell.modelLabel) return
  const p = PROVIDERS?.[state.provider]
  if (!p) return
  if (p.needsKey && !state.apiKey) {
    shell.modelLabel.textContent = 'Set up'
    shell.btnSettings?.classList.add('app-iconbtn--attention')
  } else {
    shell.modelLabel.textContent = `${p.label} · ${state.model || p.defaultModel}`
    shell.btnSettings?.classList.remove('app-iconbtn--attention')
  }
}
function updateFileLabel(name, w, h) {
  if (!shell.fileLabel) return
  if (!name) { shell.fileLabel.textContent = ''; return }
  shell.fileLabel.textContent = w && h ? `${name} · ${w}×${h}` : name
}

// ── Providers ────────────────────────────────────────────────────────
const PROVIDERS = {
  anthropic: {
    label: 'Anthropic',
    keyLabel: 'sk-ant-…',
    needsKey: true,
    help: 'Get a key at <a href="https://console.anthropic.com/" target="_blank" rel="noopener">console.anthropic.com</a>. Sent to <code>api.anthropic.com</code>. Paid per request.',
    models: [
      { id: 'claude-opus-4-7',           label: 'Opus 4.7 (best accuracy)' },
      { id: 'claude-sonnet-4-6',         label: 'Sonnet 4.6 (faster, cheaper)' },
      { id: 'claude-haiku-4-5-20251001', label: 'Haiku 4.5 (fastest)' },
    ],
    defaultModel: 'claude-sonnet-4-6',
  },
  gemini: {
    label: 'Google Gemini',
    keyLabel: 'AIza…',
    needsKey: true,
    help: 'Free key at <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener">aistudio.google.com/app/apikey</a>. Sent to <code>generativelanguage.googleapis.com</code>. Free tier: ~15 req/min on Flash.',
    models: [
      { id: 'gemini-2.5-pro',   label: 'Gemini 2.5 Pro (best)' },
      { id: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash (fast, free)' },
      { id: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash (cheapest)' },
    ],
    defaultModel: 'gemini-2.5-flash',
  },
  ollama: {
    label: 'Ollama',
    keyLabel: 'http://localhost:11434',
    needsKey: false,
    help: 'Install <a href="https://ollama.com/" target="_blank" rel="noopener">Ollama</a>, then <code>ollama pull llama3.2-vision</code>. Start with <code>OLLAMA_ORIGINS="*" ollama serve</code> so the browser can reach it. Override the host below if not on localhost.',
    models: [
      { id: 'llama3.2-vision',    label: 'llama3.2-vision (11B)' },
      { id: 'llama3.2-vision:90b', label: 'llama3.2-vision:90b (huge)' },
      { id: 'llava',              label: 'llava (older, lighter)' },
      { id: 'moondream',          label: 'moondream (tiny, fast)' },
    ],
    defaultModel: 'llama3.2-vision',
  },
}

// ── State ─────────────────────────────────────────────────────────────
const state = {
  provider: 'gemini',
  apiKey: '',
  model: '',
  ollamaHost: 'http://localhost:11434',
  imageDataUrl: null,
  imageMime: 'image/png',
  detections: [],
  imgNatural: { w: 0, h: 0 },
  pdfDoc: null,        // pdf.js document if user uploaded a PDF
  pdfPage: 1,          // currently rendered page (1-indexed)
  pdfPageCount: 0,
  lastRun: null,       // {provider, model, when, durationMs, tokensIn, tokensOut, cost} for reproducibility stamp
  rawModelText: '',    // last raw model response text
  palette: 'default',  // 'default' | 'cb' (colour-blind safe)
  selectedDetectionId: null, // for keyboard nav
  view: { x: 0, y: 0, scale: 1 }, // pan/zoom transform on the image
  editMode: false,     // when true, dragging a handle resizes bbox
  extraImages: [],     // additional images (top + bottom + close-ups) [{dataUrl, mime, label}]
  ocrHint: null,       // text returned by the OCR pre-pass, fed into the main prompt
}

const els = {
  provRadios: [...document.querySelectorAll('input[name="provider"]')],
  provHelp:   document.getElementById('provider-help'),
  apiKey:     document.getElementById('api-key'),
  modelSel:   document.getElementById('model-select'),
  saveKey:    document.getElementById('save-key'),
  clearKey:   document.getElementById('clear-key'),
  keyStatus:  document.getElementById('key-status'),
  drop:       document.getElementById('drop-zone'),
  file:       document.getElementById('file-input'),
  controls:   document.getElementById('pcb-controls'),
  analyze:    document.getElementById('analyze-btn'),
  reset:      document.getElementById('reset-btn'),
  optPins:    document.getElementById('opt-pins'),
  optAttacks: document.getElementById('opt-attacks'),
  optSchem:   document.getElementById('opt-schematic'),
  optConf:    document.getElementById('opt-conf'),
  optConfVal: document.getElementById('opt-conf-val'),
  pdfPages:   document.getElementById('pdf-pages'),
  pdfPrev:    document.getElementById('pdf-prev'),
  pdfNext:    document.getElementById('pdf-next'),
  pdfPageNum: document.getElementById('pdf-page-num'),
  resultSec:  document.getElementById('pcb-result-section'),
  image:      document.getElementById('pcb-image'),
  canvas:     document.getElementById('pcb-canvas'),
  status:     document.getElementById('pcb-status'),
  panel:      document.getElementById('pcb-panel'),
}

// ── Provider + key handling ─────────────────────────────────────────
const PROVIDER_LS = 'eol-pcb-provider'
const SESSION_ONLY_LS = 'eol-pcb-session-only'  // flag stays in localStorage
const keyLsFor   = p => `eol-pcb-key-${p}`
const modelLsFor = p => `eol-pcb-model-${p}`
const OLLAMA_HOST_LS = 'eol-pcb-ollama-host'

// Pick the storage backend for KEYS based on the session-only toggle.
// Everything else (provider preference, model selection, palette) stays in
// localStorage — those aren't secrets.
function keyStore() {
  try { return localStorage.getItem(SESSION_ONLY_LS) === '1' ? sessionStorage : localStorage }
  catch { return localStorage }
}
function getKey(p)   { try { return keyStore().getItem(keyLsFor(p)) || '' } catch { return '' } }
function setKey(p, v) {
  try {
    // Always clear from the OTHER store so switching modes doesn't leave a stale key behind.
    localStorage.removeItem(keyLsFor(p))
    sessionStorage.removeItem(keyLsFor(p))
    if (v) keyStore().setItem(keyLsFor(p), v)
  } catch {}
}

function setModelOptions(models, selected) {
  // Escape model id+label — Ollama models come from /api/tags response and
  // could in principle contain HTML/quote characters.
  els.modelSel.innerHTML = models.map(m =>
    `<option value="${escapeHtmlAttr(m.id)}">${escapeHtml(m.label)}</option>`).join('')
  if (selected && models.some(m => m.id === selected)) els.modelSel.value = selected
  else if (models.length) els.modelSel.value = models[0].id
}

function applyProviderUI() {
  const p = PROVIDERS[state.provider]
  els.provHelp.innerHTML = p.help
  setModelOptions(p.models, state.model || p.defaultModel)
  // Key input behavior
  if (p.needsKey) {
    els.apiKey.type = 'password'
    els.apiKey.placeholder = p.keyLabel
    els.apiKey.value = state.apiKey
    els.apiKey.disabled = false
  } else {
    // Ollama: reuse the input for the host URL instead.
    els.apiKey.type = 'text'
    els.apiKey.placeholder = p.keyLabel
    els.apiKey.value = state.ollamaHost
    els.apiKey.disabled = false
  }
  // Status line
  if (p.needsKey) {
    if (state.apiKey) {
      els.keyStatus.textContent = `Key loaded (${state.apiKey.slice(0, 10)}…) for ${p.label}. Saved in this browser only.`
      els.keyStatus.className = 'pcb-keystatus pcb-keystatus--ok'
    } else {
      els.keyStatus.textContent = `No ${p.label} key set. Analysis will fail until you save one.`
      els.keyStatus.className = 'pcb-keystatus'
    }
  } else {
    els.keyStatus.textContent = `Ollama host: ${state.ollamaHost}. Probing for installed models…`
    els.keyStatus.className = 'pcb-keystatus'
    refreshOllamaModels()
  }
  // Reflect provider+model in the header
  updateModelLabel()
  // Enable/disable Analyze button based on whether we now have an image AND key
  refreshAnalyzeEnabled()
}

function refreshAnalyzeEnabled() {
  const p = PROVIDERS[state.provider]
  const haveKey = !p.needsKey || !!state.apiKey
  const haveImg = !!state.imageDataUrl
  if (els.analyze) els.analyze.disabled = !(haveKey && haveImg)
}

async function refreshOllamaModels() {
  const host = (state.ollamaHost || 'http://localhost:11434').replace(/\/+$/, '')
  const fallback = PROVIDERS.ollama.models
  try {
    const res = await fetch(host + '/api/tags', { method: 'GET' })
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    const data = await res.json()
    const installed = (data.models || []).map(m => ({ id: m.name, label: m.name + (m.size ? ` (${(m.size / 1e9).toFixed(1)} GB)` : '') }))
    if (!installed.length) {
      els.keyStatus.innerHTML = `Connected to <code>${escapeHtml(host)}</code> but no models installed. Run: <code>ollama pull llama3.2-vision</code>`
      els.keyStatus.className = 'pcb-keystatus'
      setModelOptions(fallback, state.model)
      return
    }
    setModelOptions(installed, state.model)
    els.keyStatus.innerHTML = `Connected to <code>${escapeHtml(host)}</code> &middot; ${installed.length} model${installed.length === 1 ? '' : 's'} installed. (Use a vision model like <code>llama3.2-vision</code> for PCB analysis.)`
    els.keyStatus.className = 'pcb-keystatus pcb-keystatus--ok'
  } catch (e) {
    setModelOptions(fallback, state.model)
    const origin = location.origin
    const cmd = `OLLAMA_ORIGINS="${origin},http://localhost:*" ollama serve`
    els.keyStatus.innerHTML = `Cannot reach Ollama at <code>${escapeHtml(host)}</code>. Likely either not running, or CORS is blocking this origin. Restart Ollama with:<br><code>${escapeHtml(cmd)}</code>`
    els.keyStatus.className = 'pcb-keystatus pcb-keystatus--err'
  }
}

function loadProviderState() {
  try {
    state.provider = localStorage.getItem(PROVIDER_LS) || 'gemini'
    if (!PROVIDERS[state.provider]) state.provider = 'gemini'
    state.apiKey = getKey(state.provider)
    state.model  = localStorage.getItem(modelLsFor(state.provider)) || PROVIDERS[state.provider].defaultModel
    state.ollamaHost = localStorage.getItem(OLLAMA_HOST_LS) || 'http://localhost:11434'
  } catch {}
  // Reflect the radio
  for (const r of els.provRadios) r.checked = (r.value === state.provider)
  // Reflect the session-only checkbox
  const sessOpt = document.getElementById('opt-session-only')
  if (sessOpt) sessOpt.checked = (() => { try { return localStorage.getItem(SESSION_ONLY_LS) === '1' } catch { return false } })()
  applyProviderUI()
}

for (const r of els.provRadios) {
  r.addEventListener('change', () => {
    if (!r.checked) return
    state.provider = r.value
    try { localStorage.setItem(PROVIDER_LS, state.provider) } catch {}
    // Reload per-provider key + model from storage
    state.apiKey = getKey(state.provider)
    state.model  = localStorage.getItem(modelLsFor(state.provider)) || PROVIDERS[state.provider].defaultModel
    applyProviderUI()
  })
}

els.saveKey.addEventListener('click', () => {
  const v = els.apiKey.value.trim()
  const p = PROVIDERS[state.provider]
  state.model = els.modelSel.value
  try {
    if (p.needsKey) {
      state.apiKey = v
      setKey(state.provider, v)
    } else {
      state.ollamaHost = v || 'http://localhost:11434'
      localStorage.setItem(OLLAMA_HOST_LS, state.ollamaHost)
    }
    localStorage.setItem(modelLsFor(state.provider), state.model)
  } catch {}
  applyProviderUI()
})

els.clearKey.addEventListener('click', () => {
  const p = PROVIDERS[state.provider]
  if (p.needsKey) {
    state.apiKey = ''
    setKey(state.provider, '')
  } else {
    state.ollamaHost = 'http://localhost:11434'
    try { localStorage.removeItem(OLLAMA_HOST_LS) } catch {}
  }
  applyProviderUI()
})

els.modelSel.addEventListener('change', () => {
  state.model = els.modelSel.value
  try { localStorage.setItem(modelLsFor(state.provider), state.model) } catch {}
  updateCostPreview()
})

loadProviderState()
// Reflect provider/model in the header label, and open Settings on first
// run if no key is saved for any cloud provider.
queueMicrotask(() => {
  updateModelLabel()
  try {
    const anyKey = ['anthropic', 'gemini'].some(p => !!getKey(p))
    if (!anyKey && state.provider !== 'ollama') openModal()
  } catch {}
})

// Session-only toggle: when enabled, keys move to sessionStorage and are
// gone when the tab closes. When disabled, keys move back to localStorage.
const sessionOpt = document.getElementById('opt-session-only')
sessionOpt?.addEventListener('change', () => {
  const want = sessionOpt.checked
  // Capture current keys, flip the flag, write keys back through the new
  // backend (so we don't lose data when switching modes).
  const snap = {}
  for (const p of Object.keys(PROVIDERS)) snap[p] = getKey(p)
  try { localStorage.setItem(SESSION_ONLY_LS, want ? '1' : '0') } catch {}
  for (const [p, v] of Object.entries(snap)) setKey(p, v)
  state.apiKey = getKey(state.provider)
  applyProviderUI()
  const msg = want
    ? 'Keys moved to sessionStorage — they will be cleared when you close this tab.'
    : 'Keys moved back to localStorage — persist across tabs/sessions.'
  if (els.keyStatus) {
    els.keyStatus.textContent = msg
    els.keyStatus.className = 'pcb-keystatus pcb-keystatus--ok'
  }
})

// "Clear all stored keys" — wipes every eol-pcb-* entry, useful as a
// concrete demonstration that the only place keys exist is this browser.
const clearAllBtn = document.getElementById('clear-all-keys')
if (clearAllBtn) {
  clearAllBtn.addEventListener('click', () => {
    try {
      let total = 0
      for (const store of [localStorage, sessionStorage]) {
        const toRemove = []
        for (let i = 0; i < store.length; i++) {
          const k = store.key(i)
          if (k && k.startsWith('eol-pcb-')) toRemove.push(k)
        }
        toRemove.forEach(k => store.removeItem(k))
        total += toRemove.length
      }
      state.apiKey = ''
      state.ollamaHost = 'http://localhost:11434'
      applyProviderUI()
      els.keyStatus.textContent = `Cleared ${total} stored item${total === 1 ? '' : 's'} from both localStorage and sessionStorage. Nothing left for this site.`
      els.keyStatus.className = 'pcb-keystatus pcb-keystatus--ok'
    } catch (e) {
      els.keyStatus.textContent = 'Failed to clear: ' + (e.message || e)
      els.keyStatus.className = 'pcb-keystatus pcb-keystatus--err'
    }
  })
}

// ── Image upload (file picker, drag-drop, paste) ─────────────────────
els.drop.addEventListener('click', () => els.file.click())
els.file.addEventListener('change', e => {
  const files = [...(e.target.files || [])]
  if (files.length) handleMultipleFiles(files)
})
els.drop.addEventListener('dragover', e => { e.preventDefault(); els.drop.classList.add('pcb-drop--hover') })
els.drop.addEventListener('dragleave', () => els.drop.classList.remove('pcb-drop--hover'))
els.drop.addEventListener('drop', e => {
  e.preventDefault()
  els.drop.classList.remove('pcb-drop--hover')
  const files = [...(e.dataTransfer.files || [])]
  if (files.length) handleMultipleFiles(files)
})

async function handleMultipleFiles(files) {
  // First file becomes the primary image; the rest are stashed as extra
  // context images to be sent alongside in the main analyze call.
  state.extraImages = []
  await handleFile(files[0])
  for (let i = 1; i < files.length; i++) {
    const f = files[i]
    if (!f.type.startsWith('image/')) continue
    const r = await resizeImage(f, 1568)
    state.extraImages.push({ dataUrl: r.dataUrl, mime: r.mime, label: f.name, w: r.w, h: r.h })
  }
  renderMultiStrip()
}

function renderMultiStrip() {
  const strip = document.getElementById('multi-image-strip')
  if (!strip) return
  if (!state.imageDataUrl && !state.extraImages.length) {
    strip.style.display = 'none'; strip.innerHTML = ''; return
  }
  const primary = state.imageDataUrl
    ? `<div class="pcb-multi-item pcb-multi-primary" title="Primary image (analysis runs on this)">
         <img src="${primary_thumb_or_dataurl(state.imageDataUrl)}" alt="">
         <span class="pcb-multi-label">primary</span>
       </div>` : ''
  const extras = state.extraImages.map((e, i) => `
    <div class="pcb-multi-item" data-idx="${i}" title="${escapeHtml(e.label)} (context image)">
      <img src="${e.dataUrl}" alt="">
      <span class="pcb-multi-label">${escapeHtml(e.label)}</span>
      <button class="pcb-multi-remove" data-idx="${i}" title="Remove">×</button>
    </div>`).join('')
  strip.innerHTML = primary + extras
  strip.style.display = ''
  strip.querySelectorAll('.pcb-multi-remove').forEach(btn => {
    btn.addEventListener('click', e => {
      const i = parseInt(btn.dataset.idx, 10)
      state.extraImages.splice(i, 1)
      renderMultiStrip()
    })
  })
}
function primary_thumb_or_dataurl(u) {
  // We'd ideally generate a small thumb; for simplicity just reuse the original.
  return u
}
window.addEventListener('paste', e => {
  const items = e.clipboardData && e.clipboardData.items
  if (!items) return
  for (const it of items) {
    if (it.type.startsWith('image/')) {
      const f = it.getAsFile()
      if (f) { handleFile(f); break }
    }
  }
})

async function handleFile(file) {
  const isPdf = file.type === 'application/pdf' || /\.pdf$/i.test(file.name)
  if (!file.type.startsWith('image/') && !isPdf) {
    setStatus('error', `Unsupported file type: ${file.type || 'unknown'}. Use an image or PDF.`)
    return
  }
  // Reset prior PDF state
  state.pdfDoc = null
  state.pdfPage = 1
  state.pdfPageCount = 0
  els.pdfPages.style.display = 'none'

  setStatus('info', `Loading ${file.name} (${(file.size / 1024).toFixed(0)} KB)…`)
  let dataUrl, mime, w, h
  if (isPdf) {
    try {
      const rendered = await loadAndRenderPdf(file, 1)
      dataUrl = rendered.dataUrl; mime = rendered.mime; w = rendered.w; h = rendered.h
    } catch (e) {
      setStatus('error', 'PDF render failed: ' + (e.message || e))
      return
    }
  } else {
    const r = await resizeImage(file, 1568)
    dataUrl = r.dataUrl; mime = r.mime; w = r.w; h = r.h
  }
  state.imageDataUrl = dataUrl
  state.imageMime = mime
  state.imgNatural = { w, h }
  els.image.src = dataUrl
  els.resultSec.style.display = ''
  state.detections = []
  state.view = { x: 0, y: 0, scale: 1 }   // fresh view per image
  applyView()
  renderPanel()
  await new Promise(r => { els.image.onload = r })
  // Wait one extra frame so CSS layout settles before we measure.
  await new Promise(r => requestAnimationFrame(r))
  fitCanvas()
  drawOverlay()
  const suffix = isPdf && state.pdfPageCount > 1
    ? ` (PDF page ${state.pdfPage} of ${state.pdfPageCount})`
    : isPdf ? ' (PDF)' : ''
  setStatus('ok', `Loaded ${w}×${h}${suffix}. Click "Analyze image" to run detection.`)
  updateCostPreview()
  updateFileLabel(file.name, w, h)
  shell.imagePane?.classList.add('has-image')
  refreshAnalyzeEnabled()
  // Reset size slider to fit
  if (sizeSlider) { sizeSlider.value = 100; if (sizeLabel) sizeLabel.textContent = '100%' }
  els.image.style.width = ''
  els.image.style.height = ''
}

function updateCostPreview() {
  const est = estimateUpcomingCost()
  if (!est) { els.analyze.textContent = 'Analyze image'; return }
  if (state.provider === 'ollama') {
    els.analyze.textContent = 'Analyze image (local · free)'
  } else if (est.cost != null) {
    els.analyze.textContent = `Analyze image (~$${est.cost.toFixed(4)}, ~${est.tokensIn} tokens in)`
  } else {
    els.analyze.textContent = 'Analyze image'
  }
}

// ── PDF support ──────────────────────────────────────────────────────
let pdfjsLib = null
async function ensurePdfJs() {
  if (pdfjsLib) return pdfjsLib
  const mod = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.7.76/build/pdf.min.mjs')
  mod.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.7.76/build/pdf.worker.min.mjs'
  pdfjsLib = mod
  return mod
}

// Fuse.js (fuzzy chip-name search) — lazy + non-fatal, mirrors ensurePdfJs.
let FuseLib = null
async function ensureFuse() {
  if (FuseLib) return FuseLib
  const mod = await import('https://cdn.jsdelivr.net/npm/fuse.js@7/dist/fuse.mjs')
  FuseLib = mod.default || mod.Fuse || mod
  return FuseLib
}

async function loadAndRenderPdf(file, pageNum) {
  const lib = await ensurePdfJs()
  const buf = await file.arrayBuffer()
  const doc = await lib.getDocument({ data: buf }).promise
  state.pdfDoc = doc
  state.pdfPageCount = doc.numPages
  return renderPdfPage(pageNum)
}

async function renderPdfPage(pageNum) {
  const doc = state.pdfDoc
  if (!doc) throw new Error('No PDF loaded')
  const n = Math.max(1, Math.min(doc.numPages, pageNum))
  state.pdfPage = n
  const page = await doc.getPage(n)
  // Target ~1568px on the long edge for parity with image path.
  const baseVp = page.getViewport({ scale: 1 })
  const longEdge = Math.max(baseVp.width, baseVp.height)
  const scale = Math.min(3, 1568 / longEdge)  // cap 3x to avoid huge memory
  const vp = page.getViewport({ scale })
  const c = document.createElement('canvas')
  c.width = Math.round(vp.width)
  c.height = Math.round(vp.height)
  const ctx = c.getContext('2d')
  // White background — many PDF schematics use transparent backgrounds.
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, c.width, c.height)
  await page.render({ canvasContext: ctx, viewport: vp }).promise
  let mime = 'image/png'
  let dataUrl = c.toDataURL(mime)
  if (dataUrl.length > 4_500_000) {
    mime = 'image/jpeg'
    dataUrl = c.toDataURL(mime, 0.9)
  }
  // Update page picker UI
  if (doc.numPages > 1) {
    els.pdfPages.style.display = ''
    els.pdfPageNum.textContent = `${n} / ${doc.numPages}`
    els.pdfPrev.disabled = n <= 1
    els.pdfNext.disabled = n >= doc.numPages
  } else {
    els.pdfPages.style.display = 'none'
  }
  return { dataUrl, mime, w: c.width, h: c.height }
}

async function switchPdfPage(delta) {
  if (!state.pdfDoc) return
  const next = state.pdfPage + delta
  if (next < 1 || next > state.pdfPageCount) return
  setStatus('info', `Rendering page ${next}…`)
  try {
    const { dataUrl, mime, w, h } = await renderPdfPage(next)
    state.imageDataUrl = dataUrl
    state.imageMime = mime
    state.imgNatural = { w, h }
    els.image.src = dataUrl
    state.detections = []
    renderPanel()
    await new Promise(r => { els.image.onload = r })
    fitCanvas()
    drawOverlay()
    setStatus('ok', `Loaded page ${next}/${state.pdfPageCount} (${w}×${h}). Click "Analyze image" to run detection on this page.`)
  } catch (e) {
    setStatus('error', 'Render failed: ' + (e.message || e))
  }
}
els.pdfPrev.addEventListener('click', () => switchPdfPage(-1))
els.pdfNext.addEventListener('click', () => switchPdfPage(+1))

function resizeImage(file, maxEdge) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    const reader = new FileReader()
    reader.onload = () => { img.src = reader.result }
    reader.onerror = reject
    img.onload = () => {
      const longest = Math.max(img.width, img.height)
      const scale = longest > maxEdge ? maxEdge / longest : 1
      const w = Math.round(img.width * scale)
      const h = Math.round(img.height * scale)
      const c = document.createElement('canvas')
      c.width = w; c.height = h
      const ctx = c.getContext('2d')
      ctx.drawImage(img, 0, 0, w, h)
      // PNG keeps text sharper; cap with JPEG if huge.
      let mime = 'image/png'
      let dataUrl = c.toDataURL(mime)
      if (dataUrl.length > 4_500_000) {
        mime = 'image/jpeg'
        dataUrl = c.toDataURL(mime, 0.88)
      }
      resolve({ dataUrl, mime, w, h })
    }
    img.onerror = reject
    reader.readAsDataURL(file)
  })
}

// ── Confidence filter ────────────────────────────────────────────────
function confThreshold() {
  const v = parseInt(els.optConf.value, 10)
  return isNaN(v) ? 0 : v / 100
}
function visibleDetections() {
  const t = confThreshold()
  return state.detections.filter(d => (d.confidence == null ? 1 : d.confidence) >= t)
}
els.optConf.addEventListener('input', () => {
  els.optConfVal.textContent = els.optConf.value + '%'
  if (state.detections.length) { drawOverlay(); renderPanel() }
})

// ── Canvas overlay ───────────────────────────────────────────────────
function fitCanvas() {
  // Critical: use offsetWidth/offsetHeight (layout box, NOT transformed)
  // rather than getBoundingClientRect (which INCLUDES the container's CSS
  // transform). Otherwise canvas size grows by scale-factor while sitting
  // inside the same transformed container → markings drift off-image.
  const w = els.image.offsetWidth || els.image.naturalWidth
  const h = els.image.offsetHeight || els.image.naturalHeight
  if (!w || !h) return
  els.canvas.width = w
  els.canvas.height = h
  els.canvas.style.width = w + 'px'
  els.canvas.style.height = h + 'px'
}
window.addEventListener('resize', () => { if (state.imageDataUrl) { fitCanvas(); drawOverlay() } })

// RGB tuples so rgba() composes cleanly. Avoid CSS hex+alpha — Canvas
// silently keeps the previous fillStyle on invalid strings.
const PALETTES = {
  default: [
    [221,  51,  51], [ 10, 168, 136], [ 51, 102, 204], [255, 102,   0],
    [102,  51, 153], [196,  68, 102], [  0, 136, 170], [136,  68, 102],
    [179,  36,  36], [ 20, 134, 109],
  ],
  // Wong palette — 8-colour set designed to be distinguishable for the
  // common forms of colour-vision deficiency.
  cb: [
    [  0, 114, 178], [213,  94,   0], [  0, 158, 115], [204, 121, 167],
    [ 86, 180, 233], [240, 228,  66], [230, 159,   0], [  0,   0,   0],
  ],
}
const palette = () => PALETTES[state.palette] || PALETTES.default
const rgba = ([r, g, b], a) => `rgba(${r},${g},${b},${a})`

let drawOverlay = function (hoverId = null) {
  const c = els.canvas
  const ctx = c.getContext('2d')
  ctx.clearRect(0, 0, c.width, c.height)
  const W = c.width, H = c.height
  ctx.font = '600 12px -apple-system,Segoe UI,sans-serif'

  const vis = visibleDetections()
  // If the model's bboxes are clearly garbage, don't draw them — overlay a
  // clear explanation so the user understands the side-panel cards aren't
  // tied to any real region.
  if (vis.length >= 2 && bboxesAreBogus(vis)) {
    const msg = 'Model returned invalid bounding boxes — see warning in the side panel. The cards on the right are still shown but cannot be located on the image.'
    const padX = 14, padY = 12
    const maxW = Math.min(W - 20, 520)
    ctx.font = '600 13px -apple-system,Segoe UI,sans-serif'
    // Word-wrap
    const words = msg.split(' ')
    const lines = []
    let line = ''
    for (const w of words) {
      const test = line ? line + ' ' + w : w
      if (ctx.measureText(test).width + padX * 2 > maxW) { lines.push(line); line = w }
      else line = test
    }
    if (line) lines.push(line)
    const lh = 18
    const boxH = lines.length * lh + padY * 2
    const boxW = Math.max(...lines.map(l => ctx.measureText(l).width)) + padX * 2
    const x = (W - boxW) / 2
    const y = (H - boxH) / 2
    ctx.fillStyle = 'rgba(198, 40, 40, 0.92)'
    ctx.fillRect(x, y, boxW, boxH)
    ctx.fillStyle = '#fff'
    lines.forEach((l, i) => ctx.fillText(l, x + padX, y + padY + lh * (i + 1) - 4))
    return
  }

  vis.forEach((d, i) => {
    const pal = palette()
    const isEmpty = d.category === 'empty_footprint'
    // Empty footprints always render in amber regardless of palette index —
    // they are security warnings, not just another detection.
    const rgb = isEmpty ? [245, 158, 11] : pal[i % pal.length]
    const hovered = hoverId === d.id
    const [x1, y1, x2, y2] = d.bbox
    const x = x1 * W, y = y1 * H, w = (x2 - x1) * W, h = (y2 - y1) * H

    // Attack-surface highlight: when a class is selected in the panel,
    // emphasize its boxes and dim the rest so the class stands out.
    const hlSet = state.surfaceHighlightIds
    const emphasized = !!(hlSet && hlSet.has(d.id))
    const dimmed = !!(hlSet && hlSet.size && !hlSet.has(d.id))

    // Only tint on hover (~10% alpha) or emphasis. Default = stroke-only so the
    // chip stays visible. Empty footprints always tint lightly to flag absence.
    if (hovered || emphasized) {
      ctx.fillStyle = rgba(rgb, emphasized ? 0.26 : (isEmpty ? 0.28 : 0.18))
      ctx.fillRect(x, y, w, h)
    } else if (isEmpty && !dimmed) {
      ctx.fillStyle = rgba(rgb, 0.10)
      ctx.fillRect(x, y, w, h)
    }
    ctx.strokeStyle = rgba(rgb, dimmed ? 0.18 : (hovered || emphasized ? 1 : 0.95))
    ctx.lineWidth = emphasized ? 6 : (hovered ? 5 : 3)
    if (isEmpty) ctx.setLineDash([10, 6])
    ctx.strokeRect(x, y, w, h)
    if (isEmpty) ctx.setLineDash([])
    // Warning glyph in the top-right corner of an empty-footprint box
    if (isEmpty) {
      const glyph = '⚠'
      ctx.font = 'bold 18px system-ui, sans-serif'
      const gw = ctx.measureText(glyph).width + 8
      const gh = 22
      ctx.fillStyle = rgba(rgb, 1)
      ctx.fillRect(x + w - gw, y, gw, gh)
      ctx.fillStyle = '#fff'
      ctx.fillText(glyph, x + w - gw + 4, y + gh - 5)
      ctx.font = '13px system-ui, sans-serif'
    }

    // Small number badge in the top-left corner of the box. Clamp so it
    // never exceeds 1/3 of the box, otherwise tiny detections get covered.
    const num = String(i + 1)
    const baseW = Math.max(18, ctx.measureText(num).width + 8)
    const baseH = 16
    const nw = Math.min(baseW, Math.max(10, w / 3))
    const nh = Math.min(baseH, Math.max(10, h / 3))
    ctx.fillStyle = rgba(rgb, 1)
    ctx.fillRect(x, y, nw, nh)
    if (nw >= 14 && nh >= 12) {
      ctx.fillStyle = '#fff'
      ctx.fillText(num, x + (nw - ctx.measureText(num).width) / 2, y + nh - 3)
    }

    // Full label only on hover, placed outside the box so it never covers
    // the part. Fall back to inside if outside would clip.
    if (hovered) {
      const label = d.label || d.part_number || 'unknown'
      const lw = ctx.measureText(label).width + 10
      const lh = 18
      const ly = y - lh - 2 < 0 ? (y + h + 2) : (y - lh - 2)
      const lx = Math.min(x, W - lw - 2)
      ctx.fillStyle = rgba(rgb, 0.95)
      ctx.fillRect(lx, ly, lw, lh)
      ctx.fillStyle = '#fff'
      ctx.fillText(label, lx + 5, ly + 13)
    }
  })
}

els.canvas.addEventListener('mousemove', e => {
  if (!state.detections.length) return
  const rect = els.canvas.getBoundingClientRect()
  const x = (e.clientX - rect.left) / rect.width
  const y = (e.clientY - rect.top) / rect.height
  const hit = visibleDetections().find(d => {
    const [x1, y1, x2, y2] = d.bbox
    return x >= x1 && x <= x2 && y >= y1 && y <= y2
  })
  drawOverlay(hit ? hit.id : null)
  els.canvas.style.cursor = hit ? 'pointer' : 'default'
})

els.canvas.addEventListener('click', e => {
  const rect = els.canvas.getBoundingClientRect()
  const x = (e.clientX - rect.left) / rect.width
  const y = (e.clientY - rect.top) / rect.height
  const hit = visibleDetections().find(d => {
    const [x1, y1, x2, y2] = d.bbox
    return x >= x1 && x <= x2 && y >= y1 && y <= y2
  })
  if (hit) {
    const card = document.getElementById('det-' + hit.id)
    if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' })
    highlightCard(hit.id)
  }
})

function highlightCard(id) {
  document.querySelectorAll('.det-row-card').forEach(el => el.classList.remove('det-row-card--active'))
  const card = document.getElementById('det-' + id)
  if (card) card.classList.add('det-row-card--active')
}

// ── Reset / status ───────────────────────────────────────────────────
els.reset.addEventListener('click', () => {
  state.imageDataUrl = null
  state.detections = []
  els.image.src = ''
  els.resultSec.style.display = 'none'
  els.controls.style.display = 'none'
  els.panel.innerHTML = '<div class="pcb-panel-empty">Detections will appear here once analysis completes.</div>'
  setStatus('info', 'Idle.')
})

function setStatus(kind, msg) {
  els.status.textContent = msg
  els.status.className = 'pcb-canvas-status pcb-canvas-status--' + kind
}

// ── Analysis call ────────────────────────────────────────────────────
els.analyze.addEventListener('click', analyze)

async function analyze() {
  const p = PROVIDERS[state.provider]
  if (p.needsKey && !state.apiKey) {
    setStatus('error', `No ${p.label} key. Paste one in step 1 and click Save.`)
    return
  }
  if (!state.imageDataUrl) {
    setStatus('error', 'No image loaded.')
    return
  }
  els.analyze.disabled = true

  // OCR pre-pass (optional)
  const wantOcr = document.getElementById('opt-ocr')?.checked
  if (wantOcr) {
    setStatus('info', `OCR pre-pass: extracting silkscreen text…`)
    state.ocrHint = await runOcrPrepass().catch(e => { console.warn('OCR pre-pass failed', e); return null })
    if (state.ocrHint) setStatus('info', `OCR pre-pass returned ${state.ocrHint.split('\n').length} strings. Running main analysis…`)
  } else {
    state.ocrHint = null
  }

  setStatus('info', `Calling ${p.label} (${state.model})… vision analysis usually takes 10–40s.`)
  const startedAt = Date.now()

  // Token-saving optimization: downscale the image to 1024px on the long
  // edge for the INITIAL detection pass. Bounding boxes don't suffer at
  // this resolution; per-chip OCR is handled by re-OCR at native res
  // later. Cuts image tokens ~50% on the most expensive call.
  const fullImage = state.imageDataUrl
  const fullMime  = state.imageMime
  try {
    const srcImg = await loadImage(state.imageDataUrl)
    const small = cropToDataUrl(srcImg, 0, 0, 1, 1, 1024)
    state.imageDataUrl = small
    state.imageMime = small.startsWith('data:image/png') ? 'image/png' : 'image/jpeg'
  } catch (e) {
    console.warn('Initial-pass downscale failed; using full-res:', e)
  }
  try {
    let result
    if (state.provider === 'anthropic')   result = await callAnthropic()
    else if (state.provider === 'gemini') result = await callGemini()
    else                                  result = await callOllama()
    // Each callX returns either an array (legacy) or {detections, usage}.
    const detections = Array.isArray(result) ? result : result.detections
    const usage = Array.isArray(result) ? null : result.usage
    state.detections = detections.map((d, i) => ({ ...d, id: i + 1 }))
    state.lastRun = {
      provider: state.provider,
      providerLabel: p.label,
      model: state.model,
      when: new Date().toISOString(),
      durationMs: Date.now() - startedAt,
      tokensIn: usage?.input_tokens ?? null,
      tokensOut: usage?.output_tokens ?? null,
      cost: usage?.estimated_cost ?? null,
    }
    saveToHistory()
    fitCanvas()
    drawOverlay()
    await renderPanel()
    showToolbar()
    setStatus('ok', `Done. ${state.detections.length} detection${state.detections.length === 1 ? '' : 's'} in ${((state.lastRun.durationMs)/1000).toFixed(1)}s${state.lastRun.cost ? ` · est. $${state.lastRun.cost.toFixed(4)}` : ''}.`)

    // Optional accuracy boosters — opt-in checkboxes in Settings.
    // Order matters: consensus replaces, tile pass adds, auto-re-OCR refines.
    if (document.getElementById('opt-consensus')?.checked) {
      await consensusPass()
    }
    if (document.getElementById('opt-tile-pass')?.checked) {
      await tilePass()
    }
    if (document.getElementById('opt-auto-reocr')?.checked) {
      await autoReOcrAll()
    }
  } catch (err) {
    console.error(err)
    setStatus('error', 'Failed: ' + (err.message || err))
  } finally {
    // Always restore full-res so subsequent boosters (re-OCR, tile pass,
    // correction) work against the original detail.
    state.imageDataUrl = fullImage
    state.imageMime = fullMime
    els.analyze.disabled = false
  }
}

function buildPrompt() {
  if (state._oneShotPrompt) return state._oneShotPrompt
  const wantPins = els.optPins.checked
  const wantAtk = els.optAttacks.checked
  const isSchem = els.optSchem.checked
  const wantValues = document.getElementById('opt-values')?.checked
  const target = isSchem
    ? 'a schematic diagram (symbols, nets, reference designators)'
    : 'a top-down photo of a populated printed circuit board'

  const extraNote = (state.extraImages && state.extraImages.length)
    ? `\nNOTE: You have been given ${state.extraImages.length + 1} images of the same board (the first is the primary view, the rest are additional angles or close-ups labelled ${state.extraImages.map(e => `"${e.label}"`).join(', ')}). Use all of them together — a marking might be readable in only one view. All bboxes you return must be in coordinates of the PRIMARY (first) image.\n`
    : ''

  const ocrHintNote = state.ocrHint
    ? `\nHINT — OCR pre-pass extracted the following visible text strings from the primary image. Use these as ground-truth markings rather than guessing:\n${state.ocrHint}\n`
    : ''

  return `You are a hardware security analyst examining ${target}.${extraNote}${ocrHintNote}

Your job is to identify ONLY physical objects you can clearly SEE in the image:
- Integrated circuits (ICs) with a visible package outline
- Pin headers and connector blocks with visible pins
- Major connectors (USB, HDMI, Ethernet, etc.)
- Crystals / oscillator cans
- Visible debug pads or labelled test-point arrays (only if you can actually see and read the labels)
- SECURITY-RELEVANT DISCRETES (transistors, MOSFETs, diodes, crystals, inductors, key RC networks) — see explicit list below
- EMPTY / UNPOPULATED FOOTPRINTS — see dedicated section below (HIGH security priority)

BOUNDING BOX PRECISION — this is critical. Each bbox MUST tightly enclose the physical part:
- x1,y1 = top-left corner of the package outline (NOT including pin tails extending outside)
- x2,y2 = bottom-right corner of the package outline
- Tolerance: ±2% of image width on each edge. Boxes wandering off the chip by 10–15% are unacceptable.
- For ICs: enclose the dark plastic body, not the pin halo. For headers: enclose the plastic shroud + pins. For passives: tight 0402/0603 footprint only.
- Before emitting each bbox, mentally re-check: "does the rectangle I'm outputting actually contain the centre of this specific part?" If unsure, lower confidence rather than emit a sloppy box.

EMPTY / UNPOPULATED FOOTPRINTS — these are HIGH-VALUE hardware-security targets and MUST be flagged. An empty footprint = silkscreen outline + visible pads + NO component soldered on. Signatures to look for:
- A rectangular silkscreen outline (white box on green) with bare copper pads inside, no chip body.
- A row of through-holes silkscreened with a part designator (e.g. "J5", "JTAG", "DEBUG", "CN3") but no header soldered in.
- A footprint adjacent to a populated chip that was clearly intended to hold a sibling component (DNP — Do Not Populate).
- Test-point pads (labelled TP## or unlabelled gold dots) — list these as a cluster, not individually.
- A pair of unpopulated SOIC-8 pads near SPI flash → likely an alternate flash, secure element, or auth IC the manufacturer omitted.
- An empty crystal footprint near a populated SoC → suggests alternate clock-source configuration possible.

For each unpopulated footprint emit a detection with:
- category: "empty_footprint"
- label: descriptive guess (e.g. "Unpopulated debug header (probable UART)", "Unpopulated SOIC-8 (probable alternate flash)", "Unpopulated 2×5 header (probable JTAG)")
- part_number: any visible silkscreen designator (e.g. "J5", "U7", "DBG1") or ""
- confidence: typical 0.5–0.8 (you can SEE the footprint, but the intended part is a guess)
- attack_vectors: tailored to footprint type:
  * Unpopulated debug header → "Solder a header here → likely yields UART/JTAG/SWD console (manufacturer depopulated for production)"
  * Empty SOIC-8 near SPI flash → "Plant point: attacker could solder a malicious flash here, MITM the bus, or add a logic bomb"
  * Empty SOT-23 footprint on signal line → "Plant point: implant a transistor or MOSFET for active fault injection / signal manipulation"
  * Empty footprint with no obvious purpose → "Plant point: physical-implant attack surface — verify against BOM whether intentional DNP"
- notes: "Empty footprint — pads visible, no component. Compare to production BOM to confirm DNP vs implant location."

This is not optional. Empty footprints on retail boards are one of the FIRST things a hardware-security analyst checks. Always include them when visible.

SECURITY-RELEVANT DISCRETES — for a hardware-security tool these matter and MUST be identified. These are the components used in glitching, fault-injection and side-channel attacks:

Transistors (BJT) — small 3-leg packages, usually SOT-23 / SOT-89 / SOT-223 / TO-92:
  - NPN — commonly used to PULL signals LOW (reset glitching, clock disturbance, signal pull-down). Often near reset/clock/UART lines.
  - PNP — high-side switching (cut/restore VCC), brownout attacks, RF amplifier enable.
  - Read marking if visible (e.g. "1AM" = MMBT3904 NPN, "2AM" = MMBT3906 PNP, "2N7002" = MOSFET). Mark category "transistor".

MOSFETs — packages SOT-23 (small-signal), SOT-89, SOT-223, DPAK / D2PAK / TO-220 (power):
  - Used for fast switching, voltage glitching, power-rail control, USB VBUS gating.
  - Often near power input, regulators, USB ports, debug-power switching.
  - Mark category "mosfet". Note whether N-channel or P-channel if you can infer (P-ch typical for high-side power switching).

Crystals / oscillator cans — rectangular silver cans, usually 4-pin or 2-pin:
  - PRIMARY TARGETS FOR CLOCK GLITCHING. Always identify and note frequency if printed.
  - Mark category "crystal".

Power-supply discretes — TO-220 / DPAK / D2PAK / SOT-223 packages, inductors (coil shape, usually labelled L#), large electrolytic / tantalum caps near regulators:
  - Targets for voltage glitching, brownout, power-rail manipulation.
  - Mark category "power".

Diodes / TVS / Zeners — small 2-leg packages, SOD-123 / SOD-323 / SMA / SMB:
  - On debug lines (often clamps that can be temporarily shorted for clean fault injection).
  - On power input (TVS protection — relevant for EMFI).
  - Mark category "diode".

RC reset / timing networks — pair of resistor + capacitor visible near a chip's RESET pin:
  - Determines reset assertion timing — key for reset-glitching attack windows.
  - Mark category "passive" and note "RC reset network for <chip>".

PULL-UP / PULL-DOWN RESISTORS — these are PRIMARY hardware-attack targets. A pull-up or pull-down sets the default state of a config / boot / debug pin at power-on. Lifting it (or shorting the trace below it to the opposite rail) changes what the chip does. Identify them when you see:

Visual cues:
- Small SMD resistor (0402 / 0603 / 0805) sitting alone near a specific pin of a major IC, with ONE end going to VCC (pull-up) or GND (pull-down) and the other to a signal pin or a header pin.
- Markings: SMD resistors usually show a 3- or 4-digit code printed on the body: "472" = 4.7 kΩ, "473" = 47 kΩ, "103" = 10 kΩ, "104" = 100 kΩ, "100" = 10 Ω, "000" = 0 Ω jumper.
- Common values for pull-ups: 4.7 kΩ (I²C), 10 kΩ (boot-strap, reset, JTAG/SWD), 100 kΩ (high-impedance / weak pull).

Which ones MATTER (worth flagging — each maps to a real attack):
  - **Boot-strap pulls** — on BOOT / BOOT0 / BOOT1 / MODE / CFG / STRAP pins of MCU/SoC/FPGA. Pick boot source (internal flash / SPI flash / UART / USB / JTAG / SD). Attack: lift the resistor or short the trace to opposite rail → force alternative boot mode → attacker's recovery / serial-boot path.
  - **Reset pull-up** — typically 10 kΩ from RESETn to VCC, often paired with a small capacitor to GND (an RC reset network). Attack: hold reset LOW to keep MCU offline while attacking peripherals; or shorten the RC time constant for a reset-glitching window.
  - **Flash WP / HOLD pull-ups** — on the WP# and HOLD# pins of SPI flash chips (W25Qxx, MX25, etc.). Usually 10 kΩ pull-up holding the pin HIGH (= write protected / hold inactive). Attack: tie WP# LOW → disables write protect → flash can be modified in-circuit.
  - **JTAG / SWD pull-ups** — on TMS, TCK, TRST, SWDIO, SWCLK. Often 10 kΩ. Indicates the debug interface is biased for normal operation rather than tristated. Attack: tells you the debug port is usable without strong drivers.
  - **I²C pull-ups** — the 4.7 kΩ pair fingerprint, already covered in I²C BUS clues above.
  - **GPIO mode-select / pin-mux** — on multiplexed pins that pick a function at boot (e.g. JTAG vs GPIO, secure-boot enable, debug-disable straps). Attack: force the opposite function by changing the strap value.

Format: emit one detection per identified pull (or one detection covering a cluster of strap resistors on the same chip's strap pins). Category "passive". In notes describe which pin/role; in attack_vectors describe what the attacker gets by changing the resistor.

Passive RULES — do NOT list every resistor / capacitor on the board (would be hundreds). DO include:
  - All pull-up / pull-down resistors per the section above (boot-strap, reset, flash WP, JTAG/SWD, I²C, pin-mux)
  - Bypass / decoupling capacitors AT the main SoC's power pins (relevant to power analysis / EMFI)
  - The RC reset network (always)
  - Any resistor labelled with an unusual value silkscreen (test resistors, current shunts)
  - SKIP: generic bypass caps elsewhere, LED current-limit resistors, basic pull-ups on indicator LEDs or other non-security nets

DEBUG INTERFACES are a priority — these are how someone gains access to a board. When you spot a header or test-point cluster, use the following heuristics to guess what it is (and say so in "notes"):
- 4 pins near the main MCU, often labelled TX/RX/GND/3V3 → likely UART console
- 10-pin (2×5) header → classic ARM JTAG (0.1" pitch) or Cortex-M JTAG (0.05" pitch)
- 5-pin or 4-pin row labelled SWDIO/SWCLK/RST/GND → ARM Serial-Wire Debug (SWD)
- 6-pin in-line near an AVR chip → ISP/ICSP programming header
- Tiny 6-pad footprint without a connector → TagConnect / pogo-pin test point
- Unpopulated through-holes adjacent to an SoC → most likely a debug header the manufacturer left off in production. Note "unpopulated" in notes.
- Castellated edge fingers with TX/RX labelling → debug serial brought out for production
- Single-row 8–14 pin header next to flash / boot SoC → often a vendor-specific JTAG / EJTAG (MIPS) / cJTAG

I²C BUS clues — I²C usually has no dedicated header (devices share a single bus), so look for:
- Two adjacent pads/pins silkscreened SDA + SCL (sometimes labelled "I2C" on a 4-pin breakout: SDA/SCL/VCC/GND)
- An EEPROM such as 24Cxx / AT24Cxxx / 24LCxxx (8-pin SOIC near the MCU) → strongly implies an I²C bus the MCU can read
- An RTC chip (DS1307 / DS3231 / PCF8523) → I²C
- I²C sensors with visible markings (BMP280, BME280, SHT3x, MPU-6050, LIS3DH, BNO0xx, INA219) → I²C
- I²C OLED / EEPROM display modules — small daughter-cards with 4 pins and a visible SSD1306 chip
- Pull-up resistor pair (typically 4.7 kΩ — two identical resistors close together) tied to two specific traces is a classic I²C bus fingerprint
- When you spot any of these, add one "I²C bus" detection (category: "interface") and list which chips appear to share it in notes. Mark confidence honestly — finding chips that USE I²C does not prove they're on a single bus.

SPI BUS clues — distinct from the SPI flash chip itself:
- Silkscreen MOSI / MISO / SCK (or SCLK) / CSn / SS on a header or test-point block → SPI breakout
- Multiple SPI peripherals visible (e.g. SPI flash + SPI display + SPI ADC) usually share a single bus (MOSI/MISO/SCK common; each gets its own CS line). Note this in the SPI flash detection's notes.
- 4-wire (CLK/MOSI/MISO/CSn) cluster near an FPGA / SoC → often the configuration SPI used at boot

Note: you are reading a STATIC IMAGE. You cannot trace electrical continuity. Do NOT claim "this header connects to pin X of the MCU" or "these chips share a bus" unless the silkscreen literally labels it, or the traces are obviously short and visible in this image. Use words like "likely", "appears to be", "consistent with" — never assert connectivity you cannot see.

DO NOT invent items. In particular:
- Do NOT emit one detection per net or per signal name. "SWDIO", "SWCLK", "3V3", "GND" are signal names, not objects. They belong inside the "pins" field of the corresponding header, never as their own detection.
- Do NOT emit "clip" or "probe" entries — those are tools, not parts.
- Do NOT default manufacturer to "STMicroelectronics" or any single vendor. Leave manufacturer empty if the chip's marking is unreadable.
- Do NOT list a pin name unless that pin is plausibly accessible on a visible header/test-point in THIS photo. If you can't see the header clearly, set "pins": [].

Output exactly one JSON object: {"detections": [ ... ]}. Each detection has:
- "label": short display name (e.g. "ESP32-WROOM", "SPI flash", "USB-C", "UART header")
- "part_number": exact marking read from silkscreen/package, or "" if unreadable
- "manufacturer": vendor name only if confidently identifiable from the marking or logo, else ""
- "category": one of "mcu","soc","fpga","cpld","flash","eeprom","ram","power","regulator","radio","sensor","interface","transistor","mosfet","diode","inductor","passive","connector","header","crystal","empty_footprint","unknown"
- "confidence": float 0.0–1.0. Be honest — if you can barely see it, use <0.5.
- "bbox": [x1, y1, x2, y2] normalized 0.0–1.0, origin top-left, x2>x1, y2>y1
- "notes": one short sentence on this part's role in the board
${wantPins ? '- "pins": array of pin/signal names visible on THIS physical part. Only include pins you can map to specific accessible pads. For chips inside a BGA/QFN package whose pads aren\'t accessible, return [].' : ''}
${wantAtk ? '- "attack_vectors": 0–4 SPECIFIC hardware-security notes for this part (e.g. "in-circuit SPI flash dump via SOIC-8 clip", "UART boot console at 115200 8N1 if header is populated"). Do not list generic advice. Empty array if nothing specific applies.' : ''}

Hard limits:
1. Return ONLY the JSON object. No prose, no markdown fences.
2. At most 30 detections total. For dense boards (Zynq, FPGA dev kits, complex multi-radio products) use the full budget; for simple boards (1 MCU + 1 flash) use only what you actually see.
3. Skip generic passives (every bypass cap on every IC, every LED current-limit resistor) — only include passives matching the security-relevance rules above.
4. Order: main SoC/MCU first, then memory, then radios, then power discretes, then connectors/headers, then crystals, then security-relevant transistors / MOSFETs / diodes / RC networks.
5. If you genuinely cannot identify anything beyond "there is a green PCB", return {"detections": []}.

ATTACK-VECTOR GUIDANCE per component type — when you list a detection in one of these categories, the attack_vectors field should reflect the typical security role:
  - mosfet (in power-supply path) → "voltage glitching target — fast-switching MOSFET in VCC path", "power-rail interruption for fault injection"
  - mosfet (USB VBUS or similar) → "VBUS / USB power gating — candidate for USB power-cycling attacks"
  - transistor (NPN near reset or clock) → "reset glitching target — pulls signal LOW on command", "clock-line disturbance trigger"
  - transistor (PNP near VCC) → "high-side switch — brownout / VCC interruption attack candidate"
  - crystal → "clock-glitching target — capacitive/inductive coupling can inject glitches into the clock domain"
  - regulator (LDO / DC-DC) → "voltage-glitch target — under/overshoot the output rail"
  - diode (TVS on power input) → "EMFI / overvoltage clamp — bypass briefly to inject transients"
  - diode (Schottky / signal) → "signal-line clamp — short across to inject without damage"
  - passive RC reset network → "reset-glitch timing target — modify capacitor to widen attack window"
  - passive pull-up on BOOT / MODE strap → "lift to force alternative boot mode (UART / USB / JTAG recovery path)"
  - passive pull-up on flash WP# / HOLD# → "tie WP# LOW to disable write protect — flash modification possible in-circuit"
  - passive pull-up on RESET → "hold reset LOW to keep MCU offline while attacking peripherals"
  - passive pull-up on JTAG TRST / TMS / SWDIO / SWCLK → "debug interface biased for use — JTAG / SWD probably accessible"
  - inductor (on power input or near radio) → "EMFI coil target", "RF carrier coupling"

ANTI-PATTERNS — these mean you are lazy-filling the schema. Do NOT do them:
- Generic "notes" like "Main SoC/MCU on printed circuit board" or "Small SMT part on printed circuit board". Notes must describe THIS specific part's role with at least one detail you can see (silkscreen text, package shape, position).
- The same "notes" string repeated across multiple detections. Each note must be unique.
- All detections clustered at the same bbox (e.g. several at [0,0,0.1,0.1]). Bboxes must actually enclose the specific part on the image — different parts → different boxes.
- Inventing a part that the image doesn't actually show. If you can't see an ESP32 or a USB-C, don't list one.
- Listing only "VCC" and "GND" as pins. If those are the only pins you can name, omit "pins" entirely — they are not informative.
- Returning identical detection lists for clearly different images (you don't have memory across calls, but if your output looks like it could fit ANY board, you are bluffing — try harder or return fewer items).

If you cannot actually identify a part from THIS specific image, return fewer detections or an empty list. An empty list is BETTER than fabricated entries.

${wantValues ? `
GENERAL COMPONENT-VALUE IDENTIFICATION — the user has asked for full component values, not just security-relevant items. Include and read values for passives even when they have no obvious attack role:

Resistors (SMD 0402 / 0603 / 0805 / 1206):
- Read the marking code printed on the top:
  • 3-digit "XYZ" = first two digits × 10^Z. "100"=10Ω, "101"=100Ω, "102"=1kΩ, "103"=10kΩ, "104"=100kΩ, "105"=1MΩ, "470"=47Ω, "471"=470Ω, "472"=4.7kΩ, "473"=47kΩ, "474"=470kΩ
  • 4-digit "WXYZ" = first three × 10^Z. "1002"=10kΩ, "4702"=47kΩ, "1003"=100kΩ
  • "R" or decimal point = below 10Ω. "4R7"=4.7Ω, "R47"=0.47Ω, "1R0"=1Ω
  • "000" or "0" = zero-ohm jumper (used as track-crossing or option select)
  • EIA-96 (two digits + letter, e.g. "01A"=100Ω, "12C"=13kΩ) on tiny 0402 chips
- For groups of identical resistors near a chip (e.g. 8 series-termination resistors on a data bus) emit ONE detection covering the cluster, not 8 separate ones.

Capacitors:
- Electrolytic (cylindrical can with stripe): read printed value (e.g. "100µF 25V") and note polarity stripe position.
- Tantalum (yellow / orange brick with stripe): markings like "107C" = 100µF 16V, "106B" = 10µF 6.3V. Stripe = positive.
- Ceramic SMD (small brown/grey rectangles): rarely marked. Identify by package size (0402, 0603, 0805, 1206). For groups of similar bypass caps near a chip emit ONE clustered detection.
- Film / box caps (larger rectangles): if marking visible (e.g. "104K" = 100nF ±10%), include.

Crystals / oscillators:
- Frequency usually printed on top: "8.000" = 8.000 MHz, "16.000" = 16 MHz, "25.000" = 25 MHz, "32.768" = 32.768 kHz RTC crystal, "12M" = 12 MHz.
- Note number of pins (2-pin passive crystal vs 4-pin active oscillator).
- Always include — clock frequency is critical info.

Inductors:
- Coil or moulded brick. Markings: "100" = 10 µH, "101" = 100 µH, "470" = 47 µH (same code system as resistors but units are µH).
- If part of an SMPS filter, note location (input/output).

LEDs:
- Identify by colour if visible. Read marking if present.
- Common SMD packages: 0603, 0805, 1206. Through-hole: 3 mm, 5 mm.
- Note role from position (status / power / activity / link).

Diodes:
- SOD-123, SOD-323, SMA, SMB, SMC packages.
- Markings: "S4" = 1N4148, "L4" = LL4148, "B5W" = SS14 Schottky (vendor-dependent).
- Note role (TVS, rectifier, signal, freewheel).

Connectors / sockets:
- Pin count + pitch (2.54 mm / 2.00 mm / 1.27 mm / 1.00 mm / 0.5 mm).
- Type (SMA, BNC, USB-A/B/C/Micro/Mini, RJ45, HDMI, DisplayPort, SD/microSD, audio jack).

GROUPING RULE — when the same component is repeated near one IC for a routine purpose (e.g. 8 identical 0.1 µF bypass caps around an SoC, or 4 identical 33 Ω series resistors on an HDMI lane), emit ONE detection that covers the cluster (bbox encloses all of them) with a count in notes: "8x 0.1µF decoupling caps around U1". This keeps the detection budget for distinct components.

For routine bypass / series-termination / pull-up clusters that are obviously normal design and have no specific attack vector, set attack_vectors to [] — only the security-relevant ones (boot strap, flash WP, reset, debug pulls) get attack_vectors entries.
` : ''}`
}

function imageB64() { return state.imageDataUrl.split(',')[1] }

// OCR pre-pass: ask the model for *just* the visible text strings on the
// board. Cheap (small token output), reduces hallucinated part numbers in
// the main detection pass when its result is fed back as a hint.
async function runOcrPrepass() {
  const prompt = `List every text string you can clearly read on this PCB image, one per line. Include silkscreen labels (R1, U2, TP3, J4), chip markings (ESP32-WROOM-32, W25Q128JV), date codes, vendor names, anything legible. Do NOT guess. If a string is unreadable, skip it. Return ONLY the list — no prose, no JSON, no markdown.`
  const b64 = imageB64()
  if (state.provider === 'anthropic') {
    const res = await fetch('https://api.anthropic.com/v1/messages', {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
        'x-api-key': state.apiKey,
        'anthropic-version': '2023-06-01',
        'anthropic-dangerous-direct-browser-access': 'true',
      },
      body: JSON.stringify({
        model: state.model, max_tokens: 1024,
        messages: [{ role: 'user', content: [
          { type: 'image', source: { type: 'base64', media_type: state.imageMime, data: b64 } },
          { type: 'text', text: prompt },
        ]}],
      }),
    })
    if (!res.ok) return null
    const data = await res.json()
    return (data.content || []).filter(c => c.type === 'text').map(c => c.text).join('\n').trim() || null
  }
  if (state.provider === 'gemini') {
    const url = `https://generativelanguage.googleapis.com/v1beta/models/${encodeURIComponent(state.model)}:generateContent?key=${encodeURIComponent(state.apiKey)}`
    const res = await fetch(url, {
      method: 'POST', headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        contents: [{ parts: [
          { inline_data: { mime_type: state.imageMime, data: b64 } },
          { text: prompt },
        ]}],
        generationConfig: { max_output_tokens: 1024, temperature: 0 },
      }),
    })
    if (!res.ok) return null
    const data = await res.json()
    const cand = (data.candidates || [])[0]
    return ((cand && cand.content && cand.content.parts) || []).map(p => p.text || '').join('\n').trim() || null
  }
  if (state.provider === 'ollama') {
    const host = (state.ollamaHost || 'http://localhost:11434').replace(/\/+$/, '')
    const res = await fetch(host + '/api/generate', {
      method: 'POST', headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ model: state.model, prompt, images: [b64], stream: false, options: { temperature: 0 } }),
    })
    if (!res.ok) return null
    const data = await res.json()
    return (data.response || '').trim() || null
  }
  return null
}

// Rough cost preview: estimate input tokens from image dimensions (Anthropic
// docs: image tokens ≈ width * height / 750). Output tokens are unknown
// before the call — we use 1200 as a conservative typical for our JSON.
function estimateUpcomingCost() {
  if (state.provider === 'ollama') return { tokensIn: '?', cost: 0 }
  const w = state.imgNatural?.w, h = state.imgNatural?.h
  if (!w || !h) return null
  const baseIn = Math.round((w * h) / 750) + 1500 // image + prompt overhead
  const extraIn = (state.extraImages || []).reduce((s, e) => s + Math.round((e.w * e.h) / 750), 0)
  const tokensIn = baseIn + extraIn
  const tokensOut = 1200
  const cost = estimateCost(state.model, tokensIn, tokensOut)
  return { tokensIn, tokensOut, cost }
}

// Rough per-million-token USD pricing for the models we expose. Used only
// to surface a "this run cost ~$X" estimate — providers' invoices remain
// authoritative.
const PRICING = {
  'claude-opus-4-7':           { in: 15.00, out: 75.00 },
  'claude-sonnet-4-6':         { in:  3.00, out: 15.00 },
  'claude-haiku-4-5-20251001': { in:  1.00, out:  5.00 },
  'gemini-2.5-pro':            { in:  1.25, out: 10.00 },
  'gemini-2.5-flash':          { in:  0.30, out:  2.50 },
  'gemini-2.0-flash':          { in:  0.10, out:  0.40 },
}
function estimateCost(model, tokensIn, tokensOut) {
  const p = PRICING[model]
  if (!p || tokensIn == null) return null
  return ((tokensIn * p.in) + ((tokensOut || 0) * p.out)) / 1e6
}

function parseDetections(text) {
  state.rawModelText = text   // save first so non-detection responses (e.g. {"traces":...}) survive too
  const json = extractJson(text)
  if (!json) {
    throw new Error('Model did not return parseable JSON. Got: ' + text.slice(0, 200))
  }
  // Trace-analysis prompts return {"traces":...} — allow the caller to
  // re-parse rawText for their custom schema rather than throwing.
  if (!Array.isArray(json.detections)) {
    if (Array.isArray(json.traces)) return []
    throw new Error('Model did not return parseable JSON. Got: ' + text.slice(0, 200))
  }
  return json.detections.filter(d => Array.isArray(d.bbox) && d.bbox.length === 4)
}

// Decide whether the bboxes are too broken to draw at all.
// (Stacked at one corner, or all overlapping each other.)
function bboxesAreBogus(dets) {
  if (dets.length < 2) return false
  // All clustered at top-left?
  const topLefty = dets.filter(d => d.bbox[0] < 0.1 && d.bbox[1] < 0.1).length
  if (topLefty === dets.length) return true
  // Most pairs overlap heavily?
  let overlapPairs = 0
  const totalPairs = (dets.length * (dets.length - 1)) / 2
  for (let i = 0; i < dets.length; i++) {
    for (let j = i + 1; j < dets.length; j++) {
      if (iou(dets[i].bbox, dets[j].bbox) > 0.6) overlapPairs++
    }
  }
  return totalPairs > 0 && overlapPairs / totalPairs > 0.5
}

// Heuristic: does the model output look templated / lazy?
// Each flag returns { msg, why } so the UI can show a hover tooltip
// explaining the threshold that triggered it.
function assessQuality(dets) {
  const flags = []
  if (dets.length < 2) return flags
  // Duplicate notes
  const noteCounts = {}
  for (const d of dets) {
    const n = (d.notes || '').trim().toLowerCase()
    if (!n) continue
    noteCounts[n] = (noteCounts[n] || 0) + 1
  }
  const maxDup = Math.max(0, ...Object.values(noteCounts))
  if (maxDup >= 2) flags.push({
    msg: `${maxDup} detections share the same "notes" text — model is recycling boilerplate.`,
    why: 'Threshold: any "notes" string appears in ≥2 detections. A genuine analysis would write a different sentence per part.',
  })
  // Overlapping bboxes — area of intersection over union
  let overlapPairs = 0
  for (let i = 0; i < dets.length; i++) {
    for (let j = i + 1; j < dets.length; j++) {
      if (iou(dets[i].bbox, dets[j].bbox) > 0.6) overlapPairs++
    }
  }
  if (overlapPairs >= 1) flags.push({
    msg: `${overlapPairs} pair${overlapPairs === 1 ? '' : 's'} of detections have nearly-identical bounding boxes — model isn't actually localising.`,
    why: 'Threshold: pairs with IoU (intersection-over-union) > 0.6 are considered the same box. Real detections of distinct parts cannot overlap that much.',
  })
  // All bboxes at top-left
  const topLefty = dets.filter(d => d.bbox[0] < 0.1 && d.bbox[1] < 0.1).length
  if (topLefty >= 3 && topLefty / dets.length > 0.6) flags.push({
    msg: `${topLefty} detections sit at the top-left corner — model returned placeholder coordinates.`,
    why: 'Threshold: ≥3 boxes with x<0.1 AND y<0.1 AND >60% of all boxes. Models that didn\'t actually look often emit [0,0,…] as a default.',
  })
  // Generic notes substrings
  const generic = /(?:small smt part|main soc\/mcu|printed circuit board\.?$|unknown component)/i
  const genericCount = dets.filter(d => generic.test(d.notes || '')).length
  if (genericCount >= 2) flags.push({
    msg: `${genericCount} detections have generic boilerplate notes ("Main SoC/MCU…", "Small SMT part…"). Model isn't reading the image.`,
    why: 'Threshold: ≥2 notes match a regex of canned phrases like "Small SMT part" or "Main SoC/MCU on printed circuit board". These are filler text, not observations.',
  })
  // Pins are only VCC/GND
  const trivialPin = /^(vcc|gnd|3v3|5v|vdd|vss)$/i
  const trivialOnly = dets.filter(d => Array.isArray(d.pins) && d.pins.length > 0 && d.pins.every(p => trivialPin.test(p))).length
  if (trivialOnly >= 3) flags.push({
    msg: `${trivialOnly} detections list only VCC/GND-style pins — model is guessing, not reading the board.`,
    why: 'Threshold: ≥3 detections whose pin list contains only power/ground rails (VCC, GND, 3V3, 5V, VDD, VSS). Real chips have meaningful signal pins.',
  })
  return flags
}

function iou(a, b) {
  const [ax1, ay1, ax2, ay2] = a
  const [bx1, by1, bx2, by2] = b
  const ix1 = Math.max(ax1, bx1), iy1 = Math.max(ay1, by1)
  const ix2 = Math.min(ax2, bx2), iy2 = Math.min(ay2, by2)
  const iw = Math.max(0, ix2 - ix1), ih = Math.max(0, iy2 - iy1)
  const inter = iw * ih
  const aArea = Math.max(0, ax2 - ax1) * Math.max(0, ay2 - ay1)
  const bArea = Math.max(0, bx2 - bx1) * Math.max(0, by2 - by1)
  const union = aArea + bArea - inter
  return union > 0 ? inter / union : 0
}

async function callAnthropic() {
  const extras = (state.extraImages || []).map(e => ({
    type: 'image',
    source: { type: 'base64', media_type: e.mime, data: e.dataUrl.split(',')[1] },
  }))
  // Prompt caching: mark the long static prompt block as cacheable. The
  // image stays uncached because it changes every analysis. First call
  // writes the cache (full input price). Subsequent calls within ~5 min
  // (self-review, re-OCR, tile pass, correction) read it for 10% of the
  // input-token price — typically 60-80% savings on multi-call workflows.
  const content = [
    { type: 'image', source: { type: 'base64', media_type: state.imageMime, data: imageB64() } },
    ...extras,
    { type: 'text', text: buildPrompt(), cache_control: { type: 'ephemeral' } },
  ]
  const body = { model: state.model, max_tokens: 4096, messages: [{ role: 'user', content }] }
  const res = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'x-api-key': state.apiKey,
      'anthropic-version': '2023-06-01',
      'anthropic-dangerous-direct-browser-access': 'true',
    },
    body: JSON.stringify(body),
  })
  if (!res.ok) {
    const txt = await res.text()
    throw new Error(`Anthropic HTTP ${res.status} - ${txt.slice(0, 200)}`)
  }
  const data = await res.json()
  const text = (data.content || []).filter(c => c.type === 'text').map(c => c.text).join('\n').trim()
  // Anthropic returns separate counts when caching is involved:
  //   cache_creation_input_tokens — written into cache (full price)
  //   cache_read_input_tokens     — read from cache (10% of input price)
  //   input_tokens                — uncached input (image, etc., full price)
  const u = data.usage || {}
  const cacheRead   = u.cache_read_input_tokens   || 0
  const cacheWrite  = u.cache_creation_input_tokens || 0
  const realInput   = u.input_tokens || 0
  const usage = {
    input_tokens:  realInput + cacheWrite + cacheRead,
    output_tokens: u.output_tokens,
    cache_read_tokens:    cacheRead,
    cache_creation_tokens: cacheWrite,
    estimated_cost: estimateCostWithCache(state.model, realInput, cacheWrite, cacheRead, u.output_tokens),
  }
  return { detections: parseDetections(text), usage }
}

// Cost model that accounts for Anthropic's cache pricing:
//   - cached writes cost 1.25× normal input
//   - cached reads  cost 0.10× normal input
function estimateCostWithCache(model, realIn, cacheWrite, cacheRead, out) {
  const p = PRICING[model]
  if (!p) return null
  const inCost  = ((realIn || 0) * p.in
                 + (cacheWrite || 0) * p.in * 1.25
                 + (cacheRead  || 0) * p.in * 0.10) / 1e6
  const outCost = ((out || 0) * p.out) / 1e6
  return inCost + outCost
}

async function callGemini() {
  const extras = (state.extraImages || []).map(e => ({
    inline_data: { mime_type: e.mime, data: e.dataUrl.split(',')[1] },
  }))
  const body = {
    contents: [{
      parts: [
        { inline_data: { mime_type: state.imageMime, data: imageB64() } },
        ...extras,
        { text: buildPrompt() },
      ],
    }],
    generationConfig: {
      response_mime_type: 'application/json',
      max_output_tokens: 4096,
      temperature: 0.2,
    },
  }
  const url = `https://generativelanguage.googleapis.com/v1beta/models/${encodeURIComponent(state.model)}:generateContent?key=${encodeURIComponent(state.apiKey)}`
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify(body),
  })
  if (!res.ok) {
    const txt = await res.text()
    throw new Error(`Gemini HTTP ${res.status} - ${txt.slice(0, 200)}`)
  }
  const data = await res.json()
  const cand = (data.candidates || [])[0]
  const text = ((cand && cand.content && cand.content.parts) || [])
    .map(p => p.text || '').join('\n').trim()
  if (!text) throw new Error('Gemini returned no text. Full response: ' + JSON.stringify(data).slice(0, 200))
  const um = data.usageMetadata || {}
  const usage = {
    input_tokens:  um.promptTokenCount,
    output_tokens: um.candidatesTokenCount,
    estimated_cost: estimateCost(state.model, um.promptTokenCount, um.candidatesTokenCount),
  }
  return { detections: parseDetections(text), usage }
}

async function callOllama() {
  const host = (state.ollamaHost || 'http://localhost:11434').replace(/\/+$/, '')
  const body = {
    model: state.model,
    prompt: buildPrompt(),
    images: [imageB64()],
    stream: false,
    format: 'json',
    options: { temperature: 0.2 },
  }
  let res
  try {
    res = await fetch(host + '/api/generate', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify(body),
    })
  } catch (e) {
    throw new Error(`Cannot reach Ollama at ${host}. Is it running with OLLAMA_ORIGINS="*"? (${e.message})`)
  }
  if (!res.ok) {
    const txt = await res.text()
    throw new Error(`Ollama HTTP ${res.status} - ${txt.slice(0, 200)}`)
  }
  const data = await res.json()
  const text = (data.response || '').trim()
  if (!text) throw new Error('Ollama returned empty response.')
  const usage = {
    input_tokens:  data.prompt_eval_count,
    output_tokens: data.eval_count,
    estimated_cost: 0, // local
  }
  return { detections: parseDetections(text), usage }
}

function extractJson(text) {
  // Strip possible ```json fences just in case.
  let t = text.replace(/^```(?:json)?\s*/i, '').replace(/```\s*$/i, '').trim()
  try { return JSON.parse(t) } catch {}
  // Fallback: find first { … last }.
  const i = t.indexOf('{')
  const j = t.lastIndexOf('}')
  if (i >= 0 && j > i) {
    try { return JSON.parse(t.slice(i, j + 1)) } catch {}
  }
  return null
}

// ── Side panel + cross-reference with EOL-CHIP catalog ───────────────
let chipIndex = null    // {key → item} exact map
let chipFuse = null     // Fuse.js fuzzy matcher across all EOL chips

async function loadChipIndex() {
  if (chipIndex) return chipIndex
  try {
    const r = await fetch('./data/search_index.json?v=47')
    if (!r.ok) throw new Error('no index')
    const data = await r.json()
    chipIndex = {}
    const eolItems = []
    for (const item of data) {
      if (item.type !== 'eol') continue
      eolItems.push(item)
      const keys = []
      if (item.part_number) keys.push(item.part_number.toLowerCase())
      if (item.id) keys.push(String(item.id).toLowerCase())
      for (const k of keys) chipIndex[k] = item
    }
    // Fuzzy search is a best-effort enhancement. Load Fuse lazily and never let
    // a CDN failure wipe the exact-match index we already built above.
    try {
      const Fuse = await ensureFuse()
      chipFuse = new Fuse(eolItems, {
        keys: [
          { name: 'part_number', weight: 0.5 },
          { name: 'id',          weight: 0.3 },
          { name: 'title',       weight: 0.2 },
        ],
        threshold: 0.35,
        includeScore: true,
        minMatchCharLength: 3,
      })
    } catch {
      chipFuse = null  // exact-match lookups still work without fuzzy search
    }
  } catch {
    chipIndex = {}
  }
  return chipIndex
}

// Trim suffix tokens to get the family root. E.g. ESP32-WROOM-32 → ESP32-WROOM,
// STM32F407VGT6 → STM32F407, W25Q128JV → W25Q128, AT24C02CN → AT24C02.
function familyVariants(part) {
  const p = part.trim()
  const out = new Set([p])
  // Strip trailing -SUFFIX-SUFFIX, then -SUFFIX
  const dashed = p.split('-')
  for (let n = dashed.length - 1; n >= 1; n--) out.add(dashed.slice(0, n).join('-'))
  // Strip trailing alphanumeric grade suffixes (last 1–4 chars after a digit)
  const m = p.match(/^([A-Z]+\d+[A-Z]*\d*)([A-Z0-9]{1,6})$/i)
  if (m) out.add(m[1])
  // Strip everything after the last digit run (handles W25Q128JV → W25Q128)
  const m2 = p.match(/^([A-Z]+\d+)([A-Z]+\d*)?$/i)
  if (m2) out.add(m2[1])
  return [...out].filter(s => s.length >= 3)
}

function lookupChip(part) {
  if (!part) return null
  const idx = chipIndex || {}
  const p = part.toLowerCase().trim()
  // 1. Exact match
  if (idx[p]) return { item: idx[p], match: 'exact', score: 1 }
  // 2. Family-root match (strip suffix tokens)
  for (const v of familyVariants(part)) {
    const lv = v.toLowerCase()
    if (idx[lv]) return { item: idx[lv], match: 'family-root', score: 0.9 }
  }
  // 3. Fuzzy via Fuse.js
  if (chipFuse) {
    const hits = chipFuse.search(part).slice(0, 1)
    if (hits.length && hits[0].score < 0.3) {
      return { item: hits[0].item, match: 'fuzzy', score: 1 - hits[0].score }
    }
  }
  return null
}

// ── Attack Surface classification ────────────────────────────────────
// Organises (does NOT invent) the detections the model already produced into
// a hardware-researcher's attack surface. Keys off category + label + notes +
// attack_vectors + pins — the exact things the analyze prompt elicits.
const SURFACE_CLASSES = [
  { key: 'flash',     icon: '💾', label: 'SPI / external flash',    hint: 'Firmware store — clip a SOIC-8 and dump the image (flashrom / CH341A).' },
  { key: 'jtag',      icon: '🐞', label: 'JTAG / SWD debug',        hint: 'CPU debug port — halt core, dump RAM/firmware, defeat secure boot if unlocked.' },
  { key: 'uart',      icon: '🔌', label: 'UART / serial console',   hint: 'Serial console — frequently drops a boot log or root shell (try 115200 8N1).' },
  { key: 'i2c',       icon: '🧷', label: 'I²C / EEPROM',            hint: 'Config / secret store — sniff the bus or dump the EEPROM.' },
  { key: 'bootstrap', icon: '🎚️', label: 'Boot-strap / mode pins',  hint: 'Straps pick the boot source — lift or re-strap to force UART/USB recovery boot.' },
  { key: 'power',     icon: '⚡', label: 'Power / fault injection', hint: 'VCC rail + RESET — glitch / brown-out injection point and side-channel probe site.' },
  { key: 'rf',        icon: '📡', label: 'RF / radio',              hint: 'Wireless transceiver + antenna path — radio-side attack surface.' },
  { key: 'implant',   icon: '⚠️', label: 'Unpopulated / implant',   hint: 'Empty footprint — likely a depopulated debug pad or a supply-chain implant site.' },
  { key: 'debug',     icon: '🧪', label: 'Debug header / test pads', hint: 'Generic debug / test-access points brought out on the board.' },
]

function surfaceKeysFor(d) {
  const cat = String(d.category || '').toLowerCase()
  const hay = [d.label, d.notes, d.part_number, ...(d.attack_vectors || []), ...(d.pins || [])]
    .filter(Boolean).join(' ').toLowerCase()
  // word-boundary test for short/ambiguous tokens (tx, rx, swd…)
  const wb = (...ws) => ws.some(w => new RegExp('\\b' + w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\b', 'i').test(hay))
  const sub = (...ws) => ws.some(w => hay.includes(w))
  const keys = new Set()

  if (cat === 'empty_footprint') keys.add('implant')
  if (cat === 'flash' || sub('spi flash', 'serial flash', 'nor flash', 'soic-8', 'soic8') || wb('w25', 'mx25', 'gd25', '25q')) keys.add('flash')
  if (cat === 'eeprom' || wb('i2c', 'sda', 'scl', '24c', 'at24') || sub('i²c', 'eeprom')) keys.add('i2c')
  if (cat === 'radio' || wb('nrf', 'ble', 'lora') || sub('antenna', 'transceiver', 'wi-fi', 'wifi', 'bluetooth', 'zigbee', 'sub-ghz', '2.4ghz', ' rf ')) keys.add('rf')
  if (wb('jtag', 'swd', 'tck', 'tms', 'tdi', 'tdo', 'swclk', 'swdio', 'trst', 'ejtag', 'cjtag')) keys.add('jtag')
  if (wb('uart', 'rxd', 'txd', 'rx', 'tx', 'ftdi') || sub('serial console', 'boot console', '115200')) keys.add('uart')
  if (wb('boot', 'boot0', 'boot1', 'strap', 'cfg', 'mode') || sub('boot-strap', 'bootstrap', 'pin-mux', 'pinmux', 'boot mode')) keys.add('bootstrap')
  if (cat === 'power' || cat === 'regulator' || wb('vcc', 'vdd', 'reset', 'pmic', 'ldo') || sub('glitch', 'brown-out', 'brownout', 'decoupling', 'fault inject', 'power rail')) keys.add('power')
  if (cat === 'header' || cat === 'connector' || sub('debug pad', 'test point', 'test-point', 'test pad', 'test-pad')) {
    if (sub('debug', 'test', 'jtag', 'uart', 'serial') || cat === 'header') keys.add('debug')
  }
  return keys
}

// Maps class key -> {class, ids:[detId]}, in SURFACE_CLASSES order, non-empty only.
function classifyAttackSurface(dets) {
  const byKey = {}
  for (const d of dets) {
    for (const k of surfaceKeysFor(d)) (byKey[k] ||= []).push(d.id)
  }
  return SURFACE_CLASSES.filter(c => byKey[c.key]).map(c => ({ ...c, ids: byKey[c.key] }))
}

// Cross-link fusion: how many identified parts are EOL / carry known CVEs.
function attackSurfaceRisk(dets) {
  let eol = 0, withCve = 0, kev = 0
  for (const d of dets) {
    const m = lookupChip(d.part_number)
    if (!m) continue
    const c = m.item
    const st = String(c.status || '').toLowerCase()
    if (/obsolete|eol|last|nrnd|not for new/.test(st)) eol++
    if (c.cve_count) withCve++
    if (c.kev) kev++
  }
  return { eol, withCve, kev }
}

function renderAttackSurface(visible) {
  const classes = classifyAttackSurface(visible)
  if (!classes.length) return ''
  const risk = attackSurfaceRisk(visible)
  const riskBits = []
  if (risk.eol) riskBits.push(`${risk.eol} EOL/obsolete`)
  if (risk.withCve) riskBits.push(`${risk.withCve} with known CVEs`)
  if (risk.kev) riskBits.push(`${risk.kev} in CISA KEV`)
  const riskLine = riskBits.length
    ? `<div class="pcb-as-risk">⚠ Identified parts: ${riskBits.join(' · ')} <span class="pcb-as-risk-sub">(from EOL-CHIP threat data)</span></div>`
    : ''
  const chips = classes.map(c =>
    `<button class="pcb-as-chip" type="button" data-surface="${c.key}" title="${escapeHtml(c.hint)}">
       <span class="pcb-as-ico">${c.icon}</span>
       <span class="pcb-as-lbl">${escapeHtml(c.label)}</span>
       <span class="pcb-as-cnt">${c.ids.length}</span>
     </button>`).join('')
  return `<details class="pcb-attack-surface" open>
    <summary>🎯 Attack Surface <span class="pcb-as-note">click a class to highlight it on the board</span></summary>
    ${riskLine}
    <div class="pcb-as-grid">${chips}</div>
    <div class="pcb-as-hint" id="pcb-as-hint">Hover a class for what it means · click to isolate on the image · click again to clear.</div>
  </details>`
}

// Wire the Attack Surface chips: click -> highlight that class's boxes.
function wireAttackSurface() {
  const hintEl = document.getElementById('pcb-as-hint')
  els.panel.querySelectorAll('.pcb-as-chip').forEach(btn => {
    btn.addEventListener('click', () => {
      const key = btn.dataset.surface
      const cls = SURFACE_CLASSES.find(c => c.key === key)
      if (state.activeSurfaceKey === key) {
        state.activeSurfaceKey = null
        state.surfaceHighlightIds = null
        els.panel.querySelectorAll('.pcb-as-chip').forEach(b => b.classList.remove('pcb-as-chip--active'))
      } else {
        state.activeSurfaceKey = key
        const ids = classifyAttackSurface(visibleDetections()).find(c => c.key === key)?.ids || []
        state.surfaceHighlightIds = new Set(ids)
        els.panel.querySelectorAll('.pcb-as-chip').forEach(b => b.classList.toggle('pcb-as-chip--active', b === btn))
        if (hintEl && cls) hintEl.textContent = `${cls.icon} ${cls.label}: ${cls.hint}`
      }
      drawOverlay(state.selectedDetectionId)
    })
  })
}

async function renderPanel() {
  // A fresh render means the detection set changed — drop any stale
  // attack-surface highlight (detection ids are reassigned each analysis).
  state.surfaceHighlightIds = null
  state.activeSurfaceKey = null
  if (!state.detections.length) {
    els.panel.innerHTML = '<div class="pcb-panel-empty">No detections yet.</div>'
    return
  }
  await loadChipIndex()
  const visible = visibleDetections()
  const hidden  = state.detections.length - visible.length

  const qualityFlags = assessQuality(state.detections)
  const qualityBanner = qualityFlags.length
    ? `<div class="pcb-quality-banner">
         <strong>&#9888; Model output looks low-quality:</strong>
         <ul>${qualityFlags.map(f => `<li title="${escapeHtml(f.why)}">${escapeHtml(f.msg)} <span class="pcb-why">[?]</span></li>`).join('')}</ul>
         <div class="pcb-quality-hint">Try a larger model (Anthropic Opus, Gemini 2.5 Pro, or <code>llama3.2-vision:90b</code>) and/or upload a sharper image. Hover any item above to see exactly which threshold fired.</div>
       </div>`
    : ''

  const rawBlock = state.rawModelText
    ? `<details class="pcb-raw"><summary>Show raw model output</summary><pre>${escapeHtml(state.rawModelText.slice(0, 8000))}</pre></details>`
    : ''

  const banner = hidden > 0
    ? `<div class="pcb-filter-banner">${hidden} low-confidence detection${hidden === 1 ? '' : 's'} hidden (below ${els.optConf.value}%). Drag the slider down to see them.</div>`
    : ''
  if (!visible.length) {
    els.panel.innerHTML = qualityBanner + banner + '<div class="pcb-panel-empty">All detections were below the confidence threshold.</div>' + rawBlock
    return
  }
  const cards = visible.map(d => {
    const pal = palette()
    const color = pal[(d.id - 1) % pal.length]
    const chipMatch = lookupChip(d.part_number)
    const chip = chipMatch ? chipMatch.item : null
    // Multi-source datasheet links. We send a CLEANED part number — first
    // whitespace-separated token, stripped of trailing date codes like
    // "F30826" or package codes like "CLG400AGX1645". Many indices (esp.
    // AllDatasheet) only match the bare part number.
    const dsLinks = d.part_number ? datasheetLinks(d.part_number) : null
    const eolHref = chip ? `chip.html?id=${encodeURIComponent(chip.part_number || chip.id)}` : null
    const xrefBadges = []
    if (chip) {
      if (chip.kev) xrefBadges.push('<span class="mini-badge mb-kev">KEV</span>')
      if (chip.exploit_count) xrefBadges.push(`<span class="mini-badge mb-edb">EDB×${chip.exploit_count}</span>`)
      if (chip.msf_count) xrefBadges.push(`<span class="mini-badge mb-msf">MSF×${chip.msf_count}</span>`)
      if (chip.ghsa_count) xrefBadges.push(`<span class="mini-badge mb-ghsa">GHSA×${chip.ghsa_count}</span>`)
    }
    const matchLabel = chipMatch
      ? chipMatch.match === 'exact' ? 'exact match'
        : chipMatch.match === 'family-root' ? `family match → ${chip.part_number || chip.id}`
        : `fuzzy match → ${chip.part_number || chip.id} (${(chipMatch.score * 100).toFixed(0)}%)`
      : ''
    const pinsHtml = (d.pins && d.pins.length)
      ? `<div class="det-row"><b>Pins:</b> ${d.pins.map(p => `<code>${escapeHtml(p)}</code>`).join(' ')}</div>` : ''
    const atkHtml = (d.attack_vectors && d.attack_vectors.length)
      ? `<div class="det-row det-row--atk"><b>Attack vectors:</b><ul>${d.attack_vectors.map(a => `<li>${escapeHtml(a)}${attackRefs(d, a)}</li>`).join('')}</ul></div>` : ''
    const relatedRow = relatedResearchRow(d)
    const xref = chip
      ? `<div class="det-xref det-xref--hit">
           <b>Match in EOL-CHIP catalog</b> ${xrefBadges.join(' ')}
           ${matchLabel ? `<span class="det-match-kind">${escapeHtml(matchLabel)}</span>` : ''}
           <div>${escapeHtml(chip.title || '')} ${chip.status ? `&middot; <span class="det-status">${escapeHtml(chip.status)}</span>` : ''}</div>
           <a href="${eolHref}">Open chip article →</a>
         </div>`
      : (d.part_number
        ? `<div class="det-xref">No EOL-CHIP entry for <code>${escapeHtml(d.part_number)}</code> yet. <a href="https://github.com/iotsrg/eol-chip/blob/main/chips.yaml" target="_blank" rel="noopener">Add it →</a></div>`
        : '')
    // Compact summary row + collapsible detail.
    const conf = d.confidence != null ? Math.round(d.confidence * 100) : '?'
    const summaryBadges = xrefBadges.length ? xrefBadges.join(' ') : ''
    return `<div class="det-row-card" id="det-${d.id}">
      <div class="det-row-summary">
        <span class="det-row-num" style="background:${rgba(color, 1)}">${d.id}</span>
        <span class="det-row-label">
          ${escapeHtml(d.label || 'unknown')}
          ${d.part_number ? `<code class="det-row-pn">${escapeHtml(d.part_number)}</code>` : ''}
        </span>
        <span class="det-row-right">
          ${summaryBadges}
          <span class="det-row-conf">${conf}%</span>
        </span>
      </div>
      <div class="det-row-detail" hidden>
        <div class="det-meta">
          ${d.manufacturer ? `${escapeHtml(d.manufacturer)}` : '<span class="det-unknown">manufacturer unknown</span>'}
          ${d.category ? ` &middot; <span class="det-cat">${escapeHtml(d.category)}</span>` : ''}
        </div>
        ${d.notes ? `<div class="det-row">${escapeHtml(d.notes)}</div>` : ''}
        ${pinsHtml}
        ${atkHtml}
        ${relatedRow}
        ${xref}
        <div class="det-links">
          ${dsLinks ? `<span class="det-ds-strip"><b>Datasheets:</b> ${
            dsLinks.map(([label, href]) =>
              `<a href="${href}" target="_blank" rel="noopener">${label}</a>`
            ).join(' &middot; ')
          }</span>` : ''}
          <button class="det-wrong-btn" data-id="${d.id}" type="button" title="Tell the model what's actually here — it will re-analyze just this part with your hint.">&#9888; Wrong?</button>
        </div>
      </div>
    </div>`
  }).join('')
  // Traces block (if trace analysis has been run)
  const tracesBlock = (state.traces && state.traces.length)
    ? `<details class="pcb-traces" open><summary>&#128279; ${state.traces.length} trace${state.traces.length === 1 ? '' : 's'}
        (${state.traces.filter(t => t.ends_at_via).length} end at vias — cannot be followed further)</summary>
        <ul class="pcb-trace-list">${state.traces.map(t => {
          const fromLabel = labelForEndpoint(t.from)
          const toLabel   = t.ends_at_via ? 'via (inner layer)' : labelForEndpoint(t.to)
          const conf = t.confidence != null ? Math.round(t.confidence * 100) + '%' : '?'
          return `<li>
            <b>${escapeHtml(fromLabel)}</b> &rarr; ${escapeHtml(toLabel)}
            <span class="pcb-trace-conf">${conf}</span>
            ${t.observation ? `<div class="pcb-trace-obs">${escapeHtml(t.observation)}</div>` : ''}
          </li>`
        }).join('')}</ul>
        <div class="pcb-trace-warn">&#9888; Top-layer visible-copper only. Inner layers, vias, BGA pin routing and traces under solder mask cannot be followed from a photo. Verify with a continuity probe.</div>
      </details>`
    : ''

  const surfaceBlock = renderAttackSurface(visible)
  els.panel.innerHTML = qualityBanner + surfaceBlock + banner + cards + tracesBlock + rawBlock
  if (shell.detCount) shell.detCount.textContent = visible.length
  wireAttackSurface()

  els.panel.querySelectorAll('.det-row-card').forEach(card => {
    const id = parseInt(card.id.slice(4), 10)
    const summary = card.querySelector('.det-row-summary')
    const detail  = card.querySelector('.det-row-detail')
    summary?.addEventListener('mouseenter', () => drawOverlay(state.selectedDetectionId || id))
    summary?.addEventListener('mouseleave', () => drawOverlay(state.selectedDetectionId || null))
    summary?.addEventListener('click', () => {
      const wasOpen = !detail.hasAttribute('hidden')
      els.panel.querySelectorAll('.det-row-detail').forEach(d2 => d2.setAttribute('hidden', ''))
      if (!wasOpen) detail.removeAttribute('hidden')
      selectDetection(id)
    })
  })

  // "Wrong?" buttons — user-feedback correction loop (#5).
  els.panel.querySelectorAll('.det-wrong-btn').forEach(btn => {
    btn.addEventListener('click', e => {
      e.stopPropagation()
      const id = parseInt(btn.dataset.id, 10)
      const d = state.detections.find(x => x.id === id)
      if (!d) return
      const note = prompt(
        `What's actually here?\n\nThe model identified detection #${d.id} as:\n` +
        `  ${d.label}${d.part_number ? ` (${d.part_number})` : ''}\n\n` +
        `Tell it what it got wrong — e.g. "this is NOR flash, not SDRAM" or ` +
        `"the marking actually reads HY29LV800BT".`,
        ''
      )
      if (note && note.trim()) correctDetection(d, note.trim())
    })
  })
}

// Build a small "References" strip under each attack-vector bullet.
// Links search EMB3D, the open web, and Exploit-DB using the part number
// (when known) plus the most informative keywords pulled from the vector text.
// Cleanup a marking returned by the model into something datasheet
// indices can match. The model often returns the full silkscreen
// ("XC7Z010 CLG400AGX1645", "MT1379GE 0335-CAB3 F30826") — that whole
// blob doesn't match most datasheet sites, which only index the bare
// part number. Take the FIRST whitespace token; if that still looks
// like it has a date code suffix, also strip trailing digits-and-dashes
// after a clear part-number prefix.
function cleanPartNumber(raw) {
  if (!raw) return ''
  let s = String(raw).trim().split(/\s+/)[0]
  // Drop trailing date/lot suffix: an alphanumeric core followed by
  // a dash + 4-6 chars of digits/letters is almost always a date code.
  s = s.replace(/-(?:[A-Z0-9]{4,7})$/i, '')
  return s.replace(/[.,;]+$/, '')
}

// Multi-source datasheet links. Returns [label, url] pairs; we render
// them as a strip. When one site doesn't have the chip the others
// usually do, and the Google PDF fallback nearly always finds something.
function datasheetLinks(rawPart) {
  const part = cleanPartNumber(rawPart)
  if (!part) return null
  const q = encodeURIComponent(part)
  return [
    ['AllDatasheet',     `https://www.alldatasheet.com/search.jsp?Searchword=${q}`],
    ['Octopart',         `https://octopart.com/search?q=${q}`],
    ['DatasheetArchive', `https://www.datasheetarchive.com/?q=${q}`],
    ['DatasheetCatalog', `https://www.datasheetcatalog.com/search.asp?q=${q}`],
    ['Google PDF',       `https://www.google.com/search?q=${q}+datasheet+filetype:pdf`],
  ]
}

function attackRefs(d, vectorText) {
  const part = (d.part_number || d.label || '').trim()
  const kw = vectorKeywords(vectorText)
  const baseQuery = [part, kw].filter(Boolean).join(' ').trim()
  if (!baseQuery) return ''
  const q = encodeURIComponent(baseQuery)
  // EMB3D doesn't have a public search API, so we go via a site-restricted Google.
  const emb3d = `https://www.google.com/search?q=${encodeURIComponent('site:emb3d.mitre.org ' + (kw || part))}`
  const web   = `https://www.google.com/search?q=${q}`
  const edb   = `https://www.exploit-db.com/search?q=${encodeURIComponent(part || kw)}`
  return ` <span class="atk-refs">[<a href="${emb3d}" target="_blank" rel="noopener" title="Search MITRE EMB3D for this threat type">EMB3D</a> &middot; <a href="${web}" target="_blank" rel="noopener" title="Web search for this attack on this part">web</a> &middot; <a href="${edb}" target="_blank" rel="noopener" title="Exploit-DB search">EDB</a>]</span>`
}

// Heuristic: pull the most informative ~3–5 words out of an attack-vector
// sentence so the search query isn't a paragraph.
const STOP = new Set(('a an the and or but if to of in on at for with via try is are be has have can may could might it its this that these those use using used dump dumping access accessing'.split(' ')))
function vectorKeywords(text) {
  if (!text) return ''
  // Strip parens, normalise whitespace
  const cleaned = text.replace(/\([^)]*\)/g, ' ').replace(/[—–-]/g, ' ').replace(/\s+/g, ' ')
  const words = cleaned.split(/[^A-Za-z0-9_.+/-]+/).filter(Boolean)
  const kept = []
  for (const w of words) {
    const lw = w.toLowerCase()
    if (STOP.has(lw)) continue
    if (w.length <= 1) continue
    kept.push(w)
    if (kept.length >= 5) break
  }
  return kept.join(' ')
}

// Per-detection "Related research" strip — broader searches keyed on the
// part as a whole, useful when the model didn't list attack_vectors.
function relatedResearchRow(d) {
  const part = (d.part_number || d.label || '').trim()
  if (!part) return ''
  const q = encodeURIComponent(part)
  const links = [
    [`https://www.google.com/search?q=${encodeURIComponent('site:emb3d.mitre.org ' + part)}`, 'EMB3D'],
    [`https://www.google.com/search?q=${q}+security+vulnerability`,                            'Web search'],
    [`https://scholar.google.com/scholar?q=${q}+attack`,                                       'Scholar'],
    [`https://www.exploit-db.com/search?q=${q}`,                                                'Exploit-DB'],
    [`https://hackaday.com/?s=${q}`,                                                            'Hackaday'],
    [`https://nvd.nist.gov/vuln/search/results?query=${q}`,                                     'NVD CVEs'],
  ]
  return `<div class="det-row det-row--refs"><b>Related research:</b> ${
    links.map(([h, l]) => `<a href="${h}" target="_blank" rel="noopener">${l}</a>`).join(' &middot; ')
  }</div>`
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, c => (
    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
  ))
}
// Stricter — for HTML attribute *values*. Same as escapeHtml today; kept
// distinct so we can tighten attribute-context rules later without touching
// text-context callers.
function escapeHtmlAttr(s) { return escapeHtml(s) }

// ── Trace analysis ────────────────────────────────────────────────────
// Ask the model to follow visible top-layer copper between detections.
// Honest about limits: vias / inner layers / under-BGA routing aren't
// followable from a photo. Returns observations + confidence; rendered as
// arrows/dashed segments on the canvas overlay (drawn by drawOverlay).
async function runTraceAnalysis() {
  if (!state.detections.length || !state.imageDataUrl) {
    setStatus('error', 'Run analyze first — trace analysis needs detections to anchor to.')
    return
  }
  const p = PROVIDERS[state.provider]
  if (p.needsKey && !state.apiKey) { setStatus('error', `No ${p.label} key for trace analysis.`); return }
  setStatus('info', 'Trace analysis: following visible top-layer copper between detections…')

  const detList = state.detections.map((d, i) => ({
    id: i + 1,
    label: d.label,
    bbox: d.bbox,
    pins: d.pins || [],
  }))

  state._oneShotPrompt = `You are looking at the same PCB image. Detections from a previous pass:
${JSON.stringify(detList, null, 2)}

Your task: identify VISIBLE COPPER TRACES on the TOP LAYER ONLY that connect one detection to another (or to a clear via where the trace disappears into an inner layer).

Hard rules — be honest about what you cannot see:
- ONLY report traces you can VISUALLY follow on the top copper. Do not assume.
- If a trace goes into a via (small drilled hole, usually a circle with copper ring) and you cannot see where it re-emerges, mark "ends_at_via": true and "to": null.
- Traces UNDER A BGA chip are NOT visible. Do not invent connections to BGA pins.
- Traces under thick silkscreen or solder mask blobs are NOT visible.
- If you are not >70% confident the trace endpoints are correct, do not include it.

Return ONLY this JSON object:
{"traces": [
  {
    "from": {"detection_id": <int>, "pin_label": "<e.g. TX, or empty>", "pos": [<x>,<y>]},
    "to":   {"detection_id": <int>, "pin_label": "<e.g. pin 79, or empty>", "pos": [<x>,<y>]} OR null,
    "ends_at_via": <bool>,
    "via_position": [<x>,<y>] OR null,
    "confidence": <0-1 float>,
    "observation": "<one sentence describing what you literally see on the top copper>"
  }
]}

All coordinates are NORMALIZED 0-1 of the full image (origin top-left).
No prose, no markdown fences. If you cannot confidently identify ANY traces, return {"traces": []}.`

  const startedAt = Date.now()
  try {
    let result
    if (state.provider === 'anthropic')   result = await callAnthropic()
    else if (state.provider === 'gemini') result = await callGemini()
    else                                  result = await callOllama()
    // The trace prompt returns {"traces":...} not {"detections":...}. Our
    // parsers look for `detections`; ignore the parser result and re-parse
    // the saved raw text directly.
    const rawText = state.rawModelText || ''
    let parsed = null
    try { parsed = JSON.parse(rawText.replace(/^```(?:json)?\s*/i,'').replace(/```\s*$/i,'').trim()) } catch {}
    if (!parsed) { try { parsed = extractJson(rawText) } catch {} }
    const traces = (parsed && Array.isArray(parsed.traces)) ? parsed.traces : []
    state.traces = traces
    setStatus('ok',
      `Trace analysis done in ${((Date.now()-startedAt)/1000).toFixed(1)}s — ` +
      `${traces.length} trace${traces.length === 1 ? '' : 's'} identified ` +
      `(${traces.filter(t => t.ends_at_via).length} end at vias).`)
    fitCanvas(); drawOverlay(state.selectedDetectionId)
    await renderPanel()
  } catch (e) {
    console.error(e)
    setStatus('error', 'Trace analysis failed: ' + (e.message || e))
  } finally {
    state._oneShotPrompt = null
  }
}

// ── #2 Auto re-OCR every detection ───────────────────────────────────
// After analyze, optionally crop each detection at native source resolution
// and re-run with a focused "read the marking exactly" prompt.
async function autoReOcrAll() {
  if (!state.detections.length || !state.imageDataUrl) return
  // Probe the source image to show the user what resolution we're actually using —
  // this is the #1 confusion point ("do I need to zoom first?" → no, we use the original file).
  const srcDims = await new Promise(res => {
    const i = new Image()
    i.onload = () => res(`${i.naturalWidth}×${i.naturalHeight}`)
    i.onerror = () => res('?')
    i.src = state.imageDataUrl
  })
  setStatus('info', `🔬 Auto-zoom started. Using your original ${srcDims} px upload (your screen zoom doesn't matter). Re-reading ${state.detections.length} detections, one per API call…`)
  let okN = 0, failN = 0
  for (const d of state.detections) {
    try { await reanalyzeCrop(d); okN++ } catch { failN++ }
  }
  setStatus('ok', `🔬 Auto-zoom complete (${okN} updated, ${failN} skipped).`)
  await renderPanel()
}

// ── Image cropping helpers (used by tile pass + correction loop) ─────
function loadImage(dataUrl) {
  return new Promise((res, rej) => {
    const i = new Image(); i.onload = () => res(i); i.onerror = rej; i.src = dataUrl
  })
}
function cropToDataUrl(srcImg, fx, fy, fw, fh, maxLong) {
  const px = Math.round(fx * srcImg.width)
  const py = Math.round(fy * srcImg.height)
  const pw = Math.round(fw * srcImg.width)
  const ph = Math.round(fh * srcImg.height)
  const longEdge = Math.max(pw, ph)
  const scale = longEdge > maxLong ? maxLong / longEdge : 1
  const c = document.createElement('canvas')
  c.width = Math.round(pw * scale); c.height = Math.round(ph * scale)
  const ctx = c.getContext('2d')
  ctx.imageSmoothingQuality = 'high'
  ctx.drawImage(srcImg, px, py, pw, ph, 0, 0, c.width, c.height)
  let mime = 'image/png'
  let url = c.toDataURL(mime)
  if (url.length > 4_500_000) { mime = 'image/jpeg'; url = c.toDataURL(mime, 0.9) }
  return url
}

// ── #1 Tile-based detection pass ─────────────────────────────────────
// Split image into 2×2 quadrants, detect on each, translate tile-local
// bboxes to global coords, merge into state.detections via IoU dedup.
async function tilePass() {
  if (!state.imageDataUrl) return
  const p = PROVIDERS[state.provider]
  if (p.needsKey && !state.apiKey) { setStatus('error', 'No key for tile pass'); return }
  setStatus('info', 'Tile-based scan: re-analyzing 4 quadrants for missed chips…')

  const srcImg = await loadImage(state.imageDataUrl)
  const tiles = [
    { name: 'top-left',     x: 0,    y: 0,    w: 0.5, h: 0.5 },
    { name: 'top-right',    x: 0.5,  y: 0,    w: 0.5, h: 0.5 },
    { name: 'bottom-left',  x: 0,    y: 0.5,  w: 0.5, h: 0.5 },
    { name: 'bottom-right', x: 0.5,  y: 0.5,  w: 0.5, h: 0.5 },
  ]

  let added = 0
  for (const t of tiles) {
    try {
      const tileDataUrl = cropToDataUrl(srcImg, t.x, t.y, t.w, t.h, 1568)
      const prevImg = state.imageDataUrl, prevMime = state.imageMime
      state.imageDataUrl = tileDataUrl
      state.imageMime = tileDataUrl.startsWith('data:image/png') ? 'image/png' : 'image/jpeg'
      state._oneShotPrompt =
        `You are looking at the ${t.name} QUADRANT of a larger PCB image. ` +
        `List every distinct chip, header, connector or notable component you can see in THIS quadrant only. ` +
        `Coordinates must be normalized 0–1 RELATIVE TO THIS QUADRANT (not the full image). ` +
        `Return ONLY: {"detections": [ ... ]}. Same schema as the regular analyze prompt. Be conservative — don't invent.`
      let result
      if (state.provider === 'anthropic')   result = await callAnthropic()
      else if (state.provider === 'gemini') result = await callGemini()
      else                                  result = await callOllama()
      const raw = Array.isArray(result) ? result : result.detections
      state.imageDataUrl = prevImg; state.imageMime = prevMime
      state._oneShotPrompt = null
      const global = raw.map(d => ({
        ...d,
        bbox: [
          t.x + d.bbox[0] * t.w,
          t.y + d.bbox[1] * t.h,
          t.x + d.bbox[2] * t.w,
          t.y + d.bbox[3] * t.h,
        ],
      }))
      for (const cand of global) {
        const overlaps = state.detections.some(d => iou(d.bbox, cand.bbox) > 0.3)
        if (!overlaps) {
          state.detections.push({ ...cand, id: state.detections.length + 1, _from_tile: t.name })
          added++
        }
      }
    } catch (e) {
      console.warn(`Tile ${t.name} failed:`, e)
      state._oneShotPrompt = null
    }
  }
  setStatus('ok', `Tile pass complete. Added ${added} new detection${added === 1 ? '' : 's'} from quadrant scan.`)
  fitCanvas(); drawOverlay()
  await renderPanel()
}

// ── #4 Multi-model consensus mode ────────────────────────────────────
// Query each cloud provider with a saved key in parallel; keep detections
// where ≥2 providers' bboxes overlap (IoU>0.4).
async function consensusPass() {
  const providersWithKeys = Object.entries(PROVIDERS).filter(([id, cfg]) => {
    if (!cfg.needsKey) return false
    return !!getKey(id)
  })
  if (providersWithKeys.length < 2) {
    setStatus('error', 'Consensus needs keys saved for ≥2 providers. Open Settings, save another key.')
    return
  }
  setStatus('info', `Consensus mode: querying ${providersWithKeys.length} providers in parallel…`)

  const calls = providersWithKeys.map(async ([id, cfg]) => {
    const prevProvider = state.provider, prevKey = state.apiKey, prevModel = state.model
    state.provider = id
    state.apiKey   = getKey(id)
    state.model    = localStorage.getItem(modelLsFor(id)) || cfg.defaultModel
    try {
      let result
      if (id === 'anthropic') result = await callAnthropic()
      else if (id === 'gemini') result = await callGemini()
      else result = await callOllama()
      const dets = Array.isArray(result) ? result : result.detections
      return { provider: id, dets }
    } catch (e) {
      console.warn(`Consensus ${id} failed:`, e)
      return { provider: id, dets: [] }
    } finally {
      state.provider = prevProvider; state.apiKey = prevKey; state.model = prevModel
    }
  })
  const results = await Promise.all(calls)

  const allDets = []
  for (const r of results) for (const d of r.dets) allDets.push({ ...d, _from: r.provider })
  const consensus = []
  for (const d of allDets) {
    const agreements = new Set([d._from])
    for (const other of allDets) {
      if (other === d || other._from === d._from) continue
      if (iou(d.bbox, other.bbox) > 0.4) agreements.add(other._from)
    }
    if (agreements.size >= 2 && !consensus.some(c => iou(c.bbox, d.bbox) > 0.6)) {
      consensus.push({
        ...d,
        notes: `[consensus: ${[...agreements].join(', ')}] ${d.notes || ''}`.trim(),
        confidence: Math.min(1, (d.confidence || 0.7) + 0.1 * (agreements.size - 1)),
        _consensus_count: agreements.size,
      })
    }
  }
  state.detections = consensus.map((d, i) => ({ ...d, id: i + 1 }))
  if (!state.detections.length) {
    setStatus('info', 'Consensus mode: 0 detections were confirmed by ≥2 providers.')
  } else {
    setStatus('ok', `Consensus complete: ${state.detections.length} detections agreed across ${providersWithKeys.length} providers.`)
  }
  fitCanvas(); drawOverlay()
  await renderPanel()
}

// ── #5 User-feedback correction loop ─────────────────────────────────
// User clicks "wrong?" on a detection card, types what's actually there,
// we crop and ask the model to re-identify with the user's hint.
async function correctDetection(d, userNote) {
  if (!d || !userNote || !state.imageDataUrl) return
  const p = PROVIDERS[state.provider]
  if (p.needsKey && !state.apiKey) { setStatus('error', 'No key for correction'); return }
  setStatus('info', `Applying user correction to #${d.id}…`)
  const srcImg = await loadImage(state.imageDataUrl)
  const tileUrl = cropToDataUrl(srcImg,
    Math.max(0, d.bbox[0] - 0.05),
    Math.max(0, d.bbox[1] - 0.05),
    Math.min(1, d.bbox[2] - d.bbox[0] + 0.10),
    Math.min(1, d.bbox[3] - d.bbox[1] + 0.10),
    1024)
  const prevImg = state.imageDataUrl, prevMime = state.imageMime
  state.imageDataUrl = tileUrl
  state.imageMime = tileUrl.startsWith('data:image/png') ? 'image/png' : 'image/jpeg'
  state._oneShotPrompt = `You previously identified this CROPPED component as:
  ${JSON.stringify({ label: d.label, part_number: d.part_number, manufacturer: d.manufacturer, category: d.category, notes: d.notes })}

A human reviewer says this is wrong and reports: "${userNote}"

Take their feedback into account and re-identify the component IN THIS CROP. Look at the marking again, the package, anything you can see.

Return ONE JSON object: {"detections":[{"label":"…","part_number":"…","manufacturer":"…","category":"…","confidence":0.0-1.0,"bbox":[0,0,1,1],"notes":"…","pins":[],"attack_vectors":[]}]}

The bbox MUST be [0,0,1,1] (the whole crop). No prose, no markdown fences.`
  try {
    let result
    if (state.provider === 'anthropic') result = await callAnthropic()
    else if (state.provider === 'gemini') result = await callGemini()
    else result = await callOllama()
    const corrected = (Array.isArray(result) ? result : result.detections)[0]
    if (corrected) {
      Object.assign(d, {
        label: corrected.label || d.label,
        part_number: corrected.part_number || d.part_number,
        manufacturer: corrected.manufacturer || d.manufacturer,
        category: corrected.category || d.category,
        notes: corrected.notes ? `[user-corrected: ${userNote}] ${corrected.notes}` : d.notes,
        confidence: corrected.confidence ?? d.confidence,
      })
      setStatus('ok', `Correction applied to #${d.id}.`)
    } else {
      setStatus('error', 'Correction returned no detection.')
    }
  } catch (e) {
    setStatus('error', 'Correction failed: ' + (e.message || e))
  } finally {
    state.imageDataUrl = prevImg
    state.imageMime = prevMime
    state._oneShotPrompt = null
    drawOverlay()
    await renderPanel()
  }
}

// ── Toolbar wiring (palette, history, crop, retry, export, test plan) ─
const tb = {
  bar:       document.getElementById('pcb-toolbar'),
  stamp:     document.getElementById('pcb-run-stamp'),
  retry:     document.getElementById('btn-retry'),
  rerunOther:document.getElementById('btn-rerun-other'),
  crop:      document.getElementById('btn-crop'),
  testplan:  document.getElementById('btn-testplan'),
  exportMd:  document.getElementById('btn-export-md'),
  exportJson:document.getElementById('btn-export-json'),
  optCb:     document.getElementById('opt-cb'),
  history:   document.getElementById('btn-history'),
  historyPanel: document.getElementById('pcb-history'),
}

const PALETTE_LS = 'eol-pcb-palette'
try {
  const saved = localStorage.getItem(PALETTE_LS)
  if (saved === 'cb' || saved === 'default') state.palette = saved
} catch {}
if (tb.optCb) {
  tb.optCb.checked = state.palette === 'cb'
  tb.optCb.addEventListener('change', () => {
    state.palette = tb.optCb.checked ? 'cb' : 'default'
    try { localStorage.setItem(PALETTE_LS, state.palette) } catch {}
    if (state.detections.length) { drawOverlay(); renderPanel() }
  })
}

function showToolbar() {
  if (!tb.bar) return
  tb.bar.style.display = ''
  updateRunStamp()
}
function updateRunStamp() {
  if (!tb.stamp) return
  const r = state.lastRun
  if (!r) { tb.stamp.textContent = ''; return }
  const t = new Date(r.when).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
  const tok = (r.tokensIn != null || r.tokensOut != null)
    ? ` · ${r.tokensIn ?? '?'} in / ${r.tokensOut ?? '?'} out tok`
    : ''
  const cost = r.cost ? ` · est $${r.cost.toFixed(4)}` : (r.provider === 'ollama' ? ' · local (free)' : '')
  tb.stamp.innerHTML = `<b>${escapeHtml(r.providerLabel)}</b> · <code>${escapeHtml(r.model)}</code> · ${t} · ${(r.durationMs/1000).toFixed(1)}s${tok}${cost}`
}

// Retry: same provider, same model, same image.
tb.retry?.addEventListener('click', () => analyze())
// Re-run on a different provider — cycle to the next one that has a key/host.
tb.rerunOther?.addEventListener('click', () => {
  const order = ['anthropic', 'gemini', 'ollama']
  const others = order.filter(p => p !== state.provider)
  for (const p of others) {
    const cfg = PROVIDERS[p]
    const hasKey = !cfg.needsKey || !!getKey(p)
    if (hasKey) {
      const r = document.querySelector(`input[name=provider][value=${p}]`)
      r.checked = true; r.dispatchEvent(new Event('change'))
      setTimeout(() => analyze(), 50)
      return
    }
  }
  setStatus('error', 'No other provider has a saved key. Save one in step 1 first.')
})

// Self-review: send the current detections + image back to the same model
// with a review-focused prompt. The model checks its own output for
// (a) missed chips in corners/edges, (b) label↔notes↔category contradictions,
// (c) OCR misreads. Replaces state.detections with the corrected list.
const btnReview = document.getElementById('btn-review')
btnReview?.addEventListener('click', () => runSelfReviewPass())

// Trace analysis button — only meaningful after analyze has produced detections.
const btnTraces = document.getElementById('btn-traces')
btnTraces?.addEventListener('click', () => runTraceAnalysis())

// Auto-zoom / re-OCR every detection at native resolution.
// One-click equivalent of toggling opt-auto-reocr AND re-running analyze,
// but operates on the EXISTING detections — no second full-board pass.
const btnReocrAll = document.getElementById('btn-reocr-all')
btnReocrAll?.addEventListener('click', async () => {
  if (!state.detections.length) {
    setStatus('error', 'No detections to re-read. Click Analyze first.')
    return
  }
  if (!state.imageDataUrl) { setStatus('error', 'No image loaded.'); return }
  const p = PROVIDERS[state.provider]
  if (p.needsKey && !state.apiKey) { setStatus('error', `No ${p.label} key.`); return }
  const n = state.detections.length
  if (n > 8 && !confirm(`Auto-zoom will send ${n} extra calls (one per detection) to ${p.label}. Continue?`)) return
  btnReocrAll.disabled = true
  try { await autoReOcrAll() }
  finally { btnReocrAll.disabled = false }
})

async function runSelfReviewPass() {
  if (!state.detections.length) {
    setStatus('error', 'No detections to review. Click Analyze first.')
    return
  }
  if (!state.imageDataUrl) {
    setStatus('error', 'No image loaded.')
    return
  }
  const p = PROVIDERS[state.provider]
  if (p.needsKey && !state.apiKey) {
    setStatus('error', `No ${p.label} key for self-review.`)
    return
  }
  if (btnReview) btnReview.disabled = true
  setStatus('info', `Self-review pass: re-examining ${state.detections.length} detection${state.detections.length === 1 ? '' : 's'} against the image…`)

  // Strip helper fields the review prompt shouldn't see (id is reassigned
  // client-side; xrefs are computed downstream).
  const cleanCurrent = state.detections.map(d => ({
    label: d.label,
    part_number: d.part_number,
    manufacturer: d.manufacturer,
    category: d.category,
    confidence: d.confidence,
    bbox: d.bbox,
    notes: d.notes,
    pins: d.pins || [],
    attack_vectors: d.attack_vectors || [],
  }))

  state._oneShotPrompt = buildReviewPrompt(cleanCurrent)
  const startedAt = Date.now()
  try {
    let result
    if (state.provider === 'anthropic')   result = await callAnthropic()
    else if (state.provider === 'gemini') result = await callGemini()
    else                                  result = await callOllama()
    const corrected = Array.isArray(result) ? result : result.detections
    const usage = Array.isArray(result) ? null : result.usage

    if (!corrected || !corrected.length) {
      setStatus('info', 'Self-review returned an empty list — keeping original detections unchanged.')
      return
    }

    // Diff: how many net changes?
    const beforeIds = state.detections.map(d => `${d.label}|${d.part_number}|${d.category}`).sort()
    const afterIds  = corrected.map(d => `${d.label}|${d.part_number}|${d.category}`).sort()
    const added   = afterIds.filter(x => !beforeIds.includes(x)).length
    const removed = beforeIds.filter(x => !afterIds.includes(x)).length
    const same    = beforeIds.length - removed
    const total   = corrected.length

    state.detections = corrected.map((d, i) => ({ ...d, id: i + 1 }))
    state.selectedDetectionId = null

    // Mark the run stamp so the user knows this is the post-review state.
    if (state.lastRun) {
      state.lastRun.reviewed = true
      state.lastRun.reviewDurationMs = Date.now() - startedAt
      state.lastRun.reviewTokensIn  = usage?.input_tokens ?? null
      state.lastRun.reviewTokensOut = usage?.output_tokens ?? null
      state.lastRun.reviewCost      = usage?.estimated_cost ?? null
    }

    fitCanvas()
    drawOverlay()
    await renderPanel()
    updateRunStamp()
    setStatus('ok',
      `Self-review done in ${((Date.now() - startedAt)/1000).toFixed(1)}s — ` +
      `${total} detections after review (${same} unchanged, ${added} added, ${removed} removed/corrected)` +
      `${state.lastRun?.reviewCost ? ` · est. $${state.lastRun.reviewCost.toFixed(4)}` : ''}.`)
  } catch (e) {
    console.error(e)
    setStatus('error', 'Self-review failed: ' + (e.message || e))
  } finally {
    if (btnReview) btnReview.disabled = false
    state._oneShotPrompt = null
  }
}

function buildReviewPrompt(current) {
  return `You ran an initial vision-detection pass on this PCB image and produced the JSON below. Now review your own output carefully against the same image — DO NOT trust your previous reading; look at the image again.

Find THREE specific classes of error and return the FULL corrected detection list:

(a) MISSED CHIPS — scan the corners, edges, and densely-packed areas of the image. Did you miss any TSOP, QFP, QFN, BGA, SOIC, SOT, headers, crystals, or other ICs? Add new detections for anything you find.

(b) INTERNAL CONTRADICTIONS — for each existing detection, cross-check label / category / notes:
   - If "label" says "SDRAM" but "notes" says "actually a parallel NOR flash", the SDRAM label is wrong. Correct label AND category.
   - If "category" doesn't match the package type or function described in notes, fix the category.
   - If "label" uses a vendor name (e.g. "MStar/Macroblock") but the visible logo on the chip is a different vendor's, use the vendor whose logo is actually on the chip.

(c) PART-NUMBER OCR — for each detection, look at the silkscreen marking in the image one more time. Did you misread any character? Common confusions to recheck: V↔LV, 0↔O, 1↔I, 8↔B, S↔5, G↔6. If you genuinely cannot read a marking, set "part_number" to "" rather than emit a wrong guess.

YOUR PREVIOUS OUTPUT:
${JSON.stringify({ detections: current }, null, 2)}

Return the FULL corrected list — keep correct entries unchanged byte-for-byte, fix wrong ones, add missed ones. Format: {"detections": [ ... ]}. Same schema as your previous output. No prose, no markdown fences. If everything is already correct, return the same list unchanged.`
}

// Crop & re-OCR — when a detection is selected, send just that bbox at native
// resolution back to the model with a focused "read the marking exactly" prompt.
tb.crop?.addEventListener('click', async () => {
  const d = state.detections.find(x => x.id === state.selectedDetectionId)
  if (!d) {
    setStatus('error', '🔎 needs a detection selected first. Click any card in the RIGHT panel (or any box on the image), then click 🔎 again. Or use 🔬 to do all detections at once.')
    // Flash the detections panel to draw the eye
    const panel = document.getElementById('pcb-detections') || document.getElementById('detections-pane')
    if (panel) {
      panel.style.transition = 'box-shadow .25s'
      panel.style.boxShadow = '0 0 0 3px var(--accent, #4ea1ff)'
      setTimeout(() => { panel.style.boxShadow = '' }, 1200)
    }
    return
  }
  await reanalyzeCrop(d)
})

async function reanalyzeCrop(d) {
  if (!state.imageDataUrl) return
  const p = PROVIDERS[state.provider]
  if (p.needsKey && !state.apiKey) { setStatus('error', `No ${p.label} key.`); return }
  setStatus('info', `Re-OCR'ing detection #${d.id} (${d.label || d.part_number || ''})…`)
  // Load source into an image for cropping
  const srcImg = await new Promise((res, rej) => {
    const i = new Image(); i.onload = () => res(i); i.onerror = rej; i.src = state.imageDataUrl
  })
  const [x1, y1, x2, y2] = d.bbox
  // Expand bbox by 15% margin so we get context
  const m = 0.15
  const w = (x2 - x1), h = (y2 - y1)
  const cx1 = Math.max(0, x1 - w * m), cy1 = Math.max(0, y1 - h * m)
  const cx2 = Math.min(1, x2 + w * m), cy2 = Math.min(1, y2 + h * m)
  const px = Math.round(cx1 * srcImg.width),  py = Math.round(cy1 * srcImg.height)
  const pw = Math.round((cx2 - cx1) * srcImg.width), ph = Math.round((cy2 - cy1) * srcImg.height)
  if (pw < 20 || ph < 20) { setStatus('error', 'Bounding box too small to crop.'); return }
  // Upscale small crops to 1024px on the long edge for better OCR
  const longEdge = Math.max(pw, ph)
  const scale = longEdge < 1024 ? 1024 / longEdge : 1
  const c = document.createElement('canvas')
  c.width = Math.round(pw * scale); c.height = Math.round(ph * scale)
  const ctx = c.getContext('2d')
  ctx.imageSmoothingQuality = 'high'
  ctx.drawImage(srcImg, px, py, pw, ph, 0, 0, c.width, c.height)
  const cropMime = 'image/png'
  const cropDataUrl = c.toDataURL(cropMime)
  // Temporarily swap state.imageDataUrl and prompt
  const prevImage = state.imageDataUrl, prevMime = state.imageMime
  state.imageDataUrl = cropDataUrl; state.imageMime = cropMime
  const prevBuildPrompt = buildPrompt
  // Monkey-patch the prompt builder for this one call
  const focusedPrompt = `You are looking at a CROPPED region of a PCB containing a single component or header (originally labelled "${d.label || ''}" / part "${d.part_number || 'unknown'}").

Your ONE job: read the exact text/markings on this part. Look for:
- Vendor logo
- Part number printed in silkscreen / laser etching
- Date code, lot code
- Package style (QFN, QFP, BGA, SOT, etc.)
- Any visible pin labels around it

Return ONE JSON object:
{"label":"…","part_number":"exact text you can read or empty","manufacturer":"…","category":"…","confidence":0.0-1.0,"bbox":[0,0,1,1],"notes":"what you see in this crop","pins":[],"attack_vectors":[]}

The bbox MUST be [0,0,1,1] because this is the whole crop. If you cannot read the marking, set part_number to "" — do not guess.

Return ONLY the JSON object: {"detections":[ ... ]}. No prose.`
  // Inline call: bypass buildPrompt by stashing into a holder
  state._oneShotPrompt = focusedPrompt
  try {
    let result
    if (state.provider === 'anthropic')   result = await callAnthropic()
    else if (state.provider === 'gemini') result = await callGemini()
    else                                  result = await callOllama()
    const detections = Array.isArray(result) ? result : result.detections
    if (detections.length) {
      const focused = detections[0]
      // Merge results back into the original detection, keeping its original bbox
      Object.assign(d, {
        label: focused.label || d.label,
        part_number: focused.part_number || d.part_number,
        manufacturer: focused.manufacturer || d.manufacturer,
        notes: focused.notes ? `[re-OCR] ${focused.notes}` : d.notes,
        confidence: Math.max(d.confidence || 0, focused.confidence || 0),
      })
      drawOverlay()
      await renderPanel()
      setStatus('ok', `Re-OCR done. Updated detection #${d.id}.`)
    } else {
      setStatus('error', 'Re-OCR returned no detection.')
    }
  } catch (e) {
    setStatus('error', 'Re-OCR failed: ' + (e.message || e))
  } finally {
    state.imageDataUrl = prevImage
    state.imageMime = prevMime
    state._oneShotPrompt = null
  }
}

// Generate a hardware-pentest test plan from current detections.
tb.testplan?.addEventListener('click', () => {
  if (!state.detections.length) { setStatus('error', 'No detections to plan from.'); return }
  const md = buildTestPlanMarkdown()
  copyToClipboard(md, 'Test plan')
})

function buildTestPlanMarkdown() {
  const r = state.lastRun
  const dets = visibleDetections()
  const lines = []
  lines.push('# Hardware test plan')
  if (r) lines.push(`_Generated from ${r.providerLabel} (${r.model}) at ${new Date(r.when).toISOString()}_`)
  lines.push('')
  // Priority categories first
  const order = ['header', 'connector', 'mcu', 'soc', 'flash', 'eeprom', 'ram', 'radio', 'power', 'sensor', 'interface', 'crystal', 'unknown']
  const sorted = [...dets].sort((a, b) =>
    order.indexOf(a.category || 'unknown') - order.indexOf(b.category || 'unknown'))
  let step = 1
  for (const d of sorted) {
    const head = `## ${step++}. ${d.label || d.part_number || 'unknown'}${d.part_number ? ` (\`${d.part_number}\`)` : ''}`
    lines.push(head)
    if (d.notes) lines.push(`> ${d.notes}`)
    if (d.pins?.length) lines.push(`- Pins: ${d.pins.map(p => '`' + p + '`').join(' ')}`)
    if (d.attack_vectors?.length) {
      lines.push('- **Try:**')
      for (const a of d.attack_vectors) lines.push(`  - [ ] ${a}`)
    } else {
      lines.push('- [ ] Identify pinout from datasheet')
      lines.push('- [ ] Continuity-test against MCU pins')
    }
    if (d.part_number) {
      const pn = encodeURIComponent(cleanPartNumber(d.part_number))
      lines.push(`- References: [datasheet PDF](https://www.google.com/search?q=${pn}+datasheet+filetype:pdf) · [Octopart](https://octopart.com/search?q=${pn}) · [EMB3D](https://www.google.com/search?q=site%3Aemb3d.mitre.org+${pn}) · [CVEs](https://nvd.nist.gov/vuln/search/results?query=${pn})`)
    }
    lines.push('')
  }
  return lines.join('\n')
}

// Export Markdown / JSON
tb.exportMd?.addEventListener('click', () => {
  copyToClipboard(buildReportMarkdown(), 'Markdown report')
})
tb.exportJson?.addEventListener('click', () => {
  copyToClipboard(JSON.stringify({ run: state.lastRun, detections: state.detections }, null, 2), 'JSON report')
})

function buildReportMarkdown() {
  const r = state.lastRun
  const dets = visibleDetections()
  const lines = []
  lines.push('# PCB Inspect report')
  if (r) lines.push(`_Model: ${r.providerLabel} (${r.model}) · ${new Date(r.when).toISOString()} · ${dets.length} detections shown_`)
  lines.push('')
  for (const d of dets) {
    lines.push(`## ${d.id}. ${d.label || 'unknown'}${d.part_number ? ` — \`${d.part_number}\`` : ''}`)
    if (d.manufacturer) lines.push(`- Manufacturer: ${d.manufacturer}`)
    if (d.category) lines.push(`- Category: ${d.category}`)
    lines.push(`- Confidence: ${(d.confidence != null ? Math.round(d.confidence * 100) + '%' : 'unknown')}`)
    if (d.notes) lines.push(`- ${d.notes}`)
    if (d.pins?.length) lines.push(`- Pins: ${d.pins.join(', ')}`)
    if (d.attack_vectors?.length) {
      lines.push('- Attack vectors:')
      for (const a of d.attack_vectors) lines.push(`  - ${a}`)
    }
    lines.push('')
  }
  return lines.join('\n')
}

async function copyToClipboard(text, what) {
  try {
    await navigator.clipboard.writeText(text)
    setStatus('ok', `${what} copied to clipboard (${text.length} chars).`)
  } catch {
    // Fallback: open in a new window
    const w = window.open('', '_blank')
    if (w) { w.document.write('<pre>' + escapeHtml(text) + '</pre>'); w.document.close() }
    setStatus('info', `Clipboard blocked — ${what} opened in a new window.`)
  }
}

// History — last 8 runs, kept in localStorage.
const HISTORY_LS = 'eol-pcb-history'
const HISTORY_MAX = 8

function saveToHistory() {
  if (!state.detections.length) return
  try {
    const prev = JSON.parse(localStorage.getItem(HISTORY_LS) || '[]')
    // Tiny thumbnail (160px wide) for the history list
    const thumb = makeThumbnail(state.imageDataUrl, 160)
    const entry = {
      when: state.lastRun?.when || new Date().toISOString(),
      provider: state.lastRun?.providerLabel || state.provider,
      model:    state.lastRun?.model || state.model,
      count:    state.detections.length,
      thumb,
      detections: state.detections,
      image:      state.imageDataUrl,
      mime:       state.imageMime,
    }
    const next = [entry, ...prev].slice(0, HISTORY_MAX)
    localStorage.setItem(HISTORY_LS, JSON.stringify(next))
  } catch (e) {
    // History is best-effort; localStorage may be full.
    console.warn('history save failed', e)
  }
}

function makeThumbnail(dataUrl, width) {
  try {
    const img = new Image(); img.src = dataUrl
    if (!img.complete) return null
    const scale = width / img.naturalWidth
    if (scale >= 1) return dataUrl
    const c = document.createElement('canvas')
    c.width = width; c.height = Math.round(img.naturalHeight * scale)
    c.getContext('2d').drawImage(img, 0, 0, c.width, c.height)
    return c.toDataURL('image/jpeg', 0.7)
  } catch { return null }
}

tb.history?.addEventListener('click', () => {
  if (tb.historyPanel.style.display === '') {
    tb.historyPanel.style.display = 'none'
    return
  }
  let entries = []
  try { entries = JSON.parse(localStorage.getItem(HISTORY_LS) || '[]') } catch {}
  if (!entries.length) {
    tb.historyPanel.innerHTML = '<div class="pcb-history-empty">No saved runs yet. Run an analysis and it will appear here (last 8 only, stored in your browser).</div>'
  } else {
    tb.historyPanel.innerHTML = entries.map((e, i) => `
      <div class="pcb-history-card" data-idx="${i}">
        ${e.thumb ? `<img src="${e.thumb}" alt="">` : ''}
        <div class="pcb-history-meta">
          <div><b>${escapeHtml(e.provider)}</b> · <code>${escapeHtml(e.model)}</code></div>
          <div class="pcb-history-time">${new Date(e.when).toLocaleString()}</div>
          <div class="pcb-history-count">${e.count} detection${e.count === 1 ? '' : 's'}</div>
        </div>
        <button class="pcb-btn pcb-btn--ghost pcb-history-restore" data-idx="${i}">Restore</button>
      </div>`).join('')
    tb.historyPanel.querySelectorAll('.pcb-history-restore').forEach(b => {
      b.addEventListener('click', () => restoreHistoryEntry(entries[parseInt(b.dataset.idx, 10)]))
    })
  }
  tb.historyPanel.style.display = ''
})

async function restoreHistoryEntry(e) {
  state.imageDataUrl = e.image
  state.imageMime = e.mime
  state.detections = e.detections
  els.image.src = e.image
  els.resultSec.style.display = ''
  els.controls.style.display = ''
  await new Promise(r => { els.image.onload = r })
  fitCanvas()
  drawOverlay()
  await renderPanel()
  tb.historyPanel.style.display = 'none'
  setStatus('ok', `Restored from history — ${e.count} detection${e.count === 1 ? '' : 's'} from ${e.provider}.`)
}

// Keyboard navigation: ↑/↓ cycles selected detection; Enter zooms-in.
window.addEventListener('keydown', e => {
  if (!state.detections.length) return
  if (document.activeElement && /^(INPUT|TEXTAREA|SELECT)$/.test(document.activeElement.tagName)) return
  const vis = visibleDetections()
  if (!vis.length) return
  const ids = vis.map(d => d.id)
  let idx = ids.indexOf(state.selectedDetectionId)
  if (e.key === 'ArrowDown' || e.key === 'j') {
    e.preventDefault(); idx = (idx + 1 + ids.length) % ids.length
    selectDetection(ids[idx])
  } else if (e.key === 'ArrowUp' || e.key === 'k') {
    e.preventDefault(); idx = (idx - 1 + ids.length) % ids.length
    selectDetection(ids[idx])
  } else if (e.key === 'Enter' && state.selectedDetectionId) {
    e.preventDefault()
    const d = state.detections.find(x => x.id === state.selectedDetectionId)
    if (d) reanalyzeCrop(d)
  } else if (e.key === 'Escape') {
    state.selectedDetectionId = null
    highlightCard(0); drawOverlay()
  }
})

function selectDetection(id) {
  state.selectedDetectionId = id
  drawOverlay(id)
  highlightCard(id)
  const card = document.getElementById('det-' + id)
  if (card) card.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
}

// ── Pan + zoom + bbox edit + touch ───────────────────────────────────
const container = document.querySelector('.pcb-canvas-container')
const optEdit = document.getElementById('opt-edit')
const zoomIn  = document.getElementById('btn-zoom-in')
const zoomOut = document.getElementById('btn-zoom-out')
const zoomReset = document.getElementById('btn-zoom-reset')

function applyView() {
  if (!container) return
  const v = state.view
  container.style.transformOrigin = '0 0'
  container.style.transform = `translate(${v.x}px, ${v.y}px) scale(${v.scale})`
}
function resetView() {
  state.view = { x: 0, y: 0, scale: 1 }
  applyView()
}
// Image size slider — primary control. Buttons just nudge the slider.
const sizeSlider = document.getElementById('img-size-slider')
const sizeLabel  = document.getElementById('img-size-label')

function applyImageSize() {
  if (!sizeSlider || !els.image) return
  const pct = parseInt(sizeSlider.value, 10) || 100
  sizeLabel.textContent = pct + '%'
  if (pct === 100 || !state.imgNatural?.w) {
    // 100% = "fit" — let CSS max-width/max-height handle it.
    els.image.style.width = ''
    els.image.style.height = ''
  } else {
    // Compute the "fit" size first, then multiply by slider.
    const stage = document.querySelector('.app-image-stage')
    if (!stage) return
    const avW = Math.max(120, stage.clientWidth - 32)
    const avH = Math.max(120, stage.clientHeight - 90)
    const w0 = state.imgNatural.w
    const h0 = state.imgNatural.h
    const fitScale = Math.min(avW / w0, avH / h0, 1)
    const targetW = Math.max(120, w0 * fitScale * (pct / 100))
    els.image.style.width = targetW + 'px'
    els.image.style.height = 'auto'
  }
  requestAnimationFrame(() => { fitCanvas(); drawOverlay(state.selectedDetectionId) })
}

sizeSlider?.addEventListener('input', applyImageSize)
zoomIn?.addEventListener('click', () => {
  if (!sizeSlider) return
  sizeSlider.value = Math.min(250, parseInt(sizeSlider.value, 10) + 10)
  applyImageSize()
})
zoomOut?.addEventListener('click', () => {
  if (!sizeSlider) return
  sizeSlider.value = Math.max(40, parseInt(sizeSlider.value, 10) - 10)
  applyImageSize()
})
zoomReset?.addEventListener('click', () => {
  if (!sizeSlider) return
  sizeSlider.value = 100
  applyImageSize()
})
optEdit?.addEventListener('change', () => {
  state.editMode = optEdit.checked
  els.canvas.style.cursor = state.editMode ? 'crosshair' : 'default'
  drawOverlay(state.selectedDetectionId)
})

function zoomBy(factor, cx, cy) {
  const v = state.view
  const newScale = Math.max(0.5, Math.min(8, v.scale * factor))
  if (cx == null || cy == null) {
    const rect = container?.getBoundingClientRect()
    cx = rect ? rect.width / 2 : 0
    cy = rect ? rect.height / 2 : 0
  }
  // Keep (cx, cy) stable under zoom
  const ratio = newScale / v.scale
  v.x = cx - (cx - v.x) * ratio
  v.y = cy - (cy - v.y) * ratio
  v.scale = newScale
  applyView()
}

// Wheel zoom (mouse) — hold Ctrl/Cmd OR Shift to zoom (otherwise the
// wheel scrolls the page normally, which is what most users expect).
// Without modifier, wheel does nothing inside the canvas area.
container?.addEventListener('wheel', e => {
  if (!state.imageDataUrl) return
  if (!(e.ctrlKey || e.metaKey || e.shiftKey)) return
  e.preventDefault()
  const rect = container.getBoundingClientRect()
  const cx = e.clientX - rect.left
  const cy = e.clientY - rect.top
  // Gentler step: 7% per notch instead of 15%.
  zoomBy(e.deltaY < 0 ? 1.07 : 0.93, cx, cy)
}, { passive: false })

// Mouse / touch pan + bbox interaction. We track three modes:
//   - drag = panning the image
//   - move = moving a selected bbox
//   - resize = resizing a selected bbox (with which handle)
const drag = { active: false, mode: null, startX: 0, startY: 0, startBbox: null, handle: null, lastTouchDist: 0 }

function canvasCoordsFromClient(clientX, clientY) {
  const rect = els.canvas.getBoundingClientRect()
  // rect already accounts for CSS transforms.
  return {
    x: (clientX - rect.left) / rect.width,
    y: (clientY - rect.top) / rect.height,
  }
}

// Hit-test bbox handles in normalised coords. Returns 'tl','tr','bl','br','t','b','l','r','inside' or null.
function bboxHandle(bbox, x, y) {
  const [x1, y1, x2, y2] = bbox
  const hx = 0.015  // handle tolerance in normalised coords
  const hy = 0.020
  const near = (a, b, t) => Math.abs(a - b) < t
  if (near(x, x1, hx) && near(y, y1, hy)) return 'tl'
  if (near(x, x2, hx) && near(y, y1, hy)) return 'tr'
  if (near(x, x1, hx) && near(y, y2, hy)) return 'bl'
  if (near(x, x2, hx) && near(y, y2, hy)) return 'br'
  if (near(y, y1, hy) && x > x1 && x < x2) return 't'
  if (near(y, y2, hy) && x > x1 && x < x2) return 'b'
  if (near(x, x1, hx) && y > y1 && y < y2) return 'l'
  if (near(x, x2, hx) && y > y1 && y < y2) return 'r'
  if (x > x1 && x < x2 && y > y1 && y < y2) return 'inside'
  return null
}

function pointerDown(e) {
  if (!state.imageDataUrl) return
  const ptCount = e.touches ? e.touches.length : 1
  if (ptCount === 2 && e.touches) {
    // Pinch: track initial distance
    const [a, b] = [e.touches[0], e.touches[1]]
    drag.lastTouchDist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY)
    drag.mode = 'pinch'
    drag.active = true
    return
  }
  const cx = e.touches ? e.touches[0].clientX : e.clientX
  const cy = e.touches ? e.touches[0].clientY : e.clientY
  const norm = canvasCoordsFromClient(cx, cy)
  // If edit mode + a detection is selected: try a handle hit first
  if (state.editMode && state.selectedDetectionId) {
    const d = state.detections.find(x => x.id === state.selectedDetectionId)
    if (d) {
      const h = bboxHandle(d.bbox, norm.x, norm.y)
      if (h && h !== 'inside') {
        drag.active = true; drag.mode = 'resize'; drag.handle = h
        drag.startX = norm.x; drag.startY = norm.y; drag.startBbox = [...d.bbox]
        e.preventDefault?.(); return
      }
      if (h === 'inside') {
        drag.active = true; drag.mode = 'move'
        drag.startX = norm.x; drag.startY = norm.y; drag.startBbox = [...d.bbox]
        e.preventDefault?.(); return
      }
    }
  }
  // Otherwise: pan — but only if zoomed in. At scale=1 the image already
  // fits, panning it around is confusing.
  if (state.view.scale <= 1.01) return
  drag.active = true; drag.mode = 'pan'
  drag.startX = cx - state.view.x
  drag.startY = cy - state.view.y
  els.canvas.style.cursor = 'grabbing'
}

function pointerMove(e) {
  if (!drag.active) return
  if (drag.mode === 'pinch' && e.touches && e.touches.length === 2) {
    const [a, b] = [e.touches[0], e.touches[1]]
    const dist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY)
    const rect = container.getBoundingClientRect()
    const cx = (a.clientX + b.clientX) / 2 - rect.left
    const cy = (a.clientY + b.clientY) / 2 - rect.top
    zoomBy(dist / drag.lastTouchDist, cx, cy)
    drag.lastTouchDist = dist
    e.preventDefault(); return
  }
  const cx = e.touches ? e.touches[0].clientX : e.clientX
  const cy = e.touches ? e.touches[0].clientY : e.clientY
  if (drag.mode === 'pan') {
    state.view.x = cx - drag.startX
    state.view.y = cy - drag.startY
    applyView()
  } else if (drag.mode === 'move' || drag.mode === 'resize') {
    const d = state.detections.find(x => x.id === state.selectedDetectionId)
    if (!d) return
    const norm = canvasCoordsFromClient(cx, cy)
    const dx = norm.x - drag.startX, dy = norm.y - drag.startY
    let [x1, y1, x2, y2] = drag.startBbox
    if (drag.mode === 'move') {
      const w = x2 - x1, h = y2 - y1
      x1 = Math.max(0, Math.min(1 - w, x1 + dx)); y1 = Math.max(0, Math.min(1 - h, y1 + dy))
      x2 = x1 + w; y2 = y1 + h
    } else {
      if (drag.handle.includes('l')) x1 = Math.max(0, Math.min(x2 - 0.01, x1 + dx))
      if (drag.handle.includes('r')) x2 = Math.min(1, Math.max(x1 + 0.01, x2 + dx))
      if (drag.handle.includes('t')) y1 = Math.max(0, Math.min(y2 - 0.01, y1 + dy))
      if (drag.handle.includes('b')) y2 = Math.min(1, Math.max(y1 + 0.01, y2 + dy))
    }
    d.bbox = [x1, y1, x2, y2]
    drawOverlay(d.id)
    e.preventDefault?.()
  }
}

function pointerUp() {
  if (drag.active && (drag.mode === 'move' || drag.mode === 'resize')) {
    // Persist updated bbox in history (overwrite latest entry's detections)
    try {
      const prev = JSON.parse(localStorage.getItem(HISTORY_LS) || '[]')
      if (prev.length) { prev[0].detections = state.detections; localStorage.setItem(HISTORY_LS, JSON.stringify(prev)) }
    } catch {}
  }
  drag.active = false; drag.mode = null; drag.handle = null
  els.canvas.style.cursor = state.editMode ? 'crosshair' : (state.view.scale > 1.01 ? 'grab' : 'default')
}

if (container) {
  container.addEventListener('mousedown', pointerDown)
  window.addEventListener('mousemove', pointerMove)
  window.addEventListener('mouseup', pointerUp)
  container.addEventListener('touchstart', pointerDown, { passive: false })
  container.addEventListener('touchmove',  pointerMove, { passive: false })
  container.addEventListener('touchend',   pointerUp)
}

// Extend drawOverlay to render edit handles + trace arrows.
const _origDraw = drawOverlay
drawOverlay = function(hoverId = null) {
  _origDraw(hoverId)
  const c = els.canvas, ctx = c.getContext('2d')
  const W = c.width, H = c.height

  // Trace overlay: solid arrow for fully-traced connections, dashed stub
  // ending in an "X" via marker when the trace disappears into an inner
  // layer. Drawn under the edit-handles layer so handles stay clickable.
  if (state.traces && state.traces.length) {
    for (const t of state.traces) {
      const fromPos = pointForEndpoint(t.from)
      if (!fromPos) continue
      const conf = (t.confidence != null) ? t.confidence : 0.5
      // Colour by confidence — green high, amber low.
      const r = Math.round(220 * (1 - conf) + 30 * conf)
      const g = Math.round(120 * (1 - conf) + 180 * conf)
      const b = 60
      ctx.strokeStyle = `rgba(${r},${g},${b},0.92)`
      ctx.lineWidth = 2.5

      if (t.ends_at_via && t.via_position) {
        // Dashed stub from source pin → via, then X marker
        const vx = t.via_position[0] * W, vy = t.via_position[1] * H
        ctx.setLineDash([6, 4])
        ctx.beginPath()
        ctx.moveTo(fromPos.x, fromPos.y)
        ctx.lineTo(vx, vy)
        ctx.stroke()
        ctx.setLineDash([])
        // Draw a small "X" at the via to signal "trace goes to inner layer here"
        ctx.lineWidth = 2
        ctx.beginPath()
        ctx.moveTo(vx - 5, vy - 5); ctx.lineTo(vx + 5, vy + 5)
        ctx.moveTo(vx - 5, vy + 5); ctx.lineTo(vx + 5, vy - 5)
        ctx.stroke()
      } else if (t.to) {
        const toPos = pointForEndpoint(t.to)
        if (!toPos) continue
        ctx.setLineDash([])
        drawArrow(ctx, fromPos.x, fromPos.y, toPos.x, toPos.y)
      }
    }
  }

  if (state.editMode && state.selectedDetectionId) {
    const d = state.detections.find(x => x.id === state.selectedDetectionId)
    if (!d) return
    const [x1, y1, x2, y2] = d.bbox
    const px = x1 * W, py = y1 * H, pw = (x2 - x1) * W, ph = (y2 - y1) * H
    const s = 8
    const pts = [
      [px, py], [px + pw / 2, py], [px + pw, py],
      [px, py + ph / 2],            [px + pw, py + ph / 2],
      [px, py + ph], [px + pw / 2, py + ph], [px + pw, py + ph],
    ]
    ctx.fillStyle = '#fff'
    ctx.strokeStyle = '#000'
    ctx.lineWidth = 1
    for (const [x, y] of pts) {
      ctx.fillRect(x - s / 2, y - s / 2, s, s)
      ctx.strokeRect(x - s / 2, y - s / 2, s, s)
    }
  }
}

// Resolve a trace endpoint to canvas pixel coords. Prefer the model's
// explicit `pos`; fall back to the centre of the referenced detection.
function labelForEndpoint(ep) {
  if (!ep) return '(unknown)'
  if (ep.detection_id) {
    const d = state.detections.find(x => x.id === ep.detection_id)
    const name = d?.label || `#${ep.detection_id}`
    return ep.pin_label ? `${name} · ${ep.pin_label}` : name
  }
  return ep.pin_label || '(no detection)'
}
function pointForEndpoint(ep) {
  if (!ep) return null
  const W = els.canvas.width, H = els.canvas.height
  if (Array.isArray(ep.pos) && ep.pos.length === 2) {
    return { x: ep.pos[0] * W, y: ep.pos[1] * H }
  }
  if (ep.detection_id) {
    const d = state.detections.find(x => x.id === ep.detection_id)
    if (d) {
      const [x1, y1, x2, y2] = d.bbox
      return { x: ((x1 + x2) / 2) * W, y: ((y1 + y2) / 2) * H }
    }
  }
  return null
}

function drawArrow(ctx, x1, y1, x2, y2) {
  const head = 10
  const ang = Math.atan2(y2 - y1, x2 - x1)
  ctx.beginPath()
  ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke()
  ctx.beginPath()
  ctx.moveTo(x2, y2)
  ctx.lineTo(x2 - head * Math.cos(ang - Math.PI / 6), y2 - head * Math.sin(ang - Math.PI / 6))
  ctx.lineTo(x2 - head * Math.cos(ang + Math.PI / 6), y2 - head * Math.sin(ang + Math.PI / 6))
  ctx.closePath()
  ctx.fillStyle = ctx.strokeStyle
  ctx.fill()
}