@contractspec/example.agent-console 3.7.6 → 3.8.2

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

@@ -3,80 +3,100 @@
  *
  * Uses handlers from the agent-console example package.
  */
+
+import {
+	AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+	AGENT_CONSOLE_DEMO_PROJECT_ID,
+	createAgentConsoleDemoHandlers,
+} from '@contractspec/example.agent-console/shared';
 import type { PresentationSpec } from '@contractspec/lib.contracts-spec/presentations';
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
-import {
-  type AgentSummary,
-  mockListAgentsHandler,
-} from '@contractspec/example.agent-console/handlers';
 
-type Agent = AgentSummary;
+interface AgentListItem {
+	name: string;
+	description?: string;
+	status: string;
+	modelProvider: string;
+	modelName: string;
+}
 
 /**
  * Markdown renderer for agent-console.agent.list presentation
  * Only handles AgentListView component
  */
 export const agentListMarkdownRenderer: PresentationRenderer<{
-  mimeType: string;
-  body: string;
+	mimeType: string;
+	body: string;
 }> = {
-  target: 'markdown',
-  render: async (desc: PresentationSpec) => {
-    // Only handle AgentListView
-    if (
-      desc.source.type !== 'component' ||
-      desc.source.componentKey !== 'AgentListView'
-    ) {
-      throw new Error('agentListMarkdownRenderer: not AgentListView');
-    }
+	target: 'markdown',
+	render: async (desc: PresentationSpec, ctx) => {
+		// Only handle AgentListView
+		if (
+			desc.source.type !== 'component' ||
+			desc.source.componentKey !== 'AgentListView'
+		) {
+			throw new Error('agentListMarkdownRenderer: not AgentListView');
+		}
 
-    // Fetch data using mock handler
-    const data = await mockListAgentsHandler({
-      organizationId: 'demo-org',
-      limit: 50,
-      offset: 0,
-    });
+		const data: {
+			items: AgentListItem[];
+			total: number;
+			hasMore: boolean;
+		} = Array.isArray(ctx?.data)
+			? {
+					items: ctx.data as AgentListItem[],
+					total: ctx.data.length,
+					hasMore: false,
+				}
+			: await createAgentConsoleDemoHandlers({
+					projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+				}).listAgents({
+					projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+					organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+					limit: 50,
+					offset: 0,
+				});
 
-    // Generate markdown
-    const lines: string[] = [
-      `# ${desc.meta.description ?? 'Agent List'}`,
-      '',
-      `> ${desc.meta.key} v${desc.meta.version}`,
-      '',
-      `**Total Agents:** ${data.total}`,
-      '',
-      '## Agents',
-      '',
-    ];
+		// Generate markdown
+		const lines: string[] = [
+			`# ${desc.meta.description ?? 'Agent List'}`,
+			'',
+			`> ${desc.meta.key} v${desc.meta.version}`,
+			'',
+			`**Total Agents:** ${data.total}`,
+			'',
+			'## Agents',
+			'',
+		];
 
-    // Group by status
-    const byStatus: Record<string, Agent[]> = {};
-    for (const agent of data.items) {
-      const status = agent.status;
-      if (byStatus[status]) {
-        byStatus[status].push(agent);
-      } else {
-        byStatus[status] = [agent];
-      }
-    }
+		// Group by status
+		const byStatus: Record<string, AgentListItem[]> = {};
+		for (const agent of data.items) {
+			const status = agent.status;
+			if (byStatus[status]) {
+				byStatus[status].push(agent);
+			} else {
+				byStatus[status] = [agent];
+			}
+		}
 
-    for (const [status, agents] of Object.entries(byStatus)) {
-      lines.push(`### ${status} (${agents.length})`);
-      lines.push('');
-      for (const agent of agents) {
-        lines.push(
-          `- **${agent.name}** (${agent.modelProvider}/${agent.modelName})`
-        );
-        if (agent.description) {
-          lines.push(`  > ${agent.description}`);
-        }
-      }
-      lines.push('');
-    }
+		for (const [status, agents] of Object.entries(byStatus)) {
+			lines.push(`### ${status} (${agents.length})`);
+			lines.push('');
+			for (const agent of agents) {
+				lines.push(
+					`- **${agent.name}** (${agent.modelProvider}/${agent.modelName})`
+				);
+				if (agent.description) {
+					lines.push(`  > ${agent.description}`);
+				}
+			}
+			lines.push('');
+		}
 
-    return {
-      mimeType: 'text/markdown',
-      body: lines.join('\n'),
-    };
-  },
+		return {
+			mimeType: 'text/markdown',
+			body: lines.join('\n'),
+		};
+	},
 };

package/src/ui/renderers/agent-list.renderer.tsx

@@ -9,17 +9,17 @@ import { AgentListView } from '../views/AgentListView';
  * React renderer for agent-console.agent.list presentation
  */
 export const agentListReactRenderer: PresentationRenderer<React.ReactElement> =
-  {
-    target: 'react',
-    render: async (desc: PresentationSpec) => {
-      if (desc.source.type !== 'component') {
-        throw new Error('AgentListRenderer: expected component source');
-      }
-      if (desc.source.componentKey !== 'AgentListView') {
-        throw new Error(
-          `AgentListRenderer: unknown component ${desc.source.componentKey}`
-        );
-      }
-      return <AgentListView />;
-    },
-  };
+	{
+		target: 'react',
+		render: async (desc: PresentationSpec) => {
+			if (desc.source.type !== 'component') {
+				throw new Error('AgentListRenderer: expected component source');
+			}
+			if (desc.source.componentKey !== 'AgentListView') {
+				throw new Error(
+					`AgentListRenderer: unknown component ${desc.source.componentKey}`
+				);
+			}
+			return <AgentListView />;
+		},
+	};

package/src/ui/renderers/dashboard.markdown.ts

@@ -3,18 +3,19 @@
  *
  * Provides a comprehensive overview of agents, runs, and tools.
  */
+
+import {
+	type AgentConsoleDashboardData,
+	getFallbackAgentConsoleDashboardData,
+} from '@contractspec/example.agent-console/shared';
 import type { PresentationSpec } from '@contractspec/lib.contracts-spec/presentations';
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
-import {
-  mockListAgentsHandler,
-  mockListRunsHandler,
-  mockListToolsHandler,
-} from '@contractspec/example.agent-console/handlers';
+import { createAgentVisualizationItems } from '../../visualizations';
 
 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`;
+	if (ms < 1000) return `${ms}ms`;
+	if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+	return `${(ms / 60000).toFixed(1)}m`;
 }
 
 /**
@@ -22,146 +23,141 @@ function formatDuration(ms: number): string {
  * Only handles AgentConsoleDashboard component
  */
 export const agentDashboardMarkdownRenderer: PresentationRenderer<{
-  mimeType: string;
-  body: string;
+	mimeType: string;
+	body: string;
 }> = {
-  target: 'markdown',
-  render: async (desc: PresentationSpec) => {
-    // Only handle AgentConsoleDashboard
-    if (
-      desc.source.type !== 'component' ||
-      desc.source.componentKey !== 'AgentConsoleDashboard'
-    ) {
-      throw new Error(
-        'agentDashboardMarkdownRenderer: not AgentConsoleDashboard'
-      );
-    }
+	target: 'markdown',
+	render: async (desc: PresentationSpec, ctx) => {
+		// Only handle AgentConsoleDashboard
+		if (
+			desc.source.type !== 'component' ||
+			desc.source.componentKey !== 'AgentConsoleDashboard'
+		) {
+			throw new Error(
+				'agentDashboardMarkdownRenderer: not AgentConsoleDashboard'
+			);
+		}
+
+		const data =
+			(ctx?.data as AgentConsoleDashboardData | undefined) ??
+			(await getFallbackAgentConsoleDashboardData());
 
-    // Fetch all data in parallel
-    const [agentsData, runsData, toolsData] = await Promise.all([
-      mockListAgentsHandler({
-        organizationId: 'demo-org',
-        limit: 100,
-      }),
-      mockListRunsHandler({
-        limit: 100,
-      }),
-      mockListToolsHandler({
-        organizationId: 'demo-org',
-        limit: 100,
-      }),
-    ]);
+		// Calculate stats
+		const activeAgents = data.agents.filter(
+			(a) => a.status === 'ACTIVE'
+		).length;
+		const completedRuns = data.runs.filter(
+			(r) => r.status === 'COMPLETED'
+		).length;
+		const failedRuns = data.runs.filter((r) => r.status === 'FAILED').length;
+		const totalTokens = data.runs.reduce(
+			(sum, r) => sum + (r.totalTokens ?? 0),
+			0
+		);
+		const totalCost = data.runs.reduce(
+			(sum, r) => sum + (r.estimatedCostUsd ?? 0),
+			0
+		);
+		const activeTools = data.tools.filter((t) => t.status === 'ACTIVE').length;
+		const visualizationItems = createAgentVisualizationItems(data.runs);
 
-    // Calculate stats
-    const activeAgents = agentsData.items.filter(
-      (a) => a.status === 'ACTIVE'
-    ).length;
-    const completedRuns = runsData.items.filter(
-      (r) => r.status === 'COMPLETED'
-    ).length;
-    const failedRuns = runsData.items.filter(
-      (r) => r.status === 'FAILED'
-    ).length;
-    const totalTokens = runsData.items.reduce(
-      (sum, r) => sum + (r.totalTokens ?? 0),
-      0
-    );
-    const totalCost = runsData.items.reduce(
-      (sum, r) => sum + (r.estimatedCostUsd ?? 0),
-      0
-    );
-    const activeTools = toolsData.items.filter(
-      (t) => t.status === 'ACTIVE'
-    ).length;
+		// Build dashboard markdown
+		const lines: string[] = [
+			'# Agent Console Dashboard',
+			'',
+			'> AI agent operations overview',
+			'',
+			'## Summary',
+			'',
+			'| Metric | Value |',
+			'|--------|-------|',
+			`| Total Agents | ${data.summary.totalAgents} |`,
+			`| Active Agents | ${activeAgents} |`,
+			`| Total Runs | ${data.summary.totalRuns} |`,
+			`| Completed Runs | ${completedRuns} |`,
+			`| Failed Runs | ${failedRuns} |`,
+			`| Total Tokens | ${totalTokens.toLocaleString()} |`,
+			`| Total Cost | $${totalCost.toFixed(4)} |`,
+			`| Total Tools | ${data.summary.totalTools} |`,
+			`| Active Tools | ${activeTools} |`,
+			'',
+			'## Agents',
+			'',
+		];
 
-    // Build dashboard markdown
-    const lines: string[] = [
-      '# Agent Console Dashboard',
-      '',
-      '> AI agent operations overview',
-      '',
-      '## Summary',
-      '',
-      '| Metric | Value |',
-      '|--------|-------|',
-      `| Total Agents | ${agentsData.total} |`,
-      `| Active Agents | ${activeAgents} |`,
-      `| Total Runs | ${runsData.total} |`,
-      `| Completed Runs | ${completedRuns} |`,
-      `| Failed Runs | ${failedRuns} |`,
-      `| Total Tokens | ${totalTokens.toLocaleString()} |`,
-      `| Total Cost | $${totalCost.toFixed(4)} |`,
-      `| Total Tools | ${toolsData.total} |`,
-      `| Active Tools | ${activeTools} |`,
-      '',
-      '## Agents',
-      '',
-    ];
+		// Agent list
+		if (data.agents.length === 0) {
+			lines.push('_No agents configured._');
+		} else {
+			lines.push('| Agent | Model | Status | Description |');
+			lines.push('|-------|-------|--------|-------------|');
+			for (const agent of data.agents.slice(0, 5)) {
+				lines.push(
+					`| ${agent.name} | ${agent.modelProvider}/${agent.modelName} | ${agent.status} | ${agent.description ?? '-'} |`
+				);
+			}
+			if (data.agents.length > 5) {
+				lines.push(
+					`| ... | ... | ... | _${data.summary.totalAgents - 5} more_ |`
+				);
+			}
+		}
 
-    // Agent list
-    if (agentsData.items.length === 0) {
-      lines.push('_No agents configured._');
-    } else {
-      lines.push('| Agent | Model | Status | Description |');
-      lines.push('|-------|-------|--------|-------------|');
-      for (const agent of agentsData.items.slice(0, 5)) {
-        lines.push(
-          `| ${agent.name} | ${agent.modelProvider}/${agent.modelName} | ${agent.status} | ${agent.description ?? '-'} |`
-        );
-      }
-      if (agentsData.items.length > 5) {
-        lines.push(`| ... | ... | ... | _${agentsData.total - 5} more_ |`);
-      }
-    }
+		lines.push('');
+		lines.push('## Recent Runs');
+		lines.push('');
 
-    lines.push('');
-    lines.push('## Recent Runs');
-    lines.push('');
+		// Recent runs
+		if (data.runs.length === 0) {
+			lines.push('_No runs yet._');
+		} else {
+			lines.push('| Run ID | Agent | Status | Duration | Tokens | Cost |');
+			lines.push('|--------|-------|--------|----------|--------|------|');
+			for (const run of data.runs.slice(0, 5)) {
+				lines.push(
+					`| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration(run.durationMs) : '-'} | ${run.totalTokens ?? 0} | $${(run.estimatedCostUsd ?? 0).toFixed(4)} |`
+				);
+			}
+			if (data.runs.length > 5) {
+				lines.push(
+					`| ... | ... | ... | ... | ... | _${data.summary.totalRuns - 5} more_ |`
+				);
+			}
+		}
 
-    // Recent runs
-    if (runsData.items.length === 0) {
-      lines.push('_No runs yet._');
-    } else {
-      lines.push('| Run ID | Agent | Status | Duration | Tokens | Cost |');
-      lines.push('|--------|-------|--------|----------|--------|------|');
-      for (const run of runsData.items.slice(0, 5)) {
-        lines.push(
-          `| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration(run.durationMs) : '-'} | ${run.totalTokens ?? 0} | $${(run.estimatedCostUsd ?? 0).toFixed(4)} |`
-        );
-      }
-      if (runsData.items.length > 5) {
-        lines.push(
-          `| ... | ... | ... | ... | ... | _${runsData.total - 5} more_ |`
-        );
-      }
-    }
+		lines.push('');
+		lines.push('## Visualization Overview');
+		lines.push('');
+		for (const item of visualizationItems) {
+			lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
+		}
 
-    lines.push('');
-    lines.push('## Tools');
-    lines.push('');
+		lines.push('');
+		lines.push('## Tools');
+		lines.push('');
 
-    // Tool categories
-    const toolsByCategory: Record<string, typeof toolsData.items> = {};
-    for (const tool of toolsData.items) {
-      const cat = tool.category;
-      if (!toolsByCategory[cat]) toolsByCategory[cat] = [];
-      toolsByCategory[cat].push(tool);
-    }
+		// Tool categories
+		const toolsByCategory: Record<string, typeof data.tools> = {};
+		for (const tool of data.tools) {
+			const cat = tool.category;
+			if (!toolsByCategory[cat]) toolsByCategory[cat] = [];
+			toolsByCategory[cat].push(tool);
+		}
 
-    if (Object.keys(toolsByCategory).length === 0) {
-      lines.push('_No tools registered._');
-    } else {
-      lines.push('| Category | Tools | Active |');
-      lines.push('|----------|-------|--------|');
-      for (const [category, tools] of Object.entries(toolsByCategory).sort()) {
-        const active = tools.filter((t) => t.status === 'ACTIVE').length;
-        lines.push(`| ${category} | ${tools.length} | ${active} |`);
-      }
-    }
+		if (Object.keys(toolsByCategory).length === 0) {
+			lines.push('_No tools registered._');
+		} else {
+			lines.push('| Category | Tools | Active |');
+			lines.push('|----------|-------|--------|');
+			for (const [category, tools] of Object.entries(toolsByCategory).sort()) {
+				const active = tools.filter((t) => t.status === 'ACTIVE').length;
+				lines.push(`| ${category} | ${tools.length} | ${active} |`);
+			}
+		}
 
-    return {
-      mimeType: 'text/markdown',
-      body: lines.join('\n'),
-    };
-  },
+		return {
+			mimeType: 'text/markdown',
+			body: lines.join('\n'),
+		};
+	},
 };

package/src/ui/renderers/index.ts

@@ -2,11 +2,10 @@
  * Renderers for agent-console presentations
  */
 
-// React renderers
-export { agentListReactRenderer } from './agent-list.renderer';
-
 // Markdown renderers
 export { agentListMarkdownRenderer } from './agent-list.markdown';
+// React renderers
+export { agentListReactRenderer } from './agent-list.renderer';
+export { agentDashboardMarkdownRenderer } from './dashboard.markdown';
 export { runListMarkdownRenderer } from './run-list.markdown';
 export { toolRegistryMarkdownRenderer } from './tool-registry.markdown';
-export { agentDashboardMarkdownRenderer } from './dashboard.markdown';

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

@@ -3,21 +3,25 @@
  *
  * Uses dynamic import for handlers to ensure correct build order.
  */
+
+import {
+	AGENT_CONSOLE_DEMO_PROJECT_ID,
+	createAgentConsoleDemoHandlers,
+} from '@contractspec/example.agent-console/shared';
 import type { PresentationSpec } from '@contractspec/lib.contracts-spec/presentations';
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
 import type { Run } from '../hooks/useRunList';
-import { mockListRunsHandler } from '@contractspec/example.agent-console/handlers';
 
 interface RunListOutput {
-  items: Run[];
-  total: number;
-  hasMore: boolean;
+	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`;
+	if (ms < 1000) return `${ms}ms`;
+	if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+	return `${(ms / 60000).toFixed(1)}m`;
 }
 
 /**
@@ -25,49 +29,54 @@ function formatDuration(ms: number): string {
  * Only handles RunListView component
  */
 export const runListMarkdownRenderer: PresentationRenderer<{
-  mimeType: string;
-  body: string;
+	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');
-    }
+	target: 'markdown',
+	render: async (desc: PresentationSpec, ctx) => {
+		// 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;
+		const data = (
+			Array.isArray(ctx?.data)
+				? { items: ctx.data as Run[], total: ctx.data.length, hasMore: false }
+				: await createAgentConsoleDemoHandlers({
+						projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+					}).listRuns({
+						projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+						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 |',
-      '| --- | --- | --- | --- | --- | --- |',
-    ];
+		// 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) ?? '-'} |`
-      );
-    }
+		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'),
-    };
-  },
+		return {
+			mimeType: 'text/markdown',
+			body: lines.join('\n'),
+		};
+	},
 };