@tangle-network/ui 11.51.1 → 11.51.3

package/src/chat/message-author.test.tsx

@@ -21,11 +21,6 @@ const segmentedParts: SessionPart[] = [
 // The snapshots below were recorded from the components before `author`
 // existed. A transcript that names no author must keep that exact markup.
 describe("a transcript without authors", () => {
-  it("renders ChatMessage as before", () => {
-    expect(html(<ChatMessage role="user" content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-end"><div class="flex items-center gap-2 px-1 flex-row-reverse"><span class="font-medium text-foreground text-xs">You</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background"><div class="whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div>"`)
-    expect(html(<ChatMessage role="assistant" content="It depends on the lease terms." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 text-foreground"><div class="tangle-prose max-w-none tangle-prose tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"><p>It depends on the lease terms.</p></div></div></div>"`)
-    expect(html(<ChatMessage role="system" content="Session started." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"><div class="tangle-prose max-w-none tangle-prose tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"><p>Session started.</p></div></div></div>"`)
-  })
 
   it("renders UserMessage actions and application notes as before", () => {
     expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
@@ -36,18 +31,6 @@ describe("a transcript without authors", () => {
     expect(html(<UserMessage content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div>"`)
   })
 
-  it("renders AgentTimeline messages as before", () => {
-    expect(
-      html(
-        <AgentTimeline
-          items={[
-            { id: "u1", kind: "message", role: "user", content: "Can I break my lease early?" },
-            { id: "a1", kind: "message", role: "assistant", content: "It depends on the lease terms." },
-          ]}
-        />,
-      ),
-    ).toMatchInlineSnapshot(`"<div class="mx-auto flex w-full max-w-5xl flex-col px-4 py-4"><div data-timeline-step="user" class=""><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div></div><div data-timeline-step="prose" class="mt-4"><div><div class="tangle-prose max-w-none tangle-prose tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"><p>It depends on the lease terms.</p></div></div></div></div>"`)
-  })
 })
 
 const client: ChatAuthor = { id: "client-maria", name: "Maria Lopez", role: "Client" }

package/src/chat/speaker.tsx

@@ -2,71 +2,8 @@ import type { HTMLAttributes } from "react";
 import { RunStatusIcon } from "../run/status-meta";
 import { MessageAuthor } from "./message-author";
 
-/** Where one responder is in its answer. */
-export type SpeakerState = "answering" | "done" | "failed";
-
-/**
- * A responder of a turn addressed to several agents. In the turn's parts it is
- * a `{ type: "speaker", id, name, handle?, state? }` part written before the
- * responder's answer.
- */
-export interface Speaker {
-  /** The agent's stable id. It keys the avatar's tone and a live part's `speaker` tag. */
-  id: string;
-  name: string;
-  /** What a person types after `@` to address the agent. */
-  handle?: string;
-  /** Set once the responder ended; absent while it answers and on rows written before responders reported an end. */
-  state?: SpeakerState;
-}
-
-export type SpeakerPart = Speaker & { type: "speaker" };
-
-/** One responder's share of a turn: its speaker part and the parts it wrote. */
-export interface SpeakerSection<T> {
-  /** The latest speaker part for this responder; null for the parts no speaker owns. */
-  speaker: (T & SpeakerPart) | null;
-  parts: T[];
-}
-
-function isSpeakerPart<T>(part: T): part is T & SpeakerPart {
-  const record = part as { type?: unknown; id?: unknown; name?: unknown } | null;
-  return !!record && record.type === "speaker" && typeof record.id === "string" && typeof record.name === "string";
-}
-
-/**
- * Splits one assistant turn's parts by the agent that wrote them.
- *
- * A stored row holds a speaker part before each responder's answer, so a part
- * belongs to the speaker part before it. A live stream announces every
- * responder first and then interleaves their output, so a part names its owner
- * in `speaker` (the responder's id), which wins over position. A later speaker
- * part with an id already seen replaces that responder's speaker part, which is
- * how its end state arrives, and never opens a second section.
- *
- * Sections keep the order speakers were first announced. Parts no speaker owns
- * come first, in a section whose `speaker` is null; a turn without speaker
- * parts is that one section. No part is dropped, copied or reordered within its
- * section.
- */
-export function partitionBySpeaker<T extends object>(parts: readonly T[]): SpeakerSection<T>[] {
-  const sections = new Map<string, SpeakerSection<T>>();
-  const unowned: T[] = [];
-  let current: SpeakerSection<T> | undefined;
-  for (const part of parts) {
-    if (isSpeakerPart(part)) {
-      current = sections.get(part.id);
-      if (current) current.speaker = part;
-      else sections.set(part.id, (current = { speaker: part, parts: [] }));
-      continue;
-    }
-    const tag = (part as { speaker?: unknown }).speaker;
-    const owner = typeof tag === "string" ? sections.get(tag) : current;
-    (owner?.parts ?? unowned).push(part);
-  }
-  const owned = [...sections.values()];
-  return unowned.length > 0 || owned.length === 0 ? [{ speaker: null, parts: unowned }, ...owned] : owned;
-}
+import type { Speaker, SpeakerState } from "@tangle-network/agent-interface/speaker";
+export { partitionBySpeaker, type Speaker, type SpeakerPart, type SpeakerSection, type SpeakerState } from "@tangle-network/agent-interface/speaker";
 
 export interface SpeakerHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
   speaker: Speaker;

package/src/hooks/index.ts

@@ -8,3 +8,6 @@ export * from "./use-auth";
 export * from "./use-realtime-session";
 export * from "./use-sdk-session";
 export * from "./use-sse-stream";
+
+export { useEventStream, type EventStreamHandlers, type EventStreamSource, type EventStreamOpener } from "./use-event-stream";
+export { useFollowTail } from "./use-follow-tail";

package/src/hooks/use-auto-scroll.ts

@@ -1,59 +1,10 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type RefObject,
-} from "react";
-
-const BOTTOM_THRESHOLD = 40;
-
-/**
- * Scroll-to-bottom behaviour: sticks to the bottom while streaming,
- * pauses when user scrolls up, resumes when user scrolls back down.
- */
-export function useAutoScroll(
-  containerRef: RefObject<HTMLElement | null>,
-  deps: unknown[] = [],
-) {
-  const [isAtBottom, setIsAtBottom] = useState(true);
-  const userScrolledUp = useRef(false);
-
-  const checkBottom = useCallback(() => {
-    const el = containerRef.current;
-    if (!el) return true;
-    return el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD;
-  }, [containerRef]);
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    const onScroll = () => {
-      const atBottom = checkBottom();
-      setIsAtBottom(atBottom);
-      userScrolledUp.current = !atBottom;
-    };
-
-    el.addEventListener("scroll", onScroll, { passive: true });
-    return () => el.removeEventListener("scroll", onScroll);
-  }, [containerRef, checkBottom]);
-
-  useEffect(() => {
-    if (userScrolledUp.current) return;
-    const el = containerRef.current;
-    if (!el) return;
-    el.scrollTop = el.scrollHeight;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-
-  const scrollToBottom = useCallback(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    userScrolledUp.current = false;
-    el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
-    setIsAtBottom(true);
-  }, [containerRef]);
-
-  return { isAtBottom, scrollToBottom };
+import { useCallback, useMemo, type RefObject } from 'react'
+import { useFollowTail } from './use-follow-tail'
+
+/** Existing chat contract, backed by the shared measured-content following lifecycle. */
+export function useAutoScroll(containerRef: RefObject<HTMLElement | null>, deps: unknown[] = []) {
+  const content = useMemo(() => ({}), deps)
+  const { atBottom, jump } = useFollowTail(containerRef, { content })
+  const scrollToBottom = useCallback(() => jump('smooth'), [jump])
+  return { isAtBottom: atBottom, scrollToBottom }
 }

package/src/hooks/use-event-stream.ts

@@ -0,0 +1,71 @@
+"use client";
+import { useEffect, useRef } from 'react'
+
+/** Authenticated hosts own reconnects and session lifecycle; native streams use this lifecycle. */
+export interface EventStreamSource {
+  addEventListener(type: string, listener: (event: MessageEvent<string>) => void): void
+  close(): void
+}
+export type EventStreamOpener = (url: string, onLiveChange?: (live: boolean) => void) => EventStreamSource
+export interface EventStreamHandlers {
+  events: Readonly<Record<string, (event: MessageEvent<string>) => void>>
+  opener?: EventStreamOpener
+  after?: () => number
+  onStart?: () => void
+  onLiveChange?: (live: boolean) => void
+}
+
+/** Internal policy preserves the buffered hook's existing bounded exponential retries. */
+type NativePolicy = EventStreamHandlers & { terminalEvent?: string; onConnecting?: (attempt: number) => void; retryDelay?: (attempt: number) => number | undefined }
+
+/** The sole native EventSource lifecycle, shared by buffered and producer-owned streams. */
+export function openNativeStream(url: string | (() => string), handlers: NativePolicy): { close(): void } {
+  let stopped = false, source: EventStreamSource | undefined, retry: ReturnType<typeof setTimeout> | undefined, attempt = 0
+  handlers.onStart?.()
+  const open = () => {
+    handlers.onConnecting?.(attempt)
+    const target = new URL(typeof url === 'function' ? url() : url, globalThis.location?.href), after = handlers.after?.()
+    if (after !== undefined && after > 0) target.searchParams.set('after', String(after))
+    let connection: EventStreamSource
+    const live = (value: boolean) => { if (!stopped && (!connection || source === connection)) handlers.onLiveChange?.(value) }
+    connection = handlers.opener ? handlers.opener(target.toString(), live) : new EventSource(target.toString())
+    source = connection
+    for (const name of new Set([...Object.keys(handlers.events), ...(handlers.terminalEvent ? [handlers.terminalEvent] : [])])) connection.addEventListener(name, event => {
+      if (stopped || source !== connection) return
+      if (name === handlers.terminalEvent) { stopped = true; clearTimeout(retry); connection.close() }
+      handlers.events[name]?.(event)
+    })
+    if (!handlers.opener) {
+      const native = connection as EventSource
+      native.onopen = () => { attempt = 0; live(true) }
+      native.onerror = () => {
+        connection.close()
+        if (stopped || source !== connection) return
+        live(false)
+        const delay = handlers.retryDelay ? handlers.retryDelay(attempt++) : 1_000
+        if (delay !== undefined) retry = setTimeout(open, delay)
+      }
+    }
+  }
+  open()
+  return { close: () => { stopped = true; clearTimeout(retry); source?.close() } }
+}
+
+/** Producer-owned named events; host transports keep their authenticated reconnect lifecycle. */
+export function useEventStream(url: string | undefined, handlers: EventStreamHandlers): void {
+  const latest = useRef(handlers)
+  latest.current = handlers
+  const names = Object.keys(handlers.events).sort().join(',')
+  useEffect(() => {
+    if (!url || (!handlers.opener && typeof EventSource === 'undefined')) return
+    const current: EventStreamHandlers = {
+      opener: handlers.opener,
+      events: Object.fromEntries(Object.keys(handlers.events).map(name => [name, (event: MessageEvent<string>) => latest.current.events[name]?.(event)])),
+      after: () => latest.current.after?.() ?? 0,
+      onStart: () => latest.current.onStart?.(),
+      onLiveChange: live => latest.current.onLiveChange?.(live),
+    }
+    const connection = openNativeStream(url, { ...current, terminalEvent: 'end' })
+    return () => connection.close()
+  }, [url, handlers.opener, names])
+}

package/src/hooks/use-follow-tail.ts

@@ -0,0 +1,32 @@
+"use client";
+import { type RefObject, useCallback, useLayoutEffect, useRef, useState } from 'react'
+
+/** Keeps the bottom through measured content growth, until the reader deliberately scrolls away. */
+export function useFollowTail(scroller: RefObject<HTMLElement | null>, { identity, content, follow = true, target, thresholdPx = 40 }: {
+  identity?: unknown; content?: unknown; follow?: boolean; target?: unknown; thresholdPx?: number
+}) {
+  const following = useRef(false), latest = useRef({ follow, target, thresholdPx })
+  latest.current = { follow, target, thresholdPx }
+  const [unseen, setUnseen] = useState(false), [atBottom, setAtBottom] = useState(true)
+  const jump = useCallback((behavior: ScrollBehavior = 'auto') => { const node = scroller.current; following.current = latest.current.follow; setUnseen(false); setAtBottom(true); if (node) node.scrollTo({ top: node.scrollHeight, behavior }) }, [scroller])
+  useLayoutEffect(() => {
+    following.current = latest.current.follow && !latest.current.target
+    setUnseen(false)
+    if (scroller.current && !latest.current.target) scroller.current.scrollTop = following.current ? scroller.current.scrollHeight : 0
+  }, [identity])
+  useLayoutEffect(() => { if (!follow) following.current = false }, [follow])
+  useLayoutEffect(() => {
+    const node = scroller.current
+    if (!node) return
+    const track = () => { const near = node.scrollHeight - node.scrollTop - node.clientHeight < latest.current.thresholdPx; following.current = latest.current.follow && near; setAtBottom(near); if (near) setUnseen(false) }
+    node.addEventListener('scroll', track, { passive: true })
+    const pin = () => { if (following.current) node.scrollTop = node.scrollHeight }
+    if (!following.current) setUnseen(true)
+    pin()
+    const observer = new ResizeObserver(pin)
+    observer.observe(node)
+    for (const child of node.children) observer.observe(child)
+    return () => { observer.disconnect(); node.removeEventListener('scroll', track) }
+  }, [content, follow, identity])
+  return { following, unseen, jump, atBottom }
+}

package/src/hooks/use-sse-stream.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { openNativeStream } from "./use-event-stream";
 
 /**
  * SSE Event data structure
@@ -121,7 +122,7 @@ export function useSSEStream<T = unknown>(
   const [timeSinceLastEvent, setTimeSinceLastEvent] = React.useState(0);
 
   const retryCountRef = React.useRef(0);
-  const eventSourceRef = React.useRef<EventSource | null>(null);
+  const eventSourceRef = React.useRef<{ close(): void } | null>(null);
   const abortControllerRef = React.useRef<AbortController | null>(null);
   const reconnectTimeoutRef = React.useRef<ReturnType<
     typeof setTimeout
@@ -330,60 +331,28 @@ export function useSSEStream<T = unknown>(
           }
         });
     } else {
-      // Use native EventSource for simple cases
-      const es = new EventSource(connectUrl.toString());
-      eventSourceRef.current = es;
-
-      es.onopen = () => {
-        setState("connected");
-        retryCountRef.current = 0;
-      };
-
-      es.onerror = () => {
-        const err = new Error("EventSource connection error");
-        setError(err);
-        onError?.(err);
-
-        if (autoReconnect && enabled && retryCountRef.current < maxRetries) {
-          setState("reconnecting");
-          es.close();
-          const delay = reconnectDelay * 2 ** retryCountRef.current;
-          reconnectTimeoutRef.current = setTimeout(
-            () => {
-              retryCountRef.current += 1;
-              connect();
-            },
-            Math.min(delay, 30000),
-          );
-        } else {
-          setState("error");
-        }
-      };
-
-      // Listen for specific event types or default 'message'
-      const types = eventTypes || ["message"];
-      for (const type of types) {
-        es.addEventListener(type, (e: MessageEvent) => {
-          try {
-            const data = JSON.parse(e.data) as T;
-            handleEvent(type, data, e.lastEventId);
-          } catch {
-            handleEvent(type, e.data as T, e.lastEventId);
-          }
-        });
-      }
-
-      // Also listen for unnamed events
-      if (!eventTypes) {
-        es.onmessage = (e: MessageEvent) => {
-          try {
-            const data = JSON.parse(e.data) as T;
-            handleEvent("message", data, e.lastEventId);
-          } catch {
-            handleEvent("message", e.data as T, e.lastEventId);
-          }
-        };
-      }
+      const events = Object.fromEntries((eventTypes ?? ["message"]).map(type => [type, (event: MessageEvent<string>) => {
+        let data: T
+        try { data = JSON.parse(event.data) as T } catch { data = event.data as T }
+        handleEvent(type, data, event.lastEventId)
+      }]))
+      eventSourceRef.current = openNativeStream(() => {
+        const target = new URL(url, window.location.origin)
+        if (lastEventIdRef.current) target.searchParams.set("lastEventId", lastEventIdRef.current)
+        return target.toString()
+      }, {
+        events,
+        onConnecting: attempt => { retryCountRef.current = attempt; setState("connecting"); setError(null) },
+        onLiveChange: live => {
+          if (live) { setState("connected"); retryCountRef.current = 0; return }
+          const error = new Error("EventSource connection error"); setError(error); onError?.(error)
+        },
+        retryDelay: attempt => {
+          if (!autoReconnect || !enabled || attempt >= maxRetries) { setState("error"); return undefined }
+          setState("reconnecting")
+          return Math.min(reconnectDelay * 2 ** attempt, 30000)
+        },
+      })
     }
   }, [
     url,

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

@@ -1,171 +0,0 @@
-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();
-  });
-});