@contractspec/example.agent-console 3.7.7 → 3.8.4

package/src/ui/views/run-list.shared.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { Button, StatusChip } from '@contractspec/lib.design-system';
+import type { ContractTableController } from '@contractspec/lib.presentation-runtime-react';
+import { HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { Text } from '@contractspec/lib.ui-kit-web/ui/text';
+import type { ReactNode } from 'react';
+import type { Run } from '../hooks/useRunList';
+
+export 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';
+	}
+}
+
+export 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`;
+}
+
+export 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`;
+}
+
+export function formatCost(cost?: number): string {
+	if (!cost) return '-';
+	return `$${cost.toFixed(4)}`;
+}
+
+function formatJson(value: unknown) {
+	return JSON.stringify(value ?? null, null, 2);
+}
+
+export function RunExpandedContent({ run }: { run: Run }) {
+	return (
+		<VStack gap="sm" className="py-2">
+			<HStack justify="between" className="flex-wrap">
+				<StatusChip tone={getStatusTone(run.status)} label={run.status} />
+				<Text className="text-muted-foreground text-sm">
+					Queued {run.queuedAt.toLocaleString()}
+				</Text>
+			</HStack>
+			<HStack gap="lg" className="flex-wrap">
+				<Text className="text-muted-foreground text-sm">
+					Prompt {formatTokens(run.promptTokens)}
+				</Text>
+				<Text className="text-muted-foreground text-sm">
+					Completion {formatTokens(run.completionTokens)}
+				</Text>
+				<Text className="text-muted-foreground text-sm">
+					Duration {formatDuration(run.durationMs)}
+				</Text>
+			</HStack>
+			<VStack gap="xs">
+				<Text className="font-medium text-sm">Input</Text>
+				<pre className="overflow-auto rounded-md bg-muted/40 p-3 text-xs">
+					{formatJson(run.input)}
+				</pre>
+			</VStack>
+			<VStack gap="xs">
+				<Text className="font-medium text-sm">Output</Text>
+				<pre className="overflow-auto rounded-md bg-muted/40 p-3 text-xs">
+					{formatJson(run.output ?? run.errorMessage ?? 'Pending')}
+				</pre>
+			</VStack>
+		</VStack>
+	);
+}
+
+export function RunTableToolbar({
+	controller,
+	totalRuns,
+}: {
+	controller: ContractTableController<Run, ReactNode>;
+	totalRuns: number;
+}) {
+	const firstRow = controller.rows[0];
+	const queuedColumn = controller.columns.find(
+		(column) => column.id === 'queuedAt'
+	);
+	const durationColumn = controller.columns.find(
+		(column) => column.id === 'durationMs'
+	);
+	const costColumn = controller.columns.find(
+		(column) => column.id === 'estimatedCostUsd'
+	);
+
+	return (
+		<HStack gap="sm" className="flex-wrap">
+			<Text className="text-muted-foreground text-sm">{totalRuns} runs</Text>
+			<Button
+				variant="outline"
+				size="sm"
+				onPress={() => firstRow?.toggleExpanded?.(!firstRow?.isExpanded)}
+			>
+				Expand Latest Run
+			</Button>
+			<Button
+				variant="outline"
+				size="sm"
+				onPress={() => queuedColumn?.toggleVisibility?.(!queuedColumn?.visible)}
+			>
+				{queuedColumn?.visible ? 'Hide Time' : 'Show Time'}
+			</Button>
+			<Button
+				variant="outline"
+				size="sm"
+				onPress={() =>
+					durationColumn?.toggleVisibility?.(!durationColumn?.visible)
+				}
+			>
+				{durationColumn?.visible ? 'Hide Duration' : 'Show Duration'}
+			</Button>
+			<Button
+				variant="outline"
+				size="sm"
+				onPress={() => costColumn?.toggleVisibility?.(!costColumn?.visible)}
+			>
+				{costColumn?.visible ? 'Hide Cost' : 'Show Cost'}
+			</Button>
+		</HStack>
+	);
+}

package/src/visualizations/catalog.ts

@@ -0,0 +1,132 @@
+import {
+	defineVisualization,
+	VisualizationRegistry,
+} from '@contractspec/lib.contracts-spec/visualizations';
+
+const RUN_LIST_REF = { key: 'agent.run.list', version: '1.0.0' } as const;
+const META = {
+	version: '1.0.0',
+	domain: 'ai-ops',
+	stability: 'experimental' as const,
+	owners: ['@example.agent-console'],
+	tags: ['agent-console', 'visualization', 'operations'],
+};
+
+export const AgentRunStatusVisualization = defineVisualization({
+	meta: {
+		...META,
+		key: 'agent-console.visualization.run-status',
+		title: 'Run Status Breakdown',
+		description: 'Distribution of run outcomes across the current sample.',
+		goal: 'Make operational success and failure mix visible at a glance.',
+		context: 'Agent operations overview.',
+	},
+	source: { primary: RUN_LIST_REF, resultPath: 'data' },
+	visualization: {
+		kind: 'pie',
+		nameDimension: 'status',
+		valueMeasure: 'runs',
+		dimensions: [
+			{ key: 'status', label: 'Status', dataPath: 'status', type: 'category' },
+		],
+		measures: [
+			{ key: 'runs', label: 'Runs', dataPath: 'runs', format: 'number' },
+		],
+		table: { caption: 'Run counts by status.' },
+	},
+});
+
+export const AgentRunActivityVisualization = defineVisualization({
+	meta: {
+		...META,
+		key: 'agent-console.visualization.run-activity',
+		title: 'Recent Run Activity',
+		description: 'Daily run volume across the current sample.',
+		goal: 'Show whether agent activity is rising or slowing down.',
+		context: 'Operations trend monitoring.',
+	},
+	source: { primary: RUN_LIST_REF, resultPath: 'data' },
+	visualization: {
+		kind: 'cartesian',
+		variant: 'line',
+		xDimension: 'day',
+		yMeasures: ['runs'],
+		dimensions: [{ key: 'day', label: 'Day', dataPath: 'day', type: 'time' }],
+		measures: [
+			{
+				key: 'runs',
+				label: 'Runs',
+				dataPath: 'runs',
+				format: 'number',
+				color: '#0f766e',
+			},
+		],
+		table: { caption: 'Daily run counts.' },
+	},
+});
+
+export const AgentRunEfficiencyVisualization = defineVisualization({
+	meta: {
+		...META,
+		key: 'agent-console.visualization.run-efficiency',
+		title: 'Duration vs Tokens',
+		description: 'Scatter chart comparing token consumption and runtime.',
+		goal: 'Reveal outlier runs that are slow relative to their token usage.',
+		context: 'Operational performance diagnostics.',
+	},
+	source: { primary: RUN_LIST_REF, resultPath: 'data' },
+	visualization: {
+		kind: 'cartesian',
+		variant: 'scatter',
+		xDimension: 'totalTokens',
+		yMeasures: ['durationMs'],
+		dimensions: [
+			{
+				key: 'totalTokens',
+				label: 'Total Tokens',
+				dataPath: 'totalTokens',
+				type: 'number',
+			},
+		],
+		measures: [
+			{
+				key: 'durationMs',
+				label: 'Duration',
+				dataPath: 'durationMs',
+				format: 'duration',
+				color: '#7c3aed',
+			},
+			{
+				key: 'estimatedCostUsd',
+				label: 'Cost',
+				dataPath: 'estimatedCostUsd',
+				format: 'currency',
+			},
+		],
+		series: [
+			{
+				key: 'runs',
+				label: 'Runs',
+				measure: 'durationMs',
+				type: 'scatter',
+				color: '#7c3aed',
+			},
+		],
+		table: { caption: 'Run duration versus token usage.' },
+	},
+});
+
+export const AgentVisualizationSpecs = [
+	AgentRunStatusVisualization,
+	AgentRunActivityVisualization,
+	AgentRunEfficiencyVisualization,
+] as const;
+
+export const AgentVisualizationRegistry = new VisualizationRegistry([
+	...AgentVisualizationSpecs,
+]);
+
+export const AgentVisualizationRefs = AgentVisualizationSpecs.map((spec) => ({
+	key: spec.meta.key,
+	version: spec.meta.version,
+}));

package/src/visualizations/index.ts

@@ -0,0 +1,2 @@
+export * from './catalog';
+export * from './selectors';

package/src/visualizations/selectors.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'bun:test';
+import { MOCK_RUNS } from '../shared';
+import type { Run } from '../ui/hooks/useRunList';
+import { createAgentVisualizationItems } from './selectors';
+
+describe('agent visualization selectors', () => {
+	it('creates the expected visualization items', () => {
+		const items = createAgentVisualizationItems(MOCK_RUNS as unknown as Run[]);
+		expect(items).toHaveLength(3);
+		expect(items[0]?.title).toBe('Run Status Breakdown');
+	});
+});

package/src/visualizations/selectors.ts

@@ -0,0 +1,70 @@
+import type { VisualizationSurfaceItem } from '@contractspec/lib.design-system';
+import type { Run } from '../ui/hooks/useRunList';
+import {
+	AgentRunActivityVisualization,
+	AgentRunEfficiencyVisualization,
+	AgentRunStatusVisualization,
+} from './catalog';
+
+function dayKey(value: Date | undefined): string {
+	if (!value) return 'unknown';
+	return value.toISOString().slice(0, 10);
+}
+
+export function createAgentVisualizationItems(
+	runs: Run[]
+): VisualizationSurfaceItem[] {
+	const statusCounts = new Map<string, number>();
+	const activityCounts = new Map<string, number>();
+
+	for (const run of runs) {
+		statusCounts.set(run.status, (statusCounts.get(run.status) ?? 0) + 1);
+		activityCounts.set(
+			dayKey(run.startedAt ?? run.queuedAt),
+			(activityCounts.get(dayKey(run.startedAt ?? run.queuedAt)) ?? 0) + 1
+		);
+	}
+
+	return [
+		{
+			key: 'run-status',
+			spec: AgentRunStatusVisualization,
+			data: {
+				data: Array.from(statusCounts.entries()).map(([status, count]) => ({
+					status,
+					runs: count,
+				})),
+			},
+			title: 'Run Status Breakdown',
+			description:
+				'Completed, failed, running, and cancelled runs in the sample.',
+			height: 260,
+		},
+		{
+			key: 'run-activity',
+			spec: AgentRunActivityVisualization,
+			data: {
+				data: Array.from(activityCounts.entries())
+					.sort(([left], [right]) => left.localeCompare(right))
+					.map(([day, count]) => ({ day, runs: count })),
+			},
+			title: 'Recent Run Activity',
+			description: 'Daily run volume derived from run start times.',
+		},
+		{
+			key: 'run-efficiency',
+			spec: AgentRunEfficiencyVisualization,
+			data: {
+				data: runs
+					.filter((run) => typeof run.durationMs === 'number')
+					.map((run) => ({
+						totalTokens: run.totalTokens,
+						durationMs: run.durationMs ?? 0,
+						estimatedCostUsd: run.estimatedCostUsd,
+					})),
+			},
+			title: 'Duration vs Tokens',
+			description: 'Operational scatter plot for spotting inefficient runs.',
+		},
+	];
+}

package/tsdown.config.js

@@ -7,4 +7,21 @@ import {
 export default defineConfig((options) => ({
 	...moduleLibrary,
 	...withDevExports,
+	entry: [
+		'src/**/*.ts',
+		'src/**/*.tsx',
+		'!src/**/*.test.ts',
+		'!src/**/*.test.tsx',
+		'!src/**/*.spec.ts',
+		'!src/**/__tests__/**',
+		'!src/**/*.stories.ts',
+		'!src/**/*.stories.tsx',
+		'!src/**/*.cy.ts',
+		'!src/**/*.cy.tsx',
+		'!cypress/**',
+		'!src/proof/**',
+		'!src/shared/demo-dashboard-data.ts',
+		'!src/shared/demo-runtime.ts',
+		'!src/shared/demo-runtime-seed.ts',
+	],
 }));