@ai-matrx/chat 0.7.6 → 0.7.7

package/dist/tool-call-visualization/renderers/scrape/ScrapeInline.js

@@ -27,7 +27,7 @@ const Favicon = ({
   const [failed, setFailed] = useState(false);
   const src = url ? getFaviconUrl(url) : "";
   if (failed || !src)
-    return /* @__PURE__ */ jsx(Globe, { className: cn("text-muted-foreground", className) });
+    return /* @__PURE__ */ jsx(Globe, { className: cn("text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", className) });
   return (
     // eslint-disable-next-line @next/next/no-img-element -- favicon service, not owned media
     /* @__PURE__ */ jsx(
@@ -79,9 +79,9 @@ const PulsingDots = () => /* @__PURE__ */ jsxs("span", { className: "flex gap-0.
   )
 ] });
 const ContentSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-  /* @__PURE__ */ jsx("div", { className: "h-2.5 w-3/4 rounded bg-muted", style: { animation: "pulse 1.6s ease-in-out infinite" } }),
-  /* @__PURE__ */ jsx("div", { className: "h-2.5 w-full rounded bg-muted", style: { animation: "pulse 1.6s ease-in-out infinite 0.15s" } }),
-  /* @__PURE__ */ jsx("div", { className: "h-2.5 w-5/6 rounded bg-muted", style: { animation: "pulse 1.6s ease-in-out infinite 0.3s" } })
+  /* @__PURE__ */ jsx("div", { className: "h-2.5 w-3/4 rounded bg-[var(--mx-chat-fill,hsl(var(--muted)))]", style: { animation: "pulse 1.6s ease-in-out infinite" } }),
+  /* @__PURE__ */ jsx("div", { className: "h-2.5 w-full rounded bg-[var(--mx-chat-fill,hsl(var(--muted)))]", style: { animation: "pulse 1.6s ease-in-out infinite 0.15s" } }),
+  /* @__PURE__ */ jsx("div", { className: "h-2.5 w-5/6 rounded bg-[var(--mx-chat-fill,hsl(var(--muted)))]", style: { animation: "pulse 1.6s ease-in-out infinite 0.3s" } })
 ] });
 const PageCardHeader = ({ url, domain, reading }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
   /* @__PURE__ */ jsx(Favicon, { url, className: "h-4 w-4 flex-shrink-0" }),
@@ -98,9 +98,9 @@ const PageCardHeader = ({ url, domain, reading }) => /* @__PURE__ */ jsxs("div",
     }
   ),
   reading ? /* @__PURE__ */ jsxs("span", { className: "flex flex-shrink-0 items-center gap-1.5", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-primary", children: "Reading" }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[color:var(--mx-chat-accent,hsl(var(--primary)))]", children: "Reading" }),
     /* @__PURE__ */ jsx(PulsingDots, {})
-  ] }) : /* @__PURE__ */ jsx(BookOpenCheck, { className: "h-3.5 w-3.5 flex-shrink-0 text-primary" })
+  ] }) : /* @__PURE__ */ jsx(BookOpenCheck, { className: "h-3.5 w-3.5 flex-shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" })
 ] });
 const ReadingCard = ({
   url,
@@ -128,14 +128,14 @@ const ReadPageCard = ({ page, index, onOpen }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "animate-in fade-in slide-in-from-bottom-1 overflow-hidden rounded-lg border border-border bg-card",
+      className: "animate-in fade-in slide-in-from-bottom-1 overflow-hidden rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))]",
       style: {
         animationDelay: `${Math.min(index, 8) * 70}ms`,
         animationDuration: "280ms",
         animationFillMode: "backwards"
       },
       children: [
-        page.image && /* @__PURE__ */ jsx("div", { className: "relative h-32 w-full overflow-hidden border-b border-border bg-muted", children: /* @__PURE__ */ jsx(
+        page.image && /* @__PURE__ */ jsx("div", { className: "relative h-32 w-full overflow-hidden border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-fill,hsl(var(--muted)))]", children: /* @__PURE__ */ jsx(
           InlineMediaRef,
           {
             ref: { url: page.image },
@@ -157,16 +157,16 @@ const ReadPageCard = ({ page, index, onOpen }) => {
               target: "_blank",
               rel: "noopener noreferrer",
               onClick: (e) => e.stopPropagation(),
-              className: "block text-sm font-semibold leading-snug text-foreground hover:text-primary",
+              className: "block text-sm font-semibold leading-snug text-[color:var(--mx-chat-text,hsl(var(--foreground)))] hover:text-[color:var(--mx-chat-accent,hsl(var(--primary)))]",
               children: page.title
             }
           ),
           page.aiReview && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 rounded-md border border-primary/15 bg-primary/5 px-2 py-1.5", children: [
-            /* @__PURE__ */ jsx(AGENT_ICON, { className: "mt-0.5 h-3 w-3 flex-shrink-0 text-primary" }),
+            /* @__PURE__ */ jsx(AGENT_ICON, { className: "mt-0.5 h-3 w-3 flex-shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
             /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-foreground/85", children: page.aiReview })
           ] }),
-          snippet && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground", children: snippet }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-0.5 text-xs text-muted-foreground", children: [
+          snippet && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 whitespace-pre-wrap text-xs leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: snippet }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-0.5 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
             /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
               /* @__PURE__ */ jsx(FileText, { className: "h-3 w-3" }),
               formatCount(page.charCount),
@@ -227,8 +227,8 @@ const ScrapeInline = ({
     const pendingUrls = browsingUrls.filter((u) => !readUrls.has(u));
     const headerCount = browsingUrls.length || parsed.pages.length || 1;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-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: "h-4 w-4 animate-spin text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
         /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
           "Reading ",
           headerCount,
@@ -255,16 +255,16 @@ const ScrapeInline = ({
           },
           `reading-${url}-${i}`
         )) : parsed.pages.length === 0 && // No URLs known yet — a single tasteful "working" card.
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-lg border border-border bg-muted/20 px-3 py-3", children: [
-          /* @__PURE__ */ jsx(ScanText, { className: "h-4 w-4 flex-shrink-0 text-primary" }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Fetching page content\u2026" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/20 px-3 py-3", children: [
+          /* @__PURE__ */ jsx(ScanText, { className: "h-4 w-4 flex-shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Fetching page content\u2026" }),
           /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(PulsingDots, {}) })
         ] })
       ] })
     ] });
   }
   if (parsed.pages.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-2 text-sm text-muted-foreground", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-2 text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
       /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 flex-shrink-0" }),
       /* @__PURE__ */ jsx("span", { children: "No page content captured." })
     ] });

package/dist/tool-call-visualization/renderers/scrape/ScrapeOverlay.js

@@ -21,7 +21,7 @@ const Favicon = ({
   const [failed, setFailed] = useState(false);
   const src = url ? getFaviconUrl(url) : "";
   if (failed || !src)
-    return /* @__PURE__ */ jsx(Globe, { className: cn("text-muted-foreground", className) });
+    return /* @__PURE__ */ jsx(Globe, { className: cn("text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", className) });
   return (
     // eslint-disable-next-line @next/next/no-img-element -- favicon service, not owned media
     /* @__PURE__ */ jsx(
@@ -41,30 +41,30 @@ const ScrapeOverlay = ({ entry }) => {
   const [active, setActive] = useState(0);
   const current = pages[active];
   if (pages.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx(FileText, { className: "mx-auto mb-3 h-12 w-12 opacity-40" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No page content captured" })
     ] }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "h-full w-full overflow-hidden bg-background", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-2.5", children: [
-      /* @__PURE__ */ jsx(BookOpenText, { className: "h-4 w-4 text-primary" }),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-foreground", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/40 px-4 py-2.5", children: [
+      /* @__PURE__ */ jsx(BookOpenText, { className: "h-4 w-4 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
         "Pages read",
         " ",
-        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
           "(",
           pages.length,
           ")"
         ] })
       ] }),
-      parsed.totalChars > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-xs tabular-nums text-muted-foreground", children: [
+      parsed.totalChars > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-xs tabular-nums text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         formatCount(parsed.totalChars),
         " chars total"
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100%-3rem)] flex-col md:flex-row", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 divide-y divide-border/60 overflow-y-auto border-b border-border md:w-72 md:border-b-0 md:border-r", children: pages.map((p, i) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 divide-y divide-border/60 overflow-y-auto border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] md:w-72 md:border-b-0 md:border-r", children: pages.map((p, i) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -81,12 +81,12 @@ const ScrapeOverlay = ({ entry }) => {
                 {
                   className: cn(
                     "truncate text-xs font-medium",
-                    i === active ? "text-primary" : "text-foreground"
+                    i === active ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]"
                   ),
                   children: p.title || p.domain
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "truncate text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("div", { className: "truncate text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
                 p.domain,
                 " \xB7 ",
                 formatCount(p.charCount),
@@ -98,7 +98,7 @@ const ScrapeOverlay = ({ entry }) => {
         `${p.url}-${i}`
       )) }),
       /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 overflow-y-auto p-4", children: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        current.image && /* @__PURE__ */ jsx("div", { className: "relative mb-4 h-48 w-full overflow-hidden rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(
+        current.image && /* @__PURE__ */ jsx("div", { className: "relative mb-4 h-48 w-full overflow-hidden rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-fill,hsl(var(--muted)))]", children: /* @__PURE__ */ jsx(
           InlineMediaRef,
           {
             ref: { url: current.image },
@@ -111,7 +111,7 @@ const ScrapeOverlay = ({ entry }) => {
             className: "h-full w-full"
           }
         ) }),
-        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start gap-2 border-b border-border pb-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start gap-2 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] pb-3", children: [
           /* @__PURE__ */ jsx(
             Favicon,
             {
@@ -120,14 +120,14 @@ const ScrapeOverlay = ({ entry }) => {
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: current.title || current.domain }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: current.title || current.domain }),
             /* @__PURE__ */ jsxs(
               "a",
               {
                 href: current.url || void 0,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: "inline-flex items-center gap-1 text-xs text-primary hover:underline",
+                className: "inline-flex items-center gap-1 text-xs text-[color:var(--mx-chat-accent,hsl(var(--primary)))] hover:underline",
                 children: [
                   /* @__PURE__ */ jsx("span", { className: "truncate", children: current.url }),
                   /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 flex-shrink-0" })
@@ -137,11 +137,11 @@ const ScrapeOverlay = ({ entry }) => {
           ] })
         ] }),
         current.aiReview && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start gap-2 rounded-md border border-primary/15 bg-primary/5 p-3", children: [
-          /* @__PURE__ */ jsx(AGENT_ICON, { className: "mt-0.5 h-4 w-4 flex-shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx(AGENT_ICON, { className: "mt-0.5 h-4 w-4 flex-shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
           /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed text-foreground/90", children: current.aiReview })
         ] }),
-        current.content ? /* @__PURE__ */ jsx("div", { className: "text-sm", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "other", content: current.content }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No page content captured." })
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: [
+        current.content ? /* @__PURE__ */ jsx("div", { className: "text-sm", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "other", content: current.content }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No page content captured." })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-center text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         /* @__PURE__ */ jsx(FileText, { className: "mr-2 h-4 w-4" }),
         " Select a page"
       ] }) })

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

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