@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/ExecutionDetailPage.js

@@ -0,0 +1,313 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { formatCurrency as t, formatDuration as n, formatNumber as r, formatRelativeTime as i } from "../utils/formatters.js";
+import { PageLayout as a } from "../components/PageLayout.js";
+import { Card as o, CardContent as s, CardDescription as c, CardHeader as l, CardTitle as u } from "../components/Card.js";
+import { Button as d } from "../components/Button.js";
+import { Badge as f } from "../components/Badge.js";
+import { isNative as p, nativeCopyText as m, nativeToast as h } from "../../utils/nativeBridge.js";
+import { EmptyState as g } from "../components/EmptyState.js";
+import { ErrorState as _ } from "../components/ErrorState.js";
+import { toUnion as v } from "../utils/unions.js";
+import { useCreateExecution as y, useExecution as b } from "../hooks/useExecutions.js";
+import { ExecutionStatus as x } from "../../generated/wspace-types.js";
+import { PagePurpose as S } from "@burdenoff/fe-libs/ui";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { useParams as T } from "react-router";
+import { AlertTriangle as E, ArrowLeft as D, CheckCircle as O, Clock as k, Copy as A, DollarSign as j, Hourglass as M, Play as N, RefreshCw as P, XCircle as F, Zap as I } from "lucide-react";
+import { toast as L } from "sonner";
+//#region src/botlit/pages/ExecutionDetailPage.tsx
+var R = [
+	"AGENT",
+	"APP",
+	"WORKFLOW"
+], z = (e) => {
+	switch (e) {
+		case x.Completed: return /* @__PURE__ */ C(O, {
+			className: "text-status-success-text",
+			size: 20
+		});
+		case x.Failed:
+		case x.Timeout: return /* @__PURE__ */ C(F, {
+			className: "text-status-error-text",
+			size: 20
+		});
+		case x.Cancelled: return /* @__PURE__ */ C(F, {
+			className: "text-text-secondary",
+			size: 20
+		});
+		case x.Running: return /* @__PURE__ */ C(P, {
+			className: "text-status-info-text motion-safe:animate-spin",
+			size: 20
+		});
+		case x.Pending: return /* @__PURE__ */ C(M, {
+			className: "text-status-warning-text",
+			size: 20
+		});
+		default: return /* @__PURE__ */ C(E, {
+			className: "text-text-secondary",
+			size: 20
+		});
+	}
+}, B = (e) => {
+	switch (e) {
+		case x.Completed: return "success";
+		case x.Failed:
+		case x.Timeout: return "destructive";
+		case x.Pending: return "warning";
+		case x.Running: return "default";
+		default: return "secondary";
+	}
+}, V = () => {
+	let { executionId: x } = T(), { navigateTo: O } = e(), { data: M, loading: F, error: V, refetch: H } = b(x), [U, W] = y();
+	if (F) return /* @__PURE__ */ C(a, {
+		title: "Loading...",
+		children: /* @__PURE__ */ C("div", { className: "h-96 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" })
+	});
+	if (V) return /* @__PURE__ */ C(a, {
+		title: "Execution",
+		children: /* @__PURE__ */ C(_, {
+			resource: "this execution",
+			error: V,
+			onRetry: () => void H()
+		})
+	});
+	if (!M) return /* @__PURE__ */ C(a, {
+		title: "Execution Not Found",
+		children: /* @__PURE__ */ C(g, {
+			illustration: "empty-search",
+			title: "Execution Not Found",
+			description: "The execution doesn't exist.",
+			action: /* @__PURE__ */ C(d, {
+				onClick: () => O("executions"),
+				children: "Back to Executions"
+			})
+		})
+	});
+	let G = async () => {
+		try {
+			let e = await U({ input: {
+				workspaceId: M.workspaceId,
+				type: v(M.type, R, "AGENT"),
+				input: M.input,
+				appId: M.appId,
+				agentId: M.agentId,
+				metadata: { sourceExecutionId: M.id }
+			} });
+			L.success("Re-run started"), O(`executions/${e.id}`);
+		} catch (e) {
+			L.error(e instanceof Error ? e.message : "Failed to re-run execution");
+		}
+	};
+	return /* @__PURE__ */ C(a, {
+		title: /* @__PURE__ */ w("div", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ C(d, {
+					variant: "ghost",
+					size: "icon",
+					onClick: () => O("executions"),
+					children: /* @__PURE__ */ C(D, { size: 20 })
+				}),
+				z(M.status),
+				/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ w("span", { children: [
+						"Execution ",
+						M.id.slice(0, 8),
+						"…"
+					] }), /* @__PURE__ */ C(f, {
+						variant: B(M.status),
+						children: M.status
+					})]
+				}), /* @__PURE__ */ w("p", {
+					className: "text-sm font-normal text-text-secondary",
+					children: [
+						M.appId ?? "—",
+						" / ",
+						M.agentId ?? "—"
+					]
+				})] })
+			]
+		}),
+		actions: /* @__PURE__ */ w("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ C(d, {
+				variant: "outline",
+				leftIcon: /* @__PURE__ */ C(A, { size: 16 }),
+				onClick: () => {
+					m(M.id), p() && h("Copied");
+				},
+				children: "Copy ID"
+			}), /* @__PURE__ */ C(d, {
+				leftIcon: /* @__PURE__ */ C(N, { size: 16 }),
+				onClick: () => void G(),
+				isLoading: W.loading,
+				children: "Run again"
+			})]
+		}),
+		children: /* @__PURE__ */ w("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ C(S, {
+					icon: /* @__PURE__ */ C(k, { size: 18 }),
+					children: "This is the record of one agent run — its status, how long it took, the tokens and cost it consumed, and the input and output that produced the result. Use it to debug a failure, understand an unexpected answer, or audit exactly what the agent did on a given request."
+				}),
+				/* @__PURE__ */ w("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-4",
+					children: [
+						/* @__PURE__ */ C(o, {
+							treatment: "glass",
+							glow: !0,
+							children: /* @__PURE__ */ w(s, {
+								className: "pt-6 text-center",
+								children: [
+									/* @__PURE__ */ C(k, { className: "h-6 w-6 mx-auto mb-2 text-text-secondary" }),
+									/* @__PURE__ */ C("p", {
+										className: "text-2xl font-bold tabular-nums",
+										children: M.duration === null || M.duration === void 0 ? "—" : n(M.duration)
+									}),
+									/* @__PURE__ */ C("p", {
+										className: "text-sm text-text-secondary",
+										children: "Duration"
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ C(o, {
+							treatment: "metric",
+							children: /* @__PURE__ */ w(s, {
+								className: "pt-6 text-center",
+								children: [
+									/* @__PURE__ */ C(I, { className: "h-6 w-6 mx-auto mb-2 text-text-secondary" }),
+									/* @__PURE__ */ C("p", {
+										className: "text-2xl font-bold tabular-nums",
+										children: r(M.tokensUsed)
+									}),
+									/* @__PURE__ */ C("p", {
+										className: "text-sm text-text-secondary",
+										children: "Tokens"
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ C(o, {
+							treatment: "metric",
+							children: /* @__PURE__ */ w(s, {
+								className: "pt-6 text-center",
+								children: [
+									/* @__PURE__ */ C(j, { className: "h-6 w-6 mx-auto mb-2 text-text-secondary" }),
+									/* @__PURE__ */ C("p", {
+										className: "text-2xl font-bold tabular-nums",
+										children: t(M.cost)
+									}),
+									/* @__PURE__ */ C("p", {
+										className: "text-sm text-text-secondary",
+										children: "Cost"
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ C(o, {
+							treatment: "metric",
+							children: /* @__PURE__ */ w(s, {
+								className: "pt-6 text-center",
+								children: [
+									/* @__PURE__ */ C(P, { className: "h-6 w-6 mx-auto mb-2 text-text-secondary" }),
+									/* @__PURE__ */ C("p", {
+										className: "text-2xl font-bold capitalize",
+										children: M.type.toLowerCase()
+									}),
+									/* @__PURE__ */ C("p", {
+										className: "text-sm text-text-secondary",
+										children: "Type"
+									})
+								]
+							})
+						})
+					]
+				}),
+				(M.errorMessage || M.errorCode) && /* @__PURE__ */ w(o, { children: [/* @__PURE__ */ w(l, { children: [/* @__PURE__ */ w(u, {
+					className: "flex items-center gap-2 text-status-error-text",
+					children: [/* @__PURE__ */ C(E, { size: 18 }), "Failure"]
+				}), M.errorCode && /* @__PURE__ */ C(c, { children: M.errorCode })] }), /* @__PURE__ */ w(s, {
+					className: "space-y-3",
+					children: [M.errorMessage && /* @__PURE__ */ C("p", {
+						className: "text-sm text-text-primary",
+						children: M.errorMessage
+					}), M.errorDetails && /* @__PURE__ */ C("pre", {
+						className: "max-h-64 overflow-auto rounded-lg bg-bg-sunken p-3 font-mono text-xs",
+						children: JSON.stringify(M.errorDetails, null, 2)
+					})]
+				})] }),
+				/* @__PURE__ */ w(o, { children: [/* @__PURE__ */ C(l, { children: /* @__PURE__ */ C(u, { children: "Run Details" }) }), /* @__PURE__ */ C(s, { children: /* @__PURE__ */ w("div", {
+					className: "grid grid-cols-1 gap-6 md:grid-cols-3",
+					children: [
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+							className: "text-sm text-text-secondary",
+							children: "Execution ID"
+						}), /* @__PURE__ */ C("p", {
+							className: "font-mono text-sm break-all",
+							children: M.id
+						})] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+							className: "text-sm text-text-secondary",
+							children: "Bot"
+						}), /* @__PURE__ */ C("p", {
+							className: "font-mono text-sm break-all",
+							children: M.appId ?? "—"
+						})] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+							className: "text-sm text-text-secondary",
+							children: "Agent"
+						}), /* @__PURE__ */ C("p", {
+							className: "font-mono text-sm break-all",
+							children: M.agentId ?? "—"
+						})] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+							className: "text-sm text-text-secondary",
+							children: "Conversation"
+						}), /* @__PURE__ */ C("p", {
+							className: "font-mono text-sm break-all",
+							children: M.conversationId ?? "—"
+						})] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+							className: "text-sm text-text-secondary",
+							children: "Started"
+						}), /* @__PURE__ */ C("p", {
+							className: "font-medium",
+							children: i(M.createdAt)
+						})] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+							className: "text-sm text-text-secondary",
+							children: "Completed"
+						}), /* @__PURE__ */ C("p", {
+							className: "font-medium",
+							children: i(M.completedAt)
+						})] })
+					]
+				}) })] }),
+				/* @__PURE__ */ w("div", {
+					className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
+					children: [/* @__PURE__ */ w(o, { children: [/* @__PURE__ */ C(l, { children: /* @__PURE__ */ C(u, { children: "Input" }) }), /* @__PURE__ */ C(s, { children: /* @__PURE__ */ C("pre", {
+						className: "max-h-96 overflow-auto whitespace-pre-wrap rounded-lg bg-bg-sunken p-3 text-sm",
+						children: M.input
+					}) })] }), /* @__PURE__ */ w(o, { children: [/* @__PURE__ */ C(l, { children: /* @__PURE__ */ C(u, { children: "Output" }) }), /* @__PURE__ */ C(s, { children: M.output ? /* @__PURE__ */ C("pre", {
+						className: "max-h-96 overflow-auto whitespace-pre-wrap rounded-lg bg-bg-sunken p-3 text-sm",
+						children: M.output
+					}) : /* @__PURE__ */ C("p", {
+						className: "text-sm text-text-secondary",
+						children: "This run has not produced an output yet."
+					}) })] })]
+				}),
+				M.metadata && Object.keys(M.metadata).length > 0 && /* @__PURE__ */ w(o, { children: [/* @__PURE__ */ C(l, { children: /* @__PURE__ */ C(u, { children: "Metadata" }) }), /* @__PURE__ */ C(s, { children: /* @__PURE__ */ C("pre", {
+					className: "max-h-64 overflow-auto rounded-lg bg-bg-sunken p-3 font-mono text-xs",
+					children: JSON.stringify(M.metadata, null, 2)
+				}) })] })
+			]
+		})
+	});
+};
+//#endregion
+export { V as ExecutionDetailPage };
+
+//# sourceMappingURL=ExecutionDetailPage.js.map

package/dist/botlit/pages/ExecutionDetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionDetailPage.js","names":[],"sources":["../../../src/botlit/pages/ExecutionDetailPage.tsx"],"sourcesContent":["/**\n * Execution Detail Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useParams } from 'react-router';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport { isNative, nativeCopyText, nativeToast } from '../../utils/nativeBridge';\nimport {\n  ArrowLeft,\n  Play,\n  Clock,\n  DollarSign,\n  Zap,\n  AlertTriangle,\n  CheckCircle,\n  XCircle,\n  RefreshCw,\n  Hourglass,\n  Copy,\n} from 'lucide-react';\nimport { toast } from 'sonner';\nimport { PageLayout } from '../components/PageLayout';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { EmptyState } from '../components/EmptyState';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Badge } from '../components/Badge';\nimport { ErrorState } from '../components/ErrorState';\nimport { useExecution, useCreateExecution } from '../hooks/useExecutions';\nimport {\n  formatNumber,\n  formatCurrency,\n  formatDuration,\n  formatRelativeTime,\n  MISSING_VALUE,\n} from '../utils/formatters';\nimport { toUnion } from '../utils/unions';\n\n/** Execution kinds `CreateExecutionInput.type` accepts. */\nconst EXECUTION_TYPES = ['AGENT', 'APP', 'WORKFLOW'] as const;\nimport { ExecutionStatus as GqlExecutionStatus } from '../../generated/wspace-types';\n\nconst getStatusIcon = (status: string) => {\n  switch (status) {\n    case GqlExecutionStatus.Completed:\n      return <CheckCircle className=\"text-status-success-text\" size={20} />;\n    case GqlExecutionStatus.Failed:\n    case GqlExecutionStatus.Timeout:\n      return <XCircle className=\"text-status-error-text\" size={20} />;\n    case GqlExecutionStatus.Cancelled:\n      return <XCircle className=\"text-text-secondary\" size={20} />;\n    case GqlExecutionStatus.Running:\n      return <RefreshCw className=\"text-status-info-text motion-safe:animate-spin\" size={20} />;\n    case GqlExecutionStatus.Pending:\n      return <Hourglass className=\"text-status-warning-text\" size={20} />;\n    default:\n      return <AlertTriangle className=\"text-text-secondary\" size={20} />;\n  }\n};\n\nconst getStatusBadgeVariant = (\n  status: string\n): 'success' | 'destructive' | 'warning' | 'secondary' | 'default' => {\n  switch (status) {\n    case GqlExecutionStatus.Completed:\n      return 'success';\n    case GqlExecutionStatus.Failed:\n    case GqlExecutionStatus.Timeout:\n      return 'destructive';\n    case GqlExecutionStatus.Pending:\n      return 'warning';\n    case GqlExecutionStatus.Running:\n      return 'default';\n    default:\n      return 'secondary';\n  }\n};\n\nexport const ExecutionDetailPage: FC = () => {\n  const { executionId } = useParams();\n  const { navigateTo } = useBotlit();\n  const { data: execution, loading, error, refetch } = useExecution(executionId);\n  const [createExecution, createExecutionState] = useCreateExecution();\n\n  if (loading) {\n    return (\n      <PageLayout title=\"Loading...\">\n        <div className=\"h-96 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\" />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout title=\"Execution\">\n        <ErrorState resource=\"this execution\" error={error} onRetry={() => void refetch()} />\n      </PageLayout>\n    );\n  }\n\n  if (!execution) {\n    return (\n      <PageLayout title=\"Execution Not Found\">\n        <EmptyState\n          illustration=\"empty-search\"\n          title=\"Execution Not Found\"\n          description=\"The execution doesn't exist.\"\n          action={<Button onClick={() => navigateTo('executions')}>Back to Executions</Button>}\n        />\n      </PageLayout>\n    );\n  }\n\n  /**\n   * Re-runs this execution's input. The service has no dedicated replay\n   * operation, so this creates a fresh execution with the same input and a\n   * pointer back to the run it came from.\n   */\n  const handleReplay = async () => {\n    try {\n      const created = await createExecution({\n        input: {\n          workspaceId: execution.workspaceId,\n          type: toUnion(execution.type, EXECUTION_TYPES, 'AGENT'),\n          input: execution.input,\n          appId: execution.appId,\n          agentId: execution.agentId,\n          metadata: { sourceExecutionId: execution.id },\n        },\n      });\n      toast.success('Re-run started');\n      navigateTo(`executions/${created.id}`);\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to re-run execution');\n    }\n  };\n\n  return (\n    <PageLayout\n      title={\n        <div className=\"flex items-center gap-3\">\n          <Button variant=\"ghost\" size=\"icon\" onClick={() => navigateTo('executions')}>\n            <ArrowLeft size={20} />\n          </Button>\n          {getStatusIcon(execution.status)}\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <span>Execution {execution.id.slice(0, 8)}…</span>\n              <Badge variant={getStatusBadgeVariant(execution.status)}>{execution.status}</Badge>\n            </div>\n            <p className=\"text-sm font-normal text-text-secondary\">\n              {execution.appId ?? MISSING_VALUE} / {execution.agentId ?? MISSING_VALUE}\n            </p>\n          </div>\n        </div>\n      }\n      actions={\n        <div className=\"flex gap-2\">\n          <Button\n            variant=\"outline\"\n            leftIcon={<Copy size={16} />}\n            onClick={() => {\n              void nativeCopyText(execution.id);\n              if (isNative()) void nativeToast('Copied');\n            }}\n          >\n            Copy ID\n          </Button>\n          <Button\n            leftIcon={<Play size={16} />}\n            onClick={() => void handleReplay()}\n            isLoading={createExecutionState.loading}\n          >\n            Run again\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Clock size={18} />}>\n          This is the record of one agent run — its status, how long it took, the tokens and cost it\n          consumed, and the input and output that produced the result. Use it to debug a failure,\n          understand an unexpected answer, or audit exactly what the agent did on a given request.\n        </PagePurpose>\n\n        {/* Metrics Summary */}\n        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n          <Card treatment=\"glass\" glow>\n            <CardContent className=\"pt-6 text-center\">\n              <Clock className=\"h-6 w-6 mx-auto mb-2 text-text-secondary\" />\n              <p className=\"text-2xl font-bold tabular-nums\">\n                {execution.duration === null || execution.duration === undefined\n                  ? MISSING_VALUE\n                  : formatDuration(execution.duration)}\n              </p>\n              <p className=\"text-sm text-text-secondary\">Duration</p>\n            </CardContent>\n          </Card>\n          <Card treatment=\"metric\">\n            <CardContent className=\"pt-6 text-center\">\n              <Zap className=\"h-6 w-6 mx-auto mb-2 text-text-secondary\" />\n              <p className=\"text-2xl font-bold tabular-nums\">\n                {formatNumber(execution.tokensUsed)}\n              </p>\n              <p className=\"text-sm text-text-secondary\">Tokens</p>\n            </CardContent>\n          </Card>\n          <Card treatment=\"metric\">\n            <CardContent className=\"pt-6 text-center\">\n              <DollarSign className=\"h-6 w-6 mx-auto mb-2 text-text-secondary\" />\n              <p className=\"text-2xl font-bold tabular-nums\">{formatCurrency(execution.cost)}</p>\n              <p className=\"text-sm text-text-secondary\">Cost</p>\n            </CardContent>\n          </Card>\n          <Card treatment=\"metric\">\n            <CardContent className=\"pt-6 text-center\">\n              <RefreshCw className=\"h-6 w-6 mx-auto mb-2 text-text-secondary\" />\n              <p className=\"text-2xl font-bold capitalize\">{execution.type.toLowerCase()}</p>\n              <p className=\"text-sm text-text-secondary\">Type</p>\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* Failure details */}\n        {(execution.errorMessage || execution.errorCode) && (\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"flex items-center gap-2 text-status-error-text\">\n                <AlertTriangle size={18} />\n                Failure\n              </CardTitle>\n              {execution.errorCode && <CardDescription>{execution.errorCode}</CardDescription>}\n            </CardHeader>\n            <CardContent className=\"space-y-3\">\n              {execution.errorMessage && (\n                <p className=\"text-sm text-text-primary\">{execution.errorMessage}</p>\n              )}\n              {execution.errorDetails && (\n                <pre className=\"max-h-64 overflow-auto rounded-lg bg-bg-sunken p-3 font-mono text-xs\">\n                  {JSON.stringify(execution.errorDetails, null, 2)}\n                </pre>\n              )}\n            </CardContent>\n          </Card>\n        )}\n\n        {/* Identity & timings */}\n        <Card>\n          <CardHeader>\n            <CardTitle>Run Details</CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"grid grid-cols-1 gap-6 md:grid-cols-3\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">Execution ID</p>\n                <p className=\"font-mono text-sm break-all\">{execution.id}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Bot</p>\n                <p className=\"font-mono text-sm break-all\">{execution.appId ?? MISSING_VALUE}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Agent</p>\n                <p className=\"font-mono text-sm break-all\">{execution.agentId ?? MISSING_VALUE}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Conversation</p>\n                <p className=\"font-mono text-sm break-all\">\n                  {execution.conversationId ?? MISSING_VALUE}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Started</p>\n                <p className=\"font-medium\">{formatRelativeTime(execution.createdAt)}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Completed</p>\n                <p className=\"font-medium\">{formatRelativeTime(execution.completedAt)}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Input / Output */}\n        <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Input</CardTitle>\n            </CardHeader>\n            <CardContent>\n              <pre className=\"max-h-96 overflow-auto whitespace-pre-wrap rounded-lg bg-bg-sunken p-3 text-sm\">\n                {execution.input}\n              </pre>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Output</CardTitle>\n            </CardHeader>\n            <CardContent>\n              {execution.output ? (\n                <pre className=\"max-h-96 overflow-auto whitespace-pre-wrap rounded-lg bg-bg-sunken p-3 text-sm\">\n                  {execution.output}\n                </pre>\n              ) : (\n                <p className=\"text-sm text-text-secondary\">\n                  This run has not produced an output yet.\n                </p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* Metadata */}\n        {execution.metadata && Object.keys(execution.metadata).length > 0 && (\n          <Card>\n            <CardHeader>\n              <CardTitle>Metadata</CardTitle>\n            </CardHeader>\n            <CardContent>\n              <pre className=\"max-h-64 overflow-auto rounded-lg bg-bg-sunken p-3 font-mono text-xs\">\n                {JSON.stringify(execution.metadata, null, 2)}\n              </pre>\n            </CardContent>\n          </Card>\n        )}\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}

package/dist/botlit/pages/ExecutionsPage.js

@@ -0,0 +1,294 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { formatCurrency as t, formatDuration as n, formatNumber as r, formatRelativeTime as i } from "../utils/formatters.js";
+import { PageLayout as a } from "../components/PageLayout.js";
+import { Card as o, CardContent as s } from "../components/Card.js";
+import { Button as c } from "../components/Button.js";
+import { Badge as l } from "../components/Badge.js";
+import { EmptyState as u } from "../components/EmptyState.js";
+import { Input as d } from "../components/Input.js";
+import { ErrorState as f } from "../components/ErrorState.js";
+import { summariseExecutions as p, useExecutions as m } from "../hooks/useExecutions.js";
+import "../hooks/index.js";
+import { ExecutionStatus as h } from "../../generated/wspace-types.js";
+import { useMemo as g, useState as _ } from "react";
+import { PagePurpose as v } from "@burdenoff/fe-libs/ui";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { Link as x } from "react-router";
+import { Activity as S, CheckCircle as C, Clock as w, DollarSign as T, Hourglass as E, RefreshCw as D, Search as O, TrendingUp as k, XCircle as A, Zap as j } from "lucide-react";
+//#region src/botlit/pages/ExecutionsPage.tsx
+var M = [
+	h.Completed,
+	h.Running,
+	h.Pending,
+	h.Failed,
+	h.Timeout,
+	h.Cancelled
+], N = {
+	[h.Completed]: "Completed",
+	[h.Running]: "Running",
+	[h.Pending]: "Pending",
+	[h.Failed]: "Failed",
+	[h.Timeout]: "Timed out",
+	[h.Cancelled]: "Cancelled"
+}, P = ({ status: e, className: t }) => {
+	switch (e) {
+		case h.Completed: return /* @__PURE__ */ y(C, { className: t ?? "h-4 w-4 text-status-success-text" });
+		case h.Failed:
+		case h.Timeout: return /* @__PURE__ */ y(A, { className: t ?? "h-4 w-4 text-status-error-text" });
+		case h.Running: return /* @__PURE__ */ y(D, { className: t ?? "h-4 w-4 text-status-info-text motion-safe:animate-spin" });
+		case h.Pending: return /* @__PURE__ */ y(E, { className: t ?? "h-4 w-4 text-status-warning-text" });
+		default: return /* @__PURE__ */ y(S, { className: t ?? "h-4 w-4 text-text-secondary" });
+	}
+}, F = ({ status: e }) => /* @__PURE__ */ b(l, {
+	variant: {
+		[h.Completed]: "success",
+		[h.Failed]: "destructive",
+		[h.Timeout]: "destructive",
+		[h.Running]: "default",
+		[h.Pending]: "warning",
+		[h.Cancelled]: "secondary"
+	}[e] ?? "secondary",
+	className: "flex items-center gap-1",
+	children: [/* @__PURE__ */ y(P, { status: e }), N[e] ?? e]
+}), I = () => {
+	let { getPath: l } = e(), [h, C] = _(""), [E, A] = _([]), { data: I, loading: L, error: R, refetch: z } = m(g(() => ({
+		search: h,
+		status: E
+	}), [h, E])), B = g(() => p(I), [I]);
+	return /* @__PURE__ */ y(a, {
+		title: "Executions",
+		description: "Monitor agent execution history, performance, and costs",
+		actions: /* @__PURE__ */ y(c, {
+			variant: "outline",
+			leftIcon: /* @__PURE__ */ y(D, { size: 16 }),
+			onClick: () => void z(),
+			children: "Refresh"
+		}),
+		children: /* @__PURE__ */ b("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ y(v, {
+					icon: /* @__PURE__ */ y(S, { size: 18 }),
+					children: "An execution is a single run of an agent — one request in, one response out. This page is your observability and cost dashboard: see which runs succeeded or failed, how long they took, how many tokens they burned and what they cost. Use it to spot failing agents, runaway spend and latency regressions, then open any run to inspect its full trace."
+				}),
+				B.total > 0 && /* @__PURE__ */ b("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ b("div", {
+						className: "grid grid-cols-2 md:grid-cols-4 gap-4",
+						children: [
+							/* @__PURE__ */ y(o, {
+								treatment: "glass",
+								glow: !0,
+								children: /* @__PURE__ */ y(s, {
+									className: "pt-6",
+									children: /* @__PURE__ */ b("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Executions"
+										}), /* @__PURE__ */ y("p", {
+											className: "text-2xl font-bold tabular-nums",
+											children: r(B.total)
+										})] }), /* @__PURE__ */ y(S, { className: "h-8 w-8 text-text-secondary" })]
+									})
+								})
+							}),
+							/* @__PURE__ */ y(o, {
+								treatment: "metric",
+								children: /* @__PURE__ */ y(s, {
+									className: "pt-6",
+									children: /* @__PURE__ */ b("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Success Rate"
+										}), /* @__PURE__ */ b("p", {
+											className: "text-2xl font-bold tabular-nums text-status-success-text",
+											children: [(B.successRate * 100).toFixed(1), "%"]
+										})] }), /* @__PURE__ */ y(k, { className: "h-8 w-8 text-status-success-text" })]
+									})
+								})
+							}),
+							/* @__PURE__ */ y(o, {
+								treatment: "metric",
+								children: /* @__PURE__ */ y(s, {
+									className: "pt-6",
+									children: /* @__PURE__ */ b("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Avg Duration"
+										}), /* @__PURE__ */ y("p", {
+											className: "text-2xl font-bold tabular-nums",
+											children: n(B.avgDurationMs)
+										})] }), /* @__PURE__ */ y(w, { className: "h-8 w-8 text-text-secondary" })]
+									})
+								})
+							}),
+							/* @__PURE__ */ y(o, {
+								treatment: "metric",
+								children: /* @__PURE__ */ y(s, {
+									className: "pt-6",
+									children: /* @__PURE__ */ b("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Total Cost"
+										}), /* @__PURE__ */ y("p", {
+											className: "text-2xl font-bold tabular-nums",
+											children: t(B.totalCost)
+										})] }), /* @__PURE__ */ y(T, { className: "h-8 w-8 text-text-secondary" })]
+									})
+								})
+							})
+						]
+					}), /* @__PURE__ */ b("p", {
+						className: "text-xs text-text-secondary",
+						children: [
+							"Calculated across the ",
+							r(B.total),
+							" runs shown below."
+						]
+					})]
+				}),
+				/* @__PURE__ */ b("div", {
+					className: "flex flex-wrap items-center gap-4",
+					children: [/* @__PURE__ */ b("div", {
+						className: "relative flex-1 max-w-md",
+						children: [/* @__PURE__ */ y(O, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y(d, {
+							placeholder: "Search by run, agent, bot or input…",
+							value: h,
+							onChange: (e) => C(e.target.value),
+							className: "pl-9"
+						})]
+					}), /* @__PURE__ */ y("div", {
+						className: "flex flex-wrap gap-2",
+						children: M.map((e) => /* @__PURE__ */ b(c, {
+							variant: E.includes(e) ? "default" : "outline",
+							size: "sm",
+							onClick: () => A((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]),
+							children: [/* @__PURE__ */ y(P, { status: e }), /* @__PURE__ */ y("span", {
+								className: "ml-1",
+								children: N[e]
+							})]
+						}, e))
+					})]
+				}),
+				L ? /* @__PURE__ */ y("div", {
+					className: "space-y-4",
+					children: [
+						1,
+						2,
+						3,
+						4,
+						5
+					].map((e) => /* @__PURE__ */ y("div", { className: "h-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : R ? /* @__PURE__ */ y(f, {
+					resource: "executions",
+					error: R,
+					onRetry: () => void z()
+				}) : I.length > 0 ? /* @__PURE__ */ b("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ b("div", {
+						className: "grid grid-cols-12 gap-4 px-4 py-2 text-sm font-medium text-text-secondary border-b border-border-subtle",
+						children: [
+							/* @__PURE__ */ y("div", {
+								className: "col-span-2",
+								children: "Status"
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "col-span-3",
+								children: "Bot / Agent"
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "col-span-2",
+								children: "Duration"
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "col-span-2",
+								children: "Tokens"
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "col-span-1",
+								children: "Cost"
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "col-span-2",
+								children: "Started"
+							})
+						]
+					}), I.map((e) => /* @__PURE__ */ y(x, {
+						to: l(`executions/${e.id}`),
+						children: /* @__PURE__ */ y(o, {
+							className: "hover:border-primary/50 transition-colors cursor-pointer",
+							children: /* @__PURE__ */ y(s, {
+								className: "py-3",
+								children: /* @__PURE__ */ b("div", {
+									className: "grid grid-cols-12 gap-4 items-center",
+									children: [
+										/* @__PURE__ */ y("div", {
+											className: "col-span-2",
+											children: /* @__PURE__ */ y(F, { status: e.status })
+										}),
+										/* @__PURE__ */ b("div", {
+											className: "col-span-3",
+											children: [/* @__PURE__ */ y("p", {
+												className: "font-medium truncate",
+												children: e.appId ?? "—"
+											}), /* @__PURE__ */ y("p", {
+												className: "text-sm text-text-secondary truncate",
+												children: e.agentId ?? "—"
+											})]
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "col-span-2",
+											children: /* @__PURE__ */ b("div", {
+												className: "flex items-center gap-1",
+												children: [/* @__PURE__ */ y(w, {
+													size: 14,
+													className: "text-text-secondary"
+												}), /* @__PURE__ */ y("span", { children: n(e.duration) })]
+											})
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "col-span-2",
+											children: /* @__PURE__ */ b("div", {
+												className: "flex items-center gap-1",
+												children: [/* @__PURE__ */ y(j, {
+													size: 14,
+													className: "text-text-secondary"
+												}), /* @__PURE__ */ y("span", { children: r(e.tokensUsed) })]
+											})
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "col-span-1",
+											children: /* @__PURE__ */ b("div", {
+												className: "flex items-center gap-1",
+												children: [/* @__PURE__ */ y(T, {
+													size: 14,
+													className: "text-text-secondary"
+												}), /* @__PURE__ */ y("span", { children: t(e.cost) })]
+											})
+										}),
+										/* @__PURE__ */ y("div", {
+											className: "col-span-2 text-sm text-text-secondary",
+											children: i(e.createdAt)
+										})
+									]
+								})
+							})
+						})
+					}, e.id))]
+				}) : /* @__PURE__ */ y(u, {
+					illustration: "empty-search",
+					title: "No executions found",
+					description: E.length > 0 || h ? "No executions match your filters. Try adjusting your search." : "Executions will appear here when agents process requests."
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { I as ExecutionsPage };
+
+//# sourceMappingURL=ExecutionsPage.js.map