@ai-matrx/chat 0.7.6 → 0.7.7

package/dist/agents/components/messages-display/user/UserMessageAttachmentStyleComparison.js

@@ -46,16 +46,16 @@ function SentMessageChip({ spec }) {
 function ThumbnailTile({ spec }) {
   const Icon = COMPARISON_ICONS[spec.id] ?? FileText;
   const isImage = spec.id === "image-legacy";
-  return /* @__PURE__ */ jsx("div", { className: "relative rounded-lg overflow-hidden border border-border shrink-0", children: isImage ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "relative rounded-lg overflow-hidden border border-[color:var(--mx-chat-border,hsl(var(--border)))] shrink-0", children: isImage ? /* @__PURE__ */ jsx(
     "div",
     {
       className: "h-10 w-10 bg-gradient-to-br from-blue-100 to-indigo-200 dark:from-blue-950/60 dark:to-indigo-900/40 flex items-center justify-center",
       title: spec.title,
       children: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4 text-blue-600 dark:text-blue-400" })
     }
-  ) : /* @__PURE__ */ jsxs("div", { className: "h-10 w-12 flex flex-col items-center justify-center bg-muted py-1", children: [
-    /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-muted-foreground mb-1" }),
-    /* @__PURE__ */ jsx("span", { className: "text-[8px] text-muted-foreground text-center truncate w-full px-1", children: spec.title })
+  ) : /* @__PURE__ */ jsxs("div", { className: "h-10 w-12 flex flex-col items-center justify-center bg-[var(--mx-chat-fill,hsl(var(--muted)))] py-1", children: [
+    /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] mb-1" }),
+    /* @__PURE__ */ jsx("span", { className: "text-[8px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] text-center truncate w-full px-1", children: spec.title })
   ] }) });
 }
 function ComparisonColumn({
@@ -67,14 +67,14 @@ function ComparisonColumn({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 space-y-0.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
-        badge ? /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground bg-muted px-1.5 py-0.5 rounded border border-border", children: badge }) : null
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
+        badge ? /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] bg-[var(--mx-chat-fill,hsl(var(--muted)))] px-1.5 py-0.5 rounded border border-[color:var(--mx-chat-border,hsl(var(--border)))]", children: badge }) : null
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground font-mono", children: source })
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] font-mono", children: source })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "bg-muted border border-border rounded-lg px-2 py-2 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-[var(--mx-chat-fill,hsl(var(--muted)))] border border-[color:var(--mx-chat-border,hsl(var(--border)))] rounded-lg px-2 py-2 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
       children,
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap pt-1", children: "Can you review these attachments and summarize next steps?" })
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap pt-1", children: "Can you review these attachments and summarize next steps?" })
     ] }) })
   ] });
 }
@@ -84,8 +84,8 @@ function UserMessageAttachmentStyleComparison({
 }) {
   return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Side-by-side: attachment styles" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-2 max-w-3xl", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))] border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] pb-2", children: "Side-by-side: attachment styles" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] mt-2 max-w-3xl", children: [
         "Same six fake resources in each column. Input bar and sent messages both use ",
         /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "ResourceAttachmentTile" }),
         " ",
@@ -120,7 +120,7 @@ function UserMessageAttachmentStyleComparison({
                 conversationId: inputChipsConversationId
               }
             ) }),
-            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
               "Hover for previews. Use the corner Remove control. Image/audio with",
               " ",
               /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "file_id" }),

package/dist/agents/components/messages-display/user/UserMessageChipsDemo.js

@@ -119,17 +119,17 @@ function DemoBubble({
 }) {
   return /* @__PURE__ */ jsxs("section", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
-      description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description }) : null
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] mt-0.5", children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "bg-muted border border-border rounded-lg px-2 py-2 max-w-md", children: /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children }) })
+    /* @__PURE__ */ jsx("div", { className: "bg-[var(--mx-chat-fill,hsl(var(--muted)))] border border-[color:var(--mx-chat-border,hsl(var(--border)))] rounded-lg px-2 py-2 max-w-md", children: /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children }) })
   ] });
 }
 function DemoAttachmentChip({ spec }) {
   const Icon = ATTACHMENT_ICONS[spec.id] ?? FileText;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
     /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(Icon, {}), title: spec.title, children: spec.title }),
-    spec.note ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: spec.note }) : null
+    spec.note ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: spec.note }) : null
   ] });
 }
 function UserMessageChipsDemo() {
@@ -146,8 +146,8 @@ function UserMessageChipsDemo() {
   }, [dispatch]);
   return /* @__PURE__ */ jsx("div", { className: "min-h-dvh bg-textured", children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-4 py-8 space-y-10", children: [
     /* @__PURE__ */ jsxs("header", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-foreground", children: "User Message Chips" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "User Message Chips" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         "Production tiles in",
         " ",
         /* @__PURE__ */ jsx("code", { className: "text-xs", children: "AgentUserMessage" }),
@@ -175,7 +175,7 @@ function UserMessageChipsDemo() {
               parts: SUBMITTED_ATTACHMENT_PARTS
             }
           ),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Please turn the attached research into an infographic prompt." })
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap", children: "Please turn the attached research into an infographic prompt." })
         ]
       }
     ),
@@ -188,7 +188,7 @@ function UserMessageChipsDemo() {
     ),
     /* @__PURE__ */ jsx(UserMessageHybridTileSamples, { specs: DEMO_COMPARISON_ATTACHMENTS }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Context policies" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))] border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] pb-2", children: "Context policies" }),
       /* @__PURE__ */ jsxs(
         DemoBubble,
         {
@@ -203,7 +203,7 @@ function UserMessageChipsDemo() {
                 entries: [DEMO_SINGLE_ENTRY]
               }
             ),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Can you go ahead and get this working document ready?" })
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap", children: "Can you go ahead and get this working document ready?" })
           ]
         }
       ),
@@ -221,14 +221,14 @@ function UserMessageChipsDemo() {
                 entries: DEMO_MULTI_ENTRIES
               }
             ),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Here is everything attached \u2014 open the popover to browse each slot." })
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap", children: "Here is everything attached \u2014 open the popover to browse each slot." })
           ]
         }
       ),
       /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "All context types" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "All context types" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] mt-0.5", children: [
             "One bubble per",
             " ",
             /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "ContextObjectType" }),
@@ -247,7 +247,7 @@ function UserMessageChipsDemo() {
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Resource attachments" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))] border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] pb-2", children: "Resource attachments" }),
       /* @__PURE__ */ jsxs(
         DemoBubble,
         {
@@ -261,7 +261,7 @@ function UserMessageChipsDemo() {
                 size: "xs"
               }
             ) }),
-            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
               "Fake UUID above \u2014 shows \u201CUnknown file\u201D fallback until a real file is in Redux. Swap in a real",
               " ",
               /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "file_id" }),
@@ -272,8 +272,8 @@ function UserMessageChipsDemo() {
       ),
       /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Legacy block chips" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "Legacy block chips" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] mt-0.5", children: [
             "Notes, tasks, webpages, tables, etc. \u2014 per-type pill + modal on click. Styled to match",
             " ",
             /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "AttachmentChip" }),
@@ -287,14 +287,14 @@ function UserMessageChipsDemo() {
             className: "max-w-lg",
             children: [
               /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: DEMO_LEGACY_ATTACHMENTS.map((spec) => /* @__PURE__ */ jsx(DemoAttachmentChip, { spec }, spec.id)) }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Mixed attachments above a text line \u2014 same layout as production." })
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap", children: "Mixed attachments above a text line \u2014 same layout as production." })
             ]
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Combined (production layout)" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))] border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] pb-2", children: "Combined (production layout)" }),
       /* @__PURE__ */ jsxs(
         DemoBubble,
         {
@@ -323,7 +323,7 @@ function UserMessageChipsDemo() {
                 spec.id
               );
             }) }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap", children: "Can you go ahead and get this working document ready with the content and then let's talk about it?" })
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap", children: "Can you go ahead and get this working document ready with the content and then let's talk about it?" })
           ]
         }
       )

package/dist/agents/components/messages-display/user/UserMessageHybridTileSamples.js

@@ -107,7 +107,7 @@ function HybridTileStacked({ spec }) {
       ),
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center min-h-0 p-1.5", children: isImage ? /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-gradient-to-br from-blue-200/80 to-indigo-300/60 dark:from-blue-800/50 dark:to-indigo-900/40 flex items-center justify-center", children: /* @__PURE__ */ jsx(ImageIcon, { className: cn("h-5 w-5", theme.icon) }) }) : /* @__PURE__ */ jsx(TileIcon, { spec, className: "h-5 w-5" }) }),
-        /* @__PURE__ */ jsx("div", { className: "px-1.5 py-1 border-t border-border/40 bg-background/30 dark:bg-black/10", children: /* @__PURE__ */ jsx("span", { className: "block text-[10px] leading-tight font-medium text-foreground text-center truncate", children: truncateLabel(spec.title, 12) }) })
+        /* @__PURE__ */ jsx("div", { className: "px-1.5 py-1 border-t border-border/40 bg-background/30 dark:bg-black/10", children: /* @__PURE__ */ jsx("span", { className: "block text-[10px] leading-tight font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] text-center truncate", children: truncateLabel(spec.title, 12) }) })
       ]
     }
   );
@@ -127,8 +127,8 @@ function HybridTileHorizontal({ spec }) {
       children: [
         /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-background/40 dark:bg-black/15", children: /* @__PURE__ */ jsx(TileIcon, { spec, className: "h-3.5 w-3.5" }) }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 text-left", children: [
-          /* @__PURE__ */ jsx("span", { className: "block text-[9px] uppercase tracking-wide text-muted-foreground leading-none mb-0.5", children: spec.label }),
-          /* @__PURE__ */ jsx("span", { className: "block text-[10px] font-medium text-foreground leading-tight truncate", children: truncateLabel(spec.title, 16) })
+          /* @__PURE__ */ jsx("span", { className: "block text-[9px] uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] leading-none mb-0.5", children: spec.label }),
+          /* @__PURE__ */ jsx("span", { className: "block text-[10px] font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] leading-tight truncate", children: truncateLabel(spec.title, 16) })
         ] })
       ]
     }
@@ -177,7 +177,7 @@ function HybridTileStackedRowsBase({
             {
               className: cn(
                 config.typeClass,
-                "min-w-0 flex-1 truncate whitespace-nowrap text-muted-foreground uppercase tracking-wide"
+                "min-w-0 flex-1 truncate whitespace-nowrap text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] uppercase tracking-wide"
               ),
               children: spec.label
             }
@@ -188,7 +188,7 @@ function HybridTileStackedRowsBase({
           {
             className: cn(
               config.titleClass,
-              "block w-full min-w-0 truncate whitespace-nowrap text-foreground font-medium"
+              "block w-full min-w-0 truncate whitespace-nowrap text-[color:var(--mx-chat-text,hsl(var(--foreground)))] font-medium"
             ),
             children: spec.title
           }
@@ -367,8 +367,8 @@ function HybridTileWide({ spec }) {
       children: [
         /* @__PURE__ */ jsx(TileIcon, { spec, className: "h-4 w-4 mt-0.5" }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "block text-[9px] font-medium text-muted-foreground leading-none", children: spec.label }),
-          /* @__PURE__ */ jsx("span", { className: "block text-[11px] font-medium text-foreground leading-snug line-clamp-2 mt-1", children: truncateLabel(spec.title, 22) })
+          /* @__PURE__ */ jsx("span", { className: "block text-[9px] font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] leading-none", children: spec.label }),
+          /* @__PURE__ */ jsx("span", { className: "block text-[11px] font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))] leading-snug line-clamp-2 mt-1", children: truncateLabel(spec.title, 22) })
         ] })
       ]
     }
@@ -391,7 +391,7 @@ function HybridTileCaption({ spec }) {
         children: isImage ? /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-gradient-to-br from-blue-200/80 to-indigo-300/60 dark:from-blue-800/50 dark:to-indigo-900/40 flex items-center justify-center", children: /* @__PURE__ */ jsx(ImageIcon, { className: cn("h-6 w-6", theme.icon) }) }) : /* @__PURE__ */ jsx(TileIcon, { spec, className: "h-6 w-6" })
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: "w-full text-[10px] text-foreground font-medium text-center leading-tight line-clamp-2 px-0.5", children: truncateLabel(spec.title, 18) })
+    /* @__PURE__ */ jsx("span", { className: "w-full text-[10px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))] font-medium text-center leading-tight line-clamp-2 px-0.5", children: truncateLabel(spec.title, 18) })
   ] });
 }
 const HYBRID_VARIANTS = [
@@ -438,12 +438,12 @@ function SampleBubble({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description })
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] mt-0.5", children: description })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "bg-muted border border-border rounded-lg px-2 py-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-[var(--mx-chat-fill,hsl(var(--muted)))] border border-[color:var(--mx-chat-border,hsl(var(--border)))] rounded-lg px-2 py-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
       children,
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap pt-1", children: "Can you review these attachments and summarize next steps?" })
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap pt-1", children: "Can you review these attachments and summarize next steps?" })
     ] }) })
   ] });
 }
@@ -452,8 +452,8 @@ function UserMessageHybridTileSamples({
 }) {
   return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Hybrid tile samples" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-2 max-w-3xl", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))] border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] pb-2", children: "Hybrid tile samples" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] mt-2 max-w-3xl", children: [
         "Input-bar tints + old-chat",
         " ",
         /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "rounded-lg" }),
@@ -462,10 +462,10 @@ function UserMessageHybridTileSamples({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "S8 \xB7 Adaptive \u2014 ship candidate" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "S8 \xB7 Adaptive \u2014 ship candidate" }),
         /* @__PURE__ */ jsx(Badge, { tone: "primary", children: "Light 3D + dark glass" })
       ] }),
-      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-3xl", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] max-w-3xl", children: [
         "Combines S5 (3D raised) in light mode and S7 (glass ring + gradient) in dark mode. Icons sit directly on the tile \u2014 no inset plate. Wired into ",
         /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "AgentUserMessage" }),
         " via",
@@ -483,8 +483,8 @@ function UserMessageHybridTileSamples({
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "E3 \xB7 Style polish (exploration)" }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground max-w-3xl", children: "Historical S0\u2013S7 chrome on the E3 layout. Ship candidate is S8 above (adaptive shell + transparent icons)." }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "E3 \xB7 Style polish (exploration)" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] max-w-3xl", children: "Historical S0\u2013S7 chrome on the E3 layout. Ship candidate is S8 above (adaptive shell + transparent icons)." }),
       /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-2", children: E3_STYLE_VARIANTS.map((variant) => /* @__PURE__ */ jsx(
         SampleBubble,
         {
@@ -508,8 +508,8 @@ function UserMessageHybridTileSamples({
       )) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "E refinements \u2014 layout pick (done)" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground max-w-3xl", children: "Same layout: icon + type, then title. No wrap \u2014 truncate only. Title left edge aligns with icon left edge." }),
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "E refinements \u2014 layout pick (done)" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] max-w-3xl", children: "Same layout: icon + type, then title. No wrap \u2014 truncate only. Title left edge aligns with icon left edge." }),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-3", children: [
         /* @__PURE__ */ jsx(
           SampleBubble,
@@ -556,8 +556,8 @@ function UserMessageHybridTileSamples({
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "grid gap-6 md:grid-cols-2", children: HYBRID_VARIANTS.map(({ id, title, description, Tile, gap }) => /* @__PURE__ */ jsx(SampleBubble, { title, description, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-start", gap), children: specs.map((spec) => /* @__PURE__ */ jsx(Tile, { spec }, `${id}-${spec.id}`)) }) }, id)) }),
-    /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-border bg-card/50 px-3 py-2", children: /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Shared rules:" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-card/50 px-3 py-2", children: /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "Shared rules:" }),
       " ",
       /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "rounded-lg" }),
       ",",

package/dist/agents/components/run/AgentRunnerPage.js

@@ -191,8 +191,8 @@ function AgentRunnerPage({
         /* @__PURE__ */ jsx(AlertTriangle, { className: "w-5 h-5" }),
         /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Couldn't reach the agent service" })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-snug", children: initError }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-snug", children: "Your work is safe \u2014 anything you had typed will be restored once the agent loads." }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] leading-snug", children: initError }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] leading-snug", children: "Your work is safe \u2014 anything you had typed will be restored once the agent loads." }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -209,8 +209,8 @@ function AgentRunnerPage({
   const activeConversationId = conversationIdFromUrl ?? conversationId;
   const isColdLoadingConversation = !!conversationIdFromUrl && coldLoadingConversationId === conversationIdFromUrl;
   if (isInitializing || !activeConversationId) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-full gap-3 text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "w-5 h-5 animate-spin text-primary" }),
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-full gap-3 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "w-5 h-5 animate-spin text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }),
       /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Loading agent..." })
     ] });
   }

package/dist/agents/components/run/AssistantError.js

@@ -107,7 +107,7 @@ function AssistantError({
       retry && /* @__PURE__ */ jsx(Button, { variant: "outline", icon: retrying ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(RotateCw, {}), disabled: retrying, onClick: retry, children: retrying ? "Retrying\u2026" : "Retry" }),
       hasDetails && /* @__PURE__ */ jsx(Button, { variant: "link", onClick: () => setShowDetails((v) => !v), children: showDetails ? "Hide details" : "Details" })
     ] }),
-    hasDetails && showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-0.5 rounded bg-muted/50 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-muted-foreground", children: [
+    hasDetails && showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-0.5 rounded bg-muted/50 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
       (errorType || code != null) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-3", children: [
         errorType && /* @__PURE__ */ jsxs("span", { children: [
           /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "type: " }),

package/dist/agents/components/run/AssistantWarning.js

@@ -30,7 +30,7 @@ function AssistantWarning({ warning }) {
       ] }),
       hasDetails && /* @__PURE__ */ jsx(Button, { variant: "link", onClick: () => setShowDetails((value) => !value), children: showDetails ? "Hide details" : "Details" })
     ] }),
-    hasDetails && showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-0.5 rounded bg-amber-500/10 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-muted-foreground", children: [
+    hasDetails && showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-0.5 rounded bg-amber-500/10 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
       warning.code && /* @__PURE__ */ jsxs("span", { children: [
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "code: " }),
         warning.code

package/dist/agents/components/run/GenerationJobCard.js

@@ -94,23 +94,23 @@ function GenerationJobCard({
       "aria-live": "polite",
       "data-testid": "generation-job-card",
       className: cn(
-        "w-full max-w-md rounded-lg border border-border bg-card p-3 text-sm",
+        "w-full max-w-md rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))] p-3 text-sm",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Clapperboard, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Clapperboard, { className: "h-4 w-4 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
           /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate", children: [
             /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Generating a video" }),
-            job.modelLabel && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            job.modelLabel && /* @__PURE__ */ jsxs("span", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
               " \xB7 ",
               job.modelLabel
             ] })
           ] }),
-          elapsed && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-muted-foreground", children: elapsed })
+          elapsed && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: elapsed })
         ] }),
         /* @__PURE__ */ jsx(Progress, { value: null, "aria-label": "Generating a video", className: "mt-2 h-1.5" }),
-        /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", "data-testid": "generation-job-facts", children: facts.join(" \xB7 ") })
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", "data-testid": "generation-job-facts", children: facts.join(" \xB7 ") })
       ]
     }
   );

package/dist/agents/components/run/IncompleteNote.js

@@ -13,7 +13,7 @@ function IncompleteNote({ label, detail }) {
       ] }),
       detail && /* @__PURE__ */ jsx(Button, { variant: "link", onClick: () => setOpen((v) => !v), children: open ? "Hide details" : "Details" })
     ] }),
-    detail && open && /* @__PURE__ */ jsx("div", { className: "mt-1 rounded bg-amber-500/10 px-2 py-1.5 text-[11px] leading-relaxed text-muted-foreground", children: detail })
+    detail && open && /* @__PURE__ */ jsx("div", { className: "mt-1 rounded bg-amber-500/10 px-2 py-1.5 text-[11px] leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: detail })
   ] });
 }
 export {

package/dist/agents/components/run/RunJobWorkingLine.js

@@ -39,7 +39,7 @@ function RunJobWorkingLine({
             className: "text-sm"
           }
         ),
-        elapsed && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs tabular-nums text-muted-foreground", children: elapsed })
+        elapsed && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs tabular-nums text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: elapsed })
       ]
     }
   );

package/dist/agents/components/shared/AgentConversationColumn.js

@@ -361,7 +361,7 @@ function AgentConversationColumn({
                   ...smartInputProps
                 }
               ),
-              belowInput ? /* @__PURE__ */ jsx("div", { className: "px-1 pb-1 text-xs text-muted-foreground", "data-chat-below-input": "", children: belowInput }) : null
+              belowInput ? /* @__PURE__ */ jsx("div", { className: "px-1 pb-1 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", "data-chat-below-input": "", children: belowInput }) : null
             ]
           }
         )

package/dist/agents/components/shared/AgentHeaderMobile.js

@@ -131,9 +131,9 @@ function AgentHeaderMobile({
                 onClick: () => handleModeChange(m.id),
                 className: "flex w-full min-h-12 items-center gap-3 px-2 text-left text-base",
                 children: [
-                  /* @__PURE__ */ jsx(Icon, { className: cn("h-5 w-5 shrink-0", isActive ? "text-primary" : "text-muted-foreground") }),
+                  /* @__PURE__ */ jsx(Icon, { className: cn("h-5 w-5 shrink-0", isActive ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]") }),
                   /* @__PURE__ */ jsx("span", { className: cn("flex-1", isActive && "font-medium"), children: m.label }),
-                  isActive ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 text-primary" }) : null
+                  isActive ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }) : null
                 ]
               },
               m.id
@@ -173,7 +173,7 @@ function AgentHeaderMobile({
               icon: /* @__PURE__ */ jsx(
                 Icon,
                 {
-                  className: `w-4 h-4 ${isActive ? "text-primary" : ""}`
+                  className: `w-4 h-4 ${isActive ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : ""}`
                 }
               ),
               ariaLabel: label,
@@ -188,7 +188,7 @@ function AgentHeaderMobile({
             icon: /* @__PURE__ */ jsx(
               MoreHorizontal,
               {
-                className: `w-4 h-4 ${!PROMINENT.includes(mode) ? "text-primary" : ""}`
+                className: `w-4 h-4 ${!PROMINENT.includes(mode) ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : ""}`
               }
             ),
             ariaLabel: "More",
@@ -234,7 +234,7 @@ function AgentHeaderMobile({
                     {
                       className: cn(
                         "w-4 h-4 mr-3 shrink-0",
-                        isActive ? "text-primary" : "text-muted-foreground"
+                        isActive ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]"
                       )
                     }
                   ),
@@ -248,7 +248,7 @@ function AgentHeaderMobile({
                       children: m.label
                     }
                   ),
-                  isActive && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-primary shrink-0" })
+                  isActive && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-[color:var(--mx-chat-accent,hsl(var(--primary)))] shrink-0" })
                 ]
               },
               m.id

package/dist/agents/components/shared/AgentModeController.js

@@ -193,7 +193,7 @@ function AgentModeController({
               onSelect: () => handleModeChange(id),
               className: "gap-2",
               children: [
-                /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
                 label
               ]
             },

package/dist/agents/components/shared/AutoInjectionSwitch.js

@@ -21,7 +21,7 @@ function AutoInjectionSwitch({
         htmlFor: id,
         title,
         className: cn(
-          "inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-1.5 transition-colors hover:bg-muted",
+          "inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-1.5 transition-colors hover:bg-[var(--mx-chat-fill,hsl(var(--muted)))]",
           warn && "bg-amber-500/10",
           className
         ),
@@ -31,7 +31,7 @@ function AutoInjectionSwitch({
             {
               className: cn(
                 "shrink-0",
-                disabled ? "text-muted-foreground" : "text-primary",
+                disabled ? "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" : "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]",
                 warn && "text-amber-600 dark:text-amber-400"
               ),
               children: icon
@@ -57,7 +57,7 @@ function AutoInjectionSwitch({
     {
       htmlFor: id,
       className: cn(
-        "flex items-center justify-between gap-3 px-3 py-2 border-b border-border bg-muted/30 shrink-0 cursor-pointer",
+        "flex items-center justify-between gap-3 px-3 py-2 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/30 shrink-0 cursor-pointer",
         className
       ),
       children: [
@@ -67,20 +67,20 @@ function AutoInjectionSwitch({
             {
               className: cn(
                 "shrink-0",
-                disabled ? "text-muted-foreground" : "text-primary",
+                disabled ? "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" : "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]",
                 warn && "text-amber-600 dark:text-amber-400"
               ),
               children: icon
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: label }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: label }),
             /* @__PURE__ */ jsx(
               "p",
               {
                 className: cn(
                   "text-[11px] leading-tight",
-                  warn ? "text-amber-700 dark:text-amber-300" : "text-muted-foreground"
+                  warn ? "text-amber-700 dark:text-amber-300" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]"
                 ),
                 children: statusText
               }