@ai-matrx/chat 0.7.7 → 0.7.8

package/dist/agents/components/smart/AgentRunner.js

@@ -130,7 +130,7 @@ function AgentRunnerFrame({
     {
       className: `relative mx-auto h-full w-full max-w-[800px] overflow-hidden bg-background ${className}`,
       children: [
-        showTitle && title && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 z-10 px-4 py-2 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-background", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] truncate", children: title }) }),
+        showTitle && title && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 z-10 px-4 py-2 border-b border-border bg-background", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground truncate", children: title }) }),
         /* @__PURE__ */ jsx(
           "div",
           {

package/dist/agents/components/smart/CreateWithAiTabs.js

@@ -71,7 +71,7 @@ function CreateWithAiTabs({
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 flex-col", className), children: [
     /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 px-1 pb-3", headerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "inline-flex w-full items-center gap-1 rounded-lg bg-[var(--mx-chat-fill,hsl(var(--muted)))] p-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "inline-flex w-full items-center gap-1 rounded-lg bg-muted p-1", children: [
         /* @__PURE__ */ jsx(
           ModeButton,
           {

package/dist/host/request-headers.js

@@ -1,5 +1,6 @@
 import { credentialToHeaders } from "@ai-matrx/data";
 import { adminLaneHeadersFor } from "./server/admin-lane.js";
+import { isChatHostConfigured } from "./configure.js";
 function chatRequestHeaders(credential, organizationId) {
   const presented = credential.accessToken ? { kind: "user", accessToken: credential.accessToken } : credential.fingerprintId ? { kind: "guest", fingerprintId: credential.fingerprintId } : null;
   const headers = credentialToHeaders(presented);
@@ -7,7 +8,8 @@ function chatRequestHeaders(credential, organizationId) {
   return {
     ...headers,
     "X-Organization-Id": organizationId,
-    ...adminLaneHeadersFor(organizationId)
+    // The admin lane is the configured host's rule; a host still being resolved has none yet.
+    ...isChatHostConfigured() ? adminLaneHeadersFor(organizationId) : {}
   };
 }
 export {

package/dist/surfaces/manifests/agent-builder.manifest.d.ts

@@ -80,4 +80,12 @@ export declare function createAgentBuilderScope(values: {
     variable_custom_component?: unknown;
     variable_binding?: unknown;
     variable_json?: object;
+    test_run_conversation_id?: string;
+    test_run_variables?: Record<string, unknown>;
+    test_run_user_input?: string;
+    test_run_response?: string;
+    test_run_transcript?: {
+        role: string;
+        text: string;
+    }[];
 }): SurfaceScopePayload;

package/dist/surfaces/manifests/agent-builder.manifest.js

@@ -42,9 +42,66 @@ const groups = [
     label: "Focused variable",
     sortOrder: 700,
     description: "The single variable definition the user is editing right now in the variable editor."
+  },
+  {
+    key: "test_run",
+    label: "Test run",
+    sortOrder: 800,
+    description: "The person's latest run of this agent in the builder's test panel: the values it ran with, what they typed, the answer and the whole exchange."
   }
 ];
 const surfaceSpecific = [
+  // ── Test run (800-840) — Agent Factory R58: the helper beside the builder sees the run ──
+  {
+    name: "test_run_conversation_id",
+    label: "Test run conversation",
+    description: "Id of the conversation the person last ran this agent in, in the builder's test panel. Absent until they run it.",
+    valueType: "string",
+    alwaysAvailable: false,
+    typicalCharCount: 36,
+    group: "test_run",
+    sortOrder: 800
+  },
+  {
+    name: "test_run_variables",
+    label: "Test run variables",
+    description: "The variable values the agent ran with in that test run (name \u2192 value). Absent until the person runs it.",
+    valueType: "object",
+    alwaysAvailable: false,
+    typicalCharCount: 600,
+    group: "test_run",
+    sortOrder: 810
+  },
+  {
+    name: "test_run_user_input",
+    label: "Test run input",
+    description: "What the person typed in their latest test-run turn. Empty when they only filled variables.",
+    valueType: "string",
+    alwaysAvailable: false,
+    typicalCharCount: 300,
+    group: "test_run",
+    sortOrder: 820
+  },
+  {
+    name: "test_run_response",
+    label: "Test run answer",
+    description: "The agent's latest answer in the test run, as the person read it. Absent while it is still answering.",
+    valueType: "string",
+    alwaysAvailable: false,
+    typicalCharCount: 3e3,
+    group: "test_run",
+    sortOrder: 830
+  },
+  {
+    name: "test_run_transcript",
+    label: "Test run transcript",
+    description: "The whole test-run conversation in order, one { role, text } per message (person and agent turns). Use it to judge the answer against what was asked.",
+    valueType: "array",
+    alwaysAvailable: false,
+    typicalCharCount: 6e3,
+    group: "test_run",
+    sortOrder: 840
+  },
   // ── Agent identity (300-339) ──────────────────────────────────────────
   {
     name: "agent_id",
@@ -577,8 +634,11 @@ Read the values this way:
 - \`agent_is_read_only\` being true means the user cannot save \u2014 propose, do not
   promise to apply.
 
-You are helping AUTHOR an agent. Nothing here has run yet; the run transcript
-lives on the separate Agent Run surface.
+You are helping AUTHOR an agent. When the person runs it in the builder's test
+panel, the \`test_run_*\` values carry that run: the variables it ran with, what
+they typed, the answer, and the whole exchange \u2014 judge the answer against the
+agent's job and suggest what to change. Absent \`test_run_*\` values mean it has
+not been run here yet.
 
 You can also WRITE here, but only to the authored prose: the system
 instruction, description, name, category, and tags. Everything that decides

package/dist/tool-call-visualization/components/ArtifactResultBar.js

@@ -92,7 +92,7 @@ function ArtifactResultBar({
           }
         },
         className: cn(
-          "group/bar flex w-full cursor-pointer items-center gap-3 border border-border/50 bg-[var(--mx-chat-card,hsl(var(--card)))] px-4 py-2.5 text-left transition-colors hover:bg-accent/30",
+          "group/bar flex w-full cursor-pointer items-center gap-3 border border-border/50 bg-card px-4 py-2.5 text-left transition-colors hover:bg-accent/30",
           // Collapsed: a full pill. Expanded: the letterhead of the attached
           // document — square bottom, no bottom border, the body continues it.
           peekExpanded ? "rounded-t-xl border-b-0" : "rounded-xl"
@@ -106,8 +106,8 @@ function ArtifactResultBar({
             }
           ),
           /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
-            /* @__PURE__ */ jsxs("span", { className: "block truncate text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: title }),
+            /* @__PURE__ */ jsxs("span", { className: "block truncate text-xs text-muted-foreground", children: [
               meta.noun,
               " \xB7 ",
               artifact.verbPast
@@ -121,7 +121,7 @@ function ArtifactResultBar({
                 tabIndex: 0,
                 onClick: (e) => e.stopPropagation(),
                 onKeyDown: (e) => e.stopPropagation(),
-                className: "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-xl border border-border/70 bg-background/60 px-2.5 py-1.5 text-xs font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:bg-accent/40 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+                className: "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-xl border border-border/70 bg-background/60 px-2.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground",
                 "aria-label": "Open options",
                 children: [
                   /* @__PURE__ */ jsx(PanelRightOpen, { className: "size-3.5" }),

package/dist/tool-call-visualization/components/ChatResultColumn.d.ts

@@ -6,7 +6,7 @@ import React from "react";
  * In the real conversation, a tool card sits inside `AgentConversationColumn`'s
  * centered content (`w-full max-w-3xl mx-auto px-2`) directly on the plain
  * conversation surface — NO surrounding card, border, padding, or background
- * change. Tools that look fine inside a decorative `bg-[var(--mx-chat-card,hsl(var(--card)))]` demo panel can
+ * change. Tools that look fine inside a decorative `bg-card` demo panel can
  * render badly in chat (stray borders, odd bg shifts). Previewing in anything
  * but this column lies about how the tool actually renders, so every gallery /
  * "in action" preview must wrap its `ToolCallVisualization` in this.

package/dist/tool-call-visualization/components/ToolCallBatch.js

@@ -131,8 +131,8 @@ const ToolCallBatch = ({
               text: `Running ${count} tools\u2026`,
               className: "truncate font-sans text-sm leading-relaxed tracking-wide"
             }
-          ) : /* @__PURE__ */ jsx("span", { className: "truncate font-sans text-sm leading-relaxed tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: label }),
-          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" })
+          ) : /* @__PURE__ */ jsx("span", { className: "truncate font-sans text-sm leading-relaxed tracking-wide text-muted-foreground", children: label }),
+          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
         ]
       }
     ),

package/dist/tool-call-visualization/components/ToolCallVisualization.js

@@ -282,7 +282,7 @@ const ToolCallVisualizationInner = ({
                 ) : /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: "truncate font-sans text-sm leading-relaxed tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+                    className: "truncate font-sans text-sm leading-relaxed tracking-wide text-muted-foreground",
                     title: guardRouting?.tooltip,
                     children: phaseLabel
                   }
@@ -298,7 +298,7 @@ const ToolCallVisualizationInner = ({
                   querySubtitle
                 ] }))
               ] }),
-              isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
+              isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
               /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity focus-within:opacity-100 group-hover/toolcard:opacity-100", children: [
                 /* @__PURE__ */ jsx(
                   "span",
@@ -316,7 +316,7 @@ const ToolCallVisualizationInner = ({
                         handleOpenWindowPanel();
                       }
                     },
-                    className: "cursor-pointer rounded p-0.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:bg-[var(--mx-chat-fill,hsl(var(--muted)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+                    className: "cursor-pointer rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
                     title: "Open in floating window",
                     children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-3 w-3" })
                   }
@@ -339,7 +339,7 @@ const ToolCallVisualizationInner = ({
                         setIsOverlayOpen(true);
                       }
                     },
-                    className: "cursor-pointer rounded p-0.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:bg-[var(--mx-chat-fill,hsl(var(--muted)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+                    className: "cursor-pointer rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
                     title: "Open fullscreen overlay",
                     children: /* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3" })
                   }
@@ -372,7 +372,7 @@ const ToolCallVisualizationInner = ({
                   const entryParked = parkedOnPersonOf(entry, suspendedCallIds);
                   const InlineRenderer = isErrored || entryWait || entryParked ? null : getInlineRenderer(entry.toolName);
                   return /* @__PURE__ */ jsxs("div", { children: [
-                    entries.length > 1 && /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: groupDisplayName }),
+                    entries.length > 1 && /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: groupDisplayName }),
                     entryParked ? /* @__PURE__ */ jsx(
                       ParkedOnPersonCard,
                       {

package/dist/tool-call-visualization/components/ToolTabBodies.js

@@ -34,8 +34,8 @@ const InputView = ({
   const args = entry.arguments ?? {};
   const argCount = Object.keys(args).length;
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/30 px-3 py-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsx(Settings2, { className: "h-3.5 w-3.5" }),
         /* @__PURE__ */ jsx("span", { children: "Tool input" }),
         /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "px-1.5 py-0 text-[10px]", children: [
@@ -102,9 +102,9 @@ const ErrorView = ({
   const hasArgs = Object.keys(args).length > 0;
   const bundle = buildToolEntryBundle(entry);
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/30 px-3 py-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
-        routed ? /* @__PURE__ */ jsx(Route, { className: "h-3.5 w-3.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }) : /* @__PURE__ */ jsx(CircleAlert, { className: "h-3.5 w-3.5 text-destructive" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        routed ? /* @__PURE__ */ jsx(Route, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(CircleAlert, { className: "h-3.5 w-3.5 text-destructive" }),
         /* @__PURE__ */ jsx("span", { children: routed ? "Routed" : "Error" }),
         entry.errorType && /* @__PURE__ */ jsxs(
           Badge,
@@ -134,11 +134,11 @@ const ErrorView = ({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4 overflow-auto px-3 py-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: label }),
-        message ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: message }) : /* @__PURE__ */ jsx("p", { className: "text-sm italic text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No error message was recorded. Check the Raw tab for events." })
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: label }),
+        message ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-muted-foreground", children: message }) : /* @__PURE__ */ jsx("p", { className: "text-sm italic text-muted-foreground", children: "No error message was recorded. Check the Raw tab for events." })
       ] }),
-      hasArgs && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-t border-[color:var(--mx-chat-border,hsl(var(--border)))] pt-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Input that failed" }),
+      hasArgs && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-t border-border pt-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Input that failed" }),
         /* @__PURE__ */ jsx(KeyValueGrid, { value: args, density: "full" })
       ] })
     ] })
@@ -149,8 +149,8 @@ const RawDataView = ({
 }) => {
   const bundle = buildToolEntryBundle(entry);
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/30 px-3 py-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsx(FileCode2, { className: "h-3.5 w-3.5" }),
         /* @__PURE__ */ jsx("span", { children: "All" }),
         /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "px-1.5 py-0 text-[10px]", children: [
@@ -172,7 +172,7 @@ const RawDataView = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-2", children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-[280px] overflow-hidden rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))]", children: /* @__PURE__ */ jsx(JsonInspector, { showSource: true, data: bundle }) }) })
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-2", children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-[280px] overflow-hidden rounded-md border border-border bg-card", children: /* @__PURE__ */ jsx(JsonInspector, { showSource: true, data: bundle }) }) })
   ] });
 };
 const EntryResultsBody = ({ entry, conversationId: conversationIdProp }) => {

package/dist/tool-call-visualization/components/ToolUpdatesOverlay.js

@@ -19,8 +19,8 @@ import {
 import { Button } from "@ai-matrx/design-system/controls";
 const EntrySelector = ({ entries, selectedCallId, onSelect }) => {
   if (entries.length <= 1) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1.5 overflow-x-auto border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/40 px-3 py-1.5 scrollbar-none", children: [
-    /* @__PURE__ */ jsx("span", { className: "mr-1 flex-shrink-0 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Tool" }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1.5 overflow-x-auto border-b border-border bg-muted/40 px-3 py-1.5 scrollbar-none", children: [
+    /* @__PURE__ */ jsx("span", { className: "mr-1 flex-shrink-0 text-xs text-muted-foreground", children: "Tool" }),
     entries.map((entry, idx) => {
       const label = getToolDisplayName(entry.toolName);
       const isActive = entry.callId === selectedCallId;
@@ -72,7 +72,7 @@ const InputTabContent = ({ entries, selectedCallId, onSelect }) => {
         onSelect
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(InputView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(InputView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
   ] });
 };
 const RawTabContent = ({ entries, selectedCallId, onSelect }) => {
@@ -86,7 +86,7 @@ const RawTabContent = ({ entries, selectedCallId, onSelect }) => {
         onSelect
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(RawDataView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(RawDataView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
   ] });
 };
 const ToolUpdatesOverlay = ({

package/dist/tool-call-visualization/configured-rows/ConfiguredToolRow.js

@@ -40,7 +40,7 @@ function ConfiguredToolRow({ entry, kind, cfg }) {
             kind === "server" && /* @__PURE__ */ jsx(
               ChevronRight,
               {
-                className: `size-3 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-transform ${open ? "rotate-90" : ""}`
+                className: `size-3 shrink-0 text-muted-foreground transition-transform ${open ? "rotate-90" : ""}`
               }
             ),
             /* @__PURE__ */ jsx(
@@ -53,18 +53,18 @@ function ConfiguredToolRow({ entry, kind, cfg }) {
                 spin: shouldSpin
               }
             ),
-            headerLabel && /* @__PURE__ */ jsx("span", { className: cn("truncate text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", shimmer && "min-w-0"), children: shimmer ? /* @__PURE__ */ jsx(ShimmerText, { text: headerLabel }) : headerLabel }),
+            headerLabel && /* @__PURE__ */ jsx("span", { className: cn("truncate text-foreground", shimmer && "min-w-0"), children: shimmer ? /* @__PURE__ */ jsx(ShimmerText, { text: headerLabel }) : headerLabel }),
             infoText && /* @__PURE__ */ jsx(
               "span",
               {
                 className: cn(
-                  "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+                  "text-muted-foreground",
                   inline.isMultiline ? "whitespace-pre-wrap" : "truncate"
                 ),
                 children: infoText
               }
             ),
-            phase !== "started" && entry.endedAt && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+            phase !== "started" && entry.endedAt && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[10px] text-muted-foreground", children: [
               Math.max(1, entry.endedAt - entry.startedAt),
               "ms"
             ] })
@@ -144,7 +144,7 @@ function ExpandedBody({ entry, cfg, skipResults = false }) {
 const preClass = "mt-0.5 max-h-48 overflow-auto rounded-md bg-background/60 p-1.5 text-[11px] leading-snug";
 function SectionLabel({ label, children }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
     children
   ] });
 }
@@ -167,7 +167,7 @@ function renderStandardDisplay(value, displayType) {
     const entries = Object.entries(value);
     if (entries.length === 0) return null;
     if (displayType === "values-only") {
-      return /* @__PURE__ */ jsx("ul", { className: "mt-0.5 list-disc space-y-0.5 pl-4 text-[11px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: entries.map(([k, v]) => /* @__PURE__ */ jsx("li", { children: stringifyValue(v) }, k)) });
+      return /* @__PURE__ */ jsx("ul", { className: "mt-0.5 list-disc space-y-0.5 pl-4 text-[11px] text-foreground", children: entries.map(([k, v]) => /* @__PURE__ */ jsx("li", { children: stringifyValue(v) }, k)) });
     }
     return /* @__PURE__ */ jsx("div", { className: "mt-0.5 grid grid-cols-[minmax(0,auto)_1fr] gap-x-2 gap-y-0.5 text-[11px]", children: entries.map(([k, v]) => /* @__PURE__ */ jsx(FieldRow, { k, v }, k)) });
   }
@@ -175,8 +175,8 @@ function renderStandardDisplay(value, displayType) {
 }
 function FieldRow({ k, v }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: k }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: stringifyValue(v) })
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: k }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-foreground", children: stringifyValue(v) })
   ] });
 }
 function CustomResults({ result, keysInfo }) {

package/dist/tool-call-visualization/configured-rows/CopyToolButton.js

@@ -49,7 +49,7 @@ function CopyToolButton({ data, className }) {
       title: copied ? "Copied!" : "Copy tool data",
       "aria-label": "Copy tool data",
       className: cn(
-        "inline-flex size-5 shrink-0 items-center justify-center rounded text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] opacity-0 transition-opacity hover:bg-muted/60 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))] focus:opacity-100 group-hover:opacity-100",
+        "inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted/60 hover:text-foreground focus:opacity-100 group-hover:opacity-100",
         copied && "opacity-100 text-emerald-600 dark:text-emerald-400",
         className
       ),

package/dist/tool-call-visualization/configured-rows/ToolProgressView.js

@@ -24,7 +24,7 @@ function ToolProgressView({ progress, phase, cfg }) {
     }
   );
 }
-const lineClass = "flex items-center gap-1.5 text-[11px] leading-snug text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]";
+const lineClass = "flex items-center gap-1.5 text-[11px] leading-snug text-muted-foreground";
 const wrapClass = "mt-1 ml-5 border-l border-border/50 pl-2 space-y-0.5";
 function entryLabel(e) {
   return e.label ?? e.step ?? e.status ?? "\u2026";
@@ -33,7 +33,7 @@ function PercentBar({ percent }) {
   const pct = percent <= 1 ? percent * 100 : percent;
   const clamped = Math.max(0, Math.min(100, pct));
   return /* @__PURE__ */ jsxs("span", { className: "ml-auto inline-flex items-center gap-1", children: [
-    /* @__PURE__ */ jsx("span", { className: "h-1 w-16 overflow-hidden rounded-full bg-[var(--mx-chat-fill,hsl(var(--muted)))]", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("span", { className: "h-1 w-16 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
       "span",
       {
         className: "block h-full rounded-full bg-primary/70 transition-all",
@@ -60,7 +60,7 @@ function LogProgress({
         {
           type: "button",
           onClick: () => setOpen((v) => !v),
-          className: "inline-flex items-center gap-1 text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+          className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground",
           children: [
             open ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
             entries.length,
@@ -89,8 +89,8 @@ function LogProgress({
 function ProgressLine({ e, active }) {
   const errored = e.status === "error";
   return /* @__PURE__ */ jsxs("div", { className: cn(lineClass, errored && "text-red-600 dark:text-red-400"), children: [
-    active ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }) : errored ? /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "size-3 shrink-0 text-center text-muted-foreground/40", children: "\xB7" }),
-    /* @__PURE__ */ jsx("span", { className: cn(active ? "truncate text-[color:var(--mx-chat-text,hsl(var(--foreground)))]" : "truncate"), children: entryLabel(e) }),
+    active ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-primary" }) : errored ? /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "size-3 shrink-0 text-center text-muted-foreground/40", children: "\xB7" }),
+    /* @__PURE__ */ jsx("span", { className: cn(active ? "truncate text-foreground" : "truncate"), children: entryLabel(e) }),
     typeof e.percent === "number" && /* @__PURE__ */ jsx(PercentBar, { percent: e.percent })
   ] });
 }
@@ -123,7 +123,7 @@ function StepsProgress({
         className: cn(
           lineClass,
           status === "error" && "text-red-600 dark:text-red-400",
-          status === "done" && "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]"
+          status === "done" && "text-foreground"
         ),
         children: [
           /* @__PURE__ */ jsx(StepIcon, { status }),
@@ -136,7 +136,7 @@ function StepsProgress({
   }) });
 }
 function StepIcon({ status }) {
-  if (status === "active") return /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" });
+  if (status === "active") return /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-primary" });
   if (status === "done")
     return /* @__PURE__ */ jsx(Check, { className: "size-3 shrink-0 text-emerald-600 dark:text-emerald-400" });
   if (status === "error") return /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" });

package/dist/tool-call-visualization/configured-rows/field-components.js

@@ -68,7 +68,7 @@ const Base64Image = ({ value, className }) => {
         className: "max-h-[28rem] w-full rounded-md border border-border/40 object-contain"
       }
     ),
-    meta && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: meta })
+    meta && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground", children: meta })
   ] });
 };
 function toDataUri(value) {
@@ -122,7 +122,7 @@ const Chips = ({ value, className }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-1", className), children: items.map((item, i) => /* @__PURE__ */ jsx(
     "span",
     {
-      className: "inline-flex rounded-md border border-border/50 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+      className: "inline-flex rounded-md border border-border/50 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px] text-foreground",
       children: item
     },
     `${item}-${i}`
@@ -151,16 +151,16 @@ const TabCard = ({ value, className }) => {
             className: "size-5 shrink-0 rounded-sm object-contain",
             onError: () => setFaviconErr(true)
           }
-        ) : /* @__PURE__ */ jsx(Globe, { className: "size-5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
+        ) : /* @__PURE__ */ jsx(Globe, { className: "size-5 shrink-0 text-muted-foreground" }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
-          title && /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
+          title && /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] font-medium text-foreground", children: title }),
           url && /* @__PURE__ */ jsx(
             "a",
             {
               href: url,
               target: "_blank",
               rel: "noreferrer noopener",
-              className: "block truncate text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))] hover:underline",
+              className: "block truncate text-[10px] text-muted-foreground hover:text-foreground hover:underline",
               onClick: (e) => e.stopPropagation(),
               children: url
             }
@@ -201,7 +201,7 @@ const ExtractTableField = ({ value, className }) => {
         );
       }) }, r.index ?? ri)) })
     ] }),
-    obj.truncated === true && /* @__PURE__ */ jsx("div", { className: "border-t border-border/30 bg-muted/30 px-2 py-1 text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Table was truncated" })
+    obj.truncated === true && /* @__PURE__ */ jsx("div", { className: "border-t border-border/30 bg-muted/30 px-2 py-1 text-[10px] text-muted-foreground", children: "Table was truncated" })
   ] });
 };
 const fieldComponents = {

package/dist/tool-call-visualization/registry/GenericRenderer.js

@@ -57,7 +57,7 @@ const ProgressLine = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "flex min-w-0 items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] animate-in fade-in slide-in-from-bottom-1 duration-300",
+      className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground animate-in fade-in slide-in-from-bottom-1 duration-300",
       style: {
         animationDelay: `${index * 60}ms`,
         animationFillMode: "backwards"
@@ -89,7 +89,7 @@ const GenericRenderer = ({
     );
   }
   if (isComplete && entry.result == null) {
-    return /* @__PURE__ */ jsx("div", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Completed. No output was captured for this call." });
+    return /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Completed. No output was captured for this call." });
   }
   if (!isComplete || entry.result == null) {
     const source = events && events.length > 0 ? collectMessages(events) : entry.latestMessage ? [entry.latestMessage] : [];
@@ -104,7 +104,7 @@ const GenericRenderer = ({
         },
         `${i}-${msg.slice(0, 16)}`
       )) }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
         /* @__PURE__ */ jsx("span", { children: "Working\u2026" })
       ] })
@@ -150,7 +150,7 @@ const GenericRenderer = ({
           e.stopPropagation();
           onOpenOverlay(`tool-group-${groupId}`);
         },
-        className: "group flex w-full items-center justify-between gap-2 rounded border border-border/60 px-2 py-1 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:border-primary/40 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+        className: "group flex w-full items-center justify-between gap-2 rounded border border-border/60 px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground",
         children: [
           /* @__PURE__ */ jsx("span", { children: "View complete result" }),
           /* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3 shrink-0" })

package/dist/tool-call-visualization/renderers/_shared-entity/EmptyResultCard.js

@@ -23,7 +23,7 @@ function EmptyResultCard({
       title,
       subtitle: `${did} \xB7 nothing to show`,
       actions,
-      children: /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-xs leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-xs leading-relaxed text-muted-foreground", children: [
         did,
         ", but the tool returned nothing to open from here. ",
         remedy

package/dist/tool-call-visualization/renderers/_shared-entity/EntityCard.js

@@ -38,7 +38,7 @@ function EntityCard({
     "div",
     {
       className: cn(
-        "overflow-hidden rounded-xl border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))] text-card-foreground",
+        "overflow-hidden rounded-xl border border-border bg-card text-card-foreground",
         className
       ),
       children: [
@@ -61,7 +61,7 @@ function EntityCard({
             children: [
               /* @__PURE__ */ jsx(ToolGlyph, { icon, accent, size: "lg" }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold leading-tight text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
+                /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold leading-tight text-foreground", children: title }),
                 subtitle || hoverAct ? /* @__PURE__ */ jsxs("div", { className: "relative mt-0.5 h-4 text-xs leading-tight", children: [
                   subtitle ? /* @__PURE__ */ jsx(
                     "span",
@@ -69,7 +69,7 @@ function EntityCard({
                       className: cn(
                         // Text only: it never takes the press meant for the hover action drawn over it
                         // (review 2: "Open in window" was covered by this span and could not be clicked).
-                        "pointer-events-none absolute inset-0 truncate text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-opacity",
+                        "pointer-events-none absolute inset-0 truncate text-muted-foreground transition-opacity",
                         hoverAct && "group-hover/eh:opacity-0 group-focus-within/eh:opacity-0"
                       ),
                       children: subtitle
@@ -84,7 +84,7 @@ function EntityCard({
                         hoverAct.onSelect?.();
                       },
                       "data-entity-hover-action": "",
-                      className: "absolute inset-0 flex w-full items-center gap-1 truncate text-left font-medium text-[color:var(--mx-chat-accent,hsl(var(--primary)))] opacity-0 transition-opacity pointer-events-none group-hover/eh:pointer-events-auto group-hover/eh:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100",
+                      className: "absolute inset-0 flex w-full items-center gap-1 truncate text-left font-medium text-primary opacity-0 transition-opacity pointer-events-none group-hover/eh:pointer-events-auto group-hover/eh:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100",
                       children: [
                         hoverAct.icon ? /* @__PURE__ */ jsx(hoverAct.icon, { className: "h-3 w-3 shrink-0" }) : null,
                         /* @__PURE__ */ jsx("span", { className: "truncate", children: hoverAct.label }),
@@ -150,7 +150,7 @@ function EntityCard({
               "grid transition-[grid-template-rows] duration-300 ease-in-out",
               open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
-            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "border-t border-[color:var(--mx-chat-border,hsl(var(--border)))]", children }) })
+            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "border-t border-border", children }) })
           }
         ) : null
       ]

package/dist/tool-call-visualization/renderers/_shared-entity/PartPeekPopover.js

@@ -28,13 +28,13 @@ function PartPeekPopover({
             "div",
             {
               className: cn(
-                "border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+                "border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground",
                 headerClassName ?? "bg-muted/40"
               ),
               children: header
             }
           ) : null,
-          /* @__PURE__ */ jsx("div", { className: "px-3 py-2.5 text-xs leading-relaxed text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: body })
+          /* @__PURE__ */ jsx("div", { className: "px-3 py-2.5 text-xs leading-relaxed text-foreground", children: body })
         ]
       }
     )