@contractspec/example.agent-console 3.8.9 → 3.8.11

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

@@ -1,851 +1 @@
-// src/ui/hooks/useAgentList.ts
-import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
-import { useCallback, useEffect, useMemo, useState } from "react";
-function useAgentList(options = {}) {
-  const { handlers, projectId } = useTemplateRuntime();
-  const { agent } = handlers;
-  const [data, setData] = 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 {
-      const [runsResult, metricsResult] = await Promise.all([
-        agent.listRuns({
-          projectId,
-          agentId: options.agentId,
-          status: options.status === "all" ? undefined : options.status,
-          sortBy: sort?.id,
-          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
-  ]);
-  useEffect2(() => {
-    fetchData();
-  }, [fetchData]);
-  const hasControlledPagination = options.pageIndex !== undefined;
-  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))
-  };
-}
-
-// 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) {
-  switch (status) {
-    case "COMPLETED":
-      return "success";
-    case "RUNNING":
-      return "warning";
-    case "QUEUED":
-      return "neutral";
-    case "FAILED":
-    case "CANCELLED":
-      return "danger";
-    default:
-      return "neutral";
-  }
-}
-function formatDuration(ms) {
-  if (!ms)
-    return "-";
-  if (ms < 1000)
-    return `${ms}ms`;
-  if (ms < 60000)
-    return `${(ms / 1000).toFixed(1)}s`;
-  return `${(ms / 60000).toFixed(1)}m`;
-}
-function formatTokens(tokens) {
-  if (tokens < 1000)
-    return tokens.toString();
-  if (tokens < 1e6)
-    return `${(tokens / 1000).toFixed(1)}K`;
-  return `${(tokens / 1e6).toFixed(2)}M`;
-}
-function formatCost(cost) {
-  if (!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 [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__ */ jsxDEV4(LoaderBlock, {
-      label: "Loading runs..."
-    }, undefined, false, undefined, this);
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV4(ErrorState, {
-      title: "Failed to load runs",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
-  }
-  if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV4(EmptyState, {
-      title: "No runs yet",
-      description: "Execute an agent to see run history here."
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV4("div", {
-    className: "space-y-6",
-    children: [
-      metrics ? /* @__PURE__ */ jsxDEV4(StatCardGroup, {
-        children: [
-          /* @__PURE__ */ jsxDEV4(StatCard, {
-            label: "Total Runs",
-            value: metrics.totalRuns
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard, {
-            label: "Success Rate",
-            value: `${(metrics.successRate * 100).toFixed(1)}%`
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard, {
-            label: "Total Tokens",
-            value: formatTokens(metrics.totalTokens)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(StatCard, {
-            label: "Total Cost",
-            value: `$${metrics.totalCostUsd.toFixed(2)}`
-          }, undefined, false, 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 { 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 } = useTemplateRuntime3();
-  const { agent } = handlers;
-  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 {
-      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
-  ]);
-  useEffect3(() => {
-    fetchData();
-  }, [fetchData]);
-  const { stats, groupedByCategory, categoryStats } = useMemo3(() => {
-    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;
-    const grouped = {};
-    const byCategory = {};
-    items.forEach((t) => {
-      const cat = t.category;
-      if (!grouped[cat])
-        grouped[cat] = [];
-      grouped[cat].push(t);
-      byCategory[cat] = (byCategory[cat] || 0) + 1;
-    });
-    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)
-  };
-}
-
-// src/ui/views/ToolRegistryView.tsx
-import {
-  Button as Button2,
-  EmptyState as EmptyState2,
-  EntityCard,
-  ErrorState as ErrorState2,
-  LoaderBlock as LoaderBlock2,
-  StatCard as StatCard2,
-  StatCardGroup as StatCardGroup2,
-  StatusChip as StatusChip3
-} from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
-"use client";
-var categoryIcons = {
-  RETRIEVAL: "\uD83D\uDD0D",
-  COMPUTATION: "\uD83E\uDDEE",
-  COMMUNICATION: "\uD83D\uDCE7",
-  INTEGRATION: "\uD83D\uDD17",
-  UTILITY: "\uD83D\uDEE0️",
-  CUSTOM: "⚙️"
-};
-function getStatusTone2(status) {
-  switch (status) {
-    case "ACTIVE":
-      return "success";
-    case "DRAFT":
-      return "neutral";
-    case "DEPRECATED":
-      return "warning";
-    case "DISABLED":
-      return "danger";
-    default:
-      return "neutral";
-  }
-}
-function ToolRegistryView({
-  onToolClick,
-  onCreateTool
-}) {
-  const { data, loading, error, groupedByCategory, categoryStats, refetch } = useToolList();
-  if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV5(LoaderBlock2, {
-      label: "Loading tools..."
-    }, undefined, false, undefined, this);
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV5(ErrorState2, {
-      title: "Failed to load tools",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
-  }
-  if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV5(EmptyState2, {
-      title: "No tools registered",
-      description: "Create your first tool to extend agent capabilities.",
-      primaryAction: onCreateTool ? /* @__PURE__ */ jsxDEV5(Button2, {
-        onPress: onCreateTool,
-        children: "Create Tool"
-      }, undefined, false, undefined, this) : undefined
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV5("div", {
-    className: "space-y-8",
-    children: [
-      /* @__PURE__ */ jsxDEV5(StatCardGroup2, {
-        children: [
-          /* @__PURE__ */ jsxDEV5(StatCard2, {
-            label: "Total Tools",
-            value: data.total
-          }, undefined, false, undefined, this),
-          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__ */ jsxDEV5("section", {
-        className: "space-y-4",
-        children: [
-          /* @__PURE__ */ jsxDEV5("div", {
-            className: "flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsxDEV5("span", {
-                className: "text-2xl",
-                children: categoryIcons[category]
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("h3", {
-                className: "font-semibold text-lg",
-                children: category
-              }, undefined, false, undefined, this),
-              /* @__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__ */ jsxDEV5("div", {
-            className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-            children: tools.map((tool) => /* @__PURE__ */ jsxDEV5(EntityCard, {
-              cardTitle: tool.name,
-              cardSubtitle: `v${tool.version}`,
-              meta: /* @__PURE__ */ jsxDEV5("p", {
-                className: "text-muted-foreground text-sm",
-                children: tool.description
-              }, undefined, false, undefined, this),
-              chips: /* @__PURE__ */ jsxDEV5(StatusChip3, {
-                tone: getStatusTone2(tool.status),
-                label: tool.status
-              }, undefined, false, undefined, this),
-              footer: /* @__PURE__ */ jsxDEV5("code", {
-                className: "text-muted-foreground text-xs",
-                children: tool.name
-              }, undefined, false, undefined, this),
-              onClick: onToolClick ? () => onToolClick(tool.id) : undefined
-            }, tool.id, false, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, category, true, undefined, this))
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/ui/views/AgentListView.tsx
-import {
-  Button as Button3,
-  EmptyState as EmptyState3,
-  EntityCard as EntityCard2,
-  ErrorState as ErrorState3,
-  LoaderBlock as LoaderBlock3,
-  StatCard as StatCard3,
-  StatCardGroup as StatCardGroup3,
-  StatusChip as StatusChip4
-} from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
-"use client";
-function getStatusTone3(status) {
-  switch (status) {
-    case "ACTIVE":
-      return "success";
-    case "PAUSED":
-    case "DRAFT":
-      return "warning";
-    case "ARCHIVED":
-      return "neutral";
-    default:
-      return "neutral";
-  }
-}
-function AgentListView() {
-  const { data, loading, error, stats, refetch } = useAgentList();
-  if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV6(LoaderBlock3, {
-      label: "Loading agents..."
-    }, undefined, false, undefined, this);
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV6(ErrorState3, {
-      title: "Failed to load agents",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
-  }
-  if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV6(EmptyState3, {
-      title: "No agents yet",
-      description: "Create your first AI agent to get started."
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV6("div", {
-    className: "space-y-6",
-    children: [
-      stats && /* @__PURE__ */ jsxDEV6(StatCardGroup3, {
-        children: [
-          /* @__PURE__ */ jsxDEV6(StatCard3, {
-            label: "Total Agents",
-            value: stats.total
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(StatCard3, {
-            label: "Active",
-            value: stats.active
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(StatCard3, {
-            label: "Paused",
-            value: stats.paused
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(StatCard3, {
-            label: "Draft",
-            value: stats.draft
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV6("div", {
-        className: "flex items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV6("h3", {
-            className: "font-semibold text-lg",
-            children: "Agents"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(Button3, {
-            onPress: () => alert("Create Agent clicked!"),
-            children: "Create Agent"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV6("div", {
-        className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-        children: data.items.map((agent) => /* @__PURE__ */ jsxDEV6(EntityCard2, {
-          cardTitle: agent.name,
-          cardSubtitle: agent.modelName,
-          meta: /* @__PURE__ */ jsxDEV6("p", {
-            className: "text-muted-foreground text-sm",
-            children: agent.description
-          }, undefined, false, undefined, this),
-          chips: /* @__PURE__ */ jsxDEV6(StatusChip4, {
-            tone: getStatusTone3(agent.status),
-            label: agent.status
-          }, undefined, false, undefined, this),
-          footer: /* @__PURE__ */ jsxDEV6("span", {
-            className: "text-muted-foreground text-xs",
-            children: [
-              "Created ",
-              agent.createdAt.toLocaleDateString()
-            ]
-          }, undefined, true, undefined, this),
-          onClick: () => alert(`View agent: ${agent.name}`)
-        }, agent.id, false, undefined, this))
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-export {
-  ToolRegistryView,
-  RunListView,
-  AgentListView
-};
+import{useTemplateRuntime as YF}from"@contractspec/lib.example-shared-ui";import{useCallback as ZF,useEffect as _F,useMemo as $F,useState as T}from"react";function r(F={}){let{handlers:Y,projectId:W}=YF(),{agent:N}=Y,[K,O]=T(null),[Z,J]=T(!0),[$,U]=T(null),[Q,q]=T(1),V=ZF(async()=>{J(!0),U(null);try{let X=await N.listAgents({projectId:W,search:F.search,status:F.status==="all"?void 0:F.status,limit:F.limit??20,offset:(Q-1)*(F.limit??20)});O(X)}catch(X){U(X instanceof Error?X:Error("Unknown error"))}finally{J(!1)}},[N,W,F.search,F.status,F.limit,Q]);_F(()=>{V()},[V]);let D=$F(()=>{if(!K)return null;return{total:K.total,active:K.items.filter((X)=>X.status==="ACTIVE").length,paused:K.items.filter((X)=>X.status==="PAUSED").length,draft:K.items.filter((X)=>X.status==="DRAFT").length}},[K]);return{data:K,loading:Z,error:$,stats:D,page:Q,refetch:V,nextPage:()=>q((X)=>X+1),prevPage:()=>Q>1&&q((X)=>X-1)}}import{useTemplateRuntime as UF}from"@contractspec/lib.example-shared-ui";import{useCallback as JF,useEffect as qF,useState as I}from"react";function n(F={}){let{handlers:Y,projectId:W}=UF(),{agent:N}=Y,[K,O]=I(null),[Z,J]=I(null),[$,U]=I(!0),[Q,q]=I(null),[V,D]=I(0),X=F.pageSize??F.limit??20,E=F.pageIndex??V,[_]=F.sorting??[],f=JF(async()=>{U(!0),q(null);try{let[z,R]=await Promise.all([N.listRuns({projectId:W,agentId:F.agentId,status:F.status==="all"?void 0:F.status,sortBy:_?.id,sortDirection:_?_.desc?"desc":"asc":void 0,limit:X,offset:E*X}),N.getRunMetrics({projectId:W,agentId:F.agentId})]);O(z),J(R)}catch(z){q(z instanceof Error?z:Error("Unknown error"))}finally{U(!1)}},[N,E,X,W,F.agentId,F.status,_?.desc,_?.id]);qF(()=>{f()},[f]);let b=F.pageIndex!==void 0;return{data:K,metrics:Z,loading:$,error:Q,page:E+1,pageIndex:E,pageSize:X,refetch:f,nextPage:b?void 0:()=>D((z)=>z+1),prevPage:b?void 0:()=>D((z)=>Math.max(0,z-1))}}import{Button as k,StatusChip as GF}from"@contractspec/lib.design-system";import{HStack as g,VStack as p}from"@contractspec/lib.ui-kit-web/ui/stack";import{Text as L}from"@contractspec/lib.ui-kit-web/ui/text";import{jsx as B,jsxs as A}from"react/jsx-runtime";function c(F){switch(F){case"COMPLETED":return"success";case"RUNNING":return"warning";case"QUEUED":return"neutral";case"FAILED":case"CANCELLED":return"danger";default:return"neutral"}}function l(F){if(!F)return"-";if(F<1000)return`${F}ms`;if(F<60000)return`${(F/1000).toFixed(1)}s`;return`${(F/60000).toFixed(1)}m`}function v(F){if(F<1000)return F.toString();if(F<1e6)return`${(F/1000).toFixed(1)}K`;return`${(F/1e6).toFixed(2)}M`}function a(F){if(!F)return"-";return`$${F.toFixed(4)}`}function s(F){return JSON.stringify(F??null,null,2)}function e({run:F}){return A(p,{gap:"sm",className:"py-2",children:[A(g,{justify:"between",className:"flex-wrap",children:[B(GF,{tone:c(F.status),label:F.status}),A(L,{className:"text-muted-foreground text-sm",children:["Queued ",F.queuedAt.toLocaleString()]})]}),A(g,{gap:"lg",className:"flex-wrap",children:[A(L,{className:"text-muted-foreground text-sm",children:["Prompt ",v(F.promptTokens)]}),A(L,{className:"text-muted-foreground text-sm",children:["Completion ",v(F.completionTokens)]}),A(L,{className:"text-muted-foreground text-sm",children:["Duration ",l(F.durationMs)]})]}),A(p,{gap:"xs",children:[B(L,{className:"font-medium text-sm",children:"Input"}),B("pre",{className:"overflow-auto rounded-md bg-muted/40 p-3 text-xs",children:s(F.input)})]}),A(p,{gap:"xs",children:[B(L,{className:"font-medium text-sm",children:"Output"}),B("pre",{className:"overflow-auto rounded-md bg-muted/40 p-3 text-xs",children:s(F.output??F.errorMessage??"Pending")})]})]})}function o({controller:F,totalRuns:Y}){let W=F.rows[0],N=F.columns.find((Z)=>Z.id==="queuedAt"),K=F.columns.find((Z)=>Z.id==="durationMs"),O=F.columns.find((Z)=>Z.id==="estimatedCostUsd");return A(g,{gap:"sm",className:"flex-wrap",children:[A(L,{className:"text-muted-foreground text-sm",children:[Y," runs"]}),B(k,{variant:"outline",size:"sm",onPress:()=>W?.toggleExpanded?.(!W?.isExpanded),children:"Expand Latest Run"}),B(k,{variant:"outline",size:"sm",onPress:()=>N?.toggleVisibility?.(!N?.visible),children:N?.visible?"Hide Time":"Show Time"}),B(k,{variant:"outline",size:"sm",onPress:()=>K?.toggleVisibility?.(!K?.visible),children:K?.visible?"Hide Duration":"Show Duration"}),B(k,{variant:"outline",size:"sm",onPress:()=>O?.toggleVisibility?.(!O?.visible),children:O?.visible?"Hide Cost":"Show Cost"})]})}import{StatusChip as HF}from"@contractspec/lib.design-system";import{VStack as MF}from"@contractspec/lib.ui-kit-web/ui/stack";import{Text as u}from"@contractspec/lib.ui-kit-web/ui/text";import{jsx as h,jsxs as VF}from"react/jsx-runtime";function t(){return[{id:"queuedAt",header:"Run",label:"Run",accessor:(F)=>F.queuedAt.getTime(),cell:({item:F})=>VF(MF,{gap:"xs",children:[h(u,{className:"font-mono text-sm",children:F.id.slice(-8)}),h(u,{className:"text-muted-foreground text-xs",children:F.queuedAt.toLocaleString()})]}),size:220,minSize:180,canSort:!0,canHide:!0,canResize:!0},{id:"agentName",header:"Agent",label:"Agent",accessor:(F)=>F.agentName??"Unknown Agent",cell:({value:F})=>h(u,{className:"font-medium",children:typeof F==="string"?F:"Unknown Agent"}),size:220,canSort:!0,canResize:!0},{id:"status",header:"Status",label:"Status",accessorKey:"status",cell:({value:F})=>{let Y=typeof F==="string"?F:"QUEUED";return h(HF,{tone:c(Y),label:Y})},size:150,canSort:!0,canResize:!0},{id:"totalTokens",header:"Tokens",label:"Tokens",accessorKey:"totalTokens",cell:({value:F})=>v(Number(F??0)),align:"right",size:140,canSort:!0,canResize:!0},{id:"durationMs",header:"Duration",label:"Duration",accessorKey:"durationMs",cell:({value:F})=>l(typeof F==="number"?F:void 0),align:"right",size:140,canSort:!0,canHide:!0,canResize:!0},{id:"estimatedCostUsd",header:"Cost",label:"Cost",accessorKey:"estimatedCostUsd",cell:({value:F})=>a(typeof F==="number"?F:void 0),align:"right",size:140,canSort:!0,canHide:!0,canResize:!0}]}import{DataTable as AF}from"@contractspec/lib.design-system";import{useContractTable as zF}from"@contractspec/lib.presentation-runtime-react";import*as FF from"react";import{jsx as y}from"react/jsx-runtime";function KF({runs:F,totalItems:Y,pageIndex:W,pageSize:N,sorting:K,loading:O,onSortingChange:Z,onPaginationChange:J,onRunClick:$}){let U=FF.useMemo(()=>t(),[]),Q=zF({data:F,columns:U,executionMode:"server",totalItems:Y,state:{sorting:K,pagination:{pageIndex:W,pageSize:N}},onSortingChange:Z,onPaginationChange:J,initialState:{columnVisibility:{estimatedCostUsd:!1}},getRowId:(q)=>q.id,renderExpandedContent:(q)=>y(e,{run:q}),getCanExpand:()=>!0});return y(AF,{controller:Q,title:"Run History",description:"Server-mode ContractSpec table with shared pagination, sorting, visibility, and expansion.",loading:O,onRowPress:(q)=>$?.(q.id),toolbar:y(o,{controller:Q,totalRuns:Y}),emptyState:y("div",{className:"rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",children:"No runs yet"})})}import{EmptyState as wF,ErrorState as BF,LoaderBlock as PF,StatCard as C,StatCardGroup as LF}from"@contractspec/lib.design-system";import{useState as NF}from"react";import{jsx as P,jsxs as OF}from"react/jsx-runtime";function DF({agentId:F,onRunClick:Y}){let[W,N]=NF([{id:"queuedAt",desc:!0}]),[K,O]=NF({pageIndex:0,pageSize:3}),{data:Z,metrics:J,loading:$,error:U,refetch:Q}=n({agentId:F,pageIndex:K.pageIndex,pageSize:K.pageSize,sorting:W});if($&&!Z)return P(PF,{label:"Loading runs..."});if(U)return P(BF,{title:"Failed to load runs",description:U.message,onRetry:Q,retryLabel:"Retry"});if(!Z?.items.length)return P(wF,{title:"No runs yet",description:"Execute an agent to see run history here."});return OF("div",{className:"space-y-6",children:[J?OF(LF,{children:[P(C,{label:"Total Runs",value:J.totalRuns}),P(C,{label:"Success Rate",value:`${(J.successRate*100).toFixed(1)}%`}),P(C,{label:"Total Tokens",value:v(J.totalTokens)}),P(C,{label:"Total Cost",value:`$${J.totalCostUsd.toFixed(2)}`})]}):null,P(KF,{runs:Z.items,totalItems:Z.total,pageIndex:K.pageIndex,pageSize:K.pageSize,sorting:W,loading:$,onSortingChange:(q)=>{N(q),O((V)=>({...V,pageIndex:0}))},onPaginationChange:O,onRunClick:Y})]})}import{useTemplateRuntime as EF}from"@contractspec/lib.example-shared-ui";import{useCallback as RF,useEffect as vF,useMemo as fF,useState as S}from"react";function QF(F={}){let{handlers:Y,projectId:W}=EF(),{agent:N}=Y,[K,O]=S(null),[Z,J]=S(!0),[$,U]=S(null),[Q,q]=S(1),V=RF(async()=>{J(!0),U(null);try{let _=await N.listTools({projectId:W,search:F.search,category:F.category,status:F.status==="all"?void 0:F.status,limit:F.limit??50,offset:(Q-1)*(F.limit??50)});O(_)}catch(_){U(_ instanceof Error?_:Error("Unknown error"))}finally{J(!1)}},[N,W,F.search,F.category,F.status,F.limit,Q]);vF(()=>{V()},[V]);let{stats:D,groupedByCategory:X,categoryStats:E}=fF(()=>{if(!K)return{stats:null,groupedByCategory:{},categoryStats:[]};let _=K.items,f=_.filter((M)=>M.status==="ACTIVE").length,b=_.filter((M)=>M.status==="DEPRECATED").length,z=_.filter((M)=>M.status==="DISABLED").length,R={},d={};_.forEach((M)=>{let w=M.category;if(!R[w])R[w]=[];R[w].push(M),d[w]=(d[w]||0)+1});let i=Object.entries(d).map(([M,w])=>({category:M,count:w})).sort((M,w)=>w.count-M.count);return{stats:{total:K.total,active:f,deprecated:b,disabled:z,topCategories:i.slice(0,5)},groupedByCategory:R,categoryStats:i}},[K]);return{data:K,loading:Z,error:$,stats:D,groupedByCategory:X,categoryStats:E,page:Q,refetch:V,nextPage:()=>q((_)=>_+1),prevPage:()=>Q>1&&q((_)=>_-1)}}import{Button as IF,EmptyState as bF,EntityCard as TF,ErrorState as kF,LoaderBlock as hF,StatCard as WF,StatCardGroup as yF,StatusChip as CF}from"@contractspec/lib.design-system";import{jsx as G,jsxs as m}from"react/jsx-runtime";var XF={RETRIEVAL:"\uD83D\uDD0D",COMPUTATION:"\uD83E\uDDEE",COMMUNICATION:"\uD83D\uDCE7",INTEGRATION:"\uD83D\uDD17",UTILITY:"\uD83D\uDEE0️",CUSTOM:"⚙️"};function SF(F){switch(F){case"ACTIVE":return"success";case"DRAFT":return"neutral";case"DEPRECATED":return"warning";case"DISABLED":return"danger";default:return"neutral"}}function mF({onToolClick:F,onCreateTool:Y}){let{data:W,loading:N,error:K,groupedByCategory:O,categoryStats:Z,refetch:J}=QF();if(N&&!W)return G(hF,{label:"Loading tools..."});if(K)return G(kF,{title:"Failed to load tools",description:K.message,onRetry:J,retryLabel:"Retry"});if(!W?.items.length)return G(bF,{title:"No tools registered",description:"Create your first tool to extend agent capabilities.",primaryAction:Y?G(IF,{onPress:Y,children:"Create Tool"}):void 0});return m("div",{className:"space-y-8",children:[m(yF,{children:[G(WF,{label:"Total Tools",value:W.total}),Z.slice(0,3).map(({category:$,count:U})=>G(WF,{label:`${XF[$]??""} ${$}`,value:U},$))]}),Object.entries(O).map(([$,U])=>m("section",{className:"space-y-4",children:[m("div",{className:"flex items-center gap-2",children:[G("span",{className:"text-2xl",children:XF[$]}),G("h3",{className:"font-semibold text-lg",children:$}),G("span",{className:"rounded-full bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:U.length})]}),G("div",{className:"grid gap-4 md:grid-cols-2 lg:grid-cols-3",children:U.map((Q)=>G(TF,{cardTitle:Q.name,cardSubtitle:`v${Q.version}`,meta:G("p",{className:"text-muted-foreground text-sm",children:Q.description}),chips:G(CF,{tone:SF(Q.status),label:Q.status}),footer:G("code",{className:"text-muted-foreground text-xs",children:Q.name}),onClick:F?()=>F(Q.id):void 0},Q.id))})]},$))]})}import{Button as jF,EmptyState as xF,EntityCard as dF,ErrorState as pF,LoaderBlock as gF,StatCard as j,StatCardGroup as cF,StatusChip as lF}from"@contractspec/lib.design-system";import{jsx as H,jsxs as x}from"react/jsx-runtime";function uF(F){switch(F){case"ACTIVE":return"success";case"PAUSED":case"DRAFT":return"warning";case"ARCHIVED":return"neutral";default:return"neutral"}}function iF(){let{data:F,loading:Y,error:W,stats:N,refetch:K}=r();if(Y&&!F)return H(gF,{label:"Loading agents..."});if(W)return H(pF,{title:"Failed to load agents",description:W.message,onRetry:K,retryLabel:"Retry"});if(!F?.items.length)return H(xF,{title:"No agents yet",description:"Create your first AI agent to get started."});return x("div",{className:"space-y-6",children:[N&&x(cF,{children:[H(j,{label:"Total Agents",value:N.total}),H(j,{label:"Active",value:N.active}),H(j,{label:"Paused",value:N.paused}),H(j,{label:"Draft",value:N.draft})]}),x("div",{className:"flex items-center justify-between",children:[H("h3",{className:"font-semibold text-lg",children:"Agents"}),H(jF,{onPress:()=>alert("Create Agent clicked!"),children:"Create Agent"})]}),H("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-3",children:F.items.map((O)=>H(dF,{cardTitle:O.name,cardSubtitle:O.modelName,meta:H("p",{className:"text-muted-foreground text-sm",children:O.description}),chips:H(lF,{tone:uF(O.status),label:O.status}),footer:x("span",{className:"text-muted-foreground text-xs",children:["Created ",O.createdAt.toLocaleDateString()]}),onClick:()=>alert(`View agent: ${O.name}`)},O.id))})]})}export{mF as ToolRegistryView,DF as RunListView,iF as AgentListView};