@genfeedai/workflow-ui 0.2.3 → 0.2.4

package/dist/{chunk-OQREHJXK.mjs → chunk-IYFWAJBB.mjs}

@@ -1,78 +1,228 @@
-import { useExecutionStore, useUIStore } from './chunk-LT3ZJJL6.mjs';
-import { getNodesByCategory } from '@genfeedai/types';
-import { Bug, Trash2, X, ChevronDown, ChevronRight, Copy, PanelLeftClose, Search, GitBranch, ArrowLeftFromLine, ArrowRightToLine, Download, Eye, CheckCircle, Columns2, LayoutGrid, Subtitles, Pencil, Grid3X3, Maximize, Crop, Film, Scissors, Layers, Wand2, Maximize2, Navigation, AudioLines, Mic, Brain, Video, Sparkles, Puzzle, Volume2, FileVideo, FileText, MessageSquare, Image } from 'lucide-react';
+import { useExecutionStore, useUIStore } from './chunk-OJWVEEMM.mjs';
+import { Bug, Trash2, X, ChevronDown, ChevronRight, Copy, PanelLeftClose, Search, Wand2, Volume2, Video, Subtitles, Sparkles, Scissors, Puzzle, Pencil, Navigation, Mic, MessageSquare, Maximize2, Maximize, LayoutGrid, Layers, Image, Grid3X3, GitBranch, Film, FileVideo, FileText, Eye, Download, Crop, Columns2, CheckCircle, Brain, AudioLines, ArrowRightToLine, ArrowLeftFromLine } from 'lucide-react';
 import { forwardRef, memo, useCallback, useState, useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getNodesByCategory } from '@genfeedai/types';
 
+var PanelContainer = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const stopPropagation = (e) => {
+      e.stopPropagation();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className,
+        onClick: stopPropagation,
+        onMouseDown: stopPropagation,
+        onPointerDown: stopPropagation,
+        onDoubleClick: stopPropagation,
+        ...props,
+        children
+      }
+    );
+  }
+);
+PanelContainer.displayName = "PanelContainer";
+function PayloadCard({ payload }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(
+    async (e) => {
+      e.stopPropagation();
+      try {
+        await navigator.clipboard.writeText(
+          JSON.stringify(payload.input, null, 2)
+        );
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      } catch {
+        const textArea = document.createElement("textarea");
+        textArea.value = JSON.stringify(payload.input, null, 2);
+        textArea.style.position = "fixed";
+        textArea.style.left = "-9999px";
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+          document.execCommand("copy");
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+        }
+        document.body.removeChild(textArea);
+      }
+    },
+    [payload.input]
+  );
+  const timestamp = new Date(payload.timestamp).toLocaleTimeString();
+  return /* @__PURE__ */ jsxs("div", { className: "border border-[var(--border)] rounded-lg overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "w-full flex items-center gap-2 p-3 text-left hover:bg-[var(--muted)]/50 transition",
+        children: [
+          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 text-[var(--muted-foreground)] shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-[var(--muted-foreground)] shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--foreground)] truncate", children: payload.nodeName || payload.nodeId }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-amber-500/10 text-amber-500 rounded", children: payload.nodeType })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-[var(--muted-foreground)] mt-0.5", children: [
+              payload.model,
+              " \u2022 ",
+              timestamp
+            ] })
+          ] })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border)] p-3 bg-[var(--muted)]/30", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-[var(--muted-foreground)] uppercase", children: "Payload" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleCopy,
+            className: "flex items-center gap-1 text-[10px] text-[var(--primary)] hover:underline",
+            children: [
+              /* @__PURE__ */ jsx(Copy, { className: "w-3 h-3" }),
+              copied ? "Copied!" : "Copy"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("pre", { className: "text-[11px] font-mono text-[var(--muted-foreground)] bg-[var(--background)] p-2 rounded border border-[var(--border)] overflow-x-auto max-h-64 overflow-y-auto", children: JSON.stringify(payload.input, null, 2) })
+    ] })
+  ] });
+}
+function DebugPanelComponent() {
+  const debugPayloads = useExecutionStore((s) => s.debugPayloads);
+  const clearDebugPayloads = useExecutionStore((s) => s.clearDebugPayloads);
+  const setShowDebugPanel = useUIStore((s) => s.setShowDebugPanel);
+  const handleClose = useCallback(() => {
+    setShowDebugPanel(false);
+  }, [setShowDebugPanel]);
+  return /* @__PURE__ */ jsxs(PanelContainer, { className: "w-80 h-full border-l border-[var(--border)] bg-[var(--background)] flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 border-b border-[var(--border)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Bug, { className: "w-4 h-4 text-amber-500" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Debug Console" }),
+        debugPayloads.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-amber-500/10 text-amber-500 rounded-full", children: debugPayloads.length })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        debugPayloads.length > 0 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: clearDebugPayloads,
+            className: "p-1.5 hover:bg-[var(--muted)] rounded transition",
+            title: "Clear all payloads",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4 text-[var(--muted-foreground)]" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleClose,
+            className: "p-1.5 hover:bg-[var(--muted)] rounded transition",
+            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-3 space-y-2", children: debugPayloads.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-[var(--muted-foreground)]", children: [
+      /* @__PURE__ */ jsx(Bug, { className: "w-12 h-12 mx-auto mb-3 opacity-50 text-amber-500/50" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-2", children: "No payloads captured" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs", children: "Run a workflow with debug mode enabled to capture API payloads." })
+    ] }) : debugPayloads.map((payload, index) => /* @__PURE__ */ jsx(
+      PayloadCard,
+      {
+        payload
+      },
+      `${payload.nodeId}-${payload.timestamp}-${index}`
+    )) }),
+    debugPayloads.length > 0 && /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-[var(--border)] bg-[var(--muted)]/30", children: /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-[var(--muted-foreground)]", children: [
+      debugPayloads.length,
+      " payload",
+      debugPayloads.length !== 1 ? "s" : "",
+      " captured. Click to expand and view details."
+    ] }) })
+  ] });
+}
+var MemoizedDebugPanel = memo(DebugPanelComponent);
+function DebugPanel() {
+  return /* @__PURE__ */ jsx(MemoizedDebugPanel, {});
+}
 var ICONS = {
+  ArrowLeftFromLine,
+  // Composition
+  ArrowRightToLine,
+  AudioLines,
+  Brain,
+  // Output
+  CheckCircle,
+  Columns2,
+  Crop,
+  Download,
+  Eye,
+  FileText,
+  FileVideo,
+  Film,
+  GitBranch,
+  Grid3X3,
   // Input
   Image,
+  Layers,
+  LayoutGrid,
+  Maximize,
+  // Processing
+  Maximize2,
   MessageSquare,
-  FileText,
-  FileVideo,
-  Volume2,
-  Puzzle,
-  // AI
-  Sparkles,
-  Video,
-  Brain,
   Mic,
-  AudioLines,
   Navigation,
-  // Processing
-  Maximize2,
-  Wand2,
-  Layers,
-  Scissors,
-  Film,
-  Crop,
-  Maximize,
-  Grid3X3,
   Pencil,
+  Puzzle,
+  Scissors,
+  // AI
+  Sparkles,
   Subtitles,
-  LayoutGrid,
-  Columns2,
-  // Output
-  CheckCircle,
-  Eye,
-  Download,
-  // Composition
-  ArrowRightToLine,
-  ArrowLeftFromLine,
-  GitBranch
+  Video,
+  Volume2,
+  Wand2
 };
 var CATEGORY_LABELS = {
-  input: "Input",
   ai: "AI Generation",
-  processing: "Processing",
+  composition: "Composition",
+  input: "Input",
   output: "Output",
-  composition: "Composition"
+  processing: "Processing"
 };
 var CATEGORY_COLORS = {
-  input: {
-    icon: "bg-[var(--category-input)]/20 text-[var(--category-input)]",
-    hover: "hover:border-[var(--category-input)]",
-    cssVar: "var(--category-input)"
-  },
   ai: {
-    icon: "bg-[var(--category-ai)]/20 text-[var(--category-ai)]",
+    cssVar: "var(--category-ai)",
     hover: "hover:border-[var(--category-ai)]",
-    cssVar: "var(--category-ai)"
+    icon: "bg-[var(--category-ai)]/20 text-[var(--category-ai)]"
   },
-  processing: {
-    icon: "bg-[var(--category-processing)]/20 text-[var(--category-processing)]",
-    hover: "hover:border-[var(--category-processing)]",
-    cssVar: "var(--category-processing)"
+  composition: {
+    cssVar: "var(--category-composition)",
+    hover: "hover:border-[var(--category-composition)]",
+    icon: "bg-[var(--category-composition)]/20 text-[var(--category-composition)]"
+  },
+  input: {
+    cssVar: "var(--category-input)",
+    hover: "hover:border-[var(--category-input)]",
+    icon: "bg-[var(--category-input)]/20 text-[var(--category-input)]"
   },
   output: {
-    icon: "bg-[var(--category-output)]/20 text-[var(--category-output)]",
+    cssVar: "var(--category-output)",
     hover: "hover:border-[var(--category-output)]",
-    cssVar: "var(--category-output)"
+    icon: "bg-[var(--category-output)]/20 text-[var(--category-output)]"
   },
-  composition: {
-    icon: "bg-[var(--category-composition)]/20 text-[var(--category-composition)]",
-    hover: "hover:border-[var(--category-composition)]",
-    cssVar: "var(--category-composition)"
+  processing: {
+    cssVar: "var(--category-processing)",
+    hover: "hover:border-[var(--category-processing)]",
+    icon: "bg-[var(--category-processing)]/20 text-[var(--category-processing)]"
   }
 };
 function NodeCard({ type, label, description, icon, category }) {
@@ -101,7 +251,11 @@ function NodeCard({ type, label, description, icon, category }) {
     }
   );
 }
-function CategorySection({ category, isExpanded, onToggle }) {
+function CategorySection({
+  category,
+  isExpanded,
+  onToggle
+}) {
   const nodes = getNodesByCategory()[category];
   return /* @__PURE__ */ jsxs("div", { className: "border-b border-[var(--border)] last:border-0", children: [
     /* @__PURE__ */ jsxs(
@@ -132,9 +286,7 @@ function CategorySection({ category, isExpanded, onToggle }) {
 function NodePalette() {
   const { togglePalette } = useUIStore();
   const [searchQuery, setSearchQuery] = useState("");
-  const [expandedCategories, setExpandedCategories] = useState(
-    /* @__PURE__ */ new Set(["input"])
-  );
+  const [expandedCategories, setExpandedCategories] = useState(/* @__PURE__ */ new Set(["input"]));
   const nodesByCategory = useMemo(() => getNodesByCategory(), []);
   const filteredNodes = useMemo(() => {
     if (!searchQuery.trim()) return null;
@@ -161,9 +313,7 @@ function NodePalette() {
     });
   }, []);
   const categories = useMemo(
-    () => ["input", "ai", "processing", "output", "composition"].filter(
-      (cat) => nodesByCategory[cat].length > 0
-    ),
+    () => ["input", "ai", "processing", "output", "composition"].filter((cat) => nodesByCategory[cat].length > 0),
     [nodesByCategory]
   );
   return /* @__PURE__ */ jsxs("div", { className: "w-64 min-w-64 h-full bg-[var(--background)] border-r border-[var(--border)] flex flex-col overflow-hidden", children: [
@@ -222,150 +372,5 @@ function NodePalette() {
     ) })
   ] });
 }
-var PanelContainer = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    const stopPropagation = (e) => {
-      e.stopPropagation();
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className,
-        onClick: stopPropagation,
-        onMouseDown: stopPropagation,
-        onPointerDown: stopPropagation,
-        onDoubleClick: stopPropagation,
-        ...props,
-        children
-      }
-    );
-  }
-);
-PanelContainer.displayName = "PanelContainer";
-function PayloadCard({ payload }) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const handleCopy = useCallback(
-    async (e) => {
-      e.stopPropagation();
-      try {
-        await navigator.clipboard.writeText(JSON.stringify(payload.input, null, 2));
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
-      } catch {
-        const textArea = document.createElement("textarea");
-        textArea.value = JSON.stringify(payload.input, null, 2);
-        textArea.style.position = "fixed";
-        textArea.style.left = "-9999px";
-        document.body.appendChild(textArea);
-        textArea.select();
-        try {
-          document.execCommand("copy");
-          setCopied(true);
-          setTimeout(() => setCopied(false), 2e3);
-        } catch {
-        }
-        document.body.removeChild(textArea);
-      }
-    },
-    [payload.input]
-  );
-  const timestamp = new Date(payload.timestamp).toLocaleTimeString();
-  return /* @__PURE__ */ jsxs("div", { className: "border border-[var(--border)] rounded-lg overflow-hidden", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => setIsExpanded(!isExpanded),
-        className: "w-full flex items-center gap-2 p-3 text-left hover:bg-[var(--muted)]/50 transition",
-        children: [
-          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 text-[var(--muted-foreground)] shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-[var(--muted-foreground)] shrink-0" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--foreground)] truncate", children: payload.nodeName || payload.nodeId }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-amber-500/10 text-amber-500 rounded", children: payload.nodeType })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-[var(--muted-foreground)] mt-0.5", children: [
-              payload.model,
-              " \u2022 ",
-              timestamp
-            ] })
-          ] })
-        ]
-      }
-    ),
-    isExpanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border)] p-3 bg-[var(--muted)]/30", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-[var(--muted-foreground)] uppercase", children: "Payload" }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: handleCopy,
-            className: "flex items-center gap-1 text-[10px] text-[var(--primary)] hover:underline",
-            children: [
-              /* @__PURE__ */ jsx(Copy, { className: "w-3 h-3" }),
-              copied ? "Copied!" : "Copy"
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("pre", { className: "text-[11px] font-mono text-[var(--muted-foreground)] bg-[var(--background)] p-2 rounded border border-[var(--border)] overflow-x-auto max-h-64 overflow-y-auto", children: JSON.stringify(payload.input, null, 2) })
-    ] })
-  ] });
-}
-function DebugPanelComponent() {
-  const debugPayloads = useExecutionStore((s) => s.debugPayloads);
-  const clearDebugPayloads = useExecutionStore((s) => s.clearDebugPayloads);
-  const setShowDebugPanel = useUIStore((s) => s.setShowDebugPanel);
-  const handleClose = useCallback(() => {
-    setShowDebugPanel(false);
-  }, [setShowDebugPanel]);
-  return /* @__PURE__ */ jsxs(PanelContainer, { className: "w-80 h-full border-l border-[var(--border)] bg-[var(--background)] flex flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 border-b border-[var(--border)]", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Bug, { className: "w-4 h-4 text-amber-500" }),
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Debug Console" }),
-        debugPayloads.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-amber-500/10 text-amber-500 rounded-full", children: debugPayloads.length })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        debugPayloads.length > 0 && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: clearDebugPayloads,
-            className: "p-1.5 hover:bg-[var(--muted)] rounded transition",
-            title: "Clear all payloads",
-            children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4 text-[var(--muted-foreground)]" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleClose,
-            className: "p-1.5 hover:bg-[var(--muted)] rounded transition",
-            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-3 space-y-2", children: debugPayloads.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-[var(--muted-foreground)]", children: [
-      /* @__PURE__ */ jsx(Bug, { className: "w-12 h-12 mx-auto mb-3 opacity-50 text-amber-500/50" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-2", children: "No payloads captured" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs", children: "Run a workflow with debug mode enabled to capture API payloads." })
-    ] }) : debugPayloads.map((payload, index) => /* @__PURE__ */ jsx(
-      PayloadCard,
-      {
-        payload
-      },
-      `${payload.nodeId}-${payload.timestamp}-${index}`
-    )) }),
-    debugPayloads.length > 0 && /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-[var(--border)] bg-[var(--muted)]/30", children: /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-[var(--muted-foreground)]", children: [
-      debugPayloads.length,
-      " payload",
-      debugPayloads.length !== 1 ? "s" : "",
-      " captured. Click to expand and view details."
-    ] }) })
-  ] });
-}
-var DebugPanel = memo(DebugPanelComponent);
 
 export { DebugPanel, NodePalette, PanelContainer };

package/dist/{chunk-N5NJZTK4.mjs → chunk-MGLAKMDP.mjs}

@@ -23,14 +23,14 @@ function calculateWorkflowCost(nodes) {
         cost = priceEntry[resolution] ?? Object.values(priceEntry)[0] ?? 0;
       }
       estimates.push({
+        model,
         nodeId: node.id,
         nodeLabel: label,
         nodeType: type,
-        model,
-        unitPrice: cost,
         quantity: 1,
         subtotal: cost,
-        unit: "per image"
+        unit: "per image",
+        unitPrice: cost
       });
       continue;
     }
@@ -46,15 +46,15 @@ function calculateWorkflowCost(nodes) {
       }
       const subtotal = perSecond * duration;
       estimates.push({
+        duration,
+        model,
         nodeId: node.id,
         nodeLabel: label,
         nodeType: type,
-        model,
-        unitPrice: perSecond,
         quantity: duration,
         subtotal,
         unit: `${duration}s video`,
-        duration,
+        unitPrice: perSecond,
         withAudio: generateAudio
       });
       continue;
@@ -70,14 +70,14 @@ function calculateWorkflowCost(nodes) {
         subtotal = imageEntry[model] ?? 0.01;
       }
       estimates.push({
+        model,
         nodeId: node.id,
         nodeLabel: label,
         nodeType: type,
-        model,
-        unitPrice: subtotal,
         quantity: 1,
         subtotal,
-        unit: inputType === "video" ? "per video" : "per image"
+        unit: inputType === "video" ? "per video" : "per image",
+        unitPrice: subtotal
       });
       continue;
     }
@@ -91,27 +91,29 @@ function calculateWorkflowCost(nodes) {
         const duration = DEFAULT_VIDEO_DURATION;
         const chunks = Math.ceil(duration / 5);
         estimates.push({
+          duration,
+          model: "topaz-video",
           nodeId: node.id,
           nodeLabel: label,
           nodeType: type,
-          model: "topaz-video",
-          unitPrice: pricePerChunk,
           quantity: chunks,
           subtotal: pricePerChunk * chunks,
           unit: `${duration}s video`,
-          duration
+          unitPrice: pricePerChunk
         });
       } else {
-        const tier = PRICING["topaz-image-upscale"].find((t) => 1 <= t.maxMP) ?? PRICING["topaz-image-upscale"][0];
+        const tier = PRICING["topaz-image-upscale"].find(
+          (t) => 1 <= t.maxMP
+        ) ?? PRICING["topaz-image-upscale"][0];
         estimates.push({
+          model: getDataField(data, "model", "topaz-standard-v2"),
           nodeId: node.id,
           nodeLabel: label,
           nodeType: type,
-          model: getDataField(data, "model", "topaz-standard-v2"),
-          unitPrice: tier.price,
           quantity: 1,
           subtotal: tier.price,
-          unit: "per image"
+          unit: "per image",
+          unitPrice: tier.price
         });
       }
       continue;
@@ -121,20 +123,20 @@ function calculateWorkflowCost(nodes) {
       const estimatedTokens = maxTokens * 3;
       const subtotal = estimatedTokens * PRICING.llama;
       estimates.push({
+        model: getDataField(data, "model", "llama"),
         nodeId: node.id,
         nodeLabel: label,
         nodeType: type,
-        model: getDataField(data, "model", "llama"),
-        unitPrice: PRICING.llama,
         quantity: estimatedTokens,
         subtotal,
-        unit: `~${estimatedTokens} tokens`
+        unit: `~${estimatedTokens} tokens`,
+        unitPrice: PRICING.llama
       });
     }
   }
   return {
-    total: estimates.reduce((sum, e) => sum + e.subtotal, 0),
-    items: estimates
+    items: estimates,
+    total: estimates.reduce((sum, e) => sum + e.subtotal, 0)
   };
 }
 function formatCost(amount) {