@contractspec/example.agent-console 3.8.16 → 3.8.18

package/src/ui/AgentConsolePreview.tsx

@@ -1,5 +1,11 @@
 'use client';
 
+import {
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from '@contractspec/lib.design-system';
 import { createVisualizationModel } from '@contractspec/lib.presentation-runtime-core';
 import { Button } from '@contractspec/lib.ui-kit-web/ui/button';
 import {
@@ -12,7 +18,7 @@ import {
 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 { useMemo } from 'react';
 import { MOCK_AGENTS } from '../shared/mock-agents';
 import { MOCK_RUNS } from '../shared/mock-runs';
 import { MOCK_TOOLS } from '../shared/mock-tools';
@@ -21,7 +27,6 @@ import {
 	AGENT_CONSOLE_PREVIEW_TABS,
 	type AgentConsolePreviewAgent,
 	type AgentConsolePreviewRun,
-	type AgentConsolePreviewTab,
 	type AgentConsolePreviewTool,
 	createAgentConsolePreviewMetrics,
 	getAgentConsolePressProps,
@@ -47,7 +52,6 @@ export function AgentConsolePreview({
 	showHeaderAction = true,
 	tools = MOCK_TOOLS,
 }: AgentConsolePreviewProps) {
-	const [activeTab, setActiveTab] = useState<AgentConsolePreviewTab>('runs');
 	const metrics = useMemo(() => createAgentConsolePreviewMetrics(runs), [runs]);
 	const visualizationItems = useMemo(
 		() => createAgentVisualizationItems(runs),
@@ -93,32 +97,34 @@ export function AgentConsolePreview({
 				</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>
+			<Tabs defaultValue="runs" className="w-full gap-4">
+				<TabsList className="h-auto w-full flex-wrap">
+					{AGENT_CONSOLE_PREVIEW_TABS.map((tab) => (
+						<TabsTrigger
+							key={tab.id}
+							value={tab.id}
+							className="min-h-8 min-w-24 flex-1"
+						>
+							<Text>
+								{tab.icon} {tab.label}
+							</Text>
+						</TabsTrigger>
+					))}
+				</TabsList>
 
-			{activeTab === 'runs' ? (
-				<AgentConsoleRunHistoryTable runs={runs} />
-			) : null}
-			{activeTab === 'agents' ? (
-				<AgentConsoleAgentCards agents={agents} />
-			) : null}
-			{activeTab === 'tools' ? <AgentConsoleToolCards tools={tools} /> : null}
-			{activeTab === 'metrics' ? (
-				<AgentConsoleMetricsPanel metrics={metrics} />
-			) : null}
+				<TabsContent value="runs">
+					<AgentConsoleRunHistoryTable runs={runs} />
+				</TabsContent>
+				<TabsContent value="agents">
+					<AgentConsoleAgentCards agents={agents} />
+				</TabsContent>
+				<TabsContent value="tools">
+					<AgentConsoleToolCards tools={tools} />
+				</TabsContent>
+				<TabsContent value="metrics">
+					<AgentConsoleMetricsPanel metrics={metrics} />
+				</TabsContent>
+			</Tabs>
 		</VStack>
 	);
 }

package/src/ui/AgentConsolePreviewCards.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';
+import { Card, CardContent } from '@contractspec/lib.ui-kit-web/ui/card';
+import { Box, 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';
+
+interface AgentConsoleResponsiveCardsProps<TItem> {
+	getKey: (item: TItem) => string;
+	items: readonly TItem[];
+	renderItem: (item: TItem) => ReactNode;
+}
+
+export function AgentConsoleResponsiveCards<TItem>({
+	getKey,
+	items,
+	renderItem,
+}: AgentConsoleResponsiveCardsProps<TItem>) {
+	return (
+		<HStack gap="none" align="stretch" className="flex-wrap">
+			{items.map((item) => (
+				<Box
+					key={getKey(item)}
+					gap="none"
+					className="flex w-full min-w-0 p-1.5 sm:w-1/2 lg:w-1/4"
+				>
+					{renderItem(item)}
+				</Box>
+			))}
+		</HStack>
+	);
+}
+
+export function AgentConsoleEntityCard({
+	description,
+	name,
+	status,
+	subtitle,
+}: {
+	description: string;
+	name: string;
+	status: string;
+	subtitle: string;
+}) {
+	return (
+		<Card className="h-full w-full">
+			<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">{name}</Text>
+						<Text className="text-muted-foreground text-sm">{subtitle}</Text>
+					</VStack>
+					<AgentConsoleStatusBadge status={status} />
+				</HStack>
+				<Text className="text-muted-foreground text-sm">{description}</Text>
+			</CardContent>
+		</Card>
+	);
+}
+
+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/AgentConsolePreviewPanels.tsx

@@ -1,13 +1,12 @@
 '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 { VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
 import { Text } from '@contractspec/lib.ui-kit-web/ui/text';
 import type {
 	AgentConsolePreviewAgent,
@@ -15,6 +14,12 @@ import type {
 	createAgentConsolePreviewMetrics,
 } from './AgentConsolePreview.data';
 import { formatAgentConsoleTokens } from './AgentConsolePreview.data';
+import {
+	AgentConsoleEntityCard,
+	AgentConsoleResponsiveCards,
+} from './AgentConsolePreviewCards';
+
+export { AgentConsoleStatusBadge } from './AgentConsolePreviewCards';
 
 type PreviewMetrics = ReturnType<typeof createAgentConsolePreviewMetrics>;
 
@@ -47,17 +52,19 @@ export function AgentConsoleMetricCards({
 	];
 
 	return (
-		<HStack gap="md" className="flex-wrap">
-			{stats.map((stat) => (
-				<Card key={stat.label} className="min-w-52 flex-1">
+		<AgentConsoleResponsiveCards
+			items={stats}
+			getKey={(stat) => stat.label}
+			renderItem={(stat) => (
+				<Card className="h-full w-full">
 					<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>
+			)}
+		/>
 	);
 }
 
@@ -67,26 +74,18 @@ export function AgentConsoleAgentCards({
 	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>
+		<AgentConsoleResponsiveCards
+			items={agents}
+			getKey={(agent) => agent.id}
+			renderItem={(agent) => (
+				<AgentConsoleEntityCard
+					description={agent.description}
+					name={agent.name}
+					status={agent.status}
+					subtitle={`${agent.modelProvider} / ${agent.modelName}`}
+				/>
+			)}
+		/>
 	);
 }
 
@@ -96,26 +95,18 @@ export function AgentConsoleToolCards({
 	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>
+		<AgentConsoleResponsiveCards
+			items={tools}
+			getKey={(tool) => tool.id}
+			renderItem={(tool) => (
+				<AgentConsoleEntityCard
+					description={tool.description}
+					name={tool.name}
+					status={tool.status}
+					subtitle={`${tool.category} / ${tool.implementationType}`}
+				/>
+			)}
+		/>
 	);
 }
 
@@ -129,7 +120,9 @@ export function AgentConsoleMetricsPanel({
 			<Text className="font-semibold text-lg">Usage Analytics</Text>
 			<Card>
 				<CardHeader>
-					<CardTitle>Run Outcomes</CardTitle>
+					<CardTitle>
+						<Text>Run Outcomes</Text>
+					</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-col gap-3">
 					<Text>Completed: {metrics.completedRuns}</Text>
@@ -142,18 +135,3 @@ export function AgentConsoleMetricsPanel({
 		</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>
-	);
-}