@datatechsolutions/ui 2.11.82 → 2.11.83

package/dist/{chunk-K4QJV3GC.js → chunk-JFWZHROG.js}

@@ -2019,6 +2019,176 @@ function parseRow(row) {
     }
   }
 }
+var STATUS_META = {
+  completed: { color: "emerald", icon: outline.CheckCircleIcon },
+  running: { color: "sky", icon: outline.ArrowPathIcon },
+  failed: { color: "rose", icon: outline.XCircleIcon },
+  pending: { color: "amber", icon: outline.ClockIcon },
+  skipped: { color: "zinc", icon: outline.MinusCircleIcon }
+};
+function ExecutionTimelinePanel({
+  entries,
+  labels,
+  selectedNodeId,
+  onSelect
+}) {
+  const [internalSelected, setInternalSelected] = react.useState(null);
+  const effectiveSelected = selectedNodeId ?? internalSelected;
+  const selected = react.useMemo(
+    () => entries.find((entry) => entry.nodeId === effectiveSelected) ?? entries[0] ?? null,
+    [entries, effectiveSelected]
+  );
+  const handleSelect = (nodeId) => {
+    if (onSelect) onSelect(nodeId);
+    setInternalSelected(nodeId);
+  };
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-400", children: labels.empty ?? "\u2014" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-12", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3 lg:col-span-5 xl:col-span-4", children: entries.map((entry, index) => {
+      const meta = STATUS_META[entry.status];
+      const Icon = meta.icon;
+      const isActive = (selected?.nodeId ?? "") === entry.nodeId;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleSelect(entry.nodeId),
+          className: [
+            "w-full text-left rounded-xl border p-4 transition",
+            isActive ? "border-indigo-400/60 bg-indigo-50/70 shadow-md dark:border-indigo-400/40 dark:bg-indigo-500/10" : "border-slate-200/60 bg-white/70 hover:border-indigo-300 hover:shadow-sm dark:border-white/10 dark:bg-white/5 dark:hover:border-indigo-400/30"
+          ].join(" "),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-200", children: index + 1 }),
+              index < entries.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 h-8 w-px bg-slate-200 dark:bg-white/10" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate font-medium text-slate-900 dark:text-white", children: entry.nodeId }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: entry.nodeType })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(chunkTUEYBNWL_js.Badge, { color: meta.color, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mr-1 h-3 w-3" }),
+                  labels[entry.status]
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-3 text-xs text-slate-500 dark:text-slate-400", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDuration2(entry.durationMs) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xB7" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTimestamp(entry.startedAt) })
+              ] })
+            ] })
+          ] })
+        },
+        entry.nodeId
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-7 xl:col-span-8", children: selected ? /* @__PURE__ */ jsxRuntime.jsx(NodeInspector, { entry: selected, labels }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/40", children: labels.selectNode }) })
+  ] });
+}
+function NodeInspector({
+  entry,
+  labels
+}) {
+  const meta = STATUS_META[entry.status];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900/40", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate text-base font-semibold text-slate-900 dark:text-white", children: entry.nodeId }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: entry.nodeType })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkTUEYBNWL_js.Badge, { color: meta.color, children: labels[entry.status] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "grid grid-cols-2 gap-3 text-xs text-slate-500 dark:text-slate-400", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-semibold", children: labels.started }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "mt-0.5 text-slate-700 dark:text-slate-200", children: formatTimestamp(entry.startedAt) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-semibold", children: labels.completed }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "mt-0.5 text-slate-700 dark:text-slate-200", children: formatTimestamp(entry.completedAt) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-semibold", children: labels.duration }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "mt-0.5 text-slate-700 dark:text-slate-200", children: formatDuration2(entry.durationMs) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-semibold", children: labels.status }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "mt-0.5 text-slate-700 dark:text-slate-200", children: labels[entry.status] })
+      ] })
+    ] }),
+    entry.metrics && hasMetrics(entry.metrics) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 rounded-lg border border-indigo-300/50 bg-indigo-50/60 p-3 text-xs dark:border-indigo-400/30 dark:bg-indigo-500/10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: [
+      entry.metrics.model && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-semibold text-indigo-700 dark:text-indigo-200", children: labels.model }),
+        /* @__PURE__ */ jsxRuntime.jsxs("dd", { className: "mt-0.5 truncate text-indigo-900 dark:text-indigo-100", children: [
+          entry.metrics.provider ? `${entry.metrics.provider} \xB7 ` : "",
+          entry.metrics.model
+        ] })
+      ] }),
+      (entry.metrics.tokensIn !== void 0 || entry.metrics.tokensOut !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-semibold text-indigo-700 dark:text-indigo-200", children: labels.tokens }),
+        /* @__PURE__ */ jsxRuntime.jsxs("dd", { className: "mt-0.5 text-indigo-900 dark:text-indigo-100", children: [
+          entry.metrics.tokensIn ?? 0,
+          " in \xB7 ",
+          entry.metrics.tokensOut ?? 0,
+          " out"
+        ] })
+      ] }),
+      entry.metrics.costUsd !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-semibold text-indigo-700 dark:text-indigo-200", children: labels.cost }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "mt-0.5 text-indigo-900 dark:text-indigo-100", children: formatCost(entry.metrics.costUsd) })
+      ] })
+    ] }) }),
+    entry.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 rounded-lg border border-rose-300/60 bg-rose-50/60 p-3 text-xs dark:border-rose-400/30 dark:bg-rose-500/10", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 font-semibold text-rose-700 dark:text-rose-300", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationTriangleIcon, { className: "h-4 w-4" }),
+        labels.error
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-2 whitespace-pre-wrap break-words text-rose-800 dark:text-rose-200", children: entry.error })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(JsonBlock, { title: labels.inputs, value: entry.inputs }),
+      /* @__PURE__ */ jsxRuntime.jsx(JsonBlock, { title: labels.outputs, value: entry.outputs })
+    ] })
+  ] });
+}
+function JsonBlock({ title, value }) {
+  const hasValue = value && Object.keys(value).length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-slate-200/60 bg-slate-50/60 p-3 dark:border-white/10 dark:bg-white/5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400", children: title }),
+    hasValue ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-72 overflow-auto whitespace-pre text-xs text-slate-800 dark:text-slate-200", children: JSON.stringify(value, null, 2) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs italic text-slate-400 dark:text-slate-500", children: "\u2014" })
+  ] });
+}
+function hasMetrics(metrics) {
+  return Boolean(
+    metrics.model || metrics.tokensIn !== void 0 || metrics.tokensOut !== void 0 || metrics.costUsd !== void 0
+  );
+}
+function formatDuration2(ms) {
+  if (ms === null) return "\u2014";
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+  const mins = Math.floor(ms / 6e4);
+  const secs = Math.floor(ms % 6e4 / 1e3);
+  return `${mins}m${secs}s`;
+}
+function formatCost(usd) {
+  if (usd === 0) return "$0";
+  if (usd < 0.01) return `$${usd.toFixed(4)}`;
+  if (usd < 1) return `$${usd.toFixed(3)}`;
+  return `$${usd.toFixed(2)}`;
+}
+function formatTimestamp(iso) {
+  if (!iso) return "\u2014";
+  return new Date(iso).toLocaleString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
 
 // src/astrlabe/components/rules/types.ts
 var RULE_STATUS_OPTIONS = ["draft", "active", "archived"];
@@ -3304,7 +3474,7 @@ function VersionHistoryPanel({
       loadVersions();
     }
   }, [open, loadVersions]);
-  const formatTimestamp2 = react.useCallback((timestamp) => {
+  const formatTimestamp3 = react.useCallback((timestamp) => {
     try {
       const date = new Date(timestamp);
       return new Intl.DateTimeFormat(void 0, {
@@ -3375,7 +3545,7 @@ function VersionHistoryPanel({
                     isCurrentVersion && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-500/20 dark:text-blue-300", children: translations("current") })
                   ] }) }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTimestamp2(version.publishedAt) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTimestamp3(version.publishedAt) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-0.5", children: [
                       translations("publishedBy"),
                       ": ",
@@ -3455,7 +3625,7 @@ var STATUS_CONFIG = {
     label: "error"
   }
 };
-function formatDuration2(durationMs) {
+function formatDuration3(durationMs) {
   if (durationMs < 1e3) {
     return `${durationMs}ms`;
   }
@@ -3549,7 +3719,7 @@ function RunPanel({ open, onClose, onRun, onStop }) {
                   ] }),
                   result?.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-red-500 dark:text-red-400", children: result.error })
                 ] }),
-                result?.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-xs text-gray-500 dark:text-gray-400", children: formatDuration2(result.durationMs) })
+                result?.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-xs text-gray-500 dark:text-gray-400", children: formatDuration3(result.durationMs) })
               ]
             },
             node.id
@@ -3950,12 +4120,12 @@ var STATUS_STYLES = {
   error: { icon: outline.ExclamationCircleIcon, colorClass: "text-red-500" },
   skipped: { icon: outline.ClockIcon, colorClass: "text-gray-400" }
 };
-function formatDuration3(durationMs) {
+function formatDuration4(durationMs) {
   if (durationMs === null) return "\u2014";
   if (durationMs < 1e3) return `${durationMs}ms`;
   return `${(durationMs / 1e3).toFixed(1)}s`;
 }
-function formatTimestamp(timestamp) {
+function formatTimestamp2(timestamp) {
   const date = new Date(timestamp);
   return date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", second: "2-digit" });
 }
@@ -4012,7 +4182,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                 /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: `h-3.5 w-3.5 ${statusStyle.colorClass}` }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-gray-700 dark:text-gray-300", children: nodeId.slice(0, 8) })
               ] }),
-              result.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: formatDuration3(result.durationMs) })
+              result.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: formatDuration4(result.durationMs) })
             ] }, nodeId);
           }) })
         ] }),
@@ -4028,7 +4198,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: t("duration") }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: formatDuration3(selectedNode.durationMs) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: formatDuration4(selectedNode.durationMs) })
             ] }),
             selectedNode.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: t("error") }),
@@ -4065,9 +4235,9 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: `h-3.5 w-3.5 ${statusStyle.colorClass}` }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-white", children: formatTimestamp(run.createdAt) })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-white", children: formatTimestamp2(run.createdAt) })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration3(run.totalDurationMs) })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration4(run.totalDurationMs) })
                   ] }),
                   run.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 truncate text-[10px] text-red-500", children: run.error })
                 ]
@@ -4091,7 +4261,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                       /* @__PURE__ */ jsxRuntime.jsx(NodeStatusIcon, { className: `h-3 w-3 ${nodeStatusStyle.colorClass}` }),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: nodeResult.nodeType })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration3(nodeResult.durationMs) })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration4(nodeResult.durationMs) })
                   ]
                 },
                 nodeResult.nodeId
@@ -4785,6 +4955,7 @@ exports.AutoSaveWorkspace = AutoSaveWorkspace;
 exports.DslExportModal = DslExportModal;
 exports.DslImportModal = DslImportModal;
 exports.DynamicIslandConfirm = DynamicIslandConfirm2;
+exports.ExecutionTimelinePanel = ExecutionTimelinePanel;
 exports.MetaLlamaIcon = MetaLlamaIcon;
 exports.NodePalette = NodePalette;
 exports.OutputSchemaBuilder = OutputSchemaBuilder;
@@ -4821,5 +4992,5 @@ exports.useNodeResults = useNodeResults;
 exports.useSelectedNodeCount = useSelectedNodeCount;
 exports.useSubworkflowStore = useSubworkflowStore;
 exports.useUndoRedo = useUndoRedo;
-//# sourceMappingURL=chunk-K4QJV3GC.js.map
-//# sourceMappingURL=chunk-K4QJV3GC.js.map
+//# sourceMappingURL=chunk-JFWZHROG.js.map
+//# sourceMappingURL=chunk-JFWZHROG.js.map