@rslsp1/fa-app-tools 2.0.30 → 2.0.46

package/dist/index.js

@@ -566,30 +566,39 @@ async function hfUploadImage(base64, id, token, mimeType = "image/jpeg") {
     commitTitle: `Add image ${id}`
   });
 }
-async function hfLoadImageAsBase64(id, token, namespace) {
-  const paths = [`images/${id}`];
-  if (namespace) paths.push(`${namespace}images/${id}`);
-  for (const basePath of paths) {
-    for (const ext of ["jpg", "png"]) {
-      try {
-        const res = await fetch(
-          `${HF_BASE}/datasets/${HF_REPO}/resolve/main/${basePath}.${ext}?download=true`,
-          { headers: { Authorization: `Bearer ${token}` } }
-        );
-        if (!res.ok) continue;
-        const blob = await res.blob();
-        return new Promise((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => resolve(reader.result.split(",")[1]);
-          reader.onerror = reject;
-          reader.readAsDataURL(blob);
-        });
-      } catch {
-        continue;
+async function hfLoadImageAsBase64(id, token, namespace, filename, on404, mimeType, hasThumb) {
+  const fetchBase64 = async (repoPath) => {
+    try {
+      const res = await fetch(
+        `${HF_BASE}/datasets/${HF_REPO}/resolve/main/${repoPath}?download=true`,
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      if (!res.ok) {
+        if (on404 && on404()) return "ABORT";
+        return null;
       }
+      const blob = await res.blob();
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result.split(",")[1]);
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      });
+    } catch {
+      return null;
     }
+  };
+  if (filename) {
+    if (hasThumb) {
+      const thumb = await fetchBase64(`thumbs/${filename}`);
+      if (thumb && thumb !== "ABORT") return thumb;
+    }
+    const result2 = await fetchBase64(`images/${filename}`);
+    return result2 === "ABORT" ? null : result2;
   }
-  return null;
+  const ext = mimeType === "image/png" ? "png" : "jpg";
+  const result = await fetchBase64(`images/${id}.${ext}`);
+  return result === "ABORT" ? null : result;
 }
 var import_jszip2, import_hub, HF_BASE, HF_REPO, HF_TOKEN_KEY, SESSION_CLIENT_ID;
 var init_hfStateService = __esm({
@@ -650,10 +659,6 @@ __export(index_exports, {
   cleanAiResponse: () => cleanAiResponse,
   createFlowServices: () => createFlowServices,
   exportProjectToZip: () => exportProjectToZip,
-  faServerDelete: () => faServerDelete,
-  faServerGet: () => faServerGet,
-  faServerPost: () => faServerPost,
-  faServerPut: () => faServerPut,
   findForks: () => findForks,
   findTips: () => findTips,
   formatTreeToMarkdown: () => formatTreeToMarkdown,
@@ -1023,8 +1028,33 @@ var CompactDropdown = ({
 };
 
 // src/components/HistoryPanel.tsx
-var import_react4 = require("motion/react");
+var import_react4 = require("react");
+var import_react5 = require("motion/react");
+
+// src/lib/grouping.ts
+function groupByPrompt(items) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = item.prompt ?? "";
+    if (!map.has(key)) map.set(key, []);
+    map.get(key).push(item);
+  }
+  const groups = [];
+  for (const [prompt, groupItems] of map) {
+    const titled = groupItems.filter((i) => i.titleTs);
+    const representative = titled.length > 0 ? titled.reduce((a, b) => a.titleTs > b.titleTs ? a : b) : groupItems.reduce((a, b) => a.timestamp > b.timestamp ? a : b);
+    groups.push({ prompt, items: groupItems, representative });
+  }
+  return groups.sort((a, b) => {
+    const aMax = Math.max(...a.items.map((i) => i.timestamp));
+    const bMax = Math.max(...b.items.map((i) => i.timestamp));
+    return bMax - aMax;
+  });
+}
+
+// src/components/HistoryPanel.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var PAGE_SIZE = 20;
 var formatFriendlyTimestamp = (timestamp) => {
   const date = new Date(timestamp);
   const now = /* @__PURE__ */ new Date();
@@ -1037,46 +1067,83 @@ var formatFriendlyTimestamp = (timestamp) => {
   return `${date.toLocaleDateString([], { day: "2-digit", month: "2-digit" })}, ${timeStr}`;
 };
 var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
+  const [visibleCount, setVisibleCount] = (0, import_react4.useState)(PAGE_SIZE);
+  const doneItems = history.filter((g) => g.status === "done");
+  const processingItems = history.filter((g) => g.status !== "done");
+  const groups = groupByPrompt(doneItems);
+  const visibleGroups = groups.slice(0, visibleCount);
   if (history.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center justify-center py-20 text-center gap-4 opacity-10", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-symbols-outlined text-[64px]", children: "history" }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[10px] font-bold uppercase tracking-widest", children: "Keine Historie" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-4 flex flex-col gap-3 overflow-y-auto dark-scrollbar", children: history.map((gen) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      className: `flex gap-3 p-2 bg-white/5 border rounded-2xl cursor-pointer group transition-all relative ${currentResultId === gen.id ? "border-white/40 bg-white/10 shadow-lg" : "border-white/5 hover:border-white/20"}`,
-      onClick: () => onSelect(gen),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-black shrink-0 border border-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: gen.base64 ? gen.base64.startsWith("data:") ? gen.base64 : `data:image/png;base64,${gen.base64}` : "", className: "w-full h-full object-cover", alt: "Thumbnail" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 py-0.5 overflow-hidden", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[7px] font-bold text-white/20 uppercase whitespace-nowrap", children: formatFriendlyTimestamp(gen.timestamp) }),
-            gen.model && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[7px] font-bold text-white/40 bg-white/5 px-1 rounded uppercase truncate max-w-[60px]", children: gen.model })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-[9px] text-white/60 line-clamp-2 leading-tight", children: [
-            '"',
-            gen.prompt,
-            '"'
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react5.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-4 flex flex-col gap-3 overflow-y-auto dark-scrollbar", children: [
+    processingItems.map((gen) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: "flex gap-3 p-2 bg-white/5 border border-white/5 rounded-2xl cursor-pointer group transition-all relative",
+        onClick: () => onSelect(gen),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-black shrink-0 border border-white/5 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-5 h-5 border-t-2 border-white rounded-full animate-spin" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 py-0.5 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[7px] font-bold text-white/20 uppercase", children: "Generiere..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-[9px] text-white/40 line-clamp-2 leading-tight mt-1", children: [
+              '"',
+              gen.prompt,
+              '"'
+            ] })
           ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: (e) => {
-          e.stopPropagation();
-          onDelete(gen.id);
-        }, className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 hover:text-white rounded-md transition-all", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
-      ]
-    },
-    gen.id
-  )) });
+        ]
+      },
+      gen.id
+    )),
+    visibleGroups.map((group) => {
+      const rep = group.representative;
+      const isActive = group.items.some((i) => i.id === currentResultId);
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          className: `flex gap-3 p-2 bg-white/5 border rounded-2xl cursor-pointer group transition-all relative ${isActive ? "border-white/40 bg-white/10 shadow-lg" : "border-white/5 hover:border-white/20"}`,
+          onClick: () => onSelect(rep),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-black shrink-0 border border-white/5 relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: rep.base64 ? rep.base64.startsWith("data:") ? rep.base64 : `data:image/png;base64,${rep.base64}` : "", className: "w-full h-full object-cover", alt: "Thumbnail" }),
+              group.items.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute bottom-0.5 right-0.5 px-1 bg-black/80 rounded text-[7px] font-bold text-white/70", children: group.items.length })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 py-0.5 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[7px] font-bold text-white/20 uppercase whitespace-nowrap", children: formatFriendlyTimestamp(rep.timestamp) }),
+                rep.model && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[7px] font-bold text-white/40 bg-white/5 px-1 rounded uppercase truncate max-w-[60px]", children: rep.model })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-[9px] text-white/60 line-clamp-2 leading-tight", children: [
+                '"',
+                rep.prompt,
+                '"'
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: (e) => {
+              e.stopPropagation();
+              onDelete(rep.id);
+            }, className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 hover:text-white rounded-md transition-all", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
+          ]
+        },
+        rep.id
+      );
+    }),
+    visibleCount < groups.length && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", onClick: () => setVisibleCount((c) => c + PAGE_SIZE), className: "w-full py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-[10px] font-bold uppercase text-white/60 hover:text-white transition-all", children: [
+      groups.length - visibleCount,
+      " weitere laden"
+    ] })
+  ] });
 };
 
 // src/components/InspectPanel.tsx
-var import_react5 = require("react");
-var import_react6 = require("motion/react");
+var import_react6 = require("react");
+var import_react7 = require("motion/react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagToggle }) => {
-  const currentIndex = (0, import_react5.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
+  const currentIndex = (0, import_react6.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
   if (!currentResult) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center justify-center py-20 text-center gap-4 opacity-10", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-symbols-outlined text-[64px]", children: "info" }),
@@ -1084,7 +1151,7 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
     ] });
   }
   const fullDateStr = new Date(currentResult.timestamp).toLocaleString([], { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react6.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 flex flex-col overflow-hidden", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react7.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 flex flex-col overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-shrink-0 border-b border-white/5 bg-black/20 py-3 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex gap-2 overflow-x-auto no-scrollbar pb-1", children: history.map((gen) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: () => onSelect(gen), className: `w-10 h-10 rounded-lg overflow-hidden border shrink-0 transition-all ${currentResult.id === gen.id ? "border-white scale-105 shadow-lg" : "border-white/5 opacity-40 hover:opacity-100"}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: gen.base64 ? gen.base64.startsWith("data:") ? gen.base64 : `data:image/png;base64,${gen.base64}` : "", className: "w-full h-full object-cover", alt: "Thumbnail" }) }, gen.id)) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 overflow-y-auto p-4 flex flex-col gap-6 dark-scrollbar pb-10", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SectionLabel, { children: "Vorschau" }),
@@ -1137,8 +1204,8 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
 };
 
 // src/components/SetupPanel.tsx
-var import_react7 = require("react");
-var import_react8 = require("motion/react");
+var import_react8 = require("react");
+var import_react9 = require("motion/react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var PRESET_URLS = [
   "https://jsonplaceholder.typicode.com/todos/1",
@@ -1146,12 +1213,12 @@ var PRESET_URLS = [
   "https://esm.sh/@rslsp1/fa-app-tools@latest"
 ];
 var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
-  const workspaceInputRef = (0, import_react7.useRef)(null);
-  const [urlInput, setUrlInput] = (0, import_react7.useState)("");
-  const [tokenInput, setTokenInput] = (0, import_react7.useState)("");
-  const [testStatus, setTestStatus] = (0, import_react7.useState)("idle");
-  const [result, setResult] = (0, import_react7.useState)(null);
-  const [fetchError, setFetchError] = (0, import_react7.useState)(null);
+  const workspaceInputRef = (0, import_react8.useRef)(null);
+  const [urlInput, setUrlInput] = (0, import_react8.useState)("");
+  const [tokenInput, setTokenInput] = (0, import_react8.useState)("");
+  const [testStatus, setTestStatus] = (0, import_react8.useState)("idle");
+  const [result, setResult] = (0, import_react8.useState)(null);
+  const [fetchError, setFetchError] = (0, import_react8.useState)(null);
   const runTest = async (url) => {
     if (!url.trim()) return;
     setTestStatus("loading");
@@ -1191,7 +1258,7 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
       setTestStatus("error");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react8.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-6 flex flex-col gap-10 overflow-y-auto", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react9.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-6 flex flex-col gap-10 overflow-y-auto", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionLabel, { children: "Workspace Management" }),
@@ -1314,18 +1381,25 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
 };
 
 // src/components/MediaLibrary.tsx
-var import_react9 = require("motion/react");
+var import_react10 = require("react");
+var import_react11 = require("motion/react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var PAGE_SIZE2 = 20;
 var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload, onGenerateReference }) => {
+  const [visibleCount, setVisibleCount] = (0, import_react10.useState)(PAGE_SIZE2);
   const selectedCount = items.filter((i) => i.selectedForExport).length;
+  const groups = groupByPrompt(items);
+  const visibleGroups = groups.slice(0, visibleCount);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-4 border-b border-white/5 gap-3 bg-black/20", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[10px] font-bold text-white uppercase tracking-widest", children: "Projekt Galerie" }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[9px] text-white/30 uppercase tracking-tighter", children: [
+            visibleCount < groups.length ? `${visibleCount} / ${groups.length}` : groups.length,
+            " Gruppen \xB7 ",
             items.length,
-            " Assets geladen"
+            " Assets"
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", onClick: () => onImport?.(), className: "flex items-center gap-1.5 px-3 py-1.5 bg-blue-500 hover:bg-blue-400 text-white rounded-lg text-[10px] font-bold uppercase transition-all shadow-[0_0_15px_rgba(59,130,246,0.3)]", children: [
@@ -1333,7 +1407,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
           "Laden"
         ] })
       ] }),
-      selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react9.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, className: "flex items-center justify-between bg-blue-500/10 border border-blue-500/20 p-2 rounded-xl", children: [
+      selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react11.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, className: "flex items-center justify-between bg-blue-500/10 border border-blue-500/20 p-2 rounded-xl", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[9px] font-bold uppercase text-blue-400 ml-1", children: [
           selectedCount,
           " ausgew\xE4hlt"
@@ -1344,44 +1418,60 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 overflow-y-auto p-4 dark-scrollbar", children: items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center justify-center py-20 text-center gap-4 opacity-10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 overflow-y-auto p-4 dark-scrollbar", children: groups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center justify-center py-20 text-center gap-4 opacity-10", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[64px]", children: "photo_library" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[12px] font-bold uppercase tracking-widest", children: "Keine Medien" }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[10px] italic", children: "Importiere Assets aus deinem Projekt." })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react9.motion.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: `relative aspect-square group/item rounded-xl overflow-hidden border transition-all bg-white/5 cursor-pointer shadow-lg ${item.selectedForExport ? "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.2)]" : "border-white/10 opacity-70 hover:opacity-100"}`, onClick: () => onSelect?.(item), children: [
-      item.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full h-full flex flex-col items-center justify-center gap-2 bg-black/40", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-6 h-6 border-t-2 border-white rounded-full animate-spin" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[8px] text-white/40 uppercase font-bold tracking-widest", children: "Generiere\u2026" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: item.base64 ? item.base64.startsWith("data:") ? item.base64 : `data:image/png;base64,${item.base64}` : "", className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: item.prompt }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: `absolute top-2 left-2 w-5 h-5 rounded-md border flex items-center justify-center transition-all z-30 pointer-events-auto ${item.selectedForExport ? "bg-blue-500 border-blue-400" : "bg-black/60 border-white/20"}`, onClick: (e) => {
-        e.stopPropagation();
-        onToggleSelection?.(item.id);
-      }, children: item.selectedForExport && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px] text-white", children: "check" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover/item:opacity-100 transition-opacity flex flex-col justify-end p-2 gap-2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[8px] font-bold text-white/80 truncate max-w-[80px] uppercase tracking-tighter", children: item.prompt || "Importiert" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
-          onGenerateReference && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: (e) => {
-            e.stopPropagation();
-            onGenerateReference(item);
-          }, className: "w-6 h-6 flex items-center justify-center bg-blue-500/20 text-blue-400 hover:bg-blue-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: (e) => {
-            e.stopPropagation();
-            onDelete?.(item.id);
-          }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute top-1 right-1 px-1.5 py-0.5 bg-black/60 backdrop-blur-md rounded text-[7px] font-bold text-white/60 uppercase tracking-tight", children: item.type === "import" ? "Library" : "Gen" })
-    ] }, item.id)) }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-cols-2 gap-3 pb-10", children: [
+      visibleGroups.map((group) => {
+        const rep = group.representative;
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          import_react11.motion.div,
+          {
+            initial: { opacity: 0, scale: 0.9 },
+            animate: { opacity: 1, scale: 1 },
+            className: "relative aspect-square group/item rounded-xl overflow-hidden border border-white/10 opacity-70 hover:opacity-100 transition-all bg-white/5 cursor-pointer shadow-lg",
+            onClick: () => onSelect(rep),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: rep.base64 ? rep.base64.startsWith("data:") ? rep.base64 : `data:image/png;base64,${rep.base64}` : "", className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: rep.prompt }),
+              group.items.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "absolute top-1.5 left-1.5 px-1.5 py-0.5 bg-black/70 backdrop-blur-md rounded text-[8px] font-bold text-white/80 flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[10px]", children: "photo_library" }),
+                group.items.length
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover/item:opacity-100 transition-opacity flex flex-col justify-end p-2 gap-2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[8px] font-bold text-white/80 truncate max-w-[80px] uppercase tracking-tighter", children: rep.prompt || "Importiert" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+                  onGenerateReference && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onGenerateReference(rep);
+                  }, className: "w-6 h-6 flex items-center justify-center bg-blue-500/20 text-blue-400 hover:bg-blue-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete(rep.id);
+                  }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute top-1 right-1 px-1.5 py-0.5 bg-black/60 backdrop-blur-md rounded text-[7px] font-bold text-white/60 uppercase tracking-tight", children: rep.type === "import" ? "Library" : "Gen" })
+            ]
+          },
+          rep.id
+        );
+      }),
+      visibleCount < groups.length && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "col-span-2 flex justify-center pt-2 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", onClick: () => setVisibleCount((c) => c + PAGE_SIZE2), className: "px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-[10px] font-bold uppercase text-white/60 hover:text-white transition-all", children: [
+        groups.length - visibleCount,
+        " weitere laden"
+      ] }) })
+    ] }) })
   ] });
 };
 
 // src/components/ListView.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, isActive, isInPath, onFocus, onGenerate, onGenerateBranch, onGenerateSubtree, isGenerating, isCollapsed, toggleCollapse, renderNode, children }) => {
-  const inputRef = (0, import_react10.useRef)(null);
+  const inputRef = (0, import_react12.useRef)(null);
   const hasChildren = children && children.length > 0;
   const handleKeyDown = (e) => {
     if (e.key === "Tab") {
@@ -1409,7 +1499,7 @@ var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNod
       onMoveNode(node.id, "down");
     }
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isActive && inputRef.current) inputRef.current.focus();
   }, [isActive]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col w-full", children: [
@@ -1443,7 +1533,7 @@ var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNod
   ] });
 };
 function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, focusedNodeId, onFocus, activePath, onGenerate, onGenerateBranch, onGenerateSubtree, isGeneratingNodeId }) {
-  const [collapsed, setCollapsed] = (0, import_react10.useState)(/* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
   const toggleCollapse = (id) => {
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -1471,13 +1561,13 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
 }
 
 // src/components/AvatarArchitectApp.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 
 // src/components/PromptTab.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/components/CollapsibleCard.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CollapsibleCard = ({
   title,
@@ -1488,7 +1578,7 @@ var CollapsibleCard = ({
   collapsible = true,
   className = ""
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(defaultOpen);
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(defaultOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `border border-neutral-800 rounded-lg ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
@@ -1535,20 +1625,20 @@ var PromptTab = ({
   onTagUpdate,
   onTagDelete
 }) => {
-  const [selectedLabels, setSelectedLabels] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
-  const [instructions, setInstructions] = (0, import_react12.useState)("");
-  const [rules, setRules] = (0, import_react12.useState)("");
-  const [activeCategory, setActiveCategory] = (0, import_react12.useState)(null);
-  const [copied, setCopied] = (0, import_react12.useState)(false);
-  const imgInputRef = (0, import_react12.useRef)(null);
-  const [addingInCat, setAddingInCat] = (0, import_react12.useState)(null);
-  const [newLabel, setNewLabel] = (0, import_react12.useState)("");
-  const [newValue, setNewValue] = (0, import_react12.useState)("");
-  const [editingTag, setEditingTag] = (0, import_react12.useState)(null);
-  const [editLabel, setEditLabel] = (0, import_react12.useState)("");
-  const [editValue, setEditValue] = (0, import_react12.useState)("");
-  const longPressTimer = (0, import_react12.useRef)(null);
-  const longPressActivated = (0, import_react12.useRef)(false);
+  const [selectedLabels, setSelectedLabels] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
+  const [instructions, setInstructions] = (0, import_react14.useState)("");
+  const [rules, setRules] = (0, import_react14.useState)("");
+  const [activeCategory, setActiveCategory] = (0, import_react14.useState)(null);
+  const [copied, setCopied] = (0, import_react14.useState)(false);
+  const imgInputRef = (0, import_react14.useRef)(null);
+  const [addingInCat, setAddingInCat] = (0, import_react14.useState)(null);
+  const [newLabel, setNewLabel] = (0, import_react14.useState)("");
+  const [newValue, setNewValue] = (0, import_react14.useState)("");
+  const [editingTag, setEditingTag] = (0, import_react14.useState)(null);
+  const [editLabel, setEditLabel] = (0, import_react14.useState)("");
+  const [editValue, setEditValue] = (0, import_react14.useState)("");
+  const longPressTimer = (0, import_react14.useRef)(null);
+  const longPressActivated = (0, import_react14.useRef)(false);
   const toggleTag = (label) => {
     setSelectedLabels((prev) => {
       const next = new Set(prev);
@@ -1995,7 +2085,7 @@ var PromptTab = ({
 };
 
 // src/components/ProjectSyncTab.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 init_hfStateService();
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var ProjectSyncTab = ({
@@ -2016,14 +2106,14 @@ var ProjectSyncTab = ({
   onProjectExportBase64,
   onHfInitialSync
 }) => {
-  const projectInputRef = (0, import_react13.useRef)(null);
-  const workspaceInputRef = (0, import_react13.useRef)(null);
-  const [saveName, setSaveName] = (0, import_react13.useState)("");
-  const [isSaving, setIsSaving] = (0, import_react13.useState)(false);
-  const [isExporting, setIsExporting] = (0, import_react13.useState)(false);
-  const [syncState, setSyncState] = (0, import_react13.useState)("idle");
-  const [syncDiff, setSyncDiff] = (0, import_react13.useState)(null);
-  const [selectedLocalIds, setSelectedLocalIds] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
+  const projectInputRef = (0, import_react15.useRef)(null);
+  const workspaceInputRef = (0, import_react15.useRef)(null);
+  const [saveName, setSaveName] = (0, import_react15.useState)("");
+  const [isSaving, setIsSaving] = (0, import_react15.useState)(false);
+  const [isExporting, setIsExporting] = (0, import_react15.useState)(false);
+  const [syncState, setSyncState] = (0, import_react15.useState)("idle");
+  const [syncDiff, setSyncDiff] = (0, import_react15.useState)(null);
+  const [selectedLocalIds, setSelectedLocalIds] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
   const handleExport = async () => {
     if (!onProjectExport) return;
     setIsExporting(true);
@@ -2069,13 +2159,13 @@ var ProjectSyncTab = ({
     });
   };
   const isWorking = projectActionState === "working" || projectActionState === "working-full";
-  const [hfProjects, setHfProjects] = (0, import_react13.useState)([]);
-  const [hfLoading, setHfLoading] = (0, import_react13.useState)(false);
-  const [hfSaving, setHfSaving] = (0, import_react13.useState)(false);
-  const [hfError, setHfError] = (0, import_react13.useState)(null);
-  const [hfSaveName, setHfSaveName] = (0, import_react13.useState)("");
-  const [hfSyncProgress, setHfSyncProgress] = (0, import_react13.useState)(null);
-  const [hfSyncing, setHfSyncing] = (0, import_react13.useState)(false);
+  const [hfProjects, setHfProjects] = (0, import_react15.useState)([]);
+  const [hfLoading, setHfLoading] = (0, import_react15.useState)(false);
+  const [hfSaving, setHfSaving] = (0, import_react15.useState)(false);
+  const [hfError, setHfError] = (0, import_react15.useState)(null);
+  const [hfSaveName, setHfSaveName] = (0, import_react15.useState)("");
+  const [hfSyncProgress, setHfSyncProgress] = (0, import_react15.useState)(null);
+  const [hfSyncing, setHfSyncing] = (0, import_react15.useState)(false);
   const loadHfProjects = async (token) => {
     setHfLoading(true);
     setHfError(null);
@@ -2087,7 +2177,7 @@ var ProjectSyncTab = ({
       setHfLoading(false);
     }
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (hfToken) loadHfProjects(hfToken);
   }, [hfToken]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-0 overflow-y-auto dark-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "p-6 flex flex-col gap-8", children: [
@@ -2501,7 +2591,7 @@ function toPromptImages(images) {
 init_hfStateService();
 
 // src/hooks/useHFState.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 init_hfStateService();
 
 // src/lib/hfReducer.ts
@@ -2523,6 +2613,13 @@ function applyEvent(state, event) {
       const newAll = tags.all.some((t) => t.value === p.value && t.category === p.category) ? tags.all.map((t) => t.value === p.value && t.category === p.category ? { ...t, ...updated, category: p.category } : t) : [...tags.all, { ...updated, category: p.category }];
       return { ...state, tags: { by_category: { ...tags.by_category, [p.category]: newCat }, all: newAll } };
     }
+    case "thumb_added": {
+      const p = event.payload;
+      return {
+        ...state,
+        metadata: state.metadata.map((m) => m.id === p.id ? { ...m, hasThumb: true } : m)
+      };
+    }
     case "metadata_updated": {
       const p = event.payload;
       return {
@@ -2530,6 +2627,13 @@ function applyEvent(state, event) {
         metadata: state.metadata.map((m) => m.id === p.id ? { ...m, ...p.delta } : m)
       };
     }
+    case "title_set": {
+      const p = event.payload;
+      return {
+        ...state,
+        metadata: state.metadata.map((m) => m.id === p.id ? { ...m, titleTs: event.ts } : m)
+      };
+    }
     default:
       return state;
   }
@@ -2620,18 +2724,18 @@ function writeOfflineBuffer(events) {
   }
 }
 function useHFState(token, namespace) {
-  const [state, setState] = (0, import_react14.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
-  const [error, setError] = (0, import_react14.useState)(null);
-  const [eventCount, setEventCount] = (0, import_react14.useState)(0);
-  const [localOnlyCount, setLocalOnlyCount] = (0, import_react14.useState)(0);
-  const [forks, setForks] = (0, import_react14.useState)([]);
-  const [pendingBufferCount, setPendingBufferCount] = (0, import_react14.useState)(readOfflineBuffer().length);
-  const [lastEventTs, setLastEventTs] = (0, import_react14.useState)(0);
-  const [hasStateZip, setHasStateZip] = (0, import_react14.useState)(false);
-  const knownEventPaths = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
-  const allEventsRef = (0, import_react14.useRef)([]);
-  const applyNewEvents = (0, import_react14.useCallback)((snapshot, newEvents) => {
+  const [state, setState] = (0, import_react16.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react16.useState)(false);
+  const [error, setError] = (0, import_react16.useState)(null);
+  const [eventCount, setEventCount] = (0, import_react16.useState)(0);
+  const [localOnlyCount, setLocalOnlyCount] = (0, import_react16.useState)(0);
+  const [forks, setForks] = (0, import_react16.useState)([]);
+  const [pendingBufferCount, setPendingBufferCount] = (0, import_react16.useState)(readOfflineBuffer().length);
+  const [lastEventTs, setLastEventTs] = (0, import_react16.useState)(0);
+  const [hasStateZip, setHasStateZip] = (0, import_react16.useState)(false);
+  const knownEventPaths = (0, import_react16.useRef)(/* @__PURE__ */ new Set());
+  const allEventsRef = (0, import_react16.useRef)([]);
+  const applyNewEvents = (0, import_react16.useCallback)((snapshot, newEvents) => {
     if (!newEvents.length && allEventsRef.current.length === 0) {
       setEventCount(0);
       return snapshot;
@@ -2645,7 +2749,7 @@ function useHFState(token, namespace) {
     if (afterConsolidation.length) setLastEventTs(Math.max(...afterConsolidation.map((e) => e.ts)));
     return applyEvents(snapshot, afterConsolidation);
   }, []);
-  const loadFull = (0, import_react14.useCallback)(async () => {
+  const loadFull = (0, import_react16.useCallback)(async () => {
     if (!token || !namespace) return;
     setIsLoading(true);
     setError(null);
@@ -2692,7 +2796,7 @@ function useHFState(token, namespace) {
       setIsLoading(false);
     }
   }, [token, namespace, applyNewEvents]);
-  const pollNew = (0, import_react14.useCallback)(async () => {
+  const pollNew = (0, import_react16.useCallback)(async () => {
     if (!token || !namespace || !state) return;
     try {
       const events = await loadPendingEvents(namespace, token, state.meta.consolidatedAt);
@@ -2706,15 +2810,15 @@ function useHFState(token, namespace) {
     } catch {
     }
   }, [token, namespace, state, applyNewEvents]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (token && namespace) loadFull();
   }, [token, namespace]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!token || !namespace) return;
     const id = setInterval(pollNew, POLL_INTERVAL_MS);
     return () => clearInterval(id);
   }, [token, namespace, pollNew]);
-  const writeEvent = (0, import_react14.useCallback)(async (type, payload) => {
+  const writeEvent = (0, import_react16.useCallback)(async (type, payload) => {
     const prevTs = lastEventTs ? [lastEventTs] : [state?.meta.consolidatedAt ?? 0];
     console.log("[HF] writeEvent called:", { type, namespace, tokenOk: !!token, prevTs });
     await pollNew();
@@ -2764,13 +2868,13 @@ function useHFState(token, namespace) {
 }
 
 // src/components/labs/LabsTab.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/components/labs/LabRemix.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/components/labs/LabImagePicker.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var LabImagePicker = ({
   availableItems,
@@ -2779,8 +2883,8 @@ var LabImagePicker = ({
   onClose,
   title = "Bild w\xE4hlen"
 }) => {
-  const [search, setSearch] = (0, import_react15.useState)("");
-  const [drillItem, setDrillItem] = (0, import_react15.useState)(null);
+  const [search, setSearch] = (0, import_react17.useState)("");
+  const [drillItem, setDrillItem] = (0, import_react17.useState)(null);
   const filtered = availableItems.filter(
     (item) => !search || item.prompt.toLowerCase().includes(search.toLowerCase())
   );
@@ -2882,13 +2986,13 @@ var LabImagePicker = ({
 // src/components/labs/LabRemix.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var LabRemix = ({ services, onResult }) => {
-  const [showPicker, setShowPicker] = (0, import_react16.useState)(false);
-  const [selected, setSelected] = (0, import_react16.useState)(null);
-  const [instruction, setInstruction] = (0, import_react16.useState)("");
-  const [generatedPrompt, setGeneratedPrompt] = (0, import_react16.useState)("");
-  const [resultImage, setResultImage] = (0, import_react16.useState)(null);
-  const [isGeneratingPrompt, setIsGeneratingPrompt] = (0, import_react16.useState)(false);
-  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react16.useState)(false);
+  const [showPicker, setShowPicker] = (0, import_react18.useState)(false);
+  const [selected, setSelected] = (0, import_react18.useState)(null);
+  const [instruction, setInstruction] = (0, import_react18.useState)("");
+  const [generatedPrompt, setGeneratedPrompt] = (0, import_react18.useState)("");
+  const [resultImage, setResultImage] = (0, import_react18.useState)(null);
+  const [isGeneratingPrompt, setIsGeneratingPrompt] = (0, import_react18.useState)(false);
+  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react18.useState)(false);
   const handleSelectImage = (item, frame) => {
     services.onItemUsed(item);
     setSelected({
@@ -3071,16 +3175,16 @@ var LabRemix = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabBlend.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var LabBlend = ({ services, onResult }) => {
-  const [showPickerFor, setShowPickerFor] = (0, import_react17.useState)(null);
-  const [selectedImages, setSelectedImages] = (0, import_react17.useState)([]);
-  const [instruction, setInstruction] = (0, import_react17.useState)("");
-  const [generatedPrompt, setGeneratedPrompt] = (0, import_react17.useState)("");
-  const [resultImage, setResultImage] = (0, import_react17.useState)(null);
-  const [isGeneratingPrompt, setIsGeneratingPrompt] = (0, import_react17.useState)(false);
-  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react17.useState)(false);
+  const [showPickerFor, setShowPickerFor] = (0, import_react19.useState)(null);
+  const [selectedImages, setSelectedImages] = (0, import_react19.useState)([]);
+  const [instruction, setInstruction] = (0, import_react19.useState)("");
+  const [generatedPrompt, setGeneratedPrompt] = (0, import_react19.useState)("");
+  const [resultImage, setResultImage] = (0, import_react19.useState)(null);
+  const [isGeneratingPrompt, setIsGeneratingPrompt] = (0, import_react19.useState)(false);
+  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react19.useState)(false);
   const handleSelectImage = (index, item, frame) => {
     services.onItemUsed(item);
     const newImg = {
@@ -3267,17 +3371,17 @@ var LabBlend = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabCompare.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var LabCompare = ({ services, onResult }) => {
-  const [showPickerFor, setShowPickerFor] = (0, import_react18.useState)(null);
-  const [selectedImages, setSelectedImages] = (0, import_react18.useState)([]);
-  const [instruction, setInstruction] = (0, import_react18.useState)("");
-  const [analysis, setAnalysis] = (0, import_react18.useState)("");
-  const [generatedPrompt, setGeneratedPrompt] = (0, import_react18.useState)("");
-  const [resultImage, setResultImage] = (0, import_react18.useState)(null);
-  const [isAnalyzing, setIsAnalyzing] = (0, import_react18.useState)(false);
-  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react18.useState)(false);
+  const [showPickerFor, setShowPickerFor] = (0, import_react20.useState)(null);
+  const [selectedImages, setSelectedImages] = (0, import_react20.useState)([]);
+  const [instruction, setInstruction] = (0, import_react20.useState)("");
+  const [analysis, setAnalysis] = (0, import_react20.useState)("");
+  const [generatedPrompt, setGeneratedPrompt] = (0, import_react20.useState)("");
+  const [resultImage, setResultImage] = (0, import_react20.useState)(null);
+  const [isAnalyzing, setIsAnalyzing] = (0, import_react20.useState)(false);
+  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react20.useState)(false);
   const handleSelectImage = (index, item, frame) => {
     services.onItemUsed(item);
     const newImg = {
@@ -3440,14 +3544,14 @@ var LabCompare = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabLoop.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var LabLoop = ({ services, onResult }) => {
-  const [rounds, setRounds] = (0, import_react19.useState)([]);
-  const [currentInstruction, setCurrentInstruction] = (0, import_react19.useState)("");
-  const [showPickerForRound, setShowPickerForRound] = (0, import_react19.useState)(null);
-  const [pendingImages, setPendingImages] = (0, import_react19.useState)([]);
-  const [isGenerating, setIsGenerating] = (0, import_react19.useState)(false);
+  const [rounds, setRounds] = (0, import_react21.useState)([]);
+  const [currentInstruction, setCurrentInstruction] = (0, import_react21.useState)("");
+  const [showPickerForRound, setShowPickerForRound] = (0, import_react21.useState)(null);
+  const [pendingImages, setPendingImages] = (0, import_react21.useState)([]);
+  const [isGenerating, setIsGenerating] = (0, import_react21.useState)(false);
   const currentPrompt = rounds.length > 0 ? rounds[rounds.length - 1].prompt : "";
   const handleAddImage = (item, frame) => {
     services.onItemUsed(item);
@@ -3603,7 +3707,7 @@ var LabLoop = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabFrameExtractor.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var formatTime = (s) => {
   const m = Math.floor(s / 60);
@@ -3617,15 +3721,15 @@ var LabFrameExtractor = ({
   onResult,
   resolveVideoUrl
 }) => {
-  const videoRef = (0, import_react20.useRef)(null);
-  const canvasRef = (0, import_react20.useRef)(null);
-  const cancelledRef = (0, import_react20.useRef)(false);
-  const [selectedItem, setSelectedItem] = (0, import_react20.useState)(null);
-  const [videoSrc, setVideoSrc] = (0, import_react20.useState)(null);
-  const [videoReady, setVideoReady] = (0, import_react20.useState)(false);
-  const [frames, setFrames] = (0, import_react20.useState)([]);
-  const [isExtracting, setIsExtracting] = (0, import_react20.useState)(false);
-  const [intervalSec, setIntervalSec] = (0, import_react20.useState)("1");
+  const videoRef = (0, import_react22.useRef)(null);
+  const canvasRef = (0, import_react22.useRef)(null);
+  const cancelledRef = (0, import_react22.useRef)(false);
+  const [selectedItem, setSelectedItem] = (0, import_react22.useState)(null);
+  const [videoSrc, setVideoSrc] = (0, import_react22.useState)(null);
+  const [videoReady, setVideoReady] = (0, import_react22.useState)(false);
+  const [frames, setFrames] = (0, import_react22.useState)([]);
+  const [isExtracting, setIsExtracting] = (0, import_react22.useState)(false);
+  const [intervalSec, setIntervalSec] = (0, import_react22.useState)("1");
   const handleVideoSelect = (item) => {
     const mediaId = item.frames[0]?.mediaId;
     if (!mediaId) return;
@@ -3635,7 +3739,7 @@ var LabFrameExtractor = ({
     setVideoReady(false);
     cancelledRef.current = false;
   };
-  const captureAt = (0, import_react20.useCallback)(
+  const captureAt = (0, import_react22.useCallback)(
     (t, label) => new Promise((resolve) => {
       const video = videoRef.current;
       const canvas = canvasRef.current;
@@ -3862,7 +3966,7 @@ var BASE_TABS = [
 ];
 var FRAMES_TAB = { key: "frames", label: "Frames", icon: "crop_original" };
 var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
-  const [activeTab, setActiveTab] = (0, import_react21.useState)("remix");
+  const [activeTab, setActiveTab] = (0, import_react23.useState)("remix");
   const showFrames = !!(videoItems && resolveVideoUrl);
   const tabs = showFrames ? [...BASE_TABS, FRAMES_TAB] : BASE_TABS;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col h-full overflow-hidden", children: [
@@ -3896,19 +4000,19 @@ var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
 };
 
 // src/components/TagManagerPanel.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete, onTagReorder, onTagMove }) {
   const categories = Object.keys(workspaceTags.by_category).filter(
     (cat) => (workspaceTags.by_category[cat] || []).some((t) => !t.is_deleted)
   );
-  const [selectedCategory, setSelectedCategory] = (0, import_react22.useState)(categories[0] || "");
+  const [selectedCategory, setSelectedCategory] = (0, import_react24.useState)(categories[0] || "");
   const effectiveCategory = categories.includes(selectedCategory) ? selectedCategory : categories[0] || "";
-  const [editingLabel, setEditingLabel] = (0, import_react22.useState)(null);
-  const [editState, setEditState] = (0, import_react22.useState)({ label: "", value: "" });
-  const [newTag, setNewTag] = (0, import_react22.useState)({ label: "", value: "" });
-  const [movingLabel, setMovingLabel] = (0, import_react22.useState)(null);
-  const [moveTarget, setMoveTarget] = (0, import_react22.useState)("");
+  const [editingLabel, setEditingLabel] = (0, import_react24.useState)(null);
+  const [editState, setEditState] = (0, import_react24.useState)({ label: "", value: "" });
+  const [newTag, setNewTag] = (0, import_react24.useState)({ label: "", value: "" });
+  const [movingLabel, setMovingLabel] = (0, import_react24.useState)(null);
+  const [moveTarget, setMoveTarget] = (0, import_react24.useState)("");
   const tags = (workspaceTags.by_category[effectiveCategory] || []).filter((t) => !t.is_deleted);
   const otherCategories = categories.filter((c) => c !== effectiveCategory);
   const startEdit = (tag) => {
@@ -4104,7 +4208,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
 }
 
 // src/components/HFTestTab.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var HF_BASE2 = "https://huggingface.co";
 var HF_REPO2 = "RolandSch/fa-app-state";
@@ -4297,7 +4401,7 @@ function tryFmt(s) {
   }
 }
 function CopyBtn({ text }) {
-  const [done, setDone] = (0, import_react23.useState)(false);
+  const [done, setDone] = (0, import_react25.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "button",
     {
@@ -4468,10 +4572,10 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
     ] })
   ] });
 }
-function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEventKeys = /* @__PURE__ */ new Set(), imageUploadStatus = /* @__PURE__ */ new Map() }) {
-  const [selected, setSelected] = (0, import_react23.useState)(null);
-  const [results, setResults] = (0, import_react23.useState)({});
-  const [expanded, setExpanded] = (0, import_react23.useState)({});
+function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEventKeys = /* @__PURE__ */ new Set(), imageUploadStatus = /* @__PURE__ */ new Map(), missingImages = [] }) {
+  const [selected, setSelected] = (0, import_react25.useState)(null);
+  const [results, setResults] = (0, import_react25.useState)({});
+  const [expanded, setExpanded] = (0, import_react25.useState)({});
   const withResults = galleryItems.filter((g) => g.base64 && g.status === "done");
   const setRunning = (id) => setResults((r) => ({ ...r, [id]: { status: "running", steps: [], totalMs: 0 } }));
   const setDone = (id, steps, t0) => {
@@ -4538,6 +4642,33 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
         )
       }
     ) }),
+    missingImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      CollapsibleCard,
+      {
+        title: `Fehlende Bilder auf HF (${missingImages.length})`,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "broken_image" }),
+        defaultOpen: false,
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "8px 10px 4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.4)", marginBottom: 8 }, children: "Metadata-Eintr\xE4ge ohne Bild auf HuggingFace \u2014 Orphaned entries." }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: 8, marginBottom: 8, fontSize: 11, color: "rgba(255,255,255,0.5)" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
+              "UUID (Flow-App): ",
+              missingImages.filter((e) => !e.filename).length
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\xB7" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
+              "Filename (Server-Upload): ",
+              missingImages.filter((e) => !!e.filename).length
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { maxHeight: 300, overflowY: "auto", fontFamily: "monospace", fontSize: 10 }, children: missingImages.map((e) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "3px 0", borderBottom: "1px solid rgba(255,255,255,0.04)", color: "rgba(255,255,255,0.5)", display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { color: e.filename ? "#fb923c" : "#60a5fa", minWidth: 60 }, children: e.filename ? "filename" : "uuid" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: e.filename ?? e.id }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { color: "rgba(255,255,255,0.3)" }, children: new Date(e.timestamp).toLocaleDateString("de") })
+          ] }, e.id)) })
+        ] })
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       CollapsibleCard,
       {
@@ -4642,77 +4773,44 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
 }
 
 // src/components/ServerTab.tsx
-var import_react24 = require("react");
-
-// src/lib/faHfServerService.ts
-init_hfStateService();
-var FA_APP_SPACE = "https://rolandsch-fa-app.hf.space";
-async function request(method, path, env = "prod", body, tokenOverride) {
-  const token = tokenOverride || getHFToken();
-  if (!token) throw new Error("fa-app gateway: kein HF Token gesetzt");
-  const res = await fetch(`${FA_APP_SPACE}/${path.replace(/^\//, "")}`, {
-    method,
-    headers: {
-      "Authorization": `Bearer ${token}`,
-      "X-Env": env,
-      ...body !== void 0 ? { "Content-Type": "application/json" } : {}
-    },
-    ...body !== void 0 ? { body: JSON.stringify(body) } : {}
-  });
-  if (!res.ok) {
-    const text = await res.text().catch(() => "");
-    throw new Error(`fa-app gateway ${method} /${path} [${env}] \u2192 ${res.status}: ${text.slice(0, 200)}`);
-  }
-  return res.json();
-}
-function faServerGet(path, env = "prod", token) {
-  return request("GET", path, env, void 0, token);
-}
-function faServerPost(path, body, env = "prod", token) {
-  return request("POST", path, env, body, token);
-}
-function faServerPut(path, body, env = "prod", token) {
-  return request("PUT", path, env, body, token);
-}
-function faServerDelete(path, env = "prod", token) {
-  return request("DELETE", path, env, void 0, token);
-}
-
-// src/components/ServerTab.tsx
-init_hfStateService();
+var import_react26 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function StarRating({ rating = 0 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-[2px]", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `material-symbols-outlined text-[12px] ${i <= rating ? "text-yellow-400" : "text-white/15"}`, children: "star" }, i)) });
 }
-function ServerTab({ hfToken }) {
-  const token = hfToken || getHFToken() || "";
-  const hasToken = !!token;
-  const [env, setEnv] = (0, import_react24.useState)("prod");
-  const [step, setStep] = (0, import_react24.useState)("user");
-  const [users, setUsers] = (0, import_react24.useState)([]);
-  const [usersLoading, setUsersLoading] = (0, import_react24.useState)(false);
-  const [usersError, setUsersError] = (0, import_react24.useState)(null);
-  const [selectedUser, setSelectedUser] = (0, import_react24.useState)(null);
-  const [contexts, setContexts] = (0, import_react24.useState)([]);
-  const [contextsLoading, setContextsLoading] = (0, import_react24.useState)(false);
-  const [selectedContext, setSelectedContext] = (0, import_react24.useState)(null);
-  const [tags, setTags] = (0, import_react24.useState)([]);
-  const [items, setItems] = (0, import_react24.useState)([]);
-  const [libLoading, setLibLoading] = (0, import_react24.useState)(false);
-  const [libError, setLibError] = (0, import_react24.useState)(null);
-  const [activeTag, setActiveTag] = (0, import_react24.useState)(null);
-  const [preview, setPreview] = (0, import_react24.useState)(null);
-  (0, import_react24.useEffect)(() => {
-    if (!hasToken) return;
+async function serverGet(baseUrl, path) {
+  const url = `${baseUrl.replace(/\/$/, "")}${path}`;
+  const res = await fetch(url, { credentials: "include" });
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+  const json = await res.json();
+  return json && typeof json === "object" && "data" in json ? json.data : json;
+}
+function ServerTab({ serverBaseUrl }) {
+  const [step, setStep] = (0, import_react26.useState)("user");
+  const [users, setUsers] = (0, import_react26.useState)([]);
+  const [usersLoading, setUsersLoading] = (0, import_react26.useState)(false);
+  const [usersError, setUsersError] = (0, import_react26.useState)(null);
+  const [selectedUser, setSelectedUser] = (0, import_react26.useState)(null);
+  const [contexts, setContexts] = (0, import_react26.useState)([]);
+  const [contextsLoading, setContextsLoading] = (0, import_react26.useState)(false);
+  const [selectedContext, setSelectedContext] = (0, import_react26.useState)(null);
+  const [tags, setTags] = (0, import_react26.useState)([]);
+  const [items, setItems] = (0, import_react26.useState)([]);
+  const [libLoading, setLibLoading] = (0, import_react26.useState)(false);
+  const [libError, setLibError] = (0, import_react26.useState)(null);
+  const [activeTag, setActiveTag] = (0, import_react26.useState)(null);
+  const [preview, setPreview] = (0, import_react26.useState)(null);
+  (0, import_react26.useEffect)(() => {
+    if (!serverBaseUrl) return;
     setUsersLoading(true);
     setUsersError(null);
-    faServerGet("/api/v2/users", env, token).then(setUsers).catch((e) => setUsersError(String(e))).finally(() => setUsersLoading(false));
-  }, [env, hasToken]);
+    serverGet(serverBaseUrl, "/api/v2/users").then(setUsers).catch((e) => setUsersError(String(e))).finally(() => setUsersLoading(false));
+  }, [serverBaseUrl]);
   const selectUser = async (user) => {
     setSelectedUser(user);
     setContextsLoading(true);
     try {
-      const data = await faServerGet(`/api2/contexts?user_id=${user.id}`, env, token);
+      const data = await serverGet(serverBaseUrl, `/api2/contexts?user_id=${user.id}`);
       if (data.length === 1) {
         await loadLibrary(user, data[0]);
       } else {
@@ -4732,12 +4830,11 @@ function ServerTab({ hfToken }) {
     setLibError(null);
     try {
       const [tagsRes, libRes] = await Promise.all([
-        faServerGet(`/api2/tags?user_id=${user.id}`, env, token),
-        faServerGet(`/api2/user-library?user_id=${user.id}&context_id=${ctx.id}&limit=100`, env, token)
+        serverGet(serverBaseUrl, `/api2/tags?user_id=${user.id}`),
+        serverGet(serverBaseUrl, `/api/storage/${user.id}/library`)
       ]);
       setTags(Array.isArray(tagsRes) ? tagsRes : []);
-      const raw = Array.isArray(libRes) ? libRes : libRes.data ?? [];
-      setItems(raw);
+      setItems(Array.isArray(libRes) ? libRes : []);
     } catch (e) {
       setLibError(String(e));
     } finally {
@@ -4756,13 +4853,7 @@ function ServerTab({ hfToken }) {
     setLibError(null);
   };
   const filteredItems = activeTag ? items.filter((item) => item.tags?.some((t) => t.l === activeTag)) : items;
-  if (!hasToken) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center h-full p-6", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "text-white/30 text-[12px] text-center", children: [
-      "Kein HF Token gesetzt.",
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("br", {}),
-      "Bitte zuerst im Setup-Tab einrichten."
-    ] }) });
-  }
+  if (!serverBaseUrl) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-white/8", children: [
       step !== "user" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: reset, className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "arrow_back" }) }),
@@ -4770,16 +4861,7 @@ function ServerTab({ hfToken }) {
         step === "user" && "Server Browser",
         step === "context" && `${selectedUser?.username} \u2014 Kontext w\xE4hlen`,
         step === "library" && `${selectedUser?.username} / ${selectedContext?.label || selectedContext?.name || selectedContext?.id}`
-      ] }),
-      step === "user" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-1", children: ["prod", "dev"].map((e) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        "button",
-        {
-          onClick: () => setEnv(e),
-          className: `text-[10px] font-bold px-2 py-0.5 rounded-lg transition-colors ${env === e ? "bg-white/15 text-white" : "text-white/30 hover:text-white/60"}`,
-          children: e
-        },
-        e
-      )) })
+      ] })
     ] }),
     step === "user" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-2", children: [
       usersLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-white/30 text-[11px] text-center py-4", children: "Lade User\u2026" }),
@@ -4870,8 +4952,8 @@ function ServerTab({ hfToken }) {
 
 // src/components/AvatarArchitectApp.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
-  (0, import_react25.useEffect)(() => {
+function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, serverBaseUrl, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
+  (0, import_react27.useEffect)(() => {
     const id = "flow-styles";
     if (!document.getElementById(id)) {
       const style = document.createElement("style");
@@ -4880,19 +4962,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       document.head.appendChild(style);
     }
   }, []);
-  const [showStart, setShowStart] = (0, import_react25.useState)(true);
-  const [layoutChoice, setLayoutChoice] = (0, import_react25.useState)(() => {
+  const [showStart, setShowStart] = (0, import_react27.useState)(true);
+  const [layoutChoice, setLayoutChoice] = (0, import_react27.useState)(() => {
     try {
       return localStorage.getItem("aa-layout") || null;
     } catch {
       return null;
     }
   });
-  const [projectLoaded, setProjectLoaded] = (0, import_react25.useState)(false);
-  const [hfToken, setHfToken] = (0, import_react25.useState)(initialHfToken || "");
-  const [hfTokenInput, setHfTokenInput] = (0, import_react25.useState)(initialHfToken || "");
-  const [isLoadingFromHF, setIsLoadingFromHF] = (0, import_react25.useState)(false);
-  const [hfNamespaceLocal, setHfNamespaceLocal] = (0, import_react25.useState)(() => {
+  const [projectLoaded, setProjectLoaded] = (0, import_react27.useState)(false);
+  const [hfToken, setHfToken] = (0, import_react27.useState)(initialHfToken || "");
+  const [hfTokenInput, setHfTokenInput] = (0, import_react27.useState)(initialHfToken || "");
+  const [isLoadingFromHF, setIsLoadingFromHF] = (0, import_react27.useState)(false);
+  const [hfNamespaceLocal, setHfNamespaceLocal] = (0, import_react27.useState)(() => {
     try {
       const stored = localStorage.getItem("aa-hf-namespace");
       if (stored !== null) return stored;
@@ -4901,8 +4983,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       return "";
     }
   });
-  const [hfNamespaceFromServer, setHfNamespaceFromServer] = (0, import_react25.useState)(null);
-  (0, import_react25.useEffect)(() => {
+  const [hfNamespaceFromServer, setHfNamespaceFromServer] = (0, import_react27.useState)(null);
+  (0, import_react27.useEffect)(() => {
     if (hfNamespace !== void 0) return;
     const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
     if (!backendUrl) return;
@@ -4924,9 +5006,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     refresh: refreshHF,
     hasStateZip
   } = useHFState(hfToken, effectiveNamespace);
-  const [imageUploadStatus, setImageUploadStatus] = (0, import_react25.useState)(/* @__PURE__ */ new Map());
-  const [bootstrapLog, setBootstrapLog] = (0, import_react25.useState)([]);
-  const [isBootstrapping, setIsBootstrapping] = (0, import_react25.useState)(false);
+  const [imageUploadStatus, setImageUploadStatus] = (0, import_react27.useState)(/* @__PURE__ */ new Map());
+  const [bootstrapLog, setBootstrapLog] = (0, import_react27.useState)([]);
+  const [isBootstrapping, setIsBootstrapping] = (0, import_react27.useState)(false);
+  const [hfMissingImages, setHfMissingImages] = (0, import_react27.useState)([]);
   const syncTopSlot = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     localOnlyCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { background: "rgba(234,179,8,0.15)", border: "1px solid rgba(234,179,8,0.3)", padding: "4px 10px", fontSize: 11, color: "#fbbf24", borderRadius: 4, marginBottom: 4 }, children: [
       "\u26A0 ",
@@ -4976,7 +5059,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       bootstrapLog.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: l }, i)) })
     ] })
   ] });
-  const wsInputRef = (0, import_react25.useRef)(null);
+  const wsInputRef = (0, import_react27.useRef)(null);
   const startApp = (choice) => {
     try {
       localStorage.setItem("aa-layout", choice);
@@ -4985,16 +5068,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setLayoutChoice(choice);
     setShowStart(false);
   };
-  const [nodes, setNodes] = (0, import_react25.useState)([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
-  const [edges, setEdges] = (0, import_react25.useState)([]);
-  const [history, setHistory] = (0, import_react25.useState)([]);
-  const [galleryItems, setGalleryItems] = (0, import_react25.useState)([]);
-  const galleryItemsRef = (0, import_react25.useRef)([]);
-  (0, import_react25.useEffect)(() => {
+  const [nodes, setNodes] = (0, import_react27.useState)([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
+  const [edges, setEdges] = (0, import_react27.useState)([]);
+  const [history, setHistory] = (0, import_react27.useState)([]);
+  const [galleryItems, setGalleryItems] = (0, import_react27.useState)([]);
+  const galleryItemsRef = (0, import_react27.useRef)([]);
+  (0, import_react27.useEffect)(() => {
     galleryItemsRef.current = galleryItems;
   }, [galleryItems]);
-  const hfImageNotFoundRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react25.useEffect)(() => {
+  const hfImageNotFoundRef = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react27.useEffect)(() => {
     if (!hfState) return;
     if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
     const hfIds = new Set(hfState.metadata.map((m) => m.id));
@@ -5006,7 +5089,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       model: m.model,
       tags: m.tags || [],
       timestamp: m.timestamp,
-      status: "done"
+      status: "done",
+      filename: m.filename,
+      hasThumb: m.hasThumb
     }));
     setGalleryItems((prev) => {
       const localOnly = prev.filter((g) => !hfIds.has(g.id));
@@ -5018,80 +5103,86 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
       return [...localOnly, ...merged].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
     });
-    const COOLDOWN_MS = 5 * 60 * 1e3;
-    for (const entry of hfState.metadata) {
-      if (galleryItemsRef.current.find((g) => g.id === entry.id)?.base64) continue;
-      const failedAt = hfImageNotFoundRef.current.get(entry.id);
-      if (failedAt && Date.now() - failedAt < COOLDOWN_MS) continue;
-      hfLoadImageAsBase64(entry.id, hfToken).then((b64) => {
-        if (!b64) {
+    const sortedEntries = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
+    (async () => {
+      for (const entry of sortedEntries) {
+        if (galleryItemsRef.current.find((g) => g.id === entry.id)?.base64) continue;
+        if (hfImageNotFoundRef.current.has(entry.id)) continue;
+        try {
+          const b64 = await hfLoadImageAsBase64(entry.id, hfToken, effectiveNamespace, entry.filename, void 0, entry.mimeType, entry.hasThumb);
+          if (!b64) {
+            hfImageNotFoundRef.current.set(entry.id, Date.now());
+            setHfMissingImages((prev) => {
+              if (prev.find((e) => e.id === entry.id)) return prev;
+              return [...prev, { id: entry.id, filename: entry.filename, mimeType: entry.mimeType, timestamp: entry.timestamp }];
+            });
+            continue;
+          }
+          const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
+          setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
+          setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
+        } catch {
           hfImageNotFoundRef.current.set(entry.id, Date.now());
-          return;
         }
-        const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
-        setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
-        setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
-      }).catch(() => {
-        hfImageNotFoundRef.current.set(entry.id, Date.now());
-      });
-    }
+      }
+    })();
   }, [hfState]);
-  const [activePrompt, setActivePrompt] = (0, import_react25.useState)("");
-  const [isSynthesizing, setIsSynthesizing] = (0, import_react25.useState)(false);
-  const [activeGenerationsCount, setActiveGenerationsCount] = (0, import_react25.useState)(0);
-  const [currentResult, setCurrentResult] = (0, import_react25.useState)(null);
-  const [focusedNodeId, setFocusedNodeId] = (0, import_react25.useState)(null);
-  const [leftTab, setLeftTab] = (0, import_react25.useState)("prompt");
-  const [promptFeedback, setPromptFeedback] = (0, import_react25.useState)(null);
-  const [lastPromptPayload, setLastPromptPayload] = (0, import_react25.useState)(null);
-  const [isPromptTabGenerating, setIsPromptTabGenerating] = (0, import_react25.useState)(false);
-  const [activeTab, setActiveTab] = (0, import_react25.useState)("history");
-  const [mobileTab, setMobileTab] = (0, import_react25.useState)("stage");
-  const [middlePanel, setMiddlePanel] = (0, import_react25.useState)("stage");
-  const [recentLabItems, setRecentLabItems] = (0, import_react25.useState)([]);
-  const [aspectRatio, setAspectRatio] = (0, import_react25.useState)("1:1");
-  const [selectedModel, setSelectedModel] = (0, import_react25.useState)("\u{1F34C} Nano Banana Pro");
-  const [seed, setSeed] = (0, import_react25.useState)(Math.floor(Math.random() * 1e6));
-  const [seedMode, setSeedMode] = (0, import_react25.useState)("random");
-  const [isLeftCollapsed, setIsLeftCollapsed] = (0, import_react25.useState)(false);
-  const [isRightCollapsed, setIsRightCollapsed] = (0, import_react25.useState)(false);
-  const [leftPanelWidth, setLeftPanelWidth] = (0, import_react25.useState)(() => {
+  const [activePrompt, setActivePrompt] = (0, import_react27.useState)("");
+  const [isSynthesizing, setIsSynthesizing] = (0, import_react27.useState)(false);
+  const [activeGenerationsCount, setActiveGenerationsCount] = (0, import_react27.useState)(0);
+  const [currentResult, setCurrentResult] = (0, import_react27.useState)(null);
+  const [focusedNodeId, setFocusedNodeId] = (0, import_react27.useState)(null);
+  const [leftTab, setLeftTab] = (0, import_react27.useState)("prompt");
+  const [promptFeedback, setPromptFeedback] = (0, import_react27.useState)(null);
+  const [lastPromptPayload, setLastPromptPayload] = (0, import_react27.useState)(null);
+  const [isPromptTabGenerating, setIsPromptTabGenerating] = (0, import_react27.useState)(false);
+  const [activeTab, setActiveTab] = (0, import_react27.useState)("history");
+  const [mobileTab, setMobileTab] = (0, import_react27.useState)("stage");
+  const [middlePanel, setMiddlePanel] = (0, import_react27.useState)("stage");
+  const [recentLabItems, setRecentLabItems] = (0, import_react27.useState)([]);
+  const [aspectRatio, setAspectRatio] = (0, import_react27.useState)("1:1");
+  const [selectedModel, setSelectedModel] = (0, import_react27.useState)("\u{1F34C} Nano Banana Pro");
+  const [seed, setSeed] = (0, import_react27.useState)(Math.floor(Math.random() * 1e6));
+  const [seedMode, setSeedMode] = (0, import_react27.useState)("random");
+  const [isLeftCollapsed, setIsLeftCollapsed] = (0, import_react27.useState)(false);
+  const [isRightCollapsed, setIsRightCollapsed] = (0, import_react27.useState)(false);
+  const [leftPanelWidth, setLeftPanelWidth] = (0, import_react27.useState)(() => {
     try {
       return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
     } catch {
       return 260;
     }
   });
-  const [rightPanelWidth, setRightPanelWidth] = (0, import_react25.useState)(() => {
+  const [rightPanelWidth, setRightPanelWidth] = (0, import_react27.useState)(() => {
     try {
       return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
     } catch {
       return 320;
     }
   });
-  const [isPromptCollapsed, setIsPromptCollapsed] = (0, import_react25.useState)(false);
-  const [projectActionState, setProjectActionState] = (0, import_react25.useState)("idle");
-  const syncServerDataRef = (0, import_react25.useRef)(null);
-  const [workspaceTags, setWorkspaceTags] = (0, import_react25.useState)(null);
-  const [serverProjects, setServerProjects] = (0, import_react25.useState)([]);
-  const [isLoadingFromServer, setIsLoadingFromServer] = (0, import_react25.useState)(false);
-  const [highContrast, setHighContrast] = (0, import_react25.useState)(() => {
+  const [isPromptCollapsed, setIsPromptCollapsed] = (0, import_react27.useState)(false);
+  const [projectActionState, setProjectActionState] = (0, import_react27.useState)("idle");
+  const syncServerDataRef = (0, import_react27.useRef)(null);
+  const [workspaceTags, setWorkspaceTags] = (0, import_react27.useState)(null);
+  const [serverProjects, setServerProjects] = (0, import_react27.useState)([]);
+  const [isLoadingFromServer, setIsLoadingFromServer] = (0, import_react27.useState)(false);
+  const [highContrast, setHighContrast] = (0, import_react27.useState)(() => {
     try {
       return localStorage.getItem("aa-contrast") === "high";
     } catch {
       return false;
     }
   });
-  const [activeReferenceId, setActiveReferenceId] = (0, import_react25.useState)(null);
-  const [activeReferenceThumbnail, setActiveReferenceThumbnail] = (0, import_react25.useState)(null);
-  const [isScanningImage, setIsScanningImage] = (0, import_react25.useState)(false);
-  const [touchStartX, setTouchStartX] = (0, import_react25.useState)(null);
-  const [isFullscreen, setIsFullscreen] = (0, import_react25.useState)(false);
-  const [zoomScale, setZoomScale] = (0, import_react25.useState)(1);
-  const [zoomOffset, setZoomOffset] = (0, import_react25.useState)({ x: 0, y: 0 });
-  const lastPinchDist = (0, import_react25.useRef)(null);
-  const lastTapTime = (0, import_react25.useRef)(0);
-  const dragStart = (0, import_react25.useRef)(null);
+  const [activeReferenceId, setActiveReferenceId] = (0, import_react27.useState)(null);
+  const [activeReferenceThumbnail, setActiveReferenceThumbnail] = (0, import_react27.useState)(null);
+  const [isScanningImage, setIsScanningImage] = (0, import_react27.useState)(false);
+  const [touchStartX, setTouchStartX] = (0, import_react27.useState)(null);
+  const [isFullscreen, setIsFullscreen] = (0, import_react27.useState)(false);
+  const [zoomScale, setZoomScale] = (0, import_react27.useState)(1);
+  const [zoomOffset, setZoomOffset] = (0, import_react27.useState)({ x: 0, y: 0 });
+  const lastPinchDist = (0, import_react27.useRef)(null);
+  const lastTapTime = (0, import_react27.useRef)(0);
+  const dragStart = (0, import_react27.useRef)(null);
   const openFullscreen = () => {
     setIsFullscreen(true);
     setZoomScale(1);
@@ -5154,7 +5245,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setActiveReferenceId(null);
     setActiveReferenceThumbnail(null);
   };
-  const labServices = (0, import_react25.useMemo)(() => {
+  const labServices = (0, import_react27.useMemo)(() => {
     const available = groupGenerationsToLabItems([...galleryItems, ...history]);
     return {
       availableItems: available,
@@ -5234,17 +5325,45 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       setIsScanningImage(false);
     }
   };
-  const currentIndex = (0, import_react25.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
-  const goToPrev = (0, import_react25.useCallback)(() => {
+  const currentIndex = (0, import_react27.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
+  const goToPrev = (0, import_react27.useCallback)(() => {
     if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
   }, [currentIndex, history]);
-  const goToNext = (0, import_react25.useCallback)(() => {
+  const goToNext = (0, import_react27.useCallback)(() => {
     if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
   }, [currentIndex, history]);
+  const handleGallerySelect = (0, import_react27.useCallback)((g) => {
+    setCurrentResult(g);
+    setMobileTab("stage");
+    if (g.filename && hfToken && !g.fullBase64) {
+      hfLoadImageAsBase64(g.id, hfToken, effectiveNamespace, g.filename, void 0, g.mimeType, false).then((b64) => {
+        if (!b64) return;
+        const full = `data:${g.mimeType || "image/jpeg"};base64,${b64}`;
+        setCurrentResult((prev) => prev?.id === g.id ? { ...prev, fullBase64: full } : prev);
+        setGalleryItems((prev) => prev.map((item) => item.id === g.id ? { ...item, fullBase64: full } : item));
+      }).catch(() => {
+      });
+    }
+  }, [hfToken, effectiveNamespace]);
+  const handleTitleSet = (0, import_react27.useCallback)((id) => {
+    const ts = Date.now();
+    setGalleryItems((prev) => prev.map((g) => g.id === id ? { ...g, titleTs: ts } : g));
+    setHistory((prev) => prev.map((g) => g.id === id ? { ...g, titleTs: ts } : g));
+    if (hfToken && effectiveNamespace) {
+      hfWriteEvent("title_set", { id }).catch(() => {
+      });
+    }
+  }, [hfToken, effectiveNamespace, hfWriteEvent]);
+  const currentGroup = (0, import_react27.useMemo)(() => {
+    if (!currentResult?.prompt) return [];
+    const groups = groupByPrompt(galleryItems.filter((g) => g.status === "done" && !!g.base64));
+    const group = groups.find((gr) => gr.prompt === currentResult.prompt);
+    return group ? group.items : [];
+  }, [galleryItems, currentResult?.prompt]);
   const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
   const isGenerating = activeGenerationsCount > 0;
   useKeyboardNavigation(history, currentResult, setCurrentResult);
-  const getSubtreeFormat = (0, import_react25.useCallback)((nodeId, depth = 0) => {
+  const getSubtreeFormat = (0, import_react27.useCallback)((nodeId, depth = 0) => {
     const node = nodes.find((n) => n.id === nodeId);
     if (!node) return "";
     const childrenIds = edges.filter((e) => e.source === nodeId).map((e) => e.target);
@@ -5252,7 +5371,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     return `${indent}- ${node.data.label || "(unbenannt)"}
 ` + childrenIds.map((id) => getSubtreeFormat(id, depth + 1)).join("");
   }, [nodes, edges]);
-  const activePath = (0, import_react25.useMemo)(() => {
+  const activePath = (0, import_react27.useMemo)(() => {
     if (!focusedNodeId) return /* @__PURE__ */ new Set();
     const path = /* @__PURE__ */ new Set([focusedNodeId]);
     let currId = focusedNodeId;
@@ -5422,8 +5541,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   const handleDownloadSingle = async () => {
     if (!currentResult?.base64) return;
     try {
-      const base64Data = currentResult.base64.split(",")[1];
-      const mimeType = currentResult.base64.split(";")[0].split(":")[1] || "image/png";
+      const downloadSrc = currentResult.fullBase64 || currentResult.base64;
+      const base64Data = downloadSrc.split(",")[1];
+      const mimeType = downloadSrc.split(";")[0].split(":")[1] || "image/png";
       let finalBase64 = base64Data;
       if (mimeType === "image/png") finalBase64 = injectXMPMetadata(base64Data, currentResult.prompt || "", currentResult.seed, currentResult.model, currentResult.id, currentResult.tags || [], getSubtreeFormat(currentResult.nodeId));
       await onDownload(finalBase64, mimeType, `avatar_${currentResult.id.slice(0, 5)}.${mimeType.split("/")[1]}`);
@@ -5600,7 +5720,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       setTimeout(() => setProjectActionState("idle"), 4e3);
     }
   };
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
   }, [activeTab]);
   const mergeWorkspaceTags = (local, remote) => {
@@ -5623,7 +5743,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     return { by_category: merged, all };
   };
   if (isFullscreen && currentResult?.base64) {
-    const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
+    const fsRaw = currentResult.fullBase64 || currentResult.base64;
+    const fsBase64 = fsRaw.startsWith("data:") ? fsRaw : `data:image/png;base64,${fsRaw}`;
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
@@ -5870,7 +5991,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           setMobileTab("stage");
         }
       } }) }),
-      mobileTab === "server" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col flex-1 min-h-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ServerTab, { hfToken: hfToken || void 0 }) }),
+      mobileTab === "server" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col flex-1 min-h-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ServerTab, { serverBaseUrl }) }),
       mobileTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         TagManagerPanel,
         {
@@ -5948,7 +6069,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), className: "px-4 py-2 rounded-lg border border-white/20 text-[13px] text-white/70 active:bg-white/10", children: "Erneut versuchen" })
                 ] }),
-                currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
+                currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: currentResult.fullBase64 || currentResult.base64, className: "w-full h-full object-contain" }),
                 !currentResult && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
@@ -5966,6 +6087,49 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               ]
             }
           ),
+          currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-2 flex gap-1.5 overflow-x-auto pb-1", style: { scrollbarWidth: "none" }, children: currentGroup.map((item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "div",
+              {
+                onClick: () => handleGallerySelect(item),
+                style: {
+                  width: 44,
+                  height: 44,
+                  borderRadius: 8,
+                  overflow: "hidden",
+                  cursor: "pointer",
+                  border: item.id === currentResult.id ? "2px solid rgba(255,255,255,0.8)" : "2px solid rgba(255,255,255,0.15)",
+                  opacity: item.id === currentResult.id ? 1 : 0.55
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleTitleSet(item.id);
+                },
+                style: {
+                  position: "absolute",
+                  bottom: 2,
+                  right: 2,
+                  width: 14,
+                  height: 14,
+                  background: item.titleTs ? "#f59e0b" : "rgba(0,0,0,0.75)",
+                  border: "1px solid rgba(255,255,255,0.25)",
+                  borderRadius: 3,
+                  cursor: "pointer",
+                  padding: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 9, color: item.titleTs ? "#fff" : "rgba(255,255,255,0.5)", lineHeight: 1 }, children: "star" })
+              }
+            )
+          ] }, item.id)) }),
           currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex gap-2 mt-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
@@ -5988,10 +6152,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           hfToken && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-12 flex items-center justify-center text-white/20 active:text-white transition-colors disabled:opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
-          activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
-            setCurrentResult(g);
-            setMobileTab("stage");
-          }, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
+          activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
           activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             MediaLibrary,
             {
@@ -6002,10 +6163,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
                 setGalleryItems((prev) => [...media.map((m) => ({ id: crypto.randomUUID(), nodeId: "1", base64: `data:${m.mimeType};base64,${m.base64}`, mediaId: m.mediaId, prompt: m.name || "Importiert", timestamp: Date.now(), status: "done", tags: [], type: "import" })), ...prev]);
               },
               onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
-              onSelect: (g) => {
-                setCurrentResult(g);
-                setMobileTab("stage");
-              },
+              onSelect: handleGallerySelect,
               onGenerateReference: (item) => {
                 handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true });
                 setMobileTab("stage");
@@ -6045,7 +6203,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
             "HF"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActiveTab("server"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "server" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) }),
+          serverBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActiveTab("server"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "server" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) }),
           workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
@@ -6128,10 +6286,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               galleryItems,
               allEvents: hfAllEvents,
               confirmedEventKeys: hfConfirmedKeys,
-              imageUploadStatus
+              imageUploadStatus,
+              missingImages: hfMissingImages
             }
           ) }),
-          activeTab === "server" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ServerTab, { hfToken: hfToken || void 0 }) })
+          activeTab === "server" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ServerTab, { serverBaseUrl }) })
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
@@ -6140,7 +6299,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         { id: "labs", icon: "science", label: "Labs" },
         ...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
         { id: "browse", icon: "photo_library", label: "Galerie" },
-        { id: "server", icon: "storage", label: "Server" }
+        ...serverBaseUrl ? [{ id: "server", icon: "storage", label: "Server" }] : []
       ].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => setMobileTab(tab.id), className: `flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
@@ -6191,7 +6350,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             ] })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -6216,7 +6375,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), style: { padding: "8px 16px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.2)", fontSize: 11, color: "rgba(255,255,255,0.7)", background: "none", cursor: "pointer", fontFamily: "inherit" }, children: "Erneut versuchen" })
               ] }),
-              currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
+              currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: currentResult.fullBase64 || currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
               !currentResult && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
@@ -6358,33 +6517,81 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         middlePanel === "labs" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LabsTab, { services: labServices, onResult: (item) => {
           const frame = item.frames[0];
           if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
-        } }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: [
-          isGenerating && currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
-          ] }),
-          currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
-          ] }) : currentResult.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
+        } }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: [
+            isGenerating && currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "h-full w-full relative flex items-center justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute bottom-6 flex gap-2 opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0 z-20", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
+            currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+            ] }) : currentResult.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "h-full w-full relative flex items-center justify-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: currentResult.fullBase64 || currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute bottom-6 flex gap-2 opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0 z-20", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
+              ] })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
             ] })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
-          ] })
-        ] }) })
+          ] }) }),
+          currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-6 pb-4 shrink-0 flex gap-2 overflow-x-auto", style: { scrollbarWidth: "none" }, children: currentGroup.map((item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "div",
+              {
+                onClick: () => handleGallerySelect(item),
+                style: {
+                  width: 52,
+                  height: 52,
+                  borderRadius: 10,
+                  overflow: "hidden",
+                  cursor: "pointer",
+                  border: item.id === currentResult.id ? "2px solid rgba(255,255,255,0.8)" : "2px solid rgba(255,255,255,0.12)",
+                  opacity: item.id === currentResult.id ? 1 : 0.5,
+                  transition: "opacity 0.15s, border-color 0.15s"
+                },
+                className: "hover:opacity-80",
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: item.base64, style: { width: "100%", height: "100%", objectFit: "cover" }, alt: "" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleTitleSet(item.id);
+                },
+                title: "Als Titel markieren",
+                style: {
+                  position: "absolute",
+                  bottom: 3,
+                  right: 3,
+                  width: 16,
+                  height: 16,
+                  background: item.titleTs ? "#f59e0b" : "rgba(0,0,0,0.75)",
+                  border: "1px solid rgba(255,255,255,0.25)",
+                  borderRadius: 4,
+                  cursor: "pointer",
+                  padding: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 10, color: item.titleTs ? "#fff" : "rgba(255,255,255,0.5)", lineHeight: 1 }, children: "star" })
+              }
+            )
+          ] }, item.id)) })
+        ] })
       ] })
     ] }),
     !isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
@@ -6395,7 +6602,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             setActiveTab(tab);
             setIsRightCollapsed(false);
           }, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : tab === "sync" ? "cloud_sync" : "label" }) }, tab)),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => {
+          serverBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => {
             setActiveTab("server");
             setIsRightCollapsed(false);
           }, className: `w-10 flex items-center justify-center relative transition-colors ${activeTab === "server" ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) })
@@ -6419,7 +6626,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
         ] }) }),
-        activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
+        activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
         activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           MediaLibrary,
           {
@@ -6430,7 +6637,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               setGalleryItems((prev) => [...media.map((m) => ({ id: crypto.randomUUID(), nodeId: "1", base64: `data:${m.mimeType};base64,${m.base64}`, mediaId: m.mediaId, prompt: m.name || "Importiert", timestamp: Date.now(), status: "done", tags: [], type: "import" })), ...prev]);
             },
             onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
-            onSelect: setCurrentResult,
+            onSelect: handleGallerySelect,
             onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
           }
         ),
@@ -6460,14 +6667,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             onHfInitialSync: hfToken ? handleHfInitialSync : void 0
           }
         ),
-        activeTab === "server" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ServerTab, { hfToken: hfToken || void 0 })
+        activeTab === "server" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ServerTab, { serverBaseUrl })
       ] })
     ] })
   ] });
 }
 
 // src/components/FaApp.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function FaApp({
   onGenerateImage,
@@ -6487,8 +6694,8 @@ function FaApp({
   onServerDelete,
   buildInfo
 }) {
-  const [hfNamespace, setHfNamespace] = (0, import_react26.useState)(void 0);
-  (0, import_react26.useEffect)(() => {
+  const [hfNamespace, setHfNamespace] = (0, import_react28.useState)(void 0);
+  (0, import_react28.useEffect)(() => {
     if (!serverBaseUrl) return;
     fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
       if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
@@ -6509,6 +6716,7 @@ function FaApp({
       initialHfToken: libToken ? libToken.startsWith("hf_") ? libToken : `hf_${libToken}` : void 0,
       hfNamespace,
       allowDevNamespace: !hfNamespace && allowDevNamespace,
+      serverBaseUrl,
       onFetchServerProjects,
       onServerSave,
       onServerLoad,
@@ -6521,7 +6729,7 @@ function FaApp({
 // src/index.ts
 init_hfStateService();
 init_hfStateService();
-var LIB_VERSION = "2.0.30";
+var LIB_VERSION = "2.0.46";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,
@@ -6566,10 +6774,6 @@ var LIB_VERSION = "2.0.30";
   cleanAiResponse,
   createFlowServices,
   exportProjectToZip,
-  faServerDelete,
-  faServerGet,
-  faServerPost,
-  faServerPut,
   findForks,
   findTips,
   formatTreeToMarkdown,