@contractspec/example.agent-console 3.7.7 → 3.8.2

package/src/ui/renderers/dashboard.markdown.ts

@@ -5,12 +5,12 @@
  */
 
 import {
-	mockListAgentsHandler,
-	mockListRunsHandler,
-	mockListToolsHandler,
-} from '@contractspec/example.agent-console/handlers';
+	type AgentConsoleDashboardData,
+	getFallbackAgentConsoleDashboardData,
+} from '@contractspec/example.agent-console/shared';
 import type { PresentationSpec } from '@contractspec/lib.contracts-spec/presentations';
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import { createAgentVisualizationItems } from '../../visualizations';
 
 function formatDuration(ms: number): string {
 	if (ms < 1000) return `${ms}ms`;
@@ -27,7 +27,7 @@ export const agentDashboardMarkdownRenderer: PresentationRenderer<{
 	body: string;
 }> = {
 	target: 'markdown',
-	render: async (desc: PresentationSpec) => {
+	render: async (desc: PresentationSpec, ctx) => {
 		// Only handle AgentConsoleDashboard
 		if (
 			desc.source.type !== 'component' ||
@@ -38,42 +38,28 @@ export const agentDashboardMarkdownRenderer: PresentationRenderer<{
 			);
 		}
 
-		// Fetch all data in parallel
-		const [agentsData, runsData, toolsData] = await Promise.all([
-			mockListAgentsHandler({
-				organizationId: 'demo-org',
-				limit: 100,
-			}),
-			mockListRunsHandler({
-				limit: 100,
-			}),
-			mockListToolsHandler({
-				organizationId: 'demo-org',
-				limit: 100,
-			}),
-		]);
+		const data =
+			(ctx?.data as AgentConsoleDashboardData | undefined) ??
+			(await getFallbackAgentConsoleDashboardData());
 
 		// Calculate stats
-		const activeAgents = agentsData.items.filter(
+		const activeAgents = data.agents.filter(
 			(a) => a.status === 'ACTIVE'
 		).length;
-		const completedRuns = runsData.items.filter(
+		const completedRuns = data.runs.filter(
 			(r) => r.status === 'COMPLETED'
 		).length;
-		const failedRuns = runsData.items.filter(
-			(r) => r.status === 'FAILED'
-		).length;
-		const totalTokens = runsData.items.reduce(
+		const failedRuns = data.runs.filter((r) => r.status === 'FAILED').length;
+		const totalTokens = data.runs.reduce(
 			(sum, r) => sum + (r.totalTokens ?? 0),
 			0
 		);
-		const totalCost = runsData.items.reduce(
+		const totalCost = data.runs.reduce(
 			(sum, r) => sum + (r.estimatedCostUsd ?? 0),
 			0
 		);
-		const activeTools = toolsData.items.filter(
-			(t) => t.status === 'ACTIVE'
-		).length;
+		const activeTools = data.tools.filter((t) => t.status === 'ACTIVE').length;
+		const visualizationItems = createAgentVisualizationItems(data.runs);
 
 		// Build dashboard markdown
 		const lines: string[] = [
@@ -85,14 +71,14 @@ export const agentDashboardMarkdownRenderer: PresentationRenderer<{
 			'',
 			'| Metric | Value |',
 			'|--------|-------|',
-			`| Total Agents | ${agentsData.total} |`,
+			`| Total Agents | ${data.summary.totalAgents} |`,
 			`| Active Agents | ${activeAgents} |`,
-			`| Total Runs | ${runsData.total} |`,
+			`| Total Runs | ${data.summary.totalRuns} |`,
 			`| Completed Runs | ${completedRuns} |`,
 			`| Failed Runs | ${failedRuns} |`,
 			`| Total Tokens | ${totalTokens.toLocaleString()} |`,
 			`| Total Cost | $${totalCost.toFixed(4)} |`,
-			`| Total Tools | ${toolsData.total} |`,
+			`| Total Tools | ${data.summary.totalTools} |`,
 			`| Active Tools | ${activeTools} |`,
 			'',
 			'## Agents',
@@ -100,18 +86,20 @@ export const agentDashboardMarkdownRenderer: PresentationRenderer<{
 		];
 
 		// Agent list
-		if (agentsData.items.length === 0) {
+		if (data.agents.length === 0) {
 			lines.push('_No agents configured._');
 		} else {
 			lines.push('| Agent | Model | Status | Description |');
 			lines.push('|-------|-------|--------|-------------|');
-			for (const agent of agentsData.items.slice(0, 5)) {
+			for (const agent of data.agents.slice(0, 5)) {
 				lines.push(
 					`| ${agent.name} | ${agent.modelProvider}/${agent.modelName} | ${agent.status} | ${agent.description ?? '-'} |`
 				);
 			}
-			if (agentsData.items.length > 5) {
-				lines.push(`| ... | ... | ... | _${agentsData.total - 5} more_ |`);
+			if (data.agents.length > 5) {
+				lines.push(
+					`| ... | ... | ... | _${data.summary.totalAgents - 5} more_ |`
+				);
 			}
 		}
 
@@ -120,30 +108,37 @@ export const agentDashboardMarkdownRenderer: PresentationRenderer<{
 		lines.push('');
 
 		// Recent runs
-		if (runsData.items.length === 0) {
+		if (data.runs.length === 0) {
 			lines.push('_No runs yet._');
 		} else {
 			lines.push('| Run ID | Agent | Status | Duration | Tokens | Cost |');
 			lines.push('|--------|-------|--------|----------|--------|------|');
-			for (const run of runsData.items.slice(0, 5)) {
+			for (const run of data.runs.slice(0, 5)) {
 				lines.push(
 					`| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration(run.durationMs) : '-'} | ${run.totalTokens ?? 0} | $${(run.estimatedCostUsd ?? 0).toFixed(4)} |`
 				);
 			}
-			if (runsData.items.length > 5) {
+			if (data.runs.length > 5) {
 				lines.push(
-					`| ... | ... | ... | ... | ... | _${runsData.total - 5} more_ |`
+					`| ... | ... | ... | ... | ... | _${data.summary.totalRuns - 5} more_ |`
 				);
 			}
 		}
 
+		lines.push('');
+		lines.push('## Visualization Overview');
+		lines.push('');
+		for (const item of visualizationItems) {
+			lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
+		}
+
 		lines.push('');
 		lines.push('## Tools');
 		lines.push('');
 
 		// Tool categories
-		const toolsByCategory: Record<string, typeof toolsData.items> = {};
-		for (const tool of toolsData.items) {
+		const toolsByCategory: Record<string, typeof data.tools> = {};
+		for (const tool of data.tools) {
 			const cat = tool.category;
 			if (!toolsByCategory[cat]) toolsByCategory[cat] = [];
 			toolsByCategory[cat].push(tool);

package/src/ui/renderers/run-list.markdown.ts

@@ -4,7 +4,10 @@
  * Uses dynamic import for handlers to ensure correct build order.
  */
 
-import { mockListRunsHandler } from '@contractspec/example.agent-console/handlers';
+import {
+	AGENT_CONSOLE_DEMO_PROJECT_ID,
+	createAgentConsoleDemoHandlers,
+} from '@contractspec/example.agent-console/shared';
 import type { PresentationSpec } from '@contractspec/lib.contracts-spec/presentations';
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
 import type { Run } from '../hooks/useRunList';
@@ -30,7 +33,7 @@ export const runListMarkdownRenderer: PresentationRenderer<{
 	body: string;
 }> = {
 	target: 'markdown',
-	render: async (desc: PresentationSpec) => {
+	render: async (desc: PresentationSpec, ctx) => {
 		// Only handle RunListView
 		if (
 			desc.source.type !== 'component' ||
@@ -39,12 +42,17 @@ export const runListMarkdownRenderer: PresentationRenderer<{
 			throw new Error('runListMarkdownRenderer: not RunListView');
 		}
 
-		// Fetch data using mock handler
-		const data = (await mockListRunsHandler({
-			organizationId: 'demo-org',
-			limit: 20,
-			offset: 0,
-		})) as RunListOutput;
+		const data = (
+			Array.isArray(ctx?.data)
+				? { items: ctx.data as Run[], total: ctx.data.length, hasMore: false }
+				: await createAgentConsoleDemoHandlers({
+						projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+					}).listRuns({
+						projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+						limit: 20,
+						offset: 0,
+					})
+		) as RunListOutput;
 
 		// Generate markdown
 		const lines: string[] = [

package/src/ui/renderers/tool-registry.markdown.ts

@@ -4,7 +4,11 @@
  * Uses dynamic import for handlers to ensure correct build order.
  */
 
-import { mockListToolsHandler } from '@contractspec/example.agent-console/handlers';
+import {
+	AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+	AGENT_CONSOLE_DEMO_PROJECT_ID,
+	createAgentConsoleDemoHandlers,
+} from '@contractspec/example.agent-console/shared';
 import type { PresentationSpec } from '@contractspec/lib.contracts-spec/presentations';
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
 
@@ -18,7 +22,7 @@ interface ToolItem {
 }
 
 /**
- * Markdown renderer for agent-console.tool.registry presentation
+ * Markdown renderer for agent-console.tool.list presentation
  * Only handles ToolRegistryView component
  */
 export const toolRegistryMarkdownRenderer: PresentationRenderer<{
@@ -26,7 +30,7 @@ export const toolRegistryMarkdownRenderer: PresentationRenderer<{
 	body: string;
 }> = {
 	target: 'markdown',
-	render: async (desc: PresentationSpec) => {
+	render: async (desc: PresentationSpec, ctx) => {
 		// Only handle ToolRegistryView
 		if (
 			desc.source.type !== 'component' ||
@@ -35,12 +39,20 @@ export const toolRegistryMarkdownRenderer: PresentationRenderer<{
 			throw new Error('toolRegistryMarkdownRenderer: not ToolRegistryView');
 		}
 
-		// Fetch data using mock handler
-		const data = await mockListToolsHandler({
-			organizationId: 'demo-org',
-			limit: 50,
-			offset: 0,
-		});
+		const data = Array.isArray(ctx?.data)
+			? {
+					items: ctx.data as ToolItem[],
+					total: ctx.data.length,
+					hasMore: false,
+				}
+			: await createAgentConsoleDemoHandlers({
+					projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+				}).listTools({
+					projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+					organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+					limit: 50,
+					offset: 0,
+				});
 
 		// Generate markdown
 		const lines: string[] = [

package/src/ui/views/RunDataTable.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { DataTable } from '@contractspec/lib.design-system';
+import type { ContractTableSort } from '@contractspec/lib.presentation-runtime-core';
+import { useContractTable } from '@contractspec/lib.presentation-runtime-react';
+import * as React from 'react';
+import type { Run } from '../hooks/useRunList';
+import { createRunTableColumns } from './run-data-table.columns';
+import { RunExpandedContent, RunTableToolbar } from './run-list.shared';
+
+interface RunDataTableProps {
+	runs: Run[];
+	totalItems: number;
+	pageIndex: number;
+	pageSize: number;
+	sorting: ContractTableSort[];
+	loading?: boolean;
+	onSortingChange: (nextSorting: ContractTableSort[]) => void;
+	onPaginationChange: (nextPagination: {
+		pageIndex: number;
+		pageSize: number;
+	}) => void;
+	onRunClick?: (runId: string) => void;
+}
+
+export function RunDataTable({
+	runs,
+	totalItems,
+	pageIndex,
+	pageSize,
+	sorting,
+	loading,
+	onSortingChange,
+	onPaginationChange,
+	onRunClick,
+}: RunDataTableProps) {
+	const columns = React.useMemo(() => createRunTableColumns(), []);
+	const controller = useContractTable<Run>({
+		data: runs,
+		columns,
+		executionMode: 'server',
+		totalItems,
+		state: {
+			sorting,
+			pagination: { pageIndex, pageSize },
+		},
+		onSortingChange,
+		onPaginationChange,
+		initialState: {
+			columnVisibility: { estimatedCostUsd: false },
+		},
+		getRowId: (run) => run.id,
+		renderExpandedContent: (run) => <RunExpandedContent run={run} />,
+		getCanExpand: () => true,
+	});
+
+	return (
+		<DataTable
+			controller={controller}
+			title="Run History"
+			description="Server-mode ContractSpec table with shared pagination, sorting, visibility, and expansion."
+			loading={loading}
+			onRowPress={(row) => onRunClick?.(row.id)}
+			toolbar={
+				<RunTableToolbar controller={controller} totalRuns={totalItems} />
+			}
+			emptyState={
+				<div className="rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm">
+					No runs yet
+				</div>
+			}
+		/>
+	);
+}

package/src/ui/views/RunListView.tsx

@@ -1,61 +1,40 @@
 'use client';
 
-/**
- * Run List View - Shows agent execution runs with stats
- */
 import {
 	EmptyState,
 	ErrorState,
 	LoaderBlock,
 	StatCard,
 	StatCardGroup,
-	StatusChip,
 } from '@contractspec/lib.design-system';
-import { type Run, useRunList } from '../hooks/useRunList';
+/**
+ * Run List View - Shows agent execution runs with shared ContractSpec table primitives
+ */
+import type { ContractTableSort } from '@contractspec/lib.presentation-runtime-core';
+import { useState } from 'react';
+import { useRunList } from '../hooks/useRunList';
+import { RunDataTable } from './RunDataTable';
+import { formatTokens } from './run-list.shared';
 
 interface RunListViewProps {
 	agentId?: string;
 	onRunClick?: (runId: string) => void;
 }
 
-function getStatusTone(
-	status: Run['status']
-): 'success' | 'warning' | 'neutral' | 'danger' {
-	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?: number): string {
-	if (!ms) return '-';
-	if (ms < 1000) return `${ms}ms`;
-	if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
-	return `${(ms / 60000).toFixed(1)}m`;
-}
-
-function formatTokens(tokens: number): string {
-	if (tokens < 1000) return tokens.toString();
-	if (tokens < 1000000) return `${(tokens / 1000).toFixed(1)}K`;
-	return `${(tokens / 1000000).toFixed(2)}M`;
-}
-
-function formatCost(cost?: number): string {
-	if (!cost) return '-';
-	return `$${cost.toFixed(4)}`;
-}
-
 export function RunListView({ agentId, onRunClick }: RunListViewProps) {
-	const { data, metrics, loading, error, refetch } = useRunList({ agentId });
+	const [sorting, setSorting] = useState<ContractTableSort[]>([
+		{ id: 'queuedAt', desc: true },
+	]);
+	const [pagination, setPagination] = useState({
+		pageIndex: 0,
+		pageSize: 3,
+	});
+	const { data, metrics, loading, error, refetch } = useRunList({
+		agentId,
+		pageIndex: pagination.pageIndex,
+		pageSize: pagination.pageSize,
+		sorting,
+	});
 
 	if (loading && !data) {
 		return <LoaderBlock label="Loading runs..." />;
@@ -83,8 +62,7 @@ export function RunListView({ agentId, onRunClick }: RunListViewProps) {
 
 	return (
 		<div className="space-y-6">
-			{/* Metrics Stats */}
-			{metrics && (
+			{metrics ? (
 				<StatCardGroup>
 					<StatCard label="Total Runs" value={metrics.totalRuns} />
 					<StatCard
@@ -100,74 +78,22 @@ export function RunListView({ agentId, onRunClick }: RunListViewProps) {
 						value={`$${metrics.totalCostUsd.toFixed(2)}`}
 					/>
 				</StatCardGroup>
-			)}
-
-			{/* Run List */}
-			<div className="rounded-lg border border-border">
-				<table className="w-full">
-					<thead className="border-border border-b bg-muted/30">
-						<tr>
-							<th className="px-4 py-3 text-left font-medium text-muted-foreground text-sm">
-								Run
-							</th>
-							<th className="px-4 py-3 text-left font-medium text-muted-foreground text-sm">
-								Agent
-							</th>
-							<th className="px-4 py-3 text-left font-medium text-muted-foreground text-sm">
-								Status
-							</th>
-							<th className="px-4 py-3 text-right font-medium text-muted-foreground text-sm">
-								Tokens
-							</th>
-							<th className="px-4 py-3 text-right font-medium text-muted-foreground text-sm">
-								Duration
-							</th>
-							<th className="px-4 py-3 text-right font-medium text-muted-foreground text-sm">
-								Cost
-							</th>
-						</tr>
-					</thead>
-					<tbody className="divide-y divide-border">
-						{data.items.map((run: Run) => (
-							<tr
-								key={run.id}
-								className="cursor-pointer transition-colors hover:bg-muted/50"
-								onClick={() => onRunClick?.(run.id)}
-							>
-								<td className="px-4 py-3">
-									<div className="font-mono text-sm">{run.id.slice(-8)}</div>
-									<div className="text-muted-foreground text-xs">
-										{run.queuedAt.toLocaleString()}
-									</div>
-								</td>
-								<td className="px-4 py-3">
-									<span className="font-medium">{run.agentName}</span>
-								</td>
-								<td className="px-4 py-3">
-									<StatusChip
-										tone={getStatusTone(run.status)}
-										label={run.status}
-									/>
-								</td>
-								<td className="px-4 py-3 text-right font-mono text-sm">
-									{formatTokens(run.totalTokens)}
-								</td>
-								<td className="px-4 py-3 text-right font-mono text-sm">
-									{formatDuration(run.durationMs)}
-								</td>
-								<td className="px-4 py-3 text-right font-mono text-sm">
-									{formatCost(run.estimatedCostUsd)}
-								</td>
-							</tr>
-						))}
-					</tbody>
-				</table>
-			</div>
+			) : null}
 
-			{/* Pagination */}
-			<div className="text-center text-muted-foreground text-sm">
-				Showing {data.items.length} of {data.total} runs
-			</div>
+			<RunDataTable
+				runs={data.items}
+				totalItems={data.total}
+				pageIndex={pagination.pageIndex}
+				pageSize={pagination.pageSize}
+				sorting={sorting}
+				loading={loading}
+				onSortingChange={(nextSorting) => {
+					setSorting(nextSorting);
+					setPagination((current) => ({ ...current, pageIndex: 0 }));
+				}}
+				onPaginationChange={setPagination}
+				onRunClick={onRunClick}
+			/>
 		</div>
 	);
 }

package/src/ui/views/run-data-table.columns.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { StatusChip } from '@contractspec/lib.design-system';
+import type { ContractTableColumnDef } from '@contractspec/lib.presentation-runtime-react';
+import { VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { Text } from '@contractspec/lib.ui-kit-web/ui/text';
+import type { Run } from '../hooks/useRunList';
+import {
+	formatCost,
+	formatDuration,
+	formatTokens,
+	getStatusTone,
+} from './run-list.shared';
+
+export function createRunTableColumns(): readonly ContractTableColumnDef<Run>[] {
+	return [
+		{
+			id: 'queuedAt',
+			header: 'Run',
+			label: 'Run',
+			accessor: (run: Run) => run.queuedAt.getTime(),
+			cell: ({ item }) => (
+				<VStack gap="xs">
+					<Text className="font-mono text-sm">{item.id.slice(-8)}</Text>
+					<Text className="text-muted-foreground text-xs">
+						{item.queuedAt.toLocaleString()}
+					</Text>
+				</VStack>
+			),
+			size: 220,
+			minSize: 180,
+			canSort: true,
+			canHide: true,
+			canResize: true,
+		},
+		{
+			id: 'agentName',
+			header: 'Agent',
+			label: 'Agent',
+			accessor: (run: Run) => run.agentName ?? 'Unknown Agent',
+			cell: ({ value }) => (
+				<Text className="font-medium">
+					{typeof value === 'string' ? value : 'Unknown Agent'}
+				</Text>
+			),
+			size: 220,
+			canSort: true,
+			canResize: true,
+		},
+		{
+			id: 'status',
+			header: 'Status',
+			label: 'Status',
+			accessorKey: 'status',
+			cell: ({ value }) => {
+				const status =
+					typeof value === 'string' ? (value as Run['status']) : 'QUEUED';
+				return <StatusChip tone={getStatusTone(status)} label={status} />;
+			},
+			size: 150,
+			canSort: true,
+			canResize: true,
+		},
+		{
+			id: 'totalTokens',
+			header: 'Tokens',
+			label: 'Tokens',
+			accessorKey: 'totalTokens',
+			cell: ({ value }) => formatTokens(Number(value ?? 0)),
+			align: 'right' as const,
+			size: 140,
+			canSort: true,
+			canResize: true,
+		},
+		{
+			id: 'durationMs',
+			header: 'Duration',
+			label: 'Duration',
+			accessorKey: 'durationMs',
+			cell: ({ value }) =>
+				formatDuration(typeof value === 'number' ? value : undefined),
+			align: 'right' as const,
+			size: 140,
+			canSort: true,
+			canHide: true,
+			canResize: true,
+		},
+		{
+			id: 'estimatedCostUsd',
+			header: 'Cost',
+			label: 'Cost',
+			accessorKey: 'estimatedCostUsd',
+			cell: ({ value }) =>
+				formatCost(typeof value === 'number' ? value : undefined),
+			align: 'right' as const,
+			size: 140,
+			canSort: true,
+			canHide: true,
+			canResize: true,
+		},
+	];
+}