@rslsp1/fa-app-tools 2.0.57 → 2.0.61

package/dist/index.mjs

@@ -353,10 +353,8 @@ var CompactDropdown = ({
 };
 
 // src/components/HistoryPanel.tsx
-import { useState as useState2 } from "react";
 import { motion } from "motion/react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var PAGE_SIZE = 20;
 var formatFriendlyTimestamp = (timestamp) => {
   const date = new Date(timestamp);
   const now = /* @__PURE__ */ new Date();
@@ -368,8 +366,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] = useState2(PAGE_SIZE);
+var HistoryPanel = ({ history, currentResultId, onSelect, onDelete, visibleCount, onLoadMore }) => {
   const visibleHistory = history.slice(0, visibleCount);
   if (history.length === 0) {
     return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-20 text-center gap-4 opacity-10", children: [
@@ -413,7 +410,7 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
       },
       gen.id
     )),
-    visibleCount < history.length && /* @__PURE__ */ jsxs3("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__ */ jsxs3("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"
     ] })
@@ -486,7 +483,7 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
 };
 
 // src/components/SetupPanel.tsx
-import { useRef as useRef2, useState as useState3 } from "react";
+import { useRef as useRef2, useState as useState2 } from "react";
 import { motion as motion3 } from "motion/react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var PRESET_URLS = [
@@ -496,11 +493,11 @@ var PRESET_URLS = [
 ];
 var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
   const workspaceInputRef = useRef2(null);
-  const [urlInput, setUrlInput] = useState3("");
-  const [tokenInput, setTokenInput] = useState3("");
-  const [testStatus, setTestStatus] = useState3("idle");
-  const [result, setResult] = useState3(null);
-  const [fetchError, setFetchError] = useState3(null);
+  const [urlInput, setUrlInput] = useState2("");
+  const [tokenInput, setTokenInput] = useState2("");
+  const [testStatus, setTestStatus] = useState2("idle");
+  const [result, setResult] = useState2(null);
+  const [fetchError, setFetchError] = useState2(null);
   const runTest = async (url) => {
     if (!url.trim()) return;
     setTestStatus("loading");
@@ -663,7 +660,6 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
 };
 
 // src/components/MediaLibrary.tsx
-import { useState as useState4 } from "react";
 import { motion as motion4 } from "motion/react";
 
 // src/lib/grouping.ts
@@ -689,9 +685,7 @@ function groupByPrompt(items) {
 
 // src/components/MediaLibrary.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var PAGE_SIZE2 = 20;
-var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload, onGenerateReference }) => {
-  const [visibleCount, setVisibleCount] = useState4(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);
@@ -764,7 +758,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
           rep.id
         );
       }),
-      visibleCount < groups.length && /* @__PURE__ */ jsx8("div", { className: "col-span-2 flex justify-center pt-2 pb-4", children: /* @__PURE__ */ jsxs6("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__ */ jsx8("div", { className: "col-span-2 flex justify-center pt-2 pb-4", children: /* @__PURE__ */ jsxs6("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"
       ] }) })
@@ -773,7 +767,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
 };
 
 // src/components/ListView.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "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 = useRef3(null);
@@ -838,7 +832,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] = useState5(/* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = useState3(/* @__PURE__ */ new Set());
   const toggleCollapse = (id) => {
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -866,13 +860,13 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
 }
 
 // src/components/AvatarArchitectApp.tsx
-import { useState as useState20, useCallback as useCallback3, useMemo as useMemo2, useEffect as useEffect7, useRef as useRef8 } from "react";
+import { useState as useState18, useCallback as useCallback3, useMemo as useMemo2, useEffect as useEffect7, useRef as useRef8 } from "react";
 
 // src/components/PromptTab.tsx
-import { useRef as useRef4, useState as useState7 } from "react";
+import { useRef as useRef4, useState as useState5 } from "react";
 
 // src/components/CollapsibleCard.tsx
-import { useState as useState6 } from "react";
+import { useState as useState4 } from "react";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var CollapsibleCard = ({
   title,
@@ -883,7 +877,7 @@ var CollapsibleCard = ({
   collapsible = true,
   className = ""
 }) => {
-  const [isOpen, setIsOpen] = useState6(defaultOpen);
+  const [isOpen, setIsOpen] = useState4(defaultOpen);
   return /* @__PURE__ */ jsxs8("div", { className: `border border-neutral-800 rounded-lg ${className}`, children: [
     /* @__PURE__ */ jsxs8(
       "div",
@@ -930,18 +924,18 @@ var PromptTab = ({
   onTagUpdate,
   onTagDelete
 }) => {
-  const [selectedLabels, setSelectedLabels] = useState7(/* @__PURE__ */ new Set());
-  const [instructions, setInstructions] = useState7("");
-  const [rules, setRules] = useState7("");
-  const [activeCategory, setActiveCategory] = useState7(null);
-  const [copied, setCopied] = useState7(false);
+  const [selectedLabels, setSelectedLabels] = useState5(/* @__PURE__ */ new Set());
+  const [instructions, setInstructions] = useState5("");
+  const [rules, setRules] = useState5("");
+  const [activeCategory, setActiveCategory] = useState5(null);
+  const [copied, setCopied] = useState5(false);
   const imgInputRef = useRef4(null);
-  const [addingInCat, setAddingInCat] = useState7(null);
-  const [newLabel, setNewLabel] = useState7("");
-  const [newValue, setNewValue] = useState7("");
-  const [editingTag, setEditingTag] = useState7(null);
-  const [editLabel, setEditLabel] = useState7("");
-  const [editValue, setEditValue] = useState7("");
+  const [addingInCat, setAddingInCat] = useState5(null);
+  const [newLabel, setNewLabel] = useState5("");
+  const [newValue, setNewValue] = useState5("");
+  const [editingTag, setEditingTag] = useState5(null);
+  const [editLabel, setEditLabel] = useState5("");
+  const [editValue, setEditValue] = useState5("");
   const longPressTimer = useRef4(null);
   const longPressActivated = useRef4(false);
   const toggleTag = (label) => {
@@ -1390,7 +1384,7 @@ var PromptTab = ({
 };
 
 // src/components/ProjectSyncTab.tsx
-import { useRef as useRef5, useState as useState8, useEffect as useEffect4 } from "react";
+import { useRef as useRef5, useState as useState6, useEffect as useEffect4 } from "react";
 import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var ProjectSyncTab = ({
   topSlot,
@@ -1412,12 +1406,12 @@ var ProjectSyncTab = ({
 }) => {
   const projectInputRef = useRef5(null);
   const workspaceInputRef = useRef5(null);
-  const [saveName, setSaveName] = useState8("");
-  const [isSaving, setIsSaving] = useState8(false);
-  const [isExporting, setIsExporting] = useState8(false);
-  const [syncState, setSyncState] = useState8("idle");
-  const [syncDiff, setSyncDiff] = useState8(null);
-  const [selectedLocalIds, setSelectedLocalIds] = useState8(/* @__PURE__ */ new Set());
+  const [saveName, setSaveName] = useState6("");
+  const [isSaving, setIsSaving] = useState6(false);
+  const [isExporting, setIsExporting] = useState6(false);
+  const [syncState, setSyncState] = useState6("idle");
+  const [syncDiff, setSyncDiff] = useState6(null);
+  const [selectedLocalIds, setSelectedLocalIds] = useState6(/* @__PURE__ */ new Set());
   const handleExport = async () => {
     if (!onProjectExport) return;
     setIsExporting(true);
@@ -1463,13 +1457,13 @@ var ProjectSyncTab = ({
     });
   };
   const isWorking = projectActionState === "working" || projectActionState === "working-full";
-  const [hfProjects, setHfProjects] = useState8([]);
-  const [hfLoading, setHfLoading] = useState8(false);
-  const [hfSaving, setHfSaving] = useState8(false);
-  const [hfError, setHfError] = useState8(null);
-  const [hfSaveName, setHfSaveName] = useState8("");
-  const [hfSyncProgress, setHfSyncProgress] = useState8(null);
-  const [hfSyncing, setHfSyncing] = useState8(false);
+  const [hfProjects, setHfProjects] = useState6([]);
+  const [hfLoading, setHfLoading] = useState6(false);
+  const [hfSaving, setHfSaving] = useState6(false);
+  const [hfError, setHfError] = useState6(null);
+  const [hfSaveName, setHfSaveName] = useState6("");
+  const [hfSyncProgress, setHfSyncProgress] = useState6(null);
+  const [hfSyncing, setHfSyncing] = useState6(false);
   const loadHfProjects = async (token) => {
     setHfLoading(true);
     setHfError(null);
@@ -1888,7 +1882,7 @@ function toPromptImages(images) {
 }
 
 // src/hooks/useHFState.ts
-import { useState as useState9, useEffect as useEffect5, useRef as useRef6, useCallback } from "react";
+import { useState as useState7, useEffect as useEffect5, useRef as useRef6, useCallback } from "react";
 
 // src/lib/hfReducer.ts
 function applyEvent(state, event) {
@@ -2020,15 +2014,15 @@ function writeOfflineBuffer(events) {
   }
 }
 function useHFState(token, namespace) {
-  const [state, setState] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(false);
-  const [error, setError] = useState9(null);
-  const [eventCount, setEventCount] = useState9(0);
-  const [localOnlyCount, setLocalOnlyCount] = useState9(0);
-  const [forks, setForks] = useState9([]);
-  const [pendingBufferCount, setPendingBufferCount] = useState9(readOfflineBuffer().length);
-  const [lastEventTs, setLastEventTs] = useState9(0);
-  const [hasStateZip, setHasStateZip] = useState9(false);
+  const [state, setState] = useState7(null);
+  const [isLoading, setIsLoading] = useState7(false);
+  const [error, setError] = useState7(null);
+  const [eventCount, setEventCount] = useState7(0);
+  const [localOnlyCount, setLocalOnlyCount] = useState7(0);
+  const [forks, setForks] = useState7([]);
+  const [pendingBufferCount, setPendingBufferCount] = useState7(readOfflineBuffer().length);
+  const [lastEventTs, setLastEventTs] = useState7(0);
+  const [hasStateZip, setHasStateZip] = useState7(false);
   const knownEventPaths = useRef6(/* @__PURE__ */ new Set());
   const knownFilePaths = useRef6(/* @__PURE__ */ new Set());
   const allEventsRef = useRef6([]);
@@ -2166,13 +2160,13 @@ function useHFState(token, namespace) {
 }
 
 // src/components/labs/LabsTab.tsx
-import { useState as useState16 } from "react";
+import { useState as useState14 } from "react";
 
 // src/components/labs/LabRemix.tsx
-import { useState as useState11 } from "react";
+import { useState as useState9 } from "react";
 
 // src/components/labs/LabImagePicker.tsx
-import { useState as useState10 } from "react";
+import { useState as useState8 } from "react";
 import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var LabImagePicker = ({
   availableItems,
@@ -2181,8 +2175,8 @@ var LabImagePicker = ({
   onClose,
   title = "Bild w\xE4hlen"
 }) => {
-  const [search, setSearch] = useState10("");
-  const [drillItem, setDrillItem] = useState10(null);
+  const [search, setSearch] = useState8("");
+  const [drillItem, setDrillItem] = useState8(null);
   const filtered = availableItems.filter(
     (item) => !search || item.prompt.toLowerCase().includes(search.toLowerCase())
   );
@@ -2284,13 +2278,13 @@ var LabImagePicker = ({
 // src/components/labs/LabRemix.tsx
 import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var LabRemix = ({ services, onResult }) => {
-  const [showPicker, setShowPicker] = useState11(false);
-  const [selected, setSelected] = useState11(null);
-  const [instruction, setInstruction] = useState11("");
-  const [generatedPrompt, setGeneratedPrompt] = useState11("");
-  const [resultImage, setResultImage] = useState11(null);
-  const [isGeneratingPrompt, setIsGeneratingPrompt] = useState11(false);
-  const [isGeneratingImage, setIsGeneratingImage] = useState11(false);
+  const [showPicker, setShowPicker] = useState9(false);
+  const [selected, setSelected] = useState9(null);
+  const [instruction, setInstruction] = useState9("");
+  const [generatedPrompt, setGeneratedPrompt] = useState9("");
+  const [resultImage, setResultImage] = useState9(null);
+  const [isGeneratingPrompt, setIsGeneratingPrompt] = useState9(false);
+  const [isGeneratingImage, setIsGeneratingImage] = useState9(false);
   const handleSelectImage = (item, frame) => {
     services.onItemUsed(item);
     setSelected({
@@ -2473,16 +2467,16 @@ var LabRemix = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabBlend.tsx
-import { useState as useState12 } from "react";
+import { useState as useState10 } from "react";
 import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var LabBlend = ({ services, onResult }) => {
-  const [showPickerFor, setShowPickerFor] = useState12(null);
-  const [selectedImages, setSelectedImages] = useState12([]);
-  const [instruction, setInstruction] = useState12("");
-  const [generatedPrompt, setGeneratedPrompt] = useState12("");
-  const [resultImage, setResultImage] = useState12(null);
-  const [isGeneratingPrompt, setIsGeneratingPrompt] = useState12(false);
-  const [isGeneratingImage, setIsGeneratingImage] = useState12(false);
+  const [showPickerFor, setShowPickerFor] = useState10(null);
+  const [selectedImages, setSelectedImages] = useState10([]);
+  const [instruction, setInstruction] = useState10("");
+  const [generatedPrompt, setGeneratedPrompt] = useState10("");
+  const [resultImage, setResultImage] = useState10(null);
+  const [isGeneratingPrompt, setIsGeneratingPrompt] = useState10(false);
+  const [isGeneratingImage, setIsGeneratingImage] = useState10(false);
   const handleSelectImage = (index, item, frame) => {
     services.onItemUsed(item);
     const newImg = {
@@ -2669,17 +2663,17 @@ var LabBlend = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabCompare.tsx
-import { useState as useState13 } from "react";
+import { useState as useState11 } from "react";
 import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var LabCompare = ({ services, onResult }) => {
-  const [showPickerFor, setShowPickerFor] = useState13(null);
-  const [selectedImages, setSelectedImages] = useState13([]);
-  const [instruction, setInstruction] = useState13("");
-  const [analysis, setAnalysis] = useState13("");
-  const [generatedPrompt, setGeneratedPrompt] = useState13("");
-  const [resultImage, setResultImage] = useState13(null);
-  const [isAnalyzing, setIsAnalyzing] = useState13(false);
-  const [isGeneratingImage, setIsGeneratingImage] = useState13(false);
+  const [showPickerFor, setShowPickerFor] = useState11(null);
+  const [selectedImages, setSelectedImages] = useState11([]);
+  const [instruction, setInstruction] = useState11("");
+  const [analysis, setAnalysis] = useState11("");
+  const [generatedPrompt, setGeneratedPrompt] = useState11("");
+  const [resultImage, setResultImage] = useState11(null);
+  const [isAnalyzing, setIsAnalyzing] = useState11(false);
+  const [isGeneratingImage, setIsGeneratingImage] = useState11(false);
   const handleSelectImage = (index, item, frame) => {
     services.onItemUsed(item);
     const newImg = {
@@ -2842,14 +2836,14 @@ var LabCompare = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabLoop.tsx
-import { useState as useState14 } from "react";
+import { useState as useState12 } from "react";
 import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var LabLoop = ({ services, onResult }) => {
-  const [rounds, setRounds] = useState14([]);
-  const [currentInstruction, setCurrentInstruction] = useState14("");
-  const [showPickerForRound, setShowPickerForRound] = useState14(null);
-  const [pendingImages, setPendingImages] = useState14([]);
-  const [isGenerating, setIsGenerating] = useState14(false);
+  const [rounds, setRounds] = useState12([]);
+  const [currentInstruction, setCurrentInstruction] = useState12("");
+  const [showPickerForRound, setShowPickerForRound] = useState12(null);
+  const [pendingImages, setPendingImages] = useState12([]);
+  const [isGenerating, setIsGenerating] = useState12(false);
   const currentPrompt = rounds.length > 0 ? rounds[rounds.length - 1].prompt : "";
   const handleAddImage = (item, frame) => {
     services.onItemUsed(item);
@@ -3005,7 +2999,7 @@ var LabLoop = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabFrameExtractor.tsx
-import { useRef as useRef7, useState as useState15, useCallback as useCallback2 } from "react";
+import { useRef as useRef7, useState as useState13, useCallback as useCallback2 } from "react";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var formatTime = (s) => {
   const m = Math.floor(s / 60);
@@ -3022,12 +3016,12 @@ var LabFrameExtractor = ({
   const videoRef = useRef7(null);
   const canvasRef = useRef7(null);
   const cancelledRef = useRef7(false);
-  const [selectedItem, setSelectedItem] = useState15(null);
-  const [videoSrc, setVideoSrc] = useState15(null);
-  const [videoReady, setVideoReady] = useState15(false);
-  const [frames, setFrames] = useState15([]);
-  const [isExtracting, setIsExtracting] = useState15(false);
-  const [intervalSec, setIntervalSec] = useState15("1");
+  const [selectedItem, setSelectedItem] = useState13(null);
+  const [videoSrc, setVideoSrc] = useState13(null);
+  const [videoReady, setVideoReady] = useState13(false);
+  const [frames, setFrames] = useState13([]);
+  const [isExtracting, setIsExtracting] = useState13(false);
+  const [intervalSec, setIntervalSec] = useState13("1");
   const handleVideoSelect = (item) => {
     const mediaId = item.frames[0]?.mediaId;
     if (!mediaId) return;
@@ -3264,7 +3258,7 @@ var BASE_TABS = [
 ];
 var FRAMES_TAB = { key: "frames", label: "Frames", icon: "crop_original" };
 var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
-  const [activeTab, setActiveTab] = useState16("remix");
+  const [activeTab, setActiveTab] = useState14("remix");
   const showFrames = !!(videoItems && resolveVideoUrl);
   const tabs = showFrames ? [...BASE_TABS, FRAMES_TAB] : BASE_TABS;
   return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full overflow-hidden", children: [
@@ -3298,19 +3292,19 @@ var LabsTab = ({ services, onResult, videoItems, resolveVideoUrl }) => {
 };
 
 // src/components/TagManagerPanel.tsx
-import { useState as useState17 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx20, jsxs as jsxs18 } from "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] = useState17(categories[0] || "");
+  const [selectedCategory, setSelectedCategory] = useState15(categories[0] || "");
   const effectiveCategory = categories.includes(selectedCategory) ? selectedCategory : categories[0] || "";
-  const [editingLabel, setEditingLabel] = useState17(null);
-  const [editState, setEditState] = useState17({ label: "", value: "" });
-  const [newTag, setNewTag] = useState17({ label: "", value: "" });
-  const [movingLabel, setMovingLabel] = useState17(null);
-  const [moveTarget, setMoveTarget] = useState17("");
+  const [editingLabel, setEditingLabel] = useState15(null);
+  const [editState, setEditState] = useState15({ label: "", value: "" });
+  const [newTag, setNewTag] = useState15({ label: "", value: "" });
+  const [movingLabel, setMovingLabel] = useState15(null);
+  const [moveTarget, setMoveTarget] = useState15("");
   const tags = (workspaceTags.by_category[effectiveCategory] || []).filter((t) => !t.is_deleted);
   const otherCategories = categories.filter((c) => c !== effectiveCategory);
   const startEdit = (tag) => {
@@ -3506,7 +3500,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
 }
 
 // src/components/HFTestTab.tsx
-import { useState as useState18 } from "react";
+import { useState as useState16 } from "react";
 import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var HF_BASE = "https://huggingface.co";
 var HF_REPO = "RolandSch/fa-app-state";
@@ -3699,7 +3693,7 @@ function tryFmt(s) {
   }
 }
 function CopyBtn({ text }) {
-  const [done, setDone] = useState18(false);
+  const [done, setDone] = useState16(false);
   return /* @__PURE__ */ jsxs19(
     "button",
     {
@@ -3871,9 +3865,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] = useState18(null);
-  const [results, setResults] = useState18({});
-  const [expanded, setExpanded] = useState18({});
+  const [selected, setSelected] = useState16(null);
+  const [results, setResults] = useState16({});
+  const [expanded, setExpanded] = useState16({});
   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) => {
@@ -4071,7 +4065,7 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
 }
 
 // src/components/ServerTab.tsx
-import { useState as useState19, useEffect as useEffect6 } from "react";
+import { useState as useState17, useEffect as useEffect6 } from "react";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function StarRating({ rating = 0 }) {
   return /* @__PURE__ */ jsx22("div", { className: "flex gap-[2px]", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx22("span", { className: `material-symbols-outlined text-[12px] ${i <= rating ? "text-yellow-400" : "text-white/15"}`, children: "star" }, i)) });
@@ -4084,20 +4078,20 @@ async function serverGet(baseUrl, path) {
   return json && typeof json === "object" && "data" in json ? json.data : json;
 }
 function ServerTab({ serverBaseUrl }) {
-  const [step, setStep] = useState19("user");
-  const [users, setUsers] = useState19([]);
-  const [usersLoading, setUsersLoading] = useState19(false);
-  const [usersError, setUsersError] = useState19(null);
-  const [selectedUser, setSelectedUser] = useState19(null);
-  const [contexts, setContexts] = useState19([]);
-  const [contextsLoading, setContextsLoading] = useState19(false);
-  const [selectedContext, setSelectedContext] = useState19(null);
-  const [tags, setTags] = useState19([]);
-  const [items, setItems] = useState19([]);
-  const [libLoading, setLibLoading] = useState19(false);
-  const [libError, setLibError] = useState19(null);
-  const [activeTag, setActiveTag] = useState19(null);
-  const [preview, setPreview] = useState19(null);
+  const [step, setStep] = useState17("user");
+  const [users, setUsers] = useState17([]);
+  const [usersLoading, setUsersLoading] = useState17(false);
+  const [usersError, setUsersError] = useState17(null);
+  const [selectedUser, setSelectedUser] = useState17(null);
+  const [contexts, setContexts] = useState17([]);
+  const [contextsLoading, setContextsLoading] = useState17(false);
+  const [selectedContext, setSelectedContext] = useState17(null);
+  const [tags, setTags] = useState17([]);
+  const [items, setItems] = useState17([]);
+  const [libLoading, setLibLoading] = useState17(false);
+  const [libError, setLibError] = useState17(null);
+  const [activeTag, setActiveTag] = useState17(null);
+  const [preview, setPreview] = useState17(null);
   useEffect6(() => {
     if (!serverBaseUrl) return;
     setUsersLoading(true);
@@ -4260,19 +4254,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       document.head.appendChild(style);
     }
   }, []);
-  const [showStart, setShowStart] = useState20(true);
-  const [layoutChoice, setLayoutChoice] = useState20(() => {
+  const [showStart, setShowStart] = useState18(true);
+  const [layoutChoice, setLayoutChoice] = useState18(() => {
     try {
       return localStorage.getItem("aa-layout") || null;
     } catch {
       return null;
     }
   });
-  const [projectLoaded, setProjectLoaded] = useState20(false);
-  const [hfToken, setHfToken] = useState20(initialHfToken || "");
-  const [hfTokenInput, setHfTokenInput] = useState20(initialHfToken || "");
-  const [isLoadingFromHF, setIsLoadingFromHF] = useState20(false);
-  const [hfNamespaceLocal, setHfNamespaceLocal] = useState20(() => {
+  const [projectLoaded, setProjectLoaded] = useState18(false);
+  const [hfToken, setHfToken] = useState18(initialHfToken || "");
+  const [hfTokenInput, setHfTokenInput] = useState18(initialHfToken || "");
+  const [isLoadingFromHF, setIsLoadingFromHF] = useState18(false);
+  const [hfNamespaceLocal, setHfNamespaceLocal] = useState18(() => {
     const KNOWN = ["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"];
     const DEFAULT = "app.art-by-rolands.de/";
     try {
@@ -4284,7 +4278,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       return DEFAULT;
     }
   });
-  const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState20(null);
+  const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState18(null);
   useEffect7(() => {
     if (hfNamespace !== void 0) return;
     const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
@@ -4307,10 +4301,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     refresh: refreshHF,
     hasStateZip
   } = useHFState(hfToken, effectiveNamespace);
-  const [imageUploadStatus, setImageUploadStatus] = useState20(/* @__PURE__ */ new Map());
-  const [bootstrapLog, setBootstrapLog] = useState20([]);
-  const [isBootstrapping, setIsBootstrapping] = useState20(false);
-  const [hfMissingImages, setHfMissingImages] = useState20([]);
+  const [imageUploadStatus, setImageUploadStatus] = useState18(/* @__PURE__ */ new Map());
+  const [bootstrapLog, setBootstrapLog] = useState18([]);
+  const [isBootstrapping, setIsBootstrapping] = useState18(false);
+  const [hfMissingImages, setHfMissingImages] = useState18([]);
   const syncTopSlot = /* @__PURE__ */ jsxs21(Fragment9, { children: [
     localOnlyCount > 0 && /* @__PURE__ */ jsxs21("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 ",
@@ -4369,15 +4363,36 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setLayoutChoice(choice);
     setShowStart(false);
   };
-  const [nodes, setNodes] = useState20([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
-  const [edges, setEdges] = useState20([]);
-  const [history, setHistory] = useState20([]);
-  const [galleryItems, setGalleryItems] = useState20([]);
+  const [nodes, setNodes] = useState18([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
+  const [edges, setEdges] = useState18([]);
+  const [history, setHistory] = useState18([]);
+  const [galleryItems, setGalleryItems] = useState18([]);
   const galleryItemsRef = useRef8([]);
   useEffect7(() => {
     galleryItemsRef.current = galleryItems;
   }, [galleryItems]);
   const hfImageNotFoundRef = useRef8(/* @__PURE__ */ new Map());
+  const [galleryVisibleCount, setGalleryVisibleCount] = useState18(20);
+  const [historyVisibleCount, setHistoryVisibleCount] = useState18(20);
+  const loadThumbnailsForEntries = useCallback3(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]);
   useEffect7(() => {
     if (!hfState) return;
     if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
@@ -4404,87 +4419,94 @@ 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] = useState20("");
-  const [isSynthesizing, setIsSynthesizing] = useState20(false);
-  const [activeGenerationsCount, setActiveGenerationsCount] = useState20(0);
-  const [currentResult, setCurrentResult] = useState20(null);
-  const [focusedNodeId, setFocusedNodeId] = useState20(null);
-  const [leftTab, setLeftTab] = useState20("prompt");
-  const [promptFeedback, setPromptFeedback] = useState20(null);
-  const [lastPromptPayload, setLastPromptPayload] = useState20(null);
-  const [isPromptTabGenerating, setIsPromptTabGenerating] = useState20(false);
-  const [activeTab, setActiveTab] = useState20("history");
-  const [mobileTab, setMobileTab] = useState20("stage");
-  const [middlePanel, setMiddlePanel] = useState20("stage");
-  const [recentLabItems, setRecentLabItems] = useState20([]);
-  const [aspectRatio, setAspectRatio] = useState20("1:1");
-  const [selectedModel, setSelectedModel] = useState20("\u{1F34C} Nano Banana Pro");
-  const [seed, setSeed] = useState20(Math.floor(Math.random() * 1e6));
-  const [seedMode, setSeedMode] = useState20("random");
-  const [isLeftCollapsed, setIsLeftCollapsed] = useState20(false);
-  const [isRightCollapsed, setIsRightCollapsed] = useState20(false);
-  const [leftPanelWidth, setLeftPanelWidth] = useState20(() => {
+  useEffect7(() => {
+    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]);
+  useEffect7(() => {
+    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] = useState18("");
+  const [isSynthesizing, setIsSynthesizing] = useState18(false);
+  const [activeGenerationsCount, setActiveGenerationsCount] = useState18(0);
+  const [currentResult, setCurrentResult] = useState18(null);
+  const [focusedNodeId, setFocusedNodeId] = useState18(null);
+  const [leftTab, setLeftTab] = useState18("prompt");
+  const [promptFeedback, setPromptFeedback] = useState18(null);
+  const [lastPromptPayload, setLastPromptPayload] = useState18(null);
+  const [isPromptTabGenerating, setIsPromptTabGenerating] = useState18(false);
+  const [activeTab, setActiveTab] = useState18("history");
+  const [mobileTab, setMobileTab] = useState18("stage");
+  const [middlePanel, setMiddlePanel] = useState18("stage");
+  const [recentLabItems, setRecentLabItems] = useState18([]);
+  const [aspectRatio, setAspectRatio] = useState18("1:1");
+  const [selectedModel, setSelectedModel] = useState18("\u{1F34C} Nano Banana Pro");
+  const [seed, setSeed] = useState18(Math.floor(Math.random() * 1e6));
+  const [seedMode, setSeedMode] = useState18("random");
+  const [imageCount, setImageCount] = useState18(() => {
+    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] = useState18(false);
+  const [isRightCollapsed, setIsRightCollapsed] = useState18(false);
+  const [leftPanelWidth, setLeftPanelWidth] = useState18(() => {
     try {
       return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
     } catch {
       return 260;
     }
   });
-  const [rightPanelWidth, setRightPanelWidth] = useState20(() => {
+  const [rightPanelWidth, setRightPanelWidth] = useState18(() => {
     try {
       return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
     } catch {
       return 320;
     }
   });
-  const [isPromptCollapsed, setIsPromptCollapsed] = useState20(false);
-  const [projectActionState, setProjectActionState] = useState20("idle");
+  const [isPromptCollapsed, setIsPromptCollapsed] = useState18(false);
+  const [projectActionState, setProjectActionState] = useState18("idle");
   const syncServerDataRef = useRef8(null);
-  const [workspaceTags, setWorkspaceTags] = useState20(null);
-  const [serverProjects, setServerProjects] = useState20([]);
-  const [isLoadingFromServer, setIsLoadingFromServer] = useState20(false);
-  const [highContrast, setHighContrast] = useState20(() => {
+  const [workspaceTags, setWorkspaceTags] = useState18(null);
+  const [serverProjects, setServerProjects] = useState18([]);
+  const [isLoadingFromServer, setIsLoadingFromServer] = useState18(false);
+  const [highContrast, setHighContrast] = useState18(() => {
     try {
       return localStorage.getItem("aa-contrast") === "high";
     } catch {
       return false;
     }
   });
-  const [activeReferenceId, setActiveReferenceId] = useState20(null);
-  const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState20(null);
-  const [isScanningImage, setIsScanningImage] = useState20(false);
-  const [touchStartX, setTouchStartX] = useState20(null);
-  const [isFullscreen, setIsFullscreen] = useState20(false);
-  const [zoomScale, setZoomScale] = useState20(1);
-  const [zoomOffset, setZoomOffset] = useState20({ x: 0, y: 0 });
+  const [activeReferenceId, setActiveReferenceId] = useState18(null);
+  const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState18(null);
+  const [isScanningImage, setIsScanningImage] = useState18(false);
+  const [touchStartX, setTouchStartX] = useState18(null);
+  const [isFullscreen, setIsFullscreen] = useState18(false);
+  const [zoomScale, setZoomScale] = useState18(1);
+  const [zoomOffset, setZoomOffset] = useState18({ x: 0, y: 0 });
   const lastPinchDist = useRef8(null);
   const lastTapTime = useRef8(0);
   const dragStart = useRef8(null);
@@ -4640,7 +4662,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   const handleGallerySelect = useCallback3((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}`;
@@ -4691,7 +4713,18 @@ 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__ */ jsxs21(
+    "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__ */ jsx23("span", { className: "material-symbols-outlined text-sky-300", style: { fontSize: 14, lineHeight: 1 }, children: "autorenew" }),
+        /* @__PURE__ */ jsx23("span", { className: "text-[11px] font-bold text-sky-300 tabular-nums", children: activeGenerationsCount })
+      ]
+    }
+  ) : null;
   useKeyboardNavigation(history, currentResult, setCurrentResult);
   const getSubtreeFormat = useCallback3((nodeId, depth = 0) => {
     const node = nodes.find((n) => n.id === nodeId);
@@ -4764,6 +4797,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 {
@@ -5337,7 +5379,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
           /* @__PURE__ */ jsx23(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__ */ jsx23(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__ */ jsx23(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
           /* @__PURE__ */ jsx23("div", { className: "flex-1" }),
+          runningBadge,
           activeReferenceThumbnail ? /* @__PURE__ */ jsxs21("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__ */ jsx23("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
             /* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
@@ -5359,20 +5403,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           ),
           activePrompt && !isSynthesizing && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
         ] }) }),
-        /* @__PURE__ */ jsx23("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx23("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsxs21(
           "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__ */ jsxs21(Fragment9, { children: [
-              /* @__PURE__ */ jsx23("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx23("span", { children: "Generiere..." })
-            ] }) : /* @__PURE__ */ jsxs21(Fragment9, { children: [
+            style: { height: 48, background: activePrompt.trim() ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
+            children: [
               /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
               /* @__PURE__ */ jsx23("span", { children: "Generieren" })
-            ] })
+            ]
           }
         ) }),
         /* @__PURE__ */ jsxs21("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
@@ -5390,9 +5431,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
                 setTouchStartX(null);
               },
               children: [
-                currentResult?.status === "processing" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-3", children: [
-                  /* @__PURE__ */ jsx23("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
-                  /* @__PURE__ */ jsx23("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+                currentResult?.status === "processing" && /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-3 opacity-40", children: [
+                  /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
+                  /* @__PURE__ */ jsx23("span", { className: "text-[11px] uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
                 ] }),
                 currentResult?.status === "error" && /* @__PURE__ */ jsxs21("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
                   /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
@@ -5465,7 +5506,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
               /* @__PURE__ */ jsx23("span", { className: "text-[12px] text-white/60", children: "Prompt" })
             ] }),
-            /* @__PURE__ */ jsxs21("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__ */ jsxs21("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__ */ jsx23("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
               /* @__PURE__ */ jsx23("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
             ] }),
@@ -5482,7 +5523,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           hfToken && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden relative", children: [
-          activeTab === "history" && /* @__PURE__ */ jsx23(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
+          activeTab === "history" && /* @__PURE__ */ jsx23(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__ */ jsx23(
             MediaLibrary,
             {
@@ -5495,9 +5536,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__ */ jsx23(InspectPanel, { currentResult, history, onSelect: (g) => {
@@ -5569,7 +5612,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             }
           ) }),
           workspaceTags && /* @__PURE__ */ jsx23("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ jsx23(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__ */ jsx23(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
@@ -5649,7 +5692,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         /* @__PURE__ */ jsxs21("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__ */ jsx23(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__ */ jsx23(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__ */ jsx23(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions }),
           /* @__PURE__ */ jsx23("div", { style: { flex: 1 } }),
+          runningBadge,
           /* @__PURE__ */ jsx23("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
           /* @__PURE__ */ jsx23("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
         ] }),
@@ -5665,22 +5710,19 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           ),
           activePrompt && /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
         ] }) }),
-        /* @__PURE__ */ jsx23("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx23("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs21(
           "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__ */ jsxs21(Fragment9, { children: [
-              /* @__PURE__ */ jsx23("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
-              /* @__PURE__ */ jsx23("span", { children: "Generiere..." })
-            ] }) : /* @__PURE__ */ jsxs21(Fragment9, { 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__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
               /* @__PURE__ */ jsx23("span", { children: "Generieren" })
-            ] })
+            ]
           }
         ) }),
-        /* @__PURE__ */ jsx23("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsx23(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
+        /* @__PURE__ */ jsx23("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsx23(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__ */ jsxs21("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
         /* @__PURE__ */ jsx23(
@@ -5696,9 +5738,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               setTouchStartX(null);
             },
             children: /* @__PURE__ */ jsxs21("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__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
-                /* @__PURE__ */ jsx23("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
-                /* @__PURE__ */ jsx23("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__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, opacity: 0.4 }, children: [
+                /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 36 }, children: "hourglass_top" }),
+                /* @__PURE__ */ jsx23("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__ */ jsxs21("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
                 /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
@@ -5728,7 +5770,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
             /* @__PURE__ */ jsx23("span", { children: "Prompt" })
           ] }),
-          /* @__PURE__ */ jsxs21("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__ */ jsxs21("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__ */ jsx23("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
             /* @__PURE__ */ jsx23("span", { children: "Referenz" })
           ] }),
@@ -5798,7 +5840,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
           }
         ) }),
-        leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ jsx23(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__ */ jsx23(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__ */ jsx23("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
@@ -5806,7 +5848,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       /* @__PURE__ */ jsxs21("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__ */ jsxs21("div", { className: "flex items-center gap-1.5", children: [
           /* @__PURE__ */ jsx23(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__ */ jsx23(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__ */ jsx23(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__ */ jsx23(CompactDropdown, { value: String(imageCount), displayValue: `${imageCount}\xD7`, onChange: updateImageCount, options: imageCountOptions })
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 mx-auto", children: [
           /* @__PURE__ */ jsx23(
@@ -5836,7 +5879,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             /* @__PURE__ */ jsx23("span", { children: "Ref" })
           ] }),
           /* @__PURE__ */ jsx23("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
-          /* @__PURE__ */ jsx23(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
+          runningBadge,
+          /* @__PURE__ */ jsx23(PillButton, { variant: "solid", icon: "bolt", disabled: !activePrompt.trim(), onClick: () => handleGenerateBatch(), children: "Generieren" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs21("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
@@ -5848,33 +5892,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           const frame = item.frames[0];
           if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
         } }) }) : /* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
-          /* @__PURE__ */ jsx23("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsxs21("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__ */ jsxs21("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__ */ jsx23("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
+          /* @__PURE__ */ jsx23("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsx23("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__ */ jsxs21("div", { className: "flex flex-col items-center gap-4 opacity-40", children: [
+            /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[40px]", children: "hourglass_top" }),
+            /* @__PURE__ */ jsx23("span", { className: "text-[10px] uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+          ] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs21("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
+            /* @__PURE__ */ jsx23("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
+            /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx23("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
+              /* @__PURE__ */ jsx23("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
             ] }),
-            currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-4", children: [
-              /* @__PURE__ */ jsx23("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx23("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
-            ] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs21("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
-              /* @__PURE__ */ jsx23("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
-              /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsx23("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
-                /* @__PURE__ */ jsx23("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
-              ] }),
-              /* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
-            ] }) : /* @__PURE__ */ jsxs21("div", { className: "h-full w-full relative flex items-center justify-center", children: [
-              /* @__PURE__ */ jsx23("img", { src: currentResult.fullBase64 || currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
-              /* @__PURE__ */ jsxs21("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__ */ jsx23(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
-                /* @__PURE__ */ jsx23(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
-                /* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
-              ] })
-            ] }) : /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
-              /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
-              /* @__PURE__ */ jsx23("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
+            /* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
+          ] }) : /* @__PURE__ */ jsxs21("div", { className: "h-full w-full relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx23("img", { src: currentResult.fullBase64 || currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
+            /* @__PURE__ */ jsxs21("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__ */ jsx23(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
+              /* @__PURE__ */ jsx23(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateBatch(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
+              /* @__PURE__ */ jsx23(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
             ] })
-          ] }) }),
+          ] }) : /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
+            /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
+            /* @__PURE__ */ jsx23("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
+          ] }) }) }),
           currentResult?.status === "done" && currentGroup.length > 1 && /* @__PURE__ */ jsx23("div", { className: "px-6 pb-4 shrink-0 flex gap-2 overflow-x-auto", style: { scrollbarWidth: "none" }, children: currentGroup.map((item) => /* @__PURE__ */ jsxs21("div", { style: { position: "relative", flexShrink: 0 }, children: [
             /* @__PURE__ */ jsx23(
               "div",
@@ -5956,7 +5994,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           /* @__PURE__ */ jsx23("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
           /* @__PURE__ */ jsx23("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
         ] }) }),
-        activeTab === "history" && /* @__PURE__ */ jsx23(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: handleGallerySelect, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
+        activeTab === "history" && /* @__PURE__ */ jsx23(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__ */ jsx23(
           MediaLibrary,
           {
@@ -5968,7 +6006,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__ */ jsx23(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
@@ -6004,7 +6044,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/components/FaApp.tsx
-import { useState as useState21, useEffect as useEffect8 } from "react";
+import { useState as useState19, useEffect as useEffect8 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 function FaApp({
   onGenerateImage,
@@ -6024,7 +6064,7 @@ function FaApp({
   onServerDelete,
   buildInfo
 }) {
-  const [hfNamespace, setHfNamespace] = useState21(void 0);
+  const [hfNamespace, setHfNamespace] = useState19(void 0);
   useEffect8(() => {
     if (!serverBaseUrl) return;
     fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
@@ -6057,7 +6097,7 @@ function FaApp({
 }
 
 // src/index.ts
-var LIB_VERSION = "2.0.57";
+var LIB_VERSION = "2.0.61";
 export {
   AvatarArchitectApp,
   CollapsibleCard,