@ai-matrx/chat 0.7.7 → 0.7.8

package/dist/tool-call-visualization/renderers/search/SearchOverlay.js

@@ -31,7 +31,7 @@ const Favicon = ({ url, className }) => {
       "span",
       {
         className: cn(
-          "flex items-center justify-center bg-[var(--mx-chat-fill,hsl(var(--muted)))] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+          "flex items-center justify-center bg-muted text-muted-foreground",
           className
         ),
         children: /* @__PURE__ */ jsx(Globe, { className: "h-1/2 w-1/2" })
@@ -43,7 +43,7 @@ const BreadcrumbPath = ({ url }) => {
   const { origin, segments } = useMemo(() => getBreadcrumbParts(url), [url]);
   return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1 truncate text-xs leading-tight", children: [
     /* @__PURE__ */ jsx("span", { className: "truncate text-success/90", children: origin }),
-    segments.map((seg, i) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+    segments.map((seg, i) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "\u203A" }),
       /* @__PURE__ */ jsx("span", { className: "truncate", children: seg })
     ] }, i))
@@ -59,11 +59,11 @@ const ResultRow = ({ source, rank }) => {
       className: "w-[380px]",
       header: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 normal-case", children: [
         /* @__PURE__ */ jsx(Favicon, { url: source.url, className: "h-4 w-4 rounded" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: siteName })
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: siteName })
       ] }),
       body: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "font-medium leading-snug text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: source.title }),
-        source.snippet ? /* @__PURE__ */ jsx("div", { className: "max-h-56 overflow-y-auto whitespace-pre-wrap text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: source.snippet }) : /* @__PURE__ */ jsx("div", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: source.domain })
+        /* @__PURE__ */ jsx("div", { className: "font-medium leading-snug text-foreground", children: source.title }),
+        source.snippet ? /* @__PURE__ */ jsx("div", { className: "max-h-56 overflow-y-auto whitespace-pre-wrap text-muted-foreground", children: source.snippet }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: source.domain })
       ] }),
       children: /* @__PURE__ */ jsxs("div", { className: "group/result flex gap-3", children: [
         rank !== void 0 && /* @__PURE__ */ jsx("span", { className: "w-6 flex-shrink-0 pt-0.5 text-right text-xs tabular-nums text-muted-foreground/70", children: rank }),
@@ -73,11 +73,11 @@ const ResultRow = ({ source, rank }) => {
               Favicon,
               {
                 url: source.url,
-                className: "h-9 w-9 flex-shrink-0 rounded-full border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))] p-1.5"
+                className: "h-9 w-9 flex-shrink-0 rounded-full border border-border bg-card p-1.5"
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium leading-tight text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: siteName }),
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium leading-tight text-foreground", children: siteName }),
               /* @__PURE__ */ jsx(BreadcrumbPath, { url: source.url })
             ] })
           ] }),
@@ -89,13 +89,13 @@ const ResultRow = ({ source, rank }) => {
               rel: "noopener noreferrer",
               className: "group/link mt-1.5 flex items-start gap-1.5",
               children: [
-                /* @__PURE__ */ jsx("span", { className: "text-lg font-medium leading-snug text-[color:var(--mx-chat-accent,hsl(var(--primary)))] underline-offset-2 group-hover/link:underline", children: source.title }),
-                /* @__PURE__ */ jsx(ExternalLink, { className: "mt-1.5 h-3.5 w-3.5 flex-shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] opacity-0 transition-opacity group-hover/result:opacity-100" })
+                /* @__PURE__ */ jsx("span", { className: "text-lg font-medium leading-snug text-primary underline-offset-2 group-hover/link:underline", children: source.title }),
+                /* @__PURE__ */ jsx(ExternalLink, { className: "mt-1.5 h-3.5 w-3.5 flex-shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/result:opacity-100" })
               ]
             }
           ),
-          source.snippet && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-sm leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: source.snippet }),
-          date && /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] opacity-80", children: date })
+          source.snippet && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-sm leading-relaxed text-muted-foreground", children: source.snippet }),
+          date && /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-xs text-muted-foreground opacity-80", children: date })
         ] })
       ] })
     }
@@ -113,12 +113,12 @@ function groupToSources(group) {
 const ReadingPane = ({ reads }) => {
   const [active, setActive] = useState(0);
   const current = reads[active];
-  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/40 px-3 py-2", children: [
-      /* @__PURE__ */ jsx(BookOpenText, { className: "h-4 w-4 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-muted/40 px-3 py-2", children: [
+      /* @__PURE__ */ jsx(BookOpenText, { className: "h-4 w-4 text-primary" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-foreground", children: [
         "Pages read ",
-        /* @__PURE__ */ jsxs("span", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
           "(",
           reads.length,
           ")"
@@ -126,7 +126,7 @@ const ReadingPane = ({ reads }) => {
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:h-[420px] md:flex-row", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 divide-y divide-border/60 overflow-y-auto border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] md:w-64 md:border-b-0 md:border-r", children: reads.map((r, i) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 divide-y divide-border/60 overflow-y-auto border-b border-border md:w-64 md:border-b-0 md:border-r", children: reads.map((r, i) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -143,7 +143,7 @@ const ReadingPane = ({ reads }) => {
                 {
                   className: cn(
                     "truncate text-xs font-medium",
-                    i === active ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]"
+                    i === active ? "text-primary" : "text-foreground"
                   ),
                   children: r.title ?? getDomain(r.url)
                 }
@@ -155,17 +155,17 @@ const ReadingPane = ({ reads }) => {
         `${r.url}-${i}`
       )) }),
       /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 overflow-y-auto p-4", children: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start gap-2 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] pb-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start gap-2 border-b border-border pb-3", children: [
           /* @__PURE__ */ jsx(Favicon, { url: current.url, className: "mt-0.5 h-5 w-5 flex-shrink-0" }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: current.title ?? getDomain(current.url) }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: current.title ?? getDomain(current.url) }),
             /* @__PURE__ */ jsxs(
               "a",
               {
                 href: current.url || void 0,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: "inline-flex items-center gap-1 text-xs text-[color:var(--mx-chat-accent,hsl(var(--primary)))] hover:underline",
+                className: "inline-flex items-center gap-1 text-xs text-primary hover:underline",
                 children: [
                   /* @__PURE__ */ jsx("span", { className: "truncate", children: current.url }),
                   /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 flex-shrink-0" })
@@ -174,8 +174,8 @@ const ReadingPane = ({ reads }) => {
             )
           ] })
         ] }),
-        current.text ? /* @__PURE__ */ jsx("div", { className: "text-sm", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "other", content: current.text }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No page content captured." })
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-center text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+        current.text ? /* @__PURE__ */ jsx("div", { className: "text-sm", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "other", content: current.text }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No page content captured." })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: [
         /* @__PURE__ */ jsx(FileText, { className: "mr-2 h-4 w-4" }),
         " Select a page"
       ] }) })
@@ -213,7 +213,7 @@ const SearchOverlay = ({ entry }) => {
   const drilling = filter.trim().length > 0 || sortKey !== "relevance" || activeQuery !== null;
   const showGroupedBlocks = multiQuery && !drilling;
   if (sources.length === 0 && reads.length === 0 && !report) {
-    return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx(Search, { className: "mx-auto mb-3 h-12 w-12 opacity-40" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No search results available" })
     ] }) });
@@ -221,21 +221,21 @@ const SearchOverlay = ({ entry }) => {
   return /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-y-auto bg-background", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-5 p-4", children: [
     report && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-primary/15 bg-primary/5 p-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx(Lightbulb, { className: "h-4 w-4 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "AI Matrx answer" })
+        /* @__PURE__ */ jsx(Lightbulb, { className: "h-4 w-4 text-primary" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "AI Matrx answer" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed text-foreground/90", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "ai", content: report }) })
     ] }),
-    /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
       "About ",
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] tabular-nums", children: sources.length }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground tabular-nums", children: sources.length }),
       " ",
       sources.length === 1 ? "result" : "results",
       queries.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
         " ",
         "across",
         " ",
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] tabular-nums", children: queries.length }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground tabular-nums", children: queries.length }),
         " ",
         "queries"
       ] }),
@@ -243,7 +243,7 @@ const SearchOverlay = ({ entry }) => {
         " ",
         "\xB7",
         " ",
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] tabular-nums", children: reads.length }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground tabular-nums", children: reads.length }),
         " read"
       ] })
     ] }),
@@ -271,7 +271,7 @@ const SearchOverlay = ({ entry }) => {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
+          /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -279,12 +279,12 @@ const SearchOverlay = ({ entry }) => {
               value: filter,
               onChange: (e) => setFilter(e.target.value),
               placeholder: `Filter ${base.length} results\u2026`,
-              className: "h-9 w-full max-w-md rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-background pl-9 pr-3 text-base text-[color:var(--mx-chat-text,hsl(var(--foreground)))] placeholder:text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] focus:outline-none focus:ring-2 focus:ring-ring sm:text-sm"
+              className: "h-9 w-full max-w-md rounded-md border border-border bg-background pl-9 pr-3 text-base text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring sm:text-sm"
             }
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
+          /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsx(
             SegmentedControl,
             {
@@ -305,10 +305,10 @@ const SearchOverlay = ({ entry }) => {
       const blockSources = groupToSources(g);
       if (blockSources.length === 0) return null;
       return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] pb-1.5", children: [
-          /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 flex-shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", title: g.query, children: g.query }),
-          /* @__PURE__ */ jsxs("span", { className: "flex-shrink-0 text-xs tabular-nums text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border pb-1.5", children: [
+          /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 flex-shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", title: g.query, children: g.query }),
+          /* @__PURE__ */ jsxs("span", { className: "flex-shrink-0 text-xs tabular-nums text-muted-foreground", children: [
             blockSources.length,
             " ",
             blockSources.length === 1 ? "result" : "results"
@@ -318,14 +318,14 @@ const SearchOverlay = ({ entry }) => {
       ] }, g.query);
     }) }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: activeQuery ? "Results for query" : "All results" }),
-        /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: activeQuery ? "Results for query" : "All results" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
           visible.length,
           " ",
           visible.length === 1 ? "result" : "results"
         ] })
       ] }),
-      visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] px-3 py-6 text-center text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No results match the filter" }) : /* @__PURE__ */ jsx("div", { className: "space-y-4 pt-1", children: visible.map((s, i) => /* @__PURE__ */ jsx(ResultRow, { rank: i + 1, source: s }, `${s.url}-${i}`)) })
+      visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border px-3 py-6 text-center text-xs text-muted-foreground", children: "No results match the filter" }) : /* @__PURE__ */ jsx("div", { className: "space-y-4 pt-1", children: visible.map((s, i) => /* @__PURE__ */ jsx(ResultRow, { rank: i + 1, source: s }, `${s.url}-${i}`)) })
     ] })
   ] }) });
 };

package/dist/tool-call-visualization/renderers/shell/ShellInline.js

@@ -36,7 +36,7 @@ const Chip = ({
   {
     className: cn(
       "text-xs tabular-nums",
-      tone === "bad" ? "font-medium text-red-600 dark:text-red-400" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]"
+      tone === "bad" ? "font-medium text-red-600 dark:text-red-400" : "text-muted-foreground"
     ),
     children
   }
@@ -79,7 +79,7 @@ const OutputBlock = ({ text, stream }) => {
           // `overflow-x-auto` on the block itself: a long line scrolls HERE
           // and never widens the transcript (the 390px rule).
           "max-h-80 overflow-auto whitespace-pre px-4 py-2 font-mono text-xs leading-relaxed",
-          stream === "stderr" ? "text-amber-700 dark:text-amber-400" : "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]"
+          stream === "stderr" ? "text-amber-700 dark:text-amber-400" : "text-foreground"
         ),
         children: shown.join("\n")
       }
@@ -107,7 +107,7 @@ const ShellResultCard = ({ command, result, ...shell }) => {
         result.backend === "durable_vfs" && /* @__PURE__ */ jsx(DurableVfsWarning, {}),
         result.stdout.trim() !== "" && /* @__PURE__ */ jsx(OutputBlock, { text: result.stdout, stream: "stdout" }),
         result.stderr.trim() !== "" && /* @__PURE__ */ jsx(OutputBlock, { text: result.stderr, stream: "stderr" }),
-        result.stdout.trim() === "" && result.stderr.trim() === "" && /* @__PURE__ */ jsx("p", { className: "border-t border-border/30 px-4 py-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No output." })
+        result.stdout.trim() === "" && result.stderr.trim() === "" && /* @__PURE__ */ jsx("p", { className: "border-t border-border/30 px-4 py-2 text-xs text-muted-foreground", children: "No output." })
       ] })
     }
   );

package/dist/tool-call-visualization/renderers/skill/SkillInline.js

@@ -57,8 +57,8 @@ const SkillInline = (props) => {
                 i > 0 && "border-t border-border/30"
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: h.label }),
-                h.type && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: h.type })
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-foreground", children: h.label }),
+                h.type && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: h.type })
               ]
             },
             `${h.label}-${i}`
@@ -81,12 +81,12 @@ const SkillInline = (props) => {
         title: label,
         sub: ["Skill", type, version].filter(Boolean).join(" \xB7 "),
         children: (description || categories.length > 0 || triggers.length > 0) && /* @__PURE__ */ jsxs("div", { className: "space-y-2.5 px-4 py-3", children: [
-          description && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line text-[13px] leading-relaxed text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: description }),
+          description && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line text-[13px] leading-relaxed text-foreground", children: description }),
           (categories.length > 0 || triggers.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
             categories.map((c) => /* @__PURE__ */ jsx(
               "span",
               {
-                className: "rounded-md bg-[var(--mx-chat-fill,hsl(var(--muted)))] px-1.5 py-0.5 text-xs font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+                className: "rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground",
                 children: c
               },
               `c-${c}`
@@ -94,7 +94,7 @@ const SkillInline = (props) => {
             triggers.map((t) => /* @__PURE__ */ jsx(
               "span",
               {
-                className: "rounded-md border border-border/50 px-1.5 py-0.5 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+                className: "rounded-md border border-border/50 px-1.5 py-0.5 text-xs text-muted-foreground",
                 children: t
               },
               `t-${t}`

package/dist/tool-call-visualization/renderers/sql/DbSchemaInline.js

@@ -17,22 +17,22 @@ const DbSchemaInline = ({
     return /* @__PURE__ */ jsx(ToolErrorCard, { entry, onOpenOverlay, toolGroupId });
   }
   if (!isTerminal(entry)) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-1.5 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] animate-in fade-in", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-1.5 text-xs text-muted-foreground animate-in fade-in", children: [
       /* @__PURE__ */ jsx(Columns3, { className: "h-3.5 w-3.5 shrink-0" }),
       /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
         "Reading schema for",
         " ",
-        table ? /* @__PURE__ */ jsx("span", { className: "font-mono text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: table }) : "table"
+        table ? /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: table }) : "table"
       ] }),
       /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin" })
     ] });
   }
   const result = resultAsObject(entry);
   const rows = result && Array.isArray(result.rows) ? result.rows : null;
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))] p-3 space-y-2.5 animate-in fade-in", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card p-3 space-y-2.5 animate-in fade-in", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
+      /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-foreground", children: [
         "Schema \xB7 ",
         /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: table || "table" })
       ] }),
@@ -42,13 +42,13 @@ const DbSchemaInline = ({
         rows.length === 1 ? "column" : "columns"
       ] })
     ] }),
-    rows ? rows.length > 0 ? /* @__PURE__ */ jsx("div", { className: "min-w-0 border-t border-[color:var(--mx-chat-border,hsl(var(--border)))] pt-2", children: /* @__PURE__ */ jsx(ResultValue, { value: rows, density: "inline" }) }) : /* @__PURE__ */ jsxs("p", { className: "border-t border-[color:var(--mx-chat-border,hsl(var(--border)))] pt-2 text-xs italic text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+    rows ? rows.length > 0 ? /* @__PURE__ */ jsx("div", { className: "min-w-0 border-t border-border pt-2", children: /* @__PURE__ */ jsx(ResultValue, { value: rows, density: "inline" }) }) : /* @__PURE__ */ jsxs("p", { className: "border-t border-border pt-2 text-xs italic text-muted-foreground", children: [
       "No columns found for ",
       tableLabel,
       "."
     ] }) : entry.result != null ? (
       // Unexpected shape — surface it rather than hide it.
-      /* @__PURE__ */ jsx("div", { className: "min-w-0 border-t border-[color:var(--mx-chat-border,hsl(var(--border)))] pt-2", children: /* @__PURE__ */ jsx(ToolResultValue, { value: entry.result, density: "inline" }) })
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 border-t border-border pt-2", children: /* @__PURE__ */ jsx(ToolResultValue, { value: entry.result, density: "inline" }) })
     ) : null
   ] });
 };

package/dist/tool-call-visualization/renderers/sql/SqlInline.js

@@ -40,7 +40,7 @@ const SourceDisclosure = ({ label, children }) => {
       CollapsibleTrigger,
       {
         onClick: (e) => e.stopPropagation(),
-        className: "inline-flex items-center gap-1 text-[11px] font-medium 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-[11px] font-medium text-muted-foreground hover:text-foreground",
         children: [
           open ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
           open ? `Hide ${label}` : `Show ${label}`
@@ -92,15 +92,15 @@ const SqlInline = ({
   const idStrings = writeOutcome?.ids && writeOutcome.ids.every((v) => typeof v === "string") ? writeOutcome.ids : null;
   return /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2 animate-in fade-in", children: [
     resultRows && (resultRows.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
         resultRows.length,
         " ",
         rowWord(resultRows.length)
       ] }),
       /* @__PURE__ */ jsx(ResultValue, { value: resultRows, density: "inline" })
-    ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs italic text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No rows returned." })),
+    ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs italic text-muted-foreground", children: "No rows returned." })),
     !resultRows && writeOutcome && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+      /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
         writeOutcome.counts.map((c) => /* @__PURE__ */ jsxs("span", { children: [
           c.label,
           " ",

package/dist/tool-call-visualization/renderers/workbook/WorkbookGrid.js

@@ -15,7 +15,7 @@ function WorkbookGrid({
     rows.reduce((m, r) => Math.max(m, Array.isArray(r) ? r.length : 0), 0)
   );
   if (!rows.length || colCount === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Empty sheet" });
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-xs text-muted-foreground", children: "Empty sheet" });
   }
   const truncated = values.length > maxRows || rows.some((r) => Array.isArray(r) && r.length > maxCols);
   return /* @__PURE__ */ jsxs("div", { className: "overflow-auto", children: [
@@ -25,15 +25,15 @@ function WorkbookGrid({
         "td",
         {
           className: cn(
-            "sm:max-w-[220px] sm:truncate whitespace-nowrap border border-[color:var(--mx-chat-border,hsl(var(--border)))] px-2 py-1 text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
-            ci === 0 && "max-sm:sticky max-sm:left-0 max-sm:z-10 max-sm:bg-[var(--mx-chat-card,hsl(var(--card)))]"
+            "sm:max-w-[220px] sm:truncate whitespace-nowrap border border-border px-2 py-1 text-foreground",
+            ci === 0 && "max-sm:sticky max-sm:left-0 max-sm:z-10 max-sm:bg-card"
           ),
           children: cell == null ? "" : String(cell)
         },
         ci
       );
     }) }, ri)) }) }),
-    truncated ? /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+    truncated ? /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 text-[10px] text-muted-foreground", children: [
       "Showing ",
       rows.length,
       " \xD7 ",

package/dist/tool-call-visualization/renderers/workbook/WorkbookInline.js

@@ -35,7 +35,7 @@ function WorkbookInline({
               href: "/workbooks",
               target: "_blank",
               rel: "noopener noreferrer",
-              className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] underline underline-offset-2",
+              className: "font-medium text-foreground underline underline-offset-2",
               children: "/workbooks"
             }
           ),
@@ -75,7 +75,7 @@ function WorkbookInline({
       subtitle,
       actions,
       children: wb.firstSheet ? /* @__PURE__ */ jsxs("div", { children: [
-        wb.firstSheet.name ? /* @__PURE__ */ jsx("div", { className: "border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] px-3 py-1.5 text-[11px] font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: wb.firstSheet.name }) : null,
+        wb.firstSheet.name ? /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-1.5 text-[11px] font-medium text-muted-foreground", children: wb.firstSheet.name }) : null,
         /* @__PURE__ */ jsx(WorkbookGrid, { values: wb.firstSheet.values, maxRows: 6, maxCols: 6 })
       ] }) : null
     }

package/dist/tool-call-visualization/renderers/workbook/WorkbookOverlay.js

@@ -7,11 +7,11 @@ import { WorkbookGrid } from "./WorkbookGrid.js";
 function WorkbookOverlay({ entry }) {
   const wb = useMemo(() => parseWorkbook(entry), [entry]);
   const name = wb.name ?? "Workbook";
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden bg-[var(--mx-chat-card,hsl(var(--card)))]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] px-4 py-2", children: [
-      /* @__PURE__ */ jsx(Sheet, { className: "h-4 w-4 shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
-      /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: name }),
-      wb.firstSheet?.name ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden bg-card", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-4 py-2", children: [
+      /* @__PURE__ */ jsx(Sheet, { className: "h-4 w-4 shrink-0 text-primary" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: name }),
+      wb.firstSheet?.name ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
         "\xB7 ",
         wb.firstSheet.name
       ] }) : null,
@@ -21,7 +21,7 @@ function WorkbookOverlay({ entry }) {
           href: `/workbooks/${wb.id}`,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: "ml-auto inline-flex items-center gap-1.5 rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] px-3 py-1.5 text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] hover:bg-[var(--mx-chat-fill,hsl(var(--muted)))]",
+          className: "ml-auto inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted",
           children: [
             /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }),
             "Open full editor"
@@ -29,7 +29,7 @@ function WorkbookOverlay({ entry }) {
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: wb.firstSheet ? /* @__PURE__ */ jsx(WorkbookGrid, { values: wb.firstSheet.values, maxRows: 60, maxCols: 26 }) : /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No sheet data to preview." }) })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: wb.firstSheet ? /* @__PURE__ */ jsx(WorkbookGrid, { values: wb.firstSheet.values, maxRows: 60, maxCols: 26 }) : /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-sm text-muted-foreground", children: "No sheet data to preview." }) })
   ] });
 }
 export {

package/dist/tool-call-visualization/renderers/working-document/PatchDiffInline.js

@@ -41,7 +41,7 @@ const Paper = ({
   "div",
   {
     className: cn(
-      "max-h-96 w-full overflow-auto border border-border/50 bg-[var(--mx-chat-card,hsl(var(--card)))] px-5 py-4 shadow-xs",
+      "max-h-96 w-full overflow-auto border border-border/50 bg-card px-5 py-4 shadow-xs",
       // Attached: this sheet continues the ArtifactResultBar header above it —
       // square top, no top border, one continuous surface.
       attached ? "rounded-b-xl rounded-t-none border-t-0" : "rounded-xl"
@@ -87,12 +87,12 @@ const PatchDiffInline = (props) => {
   const isStructural = command !== null && STRUCTURAL_PATCH_COMMANDS.has(command);
   const hasText = after !== null && before !== null;
   if (isStructural || !hasText) {
-    return /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: isStructural ? "Structured update applied." : isTerminal(entry) ? "Updated." : "Updating\u2026" });
+    return /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: isStructural ? "Structured update applied." : isTerminal(entry) ? "Updated." : "Updating\u2026" });
   }
   const rewrite = isEffectivelyRewrite(before, after);
   return /* @__PURE__ */ jsx(Paper, { attached, children: rewrite ? (
     // Full rewrite (or fresh body): the final document, no highlights.
-    /* @__PURE__ */ jsx("div", { className: `whitespace-pre-wrap break-words text-[color:var(--mx-chat-text,hsl(var(--foreground)))] ${PAPER_TEXT}`, children: after })
+    /* @__PURE__ */ jsx("div", { className: `whitespace-pre-wrap break-words text-foreground ${PAPER_TEXT}`, children: after })
   ) : /* @__PURE__ */ jsx(
     AnimatedDiffReveal,
     {

package/dist/tool-call-visualization/result-fields/EmptyResult.js

@@ -12,7 +12,7 @@ const EmptyResult = ({
     "div",
     {
       className: cn(
-        "flex items-center gap-2 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+        "flex items-center gap-2 text-muted-foreground",
         full ? "flex-col justify-center py-10 text-sm" : "py-2 text-xs",
         className
       ),

package/dist/tool-call-visualization/result-fields/KeyValueGrid.js

@@ -80,7 +80,7 @@ function renderFieldValue(key, val, density, depth, embedMedia) {
   if (typeof val === "string") {
     const human = humanizeEnumValue(val);
     if (human) {
-      return /* @__PURE__ */ jsx("span", { className: "text-sm text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", title: val, children: human });
+      return /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", title: val, children: human });
     }
   }
   return /* @__PURE__ */ jsx(
@@ -99,7 +99,7 @@ const IdentifierListRow = ({
   ids
 }) => {
   const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
     /* @__PURE__ */ jsxs(Button, { variant: "quiet", onClick: (e) => {
       e.stopPropagation();
       setOpen((v) => !v);
@@ -122,7 +122,7 @@ function notApplicableSummary(names) {
 }
 const NotApplicableRow = ({ entries, labels, density, depth, embedMedia }) => {
   const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
     /* @__PURE__ */ jsxs(Button, { variant: "quiet", onClick: (e) => {
       e.stopPropagation();
       setOpen((v) => !v);
@@ -206,7 +206,7 @@ const KeyValueGridBody = ({
       /* @__PURE__ */ jsx(
         "dt",
         {
-          className: "truncate text-xs font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+          className: "truncate text-xs font-medium text-muted-foreground",
           title: fieldLabel(key, labels).description ?? key,
           children: fieldLabel(key, labels).label
         }
@@ -223,11 +223,11 @@ const KeyValueGridBody = ({
     chips.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: chips.map(([key, val]) => /* @__PURE__ */ jsxs(
       "span",
       {
-        className: "inline-flex items-center gap-1 rounded-md bg-[var(--mx-chat-fill,hsl(var(--muted)))] px-1.5 py-0.5 text-xs",
+        className: "inline-flex items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 text-xs",
         title: key,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: fieldLabel(key, labels).label }),
-          /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: formatMetaNumber(val) })
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: fieldLabel(key, labels).label }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums text-foreground", children: formatMetaNumber(val) })
         ]
       },
       key
@@ -236,7 +236,7 @@ const KeyValueGridBody = ({
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "text-xs font-medium leading-none text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+          className: "text-xs font-medium leading-none text-muted-foreground",
           title: fieldLabel(key, labels).description ?? key,
           children: fieldLabel(key, labels).label
         }
@@ -258,7 +258,7 @@ const KeyValueGridBody = ({
       },
       key
     )),
-    ids.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: ids.map(([key, val]) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+    ids.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: ids.map(([key, val]) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [
       fieldLabel(key, labels).label,
       /* @__PURE__ */ jsx(ShortId, { value: val })
     ] }, key)) }),

package/dist/tool-call-visualization/result-fields/ResultFile.js

@@ -76,14 +76,14 @@ const ResultFile = ({ file, density = "inline", className }) => {
     "div",
     {
       className: cn(
-        "inline-flex max-w-full items-center gap-3 rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))] px-3 py-2",
+        "inline-flex max-w-full items-center gap-3 rounded-md border border-border bg-card px-3 py-2",
         className
       ),
       children: [
         /* @__PURE__ */ jsx(FileIcon, { fileName: name, mimeType: file.mime_type ?? null, size: iconSize }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", title: name, children: name }),
-          metaParts.length > 0 ? /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] tabular-nums", children: metaParts.join(" \xB7 ") }) : null
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", title: name, children: name }),
+          metaParts.length > 0 ? /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground tabular-nums", children: metaParts.join(" \xB7 ") }) : null
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
           openHref ? /* @__PURE__ */ jsx(
@@ -95,7 +95,7 @@ const ResultFile = ({ file, density = "inline", className }) => {
               onClick: (e) => e.stopPropagation(),
               "aria-label": openLabel,
               title: openLabel,
-              className: "flex h-7 w-7 items-center justify-center rounded-md text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:bg-accent hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+              className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
               children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4", "aria-hidden": "true" })
             }
           ) : null,

package/dist/tool-call-visualization/result-fields/ResultJson.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { JsonInspector } from "../../host/ui-slots.js";
 import { KindDataGate } from "../../host/ui-slots.js";
 import { cn } from "@ai-matrx/design-system";
-const ResultJson = ({ data, className, showSource = false }) => /* @__PURE__ */ jsx(KindDataGate, { component: "ResultJson", data, showSource, children: /* @__PURE__ */ jsx("div", { className: cn("min-w-0 h-80 overflow-hidden rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))]", className), children: /* @__PURE__ */ jsx(JsonInspector, { data, showSource: true }) }) });
+const ResultJson = ({ data, className, showSource = false }) => /* @__PURE__ */ jsx(KindDataGate, { component: "ResultJson", data, showSource, children: /* @__PURE__ */ jsx("div", { className: cn("min-w-0 h-80 overflow-hidden rounded-md border border-border bg-card", className), children: /* @__PURE__ */ jsx(JsonInspector, { data, showSource: true }) }) });
 export {
   ResultJson
 };