feat(model-manager): generated-photo Gallery + device-routing landing

- Gallery view: grid of generated photos from ComfyUI's output/, full-size
  lightbox, and permanent delete (with confirm). Paginated ("Load more").
- Backend: GET /api/gallery, GET /gallery/file (path-guarded image serve),
  DELETE /api/gallery (path-guarded; clear error on permission denial).
- Mount ./output read-write into model-manager so the gallery can delete.
- Device-routing landing at /start: phones -> ComfyUIMini, desktops ->
  the Gallery; ?force=mobile|desktop overrides. Ports come from the new
  /api/ui-config (COMFYUI_PORT / COMFYUIMINI_PORT env).
- Responsive tweaks so the gallery is usable if opened directly on a phone.

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 === "gallery") loadGallery(true);
   if (name === "browse" && !browseState.loaded) runSearch(true);
   if (name === "download") { loadDownloads(); startDownloadsPolling(); }
   else stopDownloadsPolling();
@@ -244,6 +245,113 @@ function stopDownloadsPolling() {
   if (downloadsTimer) { clearInterval(downloadsTimer); downloadsTimer = null; }
 }
 
+// ---- gallery (generated photos) -------------------------------------------
+
+const galleryState = { offset: 0, limit: 60, total: 0 };
+
+async function loadGallery(reset) {
+  const grid = $("#galleryGrid");
+  const moreBtn = $("#galleryMore");
+  if (reset) {
+    galleryState.offset = 0;
+    grid.innerHTML = `<p class="empty">Loading…</p>`;
+  } else {
+    moreBtn.textContent = "Loading…";
+  }
+  try {
+    const data = await api(
+      `/api/gallery?limit=${galleryState.limit}&offset=${galleryState.offset}`);
+    if (reset) grid.innerHTML = "";
+    if (!data.items.length && reset) {
+      grid.innerHTML = `<p class="empty">No generated photos yet.</p>`;
+    } else {
+      for (const p of data.items) grid.appendChild(renderPhotoCard(p));
+    }
+    galleryState.total = data.total;
+    galleryState.offset += data.returned;
+    const hasMore = galleryState.offset < galleryState.total;
+    moreBtn.style.display = hasMore ? "" : "none";
+    moreBtn.textContent = "Load more";
+  } catch (err) {
+    if (reset) grid.innerHTML = `<p class="empty">Error: ${err.message}</p>`;
+    moreBtn.textContent = "Load more";
+  }
+}
+
+function photoUrl(p) {
+  return `/gallery/file?path=${encodeURIComponent(p.path)}`;
+}
+
+function renderPhotoCard(p) {
+  const card = document.createElement("div");
+  card.className = "photo-card";
+
+  const img = document.createElement("img");
+  img.loading = "lazy";
+  img.src = photoUrl(p);
+  img.alt = p.name;
+
+  const del = document.createElement("button");
+  del.className = "p-del";
+  del.title = "Delete";
+  del.textContent = "🗑";
+  del.addEventListener("click", (e) => { e.stopPropagation(); deletePhoto(p, card); });
+
+  const meta = document.createElement("div");
+  meta.className = "p-meta";
+  meta.textContent = `${p.name} · ${fmtBytes(p.size)}`;
+
+  card.append(img, del, meta);
+  card.addEventListener("click", () => openLightbox(p, card));
+  return card;
+}
+
+async function deletePhoto(p, card) {
+  if (!confirm(`Permanently delete ${p.name}?`)) return;
+  try {
+    await api("/api/gallery", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: p.path }),
+    });
+    if (card) card.remove();
+    galleryState.total = Math.max(0, galleryState.total - 1);
+    galleryState.offset = Math.max(0, galleryState.offset - 1);
+    closeLightbox();
+    toast($("#galleryToast"), "Deleted", false);
+    if (!$("#galleryGrid").children.length) loadGallery(true);
+  } catch (err) {
+    toast($("#galleryToast"), err.message, true);
+  }
+}
+
+// lightbox
+let lbCurrent = null;
+function openLightbox(p, card) {
+  lbCurrent = { p, card };
+  $("#lbImage").src = photoUrl(p);
+  $("#lbName").textContent = p.path;
+  $("#lbOpen").href = photoUrl(p);
+  $("#lightbox").hidden = false;
+}
+function closeLightbox() {
+  $("#lightbox").hidden = true;
+  $("#lbImage").src = "";
+  lbCurrent = null;
+}
+$("#lbClose").addEventListener("click", closeLightbox);
+$("#lightbox").addEventListener("click", (e) => {
+  if (e.target.id === "lightbox") closeLightbox();
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && !$("#lightbox").hidden) closeLightbox();
+});
+$("#lbDelete").addEventListener("click", () => {
+  if (lbCurrent) deletePhoto(lbCurrent.p, lbCurrent.card);
+});
+$("#refreshGallery").addEventListener("click", () => loadGallery(true));
+$("#galleryMore").addEventListener("click", () => loadGallery(false));
+
 // ---- browse civitai -------------------------------------------------------
 
 const browseState = { loaded: false, page: null, cursor: null, busy: false };
@@ -445,5 +553,7 @@ $("#saveSettings").addEventListener("click", async () => {
 
 (async function init() {
   await loadModelTypes();
-  showView("installed");
+  const wanted = new URLSearchParams(location.search).get("view");
+  const valid = ["installed", "gallery", "browse", "download", "settings"];
+  showView(valid.includes(wanted) ? wanted : "installed");
 })();