@burdenoff/fluidgrids-fe-sdk 2026.1105.1 → 2026.1105.3

package/dist/{chunk-L44BRLW5.js → chunk-3ZYRLGDF.js}

@@ -1,21 +1,22 @@
-import { useDurableRunFields, useRunHistory, useDeterminismStatus, useRunStackTrace, RunHistoryView, SignalRunDialog, terminateDurableRun } from './chunk-XLI75E3D.js';
-import { useDurableParityRunFields, useRunMetadata, useRunPending, ExecutionStatusBadge, NodeTimeline, RunLogViewer, setRunVersioningOverride } from './chunk-MSQAULLG.js';
-import { useExecution, useExecutionActions, useAutoRefresh, runChainLinks, shortRunId, callbackTone, parseMetadataDefinition, overrideRequestOf } from './chunk-AG3VC7Y2.js';
-import { fetchRunFailureClusters, OPEN_STATUSES, dismissRunFailureCluster, BUCKET_LABELS } from './chunk-CGR3AEZU.js';
+import { useDurableRunFields, useRunHistory, useDeterminismStatus, useRunStackTrace, RunHistoryView, SignalRunDialog, terminateDurableRun } from './chunk-2WUVF4EQ.js';
+import { useDurableParityRunFields, hasAgentNodeState, agentNodeTraces, orderNodesByExecution, useRunMetadata, useRunPending, ExecutionStatusBadge, NodeTimeline, RunLogViewer, NodeStatusBadge, setRunVersioningOverride } from './chunk-MA6I4KY5.js';
+import { useExecution, useExecutionActions, useAutoRefresh, runChainLinks, shortRunId, callbackTone, parseMetadataDefinition, overrideRequestOf } from './chunk-VESQH55Q.js';
+import { fetchRunFailureClusters, OPEN_STATUSES, dismissRunFailureCluster, BUCKET_LABELS, formatDuration } from './chunk-TCIBTMJI.js';
+import { aiCost, formatTokens, modelLabel } from './chunk-NZAYYUQ4.js';
 import { useRunPolicyDecisions, RunPolicyDecisions } from './chunk-AMXJLVZN.js';
-import { EntityTagPicker, canSaveRunAsTestCase, useWorkflowProposal, WorkflowProposalCard, MAX_CASE_NAME, saveRunAsTestCase } from './chunk-6P7DOBVN.js';
-import { buildNodeDisplayMap, formatRunVersion } from './chunk-EC2AN74G.js';
+import { EntityTagPicker, canSaveRunAsTestCase, useWorkflowProposal, WorkflowProposalCard, MAX_CASE_NAME, saveRunAsTestCase } from './chunk-EYQ7GJRW.js';
+import { buildNodeDisplayMap, formatRunVersion, nodeDisplayTitle } from './chunk-IL343FKX.js';
 import { AiCreditBalanceSlot } from './chunk-Y53CVZVV.js';
-import { useWorkflowVersions } from './chunk-HOTVUVZG.js';
-import { useDurableFunctionNodesEnabled, useDurableParityEnabled, runSignalTargets, canSignalRun, useWorkflowTestsEnabled } from './chunk-C26QAWCT.js';
+import { useWorkflowVersions } from './chunk-YGOGJDN4.js';
+import { useDurableFunctionNodesEnabled, useDurableParityEnabled, runSignalTargets, canSignalRun, useWorkflowTestsEnabled } from './chunk-ZBPRNWKY.js';
 import { useFluidGridsPermission, FLUIDGRIDS_PERMISSIONS, SdkPermissionButton } from './chunk-5375NUIO.js';
-import { RunLogsDocument, RunLogAppendedDocument, ExplainRunDocument } from './chunk-AVHBWJRY.js';
+import { RunLogsDocument, RunLogAppendedDocument, ExplainRunDocument, RunAiUsageDocument } from './chunk-Z3ABLERJ.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { getFluidGridsClient, getFluidGridsClientSafe } from './chunk-3IXU7WUC.js';
 import { throwIfResultError, describeOperationError } from './chunk-US5QSLPV.js';
 import { getFluidGridsConfig } from './chunk-UEG2WC3G.js';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { useParams, useNavigate, Link } from 'react-router';
+import { useParams, useNavigate, useSearchParams, Link } from 'react-router';
 import { Icon } from '@iconify/react';
 import { toast } from 'sonner';
 import { Button } from '@burdenoff/fe-libs/button';
@@ -1435,6 +1436,533 @@ function resolveDetailTab(selection, runId, available, fallback) {
   if (selection.runId !== runId) return fallback;
   return available.includes(selection.tab) ? selection.tab : fallback;
 }
+function parseDetailTabParam(value, known) {
+  if (!value) return null;
+  return known.includes(value) ? value : null;
+}
+function selectionForRun(selection, runId, requested, fallback) {
+  if (selection.runId === runId) return selection;
+  return { runId, tab: requested ?? fallback };
+}
+function AgentTracePanel({
+  traces,
+  nodeDisplay,
+  usage,
+  usageLoading,
+  usageError,
+  onRefreshUsage,
+  focusNodeId
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-testid": "agent-trace-panel", children: [
+    /* @__PURE__ */ jsx(
+      AiUsageRollup,
+      {
+        usage,
+        loading: usageLoading,
+        error: usageError,
+        onRefresh: onRefreshUsage,
+        nodeDisplay,
+        tr
+      }
+    ),
+    traces.map((trace) => /* @__PURE__ */ jsx(
+      AgentNodeCard,
+      {
+        trace,
+        title: nodeDisplayTitle(nodeDisplay[trace.nodeId], trace.nodeId),
+        focused: !!focusNodeId && focusNodeId === trace.nodeId,
+        tr
+      },
+      trace.nodeStateId
+    )),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: tr(
+      "fluidgrids.executions.executionDetail.agent.traceApiNote",
+      "Each tool call is shown as the agent recorded it. The prompt and completion of each model call, and the timing of each iteration, will appear here once agent tracing is available."
+    ) })
+  ] });
+}
+function CostValue({
+  usage,
+  tr
+}) {
+  const cost = aiCost(usage);
+  if (cost.kind === "priced") return /* @__PURE__ */ jsx(Fragment, { children: cost.text });
+  if (cost.kind === "unpriced") {
+    return /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: tr(
+      "fluidgrids.executions.executionDetail.agent.notPricedYet",
+      "Not priced yet"
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: "\u2014" });
+}
+function Stat({
+  label,
+  children,
+  detail
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border-secondary bg-background-primary p-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold text-text-primary break-words", children }),
+    detail && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-text-secondary", children: detail })
+  ] });
+}
+function AiUsageRollup({
+  usage,
+  loading,
+  error,
+  onRefresh,
+  nodeDisplay,
+  tr
+}) {
+  const total = usage?.total ?? null;
+  const cost = aiCost(total);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": tr(
+        "fluidgrids.executions.executionDetail.agent.usageHeading",
+        "AI usage"
+      ),
+      className: "space-y-3",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-text-primary", children: tr(
+            "fluidgrids.executions.executionDetail.agent.usageHeading",
+            "AI usage"
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onRefresh,
+              disabled: loading,
+              className: "flex items-center gap-1 rounded px-2 py-1 text-xs text-text-secondary hover:text-text-primary disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: "mdi:refresh",
+                    width: 14,
+                    className: loading ? "animate-spin" : void 0
+                  }
+                ),
+                tr(
+                  "fluidgrids.executions.executionDetail.agent.refreshUsage",
+                  "Refresh"
+                )
+              ]
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "alert",
+            className: "rounded-lg border border-status-error-border bg-status-error-bg-subtle p-3 text-sm text-status-error-text",
+            children: tr(
+              "fluidgrids.executions.executionDetail.agent.usageError",
+              "Could not load this run's AI usage: {{message}}",
+              { message: error }
+            )
+          }
+        ),
+        !usage && loading && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 lg:grid-cols-4", "aria-busy": "true", children: [1, 2, 3, 4].map((item) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-20 animate-pulse rounded-lg bg-background-tertiary"
+          },
+          item
+        )) }),
+        total ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 lg:grid-cols-4", children: [
+            /* @__PURE__ */ jsx(
+              Stat,
+              {
+                label: tr(
+                  "fluidgrids.executions.executionDetail.agent.modelCalls",
+                  "Model calls"
+                ),
+                children: total.calls.toLocaleString("en-US")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Stat,
+              {
+                label: tr(
+                  "fluidgrids.executions.executionDetail.agent.inputTokens",
+                  "Input tokens"
+                ),
+                detail: total.cachedInputTokens > 0 ? tr(
+                  "fluidgrids.executions.executionDetail.agent.cachedTokens",
+                  "{{count}} cached",
+                  { count: formatTokens(total.cachedInputTokens) }
+                ) : null,
+                children: formatTokens(total.inputTokens)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Stat,
+              {
+                label: tr(
+                  "fluidgrids.executions.executionDetail.agent.outputTokens",
+                  "Output tokens"
+                ),
+                children: formatTokens(total.outputTokens)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Stat,
+              {
+                label: tr(
+                  "fluidgrids.executions.executionDetail.agent.estimatedCost",
+                  "Estimated cost"
+                ),
+                detail: cost.kind === "priced" && cost.partial ? tr(
+                  "fluidgrids.executions.executionDetail.agent.partialCost",
+                  "Calls not priced yet: {{count}}",
+                  { count: cost.unpricedCalls }
+                ) : null,
+                children: /* @__PURE__ */ jsx(CostValue, { usage: total, tr })
+              }
+            )
+          ] }),
+          total.calls === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: tr(
+            "fluidgrids.executions.executionDetail.agent.noModelCalls",
+            "No model calls recorded for this run yet."
+          ) }) : usage && usage.lines.length > 0 && /* @__PURE__ */ jsx(
+            UsageLines,
+            {
+              lines: usage.lines,
+              nodeDisplay,
+              tr
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function UsageLines({
+  lines,
+  nodeDisplay,
+  tr
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border border-border-secondary", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[560px] text-sm", children: [
+    /* @__PURE__ */ jsx("thead", { className: "bg-background-tertiary text-left text-xs text-text-secondary", children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "px-3 py-2 font-medium", children: tr(
+        "fluidgrids.executions.executionDetail.agent.lineNode",
+        "Node"
+      ) }),
+      /* @__PURE__ */ jsx("th", { className: "px-3 py-2 font-medium", children: tr(
+        "fluidgrids.executions.executionDetail.agent.lineModel",
+        "Model"
+      ) }),
+      /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-right font-medium", children: tr(
+        "fluidgrids.executions.executionDetail.agent.lineCalls",
+        "Calls"
+      ) }),
+      /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-right font-medium", children: tr(
+        "fluidgrids.executions.executionDetail.agent.lineTokens",
+        "Tokens in / out"
+      ) }),
+      /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-right font-medium", children: tr(
+        "fluidgrids.executions.executionDetail.agent.lineCost",
+        "Cost"
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: lines.map((line) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        className: "border-t border-border-secondary",
+        children: [
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-text-primary", children: nodeDisplayTitle(nodeDisplay[line.nodeId], line.nodeId) }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-2 font-mono text-xs text-text-secondary", children: modelLabel(line.providerKey, line.modelKey) ?? tr(
+            "fluidgrids.executions.executionDetail.agent.unknownModel",
+            "Unknown model"
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-right text-text-primary", children: line.usage.calls.toLocaleString("en-US") }),
+          /* @__PURE__ */ jsxs("td", { className: "px-3 py-2 text-right text-text-primary", children: [
+            formatTokens(line.usage.inputTokens),
+            " /",
+            " ",
+            formatTokens(line.usage.outputTokens)
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-right text-text-primary", children: /* @__PURE__ */ jsx(CostValue, { usage: line.usage, tr }) })
+        ]
+      },
+      `${line.nodeId}:${line.operation}:${line.providerKey ?? ""}:${line.modelKey ?? ""}`
+    )) })
+  ] }) });
+}
+function AgentNodeCard({
+  trace,
+  title,
+  focused,
+  tr
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (focused) ref.current?.scrollIntoView({ block: "start" });
+  }, [focused]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      "aria-label": title,
+      "data-agent-node": trace.nodeId,
+      className: `rounded-lg border bg-background-primary p-4 ${focused ? "border-action-primary-bg" : "border-border-secondary"}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mdi:robot-outline",
+                width: 18,
+                className: "shrink-0 text-text-secondary"
+              }
+            ),
+            /* @__PURE__ */ jsx("h4", { className: "truncate font-medium text-text-primary", children: title })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "self-start sm:self-auto", children: /* @__PURE__ */ jsx(NodeStatusBadge, { status: trace.status, size: "sm" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("dl", { className: "mt-3 grid grid-cols-2 gap-x-4 gap-y-2 text-sm sm:grid-cols-4", children: [
+          /* @__PURE__ */ jsx(
+            Fact,
+            {
+              label: tr(
+                "fluidgrids.executions.executionDetail.agent.iterations",
+                "Iterations"
+              ),
+              value: trace.iterationCount?.toLocaleString("en-US") ?? "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Fact,
+            {
+              label: tr(
+                "fluidgrids.executions.executionDetail.agent.tokensUsed",
+                "Tokens used"
+              ),
+              value: trace.tokensUsed === null ? "\u2014" : formatTokens(trace.tokensUsed)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Fact,
+            {
+              label: tr(
+                "fluidgrids.executions.executionDetail.agent.toolCalls",
+                "Tool calls"
+              ),
+              value: trace.steps.length.toLocaleString("en-US")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Fact,
+            {
+              label: tr(
+                "fluidgrids.executions.executionDetail.agent.duration",
+                "Duration"
+              ),
+              value: trace.durationMs === null ? "\u2014" : formatDuration(trace.durationMs / 1e3)
+            }
+          )
+        ] }),
+        trace.error && /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded border border-status-error-border bg-status-error-bg-subtle p-3 text-sm text-status-error-text", children: [
+          /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+            tr("fluidgrids.executions.executionDetail.agent.error", "Error"),
+            ":",
+            " "
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "break-words", children: trace.error })
+        ] }),
+        trace.waitingForApproval && /* @__PURE__ */ jsx(PendingApprovals, { trace, tr }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+          /* @__PURE__ */ jsx("h5", { className: "mb-2 text-sm font-medium text-text-primary", children: tr(
+            "fluidgrids.executions.executionDetail.agent.stepsHeading",
+            "Tool calls"
+          ) }),
+          trace.steps.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: tr(
+            "fluidgrids.executions.executionDetail.agent.noSteps",
+            "The agent made no tool calls."
+          ) }) : /* @__PURE__ */ jsx("ol", { className: "space-y-2", children: trace.steps.map((step) => /* @__PURE__ */ jsx(AgentStepRow, { step, tr }, step.index)) })
+        ] }),
+        trace.response && /* @__PURE__ */ jsxs("details", { className: "mt-4", open: true, children: [
+          /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-sm font-medium text-text-primary", children: tr(
+            "fluidgrids.executions.executionDetail.agent.finalResponse",
+            "Final response"
+          ) }),
+          /* @__PURE__ */ jsx("pre", { className: "mt-2 max-h-80 overflow-auto rounded bg-background-tertiary p-3 font-mono text-xs whitespace-pre-wrap break-words text-text-primary", children: trace.response })
+        ] })
+      ]
+    }
+  );
+}
+function Fact({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-xs text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "text-text-primary", children: value })
+  ] });
+}
+function PendingApprovals({
+  trace,
+  tr
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-lg border border-status-warning-border bg-status-warning-bg-subtle p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-status-warning-text", children: [
+        /* @__PURE__ */ jsx(Icon, { icon: "mdi:account-clock-outline", width: 16 }),
+        tr(
+          "fluidgrids.executions.executionDetail.agent.awaitingApproval",
+          "Tool calls waiting for approval: {{count}}",
+          { count: trace.pendingApprovals.length }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: "../approvals",
+          className: "text-sm font-medium text-text-link underline-offset-2 hover:text-text-linkHover hover:underline",
+          children: tr(
+            "fluidgrids.executions.executionDetail.agent.reviewApprovals",
+            "Review in Approvals"
+          )
+        }
+      )
+    ] }),
+    trace.pendingApprovals.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-2", children: trace.pendingApprovals.map((call) => /* @__PURE__ */ jsxs("li", { className: "rounded bg-background-primary p-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-mono text-xs font-medium text-text-primary", children: call.tool }),
+      call.args && /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-48 overflow-auto font-mono text-xs whitespace-pre-wrap break-words text-text-secondary", children: call.args })
+    ] }, call.key)) })
+  ] });
+}
+function AgentStepRow({ step, tr }) {
+  const marked = step.outcome !== "ok";
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: `rounded border ${step.outcome === "rejected" ? "border-status-warning-border" : step.outcome === "failed" ? "border-status-error-border" : "border-border-secondary"}`,
+      children: /* @__PURE__ */ jsxs("details", { children: [
+        /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer flex-wrap items-center gap-2 px-3 py-2 text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-secondary", children: [
+            step.index + 1,
+            "."
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 break-all font-mono text-text-primary", children: step.tool }),
+          step.outcome === "rejected" && /* @__PURE__ */ jsx("span", { className: "rounded bg-status-warning-bg-subtle px-1.5 py-0.5 text-xs text-status-warning-text", children: tr(
+            "fluidgrids.executions.executionDetail.agent.stepRejected",
+            "Rejected"
+          ) }),
+          step.outcome === "failed" && /* @__PURE__ */ jsx("span", { className: "rounded bg-status-error-bg-subtle px-1.5 py-0.5 text-xs text-status-error-text", children: tr(
+            "fluidgrids.executions.executionDetail.agent.stepFailed",
+            "Failed"
+          ) }),
+          step.durationMs !== null && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-text-secondary", children: formatDuration(step.durationMs / 1e3) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-border-secondary px-3 py-2", children: [
+          marked && step.reason && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `text-sm ${step.outcome === "rejected" ? "text-status-warning-text" : "text-status-error-text"}`,
+              children: step.reason
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StepBlock,
+            {
+              label: tr(
+                "fluidgrids.executions.executionDetail.agent.stepArguments",
+                "Arguments"
+              ),
+              value: step.args,
+              empty: tr(
+                "fluidgrids.executions.executionDetail.agent.stepNoArguments",
+                "No arguments"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StepBlock,
+            {
+              label: tr(
+                "fluidgrids.executions.executionDetail.agent.stepResult",
+                "Result"
+              ),
+              value: step.observation,
+              empty: tr(
+                "fluidgrids.executions.executionDetail.agent.stepNoResult",
+                "No result recorded"
+              )
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function StepBlock({
+  label,
+  value,
+  empty
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-text-secondary", children: label }),
+    value ? /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-64 overflow-auto rounded bg-background-tertiary p-2 font-mono text-xs whitespace-pre-wrap break-words text-text-primary", children: value }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-text-secondary", children: empty })
+  ] });
+}
+var RUN_AI_USAGE_POLL_INTERVAL_MS = 5e3;
+async function fetchRunAiUsage(runId) {
+  const result = await getFluidGridsClient().query({
+    query: RunAiUsageDocument,
+    variables: { runId },
+    fetchPolicy: "network-only"
+  });
+  throwIfResultError(result);
+  return result.data?.runAiUsage ?? null;
+}
+function useRunAiUsage(runId, { enabled, live }) {
+  const [sent, setSent] = useState(0);
+  const [settled, setSettled] = useState(null);
+  const request = useRef(0);
+  const read = useCallback(async () => {
+    if (!runId || !enabled) return;
+    const id = ++request.current;
+    setSent(id);
+    let next;
+    try {
+      next = { usage: await fetchRunAiUsage(runId), error: null };
+    } catch (err) {
+      next = {
+        usage: null,
+        error: err instanceof Error ? err.message : String(err)
+      };
+    }
+    if (id !== request.current) return;
+    setSettled((previous) => ({
+      request: id,
+      runId,
+      // A failed refresh keeps the last good read of the same run on screen.
+      usage: next.usage ?? (next.error && previous?.runId === runId ? previous.usage : null),
+      error: next.error
+    }));
+  }, [runId, enabled]);
+  useEffect(() => {
+    void read();
+  }, [read]);
+  useEffect(() => {
+    if (!enabled || !live) return;
+    const timer = setInterval(() => void read(), RUN_AI_USAGE_POLL_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [enabled, live, read]);
+  const current = enabled && settled?.runId === runId ? settled : null;
+  return {
+    usage: current?.usage ?? null,
+    loading: enabled && !!runId && (current?.request ?? -1) !== sent,
+    error: current?.error ?? null,
+    refetch: read
+  };
+}
 function formatTime(value) {
   if (!value) return null;
   const date = new Date(value);
@@ -2299,19 +2827,43 @@ function SaveRunAsTestCase({ runId }) {
 var ALL_DETAIL_TABS = [
   "timeline",
   "history",
+  "agent",
   "logs",
   "input",
   "context"
 ];
-var GRAPH_DETAIL_TABS = ALL_DETAIL_TABS.filter(
-  (tab) => tab !== "history"
-);
+function availableDetailTabs(isDurableRun, hasAgent) {
+  return ALL_DETAIL_TABS.filter(
+    (tab) => (tab !== "history" || isDurableRun) && (tab !== "agent" || hasAgent)
+  );
+}
 function ExecutionDetailPage() {
   const tr = useTr();
   const { runId } = useParams();
   const navigate = useNavigate();
-  const [tabSelection, setTabSelection] = useState({ runId, tab: "timeline" });
-  const setActiveTab = (tab) => setTabSelection({ runId, tab });
+  const [searchParams, setSearchParams] = useSearchParams();
+  const requestedTab = parseDetailTabParam(
+    searchParams.get("tab"),
+    ALL_DETAIL_TABS
+  );
+  const requestedNodeId = searchParams.get("node");
+  const [tabSelection, setTabSelection] = useState({ runId, tab: requestedTab ?? "timeline" });
+  const [agentFocus, setAgentFocus] = useState({ runId, nodeId: requestedNodeId });
+  const setActiveTab = (tab, focusNodeId = null) => {
+    setTabSelection({ runId, tab });
+    setAgentFocus({ runId, nodeId: focusNodeId });
+    setSearchParams(
+      (params) => {
+        const next = new URLSearchParams(params);
+        if (tab === "timeline") next.delete("tab");
+        else next.set("tab", tab);
+        if (focusNodeId) next.set("node", focusNodeId);
+        else next.delete("node");
+        return next;
+      },
+      { replace: true }
+    );
+  };
   const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(true);
   const [showTerminateDialog, setShowTerminateDialog] = useState(false);
   const { allowed: canControlRuns } = useFluidGridsPermission(
@@ -2427,12 +2979,27 @@ function ExecutionDetailPage() {
     minLevel: minLogLevel
   });
   const isDurableRun = durableEnabled && execution?.executionKind === "DURABLE_FN";
+  const hasAgent = hasAgentNodeState(execution?.nodeStates);
   const activeTab = resolveDetailTab(
-    tabSelection,
+    selectionForRun(tabSelection, runId, requestedTab, "timeline"),
     runId,
-    isDurableRun ? ALL_DETAIL_TABS : GRAPH_DETAIL_TABS,
+    availableDetailTabs(isDurableRun, hasAgent),
     "timeline"
   );
+  const agentFocusNodeId = agentFocus.runId === runId ? agentFocus.nodeId : requestedNodeId;
+  const runAiUsage = useRunAiUsage(runId, {
+    enabled: hasAgent && activeTab === "agent",
+    live: autoRefreshEnabled && isActive
+  });
+  const agentTraces = useMemo(
+    () => agentNodeTraces(
+      orderNodesByExecution(
+        execution?.nodeStates ?? [],
+        execution?.triggerNodeId ?? void 0
+      )
+    ),
+    [execution?.nodeStates, execution?.triggerNodeId]
+  );
   const runHistory = useRunHistory(runId, {
     enabled: isDurableRun && activeTab === "history",
     live: isActive
@@ -2547,7 +3114,7 @@ function ExecutionDetailPage() {
     },
     [navigate]
   );
-  const formatDuration = (ms) => {
+  const formatDuration2 = (ms) => {
     if (!ms) return "-";
     if (ms < 1e3) return `${ms}ms`;
     if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
@@ -2677,6 +3244,16 @@ function ExecutionDetailPage() {
         icon: "mdi:history"
       }
     ] : [],
+    ...hasAgent ? [
+      {
+        id: "agent",
+        label: tr(
+          "fluidgrids.executions.executionDetail.agentTab",
+          "Agent"
+        ),
+        icon: "mdi:robot-outline"
+      }
+    ] : [],
     {
       id: "logs",
       label: tr("fluidgrids.executions.executionDetail.logsTab", "Logs"),
@@ -3001,7 +3578,7 @@ function ExecutionDetailPage() {
           "fluidgrids.executions.executionDetail.durationStat",
           "Duration"
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "text-xl font-bold text-text-primary mt-1", children: formatDuration(execution.duration) })
+        /* @__PURE__ */ jsx("div", { className: "text-xl font-bold text-text-primary mt-1", children: formatDuration2(execution.duration) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "bg-background-secondary rounded-lg border border-border-secondary p-4", children: [
         /* @__PURE__ */ jsx("div", { className: "text-sm text-text-secondary", children: tr(
@@ -3126,12 +3703,12 @@ function ExecutionDetailPage() {
         onViewChildRun: handleViewChildRun
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "border-b border-border-secondary mb-6", children: /* @__PURE__ */ jsx("nav", { className: "flex gap-4 -mb-px", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "border-b border-border-secondary mb-6", children: /* @__PURE__ */ jsx("nav", { className: "flex gap-4 -mb-px overflow-x-auto", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
       "button",
       {
         onClick: () => setActiveTab(tab.id),
         className: `
-                flex items-center gap-2 px-4 py-3 border-b-2 text-sm font-medium transition-colors
+                flex shrink-0 items-center gap-2 whitespace-nowrap px-4 py-3 border-b-2 text-sm font-medium transition-colors
                 ${activeTab === tab.id ? "border-action-primary-bg text-action-primary-text" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-primary"}
               `,
         children: [
@@ -3149,7 +3726,20 @@ function ExecutionDetailPage() {
           nodeDisplay,
           triggerNodeId: execution.triggerNodeId ?? void 0,
           onRetryNode: canControlRuns ? handleRetryNode : void 0,
-          onViewChildRun: handleViewChildRun
+          onViewChildRun: handleViewChildRun,
+          onViewAgentTrace: (nodeId) => setActiveTab("agent", nodeId)
+        }
+      ) }),
+      activeTab === "agent" && hasAgent && /* @__PURE__ */ jsx("div", { className: "p-4 sm:p-6", children: /* @__PURE__ */ jsx(
+        AgentTracePanel,
+        {
+          traces: agentTraces,
+          nodeDisplay,
+          usage: runAiUsage.usage,
+          usageLoading: runAiUsage.loading,
+          usageError: runAiUsage.error,
+          onRefreshUsage: () => void runAiUsage.refetch(),
+          focusNodeId: agentFocusNodeId
         }
       ) }),
       activeTab === "history" && isDurableRun && /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4 sm:p-6", children: [