@rslsp1/fa-app-tools 1.2.1 → 1.2.3

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.1";
+declare const LIB_VERSION = "1.2.3";
 
 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.1";
+declare const LIB_VERSION = "1.2.3";
 
 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,33 +738,52 @@ 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 [urlInput, setUrlInput] = (0, import_react7.useState)("");
-  const [urlStatus, setUrlStatus] = (0, import_react7.useState)("idle");
-  const [urlThumb, setUrlThumb] = (0, import_react7.useState)(null);
-  const [urlError, setUrlError] = (0, import_react7.useState)(null);
-  const handleUrlTest = async () => {
-    if (!urlInput.trim()) return;
-    setUrlStatus("loading");
-    setUrlThumb(null);
-    setUrlError(null);
+  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(urlInput.trim());
-      if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
-      const blob = await res.blob();
-      const mimeType = blob.type || "image/jpeg";
-      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 res = await fetch(url.trim());
+      const durationMs = Date.now() - t0;
+      const contentType = res.headers.get("content-type") || "";
+      const headers = {};
+      res.headers.forEach((v, k) => {
+        headers[k] = v;
       });
-      setUrlThumb(dataUrl);
-      setUrlStatus("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) {
-      setUrlError(e.message || String(e));
-      setUrlStatus("error");
+      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: [
@@ -782,40 +801,87 @@ 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: "URL-Fetch Test" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Pr\xFCft ob externe URLs als Bild geladen werden k\xF6nnen." })
+        /* @__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)("div", { className: "flex flex-col gap-1", children: PRESET_URLS.map((u) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          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.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" && handleUrlTest(),
-            placeholder: "https://example.com/image.jpg",
-            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"
+            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: handleUrlTest,
-            disabled: urlStatus === "loading" || !urlInput.trim(),
-            className: "px-3 py-2 bg-white/10 hover:bg-white/15 border border-white/10 rounded-xl text-[11px] font-bold text-white/60 transition disabled:opacity-40 shrink-0",
-            children: urlStatus === "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: "download" })
+            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" })
           }
         )
       ] }),
-      urlStatus === "ok" && urlThumb && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: urlThumb, alt: "URL 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" }),
-          "Fetch erfolgreich"
+      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" : ""
         ] })
       ] }),
-      urlStatus === "error" && urlError && /* @__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" }),
-        urlError
+      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: [
@@ -4177,7 +4243,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/index.ts
-var LIB_VERSION = "1.2.1";
+var LIB_VERSION = "1.2.3";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,

package/dist/index.mjs

@@ -656,33 +656,52 @@ 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 [urlInput, setUrlInput] = useState2("");
-  const [urlStatus, setUrlStatus] = useState2("idle");
-  const [urlThumb, setUrlThumb] = useState2(null);
-  const [urlError, setUrlError] = useState2(null);
-  const handleUrlTest = async () => {
-    if (!urlInput.trim()) return;
-    setUrlStatus("loading");
-    setUrlThumb(null);
-    setUrlError(null);
+  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(urlInput.trim());
-      if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
-      const blob = await res.blob();
-      const mimeType = blob.type || "image/jpeg";
-      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 res = await fetch(url.trim());
+      const durationMs = Date.now() - t0;
+      const contentType = res.headers.get("content-type") || "";
+      const headers = {};
+      res.headers.forEach((v, k) => {
+        headers[k] = v;
       });
-      setUrlThumb(dataUrl);
-      setUrlStatus("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) {
-      setUrlError(e.message || String(e));
-      setUrlStatus("error");
+      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: [
@@ -700,40 +719,87 @@ 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: "URL-Fetch Test" }),
-        /* @__PURE__ */ jsx7("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Pr\xFCft ob externe URLs als Bild geladen werden k\xF6nnen." })
+        /* @__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("div", { className: "flex flex-col gap-1", children: PRESET_URLS.map((u) => /* @__PURE__ */ jsx7(
+        "button",
+        {
+          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__ */ jsxs5("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsx7(
           "input",
           {
             value: urlInput,
             onChange: (e) => setUrlInput(e.target.value),
-            onKeyDown: (e) => e.key === "Enter" && handleUrlTest(),
-            placeholder: "https://example.com/image.jpg",
-            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"
+            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: handleUrlTest,
-            disabled: urlStatus === "loading" || !urlInput.trim(),
-            className: "px-3 py-2 bg-white/10 hover:bg-white/15 border border-white/10 rounded-xl text-[11px] font-bold text-white/60 transition disabled:opacity-40 shrink-0",
-            children: urlStatus === "loading" ? /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[16px] animate-spin", children: "sync" }) : /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[16px]", children: "download" })
+            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" })
           }
         )
       ] }),
-      urlStatus === "ok" && urlThumb && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx7("img", { src: urlThumb, alt: "URL 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" }),
-          "Fetch erfolgreich"
+      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" : ""
         ] })
       ] }),
-      urlStatus === "error" && urlError && /* @__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" }),
-        urlError
+      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: [
@@ -4095,7 +4161,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/index.ts
-var LIB_VERSION = "1.2.1";
+var LIB_VERSION = "1.2.3";
 export {
   AvatarArchitectApp,
   CollapsibleCard,

package/package.json

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