@ai-matrx/chat 0.7.7 → 0.7.8

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-[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("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("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 }) })
+    /* @__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 }) })
   ] });
 }
 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-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: spec.note }) : null
+    spec.note ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-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-[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: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-foreground", children: "User Message Chips" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-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-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap", children: "Please turn the attached research into an infographic prompt." })
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-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-[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__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-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-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap", children: "Can you go ahead and get this working document ready?" })
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-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-[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__ */ jsx("p", { className: "text-xs text-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-[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: [
+          /* @__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: [
             "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-[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__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Resource attachments" }),
       /* @__PURE__ */ jsxs(
         DemoBubble,
         {
@@ -261,7 +261,7 @@ function UserMessageChipsDemo() {
                 size: "xs"
               }
             ) }),
-            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-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-[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: [
+          /* @__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: [
             "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-[color:var(--mx-chat-text,hsl(var(--foreground)))] whitespace-pre-wrap", children: "Mixed attachments above a text line \u2014 same layout as production." })
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-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-[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__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-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-[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?" })
+            /* @__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?" })
           ]
         }
       )

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-[color:var(--mx-chat-text,hsl(var(--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-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-[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) })
+          /* @__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) })
         ] })
       ]
     }
@@ -177,7 +177,7 @@ function HybridTileStackedRowsBase({
             {
               className: cn(
                 config.typeClass,
-                "min-w-0 flex-1 truncate whitespace-nowrap text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] uppercase tracking-wide"
+                "min-w-0 flex-1 truncate whitespace-nowrap text-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-[color:var(--mx-chat-text,hsl(var(--foreground)))] font-medium"
+              "block w-full min-w-0 truncate whitespace-nowrap text-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-[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) })
+          /* @__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) })
         ] })
       ]
     }
@@ -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-[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) })
+    /* @__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) })
   ] });
 }
 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-[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("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("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: [
+    /* @__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: [
       children,
-      /* @__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?" })
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-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-[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: [
+      /* @__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: [
         "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-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "S8 \xB7 Adaptive \u2014 ship candidate" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-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-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] max-w-3xl", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-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-[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: "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: "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-[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__ */ 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__ */ 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-[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("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("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-[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("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(
         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-[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)))]" }),
+    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" }),
       /* @__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-[color:var(--mx-chat-text-secondary,hsl(var(--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-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-[color:var(--mx-chat-text-secondary,hsl(var(--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-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-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))] p-3 text-sm",
+        "w-full max-w-md rounded-lg border border-border bg-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-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
+          /* @__PURE__ */ jsx(Clapperboard, { className: "h-4 w-4 shrink-0 text-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-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+            job.modelLabel && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
               " \xB7 ",
               job.modelLabel
             ] })
           ] }),
-          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 })
+          elapsed && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-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-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", "data-testid": "generation-job-facts", children: facts.join(" \xB7 ") })
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-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-[color:var(--mx-chat-text-secondary,hsl(var(--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-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-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: elapsed })
+        elapsed && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs tabular-nums text-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-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", "data-chat-below-input": "", children: belowInput }) : null
+              belowInput ? /* @__PURE__ */ jsx("div", { className: "px-1 pb-1 text-xs text-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-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]") }),
+                  /* @__PURE__ */ jsx(Icon, { className: cn("h-5 w-5 shrink-0", isActive ? "text-primary" : "text-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-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }) : null
+                  isActive ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 text-primary" }) : null
                 ]
               },
               m.id
@@ -173,7 +173,7 @@ function AgentHeaderMobile({
               icon: /* @__PURE__ */ jsx(
                 Icon,
                 {
-                  className: `w-4 h-4 ${isActive ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : ""}`
+                  className: `w-4 h-4 ${isActive ? "text-primary" : ""}`
                 }
               ),
               ariaLabel: label,
@@ -188,7 +188,7 @@ function AgentHeaderMobile({
             icon: /* @__PURE__ */ jsx(
               MoreHorizontal,
               {
-                className: `w-4 h-4 ${!PROMINENT.includes(mode) ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : ""}`
+                className: `w-4 h-4 ${!PROMINENT.includes(mode) ? "text-primary" : ""}`
               }
             ),
             ariaLabel: "More",
@@ -234,7 +234,7 @@ function AgentHeaderMobile({
                     {
                       className: cn(
                         "w-4 h-4 mr-3 shrink-0",
-                        isActive ? "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]"
+                        isActive ? "text-primary" : "text-muted-foreground"
                       )
                     }
                   ),
@@ -248,7 +248,7 @@ function AgentHeaderMobile({
                       children: m.label
                     }
                   ),
-                  isActive && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-[color:var(--mx-chat-accent,hsl(var(--primary)))] shrink-0" })
+                  isActive && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-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-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
+                /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-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-[var(--mx-chat-fill,hsl(var(--muted)))]",
+          "inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-1.5 transition-colors hover:bg-muted",
           warn && "bg-amber-500/10",
           className
         ),
@@ -31,7 +31,7 @@ function AutoInjectionSwitch({
             {
               className: cn(
                 "shrink-0",
-                disabled ? "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" : "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]",
+                disabled ? "text-muted-foreground" : "text-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-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/30 shrink-0 cursor-pointer",
+        "flex items-center justify-between gap-3 px-3 py-2 border-b border-border bg-muted/30 shrink-0 cursor-pointer",
         className
       ),
       children: [
@@ -67,20 +67,20 @@ function AutoInjectionSwitch({
             {
               className: cn(
                 "shrink-0",
-                disabled ? "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" : "text-[color:var(--mx-chat-accent,hsl(var(--primary)))]",
+                disabled ? "text-muted-foreground" : "text-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-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: label }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: label }),
             /* @__PURE__ */ jsx(
               "p",
               {
                 className: cn(
                   "text-[11px] leading-tight",
-                  warn ? "text-amber-700 dark:text-amber-300" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]"
+                  warn ? "text-amber-700 dark:text-amber-300" : "text-muted-foreground"
                 ),
                 children: statusText
               }

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

@@ -45,7 +45,7 @@ function RadioSelect({
       onClick: () => onChange(opt.value),
       className: cn(
         "flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors text-left",
-        value === opt.value ? "bg-primary/10 text-primary-ink font-medium" : "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)))]"
+        value === opt.value ? "bg-primary/10 text-primary-ink font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -86,7 +86,7 @@ function MultiSelectChips({
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     items.length > 5 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 h-7 rounded-md bg-muted/50 border border-border/50", children: [
-      /* @__PURE__ */ jsx(Search, { className: "h-3 w-3 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] shrink-0" }),
+      /* @__PURE__ */ jsx(Search, { className: "h-3 w-3 text-muted-foreground shrink-0" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -94,7 +94,7 @@ function MultiSelectChips({
           placeholder: searchPlaceholder,
           value: searchQ,
           onChange: (e) => setSearchQ(e.target.value),
-          className: "flex-1 bg-transparent text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))] placeholder:text-muted-foreground/50 outline-none"
+          className: "flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 outline-none"
         }
       ),
       searchQ && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), "aria-label": "Clear search", onClick: () => setSearchQ("") })
@@ -107,7 +107,7 @@ function MultiSelectChips({
         return /* @__PURE__ */ jsx(Chip, { asChild: true, pressed: isSelected, label: item, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => toggle(item) }) }, item);
       })
     ] }) }),
-    filtered.length === 0 && searchQ && /* @__PURE__ */ jsx("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No matches" })
+    filtered.length === 0 && searchQ && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No matches" })
   ] });
 }
 function FilterSection({
@@ -117,7 +117,7 @@ function FilterSection({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))] uppercase tracking-wider", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground uppercase tracking-wider", children: label }),
       active && /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary" })
     ] }),
     children
@@ -194,7 +194,7 @@ function DesktopFilterPanel({
           maxHeight: "var(--radix-popover-content-available-height, calc(100dvh - 120px))"
         },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] shrink-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0", children: [
             /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Filters & Sort" }),
             activeFilterCount > 0 && /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ jsx(RotateCcw, {}), onClick: resetFilters, children: "Reset all" })
           ] }),
@@ -267,7 +267,7 @@ function DesktopFilterPanel({
                     {
                       className: cn(
                         "w-8 h-[18px] rounded-full relative transition-colors shrink-0",
-                        favoritesFirst ? "bg-primary" : "bg-[var(--mx-chat-fill,hsl(var(--muted)))] border border-[color:var(--mx-chat-border,hsl(var(--border)))]"
+                        favoritesFirst ? "bg-primary" : "bg-muted border border-border"
                       ),
                       children: /* @__PURE__ */ jsx(
                         "span",
@@ -280,7 +280,7 @@ function DesktopFilterPanel({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "Pin favorites to top" })
+                  /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "Pin favorites to top" })
                 ]
               }
             ) })

package/dist/agents/components/shared/transcript-layout.d.ts

@@ -1,24 +1,25 @@
 /**
  * How a host lays the ONE conversation column out (HOST-OWNED-SOURCE-PLAN P28e look bar).
  *
- * Knobs, never forks: every value has today's web default, and a host that says nothing gets
- * exactly the web chat. Matrx 2 (desktop) fills its pane, starts at the left edge and draws the
+ * Knobs, never forks: a host that says nothing gets the default look (flat compact user turn,
+ * actions on hover). Matrx 2 (desktop) fills its pane, starts at the left edge and draws the
  * person's turn as a compact block — the look its coding screen had before the column.
  *
  *  - `width`: "reading" (the canonical `max-w-3xl` reading column) | "fill" (the host's pane).
  *  - `align`: "center" | "start" — where a reading-width column sits in a wider pane.
- *  - `userMessage`: "card" (the bordered card that collapses a long message behind a chevron) |
- *    "compact" (a tight block; only a genuinely long message collapses).
- *  - `answerActions`: "shown" (the answer's action row always visible on the latest answer) |
- *    "hover" (revealed on hover / keyboard focus — a finished answer ends on its last word, not on
- *    a lone ⋯ that reads as "still writing" in a host with few actions).
+ *  - `userMessage`: "compact" (DEFAULT: a flat tight block; only a genuinely long message
+ *    collapses) | "card" (the bordered card that collapses a long message behind a chevron).
+ *  - `answerActions`: "hover" (DEFAULT: the action row is revealed on hover / keyboard focus, and
+ *    always on touch — its height is reserved, so revealing it moves nothing; a finished answer ends
+ *    on its last word) | "latest" (the latest answer's row is always visible, older ones on hover) |
+ *    "shown" (every answer's row always visible).
  */
 import { type ReactNode } from "react";
 export interface TranscriptLayout {
     width?: "reading" | "fill";
     align?: "center" | "start";
     userMessage?: "card" | "compact";
-    answerActions?: "shown" | "hover";
+    answerActions?: "shown" | "latest" | "hover";
 }
 export declare const DEFAULT_TRANSCRIPT_LAYOUT: Required<TranscriptLayout>;
 export declare function resolveTranscriptLayout(layout?: TranscriptLayout): Required<TranscriptLayout>;

package/dist/agents/components/shared/transcript-layout.js

@@ -6,8 +6,8 @@ import {
 const DEFAULT_TRANSCRIPT_LAYOUT = {
   width: "reading",
   align: "center",
-  userMessage: "card",
-  answerActions: "shown"
+  userMessage: "compact",
+  answerActions: "hover"
 };
 const TranscriptLayoutContext = createContext(DEFAULT_TRANSCRIPT_LAYOUT);
 function resolveTranscriptLayout(layout) {