@burdenoff/fluidgrids-fe-sdk 2026.730.1 → 2026.730.2

package/dist/{chunk-3ZCTYLHL.js → chunk-ECX7WKZ3.js}

@@ -1,9 +1,9 @@
-import { ExecutionDetailDocument, ExecutionLogsDocument, ExecutionStatsDocument, throwIfResultError, PauseExecutionDocument, ResumeExecutionDocument, CancelExecutionDocument, RetryNodeDocument, TerminateExecutionDocument, ExecutionsListDocument } from './chunk-H7WSQN2I.js';
+import { ExecutionDetailDocument, ExecutionStatsDocument, throwIfResultError, PauseExecutionDocument, ResumeExecutionDocument, CancelExecutionDocument, RetryNodeDocument, TerminateExecutionDocument, ExecutionsListDocument } from './chunk-IU65EQOS.js';
 import { getFluidGridsClient } from './chunk-5BDQNSP3.js';
 import { Icon } from '@iconify/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { create } from 'zustand';
-import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { Button } from '@burdenoff/fe-libs/button';
 import { useNavigate } from 'react-router-dom';
 import { gql } from '@apollo/client';
@@ -1561,6 +1561,422 @@ function NodeTimeline({
     }) })
   ] });
 }
+var LEVEL_ORDER = ["DEBUG", "INFO", "WARN", "ERROR"];
+var LEVEL_TEXT_CLASS = {
+  DEBUG: "text-text-secondary",
+  INFO: "text-text-primary",
+  WARN: "text-[var(--color-status-warning-text)]",
+  ERROR: "text-[var(--color-status-error-text)]"
+};
+var LEVEL_BADGE_CLASS = {
+  DEBUG: "bg-muted text-tertiary",
+  INFO: "bg-[var(--color-status-info-bg)] text-[var(--color-status-info-text)]",
+  WARN: "bg-[var(--color-status-warning-bg)] text-[var(--color-status-warning-text)]",
+  ERROR: "bg-[var(--color-status-error-bg)] text-[var(--color-status-error-text)]"
+};
+function formatTimestamp(iso) {
+  const date = new Date(iso);
+  const time = date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  return `${time}.${String(date.getMilliseconds()).padStart(3, "0")}`;
+}
+function groupLines(lines, nodeStates) {
+  const byNode = /* @__PURE__ */ new Map();
+  const order = [];
+  for (const line of lines) {
+    const key = line.nodeId ?? "__run__";
+    let group = byNode.get(key);
+    if (!group) {
+      const state = line.nodeId ? nodeStates.find((ns) => ns.nodeId === line.nodeId) : void 0;
+      group = {
+        key,
+        nodeId: line.nodeId ?? null,
+        label: line.nodeId ? `${line.nodeId}${state?.nodeType ? ` \xB7 ${state.nodeType}` : ""}` : "Run",
+        status: state?.status,
+        lines: [],
+        hasError: false
+      };
+      byNode.set(key, group);
+      order.push(key);
+    }
+    group.lines.push(line);
+    if (line.level === "ERROR") group.hasError = true;
+  }
+  return order.map((key) => byNode.get(key));
+}
+function RunLogViewer({
+  runId,
+  lines,
+  nodeStates,
+  loading,
+  error,
+  hasMore,
+  limitReached,
+  streaming,
+  active,
+  minLevel,
+  onMinLevelChange,
+  onLoadMore
+}) {
+  const [search, setSearch] = useState("");
+  const [showTimestamps, setShowTimestamps] = useState(true);
+  const [wrap, setWrap] = useState(true);
+  const [follow, setFollow] = useState(true);
+  const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+  const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+  const [highlighted, setHighlighted] = useState(null);
+  const scrollRef = useRef(null);
+  const bottomRef = useRef(null);
+  const visible = useMemo(() => {
+    if (!search.trim()) return lines;
+    const needle = search.toLowerCase();
+    return lines.filter((line) => line.message.toLowerCase().includes(needle));
+  }, [lines, search]);
+  const groups = useMemo(
+    () => groupLines(visible, nodeStates),
+    [visible, nodeStates]
+  );
+  const isCollapsed = useCallback(
+    (group) => {
+      if (collapsed.has(group.key)) return true;
+      if (expanded.has(group.key)) return false;
+      if (group.nodeId === null) return false;
+      return !group.hasError && group.status !== "RUNNING";
+    },
+    [collapsed, expanded]
+  );
+  const toggleGroup = useCallback(
+    (key, currentlyCollapsed) => {
+      setCollapsed((prev) => {
+        const next = new Set(prev);
+        if (currentlyCollapsed) next.delete(key);
+        else next.add(key);
+        return next;
+      });
+      setExpanded((prev) => {
+        const next = new Set(prev);
+        if (currentlyCollapsed) next.add(key);
+        else next.delete(key);
+        return next;
+      });
+    },
+    []
+  );
+  useEffect(() => {
+    if (!follow) return;
+    bottomRef.current?.scrollIntoView({ block: "end" });
+  }, [visible.length, follow]);
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+    setFollow(atBottom);
+  }, []);
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (!hash.startsWith("#L")) return;
+    const target = hash.slice(2);
+    if (!lines.some((line) => line.id === target)) return;
+    setHighlighted(target);
+    setFollow(false);
+    const timer = setTimeout(() => {
+      document.getElementById(`L${target}`)?.scrollIntoView({ block: "center", behavior: "smooth" });
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [lines]);
+  const copyLineLink = useCallback((lineId) => {
+    const url = `${window.location.origin}${window.location.pathname}#L${lineId}`;
+    void navigator.clipboard?.writeText(url);
+    setHighlighted(lineId);
+  }, []);
+  const downloadRaw = useCallback(() => {
+    const body = lines.map((line) => {
+      const node = line.nodeId ? ` [${line.nodeId}]` : "";
+      return `${line.timestamp} ${line.level.padEnd(5)}${node} ${line.message}`;
+    }).join("\n");
+    const url = URL.createObjectURL(
+      new Blob([body], { type: "text/plain;charset=utf-8" })
+    );
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = `run-${runId}.log`;
+    anchor.click();
+    URL.revokeObjectURL(url);
+  }, [lines, runId]);
+  if (loading && lines.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-2", "data-testid": "run-log-loading", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-6 bg-background-tertiary rounded animate-pulse"
+      },
+      i
+    )) });
+  }
+  if (error && lines.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)] rounded-lg p-6 text-center", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: "mdi:alert-circle",
+          className: "mx-auto text-[var(--color-status-error-text)] mb-3",
+          width: 32
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-[var(--color-status-error-text)]", children: error.message })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", "data-testid": "run-log-viewer", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-[200px]", children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "mdi:magnify",
+            className: "absolute left-2 top-1/2 -translate-y-1/2 text-text-secondary",
+            width: 16
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "search",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: "Search log",
+            "aria-label": "Search log",
+            className: "w-full pl-8 pr-3 py-1.5 text-sm rounded border border-border-secondary bg-background-primary text-text-primary"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: minLevel ?? "ALL",
+          onChange: (e) => onMinLevelChange(
+            e.target.value === "ALL" ? null : e.target.value
+          ),
+          "aria-label": "Minimum log level",
+          className: "px-2 py-1.5 text-sm rounded border border-border-secondary bg-background-primary text-text-primary",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "ALL", children: "All levels" }),
+            LEVEL_ORDER.map((level) => /* @__PURE__ */ jsxs("option", { value: level, children: [
+              level,
+              " and above"
+            ] }, level))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => setShowTimestamps((v) => !v),
+          "aria-pressed": showTimestamps,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: "mdi:clock-outline", className: "mr-1", width: 16 }),
+            "Timestamps"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => setWrap((v) => !v),
+          "aria-pressed": wrap,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: "mdi:wrap", className: "mr-1", width: 16 }),
+            "Wrap"
+          ]
+        }
+      ),
+      active && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => setFollow((v) => !v),
+          "aria-pressed": follow,
+          children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: follow ? "mdi:pause" : "mdi:arrow-down-bold",
+                className: "mr-1",
+                width: 16
+              }
+            ),
+            follow ? "Following" : "Follow"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: downloadRaw,
+          disabled: lines.length === 0,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: "mdi:download", className: "mr-1", width: 16 }),
+            "Raw"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 text-xs text-text-secondary", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        visible.length,
+        " line",
+        visible.length === 1 ? "" : "s",
+        search.trim() && ` matching \u201C${search}\u201D`
+      ] }),
+      active && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `inline-block w-2 h-2 rounded-full ${streaming ? "bg-[var(--color-status-success-bg)]" : "bg-[var(--color-status-info-bg)]"}`
+          }
+        ),
+        streaming ? "Streaming" : "Polling"
+      ] }),
+      hasMore && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onLoadMore,
+          className: "text-action-primary-text hover:underline",
+          children: "Load older lines"
+        }
+      )
+    ] }),
+    limitReached && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 rounded border border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bg-subtle)] text-[var(--color-status-warning-text)] text-sm", children: "This run hit its log limit \u2014 later lines were dropped. Reduce logging inside loops, or split the workflow into sub-workflows." }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: scrollRef,
+        onScroll: handleScroll,
+        className: "max-h-[600px] overflow-auto rounded-lg border border-border-secondary bg-background-primary",
+        children: [
+          groups.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-10 text-text-secondary", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mdi:text-box-outline",
+                className: "mx-auto mb-2",
+                width: 32
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { children: search.trim() ? "No lines match your search" : active ? "Waiting for the first log line\u2026" : "This run produced no log output" })
+          ] }) : groups.map((group) => {
+            const groupCollapsed = isCollapsed(group);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "border-b border-border-secondary last:border-b-0",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => toggleGroup(group.key, groupCollapsed),
+                      "aria-expanded": !groupCollapsed,
+                      className: "w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-background-tertiary transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            icon: groupCollapsed ? "mdi:chevron-right" : "mdi:chevron-down",
+                            width: 18,
+                            className: "text-text-secondary flex-shrink-0"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `text-sm font-medium truncate ${group.hasError ? "text-[var(--color-status-error-text)]" : "text-text-primary"}`,
+                            children: group.label
+                          }
+                        ),
+                        group.status === "RUNNING" && /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            icon: "mdi:loading",
+                            className: "animate-spin text-[var(--color-status-info-text)] flex-shrink-0",
+                            width: 14
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-text-secondary flex-shrink-0", children: group.lines.length })
+                      ]
+                    }
+                  ),
+                  !groupCollapsed && /* @__PURE__ */ jsx("div", { className: "font-mono text-xs", children: group.lines.map((line) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      id: `L${line.id}`,
+                      className: `group flex items-start gap-2 px-3 py-0.5 hover:bg-background-tertiary ${highlighted === line.id ? "bg-[var(--color-status-info-bg-subtle)]" : ""}`,
+                      children: [
+                        showTimestamps && /* @__PURE__ */ jsx("span", { className: "text-text-secondary whitespace-nowrap select-none", children: formatTimestamp(line.timestamp) }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `px-1 rounded uppercase text-[10px] leading-4 font-medium flex-shrink-0 ${LEVEL_BADGE_CLASS[line.level]}`,
+                            children: line.level
+                          }
+                        ),
+                        line.attempt > 1 && /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: "text-text-secondary flex-shrink-0",
+                            title: `Attempt ${line.attempt}`,
+                            children: [
+                              "#",
+                              line.attempt
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: `flex-1 ${LEVEL_TEXT_CLASS[line.level]} ${wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre overflow-x-auto"}`,
+                            children: [
+                              line.message,
+                              line.truncated && /* @__PURE__ */ jsxs("span", { className: "text-text-secondary", children: [
+                                " ",
+                                "(truncated)"
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => copyLineLink(line.id),
+                            title: "Copy link to this line",
+                            "aria-label": "Copy link to this line",
+                            className: "opacity-0 group-hover:opacity-100 text-text-secondary hover:text-text-primary flex-shrink-0",
+                            children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:link-variant", width: 14 })
+                          }
+                        )
+                      ]
+                    },
+                    line.id
+                  )) })
+                ]
+              },
+              group.key
+            );
+          }),
+          /* @__PURE__ */ jsx("div", { ref: bottomRef })
+        ]
+      }
+    )
+  ] });
+}
 function Pagination({
   totalItems,
   showPageSize = true
@@ -1807,41 +2223,6 @@ function useExecution(id) {
     refetch: fetchData
   };
 }
-function useExecutionLogs(runId, limit = 100) {
-  const [logs, setLogs] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const fetchData = useCallback(async () => {
-    if (!runId) {
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    setError(null);
-    try {
-      const client = getFluidGridsClient();
-      const result = await client.query({
-        query: ExecutionLogsDocument,
-        variables: { runId, limit },
-        fetchPolicy: "network-only"
-      });
-      setLogs(result.data?.workflowExecutionLogs ?? []);
-    } catch (err) {
-      setError(err);
-    } finally {
-      setLoading(false);
-    }
-  }, [runId, limit]);
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-  return {
-    logs,
-    loading,
-    error,
-    refetch: fetchData
-  };
-}
 function useExecutionStats(options = {}) {
   const [stats, setStats] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -2024,6 +2405,6 @@ function useAutoRefresh(refetchFn, enabled = true, interval = 5e3) {
   }, [enabled, interval, refetchFn]);
 }
 
-export { ExecutionCards, ExecutionFilters, ExecutionStats, ExecutionStatusBadge, ExecutionTable, ExecutionTimeline, NodeTimeline, Pagination, useAutoRefresh, useExecution, useExecutionActions, useExecutionLogs, useExecutionStats, useExecutionsStore, useExecutionsWithStore };
-//# sourceMappingURL=chunk-3ZCTYLHL.js.map
-//# sourceMappingURL=chunk-3ZCTYLHL.js.map
+export { ExecutionCards, ExecutionFilters, ExecutionStats, ExecutionStatusBadge, ExecutionTable, ExecutionTimeline, NodeTimeline, Pagination, RunLogViewer, useAutoRefresh, useExecution, useExecutionActions, useExecutionStats, useExecutionsStore, useExecutionsWithStore };
+//# sourceMappingURL=chunk-ECX7WKZ3.js.map
+//# sourceMappingURL=chunk-ECX7WKZ3.js.map