@tangle-network/ui 11.47.0 → 11.48.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.48.0
+
+### Minor Changes
+
+- 182708a: `@tangle-network/ui/chat` adds `partitionBySpeaker` and `SpeakerHeader` for a turn addressed to several agents. `partitionBySpeaker(parts)` splits one assistant turn's parts by responder: a stored row by position after each speaker part, a live stream by each part's `speaker` tag, and a repeated speaker part carries that responder's end state. `SpeakerHeader` is the author line with the agent's handle and its state: answering, done (silent) or failed. `MessageAuthor` now renders children after the name and role.
+
 ## 11.47.0
 
 ### Minor Changes

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

@@ -7,16 +7,17 @@ import { HTMLAttributes } from "react";
  * `viewerId`, every authored message belongs to someone else.
  */
 export declare function isViewerMessage(author: ChatAuthor | undefined, viewerId: string | undefined): boolean;
-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 declare function MessageAuthor({ author, className, ...props }: MessageAuthorProps): import("react").JSX.Element;
+export declare function MessageAuthor({ author, className, children, ...props }: MessageAuthorProps): import("react").JSX.Element;

package/dist/chat/message-author.js

@@ -15,14 +15,15 @@ function isViewerMessage(author, viewerId) {
 }
 /**
 * 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.
 */
-function MessageAuthor({ author, className, ...props }) {
+function MessageAuthor({ author, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-message-author": "",
 		className: cn("flex min-w-0 max-w-full items-center gap-2", className),
@@ -45,7 +46,8 @@ function MessageAuthor({ author, className, ...props }) {
 				emphasis: "outline",
 				className: "max-w-[50%]",
 				children: author.role
-			}) : null
+			}) : null,
+			children
 		]
 	});
 }

package/dist/chat/speaker.d.ts

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from "react";
+/** 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[];
+}
+/**
+ * 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 declare function partitionBySpeaker<T extends object>(parts: readonly T[]): SpeakerSection<T>[];
+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 declare function SpeakerHeader({ speaker, live, ...props }: SpeakerHeaderProps): import("react").JSX.Element;

package/dist/chat/speaker.js

@@ -0,0 +1,84 @@
+import { StatusPill } from "../primitives/status-pill.js";
+import { MessageAuthor } from "./message-author.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/chat/speaker.tsx
+function isSpeakerPart(part) {
+	const record = part;
+	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.
+*/
+function partitionBySpeaker(parts) {
+	const sections = /* @__PURE__ */ new Map();
+	const unowned = [];
+	let current;
+	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.speaker;
+		((typeof tag === "string" ? sections.get(tag) : current)?.parts ?? unowned).push(part);
+	}
+	const owned = [...sections.values()];
+	return unowned.length > 0 || owned.length === 0 ? [{
+		speaker: null,
+		parts: unowned
+	}, ...owned] : owned;
+}
+/**
+* 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.
+*/
+function SpeakerHeader({ speaker, live = false, ...props }) {
+	const state = speaker.state ?? (live ? "answering" : "done");
+	return /* @__PURE__ */ jsxs(MessageAuthor, {
+		author: {
+			id: speaker.id,
+			name: speaker.name
+		},
+		"data-speaker-state": state,
+		...props,
+		children: [speaker.handle ? /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0 truncate text-muted-foreground text-sm",
+			title: `@${speaker.handle}`,
+			children: ["@", speaker.handle]
+		}) : null, state === "answering" ? /* @__PURE__ */ jsx(StatusPill, {
+			tone: "running",
+			bare: true,
+			size: "md",
+			className: "shrink-0 py-0",
+			children: "Answering"
+		}) : state === "failed" ? /* @__PURE__ */ jsx(StatusPill, {
+			tone: "danger",
+			bare: true,
+			size: "md",
+			className: "shrink-0 py-0",
+			children: "Failed"
+		}) : null]
+	});
+}
+export { SpeakerHeader, partitionBySpeaker };

package/dist/chat.d.ts

@@ -4,7 +4,8 @@ import { MessageList, MessageListProps } from "./chat/message-list.js";
 import { UserMessage, UserMessageProps } from "./chat/user-message.js";
 import { ChatMessage, ChatMessageProps, MessageRole } from "./chat/chat-message.js";
 import { MessageAuthor, MessageAuthorProps, isViewerMessage } from "./chat/message-author.js";
+import { Speaker, SpeakerHeader, SpeakerHeaderProps, SpeakerPart, SpeakerSection, SpeakerState, partitionBySpeaker } from "./chat/speaker.js";
 import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indicator.js";
 import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineColumn, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineStep, AgentTimelineStepKind, AgentTimelineStepProps, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, agentTimelineStepKind } from "./chat/agent-timeline.js";
 import { TRANSCRIPT_TEXT } from "./chat/transcript-text.js";
-export { AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, type ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, TRANSCRIPT_TEXT, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, agentTimelineStepKind, isViewerMessage };
+export { AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, type ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, type Speaker, SpeakerHeader, type SpeakerHeaderProps, type SpeakerPart, type SpeakerSection, type SpeakerState, TRANSCRIPT_TEXT, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, agentTimelineStepKind, isViewerMessage, partitionBySpeaker };

package/dist/chat.js

@@ -6,4 +6,5 @@ import { ThinkingIndicator } from "./chat/thinking-indicator.js";
 import { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind } from "./chat/agent-timeline.js";
 import { ChatContainer } from "./chat/chat-container.js";
 import { ChatMessage } from "./chat/chat-message.js";
-export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, ChatContainer, ChatMessage, MessageAuthor, MessageList, TRANSCRIPT_TEXT, ThinkingIndicator, UserMessage, agentTimelineStepKind, isViewerMessage };
+import { SpeakerHeader, partitionBySpeaker } from "./chat/speaker.js";
+export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, ChatContainer, ChatMessage, MessageAuthor, MessageList, SpeakerHeader, TRANSCRIPT_TEXT, ThinkingIndicator, UserMessage, agentTimelineStepKind, isViewerMessage, partitionBySpeaker };

package/dist/index.d.ts

@@ -16,6 +16,7 @@ import { MessageList, MessageListProps } from "./chat/message-list.js";
 import { UserMessage, UserMessageProps } from "./chat/user-message.js";
 import { ChatMessage, ChatMessageProps, MessageRole } from "./chat/chat-message.js";
 import { MessageAuthor, MessageAuthorProps, isViewerMessage } from "./chat/message-author.js";
+import { Speaker, SpeakerHeader, SpeakerHeaderProps, SpeakerPart, SpeakerSection, SpeakerState, partitionBySpeaker } from "./chat/speaker.js";
 import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indicator.js";
 import { ToolCallStatus, ToolCallType } from "./run/tool-call-step.js";
 import { FeedSegment, ToolCallData, ToolCallFeed, ToolCallFeedProps, parseToolEvent } from "./run/tool-call-feed.js";
@@ -143,4 +144,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
 import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
 import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
 import "./redaction.js";
-export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, type Speaker, SpeakerHeader, type SpeakerHeaderProps, type SpeakerPart, type SpeakerSection, type SpeakerState, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/index.js

@@ -98,6 +98,7 @@ import { ThinkingIndicator } from "./chat/thinking-indicator.js";
 import { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind } from "./chat/agent-timeline.js";
 import { ChatContainer } from "./chat/chat-container.js";
 import { ChatMessage } from "./chat/chat-message.js";
+import { SpeakerHeader, partitionBySpeaker } from "./chat/speaker.js";
 import { LiveDuration } from "./run/run-item-primitives.js";
 import { ToolCallFeed, parseToolEvent } from "./run/tool-call-feed.js";
 import { TaskList, showsTaskPriority, taskProgress, taskStatus } from "./run/task-list.js";
@@ -127,4 +128,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { RedactedDocument } from "./redaction/redacted-document.js";
-export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ComplianceBadge, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ComplianceBadge, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, SpeakerHeader, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/package.json

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

package/src/chat/index.ts

@@ -3,6 +3,15 @@ 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 {

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