@contractspec/example.agent-console 3.7.7 → 3.8.2

package/dist/browser/ui/views/run-data-table.columns.js

@@ -0,0 +1,271 @@
+// src/ui/views/run-list.shared.tsx
+import { Button, 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 } 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__ */ jsxDEV(VStack, {
+    gap: "sm",
+    className: "py-2",
+    children: [
+      /* @__PURE__ */ jsxDEV(HStack, {
+        justify: "between",
+        className: "flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxDEV(StatusChip, {
+            tone: getStatusTone(run.status),
+            label: run.status
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Queued ",
+              run.queuedAt.toLocaleString()
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(HStack, {
+        gap: "lg",
+        className: "flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Prompt ",
+              formatTokens(run.promptTokens)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Completion ",
+              formatTokens(run.completionTokens)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Duration ",
+              formatDuration(run.durationMs)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VStack, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "font-medium text-sm",
+            children: "Input"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(VStack, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "font-medium text-sm",
+            children: "Output"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(HStack, {
+    gap: "sm",
+    className: "flex-wrap",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        className: "text-muted-foreground text-sm",
+        children: [
+          totalRuns,
+          " runs"
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => firstRow?.toggleExpanded?.(!firstRow?.isExpanded),
+        children: "Expand Latest Run"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => queuedColumn?.toggleVisibility?.(!queuedColumn?.visible),
+        children: queuedColumn?.visible ? "Hide Time" : "Show Time"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => durationColumn?.toggleVisibility?.(!durationColumn?.visible),
+        children: durationColumn?.visible ? "Hide Duration" : "Show Duration"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        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 jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function createRunTableColumns() {
+  return [
+    {
+      id: "queuedAt",
+      header: "Run",
+      label: "Run",
+      accessor: (run) => run.queuedAt.getTime(),
+      cell: ({ item }) => /* @__PURE__ */ jsxDEV2(VStack2, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV2(Text2, {
+            className: "font-mono text-sm",
+            children: item.id.slice(-8)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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
+    }
+  ];
+}
+export {
+  createRunTableColumns
+};

package/dist/browser/ui/views/run-list.shared.js

@@ -0,0 +1,177 @@
+// src/ui/views/run-list.shared.tsx
+import { Button, 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 } 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__ */ jsxDEV(VStack, {
+    gap: "sm",
+    className: "py-2",
+    children: [
+      /* @__PURE__ */ jsxDEV(HStack, {
+        justify: "between",
+        className: "flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxDEV(StatusChip, {
+            tone: getStatusTone(run.status),
+            label: run.status
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Queued ",
+              run.queuedAt.toLocaleString()
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(HStack, {
+        gap: "lg",
+        className: "flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Prompt ",
+              formatTokens(run.promptTokens)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Completion ",
+              formatTokens(run.completionTokens)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "text-muted-foreground text-sm",
+            children: [
+              "Duration ",
+              formatDuration(run.durationMs)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VStack, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "font-medium text-sm",
+            children: "Input"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(VStack, {
+        gap: "xs",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            className: "font-medium text-sm",
+            children: "Output"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(HStack, {
+    gap: "sm",
+    className: "flex-wrap",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        className: "text-muted-foreground text-sm",
+        children: [
+          totalRuns,
+          " runs"
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => firstRow?.toggleExpanded?.(!firstRow?.isExpanded),
+        children: "Expand Latest Run"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => queuedColumn?.toggleVisibility?.(!queuedColumn?.visible),
+        children: queuedColumn?.visible ? "Hide Time" : "Show Time"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => durationColumn?.toggleVisibility?.(!durationColumn?.visible),
+        children: durationColumn?.visible ? "Hide Duration" : "Show Duration"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => costColumn?.toggleVisibility?.(!costColumn?.visible),
+        children: costColumn?.visible ? "Hide Cost" : "Show Cost"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  getStatusTone,
+  formatTokens,
+  formatDuration,
+  formatCost,
+  RunTableToolbar,
+  RunExpandedContent
+};

package/dist/browser/visualizations/catalog.js

@@ -0,0 +1,134 @@
+// 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
+}));
+export {
+  AgentVisualizationSpecs,
+  AgentVisualizationRegistry,
+  AgentVisualizationRefs,
+  AgentRunStatusVisualization,
+  AgentRunEfficiencyVisualization,
+  AgentRunActivityVisualization
+};