@rslsp1/fa-app-tools 2.0.57 → 2.0.61

package/dist/index.js

@@ -1033,10 +1033,8 @@ var CompactDropdown = ({
 };
 
 // src/components/HistoryPanel.tsx
-var import_react4 = require("react");
-var import_react5 = require("motion/react");
+var import_react4 = require("motion/react");
 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();
@@ -1048,8 +1046,7 @@ var formatFriendlyTimestamp = (timestamp) => {
   if (date.toDateString() === yesterday.toDateString()) return `Gestern, ${timeStr}`;
   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);
+var HistoryPanel = ({ history, currentResultId, onSelect, onDelete, visibleCount, onLoadMore }) => {
   const visibleHistory = history.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: [
@@ -1057,7 +1054,7 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[10px] font-bold uppercase tracking-widest", children: "Keine Historie" })
     ] });
   }
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(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: [
     visibleHistory.map((gen) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
@@ -1093,7 +1090,7 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
       },
       gen.id
     )),
-    visibleCount < history.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: [
+    visibleCount < history.length && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", onClick: onLoadMore, 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: [
       history.length - visibleCount,
       " weitere laden"
     ] })
@@ -1101,11 +1098,11 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
 };
 
 // src/components/InspectPanel.tsx
-var import_react6 = require("react");
-var import_react7 = require("motion/react");
+var import_react5 = require("react");
+var import_react6 = require("motion/react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagToggle }) => {
-  const currentIndex = (0, import_react6.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
+  const currentIndex = (0, import_react5.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" }),
@@ -1113,7 +1110,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_react7.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_react6.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" }),
@@ -1166,8 +1163,8 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
 };
 
 // src/components/SetupPanel.tsx
-var import_react8 = require("react");
-var import_react9 = require("motion/react");
+var import_react7 = require("react");
+var import_react8 = require("motion/react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var PRESET_URLS = [
   "https://jsonplaceholder.typicode.com/todos/1",
@@ -1175,12 +1172,12 @@ var PRESET_URLS = [
   "https://esm.sh/@rslsp1/fa-app-tools@latest"
 ];
 var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
-  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 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 runTest = async (url) => {
     if (!url.trim()) return;
     setTestStatus("loading");
@@ -1220,7 +1217,7 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
       setTestStatus("error");
     }
   };
-  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: [
+  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: [
     /* @__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" }),
@@ -1343,8 +1340,7 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
 };
 
 // src/components/MediaLibrary.tsx
-var import_react10 = require("react");
-var import_react11 = require("motion/react");
+var import_react9 = require("motion/react");
 
 // src/lib/grouping.ts
 function groupByPrompt(items) {
@@ -1369,9 +1365,7 @@ function groupByPrompt(items) {
 
 // src/components/MediaLibrary.tsx
 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);
+var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload, onGenerateReference, visibleCount, onLoadMore }) => {
   const selectedCount = items.filter((i) => i.selectedForExport).length;
   const groups = groupByPrompt(items);
   const visibleGroups = groups.slice(0, visibleCount);
@@ -1392,7 +1386,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
           "Laden"
         ] })
       ] }),
-      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: [
+      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: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[9px] font-bold uppercase text-blue-400 ml-1", children: [
           selectedCount,
           " ausgew\xE4hlt"
@@ -1413,7 +1407,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
       visibleGroups.map((group) => {
         const rep = group.representative;
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          import_react11.motion.div,
+          import_react9.motion.div,
           {
             initial: { opacity: 0, scale: 0.9 },
             animate: { opacity: 1, scale: 1 },
@@ -1444,7 +1438,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
           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: [
+      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: onLoadMore, 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"
       ] }) })
@@ -1453,10 +1447,10 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
 };
 
 // src/components/ListView.tsx
-var import_react12 = require("react");
+var import_react10 = 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_react12.useRef)(null);
+  const inputRef = (0, import_react10.useRef)(null);
   const hasChildren = children && children.length > 0;
   const handleKeyDown = (e) => {
     if (e.key === "Tab") {
@@ -1484,7 +1478,7 @@ var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNod
       onMoveNode(node.id, "down");
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (isActive && inputRef.current) inputRef.current.focus();
   }, [isActive]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col w-full", children: [
@@ -1518,7 +1512,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_react12.useState)(/* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = (0, import_react10.useState)(/* @__PURE__ */ new Set());
   const toggleCollapse = (id) => {
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -1546,13 +1540,13 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
 }
 
 // src/components/AvatarArchitectApp.tsx
-var import_react27 = require("react");
+var import_react25 = require("react");
 
 // src/components/PromptTab.tsx
-var import_react14 = require("react");
+var import_react12 = require("react");
 
 // src/components/CollapsibleCard.tsx
-var import_react13 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CollapsibleCard = ({
   title,
@@ -1563,7 +1557,7 @@ var CollapsibleCard = ({
   collapsible = true,
   className = ""
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(defaultOpen);
+  const [isOpen, setIsOpen] = (0, import_react11.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",
@@ -1610,20 +1604,20 @@ var PromptTab = ({
   onTagUpdate,
   onTagDelete
 }) => {
-  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 [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 toggleTag = (label) => {
     setSelectedLabels((prev) => {
       const next = new Set(prev);
@@ -2070,7 +2064,7 @@ var PromptTab = ({
 };
 
 // src/components/ProjectSyncTab.tsx
-var import_react15 = require("react");
+var import_react13 = require("react");
 init_hfStateService();
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var ProjectSyncTab = ({
@@ -2091,14 +2085,14 @@ var ProjectSyncTab = ({
   onProjectExportBase64,
   onHfInitialSync
 }) => {
-  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 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 handleExport = async () => {
     if (!onProjectExport) return;
     setIsExporting(true);
@@ -2144,13 +2138,13 @@ var ProjectSyncTab = ({
     });
   };
   const isWorking = projectActionState === "working" || projectActionState === "working-full";
-  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 [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 loadHfProjects = async (token) => {
     setHfLoading(true);
     setHfError(null);
@@ -2162,7 +2156,7 @@ var ProjectSyncTab = ({
       setHfLoading(false);
     }
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react13.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: [
@@ -2576,7 +2570,7 @@ function toPromptImages(images) {
 init_hfStateService();
 
 // src/hooks/useHFState.ts
-var import_react16 = require("react");
+var import_react14 = require("react");
 init_hfStateService();
 
 // src/lib/hfReducer.ts
@@ -2709,19 +2703,19 @@ function writeOfflineBuffer(events) {
   }
 }
 function useHFState(token, namespace) {
-  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 knownFilePaths = (0, import_react16.useRef)(/* @__PURE__ */ new Set());
-  const allEventsRef = (0, import_react16.useRef)([]);
-  const applyNewEvents = (0, import_react16.useCallback)((snapshot, newEvents) => {
+  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 knownFilePaths = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
+  const allEventsRef = (0, import_react14.useRef)([]);
+  const applyNewEvents = (0, import_react14.useCallback)((snapshot, newEvents) => {
     if (!newEvents.length && allEventsRef.current.length === 0) {
       setEventCount(0);
       return snapshot;
@@ -2735,7 +2729,7 @@ function useHFState(token, namespace) {
     if (afterConsolidation.length) setLastEventTs(Math.max(...afterConsolidation.map((e) => e.ts)));
     return applyEvents(snapshot, afterConsolidation);
   }, []);
-  const loadFull = (0, import_react16.useCallback)(async () => {
+  const loadFull = (0, import_react14.useCallback)(async () => {
     if (!token || !namespace) return;
     setIsLoading(true);
     setError(null);
@@ -2783,7 +2777,7 @@ function useHFState(token, namespace) {
       setIsLoading(false);
     }
   }, [token, namespace, applyNewEvents]);
-  const pollNew = (0, import_react16.useCallback)(async () => {
+  const pollNew = (0, import_react14.useCallback)(async () => {
     if (!token || !namespace || !state) return;
     try {
       const events = await loadPendingEvents(namespace, token, state.meta.consolidatedAt, knownFilePaths.current);
@@ -2797,15 +2791,15 @@ function useHFState(token, namespace) {
     } catch {
     }
   }, [token, namespace, state, applyNewEvents]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (token && namespace) loadFull();
   }, [token, namespace]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!token || !namespace) return;
     const id = setInterval(pollNew, POLL_INTERVAL_MS);
     return () => clearInterval(id);
   }, [token, namespace, pollNew]);
-  const writeEvent = (0, import_react16.useCallback)(async (type, payload) => {
+  const writeEvent = (0, import_react14.useCallback)(async (type, payload) => {
     const prevTs = lastEventTs ? [lastEventTs] : [state?.meta.consolidatedAt ?? 0];
     console.log("[HF] writeEvent called:", { type, namespace, tokenOk: !!token, prevTs });
     await pollNew();
@@ -2855,13 +2849,13 @@ function useHFState(token, namespace) {
 }
 
 // src/components/labs/LabsTab.tsx
-var import_react23 = require("react");
+var import_react21 = require("react");
 
 // src/components/labs/LabRemix.tsx
-var import_react18 = require("react");
+var import_react16 = require("react");
 
 // src/components/labs/LabImagePicker.tsx
-var import_react17 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var LabImagePicker = ({
   availableItems,
@@ -2870,8 +2864,8 @@ var LabImagePicker = ({
   onClose,
   title = "Bild w\xE4hlen"
 }) => {
-  const [search, setSearch] = (0, import_react17.useState)("");
-  const [drillItem, setDrillItem] = (0, import_react17.useState)(null);
+  const [search, setSearch] = (0, import_react15.useState)("");
+  const [drillItem, setDrillItem] = (0, import_react15.useState)(null);
   const filtered = availableItems.filter(
     (item) => !search || item.prompt.toLowerCase().includes(search.toLowerCase())
   );
@@ -2973,13 +2967,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_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 [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 handleSelectImage = (item, frame) => {
     services.onItemUsed(item);
     setSelected({
@@ -3162,16 +3156,16 @@ var LabRemix = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabBlend.tsx
-var import_react19 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var LabBlend = ({ services, onResult }) => {
-  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 [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 handleSelectImage = (index, item, frame) => {
     services.onItemUsed(item);
     const newImg = {
@@ -3358,17 +3352,17 @@ var LabBlend = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabCompare.tsx
-var import_react20 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var LabCompare = ({ services, onResult }) => {
-  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 [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 handleSelectImage = (index, item, frame) => {
     services.onItemUsed(item);
     const newImg = {
@@ -3531,14 +3525,14 @@ var LabCompare = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabLoop.tsx
-var import_react21 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var LabLoop = ({ services, onResult }) => {
-  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 [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 currentPrompt = rounds.length > 0 ? rounds[rounds.length - 1].prompt : "";
   const handleAddImage = (item, frame) => {
     services.onItemUsed(item);
@@ -3694,7 +3688,7 @@ var LabLoop = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabFrameExtractor.tsx
-var import_react22 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var formatTime = (s) => {
   const m = Math.floor(s / 60);
@@ -3708,15 +3702,15 @@ var LabFrameExtractor = ({
   onResult,
   resolveVideoUrl
 }) => {
-  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 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 handleVideoSelect = (item) => {
     const mediaId = item.frames[0]?.mediaId;
     if (!mediaId) return;
@@ -3726,7 +3720,7 @@ var LabFrameExtractor = ({
     setVideoReady(false);
     cancelledRef.current = false;
   };
-  const captureAt = (0, import_react22.useCallback)(
+  const captureAt = (0, import_react20.useCallback)(
     (t, label) => new Promise((resolve) => {
       const video = videoRef.current;
       const canvas = canvasRef.current;
@@ -3953,7 +3947,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_react23.useState)("remix");
+  const [activeTab, setActiveTab] = (0, import_react21.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: [
@@ -3987,19 +3981,19 @@ var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
 };
 
 // src/components/TagManagerPanel.tsx
-var import_react24 = require("react");
+var import_react22 = 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_react24.useState)(categories[0] || "");
+  const [selectedCategory, setSelectedCategory] = (0, import_react22.useState)(categories[0] || "");
   const effectiveCategory = categories.includes(selectedCategory) ? selectedCategory : categories[0] || "";
-  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 [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 tags = (workspaceTags.by_category[effectiveCategory] || []).filter((t) => !t.is_deleted);
   const otherCategories = categories.filter((c) => c !== effectiveCategory);
   const startEdit = (tag) => {
@@ -4195,7 +4189,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
 }
 
 // src/components/HFTestTab.tsx
-var import_react25 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var HF_BASE2 = "https://huggingface.co";
 var HF_REPO2 = "RolandSch/fa-app-state";
@@ -4388,7 +4382,7 @@ function tryFmt(s) {
   }
 }
 function CopyBtn({ text }) {
-  const [done, setDone] = (0, import_react25.useState)(false);
+  const [done, setDone] = (0, import_react23.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "button",
     {
@@ -4560,9 +4554,9 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
   ] });
 }
 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 [selected, setSelected] = (0, import_react23.useState)(null);
+  const [results, setResults] = (0, import_react23.useState)({});
+  const [expanded, setExpanded] = (0, import_react23.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) => {
@@ -4760,7 +4754,7 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
 }
 
 // src/components/ServerTab.tsx
-var import_react26 = require("react");
+var import_react24 = 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)) });
@@ -4773,21 +4767,21 @@ async function serverGet(baseUrl, path) {
   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)(() => {
+  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 (!serverBaseUrl) return;
     setUsersLoading(true);
     setUsersError(null);
@@ -4940,7 +4934,7 @@ function ServerTab({ serverBaseUrl }) {
 // src/components/AvatarArchitectApp.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, serverBaseUrl, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
-  (0, import_react27.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const id = "flow-styles";
     if (!document.getElementById(id)) {
       const style = document.createElement("style");
@@ -4949,19 +4943,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       document.head.appendChild(style);
     }
   }, []);
-  const [showStart, setShowStart] = (0, import_react27.useState)(true);
-  const [layoutChoice, setLayoutChoice] = (0, import_react27.useState)(() => {
+  const [showStart, setShowStart] = (0, import_react25.useState)(true);
+  const [layoutChoice, setLayoutChoice] = (0, import_react25.useState)(() => {
     try {
       return localStorage.getItem("aa-layout") || null;
     } catch {
       return null;
     }
   });
-  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)(() => {
+  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 KNOWN = ["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"];
     const DEFAULT = "app.art-by-rolands.de/";
     try {
@@ -4973,8 +4967,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       return DEFAULT;
     }
   });
-  const [hfNamespaceFromServer, setHfNamespaceFromServer] = (0, import_react27.useState)(null);
-  (0, import_react27.useEffect)(() => {
+  const [hfNamespaceFromServer, setHfNamespaceFromServer] = (0, import_react25.useState)(null);
+  (0, import_react25.useEffect)(() => {
     if (hfNamespace !== void 0) return;
     const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
     if (!backendUrl) return;
@@ -4996,10 +4990,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     refresh: refreshHF,
     hasStateZip
   } = useHFState(hfToken, effectiveNamespace);
-  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 [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 [hfMissingImages, setHfMissingImages] = (0, import_react25.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 ",
@@ -5049,7 +5043,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_react27.useRef)(null);
+  const wsInputRef = (0, import_react25.useRef)(null);
   const startApp = (choice) => {
     try {
       localStorage.setItem("aa-layout", choice);
@@ -5058,16 +5052,37 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setLayoutChoice(choice);
     setShowStart(false);
   };
-  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)(() => {
+  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)(() => {
     galleryItemsRef.current = galleryItems;
   }, [galleryItems]);
-  const hfImageNotFoundRef = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react27.useEffect)(() => {
+  const hfImageNotFoundRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+  const [galleryVisibleCount, setGalleryVisibleCount] = (0, import_react25.useState)(20);
+  const [historyVisibleCount, setHistoryVisibleCount] = (0, import_react25.useState)(20);
+  const loadThumbnailsForEntries = (0, import_react25.useCallback)(async (entries) => {
+    for (const entry of entries) {
+      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) => prev.find((e) => e.id === entry.id) ? prev : [...prev, { id: entry.id, filename: entry.filename, mimeType: entry.mimeType ?? "image/jpeg", timestamp: entry.timestamp ?? 0 }]);
+          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());
+      }
+    }
+  }, [hfToken, effectiveNamespace]);
+  (0, import_react25.useEffect)(() => {
     if (!hfState) return;
     if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
     const hfIds = new Set(hfState.metadata.map((m) => m.id));
@@ -5093,90 +5108,97 @@ 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 sortedEntries = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
-    const galleryRepIds = new Set(groupByPrompt(skeletons).slice(0, 20).map((g) => g.representative.id));
-    const historyIds = new Set(sortedEntries.slice(0, 20).map((e) => e.id));
-    const initialIds = /* @__PURE__ */ new Set([...galleryRepIds, ...historyIds]);
-    const toLoad = sortedEntries.filter((e) => initialIds.has(e.id));
-    (async () => {
-      for (const entry of toLoad) {
-        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());
-        }
-      }
-    })();
   }, [hfState]);
-  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)(() => {
+  (0, import_react25.useEffect)(() => {
+    if (!hfState) return;
+    const sortedMeta = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
+    const skeletons = sortedMeta.map((m) => ({ id: m.id, prompt: m.prompt, timestamp: m.timestamp, status: "done", nodeId: m.id, tags: m.tags || [] }));
+    const repIds = new Set(groupByPrompt(skeletons).slice(0, galleryVisibleCount).map((g) => g.representative.id));
+    loadThumbnailsForEntries(sortedMeta.filter((e) => repIds.has(e.id)));
+  }, [hfState, galleryVisibleCount, loadThumbnailsForEntries]);
+  (0, import_react25.useEffect)(() => {
+    if (!hfState) return;
+    const sortedMeta = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
+    loadThumbnailsForEntries(sortedMeta.slice(0, historyVisibleCount));
+  }, [hfState, historyVisibleCount, loadThumbnailsForEntries]);
+  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 [imageCount, setImageCount] = (0, import_react25.useState)(() => {
+    try {
+      const v = parseInt(localStorage.getItem("aa-image-count") || "", 10);
+      return v >= 1 && v <= 8 ? v : 4;
+    } catch {
+      return 4;
+    }
+  });
+  const updateImageCount = (val) => {
+    const n = Math.max(1, Math.min(8, parseInt(val, 10) || 4));
+    setImageCount(n);
+    try {
+      localStorage.setItem("aa-image-count", String(n));
+    } catch {
+    }
+  };
+  const imageCountOptions = [
+    { label: "1 Bild", value: "1" },
+    { label: "2 Bilder", value: "2" },
+    { label: "4 Bilder", value: "4" },
+    { label: "8 Bilder", value: "8" }
+  ];
+  const [isLeftCollapsed, setIsLeftCollapsed] = (0, import_react25.useState)(false);
+  const [isRightCollapsed, setIsRightCollapsed] = (0, import_react25.useState)(false);
+  const [leftPanelWidth, setLeftPanelWidth] = (0, import_react25.useState)(() => {
     try {
       return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
     } catch {
       return 260;
     }
   });
-  const [rightPanelWidth, setRightPanelWidth] = (0, import_react27.useState)(() => {
+  const [rightPanelWidth, setRightPanelWidth] = (0, import_react25.useState)(() => {
     try {
       return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
     } catch {
       return 320;
     }
   });
-  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)(() => {
+  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)(() => {
     try {
       return localStorage.getItem("aa-contrast") === "high";
     } catch {
       return false;
     }
   });
-  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 [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 openFullscreen = () => {
     setIsFullscreen(true);
     setZoomScale(1);
@@ -5239,7 +5261,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setActiveReferenceId(null);
     setActiveReferenceThumbnail(null);
   };
-  const labServices = (0, import_react27.useMemo)(() => {
+  const labServices = (0, import_react25.useMemo)(() => {
     const available = groupGenerationsToLabItems([...galleryItems, ...history]);
     return {
       availableItems: available,
@@ -5319,17 +5341,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       setIsScanningImage(false);
     }
   };
-  const currentIndex = (0, import_react27.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
-  const goToPrev = (0, import_react27.useCallback)(() => {
+  const currentIndex = (0, import_react25.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
+  const goToPrev = (0, import_react25.useCallback)(() => {
     if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
   }, [currentIndex, history]);
-  const goToNext = (0, import_react27.useCallback)(() => {
+  const goToNext = (0, import_react25.useCallback)(() => {
     if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
   }, [currentIndex, history]);
-  const handleGallerySelect = (0, import_react27.useCallback)((g) => {
+  const handleGallerySelect = (0, import_react25.useCallback)((g) => {
     setCurrentResult(g);
     setMobileTab("stage");
-    if (g.filename && hfToken && !g.fullBase64) {
+    if (g.hasThumb && 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}`;
@@ -5339,7 +5361,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       });
     }
   }, [hfToken, effectiveNamespace]);
-  const handleTitleSet = (0, import_react27.useCallback)((id) => {
+  const handleTitleSet = (0, import_react25.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));
@@ -5348,13 +5370,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       });
     }
   }, [hfToken, effectiveNamespace, hfWriteEvent]);
-  const currentGroup = (0, import_react27.useMemo)(() => {
+  const currentGroup = (0, import_react25.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]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!currentResult?.prompt || !hfToken || !effectiveNamespace || !hfState) return;
     const siblings = galleryItemsRef.current.filter(
       (g) => g.prompt === currentResult.prompt && !g.base64 && !hfImageNotFoundRef.current.has(g.id)
@@ -5380,9 +5402,20 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     })();
   }, [currentResult?.id, currentResult?.prompt]);
   const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
-  const isGenerating = activeGenerationsCount > 0;
+  const runningBadge = activeGenerationsCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: "flex items-center gap-1 rounded-full bg-sky-500/15 border border-sky-400/30 px-2 shrink-0",
+      style: { height: 24 },
+      title: `${activeGenerationsCount} Generierung${activeGenerationsCount === 1 ? "" : "en"} l\xE4uft gerade`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-sky-300", style: { fontSize: 14, lineHeight: 1 }, children: "autorenew" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[11px] font-bold text-sky-300 tabular-nums", children: activeGenerationsCount })
+      ]
+    }
+  ) : null;
   useKeyboardNavigation(history, currentResult, setCurrentResult);
-  const getSubtreeFormat = (0, import_react27.useCallback)((nodeId, depth = 0) => {
+  const getSubtreeFormat = (0, import_react25.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);
@@ -5390,7 +5423,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_react27.useMemo)(() => {
+  const activePath = (0, import_react25.useMemo)(() => {
     if (!focusedNodeId) return /* @__PURE__ */ new Set();
     const path = /* @__PURE__ */ new Set([focusedNodeId]);
     let currId = focusedNodeId;
@@ -5453,6 +5486,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       setActiveGenerationsCount((prev) => Math.max(0, prev - 1));
     }
   };
+  const handleGenerateBatch = (customPrompt, useReferenceId, overrideNodeId, options = { silent: false }) => {
+    const count = Math.max(1, Math.min(8, imageCount));
+    return Promise.all(
+      Array.from(
+        { length: count },
+        (_, i) => handleGenerateImage(customPrompt, useReferenceId, overrideNodeId, { silent: options.silent || i > 0 })
+      )
+    );
+  };
   const handleSynthesizePrompt = async (nodeId, autoGenerate = false) => {
     setIsSynthesizing(true);
     try {
@@ -5739,7 +5781,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       setTimeout(() => setProjectActionState("idle"), 4e3);
     }
   };
-  (0, import_react27.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
   }, [activeTab]);
   const mergeWorkspaceTags = (local, remote) => {
@@ -6026,7 +6068,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1" }),
+          runningBadge,
           activeReferenceThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
@@ -6048,20 +6092,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           ),
           activePrompt && !isSynthesizing && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center text-white/20 active:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "button",
           {
-            onClick: () => handleGenerateImage(),
-            disabled: !activePrompt.trim() || isGenerating,
+            onClick: () => handleGenerateBatch(),
+            disabled: !activePrompt.trim(),
             className: "w-full flex items-center justify-center gap-2 rounded-xl font-bold text-[14px] uppercase tracking-wide transition-all disabled:opacity-30 active:scale-95",
-            style: { height: 48, background: activePrompt.trim() && !isGenerating ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
-            children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Generiere..." })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+            style: { height: 48, background: activePrompt.trim() ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
+            children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Generieren" })
-            ] })
+            ]
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
@@ -6079,9 +6120,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
                 setTouchStartX(null);
               },
               children: [
-                currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-3", 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-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+                currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-3 opacity-40", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[11px] uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
                 ] }),
                 currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
@@ -6154,7 +6195,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[12px] text-white/60", children: "Prompt" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => handleGenerateBatch(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
             ] }),
@@ -6171,7 +6212,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: handleGallerySelect, 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)), visibleCount: historyVisibleCount, onLoadMore: () => setHistoryVisibleCount((c) => c + 20) }),
           activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             MediaLibrary,
             {
@@ -6184,9 +6225,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
               onSelect: handleGallerySelect,
               onGenerateReference: (item) => {
-                handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true });
+                handleGenerateBatch(item.prompt || activePrompt, item.mediaId, void 0, { silent: true });
                 setMobileTab("stage");
-              }
+              },
+              visibleCount: galleryVisibleCount,
+              onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
             }
           ),
           activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InspectPanel, { currentResult, history, onSelect: (g) => {
@@ -6258,7 +6301,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             }
           ) }),
           workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
-            handleGenerateImage(prompt);
+            handleGenerateBatch(prompt);
             setMobileTab("stage");
           }, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
           activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
@@ -6338,7 +6381,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { height: 52, borderBottom: "1px solid rgba(255,255,255,0.05)", display: "flex", alignItems: "center", gap: 8, padding: "0 12px", flexShrink: 0 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1 } }),
+          runningBadge,
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
         ] }),
@@ -6354,22 +6399,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           ),
           activePrompt && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setActivePrompt(""), style: { position: "absolute", top: 6, right: 6, width: 22, height: 22, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "button",
           {
-            onClick: () => handleGenerateImage(),
-            disabled: !activePrompt.trim() || isGenerating,
-            style: { width: "100%", height: 42, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, borderRadius: 10, fontWeight: "bold", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.05em", border: "1px solid rgba(255,255,255,0.1)", background: activePrompt.trim() && !isGenerating ? "#0284c7" : "transparent", color: "#fff", cursor: activePrompt.trim() && !isGenerating ? "pointer" : "default", opacity: !activePrompt.trim() || isGenerating ? 0.3 : 1, fontFamily: "inherit", transition: "background 0.2s" },
-            children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Generiere..." })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+            onClick: () => handleGenerateBatch(),
+            disabled: !activePrompt.trim(),
+            style: { width: "100%", height: 42, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, borderRadius: 10, fontWeight: "bold", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.05em", border: "1px solid rgba(255,255,255,0.1)", background: activePrompt.trim() ? "#0284c7" : "transparent", color: "#fff", cursor: activePrompt.trim() ? "pointer" : "default", opacity: !activePrompt.trim() ? 0.3 : 1, fontFamily: "inherit", transition: "background 0.2s" },
+            children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Generieren" })
-            ] })
+            ]
           }
         ) }),
-        /* @__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.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)), visibleCount: historyVisibleCount, onLoadMore: () => setHistoryVisibleCount((c) => c + 20) }) })
       ] }),
       /* @__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)(
@@ -6385,9 +6427,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               setTouchStartX(null);
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { height: "100%", width: "100%", borderRadius: 20, border: "1px solid rgba(255,255,255,0.05)", background: "rgba(0,0,0,0.4)", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
-              currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
+              currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, opacity: 0.4 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 36 }, children: "hourglass_top" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.6)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
               ] }),
               currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
@@ -6417,7 +6459,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Prompt" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { onClick: () => handleGenerateBatch(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Referenz" })
           ] }),
@@ -6487,7 +6529,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
           }
         ) }),
-        leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateImage(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
+        leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateBatch(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
       ] })
     ] }),
     !isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
@@ -6495,7 +6537,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1 mx-auto", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -6525,7 +6568,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Ref" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
+          runningBadge,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillButton, { variant: "solid", icon: "bolt", disabled: !activePrompt.trim(), onClick: () => handleGenerateBatch(), children: "Generieren" })
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
@@ -6537,33 +6581,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           const frame = item.frames[0];
           if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
         } }) }) : /* @__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)("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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: currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-4 opacity-40", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[10px] 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 })
             ] }),
-            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.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: () => handleGenerateBatch(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" })
+          ] }) }) }),
           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",
@@ -6645,7 +6683,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: handleGallerySelect, 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)), visibleCount: historyVisibleCount, onLoadMore: () => setHistoryVisibleCount((c) => c + 20) }),
         activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           MediaLibrary,
           {
@@ -6657,7 +6695,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             },
             onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
             onSelect: handleGallerySelect,
-            onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
+            onGenerateReference: (item) => handleGenerateBatch(item.prompt || activePrompt, item.mediaId, void 0, { silent: true }),
+            visibleCount: galleryVisibleCount,
+            onLoadMore: () => setGalleryVisibleCount((c) => c + 20)
           }
         ),
         activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
@@ -6693,7 +6733,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/components/FaApp.tsx
-var import_react28 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function FaApp({
   onGenerateImage,
@@ -6713,8 +6753,8 @@ function FaApp({
   onServerDelete,
   buildInfo
 }) {
-  const [hfNamespace, setHfNamespace] = (0, import_react28.useState)(void 0);
-  (0, import_react28.useEffect)(() => {
+  const [hfNamespace, setHfNamespace] = (0, import_react26.useState)(void 0);
+  (0, import_react26.useEffect)(() => {
     if (!serverBaseUrl) return;
     fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
       if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
@@ -6748,7 +6788,7 @@ function FaApp({
 // src/index.ts
 init_hfStateService();
 init_hfStateService();
-var LIB_VERSION = "2.0.57";
+var LIB_VERSION = "2.0.61";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,