@contractspec/example.agent-console 3.7.6 → 3.8.2

package/src/ui/hooks/useRunList.ts

@@ -3,13 +3,15 @@
  *
  * Uses runtime-local database-backed handlers.
  */
-import { useCallback, useEffect, useState } from 'react';
+
 import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import type { ContractTableSort } from '@contractspec/lib.presentation-runtime-core';
+import { useCallback, useEffect, useState } from 'react';
 import type {
-  ListRunsOutput as RuntimeListRunsOutput,
-  Run as RuntimeRun,
-  RunMetrics as RuntimeRunMetrics,
-  AgentHandlers,
+	AgentHandlers,
+	ListRunsOutput as RuntimeListRunsOutput,
+	Run as RuntimeRun,
+	RunMetrics as RuntimeRunMetrics,
 } from '../../handlers/agent.handlers';
 
 // Re-export types for convenience
@@ -18,64 +20,95 @@ export type ListRunsOutput = RuntimeListRunsOutput;
 export type RunMetrics = RuntimeRunMetrics;
 
 export interface UseRunListOptions {
-  agentId?: string;
-  status?: Run['status'] | 'all';
-  limit?: number;
+	agentId?: string;
+	status?: Run['status'] | 'all';
+	limit?: number;
+	pageIndex?: number;
+	pageSize?: number;
+	sorting?: ContractTableSort[];
 }
 
 export function useRunList(options: UseRunListOptions = {}) {
-  const { handlers, projectId } = useTemplateRuntime<{
-    agent: AgentHandlers;
-  }>();
-  const { agent } = handlers;
+	const { handlers, projectId } = useTemplateRuntime<{
+		agent: AgentHandlers;
+	}>();
+	const { agent } = handlers;
+
+	const [data, setData] = useState<ListRunsOutput | null>(null);
+	const [metrics, setMetrics] = useState<RunMetrics | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<Error | null>(null);
+	const [internalPageIndex, setInternalPageIndex] = useState(0);
+
+	const pageSize = options.pageSize ?? options.limit ?? 20;
+	const pageIndex = options.pageIndex ?? internalPageIndex;
+	const [sort] = options.sorting ?? [];
 
-  const [data, setData] = useState<ListRunsOutput | null>(null);
-  const [metrics, setMetrics] = useState<RunMetrics | 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 [runsResult, metricsResult] = await Promise.all([
+				agent.listRuns({
+					projectId,
+					agentId: options.agentId,
+					status: options.status === 'all' ? undefined : options.status,
+					sortBy: sort?.id as
+						| 'queuedAt'
+						| 'totalTokens'
+						| 'durationMs'
+						| 'estimatedCostUsd'
+						| 'status'
+						| 'agentName'
+						| undefined,
+					sortDirection: sort ? (sort.desc ? 'desc' : 'asc') : undefined,
+					limit: pageSize,
+					offset: pageIndex * pageSize,
+				}),
+				agent.getRunMetrics({
+					projectId,
+					agentId: options.agentId,
+				}),
+			]);
+			setData(runsResult);
+			setMetrics(metricsResult);
+		} catch (err) {
+			setError(err instanceof Error ? err : new Error('Unknown error'));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		agent,
+		pageIndex,
+		pageSize,
+		projectId,
+		options.agentId,
+		options.status,
+		sort?.desc,
+		sort?.id,
+	]);
 
-    try {
-      const [runsResult, metricsResult] = await Promise.all([
-        agent.listRuns({
-          projectId,
-          agentId: options.agentId,
-          status: options.status === 'all' ? undefined : options.status,
-          limit: options.limit ?? 20,
-          offset: (page - 1) * (options.limit ?? 20),
-        }),
-        agent.getRunMetrics({
-          projectId,
-          agentId: options.agentId,
-          startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // 30 days ago
-          endDate: new Date(),
-        }),
-      ]);
-      setData(runsResult);
-      setMetrics(metricsResult);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error('Unknown error'));
-    } finally {
-      setLoading(false);
-    }
-  }, [agent, projectId, options.agentId, options.status, options.limit, page]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
 
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+	const hasControlledPagination = options.pageIndex !== undefined;
 
-  return {
-    data,
-    metrics,
-    loading,
-    error,
-    page,
-    refetch: fetchData,
-    nextPage: () => setPage((p) => p + 1),
-    prevPage: () => page > 1 && setPage((p) => p - 1),
-  };
+	return {
+		data,
+		metrics,
+		loading,
+		error,
+		page: pageIndex + 1,
+		pageIndex,
+		pageSize,
+		refetch: fetchData,
+		nextPage: hasControlledPagination
+			? undefined
+			: () => setInternalPageIndex((current) => current + 1),
+		prevPage: hasControlledPagination
+			? undefined
+			: () => setInternalPageIndex((current) => Math.max(0, current - 1)),
+	};
 }

package/src/ui/hooks/useToolList.ts

@@ -3,12 +3,13 @@
  *
  * 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 {
-  ListToolsOutput as RuntimeListToolsOutput,
-  Tool as RuntimeTool,
-  AgentHandlers,
+	AgentHandlers,
+	ListToolsOutput as RuntimeListToolsOutput,
+	Tool as RuntimeTool,
 } from '../../handlers/agent.handlers';
 
 // Re-export types for convenience
@@ -19,104 +20,104 @@ export type ToolCategory = Tool['category'];
 export type ToolStatus = Tool['status'];
 
 export interface UseToolListOptions {
-  search?: string;
-  category?: ToolCategory;
-  status?: ToolStatus | 'all';
-  limit?: number;
+	search?: string;
+	category?: ToolCategory;
+	status?: ToolStatus | 'all';
+	limit?: number;
 }
 
 export function useToolList(options: UseToolListOptions = {}) {
-  const { handlers, projectId } = useTemplateRuntime<{
-    agent: AgentHandlers;
-  }>();
-  const { agent } = handlers;
-
-  const [data, setData] = useState<ListToolsOutput | 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);
-
-    try {
-      const result = await agent.listTools({
-        projectId,
-        search: options.search,
-        category: options.category,
-        status: options.status === 'all' ? undefined : options.status,
-        limit: options.limit ?? 50,
-        offset: (page - 1) * (options.limit ?? 50),
-      });
-      setData(result);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error('Unknown error'));
-    } finally {
-      setLoading(false);
-    }
-  }, [
-    agent,
-    projectId,
-    options.search,
-    options.category,
-    options.status,
-    options.limit,
-    page,
-  ]);
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-  // Calculate stats and grouping
-  const { stats, groupedByCategory, categoryStats } = useMemo(() => {
-    if (!data) return { stats: null, groupedByCategory: {}, categoryStats: [] };
-    const items = data.items;
-
-    const active = items.filter((t) => t.status === 'ACTIVE').length;
-    const deprecated = items.filter((t) => t.status === 'DEPRECATED').length;
-    const disabled = items.filter((t) => t.status === 'DISABLED').length;
-
-    // Group by category
-    const grouped: Record<string, Tool[]> = {};
-    const byCategory: Record<string, number> = {};
-
-    items.forEach((t) => {
-      const cat = t.category;
-      if (!grouped[cat]) grouped[cat] = [];
-      grouped[cat].push(t);
-      byCategory[cat] = (byCategory[cat] || 0) + 1;
-    });
-
-    // Category stats sorted by count
-    const catStats = Object.entries(byCategory)
-      .map(([category, count]) => ({ category, count }))
-      .sort((a, b) => b.count - a.count);
-
-    return {
-      stats: {
-        total: data.total,
-        active,
-        deprecated,
-        disabled,
-        topCategories: catStats.slice(0, 5),
-      },
-      groupedByCategory: grouped,
-      categoryStats: catStats,
-    };
-  }, [data]);
-
-  return {
-    data,
-    loading,
-    error,
-    stats,
-    groupedByCategory,
-    categoryStats,
-    page,
-    refetch: fetchData,
-    nextPage: () => setPage((p) => p + 1),
-    prevPage: () => page > 1 && setPage((p) => p - 1),
-  };
+	const { handlers, projectId } = useTemplateRuntime<{
+		agent: AgentHandlers;
+	}>();
+	const { agent } = handlers;
+
+	const [data, setData] = useState<ListToolsOutput | 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);
+
+		try {
+			const result = await agent.listTools({
+				projectId,
+				search: options.search,
+				category: options.category,
+				status: options.status === 'all' ? undefined : options.status,
+				limit: options.limit ?? 50,
+				offset: (page - 1) * (options.limit ?? 50),
+			});
+			setData(result);
+		} catch (err) {
+			setError(err instanceof Error ? err : new Error('Unknown error'));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		agent,
+		projectId,
+		options.search,
+		options.category,
+		options.status,
+		options.limit,
+		page,
+	]);
+
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+
+	// Calculate stats and grouping
+	const { stats, groupedByCategory, categoryStats } = useMemo(() => {
+		if (!data) return { stats: null, groupedByCategory: {}, categoryStats: [] };
+		const items = data.items;
+
+		const active = items.filter((t) => t.status === 'ACTIVE').length;
+		const deprecated = items.filter((t) => t.status === 'DEPRECATED').length;
+		const disabled = items.filter((t) => t.status === 'DISABLED').length;
+
+		// Group by category
+		const grouped: Record<string, Tool[]> = {};
+		const byCategory: Record<string, number> = {};
+
+		items.forEach((t) => {
+			const cat = t.category;
+			if (!grouped[cat]) grouped[cat] = [];
+			grouped[cat].push(t);
+			byCategory[cat] = (byCategory[cat] || 0) + 1;
+		});
+
+		// Category stats sorted by count
+		const catStats = Object.entries(byCategory)
+			.map(([category, count]) => ({ category, count }))
+			.sort((a, b) => b.count - a.count);
+
+		return {
+			stats: {
+				total: data.total,
+				active,
+				deprecated,
+				disabled,
+				topCategories: catStats.slice(0, 5),
+			},
+			groupedByCategory: grouped,
+			categoryStats: catStats,
+		};
+	}, [data]);
+
+	return {
+		data,
+		loading,
+		error,
+		stats,
+		groupedByCategory,
+		categoryStats,
+		page,
+		refetch: fetchData,
+		nextPage: () => setPage((p) => p + 1),
+		prevPage: () => page > 1 && setPage((p) => p - 1),
+	};
 }

package/src/ui/index.ts

@@ -4,18 +4,15 @@ export * from './AgentDashboard';
 // Backward-compatible exports
 export * from './AgentRunList';
 export * from './AgentToolRegistry';
-
-// View components
-export * from './views';
+// Data hooks
+export * from './hooks';
 
 // Modals
 export * from './modals';
-
-// Data hooks
-export * from './hooks';
+// Overlays
+export * from './overlays';
 
 // Renderers
 export * from './renderers';
-
-// Overlays
-export * from './overlays';
+// View components
+export * from './views';