@burdenoff/fluidgrids-fe-sdk 2026.922.11 → 2026.922.13

package/dist/index.js

@@ -42,7 +42,7 @@ import { Icon } from '@iconify/react';
 import { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';
 import '@xyflow/react/dist/style.css';
 import { Button } from '@burdenoff/fe-libs/button';
-import { Tabs, TabsList, TabsTrigger, TabsContent, Card, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Badge, CardHeader, Label, Input, Switch, Dialog, DialogContent, DialogHeader, DialogTitle, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DialogFooter } from '@burdenoff/fe-libs/ui';
+import { Tabs, TabsList, TabsTrigger, TabsContent, Card, CardContent, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Badge, CardHeader, Label, Input, Switch, Dialog, DialogContent, DialogHeader, DialogTitle, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DialogFooter, Textarea } from '@burdenoff/fe-libs/ui';
 import { toast } from 'sonner';
 import { gql } from '@apollo/client';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -1010,17 +1010,24 @@ function ExternalProvidersTab() {
   const { saveConfig, loading: saving } = useSaveSecretsProviderConfig();
   const { testConnection, loading: testing } = useTestSecretsProviderConnection();
   const awsConfig = configs.find((c) => c.provider === "AWS_SECRETS_MANAGER");
-  const [prefix, setPrefix] = useState(
-    awsConfig?.awsSecretsManagerPrefix ?? ""
-  );
-  const [region, setRegion] = useState(awsConfig?.awsRegion ?? "ap-south-1");
-  const [enabled, setEnabled] = useState(awsConfig?.isEnabled ?? false);
-  const [lastTest, setLastTest] = useState(
-    awsConfig?.lastTestStatus ? {
-      success: awsConfig.lastTestStatus === "SUCCESS",
-      message: awsConfig.lastTestMessage ?? ""
-    } : null
-  );
+  const [prefix, setPrefix] = useState("");
+  const [region, setRegion] = useState("ap-south-1");
+  const [enabled, setEnabled] = useState(false);
+  const [lastTest, setLastTest] = useState(null);
+  const [hydratedConfigId, setHydratedConfigId] = useState(null);
+  useEffect(() => {
+    if (!awsConfig || awsConfig.id === hydratedConfigId) return;
+    setPrefix(awsConfig.awsSecretsManagerPrefix ?? "");
+    setRegion(awsConfig.awsRegion ?? "ap-south-1");
+    setEnabled(awsConfig.isEnabled);
+    setLastTest(
+      awsConfig.lastTestStatus ? {
+        success: awsConfig.lastTestStatus === "SUCCESS",
+        message: awsConfig.lastTestMessage ?? ""
+      } : null
+    );
+    setHydratedConfigId(awsConfig.id);
+  }, [awsConfig, hydratedConfigId]);
   const handleSave = useCallback(async () => {
     try {
       await saveConfig({
@@ -1173,6 +1180,404 @@ function VariablesPage() {
     ] })
   ] });
 }
+var TOOL_APPROVAL_FIELDS = gql`
+  fragment ToolApprovalRequestFields on ToolApprovalRequest {
+    id
+    runId
+    nodeId
+    workflowId
+    workflowKey
+    status
+    toolCalls {
+      callId
+      name
+      argsJson
+    }
+    decisions {
+      callId
+      decision
+      reason
+    }
+    timeoutAt
+    timeoutAction
+    requestedAt
+    decidedAt
+    decidedBy
+  }
+`;
+var GET_PENDING_TOOL_APPROVALS = gql`
+  ${TOOL_APPROVAL_FIELDS}
+  query GetPendingToolApprovals($limit: Int, $offset: Int) {
+    pendingToolApprovals(limit: $limit, offset: $offset) {
+      totalCount
+      items {
+        ...ToolApprovalRequestFields
+      }
+    }
+  }
+`;
+var DECIDE_TOOL_APPROVAL = gql`
+  ${TOOL_APPROVAL_FIELDS}
+  mutation DecideToolApproval(
+    $id: ID!
+    $decisions: [ToolApprovalDecisionInput!]!
+  ) {
+    decideToolApproval(id: $id, decisions: $decisions) {
+      success
+      error
+      resumedFromNodeId
+      request {
+        ...ToolApprovalRequestFields
+      }
+    }
+  }
+`;
+function usePendingToolApprovals(options) {
+  const limit = options?.limit ?? 50;
+  const offset = options?.offset ?? 0;
+  const pollIntervalMs = options?.pollIntervalMs ?? 15e3;
+  const [items, setItems] = useState([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchData = useCallback(async () => {
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const result = await client.query({
+        query: GET_PENDING_TOOL_APPROVALS,
+        variables: { limit, offset },
+        fetchPolicy: "network-only"
+      });
+      setItems(result.data?.pendingToolApprovals?.items ?? []);
+      setTotalCount(result.data?.pendingToolApprovals?.totalCount ?? 0);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [limit, offset]);
+  useEffect(() => {
+    fetchData();
+    if (pollIntervalMs <= 0) return;
+    const interval = setInterval(fetchData, pollIntervalMs);
+    return () => clearInterval(interval);
+  }, [fetchData, pollIntervalMs]);
+  return { items, totalCount, loading, error, refetch: fetchData };
+}
+function useDecideToolApproval() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const decide = useCallback(
+    async (id, decisions) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const client = getFluidGridsClient();
+        const result = throwIfResultError(
+          await client.mutate({
+            mutation: DECIDE_TOOL_APPROVAL,
+            variables: { id, decisions }
+          })
+        );
+        const response = result.data?.decideToolApproval;
+        if (!response?.success) {
+          throw new Error(response?.error ?? "Failed to record the decision");
+        }
+        return response;
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+  const decideAll = useCallback(
+    async (request, decision, reason) => {
+      return decide(
+        request.id,
+        request.toolCalls.map((call) => ({
+          callId: call.callId,
+          decision,
+          reason
+        }))
+      );
+    },
+    [decide]
+  );
+  return { decide, decideAll, loading, error };
+}
+function formatArgs(argsJson) {
+  try {
+    return JSON.stringify(JSON.parse(argsJson), null, 2);
+  } catch {
+    return argsJson;
+  }
+}
+function timeAgo(iso, tr) {
+  const then = new Date(iso).getTime();
+  const diffMs = Date.now() - then;
+  const minutes = Math.floor(diffMs / 6e4);
+  if (minutes < 1) return tr("fluidgrids.toolApproval.justNow", "just now");
+  if (minutes < 60)
+    return tr("fluidgrids.toolApproval.minutesAgo", "{{minutes}}m ago", {
+      minutes
+    });
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24)
+    return tr("fluidgrids.toolApproval.hoursAgo", "{{hours}}h ago", { hours });
+  const days = Math.floor(hours / 24);
+  return tr("fluidgrids.toolApproval.daysAgo", "{{days}}d ago", { days });
+}
+function RejectDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  submitting
+}) {
+  const tr = useTr();
+  const [reason, setReason] = useState("");
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: tr(
+      "fluidgrids.toolApproval.rejectDialogTitle",
+      "Reject tool call"
+    ) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "reject-reason", children: tr(
+        "fluidgrids.toolApproval.rejectReasonLabel",
+        "Reason (optional)"
+      ) }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "reject-reason",
+          value: reason,
+          onChange: (e) => setReason(e.target.value),
+          placeholder: tr(
+            "fluidgrids.toolApproval.rejectReasonPlaceholder",
+            "Why is this call being rejected? The agent sees this."
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: () => onOpenChange(false),
+          disabled: submitting,
+          children: tr("fluidgrids.toolApproval.cancel", "Cancel")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "destructive",
+          onClick: () => onConfirm(reason),
+          disabled: submitting,
+          children: submitting ? tr("fluidgrids.toolApproval.rejecting", "Rejecting\u2026") : tr("fluidgrids.toolApproval.rejectConfirm", "Reject")
+        }
+      )
+    ] })
+  ] }) });
+}
+function RequestCard({ request, onDecided }) {
+  const tr = useTr();
+  const { decideAll, loading } = useDecideToolApproval();
+  const [showReject, setShowReject] = useState(false);
+  const handleDecide = async (decision, reason) => {
+    try {
+      await decideAll(request, decision, reason);
+      toast.success(
+        decision === "APPROVED" ? tr(
+          "fluidgrids.toolApproval.approvedToast",
+          "Tool call approved \u2014 run resumed"
+        ) : tr(
+          "fluidgrids.toolApproval.rejectedToast",
+          "Tool call rejected \u2014 run resumed"
+        )
+      );
+      setShowReject(false);
+      onDecided();
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : tr(
+          "fluidgrids.toolApproval.decisionFailed",
+          "Failed to record the decision"
+        )
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: "border border-border-secondary bg-background-secondary",
+      "data-testid": "tool-approval-card",
+      "data-request-id": request.id,
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "pb-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: "mdi:robot-outline",
+                  width: 18,
+                  className: "text-text-secondary"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-text-primary", children: [
+                tr("fluidgrids.toolApproval.nodeLabel", "Node"),
+                ":",
+                " ",
+                request.nodeId
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: request.workflowKey })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-secondary", children: [
+            tr("fluidgrids.toolApproval.requestedAt", "Requested {{when}}", {
+              when: timeAgo(request.requestedAt, tr)
+            }),
+            request.timeoutAt && ` \xB7 ${tr(
+              "fluidgrids.toolApproval.autoResolvesAt",
+              "auto-resolves at {{time}}",
+              {
+                time: new Date(request.timeoutAt).toLocaleString()
+              }
+            )}`
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+          request.toolCalls.map((call) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "rounded-md border border-border-secondary bg-background-primary p-3",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      icon: "mdi:function-variant",
+                      width: 14,
+                      className: "text-text-secondary"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: call.name })
+                ] }),
+                /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap break-all text-xs text-text-secondary", children: formatArgs(call.argsJson) })
+              ]
+            },
+            call.callId
+          )),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-1", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                disabled: loading,
+                onClick: () => handleDecide("APPROVED"),
+                "data-testid": "tool-approval-approve",
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: "mdi:check", className: "mr-1.5", width: 16 }),
+                  tr("fluidgrids.toolApproval.approve", "Approve")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                variant: "destructive",
+                disabled: loading,
+                onClick: () => setShowReject(true),
+                "data-testid": "tool-approval-reject",
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: "mdi:close", className: "mr-1.5", width: 16 }),
+                  tr("fluidgrids.toolApproval.reject", "Reject")
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          RejectDialog,
+          {
+            open: showReject,
+            onOpenChange: setShowReject,
+            submitting: loading,
+            onConfirm: (reason) => handleDecide("REJECTED", reason || void 0)
+          }
+        )
+      ]
+    }
+  );
+}
+function ApprovalInboxPage() {
+  const tr = useTr();
+  const navigate = useNavigate();
+  const { items, totalCount, loading, error, refetch } = usePendingToolApprovals();
+  return /* @__PURE__ */ jsxs("div", { className: "p-4 sm:p-6 bg-background-primary min-h-screen", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl sm:text-3xl font-bold text-text-primary", children: tr("fluidgrids.toolApproval.pageTitle", "Tool Approvals") }),
+        /* @__PURE__ */ jsx("p", { className: "text-text-secondary mt-1", children: tr(
+          "fluidgrids.toolApproval.pageSubtitle",
+          "AI Agent tool calls waiting for a human decision before they run"
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: () => navigate("../runs"), children: [
+        /* @__PURE__ */ jsx(Icon, { icon: "mdi:arrow-left", className: "mr-2", width: 16 }),
+        tr("fluidgrids.toolApproval.backToRuns", "Back to Runs")
+      ] })
+    ] }),
+    loading && items.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-text-secondary text-sm", children: tr("fluidgrids.toolApproval.loading", "Loading\u2026") }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: tr(
+      "fluidgrids.toolApproval.loadFailed",
+      "Failed to load pending approvals: {{message}}",
+      {
+        message: error.message
+      }
+    ) }),
+    !loading && !error && items.length === 0 && /* @__PURE__ */ jsx(Card, { className: "border border-border-secondary bg-background-secondary", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col items-center gap-2 py-10 text-center", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: "mdi:shield-check-outline",
+          width: 32,
+          className: "text-text-secondary"
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-text-primary", children: tr(
+        "fluidgrids.toolApproval.emptyTitle",
+        "Nothing waiting for approval"
+      ) }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: tr(
+        "fluidgrids.toolApproval.emptySubtitle",
+        "Runs will appear here when an AI Agent with tool approval enabled proposes a tool call."
+      ) })
+    ] }) }),
+    items.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mb-3 text-xs text-text-secondary",
+        "data-testid": "tool-approval-count",
+        children: tr(
+          "fluidgrids.toolApproval.count",
+          "{{count}} pending ({{total}} total)",
+          {
+            count: items.length,
+            total: totalCount
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: items.map((request) => /* @__PURE__ */ jsx(RequestCard, { request, onDecided: refetch }, request.id)) })
+  ] });
+}
 
 // src/graphql/client-helpers.ts
 function createFluidGridsClients(config2) {
@@ -1236,7 +1641,7 @@ var NODE_STATUS_CONFIG = {
   error: { label: "Error", color: "text-red-600", bgColor: "bg-red-100" },
   skipped: { label: "Skipped", color: "text-gray-400", bgColor: "bg-gray-50" }
 };
-var Textarea = React4.forwardRef(
+var Textarea2 = React4.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -1251,7 +1656,7 @@ var Textarea = React4.forwardRef(
     );
   }
 );
-Textarea.displayName = "Textarea";
+Textarea2.displayName = "Textarea";
 function Tabs2({
   className,
   ...props
@@ -1672,6 +2077,6 @@ var PopoverContent = React4.forwardRef(({ className, align = "center", sideOffse
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Checkbox, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FluidGridsRoot, NODE_STATUS_CONFIG, Popover, PopoverContent, PopoverTrigger, RUN_STATUS_CONFIG, ScrollArea, ScrollBar, Select2 as Select, SelectContent2 as SelectContent, SelectGroup, SelectItem2 as SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger2 as SelectTrigger, SelectValue2 as SelectValue, Separator, Switch2 as Switch, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Textarea, VariablesPage, WorkflowEmbedPage, createFluidGridsClients, useCreateVariable, useDeleteVariable, useRevealVariableValue, useSaveSecretsProviderConfig, useSecretsProviderConfigs, useTestSecretsProviderConnection, useUpdateVariable, useVariables };
+export { ApprovalInboxPage, Checkbox, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FluidGridsRoot, NODE_STATUS_CONFIG, Popover, PopoverContent, PopoverTrigger, RUN_STATUS_CONFIG, ScrollArea, ScrollBar, Select2 as Select, SelectContent2 as SelectContent, SelectGroup, SelectItem2 as SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger2 as SelectTrigger, SelectValue2 as SelectValue, Separator, Switch2 as Switch, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Textarea2 as Textarea, VariablesPage, WorkflowEmbedPage, createFluidGridsClients, useCreateVariable, useDecideToolApproval, useDeleteVariable, usePendingToolApprovals, useRevealVariableValue, useSaveSecretsProviderConfig, useSecretsProviderConfigs, useTestSecretsProviderConnection, useUpdateVariable, useVariables };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map