@tangle-network/ui 9.1.1 → 9.1.3

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @tangle-network/ui
 
+## 9.1.3
+
+### Patch Changes
+
+- 26cc012: 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.
+- 26cc012: 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.
+- 26cc012: WCAG 1.4.3 AA contrast fixes across all 7 themes (measured with a cascade-resolved contrast audit).
+
+  - **Primary buttons**: `text-primary-foreground` on `bg-primary` was below 4.5:1 in `dark` (4.41) and `arena-light` (4.20). Darkened those two primaries (dark L 67%→62%, arena-light L 30%→27%) — all 7 themes now ≥5.0:1, hue unchanged.
+  - **Status colors in the named light themes**: `aubergine-light` / `arena-light` / `tangle-light` inherited the dark `:root` bright status palette (`#f87171`/`#34D399`/…), so danger/success text + glyphs dropped to ~2.5:1 on their light surfaces. Added a shared light-tuned status palette (dark-on-light text, mirroring the base light theme) — status text now passes AA and glyphs pass 1.4.11.
+  - **Running tool state**: the "running" label + spinner used `text-primary`, which fell to 2.98:1 on the dark row surface. Switched to `--accent-text` (the readable accent tier) — passes in every theme.
+  - **Thinking timer**: the elapsed-seconds counter used the faint `--text-dim` tier (~3:1). Moved it to `--text-muted` (passes AA everywhere).
+
+  Text now meets AA in all 7 themes; most pairs are AAA.
+
+- Updated dependencies [26cc012]
+  - @tangle-network/brand@0.8.2
+
+## 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

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-YUY6D62P.js";
+} from "./chunk-7BMLW3H2.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-KWRLQ3MR.js";
-import "./chunk-WVW4KHEH.js";
+import "./chunk-HHYUPAOJ.js";
+import "./chunk-INMWNFAS.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

package/dist/{chunk-YUY6D62P.js → chunk-7BMLW3H2.js}

@@ -6,11 +6,11 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-KWRLQ3MR.js";
+} from "./chunk-HHYUPAOJ.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-WVW4KHEH.js";
+} from "./chunk-INMWNFAS.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
@@ -121,7 +126,7 @@ function ThinkingIndicator({ className }) {
       /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
       /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
     ] }),
-    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-[var(--text-dim)]", children: [
+    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-muted-foreground", children: [
       elapsed,
       "s"
     ] })
@@ -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-IVQYFG5D.js → chunk-CCM2KRQH.js}

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

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

@@ -1,7 +1,7 @@
 import {
   InlineToolItem,
   LiveDuration
-} from "./chunk-WVW4KHEH.js";
+} from "./chunk-INMWNFAS.js";
 import {
   formatDuration,
   truncateText

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

@@ -236,7 +236,7 @@ var InlineToolItem = memo2(
               /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2.5 px-3 py-2.5", children: [
                 /* @__PURE__ */ jsx3("div", { className: cn(
                   "shrink-0",
-                  isRunning && "text-primary",
+                  isRunning && "text-[var(--accent-text)]",
                   isComplete && "text-[var(--surface-success-text)]",
                   isError && "text-[var(--surface-danger-text)]",
                   !isRunning && !isComplete && !isError && "text-muted-foreground"
@@ -247,7 +247,7 @@ var InlineToolItem = memo2(
                   isRunning && startTime ? /* @__PURE__ */ jsx3(LiveDuration, { startTime }) : null,
                   !isRunning && durationMs != null ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-mono tabular-nums text-muted-foreground", children: formatDuration(durationMs) }) : null,
                   isError ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-medium text-[var(--surface-danger-text)]", children: "failed" }) : null,
-                  isRunning ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-medium text-primary", children: "running" }) : null,
+                  isRunning ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-medium text-[var(--accent-text)]", children: "running" }) : null,
                   open ? /* @__PURE__ */ jsx3(ChevronDown, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsx3(ChevronRight, { className: "h-3 w-3 text-muted-foreground" })
                 ] })
               ] }),

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

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

package/dist/hooks.js

@@ -11,15 +11,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-IVQYFG5D.js";
+} from "./chunk-CCM2KRQH.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-V6BF4AZ7.js";
-import "./chunk-WVW4KHEH.js";
+import "./chunk-KBOD47AW.js";
+import "./chunk-INMWNFAS.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-IVQYFG5D.js";
+} from "./chunk-CCM2KRQH.js";
 import {
   addMessage,
   addParts,
@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-YUY6D62P.js";
+} from "./chunk-7BMLW3H2.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -147,16 +147,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-V6BF4AZ7.js";
+} from "./chunk-KBOD47AW.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-KWRLQ3MR.js";
+} from "./chunk-HHYUPAOJ.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-WVW4KHEH.js";
+} from "./chunk-INMWNFAS.js";
 import {
   TOOL_CATEGORY_ICONS,
   formatBytes,

package/dist/run.js

@@ -2,16 +2,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-V6BF4AZ7.js";
+} from "./chunk-KBOD47AW.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-KWRLQ3MR.js";
+} from "./chunk-HHYUPAOJ.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-WVW4KHEH.js";
+} from "./chunk-INMWNFAS.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-IVQYFG5D.js";
+} from "./chunk-CCM2KRQH.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-V6BF4AZ7.js";
-import "./chunk-WVW4KHEH.js";
+import "./chunk-KBOD47AW.js";
+import "./chunk-INMWNFAS.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.1",
+  "version": "9.1.3",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -132,7 +132,7 @@
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-router": "^7",
-    "@tangle-network/brand": "^0.8.1"
+    "@tangle-network/brand": "^0.8.2"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

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/thinking-indicator.tsx

@@ -21,7 +21,7 @@ export function ThinkingIndicator({ className }: ThinkingIndicatorProps) {
         <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "300ms" }} />
       </div>
       {elapsed > 3 && (
-        <span className="text-[var(--font-size-xs)] tabular-nums text-[var(--text-dim)]">
+        <span className="text-[var(--font-size-xs)] tabular-nums text-muted-foreground">
           {elapsed}s
         </span>
       )}

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

@@ -118,7 +118,7 @@ export const InlineToolItem = memo(
               <div className="flex items-center gap-2.5 px-3 py-2.5">
                 <div className={cn(
                   "shrink-0",
-                  isRunning && "text-primary",
+                  isRunning && "text-[var(--accent-text)]",
                   isComplete && "text-[var(--surface-success-text)]",
                   isError && "text-[var(--surface-danger-text)]",
                   !isRunning && !isComplete && !isError && "text-muted-foreground",
@@ -156,7 +156,7 @@ export const InlineToolItem = memo(
                     </span>
                   ) : null}
                   {isRunning ? (
-                    <span className="text-[10px] font-medium text-primary">
+                    <span className="text-[10px] font-medium text-[var(--accent-text)]">
                       running
                     </span>
                   ) : null}