@contractspec/example.agent-console 3.8.14 → 3.8.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/example.agent-console",
-  "version": "3.8.14",
+  "version": "3.8.16",
   "description": "Agent Console example - AI agent orchestration with tools, runs, and logs",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -306,6 +306,34 @@
       "node": "./dist/node/ui/index.js",
       "default": "./dist/ui/index.js"
     },
+    "./ui/AgentConsolePreview": {
+      "types": "./dist/ui/AgentConsolePreview.d.ts",
+      "browser": "./dist/browser/ui/AgentConsolePreview.js",
+      "bun": "./dist/ui/AgentConsolePreview.js",
+      "node": "./dist/node/ui/AgentConsolePreview.js",
+      "default": "./dist/ui/AgentConsolePreview.js"
+    },
+    "./ui/AgentConsolePreview.data": {
+      "types": "./dist/ui/AgentConsolePreview.data.d.ts",
+      "browser": "./dist/browser/ui/AgentConsolePreview.data.js",
+      "bun": "./dist/ui/AgentConsolePreview.data.js",
+      "node": "./dist/node/ui/AgentConsolePreview.data.js",
+      "default": "./dist/ui/AgentConsolePreview.data.js"
+    },
+    "./ui/AgentConsolePreviewPanels": {
+      "types": "./dist/ui/AgentConsolePreviewPanels.d.ts",
+      "browser": "./dist/browser/ui/AgentConsolePreviewPanels.js",
+      "bun": "./dist/ui/AgentConsolePreviewPanels.js",
+      "node": "./dist/node/ui/AgentConsolePreviewPanels.js",
+      "default": "./dist/ui/AgentConsolePreviewPanels.js"
+    },
+    "./ui/AgentConsolePreviewTable": {
+      "types": "./dist/ui/AgentConsolePreviewTable.d.ts",
+      "browser": "./dist/browser/ui/AgentConsolePreviewTable.js",
+      "bun": "./dist/ui/AgentConsolePreviewTable.js",
+      "node": "./dist/node/ui/AgentConsolePreviewTable.js",
+      "default": "./dist/ui/AgentConsolePreviewTable.js"
+    },
     "./ui/AgentDashboard": {
       "types": "./dist/ui/AgentDashboard.d.ts",
       "browser": "./dist/browser/ui/AgentDashboard.js",
@@ -543,19 +571,20 @@
   },
   "dependencies": {
     "@contractspec/lib.schema": "3.7.14",
-    "@contractspec/lib.contracts-spec": "5.5.0",
-    "@contractspec/lib.example-shared-ui": "6.0.22",
-    "@contractspec/lib.design-system": "3.11.0",
-    "@contractspec/lib.runtime-sandbox": "2.7.15",
-    "@contractspec/lib.ui-kit-web": "3.10.3",
-    "@contractspec/module.execution-console": "0.1.5",
+    "@contractspec/lib.contracts-spec": "5.5.1",
+    "@contractspec/lib.example-shared-ui": "7.0.1",
+    "@contractspec/lib.design-system": "3.11.2",
+    "@contractspec/lib.presentation-runtime-react": "38.0.2",
+    "@contractspec/lib.runtime-sandbox": "3.0.1",
+    "@contractspec/lib.ui-kit-web": "3.11.1",
+    "@contractspec/module.execution-console": "0.1.7",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "@contractspec/lib.presentation-runtime-core": "5.0.0"
+    "@contractspec/lib.presentation-runtime-core": "5.0.2"
   },
   "devDependencies": {
-    "@contractspec/lib.harness": "0.2.14",
-    "@contractspec/tool.bun": "3.7.15",
+    "@contractspec/lib.harness": "0.2.15",
+    "@contractspec/tool.bun": "3.7.17",
     "@contractspec/tool.typescript": "3.7.13",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.2",
@@ -865,6 +894,34 @@
         "node": "./dist/node/ui/index.js",
         "default": "./dist/ui/index.js"
       },
+      "./ui/AgentConsolePreview": {
+        "types": "./dist/ui/AgentConsolePreview.d.ts",
+        "browser": "./dist/browser/ui/AgentConsolePreview.js",
+        "bun": "./dist/ui/AgentConsolePreview.js",
+        "node": "./dist/node/ui/AgentConsolePreview.js",
+        "default": "./dist/ui/AgentConsolePreview.js"
+      },
+      "./ui/AgentConsolePreview.data": {
+        "types": "./dist/ui/AgentConsolePreview.data.d.ts",
+        "browser": "./dist/browser/ui/AgentConsolePreview.data.js",
+        "bun": "./dist/ui/AgentConsolePreview.data.js",
+        "node": "./dist/node/ui/AgentConsolePreview.data.js",
+        "default": "./dist/ui/AgentConsolePreview.data.js"
+      },
+      "./ui/AgentConsolePreviewPanels": {
+        "types": "./dist/ui/AgentConsolePreviewPanels.d.ts",
+        "browser": "./dist/browser/ui/AgentConsolePreviewPanels.js",
+        "bun": "./dist/ui/AgentConsolePreviewPanels.js",
+        "node": "./dist/node/ui/AgentConsolePreviewPanels.js",
+        "default": "./dist/ui/AgentConsolePreviewPanels.js"
+      },
+      "./ui/AgentConsolePreviewTable": {
+        "types": "./dist/ui/AgentConsolePreviewTable.d.ts",
+        "browser": "./dist/browser/ui/AgentConsolePreviewTable.js",
+        "bun": "./dist/ui/AgentConsolePreviewTable.js",
+        "node": "./dist/node/ui/AgentConsolePreviewTable.js",
+        "default": "./dist/ui/AgentConsolePreviewTable.js"
+      },
       "./ui/AgentDashboard": {
         "types": "./dist/ui/AgentDashboard.d.ts",
         "browser": "./dist/browser/ui/AgentDashboard.js",

package/src/ui/AgentConsolePreview.data.ts

@@ -0,0 +1,74 @@
+import { MOCK_AGENTS } from '../shared/mock-agents';
+import { MOCK_RUNS } from '../shared/mock-runs';
+import { MOCK_TOOLS } from '../shared/mock-tools';
+
+export type AgentConsolePreviewAgent = (typeof MOCK_AGENTS)[number];
+export type AgentConsolePreviewRun = (typeof MOCK_RUNS)[number];
+export type AgentConsolePreviewTool = (typeof MOCK_TOOLS)[number];
+export type AgentConsolePreviewTab = 'runs' | 'agents' | 'tools' | 'metrics';
+
+export const AGENT_CONSOLE_PREVIEW_TABS: readonly {
+	id: AgentConsolePreviewTab;
+	label: string;
+	icon: string;
+}[] = [
+	{ id: 'runs', label: 'Runs', icon: '▶' },
+	{ id: 'agents', label: 'Agents', icon: '🤖' },
+	{ id: 'tools', label: 'Tools', icon: '🔧' },
+	{ id: 'metrics', label: 'Metrics', icon: '📊' },
+];
+
+export function createAgentConsolePreviewMetrics(
+	runs: readonly AgentConsolePreviewRun[]
+) {
+	const completedRuns = runs.filter((run) => run.status === 'COMPLETED').length;
+	const totalTokens = runs.reduce((sum, run) => sum + run.totalTokens, 0);
+	const totalCostUsd = runs.reduce(
+		(sum, run) => sum + (run.estimatedCostUsd ?? 0),
+		0
+	);
+	const durations = runs
+		.map((run) => run.durationMs)
+		.filter((duration): duration is number => typeof duration === 'number');
+
+	return {
+		averageDurationMs:
+			durations.length > 0
+				? durations.reduce((sum, duration) => sum + duration, 0) /
+					durations.length
+				: 0,
+		completedRuns,
+		successRate: runs.length > 0 ? completedRuns / runs.length : 0,
+		totalCostUsd,
+		totalRuns: runs.length,
+		totalTokens,
+	};
+}
+
+export function formatAgentConsoleTokens(tokens: number): string {
+	if (tokens < 1000) return tokens.toString();
+	if (tokens < 1_000_000) return `${(tokens / 1000).toFixed(1)}K`;
+	return `${(tokens / 1_000_000).toFixed(2)}M`;
+}
+
+export function formatAgentConsoleDuration(ms?: number): string {
+	if (!ms) return '-';
+	if (ms < 1000) return `${ms}ms`;
+	if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+	return `${(ms / 60_000).toFixed(1)}m`;
+}
+
+export function formatAgentConsoleDate(value: Date): string {
+	return new Intl.DateTimeFormat('en-US', {
+		dateStyle: 'medium',
+		timeStyle: 'short',
+	}).format(value);
+}
+
+export function getAgentConsolePressProps(handler: () => void) {
+	if (typeof document === 'undefined') {
+		return { onPress: handler };
+	}
+
+	return { onClick: handler };
+}

package/src/ui/AgentConsolePreview.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { createVisualizationModel } from '@contractspec/lib.presentation-runtime-core';
+import { Button } from '@contractspec/lib.ui-kit-web/ui/button';
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
+import { HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { Text } from '@contractspec/lib.ui-kit-web/ui/text';
+import { Visualization } from '@contractspec/lib.ui-kit-web/ui/visualization';
+import { useMemo, useState } from 'react';
+import { MOCK_AGENTS } from '../shared/mock-agents';
+import { MOCK_RUNS } from '../shared/mock-runs';
+import { MOCK_TOOLS } from '../shared/mock-tools';
+import { createAgentVisualizationItems } from '../visualizations';
+import {
+	AGENT_CONSOLE_PREVIEW_TABS,
+	type AgentConsolePreviewAgent,
+	type AgentConsolePreviewRun,
+	type AgentConsolePreviewTab,
+	type AgentConsolePreviewTool,
+	createAgentConsolePreviewMetrics,
+	getAgentConsolePressProps,
+} from './AgentConsolePreview.data';
+import {
+	AgentConsoleAgentCards,
+	AgentConsoleMetricCards,
+	AgentConsoleMetricsPanel,
+	AgentConsoleToolCards,
+} from './AgentConsolePreviewPanels';
+import { AgentConsoleRunHistoryTable } from './AgentConsolePreviewTable';
+
+export interface AgentConsolePreviewProps {
+	agents?: readonly AgentConsolePreviewAgent[];
+	runs?: readonly AgentConsolePreviewRun[];
+	showHeaderAction?: boolean;
+	tools?: readonly AgentConsolePreviewTool[];
+}
+
+export function AgentConsolePreview({
+	agents = MOCK_AGENTS,
+	runs = MOCK_RUNS,
+	showHeaderAction = true,
+	tools = MOCK_TOOLS,
+}: AgentConsolePreviewProps) {
+	const [activeTab, setActiveTab] = useState<AgentConsolePreviewTab>('runs');
+	const metrics = useMemo(() => createAgentConsolePreviewMetrics(runs), [runs]);
+	const visualizationItems = useMemo(
+		() => createAgentVisualizationItems(runs),
+		[runs]
+	);
+
+	return (
+		<VStack gap="xl" align="stretch">
+			<HStack justify="between" align="center" className="gap-3">
+				<Text className="font-bold text-2xl">AI Agent Console</Text>
+				{showHeaderAction ? (
+					<Button {...getAgentConsolePressProps(() => undefined)}>
+						<Text>+ New Agent</Text>
+					</Button>
+				) : null}
+			</HStack>
+
+			<AgentConsoleMetricCards metrics={metrics} />
+			<VStack gap="md">
+				<VStack gap="xs">
+					<Text className="font-semibold text-lg">
+						Operational Visualizations
+					</Text>
+					<Text className="text-muted-foreground text-sm">
+						Contract-backed charts derived from recent run activity.
+					</Text>
+				</VStack>
+				<VStack gap="md">
+					{visualizationItems.map((item) => (
+						<Card key={item.key}>
+							<CardHeader>
+								<CardTitle>{item.title}</CardTitle>
+								<CardDescription>{item.description}</CardDescription>
+							</CardHeader>
+							<CardContent>
+								<Visualization
+									height={item.height}
+									model={createVisualizationModel(item.spec, item.data)}
+								/>
+							</CardContent>
+						</Card>
+					))}
+				</VStack>
+			</VStack>
+
+			<HStack className="rounded-lg bg-muted p-1" gap="xs">
+				{AGENT_CONSOLE_PREVIEW_TABS.map((tab) => (
+					<Button
+						key={tab.id}
+						size="sm"
+						variant={activeTab === tab.id ? 'secondary' : 'ghost'}
+						className="flex-1"
+						{...getAgentConsolePressProps(() => setActiveTab(tab.id))}
+					>
+						<Text>
+							{tab.icon} {tab.label}
+						</Text>
+					</Button>
+				))}
+			</HStack>
+
+			{activeTab === 'runs' ? (
+				<AgentConsoleRunHistoryTable runs={runs} />
+			) : null}
+			{activeTab === 'agents' ? (
+				<AgentConsoleAgentCards agents={agents} />
+			) : null}
+			{activeTab === 'tools' ? <AgentConsoleToolCards tools={tools} /> : null}
+			{activeTab === 'metrics' ? (
+				<AgentConsoleMetricsPanel metrics={metrics} />
+			) : null}
+		</VStack>
+	);
+}

package/src/ui/AgentConsolePreviewPanels.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
+import { HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { Text } from '@contractspec/lib.ui-kit-web/ui/text';
+import type {
+	AgentConsolePreviewAgent,
+	AgentConsolePreviewTool,
+	createAgentConsolePreviewMetrics,
+} from './AgentConsolePreview.data';
+import { formatAgentConsoleTokens } from './AgentConsolePreview.data';
+
+type PreviewMetrics = ReturnType<typeof createAgentConsolePreviewMetrics>;
+
+export function AgentConsoleMetricCards({
+	metrics,
+}: {
+	metrics: PreviewMetrics;
+}) {
+	const stats = [
+		{
+			label: 'Total Runs',
+			value: String(metrics.totalRuns),
+			hint: `${Math.round(metrics.successRate * 100)}% success`,
+		},
+		{
+			label: 'Success Rate',
+			value: `${Math.round(metrics.successRate * 100)}%`,
+			hint: 'of all runs',
+		},
+		{
+			label: 'Total Tokens',
+			value: formatAgentConsoleTokens(metrics.totalTokens),
+			hint: 'This period',
+		},
+		{
+			label: 'Total Cost',
+			value: `$${metrics.totalCostUsd.toFixed(2)}`,
+			hint: 'This period',
+		},
+	];
+
+	return (
+		<HStack gap="md" className="flex-wrap">
+			{stats.map((stat) => (
+				<Card key={stat.label} className="min-w-52 flex-1">
+					<CardContent className="flex flex-col gap-1 pt-6">
+						<Text className="text-muted-foreground text-sm">{stat.label}</Text>
+						<Text className="font-bold text-2xl">{stat.value}</Text>
+						<Text className="text-muted-foreground text-sm">{stat.hint}</Text>
+					</CardContent>
+				</Card>
+			))}
+		</HStack>
+	);
+}
+
+export function AgentConsoleAgentCards({
+	agents,
+}: {
+	agents: readonly AgentConsolePreviewAgent[];
+}) {
+	return (
+		<VStack gap="md">
+			{agents.map((agent) => (
+				<Card key={agent.id}>
+					<CardContent className="flex flex-col gap-2 pt-6">
+						<HStack justify="between" align="start">
+							<VStack gap="xs" className="flex-1">
+								<Text className="font-semibold text-lg">{agent.name}</Text>
+								<Text className="text-muted-foreground text-sm">
+									{agent.modelProvider} / {agent.modelName}
+								</Text>
+							</VStack>
+							<AgentConsoleStatusBadge status={agent.status} />
+						</HStack>
+						<Text className="text-muted-foreground text-sm">
+							{agent.description}
+						</Text>
+					</CardContent>
+				</Card>
+			))}
+		</VStack>
+	);
+}
+
+export function AgentConsoleToolCards({
+	tools,
+}: {
+	tools: readonly AgentConsolePreviewTool[];
+}) {
+	return (
+		<VStack gap="md">
+			{tools.map((tool) => (
+				<Card key={tool.id}>
+					<CardContent className="flex flex-col gap-2 pt-6">
+						<HStack justify="between" align="start">
+							<VStack gap="xs" className="flex-1">
+								<Text className="font-semibold text-lg">{tool.name}</Text>
+								<Text className="text-muted-foreground text-sm">
+									{tool.category} / {tool.implementationType}
+								</Text>
+							</VStack>
+							<AgentConsoleStatusBadge status={tool.status} />
+						</HStack>
+						<Text className="text-muted-foreground text-sm">
+							{tool.description}
+						</Text>
+					</CardContent>
+				</Card>
+			))}
+		</VStack>
+	);
+}
+
+export function AgentConsoleMetricsPanel({
+	metrics,
+}: {
+	metrics: PreviewMetrics;
+}) {
+	return (
+		<VStack gap="md">
+			<Text className="font-semibold text-lg">Usage Analytics</Text>
+			<Card>
+				<CardHeader>
+					<CardTitle>Run Outcomes</CardTitle>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-3">
+					<Text>Completed: {metrics.completedRuns}</Text>
+					<Text>Failed: {metrics.totalRuns - metrics.completedRuns}</Text>
+					<Text>
+						Average duration: {(metrics.averageDurationMs / 1000).toFixed(1)}s
+					</Text>
+				</CardContent>
+			</Card>
+		</VStack>
+	);
+}
+
+export function AgentConsoleStatusBadge({ status }: { status: string }) {
+	const variant =
+		status === 'FAILED' || status === 'CANCELLED'
+			? 'destructive'
+			: status === 'ACTIVE' || status === 'COMPLETED'
+				? 'secondary'
+				: 'outline';
+
+	return (
+		<Badge variant={variant}>
+			<Text className="font-semibold text-xs">{status}</Text>
+		</Badge>
+	);
+}

package/src/ui/AgentConsolePreviewTable.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import {
+	type ContractTableColumnDef,
+	useContractTable,
+} from '@contractspec/lib.presentation-runtime-react';
+import { Card, CardContent } from '@contractspec/lib.ui-kit-web/ui/card';
+import { DataTable } from '@contractspec/lib.ui-kit-web/ui/data-table';
+import { VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { Text } from '@contractspec/lib.ui-kit-web/ui/text';
+import { useMemo } from 'react';
+import {
+	type AgentConsolePreviewRun,
+	formatAgentConsoleDate,
+	formatAgentConsoleDuration,
+	formatAgentConsoleTokens,
+} from './AgentConsolePreview.data';
+import { AgentConsoleStatusBadge } from './AgentConsolePreviewPanels';
+
+export function AgentConsoleRunHistoryTable({
+	runs,
+}: {
+	runs: readonly AgentConsolePreviewRun[];
+}) {
+	const columns = useMemo<ContractTableColumnDef<AgentConsolePreviewRun>[]>(
+		() => [
+			{
+				id: 'queuedAt',
+				header: 'Run',
+				label: 'Run',
+				accessor: (run) => run.queuedAt.getTime(),
+				cell: ({ item }) => (
+					<VStack gap="xs">
+						<Text className="font-mono text-sm">{item.id}</Text>
+						<Text className="text-muted-foreground text-xs">
+							{formatAgentConsoleDate(item.queuedAt)}
+						</Text>
+					</VStack>
+				),
+				size: 180,
+				canSort: true,
+				canHide: true,
+			},
+			{
+				id: 'agentName',
+				header: 'Agent',
+				label: 'Agent',
+				accessorKey: 'agentName',
+				size: 220,
+				canSort: true,
+			},
+			{
+				id: 'status',
+				header: 'Status',
+				label: 'Status',
+				accessorKey: 'status',
+				cell: ({ value }) => <AgentConsoleStatusBadge status={String(value)} />,
+				size: 140,
+				canSort: true,
+			},
+			{
+				id: 'totalTokens',
+				header: 'Tokens',
+				label: 'Tokens',
+				accessorKey: 'totalTokens',
+				cell: ({ value }) => formatAgentConsoleTokens(Number(value ?? 0)),
+				align: 'right',
+				size: 120,
+				canSort: true,
+			},
+			{
+				id: 'durationMs',
+				header: 'Duration',
+				label: 'Duration',
+				accessorKey: 'durationMs',
+				cell: ({ value }) =>
+					formatAgentConsoleDuration(
+						typeof value === 'number' ? value : undefined
+					),
+				align: 'right',
+				size: 130,
+				canHide: true,
+			},
+		],
+		[]
+	);
+	const controller = useContractTable({
+		data: runs,
+		columns,
+		initialState: { pagination: { pageIndex: 0, pageSize: 5 } },
+		getRowId: (run) => run.id,
+	});
+
+	return (
+		<DataTable
+			controller={controller}
+			toolbar={
+				<Text className="text-muted-foreground text-sm">Run History</Text>
+			}
+			emptyState={
+				<Card>
+					<CardContent className="pt-6">
+						<Text className="text-muted-foreground">No runs yet</Text>
+					</CardContent>
+				</Card>
+			}
+		/>
+	);
+}

package/src/ui/ExecutionConsoleHost.tsx

@@ -2,12 +2,12 @@
 
 import { VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
 import { ExecutionLaneConsoleDemo } from '@contractspec/module.execution-console';
-import { AgentDashboard } from './AgentDashboard';
+import { AgentConsolePreview } from './AgentConsolePreview';
 
 export function ExecutionConsoleHost() {
 	return (
 		<VStack gap="xl" align="stretch">
-			<AgentDashboard />
+			<AgentConsolePreview />
 			<ExecutionLaneConsoleDemo />
 		</VStack>
 	);

package/src/ui/index.ts

@@ -1,4 +1,6 @@
 // Main dashboard component
+
+export * from './AgentConsolePreview';
 export * from './AgentDashboard';
 // Backward-compatible exports
 export * from './AgentRunList';

package/src/visualizations/selectors.ts

@@ -1,18 +1,26 @@
 import type { VisualizationSurfaceItem } from '@contractspec/lib.design-system';
-import type { Run } from '../ui/hooks/useRunList';
 import {
 	AgentRunActivityVisualization,
 	AgentRunEfficiencyVisualization,
 	AgentRunStatusVisualization,
 } from './catalog';
 
+interface AgentVisualizationRun {
+	durationMs?: number;
+	estimatedCostUsd?: number;
+	queuedAt?: Date;
+	startedAt?: Date;
+	status: string;
+	totalTokens: number;
+}
+
 function dayKey(value: Date | undefined): string {
 	if (!value) return 'unknown';
 	return value.toISOString().slice(0, 10);
 }
 
 export function createAgentVisualizationItems(
-	runs: Run[]
+	runs: readonly AgentVisualizationRun[]
 ): VisualizationSurfaceItem[] {
 	const statusCounts = new Map<string, number>();
 	const activityCounts = new Map<string, number>();