@contractspec/example.agent-console 1.46.0 → 1.47.0

package/dist/ui/views/RunListView.js

@@ -0,0 +1,165 @@
+'use client';
+
+import { useRunList } from "../hooks/useRunList.js";
+import { EmptyState, ErrorState, LoaderBlock, StatCard, StatCardGroup, StatusChip } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/views/RunListView.tsx
+/**
+* Run List View - Shows agent execution runs with stats
+*/
+function getStatusTone(status) {
+	switch (status) {
+		case "COMPLETED": return "success";
+		case "RUNNING": return "warning";
+		case "QUEUED": return "neutral";
+		case "FAILED":
+		case "CANCELLED": return "danger";
+		default: return "neutral";
+	}
+}
+function formatDuration(ms) {
+	if (!ms) return "-";
+	if (ms < 1e3) return `${ms}ms`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+	return `${(ms / 6e4).toFixed(1)}m`;
+}
+function formatTokens(tokens) {
+	if (tokens < 1e3) return tokens.toString();
+	if (tokens < 1e6) return `${(tokens / 1e3).toFixed(1)}K`;
+	return `${(tokens / 1e6).toFixed(2)}M`;
+}
+function formatCost(cost) {
+	if (!cost) return "-";
+	return `$${cost.toFixed(4)}`;
+}
+function RunListView({ agentId, onRunClick }) {
+	const { data, metrics, loading, error, refetch } = useRunList({ agentId });
+	if (loading && !data) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading runs..." });
+	if (error) return /* @__PURE__ */ jsx(ErrorState, {
+		title: "Failed to load runs",
+		description: error.message,
+		onRetry: refetch,
+		retryLabel: "Retry"
+	});
+	if (!data?.items.length) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "No runs yet",
+		description: "Execute an agent to see run history here."
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			metrics && /* @__PURE__ */ jsxs(StatCardGroup, { children: [
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Total Runs",
+					value: metrics.totalRuns
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Success Rate",
+					value: `${(metrics.successRate * 100).toFixed(1)}%`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Total Tokens",
+					value: formatTokens(metrics.totalTokens)
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Total Cost",
+					value: `$${metrics.totalCostUsd.toFixed(2)}`
+				})
+			] }),
+			/* @__PURE__ */ jsx("div", {
+				className: "border-border rounded-lg border",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "w-full",
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "border-border bg-muted/30 border-b",
+						children: /* @__PURE__ */ jsxs("tr", { children: [
+							/* @__PURE__ */ jsx("th", {
+								className: "text-muted-foreground px-4 py-3 text-left text-sm font-medium",
+								children: "Run"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "text-muted-foreground px-4 py-3 text-left text-sm font-medium",
+								children: "Agent"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "text-muted-foreground px-4 py-3 text-left text-sm font-medium",
+								children: "Status"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "text-muted-foreground px-4 py-3 text-right text-sm font-medium",
+								children: "Tokens"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "text-muted-foreground px-4 py-3 text-right text-sm font-medium",
+								children: "Duration"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "text-muted-foreground px-4 py-3 text-right text-sm font-medium",
+								children: "Cost"
+							})
+						] })
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: "divide-border divide-y",
+						children: data.items.map((run) => /* @__PURE__ */ jsxs("tr", {
+							className: "hover:bg-muted/50 cursor-pointer transition-colors",
+							onClick: () => onRunClick?.(run.id),
+							children: [
+								/* @__PURE__ */ jsxs("td", {
+									className: "px-4 py-3",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "font-mono text-sm",
+										children: run.id.slice(-8)
+									}), /* @__PURE__ */ jsx("div", {
+										className: "text-muted-foreground text-xs",
+										children: run.queuedAt.toLocaleString()
+									})]
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "px-4 py-3",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "font-medium",
+										children: run.agentName
+									})
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "px-4 py-3",
+									children: /* @__PURE__ */ jsx(StatusChip, {
+										tone: getStatusTone(run.status),
+										label: run.status
+									})
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "px-4 py-3 text-right font-mono text-sm",
+									children: formatTokens(run.totalTokens)
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "px-4 py-3 text-right font-mono text-sm",
+									children: formatDuration(run.durationMs)
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "px-4 py-3 text-right font-mono text-sm",
+									children: formatCost(run.estimatedCostUsd)
+								})
+							]
+						}, run.id))
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground text-center text-sm",
+				children: [
+					"Showing ",
+					data.items.length,
+					" of ",
+					data.total,
+					" runs"
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { RunListView };
+//# sourceMappingURL=RunListView.js.map

package/dist/ui/views/RunListView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunListView.js","names":[],"sources":["../../../src/ui/views/RunListView.tsx"],"sourcesContent":["'use client';\n\n/**\n * Run List View - Shows agent execution runs with stats\n */\nimport {\n  StatCard,\n  StatCardGroup,\n  StatusChip,\n  EmptyState,\n  LoaderBlock,\n  ErrorState,\n} from '@contractspec/lib.design-system';\nimport { useRunList, type Run } from '../hooks/useRunList';\n\ninterface RunListViewProps {\n  agentId?: string;\n  onRunClick?: (runId: string) => void;\n}\n\nfunction getStatusTone(\n  status: Run['status']\n): 'success' | 'warning' | 'neutral' | 'danger' {\n  switch (status) {\n    case 'COMPLETED':\n      return 'success';\n    case 'RUNNING':\n      return 'warning';\n    case 'QUEUED':\n      return 'neutral';\n    case 'FAILED':\n    case 'CANCELLED':\n      return 'danger';\n    default:\n      return 'neutral';\n  }\n}\n\nfunction formatDuration(ms?: number): string {\n  if (!ms) return '-';\n  if (ms < 1000) return `${ms}ms`;\n  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;\n  return `${(ms / 60000).toFixed(1)}m`;\n}\n\nfunction formatTokens(tokens: number): string {\n  if (tokens < 1000) return tokens.toString();\n  if (tokens < 1000000) return `${(tokens / 1000).toFixed(1)}K`;\n  return `${(tokens / 1000000).toFixed(2)}M`;\n}\n\nfunction formatCost(cost?: number): string {\n  if (!cost) return '-';\n  return `$${cost.toFixed(4)}`;\n}\n\nexport function RunListView({ agentId, onRunClick }: RunListViewProps) {\n  const { data, metrics, loading, error, refetch } = useRunList({ agentId });\n\n  if (loading && !data) {\n    return <LoaderBlock label=\"Loading runs...\" />;\n  }\n\n  if (error) {\n    return (\n      <ErrorState\n        title=\"Failed to load runs\"\n        description={error.message}\n        onRetry={refetch}\n        retryLabel=\"Retry\"\n      />\n    );\n  }\n\n  if (!data?.items.length) {\n    return (\n      <EmptyState\n        title=\"No runs yet\"\n        description=\"Execute an agent to see run history here.\"\n      />\n    );\n  }\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Metrics Stats */}\n      {metrics && (\n        <StatCardGroup>\n          <StatCard label=\"Total Runs\" value={metrics.totalRuns} />\n          <StatCard\n            label=\"Success Rate\"\n            value={`${(metrics.successRate * 100).toFixed(1)}%`}\n          />\n          <StatCard\n            label=\"Total Tokens\"\n            value={formatTokens(metrics.totalTokens)}\n          />\n          <StatCard\n            label=\"Total Cost\"\n            value={`$${metrics.totalCostUsd.toFixed(2)}`}\n          />\n        </StatCardGroup>\n      )}\n\n      {/* Run List */}\n      <div className=\"border-border rounded-lg border\">\n        <table className=\"w-full\">\n          <thead className=\"border-border bg-muted/30 border-b\">\n            <tr>\n              <th className=\"text-muted-foreground px-4 py-3 text-left text-sm font-medium\">\n                Run\n              </th>\n              <th className=\"text-muted-foreground px-4 py-3 text-left text-sm font-medium\">\n                Agent\n              </th>\n              <th className=\"text-muted-foreground px-4 py-3 text-left text-sm font-medium\">\n                Status\n              </th>\n              <th className=\"text-muted-foreground px-4 py-3 text-right text-sm font-medium\">\n                Tokens\n              </th>\n              <th className=\"text-muted-foreground px-4 py-3 text-right text-sm font-medium\">\n                Duration\n              </th>\n              <th className=\"text-muted-foreground px-4 py-3 text-right text-sm font-medium\">\n                Cost\n              </th>\n            </tr>\n          </thead>\n          <tbody className=\"divide-border divide-y\">\n            {data.items.map((run: Run) => (\n              <tr\n                key={run.id}\n                className=\"hover:bg-muted/50 cursor-pointer transition-colors\"\n                onClick={() => onRunClick?.(run.id)}\n              >\n                <td className=\"px-4 py-3\">\n                  <div className=\"font-mono text-sm\">{run.id.slice(-8)}</div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    {run.queuedAt.toLocaleString()}\n                  </div>\n                </td>\n                <td className=\"px-4 py-3\">\n                  <span className=\"font-medium\">{run.agentName}</span>\n                </td>\n                <td className=\"px-4 py-3\">\n                  <StatusChip\n                    tone={getStatusTone(run.status)}\n                    label={run.status}\n                  />\n                </td>\n                <td className=\"px-4 py-3 text-right font-mono text-sm\">\n                  {formatTokens(run.totalTokens)}\n                </td>\n                <td className=\"px-4 py-3 text-right font-mono text-sm\">\n                  {formatDuration(run.durationMs)}\n                </td>\n                <td className=\"px-4 py-3 text-right font-mono text-sm\">\n                  {formatCost(run.estimatedCostUsd)}\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"text-muted-foreground text-center text-sm\">\n        Showing {data.items.length} of {data.total} runs\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/views/ToolRegistryView.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/ui/views/ToolRegistryView.d.ts
+interface ToolRegistryViewProps {
+  onToolClick?: (toolId: string) => void;
+  onCreateTool?: () => void;
+}
+declare function ToolRegistryView({
+  onToolClick,
+  onCreateTool
+}: ToolRegistryViewProps): react_jsx_runtime2.JSX.Element;
+//#endregion
+export { ToolRegistryView };
+//# sourceMappingURL=ToolRegistryView.d.ts.map

package/dist/ui/views/ToolRegistryView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolRegistryView.d.ts","names":[],"sources":["../../../src/ui/views/ToolRegistryView.tsx"],"sourcesContent":[],"mappings":";;;UAiBU,qBAAA;;;AAkCc;AAHR,iBAAA,gBAAA,CAAgB;EAAA,WAAA;EAAA;AAAA,CAAA,EAG7B,qBAH6B,CAAA,EAGR,kBAAA,CAAA,GAAA,CAAA,OAHQ"}

package/dist/ui/views/ToolRegistryView.js

@@ -0,0 +1,97 @@
+'use client';
+
+import { useToolList } from "../hooks/useToolList.js";
+import { Button, EmptyState, EntityCard, ErrorState, LoaderBlock, StatCard, StatCardGroup, StatusChip } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/views/ToolRegistryView.tsx
+/**
+* Tool Registry View - Shows available tools organized by category
+*/
+const categoryIcons = {
+	RETRIEVAL: "🔍",
+	COMPUTATION: "🧮",
+	COMMUNICATION: "📧",
+	INTEGRATION: "🔗",
+	UTILITY: "🛠️",
+	CUSTOM: "⚙️"
+};
+function getStatusTone(status) {
+	switch (status) {
+		case "ACTIVE": return "success";
+		case "DRAFT": return "neutral";
+		case "DEPRECATED": return "warning";
+		case "DISABLED": return "danger";
+		default: return "neutral";
+	}
+}
+function ToolRegistryView({ onToolClick, onCreateTool }) {
+	const { data, loading, error, groupedByCategory, categoryStats, refetch } = useToolList();
+	if (loading && !data) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading tools..." });
+	if (error) return /* @__PURE__ */ jsx(ErrorState, {
+		title: "Failed to load tools",
+		description: error.message,
+		onRetry: refetch,
+		retryLabel: "Retry"
+	});
+	if (!data?.items.length) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "No tools registered",
+		description: "Create your first tool to extend agent capabilities.",
+		primaryAction: onCreateTool ? /* @__PURE__ */ jsx(Button, {
+			onPress: onCreateTool,
+			children: "Create Tool"
+		}) : void 0
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-8",
+		children: [/* @__PURE__ */ jsxs(StatCardGroup, { children: [/* @__PURE__ */ jsx(StatCard, {
+			label: "Total Tools",
+			value: data.total
+		}), categoryStats.slice(0, 3).map(({ category, count }) => /* @__PURE__ */ jsx(StatCard, {
+			label: `${categoryIcons[category] ?? ""} ${category}`,
+			value: count
+		}, category))] }), Object.entries(groupedByCategory).map(([category, tools]) => /* @__PURE__ */ jsxs("section", {
+			className: "space-y-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-2xl",
+						children: categoryIcons[category]
+					}),
+					/* @__PURE__ */ jsx("h3", {
+						className: "text-lg font-semibold",
+						children: category
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+						children: tools.length
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+				children: tools.map((tool) => /* @__PURE__ */ jsx(EntityCard, {
+					cardTitle: tool.name,
+					cardSubtitle: `v${tool.version}`,
+					meta: /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						children: tool.description
+					}),
+					chips: /* @__PURE__ */ jsx(StatusChip, {
+						tone: getStatusTone(tool.status),
+						label: tool.status
+					}),
+					footer: /* @__PURE__ */ jsx("code", {
+						className: "text-muted-foreground text-xs",
+						children: tool.name
+					}),
+					onClick: onToolClick ? () => onToolClick(tool.id) : void 0
+				}, tool.id))
+			})]
+		}, category))]
+	});
+}
+
+//#endregion
+export { ToolRegistryView };
+//# sourceMappingURL=ToolRegistryView.js.map

package/dist/ui/views/ToolRegistryView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolRegistryView.js","names":[],"sources":["../../../src/ui/views/ToolRegistryView.tsx"],"sourcesContent":["'use client';\n\n/**\n * Tool Registry View - Shows available tools organized by category\n */\nimport {\n  StatCard,\n  StatCardGroup,\n  StatusChip,\n  EntityCard,\n  EmptyState,\n  LoaderBlock,\n  ErrorState,\n  Button,\n} from '@contractspec/lib.design-system';\nimport { useToolList, type Tool } from '../hooks/useToolList';\n\ninterface ToolRegistryViewProps {\n  onToolClick?: (toolId: string) => void;\n  onCreateTool?: () => void;\n}\n\nconst categoryIcons: Record<string, string> = {\n  RETRIEVAL: '🔍',\n  COMPUTATION: '🧮',\n  COMMUNICATION: '📧',\n  INTEGRATION: '🔗',\n  UTILITY: '🛠️',\n  CUSTOM: '⚙️',\n};\n\nfunction getStatusTone(\n  status: Tool['status']\n): 'success' | 'warning' | 'neutral' | 'danger' {\n  switch (status) {\n    case 'ACTIVE':\n      return 'success';\n    case 'DRAFT':\n      return 'neutral';\n    case 'DEPRECATED':\n      return 'warning';\n    case 'DISABLED':\n      return 'danger';\n    default:\n      return 'neutral';\n  }\n}\n\nexport function ToolRegistryView({\n  onToolClick,\n  onCreateTool,\n}: ToolRegistryViewProps) {\n  const { data, loading, error, groupedByCategory, categoryStats, refetch } =\n    useToolList();\n\n  if (loading && !data) {\n    return <LoaderBlock label=\"Loading tools...\" />;\n  }\n\n  if (error) {\n    return (\n      <ErrorState\n        title=\"Failed to load tools\"\n        description={error.message}\n        onRetry={refetch}\n        retryLabel=\"Retry\"\n      />\n    );\n  }\n\n  if (!data?.items.length) {\n    return (\n      <EmptyState\n        title=\"No tools registered\"\n        description=\"Create your first tool to extend agent capabilities.\"\n        primaryAction={\n          onCreateTool ? (\n            <Button onPress={onCreateTool}>Create Tool</Button>\n          ) : undefined\n        }\n      />\n    );\n  }\n\n  return (\n    <div className=\"space-y-8\">\n      {/* Category Stats */}\n      <StatCardGroup>\n        <StatCard label=\"Total Tools\" value={data.total} />\n        {categoryStats.slice(0, 3).map(({ category, count }) => (\n          <StatCard\n            key={category}\n            label={`${categoryIcons[category] ?? ''} ${category}`}\n            value={count}\n          />\n        ))}\n      </StatCardGroup>\n\n      {/* Tools by Category */}\n      {Object.entries(groupedByCategory).map(([category, tools]) => (\n        <section key={category} className=\"space-y-4\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-2xl\">{categoryIcons[category]}</span>\n            <h3 className=\"text-lg font-semibold\">{category}</h3>\n            <span className=\"bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs\">\n              {(tools as Tool[]).length}\n            </span>\n          </div>\n\n          <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n            {(tools as Tool[]).map((tool) => (\n              <EntityCard\n                key={tool.id}\n                cardTitle={tool.name}\n                cardSubtitle={`v${tool.version}`}\n                meta={\n                  <p className=\"text-muted-foreground text-sm\">\n                    {tool.description}\n                  </p>\n                }\n                chips={\n                  <StatusChip\n                    tone={getStatusTone(tool.status)}\n                    label={tool.status}\n                  />\n                }\n                footer={\n                  <code className=\"text-muted-foreground text-xs\">\n                    {tool.name}\n                  </code>\n                }\n                onClick={onToolClick ? () => onToolClick(tool.id) : undefined}\n              />\n            ))}\n          </div>\n        </section>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,gBAAwC;CAC5C,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,SAAS;CACT,QAAQ;CACT;AAED,SAAS,cACP,QAC8C;AAC9C,SAAQ,QAAR;EACE,KAAK,SACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,KAAK,aACH,QAAO;EACT,KAAK,WACH,QAAO;EACT,QACE,QAAO;;;AAIb,SAAgB,iBAAiB,EAC/B,aACA,gBACwB;CACxB,MAAM,EAAE,MAAM,SAAS,OAAO,mBAAmB,eAAe,YAC9D,aAAa;AAEf,KAAI,WAAW,CAAC,KACd,QAAO,oBAAC,eAAY,OAAM,qBAAqB;AAGjD,KAAI,MACF,QACE,oBAAC;EACC,OAAM;EACN,aAAa,MAAM;EACnB,SAAS;EACT,YAAW;GACX;AAIN,KAAI,CAAC,MAAM,MAAM,OACf,QACE,oBAAC;EACC,OAAM;EACN,aAAY;EACZ,eACE,eACE,oBAAC;GAAO,SAAS;aAAc;IAAoB,GACjD;GAEN;AAIN,QACE,qBAAC;EAAI,WAAU;aAEb,qBAAC,4BACC,oBAAC;GAAS,OAAM;GAAc,OAAO,KAAK;IAAS,EAClD,cAAc,MAAM,GAAG,EAAE,CAAC,KAAK,EAAE,UAAU,YAC1C,oBAAC;GAEC,OAAO,GAAG,cAAc,aAAa,GAAG,GAAG;GAC3C,OAAO;KAFF,SAGL,CACF,IACY,EAGf,OAAO,QAAQ,kBAAkB,CAAC,KAAK,CAAC,UAAU,WACjD,qBAAC;GAAuB,WAAU;cAChC,qBAAC;IAAI,WAAU;;KACb,oBAAC;MAAK,WAAU;gBAAY,cAAc;OAAiB;KAC3D,oBAAC;MAAG,WAAU;gBAAyB;OAAc;KACrD,oBAAC;MAAK,WAAU;gBACZ,MAAiB;OACd;;KACH,EAEN,oBAAC;IAAI,WAAU;cACX,MAAiB,KAAK,SACtB,oBAAC;KAEC,WAAW,KAAK;KAChB,cAAc,IAAI,KAAK;KACvB,MACE,oBAAC;MAAE,WAAU;gBACV,KAAK;OACJ;KAEN,OACE,oBAAC;MACC,MAAM,cAAc,KAAK,OAAO;MAChC,OAAO,KAAK;OACZ;KAEJ,QACE,oBAAC;MAAK,WAAU;gBACb,KAAK;OACD;KAET,SAAS,oBAAoB,YAAY,KAAK,GAAG,GAAG;OAnB/C,KAAK,GAoBV,CACF;KACE;KAlCM,SAmCJ,CACV;GACE"}

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

@@ -0,0 +1,4 @@
+import { RunListView } from "./RunListView.js";
+import { ToolRegistryView } from "./ToolRegistryView.js";
+import { AgentListView } from "./AgentListView.js";
+export { AgentListView, RunListView, ToolRegistryView };

package/dist/ui/views/index.js

@@ -0,0 +1,5 @@
+import { RunListView } from "./RunListView.js";
+import { ToolRegistryView } from "./ToolRegistryView.js";
+import { AgentListView } from "./AgentListView.js";
+
+export { AgentListView, RunListView, ToolRegistryView };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@contractspec/example.agent-console",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "description": "Agent Console example - AI agent orchestration with tools, runs, and logs",
   "type": "module",
-  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./agent": "./dist/agent/index.js",
+    "./agent.capability": "./dist/agent.capability.js",
     "./agent.feature": "./dist/agent.feature.js",
     "./agent/agent.entity": "./dist/agent/agent.entity.js",
     "./agent/agent.enum": "./dist/agent/agent.enum.js",
@@ -16,10 +16,12 @@
     "./agent/agent.operation": "./dist/agent/agent.operation.js",
     "./agent/agent.presentation": "./dist/agent/agent.presentation.js",
     "./agent/agent.schema": "./dist/agent/agent.schema.js",
+    "./agent/agent.test-spec": "./dist/agent/agent.test-spec.js",
     "./docs": "./dist/docs/index.js",
     "./docs/agent-console.docblock": "./dist/docs/agent-console.docblock.js",
     "./example": "./dist/example.js",
     "./handlers": "./dist/handlers/index.js",
+    "./handlers/agent.handlers": "./dist/handlers/agent.handlers.js",
     "./presentations": "./dist/presentations/index.js",
     "./run": "./dist/run/index.js",
     "./run/run.entity": "./dist/run/run.entity.js",
@@ -29,10 +31,13 @@
     "./run/run.operation": "./dist/run/run.operation.js",
     "./run/run.presentation": "./dist/run/run.presentation.js",
     "./run/run.schema": "./dist/run/run.schema.js",
+    "./run/run.test-spec": "./dist/run/run.test-spec.js",
+    "./seeders": "./dist/seeders/index.js",
     "./shared": "./dist/shared/index.js",
     "./shared/mock-agents": "./dist/shared/mock-agents.js",
     "./shared/mock-runs": "./dist/shared/mock-runs.js",
     "./shared/mock-tools": "./dist/shared/mock-tools.js",
+    "./shared/overlay-types": "./dist/shared/overlay-types.js",
     "./tool": "./dist/tool/index.js",
     "./tool/tool.entity": "./dist/tool/tool.entity.js",
     "./tool/tool.enum": "./dist/tool/tool.enum.js",
@@ -41,6 +46,31 @@
     "./tool/tool.operation": "./dist/tool/tool.operation.js",
     "./tool/tool.presentation": "./dist/tool/tool.presentation.js",
     "./tool/tool.schema": "./dist/tool/tool.schema.js",
+    "./tool/tool.test-spec": "./dist/tool/tool.test-spec.js",
+    "./ui": "./dist/ui/index.js",
+    "./ui/AgentDashboard": "./dist/ui/AgentDashboard.js",
+    "./ui/AgentRunList": "./dist/ui/AgentRunList.js",
+    "./ui/AgentToolRegistry": "./dist/ui/AgentToolRegistry.js",
+    "./ui/hooks": "./dist/ui/hooks/index.js",
+    "./ui/hooks/useAgentList": "./dist/ui/hooks/useAgentList.js",
+    "./ui/hooks/useAgentMutations": "./dist/ui/hooks/useAgentMutations.js",
+    "./ui/hooks/useRunList": "./dist/ui/hooks/useRunList.js",
+    "./ui/hooks/useToolList": "./dist/ui/hooks/useToolList.js",
+    "./ui/modals": "./dist/ui/modals/index.js",
+    "./ui/modals/AgentActionsModal": "./dist/ui/modals/AgentActionsModal.js",
+    "./ui/modals/CreateAgentModal": "./dist/ui/modals/CreateAgentModal.js",
+    "./ui/overlays": "./dist/ui/overlays/index.js",
+    "./ui/overlays/demo-overlays": "./dist/ui/overlays/demo-overlays.js",
+    "./ui/renderers": "./dist/ui/renderers/index.js",
+    "./ui/renderers/agent-list.markdown": "./dist/ui/renderers/agent-list.markdown.js",
+    "./ui/renderers/agent-list.renderer": "./dist/ui/renderers/agent-list.renderer.js",
+    "./ui/renderers/dashboard.markdown": "./dist/ui/renderers/dashboard.markdown.js",
+    "./ui/renderers/run-list.markdown": "./dist/ui/renderers/run-list.markdown.js",
+    "./ui/renderers/tool-registry.markdown": "./dist/ui/renderers/tool-registry.markdown.js",
+    "./ui/views": "./dist/ui/views/index.js",
+    "./ui/views/AgentListView": "./dist/ui/views/AgentListView.js",
+    "./ui/views/RunListView": "./dist/ui/views/RunListView.js",
+    "./ui/views/ToolRegistryView": "./dist/ui/views/ToolRegistryView.js",
     "./*": "./*"
   },
   "scripts": {
@@ -54,19 +84,25 @@
     "lint": "bun lint:fix",
     "lint:fix": "eslint src --fix",
     "lint:check": "eslint src",
-    "test": "bun run"
+    "test": "bun test"
   },
   "dependencies": {
-    "@contractspec/lib.schema": "1.46.0",
-    "@contractspec/lib.contracts": "1.46.0"
+    "@contractspec/lib.schema": "1.47.0",
+    "@contractspec/lib.contracts": "1.47.0",
+    "@contractspec/lib.example-shared-ui": "1.1.0",
+    "@contractspec/lib.design-system": "1.47.0",
+    "@contractspec/lib.runtime-sandbox": "0.2.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
   },
   "devDependencies": {
-    "@contractspec/tool.tsdown": "1.46.0",
-    "@contractspec/tool.typescript": "1.46.0",
-    "tsdown": "^0.18.3",
-    "typescript": "^5.9.3"
+    "@contractspec/tool.tsdown": "1.47.0",
+    "@contractspec/tool.typescript": "1.47.0",
+    "tsdown": "^0.19.0",
+    "typescript": "^5.9.3",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.2"
   },
-  "module": "./dist/index.js",
   "publishConfig": {
     "exports": {
       ".": "./dist/index.js",

package/src/agent/agent.presentation.ts

@@ -1,11 +1,10 @@
-import type { PresentationSpec } from '@contractspec/lib.contracts';
-import { StabilityEnum } from '@contractspec/lib.contracts';
+import { StabilityEnum, definePresentation } from '@contractspec/lib.contracts';
 import { AgentSummaryModel } from './agent.schema';
 
 /**
  * Presentation for displaying a list of AI agents.
  */
-export const AgentListPresentation: PresentationSpec = {
+export const AgentListPresentation = definePresentation({
   meta: {
     key: 'agent-console.agent.list',
     version: '1.0.0',
@@ -27,12 +26,12 @@ export const AgentListPresentation: PresentationSpec = {
   },
   targets: ['react', 'markdown', 'application/json'],
   policy: { flags: ['agent-console.enabled'] },
-};
+});
 
 /**
  * Presentation for agent detail view.
  */
-export const AgentDetailPresentation: PresentationSpec = {
+export const AgentDetailPresentation = definePresentation({
   meta: {
     key: 'agent-console.agent.detail',
     version: '1.0.0',
@@ -53,12 +52,12 @@ export const AgentDetailPresentation: PresentationSpec = {
   },
   targets: ['react', 'markdown'],
   policy: { flags: ['agent-console.enabled'] },
-};
+});
 
 /**
  * Dashboard presentation for Agent Console - overview of agents, runs, and tools.
  */
-export const AgentConsoleDashboardPresentation: PresentationSpec = {
+export const AgentConsoleDashboardPresentation = definePresentation({
   meta: {
     key: 'agent-console.dashboard',
     version: '1.0.0',
@@ -78,4 +77,4 @@ export const AgentConsoleDashboardPresentation: PresentationSpec = {
   },
   targets: ['react', 'markdown'],
   policy: { flags: ['agent-console.enabled'] },
-};
+});

package/src/agent/agent.test-spec.ts

@@ -0,0 +1,55 @@
+import { defineTestSpec } from '@contractspec/lib.contracts';
+
+export const agentListTest = defineTestSpec({
+  meta: {
+    key: 'test.agent-console.agent.list',
+    version: '1.0.0',
+    owners: ['@agent-console-team'],
+    description: 'Test for listing agents',
+    stability: 'stable',
+    tags: ['test'],
+  },
+  target: {
+    type: 'operation',
+    operation: { key: 'agent-console.agent.list', version: '1.0.0' },
+  },
+  scenarios: [
+    {
+      key: 'success',
+      when: { operation: { key: 'agent-console.agent.list' } },
+      then: [{ type: 'expectOutput', match: {} }],
+    },
+    {
+      key: 'error',
+      when: { operation: { key: 'agent-console.agent.list' } },
+      then: [{ type: 'expectError' }],
+    },
+  ],
+});
+
+export const agentGetTest = defineTestSpec({
+  meta: {
+    key: 'test.agent-console.agent.get',
+    version: '1.0.0',
+    owners: ['@agent-console-team'],
+    description: 'Test for getting agent',
+    stability: 'stable',
+    tags: ['test'],
+  },
+  target: {
+    type: 'operation',
+    operation: { key: 'agent-console.agent.get', version: '1.0.0' },
+  },
+  scenarios: [
+    {
+      key: 'success',
+      when: { operation: { key: 'agent-console.agent.get' } },
+      then: [{ type: 'expectOutput', match: {} }],
+    },
+    {
+      key: 'error',
+      when: { operation: { key: 'agent-console.agent.get' } },
+      then: [{ type: 'expectError' }],
+    },
+  ],
+});

package/src/agent.capability.ts

@@ -0,0 +1,13 @@
+import { defineCapability, StabilityEnum } from '@contractspec/lib.contracts';
+
+export const AgentCapability = defineCapability({
+  meta: {
+    key: 'agent',
+    version: '1.0.0',
+    kind: 'ui',
+    stability: StabilityEnum.Experimental,
+    description: 'AI agent management and console capability',
+    owners: ['platform.core'],
+    tags: ['agent', 'ai', 'console'],
+  },
+});

package/src/agent.feature.ts

@@ -4,12 +4,13 @@
  * Defines the feature module for agent orchestration capabilities.
  */
 import type { FeatureModuleSpec } from '@contractspec/lib.contracts';
+import { defineFeature } from '@contractspec/lib.contracts';
 
 /**
  * Agent Console feature module that bundles all agent, tool, and run
  * operations, events, and presentations into an installable feature.
  */
-export const AgentConsoleFeature: FeatureModuleSpec = {
+export const AgentConsoleFeature: FeatureModuleSpec = defineFeature({
   meta: {
     key: 'agent-console',
     version: '1.0.0',
@@ -143,4 +144,4 @@ export const AgentConsoleFeature: FeatureModuleSpec = {
     ],
     provides: [{ key: 'agent', version: '1.0.0' }],
   },
-};
+});

package/src/example.ts

@@ -1,6 +1,6 @@
-import type { ExampleSpec } from '@contractspec/lib.contracts';
+import { defineExample } from '@contractspec/lib.contracts';
 
-const example: ExampleSpec = {
+const example = defineExample({
   meta: {
     key: 'agent-console',
     version: '1.0.0',
@@ -36,6 +36,6 @@ const example: ExampleSpec = {
     studio: { enabled: true, installable: true },
     mcp: { enabled: true },
   },
-};
+});
 
 export default example;