@ai-matrx/chat 0.7.5 → 0.7.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -30,7 +30,7 @@ const ResultMedia = ({
     "div",
     {
       className: cn(
-        "overflow-hidden rounded-md border border-border bg-card",
+        "overflow-hidden rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))]",
         density === "full" ? "w-full max-w-2xl" : "w-fit max-w-full",
         className
       ),
@@ -44,7 +44,7 @@ const ResultMedia = ({
             rel: "noopener noreferrer",
             onClick: (event) => event.stopPropagation(),
             "aria-label": "View in Files",
-            className: "flex items-center justify-center gap-1.5 border-t border-border px-2 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground",
+            className: "flex items-center justify-center gap-1.5 border-t border-[color:var(--mx-chat-border,hsl(var(--border)))] px-2 py-1.5 text-xs font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:bg-accent hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
             children: [
               /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
               /* @__PURE__ */ jsx("span", { children: "Open" })

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

@@ -7,9 +7,9 @@ const ResultScalar = ({ value, type, className }) => {
     return /* @__PURE__ */ jsx(Badge, { variant: value ? "success" : "neutral", className, children: value ? "Yes" : "No" });
   }
   if (type === "number") {
-    return /* @__PURE__ */ jsx("span", { className: cn("font-mono tabular-nums text-foreground", className), children: String(value) });
+    return /* @__PURE__ */ jsx("span", { className: cn("font-mono tabular-nums text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", className), children: String(value) });
   }
-  return /* @__PURE__ */ jsx("span", { className: cn("text-foreground break-words", className), children: String(value) });
+  return /* @__PURE__ */ jsx("span", { className: cn("text-[color:var(--mx-chat-text,hsl(var(--foreground)))] break-words", className), children: String(value) });
 };
 export {
   ResultScalar

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

@@ -111,7 +111,7 @@ const Cell = ({
 }) => {
   const mediaElementHint = mediaElementHintForKey(fieldKey);
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: "\u2014" });
+    return /* @__PURE__ */ jsx("span", { className: "italic text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "\u2014" });
   }
   if (typeof value === "string" && detectResultShape(value, { embedMedia }).kind === "media") {
     return /* @__PURE__ */ jsx(
@@ -150,7 +150,7 @@ const Cell = ({
     return /* @__PURE__ */ jsx("span", { className: "flex flex-wrap gap-1", children: value.map((item, i) => /* @__PURE__ */ jsx(
       "span",
       {
-        className: "rounded bg-muted px-1 py-px text-[11px] leading-tight text-muted-foreground",
+        className: "rounded bg-[var(--mx-chat-fill,hsl(var(--muted)))] px-1 py-px text-[11px] leading-tight text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
         children: String(item)
       },
       i
@@ -240,9 +240,9 @@ const ResultTable = ({
         onChange: (e) => setFilter(e.target.value),
         onClick: (e) => e.stopPropagation(),
         placeholder: `Filter ${rows.length} rows\u2026`,
-        className: "h-9 w-full max-w-xs rounded-md border border-border bg-background px-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-xs rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-background px-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("span", { className: "text-xs text-muted-foreground", children: [
+    ) : /* @__PURE__ */ jsxs("span", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
       rows.length,
       " ",
       rows.length === 1 ? "row" : "rows"
@@ -255,7 +255,7 @@ const ResultTable = ({
             "th",
             {
               className: cn(
-                "border-b border-border/60 px-2.5 py-1.5 text-left align-bottom text-[11px] font-medium text-muted-foreground",
+                "border-b border-border/60 px-2.5 py-1.5 text-left align-bottom text-[11px] font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
                 colIdx === 0 && MOBILE_TABLE_FROZEN_HEAD
               ),
               children: /* @__PURE__ */ jsxs(
@@ -266,7 +266,7 @@ const ResultTable = ({
                     e.stopPropagation();
                     cycleSort(col.key);
                   },
-                  className: "inline-flex items-center gap-1 hover:text-foreground",
+                  className: "inline-flex items-center gap-1 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
                   title: `Sort by ${col.label}`,
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "break-words", children: col.label }),
@@ -278,13 +278,13 @@ const ResultTable = ({
             col.key
           );
         }),
-        collapseTechnicalColumns ? /* @__PURE__ */ jsx("th", { className: "border-b border-border/60 px-2.5 py-1.5 text-left align-bottom text-[11px] font-medium text-muted-foreground", children: "Details" }) : null
+        collapseTechnicalColumns ? /* @__PURE__ */ jsx("th", { className: "border-b border-border/60 px-2.5 py-1.5 text-left align-bottom text-[11px] font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Details" }) : null
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: shown.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
         "td",
         {
           colSpan: visibleColumns.length + (collapseTechnicalColumns ? 1 : 0),
-          className: "px-3 py-4 text-center text-xs text-muted-foreground",
+          className: "px-3 py-4 text-center text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
           children: "No rows match the filter"
         }
       ) }) : shown.map((row, ri) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60 last:border-0 hover:bg-muted/30", children: [
@@ -292,7 +292,7 @@ const ResultTable = ({
           "td",
           {
             className: cn(
-              "px-2.5 py-1.5 align-top text-foreground",
+              "px-2.5 py-1.5 align-top text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
               colIdx === 0 && MOBILE_TABLE_FROZEN_CELL
             ),
             children: /* @__PURE__ */ jsx(
@@ -307,7 +307,7 @@ const ResultTable = ({
           },
           col.key
         )),
-        collapseTechnicalColumns ? /* @__PURE__ */ jsx("td", { className: "px-2.5 py-1.5 align-top text-foreground", children: /* @__PURE__ */ jsx(
+        collapseTechnicalColumns ? /* @__PURE__ */ jsx("td", { className: "px-2.5 py-1.5 align-top text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: /* @__PURE__ */ jsx(
           TechnicalDetailsCell,
           {
             row,

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

@@ -27,11 +27,11 @@ const InlineText = ({ value }) => {
   const lines = value.split("\n");
   const isLong = lines.length > INLINE_TEXT_LINES || value.length > 600;
   if (!isLong) {
-    return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: value });
+    return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: value });
   }
   const shown = expanded ? value : lines.slice(0, INLINE_TEXT_LINES).join("\n");
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: shown }),
+    /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: shown }),
     /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", onClick: (e) => {
       e.stopPropagation();
       setExpanded((v) => !v);
@@ -44,9 +44,9 @@ const ScalarList = ({ items, density }) => {
   const shown = items.slice(0, cap);
   const remaining = items.length - shown.length;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: shown.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2 text-sm text-foreground", children: [
-      /* @__PURE__ */ jsx("span", { className: "select-none text-muted-foreground", children: "\u2022" }),
-      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 break-words", children: typeof item === "string" && looksLikeMarkdown(item) ? /* @__PURE__ */ jsx(ResultMarkdown, { content: item, density }) : item === null ? /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: "null" }) : String(item) })
+    /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: shown.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2 text-sm text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
+      /* @__PURE__ */ jsx("span", { className: "select-none text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "\u2022" }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 break-words", children: typeof item === "string" && looksLikeMarkdown(item) ? /* @__PURE__ */ jsx(ResultMarkdown, { content: item, density }) : item === null ? /* @__PURE__ */ jsx("span", { className: "italic text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "null" }) : String(item) })
     ] }, i)) }),
     remaining > 0 && /* @__PURE__ */ jsxs(Button, { variant: "quiet", tone: "primary", onClick: (e) => {
       e.stopPropagation();
@@ -129,7 +129,7 @@ const ResultValue = ({
           ) : null
         ] });
       case "text":
-        return shape.markdown ? /* @__PURE__ */ jsx(ResultMarkdown, { content: shape.value, density }) : density === "full" ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: shape.value }) : /* @__PURE__ */ jsx(InlineText, { value: shape.value });
+        return shape.markdown ? /* @__PURE__ */ jsx(ResultMarkdown, { content: shape.value, density }) : density === "full" ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: shape.value }) : /* @__PURE__ */ jsx(InlineText, { value: shape.value });
       case "list":
         return /* @__PURE__ */ jsx(ScalarList, { items: shape.items, density });
       case "idList":
@@ -161,7 +161,7 @@ const ResultValue = ({
       case "recordRef":
         return /* @__PURE__ */ jsx(ResultRecordRef, { token: shape.token, id: shape.id, label: shape.label });
       case "textWithRecordRefs":
-        return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: shape.segments.map(
+        return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: shape.segments.map(
           (segment, index) => segment.type === "text" ? (
             // Position is the identity: a deterministic split of one string.
             /* @__PURE__ */ jsx(TextWithDoors, { text: segment.text }, `t${index}`)

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

@@ -28,9 +28,9 @@ const ShortId = ({
       timer.current = setTimeout(() => setCopied(false), 1500);
     });
   };
-  const display = variant === "full" ? /* @__PURE__ */ jsx("span", { className: "break-all font-mono text-xs text-foreground", children: value }) : /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs text-foreground", children: [
+  const display = variant === "full" ? /* @__PURE__ */ jsx("span", { className: "break-all font-mono text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: value }) : /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
     value.slice(0, 8),
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2026" })
+    /* @__PURE__ */ jsx("span", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "\u2026" })
   ] });
   return /* @__PURE__ */ jsxs(
     "span",
@@ -74,7 +74,7 @@ const IdListChip = ({
     "span",
     {
       className: cn(
-        "inline-flex items-center gap-1 text-xs text-muted-foreground",
+        "inline-flex items-center gap-1 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
         className
       ),
       children: [

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

@@ -48,21 +48,21 @@ const ToolErrorCard = ({
       className: cn(
         // Calm, not alarming: a quiet bordered row, muted icon — NOT red.
         // A tool error is a routine retry signal, not an app failure.
-        "flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2",
+        "flex items-center gap-2 rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/30 px-3 py-2",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 flex-shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: "flex-shrink-0 text-xs font-medium text-foreground",
+              className: "flex-shrink-0 text-xs font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
               title: routed?.tooltip,
               children: label
             }
           ),
-          detail && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-xs text-muted-foreground", children: detail })
+          detail && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: detail })
         ] }),
         onOpenOverlay && /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: (e) => {
           e.stopPropagation();

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

@@ -47,16 +47,16 @@ const UrlChip = ({ url, label, className }) => {
       onClick: (e) => e.stopPropagation(),
       title: href,
       className: cn(
-        "inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/50 px-2 py-1 text-xs text-foreground transition-colors hover:bg-accent",
+        "inline-flex max-w-full items-center gap-1.5 rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/50 px-2 py-1 text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] transition-colors hover:bg-accent",
         className
       ),
       children: [
         favicon ? (
           // eslint-disable-next-line @next/next/no-img-element -- tiny external favicon, not app media
           /* @__PURE__ */ jsx("img", { src: favicon, alt: "", width: 14, height: 14, className: "h-3.5 w-3.5 flex-shrink-0 rounded-sm" })
-        ) : /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" }),
+        ) : /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5 flex-shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
         /* @__PURE__ */ jsx("span", { className: "truncate", children: label ?? derived }),
-        /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 flex-shrink-0 text-muted-foreground opacity-60" })
+        /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 flex-shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] opacity-60" })
       ]
     }
   );

package/dist/tool-call-visualization/surface-write/SurfaceWriteDiff.js

@@ -44,7 +44,7 @@ function SurfaceWriteDiff({
   const language = diffLanguageOf(receipt);
   const heavy = !!language && !isMobile || receipt.before.length + receipt.after.length > LARGE_INPUT_CHARS;
   const canPreview = receipt.contentFormat === "markdown" || receipt.contentFormat === "text";
-  const slot = /* @__PURE__ */ jsxs("span", { className: "ml-1 inline-flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+  const slot = /* @__PURE__ */ jsxs("span", { className: "ml-1 inline-flex items-center gap-1.5 text-[11px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
     /* @__PURE__ */ jsx("span", { children: MODE_LABEL[receipt.mode] ?? "Changed" }),
     receipt.truncated ? /* @__PURE__ */ jsx(
       Badge,
@@ -62,7 +62,7 @@ function SurfaceWriteDiff({
       "data-surface-write-diff": "",
       "data-surface-write-mode": receipt.mode,
       className: cn(
-        "w-full overflow-hidden rounded-lg border border-border/60 bg-card text-[13px]",
+        "w-full overflow-hidden rounded-lg border border-border/60 bg-[var(--mx-chat-card,hsl(var(--card)))] text-[13px]",
         className
       ),
       children: preview ? /* @__PURE__ */ jsxs("div", { children: [

package/dist/tool-call-visualization/surface-write/SurfaceWriteStress.js

@@ -159,7 +159,7 @@ function SurfaceWriteStress() {
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full max-w-3xl flex-col gap-3 overflow-auto px-2 py-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: run, children: "Run 200 KB write" }),
-      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Streams 2 s, then the receipt lands (\u2248200 KB before and after)." })
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Streams 2 s, then the receipt lands (\u2248200 KB before and after)." })
     ] }),
     /* @__PURE__ */ jsx("div", { ref: hostRef, "data-stress-host": "", children: entry ? /* @__PURE__ */ jsx(ToolCallVisualization, { entries: [entry], hasContent: true }) : null })
   ] });

package/dist/tool-call-visualization/window-panel/ToolCallWindowPanel.js

@@ -53,7 +53,7 @@ const EntrySidebar = ({
   onLoadMore
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
-    conversationScopeAvailable && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-b border-border p-2", children: /* @__PURE__ */ jsxs(
+    conversationScopeAvailable && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] p-2", children: /* @__PURE__ */ jsxs(
       ToggleGroup,
       {
         type: "single",
@@ -90,7 +90,7 @@ const EntrySidebar = ({
         className: "m-2",
         onRetry
       }
-    ) : entries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-xs italic text-muted-foreground", children: loadingMore ? "Loading tool calls\u2026" : "No tool entries" }) : entries.map((entry, idx) => {
+    ) : entries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-xs italic text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: loadingMore ? "Loading tool calls\u2026" : "No tool entries" }) : entries.map((entry, idx) => {
       const isActive = entry.callId === selectedCallId;
       const label = getToolDisplayName(entry.toolName);
       const isError = entry.status === "error";
@@ -103,7 +103,7 @@ const EntrySidebar = ({
           onClick: () => onSelect(entry.callId),
           className: cn(
             "mx-1 flex items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs transition-colors",
-            isActive ? "border-primary/30 bg-primary/10 text-foreground" : "border-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
+            isActive ? "border-primary/30 bg-primary/10 text-[color:var(--mx-chat-text,hsl(var(--foreground)))]" : "border-transparent text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:bg-[var(--mx-chat-fill,hsl(var(--muted)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]"
           ),
           title: `${label} \u2014 ${entry.status}`,
           children: [
@@ -112,7 +112,7 @@ const EntrySidebar = ({
               "."
             ] }),
             /* @__PURE__ */ jsx("span", { className: "flex-1 truncate font-medium", children: label }),
-            /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: isError ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-destructive" }) : isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-primary" }) : isComplete ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-3 w-3 text-success" }) : /* @__PURE__ */ jsx("span", { className: "block h-2 w-2 rounded-full bg-muted-foreground/40" }) })
+            /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: isError ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-destructive" }) : isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }) : isComplete ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-3 w-3 text-success" }) : /* @__PURE__ */ jsx("span", { className: "block h-2 w-2 rounded-full bg-muted-foreground/40" }) })
           ]
         },
         entry.callId
@@ -127,7 +127,7 @@ const EntrySidebar = ({
         onRetry: hasMore ? onLoadMore : onRetry
       }
     ),
-    scope === "conversation" && (hasMore || loadingMore) && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t border-border p-1.5", children: /* @__PURE__ */ jsx(
+    scope === "conversation" && (hasMore || loadingMore) && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t border-[color:var(--mx-chat-border,hsl(var(--border)))] p-1.5", children: /* @__PURE__ */ jsx(
       Button,
       {
         variant: "quiet",
@@ -161,7 +161,7 @@ const ToolBrowserTabBar = ({ tabs, activeTabId, onTabClick }) => {
       ref: scrollRef,
       role: "tablist",
       "aria-label": "Tool result views",
-      className: "flex h-[34px] min-h-[34px] shrink-0 items-stretch overflow-x-auto overflow-y-hidden border-b border-border bg-muted/40",
+      className: "flex h-[34px] min-h-[34px] shrink-0 items-stretch overflow-x-auto overflow-y-hidden border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/40",
       style: { scrollbarWidth: "none" },
       children: [
         tabs.map((tab) => {
@@ -174,8 +174,8 @@ const ToolBrowserTabBar = ({ tabs, activeTabId, onTabClick }) => {
               "data-active": isActive,
               onClick: () => onTabClick(tab.id),
               className: cn(
-                "relative flex h-full shrink-0 cursor-pointer select-none items-center gap-1.5 border-r border-border px-3 transition-colors",
-                isActive ? "bg-background text-foreground" : "bg-transparent text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                "relative flex h-full shrink-0 cursor-pointer select-none items-center gap-1.5 border-r border-[color:var(--mx-chat-border,hsl(var(--border)))] px-3 transition-colors",
+                isActive ? "bg-background text-[color:var(--mx-chat-text,hsl(var(--foreground)))]" : "bg-transparent text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:bg-muted/60 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]"
               ),
               children: [
                 isActive && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-0 h-[2px] bg-primary" }),
@@ -352,7 +352,7 @@ const ToolCallWindowPanelBody = ({
         what: "this conversation's tool calls",
         onRetry: retryConversationEntries
       }
-    ) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) });
+    ) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) });
     const adminTabs = [
       {
         id: "input",