@rslsp1/fa-app-tools 2.0.16 → 2.0.18

package/dist/index.d.mts

@@ -583,6 +583,7 @@ interface HFStateResult {
     error: string | null;
     pendingBufferCount: number;
     eventCount: number;
+    localOnlyCount: number;
     forks: Array<{
         parentTs: number;
         childTs: number[];
@@ -612,6 +613,6 @@ declare function findTips(dag: Dag): number[];
 declare function findForks(dag: Dag): DagFork[];
 declare function topoSort(events: HFEvent[]): HFEvent[];
 
-declare const LIB_VERSION = "2.0.16";
+declare const LIB_VERSION = "2.0.18";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type DagFork, type ExtractedCharacter, FaApp, type FaAppProps, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, type HFEvent, type HFEventVersion, type HFFileInfo$1 as HFFileInfo, type HFMetadataEntry, type HFStateMeta, type HFStateResult, type HFStateSnapshot, HistoryPanel, type ImageAddedPayload, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, type MetadataUpdatedPayload, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type TagUpsertedPayload, type WorkspaceTags, applyEvent, applyEvents, autoLabel, buildBlendInstruction, buildCompareInstruction, buildDag, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, findForks, findTips, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, getHFToken, getSessionClientId, groupGenerationsToLabItems, hfBatchArchive, hfBootstrapFromLegacy, hfDeleteProject, hfDownloadProject, hfListDir, hfListProjects, hfLoadImageAsBase64, hfUploadImage, hfUploadProjectForm, hfUploadSmallFile, importProjectFromZip, injectXMPMetadata, interpretSdkError, loadHFState, loadPendingEvents, parsePromptFile, parsePromptResponse, setHFToken, topoSort, tsFromEventPath, useHFState, useKeyboardNavigation, useOnClickOutside, writeHFEvent };

package/dist/index.d.ts

@@ -583,6 +583,7 @@ interface HFStateResult {
     error: string | null;
     pendingBufferCount: number;
     eventCount: number;
+    localOnlyCount: number;
     forks: Array<{
         parentTs: number;
         childTs: number[];
@@ -612,6 +613,6 @@ declare function findTips(dag: Dag): number[];
 declare function findForks(dag: Dag): DagFork[];
 declare function topoSort(events: HFEvent[]): HFEvent[];
 
-declare const LIB_VERSION = "2.0.16";
+declare const LIB_VERSION = "2.0.18";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type DagFork, type ExtractedCharacter, FaApp, type FaAppProps, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, type HFEvent, type HFEventVersion, type HFFileInfo$1 as HFFileInfo, type HFMetadataEntry, type HFStateMeta, type HFStateResult, type HFStateSnapshot, HistoryPanel, type ImageAddedPayload, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, type MetadataUpdatedPayload, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type TagUpsertedPayload, type WorkspaceTags, applyEvent, applyEvents, autoLabel, buildBlendInstruction, buildCompareInstruction, buildDag, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, findForks, findTips, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, getHFToken, getSessionClientId, groupGenerationsToLabItems, hfBatchArchive, hfBootstrapFromLegacy, hfDeleteProject, hfDownloadProject, hfListDir, hfListProjects, hfLoadImageAsBase64, hfUploadImage, hfUploadProjectForm, hfUploadSmallFile, importProjectFromZip, injectXMPMetadata, interpretSdkError, loadHFState, loadPendingEvents, parsePromptFile, parsePromptResponse, setHFToken, topoSort, tsFromEventPath, useHFState, useKeyboardNavigation, useOnClickOutside, writeHFEvent };

package/dist/index.js

@@ -2610,6 +2610,7 @@ function useHFState(token, namespace) {
   const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
   const [error, setError] = (0, import_react14.useState)(null);
   const [eventCount, setEventCount] = (0, import_react14.useState)(0);
+  const [localOnlyCount, setLocalOnlyCount] = (0, import_react14.useState)(0);
   const [forks, setForks] = (0, import_react14.useState)([]);
   const [pendingBufferCount, setPendingBufferCount] = (0, import_react14.useState)(readOfflineBuffer().length);
   const [lastEventTs, setLastEventTs] = (0, import_react14.useState)(0);
@@ -2642,19 +2643,31 @@ function useHFState(token, namespace) {
         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}`));
+      const hfEvents = await loadPendingEvents(namespace, token, base.meta.consolidatedAt);
+      const hfEventKeys = new Set(hfEvents.map((e) => `${e.ts}_${e.clientId}`));
+      const localOnlyEvents = allEventsRef.current.filter(
+        (e) => !hfEventKeys.has(`${e.ts}_${e.clientId}`)
+      );
+      setLocalOnlyCount(localOnlyEvents.length);
+      if (localOnlyEvents.length) {
+        console.warn("[HF] loadFull: Behalte", localOnlyEvents.length, "lokale Events, die noch nicht auf HF sind");
+      }
+      hfEvents.forEach((e) => knownEventPaths.current.add(`${e.ts}_${e.clientId}`));
       allEventsRef.current = [];
-      const finalState = applyNewEvents(base, events);
+      const finalState = applyNewEvents(base, [...hfEvents, ...localOnlyEvents]);
       setState(finalState);
       const buffer = readOfflineBuffer();
       if (buffer.length) {
+        const failed = [];
         for (const evt of buffer) {
-          await writeHFEvent(namespace, token, evt.type, evt.payload, evt.prevTs).catch(() => {
-          });
+          try {
+            await writeHFEvent(namespace, token, evt.type, evt.payload, evt.prevTs);
+          } catch {
+            failed.push(evt);
+          }
         }
-        writeOfflineBuffer([]);
-        setPendingBufferCount(0);
+        writeOfflineBuffer(failed);
+        setPendingBufferCount(failed.length);
         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);
@@ -2672,6 +2685,9 @@ function useHFState(token, namespace) {
       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}`));
+      const confirmedKeys = new Set(events.map((e) => `${e.ts}_${e.clientId}`));
+      const stillLocalOnly = allEventsRef.current.filter((e) => !confirmedKeys.has(`${e.ts}_${e.clientId}`));
+      setLocalOnlyCount(stillLocalOnly.length);
       setState((prev) => prev ? applyNewEvents(prev, newEvents) : prev);
     } catch {
     }
@@ -2684,7 +2700,7 @@ function useHFState(token, namespace) {
     const id = setInterval(pollNew, POLL_INTERVAL_MS);
     return () => clearInterval(id);
   }, [token, namespace, pollNew]);
-  const writeEvent2 = (0, import_react14.useCallback)(async (type, payload) => {
+  const writeEvent = (0, import_react14.useCallback)(async (type, payload) => {
     const prevTs = lastEventTs ? [lastEventTs] : [state?.meta.consolidatedAt ?? 0];
     console.log("[HF] writeEvent called:", { type, namespace, tokenOk: !!token, prevTs });
     await pollNew();
@@ -2693,6 +2709,9 @@ function useHFState(token, namespace) {
       const event = await writeHFEvent(namespace, token, type, payload, prevTs);
       console.log("[HF] writeHFEvent success:", event.ts);
       knownEventPaths.current.add(`${event.ts}_${event.clientId}`);
+      const confirmedKey = `${event.ts}_${event.clientId}`;
+      const stillLocalOnly = allEventsRef.current.filter((e) => `${e.ts}_${e.clientId}` !== confirmedKey && !knownEventPaths.current.has(`${e.ts}_${e.clientId}`));
+      setLocalOnlyCount(stillLocalOnly.length);
       setState((prev) => prev ? applyNewEvents(prev, [event]) : prev);
       setLastEventTs(event.ts);
       await pollNew();
@@ -2710,6 +2729,7 @@ function useHFState(token, namespace) {
       writeOfflineBuffer([...buffer, offline]);
       setPendingBufferCount(buffer.length + 1);
       setState((prev) => prev ? applyNewEvents(prev, [offline]) : prev);
+      setLocalOnlyCount((prev) => prev + 1);
     }
   }, [namespace, token, lastEventTs, state, pollNew, applyNewEvents]);
   return {
@@ -2717,9 +2737,10 @@ function useHFState(token, namespace) {
     isLoading,
     error,
     pendingBufferCount,
+    localOnlyCount,
     eventCount,
     forks,
-    writeEvent: writeEvent2,
+    writeEvent,
     refresh: loadFull,
     lastEventTs,
     allEvents: allEventsRef.current,
@@ -3974,7 +3995,7 @@ async function uploadViaCdnLib(token, path, bytes, mimeType) {
   }
   return [s];
 }
-async function writeEvent(token, namespace) {
+async function writeTestEvent(token, namespace) {
   const ns = namespace.endsWith("/") ? namespace : namespace ? namespace + "/" : "";
   const ts = Date.now();
   const uuid = crypto.randomUUID().slice(0, 8);
@@ -4099,7 +4120,39 @@ function TestCard({
     ] })
   ] });
 }
-function HFTestTab({ token, namespace, galleryItems }) {
+var EVENT_TYPE_COLORS = {
+  image_added: "#60a5fa",
+  tag_upserted: "#a78bfa",
+  metadata_updated: "#34d399",
+  probe: "#fbbf24"
+};
+function EventMonitor({ events }) {
+  if (!events.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { padding: "12px 14px", fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Events geladen." });
+  }
+  const sorted = [...events].sort((a, b) => b.ts - a.ts).slice(0, 30);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { padding: "8px 10px 4px" }, children: [
+    sorted.map((e, i) => {
+      const color = EVENT_TYPE_COLORS[e.type] || "rgba(255,255,255,0.5)";
+      const date = new Date(e.ts);
+      const timeStr = date.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+      const clientShort = e.clientId?.slice(0, 8) ?? "?";
+      const payloadStr = JSON.stringify(e.payload ?? {});
+      const payloadPreview = payloadStr.length > 80 ? payloadStr.slice(0, 80) + "\u2026" : payloadStr;
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "flex-start", padding: "5px 0", borderBottom: "1px solid rgba(255,255,255,0.04)" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", minWidth: 60, paddingTop: 2, fontVariantNumeric: "tabular-nums" }, children: timeStr }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 11, fontWeight: 700, color, minWidth: 120, flexShrink: 0 }, children: e.type }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.2)", minWidth: 65, flexShrink: 0, fontFamily: "monospace" }, children: clientShort }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.35)", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
+      ] }, `${e.ts}_${e.clientId}_${i}`);
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { padding: "6px 0 2px", fontSize: 9, color: "rgba(255,255,255,0.2)", textAlign: "right" }, children: [
+      events.length,
+      " Events gesamt"
+    ] })
+  ] });
+}
+function HFTestTab({ token, namespace, galleryItems, allEvents = [] }) {
   const [selected, setSelected] = (0, import_react22.useState)(null);
   const [results, setResults] = (0, import_react22.useState)({});
   const [expanded, setExpanded] = (0, import_react22.useState)({});
@@ -4135,7 +4188,7 @@ function HFTestTab({ token, namespace, galleryItems }) {
             break;
         }
       } else {
-        steps = await writeEvent(token, namespace);
+        steps = await writeTestEvent(token, namespace);
       }
     } catch (e) {
       steps = [{ label: "Unexpected error", method: "-", url: "-", reqHeaders: {}, error: String(e?.message ?? e), ok: false }];
@@ -4152,96 +4205,115 @@ function HFTestTab({ token, namespace, galleryItems }) {
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflowY: "auto", padding: "12px 10px 80px", boxSizing: "border-box", fontFamily: "inherit" }, children: [
     noToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { marginBottom: 10, padding: "8px 12px", background: "rgba(248,113,113,0.08)", borderRadius: 8, border: "1px solid rgba(248,113,113,0.2)", fontSize: 12, color: "#f87171" }, children: "Kein HF-Token geladen \u2014 bitte zuerst Token im Sync-Tab eingeben." }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 14 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }, children: [
-        "Bild ausw\xE4hlen (",
-        withResults.length,
-        " verf\xFCgbar)"
-      ] }),
-      withResults.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Bilder in der Galerie. Generiere zuerst ein Bild oder lade von HF." }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }, children: withResults.slice(0, 12).map((g) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        "button",
-        {
-          onClick: () => setSelected(g),
-          style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            "img",
-            {
-              src: g.base64,
-              alt: g.prompt || g.id,
-              style: { width: "100%", aspectRatio: "1", objectFit: "cover", display: "block", borderRadius: 4 }
-            }
-          )
-        },
-        g.id
-      )) }),
-      selected && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "img",
-          {
-            src: selected.base64,
-            style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.7)", marginBottom: 2 }, children: "Ausgew\xE4hlt" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", wordBreak: "break-all" }, children: [
-            "ID: ",
-            selected.id
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      CollapsibleCard,
+      {
+        title: "Event Monitor",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "bolt" }),
+        defaultOpen: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EventMonitor, { events: allEvents })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      CollapsibleCard,
+      {
+        title: "Upload Tests",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "science" }),
+        defaultOpen: false,
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { padding: "10px 10px 4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 14 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }, children: [
+              "Bild ausw\xE4hlen (",
+              withResults.length,
+              " verf\xFCgbar)"
+            ] }),
+            withResults.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Bilder in der Galerie. Generiere zuerst ein Bild oder lade von HF." }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }, children: withResults.slice(0, 12).map((g) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "button",
+              {
+                onClick: () => setSelected(g),
+                style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  "img",
+                  {
+                    src: g.base64,
+                    alt: g.prompt || g.id,
+                    style: { width: "100%", aspectRatio: "1", objectFit: "cover", display: "block", borderRadius: 4 }
+                  }
+                )
+              },
+              g.id
+            )) }),
+            selected && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "img",
+                {
+                  src: selected.base64,
+                  style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.7)", marginBottom: 2 }, children: "Ausgew\xE4hlt" }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", wordBreak: "break-all" }, children: [
+                  "ID: ",
+                  selected.id
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
+                  "Ziel: test/",
+                  selected.id,
+                  ".jpg"
+                ] }),
+                selected.prompt && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selected.prompt })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
-            "Ziel: test/",
-            selected.id,
-            ".jpg"
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 14 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
+              "Bild hochladen \u2192 test/",
+              "{",
+              "id",
+              "}",
+              ".jpg"
+            ] }),
+            imgTests.map((t) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              TestCard,
+              {
+                id: t.id,
+                label: t.label,
+                icon: t.icon,
+                desc: t.desc,
+                disabled: noToken || noImg || results[t.id]?.status === "running",
+                state: results[t.id],
+                onRun: () => run(t.id),
+                expanded: !!expanded[t.id],
+                onToggle: () => setExpanded((e) => ({ ...e, [t.id]: !e[t.id] }))
+              },
+              t.id
+            ))
           ] }),
-          selected.prompt && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selected.prompt })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 4 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
+              "Event schreiben \u2192 ",
+              namespace || "(kein namespace)",
+              "test/events/"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              TestCard,
+              {
+                id: "event",
+                label: "Write Event",
+                icon: "bolt",
+                desc: "Kleines JSON-Event hochladen (direct commit)",
+                disabled: noToken || results["event"]?.status === "running",
+                state: results["event"],
+                onRun: () => run("event"),
+                expanded: !!expanded["event"],
+                onToggle: () => setExpanded((e) => ({ ...e, event: !e.event }))
+              }
+            )
+          ] })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 18 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
-        "Bild hochladen \u2192 test/",
-        "{",
-        "id",
-        "}",
-        ".jpg"
-      ] }),
-      imgTests.map((t) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        TestCard,
-        {
-          id: t.id,
-          label: t.label,
-          icon: t.icon,
-          desc: t.desc,
-          disabled: noToken || noImg || results[t.id]?.status === "running",
-          state: results[t.id],
-          onRun: () => run(t.id),
-          expanded: !!expanded[t.id],
-          onToggle: () => setExpanded((e) => ({ ...e, [t.id]: !e[t.id] }))
-        },
-        t.id
-      ))
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
-        "Event schreiben \u2192 ",
-        namespace || "(kein namespace)",
-        "test/events/"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        TestCard,
-        {
-          id: "event",
-          label: "Write Event",
-          icon: "bolt",
-          desc: "Kleines JSON-Event hochladen (direct commit)",
-          disabled: noToken || results["event"]?.status === "running",
-          state: results["event"],
-          onRun: () => run("event"),
-          expanded: !!expanded["event"],
-          onToggle: () => setExpanded((e) => ({ ...e, event: !e.event }))
-        }
-      )
-    ] })
+      }
+    )
   ] });
 }
 
@@ -4293,7 +4365,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     state: hfState,
     isLoading: isHfRefreshing,
     pendingBufferCount,
+    localOnlyCount,
     eventCount,
+    allEvents: hfAllEvents,
     writeEvent: hfWriteEvent,
     refresh: refreshHF,
     hasStateZip
@@ -4301,6 +4375,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   const [bootstrapLog, setBootstrapLog] = (0, import_react23.useState)([]);
   const [isBootstrapping, setIsBootstrapping] = (0, import_react23.useState)(false);
   const syncTopSlot = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    localOnlyCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { background: "rgba(234,179,8,0.15)", border: "1px solid rgba(234,179,8,0.3)", padding: "4px 10px", fontSize: 11, color: "#fbbf24", borderRadius: 4, marginBottom: 4 }, children: [
+      "\u26A0 ",
+      localOnlyCount,
+      " lokale Event",
+      localOnlyCount > 1 ? "s" : "",
+      " noch nicht auf HF best\xE4tigt"
+    ] }),
     pendingBufferCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
       pendingBufferCount,
       " \xC4nderung",
@@ -4359,7 +4440,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   (0, import_react23.useEffect)(() => {
     galleryItemsRef.current = galleryItems;
   }, [galleryItems]);
-  const hfImageNotFoundRef = (0, import_react23.useRef)(/* @__PURE__ */ new Set());
+  const hfImageNotFoundRef = (0, import_react23.useRef)(/* @__PURE__ */ new Map());
   (0, import_react23.useEffect)(() => {
     if (!hfState) return;
     if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
@@ -4384,18 +4465,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
       return [...localOnly, ...merged];
     });
+    const COOLDOWN_MS = 5 * 60 * 1e3;
     for (const entry of hfState.metadata) {
-      if (hfImageNotFoundRef.current.has(entry.id)) continue;
+      if (galleryItemsRef.current.find((g) => g.id === entry.id)?.base64) continue;
+      const failedAt = hfImageNotFoundRef.current.get(entry.id);
+      if (failedAt && Date.now() - failedAt < COOLDOWN_MS) continue;
       hfLoadImageAsBase64(entry.id, hfToken).then((b64) => {
         if (!b64) {
-          hfImageNotFoundRef.current.add(entry.id);
+          hfImageNotFoundRef.current.set(entry.id, Date.now());
           return;
         }
         const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
         setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
         setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
       }).catch(() => {
-        hfImageNotFoundRef.current.add(entry.id);
+        hfImageNotFoundRef.current.set(entry.id, Date.now());
       });
     }
   }, [hfState]);
@@ -5105,7 +5189,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             }
           )
         ] }),
-        allowDevNamespace && !hfNamespace && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3 w-full", children: [
+        !hfNamespace && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3 w-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
           ["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
@@ -5477,7 +5561,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               onTagMove: handleTagMove
             }
           ),
-          activeTab === "hftest" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HFTestTab, { token: hfToken, namespace: effectiveNamespace, galleryItems }) })
+          activeTab === "hftest" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HFTestTab, { token: hfToken, namespace: effectiveNamespace, galleryItems, allEvents: hfAllEvents }) })
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
@@ -5859,7 +5943,7 @@ function FaApp({
 // src/index.ts
 init_hfStateService();
 init_hfStateService();
-var LIB_VERSION = "2.0.16";
+var LIB_VERSION = "2.0.18";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,

package/dist/index.mjs

@@ -1942,6 +1942,7 @@ function useHFState(token, namespace) {
   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);
@@ -1974,19 +1975,31 @@ function useHFState(token, namespace) {
         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}`));
+      const hfEvents = await loadPendingEvents(namespace, token, base.meta.consolidatedAt);
+      const hfEventKeys = new Set(hfEvents.map((e) => `${e.ts}_${e.clientId}`));
+      const localOnlyEvents = allEventsRef.current.filter(
+        (e) => !hfEventKeys.has(`${e.ts}_${e.clientId}`)
+      );
+      setLocalOnlyCount(localOnlyEvents.length);
+      if (localOnlyEvents.length) {
+        console.warn("[HF] loadFull: Behalte", localOnlyEvents.length, "lokale Events, die noch nicht auf HF sind");
+      }
+      hfEvents.forEach((e) => knownEventPaths.current.add(`${e.ts}_${e.clientId}`));
       allEventsRef.current = [];
-      const finalState = applyNewEvents(base, events);
+      const finalState = applyNewEvents(base, [...hfEvents, ...localOnlyEvents]);
       setState(finalState);
       const buffer = readOfflineBuffer();
       if (buffer.length) {
+        const failed = [];
         for (const evt of buffer) {
-          await writeHFEvent(namespace, token, evt.type, evt.payload, evt.prevTs).catch(() => {
-          });
+          try {
+            await writeHFEvent(namespace, token, evt.type, evt.payload, evt.prevTs);
+          } catch {
+            failed.push(evt);
+          }
         }
-        writeOfflineBuffer([]);
-        setPendingBufferCount(0);
+        writeOfflineBuffer(failed);
+        setPendingBufferCount(failed.length);
         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);
@@ -2004,6 +2017,9 @@ function useHFState(token, namespace) {
       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}`));
+      const confirmedKeys = new Set(events.map((e) => `${e.ts}_${e.clientId}`));
+      const stillLocalOnly = allEventsRef.current.filter((e) => !confirmedKeys.has(`${e.ts}_${e.clientId}`));
+      setLocalOnlyCount(stillLocalOnly.length);
       setState((prev) => prev ? applyNewEvents(prev, newEvents) : prev);
     } catch {
     }
@@ -2016,7 +2032,7 @@ function useHFState(token, namespace) {
     const id = setInterval(pollNew, POLL_INTERVAL_MS);
     return () => clearInterval(id);
   }, [token, namespace, pollNew]);
-  const writeEvent2 = useCallback(async (type, payload) => {
+  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();
@@ -2025,6 +2041,9 @@ function useHFState(token, namespace) {
       const event = await writeHFEvent(namespace, token, type, payload, prevTs);
       console.log("[HF] writeHFEvent success:", event.ts);
       knownEventPaths.current.add(`${event.ts}_${event.clientId}`);
+      const confirmedKey = `${event.ts}_${event.clientId}`;
+      const stillLocalOnly = allEventsRef.current.filter((e) => `${e.ts}_${e.clientId}` !== confirmedKey && !knownEventPaths.current.has(`${e.ts}_${e.clientId}`));
+      setLocalOnlyCount(stillLocalOnly.length);
       setState((prev) => prev ? applyNewEvents(prev, [event]) : prev);
       setLastEventTs(event.ts);
       await pollNew();
@@ -2042,6 +2061,7 @@ function useHFState(token, namespace) {
       writeOfflineBuffer([...buffer, offline]);
       setPendingBufferCount(buffer.length + 1);
       setState((prev) => prev ? applyNewEvents(prev, [offline]) : prev);
+      setLocalOnlyCount((prev) => prev + 1);
     }
   }, [namespace, token, lastEventTs, state, pollNew, applyNewEvents]);
   return {
@@ -2049,9 +2069,10 @@ function useHFState(token, namespace) {
     isLoading,
     error,
     pendingBufferCount,
+    localOnlyCount,
     eventCount,
     forks,
-    writeEvent: writeEvent2,
+    writeEvent,
     refresh: loadFull,
     lastEventTs,
     allEvents: allEventsRef.current,
@@ -3306,7 +3327,7 @@ async function uploadViaCdnLib(token, path, bytes, mimeType) {
   }
   return [s];
 }
-async function writeEvent(token, namespace) {
+async function writeTestEvent(token, namespace) {
   const ns = namespace.endsWith("/") ? namespace : namespace ? namespace + "/" : "";
   const ts = Date.now();
   const uuid = crypto.randomUUID().slice(0, 8);
@@ -3431,7 +3452,39 @@ function TestCard({
     ] })
   ] });
 }
-function HFTestTab({ token, namespace, galleryItems }) {
+var EVENT_TYPE_COLORS = {
+  image_added: "#60a5fa",
+  tag_upserted: "#a78bfa",
+  metadata_updated: "#34d399",
+  probe: "#fbbf24"
+};
+function EventMonitor({ events }) {
+  if (!events.length) {
+    return /* @__PURE__ */ jsx20("div", { style: { padding: "12px 14px", fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Events geladen." });
+  }
+  const sorted = [...events].sort((a, b) => b.ts - a.ts).slice(0, 30);
+  return /* @__PURE__ */ jsxs18("div", { style: { padding: "8px 10px 4px" }, children: [
+    sorted.map((e, i) => {
+      const color = EVENT_TYPE_COLORS[e.type] || "rgba(255,255,255,0.5)";
+      const date = new Date(e.ts);
+      const timeStr = date.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+      const clientShort = e.clientId?.slice(0, 8) ?? "?";
+      const payloadStr = JSON.stringify(e.payload ?? {});
+      const payloadPreview = payloadStr.length > 80 ? payloadStr.slice(0, 80) + "\u2026" : payloadStr;
+      return /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: 8, alignItems: "flex-start", padding: "5px 0", borderBottom: "1px solid rgba(255,255,255,0.04)" }, children: [
+        /* @__PURE__ */ jsx20("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", minWidth: 60, paddingTop: 2, fontVariantNumeric: "tabular-nums" }, children: timeStr }),
+        /* @__PURE__ */ jsx20("span", { style: { fontSize: 11, fontWeight: 700, color, minWidth: 120, flexShrink: 0 }, children: e.type }),
+        /* @__PURE__ */ jsx20("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.2)", minWidth: 65, flexShrink: 0, fontFamily: "monospace" }, children: clientShort }),
+        /* @__PURE__ */ jsx20("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.35)", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
+      ] }, `${e.ts}_${e.clientId}_${i}`);
+    }),
+    /* @__PURE__ */ jsxs18("div", { style: { padding: "6px 0 2px", fontSize: 9, color: "rgba(255,255,255,0.2)", textAlign: "right" }, children: [
+      events.length,
+      " Events gesamt"
+    ] })
+  ] });
+}
+function HFTestTab({ token, namespace, galleryItems, allEvents = [] }) {
   const [selected, setSelected] = useState15(null);
   const [results, setResults] = useState15({});
   const [expanded, setExpanded] = useState15({});
@@ -3467,7 +3520,7 @@ function HFTestTab({ token, namespace, galleryItems }) {
             break;
         }
       } else {
-        steps = await writeEvent(token, namespace);
+        steps = await writeTestEvent(token, namespace);
       }
     } catch (e) {
       steps = [{ label: "Unexpected error", method: "-", url: "-", reqHeaders: {}, error: String(e?.message ?? e), ok: false }];
@@ -3484,96 +3537,115 @@ function HFTestTab({ token, namespace, galleryItems }) {
   ];
   return /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflowY: "auto", padding: "12px 10px 80px", boxSizing: "border-box", fontFamily: "inherit" }, children: [
     noToken && /* @__PURE__ */ jsx20("div", { style: { marginBottom: 10, padding: "8px 12px", background: "rgba(248,113,113,0.08)", borderRadius: 8, border: "1px solid rgba(248,113,113,0.2)", fontSize: 12, color: "#f87171" }, children: "Kein HF-Token geladen \u2014 bitte zuerst Token im Sync-Tab eingeben." }),
-    /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 14 }, children: [
-      /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }, children: [
-        "Bild ausw\xE4hlen (",
-        withResults.length,
-        " verf\xFCgbar)"
-      ] }),
-      withResults.length === 0 ? /* @__PURE__ */ jsx20("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Bilder in der Galerie. Generiere zuerst ein Bild oder lade von HF." }) : /* @__PURE__ */ jsx20("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }, children: withResults.slice(0, 12).map((g) => /* @__PURE__ */ jsx20(
-        "button",
-        {
-          onClick: () => setSelected(g),
-          style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
-          children: /* @__PURE__ */ jsx20(
-            "img",
-            {
-              src: g.base64,
-              alt: g.prompt || g.id,
-              style: { width: "100%", aspectRatio: "1", objectFit: "cover", display: "block", borderRadius: 4 }
-            }
-          )
-        },
-        g.id
-      )) }),
-      selected && /* @__PURE__ */ jsxs18("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
-        /* @__PURE__ */ jsx20(
-          "img",
-          {
-            src: selected.base64,
-            style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
-          }
-        ),
-        /* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx20("div", { style: { fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.7)", marginBottom: 2 }, children: "Ausgew\xE4hlt" }),
-          /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", wordBreak: "break-all" }, children: [
-            "ID: ",
-            selected.id
+    /* @__PURE__ */ jsx20("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx20(
+      CollapsibleCard,
+      {
+        title: "Event Monitor",
+        icon: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "bolt" }),
+        defaultOpen: true,
+        children: /* @__PURE__ */ jsx20(EventMonitor, { events: allEvents })
+      }
+    ) }),
+    /* @__PURE__ */ jsx20(
+      CollapsibleCard,
+      {
+        title: "Upload Tests",
+        icon: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "science" }),
+        defaultOpen: false,
+        children: /* @__PURE__ */ jsxs18("div", { style: { padding: "10px 10px 4px" }, children: [
+          /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 14 }, children: [
+            /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }, children: [
+              "Bild ausw\xE4hlen (",
+              withResults.length,
+              " verf\xFCgbar)"
+            ] }),
+            withResults.length === 0 ? /* @__PURE__ */ jsx20("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Bilder in der Galerie. Generiere zuerst ein Bild oder lade von HF." }) : /* @__PURE__ */ jsx20("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }, children: withResults.slice(0, 12).map((g) => /* @__PURE__ */ jsx20(
+              "button",
+              {
+                onClick: () => setSelected(g),
+                style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
+                children: /* @__PURE__ */ jsx20(
+                  "img",
+                  {
+                    src: g.base64,
+                    alt: g.prompt || g.id,
+                    style: { width: "100%", aspectRatio: "1", objectFit: "cover", display: "block", borderRadius: 4 }
+                  }
+                )
+              },
+              g.id
+            )) }),
+            selected && /* @__PURE__ */ jsxs18("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
+              /* @__PURE__ */ jsx20(
+                "img",
+                {
+                  src: selected.base64,
+                  style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
+                }
+              ),
+              /* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx20("div", { style: { fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.7)", marginBottom: 2 }, children: "Ausgew\xE4hlt" }),
+                /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", wordBreak: "break-all" }, children: [
+                  "ID: ",
+                  selected.id
+                ] }),
+                /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
+                  "Ziel: test/",
+                  selected.id,
+                  ".jpg"
+                ] }),
+                selected.prompt && /* @__PURE__ */ jsx20("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selected.prompt })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
-            "Ziel: test/",
-            selected.id,
-            ".jpg"
+          /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 14 }, children: [
+            /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
+              "Bild hochladen \u2192 test/",
+              "{",
+              "id",
+              "}",
+              ".jpg"
+            ] }),
+            imgTests.map((t) => /* @__PURE__ */ jsx20(
+              TestCard,
+              {
+                id: t.id,
+                label: t.label,
+                icon: t.icon,
+                desc: t.desc,
+                disabled: noToken || noImg || results[t.id]?.status === "running",
+                state: results[t.id],
+                onRun: () => run(t.id),
+                expanded: !!expanded[t.id],
+                onToggle: () => setExpanded((e) => ({ ...e, [t.id]: !e[t.id] }))
+              },
+              t.id
+            ))
           ] }),
-          selected.prompt && /* @__PURE__ */ jsx20("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selected.prompt })
+          /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 4 }, children: [
+            /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
+              "Event schreiben \u2192 ",
+              namespace || "(kein namespace)",
+              "test/events/"
+            ] }),
+            /* @__PURE__ */ jsx20(
+              TestCard,
+              {
+                id: "event",
+                label: "Write Event",
+                icon: "bolt",
+                desc: "Kleines JSON-Event hochladen (direct commit)",
+                disabled: noToken || results["event"]?.status === "running",
+                state: results["event"],
+                onRun: () => run("event"),
+                expanded: !!expanded["event"],
+                onToggle: () => setExpanded((e) => ({ ...e, event: !e.event }))
+              }
+            )
+          ] })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs18("div", { style: { marginBottom: 18 }, children: [
-      /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
-        "Bild hochladen \u2192 test/",
-        "{",
-        "id",
-        "}",
-        ".jpg"
-      ] }),
-      imgTests.map((t) => /* @__PURE__ */ jsx20(
-        TestCard,
-        {
-          id: t.id,
-          label: t.label,
-          icon: t.icon,
-          desc: t.desc,
-          disabled: noToken || noImg || results[t.id]?.status === "running",
-          state: results[t.id],
-          onRun: () => run(t.id),
-          expanded: !!expanded[t.id],
-          onToggle: () => setExpanded((e) => ({ ...e, [t.id]: !e[t.id] }))
-        },
-        t.id
-      ))
-    ] }),
-    /* @__PURE__ */ jsxs18("div", { children: [
-      /* @__PURE__ */ jsxs18("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
-        "Event schreiben \u2192 ",
-        namespace || "(kein namespace)",
-        "test/events/"
-      ] }),
-      /* @__PURE__ */ jsx20(
-        TestCard,
-        {
-          id: "event",
-          label: "Write Event",
-          icon: "bolt",
-          desc: "Kleines JSON-Event hochladen (direct commit)",
-          disabled: noToken || results["event"]?.status === "running",
-          state: results["event"],
-          onRun: () => run("event"),
-          expanded: !!expanded["event"],
-          onToggle: () => setExpanded((e) => ({ ...e, event: !e.event }))
-        }
-      )
-    ] })
+      }
+    )
   ] });
 }
 
@@ -3625,7 +3697,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     state: hfState,
     isLoading: isHfRefreshing,
     pendingBufferCount,
+    localOnlyCount,
     eventCount,
+    allEvents: hfAllEvents,
     writeEvent: hfWriteEvent,
     refresh: refreshHF,
     hasStateZip
@@ -3633,6 +3707,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   const [bootstrapLog, setBootstrapLog] = useState16([]);
   const [isBootstrapping, setIsBootstrapping] = useState16(false);
   const syncTopSlot = /* @__PURE__ */ jsxs19(Fragment9, { children: [
+    localOnlyCount > 0 && /* @__PURE__ */ jsxs19("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 ",
+      localOnlyCount,
+      " lokale Event",
+      localOnlyCount > 1 ? "s" : "",
+      " noch nicht auf HF best\xE4tigt"
+    ] }),
     pendingBufferCount > 0 && /* @__PURE__ */ jsxs19("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
       pendingBufferCount,
       " \xC4nderung",
@@ -3691,7 +3772,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   useEffect6(() => {
     galleryItemsRef.current = galleryItems;
   }, [galleryItems]);
-  const hfImageNotFoundRef = useRef7(/* @__PURE__ */ new Set());
+  const hfImageNotFoundRef = useRef7(/* @__PURE__ */ new Map());
   useEffect6(() => {
     if (!hfState) return;
     if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
@@ -3716,18 +3797,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
       return [...localOnly, ...merged];
     });
+    const COOLDOWN_MS = 5 * 60 * 1e3;
     for (const entry of hfState.metadata) {
-      if (hfImageNotFoundRef.current.has(entry.id)) continue;
+      if (galleryItemsRef.current.find((g) => g.id === entry.id)?.base64) continue;
+      const failedAt = hfImageNotFoundRef.current.get(entry.id);
+      if (failedAt && Date.now() - failedAt < COOLDOWN_MS) continue;
       hfLoadImageAsBase64(entry.id, hfToken).then((b64) => {
         if (!b64) {
-          hfImageNotFoundRef.current.add(entry.id);
+          hfImageNotFoundRef.current.set(entry.id, Date.now());
           return;
         }
         const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
         setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
         setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
       }).catch(() => {
-        hfImageNotFoundRef.current.add(entry.id);
+        hfImageNotFoundRef.current.set(entry.id, Date.now());
       });
     }
   }, [hfState]);
@@ -4437,7 +4521,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             }
           )
         ] }),
-        allowDevNamespace && !hfNamespace && /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3 w-full", children: [
+        !hfNamespace && /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3 w-full", children: [
           /* @__PURE__ */ jsx21("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold flex-shrink-0", children: "State:" }),
           ["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ jsx21(
             "button",
@@ -4809,7 +4893,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               onTagMove: handleTagMove
             }
           ),
-          activeTab === "hftest" && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx21(HFTestTab, { token: hfToken, namespace: effectiveNamespace, galleryItems }) })
+          activeTab === "hftest" && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx21(HFTestTab, { token: hfToken, namespace: effectiveNamespace, galleryItems, allEvents: hfAllEvents }) })
         ] })
       ] }),
       /* @__PURE__ */ jsx21("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
@@ -5189,7 +5273,7 @@ function FaApp({
 }
 
 // src/index.ts
-var LIB_VERSION = "2.0.16";
+var LIB_VERSION = "2.0.18";
 export {
   AvatarArchitectApp,
   CollapsibleCard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rslsp1/fa-app-tools",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "description": "Shared tools and hooks for Fine Art flow apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",