@contractspec/example.agent-console 3.7.6 → 3.8.2

package/dist/browser/ui/views/index.js

@@ -1,15 +1,71 @@
-// src/ui/hooks/useRunList.ts
-import { useCallback, useEffect, useState } from "react";
+// src/ui/hooks/useAgentList.ts
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
-function useRunList(options = {}) {
+import { useCallback, useEffect, useMemo, useState } from "react";
+function useAgentList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { agent } = handlers;
   const [data, setData] = useState(null);
-  const [metrics, setMetrics] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [page, setPage] = useState(1);
   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]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  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)
+  };
+}
+
+// src/ui/hooks/useRunList.ts
+import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+function useRunList(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime2();
+  const { agent } = handlers;
+  const [data, setData] = useState2(null);
+  const [metrics, setMetrics] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const [internalPageIndex, setInternalPageIndex] = useState2(0);
+  const pageSize = options.pageSize ?? options.limit ?? 20;
+  const pageIndex = options.pageIndex ?? internalPageIndex;
+  const [sort] = options.sorting ?? [];
+  const fetchData = useCallback2(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -18,14 +74,14 @@ function useRunList(options = {}) {
           projectId,
           agentId: options.agentId,
           status: options.status === "all" ? undefined : options.status,
-          limit: options.limit ?? 20,
-          offset: (page - 1) * (options.limit ?? 20)
+          sortBy: sort?.id,
+          sortDirection: sort ? sort.desc ? "desc" : "asc" : undefined,
+          limit: pageSize,
+          offset: pageIndex * pageSize
         }),
         agent.getRunMetrics({
           projectId,
-          agentId: options.agentId,
-          startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
-          endDate: new Date
+          agentId: options.agentId
         })
       ]);
       setData(runsResult);
@@ -35,31 +91,38 @@ function useRunList(options = {}) {
     } finally {
       setLoading(false);
     }
-  }, [agent, projectId, options.agentId, options.status, options.limit, page]);
-  useEffect(() => {
+  }, [
+    agent,
+    pageIndex,
+    pageSize,
+    projectId,
+    options.agentId,
+    options.status,
+    sort?.desc,
+    sort?.id
+  ]);
+  useEffect2(() => {
     fetchData();
   }, [fetchData]);
+  const hasControlledPagination = options.pageIndex !== undefined;
   return {
     data,
     metrics,
     loading,
     error,
-    page,
+    page: pageIndex + 1,
+    pageIndex,
+    pageSize,
     refetch: fetchData,
-    nextPage: () => setPage((p) => p + 1),
-    prevPage: () => page > 1 && setPage((p) => p - 1)
+    nextPage: hasControlledPagination ? undefined : () => setInternalPageIndex((current) => current + 1),
+    prevPage: hasControlledPagination ? undefined : () => setInternalPageIndex((current) => Math.max(0, current - 1))
   };
 }
 
-// src/ui/views/RunListView.tsx
-import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EmptyState,
-  LoaderBlock,
-  ErrorState
-} from "@contractspec/lib.design-system";
+// src/ui/views/run-list.shared.tsx
+import { Button, StatusChip } from "@contractspec/lib.design-system";
+import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text } from "@contractspec/lib.ui-kit-web/ui/text";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function getStatusTone(status) {
@@ -98,15 +161,320 @@ function formatCost(cost) {
     return "-";
   return `$${cost.toFixed(4)}`;
 }
+function formatJson(value) {
+  return JSON.stringify(value ?? null, null, 2);
+}
+function RunExpandedContent({ run }) {
+  return /* @__PURE__ */ jsxDEV(VStack, {
+    gap: "sm",
+    className: "py-2",
+    children: [
+      /* @__PURE__ */ jsxDEV(HStack, {
+        justify: "between",
+        className: "flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxDEV(StatusChip, {
+            tone: getStatusTone(run.status),
+            label: run.status
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Queued ",
+              run.queuedAt.toLocaleString()
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(HStack, {
+        gap: "lg",
+        className: "flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Prompt ",
+              formatTokens(run.promptTokens)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Completion ",
+              formatTokens(run.completionTokens)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Duration ",
+              formatDuration(run.durationMs)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VStack, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "font-medium text-sm",
+            children: "Input"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("pre", {
+            className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+            children: formatJson(run.input)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VStack, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "font-medium text-sm",
+            children: "Output"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("pre", {
+            className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+            children: formatJson(run.output ?? run.errorMessage ?? "Pending")
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function RunTableToolbar({
+  controller,
+  totalRuns
+}) {
+  const firstRow = controller.rows[0];
+  const queuedColumn = controller.columns.find((column) => column.id === "queuedAt");
+  const durationColumn = controller.columns.find((column) => column.id === "durationMs");
+  const costColumn = controller.columns.find((column) => column.id === "estimatedCostUsd");
+  return /* @__PURE__ */ jsxDEV(HStack, {
+    gap: "sm",
+    className: "flex-wrap",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        className: "text-muted-foreground text-sm",
+        children: [
+          totalRuns,
+          " runs"
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => firstRow?.toggleExpanded?.(!firstRow?.isExpanded),
+        children: "Expand Latest Run"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => queuedColumn?.toggleVisibility?.(!queuedColumn?.visible),
+        children: queuedColumn?.visible ? "Hide Time" : "Show Time"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => durationColumn?.toggleVisibility?.(!durationColumn?.visible),
+        children: durationColumn?.visible ? "Hide Duration" : "Show Duration"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => costColumn?.toggleVisibility?.(!costColumn?.visible),
+        children: costColumn?.visible ? "Hide Cost" : "Show Cost"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/views/run-data-table.columns.tsx
+import { StatusChip as StatusChip2 } from "@contractspec/lib.design-system";
+import { VStack as VStack2 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text as Text2 } from "@contractspec/lib.ui-kit-web/ui/text";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function createRunTableColumns() {
+  return [
+    {
+      id: "queuedAt",
+      header: "Run",
+      label: "Run",
+      accessor: (run) => run.queuedAt.getTime(),
+      cell: ({ item }) => /* @__PURE__ */ jsxDEV2(VStack2, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV2(Text2, {
+            className: "font-mono text-sm",
+            children: item.id.slice(-8)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2(Text2, {
+            className: "text-muted-foreground text-xs",
+            children: item.queuedAt.toLocaleString()
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      size: 220,
+      minSize: 180,
+      canSort: true,
+      canHide: true,
+      canResize: true
+    },
+    {
+      id: "agentName",
+      header: "Agent",
+      label: "Agent",
+      accessor: (run) => run.agentName ?? "Unknown Agent",
+      cell: ({ value }) => /* @__PURE__ */ jsxDEV2(Text2, {
+        className: "font-medium",
+        children: typeof value === "string" ? value : "Unknown Agent"
+      }, undefined, false, undefined, this),
+      size: 220,
+      canSort: true,
+      canResize: true
+    },
+    {
+      id: "status",
+      header: "Status",
+      label: "Status",
+      accessorKey: "status",
+      cell: ({ value }) => {
+        const status = typeof value === "string" ? value : "QUEUED";
+        return /* @__PURE__ */ jsxDEV2(StatusChip2, {
+          tone: getStatusTone(status),
+          label: status
+        }, undefined, false, undefined, this);
+      },
+      size: 150,
+      canSort: true,
+      canResize: true
+    },
+    {
+      id: "totalTokens",
+      header: "Tokens",
+      label: "Tokens",
+      accessorKey: "totalTokens",
+      cell: ({ value }) => formatTokens(Number(value ?? 0)),
+      align: "right",
+      size: 140,
+      canSort: true,
+      canResize: true
+    },
+    {
+      id: "durationMs",
+      header: "Duration",
+      label: "Duration",
+      accessorKey: "durationMs",
+      cell: ({ value }) => formatDuration(typeof value === "number" ? value : undefined),
+      align: "right",
+      size: 140,
+      canSort: true,
+      canHide: true,
+      canResize: true
+    },
+    {
+      id: "estimatedCostUsd",
+      header: "Cost",
+      label: "Cost",
+      accessorKey: "estimatedCostUsd",
+      cell: ({ value }) => formatCost(typeof value === "number" ? value : undefined),
+      align: "right",
+      size: 140,
+      canSort: true,
+      canHide: true,
+      canResize: true
+    }
+  ];
+}
+
+// src/ui/views/RunDataTable.tsx
+import { DataTable } from "@contractspec/lib.design-system";
+import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
+import * as React from "react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function RunDataTable({
+  runs,
+  totalItems,
+  pageIndex,
+  pageSize,
+  sorting,
+  loading,
+  onSortingChange,
+  onPaginationChange,
+  onRunClick
+}) {
+  const columns = React.useMemo(() => createRunTableColumns(), []);
+  const controller = useContractTable({
+    data: runs,
+    columns,
+    executionMode: "server",
+    totalItems,
+    state: {
+      sorting,
+      pagination: { pageIndex, pageSize }
+    },
+    onSortingChange,
+    onPaginationChange,
+    initialState: {
+      columnVisibility: { estimatedCostUsd: false }
+    },
+    getRowId: (run) => run.id,
+    renderExpandedContent: (run) => /* @__PURE__ */ jsxDEV3(RunExpandedContent, {
+      run
+    }, undefined, false, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV3(DataTable, {
+    controller,
+    title: "Run History",
+    description: "Server-mode ContractSpec table with shared pagination, sorting, visibility, and expansion.",
+    loading,
+    onRowPress: (row) => onRunClick?.(row.id),
+    toolbar: /* @__PURE__ */ jsxDEV3(RunTableToolbar, {
+      controller,
+      totalRuns: totalItems
+    }, undefined, false, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV3("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No runs yet"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/ui/views/RunListView.tsx
+import {
+  EmptyState,
+  ErrorState,
+  LoaderBlock,
+  StatCard,
+  StatCardGroup
+} from "@contractspec/lib.design-system";
+import { useState as useState3 } from "react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
 function RunListView({ agentId, onRunClick }) {
-  const { data, metrics, loading, error, refetch } = useRunList({ agentId });
+  const [sorting, setSorting] = useState3([
+    { id: "queuedAt", desc: true }
+  ]);
+  const [pagination, setPagination] = useState3({
+    pageIndex: 0,
+    pageSize: 3
+  });
+  const { data, metrics, loading, error, refetch } = useRunList({
+    agentId,
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    sorting
+  });
   if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
+    return /* @__PURE__ */ jsxDEV4(LoaderBlock, {
       label: "Loading runs..."
     }, undefined, false, undefined, this);
   }
   if (error) {
-    return /* @__PURE__ */ jsxDEV(ErrorState, {
+    return /* @__PURE__ */ jsxDEV4(ErrorState, {
       title: "Failed to load runs",
       description: error.message,
       onRetry: refetch,
@@ -114,146 +482,63 @@ function RunListView({ agentId, onRunClick }) {
     }, undefined, false, undefined, this);
   }
   if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV(EmptyState, {
+    return /* @__PURE__ */ jsxDEV4(EmptyState, {
       title: "No runs yet",
       description: "Execute an agent to see run history here."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     className: "space-y-6",
     children: [
-      metrics && /* @__PURE__ */ jsxDEV(StatCardGroup, {
+      metrics ? /* @__PURE__ */ jsxDEV4(StatCardGroup, {
         children: [
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV4(StatCard, {
             label: "Total Runs",
             value: metrics.totalRuns
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV4(StatCard, {
             label: "Success Rate",
             value: `${(metrics.successRate * 100).toFixed(1)}%`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV4(StatCard, {
             label: "Total Tokens",
             value: formatTokens(metrics.totalTokens)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(StatCard, {
+          /* @__PURE__ */ jsxDEV4(StatCard, {
             label: "Total Cost",
             value: `$${metrics.totalCostUsd.toFixed(2)}`
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "border-border rounded-lg border",
-        children: /* @__PURE__ */ jsxDEV("table", {
-          className: "w-full",
-          children: [
-            /* @__PURE__ */ jsxDEV("thead", {
-              className: "border-border bg-muted/30 border-b",
-              children: /* @__PURE__ */ jsxDEV("tr", {
-                children: [
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-left text-sm font-medium",
-                    children: "Run"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-left text-sm font-medium",
-                    children: "Agent"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-left text-sm font-medium",
-                    children: "Status"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-right text-sm font-medium",
-                    children: "Tokens"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-right text-sm font-medium",
-                    children: "Duration"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-right text-sm font-medium",
-                    children: "Cost"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("tbody", {
-              className: "divide-border divide-y",
-              children: data.items.map((run) => /* @__PURE__ */ jsxDEV("tr", {
-                className: "hover:bg-muted/50 cursor-pointer transition-colors",
-                onClick: () => onRunClick?.(run.id),
-                children: [
-                  /* @__PURE__ */ jsxDEV("td", {
-                    className: "px-4 py-3",
-                    children: [
-                      /* @__PURE__ */ jsxDEV("div", {
-                        className: "font-mono text-sm",
-                        children: run.id.slice(-8)
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("div", {
-                        className: "text-muted-foreground text-xs",
-                        children: run.queuedAt.toLocaleString()
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("td", {
-                    className: "px-4 py-3",
-                    children: /* @__PURE__ */ jsxDEV("span", {
-                      className: "font-medium",
-                      children: run.agentName
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("td", {
-                    className: "px-4 py-3",
-                    children: /* @__PURE__ */ jsxDEV(StatusChip, {
-                      tone: getStatusTone(run.status),
-                      label: run.status
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("td", {
-                    className: "px-4 py-3 text-right font-mono text-sm",
-                    children: formatTokens(run.totalTokens)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("td", {
-                    className: "px-4 py-3 text-right font-mono text-sm",
-                    children: formatDuration(run.durationMs)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("td", {
-                    className: "px-4 py-3 text-right font-mono text-sm",
-                    children: formatCost(run.estimatedCostUsd)
-                  }, undefined, false, undefined, this)
-                ]
-              }, run.id, true, undefined, this))
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "text-muted-foreground text-center text-sm",
-        children: [
-          "Showing ",
-          data.items.length,
-          " of ",
-          data.total,
-          " runs"
-        ]
-      }, undefined, true, undefined, this)
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV4(RunDataTable, {
+        runs: data.items,
+        totalItems: data.total,
+        pageIndex: pagination.pageIndex,
+        pageSize: pagination.pageSize,
+        sorting,
+        loading,
+        onSortingChange: (nextSorting) => {
+          setSorting(nextSorting);
+          setPagination((current) => ({ ...current, pageIndex: 0 }));
+        },
+        onPaginationChange: setPagination,
+        onRunClick
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 
 // src/ui/hooks/useToolList.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
-import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useTemplateRuntime as useTemplateRuntime3 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
 function useToolList(options = {}) {
-  const { handlers, projectId } = useTemplateRuntime2();
+  const { handlers, projectId } = useTemplateRuntime3();
   const { agent } = handlers;
-  const [data, setData] = useState2(null);
-  const [loading, setLoading] = useState2(true);
-  const [error, setError] = useState2(null);
-  const [page, setPage] = useState2(1);
-  const fetchData = useCallback2(async () => {
+  const [data, setData] = useState4(null);
+  const [loading, setLoading] = useState4(true);
+  const [error, setError] = useState4(null);
+  const [page, setPage] = useState4(1);
+  const fetchData = useCallback3(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -280,10 +565,10 @@ function useToolList(options = {}) {
     options.limit,
     page
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     fetchData();
   }, [fetchData]);
-  const { stats, groupedByCategory, categoryStats } = useMemo(() => {
+  const { stats, groupedByCategory, categoryStats } = useMemo3(() => {
     if (!data)
       return { stats: null, groupedByCategory: {}, categoryStats: [] };
     const items = data.items;
@@ -328,16 +613,16 @@ function useToolList(options = {}) {
 
 // src/ui/views/ToolRegistryView.tsx
 import {
-  StatCard as StatCard2,
-  StatCardGroup as StatCardGroup2,
-  StatusChip as StatusChip2,
-  EntityCard,
+  Button as Button2,
   EmptyState as EmptyState2,
-  LoaderBlock as LoaderBlock2,
+  EntityCard,
   ErrorState as ErrorState2,
-  Button
+  LoaderBlock as LoaderBlock2,
+  StatCard as StatCard2,
+  StatCardGroup as StatCardGroup2,
+  StatusChip as StatusChip3
 } from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
 "use client";
 var categoryIcons = {
   RETRIEVAL: "\uD83D\uDD0D",
@@ -367,12 +652,12 @@ function ToolRegistryView({
 }) {
   const { data, loading, error, groupedByCategory, categoryStats, refetch } = useToolList();
   if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV2(LoaderBlock2, {
+    return /* @__PURE__ */ jsxDEV5(LoaderBlock2, {
       label: "Loading tools..."
     }, undefined, false, undefined, this);
   }
   if (error) {
-    return /* @__PURE__ */ jsxDEV2(ErrorState2, {
+    return /* @__PURE__ */ jsxDEV5(ErrorState2, {
       title: "Failed to load tools",
       description: error.message,
       onRetry: refetch,
@@ -380,64 +665,64 @@ function ToolRegistryView({
     }, undefined, false, undefined, this);
   }
   if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV2(EmptyState2, {
+    return /* @__PURE__ */ jsxDEV5(EmptyState2, {
       title: "No tools registered",
       description: "Create your first tool to extend agent capabilities.",
-      primaryAction: onCreateTool ? /* @__PURE__ */ jsxDEV2(Button, {
+      primaryAction: onCreateTool ? /* @__PURE__ */ jsxDEV5(Button2, {
         onPress: onCreateTool,
         children: "Create Tool"
       }, undefined, false, undefined, this) : undefined
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV2("div", {
+  return /* @__PURE__ */ jsxDEV5("div", {
     className: "space-y-8",
     children: [
-      /* @__PURE__ */ jsxDEV2(StatCardGroup2, {
+      /* @__PURE__ */ jsxDEV5(StatCardGroup2, {
         children: [
-          /* @__PURE__ */ jsxDEV2(StatCard2, {
+          /* @__PURE__ */ jsxDEV5(StatCard2, {
             label: "Total Tools",
             value: data.total
           }, undefined, false, undefined, this),
-          categoryStats.slice(0, 3).map(({ category, count }) => /* @__PURE__ */ jsxDEV2(StatCard2, {
+          categoryStats.slice(0, 3).map(({ category, count }) => /* @__PURE__ */ jsxDEV5(StatCard2, {
             label: `${categoryIcons[category] ?? ""} ${category}`,
             value: count
           }, category, false, undefined, this))
         ]
       }, undefined, true, undefined, this),
-      Object.entries(groupedByCategory).map(([category, tools]) => /* @__PURE__ */ jsxDEV2("section", {
+      Object.entries(groupedByCategory).map(([category, tools]) => /* @__PURE__ */ jsxDEV5("section", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV2("div", {
+          /* @__PURE__ */ jsxDEV5("div", {
             className: "flex items-center gap-2",
             children: [
-              /* @__PURE__ */ jsxDEV2("span", {
+              /* @__PURE__ */ jsxDEV5("span", {
                 className: "text-2xl",
                 children: categoryIcons[category]
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("h3", {
-                className: "text-lg font-semibold",
+              /* @__PURE__ */ jsxDEV5("h3", {
+                className: "font-semibold text-lg",
                 children: category
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("span", {
-                className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+              /* @__PURE__ */ jsxDEV5("span", {
+                className: "rounded-full bg-muted px-2 py-0.5 text-muted-foreground text-xs",
                 children: tools.length
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2("div", {
+          /* @__PURE__ */ jsxDEV5("div", {
             className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-            children: tools.map((tool) => /* @__PURE__ */ jsxDEV2(EntityCard, {
+            children: tools.map((tool) => /* @__PURE__ */ jsxDEV5(EntityCard, {
               cardTitle: tool.name,
               cardSubtitle: `v${tool.version}`,
-              meta: /* @__PURE__ */ jsxDEV2("p", {
+              meta: /* @__PURE__ */ jsxDEV5("p", {
                 className: "text-muted-foreground text-sm",
                 children: tool.description
               }, undefined, false, undefined, this),
-              chips: /* @__PURE__ */ jsxDEV2(StatusChip2, {
+              chips: /* @__PURE__ */ jsxDEV5(StatusChip3, {
                 tone: getStatusTone2(tool.status),
                 label: tool.status
               }, undefined, false, undefined, this),
-              footer: /* @__PURE__ */ jsxDEV2("code", {
+              footer: /* @__PURE__ */ jsxDEV5("code", {
                 className: "text-muted-foreground text-xs",
                 children: tool.name
               }, undefined, false, undefined, this),
@@ -450,71 +735,18 @@ function ToolRegistryView({
   }, undefined, true, undefined, this);
 }
 
-// src/ui/hooks/useAgentList.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
-import { useTemplateRuntime as useTemplateRuntime3 } from "@contractspec/lib.example-shared-ui";
-function useAgentList(options = {}) {
-  const { handlers, projectId } = useTemplateRuntime3();
-  const { agent } = handlers;
-  const [data, setData] = useState3(null);
-  const [loading, setLoading] = useState3(true);
-  const [error, setError] = useState3(null);
-  const [page, setPage] = useState3(1);
-  const fetchData = useCallback3(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]);
-  useEffect3(() => {
-    fetchData();
-  }, [fetchData]);
-  const stats = useMemo2(() => {
-    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)
-  };
-}
-
 // src/ui/views/AgentListView.tsx
 import {
-  Button as Button2,
-  StatCard as StatCard3,
-  StatCardGroup as StatCardGroup3,
+  Button as Button3,
+  EmptyState as EmptyState3,
   EntityCard as EntityCard2,
-  StatusChip as StatusChip3,
-  LoaderBlock as LoaderBlock3,
   ErrorState as ErrorState3,
-  EmptyState as EmptyState3
+  LoaderBlock as LoaderBlock3,
+  StatCard as StatCard3,
+  StatCardGroup as StatCardGroup3,
+  StatusChip as StatusChip4
 } from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
 "use client";
 function getStatusTone3(status) {
   switch (status) {
@@ -532,12 +764,12 @@ function getStatusTone3(status) {
 function AgentListView() {
   const { data, loading, error, stats, refetch } = useAgentList();
   if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV3(LoaderBlock3, {
+    return /* @__PURE__ */ jsxDEV6(LoaderBlock3, {
       label: "Loading agents..."
     }, undefined, false, undefined, this);
   }
   if (error) {
-    return /* @__PURE__ */ jsxDEV3(ErrorState3, {
+    return /* @__PURE__ */ jsxDEV6(ErrorState3, {
       title: "Failed to load agents",
       description: error.message,
       onRetry: refetch,
@@ -545,61 +777,61 @@ function AgentListView() {
     }, undefined, false, undefined, this);
   }
   if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV3(EmptyState3, {
+    return /* @__PURE__ */ jsxDEV6(EmptyState3, {
       title: "No agents yet",
       description: "Create your first AI agent to get started."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-6",
     children: [
-      stats && /* @__PURE__ */ jsxDEV3(StatCardGroup3, {
+      stats && /* @__PURE__ */ jsxDEV6(StatCardGroup3, {
         children: [
-          /* @__PURE__ */ jsxDEV3(StatCard3, {
+          /* @__PURE__ */ jsxDEV6(StatCard3, {
             label: "Total Agents",
             value: stats.total
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard3, {
+          /* @__PURE__ */ jsxDEV6(StatCard3, {
             label: "Active",
             value: stats.active
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard3, {
+          /* @__PURE__ */ jsxDEV6(StatCard3, {
             label: "Paused",
             value: stats.paused
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(StatCard3, {
+          /* @__PURE__ */ jsxDEV6(StatCard3, {
             label: "Draft",
             value: stats.draft
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
+      /* @__PURE__ */ jsxDEV6("div", {
         className: "flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV3("h3", {
-            className: "text-lg font-semibold",
+          /* @__PURE__ */ jsxDEV6("h3", {
+            className: "font-semibold text-lg",
             children: "Agents"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(Button2, {
+          /* @__PURE__ */ jsxDEV6(Button3, {
             onPress: () => alert("Create Agent clicked!"),
             children: "Create Agent"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
+      /* @__PURE__ */ jsxDEV6("div", {
         className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-        children: data.items.map((agent) => /* @__PURE__ */ jsxDEV3(EntityCard2, {
+        children: data.items.map((agent) => /* @__PURE__ */ jsxDEV6(EntityCard2, {
           cardTitle: agent.name,
           cardSubtitle: agent.modelName,
-          meta: /* @__PURE__ */ jsxDEV3("p", {
+          meta: /* @__PURE__ */ jsxDEV6("p", {
             className: "text-muted-foreground text-sm",
             children: agent.description
           }, undefined, false, undefined, this),
-          chips: /* @__PURE__ */ jsxDEV3(StatusChip3, {
+          chips: /* @__PURE__ */ jsxDEV6(StatusChip4, {
             tone: getStatusTone3(agent.status),
             label: agent.status
           }, undefined, false, undefined, this),
-          footer: /* @__PURE__ */ jsxDEV3("span", {
+          footer: /* @__PURE__ */ jsxDEV6("span", {
             className: "text-muted-foreground text-xs",
             children: [
               "Created ",