@ai-matrx/chat 0.7.5 → 0.7.7

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

@@ -42,7 +42,7 @@ const Favicon = ({
       "span",
       {
         className: cn(
-          "flex items-center justify-center bg-muted text-muted-foreground",
+          "flex items-center justify-center bg-[var(--mx-chat-fill,hsl(var(--muted)))] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
           className
         ),
         children: /* @__PURE__ */ jsx(Globe, { className: "h-1/2 w-1/2" })
@@ -67,7 +67,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-muted-foreground", children: [
+    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: [
       /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "\u203A" }),
       /* @__PURE__ */ jsx("span", { className: "truncate", children: seg })
     ] }, i))
@@ -82,11 +82,11 @@ const ResultRow = ({ source, index, onReadPage }) => {
       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-foreground", children: siteName })
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: siteName })
       ] }),
       body: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__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 })
+        /* @__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 })
       ] }),
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -103,11 +103,11 @@ const ResultRow = ({ source, index, onReadPage }) => {
                 Favicon,
                 {
                   url: source.url,
-                  className: "h-9 w-9 flex-shrink-0 rounded-full border border-border bg-card p-1.5"
+                  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"
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium leading-tight text-foreground", children: siteName }),
+                /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium leading-tight text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: siteName }),
                 /* @__PURE__ */ jsx(BreadcrumbPath, { url: source.url })
               ] })
             ] }),
@@ -120,13 +120,13 @@ const ResultRow = ({ source, index, onReadPage }) => {
                 onClick: (e) => e.stopPropagation(),
                 className: "group/link mt-1.5 flex items-start gap-1.5",
                 children: [
-                  /* @__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" })
+                  /* @__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" })
                 ]
               }
             ),
-            source.snippet && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-sm leading-relaxed text-muted-foreground", children: source.snippet }),
-            (date || onReadPage && source.url) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-3 text-xs text-muted-foreground", children: [
+            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 || onReadPage && source.url) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-3 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
               date && /* @__PURE__ */ jsx("span", { className: "opacity-80", children: date }),
               onReadPage && source.url && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(BookOpen, {}), onClick: (e) => {
                 e.stopPropagation();
@@ -148,8 +148,8 @@ const ViewAllButton = ({
 }, className: "w-full", children: label });
 const AnswerCard = ({ report, compact }) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-primary/15 bg-primary/5 p-3", children: [
   /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center gap-1.5", children: [
-    /* @__PURE__ */ jsx(Lightbulb, { className: "h-3.5 w-3.5 text-primary" }),
-    /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground", children: "AI Matrx answer" })
+    /* @__PURE__ */ jsx(Lightbulb, { className: "h-3.5 w-3.5 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "AI Matrx answer" })
   ] }),
   /* @__PURE__ */ jsx(
     "div",
@@ -189,7 +189,7 @@ const QueryHeader = ({
   {
     className: cn(
       "flex items-center gap-2 border-b pb-1.5",
-      muted ? "border-border/60" : "border-border"
+      muted ? "border-border/60" : "border-[color:var(--mx-chat-border,hsl(var(--border)))]"
     ),
     children: [
       /* @__PURE__ */ jsx(
@@ -197,7 +197,7 @@ const QueryHeader = ({
         {
           className: cn(
             "h-3.5 w-3.5 flex-shrink-0",
-            muted ? "text-muted-foreground" : "text-primary"
+            muted ? "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" : "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]"
           )
         }
       ),
@@ -206,13 +206,13 @@ const QueryHeader = ({
         {
           className: cn(
             "min-w-0 flex-1 truncate text-sm font-semibold",
-            muted ? "text-muted-foreground" : "text-foreground"
+            muted ? "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" : "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]"
           ),
           title: query,
           children: query
         }
       ),
-      /* @__PURE__ */ jsxs("span", { className: "flex-shrink-0 text-xs tabular-nums text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex-shrink-0 text-xs tabular-nums text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         count,
         " ",
         count === 1 ? "result" : "results"
@@ -234,14 +234,14 @@ const FoldedQuerySummary = ({ query, sources, onReadPage }) => {
   const chips = rest.slice(0, FOLD_CHIPS);
   const overflow = rest.length - chips.length;
   const topSite = getSiteName(top.url) || top.domain;
-  return /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in slide-in-from-bottom-1 space-y-2 rounded-lg border border-border bg-card/60 px-3 py-2.5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in slide-in-from-bottom-1 space-y-2 rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-card/60 px-3 py-2.5", children: [
     /* @__PURE__ */ jsx(QueryHeader, { query, count: sources.length, muted: true }),
     /* @__PURE__ */ jsxs("div", { className: "group/fold flex items-start gap-2.5", children: [
       /* @__PURE__ */ jsx(
         Favicon,
         {
           url: top.url,
-          className: "mt-0.5 h-6 w-6 flex-shrink-0 rounded-full border border-border bg-card p-1"
+          className: "mt-0.5 h-6 w-6 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"
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -252,7 +252,7 @@ const FoldedQuerySummary = ({ query, sources, onReadPage }) => {
             target: "_blank",
             rel: "noopener noreferrer",
             onClick: (e) => e.stopPropagation(),
-            className: "line-clamp-1 text-sm font-medium text-primary underline-offset-2 hover:underline",
+            className: "line-clamp-1 text-sm font-medium text-[color:var(--mx-chat-accent,hsl(var(--primary)))] underline-offset-2 hover:underline",
             children: top.title
           }
         ),
@@ -271,7 +271,7 @@ const FoldedQuerySummary = ({ query, sources, onReadPage }) => {
           target: "_blank",
           rel: "noopener noreferrer",
           onClick: (e) => e.stopPropagation(),
-          className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground",
+          className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-full border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-background px-2 py-0.5 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)))]",
           title: s.title,
           children: [
             /* @__PURE__ */ jsx(Favicon, { url: s.url, className: "h-3.5 w-3.5 flex-shrink-0 rounded-sm" }),
@@ -340,9 +340,9 @@ const SequentialQueryPlayer = ({ groups, revealKey, onReadPage }) => {
     )),
     activeGroup && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Telescope, { className: "h-4 w-4 flex-shrink-0 text-primary" }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", title: activeGroup.query, children: activeGroup.query }),
-        /* @__PURE__ */ jsxs("span", { className: "flex-shrink-0 text-xs tabular-nums text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Telescope, { className: "h-4 w-4 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: activeGroup.query, children: activeGroup.query }),
+        /* @__PURE__ */ jsxs("span", { className: "flex-shrink-0 text-xs tabular-nums text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
           currentIndex + 1,
           " of ",
           groups.length
@@ -372,8 +372,8 @@ const SingleQueryLive = ({ query, sources, revealKey, onReadPage }) => {
   });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsx(Telescope, { className: "h-4 w-4 flex-shrink-0 text-primary" }),
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium text-foreground", children: query ? `Searching \u201C${query}\u201D` : "Searching the web" }),
+      /* @__PURE__ */ jsx(Telescope, { className: "h-4 w-4 flex-shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: query ? `Searching \u201C${query}\u201D` : "Searching the web" }),
       /* @__PURE__ */ jsx(PulsingDots, {})
     ] }),
     sources.length > 0 ? /* @__PURE__ */ jsx(
@@ -385,12 +385,12 @@ const SingleQueryLive = ({ query, sources, revealKey, onReadPage }) => {
         onReadPage,
         limit: reveal.visibleCount
       }
-    ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-lg border border-border bg-muted/20 px-3 py-2.5", children: [
-      /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4 flex-shrink-0 text-primary" }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "Scanning the web for the best results\u2026" }),
+    ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/20 px-3 py-2.5", children: [
+      /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4 flex-shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Scanning the web for the best results\u2026" }),
       /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(PulsingDots, {}) })
     ] }),
-    reveal.isRevealing && sources.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-1 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("span", { children: [
+    reveal.isRevealing && sources.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-1 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: /* @__PURE__ */ jsxs("span", { children: [
       Math.min(reveal.visibleCount, sources.length),
       " of ",
       sources.length,

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-muted text-muted-foreground",
+          "flex items-center justify-center bg-[var(--mx-chat-fill,hsl(var(--muted)))] text-[color:var(--mx-chat-text-secondary,hsl(var(--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-muted-foreground", children: [
+    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: [
       /* @__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-foreground", children: siteName })
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: siteName })
       ] }),
       body: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__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 })
+        /* @__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 })
       ] }),
       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-border bg-card p-1.5"
+                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"
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium leading-tight text-foreground", children: siteName }),
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium leading-tight text-[color:var(--mx-chat-text,hsl(var(--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-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" })
+                /* @__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" })
               ]
             }
           ),
-          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 })
+          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 })
         ] })
       ] })
     }
@@ -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-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: [
+  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: [
         "Pages read ",
-        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--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-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-[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(
         "button",
         {
           type: "button",
@@ -143,7 +143,7 @@ const ReadingPane = ({ reads }) => {
                 {
                   className: cn(
                     "truncate text-xs font-medium",
-                    i === active ? "text-primary" : "text-foreground"
+                    i === active ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : "text-[color:var(--mx-chat-text,hsl(var(--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-border pb-3", 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__ */ 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-foreground", children: current.title ?? getDomain(current.url) }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--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-primary hover:underline",
+                className: "inline-flex items-center gap-1 text-xs text-[color:var(--mx-chat-accent,hsl(var(--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-muted-foreground", children: "No page content captured." })
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-center text-sm text-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-[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: [
         /* @__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-muted-foreground", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    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: [
       /* @__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-primary" }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "AI Matrx answer" })
+        /* @__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("div", { className: "text-sm leading-relaxed text-foreground/90", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "ai", content: report }) })
     ] }),
-    /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
       "About ",
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground tabular-nums", children: sources.length }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--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-foreground tabular-nums", children: queries.length }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] tabular-nums", children: queries.length }),
         " ",
         "queries"
       ] }),
@@ -243,7 +243,7 @@ const SearchOverlay = ({ entry }) => {
         " ",
         "\xB7",
         " ",
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground tabular-nums", children: reads.length }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--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-muted-foreground" }),
+          /* @__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(
             "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-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"
+              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"
             }
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4 text-[color:var(--mx-chat-text-secondary,hsl(var(--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-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: [
+        /* @__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: [
             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-foreground", children: activeQuery ? "Results for query" : "All results" }),
-        /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", 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: [
           visible.length,
           " ",
           visible.length === 1 ? "result" : "results"
         ] })
       ] }),
-      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}`)) })
+      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}`)) })
     ] })
   ] }) });
 };

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-muted-foreground"
+      tone === "bad" ? "font-medium text-red-600 dark:text-red-400" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--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-foreground"
+          stream === "stderr" ? "text-amber-700 dark:text-amber-400" : "text-[color:var(--mx-chat-text,hsl(var(--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-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-[color:var(--mx-chat-text-secondary,hsl(var(--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-foreground", children: h.label }),
-                h.type && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: h.type })
+                /* @__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 })
               ]
             },
             `${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-foreground", children: description }),
+          description && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line text-[13px] leading-relaxed text-[color:var(--mx-chat-text,hsl(var(--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-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground",
+                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)))]",
                 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-muted-foreground",
+                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)))]",
                 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-muted-foreground animate-in fade-in", children: [
+    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: [
       /* @__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-foreground", children: table }) : "table"
+        table ? /* @__PURE__ */ jsx("span", { className: "font-mono text-[color:var(--mx-chat-text,hsl(var(--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-border bg-card p-3 space-y-2.5 animate-in fade-in", children: [
+  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: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm text-foreground", 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: [
         "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-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: [
+    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: [
       "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-border pt-2", children: /* @__PURE__ */ jsx(ToolResultValue, { value: entry.result, density: "inline" }) })
+      /* @__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" }) })
     ) : 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-muted-foreground hover:text-foreground",
+        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)))]",
         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-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         resultRows.length,
         " ",
         rowWord(resultRows.length)
       ] }),
       /* @__PURE__ */ jsx(ResultValue, { value: resultRows, density: "inline" })
-    ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs italic text-muted-foreground", children: "No rows returned." })),
+    ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs italic text-[color:var(--mx-chat-text-secondary,hsl(var(--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-muted-foreground", 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: [
         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-muted-foreground", children: "Empty sheet" });
+    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" });
   }
   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-border px-2 py-1 text-foreground",
-            ci === 0 && "max-sm:sticky max-sm:left-0 max-sm:z-10 max-sm:bg-card"
+            "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)))]"
           ),
           children: cell == null ? "" : String(cell)
         },
         ci
       );
     }) }, ri)) }) }),
-    truncated ? /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 text-[10px] text-muted-foreground", children: [
+    truncated ? /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
       "Showing ",
       rows.length,
       " \xD7 ",