@rslsp1/fa-app-tools 2.0.18 → 2.0.20

package/dist/{chunk-D2WTLDI7.mjs → chunk-I73HODO5.mjs}

@@ -93,8 +93,9 @@ async function hfBatchArchive(moves, token, summary) {
 }
 function tsFromEventPath(repoPath) {
   const filename = repoPath.split("/").pop() || "";
-  const iso = filename.replace(/_[^_]+\.json$/, "").replace(/-/g, (m, i) => i > 7 ? ":" : m);
-  const ts = Date.parse(iso.replace(/T(\d{2}):(\d{2}):(\d{2})\.(\d{3})Z/, "T$1:$2:$3.$4Z"));
+  const base = filename.replace(/_[^_]+\.json$/, "");
+  const iso = base.replace(/T(\d{2})-(\d{2})-(\d{2})-(\d{3})Z$/, "T$1:$2:$3.$4Z");
+  const ts = Date.parse(iso);
   return isNaN(ts) ? 0 : ts;
 }
 async function loadHFState(namespace, token) {

package/dist/{hfStateService-OAECMP4M.mjs → hfStateService-PDBVLFML.mjs}

@@ -24,7 +24,7 @@ import {
   setHFToken,
   tsFromEventPath,
   writeHFEvent
-} from "./chunk-D2WTLDI7.mjs";
+} from "./chunk-I73HODO5.mjs";
 export {
   HF_TOKEN_KEY,
   getHFToken,

package/dist/index.d.mts

@@ -584,6 +584,7 @@ interface HFStateResult {
     pendingBufferCount: number;
     eventCount: number;
     localOnlyCount: number;
+    confirmedEventKeys: Set<string>;
     forks: Array<{
         parentTs: number;
         childTs: number[];
@@ -613,6 +614,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.18";
+declare const LIB_VERSION = "2.0.20";
 
 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

@@ -584,6 +584,7 @@ interface HFStateResult {
     pendingBufferCount: number;
     eventCount: number;
     localOnlyCount: number;
+    confirmedEventKeys: Set<string>;
     forks: Array<{
         parentTs: number;
         childTs: number[];
@@ -613,6 +614,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.18";
+declare const LIB_VERSION = "2.0.20";
 
 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

@@ -381,8 +381,9 @@ async function hfBatchArchive(moves, token, summary) {
 }
 function tsFromEventPath(repoPath) {
   const filename = repoPath.split("/").pop() || "";
-  const iso = filename.replace(/_[^_]+\.json$/, "").replace(/-/g, (m, i) => i > 7 ? ":" : m);
-  const ts = Date.parse(iso.replace(/T(\d{2}):(\d{2}):(\d{2})\.(\d{3})Z/, "T$1:$2:$3.$4Z"));
+  const base = filename.replace(/_[^_]+\.json$/, "");
+  const iso = base.replace(/T(\d{2})-(\d{2})-(\d{2})-(\d{3})Z$/, "T$1:$2:$3.$4Z");
+  const ts = Date.parse(iso);
   return isNaN(ts) ? 0 : ts;
 }
 async function loadHFState(namespace, token) {
@@ -2738,6 +2739,7 @@ function useHFState(token, namespace) {
     error,
     pendingBufferCount,
     localOnlyCount,
+    confirmedEventKeys: knownEventPaths.current,
     eventCount,
     forks,
     writeEvent,
@@ -4126,33 +4128,74 @@ var EVENT_TYPE_COLORS = {
   metadata_updated: "#34d399",
   probe: "#fbbf24"
 };
-function EventMonitor({ events }) {
+function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadStatus }) {
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { padding: "6px 8px 4px" }, children: [
     sorted.map((e, i) => {
-      const color = EVENT_TYPE_COLORS[e.type] || "rgba(255,255,255,0.5)";
+      const eKey = `${e.ts}_${e.clientId}`;
+      const isConfirmed = confirmedEventKeys.has(eKey);
+      const typeColor = 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 isImageEvent = e.type === "image_added";
+      const imgId = isImageEvent ? e.payload?.id : void 0;
+      const galleryItem = imgId ? galleryItems.find((g) => g.id === imgId) : void 0;
+      const uploadStatus = imgId ? imageUploadStatus.get(imgId) : void 0;
       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}`);
+      const payloadPreview = payloadStr.length > 70 ? payloadStr.slice(0, 70) + "\u2026" : payloadStr;
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", gap: 7, alignItems: "flex-start", padding: "6px 2px", borderBottom: "1px solid rgba(255,255,255,0.05)" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { width: 36, height: 36, flexShrink: 0, borderRadius: 4, overflow: "hidden", background: "rgba(255,255,255,0.05)", display: "flex", alignItems: "center", justifyContent: "center" }, children: isImageEvent ? galleryItem?.base64 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: galleryItem.base64, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18, color: "rgba(255,255,255,0.2)" }, children: "image" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16, color: "rgba(255,255,255,0.15)" }, children: e.type === "tag_upserted" ? "label" : e.type === "metadata_updated" ? "edit_note" : "data_object" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 11, fontWeight: 700, color: typeColor }, children: e.type }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", fontVariantNumeric: "tabular-nums" }, children: timeStr }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flex: 1 } }),
+            isConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, fontWeight: 700, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "check_circle" }),
+              "HF"
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, fontWeight: 700, color: "#fbbf24", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "schedule" }),
+              "lokal"
+            ] })
+          ] }),
+          isImageEvent && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
+            uploadStatus === "done" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_done" }),
+              "Bild auf HF"
+            ] }),
+            uploadStatus === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#60a5fa", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_upload" }),
+              "Bild l\xE4dt\u2026"
+            ] }),
+            uploadStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_off" }),
+              "Bild-Upload fehlgeschlagen"
+            ] }),
+            !uploadStatus && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.2)" }, children: "Bild-Upload unbekannt (anderes Ger\xE4t?)" }),
+            galleryItem?.base64 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#4ade80", marginLeft: 6, display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "photo" }),
+              "lokal vorhanden"
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#f87171", marginLeft: 6, display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "broken_image" }),
+              "kein lokales Bild"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
+        ] })
+      ] }, `${eKey}_${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"
+      " Events gesamt \xB7 ",
+      [...confirmedEventKeys].length,
+      " auf HF best\xE4tigt"
     ] })
   ] });
 }
-function HFTestTab({ token, namespace, galleryItems, allEvents = [] }) {
+function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEventKeys = /* @__PURE__ */ new Set(), imageUploadStatus = /* @__PURE__ */ new Map() }) {
   const [selected, setSelected] = (0, import_react22.useState)(null);
   const [results, setResults] = (0, import_react22.useState)({});
   const [expanded, setExpanded] = (0, import_react22.useState)({});
@@ -4211,7 +4254,15 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [] }) {
         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 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          EventMonitor,
+          {
+            events: allEvents,
+            confirmedEventKeys,
+            galleryItems,
+            imageUploadStatus
+          }
+        )
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -4368,10 +4419,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     localOnlyCount,
     eventCount,
     allEvents: hfAllEvents,
+    confirmedEventKeys: hfConfirmedKeys,
     writeEvent: hfWriteEvent,
     refresh: refreshHF,
     hasStateZip
   } = useHFState(hfToken, effectiveNamespace);
+  const [imageUploadStatus, setImageUploadStatus] = (0, import_react23.useState)(/* @__PURE__ */ new Map());
   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: [
@@ -4733,8 +4786,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       });
       console.log("[HF] handleGenerateImage \u2014 condition check:", { hfToken: !!hfToken, base64: !!base64, effectiveNamespace });
       if (hfToken && base64 && effectiveNamespace) {
-        hfUploadImage(base64, genId, hfToken).catch((e) => {
+        setImageUploadStatus((m) => new Map(m).set(genId, "uploading"));
+        hfUploadImage(base64, genId, hfToken).then(() => setImageUploadStatus((m) => new Map(m).set(genId, "done"))).catch((e) => {
           console.error("[HF] hfUploadImage failed:", e);
+          setImageUploadStatus((m) => new Map(m).set(genId, "failed"));
         });
         const entry = {
           id: genId,
@@ -5561,7 +5616,17 @@ 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, allEvents: hfAllEvents }) })
+          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,
+              confirmedEventKeys: hfConfirmedKeys,
+              imageUploadStatus
+            }
+          ) })
         ] })
       ] }),
       /* @__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: [
@@ -5943,7 +6008,7 @@ function FaApp({
 // src/index.ts
 init_hfStateService();
 init_hfStateService();
-var LIB_VERSION = "2.0.18";
+var LIB_VERSION = "2.0.20";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,

package/dist/index.mjs

@@ -21,7 +21,7 @@ import {
   setHFToken,
   tsFromEventPath,
   writeHFEvent
-} from "./chunk-D2WTLDI7.mjs";
+} from "./chunk-I73HODO5.mjs";
 
 // src/hooks/useOnClickOutside.ts
 import { useEffect } from "react";
@@ -1598,7 +1598,7 @@ var ProjectSyncTab = ({
           {
             onClick: async () => {
               try {
-                const { hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-OAECMP4M.mjs");
+                const { hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-PDBVLFML.mjs");
                 const file = await hfDownloadProject2(p.path, hfToken);
                 onHfLoad(file);
               } catch (e) {
@@ -2070,6 +2070,7 @@ function useHFState(token, namespace) {
     error,
     pendingBufferCount,
     localOnlyCount,
+    confirmedEventKeys: knownEventPaths.current,
     eventCount,
     forks,
     writeEvent,
@@ -3458,33 +3459,74 @@ var EVENT_TYPE_COLORS = {
   metadata_updated: "#34d399",
   probe: "#fbbf24"
 };
-function EventMonitor({ events }) {
+function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadStatus }) {
   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: [
+  return /* @__PURE__ */ jsxs18("div", { style: { padding: "6px 8px 4px" }, children: [
     sorted.map((e, i) => {
-      const color = EVENT_TYPE_COLORS[e.type] || "rgba(255,255,255,0.5)";
+      const eKey = `${e.ts}_${e.clientId}`;
+      const isConfirmed = confirmedEventKeys.has(eKey);
+      const typeColor = 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 isImageEvent = e.type === "image_added";
+      const imgId = isImageEvent ? e.payload?.id : void 0;
+      const galleryItem = imgId ? galleryItems.find((g) => g.id === imgId) : void 0;
+      const uploadStatus = imgId ? imageUploadStatus.get(imgId) : void 0;
       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}`);
+      const payloadPreview = payloadStr.length > 70 ? payloadStr.slice(0, 70) + "\u2026" : payloadStr;
+      return /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: 7, alignItems: "flex-start", padding: "6px 2px", borderBottom: "1px solid rgba(255,255,255,0.05)" }, children: [
+        /* @__PURE__ */ jsx20("div", { style: { width: 36, height: 36, flexShrink: 0, borderRadius: 4, overflow: "hidden", background: "rgba(255,255,255,0.05)", display: "flex", alignItems: "center", justifyContent: "center" }, children: isImageEvent ? galleryItem?.base64 ? /* @__PURE__ */ jsx20("img", { src: galleryItem.base64, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 18, color: "rgba(255,255,255,0.2)" }, children: "image" }) : /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 16, color: "rgba(255,255,255,0.15)" }, children: e.type === "tag_upserted" ? "label" : e.type === "metadata_updated" ? "edit_note" : "data_object" }) }),
+        /* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
+            /* @__PURE__ */ jsx20("span", { style: { fontSize: 11, fontWeight: 700, color: typeColor }, children: e.type }),
+            /* @__PURE__ */ jsx20("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", fontVariantNumeric: "tabular-nums" }, children: timeStr }),
+            /* @__PURE__ */ jsx20("div", { style: { flex: 1 } }),
+            isConfirmed ? /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, fontWeight: 700, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "check_circle" }),
+              "HF"
+            ] }) : /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, fontWeight: 700, color: "#fbbf24", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "schedule" }),
+              "lokal"
+            ] })
+          ] }),
+          isImageEvent && /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
+            uploadStatus === "done" && /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_done" }),
+              "Bild auf HF"
+            ] }),
+            uploadStatus === "uploading" && /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#60a5fa", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_upload" }),
+              "Bild l\xE4dt\u2026"
+            ] }),
+            uploadStatus === "failed" && /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_off" }),
+              "Bild-Upload fehlgeschlagen"
+            ] }),
+            !uploadStatus && /* @__PURE__ */ jsx20("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.2)" }, children: "Bild-Upload unbekannt (anderes Ger\xE4t?)" }),
+            galleryItem?.base64 ? /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#4ade80", marginLeft: 6, display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "photo" }),
+              "lokal vorhanden"
+            ] }) : /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#f87171", marginLeft: 6, display: "flex", alignItems: "center", gap: 2 }, children: [
+              /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "broken_image" }),
+              "kein lokales Bild"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx20("div", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
+        ] })
+      ] }, `${eKey}_${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"
+      " Events gesamt \xB7 ",
+      [...confirmedEventKeys].length,
+      " auf HF best\xE4tigt"
     ] })
   ] });
 }
-function HFTestTab({ token, namespace, galleryItems, allEvents = [] }) {
+function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEventKeys = /* @__PURE__ */ new Set(), imageUploadStatus = /* @__PURE__ */ new Map() }) {
   const [selected, setSelected] = useState15(null);
   const [results, setResults] = useState15({});
   const [expanded, setExpanded] = useState15({});
@@ -3543,7 +3585,15 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [] }) {
         title: "Event Monitor",
         icon: /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "bolt" }),
         defaultOpen: true,
-        children: /* @__PURE__ */ jsx20(EventMonitor, { events: allEvents })
+        children: /* @__PURE__ */ jsx20(
+          EventMonitor,
+          {
+            events: allEvents,
+            confirmedEventKeys,
+            galleryItems,
+            imageUploadStatus
+          }
+        )
       }
     ) }),
     /* @__PURE__ */ jsx20(
@@ -3700,10 +3750,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     localOnlyCount,
     eventCount,
     allEvents: hfAllEvents,
+    confirmedEventKeys: hfConfirmedKeys,
     writeEvent: hfWriteEvent,
     refresh: refreshHF,
     hasStateZip
   } = useHFState(hfToken, effectiveNamespace);
+  const [imageUploadStatus, setImageUploadStatus] = useState16(/* @__PURE__ */ new Map());
   const [bootstrapLog, setBootstrapLog] = useState16([]);
   const [isBootstrapping, setIsBootstrapping] = useState16(false);
   const syncTopSlot = /* @__PURE__ */ jsxs19(Fragment9, { children: [
@@ -4065,8 +4117,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       });
       console.log("[HF] handleGenerateImage \u2014 condition check:", { hfToken: !!hfToken, base64: !!base64, effectiveNamespace });
       if (hfToken && base64 && effectiveNamespace) {
-        hfUploadImage(base64, genId, hfToken).catch((e) => {
+        setImageUploadStatus((m) => new Map(m).set(genId, "uploading"));
+        hfUploadImage(base64, genId, hfToken).then(() => setImageUploadStatus((m) => new Map(m).set(genId, "done"))).catch((e) => {
           console.error("[HF] hfUploadImage failed:", e);
+          setImageUploadStatus((m) => new Map(m).set(genId, "failed"));
         });
         const entry = {
           id: genId,
@@ -4550,7 +4604,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             onClick: async () => {
               setIsLoadingFromHF(true);
               try {
-                const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-OAECMP4M.mjs");
+                const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-PDBVLFML.mjs");
                 const projects = await hfListProjects2(hfToken);
                 if (projects.length > 0) {
                   const file = await hfDownloadProject2(projects[0].path, hfToken);
@@ -4893,7 +4947,17 @@ 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, allEvents: hfAllEvents }) })
+          activeTab === "hftest" && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx21(
+            HFTestTab,
+            {
+              token: hfToken,
+              namespace: effectiveNamespace,
+              galleryItems,
+              allEvents: hfAllEvents,
+              confirmedEventKeys: hfConfirmedKeys,
+              imageUploadStatus
+            }
+          ) })
         ] })
       ] }),
       /* @__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: [
@@ -5273,7 +5337,7 @@ function FaApp({
 }
 
 // src/index.ts
-var LIB_VERSION = "2.0.18";
+var LIB_VERSION = "2.0.20";
 export {
   AvatarArchitectApp,
   CollapsibleCard,

package/package.json

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