@tangle-network/ui 11.51.2 → 11.51.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.51.3
+
+### Patch Changes
+
+- Share the native event-stream lifecycle and measured-content following between existing UI chat hooks and retained-run consumers; preserve buffered-stream retries, authenticated host transports and existing exports.
+
 ## 11.51.2
 
 ### Patch Changes

package/dist/hooks/use-auto-scroll.d.ts

@@ -1,8 +1,5 @@
 import { RefObject } from "react";
-/**
- * Scroll-to-bottom behaviour: sticks to the bottom while streaming,
- * pauses when user scrolls up, resumes when user scrolls back down.
- */
+/** Existing chat contract, backed by the shared measured-content following lifecycle. */
 export declare function useAutoScroll(containerRef: RefObject<HTMLElement | null>, deps?: unknown[]): {
   isAtBottom: boolean;
   scrollToBottom: () => void;

package/dist/hooks/use-auto-scroll.js

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

package/dist/hooks/use-event-stream.d.ts

@@ -0,0 +1,15 @@
+/** Authenticated hosts own reconnects and session lifecycle; native streams use this lifecycle. */
+export interface EventStreamSource {
+  addEventListener(type: string, listener: (event: MessageEvent<string>) => void): void;
+  close(): void;
+}
+export type EventStreamOpener = (url: string, onLiveChange?: (live: boolean) => void) => EventStreamSource;
+export interface EventStreamHandlers {
+  events: Readonly<Record<string, (event: MessageEvent<string>) => void>>;
+  opener?: EventStreamOpener;
+  after?: () => number;
+  onStart?: () => void;
+  onLiveChange?: (live: boolean) => void;
+}
+/** Producer-owned named events; host transports keep their authenticated reconnect lifecycle. */
+export declare function useEventStream(url: string | undefined, handlers: EventStreamHandlers): void;

package/dist/hooks/use-event-stream.js

@@ -0,0 +1,71 @@
+"use client";
+import { useEffect, useRef } from "react";
+// src/hooks/use-event-stream.ts
+/** The sole native EventSource lifecycle, shared by buffered and producer-owned streams. */
+function openNativeStream(url, handlers) {
+	let stopped = false, source, retry, attempt = 0;
+	handlers.onStart?.();
+	const open = () => {
+		handlers.onConnecting?.(attempt);
+		const target = new URL(typeof url === "function" ? url() : url, globalThis.location?.href), after = handlers.after?.();
+		if (after !== void 0 && after > 0) target.searchParams.set("after", String(after));
+		let connection;
+		const live = (value) => {
+			if (!stopped && (!connection || source === connection)) handlers.onLiveChange?.(value);
+		};
+		connection = handlers.opener ? handlers.opener(target.toString(), live) : new EventSource(target.toString());
+		source = connection;
+		for (const name of /* @__PURE__ */ new Set([...Object.keys(handlers.events), ...handlers.terminalEvent ? [handlers.terminalEvent] : []])) connection.addEventListener(name, (event) => {
+			if (stopped || source !== connection) return;
+			if (name === handlers.terminalEvent) {
+				stopped = true;
+				clearTimeout(retry);
+				connection.close();
+			}
+			handlers.events[name]?.(event);
+		});
+		if (!handlers.opener) {
+			const native = connection;
+			native.onopen = () => {
+				attempt = 0;
+				live(true);
+			};
+			native.onerror = () => {
+				connection.close();
+				if (stopped || source !== connection) return;
+				live(false);
+				const delay = handlers.retryDelay ? handlers.retryDelay(attempt++) : 1e3;
+				if (delay !== void 0) retry = setTimeout(open, delay);
+			};
+		}
+	};
+	open();
+	return { close: () => {
+		stopped = true;
+		clearTimeout(retry);
+		source?.close();
+	} };
+}
+/** Producer-owned named events; host transports keep their authenticated reconnect lifecycle. */
+function useEventStream(url, handlers) {
+	const latest = useRef(handlers);
+	latest.current = handlers;
+	const names = Object.keys(handlers.events).sort().join(",");
+	useEffect(() => {
+		if (!url || !handlers.opener && typeof EventSource === "undefined") return;
+		const connection = openNativeStream(url, {
+			opener: handlers.opener,
+			events: Object.fromEntries(Object.keys(handlers.events).map((name) => [name, (event) => latest.current.events[name]?.(event)])),
+			after: () => latest.current.after?.() ?? 0,
+			onStart: () => latest.current.onStart?.(),
+			onLiveChange: (live) => latest.current.onLiveChange?.(live),
+			terminalEvent: "end"
+		});
+		return () => connection.close();
+	}, [
+		url,
+		handlers.opener,
+		names
+	]);
+}
+export { openNativeStream, useEventStream };

package/dist/hooks/use-follow-tail.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from "react";
+/** Keeps the bottom through measured content growth, until the reader deliberately scrolls away. */
+export declare function useFollowTail(scroller: RefObject<HTMLElement | null>, { identity, content, follow, target, thresholdPx }: {
+  identity?: unknown;
+  content?: unknown;
+  follow?: boolean;
+  target?: unknown;
+  thresholdPx?: number;
+}): {
+  following: RefObject<boolean>;
+  unseen: boolean;
+  jump: (behavior?: ScrollBehavior) => void;
+  atBottom: boolean;
+};

package/dist/hooks/use-follow-tail.js

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

package/dist/hooks/use-sse-stream.js

@@ -1,4 +1,5 @@
 "use client";
+import { openNativeStream } from "./use-event-stream.js";
 import * as React from "react";
 // src/hooks/use-sse-stream.ts
 /**
@@ -151,43 +152,45 @@ function useSSEStream(options) {
 				}
 			});
 		} else {
-			const es = new EventSource(connectUrl.toString());
-			eventSourceRef.current = es;
-			es.onopen = () => {
-				setState("connected");
-				retryCountRef.current = 0;
-			};
-			es.onerror = () => {
-				const err = /* @__PURE__ */ new Error("EventSource connection error");
-				setError(err);
-				onError?.(err);
-				if (autoReconnect && enabled && retryCountRef.current < maxRetries) {
-					setState("reconnecting");
-					es.close();
-					const delay = reconnectDelay * 2 ** retryCountRef.current;
-					reconnectTimeoutRef.current = setTimeout(() => {
-						retryCountRef.current += 1;
-						connect();
-					}, Math.min(delay, 3e4));
-				} else setState("error");
-			};
-			const types = eventTypes || ["message"];
-			for (const type of types) es.addEventListener(type, (e) => {
+			const events = Object.fromEntries((eventTypes ?? ["message"]).map((type) => [type, (event) => {
+				let data;
 				try {
-					const data = JSON.parse(e.data);
-					handleEvent(type, data, e.lastEventId);
+					data = JSON.parse(event.data);
 				} catch {
-					handleEvent(type, e.data, e.lastEventId);
+					data = event.data;
 				}
-			});
-			if (!eventTypes) es.onmessage = (e) => {
-				try {
-					const data = JSON.parse(e.data);
-					handleEvent("message", data, e.lastEventId);
-				} catch {
-					handleEvent("message", e.data, e.lastEventId);
+				handleEvent(type, data, event.lastEventId);
+			}]));
+			eventSourceRef.current = openNativeStream(() => {
+				const target = new URL(url, window.location.origin);
+				if (lastEventIdRef.current) target.searchParams.set("lastEventId", lastEventIdRef.current);
+				return target.toString();
+			}, {
+				events,
+				onConnecting: (attempt) => {
+					retryCountRef.current = attempt;
+					setState("connecting");
+					setError(null);
+				},
+				onLiveChange: (live) => {
+					if (live) {
+						setState("connected");
+						retryCountRef.current = 0;
+						return;
+					}
+					const error = /* @__PURE__ */ new Error("EventSource connection error");
+					setError(error);
+					onError?.(error);
+				},
+				retryDelay: (attempt) => {
+					if (!autoReconnect || !enabled || attempt >= maxRetries) {
+						setState("error");
+						return;
+					}
+					setState("reconnecting");
+					return Math.min(reconnectDelay * 2 ** attempt, 3e4);
 				}
-			};
+			});
 		}
 	}, [
 		url,

package/dist/hooks.d.ts

@@ -8,4 +8,6 @@ import { AuthUser, UseAuthOptions, UseAuthResult, createAuthFetcher, useApiKey,
 import { AppendUserMessageOptions, ApplySdkEventOptions, BeginAssistantMessageOptions, CompleteAssistantMessageOptions, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, UseSdkSessionOptions, UseSdkSessionReturn, useSdkSession } from "./hooks/use-sdk-session.js";
 import { RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, useRealtimeSession } from "./hooks/use-realtime-session.js";
 import { AgentStreamEvent, AutomationStreamEvent, BotStreamEvent, ConnectionState, SSEEvent, TaskStreamEvent, TerminalStreamEvent, UseSSEStreamOptions, UseSSEStreamResult, useSSEStream } from "./hooks/use-sse-stream.js";
-export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream };
+import { EventStreamHandlers, EventStreamOpener, EventStreamSource, useEventStream } from "./hooks/use-event-stream.js";
+import { useFollowTail } from "./hooks/use-follow-tail.js";
+export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, type EventStreamHandlers, type EventStreamOpener, type EventStreamSource, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream };

package/dist/hooks.js

@@ -1,5 +1,6 @@
 import { useRunGroups } from "./hooks/use-run-groups.js";
 import { useRunCollapseState } from "./hooks/use-run-collapse-state.js";
+import { useFollowTail } from "./hooks/use-follow-tail.js";
 import { useAutoScroll } from "./hooks/use-auto-scroll.js";
 import { useDropdownMenu } from "./hooks/use-dropdown-menu.js";
 import { useLiveTime } from "./hooks/use-live-time.js";
@@ -7,5 +8,6 @@ import { useToolCallStream } from "./hooks/use-tool-call-stream.js";
 import { createAuthFetcher, useApiKey, useAuth } from "./hooks/use-auth.js";
 import { RealtimeSessionRegistry, useRealtimeSession } from "./hooks/use-realtime-session.js";
 import { useSdkSession } from "./hooks/use-sdk-session.js";
+import { useEventStream } from "./hooks/use-event-stream.js";
 import { useSSEStream } from "./hooks/use-sse-stream.js";
-export { RealtimeSessionRegistry, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream };
+export { RealtimeSessionRegistry, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream };

package/dist/index.d.ts

@@ -49,6 +49,8 @@ import { AppendUserMessageOptions, ApplySdkEventOptions, BeginAssistantMessageOp
 import { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, RegisterActiveSessionOptions, SessionProjectKey, activeSessionsAtom, bumpActiveSessionActivity, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, registerActiveSession, resetActiveSessions, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from "./stores/active-sessions-store.js";
 import { RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, useRealtimeSession } from "./hooks/use-realtime-session.js";
 import { AgentStreamEvent, AutomationStreamEvent, BotStreamEvent, ConnectionState, SSEEvent, TaskStreamEvent, TerminalStreamEvent, UseSSEStreamOptions, UseSSEStreamResult, useSSEStream } from "./hooks/use-sse-stream.js";
+import { EventStreamHandlers, EventStreamOpener, EventStreamSource, useEventStream } from "./hooks/use-event-stream.js";
+import { useFollowTail } from "./hooks/use-follow-tail.js";
 import "./hooks.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardTitleProps } from "./primitives/card.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
@@ -145,4 +147,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 AgentTimelineFoldItem, 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, type RunStatus, RunStatusIcon, type RunStatusIconProps, 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, SettingsNote, type SettingsNoteProps, 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, type StatusMeta, 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, foldSummary, 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, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, 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 AgentTimelineFoldItem, 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, type EventStreamHandlers, type EventStreamOpener, type EventStreamSource, 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, type RunStatus, RunStatusIcon, type RunStatusIconProps, 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, SettingsNote, type SettingsNoteProps, 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, type StatusMeta, 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, foldSummary, 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, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/index.js

@@ -69,6 +69,7 @@ import { Logo, TangleKnot } from "./primitives.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
 import { useRunGroups } from "./hooks/use-run-groups.js";
 import { useRunCollapseState } from "./hooks/use-run-collapse-state.js";
+import { useFollowTail } from "./hooks/use-follow-tail.js";
 import { useAutoScroll } from "./hooks/use-auto-scroll.js";
 import { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { CommandPreview } from "./tool-previews/command-preview.js";
@@ -124,9 +125,10 @@ import { createAuthFetcher, useApiKey, useAuth } from "./hooks/use-auth.js";
 import { activeSessionsAtom, bumpActiveSessionActivity, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, registerActiveSession, resetActiveSessions, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from "./stores/active-sessions-store.js";
 import { RealtimeSessionRegistry, useRealtimeSession } from "./hooks/use-realtime-session.js";
 import { useSdkSession } from "./hooks/use-sdk-session.js";
+import { useEventStream } from "./hooks/use-event-stream.js";
 import { useSSEStream } from "./hooks/use-sse-stream.js";
 import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMapAtom, updatePart } from "./stores/chat-store.js";
 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, RunStatusIcon, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsNote, 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, foldSummary, 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, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, 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, RunStatusIcon, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsNote, 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, foldSummary, 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, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, 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.51.2",
+  "version": "11.51.3",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/hooks/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,189 +0,0 @@
-import { render, screen } from "@testing-library/react"
-import { beforeAll, describe, expect, it, vi } from "vitest"
-import type { SessionMessage } from "../types/message"
-import type { SessionPart, ToolPart } from "../types/parts"
-import { ChatContainer } from "./chat-container"
-
-// jsdom has no layout engine; the auto-scroll hook calls scrollIntoView.
-beforeAll(() => {
-  Element.prototype.scrollIntoView = vi.fn()
-})
-
-const messages: SessionMessage[] = [
-  { id: "m1", role: "assistant" },
-]
-
-const editPart: ToolPart = {
-  type: "tool",
-  id: "tool-1",
-  tool: "edit",
-  state: {
-    status: "completed",
-    input: { path: "src/batch-writer.ts" },
-    output: "Applied 1 edit to src/batch-writer.ts",
-  },
-}
-
-const partMap: Record<string, SessionPart[]> = { m1: [editPart] }
-
-describe("ChatContainer timeline tool rendering", () => {
-  it("shows thinking as soon as a submitted user message is streaming", () => {
-    render(
-      <ChatContainer
-        messages={[{ id: "user-1", role: "user" }]}
-        partMap={{
-          "user-1": [{ type: "text", text: "hello" }],
-        }}
-        isStreaming
-        presentation="timeline"
-      />,
-    )
-
-    expect(
-      screen.getByRole("status", { name: "Agent is thinking" }),
-    ).toBeInTheDocument()
-  })
-
-  it("does not let an earlier assistant reply hide the next turn's thinking state", () => {
-    render(
-      <ChatContainer
-        messages={[
-          { id: "user-1", role: "user" },
-          { id: "assistant-1", role: "assistant" },
-          { id: "user-2", role: "user" },
-        ]}
-        partMap={{
-          "user-1": [{ type: "text", text: "first" }],
-          "assistant-1": [{ type: "text", text: "done" }],
-          "user-2": [{ type: "text", text: "second" }],
-        }}
-        isStreaming
-        presentation="timeline"
-      />,
-    )
-
-    expect(
-      screen.getByRole("status", { name: "Agent is thinking" }),
-    ).toBeInTheDocument()
-  })
-
-  it("replaces the generic thinking row when the current reply has text", () => {
-    render(
-      <ChatContainer
-        messages={[
-          { id: "user-1", role: "user" },
-          { id: "assistant-1", role: "assistant" },
-        ]}
-        partMap={{
-          "user-1": [{ type: "text", text: "hello" }],
-          "assistant-1": [{ type: "text", text: "working on it" }],
-        }}
-        isStreaming
-        presentation="timeline"
-      />,
-    )
-
-    expect(
-      screen.queryByRole("status", { name: "Agent is thinking" }),
-    ).not.toBeInTheDocument()
-    expect(screen.getByText("working on it")).toBeInTheDocument()
-  })
-
-  it("shows a clean tool detail (the file path), not the raw input JSON", () => {
-    render(
-      <ChatContainer
-        messages={messages}
-        partMap={partMap}
-        isStreaming={false}
-        presentation="timeline"
-      />,
-    )
-
-    expect(screen.getByText("src/batch-writer.ts")).toBeInTheDocument()
-    // The raw `{ "path": ... }` input JSON must not leak into the summary row.
-    expect(screen.queryByText(/"path"/)).not.toBeInTheDocument()
-  })
-
-  it("titles the tool row with the bare verb and prints the path once", () => {
-    const { container } = render(
-      <ChatContainer
-        messages={messages}
-        partMap={partMap}
-        isStreaming={false}
-        presentation="timeline"
-      />,
-    )
-
-    expect(screen.getByText("Edit")).toBeInTheDocument()
-    expect(screen.getAllByText("src/batch-writer.ts")).toHaveLength(1)
-    expect(container.textContent).not.toContain("Edit src/batch-writer.ts")
-  })
-
-  it("stacks consecutive tool calls with no visible group header", () => {
-    const readPart: ToolPart = {
-      type: "tool",
-      id: "tool-2",
-      tool: "read",
-      state: { status: "completed", input: { path: "src/lib/jitter.ts" }, output: "ok" },
-    }
-    render(
-      <ChatContainer
-        messages={messages}
-        partMap={{ m1: [editPart, readPart] }}
-        isStreaming={false}
-        presentation="timeline"
-      />,
-    )
-
-    expect(screen.queryByText(/tool activity/i)).not.toBeInTheDocument()
-    expect(screen.getByRole("group", { name: "Tool activity" })).toBeInTheDocument()
-    expect(screen.getByText("Edit")).toBeInTheDocument()
-    expect(screen.getByText("Read")).toBeInTheDocument()
-  })
-
-  it("shimmers a running tool's verb and shows no spinner", () => {
-    const running: ToolPart = {
-      type: "tool",
-      id: "tool-3",
-      tool: "bash",
-      state: { status: "running", input: { command: "pnpm build" }, time: { start: 1 } },
-    }
-    const { container } = render(
-      <ChatContainer
-        messages={[{ id: "user-1", role: "user" }, { id: "m1", role: "assistant" }]}
-        partMap={{ "user-1": [{ type: "text", text: "build" }], m1: [running] }}
-        isStreaming
-        presentation="timeline"
-      />,
-    )
-
-    const shimmer = container.querySelector(".tangle-text-shimmer")
-    expect(shimmer).not.toBeNull()
-    expect(shimmer!.textContent).toBe("Shell")
-    expect(container.querySelector(".animate-spin")).toBeNull()
-  })
-
-  it("threads renderTimelineToolActions to the timeline tool item with its source part", () => {
-    const renderTimelineToolActions = vi.fn((part: ToolPart) => (
-      <button type="button">Open {part.id}</button>
-    ))
-
-    render(
-      <ChatContainer
-        messages={messages}
-        partMap={partMap}
-        isStreaming={false}
-        presentation="timeline"
-        renderTimelineToolActions={renderTimelineToolActions}
-      />,
-    )
-
-    expect(renderTimelineToolActions).toHaveBeenCalled()
-    expect(renderTimelineToolActions.mock.calls[0][0]).toMatchObject({
-      id: "tool-1",
-    })
-    expect(
-      screen.getByRole("button", { name: /open tool-1/i }),
-    ).toBeInTheDocument()
-  })
-})