@contractspec/example.agent-console 3.7.6 → 3.8.2

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

@@ -3,87 +3,100 @@
  *
  * Uses dynamic import for handlers to ensure correct build order.
  */
+
+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';
-import { mockListToolsHandler } from '@contractspec/example.agent-console/handlers';
 
 interface ToolItem {
-  id: string;
-  name: string;
-  description?: string;
-  version: string;
-  category: string;
-  status: string;
+	id: string;
+	name: string;
+	description?: string;
+	version: string;
+	category: string;
+	status: string;
 }
 
 /**
- * Markdown renderer for agent-console.tool.registry presentation
+ * Markdown renderer for agent-console.tool.list presentation
  * Only handles ToolRegistryView component
  */
 export const toolRegistryMarkdownRenderer: PresentationRenderer<{
-  mimeType: string;
-  body: string;
+	mimeType: string;
+	body: string;
 }> = {
-  target: 'markdown',
-  render: async (desc: PresentationSpec) => {
-    // Only handle ToolRegistryView
-    if (
-      desc.source.type !== 'component' ||
-      desc.source.componentKey !== 'ToolRegistryView'
-    ) {
-      throw new Error('toolRegistryMarkdownRenderer: not ToolRegistryView');
-    }
+	target: 'markdown',
+	render: async (desc: PresentationSpec, ctx) => {
+		// Only handle ToolRegistryView
+		if (
+			desc.source.type !== 'component' ||
+			desc.source.componentKey !== 'ToolRegistryView'
+		) {
+			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[] = [
-      `# ${desc.meta.description ?? 'Tool Registry'}`,
-      '',
-      `> ${desc.meta.key} v${desc.meta.version}`,
-      '',
-      `**Total Tools:** ${data.total}`,
-      '',
-    ];
+		// Generate markdown
+		const lines: string[] = [
+			`# ${desc.meta.description ?? 'Tool Registry'}`,
+			'',
+			`> ${desc.meta.key} v${desc.meta.version}`,
+			'',
+			`**Total Tools:** ${data.total}`,
+			'',
+		];
 
-    // Group by category
-    const byCategory: Record<string, ToolItem[]> = {};
-    for (const tool of data.items as ToolItem[]) {
-      const cat = tool.category;
-      if (!byCategory[cat]) byCategory[cat] = [];
-      byCategory[cat].push(tool);
-    }
+		// Group by category
+		const byCategory: Record<string, ToolItem[]> = {};
+		for (const tool of data.items as ToolItem[]) {
+			const cat = tool.category;
+			if (!byCategory[cat]) byCategory[cat] = [];
+			byCategory[cat].push(tool);
+		}
 
-    for (const [category, tools] of Object.entries(byCategory).sort()) {
-      lines.push(`## ${category} (${tools.length})`);
-      lines.push('');
+		for (const [category, tools] of Object.entries(byCategory).sort()) {
+			lines.push(`## ${category} (${tools.length})`);
+			lines.push('');
 
-      for (const tool of tools) {
-        const statusIcon =
-          tool.status === 'ACTIVE'
-            ? '✅'
-            : tool.status === 'DEPRECATED'
-              ? '⚠️'
-              : '❌';
-        lines.push(`### ${statusIcon} ${tool.name} v${tool.version}`);
-        lines.push('');
-        lines.push(`> \`${tool.id}\``);
-        lines.push('');
-        if (tool.description) {
-          lines.push(tool.description);
-          lines.push('');
-        }
-      }
-    }
+			for (const tool of tools) {
+				const statusIcon =
+					tool.status === 'ACTIVE'
+						? '✅'
+						: tool.status === 'DEPRECATED'
+							? '⚠️'
+							: '❌';
+				lines.push(`### ${statusIcon} ${tool.name} v${tool.version}`);
+				lines.push('');
+				lines.push(`> \`${tool.id}\``);
+				lines.push('');
+				if (tool.description) {
+					lines.push(tool.description);
+					lines.push('');
+				}
+			}
+		}
 
-    return {
-      mimeType: 'text/markdown',
-      body: lines.join('\n'),
-    };
-  },
+		return {
+			mimeType: 'text/markdown',
+			body: lines.join('\n'),
+		};
+	},
 };

package/src/ui/views/AgentListView.tsx

@@ -7,107 +7,107 @@
  * Uses design-system components with correct props.
  */
 import {
-  Button,
-  StatCard,
-  StatCardGroup,
-  EntityCard,
-  StatusChip,
-  LoaderBlock,
-  ErrorState,
-  EmptyState,
+	Button,
+	EmptyState,
+	EntityCard,
+	ErrorState,
+	LoaderBlock,
+	StatCard,
+	StatCardGroup,
+	StatusChip,
 } from '@contractspec/lib.design-system';
-import { useAgentList, type Agent } from '../hooks/useAgentList';
+import { type Agent, useAgentList } from '../hooks/useAgentList';
 
 function getStatusTone(
-  status: Agent['status']
+	status: Agent['status']
 ): 'success' | 'warning' | 'neutral' {
-  switch (status) {
-    case 'ACTIVE':
-      return 'success';
-    case 'PAUSED':
-    case 'DRAFT':
-      return 'warning';
-    case 'ARCHIVED':
-      return 'neutral';
-    default:
-      return 'neutral';
-  }
+	switch (status) {
+		case 'ACTIVE':
+			return 'success';
+		case 'PAUSED':
+		case 'DRAFT':
+			return 'warning';
+		case 'ARCHIVED':
+			return 'neutral';
+		default:
+			return 'neutral';
+	}
 }
 
 export function AgentListView() {
-  const { data, loading, error, stats, refetch } = useAgentList();
+	const { data, loading, error, stats, refetch } = useAgentList();
 
-  if (loading && !data) {
-    return <LoaderBlock label="Loading agents..." />;
-  }
+	if (loading && !data) {
+		return <LoaderBlock label="Loading agents..." />;
+	}
 
-  if (error) {
-    return (
-      <ErrorState
-        title="Failed to load agents"
-        description={error.message}
-        onRetry={refetch}
-        retryLabel="Retry"
-      />
-    );
-  }
+	if (error) {
+		return (
+			<ErrorState
+				title="Failed to load agents"
+				description={error.message}
+				onRetry={refetch}
+				retryLabel="Retry"
+			/>
+		);
+	}
 
-  if (!data?.items.length) {
-    return (
-      <EmptyState
-        title="No agents yet"
-        description="Create your first AI agent to get started."
-      />
-    );
-  }
+	if (!data?.items.length) {
+		return (
+			<EmptyState
+				title="No agents yet"
+				description="Create your first AI agent to get started."
+			/>
+		);
+	}
 
-  return (
-    <div className="space-y-6">
-      {/* Stats */}
-      {stats && (
-        <StatCardGroup>
-          <StatCard label="Total Agents" value={stats.total} />
-          <StatCard label="Active" value={stats.active} />
-          <StatCard label="Paused" value={stats.paused} />
-          <StatCard label="Draft" value={stats.draft} />
-        </StatCardGroup>
-      )}
+	return (
+		<div className="space-y-6">
+			{/* Stats */}
+			{stats && (
+				<StatCardGroup>
+					<StatCard label="Total Agents" value={stats.total} />
+					<StatCard label="Active" value={stats.active} />
+					<StatCard label="Paused" value={stats.paused} />
+					<StatCard label="Draft" value={stats.draft} />
+				</StatCardGroup>
+			)}
 
-      {/* Actions */}
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold">Agents</h3>
-        <Button onPress={() => alert('Create Agent clicked!')}>
-          Create Agent
-        </Button>
-      </div>
+			{/* Actions */}
+			<div className="flex items-center justify-between">
+				<h3 className="font-semibold text-lg">Agents</h3>
+				<Button onPress={() => alert('Create Agent clicked!')}>
+					Create Agent
+				</Button>
+			</div>
 
-      {/* Agent List */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        {data.items.map((agent) => (
-          <EntityCard
-            key={agent.id}
-            cardTitle={agent.name}
-            cardSubtitle={agent.modelName}
-            meta={
-              <p className="text-muted-foreground text-sm">
-                {agent.description}
-              </p>
-            }
-            chips={
-              <StatusChip
-                tone={getStatusTone(agent.status)}
-                label={agent.status}
-              />
-            }
-            footer={
-              <span className="text-muted-foreground text-xs">
-                Created {agent.createdAt.toLocaleDateString()}
-              </span>
-            }
-            onClick={() => alert(`View agent: ${agent.name}`)}
-          />
-        ))}
-      </div>
-    </div>
-  );
+			{/* Agent List */}
+			<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+				{data.items.map((agent) => (
+					<EntityCard
+						key={agent.id}
+						cardTitle={agent.name}
+						cardSubtitle={agent.modelName}
+						meta={
+							<p className="text-muted-foreground text-sm">
+								{agent.description}
+							</p>
+						}
+						chips={
+							<StatusChip
+								tone={getStatusTone(agent.status)}
+								label={agent.status}
+							/>
+						}
+						footer={
+							<span className="text-muted-foreground text-xs">
+								Created {agent.createdAt.toLocaleDateString()}
+							</span>
+						}
+						onClick={() => alert(`View agent: ${agent.name}`)}
+					/>
+				))}
+			</div>
+		</div>
+	);
 }

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>
+			}
+		/>
+	);
+}