@ai-matrx/chat 0.7.6 → 0.7.7

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "@ai-matrx/design-system";
 const ACCENT_ICON = {
-  primary: "text-primary",
+  primary: "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]",
   blue: "text-blue-600 dark:text-blue-400",
   violet: "text-violet-600 dark:text-violet-400",
   cyan: "text-cyan-600 dark:text-cyan-400",

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

@@ -16,7 +16,7 @@ import {
 import { cn } from "@ai-matrx/design-system";
 function ToolResultCard({
   icon: Icon,
-  iconClassName = "text-primary",
+  iconClassName = "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]",
   title,
   sub,
   children,
@@ -49,7 +49,7 @@ function ToolResultCard({
           }
         },
         className: cn(
-          "flex w-full cursor-pointer items-center gap-3 border border-border/50 bg-card px-4 py-2.5 text-left transition-colors hover:bg-accent/30",
+          "flex w-full cursor-pointer items-center gap-3 border border-border/50 bg-[var(--mx-chat-card,hsl(var(--card)))] px-4 py-2.5 text-left transition-colors hover:bg-accent/30",
           showBody ? "rounded-t-xl border-b-0" : "rounded-xl"
         ),
         children: [
@@ -61,8 +61,8 @@ function ToolResultCard({
             }
           ),
           /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "block break-words text-sm font-medium text-foreground sm:truncate", children: title }),
-            sub && /* @__PURE__ */ jsx("span", { className: "block break-words text-xs text-muted-foreground sm:truncate", children: sub })
+            /* @__PURE__ */ jsx("span", { className: "block break-words text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] sm:truncate", children: title }),
+            sub && /* @__PURE__ */ jsx("span", { className: "block break-words text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] sm:truncate", children: sub })
           ] }),
           headerAction && /* @__PURE__ */ jsx(
             "span",
@@ -81,7 +81,7 @@ function ToolResultCard({
                 tabIndex: 0,
                 onClick: (e) => e.stopPropagation(),
                 onKeyDown: (e) => e.stopPropagation(),
-                className: "flex min-h-11 shrink-0 cursor-pointer items-center gap-1.5 rounded-xl border border-border/70 bg-background/60 px-2.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground sm:min-h-0",
+                className: "flex min-h-11 shrink-0 cursor-pointer items-center gap-1.5 rounded-xl border border-border/70 bg-background/60 px-2.5 py-1.5 text-xs font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:bg-accent/40 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))] sm:min-h-0",
                 "aria-label": "Open options",
                 children: [
                   /* @__PURE__ */ jsx(PanelRightOpen, { className: "size-3.5" }),
@@ -124,7 +124,7 @@ function ToolResultCard({
         ]
       }
     ),
-    showBody && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-b-xl border border-t-0 border-border/50 bg-card", children })
+    showBody && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-b-xl border border-t-0 border-border/50 bg-[var(--mx-chat-card,hsl(var(--card)))]", children })
   ] });
 }
 var ToolResultCard_default = ToolResultCard;

package/dist/tool-call-visualization/renderers/agent-call/AgentCallInline.js

@@ -54,19 +54,19 @@ function ImageGenerationLoading() {
                 className: "absolute -inset-8 rotate-12 bg-[linear-gradient(110deg,transparent_35%,color-mix(in_oklab,var(--color-background)_80%,transparent)_50%,transparent_65%)] bg-[length:200%_100%]"
               }
             ),
-            /* @__PURE__ */ jsx(ImageIcon, { className: "relative h-8 w-8 text-primary" }),
+            /* @__PURE__ */ jsx(ImageIcon, { className: "relative h-8 w-8 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
             /* @__PURE__ */ jsx(Aperture, { className: "absolute right-2 top-2 h-4 w-4 text-violet-500 animate-pulse" }),
             /* @__PURE__ */ jsx("span", { className: "absolute bottom-2 left-2 h-1.5 w-1.5 rounded-full bg-cyan-400 shadow-[0_0_10px_2px_rgb(34_211_238_/_0.55)]" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2.5", children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Composing your image" }),
-              /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-relaxed text-muted-foreground", children: "Building the scene, details, lighting, and final finish." })
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "Composing your image" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Building the scene, details, lighting, and final finish." })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", "aria-hidden": "true", children: [0, 1, 2, 3].map((step) => /* @__PURE__ */ jsx(
               "span",
               {
-                className: "h-1 flex-1 overflow-hidden rounded-full bg-muted",
+                className: "h-1 flex-1 overflow-hidden rounded-full bg-[var(--mx-chat-fill,hsl(var(--muted)))]",
                 children: /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -94,7 +94,7 @@ function AgentCallLiveChild(props) {
   if (!requestId || !child || !child.text.trim()) {
     return /* @__PURE__ */ jsx(GenericRenderer, { ...props });
   }
-  return /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto rounded-md border border-border bg-background/60 px-3 py-2", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-background/60 px-3 py-2", children: /* @__PURE__ */ jsx(
     MarkdownStream,
     {
       imagePolicy: "ai",

package/dist/tool-call-visualization/renderers/agent-call/CollabCallCard.js

@@ -43,7 +43,7 @@ function CollabCallCard(props) {
   return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-xl border border-violet-500/20 bg-violet-500/[0.04] dark:bg-violet-400/[0.05]", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2", children: [
       /* @__PURE__ */ jsx(Handshake, { className: "h-4 w-4 shrink-0 text-violet-600 dark:text-violet-400" }),
-      /* @__PURE__ */ jsxs("span", { className: "min-w-0 text-sm font-medium text-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { className: "min-w-0 text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
         agentLabel,
         " ",
         isActive ? "is reviewing" : "reviewed",
@@ -68,14 +68,14 @@ function CollabCallCard(props) {
           label: MODE_CHIP[info.historyMode]
         }
       ),
-      info.messagesIncluded !== null && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      info.messagesIncluded !== null && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         info.messagesIncluded,
         " message",
         info.messagesIncluded === 1 ? "" : "s",
         " shared"
       ] })
     ] }),
-    showLiveStream && /* @__PURE__ */ jsx("div", { className: "mx-3 mb-2 max-h-64 overflow-y-auto rounded-md border border-border bg-background/60 px-3 py-2", children: /* @__PURE__ */ jsx(
+    showLiveStream && /* @__PURE__ */ jsx("div", { className: "mx-3 mb-2 max-h-64 overflow-y-auto rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-background/60 px-3 py-2", children: /* @__PURE__ */ jsx(
       MarkdownStream,
       {
         imagePolicy: "ai",
@@ -112,7 +112,7 @@ function CollabCallCard(props) {
               labelClassName: "text-xs"
             }
           ),
-          info.remember?.status === "queued" && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+          info.remember?.status === "queued" && /* @__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: [
             /* @__PURE__ */ jsx(Inbox, { className: "h-3.5 w-3.5 shrink-0 text-violet-600 dark:text-violet-400" }),
             "Note queued for ",
             isCurrentSource ? "this conversation" : sourceTitle ?? "the source conversation",

package/dist/tool-call-visualization/renderers/agent-call/ImageGenerationResult.js

@@ -41,7 +41,7 @@ const ImageGenerationResult = (props) => {
           e.stopPropagation();
           onOpenOverlay(`tool-group-${groupId}`);
         },
-        className: "group flex w-full items-center justify-between gap-2 rounded border border-border/60 px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground",
+        className: "group flex w-full items-center justify-between gap-2 rounded border border-border/60 px-2 py-1 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:border-primary/40 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
         children: [
           /* @__PURE__ */ jsx("span", { children: "View complete result" }),
           /* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3 shrink-0" })

package/dist/tool-call-visualization/renderers/ask/AskInline.js

@@ -117,10 +117,10 @@ const AskInline = (props) => {
         {
           className: cn("px-4 py-2", i > 0 && "border-t border-border/30"),
           children: [
-            /* @__PURE__ */ jsx("p", { className: "text-[13px] leading-snug text-foreground", children: qa.question }),
+            /* @__PURE__ */ jsx("p", { className: "text-[13px] leading-snug text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: qa.question }),
             /* @__PURE__ */ jsxs("p", { className: "mt-1 flex items-start gap-1.5 text-[13px] leading-snug", children: [
-              /* @__PURE__ */ jsx(CornerDownRight, { className: "mt-0.5 size-3 shrink-0 text-muted-foreground" }),
-              qa.answer !== null ? /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: qa.answer }) : /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: "Awaiting answer" })
+              /* @__PURE__ */ jsx(CornerDownRight, { className: "mt-0.5 size-3 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
+              qa.answer !== null ? /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: qa.answer }) : /* @__PURE__ */ jsx("span", { className: "italic text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Awaiting answer" })
             ] })
           ]
         },

package/dist/tool-call-visualization/renderers/ask-person/AskPersonInline.js

@@ -50,12 +50,12 @@ const AskPersonInline = (props) => {
     "No longer needed"
   ) : lookup.phase === "unreachable" ? "Could not load this ask" : null;
   const body = open ? /* @__PURE__ */ jsx("div", { "data-parked-ask": "", children: /* @__PURE__ */ jsx(ActionRequestInlineAnswer, { request: open, onAnswered: rereadConversation }) }) : lookup.phase === "unreachable" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 p-4", children: [
-    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
       "We could not reach your agent just now. Nothing was lost \u2014 try again.",
       /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
     ] }),
     /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: lookup.retry, children: "Try again" })
-  ] }) : lookup.phase === "closed" && cannotLook ? /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: "Open this ask from the chat to answer it." }) : lookup.phase === "closed" ? /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: isTerminal(entry) && !parked ? "Done \u2014 your agent has what it asked for." : "This ask is no longer open." }) : /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: sub });
+  ] }) : lookup.phase === "closed" && cannotLook ? /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Open this ask from the chat to answer it." }) : lookup.phase === "closed" ? /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: isTerminal(entry) && !parked ? "Done \u2014 your agent has what it asked for." : "This ask is no longer open." }) : /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: sub });
   if (!onToggleExpanded) {
     return /* @__PURE__ */ jsxs("div", { children: [
       open && open.render.form !== "questions" ? /* @__PURE__ */ jsx("p", { className: "px-4 pt-4 text-sm font-medium", children: open.render.title }) : null,

package/dist/tool-call-visualization/renderers/cloud-browser/CloudBrowserRunCard.js

@@ -52,7 +52,7 @@ function ActivityUrl({ url }) {
       target: "_blank",
       rel: "noopener noreferrer",
       onClick: (event) => event.stopPropagation(),
-      className: "inline-flex min-w-0 max-w-[min(22rem,48vw)] items-center gap-1 text-primary hover:underline",
+      className: "inline-flex min-w-0 max-w-[min(22rem,48vw)] items-center gap-1 text-[color:var(--mx-chat-accent,hsl(var(--primary)))] hover:underline",
       title: url,
       children: [
         /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
@@ -94,7 +94,7 @@ function CloudBrowserRunCard({
             {
               className: cn(
                 "min-w-0 truncate",
-                activity.isError ? "text-destructive" : "text-muted-foreground"
+                activity.isError ? "text-destructive" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]"
               ),
               title: activity.label,
               children: activity.label
@@ -106,12 +106,12 @@ function CloudBrowserRunCard({
       ] }, entries[index]?.callId ?? index);
     }) }),
     /* @__PURE__ */ jsxs("details", { className: "group/details mt-1.5 border-t border-border/40 pt-1.5", children: [
-      /* @__PURE__ */ jsxs("summary", { className: "flex w-fit cursor-pointer list-none items-center gap-1.5 rounded px-1 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ jsxs("summary", { className: "flex w-fit cursor-pointer list-none items-center gap-1.5 rounded px-1 py-0.5 text-[11px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:bg-accent/40 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))] [&::-webkit-details-marker]:hidden", children: [
         /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3" }),
         "Details"
       ] }),
       /* @__PURE__ */ jsx("div", { className: "mt-1.5 max-h-64 space-y-2 overflow-y-auto rounded-md bg-muted/30 p-2 scrollbar-thin", children: entries.map((entry, index) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsxs("p", { className: "mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("p", { className: "mb-1 text-[10px] font-medium uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
           "Step ",
           index + 1
         ] }),
@@ -121,7 +121,7 @@ function CloudBrowserRunCard({
   ] });
   if (compact) {
     return /* @__PURE__ */ jsxs("div", { className: cn("mb-1 w-full min-w-0", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-h-7 min-w-0 items-center gap-1.5 text-[12px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-h-7 min-w-0 items-center gap-1.5 text-[12px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         /* @__PURE__ */ jsx(Globe2, { className: "size-3.5 shrink-0 text-info" }),
         /* @__PURE__ */ jsx(Tile, { variant: "quiet", title: `Continued browsing \xB7 ${entries.length} actions`, end: expanded ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {}), onClick: onToggleExpanded, "aria-expanded": expanded, className: "min-w-0" }),
         latestUrl && /* @__PURE__ */ jsx("span", { className: "hidden min-w-0 flex-1 sm:block", children: /* @__PURE__ */ jsx(ActivityUrl, { url: latestUrl }) }),

package/dist/tool-call-visualization/renderers/ctx/CtxBatchInline.js

@@ -74,7 +74,7 @@ const CtxBatchInline = ({
     );
   }
   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(Layers, { className: "h-3.5 w-3.5 shrink-0" }),
       /* @__PURE__ */ jsx("span", { children: "Reviewing context" })
     ] });
@@ -86,10 +86,10 @@ const CtxBatchInline = ({
   const shown = parsed.results.slice(0, cap);
   const remaining = parsed.results.length - shown.length;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2 animate-in fade-in", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
       /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5 shrink-0" }),
       /* @__PURE__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums text-foreground", children: parsed.count }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: parsed.count }),
         " ",
         "of",
         " ",

package/dist/tool-call-visualization/renderers/ctx/CtxGetInline.js

@@ -49,12 +49,12 @@ const CtxGetInline = ({
     );
   }
   if (view.kind === "loading") {
-    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(Search, { className: "h-3.5 w-3.5 shrink-0" }),
       /* @__PURE__ */ jsxs("span", { children: [
         "Looking up",
         " ",
-        keyArg ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: contextEntryLabel({ key: keyArg }) }) : "context"
+        keyArg ? /* @__PURE__ */ jsx("span", { className: "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: contextEntryLabel({ key: keyArg }) }) : "context"
       ] })
     ] });
   }

package/dist/tool-call-visualization/renderers/ctx/CtxItemCard.js

@@ -52,16 +52,16 @@ const CtxItemCard = ({
     "div",
     {
       className: cn(
-        "rounded-lg border border-border bg-card p-3 space-y-2",
+        "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",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-[var(--mx-chat-fill,hsl(var(--muted)))] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }) }),
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: "min-w-0 truncate font-medium text-foreground",
+              className: "min-w-0 truncate font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
               title: showKey ? item.key : void 0,
               children: label
             }

package/dist/tool-call-visualization/renderers/ctx/CtxPatchInline.js

@@ -62,26 +62,26 @@ const CtxPatchConfirmation = ({
     );
   }
   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(FilePen, { className: "h-3.5 w-3.5 shrink-0" }),
       /* @__PURE__ */ jsxs("span", { children: [
         "Updating",
         " ",
-        data.key ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: contextEntryLabel({ key: data.key }) }) : "context"
+        data.key ? /* @__PURE__ */ jsx("span", { className: "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: contextEntryLabel({ key: data.key }) }) : "context"
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card p-3 space-y-2 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 animate-in fade-in", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-primary" }),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
         "Updated",
         " ",
         /* @__PURE__ */ jsx("span", { className: "font-medium", children: data.key ? contextEntryLabel({ key: data.key }) : "context" })
       ] }),
       data.command && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-auto font-mono font-normal", children: data.command })
     ] }),
-    data.preview != null && /* @__PURE__ */ jsx("div", { className: "min-w-0 border-t border-border pt-2", children: /* @__PURE__ */ jsx(ResultValue, { value: data.preview, density }) })
+    data.preview != null && /* @__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: data.preview, density }) })
   ] });
 };
 export {

package/dist/tool-call-visualization/renderers/dictionary/DictEntryList.js

@@ -6,18 +6,18 @@ function hasDetail(e) {
 }
 function DictPeekBody({ e }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-    e.pronunciation || e.ipa ? /* @__PURE__ */ jsxs("div", { className: "font-mono text-muted-foreground", children: [
+    e.pronunciation || e.ipa ? /* @__PURE__ */ jsxs("div", { className: "font-mono text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
       e.pronunciation ? `/${e.pronunciation}/` : "",
       e.ipa ? `  ${e.ipa}` : ""
     ] }) : null,
-    e.definition ? /* @__PURE__ */ jsx("div", { className: "text-foreground", children: e.definition }) : null,
-    e.soundsLike.length ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Sounds like:" }),
+    e.definition ? /* @__PURE__ */ jsx("div", { className: "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: e.definition }) : null,
+    e.soundsLike.length ? /* @__PURE__ */ jsxs("div", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "Sounds like:" }),
       " ",
       e.soundsLike.join(", ")
     ] }) : null,
-    e.category ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Category:" }),
+    e.category ? /* @__PURE__ */ jsxs("div", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "Category:" }),
       " ",
       e.category
     ] }) : null
@@ -27,16 +27,16 @@ function DictEntryList({ entries }) {
   return /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: entries.map((e, i) => {
     const row = /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 transition-colors hover:bg-muted/40", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: e.term }),
-        e.pronunciation ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: e.term }),
+        e.pronunciation ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
           "/",
           e.pronunciation,
           "/"
-        ] }) : e.ipa ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: e.ipa }) : null,
-        e.category ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: e.category }) : null
+        ] }) : e.ipa ? /* @__PURE__ */ jsx("span", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: e.ipa }) : null,
+        e.category ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 rounded-full bg-[var(--mx-chat-fill,hsl(var(--muted)))] px-1.5 py-0.5 text-[10px] font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: e.category }) : null
       ] }),
-      e.definition ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: e.definition }) : null,
-      e.soundsLike.length ? /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-[11px] text-muted-foreground", children: [
+      e.definition ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: e.definition }) : null,
+      e.soundsLike.length ? /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-[11px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         "Sounds like: ",
         e.soundsLike.join(", ")
       ] }) : null

package/dist/tool-call-visualization/renderers/dictionary/DictionaryOverlay.js

@@ -7,23 +7,23 @@ import { DictEntryList } from "./DictEntryList.js";
 function DictionaryOverlay({ entry }) {
   const { entries, level } = useMemo(() => parseDictionary(entry), [entry]);
   if (!entries.length) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No dictionary entries to display" });
+    return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No dictionary entries to display" });
   }
   return /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto bg-muted/30 p-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm font-medium text-foreground", children: [
-      /* @__PURE__ */ jsx(BookText, { className: "h-4 w-4 text-primary" }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
+      /* @__PURE__ */ jsx(BookText, { className: "h-4 w-4 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
       /* @__PURE__ */ jsxs("span", { children: [
         entries.length,
         " ",
         entries.length === 1 ? "term" : "terms"
       ] }),
-      level ? /* @__PURE__ */ jsxs("span", { className: "text-xs capitalize text-muted-foreground", children: [
+      level ? /* @__PURE__ */ jsxs("span", { className: "text-xs capitalize text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         "\xB7 ",
         level.replace(/_/g, " "),
         " dictionary"
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border bg-card", children: /* @__PURE__ */ jsx(DictEntryList, { entries }) })
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))]", children: /* @__PURE__ */ jsx(DictEntryList, { entries }) })
   ] });
 }
 export {

package/dist/tool-call-visualization/renderers/fs/FsInline.js

@@ -62,9 +62,9 @@ const FsEntryRow = ({
       withTopBorder && (indent ? "border-t border-border/20" : "border-t border-border/30")
     ),
     children: [
-      e.isDir ? /* @__PURE__ */ jsx(Folder, { className: "size-3.5 shrink-0 text-sky-600/70 dark:text-sky-400/70" }) : /* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-foreground", children: e.name }),
-      !e.isDir && e.size !== null && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: formatFileSize(e.size) })
+      e.isDir ? /* @__PURE__ */ jsx(Folder, { className: "size-3.5 shrink-0 text-sky-600/70 dark:text-sky-400/70" }) : /* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: e.name }),
+      !e.isDir && e.size !== null && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: formatFileSize(e.size) })
     ]
   }
 );
@@ -157,16 +157,16 @@ const FsBatchCard = ({ listings, className }) => {
             ),
             children: [
               /* @__PURE__ */ jsx(Folder, { className: "size-3.5 shrink-0 text-sky-600/70 dark:text-sky-400/70" }),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-[13px] text-foreground", children: [
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-[13px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
                 basename(l.path),
-                /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: l.path })
+                /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: l.path })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: countsLabel(l.entries) }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: countsLabel(l.entries) }),
               /* @__PURE__ */ jsx(
                 ChevronRight,
                 {
                   className: cn(
-                    "size-3 shrink-0 text-muted-foreground transition-transform",
+                    "size-3 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-transform",
                     open[i] && "rotate-90"
                   )
                 }

package/dist/tool-call-visualization/renderers/news-api/NewsInline.js

@@ -47,21 +47,21 @@ const NewsInline = ({
   const data = useMemo(() => parseNewsData(entry), [entry]);
   if (data.isLoading) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-3 animate-in fade-in", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin text-primary" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
         /* @__PURE__ */ jsxs("span", { children: [
           "Fetching news",
           data.query ? ` for "${data.query}"` : "",
           "..."
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-card border border-border overflow-hidden", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-full aspect-video bg-muted animate-pulse" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-[var(--mx-chat-card,hsl(var(--card)))] border border-[color:var(--mx-chat-border,hsl(var(--border)))] overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-full aspect-video bg-[var(--mx-chat-fill,hsl(var(--muted)))] animate-pulse" }),
         /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted animate-pulse rounded w-24" }),
-          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted animate-pulse rounded w-full" }),
-          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted animate-pulse rounded w-3/4" }),
-          /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted animate-pulse rounded w-20" })
+          /* @__PURE__ */ jsx("div", { className: "h-3 bg-[var(--mx-chat-fill,hsl(var(--muted)))] animate-pulse rounded w-24" }),
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-[var(--mx-chat-fill,hsl(var(--muted)))] animate-pulse rounded w-full" }),
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-[var(--mx-chat-fill,hsl(var(--muted)))] animate-pulse rounded w-3/4" }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 bg-[var(--mx-chat-fill,hsl(var(--muted)))] animate-pulse rounded w-20" })
         ] })
       ] }, i)) })
     ] });
@@ -74,7 +74,7 @@ const NewsInline = ({
     ] });
   }
   if (data.isComplete && data.articles.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-3", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] py-3", children: [
       /* @__PURE__ */ jsx(Newspaper, { className: "w-4 h-4 flex-shrink-0" }),
       /* @__PURE__ */ jsxs("span", { children: [
         "No articles found",
@@ -92,14 +92,14 @@ const NewsInline = ({
         href: article.url,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "group block bg-card rounded-lg border border-border overflow-hidden hover:border-primary/30 hover:shadow-md transition-all duration-200 animate-in fade-in zoom-in-95",
+        className: "group block bg-[var(--mx-chat-card,hsl(var(--card)))] rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] overflow-hidden hover:border-primary/30 hover:shadow-md transition-all duration-200 animate-in fade-in zoom-in-95",
         style: {
           animationDelay: `${index * 80}ms`,
           animationDuration: "300ms",
           animationFillMode: "backwards"
         },
         children: [
-          article.url_to_image ? /* @__PURE__ */ jsxs("div", { className: "relative w-full aspect-video bg-muted overflow-hidden", children: [
+          article.url_to_image ? /* @__PURE__ */ jsxs("div", { className: "relative w-full aspect-video bg-[var(--mx-chat-fill,hsl(var(--muted)))] overflow-hidden", children: [
             /* @__PURE__ */ jsx(
               "img",
               {
@@ -112,15 +112,15 @@ const NewsInline = ({
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" })
-          ] }) : /* @__PURE__ */ jsx("div", { className: "w-full aspect-video bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Newspaper, { className: "w-10 h-10 text-muted-foreground/30" }) }),
+          ] }) : /* @__PURE__ */ jsx("div", { className: "w-full aspect-video bg-[var(--mx-chat-fill,hsl(var(--muted)))] flex items-center justify-center", children: /* @__PURE__ */ jsx(Newspaper, { className: "w-10 h-10 text-muted-foreground/30" }) }),
           /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-1.5", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-primary truncate", children: article.source?.name }),
-              /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3 text-muted-foreground flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" })
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[color:var(--mx-chat-accent,hsl(var(--primary)))] truncate", children: article.source?.name }),
+              /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" })
             ] }),
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug", children: article.title }),
-            article.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: article.description }),
-            article.published_at && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))] line-clamp-2 group-hover:text-[color:var(--mx-chat-accent,hsl(var(--primary)))] transition-colors leading-snug", children: article.title }),
+            article.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] line-clamp-2", children: article.description }),
+            article.published_at && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
               /* @__PURE__ */ jsx(Calendar, { className: "w-3 h-3 flex-shrink-0" }),
               /* @__PURE__ */ jsx("span", { children: new Date(article.published_at).toLocaleDateString("en-US", {
                 month: "short",