feat(model-manager): add CivitAI browse view + fix civitai.red / 401

- New "Browse CivitAI" view: thumbnail grid with search, type/sort/period
  filters and NSFW toggle; click a model card to download it (per-card
  version picker for multi-version models). Cursor + page based "Load more".
- Backend: /api/civitai/search and /api/civitai/download endpoints; new
  civitai_search() catalog helper.
- Fix 401 on paste: recognize the civitai.red mirror (and any civitai.*
  host), normalize API calls to civitai.com, and always resolve the
  model-version so type + filename are auto-detected for every CivitAI URL.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

model-manager/app/static/app.js

@@ -38,6 +38,7 @@ function showView(name) {
   $$(".nav-item").forEach((b) => b.classList.toggle("active", b.dataset.view === name));
   $$(".view").forEach((v) => v.classList.toggle("active", v.id === `view-${name}`));
   if (name === "installed") loadModels();
+  if (name === "browse" && !browseState.loaded) runSearch(true);
   if (name === "download") { loadDownloads(); startDownloadsPolling(); }
   else stopDownloadsPolling();
   if (name === "settings") loadSettings();
@@ -243,6 +244,162 @@ function stopDownloadsPolling() {
   if (downloadsTimer) { clearInterval(downloadsTimer); downloadsTimer = null; }
 }
 
+// ---- browse civitai -------------------------------------------------------
+
+const browseState = { loaded: false, page: null, cursor: null, busy: false };
+
+function browseParams() {
+  const p = new URLSearchParams();
+  const q = $("#bSearch").value.trim();
+  if (q) p.set("query", q);
+  if ($("#bType").value) p.set("types", $("#bType").value);
+  p.set("sort", $("#bSort").value);
+  p.set("period", $("#bPeriod").value);
+  p.set("nsfw", $("#bNsfw").checked ? "true" : "false");
+  return p;
+}
+
+async function runSearch(reset) {
+  if (browseState.busy) return;
+  browseState.busy = true;
+  browseState.loaded = true;
+  const grid = $("#browseGrid");
+  const moreBtn = $("#bMore");
+  const p = browseParams();
+
+  if (reset) {
+    browseState.page = null;
+    browseState.cursor = null;
+    grid.innerHTML = `<p class="empty">Searching…</p>`;
+  } else {
+    if (browseState.cursor) p.set("cursor", browseState.cursor);
+    else if (browseState.page) p.set("page", browseState.page);
+    moreBtn.textContent = "Loading…";
+  }
+
+  try {
+    const data = await api(`/api/civitai/search?${p.toString()}`);
+    if (reset) grid.innerHTML = "";
+    if (!data.items.length && reset) {
+      grid.innerHTML = `<p class="empty">No models found.</p>`;
+    } else {
+      for (const m of data.items) grid.appendChild(renderBrowseCard(m));
+    }
+    // Set up "load more": prefer cursor, fall back to next page.
+    browseState.cursor = data.nextCursor || null;
+    browseState.page = data.nextPage || null;
+    const hasMore = Boolean(browseState.cursor || browseState.page);
+    moreBtn.style.display = hasMore ? "" : "none";
+    moreBtn.textContent = "Load more";
+  } catch (err) {
+    if (reset) grid.innerHTML = `<p class="empty">Error: ${err.message}</p>`;
+    else toast($("#browseToast"), err.message, true);
+    moreBtn.textContent = "Load more";
+  } finally {
+    browseState.busy = false;
+  }
+}
+
+function renderBrowseCard(m) {
+  const card = document.createElement("div");
+  card.className = "browse-card";
+
+  const thumb = document.createElement("div");
+  thumb.className = "thumb";
+  if (m.thumbnail && m.thumbnail_type === "image") {
+    thumb.style.backgroundImage = `url("${m.thumbnail}")`;
+  }
+  if (m.type) {
+    const tag = document.createElement("span");
+    tag.className = "type-tag";
+    tag.textContent = m.type;
+    thumb.appendChild(tag);
+  }
+  if (m.nsfw) {
+    const n = document.createElement("span");
+    n.className = "nsfw-tag";
+    n.textContent = "NSFW";
+    thumb.appendChild(n);
+  }
+
+  const body = document.createElement("div");
+  body.className = "body";
+  const name = document.createElement("div");
+  name.className = "b-name";
+  name.textContent = m.name || "(untitled)";
+  const meta = document.createElement("div");
+  meta.className = "b-meta";
+  meta.textContent = `${m.creator || "?"} · ${fmtNum(m.downloads)} downloads`;
+
+  const foot = document.createElement("div");
+  foot.className = "b-foot";
+
+  // Version selector when there's more than one.
+  let versionSel = null;
+  if (m.versions && m.versions.length > 1) {
+    versionSel = document.createElement("select");
+    for (const v of m.versions) {
+      const o = document.createElement("option");
+      o.value = v.id;
+      o.textContent = v.name || `v${v.id}`;
+      versionSel.appendChild(o);
+    }
+    foot.appendChild(versionSel);
+  }
+
+  const btn = document.createElement("button");
+  btn.className = "btn primary";
+  btn.textContent = "Download";
+  btn.addEventListener("click", () => {
+    const vid = versionSel ? Number(versionSel.value) : m.primary_version_id;
+    downloadVersion(vid, btn);
+  });
+  foot.appendChild(btn);
+
+  body.append(name, meta, foot);
+  card.append(thumb, body);
+  return card;
+}
+
+async function downloadVersion(versionId, btn) {
+  if (!versionId) { toast($("#browseToast"), "No version available", true); return; }
+  btn.disabled = true;
+  const original = btn.textContent;
+  btn.textContent = "Queued ✓";
+  try {
+    await api("/api/civitai/download", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ version_id: versionId }),
+    });
+    toast($("#browseToast"), "Download started — see Add / Download", false);
+    setTimeout(() => { btn.disabled = false; btn.textContent = original; }, 2500);
+  } catch (err) {
+    toast($("#browseToast"), err.message, true);
+    btn.disabled = false;
+    btn.textContent = original;
+  }
+}
+
+function fmtNum(n) {
+  if (n == null) return "?";
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + "k";
+  return String(n);
+}
+
+let toastTimer = null;
+function toast(el, msg, isErr) {
+  el.textContent = msg;
+  el.className = `form-msg ${isErr ? "err" : "ok"}`;
+  if (toastTimer) clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => { el.textContent = ""; }, 4000);
+}
+
+$("#bGo").addEventListener("click", () => runSearch(true));
+$("#bSearch").addEventListener("keydown", (e) => { if (e.key === "Enter") runSearch(true); });
+$("#bMore").addEventListener("click", () => runSearch(false));
+
 // ---- settings -------------------------------------------------------------
 
 async function loadSettings() {