@rslsp1/fa-app-tools 1.2.2 → 1.2.4

package/dist/index.d.mts

@@ -445,6 +445,6 @@ declare function buildLoopInstruction(rounds: Array<{
 declare function autoLabel(index: number): string;
 declare function buildReferenceImageMediaIds(images: SelectedLabImage[]): string[];
 
-declare const LIB_VERSION = "1.2.2";
+declare const LIB_VERSION = "1.2.4";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type ExtractedCharacter, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type WorkspaceTags, autoLabel, buildBlendInstruction, buildCompareInstruction, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, groupGenerationsToLabItems, importProjectFromZip, injectXMPMetadata, interpretSdkError, parsePromptFile, parsePromptResponse, useKeyboardNavigation, useOnClickOutside };

package/dist/index.d.ts

@@ -445,6 +445,6 @@ declare function buildLoopInstruction(rounds: Array<{
 declare function autoLabel(index: number): string;
 declare function buildReferenceImageMediaIds(images: SelectedLabImage[]): string[];
 
-declare const LIB_VERSION = "1.2.2";
+declare const LIB_VERSION = "1.2.4";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type ExtractedCharacter, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type WorkspaceTags, autoLabel, buildBlendInstruction, buildCompareInstruction, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, groupGenerationsToLabItems, importProjectFromZip, injectXMPMetadata, interpretSdkError, parsePromptFile, parsePromptResponse, useKeyboardNavigation, useOnClickOutside };

package/dist/index.js

@@ -738,34 +738,55 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
 var import_react7 = require("react");
 var import_react8 = require("motion/react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var PRESET_URLS = [
+  "https://jsonplaceholder.typicode.com/todos/1",
+  "https://huggingface.co/api/whoami-v2",
+  "https://esm.sh/@rslsp1/fa-app-tools@latest"
+];
 var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
   const workspaceInputRef = (0, import_react7.useRef)(null);
-  const blobTestInputRef = (0, import_react7.useRef)(null);
-  const [blobStatus, setBlobStatus] = (0, import_react7.useState)("idle");
-  const [blobThumb, setBlobThumb] = (0, import_react7.useState)(null);
-  const [blobError, setBlobError] = (0, import_react7.useState)(null);
-  const handleBlobTest = async (file) => {
-    setBlobStatus("loading");
-    setBlobThumb(null);
-    setBlobError(null);
-    const blobUrl = URL.createObjectURL(file);
+  const [urlInput, setUrlInput] = (0, import_react7.useState)("");
+  const [tokenInput, setTokenInput] = (0, import_react7.useState)("");
+  const [testStatus, setTestStatus] = (0, import_react7.useState)("idle");
+  const [result, setResult] = (0, import_react7.useState)(null);
+  const [fetchError, setFetchError] = (0, import_react7.useState)(null);
+  const runTest = async (url) => {
+    if (!url.trim()) return;
+    setTestStatus("loading");
+    setResult(null);
+    setFetchError(null);
+    const t0 = Date.now();
     try {
-      const res = await fetch(blobUrl);
-      if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
-      const blob = await res.blob();
-      const dataUrl = await new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = () => reject(new Error("FileReader failed"));
-        reader.readAsDataURL(blob);
+      const reqHeaders = {};
+      if (tokenInput.trim()) reqHeaders["Authorization"] = `Bearer ${tokenInput.trim()}`;
+      const res = await fetch(url.trim(), { headers: reqHeaders });
+      const durationMs = Date.now() - t0;
+      const contentType = res.headers.get("content-type") || "";
+      const headers = {};
+      res.headers.forEach((v, k) => {
+        headers[k] = v;
       });
-      setBlobThumb(dataUrl);
-      setBlobStatus("ok");
+      const blob = await res.blob();
+      const bodySize = blob.size;
+      const isImage = contentType.startsWith("image/");
+      let bodyPreview = "";
+      let imageDataUrl;
+      if (isImage) {
+        imageDataUrl = await new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = reject;
+          reader.readAsDataURL(blob);
+        });
+      } else {
+        const text = await blob.text();
+        bodyPreview = text.slice(0, 500);
+      }
+      setResult({ status: res.status, statusText: res.statusText, contentType, headers, bodyPreview, isImage, imageDataUrl, bodySize, durationMs });
+      setTestStatus("ok");
     } catch (e) {
-      setBlobError(e.message || String(e));
-      setBlobStatus("error");
-    } finally {
-      URL.revokeObjectURL(blobUrl);
+      setFetchError(e.message || String(e));
+      setTestStatus("error");
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react8.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-6 flex flex-col gap-10 overflow-y-auto", children: [
@@ -783,42 +804,97 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionLabel, { children: "blob: URL Test" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Testet ob fetch() auf blob: URLs funktioniert \u2014 lokale Datei \u2192 createObjectURL \u2192 fetch \u2192 base64." })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionLabel, { children: "URL Fetch Diagnose" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Testet ob fetch() auf externe URLs funktioniert." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        PillButton,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-col gap-1", children: PRESET_URLS.map((u) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
         {
-          variant: "outline",
-          icon: blobStatus === "loading" ? "sync" : "image_search",
-          onClick: () => blobTestInputRef.current?.click(),
-          children: "Bild w\xE4hlen & testen"
-        }
-      ),
+          onClick: () => {
+            setUrlInput(u);
+            runTest(u);
+          },
+          className: "text-left px-2 py-1 rounded bg-white/3 border border-white/5 text-[9px] text-white/40 hover:text-white/70 hover:bg-white/6 font-mono truncate transition",
+          children: u
+        },
+        u
+      )) }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
-          ref: blobTestInputRef,
-          type: "file",
-          accept: "image/*",
-          className: "hidden",
-          onChange: (e) => {
-            const f = e.target.files?.[0];
-            if (f) handleBlobTest(f);
-            e.target.value = "";
-          }
+          value: tokenInput,
+          onChange: (e) => setTokenInput(e.target.value),
+          placeholder: "Bearer Token (optional)",
+          type: "password",
+          className: "w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-[11px] text-white/60 outline-none focus:border-white/20 placeholder:text-white/20 font-mono"
         }
       ),
-      blobStatus === "ok" && blobThumb && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: blobThumb, alt: "blob test", className: "w-full max-h-48 object-contain rounded-xl border border-white/10 bg-black/40" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-[10px] text-green-400 font-mono flex items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "check_circle" }),
-          "blob: fetch \u2713 \u2014 base64 erfolgreich"
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            value: urlInput,
+            onChange: (e) => setUrlInput(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && runTest(urlInput),
+            placeholder: "https://...",
+            className: "flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-[11px] text-white/80 outline-none focus:border-white/20 placeholder:text-white/20 font-mono"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            onClick: () => runTest(urlInput),
+            disabled: testStatus === "loading" || !urlInput.trim(),
+            className: "px-3 py-2 bg-white/10 hover:bg-white/15 border border-white/10 rounded-xl text-white/60 transition disabled:opacity-40 shrink-0",
+            children: testStatus === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "material-symbols-outlined text-[16px] animate-spin", children: "sync" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "material-symbols-outlined text-[16px]", children: "send" })
+          }
+        )
+      ] }),
+      testStatus === "ok" && result && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2 bg-white/3 border border-white/8 rounded-xl p-3 text-[10px] font-mono", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: `font-bold ${result.status < 400 ? "text-green-400" : "text-red-400"}`, children: [
+            result.status,
+            " ",
+            result.statusText
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-white/30", children: "\xB7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-white/50", children: [
+            result.durationMs,
+            "ms"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-white/30", children: "\xB7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-white/50", children: [
+            (result.bodySize / 1024).toFixed(1),
+            " KB"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-white/40", children: [
+          "Content-Type: ",
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-white/70", children: result.contentType })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("details", { className: "cursor-pointer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("summary", { className: "text-white/30 hover:text-white/60 transition", children: [
+            "Headers (",
+            Object.keys(result.headers).length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-1 space-y-0.5 pl-2 border-l border-white/10", children: Object.entries(result.headers).map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-white/30", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-white/50", children: [
+              k,
+              ":"
+            ] }),
+            " ",
+            v
+          ] }, k)) })
+        ] }),
+        result.isImage && result.imageDataUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: result.imageDataUrl, alt: "response", className: "w-full max-h-40 object-contain rounded-lg border border-white/10 bg-black/40 mt-1" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("pre", { className: "text-white/60 whitespace-pre-wrap break-all bg-black/30 rounded-lg p-2 max-h-40 overflow-y-auto text-[9px]", children: [
+          result.bodyPreview,
+          result.bodySize > 500 ? "\n\u2026" : ""
         ] })
       ] }),
-      blobStatus === "error" && blobError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-[10px] text-red-400 font-mono flex items-start gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "material-symbols-outlined text-[14px] shrink-0", children: "error" }),
-        blobError
+      testStatus === "error" && fetchError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "bg-red-900/20 border border-red-700/30 rounded-xl p-3 text-[10px] font-mono text-red-400 flex items-start gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "material-symbols-outlined text-[14px] shrink-0 mt-0.5", children: "error" }),
+        fetchError
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-auto p-4 bg-white/5 rounded-2xl border border-white/5 flex flex-col gap-2 opacity-50", children: [
@@ -4180,7 +4256,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/index.ts
-var LIB_VERSION = "1.2.2";
+var LIB_VERSION = "1.2.4";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,

package/dist/index.mjs

@@ -656,34 +656,55 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
 import { useRef as useRef2, useState as useState2 } from "react";
 import { motion as motion3 } from "motion/react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var PRESET_URLS = [
+  "https://jsonplaceholder.typicode.com/todos/1",
+  "https://huggingface.co/api/whoami-v2",
+  "https://esm.sh/@rslsp1/fa-app-tools@latest"
+];
 var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
   const workspaceInputRef = useRef2(null);
-  const blobTestInputRef = useRef2(null);
-  const [blobStatus, setBlobStatus] = useState2("idle");
-  const [blobThumb, setBlobThumb] = useState2(null);
-  const [blobError, setBlobError] = useState2(null);
-  const handleBlobTest = async (file) => {
-    setBlobStatus("loading");
-    setBlobThumb(null);
-    setBlobError(null);
-    const blobUrl = URL.createObjectURL(file);
+  const [urlInput, setUrlInput] = useState2("");
+  const [tokenInput, setTokenInput] = useState2("");
+  const [testStatus, setTestStatus] = useState2("idle");
+  const [result, setResult] = useState2(null);
+  const [fetchError, setFetchError] = useState2(null);
+  const runTest = async (url) => {
+    if (!url.trim()) return;
+    setTestStatus("loading");
+    setResult(null);
+    setFetchError(null);
+    const t0 = Date.now();
     try {
-      const res = await fetch(blobUrl);
-      if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
-      const blob = await res.blob();
-      const dataUrl = await new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = () => reject(new Error("FileReader failed"));
-        reader.readAsDataURL(blob);
+      const reqHeaders = {};
+      if (tokenInput.trim()) reqHeaders["Authorization"] = `Bearer ${tokenInput.trim()}`;
+      const res = await fetch(url.trim(), { headers: reqHeaders });
+      const durationMs = Date.now() - t0;
+      const contentType = res.headers.get("content-type") || "";
+      const headers = {};
+      res.headers.forEach((v, k) => {
+        headers[k] = v;
       });
-      setBlobThumb(dataUrl);
-      setBlobStatus("ok");
+      const blob = await res.blob();
+      const bodySize = blob.size;
+      const isImage = contentType.startsWith("image/");
+      let bodyPreview = "";
+      let imageDataUrl;
+      if (isImage) {
+        imageDataUrl = await new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = reject;
+          reader.readAsDataURL(blob);
+        });
+      } else {
+        const text = await blob.text();
+        bodyPreview = text.slice(0, 500);
+      }
+      setResult({ status: res.status, statusText: res.statusText, contentType, headers, bodyPreview, isImage, imageDataUrl, bodySize, durationMs });
+      setTestStatus("ok");
     } catch (e) {
-      setBlobError(e.message || String(e));
-      setBlobStatus("error");
-    } finally {
-      URL.revokeObjectURL(blobUrl);
+      setFetchError(e.message || String(e));
+      setTestStatus("error");
     }
   };
   return /* @__PURE__ */ jsxs5(motion3.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-6 flex flex-col gap-10 overflow-y-auto", children: [
@@ -701,42 +722,97 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx7(SectionLabel, { children: "blob: URL Test" }),
-        /* @__PURE__ */ jsx7("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Testet ob fetch() auf blob: URLs funktioniert \u2014 lokale Datei \u2192 createObjectURL \u2192 fetch \u2192 base64." })
+        /* @__PURE__ */ jsx7(SectionLabel, { children: "URL Fetch Diagnose" }),
+        /* @__PURE__ */ jsx7("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Testet ob fetch() auf externe URLs funktioniert." })
       ] }),
-      /* @__PURE__ */ jsx7(
-        PillButton,
+      /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-1", children: PRESET_URLS.map((u) => /* @__PURE__ */ jsx7(
+        "button",
         {
-          variant: "outline",
-          icon: blobStatus === "loading" ? "sync" : "image_search",
-          onClick: () => blobTestInputRef.current?.click(),
-          children: "Bild w\xE4hlen & testen"
-        }
-      ),
+          onClick: () => {
+            setUrlInput(u);
+            runTest(u);
+          },
+          className: "text-left px-2 py-1 rounded bg-white/3 border border-white/5 text-[9px] text-white/40 hover:text-white/70 hover:bg-white/6 font-mono truncate transition",
+          children: u
+        },
+        u
+      )) }),
       /* @__PURE__ */ jsx7(
         "input",
         {
-          ref: blobTestInputRef,
-          type: "file",
-          accept: "image/*",
-          className: "hidden",
-          onChange: (e) => {
-            const f = e.target.files?.[0];
-            if (f) handleBlobTest(f);
-            e.target.value = "";
-          }
+          value: tokenInput,
+          onChange: (e) => setTokenInput(e.target.value),
+          placeholder: "Bearer Token (optional)",
+          type: "password",
+          className: "w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-[11px] text-white/60 outline-none focus:border-white/20 placeholder:text-white/20 font-mono"
         }
       ),
-      blobStatus === "ok" && blobThumb && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx7("img", { src: blobThumb, alt: "blob test", className: "w-full max-h-48 object-contain rounded-xl border border-white/10 bg-black/40" }),
-        /* @__PURE__ */ jsxs5("p", { className: "text-[10px] text-green-400 font-mono flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[14px]", children: "check_circle" }),
-          "blob: fetch \u2713 \u2014 base64 erfolgreich"
+      /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            value: urlInput,
+            onChange: (e) => setUrlInput(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && runTest(urlInput),
+            placeholder: "https://...",
+            className: "flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-[11px] text-white/80 outline-none focus:border-white/20 placeholder:text-white/20 font-mono"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: () => runTest(urlInput),
+            disabled: testStatus === "loading" || !urlInput.trim(),
+            className: "px-3 py-2 bg-white/10 hover:bg-white/15 border border-white/10 rounded-xl text-white/60 transition disabled:opacity-40 shrink-0",
+            children: testStatus === "loading" ? /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[16px] animate-spin", children: "sync" }) : /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[16px]", children: "send" })
+          }
+        )
+      ] }),
+      testStatus === "ok" && result && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 bg-white/3 border border-white/8 rounded-xl p-3 text-[10px] font-mono", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs5("span", { className: `font-bold ${result.status < 400 ? "text-green-400" : "text-red-400"}`, children: [
+            result.status,
+            " ",
+            result.statusText
+          ] }),
+          /* @__PURE__ */ jsx7("span", { className: "text-white/30", children: "\xB7" }),
+          /* @__PURE__ */ jsxs5("span", { className: "text-white/50", children: [
+            result.durationMs,
+            "ms"
+          ] }),
+          /* @__PURE__ */ jsx7("span", { className: "text-white/30", children: "\xB7" }),
+          /* @__PURE__ */ jsxs5("span", { className: "text-white/50", children: [
+            (result.bodySize / 1024).toFixed(1),
+            " KB"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "text-white/40", children: [
+          "Content-Type: ",
+          /* @__PURE__ */ jsx7("span", { className: "text-white/70", children: result.contentType })
+        ] }),
+        /* @__PURE__ */ jsxs5("details", { className: "cursor-pointer", children: [
+          /* @__PURE__ */ jsxs5("summary", { className: "text-white/30 hover:text-white/60 transition", children: [
+            "Headers (",
+            Object.keys(result.headers).length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx7("div", { className: "mt-1 space-y-0.5 pl-2 border-l border-white/10", children: Object.entries(result.headers).map(([k, v]) => /* @__PURE__ */ jsxs5("div", { className: "text-white/30", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "text-white/50", children: [
+              k,
+              ":"
+            ] }),
+            " ",
+            v
+          ] }, k)) })
+        ] }),
+        result.isImage && result.imageDataUrl ? /* @__PURE__ */ jsx7("img", { src: result.imageDataUrl, alt: "response", className: "w-full max-h-40 object-contain rounded-lg border border-white/10 bg-black/40 mt-1" }) : /* @__PURE__ */ jsxs5("pre", { className: "text-white/60 whitespace-pre-wrap break-all bg-black/30 rounded-lg p-2 max-h-40 overflow-y-auto text-[9px]", children: [
+          result.bodyPreview,
+          result.bodySize > 500 ? "\n\u2026" : ""
         ] })
       ] }),
-      blobStatus === "error" && blobError && /* @__PURE__ */ jsxs5("p", { className: "text-[10px] text-red-400 font-mono flex items-start gap-1", children: [
-        /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[14px] shrink-0", children: "error" }),
-        blobError
+      testStatus === "error" && fetchError && /* @__PURE__ */ jsxs5("div", { className: "bg-red-900/20 border border-red-700/30 rounded-xl p-3 text-[10px] font-mono text-red-400 flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[14px] shrink-0 mt-0.5", children: "error" }),
+        fetchError
       ] })
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "mt-auto p-4 bg-white/5 rounded-2xl border border-white/5 flex flex-col gap-2 opacity-50", children: [
@@ -4098,7 +4174,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/index.ts
-var LIB_VERSION = "1.2.2";
+var LIB_VERSION = "1.2.4";
 export {
   AvatarArchitectApp,
   CollapsibleCard,

package/package.json

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