@contractspec/example.agent-console 3.7.6 → 3.8.2

package/dist/ui/index.js

@@ -1,12 +1,561 @@
 // @bun
-// src/ui/hooks/useRunList.ts
-import { useCallback, useEffect, useState } from "react";
+// src/visualizations/catalog.ts
+import {
+  defineVisualization,
+  VisualizationRegistry
+} from "@contractspec/lib.contracts-spec/visualizations";
+var RUN_LIST_REF = { key: "agent.run.list", version: "1.0.0" };
+var META = {
+  version: "1.0.0",
+  domain: "ai-ops",
+  stability: "experimental",
+  owners: ["@example.agent-console"],
+  tags: ["agent-console", "visualization", "operations"]
+};
+var AgentRunStatusVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "agent-console.visualization.run-status",
+    title: "Run Status Breakdown",
+    description: "Distribution of run outcomes across the current sample.",
+    goal: "Make operational success and failure mix visible at a glance.",
+    context: "Agent operations overview."
+  },
+  source: { primary: RUN_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "pie",
+    nameDimension: "status",
+    valueMeasure: "runs",
+    dimensions: [
+      { key: "status", label: "Status", dataPath: "status", type: "category" }
+    ],
+    measures: [
+      { key: "runs", label: "Runs", dataPath: "runs", format: "number" }
+    ],
+    table: { caption: "Run counts by status." }
+  }
+});
+var AgentRunActivityVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "agent-console.visualization.run-activity",
+    title: "Recent Run Activity",
+    description: "Daily run volume across the current sample.",
+    goal: "Show whether agent activity is rising or slowing down.",
+    context: "Operations trend monitoring."
+  },
+  source: { primary: RUN_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "line",
+    xDimension: "day",
+    yMeasures: ["runs"],
+    dimensions: [{ key: "day", label: "Day", dataPath: "day", type: "time" }],
+    measures: [
+      {
+        key: "runs",
+        label: "Runs",
+        dataPath: "runs",
+        format: "number",
+        color: "#0f766e"
+      }
+    ],
+    table: { caption: "Daily run counts." }
+  }
+});
+var AgentRunEfficiencyVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "agent-console.visualization.run-efficiency",
+    title: "Duration vs Tokens",
+    description: "Scatter chart comparing token consumption and runtime.",
+    goal: "Reveal outlier runs that are slow relative to their token usage.",
+    context: "Operational performance diagnostics."
+  },
+  source: { primary: RUN_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "scatter",
+    xDimension: "totalTokens",
+    yMeasures: ["durationMs"],
+    dimensions: [
+      {
+        key: "totalTokens",
+        label: "Total Tokens",
+        dataPath: "totalTokens",
+        type: "number"
+      }
+    ],
+    measures: [
+      {
+        key: "durationMs",
+        label: "Duration",
+        dataPath: "durationMs",
+        format: "duration",
+        color: "#7c3aed"
+      },
+      {
+        key: "estimatedCostUsd",
+        label: "Cost",
+        dataPath: "estimatedCostUsd",
+        format: "currency"
+      }
+    ],
+    series: [
+      {
+        key: "runs",
+        label: "Runs",
+        measure: "durationMs",
+        type: "scatter",
+        color: "#7c3aed"
+      }
+    ],
+    table: { caption: "Run duration versus token usage." }
+  }
+});
+var AgentVisualizationSpecs = [
+  AgentRunStatusVisualization,
+  AgentRunActivityVisualization,
+  AgentRunEfficiencyVisualization
+];
+var AgentVisualizationRegistry = new VisualizationRegistry([
+  ...AgentVisualizationSpecs
+]);
+var AgentVisualizationRefs = AgentVisualizationSpecs.map((spec) => ({
+  key: spec.meta.key,
+  version: spec.meta.version
+}));
+
+// src/visualizations/selectors.ts
+function dayKey(value) {
+  if (!value)
+    return "unknown";
+  return value.toISOString().slice(0, 10);
+}
+function createAgentVisualizationItems(runs) {
+  const statusCounts = new Map;
+  const activityCounts = new Map;
+  for (const run of runs) {
+    statusCounts.set(run.status, (statusCounts.get(run.status) ?? 0) + 1);
+    activityCounts.set(dayKey(run.startedAt ?? run.queuedAt), (activityCounts.get(dayKey(run.startedAt ?? run.queuedAt)) ?? 0) + 1);
+  }
+  return [
+    {
+      key: "run-status",
+      spec: AgentRunStatusVisualization,
+      data: {
+        data: Array.from(statusCounts.entries()).map(([status, count]) => ({
+          status,
+          runs: count
+        }))
+      },
+      title: "Run Status Breakdown",
+      description: "Completed, failed, running, and cancelled runs in the sample.",
+      height: 260
+    },
+    {
+      key: "run-activity",
+      spec: AgentRunActivityVisualization,
+      data: {
+        data: Array.from(activityCounts.entries()).sort(([left], [right]) => left.localeCompare(right)).map(([day, count]) => ({ day, runs: count }))
+      },
+      title: "Recent Run Activity",
+      description: "Daily run volume derived from run start times."
+    },
+    {
+      key: "run-efficiency",
+      spec: AgentRunEfficiencyVisualization,
+      data: {
+        data: runs.filter((run) => typeof run.durationMs === "number").map((run) => ({
+          totalTokens: run.totalTokens,
+          durationMs: run.durationMs ?? 0,
+          estimatedCostUsd: run.estimatedCostUsd
+        }))
+      },
+      title: "Duration vs Tokens",
+      description: "Operational scatter plot for spotting inefficient runs."
+    }
+  ];
+}
+// src/shared/mock-agents.ts
+var MOCK_AGENTS = [
+  {
+    id: "agent-1",
+    organizationId: "demo-org",
+    name: "Customer Support Bot",
+    slug: "customer-support-bot",
+    description: "Handles tier-1 customer inquiries and routes complex issues.",
+    status: "ACTIVE",
+    modelProvider: "OPENAI",
+    modelName: "gpt-4o-mini",
+    modelConfig: { temperature: 0.7 },
+    systemPrompt: "You are a helpful customer support assistant.",
+    toolChoice: "auto",
+    maxIterations: 10,
+    timeoutMs: 120000,
+    version: "1.0.0",
+    tags: ["support", "tier-1"],
+    createdAt: new Date("2024-01-15T10:00:00Z"),
+    updatedAt: new Date("2024-03-20T14:30:00Z")
+  },
+  {
+    id: "agent-2",
+    organizationId: "demo-org",
+    name: "Code Review Assistant",
+    slug: "code-review-assistant",
+    description: "Reviews pull requests and provides actionable feedback.",
+    status: "ACTIVE",
+    modelProvider: "ANTHROPIC",
+    modelName: "claude-sonnet-4-20250514",
+    modelConfig: { temperature: 0.3 },
+    systemPrompt: "You are a code review expert.",
+    toolChoice: "auto",
+    maxIterations: 15,
+    timeoutMs: 180000,
+    version: "2.1.0",
+    tags: ["code", "review", "dev"],
+    createdAt: new Date("2024-02-10T09:00:00Z"),
+    updatedAt: new Date("2024-04-05T11:15:00Z")
+  },
+  {
+    id: "agent-3",
+    organizationId: "demo-org",
+    name: "Data Analyst",
+    slug: "data-analyst",
+    description: "Queries databases and generates insights from data.",
+    status: "PAUSED",
+    modelProvider: "OPENAI",
+    modelName: "gpt-4o",
+    modelConfig: { temperature: 0.5 },
+    systemPrompt: "You are a data analyst expert in SQL and analytics.",
+    toolChoice: "required",
+    maxIterations: 20,
+    timeoutMs: 300000,
+    version: "1.2.0",
+    tags: ["data", "analytics", "sql"],
+    createdAt: new Date("2024-03-01T08:00:00Z"),
+    updatedAt: new Date("2024-04-10T16:45:00Z")
+  },
+  {
+    id: "agent-4",
+    organizationId: "demo-org",
+    name: "Meeting Scheduler",
+    slug: "meeting-scheduler",
+    description: "Schedules meetings and manages calendar conflicts.",
+    status: "DRAFT",
+    modelProvider: "GOOGLE",
+    modelName: "gemini-2.0-flash",
+    modelConfig: { temperature: 0.2 },
+    systemPrompt: "You help schedule and organize meetings efficiently.",
+    toolChoice: "auto",
+    maxIterations: 5,
+    timeoutMs: 60000,
+    version: "0.1.0",
+    tags: ["calendar", "scheduling"],
+    createdAt: new Date("2024-04-01T12:00:00Z"),
+    updatedAt: new Date("2024-04-01T12:00:00Z")
+  }
+];
+
+// src/shared/mock-tools.ts
+var MOCK_TOOLS = [
+  {
+    id: "tool-1",
+    organizationId: "demo-org",
+    name: "Web Search",
+    slug: "web-search",
+    description: "Search the web for real-time information using Brave API.",
+    category: "RETRIEVAL",
+    status: "ACTIVE",
+    parametersSchema: {
+      type: "object",
+      properties: {
+        query: { type: "string", description: "Search query" },
+        numResults: { type: "number", default: 10 }
+      },
+      required: ["query"]
+    },
+    outputSchema: { type: "array", items: { type: "object" } },
+    implementationType: "http",
+    implementationConfig: {
+      url: "https://api.brave.com/search",
+      method: "GET"
+    },
+    maxInvocationsPerMinute: 60,
+    timeoutMs: 30000,
+    version: "1.0.0",
+    tags: ["search", "web"],
+    createdAt: new Date("2024-01-01T00:00:00Z"),
+    updatedAt: new Date("2024-02-15T10:00:00Z")
+  },
+  {
+    id: "tool-2",
+    organizationId: "demo-org",
+    name: "SQL Query",
+    slug: "sql-query",
+    description: "Execute read-only SQL queries against the data warehouse.",
+    category: "RETRIEVAL",
+    status: "ACTIVE",
+    parametersSchema: {
+      type: "object",
+      properties: {
+        query: { type: "string", description: "SQL query" },
+        maxRows: { type: "number", default: 100 }
+      },
+      required: ["query"]
+    },
+    outputSchema: { type: "object" },
+    implementationType: "function",
+    implementationConfig: { handler: "executeSqlQuery" },
+    maxInvocationsPerMinute: 30,
+    timeoutMs: 60000,
+    version: "1.1.0",
+    tags: ["sql", "database"],
+    createdAt: new Date("2024-01-05T00:00:00Z"),
+    updatedAt: new Date("2024-03-10T14:00:00Z")
+  },
+  {
+    id: "tool-3",
+    organizationId: "demo-org",
+    name: "Email Sender",
+    slug: "email-sender",
+    description: "Send emails via SMTP or API.",
+    category: "COMMUNICATION",
+    status: "ACTIVE",
+    parametersSchema: {
+      type: "object",
+      properties: {
+        to: { type: "string" },
+        subject: { type: "string" },
+        body: { type: "string" }
+      },
+      required: ["to", "subject", "body"]
+    },
+    implementationType: "http",
+    implementationConfig: { url: "/api/send-email", method: "POST" },
+    maxInvocationsPerMinute: 10,
+    timeoutMs: 30000,
+    version: "1.0.0",
+    tags: ["email", "communication"],
+    createdAt: new Date("2024-02-01T00:00:00Z"),
+    updatedAt: new Date("2024-02-01T00:00:00Z")
+  },
+  {
+    id: "tool-4",
+    organizationId: "demo-org",
+    name: "GitHub Integration",
+    slug: "github-integration",
+    description: "Interact with GitHub repositories, PRs, and issues.",
+    category: "INTEGRATION",
+    status: "ACTIVE",
+    parametersSchema: {
+      type: "object",
+      properties: {
+        action: {
+          type: "string",
+          enum: ["list_prs", "get_pr", "create_comment"]
+        },
+        repo: { type: "string" },
+        params: { type: "object" }
+      },
+      required: ["action", "repo"]
+    },
+    implementationType: "http",
+    implementationConfig: { url: "https://api.github.com", auth: "token" },
+    maxInvocationsPerMinute: 100,
+    timeoutMs: 15000,
+    version: "2.0.0",
+    tags: ["github", "integration", "code"],
+    createdAt: new Date("2024-02-20T00:00:00Z"),
+    updatedAt: new Date("2024-04-01T09:00:00Z")
+  },
+  {
+    id: "tool-5",
+    organizationId: "demo-org",
+    name: "Calculator",
+    slug: "calculator",
+    description: "Perform mathematical calculations.",
+    category: "COMPUTATION",
+    status: "ACTIVE",
+    parametersSchema: {
+      type: "object",
+      properties: {
+        expression: {
+          type: "string",
+          description: "Math expression to evaluate"
+        }
+      },
+      required: ["expression"]
+    },
+    outputSchema: {
+      type: "object",
+      properties: { result: { type: "number" } }
+    },
+    implementationType: "function",
+    implementationConfig: { handler: "evaluateMath" },
+    timeoutMs: 5000,
+    version: "1.0.0",
+    tags: ["math", "utility"],
+    createdAt: new Date("2024-01-10T00:00:00Z"),
+    updatedAt: new Date("2024-01-10T00:00:00Z")
+  }
+];
+
+// src/shared/mock-runs.ts
+var MOCK_RUNS = [
+  {
+    id: "run-1",
+    organizationId: "demo-org",
+    projectId: "demo-project",
+    agentId: "agent-1",
+    agentName: "Customer Support Bot",
+    userId: "user-1",
+    sessionId: "session-1",
+    input: { message: "How do I reset my password?", context: {} },
+    output: { response: "You can reset your password by clicking..." },
+    status: "COMPLETED",
+    totalTokens: 1250,
+    promptTokens: 800,
+    completionTokens: 450,
+    totalIterations: 3,
+    durationMs: 4500,
+    estimatedCostUsd: 0.0025,
+    queuedAt: new Date("2024-04-15T10:00:00Z"),
+    startedAt: new Date("2024-04-15T10:00:01Z"),
+    completedAt: new Date("2024-04-15T10:00:05Z"),
+    steps: [],
+    logs: []
+  },
+  {
+    id: "run-2",
+    organizationId: "demo-org",
+    projectId: "demo-project",
+    agentId: "agent-2",
+    agentName: "Code Review Assistant",
+    userId: "user-2",
+    input: { message: "Review PR #123", context: { prNumber: 123 } },
+    status: "IN_PROGRESS",
+    totalTokens: 3500,
+    promptTokens: 3000,
+    completionTokens: 500,
+    totalIterations: 5,
+    queuedAt: new Date("2024-04-15T10:30:00Z"),
+    startedAt: new Date("2024-04-15T10:30:02Z"),
+    steps: [],
+    logs: []
+  },
+  {
+    id: "run-3",
+    organizationId: "demo-org",
+    projectId: "demo-project",
+    agentId: "agent-1",
+    agentName: "Customer Support Bot",
+    userId: "user-1",
+    input: { message: "What are your business hours?" },
+    output: { response: "Our business hours are 9 AM to 5 PM EST..." },
+    status: "COMPLETED",
+    totalTokens: 800,
+    promptTokens: 500,
+    completionTokens: 300,
+    totalIterations: 2,
+    durationMs: 2100,
+    estimatedCostUsd: 0.0012,
+    queuedAt: new Date("2024-04-15T09:00:00Z"),
+    startedAt: new Date("2024-04-15T09:00:01Z"),
+    completedAt: new Date("2024-04-15T09:00:03Z"),
+    steps: [],
+    logs: []
+  },
+  {
+    id: "run-4",
+    organizationId: "demo-org",
+    projectId: "demo-project",
+    agentId: "agent-3",
+    agentName: "Data Analyst",
+    userId: "user-3",
+    input: { message: "Generate sales report for Q1" },
+    status: "FAILED",
+    errorMessage: "Database connection timeout",
+    errorCode: "DB_TIMEOUT",
+    totalTokens: 2000,
+    promptTokens: 1500,
+    completionTokens: 500,
+    totalIterations: 8,
+    durationMs: 45000,
+    queuedAt: new Date("2024-04-14T15:00:00Z"),
+    startedAt: new Date("2024-04-14T15:00:05Z"),
+    completedAt: new Date("2024-04-14T15:00:50Z"),
+    steps: [],
+    logs: []
+  },
+  {
+    id: "run-5",
+    organizationId: "demo-org",
+    projectId: "demo-project",
+    agentId: "agent-2",
+    agentName: "Code Review Assistant",
+    userId: "user-2",
+    input: { message: "Review PR #120" },
+    output: { response: "Code review complete. 3 suggestions..." },
+    status: "COMPLETED",
+    totalTokens: 5200,
+    promptTokens: 4000,
+    completionTokens: 1200,
+    totalIterations: 7,
+    durationMs: 15000,
+    estimatedCostUsd: 0.0156,
+    queuedAt: new Date("2024-04-14T11:00:00Z"),
+    startedAt: new Date("2024-04-14T11:00:03Z"),
+    completedAt: new Date("2024-04-14T11:00:18Z"),
+    steps: [],
+    logs: []
+  }
+];
+
+// src/ui/AgentDashboard.visualizations.tsx
+import {
+  VisualizationCard,
+  VisualizationGrid
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function AgentVisualizationOverview({ runs }) {
+  const items = createAgentVisualizationItems(runs);
+  return /* @__PURE__ */ jsxDEV("section", {
+    className: "space-y-3",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "font-semibold text-lg",
+            children: "Operational Visualizations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Contract-backed charts derived from recent run activity."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VisualizationGrid, {
+        children: items.map((item) => /* @__PURE__ */ jsxDEV(VisualizationCard, {
+          data: item.data,
+          description: item.description,
+          height: item.height,
+          spec: item.spec,
+          title: item.title
+        }, item.key, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/hooks/useAgentList.ts
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
-function useRunList(options = {}) {
+import { useCallback, useEffect, useMemo, useState } from "react";
+function useAgentList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { agent } = handlers;
   const [data, setData] = useState(null);
-  const [metrics, setMetrics] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [page, setPage] = useState(1);
@@ -14,37 +563,38 @@ function useRunList(options = {}) {
     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);
+      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.agentId, options.status, options.limit, page]);
+  }, [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,
-    metrics,
     loading,
     error,
+    stats,
     page,
     refetch: fetchData,
     nextPage: () => setPage((p) => p + 1),
@@ -52,497 +602,142 @@ function useRunList(options = {}) {
   };
 }
 
-// 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";
-  }
+// src/ui/hooks/useAgentMutations.ts
+import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback2, useState as useState2 } from "react";
+
+// src/shared/demo-runtime-seed.ts
+var AGENT_CONSOLE_DEMO_ORGANIZATION_ID = "demo-org";
+var AGENT_CONSOLE_DEMO_PROJECT_ID = "agent-console-demo";
+function slugify(name) {
+  return name.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
-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 cloneAgent(agent) {
+  return { ...agent };
 }
-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 cloneTool(tool) {
+  return { ...tool };
 }
-function formatCost(cost) {
-  if (!cost)
-    return "-";
-  return `$${cost.toFixed(4)}`;
+function cloneRun(run) {
+  return { ...run };
 }
-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)
-  };
+function createDefaultNow() {
+  let tick = 0;
+  const base = Date.parse("2026-03-20T09:00:00.000Z");
+  return () => new Date(base + tick++ * 60000);
+}
+function normalizeProvider(provider) {
+  return provider.toLowerCase();
+}
+function normalizeRunStatus(status) {
+  return status === "IN_PROGRESS" ? "RUNNING" : status;
+}
+function createSeedState(projectId, organizationId) {
+  const agents = MOCK_AGENTS.map((agent) => ({
+    id: agent.id,
+    projectId,
+    organizationId,
+    name: agent.name,
+    slug: agent.slug,
+    description: agent.description,
+    modelProvider: normalizeProvider(agent.modelProvider),
+    modelName: agent.modelName,
+    systemPrompt: agent.systemPrompt,
+    temperature: typeof agent.modelConfig?.temperature === "number" ? agent.modelConfig.temperature : 0.4,
+    maxTokens: 8192,
+    status: agent.status,
+    createdAt: agent.createdAt,
+    updatedAt: agent.updatedAt
+  }));
+  const tools = MOCK_TOOLS.map((tool) => ({
+    id: tool.id,
+    projectId,
+    organizationId,
+    name: tool.name,
+    description: tool.description,
+    version: tool.version,
+    category: tool.category,
+    status: tool.status,
+    inputSchema: JSON.stringify(tool.parametersSchema),
+    outputSchema: tool.outputSchema ? JSON.stringify(tool.outputSchema) : undefined,
+    endpoint: typeof tool.implementationConfig?.url === "string" ? tool.implementationConfig.url : undefined,
+    createdAt: tool.createdAt,
+    updatedAt: tool.updatedAt
+  }));
+  const agentNames = new Map(agents.map((agent) => [agent.id, agent.name]));
+  const runs = MOCK_RUNS.map((run) => ({
+    id: run.id,
+    projectId,
+    agentId: run.agentId,
+    agentName: agentNames.get(run.agentId) ?? run.agentName ?? "Unknown agent",
+    status: normalizeRunStatus(run.status),
+    input: JSON.stringify(run.input),
+    output: run.output ? JSON.stringify(run.output) : undefined,
+    totalTokens: run.totalTokens,
+    promptTokens: run.promptTokens,
+    completionTokens: run.completionTokens,
+    estimatedCostUsd: run.estimatedCostUsd ?? 0,
+    durationMs: run.durationMs,
+    errorMessage: run.errorMessage,
+    queuedAt: run.queuedAt,
+    startedAt: run.startedAt,
+    completedAt: run.completedAt
+  }));
+  return { agents, tools, runs };
+}
+function summarizeRunMetrics(runs) {
+  const totalRuns = runs.length;
+  const completedRuns = runs.filter((run) => run.status === "COMPLETED").length;
+  const completedDurations = runs.map((run) => run.durationMs).filter((duration) => typeof duration === "number");
+  return {
+    totalRuns,
+    successRate: totalRuns === 0 ? 0 : completedRuns / totalRuns,
+    averageDurationMs: completedDurations.length === 0 ? 0 : Math.round(completedDurations.reduce((sum, duration) => sum + duration, 0) / completedDurations.length),
+    totalTokens: runs.reduce((sum, run) => sum + run.totalTokens, 0),
+    totalCostUsd: runs.reduce((sum, run) => sum + run.estimatedCostUsd, 0)
+  };
 }
 
 // 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 normalizeMutationError(error, fallbackMessage) {
+  return error instanceof Error ? error : new Error(fallbackMessage);
+}
 function useAgentMutations(options = {}) {
-  const { handlers, projectId } = useTemplateRuntime4();
+  const { handlers, projectId } = useTemplateRuntime2();
   const { agent } = handlers;
-  const [createState, setCreateState] = useState4({
+  const [createState, setCreateState] = useState2({
     loading: false,
     error: null,
     data: null
   });
-  const [updateState, setUpdateState] = useState4({
+  const [updateState, setUpdateState] = useState2({
     loading: false,
     error: null,
     data: null
   });
-  const [executeState, setExecuteState] = useState4({
+  const [executeState, setExecuteState] = useState2({
     loading: false,
     error: null,
     data: null
   });
-  const createAgent = useCallback4(async (input) => {
+  const createAgent = useCallback2(async (input) => {
     setCreateState({ loading: true, error: null, data: null });
     try {
       const result = await agent.createAgent(input, {
         projectId,
-        organizationId: "demo-org"
+        organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID
       });
       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");
+      const error = normalizeMutationError(err, "Failed to create agent");
       setCreateState({ loading: false, error, data: null });
       options.onError?.(error);
-      return null;
+      throw error;
     }
   }, [agent, projectId, options]);
-  const updateAgent = useCallback4(async (input) => {
+  const updateAgent = useCallback2(async (input) => {
     setUpdateState({ loading: true, error: null, data: null });
     try {
       const result = await agent.updateAgent(input);
@@ -550,37 +745,40 @@ function useAgentMutations(options = {}) {
       options.onSuccess?.();
       return result;
     } catch (err) {
-      const error = err instanceof Error ? err : new Error("Failed to update agent");
+      const error = normalizeMutationError(err, "Failed to update agent");
       setUpdateState({ loading: false, error, data: null });
       options.onError?.(error);
-      return null;
+      throw error;
     }
   }, [agent, options]);
-  const activateAgent = useCallback4(async (agentId) => {
+  const activateAgent = useCallback2(async (agentId) => {
     return updateAgent({ id: agentId, status: "ACTIVE" });
   }, [updateAgent]);
-  const pauseAgent = useCallback4(async (agentId) => {
+  const pauseAgent = useCallback2(async (agentId) => {
     return updateAgent({ id: agentId, status: "PAUSED" });
   }, [updateAgent]);
-  const archiveAgent = useCallback4(async (agentId) => {
+  const archiveAgent = useCallback2(async (agentId) => {
     return updateAgent({ id: agentId, status: "ARCHIVED" });
   }, [updateAgent]);
-  const executeAgent = useCallback4(async (input) => {
+  const executeAgent = useCallback2(async (input) => {
     setExecuteState({ loading: true, error: null, data: null });
     try {
       const result = await agent.executeAgent({
         agentId: input.agentId,
         message: input.message,
-        context: { projectId, organizationId: "demo-org" }
+        context: {
+          projectId,
+          organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID
+        }
       });
       setExecuteState({ loading: false, error: null, data: result });
       options.onSuccess?.();
       return result;
     } catch (err) {
-      const error = err instanceof Error ? err : new Error("Failed to execute agent");
+      const error = normalizeMutationError(err, "Failed to execute agent");
       setExecuteState({ loading: false, error, data: null });
       options.onError?.(error);
-      return null;
+      throw error;
     }
   }, [agent, projectId, options]);
   return {
@@ -597,251 +795,78 @@ function useAgentMutations(options = {}) {
   };
 }
 
-// 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-5.4", "gpt-5-mini", "gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo"]
-  },
-  {
-    value: "anthropic",
-    label: "Anthropic",
-    models: ["claude-sonnet-4-6", "claude-opus-4-6", "claude-haiku-4-5"]
-  },
-  {
-    value: "google",
-    label: "Google",
-    models: [
-      "gemini-2.5-flash",
-      "gemini-2.5-pro",
-      "gemini-pro",
-      "gemini-ultra"
-    ]
-  },
-  {
-    value: "mistral",
-    label: "Mistral",
-    models: [
-      "mistral-large-2512",
-      "mistral-large-latest",
-      "mistral-medium-latest",
-      "mistral-small-latest"
-    ]
-  }
-];
-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-5.4");
-  const [systemPrompt, setSystemPrompt] = useState5("");
-  const [error, setError] = useState5(null);
-  const selectedProvider = MODEL_PROVIDERS.find((p) => p.value === modelProvider);
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+// src/ui/hooks/useRunList.ts
+import { useTemplateRuntime as useTemplateRuntime3 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback3, useEffect as useEffect2, useState as useState3 } from "react";
+function useRunList(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime3();
+  const { agent } = handlers;
+  const [data, setData] = useState3(null);
+  const [metrics, setMetrics] = useState3(null);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const [internalPageIndex, setInternalPageIndex] = useState3(0);
+  const pageSize = options.pageSize ?? options.limit ?? 20;
+  const pageIndex = options.pageIndex ?? internalPageIndex;
+  const [sort] = options.sorting ?? [];
+  const fetchData = useCallback3(async () => {
+    setLoading(true);
     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-5.4");
-      setSystemPrompt("");
-      onClose();
+      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.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]);
+      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))
   };
-  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";
+import { Button } from "@contractspec/lib.design-system";
+import { useState as useState4 } from "react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function getStatusColor(status) {
   switch (status) {
@@ -867,10 +892,10 @@ function AgentActionsModal({
   onExecute,
   isLoading = false
 }) {
-  const [mode, setMode] = useState6("menu");
-  const [message, setMessage] = useState6("");
-  const [confirmAction, setConfirmAction] = useState6(null);
-  const [error, setError] = useState6(null);
+  const [mode, setMode] = useState4("menu");
+  const [message, setMessage] = useState4("");
+  const [confirmAction, setConfirmAction] = useState4(null);
+  const [error, setError] = useState4(null);
   const resetForm = () => {
     setMode("menu");
     setMessage("");
@@ -919,11 +944,11 @@ function AgentActionsModal({
   };
   if (!isOpen || !agent)
     return null;
-  return /* @__PURE__ */ jsxDEV4("div", {
+  return /* @__PURE__ */ jsxDEV2("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",
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
         onClick: handleClose,
         role: "button",
         tabIndex: 0,
@@ -933,20 +958,20 @@ function AgentActionsModal({
         },
         "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",
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",
         children: [
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: "border-border mb-4 border-b pb-4",
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "mb-4 border-border border-b pb-4",
             children: [
-              /* @__PURE__ */ jsxDEV4("h2", {
-                className: "text-xl font-semibold",
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "font-semibold text-xl",
                 children: agent.name
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4("div", {
+              /* @__PURE__ */ jsxDEV2("div", {
                 className: "mt-1 flex items-center gap-2",
                 children: [
-                  /* @__PURE__ */ jsxDEV4("span", {
+                  /* @__PURE__ */ jsxDEV2("span", {
                     className: "text-muted-foreground text-sm",
                     children: [
                       agent.modelProvider,
@@ -954,207 +979,1064 @@ function AgentActionsModal({
                       agent.modelName
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("span", {
-                    className: `rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(agent.status)}`,
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: `rounded-full px-2 py-0.5 font-medium text-xs ${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",
+              agent.description && /* @__PURE__ */ jsxDEV2("p", {
+                className: "mt-2 text-muted-foreground text-sm",
                 children: agent.description
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          mode === "menu" && /* @__PURE__ */ jsxDEV4("div", {
+          mode === "menu" && /* @__PURE__ */ jsxDEV2("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: "\u25B6\uFE0F"
-                  }, 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: "\u23F8\uFE0F"
-                  }, 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
+              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV2(Button, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => setMode("execute"),
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\u25B6\uFE0F"
+                  }, undefined, false, undefined, this),
+                  " Execute Agent"
+                ]
+              }, undefined, true, undefined, this),
+              (agent.status === "DRAFT" || agent.status === "PAUSED") && /* @__PURE__ */ jsxDEV2(Button, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => handleStatusChange("activate"),
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDFE2"
+                  }, undefined, false, undefined, this),
+                  " Activate Agent"
+                ]
+              }, undefined, true, undefined, this),
+              agent.status === "ACTIVE" && /* @__PURE__ */ jsxDEV2(Button, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => handleStatusChange("pause"),
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\u23F8\uFE0F"
+                  }, undefined, false, undefined, this),
+                  " Pause Agent"
+                ]
+              }, undefined, true, undefined, this),
+              agent.status !== "ARCHIVED" && /* @__PURE__ */ jsxDEV2(Button, {
+                className: "w-full justify-start text-yellow-600 hover:text-yellow-700",
+                variant: "ghost",
+                onPress: () => {
+                  setConfirmAction("archive");
+                  setMode("confirm");
+                },
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDCE6"
+                  }, undefined, false, undefined, this),
+                  " Archive Agent"
+                ]
+              }, undefined, true, undefined, this),
+              agent.status === "ARCHIVED" && /* @__PURE__ */ jsxDEV2(Button, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => handleStatusChange("activate"),
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDD04"
+                  }, undefined, false, undefined, this),
+                  " Restore Agent"
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV2("div", {
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "border-border border-t pt-3",
+                children: /* @__PURE__ */ jsxDEV2(Button, {
+                  className: "w-full",
+                  variant: "outline",
+                  onPress: handleClose,
+                  children: "Close"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "execute" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("label", {
+                    htmlFor: "execute-message",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
+                    children: "Message *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("textarea", {
+                    id: "execute-message",
+                    value: message,
+                    onChange: (e) => setMessage(e.target.value),
+                    placeholder: "Enter your message to the agent...",
+                    rows: 4,
+                    disabled: isLoading,
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV2("div", {
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Back"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button, {
+                    onPress: handleExecute,
+                    disabled: isLoading,
+                    children: isLoading ? "Executing..." : "\u25B6\uFE0F Execute"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "confirm" && confirmAction === "archive" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Are you sure you want to archive",
+                  " ",
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "font-medium text-foreground",
+                    children: agent.name
+                  }, undefined, false, undefined, this),
+                  "?"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Archived agents cannot be executed but can be restored later."
+              }, undefined, false, undefined, this),
+              error && /* @__PURE__ */ jsxDEV2("div", {
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button, {
+                    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/modals/CreateAgentModal.tsx
+import { Button as Button2, Input } from "@contractspec/lib.design-system";
+import { useState as useState5 } from "react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+var MODEL_PROVIDERS = [
+  {
+    value: "openai",
+    label: "OpenAI",
+    models: ["gpt-5.4", "gpt-5-mini", "gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo"]
+  },
+  {
+    value: "anthropic",
+    label: "Anthropic",
+    models: ["claude-sonnet-4-6", "claude-opus-4-6", "claude-haiku-4-5"]
+  },
+  {
+    value: "google",
+    label: "Google",
+    models: [
+      "gemini-2.5-flash",
+      "gemini-2.5-pro",
+      "gemini-pro",
+      "gemini-ultra"
+    ]
+  },
+  {
+    value: "mistral",
+    label: "Mistral",
+    models: [
+      "mistral-large-2512",
+      "mistral-large-latest",
+      "mistral-medium-latest",
+      "mistral-small-latest"
+    ]
+  }
+];
+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-5.4");
+  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-5.4");
+      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: "absolute inset-0 bg-background/80 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: "relative z-10 max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl border border-border bg-card p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "mb-4 font-semibold text-xl",
+            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: "mb-1 block font-medium text-muted-foreground text-sm",
+                    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: "mb-1 block font-medium text-muted-foreground text-sm",
+                    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: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring 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: "mb-1 block font-medium text-muted-foreground text-sm",
+                        children: "Provider *"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("select", {
+                        id: "model-provider",
+                        value: modelProvider,
+                        onChange: (e) => handleProviderChange(e.target.value),
+                        disabled: isLoading,
+                        className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring 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: "mb-1 block font-medium text-muted-foreground text-sm",
+                        children: "Model *"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("select", {
+                        id: "model-name",
+                        value: modelName,
+                        onChange: (e) => setModelName(e.target.value),
+                        disabled: isLoading,
+                        className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring 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: "mb-1 block font-medium text-muted-foreground text-sm",
+                    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: "w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("p", {
+                    className: "mt-1 text-muted-foreground text-xs",
+                    children: "Instructions that define the agent's behavior"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV3("div", {
+                className: "rounded-md bg-destructive/10 p-3 text-destructive 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/views/run-list.shared.tsx
+import { Button as Button3, 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 as jsxDEV4 } 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__ */ jsxDEV4(VStack, {
+    gap: "sm",
+    className: "py-2",
+    children: [
+      /* @__PURE__ */ jsxDEV4(HStack, {
+        justify: "between",
+        className: "flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxDEV4(StatusChip, {
+            tone: getStatusTone(run.status),
+            label: run.status
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Queued ",
+              run.queuedAt.toLocaleString()
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4(HStack, {
+        gap: "lg",
+        className: "flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Prompt ",
+              formatTokens(run.promptTokens)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Completion ",
+              formatTokens(run.completionTokens)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Duration ",
+              formatDuration(run.durationMs)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4(VStack, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Text, {
+            className: "font-medium text-sm",
+            children: "Input"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("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__ */ jsxDEV4(VStack, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Text, {
+            className: "font-medium text-sm",
+            children: "Output"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("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__ */ jsxDEV4(HStack, {
+    gap: "sm",
+    className: "flex-wrap",
+    children: [
+      /* @__PURE__ */ jsxDEV4(Text, {
+        className: "text-muted-foreground text-sm",
+        children: [
+          totalRuns,
+          " runs"
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4(Button3, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => firstRow?.toggleExpanded?.(!firstRow?.isExpanded),
+        children: "Expand Latest Run"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(Button3, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => queuedColumn?.toggleVisibility?.(!queuedColumn?.visible),
+        children: queuedColumn?.visible ? "Hide Time" : "Show Time"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(Button3, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => durationColumn?.toggleVisibility?.(!durationColumn?.visible),
+        children: durationColumn?.visible ? "Hide Duration" : "Show Duration"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(Button3, {
+        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 jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function createRunTableColumns() {
+  return [
+    {
+      id: "queuedAt",
+      header: "Run",
+      label: "Run",
+      accessor: (run) => run.queuedAt.getTime(),
+      cell: ({ item }) => /* @__PURE__ */ jsxDEV5(VStack2, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV5(Text2, {
+            className: "font-mono text-sm",
+            children: item.id.slice(-8)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(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__ */ jsxDEV5(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__ */ jsxDEV5(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 jsxDEV6 } 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__ */ jsxDEV6(RunExpandedContent, {
+      run
+    }, undefined, false, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV6(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__ */ jsxDEV6(RunTableToolbar, {
+      controller,
+      totalRuns: totalItems
+    }, undefined, false, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV6("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 useState6 } from "react";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+"use client";
+function RunListView({ agentId, onRunClick }) {
+  const [sorting, setSorting] = useState6([
+    { id: "queuedAt", desc: true }
+  ]);
+  const [pagination, setPagination] = useState6({
+    pageIndex: 0,
+    pageSize: 3
+  });
+  const { data, metrics, loading, error, refetch } = useRunList({
+    agentId,
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    sorting
+  });
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV7(LoaderBlock, {
+      label: "Loading runs..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV7(ErrorState, {
+      title: "Failed to load runs",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV7(EmptyState, {
+      title: "No runs yet",
+      description: "Execute an agent to see run history here."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV7("div", {
+    className: "space-y-6",
+    children: [
+      metrics ? /* @__PURE__ */ jsxDEV7(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV7(StatCard, {
+            label: "Total Runs",
+            value: metrics.totalRuns
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7(StatCard, {
+            label: "Success Rate",
+            value: `${(metrics.successRate * 100).toFixed(1)}%`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7(StatCard, {
+            label: "Total Tokens",
+            value: formatTokens(metrics.totalTokens)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV7(StatCard, {
+            label: "Total Cost",
+            value: `$${metrics.totalCostUsd.toFixed(2)}`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV7(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 useTemplateRuntime4 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo3, useState as useState7 } from "react";
+function useToolList(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime4();
+  const { agent } = handlers;
+  const [data, setData] = useState7(null);
+  const [loading, setLoading] = useState7(true);
+  const [error, setError] = useState7(null);
+  const [page, setPage] = useState7(1);
+  const fetchData = useCallback4(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 Button4,
+  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 jsxDEV8 } 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__ */ jsxDEV8(LoaderBlock2, {
+      label: "Loading tools..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV8(ErrorState2, {
+      title: "Failed to load tools",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV8(EmptyState2, {
+      title: "No tools registered",
+      description: "Create your first tool to extend agent capabilities.",
+      primaryAction: onCreateTool ? /* @__PURE__ */ jsxDEV8(Button4, {
+        onPress: onCreateTool,
+        children: "Create Tool"
+      }, undefined, false, undefined, this) : undefined
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV8(StatCardGroup2, {
+        children: [
+          /* @__PURE__ */ jsxDEV8(StatCard2, {
+            label: "Total Tools",
+            value: data.total
+          }, undefined, false, undefined, this),
+          categoryStats.slice(0, 3).map(({ category, count }) => /* @__PURE__ */ jsxDEV8(StatCard2, {
+            label: `${categoryIcons[category] ?? ""} ${category}`,
+            value: count
+          }, category, false, undefined, this))
+        ]
+      }, undefined, true, undefined, this),
+      Object.entries(groupedByCategory).map(([category, tools]) => /* @__PURE__ */ jsxDEV8("section", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV8("span", {
+                className: "text-2xl",
+                children: categoryIcons[category]
               }, 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
+              /* @__PURE__ */ jsxDEV8("h3", {
+                className: "font-semibold text-lg",
+                children: category
               }, 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..." : "\u25B6\uFE0F Execute"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
+              /* @__PURE__ */ jsxDEV8("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),
-          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", {
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+            children: tools.map((tool) => /* @__PURE__ */ jsxDEV8(EntityCard, {
+              cardTitle: tool.name,
+              cardSubtitle: `v${tool.version}`,
+              meta: /* @__PURE__ */ jsxDEV8("p", {
                 className: "text-muted-foreground text-sm",
-                children: "Archived agents cannot be executed but can be restored later."
+                children: tool.description
               }, undefined, false, undefined, this),
-              error && /* @__PURE__ */ jsxDEV4("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
-                children: error
+              chips: /* @__PURE__ */ jsxDEV8(StatusChip3, {
+                tone: getStatusTone2(tool.status),
+                label: tool.status
               }, 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)
+              footer: /* @__PURE__ */ jsxDEV8("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)
         ]
-      }, undefined, true, undefined, this)
+      }, category, true, undefined, this))
     ]
   }, undefined, true, undefined, this);
 }
 
 // src/ui/AgentDashboard.tsx
-import { useState as useState7, useMemo as useMemo3, useCallback as useCallback5 } from "react";
 import {
+  Button as Button5,
   StatCard as StatCard3,
-  StatCardGroup as StatCardGroup3,
-  Button as Button4
+  StatCardGroup as StatCardGroup3
 } from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import { useCallback as useCallback5, useMemo as useMemo4, useState as useState8 } from "react";
+import { jsxDEV as jsxDEV9 } 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 [activeTab, setActiveTab] = useState8("runs");
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState8(false);
+  const [selectedAgent, setSelectedAgent] = useState8(null);
+  const [isAgentActionsOpen, setIsAgentActionsOpen] = useState8(false);
+  const { data: runData, metrics, refetch: refetchRuns } = useRunList();
   const { refetch: refetchAgents } = useAgentList();
   const mutations = useAgentMutations({
     onSuccess: () => {
@@ -1172,7 +2054,7 @@ function AgentDashboard() {
     { id: "tools", label: "Tools", icon: "\uD83D\uDD27" },
     { id: "metrics", label: "Metrics", icon: "\uD83D\uDCCA" }
   ];
-  const summaryStats = useMemo3(() => {
+  const summaryStats = useMemo4(() => {
     if (!metrics) {
       return [
         { label: "Total Runs", value: "-", hint: "Loading..." },
@@ -1204,20 +2086,20 @@ function AgentDashboard() {
       }
     ];
   }, [metrics]);
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         className: "flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV5("h2", {
-            className: "text-2xl font-bold",
+          /* @__PURE__ */ jsxDEV9("h2", {
+            className: "font-bold text-2xl",
             children: "AI Agent Console"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(Button4, {
+          /* @__PURE__ */ jsxDEV9(Button5, {
             onPress: () => setIsCreateModalOpen(true),
             children: [
-              /* @__PURE__ */ jsxDEV5("span", {
+              /* @__PURE__ */ jsxDEV9("span", {
                 className: "mr-2",
                 children: "+"
               }, undefined, false, undefined, this),
@@ -1226,45 +2108,48 @@ function AgentDashboard() {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5(StatCardGroup3, {
-        children: summaryStats.map((stat, i) => /* @__PURE__ */ jsxDEV5(StatCard3, {
+      /* @__PURE__ */ jsxDEV9(StatCardGroup3, {
+        children: summaryStats.map((stat, i) => /* @__PURE__ */ jsxDEV9(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",
+      /* @__PURE__ */ jsxDEV9(AgentVisualizationOverview, {
+        runs: runData?.items ?? []
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV9("nav", {
+        className: "flex gap-1 rounded-lg bg-muted p-1",
         role: "tablist",
-        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV5("button", {
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV9("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"}`,
+          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 font-medium text-sm transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
           children: [
-            /* @__PURE__ */ jsxDEV5("span", {
+            /* @__PURE__ */ jsxDEV9("span", {
               children: tab.icon
             }, undefined, false, undefined, this),
             tab.label
           ]
         }, tab.id, true, undefined, this))
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         className: "min-h-[400px]",
         role: "tabpanel",
         children: [
-          activeTab === "runs" && /* @__PURE__ */ jsxDEV5(RunListView, {}, undefined, false, undefined, this),
-          activeTab === "agents" && /* @__PURE__ */ jsxDEV5(AgentListViewWithActions, {
+          activeTab === "runs" && /* @__PURE__ */ jsxDEV9(RunListView, {}, undefined, false, undefined, this),
+          activeTab === "agents" && /* @__PURE__ */ jsxDEV9(AgentListViewWithActions, {
             onAgentClick: handleAgentClick
           }, undefined, false, undefined, this),
-          activeTab === "tools" && /* @__PURE__ */ jsxDEV5(ToolRegistryView, {}, undefined, false, undefined, this),
-          activeTab === "metrics" && /* @__PURE__ */ jsxDEV5(MetricsView, {
+          activeTab === "tools" && /* @__PURE__ */ jsxDEV9(ToolRegistryView, {}, undefined, false, undefined, this),
+          activeTab === "metrics" && /* @__PURE__ */ jsxDEV9(MetricsView, {
             metrics
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5(CreateAgentModal, {
+      /* @__PURE__ */ jsxDEV9(CreateAgentModal, {
         isOpen: isCreateModalOpen,
         onClose: () => setIsCreateModalOpen(false),
         onSubmit: async (input) => {
@@ -1272,7 +2157,7 @@ function AgentDashboard() {
         },
         isLoading: mutations.createState.loading
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5(AgentActionsModal, {
+      /* @__PURE__ */ jsxDEV9(AgentActionsModal, {
         isOpen: isAgentActionsOpen,
         agent: selectedAgent,
         onClose: () => {
@@ -1301,22 +2186,22 @@ function AgentListViewWithActions({
 }) {
   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",
+    return /* @__PURE__ */ jsxDEV9("div", {
+      className: "flex h-64 items-center justify-center text-muted-foreground",
       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",
+    return /* @__PURE__ */ jsxDEV9("div", {
+      className: "flex h-64 flex-col items-center justify-center text-destructive",
       children: [
-        /* @__PURE__ */ jsxDEV5("p", {
+        /* @__PURE__ */ jsxDEV9("p", {
           children: [
             "Failed to load agents: ",
             error.message
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV5(Button4, {
+        /* @__PURE__ */ jsxDEV9(Button5, {
           variant: "outline",
           onPress: refetch,
           className: "mt-2",
@@ -1326,47 +2211,47 @@ function AgentListViewWithActions({
     }, 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",
+    return /* @__PURE__ */ jsxDEV9("div", {
+      className: "flex h-64 flex-col items-center justify-center text-muted-foreground",
       children: [
-        /* @__PURE__ */ jsxDEV5("p", {
-          className: "text-lg font-medium",
+        /* @__PURE__ */ jsxDEV9("p", {
+          className: "font-medium text-lg",
           children: "No agents yet"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5("p", {
+        /* @__PURE__ */ jsxDEV9("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", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     className: "space-y-4",
     children: [
-      stats && /* @__PURE__ */ jsxDEV5("div", {
+      stats && /* @__PURE__ */ jsxDEV9("div", {
         className: "flex gap-4 text-sm",
         children: [
-          /* @__PURE__ */ jsxDEV5("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             children: [
               "Total: ",
               stats.total
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV5("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             className: "text-green-600",
             children: [
               "Active: ",
               stats.active
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV5("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             className: "text-yellow-600",
             children: [
               "Paused: ",
               stats.paused
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV5("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             className: "text-blue-600",
             children: [
               "Draft: ",
@@ -1375,9 +2260,9 @@ function AgentListViewWithActions({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-        children: data.items.map((agent) => /* @__PURE__ */ jsxDEV5(AgentCard, {
+        children: data.items.map((agent) => /* @__PURE__ */ jsxDEV9(AgentCard, {
           agent,
           onClick: () => onAgentClick(agent)
         }, agent.id, false, undefined, this))
@@ -1392,9 +2277,9 @@ function AgentCard({ agent, onClick }) {
     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", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     onClick,
-    className: "border-border bg-card cursor-pointer rounded-xl border p-4 transition-all hover:shadow-md",
+    className: "cursor-pointer rounded-xl border border-border bg-card p-4 transition-all hover:shadow-md",
     role: "button",
     tabIndex: 0,
     onKeyDown: (e) => {
@@ -1402,17 +2287,17 @@ function AgentCard({ agent, onClick }) {
         onClick();
     },
     children: [
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         className: "flex items-start justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV9("div", {
             className: "min-w-0 flex-1",
             children: [
-              /* @__PURE__ */ jsxDEV5("h3", {
+              /* @__PURE__ */ jsxDEV9("h3", {
                 className: "truncate font-semibold",
                 children: agent.name
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("p", {
+              /* @__PURE__ */ jsxDEV9("p", {
                 className: "text-muted-foreground text-sm",
                 children: [
                   agent.modelProvider,
@@ -1422,24 +2307,24 @@ function AgentCard({ agent, onClick }) {
               }, 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]}`,
+          /* @__PURE__ */ jsxDEV9("span", {
+            className: `rounded-full px-2 py-0.5 font-medium text-xs ${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",
+      agent.description && /* @__PURE__ */ jsxDEV9("p", {
+        className: "mt-2 line-clamp-2 text-muted-foreground text-sm",
         children: agent.description
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         className: "mt-3 flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV5("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             className: "text-muted-foreground text-xs",
             children: agent.modelName
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(Button4, {
+          /* @__PURE__ */ jsxDEV9(Button5, {
             variant: "ghost",
             size: "sm",
             onPress: onClick,
@@ -1452,40 +2337,40 @@ function AgentCard({ agent, onClick }) {
 }
 function MetricsView({ metrics }) {
   if (!metrics) {
-    return /* @__PURE__ */ jsxDEV5("div", {
-      className: "text-muted-foreground flex h-64 items-center justify-center",
+    return /* @__PURE__ */ jsxDEV9("div", {
+      className: "flex h-64 items-center justify-center text-muted-foreground",
       children: "Loading metrics..."
     }, undefined, false, undefined, this);
   }
   const completedRuns = Math.round(metrics.totalRuns * metrics.successRate);
   const failedRuns = metrics.totalRuns - completedRuns;
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV5("h3", {
-        className: "text-lg font-semibold",
+      /* @__PURE__ */ jsxDEV9("h3", {
+        className: "font-semibold text-lg",
         children: "Usage Analytics"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         className: "grid gap-6 md:grid-cols-2",
         children: [
-          /* @__PURE__ */ jsxDEV5("div", {
-            className: "border-border bg-card rounded-xl border p-4",
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "rounded-xl border border-border bg-card p-4",
             children: [
-              /* @__PURE__ */ jsxDEV5("h4", {
+              /* @__PURE__ */ jsxDEV9("h4", {
                 className: "font-medium",
                 children: "Run Outcomes"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV9("div", {
                 className: "mt-4 space-y-3",
                 children: [
-                  /* @__PURE__ */ jsxDEV5(ProgressBar, {
+                  /* @__PURE__ */ jsxDEV9(ProgressBar, {
                     label: "Completed",
                     value: completedRuns,
                     total: metrics.totalRuns,
                     color: "bg-green-500"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5(ProgressBar, {
+                  /* @__PURE__ */ jsxDEV9(ProgressBar, {
                     label: "Failed",
                     value: failedRuns,
                     total: metrics.totalRuns,
@@ -1495,24 +2380,24 @@ function MetricsView({ metrics }) {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV5("div", {
-            className: "border-border bg-card rounded-xl border p-4",
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "rounded-xl border border-border bg-card p-4",
             children: [
-              /* @__PURE__ */ jsxDEV5("h4", {
+              /* @__PURE__ */ jsxDEV9("h4", {
                 className: "font-medium",
                 children: "Performance"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("dl", {
+              /* @__PURE__ */ jsxDEV9("dl", {
                 className: "mt-4 grid grid-cols-2 gap-4",
                 children: [
-                  /* @__PURE__ */ jsxDEV5("div", {
+                  /* @__PURE__ */ jsxDEV9("div", {
                     children: [
-                      /* @__PURE__ */ jsxDEV5("dt", {
+                      /* @__PURE__ */ jsxDEV9("dt", {
                         className: "text-muted-foreground text-sm",
                         children: "Avg Duration"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("dd", {
-                        className: "text-xl font-semibold",
+                      /* @__PURE__ */ jsxDEV9("dd", {
+                        className: "font-semibold text-xl",
                         children: [
                           (metrics.averageDurationMs / 1000).toFixed(1),
                           "s"
@@ -1520,14 +2405,14 @@ function MetricsView({ metrics }) {
                       }, undefined, true, undefined, this)
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("div", {
+                  /* @__PURE__ */ jsxDEV9("div", {
                     children: [
-                      /* @__PURE__ */ jsxDEV5("dt", {
+                      /* @__PURE__ */ jsxDEV9("dt", {
                         className: "text-muted-foreground text-sm",
                         children: "Success Rate"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("dd", {
-                        className: "text-xl font-semibold",
+                      /* @__PURE__ */ jsxDEV9("dd", {
+                        className: "font-semibold text-xl",
                         children: [
                           (metrics.successRate * 100).toFixed(0),
                           "%"
@@ -1541,36 +2426,36 @@ function MetricsView({ metrics }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
-        className: "border-border bg-card rounded-xl border p-4",
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "rounded-xl border border-border bg-card p-4",
         children: [
-          /* @__PURE__ */ jsxDEV5("h4", {
+          /* @__PURE__ */ jsxDEV9("h4", {
             className: "font-medium",
             children: "Key Metrics"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("dl", {
+          /* @__PURE__ */ jsxDEV9("dl", {
             className: "mt-4 grid gap-4 sm:grid-cols-3",
             children: [
-              /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV9("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV5("dt", {
+                  /* @__PURE__ */ jsxDEV9("dt", {
                     className: "text-muted-foreground text-sm",
                     children: "Total Runs"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("dd", {
-                    className: "text-2xl font-semibold",
+                  /* @__PURE__ */ jsxDEV9("dd", {
+                    className: "font-semibold text-2xl",
                     children: metrics.totalRuns.toLocaleString()
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV9("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV5("dt", {
+                  /* @__PURE__ */ jsxDEV9("dt", {
                     className: "text-muted-foreground text-sm",
                     children: "Total Tokens"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("dd", {
-                    className: "text-2xl font-semibold",
+                  /* @__PURE__ */ jsxDEV9("dd", {
+                    className: "font-semibold text-2xl",
                     children: [
                       (metrics.totalTokens / 1000).toFixed(0),
                       "K"
@@ -1578,14 +2463,14 @@ function MetricsView({ metrics }) {
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV9("div", {
                 children: [
-                  /* @__PURE__ */ jsxDEV5("dt", {
+                  /* @__PURE__ */ jsxDEV9("dt", {
                     className: "text-muted-foreground text-sm",
                     children: "Cost per Run"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("dd", {
-                    className: "text-2xl font-semibold",
+                  /* @__PURE__ */ jsxDEV9("dd", {
+                    className: "font-semibold text-2xl",
                     children: [
                       "$",
                       metrics.totalRuns > 0 ? (metrics.totalCostUsd / metrics.totalRuns).toFixed(4) : "0"
@@ -1607,15 +2492,15 @@ function ProgressBar({
   color
 }) {
   const pct = total > 0 ? value / total * 100 : 0;
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     children: [
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV9("div", {
         className: "flex justify-between text-sm",
         children: [
-          /* @__PURE__ */ jsxDEV5("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             children: label
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             className: "text-muted-foreground",
             children: [
               value,
@@ -1626,9 +2511,9 @@ function ProgressBar({
           }, 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", {
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "mt-1 h-2 overflow-hidden rounded-full bg-muted",
+        children: /* @__PURE__ */ jsxDEV9("div", {
           className: `h-full ${color}`,
           style: { width: `${pct}%` }
         }, undefined, false, undefined, this)
@@ -1643,18 +2528,141 @@ function ProgressBar({
 // src/ui/AgentToolRegistry.tsx
 "use client";
 
+// src/ui/hooks/index.ts
+"use client";
+// src/ui/overlays/demo-overlays.ts
+var agentConsoleDemoOverlay = {
+  overlayId: "agent-console.demo-user",
+  version: "1.0.0",
+  description: "Simplifies agent console for demo users",
+  appliesTo: {
+    feature: "agent-console",
+    role: "demo"
+  },
+  modifications: [
+    {
+      type: "hideField",
+      field: "modelConfig",
+      reason: "Advanced config not relevant for demo"
+    },
+    {
+      type: "hideField",
+      field: "webhookConfig",
+      reason: "Integration not available in demo"
+    },
+    {
+      type: "renameLabel",
+      field: "systemPrompt",
+      newLabel: "Agent Instructions"
+    },
+    {
+      type: "addBadge",
+      position: "header",
+      label: "Demo Mode",
+      variant: "warning"
+    }
+  ]
+};
+var agentConsoleReadOnlyOverlay = {
+  overlayId: "agent-console.read-only",
+  version: "1.0.0",
+  description: "Read-only view for non-admin users",
+  appliesTo: {
+    feature: "agent-console",
+    role: "viewer"
+  },
+  modifications: [
+    {
+      type: "hideField",
+      field: "deleteButton",
+      reason: "No delete permission"
+    },
+    { type: "hideField", field: "editButton", reason: "No edit permission" },
+    {
+      type: "hideField",
+      field: "createButton",
+      reason: "No create permission"
+    }
+  ]
+};
+var agentConsoleOverlays = [
+  agentConsoleDemoOverlay,
+  agentConsoleReadOnlyOverlay
+];
+// src/ui/renderers/agent-list.markdown.ts
+import {
+  AGENT_CONSOLE_DEMO_ORGANIZATION_ID as AGENT_CONSOLE_DEMO_ORGANIZATION_ID2,
+  AGENT_CONSOLE_DEMO_PROJECT_ID as AGENT_CONSOLE_DEMO_PROJECT_ID2,
+  createAgentConsoleDemoHandlers
+} from "@contractspec/example.agent-console/shared";
+var agentListMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, ctx) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "AgentListView") {
+      throw new Error("agentListMarkdownRenderer: not AgentListView");
+    }
+    const data = Array.isArray(ctx?.data) ? {
+      items: ctx.data,
+      total: ctx.data.length,
+      hasMore: false
+    } : await createAgentConsoleDemoHandlers({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID2
+    }).listAgents({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID2,
+      organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID2,
+      limit: 50,
+      offset: 0
+    });
+    const lines = [
+      `# ${desc.meta.description ?? "Agent List"}`,
+      "",
+      `> ${desc.meta.key} v${desc.meta.version}`,
+      "",
+      `**Total Agents:** ${data.total}`,
+      "",
+      "## Agents",
+      ""
+    ];
+    const byStatus = {};
+    for (const agent of data.items) {
+      const status = agent.status;
+      if (byStatus[status]) {
+        byStatus[status].push(agent);
+      } else {
+        byStatus[status] = [agent];
+      }
+    }
+    for (const [status, agents] of Object.entries(byStatus)) {
+      lines.push(`### ${status} (${agents.length})`);
+      lines.push("");
+      for (const agent of agents) {
+        lines.push(`- **${agent.name}** (${agent.modelProvider}/${agent.modelName})`);
+        if (agent.description) {
+          lines.push(`  > ${agent.description}`);
+        }
+      }
+      lines.push("");
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+
 // src/ui/views/AgentListView.tsx
 import {
-  Button as Button5,
-  StatCard as StatCard4,
-  StatCardGroup as StatCardGroup4,
+  Button as Button6,
+  EmptyState as EmptyState3,
   EntityCard as EntityCard2,
-  StatusChip as StatusChip3,
-  LoaderBlock as LoaderBlock3,
   ErrorState as ErrorState3,
-  EmptyState as EmptyState3
+  LoaderBlock as LoaderBlock3,
+  StatCard as StatCard4,
+  StatCardGroup as StatCardGroup4,
+  StatusChip as StatusChip4
 } from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
 "use client";
 function getStatusTone3(status) {
   switch (status) {
@@ -1672,12 +2680,12 @@ function getStatusTone3(status) {
 function AgentListView() {
   const { data, loading, error, stats, refetch } = useAgentList();
   if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV6(LoaderBlock3, {
+    return /* @__PURE__ */ jsxDEV10(LoaderBlock3, {
       label: "Loading agents..."
     }, undefined, false, undefined, this);
   }
   if (error) {
-    return /* @__PURE__ */ jsxDEV6(ErrorState3, {
+    return /* @__PURE__ */ jsxDEV10(ErrorState3, {
       title: "Failed to load agents",
       description: error.message,
       onRetry: refetch,
@@ -1685,61 +2693,61 @@ function AgentListView() {
     }, undefined, false, undefined, this);
   }
   if (!data?.items.length) {
-    return /* @__PURE__ */ jsxDEV6(EmptyState3, {
+    return /* @__PURE__ */ jsxDEV10(EmptyState3, {
       title: "No agents yet",
       description: "Create your first AI agent to get started."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV6("div", {
+  return /* @__PURE__ */ jsxDEV10("div", {
     className: "space-y-6",
     children: [
-      stats && /* @__PURE__ */ jsxDEV6(StatCardGroup4, {
+      stats && /* @__PURE__ */ jsxDEV10(StatCardGroup4, {
         children: [
-          /* @__PURE__ */ jsxDEV6(StatCard4, {
+          /* @__PURE__ */ jsxDEV10(StatCard4, {
             label: "Total Agents",
             value: stats.total
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(StatCard4, {
+          /* @__PURE__ */ jsxDEV10(StatCard4, {
             label: "Active",
             value: stats.active
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(StatCard4, {
+          /* @__PURE__ */ jsxDEV10(StatCard4, {
             label: "Paused",
             value: stats.paused
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(StatCard4, {
+          /* @__PURE__ */ jsxDEV10(StatCard4, {
             label: "Draft",
             value: stats.draft
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV6("div", {
+      /* @__PURE__ */ jsxDEV10("div", {
         className: "flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV6("h3", {
-            className: "text-lg font-semibold",
+          /* @__PURE__ */ jsxDEV10("h3", {
+            className: "font-semibold text-lg",
             children: "Agents"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(Button5, {
+          /* @__PURE__ */ jsxDEV10(Button6, {
             onPress: () => alert("Create Agent clicked!"),
             children: "Create Agent"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV6("div", {
+      /* @__PURE__ */ jsxDEV10("div", {
         className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-        children: data.items.map((agent) => /* @__PURE__ */ jsxDEV6(EntityCard2, {
+        children: data.items.map((agent) => /* @__PURE__ */ jsxDEV10(EntityCard2, {
           cardTitle: agent.name,
           cardSubtitle: agent.modelName,
-          meta: /* @__PURE__ */ jsxDEV6("p", {
+          meta: /* @__PURE__ */ jsxDEV10("p", {
             className: "text-muted-foreground text-sm",
             children: agent.description
           }, undefined, false, undefined, this),
-          chips: /* @__PURE__ */ jsxDEV6(StatusChip3, {
+          chips: /* @__PURE__ */ jsxDEV10(StatusChip4, {
             tone: getStatusTone3(agent.status),
             label: agent.status
           }, undefined, false, undefined, this),
-          footer: /* @__PURE__ */ jsxDEV6("span", {
+          footer: /* @__PURE__ */ jsxDEV10("span", {
             className: "text-muted-foreground text-xs",
             children: [
               "Created ",
@@ -1752,11 +2760,9 @@ function AgentListView() {
     ]
   }, undefined, true, undefined, this);
 }
-// src/ui/hooks/index.ts
-"use client";
 
 // src/ui/renderers/agent-list.renderer.tsx
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
 var agentListReactRenderer = {
   target: "react",
   render: async (desc) => {
@@ -1766,54 +2772,109 @@ var agentListReactRenderer = {
     if (desc.source.componentKey !== "AgentListView") {
       throw new Error(`AgentListRenderer: unknown component ${desc.source.componentKey}`);
     }
-    return /* @__PURE__ */ jsxDEV7(AgentListView, {}, undefined, false, undefined, this);
+    return /* @__PURE__ */ jsxDEV11(AgentListView, {}, undefined, false, undefined, this);
   }
 };
 
-// src/ui/renderers/agent-list.markdown.ts
+// src/ui/renderers/dashboard.markdown.ts
 import {
-  mockListAgentsHandler
-} from "@contractspec/example.agent-console/handlers";
-var agentListMarkdownRenderer = {
+  getFallbackAgentConsoleDashboardData
+} from "@contractspec/example.agent-console/shared";
+function formatDuration2(ms) {
+  if (ms < 1000)
+    return `${ms}ms`;
+  if (ms < 60000)
+    return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+var agentDashboardMarkdownRenderer = {
   target: "markdown",
-  render: async (desc) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "AgentListView") {
-      throw new Error("agentListMarkdownRenderer: not AgentListView");
+  render: async (desc, ctx) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "AgentConsoleDashboard") {
+      throw new Error("agentDashboardMarkdownRenderer: not AgentConsoleDashboard");
     }
-    const data = await mockListAgentsHandler({
-      organizationId: "demo-org",
-      limit: 50,
-      offset: 0
-    });
+    const data = ctx?.data ?? await getFallbackAgentConsoleDashboardData();
+    const activeAgents = data.agents.filter((a) => a.status === "ACTIVE").length;
+    const completedRuns = data.runs.filter((r) => r.status === "COMPLETED").length;
+    const failedRuns = data.runs.filter((r) => r.status === "FAILED").length;
+    const totalTokens = data.runs.reduce((sum, r) => sum + (r.totalTokens ?? 0), 0);
+    const totalCost = data.runs.reduce((sum, r) => sum + (r.estimatedCostUsd ?? 0), 0);
+    const activeTools = data.tools.filter((t) => t.status === "ACTIVE").length;
+    const visualizationItems = createAgentVisualizationItems(data.runs);
     const lines = [
-      `# ${desc.meta.description ?? "Agent List"}`,
+      "# Agent Console Dashboard",
       "",
-      `> ${desc.meta.key} v${desc.meta.version}`,
+      "> AI agent operations overview",
       "",
-      `**Total Agents:** ${data.total}`,
+      "## Summary",
+      "",
+      "| Metric | Value |",
+      "|--------|-------|",
+      `| Total Agents | ${data.summary.totalAgents} |`,
+      `| Active Agents | ${activeAgents} |`,
+      `| Total Runs | ${data.summary.totalRuns} |`,
+      `| Completed Runs | ${completedRuns} |`,
+      `| Failed Runs | ${failedRuns} |`,
+      `| Total Tokens | ${totalTokens.toLocaleString()} |`,
+      `| Total Cost | $${totalCost.toFixed(4)} |`,
+      `| Total Tools | ${data.summary.totalTools} |`,
+      `| Active Tools | ${activeTools} |`,
       "",
       "## Agents",
       ""
     ];
-    const byStatus = {};
-    for (const agent of data.items) {
-      const status = agent.status;
-      if (byStatus[status]) {
-        byStatus[status].push(agent);
-      } else {
-        byStatus[status] = [agent];
+    if (data.agents.length === 0) {
+      lines.push("_No agents configured._");
+    } else {
+      lines.push("| Agent | Model | Status | Description |");
+      lines.push("|-------|-------|--------|-------------|");
+      for (const agent of data.agents.slice(0, 5)) {
+        lines.push(`| ${agent.name} | ${agent.modelProvider}/${agent.modelName} | ${agent.status} | ${agent.description ?? "-"} |`);
+      }
+      if (data.agents.length > 5) {
+        lines.push(`| ... | ... | ... | _${data.summary.totalAgents - 5} more_ |`);
       }
     }
-    for (const [status, agents] of Object.entries(byStatus)) {
-      lines.push(`### ${status} (${agents.length})`);
-      lines.push("");
-      for (const agent of agents) {
-        lines.push(`- **${agent.name}** (${agent.modelProvider}/${agent.modelName})`);
-        if (agent.description) {
-          lines.push(`  > ${agent.description}`);
-        }
+    lines.push("");
+    lines.push("## Recent Runs");
+    lines.push("");
+    if (data.runs.length === 0) {
+      lines.push("_No runs yet._");
+    } else {
+      lines.push("| Run ID | Agent | Status | Duration | Tokens | Cost |");
+      lines.push("|--------|-------|--------|----------|--------|------|");
+      for (const run of data.runs.slice(0, 5)) {
+        lines.push(`| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration2(run.durationMs) : "-"} | ${run.totalTokens ?? 0} | $${(run.estimatedCostUsd ?? 0).toFixed(4)} |`);
+      }
+      if (data.runs.length > 5) {
+        lines.push(`| ... | ... | ... | ... | ... | _${data.summary.totalRuns - 5} more_ |`);
+      }
+    }
+    lines.push("");
+    lines.push("## Visualization Overview");
+    lines.push("");
+    for (const item of visualizationItems) {
+      lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
+    }
+    lines.push("");
+    lines.push("## Tools");
+    lines.push("");
+    const toolsByCategory = {};
+    for (const tool of data.tools) {
+      const cat = tool.category;
+      if (!toolsByCategory[cat])
+        toolsByCategory[cat] = [];
+      toolsByCategory[cat].push(tool);
+    }
+    if (Object.keys(toolsByCategory).length === 0) {
+      lines.push("_No tools registered._");
+    } else {
+      lines.push("| Category | Tools | Active |");
+      lines.push("|----------|-------|--------|");
+      for (const [category, tools] of Object.entries(toolsByCategory).sort()) {
+        const active = tools.filter((t) => t.status === "ACTIVE").length;
+        lines.push(`| ${category} | ${tools.length} | ${active} |`);
       }
-      lines.push("");
     }
     return {
       mimeType: "text/markdown",
@@ -1824,8 +2885,11 @@ var agentListMarkdownRenderer = {
 };
 
 // src/ui/renderers/run-list.markdown.ts
-import { mockListRunsHandler } from "@contractspec/example.agent-console/handlers";
-function formatDuration2(ms) {
+import {
+  AGENT_CONSOLE_DEMO_PROJECT_ID as AGENT_CONSOLE_DEMO_PROJECT_ID3,
+  createAgentConsoleDemoHandlers as createAgentConsoleDemoHandlers2
+} from "@contractspec/example.agent-console/shared";
+function formatDuration3(ms) {
   if (ms < 1000)
     return `${ms}ms`;
   if (ms < 60000)
@@ -1834,12 +2898,14 @@ function formatDuration2(ms) {
 }
 var runListMarkdownRenderer = {
   target: "markdown",
-  render: async (desc) => {
+  render: async (desc, ctx) => {
     if (desc.source.type !== "component" || desc.source.componentKey !== "RunListView") {
       throw new Error("runListMarkdownRenderer: not RunListView");
     }
-    const data = await mockListRunsHandler({
-      organizationId: "demo-org",
+    const data = Array.isArray(ctx?.data) ? { items: ctx.data, total: ctx.data.length, hasMore: false } : await createAgentConsoleDemoHandlers2({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID3
+    }).listRuns({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID3,
       limit: 20,
       offset: 0
     });
@@ -1856,7 +2922,7 @@ var runListMarkdownRenderer = {
       "| --- | --- | --- | --- | --- | --- |"
     ];
     for (const run of data.items.slice(0, 10)) {
-      lines.push(`| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration2(run.durationMs) : "-"} | ${run.totalTokens} | $${run.estimatedCostUsd?.toFixed(4) ?? "-"} |`);
+      lines.push(`| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration3(run.durationMs) : "-"} | ${run.totalTokens} | $${run.estimatedCostUsd?.toFixed(4) ?? "-"} |`);
     }
     return {
       mimeType: "text/markdown",
@@ -1867,15 +2933,26 @@ var runListMarkdownRenderer = {
 };
 
 // src/ui/renderers/tool-registry.markdown.ts
-import { mockListToolsHandler } from "@contractspec/example.agent-console/handlers";
+import {
+  AGENT_CONSOLE_DEMO_ORGANIZATION_ID as AGENT_CONSOLE_DEMO_ORGANIZATION_ID3,
+  AGENT_CONSOLE_DEMO_PROJECT_ID as AGENT_CONSOLE_DEMO_PROJECT_ID4,
+  createAgentConsoleDemoHandlers as createAgentConsoleDemoHandlers3
+} from "@contractspec/example.agent-console/shared";
 var toolRegistryMarkdownRenderer = {
   target: "markdown",
-  render: async (desc) => {
+  render: async (desc, ctx) => {
     if (desc.source.type !== "component" || desc.source.componentKey !== "ToolRegistryView") {
       throw new Error("toolRegistryMarkdownRenderer: not ToolRegistryView");
     }
-    const data = await mockListToolsHandler({
-      organizationId: "demo-org",
+    const data = Array.isArray(ctx?.data) ? {
+      items: ctx.data,
+      total: ctx.data.length,
+      hasMore: false
+    } : await createAgentConsoleDemoHandlers3({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID4
+    }).listTools({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID4,
+      organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID3,
       limit: 50,
       offset: 0
     });
@@ -1916,180 +2993,6 @@ var toolRegistryMarkdownRenderer = {
     };
   }
 };
-
-// src/ui/renderers/dashboard.markdown.ts
-import {
-  mockListAgentsHandler as mockListAgentsHandler2,
-  mockListRunsHandler as mockListRunsHandler2,
-  mockListToolsHandler as mockListToolsHandler2
-} from "@contractspec/example.agent-console/handlers";
-function formatDuration3(ms) {
-  if (ms < 1000)
-    return `${ms}ms`;
-  if (ms < 60000)
-    return `${(ms / 1000).toFixed(1)}s`;
-  return `${(ms / 60000).toFixed(1)}m`;
-}
-var agentDashboardMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "AgentConsoleDashboard") {
-      throw new Error("agentDashboardMarkdownRenderer: not AgentConsoleDashboard");
-    }
-    const [agentsData, runsData, toolsData] = await Promise.all([
-      mockListAgentsHandler2({
-        organizationId: "demo-org",
-        limit: 100
-      }),
-      mockListRunsHandler2({
-        limit: 100
-      }),
-      mockListToolsHandler2({
-        organizationId: "demo-org",
-        limit: 100
-      })
-    ]);
-    const activeAgents = agentsData.items.filter((a) => a.status === "ACTIVE").length;
-    const completedRuns = runsData.items.filter((r) => r.status === "COMPLETED").length;
-    const failedRuns = runsData.items.filter((r) => r.status === "FAILED").length;
-    const totalTokens = runsData.items.reduce((sum, r) => sum + (r.totalTokens ?? 0), 0);
-    const totalCost = runsData.items.reduce((sum, r) => sum + (r.estimatedCostUsd ?? 0), 0);
-    const activeTools = toolsData.items.filter((t) => t.status === "ACTIVE").length;
-    const lines = [
-      "# Agent Console Dashboard",
-      "",
-      "> AI agent operations overview",
-      "",
-      "## Summary",
-      "",
-      "| Metric | Value |",
-      "|--------|-------|",
-      `| Total Agents | ${agentsData.total} |`,
-      `| Active Agents | ${activeAgents} |`,
-      `| Total Runs | ${runsData.total} |`,
-      `| Completed Runs | ${completedRuns} |`,
-      `| Failed Runs | ${failedRuns} |`,
-      `| Total Tokens | ${totalTokens.toLocaleString()} |`,
-      `| Total Cost | $${totalCost.toFixed(4)} |`,
-      `| Total Tools | ${toolsData.total} |`,
-      `| Active Tools | ${activeTools} |`,
-      "",
-      "## Agents",
-      ""
-    ];
-    if (agentsData.items.length === 0) {
-      lines.push("_No agents configured._");
-    } else {
-      lines.push("| Agent | Model | Status | Description |");
-      lines.push("|-------|-------|--------|-------------|");
-      for (const agent of agentsData.items.slice(0, 5)) {
-        lines.push(`| ${agent.name} | ${agent.modelProvider}/${agent.modelName} | ${agent.status} | ${agent.description ?? "-"} |`);
-      }
-      if (agentsData.items.length > 5) {
-        lines.push(`| ... | ... | ... | _${agentsData.total - 5} more_ |`);
-      }
-    }
-    lines.push("");
-    lines.push("## Recent Runs");
-    lines.push("");
-    if (runsData.items.length === 0) {
-      lines.push("_No runs yet._");
-    } else {
-      lines.push("| Run ID | Agent | Status | Duration | Tokens | Cost |");
-      lines.push("|--------|-------|--------|----------|--------|------|");
-      for (const run of runsData.items.slice(0, 5)) {
-        lines.push(`| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration3(run.durationMs) : "-"} | ${run.totalTokens ?? 0} | $${(run.estimatedCostUsd ?? 0).toFixed(4)} |`);
-      }
-      if (runsData.items.length > 5) {
-        lines.push(`| ... | ... | ... | ... | ... | _${runsData.total - 5} more_ |`);
-      }
-    }
-    lines.push("");
-    lines.push("## Tools");
-    lines.push("");
-    const toolsByCategory = {};
-    for (const tool of toolsData.items) {
-      const cat = tool.category;
-      if (!toolsByCategory[cat])
-        toolsByCategory[cat] = [];
-      toolsByCategory[cat].push(tool);
-    }
-    if (Object.keys(toolsByCategory).length === 0) {
-      lines.push("_No tools registered._");
-    } else {
-      lines.push("| Category | Tools | Active |");
-      lines.push("|----------|-------|--------|");
-      for (const [category, tools] of Object.entries(toolsByCategory).sort()) {
-        const active = tools.filter((t) => t.status === "ACTIVE").length;
-        lines.push(`| ${category} | ${tools.length} | ${active} |`);
-      }
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-// src/ui/overlays/demo-overlays.ts
-var agentConsoleDemoOverlay = {
-  overlayId: "agent-console.demo-user",
-  version: "1.0.0",
-  description: "Simplifies agent console for demo users",
-  appliesTo: {
-    feature: "agent-console",
-    role: "demo"
-  },
-  modifications: [
-    {
-      type: "hideField",
-      field: "modelConfig",
-      reason: "Advanced config not relevant for demo"
-    },
-    {
-      type: "hideField",
-      field: "webhookConfig",
-      reason: "Integration not available in demo"
-    },
-    {
-      type: "renameLabel",
-      field: "systemPrompt",
-      newLabel: "Agent Instructions"
-    },
-    {
-      type: "addBadge",
-      position: "header",
-      label: "Demo Mode",
-      variant: "warning"
-    }
-  ]
-};
-var agentConsoleReadOnlyOverlay = {
-  overlayId: "agent-console.read-only",
-  version: "1.0.0",
-  description: "Read-only view for non-admin users",
-  appliesTo: {
-    feature: "agent-console",
-    role: "viewer"
-  },
-  modifications: [
-    {
-      type: "hideField",
-      field: "deleteButton",
-      reason: "No delete permission"
-    },
-    { type: "hideField", field: "editButton", reason: "No edit permission" },
-    {
-      type: "hideField",
-      field: "createButton",
-      reason: "No create permission"
-    }
-  ]
-};
-var agentConsoleOverlays = [
-  agentConsoleDemoOverlay,
-  agentConsoleReadOnlyOverlay
-];
 export {
   useToolList,
   useRunList,