@contractspec/example.agent-console 3.7.6 → 3.8.2

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

@@ -1,15 +1,24 @@
 // src/ui/renderers/agent-list.markdown.ts
 import {
-  mockListAgentsHandler
-} from "@contractspec/example.agent-console/handlers";
+  AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+  AGENT_CONSOLE_DEMO_PROJECT_ID,
+  createAgentConsoleDemoHandlers
+} from "@contractspec/example.agent-console/shared";
 var agentListMarkdownRenderer = {
   target: "markdown",
-  render: async (desc) => {
+  render: async (desc, ctx) => {
     if (desc.source.type !== "component" || desc.source.componentKey !== "AgentListView") {
       throw new Error("agentListMarkdownRenderer: not AgentListView");
     }
-    const data = await mockListAgentsHandler({
-      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
+    }).listAgents({
+      projectId: AGENT_CONSOLE_DEMO_PROJECT_ID,
+      organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
       limit: 50,
       offset: 0
     });

package/dist/browser/ui/renderers/agent-list.renderer.js

@@ -1,6 +1,6 @@
 // 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;
@@ -54,13 +54,13 @@ function useAgentList(options = {}) {
 // 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 +125,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, {

package/dist/browser/ui/renderers/dashboard.markdown.js

@@ -1,9 +1,185 @@
+// 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/renderers/dashboard.markdown.ts
 import {
-  mockListAgentsHandler,
-  mockListRunsHandler,
-  mockListToolsHandler
-} from "@contractspec/example.agent-console/handlers";
+  getFallbackAgentConsoleDashboardData
+} from "@contractspec/example.agent-console/shared";
 function formatDuration(ms) {
   if (ms < 1000)
     return `${ms}ms`;
@@ -13,29 +189,18 @@ function formatDuration(ms) {
 }
 var agentDashboardMarkdownRenderer = {
   target: "markdown",
-  render: async (desc) => {
+  render: async (desc, ctx) => {
     if (desc.source.type !== "component" || desc.source.componentKey !== "AgentConsoleDashboard") {
       throw new Error("agentDashboardMarkdownRenderer: not AgentConsoleDashboard");
     }
-    const [agentsData, runsData, toolsData] = await Promise.all([
-      mockListAgentsHandler({
-        organizationId: "demo-org",
-        limit: 100
-      }),
-      mockListRunsHandler({
-        limit: 100
-      }),
-      mockListToolsHandler({
-        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 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 = [
       "# Agent Console Dashboard",
       "",
@@ -45,51 +210,57 @@ var agentDashboardMarkdownRenderer = {
       "",
       "| Metric | Value |",
       "|--------|-------|",
-      `| Total Agents | ${agentsData.total} |`,
+      `| Total Agents | ${data.summary.totalAgents} |`,
       `| Active Agents | ${activeAgents} |`,
-      `| Total Runs | ${runsData.total} |`,
+      `| Total Runs | ${data.summary.totalRuns} |`,
       `| Completed Runs | ${completedRuns} |`,
       `| Failed Runs | ${failedRuns} |`,
       `| Total Tokens | ${totalTokens.toLocaleString()} |`,
       `| Total Cost | $${totalCost.toFixed(4)} |`,
-      `| Total Tools | ${toolsData.total} |`,
+      `| Total Tools | ${data.summary.totalTools} |`,
       `| Active Tools | ${activeTools} |`,
       "",
       "## Agents",
       ""
     ];
-    if (agentsData.items.length === 0) {
+    if (data.agents.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)) {
+      for (const agent of data.agents.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_ |`);
+      if (data.agents.length > 5) {
+        lines.push(`| ... | ... | ... | _${data.summary.totalAgents - 5} more_ |`);
       }
     }
     lines.push("");
     lines.push("## Recent Runs");
     lines.push("");
-    if (runsData.items.length === 0) {
+    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 runsData.items.slice(0, 5)) {
+      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 (runsData.items.length > 5) {
-        lines.push(`| ... | ... | ... | ... | ... | _${runsData.total - 5} more_ |`);
+      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 toolsData.items) {
+    for (const tool of data.tools) {
       const cat = tool.category;
       if (!toolsByCategory[cat])
         toolsByCategory[cat] = [];