@tangle-network/ui 11.14.0 → 11.15.1

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.14.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();
+  });
+});