@ai-matrx/chat 0.7.7 → 0.7.9

package/dist/agents/components/shared/DesktopFilterPanel.js

@@ -45,7 +45,7 @@ function RadioSelect({
       onClick: () => onChange(opt.value),
       className: cn(
         "flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors text-left",
-        value === opt.value ? "bg-primary/10 text-primary-ink font-medium" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:bg-[var(--mx-chat-fill,hsl(var(--muted)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]"
+        value === opt.value ? "bg-primary/10 text-primary-ink font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -86,7 +86,7 @@ function MultiSelectChips({
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     items.length > 5 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 h-7 rounded-md bg-muted/50 border border-border/50", children: [
-      /* @__PURE__ */ jsx(Search, { className: "h-3 w-3 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] shrink-0" }),
+      /* @__PURE__ */ jsx(Search, { className: "h-3 w-3 text-muted-foreground shrink-0" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -94,7 +94,7 @@ function MultiSelectChips({
           placeholder: searchPlaceholder,
           value: searchQ,
           onChange: (e) => setSearchQ(e.target.value),
-          className: "flex-1 bg-transparent text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] placeholder:text-muted-foreground/50 outline-none"
+          className: "flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 outline-none"
         }
       ),
       searchQ && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), "aria-label": "Clear search", onClick: () => setSearchQ("") })
@@ -107,7 +107,7 @@ function MultiSelectChips({
         return /* @__PURE__ */ jsx(Chip, { asChild: true, pressed: isSelected, label: item, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => toggle(item) }) }, item);
       })
     ] }) }),
-    filtered.length === 0 && searchQ && /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No matches" })
+    filtered.length === 0 && searchQ && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No matches" })
   ] });
 }
 function FilterSection({
@@ -117,7 +117,7 @@ function FilterSection({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))] uppercase tracking-wider", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground uppercase tracking-wider", children: label }),
       active && /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary" })
     ] }),
     children
@@ -194,7 +194,7 @@ function DesktopFilterPanel({
           maxHeight: "var(--radix-popover-content-available-height, calc(100dvh - 120px))"
         },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] shrink-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0", children: [
             /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Filters & Sort" }),
             activeFilterCount > 0 && /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ jsx(RotateCcw, {}), onClick: resetFilters, children: "Reset all" })
           ] }),
@@ -267,7 +267,7 @@ function DesktopFilterPanel({
                     {
                       className: cn(
                         "w-8 h-[18px] rounded-full relative transition-colors shrink-0",
-                        favoritesFirst ? "bg-primary" : "bg-[var(--mx-chat-fill,hsl(var(--muted)))] border border-[color:var(--mx-chat-border,hsl(var(--border)))]"
+                        favoritesFirst ? "bg-primary" : "bg-muted border border-border"
                       ),
                       children: /* @__PURE__ */ jsx(
                         "span",
@@ -280,7 +280,7 @@ function DesktopFilterPanel({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "Pin favorites to top" })
+                  /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "Pin favorites to top" })
                 ]
               }
             ) })

package/dist/agents/components/shared/transcript-layout.d.ts

@@ -1,24 +1,25 @@
 /**
  * How a host lays the ONE conversation column out (HOST-OWNED-SOURCE-PLAN P28e look bar).
  *
- * Knobs, never forks: every value has today's web default, and a host that says nothing gets
- * exactly the web chat. Matrx 2 (desktop) fills its pane, starts at the left edge and draws the
+ * Knobs, never forks: a host that says nothing gets the default look (flat compact user turn,
+ * actions on hover). Matrx 2 (desktop) fills its pane, starts at the left edge and draws the
  * person's turn as a compact block — the look its coding screen had before the column.
  *
  *  - `width`: "reading" (the canonical `max-w-3xl` reading column) | "fill" (the host's pane).
  *  - `align`: "center" | "start" — where a reading-width column sits in a wider pane.
- *  - `userMessage`: "card" (the bordered card that collapses a long message behind a chevron) |
- *    "compact" (a tight block; only a genuinely long message collapses).
- *  - `answerActions`: "shown" (the answer's action row always visible on the latest answer) |
- *    "hover" (revealed on hover / keyboard focus — a finished answer ends on its last word, not on
- *    a lone ⋯ that reads as "still writing" in a host with few actions).
+ *  - `userMessage`: "compact" (DEFAULT: a flat tight block; only a genuinely long message
+ *    collapses) | "card" (the bordered card that collapses a long message behind a chevron).
+ *  - `answerActions`: "hover" (DEFAULT: the action row is revealed on hover / keyboard focus, and
+ *    always on touch — its height is reserved, so revealing it moves nothing; a finished answer ends
+ *    on its last word) | "latest" (the latest answer's row is always visible, older ones on hover) |
+ *    "shown" (every answer's row always visible).
  */
 import { type ReactNode } from "react";
 export interface TranscriptLayout {
     width?: "reading" | "fill";
     align?: "center" | "start";
     userMessage?: "card" | "compact";
-    answerActions?: "shown" | "hover";
+    answerActions?: "shown" | "latest" | "hover";
 }
 export declare const DEFAULT_TRANSCRIPT_LAYOUT: Required<TranscriptLayout>;
 export declare function resolveTranscriptLayout(layout?: TranscriptLayout): Required<TranscriptLayout>;

package/dist/agents/components/shared/transcript-layout.js

@@ -6,8 +6,8 @@ import {
 const DEFAULT_TRANSCRIPT_LAYOUT = {
   width: "reading",
   align: "center",
-  userMessage: "card",
-  answerActions: "shown"
+  userMessage: "compact",
+  answerActions: "hover"
 };
 const TranscriptLayoutContext = createContext(DEFAULT_TRANSCRIPT_LAYOUT);
 function resolveTranscriptLayout(layout) {

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/cx-chat/components/agent/agents.d.ts

@@ -5,11 +5,6 @@ import type { WelcomeAgent } from "../ChatWelcomeServer.js";
  * demo root page resolves it.
  */
 export declare const CX_DEFAULT_MANDATE_KEY: "chat.cx_default";
-/**
- * SEED MIRROR of the `chat.cx_default` mandate's system default — kept only
- * as the loud-fallback display seed (`getDefaultAgent`) when resolution fails
- * on this dev surface. Nothing launches from it.
- */
 export declare const DEFAULT_AGENT_ID = "ce7c5e71-cbdc-4ed1-8dd9-a7eac930b6b8";
 export declare const MATRX_CHAT_AGENT: WelcomeAgent;
 /**

package/dist/cx-chat/components/agent/agents.js

@@ -1,8 +1,9 @@
 import { MANDATE_KEYS } from "@ai-matrx/agents/mandates";
 const CX_DEFAULT_MANDATE_KEY = MANDATE_KEYS.chat__cx_default;
-const DEFAULT_AGENT_ID = "ce7c5e71-cbdc-4ed1-8dd9-a7eac930b6b8";
+const MATRX_CHAT_SEED_AGENT_ID = "ce7c5e71-cbdc-4ed1-8dd9-a7eac930b6b8";
+const DEFAULT_AGENT_ID = MATRX_CHAT_SEED_AGENT_ID;
 const MATRX_CHAT_AGENT = {
-  promptId: "ce7c5e71-cbdc-4ed1-8dd9-a7eac930b6b8",
+  promptId: MATRX_CHAT_SEED_AGENT_ID,
   name: "Matrx Chat",
   description: "Fully customizable agent.",
   variableDefaults: [
@@ -86,7 +87,7 @@ const MATRX_CHAT_AGENT = {
   ]
 };
 const BUILTIN_AGENTS = {
-  "ce7c5e71-cbdc-4ed1-8dd9-a7eac930b6b8": MATRX_CHAT_AGENT,
+  [MATRX_CHAT_SEED_AGENT_ID]: MATRX_CHAT_AGENT,
   "3ca61863-43cf-49cd-8da5-7e0a4b192867": {
     promptId: "3ca61863-43cf-49cd-8da5-7e0a4b192867",
     name: "Custom Chat",

package/dist/cx-chat/components/agent/local-agents.d.ts

@@ -9,12 +9,6 @@ export interface AgentOption {
     promptId: string;
     variableDefaults?: VariableDefinition[];
 }
-/**
- * SEED MIRROR of the `chat.default_new_chat` mandate's system default. Runtime
- * paths resolve the mandate (see `features/mandates`); this constant remains
- * only as the demo conversation page's loud-fallback and for the (currently
- * unconsumed) `useInstanceBootstrap` URL-parse fallback.
- */
 export declare const DEFAULT_AGENT_ID = "6b6b4e45-4699-4860-8dea-d8a60e07d69a";
 export declare const DEFAULT_AGENTS: AgentOption[];
 /** The response-mode strip under the composer, in render order. */

package/dist/cx-chat/components/agent/local-agents.js

@@ -8,14 +8,15 @@ import {
   Lightbulb
 } from "lucide-react";
 import { MANDATE_KEYS } from "@ai-matrx/agents/mandates";
-const DEFAULT_AGENT_ID = "6b6b4e45-4699-4860-8dea-d8a60e07d69a";
+const GENERAL_CHAT_SEED_AGENT_ID = "6b6b4e45-4699-4860-8dea-d8a60e07d69a";
+const DEFAULT_AGENT_ID = GENERAL_CHAT_SEED_AGENT_ID;
 const DEFAULT_AGENTS = [
   {
     id: "general-chat",
     name: "General Chat",
     description: "Helpful general assistant.",
     icon: React.createElement(MessageCircle, { size: 18 }),
-    promptId: "6b6b4e45-4699-4860-8dea-d8a60e07d69a",
+    promptId: GENERAL_CHAT_SEED_AGENT_ID,
     variableDefaults: []
   },
   {

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
       ),