pixelkiln 0.34.0 → 0.35.0

package/dist/client/gallery.js

@@ -0,0 +1,2118 @@
+let snap = INITIAL;
+const STATE_TONE = {
+  ok: 'ok', stale: 'warn', orphaned: 'warn', untracked: 'warn', blocked: 'warn',
+  failed: 'bad', 'in-flight': 'cool', recoverable: 'cool', missing: 'dim', undeclared: 'dim',
+};
+const STATE_ORDER = ['ok','stale','orphaned','untracked','in-flight','recoverable','blocked','failed','missing','undeclared'];
+const ui = {
+  q: '', states: new Set(), providers: new Set(), generators: new Set(), projects: new Set(),
+  sort: 'key', group: 'style', open: null, member: 0, zoom: 'auto', playing: null,
+  /** Cards rendered per pass; a project with thousands of assets opts into the rest. */
+  limit: 600,
+  /** Item id whose edit form is open, or 'new:<project>:<style>' for an add form. */
+  editing: null,
+  /** One-shot confirmation shown in the drawer after a save. */
+  notice: null,
+  /** Record ids picked for side-by-side comparison, in pick order (max 4). */
+  compare: [],
+  /** Zoom for the comparison panel. */
+  compareZoom: 'auto',
+  /** Jobs expanded to show their log. */
+  logs: new Set(),
+  /** Job ids already seen finished, so a completion refreshes exactly once. */
+  settled: new Set(),
+};
+/** Generation status from /api/jobs: jobs, session budget, spend so far. */
+let GEN = { jobs: [], budget: { byProvider: {} }, spent: {}, units: {} };
+const $ = (id) => document.getElementById(id);
+const el = (tag, cls, text) => {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== undefined && text !== null) n.textContent = String(text);
+  return n;
+};
+const fmtCost = (unit, amount) => {
+  if (unit === 'free') return 'free';
+  if (unit === 'usd') return '$' + Number(amount).toFixed(2);
+  if (unit === 'generations') return amount + ' generation' + (amount === 1 ? '' : 's');
+  return amount + ' ' + unit;
+};
+const fmtSpend = (spend) => Object.entries(spend).filter(([, n]) => n).sort()
+  .map(([unit, n]) => fmtCost(unit, Math.round(n * 100) / 100)).join(' + ') || 'no spend recorded';
+const fmtBytes = (n) => n == null ? '—' : n < 1024 ? n + ' B' : n < 1048576 ? (n / 1024).toFixed(1) + ' KB' : (n / 1048576).toFixed(2) + ' MB';
+const fmtWhen = (iso) => {
+  if (!iso) return null;
+  const d = new Date(iso);
+  return isNaN(d) ? iso : d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+};
+const isFrameSet = (item) => item.generator === 'frames' ||
+  (item.outputs.length > 1 && item.outputs.every((o) => o.role && /^frame/i.test(o.role)));
+const shortPath = (p) => {
+  if (p.length <= 64) return p;
+  const parts = p.split('/');
+  return parts.length > 4 ? '…/' + parts.slice(-3).join('/') : p;
+};
+const displayScale = (w, h, boxW, boxH) => {
+  const s = Math.min(boxW / w, boxH / h);
+  return s >= 1 ? Math.floor(s) : s;
+};
+
+const projectOf = (item) => snap.workspace
+  ? snap.workspace.projects.find((pr) => pr.id === item.project)
+  : snap.project;
+
+// The only write this page ever makes: one manifest edit, quoting the
+// manifest hash it was rendered from so a concurrent hand edit is refused
+// rather than overwritten. The server answers with the rebuilt gallery.
+async function postEdit(body) {
+  const res = await fetch('/api/edit', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', 'X-Pixelkiln-Session': SESSION },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) {
+    const err = new Error(await res.text());
+    err.status = res.status;
+    throw err;
+  }
+  return res.json();
+}
+const field = (label, input, hint) => {
+  const w = el('label', 'field');
+  w.append(el('span', null, label), input);
+  if (hint) w.append(el('small', null, hint));
+  return w;
+};
+const numberInput = (value, placeholder) => {
+  const i = el('input'); i.type = 'number'; i.min = '16'; i.step = '1';
+  i.value = value == null ? '' : String(value); i.placeholder = placeholder || '';
+  return i;
+};
+const numberOrNull = (input) => input.value.trim() === '' ? null : Number(input.value);
+const splitTags = (value) => value.split(',').map((t) => t.trim()).filter(Boolean);
+
+// ---- generation (only when the server holds a session budget) -------------
+
+const ACTIVE_PHASES = new Set(['queued', 'submitting', 'polling', 'fetching', 'review']);
+const PHASE_TONE = { queued: 'cool', submitting: 'cool', polling: 'cool', fetching: 'cool', review: 'warn', done: 'ok', failed: 'bad' };
+// The job still working on this record, if any: what the drawer and its card
+// show while a regeneration, restore, or pull is in flight.
+const activeJobFor = (item) => GEN.jobs.find((job) => ACTIVE_PHASES.has(job.phase) && job.project === item.project && job.keys.includes(item.key)) || null;
+const JOB_VERB = { generate: 'regenerating', resume: 'resuming', refresh: 'pulling upstream changes for', restore: 'restoring', revert: 'bringing back a previous generation of' };
+const PHASE_TEXT = { queued: 'queued', submitting: 'submitting to the provider', polling: 'waiting for the provider to finish', fetching: 'downloading the result', review: 'candidates are ready to review' };
+const remainingBudget = (provider) => {
+  const keyed = GEN.budget.byProvider[provider];
+  const ceiling = keyed !== undefined ? keyed : GEN.budget.amount;
+  return ceiling === undefined ? null : Math.max(0, ceiling - (GEN.spent[provider] || 0));
+};
+async function postGenerate(body) {
+  const res = await fetch('/api/generate', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', 'X-Pixelkiln-Session': SESSION },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) { const err = new Error(await res.text()); err.status = res.status; throw err; }
+  return res.json();
+}
+let jobsTimer = null;
+async function pollJobs() {
+  if (!GENERATION) return;
+  try {
+    const res = await fetch('/api/jobs', { cache: 'no-store' });
+    if (!res.ok) throw new Error(await res.text());
+    GEN = await res.json();
+  } catch (err) {
+    $('note').textContent = ' Job status unavailable: ' + err.message;
+    return;
+  }
+  renderJobs();
+  renderHeader();
+  let changed = false;
+  for (const job of GEN.jobs) {
+    if (!ACTIVE_PHASES.has(job.phase) && !ui.settled.has(job.id)) {
+      ui.settled.add(job.id); changed = true;
+      // The open record hears how its job ended, where the strip was.
+      const open = ui.open && snap.items.find((i) => i.id === ui.open);
+      if (open && job.project === open.project && job.keys.includes(open.key)) {
+        ui.notice = { id: open.id, text: job.phase === 'failed'
+          ? (JOB_VERB[job.mode] || job.mode).replace(/ing$/, 'ing') + ' this asset failed: ' + (job.error || 'see the log above')
+          : job.mode === 'generate' ? 'Regenerated. The new result is on disk and recorded as this generation.'
+          : job.mode === 'restore' ? 'Restored. The recorded bytes are back on disk.'
+          : job.mode === 'revert' ? 'Brought back generation #' + job.revert + '. The one it replaced is now #1 in the list below.'
+          : job.mode === 'refresh' ? (job.counts.downloaded ? 'Pulled the upstream change; the lockfile records the new bytes.' : 'Nothing changed upstream; the file was left alone.')
+          : 'Done.' };
+      }
+    }
+    if (job.phase === 'review' && !ui.settled.has(job.id + ':review')) { ui.settled.add(job.id + ':review'); changed = true; }
+  }
+  if (changed) refresh();
+  else {
+    // A job in flight: keep the open record's strip and the card badges honest without a full re-render.
+    if (ui.open && !$('dialog-host').childNodes.length) renderDrawer();
+    for (const c of document.querySelectorAll('.card')) {
+      const item = snap.items.find((i) => i.id === c.dataset.key);
+      const job = item && activeJobFor(item);
+      const badge = c.querySelector('.busy-badge');
+      if (job && !badge) c.replaceWith(card(item));
+      else if (!job && badge) badge.remove();
+    }
+  }
+  const active = GEN.jobs.some((job) => ACTIVE_PHASES.has(job.phase) && job.phase !== 'review');
+  clearTimeout(jobsTimer);
+  if (active) jobsTimer = setTimeout(pollJobs, 2000);
+}
+function renderJobs() {
+  const host = $('jobs');
+  host.textContent = '';
+  if (!GENERATION) return;
+  for (const job of GEN.jobs) {
+    if (ui.settled.has(job.id + ':dismissed')) continue;
+    const row = el('div', 'job');
+    const ph = el('span', 'ph');
+    ph.append(el('i', 'dot ' + PHASE_TONE[job.phase]), document.createTextNode(job.phase));
+    const what = (job.mode === 'refresh' ? 'pull upstream for ' : job.mode === 'restore' ? 'restore ' : job.mode === 'revert' ? 'bring back generation #' + job.revert + ' of ' : job.mode === 'resume' ? 'resume ' : 'generate ') + job.keys.length + (job.keys.length === 1 ? ' asset' : ' assets') +
+      (job.project ? ' in ' + job.project : '');
+    const last = el('span', 'last', what + (job.messages.length ? ' — ' + job.messages[job.messages.length - 1].trim() : ''));
+    last.title = job.keys.join('\n');
+    const acts = el('div', 'acts');
+    if (job.phase === 'review' && job.review.length) {
+      const b = el('button', 'primary', 'Review ' + job.review.length);
+      b.type = 'button'; b.onclick = () => openReview(job.id);
+      acts.append(b);
+    }
+    const logBtn = el('button', null, ui.logs.has(job.id) ? 'Hide log' : 'Log');
+    logBtn.type = 'button';
+    logBtn.onclick = () => { ui.logs.has(job.id) ? ui.logs.delete(job.id) : ui.logs.add(job.id); renderJobs(); };
+    acts.append(logBtn);
+    if (!ACTIVE_PHASES.has(job.phase)) {
+      const d = el('button', null, 'Dismiss');
+      d.type = 'button'; d.onclick = () => { ui.settled.add(job.id + ':dismissed'); renderJobs(); };
+      acts.append(d);
+    }
+    row.append(ph, last, acts);
+    if (ui.logs.has(job.id)) row.append(el('pre', null, job.messages.join('\n')));
+    host.append(row);
+  }
+}
+// ---- the in-browser editor (only when the server serves one) -------------
+// The build is a 46 MB web export fetched once into a user-level cache and
+// verified against hashes this PixelKiln release carries; the page only
+// reports and asks, the server downloads. Nothing is fetched without a click.
+
+let ED = null;
+let edTimer = null;
+const fmtMb = (bytes) => (bytes / 1e6).toFixed(1) + ' MB';
+async function pollEditor() {
+  if (!EDITOR) return;
+  try {
+    const res = await fetch('/api/editor', { cache: 'no-store' });
+    if (!res.ok) throw new Error(await res.text());
+    ED = await res.json();
+  } catch (err) {
+    ED = { error: 'status unavailable: ' + err.message, installed: false, installing: null, missing: [], totalBytes: 0 };
+  }
+  renderTools();
+  clearTimeout(edTimer);
+  if (ED.installing) edTimer = setTimeout(pollEditor, 1000);
+  else if (ui.open) renderDrawer();
+}
+async function installEditor() {
+  try {
+    const res = await fetch('/api/editor/install', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Pixelkiln-Session': SESSION },
+      body: '{}',
+    });
+    if (!res.ok) throw new Error(await res.text());
+    ED = await res.json();
+  } catch (err) {
+    ED = Object.assign({}, ED, { error: err.message });
+  }
+  renderTools();
+  clearTimeout(edTimer);
+  edTimer = setTimeout(pollEditor, 500);
+}
+function renderTools() {
+  const host = $('tools');
+  host.textContent = '';
+  if (!EDITOR || !ED) return;
+  const row = el('div', 'tool');
+  const ph = el('span', 'ph');
+  const last = el('span', 'last');
+  const acts = el('div', 'acts');
+  const name = 'Browser editor' + (ED.pixelorama ? ' (Pixelorama ' + ED.pixelorama + ')' : '');
+  if (ED.installing) {
+    const p = ED.installing;
+    ph.append(el('i', 'dot cool'), document.createTextNode('installing'));
+    last.textContent = name + ': fetching ' + (p.file || 'the build') + ' — ' + fmtMb(p.fetchedBytes) + ' of ' + fmtMb(p.totalBytes);
+    row.append(ph, last, acts);
+    const bar = el('progress');
+    if (p.totalBytes) { bar.max = p.totalBytes; bar.value = p.fetchedBytes; }
+    row.append(bar);
+  } else if (ED.installed) {
+    ph.append(el('i', 'dot ok'), document.createTextNode('ready'));
+    last.textContent = name + ' is installed and verified; a record’s Hand edit section opens sprites in it.';
+    last.title = ED.dir || '';
+    const b = el('button', null, 'Open editor');
+    b.type = 'button'; b.onclick = () => window.open(ED.url, '_blank', 'noopener');
+    acts.append(b);
+    row.append(ph, last, acts);
+  } else if (ED.error) {
+    ph.append(el('i', 'dot bad'), document.createTextNode('failed'));
+    last.textContent = name + ': ' + ED.error;
+    const b = el('button', 'primary', 'Retry install');
+    b.type = 'button'; b.onclick = installEditor;
+    acts.append(b);
+    row.append(ph, last, acts);
+  } else if (!ED.release) {
+    ph.append(el('i', 'dot dim'), document.createTextNode('unavailable'));
+    last.textContent = name + ': this PixelKiln version pins no published build.';
+    row.append(ph, last, acts);
+  } else {
+    ph.append(el('i', 'dot dim'), document.createTextNode('not installed'));
+    last.textContent = name + ': ' + fmtMb(ED.totalBytes - (ED.installedBytes || 0)) + ' fetched once from the PixelKiln release ' +
+      ED.release + ', verified against the hashes this version carries, and kept outside the project.';
+    const b = el('button', 'primary', 'Install editor');
+    b.type = 'button'; b.onclick = installEditor;
+    acts.append(b);
+    row.append(ph, last, acts);
+  }
+  host.append(row);
+}
+
+function budgetLine() {
+  const providers = new Set([...Object.keys(GEN.budget.byProvider), ...Object.keys(GEN.spent)]);
+  const parts = [];
+  for (const provider of [...providers].sort()) {
+    const left = remainingBudget(provider);
+    const unit = GEN.units[provider] || 'generations';
+    if (left !== null) parts.push(provider + ': ' + fmtCost(unit, Math.round(left * 100) / 100) + ' left');
+  }
+  // An unkeyed ceiling belongs to whichever single provider first spends it.
+  if (GEN.budget.amount !== undefined && !Object.keys(GEN.spent).length) parts.push(GEN.budget.amount + ' available');
+  return parts.length ? 'session budget — ' + parts.join(' · ') : '';
+}
+
+// The confirm step: what will be sent, what it is estimated to cost, and what
+// this session may still spend. Mirrors gen's "Spend … on N asset(s)?" prompt.
+function generateDialog(items, { project = null, force = false, resume = false, refresh = false, restore = false, revert = null, generation = null } = {}) {
+  const host = $('dialog-host');
+  host.textContent = '';
+  const wrap = el('div', 'dialog');
+  const form = el('form');
+  const noun = items.length + (items.length === 1 ? ' asset' : ' assets');
+  const free = resume || refresh || restore || revert !== null;
+  const replacing = items.filter((i) => i.state === 'orphaned' && i.outputs.every((o) => o.exists) || i.state === 'untracked');
+  form.append(el('h3', null, refresh ? 'Pull upstream changes for ' + noun
+    : revert !== null ? 'Bring back generation #' + revert + ' of ' + items[0].key
+    : restore ? 'Restore ' + noun
+    : resume ? 'Resume ' + noun
+    : (force ? 'Regenerate ' : 'Generate ') + noun));
+  const table = el('table');
+  const thead = el('tr'); thead.append(el('th', null, 'asset'), el('th', null, 'state'), el('th', 'n', 'candidates'), el('th', 'n', 'estimate'));
+  table.append(thead);
+  const byProvider = new Map();
+  for (const item of items) {
+    const tr = el('tr');
+    tr.append(el('td', 'mono', item.key), el('td', null, item.state), el('td', 'n', item.candidates ?? '—'),
+      el('td', 'n', free ? 'no cost' : fmtCost(item.costUnit, item.estimatedCost ?? 0)));
+    table.append(tr);
+    if (!free) {
+      const g = byProvider.get(item.provider) || { cost: 0, unit: item.costUnit };
+      g.cost += item.estimatedCost ?? 0; byProvider.set(item.provider, g);
+    }
+  }
+  form.append(table);
+  const sum = el('div', 'sum');
+  if (refresh) {
+    sum.append(el('div', null, 'Re-downloads each object from the provider and replaces the local file only when the object changed upstream — for example after editing it in the provider’s own editor. Unchanged objects are left alone; a file you changed locally is refused. Nothing is submitted.'));
+  } else if (revert !== null) {
+    sum.append(el('div', null, 'The current generation moves into this asset’s history and generation #' + revert + ' becomes current again: its object, hashes, and cost are recorded as this generation, and its bytes are written back ' +
+      (generation && generation.cached ? 'from the local cache.' : 'by re-downloading them from the provider.') + ' Nothing is generated; nothing upstream changes. Undo it from the same list.'));
+    if (generation && generation.promptDiffers) sum.append(el('div', 'warn', 'That generation was made with a different prompt than the current one; the record will show it as stale until the manifest matches or it is regenerated.'));
+  } else if (restore) {
+    sum.append(el('div', null, 'Puts the recorded bytes back on disk from the local cache or the provider object. Nothing is generated or submitted.'));
+    if (force && replacing.length) sum.append(el('div', 'warn', 'The file on disk was changed after PixelKiln wrote it. Restoring discards that change. To keep it instead, cancel and use Edit by hand or Edit in browser first: the edit is copied beside the generated file, and the record stays intact.'));
+  } else if (resume) {
+    sum.append(el('div', null, 'Polls, reviews, and downloads existing provider work. Nothing is submitted.'));
+  } else {
+    for (const [provider, g] of byProvider) {
+      const left = remainingBudget(provider);
+      const line = el('div');
+      line.append(el('b', null, provider + ': ' + fmtCost(g.unit, Math.round(g.cost * 100) / 100)));
+      line.append(document.createTextNode(left === null ? ' — no session budget for this provider'
+        : ' · ' + fmtCost(g.unit, Math.round(left * 100) / 100) + ' of the session budget left'));
+      if (left !== null && g.cost > left) line.className = 'warn';
+      sum.append(line);
+    }
+    if (force && replacing.length) sum.append(el('div', 'warn', (replacing.length === 1 ? 'This file' : replacing.length + ' of these files') + ' changed on disk after PixelKiln wrote it (or was never recorded). Generating replaces it and that change is lost. To keep it, cancel and use Edit by hand or Edit in browser first.'));
+    else if (force) sum.append(el('div', 'warn', 'Regenerating replaces the current art. The previous file is replaced when the new result is fetched; the provider objects it came from are not deleted.'));
+    sum.append(el('div', null, 'Candidate sets land in review; you choose from them here before anything is downloaded.'));
+  }
+  form.append(sum);
+  const actions = el('div', 'actions');
+  const go = el('button', 'primary', refresh ? 'Pull changes' : revert !== null ? 'Bring it back' : restore ? (force && replacing.length ? 'Restore and discard my change' : 'Restore') : resume ? 'Resume' : force && replacing.length ? 'Generate and replace' : 'Generate');
+  go.type = 'submit';
+  const cancel = el('button', null, 'Cancel'); cancel.type = 'button'; cancel.onclick = () => { host.textContent = ''; };
+  const msg = el('span', 'msg');
+  actions.append(go, cancel, msg);
+  form.append(actions);
+  form.onsubmit = async (e) => {
+    e.preventDefault();
+    go.disabled = true; msg.textContent = '';
+    try {
+      const body = { keys: items.map((i) => i.key) };
+      if (project) body.project = project;
+      if (force) body.force = true;
+      if (resume) body.resume = true;
+      if (refresh) body.refresh = true;
+      if (restore) body.restore = true;
+      if (revert !== null) body.revert = revert;
+      const job = await postGenerate(body);
+      host.textContent = '';
+      GEN.jobs.unshift(job);
+      renderJobs();
+      pollJobs();
+    } catch (err) {
+      go.disabled = false;
+      msg.textContent = err.message;
+    }
+  };
+  wrap.append(form);
+  host.append(wrap);
+  setTimeout(() => go.focus(), 0);
+}
+
+function openReview(jobId) {
+  const host = $('dialog-host');
+  host.textContent = '';
+  const scrim = el('div', 'sheet-scrim');
+  scrim.onclick = () => { host.textContent = ''; pollJobs(); refresh(); };
+  const panel = el('div', 'sheet review-host');
+  const bar = el('div', 'rbar');
+  const close = el('button', null, 'Back to gallery'); close.type = 'button';
+  close.onclick = () => { host.textContent = ''; pollJobs(); refresh(); };
+  bar.append(close, el('span', null, 'Choose from the candidates below. Apply selections writes the lockfile and downloads what you chose; unchosen rows stay in review.'));
+  const frame = el('iframe');
+  frame.src = '/review/' + encodeURIComponent(jobId);
+  frame.title = 'Candidate review';
+  panel.append(bar, frame);
+  host.append(scrim, panel);
+}
+window.addEventListener('message', (e) => {
+  if (e.origin !== location.origin || !e.data || typeof e.data.type !== 'string') return;
+  if (e.data.type === 'pixelkiln:review-applied') {
+    setTimeout(() => { $('dialog-host').textContent = ''; pollJobs(); refresh(); }, 600);
+    return;
+  }
+  if (SHEET && e.source === SHEET.frame.contentWindow) onEditorMessage(e.data);
+});
+
+// ---- the in-browser editor sheet -------------------------------------------
+// The page is the protocol host: it hands the editor the PNG and palette,
+// asks it for the image back, and does the authenticated write itself. The
+// iframe never sees the session token, and the server validates, sizes, and
+// declares the file the same way pixelkiln edit does.
+
+let SHEET = null;
+// What the editor gets: the edit files when they are all there, else the
+// generated outputs (one PNG, or every frame of a set).
+const editorSources = (item) => {
+  if (item.edits.length && item.edits.every((e) => e.exists)) return { files: item.edits, fromEdit: true };
+  if (editableOutputs(item)) return { files: item.outputs, fromEdit: false };
+  return null;
+};
+const editorSource = (item) => { const s = editorSources(item); return s ? s.files[0] : null; };
+const canEditInBrowser = (item) => EDITOR && EDITABLE && item.declared && item.asset && projectOf(item)?.manifestSha256 && editorSources(item);
+const toBase64 = (buf) => new Promise((resolve, reject) => {
+  const r = new FileReader();
+  r.onload = () => resolve(String(r.result).slice(String(r.result).indexOf(',') + 1));
+  r.onerror = () => reject(r.error);
+  r.readAsDataURL(new Blob([buf]));
+});
+function sheetStatus(tone, text) {
+  if (!SHEET) return;
+  SHEET.status.textContent = '';
+  SHEET.status.append(el('i', 'dot ' + tone), document.createTextNode(text));
+}
+function sheetButtons() {
+  if (!SHEET) return;
+  const busy = !SHEET.opened || SHEET.pending !== null;
+  SHEET.save.disabled = busy || !SHEET.dirty;
+  SHEET.saveClose.disabled = busy;
+}
+function openEditorSheet(item) {
+  if (SHEET) return;
+  const src = editorSource(item);
+  const host = $('dialog-host');
+  host.textContent = '';
+  const scrim = el('div', 'sheet-scrim');
+  scrim.onclick = () => closeEditorSheet();
+  const panel = el('div', 'sheet editor-host');
+  const bar = el('div', 'rbar');
+  const close = el('button', null, 'Close'); close.type = 'button';
+  close.onclick = () => closeEditorSheet();
+  const title = el('b', null, (item.project ? item.project + ':' : '') + item.styleId + '/' + item.assetId + ' · ' + item.width + '×' + item.height + (item.outputs.length > 1 ? ' · ' + item.outputs.length + ' ' + memberNoun(item, item.outputs.length) : ''));
+  const status = el('span', 'st');
+  const acts = el('div', 'acts');
+  const msg = el('span', 'msg');
+  const compare = el('label', 'chip'); compare.hidden = true;
+  compare.title = 'The generated art on a locked layer at 50%, for comparison; never part of the saved file';
+  const compareBox = el('input'); compareBox.type = 'checkbox'; compareBox.checked = true;
+  compareBox.onchange = () => showReference(compareBox.checked);
+  compare.append(compareBox, document.createTextNode(' show generated'));
+  const save = el('button', 'primary', 'Save to project'); save.type = 'button';
+  save.onclick = () => requestEditorSave(false);
+  const saveClose = el('button', null, 'Save & close'); saveClose.type = 'button';
+  saveClose.onclick = () => requestEditorSave(true);
+  acts.append(msg, compare, save, saveClose);
+  bar.append(close, title, status, acts);
+  const stage = el('div', 'stage');
+  const frame = el('iframe');
+  frame.title = 'Pixelorama';
+  frame.src = ED.url;
+  const loading = el('div', 'loading');
+  const loadText = el('div');
+  loadText.append(el('b', null, 'Loading the editor'), document.createTextNode('The first open compiles a 40 MB build; later opens come from the browser cache.'));
+  loading.append(loadText);
+  stage.append(frame, loading);
+  panel.append(bar, stage);
+  host.append(scrim, panel);
+  SHEET = { item, frame, loading, status, msg, save, saveClose, compare, dirty: false, opened: false, ready: null, pending: null, requests: 0, source: src, sentProject: false, sentReference: false, reference: false, roles: null };
+  sheetStatus('cool', 'loading');
+  sheetButtons();
+  close.focus({ preventScroll: true });
+}
+// The edit files are what the editor gets; when a browser save kept the
+// layered project beside them, that goes along too and the editor restores
+// the layers, falling back to the flattened PNGs if the file cannot be read.
+// A frame set is sent as frames, one per member, and comes back the same way.
+async function sendOpen() {
+  const { item } = SHEET;
+  const sources = editorSources(item);
+  const style = snap.styles.find((s) => s.id === item.styleId && s.project === item.project);
+  const projectUrl = sources.fromEdit && item.editMeta && item.editMeta.projectUrl && SHEET.ready.version >= 2 ? item.editMeta.projectUrl : null;
+  const set = sources.files.length > 1;
+  if (set && SHEET.ready.version < 3) {
+    SHEET.msg.textContent = 'This editor build cannot open sets; reinstall it with pixelkiln tools install editor.';
+    sheetStatus('bad', 'unsupported');
+    return;
+  }
+  // When an edit is being opened, the generated art rides along as a
+  // reference layer: what the editor shows through at 50% for comparison.
+  const referenceFiles = sources.fromEdit && SHEET.ready.version >= 4 && item.outputs.every((o) => o.exists && o.url) ? item.outputs : null;
+  const pngs = [];
+  const reference = [];
+  let pxo = null;
+  try {
+    for (const file of sources.files) {
+      const res = await fetch(file.url, { cache: 'no-store' });
+      if (!res.ok) throw new Error(await res.text());
+      pngs.push(await res.arrayBuffer());
+    }
+    if (projectUrl) {
+      const p = await fetch(projectUrl, { cache: 'no-store' });
+      if (p.ok) pxo = await p.arrayBuffer();
+    }
+    for (const file of referenceFiles || []) {
+      const res = await fetch(file.url, { cache: 'no-store' });
+      if (res.ok) reference.push({ role: file.role || null, png: await res.arrayBuffer() });
+    }
+  } catch (err) {
+    if (SHEET) { SHEET.msg.textContent = 'Could not load the image: ' + err.message; sheetStatus('bad', 'failed'); }
+    return;
+  }
+  if (!SHEET) return;
+  const request = 'open-' + (++SHEET.requests);
+  SHEET.sentProject = !!pxo;
+  SHEET.roles = set ? item.outputs.map((o) => o.role || null) : null;
+  const message = {
+    type: 'pixelkiln:open', request,
+    asset: { key: item.styleId + '/' + item.assetId, id: item.id, name: item.assetId, width: item.width, height: item.height },
+    png: pngs[0], palette: style ? style.palette : [],
+  };
+  const transfer = [pngs[0]];
+  if (set) {
+    message.frames = pngs.map((png, i) => ({ role: SHEET.roles[i], png }));
+    // A tile set is not an animation; a slow rate keeps its timeline still-ish.
+    message.fps = isFrameSet(item) ? (item.fps || 12) : 1;
+    for (const png of pngs.slice(1)) transfer.push(png);
+    // The first frame is both png (older editors) and frames[0]; copy it so both transfer.
+    message.png = pngs[0].slice(0);
+    transfer.push(message.png);
+  }
+  if (pxo) { message.pxo = pxo; transfer.push(pxo); }
+  if (reference.length === (referenceFiles || []).length && reference.length) {
+    message.reference = reference;
+    for (const r of reference) transfer.push(r.png);
+  }
+  SHEET.sentReference = !!message.reference;
+  SHEET.frame.contentWindow.postMessage(message, location.origin, transfer);
+  sheetStatus('cool', 'opening');
+}
+function showReference(visible) {
+  if (!SHEET || !SHEET.opened || !SHEET.reference) return;
+  SHEET.frame.contentWindow.postMessage({ type: 'pixelkiln:reference', visible }, location.origin);
+}
+function requestEditorSave(close) {
+  if (!SHEET || !SHEET.opened || SHEET.pending) return;
+  const request = 'save-' + (++SHEET.requests);
+  SHEET.pending = { request, close };
+  SHEET.msg.textContent = '';
+  sheetStatus('cool', 'saving');
+  sheetButtons();
+  SHEET.frame.contentWindow.postMessage({ type: 'pixelkiln:request-save', request }, location.origin);
+}
+async function onEditorMessage(m) {
+  switch (m.type) {
+    case 'pixelkiln:ready':
+      SHEET.ready = m;
+      if (m.version !== ED.protocol) {
+        SHEET.msg.textContent = 'The editor speaks protocol ' + m.version + '; this gallery expects ' + ED.protocol + '. Reinstall it with pixelkiln tools install editor.';
+        sheetStatus('bad', 'mismatch');
+        return;
+      }
+      sendOpen();
+      break;
+    case 'pixelkiln:opened':
+      SHEET.opened = true;
+      SHEET.loading.remove();
+      SHEET.reference = !!m.reference;
+      SHEET.compare.hidden = !SHEET.reference;
+      if (m.source === 'pxo') sheetStatus('ok', 'editing the edit file' + (m.frames > 1 ? 's' : '') + ' with ' + (m.layers === 1 ? 'the layer' : m.layers + ' layers') + (m.frames > 1 ? ' and ' + m.frames + ' ' + memberNoun(SHEET.item, m.frames) : '') + ' restored');
+      else if (SHEET.sentProject) sheetStatus('warn', 'editing the flattened edit file' + (m.frames > 1 ? 's' : '') + '; the layer file could not be opened');
+      else if (m.source === 'frames') sheetStatus('ok', (SHEET.item.edits.length ? 'editing the edit files' : 'editing a copy of the generated ' + memberNoun(SHEET.item, m.frames)) + ' as ' + m.frames + ' frames' + (isFrameSet(SHEET.item) ? '' : ', one per ' + memberNoun(SHEET.item, 1)));
+      else sheetStatus('ok', SHEET.item.edit && SHEET.item.edit.exists ? 'editing the edit file' : 'editing a copy of the generated art');
+      if (SHEET.reference) SHEET.status.append(document.createTextNode(' · generated art shown through at 50%'));
+      sheetButtons();
+      break;
+    case 'pixelkiln:dirty':
+      SHEET.dirty = !!m.dirty;
+      if (SHEET.opened && !SHEET.pending) sheetStatus(SHEET.dirty ? 'warn' : 'ok', SHEET.dirty ? 'unsaved changes' : 'saved');
+      sheetButtons();
+      break;
+    case 'pixelkiln:save': {
+      const pending = SHEET.pending;
+      if (!pending || pending.request !== m.request) return;
+      try {
+        const body = { editor: SHEET.ready.editor, protocol: SHEET.ready.version };
+        if (SHEET.roles) {
+          if (!Array.isArray(m.frames)) throw new Error('the editor returned no frames');
+          body.frames = [];
+          for (const f of m.frames) body.frames.push({ role: f.role === undefined ? null : f.role, png: await toBase64(f.png) });
+        } else {
+          body.png = await toBase64(m.png);
+        }
+        if (m.pxo && m.pxo.byteLength) body.pxo = await toBase64(m.pxo);
+        await postHandEdit(SHEET.item, 'save-edit', body);
+        const saved = snap.items.find((i) => i.id === SHEET.item.id);
+        if (saved) SHEET.item = saved;
+        SHEET.dirty = false;
+        SHEET.pending = null;
+        ui.notice = { id: SHEET.item.id, text: 'Saved ' + (saved && saved.edits.length > 1 ? saved.edits.length + ' ' + memberNoun(saved, saved.edits.length) + ' to ' + saved.source : saved && saved.edit ? saved.edit.path : 'the edit') + '. mount and pack place ' + (saved && saved.edits.length > 1 ? 'them' : 'it') + ' in place of the generated art.' };
+        render();
+        if (pending.close) { closeEditorSheet(true); return; }
+        sheetStatus('ok', 'saved');
+      } catch (err) {
+        SHEET.pending = null;
+        SHEET.msg.textContent = err.message + (err.status === 409 ? ' — press Refresh, then save again.' : '');
+        sheetStatus('bad', 'not saved');
+      }
+      sheetButtons();
+      break;
+    }
+    case 'pixelkiln:error':
+      SHEET.msg.textContent = m.message || 'The editor reported an error.';
+      if (SHEET.pending) { SHEET.pending = null; sheetStatus('bad', 'not saved'); sheetButtons(); }
+      break;
+  }
+}
+function closeEditorSheet(force) {
+  if (!SHEET) return;
+  if (SHEET.dirty && !force && !confirm('Discard unsaved changes in the editor?')) return;
+  SHEET = null;
+  $('dialog-host').textContent = '';
+  refresh();
+}
+window.addEventListener('beforeunload', (e) => {
+  if (SHEET && SHEET.dirty) { e.preventDefault(); e.returnValue = ''; }
+});
+
+function visibleItems() {
+  const q = ui.q.trim().toLowerCase();
+  let items = snap.items.filter((item) => {
+    if (ui.states.size && !ui.states.has(item.state)) return false;
+    if (ui.providers.size && !ui.providers.has(item.provider)) return false;
+    if (ui.generators.size && !ui.generators.has(item.generator)) return false;
+    if (ui.projects.size && !ui.projects.has(item.project)) return false;
+    if (!q) return true;
+    const hay = [item.id, item.prompt, item.currentPrompt, item.jobId, item.objectId,
+      item.recordedSpecHash, item.currentSpecHash, item.category, ...(item.tags || []),
+      ...item.outputs.flatMap((o) => [o.path, o.sha256])].filter(Boolean).join('\n').toLowerCase();
+    return hay.includes(q);
+  });
+  const when = (item) => item.downloadedAt || item.submittedAt || '';
+  const sorters = {
+    key: (a, b) => a.id.localeCompare(b.id),
+    newest: (a, b) => when(b).localeCompare(when(a)) || a.id.localeCompare(b.id),
+    oldest: (a, b) => when(a).localeCompare(when(b)) || a.id.localeCompare(b.id),
+    cost: (a, b) => (b.cost - a.cost) || a.id.localeCompare(b.id),
+    size: (a, b) => (b.width * b.height - a.width * a.height) || a.id.localeCompare(b.id),
+  };
+  items.sort(sorters[ui.sort] || sorters.key);
+  return items;
+}
+
+function renderHeader() {
+  $('editing').hidden = !EDITABLE;
+  $('foot-edit').hidden = EDITABLE;
+  $('foot-editing').hidden = !EDITABLE;
+  $('foot-gen').hidden = !GENERATION;
+  const p = $('project');
+  p.textContent = '';
+  if (snap.workspace) {
+    p.append(el('b', null, 'workspace'), ' ', document.createTextNode(shortPath(snap.workspace.path)));
+    p.title = snap.workspace.path;
+  } else {
+    p.append(el('b', null, snap.project.name), ' ', document.createTextNode(shortPath(snap.project.manifest)));
+    p.title = snap.project.manifest + '\nlockfile: ' + snap.project.lock;
+  }
+
+  const t = $('totals');
+  t.textContent = '';
+  if (snap.workspace) {
+    const broken = snap.workspace.projects.filter((pr) => pr.error).length;
+    const w = el('span', null, '');
+    w.append(el('b', null, snap.workspace.projects.length), document.createTextNode(' project' +
+      (snap.workspace.projects.length === 1 ? '' : 's') + (broken ? ' (' + broken + ' unreadable)' : '')));
+    t.append(w);
+  }
+  const n = snap.totals.entries;
+  t.append(el('span', null, ''));
+  t.lastChild.append(el('b', null, n), document.createTextNode(' lock ' + (n === 1 ? 'entry' : 'entries')));
+  const declared = snap.items.filter((i) => i.declared).length;
+  t.append(el('span', null, declared + ' declared by ' + (snap.workspace ? 'a manifest' : 'the manifest')));
+  const recorded = fmtSpend(snap.totals.spendByUnit);
+  t.append(el('span', null, recorded === 'no spend recorded' ? recorded : recorded + ' recorded'));
+  if (snap.filter.styles.length || snap.filter.assets.length) {
+    t.append(el('span', 'state-warn', 'filtered: ' +
+      [snap.filter.styles.length ? '--style ' + snap.filter.styles.join(',') : '',
+       snap.filter.assets.length ? '--only ' + snap.filter.assets.join(',') : ''].filter(Boolean).join(' ')));
+  }
+  t.append(el('span', null, 'snapshot ' + fmtWhen(snap.generatedAt)));
+  if (GENERATION) {
+    const line = budgetLine();
+    if (line) t.append(el('span', 'budget', line));
+  }
+
+  const chips = $('chips');
+  chips.textContent = '';
+  const counts = (pick) => {
+    const m = new Map();
+    for (const item of snap.items) { const k = pick(item); m.set(k, (m.get(k) || 0) + 1); }
+    return m;
+  };
+  const chip = (label, count, set, key, tone) => {
+    const b = el('button', 'chip' + (set.has(key) ? ' on' : ''));
+    b.type = 'button';
+    b.setAttribute('aria-pressed', String(set.has(key)));
+    if (tone) b.append(el('i', 'dot ' + tone));
+    b.append(document.createTextNode(label), el('span', 'n', count));
+    b.onclick = () => { set.has(key) ? set.delete(key) : set.add(key); render(); };
+    return b;
+  };
+  if (snap.workspace) {
+    const byProject = counts((i) => i.project);
+    for (const pr of snap.workspace.projects) {
+      if (byProject.has(pr.id) || ui.projects.has(pr.id)) chips.append(chip(pr.id, byProject.get(pr.id) || 0, ui.projects, pr.id));
+    }
+    chips.append(el('span', 'sep'));
+  }
+  const byState = counts((i) => i.state);
+  for (const s of STATE_ORDER) if (byState.has(s)) chips.append(chip(s, byState.get(s), ui.states, s, STATE_TONE[s]));
+  const byProvider = counts((i) => i.provider);
+  if (byProvider.size > 1 || ui.providers.size) {
+    chips.append(el('span', 'sep'));
+    for (const [k, v] of [...byProvider].sort()) chips.append(chip(k, v, ui.providers, k));
+  }
+  const byGen = counts((i) => i.generator);
+  if (byGen.size > 1 || ui.generators.size) {
+    chips.append(el('span', 'sep'));
+    for (const [k, v] of [...byGen].sort()) chips.append(chip(k, v, ui.generators, k));
+  }
+  if (ui.states.size || ui.providers.size || ui.generators.size || ui.projects.size || ui.q) {
+    const clear = el('button', 'chip', 'clear filters');
+    clear.type = 'button';
+    clear.onclick = () => clearFilters();
+    chips.append(el('span', 'sep'), clear);
+  }
+}
+
+function clearFilters() {
+  ui.states.clear(); ui.providers.clear(); ui.generators.clear(); ui.projects.clear();
+  ui.q = ''; $('q').value = '';
+  render();
+}
+
+function thumb(item) {
+  const cell = el('div', 'cell');
+  // A hand edit is what ships, so it is what the card shows.
+  const shown = item.edit && item.editStatus === 'edited' && item.edits.every((e) => e.url) ? item.edits : item.outputs.filter((o) => o.url);
+  if (!shown.length) {
+    cell.classList.add('none');
+    cell.append(el('span', null, item.state === 'missing' ? 'not generated yet'
+      : item.state === 'in-flight' ? (item.status === 'review' ? 'awaiting review' : 'awaiting provider')
+      : item.state === 'recoverable' ? 'ready to fetch'
+      : item.state === 'failed' ? 'generation failed'
+      : item.state === 'blocked' ? 'waiting on its parent'
+      : item.outputs.length ? 'file missing on disk' : 'no output recorded'));
+    return cell;
+  }
+  const w = item.width, h = item.height;
+  if (shown.length > 1 && !isFrameSet(item)) {
+    const multi = el('div', 'multi');
+    for (const o of shown.slice(0, 4)) {
+      const box = el('div');
+      const img = el('img');
+      img.src = o.url; img.alt = o.role || item.assetId; img.loading = 'lazy';
+      const s = displayScale(w, h, 66, 52);
+      if (s >= 1) { img.width = w * s; img.height = h * s; } else img.className = 'fit';
+      box.append(img); multi.append(box);
+    }
+    cell.append(multi, el('span', 'badge', shown.length + ' outputs'));
+    return cell;
+  }
+  const img = el('img');
+  img.src = shown[0].url; img.alt = item.assetId; img.loading = 'lazy';
+  const s = displayScale(w, h, 156, 116);
+  if (s >= 1) { img.width = w * s; img.height = h * s; } else img.className = 'fit';
+  cell.append(img);
+  if (isFrameSet(item)) cell.append(el('span', 'badge', '▸ ' + shown.length + ' frames'));
+  else if (s >= 1 && s !== 1) cell.append(el('span', 'badge', s + '×'));
+  return cell;
+}
+
+function card(item) {
+  const slot = ui.compare.indexOf(item.id);
+  const c = el('button', 'card' + (item.outputs.some((o) => o.url) ? '' : ' ghost') + (ui.open === item.id ? ' active' : '') + (slot >= 0 ? ' compared' : ''));
+  c.type = 'button';
+  c.dataset.key = item.id;
+  c.setAttribute('aria-label', item.id + ', ' + item.state + (slot >= 0 ? ', in comparison' : ''));
+  const body = el('div', 'cbody');
+  body.append(el('div', 'aid', item.assetId));
+  const meta = el('div', 'cmeta');
+  const st = el('span', 'st');
+  st.append(el('i', 'dot ' + STATE_TONE[item.state]), document.createTextNode(item.state));
+  meta.append(st, el('span', null, item.width + '×' + item.height));
+  if (item.cost) meta.append(el('span', null, fmtCost(item.costUnit, item.cost)));
+  body.append(meta);
+  const cell = thumb(item);
+  if (slot >= 0) cell.append(el('span', 'slot', String(slot + 1)));
+  if (item.editStatus === 'edited' || item.editStatus === 'regenerated-since') {
+    const pen = el('span', 'pen', '✎'); pen.title = 'hand-edited'; cell.append(pen);
+  }
+  const job = activeJobFor(item);
+  if (job) {
+    const badge = el('span', 'busy-badge');
+    badge.append(el('i', 'dot busy'), document.createTextNode(job.phase === 'review' ? 'review' : job.mode === 'generate' ? 'generating' : job.mode));
+    badge.title = (JOB_VERB[job.mode] || job.mode) + ' this asset — ' + (PHASE_TEXT[job.phase] || job.phase);
+    cell.append(badge);
+  }
+  c.append(cell, body);
+  c.onclick = (e) => { if (e.shiftKey) toggleCompare(item.id); else openItem(item.id); };
+  return c;
+}
+
+function renderMain(items) {
+  const root = $('root');
+  root.textContent = '';
+  if (!snap.items.length) {
+    const e = el('div', 'empty');
+    e.append(el('p', null, 'Nothing has been generated for this project yet.'));
+    e.append(el('p', null, 'pixelkiln plan shows what the manifest would make; pixelkiln gen makes it.'));
+    root.append(e);
+    return;
+  }
+  if (!items.length) {
+    const e = el('div', 'empty');
+    e.append(el('p', null, 'No generations match these filters.'));
+    const b = el('button', null, 'Clear filters');
+    b.type = 'button';
+    b.onclick = clearFilters;
+    e.append(b);
+    root.append(e);
+    return;
+  }
+  // Building every card for a very large project on each keystroke is the one
+  // thing that makes this page feel slow, so a render is capped and the rest
+  // is one click away. Filters usually narrow well below the cap anyway.
+  const hidden = Math.max(0, items.length - ui.limit);
+  const shown = hidden ? items.slice(0, ui.limit) : items;
+  // A workspace always breaks on project: lock keys repeat across projects,
+  // so a flat wall of "anvil" cards would be ambiguous. Style grouping stays
+  // optional inside each project, exactly as it is for one project.
+  const unfiltered = !ui.projects.size && !ui.q && !ui.states.size && !ui.providers.size && !ui.generators.size;
+  const projects = snap.workspace
+    ? snap.workspace.projects.filter((pr) => ui.projects.size
+        ? ui.projects.has(pr.id)
+        : unfiltered || shown.some((i) => i.project === pr.id))
+    : [null];
+  const sections = [];
+  for (const pr of projects) {
+    const inProject = pr ? shown.filter((i) => i.project === pr.id) : shown;
+    const styleSections = ui.group === 'style'
+      ? snap.styles.filter((s) => !pr || s.project === pr.id)
+          .map((s) => ({ style: s, items: inProject.filter((i) => i.styleId === s.id) })).filter((s) => s.items.length)
+      : (inProject.length ? [{ style: null, items: inProject }] : []);
+    if (pr) sections.push({ project: pr, style: null, items: null, count: inProject.length });
+    sections.push(...styleSections);
+  }
+  for (const sec of sections) {
+    if (sec.project) {
+      root.append(projectHeader(sec.project, sec.count));
+      continue;
+    }
+    const wrap = el('section', 'style');
+    if (sec.style) {
+      const s = sec.style;
+      const head = el('div', 'shead');
+      head.append(el('h2', null, s.id));
+      const meta = el('div', 'meta');
+      meta.append(el('span', null, s.provider), el('span', null, s.generator));
+      if (s.outDir) meta.append(el('span', 'mono', s.outDir));
+      if (s.palette.length) {
+        const sw = el('span', 'swatches');
+        for (const c of s.palette) { const i = el('i'); i.style.background = c; i.title = c; sw.append(i); }
+        meta.append(sw);
+      }
+      if (s.quality) meta.append(el('span', null, 'quality profile'));
+      meta.append(el('span', null, sec.items.length + ' of ' + s.items + (s.items === 1 ? ' asset' : ' assets')));
+      if (Object.keys(s.spendByUnit).length) meta.append(el('span', null, fmtSpend(s.spendByUnit)));
+      head.append(meta);
+      const addKey = 'new:' + (s.project || '') + ':' + s.id;
+      const tools = el('div', 'tools');
+      if (s.outDir && s.candidates !== null) tools.append(candidatesControl(s));
+      if (GENERATION && s.actionable.keys.length) {
+        const g = el('button', 'primary', 'Generate ' + s.actionable.keys.length + ' · ' + fmtCost(s.actionable.costUnit, Math.round(s.actionable.cost * 100) / 100));
+        g.type = 'button';
+        g.onclick = () => generateDialog(snap.items.filter((i) => i.project === s.project && s.actionable.keys.includes(i.key)), { project: s.project });
+        tools.append(g);
+      }
+      const refreshable = snap.items.filter((i) => i.project === s.project && i.styleId === s.id && i.refreshable && i.upstreamUrl);
+      if (GENERATION && refreshable.length) {
+        const r = el('button', null, 'Pull upstream ' + refreshable.length); r.type = 'button';
+        r.title = 'Re-download objects edited in the provider’s own editor; no cost';
+        r.onclick = () => generateDialog(refreshable, { project: s.project, refresh: true });
+        tools.append(r);
+      }
+      const styleKey = 'style:' + (s.project || '') + ':' + s.id;
+      if (EDITABLE && s.outDir) {
+        const es = el('button', null, ui.editing === styleKey ? 'Cancel' : 'Edit style');
+        es.type = 'button';
+        es.onclick = () => { ui.editing = ui.editing === styleKey ? null : styleKey; ui.notice = null; render(); };
+        tools.append(es);
+        const add = el('button', 'add', ui.editing === addKey ? 'Cancel' : '+ Add asset');
+        add.type = 'button';
+        add.onclick = () => { ui.editing = ui.editing === addKey ? null : addKey; render(); };
+        tools.append(add);
+      }
+      if (tools.childNodes.length) head.append(tools);
+      wrap.append(head);
+      if (ui.notice && ui.notice.id === styleKey) wrap.append(el('div', 'notice', ui.notice.text));
+      if (ui.editing === styleKey) wrap.append(styleForm(s));
+      if (ui.editing === addKey) wrap.append(addAssetForm(s));
+    }
+    const grid = el('div', 'grid');
+    for (const item of sec.items) grid.append(card(item));
+    wrap.append(grid);
+    root.append(wrap);
+  }
+  if (hidden) {
+    const more = el('div', 'empty');
+    more.append(el('p', null, hidden + ' more ' + (hidden === 1 ? 'generation is' : 'generations are') + ' not shown.'));
+    const b = el('button', null, 'Show all ' + items.length);
+    b.type = 'button';
+    b.onclick = () => { ui.limit = Infinity; render(); };
+    more.append(b);
+    root.append(more);
+  }
+}
+
+function projectHeader(pr, count) {
+  const head = el('section', 'project');
+  const line = el('div', 'phead');
+  line.append(el('h2', null, pr.id));
+  const meta = el('div', 'meta');
+  if (pr.name !== pr.id) meta.append(el('span', null, pr.name));
+  meta.append(el('span', 'mono', shortPath(pr.manifest)));
+  if (pr.account) meta.append(el('span', null, pr.account));
+  if (pr.error) {
+    meta.append(el('span', 'state-bad', 'unreadable: ' + pr.error));
+  } else {
+    meta.append(el('span', null, count + ' of ' + pr.items + ' shown · ' + pr.entries + ' lock ' + (pr.entries === 1 ? 'entry' : 'entries')));
+    if (Object.keys(pr.spendByUnit).length) meta.append(el('span', null, fmtSpend(pr.spendByUnit)));
+  }
+  line.append(meta);
+  head.append(line);
+  return head;
+}
+
+// How many images one generation returns for this style. A provider option
+// where the adapter has one; a fact of the generator where it does not.
+function candidatesControl(style) {
+  const wrap = el('span', 'cand');
+  const editKey = 'cand:' + (style.project || '') + ':' + style.id;
+  const declared = snap.items.filter((i) => i.project === style.project && i.styleId === style.id && i.declared).length;
+  if (!(EDITABLE && style.candidatesEditable) || ui.editing !== editKey) {
+    wrap.append(el('span', null, style.candidates + (style.candidates === 1 ? ' candidate' : ' candidates') + ' per generation'));
+    if (EDITABLE && style.candidatesEditable) {
+      const b = el('button', null, 'change'); b.type = 'button';
+      b.onclick = () => { ui.editing = editKey; render(); };
+      wrap.append(b);
+    } else if (style.provider === 'pixellab') {
+      wrap.title = 'PixelLab: map and pixflux return one image per generation; a 1dir style returns 4–64 for its size.';
+    }
+    return wrap;
+  }
+  const input = el('input'); input.type = 'number'; input.min = '1'; input.max = '64'; input.value = String(style.candidates);
+  const save = el('button', 'primary', 'Save'); save.type = 'button';
+  const cancel = el('button', null, 'Cancel'); cancel.type = 'button'; cancel.onclick = () => { ui.editing = null; render(); };
+  const note = el('span', null, 'affects ' + declared + (declared === 1 ? ' asset' : ' assets') + ' — they become stale');
+  save.onclick = async () => {
+    save.disabled = true;
+    try {
+      const pr = snap.workspace ? snap.workspace.projects.find((x) => x.id === style.project) : snap.project;
+      const body = { action: 'patch-style', styleId: style.id, expectedSha256: pr.manifestSha256, patch: { candidates: Number(input.value) } };
+      if (style.project) body.project = style.project;
+      snap = await postEdit(body);
+      ui.editing = null;
+      render();
+    } catch (err) {
+      save.disabled = false;
+      note.textContent = err.message;
+      note.className = 'state-bad';
+    }
+  };
+  wrap.append(input, save, cancel, note);
+  setTimeout(() => input.focus(), 0);
+  return wrap;
+}
+
+// The generations this one replaced: what the lockfile still remembers, with
+// thumbnails from the content cache while the bytes are there, and a way back.
+function historySection(item) {
+  const limit = projectOf(item)?.historyLimit;
+  if (!item.history.length && !(limit > 0 && item.status === 'downloaded')) return null;
+  const s = el('section', 'meta');
+  s.append(el('h3', null, item.history.length ? 'Previous generations (' + item.history.length + ')' : 'Previous generations'));
+  if (!item.history.length) {
+    s.append(el('div', 'state-dim', 'None yet. A regeneration keeps the generation it replaces — up to ' + limit + ' per asset (PIXELKILN_HISTORY, or the manifest’s history) — so it can be brought back from here.'));
+    return s;
+  }
+  const list = el('div', 'versions');
+  const job = GENERATION ? activeJobFor(item) : null;
+  for (const g of item.history) {
+    const v = el('div', 'version');
+    const thumb = el('div', 'thumb');
+    const first = g.outputs[0];
+    if (first && first.url) { const img = el('img'); img.src = first.url; img.alt = 'generation #' + g.index; thumb.append(img); }
+    else thumb.append(el('span', null, g.cached ? '' : 'not cached'));
+    const facts = el('div', 'facts');
+    const head = el('div');
+    head.append(el('b', null, '#' + g.index), document.createTextNode(' · ' + fmtWhen(g.downloadedAt || g.submittedAt) + ' · ' + fmtCost(g.costUnit, g.cost) +
+      (g.outputs.length > 1 ? ' · ' + g.outputs.length + ' files' : '')));
+    facts.append(head);
+    const prompt = el('div', 'prompt' + (g.promptDiffers ? ' differs' : ''), (g.promptDiffers ? 'prompt: ' : 'same prompt: ') + g.prompt);
+    prompt.title = g.prompt;
+    facts.append(prompt);
+    const meta = el('div', 'meta');
+    meta.append(document.createTextNode((first ? first.sha256.slice(0, 12) + '…' : '') + (g.cached ? ' · bytes cached locally' : ' · not in the local cache; a restore re-downloads it')));
+    if (g.upstreamUrl) { const a = el('a', null, 'open in ' + item.provider + ' ↗'); a.href = g.upstreamUrl; a.target = '_blank'; a.rel = 'noopener'; meta.append(document.createTextNode(' · '), a); }
+    facts.append(meta);
+    const acts = el('div', 'acts');
+    if (GENERATION) {
+      const b = el('button', null, 'Restore this one · no cost'); b.type = 'button';
+      b.disabled = !!job;
+      b.title = job ? 'Wait for the running job to finish' : 'The current generation moves into history; this one becomes current and its bytes are written back';
+      b.onclick = () => generateDialog([item], { project: item.project, revert: String(g.index), generation: g });
+      acts.append(b);
+    }
+    v.append(thumb, facts, acts);
+    list.append(v);
+  }
+  s.append(list);
+  s.append(el('div', 'state-dim', 'Keeping up to ' + limit + ' per asset; a restore moves the current generation into this list, so it can be undone the same way.' +
+    (GENERATION ? '' : ' Restoring needs the gallery started with --budget (any amount; nothing is spent).')));
+  return s;
+}
+
+function upstreamSection(item) {
+  if (!item.upstreamUrl && !(GENERATION && item.refreshable)) return null;
+  const s = el('section', 'meta');
+  s.append(el('h3', null, 'Upstream'));
+  const dl = el('dl');
+  if (item.upstreamUrl) {
+    const a = el('a', null, 'Open in ' + item.provider + ' ↗');
+    a.href = item.upstreamUrl; a.target = '_blank'; a.rel = 'noopener';
+    const tiles = item.generator === 'tiles';
+    row(dl, tiles ? 'tile set' : 'object', a);
+    row(dl, 'note', item.provider === 'pixellab'
+      ? (tiles ? 'The tile set this generation was chosen from. Edit it there with PixelLab’s editor, then pull the changes back here; the lockfile records the new bytes as this generation.'
+        : 'The account object this generation came from. Edit it there with PixelLab’s editor, then pull the changes back here; the lockfile records the new bytes as this generation.')
+      : 'The provider’s page for this object.');
+  }
+  s.append(dl);
+  if (GENERATION && item.refreshable) {
+    const acts = el('div', 'hand-actions');
+    const b = el('button', null, 'Pull upstream changes · no cost'); b.type = 'button';
+    b.onclick = () => generateDialog([item], { project: item.project, refresh: true });
+    acts.append(b);
+    s.append(acts);
+  }
+  return s;
+}
+
+// What a job is doing to this record right now. The record's state line still
+// says what is on disk; this says what is about to replace it.
+function jobStrip(item, job) {
+  const strip = el('div', 'job-strip');
+  const ph = el('span', 'ph');
+  ph.append(el('i', 'dot busy'), document.createTextNode(job.phase));
+  const last = el('span', 'last', job.messages.length ? job.messages[job.messages.length - 1].trim() : '');
+  last.title = job.messages.join('\n');
+  const what = el('span', 'what', (JOB_VERB[job.mode] || job.mode) + ' this asset — ' + (PHASE_TEXT[job.phase] || job.phase) +
+    (job.mode === 'generate' && job.phase !== 'review' ? '. The current file stays until the new result is downloaded.' : '.'));
+  strip.append(ph, last, what);
+  const acts = el('div', 'acts');
+  if (job.phase === 'review' && job.review.includes(item.key)) {
+    const b = el('button', 'primary', 'Review candidates'); b.type = 'button'; b.onclick = () => openReview(job.id);
+    acts.append(b);
+  }
+  const logBtn = el('button', null, ui.logs.has(job.id) ? 'Hide log' : 'Log'); logBtn.type = 'button';
+  logBtn.onclick = () => { ui.logs.has(job.id) ? ui.logs.delete(job.id) : ui.logs.add(job.id); renderDrawer(); };
+  acts.append(logBtn);
+  strip.append(acts);
+  if (ui.logs.has(job.id)) { const pre = el('pre', null, job.messages.join('\n')); pre.style.gridColumn = '1 / -1'; strip.append(pre); }
+  return strip;
+}
+
+function generateActions(item) {
+  const row = el('div', 'gen');
+  if (!GENERATION || !item.declared || item.currentSpecHash === null) return row;
+  const cost = item.estimatedCost === null ? '' : ' · ' + fmtCost(item.costUnit, item.estimatedCost);
+  const add = (label, cls, opts) => {
+    const b = el('button', cls, label); b.type = 'button';
+    b.onclick = () => generateDialog([item], { project: item.project, ...opts });
+    row.append(b);
+  };
+  if (item.state === 'missing' || item.state === 'stale' || item.state === 'failed') add('Generate' + cost, 'primary', {});
+  else if (item.state === 'ok') add('Regenerate' + cost, null, { force: true });
+  else if (item.state === 'orphaned' && item.outputs.every((o) => o.exists)) {
+    // The file changed after download. Putting the recorded bytes back and
+    // regenerating both discard that change, so both say so and ask.
+    add('Restore recorded bytes · no cost', null, { restore: true, force: true });
+    add('Regenerate' + cost, null, { force: true });
+  } else if (item.state === 'orphaned') add('Restore · no cost', 'primary', { restore: true });
+  else if (item.state === 'untracked') add('Generate' + cost + ' · replaces the file', null, { force: true });
+  if (item.state === 'in-flight' || item.state === 'recoverable') {
+    // A job already parked this asset in review: go straight to its sheet.
+    const holder = GEN.jobs.find((job) => job.phase === 'review' && job.project === item.project && job.review.includes(item.key));
+    if (holder) {
+      const b = el('button', 'primary', 'Review candidates'); b.type = 'button';
+      b.onclick = () => openReview(holder.id);
+      row.append(b);
+    } else {
+      add(item.status === 'review' ? 'Resume review' : 'Resume · no cost', 'primary', { resume: true });
+    }
+  }
+  return row;
+}
+
+// ---- compare ---------------------------------------------------------------
+
+function toggleCompare(id) {
+  const at = ui.compare.indexOf(id);
+  if (at >= 0) ui.compare.splice(at, 1);
+  else if (ui.compare.length >= 4) { $('note').textContent = ' Compare holds four records; remove one first.'; return; }
+  else ui.compare.push(id);
+  $('note').textContent = '';
+  render();
+}
+function renderTray() {
+  let tray = $('tray');
+  if (!ui.compare.length) { if (tray) tray.remove(); return; }
+  if (!tray) { tray = el('div', 'tray'); tray.id = 'tray'; document.body.append(tray); }
+  tray.textContent = '';
+  const chips = el('div', 'chipset');
+  for (const id of ui.compare) {
+    const item = snap.items.find((i) => i.id === id);
+    if (!item) continue;
+    const pick = el('span', 'pick');
+    const shown = item.outputs.find((o) => o.url);
+    if (shown) { const t = el('img'); t.src = shown.url; t.alt = ''; pick.append(t); }
+    pick.append(document.createTextNode((item.project ? item.project + ':' : '') + item.styleId + '/' + item.assetId));
+    const x = el('button', null, '×'); x.type = 'button'; x.title = 'Remove from comparison';
+    x.onclick = () => toggleCompare(id);
+    pick.append(x);
+    chips.append(pick);
+  }
+  const go = el('button', 'primary', 'Compare ' + ui.compare.length); go.type = 'button';
+  go.disabled = ui.compare.length < 2;
+  go.onclick = () => openCompare();
+  const clear = el('button', null, 'Clear'); clear.type = 'button';
+  clear.onclick = () => { ui.compare = []; render(); };
+  tray.append(chips, go, clear);
+}
+function openCompare() {
+  const items = ui.compare.map((id) => snap.items.find((i) => i.id === id)).filter(Boolean);
+  if (items.length < 2) return;
+  const host = $('dialog-host');
+  host.textContent = '';
+  const scrim = el('div', 'sheet-scrim'); scrim.onclick = () => { host.textContent = ''; };
+  const panel = el('div', 'sheet compare-host');
+  const bar = el('div', 'rbar');
+  const close = el('button', null, 'Back to gallery'); close.type = 'button'; close.onclick = () => { host.textContent = ''; };
+  bar.append(close, el('span', null, 'Fields that differ are tinted. Shift-click cards in the gallery to change the set.'));
+  const zoomBar = el('div', 'zoom');
+  zoomBar.append(el('span', null, 'zoom'));
+  const columnWidth = Math.max(160, Math.floor((Math.min(window.innerWidth * 0.96, 1500) - 140) / items.length) - 24);
+  const largest = Math.max(...items.map((i) => Math.max(i.width, i.height)));
+  const auto = displayScale(largest, largest, columnWidth, Math.min(window.innerHeight * 0.5, 520));
+  for (const z of ['fit', 1, 2, 4, 8]) {
+    const b = el('button', ui.compareZoom === String(z) || (ui.compareZoom === 'auto' && z === auto) ? 'on' : null, z === 'fit' ? 'fit' : z + '×');
+    b.type = 'button'; b.onclick = () => { ui.compareZoom = String(z); openCompare(); };
+    zoomBar.append(b);
+  }
+  bar.append(zoomBar);
+  const zoom = ui.compareZoom === 'auto' ? auto : ui.compareZoom === 'fit' ? Math.min(auto, 1) : Number(ui.compareZoom);
+
+  const body = el('div', 'compare-body');
+  const table = el('table');
+  const thead = el('thead'); const hr = el('tr'); hr.append(el('th', null, ''));
+  for (const item of items) {
+    const th = el('th');
+    const head = el('div', 'chead');
+    const badges = el('div', 'badges');
+    if (item.project) badges.append(el('span', 'sid project', item.project));
+    badges.append(el('span', 'sid', item.styleId));
+    const aid = el('div', 'aid', item.assetId);
+    const openBtn = el('button', 'linkish', 'open record'); openBtn.type = 'button';
+    openBtn.onclick = () => { host.textContent = ''; openItem(item.id); };
+    head.append(badges, aid, openBtn);
+    th.append(head);
+    hr.append(th);
+  }
+  thead.append(hr); table.append(thead);
+  const tbody = el('tbody');
+
+  // Images first, at one shared zoom, so like is compared with like.
+  const imgRow = el('tr'); imgRow.append(el('td', null, 'art'));
+  for (const item of items) {
+    const td = el('td');
+    const box = el('div', 'cimg');
+    const shown = item.outputs.find((o) => o.url);
+    if (shown) {
+      const img = el('img'); img.src = shown.url; img.alt = item.assetId;
+      if (zoom >= 1) { img.width = Math.round(item.width * zoom); img.height = Math.round(item.height * zoom); }
+      else { img.style.maxWidth = '100%'; img.style.height = 'auto'; }
+      box.append(img);
+    } else box.append(el('span', 'none', 'no art on disk'));
+    td.append(box);
+    if (item.outputs.filter((o) => o.url).length > 1) td.append(el('div', 'state-dim', item.outputs.length + ' outputs; first shown'));
+    imgRow.append(td);
+  }
+  tbody.append(imgRow);
+
+  const rows = [
+    ['state', (i) => i.state + (i.reason ? ' — ' + i.reason : ''), (i) => i.state],
+    ['provider', (i) => i.provider],
+    ['generator', (i) => i.generator + (i.tileFeature ? ' · ' + i.tileFeature : '')],
+    ['candidates', (i) => i.candidates ?? '—'],
+    ['size', (i) => i.width + ' × ' + i.height],
+    ['cost', (i) => i.status ? fmtCost(i.costUnit, i.cost) : (i.estimatedCost !== null ? 'est. ' + fmtCost(i.costUnit, i.estimatedCost) : '—')],
+    ['prompt', (i) => i.prompt, null, 'prompt'],
+    ['submitted', (i) => fmtWhen(i.submittedAt) || '—'],
+    ['downloaded', (i) => fmtWhen(i.downloadedAt) || '—'],
+    ['quality', (i) => i.quality ? i.quality.state + (i.quality.review && i.quality.review.status === 'approved' ? ' by ' + i.quality.review.reviewer : '') : '—'],
+    ['spec hash', (i) => i.recordedSpecHash ? i.recordedSpecHash.slice(0, 16) + '…' : '—', null, 'mono'],
+    ['sha256', (i) => i.outputs[0] && i.outputs[0].sha256 ? i.outputs[0].sha256.slice(0, 16) + '…' : '—', null, 'mono'],
+    ['tags', (i) => (i.tags || []).filter((t) => !/^(pixelkiln|asset|style):/.test(t)).join(', ') || '—'],
+  ];
+  for (const [label, show, keyOf, cls] of rows) {
+    const tr = el('tr'); tr.append(el('td', null, label));
+    const keys = items.map((i) => String((keyOf || show)(i)));
+    const differs = new Set(keys).size > 1;
+    for (const item of items) {
+      const td = el('td', (differs ? 'diff' : '') + (cls === 'mono' ? ' mono' : ''));
+      if (cls === 'prompt') td.append(el('div', 'prompt', show(item))); else td.textContent = String(show(item));
+      tr.append(td);
+    }
+    tbody.append(tr);
+  }
+  table.append(tbody);
+  body.append(table);
+  panel.append(bar, body);
+  host.append(scrim, panel);
+  close.focus({ preventScroll: true });
+}
+
+// ---- hand edits -------------------------------------------------------------
+
+const EDIT_STATUS_TEXT = {
+  same: 'The generated art’s pixels, not changed yet. Open it in your editor and save.',
+  edited: 'Differs from the generated art. mount and pack place this file; the generated file stays as the record.',
+  'regenerated-since': 'The generated art changed after this edit was saved — the edit is based on an older generation.',
+  missing: 'The declared file is not on disk.',
+};
+async function postHandEdit(item, action, extra) {
+  const pr = projectOf(item);
+  const body = { action, assetId: item.assetId, styleId: item.styleId, expectedSha256: pr.manifestSha256, ...extra };
+  if (item.project) body.project = item.project;
+  snap = await postEdit(body);
+}
+// A single PNG or a set of them — frames, tiles — is hand-editable, one file
+// per member; a set with a GIF in it is not.
+const editableOutputs = (item) => item.outputs.length && item.outputs.every((o) => o.exists && o.mediaType === 'image/png');
+// What the members of a set are called: frames for an animation, tiles for a tile set.
+const memberNoun = (item, n) => isFrameSet(item) ? (n === 1 ? 'frame' : 'frames')
+  : item.outputs.every((o) => o.role && /^tile/i.test(o.role)) ? (n === 1 ? 'tile' : 'tiles') : (n === 1 ? 'member' : 'members');
+function handEditSection(item) {
+  const canStart = EDITABLE && item.declared && item.asset && projectOf(item)?.manifestSha256 && editableOutputs(item);
+  if (!item.edit && !canStart) return null;
+  const set = item.edits.length > 1;
+  const s = el('section', 'meta');
+  s.append(el('h3', null, set ? 'Hand edit (' + item.edits.length + ' ' + memberNoun(item, item.edits.length) + ')' : 'Hand edit'));
+  if (item.edit) {
+    const pair = el('div', 'pair');
+    const shared = displayScale(item.width, item.height, 200, 160);
+    const fig = (out, label) => {
+      const f = el('figure');
+      if (out && out.url) {
+        const img = el('img'); img.src = out.url; img.alt = label;
+        if (shared >= 1) { img.width = item.width * shared; img.height = item.height * shared; }
+        f.append(img);
+      } else f.append(el('span', 'state-dim', 'not on disk'));
+      f.append(el('figcaption', null, label));
+      return f;
+    };
+    // For a set, the member the preview is on; the strip there steps through them.
+    const at = set ? Math.min(ui.member, item.edits.length - 1) : 0;
+    const which = set ? ' · ' + (item.outputs[at].role || memberNoun(item, 1) + ' ' + (at + 1)) : '';
+    pair.append(fig(item.outputs[at], 'generated' + which), fig(item.edits[at], 'edit' + which));
+    s.append(pair);
+    const dl = el('dl');
+    const tone = item.editStatus === 'edited' ? 'ok' : item.editStatus === 'same' ? 'dim' : 'warn';
+    const st = el('span', 'state-' + tone); st.append(el('i', 'dot ' + tone), document.createTextNode(' ' + item.editStatus));
+    row(dl, 'status', st);
+    row(dl, 'why', EDIT_STATUS_TEXT[item.editStatus] || '');
+    if (set) {
+      row(dl, 'files', item.source + ' — one per ' + memberNoun(item, 1) + ': ' + item.edits.map((e) => e.path.split('/').pop()).join(', '), { mono: true, copy: item.edits.map((e) => e.absolutePath).join('\n') });
+      const differing = item.editChanged.filter(Boolean).length;
+      row(dl, 'changed', differing + ' of ' + item.edits.length + ' ' + memberNoun(item, item.edits.length) + ' differ from the generated art' +
+        (differing ? ': ' + item.edits.filter((e, i) => item.editChanged[i]).map((e) => item.outputs[item.edits.indexOf(e)].role || e.path.split('/').pop()).join(', ') : ''));
+    } else {
+      row(dl, 'file', item.edit.path, { mono: true, copy: item.edit.absolutePath });
+      if (item.edit.sha256) row(dl, 'sha256', item.edit.sha256.slice(0, 16) + '…', { mono: true, copy: item.edit.sha256 });
+    }
+    row(dl, 'saved', fmtWhen(item.edits.reduce((latest, e) => e.modifiedAt && (!latest || e.modifiedAt > latest) ? e.modifiedAt : latest, null)));
+    if (item.editMeta) {
+      row(dl, 'editor', item.editMeta.editor + ', ' + fmtWhen(item.editMeta.savedAt) + (item.editMeta.changedSince ? ' — a file changed since' : ''));
+      if (item.editMeta.basedOn && !set) row(dl, 'based on', item.editMeta.basedOn.slice(0, 16) + '…', { mono: true, copy: item.editMeta.basedOn });
+      if (item.editMeta.project) row(dl, 'layers', item.editMeta.project, { mono: true });
+    }
+    s.append(dl);
+  } else {
+    s.append(el('div', 'state-dim', item.outputs.length > 1
+      ? 'Touch the ' + memberNoun(item, 2) + ' up in your own editor or in the browser, where they open as ' + (isFrameSet(item) ? 'one animation' : 'the frames of one project') + '. The generated files stay untouched; the edit is one sibling file per ' + memberNoun(item, 1) + ' that the manifest points at, and mount, pack, and export place those instead.'
+      : 'Touch it up in your own editor. The generated file stays untouched; the edit is a sibling file the manifest points at, and mount and pack place that instead.'));
+  }
+  if (EDITABLE && item.declared && projectOf(item)?.manifestSha256) {
+    const acts = el('div', 'hand-actions');
+    const msg = el('span', 'msg');
+    const go = async (label, action, extra, done) => {
+      const b = el('button', label === 'Detach edit' || (EDITOR && ED && ED.installed) ? null : 'primary', label); b.type = 'button';
+      b.onclick = async () => {
+        b.disabled = true; msg.className = 'msg'; msg.textContent = '…';
+        try { await postHandEdit(item, action, extra); ui.notice = { id: item.id, text: done }; render(); }
+        catch (err) { b.disabled = false; msg.className = 'msg bad'; msg.textContent = err.message + (err.status === 409 ? ' — press Refresh.' : ''); }
+      };
+      acts.append(b);
+    };
+    if (EDITOR && ED && (item.edit || canStart) && editorSource(item)) {
+      if (ED.installed) {
+        const b = el('button', 'primary', 'Edit in browser'); b.type = 'button';
+        b.title = 'Open in Pixelorama here; Save writes the edit file and declares it';
+        b.onclick = () => openEditorSheet(item);
+        acts.append(b);
+      } else if (ED.release && !ED.installing) {
+        const b = el('button', null, 'Install editor to edit in browser'); b.type = 'button';
+        b.onclick = () => { installEditor(); window.scrollTo({ top: 0 }); };
+        acts.append(b);
+      }
+    }
+    if (item.edit) {
+      go('Open in desktop editor', 'start-edit', { open: true }, 'Opened ' + item.edit.path + ' in your editor. Save there, then Refresh.');
+      go('Detach edit', 'detach-edit', {}, 'Detached. The file' + (set ? 's are' : ' is') + ' still at ' + item.source + '; the generated art is placed again.');
+    } else if (canStart) {
+      const many = item.outputs.length > 1;
+      go('Edit by hand', 'start-edit', { open: true }, 'Created the edit file' + (many ? 's and opened the first ' + memberNoun(item, 1) : ' and opened it') + ' in your editor. Save there, then Refresh to see it here.');
+      go('Create edit file' + (many ? 's' : '') + ' only', 'start-edit', { open: false }, 'Created the edit file' + (many ? 's' : '') + ' and declared ' + (many ? 'them' : 'it') + ' in the manifest.');
+    }
+    acts.append(msg);
+    s.append(acts);
+  }
+  return s;
+}
+
+// ---- editing (only when the server minted a session) ---------------------
+
+// Styles a parent edit reaches: every descendant (via extends) that does not
+// declare the field itself. Child-wins means an omitted field is inherited,
+// so the count follows the manifest's own rule rather than guessing.
+function inheritorsOf(style, field) {
+  const byId = new Map(snap.styles.filter((x) => x.project === style.project).map((x) => [x.id, x]));
+  const out = [];
+  for (const other of byId.values()) {
+    if (other.id === style.id) continue;
+    let cur = other, blocked = false, hops = 0;
+    while (cur && cur.id !== style.id && hops++ < 32) {
+      if (cur.ownFields.includes(field)) { blocked = true; break; }
+      cur = cur.extends ? byId.get(cur.extends) : null;
+    }
+    if (cur && cur.id === style.id && !blocked) out.push(other.id);
+  }
+  return out;
+}
+// noBackground reaches the request only for pixflux and non-PixelLab
+// providers; elsewhere a change is recorded but alters nothing.
+const fieldReaches = (field, style) =>
+  field !== 'noBackground' || style.generator === 'pixflux' || style.provider !== 'pixellab';
+function blastRadius(style, fields) {
+  const byId = new Map(snap.styles.filter((x) => x.project === style.project).map((x) => [x.id, x]));
+  const styleIds = new Set();
+  for (const field of fields) {
+    for (const id of [style.id, ...inheritorsOf(style, field)]) {
+      if (fieldReaches(field, byId.get(id) || style)) styleIds.add(id);
+    }
+  }
+  const affected = snap.items.filter((i) => i.project === style.project && i.declared && styleIds.has(i.styleId));
+  const units = new Map();
+  for (const i of affected) if (i.estimatedCost !== null) units.set(i.costUnit, (units.get(i.costUnit) || 0) + i.estimatedCost);
+  return {
+    styles: [...styleIds],
+    assets: affected.length,
+    cost: [...units].map(([unit, n]) => fmtCost(unit, Math.round(n * 100) / 100)).join(' + '),
+  };
+}
+const parsePalette = (value) => value.split(/[\s,]+/).map((c) => c.trim()).filter(Boolean)
+  .map((c) => '#' + c.replace(/^#/, '').toLowerCase());
+const paletteValid = (colors) => colors.every((c) => /^#[0-9a-f]{6}$/.test(c));
+
+function styleForm(style) {
+  const pr = snap.workspace ? snap.workspace.projects.find((x) => x.id === style.project) : snap.project;
+  const own = (field) => style.ownFields.includes(field);
+  const provenance = (field) => own(field) ? 'set on this style'
+    : style.extends ? 'inherited from ' + style.extends + ' — saving sets a value on this style itself; ' + style.extends + ' is unchanged'
+    : 'default — saving sets a value on this style itself';
+  const form = el('form', 'edit style-form');
+  form.append(el('h3', null, 'Edit style ' + style.id));
+  const prefix = el('input'); prefix.type = 'text'; prefix.value = style.promptPrefix; prefix.placeholder = 'none';
+  const suffix = el('input'); suffix.type = 'text'; suffix.value = style.promptSuffix; suffix.placeholder = 'none';
+  const palette = el('input'); palette.type = 'text'; palette.value = style.palette.join(', '); palette.placeholder = '#rrggbb, #rrggbb — leave empty for no forced palette';
+  const view = el('input'); view.type = 'text'; view.value = style.view || ''; view.placeholder = 'provider default';
+  view.setAttribute('list', 'view-options');
+  const noBg = el('select');
+  noBg.append(new Option(style.extends ? 'inherit from ' + style.extends : 'default (on)', 'default'), new Option('on — strip the generated background', 'on'), new Option('off — keep the background (scenes, banners)', 'off'));
+  noBg.value = own('noBackground') ? (style.noBackground ? 'on' : 'off') : 'default';
+  const swatches = el('div', 'pal');
+  const drawSwatches = () => {
+    swatches.textContent = '';
+    for (const c of parsePalette(palette.value)) { const i = el('i'); i.style.background = c; i.title = c; swatches.append(i); }
+  };
+  drawSwatches();
+  form.append(
+    field('prompt prefix', prefix, 'Prepended to every asset prompt in this style. ' + provenance('promptPrefix')),
+    field('prompt suffix', suffix, 'Appended to every asset prompt in this style. ' + provenance('promptSuffix')),
+    field('palette', palette, 'Forced colours where the provider supports them (pixflux). ' + provenance('palette')),
+    swatches,
+  );
+  const row = el('div', 'row');
+  row.append(
+    field('view', view, 'PixelLab accepts low top-down, high top-down, side; Retro Diffusion reads sidescroller. ' + provenance('view')),
+    field('background', noBg, (fieldReaches('noBackground', style) ? 'Sent for this style. ' : 'Not sent for ' + style.provider + ' ' + style.generator + '; recorded only. ') + provenance('noBackground')),
+  );
+  form.append(row);
+  const blast = el('div', 'blast');
+  const changed = () => {
+    const out = [];
+    if (prefix.value !== style.promptPrefix) out.push('promptPrefix');
+    if (suffix.value !== style.promptSuffix) out.push('promptSuffix');
+    if (parsePalette(palette.value).join(',') !== style.palette.map((c) => c.toLowerCase()).join(',')) out.push('palette');
+    if (view.value.trim() !== (style.view || '')) out.push('view');
+    const bgNow = own('noBackground') ? (style.noBackground ? 'on' : 'off') : 'default';
+    if (noBg.value !== bgNow) out.push('noBackground');
+    return out;
+  };
+  const updateBlast = () => {
+    const fields = changed();
+    drawSwatches();
+    if (!fields.length) { blast.className = 'blast'; blast.textContent = 'No changes yet. A style change alters the request for every asset that uses it.'; return; }
+    const r = blastRadius(style, fields);
+    if (!r.assets) {
+      blast.className = 'blast';
+      blast.textContent = 'Recorded in the manifest only: nothing in ' + style.id + ' sends this field, so no request changes.';
+      return;
+    }
+    blast.className = 'blast hot';
+    blast.textContent = '';
+    const others = r.styles.filter((id) => id !== style.id);
+    blast.append(el('b', null, 'Affects ' + r.assets + (r.assets === 1 ? ' asset' : ' assets')));
+    blast.append(document.createTextNode(others.length
+      ? ' in ' + style.id + ' and ' + others.length + (others.length === 1 ? ' style that inherits it (' : ' styles that inherit it (') + others.join(', ') + ').'
+      : ' in ' + style.id + '.'));
+    blast.append(document.createTextNode(' Generated ones become stale; regenerating all of them is about ' + (r.cost || 'nothing') + '. Nothing is spent until you generate.'));
+  };
+  for (const input of [prefix, suffix, palette, view]) input.addEventListener('input', updateBlast);
+  noBg.addEventListener('change', updateBlast);
+  updateBlast();
+  form.append(blast);
+  const actions = el('div', 'actions');
+  const save = el('button', 'primary', 'Save to manifest'); save.type = 'submit';
+  const cancel = el('button', null, 'Cancel'); cancel.type = 'button'; cancel.onclick = () => { ui.editing = null; render(); };
+  const msg = el('span', 'msg');
+  actions.append(save, cancel, msg);
+  form.append(actions);
+  form.onsubmit = async (e) => {
+    e.preventDefault();
+    const fields = changed();
+    if (!fields.length) { ui.editing = null; render(); return; }
+    const colors = parsePalette(palette.value);
+    if (fields.includes('palette') && !paletteValid(colors)) { msg.className = 'msg bad'; msg.textContent = 'palette must be six-digit hex colours'; return; }
+    const patch = {};
+    if (fields.includes('promptPrefix')) patch.promptPrefix = prefix.value;
+    if (fields.includes('promptSuffix')) patch.promptSuffix = suffix.value;
+    if (fields.includes('palette')) patch.palette = colors;
+    if (fields.includes('view')) patch.view = view.value.trim();
+    if (fields.includes('noBackground')) patch.noBackground = noBg.value === 'default' ? null : noBg.value === 'on';
+    save.disabled = true; msg.className = 'msg'; msg.textContent = 'saving…';
+    const r = blastRadius(style, fields);
+    try {
+      const body = { action: 'patch-style', styleId: style.id, expectedSha256: pr.manifestSha256, patch };
+      if (style.project) body.project = style.project;
+      snap = await postEdit(body);
+      ui.editing = null;
+      ui.notice = { id: 'style:' + (style.project || '') + ':' + style.id,
+        text: r.assets
+          ? 'Saved. The request for ' + r.assets + (r.assets === 1 ? ' asset' : ' assets') + ' changed' + (r.cost ? ' — about ' + r.cost + ' to regenerate.' : '.') + ' Nothing is spent until you generate.'
+          : 'Saved. Recorded in the manifest; no request changed.' };
+      render();
+    } catch (err) {
+      save.disabled = false;
+      msg.className = 'msg bad';
+      msg.textContent = err.message + (err.status === 409 ? ' — press Refresh.' : '');
+    }
+  };
+  setTimeout(() => prefix.focus(), 0);
+  return form;
+}
+
+function addAssetForm(style) {
+  const pr = snap.workspace ? snap.workspace.projects.find((x) => x.id === style.project) : snap.project;
+  const siblings = snap.styles.filter((x) => x.project === style.project);
+  const form = el('form', 'edit');
+  form.append(el('h3', null, 'New asset in ' + style.id));
+  const id = el('input'); id.type = 'text'; id.placeholder = 'asset-id'; id.required = true; id.autocomplete = 'off';
+  id.pattern = '[^/\\]+';
+  const prompt = el('textarea'); prompt.placeholder = 'What to generate. The style adds its prefix and suffix.'; prompt.required = true;
+  const width = numberInput(null, 'style default'), height = numberInput(null, 'style default');
+  const category = el('input'); category.type = 'text'; category.placeholder = 'optional subfolder';
+  const only = el('input'); only.type = 'checkbox'; only.checked = siblings.length > 1;
+  const onlyField = el('label', 'field check'); onlyField.append(only, el('span', null, 'only in ' + style.id));
+  const row1 = el('div', 'row'); row1.append(field('id', id), field('category', category));
+  const row2 = el('div', 'row'); row2.append(field('width', width), field('height', height));
+  form.append(row1, field('prompt', prompt), row2);
+  if (siblings.length > 1) form.append(onlyField);
+  const actions = el('div', 'actions');
+  const save = el('button', 'primary', 'Add asset'); save.type = 'submit';
+  const cancel = el('button', null, 'Cancel'); cancel.type = 'button'; cancel.onclick = () => { ui.editing = null; render(); };
+  const msg = el('span', 'msg');
+  actions.append(save, cancel, msg);
+  form.append(actions);
+  form.onsubmit = async (e) => {
+    e.preventDefault();
+    save.disabled = true; msg.className = 'msg'; msg.textContent = 'saving…';
+    const asset = { prompt: prompt.value };
+    if (numberOrNull(width) !== null) asset.width = numberOrNull(width);
+    if (numberOrNull(height) !== null) asset.height = numberOrNull(height);
+    if (category.value.trim()) asset.category = category.value.trim();
+    if (siblings.length > 1 && only.checked) asset.styles = [style.id];
+    try {
+      const body = { action: 'add-asset', assetId: id.value.trim(), expectedSha256: pr.manifestSha256, asset };
+      if (style.project) body.project = style.project;
+      snap = await postEdit(body);
+      const newId = (style.project ? style.project + ':' : '') + style.id + '/' + id.value.trim();
+      ui.editing = null;
+      ui.notice = { id: newId, text: 'Added to the manifest. Nothing is generated until you run pixelkiln gen.' };
+      render();
+      if (snap.items.some((i) => i.id === newId)) openItem(newId);
+    } catch (err) {
+      save.disabled = false;
+      msg.className = 'msg bad';
+      msg.textContent = err.message + (err.status === 409 ? ' — press Refresh.' : '');
+    }
+  };
+  setTimeout(() => id.focus(), 0);
+  return form;
+}
+
+function editForm(item) {
+  const pr = projectOf(item);
+  const a = item.asset;
+  const styled = !!(a.promptByStyle && Object.hasOwn(a.promptByStyle, item.styleId));
+  const form = el('form', 'edit');
+  form.append(el('h3', null, 'Edit intent'));
+  const scope = el('select');
+  scope.append(new Option('Prompt for every style', 'all'), new Option('Prompt only for ' + item.styleId, 'style'));
+  scope.value = styled ? 'style' : 'all';
+  const prompt = el('textarea');
+  prompt.value = styled ? a.promptByStyle[item.styleId] : a.prompt;
+  scope.onchange = () => {
+    prompt.value = scope.value === 'style' ? (a.promptByStyle?.[item.styleId] ?? a.prompt) : a.prompt;
+  };
+  const width = numberInput(a.width, 'style default'), height = numberInput(a.height, 'style default'), size = numberInput(a.size, 'style default');
+  const category = el('input'); category.type = 'text'; category.value = a.category || '';
+  const tags = el('input'); tags.type = 'text'; tags.value = (a.tags || []).join(', '); tags.placeholder = 'comma-separated';
+  form.append(field('prompt', prompt, 'The style adds its prefix and suffix; the sent prompt is shown below.'), field('applies to', scope));
+  const row = el('div', 'row'); row.append(field('width', width), field('height', height), field('size', size));
+  form.append(row);
+  const row2 = el('div', 'row');
+  row2.append(field('category', category, 'Output subfolder. The existing file stays put; restore or gen writes the new path.'), field('tags', tags));
+  form.append(row2);
+  const actions = el('div', 'actions');
+  const save = el('button', 'primary', 'Save to manifest'); save.type = 'submit';
+  const cancel = el('button', null, 'Cancel'); cancel.type = 'button'; cancel.onclick = () => { ui.editing = null; renderDrawer(); };
+  const msg = el('span', 'msg');
+  actions.append(save, cancel, msg);
+  form.append(actions);
+  form.onsubmit = async (e) => {
+    e.preventDefault();
+    const patch = {};
+    if (scope.value === 'style') {
+      if (!styled || prompt.value !== a.promptByStyle[item.styleId]) patch.promptForStyle = { styleId: item.styleId, prompt: prompt.value };
+    } else {
+      if (prompt.value !== a.prompt) patch.prompt = prompt.value;
+      if (styled) patch.promptForStyle = { styleId: item.styleId, prompt: null };
+    }
+    for (const [key, input] of [['width', width], ['height', height], ['size', size]]) {
+      const next = numberOrNull(input);
+      if (next !== (a[key] ?? null)) patch[key] = next;
+    }
+    const nextCategory = category.value.trim() || null;
+    if (nextCategory !== (a.category || null)) patch.category = nextCategory;
+    const nextTags = splitTags(tags.value);
+    if (nextTags.join('\u0000') !== (a.tags || []).join('\u0000')) patch.tags = nextTags;
+    if (!Object.keys(patch).length) { ui.editing = null; renderDrawer(); return; }
+    save.disabled = true; msg.className = 'msg'; msg.textContent = 'saving…';
+    try {
+      const body = { action: 'patch-asset', assetId: item.assetId, expectedSha256: pr.manifestSha256, patch };
+      if (item.project) body.project = item.project;
+      snap = await postEdit(body);
+      const after = snap.items.find((i) => i.id === item.id);
+      ui.editing = null;
+      ui.notice = {
+        id: item.id,
+        text: after
+          ? 'Saved. plan now reports ' + after.state +
+            (after.estimatedCost !== null && (after.state === 'stale' || after.state === 'missing')
+              ? ' — ' + fmtCost(after.costUnit, after.estimatedCost) + ' to generate. Nothing is spent until you run pixelkiln gen.'
+              : '.')
+          : 'Saved.',
+      };
+      render();
+    } catch (err) {
+      save.disabled = false;
+      msg.className = 'msg bad';
+      msg.textContent = err.message + (err.status === 409 ? ' — press Refresh.' : '');
+    }
+  };
+  setTimeout(() => prompt.focus(), 0);
+  return form;
+}
+
+// ---- detail drawer -------------------------------------------------------
+
+function row(dl, label, value, opts = {}) {
+  if (value === null || value === undefined || value === '') return;
+  dl.append(el('dt', null, label));
+  const dd = el('dd', opts.mono ? 'mono' : null);
+  if (value instanceof Node) dd.append(value); else dd.textContent = String(value);
+  if (opts.copy) {
+    const b = el('button', 'copy', 'copy');
+    b.type = 'button';
+    b.onclick = async () => {
+      try { await navigator.clipboard.writeText(String(opts.copy)); b.textContent = 'copied'; }
+      catch { b.textContent = 'select to copy'; }
+      setTimeout(() => (b.textContent = 'copy'), 1200);
+    };
+    dd.append(b);
+  }
+  dl.append(dd);
+}
+function section(title) {
+  const s = el('section', 'meta');
+  s.append(el('h3', null, title));
+  const dl = el('dl');
+  s.append(dl);
+  return { s, dl };
+}
+function stateNode(state, reason) {
+  const box = el('div', 'status');
+  const st = el('span', 'st state-' + STATE_TONE[state]);
+  st.append(el('i', 'dot ' + STATE_TONE[state]), document.createTextNode(state));
+  box.append(st, el('span', 'why', reason));
+  return box;
+}
+function sibling(item, key) {
+  return snap.items.find((i) => i.key === key && i.project === item.project);
+}
+function keyLink(item, key, label) {
+  const b = el('button', 'linkish', label || key);
+  b.type = 'button';
+  const target = sibling(item, key);
+  if (!target) { b.disabled = true; b.title = 'not in this snapshot'; }
+  b.onclick = () => openItem(target.id);
+  return b;
+}
+function jsonDetails(title, value) {
+  const d = el('details');
+  d.append(el('summary', null, title), el('pre', null, JSON.stringify(value, null, 2)));
+  return d;
+}
+
+function stopPlayback() {
+  if (ui.playing) { clearInterval(ui.playing); ui.playing = null; }
+}
+
+function renderPreview(item, host) {
+  host.textContent = '';
+  stopPlayback();
+  const shown = item.outputs.filter((o) => o.url);
+  const preview = el('div', 'preview');
+  if (!shown.length) {
+    preview.append(el('div', 'none', item.outputs.length ? 'The recorded file is not on disk. pixelkiln restore re-downloads it without spending.' : 'No output to show.'));
+    host.append(preview);
+    return;
+  }
+  const member = shown[Math.min(ui.member, shown.length - 1)] || shown[0];
+  const frameSet = isFrameSet(item);
+  const w = item.width, h = item.height;
+  const box = Math.min(window.innerWidth, 540) - 62;
+  const auto = displayScale(w, h, box, Math.min(window.innerHeight * 0.55, 560));
+  const zoom = ui.zoom === 'auto' ? auto : ui.zoom === 'fit' ? Math.min(auto, 1) : Number(ui.zoom);
+  const img = el('img');
+  img.src = member.url; img.alt = member.role || item.assetId;
+  if (zoom >= 1) { img.width = Math.round(w * zoom); img.height = Math.round(h * zoom); }
+  else { img.style.maxWidth = '100%'; img.style.maxHeight = '55vh'; img.style.width = 'auto'; img.style.height = 'auto'; }
+  preview.append(img);
+
+  const zoomBar = el('div', 'zoom');
+  zoomBar.append(el('span', null, 'zoom'));
+  for (const z of ['fit', 1, 2, 4, 8]) {
+    const b = el('button', ui.zoom === String(z) || (ui.zoom === 'auto' && z === auto) ? 'on' : null, z === 'fit' ? 'fit' : z + '×');
+    b.type = 'button';
+    b.onclick = () => { ui.zoom = String(z); renderPreview(item, host); };
+    zoomBar.append(b);
+  }
+  const label = el('span', 'grow', w + '×' + h + (zoom >= 1 ? ' at ' + zoom + '×' : ' fitted'));
+  zoomBar.append(label);
+  if (frameSet && shown.length > 1) {
+    const fps = item.fps || 12;
+    const play = el('button', null, 'Play ' + fps + ' fps');
+    play.type = 'button';
+    let idx = shown.indexOf(member);
+    play.onclick = () => {
+      if (ui.playing) { stopPlayback(); play.textContent = 'Play ' + fps + ' fps'; return; }
+      play.textContent = 'Pause';
+      ui.playing = setInterval(() => {
+        if (document.hidden) return;
+        idx = (idx + 1) % shown.length;
+        img.src = shown[idx].url;
+        label.textContent = (shown[idx].role || 'frame ' + (idx + 1)) + ' · ' + w + '×' + h + (zoom >= 1 ? ' at ' + zoom + '×' : '');
+        for (const [i, b] of [...host.querySelectorAll('.members button')].entries()) b.classList.toggle('on', i === idx);
+      }, Math.max(16, Math.round(1000 / fps)));
+    };
+    zoomBar.append(play);
+  }
+  host.append(preview, zoomBar);
+
+  if (shown.length > 1) {
+    const strip = el('div', 'members');
+    shown.forEach((o, i) => {
+      const b = el('button', o === member ? 'on' : null);
+      b.type = 'button';
+      const t = el('img'); t.src = o.url; t.alt = o.role || 'output ' + (i + 1); t.loading = 'lazy';
+      b.append(t, el('span', null, o.role || String(i + 1)));
+      b.onclick = () => { ui.member = i; renderPreview(item, host); };
+      strip.append(b);
+    });
+    host.append(strip);
+  }
+}
+
+function renderDrawer() {
+  const host = $('drawer-host');
+  host.textContent = '';
+  stopPlayback();
+  const item = ui.open && snap.items.find((i) => i.id === ui.open);
+  if (!item) { ui.open = null; return; }
+  const items = visibleItems();
+  const pos = items.findIndex((i) => i.id === item.id);
+
+  const scrim = el('div', 'scrim');
+  scrim.onclick = () => closeItem();
+  const drawer = el('aside', 'drawer');
+  drawer.setAttribute('role', 'dialog');
+  drawer.setAttribute('aria-label', item.id);
+
+  const head = el('div', 'dhead');
+  const title = el('div', 'title');
+  if (item.project) title.append(el('span', 'sid project', item.project), ' ');
+  title.append(el('span', 'sid', item.styleId), el('div', 'aid', item.assetId));
+  const nav = el('div', 'nav');
+  const prev = el('button', null, '←'); prev.type = 'button'; prev.title = 'Previous (←)';
+  prev.disabled = pos <= 0; prev.onclick = () => step(-1);
+  const next = el('button', null, '→'); next.type = 'button'; next.title = 'Next (→)';
+  next.disabled = pos < 0 || pos >= items.length - 1; next.onclick = () => step(1);
+  const close = el('button', null, 'Close'); close.type = 'button'; close.onclick = () => closeItem();
+  const cmp = el('button', null, ui.compare.includes(item.id) ? 'Remove from compare' : 'Compare +');
+  cmp.type = 'button'; cmp.onclick = () => toggleCompare(item.id);
+  nav.append(cmp);
+  const canEdit = EDITABLE && item.declared && item.asset && projectOf(item)?.manifestSha256;
+  if (canEdit) {
+    const edit = el('button', null, ui.editing === item.id ? 'Cancel edit' : 'Edit');
+    edit.type = 'button';
+    edit.onclick = () => { ui.editing = ui.editing === item.id ? null : item.id; ui.notice = null; renderDrawer(); };
+    nav.append(edit);
+  }
+  nav.append(prev, next, close);
+  head.append(title, nav);
+
+  const body = el('div', 'dbody');
+  const previewHost = el('div');
+  renderPreview(item, previewHost);
+  body.append(previewHost);
+  if (ui.notice && ui.notice.id === item.id) body.append(el('div', 'notice', ui.notice.text));
+  body.append(stateNode(item.state, item.reason));
+  const job = GENERATION ? activeJobFor(item) : null;
+  if (job) body.append(jobStrip(item, job));
+  else if (GENERATION) body.append(generateActions(item));
+  // Writes are opt-in flags on the command line; say so where the buttons would be.
+  if ((!EDITABLE || !GENERATION) && item.declared) {
+    const missing = [];
+    if (!EDITABLE) missing.push('--edit to change its prompt, size, and tags or open it in the browser editor');
+    if (!GENERATION) missing.push('--budget <n> to generate or regenerate it from here');
+    const hint = el('div', 'state-dim readonly-hint');
+    hint.append(document.createTextNode('This gallery is read-only. Restart it with '), el('code', null, 'pixelkiln gallery'), document.createTextNode(' plus ' + missing.join(', and ') + '.'));
+    body.append(hint);
+  }
+  if (canEdit && ui.editing === item.id) body.append(editForm(item));
+  // Plan already quotes the error as the reason for a failed entry; only a
+  // stale or superseded failure needs its own line.
+  if (item.error && !item.reason.includes(item.error)) body.append(stateNode('failed', item.error));
+
+  // Generation — what was sent and what it cost.
+  {
+    const { s, dl } = section('Generation');
+    row(dl, 'provider', item.provider);
+    row(dl, 'generator', item.generator + (item.tileFeature ? ' · ' + item.tileFeature : ''));
+    row(dl, 'lock status', item.status || 'none — nothing submitted');
+    const pr = el('div', 'prompt', item.prompt); row(dl, item.status ? 'prompt sent' : 'prompt', pr);
+    if (item.currentPrompt) row(dl, 'prompt now', el('div', 'prompt state-warn', item.currentPrompt));
+    row(dl, 'size', item.width + ' × ' + item.height + ' px');
+    if (item.status) row(dl, 'cost', fmtCost(item.costUnit, item.cost));
+    if (item.estimatedCost !== null && (item.estimatedCost !== item.cost || !item.status)) {
+      row(dl, 'estimate now', fmtCost(item.costUnit, item.estimatedCost) +
+        (item.candidates && item.candidates > 1 ? ' for ' + item.candidates + ' candidates' : ''));
+    }
+    if (item.candidateIndex !== null) row(dl, 'candidate', '#' + (item.candidateIndex + 1) + ' chosen in review');
+    row(dl, 'submitted', fmtWhen(item.submittedAt));
+    row(dl, 'downloaded', fmtWhen(item.downloadedAt));
+    row(dl, 'job id', item.jobId, { mono: true, copy: item.jobId });
+    row(dl, 'object id', item.objectId, { mono: true, copy: item.objectId });
+    row(dl, 'review object', item.reviewObjectId, { mono: true, copy: item.reviewObjectId });
+    body.append(s);
+  }
+
+  // Outputs — every file with its hash and whether it is really there.
+  {
+    const s = el('section', 'meta');
+    s.append(el('h3', null, item.outputs.length === 1 ? 'Output' : 'Outputs (' + item.outputs.length + ')'));
+    if (!item.outputs.length) s.append(el('div', 'state-dim', item.source ? 'placed from ' + item.source : 'none recorded'));
+    for (const o of item.outputs) {
+      const box = el('div', 'out');
+      const role = el('div', 'role');
+      role.append(document.createTextNode(o.role || (item.outputs.length > 1 ? 'primary' : 'file')));
+      if (!o.exists) role.append(el('span', 'miss', 'missing on disk'));
+      if (o.url) { const a = el('a', null, 'open'); a.href = o.url.split('?')[0]; a.target = '_blank'; a.rel = 'noopener'; role.append(a); }
+      box.append(role);
+      const dl = el('dl');
+      row(dl, 'path', o.path, { mono: true, copy: o.absolutePath });
+      row(dl, 'sha256', o.sha256 ? o.sha256.slice(0, 16) + '…' : (o.exists ? 'not recorded' : null), { mono: true, copy: o.sha256 || undefined });
+      row(dl, 'bytes', o.exists ? fmtBytes(o.bytes) : null);
+      row(dl, 'type', o.mediaType);
+      box.append(dl);
+      s.append(box);
+    }
+    body.append(s);
+  }
+
+  const hand = handEditSection(item);
+  if (hand) body.append(hand);
+  const upstream = upstreamSection(item);
+  if (upstream) body.append(upstream);
+  const versions = historySection(item);
+  if (versions) body.append(versions);
+
+  if (item.revision || item.revisionParentKey) {
+    const { s, dl } = section('Lineage');
+    row(dl, 'mode', item.revision ? item.revision.mode : (item.asset && item.asset.revision && item.asset.revision.mode));
+    if (item.revisionParentKey) row(dl, 'parent', keyLink(item, item.revisionParentKey));
+    if (item.revision) {
+      row(dl, 'parent sha256', item.revision.sourceSha256.slice(0, 16) + '…', { mono: true, copy: item.revision.sourceSha256 });
+      if (item.revision.maskSha256) row(dl, 'mask sha256', item.revision.maskSha256.slice(0, 16) + '…', { mono: true, copy: item.revision.maskSha256 });
+      if (item.revision.strength !== undefined) row(dl, 'strength', item.revision.strength);
+    }
+    body.append(s);
+  }
+  const children = snap.items.filter((i) => i.revisionParentKey === item.key && i.project === item.project);
+  if (children.length) {
+    const { s, dl } = section('Revisions from this asset');
+    for (const c of children) row(dl, c.revision ? c.revision.mode : 'child', keyLink(item, c.key));
+    body.append(s);
+  }
+
+  if (item.quality) {
+    const q = item.quality;
+    const { s, dl } = section('Quality');
+    const tone = q.state === 'approved' ? 'ok' : q.state === 'blocked' ? 'bad' : 'warn';
+    const st = el('span', 'state-' + tone); st.append(el('i', 'dot ' + tone + ' '), document.createTextNode(' ' + q.state));
+    row(dl, 'state', st);
+    row(dl, 'why', q.reason);
+    if (q.review) {
+      row(dl, 'review', q.review.status === 'approved'
+        ? 'approved by ' + q.review.reviewer + ' · ' + fmtWhen(q.review.approvedAt)
+        : 'pending human 1× review');
+      if (q.review.status === 'approved' && q.review.note) row(dl, 'note', q.review.note);
+    }
+    if (q.palette) {
+      const pal = el('div', 'pal');
+      for (const c of q.palette) { const i = el('i'); i.style.background = c; i.title = c; pal.append(i); }
+      row(dl, 'palette', pal);
+      row(dl, 'colors', q.palette.length + ' declared' + (q.audit ? ', ' + q.audit.colorCount + ' used' : ''));
+    }
+    if (q.nativeGrid) {
+      row(dl, 'native grid', q.nativeGrid.sourceWidth + '×' + q.nativeGrid.sourceHeight + ' → ' +
+        q.nativeGrid.nativeWidth + '×' + q.nativeGrid.nativeHeight + ' (step ' + q.nativeGrid.stepX + '×' + q.nativeGrid.stepY +
+        ', ' + q.nativeGrid.confidence + ' confidence)');
+    }
+    if (q.audit) row(dl, 'audit', (q.audit.safe ? 'passed' : 'failed') + ' · ' + Math.round(q.audit.transparency * 100) + '% transparent' +
+      (q.audit.reasons.length ? ' · ' + q.audit.reasons.join('; ') : ''));
+    if (q.frameSet) row(dl, 'frame set', q.frameSet.count + ' frames at ' + q.frameSet.fps + ' fps');
+    row(dl, 'output', q.output, { mono: true });
+    row(dl, 'record', q.record + (q.recordExists ? '' : ' (not written yet)'), { mono: true });
+    if (q.check && !q.check.safe) row(dl, 'check', el('div', 'state-warn', q.check.reasons.join('\n')));
+    body.append(s);
+    if (q.outputs.some((o) => o.url)) {
+      const strip = el('div', 'members');
+      for (const o of q.outputs.filter((o) => o.url)) {
+        const b = el('button'); b.type = 'button';
+        const t = el('img'); t.src = o.url; t.alt = 'refined ' + (o.role || item.assetId);
+        b.append(t, el('span', null, 'refined')); b.onclick = () => window.open(o.url.split('?')[0], '_blank');
+        strip.append(b);
+      }
+      s.append(strip);
+    }
+  }
+
+  {
+    const { s, dl } = section('Identity');
+    if (item.project) row(dl, 'project', item.project);
+    row(dl, 'lock key', item.key, { mono: true, copy: item.key });
+    if (item.recordedSpecHash) {
+      row(dl, 'spec hash', item.recordedSpecHash.slice(0, 16) + '…', { mono: true, copy: item.recordedSpecHash });
+    }
+    if (item.currentSpecHash && item.currentSpecHash !== item.recordedSpecHash) {
+      row(dl, item.recordedSpecHash ? 'spec hash now' : 'spec hash',
+        el('span', item.recordedSpecHash ? 'state-warn' : null, item.currentSpecHash.slice(0, 16) + '…'), { mono: true, copy: item.currentSpecHash });
+    }
+    row(dl, 'declared', item.declared ? 'yes' : 'no — the manifest no longer has this asset in this style');
+    row(dl, 'category', item.category);
+    row(dl, 'tags', item.tags && item.tags.length ? item.tags.join(', ') : null);
+    row(dl, 'source art', item.source, { mono: true });
+    body.append(s);
+  }
+
+  if (item.asset) {
+    // Show the asset as the author would write it: schema defaults that are
+    // empty add nothing but noise to a record.
+    const declared = Object.fromEntries(Object.entries(item.asset).filter(([, v]) =>
+      !(Array.isArray(v) && !v.length) && !(v && typeof v === 'object' && !Array.isArray(v) && !Object.keys(v).length)));
+    body.append(jsonDetails('Manifest asset', declared));
+  }
+  if (item.providerMetadata && Object.keys(item.providerMetadata).length) {
+    body.append(jsonDetails('Provider metadata', item.providerMetadata));
+  }
+
+  drawer.append(head, body);
+  host.append(scrim, drawer);
+  close.focus({ preventScroll: true });
+}
+
+// View state lives in the URL — filters and sort in the query, the open
+// record in the hash — so a link to "every failed generation" or to one
+// specific record can be pasted into a review thread and land there.
+function readUrlState() {
+  const params = new URLSearchParams(location.search);
+  const list = (name) => (params.get(name) || '').split(',').map((v) => v.trim()).filter(Boolean);
+  ui.q = params.get('q') || '';
+  ui.states = new Set(list('state'));
+  ui.providers = new Set(list('provider'));
+  ui.generators = new Set(list('generator'));
+  ui.projects = new Set(list('project'));
+  ui.compare = list('compare').slice(0, 4);
+  if (['key', 'newest', 'oldest', 'cost', 'size'].includes(params.get('sort'))) ui.sort = params.get('sort');
+  if (['style', 'none'].includes(params.get('group'))) ui.group = params.get('group');
+}
+function writeUrlState() {
+  const params = new URLSearchParams();
+  if (ui.q) params.set('q', ui.q);
+  if (ui.states.size) params.set('state', [...ui.states].join(','));
+  if (ui.providers.size) params.set('provider', [...ui.providers].join(','));
+  if (ui.generators.size) params.set('generator', [...ui.generators].join(','));
+  if (ui.projects.size) params.set('project', [...ui.projects].join(','));
+  if (ui.compare.length) params.set('compare', ui.compare.join(','));
+  if (ui.sort !== 'key') params.set('sort', ui.sort);
+  if (ui.group !== 'style') params.set('group', ui.group);
+  const query = params.toString();
+  const next = location.pathname + (query ? '?' + query : '') + (ui.open ? '#' + encodeURIComponent(ui.open) : '');
+  if (next !== location.pathname + location.search + location.hash) history.replaceState(null, '', next);
+}
+function syncHash() { writeUrlState(); }
+function keyFromHash() {
+  try { return location.hash.length > 1 ? decodeURIComponent(location.hash.slice(1)) : null; }
+  catch { return null; }
+}
+// Opening a record must not rebuild the grid: at a few thousand cards that
+// is a visible pause, and nothing in the grid changes except one highlight.
+function markActive(key) {
+  document.querySelector('.card.active')?.classList.remove('active');
+  const card = key && document.querySelector('.card[data-key="' + CSS.escape(key) + '"]');
+  if (card) card.classList.add('active');
+  return card;
+}
+function openItem(key) {
+  if (ui.open !== key) { ui.editing = null; if (ui.notice && ui.notice.id !== key) ui.notice = null; }
+  ui.open = key; ui.member = 0; ui.zoom = 'auto';
+  syncHash();
+  const card = markActive(key);
+  renderDrawer();
+  if (card) card.scrollIntoView({ block: 'nearest' });
+}
+function closeItem() {
+  const key = ui.open;
+  ui.open = null;
+  ui.editing = null;
+  ui.notice = null;
+  syncHash();
+  const card = markActive(null);
+  renderDrawer();
+  const focus = key && document.querySelector('.card[data-key="' + CSS.escape(key) + '"]');
+  if (focus) focus.focus({ preventScroll: true });
+}
+window.addEventListener('hashchange', () => {
+  const key = keyFromHash();
+  if (key && key !== ui.open && snap.items.some((i) => i.id === key)) openItem(key);
+  else if (!key && ui.open) closeItem();
+});
+function step(delta) {
+  const items = visibleItems();
+  const pos = items.findIndex((i) => i.id === ui.open);
+  const next = items[pos + delta];
+  if (next) openItem(next.id);
+}
+
+function render() {
+  writeUrlState();
+  renderHeader();
+  renderMain(visibleItems());
+  renderDrawer();
+  renderTray();
+}
+
+// ---- refresh --------------------------------------------------------------
+
+let refreshing = false;
+async function refresh() {
+  if (refreshing) return;
+  refreshing = true;
+  const b = $('refresh');
+  b.disabled = true;
+  try {
+    const res = await fetch('/api/gallery.json', { cache: 'no-store' });
+    if (!res.ok) throw new Error(await res.text());
+    snap = await res.json();
+    $('note').textContent = '';
+    render();
+  } catch (err) {
+    $('note').textContent = ' Refresh failed: ' + err.message + ' — is pixelkiln gallery still running?';
+  } finally {
+    refreshing = false;
+    b.disabled = false;
+  }
+}
+$('refresh').onclick = refresh;
+let autoTimer = null;
+$('auto').onchange = (e) => {
+  if (autoTimer) clearInterval(autoTimer);
+  autoTimer = e.target.checked ? setInterval(() => { if (!document.hidden) refresh(); }, 5000) : null;
+};
+
+// ---- input ----------------------------------------------------------------
+
+let searchTimer = null;
+$('q').addEventListener('input', (e) => {
+  ui.q = e.target.value;
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(render, 90);
+});
+$('sort').onchange = (e) => { ui.sort = e.target.value; render(); };
+$('group').onchange = (e) => { ui.group = e.target.value; render(); };
+document.addEventListener('keydown', (e) => {
+  const typing = /^(INPUT|SELECT|TEXTAREA)$/.test(document.activeElement?.tagName || '');
+  if (e.key === '/' && !typing) { e.preventDefault(); $('q').focus(); return; }
+  if (e.key === 'Escape') {
+    if (typing && document.activeElement.id === 'q') { document.activeElement.blur(); return; }
+    if (SHEET) { e.preventDefault(); closeEditorSheet(); return; }
+    if ($('dialog-host').childNodes.length) { e.preventDefault(); $('dialog-host').textContent = ''; return; }
+    if (ui.open) { e.preventDefault(); closeItem(); }
+    return;
+  }
+  if (ui.open && !typing) {
+    if (e.key === 'ArrowLeft') { e.preventDefault(); step(-1); }
+    else if (e.key === 'ArrowRight') { e.preventDefault(); step(1); }
+  }
+});
+document.addEventListener('visibilitychange', () => { if (document.hidden) stopPlayback(); });
+
+readUrlState();
+$('q').value = ui.q;
+$('sort').value = ui.sort;
+$('group').value = ui.group;
+const initialKey = keyFromHash();
+if (initialKey && snap.items.some((i) => i.id === initialKey)) ui.open = initialKey;
+ui.compare = ui.compare.filter((id) => snap.items.some((i) => i.id === id));
+render();
+if (ui.open) document.querySelector('.card.active')?.scrollIntoView({ block: 'center' });
+if (GENERATION) pollJobs();
+if (EDITOR) pollEditor();
+if (ui.compare.length >= 2 && !ui.open) openCompare();