feat: the extension adds Discord channels to an artist you pick, and its tests gate the XPI (milestone 429)

Server (#4420)
- extension_service gains a Discord pattern (server or channel, jump links,
  ptb/canary; not DMs or threads), mirrored in platforms.js and pinned by
  the shared artist-url-samples.json.
- probe on a Discord URL matches the source by ids under any artist, reports
  a whole-server source as covering the channel, suggests the artist who owns
  another source on the same server, and names server/channel via the stored
  token (best-effort, bounded, no rate-limit waits).
- quick-add takes artist_id / artist_name; Discord URLs are stored canonical.

Extension (#4421, #4422)
- Content script on discord.com; SPA navigation by URL polling (the old
  pushState patch ran in the isolated world and never fired); stale probes
  are dropped.
- Discord chip opens an Add panel: this channel or the whole server, and the
  suggested artist / a search / a new name.
- Popup: sources show artist, platform and state; a Discord token export is
  verified by FC and the result shown. Token capture covers ptb/canary.
- Pure logic in lib/chip.js and lib/popup-format.js, with specs.

CI (#4423)
- extension.yml's lane (web-ext lint, vitest, XPI contents) moves into
  build.yml as extension-test and joins the needs of sign-extension,
  build-web and build-agent. As a separate workflow it gated nothing: a red
  extension suite still signed and shipped the XPI (rule 177).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LVjrnpQjRgHdvq95rASoiR

extension/background/background.js

@@ -128,7 +128,8 @@ browser.webRequest.onBeforeSendHeaders.addListener(
       saveDiscordToken(auth.value);
     }
   },
-  { urls: ['https://discord.com/api/*'] },
+  // ptb/canary are Discord's beta clients; their API calls carry the same token.
+  { urls: ['https://discord.com/api/*', 'https://*.discord.com/api/*'] },
   ['requestHeaders'],
 );
 
@@ -213,7 +214,17 @@ browser.runtime.onMessage.addListener(async (msg) => {
         if (key === 'discord') {
           if (!discordToken) return { error: 'Open discord.com to capture a token first.' };
           await api.uploadCredentials('discord', 'token', discordToken);
-          return { success: true };
+          // Then have FC try it against a Discord source, so a token Discord
+          // has already revoked shows up here rather than at the next check.
+          // A failed verify never undoes the upload: valid=null means FC could
+          // not test (no Discord source yet), not that the token is bad.
+          let verify = null;
+          try {
+            verify = await api.verifyCredential('discord');
+          } catch (e) {
+            verify = { valid: null, reason: e.message };
+          }
+          return { success: true, verify };
         }
         return { error: 'Unsupported platform.' };
       } catch (e) {
@@ -256,7 +267,17 @@ browser.runtime.onMessage.addListener(async (msg) => {
 
     case 'ADD_AS_SOURCE':
       try {
-        return await api.quickAddSource(msg.url);
+        return await api.quickAddSource(msg.url, {
+          artistId: msg.artistId ?? null,
+          artistName: msg.artistName ?? null,
+        });
+      } catch (e) {
+        return { error: e.message };
+      }
+
+    case 'SEARCH_ARTISTS':
+      try {
+        return { artists: await api.searchArtists(msg.q || '') };
       } catch (e) {
         return { error: e.message };
       }

extension/content/content-script.css

@@ -40,3 +40,45 @@
   from { transform: translateY(20px); opacity: 0; }
   to   { transform: translateY(0); opacity: 1; }
 }
+
+/* Discord Add panel — sits above the chip. Same slate/parchment palette. */
+.fc-panel {
+  all: revert;
+  position: fixed; bottom: 76px; right: 24px; z-index: 2147483647;
+  box-sizing: border-box; width: 320px; max-width: calc(100vw - 48px);
+  padding: 14px 16px; border-radius: 10px;
+  background: rgb(20, 23, 26); color: rgb(232, 228, 216);
+  border: 1px solid rgb(60, 64, 70);
+  font: 14px/1.4 system-ui, sans-serif;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
+}
+.fc-panel__title { font-weight: 600; color: rgb(244, 186, 122); }
+.fc-panel__sub { color: rgb(170, 166, 156); font-size: 12px; margin-bottom: 8px; }
+.fc-panel__label {
+  margin: 10px 0 4px; font-size: 11px; letter-spacing: 0.06em;
+  text-transform: uppercase; color: rgb(170, 166, 156);
+}
+.fc-panel__radio { display: flex; gap: 8px; align-items: center; padding: 2px 0; cursor: pointer; }
+.fc-panel__radio input { margin: 0; accent-color: rgb(244, 186, 122); }
+.fc-panel__input {
+  all: revert; box-sizing: border-box; width: 100%;
+  padding: 7px 9px; border-radius: 6px;
+  border: 1px solid rgb(70, 74, 80); background: rgb(12, 14, 16); color: inherit;
+  font: inherit;
+}
+.fc-panel__input:focus { outline: 2px solid rgb(244, 186, 122); outline-offset: -1px; }
+.fc-panel__results { display: flex; flex-direction: column; max-height: 160px; overflow-y: auto; }
+.fc-panel__result {
+  all: revert; text-align: left; padding: 6px 9px; border: none; border-radius: 4px;
+  background: transparent; color: inherit; font: inherit; cursor: pointer;
+}
+.fc-panel__result:hover, .fc-panel__result:focus { background: rgb(36, 40, 46); }
+.fc-panel__hint { margin-top: 8px; font-size: 12px; color: rgb(170, 166, 156); }
+.fc-panel__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+.fc-panel__btn {
+  all: revert; padding: 6px 14px; border-radius: 999px; cursor: pointer;
+  border: 1px solid rgb(70, 74, 80); background: transparent; color: inherit;
+  font: 500 13px/1.2 system-ui, sans-serif;
+}
+.fc-panel__btn--primary { border-color: rgb(244, 186, 122); background: rgb(244, 186, 122); color: rgb(20, 23, 26); }
+.fc-panel__btn:disabled { opacity: 0.5; cursor: default; }

extension/content/content-script.js

@@ -5,42 +5,61 @@
   // Cached probe result for the current URL so click-handlers know which
   // action to dispatch without round-tripping again.
   let currentProbe = null;
+  // Bumped on every evaluate(): a probe that answers after the operator has
+  // navigated on is for a page they've left, and must not repaint the chip.
+  let generation = 0;
+  let lastUrl = window.location.href;
 
   evaluate();
 
-  const reEval = () => evaluate();
-  window.addEventListener('popstate', reEval);
-  const origPush = history.pushState;
-  history.pushState = function () { origPush.apply(this, arguments); reEval(); };
+  // SPA navigation. Patreon, SubscribeStar and above all Discord change
+  // channel/page without a reload. Patching history.pushState from here never
+  // worked: a content script runs in an isolated world, so the page's own
+  // pushState is not the function we'd replace. Polling the URL is the one
+  // signal that sees every navigation, and costs a string compare.
+  window.addEventListener('popstate', () => onUrlMaybeChanged());
+  setInterval(onUrlMaybeChanged, 500);
+
+  function onUrlMaybeChanged() {
+    if (window.location.href === lastUrl) return;
+    lastUrl = window.location.href;
+    closePanel();
+    evaluate();
+  }
 
   async function evaluate() {
+    const mine = ++generation;
     const url = window.location.href;
     const platform = getPlatformFromUrl(url);
     const onArtist = platform && isArtistPage(url, platform);
-    const btn = document.getElementById('fc-add-source-btn');
     if (!onArtist) {
-      if (btn) btn.remove();
+      removeButton();
       currentProbe = null;
       return;
     }
-    // On artist pages, ask the backend what state the URL is in BEFORE
-    // injecting the button — so the chip can render the right state on
-    // first paint instead of flashing the generic "Add" copy and
-    // updating afterwards.
+    // Ask the backend what state the URL is in BEFORE drawing the button, so
+    // the chip renders the right state on first paint instead of flashing the
+    // generic "Add" copy and updating afterwards.
     let probe;
     try {
       probe = await browser.runtime.sendMessage({ type: 'PROBE_SOURCE', url });
     } catch (e) {
       probe = { error: e?.message || 'probe failed' };
     }
+    if (mine !== generation) return;
     currentProbe = probe;
     if (probe?.state === 'unknown_platform') {
-      if (btn) btn.remove();
+      removeButton();
       return;
     }
     renderButton(probe);
   }
 
+  function removeButton() {
+    document.getElementById('fc-add-source-btn')?.remove();
+    closePanel();
+  }
+
   function renderButton(probe) {
     let btn = document.getElementById('fc-add-source-btn');
     if (!btn) {
@@ -51,79 +70,36 @@
     }
     // Reset state classes so re-renders (SPA navigation) don't stack.
     btn.className = 'fc-add-source-btn';
-    btn.classList.add(`fc-add-source-btn--${stateModifier(probe)}`);
-    btn.textContent = labelFor(probe);
+    btn.classList.add(`fc-add-source-btn--${chipState(probe)}`);
+    btn.textContent = chipLabel(probe, PLATFORMS[probe?.platform]?.name || probe?.platform || '');
     btn.disabled = false;
   }
 
-  function stateModifier(probe) {
-    if (!probe || probe.error) return 'new';
-    return ({
-      source_match: 'source-match',
-      artist_match: 'artist-match',
-      new: 'new',
-    })[probe.state] || 'new';
-  }
-
-  function labelFor(probe) {
-    if (!probe || probe.error) return '+ Add to FabledCurator';
-    const platformName = platformDisplayName(probe.platform);
-    const artistName = probe.artist?.name;
-    switch (probe.state) {
-      case 'source_match':
-        return `✓ In FabledCurator · ${platformName}`;
-      case 'artist_match':
-        return `+ Add ${platformName} source to ${artistName || 'artist'}`;
-      case 'new':
-      default:
-        return '+ Add to FabledCurator';
-    }
-  }
-
-  function platformDisplayName(key) {
-    return PLATFORMS[key]?.name || key || '';
-  }
-
   async function onClick() {
     const btn = document.getElementById('fc-add-source-btn');
     if (!btn) return;
-    btn.disabled = true;
-    const original = btn.textContent;
     const probe = currentProbe;
 
     if (probe?.state === 'source_match') {
-      btn.textContent = 'Opening…';
-      try {
-        const r = await browser.runtime.sendMessage({
-          type: 'OPEN_ARTIST_PAGE',
-          slug: probe.artist?.slug,
-        });
-        if (r?.error) showToast(`Error: ${r.error}`, 'error');
-      } catch (e) {
-        showToast(`Error: ${e.message}`, 'error');
-      } finally {
-        btn.disabled = false;
-        btn.textContent = original;
-      }
+      await openArtist(btn, probe.artist?.slug);
       return;
     }
+    // A Discord URL names a channel, not a creator — ask which artist.
+    if (probe?.platform === 'discord') {
+      if (document.getElementById('fc-discord-panel')) closePanel();
+      else openDiscordPanel(probe);
+      return;
+    }
+    await add(btn, { url: window.location.href });
+  }
 
-    btn.textContent = 'Adding…';
+  async function openArtist(btn, slug) {
+    btn.disabled = true;
+    const original = btn.textContent;
+    btn.textContent = 'Opening…';
     try {
-      const r = await browser.runtime.sendMessage({
-        type: 'ADD_AS_SOURCE',
-        url: window.location.href,
-      });
-      if (r?.error) {
-        showToast(`Error: ${r.error}`, 'error');
-      } else {
-        const verb = r.created_source ? 'Added' : 'Already a source for';
-        showToast(`${verb} ${r.artist?.name || 'artist'} (${r.source?.platform || ''})`, 'success');
-        // Re-probe so the chip flips green without waiting for the next
-        // navigation.
-        evaluate();
-        return;
-      }
+      const r = await browser.runtime.sendMessage({ type: 'OPEN_ARTIST_PAGE', slug });
+      if (r?.error) showToast(`Error: ${r.error}`, 'error');
     } catch (e) {
       showToast(`Error: ${e.message}`, 'error');
     } finally {
@@ -132,6 +108,153 @@
     }
   }
 
+  // One add, shared by the one-click chip and the Discord panel. Resolves
+  // true on success.
+  async function add(btn, request) {
+    btn.disabled = true;
+    const original = btn.textContent;
+    btn.textContent = 'Adding…';
+    try {
+      const r = await browser.runtime.sendMessage({ type: 'ADD_AS_SOURCE', ...request });
+      if (r?.error) {
+        showToast(`Error: ${r.error}`, 'error');
+        return false;
+      }
+      const verb = r.created_source ? 'Added to' : 'Already a source for';
+      showToast(`${verb} ${r.artist?.name || 'artist'} (${r.source?.platform || ''})`, 'success');
+      // Re-probe so the chip flips green without waiting for a navigation.
+      evaluate();
+      return true;
+    } catch (e) {
+      showToast(`Error: ${e.message}`, 'error');
+      return false;
+    } finally {
+      btn.disabled = false;
+      btn.textContent = original;
+    }
+  }
+
+  // ---- Discord Add panel ----
+  // Where: this channel or the whole server. Who: the suggested artist, one
+  // found by search, or a new one by name. Built with createElement only —
+  // server, channel and artist names are other people's text.
+
+  function el(tag, props = {}, children = []) {
+    const node = document.createElement(tag);
+    const { class: className, text, ...rest } = props;
+    if (className) node.className = className;
+    if (text != null) node.textContent = text;
+    Object.assign(node, rest);
+    for (const c of children) node.appendChild(c);
+    return node;
+  }
+
+  function closePanel() {
+    document.getElementById('fc-discord-panel')?.remove();
+  }
+
+  function openDiscordPanel(probe) {
+    closePanel();
+    const d = probe.discord || {};
+    const choice = discordPanelDefaults(probe);
+    let searchSeq = 0;
+
+    const scopeRow = (value, label, disabled) => {
+      const input = el('input', {
+        type: 'radio', name: 'fc-discord-scope', value,
+        checked: choice.scope === value, disabled,
+      });
+      input.addEventListener('change', () => { choice.scope = value; refresh(); });
+      return el('label', { class: 'fc-panel__radio' }, [input, el('span', { text: label })]);
+    };
+
+    const nameInput = el('input', {
+      type: 'text', class: 'fc-panel__input', value: choice.artistName,
+      placeholder: 'Artist name — search or type a new one',
+      autocomplete: 'off', spellcheck: false,
+    });
+    const results = el('div', { class: 'fc-panel__results' });
+    const hint = el('div', { class: 'fc-panel__hint' });
+    const addBtn = el('button', { class: 'fc-panel__btn fc-panel__btn--primary', text: 'Add' });
+    const cancelBtn = el('button', { class: 'fc-panel__btn', text: 'Cancel' });
+
+    const panel = el('div', { id: 'fc-discord-panel', class: 'fc-panel' }, [
+      el('div', { class: 'fc-panel__title', text: 'Add Discord source' }),
+      el('div', { class: 'fc-panel__sub', text: serverLabel(d) }),
+      el('div', { class: 'fc-panel__label', text: 'Follow' }),
+      scopeRow('channel', d.channel_id ? channelLabel(d) : 'this channel', !d.channel_id),
+      scopeRow('server', `Every channel in ${serverLabel(d)}`, false),
+      el('div', { class: 'fc-panel__label', text: 'Artist' }),
+      nameInput,
+      results,
+      hint,
+      el('div', { class: 'fc-panel__actions' }, [cancelBtn, addBtn]),
+    ]);
+
+    function refresh() {
+      const req = discordAddRequest(choice);
+      addBtn.disabled = !req;
+      if (!req) hint.textContent = 'Pick an artist or type a name.';
+      else if (req.artistId != null) hint.textContent = `Connects to ${choice.artist.name} in FabledCurator.`;
+      else hint.textContent = `Adds to “${req.artistName}” — created if FabledCurator has no artist by that name.`;
+    }
+
+    function showResults(rows) {
+      results.replaceChildren(...rows.map((a) => {
+        const row = el('button', { class: 'fc-panel__result', text: a.name });
+        row.addEventListener('click', () => {
+          choice.artist = { id: a.id, name: a.name };
+          choice.artistName = a.name;
+          nameInput.value = a.name;
+          results.replaceChildren();
+          refresh();
+        });
+        return row;
+      }));
+    }
+
+    let debounce = null;
+    nameInput.addEventListener('input', () => {
+      choice.artistName = nameInput.value;
+      refresh();
+      clearTimeout(debounce);
+      const q = nameInput.value.trim();
+      if (!q) { results.replaceChildren(); return; }
+      debounce = setTimeout(async () => {
+        const mine = ++searchSeq;
+        let r;
+        try {
+          r = await browser.runtime.sendMessage({ type: 'SEARCH_ARTISTS', q });
+        } catch {
+          return;
+        }
+        if (mine !== searchSeq || r?.error) return;
+        showResults(r.artists || []);
+      }, 200);
+    });
+    // Keep Discord's global shortcuts from eating keystrokes meant for us.
+    panel.addEventListener('keydown', (e) => {
+      e.stopPropagation();
+      if (e.key === 'Escape') closePanel();
+      if (e.key === 'Enter' && e.target === nameInput && !addBtn.disabled) addBtn.click();
+    });
+
+    cancelBtn.addEventListener('click', closePanel);
+    addBtn.addEventListener('click', async () => {
+      const req = discordAddRequest(choice);
+      if (!req) return;
+      const btn = document.getElementById('fc-add-source-btn');
+      addBtn.disabled = true;
+      const ok = await add(btn || addBtn, req);
+      if (ok) closePanel();
+      else refresh();
+    });
+
+    document.body.appendChild(panel);
+    refresh();
+    nameInput.focus();
+  }
+
   function showToast(text, kind) {
     const t = document.createElement('div');
     t.className = `fc-toast fc-toast--${kind}`;

extension/lib/api.js

@@ -80,6 +80,17 @@ class FabledCuratorAPI {
   getCredentials() {
     return this.request('GET', '/credentials');
   }
+  // Test the STORED credential against one of the platform's sources — the
+  // same check the web UI's Verify button runs. {valid: true|false|null, reason}.
+  verifyCredential(platform) {
+    return this.request('POST', `/credentials/${encodeURIComponent(platform)}/verify`);
+  }
+
+  // Artist search for the Discord Add panel — the web UI's autocomplete.
+  searchArtists(q, limit = 8) {
+    const qs = new URLSearchParams({ q, limit: String(limit) }).toString();
+    return this.request('GET', `/artists/autocomplete?${qs}`);
+  }
 
   // FC-3a — sources.
   listSources() {
@@ -90,8 +101,14 @@ class FabledCuratorAPI {
   }
 
   // FC-3g — extension-specific.
-  quickAddSource(url) {
-    return this.request('POST', '/extension/quick-add-source', { url });
+  // artistId connects the source to an existing artist, artistName to the
+  // artist of that name (created if new); with neither the server derives the
+  // artist from the URL. A Discord channel always sends one.
+  quickAddSource(url, { artistId = null, artistName = null } = {}) {
+    const body = { url };
+    if (artistId != null) body.artist_id = artistId;
+    else if (artistName) body.artist_name = artistName;
+    return this.request('POST', '/extension/quick-add-source', body);
   }
   probeSource(url) {
     // Read-only existence check. Drives the content-script chip's

extension/lib/chip.js

@@ -0,0 +1,80 @@
+/**
+ * The content script's decisions, kept apart from its DOM so the specs can
+ * load them (test/chip.spec.js): which state the chip shows, what it says,
+ * and what the Discord Add panel starts out proposing.
+ *
+ * `probe` is /api/extension/probe's answer; `platformName` is the display
+ * name (PLATFORMS[key].name), passed in so this file needs no other lib.
+ */
+
+function chipState(probe) {
+  if (!probe || probe.error) return 'new';
+  return ({ source_match: 'source-match', artist_match: 'artist-match', new: 'new' })[probe.state] || 'new';
+}
+
+function chipLabel(probe, platformName) {
+  if (!probe || probe.error) return '+ Add to FabledCurator';
+  const artist = probe.artist?.name || 'artist';
+  if (probe.platform === 'discord') {
+    const d = probe.discord || {};
+    if (probe.state === 'source_match') {
+      return probe.covered_by_server
+        ? `✓ Whole server in FabledCurator · ${artist}`
+        : `✓ In FabledCurator · ${artist}`;
+    }
+    // Every other Discord state opens the panel: the artist is always chosen.
+    return d.channel_id ? `+ Add ${channelLabel(d)} to FabledCurator` : '+ Add server to FabledCurator';
+  }
+  switch (probe.state) {
+    case 'source_match':
+      return `✓ In FabledCurator · ${platformName}`;
+    case 'artist_match':
+      return `+ Add ${platformName} source to ${artist}`;
+    default:
+      return '+ Add to FabledCurator';
+  }
+}
+
+/** `#name` when the probe could read it, else a neutral "this channel". */
+function channelLabel(d) {
+  return d.channel_name ? `#${d.channel_name}` : 'this channel';
+}
+
+/** `name` when the probe could read it, else "this server". */
+function serverLabel(d) {
+  return d.server_name || 'this server';
+}
+
+/**
+ * What the Discord Add panel opens with. The channel is the default scope
+ * when there is one: a server source walks every channel the token can read,
+ * which is rarely what a single art channel wants. The artist is the probe's
+ * suggestion (the owner of another source on this server), else a new artist
+ * named after the server.
+ */
+function discordPanelDefaults(probe) {
+  const d = probe?.discord || {};
+  const suggested = probe?.state === 'artist_match' && probe.artist ? probe.artist : null;
+  return {
+    scope: d.channel_id ? 'channel' : 'server',
+    channelUrl: d.channel_url || null,
+    serverUrl: d.server_url || null,
+    artist: suggested ? { id: suggested.id, name: suggested.name } : null,
+    artistName: suggested ? suggested.name : (d.server_name || ''),
+  };
+}
+
+/**
+ * The quick-add body for the panel's current choice. A picked artist goes by
+ * id — names can collide once slugified — and a typed name creates (or
+ * finds) that artist. null when there is nothing valid to send.
+ */
+function discordAddRequest(choice) {
+  const url = choice.scope === 'server' ? choice.serverUrl : choice.channelUrl;
+  if (!url) return null;
+  if (choice.artist && choice.artist.id != null && choice.artist.name === choice.artistName) {
+    return { url, artistId: choice.artist.id };
+  }
+  const name = (choice.artistName || '').trim();
+  return name ? { url, artistName: name } : null;
+}

extension/lib/platforms.js

@@ -57,7 +57,8 @@ const PLATFORMS = {
     domains: ['.discord.com', 'discord.com'],
     authType: 'token',
     color: '#5865F2',
-    urlPattern: /^https?:\/\/(www\.)?discord\.com/,
+    // ptb/canary are Discord's beta clients — same channels, same token.
+    urlPattern: /^https?:\/\/((www|ptb|canary)\.)?discord\.com/,
     note: 'Open Discord in browser to capture token',
   },
 };
@@ -80,8 +81,23 @@ const PLATFORM_ARTIST_PATTERNS = {
   patreon:       /^https?:\/\/(www\.)?patreon\.com\/(?:cw\/|c\/)?(?!(?:home|search|messages|notifications|library|settings|posts)(?:[\/?#]|$))[^/?#]+/i,
   subscribestar: /^https?:\/\/(www\.)?subscribestar\.(com|adult)\/(?!feed$|messages$|library$)[^/?#]+\/?$/i,
   hentaifoundry: /^https?:\/\/(www\.)?hentai-foundry\.com\/user\/[^/?#]+/i,
+  // A Discord URL names a server or channel, not a creator: the backend's slug
+  // is `<server>[/<channel>]` and the Add panel asks which artist it belongs
+  // to. A message jump link still names its channel; DMs (@me) and thread
+  // links don't match. Mirrors extension_service._PLATFORM_PATTERNS.
+  discord:       /^https?:\/\/(?:www\.|ptb\.|canary\.)?discord\.com\/channels\/\d+(?:\/\d+)?(?:\/\d+)?\/?(?:[?#].*)?$/i,
 };
 
+/**
+ * `{serverId, channelId}` from a Discord channel/server URL the artist
+ * pattern accepts, else null. channelId is null for a whole-server URL.
+ */
+function parseDiscordUrl(url) {
+  if (!PLATFORM_ARTIST_PATTERNS.discord.test(url || '')) return null;
+  const m = /\/channels\/(\d+)(?:\/(\d+))?/.exec(url);
+  return m ? { serverId: m[1], channelId: m[2] || null } : null;
+}
+
 function getPlatformFromUrl(url) {
   for (const [key, platform] of Object.entries(PLATFORMS)) {
     if (platform.urlPattern.test(url)) return key;

extension/lib/popup-format.js

@@ -0,0 +1,55 @@
+/**
+ * The popup's wording, kept apart from its DOM so the specs can load it
+ * (test/popup-format.spec.js). Classic script, like the rest of lib/.
+ */
+
+/**
+ * One line of state for a source row, from /api/sources' fields, with the
+ * status class the popup colours it by ('ready' | 'error' | 'no-cookies' for
+ * a warning | '' for plain). The most actionable fact wins: an error before
+ * a running backfill, a backfill before the last-checked time.
+ */
+function sourceStatus(src, now = Date.now()) {
+  if (!src.enabled) return { text: 'Disabled', kind: '' };
+  if (src.last_error) {
+    const first = String(src.last_error).split('\n')[0].trim();
+    const short = first.length > 90 ? `${first.slice(0, 89)}…` : first;
+    return { text: `Error — ${short}`, kind: 'error' };
+  }
+  if (src.backfill_state === 'running') {
+    const n = src.backfill_chunks || 0;
+    return { text: n ? `Backfilling — ${n} chunk${n === 1 ? '' : 's'} done` : 'Backfill queued', kind: 'ready' };
+  }
+  if (src.backfill_state === 'stalled') return { text: 'Backfill stalled', kind: 'no-cookies' };
+  if (!src.last_checked_at) return { text: 'Not checked yet', kind: '' };
+  return { text: `Checked ${relativeTime(src.last_checked_at, now)}`, kind: '' };
+}
+
+// Same buckets and wording as the web UI's canonical formatRelative
+// (frontend/src/utils/date.js, snippet #3959) — the extension can't import it (classic
+// scripts, separate package), so it mirrors it: "42s ago", "5m ago", "3h ago",
+// "2d ago", and "Never" for a missing or unreadable time.
+function relativeTime(iso, now = Date.now()) {
+  const t = iso ? Date.parse(iso) : NaN;
+  if (Number.isNaN(t)) return 'Never';
+  const abs = Math.abs(now - t) / 1000;
+  let body;
+  if (abs < 60) body = `${Math.floor(abs)}s`;
+  else if (abs < 3600) body = `${Math.floor(abs / 60)}m`;
+  else if (abs < 86400) body = `${Math.floor(abs / 3600)}h`;
+  else body = `${Math.floor(abs / 86400)}d`;
+  return `${body} ago`;
+}
+
+/**
+ * The popup message after a Discord token export, from FC's verify of the
+ * stored token: {text, kind} with kind 'success' | 'warning' | 'error'.
+ * valid=null is "FC couldn't test it" (no Discord source yet, or a network
+ * hiccup) — a warning with FC's reason, never a failure.
+ */
+function tokenExportMessage(verify) {
+  if (!verify) return { text: 'Discord: token exported', kind: 'success' };
+  if (verify.valid === true) return { text: `Discord: token exported and verified ✓ — ${verify.reason}`, kind: 'success' };
+  if (verify.valid === false) return { text: `Discord: token exported, but FC's check failed — ${verify.reason}`, kind: 'error' };
+  return { text: `Discord: token exported (not verified — ${verify.reason})`, kind: 'warning' };
+}

extension/manifest.json

@@ -56,9 +56,10 @@
         "*://*.patreon.com/*",
         "*://*.subscribestar.com/*",
         "*://*.subscribestar.adult/*",
-        "*://*.hentai-foundry.com/*"
+        "*://*.hentai-foundry.com/*",
+        "*://*.discord.com/*"
       ],
-      "js": ["lib/platforms.js", "content/content-script.js"],
+      "js": ["lib/platforms.js", "lib/chip.js", "content/content-script.js"],
       "css": ["content/content-script.css"],
       "run_at": "document_idle"
     }

extension/popup/popup.html

@@ -47,6 +47,7 @@
   </section>
 
   <script src="../lib/platforms.js"></script>
+  <script src="../lib/popup-format.js"></script>
   <script src="popup.js"></script>
 </body>
 </html>

extension/popup/popup.js

@@ -159,7 +159,11 @@ async function exportPlatformCookies(key, card) {
   try {
     const r = await browser.runtime.sendMessage({ type: 'EXPORT_COOKIES', platform: key });
     if (r.error) showError(r.error);
-    else {
+    else if (key === 'discord') {
+      const m = tokenExportMessage(r.verify);
+      showStatusMessage(m.text, m.kind);
+      await loadPlatformStatus();
+    } else {
       const n = r.cookieCount ?? null;
       const verifiedSuffix = r.verified ? ' (verified ✓)' : '';
       const msg = n !== null
@@ -205,7 +209,10 @@ async function loadSources() {
     c.appendChild(mutedNote('No sources yet.'));
     return;
   }
-  for (const src of r.sources) c.appendChild(createSourceRow(src));
+  // Grouped by artist so a creator's Patreon and Discord sit together.
+  const sorted = [...r.sources].sort((a, b) =>
+    (a.artist_name || '').localeCompare(b.artist_name || '') || a.id - b.id);
+  for (const src of sorted) c.appendChild(createSourceRow(src));
 }
 
 function createSourceRow(src) {
@@ -215,11 +222,16 @@ function createSourceRow(src) {
   info.className = 'info';
   const name = document.createElement('div');
   name.className = 'name';
-  name.textContent = `${src.platform} · #${src.id}`;
+  const platformName = PLATFORMS[src.platform]?.name || src.platform;
+  name.textContent = `${src.artist_name || `Source #${src.id}`} · ${platformName}`;
+  const state = sourceStatus(src);
+  const st = document.createElement('div');
+  st.className = `status ${state.kind}`;
+  st.textContent = state.text;
   const url = document.createElement('div');
   url.className = 'url';
   url.textContent = src.url;
-  info.appendChild(name); info.appendChild(url);
+  info.appendChild(name); info.appendChild(st); info.appendChild(url);
   const play = document.createElement('button');
   play.className = 'play';
   play.textContent = '▶';
@@ -229,7 +241,7 @@ function createSourceRow(src) {
     const r = await browser.runtime.sendMessage({ type: 'CHECK_SOURCE', sourceId: src.id });
     play.disabled = false;
     if (r.error) showError(r.error);
-    else showSuccess(`Triggered check for source #${src.id}`);
+    else showSuccess(`Check queued for ${src.artist_name || `source #${src.id}`} (${platformName})`);
   });
   row.appendChild(info); row.appendChild(play);
   return row;

extension/test/artist-url-samples.json

@@ -134,5 +134,42 @@
       { "url": "https://www.hentai-foundry.com/pictures/popular", "why": "gallery listing, not a user" },
       { "url": "https://www.hentai-foundry.com/", "why": "site root" }
     ]
+  },
+
+  "discord": {
+    "match": [
+      {
+        "url": "https://discord.com/channels/111111111111111111/222222222222222222",
+        "slug": "111111111111111111/222222222222222222",
+        "why": "a channel: the slug is server/channel -- a Discord URL names a place, not a creator, so the artist is chosen in the Add panel"
+      },
+      {
+        "url": "https://discord.com/channels/111111111111111111",
+        "slug": "111111111111111111",
+        "why": "a whole server"
+      },
+      {
+        "url": "https://discord.com/channels/111111111111111111/222222222222222222/333333333333333333",
+        "slug": "111111111111111111/222222222222222222",
+        "why": "a message jump link still names its channel"
+      },
+      {
+        "url": "https://ptb.discord.com/channels/111111111111111111/222222222222222222",
+        "slug": "111111111111111111/222222222222222222",
+        "why": "the ptb and canary clients serve the same channels"
+      },
+      {
+        "url": "https://discord.com/channels/111111111111111111/222222222222222222/",
+        "slug": "111111111111111111/222222222222222222",
+        "why": "trailing slash is tolerated"
+      }
+    ],
+    "no_match": [
+      { "url": "https://discord.com/channels/@me", "why": "the DM list is not a source" },
+      { "url": "https://discord.com/channels/@me/222222222222222222", "why": "a DM is not a source" },
+      { "url": "https://discord.com/app", "why": "the app shell, no server open" },
+      { "url": "https://discord.com/channels/111111111111111111/222222222222222222/threads/444444444444444444", "why": "thread links are left to the manual Add form" },
+      { "url": "https://discord.com/servers/111111111111111111", "why": "a server-discovery page, not a channel" }
+    ]
   }
 }

extension/test/chip.spec.js

@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest'
+import { loadLib } from './helpers/loadLib.js'
+
+const { chipState, chipLabel, discordPanelDefaults, discordAddRequest } = loadLib('chip.js', [
+  'chipState',
+  'chipLabel',
+  'discordPanelDefaults',
+  'discordAddRequest'
+])
+
+const discord = (extra = {}) => ({
+  platform: 'discord',
+  slug: '111/222',
+  discord: {
+    server_id: '111',
+    channel_id: '222',
+    server_name: 'Studio',
+    channel_name: 'drops',
+    server_url: 'https://discord.com/channels/111',
+    channel_url: 'https://discord.com/channels/111/222'
+  },
+  ...extra
+})
+
+describe('chip state and label', () => {
+  it('keeps the one-click wording on creator platforms', () => {
+    expect(chipLabel({ state: 'new', platform: 'patreon' }, 'Patreon')).toBe('+ Add to FabledCurator')
+    expect(
+      chipLabel({ state: 'artist_match', platform: 'patreon', artist: { name: 'Atole' } }, 'Patreon')
+    ).toBe('+ Add Patreon source to Atole')
+    expect(chipLabel({ state: 'source_match', platform: 'patreon' }, 'Patreon')).toBe(
+      '✓ In FabledCurator · Patreon'
+    )
+  })
+
+  it('offers the channel by name on Discord, whatever the suggestion', () => {
+    expect(chipLabel(discord({ state: 'new' }), 'Discord')).toBe('+ Add #drops to FabledCurator')
+    expect(chipLabel(discord({ state: 'artist_match', artist: { name: 'A' } }), 'Discord')).toBe(
+      '+ Add #drops to FabledCurator'
+    )
+  })
+
+  it('says "this channel" when the token could not read the name', () => {
+    const p = discord({ state: 'new' })
+    p.discord.channel_name = null
+    expect(chipLabel(p, 'Discord')).toBe('+ Add this channel to FabledCurator')
+  })
+
+  it('says whose source a Discord channel already is, and when the server covers it', () => {
+    const artist = { name: 'Tamada', slug: 'tamada' }
+    expect(chipLabel(discord({ state: 'source_match', artist, covered_by_server: false }), 'Discord')).toBe(
+      '✓ In FabledCurator · Tamada'
+    )
+    expect(chipLabel(discord({ state: 'source_match', artist, covered_by_server: true }), 'Discord')).toBe(
+      '✓ Whole server in FabledCurator · Tamada'
+    )
+  })
+
+  it('falls back to the generic add when the probe failed', () => {
+    expect(chipState({ error: 'x' })).toBe('new')
+    expect(chipLabel({ error: 'x' }, '')).toBe('+ Add to FabledCurator')
+    expect(chipState({ state: 'source_match' })).toBe('source-match')
+  })
+})
+
+describe('Discord Add panel', () => {
+  it('opens on the channel with the suggested artist preselected', () => {
+    const d = discordPanelDefaults(discord({ state: 'artist_match', artist: { id: 7, name: 'Tamada' } }))
+    expect(d.scope).toBe('channel')
+    expect(d.artist).toEqual({ id: 7, name: 'Tamada' })
+    expect(d.artistName).toBe('Tamada')
+  })
+
+  it('proposes a new artist named after the server when nothing is suggested', () => {
+    const d = discordPanelDefaults(discord({ state: 'new' }))
+    expect(d.artist).toBe(null)
+    expect(d.artistName).toBe('Studio')
+  })
+
+  it('sends a picked artist by id', () => {
+    const choice = discordPanelDefaults(discord({ state: 'artist_match', artist: { id: 7, name: 'Tamada' } }))
+    expect(discordAddRequest(choice)).toEqual({
+      url: 'https://discord.com/channels/111/222',
+      artistId: 7
+    })
+  })
+
+  it('sends a typed name once the picked artist has been edited away', () => {
+    const choice = discordPanelDefaults(discord({ state: 'artist_match', artist: { id: 7, name: 'Tamada' } }))
+    choice.artistName = 'Tamada Alt'
+    expect(discordAddRequest(choice)).toEqual({
+      url: 'https://discord.com/channels/111/222',
+      artistName: 'Tamada Alt'
+    })
+  })
+
+  it('adds the whole server when the operator picks it', () => {
+    const choice = discordPanelDefaults(discord({ state: 'new' }))
+    choice.scope = 'server'
+    expect(discordAddRequest(choice).url).toBe('https://discord.com/channels/111')
+  })
+
+  it('has nothing to send without an artist', () => {
+    const choice = discordPanelDefaults(discord({ state: 'new' }))
+    choice.artistName = '   '
+    expect(discordAddRequest(choice)).toBe(null)
+  })
+})

extension/test/platforms.spec.js

@@ -7,10 +7,14 @@ import { loadLib } from './helpers/loadLib.js'
 const EXT_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), '..')
 const manifest = JSON.parse(readFileSync(path.join(EXT_DIR, 'manifest.json'), 'utf8'))
 
-const { getPlatformFromUrl, isArtistPage, PLATFORMS, PLATFORM_ARTIST_PATTERNS } = loadLib(
-  'platforms.js',
-  ['getPlatformFromUrl', 'isArtistPage', 'PLATFORMS', 'PLATFORM_ARTIST_PATTERNS']
-)
+const { getPlatformFromUrl, isArtistPage, parseDiscordUrl, PLATFORMS, PLATFORM_ARTIST_PATTERNS } =
+  loadLib('platforms.js', [
+    'getPlatformFromUrl',
+    'isArtistPage',
+    'parseDiscordUrl',
+    'PLATFORMS',
+    'PLATFORM_ARTIST_PATTERNS'
+  ])
 
 describe('getPlatformFromUrl', () => {
   it('identifies each platform from a domain URL', () => {
@@ -88,8 +92,11 @@ describe('isArtistPage', () => {
     )
   })
 
-  it('returns false for a platform with no artist pattern (discord)', () => {
+  it('matches Discord server and channel pages, not DMs (milestone 429)', () => {
+    expect(isArtistPage('https://discord.com/channels/111/222', 'discord')).toBe(true)
+    expect(isArtistPage('https://discord.com/channels/111', 'discord')).toBe(true)
     expect(isArtistPage('https://discord.com/channels/@me', 'discord')).toBe(false)
+    expect(isArtistPage('https://discord.com/channels/@me/222', 'discord')).toBe(false)
   })
 
   it('returns false for an unknown platform key', () => {
@@ -100,8 +107,8 @@ describe('isArtistPage', () => {
 describe('platform table integrity', () => {
   it('gives every artist pattern a corresponding platform entry', () => {
     // A pattern keyed to a platform that no longer exists is dead code that
-    // silently never fires; the reverse (a platform with no pattern) is the
-    // legitimate discord case, so only this direction is an error.
+    // silently never fires; the reverse (a platform with no pattern) would be
+    // a platform the button never offers, a product choice rather than an error.
     for (const key of Object.keys(PLATFORM_ARTIST_PATTERNS)) {
       expect(Object.keys(PLATFORMS)).toContain(key)
     }
@@ -125,7 +132,8 @@ describe('platform table integrity', () => {
     const samples = {
       patreon: 'https://www.patreon.com/cw/Atole',
       subscribestar: 'https://subscribestar.adult/someone',
-      hentaifoundry: 'https://www.hentai-foundry.com/user/someone'
+      hentaifoundry: 'https://www.hentai-foundry.com/user/someone',
+      discord: 'https://ptb.discord.com/channels/111/222'
     }
     for (const [key, url] of Object.entries(samples)) {
       expect(isArtistPage(url, key), `${key} artist pattern`).toBe(true)
@@ -152,7 +160,7 @@ describe('manifest.json agrees with the platform table', () => {
       )
       expect(owner, `no platform claims content-script match "${m}"`).toBeTruthy()
       // The content script exists to draw the Add-as-source button, so a
-      // platform with no artist pattern (discord) has no business here.
+      // platform with no artist pattern has no business here.
       expect(
         PLATFORM_ARTIST_PATTERNS[owner[0]],
         `"${m}" injects for ${owner[0]}, which has no artist pattern`
@@ -232,9 +240,8 @@ describe('the JS<->Py artist-pattern mirror (#3093)', () => {
 
   it('has samples for every platform that has an artist pattern', () => {
     // The guard's own coverage check: without it, deleting a platform's
-    // samples would make this block pass by testing less. Discord is
-    // deliberately in neither — it is channel-based, with no creator page to
-    // put a button on, so it has no artist pattern on either side.
+    // samples would make this block pass by testing less. Discord joined at
+    // milestone 429 — its slug is server/channel and the artist is chosen.
     expect(Object.keys(samples).sort()).toEqual(Object.keys(PLATFORM_ARTIST_PATTERNS).sort())
   })
 
@@ -247,3 +254,26 @@ describe('the JS<->Py artist-pattern mirror (#3093)', () => {
     }
   })
 })
+
+describe('parseDiscordUrl', () => {
+  it('reads the server and channel ids the Add panel offers', () => {
+    expect(parseDiscordUrl('https://discord.com/channels/111/222')).toEqual({
+      serverId: '111',
+      channelId: '222'
+    })
+    expect(parseDiscordUrl('https://discord.com/channels/111/222/333')).toEqual({
+      serverId: '111',
+      channelId: '222'
+    })
+    expect(parseDiscordUrl('https://discord.com/channels/111')).toEqual({
+      serverId: '111',
+      channelId: null
+    })
+  })
+
+  it('returns null for anything the artist pattern rejects', () => {
+    expect(parseDiscordUrl('https://discord.com/channels/@me/222')).toBe(null)
+    expect(parseDiscordUrl('https://discord.com/app')).toBe(null)
+    expect(parseDiscordUrl('')).toBe(null)
+  })
+})

extension/test/popup-format.spec.js

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import { loadLib } from './helpers/loadLib.js'
+
+const { sourceStatus, relativeTime, tokenExportMessage } = loadLib('popup-format.js', [
+  'sourceStatus',
+  'relativeTime',
+  'tokenExportMessage'
+])
+
+const NOW = Date.parse('2026-09-25T12:00:00Z')
+const src = (extra = {}) => ({ enabled: true, last_error: null, backfill_state: null, ...extra })
+
+describe('sourceStatus', () => {
+  it('puts an error first, trimmed to its first line', () => {
+    const s = sourceStatus(src({ last_error: 'Discord rejected the token\nstack…', backfill_state: 'running' }), NOW)
+    expect(s).toEqual({ text: 'Error — Discord rejected the token', kind: 'error' })
+  })
+
+  it('shows a running backfill and its progress', () => {
+    expect(sourceStatus(src({ backfill_state: 'running', backfill_chunks: 0 }), NOW).text).toBe('Backfill queued')
+    expect(sourceStatus(src({ backfill_state: 'running', backfill_chunks: 3 }), NOW).text).toBe(
+      'Backfilling — 3 chunks done'
+    )
+  })
+
+  it('says when a source was last checked, or that it never was', () => {
+    expect(sourceStatus(src({ last_checked_at: '2026-09-25T11:55:00Z' }), NOW).text).toBe('Checked 5m ago')
+    expect(sourceStatus(src({ last_checked_at: null }), NOW).text).toBe('Not checked yet')
+  })
+
+  it('shows a disabled source as disabled, whatever else it carries', () => {
+    expect(sourceStatus(src({ enabled: false, last_error: 'x' }), NOW).text).toBe('Disabled')
+  })
+})
+
+describe('relativeTime', () => {
+  it('uses the web UI formatRelative buckets', () => {
+    expect(relativeTime('2026-09-25T11:59:18Z', NOW)).toBe('42s ago')
+    expect(relativeTime('2026-09-25T09:00:00Z', NOW)).toBe('3h ago')
+    expect(relativeTime('2026-09-23T12:00:00Z', NOW)).toBe('2d ago')
+    expect(relativeTime('garbage', NOW)).toBe('Never')
+  })
+})
+
+describe('tokenExportMessage', () => {
+  it('distinguishes verified, rejected and untested tokens', () => {
+    expect(tokenExportMessage({ valid: true, reason: 'Token valid (me)' }).kind).toBe('success')
+    expect(tokenExportMessage({ valid: false, reason: 'Discord rejected the token' }).kind).toBe('error')
+    const untested = tokenExportMessage({ valid: null, reason: 'No enabled source' })
+    expect(untested.kind).toBe('warning')
+    expect(untested.text).toContain('No enabled source')
+  })
+})