@tangle-network/ui 8.0.0 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @tangle-network/ui
 
+## 9.0.0
+
+### Major Changes
+
+- 87252cf: Flip the transcript convergence: RunGroup adopts AgentTimeline's look, not the reverse. 8.1 made AgentTimeline fold tool activity into RunGroup's single filled box (`AssistantRunShell`); that boxed all steps into one card and lost the timeline's separated, distinct rows. Reverted.
+
+  - **`RunGroup`** now renders as separated steps on a timeline spine (connector line + accent dots, one row per tool/reasoning/text part) with a quiet collapsible header (chevron · label · summary · status) — no wrapping `bg-card` box, and consecutive tools are no longer joined into one block. It reads like `AgentTimeline`, plus collapse.
+  - **`AgentTimeline`** is restored to its prior flat, separated rendering (no tool-run folding). The `collapsibleToolRuns` / `defaultToolRunsOpen` props added in 8.1 are removed.
+  - **`AssistantRunShell`** (added in 8.1) is removed — the boxed shell is gone.
+
+  BREAKING: `AssistantRunShell` / `AssistantRunShellProps` are no longer exported, and `AgentTimeline` drops the `collapsibleToolRuns` / `defaultToolRunsOpen` props.
+
+## 8.1.0
+
+### Minor Changes
+
+- 79b55f5: Converge the two transcripts on one collapsible run. New `AssistantRunShell` primitive (the header · summary · status pill · chevron · Radix collapse extracted from `RunGroup`) is now used by both `RunGroup` and `AgentTimeline`, so there is one implementation of "an assistant run" instead of two divergent ones. `AgentTimeline` folds consecutive tool / tool-group items into that shell (`collapsibleToolRuns`, default on; `defaultToolRunsOpen`, default open) so a burst of tool activity reads as one toggleable step on the timeline spine instead of a long ladder of rows — matching `RunGroup`. Additive: `AgentTimeline`'s `items[]` API is unchanged and folding happens internally; consumers building their own item arrays keep working.
+
 ## 8.0.0
 
 ### Major Changes

package/dist/chat.js

@@ -5,9 +5,9 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-UOLL2YHG.js";
+} from "./chunk-LHOGIUGY.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-QIRVZMQY.js";
+import "./chunk-2TRMNB6L.js";
 import "./chunk-RKQDBRTC.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";

package/dist/{chunk-QIRVZMQY.js → chunk-2TRMNB6L.js}

@@ -127,6 +127,27 @@ import {
   Sparkles
 } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SpineRow({
+  accentClassName,
+  isLast,
+  children
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-3", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "relative flex justify-center", children: [
+      !isLast && /* @__PURE__ */ jsx2("span", { className: "absolute top-3.5 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-[var(--border-subtle)]" }),
+      /* @__PURE__ */ jsx2(
+        "span",
+        {
+          className: cn(
+            "relative mt-1.5 h-[var(--timeline-dot-size,0.5rem)] w-[var(--timeline-dot-size,0.5rem)] rounded-full ring-4 ring-[var(--bg-root)]",
+            accentClassName
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "min-w-0 pb-3", children })
+  ] });
+}
 var DEFAULT_BRANDING = {
   label: "Agent",
   accentClass: "text-primary",
@@ -268,16 +289,6 @@ function renderSummary(run) {
   }
   return parts.join(", ");
 }
-function getToolGroupPosition(currentIndex, parts) {
-  const previous = parts[currentIndex - 1]?.part;
-  const next = parts[currentIndex + 1]?.part;
-  const previousIsTool = previous?.type === "tool";
-  const nextIsTool = next?.type === "tool";
-  if (previousIsTool && nextIsTool) return "middle";
-  if (previousIsTool) return "last";
-  if (nextIsTool) return "first";
-  return "single";
-}
 var RunGroup = memo2(
   ({
     run,
@@ -365,20 +376,28 @@ var RunGroup = memo2(
         return null;
       }) });
     }
-    return /* @__PURE__ */ jsx2(Collapsible2.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs2("div", { className: "rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3 px-3 py-2.5", children: [
-        /* @__PURE__ */ jsx2(Collapsible2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+    const rows = allParts.filter(({ part }) => {
+      if (part.type === "tool" || part.type === "reasoning") return true;
+      return part.type === "text" && !part.synthetic && part.text.trim().length > 0;
+    });
+    const dotAccent = (part) => {
+      if (part.type === "reasoning") return "bg-[var(--brand-glow)]";
+      if (part.type === "text") return "bg-primary";
+      return "bg-[var(--border-hover)]";
+    };
+    return /* @__PURE__ */ jsx2(Collapsible2.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx2(Collapsible2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
           "button",
           {
-            className: cn(
-              "w-full rounded-[20px] px-0 py-0 text-left transition-colors",
-              "bg-transparent hover:bg-transparent"
-            ),
-            children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+            type: "button",
+            className: "group flex min-w-0 flex-1 items-center gap-2 rounded-md px-1 py-0.5 text-left transition-colors hover:bg-[var(--surface-container-high)]/40",
+            children: [
+              collapsed ? /* @__PURE__ */ jsx2(ChevronRight2, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
               /* @__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: [
+              /* @__PURE__ */ jsxs2("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
                 /* @__PURE__ */ jsx2(CategoryBadges, { categories: stats.toolCategories }),
                 isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-2 py-px text-[10px] font-semibold uppercase text-[var(--accent-text)]", children: [
                   /* @__PURE__ */ jsx2(Loader2, { className: "h-2.5 w-2.5 animate-spin" }),
@@ -386,20 +405,17 @@ var RunGroup = memo2(
                 ] }) : /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-px text-[10px] font-semibold uppercase text-muted-foreground", children: [
                   /* @__PURE__ */ jsx2(Sparkles, { className: "h-2.5 w-2.5" }),
                   "Done"
-                ] }),
-                !collapsed ? /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx2(ChevronRight2, { className: "h-3.5 w-3.5 text-muted-foreground" })
+                ] })
               ] })
-            ] })
+            ]
           }
         ) }),
         headerActions ? /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1", children: headerActions }) : null
       ] }),
-      collapsed && run.summaryText && /* @__PURE__ */ jsx2("div", { className: "px-4 pb-4 text-sm leading-6 text-muted-foreground line-clamp-2", children: run.summaryText }),
-      /* @__PURE__ */ jsx2(Collapsible2.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx2("div", { className: cn("border-t border-[var(--border-subtle)] px-4 pb-4 pt-3"), children: allParts.map(({ part, msgId, index }, partIndex) => {
+      collapsed && run.summaryText ? /* @__PURE__ */ jsx2("div", { className: "line-clamp-2 pl-6 text-sm leading-6 text-muted-foreground", children: run.summaryText }) : null,
+      /* @__PURE__ */ jsx2(Collapsible2.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx2("div", { className: "pt-1.5", children: rows.map(({ part, msgId, index }, rowIndex) => {
         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";
+        const isLast = rowIndex === rows.length - 1;
         let node = null;
         if (part.type === "tool") {
           if (isOpenUITool(part)) {
@@ -407,15 +423,12 @@ var RunGroup = memo2(
             const schema = extractOpenUISchema(toolPart.state.output);
             const summary = getOpenUISummary(toolPart.state.output);
             if (toolPart.state.status === "completed" && schema) {
-              node = /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
-                summary ? /* @__PURE__ */ jsxs2("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3", children: [
-                  /* @__PURE__ */ jsx2("div", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "View" }),
-                  /* @__PURE__ */ jsx2("div", { className: "mt-1 text-sm leading-6 text-foreground", children: summary })
-                ] }) : null,
+              node = /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
+                summary ? /* @__PURE__ */ jsx2("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground", children: summary }) : null,
                 /* @__PURE__ */ jsx2("div", { className: "p-4", children: /* @__PURE__ */ jsx2(OpenUIArtifactRenderer, { schema }) })
               ] });
             } else if (toolPart.state.status === "running") {
-              node = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground", children: [
+              node = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground", children: [
                 /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
                 "Building view\u2026"
               ] });
@@ -427,7 +440,6 @@ var RunGroup = memo2(
               {
                 part,
                 renderToolDetail,
-                groupPosition: getToolGroupPosition(partIndex, allParts),
                 actions: renderToolActions?.(part, {
                   run,
                   messageId: msgId,
@@ -437,18 +449,12 @@ var RunGroup = memo2(
             );
           }
         } else if (part.type === "reasoning") {
-          node = /* @__PURE__ */ jsx2(
-            InlineThinkingItem,
-            {
-              part,
-              defaultOpen: isStreaming
-            }
-          );
+          node = /* @__PURE__ */ jsx2(InlineThinkingItem, { part, defaultOpen: isStreaming });
         } else if (part.type === "text" && !part.synthetic && part.text.trim()) {
-          node = /* @__PURE__ */ jsx2("div", { className: "px-1 py-1", children: /* @__PURE__ */ jsx2(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text }) });
+          node = /* @__PURE__ */ jsx2("div", { className: "px-1 py-0.5", children: /* @__PURE__ */ jsx2(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text }) });
         }
         if (!node) return null;
-        return /* @__PURE__ */ jsx2("div", { className: gapClass, children: node }, key);
+        return /* @__PURE__ */ jsx2(SpineRow, { accentClassName: dotAccent(part), isLast, children: node }, key);
       }) }) })
     ] }) });
   }

package/dist/{chunk-UOLL2YHG.js → chunk-LHOGIUGY.js}

@@ -6,7 +6,7 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-QIRVZMQY.js";
+} from "./chunk-2TRMNB6L.js";
 import {
   ToolCallGroup,
   ToolCallStep

package/dist/index.js

@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-UOLL2YHG.js";
+} from "./chunk-LHOGIUGY.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -151,7 +151,7 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-QIRVZMQY.js";
+} from "./chunk-2TRMNB6L.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,

package/dist/run.js

@@ -6,7 +6,7 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-QIRVZMQY.js";
+} from "./chunk-2TRMNB6L.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "8.0.0",
+  "version": "9.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.8.0"
+    "@tangle-network/brand": "^0.8.1"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/run/run-group.tsx

@@ -25,6 +25,38 @@ import type { CustomToolRenderer } from "../types/tool-display";
 import { InlineToolItem } from "./inline-tool-item";
 import { InlineThinkingItem } from "./inline-thinking-item";
 import { Markdown } from "../markdown/markdown";
+
+/**
+ * One row on the run's timeline spine: a connector line + accent dot in a
+ * narrow gutter, content to the right. Mirrors AgentTimeline's row so a run
+ * reads as separated, distinct steps — not one filled box.
+ */
+function SpineRow({
+  accentClassName,
+  isLast,
+  children,
+}: {
+  accentClassName: string;
+  isLast: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-3">
+      <div className="relative flex justify-center">
+        {!isLast && (
+          <span className="absolute top-3.5 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-[var(--border-subtle)]" />
+        )}
+        <span
+          className={cn(
+            "relative mt-1.5 h-[var(--timeline-dot-size,0.5rem)] w-[var(--timeline-dot-size,0.5rem)] rounded-full ring-4 ring-[var(--bg-root)]",
+            accentClassName,
+          )}
+        />
+      </div>
+      <div className="min-w-0 pb-3">{children}</div>
+    </div>
+  );
+}
 import {
   OpenUIArtifactRenderer,
   type OpenUIAction,
@@ -245,21 +277,6 @@ function renderSummary(run: Run) {
   return parts.join(", ");
 }
 
-function getToolGroupPosition(
-  currentIndex: number,
-  parts: Array<{ part: SessionPart; msgId: string; index: number }>,
-) {
-  const previous = parts[currentIndex - 1]?.part;
-  const next = parts[currentIndex + 1]?.part;
-  const previousIsTool = previous?.type === "tool";
-  const nextIsTool = next?.type === "tool";
-
-  if (previousIsTool && nextIsTool) return "middle" as const;
-  if (previousIsTool) return "last" as const;
-  if (nextIsTool) return "first" as const;
-  return "single" as const;
-}
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -392,23 +409,36 @@ export const RunGroup = memo(
       );
     }
 
+    // Renderable rows: skip empty/synthetic text so spine dots map to real steps.
+    const rows = allParts.filter(({ part }) => {
+      if (part.type === "tool" || part.type === "reasoning") return true;
+      return part.type === "text" && !part.synthetic && part.text.trim().length > 0;
+    });
+
+    const dotAccent = (part: SessionPart): string => {
+      if (part.type === "reasoning") return "bg-[var(--brand-glow)]";
+      if (part.type === "text") return "bg-primary";
+      return "bg-[var(--border-hover)]";
+    };
+
     return (
       <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-3 py-2.5">
-          <Collapsible.Trigger asChild>
-            <button
-              className={cn(
-                "w-full rounded-[20px] px-0 py-0 text-left transition-colors",
-                "bg-transparent hover:bg-transparent",
-              )}
-            >
-              <div className="flex items-center gap-2">
+        <div className="flex flex-col gap-1">
+          {/* Header — a quiet row, not a filled box */}
+          <div className="flex items-start gap-2">
+            <Collapsible.Trigger asChild>
+              <button
+                type="button"
+                className="group flex min-w-0 flex-1 items-center gap-2 rounded-md px-1 py-0.5 text-left transition-colors hover:bg-[var(--surface-container-high)]/40"
+              >
+                {collapsed ? (
+                  <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                ) : (
+                  <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                )}
                 <span className={cn("font-semibold text-sm", branding.textClass)}>
                   {branding.label}
                 </span>
-
                 {renderSummary(run) ? (
                   <span className="text-[11px] text-muted-foreground">{renderSummary(run)}</span>
                 ) : null}
@@ -417,10 +447,8 @@ export const RunGroup = memo(
                     {run.summaryText}
                   </span>
                 ) : null}
-
-                <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                <span className="ml-auto flex shrink-0 items-center gap-1.5">
                   <CategoryBadges categories={stats.toolCategories} />
-
                   {isStreaming ? (
                     <span className="inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-2 py-px text-[10px] font-semibold uppercase text-[var(--accent-text)]">
                       <Loader2 className="h-2.5 w-2.5 animate-spin" />
@@ -432,125 +460,94 @@ export const RunGroup = memo(
                       Done
                     </span>
                   )}
-
-                  {!collapsed ? (
-                    <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
-                  ) : (
-                    <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
-                  )}
-                </div>
+                </span>
+              </button>
+            </Collapsible.Trigger>
+            {headerActions ? (
+              <div className="flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1">
+                {headerActions}
               </div>
-            </button>
-          </Collapsible.Trigger>
+            ) : null}
+          </div>
 
-          {headerActions ? (
-            <div className="flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1">
-              {headerActions}
+          {/* Collapsed preview */}
+          {collapsed && run.summaryText ? (
+            <div className="line-clamp-2 pl-6 text-sm leading-6 text-muted-foreground">
+              {run.summaryText}
             </div>
           ) : null}
-        </div>
-
-        {/* Summary text when collapsed */}
-        {collapsed && run.summaryText && (
-          <div className="px-4 pb-4 text-sm leading-6 text-muted-foreground line-clamp-2">
-            {run.summaryText}
-          </div>
-        )}
 
-        {/* Expanded content */}
-        <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-          <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;
-                  const schema = extractOpenUISchema(toolPart.state.output);
-                  const summary = getOpenUISummary(toolPart.state.output);
-
-                  if (toolPart.state.status === "completed" && schema) {
-                    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">
-                              View
+          {/* Expanded — separated steps on a timeline spine, no wrapping box */}
+          <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
+            <div className="pt-1.5">
+              {rows.map(({ part, msgId, index }, rowIndex) => {
+                const key = `${msgId}-${index}`;
+                const isLast = rowIndex === rows.length - 1;
+                let node: ReactNode = null;
+
+                if (part.type === "tool") {
+                  if (isOpenUITool(part as ToolPart)) {
+                    const toolPart = part as ToolPart;
+                    const schema = extractOpenUISchema(toolPart.state.output);
+                    const summary = getOpenUISummary(toolPart.state.output);
+
+                    if (toolPart.state.status === "completed" && schema) {
+                      node = (
+                        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]">
+                          {summary ? (
+                            <div className="border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground">
+                              {summary}
                             </div>
-                            <div className="mt-1 text-sm leading-6 text-foreground">{summary}</div>
+                          ) : null}
+                          <div className="p-4">
+                            <OpenUIArtifactRenderer schema={schema} />
                           </div>
-                        ) : null}
-                        <div className="p-4">
-                          <OpenUIArtifactRenderer schema={schema} />
                         </div>
-                      </div>
-                    );
-                  } else if (toolPart.state.status === "running") {
+                      );
+                    } else if (toolPart.state.status === "running") {
+                      node = (
+                        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground">
+                          <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                          Building view…
+                        </div>
+                      );
+                    }
+                  }
+
+                  if (node === null) {
                     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>
+                      <InlineToolItem
+                        part={part as ToolPart}
+                        renderToolDetail={renderToolDetail}
+                        actions={renderToolActions?.(part as ToolPart, {
+                          run,
+                          messageId: msgId,
+                          partIndex: index,
+                        })}
+                      />
                     );
                   }
-                }
-
-                if (node === null) {
+                } else if (part.type === "reasoning") {
+                  node = (
+                    <InlineThinkingItem part={part as ReasoningPart} defaultOpen={isStreaming} />
+                  );
+                } else if (part.type === "text" && !part.synthetic && part.text.trim()) {
                   node = (
-                    <InlineToolItem
-                      part={part as ToolPart}
-                      renderToolDetail={renderToolDetail}
-                      groupPosition={getToolGroupPosition(partIndex, allParts)}
-                      actions={renderToolActions?.(part as ToolPart, {
-                        run,
-                        messageId: msgId,
-                        partIndex: index,
-                      })}
-                    />
+                    <div className="px-1 py-0.5">
+                      <Markdown className="tangle-prose text-[15px] leading-7">{part.text}</Markdown>
+                    </div>
                   );
                 }
-              } else if (part.type === "reasoning") {
-                node = (
-                  <InlineThinkingItem
-                    part={part as ReasoningPart}
-                    defaultOpen={isStreaming}
-                  />
-                );
-              } else if (
-                part.type === "text" &&
-                !part.synthetic &&
-                part.text.trim()
-              ) {
-                node = (
-                  <div className="px-1 py-1">
-                    <Markdown className="tangle-prose text-[15px] leading-7">{part.text}</Markdown>
-                  </div>
-                );
-              }
 
-              if (!node) return null;
-              return (
-                <div key={key} className={gapClass}>
-                  {node}
-                </div>
-              );
-            })}
-          </div>
-        </Collapsible.Content>
+                if (!node) return null;
+                return (
+                  <SpineRow key={key} accentClassName={dotAccent(part)} isLast={isLast}>
+                    {node}
+                  </SpineRow>
+                );
+              })}
+            </div>
+          </Collapsible.Content>
         </div>
       </Collapsible.Root>
     );