@contractspec/example.agent-console 3.7.5 → 3.7.7

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/index.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;
@@ -51,16 +51,69 @@ function useAgentList(options = {}) {
   };
 }
 
+// src/ui/renderers/agent-list.markdown.ts
+import {
+  mockListAgentsHandler
+} from "@contractspec/example.agent-console/handlers";
+var agentListMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "AgentListView") {
+      throw new Error("agentListMarkdownRenderer: not AgentListView");
+    }
+    const data = await mockListAgentsHandler({
+      organizationId: "demo-org",
+      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 +178,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 +229,112 @@ var agentListReactRenderer = {
   }
 };
 
-// src/ui/renderers/agent-list.markdown.ts
+// src/ui/renderers/dashboard.markdown.ts
 import {
-  mockListAgentsHandler
+  mockListAgentsHandler as mockListAgentsHandler2,
+  mockListRunsHandler,
+  mockListToolsHandler
 } from "@contractspec/example.agent-console/handlers";
-var agentListMarkdownRenderer = {
+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");
+    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 [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 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 | ${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",
       ""
     ];
-    const byStatus = {};
-    for (const agent of data.items) {
-      const status = agent.status;
-      if (byStatus[status]) {
-        byStatus[status].push(agent);
-      } else {
-        byStatus[status] = [agent];
+    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_ |`);
       }
     }
-    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 (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 ? formatDuration(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} |`);
       }
-      lines.push("");
     }
     return {
       mimeType: "text/markdown",
@@ -230,8 +345,8 @@ var agentListMarkdownRenderer = {
 };
 
 // src/ui/renderers/run-list.markdown.ts
-import { mockListRunsHandler } from "@contractspec/example.agent-console/handlers";
-function formatDuration(ms) {
+import { mockListRunsHandler as mockListRunsHandler2 } from "@contractspec/example.agent-console/handlers";
+function formatDuration2(ms) {
   if (ms < 1000)
     return `${ms}ms`;
   if (ms < 60000)
@@ -244,7 +359,7 @@ var runListMarkdownRenderer = {
     if (desc.source.type !== "component" || desc.source.componentKey !== "RunListView") {
       throw new Error("runListMarkdownRenderer: not RunListView");
     }
-    const data = await mockListRunsHandler({
+    const data = await mockListRunsHandler2({
       organizationId: "demo-org",
       limit: 20,
       offset: 0
@@ -262,7 +377,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,14 +388,14 @@ var runListMarkdownRenderer = {
 };
 
 // src/ui/renderers/tool-registry.markdown.ts
-import { mockListToolsHandler } from "@contractspec/example.agent-console/handlers";
+import { mockListToolsHandler as mockListToolsHandler2 } from "@contractspec/example.agent-console/handlers";
 var toolRegistryMarkdownRenderer = {
   target: "markdown",
   render: async (desc) => {
     if (desc.source.type !== "component" || desc.source.componentKey !== "ToolRegistryView") {
       throw new Error("toolRegistryMarkdownRenderer: not ToolRegistryView");
     }
-    const data = await mockListToolsHandler({
+    const data = await mockListToolsHandler2({
       organizationId: "demo-org",
       limit: 50,
       offset: 0
@@ -322,121 +437,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/views/AgentListView.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/views/RunListView.js

@@ -1,6 +1,6 @@
 // src/ui/hooks/useRunList.ts
-import { useCallback, useEffect, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useState } from "react";
 function useRunList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { agent } = handlers;
@@ -53,12 +53,12 @@ function useRunList(options = {}) {
 
 // src/ui/views/RunListView.tsx
 import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
   EmptyState,
+  ErrorState,
   LoaderBlock,
-  ErrorState
+  StatCard,
+  StatCardGroup,
+  StatusChip
 } from "@contractspec/lib.design-system";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
@@ -143,45 +143,45 @@ function RunListView({ agentId, onRunClick }) {
         ]
       }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "border-border rounded-lg border",
+        className: "rounded-lg border border-border",
         children: /* @__PURE__ */ jsxDEV("table", {
           className: "w-full",
           children: [
             /* @__PURE__ */ jsxDEV("thead", {
-              className: "border-border bg-muted/30 border-b",
+              className: "border-border border-b bg-muted/30",
               children: /* @__PURE__ */ jsxDEV("tr", {
                 children: [
                   /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-left text-sm font-medium",
+                    className: "px-4 py-3 text-left font-medium text-muted-foreground text-sm",
                     children: "Run"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-left text-sm font-medium",
+                    className: "px-4 py-3 text-left font-medium text-muted-foreground text-sm",
                     children: "Agent"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-left text-sm font-medium",
+                    className: "px-4 py-3 text-left font-medium text-muted-foreground text-sm",
                     children: "Status"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-right text-sm font-medium",
+                    className: "px-4 py-3 text-right font-medium text-muted-foreground text-sm",
                     children: "Tokens"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-right text-sm font-medium",
+                    className: "px-4 py-3 text-right font-medium text-muted-foreground text-sm",
                     children: "Duration"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("th", {
-                    className: "text-muted-foreground px-4 py-3 text-right text-sm font-medium",
+                    className: "px-4 py-3 text-right font-medium text-muted-foreground text-sm",
                     children: "Cost"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this)
             }, undefined, false, undefined, this),
             /* @__PURE__ */ jsxDEV("tbody", {
-              className: "divide-border divide-y",
+              className: "divide-y divide-border",
               children: data.items.map((run) => /* @__PURE__ */ jsxDEV("tr", {
-                className: "hover:bg-muted/50 cursor-pointer transition-colors",
+                className: "cursor-pointer transition-colors hover:bg-muted/50",
                 onClick: () => onRunClick?.(run.id),
                 children: [
                   /* @__PURE__ */ jsxDEV("td", {
@@ -230,7 +230,7 @@ function RunListView({ agentId, onRunClick }) {
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "text-muted-foreground text-center text-sm",
+        className: "text-center text-muted-foreground text-sm",
         children: [
           "Showing ",
           data.items.length,

package/dist/browser/ui/views/ToolRegistryView.js

@@ -1,6 +1,6 @@
 // src/ui/hooks/useToolList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
 function useToolList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { agent } = handlers;
@@ -83,14 +83,14 @@ function useToolList(options = {}) {
 
 // src/ui/views/ToolRegistryView.tsx
 import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EntityCard,
+  Button,
   EmptyState,
-  LoaderBlock,
+  EntityCard,
   ErrorState,
-  Button
+  LoaderBlock,
+  StatCard,
+  StatCardGroup,
+  StatusChip
 } from "@contractspec/lib.design-system";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
@@ -170,11 +170,11 @@ function ToolRegistryView({
                 children: categoryIcons[category]
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("h3", {
-                className: "text-lg font-semibold",
+                className: "font-semibold text-lg",
                 children: category
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("span", {
-                className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+                className: "rounded-full bg-muted px-2 py-0.5 text-muted-foreground text-xs",
                 children: tools.length
               }, undefined, false, undefined, this)
             ]