@contractspec/example.agent-console 1.46.1 → 1.48.0

package/src/ui/renderers/run-list.markdown.ts

@@ -0,0 +1,75 @@
+/**
+ * Markdown Renderer for Run List Presentation
+ *
+ * Uses dynamic import for handlers to ensure correct build order.
+ */
+import type {
+  PresentationRenderer,
+  PresentationSpec,
+} from '@contractspec/lib.contracts';
+import type { Run } from '../hooks/useRunList';
+import { mockListRunsHandler } from '@contractspec/example.agent-console/handlers';
+
+interface RunListOutput {
+  items: Run[];
+  total: number;
+  hasMore: boolean;
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+/**
+ * Markdown renderer for agent-console.run.list presentation
+ * Only handles RunListView component
+ */
+export const runListMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}> = {
+  target: 'markdown',
+  render: async (desc: PresentationSpec) => {
+    // Only handle RunListView
+    if (
+      desc.source.type !== 'component' ||
+      desc.source.componentKey !== 'RunListView'
+    ) {
+      throw new Error('runListMarkdownRenderer: not RunListView');
+    }
+
+    // Fetch data using mock handler
+    const data = (await mockListRunsHandler({
+      organizationId: 'demo-org',
+      limit: 20,
+      offset: 0,
+    })) as RunListOutput;
+
+    // Generate markdown
+    const lines: string[] = [
+      `# ${desc.meta.description ?? 'Agent Runs'}`,
+      '',
+      `> ${desc.meta.key} v${desc.meta.version}`,
+      '',
+      `**Total Runs:** ${data.total}`,
+      '',
+      '## Recent Runs',
+      '',
+      '| ID | Agent | Status | Duration | Tokens | Cost |',
+      '| --- | --- | --- | --- | --- | --- |',
+    ];
+
+    for (const run of data.items.slice(0, 10)) {
+      lines.push(
+        `| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration(run.durationMs) : '-'} | ${run.totalTokens} | $${run.estimatedCostUsd?.toFixed(4) ?? '-'} |`
+      );
+    }
+
+    return {
+      mimeType: 'text/markdown',
+      body: lines.join('\n'),
+    };
+  },
+};

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

@@ -0,0 +1,91 @@
+/**
+ * Markdown Renderer for Tool Registry Presentation
+ *
+ * Uses dynamic import for handlers to ensure correct build order.
+ */
+import type {
+  PresentationRenderer,
+  PresentationSpec,
+} from '@contractspec/lib.contracts';
+import { mockListToolsHandler } from '@contractspec/example.agent-console/handlers';
+
+interface ToolItem {
+  id: string;
+  name: string;
+  description?: string;
+  version: string;
+  category: string;
+  status: string;
+}
+
+/**
+ * Markdown renderer for agent-console.tool.registry presentation
+ * Only handles ToolRegistryView component
+ */
+export const toolRegistryMarkdownRenderer: PresentationRenderer<{
+  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');
+    }
+
+    // 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}`,
+      '',
+    ];
+
+    // 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 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'),
+    };
+  },
+};

package/src/ui/views/AgentListView.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+/**
+ * Agent List View
+ *
+ * Displays a list of AI agents with their status and basic info.
+ * Uses design-system components with correct props.
+ */
+import {
+  Button,
+  StatCard,
+  StatCardGroup,
+  EntityCard,
+  StatusChip,
+  LoaderBlock,
+  ErrorState,
+  EmptyState,
+} from '@contractspec/lib.design-system';
+import { useAgentList, type Agent } from '../hooks/useAgentList';
+
+function getStatusTone(
+  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';
+  }
+}
+
+export function AgentListView() {
+  const { data, loading, error, stats, refetch } = useAgentList();
+
+  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 (!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>
+      )}
+
+      {/* 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>
+
+      {/* 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

@@ -0,0 +1,173 @@
+'use client';
+
+/**
+ * Run List View - Shows agent execution runs with stats
+ */
+import {
+  StatCard,
+  StatCardGroup,
+  StatusChip,
+  EmptyState,
+  LoaderBlock,
+  ErrorState,
+} from '@contractspec/lib.design-system';
+import { useRunList, type Run } from '../hooks/useRunList';
+
+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)}`;
+}
+
+export function RunListView({ agentId, onRunClick }: RunListViewProps) {
+  const { data, metrics, loading, error, refetch } = useRunList({ agentId });
+
+  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 (!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>
+      )}
+
+      {/* 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>
+
+      {/* Pagination */}
+      <div className="text-muted-foreground text-center text-sm">
+        Showing {data.items.length} of {data.total} runs
+      </div>
+    </div>
+  );
+}

package/src/ui/views/ToolRegistryView.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+/**
+ * Tool Registry View - Shows available tools organized by category
+ */
+import {
+  StatCard,
+  StatCardGroup,
+  StatusChip,
+  EntityCard,
+  EmptyState,
+  LoaderBlock,
+  ErrorState,
+  Button,
+} from '@contractspec/lib.design-system';
+import { useToolList, type Tool } from '../hooks/useToolList';
+
+interface ToolRegistryViewProps {
+  onToolClick?: (toolId: string) => void;
+  onCreateTool?: () => void;
+}
+
+const categoryIcons: Record<string, string> = {
+  RETRIEVAL: '🔍',
+  COMPUTATION: '🧮',
+  COMMUNICATION: '📧',
+  INTEGRATION: '🔗',
+  UTILITY: '🛠️',
+  CUSTOM: '⚙️',
+};
+
+function getStatusTone(
+  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';
+  }
+}
+
+export function ToolRegistryView({
+  onToolClick,
+  onCreateTool,
+}: ToolRegistryViewProps) {
+  const { data, loading, error, groupedByCategory, categoryStats, refetch } =
+    useToolList();
+
+  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 (!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>
+
+      {/* 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>
+
+          <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/index.ts

@@ -0,0 +1,6 @@
+/**
+ * View components for agent-console template
+ */
+export { AgentListView } from './AgentListView';
+export { RunListView } from './RunListView';
+export { ToolRegistryView } from './ToolRegistryView';