@contractspec/example.agent-console 3.7.7 → 3.8.2

package/dist/ui/views/RunListView.js

@@ -9,7 +9,10 @@ function useRunList(options = {}) {
   const [metrics, setMetrics] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [page, setPage] = useState(1);
+  const [internalPageIndex, setInternalPageIndex] = useState(0);
+  const pageSize = options.pageSize ?? options.limit ?? 20;
+  const pageIndex = options.pageIndex ?? internalPageIndex;
+  const [sort] = options.sorting ?? [];
   const fetchData = useCallback(async () => {
     setLoading(true);
     setError(null);
@@ -19,14 +22,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);
@@ -36,31 +39,38 @@ function useRunList(options = {}) {
     } finally {
       setLoading(false);
     }
-  }, [agent, projectId, options.agentId, options.status, options.limit, page]);
+  }, [
+    agent,
+    pageIndex,
+    pageSize,
+    projectId,
+    options.agentId,
+    options.status,
+    sort?.desc,
+    sort?.id
+  ]);
   useEffect(() => {
     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 {
-  EmptyState,
-  ErrorState,
-  LoaderBlock,
-  StatCard,
-  StatCardGroup,
-  StatusChip
-} 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) {
@@ -99,15 +109,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 useState2 } 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] = useState2([
+    { id: "queuedAt", desc: true }
+  ]);
+  const [pagination, setPagination] = useState2({
+    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,
@@ -115,131 +430,48 @@ 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: "rounded-lg border border-border",
-        children: /* @__PURE__ */ jsxDEV("table", {
-          className: "w-full",
-          children: [
-            /* @__PURE__ */ jsxDEV("thead", {
-              className: "border-border border-b bg-muted/30",
-              children: /* @__PURE__ */ jsxDEV("tr", {
-                children: [
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "px-4 py-3 text-left font-medium text-muted-foreground text-sm",
-                    children: "Run"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "px-4 py-3 text-left font-medium text-muted-foreground text-sm",
-                    children: "Agent"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "px-4 py-3 text-left font-medium text-muted-foreground text-sm",
-                    children: "Status"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "px-4 py-3 text-right font-medium text-muted-foreground text-sm",
-                    children: "Tokens"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "px-4 py-3 text-right font-medium text-muted-foreground text-sm",
-                    children: "Duration"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("th", {
-                    className: "px-4 py-3 text-right font-medium text-muted-foreground text-sm",
-                    children: "Cost"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("tbody", {
-              className: "divide-y divide-border",
-              children: data.items.map((run) => /* @__PURE__ */ jsxDEV("tr", {
-                className: "cursor-pointer transition-colors hover:bg-muted/50",
-                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-center text-muted-foreground 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);
 }