@burdenoff/fluidgrids-fe-sdk 2026.1112.8 → 2026.1112.9

package/dist/ApprovalInboxPage-Bb8H9ruw.js

@@ -0,0 +1,1317 @@
+"use client";
+import { t as __exportAll } from "./rolldown-runtime-hDbaFkMy.js";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import { n as useNavigationV2 } from "./useNavigationV2-C2WeqN7d.js";
+import { _ as throwIfResultError, h as isForbiddenError, m as describeOperationError, n as getFluidGridsClient } from "./client-C9XSzSXr.js";
+import { a as useRecipientLabel, i as notAnswerableText, n as ApprovalApprovers, r as answeredToastText, t as channelLabel } from "./channel-CZ70oI81.js";
+import { n as useRespondToHumanRequest, t as usePendingHumanRequests } from "./useHumanRequests-ZiR0sSzS.js";
+import { t as TechnicalDetails } from "./TechnicalDetails-D4xGy201.js";
+import { t as FluidGridsDocsLink } from "./FluidGridsDocsLink-JxkBpOeb.js";
+import { r as nodeDisplayTitle, t as buildNodeDisplayMap } from "./run-display-BycKYSU0.js";
+import { i as SdkPermissionButton, s as useFluidGridsPermission, t as FLUIDGRIDS_PERMISSIONS } from "./constants-dcxg6zG6.js";
+import { useCallback, useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { Icon } from "@iconify/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { gql } from "@apollo/client";
+import { Badge, Card, CardContent, CardHeader, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Textarea } from "@burdenoff/fe-libs/ui";
+import { Button as Button$1 } from "@burdenoff/fe-libs/button";
+
+// src/modules/human-response/utils/approval-labels.ts
+/**
+* The raw ids every Approvals card keeps one click away (Navigation v2,
+* BOFF-11848): the workflow key, the run id and the step (node) id.
+*/
+function approvalTechnicalRows(ids, tr) {
+	return [
+		{
+			label: tr("fluidgrids.approvals.technicalWorkflowKey", "Workflow key"),
+			value: ids.workflowKey
+		},
+		{
+			label: tr("fluidgrids.approvals.technicalRunId", "Run ID"),
+			value: ids.runId
+		},
+		{
+			label: tr("fluidgrids.approvals.technicalStepId", "Step ID"),
+			value: ids.nodeId
+		}
+	];
+}
+/**
+* Where an Approvals card comes from, in words (Navigation v2): "Step: Sort
+* the ticket in Support desk", or "In Support desk" when the step's name is
+* not known.
+*/
+function approvalSourceText(workflow, step, tr) {
+	return step ? tr("fluidgrids.approvals.stepInWorkflow", "Step: {{step}} in {{workflow}}", {
+		step,
+		workflow
+	}) : tr("fluidgrids.approvals.inWorkflow", "In {{workflow}}", { workflow });
+}
+
+// src/modules/human-response/components/ApprovalSource.tsx
+/** "Open run": the run this card belongs to, on the Runs page. */
+function OpenRunLink({ runId }) {
+	const tr = useTr();
+	return /* @__PURE__ */ jsx(Link, {
+		to: `../runs/${encodeURIComponent(runId)}`,
+		"data-testid": "approval-open-run",
+		className: "font-medium text-text-link underline-offset-2 hover:text-text-linkHover hover:underline",
+		children: tr("fluidgrids.approvals.openRun", "Open run")
+	});
+}
+/** "Step: {step} in {workflow} · Open run" under an ask's title. */
+function ApprovalSource({ workflow, step, runId }) {
+	const tr = useTr();
+	return /* @__PURE__ */ jsxs("p", {
+		className: "flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs text-text-secondary",
+		"data-testid": "approval-source",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 break-words",
+			children: approvalSourceText(workflow, step, tr)
+		}), /* @__PURE__ */ jsx(OpenRunLink, { runId })]
+	});
+}
+/** The raw ids of a card, one click away under "Show technical details". */
+function ApprovalTechnicalDetails({ rows, children }) {
+	return /* @__PURE__ */ jsxs(TechnicalDetails, {
+		"data-testid": "approval-technical-details",
+		children: [/* @__PURE__ */ jsx("dl", {
+			className: "space-y-1 text-xs",
+			children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-x-2",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "font-medium text-text-secondary",
+					children: row.label
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "break-all font-mono text-text-primary",
+					children: row.value
+				})]
+			}, row.label))
+		}), children]
+	});
+}
+
+// src/modules/human-response/components/HumanRequestCard.tsx
+/**
+* One "Send and Wait for Response" ask in the in-app inbox (BOFF-7651): what was asked, of whom,
+* through which channel and until when — and, when the caller may answer it in-app, the controls
+* to do so (Approve / Decline, a text box, or the custom form). An approval with several approvers
+* (BOFF-9956) also shows where its quorum stands and takes an optional comment with the answer.
+*
+* Navigation v2 (BOFF-11848, FluidGrids only): the card names its workflow (and step) with an
+* "Open run" link instead of the raw workflow-key badge, which moves under "Show technical
+* details" with the run and step ids; a required field says "(required)" instead of " *".
+*/
+const CHANNEL_ICON = {
+	EMAIL: "mdi:email-outline",
+	SLACK: "mdi:slack",
+	IN_APP: "mdi:bell-outline"
+};
+function inputType(field) {
+	const type = (field.type || "text").toLowerCase();
+	return [
+		"email",
+		"number",
+		"date",
+		"tel",
+		"url"
+	].includes(type) ? type : "text";
+}
+function FormControls({ requestId, fields, values, onChange }) {
+	const tr = useTr();
+	const v2 = useNavigationV2();
+	const marker = v2 ? ` ${tr("fluidgrids.humanResponse.requiredMarker", "(required)")}` : " *";
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-3",
+		children: fields.map((field) => {
+			const id = `human-field-${requestId}-${field.name}`;
+			const required = field.required || void 0;
+			const type = (field.type || "text").toLowerCase();
+			return /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [/* @__PURE__ */ jsxs(Label, {
+					htmlFor: id,
+					children: [field.label || field.name, field.required && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: v2 ? "text-text-secondary" : void 0,
+						children: marker
+					})]
+				}), type === "textarea" ? /* @__PURE__ */ jsx(Textarea, {
+					id,
+					"aria-required": required,
+					value: values[field.name] ?? "",
+					placeholder: field.placeholder ?? void 0,
+					onChange: (event) => onChange(field.name, event.target.value)
+				}) : type === "dropdown" || type === "select" ? /* @__PURE__ */ jsxs("select", {
+					id,
+					"aria-required": required,
+					className: "w-full rounded-md border border-border-secondary bg-background-primary px-3 py-2 text-sm text-text-primary",
+					value: values[field.name] ?? "",
+					onChange: (event) => onChange(field.name, event.target.value),
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "—"
+					}), (field.options ?? []).map((option) => /* @__PURE__ */ jsx("option", {
+						value: option,
+						children: option
+					}, option))]
+				}) : /* @__PURE__ */ jsx(Input, {
+					id,
+					"aria-required": required,
+					type: inputType(field),
+					value: values[field.name] ?? "",
+					placeholder: field.placeholder ?? void 0,
+					onChange: (event) => onChange(field.name, event.target.value)
+				})]
+			}, field.name);
+		})
+	});
+}
+/** Approve / Decline, with an optional comment that is recorded with the answer (BOFF-9956). */
+function ApprovalControls({ request, loading, onAnswer }) {
+	const tr = useTr();
+	const [comment, setComment] = useState("");
+	const note = comment.trim() ? { comment: comment.trim() } : {};
+	const commentId = `human-comment-${request.id}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 pt-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "space-y-1.5",
+			children: [/* @__PURE__ */ jsx(Label, {
+				htmlFor: commentId,
+				children: tr("fluidgrids.humanResponse.commentLabel", "Comment (optional)")
+			}), /* @__PURE__ */ jsx(Textarea, {
+				id: commentId,
+				value: comment,
+				maxLength: 2e3,
+				placeholder: tr("fluidgrids.humanResponse.commentPlaceholder", "Why you approve or decline. It is saved with your answer on the run."),
+				onChange: (event) => setComment(event.target.value),
+				"data-testid": "human-request-comment"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [/* @__PURE__ */ jsxs(Button$1, {
+				"data-agent": "confirm",
+				size: "sm",
+				disabled: loading,
+				onClick: () => onAnswer({
+					action: "approve",
+					...note
+				}),
+				"data-testid": "human-request-approve",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "mdi:check",
+					className: "mr-1.5",
+					width: 16
+				}), request.approveLabel]
+			}), request.approvalType === "double" && /* @__PURE__ */ jsxs(Button$1, {
+				"data-agent": "confirm",
+				size: "sm",
+				variant: "destructive",
+				disabled: loading,
+				onClick: () => onAnswer({
+					action: "decline",
+					...note
+				}),
+				"data-testid": "human-request-decline",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "mdi:close",
+					className: "mr-1.5",
+					width: 16
+				}), request.declineLabel]
+			})]
+		})]
+	});
+}
+/** How the caller answers in-app: Approve/Decline, a text box, or the custom form. */
+function AnswerArea({ request, loading, onAnswer }) {
+	const tr = useTr();
+	const [text, setText] = useState("");
+	const [values, setValues] = useState({});
+	if (request.responseType === "APPROVAL") return /* @__PURE__ */ jsx(ApprovalControls, {
+		request,
+		loading,
+		onAnswer
+	});
+	const missingRequired = request.responseType === "CUSTOM_FORM" && request.fields.some((field) => field.required && !(values[field.name] ?? "").trim());
+	const emptyText = request.responseType === "FREE_TEXT" && !text.trim();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		request.responseType === "FREE_TEXT" && /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1.5",
+			children: [/* @__PURE__ */ jsx(Label, {
+				htmlFor: `human-text-${request.id}`,
+				children: tr("fluidgrids.humanResponse.yourResponse", "Your response")
+			}), /* @__PURE__ */ jsx(Textarea, {
+				id: `human-text-${request.id}`,
+				value: text,
+				onChange: (event) => setText(event.target.value)
+			})]
+		}),
+		request.responseType === "CUSTOM_FORM" && /* @__PURE__ */ jsx(FormControls, {
+			requestId: request.id,
+			fields: request.fields,
+			values,
+			onChange: (name, value) => setValues((current) => ({
+				...current,
+				[name]: value
+			}))
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-2 pt-1",
+			children: /* @__PURE__ */ jsxs(Button$1, {
+				"data-agent": "confirm",
+				size: "sm",
+				disabled: loading || missingRequired || emptyText,
+				onClick: () => onAnswer(request.responseType === "FREE_TEXT" ? { text } : { values }),
+				"data-testid": "human-request-submit",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "mdi:send",
+					className: "mr-1.5",
+					width: 16
+				}), request.submitLabel]
+			})
+		})
+	] });
+}
+function HumanRequestCard({ request, onAnswered, workflowName, stepName }) {
+	const tr = useTr();
+	const v2 = useNavigationV2();
+	const { respond, loading } = useRespondToHumanRequest();
+	const submit = async (answer) => {
+		try {
+			const decision = await respond(request.id, answer);
+			toast.success(answeredToastText(decision, tr));
+			onAnswered();
+		} catch (err) {
+			const failed = tr("fluidgrids.humanResponse.failed", "Your response could not be recorded");
+			toast.error(failed, { description: describeOperationError(err, failed) });
+		}
+	};
+	const recipient = useRecipientLabel(request, request.channel === "IN_APP" ? tr("fluidgrids.humanResponse.anyMember", "any workspace member") : "");
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "border border-border-secondary bg-background-secondary",
+		"data-testid": "human-request-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 min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: CHANNEL_ICON[request.channel] ?? "mdi:account-question",
+							width: 18,
+							className: "shrink-0 text-text-secondary"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate text-sm font-semibold text-text-primary",
+							children: request.title
+						})]
+					}), !v2 && /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						className: "font-mono text-[10px]",
+						children: request.workflowKey
+					})]
+				}),
+				v2 && /* @__PURE__ */ jsx(ApprovalSource, {
+					workflow: workflowName ?? request.workflowKey,
+					step: stepName,
+					runId: request.runId
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-text-secondary",
+					children: [tr("fluidgrids.humanResponse.askedVia", "Asked {{recipient}} via {{channel}}", {
+						recipient,
+						channel: channelLabel(request.channel, tr)
+					}), request.expiresAt && ` · ${tr("fluidgrids.humanResponse.until", "until {{time}}", { time: new Date(request.expiresAt).toLocaleString() })}`]
+				})
+			]
+		}), /* @__PURE__ */ jsxs(CardContent, {
+			className: "space-y-3",
+			children: [
+				request.message && /* @__PURE__ */ jsx("p", {
+					className: "whitespace-pre-wrap break-words text-sm text-text-primary",
+					children: request.message
+				}),
+				/* @__PURE__ */ jsx(ApprovalApprovers, { request }),
+				!request.canRespond && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-text-secondary",
+					children: notAnswerableText(request, channelLabel(request.channel, tr), tr)
+				}),
+				request.canRespond && /* @__PURE__ */ jsx(AnswerArea, {
+					request,
+					loading,
+					onAnswer: submit
+				}),
+				v2 && /* @__PURE__ */ jsx(ApprovalTechnicalDetails, { rows: approvalTechnicalRows(request, tr) })
+			]
+		})]
+	});
+}
+
+// src/modules/tool-approval/hooks/useToolApprovals.ts
+/**
+* Custom hooks for the AI Agent tool-approval inbox (BOFF-7521).
+* Queries/mutates wspace-workflow-svc via the federated GraphQL gateway —
+* mirrors the variables module's hook pattern
+* (`modules/variables/hooks/useVariables.ts`).
+*/
+const 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
+  }
+`;
+const GET_PENDING_TOOL_APPROVALS = gql`
+  ${TOOL_APPROVAL_FIELDS}
+  query GetPendingToolApprovals($limit: Int, $offset: Int) {
+    pendingToolApprovals(limit: $limit, offset: $offset) {
+      totalCount
+      items {
+        ...ToolApprovalRequestFields
+      }
+    }
+  }
+`;
+const DECIDE_TOOL_APPROVAL = gql`
+  ${TOOL_APPROVAL_FIELDS}
+  mutation DecideToolApproval(
+    $id: ID!
+    $decisions: [ToolApprovalDecisionInput!]!
+  ) {
+    decideToolApproval(id: $id, decisions: $decisions) {
+      success
+      error
+      resumedFromNodeId
+      request {
+        ...ToolApprovalRequestFields
+      }
+    }
+  }
+`;
+/**
+* Polls the pending tool-approval inbox. Short polling interval (not a
+* subscription) — approvals are rare/low-volume and the caller wants a
+* near-real-time inbox without standing up a dedicated subscription channel
+* for a v1 feature.
+*
+* Pass `enabled: false` when the caller lacks `tool-approval-request:read`:
+* the query is then never sent, so the gateway's FORBIDDEN never reaches the
+* shell's global error toast (BOFF-10104). If the gateway still denies the
+* query, `forbidden` turns true and polling stops.
+*/
+function usePendingToolApprovals(options) {
+	const limit = options?.limit ?? 50;
+	const offset = options?.offset ?? 0;
+	const pollIntervalMs = options?.pollIntervalMs ?? 15e3;
+	const enabled = options?.enabled ?? true;
+	const [items, setItems] = useState([]);
+	const [totalCount, setTotalCount] = useState(0);
+	const [loading, setLoading] = useState(enabled);
+	const [error, setError] = useState(null);
+	const [forbidden, setForbidden] = useState(false);
+	const fetchData = useCallback(async () => {
+		if (!enabled) return;
+		setError(null);
+		try {
+			const client = getFluidGridsClient();
+			const result = throwIfResultError(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) {
+			if (isForbiddenError(err)) {
+				setForbidden(true);
+				setItems([]);
+				setTotalCount(0);
+			} else setError(err);
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		enabled,
+		limit,
+		offset
+	]);
+	useEffect(() => {
+		setForbidden(false);
+		if (!enabled) {
+			setItems([]);
+			setTotalCount(0);
+			setError(null);
+		}
+	}, [enabled]);
+	useEffect(() => {
+		if (!enabled || forbidden) {
+			setLoading(false);
+			return;
+		}
+		setLoading(true);
+		fetchData();
+		if (pollIntervalMs <= 0) return;
+		const interval = setInterval(fetchData, pollIntervalMs);
+		return () => clearInterval(interval);
+	}, [
+		enabled,
+		fetchData,
+		forbidden,
+		pollIntervalMs
+	]);
+	return {
+		items,
+		totalCount,
+		loading,
+		error,
+		forbidden: forbidden || !enabled,
+		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 response = throwIfResultError(await client.mutate({
+				mutation: DECIDE_TOOL_APPROVAL,
+				variables: {
+					id,
+					decisions
+				}
+			})).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);
+		}
+	}, []);
+	return {
+		decide,
+		decideAll: useCallback(async (request, decision, reason) => {
+			return decide(request.id, request.toolCalls.map((call) => ({
+				callId: call.callId,
+				decision,
+				reason
+			})));
+		}, [decide]),
+		loading,
+		error
+	};
+}
+
+// src/modules/tool-approval/hooks/useApprovalWorkflows.ts
+/**
+* Names for the Approvals cards (Navigation v2, BOFF-11848): which workflow
+* each ask or AI action belongs to, and the name of the step that asked.
+*
+* Neither `ToolApprovalRequest` nor `WorkflowHumanRequest` carries a name,
+* only the workflow key (and, for AI actions, the definition id), so the page
+* looks each workflow up once. A failed lookup (a deleted workflow, no access)
+* leaves the card on the key; nothing is shown as an error.
+*/
+const GET_APPROVAL_WORKFLOW = gql`
+  query GetApprovalWorkflow($id: ID, $workflowKey: String) {
+    workflowDefinition(id: $id, workflowKey: $workflowKey) {
+      id
+      workflowKey
+      name
+      definitionJson
+    }
+  }
+`;
+/** At most this many workflows are looked up for one page of cards. */
+const MAX_WORKFLOW_LOOKUPS = 20;
+/** The lookup key of a ref: the definition id when known, else the key. */
+function approvalWorkflowRefKey(ref) {
+	return ref.workflowId ? `id:${ref.workflowId}` : `key:${ref.workflowKey}`;
+}
+/**
+* The unique lookup keys of the cards, in first-seen order, capped at
+* MAX_WORKFLOW_LOOKUPS, joined into one string: a poll that returns the same
+* cards gives the same string, so nothing is looked up again.
+*/
+function workflowLookupSignature(refs) {
+	const keys = /* @__PURE__ */ new Set();
+	for (const ref of refs) {
+		keys.add(approvalWorkflowRefKey(ref));
+		if (keys.size >= 20) break;
+	}
+	return [...keys].join("\n");
+}
+/** The query variables for one lookup key ("id:…" or "key:…"). */
+function lookupVariables(key) {
+	return key.startsWith("id:") ? { id: key.slice(3) } : { workflowKey: key.slice(4) };
+}
+async function lookUp(key) {
+	try {
+		const definition = throwIfResultError(await getFluidGridsClient().query({
+			query: GET_APPROVAL_WORKFLOW,
+			variables: lookupVariables(key),
+			fetchPolicy: "cache-first"
+		})).data?.workflowDefinition;
+		if (!definition?.name) return null;
+		return {
+			name: definition.name,
+			steps: buildNodeDisplayMap(definition.definitionJson)
+		};
+	} catch {
+		return null;
+	}
+}
+/**
+* Looks up the workflows behind the cards while `enabled` (Navigation v2,
+* and the caller may read workflows). Returns what is known so far, keyed by
+* `approvalWorkflowRefKey`.
+*/
+function useApprovalWorkflows(refs, enabled) {
+	const signature = workflowLookupSignature(refs);
+	const [known, setKnown] = useState(() => /* @__PURE__ */ new Map());
+	useEffect(() => {
+		if (!enabled || !signature) return;
+		let active = true;
+		Promise.all(signature.split("\n").map(async (key) => [key, await lookUp(key)])).then((results) => {
+			if (!active) return;
+			setKnown((current) => {
+				const next = new Map(current);
+				for (const [key, info] of results) if (info) next.set(key, info);
+				return next;
+			});
+		});
+		return () => {
+			active = false;
+		};
+	}, [enabled, signature]);
+	return known;
+}
+/** "Step: Sort the ticket in Support desk" parts for a card, or the key. */
+function approvalLabels(info, workflowKey, nodeId) {
+	const display = info?.steps[nodeId];
+	return {
+		workflow: info?.name ?? workflowKey,
+		step: display ? nodeDisplayTitle(display, nodeId) : null
+	};
+}
+
+// src/modules/tool-approval/utils/paging.ts
+/**
+* Paging for the Approvals inbox (BOFF-11848). Both lists (asks waiting for a
+* person, and the AI assistant's actions waiting for an OK) load 50 at a time.
+*/
+/** Items per page in each Approvals list. */
+const APPROVALS_PAGE_SIZE = 50;
+/**
+* The offset to show for a requested one: answering the last item on a later
+* page empties it, so step back to the last page that still has items.
+* Derived while rendering, so it never needs an effect to correct itself.
+*/
+function clampPageOffset(offset, total, pageSize = 50) {
+	if (offset <= 0 || offset < total) return Math.max(0, offset);
+	return Math.max(0, Math.ceil(total / pageSize) - 1) * pageSize;
+}
+
+// src/modules/tool-approval/components/InboxPager.tsx
+/**
+* "{from}–{to} of {total}" with Previous / Next, under each Approvals list
+* (BOFF-7651 for asks; BOFF-11848 adds it to the AI assistant's actions, which
+* had no pager, so anything past the first 50 could not be reached).
+* Renders nothing while everything fits on one page.
+*/
+function InboxPager({ offset, shown, total, onOffsetChange, "data-testid": testId }) {
+	const tr = useTr();
+	if (total <= 50) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-4 flex items-center gap-3",
+		"data-testid": testId,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs text-text-secondary",
+				children: tr("fluidgrids.humanResponse.pageRange", "{{from}}–{{to}} of {{total}}", {
+					from: offset + 1,
+					to: offset + shown,
+					total
+				})
+			}),
+			/* @__PURE__ */ jsx(Button$1, {
+				variant: "outline",
+				size: "sm",
+				disabled: offset === 0,
+				onClick: () => onOffsetChange(Math.max(0, offset - 50)),
+				children: tr("fluidgrids.humanResponse.previousPage", "Previous")
+			}),
+			/* @__PURE__ */ jsx(Button$1, {
+				variant: "outline",
+				size: "sm",
+				disabled: offset + 50 >= total,
+				onClick: () => onOffsetChange(offset + 50),
+				children: tr("fluidgrids.humanResponse.nextPage", "Next")
+			})
+		]
+	});
+}
+
+// src/modules/tool-approval/utils/timeout.ts
+/**
+* Classifies timeout metadata without changing server-owned request status.
+* The timeout sweep remains authoritative for auto-resolving WAITING runs.
+*/
+function getToolApprovalTimeoutState(timeoutAt, nowMs = Date.now()) {
+	if (!timeoutAt) return "NONE";
+	const timeoutMs = Date.parse(timeoutAt);
+	if (!Number.isFinite(timeoutMs)) return "NONE";
+	return timeoutMs <= nowMs ? "DUE" : "ACTIVE";
+}
+
+// src/modules/tool-approval/utils/tool-summary.ts
+/**
+* Plain-language view of an AI assistant's proposed action on the Approvals
+* inbox (Navigation v2, BOFF-11848): "The AI assistant wants to: Send email"
+* with a short key/value summary of its arguments. The raw tool name and JSON
+* stay available under "Show technical details".
+*/
+/** How many arguments the summary lists before "and N more". */
+const SUMMARY_MAX_ENTRIES = 6;
+/** Longest value the summary shows before cutting it with "…". */
+const SUMMARY_MAX_VALUE_LENGTH = 120;
+/**
+* Split an identifier into lower-case words: snake_case, kebab-case,
+* dotted/namespaced (`github.search_issues`, `slack__post`) and camelCase
+* (`searchIssues`, `HTTPRequest`).
+*/
+function words(identifier) {
+	return identifier.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").split(/[\s_\-.:/]+/).map((word) => word.trim().toLowerCase()).filter(Boolean);
+}
+function sentenceCase(parts) {
+	const text = parts.join(" ");
+	return text.charAt(0).toUpperCase() + text.slice(1);
+}
+/**
+* "send_email" → "Send email", "github.searchIssues" → "Github search issues".
+* An empty or symbol-only name is returned as it is.
+*/
+function friendlyToolName(name) {
+	const parts = words(name);
+	return parts.length > 0 ? sentenceCase(parts) : name;
+}
+/** "recipient_email" → "Recipient email". */
+function friendlyArgumentName(key) {
+	return friendlyToolName(key);
+}
+function shorten(text) {
+	return text.length > 120 ? `${text.slice(0, 119)}…` : text;
+}
+function valueText(value) {
+	if (value === null || value === void 0) return "—";
+	if (typeof value === "string") return shorten(value);
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	if (Array.isArray(value) && value.every((item) => typeof item === "string")) return shorten(value.join(", "));
+	return shorten(JSON.stringify(value));
+}
+/**
+* The top-level arguments of a tool call as label/value rows. Arguments that
+* are not a JSON object (a list, a bare value, malformed JSON) give no rows:
+* the raw JSON under the technical details says it all.
+*/
+function summarizeToolArguments(argsJson) {
+	let parsed;
+	try {
+		parsed = JSON.parse(argsJson);
+	} catch {
+		return {
+			rows: [],
+			hidden: 0
+		};
+	}
+	if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {
+		rows: [],
+		hidden: 0
+	};
+	const entries = Object.entries(parsed);
+	return {
+		rows: entries.slice(0, 6).map(([key, value]) => ({
+			key,
+			label: friendlyArgumentName(key),
+			value: valueText(value)
+		})),
+		hidden: Math.max(0, entries.length - 6)
+	};
+}
+/** Pretty-printed raw arguments for the technical details. */
+function formatToolArguments(argsJson) {
+	try {
+		return JSON.stringify(JSON.parse(argsJson), null, 2);
+	} catch {
+		return argsJson;
+	}
+}
+
+// src/modules/tool-approval/components/ToolApprovalCard.tsx
+/**
+* One AI assistant action waiting for a decision on the Approvals inbox
+* (BOFF-7521), with the Reject dialog.
+*
+* Navigation v2 (BOFF-11848, FluidGrids only): the card reads "Step: {step}
+* in {workflow}" with an "Open run" link, each proposed call reads "The AI
+* assistant wants to: {action}" with a short summary of its arguments, a
+* time limit says whether it will be approved or rejected automatically, and
+* a request with several calls says the decision covers all of them. The
+* node id, workflow key, run id and raw JSON move under "Show technical
+* details". With the switch off the card is exactly as before.
+*/
+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 });
+	return tr("fluidgrids.toolApproval.daysAgo", "{{days}}d ago", { days: Math.floor(hours / 24) });
+}
+/** What the time limit does: today's words, or (v2) approve vs reject. */
+function timeoutText(request, tr, plain) {
+	const time = new Date(request.timeoutAt ?? "").toLocaleString();
+	if (!plain) return tr("fluidgrids.toolApproval.autoResolvesAt", "auto-resolves at {{time}}", { time });
+	return request.timeoutAction === "AUTO_APPROVE" ? tr("fluidgrids.toolApproval.autoApprovesAt", "If nobody decides by {{time}}, it will be approved automatically", { time }) : tr("fluidgrids.toolApproval.autoRejectsAt", "If nobody decides by {{time}}, it will be rejected automatically", { time });
+}
+function RejectDialog({ open, onOpenChange, onConfirm, submitting }) {
+	const tr = useTr();
+	const v2 = useNavigationV2();
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: tr("fluidgrids.toolApproval.rejectDialogTitle", v2 ? "Don't allow this action" : "Reject tool call") }), v2 && /* @__PURE__ */ jsx(DialogDescription, { children: tr("fluidgrids.toolApproval.rejectDialogDescription", "The AI assistant won't take this action, and your workflow will continue.") })] }), /* @__PURE__ */ jsx(RejectReasonForm, {
+			onCancel: () => onOpenChange(false),
+			onConfirm,
+			submitting
+		})] })
+	});
+}
+function RejectReasonForm({ onCancel, onConfirm, submitting }) {
+	const tr = useTr();
+	const v2 = useNavigationV2();
+	const [reason, setReason] = useState("");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "space-y-1.5",
+		children: [/* @__PURE__ */ jsx(Label, {
+			htmlFor: "reject-reason",
+			children: v2 ? tr("fluidgrids.toolApproval.rejectReasonLabelPlain", "Tell the AI assistant why (optional)") : tr("fluidgrids.toolApproval.rejectReasonLabel", "Reason (optional)")
+		}), /* @__PURE__ */ jsx(Textarea, {
+			id: "reject-reason",
+			"data-testid": "tool-approval-reject-reason",
+			value: reason,
+			onChange: (e) => setReason(e.target.value),
+			placeholder: v2 ? void 0 : tr("fluidgrids.toolApproval.rejectReasonPlaceholder", "Why is this call being rejected? The agent sees this.")
+		})]
+	}), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button$1, {
+		variant: "outline",
+		onClick: onCancel,
+		disabled: submitting,
+		children: tr("fluidgrids.toolApproval.cancel", "Cancel")
+	}), /* @__PURE__ */ jsx(Button$1, {
+		variant: "destructive",
+		onClick: () => onConfirm(reason),
+		disabled: submitting,
+		children: submitting ? tr("fluidgrids.toolApproval.rejecting", "Rejecting…") : tr("fluidgrids.toolApproval.rejectConfirm", v2 ? "Don't allow" : "Reject")
+	})] })] });
+}
+/** Navigation v2: "The AI assistant wants to: Send email" + its arguments. */
+function PlainToolCall({ call }) {
+	const tr = useTr();
+	const summary = summarizeToolArguments(call.argsJson);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border border-border-secondary bg-background-primary p-3",
+		"data-testid": "tool-approval-call",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-sm font-medium text-text-primary",
+			children: tr("fluidgrids.toolApproval.wantsTo", "The AI assistant wants to: {{action}}", { action: friendlyToolName(call.name) })
+		}), summary.rows.length > 0 && /* @__PURE__ */ jsxs("dl", {
+			className: "mt-2 space-y-1 text-xs",
+			children: [summary.rows.map((row) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-x-2",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "font-medium text-text-secondary",
+					children: row.label
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "min-w-0 whitespace-pre-wrap break-words text-text-primary",
+					children: row.value
+				})]
+			}, row.key)), summary.hidden > 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-text-secondary",
+				children: tr("fluidgrids.toolApproval.moreArguments", "and {{count}} more (see technical details)", { count: summary.hidden })
+			})]
+		})]
+	});
+}
+/** Today's call block: the raw tool name and its JSON arguments. */
+function RawToolCall({ call }) {
+	return /* @__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: formatToolArguments(call.argsJson)
+		})]
+	});
+}
+function ToolApprovalCard({ request, onDecided, workflowName, stepName }) {
+	const tr = useTr();
+	const v2 = useNavigationV2();
+	const { decideAll, loading } = useDecideToolApproval();
+	const [showReject, setShowReject] = useState(false);
+	const [nowMs, setNowMs] = useState(() => Date.now());
+	const timeoutState = getToolApprovalTimeoutState(request.timeoutAt, nowMs);
+	const timeoutDue = timeoutState === "DUE";
+	useEffect(() => {
+		if (timeoutState !== "ACTIVE") return;
+		const interval = setInterval(() => setNowMs(Date.now()), 1e3);
+		return () => clearInterval(interval);
+	}, [timeoutState]);
+	const handleDecide = async (decision, reason) => {
+		try {
+			await decideAll(request, decision, reason);
+			const approved = decision === "APPROVED";
+			toast.success(v2 ? approved ? tr("fluidgrids.toolApproval.allowedToast", "Allowed — your workflow is continuing") : tr("fluidgrids.toolApproval.notAllowedToast", "Not allowed — your workflow is continuing") : approved ? tr("fluidgrids.toolApproval.approvedToast", "Tool call approved — run resumed") : tr("fluidgrids.toolApproval.rejectedToast", "Tool call rejected — run resumed"));
+			setShowReject(false);
+			onDecided();
+		} catch (err) {
+			const failed = tr("fluidgrids.toolApproval.decisionFailed", "Failed to record the decision");
+			toast.error(failed, { description: describeOperationError(err, failed) });
+		}
+	};
+	const deniedTooltip = tr("fluidgrids.toolApproval.decideDeniedTooltip", "You don't have permission to decide tool approvals");
+	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"
+							}),
+							!v2 && /* @__PURE__ */ jsxs("span", {
+								className: "text-sm font-semibold text-text-primary",
+								children: [
+									tr("fluidgrids.toolApproval.nodeLabel", "Node"),
+									":",
+									" ",
+									request.nodeId
+								]
+							}),
+							v2 && /* @__PURE__ */ jsx("span", {
+								className: "text-sm font-semibold text-text-primary",
+								"data-testid": "approval-source",
+								children: approvalSourceText(workflowName ?? request.workflowKey, stepName, tr)
+							})
+						]
+					}), !v2 && /* @__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 && timeoutDue ? ` · ${tr("fluidgrids.toolApproval.timeoutDue", "timeout reached; automatic decision pending")}` : request.timeoutAt && ` · ${timeoutText(request, tr, v2)}`,
+						v2 && /* @__PURE__ */ jsxs(Fragment$1, { children: [" · ", /* @__PURE__ */ jsx(OpenRunLink, { runId: request.runId })] })
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(CardContent, {
+				className: "space-y-3",
+				children: [
+					request.toolCalls.map((call) => v2 ? /* @__PURE__ */ jsx(PlainToolCall, { call }, call.callId) : /* @__PURE__ */ jsx(RawToolCall, { call }, call.callId)),
+					v2 && request.toolCalls.length > 1 && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-text-secondary",
+						"data-testid": "tool-approval-all-or-nothing",
+						children: tr("fluidgrids.toolApproval.allOrNothing", "Your decision applies to all {{count}} actions in this request.", { count: request.toolCalls.length })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 pt-1",
+						children: [/* @__PURE__ */ jsx(SdkPermissionButton, {
+							permission: FLUIDGRIDS_PERMISSIONS.TOOL_APPROVAL_REQUEST_EXECUTE,
+							deniedTooltip,
+							children: /* @__PURE__ */ jsxs(Button$1, {
+								"data-agent": "confirm",
+								size: "sm",
+								disabled: loading || timeoutDue,
+								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__ */ jsx(SdkPermissionButton, {
+							permission: FLUIDGRIDS_PERMISSIONS.TOOL_APPROVAL_REQUEST_EXECUTE,
+							deniedTooltip,
+							children: /* @__PURE__ */ jsxs(Button$1, {
+								size: "sm",
+								variant: "destructive",
+								disabled: loading || timeoutDue,
+								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", v2 ? "Don't allow" : "Reject")]
+							})
+						})]
+					}),
+					v2 && /* @__PURE__ */ jsx(ApprovalTechnicalDetails, {
+						rows: approvalTechnicalRows(request, tr),
+						children: /* @__PURE__ */ jsx("div", {
+							className: "mt-2 space-y-2",
+							children: request.toolCalls.map((call) => /* @__PURE__ */ jsx(RawToolCall, { call }, call.callId))
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(RejectDialog, {
+				open: showReject,
+				onOpenChange: setShowReject,
+				submitting: loading,
+				onConfirm: (reason) => handleDecide("REJECTED", reason || void 0)
+			})
+		]
+	});
+}
+
+// src/modules/tool-approval/pages/ApprovalInboxPage.tsx
+/**
+* Approvals inbox (BOFF-7521, BOFF-7651): asks from workflows waiting for a
+* person, and AI Agent tool calls waiting for a decision (see
+* `components/ToolApprovalCard.tsx`). A request with several calls is
+* all-or-nothing: the one decision applies to every call in it (there is no
+* per-call control). Approving/rejecting resumes the underlying run via
+* `decideToolApproval`, which reuses the exact same WAITING/
+* `resumeWorkflowRun` mechanism the Wait node uses.
+*
+* Navigation v2 (BOFF-11848, FluidGrids only): both kinds of card name their
+* workflow and step and link the run, the counter says how many wait in all,
+* the empty state covers both kinds of ask, and a load error is plain words
+* with a Retry and the server's message under "Show technical details".
+*/
+var ApprovalInboxPage_exports = /* @__PURE__ */ __exportAll({ ApprovalInboxPage: () => ApprovalInboxPage });
+/** Navigation v2: a list that failed to load, with Retry. */
+function InboxLoadError({ message, detail, onRetry, className }) {
+	const tr = useTr();
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		role: "alert",
+		"data-testid": "approvals-load-error",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-3",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive",
+				children: message
+			}), /* @__PURE__ */ jsx(Button$1, {
+				variant: "outline",
+				size: "sm",
+				onClick: onRetry,
+				children: tr("fluidgrids.humanResponse.retry", "Retry")
+			})]
+		}), /* @__PURE__ */ jsx(TechnicalDetails, {
+			className: "mt-1",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "break-words font-mono text-xs text-text-secondary",
+				children: detail
+			})
+		})]
+	});
+}
+/** A list that failed to load: today's line, or (v2) plain words with Retry. */
+function InboxError({ error, plain, oldText, plainText, className, onRetry }) {
+	if (!error) return null;
+	if (!plain) return /* @__PURE__ */ jsx("p", {
+		className,
+		role: "alert",
+		children: oldText(error.message)
+	});
+	return /* @__PURE__ */ jsx(InboxLoadError, {
+		className: "mb-4",
+		message: plainText,
+		detail: error.message,
+		onRetry
+	});
+}
+/** "Waiting for a response": the asks for a person, with their pager. */
+function HumanRequestsSection({ items, totalCount, offset, onOffsetChange, onAnswered, labelsFor }) {
+	const tr = useTr();
+	return /* @__PURE__ */ jsxs("section", {
+		className: "mb-8",
+		"data-testid": "human-requests-section",
+		"data-tour": "fluidgrids-approvals-human",
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "mb-1 text-lg font-semibold text-text-primary",
+				children: tr("fluidgrids.humanResponse.inboxHeading", "Waiting for a response")
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mb-3 text-xs text-text-secondary",
+				children: tr("fluidgrids.humanResponse.inboxSubtitle", "Workflows paused on a person — approve, decline or answer to let them continue.")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
+				children: items.map((request) => /* @__PURE__ */ jsx(HumanRequestCard, {
+					request,
+					onAnswered,
+					...labelsFor?.(request, request.nodeId)
+				}, request.id))
+			}),
+			/* @__PURE__ */ jsx(InboxPager, {
+				offset,
+				shown: items.length,
+				total: totalCount,
+				onOffsetChange
+			})
+		]
+	});
+}
+/** A role that may not read tool approvals (BOFF-10104). */
+function ToolApprovalsNoAccess() {
+	const tr = useTr();
+	return /* @__PURE__ */ jsx(Card, {
+		className: "mb-6 border border-border-secondary bg-background-secondary",
+		"data-testid": "tool-approval-no-access",
+		children: /* @__PURE__ */ jsxs(CardContent, {
+			className: "flex items-start gap-3 py-4",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "mdi:lock-outline",
+				width: 20,
+				className: "mt-0.5 shrink-0 text-text-secondary"
+			}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium text-text-primary",
+				children: tr("fluidgrids.toolApproval.noAccessTitle", "You can't review AI Agent tool calls")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-xs text-text-secondary",
+				children: tr("fluidgrids.toolApproval.noAccessSubtitle", "Your role doesn't include permission to read tool approval requests. Ask a workspace admin if you need access.")
+			})] })]
+		})
+	});
+}
+/** Nothing waiting: today's words, or (v2) words for both kinds of ask. */
+function ApprovalsEmptyState({ plain }) {
+	const tr = useTr();
+	return /* @__PURE__ */ jsx(Card, {
+		className: "border border-border-secondary bg-background-secondary",
+		"data-tour": "fluidgrids-approvals-empty",
+		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: plain ? tr("fluidgrids.approvals.emptyHint", "When a workflow needs your OK or an answer from you, it shows up here.") : tr("fluidgrids.toolApproval.emptySubtitle", "Runs will appear here when an AI Agent with tool approval enabled proposes a tool call.")
+				})
+			]
+		})
+	});
+}
+/** The AI assistant's actions: the counter, the cards and their pager. */
+function ToolApprovalsList({ items, totalCount, offset, onOffsetChange, onDecided, labelsFor }) {
+	const tr = useTr();
+	const plain = labelsFor !== void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		items.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "mb-3 text-xs text-text-secondary",
+			"data-testid": "tool-approval-count",
+			children: plain ? tr("fluidgrids.toolApproval.count", "{{count}} waiting for you", {
+				count: totalCount,
+				total: totalCount
+			}) : 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",
+			"data-tour": "fluidgrids-approvals-tools",
+			children: items.map((request) => /* @__PURE__ */ jsx(ToolApprovalCard, {
+				request,
+				onDecided,
+				...labelsFor?.(request, request.nodeId)
+			}, request.id))
+		}),
+		/* @__PURE__ */ jsx(InboxPager, {
+			offset,
+			shown: items.length,
+			total: totalCount,
+			onOffsetChange,
+			"data-testid": "tool-approval-pager"
+		})
+	] });
+}
+const HUMAN_PAGE_SIZE = 50;
+function ApprovalInboxPage() {
+	const tr = useTr();
+	const v2 = useNavigationV2();
+	const navigate = useNavigate();
+	const { allowed: canReadToolApprovals, isLoading: permissionsLoading } = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.TOOL_APPROVAL_REQUEST_READ);
+	const [toolOffset, setToolOffset] = useState(0);
+	const { items, totalCount, loading, error, forbidden, refetch } = usePendingToolApprovals({
+		enabled: canReadToolApprovals,
+		limit: 50,
+		offset: toolOffset
+	});
+	const toolPageOffset = clampPageOffset(toolOffset, totalCount);
+	if (toolPageOffset !== toolOffset && !loading) setToolOffset(toolPageOffset);
+	const toolsForbidden = forbidden && !permissionsLoading;
+	const [humanOffset, setHumanOffset] = useState(0);
+	const human = usePendingHumanRequests({
+		limit: HUMAN_PAGE_SIZE,
+		offset: humanOffset
+	});
+	const humanTotal = human.totalCount;
+	useEffect(() => {
+		if (humanOffset > 0 && humanOffset >= humanTotal) setHumanOffset(Math.max(0, Math.ceil(humanTotal / HUMAN_PAGE_SIZE) - 1) * HUMAN_PAGE_SIZE);
+	}, [humanOffset, humanTotal]);
+	const { allowed: canReadWorkflows } = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.WORKFLOW_READ);
+	const workflowRefs = [...human.items.map((request) => ({ workflowKey: request.workflowKey })), ...(toolsForbidden ? [] : items).map((request) => ({
+		workflowKey: request.workflowKey,
+		workflowId: request.workflowId
+	}))];
+	const workflows = useApprovalWorkflows(workflowRefs, v2 && canReadWorkflows);
+	const labelsFor = (ref, nodeId) => {
+		const labels = approvalLabels(workflows.get(approvalWorkflowRefKey(ref)), ref.workflowKey, nodeId);
+		return {
+			workflowName: labels.workflow,
+			stepName: labels.step
+		};
+	};
+	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",
+				"data-tour": "fluidgrids-approvals-header",
+				children: [/* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("h1", {
+						className: "text-2xl sm:text-3xl font-bold text-text-primary",
+						children: tr("fluidgrids.approvals.pageTitle", "Approvals")
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-text-secondary mt-1",
+						children: tr("fluidgrids.approvals.pageSubtitle", v2 ? "Requests from your workflows waiting for a person, and actions your AI assistant wants to take" : "Requests from your workflows waiting for a person, and AI Agent tool calls waiting for a decision")
+					}),
+					/* @__PURE__ */ jsx(FluidGridsDocsLink, {
+						topic: "approvals",
+						className: "mt-1"
+					})
+				] }), /* @__PURE__ */ jsxs(Button$1, {
+					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 || permissionsLoading) && items.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-text-secondary text-sm",
+				children: tr("fluidgrids.toolApproval.loading", "Loading…")
+			}),
+			/* @__PURE__ */ jsx(InboxError, {
+				error,
+				plain: v2,
+				className: "text-sm text-destructive",
+				oldText: (message) => tr("fluidgrids.toolApproval.loadFailed", "Failed to load pending approvals: {{message}}", { message }),
+				plainText: tr("fluidgrids.toolApproval.loadFailedPlain", "We couldn't load the actions waiting for your OK. Try again in a moment."),
+				onRetry: () => void refetch()
+			}),
+			human.items.length > 0 && /* @__PURE__ */ jsx(HumanRequestsSection, {
+				items: human.items,
+				totalCount: human.totalCount,
+				offset: humanOffset,
+				onOffsetChange: setHumanOffset,
+				onAnswered: human.refetch,
+				labelsFor: v2 ? labelsFor : void 0
+			}),
+			/* @__PURE__ */ jsx(InboxError, {
+				error: human.error,
+				plain: v2,
+				className: "mb-4 text-sm text-destructive",
+				oldText: (message) => tr("fluidgrids.humanResponse.loadFailed", "Failed to load requests waiting for a response: {{message}}", { message }),
+				plainText: tr("fluidgrids.humanResponse.loadFailedPlain", "We couldn't load the requests waiting for your answer. Try again in a moment."),
+				onRetry: () => void human.refetch()
+			}),
+			toolsForbidden && /* @__PURE__ */ jsx(ToolApprovalsNoAccess, {}),
+			!loading && !permissionsLoading && !toolsForbidden && !error && !human.loading && !human.error && items.length === 0 && human.items.length === 0 && /* @__PURE__ */ jsx(ApprovalsEmptyState, { plain: v2 }),
+			!toolsForbidden && /* @__PURE__ */ jsx(ToolApprovalsList, {
+				items,
+				totalCount,
+				offset: toolOffset,
+				onOffsetChange: setToolOffset,
+				onDecided: refetch,
+				labelsFor: v2 ? labelsFor : void 0
+			}),
+			toolsForbidden && /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
+				"data-tour": "fluidgrids-approvals-tools"
+			})
+		]
+	});
+}
+
+export { HumanRequestCard as a, usePendingToolApprovals as i, ApprovalInboxPage_exports as n, useDecideToolApproval as r, ApprovalInboxPage as t };