pixelkiln 0.20.2 → 0.22.0

package/dist/index.js

@@ -509,8 +509,8 @@ function validateResponse(schema, raw, operation) {
   throw new Error(`Invalid PixelLab response for ${operation}: ${issues}`);
 }
 var PixelLabError = class extends Error {
-  constructor(message5, status, body) {
-    super(message5);
+  constructor(message6, status, body) {
+    super(message6);
     this.status = status;
     this.body = body;
     this.name = "PixelLabError";
@@ -535,11 +535,11 @@ var PixelLabClient = class {
    * common than the failure mode of retrying (a duplicate object), and a
    * duplicate is visible and free to delete whereas a silent gap is neither.
    */
-  async request(path23, init, attempt = 0) {
+  async request(path25, init, attempt = 0) {
     const auth = this.apiKey.startsWith("Bearer ") ? this.apiKey : `Bearer ${this.apiKey}`;
     let res;
     try {
-      res = await fetch(`${BASE}${path23}`, {
+      res = await fetch(`${BASE}${path25}`, {
         ...init,
         signal: init?.signal ?? AbortSignal.timeout(this.timeoutMs),
         headers: {
@@ -551,24 +551,24 @@ var PixelLabClient = class {
     } catch (err) {
       if (attempt < MAX_RETRIES) {
         await sleep(backoffMs(attempt));
-        return this.request(path23, init, attempt + 1);
+        return this.request(path25, init, attempt + 1);
       }
       throw err;
     }
     if (!res.ok && shouldRetry(res.status) && attempt < MAX_RETRIES) {
       const waitMs = retryAfterMs(res.headers.get("retry-after")) ?? backoffMs(attempt);
       await sleep(waitMs);
-      return this.request(path23, init, attempt + 1);
+      return this.request(path25, init, attempt + 1);
     }
     const text = await res.text();
     if (!res.ok) {
-      throw new PixelLabError(`${init?.method ?? "GET"} ${path23} \u2192 ${res.status}`, res.status, text);
+      throw new PixelLabError(`${init?.method ?? "GET"} ${path25} \u2192 ${res.status}`, res.status, text);
     }
     if (!text) return {};
     try {
       return JSON.parse(text);
     } catch {
-      throw new Error(`${init?.method ?? "GET"} ${path23} returned invalid JSON`);
+      throw new Error(`${init?.method ?? "GET"} ${path25} returned invalid JSON`);
     }
   }
   async balance() {
@@ -1615,9 +1615,9 @@ var RetroDiffusionClient = class {
     }
     return balance;
   }
-  async call(path23, init = {}) {
+  async call(path25, init = {}) {
     if (!this.token) throw new Error("RD_API_KEY is not set");
-    const response = await this.request(`${this.baseUrl}${path23}`, {
+    const response = await this.request(`${this.baseUrl}${path25}`, {
       ...init,
       headers: {
         "Content-Type": "application/json",
@@ -1919,8 +1919,8 @@ function retroError(value) {
     if (details.length) return details.join("; ");
   }
   if (record.detail && typeof record.detail === "object") {
-    const message5 = record.detail.message;
-    if (typeof message5 === "string") return message5;
+    const message6 = record.detail.message;
+    if (typeof message6 === "string") return message6;
   }
   return JSON.stringify(value);
 }
@@ -2376,13 +2376,13 @@ function validProgress(progress) {
   }
   return Math.round(progress * 100);
 }
-function finiteNonnegative(value, message5) {
-  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) throw new Error(message5);
+function finiteNonnegative(value, message6) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) throw new Error(message6);
   return value;
 }
-function optionalFiniteNonnegative(value, message5) {
+function optionalFiniteNonnegative(value, message6) {
   if (value == null) return 0;
-  return finiteNonnegative(value, message5);
+  return finiteNonnegative(value, message6);
 }
 function numericRecord(value) {
   if (value == null) return {};
@@ -2420,10 +2420,10 @@ import { createReadStream } from "fs";
 function sha256(data) {
   return createHash("sha256").update(data).digest("hex");
 }
-async function sha256File(path23) {
+async function sha256File(path25) {
   return new Promise((resolve, reject) => {
     const hash = createHash("sha256");
-    const stream = createReadStream(path23);
+    const stream = createReadStream(path25);
     stream.on("data", (chunk2) => hash.update(chunk2));
     stream.on("error", reject);
     stream.on("end", () => resolve(hash.digest("hex")));
@@ -3312,9 +3312,9 @@ function normalizeBaseUrl(value) {
 }
 function historyError(status) {
   const messages = Array.isArray(status.messages) ? status.messages : [];
-  for (const message5 of messages) {
-    if (!Array.isArray(message5) || message5[0] !== "execution_error" || !isObject(message5[1])) continue;
-    const detail = message5[1].exception_message;
+  for (const message6 of messages) {
+    if (!Array.isArray(message6) || message6[0] !== "execution_error" || !isObject(message6[1])) continue;
+    const detail = message6[1].exception_message;
     if (typeof detail === "string" && detail.trim()) {
       return `ComfyUI execution failed: ${detail.trim().slice(0, 300)}`;
     }
@@ -6746,10 +6746,10 @@ function isSha256Hash(value) {
 function parseCache(value) {
   return HashCacheSchema.parse(value);
 }
-async function loadCache(path23) {
-  if (!existsSync10(path23)) return { version: 1, hashes: {} };
+async function loadCache(path25) {
+  if (!existsSync10(path25)) return { version: 1, hashes: {} };
   try {
-    const parsed = HashCacheSchema.safeParse(JSON.parse(await readFile9(path23, "utf8")));
+    const parsed = HashCacheSchema.safeParse(JSON.parse(await readFile9(path25, "utf8")));
     if (!parsed.success) return { version: 1, hashes: {} };
     return {
       version: 1,
@@ -6761,18 +6761,18 @@ async function loadCache(path23) {
     return { version: 1, hashes: {} };
   }
 }
-async function saveCache(path23, cache) {
+async function saveCache(path25, cache) {
   const sorted = {};
   for (const key of Object.keys(cache.hashes).sort()) {
     const hash = cache.hashes[key];
     if (!isSha256Hash(hash)) throw new Error(`Refusing to cache invalid SHA-256 for ${key}`);
     sorted[key] = hash;
   }
-  await mkdir3(pathModule.dirname(pathModule.resolve(path23)), { recursive: true });
-  const tmp = `${path23}.${process.pid}.${Math.random().toString(36).slice(2)}.tmp`;
+  await mkdir3(pathModule.dirname(pathModule.resolve(path25)), { recursive: true });
+  const tmp = `${path25}.${process.pid}.${Math.random().toString(36).slice(2)}.tmp`;
   try {
     await writeFile3(tmp, JSON.stringify({ version: 1, hashes: sorted }, null, 2) + "\n");
-    await rename3(tmp, path23);
+    await rename3(tmp, path25);
   } finally {
     await rm4(tmp, { force: true });
   }
@@ -7603,7 +7603,7 @@ async function submit(provider, loaded, items, lock, lockPath, opts = {}) {
         `  ${key} \u2192 ${jobId}  (${spec.width}x${spec.height}` + (estimate.candidates > 1 ? `, ${estimate.candidates} ${spec.tileFeature ? "outputs" : "candidates"}` : "") + `, ${estimate.amount})`
       );
     } catch (err) {
-      const message5 = err instanceof Error ? err.message : String(err);
+      const message6 = err instanceof Error ? err.message : String(err);
       const entry = lock.entries[key];
       if (entry.jobId && entry.submissionComplete === true) {
         upsert(lock, key, { status: "processing", error: null });
@@ -7615,10 +7615,10 @@ async function submit(provider, loaded, items, lock, lockPath, opts = {}) {
         failed++;
         upsert(lock, key, {
           status: "failed",
-          error: message5,
+          error: message6,
           cost: entry.jobId ? estimate.amount : 0
         });
-        log(`  FAILED ${key}: ${message5}`);
+        log(`  FAILED ${key}: ${message6}`);
       }
     }
     await saveLock(lockPath, lock);
@@ -7847,14 +7847,14 @@ async function fetchAssets(provider, specs, lock, lockPath, opts = {}) {
         });
         result.downloaded++;
       } catch (err) {
-        const message5 = err instanceof Error ? err.message : String(err);
+        const message6 = err instanceof Error ? err.message : String(err);
         upsert(lock, key, {
           status: "download-failed",
           outputs: mergeOutputs(entry.outputs, outputs),
-          error: `download failed: ${message5}`
+          error: `download failed: ${message6}`
         });
         result.failed++;
-        log(`  FAILED  ${key}: ${message5}`);
+        log(`  FAILED  ${key}: ${message6}`);
       }
       await saveLock(lockPath, lock);
     }
@@ -7924,7 +7924,7 @@ import { access, stat as stat2 } from "fs/promises";
 import path17 from "path";
 async function doctor(loaded, specs, lock, lockPath, opts = {}) {
   const checks = [];
-  const add = (id, level, message5) => checks.push({ id, level, message: message5 });
+  const add = (id, level, message6) => checks.push({ id, level, message: message6 });
   add(
     "manifest",
     "ok",
@@ -8228,9 +8228,107 @@ async function tagAdopted(provider, specs, lock, opts = {}) {
   return count;
 }
 
+// src/pick/server.ts
+import { existsSync as existsSync16 } from "fs";
+import { readFile as readFile15 } from "fs/promises";
+
+// src/pipeline/init.ts
+import { readdir as readdir3, readFile as readFile13, writeFile as writeFile6 } from "fs/promises";
+import { existsSync as existsSync15 } from "fs";
+import path19 from "path";
+function pngSize(buf) {
+  if (buf.length < 24) return null;
+  const isPng = buf.readUInt32BE(0) === 2303741511 && buf.readUInt32BE(4) === 218765834;
+  if (!isPng) return null;
+  if (buf.toString("ascii", 12, 16) !== "IHDR") return null;
+  return { width: buf.readUInt32BE(16), height: buf.readUInt32BE(20) };
+}
+function slugify(value) {
+  return value.replace(/\.png$/i, "").replace(/[^a-zA-Z0-9]+/g, "_").replace(/^_+|_+$/g, "").toLowerCase();
+}
+async function walk(dir, exclude) {
+  const out = [];
+  for (const entry of await readdir3(dir, { withFileTypes: true })) {
+    const full = path19.join(dir, entry.name);
+    if (exclude.some((x) => full.includes(x))) continue;
+    if (entry.isDirectory()) out.push(...await walk(full, exclude));
+    else if (entry.name.toLowerCase().endsWith(".png")) out.push(full);
+  }
+  return out;
+}
+async function scanAssets(root, opts = {}) {
+  const exclude = opts.exclude ?? [];
+  const files = await walk(root, exclude);
+  const assets = [];
+  const skipped = [];
+  const seen = /* @__PURE__ */ new Map();
+  for (const file of files.sort()) {
+    const size = pngSize(await readFile13(file));
+    if (!size) {
+      skipped.push(`${file} (not a readable PNG)`);
+      continue;
+    }
+    const rel = path19.relative(root, file);
+    const category = path19.dirname(rel) === "." ? "" : path19.dirname(rel);
+    let id = slugify(path19.basename(rel));
+    if (seen.has(id)) {
+      const n = seen.get(id) + 1;
+      seen.set(id, n);
+      id = `${slugify(category.replace(/[/\\]/g, "_"))}_${id}`.replace(/^_+/, "");
+    } else {
+      seen.set(id, 1);
+    }
+    assets.push({ id, category, file: rel, width: size.width, height: size.height });
+  }
+  return { assets, skipped };
+}
+function buildManifest(name, styleId, generator, outDir, scanned) {
+  const squares = scanned.filter((a) => a.width === a.height);
+  const commonSize = squares.length ? mode(squares.map((a) => a.width)) : 64;
+  const assets = {};
+  for (const asset of scanned) {
+    assets[asset.id] = {
+      prompt: "",
+      promptByStyle: {},
+      category: asset.category || void 0,
+      file: asset.file,
+      tags: [],
+      styles: [],
+      providerInputs: {},
+      ...generator === "map" ? { width: asset.width, height: asset.height } : asset.width === asset.height && asset.width !== commonSize ? { size: asset.width } : {}
+    };
+  }
+  return {
+    name,
+    provider: "pixellab",
+    styles: {
+      [styleId]: {
+        generator,
+        size: commonSize,
+        // Matches the schema default: a scaffolded style is for sprites, and
+        // a sprite wants its background stripped.
+        noBackground: true,
+        promptPrefix: "",
+        promptSuffix: "",
+        styleImages: [],
+        palette: [],
+        outDir,
+        tags: [name],
+        providerOptions: {}
+      }
+    },
+    assets
+  };
+}
+function mode(values) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const v of values) counts.set(v, (counts.get(v) ?? 0) + 1);
+  return [...counts.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] ?? 64;
+}
+
 // src/pick/sheet.ts
 var escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
-function renderSheet(groups) {
+function renderSheet(groups, options = {}) {
   const safe = groups.map((g) => ({
     ...g,
     styleId: escapeHtml(g.styleId),
@@ -8244,6 +8342,11 @@ function renderSheet(groups) {
     } : {}
   }));
   const data = JSON.stringify(safe).replace(/<\//g, "<\\/");
+  const apply = JSON.stringify({
+    url: options.applyUrl ?? "/apply",
+    headers: options.applyHeaders ?? {},
+    embedded: options.embedded === true
+  }).replace(/<\//g, "<\\/");
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -8286,7 +8389,7 @@ function renderSheet(groups) {
     align-items:start; }
   .review.no-context { display:block; }
   .context { border:1px solid var(--line); padding:8px; background:var(--panel-deep);
-    min-width:0; }
+    min-width:0; display:grid; gap:12px; align-content:start; }
   .context-label { display:flex; justify-content:space-between; gap:8px; margin-bottom:7px;
     color:var(--dim); font-size:10.5px; font-variant-numeric:tabular-nums; }
   .context img { display:block; width:100%; height:auto; max-height:420px; object-fit:contain;
@@ -8355,6 +8458,7 @@ function renderSheet(groups) {
 </footer>
 <script>
 const GROUPS = ${data};
+const APPLY = ${apply};
 const picks = new Map();
 const root = document.getElementById('root');
 document.getElementById('total').textContent = GROUPS.length;
@@ -8375,24 +8479,40 @@ GROUPS.forEach((g, gi) => {
     '<div class="ghead"><span class="style">' + g.styleId + '</span>' +
     '<span class="aid">' + g.assetId + '</span>' +
     '<span class="prompt">' + g.prompt + '</span></div>' +
-    '<div class="review' + (g.revision ? '' : ' no-context') + '">' +
+    '<div class="review' + (g.revision || g.current ? '' : ' no-context') + '">' +
     '<div class="frames"></div></div>';
   const review = el.querySelector('.review');
   const frames = el.querySelector('.frames');
-  if (g.revision) {
-    const context = document.createElement('aside');
-    context.className = 'context';
+  const contextPanel = (identityText, dimensionsText, url, alt) => {
+    const block = document.createElement('div');
     const label = document.createElement('div');
     label.className = 'context-label';
     const identity = document.createElement('span');
-    identity.textContent = g.revision.mode.toUpperCase() + ' \xB7 SOURCE ' + g.revision.sourceAssetId;
+    identity.textContent = identityText;
     const dimensions = document.createElement('span');
-    dimensions.textContent = g.revision.width + '\xD7' + g.revision.height;
+    dimensions.textContent = dimensionsText;
     label.append(identity, dimensions);
-    const source = document.createElement('img');
-    source.src = g.revision.sourceUrl;
-    source.alt = 'Revision source ' + g.revision.sourceAssetId;
-    context.append(label, source);
+    const img = document.createElement('img');
+    img.src = url;
+    img.alt = alt;
+    block.append(label, img);
+    return block;
+  };
+  if (g.revision || g.current) {
+    const context = document.createElement('aside');
+    context.className = 'context';
+    if (g.revision) {
+      context.append(contextPanel(
+        g.revision.mode.toUpperCase() + ' \xB7 SOURCE ' + g.revision.sourceAssetId,
+        g.revision.width + '\xD7' + g.revision.height,
+        g.revision.sourceUrl, 'Revision source ' + g.revision.sourceAssetId));
+    }
+    if (g.current) {
+      context.append(contextPanel(
+        'CURRENT ART \xB7 replaced if you choose',
+        g.current.width + '\xD7' + g.current.height,
+        g.current.url, 'Current ' + g.assetId));
+    }
     review.insertBefore(context, frames);
   }
   if (g.mode === 'frame-set') {
@@ -8576,13 +8696,17 @@ document.getElementById('submit').onclick = async () => {
   status.textContent = 'applying\u2026';
   const selections = [...picks.entries()].map(([gi, index]) => ({ key: GROUPS[gi].key, index }));
   try {
-    const res = await fetch('/apply', {
-      method: 'POST', headers: { 'Content-Type': 'application/json' },
+    const res = await fetch(APPLY.url, {
+      method: 'POST', headers: { 'Content-Type': 'application/json', ...APPLY.headers },
       body: JSON.stringify({ selections }),
     });
     if (!res.ok) throw new Error(await res.text());
-    status.textContent = 'done \u2014 you can close this tab';
+    const result = await res.json();
+    status.textContent = APPLY.embedded ? 'applied' : 'done \u2014 you can close this tab';
     document.body.style.opacity = '.6';
+    if (APPLY.embedded && window.parent !== window) {
+      window.parent.postMessage({ type: 'pixelkiln:review-applied', result }, location.origin);
+    }
   } catch (err) {
     status.textContent = 'failed: ' + err.message;
     btn.disabled = false;
@@ -8596,7 +8720,7 @@ document.getElementById('submit').onclick = async () => {
 // src/pick/review-server.ts
 import { createServer } from "http";
 import { spawn } from "child_process";
-import { readFile as readFile13 } from "fs/promises";
+import { readFile as readFile14 } from "fs/promises";
 function serveReviewPage(opts) {
   const log = opts.onProgress ?? (() => {
   });
@@ -8605,7 +8729,7 @@ function serveReviewPage(opts) {
       if (req.method === "GET" && req.url && opts.assets?.has(req.url)) {
         try {
           const asset = opts.assets.get(req.url);
-          const bytes = await readFile13(asset.path);
+          const bytes = await readFile14(asset.path);
           res.writeHead(200, {
             "Content-Type": asset.contentType,
             "Cache-Control": "no-store",
@@ -8654,10 +8778,10 @@ function serveReviewPage(opts) {
           res.end(JSON.stringify(result));
           server.close(() => resolve(result));
         } catch (err) {
-          const message5 = err instanceof Error ? err.message : String(err);
-          log(`  apply failed: ${message5}`);
+          const message6 = err instanceof Error ? err.message : String(err);
+          log(`  apply failed: ${message6}`);
           res.writeHead(500, { "Content-Type": "text/plain" });
-          res.end(message5);
+          res.end(message6);
         }
         return;
       }
@@ -8677,7 +8801,23 @@ function serveReviewPage(opts) {
 }
 
 // src/pick/server.ts
-async function runPicker(provider, lock, lockPath, opts = {}) {
+async function currentArt(entry, spec) {
+  if (!spec || !entry.supersededOutputs?.length) return null;
+  const previous = primaryOutput({ ...entry, outputs: entry.supersededOutputs });
+  if (!previous) return null;
+  const file = resolveOutputPath(previous.path, spec.root);
+  if (!existsSync16(file)) return null;
+  const contentType = previous.mediaType ?? mediaTypeFromExtension(file);
+  if (!contentType) return null;
+  let width = entry.width;
+  let height = entry.height;
+  if (contentType === "image/png") {
+    const size = pngSize(await readFile15(file));
+    if (size) ({ width, height } = size);
+  }
+  return { path: file, contentType, width, height };
+}
+async function prepareReview(provider, lock, opts = {}) {
   const log = opts.onProgress ?? (() => {
   });
   const selectedKeys = opts.keys ? new Set(opts.keys) : null;
@@ -8685,6 +8825,7 @@ async function runPicker(provider, lock, lockPath, opts = {}) {
     (opts.specs ?? []).map((spec) => [lockKey(spec.styleId, spec.assetId), spec])
   );
   const reviewAssets = /* @__PURE__ */ new Map();
+  const prefix = opts.routePrefix ?? "";
   const groups = [];
   for (const [key, entry] of Object.entries(lock.entries)) {
     if (entry.provider !== provider.id || selectedKeys && !selectedKeys.has(key)) continue;
@@ -8694,13 +8835,18 @@ async function runPicker(provider, lock, lockPath, opts = {}) {
       const state = await provider.poll(entry.reviewObjectId, entry.generator, { spec });
       if (state.status !== "review" && state.status !== "review-set" || (state.status === "review" ? !state.candidateUrls.length : !state.frameUrls.length)) continue;
       const frameUrls = state.status === "review" ? state.candidateUrls : state.frameUrls;
-      const sourceRoute = spec?.revision ? `/revision-source/${encodeURIComponent(String(groups.length))}` : null;
+      const sourceRoute = spec?.revision ? `${prefix}/revision-source/${encodeURIComponent(String(groups.length))}` : null;
       if (sourceRoute && spec?.revision) {
         reviewAssets.set(sourceRoute, {
           path: spec.revision.sourceFile,
           contentType: spec.revision.sourceFormat === "jpeg" ? "image/jpeg" : "image/png"
         });
       }
+      const current = await currentArt(entry, spec);
+      const currentRoute = current ? `${prefix}/current-art/${encodeURIComponent(String(groups.length))}` : null;
+      if (current && currentRoute) {
+        reviewAssets.set(currentRoute, { path: current.path, contentType: current.contentType });
+      }
       groups.push({
         key,
         assetId: entry.assetId,
@@ -8723,33 +8869,20 @@ async function runPicker(provider, lock, lockPath, opts = {}) {
             width: spec.revision.sourceWidth,
             height: spec.revision.sourceHeight
           }
-        } : {}
+        } : {},
+        ...current && currentRoute ? { current: { url: currentRoute, width: current.width, height: current.height } } : {}
       });
     } catch (err) {
       log(`  could not load candidates for ${key}: ${err instanceof Error ? err.message : String(err)}`);
     }
   }
-  if (groups.length === 0) return { selected: 0, skipped: 0 };
-  const html = renderSheet(groups);
+  if (groups.length === 0) return null;
   const byKey = new Map(groups.map((g) => [g.key, g]));
-  return serveReviewPage({
-    html,
-    port: opts.port,
-    open: opts.open,
-    onProgress: log,
+  return {
+    groups,
     assets: reviewAssets,
-    onReady: (url) => {
-      const info = { url, keys: groups.map((group) => group.key) };
-      if (opts.onReady) {
-        opts.onReady(info);
-      } else {
-        log(`
-  ${groups.length} asset(s) awaiting selection: ${url}`);
-        log(`  (leave this running; it exits once you apply)
-`);
-      }
-    },
-    handleApply: async (body) => {
+    html: (options) => renderSheet(groups, options),
+    apply: async (body, lockPath) => {
       const { selections } = body;
       let selected = 0;
       for (const { key, index } of selections) {
@@ -8809,117 +8942,3120 @@ async function runPicker(provider, lock, lockPath, opts = {}) {
       await saveLock(lockPath, lock);
       return { selected, skipped: groups.length - selected };
     }
+  };
+}
+async function runPicker(provider, lock, lockPath, opts = {}) {
+  const log = opts.onProgress ?? (() => {
+  });
+  const session = await prepareReview(provider, lock, {
+    onProgress: log,
+    keys: opts.keys,
+    specs: opts.specs
+  });
+  if (!session) return { selected: 0, skipped: 0 };
+  const groups = session.groups;
+  return serveReviewPage({
+    html: session.html(),
+    port: opts.port,
+    open: opts.open,
+    onProgress: log,
+    assets: session.assets,
+    onReady: (url) => {
+      const info = { url, keys: groups.map((group) => group.key) };
+      if (opts.onReady) {
+        opts.onReady(info);
+      } else {
+        log(`
+  ${groups.length} asset(s) awaiting selection: ${url}`);
+        log(`  (leave this running; it exits once you apply)
+`);
+      }
+    },
+    handleApply: (body) => session.apply(body, lockPath)
   });
 }
 
-// src/pipeline/init.ts
-import { readdir as readdir3, readFile as readFile14, writeFile as writeFile6 } from "fs/promises";
-import { existsSync as existsSync15 } from "fs";
-import path19 from "path";
-function pngSize(buf) {
-  if (buf.length < 24) return null;
-  const isPng = buf.readUInt32BE(0) === 2303741511 && buf.readUInt32BE(4) === 218765834;
-  if (!isPng) return null;
-  if (buf.toString("ascii", 12, 16) !== "IHDR") return null;
-  return { width: buf.readUInt32BE(16), height: buf.readUInt32BE(20) };
-}
-function slugify(value) {
-  return value.replace(/\.png$/i, "").replace(/[^a-zA-Z0-9]+/g, "_").replace(/^_+|_+$/g, "").toLowerCase();
+// src/gallery/snapshot.ts
+import { createHash as createHash4 } from "crypto";
+import { existsSync as existsSync18 } from "fs";
+import { readFile as readFile18, stat as stat3 } from "fs/promises";
+import path22 from "path";
+
+// src/workspace.ts
+import { mkdir as mkdir5, readFile as readFile16, rename as rename5, rm as rm7, writeFile as writeFile7 } from "fs/promises";
+import { existsSync as existsSync17 } from "fs";
+import path20 from "path";
+import { z as z6 } from "zod";
+var WorkspaceProjectSchema = z6.object({
+  id: z6.string().min(1),
+  /** Manifest path, relative to the catalog file's own directory. */
+  manifest: z6.string().min(1),
+  /** Lockfile path, relative to the catalog file's own directory. */
+  lock: z6.string().min(1),
+  provider: z6.string().min(1).default("pixellab"),
+  /** Free-form label for a shared account, e.g. distinguishing sandboxes. */
+  account: z6.string().optional()
+}).strict();
+var WorkspaceSchema = z6.object({
+  version: z6.literal(1),
+  projects: z6.array(WorkspaceProjectSchema).default([])
+}).strict();
+function parseWorkspace(raw) {
+  const parsed = WorkspaceSchema.safeParse(raw);
+  if (parsed.success) return parsed.data;
+  throw new Error(
+    `Workspace catalog is not valid v1:
+${parsed.error.issues.slice(0, 5).map((i) => `  ${i.path.join(".")}: ${i.message}`).join("\n")}`
+  );
 }
-async function walk(dir, exclude) {
-  const out = [];
-  for (const entry of await readdir3(dir, { withFileTypes: true })) {
-    const full = path19.join(dir, entry.name);
-    if (exclude.some((x) => full.includes(x))) continue;
-    if (entry.isDirectory()) out.push(...await walk(full, exclude));
-    else if (entry.name.toLowerCase().endsWith(".png")) out.push(full);
+async function loadWorkspace(workspacePath) {
+  if (!existsSync17(workspacePath)) return { version: 1, projects: [] };
+  let raw;
+  try {
+    raw = JSON.parse(await readFile16(workspacePath, "utf8"));
+  } catch (err) {
+    throw new Error(
+      `Workspace catalog at ${workspacePath} is malformed:
+${err instanceof Error ? err.message : String(err)}`
+    );
   }
-  return out;
+  return parseWorkspace(raw);
 }
-async function scanAssets(root, opts = {}) {
-  const exclude = opts.exclude ?? [];
-  const files = await walk(root, exclude);
-  const assets = [];
-  const skipped = [];
-  const seen = /* @__PURE__ */ new Map();
-  for (const file of files.sort()) {
-    const size = pngSize(await readFile14(file));
-    if (!size) {
-      skipped.push(`${file} (not a readable PNG)`);
-      continue;
-    }
-    const rel = path19.relative(root, file);
-    const category = path19.dirname(rel) === "." ? "" : path19.dirname(rel);
-    let id = slugify(path19.basename(rel));
-    if (seen.has(id)) {
-      const n = seen.get(id) + 1;
-      seen.set(id, n);
-      id = `${slugify(category.replace(/[/\\]/g, "_"))}_${id}`.replace(/^_+/, "");
-    } else {
-      seen.set(id, 1);
-    }
-    assets.push({ id, category, file: rel, width: size.width, height: size.height });
+async function saveWorkspace(workspacePath, ws) {
+  const sorted = {
+    version: 1,
+    projects: [...ws.projects].sort((a, b) => a.id.localeCompare(b.id))
+  };
+  await mkdir5(path20.dirname(path20.resolve(workspacePath)), { recursive: true });
+  const tmp = `${workspacePath}.${process.pid}.${Math.random().toString(36).slice(2)}.tmp`;
+  try {
+    await writeFile7(tmp, JSON.stringify(sorted, null, 2) + "\n");
+    await rename5(tmp, workspacePath);
+  } finally {
+    await rm7(tmp, { force: true });
   }
-  return { assets, skipped };
 }
-function buildManifest(name, styleId, generator, outDir, scanned) {
-  const squares = scanned.filter((a) => a.width === a.height);
-  const commonSize = squares.length ? mode(squares.map((a) => a.width)) : 64;
-  const assets = {};
-  for (const asset of scanned) {
-    assets[asset.id] = {
-      prompt: "",
-      promptByStyle: {},
-      category: asset.category || void 0,
-      file: asset.file,
-      tags: [],
-      styles: [],
-      providerInputs: {},
-      ...generator === "map" ? { width: asset.width, height: asset.height } : asset.width === asset.height && asset.width !== commonSize ? { size: asset.width } : {}
-    };
-  }
+function toPortablePath(dir, absolute) {
+  return path20.relative(dir, absolute).split(path20.sep).join("/");
+}
+function resolveProject(dir, project) {
+  return {
+    manifestPath: path20.resolve(dir, project.manifest.split("/").join(path20.sep)),
+    lockPath: path20.resolve(dir, project.lock.split("/").join(path20.sep))
+  };
+}
+function validateWorkspace(ws, dir) {
+  const diagnostics = [];
+  const idCounts = /* @__PURE__ */ new Map();
+  const lockOwners = /* @__PURE__ */ new Map();
+  const manifestOwners = /* @__PURE__ */ new Map();
+  for (const project of ws.projects) {
+    idCounts.set(project.id, (idCounts.get(project.id) ?? 0) + 1);
+    const { manifestPath, lockPath } = resolveProject(dir, project);
+    lockOwners.set(lockPath, [...lockOwners.get(lockPath) ?? [], project.id]);
+    manifestOwners.set(manifestPath, [...manifestOwners.get(manifestPath) ?? [], project.id]);
+    if (path20.isAbsolute(project.manifest) || path20.isAbsolute(project.lock)) {
+      diagnostics.push({
+        id: "absolute-path",
+        level: "warning",
+        message: `project "${project.id}" stores an absolute path \u2014 the catalog will not resolve correctly if this tree is cloned or moved elsewhere`
+      });
+    }
+    if (!existsSync17(manifestPath)) {
+      diagnostics.push({
+        id: "missing-manifest",
+        level: "error",
+        message: `project "${project.id}" manifest not found: ${manifestPath}`
+      });
+    }
+    if (!existsSync17(lockPath)) {
+      diagnostics.push({
+        id: "missing-lock",
+        level: "error",
+        message: `project "${project.id}" lockfile not found: ${lockPath}`
+      });
+    }
+  }
+  for (const [id, count] of idCounts) {
+    if (count > 1) {
+      diagnostics.push({
+        id: "duplicate-id",
+        level: "error",
+        message: `project id "${id}" is registered ${count} times`
+      });
+    }
+  }
+  for (const [lockPath, ids] of lockOwners) {
+    if (ids.length > 1) {
+      diagnostics.push({
+        id: "duplicate-lock",
+        level: "error",
+        message: `${ids.join(", ")} all register the same lockfile: ${lockPath}`
+      });
+    }
+  }
+  for (const [manifestPath, ids] of manifestOwners) {
+    if (ids.length > 1) {
+      diagnostics.push({
+        id: "duplicate-manifest",
+        level: "warning",
+        message: `${ids.join(", ")} share manifest ${manifestPath} \u2014 expected only when they are variant lockfiles beside one manifest`
+      });
+    }
+  }
+  const providers = new Set(ws.projects.map((p) => p.provider));
+  if (providers.size > 1) {
+    diagnostics.push({
+      id: "mixed-provider",
+      level: "warning",
+      message: `registered projects use different providers: ${[...providers].sort().join(", ")} \u2014 spend totals are kept separate per unit, but confirm this is intentional`
+    });
+  }
+  return diagnostics;
+}
+
+// src/gallery/edit.ts
+import { readFile as readFile17, rename as rename6, rm as rm8, writeFile as writeFile8 } from "fs/promises";
+import path21 from "path";
+import { z as z7 } from "zod";
+var HexSha = z7.string().regex(/^[0-9a-f]{64}$/);
+var AssetPatchSchema = z7.object({
+  prompt: z7.string().optional(),
+  /** Per-style override for the style being viewed; null removes it. */
+  promptForStyle: z7.object({ styleId: z7.string().min(1), prompt: z7.string().nullable() }).optional(),
+  category: z7.string().nullable().optional(),
+  width: z7.number().int().nullable().optional(),
+  height: z7.number().int().nullable().optional(),
+  size: z7.number().int().nullable().optional(),
+  tags: z7.array(z7.string()).optional()
+}).strict();
+var NewAssetSchema = z7.object({
+  prompt: z7.string(),
+  category: z7.string().optional(),
+  width: z7.number().int().optional(),
+  height: z7.number().int().optional(),
+  size: z7.number().int().optional(),
+  tags: z7.array(z7.string()).optional(),
+  /** Restrict to these styles; empty or omitted means every style. */
+  styles: z7.array(z7.string().min(1)).optional()
+}).strict();
+var CANDIDATE_OPTION = {
+  retrodiffusion: "numImages",
+  comfyui: "numImages",
+  scenario: "numOutputs"
+};
+var ManifestEditSchema = z7.discriminatedUnion("action", [
+  z7.object({
+    action: z7.literal("patch-asset"),
+    /** Workspace project id; omitted for a single-project gallery. */
+    project: z7.string().min(1).optional(),
+    assetId: z7.string().min(1),
+    /** Manifest bytes the page last saw; a mismatch refuses the write. */
+    expectedSha256: HexSha,
+    patch: AssetPatchSchema
+  }).strict(),
+  z7.object({
+    action: z7.literal("add-asset"),
+    project: z7.string().min(1).optional(),
+    assetId: z7.string().min(1).regex(/^[^/\\]+$/, "asset ids cannot contain slashes"),
+    expectedSha256: HexSha,
+    asset: NewAssetSchema
+  }).strict(),
+  z7.object({
+    action: z7.literal("patch-style"),
+    project: z7.string().min(1).optional(),
+    styleId: z7.string().min(1),
+    expectedSha256: HexSha,
+    patch: z7.object({
+      /** Candidates per generation, written to the provider's own option. */
+      candidates: z7.number().int().min(1).max(64).optional(),
+      /** Empty clears the style's own value (inherit, or the default). */
+      promptPrefix: z7.string().optional(),
+      promptSuffix: z7.string().optional(),
+      /** `#rrggbb` values; null or empty clears the style's own palette. */
+      palette: z7.array(z7.string().regex(/^#?[0-9a-f]{6}$/i, "expected a six-digit hex colour")).max(256).nullable().optional()
+    }).strict().refine((patch) => Object.keys(patch).length > 0, { message: "nothing to change" })
+  }).strict()
+]);
+var ManifestDriftError = class extends Error {
+  status = 409;
+  constructor(manifestPath) {
+    super(`${manifestPath} changed on disk since this page loaded; refresh and try again`);
+    this.name = "ManifestDriftError";
+  }
+};
+var ManifestEditError = class extends Error {
+  status = 400;
+  constructor(message6) {
+    super(message6);
+    this.name = "ManifestEditError";
+  }
+};
+function serializeLike(original, value) {
+  const indentMatch = /\n([ \t]+)"/.exec(original);
+  const indent = indentMatch ? indentMatch[1].startsWith("	") ? "	" : indentMatch[1].length : 2;
+  return JSON.stringify(value, null, indent) + (original.endsWith("\n") ? "\n" : "");
+}
+function styleProvider(raw, styleId, seen = /* @__PURE__ */ new Set()) {
+  const style = raw.styles?.[styleId];
+  if (!style || seen.has(styleId)) return raw.provider ?? "pixellab";
+  if (style.provider) return style.provider;
+  seen.add(styleId);
+  return style.extends ? styleProvider(raw, style.extends, seen) : raw.provider ?? "pixellab";
+}
+function setOrDelete(target, key, value) {
+  if (value === null || value === void 0) delete target[key];
+  else target[key] = value;
+}
+function applyEdit(raw, edit) {
+  raw.assets ??= {};
+  if (edit.action === "patch-style") {
+    const style = raw.styles && Object.hasOwn(raw.styles, edit.styleId) ? raw.styles[edit.styleId] : void 0;
+    if (!style) throw new ManifestEditError(`style "${edit.styleId}" is not declared by the manifest`);
+    const { patch: patch2 } = edit;
+    if (patch2.candidates !== void 0) {
+      const provider = styleProvider(raw, edit.styleId);
+      const option = CANDIDATE_OPTION[provider];
+      if (!option) {
+        throw new ManifestEditError(
+          provider === "pixellab" ? "PixelLab's candidate count follows the generator and size: map and pixflux return one image; a 1dir style returns 4\u201364 for its size" : `provider "${provider}" has no candidate-count option`
+        );
+      }
+      const options = { ...style.providerOptions ?? {} };
+      options[provider] = { ...options[provider] ?? {}, [option]: patch2.candidates };
+      style.providerOptions = options;
+    }
+    if (patch2.promptPrefix !== void 0) setOrDelete(style, "promptPrefix", patch2.promptPrefix || null);
+    if (patch2.promptSuffix !== void 0) setOrDelete(style, "promptSuffix", patch2.promptSuffix || null);
+    if (patch2.palette !== void 0) {
+      const colors = (patch2.palette ?? []).map((color) => "#" + color.replace(/^#/, "").toLowerCase());
+      setOrDelete(style, "palette", colors.length ? colors : null);
+    }
+    return;
+  }
+  if (edit.action === "add-asset") {
+    if (Object.hasOwn(raw.assets, edit.assetId)) {
+      throw new ManifestEditError(`asset "${edit.assetId}" already exists`);
+    }
+    const { styles, tags, ...rest } = edit.asset;
+    const asset2 = { ...rest };
+    if (tags?.length) asset2.tags = tags;
+    if (styles?.length) {
+      for (const styleId of styles) {
+        if (!raw.styles || !Object.hasOwn(raw.styles, styleId)) {
+          throw new ManifestEditError(`unknown style "${styleId}"`);
+        }
+      }
+      asset2.styles = styles;
+    }
+    raw.assets[edit.assetId] = asset2;
+    return;
+  }
+  const asset = Object.hasOwn(raw.assets, edit.assetId) ? raw.assets[edit.assetId] : void 0;
+  if (!asset) throw new ManifestEditError(`asset "${edit.assetId}" is not declared by the manifest`);
+  const { patch } = edit;
+  if (patch.prompt !== void 0) asset.prompt = patch.prompt;
+  if (patch.promptForStyle) {
+    const { styleId, prompt } = patch.promptForStyle;
+    if (!raw.styles || !Object.hasOwn(raw.styles, styleId)) {
+      throw new ManifestEditError(`unknown style "${styleId}"`);
+    }
+    const byStyle = { ...asset.promptByStyle ?? {} };
+    if (prompt === null) delete byStyle[styleId];
+    else byStyle[styleId] = prompt;
+    if (Object.keys(byStyle).length) asset.promptByStyle = byStyle;
+    else delete asset.promptByStyle;
+  }
+  if ("category" in patch) setOrDelete(asset, "category", patch.category);
+  if ("width" in patch) setOrDelete(asset, "width", patch.width);
+  if ("height" in patch) setOrDelete(asset, "height", patch.height);
+  if ("size" in patch) setOrDelete(asset, "size", patch.size);
+  if (patch.tags !== void 0) {
+    if (patch.tags.length) asset.tags = patch.tags;
+    else delete asset.tags;
+  }
+}
+async function applyManifestEdit(manifestPath, edit) {
+  const absolute = path21.resolve(manifestPath);
+  const original = await readFile17(absolute, "utf8");
+  const before = sha256(original);
+  if (before !== edit.expectedSha256) throw new ManifestDriftError(absolute);
+  let raw;
+  try {
+    raw = JSON.parse(original);
+  } catch (error) {
+    throw new ManifestEditError(
+      `manifest is not valid JSON: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+  applyEdit(raw, edit);
+  const next = serializeLike(original, raw);
+  if (next === original) return { manifestPath: absolute, sha256: before, changed: false };
+  const tmp = path21.join(
+    path21.dirname(absolute),
+    `.${path21.basename(absolute)}.${process.pid}.${Math.random().toString(36).slice(2)}.tmp`
+  );
+  try {
+    await writeFile8(tmp, next);
+    try {
+      const loaded = await loadManifest(tmp);
+      await resolveSpecs(loaded);
+    } catch (error) {
+      const message6 = error instanceof Error ? error.message : String(error);
+      throw new ManifestEditError(message6.replace(tmp, absolute));
+    }
+    await rename6(tmp, absolute);
+  } finally {
+    await rm8(tmp, { force: true });
+  }
+  return { manifestPath: absolute, sha256: sha256(next), changed: true };
+}
+function createGalleryEditHandler(opts) {
+  const log = opts.onProgress ?? (() => {
+  });
+  return async (body) => {
+    const parsed = ManifestEditSchema.safeParse(body);
+    if (!parsed.success) {
+      throw new ManifestEditError(
+        "invalid edit: " + parsed.error.issues.slice(0, 3).map((issue) => `${issue.path.join(".")}: ${issue.message}`).join("; ")
+      );
+    }
+    let manifestPath;
+    try {
+      manifestPath = await opts.manifestFor(parsed.data.project);
+    } catch (error) {
+      throw new ManifestEditError(error instanceof Error ? error.message : String(error));
+    }
+    const result = await applyManifestEdit(manifestPath, parsed.data);
+    if (result.changed) {
+      const relative = path21.relative(process.cwd(), result.manifestPath);
+      const shown = !relative || relative.startsWith("..") ? result.manifestPath : relative;
+      const subject = parsed.data.action === "patch-style" ? `style ${parsed.data.styleId}` : parsed.data.assetId;
+      log(`  manifest edited: ${parsed.data.action === "add-asset" ? "added" : "changed"} ${subject} in ${shown}`);
+    }
+    return opts.reload();
+  };
+}
+
+// src/gallery/snapshot.ts
+function galleryMediaId(absolutePath) {
+  return createHash4("sha256").update(path22.resolve(absolutePath)).digest("hex").slice(0, 24);
+}
+function galleryMediaRoute(id) {
+  return `/media/${id}`;
+}
+function isDeclared(loaded, styleId, assetId) {
+  const asset = loaded.manifest.assets[assetId];
+  if (!asset || !loaded.manifest.styles[styleId]) return false;
+  return asset.styles.length === 0 || asset.styles.includes(styleId);
+}
+function matchesFilter(filter, styleId, assetId) {
+  if (filter?.styles?.length && !filter.styles.includes(styleId)) return false;
+  if (filter?.assets?.length && !filter.assets.includes(assetId)) return false;
+  return true;
+}
+function metadataFps(entry) {
+  if (!entry) return null;
+  const namespace = entry.providerMetadata?.[entry.provider];
+  const frameSet = namespace?.frameSet;
+  if (frameSet && typeof frameSet === "object" && "fps" in frameSet) {
+    const fps = frameSet.fps;
+    if (typeof fps === "number" && Number.isFinite(fps) && fps > 0) return fps;
+  }
+  return null;
+}
+async function fileBytes(absolutePath) {
+  try {
+    const info = await stat3(absolutePath);
+    return info.isFile() ? info.size : null;
+  } catch {
+    return null;
+  }
+}
+async function describeOutput(media, root, absolutePath, recorded = {}) {
+  const bytes = await fileBytes(absolutePath);
+  const exists = bytes !== null;
+  const mediaType = recorded.mediaType ?? mediaTypeFromExtension(absolutePath);
+  let url = null;
+  if (exists && mediaType) {
+    const id = galleryMediaId(absolutePath);
+    media.set(id, { path: absolutePath, contentType: mediaType });
+    url = `${galleryMediaRoute(id)}?v=${(recorded.sha256 ?? String(bytes)).slice(0, 16)}`;
+  }
+  return {
+    path: portableOutputPath(absolutePath, root),
+    absolutePath,
+    sha256: recorded.sha256 ?? null,
+    role: recorded.role ?? null,
+    mediaType,
+    exists,
+    bytes,
+    url
+  };
+}
+async function describeQuality(media, root, inspection) {
+  const outputPaths = inspection.outputs ?? [inspection.output];
+  const outputs = await Promise.all(
+    outputPaths.map((file) => describeOutput(media, root, path22.resolve(root, file)))
+  );
+  const recordPath = path22.resolve(root, inspection.record);
+  const recordExists = existsSync18(recordPath);
+  let options = null;
+  let check = null;
+  if (recordExists) {
+    try {
+      const result = await checkQualityRecord(recordPath);
+      options = result.options;
+      check = { safe: result.safe, current: result.current, reasons: result.reasons };
+    } catch (error) {
+      check = {
+        safe: false,
+        current: false,
+        reasons: [error instanceof Error ? error.message : String(error)]
+      };
+    }
+  }
+  return {
+    state: inspection.state,
+    reason: inspection.reason,
+    output: portableOutputPath(path22.resolve(root, inspection.output), root),
+    record: portableOutputPath(recordPath, root),
+    recordExists,
+    outputs,
+    palette: options?.palette.colors ?? null,
+    review: options ? options.review.status === "approved" ? {
+      status: "approved",
+      reviewer: options.review.reviewer,
+      approvedAt: options.review.approvedAt,
+      note: options.review.note ?? null
+    } : { status: "pending" } : null,
+    nativeGrid: options ? {
+      confidence: options.nativeGrid.confidence,
+      consensus: options.nativeGrid.consensus,
+      stepX: options.nativeGrid.stepX,
+      stepY: options.nativeGrid.stepY,
+      sourceWidth: options.nativeGrid.sourceWidth,
+      sourceHeight: options.nativeGrid.sourceHeight,
+      nativeWidth: options.nativeGrid.nativeWidth,
+      nativeHeight: options.nativeGrid.nativeHeight
+    } : null,
+    audit: options ? {
+      safe: options.audit.safe,
+      colorCount: options.audit.colorCount,
+      transparency: options.audit.transparency,
+      reasons: options.audit.reasons
+    } : null,
+    frameSet: options?.frameSet ? { fps: options.frameSet.fps, count: options.frameSet.count, roles: options.frameSet.roles } : null,
+    check
+  };
+}
+async function buildGallerySnapshot(opts) {
+  const { loaded, specs, lock } = opts;
+  const root = loaded.root;
+  const media = /* @__PURE__ */ new Map();
+  const plan = await buildPlan(specs, lock);
+  const items = [];
+  const manifestText = await readFile18(loaded.path, "utf8");
+  const manifestSha256 = sha256(manifestText);
+  let rawStyles = {};
+  try {
+    const raw = JSON.parse(manifestText);
+    if (raw && typeof raw === "object" && raw.styles && typeof raw.styles === "object") rawStyles = raw.styles;
+  } catch {
+  }
+  for (const planItem of plan.items) {
+    const { spec, key } = planItem;
+    const entry = lock.entries[key];
+    const asset = loaded.manifest.assets[spec.assetId] ?? null;
+    let outputs;
+    if (entry && entry.outputs.length) {
+      outputs = await Promise.all(
+        entry.outputs.map(
+          (output, index) => describeOutput(media, root, currentEntryOutputPath(entry, spec, index), output)
+        )
+      );
+    } else if (spec.source) {
+      outputs = [await describeOutput(media, root, path22.resolve(root, spec.source))];
+    } else if (!entry && existsSync18(spec.outFile)) {
+      outputs = [await describeOutput(media, root, spec.outFile)];
+    } else {
+      outputs = [];
+    }
+    const quality = planItem.quality ? await describeQuality(media, root, planItem.quality) : null;
+    items.push({
+      id: key,
+      project: null,
+      key,
+      styleId: spec.styleId,
+      assetId: spec.assetId,
+      declared: true,
+      state: planItem.state,
+      reason: planItem.reason,
+      status: entry?.status ?? null,
+      provider: entry?.provider ?? spec.provider,
+      generator: entry?.generator ?? spec.generator,
+      prompt: entry?.prompt ?? spec.prompt,
+      currentPrompt: entry && entry.prompt !== spec.prompt ? spec.prompt : null,
+      width: entry?.width ?? spec.width,
+      height: entry?.height ?? spec.height,
+      tileFeature: entry?.tileFeature ?? spec.tileFeature ?? null,
+      fps: quality?.frameSet?.fps ?? metadataFps(entry) ?? spec.quality?.fps ?? null,
+      cost: entry?.cost ?? 0,
+      costUnit: entry?.costUnit ?? spec.costUnit,
+      estimatedCost: spec.cost,
+      candidates: spec.candidates,
+      submittedAt: entry?.submittedAt ?? null,
+      downloadedAt: entry?.downloadedAt ?? null,
+      jobId: entry?.jobId ?? null,
+      objectId: entry?.objectId ?? null,
+      reviewObjectId: entry?.reviewObjectId ?? null,
+      candidateIndex: entry?.candidateIndex ?? null,
+      error: entry?.error ?? null,
+      recordedSpecHash: entry?.specHash ?? null,
+      currentSpecHash: spec.specHash,
+      revision: entry?.revision ?? null,
+      revisionParentKey: spec.revision ? lockKey(spec.styleId, spec.revision.sourceAssetId) : entry?.revision ? lockKey(spec.styleId, entry.revision.sourceAssetId) : null,
+      outputs,
+      quality,
+      providerMetadata: entry?.providerMetadata ?? {},
+      asset,
+      source: spec.source ?? null,
+      tags: spec.tags,
+      category: asset?.category ?? null
+    });
+  }
+  const shown = new Set(items.map((item) => item.key));
+  for (const [key, entry] of Object.entries(lock.entries)) {
+    if (shown.has(key)) continue;
+    if (isDeclared(loaded, entry.styleId, entry.assetId)) continue;
+    if (!matchesFilter(opts.filter, entry.styleId, entry.assetId)) continue;
+    const outputs = await Promise.all(
+      entry.outputs.map(
+        (output) => describeOutput(media, root, resolveOutputPath(output.path, root), output)
+      )
+    );
+    items.push({
+      id: key,
+      project: null,
+      key,
+      styleId: entry.styleId,
+      assetId: entry.assetId,
+      declared: false,
+      state: "undeclared",
+      reason: "not declared by the current manifest; `pixelkiln prune` removes the entry",
+      status: entry.status,
+      provider: entry.provider,
+      generator: entry.generator,
+      prompt: entry.prompt,
+      currentPrompt: null,
+      width: entry.width,
+      height: entry.height,
+      tileFeature: entry.tileFeature,
+      fps: metadataFps(entry),
+      cost: entry.cost,
+      costUnit: entry.costUnit,
+      estimatedCost: null,
+      candidates: null,
+      submittedAt: entry.submittedAt,
+      downloadedAt: entry.downloadedAt,
+      jobId: entry.jobId,
+      objectId: entry.objectId,
+      reviewObjectId: entry.reviewObjectId,
+      candidateIndex: entry.candidateIndex,
+      error: entry.error,
+      recordedSpecHash: entry.specHash,
+      currentSpecHash: null,
+      revision: entry.revision,
+      revisionParentKey: entry.revision ? lockKey(entry.styleId, entry.revision.sourceAssetId) : null,
+      outputs,
+      quality: null,
+      providerMetadata: entry.providerMetadata ?? {},
+      asset: null,
+      source: null,
+      tags: [],
+      category: null
+    });
+  }
+  items.sort((a, b) => a.key.localeCompare(b.key));
+  const byState = {};
+  for (const item of items) byState[item.state] = (byState[item.state] ?? 0) + 1;
+  const byStatus = {};
+  for (const entry of Object.values(lock.entries)) {
+    byStatus[entry.status] = (byStatus[entry.status] ?? 0) + 1;
+  }
+  const styleIds = /* @__PURE__ */ new Set([
+    ...Object.keys(loaded.manifest.styles),
+    ...items.map((item) => item.styleId)
+  ]);
+  const styles = [...styleIds].filter((id) => !opts.filter?.styles?.length || opts.filter.styles.includes(id) || items.some((item) => item.styleId === id)).sort().map((id) => {
+    const style = loaded.manifest.styles[id];
+    const styleItems = items.filter((item) => item.styleId === id);
+    const spend = {};
+    for (const item of styleItems) {
+      if (item.cost) spend[item.costUnit] = (spend[item.costUnit] ?? 0) + item.cost;
+    }
+    const counts = new Set(styleItems.filter((item) => item.declared && item.candidates !== null).map((item) => item.candidates));
+    const provider = style ? style.provider ?? loaded.manifest.provider : styleItems[0]?.provider ?? loaded.manifest.provider;
+    const actionableItems = styleItems.filter((item) => item.declared && (item.state === "missing" || item.state === "stale" || item.state === "failed"));
+    const declaredItems = styleItems.filter((item) => item.declared);
+    const rawStyle = Object.hasOwn(rawStyles, id) ? rawStyles[id] : void 0;
+    return {
+      id,
+      project: null,
+      // A declared style inherits the manifest default; only a style the
+      // manifest no longer has falls back to what its entries recorded.
+      provider,
+      generator: style?.generator ?? styleItems[0]?.generator ?? "map",
+      outDir: style?.outDir ?? "",
+      promptPrefix: style?.promptPrefix ?? "",
+      promptSuffix: style?.promptSuffix ?? "",
+      palette: style?.palette ?? [],
+      quality: Boolean(style?.quality),
+      tags: style?.tags ?? [],
+      extends: typeof rawStyle?.extends === "string" ? rawStyle.extends : null,
+      ownFields: rawStyle ? Object.keys(rawStyle).filter((key) => key !== "extends") : [],
+      items: styleItems.length,
+      spendByUnit: spend,
+      regenerate: {
+        assets: declaredItems.length,
+        cost: declaredItems.reduce((sum, item) => sum + (item.estimatedCost ?? 0), 0),
+        costUnit: declaredItems[0]?.costUnit ?? styleItems[0]?.costUnit ?? "generations"
+      },
+      candidates: counts.size === 1 ? [...counts][0] : null,
+      candidatesEditable: Boolean(style) && Object.hasOwn(CANDIDATE_OPTION, provider),
+      actionable: {
+        keys: actionableItems.map((item) => item.key),
+        cost: actionableItems.reduce((sum, item) => sum + (item.estimatedCost ?? 0), 0),
+        costUnit: actionableItems[0]?.costUnit ?? styleItems[0]?.costUnit ?? "generations"
+      }
+    };
+  }).filter((style) => style.items > 0 || !opts.filter?.styles?.length);
+  const snapshot = {
+    version: 1,
+    generatedAt: (opts.now ?? (() => /* @__PURE__ */ new Date()))().toISOString(),
+    project: {
+      id: loaded.manifest.name,
+      name: loaded.manifest.name,
+      manifest: loaded.path,
+      lock: path22.resolve(opts.lockPath),
+      root,
+      provider: loaded.manifest.provider,
+      account: null,
+      manifestSha256,
+      entries: Object.keys(lock.entries).length,
+      items: items.length,
+      spendByUnit: spendByUnit(lock),
+      error: null
+    },
+    workspace: null,
+    filter: { styles: opts.filter?.styles ?? [], assets: opts.filter?.assets ?? [] },
+    totals: {
+      entries: Object.keys(lock.entries).length,
+      items: items.length,
+      byState,
+      byStatus,
+      spendByUnit: spendByUnit(lock)
+    },
+    styles,
+    items
+  };
+  return { snapshot, media };
+}
+async function buildWorkspaceGallerySnapshot(opts) {
+  const dir = path22.dirname(path22.resolve(opts.workspacePath));
+  const media = /* @__PURE__ */ new Map();
+  const projects = [];
+  const items = [];
+  const styles = [];
+  const filter = { styles: opts.filter?.styles ?? [], assets: opts.filter?.assets ?? [] };
+  for (const project of opts.workspace.projects) {
+    const { manifestPath, lockPath } = resolveProject(dir, project);
+    try {
+      const loaded = await loadManifest(manifestPath);
+      const styleFilter = filter.styles.filter((id) => loaded.manifest.styles[id]);
+      const assetFilter = filter.assets.filter((id) => loaded.manifest.assets[id]);
+      const excluded = filter.styles.length > 0 && styleFilter.length === 0 || filter.assets.length > 0 && assetFilter.length === 0;
+      const lock = await loadLock(lockPath);
+      let projectItems = [];
+      let projectStyles = [];
+      let manifestSha256 = null;
+      if (!excluded) {
+        const specs = await resolveSpecs(loaded, { styles: styleFilter, assets: assetFilter });
+        normalizeLockOutputPaths(lock, specs);
+        const build = await buildGallerySnapshot({
+          loaded,
+          specs,
+          lock,
+          lockPath,
+          filter: { styles: styleFilter, assets: assetFilter },
+          now: opts.now
+        });
+        for (const [id, file] of build.media) media.set(id, file);
+        manifestSha256 = build.snapshot.project?.manifestSha256 ?? null;
+        projectItems = build.snapshot.items.map((item) => ({
+          ...item,
+          id: `${project.id}:${item.key}`,
+          project: project.id
+        }));
+        projectStyles = build.snapshot.styles.map((style) => ({ ...style, project: project.id }));
+      }
+      items.push(...projectItems);
+      styles.push(...projectStyles);
+      projects.push({
+        id: project.id,
+        name: loaded.manifest.name,
+        manifest: manifestPath,
+        lock: path22.resolve(lockPath),
+        root: loaded.root,
+        provider: loaded.manifest.provider,
+        account: project.account ?? null,
+        manifestSha256: manifestSha256 ?? sha256(await readFile18(manifestPath, "utf8")),
+        entries: Object.keys(lock.entries).length,
+        items: projectItems.length,
+        spendByUnit: spendByUnit(lock),
+        error: null
+      });
+    } catch (err) {
+      projects.push({
+        id: project.id,
+        name: project.id,
+        manifest: manifestPath,
+        lock: path22.resolve(lockPath),
+        root: path22.dirname(manifestPath),
+        provider: project.provider,
+        account: project.account ?? null,
+        manifestSha256: null,
+        entries: 0,
+        items: 0,
+        spendByUnit: {},
+        error: err instanceof Error ? err.message : String(err)
+      });
+    }
+  }
+  const byState = {};
+  for (const item of items) byState[item.state] = (byState[item.state] ?? 0) + 1;
+  const byStatus = {};
+  for (const item of items) if (item.status) byStatus[item.status] = (byStatus[item.status] ?? 0) + 1;
+  const spend = {};
+  for (const project of projects) {
+    for (const [unit, amount] of Object.entries(project.spendByUnit)) {
+      spend[unit] = (spend[unit] ?? 0) + amount;
+    }
+  }
+  return {
+    snapshot: {
+      version: 1,
+      generatedAt: (opts.now ?? (() => /* @__PURE__ */ new Date()))().toISOString(),
+      project: null,
+      workspace: { path: path22.resolve(opts.workspacePath), dir, projects },
+      filter,
+      totals: {
+        entries: projects.reduce((sum, project) => sum + project.entries, 0),
+        items: items.length,
+        byState,
+        byStatus,
+        spendByUnit: spend
+      },
+      styles,
+      items
+    },
+    media
+  };
+}
+
+// src/gallery/page.ts
+function renderGallery(snapshot, opts = {}) {
+  const data = JSON.stringify(snapshot).replace(/<\//g, "<\\/").replace(/<!--/g, "<\\u0021--");
+  const session = JSON.stringify(opts.session ?? null);
+  const editable = JSON.stringify(Boolean(opts.editable && opts.session));
+  const generation = JSON.stringify(Boolean(opts.generation && opts.session));
+  const title = `pixelkiln \u2014 ${snapshot.project?.name ?? "workspace"}`;
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml2(title)}</title>
+<link rel="icon" href="data:,">
+<style>
+  :root {
+    --bg: #17150f; --panel: #201d17; --panel-deep: #100f0c;
+    --line: rgba(243,234,214,.16); --line-strong: rgba(243,234,214,.3);
+    --text: #f3ead6; --dim: #9b9384; --accent: #ff6b35; --accent-soft: #ff9c5f;
+    --ok: #b9f27c; --warn: #ff9c5f; --bad: #ff7a6b; --cool: #8fc7ff;
+    --content: 1520px; --drawer: 540px;
+    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+    --checker:
+      linear-gradient(45deg,#0000 25%,#7f7f7f22 25%,#7f7f7f22 75%,#0000 75%),
+      linear-gradient(45deg,#0000 25%,#7f7f7f22 25%,#7f7f7f22 75%,#0000 75%);
+  }
+  * { box-sizing: border-box; }
+  html { color-scheme: dark; }
+  body { margin:0; background:var(--bg); color:var(--text);
+    font:14px/1.5 ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif; }
+  button, input, select { font:inherit; color:inherit; }
+  button { border-radius:0; padding:6px 11px; border:1px solid var(--line);
+    background:transparent; cursor:pointer; }
+  button:hover { border-color:var(--line-strong); }
+  button.primary { background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600; }
+  button:disabled { opacity:.45; cursor:not-allowed; }
+  :focus-visible { outline:2px solid var(--accent-soft); outline-offset:2px; }
+  a { color:var(--accent-soft); }
+  code, .mono { font-family:var(--mono); }
+
+  header { position:sticky; top:0; z-index:10; background:var(--panel);
+    border-bottom:1px solid var(--line-strong); }
+  .bar { width:min(100%,var(--content)); margin:0 auto; padding:13px 22px 0;
+    display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
+  h1 { font:700 14px/1 var(--mono); margin:0; letter-spacing:-.02em; white-space:nowrap; }
+  h1::before { content:'\u25C6'; color:var(--accent); margin-right:9px; font-size:11px; }
+  .project { color:var(--dim); font-size:12.5px; min-width:0; overflow:hidden;
+    text-overflow:ellipsis; white-space:nowrap; }
+  .project b { color:var(--text); font-weight:600; }
+  .grow { flex:1 1 auto; }
+  .search { display:flex; align-items:center; gap:8px; border:1px solid var(--line);
+    background:var(--panel-deep); padding:0 10px; min-width:min(320px, 100%); }
+  .search input { flex:1; border:0; background:transparent; padding:7px 0; min-width:0; }
+  .search input:focus { outline:none; }
+  .search kbd { color:var(--dim); border:1px solid var(--line); border-bottom-width:2px;
+    padding:0 5px; font-size:11px; font-family:var(--mono); }
+  select { background:var(--panel-deep); border:1px solid var(--line); padding:6px 8px; border-radius:0; }
+  .totals { width:min(100%,var(--content)); margin:0 auto; padding:9px 22px 0;
+    display:flex; gap:14px; flex-wrap:wrap; align-items:baseline;
+    color:var(--dim); font-size:12.5px; font-variant-numeric:tabular-nums; }
+  .totals b { color:var(--text); font-weight:600; }
+  .chips { width:min(100%,var(--content)); margin:0 auto; padding:9px 22px 13px;
+    display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
+  .chips .sep { width:1px; height:18px; background:var(--line); margin:0 4px; }
+  .chip { padding:3px 9px; font-size:12px; border:1px solid var(--line); color:var(--dim);
+    display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
+  .chip.on { color:var(--text); border-color:var(--line-strong); background:var(--panel-deep); }
+  .chip .n { color:var(--dim); }
+  .dot { width:7px; height:7px; display:inline-block; background:var(--dim); flex:none; }
+  .dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); }
+  .dot.bad { background:var(--bad); } .dot.cool { background:var(--cool); }
+  .state-ok { color:var(--ok); } .state-warn { color:var(--warn); }
+  .state-bad { color:var(--bad); } .state-cool { color:var(--cool); } .state-dim { color:var(--dim); }
+
+  main { width:min(100%,var(--content)); margin:0 auto; border-inline:1px solid var(--line);
+    min-height:60vh; }
+  .style { border-bottom:1px solid var(--line); padding:20px 22px 24px; }
+  .project { border-bottom:1px solid var(--line-strong); background:var(--panel); padding:14px 22px; }
+  .phead { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
+  .phead h2 { margin:0; font:700 15px/1.2 var(--mono); }
+  .phead h2::before { content:'\u25C6'; color:var(--accent); margin-right:8px; font-size:10px; }
+  .phead .meta { color:var(--dim); font-size:12.5px; display:flex; gap:12px; flex-wrap:wrap; }
+  .sid.project { color:var(--dim); border-color:var(--line-strong); }
+  .shead { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
+  .shead h2 { margin:0; font:650 15px/1.2 var(--mono); }
+  .shead .meta { color:var(--dim); font-size:12.5px; display:flex; gap:12px; flex-wrap:wrap;
+    align-items:center; }
+  .swatches { display:inline-flex; gap:2px; vertical-align:middle; }
+  .swatches i { width:12px; height:12px; display:block; border:1px solid var(--line); }
+  .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:10px; }
+  .card { border:1px solid var(--line); background:var(--panel); text-align:left; padding:0;
+    display:flex; flex-direction:column; cursor:pointer; min-width:0;
+    content-visibility:auto; contain-intrinsic-size:auto 176px auto 196px; }
+  .card:hover { border-color:var(--line-strong); }
+  .card.active { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
+  .card.ghost { border-style:dashed; background:transparent; }
+  .cell { height:132px; display:grid; place-items:center; background:var(--panel-deep);
+    background-image:var(--checker); background-size:12px 12px; background-position:0 0,6px 6px;
+    overflow:hidden; position:relative; padding:8px; }
+  .card.ghost .cell { background-image:none; color:var(--dim); font-size:12px; }
+  .cell img { image-rendering:pixelated; display:block; max-width:100%; max-height:100%; }
+  .cell img.fit { width:auto; height:auto; object-fit:contain; }
+  .cell .multi { display:grid; grid-template-columns:1fr 1fr; gap:4px; width:100%; height:100%; }
+  .cell .multi div { display:grid; place-items:center; overflow:hidden; }
+  .badge { position:absolute; right:6px; bottom:6px; background:var(--panel); color:var(--dim);
+    border:1px solid var(--line); font:11px/1 var(--mono); padding:3px 6px; }
+  .cbody { padding:8px 10px 10px; display:flex; flex-direction:column; gap:3px; min-width:0; }
+  .aid { font:600 13px/1.3 var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .cmeta { display:flex; gap:8px; align-items:center; color:var(--dim); font-size:11.5px;
+    font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; }
+  .cmeta .st { display:inline-flex; align-items:center; gap:5px; }
+  .empty { padding:64px 22px; color:var(--dim); text-align:center; }
+  .empty p { margin:0 0 12px; }
+  footer { width:min(100%,var(--content)); margin:0 auto; padding:22px 22px 60px; color:var(--dim);
+    font-size:12.5px; }
+  kbd { border:1px solid var(--line); border-bottom-width:2px; padding:1px 5px; font-size:11px;
+    font-family:var(--mono); }
+
+  .scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:19; }
+  .drawer { position:fixed; top:0; right:0; bottom:0; width:min(var(--drawer), 100vw); z-index:20;
+    background:var(--panel); border-left:1px solid var(--line-strong); overflow-y:auto;
+    display:flex; flex-direction:column; }
+  .dhead { position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line);
+    padding:14px 18px; display:flex; align-items:center; gap:10px; z-index:1; }
+  .dhead .title { flex:1; min-width:0; }
+  .dhead .title .sid { color:var(--accent-soft); font:650 10.5px/1 var(--mono); border:1px solid var(--accent);
+    padding:2px 6px; display:inline-block; margin-bottom:6px; }
+  .dhead .title .aid { font-size:16px; white-space:normal; word-break:break-all; }
+  .dhead button { padding:5px 9px; }
+  .dbody { padding:0 18px 40px; }
+  .preview { margin:16px 0 10px; background:var(--panel-deep); background-image:var(--checker);
+    background-size:12px 12px; background-position:0 0,6px 6px; border:1px solid var(--line);
+    min-height:200px; max-height:60vh; overflow:auto; display:grid; place-items:center; padding:12px; }
+  .preview img { image-rendering:pixelated; display:block; }
+  .preview .none { color:var(--dim); font-size:12.5px; text-align:center; padding:40px 12px; }
+  .zoom { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--dim); }
+  .zoom button { padding:3px 8px; font-size:12px; }
+  .zoom button.on { border-color:var(--accent); color:var(--text); }
+  .zoom .grow { text-align:right; font-variant-numeric:tabular-nums; }
+  .members { display:flex; gap:6px; overflow-x:auto; padding:10px 0 4px; }
+  .members button { flex:none; padding:4px; display:flex; flex-direction:column; align-items:center; gap:3px;
+    background:var(--panel-deep); background-image:var(--checker); background-size:8px 8px;
+    background-position:0 0,4px 4px; }
+  .members button.on { border-color:var(--accent); }
+  .members img { image-rendering:pixelated; display:block; width:40px; height:40px; object-fit:contain; }
+  .members span { font:10.5px/1 var(--mono); color:var(--dim); background:var(--panel); padding:2px 4px; }
+  .status { margin:14px 0 0; padding:10px 12px; border:1px solid var(--line); display:flex; gap:10px;
+    align-items:baseline; font-size:13px; }
+  .status .st { font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
+  .status .why { color:var(--dim); }
+  section.meta { border-top:1px solid var(--line); padding:14px 0 6px; margin-top:14px; }
+  section.meta h3 { margin:0 0 10px; font:650 12.5px/1 var(--mono); color:var(--dim); }
+  dl { margin:0; display:grid; grid-template-columns:minmax(96px, 30%) 1fr; gap:6px 12px; font-size:12.5px; }
+  dt { color:var(--dim); }
+  dd { margin:0; min-width:0; word-break:break-word; }
+  dd.mono { font-family:var(--mono); font-size:12px; }
+  dd .copy { margin-left:6px; padding:0 5px; font:11px/1.4 var(--mono); color:var(--dim); border-color:transparent; }
+  dd .copy:hover { border-color:var(--line); color:var(--text); }
+  .prompt { white-space:pre-wrap; }
+  .out { border:1px solid var(--line); padding:8px 10px; margin-bottom:8px; }
+  .out dl { grid-template-columns:minmax(72px, 24%) 1fr; }
+  .out .role { font:600 12px/1 var(--mono); margin-bottom:6px; display:flex; gap:8px; align-items:center; }
+  .miss { color:var(--bad); }
+  .pal { display:flex; flex-wrap:wrap; gap:3px; }
+  .pal i { width:16px; height:16px; display:block; border:1px solid var(--line); }
+  details { border:1px solid var(--line); padding:0; margin-top:8px; }
+  details summary { cursor:pointer; padding:7px 10px; font:650 12.5px/1 var(--mono); color:var(--dim); }
+  details pre { margin:0; padding:10px; border-top:1px solid var(--line); background:var(--panel-deep);
+    font:11.5px/1.45 var(--mono); overflow:auto; max-height:320px; }
+  .linkish { background:none; border:0; padding:0; color:var(--accent-soft); cursor:pointer;
+    font-family:var(--mono); font-size:12px; text-decoration:underline; }
+  .nav { display:flex; gap:6px; }
+  #note { color:var(--warn); font-size:12.5px; }
+  .editing { color:var(--accent-soft); border:1px solid var(--accent); padding:2px 7px; font:650 10.5px/1.4 var(--mono); }
+  form.edit { border:1px solid var(--accent); padding:12px 14px 14px; margin-top:14px; display:grid; gap:10px; }
+  form.edit h3 { margin:0; font:650 12.5px/1 var(--mono); color:var(--accent-soft); }
+  form.edit .row { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px; }
+  .field { display:grid; gap:4px; font-size:12px; color:var(--dim); min-width:0; }
+  .field span { font-family:var(--mono); font-size:11px; }
+  .field small { font-size:11px; color:var(--dim); }
+  .field input, .field textarea, .field select { background:var(--panel-deep); border:1px solid var(--line);
+    color:var(--text); padding:6px 8px; border-radius:0; font:13px/1.45 inherit; width:100%; min-width:0; }
+  .field textarea { resize:vertical; min-height:64px; font-family:inherit; }
+  .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--accent); }
+  .field.check { display:flex; align-items:center; gap:8px; }
+  .field.check input { width:auto; }
+  form.edit .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
+  form.edit .msg { font-size:12.5px; }
+  form.edit .msg.bad { color:var(--bad); }
+  .notice { margin:14px 0 0; padding:10px 12px; border:1px solid var(--ok); color:var(--ok); font-size:13px; }
+  .shead .tools { margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
+  .shead .tools button { padding:3px 9px; font-size:12px; }
+  .shead .cand { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); }
+  .shead .cand input { width:56px; background:var(--panel-deep); border:1px solid var(--line); color:var(--text);
+    padding:2px 6px; font:12px/1.4 inherit; border-radius:0; }
+  form.edit.style-form { margin:0 0 14px; }
+  form.edit .blast { padding:8px 10px; border:1px solid var(--line); font-size:12.5px; color:var(--dim); }
+  form.edit .blast.hot { border-color:var(--warn); color:var(--text); }
+  form.edit .blast b { color:var(--warn); font-weight:600; }
+  form.edit .pal { margin-top:4px; }
+  .style .notice { margin:0 0 14px; }
+  #jobs { width:min(100%,var(--content)); margin:0 auto; padding:0 22px 12px; display:grid; gap:6px; }
+  #jobs:empty { display:none; }
+  .job { border:1px solid var(--line); background:var(--panel-deep); padding:8px 12px; display:grid;
+    grid-template-columns:auto 1fr auto; gap:6px 14px; align-items:center; font-size:12.5px; }
+  .job .ph { display:inline-flex; align-items:center; gap:6px; font:650 12px/1 var(--mono); white-space:nowrap; }
+  .job .last { color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
+  .job .acts { display:flex; gap:6px; }
+  .job .acts button { padding:3px 9px; font-size:12px; }
+  .job pre { grid-column:1 / -1; margin:0; padding:8px 10px; border-top:1px solid var(--line);
+    font:11.5px/1.45 var(--mono); color:var(--dim); max-height:220px; overflow:auto; white-space:pre-wrap; }
+  .budget { color:var(--dim); }
+  .budget b { color:var(--text); }
+  .dialog { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:rgba(0,0,0,.55); }
+  .dialog form { background:var(--panel); border:1px solid var(--accent); width:min(560px, calc(100vw - 32px));
+    max-height:calc(100vh - 32px); overflow:auto; padding:16px 18px 18px; display:grid; gap:12px; }
+  .dialog h3 { margin:0; font:650 14px/1.2 var(--mono); }
+  .dialog table { width:100%; border-collapse:collapse; font-size:12.5px; }
+  .dialog td, .dialog th { text-align:left; padding:4px 6px; border-bottom:1px solid var(--line); }
+  .dialog th { color:var(--dim); font-weight:500; }
+  .dialog td.n, .dialog th.n { text-align:right; font-variant-numeric:tabular-nums; }
+  .dialog .sum { display:grid; gap:4px; font-size:13px; }
+  .dialog .sum b { font-weight:600; }
+  .dialog .warn { color:var(--warn); font-size:12.5px; }
+  .dialog .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
+  .dialog .msg { font-size:12.5px; color:var(--bad); }
+  .sheet-scrim { position:fixed; inset:0; z-index:24; background:rgba(0,0,0,.5); }
+  .sheet { position:fixed; top:0; right:0; bottom:0; z-index:25; background:var(--bg);
+    border-left:1px solid var(--line-strong); display:grid; grid-template-rows:auto 1fr; min-width:0; }
+  .sheet.review-host { width:min(1180px, 94vw); }
+  .sheet.compare-host { width:min(1500px, 96vw); }
+  .sheet .rbar { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line-strong);
+    background:var(--panel); font-size:13px; flex-wrap:wrap; }
+  .sheet .rbar span { color:var(--dim); }
+  .sheet .rbar .zoom { margin-left:auto; }
+  .sheet iframe { border:0; width:100%; height:100%; background:var(--bg); }
+  @media (prefers-reduced-motion: no-preference) { .sheet { animation: slide .18s ease-out; } }
+  .compare-body { overflow:auto; padding:16px; }
+  .compare-body table { border-collapse:separate; border-spacing:0; min-width:100%; font-size:12.5px; }
+  .compare-body th, .compare-body td { text-align:left; vertical-align:top; padding:6px 10px; border-bottom:1px solid var(--line);
+    min-width:180px; max-width:420px; }
+  .compare-body th:first-child, .compare-body td:first-child { min-width:96px; max-width:120px; color:var(--dim);
+    position:sticky; left:0; background:var(--bg); z-index:1; }
+  .compare-body thead th { position:sticky; top:0; background:var(--bg); z-index:2; border-bottom:1px solid var(--line-strong); }
+  .compare-body .chead { display:grid; gap:4px; }
+  .compare-body .chead .aid { font-size:14px; }
+  .compare-body .chead .badges { display:flex; gap:6px; }
+  .compare-body .chead .badges .sid { display:inline-block; }
+  .compare-body .cimg { background:var(--panel-deep); background-image:var(--checker); background-size:12px 12px;
+    background-position:0 0,6px 6px; border:1px solid var(--line); display:grid; place-items:center; padding:10px;
+    min-height:120px; max-height:56vh; overflow:auto; }
+  .compare-body .cimg img { image-rendering:pixelated; display:block; }
+  .compare-body .cimg .none { color:var(--dim); font-size:12px; }
+  .compare-body td.diff { background:color-mix(in srgb, var(--warn) 9%, transparent); }
+  .compare-body td.mono { font-family:var(--mono); font-size:12px; word-break:break-all; }
+  .compare-body td .prompt { white-space:pre-wrap; }
+  .compare-body td .rm { float:right; padding:1px 6px; font-size:11px; color:var(--dim); border-color:transparent; }
+  .card.compared { outline:2px dashed var(--accent-soft); outline-offset:-2px; }
+  .card .slot { position:absolute; left:6px; top:6px; background:var(--accent); color:var(--bg); font:700 11px/1 var(--mono);
+    padding:3px 6px; }
+  .tray { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:18; background:var(--panel);
+    border:1px solid var(--accent); padding:8px 10px; display:flex; gap:8px; align-items:center; max-width:calc(100vw - 32px);
+    box-shadow:0 10px 30px rgba(0,0,0,.4); }
+  .tray .chipset { display:flex; gap:6px; overflow-x:auto; }
+  .tray .pick { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); padding:3px 4px 3px 6px;
+    font:12px/1.2 var(--mono); white-space:nowrap; }
+  .tray .pick img { width:22px; height:22px; object-fit:contain; image-rendering:pixelated; }
+  .tray .pick button { padding:0 5px; border-color:transparent; color:var(--dim); font-size:12px; }
+  .tray > button { padding:5px 11px; font-size:12.5px; }
+  @media (max-width: 900px) { .sheet.review-host, .sheet.compare-host { width:100vw; } }
+  .drawer .gen { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
+  .drawer .gen button.primary { padding:7px 14px; }
+  @media (max-width: 720px) {
+    .bar, .totals, .chips, .style, footer { padding-inline:14px; }
+    .grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
+    .cell { height:112px; }
+    .drawer { width:100vw; }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .drawer { animation: slide .16s ease-out; }
+    @keyframes slide { from { transform: translateX(16px); opacity:.6; } to { transform:none; opacity:1; } }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="bar">
+    <h1>pixelkiln</h1>
+    <span class="project" id="project"></span>
+    <span class="grow"></span>
+    <label class="search"><input id="q" type="search" placeholder="Search assets, prompts, ids, hashes" autocomplete="off"><kbd>/</kbd></label>
+    <select id="sort" aria-label="Sort">
+      <option value="key">Sort: style / asset</option>
+      <option value="newest">Sort: newest first</option>
+      <option value="oldest">Sort: oldest first</option>
+      <option value="cost">Sort: cost</option>
+      <option value="size">Sort: size</option>
+    </select>
+    <select id="group" aria-label="Group">
+      <option value="style">Group: by style</option>
+      <option value="none">Group: none</option>
+    </select>
+    <span id="editing" class="editing" hidden title="This gallery can write the manifest. It never contacts a provider.">editing</span>
+    <button id="refresh" type="button" title="Re-read the manifest, lockfile, and disk">Refresh</button>
+    <label class="chip" title="Refresh every 5 seconds while this tab is visible"><input id="auto" type="checkbox"> auto</label>
+  </div>
+  <div class="totals" id="totals"></div>
+  <div class="chips" id="chips"></div>
+  <div id="jobs"></div>
+</header>
+<main id="root"></main>
+<footer>
+  Click a sprite for its full record; <kbd>shift</kbd>-click adds it to a side-by-side comparison. <kbd>\u2190</kbd>/<kbd>\u2192</kbd> step through the visible set while a record
+  is open, <kbd>Esc</kbd> closes it, and <kbd>/</kbd> jumps to search. This page reads the manifest, lockfile,
+  and disk only \u2014 it never contacts a provider<span id="foot-edit"> and never writes anything</span><span id="foot-editing" hidden>.
+  Editing is on: saving rewrites the manifest and nothing else</span><span id="foot-gen" hidden>.
+  Generation is on under the session budget shown above; every run is the same submit, poll, and fetch as <code>pixelkiln gen</code></span>.
+  <span id="note"></span>
+</footer>
+<div id="drawer-host"></div>
+<div id="dialog-host"></div>
+<script>
+const INITIAL = ${data};
+const SESSION = ${session};
+const EDITABLE = ${editable};
+const GENERATION = ${generation};
+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 ? '\u2014' : 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 ? '\u2026/' + 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' };
+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; }
+    if (job.phase === 'review' && !ui.settled.has(job.id + ':review')) { ui.settled.add(job.id + ':review'); changed = true; }
+  }
+  if (changed) refresh();
+  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 === '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 ? ' \u2014 ' + 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);
+  }
+}
+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 \u2014 ' + parts.join(' \xB7 ') : '';
+}
+
+// The confirm step: what will be sent, what it is estimated to cost, and what
+// this session may still spend. Mirrors gen's "Spend \u2026 on N asset(s)?" prompt.
+function generateDialog(items, { project = null, force = false, resume = false } = {}) {
+  const host = $('dialog-host');
+  host.textContent = '';
+  const wrap = el('div', 'dialog');
+  const form = el('form');
+  form.append(el('h3', null, resume ? 'Resume ' + items.length + (items.length === 1 ? ' asset' : ' assets')
+    : (force ? 'Regenerate ' : 'Generate ') + items.length + (items.length === 1 ? ' asset' : ' assets')));
+  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 ?? '\u2014'),
+      el('td', 'n', resume ? 'no cost' : fmtCost(item.costUnit, item.estimatedCost ?? 0)));
+    table.append(tr);
+    if (!resume) {
+      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 (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 ? ' \u2014 no session budget for this provider'
+        : ' \xB7 ' + 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) 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', resume ? 'Resume' : '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;
+      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 || e.data.type !== 'pixelkiln:review-applied') return;
+  setTimeout(() => { $('dialog-host').textContent = ''; pollJobs(); refresh(); }, 600);
+});
+
+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');
+  const shown = 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', '\u25B8 ' + shown.length + ' frames'));
+  else if (s >= 1 && s !== 1) cell.append(el('span', 'badge', s + '\xD7'));
+  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 + '\xD7' + 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)));
+  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 + ' \xB7 ' + 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 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 \xB7 ' + 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\u201364 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') + ' \u2014 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;
+}
+
+function generateActions(item) {
+  const row = el('div', 'gen');
+  if (!GENERATION || !item.declared || item.currentSpecHash === null) return row;
+  const cost = item.estimatedCost === null ? '' : ' \xB7 ' + 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 });
+  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 \xB7 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, '\xD7'); 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 + '\xD7');
+    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 ? ' \u2014 ' + i.reason : ''), (i) => i.state],
+    ['provider', (i) => i.provider],
+    ['generator', (i) => i.generator + (i.tileFeature ? ' \xB7 ' + i.tileFeature : '')],
+    ['candidates', (i) => i.candidates ?? '\u2014'],
+    ['size', (i) => i.width + ' \xD7 ' + i.height],
+    ['cost', (i) => i.status ? fmtCost(i.costUnit, i.cost) : (i.estimatedCost !== null ? 'est. ' + fmtCost(i.costUnit, i.estimatedCost) : '\u2014')],
+    ['prompt', (i) => i.prompt, null, 'prompt'],
+    ['submitted', (i) => fmtWhen(i.submittedAt) || '\u2014'],
+    ['downloaded', (i) => fmtWhen(i.downloadedAt) || '\u2014'],
+    ['quality', (i) => i.quality ? i.quality.state + (i.quality.review && i.quality.review.status === 'approved' ? ' by ' + i.quality.review.reviewer : '') : '\u2014'],
+    ['spec hash', (i) => i.recordedSpecHash ? i.recordedSpecHash.slice(0, 16) + '\u2026' : '\u2014', null, 'mono'],
+    ['sha256', (i) => i.outputs[0] && i.outputs[0].sha256 ? i.outputs[0].sha256.slice(0, 16) + '\u2026' : '\u2014', null, 'mono'],
+    ['tags', (i) => (i.tags || []).filter((t) => !/^(pixelkiln|asset|style):/.test(t)).join(', ') || '\u2014'],
+  ];
+  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 });
+}
+
+// ---- 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;
+}
+function blastRadius(style, fields) {
+  const styleIds = new Set([style.id]);
+  for (const field of fields) for (const id of inheritorsOf(style, field)) 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 + ' \u2014 saving sets a value on this style itself; ' + style.extends + ' is unchanged'
+    : 'default \u2014 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 \u2014 leave empty for no forced palette';
+  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 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');
+    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);
+    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]) input.addEventListener('input', 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;
+    save.disabled = true; msg.className = 'msg'; msg.textContent = 'saving\u2026';
+    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: 'Saved. The request for ' + r.assets + (r.assets === 1 ? ' asset' : ' assets') + ' changed' + (r.cost ? ' \u2014 about ' + r.cost + ' to regenerate.' : '.') + ' Nothing is spent until you generate.' };
+      render();
+    } catch (err) {
+      save.disabled = false;
+      msg.className = 'msg bad';
+      msg.textContent = err.message + (err.status === 409 ? ' \u2014 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\u2026';
+    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 ? ' \u2014 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\u2026';
+    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')
+              ? ' \u2014 ' + 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 ? ' \u2014 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 + '\xD7');
+    b.type = 'button';
+    b.onclick = () => { ui.zoom = String(z); renderPreview(item, host); };
+    zoomBar.append(b);
+  }
+  const label = el('span', 'grow', w + '\xD7' + h + (zoom >= 1 ? ' at ' + zoom + '\xD7' : ' 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)) + ' \xB7 ' + w + '\xD7' + h + (zoom >= 1 ? ' at ' + zoom + '\xD7' : '');
+        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, '\u2190'); prev.type = 'button'; prev.title = 'Previous (\u2190)';
+  prev.disabled = pos <= 0; prev.onclick = () => step(-1);
+  const next = el('button', null, '\u2192'); next.type = 'button'; next.title = 'Next (\u2192)';
+  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));
+  if (GENERATION) body.append(generateActions(item));
+  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 \u2014 what was sent and what it cost.
+  {
+    const { s, dl } = section('Generation');
+    row(dl, 'provider', item.provider);
+    row(dl, 'generator', item.generator + (item.tileFeature ? ' \xB7 ' + item.tileFeature : ''));
+    row(dl, 'lock status', item.status || 'none \u2014 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 + ' \xD7 ' + 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 \u2014 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) + '\u2026' : (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);
+  }
+
+  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) + '\u2026', { mono: true, copy: item.revision.sourceSha256 });
+      if (item.revision.maskSha256) row(dl, 'mask sha256', item.revision.maskSha256.slice(0, 16) + '\u2026', { 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 + ' \xB7 ' + fmtWhen(q.review.approvedAt)
+        : 'pending human 1\xD7 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 + '\xD7' + q.nativeGrid.sourceHeight + ' \u2192 ' +
+        q.nativeGrid.nativeWidth + '\xD7' + q.nativeGrid.nativeHeight + ' (step ' + q.nativeGrid.stepX + '\xD7' + q.nativeGrid.stepY +
+        ', ' + q.nativeGrid.confidence + ' confidence)');
+    }
+    if (q.audit) row(dl, 'audit', (q.audit.safe ? 'passed' : 'failed') + ' \xB7 ' + Math.round(q.audit.transparency * 100) + '% transparent' +
+      (q.audit.reasons.length ? ' \xB7 ' + 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) + '\u2026', { 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) + '\u2026'), { mono: true, copy: item.currentSpecHash });
+    }
+    row(dl, 'declared', item.declared ? 'yes' : 'no \u2014 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 \u2014 filters and sort in the query, the open
+// record in the hash \u2014 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 + ' \u2014 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 ($('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 (ui.compare.length >= 2 && !ui.open) openCompare();
+</script>
+</body>
+</html>`;
+}
+var escapeHtml2 = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+
+// src/gallery/server.ts
+import { spawn as spawn2 } from "child_process";
+import { randomBytes } from "crypto";
+import { createServer as createServer2 } from "http";
+import { readFile as readFile19 } from "fs/promises";
+var MAX_EDIT_BYTES = 64 * 1024;
+async function readJsonBody(req) {
+  const chunks = [];
+  let bytes = 0;
+  for await (const chunk2 of req) {
+    bytes += chunk2.length;
+    if (bytes > MAX_EDIT_BYTES) throw Object.assign(new Error("edit request is too large"), { status: 413 });
+    chunks.push(chunk2);
+  }
+  try {
+    return JSON.parse(Buffer.concat(chunks).toString("utf8"));
+  } catch {
+    throw Object.assign(new Error("edit request is not valid JSON"), { status: 400 });
+  }
+}
+async function serveGallery(opts) {
+  const log = opts.onProgress ?? (() => {
+  });
+  const session = opts.edit || opts.generate ? randomBytes(16).toString("hex") : null;
+  let media = /* @__PURE__ */ new Map();
+  let loading = null;
+  const reviewAssets = /* @__PURE__ */ new Map();
+  const load = () => {
+    if (!loading) {
+      loading = opts.load().then((build) => {
+        media = build.media;
+        return build;
+      }).finally(() => {
+        loading = null;
+      });
+    }
+    return loading;
+  };
+  const server = createServer2(async (req, res) => {
+    const url2 = new URL(req.url ?? "/", "http://127.0.0.1");
+    const fail = (status, message6) => {
+      res.writeHead(status, { "Content-Type": "text/plain; charset=utf-8" });
+      res.end(message6);
+    };
+    const json = (status, value) => {
+      res.writeHead(status, {
+        "Content-Type": "application/json; charset=utf-8",
+        "Cache-Control": "no-store",
+        "X-Content-Type-Options": "nosniff"
+      });
+      res.end(JSON.stringify(value));
+    };
+    const guardedBody = async (what) => {
+      const expectedOrigin = req.headers.host ? `http://${req.headers.host}` : null;
+      if (!req.headers.origin || req.headers.origin !== expectedOrigin) {
+        fail(403, `cross-origin ${what} are not allowed`);
+        return void 0;
+      }
+      if (req.headers["x-pixelkiln-session"] !== session) {
+        fail(403, "missing or stale gallery session");
+        return void 0;
+      }
+      if (!req.headers["content-type"]?.toLowerCase().startsWith("application/json")) {
+        fail(415, "application/json is required");
+        return void 0;
+      }
+      return readJsonBody(req);
+    };
+    const reportError = (what, err) => {
+      const status = typeof err?.status === "number" ? err.status : 500;
+      const message6 = err instanceof Error ? err.message : String(err);
+      if (status >= 500) log(`  gallery ${what} failed: ${message6}`);
+      fail(status, message6);
+    };
+    if (req.method === "POST" && url2.pathname === "/api/edit") {
+      if (!opts.edit || !session) return fail(405, "the gallery is read-only; start it with --edit to change the manifest");
+      try {
+        const body = await guardedBody("edits");
+        if (body === void 0) return;
+        const build = await opts.edit(body);
+        media = build.media;
+        json(200, build.snapshot);
+      } catch (err) {
+        reportError("edit", err);
+      }
+      return;
+    }
+    if (req.method === "POST" && url2.pathname === "/api/generate") {
+      if (!opts.generate || !session) return fail(405, "generation is off; start the gallery with --budget to enable it");
+      try {
+        const body = await guardedBody("generation requests");
+        if (body === void 0) return;
+        json(202, await opts.generate.start(body));
+      } catch (err) {
+        reportError("generate", err);
+      }
+      return;
+    }
+    const reviewMatch = /^\/review\/([0-9a-f]{16})(\/.*)?$/.exec(url2.pathname);
+    if (reviewMatch && opts.generate) {
+      const [, jobId, rest = ""] = reviewMatch;
+      if (req.method === "POST" && rest === "/apply") {
+        try {
+          const body = await guardedBody("review submissions");
+          if (body === void 0) return;
+          const result = await opts.generate.applyReview(jobId, body);
+          reviewAssets.delete(jobId);
+          json(200, result);
+        } catch (err) {
+          reportError("review", err);
+        }
+        return;
+      }
+      if (req.method === "GET" && rest === "") {
+        try {
+          const routePrefix = `/review/${jobId}`;
+          const review = await opts.generate.review(jobId, {
+            routePrefix,
+            applyUrl: `${routePrefix}/apply`,
+            applyHeaders: { "X-Pixelkiln-Session": session },
+            embedded: true
+          });
+          if (!review) return fail(404, "nothing is waiting for review on this job");
+          reviewAssets.set(jobId, review.assets);
+          res.writeHead(200, {
+            "Content-Type": "text/html; charset=utf-8",
+            "Cache-Control": "no-store",
+            "X-Content-Type-Options": "nosniff"
+          });
+          res.end(review.html({
+            applyUrl: `${routePrefix}/apply`,
+            applyHeaders: { "X-Pixelkiln-Session": session },
+            embedded: true
+          }));
+        } catch (err) {
+          reportError("review", err);
+        }
+        return;
+      }
+      if (req.method === "GET") {
+        const asset = reviewAssets.get(jobId)?.get(url2.pathname);
+        if (!asset) return fail(404, "no such review asset");
+        try {
+          const bytes = await readFile19(asset.path);
+          res.writeHead(200, {
+            "Content-Type": asset.contentType,
+            "Cache-Control": "no-store",
+            "X-Content-Type-Options": "nosniff"
+          });
+          res.end(bytes);
+        } catch {
+          fail(404, "review asset is unavailable");
+        }
+        return;
+      }
+    }
+    if (req.method !== "GET" && req.method !== "HEAD") return fail(405, "the gallery is read-only");
+    if (url2.pathname === "/api/jobs") {
+      if (!opts.generate) return fail(404, "generation is off");
+      return json(200, opts.generate.status());
+    }
+    try {
+      if (url2.pathname === "/") {
+        const { snapshot } = await load();
+        res.writeHead(200, {
+          "Content-Type": "text/html; charset=utf-8",
+          "Cache-Control": "no-store",
+          "X-Content-Type-Options": "nosniff"
+        });
+        res.end(renderGallery(snapshot, {
+          ...session ? { session } : {},
+          editable: Boolean(opts.edit),
+          generation: Boolean(opts.generate)
+        }));
+        return;
+      }
+      if (url2.pathname === "/api/gallery.json") {
+        const { snapshot } = await load();
+        res.writeHead(200, {
+          "Content-Type": "application/json; charset=utf-8",
+          "Cache-Control": "no-store",
+          "X-Content-Type-Options": "nosniff"
+        });
+        res.end(JSON.stringify(snapshot));
+        return;
+      }
+      const mediaMatch = /^\/media\/([0-9a-f]{24})$/.exec(url2.pathname);
+      if (mediaMatch) {
+        const asset = media.get(mediaMatch[1]);
+        if (!asset) return fail(404, "no such gallery media");
+        let bytes;
+        try {
+          bytes = await readFile19(asset.path);
+        } catch {
+          return fail(404, "gallery media is no longer on disk; refresh the page");
+        }
+        res.writeHead(200, {
+          "Content-Type": asset.contentType,
+          "Content-Length": bytes.length,
+          // The page cache-busts with the recorded hash, so a regenerated file
+          // is never shown stale; `no-cache` keeps a hard reload honest too.
+          "Cache-Control": "no-cache",
+          "X-Content-Type-Options": "nosniff"
+        });
+        res.end(req.method === "HEAD" ? void 0 : bytes);
+        return;
+      }
+      fail(404, "not found");
+    } catch (err) {
+      const message6 = err instanceof Error ? err.message : String(err);
+      log(`  gallery request failed: ${message6}`);
+      fail(500, message6);
+    }
+  });
+  const url = await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(opts.port ?? 0, "127.0.0.1", () => {
+      const address = server.address();
+      const port = typeof address === "object" && address ? address.port : opts.port;
+      resolve(`http://127.0.0.1:${port}/`);
+    });
+  });
+  opts.onReady?.(url);
+  if (opts.open !== false && process.platform === "darwin") {
+    spawn2("open", [url], { stdio: "ignore", detached: true }).unref();
+  }
   return {
-    name,
-    provider: "pixellab",
-    styles: {
-      [styleId]: {
-        generator,
-        size: commonSize,
-        // Matches the schema default: a scaffolded style is for sprites, and
-        // a sprite wants its background stripped.
-        noBackground: true,
-        promptPrefix: "",
-        promptSuffix: "",
-        styleImages: [],
-        palette: [],
-        outDir,
-        tags: [name],
-        providerOptions: {}
+    url,
+    session,
+    close: () => new Promise((resolve, reject) => {
+      server.closeAllConnections?.();
+      server.close((err) => err ? reject(err) : resolve());
+    })
+  };
+}
+
+// src/gallery/generate.ts
+import { randomBytes as randomBytes2 } from "crypto";
+import { z as z8 } from "zod";
+var GenerateRequestSchema = z8.object({
+  project: z8.string().min(1).optional(),
+  keys: z8.array(z8.string().min(1)).min(1).max(500),
+  /** Regenerate work that is up to date, as `gen --force` does. */
+  force: z8.boolean().optional(),
+  /** Advance in-flight, review, or selected work without submitting anything. */
+  resume: z8.boolean().optional()
+}).strict();
+var GenerateRequestError = class extends Error {
+  constructor(message6, status = 400) {
+    super(message6);
+    this.status = status;
+    this.name = "GenerateRequestError";
+  }
+  status;
+};
+function message5(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function remainingFor(group, groupCount, budget, spent) {
+  const keyed = budget.byProvider[group.provider];
+  if (keyed === void 0 && groupCount > 1 && budget.amount !== void 0) {
+    throw new GenerateRequestError(
+      "This run spans several providers; start the gallery with a keyed budget for each, for example --budget pixellab=40 --budget retrodiffusion=1.25."
+    );
+  }
+  const ceiling = keyed ?? (groupCount === 1 ? budget.amount : void 0);
+  if (ceiling === void 0) {
+    throw new GenerateRequestError(
+      `No session budget for ${group.provider}; start the gallery with --budget ${group.provider}=<amount>.`
+    );
+  }
+  return Math.max(0, ceiling - (spent[group.provider] ?? 0));
+}
+function createGenerateHandlers(opts) {
+  const log = opts.onProgress ?? (() => {
+  });
+  const now = opts.now ?? (() => /* @__PURE__ */ new Date());
+  const jobs = /* @__PURE__ */ new Map();
+  const spent = {};
+  const units = {};
+  const contexts = /* @__PURE__ */ new Map();
+  const reviews = /* @__PURE__ */ new Map();
+  const busyKeys = () => {
+    const busy = /* @__PURE__ */ new Map();
+    for (const job of jobs.values()) {
+      if (job.phase === "done" || job.phase === "failed") continue;
+      for (const key of job.keys) busy.set(`${job.project ?? ""}:${key}`, job.id);
+    }
+    return busy;
+  };
+  const say = (job, line) => {
+    job.messages.push(line);
+    if (job.messages.length > 400) job.messages.splice(0, job.messages.length - 400);
+    log(`  [${job.id.slice(0, 6)}] ${line.trim()}`);
+  };
+  const groupByRecordedProvider = (specs, lock) => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const spec of specs) {
+      const entry = lock.entries[lockKey(spec.styleId, spec.assetId)];
+      const providerId = entry?.provider ?? spec.provider;
+      groups.set(providerId, [...groups.get(providerId) ?? [], spec]);
+    }
+    return groups;
+  };
+  async function settle(job, ctx, specs) {
+    job.phase = "polling";
+    for (const [providerId, providerSpecs] of groupByRecordedProvider(specs, ctx.lock)) {
+      const provider = opts.providerFor(job.project ?? void 0, providerId);
+      const res = await poll(provider, ctx.lock, ctx.lockPath, {
+        onProgress: (line) => say(job, line),
+        specs: providerSpecs,
+        intervalMs: opts.pollIntervalMs
+      });
+      say(job, `${providerId}: ${res.completed} completed, ${res.review} awaiting review, ${res.failed} failed, ${res.stillRunning} still running`);
+    }
+    job.review = specs.map((spec) => lockKey(spec.styleId, spec.assetId)).filter((key) => ctx.lock.entries[key]?.status === "review");
+    job.phase = "fetching";
+    for (const [providerId, providerSpecs] of groupByRecordedProvider(specs, ctx.lock)) {
+      const provider = opts.providerFor(job.project ?? void 0, providerId);
+      const res = await fetchAssets(provider, providerSpecs, ctx.lock, ctx.lockPath, {
+        onProgress: (line) => say(job, line)
+      });
+      job.counts.downloaded += res.downloaded;
+      if (res.downloaded || res.failed) {
+        say(job, `${providerId}: downloaded ${res.downloaded}, skipped ${res.skipped}, failed ${res.failed}`);
+      }
+    }
+    if (job.review.length) {
+      job.phase = "review";
+      say(job, `${job.review.length} asset(s) awaiting selection`);
+    } else {
+      job.phase = "done";
+      job.finishedAt = now().toISOString();
+    }
+  }
+  async function run(job, ctx, specs, groups) {
+    try {
+      if (job.mode === "generate") {
+        job.phase = "submitting";
+        for (const group of groups) {
+          const provider = opts.providerFor(job.project ?? void 0, group.provider);
+          const ceiling = remainingFor(group, groups.length, opts.budget, spent);
+          if (provider.balance) {
+            const balance = await provider.balance();
+            say(job, `balance: ${formatCost(balance.unit, balance.remaining)} remaining (${group.provider})`);
+            if (balance.unit !== group.costUnit) {
+              throw new Error(
+                `Provider ${group.provider} estimate unit ${group.costUnit} does not match balance unit ${balance.unit}.`
+              );
+            }
+            if (balance.unit !== "free" && group.cost > balance.remaining) {
+              throw new Error(
+                `${group.provider} needs ${formatCost(balance.unit, group.cost)} but only ${formatCost(balance.unit, balance.remaining)} remain.`
+              );
+            }
+          }
+          const res = await submit(provider, ctx.loaded, group.actionable, ctx.lock, ctx.lockPath, {
+            budget: ceiling,
+            onProgress: (line) => say(job, line),
+            spacingMs: opts.submitSpacingMs
+          });
+          spent[group.provider] = (spent[group.provider] ?? 0) + res.spent;
+          units[group.provider] = res.unit;
+          job.spent[group.provider] = (job.spent[group.provider] ?? 0) + res.spent;
+          job.counts.submitted += res.submitted;
+          job.counts.failed += res.failed;
+          say(job, `${group.provider}: submitted ${res.submitted}, failed ${res.failed}, estimated ${formatCost(res.unit, res.spent)}`);
+        }
+      }
+      await settle(job, ctx, specs);
+    } catch (error) {
+      job.phase = "failed";
+      job.error = message5(error);
+      job.finishedAt = now().toISOString();
+      say(job, `failed: ${job.error}`);
+    }
+  }
+  return {
+    async start(body) {
+      const parsed = GenerateRequestSchema.safeParse(body);
+      if (!parsed.success) {
+        throw new GenerateRequestError(
+          "invalid request: " + parsed.error.issues.slice(0, 3).map((issue) => `${issue.path.join(".")}: ${issue.message}`).join("; ")
+        );
       }
+      const request = parsed.data;
+      const ctx = await opts.loadProject(request.project);
+      const byKey = new Map(ctx.specs.map((spec) => [lockKey(spec.styleId, spec.assetId), spec]));
+      const specs = [];
+      for (const key of request.keys) {
+        const spec = byKey.get(key);
+        if (!spec) throw new GenerateRequestError(`"${key}" is not declared by the manifest`);
+        specs.push(spec);
+      }
+      const busy = busyKeys();
+      for (const key of request.keys) {
+        const holder = busy.get(`${request.project ?? ""}:${key}`);
+        if (holder) throw new GenerateRequestError(`"${key}" is already being worked on by job ${holder}`, 409);
+      }
+      let groups = [];
+      if (!request.resume) {
+        const plan = await buildPlan(specs, ctx.lock, { force: request.force });
+        if (!plan.actionable.length) {
+          const reasons = plan.items.map((item) => `${item.key}: ${item.state} \u2014 ${item.reason}`).slice(0, 5);
+          throw new GenerateRequestError(`nothing to generate; ${reasons.join("; ")}`);
+        }
+        groups = plan.groups;
+        for (const group of groups) {
+          const remaining = remainingFor(group, groups.length, opts.budget, spent);
+          if (group.cost > remaining) {
+            throw new GenerateRequestError(
+              `${group.provider} would spend ${formatCost(group.costUnit, group.cost)} but only ${formatCost(group.costUnit, remaining)} of this session's budget remain.`
+            );
+          }
+        }
+      }
+      const job = {
+        id: randomBytes2(8).toString("hex"),
+        project: request.project ?? null,
+        keys: request.keys,
+        mode: request.resume ? "resume" : "generate",
+        phase: "queued",
+        startedAt: now().toISOString(),
+        finishedAt: null,
+        messages: [],
+        error: null,
+        spent: {},
+        review: [],
+        counts: { submitted: 0, failed: 0, downloaded: 0 }
+      };
+      jobs.set(job.id, job);
+      contexts.set(job.id, ctx);
+      say(job, request.resume ? `resuming ${request.keys.length} asset(s) at no cost` : `generating ${groups.reduce((n, g) => n + g.actionable.length, 0)} asset(s): ` + groups.map((g) => `${g.provider} ${formatCost(g.costUnit, g.cost)}`).join("; "));
+      void run(job, ctx, specs, groups);
+      return job;
     },
-    assets
+    status() {
+      return {
+        jobs: [...jobs.values()].sort((a, b) => b.startedAt.localeCompare(a.startedAt)),
+        budget: opts.budget,
+        spent,
+        units
+      };
+    },
+    async review(jobId, options) {
+      const job = jobs.get(jobId);
+      const ctx = contexts.get(jobId);
+      if (!job || !ctx || job.phase !== "review" || !job.review.length) return null;
+      const specs = ctx.specs.filter((spec) => job.review.includes(lockKey(spec.styleId, spec.assetId)));
+      const providers = [...groupByRecordedProvider(specs, ctx.lock).keys()];
+      const providerId = providers[0];
+      if (!providerId) return null;
+      const session = await prepareReview(opts.providerFor(job.project ?? void 0, providerId), ctx.lock, {
+        keys: job.review,
+        specs,
+        onProgress: (line) => say(job, line),
+        routePrefix: options.routePrefix
+      });
+      if (session) reviews.set(jobId, session);
+      return session;
+    },
+    async applyReview(jobId, body) {
+      const job = jobs.get(jobId);
+      const ctx = contexts.get(jobId);
+      const session = reviews.get(jobId);
+      if (!job || !ctx || !session) throw new GenerateRequestError("no review is open for this job", 404);
+      const result = await session.apply(body, ctx.lockPath);
+      say(job, `selected ${result.selected}, left in review ${result.skipped}`);
+      reviews.delete(jobId);
+      const specs = ctx.specs.filter((spec) => job.review.includes(lockKey(spec.styleId, spec.assetId)));
+      void settle(job, ctx, specs).catch((error) => {
+        job.phase = "failed";
+        job.error = message5(error);
+        job.finishedAt = now().toISOString();
+        say(job, `failed: ${job.error}`);
+      });
+      return result;
+    }
   };
 }
-function mode(values) {
-  const counts = /* @__PURE__ */ new Map();
-  for (const v of values) counts.set(v, (counts.get(v) ?? 0) + 1);
-  return [...counts.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] ?? 64;
-}
 
 // src/pipeline/salvage.ts
-import { readFile as readFile15 } from "fs/promises";
-import { existsSync as existsSync16 } from "fs";
-import path20 from "path";
+import { readFile as readFile20 } from "fs/promises";
+import { existsSync as existsSync19 } from "fs";
+import path23 from "path";
 function providerClaimId(provider, objectId) {
   return `${encodeURIComponent(provider)}:${encodeURIComponent(objectId)}`;
 }
 async function loadClaims(lockPaths, opts = {}) {
   const claimed = /* @__PURE__ */ new Set();
   for (const p of lockPaths) {
-    if (!existsSync16(p)) throw new Error(`Claim lockfile not found: ${p}`);
+    if (!existsSync19(p)) throw new Error(`Claim lockfile not found: ${p}`);
     let parsed;
     try {
-      parsed = parseLock(JSON.parse(await readFile15(p, "utf8")));
+      parsed = parseLock(JSON.parse(await readFile20(p, "utf8")));
     } catch {
       throw new Error(`Claim lockfile is malformed: ${p}`);
     }
@@ -8972,20 +12108,20 @@ function matchOrphanStyle(prompt, manifest) {
   return matchStyleByPattern(prompt, manifest);
 }
 async function loadSiblingManifests(ownManifestPath, workspaceManifestPaths, claimPaths) {
-  const own = path20.resolve(ownManifestPath);
+  const own = path23.resolve(ownManifestPath);
   const siblingManifestPaths = [
     .../* @__PURE__ */ new Set([
       ...workspaceManifestPaths,
-      ...claimPaths.map((c) => path20.join(path20.dirname(path20.resolve(c)), "pixelkiln.manifest.json"))
+      ...claimPaths.map((c) => path23.join(path23.dirname(path23.resolve(c)), "pixelkiln.manifest.json"))
     ])
   ];
   const siblings = [];
   for (const siblingManifestPath of siblingManifestPaths) {
-    if (path20.resolve(siblingManifestPath) === own) continue;
-    if (!existsSync16(siblingManifestPath)) continue;
+    if (path23.resolve(siblingManifestPath) === own) continue;
+    if (!existsSync19(siblingManifestPath)) continue;
     try {
       const { manifest } = await loadManifest(siblingManifestPath);
-      siblings.push({ label: path20.basename(path20.dirname(siblingManifestPath)), manifest });
+      siblings.push({ label: path23.basename(path23.dirname(siblingManifestPath)), manifest });
     } catch {
     }
   }
@@ -9101,16 +12237,16 @@ async function applyTags(provider, decisions, existing, opts = {}) {
 }
 
 // src/pick/salvage-server.ts
-import { mkdir as mkdir5, writeFile as writeFile7, readFile as readFile16 } from "fs/promises";
-import path21 from "path";
+import { mkdir as mkdir6, writeFile as writeFile9, readFile as readFile21 } from "fs/promises";
+import path24 from "path";
 
 // src/pick/salvage-sheet.ts
-var escapeHtml2 = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+var escapeHtml3 = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 function renderSalvageSheet(orphans, ctx) {
-  const safe = orphans.map((o) => ({ ...o, prompt: escapeHtml2(o.prompt) }));
+  const safe = orphans.map((o) => ({ ...o, prompt: escapeHtml3(o.prompt) }));
   const data = JSON.stringify(safe).replace(/<\//g, "<\\/");
-  const styleId = ctx ? escapeHtml2(ctx.styleId) : null;
-  const importDir = ctx ? escapeHtml2(ctx.importDir) : null;
+  const styleId = ctx ? escapeHtml3(ctx.styleId) : null;
+  const importDir = ctx ? escapeHtml3(ctx.importDir) : null;
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -9267,7 +12403,7 @@ async function runSalvage(provider, orphans, ctx, opts = {}) {
   });
   const html = renderSalvageSheet(orphans, {
     styleId: ctx.styleId,
-    importDir: path21.relative(process.cwd(), ctx.importDir) || "."
+    importDir: path24.relative(process.cwd(), ctx.importDir) || "."
   });
   const byId = new Map(orphans.map((o) => [o.id, o]));
   const existingTags = new Map(orphans.map((o) => [o.id, o.tags]));
@@ -9296,10 +12432,10 @@ async function runSalvage(provider, orphans, ctx, opts = {}) {
             if (!buf.subarray(0, 8).equals(PNG_SIGNATURE2)) throw new Error("not a PNG");
             decodePng(buf);
             const assetId = idFromPrompt(orphan.prompt, taken);
-            const rel = path21.join("_salvaged", `${assetId}.png`);
-            const outFile = path21.resolve(ctx.importDir, rel);
-            await mkdir5(path21.dirname(outFile), { recursive: true });
-            await writeFile7(outFile, buf);
+            const rel = path24.join("_salvaged", `${assetId}.png`);
+            const outFile = path24.resolve(ctx.importDir, rel);
+            await mkdir6(path24.dirname(outFile), { recursive: true });
+            await writeFile9(outFile, buf);
             ctx.manifest.assets[assetId] = {
               prompt: orphan.prompt,
               promptByStyle: {},
@@ -9330,7 +12466,7 @@ async function runSalvage(provider, orphans, ctx, opts = {}) {
               sourceUrl: durableSource,
               sourceUrls: durableSource ? [{ url: durableSource }] : [],
               outputs: [{
-                path: portableOutputPath(outFile, path21.dirname(ctx.manifestPath)),
+                path: portableOutputPath(outFile, path24.dirname(ctx.manifestPath)),
                 sha256: sha256(buf)
               }],
               submittedAt: orphan.createdAt,
@@ -9354,148 +12490,15 @@ async function runSalvage(provider, orphans, ctx, opts = {}) {
         }
       }
       await applyTags(provider, decisions, existingTags, { onProgress: log });
-      const raw = JSON.parse(await readFile16(ctx.manifestPath, "utf8"));
+      const raw = JSON.parse(await readFile21(ctx.manifestPath, "utf8"));
       for (const id of importedAssetIds) raw.assets[id] = ctx.manifest.assets[id];
-      await writeFile7(ctx.manifestPath, JSON.stringify(raw, null, 2) + "\n");
+      await writeFile9(ctx.manifestPath, JSON.stringify(raw, null, 2) + "\n");
       await saveLock(ctx.lockPath, ctx.lock);
       return result;
     }
   });
 }
 
-// src/workspace.ts
-import { mkdir as mkdir6, readFile as readFile17, rename as rename5, rm as rm7, writeFile as writeFile8 } from "fs/promises";
-import { existsSync as existsSync17 } from "fs";
-import path22 from "path";
-import { z as z6 } from "zod";
-var WorkspaceProjectSchema = z6.object({
-  id: z6.string().min(1),
-  /** Manifest path, relative to the catalog file's own directory. */
-  manifest: z6.string().min(1),
-  /** Lockfile path, relative to the catalog file's own directory. */
-  lock: z6.string().min(1),
-  provider: z6.string().min(1).default("pixellab"),
-  /** Free-form label for a shared account, e.g. distinguishing sandboxes. */
-  account: z6.string().optional()
-}).strict();
-var WorkspaceSchema = z6.object({
-  version: z6.literal(1),
-  projects: z6.array(WorkspaceProjectSchema).default([])
-}).strict();
-function parseWorkspace(raw) {
-  const parsed = WorkspaceSchema.safeParse(raw);
-  if (parsed.success) return parsed.data;
-  throw new Error(
-    `Workspace catalog is not valid v1:
-${parsed.error.issues.slice(0, 5).map((i) => `  ${i.path.join(".")}: ${i.message}`).join("\n")}`
-  );
-}
-async function loadWorkspace(workspacePath) {
-  if (!existsSync17(workspacePath)) return { version: 1, projects: [] };
-  let raw;
-  try {
-    raw = JSON.parse(await readFile17(workspacePath, "utf8"));
-  } catch (err) {
-    throw new Error(
-      `Workspace catalog at ${workspacePath} is malformed:
-${err instanceof Error ? err.message : String(err)}`
-    );
-  }
-  return parseWorkspace(raw);
-}
-async function saveWorkspace(workspacePath, ws) {
-  const sorted = {
-    version: 1,
-    projects: [...ws.projects].sort((a, b) => a.id.localeCompare(b.id))
-  };
-  await mkdir6(path22.dirname(path22.resolve(workspacePath)), { recursive: true });
-  const tmp = `${workspacePath}.${process.pid}.${Math.random().toString(36).slice(2)}.tmp`;
-  try {
-    await writeFile8(tmp, JSON.stringify(sorted, null, 2) + "\n");
-    await rename5(tmp, workspacePath);
-  } finally {
-    await rm7(tmp, { force: true });
-  }
-}
-function toPortablePath(dir, absolute) {
-  return path22.relative(dir, absolute).split(path22.sep).join("/");
-}
-function resolveProject(dir, project) {
-  return {
-    manifestPath: path22.resolve(dir, project.manifest.split("/").join(path22.sep)),
-    lockPath: path22.resolve(dir, project.lock.split("/").join(path22.sep))
-  };
-}
-function validateWorkspace(ws, dir) {
-  const diagnostics = [];
-  const idCounts = /* @__PURE__ */ new Map();
-  const lockOwners = /* @__PURE__ */ new Map();
-  const manifestOwners = /* @__PURE__ */ new Map();
-  for (const project of ws.projects) {
-    idCounts.set(project.id, (idCounts.get(project.id) ?? 0) + 1);
-    const { manifestPath, lockPath } = resolveProject(dir, project);
-    lockOwners.set(lockPath, [...lockOwners.get(lockPath) ?? [], project.id]);
-    manifestOwners.set(manifestPath, [...manifestOwners.get(manifestPath) ?? [], project.id]);
-    if (path22.isAbsolute(project.manifest) || path22.isAbsolute(project.lock)) {
-      diagnostics.push({
-        id: "absolute-path",
-        level: "warning",
-        message: `project "${project.id}" stores an absolute path \u2014 the catalog will not resolve correctly if this tree is cloned or moved elsewhere`
-      });
-    }
-    if (!existsSync17(manifestPath)) {
-      diagnostics.push({
-        id: "missing-manifest",
-        level: "error",
-        message: `project "${project.id}" manifest not found: ${manifestPath}`
-      });
-    }
-    if (!existsSync17(lockPath)) {
-      diagnostics.push({
-        id: "missing-lock",
-        level: "error",
-        message: `project "${project.id}" lockfile not found: ${lockPath}`
-      });
-    }
-  }
-  for (const [id, count] of idCounts) {
-    if (count > 1) {
-      diagnostics.push({
-        id: "duplicate-id",
-        level: "error",
-        message: `project id "${id}" is registered ${count} times`
-      });
-    }
-  }
-  for (const [lockPath, ids] of lockOwners) {
-    if (ids.length > 1) {
-      diagnostics.push({
-        id: "duplicate-lock",
-        level: "error",
-        message: `${ids.join(", ")} all register the same lockfile: ${lockPath}`
-      });
-    }
-  }
-  for (const [manifestPath, ids] of manifestOwners) {
-    if (ids.length > 1) {
-      diagnostics.push({
-        id: "duplicate-manifest",
-        level: "warning",
-        message: `${ids.join(", ")} share manifest ${manifestPath} \u2014 expected only when they are variant lockfiles beside one manifest`
-      });
-    }
-  }
-  const providers = new Set(ws.projects.map((p) => p.provider));
-  if (providers.size > 1) {
-    diagnostics.push({
-      id: "mixed-provider",
-      level: "warning",
-      message: `registered projects use different providers: ${[...providers].sort().join(", ")} \u2014 spend totals are kept separate per unit, but confirm this is intentional`
-    });
-  }
-  return diagnostics;
-}
-
 // src/pipeline/workspace.ts
 async function workspaceClaims(ws, dir) {
   const lockPaths = [];
@@ -9605,6 +12608,8 @@ export {
   DEFAULT_RATE_LIMIT,
   FAKE_PNG,
   FakeProvider,
+  GenerateRequestError,
+  GenerateRequestSchema,
   GeneratorSchema,
   GridConfidenceSchema,
   ImageQualityMetricsSchema,
@@ -9613,6 +12618,9 @@ export {
   LockSchema,
   MAX_DOWNLOAD_BYTES,
   MAX_RETRIES,
+  ManifestDriftError,
+  ManifestEditError,
+  ManifestEditSchema,
   ManifestInputSchema,
   ManifestSchema,
   MediaType,
@@ -9635,13 +12643,16 @@ export {
   WorkspaceProjectSchema,
   WorkspaceSchema,
   adopt,
+  applyManifestEdit,
   applyTags,
   approveQualityRecord,
   auditStyle,
   availableProviders,
   backoffMs,
+  buildGallerySnapshot,
   buildManifest,
   buildPlan,
+  buildWorkspaceGallerySnapshot,
   bundledRecipeRoot,
   cacheFileName,
   candidateCount,
@@ -9651,6 +12662,8 @@ export {
   colorDistance,
   countNumberedDescriptions,
   createArtifactBundleManifest,
+  createGalleryEditHandler,
+  createGenerateHandlers,
   createProvider,
   currentEntryOutputPath,
   currentOutputPath,
@@ -9663,6 +12676,8 @@ export {
   fetchAssets,
   findOrphans,
   formatCost,
+  galleryMediaId,
+  galleryMediaRoute,
   generationCost,
   groupOrphansByStyle,
   hex,
@@ -9702,6 +12717,7 @@ export {
   pngSize,
   poll,
   portableOutputPath,
+  prepareReview,
   primaryOutput,
   providerCredentialEnvs,
   providerFactory,
@@ -9717,6 +12733,7 @@ export {
   refineQualityProfiles,
   registerProvider,
   remove,
+  renderGallery,
   renderSalvageSheet,
   renderSheet,
   requireApprovedQualitySources,
@@ -9745,6 +12762,7 @@ export {
   saveWorkspace,
   scanAssets,
   selectEntryOutput,
+  serveGallery,
   sha256,
   sha256File,
   shouldPersistSourceUrl,