@ai-matrx/chat 0.7.6 → 0.7.7

package/dist/host/server/call-api.d.ts

@@ -8,19 +8,6 @@ export declare const callApi: <T = unknown>(config: import("../defaults/server-a
 export declare const buildRequestBody: (body: unknown, scope: import("../defaults/server-api.js").DefaultCallScope) => Record<string, unknown>;
 export declare const resolveScope: (_state?: unknown, overrides?: Partial<import("../defaults/server-api.js").DefaultCallScope>) => import("../defaults/server-api.js").DefaultCallScope;
 export declare const waitForAuthReady: (_getState?: () => unknown) => Promise<boolean>;
-export declare const callConversationMemoryCost: (conversationId: string, options?: {
-    signal?: AbortSignal;
-    scopeOverrides?: Partial<import("../defaults/server-api.js").DefaultCallScope>;
-}) => import("../defaults/server-api.js").DefaultServerThunk<Promise<import("../defaults/server-api.js").DefaultApiCallResult<{
-    conversation_id: string;
-    total_cost: number;
-    total_input_tokens: number;
-    total_output_tokens: number;
-    event_count: number;
-    by_event_type: {
-        [key: string]: import("@ai-matrx/agents/generated/api-types").components["schemas"]["MemoryCostByEventType"];
-    };
-}>>>;
 export declare const callConversationFork: (options: {
     conversationId: string;
     body?: unknown;

package/dist/host/server/call-api.js

@@ -3,7 +3,6 @@ const callApi = forwardServer("callApi");
 const buildRequestBody = forwardServer("buildRequestBody");
 const resolveScope = forwardServer("resolveScope");
 const waitForAuthReady = forwardServer("waitForAuthReady");
-const callConversationMemoryCost = forwardServer("callConversationMemoryCost");
 const callConversationFork = forwardServer("callConversationFork");
 const callConversationForkAndRun = forwardServer("callConversationForkAndRun");
 const callBatchDeleteMessages = forwardServer("callBatchDeleteMessages");
@@ -23,7 +22,6 @@ export {
   callConversationDelete,
   callConversationFork,
   callConversationForkAndRun,
-  callConversationMemoryCost,
   callConversationSandboxBind,
   callConversationSandboxUnbind,
   callConversationUpdate,

package/dist/host/server/matrx-transport.d.ts

@@ -17,5 +17,4 @@ export declare const createMatrxTransportFromTarget: (getState: () => unknown, r
     source?: string;
     expectedErrorStatuses?: readonly number[];
 }) => import("@ai-matrx/agents").MatrxTransport;
-export declare const cancelAgentRunRequest: (requestId: string, mode?: "cancel" | "interrupt", seenSeq?: number) => import("../defaults/server-api.js").DefaultServerThunk<Promise<import("../defaults/server-api.js").DefaultApiCallResult<import("@ai-matrx/agents").MatrxCancelResponse>>>;
 export type MatrxTransportOptions = ChatServerTypes["MatrxTransportOptions"];

package/dist/host/server/matrx-transport.js

@@ -1,9 +1,7 @@
 import { forwardServer } from "../server.js";
 const createMatrxTransport = forwardServer("createMatrxTransport");
 const createMatrxTransportFromTarget = forwardServer("createMatrxTransportFromTarget");
-const cancelAgentRunRequest = forwardServer("cancelAgentRunRequest");
 export {
-  cancelAgentRunRequest,
   createMatrxTransport,
   createMatrxTransportFromTarget
 };

package/dist/store/root-state.d.ts

@@ -4,32 +4,15 @@ import type { ChatState } from "./state.js";
 export interface ChatStoreRegister {
 }
 /**
- * Slices the HOST owns that package code reads when present (§2.3). A private store has none of
+ * Slices the HOST owns that package code reads when present (§2.3). Identity, the active
+ * organization and the profile are NEVER read from host slices: they come from the package's own
+ * `chatHost` slice (the host's identity and org ports) — guard
+ * `store/__tests__/no-host-identity-slice-reads.test.ts`. A private store has none of
  * them, so every read is optional; a registered host store supplies the real shapes. Only the
  * fields the package reads are named, with no index signatures, so a host's concrete slice
  * interfaces (which carry extra fields) stay assignable.
  */
 export interface ChatHostReadSlices {
-    userAuth?: {
-        id: string | null;
-        email?: string | null;
-        isAnonymous?: boolean;
-        accessToken?: string | null;
-        isAdmin?: boolean;
-        adminLaneOpen?: boolean;
-        adminLevel?: string | null;
-    };
-    appContext?: {
-        organization_id?: string | null;
-    };
-    userProfile?: {
-        fingerprintId?: string | null;
-        userMetadata?: {
-            fullName?: string | null;
-            name?: string | null;
-            preferredUsername?: string | null;
-        } | null;
-    };
     cloudFiles?: {
         filesById: Record<string, {
             fileName?: string | null;

package/dist/surfaces/hooks/useSurfaceConfig.js

@@ -12,6 +12,7 @@ import {
   addRosterItem
 } from "../services/surface-config.service.js";
 import { getNamespaceHandler } from "../config/namespace-registry.js";
+import { selectUserId } from "../../host/identity.js";
 function useSurfaceConfig(surfaceName) {
   const dispatch = useAppDispatch();
   const entry = useAppSelector((s) => selectSurfaceConfigEntry(s, surfaceName));
@@ -42,7 +43,7 @@ function useSurfaceConfig(surfaceName) {
 }
 function useSurfaceAgentRoles(surfaceName) {
   const { status, roles, refresh } = useSurfaceConfig(surfaceName);
-  const userId = useAppSelector((s) => s.userAuth?.id ?? null);
+  const userId = useAppSelector(selectUserId);
   const buildView = useCallback(
     (resolved) => {
       const first = resolved.effective[0] ?? null;

package/dist/surfaces/runtime/surface-feedback.js

@@ -6,6 +6,7 @@ import {
   SURFACE_FEEDBACK_MESSAGE_MAX,
   SURFACE_FEEDBACK_MESSAGE_MIN
 } from "../manifests/_baseline.manifest.js";
+import { selectOrganizationId } from "../../host/org.js";
 const SURFACE_FEEDBACK_TARGET_NAME = PLATFORM_WRITE_TARGETS.surface_feedback.name;
 const KIND_LIST = SURFACE_FEEDBACK_KINDS.join(" | ");
 const SURFACE_FEEDBACK_TARGET = PLATFORM_WRITE_TARGETS.surface_feedback;
@@ -72,8 +73,7 @@ ${message}`,
   };
 }
 function readActiveOrganizationId() {
-  const state = getStoreSingleton()?.getState();
-  return state?.appContext?.organization_id ?? null;
+  return selectOrganizationId(getStoreSingleton()?.getState());
 }
 async function saveSurfaceFeedback(value, ctx) {
   const result = await getChatHost().feedback.submit(

package/dist/tool-call-visualization/components/ArtifactResultBar.js

@@ -92,7 +92,7 @@ function ArtifactResultBar({
           }
         },
         className: cn(
-          "group/bar flex w-full cursor-pointer items-center gap-3 border border-border/50 bg-card px-4 py-2.5 text-left transition-colors hover:bg-accent/30",
+          "group/bar flex w-full cursor-pointer items-center gap-3 border border-border/50 bg-[var(--mx-chat-card,hsl(var(--card)))] px-4 py-2.5 text-left transition-colors hover:bg-accent/30",
           // Collapsed: a full pill. Expanded: the letterhead of the attached
           // document — square bottom, no bottom border, the body continues it.
           peekExpanded ? "rounded-t-xl border-b-0" : "rounded-xl"
@@ -106,8 +106,8 @@ function ArtifactResultBar({
             }
           ),
           /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: title }),
-            /* @__PURE__ */ jsxs("span", { className: "block truncate text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
+            /* @__PURE__ */ jsxs("span", { className: "block truncate text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
               meta.noun,
               " \xB7 ",
               artifact.verbPast
@@ -121,7 +121,7 @@ function ArtifactResultBar({
                 tabIndex: 0,
                 onClick: (e) => e.stopPropagation(),
                 onKeyDown: (e) => e.stopPropagation(),
-                className: "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-xl border border-border/70 bg-background/60 px-2.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground",
+                className: "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-xl border border-border/70 bg-background/60 px-2.5 py-1.5 text-xs font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:bg-accent/40 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
                 "aria-label": "Open options",
                 children: [
                   /* @__PURE__ */ jsx(PanelRightOpen, { className: "size-3.5" }),

package/dist/tool-call-visualization/components/ChatResultColumn.d.ts

@@ -6,7 +6,7 @@ import React from "react";
  * In the real conversation, a tool card sits inside `AgentConversationColumn`'s
  * centered content (`w-full max-w-3xl mx-auto px-2`) directly on the plain
  * conversation surface — NO surrounding card, border, padding, or background
- * change. Tools that look fine inside a decorative `bg-card` demo panel can
+ * change. Tools that look fine inside a decorative `bg-[var(--mx-chat-card,hsl(var(--card)))]` demo panel can
  * render badly in chat (stray borders, odd bg shifts). Previewing in anything
  * but this column lies about how the tool actually renders, so every gallery /
  * "in action" preview must wrap its `ToolCallVisualization` in this.

package/dist/tool-call-visualization/components/ToolCallBatch.js

@@ -131,8 +131,8 @@ const ToolCallBatch = ({
               text: `Running ${count} tools\u2026`,
               className: "truncate font-sans text-sm leading-relaxed tracking-wide"
             }
-          ) : /* @__PURE__ */ jsx("span", { className: "truncate font-sans text-sm leading-relaxed tracking-wide text-muted-foreground", children: label }),
-          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+          ) : /* @__PURE__ */ jsx("span", { className: "truncate font-sans text-sm leading-relaxed tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: label }),
+          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" })
         ]
       }
     ),

package/dist/tool-call-visualization/components/ToolCallVisualization.js

@@ -282,7 +282,7 @@ const ToolCallVisualizationInner = ({
                 ) : /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: "truncate font-sans text-sm leading-relaxed tracking-wide text-muted-foreground",
+                    className: "truncate font-sans text-sm leading-relaxed tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
                     title: guardRouting?.tooltip,
                     children: phaseLabel
                   }
@@ -298,7 +298,7 @@ const ToolCallVisualizationInner = ({
                   querySubtitle
                 ] }))
               ] }),
-              isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+              isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
               /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity focus-within:opacity-100 group-hover/toolcard:opacity-100", children: [
                 /* @__PURE__ */ jsx(
                   "span",
@@ -316,7 +316,7 @@ const ToolCallVisualizationInner = ({
                         handleOpenWindowPanel();
                       }
                     },
-                    className: "cursor-pointer rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    className: "cursor-pointer rounded p-0.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:bg-[var(--mx-chat-fill,hsl(var(--muted)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
                     title: "Open in floating window",
                     children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-3 w-3" })
                   }
@@ -339,7 +339,7 @@ const ToolCallVisualizationInner = ({
                         setIsOverlayOpen(true);
                       }
                     },
-                    className: "cursor-pointer rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    className: "cursor-pointer rounded p-0.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:bg-[var(--mx-chat-fill,hsl(var(--muted)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
                     title: "Open fullscreen overlay",
                     children: /* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3" })
                   }
@@ -372,7 +372,7 @@ const ToolCallVisualizationInner = ({
                   const entryParked = parkedOnPersonOf(entry, suspendedCallIds);
                   const InlineRenderer = isErrored || entryWait || entryParked ? null : getInlineRenderer(entry.toolName);
                   return /* @__PURE__ */ jsxs("div", { children: [
-                    entries.length > 1 && /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: groupDisplayName }),
+                    entries.length > 1 && /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: groupDisplayName }),
                     entryParked ? /* @__PURE__ */ jsx(
                       ParkedOnPersonCard,
                       {

package/dist/tool-call-visualization/components/ToolTabBodies.js

@@ -34,8 +34,8 @@ const InputView = ({
   const args = entry.arguments ?? {};
   const argCount = Object.keys(args).length;
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/30 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         /* @__PURE__ */ jsx(Settings2, { className: "h-3.5 w-3.5" }),
         /* @__PURE__ */ jsx("span", { children: "Tool input" }),
         /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "px-1.5 py-0 text-[10px]", children: [
@@ -102,9 +102,9 @@ const ErrorView = ({
   const hasArgs = Object.keys(args).length > 0;
   const bundle = buildToolEntryBundle(entry);
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-        routed ? /* @__PURE__ */ jsx(Route, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(CircleAlert, { className: "h-3.5 w-3.5 text-destructive" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/30 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
+        routed ? /* @__PURE__ */ jsx(Route, { className: "h-3.5 w-3.5 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }) : /* @__PURE__ */ jsx(CircleAlert, { className: "h-3.5 w-3.5 text-destructive" }),
         /* @__PURE__ */ jsx("span", { children: routed ? "Routed" : "Error" }),
         entry.errorType && /* @__PURE__ */ jsxs(
           Badge,
@@ -134,11 +134,11 @@ const ErrorView = ({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4 overflow-auto px-3 py-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: label }),
-        message ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-muted-foreground", children: message }) : /* @__PURE__ */ jsx("p", { className: "text-sm italic text-muted-foreground", children: "No error message was recorded. Check the Raw tab for events." })
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: label }),
+        message ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: message }) : /* @__PURE__ */ jsx("p", { className: "text-sm italic text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "No error message was recorded. Check the Raw tab for events." })
       ] }),
-      hasArgs && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-t border-border pt-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Input that failed" }),
+      hasArgs && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-t border-[color:var(--mx-chat-border,hsl(var(--border)))] pt-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Input that failed" }),
         /* @__PURE__ */ jsx(KeyValueGrid, { value: args, density: "full" })
       ] })
     ] })
@@ -149,8 +149,8 @@ const RawDataView = ({
 }) => {
   const bundle = buildToolEntryBundle(entry);
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/30 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         /* @__PURE__ */ jsx(FileCode2, { className: "h-3.5 w-3.5" }),
         /* @__PURE__ */ jsx("span", { children: "All" }),
         /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "px-1.5 py-0 text-[10px]", children: [
@@ -172,7 +172,7 @@ const RawDataView = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-2", children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-[280px] overflow-hidden rounded-md border border-border bg-card", children: /* @__PURE__ */ jsx(JsonInspector, { showSource: true, data: bundle }) }) })
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-2", children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-[280px] overflow-hidden rounded-md border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))]", children: /* @__PURE__ */ jsx(JsonInspector, { showSource: true, data: bundle }) }) })
   ] });
 };
 const EntryResultsBody = ({ entry, conversationId: conversationIdProp }) => {

package/dist/tool-call-visualization/components/ToolUpdatesOverlay.js

@@ -19,8 +19,8 @@ import {
 import { Button } from "@ai-matrx/design-system/controls";
 const EntrySelector = ({ entries, selectedCallId, onSelect }) => {
   if (entries.length <= 1) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1.5 overflow-x-auto border-b border-border bg-muted/40 px-3 py-1.5 scrollbar-none", children: [
-    /* @__PURE__ */ jsx("span", { className: "mr-1 flex-shrink-0 text-xs text-muted-foreground", children: "Tool" }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1.5 overflow-x-auto border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-muted/40 px-3 py-1.5 scrollbar-none", children: [
+    /* @__PURE__ */ jsx("span", { className: "mr-1 flex-shrink-0 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Tool" }),
     entries.map((entry, idx) => {
       const label = getToolDisplayName(entry.toolName);
       const isActive = entry.callId === selectedCallId;
@@ -72,7 +72,7 @@ const InputTabContent = ({ entries, selectedCallId, onSelect }) => {
         onSelect
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(InputView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(InputView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
   ] });
 };
 const RawTabContent = ({ entries, selectedCallId, onSelect }) => {
@@ -86,7 +86,7 @@ const RawTabContent = ({ entries, selectedCallId, onSelect }) => {
         onSelect
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(RawDataView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(RawDataView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
   ] });
 };
 const ToolUpdatesOverlay = ({

package/dist/tool-call-visualization/configured-rows/ConfiguredToolRow.js

@@ -40,7 +40,7 @@ function ConfiguredToolRow({ entry, kind, cfg }) {
             kind === "server" && /* @__PURE__ */ jsx(
               ChevronRight,
               {
-                className: `size-3 shrink-0 text-muted-foreground transition-transform ${open ? "rotate-90" : ""}`
+                className: `size-3 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-transform ${open ? "rotate-90" : ""}`
               }
             ),
             /* @__PURE__ */ jsx(
@@ -53,18 +53,18 @@ function ConfiguredToolRow({ entry, kind, cfg }) {
                 spin: shouldSpin
               }
             ),
-            headerLabel && /* @__PURE__ */ jsx("span", { className: cn("truncate text-foreground", shimmer && "min-w-0"), children: shimmer ? /* @__PURE__ */ jsx(ShimmerText, { text: headerLabel }) : headerLabel }),
+            headerLabel && /* @__PURE__ */ jsx("span", { className: cn("truncate text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", shimmer && "min-w-0"), children: shimmer ? /* @__PURE__ */ jsx(ShimmerText, { text: headerLabel }) : headerLabel }),
             infoText && /* @__PURE__ */ jsx(
               "span",
               {
                 className: cn(
-                  "text-muted-foreground",
+                  "text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
                   inline.isMultiline ? "whitespace-pre-wrap" : "truncate"
                 ),
                 children: infoText
               }
             ),
-            phase !== "started" && entry.endedAt && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[10px] text-muted-foreground", children: [
+            phase !== "started" && entry.endedAt && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
               Math.max(1, entry.endedAt - entry.startedAt),
               "ms"
             ] })
@@ -144,7 +144,7 @@ function ExpandedBody({ entry, cfg, skipResults = false }) {
 const preClass = "mt-0.5 max-h-48 overflow-auto rounded-md bg-background/60 p-1.5 text-[11px] leading-snug";
 function SectionLabel({ label, children }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: label }),
     children
   ] });
 }
@@ -167,7 +167,7 @@ function renderStandardDisplay(value, displayType) {
     const entries = Object.entries(value);
     if (entries.length === 0) return null;
     if (displayType === "values-only") {
-      return /* @__PURE__ */ jsx("ul", { className: "mt-0.5 list-disc space-y-0.5 pl-4 text-[11px] text-foreground", children: entries.map(([k, v]) => /* @__PURE__ */ jsx("li", { children: stringifyValue(v) }, k)) });
+      return /* @__PURE__ */ jsx("ul", { className: "mt-0.5 list-disc space-y-0.5 pl-4 text-[11px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: entries.map(([k, v]) => /* @__PURE__ */ jsx("li", { children: stringifyValue(v) }, k)) });
     }
     return /* @__PURE__ */ jsx("div", { className: "mt-0.5 grid grid-cols-[minmax(0,auto)_1fr] gap-x-2 gap-y-0.5 text-[11px]", children: entries.map(([k, v]) => /* @__PURE__ */ jsx(FieldRow, { k, v }, k)) });
   }
@@ -175,8 +175,8 @@ function renderStandardDisplay(value, displayType) {
 }
 function FieldRow({ k, v }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: k }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-foreground", children: stringifyValue(v) })
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: k }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: stringifyValue(v) })
   ] });
 }
 function CustomResults({ result, keysInfo }) {

package/dist/tool-call-visualization/configured-rows/CopyToolButton.js

@@ -49,7 +49,7 @@ function CopyToolButton({ data, className }) {
       title: copied ? "Copied!" : "Copy tool data",
       "aria-label": "Copy tool data",
       className: cn(
-        "inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted/60 hover:text-foreground focus:opacity-100 group-hover:opacity-100",
+        "inline-flex size-5 shrink-0 items-center justify-center rounded text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] opacity-0 transition-opacity hover:bg-muted/60 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))] focus:opacity-100 group-hover:opacity-100",
         copied && "opacity-100 text-emerald-600 dark:text-emerald-400",
         className
       ),

package/dist/tool-call-visualization/configured-rows/ToolProgressView.js

@@ -24,7 +24,7 @@ function ToolProgressView({ progress, phase, cfg }) {
     }
   );
 }
-const lineClass = "flex items-center gap-1.5 text-[11px] leading-snug text-muted-foreground";
+const lineClass = "flex items-center gap-1.5 text-[11px] leading-snug text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]";
 const wrapClass = "mt-1 ml-5 border-l border-border/50 pl-2 space-y-0.5";
 function entryLabel(e) {
   return e.label ?? e.step ?? e.status ?? "\u2026";
@@ -33,7 +33,7 @@ function PercentBar({ percent }) {
   const pct = percent <= 1 ? percent * 100 : percent;
   const clamped = Math.max(0, Math.min(100, pct));
   return /* @__PURE__ */ jsxs("span", { className: "ml-auto inline-flex items-center gap-1", children: [
-    /* @__PURE__ */ jsx("span", { className: "h-1 w-16 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("span", { className: "h-1 w-16 overflow-hidden rounded-full bg-[var(--mx-chat-fill,hsl(var(--muted)))]", children: /* @__PURE__ */ jsx(
       "span",
       {
         className: "block h-full rounded-full bg-primary/70 transition-all",
@@ -60,7 +60,7 @@ function LogProgress({
         {
           type: "button",
           onClick: () => setOpen((v) => !v),
-          className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground",
+          className: "inline-flex items-center gap-1 text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
           children: [
             open ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
             entries.length,
@@ -89,8 +89,8 @@ function LogProgress({
 function ProgressLine({ e, active }) {
   const errored = e.status === "error";
   return /* @__PURE__ */ jsxs("div", { className: cn(lineClass, errored && "text-red-600 dark:text-red-400"), children: [
-    active ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-primary" }) : errored ? /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "size-3 shrink-0 text-center text-muted-foreground/40", children: "\xB7" }),
-    /* @__PURE__ */ jsx("span", { className: cn(active ? "truncate text-foreground" : "truncate"), children: entryLabel(e) }),
+    active ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" }) : errored ? /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "size-3 shrink-0 text-center text-muted-foreground/40", children: "\xB7" }),
+    /* @__PURE__ */ jsx("span", { className: cn(active ? "truncate text-[color:var(--mx-chat-text,hsl(var(--foreground)))]" : "truncate"), children: entryLabel(e) }),
     typeof e.percent === "number" && /* @__PURE__ */ jsx(PercentBar, { percent: e.percent })
   ] });
 }
@@ -123,7 +123,7 @@ function StepsProgress({
         className: cn(
           lineClass,
           status === "error" && "text-red-600 dark:text-red-400",
-          status === "done" && "text-foreground"
+          status === "done" && "text-[color:var(--mx-chat-text,hsl(var(--foreground)))]"
         ),
         children: [
           /* @__PURE__ */ jsx(StepIcon, { status }),
@@ -136,7 +136,7 @@ function StepsProgress({
   }) });
 }
 function StepIcon({ status }) {
-  if (status === "active") return /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-primary" });
+  if (status === "active") return /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-[color:var(--mx-chat-accent,hsl(var(--primary)))]" });
   if (status === "done")
     return /* @__PURE__ */ jsx(Check, { className: "size-3 shrink-0 text-emerald-600 dark:text-emerald-400" });
   if (status === "error") return /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" });

package/dist/tool-call-visualization/configured-rows/field-components.js

@@ -68,7 +68,7 @@ const Base64Image = ({ value, className }) => {
         className: "max-h-[28rem] w-full rounded-md border border-border/40 object-contain"
       }
     ),
-    meta && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground", children: meta })
+    meta && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: meta })
   ] });
 };
 function toDataUri(value) {
@@ -122,7 +122,7 @@ const Chips = ({ value, className }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-1", className), children: items.map((item, i) => /* @__PURE__ */ jsx(
     "span",
     {
-      className: "inline-flex rounded-md border border-border/50 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px] text-foreground",
+      className: "inline-flex rounded-md border border-border/50 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px] text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
       children: item
     },
     `${item}-${i}`
@@ -151,16 +151,16 @@ const TabCard = ({ value, className }) => {
             className: "size-5 shrink-0 rounded-sm object-contain",
             onError: () => setFaviconErr(true)
           }
-        ) : /* @__PURE__ */ jsx(Globe, { className: "size-5 shrink-0 text-muted-foreground" }),
+        ) : /* @__PURE__ */ jsx(Globe, { className: "size-5 shrink-0 text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]" }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
-          title && /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] font-medium text-foreground", children: title }),
+          title && /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] font-medium text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
           url && /* @__PURE__ */ jsx(
             "a",
             {
               href: url,
               target: "_blank",
               rel: "noreferrer noopener",
-              className: "block truncate text-[10px] text-muted-foreground hover:text-foreground hover:underline",
+              className: "block truncate text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))] hover:underline",
               onClick: (e) => e.stopPropagation(),
               children: url
             }
@@ -201,7 +201,7 @@ const ExtractTableField = ({ value, className }) => {
         );
       }) }, r.index ?? ri)) })
     ] }),
-    obj.truncated === true && /* @__PURE__ */ jsx("div", { className: "border-t border-border/30 bg-muted/30 px-2 py-1 text-[10px] text-muted-foreground", children: "Table was truncated" })
+    obj.truncated === true && /* @__PURE__ */ jsx("div", { className: "border-t border-border/30 bg-muted/30 px-2 py-1 text-[10px] text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Table was truncated" })
   ] });
 };
 const fieldComponents = {

package/dist/tool-call-visualization/registry/GenericRenderer.js

@@ -57,7 +57,7 @@ const ProgressLine = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground animate-in fade-in slide-in-from-bottom-1 duration-300",
+      className: "flex min-w-0 items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] animate-in fade-in slide-in-from-bottom-1 duration-300",
       style: {
         animationDelay: `${index * 60}ms`,
         animationFillMode: "backwards"
@@ -89,7 +89,7 @@ const GenericRenderer = ({
     );
   }
   if (isComplete && entry.result == null) {
-    return /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Completed. No output was captured for this call." });
+    return /* @__PURE__ */ jsx("div", { className: "text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: "Completed. No output was captured for this call." });
   }
   if (!isComplete || entry.result == null) {
     const source = events && events.length > 0 ? collectMessages(events) : entry.latestMessage ? [entry.latestMessage] : [];
@@ -104,7 +104,7 @@ const GenericRenderer = ({
         },
         `${i}-${msg.slice(0, 16)}`
       )) }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
         /* @__PURE__ */ jsx("span", { children: "Working\u2026" })
       ] })
@@ -150,7 +150,7 @@ const GenericRenderer = ({
           e.stopPropagation();
           onOpenOverlay(`tool-group-${groupId}`);
         },
-        className: "group flex w-full items-center justify-between gap-2 rounded border border-border/60 px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground",
+        className: "group flex w-full items-center justify-between gap-2 rounded border border-border/60 px-2 py-1 text-xs text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-colors hover:border-primary/40 hover:text-[color:var(--mx-chat-text,hsl(var(--foreground)))]",
         children: [
           /* @__PURE__ */ jsx("span", { children: "View complete result" }),
           /* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3 shrink-0" })

package/dist/tool-call-visualization/renderers/_shared-entity/EmptyResultCard.js

@@ -23,7 +23,7 @@ function EmptyResultCard({
       title,
       subtitle: `${did} \xB7 nothing to show`,
       actions,
-      children: /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-xs leading-relaxed text-muted-foreground", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-xs leading-relaxed text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]", children: [
         did,
         ", but the tool returned nothing to open from here. ",
         remedy

package/dist/tool-call-visualization/renderers/_shared-entity/EntityCard.js

@@ -38,7 +38,7 @@ function EntityCard({
     "div",
     {
       className: cn(
-        "overflow-hidden rounded-xl border border-border bg-card text-card-foreground",
+        "overflow-hidden rounded-xl border border-[color:var(--mx-chat-border,hsl(var(--border)))] bg-[var(--mx-chat-card,hsl(var(--card)))] text-card-foreground",
         className
       ),
       children: [
@@ -61,7 +61,7 @@ function EntityCard({
             children: [
               /* @__PURE__ */ jsx(ToolGlyph, { icon, accent, size: "lg" }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold leading-tight text-foreground", children: title }),
+                /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold leading-tight text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: title }),
                 subtitle || hoverAct ? /* @__PURE__ */ jsxs("div", { className: "relative mt-0.5 h-4 text-xs leading-tight", children: [
                   subtitle ? /* @__PURE__ */ jsx(
                     "span",
@@ -69,7 +69,7 @@ function EntityCard({
                       className: cn(
                         // Text only: it never takes the press meant for the hover action drawn over it
                         // (review 2: "Open in window" was covered by this span and could not be clicked).
-                        "pointer-events-none absolute inset-0 truncate text-muted-foreground transition-opacity",
+                        "pointer-events-none absolute inset-0 truncate text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))] transition-opacity",
                         hoverAct && "group-hover/eh:opacity-0 group-focus-within/eh:opacity-0"
                       ),
                       children: subtitle
@@ -84,7 +84,7 @@ function EntityCard({
                         hoverAct.onSelect?.();
                       },
                       "data-entity-hover-action": "",
-                      className: "absolute inset-0 flex w-full items-center gap-1 truncate text-left font-medium text-primary opacity-0 transition-opacity pointer-events-none group-hover/eh:pointer-events-auto group-hover/eh:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100",
+                      className: "absolute inset-0 flex w-full items-center gap-1 truncate text-left font-medium text-[color:var(--mx-chat-accent,hsl(var(--primary)))] opacity-0 transition-opacity pointer-events-none group-hover/eh:pointer-events-auto group-hover/eh:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100",
                       children: [
                         hoverAct.icon ? /* @__PURE__ */ jsx(hoverAct.icon, { className: "h-3 w-3 shrink-0" }) : null,
                         /* @__PURE__ */ jsx("span", { className: "truncate", children: hoverAct.label }),
@@ -150,7 +150,7 @@ function EntityCard({
               "grid transition-[grid-template-rows] duration-300 ease-in-out",
               open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
-            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "border-t border-border", children }) })
+            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "border-t border-[color:var(--mx-chat-border,hsl(var(--border)))]", children }) })
           }
         ) : null
       ]

package/dist/tool-call-visualization/renderers/_shared-entity/PartPeekPopover.js

@@ -28,13 +28,13 @@ function PartPeekPopover({
             "div",
             {
               className: cn(
-                "border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground",
+                "border-b border-[color:var(--mx-chat-border,hsl(var(--border)))] px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-[color:var(--mx-chat-text-secondary,hsl(var(--muted-foreground)))]",
                 headerClassName ?? "bg-muted/40"
               ),
               children: header
             }
           ) : null,
-          /* @__PURE__ */ jsx("div", { className: "px-3 py-2.5 text-xs leading-relaxed text-foreground", children: body })
+          /* @__PURE__ */ jsx("div", { className: "px-3 py-2.5 text-xs leading-relaxed text-[color:var(--mx-chat-text,hsl(var(--foreground)))]", children: body })
         ]
       }
     )