@tangle-network/ui 11.46.0 → 11.48.0

package/src/chat/agent-timeline.tsx

@@ -154,9 +154,11 @@ const TONE_STYLES: Record<AgentTimelineTone, { card: string; text: string; suppo
  * most, a tool sequence — and prose beside it — sits tightest, cards and
  * consecutive paragraphs fall between.
  */
-type StepKind = "user" | "prose" | "tool" | "card";
+export type AgentTimelineStepKind = "user" | "prose" | "tool" | "card";
+type StepKind = AgentTimelineStepKind;
 
-function stepKind(item: AgentTimelineItem): StepKind {
+/** What a row is, for the gap above the next one. */
+export function agentTimelineStepKind(item: AgentTimelineItem): AgentTimelineStepKind {
   if (item.kind === "message") return item.role === "user" ? "user" : "prose";
   if (item.kind === "status" || item.kind === "artifact") return "card";
   return "tool";
@@ -282,6 +284,87 @@ function ArtifactCard({ item }: { item: AgentTimelineArtifactItem }) {
   );
 }
 
+/** The transcript column every timeline sits in: centred, at the reading width. */
+export function AgentTimelineColumn({ className, children }: { className?: string; children?: ReactNode }) {
+  return <div className={cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className)}>{children}</div>;
+}
+
+export interface AgentTimelineStepProps {
+  item: AgentTimelineItem;
+  /** The kind of the row above, which sets the gap; omit for the first row. */
+  previous?: AgentTimelineStepKind;
+  /** Draw the message's author line (the first prose of a turn). */
+  headed?: boolean;
+  renderToolActions?: (part: ToolPart) => ReactNode;
+  viewerId?: string;
+}
+
+/**
+ * One row of the timeline with the gap its neighbour pair calls for. A
+ * consumer that windows a long transcript renders these inside one
+ * `AgentTimelineColumn`, so the rows keep the column's rhythm and edge.
+ */
+export function AgentTimelineStep({ item, previous, headed, renderToolActions, viewerId }: AgentTimelineStepProps) {
+  const kind = agentTimelineStepKind(item);
+  return (
+    <div data-timeline-step={kind} className={cn(spacingBefore(previous, kind), kind === "tool" && ROW_BLEED)}>
+      <TimelineItem item={item} headed={headed} renderToolActions={renderToolActions} viewerId={viewerId} />
+    </div>
+  );
+}
+
+function TimelineItem({ item, headed, renderToolActions, viewerId }: Omit<AgentTimelineStepProps, "previous">): ReactNode {
+  if (item.kind === "message") {
+    return item.role === "user" ? (
+      <UserMessage content={item.content} timestamp={item.timestamp} author={item.author} viewerId={viewerId} />
+    ) : (
+      <AssistantMessage item={item} author={headed ? item.author : undefined} />
+    );
+  }
+
+  if (item.kind === "tool") {
+    return (
+      <ToolCallStep
+        type={item.call.type}
+        label={item.call.label}
+        status={item.call.status}
+        detail={item.call.detail}
+        output={item.call.output}
+        duration={item.call.duration}
+        part={item.part}
+        actions={item.part ? renderToolActions?.(item.part) : undefined}
+      />
+    );
+  }
+
+  if (item.kind === "tool_group") {
+    return (
+      <ToolCallGroup title={item.title}>
+        {item.calls.map((call, callIndex) => {
+          const part = item.parts?.[callIndex];
+          return (
+            <ToolCallStep
+              key={call.id}
+              type={call.type}
+              label={call.label}
+              status={call.status}
+              detail={call.detail}
+              output={call.output}
+              duration={call.duration}
+              part={part}
+              actions={part ? renderToolActions?.(part) : undefined}
+            />
+          );
+        })}
+      </ToolCallGroup>
+    );
+  }
+
+  if (item.kind === "status") return <StatusCard item={item} />;
+  if (item.kind === "artifact") return <ArtifactCard item={item} />;
+  return item.content;
+}
+
 /**
  * AgentTimeline — unified mixed-content transcript for agent-backed sandbox
  * sessions. Renders messages, tool rows, status cards, and artifact handoffs
@@ -352,84 +435,29 @@ export function AgentTimeline({
     speakingAgent = item.author?.id;
   }
 
-  const renderItem = (item: AgentTimelineItem): ReactNode => {
-    if (item.kind === "message") {
-      return item.role === "user" ? (
-        <UserMessage content={item.content} timestamp={item.timestamp} author={item.author} viewerId={viewerId} />
-      ) : (
-        <AssistantMessage item={item} author={headedAgentMessages.has(item.id) ? item.author : undefined} />
-      );
-    }
-
-    if (item.kind === "tool") {
-      return (
-        <ToolCallStep
-          type={item.call.type}
-          label={item.call.label}
-          status={item.call.status}
-          detail={item.call.detail}
-          output={item.call.output}
-          duration={item.call.duration}
-          part={item.part}
-          actions={item.part ? renderToolActions?.(item.part) : undefined}
-        />
-      );
-    }
-
-    if (item.kind === "tool_group") {
-      return (
-        <ToolCallGroup title={item.title}>
-          {item.calls.map((call, callIndex) => {
-            const part = item.parts?.[callIndex];
-            return (
-              <ToolCallStep
-                key={call.id}
-                type={call.type}
-                label={call.label}
-                status={call.status}
-                detail={call.detail}
-                output={call.output}
-                duration={call.duration}
-                part={part}
-                actions={part ? renderToolActions?.(part) : undefined}
-              />
-            );
-          })}
-        </ToolCallGroup>
-      );
-    }
-
-    if (item.kind === "status") return <StatusCard item={item} />;
-    if (item.kind === "artifact") return <ArtifactCard item={item} />;
-    return item.content;
-  };
-
   return (
-    <div className={cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className)}>
-      {renderList.map((item, index) => {
-        const kind = stepKind(item);
-        const prev = index > 0 ? stepKind(renderList[index - 1]) : undefined;
-        return (
-          <div
-            key={item.id}
-            data-timeline-step={kind}
-            className={cn(spacingBefore(prev, kind), kind === "tool" && ROW_BLEED)}
-          >
-            {renderItem(item)}
-          </div>
-        );
-      })}
+    <AgentTimelineColumn className={className}>
+      {renderList.map((item, index) => (
+        <AgentTimelineStep
+          key={item.id}
+          item={item}
+          previous={index > 0 ? agentTimelineStepKind(renderList[index - 1]) : undefined}
+          headed={headedAgentMessages.has(item.id)}
+          renderToolActions={renderToolActions}
+          viewerId={viewerId}
+        />
+      ))}
       {collapsible ? (
         <button
           type="button"
           onClick={() => setExpanded((value) => !value)}
-          className="mt-2 self-start text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+          className="mt-2 self-start text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
         >
           {collapsed
             ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}`
             : "Show less"}
         </button>
       ) : null}
-    </div>
+    </AgentTimelineColumn>
   );
 }

package/src/chat/index.ts

@@ -3,11 +3,25 @@ export { MessageList, type MessageListProps } from "./message-list";
 export { UserMessage, type UserMessageProps } from "./user-message";
 export { ChatMessage, type ChatMessageProps, type MessageRole } from "./chat-message";
 export { MessageAuthor, isViewerMessage, type MessageAuthorProps } from "./message-author";
+export {
+  SpeakerHeader,
+  partitionBySpeaker,
+  type Speaker,
+  type SpeakerHeaderProps,
+  type SpeakerPart,
+  type SpeakerSection,
+  type SpeakerState,
+} from "./speaker";
 export type { ChatAuthor } from "../types/message";
 export { ThinkingIndicator, type ThinkingIndicatorProps } from "./thinking-indicator";
 export {
   AgentTimeline,
+  AgentTimelineColumn,
+  AgentTimelineStep,
+  agentTimelineStepKind,
   type AgentTimelineProps,
+  type AgentTimelineStepProps,
+  type AgentTimelineStepKind,
   type AgentTimelineItem,
   type AgentTimelineMessageItem,
   type AgentTimelineToolItem,

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

@@ -28,8 +28,8 @@ describe("a transcript without authors", () => {
   })
 
   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-xs text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
-    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><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)]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><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)]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground"><button type="button">Copy</button></div></div>"`)
+    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>"`)
+    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><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)]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><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)]">Here it is.</div></div></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>"`)
   })
 
   it("renders UserMessage as before", () => {

package/src/chat/message-author.tsx

@@ -15,20 +15,21 @@ export function isViewerMessage(author: ChatAuthor | undefined, viewerId: string
   return author === undefined || author.id === viewerId;
 }
 
-export interface MessageAuthorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+export interface MessageAuthorProps extends HTMLAttributes<HTMLDivElement> {
   author: ChatAuthor;
 }
 
 /**
  * The line above a message in a transcript with several participants: the
- * author's avatar, name and, when given, their role as a tag.
+ * author's avatar, name and, when given, their role as a tag. Children follow
+ * on the same line, such as a responder's handle and state.
  *
  * The avatar's tone comes from the author's id, so a participant keeps one
  * colour for the whole thread and in every product. Tones can repeat between
  * participants, so the name is always shown beside it. The avatar repeats the
  * visible name and is hidden from assistive technology.
  */
-export function MessageAuthor({ author, className, ...props }: MessageAuthorProps) {
+export function MessageAuthor({ author, className, children, ...props }: MessageAuthorProps) {
   return (
     <div data-message-author="" className={cn("flex min-w-0 max-w-full items-center gap-2", className)} {...props}>
       <IconTile
@@ -47,6 +48,7 @@ export function MessageAuthor({ author, className, ...props }: MessageAuthorProp
           {author.role}
         </Tag>
       ) : null}
+      {children}
     </div>
   );
 }

package/src/chat/speaker.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { partitionBySpeaker, SpeakerHeader } from './speaker'
+import { TRANSCRIPT_TEXT } from './transcript-text'
+
+type Part =
+  | { type: 'speaker'; id: string; name: string; handle?: string; state?: 'answering' | 'done' | 'failed' }
+  | { type: 'text'; text: string; speaker?: string }
+  | { type: 'tool'; tool: string; status: string; speaker?: string }
+  | { type: 'notice'; text: string; speaker?: string }
+
+/** One turn's parts drawn the way a product draws them: a header per responder, its parts under it. */
+function Turn({ parts, live = false }: { parts: Part[]; live?: boolean }) {
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-6">
+      <p className={`ml-auto w-fit max-w-[78%] rounded-2xl bg-foreground px-4 py-3 text-background ${TRANSCRIPT_TEXT}`}>
+        @writer @research-lead plan the launch announcement for the roster feature.
+      </p>
+      {partitionBySpeaker(parts).map(({ speaker, parts: own }) => (
+        <section key={speaker?.id ?? 'turn'} className="flex flex-col gap-2">
+          {speaker ? <SpeakerHeader speaker={speaker} live={live} /> : null}
+          {own.map((part, index) =>
+            part.type === 'text' ? (
+              <p key={index} className={TRANSCRIPT_TEXT}>{part.text}</p>
+            ) : part.type === 'tool' ? (
+              <p key={index} className="font-mono text-muted-foreground text-sm">{part.tool} · {part.status}</p>
+            ) : part.type === 'notice' ? (
+              <p key={index} className="text-[var(--surface-danger-text)] text-sm">{part.text}</p>
+            ) : null,
+          )}
+        </section>
+      ))}
+    </div>
+  )
+}
+
+const meta: Meta<typeof Turn> = {
+  title: 'Chat/Speakers',
+  component: Turn,
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-[var(--bg-root)]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Turn>
+
+/**
+ * A live turn as the stream delivers it: both responders announced first, then
+ * their output interleaved, each part tagged with its responder. The Writer has
+ * reported its end; the Research Lead is still answering.
+ */
+export const AnsweringAtOnce: Story = {
+  args: {
+    live: true,
+    parts: [
+      { type: 'speaker', id: 'ap_writer', name: 'Writer', handle: 'writer' },
+      { type: 'speaker', id: 'ap_research', name: 'Research Lead', handle: 'research-lead' },
+      { type: 'text', speaker: 'ap_writer', text: 'Draft headline: "Every agent in your workspace, one @ away."' },
+      { type: 'tool', speaker: 'ap_research', tool: 'search_repo', status: 'running' },
+      { type: 'text', speaker: 'ap_writer', text: 'Subhead: address any agent from any thread, and let it run on a schedule while you sleep.' },
+      { type: 'speaker', id: 'ap_writer', name: 'Writer', handle: 'writer', state: 'done' },
+      { type: 'text', speaker: 'ap_research', text: 'Checking the roster and the mention routes before naming risks.' },
+    ],
+  },
+}
+
+/** A stored row: a speaker part before each answer. The Research Lead failed and keeps its header and its notice. */
+export const StoredWithFailure: Story = {
+  args: {
+    parts: [
+      { type: 'speaker', id: 'ap_writer', name: 'Writer', handle: 'writer', state: 'done' },
+      { type: 'text', text: 'Draft headline: "Every agent in your workspace, one @ away."' },
+      { type: 'speaker', id: 'ap_research', name: 'Research Lead', handle: 'research-lead', state: 'failed' },
+      { type: 'tool', tool: 'search_repo', status: 'error' },
+      { type: 'notice', text: 'Research Lead could not answer: the model provider refused the request (429).' },
+    ],
+  },
+}
+
+/** Worst case for a phone: a long name and handle while answering. The name and handle truncate; the state stays whole. */
+export const LongNames: Story = {
+  args: {
+    live: true,
+    parts: [
+      { type: 'speaker', id: 'ap_compliance', name: 'Regional Compliance and Disclosure Reviewer', handle: 'regional-compliance-disclosure-reviewer' },
+      { type: 'text', text: 'Reading the disclosure rules for each launch region.' },
+      { type: 'speaker', id: 'ap_q', name: 'Q', state: 'failed' },
+    ],
+  },
+}

package/src/chat/speaker.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { MessageAuthor } from "./message-author"
+import { partitionBySpeaker, SpeakerHeader, type Speaker } from "./speaker"
+
+type Part = { type: string; id?: string; name?: string; handle?: string; state?: Speaker["state"]; text?: string; speaker?: string }
+
+const writer = { type: "speaker", id: "ap_writer", name: "Writer", handle: "writer" }
+const research = { type: "speaker", id: "ap_research", name: "Research Lead", handle: "research-lead" }
+const text = (value: string, speaker?: string): Part => ({ type: "text", text: value, ...(speaker ? { speaker } : {}) })
+
+/** Each section as `[speaker id or null, its texts]`. */
+const shape = (parts: Part[]) =>
+  partitionBySpeaker(parts).map((section) => [section.speaker?.id ?? null, section.parts.map((part) => part.text)])
+
+describe("partitionBySpeaker", () => {
+  it("splits a stored row at its speaker parts, in stored order", () => {
+    expect(shape([writer, text("headline"), text("subhead"), research, text("risks")])).toEqual([
+      ["ap_writer", ["headline", "subhead"]],
+      ["ap_research", ["risks"]],
+    ])
+  })
+
+  it("groups a live stream by each part's speaker tag, not by where it arrived", () => {
+    const live = [writer, research, text("headline", "ap_writer"), text("searching", "ap_research"), text("subhead", "ap_writer"), text("risks", "ap_research")]
+    expect(shape(live)).toEqual([
+      ["ap_writer", ["headline", "subhead"]],
+      ["ap_research", ["searching", "risks"]],
+    ])
+  })
+
+  it("takes a responder's end state from a later speaker part, without a second section", () => {
+    const sections = partitionBySpeaker<Part>([writer, research, text("headline", "ap_writer"), { ...writer, state: "done" }, text("risks", "ap_research")])
+    expect(sections.map((section) => [section.speaker?.name, section.speaker?.state])).toEqual([["Writer", "done"], ["Research Lead", undefined]])
+    expect(sections[1]?.parts.map((part) => part.text)).toEqual(["risks"])
+  })
+
+  it("keeps parts no speaker owns, first, and drops none", () => {
+    expect(shape([text("preamble"), writer, text("headline"), text("stray", "ap_nobody")])).toEqual([
+      [null, ["preamble", "stray"]],
+      ["ap_writer", ["headline"]],
+    ])
+    expect(shape([text("one agent"), text("one answer")])).toEqual([[null, ["one agent", "one answer"]]])
+    expect(shape([])).toEqual([[null, []]])
+  })
+})
+
+describe("SpeakerHeader", () => {
+  it("names the responder in its own element, with its handle, answering while the turn runs", () => {
+    const { container } = render(<SpeakerHeader speaker={{ id: "ap_writer", name: "Writer", handle: "writer" }} live />)
+    expect(screen.getByText(/^Writer$/)).toBeInTheDocument()
+    expect(screen.getByText("@writer")).toBeInTheDocument()
+    expect(screen.getByText("Answering")).toBeInTheDocument()
+    expect(container.querySelector("[data-speaker-state]")?.getAttribute("data-speaker-state")).toBe("answering")
+  })
+
+  it("says nothing more once the responder has ended, even while others answer", () => {
+    const { container } = render(<SpeakerHeader speaker={{ id: "ap_writer", name: "Writer", state: "done" }} live />)
+    expect(screen.queryByText("Answering")).not.toBeInTheDocument()
+    expect(screen.queryByText("Failed")).not.toBeInTheDocument()
+    expect(container.querySelector("[data-speaker-state]")?.getAttribute("data-speaker-state")).toBe("done")
+  })
+
+  it("shows a failed responder as failed while the turn still runs", () => {
+    render(<SpeakerHeader speaker={{ id: "ap_research", name: "Research Lead", state: "failed" }} live />)
+    expect(screen.getByText("Failed")).toBeInTheDocument()
+    expect(screen.queryByText("Answering")).not.toBeInTheDocument()
+  })
+
+  it("treats a responder without an end state on a finished turn as done", () => {
+    const { container } = render(<SpeakerHeader speaker={{ id: "ap_writer", name: "Writer" }} />)
+    expect(container.querySelector("[data-speaker-state]")?.getAttribute("data-speaker-state")).toBe("done")
+  })
+
+  it("draws the author line every participant gets, so an agent keeps its tone", () => {
+    const avatar = (node: HTMLElement) => node.querySelector("[aria-hidden]")!.className
+    const header = render(<SpeakerHeader speaker={{ id: "ap_writer", name: "Writer" }} />).container
+    const author = render(<MessageAuthor author={{ id: "ap_writer", name: "Writer" }} />).container
+    expect(avatar(header)).toBe(avatar(author))
+  })
+})

package/src/chat/speaker.tsx

@@ -0,0 +1,110 @@
+import type { HTMLAttributes } from "react";
+import { StatusPill } from "../primitives/status-pill";
+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;
+}
+
+export interface SpeakerHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  speaker: Speaker;
+  /** The turn is still running, so a responder that has not reported an end is answering. */
+  live?: boolean;
+}
+
+/**
+ * The line above one responder's answer: the author line every participant
+ * gets, then the handle a person types to address the agent, then its state.
+ *
+ * The state comes from the speaker's own end state, else from `live`. An
+ * answering responder shows the status grammar's open ring with the word, a
+ * failed one its cross with the word, and a finished one nothing, as a settled
+ * run row does. `data-speaker-state` carries all three.
+ */
+export function SpeakerHeader({ speaker, live = false, ...props }: SpeakerHeaderProps) {
+  const state: SpeakerState = speaker.state ?? (live ? "answering" : "done");
+  return (
+    <MessageAuthor
+      author={{ id: speaker.id, name: speaker.name }}
+      data-speaker-state={state}
+      {...props}
+    >
+      {speaker.handle ? (
+        <span className="min-w-0 truncate text-muted-foreground text-sm" title={`@${speaker.handle}`}>
+          @{speaker.handle}
+        </span>
+      ) : null}
+      {state === "answering" ? (
+        <StatusPill tone="running" bare size="md" className="shrink-0 py-0">
+          Answering
+        </StatusPill>
+      ) : state === "failed" ? (
+        <StatusPill tone="danger" bare size="md" className="shrink-0 py-0">
+          Failed
+        </StatusPill>
+      ) : null}
+    </MessageAuthor>
+  );
+}

package/src/chat/user-message.tsx

@@ -31,7 +31,7 @@ function formatTime(date: Date): string {
 
 function MessageActions({ children, align = "end" }: { children: ReactNode; align?: "start" | "end" }) {
   return (
-    <div className={`flex flex-wrap items-center ${align === "end" ? "justify-end" : "justify-start"} gap-1.5 text-xs text-muted-foreground`}>
+    <div className={`flex flex-wrap items-center ${align === "end" ? "justify-end" : "justify-start"} gap-1.5 text-sm text-muted-foreground`}>
       {children}
     </div>
   );

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

@@ -80,7 +80,7 @@ export const InlineThinkingItem = memo(
             </div>
           </ExpandableContent>
         ) : (
-          <div className="px-3 py-2.5 text-xs text-muted-foreground">
+          <div className="px-3 py-2.5 text-sm text-muted-foreground">
             No reasoning text provided.
           </div>
         )}

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

@@ -57,7 +57,7 @@ describe("InlineToolItem", () => {
     expect(container.querySelector(".tangle-text-shimmer")).not.toBeNull();
   });
 
-  it("keeps the red dot and the collapsed error on failure", () => {
+  it("marks a failure on its glyph and keeps the collapsed error", () => {
     const { container } = render(
       <InlineToolItem
         part={part({ status: "error", error: "ENOENT: no such file", output: undefined })}

package/src/run/run-row-shell.test.tsx

@@ -40,7 +40,7 @@ describe("RunRowShell", () => {
     expect(container.querySelector("[data-run-row-status]")).toBeNull();
   });
 
-  it("renders the red dot and the collapsed error on error", () => {
+  it("marks a failure on the row's own glyph, with the collapsed error under it", () => {
     const { container } = renderShell("error", {
       collapsedError: "exit code 1",
     });