@rslsp1/fa-app-tools 1.3.16 → 2.0.12

package/dist/index.mjs

@@ -5,18 +5,23 @@ import {
 } from "./chunk-UFXDXENC.mjs";
 import {
   getHFToken,
+  getSessionClientId,
+  hfBatchArchive,
+  hfBootstrapFromLegacy,
   hfDeleteProject,
   hfDownloadProject,
+  hfListDir,
   hfListProjects,
   hfLoadImageAsBase64,
-  hfLoadMetadata,
-  hfLoadTags,
-  hfSaveMetadata,
-  hfSaveTags,
   hfUploadImage,
   hfUploadProjectForm,
-  setHFToken
-} from "./chunk-X6S5BP36.mjs";
+  hfUploadSmallFile,
+  loadHFState,
+  loadPendingEvents,
+  setHFToken,
+  tsFromEventPath,
+  writeHFEvent
+} from "./chunk-WCFXXLKN.mjs";
 
 // src/hooks/useOnClickOutside.ts
 import { useEffect } from "react";
@@ -793,7 +798,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
 }
 
 // src/components/AvatarArchitectApp.tsx
-import { useState as useState14, useCallback, useMemo as useMemo2, useEffect as useEffect5, useRef as useRef6 } from "react";
+import { useState as useState15, useCallback as useCallback2, useMemo as useMemo2, useEffect as useEffect6, useRef as useRef7 } from "react";
 
 // src/components/PromptTab.tsx
 import { useRef as useRef4, useState as useState5 } from "react";
@@ -1320,6 +1325,7 @@ var PromptTab = ({
 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,
   onProjectExport,
   onProjectImport,
   onWorkspaceImport,
@@ -1411,6 +1417,7 @@ var ProjectSyncTab = ({
     if (hfToken) loadHfProjects(hfToken);
   }, [hfToken]);
   return /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 overflow-y-auto dark-scrollbar", children: /* @__PURE__ */ jsxs10("div", { className: "p-6 flex flex-col gap-8", children: [
+    topSlot && /* @__PURE__ */ jsx12("div", { children: topSlot }),
     (onProjectExport || onProjectImport || onWorkspaceImport) && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ jsx12(SectionLabel, { children: "Projekt-ZIP" }),
       /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2", children: [
@@ -1591,7 +1598,7 @@ var ProjectSyncTab = ({
           {
             onClick: async () => {
               try {
-                const { hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-B62RV5K3.mjs");
+                const { hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-6YYT6ATO.mjs");
                 const file = await hfDownloadProject2(p.path, hfToken);
                 onHfLoad(file);
               } catch (e) {
@@ -1812,14 +1819,254 @@ function toPromptImages(images) {
   });
 }
 
+// src/hooks/useHFState.ts
+import { useState as useState7, useEffect as useEffect5, useRef as useRef6, useCallback } from "react";
+
+// src/lib/hfReducer.ts
+function applyEvent(state, event) {
+  if (event.v.major > 1) return state;
+  switch (event.type) {
+    case "image_added": {
+      const p = event.payload;
+      if (state.metadata.some((m) => m.id === p.id)) return state;
+      return { ...state, metadata: [...state.metadata, p] };
+    }
+    case "tag_upserted": {
+      const p = event.payload;
+      const tags = state.tags;
+      const cat = tags.by_category[p.category] || [];
+      const existing = cat.find((t) => t.value === p.value);
+      const updated = { label: p.label, value: p.value, is_user_created: p.is_user_created, is_deleted: p.is_deleted };
+      const newCat = existing ? cat.map((t) => t.value === p.value ? { ...t, ...updated } : t) : [...cat, updated];
+      const newAll = tags.all.some((t) => t.value === p.value && t.category === p.category) ? tags.all.map((t) => t.value === p.value && t.category === p.category ? { ...t, ...updated, category: p.category } : t) : [...tags.all, { ...updated, category: p.category }];
+      return { ...state, tags: { by_category: { ...tags.by_category, [p.category]: newCat }, all: newAll } };
+    }
+    case "metadata_updated": {
+      const p = event.payload;
+      return {
+        ...state,
+        metadata: state.metadata.map((m) => m.id === p.id ? { ...m, ...p.delta } : m)
+      };
+    }
+    default:
+      return state;
+  }
+}
+function applyEvents(state, events) {
+  return events.reduce(applyEvent, state);
+}
+
+// src/lib/hfDag.ts
+function buildDag(events) {
+  const dag = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    dag.set(event.ts, { event, children: [] });
+  }
+  for (const event of events) {
+    for (const parent of event.prevTs) {
+      const node = dag.get(parent);
+      if (node && !node.children.includes(event.ts)) {
+        node.children.push(event.ts);
+      }
+    }
+  }
+  return dag;
+}
+function findTips(dag) {
+  return [...dag.values()].filter((n) => n.children.length === 0).map((n) => n.event.ts);
+}
+function findForks(dag) {
+  const forks = [];
+  for (const [ts, node] of dag) {
+    if (node.children.length > 1) {
+      forks.push({ parentTs: ts, childTs: node.children });
+    }
+  }
+  return forks;
+}
+function topoSort(events) {
+  if (!events.length) return [];
+  const inDegree = /* @__PURE__ */ new Map();
+  const children = /* @__PURE__ */ new Map();
+  const tsSet = new Set(events.map((e) => e.ts));
+  for (const e of events) {
+    inDegree.set(e.ts, 0);
+    children.set(e.ts, []);
+  }
+  for (const e of events) {
+    for (const p of e.prevTs) {
+      if (tsSet.has(p)) {
+        children.get(p).push(e.ts);
+        inDegree.set(e.ts, (inDegree.get(e.ts) || 0) + 1);
+      }
+    }
+  }
+  const queue = events.filter((e) => (inDegree.get(e.ts) || 0) === 0).sort((a, b) => a.ts - b.ts);
+  const result = [];
+  const byTs = new Map(events.map((e) => [e.ts, e]));
+  while (queue.length) {
+    const node = queue.shift();
+    result.push(node);
+    for (const childTs of children.get(node.ts) || []) {
+      const newDeg = (inDegree.get(childTs) || 0) - 1;
+      inDegree.set(childTs, newDeg);
+      if (newDeg === 0) {
+        const child = byTs.get(childTs);
+        const insertAt = queue.findIndex((q) => q.ts > child.ts);
+        if (insertAt === -1) queue.push(child);
+        else queue.splice(insertAt, 0, child);
+      }
+    }
+  }
+  return result;
+}
+
+// src/hooks/useHFState.ts
+var OFFLINE_BUFFER_KEY = "hf-offline-buffer";
+var POLL_INTERVAL_MS = 3e4;
+function readOfflineBuffer() {
+  try {
+    return JSON.parse(localStorage.getItem(OFFLINE_BUFFER_KEY) || "[]");
+  } catch {
+    return [];
+  }
+}
+function writeOfflineBuffer(events) {
+  try {
+    localStorage.setItem(OFFLINE_BUFFER_KEY, JSON.stringify(events));
+  } catch {
+  }
+}
+function useHFState(token, namespace) {
+  const [state, setState] = useState7(null);
+  const [isLoading, setIsLoading] = useState7(false);
+  const [error, setError] = useState7(null);
+  const [eventCount, setEventCount] = 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 allEventsRef = useRef6([]);
+  const applyNewEvents = useCallback((snapshot, newEvents) => {
+    if (!newEvents.length && allEventsRef.current.length === 0) {
+      setEventCount(0);
+      return snapshot;
+    }
+    const sorted = topoSort([...allEventsRef.current, ...newEvents]);
+    allEventsRef.current = sorted;
+    const afterConsolidation = sorted.filter((e) => e.ts > snapshot.meta.consolidatedAt);
+    const dag = buildDag(afterConsolidation);
+    setForks(findForks(dag));
+    setEventCount(afterConsolidation.length);
+    if (afterConsolidation.length) setLastEventTs(Math.max(...afterConsolidation.map((e) => e.ts)));
+    return applyEvents(snapshot, afterConsolidation);
+  }, []);
+  const loadFull = useCallback(async () => {
+    if (!token || !namespace) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const snapshot = await loadHFState(namespace, token);
+      setHasStateZip(snapshot !== null);
+      const base = snapshot ?? {
+        metadata: [],
+        tags: { by_category: {}, all: [] },
+        meta: { consolidatedAt: 0, version: 1 }
+      };
+      const events = await loadPendingEvents(namespace, token, base.meta.consolidatedAt);
+      events.forEach((e) => knownEventPaths.current.add(`${e.ts}_${e.clientId}`));
+      allEventsRef.current = [];
+      const finalState = applyNewEvents(base, events);
+      setState(finalState);
+      const buffer = readOfflineBuffer();
+      if (buffer.length) {
+        for (const evt of buffer) {
+          await writeHFEvent(namespace, token, evt.type, evt.payload, evt.prevTs).catch(() => {
+          });
+        }
+        writeOfflineBuffer([]);
+        setPendingBufferCount(0);
+        const freshEvents = await loadPendingEvents(namespace, token, base.meta.consolidatedAt);
+        freshEvents.forEach((e) => knownEventPaths.current.add(`${e.ts}_${e.clientId}`));
+        setState((prev) => prev ? applyNewEvents(base, freshEvents) : prev);
+      }
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [token, namespace, applyNewEvents]);
+  const pollNew = useCallback(async () => {
+    if (!token || !namespace || !state) return;
+    try {
+      const events = await loadPendingEvents(namespace, token, state.meta.consolidatedAt);
+      const newEvents = events.filter((e) => !knownEventPaths.current.has(`${e.ts}_${e.clientId}`));
+      if (!newEvents.length) return;
+      newEvents.forEach((e) => knownEventPaths.current.add(`${e.ts}_${e.clientId}`));
+      setState((prev) => prev ? applyNewEvents(prev, newEvents) : prev);
+    } catch {
+    }
+  }, [token, namespace, state, applyNewEvents]);
+  useEffect5(() => {
+    if (token && namespace) loadFull();
+  }, [token, namespace]);
+  useEffect5(() => {
+    if (!token || !namespace) return;
+    const id = setInterval(pollNew, POLL_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [token, namespace, pollNew]);
+  const writeEvent = useCallback(async (type, payload) => {
+    const prevTs = lastEventTs ? [lastEventTs] : [state?.meta.consolidatedAt ?? 0];
+    console.log("[HF] writeEvent called:", { type, namespace, tokenOk: !!token, prevTs });
+    await pollNew();
+    try {
+      console.log("[HF] writeHFEvent start, path will be:", `${namespace}events/...`);
+      const event = await writeHFEvent(namespace, token, type, payload, prevTs);
+      console.log("[HF] writeHFEvent success:", event.ts);
+      knownEventPaths.current.add(`${event.ts}_${event.clientId}`);
+      setState((prev) => prev ? applyNewEvents(prev, [event]) : prev);
+      setLastEventTs(event.ts);
+      await pollNew();
+    } catch (e) {
+      console.error("[HF] writeHFEvent FAILED, going to offline buffer:", e);
+      const buffer = readOfflineBuffer();
+      const offline = {
+        v: { major: 1, minor: 0 },
+        type,
+        ts: Date.now(),
+        prevTs,
+        clientId: getSessionClientId(),
+        payload
+      };
+      writeOfflineBuffer([...buffer, offline]);
+      setPendingBufferCount(buffer.length + 1);
+      setState((prev) => prev ? applyNewEvents(prev, [offline]) : prev);
+    }
+  }, [namespace, token, lastEventTs, state, pollNew, applyNewEvents]);
+  return {
+    state,
+    isLoading,
+    error,
+    pendingBufferCount,
+    eventCount,
+    forks,
+    writeEvent,
+    refresh: loadFull,
+    lastEventTs,
+    allEvents: allEventsRef.current,
+    hasStateZip
+  };
+}
+
 // src/components/labs/LabsTab.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 
 // src/components/labs/LabRemix.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/components/labs/LabImagePicker.tsx
-import { useState as useState7 } 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,
@@ -1828,8 +2075,8 @@ var LabImagePicker = ({
   onClose,
   title = "Bild w\xE4hlen"
 }) => {
-  const [search, setSearch] = useState7("");
-  const [drillItem, setDrillItem] = useState7(null);
+  const [search, setSearch] = useState8("");
+  const [drillItem, setDrillItem] = useState8(null);
   const filtered = availableItems.filter(
     (item) => !search || item.prompt.toLowerCase().includes(search.toLowerCase())
   );
@@ -1931,13 +2178,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] = useState8(false);
-  const [selected, setSelected] = useState8(null);
-  const [instruction, setInstruction] = useState8("");
-  const [generatedPrompt, setGeneratedPrompt] = useState8("");
-  const [resultImage, setResultImage] = useState8(null);
-  const [isGeneratingPrompt, setIsGeneratingPrompt] = useState8(false);
-  const [isGeneratingImage, setIsGeneratingImage] = useState8(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({
@@ -2120,16 +2367,16 @@ var LabRemix = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabBlend.tsx
-import { useState as useState9 } 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] = useState9(null);
-  const [selectedImages, setSelectedImages] = useState9([]);
-  const [instruction, setInstruction] = useState9("");
-  const [generatedPrompt, setGeneratedPrompt] = useState9("");
-  const [resultImage, setResultImage] = useState9(null);
-  const [isGeneratingPrompt, setIsGeneratingPrompt] = useState9(false);
-  const [isGeneratingImage, setIsGeneratingImage] = useState9(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 = {
@@ -2316,17 +2563,17 @@ var LabBlend = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabCompare.tsx
-import { useState as useState10 } 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] = useState10(null);
-  const [selectedImages, setSelectedImages] = useState10([]);
-  const [instruction, setInstruction] = useState10("");
-  const [analysis, setAnalysis] = useState10("");
-  const [generatedPrompt, setGeneratedPrompt] = useState10("");
-  const [resultImage, setResultImage] = useState10(null);
-  const [isAnalyzing, setIsAnalyzing] = useState10(false);
-  const [isGeneratingImage, setIsGeneratingImage] = useState10(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 = {
@@ -2489,14 +2736,14 @@ var LabCompare = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabLoop.tsx
-import { useState as useState11 } 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] = useState11([]);
-  const [currentInstruction, setCurrentInstruction] = useState11("");
-  const [showPickerForRound, setShowPickerForRound] = useState11(null);
-  const [pendingImages, setPendingImages] = useState11([]);
-  const [isGenerating, setIsGenerating] = useState11(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);
@@ -2660,7 +2907,7 @@ var TABS = [
   { key: "loop", label: "Loop", icon: "loop" }
 ];
 var LabsTab = ({ services, onResult }) => {
-  const [activeTab, setActiveTab] = useState12("remix");
+  const [activeTab, setActiveTab] = useState13("remix");
   return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ jsx18("div", { className: "flex border-b border-white/5 shrink-0", children: TABS.map((tab) => /* @__PURE__ */ jsxs16(
       "button",
@@ -2684,19 +2931,19 @@ var LabsTab = ({ services, onResult }) => {
 };
 
 // src/components/TagManagerPanel.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { jsx as jsx19, jsxs as jsxs17 } 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] = useState13(categories[0] || "");
+  const [selectedCategory, setSelectedCategory] = useState14(categories[0] || "");
   const effectiveCategory = categories.includes(selectedCategory) ? selectedCategory : categories[0] || "";
-  const [editingLabel, setEditingLabel] = useState13(null);
-  const [editState, setEditState] = useState13({ label: "", value: "" });
-  const [newTag, setNewTag] = useState13({ label: "", value: "" });
-  const [movingLabel, setMovingLabel] = useState13(null);
-  const [moveTarget, setMoveTarget] = useState13("");
+  const [editingLabel, setEditingLabel] = useState14(null);
+  const [editState, setEditState] = useState14({ label: "", value: "" });
+  const [newTag, setNewTag] = useState14({ label: "", value: "" });
+  const [movingLabel, setMovingLabel] = useState14(null);
+  const [moveTarget, setMoveTarget] = useState14("");
   const tags = (workspaceTags.by_category[effectiveCategory] || []).filter((t) => !t.is_deleted);
   const otherCategories = categories.filter((c) => c !== effectiveCategory);
   const startEdit = (tag) => {
@@ -2893,8 +3140,8 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
 
 // src/components/AvatarArchitectApp.tsx
 import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
-function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
-  useEffect5(() => {
+function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
+  useEffect6(() => {
     const id = "flow-styles";
     if (!document.getElementById(id)) {
       const style = document.createElement("style");
@@ -2903,22 +3150,92 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       document.head.appendChild(style);
     }
   }, []);
-  const [showStart, setShowStart] = useState14(true);
-  const [layoutChoice, setLayoutChoice] = useState14(() => {
+  const [showStart, setShowStart] = useState15(true);
+  const [layoutChoice, setLayoutChoice] = useState15(() => {
     try {
       return localStorage.getItem("aa-layout") || null;
     } catch {
       return null;
     }
   });
-  const [projectLoaded, setProjectLoaded] = useState14(false);
-  const [hfToken, setHfToken] = useState14(initialHfToken || "");
-  const [hfTokenInput, setHfTokenInput] = useState14(initialHfToken || "");
-  const [isLoadingFromHF, setIsLoadingFromHF] = useState14(false);
-  const [hfMetadata, setHfMetadata] = useState14([]);
-  const hfTagSaveTimer = useRef6(null);
-  const hfMetaSaveQueue = useRef6(Promise.resolve());
-  const wsInputRef = useRef6(null);
+  const [projectLoaded, setProjectLoaded] = useState15(false);
+  const [hfToken, setHfToken] = useState15(initialHfToken || "");
+  const [hfTokenInput, setHfTokenInput] = useState15(initialHfToken || "");
+  const [isLoadingFromHF, setIsLoadingFromHF] = useState15(false);
+  const [hfNamespaceLocal, setHfNamespaceLocal] = useState15(() => {
+    try {
+      const stored = localStorage.getItem("aa-hf-namespace");
+      if (stored !== null) return stored;
+      return allowDevNamespace ? "app.art-by-rolands.de/" : "";
+    } catch {
+      return "";
+    }
+  });
+  const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState15(null);
+  useEffect6(() => {
+    if (hfNamespace !== void 0) return;
+    const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
+    if (!backendUrl) return;
+    fetch(`${backendUrl}/api/status`).then((r) => r.json()).then((d) => {
+      if (typeof d.hfNamespace === "string" && d.hfNamespace) setHfNamespaceFromServer(d.hfNamespace);
+    }).catch(() => {
+    });
+  }, [hfNamespace]);
+  const effectiveNamespace = hfNamespace ?? hfNamespaceFromServer ?? hfNamespaceLocal;
+  const {
+    state: hfState,
+    isLoading: isHfRefreshing,
+    pendingBufferCount,
+    eventCount,
+    writeEvent: hfWriteEvent,
+    refresh: refreshHF,
+    hasStateZip
+  } = useHFState(hfToken, effectiveNamespace);
+  const [bootstrapLog, setBootstrapLog] = useState15([]);
+  const [isBootstrapping, setIsBootstrapping] = useState15(false);
+  const syncTopSlot = /* @__PURE__ */ jsxs18(Fragment9, { children: [
+    pendingBufferCount > 0 && /* @__PURE__ */ jsxs18("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
+      pendingBufferCount,
+      " \xC4nderung",
+      pendingBufferCount > 1 ? "en" : "",
+      " lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
+    ] }),
+    eventCount > 100 && /* @__PURE__ */ jsxs18("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
+      "\u26A0 ",
+      eventCount,
+      " Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
+    ] }),
+    eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ jsxs18("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
+      eventCount,
+      " Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
+    ] }),
+    hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ jsxs18("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
+      /* @__PURE__ */ jsx20("div", { style: { fontSize: 12, color: "#a8a29e", marginBottom: 6 }, children: effectiveNamespace ? `Kein State-Snapshot in HF (${effectiveNamespace}) \u2014 aus Legacy-Daten (tags.json + metadata.json) migrieren?` : "Namespace wird geladen\u2026" }),
+      /* @__PURE__ */ jsx20(
+        "button",
+        {
+          disabled: isBootstrapping || !effectiveNamespace,
+          onClick: async () => {
+            setIsBootstrapping(true);
+            setBootstrapLog([]);
+            try {
+              await hfBootstrapFromLegacy(effectiveNamespace, hfToken, (msg) => setBootstrapLog((prev) => [...prev, msg]));
+              setBootstrapLog((prev) => [...prev, "\u2713 Fertig"]);
+              setTimeout(() => refreshHF(), 1500);
+            } catch (e) {
+              setBootstrapLog((prev) => [...prev, `Fehler: ${e.message}`]);
+            } finally {
+              setIsBootstrapping(false);
+            }
+          },
+          style: { padding: "5px 12px", background: "#0ea5e9", color: "#fff", border: "none", borderRadius: 4, cursor: isBootstrapping || !effectiveNamespace ? "not-allowed" : "pointer", fontSize: 11, fontWeight: 600, opacity: isBootstrapping || !effectiveNamespace ? 0.6 : 1 },
+          children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
+        }
+      ),
+      bootstrapLog.length > 0 && /* @__PURE__ */ jsx20("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ jsx20("div", { children: l }, i)) })
+    ] })
+  ] });
+  const wsInputRef = useRef7(null);
   const startApp = (choice) => {
     try {
       localStorage.setItem("aa-layout", choice);
@@ -2927,70 +3244,110 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setLayoutChoice(choice);
     setShowStart(false);
   };
-  const [nodes, setNodes] = useState14([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
-  const [edges, setEdges] = useState14([]);
-  const [history, setHistory] = useState14([]);
-  const [galleryItems, setGalleryItems] = useState14([]);
-  const galleryItemsRef = useRef6([]);
-  useEffect5(() => {
+  const [nodes, setNodes] = useState15([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
+  const [edges, setEdges] = useState15([]);
+  const [history, setHistory] = useState15([]);
+  const [galleryItems, setGalleryItems] = useState15([]);
+  const galleryItemsRef = useRef7([]);
+  useEffect6(() => {
     galleryItemsRef.current = galleryItems;
   }, [galleryItems]);
-  const [activePrompt, setActivePrompt] = useState14("");
-  const [isSynthesizing, setIsSynthesizing] = useState14(false);
-  const [activeGenerationsCount, setActiveGenerationsCount] = useState14(0);
-  const [currentResult, setCurrentResult] = useState14(null);
-  const [focusedNodeId, setFocusedNodeId] = useState14(null);
-  const [leftTab, setLeftTab] = useState14("prompt");
-  const [promptFeedback, setPromptFeedback] = useState14(null);
-  const [lastPromptPayload, setLastPromptPayload] = useState14(null);
-  const [isPromptTabGenerating, setIsPromptTabGenerating] = useState14(false);
-  const [activeTab, setActiveTab] = useState14("history");
-  const [mobileTab, setMobileTab] = useState14("stage");
-  const [middlePanel, setMiddlePanel] = useState14("stage");
-  const [recentLabItems, setRecentLabItems] = useState14([]);
-  const [aspectRatio, setAspectRatio] = useState14("1:1");
-  const [selectedModel, setSelectedModel] = useState14("\u{1F34C} Nano Banana Pro");
-  const [seed, setSeed] = useState14(Math.floor(Math.random() * 1e6));
-  const [seedMode, setSeedMode] = useState14("random");
-  const [isLeftCollapsed, setIsLeftCollapsed] = useState14(false);
-  const [isRightCollapsed, setIsRightCollapsed] = useState14(false);
-  const [leftPanelWidth, setLeftPanelWidth] = useState14(() => {
+  const hfImageNotFoundRef = useRef7(/* @__PURE__ */ new Set());
+  useEffect6(() => {
+    if (!hfState) return;
+    if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
+    const hfIds = new Set(hfState.metadata.map((m) => m.id));
+    const skeletons = hfState.metadata.map((m) => ({
+      id: m.id,
+      nodeId: m.id,
+      prompt: m.prompt,
+      seed: m.seed,
+      model: m.model,
+      tags: m.tags || [],
+      timestamp: m.timestamp,
+      status: "done"
+    }));
+    setGalleryItems((prev) => {
+      const localOnly = prev.filter((g) => !hfIds.has(g.id));
+      const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
+      return [...localOnly, ...merged];
+    });
+    setHistory((prev) => {
+      const localOnly = prev.filter((g) => !hfIds.has(g.id));
+      const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
+      return [...localOnly, ...merged];
+    });
+    for (const entry of hfState.metadata) {
+      if (hfImageNotFoundRef.current.has(entry.id)) continue;
+      hfLoadImageAsBase64(entry.id, hfToken).then((b64) => {
+        if (!b64) {
+          hfImageNotFoundRef.current.add(entry.id);
+          return;
+        }
+        const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
+        setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
+        setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
+      }).catch(() => {
+        hfImageNotFoundRef.current.add(entry.id);
+      });
+    }
+  }, [hfState]);
+  const [activePrompt, setActivePrompt] = useState15("");
+  const [isSynthesizing, setIsSynthesizing] = useState15(false);
+  const [activeGenerationsCount, setActiveGenerationsCount] = useState15(0);
+  const [currentResult, setCurrentResult] = useState15(null);
+  const [focusedNodeId, setFocusedNodeId] = useState15(null);
+  const [leftTab, setLeftTab] = useState15("prompt");
+  const [promptFeedback, setPromptFeedback] = useState15(null);
+  const [lastPromptPayload, setLastPromptPayload] = useState15(null);
+  const [isPromptTabGenerating, setIsPromptTabGenerating] = useState15(false);
+  const [activeTab, setActiveTab] = useState15("history");
+  const [mobileTab, setMobileTab] = useState15("stage");
+  const [middlePanel, setMiddlePanel] = useState15("stage");
+  const [recentLabItems, setRecentLabItems] = useState15([]);
+  const [aspectRatio, setAspectRatio] = useState15("1:1");
+  const [selectedModel, setSelectedModel] = useState15("\u{1F34C} Nano Banana Pro");
+  const [seed, setSeed] = useState15(Math.floor(Math.random() * 1e6));
+  const [seedMode, setSeedMode] = useState15("random");
+  const [isLeftCollapsed, setIsLeftCollapsed] = useState15(false);
+  const [isRightCollapsed, setIsRightCollapsed] = useState15(false);
+  const [leftPanelWidth, setLeftPanelWidth] = useState15(() => {
     try {
       return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
     } catch {
       return 260;
     }
   });
-  const [rightPanelWidth, setRightPanelWidth] = useState14(() => {
+  const [rightPanelWidth, setRightPanelWidth] = useState15(() => {
     try {
       return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
     } catch {
       return 320;
     }
   });
-  const [isPromptCollapsed, setIsPromptCollapsed] = useState14(false);
-  const [projectActionState, setProjectActionState] = useState14("idle");
-  const syncServerDataRef = useRef6(null);
-  const [workspaceTags, setWorkspaceTags] = useState14(null);
-  const [serverProjects, setServerProjects] = useState14([]);
-  const [isLoadingFromServer, setIsLoadingFromServer] = useState14(false);
-  const [highContrast, setHighContrast] = useState14(() => {
+  const [isPromptCollapsed, setIsPromptCollapsed] = useState15(false);
+  const [projectActionState, setProjectActionState] = useState15("idle");
+  const syncServerDataRef = useRef7(null);
+  const [workspaceTags, setWorkspaceTags] = useState15(null);
+  const [serverProjects, setServerProjects] = useState15([]);
+  const [isLoadingFromServer, setIsLoadingFromServer] = useState15(false);
+  const [highContrast, setHighContrast] = useState15(() => {
     try {
       return localStorage.getItem("aa-contrast") === "high";
     } catch {
       return false;
     }
   });
-  const [activeReferenceId, setActiveReferenceId] = useState14(null);
-  const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState14(null);
-  const [isScanningImage, setIsScanningImage] = useState14(false);
-  const [touchStartX, setTouchStartX] = useState14(null);
-  const [isFullscreen, setIsFullscreen] = useState14(false);
-  const [zoomScale, setZoomScale] = useState14(1);
-  const [zoomOffset, setZoomOffset] = useState14({ x: 0, y: 0 });
-  const lastPinchDist = useRef6(null);
-  const lastTapTime = useRef6(0);
-  const dragStart = useRef6(null);
+  const [activeReferenceId, setActiveReferenceId] = useState15(null);
+  const [activeReferenceThumbnail, setActiveReferenceThumbnail] = useState15(null);
+  const [isScanningImage, setIsScanningImage] = useState15(false);
+  const [touchStartX, setTouchStartX] = useState15(null);
+  const [isFullscreen, setIsFullscreen] = useState15(false);
+  const [zoomScale, setZoomScale] = useState15(1);
+  const [zoomOffset, setZoomOffset] = useState15({ x: 0, y: 0 });
+  const lastPinchDist = useRef7(null);
+  const lastTapTime = useRef7(0);
+  const dragStart = useRef7(null);
   const openFullscreen = () => {
     setIsFullscreen(true);
     setZoomScale(1);
@@ -3134,16 +3491,16 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     }
   };
   const currentIndex = useMemo2(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
-  const goToPrev = useCallback(() => {
+  const goToPrev = useCallback2(() => {
     if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
   }, [currentIndex, history]);
-  const goToNext = useCallback(() => {
+  const goToNext = useCallback2(() => {
     if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
   }, [currentIndex, history]);
   const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
   const isGenerating = activeGenerationsCount > 0;
   useKeyboardNavigation(history, currentResult, setCurrentResult);
-  const getSubtreeFormat = useCallback((nodeId, depth = 0) => {
+  const getSubtreeFormat = useCallback2((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);
@@ -3183,7 +3540,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         if (prev.id === genId || !options.silent) return finishedGen;
         return prev;
       });
-      if (hfToken && base64) {
+      console.log("[HF] handleGenerateImage \u2014 condition check:", { hfToken: !!hfToken, base64: !!base64, effectiveNamespace });
+      if (hfToken && base64 && effectiveNamespace) {
+        hfUploadImage(base64, genId, hfToken).catch((e) => {
+          console.error("[HF] hfUploadImage failed:", e);
+        });
         const entry = {
           id: genId,
           prompt: promptToUse || void 0,
@@ -3193,20 +3554,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           timestamp: Date.now(),
           mimeType: "image/jpeg"
         };
-        hfUploadImage(base64, genId, hfToken).catch(() => {
-        });
-        const token = hfToken;
-        hfMetaSaveQueue.current = hfMetaSaveQueue.current.then(async () => {
-          try {
-            const existing = await hfLoadMetadata(token);
-            const ids = new Set((existing || []).map((e) => e.id));
-            if (!ids.has(genId)) {
-              const next = [...existing || [], entry];
-              await hfSaveMetadata(next, token);
-              setHfMetadata(next);
-            }
-          } catch {
-          }
+        console.log("[HF] calling hfWriteEvent, namespace:", effectiveNamespace);
+        hfWriteEvent("image_added", entry).catch((e) => {
+          console.error("[HF] hfWriteEvent outer catch:", e);
         });
       }
     } catch (err) {
@@ -3242,6 +3592,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         all: [...prev.all, { ...newTagOption, category: tag.category }]
       };
     });
+    if (hfToken && effectiveNamespace) {
+      const p = { category: tag.category, label: tag.label, value: tag.value, is_user_created: true };
+      hfWriteEvent("tag_upserted", p).catch(() => {
+      });
+    }
   };
   const handleTagUpdate = (originalLabel, originalCategory, updates) => {
     setWorkspaceTags((prev) => {
@@ -3254,8 +3609,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       );
       return { by_category: { ...prev.by_category, [originalCategory]: updatedCat }, all: updatedAll };
     });
+    if (hfToken && effectiveNamespace) {
+      const p = { category: originalCategory, label: updates.label, value: updates.value, is_user_created: true };
+      hfWriteEvent("tag_upserted", p).catch(() => {
+      });
+    }
   };
   const handleTagDelete = (label, category) => {
+    const tagValue = workspaceTags?.by_category[category]?.find((t) => t.label === label)?.value;
     setWorkspaceTags((prev) => {
       if (!prev) return prev;
       const updatedCat = (prev.by_category[category] || []).map(
@@ -3266,6 +3627,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       );
       return { by_category: { ...prev.by_category, [category]: updatedCat }, all: updatedAll };
     });
+    if (hfToken && effectiveNamespace && tagValue) {
+      const p = { category, label, value: tagValue, is_deleted: true };
+      hfWriteEvent("tag_upserted", p).catch(() => {
+      });
+    }
   };
   const handleTagReorder = (category, reorderedTags) => {
     setWorkspaceTags((prev) => {
@@ -3415,38 +3781,39 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     await fetchServerProjects();
   };
   const handleHfInitialSync = async (onProgress) => {
-    if (!hfToken) return;
-    const gens = galleryItems.filter((g) => g.base64 && g.status === "done");
+    if (!hfToken || !effectiveNamespace) return;
+    const existingIds = new Set((hfState?.metadata || []).map((m) => m.id));
+    const gens = galleryItems.filter((g) => g.base64 && g.status === "done" && !existingIds.has(g.id));
     const total = gens.length;
     onProgress(0, total);
     let done = 0;
     for (const gen of gens) {
       const raw = gen.base64.includes(",") ? gen.base64.split(",")[1] : gen.base64;
       const mimeType = gen.base64.startsWith("data:image/png") ? "image/png" : "image/jpeg";
-      await hfUploadImage(raw, gen.id, hfToken, mimeType);
+      await hfUploadImage(raw, gen.id, hfToken, mimeType).catch(() => {
+      });
+      const entry = {
+        id: gen.id,
+        prompt: gen.prompt || void 0,
+        seed: gen.seed,
+        model: gen.model,
+        tags: gen.tags || [],
+        timestamp: gen.timestamp,
+        mimeType
+      };
+      await hfWriteEvent("image_added", entry).catch(() => {
+      });
       done++;
       onProgress(done, total);
     }
-    const localEntries = gens.map((g) => ({
-      id: g.id,
-      prompt: g.prompt || void 0,
-      seed: g.seed,
-      model: g.model,
-      tags: g.tags || [],
-      timestamp: g.timestamp,
-      mimeType: g.base64.startsWith("data:image/png") ? "image/png" : "image/jpeg"
-    }));
-    const existingMeta = await hfLoadMetadata(hfToken);
-    const existingIds = new Set((existingMeta || []).map((e) => e.id));
-    const newEntries = localEntries.filter((e) => !existingIds.has(e.id));
-    const mergedMeta = [...existingMeta || [], ...newEntries];
-    await hfSaveMetadata(mergedMeta, hfToken);
-    setHfMetadata(mergedMeta);
     if (workspaceTags) {
-      const remoteTags = await hfLoadTags(hfToken).catch(() => null);
-      const mergedTags = mergeWorkspaceTags(workspaceTags, remoteTags);
-      await hfSaveTags(mergedTags, hfToken);
-      setWorkspaceTags(mergedTags);
+      for (const [category, tags] of Object.entries(workspaceTags.by_category)) {
+        for (const tag of tags) {
+          const p = { category, label: tag.label, value: tag.value, is_user_created: tag.is_user_created, is_deleted: tag.is_deleted };
+          await hfWriteEvent("tag_upserted", p).catch(() => {
+          });
+        }
+      }
     }
   };
   const handleComputeSyncDiff = async () => {
@@ -3485,87 +3852,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       setTimeout(() => setProjectActionState("idle"), 4e3);
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
   }, [activeTab]);
-  const [isHfRefreshing, setIsHfRefreshing] = useState14(false);
-  const loadFromHF = useCallback(async (token) => {
-    setIsHfRefreshing(true);
-    try {
-      hfLoadTags(token).then((tags) => {
-        if (tags?.by_category) setWorkspaceTags(tags);
-      }).catch(() => {
-      });
-      const entries = await hfLoadMetadata(token);
-      if (!Array.isArray(entries) || entries.length === 0) return;
-      setHfMetadata(entries);
-      const hfIds = new Set(entries.map((e) => e.id));
-      const hfSkeletons = entries.map((e) => ({
-        id: e.id,
-        nodeId: e.id,
-        prompt: e.prompt,
-        seed: e.seed,
-        model: e.model,
-        tags: e.tags || [],
-        timestamp: e.timestamp,
-        status: "done"
-      }));
-      setGalleryItems((prev) => {
-        const localOnly = prev.filter((g) => !hfIds.has(g.id));
-        const merged = hfSkeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
-        return [...localOnly, ...merged];
-      });
-      setHistory((prev) => {
-        const localOnly = prev.filter((g) => !hfIds.has(g.id));
-        const merged = hfSkeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
-        return [...localOnly, ...merged];
-      });
-      for (const entry of entries) {
-        hfLoadImageAsBase64(entry.id, token).then((b64) => {
-          if (!b64) return;
-          const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
-          setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
-          setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
-        }).catch(() => {
-        });
-      }
-      const localOnlyItems = galleryItemsRef.current.filter((g) => !hfIds.has(g.id) && g.base64 && g.status === "done");
-      if (localOnlyItems.length > 0) {
-        hfMetaSaveQueue.current = hfMetaSaveQueue.current.then(async () => {
-          try {
-            let currentMeta = await hfLoadMetadata(token);
-            const existingIds = new Set((currentMeta || []).map((e) => e.id));
-            for (const gen of localOnlyItems) {
-              if (existingIds.has(gen.id)) continue;
-              const raw = gen.base64.includes(",") ? gen.base64.split(",")[1] : gen.base64;
-              const mimeType = gen.base64.startsWith("data:image/png") ? "image/png" : "image/jpeg";
-              await hfUploadImage(raw, gen.id, token, mimeType).catch(() => {
-              });
-              const entry = {
-                id: gen.id,
-                prompt: gen.prompt || void 0,
-                seed: gen.seed,
-                model: gen.model,
-                tags: gen.tags || [],
-                timestamp: gen.timestamp,
-                mimeType
-              };
-              currentMeta = [...currentMeta || [], entry];
-              existingIds.add(gen.id);
-            }
-            await hfSaveMetadata(currentMeta, token);
-            setHfMetadata(currentMeta);
-          } catch {
-          }
-        });
-      }
-    } finally {
-      setIsHfRefreshing(false);
-    }
-  }, []);
-  useEffect5(() => {
-    if (hfToken) loadFromHF(hfToken);
-  }, [hfToken]);
   const mergeWorkspaceTags = (local, remote) => {
     if (!remote?.by_category) return local;
     const merged = {};
@@ -3585,22 +3874,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     const all = Object.entries(merged).flatMap(([cat, tags]) => tags.map((t) => ({ ...t, category: cat })));
     return { by_category: merged, all };
   };
-  useEffect5(() => {
-    if (!hfToken || !workspaceTags) return;
-    if (hfTagSaveTimer.current) clearTimeout(hfTagSaveTimer.current);
-    hfTagSaveTimer.current = setTimeout(async () => {
-      const remote = await hfLoadTags(hfToken).catch(() => null);
-      const merged = mergeWorkspaceTags(workspaceTags, remote);
-      await hfSaveTags(merged, hfToken).catch(() => {
-      });
-      if (Object.values(merged.by_category).some(
-        (tags, i) => tags.length !== Object.values(workspaceTags.by_category)[i]?.length
-      )) setWorkspaceTags(merged);
-    }, 1500);
-    return () => {
-      if (hfTagSaveTimer.current) clearTimeout(hfTagSaveTimer.current);
-    };
-  }, [workspaceTags, hfToken]);
   if (isFullscreen && currentResult?.base64) {
     const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
     return /* @__PURE__ */ jsxs18(
@@ -3732,7 +4005,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             onClick: async () => {
               setIsLoadingFromHF(true);
               try {
-                const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-B62RV5K3.mjs");
+                const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-6YYT6ATO.mjs");
                 const projects = await hfListProjects2(hfToken);
                 if (projects.length > 0) {
                   const file = await hfDownloadProject2(projects[0].path, hfToken);
@@ -3805,6 +4078,28 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         )) }),
         layoutChoice === "mobile-desktop" && /* @__PURE__ */ jsx20("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
         layoutChoice === "tablet-landscape" && /* @__PURE__ */ jsx20("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
+      ] }),
+      !hfNamespace && !hfNamespaceFromServer && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3 w-full max-w-[280px]", children: [
+        /* @__PURE__ */ jsx20("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "State:" }),
+        ["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ jsx20(
+          "button",
+          {
+            onClick: () => {
+              setHfNamespaceLocal(ns);
+              try {
+                localStorage.setItem("aa-hf-namespace", ns);
+              } catch {
+              }
+            },
+            className: "px-3 py-1 rounded-lg text-[11px] font-bold transition-colors",
+            style: {
+              background: hfNamespaceLocal === ns ? "#e7e5e4" : "#44403c",
+              color: hfNamespaceLocal === ns ? "#1c1917" : "#e7e5e4"
+            },
+            children: i === 0 ? "PROD" : "DEV"
+          },
+          ns
+        ))
       ] })
     ] });
   }
@@ -3941,7 +4236,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       mobileTab === "browse" && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col flex-1 min-h-0", children: [
         /* @__PURE__ */ jsxs18("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
           ["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ jsx20("button", { onClick: () => setActiveTab(tab), className: `flex-1 flex items-center justify-center gap-1.5 transition-colors text-[11px] font-bold uppercase tracking-wide ${activeTab === tab ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
-          hfToken && /* @__PURE__ */ jsx20("button", { onClick: () => loadFromHF(hfToken), disabled: isHfRefreshing, className: "w-12 flex items-center justify-center text-white/20 active:text-white transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx20("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
+          hfToken && /* @__PURE__ */ jsx20("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__ */ jsx20("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
         ] }),
         /* @__PURE__ */ jsxs18("div", { className: "flex-1 overflow-hidden relative", children: [
           activeTab === "history" && /* @__PURE__ */ jsx20(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
@@ -4039,6 +4334,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           activeTab === "sync" && /* @__PURE__ */ jsx20(
             ProjectSyncTab,
             {
+              topSlot: syncTopSlot,
               onProjectExport: handleProjectExport,
               onProjectImport: (f) => handleProjectImport(f),
               onWorkspaceImport: handleWorkspaceImport,
@@ -4331,7 +4627,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           setActiveTab(tab);
           setIsRightCollapsed(false);
         }, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : tab === "sync" ? "cloud_sync" : "label" }) }, tab)) }),
-        hfToken && /* @__PURE__ */ jsx20("button", { onClick: () => loadFromHF(hfToken), disabled: isHfRefreshing, className: "w-10 flex items-center justify-center text-white/20 hover:text-white/60 transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx20("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
+        hfToken && /* @__PURE__ */ jsx20("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-10 flex items-center justify-center text-white/20 hover:text-white/60 transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx20("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
         /* @__PURE__ */ jsx20("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
       ] }),
       !isRightCollapsed && /* @__PURE__ */ jsxs18("div", { className: "flex-1 overflow-hidden relative", children: [
@@ -4370,6 +4666,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         activeTab === "sync" && /* @__PURE__ */ jsx20(
           ProjectSyncTab,
           {
+            topSlot: syncTopSlot,
             onProjectExport: handleProjectExport,
             onProjectImport: (f) => handleProjectImport(f),
             onWorkspaceImport: handleWorkspaceImport,
@@ -4396,6 +4693,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/components/FaApp.tsx
+import { useState as useState16, useEffect as useEffect7 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 function FaApp({
   onGenerateImage,
@@ -4407,12 +4705,22 @@ function FaApp({
   onFlowUpload: _onFlowUpload,
   onFlowMediaUpload: _onFlowMediaUpload,
   libToken,
+  allowDevNamespace,
+  serverBaseUrl,
   onFetchServerProjects,
   onServerSave,
   onServerLoad,
   onServerDelete,
   buildInfo
 }) {
+  const [hfNamespace, setHfNamespace] = useState16(void 0);
+  useEffect7(() => {
+    if (!serverBaseUrl) return;
+    fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
+      if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
+    }).catch(() => {
+    });
+  }, [serverBaseUrl]);
   const wrappedPrompt = async (text, options) => {
     const result = await onGeneratePrompt(text, options);
     return result.text;
@@ -4424,7 +4732,9 @@ function FaApp({
       onGeneratePrompt: wrappedPrompt,
       onDownload,
       onSelectMedia,
-      initialHfToken: libToken,
+      initialHfToken: libToken ? libToken.startsWith("hf_") ? libToken : `hf_${libToken}` : void 0,
+      hfNamespace,
+      allowDevNamespace: !hfNamespace && allowDevNamespace,
       onFetchServerProjects,
       onServerSave,
       onServerLoad,
@@ -4435,7 +4745,7 @@ function FaApp({
 }
 
 // src/index.ts
-var LIB_VERSION = "1.3.16";
+var LIB_VERSION = "2.0.12";
 export {
   AvatarArchitectApp,
   CollapsibleCard,
@@ -4460,9 +4770,12 @@ export {
   SectionLabel,
   SetupPanel,
   TagManagerPanel,
+  applyEvent,
+  applyEvents,
   autoLabel,
   buildBlendInstruction,
   buildCompareInstruction,
+  buildDag,
   buildFallbackPrompt,
   buildGenerationPrompt,
   buildImageGenerationOptions,
@@ -4474,27 +4787,36 @@ export {
   cleanAiResponse,
   createFlowServices,
   exportProjectToZip,
+  findForks,
+  findTips,
   formatTreeToMarkdown,
   frameToGeneration,
   getFormattedTimestamp,
   getHFToken,
+  getSessionClientId,
   groupGenerationsToLabItems,
+  hfBatchArchive,
+  hfBootstrapFromLegacy,
   hfDeleteProject,
   hfDownloadProject,
+  hfListDir,
   hfListProjects,
   hfLoadImageAsBase64,
-  hfLoadMetadata,
-  hfLoadTags,
-  hfSaveMetadata,
-  hfSaveTags,
   hfUploadImage,
   hfUploadProjectForm,
+  hfUploadSmallFile,
   importProjectFromZip,
   injectXMPMetadata,
   interpretSdkError,
+  loadHFState,
+  loadPendingEvents,
   parsePromptFile,
   parsePromptResponse,
   setHFToken,
+  topoSort,
+  tsFromEventPath,
+  useHFState,
   useKeyboardNavigation,
-  useOnClickOutside
+  useOnClickOutside,
+  writeHFEvent
 };