@contractspec/example.agent-console 1.57.0 → 1.58.0

package/dist/browser/ui/AgentDashboard.js

@@ -0,0 +1,1607 @@
+// 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)
+  };
+}
+
+// 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️",
+  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__ */ 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/hooks/useAgentMutations.ts
+import { useCallback as useCallback4, useState as useState4 } from "react";
+import { useTemplateRuntime as useTemplateRuntime4 } from "@contractspec/lib.example-shared-ui";
+function useAgentMutations(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime4();
+  const { agent } = handlers;
+  const [createState, setCreateState] = useState4({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [updateState, setUpdateState] = useState4({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const createAgent = useCallback4(async (input) => {
+    setCreateState({ loading: true, error: null, data: null });
+    try {
+      const result = await agent.createAgent(input, {
+        projectId,
+        organizationId: "demo-org"
+      });
+      setCreateState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to create agent");
+      setCreateState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [agent, projectId, options]);
+  const updateAgent = useCallback4(async (input) => {
+    setUpdateState({ loading: true, error: null, data: null });
+    try {
+      const result = await agent.updateAgent(input);
+      setUpdateState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to update agent");
+      setUpdateState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [agent, options]);
+  const activateAgent = useCallback4(async (agentId) => {
+    return updateAgent({ id: agentId, status: "ACTIVE" });
+  }, [updateAgent]);
+  const pauseAgent = useCallback4(async (agentId) => {
+    return updateAgent({ id: agentId, status: "PAUSED" });
+  }, [updateAgent]);
+  const archiveAgent = useCallback4(async (agentId) => {
+    return updateAgent({ id: agentId, status: "ARCHIVED" });
+  }, [updateAgent]);
+  const executeAgent = useCallback4(async (input) => {
+    console.log("Execute agent:", input);
+    options.onSuccess?.();
+    return null;
+  }, [options]);
+  return {
+    createAgent,
+    updateAgent,
+    activateAgent,
+    pauseAgent,
+    archiveAgent,
+    executeAgent,
+    createState,
+    updateState,
+    isLoading: createState.loading || updateState.loading
+  };
+}
+
+// src/ui/modals/CreateAgentModal.tsx
+import { useState as useState5 } from "react";
+import { Button as Button2, Input } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+var MODEL_PROVIDERS = [
+  {
+    value: "openai",
+    label: "OpenAI",
+    models: ["gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo"]
+  },
+  {
+    value: "anthropic",
+    label: "Anthropic",
+    models: ["claude-3-opus", "claude-3-sonnet", "claude-3-haiku"]
+  },
+  { value: "google", label: "Google", models: ["gemini-pro", "gemini-ultra"] },
+  {
+    value: "mistral",
+    label: "Mistral",
+    models: ["mistral-large", "mistral-medium", "mistral-small"]
+  }
+];
+function CreateAgentModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading = false
+}) {
+  const [name, setName] = useState5("");
+  const [description, setDescription] = useState5("");
+  const [modelProvider, setModelProvider] = useState5("openai");
+  const [modelName, setModelName] = useState5("gpt-4o");
+  const [systemPrompt, setSystemPrompt] = useState5("");
+  const [error, setError] = useState5(null);
+  const selectedProvider = MODEL_PROVIDERS.find((p) => p.value === modelProvider);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!name.trim()) {
+      setError("Agent name is required");
+      return;
+    }
+    try {
+      await onSubmit({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        modelProvider,
+        modelName,
+        systemPrompt: systemPrompt.trim() || undefined
+      });
+      setName("");
+      setDescription("");
+      setModelProvider("openai");
+      setModelName("gpt-4o");
+      setSystemPrompt("");
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create agent");
+    }
+  };
+  const handleProviderChange = (provider) => {
+    setModelProvider(provider);
+    const providerConfig = MODEL_PROVIDERS.find((p) => p.value === provider);
+    if (providerConfig) {
+      setModelName(providerConfig.models[0]);
+    }
+  };
+  if (!isOpen)
+    return null;
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        onClick: onClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            onClose();
+        },
+        "aria-label": "Close modal"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "bg-card border-border relative z-10 max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl border p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "mb-4 text-xl font-semibold",
+            children: "Create New Agent"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("form", {
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("label", {
+                    htmlFor: "agent-name",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Agent Name *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3(Input, {
+                    id: "agent-name",
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    placeholder: "e.g., Customer Support Bot",
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("label", {
+                    htmlFor: "agent-description",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Description"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("textarea", {
+                    id: "agent-description",
+                    value: description,
+                    onChange: (e) => setDescription(e.target.value),
+                    placeholder: "Describe what this agent does...",
+                    rows: 2,
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                className: "flex gap-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV3("div", {
+                    className: "flex-1",
+                    children: [
+                      /* @__PURE__ */ jsxDEV3("label", {
+                        htmlFor: "model-provider",
+                        className: "text-muted-foreground mb-1 block text-sm font-medium",
+                        children: "Provider *"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("select", {
+                        id: "model-provider",
+                        value: modelProvider,
+                        onChange: (e) => handleProviderChange(e.target.value),
+                        disabled: isLoading,
+                        className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                        children: MODEL_PROVIDERS.map((p) => /* @__PURE__ */ jsxDEV3("option", {
+                          value: p.value,
+                          children: p.label
+                        }, p.value, false, undefined, this))
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("div", {
+                    className: "flex-1",
+                    children: [
+                      /* @__PURE__ */ jsxDEV3("label", {
+                        htmlFor: "model-name",
+                        className: "text-muted-foreground mb-1 block text-sm font-medium",
+                        children: "Model *"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("select", {
+                        id: "model-name",
+                        value: modelName,
+                        onChange: (e) => setModelName(e.target.value),
+                        disabled: isLoading,
+                        className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                        children: selectedProvider?.models.map((m) => /* @__PURE__ */ jsxDEV3("option", {
+                          value: m,
+                          children: m
+                        }, m, false, undefined, this))
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("label", {
+                    htmlFor: "system-prompt",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "System Prompt"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("textarea", {
+                    id: "system-prompt",
+                    value: systemPrompt,
+                    onChange: (e) => setSystemPrompt(e.target.value),
+                    placeholder: "You are a helpful assistant that...",
+                    rows: 4,
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 font-mono text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("p", {
+                    className: "text-muted-foreground mt-1 text-xs",
+                    children: "Instructions that define the agent's behavior"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV3("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV3(Button2, {
+                    type: "button",
+                    variant: "ghost",
+                    onPress: onClose,
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3(Button2, {
+                    type: "submit",
+                    disabled: isLoading,
+                    children: isLoading ? "Creating..." : "Create Agent"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/modals/AgentActionsModal.tsx
+import { useState as useState6 } from "react";
+import { Button as Button3 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function getStatusColor(status) {
+  switch (status) {
+    case "ACTIVE":
+      return "text-green-600 bg-green-100 dark:text-green-400 dark:bg-green-900/30";
+    case "DRAFT":
+      return "text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-900/30";
+    case "PAUSED":
+      return "text-yellow-600 bg-yellow-100 dark:text-yellow-400 dark:bg-yellow-900/30";
+    case "ARCHIVED":
+      return "text-gray-600 bg-gray-100 dark:text-gray-400 dark:bg-gray-700";
+    default:
+      return "text-gray-600 bg-gray-100";
+  }
+}
+function AgentActionsModal({
+  isOpen,
+  agent,
+  onClose,
+  onActivate,
+  onPause,
+  onArchive,
+  onExecute,
+  isLoading = false
+}) {
+  const [mode, setMode] = useState6("menu");
+  const [message, setMessage] = useState6("");
+  const [confirmAction, setConfirmAction] = useState6(null);
+  const [error, setError] = useState6(null);
+  const resetForm = () => {
+    setMode("menu");
+    setMessage("");
+    setConfirmAction(null);
+    setError(null);
+  };
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+  const handleExecute = async () => {
+    if (!agent)
+      return;
+    setError(null);
+    if (!message.trim()) {
+      setError("Please enter a message");
+      return;
+    }
+    try {
+      await onExecute(agent.id, message.trim());
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to execute agent");
+    }
+  };
+  const handleStatusChange = async (action) => {
+    if (!agent)
+      return;
+    setError(null);
+    try {
+      switch (action) {
+        case "activate":
+          await onActivate(agent.id);
+          break;
+        case "pause":
+          await onPause(agent.id);
+          break;
+        case "archive":
+          await onArchive(agent.id);
+          break;
+      }
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `Failed to ${action} agent`);
+    }
+  };
+  if (!isOpen || !agent)
+    return null;
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        onClick: handleClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            handleClose();
+        },
+        "aria-label": "Close modal"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "border-border mb-4 border-b pb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV4("h2", {
+                className: "text-xl font-semibold",
+                children: agent.name
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                className: "mt-1 flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    className: "text-muted-foreground text-sm",
+                    children: [
+                      agent.modelProvider,
+                      " / ",
+                      agent.modelName
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    className: `rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(agent.status)}`,
+                    children: agent.status
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              agent.description && /* @__PURE__ */ jsxDEV4("p", {
+                className: "text-muted-foreground mt-2 text-sm",
+                children: agent.description
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "menu" && /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-3",
+            children: [
+              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV4(Button3, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => setMode("execute"),
+                children: [
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    className: "mr-2",
+                    children: "▶️"
+                  }, undefined, false, undefined, this),
+                  " Execute Agent"
+                ]
+              }, undefined, true, undefined, this),
+              (agent.status === "DRAFT" || agent.status === "PAUSED") && /* @__PURE__ */ jsxDEV4(Button3, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => handleStatusChange("activate"),
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDFE2"
+                  }, undefined, false, undefined, this),
+                  " Activate Agent"
+                ]
+              }, undefined, true, undefined, this),
+              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV4(Button3, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => handleStatusChange("pause"),
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    className: "mr-2",
+                    children: "⏸️"
+                  }, undefined, false, undefined, this),
+                  " Pause Agent"
+                ]
+              }, undefined, true, undefined, this),
+              agent.status !== "ARCHIVED" && /* @__PURE__ */ jsxDEV4(Button3, {
+                className: "w-full justify-start text-yellow-600 hover:text-yellow-700",
+                variant: "ghost",
+                onPress: () => {
+                  setConfirmAction("archive");
+                  setMode("confirm");
+                },
+                children: [
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDCE6"
+                  }, undefined, false, undefined, this),
+                  " Archive Agent"
+                ]
+              }, undefined, true, undefined, this),
+              agent.status === "ARCHIVED" && /* @__PURE__ */ jsxDEV4(Button3, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => handleStatusChange("activate"),
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDD04"
+                  }, undefined, false, undefined, this),
+                  " Restore Agent"
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV4("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                className: "border-border border-t pt-3",
+                children: /* @__PURE__ */ jsxDEV4(Button3, {
+                  className: "w-full",
+                  variant: "outline",
+                  onPress: handleClose,
+                  children: "Close"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "execute" && /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("label", {
+                    htmlFor: "execute-message",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Message *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("textarea", {
+                    id: "execute-message",
+                    value: message,
+                    onChange: (e) => setMessage(e.target.value),
+                    placeholder: "Enter your message to the agent...",
+                    rows: 4,
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV4("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV4(Button3, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Back"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(Button3, {
+                    onPress: handleExecute,
+                    disabled: isLoading,
+                    children: isLoading ? "Executing..." : "▶️ Execute"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "confirm" && confirmAction === "archive" && /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV4("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Are you sure you want to archive",
+                  " ",
+                  /* @__PURE__ */ jsxDEV4("span", {
+                    className: "text-foreground font-medium",
+                    children: agent.name
+                  }, undefined, false, undefined, this),
+                  "?"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Archived agents cannot be executed but can be restored later."
+              }, undefined, false, undefined, this),
+              error && /* @__PURE__ */ jsxDEV4("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV4(Button3, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(Button3, {
+                    onPress: () => handleStatusChange("archive"),
+                    disabled: isLoading,
+                    children: isLoading ? "Archiving..." : "\uD83D\uDCE6 Archive"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/AgentDashboard.tsx
+import { useState as useState7, useMemo as useMemo3, useCallback as useCallback5 } from "react";
+import {
+  StatCard as StatCard3,
+  StatCardGroup as StatCardGroup3,
+  Button as Button4
+} from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function AgentDashboard() {
+  const [activeTab, setActiveTab] = useState7("runs");
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState7(false);
+  const [selectedAgent, setSelectedAgent] = useState7(null);
+  const [isAgentActionsOpen, setIsAgentActionsOpen] = useState7(false);
+  const { metrics, refetch: refetchRuns } = useRunList();
+  const { refetch: refetchAgents } = useAgentList();
+  const mutations = useAgentMutations({
+    onSuccess: () => {
+      refetchAgents();
+      refetchRuns();
+    }
+  });
+  const handleAgentClick = useCallback5((agent) => {
+    setSelectedAgent(agent);
+    setIsAgentActionsOpen(true);
+  }, []);
+  const tabs = [
+    { id: "runs", label: "Runs", icon: "▶" },
+    { id: "agents", label: "Agents", icon: "\uD83E\uDD16" },
+    { id: "tools", label: "Tools", icon: "\uD83D\uDD27" },
+    { id: "metrics", label: "Metrics", icon: "\uD83D\uDCCA" }
+  ];
+  const summaryStats = useMemo3(() => {
+    if (!metrics) {
+      return [
+        { label: "Total Runs", value: "-", hint: "Loading..." },
+        { label: "Success Rate", value: "-", hint: "" },
+        { label: "Total Tokens", value: "-", hint: "" },
+        { label: "Total Cost", value: "-", hint: "" }
+      ];
+    }
+    return [
+      {
+        label: "Total Runs",
+        value: metrics.totalRuns.toLocaleString(),
+        hint: `${(metrics.successRate * 100).toFixed(0)}% success`
+      },
+      {
+        label: "Success Rate",
+        value: `${(metrics.successRate * 100).toFixed(0)}%`,
+        hint: "of all runs"
+      },
+      {
+        label: "Total Tokens",
+        value: metrics.totalTokens >= 1e6 ? `${(metrics.totalTokens / 1e6).toFixed(1)}M` : `${(metrics.totalTokens / 1000).toFixed(0)}K`,
+        hint: "This period"
+      },
+      {
+        label: "Total Cost",
+        value: `$${metrics.totalCostUsd.toFixed(2)}`,
+        hint: "This period"
+      }
+    ];
+  }, [metrics]);
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "AI Agent Console"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Button4, {
+            onPress: () => setIsCreateModalOpen(true),
+            children: [
+              /* @__PURE__ */ jsxDEV5("span", {
+                className: "mr-2",
+                children: "+"
+              }, undefined, false, undefined, this),
+              " New Agent"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5(StatCardGroup3, {
+        children: summaryStats.map((stat, i) => /* @__PURE__ */ jsxDEV5(StatCard3, {
+          label: stat.label,
+          value: stat.value,
+          hint: stat.hint
+        }, i, false, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("nav", {
+        className: "bg-muted flex gap-1 rounded-lg p-1",
+        role: "tablist",
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV5("button", {
+          type: "button",
+          role: "tab",
+          "aria-selected": activeTab === tab.id,
+          onClick: () => setActiveTab(tab.id),
+          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+          children: [
+            /* @__PURE__ */ jsxDEV5("span", {
+              children: tab.icon
+            }, undefined, false, undefined, this),
+            tab.label
+          ]
+        }, tab.id, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "min-h-[400px]",
+        role: "tabpanel",
+        children: [
+          activeTab === "runs" && /* @__PURE__ */ jsxDEV5(RunListView, {}, undefined, false, undefined, this),
+          activeTab === "agents" && /* @__PURE__ */ jsxDEV5(AgentListViewWithActions, {
+            onAgentClick: handleAgentClick
+          }, undefined, false, undefined, this),
+          activeTab === "tools" && /* @__PURE__ */ jsxDEV5(ToolRegistryView, {}, undefined, false, undefined, this),
+          activeTab === "metrics" && /* @__PURE__ */ jsxDEV5(MetricsView, {
+            metrics
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5(CreateAgentModal, {
+        isOpen: isCreateModalOpen,
+        onClose: () => setIsCreateModalOpen(false),
+        onSubmit: async (input) => {
+          await mutations.createAgent(input);
+        },
+        isLoading: mutations.createState.loading
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5(AgentActionsModal, {
+        isOpen: isAgentActionsOpen,
+        agent: selectedAgent,
+        onClose: () => {
+          setIsAgentActionsOpen(false);
+          setSelectedAgent(null);
+        },
+        onActivate: async (agentId) => {
+          await mutations.activateAgent(agentId);
+        },
+        onPause: async (agentId) => {
+          await mutations.pauseAgent(agentId);
+        },
+        onArchive: async (agentId) => {
+          await mutations.archiveAgent(agentId);
+        },
+        onExecute: async (agentId, message) => {
+          await mutations.executeAgent({ agentId, message });
+        },
+        isLoading: mutations.isLoading
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function AgentListViewWithActions({
+  onAgentClick
+}) {
+  const { data, loading, error, stats, refetch } = useAgentList();
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      className: "text-muted-foreground flex h-64 items-center justify-center",
+      children: "Loading agents..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      className: "text-destructive flex h-64 flex-col items-center justify-center",
+      children: [
+        /* @__PURE__ */ jsxDEV5("p", {
+          children: [
+            "Failed to load agents: ",
+            error.message
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV5(Button4, {
+          variant: "outline",
+          onPress: refetch,
+          className: "mt-2",
+          children: "Retry"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      className: "text-muted-foreground flex h-64 flex-col items-center justify-center",
+      children: [
+        /* @__PURE__ */ jsxDEV5("p", {
+          className: "text-lg font-medium",
+          children: "No agents yet"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("p", {
+          className: "text-sm",
+          children: "Create your first AI agent to get started."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-4",
+    children: [
+      stats && /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex gap-4 text-sm",
+        children: [
+          /* @__PURE__ */ jsxDEV5("span", {
+            children: [
+              "Total: ",
+              stats.total
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "text-green-600",
+            children: [
+              "Active: ",
+              stats.active
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "text-yellow-600",
+            children: [
+              "Paused: ",
+              stats.paused
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "text-blue-600",
+            children: [
+              "Draft: ",
+              stats.draft
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+        children: data.items.map((agent) => /* @__PURE__ */ jsxDEV5(AgentCard, {
+          agent,
+          onClick: () => onAgentClick(agent)
+        }, agent.id, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function AgentCard({ agent, onClick }) {
+  const statusColors = {
+    ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+    DRAFT: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+    PAUSED: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+    ARCHIVED: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+  };
+  return /* @__PURE__ */ jsxDEV5("div", {
+    onClick,
+    className: "border-border bg-card cursor-pointer rounded-xl border p-4 transition-all hover:shadow-md",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ")
+        onClick();
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex items-start justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "min-w-0 flex-1",
+            children: [
+              /* @__PURE__ */ jsxDEV5("h3", {
+                className: "truncate font-semibold",
+                children: agent.name
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("p", {
+                className: "text-muted-foreground text-sm",
+                children: [
+                  agent.modelProvider,
+                  " / ",
+                  agent.modelName
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: `rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[agent.status]}`,
+            children: agent.status
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      agent.description && /* @__PURE__ */ jsxDEV5("p", {
+        className: "text-muted-foreground mt-2 line-clamp-2 text-sm",
+        children: agent.description
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "mt-3 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "text-muted-foreground text-xs",
+            children: agent.modelName
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Button4, {
+            variant: "ghost",
+            size: "sm",
+            onPress: onClick,
+            children: "Actions"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MetricsView({ metrics }) {
+  if (!metrics) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      className: "text-muted-foreground flex h-64 items-center justify-center",
+      children: "Loading metrics..."
+    }, undefined, false, undefined, this);
+  }
+  const completedRuns = Math.round(metrics.totalRuns * metrics.successRate);
+  const failedRuns = metrics.totalRuns - completedRuns;
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV5("h3", {
+        className: "text-lg font-semibold",
+        children: "Usage Analytics"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "grid gap-6 md:grid-cols-2",
+        children: [
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "border-border bg-card rounded-xl border p-4",
+            children: [
+              /* @__PURE__ */ jsxDEV5("h4", {
+                className: "font-medium",
+                children: "Run Outcomes"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                className: "mt-4 space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV5(ProgressBar, {
+                    label: "Completed",
+                    value: completedRuns,
+                    total: metrics.totalRuns,
+                    color: "bg-green-500"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5(ProgressBar, {
+                    label: "Failed",
+                    value: failedRuns,
+                    total: metrics.totalRuns,
+                    color: "bg-red-500"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "border-border bg-card rounded-xl border p-4",
+            children: [
+              /* @__PURE__ */ jsxDEV5("h4", {
+                className: "font-medium",
+                children: "Performance"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("dl", {
+                className: "mt-4 grid grid-cols-2 gap-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV5("div", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("dt", {
+                        className: "text-muted-foreground text-sm",
+                        children: "Avg Duration"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("dd", {
+                        className: "text-xl font-semibold",
+                        children: [
+                          (metrics.averageDurationMs / 1000).toFixed(1),
+                          "s"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("div", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("dt", {
+                        className: "text-muted-foreground text-sm",
+                        children: "Success Rate"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("dd", {
+                        className: "text-xl font-semibold",
+                        children: [
+                          (metrics.successRate * 100).toFixed(0),
+                          "%"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "border-border bg-card rounded-xl border p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h4", {
+            className: "font-medium",
+            children: "Key Metrics"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("dl", {
+            className: "mt-4 grid gap-4 sm:grid-cols-3",
+            children: [
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("dt", {
+                    className: "text-muted-foreground text-sm",
+                    children: "Total Runs"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("dd", {
+                    className: "text-2xl font-semibold",
+                    children: metrics.totalRuns.toLocaleString()
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("dt", {
+                    className: "text-muted-foreground text-sm",
+                    children: "Total Tokens"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("dd", {
+                    className: "text-2xl font-semibold",
+                    children: [
+                      (metrics.totalTokens / 1000).toFixed(0),
+                      "K"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("dt", {
+                    className: "text-muted-foreground text-sm",
+                    children: "Cost per Run"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("dd", {
+                    className: "text-2xl font-semibold",
+                    children: [
+                      "$",
+                      metrics.totalRuns > 0 ? (metrics.totalCostUsd / metrics.totalRuns).toFixed(4) : "0"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ProgressBar({
+  label,
+  value,
+  total,
+  color
+}) {
+  const pct = total > 0 ? value / total * 100 : 0;
+  return /* @__PURE__ */ jsxDEV5("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex justify-between text-sm",
+        children: [
+          /* @__PURE__ */ jsxDEV5("span", {
+            children: label
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "text-muted-foreground",
+            children: [
+              value,
+              " (",
+              pct.toFixed(0),
+              "%)"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "bg-muted mt-1 h-2 overflow-hidden rounded-full",
+        children: /* @__PURE__ */ jsxDEV5("div", {
+          className: `h-full ${color}`,
+          style: { width: `${pct}%` }
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  AgentDashboard
+};