@contractspec/example.agent-console 3.7.6 → 3.8.2

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

@@ -1,6 +1,184 @@
+// 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/ui/hooks/useAgentList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
 function useAgentList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { agent } = handlers;
@@ -51,16 +229,78 @@ function useAgentList(options = {}) {
   };
 }
 
+// src/ui/renderers/agent-list.markdown.ts
+import {
+  AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+  AGENT_CONSOLE_DEMO_PROJECT_ID,
+  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_ID
+    }).listAgents({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+      organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+      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,
-  StatCard,
-  StatCardGroup,
+  EmptyState,
   EntityCard,
-  StatusChip,
-  LoaderBlock,
   ErrorState,
-  EmptyState
+  LoaderBlock,
+  StatCard,
+  StatCardGroup,
+  StatusChip
 } from "@contractspec/lib.design-system";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
@@ -125,7 +365,7 @@ function AgentListView() {
         className: "flex items-center justify-between",
         children: [
           /* @__PURE__ */ jsxDEV("h3", {
-            className: "text-lg font-semibold",
+            className: "font-semibold text-lg",
             children: "Agents"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV(Button, {
@@ -176,50 +416,105 @@ var agentListReactRenderer = {
   }
 };
 
-// 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 formatDuration(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 ? formatDuration(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",
@@ -230,8 +525,11 @@ var agentListMarkdownRenderer = {
 };
 
 // src/ui/renderers/run-list.markdown.ts
-import { mockListRunsHandler } from "@contractspec/example.agent-console/handlers";
-function formatDuration(ms) {
+import {
+  AGENT_CONSOLE_DEMO_PROJECT_ID as AGENT_CONSOLE_DEMO_PROJECT_ID2,
+  createAgentConsoleDemoHandlers as createAgentConsoleDemoHandlers2
+} from "@contractspec/example.agent-console/shared";
+function formatDuration2(ms) {
   if (ms < 1000)
     return `${ms}ms`;
   if (ms < 60000)
@@ -240,12 +538,14 @@ function formatDuration(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_ID2
+    }).listRuns({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID2,
       limit: 20,
       offset: 0
     });
@@ -262,7 +562,7 @@ var runListMarkdownRenderer = {
       "| --- | --- | --- | --- | --- | --- |"
     ];
     for (const run of data.items.slice(0, 10)) {
-      lines.push(`| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration(run.durationMs) : "-"} | ${run.totalTokens} | $${run.estimatedCostUsd?.toFixed(4) ?? "-"} |`);
+      lines.push(`| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration2(run.durationMs) : "-"} | ${run.totalTokens} | $${run.estimatedCostUsd?.toFixed(4) ?? "-"} |`);
     }
     return {
       mimeType: "text/markdown",
@@ -273,15 +573,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_ID2,
+  AGENT_CONSOLE_DEMO_PROJECT_ID as AGENT_CONSOLE_DEMO_PROJECT_ID3,
+  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_ID3
+    }).listTools({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID3,
+      organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID2,
       limit: 50,
       offset: 0
     });
@@ -322,121 +633,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 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 !== "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 ? formatDuration2(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(`
-`)
-    };
-  }
-};
 export {
   toolRegistryMarkdownRenderer,
   runListMarkdownRenderer,

package/dist/browser/ui/renderers/run-list.markdown.js

@@ -1,5 +1,8 @@
 // src/ui/renderers/run-list.markdown.ts
-import { mockListRunsHandler } from "@contractspec/example.agent-console/handlers";
+import {
+  AGENT_CONSOLE_DEMO_PROJECT_ID,
+  createAgentConsoleDemoHandlers
+} from "@contractspec/example.agent-console/shared";
 function formatDuration(ms) {
   if (ms < 1000)
     return `${ms}ms`;
@@ -9,12 +12,14 @@ function formatDuration(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 createAgentConsoleDemoHandlers({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID
+    }).listRuns({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
       limit: 20,
       offset: 0
     });

package/dist/browser/ui/renderers/tool-registry.markdown.js

@@ -1,13 +1,24 @@
 // src/ui/renderers/tool-registry.markdown.ts
-import { mockListToolsHandler } from "@contractspec/example.agent-console/handlers";
+import {
+  AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+  AGENT_CONSOLE_DEMO_PROJECT_ID,
+  createAgentConsoleDemoHandlers
+} 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 createAgentConsoleDemoHandlers({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID
+    }).listTools({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+      organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
       limit: 50,
       offset: 0
     });