@contractspec/example.agent-console 3.7.6 → 3.7.7

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

@@ -3,17 +3,18 @@
  *
  * Uses dynamic import for handlers to ensure correct build order.
  */
+
+import { mockListToolsHandler } from '@contractspec/example.agent-console/handlers';
 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;
 }
 
 /**
@@ -21,69 +22,69 @@ interface ToolItem {
  * 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) => {
+		// 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,
-    });
+		// Fetch data using mock handler
+		const data = await mockListToolsHandler({
+			organizationId: 'demo-org',
+			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/RunListView.tsx

@@ -4,170 +4,170 @@
  * Run List View - Shows agent execution runs with stats
  */
 import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EmptyState,
-  LoaderBlock,
-  ErrorState,
+	EmptyState,
+	ErrorState,
+	LoaderBlock,
+	StatCard,
+	StatCardGroup,
+	StatusChip,
 } from '@contractspec/lib.design-system';
-import { useRunList, type Run } from '../hooks/useRunList';
+import { type Run, useRunList } from '../hooks/useRunList';
 
 interface RunListViewProps {
-  agentId?: string;
-  onRunClick?: (runId: string) => void;
+	agentId?: string;
+	onRunClick?: (runId: string) => void;
 }
 
 function getStatusTone(
-  status: Run['status']
+	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';
-  }
+	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`;
+	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`;
+	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)}`;
+	if (!cost) return '-';
+	return `$${cost.toFixed(4)}`;
 }
 
 export function RunListView({ agentId, onRunClick }: RunListViewProps) {
-  const { data, metrics, loading, error, refetch } = useRunList({ agentId });
+	const { data, metrics, loading, error, refetch } = useRunList({ agentId });
 
-  if (loading && !data) {
-    return <LoaderBlock label="Loading runs..." />;
-  }
+	if (loading && !data) {
+		return <LoaderBlock label="Loading runs..." />;
+	}
 
-  if (error) {
-    return (
-      <ErrorState
-        title="Failed to load runs"
-        description={error.message}
-        onRetry={refetch}
-        retryLabel="Retry"
-      />
-    );
-  }
+	if (error) {
+		return (
+			<ErrorState
+				title="Failed to load runs"
+				description={error.message}
+				onRetry={refetch}
+				retryLabel="Retry"
+			/>
+		);
+	}
 
-  if (!data?.items.length) {
-    return (
-      <EmptyState
-        title="No runs yet"
-        description="Execute an agent to see run history here."
-      />
-    );
-  }
+	if (!data?.items.length) {
+		return (
+			<EmptyState
+				title="No runs yet"
+				description="Execute an agent to see run history here."
+			/>
+		);
+	}
 
-  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>
-      )}
+	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>
+			)}
 
-      {/* 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>
+			{/* 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>
 
-      {/* Pagination */}
-      <div className="text-muted-foreground text-center text-sm">
-        Showing {data.items.length} of {data.total} runs
-      </div>
-    </div>
-  );
+			{/* Pagination */}
+			<div className="text-center text-muted-foreground text-sm">
+				Showing {data.items.length} of {data.total} runs
+			</div>
+		</div>
+	);
 }