@tangle-network/ui 6.0.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @tangle-network/ui
 
+## 7.0.0
+
+### Minor Changes
+
+- 46592b3: Calmer chat/run design + named multi-theme system.
+
+  - `ChatMessage`/`RunGroup`: role labels move above the bubble (plain text-xs), avatar circles removed (`avatar`/`hideAvatar` are deprecated no-ops), `InlineToolItem` rows are taller with quiet inline failed/running text instead of uppercase pills. `ToolCallStep`/`ToolCallFeed` stories leave Storybook (source adapters remain).
+  - `@tangle-network/brand` adds `themes.css`: `[data-theme]` scopes (`aubergine`, `aubergine-light`, `arena`, `arena-light`, `tangle-light`) that re-skin every component through the `@theme` semantic mappings, plus a `Foundations/Theme Showcase` story.
+
+### Patch Changes
+
+- Updated dependencies [46592b3]
+  - @tangle-network/brand@0.8.0
+
 ## 6.0.0
 
 ### Patch Changes

package/README.md

@@ -2,6 +2,8 @@
 
 Generic React UI components for Tangle products. Imports tokens from `@tangle-network/brand` (peer dep). Tailwind v4-native.
 
+Component visual precedent is governed by the repo-level [brand guidelines](../../docs/brand-guidelines.md) and [component audit](../../docs/component-audit.md). Storybook examples are test surfaces; they are not automatically approved brand patterns.
+
 ## Install
 
 ```sh

package/dist/chat.d.ts

@@ -158,12 +158,12 @@ interface ChatMessageProps {
     assistantLabel?: string;
     /** Hide the role label row entirely */
     hideRoleLabel?: boolean;
-    /** Hide the avatar icon */
+    /** @deprecated Avatars were removed from the bubble design; this prop is ignored. */
     hideAvatar?: boolean;
-    /** Custom avatar element (replaces default User/Bot icon) */
+    /** @deprecated Avatars were removed from the bubble design; this prop is ignored. */
     avatar?: ReactNode;
 }
-declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, hideAvatar, avatar, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
+declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
 
 interface ThinkingIndicatorProps {
     className?: string;

package/dist/chat.js

@@ -6,10 +6,10 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-SJ6IL4HI.js";
+} from "./chunk-5CS3I7Y3.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-LASW7CYH.js";
-import "./chunk-EOGJX2TU.js";
+import "./chunk-QIRVZMQY.js";
+import "./chunk-RKQDBRTC.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

package/dist/{chunk-SJ6IL4HI.js → chunk-5CS3I7Y3.js}

@@ -6,11 +6,11 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-LASW7CYH.js";
+} from "./chunk-QIRVZMQY.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-EOGJX2TU.js";
+} from "./chunk-RKQDBRTC.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-ULDNFLIM.js";
@@ -930,7 +930,6 @@ var ChatContainer = memo3(
 ChatContainer.displayName = "ChatContainer";
 
 // src/chat/chat-message.tsx
-import { User, Bot } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function ChatMessage({
   role,
@@ -941,31 +940,22 @@ function ChatMessage({
   className,
   userLabel = "You",
   assistantLabel = "Agent",
-  hideRoleLabel,
-  hideAvatar,
-  avatar
+  hideRoleLabel
 }) {
   const isUser = role === "user";
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
-        "flex gap-3",
-        isUser ? "flex-row-reverse" : "flex-row",
+        "flex flex-col gap-1",
+        isUser ? "items-end" : "items-start",
         className
       ),
       children: [
-        !hideAvatar && (avatar ? /* @__PURE__ */ jsx7("div", { className: "mt-0.5 shrink-0", children: avatar }) : /* @__PURE__ */ jsx7(
-          "div",
-          {
-            className: cn(
-              "mt-0.5 flex shrink-0 items-center justify-center rounded-[calc(var(--radius-md)+2px)] border",
-              "h-[var(--avatar-size)] w-[var(--avatar-size)]",
-              isUser ? "border-border bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "border-border bg-muted text-[var(--brand-cool)]"
-            ),
-            children: isUser ? /* @__PURE__ */ jsx7(User, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(Bot, { className: "h-3.5 w-3.5" })
-          }
-        )),
+        !hideRoleLabel && /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse"), children: [
+          /* @__PURE__ */ jsx7("span", { className: "font-medium text-foreground text-xs", children: isUser ? userLabel : assistantLabel }),
+          timestamp && /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground text-xs", children: formatTime2(timestamp) })
+        ] }),
         /* @__PURE__ */ jsxs6(
           "div",
           {
@@ -975,10 +965,6 @@ function ChatMessage({
               isUser ? "border-border bg-muted/50" : "border-border bg-card"
             ),
             children: [
-              !hideRoleLabel && /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center gap-2", isUser && "flex-row-reverse"), children: [
-                /* @__PURE__ */ jsx7("span", { className: "text-[var(--font-size-xs)] font-[var(--chat-label-weight,600)] uppercase tracking-[var(--chat-label-tracking,0.14em)] text-foreground", children: isUser ? userLabel : assistantLabel }),
-                timestamp && /* @__PURE__ */ jsx7("span", { className: "text-[var(--font-size-xs)] text-muted-foreground", children: formatTime2(timestamp) })
-              ] }),
               isUser ? /* @__PURE__ */ jsx7("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: content }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
                 content && /* @__PURE__ */ jsx7(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]", children: content }),
                 isStreaming && /* @__PURE__ */ jsx7("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" })

package/dist/{chunk-PN3S2MTV.js → chunk-DLSGUNRD.js}

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

package/dist/{chunk-O6NUUCT2.js → chunk-IWQZXL6A.js}

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

package/dist/{chunk-LASW7CYH.js → chunk-QIRVZMQY.js}

@@ -1,7 +1,7 @@
 import {
   InlineToolItem,
   LiveDuration
-} from "./chunk-EOGJX2TU.js";
+} from "./chunk-RKQDBRTC.js";
 import {
   formatDuration,
   truncateText
@@ -142,18 +142,15 @@ function AssistantShell({
   isStreaming,
   children
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex gap-2.5", children: [
-    /* @__PURE__ */ jsx2("div", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white", children: /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5" }) }),
-    /* @__PURE__ */ jsxs2("div", { className: ASSISTANT_SHELL, children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--text-muted)]", children: [
-        /* @__PURE__ */ jsx2("span", { children: branding.label }),
-        isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5 text-[var(--text-muted)]", children: [
-          /* @__PURE__ */ jsx2(Loader2, { className: "h-3 w-3 animate-spin" }),
-          "Thinking"
-        ] }) : null
-      ] }),
-      children
-    ] })
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-1 font-medium text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsx2("span", { children: branding.label }),
+      isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx2(Loader2, { className: "h-3 w-3 animate-spin" }),
+        "Thinking"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: ASSISTANT_SHELL, children })
   ] });
 }
 var CATEGORY_ICON_MAP = {
@@ -378,16 +375,7 @@ var RunGroup = memo2(
               "bg-transparent hover:bg-transparent"
             ),
             children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  className: cn(
-                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white"
-                  ),
-                  children: /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5" })
-                }
-              ),
-              /* @__PURE__ */ jsx2("span", { className: cn("text-sm font-semibold", branding.textClass), children: branding.label }),
+              /* @__PURE__ */ jsx2("span", { className: cn("font-semibold text-sm", branding.textClass), children: branding.label }),
               renderSummary(run) ? /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-muted-foreground", children: renderSummary(run) }) : null,
               collapsed && run.summaryText ? /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-[11px] text-foreground/70", children: run.summaryText }) : null,
               /* @__PURE__ */ jsxs2("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [

package/dist/{chunk-EOGJX2TU.js → chunk-RKQDBRTC.js}

@@ -233,7 +233,7 @@ var InlineToolItem = memo2(
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-2.5 py-1.5", children: [
+              /* @__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",
@@ -246,8 +246,8 @@ var InlineToolItem = memo2(
                 /* @__PURE__ */ jsxs2("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
                   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: "rounded-full border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-1.5 py-px text-[10px] font-semibold uppercase text-[var(--surface-danger-text)]", children: "Failed" }) : null,
-                  isRunning ? /* @__PURE__ */ jsx3("span", { className: "rounded-full border border-[var(--border-accent)] bg-primary/10 px-1.5 py-px text-[10px] font-semibold uppercase text-primary", children: "Running" }) : 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,
                   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/hooks.js

@@ -11,15 +11,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-PN3S2MTV.js";
+} from "./chunk-DLSGUNRD.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-O6NUUCT2.js";
-import "./chunk-EOGJX2TU.js";
+import "./chunk-IWQZXL6A.js";
+import "./chunk-RKQDBRTC.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-PN3S2MTV.js";
+} from "./chunk-DLSGUNRD.js";
 import {
   addMessage,
   addParts,
@@ -138,7 +138,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-SJ6IL4HI.js";
+} from "./chunk-5CS3I7Y3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -148,18 +148,18 @@ import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-O6NUUCT2.js";
+} from "./chunk-IWQZXL6A.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-LASW7CYH.js";
+} from "./chunk-QIRVZMQY.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration,
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-EOGJX2TU.js";
+} from "./chunk-RKQDBRTC.js";
 import {
   TOOL_CATEGORY_ICONS,
   formatBytes,

package/dist/run.js

@@ -2,18 +2,18 @@ import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-O6NUUCT2.js";
+} from "./chunk-IWQZXL6A.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-LASW7CYH.js";
+} from "./chunk-QIRVZMQY.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration,
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-EOGJX2TU.js";
+} from "./chunk-RKQDBRTC.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-PN3S2MTV.js";
+} from "./chunk-DLSGUNRD.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-O6NUUCT2.js";
-import "./chunk-EOGJX2TU.js";
+import "./chunk-IWQZXL6A.js";
+import "./chunk-RKQDBRTC.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": "6.0.0",
+  "version": "7.0.0",
   "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.7.0"
+    "@tangle-network/brand": "^0.8.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/chat/chat-message.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { ChatMessage } from './chat-message'
-import { ToolCallStep } from '../run/tool-call-step'
+import { InlineToolItem } from '../run/inline-tool-item'
+import type { ToolPart } from '../types/parts'
 
 const meta: Meta<typeof ChatMessage> = {
   title: 'Chat/ChatMessage',
@@ -26,6 +27,30 @@ type Story = StoryObj<typeof ChatMessage>
 const ts = (offsetMinutes = 0) =>
   new Date(Date.now() - offsetMinutes * 60 * 1000)
 
+const readToolPart: ToolPart = {
+  type: 'tool',
+  id: 'chat-read',
+  tool: 'read',
+  state: {
+    status: 'completed',
+    input: { file_path: 'src/hooks/useFetchData.ts' },
+    output: `export function useFetchData<T>(url: string) {\n  const [data, setData] = useState<T | null>(null)\n  const [loading, setLoading] = useState(true)\n  // ...`,
+    time: { start: Date.now() - 1200, end: Date.now() - 1152 },
+  },
+}
+
+const searchToolPart: ToolPart = {
+  type: 'tool',
+  id: 'chat-search',
+  tool: 'grep',
+  state: {
+    status: 'completed',
+    input: { pattern: 'cache', path: 'src/hooks/useFetchData.ts' },
+    output: 'No cache layer found. Data fetched on every mount.',
+    time: { start: Date.now() - 900, end: Date.now() - 888 },
+  },
+}
+
 export const UserMessage: Story = {
   args: {
     role: 'user',
@@ -117,20 +142,8 @@ export const AssistantWithToolCalls: Story = {
     content: 'Let me read the current implementation first.',
     toolCalls: (
       <div className="mt-3 space-y-2">
-        <ToolCallStep
-          type="read"
-          label="Read src/hooks/useFetchData.ts"
-          status="success"
-          output={`export function useFetchData<T>(url: string) {\n  const [data, setData] = useState<T | null>(null)\n  const [loading, setLoading] = useState(true)\n  // ...`}
-          duration={48}
-        />
-        <ToolCallStep
-          type="grep"
-          label="Search for cache references"
-          status="success"
-          output="No cache layer found. Data fetched on every mount."
-          duration={12}
-        />
+        <InlineToolItem part={readToolPart} groupPosition="first" />
+        <InlineToolItem part={searchToolPart} groupPosition="last" />
       </div>
     ),
     timestamp: ts(1),

package/src/chat/chat-message.tsx

@@ -6,7 +6,6 @@
  */
 
 import { type ReactNode } from "react";
-import { User, Bot } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Markdown } from "../markdown/markdown";
 
@@ -28,9 +27,9 @@ export interface ChatMessageProps {
   assistantLabel?: string;
   /** Hide the role label row entirely */
   hideRoleLabel?: boolean;
-  /** Hide the avatar icon */
+  /** @deprecated Avatars were removed from the bubble design; this prop is ignored. */
   hideAvatar?: boolean;
-  /** Custom avatar element (replaces default User/Bot icon) */
+  /** @deprecated Avatars were removed from the bubble design; this prop is ignored. */
   avatar?: ReactNode;
 }
 
@@ -44,36 +43,28 @@ export function ChatMessage({
   userLabel = "You",
   assistantLabel = "Agent",
   hideRoleLabel,
-  hideAvatar,
-  avatar,
 }: ChatMessageProps) {
   const isUser = role === "user";
 
   return (
     <div
       className={cn(
-        "flex gap-3",
-        isUser ? "flex-row-reverse" : "flex-row",
+        "flex flex-col gap-1",
+        isUser ? "items-end" : "items-start",
         className,
       )}
     >
-      {/* Avatar */}
-      {!hideAvatar && (
-        avatar ? (
-          <div className="mt-0.5 shrink-0">{avatar}</div>
-        ) : (
-          <div
-            className={cn(
-              "mt-0.5 flex shrink-0 items-center justify-center rounded-[calc(var(--radius-md)+2px)] border",
-              "h-[var(--avatar-size)] w-[var(--avatar-size)]",
-              isUser
-                ? "border-border bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
-                : "border-border bg-muted text-[var(--brand-cool)]",
-            )}
-          >
-            {isUser ? <User className="h-3.5 w-3.5" /> : <Bot className="h-3.5 w-3.5" />}
-          </div>
-        )
+      {!hideRoleLabel && (
+        <div className={cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse")}>
+          <span className="font-medium text-foreground text-xs">
+            {isUser ? userLabel : assistantLabel}
+          </span>
+          {timestamp && (
+            <span className="text-muted-foreground text-xs">
+              {formatTime(timestamp)}
+            </span>
+          )}
+        </div>
       )}
 
       {/* Bubble */}
@@ -86,20 +77,6 @@ export function ChatMessage({
             : "border-border bg-card",
         )}
       >
-        {/* Role label + timestamp */}
-        {!hideRoleLabel && (
-          <div className={cn("flex items-center gap-2", isUser && "flex-row-reverse")}>
-            <span className="text-[var(--font-size-xs)] font-[var(--chat-label-weight,600)] uppercase tracking-[var(--chat-label-tracking,0.14em)] text-foreground">
-              {isUser ? userLabel : assistantLabel}
-            </span>
-            {timestamp && (
-              <span className="text-[var(--font-size-xs)] text-muted-foreground">
-                {formatTime(timestamp)}
-              </span>
-            )}
-          </div>
-        )}
-
         {/* Message body */}
         {isUser ? (
           <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground">

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

@@ -115,7 +115,7 @@ export const InlineToolItem = memo(
                 className,
               )}
             >
-              <div className="flex items-center gap-2 px-2.5 py-1.5">
+              <div className="flex items-center gap-2.5 px-3 py-2.5">
                 <div className={cn(
                   "shrink-0",
                   isRunning && "text-primary",
@@ -151,13 +151,13 @@ export const InlineToolItem = memo(
                     </span>
                   ) : null}
                   {isError ? (
-                    <span className="rounded-full border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-1.5 py-px text-[10px] font-semibold uppercase text-[var(--surface-danger-text)]">
-                      Failed
+                    <span className="text-[10px] font-medium text-[var(--surface-danger-text)]">
+                      failed
                     </span>
                   ) : null}
                   {isRunning ? (
-                    <span className="rounded-full border border-[var(--border-accent)] bg-primary/10 px-1.5 py-px text-[10px] font-semibold uppercase text-primary">
-                      Running
+                    <span className="text-[10px] font-medium text-primary">
+                      running
                     </span>
                   ) : null}
                   {open ? (

package/src/run/run-group.tsx

@@ -58,23 +58,17 @@ function AssistantShell({
   children: ReactNode;
 }) {
   return (
-    <div className="flex gap-2.5">
-      <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white">
-        <Bot className="h-3.5 w-3.5" />
-      </div>
-
-      <div className={ASSISTANT_SHELL}>
-        <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--text-muted)]">
-          <span>{branding.label}</span>
-          {isStreaming ? (
-            <span className="inline-flex items-center gap-1.5 text-[var(--text-muted)]">
-              <Loader2 className="h-3 w-3 animate-spin" />
-              Thinking
-            </span>
-          ) : null}
-        </div>
-        {children}
+    <div className="flex flex-col gap-1">
+      <div className="flex items-center gap-2 px-1 font-medium text-muted-foreground text-xs">
+        <span>{branding.label}</span>
+        {isStreaming ? (
+          <span className="inline-flex items-center gap-1.5">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            Thinking
+          </span>
+        ) : null}
       </div>
+      <div className={ASSISTANT_SHELL}>{children}</div>
     </div>
   );
 }
@@ -411,15 +405,7 @@ export const RunGroup = memo(
               )}
             >
               <div className="flex items-center gap-2">
-                <div
-                  className={cn(
-                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white",
-                  )}
-                >
-                  <Bot className="h-3.5 w-3.5" />
-                </div>
-
-                <span className={cn("text-sm font-semibold", branding.textClass)}>
+                <span className={cn("font-semibold text-sm", branding.textClass)}>
                   {branding.label}
                 </span>
 

package/src/stories/theme-showcase.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InlineToolItem } from "../run/inline-tool-item";
+import type { ToolPart } from "../types/parts";
+
+const meta: Meta = {
+  title: "Foundations/Theme Showcase",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+type Story = StoryObj;
+
+const THEMES: { name: string; theme?: string }[] = [
+  { name: "Tangle (neutral)", theme: undefined }, // default :root dark
+  { name: "Tangle · light", theme: "tangle-light" },
+  { name: "Aubergine (bazaar)", theme: "aubergine" },
+  { name: "Aubergine · light", theme: "aubergine-light" },
+  { name: "Experimental green", theme: "arena" },
+  { name: "Experimental green · light", theme: "arena-light" },
+];
+
+const NOW = Date.now();
+
+const themeToolParts: ToolPart[] = [
+  {
+    type: "tool",
+    id: "theme-read",
+    tool: "read",
+    state: {
+      status: "completed",
+      input: { file_path: "src/batch-writer.ts" },
+      time: { start: NOW - 3100, end: NOW - 2500 },
+    },
+  },
+  {
+    type: "tool",
+    id: "theme-search",
+    tool: "grep",
+    state: {
+      status: "completed",
+      input: { pattern: "await sleep\\(" },
+      time: { start: NOW - 2200, end: NOW - 1800 },
+    },
+  },
+  {
+    type: "tool",
+    id: "theme-build",
+    tool: "bash",
+    state: {
+      status: "error",
+      input: { command: "pnpm test" },
+      error: "1 failing test",
+      time: { start: NOW - 1600, end: NOW - 400 },
+    },
+  },
+];
+
+function Cell({ name, theme }: { name: string; theme?: string }) {
+  return (
+    <div
+      data-theme={theme}
+      className="flex flex-col gap-3 rounded-2xl border border-border bg-background p-5"
+    >
+      <div className="flex items-center justify-between">
+        <span className="font-semibold text-foreground text-sm">{name}</span>
+        <span className="font-medium text-muted-foreground text-xs">
+          {theme?.includes("light") ? "Light" : "Dark"}
+        </span>
+      </div>
+
+      <div className="space-y-1.5 rounded-xl border border-[var(--border-subtle)] bg-surface-container-high p-3">
+        <div className="flex items-center gap-2">
+          <span className="size-2 rounded-full bg-primary" />
+          <span className="font-semibold text-foreground text-xs">Agent</span>
+          <span className="text-[11px] text-muted-foreground">4 tools · 3s</span>
+        </div>
+        {themeToolParts.map((part, index) => (
+          <InlineToolItem
+            key={part.id}
+            part={part}
+            groupPosition={index === 0 ? "first" : index === themeToolParts.length - 1 ? "last" : "middle"}
+          />
+        ))}
+      </div>
+
+      <p className="text-muted-foreground text-xs leading-relaxed">
+        Body copy on the canvas. Surfaces separate by fill; the border is a quiet edge.
+      </p>
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          className="rounded-lg bg-primary px-3 py-1.5 font-medium text-primary-foreground text-xs"
+        >
+          Primary
+        </button>
+        <button
+          type="button"
+          className="rounded-lg border border-border bg-muted px-3 py-1.5 font-medium text-foreground text-xs"
+        >
+          Secondary
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export const AllThemes: Story = {
+  render: () => (
+    <div className="min-h-screen bg-[#0a0a0c] p-6">
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+        {THEMES.map((t) => (
+          <Cell key={t.name} name={t.name} theme={t.theme} />
+        ))}
+      </div>
+    </div>
+  ),
+};

package/src/run/tool-call-feed.stories.tsx

@@ -1,294 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { ToolCallFeed, type FeedSegment } from './tool-call-feed'
-
-// -- Fixtures --
-
-const debuggingSession: FeedSegment[] = [
-  {
-    kind: 'text',
-    content: "I'll investigate the failing test and fix it. Let me start by finding the relevant files.",
-  },
-  {
-    kind: 'tool_group',
-    title: 'Exploration',
-    calls: [
-      {
-        id: 'tc-glob-1',
-        type: 'glob',
-        label: 'Find **/*.test.{ts,tsx}',
-        status: 'success',
-        duration: 28,
-        output: 'src/utils/format.test.ts\nsrc/utils/tool-display.test.ts\nsrc/run/run-group.test.ts',
-      },
-      {
-        id: 'tc-read-1',
-        type: 'read',
-        label: 'Read src/run/run-group.test.ts',
-        status: 'success',
-        duration: 55,
-        detail: 'src/run/run-group.test.ts',
-        output: "import { render } from '@testing-library/react'\nimport { RunGroup } from './run-group'\n\ndescribe('RunGroup', () => {\n  it('renders tool parts', () => { ... })\n})",
-      },
-      {
-        id: 'tc-read-2',
-        type: 'read',
-        label: 'Read src/run/run-group.tsx',
-        status: 'success',
-        duration: 61,
-        detail: 'src/run/run-group.tsx',
-        output: 'const allParts = useMemo(() => {\n  const parts = []\n  for (const msg of run.messages) {\n    const msgParts = partMap[msg.id] ?? []\n    ...',
-      },
-    ],
-  },
-  {
-    kind: 'text',
-    content: "I see the issue. The test is passing `undefined` for `partMap` in one of the cases, but the component always expects a `Record<string, SessionPart[]>`. Let me check the test setup.",
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'tc-grep-1',
-      type: 'grep',
-      label: 'Search for partMap in run-group.test.ts',
-      status: 'success',
-      duration: 44,
-      output: 'src/run/run-group.test.ts:18:  render(<RunGroup run={mockRun} partMap={undefined} collapsed={false} onToggle={jest.fn()} />)',
-    },
-  },
-  {
-    kind: 'text',
-    content: "Found it — the test is passing `partMap={undefined}`. The prop type should default to `{}` rather than requiring the caller to pass a defined value. I'll add a default parameter.",
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'tc-edit-1',
-      type: 'edit',
-      label: 'Edit src/run/run-group.tsx',
-      status: 'success',
-      duration: 38,
-      detail: 'Added partMap = {} default',
-    },
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'tc-bash-1',
-      type: 'bash',
-      label: 'pnpm test --run src/run/run-group.test.ts',
-      status: 'success',
-      duration: 1240,
-      output: ' ✓ src/run/run-group.test.ts (3)\n\nTest Files  1 passed (1)\n     Tests  3 passed (3)\n  Duration  1.24s',
-    },
-  },
-  {
-    kind: 'text',
-    content: 'All tests pass. The fix was a one-line change: adding `partMap = {}` as a default parameter so callers that omit it (or pass `undefined`) get a safe empty map rather than a crash.',
-  },
-]
-
-const multiPhaseSession: FeedSegment[] = [
-  {
-    kind: 'text',
-    content: "I'll refactor the `formatDuration` utility to support minutes, add tests, and verify the full suite still passes.",
-  },
-  {
-    kind: 'tool_group',
-    title: 'Read current implementation',
-    calls: [
-      {
-        id: 'mp-read-1',
-        type: 'read',
-        label: 'Read src/utils/format.ts',
-        status: 'success',
-        duration: 42,
-        output: "export function formatDuration(ms: number): string {\n  if (ms < 1000) return `${ms}ms`\n  return `${(ms / 1000).toFixed(1)}s`\n}",
-      },
-      {
-        id: 'mp-read-2',
-        type: 'read',
-        label: 'Read src/utils/format.test.ts',
-        status: 'success',
-        duration: 38,
-        output: "describe('formatDuration', () => {\n  it('returns ms for sub-second values', ...)\n  it('returns seconds for 1000-59999ms', ...)\n})",
-      },
-    ],
-  },
-  {
-    kind: 'tool_group',
-    title: 'Implement changes',
-    calls: [
-      {
-        id: 'mp-write-1',
-        type: 'write',
-        label: 'Write src/utils/format.ts',
-        status: 'success',
-        duration: 51,
-        detail: 'Added minutes branch and truncateText helper',
-      },
-      {
-        id: 'mp-write-2',
-        type: 'write',
-        label: 'Write src/utils/format.test.ts',
-        status: 'success',
-        duration: 48,
-        detail: 'Added 3 new test cases for minutes and truncation',
-      },
-    ],
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'mp-bash-1',
-      type: 'bash',
-      label: 'pnpm test --run',
-      status: 'success',
-      duration: 1870,
-      output: 'Test Files  3 passed (3)\n     Tests  18 passed (18)\n  Duration  1.87s',
-    },
-  },
-  {
-    kind: 'text',
-    content: 'Done. `formatDuration` now returns `"2m 14s"` for values over 60 seconds. All 18 tests pass including the 3 new cases.',
-  },
-]
-
-const streamingSession: FeedSegment[] = [
-  {
-    kind: 'text',
-    content: "Let me run the full test suite and check for any issues.",
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'stream-bash-1',
-      type: 'bash',
-      label: 'pnpm test --run',
-      status: 'running',
-    },
-  },
-]
-
-const errorSession: FeedSegment[] = [
-  {
-    kind: 'text',
-    content: "Attempting to build the project.",
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'err-bash-1',
-      type: 'bash',
-      label: 'pnpm build',
-      status: 'error',
-      duration: 3200,
-      detail: 'Build failed with TypeScript errors',
-      output: `error TS2322: Type 'string | undefined' is not assignable to type 'string'.\n  src/utils/format.ts:8:5\n\nerror TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'number'.\n  src/run/run-item-primitives.tsx:6:48\n\nFound 2 errors.`,
-    },
-  },
-  {
-    kind: 'text',
-    content: "Two TypeScript errors. The first is in `format.ts` — I need to add a null guard before calling `.toFixed()`. The second is in `run-item-primitives.tsx` — `startTime` can be undefined per the `ToolTime` type.",
-  },
-  {
-    kind: 'tool_group',
-    title: 'Apply fixes',
-    calls: [
-      {
-        id: 'err-edit-1',
-        type: 'edit',
-        label: 'Edit src/utils/format.ts',
-        status: 'success',
-        duration: 35,
-        detail: 'Added undefined guard on ms parameter',
-      },
-      {
-        id: 'err-edit-2',
-        type: 'edit',
-        label: 'Edit src/run/run-item-primitives.tsx',
-        status: 'success',
-        duration: 29,
-        detail: 'Changed startTime prop type to number (non-optional at callsite)',
-      },
-    ],
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'err-bash-2',
-      type: 'bash',
-      label: 'pnpm build',
-      status: 'success',
-      duration: 4100,
-      output: 'dist/index.js  42.3 kB\ndist/index.js.map  88.1 kB\n✓ built in 4.10s',
-    },
-  },
-  {
-    kind: 'text',
-    content: 'Build succeeds. Both TypeScript errors resolved.',
-  },
-]
-
-// --
-
-const meta: Meta<typeof ToolCallFeed> = {
-  title: 'Run/ToolCallFeed',
-  component: ToolCallFeed,
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: { default: 'dark' },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof ToolCallFeed>
-
-export const DebuggingSession: Story = {
-  name: 'Debugging a failing test',
-  args: { segments: debuggingSession },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-    </div>
-  ),
-}
-
-export const MultiPhaseRefactor: Story = {
-  name: 'Multi-phase refactor',
-  args: { segments: multiPhaseSession },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-    </div>
-  ),
-}
-
-export const Streaming: Story = {
-  name: 'In-progress (running)',
-  args: { segments: streamingSession },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-    </div>
-  ),
-}
-
-export const BuildErrorAndFix: Story = {
-  name: 'Build error → fix → success',
-  args: { segments: errorSession },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-    </div>
-  ),
-}
-
-export const Empty: Story = {
-  args: { segments: [] },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-      <p className="text-sm text-muted-foreground italic">(empty feed — renders nothing)</p>
-    </div>
-  ),
-}

package/src/run/tool-call-step.stories.tsx

@@ -1,198 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { ToolCallStep, ToolCallGroup } from './tool-call-step'
-
-const meta: Meta<typeof ToolCallStep> = {
-  title: 'Run/ToolCallStep',
-  component: ToolCallStep,
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: { default: 'dark' },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof ToolCallStep>
-
-// -- Single step stories --
-
-export const BashSuccess: Story = {
-  args: {
-    type: 'bash',
-    label: 'pnpm test --run --reporter=verbose',
-    status: 'success',
-    duration: 1420,
-    output: `Test Files  2 passed (2)\n     Tests  15 passed (15)\n  Duration  1.42s`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const BashRunning: Story = {
-  args: {
-    type: 'bash',
-    label: 'pnpm build',
-    status: 'running',
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const BashError: Story = {
-  args: {
-    type: 'bash',
-    label: 'pnpm test --run',
-    status: 'error',
-    duration: 890,
-    detail: 'src/components/RunGroup.test.tsx',
-    output: `FAIL src/components/RunGroup.test.tsx\n  ● RunGroup › renders tool parts\n\n    TypeError: Cannot read properties of undefined (reading 'map')\n      at RunGroup (src/run/run-group.tsx:42:40)`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const ReadFile: Story = {
-  args: {
-    type: 'read',
-    label: 'Read src/run/run-group.tsx',
-    status: 'success',
-    duration: 62,
-    detail: '/home/user/project/src/run/run-group.tsx',
-    output: `import { memo, useMemo } from 'react'\nexport const RunGroup = memo(({ run, partMap, ...`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const WriteFile: Story = {
-  args: {
-    type: 'write',
-    label: 'Write src/utils/format.ts',
-    status: 'success',
-    duration: 45,
-    detail: '/home/user/project/src/utils/format.ts',
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const EditFile: Story = {
-  args: {
-    type: 'edit',
-    label: 'Edit src/run/run-group.tsx',
-    status: 'success',
-    duration: 38,
-    detail: 'Replaced 3 lines at L42',
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const GlobFind: Story = {
-  args: {
-    type: 'glob',
-    label: 'Find **/*.test.ts',
-    status: 'success',
-    duration: 28,
-    output: `src/utils/format.test.ts\nsrc/utils/tool-display.test.ts\nsrc/run/run-group.test.ts`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const GrepSearch: Story = {
-  args: {
-    type: 'grep',
-    label: 'Search for partMap\\[',
-    status: 'success',
-    duration: 44,
-    output: `src/run/run-group.tsx:184:  const msgParts = partMap[msg.id] ?? []\nsrc/hooks/useRunGroup.ts:44:  setPartMap(prev => ({ ...prev, [msgId]: parts }))`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const NoExpandable: Story = {
-  name: 'No detail/output (not expandable)',
-  args: {
-    type: 'bash',
-    label: 'git add -p',
-    status: 'success',
-    duration: 120,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-// -- Group stories --
-
-export const GroupedToolCalls: Story = {
-  name: 'ToolCallGroup — exploration phase',
-  render: () => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallGroup title="Exploration">
-        <ToolCallStep type="glob" label="Find **/*.test.ts" status="success" duration={28} output="src/utils/format.test.ts\nsrc/utils/tool-display.test.ts\nsrc/run/run-group.test.ts" />
-        <ToolCallStep type="read" label="Read src/run/run-group.tsx" status="success" duration={62} detail="Checking for partMap access patterns" output="export const RunGroup = memo(({ run, partMap, ..." />
-        <ToolCallStep type="grep" label="Search for partMap\[" status="success" duration={44} output="src/run/run-group.tsx:184\nsrc/hooks/useRunGroup.ts:44" />
-      </ToolCallGroup>
-    </div>
-  ),
-}
-
-export const MixedStatuses: Story = {
-  name: 'Mixed statuses in a group',
-  render: () => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallGroup title="Test cycle">
-        <ToolCallStep type="bash" label="pnpm test --run src/utils/" status="success" duration={890} />
-        <ToolCallStep type="edit" label="Edit src/run/run-group.tsx" status="success" duration={38} />
-        <ToolCallStep type="bash" label="pnpm test --run" status="error" duration={740} output="FAIL src/run/run-group.test.ts\n  ● 1 test failed" />
-        <ToolCallStep type="bash" label="pnpm test --run" status="running" />
-      </ToolCallGroup>
-    </div>
-  ),
-}
-
-export const AllTypes: Story = {
-  render: () => (
-    <div className="p-6 max-w-2xl space-y-2">
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pb-1">All tool types</p>
-      <ToolCallStep type="bash" label="npm run build" status="success" duration={4200} />
-      <ToolCallStep type="read" label="Read package.json" status="success" duration={18} />
-      <ToolCallStep type="write" label="Write dist/index.js" status="success" duration={55} />
-      <ToolCallStep type="edit" label="Edit tsconfig.json" status="success" duration={30} />
-      <ToolCallStep type="glob" label="Find src/**/*.tsx" status="success" duration={22} />
-      <ToolCallStep type="grep" label="Search for export default" status="success" duration={66} />
-      <ToolCallStep type="list" label="List node_modules/.cache" status="success" duration={14} />
-      <ToolCallStep type="download" label="Download schema.json" status="success" duration={380} />
-      <ToolCallStep type="inspect" label="Inspect bundle size" status="running" />
-      <ToolCallStep type="audit" label="Audit dependencies" status="error" duration={1100} />
-    </div>
-  ),
-}