@contractspec/example.agent-console 3.7.6 → 3.8.2

package/src/ui/views/RunListView.tsx

@@ -1,173 +1,99 @@
 'use client';
 
-/**
- * Run List View - Shows agent execution runs with stats
- */
 import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EmptyState,
-  LoaderBlock,
-  ErrorState,
+	EmptyState,
+	ErrorState,
+	LoaderBlock,
+	StatCard,
+	StatCardGroup,
 } from '@contractspec/lib.design-system';
-import { useRunList, type Run } 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)}`;
+	agentId?: string;
+	onRunClick?: (runId: string) => void;
 }
 
 export function RunListView({ agentId, onRunClick }: RunListViewProps) {
-  const { data, metrics, loading, error, refetch } = useRunList({ agentId });
-
-  if (loading && !data) {
-    return <LoaderBlock label="Loading runs..." />;
-  }
+	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 (error) {
-    return (
-      <ErrorState
-        title="Failed to load runs"
-        description={error.message}
-        onRetry={refetch}
-        retryLabel="Retry"
-      />
-    );
-  }
+	if (loading && !data) {
+		return <LoaderBlock label="Loading runs..." />;
+	}
 
-  if (!data?.items.length) {
-    return (
-      <EmptyState
-        title="No runs yet"
-        description="Execute an agent to see run history here."
-      />
-    );
-  }
+	if (error) {
+		return (
+			<ErrorState
+				title="Failed to load runs"
+				description={error.message}
+				onRetry={refetch}
+				retryLabel="Retry"
+			/>
+		);
+	}
 
-  return (
-    <div className="space-y-6">
-      {/* Metrics Stats */}
-      {metrics && (
-        <StatCardGroup>
-          <StatCard label="Total Runs" value={metrics.totalRuns} />
-          <StatCard
-            label="Success Rate"
-            value={`${(metrics.successRate * 100).toFixed(1)}%`}
-          />
-          <StatCard
-            label="Total Tokens"
-            value={formatTokens(metrics.totalTokens)}
-          />
-          <StatCard
-            label="Total Cost"
-            value={`$${metrics.totalCostUsd.toFixed(2)}`}
-          />
-        </StatCardGroup>
-      )}
+	if (!data?.items.length) {
+		return (
+			<EmptyState
+				title="No runs yet"
+				description="Execute an agent to see run history here."
+			/>
+		);
+	}
 
-      {/* Run List */}
-      <div className="border-border rounded-lg border">
-        <table className="w-full">
-          <thead className="border-border bg-muted/30 border-b">
-            <tr>
-              <th className="text-muted-foreground px-4 py-3 text-left text-sm font-medium">
-                Run
-              </th>
-              <th className="text-muted-foreground px-4 py-3 text-left text-sm font-medium">
-                Agent
-              </th>
-              <th className="text-muted-foreground px-4 py-3 text-left text-sm font-medium">
-                Status
-              </th>
-              <th className="text-muted-foreground px-4 py-3 text-right text-sm font-medium">
-                Tokens
-              </th>
-              <th className="text-muted-foreground px-4 py-3 text-right text-sm font-medium">
-                Duration
-              </th>
-              <th className="text-muted-foreground px-4 py-3 text-right text-sm font-medium">
-                Cost
-              </th>
-            </tr>
-          </thead>
-          <tbody className="divide-border divide-y">
-            {data.items.map((run: Run) => (
-              <tr
-                key={run.id}
-                className="hover:bg-muted/50 cursor-pointer transition-colors"
-                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>
+	return (
+		<div className="space-y-6">
+			{metrics ? (
+				<StatCardGroup>
+					<StatCard label="Total Runs" value={metrics.totalRuns} />
+					<StatCard
+						label="Success Rate"
+						value={`${(metrics.successRate * 100).toFixed(1)}%`}
+					/>
+					<StatCard
+						label="Total Tokens"
+						value={formatTokens(metrics.totalTokens)}
+					/>
+					<StatCard
+						label="Total Cost"
+						value={`$${metrics.totalCostUsd.toFixed(2)}`}
+					/>
+				</StatCardGroup>
+			) : null}
 
-      {/* Pagination */}
-      <div className="text-muted-foreground text-center text-sm">
-        Showing {data.items.length} of {data.total} runs
-      </div>
-    </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/ToolRegistryView.tsx

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