@tangle-network/ui 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @tangle-network/ui
 
+## 5.1.0
+
+### Minor Changes
+
+- 6db1ce3: Calmer, unified agent transcript. The tool-call rows read as harsh black-and-white outlines on dark surfaces; soften the whole transcript to one calm design language:
+
+  - `ToolCallStep` (used by `AgentTimeline`): subtle `--border-subtle` row border instead of full-strength `border-border`, a borderless tinted status badge, and a quiet status glyph (green check / red alert) in place of the loud bordered uppercase `SUCCESS`/`ERROR` pill.
+  - `InlineToolItem` (used by `RunGroup`): same subtle border, and a blueprint-style accent left-border indent on the expanded detail so expanding reads cleanly.
+
+  No API or capability changes — purely the visual treatment, applied consistently so `RunGroup` and `AgentTimeline` share one calm look.
+
 ## 5.0.0
 
 ### Patch Changes

package/dist/chat.js

@@ -6,10 +6,10 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-KT5RNO7N.js";
+} from "./chunk-FKDZOA4S.js";
 import "./chunk-54SQQMMM.js";
-import "./chunk-JBPWIYTQ.js";
-import "./chunk-DGW77LD7.js";
+import "./chunk-TAWY3KOH.js";
+import "./chunk-3O4XJCOE.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-BX6AQMUS.js";
 import "./chunk-AAUNOHVL.js";

package/dist/{chunk-DGW77LD7.js → chunk-3O4XJCOE.js}

@@ -13,6 +13,7 @@ import {
   FileCode,
   Search,
   CheckCircle,
+  AlertCircle,
   ChevronRight,
   Loader2,
   FolderOpen,
@@ -103,10 +104,9 @@ function ToolCallStep({
     "div",
     {
       className: cn(
-        "group overflow-hidden rounded-[var(--radius-lg)] border bg-card transition-colors",
-        status === "running" && "border-border",
-        status === "success" && "border-border hover:border-primary/20",
-        status === "error" && "border-[var(--surface-danger-border)]",
+        "group overflow-hidden rounded-[var(--radius-lg)] border bg-card/40 transition-colors",
+        "border-[var(--border-subtle)] hover:border-border",
+        status === "error" && "border-[var(--surface-danger-border)]/60",
         className
       ),
       children: [
@@ -124,28 +124,18 @@ function ToolCallStep({
                 "div",
                 {
                   className: cn(
-                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
-                    status === "running" && "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary",
-                    status === "success" && "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-                    status === "error" && "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
+                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)]",
+                    status === "running" && "bg-[var(--accent-surface-soft)] text-primary",
+                    status === "success" && "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+                    status === "error" && "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
                   ),
                   children: status === "running" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin shrink-0" }) : /* @__PURE__ */ jsx(Icon, { className: cn("h-3 w-3 shrink-0", STATUS_COLORS[status]) })
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "truncate flex-1 font-sans text-foreground", children: label }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em]",
-                    status === "running" && "border-border bg-[var(--accent-surface-soft)] text-primary",
-                    status === "success" && "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-                    status === "error" && "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
-                  ),
-                  children: status
-                }
-              ),
-              duration !== void 0 && status !== "running" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: duration < 1e3 ? `${duration}ms` : `${(duration / 1e3).toFixed(1)}s` }),
+              duration !== void 0 && status !== "running" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground", children: duration < 1e3 ? `${duration}ms` : `${(duration / 1e3).toFixed(1)}s` }),
+              status === "success" && /* @__PURE__ */ jsx(CheckCircle, { className: "h-3.5 w-3.5 shrink-0 text-[var(--surface-success-text)]" }),
+              status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0 text-[var(--surface-danger-text)]" }),
               hasExpandable && /* @__PURE__ */ jsx(
                 ChevronRight,
                 {
@@ -158,7 +148,7 @@ function ToolCallStep({
             ]
           }
         ),
-        expanded && (detail || output) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-border bg-muted px-3 py-2.5", children: [
+        expanded && (detail || output) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-[var(--border-subtle)] bg-muted/40 px-3 py-2.5", children: [
           detail && (isFilePath(detail) ? /* @__PURE__ */ jsx(FilePathChip, { path: detail }) : /* @__PURE__ */ jsx("div", { className: "text-xs font-mono text-muted-foreground", children: detail })),
           output && /* @__PURE__ */ jsx(
             CodeBlock,

package/dist/{chunk-CMX2I43A.js → chunk-CJJMKDNN.js}

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

package/dist/{chunk-KT5RNO7N.js → chunk-FKDZOA4S.js}

@@ -6,11 +6,11 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-JBPWIYTQ.js";
+} from "./chunk-TAWY3KOH.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-DGW77LD7.js";
+} from "./chunk-3O4XJCOE.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-BX6AQMUS.js";

package/dist/{chunk-JBPWIYTQ.js → chunk-TAWY3KOH.js}

@@ -232,8 +232,8 @@ var InlineToolItem = memo2(
           {
             className: cn(
               "w-full border text-left transition-colors",
-              "border-border bg-card hover:border-[var(--border-accent-hover)] hover:bg-accent/35",
-              open && "border-border bg-accent/30",
+              "border-[var(--border-subtle)] bg-card/40 hover:border-border hover:bg-accent/25",
+              open && "border-border bg-accent/20",
               shapeClass,
               className
             ),
@@ -269,7 +269,7 @@ var InlineToolItem = memo2(
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsx3(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx3("div", { className: cn("mt-2 pl-4", contentClassName), children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx3(ExpandedToolDetail, { part }) }) })
+      /* @__PURE__ */ jsx3(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx3("div", { className: cn("mt-1.5 ml-2.5 border-l-2 border-primary/15 pl-3.5", contentClassName), children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx3(ExpandedToolDetail, { part }) }) })
     ] });
   }
 );
@@ -401,8 +401,8 @@ function AssistantShell({
   isStreaming,
   children
 }) {
-  return /* @__PURE__ */ jsxs4("div", { className: "flex gap-3", children: [
-    /* @__PURE__ */ jsx5("div", { className: "mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white", children: /* @__PURE__ */ jsx5(Bot2, { className: "h-4 w-4" }) }),
+  return /* @__PURE__ */ jsxs4("div", { className: "flex gap-2.5", children: [
+    /* @__PURE__ */ jsx5("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__ */ jsx5(Bot2, { className: "h-3.5 w-3.5" }) }),
     /* @__PURE__ */ jsxs4("div", { className: ASSISTANT_SHELL, children: [
       /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--text-muted)]", children: [
         /* @__PURE__ */ jsx5("span", { children: branding.label }),
@@ -628,7 +628,7 @@ var RunGroup = memo4(
       }) });
     }
     return /* @__PURE__ */ jsx5(Collapsible3.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs4("div", { className: "rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-3 px-4 py-3.5", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-3 px-3 py-2.5", children: [
         /* @__PURE__ */ jsx5(Collapsible3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx5(
           "button",
           {
@@ -636,14 +636,14 @@ var RunGroup = memo4(
               "w-full rounded-[20px] px-0 py-0 text-left transition-colors",
               "bg-transparent hover:bg-transparent"
             ),
-            children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2.5", children: [
+            children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx5(
                 "div",
                 {
                   className: cn(
-                    "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white"
+                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white"
                   ),
-                  children: /* @__PURE__ */ jsx5(Bot2, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx5(Bot2, { className: "h-3.5 w-3.5" })
                 }
               ),
               /* @__PURE__ */ jsx5("span", { className: cn("text-sm font-semibold", branding.textClass), children: branding.label }),
@@ -666,79 +666,60 @@ var RunGroup = memo4(
         headerActions ? /* @__PURE__ */ jsx5("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1", children: headerActions }) : null
       ] }),
       collapsed && run.summaryText && /* @__PURE__ */ jsx5("div", { className: "px-4 pb-4 text-sm leading-6 text-muted-foreground line-clamp-2", children: run.summaryText }),
-      /* @__PURE__ */ jsx5(Collapsible3.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx5("div", { className: cn("space-y-3 border-t border-[var(--border-subtle)] px-4 pb-4 pt-3"), children: allParts.map(({ part, msgId, index }, partIndex) => {
+      /* @__PURE__ */ jsx5(Collapsible3.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx5("div", { className: cn("border-t border-[var(--border-subtle)] px-4 pb-4 pt-3"), children: allParts.map(({ part, msgId, index }, partIndex) => {
         const key = `${msgId}-${index}`;
+        const prev = allParts[partIndex - 1]?.part;
+        const connectedTool = part.type === "tool" && prev?.type === "tool" && !isOpenUITool(part) && !isOpenUITool(prev);
+        const gapClass = partIndex === 0 ? "" : connectedTool ? "mt-px" : "mt-3";
+        let node = null;
         if (part.type === "tool") {
           if (isOpenUITool(part)) {
             const toolPart = part;
             const schema = extractOpenUISchema(toolPart.state.output);
             const summary = getOpenUISummary(toolPart.state.output);
             if (toolPart.state.status === "completed" && schema) {
-              return /* @__PURE__ */ jsxs4(
-                "div",
-                {
-                  className: "overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]",
-                  children: [
-                    summary ? /* @__PURE__ */ jsxs4("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3", children: [
-                      /* @__PURE__ */ jsx5("div", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "View" }),
-                      /* @__PURE__ */ jsx5("div", { className: "mt-1 text-sm leading-6 text-foreground", children: summary })
-                    ] }) : null,
-                    /* @__PURE__ */ jsx5("div", { className: "p-4", children: /* @__PURE__ */ jsx5(OpenUIArtifactRenderer, { schema }) })
-                  ]
-                },
-                key
-              );
-            }
-            if (toolPart.state.status === "running") {
-              return /* @__PURE__ */ jsxs4(
-                "div",
-                {
-                  className: "flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground",
-                  children: [
-                    /* @__PURE__ */ jsx5(Loader23, { className: "h-4 w-4 animate-spin text-primary" }),
-                    "Building view\u2026"
-                  ]
-                },
-                key
-              );
+              node = /* @__PURE__ */ jsxs4("div", { className: "overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
+                summary ? /* @__PURE__ */ jsxs4("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3", children: [
+                  /* @__PURE__ */ jsx5("div", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "View" }),
+                  /* @__PURE__ */ jsx5("div", { className: "mt-1 text-sm leading-6 text-foreground", children: summary })
+                ] }) : null,
+                /* @__PURE__ */ jsx5("div", { className: "p-4", children: /* @__PURE__ */ jsx5(OpenUIArtifactRenderer, { schema }) })
+              ] });
+            } else if (toolPart.state.status === "running") {
+              node = /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsx5(Loader23, { className: "h-4 w-4 animate-spin text-primary" }),
+                "Building view\u2026"
+              ] });
             }
           }
-          return /* @__PURE__ */ jsx5(
-            InlineToolItem,
-            {
-              part,
-              renderToolDetail,
-              groupPosition: getToolGroupPosition(partIndex, allParts),
-              actions: renderToolActions?.(part, {
-                run,
-                messageId: msgId,
-                partIndex: index
-              })
-            },
-            key
-          );
-        }
-        if (part.type === "reasoning") {
-          return /* @__PURE__ */ jsx5(
+          if (node === null) {
+            node = /* @__PURE__ */ jsx5(
+              InlineToolItem,
+              {
+                part,
+                renderToolDetail,
+                groupPosition: getToolGroupPosition(partIndex, allParts),
+                actions: renderToolActions?.(part, {
+                  run,
+                  messageId: msgId,
+                  partIndex: index
+                })
+              }
+            );
+          }
+        } else if (part.type === "reasoning") {
+          node = /* @__PURE__ */ jsx5(
             InlineThinkingItem,
             {
               part,
               defaultOpen: isStreaming
-            },
-            key
-          );
-        }
-        if (part.type === "text" && !part.synthetic && part.text.trim()) {
-          return /* @__PURE__ */ jsx5(
-            "div",
-            {
-              className: "px-1 py-1",
-              children: /* @__PURE__ */ jsx5(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text })
-            },
-            key
+            }
           );
+        } else if (part.type === "text" && !part.synthetic && part.text.trim()) {
+          node = /* @__PURE__ */ jsx5("div", { className: "px-1 py-1", children: /* @__PURE__ */ jsx5(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text }) });
         }
-        return null;
+        if (!node) return null;
+        return /* @__PURE__ */ jsx5("div", { className: gapClass, children: node }, key);
       }) }) })
     ] }) });
   }

package/dist/{chunk-5VPTNXX7.js → chunk-U4YRT6MT.js}

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

package/dist/hooks.js

@@ -11,15 +11,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-CMX2I43A.js";
+} from "./chunk-CJJMKDNN.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-54SQQMMM.js";
-import "./chunk-5VPTNXX7.js";
-import "./chunk-DGW77LD7.js";
+import "./chunk-U4YRT6MT.js";
+import "./chunk-3O4XJCOE.js";
 import "./chunk-BX6AQMUS.js";
 import "./chunk-FJBTCTZM.js";
 import "./chunk-WUQDUBJG.js";

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-CMX2I43A.js";
+} from "./chunk-CJJMKDNN.js";
 import {
   addMessage,
   addParts,
@@ -138,7 +138,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-KT5RNO7N.js";
+} from "./chunk-FKDZOA4S.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -148,18 +148,18 @@ import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-5VPTNXX7.js";
+} from "./chunk-U4YRT6MT.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
   InlineToolItem,
   LiveDuration,
   RunGroup
-} from "./chunk-JBPWIYTQ.js";
+} from "./chunk-TAWY3KOH.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-DGW77LD7.js";
+} from "./chunk-3O4XJCOE.js";
 import {
   formatBytes,
   formatDuration,

package/dist/run.js

@@ -2,18 +2,18 @@ import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-5VPTNXX7.js";
+} from "./chunk-U4YRT6MT.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
   InlineToolItem,
   LiveDuration,
   RunGroup
-} from "./chunk-JBPWIYTQ.js";
+} from "./chunk-TAWY3KOH.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-DGW77LD7.js";
+} from "./chunk-3O4XJCOE.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-BX6AQMUS.js";
 import "./chunk-AAUNOHVL.js";

package/dist/sdk-hooks.js

@@ -5,15 +5,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-CMX2I43A.js";
+} from "./chunk-CJJMKDNN.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-54SQQMMM.js";
-import "./chunk-5VPTNXX7.js";
-import "./chunk-DGW77LD7.js";
+import "./chunk-U4YRT6MT.js";
+import "./chunk-3O4XJCOE.js";
 import "./chunk-BX6AQMUS.js";
 import "./chunk-FJBTCTZM.js";
 import "./chunk-WUQDUBJG.js";

package/package.json

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

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

@@ -101,8 +101,8 @@ export const InlineToolItem = memo(
             <button
               className={cn(
                 "w-full border text-left transition-colors",
-                "border-border bg-card hover:border-[var(--border-accent-hover)] hover:bg-accent/35",
-                open && "border-border bg-accent/30",
+                "border-[var(--border-subtle)] bg-card/40 hover:border-border hover:bg-accent/25",
+                open && "border-border bg-accent/20",
                 shapeClass,
                 className,
               )}
@@ -179,7 +179,7 @@ export const InlineToolItem = memo(
         </div>
 
         <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-          <div className={cn("mt-2 pl-4", contentClassName)}>
+          <div className={cn("mt-1.5 ml-2.5 border-l-2 border-primary/15 pl-3.5", contentClassName)}>
             {renderToolDetail?.(part) ?? <ExpandedToolDetail part={part} />}
           </div>
         </Collapsible.Content>

package/src/run/run-group.tsx

@@ -58,9 +58,9 @@ function AssistantShell({
   children: ReactNode;
 }) {
   return (
-    <div className="flex gap-3">
-      <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white">
-        <Bot className="h-4 w-4" />
+    <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}>
@@ -402,7 +402,7 @@ export const RunGroup = memo(
       <Collapsible.Root open={!collapsed} onOpenChange={() => onToggle()}>
         <div className="rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none">
         {/* Header */}
-        <div className="flex items-start gap-3 px-4 py-3.5">
+        <div className="flex items-start gap-3 px-3 py-2.5">
           <Collapsible.Trigger asChild>
             <button
               className={cn(
@@ -410,13 +410,13 @@ export const RunGroup = memo(
                 "bg-transparent hover:bg-transparent",
               )}
             >
-              <div className="flex items-center gap-2.5">
+              <div className="flex items-center gap-2">
                 <div
                   className={cn(
-                    "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white",
+                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white",
                   )}
                 >
-                  <Bot className="h-4 w-4" />
+                  <Bot className="h-3.5 w-3.5" />
                 </div>
 
                 <span className={cn("text-sm font-semibold", branding.textClass)}>
@@ -473,10 +473,24 @@ export const RunGroup = memo(
 
         {/* Expanded content */}
         <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-          <div className={cn("space-y-3 border-t border-[var(--border-subtle)] px-4 pb-4 pt-3")}>
+          <div className={cn("border-t border-[var(--border-subtle)] px-4 pb-4 pt-3")}>
             {allParts.map(({ part, msgId, index }, partIndex) => {
               const key = `${msgId}-${index}`;
 
+              // Consecutive (non-OpenUI) tool calls connect into one block —
+              // `getToolGroupPosition` already gives them joined radii, so they
+              // get no vertical gap; every other transition keeps a normal gap.
+              const prev = allParts[partIndex - 1]?.part;
+              const connectedTool =
+                part.type === "tool" &&
+                prev?.type === "tool" &&
+                !isOpenUITool(part as ToolPart) &&
+                !isOpenUITool(prev as ToolPart);
+              const gapClass =
+                partIndex === 0 ? "" : connectedTool ? "mt-px" : "mt-3";
+
+              let node: ReactNode = null;
+
               if (part.type === "tool") {
                 if (isOpenUITool(part as ToolPart)) {
                   const toolPart = part as ToolPart;
@@ -484,11 +498,8 @@ export const RunGroup = memo(
                   const summary = getOpenUISummary(toolPart.state.output);
 
                   if (toolPart.state.status === "completed" && schema) {
-                    return (
-                      <div
-                        key={key}
-                        className="overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]"
-                      >
+                    node = (
+                      <div className="overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]">
                         {summary ? (
                           <div className="border-b border-[var(--border-subtle)] px-4 py-3">
                             <div className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
@@ -502,14 +513,9 @@ export const RunGroup = memo(
                         </div>
                       </div>
                     );
-                  }
-
-                  if (toolPart.state.status === "running") {
-                    return (
-                      <div
-                        key={key}
-                        className="flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground"
-                      >
+                  } else if (toolPart.state.status === "running") {
+                    node = (
+                      <div className="flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground">
                         <Loader2 className="h-4 w-4 animate-spin text-primary" />
                         Building view…
                       </div>
@@ -517,47 +523,45 @@ export const RunGroup = memo(
                   }
                 }
 
-                return (
-                  <InlineToolItem
-                    key={key}
-                    part={part as ToolPart}
-                    renderToolDetail={renderToolDetail}
-                    groupPosition={getToolGroupPosition(partIndex, allParts)}
-                    actions={renderToolActions?.(part as ToolPart, {
-                      run,
-                      messageId: msgId,
-                      partIndex: index,
-                    })}
-                  />
-                );
-              }
-
-              if (part.type === "reasoning") {
-                return (
+                if (node === null) {
+                  node = (
+                    <InlineToolItem
+                      part={part as ToolPart}
+                      renderToolDetail={renderToolDetail}
+                      groupPosition={getToolGroupPosition(partIndex, allParts)}
+                      actions={renderToolActions?.(part as ToolPart, {
+                        run,
+                        messageId: msgId,
+                        partIndex: index,
+                      })}
+                    />
+                  );
+                }
+              } else if (part.type === "reasoning") {
+                node = (
                   <InlineThinkingItem
-                    key={key}
                     part={part as ReasoningPart}
                     defaultOpen={isStreaming}
                   />
                 );
-              }
-
-              if (
+              } else if (
                 part.type === "text" &&
                 !part.synthetic &&
                 part.text.trim()
               ) {
-                return (
-                  <div
-                    key={key}
-                    className="px-1 py-1"
-                  >
+                node = (
+                  <div className="px-1 py-1">
                     <Markdown className="tangle-prose text-[15px] leading-7">{part.text}</Markdown>
                   </div>
                 );
               }
 
-              return null;
+              if (!node) return null;
+              return (
+                <div key={key} className={gapClass}>
+                  {node}
+                </div>
+              );
             })}
           </div>
         </Collapsible.Content>

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

@@ -12,6 +12,7 @@ import {
   FileCode,
   Search,
   CheckCircle,
+  AlertCircle,
   ChevronRight,
   Loader2,
   FolderOpen,
@@ -130,10 +131,9 @@ export function ToolCallStep({
   return (
     <div
       className={cn(
-        "group overflow-hidden rounded-[var(--radius-lg)] border bg-card transition-colors",
-        status === "running" && "border-border",
-        status === "success" && "border-border hover:border-primary/20",
-        status === "error" && "border-[var(--surface-danger-border)]",
+        "group overflow-hidden rounded-[var(--radius-lg)] border bg-card/40 transition-colors",
+        "border-[var(--border-subtle)] hover:border-border",
+        status === "error" && "border-[var(--surface-danger-border)]/60",
         className,
       )}
     >
@@ -147,10 +147,10 @@ export function ToolCallStep({
       >
         <div
           className={cn(
-            "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
-            status === "running" && "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary",
-            status === "success" && "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-            status === "error" && "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
+            "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)]",
+            status === "running" && "bg-[var(--accent-surface-soft)] text-primary",
+            status === "success" && "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+            status === "error" && "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
           )}
         >
           {status === "running" ? (
@@ -165,26 +165,22 @@ export function ToolCallStep({
           {label}
         </span>
 
-        <span
-          className={cn(
-            "rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em]",
-            status === "running" &&
-              "border-border bg-[var(--accent-surface-soft)] text-primary",
-            status === "success" &&
-              "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-            status === "error" && "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
-          )}
-        >
-          {status}
-        </span>
-
-        {/* Duration */}
+        {/* Duration — quiet, before the status glyph */}
         {duration !== undefined && status !== "running" && (
-          <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+          <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
             {duration < 1000 ? `${duration}ms` : `${(duration / 1000).toFixed(1)}s`}
           </span>
         )}
 
+        {/* Quiet status glyph — the loud uppercase pill read as harsh; the colored
+            icon carries the same signal calmly (running spins in the left badge). */}
+        {status === "success" && (
+          <CheckCircle className="h-3.5 w-3.5 shrink-0 text-[var(--surface-success-text)]" />
+        )}
+        {status === "error" && (
+          <AlertCircle className="h-3.5 w-3.5 shrink-0 text-[var(--surface-danger-text)]" />
+        )}
+
         {/* Expand chevron */}
         {hasExpandable && (
           <ChevronRight
@@ -198,7 +194,7 @@ export function ToolCallStep({
 
       {/* Expandable content */}
       {expanded && (detail || output) && (
-        <div className="space-y-2 border-t border-border bg-muted px-3 py-2.5">
+        <div className="space-y-2 border-t border-[var(--border-subtle)] bg-muted/40 px-3 py-2.5">
           {detail && (
             isFilePath(detail)
               ? <FilePathChip path={detail} />