@contractspec/example.agent-console 3.7.6 → 3.8.2

package/src/ui/AgentDashboard.visualizations.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import {
+	VisualizationCard,
+	VisualizationGrid,
+} from '@contractspec/lib.design-system';
+import { createAgentVisualizationItems } from '../visualizations';
+import type { Run } from './hooks/useRunList';
+
+export function AgentVisualizationOverview({ runs }: { runs: Run[] }) {
+	const items = createAgentVisualizationItems(runs);
+
+	return (
+		<section className="space-y-3">
+			<div>
+				<h3 className="font-semibold text-lg">Operational Visualizations</h3>
+				<p className="text-muted-foreground text-sm">
+					Contract-backed charts derived from recent run activity.
+				</p>
+			</div>
+			<VisualizationGrid>
+				{items.map((item) => (
+					<VisualizationCard
+						key={item.key}
+						data={item.data}
+						description={item.description}
+						height={item.height}
+						spec={item.spec}
+						title={item.title}
+					/>
+				))}
+			</VisualizationGrid>
+		</section>
+	);
+}

package/src/ui/hooks/index.ts

@@ -3,12 +3,12 @@
 /**
  * Data hooks for agent-console template
  */
-export { useAgentList, type UseAgentListOptions } from './useAgentList';
-export { useRunList, type UseRunListOptions } from './useRunList';
-export { useToolList, type UseToolListOptions } from './useToolList';
+export { type UseAgentListOptions, useAgentList } from './useAgentList';
 export {
-  useAgentMutations,
-  type UseAgentMutationsOptions,
-  type CreateAgentInput,
-  type UpdateAgentInput,
+	type CreateAgentInput,
+	type UpdateAgentInput,
+	type UseAgentMutationsOptions,
+	useAgentMutations,
 } from './useAgentMutations';
+export { type UseRunListOptions, useRunList } from './useRunList';
+export { type UseToolListOptions, useToolList } from './useToolList';

package/src/ui/hooks/useAgentList.ts

@@ -3,78 +3,79 @@
  *
  * Uses runtime-local database-backed handlers.
  */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+
 import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type {
-  Agent as RuntimeAgent,
-  ListAgentsOutput as RuntimeListAgentsOutput,
+	AgentHandlers,
+	Agent as RuntimeAgent,
+	ListAgentsOutput as RuntimeListAgentsOutput,
 } from '../../handlers/agent.handlers';
-import type { AgentHandlers } from '../../handlers/agent.handlers';
 
 // Re-export types for convenience
 export type Agent = RuntimeAgent;
 export type ListAgentsOutput = RuntimeListAgentsOutput;
 
 export interface UseAgentListOptions {
-  search?: string;
-  status?: 'DRAFT' | 'ACTIVE' | 'PAUSED' | 'ARCHIVED' | 'all';
-  limit?: number;
+	search?: string;
+	status?: 'DRAFT' | 'ACTIVE' | 'PAUSED' | 'ARCHIVED' | 'all';
+	limit?: number;
 }
 
 export function useAgentList(options: UseAgentListOptions = {}) {
-  const { handlers, projectId } = useTemplateRuntime<{
-    agent: AgentHandlers;
-  }>();
-  const { agent } = handlers;
+	const { handlers, projectId } = useTemplateRuntime<{
+		agent: AgentHandlers;
+	}>();
+	const { agent } = handlers;
 
-  const [data, setData] = useState<ListAgentsOutput | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-  const [page, setPage] = useState(1);
+	const [data, setData] = useState<ListAgentsOutput | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<Error | null>(null);
+	const [page, setPage] = useState(1);
 
-  const fetchData = useCallback(async () => {
-    setLoading(true);
-    setError(null);
+	const fetchData = useCallback(async () => {
+		setLoading(true);
+		setError(null);
 
-    try {
-      const result = await agent.listAgents({
-        projectId,
-        search: options.search,
-        status: options.status === 'all' ? undefined : options.status,
-        limit: options.limit ?? 20,
-        offset: (page - 1) * (options.limit ?? 20),
-      });
-      setData(result);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error('Unknown error'));
-    } finally {
-      setLoading(false);
-    }
-  }, [agent, projectId, options.search, options.status, options.limit, page]);
+		try {
+			const result = await agent.listAgents({
+				projectId,
+				search: options.search,
+				status: options.status === 'all' ? undefined : options.status,
+				limit: options.limit ?? 20,
+				offset: (page - 1) * (options.limit ?? 20),
+			});
+			setData(result);
+		} catch (err) {
+			setError(err instanceof Error ? err : new Error('Unknown error'));
+		} finally {
+			setLoading(false);
+		}
+	}, [agent, projectId, options.search, options.status, options.limit, page]);
 
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
 
-  // Calculate stats
-  const stats = useMemo(() => {
-    if (!data) return null;
-    return {
-      total: data.total,
-      active: data.items.filter((a) => a.status === 'ACTIVE').length,
-      paused: data.items.filter((a) => a.status === 'PAUSED').length,
-      draft: data.items.filter((a) => a.status === 'DRAFT').length,
-    };
-  }, [data]);
+	// Calculate stats
+	const stats = useMemo(() => {
+		if (!data) return null;
+		return {
+			total: data.total,
+			active: data.items.filter((a) => a.status === 'ACTIVE').length,
+			paused: data.items.filter((a) => a.status === 'PAUSED').length,
+			draft: data.items.filter((a) => a.status === 'DRAFT').length,
+		};
+	}, [data]);
 
-  return {
-    data,
-    loading,
-    error,
-    stats,
-    page,
-    refetch: fetchData,
-    nextPage: () => setPage((p) => p + 1),
-    prevPage: () => page > 1 && setPage((p) => p - 1),
-  };
+	return {
+		data,
+		loading,
+		error,
+		stats,
+		page,
+		refetch: fetchData,
+		nextPage: () => setPage((p) => p + 1),
+		prevPage: () => page > 1 && setPage((p) => p - 1),
+	};
 }

package/src/ui/hooks/useAgentMutations.ts

@@ -5,176 +5,185 @@
  * - CreateAgentCommand
  * - UpdateAgentCommand
  */
-import { useCallback, useState } from 'react';
+
 import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { useCallback, useState } from 'react';
 import type {
-  Agent,
-  Run,
-  CreateAgentInput,
-  UpdateAgentInput,
-  AgentHandlers,
+	Agent,
+	AgentHandlers,
+	CreateAgentInput,
+	Run,
+	UpdateAgentInput,
 } from '../../handlers/agent.handlers';
+import { AGENT_CONSOLE_DEMO_ORGANIZATION_ID } from '../../shared/demo-runtime-seed';
 
 export interface MutationState<T> {
-  loading: boolean;
-  error: Error | null;
-  data: T | null;
+	loading: boolean;
+	error: Error | null;
+	data: T | null;
 }
 
 export interface UseAgentMutationsOptions {
-  onSuccess?: () => void;
-  onError?: (error: Error) => void;
+	onSuccess?: () => void;
+	onError?: (error: Error) => void;
+}
+
+function normalizeMutationError(
+	error: unknown,
+	fallbackMessage: string
+): Error {
+	return error instanceof Error ? error : new Error(fallbackMessage);
 }
 
 export function useAgentMutations(options: UseAgentMutationsOptions = {}) {
-  const { handlers, projectId } = useTemplateRuntime<{
-    agent: AgentHandlers;
-  }>();
-  const { agent } = handlers;
-
-  const [createState, setCreateState] = useState<MutationState<Agent>>({
-    loading: false,
-    error: null,
-    data: null,
-  });
-
-  const [updateState, setUpdateState] = useState<MutationState<Agent>>({
-    loading: false,
-    error: null,
-    data: null,
-  });
-
-  const [executeState, setExecuteState] = useState<MutationState<Run>>({
-    loading: false,
-    error: null,
-    data: null,
-  });
-
-  /**
-   * Create a new agent
-   */
-  const createAgent = useCallback(
-    async (input: CreateAgentInput): Promise<Agent | null> => {
-      setCreateState({ loading: true, error: null, data: null });
-      try {
-        const result = await agent.createAgent(input, {
-          projectId,
-          organizationId: 'demo-org',
-        });
-        setCreateState({ loading: false, error: null, data: result });
-        options.onSuccess?.();
-        return result;
-      } catch (err) {
-        const error =
-          err instanceof Error ? err : new Error('Failed to create agent');
-        setCreateState({ loading: false, error, data: null });
-        options.onError?.(error);
-        return null;
-      }
-    },
-    [agent, projectId, options]
-  );
-
-  /**
-   * Update an agent (name, status)
-   */
-  const updateAgent = useCallback(
-    async (input: UpdateAgentInput): Promise<Agent | null> => {
-      setUpdateState({ loading: true, error: null, data: null });
-      try {
-        const result = await agent.updateAgent(input);
-        setUpdateState({ loading: false, error: null, data: result });
-        options.onSuccess?.();
-        return result;
-      } catch (err) {
-        const error =
-          err instanceof Error ? err : new Error('Failed to update agent');
-        setUpdateState({ loading: false, error, data: null });
-        options.onError?.(error);
-        return null;
-      }
-    },
-    [agent, options]
-  );
-
-  /**
-   * Activate an agent
-   */
-  const activateAgent = useCallback(
-    async (agentId: string): Promise<Agent | null> => {
-      return updateAgent({ id: agentId, status: 'ACTIVE' });
-    },
-    [updateAgent]
-  );
-
-  /**
-   * Pause an agent
-   */
-  const pauseAgent = useCallback(
-    async (agentId: string): Promise<Agent | null> => {
-      return updateAgent({ id: agentId, status: 'PAUSED' });
-    },
-    [updateAgent]
-  );
-
-  /**
-   * Archive an agent
-   */
-  const archiveAgent = useCallback(
-    async (agentId: string): Promise<Agent | null> => {
-      return updateAgent({ id: agentId, status: 'ARCHIVED' });
-    },
-    [updateAgent]
-  );
-
-  /**
-   * Execute an agent (creates a queued run).
-   */
-  const executeAgent = useCallback(
-    async (input: {
-      agentId: string;
-      message: string;
-    }): Promise<Run | null> => {
-      setExecuteState({ loading: true, error: null, data: null });
-      try {
-        const result = await agent.executeAgent({
-          agentId: input.agentId,
-          message: input.message,
-          context: { projectId, organizationId: 'demo-org' },
-        });
-        setExecuteState({ loading: false, error: null, data: result });
-        options.onSuccess?.();
-        return result;
-      } catch (err) {
-        const error =
-          err instanceof Error ? err : new Error('Failed to execute agent');
-        setExecuteState({ loading: false, error, data: null });
-        options.onError?.(error);
-        return null;
-      }
-    },
-    [agent, projectId, options]
-  );
-
-  return {
-    // Mutations
-    createAgent,
-    updateAgent,
-    activateAgent,
-    pauseAgent,
-    archiveAgent,
-    executeAgent,
-
-    // State
-    createState,
-    updateState,
-    executeState,
-
-    // Convenience
-    isLoading:
-      createState.loading || updateState.loading || executeState.loading,
-  };
+	const { handlers, projectId } = useTemplateRuntime<{
+		agent: AgentHandlers;
+	}>();
+	const { agent } = handlers;
+
+	const [createState, setCreateState] = useState<MutationState<Agent>>({
+		loading: false,
+		error: null,
+		data: null,
+	});
+
+	const [updateState, setUpdateState] = useState<MutationState<Agent>>({
+		loading: false,
+		error: null,
+		data: null,
+	});
+
+	const [executeState, setExecuteState] = useState<MutationState<Run>>({
+		loading: false,
+		error: null,
+		data: null,
+	});
+
+	/**
+	 * Create a new agent
+	 */
+	const createAgent = useCallback(
+		async (input: CreateAgentInput): Promise<Agent | null> => {
+			setCreateState({ loading: true, error: null, data: null });
+			try {
+				const result = await agent.createAgent(input, {
+					projectId,
+					organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+				});
+				setCreateState({ loading: false, error: null, data: result });
+				options.onSuccess?.();
+				return result;
+			} catch (err) {
+				const error = normalizeMutationError(err, 'Failed to create agent');
+				setCreateState({ loading: false, error, data: null });
+				options.onError?.(error);
+				throw error;
+			}
+		},
+		[agent, projectId, options]
+	);
+
+	/**
+	 * Update an agent (name, status)
+	 */
+	const updateAgent = useCallback(
+		async (input: UpdateAgentInput): Promise<Agent | null> => {
+			setUpdateState({ loading: true, error: null, data: null });
+			try {
+				const result = await agent.updateAgent(input);
+				setUpdateState({ loading: false, error: null, data: result });
+				options.onSuccess?.();
+				return result;
+			} catch (err) {
+				const error = normalizeMutationError(err, 'Failed to update agent');
+				setUpdateState({ loading: false, error, data: null });
+				options.onError?.(error);
+				throw error;
+			}
+		},
+		[agent, options]
+	);
+
+	/**
+	 * Activate an agent
+	 */
+	const activateAgent = useCallback(
+		async (agentId: string): Promise<Agent | null> => {
+			return updateAgent({ id: agentId, status: 'ACTIVE' });
+		},
+		[updateAgent]
+	);
+
+	/**
+	 * Pause an agent
+	 */
+	const pauseAgent = useCallback(
+		async (agentId: string): Promise<Agent | null> => {
+			return updateAgent({ id: agentId, status: 'PAUSED' });
+		},
+		[updateAgent]
+	);
+
+	/**
+	 * Archive an agent
+	 */
+	const archiveAgent = useCallback(
+		async (agentId: string): Promise<Agent | null> => {
+			return updateAgent({ id: agentId, status: 'ARCHIVED' });
+		},
+		[updateAgent]
+	);
+
+	/**
+	 * Execute an agent (creates a queued run).
+	 */
+	const executeAgent = useCallback(
+		async (input: {
+			agentId: string;
+			message: string;
+		}): Promise<Run | null> => {
+			setExecuteState({ loading: true, error: null, data: null });
+			try {
+				const result = await agent.executeAgent({
+					agentId: input.agentId,
+					message: input.message,
+					context: {
+						projectId,
+						organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+					},
+				});
+				setExecuteState({ loading: false, error: null, data: result });
+				options.onSuccess?.();
+				return result;
+			} catch (err) {
+				const error = normalizeMutationError(err, 'Failed to execute agent');
+				setExecuteState({ loading: false, error, data: null });
+				options.onError?.(error);
+				throw error;
+			}
+		},
+		[agent, projectId, options]
+	);
+
+	return {
+		// Mutations
+		createAgent,
+		updateAgent,
+		activateAgent,
+		pauseAgent,
+		archiveAgent,
+		executeAgent,
+
+		// State
+		createState,
+		updateState,
+		executeState,
+
+		// Convenience
+		isLoading:
+			createState.loading || updateState.loading || executeState.loading,
+	};
 }
 
 // Re-export types for convenience
-export type { CreateAgentInput, UpdateAgentInput, Agent, Run };
+export type { Agent, CreateAgentInput, Run, UpdateAgentInput };