@genfeedai/workflow-ui 0.1.3 → 0.1.4

package/dist/chunk-7H3WJJYS.mjs

@@ -0,0 +1,52 @@
+import { useWorkflowStore } from './chunk-R727OFBR.mjs';
+import { useMemo, useCallback } from 'react';
+
+function useCommentNavigation(nodeId) {
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const getNodesWithComments = useWorkflowStore((state) => state.getNodesWithComments);
+  const markCommentViewed = useWorkflowStore((state) => state.markCommentViewed);
+  const setNavigationTarget = useWorkflowStore((state) => state.setNavigationTarget);
+  const nodeComment = useMemo(() => {
+    const node = nodes.find((n) => n.id === nodeId);
+    const data = node?.data;
+    return data?.comment?.trim() || null;
+  }, [nodes, nodeId]);
+  const nodesWithComments = useMemo(() => {
+    return getNodesWithComments();
+  }, [getNodesWithComments]);
+  const currentIndex = useMemo(() => {
+    return nodesWithComments.findIndex((n) => n.id === nodeId);
+  }, [nodesWithComments, nodeId]);
+  const navigateTo = useCallback(
+    (targetIndex) => {
+      const targetNode = nodesWithComments[targetIndex];
+      if (targetNode) {
+        markCommentViewed(targetNode.id);
+        setNavigationTarget(targetNode.id);
+      }
+    },
+    [nodesWithComments, markCommentViewed, setNavigationTarget]
+  );
+  const onPrevious = useCallback(() => {
+    if (nodesWithComments.length === 0) return;
+    const newIndex = currentIndex <= 0 ? nodesWithComments.length - 1 : currentIndex - 1;
+    navigateTo(newIndex);
+  }, [currentIndex, nodesWithComments.length, navigateTo]);
+  const onNext = useCallback(() => {
+    if (nodesWithComments.length === 0) return;
+    const newIndex = (currentIndex + 1) % nodesWithComments.length;
+    navigateTo(newIndex);
+  }, [currentIndex, nodesWithComments.length, navigateTo]);
+  if (!nodeComment || currentIndex === -1) {
+    return null;
+  }
+  return {
+    currentIndex: currentIndex + 1,
+    // 1-based for display
+    totalCount: nodesWithComments.length,
+    onPrevious,
+    onNext
+  };
+}
+
+export { useCommentNavigation };

package/dist/{chunk-HCXI63ME.mjs → chunk-AUQGOJOQ.mjs}

@@ -1,6 +1,7 @@
-import { useSettingsStore, useExecutionStore, useUIStore } from './chunk-SQK4JDYY.mjs';
-import { useWorkflowStore } from './chunk-RIGVIEYB.mjs';
-import { X, CloudOff, Loader2, Cloud, Check, ChevronDown, SaveAll, Save, FolderOpen, Bug, LayoutGrid, Undo2, Redo2, Settings, AlertCircle, Minus, Plus, Square, Play, ChevronUp, PlayCircle, RotateCcw, MoreVertical } from 'lucide-react';
+import { calculateWorkflowCost, formatCost } from './chunk-JTPADIUO.mjs';
+import { useSettingsStore, useExecutionStore, useUIStore } from './chunk-LT3ZJJL6.mjs';
+import { useWorkflowStore } from './chunk-R727OFBR.mjs';
+import { X, CloudOff, Loader2, Cloud, Check, ChevronDown, SaveAll, Save, FolderOpen, Bug, LayoutGrid, Undo2, Redo2, Settings, AlertCircle, Minus, Plus, Square, Play, ChevronUp, PlayCircle, RotateCcw, DollarSign, MoreVertical } from 'lucide-react';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -682,6 +683,28 @@ function BottomBar() {
     }
   );
 }
+function CostIndicator() {
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const isRunning = useExecutionStore((state) => state.isRunning);
+  const actualCost = useExecutionStore((state) => state.actualCost);
+  const { openModal } = useUIStore();
+  const breakdown = useMemo(() => calculateWorkflowCost(nodes), [nodes]);
+  const displayCost = isRunning && actualCost > 0 ? actualCost : breakdown.total;
+  if (breakdown.nodes.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => openModal("cost"),
+      title: "View cost breakdown",
+      className: "flex items-center gap-1.5 rounded-md border border-[var(--border)] px-2 py-1 text-sm text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+      children: [
+        /* @__PURE__ */ jsx(DollarSign, { className: "h-3.5 w-3.5" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: formatCost(displayCost) }),
+        isRunning && actualCost > 0 && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse" })
+      ]
+    }
+  );
+}
 function OverflowMenu({ items }) {
   const [isOpen, setIsOpen] = useState(false);
   const menuRef = useRef(null);
@@ -734,4 +757,4 @@ function OverflowMenu({ items }) {
   ] });
 }
 
-export { BottomBar, OverflowMenu, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown };
+export { BottomBar, CostIndicator, OverflowMenu, SaveAsDialog, SaveIndicator, Toolbar, ToolbarDropdown };

package/dist/{chunk-AOTUCJMA.mjs → chunk-GWBGK3KL.mjs}

@@ -1,7 +1,7 @@
 import { Button } from './chunk-7SKSRSS7.mjs';
 import { extractEnumValues, supportsImageInput, validateRequiredSchemaFields, CONNECTION_FIELDS, getSchemaDefaults, getImageDimensions, getVideoMetadata } from './chunk-EFXQT23N.mjs';
-import { useExecutionStore } from './chunk-SQK4JDYY.mjs';
-import { useWorkflowStore } from './chunk-RIGVIEYB.mjs';
+import { useExecutionStore } from './chunk-LT3ZJJL6.mjs';
+import { useWorkflowStore } from './chunk-R727OFBR.mjs';
 import { useWorkflowUIConfig } from './chunk-FT33LFII.mjs';
 import { useMemo, useCallback, useRef, useEffect, useState } from 'react';
 import { ChevronDown, Expand, Square, Play } from 'lucide-react';

package/dist/chunk-JTPADIUO.mjs

@@ -0,0 +1,130 @@
+import { PRICING, DEFAULT_VIDEO_DURATION, IMAGE_NODE_TYPES, VIDEO_NODE_TYPES, LUMA_NODE_TYPES, TOPAZ_NODE_TYPES } from './chunk-OY7BRSGG.mjs';
+
+// src/lib/costCalculator.ts
+function isNodeType(type, list) {
+  return list.includes(type);
+}
+function getDataField(data, key, fallback) {
+  return data[key] ?? fallback;
+}
+function calculateWorkflowCost(nodes) {
+  const estimates = [];
+  for (const node of nodes) {
+    const data = node.data;
+    const type = node.type ?? "";
+    const label = getDataField(data, "label", type);
+    if (isNodeType(type, IMAGE_NODE_TYPES)) {
+      const model = getDataField(data, "model", "nano-banana");
+      const resolution = getDataField(data, "resolution", "2K");
+      let cost = 0;
+      const priceEntry = PRICING[model];
+      if (typeof priceEntry === "number") {
+        cost = priceEntry;
+      } else if (priceEntry && typeof priceEntry === "object" && !Array.isArray(priceEntry)) {
+        cost = priceEntry[resolution] ?? Object.values(priceEntry)[0] ?? 0;
+      }
+      estimates.push({
+        nodeId: node.id,
+        nodeLabel: label,
+        nodeType: type,
+        model,
+        unit: "per image",
+        cost
+      });
+      continue;
+    }
+    if (isNodeType(type, VIDEO_NODE_TYPES)) {
+      const model = getDataField(data, "model", "veo-3.1-fast");
+      const duration = getDataField(data, "duration", DEFAULT_VIDEO_DURATION);
+      const generateAudio = getDataField(data, "generateAudio", true);
+      const priceEntry = PRICING[model];
+      let perSecond = 0;
+      if (priceEntry && typeof priceEntry === "object" && !Array.isArray(priceEntry)) {
+        const entry = priceEntry;
+        perSecond = generateAudio ? entry.withAudio ?? 0 : entry.withoutAudio ?? 0;
+      }
+      estimates.push({
+        nodeId: node.id,
+        nodeLabel: label,
+        nodeType: type,
+        model,
+        unit: `${duration}s video`,
+        cost: perSecond * duration
+      });
+      continue;
+    }
+    if (isNodeType(type, LUMA_NODE_TYPES)) {
+      const model = getDataField(data, "model", "photon-flash-1");
+      const inputType = getDataField(data, "inputType", "image");
+      let cost = 0;
+      if (inputType === "video") {
+        cost = PRICING["luma-reframe-video"] * DEFAULT_VIDEO_DURATION;
+      } else {
+        const imageEntry = PRICING["luma-reframe-image"];
+        cost = imageEntry[model] ?? 0.01;
+      }
+      estimates.push({
+        nodeId: node.id,
+        nodeLabel: label,
+        nodeType: type,
+        model,
+        unit: inputType === "video" ? "per video" : "per image",
+        cost
+      });
+      continue;
+    }
+    if (isNodeType(type, TOPAZ_NODE_TYPES)) {
+      const inputType = getDataField(data, "inputType", "image");
+      if (inputType === "video") {
+        const resolution = getDataField(data, "targetResolution", "1080p");
+        const fps = getDataField(data, "targetFps", 30);
+        const key = `${resolution}-${fps}`;
+        const pricePerChunk = PRICING["topaz-video-upscale"][key] ?? 0.101;
+        const duration = DEFAULT_VIDEO_DURATION;
+        const chunks = Math.ceil(duration / 5);
+        estimates.push({
+          nodeId: node.id,
+          nodeLabel: label,
+          nodeType: type,
+          model: "topaz-video",
+          unit: `${duration}s video`,
+          cost: pricePerChunk * chunks
+        });
+      } else {
+        const tier = PRICING["topaz-image-upscale"].find((t) => 1 <= t.maxMP) ?? PRICING["topaz-image-upscale"][0];
+        estimates.push({
+          nodeId: node.id,
+          nodeLabel: label,
+          nodeType: type,
+          model: getDataField(data, "model", "topaz-standard-v2"),
+          unit: "per image",
+          cost: tier.price
+        });
+      }
+      continue;
+    }
+    if (type === "llm") {
+      const maxTokens = getDataField(data, "maxTokens", 1024);
+      const estimatedTokens = maxTokens * 3;
+      estimates.push({
+        nodeId: node.id,
+        nodeLabel: label,
+        nodeType: type,
+        model: getDataField(data, "model", "llama"),
+        unit: `~${estimatedTokens} tokens`,
+        cost: estimatedTokens * PRICING.llama
+      });
+    }
+  }
+  return {
+    total: estimates.reduce((sum, e) => sum + e.cost, 0),
+    nodes: estimates
+  };
+}
+function formatCost(amount) {
+  if (amount === 0) return "$0.00";
+  if (amount < 0.01) return `$${amount.toFixed(4)}`;
+  return `$${amount.toFixed(2)}`;
+}
+
+export { calculateWorkflowCost, formatCost };

package/dist/{chunk-SQK4JDYY.mjs → chunk-LT3ZJJL6.mjs}

@@ -1,4 +1,4 @@
-import { useWorkflowStore } from './chunk-RIGVIEYB.mjs';
+import { useWorkflowStore } from './chunk-R727OFBR.mjs';
 import { create } from 'zustand';
 import { ProviderTypeEnum, NodeStatusEnum } from '@genfeedai/types';
 
@@ -12,6 +12,7 @@ var useUIStore = create((set) => ({
   selectedEdgeId: null,
   highlightedNodeIds: [],
   activeModal: null,
+  connectionDropMenu: null,
   nodeDetailNodeId: null,
   nodeDetailActiveTab: "preview",
   nodeDetailStartIndex: 0,
@@ -46,6 +47,12 @@ var useUIStore = create((set) => ({
   closeModal: () => {
     set({ activeModal: null });
   },
+  openConnectionDropMenu: (params) => {
+    set({ connectionDropMenu: params });
+  },
+  closeConnectionDropMenu: () => {
+    set({ connectionDropMenu: null });
+  },
   openNodeDetailModal: (nodeId, tab = "preview", startIndex = 0) => {
     set({
       activeModal: "nodeDetail",
@@ -211,7 +218,7 @@ var useSettingsStore = create((set, get) => {
     },
     setEdgeStyle: (style) => {
       setAndPersist(() => ({ edgeStyle: style }));
-      import('./workflowStore-7SDJC4UR.mjs').then(({ useWorkflowStore: useWorkflowStore2 }) => {
+      import('./workflowStore-UAAKOOIK.mjs').then(({ useWorkflowStore: useWorkflowStore2 }) => {
         useWorkflowStore2.getState().setEdgeStyle(style);
       });
     },