@contractspec/example.agent-console 3.7.7 → 3.8.4

package/dist/ui/renderers/index.js

@@ -1,4 +1,182 @@
 // @bun
+// 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 { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -54,16 +232,25 @@ function useAgentList(options = {}) {
 
 // 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
     });
@@ -232,10 +419,8 @@ var agentListReactRenderer = {
 
 // src/ui/renderers/dashboard.markdown.ts
 import {
-  mockListAgentsHandler as mockListAgentsHandler2,
-  mockListRunsHandler,
-  mockListToolsHandler
-} from "@contractspec/example.agent-console/handlers";
+  getFallbackAgentConsoleDashboardData
+} from "@contractspec/example.agent-console/shared";
 function formatDuration(ms) {
   if (ms < 1000)
     return `${ms}ms`;
@@ -245,29 +430,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([
-      mockListAgentsHandler2({
-        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",
       "",
@@ -277,51 +451,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] = [];
@@ -346,7 +526,10 @@ var agentDashboardMarkdownRenderer = {
 };
 
 // src/ui/renderers/run-list.markdown.ts
-import { mockListRunsHandler as mockListRunsHandler2 } from "@contractspec/example.agent-console/handlers";
+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`;
@@ -356,12 +539,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 mockListRunsHandler2({
-      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
     });
@@ -389,15 +574,26 @@ var runListMarkdownRenderer = {
 };
 
 // src/ui/renderers/tool-registry.markdown.ts
-import { mockListToolsHandler as mockListToolsHandler2 } 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 mockListToolsHandler2({
-      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
     });

package/dist/ui/renderers/run-list.markdown.d.ts

@@ -3,7 +3,7 @@
  *
  * Uses dynamic import for handlers to ensure correct build order.
  */
-import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import type { PresentationRenderer } from '@contractspec/lib.presentation-runtime-core/transform-engine';
 /**
  * Markdown renderer for agent-console.run.list presentation
  * Only handles RunListView component

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

@@ -1,6 +1,9 @@
 // @bun
 // 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`;
@@ -10,12 +13,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/ui/renderers/tool-registry.markdown.d.ts

@@ -3,9 +3,9 @@
  *
  * Uses dynamic import for handlers to ensure correct build order.
  */
-import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import type { PresentationRenderer } from '@contractspec/lib.presentation-runtime-core/transform-engine';
 /**
- * Markdown renderer for agent-console.tool.registry presentation
+ * Markdown renderer for agent-console.tool.list presentation
  * Only handles ToolRegistryView component
  */
 export declare const toolRegistryMarkdownRenderer: PresentationRenderer<{

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

@@ -1,14 +1,25 @@
 // @bun
 // 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
     });

package/dist/ui/views/RunDataTable.d.ts

@@ -0,0 +1,18 @@
+import type { ContractTableSort } from '@contractspec/lib.presentation-runtime-core';
+import type { Run } from '../hooks/useRunList';
+interface RunDataTableProps {
+    runs: Run[];
+    totalItems: number;
+    pageIndex: number;
+    pageSize: number;
+    sorting: ContractTableSort[];
+    loading?: boolean;
+    onSortingChange: (nextSorting: ContractTableSort[]) => void;
+    onPaginationChange: (nextPagination: {
+        pageIndex: number;
+        pageSize: number;
+    }) => void;
+    onRunClick?: (runId: string) => void;
+}
+export declare function RunDataTable({ runs, totalItems, pageIndex, pageSize, sorting, loading, onSortingChange, onPaginationChange, onRunClick, }: RunDataTableProps): import("react/jsx-runtime").JSX.Element;
+export {};