@contractspec/example.agent-console 1.46.1 → 1.48.0

package/dist/ui/AgentDashboard.js

@@ -0,0 +1,420 @@
+'use client';
+
+import { useRunList } from "./hooks/useRunList.js";
+import { RunListView } from "./views/RunListView.js";
+import { ToolRegistryView } from "./views/ToolRegistryView.js";
+import { useAgentList } from "./hooks/useAgentList.js";
+import { useAgentMutations } from "./hooks/useAgentMutations.js";
+import { CreateAgentModal } from "./modals/CreateAgentModal.js";
+import { AgentActionsModal } from "./modals/AgentActionsModal.js";
+import { useCallback, useMemo, useState } from "react";
+import { Button, StatCard, StatCardGroup } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/AgentDashboard.tsx
+/**
+* Agent Console Dashboard
+*
+* Fully integrated with ContractSpec example handlers,
+* design-system components, and command mutations.
+*
+* Commands wired:
+* - CreateAgentCommand -> Create Agent button + modal
+* - UpdateAgentCommand -> Status changes via modal
+* - ExecuteAgentCommand -> Execute agent via modal
+*/
+function AgentDashboard() {
+	const [activeTab, setActiveTab] = useState("runs");
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const [selectedAgent, setSelectedAgent] = useState(null);
+	const [isAgentActionsOpen, setIsAgentActionsOpen] = useState(false);
+	const { metrics, refetch: refetchRuns } = useRunList();
+	const { refetch: refetchAgents } = useAgentList();
+	const mutations = useAgentMutations({ onSuccess: () => {
+		refetchAgents();
+		refetchRuns();
+	} });
+	const handleAgentClick = useCallback((agent) => {
+		setSelectedAgent(agent);
+		setIsAgentActionsOpen(true);
+	}, []);
+	const tabs = [
+		{
+			id: "runs",
+			label: "Runs",
+			icon: "▶"
+		},
+		{
+			id: "agents",
+			label: "Agents",
+			icon: "🤖"
+		},
+		{
+			id: "tools",
+			label: "Tools",
+			icon: "🔧"
+		},
+		{
+			id: "metrics",
+			label: "Metrics",
+			icon: "📊"
+		}
+	];
+	const summaryStats = useMemo(() => {
+		if (!metrics) return [
+			{
+				label: "Total Runs",
+				value: "-",
+				hint: "Loading..."
+			},
+			{
+				label: "Success Rate",
+				value: "-",
+				hint: ""
+			},
+			{
+				label: "Total Tokens",
+				value: "-",
+				hint: ""
+			},
+			{
+				label: "Total Cost",
+				value: "-",
+				hint: ""
+			}
+		];
+		return [
+			{
+				label: "Total Runs",
+				value: metrics.totalRuns.toLocaleString(),
+				hint: `${(metrics.successRate * 100).toFixed(0)}% success`
+			},
+			{
+				label: "Success Rate",
+				value: `${(metrics.successRate * 100).toFixed(0)}%`,
+				hint: "of all runs"
+			},
+			{
+				label: "Total Tokens",
+				value: metrics.totalTokens >= 1e6 ? `${(metrics.totalTokens / 1e6).toFixed(1)}M` : `${(metrics.totalTokens / 1e3).toFixed(0)}K`,
+				hint: "This period"
+			},
+			{
+				label: "Total Cost",
+				value: `$${metrics.totalCostUsd.toFixed(2)}`,
+				hint: "This period"
+			}
+		];
+	}, [metrics]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "AI Agent Console"
+				}), /* @__PURE__ */ jsxs(Button, {
+					onPress: () => setIsCreateModalOpen(true),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mr-2",
+						children: "+"
+					}), " New Agent"]
+				})]
+			}),
+			/* @__PURE__ */ jsx(StatCardGroup, { children: summaryStats.map((stat, i) => /* @__PURE__ */ jsx(StatCard, {
+				label: stat.label,
+				value: stat.value,
+				hint: stat.hint
+			}, i)) }),
+			/* @__PURE__ */ jsx("nav", {
+				className: "bg-muted flex gap-1 rounded-lg p-1",
+				role: "tablist",
+				children: tabs.map((tab) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "tab",
+					"aria-selected": activeTab === tab.id,
+					onClick: () => setActiveTab(tab.id),
+					className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+					children: [/* @__PURE__ */ jsx("span", { children: tab.icon }), tab.label]
+				}, tab.id))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-h-[400px]",
+				role: "tabpanel",
+				children: [
+					activeTab === "runs" && /* @__PURE__ */ jsx(RunListView, {}),
+					activeTab === "agents" && /* @__PURE__ */ jsx(AgentListViewWithActions, { onAgentClick: handleAgentClick }),
+					activeTab === "tools" && /* @__PURE__ */ jsx(ToolRegistryView, {}),
+					activeTab === "metrics" && /* @__PURE__ */ jsx(MetricsView, { metrics })
+				]
+			}),
+			/* @__PURE__ */ jsx(CreateAgentModal, {
+				isOpen: isCreateModalOpen,
+				onClose: () => setIsCreateModalOpen(false),
+				onSubmit: async (input) => {
+					await mutations.createAgent(input);
+				},
+				isLoading: mutations.createState.loading
+			}),
+			/* @__PURE__ */ jsx(AgentActionsModal, {
+				isOpen: isAgentActionsOpen,
+				agent: selectedAgent,
+				onClose: () => {
+					setIsAgentActionsOpen(false);
+					setSelectedAgent(null);
+				},
+				onActivate: async (agentId) => {
+					await mutations.activateAgent(agentId);
+				},
+				onPause: async (agentId) => {
+					await mutations.pauseAgent(agentId);
+				},
+				onArchive: async (agentId) => {
+					await mutations.archiveAgent(agentId);
+				},
+				onExecute: async (agentId, message) => {
+					await mutations.executeAgent({
+						agentId,
+						message
+					});
+				},
+				isLoading: mutations.isLoading
+			})
+		]
+	});
+}
+/**
+* Agent List View with click handler
+*/
+function AgentListViewWithActions({ onAgentClick }) {
+	const { data, loading, error, stats, refetch } = useAgentList();
+	if (loading && !data) return /* @__PURE__ */ jsx("div", {
+		className: "text-muted-foreground flex h-64 items-center justify-center",
+		children: "Loading agents..."
+	});
+	if (error) return /* @__PURE__ */ jsxs("div", {
+		className: "text-destructive flex h-64 flex-col items-center justify-center",
+		children: [/* @__PURE__ */ jsxs("p", { children: ["Failed to load agents: ", error.message] }), /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			onPress: refetch,
+			className: "mt-2",
+			children: "Retry"
+		})]
+	});
+	if (!data?.items.length) return /* @__PURE__ */ jsxs("div", {
+		className: "text-muted-foreground flex h-64 flex-col items-center justify-center",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-lg font-medium",
+			children: "No agents yet"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			children: "Create your first AI agent to get started."
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [stats && /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-4 text-sm",
+			children: [
+				/* @__PURE__ */ jsxs("span", { children: ["Total: ", stats.total] }),
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-green-600",
+					children: ["Active: ", stats.active]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-yellow-600",
+					children: ["Paused: ", stats.paused]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-blue-600",
+					children: ["Draft: ", stats.draft]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+			children: data.items.map((agent) => /* @__PURE__ */ jsx(AgentCard, {
+				agent,
+				onClick: () => onAgentClick(agent)
+			}, agent.id))
+		})]
+	});
+}
+/**
+* Agent Card Component
+*/
+function AgentCard({ agent, onClick }) {
+	return /* @__PURE__ */ jsxs("div", {
+		onClick,
+		className: "border-border bg-card cursor-pointer rounded-xl border p-4 transition-all hover:shadow-md",
+		role: "button",
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") onClick();
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "truncate font-semibold",
+						children: agent.name
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground text-sm",
+						children: [
+							agent.modelProvider,
+							" / ",
+							agent.modelName
+						]
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					className: `rounded-full px-2 py-0.5 text-xs font-medium ${{
+						ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+						DRAFT: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+						PAUSED: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+						ARCHIVED: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+					}[agent.status]}`,
+					children: agent.status
+				})]
+			}),
+			agent.description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground mt-2 line-clamp-2 text-sm",
+				children: agent.description
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs",
+					children: agent.modelName
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					onPress: onClick,
+					children: "Actions"
+				})]
+			})
+		]
+	});
+}
+/**
+* Metrics View - Shows usage analytics
+*/
+function MetricsView({ metrics }) {
+	if (!metrics) return /* @__PURE__ */ jsx("div", {
+		className: "text-muted-foreground flex h-64 items-center justify-center",
+		children: "Loading metrics..."
+	});
+	const completedRuns = Math.round(metrics.totalRuns * metrics.successRate);
+	const failedRuns = metrics.totalRuns - completedRuns;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-lg font-semibold",
+				children: "Usage Analytics"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-6 md:grid-cols-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "border-border bg-card rounded-xl border p-4",
+					children: [/* @__PURE__ */ jsx("h4", {
+						className: "font-medium",
+						children: "Run Outcomes"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "mt-4 space-y-3",
+						children: [/* @__PURE__ */ jsx(ProgressBar, {
+							label: "Completed",
+							value: completedRuns,
+							total: metrics.totalRuns,
+							color: "bg-green-500"
+						}), /* @__PURE__ */ jsx(ProgressBar, {
+							label: "Failed",
+							value: failedRuns,
+							total: metrics.totalRuns,
+							color: "bg-red-500"
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "border-border bg-card rounded-xl border p-4",
+					children: [/* @__PURE__ */ jsx("h4", {
+						className: "font-medium",
+						children: "Performance"
+					}), /* @__PURE__ */ jsxs("dl", {
+						className: "mt-4 grid grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+							className: "text-muted-foreground text-sm",
+							children: "Avg Duration"
+						}), /* @__PURE__ */ jsxs("dd", {
+							className: "text-xl font-semibold",
+							children: [(metrics.averageDurationMs / 1e3).toFixed(1), "s"]
+						})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+							className: "text-muted-foreground text-sm",
+							children: "Success Rate"
+						}), /* @__PURE__ */ jsxs("dd", {
+							className: "text-xl font-semibold",
+							children: [(metrics.successRate * 100).toFixed(0), "%"]
+						})] })]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-border bg-card rounded-xl border p-4",
+				children: [/* @__PURE__ */ jsx("h4", {
+					className: "font-medium",
+					children: "Key Metrics"
+				}), /* @__PURE__ */ jsxs("dl", {
+					className: "mt-4 grid gap-4 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+							className: "text-muted-foreground text-sm",
+							children: "Total Runs"
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "text-2xl font-semibold",
+							children: metrics.totalRuns.toLocaleString()
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+							className: "text-muted-foreground text-sm",
+							children: "Total Tokens"
+						}), /* @__PURE__ */ jsxs("dd", {
+							className: "text-2xl font-semibold",
+							children: [(metrics.totalTokens / 1e3).toFixed(0), "K"]
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+							className: "text-muted-foreground text-sm",
+							children: "Cost per Run"
+						}), /* @__PURE__ */ jsxs("dd", {
+							className: "text-2xl font-semibold",
+							children: ["$", metrics.totalRuns > 0 ? (metrics.totalCostUsd / metrics.totalRuns).toFixed(4) : "0"]
+						})] })
+					]
+				})]
+			})
+		]
+	});
+}
+function ProgressBar({ label, value, total, color }) {
+	const pct = total > 0 ? value / total * 100 : 0;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex justify-between text-sm",
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground",
+			children: [
+				value,
+				" (",
+				pct.toFixed(0),
+				"%)"
+			]
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "bg-muted mt-1 h-2 overflow-hidden rounded-full",
+		children: /* @__PURE__ */ jsx("div", {
+			className: `h-full ${color}`,
+			style: { width: `${pct}%` }
+		})
+	})] });
+}
+
+//#endregion
+export { AgentDashboard };
+//# sourceMappingURL=AgentDashboard.js.map

package/dist/ui/AgentDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentDashboard.js","names":[],"sources":["../../src/ui/AgentDashboard.tsx"],"sourcesContent":["'use client';\n\n/**\n * Agent Console Dashboard\n *\n * Fully integrated with ContractSpec example handlers,\n * design-system components, and command mutations.\n *\n * Commands wired:\n * - CreateAgentCommand -> Create Agent button + modal\n * - UpdateAgentCommand -> Status changes via modal\n * - ExecuteAgentCommand -> Execute agent via modal\n */\nimport { useState, useMemo, useCallback } from 'react';\nimport {\n  StatCard,\n  StatCardGroup,\n  Button,\n} from '@contractspec/lib.design-system';\n// import { AgentListView } from './views/AgentListView';\nimport { RunListView } from './views/RunListView';\nimport { ToolRegistryView } from './views/ToolRegistryView';\nimport { useRunList, type RunMetrics } from './hooks/useRunList';\nimport { useAgentList, type Agent } from './hooks/useAgentList';\nimport { useAgentMutations } from './hooks/useAgentMutations';\nimport { CreateAgentModal } from './modals/CreateAgentModal';\nimport { AgentActionsModal } from './modals/AgentActionsModal';\n\ntype Tab = 'runs' | 'agents' | 'tools' | 'metrics';\n\nexport function AgentDashboard() {\n  const [activeTab, setActiveTab] = useState<Tab>('runs');\n  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);\n  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);\n  const [isAgentActionsOpen, setIsAgentActionsOpen] = useState(false);\n\n  const { metrics, refetch: refetchRuns } = useRunList();\n  const { refetch: refetchAgents } = useAgentList();\n\n  const mutations = useAgentMutations({\n    onSuccess: () => {\n      refetchAgents();\n      refetchRuns();\n    },\n  });\n\n  const handleAgentClick = useCallback((agent: Agent) => {\n    setSelectedAgent(agent);\n    setIsAgentActionsOpen(true);\n  }, []);\n\n  const tabs: { id: Tab; label: string; icon: string }[] = [\n    { id: 'runs', label: 'Runs', icon: '▶' },\n    { id: 'agents', label: 'Agents', icon: '🤖' },\n    { id: 'tools', label: 'Tools', icon: '🔧' },\n    { id: 'metrics', label: 'Metrics', icon: '📊' },\n  ];\n\n  // Compute summary stats from metrics\n  const summaryStats = useMemo(() => {\n    if (!metrics) {\n      return [\n        { label: 'Total Runs', value: '-', hint: 'Loading...' },\n        { label: 'Success Rate', value: '-', hint: '' },\n        { label: 'Total Tokens', value: '-', hint: '' },\n        { label: 'Total Cost', value: '-', hint: '' },\n      ];\n    }\n    return [\n      {\n        label: 'Total Runs',\n        value: metrics.totalRuns.toLocaleString(),\n        hint: `${(metrics.successRate * 100).toFixed(0)}% success`,\n      },\n      {\n        label: 'Success Rate',\n        value: `${(metrics.successRate * 100).toFixed(0)}%`,\n        hint: 'of all runs',\n      },\n      {\n        label: 'Total Tokens',\n        value:\n          metrics.totalTokens >= 1000000\n            ? `${(metrics.totalTokens / 1000000).toFixed(1)}M`\n            : `${(metrics.totalTokens / 1000).toFixed(0)}K`,\n        hint: 'This period',\n      },\n      {\n        label: 'Total Cost',\n        value: `$${metrics.totalCostUsd.toFixed(2)}`,\n        hint: 'This period',\n      },\n    ];\n  }, [metrics]);\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-2xl font-bold\">AI Agent Console</h2>\n        <Button onPress={() => setIsCreateModalOpen(true)}>\n          <span className=\"mr-2\">+</span> New Agent\n        </Button>\n      </div>\n\n      {/* Summary Stats Row */}\n      <StatCardGroup>\n        {summaryStats.map((stat, i) => (\n          <StatCard\n            key={i}\n            label={stat.label}\n            value={stat.value}\n            hint={stat.hint}\n          />\n        ))}\n      </StatCardGroup>\n\n      {/* Navigation Tabs */}\n      <nav className=\"bg-muted flex gap-1 rounded-lg p-1\" role=\"tablist\">\n        {tabs.map((tab) => (\n          <button\n            key={tab.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={activeTab === tab.id}\n            onClick={() => setActiveTab(tab.id)}\n            className={`flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${\n              activeTab === tab.id\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            <span>{tab.icon}</span>\n            {tab.label}\n          </button>\n        ))}\n      </nav>\n\n      {/* Tab Content */}\n      <div className=\"min-h-[400px]\" role=\"tabpanel\">\n        {activeTab === 'runs' && <RunListView />}\n        {activeTab === 'agents' && (\n          <AgentListViewWithActions onAgentClick={handleAgentClick} />\n        )}\n        {activeTab === 'tools' && <ToolRegistryView />}\n        {activeTab === 'metrics' && <MetricsView metrics={metrics} />}\n      </div>\n\n      {/* Create Agent Modal */}\n      <CreateAgentModal\n        isOpen={isCreateModalOpen}\n        onClose={() => setIsCreateModalOpen(false)}\n        onSubmit={async (input) => {\n          await mutations.createAgent(input);\n        }}\n        isLoading={mutations.createState.loading}\n      />\n\n      {/* Agent Actions Modal */}\n      <AgentActionsModal\n        isOpen={isAgentActionsOpen}\n        agent={selectedAgent}\n        onClose={() => {\n          setIsAgentActionsOpen(false);\n          setSelectedAgent(null);\n        }}\n        onActivate={async (agentId) => {\n          await mutations.activateAgent(agentId);\n        }}\n        onPause={async (agentId) => {\n          await mutations.pauseAgent(agentId);\n        }}\n        onArchive={async (agentId) => {\n          await mutations.archiveAgent(agentId);\n        }}\n        onExecute={async (agentId, message) => {\n          await mutations.executeAgent({ agentId, message });\n        }}\n        isLoading={mutations.isLoading}\n      />\n    </div>\n  );\n}\n\n/**\n * Agent List View with click handler\n */\nfunction AgentListViewWithActions({\n  onAgentClick,\n}: {\n  onAgentClick: (agent: Agent) => void;\n}) {\n  const { data, loading, error, stats, refetch } = useAgentList();\n\n  if (loading && !data) {\n    return (\n      <div className=\"text-muted-foreground flex h-64 items-center justify-center\">\n        Loading agents...\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"text-destructive flex h-64 flex-col items-center justify-center\">\n        <p>Failed to load agents: {error.message}</p>\n        <Button variant=\"outline\" onPress={refetch} className=\"mt-2\">\n          Retry\n        </Button>\n      </div>\n    );\n  }\n\n  if (!data?.items.length) {\n    return (\n      <div className=\"text-muted-foreground flex h-64 flex-col items-center justify-center\">\n        <p className=\"text-lg font-medium\">No agents yet</p>\n        <p className=\"text-sm\">Create your first AI agent to get started.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Stats */}\n      {stats && (\n        <div className=\"flex gap-4 text-sm\">\n          <span>Total: {stats.total}</span>\n          <span className=\"text-green-600\">Active: {stats.active}</span>\n          <span className=\"text-yellow-600\">Paused: {stats.paused}</span>\n          <span className=\"text-blue-600\">Draft: {stats.draft}</span>\n        </div>\n      )}\n\n      {/* Agent Grid */}\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        {data.items.map((agent) => (\n          <AgentCard\n            key={agent.id}\n            agent={agent}\n            onClick={() => onAgentClick(agent)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Agent Card Component\n */\nfunction AgentCard({ agent, onClick }: { agent: Agent; onClick: () => void }) {\n  const statusColors: Record<string, string> = {\n    ACTIVE:\n      'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',\n    DRAFT: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',\n    PAUSED:\n      'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',\n    ARCHIVED: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',\n  };\n\n  return (\n    <div\n      onClick={onClick}\n      className=\"border-border bg-card cursor-pointer rounded-xl border p-4 transition-all hover:shadow-md\"\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') onClick();\n      }}\n    >\n      <div className=\"flex items-start justify-between\">\n        <div className=\"min-w-0 flex-1\">\n          <h3 className=\"truncate font-semibold\">{agent.name}</h3>\n          <p className=\"text-muted-foreground text-sm\">\n            {agent.modelProvider} / {agent.modelName}\n          </p>\n        </div>\n        <span\n          className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[agent.status]}`}\n        >\n          {agent.status}\n        </span>\n      </div>\n      {agent.description && (\n        <p className=\"text-muted-foreground mt-2 line-clamp-2 text-sm\">\n          {agent.description}\n        </p>\n      )}\n      <div className=\"mt-3 flex items-center justify-between\">\n        <span className=\"text-muted-foreground text-xs\">{agent.modelName}</span>\n        <Button variant=\"ghost\" size=\"sm\" onPress={onClick}>\n          Actions\n        </Button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Metrics View - Shows usage analytics\n */\nfunction MetricsView({ metrics }: { metrics: RunMetrics | null }) {\n  if (!metrics) {\n    return (\n      <div className=\"text-muted-foreground flex h-64 items-center justify-center\">\n        Loading metrics...\n      </div>\n    );\n  }\n\n  // Calculate derived metrics\n  const completedRuns = Math.round(metrics.totalRuns * metrics.successRate);\n  const failedRuns = metrics.totalRuns - completedRuns;\n\n  return (\n    <div className=\"space-y-6\">\n      <h3 className=\"text-lg font-semibold\">Usage Analytics</h3>\n\n      <div className=\"grid gap-6 md:grid-cols-2\">\n        {/* Success/Failure breakdown */}\n        <div className=\"border-border bg-card rounded-xl border p-4\">\n          <h4 className=\"font-medium\">Run Outcomes</h4>\n          <div className=\"mt-4 space-y-3\">\n            <ProgressBar\n              label=\"Completed\"\n              value={completedRuns}\n              total={metrics.totalRuns}\n              color=\"bg-green-500\"\n            />\n            <ProgressBar\n              label=\"Failed\"\n              value={failedRuns}\n              total={metrics.totalRuns}\n              color=\"bg-red-500\"\n            />\n          </div>\n        </div>\n\n        {/* Key Stats */}\n        <div className=\"border-border bg-card rounded-xl border p-4\">\n          <h4 className=\"font-medium\">Performance</h4>\n          <dl className=\"mt-4 grid grid-cols-2 gap-4\">\n            <div>\n              <dt className=\"text-muted-foreground text-sm\">Avg Duration</dt>\n              <dd className=\"text-xl font-semibold\">\n                {(metrics.averageDurationMs / 1000).toFixed(1)}s\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-muted-foreground text-sm\">Success Rate</dt>\n              <dd className=\"text-xl font-semibold\">\n                {(metrics.successRate * 100).toFixed(0)}%\n              </dd>\n            </div>\n          </dl>\n        </div>\n      </div>\n\n      {/* Key Metrics */}\n      <div className=\"border-border bg-card rounded-xl border p-4\">\n        <h4 className=\"font-medium\">Key Metrics</h4>\n        <dl className=\"mt-4 grid gap-4 sm:grid-cols-3\">\n          <div>\n            <dt className=\"text-muted-foreground text-sm\">Total Runs</dt>\n            <dd className=\"text-2xl font-semibold\">\n              {metrics.totalRuns.toLocaleString()}\n            </dd>\n          </div>\n          <div>\n            <dt className=\"text-muted-foreground text-sm\">Total Tokens</dt>\n            <dd className=\"text-2xl font-semibold\">\n              {(metrics.totalTokens / 1000).toFixed(0)}K\n            </dd>\n          </div>\n          <div>\n            <dt className=\"text-muted-foreground text-sm\">Cost per Run</dt>\n            <dd className=\"text-2xl font-semibold\">\n              $\n              {metrics.totalRuns > 0\n                ? (metrics.totalCostUsd / metrics.totalRuns).toFixed(4)\n                : '0'}\n            </dd>\n          </div>\n        </dl>\n      </div>\n    </div>\n  );\n}\n\nfunction ProgressBar({\n  label,\n  value,\n  total,\n  color,\n}: {\n  label: string;\n  value: number;\n  total: number;\n  color: string;\n}) {\n  const pct = total > 0 ? (value / total) * 100 : 0;\n  return (\n    <div>\n      <div className=\"flex justify-between text-sm\">\n        <span>{label}</span>\n        <span className=\"text-muted-foreground\">\n          {value} ({pct.toFixed(0)}%)\n        </span>\n      </div>\n      <div className=\"bg-muted mt-1 h-2 overflow-hidden rounded-full\">\n        <div className={`h-full ${color}`} style={{ width: `${pct}%` }} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/AgentRunList.d.ts

@@ -0,0 +1,2 @@
+import { RunListView } from "./views/RunListView.js";
+export { RunListView as AgentRunList };

package/dist/ui/AgentRunList.js

@@ -0,0 +1,5 @@
+'use client';
+
+import { RunListView } from "./views/RunListView.js";
+
+export { RunListView as AgentRunList };

package/dist/ui/AgentToolRegistry.d.ts

@@ -0,0 +1,2 @@
+import { ToolRegistryView } from "./views/ToolRegistryView.js";
+export { ToolRegistryView as AgentToolRegistry };

package/dist/ui/AgentToolRegistry.js

@@ -0,0 +1,5 @@
+'use client';
+
+import { ToolRegistryView } from "./views/ToolRegistryView.js";
+
+export { ToolRegistryView as AgentToolRegistry };

package/dist/ui/hooks/index.d.ts

@@ -0,0 +1,6 @@
+import { CreateAgentInput, UpdateAgentInput } from "../../handlers/agent.handlers.js";
+import { UseAgentListOptions, useAgentList } from "./useAgentList.js";
+import { UseRunListOptions, useRunList } from "./useRunList.js";
+import { UseToolListOptions, useToolList } from "./useToolList.js";
+import { UseAgentMutationsOptions, useAgentMutations } from "./useAgentMutations.js";
+export { type CreateAgentInput, type UpdateAgentInput, type UseAgentListOptions, type UseAgentMutationsOptions, type UseRunListOptions, type UseToolListOptions, useAgentList, useAgentMutations, useRunList, useToolList };

package/dist/ui/hooks/index.js

@@ -0,0 +1,8 @@
+'use client';
+
+import { useRunList } from "./useRunList.js";
+import { useToolList } from "./useToolList.js";
+import { useAgentList } from "./useAgentList.js";
+import { useAgentMutations } from "./useAgentMutations.js";
+
+export { useAgentList, useAgentMutations, useRunList, useToolList };

package/dist/ui/hooks/useAgentList.d.ts

@@ -0,0 +1,28 @@
+import { Agent as Agent$1, ListAgentsOutput as ListAgentsOutput$1 } from "../../handlers/agent.handlers.js";
+
+//#region src/ui/hooks/useAgentList.d.ts
+type Agent = Agent$1;
+type ListAgentsOutput = ListAgentsOutput$1;
+interface UseAgentListOptions {
+  search?: string;
+  status?: 'DRAFT' | 'ACTIVE' | 'PAUSED' | 'ARCHIVED' | 'all';
+  limit?: number;
+}
+declare function useAgentList(options?: UseAgentListOptions): {
+  data: ListAgentsOutput$1 | null;
+  loading: boolean;
+  error: Error | null;
+  stats: {
+    total: number;
+    active: number;
+    paused: number;
+    draft: number;
+  } | null;
+  page: number;
+  refetch: () => Promise<void>;
+  nextPage: () => void;
+  prevPage: () => false | void;
+};
+//#endregion
+export { Agent, ListAgentsOutput, UseAgentListOptions, useAgentList };
+//# sourceMappingURL=useAgentList.d.ts.map

package/dist/ui/hooks/useAgentList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAgentList.d.ts","names":[],"sources":["../../../src/ui/hooks/useAgentList.ts"],"sourcesContent":[],"mappings":";;;KAcY,KAAA,GAAQ;KACR,gBAAA,GAAmB;AADnB,UAGK,mBAAA,CAHe;EACpB,MAAA,CAAA,EAAA,MAAA;EAEK,MAAA,CAAA,EAAA,OAAA,GAAA,QAAmB,GAAA,QAAA,GAAA,UAAA,GAAA,KAAA;EAMpB,KAAA,CAAA,EAAA,MAAA;;iBAAA,YAAA,WAAsB"}

package/dist/ui/hooks/useAgentList.js

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useAgentList.ts
+/**
+* Hook for fetching and managing agent list data
+*
+* Uses runtime-local database-backed handlers.
+*/
+function useAgentList(options = {}) {
+	const { handlers, projectId } = useTemplateRuntime();
+	const { agent } = handlers;
+	const [data, setData] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [page, setPage] = useState(1);
+	const fetchData = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			setData(await agent.listAgents({
+				projectId,
+				search: options.search,
+				status: options.status === "all" ? void 0 : options.status,
+				limit: options.limit ?? 20,
+				offset: (page - 1) * (options.limit ?? 20)
+			}));
+		} catch (err) {
+			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Unknown error"));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		agent,
+		projectId,
+		options.search,
+		options.status,
+		options.limit,
+		page
+	]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+	return {
+		data,
+		loading,
+		error,
+		stats: useMemo(() => {
+			if (!data) return null;
+			return {
+				total: data.total,
+				active: data.items.filter((a) => a.status === "ACTIVE").length,
+				paused: data.items.filter((a) => a.status === "PAUSED").length,
+				draft: data.items.filter((a) => a.status === "DRAFT").length
+			};
+		}, [data]),
+		page,
+		refetch: fetchData,
+		nextPage: () => setPage((p) => p + 1),
+		prevPage: () => page > 1 && setPage((p) => p - 1)
+	};
+}
+
+//#endregion
+export { useAgentList };
+//# sourceMappingURL=useAgentList.js.map

package/dist/ui/hooks/useAgentList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAgentList.js","names":[],"sources":["../../../src/ui/hooks/useAgentList.ts"],"sourcesContent":["/**\n * Hook for fetching and managing agent list data\n *\n * Uses runtime-local database-backed handlers.\n */\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\nimport type {\n  Agent as RuntimeAgent,\n  ListAgentsOutput as RuntimeListAgentsOutput,\n} from '../../handlers/agent.handlers';\nimport type { AgentHandlers } from '../../handlers/agent.handlers';\n\n// Re-export types for convenience\nexport type Agent = RuntimeAgent;\nexport type ListAgentsOutput = RuntimeListAgentsOutput;\n\nexport interface UseAgentListOptions {\n  search?: string;\n  status?: 'DRAFT' | 'ACTIVE' | 'PAUSED' | 'ARCHIVED' | 'all';\n  limit?: number;\n}\n\nexport function useAgentList(options: UseAgentListOptions = {}) {\n  const { handlers, projectId } = useTemplateRuntime<{\n    agent: AgentHandlers;\n  }>();\n  const { agent } = handlers;\n\n  const [data, setData] = useState<ListAgentsOutput | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const [page, setPage] = useState(1);\n\n  const fetchData = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const result = await agent.listAgents({\n        projectId,\n        search: options.search,\n        status: options.status === 'all' ? undefined : options.status,\n        limit: options.limit ?? 20,\n        offset: (page - 1) * (options.limit ?? 20),\n      });\n      setData(result);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Unknown error'));\n    } finally {\n      setLoading(false);\n    }\n  }, [agent, projectId, options.search, options.status, options.limit, page]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  // Calculate stats\n  const stats = useMemo(() => {\n    if (!data) return null;\n    return {\n      total: data.total,\n      active: data.items.filter((a) => a.status === 'ACTIVE').length,\n      paused: data.items.filter((a) => a.status === 'PAUSED').length,\n      draft: data.items.filter((a) => a.status === 'DRAFT').length,\n    };\n  }, [data]);\n\n  return {\n    data,\n    loading,\n    error,\n    stats,\n    page,\n    refetch: fetchData,\n    nextPage: () => setPage((p) => p + 1),\n    prevPage: () => page > 1 && setPage((p) => p - 1),\n  };\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,aAAa,UAA+B,EAAE,EAAE;CAC9D,MAAM,EAAE,UAAU,cAAc,oBAE5B;CACJ,MAAM,EAAE,UAAU;CAElB,MAAM,CAAC,MAAM,WAAW,SAAkC,KAAK;CAC/D,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,MAAM,WAAW,SAAS,EAAE;CAEnC,MAAM,YAAY,YAAY,YAAY;AACxC,aAAW,KAAK;AAChB,WAAS,KAAK;AAEd,MAAI;AAQF,WAPe,MAAM,MAAM,WAAW;IACpC;IACA,QAAQ,QAAQ;IAChB,QAAQ,QAAQ,WAAW,QAAQ,SAAY,QAAQ;IACvD,OAAO,QAAQ,SAAS;IACxB,SAAS,OAAO,MAAM,QAAQ,SAAS;IACxC,CAAC,CACa;WACR,KAAK;AACZ,YAAS,eAAe,QAAQ,sBAAM,IAAI,MAAM,gBAAgB,CAAC;YACzD;AACR,cAAW,MAAM;;IAElB;EAAC;EAAO;EAAW,QAAQ;EAAQ,QAAQ;EAAQ,QAAQ;EAAO;EAAK,CAAC;AAE3E,iBAAgB;AACd,aAAW;IACV,CAAC,UAAU,CAAC;AAaf,QAAO;EACL;EACA;EACA;EACA,OAdY,cAAc;AAC1B,OAAI,CAAC,KAAM,QAAO;AAClB,UAAO;IACL,OAAO,KAAK;IACZ,QAAQ,KAAK,MAAM,QAAQ,MAAM,EAAE,WAAW,SAAS,CAAC;IACxD,QAAQ,KAAK,MAAM,QAAQ,MAAM,EAAE,WAAW,SAAS,CAAC;IACxD,OAAO,KAAK,MAAM,QAAQ,MAAM,EAAE,WAAW,QAAQ,CAAC;IACvD;KACA,CAAC,KAAK,CAAC;EAOR;EACA,SAAS;EACT,gBAAgB,SAAS,MAAM,IAAI,EAAE;EACrC,gBAAgB,OAAO,KAAK,SAAS,MAAM,IAAI,EAAE;EAClD"}

package/dist/ui/hooks/useAgentMutations.d.ts

@@ -0,0 +1,29 @@
+import { Agent, CreateAgentInput, UpdateAgentInput } from "../../handlers/agent.handlers.js";
+
+//#region src/ui/hooks/useAgentMutations.d.ts
+interface MutationState<T> {
+  loading: boolean;
+  error: Error | null;
+  data: T | null;
+}
+interface UseAgentMutationsOptions {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+declare function useAgentMutations(options?: UseAgentMutationsOptions): {
+  createAgent: (input: CreateAgentInput) => Promise<Agent | null>;
+  updateAgent: (input: UpdateAgentInput) => Promise<Agent | null>;
+  activateAgent: (agentId: string) => Promise<Agent | null>;
+  pauseAgent: (agentId: string) => Promise<Agent | null>;
+  archiveAgent: (agentId: string) => Promise<Agent | null>;
+  executeAgent: (input: {
+    agentId: string;
+    message: string;
+  }) => Promise<null>;
+  createState: MutationState<Agent>;
+  updateState: MutationState<Agent>;
+  isLoading: boolean;
+};
+//#endregion
+export { type Agent, type CreateAgentInput, MutationState, type UpdateAgentInput, UseAgentMutationsOptions, useAgentMutations };
+//# sourceMappingURL=useAgentMutations.d.ts.map

package/dist/ui/hooks/useAgentMutations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAgentMutations.d.ts","names":[],"sources":["../../../src/ui/hooks/useAgentMutations.ts"],"sourcesContent":[],"mappings":";;;UAgBiB;;EAAA,KAAA,EAER,KAFQ,GAAA,IAAa;EAMb,IAAA,EAHT,CAGS,GAAA,IAAA;AAKjB;AAA2C,UAL1B,wBAAA,CAK0B;EAsBzB,SAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAA2B,OAAA,CAAA,EAAA,CAAA,KAAA,EAzBzB,KAyByB,EAAA,GAAA,IAAA;;AAyB3B,iBA/CF,iBAAA,CA+CE,OAAA,CAAA,EA/CyB,wBA+CzB,CAAA,EAAA;EAA2B,WAAA,EAAA,CAAA,KAAA,EAzB3B,gBAyB2B,EAAA,GAzBR,OAyBQ,CAzBA,KAyBA,GAAA,IAAA,CAAA;EAAR,WAAA,EAAA,CAAA,KAAA,EAAnB,gBAAmB,EAAA,GAAA,OAAA,CAAQ,KAAR,GAAA,IAAA,CAAA;EAsBA,aAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,GAAR,OAAQ,CAAA,KAAA,GAAA,IAAA,CAAA;EAAR,UAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,GAUA,OAVA,CAUQ,KAVR,GAAA,IAAA,CAAA;EAUQ,YAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,GAUR,OAVQ,CAUA,KAVA,GAAA,IAAA,CAAA;EAAR,YAAA,EAAA,CAAA,KAAA,EAAA;IAUQ,OAAA,EAAA,MAAA;IAAR,OAAA,EAAA,MAAA;EAW4B,CAAA,EAAA,GAAA,OAAA,CAAA,IAAA,CAAA"}