@contractspec/example.agent-console 1.56.1 → 1.58.0

package/dist/ui/views/index.js

@@ -1,5 +1,620 @@
-import { RunListView } from "./RunListView.js";
-import { ToolRegistryView } from "./ToolRegistryView.js";
-import { AgentListView } from "./AgentListView.js";
+// @bun
+// src/ui/hooks/useRunList.ts
+import { useCallback, useEffect, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+function useRunList(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 [runsResult, metricsResult] = await Promise.all([
+        agent.listRuns({
+          projectId,
+          agentId: options.agentId,
+          status: options.status === "all" ? undefined : options.status,
+          limit: options.limit ?? 20,
+          offset: (page - 1) * (options.limit ?? 20)
+        }),
+        agent.getRunMetrics({
+          projectId,
+          agentId: options.agentId,
+          startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+          endDate: new Date
+        })
+      ]);
+      setData(runsResult);
+      setMetrics(metricsResult);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setLoading(false);
+    }
+  }, [agent, projectId, options.agentId, options.status, options.limit, page]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  return {
+    data,
+    metrics,
+    loading,
+    error,
+    page,
+    refetch: fetchData,
+    nextPage: () => setPage((p) => p + 1),
+    prevPage: () => page > 1 && setPage((p) => p - 1)
+  };
+}
 
-export { AgentListView, RunListView, ToolRegistryView };
+// src/ui/views/RunListView.tsx
+import {
+  StatCard,
+  StatCardGroup,
+  StatusChip,
+  EmptyState,
+  LoaderBlock,
+  ErrorState
+} from "@contractspec/lib.design-system";
+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 RunListView({ agentId, onRunClick }) {
+  const { data, metrics, loading, error, refetch } = useRunList({ agentId });
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
+      label: "Loading runs..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV(ErrorState, {
+      title: "Failed to load runs",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV(EmptyState, {
+      title: "No runs yet",
+      description: "Execute an agent to see run history here."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-6",
+    children: [
+      metrics && /* @__PURE__ */ jsxDEV(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Total Runs",
+            value: metrics.totalRuns
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Success Rate",
+            value: `${(metrics.successRate * 100).toFixed(1)}%`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Total Tokens",
+            value: formatTokens(metrics.totalTokens)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(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);
+}
+
+// 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";
+function useToolList(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime2();
+  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 () => {
+    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
+  ]);
+  useEffect2(() => {
+    fetchData();
+  }, [fetchData]);
+  const { stats, groupedByCategory, categoryStats } = useMemo(() => {
+    if (!data)
+      return { stats: null, groupedByCategory: {}, categoryStats: [] };
+    const items = data.items;
+    const active = items.filter((t) => t.status === "ACTIVE").length;
+    const deprecated = items.filter((t) => t.status === "DEPRECATED").length;
+    const disabled = items.filter((t) => t.status === "DISABLED").length;
+    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 {
+  StatCard as StatCard2,
+  StatCardGroup as StatCardGroup2,
+  StatusChip as StatusChip2,
+  EntityCard,
+  EmptyState as EmptyState2,
+  LoaderBlock as LoaderBlock2,
+  ErrorState as ErrorState2,
+  Button
+} from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+var categoryIcons = {
+  RETRIEVAL: "\uD83D\uDD0D",
+  COMPUTATION: "\uD83E\uDDEE",
+  COMMUNICATION: "\uD83D\uDCE7",
+  INTEGRATION: "\uD83D\uDD17",
+  UTILITY: "\uD83D\uDEE0\uFE0F",
+  CUSTOM: "\u2699\uFE0F"
+};
+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__ */ jsxDEV2(LoaderBlock2, {
+      label: "Loading tools..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV2(ErrorState2, {
+      title: "Failed to load tools",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV2(EmptyState2, {
+      title: "No tools registered",
+      description: "Create your first tool to extend agent capabilities.",
+      primaryAction: onCreateTool ? /* @__PURE__ */ jsxDEV2(Button, {
+        onPress: onCreateTool,
+        children: "Create Tool"
+      }, undefined, false, undefined, this) : undefined
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV2(StatCardGroup2, {
+        children: [
+          /* @__PURE__ */ jsxDEV2(StatCard2, {
+            label: "Total Tools",
+            value: data.total
+          }, undefined, false, undefined, this),
+          categoryStats.slice(0, 3).map(({ category, count }) => /* @__PURE__ */ jsxDEV2(StatCard2, {
+            label: `${categoryIcons[category] ?? ""} ${category}`,
+            value: count
+          }, category, false, undefined, this))
+        ]
+      }, undefined, true, undefined, this),
+      Object.entries(groupedByCategory).map(([category, tools]) => /* @__PURE__ */ jsxDEV2("section", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV2("span", {
+                className: "text-2xl",
+                children: categoryIcons[category]
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("h3", {
+                className: "text-lg font-semibold",
+                children: category
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("span", {
+                className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+                children: tools.length
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+            children: tools.map((tool) => /* @__PURE__ */ jsxDEV2(EntityCard, {
+              cardTitle: tool.name,
+              cardSubtitle: `v${tool.version}`,
+              meta: /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: tool.description
+              }, undefined, false, undefined, this),
+              chips: /* @__PURE__ */ jsxDEV2(StatusChip2, {
+                tone: getStatusTone2(tool.status),
+                label: tool.status
+              }, undefined, false, undefined, this),
+              footer: /* @__PURE__ */ jsxDEV2("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/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,
+  EntityCard as EntityCard2,
+  StatusChip as StatusChip3,
+  LoaderBlock as LoaderBlock3,
+  ErrorState as ErrorState3,
+  EmptyState as EmptyState3
+} from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV3 } 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__ */ jsxDEV3(LoaderBlock3, {
+      label: "Loading agents..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV3(ErrorState3, {
+      title: "Failed to load agents",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV3(EmptyState3, {
+      title: "No agents yet",
+      description: "Create your first AI agent to get started."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-6",
+    children: [
+      stats && /* @__PURE__ */ jsxDEV3(StatCardGroup3, {
+        children: [
+          /* @__PURE__ */ jsxDEV3(StatCard3, {
+            label: "Total Agents",
+            value: stats.total
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(StatCard3, {
+            label: "Active",
+            value: stats.active
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(StatCard3, {
+            label: "Paused",
+            value: stats.paused
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(StatCard3, {
+            label: "Draft",
+            value: stats.draft
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h3", {
+            className: "text-lg font-semibold",
+            children: "Agents"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(Button2, {
+            onPress: () => alert("Create Agent clicked!"),
+            children: "Create Agent"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+        children: data.items.map((agent) => /* @__PURE__ */ jsxDEV3(EntityCard2, {
+          cardTitle: agent.name,
+          cardSubtitle: agent.modelName,
+          meta: /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground text-sm",
+            children: agent.description
+          }, undefined, false, undefined, this),
+          chips: /* @__PURE__ */ jsxDEV3(StatusChip3, {
+            tone: getStatusTone3(agent.status),
+            label: agent.status
+          }, undefined, false, undefined, this),
+          footer: /* @__PURE__ */ jsxDEV3("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
+};