@ai-matrx/chat 0.7.5 → 0.7.7

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@ai-matrx/design-system";
+import { Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn } from "@ai-matrx/design-system";
 import { MarkdownStream } from "../../ui/markdown-stream/MarkdownStream.js";
 import { formatFileSize } from "@ai-matrx/kit/format";
 import { Globe } from "lucide-react";
@@ -68,7 +68,7 @@ const Base64Image = ({ value, className }) => {
         className: "max-h-[28rem] w-full rounded-md border border-border/40 object-contain"
       }
     ),
-    meta && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground", children: meta })
+    meta && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: meta })
   ] });
 };
 function toDataUri(value) {
@@ -115,23 +115,14 @@ function formatToMime(format) {
   if (f === "gif") return "image/gif";
   return `image/${f}`;
 }
-const Badge = ({ value, className }) => /* @__PURE__ */ jsx(
-  "span",
-  {
-    className: cn(
-      "inline-flex rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground",
-      className
-    ),
-    children: String(value ?? "")
-  }
-);
+const BadgeField = ({ value, className }) => /* @__PURE__ */ jsx(Badge, { variant: "neutral", className, children: String(value ?? "") });
 const Chips = ({ value, className }) => {
   const items = Array.isArray(value) ? value.map((v) => v == null ? "" : String(v)).filter(Boolean) : value == null ? [] : [String(value)];
   if (items.length === 0) return null;
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-1", className), children: items.map((item, i) => /* @__PURE__ */ jsx(
     "span",
     {
-      className: "inline-flex rounded-md border border-border/50 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px] text-foreground",
+      className: "inline-flex rounded-md border border-border/50 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
       children: item
     },
     `${item}-${i}`
@@ -160,16 +151,16 @@ const TabCard = ({ value, className }) => {
             className: "size-5 shrink-0 rounded-sm object-contain",
             onError: () => setFaviconErr(true)
           }
-        ) : /* @__PURE__ */ jsx(Globe, { className: "size-5 shrink-0 text-muted-foreground" }),
+        ) : /* @__PURE__ */ jsx(Globe, { className: "size-5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
-          title && /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] font-medium text-foreground", children: title }),
+          title && /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
           url && /* @__PURE__ */ jsx(
             "a",
             {
               href: url,
               target: "_blank",
               rel: "noreferrer noopener",
-              className: "block truncate text-[10px] text-muted-foreground hover:text-foreground hover:underline",
+              className: "block truncate text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))] hover:underline",
               onClick: (e) => e.stopPropagation(),
               children: url
             }
@@ -179,7 +170,7 @@ const TabCard = ({ value, className }) => {
     }
   );
 };
-const Table = ({ value, className }) => {
+const ExtractTableField = ({ value, className }) => {
   if (value == null || typeof value !== "object") return null;
   const obj = value;
   const columns = Array.isArray(obj.columns) ? obj.columns : [];
@@ -194,37 +185,24 @@ const Table = ({ value, className }) => {
     });
   });
   if (visibleCols.length === 0) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn("overflow-auto rounded-md border border-border/40 bg-background/40", className),
-      children: [
-        /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-[11px]", children: [
-          /* @__PURE__ */ jsx("thead", { className: "bg-muted/40", children: /* @__PURE__ */ jsx("tr", { children: visibleCols.map((c) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              className: "border-b border-border/40 px-2 py-1 text-left font-medium text-muted-foreground",
-              children: (c.path ?? []).join(" \u203A ")
-            },
-            c.index
-          )) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: rows.map((r, ri) => /* @__PURE__ */ jsx("tr", { className: "border-t border-border/20 hover:bg-muted/30", children: visibleCols.map((c) => {
-            const cell = r.cells?.[c.index];
-            return /* @__PURE__ */ jsx(
-              "td",
-              {
-                className: "max-w-[20rem] truncate px-2 py-1 align-top text-foreground",
-                title: typeof cell?.value === "string" ? cell.value : void 0,
-                children: typeof cell?.value === "string" ? cell.value : cell?.value == null ? "" : String(cell.value)
-              },
-              c.index
-            );
-          }) }, r.index ?? ri)) })
-        ] }),
-        obj.truncated === true && /* @__PURE__ */ jsx("div", { className: "border-t border-border/30 bg-muted/30 px-2 py-1 text-[10px] text-muted-foreground", children: "Table was truncated" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-md border border-border/40", className), children: [
+    /* @__PURE__ */ jsxs(Table, { size: "sm", children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: visibleCols.map((c) => /* @__PURE__ */ jsx(TableHead, { children: (c.path ?? []).join(" \u203A ") }, c.index)) }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: rows.map((r, ri) => /* @__PURE__ */ jsx(TableRow, { children: visibleCols.map((c) => {
+        const cell = r.cells?.[c.index];
+        return /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            className: "max-w-[20rem] truncate align-top",
+            title: typeof cell?.value === "string" ? cell.value : void 0,
+            children: typeof cell?.value === "string" ? cell.value : cell?.value == null ? "" : String(cell.value)
+          },
+          c.index
+        );
+      }) }, r.index ?? ri)) })
+    ] }),
+    obj.truncated === true && /* @__PURE__ */ jsx("div", { className: "border-t border-border/30 bg-muted/30 px-2 py-1 text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Table was truncated" })
+  ] });
 };
 const fieldComponents = {
   BoldLabel,
@@ -234,10 +212,10 @@ const fieldComponents = {
   Json,
   Image,
   Base64Image,
-  Badge,
+  Badge: BadgeField,
   Chips,
   TabCard,
-  Table
+  Table: ExtractTableField
 };
 export {
   fieldComponents

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

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

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

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

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

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

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

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