@burdenoff/fluidgrids-fe-sdk 2026.1101.1 → 2026.1101.2

package/dist/chunk-MR2B67NW.js

@@ -0,0 +1,338 @@
+import { useFlowStore } from './chunk-NZJWKVER.js';
+import { useTr } from './chunk-UULVIT25.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { cn } from '@burdenoff/fe-libs/utils';
+import { Button } from '@burdenoff/fe-libs/ui';
+import { Icon } from '@iconify/react';
+import { useShallow } from 'zustand/shallow';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var JsonView = ({
+  data
+}) => {
+  const tr = useTr();
+  if (!data)
+    return /* @__PURE__ */ jsx("div", { className: "text-tertiary p-4", children: tr("fluidgrids.builder.logsPanel.jsonViewNoData", "No data") });
+  return /* @__PURE__ */ jsx("pre", { className: "text-xs overflow-auto p-4 bg-card/50 rounded h-full", children: JSON.stringify(data, null, 2) });
+};
+var TableView = ({
+  data
+}) => {
+  const tr = useTr();
+  if (!data)
+    return /* @__PURE__ */ jsx("div", { className: "text-tertiary p-4", children: tr("fluidgrids.builder.logsPanel.tableViewNoData", "No data") });
+  const entries = Object.entries(data);
+  if (entries.length === 0)
+    return /* @__PURE__ */ jsx("div", { className: "text-tertiary p-4", children: tr(
+      "fluidgrids.builder.logsPanel.tableViewEmptyObject",
+      "Empty object"
+    ) });
+  return /* @__PURE__ */ jsx("div", { className: "overflow-auto h-full", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+    /* @__PURE__ */ jsx("thead", { className: "bg-card-foreground/10 sticky top-0", children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "text-left p-2", children: tr("fluidgrids.builder.logsPanel.tableColumnField", "Field") }),
+      /* @__PURE__ */ jsx("th", { className: "text-left p-2", children: tr("fluidgrids.builder.logsPanel.tableColumnType", "Type") }),
+      /* @__PURE__ */ jsx("th", { className: "text-left p-2", children: tr("fluidgrids.builder.logsPanel.tableColumnValue", "Value") })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-card-foreground/10", children: [
+      /* @__PURE__ */ jsx("td", { className: "p-2 font-medium text-accent", children: key }),
+      /* @__PURE__ */ jsx("td", { className: "p-2 text-secondary", children: typeof value }),
+      /* @__PURE__ */ jsx("td", { className: "p-2 truncate max-w-[200px]", children: typeof value === "object" ? JSON.stringify(value) : String(value) })
+    ] }, key)) })
+  ] }) });
+};
+var LogListItem = ({
+  log,
+  isSelected,
+  onClick
+}) => {
+  const statusIcon = {
+    pending: "mdi:clock-outline",
+    running: "svg-spinners:ring-resize",
+    completed: "mdi:check-circle",
+    failed: "mdi:close-circle"
+  }[log.status];
+  const statusColor = {
+    pending: "text-tertiary",
+    running: "text-accent",
+    completed: "text-[var(--color-status-success-text)]",
+    failed: "text-[var(--color-status-error-text)]"
+  }[log.status];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "w-full text-left p-2 flex items-center gap-2 text-xs transition-colors",
+        isSelected ? "bg-primary/20 border-l-2 border-primary" : "hover:bg-card-foreground/10"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon: statusIcon, className: cn("size-4", statusColor) }),
+        /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: log.nodeName }),
+        log.duration && /* @__PURE__ */ jsxs("span", { className: "text-tertiary text-[10px]", children: [
+          log.duration.toFixed(2),
+          "s"
+        ] })
+      ]
+    }
+  );
+};
+var LogDetailView = ({ log }) => {
+  const tr = useTr();
+  const [activeTab, setActiveTab] = useState("output");
+  const [viewMode, setViewMode] = useState("json");
+  if (!log) {
+    return /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-tertiary text-sm", children: tr(
+      "fluidgrids.builder.logsPanel.detailEmptyState",
+      "Select a step to view details"
+    ) });
+  }
+  const statusColor = {
+    pending: "text-tertiary",
+    running: "text-accent",
+    completed: "text-[var(--color-status-success-text)]",
+    failed: "text-[var(--color-status-error-text)]"
+  }[log.status];
+  const data = activeTab === "input" ? log.inputArgs : log.output;
+  const itemCount = data ? Object.keys(data).length : 0;
+  const resumeUrl = typeof log.output?._resumeUrl === "string" ? log.output._resumeUrl : null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-2 border-b border-card-foreground/10", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: log.nodeName }),
+        /* @__PURE__ */ jsx("span", { className: cn("text-xs capitalize", statusColor), children: log.status === "completed" ? tr("fluidgrids.builder.logsPanel.statusSuccess", "Success") : log.status }),
+        log.duration && /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-muted", children: [
+          "in ",
+          (log.duration * 1e3).toFixed(0),
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: viewMode === "json" ? "secondary" : "ghost",
+            size: "icon",
+            className: "size-6",
+            onClick: () => setViewMode("json"),
+            title: tr(
+              "fluidgrids.builder.logsPanel.jsonViewTooltip",
+              "JSON View"
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:code-json", className: "size-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: viewMode === "table" ? "secondary" : "ghost",
+            size: "icon",
+            className: "size-6",
+            onClick: () => setViewMode("table"),
+            title: tr(
+              "fluidgrids.builder.logsPanel.tableViewTooltip",
+              "Table View"
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:table", className: "size-3" })
+          }
+        )
+      ] })
+    ] }),
+    resumeUrl && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-card-foreground/10 px-2 py-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: tr("fluidgrids.builder.logsPanel.resumeUrl", "Resume URL") }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          readOnly: true,
+          value: resumeUrl,
+          onFocus: (e) => e.currentTarget.select(),
+          className: "min-w-0 flex-1 rounded-md border border-border bg-muted/40 px-2 py-1 font-mono text-[11px] outline-none focus:border-primary"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => void navigator.clipboard?.writeText(resumeUrl),
+          className: "shrink-0 rounded-md border border-border px-2 py-1 text-[11px] font-medium hover:bg-muted",
+          children: tr("fluidgrids.builder.logsPanel.copy", "Copy")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex border-b border-card-foreground/10", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cn(
+            "px-4 py-2 text-xs font-medium transition-colors duration-200",
+            activeTab === "input" ? "border-b-2 border-primary text-primary" : "text-secondary hover:text-primary"
+          ),
+          onClick: () => setActiveTab("input"),
+          children: tr("fluidgrids.builder.logsPanel.tabInput", "Input")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cn(
+            "px-4 py-2 text-xs font-medium transition-colors duration-200",
+            activeTab === "output" ? "border-b-2 border-primary text-primary" : "text-secondary hover:text-primary"
+          ),
+          onClick: () => setActiveTab("output"),
+          children: tr("fluidgrids.builder.logsPanel.tabOutput", "Output")
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxs("span", { className: "px-4 py-2 text-xs text-tertiary", children: [
+        itemCount,
+        " ",
+        itemCount !== 1 ? tr("fluidgrids.builder.logsPanel.itemCountOther", "items") : tr("fluidgrids.builder.logsPanel.itemCountOne", "item")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: log.error && activeTab === "output" ? /* @__PURE__ */ jsxs("div", { className: "p-4 bg-[var(--color-status-error-bg-subtle)] text-[var(--color-status-error-text)] text-xs", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium mb-1", children: tr("fluidgrids.builder.logsPanel.errorHeading", "Error:") }),
+      log.error
+    ] }) : viewMode === "json" ? /* @__PURE__ */ jsx(JsonView, { data }) : /* @__PURE__ */ jsx(TableView, { data }) })
+  ] });
+};
+var LogsPanel = () => {
+  const tr = useTr();
+  const [
+    logs,
+    selectedLogId,
+    panelExpanded,
+    selectLog,
+    togglePanel,
+    clearLogs
+  ] = useFlowStore(
+    useShallow((s) => [
+      s.execution.logs,
+      s.execution.selectedLogId,
+      s.execution.panelExpanded,
+      s.actions.execution.selectLog,
+      s.actions.execution.togglePanel,
+      s.actions.execution.clearLogs
+    ])
+  );
+  const selectedLog = logs.find((l) => l.id === selectedLogId) || null;
+  const [panelHeight, setPanelHeight] = useState(350);
+  const isResizing = useRef(false);
+  const startY = useRef(0);
+  const startHeight = useRef(0);
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      isResizing.current = true;
+      startY.current = e.clientY;
+      startHeight.current = panelHeight;
+      document.body.style.cursor = "ns-resize";
+      document.body.style.userSelect = "none";
+    },
+    [panelHeight]
+  );
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isResizing.current) return;
+      const deltaY = startY.current - e.clientY;
+      const newHeight = Math.max(
+        150,
+        Math.min(600, startHeight.current + deltaY)
+      );
+      setPanelHeight(newHeight);
+    };
+    const handleMouseUp = () => {
+      isResizing.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+  if (!panelExpanded && logs.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative border-t border-card-foreground/10 bg-card/95 backdrop-blur-sm transition-[height] duration-150",
+        !panelExpanded && "h-10"
+      ),
+      style: { height: panelExpanded ? panelHeight : 40 },
+      children: [
+        panelExpanded && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize bg-transparent hover:bg-primary/30 transition-colors z-10 group",
+            onMouseDown: handleMouseDown,
+            children: /* @__PURE__ */ jsx("div", { className: "absolute top-0.5 left-1/2 -translate-x-1/2 w-8 h-0.5 rounded-full bg-card-foreground/20 group-hover:bg-primary/50 transition-colors" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "h-10 flex items-center justify-between px-3 border-b border-card-foreground/10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "size-6",
+                onClick: togglePanel,
+                children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: panelExpanded ? "mdi:chevron-down" : "mdi:chevron-up",
+                    className: "size-4"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: tr("fluidgrids.builder.logsPanel.title", "Logs") }),
+            logs.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-tertiary", children: [
+              "(",
+              logs.length,
+              " ",
+              tr("fluidgrids.builder.logsPanel.stepsSuffix", "steps"),
+              ")"
+            ] })
+          ] }),
+          logs.length > 0 && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-6 text-xs",
+              onClick: clearLogs,
+              children: [
+                /* @__PURE__ */ jsx(Icon, { icon: "mdi:trash-can-outline", className: "size-3 mr-1" }),
+                tr(
+                  "fluidgrids.builder.logsPanel.clearExecution",
+                  "Clear execution"
+                )
+              ]
+            }
+          )
+        ] }),
+        panelExpanded && /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100%-40px)]", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-[200px] border-r border-card-foreground/10 overflow-y-auto", children: logs.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-xs text-tertiary text-center", children: tr(
+            "fluidgrids.builder.logsPanel.emptyState",
+            "No execution logs yet"
+          ) }) : logs.map((log) => /* @__PURE__ */ jsx(
+            LogListItem,
+            {
+              log,
+              isSelected: log.id === selectedLogId,
+              onClick: () => selectLog(log.id)
+            },
+            log.id
+          )) }),
+          /* @__PURE__ */ jsx(LogDetailView, { log: selectedLog })
+        ] })
+      ]
+    }
+  );
+};
+
+export { JsonView, LogsPanel, TableView };

package/dist/{chunk-RIHYPPMQ.js → chunk-NLYQ3XDE.js}

@@ -1,5 +1,5 @@
 import { LOG_STREAM_DESTINATIONS, CREATE_LOG_STREAM_DESTINATION, UPDATE_LOG_STREAM_DESTINATION, DELETE_LOG_STREAM_DESTINATION, TEST_LOG_STREAM_DESTINATION, REPLAY_WORKFLOW_RUN, RETRY_WORKFLOW_RUNS, OBSERVABILITY_DASHBOARD_SUMMARY, OBSERVABILITY_FAILED_RUNS, OBSERVABILITY_DATA_SINKS, OBSERVABILITY_DATA_SINK_DATA } from './chunk-5ERAJC2I.js';
-import { throwIfResultError, describeOperationError, useFluidGridsAnalytics, emitRunStarted, openRunQuotaUpgradePrompt, useFluidGridsFlag, FLUIDGRIDS_FLAGS } from './chunk-6ILIBJFH.js';
+import { throwIfResultError, describeOperationError, useFluidGridsAnalytics, emitRunStarted, openRunQuotaUpgradePrompt, useFluidGridsFlag, FLUIDGRIDS_FLAGS } from './chunk-NZJWKVER.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { getFluidGridsClient } from './chunk-NTWG3CJX.js';
 import { useCallback, useState, useMemo, useEffect } from 'react';