@ai-matrx/chat 0.7.7 → 0.7.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ai-matrx/chat
 
+## 0.7.8
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/chat/v0.7.7..npm/chat/v0.7.8 -- apps/shared/chat`).
+No source changes intended and no consumer action required.
+
 ## 0.7.7
 ### Unreleased
 

package/dist/agents/components/inputs/smart-input/InputActionButtons.d.ts

@@ -58,9 +58,9 @@ interface InputActionButtonsProps {
          * audio) live in the + menu; Output and Effort in the agent pill's menu.
          */
         folded?: boolean;
-        /** Compact's row under the card: after + · mic (· live audio). */
+        /** Scope · values: after + · mic (· live audio) in Compact's row, after + in the card's own bar. */
         leading?: React.ReactNode;
-        /** Compact's row under the card: the right end (agent · output · effort). */
+        /** Agent · output · effort: the right end of Compact's row, or just left of the mic in the card's own bar. */
         trailing?: React.ReactNode;
         /**
          * Which part this instance draws. Compact mounts two: `"send"` (↵, inside

package/dist/agents/components/inputs/smart-input/InputActionButtons.js

@@ -202,9 +202,11 @@ function InputActionButtons({
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
         plusMenu,
         database ? /* @__PURE__ */ jsx(DesktopPresenceIndicator, { conversationId }) : null,
-        variablesToggle
+        variablesToggle,
+        composer.leading
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+        composer.trailing,
         extraRightControls,
         micGroup,
         liveAudioButton,

package/dist/agents/components/inputs/smart-input/SmartAgentInputStacked.js

@@ -20,7 +20,7 @@ import { Button } from "@ai-matrx/design-system";
 import { cn } from "@ai-matrx/design-system";
 import { composerShows } from "./composer/composer-mode-visibility.js";
 import { ComposerChipsRow } from "./composer/ComposerChipsRow.js";
-import { ComposerMetaRow, ComposerPills, ComposerScopeCluster, ComposerValueGroupChip } from "./composer/ComposerMetaRow.js";
+import { ComposerPills, ComposerScopeCluster, ComposerValueGroupChip } from "./composer/ComposerMetaRow.js";
 import { useComposerFold } from "./composer/useComposerFold.js";
 import { useTouchOnlyDevice } from "../../../../ui/composer/useTouchOnlyDevice.js";
 function SmartAgentInputStacked({
@@ -323,7 +323,12 @@ function SmartAgentInputStacked({
                     onVoiceBusyChange: setVoiceBusy,
                     extraRightControls,
                     onRequestInputExpand: () => setExpandRequestKey((key) => key + 1),
-                    composer: composerParts
+                    composer: {
+                      ...composerParts,
+                      // The pills live in the card's own bar: no strip under the card (rule: existing bars).
+                      leading: composer.meta === "none" ? void 0 : /* @__PURE__ */ jsx(ComposerScopeCluster, { conversationId, composer, folded }),
+                      trailing: composer.meta === "none" ? void 0 : /* @__PURE__ */ jsx(ComposerPills, { conversationId, composer, menuSide, folded })
+                    }
                   }
                 )
               ] })
@@ -344,7 +349,7 @@ function SmartAgentInputStacked({
               trailing: composer.meta === "none" ? void 0 : /* @__PURE__ */ jsx(ComposerPills, { conversationId, composer, menuSide, folded })
             }
           }
-        ) : composer.meta === "none" ? null : /* @__PURE__ */ jsx(ComposerMetaRow, { conversationId, composer, menuSide, folded })
+        ) : null
       ]
     }
   );

package/dist/agents/components/messages-display/AgentConversationDisplay.js

@@ -399,7 +399,7 @@ function AgentConversationDisplay({
               visibleGroups.map(
                 (group, index) => wrapGroup(group, index, renderGroupBody(group))
               ),
-              pinnedOnly && visibleGroups.length === 0 && /* @__PURE__ */ jsxs("div", { className: "py-10 text-center text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+              pinnedOnly && visibleGroups.length === 0 && /* @__PURE__ */ jsxs("div", { className: "py-10 text-center text-sm text-muted-foreground", children: [
                 "Nothing pinned in this conversation.",
                 " ",
                 /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", onClick: () => setPinnedOnly(false), children: "Show all messages" })

package/dist/agents/components/messages-display/assistant/AgentEmptyMessageDisplay.js

@@ -40,7 +40,7 @@ function AgentEmptyMessageDisplay({
   if (isLongDescription && displayDescription) {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full justify-start text-left px-6 py-8 max-w-3xl mx-auto w-full", children: [
       /* @__PURE__ */ jsx(RichContent, { level: "full", imagePolicy: "other", source: displayDescription, hideCopyButton: true }),
-      instruction && /* @__PURE__ */ jsx("p", { className: "text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] mt-3", children: instruction })
+      instruction && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-3", children: instruction })
     ] });
   }
   return (
@@ -53,14 +53,14 @@ function AgentEmptyMessageDisplay({
         IconResolver,
         {
           iconName: iconNameOverride,
-          className: "w-12 h-12 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]",
+          className: "w-12 h-12 text-primary",
           fallbackIcon: "Webhook"
         }
-      ) : /* @__PURE__ */ jsx(Webhook, { className: "w-12 h-12 text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }) }),
+      ) : /* @__PURE__ */ jsx(Webhook, { className: "w-12 h-12 text-primary" }) }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3 mx-auto", children: [
         /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: displayName ?? "Ready to run" }),
         displayDescription && /* @__PURE__ */ jsx(RichContent, { level: "full", imagePolicy: "other", source: displayDescription, hideCopyButton: true }),
-        instruction && /* @__PURE__ */ jsx("p", { className: "text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] mt-1", children: instruction })
+        instruction && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: instruction })
       ] })
     ] })
   );

package/dist/agents/components/messages-display/assistant/AssistantMessageFooter.js

@@ -165,7 +165,7 @@ function AssistantMessageFooter(props) {
     isLatestAssistant
   } = useAssistantMessageActions(props);
   const answerActions = useTranscriptLayout().answerActions;
-  const isHoverOnly = answerActions === "hover" || density === "compact" && !isLatestAssistant;
+  const isHoverOnly = answerActions === "hover" || answerActions === "latest" && !isLatestAssistant || density === "compact" && !isLatestAssistant;
   const rowRef = useRef(null);
   useEffect(() => {
     const row = rowRef.current;
@@ -183,7 +183,9 @@ function AssistantMessageFooter(props) {
       {
         className: cn(
           "transition-opacity",
-          isHoverOnly && "opacity-0 group-hover/assistant-msg:opacity-100 focus-within:opacity-100"
+          isHoverOnly && // Hidden by opacity, never display: the row keeps its height, so revealing it shifts
+          // nothing. A touch screen has no hover, so it is always visible there.
+          "opacity-0 group-hover/assistant-msg:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100"
         ),
         children: [
           /* @__PURE__ */ jsxs(

package/dist/agents/components/messages-display/assistant/AssistantNoAnswer.js

@@ -11,7 +11,7 @@ function AssistantNoAnswer({
   const isAdmin = useAppSelector(selectIsSuperAdmin);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs", "data-assistant-no-answer": true, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2.5 gap-y-1", children: [
-      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
         /* @__PURE__ */ jsx(CircleSlash, { className: "h-3.5 w-3.5 shrink-0" }),
         "This run finished without writing an answer."
       ] }),

package/dist/agents/components/messages-display/assistant/BreathingOrb.js

@@ -5,7 +5,7 @@ function BreathingOrb({ className, size = 28 }) {
   return /* @__PURE__ */ jsx(
     "output",
     {
-      className: cn("inline-flex items-center text-[color:var(--mx-chat-accent,hsl(var(--primary)))]", className),
+      className: cn("inline-flex items-center text-primary", className),
       "aria-label": "Working",
       children: /* @__PURE__ */ jsxs(
         "svg",

package/dist/agents/components/messages-display/assistant/InPlaceAnswerEditor.js

@@ -37,7 +37,7 @@ function InPlaceAnswerEditor({ conversationId, messageId, startExpanded = false
     };
   }, [conversationId, messageId, dispatch]);
   if (openedOn === null) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-40 items-center justify-center gap-2 rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-40 items-center justify-center gap-2 rounded-lg border border-border text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
       " Opening the answer\u2026"
     ] });

package/dist/agents/components/messages-display/citations/MessageSourcesRow.js

@@ -15,7 +15,7 @@ function MessageSourcesRow({
   const openSource = useOpenCitationSource();
   if (sources.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Sources" }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Sources" }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: sources.map((source) => {
       const label = citationSourceLabel(source);
       const openable = citationSourceIsOpenable(source);

package/dist/agents/components/messages-display/conversation-tools/ConversationFindBar.js

@@ -80,13 +80,13 @@ function ConversationFindBar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "flex items-center gap-1 rounded-lg border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))] px-2 py-1 shadow-sm",
+      className: "flex items-center gap-1 rounded-lg border border-border bg-card px-2 py-1 shadow-sm",
       role: "search",
       "aria-label": "Find in this conversation",
       "data-find-ignore": "",
       children: [
         /* @__PURE__ */ jsx("style", { children: HIGHLIGHT_CSS }),
-        /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -107,7 +107,7 @@ function ConversationFindBar({
             },
             placeholder: "Find in conversation",
             "aria-label": "Find in conversation",
-            className: "min-w-0 flex-1 bg-transparent text-base outline-none placeholder:text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] md:text-sm"
+            className: "min-w-0 flex-1 bg-transparent text-base outline-none placeholder:text-muted-foreground md:text-sm"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -115,7 +115,7 @@ function ConversationFindBar({
           {
             className: cn(
               "min-w-0 max-w-[55%] truncate text-xs tabular-nums",
-              ranges.length === 0 && query.trim() && history.state !== "loading" && settled ? "text-destructive" : "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]"
+              ranges.length === 0 && query.trim() && history.state !== "loading" && settled ? "text-destructive" : "text-muted-foreground"
             ),
             "aria-live": "polite",
             title: status,

package/dist/agents/components/messages-display/message-options/EditHistoryDialog.js

@@ -69,7 +69,7 @@ function HistoryEntryCard({
   const truncated = preview.length > 400 ? `${preview.slice(0, 400)}\u2026` : preview || "(empty)";
   const savedAt = new Date(entry.saved_at);
   const versionLabel = total > 1 ? `Version ${total - index}` : "Previous version";
-  return /* @__PURE__ */ jsxs("div", { className: "border border-[color:var(--mx-chat-border,hsl(var(--border)))] rounded-md overflow-hidden bg-[var(--mx-chat-card,hsl(var(--card)))]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-md overflow-hidden bg-card", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -78,22 +78,22 @@ function HistoryEntryCard({
         onClick: () => setExpanded(!expanded),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-            /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] flex-shrink-0" }),
+            /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: versionLabel }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: savedAt.toLocaleString() })
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: versionLabel }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: savedAt.toLocaleString() })
             ] })
           ] }),
           /* @__PURE__ */ jsx(
             ChevronRight,
             {
-              className: `w-3.5 h-3.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-transform ${expanded ? "rotate-90" : ""}`
+              className: `w-3.5 h-3.5 text-muted-foreground transition-transform ${expanded ? "rotate-90" : ""}`
             }
           )
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxs("div", { className: "px-3 pb-3 border-t border-[color:var(--mx-chat-border,hsl(var(--border)))]", children: [
+    expanded && /* @__PURE__ */ jsxs("div", { className: "px-3 pb-3 border-t border-border", children: [
       /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-foreground/80 whitespace-pre-wrap leading-relaxed max-h-48 overflow-y-auto bg-muted/30 rounded p-2 font-mono", children: truncated }),
       /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-end gap-2", children: [
         /* @__PURE__ */ jsx(
@@ -177,7 +177,7 @@ function HistoryContent({
     }
   };
   if (ordered.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No edit history yet. Inline edits and saves will appear here." });
+    return /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: "No edit history yet. Inline edits and saves will appear here." });
   }
   return /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[60dvh]", children: /* @__PURE__ */ jsx("div", { className: "space-y-2 p-1", children: ordered.map((entry, i) => /* @__PURE__ */ jsx(
     HistoryEntryCard,

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

@@ -80,7 +80,7 @@ function AgentUserMessageContent({
         imagePolicy: "other",
         content: literalUserText(trimmedText),
         serverProcessedBlocks: hasBodyBlocks ? bodyBlocks : void 0,
-        className: "text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+        className: "text-xs text-foreground",
         hideCopyButton: true,
         allowFullScreenEditor: false
       }
@@ -245,7 +245,7 @@ function AgentUserMessage({
       {
         className: cn("group relative", compact ? "" : "ml-12"),
         "data-testid": "user-message-empty",
-        children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/40 px-3 py-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground", children: [
           "This message has no displayable text.",
           isSuperAdmin && /* @__PURE__ */ jsxs("span", { className: "ml-1 font-mono", children: [
             "[",
@@ -294,8 +294,8 @@ function AgentUserMessage({
           {
             className: compactUserMessage ? (
               // Tight: no inset from the left, and the markdown paragraph's own margins dropped.
-              "bg-[var(--mx-chat-fill,hsl(var(--muted)))] rounded-md px-3 py-2 [&_.math-content-wrapper]:my-0 [&_p:last-child]:mb-0"
-            ) : "bg-[var(--mx-chat-fill,hsl(var(--muted)))] border border-[color:var(--mx-chat-border,hsl(var(--border)))] rounded-lg px-2 py-2",
+              "bg-muted rounded-md px-3 py-2 [&_.math-content-wrapper]:my-0 [&_p:last-child]:mb-0"
+            ) : "bg-muted border border-border rounded-lg px-2 py-2",
             "data-user-message-style": compactUserMessage ? "compact" : "card",
             children: /* @__PURE__ */ jsxs("div", { className: "relative min-w-0", children: [
               /* @__PURE__ */ jsxs(

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

@@ -37,11 +37,11 @@ function CollabNoteMessage({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 border-b border-violet-500/15 px-2.5 py-1.5", children: [
           /* @__PURE__ */ jsx(Handshake, { className: "h-3.5 w-3.5 shrink-0 text-violet-600 dark:text-violet-400" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
             "Collaboration note",
             agentName ? ` \u2014 ${agentName}` : ""
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "left after reviewing this conversation" })
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: "left after reviewing this conversation" })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "px-2.5 py-2 text-sm", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "ai", content: body, showCopyButton: false }) })
       ]

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

@@ -35,7 +35,7 @@ function UserMessageVariables({
     {
       className: "text-xs leading-snug text-foreground/90",
       children: [
-        /* @__PURE__ */ jsxs("span", { className: "font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: [
+        /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
           l.label,
           ":"
         ] }),
@@ -84,14 +84,14 @@ function FirstTurnLaunchInputs({
         },
         "aria-expanded": open,
         title: open ? "Hide the inputs" : "Show the inputs this run started with",
-        className: "flex flex-wrap items-center gap-1 rounded text-left text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+        className: "flex flex-wrap items-center gap-1 rounded text-left text-xs text-muted-foreground hover:text-foreground",
         children: [
           /* @__PURE__ */ jsx(Chevron, { className: "h-3 w-3 shrink-0" }),
           /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Started with:" }),
           lines.map((l) => /* @__PURE__ */ jsx(
             "span",
             {
-              className: "rounded-full border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-background px-1.5 py-px text-xs text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+              className: "rounded-full border border-border bg-background px-1.5 py-px text-xs text-foreground",
               children: l.label
             },
             l.key

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

@@ -48,7 +48,7 @@ function PendingSendMessage({
           {
             className: cn(
               "w-full rounded-lg border px-3 py-2 text-sm whitespace-pre-wrap break-words",
-              failed ? "border-destructive/40 bg-destructive/5 text-[color:var(--mx-chat-text,hsl(var(--foreground)))]" : "border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-fill,hsl(var(--muted)))] text-foreground/80"
+              failed ? "border-destructive/40 bg-destructive/5 text-foreground" : "border-border bg-muted text-foreground/80"
             ),
             children: preSend.text || "(no text)"
           }
@@ -59,7 +59,7 @@ function PendingSendMessage({
             /* @__PURE__ */ jsxs("span", { children: [
               preSend.error ?? "This message could not be prepared. Nothing was sent.",
               " ",
-              /* @__PURE__ */ jsx("span", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Your text is still in the box below." })
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Your text is still in the box below." })
             ] })
           ] }),
           /* @__PURE__ */ jsxs(
@@ -83,13 +83,13 @@ function PendingSendMessage({
             {
               size: "sm",
               variant: "ghost",
-              className: "h-7 gap-1 px-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
+              className: "h-7 gap-1 px-2 text-xs text-muted-foreground",
               "aria-label": "Dismiss",
               onClick: () => dispatch(setPreSend({ conversationId, preSend: null })),
               children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
             }
           )
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
           /* @__PURE__ */ jsxs("span", { children: [
             preSend.label,

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

@@ -51,7 +51,7 @@ function readRows(payload) {
 function RemarkDiff({ diff }) {
   const parts = splitRemarkDiff(diff);
   if (!parts) {
-    return /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap font-mono text-[11px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: diff });
+    return /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap font-mono text-[11px] text-foreground", children: diff });
   }
   return /* @__PURE__ */ jsx("div", { className: "text-[11px] leading-snug", "data-remark-diff": true, children: /* @__PURE__ */ jsx(InlineTextDiff, { view: "inline", original: parts.before, modified: parts.after }) });
 }
@@ -60,14 +60,14 @@ function RemarksTranscriptView({ payload }) {
   if (rows.length === 0) return null;
   return /* @__PURE__ */ jsx("div", { className: "my-1 grid gap-1", children: rows.map((row, i) => {
     const { icon: Icon, label } = remarkKindDisplay(row.kind);
-    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5 rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))] px-2 py-1 text-xs", "data-remark-handle": row.handle ?? void 0, children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5 rounded-md border border-border bg-card px-2 py-1 text-xs", "data-remark-handle": row.handle ?? void 0, children: [
       /* @__PURE__ */ jsx(Icon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400", "aria-label": label }),
       /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-0.5", children: [
-        row.quote || row.title ? /* @__PURE__ */ jsx("div", { className: "truncate border-l-2 border-primary/40 pl-1.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: row.quote ?? row.title }) : null,
-        row.body ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: row.body }) : null,
+        row.quote || row.title ? /* @__PURE__ */ jsx("div", { className: "truncate border-l-2 border-primary/40 pl-1.5 text-muted-foreground", children: row.quote ?? row.title }) : null,
+        row.body ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-foreground", children: row.body }) : null,
         row.diff ? /* @__PURE__ */ jsx(RemarkDiff, { diff: row.diff }) : null,
-        row.answers.length ? /* @__PURE__ */ jsx("ul", { className: "grid gap-0.5 text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: row.answers.map((a, j) => /* @__PURE__ */ jsxs("li", { className: "truncate", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+        row.answers.length ? /* @__PURE__ */ jsx("ul", { className: "grid gap-0.5 text-foreground", children: row.answers.map((a, j) => /* @__PURE__ */ jsxs("li", { className: "truncate", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
             a.question,
             ":"
           ] }),
@@ -75,7 +75,7 @@ function RemarksTranscriptView({ payload }) {
           a.answer
         ] }, j)) }) : null
       ] }),
-      row.handle ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 font-mono text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", title: `Remark ${row.handle}`, children: row.handle }) : null
+      row.handle ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 font-mono text-[10px] text-muted-foreground", title: `Remark ${row.handle}`, children: row.handle }) : null
     ] }, i);
   }) });
 }

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

@@ -134,7 +134,7 @@ function ResourceAttachmentTile({
               }
             ) }),
             /* @__PURE__ */ jsxs(TooltipContent, { side: "top", className: "max-w-[16rem]", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: typeLabel }),
+              /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: typeLabel }),
               /* @__PURE__ */ jsx("div", { className: "font-medium text-popover-foreground", children: title }),
               showToggle && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/80", children: editable ? "Agent can edit" : "Read-only to agent" })
             ] })
@@ -143,8 +143,8 @@ function ResourceAttachmentTile({
       ) }),
       hasControls ? /* @__PURE__ */ jsxs(PopoverContent, { sizing: "content", side: "top", align: "end", sideOffset: 6, className: "p-1", children: [
         /* @__PURE__ */ jsxs("div", { className: "px-2 py-1.5", children: [
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: typeLabel })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: typeLabel })
         ] }),
         onClick ? /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(ExternalLink, {}), title: "Open", onClick: (e) => {
           stop(e);
@@ -203,9 +203,9 @@ function ResourceAttachmentTile({
                   ) : error ? /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0 text-destructive" }) : createElement(Icon, {
                     className: cn("h-3.5 w-3.5 shrink-0", theme.icon)
                   }) }),
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate whitespace-nowrap text-[9px] font-semibold leading-none text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] uppercase tracking-wide", children: typeLabel })
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate whitespace-nowrap text-[9px] font-semibold leading-none text-muted-foreground uppercase tracking-wide", children: typeLabel })
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: "block w-full min-w-0 truncate whitespace-nowrap text-[10px] leading-none text-[color:var(--mx-chat-text,hsl(var(--foreground)))] font-medium", children: title })
+                /* @__PURE__ */ jsx("span", { className: "block w-full min-w-0 truncate whitespace-nowrap text-[10px] leading-none text-foreground font-medium", children: title })
               ]
             }
           ),
@@ -228,7 +228,7 @@ function ResourceAttachmentTile({
                 },
                 className: cn(
                   "inline-flex items-center justify-center rounded-full p-0.5",
-                  "text-muted-foreground/80 hover:bg-black/10 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+                  "text-muted-foreground/80 hover:bg-black/10 hover:text-foreground",
                   "dark:hover:bg-white/10 transition-colors"
                 ),
                 children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
@@ -252,7 +252,7 @@ function ResourceAttachmentTile({
                       toggleEditable();
                     }
                   },
-                  className: "inline-flex items-center justify-center rounded-full p-0.5 text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
+                  className: "inline-flex items-center justify-center rounded-full p-0.5 text-foreground",
                   children: editable ? /* @__PURE__ */ jsx(Pencil, { className: "h-2.5 w-2.5" }) : /* @__PURE__ */ jsx(Lock, { className: "h-2.5 w-2.5" })
                 }
               ) }),
@@ -272,8 +272,8 @@ function ResourceAttachmentTile({
         className: "p-1",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "px-2 py-1.5", children: [
-            /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
-            /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: typeLabel })
+            /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-foreground", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: typeLabel })
           ] }),
           showToggle ? /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: editable ? /* @__PURE__ */ jsx(Lock, {}) : /* @__PURE__ */ jsx(Pencil, {}), title: editable ? "Make read-only" : "Allow agent editing", onClick: (e) => {
             stop(e);

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

@@ -46,9 +46,9 @@ function ResourceEditableToggleSamples() {
     }
   }, [dispatch]);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] pb-2", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: "All attachment chips together" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] max-w-3xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-b border-border pb-2", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground", children: "All attachment chips together" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-3xl", children: [
         "The real ",
         /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "SmartAgentResourceChips" }),
         " ",
@@ -59,7 +59,7 @@ function ResourceEditableToggleSamples() {
         " when unlocked."
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "bg-[var(--mx-chat-fill,hsl(var(--muted)))] border border-[color:var(--mx-chat-border,hsl(var(--border)))] rounded-lg py-2 max-w-3xl", children: /* @__PURE__ */ jsx(SmartAgentResourceChips, { conversationId: DEMO_CONV_ALL_RESOURCES }) })
+    /* @__PURE__ */ jsx("div", { className: "bg-muted border border-border rounded-lg py-2 max-w-3xl", children: /* @__PURE__ */ jsx(SmartAgentResourceChips, { conversationId: DEMO_CONV_ALL_RESOURCES }) })
   ] });
 }
 export {

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

@@ -192,7 +192,7 @@ function UserActionBar({
           {
             onClick: handleEdit,
             ariaLabel: "Edit message",
-            icon: /* @__PURE__ */ jsx(Edit, { className: "w-4 h-4 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" })
+            icon: /* @__PURE__ */ jsx(Edit, { className: "w-4 h-4 text-muted-foreground" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -209,7 +209,7 @@ function UserActionBar({
             onClick: () => void togglePinnedMessage(messageId),
             ariaLabel: pinPending ? isPinned ? "Unpinning\u2026" : "Pinning\u2026" : isPinned ? "Unpin message" : "Pin message",
             disabled: pinPending,
-            icon: pinPending ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }) : isPinned ? /* @__PURE__ */ jsx(PinOff, { className: "w-4 h-4 text-amber-500 dark:text-amber-400" }) : /* @__PURE__ */ jsx(Pin, { className: "w-4 h-4 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" })
+            icon: pinPending ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin text-muted-foreground" }) : isPinned ? /* @__PURE__ */ jsx(PinOff, { className: "w-4 h-4 text-amber-500 dark:text-amber-400" }) : /* @__PURE__ */ jsx(Pin, { className: "w-4 h-4 text-muted-foreground" })
           }
         ),
         showOptions && /* @__PURE__ */ jsx(
@@ -218,7 +218,7 @@ function UserActionBar({
             ref: setMoreOptionsAnchor,
             onClick: () => setShowOptionsMenu(true),
             ariaLabel: "More options",
-            icon: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-4 h-4 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" })
+            icon: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-4 h-4 text-muted-foreground" })
           }
         )
       ] }) : null

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-[color:var(--mx-chat-border,hsl(var(--border)))] shrink-0", children: isImage ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "relative rounded-lg overflow-hidden border border-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-[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 })
+  ) : /* @__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 })
   ] }) });
 }
 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-[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("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("p", { className: "text-[11px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] font-mono", children: source })
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground font-mono", children: source })
     ] }),
-    /* @__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: [
+    /* @__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: [
       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?" })
     ] }) })
   ] });
 }
@@ -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-[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: [
+      /* @__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: [
         "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-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
               "Hover for previews. Use the corner Remove control. Image/audio with",
               " ",
               /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "file_id" }),