@tangle-network/ui 9.1.0 → 9.1.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @tangle-network/ui
 
+## 9.1.2
+
+### Patch Changes
+
+- d50f746: Give run/timeline tool rows a proper elevation ladder. Rows read as the same value as the canvas: `InlineToolItem` used `bg-card/40` (near-transparent) and RunGroup's OpenUI/running blocks used `bg-[var(--bg-root)]` (literally the page background). Both now use `--md3-surface-container` — one clear step above the `--bg-root` canvas — with hover/open stepping to `--md3-surface-container-high`. Rows now separate from the background instead of blending into it.
+- d50f746: One user-message bubble. There were two: the exported `UserMessage` (a loud filled purple bubble with an uppercase "You" label + shadow, used by the run/message list) and a separate cleaner inline bubble inside `AgentTimeline`. Unify on the clean one — `UserMessage` is now a quiet right-aligned bordered bubble on the muted surface (no fill, no uppercase label), and `AgentTimeline` renders through it instead of its own copy. `UserMessage` accepts either session-model `parts` or a direct `content`/`timestamp`, so both call sites share it.
+
+## 9.1.1
+
+### Patch Changes
+
+- a8d770e: Give run/timeline tool rows a proper elevation ladder. Rows read as the same value as the canvas: `InlineToolItem` used `bg-card/40` (near-transparent) and RunGroup's OpenUI/running blocks used `bg-[var(--bg-root)]` (literally the page background). Both now use `--md3-surface-container` — one clear step above the `--bg-root` canvas — with hover/open stepping to `--md3-surface-container-high`. Rows now separate from the background instead of blending into it.
+
 ## 9.1.0
 
 ### Minor Changes

package/dist/chat.d.ts

@@ -75,15 +75,20 @@ interface MessageListProps {
 declare const MessageList: React.MemoExoticComponent<({ groups, partMap, isCollapsed, onToggleCollapse, branding, renderToolDetail, renderRunActions, renderUserMessageActions, renderToolActions, }: MessageListProps) => react_jsx_runtime.JSX.Element>;
 
 interface UserMessageProps {
-    message: SessionMessage;
-    parts: SessionPart[];
+    /** Session-model input: text is derived from these parts. */
+    message?: SessionMessage;
+    parts?: SessionPart[];
+    /** Direct-content input (e.g. AgentTimeline): explicit text + timestamp. */
+    content?: string;
+    timestamp?: Date;
     actions?: ReactNode;
 }
 /**
- * Simple user message bubble.
- * Renders text parts from the user's message.
+ * The single user message bubble — a quiet, right-aligned bordered bubble on the
+ * muted surface (no loud fill, no uppercase label). Used by both the run/message
+ * list (session-model `parts`) and AgentTimeline (direct `content`/`timestamp`).
  */
-declare const UserMessage: React.MemoExoticComponent<({ message, parts, actions }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
+declare const UserMessage: React.MemoExoticComponent<({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
 
 type MessageRole = "user" | "assistant" | "system";
 interface ChatMessageProps {

package/dist/chat.js

@@ -5,10 +5,10 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-4RDW4GFG.js";
+} from "./chunk-BQVQGDDV.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-CVXAXVYZ.js";
-import "./chunk-J6RQHBHR.js";
+import "./chunk-KWRLQ3MR.js";
+import "./chunk-WVW4KHEH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

package/dist/{chunk-4RDW4GFG.js → chunk-BQVQGDDV.js}

@@ -6,11 +6,11 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-CVXAXVYZ.js";
+} from "./chunk-KWRLQ3MR.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-J6RQHBHR.js";
+} from "./chunk-WVW4KHEH.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-ULDNFLIM.js";
@@ -38,17 +38,22 @@ import { memo as memo2 } from "react";
 // src/chat/user-message.tsx
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var UserMessage = memo(({ message, parts, actions }) => {
-  const textContent = parts.filter((p) => p.type === "text").map((p) => p.text).join("\n");
-  if (!textContent.trim()) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[78%] flex-col items-end gap-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[26px] rounded-br-[12px] bg-[var(--brand-primary)] px-4 py-3 text-white shadow-[0_8px_20px_rgba(15,23,42,0.12)]", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/60", children: "You" }),
-      /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[15px] leading-6.5 text-white", children: textContent })
-    ] }),
-    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground", children: actions }) : null
-  ] }) });
-});
+function formatTime(date) {
+  return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+var UserMessage = memo(
+  ({ message: _message, parts, content, timestamp, actions }) => {
+    const text = content ?? (parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join("\n");
+    if (!text.trim()) return null;
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[78%] flex-col items-end gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-full rounded-2xl border border-border bg-muted/50 px-4 py-3", children: [
+        timestamp ? /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(timestamp) }) : null,
+        /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: text })
+      ] }),
+      actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground", children: actions }) : null
+    ] }) });
+  }
+);
 UserMessage.displayName = "UserMessage";
 
 // src/chat/message-list.tsx
@@ -162,7 +167,7 @@ var TONE_STYLES = {
     icon: AlertTriangle
   }
 };
-function formatTime(date) {
+function formatTime2(date) {
   return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
 }
 function AgentTimelineRow({ isLast, accentClassName, children }) {
@@ -174,15 +179,9 @@ function AgentTimelineRow({ isLast, accentClassName, children }) {
     /* @__PURE__ */ jsx4("div", { className: "min-w-0 pb-3", children })
   ] });
 }
-function UserMessage2({ item }) {
-  return /* @__PURE__ */ jsx4("div", { className: "mb-3 flex justify-end", children: /* @__PURE__ */ jsx4("div", { className: "max-w-[72%]", children: /* @__PURE__ */ jsxs3("div", { className: "rounded-2xl border border-border bg-muted/50 px-4 py-3", children: [
-    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(item.timestamp) }),
-    /* @__PURE__ */ jsx4("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: item.content })
-  ] }) }) });
-}
 function AssistantMessage({ item }) {
   return /* @__PURE__ */ jsxs3("div", { className: "-mt-0.5", children: [
-    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-2 text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(item.timestamp) }),
+    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-2 text-[var(--font-size-xs)] text-muted-foreground", children: formatTime2(item.timestamp) }),
     item.content && /* @__PURE__ */ jsx4(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]", children: item.content }),
     item.isStreaming && /* @__PURE__ */ jsx4("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-primary align-text-bottom" }),
     item.toolCalls && /* @__PURE__ */ jsx4("div", { className: "mt-3", children: item.toolCalls }),
@@ -243,7 +242,7 @@ function AgentTimeline({
   const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
   return /* @__PURE__ */ jsx4("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: renderedItems.map((item, index) => {
     if (item.kind === "message" && item.role === "user") {
-      return /* @__PURE__ */ jsx4(UserMessage2, { item }, item.id);
+      return /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }, item.id);
     }
     const timelineIndex = timelineItems.indexOf(item);
     const isLast = timelineIndex === timelineItems.length - 1;
@@ -643,7 +642,7 @@ function ChatMessage({
       children: [
         !hideRoleLabel && /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse"), children: [
           /* @__PURE__ */ jsx6("span", { className: "font-medium text-foreground text-xs", children: isUser ? userLabel : assistantLabel }),
-          timestamp && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: formatTime2(timestamp) })
+          timestamp && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: formatTime3(timestamp) })
         ] }),
         /* @__PURE__ */ jsxs5(
           "div",
@@ -666,7 +665,7 @@ function ChatMessage({
     }
   );
 }
-function formatTime2(date) {
+function formatTime3(date) {
   return date.toLocaleTimeString(void 0, {
     hour: "numeric",
     minute: "2-digit"

package/dist/{chunk-A5HKP3NA.js → chunk-IVQYFG5D.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-N5DJ4TUO.js";
+} from "./chunk-V6BF4AZ7.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-CVXAXVYZ.js → chunk-KWRLQ3MR.js}

@@ -1,7 +1,7 @@
 import {
   InlineToolItem,
   LiveDuration
-} from "./chunk-J6RQHBHR.js";
+} from "./chunk-WVW4KHEH.js";
 import {
   formatDuration,
   truncateText
@@ -347,7 +347,7 @@ var RunGroup = memo2(
             return /* @__PURE__ */ jsxs2(
               "div",
               {
-                className: "overflow-hidden rounded-[22px] border border-[var(--border-subtle)] bg-[var(--bg-root)]",
+                className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]",
                 children: [
                   summary ? /* @__PURE__ */ jsx2("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground", children: summary }) : null,
                   /* @__PURE__ */ jsx2("div", { className: "p-4", children: /* @__PURE__ */ jsx2(OpenUIArtifactRenderer, { schema }) })
@@ -360,7 +360,7 @@ var RunGroup = memo2(
             return /* @__PURE__ */ jsxs2(
               "div",
               {
-                className: "flex items-center gap-2 rounded-[18px] border border-[var(--border-subtle)] bg-[var(--bg-root)] px-4 py-3 text-sm text-muted-foreground",
+                className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
                   "Building view\u2026"
@@ -423,12 +423,12 @@ var RunGroup = memo2(
             const schema = extractOpenUISchema(toolPart.state.output);
             const summary = getOpenUISummary(toolPart.state.output);
             if (toolPart.state.status === "completed" && schema) {
-              node = /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
+              node = /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]", children: [
                 summary ? /* @__PURE__ */ jsx2("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground", children: summary }) : null,
                 /* @__PURE__ */ jsx2("div", { className: "p-4", children: /* @__PURE__ */ jsx2(OpenUIArtifactRenderer, { schema }) })
               ] });
             } else if (toolPart.state.status === "running") {
-              node = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground", children: [
+              node = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground", children: [
                 /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
                 "Building view\u2026"
               ] });

package/dist/{chunk-N5DJ4TUO.js → chunk-V6BF4AZ7.js}

@@ -1,7 +1,7 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-J6RQHBHR.js";
+} from "./chunk-WVW4KHEH.js";
 import {
   Markdown
 } from "./chunk-FJBTCTZM.js";

package/dist/{chunk-J6RQHBHR.js → chunk-WVW4KHEH.js}

@@ -227,8 +227,8 @@ var InlineToolItem = memo2(
           {
             className: cn(
               "w-full border text-left transition-colors",
-              "border-[var(--border-subtle)] bg-card/40 hover:border-border hover:bg-accent/25",
-              open && "border-border bg-accent/20",
+              "border-[var(--border-subtle)] bg-[var(--md3-surface-container)] hover:border-border hover:bg-[var(--md3-surface-container-high)]",
+              open && "border-border bg-[var(--md3-surface-container-high)]",
               shapeClass,
               className
             ),

package/dist/hooks.js

@@ -11,15 +11,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-A5HKP3NA.js";
+} from "./chunk-IVQYFG5D.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-N5DJ4TUO.js";
-import "./chunk-J6RQHBHR.js";
+import "./chunk-V6BF4AZ7.js";
+import "./chunk-WVW4KHEH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-A5HKP3NA.js";
+} from "./chunk-IVQYFG5D.js";
 import {
   addMessage,
   addParts,
@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-4RDW4GFG.js";
+} from "./chunk-BQVQGDDV.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -147,16 +147,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-N5DJ4TUO.js";
+} from "./chunk-V6BF4AZ7.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-CVXAXVYZ.js";
+} from "./chunk-KWRLQ3MR.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-J6RQHBHR.js";
+} from "./chunk-WVW4KHEH.js";
 import {
   TOOL_CATEGORY_ICONS,
   formatBytes,

package/dist/run.js

@@ -2,16 +2,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-N5DJ4TUO.js";
+} from "./chunk-V6BF4AZ7.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-CVXAXVYZ.js";
+} from "./chunk-KWRLQ3MR.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-J6RQHBHR.js";
+} from "./chunk-WVW4KHEH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

package/dist/sdk-hooks.js

@@ -5,15 +5,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-A5HKP3NA.js";
+} from "./chunk-IVQYFG5D.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-N5DJ4TUO.js";
-import "./chunk-J6RQHBHR.js";
+import "./chunk-V6BF4AZ7.js";
+import "./chunk-WVW4KHEH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "9.1.0",
+  "version": "9.1.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/agent-timeline.tsx

@@ -8,6 +8,7 @@ import {
 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { type MessageRole } from "./chat-message";
+import { UserMessage } from "./user-message";
 import { Markdown } from "../markdown/markdown";
 import { ThinkingIndicator } from "./thinking-indicator";
 import { type ToolCallData } from "../run/tool-call-feed";
@@ -146,25 +147,6 @@ function AgentTimelineRow({ isLast, accentClassName, children }: AgentTimelineRo
   );
 }
 
-function UserMessage({ item }: { item: AgentTimelineMessageItem }) {
-  return (
-    <div className="mb-3 flex justify-end">
-      <div className="max-w-[72%]">
-        <div className="rounded-2xl border border-border bg-muted/50 px-4 py-3">
-          {item.timestamp && (
-            <div className="mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground">
-              {formatTime(item.timestamp)}
-            </div>
-          )}
-          <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground">
-            {item.content}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 function AssistantMessage({ item }: { item: AgentTimelineMessageItem }) {
   return (
     <div className="-mt-0.5">
@@ -285,7 +267,7 @@ export function AgentTimeline({
       {renderedItems.map((item, index) => {
         // User messages: right-aligned bubble, no connector
         if (item.kind === "message" && item.role === "user") {
-          return <UserMessage key={item.id} item={item} />;
+          return <UserMessage key={item.id} content={item.content} timestamp={item.timestamp} />;
         }
 
         const timelineIndex = timelineItems.indexOf(item);

package/src/chat/user-message.tsx

@@ -3,41 +3,56 @@ import type { SessionMessage } from "../types/message";
 import type { SessionPart } from "../types/parts";
 
 export interface UserMessageProps {
-  message: SessionMessage;
-  parts: SessionPart[];
+  /** Session-model input: text is derived from these parts. */
+  message?: SessionMessage;
+  parts?: SessionPart[];
+  /** Direct-content input (e.g. AgentTimeline): explicit text + timestamp. */
+  content?: string;
+  timestamp?: Date;
   actions?: ReactNode;
 }
 
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+}
+
 /**
- * Simple user message bubble.
- * Renders text parts from the user's message.
+ * The single user message bubble — a quiet, right-aligned bordered bubble on the
+ * muted surface (no loud fill, no uppercase label). Used by both the run/message
+ * list (session-model `parts`) and AgentTimeline (direct `content`/`timestamp`).
  */
-export const UserMessage = memo(({ message, parts, actions }: UserMessageProps) => {
-  const textContent = parts
-    .filter((p) => p.type === "text")
-    .map((p) => (p as { text: string }).text)
-    .join("\n");
+export const UserMessage = memo(
+  ({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => {
+    const text =
+      content ??
+      (parts ?? [])
+        .filter((p) => p.type === "text")
+        .map((p) => (p as { text: string }).text)
+        .join("\n");
 
-  if (!textContent.trim()) return null;
+    if (!text.trim()) return null;
 
-  return (
-    <div className="flex justify-end">
-      <div className="flex max-w-[78%] flex-col items-end gap-2">
-        <div className="w-full rounded-[26px] rounded-br-[12px] bg-[var(--brand-primary)] px-4 py-3 text-white shadow-[0_8px_20px_rgba(15,23,42,0.12)]">
-          <div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/60">
-            You
-          </div>
-          <div className="whitespace-pre-wrap text-[15px] leading-6.5 text-white">
-            {textContent}
+    return (
+      <div className="flex justify-end">
+        <div className="flex max-w-[78%] flex-col items-end gap-2">
+          <div className="w-full rounded-2xl border border-border bg-muted/50 px-4 py-3">
+            {timestamp ? (
+              <div className="mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground">
+                {formatTime(timestamp)}
+              </div>
+            ) : null}
+            <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground">
+              {text}
+            </div>
           </div>
+          {actions ? (
+            <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
+              {actions}
+            </div>
+          ) : null}
         </div>
-        {actions ? (
-          <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
-            {actions}
-          </div>
-        ) : null}
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 UserMessage.displayName = "UserMessage";

package/src/run/inline-tool-item.tsx

@@ -109,8 +109,8 @@ export const InlineToolItem = memo(
             <button
               className={cn(
                 "w-full border text-left transition-colors",
-                "border-[var(--border-subtle)] bg-card/40 hover:border-border hover:bg-accent/25",
-                open && "border-border bg-accent/20",
+                "border-[var(--border-subtle)] bg-[var(--md3-surface-container)] hover:border-border hover:bg-[var(--md3-surface-container-high)]",
+                open && "border-border bg-[var(--md3-surface-container-high)]",
                 shapeClass,
                 className,
               )}

package/src/run/run-group.tsx

@@ -366,7 +366,7 @@ export const RunGroup = memo(
                   return (
                     <div
                       key={key}
-                      className="overflow-hidden rounded-[22px] border border-[var(--border-subtle)] bg-[var(--bg-root)]"
+                      className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]"
                     >
                       {summary ? (
                         <div className="border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground">
@@ -384,7 +384,7 @@ export const RunGroup = memo(
                   return (
                     <div
                       key={key}
-                      className="flex items-center gap-2 rounded-[18px] border border-[var(--border-subtle)] bg-[var(--bg-root)] px-4 py-3 text-sm text-muted-foreground"
+                      className="flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground"
                     >
                       <Loader2 className="h-4 w-4 animate-spin text-primary" />
                       Building view…
@@ -493,7 +493,7 @@ export const RunGroup = memo(
 
                     if (toolPart.state.status === "completed" && schema) {
                       node = (
-                        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]">
+                        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]">
                           {summary ? (
                             <div className="border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground">
                               {summary}
@@ -506,7 +506,7 @@ export const RunGroup = memo(
                       );
                     } else if (toolPart.state.status === "running") {
                       node = (
-                        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground">
+                        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground">
                           <Loader2 className="h-4 w-4 animate-spin text-primary" />
                           Building view…
                         </div>