backdraw 0.0.0-stage → 2.1.0

package/extension/setup.js

@@ -0,0 +1,57 @@
+// The popup's setup checklist and status texts, worked out from the worker's popup:status answer.
+// No chrome.* calls here, so the tests can load it too.
+(() => {
+  const STEP_TITLES = { bridge: 'stepBridge', chatgpt: 'stepChatgpt', project: 'stepProject', ready: 'stepReady' };
+  // The steps of a running job (background.js ctx.progress) and their texts in i18n.js.
+  const JOB_STEPS = {
+    starting: 'jobStarting', opening: 'jobOpening', attaching: 'jobAttaching', typing: 'jobTyping', sending: 'jobSending',
+    generating: 'jobGenerating', reattaching: 'jobReattaching', verifying: 'jobVerifying', downloading: 'jobDownloading',
+    needs_human: 'jobNeedsHuman', resuming: 'jobResuming',
+  };
+
+  // s: the popup:status answer (null when the worker did not answer); acknowledged: the user pressed
+  // Done on the last step once. A step is 'done', 'todo' (the user has something to do) or 'wait'
+  // (it can't be told yet, or an earlier step comes first). The checklist is shown until it was
+  // finished once, and again whenever a step needs the user.
+  function setupSteps(s, acknowledged) {
+    const connected = !!(s && s.connected);
+    const chat = (s && s.chatgpt) || {};
+    const bridge = connected ? 'done' : 'todo';
+    const chatgpt = chat.challenge ? 'todo' : chat.loggedIn === true ? 'done' : chat.loggedIn === false ? 'todo' : 'wait';
+    const project = s && s.project ? 'done' : connected ? 'todo' : 'wait';
+    const ready = [bridge, chatgpt, project].every(x => x === 'done') ? (acknowledged ? 'done' : 'todo') : 'wait';
+    const steps = [{ id: 'bridge', state: bridge }, { id: 'chatgpt', state: chatgpt }, { id: 'project', state: project }, { id: 'ready', state: ready }];
+    return { steps, wizard: !acknowledged || steps.some(x => x.state === 'todo'), done: steps.filter(x => x.state === 'done').length };
+  }
+
+  // A ChatGPT project page (or a chat inside a project) in the active tab can be picked directly.
+  function projectFromTab(tab) {
+    const m = /^https:\/\/chatgpt\.com\/g\/(g-p-[0-9a-f]+)(-[^/?#]*)?(\/project)?/i.exec((tab && tab.url) || '');
+    if (!m) return null;
+    const fromTitle = m[3] ? String(tab.title || '').replace(/\s*[-|–]\s*ChatGPT\s*$/i, '').replace(/^ChatGPT\s*[-|–]\s*/i, '').trim() : '';
+    return { url: `https://chatgpt.com/g/${m[1]}${m[2] || ''}/project`, name: fromTitle || (m[2] || '').slice(1) || m[1] };
+  }
+
+  // A project's link may carry its name (…/g/g-p-abc-images/project) or not (one picked from the list).
+  const projectId = url => ((/\/g\/(g-p-[0-9a-f]+)/i.exec(String(url || '')) || [])[1] || '').toLowerCase();
+  const sameProject = (a, b) => !!(a && b && projectId(a.url)) && projectId(a.url) === projectId(b.url);
+
+  // The running job in the popup's language; ChatGPT's own progress (a percentage) is kept.
+  function jobText(current, t) {
+    if (!current) return t('idle');
+    const key = JOB_STEPS[current.step];
+    const text = key ? t(key) : current.message || current.step || '';
+    const pct = (/(\d{1,3})%/.exec(current.message || '') || [])[1];
+    return pct ? t('jobPercent', { step: text, pct }) : text;
+  }
+
+  // The ChatGPT row of the status list.
+  function chatgptText(chat, t) {
+    const c = chat || {};
+    return c.challenge ? t('verification') : c.loggedIn === true ? t('signedIn') : c.loggedIn === false ? t('signedOut') : t('notChecked');
+  }
+
+  const api = { STEP_TITLES, JOB_STEPS, setupSteps, projectFromTab, sameProject, jobText, chatgptText };
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  else globalThis.backdrawSetup = api;
+})();

package/extension/sidepanel.css

@@ -0,0 +1,113 @@
+/* The popup's palette. A stored theme (data-theme on <html>) wins over the system setting. */
+:root {
+  color-scheme: light;
+  --bg: #ffffff; --fg: #1d1d1f; --muted: #6e6e73; --line: #e5e5ea; --card: #ffffff; --soft: #f5f5f7;
+  --ok: #1a7f37; --bad: #c62828; --warn: #9a5b00; --accent: #7c3aed; --accent-fg: #ffffff; --accent-soft: rgba(124, 58, 237, .1);
+  --shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --bg: #1c1c1e; --fg: #f2f2f7; --muted: #a1a1a6; --line: #38383a; --card: #242426; --soft: #2c2c2e;
+    --ok: #3fb950; --bad: #ff6b6b; --warn: #f0b429; --accent-soft: rgba(167, 139, 250, .16); --shadow: none;
+  }
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #1c1c1e; --fg: #f2f2f7; --muted: #a1a1a6; --line: #38383a; --card: #242426; --soft: #2c2c2e;
+  --ok: #3fb950; --bad: #ff6b6b; --warn: #f0b429; --accent-soft: rgba(167, 139, 250, .16); --shadow: none;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 0; background: var(--bg); color: var(--fg); font: 13px/1.45 "Segoe UI", system-ui, sans-serif; }
+[hidden] { display: none !important; }
+button { font: inherit; color: inherit; }
+
+.top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
+  border-bottom: 1px solid var(--line); background: var(--bg); }
+.top img { width: 20px; height: 20px; }
+.top h1 { flex: 1; margin: 0; font-size: 14px; font-weight: 600; }
+.top h1 span { color: var(--muted); font-weight: 400; }
+
+.icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line);
+  border-radius: 7px; background: transparent; cursor: pointer; }
+.icon-btn:hover:not(:disabled) { background: var(--soft); }
+.icon-btn:disabled { opacity: .4; cursor: default; }
+.icon-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
+.icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
+button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+.now { position: relative; display: flex; align-items: center; gap: 10px; margin: 12px 14px 4px; padding: 10px 12px;
+  border: 1px solid var(--line); border-radius: 10px; background: var(--soft); overflow: hidden; }
+.now .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+.now-text { min-width: 0; }
+#nowTitle { font-weight: 600; overflow-wrap: anywhere; }
+#nowMeta { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+#nowMeta:empty { display: none; }
+.now.offline .dot { background: var(--bad); }
+.now.offline #nowTitle { color: var(--bad); }
+.now.human { border-color: var(--warn); }
+.now.human .dot { background: var(--warn); }
+.now.running .dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
+.now.running::after { content: ""; position: absolute; left: 0; bottom: 0; width: 35%; height: 2px; background: var(--accent);
+  animation: slide 1.8s ease-in-out infinite; }
+@keyframes pulse { 50% { opacity: .35; } }
+@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
+
+main { padding: 6px 14px 18px; }
+.head { display: flex; align-items: baseline; gap: 8px; }
+.head h2 { margin: 8px 0; font-size: 13px; }
+#count { color: var(--muted); font-size: 12px; }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
+
+.card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
+  background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
+.card.open { grid-column: 1 / -1; }
+.thumb { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 260px; background: var(--soft); overflow: hidden; }
+/* Out of the flow, so the box clamped by max-height is what the image is fitted into. */
+.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
+.thumb .ph { padding: 6px; color: var(--muted); font-size: 11px; text-align: center; }
+.thumb.loading { background: linear-gradient(100deg, var(--soft) 30%, var(--line) 50%, var(--soft) 70%) 0 0 / 300% 100%;
+  animation: shimmer 1.4s linear infinite; }
+@keyframes shimmer { to { background-position: -150% 0; } }
+.card.missing .thumb img { opacity: .45; filter: grayscale(1); }
+.body { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
+.prompt { margin: 0; min-height: 2.7em; font-size: 12.5px; line-height: 1.35; overflow: hidden; overflow-wrap: anywhere;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.prompt.none { color: var(--muted); font-style: italic; }
+.meta { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.pill { padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; }
+.actions { display: flex; gap: 4px; }
+.actions .icon-btn { flex: 1 1 0; width: auto; min-width: 0; max-width: 40px; }
+.note { margin: 0; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
+.note:empty { display: none; }
+.note.ok { color: var(--ok); }
+.note.bad { color: var(--bad); font-weight: 600; }
+.note.warn { color: var(--warn); }
+
+.adder { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--line); }
+.adder .col { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 8px; border: 1px solid var(--line);
+  border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
+.adder .col:hover:not(:disabled) { border-color: var(--accent); }
+.adder .col:disabled { opacity: .5; cursor: default; }
+.adder .col span:first-child { overflow-wrap: anywhere; }
+.adder .col span + span { flex: none; color: var(--muted); }
+.adder .col.new { color: var(--accent); font-weight: 600; }
+.adder .list { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; }
+.adder form { display: flex; flex-wrap: wrap; gap: 4px; }
+.adder input { flex: 1 1 140px; min-width: 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--fg); font: inherit; }
+.btn { padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; }
+.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); font-weight: 600; }
+.btn:disabled { opacity: .5; cursor: default; }
+
+.msg { margin: 14px 0 0; color: var(--muted); text-align: center; }
+.msg:empty { display: none; }
+.msg.bad { color: var(--bad); font-weight: 600; }
+.more { display: block; margin: 14px auto 0; padding: 7px 18px; border: 1px solid var(--line); border-radius: 999px;
+  background: var(--card); font-weight: 600; cursor: pointer; }
+.more:hover:not(:disabled) { border-color: var(--accent); }
+.more:disabled { opacity: .5; cursor: default; }
+
+@media (prefers-reduced-motion: reduce) {
+  .now.running .dot, .now.running::after, .thumb.loading { animation: none; }
+}

package/extension/sidepanel.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Backdraw</title>
+  <link rel="stylesheet" href="sidepanel.css">
+</head>
+<body>
+  <header class="top">
+    <img src="icons/icon32.png" alt="">
+    <h1>Backdraw <span data-i18n="galleryTitle">Gallery</span></h1>
+    <button id="refresh" type="button" class="icon-btn" data-i18n-title="refresh" title="Refresh"></button>
+  </header>
+  <section id="now" class="now loading" aria-live="polite">
+    <span class="dot" aria-hidden="true"></span>
+    <div class="now-text">
+      <div id="nowTitle">…</div>
+      <div id="nowMeta"></div>
+    </div>
+  </section>
+  <main>
+    <div class="head"><h2 data-i18n="galleryTitle">Gallery</h2><span id="count"></span></div>
+    <div id="grid" class="grid"></div>
+    <p id="msg" class="msg" role="status"></p>
+    <button id="more" type="button" class="more" data-i18n="loadMore" hidden>Load more</button>
+  </main>
+  <script src="i18n.js"></script>
+  <script src="sidepanel.js"></script>
+</body>
+</html>

package/extension/sidepanel.js

@@ -0,0 +1,433 @@
+// Gallery side panel: the job in progress (asked from the service worker every 2 s while the panel is
+// visible) and the images Backdraw saved, newest first. An image is named by its job id and number
+// only; the host finds the file in its own records, so no path ever goes from here to the host.
+const $ = id => document.getElementById(id);
+const PAGE = 12;
+const MAX_LIST = 100; // lib/gallery.js PAGE_MAX
+const POLL_MS = 2000;
+const THUMB_PX = 256; // like the thumbnail of a right-click add (collections.js)
+const CHAT = /^https:\/\/chatgpt\.com\//i;
+const STEPS = {
+  queued: 'stepQueued', starting: 'stepStarting', opening: 'stepOpening', attaching: 'stepAttaching', typing: 'stepTyping',
+  sending: 'stepSending', generating: 'stepGenerating', verifying: 'stepVerifying', downloading: 'stepDownloading',
+  reattaching: 'stepReattaching', needs_human: 'stepNeedsHuman', resuming: 'stepResuming',
+};
+const ICONS = {
+  chat: '<path d="M14 4h6v6M20 4l-9 9"/><path d="M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4"/>',
+  folder: '<path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 16.5z"/>',
+  copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>',
+  add: '<path d="M12 5v14M5 12h14"/>',
+  refresh: '<path d="M20 11a8 8 0 1 0-2.3 5.7"/><path d="M20 4v7h-7"/>',
+};
+
+let language = i18n.lang();
+const t = (key, vars) => i18n.translate(language, key, vars);
+const imageCount = n => t(n === 1 ? 'imageCountOne' : 'imageCount', { count: n });
+const keyOf = it => `${it.jobId}:${it.n}`;
+
+let status; // the worker's last answer to panel:status; undefined before the first one
+let polling = false;
+let lastJobId = null;
+let loaded = false;
+let items = []; // the gallery entries shown, as the host listed them
+let total = 0;
+let nextOffset = null;
+let generation = 0; // a newer listing makes the answers to older ones stale
+const thumbs = new Map(); // key -> promise of a blob: URL (null: no preview)
+
+async function hostCall(method, params = {}) {
+  const r = await chrome.runtime.sendMessage({ type: 'panel:call', method, params }).catch(e => ({ ok: false, error: e.message }));
+  if (!r || !r.ok) throw new Error((r && r.error) || t('errNotConnected'));
+  return r.result;
+}
+
+function el(tag, props = {}, ...children) {
+  const e = Object.assign(document.createElement(tag), props);
+  e.append(...children);
+  return e;
+}
+
+function icon(name) {
+  const tpl = document.createElement('template');
+  tpl.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${ICONS[name]}</svg>`; // constant markup only
+  return tpl.content.firstChild;
+}
+
+function iconButton(name, label, onclick) {
+  const b = el('button', { type: 'button', className: 'icon-btn', title: label, onclick }, icon(name));
+  b.setAttribute('aria-label', label);
+  return b;
+}
+
+function showMessage(text, bad) {
+  $('msg').textContent = text || '';
+  $('msg').className = bad ? 'msg bad' : 'msg';
+}
+
+// ---------------------------------------------------------------- settings (theme, language)
+
+// The popup stores them when the user picks them: theme 'auto' | 'light' | 'dark', language 'auto' | 'en' | 'tr'.
+function applySettings(s) {
+  const root = document.documentElement;
+  if (s.theme === 'light' || s.theme === 'dark') root.dataset.theme = s.theme;
+  else delete root.dataset.theme;
+  language = typeof s.language === 'string' && Object.hasOwn(i18n.STRINGS, s.language) ? s.language : i18n.lang();
+  root.lang = language;
+  for (const e of document.querySelectorAll('[data-i18n]')) e.textContent = t(e.dataset.i18n);
+  for (const e of document.querySelectorAll('[data-i18n-title]')) {
+    e.title = t(e.dataset.i18nTitle);
+    e.setAttribute('aria-label', e.title);
+  }
+}
+
+async function loadSettings() {
+  let s = {};
+  try { s = (await chrome.storage.local.get(['theme', 'language'])) || {}; } catch {}
+  applySettings(s);
+}
+
+chrome.storage.onChanged.addListener((changes, area) => {
+  if (area !== 'local' || !(changes.theme || changes.language)) return;
+  loadSettings().then(() => {
+    renderNow();
+    if (loaded) renderGallery();
+  });
+});
+
+// ---------------------------------------------------------------- the job in progress
+
+function clock(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  const p = n => String(n).padStart(2, '0');
+  return s >= 3600 ? `${Math.floor(s / 3600)}:${p(Math.floor(s / 60) % 60)}:${p(s % 60)}` : `${Math.floor(s / 60)}:${p(s % 60)}`;
+}
+
+function renderNow() {
+  const job = status && status.current;
+  const state = status === undefined ? 'loading' : !status || !status.connected ? 'offline'
+    : !job ? 'idle' : job.step === 'needs_human' ? 'human' : 'running';
+  let title = '…';
+  let meta = '';
+  if (state === 'offline') {
+    title = t('notConnected');
+    meta = t('noHost', { error: status && status.lastError ? ` (${status.lastError})` : '' });
+  } else if (state === 'idle') {
+    title = t('idle');
+  } else if (job) {
+    const pct = (String(job.message || '').match(/\((\d{1,3})%\)/) || [])[1];
+    title = `${STEPS[job.step] ? t(STEPS[job.step]) : job.message || job.step}${pct ? ` · ${pct}%` : ''}`;
+    meta = [job.id, job.startedAt ? t('elapsed', { time: clock(Date.now() - job.startedAt) }) : ''].filter(Boolean).join(' · ');
+  }
+  $('now').className = `now ${state}`;
+  $('nowTitle').textContent = title;
+  $('nowTitle').title = (job && job.message) || '';
+  $('nowMeta').textContent = meta;
+}
+
+// Returns whether it started a new listing.
+async function poll() {
+  if (document.hidden || polling) return false;
+  polling = true;
+  let s = null;
+  try { s = await chrome.runtime.sendMessage({ type: 'panel:status' }); } catch {}
+  polling = false;
+  const wasConnected = !!(status && status.connected);
+  status = s && typeof s === 'object' ? s : null;
+  renderNow();
+  const id = status && status.current ? status.current.id : null;
+  const ended = lastJobId !== null && id !== lastJobId;
+  lastJobId = id;
+  // A job that just ended may have saved images; a bridge that just connected can list them now.
+  if (status && status.connected && (ended || !wasConnected)) {
+    refresh();
+    return true;
+  }
+  if (!loaded && !(status && status.connected)) showMessage(t('errNotConnected'), true);
+  return false;
+}
+
+// ---------------------------------------------------------------- the gallery
+
+function formatDate(iso) {
+  const d = new Date(iso || '');
+  if (Number.isNaN(d.getTime())) return '';
+  const ui = chrome.i18n.getUILanguage();
+  try {
+    return d.toLocaleString(ui.toLowerCase().startsWith(language) ? ui : language, { dateStyle: 'medium', timeStyle: 'short' });
+  } catch {
+    return d.toLocaleString();
+  }
+}
+
+const listSig = list => list.map(it => `${keyOf(it)}${it.missing ? '!' : ''}`).join();
+
+async function refresh() {
+  const gen = ++generation;
+  $('refresh').disabled = true;
+  try {
+    // As many as are shown, which "Load more" can take past one listing's MAX_LIST: page by page.
+    const want = Math.max(PAGE, items.length);
+    let list = [];
+    let page = { next: 0 };
+    while (page.next !== null && list.length < want) {
+      page = await hostCall('gallery_list', { offset: page.next, limit: Math.min(MAX_LIST, want - list.length) });
+      if (gen !== generation) return;
+      const seen = new Set(list.map(keyOf)); // a job that finished in between shifts the offsets
+      list = list.concat(page.items.filter(it => !seen.has(keyOf(it))));
+    }
+    const changed = !loaded || listSig(list) !== listSig(items);
+    items = list;
+    total = page.total;
+    nextOffset = page.next;
+    loaded = true;
+    // An unchanged list keeps its cards (and an open "Add to collection").
+    if (changed) renderGallery(); else renderFooter();
+  } catch (e) {
+    if (gen === generation) showMessage(e.message, true);
+  } finally {
+    if (gen === generation) $('refresh').disabled = false;
+  }
+}
+
+async function loadMore() {
+  const gen = generation;
+  $('more').disabled = true;
+  try {
+    const page = await hostCall('gallery_list', { offset: nextOffset, limit: PAGE });
+    if (gen !== generation) return;
+    const seen = new Set(items.map(keyOf)); // a job that finished meanwhile shifts the offsets
+    const fresh = page.items.filter(it => !seen.has(keyOf(it)));
+    items = items.concat(fresh);
+    total = page.total;
+    nextOffset = page.next;
+    $('grid').append(...fresh.map(card));
+    renderFooter();
+  } catch (e) {
+    showMessage(e.message, true);
+  } finally {
+    $('more').disabled = false;
+  }
+}
+
+function renderGallery() {
+  $('grid').replaceChildren(...items.map(card));
+  renderFooter();
+}
+
+function renderFooter() {
+  $('count').textContent = total ? imageCount(total) : '';
+  $('more').hidden = nextOffset === null;
+  showMessage(total ? '' : t('galleryEmpty'));
+}
+
+function card(it) {
+  const box = el('article', { className: it.missing ? 'card missing' : 'card' });
+  const pic = el('div', { className: 'thumb', title: String(it.path || '').split(/[\\/]/).pop() });
+  if (it.width > 0 && it.height > 0) pic.style.aspectRatio = String(Math.min(2, Math.max(0.5, it.width / it.height)));
+  showThumb(it, pic);
+  const note = el('p', { className: 'note' });
+  const say = (text, kind) => {
+    note.textContent = text || '';
+    note.className = kind ? `note ${kind}` : 'note';
+  };
+  const meta = el('div', { className: 'meta' }, el('time', { dateTime: it.createdAt || '', textContent: formatDate(it.createdAt) }));
+  if (it.width && it.height) meta.append(el('span', { textContent: `${it.width}×${it.height}` }));
+  if (it.aspect) meta.append(el('span', { className: 'pill', textContent: it.aspect }));
+
+  const hasChat = CHAT.test(it.conversationUrl || '');
+  const chat = iconButton('chat', t(hasChat ? 'openChat' : 'noChatLink'), () => chrome.tabs.create({ url: it.conversationUrl }));
+  chat.disabled = !hasChat;
+  const reveal = iconButton('folder', t('showInFolder'), async () => {
+    reveal.disabled = true;
+    try {
+      await hostCall('reveal_image', { jobId: it.jobId, n: it.n });
+      say('');
+    } catch (e) {
+      say(e.message, 'bad');
+    }
+    reveal.disabled = false;
+  });
+  const copy = iconButton('copy', t('copyPath'), async () => {
+    if (await copyText(it.path)) say(t('pathCopied'), 'ok');
+    else say(t('copyFailed'), 'bad');
+  });
+  const adder = el('div', { className: 'adder', hidden: true });
+  const toggle = () => {
+    const open = adder.hidden;
+    adder.hidden = !open;
+    box.classList.toggle('open', open);
+    add.classList.toggle('on', open);
+    if (open) fillAdder(it, adder, say, () => pic.querySelector('img'), () => { if (!adder.hidden) toggle(); });
+  };
+  const add = iconButton('add', t('addToCollection'), toggle);
+  if (it.missing) {
+    reveal.disabled = add.disabled = true;
+    say(t('fileMissing'), 'warn');
+  }
+  const prompt = el('p', { className: it.prompt ? 'prompt' : 'prompt none', textContent: it.prompt || t('galleryFetched'), title: it.prompt || '' });
+  box.append(pic, el('div', { className: 'body' }, prompt, meta, el('div', { className: 'actions' }, chat, reveal, copy, add), adder, note));
+  return box;
+}
+
+// ---------------------------------------------------------------- thumbnails
+
+let thumbsBusy = 0;
+const thumbsWaiting = [];
+
+// At most two previews on their way at a time (each can be over half a megabyte).
+function limited(fn) {
+  return new Promise(resolve => {
+    const go = () => {
+      thumbsBusy++;
+      fn().then(resolve, () => resolve(undefined)).finally(() => {
+        thumbsBusy--;
+        if (thumbsWaiting.length) thumbsWaiting.shift()();
+      });
+    };
+    if (thumbsBusy < 2) go(); else thumbsWaiting.push(go);
+  });
+}
+
+function b64Blob(b64, type) {
+  const bin = atob(b64);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return new Blob([bytes], { type });
+}
+
+// null: the image has no preview (any more). A preview that could not be asked for (undefined) is
+// asked for again with the next listing.
+function previewOf(it) {
+  if (!it.preview) return Promise.resolve(null);
+  const key = keyOf(it);
+  if (!thumbs.has(key)) {
+    const p = limited(async () => {
+      const r = await hostCall('gallery_thumb', { jobId: it.jobId, n: it.n });
+      return r && r.data ? URL.createObjectURL(b64Blob(r.data, r.mime || 'image/jpeg')) : null;
+    });
+    thumbs.set(key, p);
+    p.then(url => { if (url === undefined) thumbs.delete(key); });
+  }
+  return thumbs.get(key);
+}
+
+function showThumb(it, pic) {
+  pic.classList.add('loading');
+  previewOf(it).then(url => {
+    pic.classList.remove('loading');
+    pic.replaceChildren(url ? el('img', { src: url, alt: '', decoding: 'async' }) : el('span', { className: 'ph', textContent: t('noThumb') }));
+  });
+}
+
+// The card's preview as an image: the one shown, or the same preview once it has arrived (they load
+// two at a time, so Add can come first).
+async function previewImage(it, shown) {
+  if (shown && shown.naturalWidth) return shown;
+  const url = await previewOf(it);
+  if (!url) return null;
+  const img = new Image();
+  img.src = url;
+  return img.decode().then(() => img, () => null);
+}
+
+// A small JPEG of the preview, as a right-click add makes one; the host checks it like those.
+function smallJpeg(img) {
+  if (!img || !img.naturalWidth) return undefined;
+  const scale = Math.min(1, THUMB_PX / Math.max(img.naturalWidth, img.naturalHeight));
+  const canvas = el('canvas', { width: Math.max(1, Math.round(img.naturalWidth * scale)), height: Math.max(1, Math.round(img.naturalHeight * scale)) });
+  try {
+    canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL('image/jpeg', 0.8).split(',')[1];
+  } catch {
+    return undefined;
+  }
+}
+
+// ---------------------------------------------------------------- actions
+
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {}
+  const area = el('textarea', { value: text });
+  area.style.cssText = 'position:fixed;top:-200px;opacity:0';
+  document.body.append(area);
+  area.select();
+  try { return document.execCommand('copy'); } catch { return false; } finally { area.remove(); }
+}
+
+// The collections, and "New collection…", which asks for the name in place. The host copies the image
+// file itself; only the job id and number go to it.
+async function fillAdder(it, box, say, picture, close) {
+  box.replaceChildren(el('p', { className: 'note', textContent: t('loading') }));
+  let list;
+  try {
+    list = await hostCall('list_collections', { summary: true });
+  } catch (e) {
+    box.replaceChildren();
+    say(e.message, 'bad');
+    return;
+  }
+  const controls = on => { for (const c of box.querySelectorAll('button, input')) c.disabled = !on; };
+  const addTo = async (name, create) => {
+    controls(false);
+    say(t('saving'));
+    try {
+      const thumb = smallJpeg(await previewImage(it, picture()));
+      const r = await hostCall('collection_add_job_image', { collection: name, create, jobId: it.jobId, n: it.n, thumb });
+      say(t(r.duplicate ? 'toastDuplicate' : 'toastAdded', { name: r.name, images: imageCount(r.count) }), 'ok');
+      close();
+    } catch (e) {
+      controls(true);
+      say(e.message, 'bad');
+    }
+  };
+  const fresh = el('button', { type: 'button', className: 'col new', textContent: t('newCollectionItem') });
+  fresh.onclick = () => {
+    const form = nameForm(list, say, name => addTo(name, true), close);
+    fresh.replaceWith(form);
+    form.querySelector('input').focus();
+  };
+  const rows = list.map(c => el('button', { type: 'button', className: 'col', onclick: () => addTo(c.name, false) },
+    el('span', { textContent: c.name }), el('span', { textContent: imageCount(c.count) })));
+  box.replaceChildren(...(rows.length ? [el('div', { className: 'list' }, ...rows)] : []), fresh);
+  say('');
+}
+
+function nameForm(list, say, submit, close) {
+  const input = el('input', { placeholder: t('namePlaceholder'), autocomplete: 'off', spellcheck: false });
+  input.setAttribute('aria-label', t('nameLabel'));
+  const form = el('form', {}, input, el('button', { type: 'submit', className: 'btn primary', textContent: t('add') }),
+    el('button', { type: 'button', className: 'btn', textContent: t('cancel'), onclick: close }));
+  const tidy = () => input.value.replace(/\s+/g, ' ').trim();
+  input.oninput = () => {
+    const wanted = tidy().toLowerCase();
+    say(wanted && list.some(c => c.name.toLowerCase() === wanted) ? t('nameExists') : '');
+  };
+  input.onkeydown = e => { if (e.key === 'Escape') close(); };
+  form.onsubmit = e => {
+    e.preventDefault();
+    const name = tidy();
+    if (!name || Array.from(name).length > 64) say(t('nameInvalid'), 'bad');
+    else submit(name);
+  };
+  return form;
+}
+
+// ---------------------------------------------------------------- start
+
+$('refresh').append(icon('refresh'));
+$('refresh').onclick = () => refresh();
+$('more').onclick = loadMore;
+document.addEventListener('visibilitychange', () => {
+  if (!document.hidden) poll().then(started => { if (!started && loaded) refresh(); });
+});
+setInterval(poll, POLL_MS);
+setInterval(() => { if (!document.hidden && status && status.current) renderNow(); }, 1000);
+showMessage(t('loading'));
+loadSettings().then(() => {
+  showMessage(t('loading'));
+  renderNow();
+  poll();
+});

package/extension/theme.css

@@ -0,0 +1,22 @@
+/* Colours of the extension's pages. data-theme on <html> is the user's choice (settings.js):
+   "light", "dark", or "auto", which follows the system. Dark is the brand look. */
+:root {
+  color-scheme: light;
+  --bg: #ffffff; --surface: #f6f5fa; --fg: #1c1a24; --muted: #6b6878; --line: #e6e3ef; --field: #ffffff;
+  --accent: #7c3aed; --accent-hover: #6d28d9; --accent-fg: #ffffff; --accent-soft: #efe8fd; --link: #6d28d9;
+  --ok: #1a7f37; --bad: #c62828; --warn: #a15c00;
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #0e0d12; --surface: #17151f; --fg: #f2f0f7; --muted: #a29eb2; --line: #2a2736; --field: #17151f;
+  --accent: #7c3aed; --accent-hover: #8b5cf6; --accent-fg: #ffffff; --accent-soft: rgba(124, 58, 237, .2); --link: #a78bfa;
+  --ok: #3fb950; --bad: #ff6b6b; --warn: #e3a33b;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --bg: #0e0d12; --surface: #17151f; --fg: #f2f0f7; --muted: #a29eb2; --line: #2a2736; --field: #17151f;
+    --accent: #7c3aed; --accent-hover: #8b5cf6; --accent-fg: #ffffff; --accent-soft: rgba(124, 58, 237, .2); --link: #a78bfa;
+    --ok: #3fb950; --bad: #ff6b6b; --warn: #e3a33b;
+  }
+}