@tangle-network/ui 11.15.0 → 11.15.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.15.1
+
+### Patch Changes
+
+- 34c2d3c: Retain non-empty synthetic text as labelled, plain-text Application notes in both transcript presentations. Preserve note ordering and synthetic-only messages without merging notes into user speech, parsing them as OpenUI, or counting them as agent responses. Existing public component props and callbacks are unchanged.
+
 ## 11.15.0
 
 ### Minor Changes

package/dist/chat/chat-container.js

@@ -5,6 +5,7 @@ import { useRunGroups } from "../hooks/use-run-groups.js";
 import { useRunCollapseState } from "../hooks/use-run-collapse-state.js";
 import { useAutoScroll } from "../hooks/use-auto-scroll.js";
 import { InlineThinkingItem } from "../run/inline-thinking-item.js";
+import { SyntheticText, userTextSegments } from "./synthetic-text.js";
 import { OpenUIArtifactRenderer } from "../openui/openui-artifact-renderer.js";
 import { MessageList } from "./message-list.js";
 import { AgentTimeline } from "./agent-timeline.js";
@@ -115,15 +116,25 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
 	for (const message of messages) {
 		const parts = partMap[message.id] ?? [];
 		if (message.role === "user") {
-			const content = parts.filter((part) => part.type === "text").map((part) => part.text).join("\n").trim();
-			if (!content) continue;
-			items.push({
-				id: message.id,
-				kind: "message",
-				role: "user",
-				content,
-				timestamp: createdAtFromMessage(message)
-			});
+			const segments = userTextSegments(parts);
+			for (const segment of segments) {
+				const id = segments.length === 1 ? message.id : `${message.id}-user-${segment.index}`;
+				if (segment.synthetic) items.push({
+					id,
+					kind: "custom",
+					content: /* @__PURE__ */ jsx("div", {
+						className: "mx-3",
+						children: /* @__PURE__ */ jsx(SyntheticText, { text: segment.text })
+					})
+				});
+				else items.push({
+					id,
+					kind: "message",
+					role: "user",
+					content: segment.text.trim(),
+					timestamp: createdAtFromMessage(message)
+				});
+			}
 			continue;
 		}
 		const toolBuffer = [];
@@ -167,6 +178,17 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
 				return;
 			}
 			flushToolBuffer(index);
+			if (part.type === "text" && part.synthetic) {
+				if (part.text.trim()) items.push({
+					id: itemId,
+					kind: "custom",
+					content: /* @__PURE__ */ jsx("div", {
+						className: "mx-3",
+						children: /* @__PURE__ */ jsx(SyntheticText, { text: part.text })
+					})
+				});
+				return;
+			}
 			if (part.type === "text" && !part.synthetic && part.text.trim()) {
 				if (enableOpenUI) {
 					const jsonMatch = part.text.match(/```(?:json)?\s*\n([\s\S]*?)\n```/);

package/dist/chat/synthetic-text.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/synthetic-text.tsx
+/** Internal transcript chrome, never attributed to a user or model. */
+function SyntheticText({ text }) {
+	if (!text.trim()) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "note",
+		"aria-label": "Application note",
+		"data-synthetic-text": "",
+		className: "min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-1 font-medium",
+			children: "Application note"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "break-words whitespace-pre-wrap",
+			children: text
+		})]
+	});
+}
+/** Keep the existing joined user bubble, splitting only at application notes. */
+function userTextSegments(parts) {
+	const segments = [];
+	let pending = [];
+	let start = 0;
+	const flush = () => {
+		const text = pending.join("\n");
+		if (text.trim()) segments.push({
+			index: start,
+			synthetic: false,
+			text
+		});
+		pending = [];
+	};
+	parts.forEach((part, index) => {
+		if (part.type !== "text") return;
+		if (part.synthetic) {
+			flush();
+			if (part.text.trim()) segments.push({
+				index,
+				synthetic: true,
+				text: part.text
+			});
+		} else {
+			if (pending.length === 0) start = index;
+			pending.push(part.text);
+		}
+	});
+	flush();
+	return segments;
+}
+//#endregion
+export { SyntheticText, userTextSegments };

package/dist/chat/user-message.d.ts

@@ -12,10 +12,8 @@ export interface UserMessageProps {
   actions?: ReactNode;
 }
 /**
- * The single user message bubble uses inverse theme colors. The timestamp sits
- * beside the bubble and appears on hover, so it costs no height. Used by both
- * the run/message list (session-model `parts`) and AgentTimeline (direct
- * `content`/`timestamp`).
+ * User speech retains the inverse-theme bubble and direct-content contract.
+ * Application notes interrupt the bubble in source order, outside its attribution.
  */
 export declare const UserMessage: import("react").MemoExoticComponent<({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => import("react").JSX.Element | null>;
 //#endregion

package/dist/chat/user-message.js

@@ -1,3 +1,4 @@
+import { SyntheticText, userTextSegments } from "./synthetic-text.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/user-message.tsx
@@ -7,15 +8,13 @@ function formatTime(date) {
 		minute: "2-digit"
 	});
 }
-/**
-* The single user message bubble uses inverse theme colors. The timestamp sits
-* beside the bubble and appears on hover, so it costs no height. Used by both
-* the run/message list (session-model `parts`) and AgentTimeline (direct
-* `content`/`timestamp`).
-*/
-const UserMessage = memo(({ message: _message, parts, content, timestamp, actions }) => {
-	const text = content ?? (parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join("\n");
-	if (!text.trim()) return null;
+function MessageActions({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground",
+		children
+	});
+}
+function UserBubble({ text, timestamp, actions }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex justify-end",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -30,12 +29,34 @@ const UserMessage = memo(({ message: _message, parts, content, timestamp, action
 					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]",
 					children: text
 				})]
-			}), actions ? /* @__PURE__ */ jsx("div", {
-				className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground",
-				children: actions
-			}) : null]
+			}), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]
 		})
 	});
+}
+/**
+* User speech retains the inverse-theme bubble and direct-content contract.
+* Application notes interrupt the bubble in source order, outside its attribution.
+*/
+const UserMessage = memo(({ message: _message, parts, content, timestamp, actions }) => {
+	if (content != null) return content.trim() ? /* @__PURE__ */ jsx(UserBubble, {
+		text: content,
+		timestamp,
+		actions
+	}) : null;
+	const segments = userTextSegments(parts ?? []);
+	if (segments.length === 0) return null;
+	if (segments.length === 1 && !segments[0].synthetic) return /* @__PURE__ */ jsx(UserBubble, {
+		text: segments[0].text,
+		timestamp,
+		actions
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [segments.map((segment) => segment.synthetic ? /* @__PURE__ */ jsx(SyntheticText, { text: segment.text }, segment.index) : /* @__PURE__ */ jsx(UserBubble, {
+			text: segment.text,
+			timestamp
+		}, segment.index)), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]
+	});
 });
 UserMessage.displayName = "UserMessage";
 //#endregion

package/dist/run/run-group.js

@@ -3,6 +3,7 @@ import { formatDuration } from "../utils/format.js";
 import { InlineToolItem } from "./inline-tool-item.js";
 import { Markdown } from "../markdown/markdown.js";
 import { InlineThinkingItem } from "./inline-thinking-item.js";
+import { SyntheticText } from "../chat/synthetic-text.js";
 import { OpenUIArtifactRenderer } from "../openui/openui-artifact-renderer.js";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -168,81 +169,107 @@ const RunGroup = memo(({ run, partMap, collapsed, onToggle, branding = DEFAULT_B
 		return parts;
 	}, [run.messages, partMap]);
 	const { stats, isStreaming } = run;
-	if (!allParts.some(({ part }) => {
+	const hasRenderableParts = allParts.some(({ part }) => {
 		if (part.type === "tool" || part.type === "reasoning") return true;
-		return part.type === "text" && !part.synthetic && part.text.trim().length > 0;
-	})) {
-		if (!isStreaming) return null;
-		return /* @__PURE__ */ jsx(AssistantShell, {
-			branding,
-			isStreaming: true,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "flex gap-[5px]",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
-							style: { animationDelay: "0ms" }
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
-							style: { animationDelay: "150ms" }
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
-							style: { animationDelay: "300ms" }
-						})
-					]
-				})
+		return part.type === "text" && part.text.trim().length > 0;
+	});
+	const pendingResponse = /* @__PURE__ */ jsx(AssistantShell, {
+		branding,
+		isStreaming: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex gap-[5px]",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
+						style: { animationDelay: "0ms" }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
+						style: { animationDelay: "150ms" }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]",
+						style: { animationDelay: "300ms" }
+					})
+				]
 			})
-		});
-	}
+		})
+	});
+	if (!hasRenderableParts) return isStreaming ? pendingResponse : null;
 	if (!allParts.some(({ part }) => {
 		if (part.type === "reasoning") return true;
 		if (part.type === "tool") return !isOpenUITool(part);
 		return false;
-	})) return /* @__PURE__ */ jsx(AssistantShell, {
-		branding,
-		isStreaming,
-		children: allParts.map(({ part, msgId, index }) => {
+	})) {
+		const segments = [];
+		let lastSourceSegment = -1;
+		for (const entry of allParts) {
+			const { part, msgId, index } = entry;
+			if (part.type === "text" && !part.text.trim()) continue;
 			const key = `${msgId}-${index}`;
-			if (part.type === "tool" && 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__ */ jsxs("div", {
-					className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]",
-					children: [summary ? /* @__PURE__ */ jsx("div", {
-						className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground",
-						children: summary
-					}) : null, /* @__PURE__ */ jsx("div", {
-						className: "p-4",
-						children: /* @__PURE__ */ jsx(OpenUIArtifactRenderer, { schema })
-					})]
-				}, key);
-				if (toolPart.state.status === "running") return /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground",
-					children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }), "Building view…"]
-				}, key);
+			if (part.type === "text" && part.synthetic) segments.push({
+				kind: "note",
+				key,
+				text: part.text
+			});
+			else {
+				const previous = segments[segments.length - 1];
+				if (previous?.kind === "source") previous.entries.push(entry);
+				else segments.push({
+					kind: "source",
+					key,
+					entries: [entry]
+				});
+				lastSourceSegment = segments.length - 1;
 			}
-			if (part.type === "text" && !part.synthetic && part.text.trim()) return /* @__PURE__ */ jsx("div", {
-				className: "px-0.5",
-				children: /* @__PURE__ */ jsx(Markdown, {
-					className: "tangle-prose text-[15px] leading-7 text-[var(--text-primary)]",
-					children: part.text
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [segments.map((segment, segmentIndex) => segment.kind === "note" ? /* @__PURE__ */ jsx(SyntheticText, { text: segment.text }, segment.key) : /* @__PURE__ */ jsx(AssistantShell, {
+				branding,
+				isStreaming: isStreaming && segmentIndex === lastSourceSegment,
+				children: segment.entries.map(({ part, msgId, index }) => {
+					const key = `${msgId}-${index}`;
+					if (part.type === "tool" && 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__ */ jsxs("div", {
+							className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]",
+							children: [summary ? /* @__PURE__ */ jsx("div", {
+								className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground",
+								children: summary
+							}) : null, /* @__PURE__ */ jsx("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ jsx(OpenUIArtifactRenderer, { schema })
+							})]
+						}, key);
+						if (toolPart.state.status === "running") return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground",
+							children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }), "Building view…"]
+						}, key);
+					}
+					if (part.type === "text" && !part.synthetic && part.text.trim()) return /* @__PURE__ */ jsx("div", {
+						className: "px-0.5",
+						children: /* @__PURE__ */ jsx(Markdown, {
+							className: "tangle-prose text-[15px] leading-7 text-[var(--text-primary)]",
+							children: part.text
+						})
+					}, key);
+					return null;
 				})
-			}, key);
-			return null;
-		})
-	});
+			}, segment.key)), isStreaming && lastSourceSegment === -1 ? pendingResponse : null]
+		});
+	}
 	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;
+		return part.type === "text" && part.text.trim().length > 0;
 	});
 	const dotAccent = (part) => {
 		if (part.type === "reasoning") return "bg-[var(--brand-glow)]";
-		if (part.type === "text") return "bg-primary";
+		if (part.type === "text" && !part.synthetic) return "bg-primary";
 		return "bg-[var(--border-hover)]";
 	};
 	return /* @__PURE__ */ jsx(Collapsible.Root, {
@@ -334,7 +361,7 @@ const RunGroup = memo(({ run, partMap, collapsed, onToggle, branding = DEFAULT_B
 								part,
 								defaultOpen: isStreaming
 							});
-							else if (part.type === "text" && !part.synthetic && part.text.trim()) node = /* @__PURE__ */ jsx("div", {
+							else if (part.type === "text" && part.text.trim()) node = part.synthetic ? /* @__PURE__ */ jsx(SyntheticText, { text: part.text }) : /* @__PURE__ */ jsx("div", {
 								className: "px-1 py-0.5",
 								children: /* @__PURE__ */ jsx(Markdown, {
 									className: "tangle-prose text-[15px] leading-7",

package/package.json

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

package/src/chat/chat-container.synthetic.stories.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { SessionMessage } from "../types/message";
+import type { SessionPart } from "../types/parts";
+import { Button } from "../primitives/button";
+import { ChatContainer } from "./chat-container";
+
+const messages: SessionMessage[] = [
+  { id: "user", role: "user" },
+  { id: "assistant", role: "assistant" },
+];
+
+type Props = { presentation: "runs" | "timeline"; state: "mixed" | "notes-only" | "pending" };
+function TranscriptNotes({ presentation, state }: Props) {
+  const [appended, setAppended] = useState(false);
+  const [inspected, setInspected] = useState<string | null>(null);
+  const partMap: Record<string, SessionPart[]> = state === "mixed" ? {
+    user: [
+      { type: "text", text: "Inspect the available worker results." },
+      { type: "text", synthetic: true, text: "Delivery receipt recorded by the application." },
+      { type: "text", text: "Tell me which evidence is missing." },
+    ],
+    assistant: [
+      { type: "text", text: "I will inspect the retained result files." },
+      { type: "tool", id: "first", tool: "read", state: { status: "completed", input: { path: "results/first.json" }, output: "First worker completed." } },
+      { type: "text", synthetic: true, text: "No tool trace was captured for the follow-up worker." },
+      { type: "tool", id: "second", tool: "read", state: { status: "error", input: { path: "results/second.json" }, error: "No retained result exists." } },
+      { type: "text", text: "Only the first worker has a retained result. The follow-up remains unverified." },
+    ],
+  } : {
+    user: state === "pending" ? [{ type: "text", text: "Inspect the worker results." }] : [],
+    assistant: [{ type: "text", synthetic: true, text: state === "pending" ? "Request accepted; no agent response received yet." : "Task not persisted. No agent response or tool trace is available." }],
+  };
+  if (appended) partMap.assistant.push({ type: "text", synthetic: true, text: "Delivery metadata added locally." });
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-4 p-4">
+      <p className="text-sm text-muted-foreground">Example transcript data. These controls update local story state only.</p>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button type="button" onClick={() => setAppended(true)} disabled={appended}>Append application note</Button>
+        <span role="status">{inspected ? `Inspected ${inspected}` : "No tool selected"}</span>
+      </div>
+      <ChatContainer
+        messages={messages}
+        partMap={partMap}
+        isStreaming={state === "pending"}
+        presentation={presentation}
+        renderToolActions={(part) => <Button type="button" size="sm" variant="ghost" onClick={() => setInspected(part.id)}>Inspect {part.id}</Button>}
+        renderTimelineToolActions={(part) => <Button type="button" size="sm" variant="ghost" onClick={() => setInspected(part.id)}>Inspect {part.id}</Button>}
+      />
+    </div>
+  );
+}
+
+const meta: Meta<typeof TranscriptNotes> = {
+  title: "Chat/Transcript notes",
+  component: TranscriptNotes,
+  parameters: { layout: "fullscreen" },
+  args: { presentation: "runs", state: "mixed" },
+};
+export default meta;
+type Story = StoryObj<typeof TranscriptNotes>;
+
+const checkMixed: NonNullable<Story["play"]> = async ({ canvasElement }) => {
+  const notes = canvasElement.querySelectorAll('[role="note"]');
+  if (notes.length !== 2) throw new Error("Expected both retained application notes");
+  for (const note of notes) {
+    if (note.closest('.bg-foreground, .tangle-prose, [class*="rounded-[26px]"]')) {
+      throw new Error("Application note was attributed to a speaker bubble");
+    }
+  }
+  const append = Array.from(canvasElement.querySelectorAll("button")).find((button) => button.textContent === "Append application note");
+  if (!append) throw new Error("Missing story action");
+  append.click();
+  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+  if (canvasElement.querySelectorAll('[role="note"]').length !== 3) throw new Error("Appended note was lost");
+};
+
+export const MixedRuns: Story = { play: checkMixed };
+export const MixedTimeline: Story = { args: { presentation: "timeline" }, play: checkMixed };
+export const NotesOnly: Story = { args: { state: "notes-only" } };
+export const PendingRuns: Story = { args: { state: "pending" } };
+export const PendingTimeline: Story = { args: { presentation: "timeline", state: "pending" } };

package/src/chat/chat-container.synthetic.test.tsx

@@ -0,0 +1,171 @@
+import { render, renderHook, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import type { SessionMessage } from "../types/message";
+import type { SessionPart, TextPart, ToolPart } from "../types/parts";
+import { useRunGroups } from "../hooks/use-run-groups";
+import { ChatContainer, type ChatContainerProps } from "./chat-container";
+
+// Only the missing browser layout API is stubbed; transcript components are real.
+beforeAll(() => { Element.prototype.scrollIntoView = vi.fn(); });
+
+const messages: SessionMessage[] = [
+  { id: "user", role: "user" },
+  { id: "assistant", role: "assistant" },
+];
+const text = (value: string): TextPart => ({ type: "text", text: value });
+const note = (value: string): TextPart => ({ ...text(value), synthetic: true });
+const read = (id: string, path: string): ToolPart => ({
+  type: "tool", id, tool: "read",
+  state: { status: "completed", input: { path }, output: "File read." },
+});
+const firstTool = read("first", "src/first.ts");
+const secondTool = read("second", "src/second.ts");
+
+function expectOrder(...values: string[]) {
+  const nodes = values.map((value) => screen.getByText(value));
+  for (let i = 1; i < nodes.length; i++) {
+    expect(nodes[i - 1].compareDocumentPosition(nodes[i]) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  }
+}
+
+describe.each(["runs", "timeline"] as const)("synthetic transcript text: %s", (presentation) => {
+  function view(partMap: Record<string, SessionPart[]>, extra: Partial<ChatContainerProps> = {}) {
+    return <ChatContainer messages={messages} partMap={partMap} isStreaming={false} presentation={presentation} {...extra} />;
+  }
+
+  it("keeps mixed user and assistant notes in source order, outside speaker bubbles", () => {
+    const { container } = render(view({
+      user: [text("User before"), note("Delivery receipt"), text("User after")],
+      assistant: [text("Assistant before"), note("Missing trace"), text("Assistant after")],
+    }));
+    expectOrder("User before", "Delivery receipt", "User after", "Assistant before", "Missing trace", "Assistant after");
+    const notes = screen.getAllByRole("note", { name: "Application note" });
+    expect(notes).toHaveLength(2);
+    for (const element of notes) {
+      expect(element.closest('.bg-foreground, .tangle-prose, [class*="rounded-[26px]"]')).toBeNull();
+    }
+    const bubbles = container.querySelectorAll(".bg-foreground.text-background");
+    expect(bubbles).toHaveLength(2);
+    for (const bubble of bubbles) expect(bubble).not.toHaveTextContent("Delivery receipt");
+  });
+
+  it("retains synthetic-only messages without inventing speaker text", () => {
+    const { container } = render(view({ user: [note("Request receipt")], assistant: [note("No response persisted")] }));
+    expectOrder("Request receipt", "No response persisted");
+    expect(screen.getAllByRole("note")).toHaveLength(2);
+    expect(screen.queryByText("Agent")).not.toBeInTheDocument();
+    expect(container.querySelector(".bg-foreground, .tangle-prose")).toBeNull();
+  });
+
+  it("omits blank notes and blank source text", () => {
+    render(view({ user: [note(" \n "), text(" ")], assistant: [note("\t"), text("\n")] }));
+    expect(screen.queryByRole("note")).not.toBeInTheDocument();
+    expect(screen.queryByText("Agent")).not.toBeInTheDocument();
+  });
+
+  it("does not parse application notes as Markdown, HTML, or OpenUI", () => {
+    const literal = '<em>literal</em>\n**not markdown**\n```json\n{"type":"heading","text":"Not a heading"}\n```';
+    render(view({ user: [], assistant: [note(literal)] }));
+    const element = screen.getByRole("note");
+    expect(element.textContent).toContain(literal);
+    expect(element.querySelector("em, strong, h1, h2, h3, button, a")).toBeNull();
+    expect(element.innerHTML).toContain("&lt;em&gt;literal&lt;/em&gt;");
+  });
+
+  it("renders notes even when OpenUI rendering is disabled", () => {
+    render(view({ user: [], assistant: [note("Receipt with OpenUI off")] }, { enableOpenUI: false }));
+    expect(screen.getByRole("note")).toHaveTextContent("Receipt with OpenUI off");
+  });
+
+  it("retains repeated notes and their position rather than deduplicating content", () => {
+    render(view({ user: [], assistant: [note("Same receipt"), text("Between receipts"), note("Same receipt")] }));
+    const notes = screen.getAllByRole("note");
+    expect(notes).toHaveLength(2);
+    const middle = screen.getByText("Between receipts");
+    expect(notes[0].compareDocumentPosition(middle) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(middle.compareDocumentPosition(notes[1]) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("preserves tool/note order and original tool callback arguments", async () => {
+    const user = userEvent.setup();
+    const activated = vi.fn();
+    const renderRunTool = vi.fn<NonNullable<ChatContainerProps["renderToolActions"]>>((part, context) => (
+      <button type="button" onClick={() => activated(part, context)}>Inspect {part.id}</button>
+    ));
+    const renderTimelineTool = vi.fn((part: ToolPart) => (
+      <button type="button" onClick={() => activated(part)}>Inspect {part.id}</button>
+    ));
+    render(view({ user: [text("Read files")], assistant: [firstTool, note("Partial trace"), secondTool, text("Source answer")] }, {
+      renderToolActions: renderRunTool,
+      renderTimelineToolActions: renderTimelineTool,
+    }));
+    expectOrder("src/first.ts", "Partial trace", "src/second.ts", "Source answer");
+    await user.click(screen.getByRole("button", { name: "Inspect second" }));
+    expect(activated.mock.calls[0][0]).toBe(secondTool);
+    if (presentation === "runs") {
+      expect(activated.mock.calls[0][1]).toMatchObject({ messageId: "assistant", partIndex: 2 });
+      expect(renderTimelineTool).not.toHaveBeenCalled();
+      expect(screen.getByText("2 tools, 1 response")).toBeInTheDocument();
+    } else {
+      expect(renderRunTool).not.toHaveBeenCalled();
+    }
+  });
+
+  it("does not treat an application receipt as the pending assistant reply", () => {
+    const partMap = { user: [text("Question")], assistant: [note("Request accepted")] };
+    const { rerender } = render(view(partMap, { isStreaming: true }));
+    expect(screen.getByRole("note")).toHaveTextContent("Request accepted");
+    if (presentation === "timeline") {
+      expect(screen.getByRole("status", { name: "Agent is thinking" })).toBeInTheDocument();
+    } else {
+      expect(screen.getByText("Thinking")).toBeInTheDocument();
+    }
+    rerender(view({ ...partMap, assistant: [note("Request accepted"), text("Answer arrived")] }));
+    expect(screen.getByRole("note")).toHaveTextContent("Request accepted");
+    expect(screen.getByText("Answer arrived")).toBeInTheDocument();
+    expect(screen.queryByRole("status", { name: "Agent is thinking" })).not.toBeInTheDocument();
+    expect(screen.queryByText("Thinking")).not.toBeInTheDocument();
+  });
+});
+
+describe("run attribution and manual collapse", () => {
+  it.each([false, true])("excludes notes from response statistics and summaries (only notes: %s)", (onlyNotes) => {
+    const { result } = renderHook(() => useRunGroups({
+      messages,
+      partMap: { user: [text("Question")], assistant: onlyNotes ? [note("App receipt")] : [text("Authored answer"), note("App receipt")] },
+      isStreaming: false,
+    }));
+    const group = result.current.find((entry) => entry.type === "run");
+    expect(group?.type).toBe("run");
+    if (group?.type !== "run") throw new Error("Expected the real run group");
+    expect(group.run.stats.textPartCount).toBe(onlyNotes ? 0 : 1);
+    expect(group.run.summaryText).toBe(onlyNotes ? null : "Authored answer");
+  });
+
+  it("restores note order on keyboard expansion, without quoting notes in the run summary", async () => {
+    const user = userEvent.setup();
+    render(<ChatContainer messages={messages} partMap={{ user: [text("Question")], assistant: [firstTool, note("App-only receipt"), text("Source answer")] }} isStreaming={false} />);
+    expectOrder("src/first.ts", "App-only receipt", "Source answer");
+    const toggle = screen.getByRole("button", { expanded: true, name: /Agent/ });
+    await user.click(toggle);
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    expect(toggle).toHaveTextContent("1 tool, 1 response");
+    expect(toggle).not.toHaveTextContent("App-only receipt");
+    expect(screen.queryByRole("note")).not.toBeInTheDocument();
+    toggle.focus();
+    await user.keyboard("{Enter}");
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    expectOrder("src/first.ts", "App-only receipt", "Source answer");
+  });
+
+  it("restores notes behind the existing explicit timeline limit", async () => {
+    const user = userEvent.setup();
+    render(<ChatContainer messages={messages} partMap={{ user: [text("Question")], assistant: [firstTool, note("App-only receipt"), text("Source answer")] }} isStreaming={false} presentation="timeline" collapseTimelineAfter={1} />);
+    expect(screen.queryByRole("note")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Show 2 more steps" }));
+    expectOrder("src/first.ts", "App-only receipt", "Source answer");
+    await user.click(screen.getByRole("button", { name: "Show less" }));
+    expect(screen.queryByRole("note")).not.toBeInTheDocument();
+  });
+});

package/src/chat/chat-container.tsx

@@ -8,7 +8,7 @@ import { ArrowDown } from "lucide-react";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import type { SessionMessage } from "../types/message";
-import type { SessionPart, TextPart, ToolPart } from "../types/parts";
+import type { SessionPart, ToolPart } from "../types/parts";
 import type { AgentBranding } from "../types/branding";
 import type { CustomToolRenderer } from "../types/tool-display";
 import type { Run } from "../types/run";
@@ -16,6 +16,7 @@ import { useRunGroups } from "../hooks/use-run-groups";
 import { useRunCollapseState } from "../hooks/use-run-collapse-state";
 import { useAutoScroll } from "../hooks/use-auto-scroll";
 import { MessageList } from "./message-list";
+import { SyntheticText, userTextSegments } from "./synthetic-text";
 import {
   AgentTimeline,
   type AgentTimelineItem,
@@ -219,21 +220,25 @@ function buildTimelineItems(
     const parts = partMap[message.id] ?? [];
 
     if (message.role === "user") {
-      const content = parts
-        .filter((part): part is TextPart => part.type === "text")
-        .map((part) => part.text)
-        .join("\n")
-        .trim();
-
-      if (!content) continue;
-
-      items.push({
-        id: message.id,
-        kind: "message",
-        role: "user",
-        content,
-        timestamp: createdAtFromMessage(message),
-      });
+      const segments = userTextSegments(parts);
+      for (const segment of segments) {
+        const id = segments.length === 1 ? message.id : `${message.id}-user-${segment.index}`;
+        if (segment.synthetic) {
+          items.push({
+            id,
+            kind: "custom",
+            content: <div className="mx-3"><SyntheticText text={segment.text} /></div>,
+          });
+        } else {
+          items.push({
+            id,
+            kind: "message",
+            role: "user",
+            content: segment.text.trim(),
+            timestamp: createdAtFromMessage(message),
+          });
+        }
+      }
       continue;
     }
 
@@ -289,6 +294,18 @@ function buildTimelineItems(
 
       flushToolBuffer(index);
 
+      // A note is neither an assistant reply nor an OpenUI instruction.
+      if (part.type === "text" && part.synthetic) {
+        if (part.text.trim()) {
+          items.push({
+            id: itemId,
+            kind: "custom",
+            content: <div className="mx-3"><SyntheticText text={part.text} /></div>,
+          });
+        }
+        return;
+      }
+
       if (part.type === "text" && !part.synthetic && part.text.trim()) {
         // Check if the text itself contains an OpenUI JSON block
         if (enableOpenUI) {

package/src/chat/synthetic-text.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { SessionPart } from "../types/parts";
+import { SyntheticText, userTextSegments } from "./synthetic-text";
+import { UserMessage } from "./user-message";
+
+const mixed: SessionPart[] = [
+  { type: "text", text: "First" },
+  { type: "text", text: "Second", synthetic: false },
+  { type: "text", text: "Receipt", synthetic: true },
+  { type: "text", text: "Third" },
+  { type: "text", text: "Last receipt", synthetic: true },
+];
+
+describe("user text boundaries", () => {
+  it("joins adjacent authored parts, keeps source indices and does not mutate the input", () => {
+    const before = JSON.stringify(mixed);
+    expect(userTextSegments(mixed)).toEqual([
+      { index: 0, synthetic: false, text: "First\nSecond" },
+      { index: 2, synthetic: true, text: "Receipt" },
+      { index: 3, synthetic: false, text: "Third" },
+      { index: 4, synthetic: true, text: "Last receipt" },
+    ]);
+    expect(JSON.stringify(mixed)).toBe(before);
+  });
+
+  it("skips empty content without merging across a synthetic boundary", () => {
+    expect(userTextSegments([
+      { type: "text", text: "Before" },
+      { type: "text", text: " \n", synthetic: true },
+      { type: "text", text: "After" },
+    ])).toEqual([
+      { index: 0, synthetic: false, text: "Before" },
+      { index: 2, synthetic: false, text: "After" },
+    ]);
+    expect(userTextSegments([])).toEqual([]);
+  });
+
+  it("preserves a single joined bubble when no application note is present", () => {
+    const { container } = render(<UserMessage parts={mixed.slice(0, 2)} />);
+    expect(container.querySelectorAll(".bg-foreground.text-background")).toHaveLength(1);
+    expect(container.querySelector(".whitespace-pre-wrap")?.textContent).toBe("First\nSecond");
+    expect(screen.queryByRole("note")).not.toBeInTheDocument();
+  });
+
+  it.each(["", "Direct content"])("preserves explicit content precedence: %j", (content) => {
+    const { container } = render(<UserMessage content={content} parts={mixed} />);
+    expect(screen.queryByRole("note")).not.toBeInTheDocument();
+    expect(container.textContent).toBe(content);
+  });
+
+  it("renders message actions once after all segments, even after a trailing note", () => {
+    render(<UserMessage parts={mixed} actions={<button type="button">Retry message</button>} />);
+    const action = screen.getByRole("button", { name: "Retry message" });
+    const last = screen.getByText("Last receipt");
+    expect(last.compareDocumentPosition(action) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(screen.getAllByRole("button", { name: "Retry message" })).toHaveLength(1);
+  });
+
+  it("supports a note-only user message with one action and no inverse-theme bubble", () => {
+    const { container } = render(<UserMessage parts={[mixed[2]]} actions={<button type="button">Inspect receipt</button>} />);
+    expect(screen.getByRole("note")).toHaveTextContent("Receipt");
+    expect(screen.getByRole("button", { name: "Inspect receipt" })).toBeInTheDocument();
+    expect(container.querySelector(".bg-foreground")).toBeNull();
+  });
+
+  it("retains direct-content timestamps", () => {
+    const { container } = render(<UserMessage content="Original words" timestamp={new Date("2026-01-01T12:00:00Z")} />);
+    expect(container.querySelectorAll("[data-user-message-time]")).toHaveLength(1);
+    expect(screen.getByText("Original words")).toBeInTheDocument();
+  });
+
+  it("renders a visible, named plain-text note and omits blanks", () => {
+    const { rerender } = render(<SyntheticText text="No trace captured" />);
+    expect(screen.getByRole("note", { name: "Application note" })).toHaveTextContent("No trace captured");
+    expect(screen.getByText("Application note")).toBeVisible();
+    rerender(<SyntheticText text={" \n "} />);
+    expect(screen.queryByRole("note")).not.toBeInTheDocument();
+  });
+});

package/src/chat/synthetic-text.tsx

@@ -0,0 +1,51 @@
+import type { SessionPart } from "../types/parts";
+
+/** Internal transcript chrome, never attributed to a user or model. */
+export function SyntheticText({ text }: { text: string }) {
+  if (!text.trim()) return null;
+  return (
+    <div
+      role="note"
+      aria-label="Application note"
+      data-synthetic-text=""
+      className="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"
+    >
+      <div className="mb-1 font-medium">Application note</div>
+      {/* Plain React text: receipts are not Markdown or executable OpenUI. */}
+      <div className="break-words whitespace-pre-wrap">{text}</div>
+    </div>
+  );
+}
+
+export interface UserTextSegment {
+  /** Original part index, so subsequent streamed parts do not change keys. */
+  index: number;
+  synthetic: boolean;
+  text: string;
+}
+
+/** Keep the existing joined user bubble, splitting only at application notes. */
+export function userTextSegments(parts: SessionPart[]): UserTextSegment[] {
+  const segments: UserTextSegment[] = [];
+  let pending: string[] = [];
+  let start = 0;
+  const flush = () => {
+    const text = pending.join("\n");
+    if (text.trim()) segments.push({ index: start, synthetic: false, text });
+    pending = [];
+  };
+  parts.forEach((part, index) => {
+    if (part.type !== "text") return;
+    if (part.synthetic) {
+      flush();
+      if (part.text.trim()) {
+        segments.push({ index, synthetic: true, text: part.text });
+      }
+    } else {
+      if (pending.length === 0) start = index;
+      pending.push(part.text);
+    }
+  });
+  flush();
+  return segments;
+}

package/src/chat/user-message.tsx

@@ -1,6 +1,7 @@
 import { memo, type ReactNode } from "react";
 import type { SessionMessage } from "../types/message";
 import type { SessionPart } from "../types/parts";
+import { SyntheticText, userTextSegments } from "./synthetic-text";
 
 export interface UserMessageProps {
   /** Session-model input: text is derived from these parts. */
@@ -16,47 +17,64 @@ function formatTime(date: Date): string {
   return date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
 }
 
+function MessageActions({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
+      {children}
+    </div>
+  );
+}
+
+function UserBubble({ text, timestamp, actions }: {
+  text: string;
+  timestamp?: Date;
+  actions?: ReactNode;
+}) {
+  return (
+    <div className="flex justify-end">
+      <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
+        <div className="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background">
+          {timestamp ? (
+            <span
+              data-user-message-time=""
+              className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+            >
+              {formatTime(timestamp)}
+            </span>
+          ) : null}
+          <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]">
+            {text}
+          </div>
+        </div>
+        {actions ? <MessageActions>{actions}</MessageActions> : null}
+      </div>
+    </div>
+  );
+}
+
 /**
- * The single user message bubble uses inverse theme colors. The timestamp sits
- * beside the bubble and appears on hover, so it costs no height. Used by both
- * the run/message list (session-model `parts`) and AgentTimeline (direct
- * `content`/`timestamp`).
+ * User speech retains the inverse-theme bubble and direct-content contract.
+ * Application notes interrupt the bubble in source order, outside its attribution.
  */
 export const UserMessage = memo(
   ({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => {
-    const text =
-      content ??
-      (parts ?? [])
-        .filter((p) => p.type === "text")
-        .map((p) => (p as { text: string }).text)
-        .join("\n");
-
-    if (!text.trim()) return null;
-
+    // Explicit direct content (including empty content) still overrides parts.
+    if (content != null) {
+      return content.trim() ? <UserBubble text={content} timestamp={timestamp} actions={actions} /> : null;
+    }
+    const segments = userTextSegments(parts ?? []);
+    if (segments.length === 0) return null;
+    if (segments.length === 1 && !segments[0].synthetic) {
+      return <UserBubble text={segments[0].text} timestamp={timestamp} actions={actions} />;
+    }
     return (
-      <div className="flex justify-end">
-        <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
-          <div
-            className="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"
-          >
-            {timestamp ? (
-              <span
-                data-user-message-time=""
-                className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
-              >
-                {formatTime(timestamp)}
-              </span>
-            ) : null}
-            <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]">
-              {text}
-            </div>
-          </div>
-          {actions ? (
-            <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
-              {actions}
-            </div>
-          ) : null}
-        </div>
+      <div className="space-y-2">
+        {segments.map((segment) => segment.synthetic ? (
+          <SyntheticText key={segment.index} text={segment.text} />
+        ) : (
+          <UserBubble key={segment.index} text={segment.text} timestamp={timestamp} />
+        ))}
+        {actions ? <MessageActions>{actions}</MessageActions> : null}
       </div>
     );
   },

package/src/run/run-group.tsx

@@ -25,6 +25,7 @@ import type { CustomToolRenderer } from "../types/tool-display";
 import { InlineToolItem } from "./inline-tool-item";
 import { InlineThinkingItem } from "./inline-thinking-item";
 import { Markdown } from "../markdown/markdown";
+import { SyntheticText } from "../chat/synthetic-text";
 
 /**
  * One row on the run's timeline spine: a connector line + accent dot in a
@@ -319,25 +320,23 @@ export const RunGroup = memo(
         return true;
       }
 
-      return part.type === "text" && !part.synthetic && part.text.trim().length > 0;
+      return part.type === "text" && part.text.trim().length > 0;
     });
 
-    if (!hasRenderableParts) {
-      if (!isStreaming) {
-        return null;
-      }
+    const pendingResponse = (
+      <AssistantShell branding={branding} isStreaming={true}>
+        <div className="flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]">
+          <span className="flex gap-[5px]">
+            <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "0ms" }} />
+            <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "150ms" }} />
+            <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "300ms" }} />
+          </span>
+        </div>
+      </AssistantShell>
+    );
 
-      return (
-        <AssistantShell branding={branding} isStreaming={true}>
-          <div className="flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]">
-            <span className="flex gap-[5px]">
-              <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "0ms" }} />
-              <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "150ms" }} />
-              <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "300ms" }} />
-            </span>
-          </div>
-        </AssistantShell>
-      );
+    if (!hasRenderableParts) {
+      return isStreaming ? pendingResponse : null;
     }
 
     const showTraceChrome = allParts.some(({ part }) => {
@@ -353,72 +352,106 @@ export const RunGroup = memo(
     });
 
     if (!showTraceChrome) {
+      // Notes split authored blocks rather than living inside an Agent bubble.
+      // Original message/part indices remain available for keys and callbacks.
+      const segments: Array<
+        | { kind: "note"; key: string; text: string }
+        | { kind: "source"; key: string; entries: typeof allParts }
+      > = [];
+      let lastSourceSegment = -1;
+      for (const entry of allParts) {
+        const { part, msgId, index } = entry;
+        if (part.type === "text" && !part.text.trim()) continue;
+        const key = `${msgId}-${index}`;
+        if (part.type === "text" && part.synthetic) {
+          segments.push({ kind: "note", key, text: part.text });
+        } else {
+          const previous = segments[segments.length - 1];
+          if (previous?.kind === "source") {
+            previous.entries.push(entry);
+          } else {
+            segments.push({ kind: "source", key, entries: [entry] });
+          }
+          lastSourceSegment = segments.length - 1;
+        }
+      }
       return (
-        <AssistantShell branding={branding} isStreaming={isStreaming}>
-            {allParts.map(({ part, msgId, index }) => {
-              const key = `${msgId}-${index}`;
-
-              if (part.type === "tool" && isOpenUITool(part as ToolPart)) {
-                const toolPart = part as ToolPart;
-                const schema = extractOpenUISchema(toolPart.state.output);
-                const summary = getOpenUISummary(toolPart.state.output);
+        <div className="space-y-3">
+          {segments.map((segment, segmentIndex) => segment.kind === "note" ? (
+            <SyntheticText key={segment.key} text={segment.text} />
+          ) : (
+            <AssistantShell
+              key={segment.key}
+              branding={branding}
+              isStreaming={isStreaming && segmentIndex === lastSourceSegment}
+            >
+              {segment.entries.map(({ part, msgId, index }) => {
+                const key = `${msgId}-${index}`;
 
-                if (toolPart.state.status === "completed" && schema) {
-                  return (
-                    <div
-                      key={key}
-                      className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]"
-                    >
-                      {summary ? (
-                        <div className="border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground">
-                          {summary}
+                if (part.type === "tool" && 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) {
+                    return (
+                      <div
+                        key={key}
+                        className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]"
+                      >
+                        {summary ? (
+                          <div className="border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground">
+                            {summary}
+                          </div>
+                        ) : null}
+                        <div className="p-4">
+                          <OpenUIArtifactRenderer schema={schema} />
                         </div>
-                      ) : null}
-                      <div className="p-4">
-                        <OpenUIArtifactRenderer schema={schema} />
                       </div>
-                    </div>
-                  );
+                    );
+                  }
+
+                  if (toolPart.state.status === "running") {
+                    return (
+                      <div
+                        key={key}
+                        className="flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground"
+                      >
+                        <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                        Building view…
+                      </div>
+                    );
+                  }
                 }
 
-                if (toolPart.state.status === "running") {
+                if (part.type === "text" && !part.synthetic && part.text.trim()) {
                   return (
-                    <div
-                      key={key}
-                      className="flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground"
-                    >
-                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
-                      Building view…
+                    <div key={key} className="px-0.5">
+                      <Markdown className="tangle-prose text-[15px] leading-7 text-[var(--text-primary)]">
+                        {part.text}
+                      </Markdown>
                     </div>
                   );
                 }
-              }
 
-              if (part.type === "text" && !part.synthetic && part.text.trim()) {
-                return (
-                  <div key={key} className="px-0.5">
-                    <Markdown className="tangle-prose text-[15px] leading-7 text-[var(--text-primary)]">
-                      {part.text}
-                    </Markdown>
-                  </div>
-                );
-              }
-
-              return null;
-            })}
-        </AssistantShell>
+                return null;
+              })}
+            </AssistantShell>
+          ))}
+          {isStreaming && lastSourceSegment === -1 ? pendingResponse : null}
+        </div>
       );
     }
 
-    // Renderable rows: skip empty/synthetic text so spine dots map to real steps.
+    // Keep notes in source order; response statistics still count authored text only.
     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;
+      return part.type === "text" && 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";
+      if (part.type === "text" && !part.synthetic) return "bg-primary";
       return "bg-[var(--border-hover)]";
     };
 
@@ -532,8 +565,10 @@ export const RunGroup = memo(
                   node = (
                     <InlineThinkingItem part={part as ReasoningPart} defaultOpen={isStreaming} />
                   );
-                } else if (part.type === "text" && !part.synthetic && part.text.trim()) {
-                  node = (
+                } else if (part.type === "text" && part.text.trim()) {
+                  node = part.synthetic ? (
+                    <SyntheticText text={part.text} />
+                  ) : (
                     <div className="px-1 py-0.5">
                       <Markdown className="tangle-prose text-[15px] leading-7">{part.text}</Markdown>
                     </div>