@tangle-network/ui 11.12.0 → 11.13.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @tangle-network/ui
 
+## 11.13.1
+
+### Patch Changes
+
+- 5cbda07: Load the full Highlight.js syntax renderer only when a code block mounts.
+  Keep code readable until highlighting arrives, and leave prose-only Markdown free of syntax-engine requests.
+
+## 11.13.0
+
+### Minor Changes
+
+- 11a29e6: Port Sandbox's Heading and PageShell into the generic UI package. Use one
+  Heading renderer for page and card titles; preserve existing PageHeader inputs
+  and map the existing Sandbox inputs. Normalize card padding, keep hover
+  decorative, support explicit card title levels, and make table-wrapper
+  accessibility configurable with a wrapper opt-out for caller-owned scrolling.
+
+### Patch Changes
+
+- 805a2d1: Repair Input and Textarea accessibility relationships with stable generated IDs, shared Label styling, merged descriptions, and invalid state. Keep hints available alongside errors. Preserve Button action names and form defaults while enforcing disabled/loading behavior for native and slotted controls, exposing busy state, and respecting reduced motion.
+- ac3344e: Use canonical Brand colors for the RichFileTree background, search field, rows, hover, border, and focus ring in light and dark themes.
+- 48b9dcf: Keep Brand dark-default while exporting a checked, generated light-default compatibility stylesheet. Re-resolve shared aliases and syntax colors at nested mode boundaries, retain named identities, and make ThemeToggle SSR-, storage- and system-change-safe. CodeBlock now uses scoped semantic CSS variables with immediate browser recoloring.
+- fe145f8: Preserve UI output modules so unused heavyweight exports can be removed through existing package entrypoints, retaining the legacy primitives CodeBlock export. Add packed-consumer import-boundary, compatibility, and controlled bundle-layout comparison checks.
+
 ## 11.12.0
 
 ### Minor Changes

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/dist/auth/auth.d.ts

@@ -0,0 +1,53 @@
+import { ButtonProps } from "../primitives/button.js";
+import * as React from "react";
+//#region src/auth/auth.d.ts
+export interface SessionUser {
+  customer_id: string;
+  email: string;
+  name?: string;
+  tier?: string;
+  github?: {
+    login: string;
+    connected: boolean;
+  } | null;
+  session_expires_at: string;
+}
+export interface GitHubLoginButtonProps extends Omit<ButtonProps, "onClick"> {
+  /** API base URL (defaults to /auth/github) */
+  authUrl?: string;
+  /** Product variant for styling */
+  variant?: "sandbox" | "default" | "outline";
+}
+export declare function GitHubLoginButton({ authUrl, variant, className, children, ...props }: GitHubLoginButtonProps): React.JSX.Element;
+export interface UserMenuProps {
+  user: SessionUser;
+  /** API base URL for logout */
+  logoutUrl?: string;
+  /** Links to show in menu */
+  links?: Array<{
+    href: string;
+    label: string;
+    icon?: React.ReactNode;
+  }>;
+  /** Product variant for styling */
+  variant?: "sandbox";
+  /** Callback when logout is clicked */
+  onLogout?: () => void;
+}
+export declare function UserMenu({ user, logoutUrl, links, variant, onLogout }: UserMenuProps): React.JSX.Element;
+export interface AuthHeaderProps {
+  /** Current session user (null if not logged in) */
+  user: SessionUser | null;
+  /** Whether session is loading */
+  loading?: boolean;
+  /** Product variant */
+  variant?: "sandbox";
+  /** API base URL */
+  apiBaseUrl?: string;
+  /** Links for user menu */
+  menuLinks?: UserMenuProps["links"];
+  /** Custom className */
+  className?: string;
+}
+export declare function AuthHeader({ user, loading, variant, apiBaseUrl, menuLinks, className }: AuthHeaderProps): React.JSX.Element;
+//#endregion

package/dist/{auth-DOETfnd9.js → auth/auth.js}

@@ -1,10 +1,10 @@
-import { i as focusRing } from "./focus-BcE_SHqz.js";
-import { t as cn } from "./utils-C_uf36nf.js";
-import { t as Button } from "./button-C87nEe2R.js";
-import { _ as AvatarFallback, a as DropdownMenuItem, g as Avatar, h as DropdownMenuTrigger, o as DropdownMenuLabel, r as DropdownMenuContent, t as DropdownMenu, u as DropdownMenuSeparator, v as AvatarImage } from "./dropdown-menu-BpcLa5vF.js";
-import "react";
+"use client";
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "../primitives/button.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../primitives/avatar.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../primitives/dropdown-menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Terminal } from "lucide-react";
 //#region src/auth/auth.tsx
 function GitHubIcon({ className }) {
 	return /* @__PURE__ */ jsx("svg", {
@@ -121,34 +121,4 @@ function AuthHeader({ user, loading = false, variant = "sandbox", apiBaseUrl = "
 	});
 }
 //#endregion
-//#region src/auth/login-layout.tsx
-function LoginLayout({ title = "Welcome Back", subtitle = "Sign in to your workspace.", brandIcon, children, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("relative flex min-h-screen items-center justify-center bg-background overflow-hidden antialiased font-sans flex-col", className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "z-10 w-full max-w-md px-6 animate-in flex flex-col items-center",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "mb-10 text-center flex flex-col items-center",
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "inline-flex h-14 w-14 mb-4 items-center justify-center rounded-lg bg-muted border border-border",
-						children: brandIcon || /* @__PURE__ */ jsx(Terminal, { className: "h-7 w-7 text-foreground" })
-					}),
-					/* @__PURE__ */ jsx("h1", {
-						className: "text-2xl font-bold tracking-tight text-foreground font-display",
-						children: title
-					}),
-					/* @__PURE__ */ jsx("p", {
-						className: "mt-2 text-sm text-muted-foreground",
-						children: subtitle
-					})
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "w-full bg-card p-8 border border-border rounded-lg",
-				children
-			})]
-		})
-	});
-}
-//#endregion
-export { UserMenu as i, AuthHeader as n, GitHubLoginButton as r, LoginLayout as t };
+export { AuthHeader, GitHubLoginButton, UserMenu };

package/dist/auth/login-layout.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+//#region src/auth/login-layout.d.ts
+export interface LoginLayoutProps {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  brandIcon?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  /** (Deprecated) terminal lines from legacy layout, kept for backwards compatibility */
+  terminalLines?: string[];
+  /** (Deprecated) tagline, kept for backwards compatibility */
+  tagline?: React.ReactNode;
+  /** (Deprecated) footerLinks, kept for backwards compatibility */
+  footerLinks?: {
+    label: string;
+    href: string;
+  }[];
+}
+export declare function LoginLayout({ title, subtitle, brandIcon, children, className }: LoginLayoutProps): React.JSX.Element;
+//#endregion

package/dist/auth/login-layout.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Terminal } from "lucide-react";
+//#region src/auth/login-layout.tsx
+function LoginLayout({ title = "Welcome Back", subtitle = "Sign in to your workspace.", brandIcon, children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative flex min-h-screen items-center justify-center bg-background overflow-hidden antialiased font-sans flex-col", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "z-10 w-full max-w-md px-6 animate-in flex flex-col items-center",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "mb-10 text-center flex flex-col items-center",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "inline-flex h-14 w-14 mb-4 items-center justify-center rounded-lg bg-muted border border-border",
+						children: brandIcon || /* @__PURE__ */ jsx(Terminal, { className: "h-7 w-7 text-foreground" })
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "text-2xl font-bold tracking-tight text-foreground font-display",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-2 text-sm text-muted-foreground",
+						children: subtitle
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "w-full bg-card p-8 border border-border rounded-lg",
+				children
+			})]
+		})
+	});
+}
+//#endregion
+export { LoginLayout };

package/dist/auth.d.ts

@@ -1,2 +1,3 @@
-import { a as GitHubLoginButton, c as UserMenu, i as AuthHeaderProps, l as UserMenuProps, n as LoginLayoutProps, o as GitHubLoginButtonProps, r as AuthHeader, s as SessionUser, t as LoginLayout } from "./index-Cg6gYAqh.js";
+import { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, SessionUser, UserMenu, UserMenuProps } from "./auth/auth.js";
+import { LoginLayout, LoginLayoutProps } from "./auth/login-layout.js";
 export { AuthHeader, type AuthHeaderProps, GitHubLoginButton, type GitHubLoginButtonProps, LoginLayout, type LoginLayoutProps, type SessionUser, UserMenu, type UserMenuProps };

package/dist/auth.js

@@ -1,2 +1,3 @@
-import { i as UserMenu, n as AuthHeader, r as GitHubLoginButton, t as LoginLayout } from "./auth-DOETfnd9.js";
+import { AuthHeader, GitHubLoginButton, UserMenu } from "./auth/auth.js";
+import { LoginLayout } from "./auth/login-layout.js";
 export { AuthHeader, GitHubLoginButton, LoginLayout, UserMenu };

package/dist/chat/agent-timeline.d.ts

@@ -0,0 +1,83 @@
+import { ToolPart } from "../types/parts.js";
+import { MessageRole } from "./chat-message.js";
+import { ToolCallData } from "../run/tool-call-feed.js";
+import { ReactNode } from "react";
+//#region src/chat/agent-timeline.d.ts
+export type AgentTimelineTone = "default" | "info" | "success" | "warning" | "error";
+export interface AgentTimelineMessageItem {
+  id: string;
+  kind: "message";
+  role: MessageRole;
+  content: string;
+  toolCalls?: ReactNode;
+  isStreaming?: boolean;
+  /** Shown beside a user bubble on hover. Assistant prose carries no
+   *  timestamp of its own — the turn's user message dates the exchange. */
+  timestamp?: Date;
+  after?: ReactNode;
+}
+export interface AgentTimelineToolItem {
+  id: string;
+  kind: "tool";
+  call: ToolCallData;
+  /** Source tool part, so a consumer's `renderToolActions` gets the real
+   *  input/output (the flat `call` is display-only). */
+  part?: ToolPart;
+}
+export interface AgentTimelineToolGroupItem {
+  id: string;
+  kind: "tool_group";
+  /** Accessible name of the group. Not drawn — the rows are the label. */
+  title?: string;
+  calls: ToolCallData[];
+  /** Source tool parts, parallel to `calls`. */
+  parts?: ToolPart[];
+}
+export interface AgentTimelineStatusItem {
+  id: string;
+  kind: "status";
+  label: string;
+  detail?: string;
+  tone?: AgentTimelineTone;
+}
+export interface AgentTimelineArtifactItem {
+  id: string;
+  kind: "artifact";
+  title: string;
+  description?: string;
+  meta?: ReactNode;
+  icon?: ReactNode;
+  tone?: AgentTimelineTone;
+  action?: ReactNode;
+  onClick?: () => void;
+}
+export interface AgentTimelineCustomItem {
+  id: string;
+  kind: "custom";
+  /** Laid out as a run row: it takes the same horizontal bleed as tool rows,
+   *  so a `RunRowShell`-based row (reasoning) aligns its glyph with the prose
+   *  edge. */
+  content: ReactNode;
+}
+export type AgentTimelineItem = AgentTimelineMessageItem | AgentTimelineToolItem | AgentTimelineToolGroupItem | AgentTimelineStatusItem | AgentTimelineArtifactItem | AgentTimelineCustomItem;
+export interface AgentTimelineProps {
+  items: AgentTimelineItem[];
+  isThinking?: boolean;
+  emptyState?: ReactNode;
+  className?: string;
+  /** Optional actions rendered beside each tool item (e.g. "open in artifacts").
+   *  Receives the source tool part carried on the item. */
+  renderToolActions?: (part: ToolPart) => ReactNode;
+  /** When set, collapse the timeline to the first N step rows (every item
+   *  except user messages) behind a "Show N more steps" toggle. Omit to always
+   *  show every row. */
+  collapseAfter?: number;
+}
+/**
+ * AgentTimeline — unified mixed-content transcript for agent-backed sandbox
+ * sessions. Renders messages, tool rows, status cards, and artifact handoffs
+ * as one plain column: prose at the reading size, tool calls as quiet
+ * one-liners between the paragraphs, no connector chrome.
+ */
+export declare function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter }: AgentTimelineProps): import("react").JSX.Element | null;
+//#endregion

package/dist/chat/agent-timeline.js

@@ -0,0 +1,236 @@
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { Markdown } from "../markdown/markdown.js";
+import { UserMessage } from "./user-message.js";
+import { ThinkingIndicator } from "./thinking-indicator.js";
+import { ToolCallGroup, ToolCallStep } from "../run/tool-call-step.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle2, CircleDot, FileText, Info } from "lucide-react";
+//#region src/chat/agent-timeline.tsx
+const TONE_STYLES = {
+	default: {
+		card: "border-border bg-card",
+		text: "text-foreground",
+		supportingText: "text-muted-foreground",
+		icon: CircleDot
+	},
+	info: {
+		card: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]",
+		text: "text-[var(--surface-info-text)]",
+		supportingText: "text-[var(--surface-info-text)]",
+		icon: Info
+	},
+	success: {
+		card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
+		text: "text-[var(--surface-success-text)]",
+		supportingText: "text-[var(--surface-success-text)]",
+		icon: CheckCircle2
+	},
+	warning: {
+		card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
+		text: "text-[var(--surface-warning-text)]",
+		supportingText: "text-[var(--surface-warning-text)]",
+		icon: AlertTriangle
+	},
+	error: {
+		card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
+		text: "text-[var(--surface-danger-text)]",
+		supportingText: "text-[var(--surface-danger-text)]",
+		icon: AlertTriangle
+	}
+};
+function stepKind(item) {
+	if (item.kind === "message") return item.role === "user" ? "user" : "prose";
+	if (item.kind === "status" || item.kind === "artifact") return "card";
+	return "tool";
+}
+function spacingBefore(prev, next) {
+	if (prev === void 0) return "";
+	if (prev === "user" || next === "user") return "mt-4";
+	if (prev === "card" || next === "card") return "mt-2";
+	if (prev === "tool" || next === "tool") return "mt-1";
+	return "mt-3";
+}
+const ROW_BLEED = "-mx-3";
+function AssistantMessage({ item }) {
+	return /* @__PURE__ */ jsxs("div", { children: [
+		item.content && /* @__PURE__ */ jsx(Markdown, {
+			className: "tangle-prose text-[var(--font-size-base)] leading-[1.5]",
+			children: item.content
+		}),
+		item.isStreaming && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			"data-streaming-caret": "",
+			className: "ml-0.5 inline-block h-[1em] w-0.5 animate-pulse rounded-full bg-muted-foreground align-text-bottom"
+		}),
+		item.toolCalls && /* @__PURE__ */ jsx("div", {
+			className: "mt-1",
+			children: item.toolCalls
+		}),
+		item.after && /* @__PURE__ */ jsx("div", {
+			className: "mt-3 border-t border-border pt-3",
+			children: item.after
+		})
+	] });
+}
+function StatusCard({ item }) {
+	const tone = TONE_STYLES[item.tone ?? "default"];
+	const Icon = tone.icon;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-[var(--radius-lg)] border px-4 py-3", tone.card),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsx(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", tone.text) }), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("text-sm font-medium", tone.text),
+					children: item.label
+				}), item.detail && /* @__PURE__ */ jsx("div", {
+					className: cn("mt-0.5 text-sm", tone.supportingText),
+					children: item.detail
+				})]
+			})]
+		})
+	});
+}
+function ArtifactCard({ item }) {
+	const tone = TONE_STYLES[item.tone ?? "default"];
+	const content = /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-[var(--radius-lg)] border px-4 py-3", tone.card),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-0.5 flex h-[var(--avatar-size)] w-[var(--avatar-size)] shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-muted/50 text-foreground",
+					children: item.icon ?? /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: cn("text-sm font-medium", tone.text),
+							children: item.title
+						}),
+						item.description && /* @__PURE__ */ jsx("div", {
+							className: cn("mt-1 text-sm", tone.supportingText),
+							children: item.description
+						}),
+						item.meta && /* @__PURE__ */ jsx("div", {
+							className: cn("mt-2 flex flex-wrap items-center gap-2 text-xs", tone.supportingText),
+							children: item.meta
+						})
+					]
+				}),
+				item.action && /* @__PURE__ */ jsx("div", {
+					className: "shrink-0",
+					children: item.action
+				})
+			]
+		})
+	});
+	if (!item.onClick) return content;
+	return /* @__PURE__ */ jsx("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: item.onClick,
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				item.onClick?.();
+			}
+		},
+		className: cn("block w-full rounded-[var(--radius-lg)] text-left transition-transform hover:-translate-y-0.5", focusRing),
+		children: content
+	});
+}
+/**
+* AgentTimeline — unified mixed-content transcript for agent-backed sandbox
+* sessions. Renders messages, tool rows, status cards, and artifact handoffs
+* as one plain column: prose at the reading size, tool calls as quiet
+* one-liners between the paragraphs, no connector chrome.
+*/
+function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter }) {
+	const [expanded, setExpanded] = useState(false);
+	if (items.length === 0 && !isThinking) return emptyState ? /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-full items-center justify-center p-4", className),
+		children: emptyState
+	}) : null;
+	const renderedItems = isThinking ? [...items, {
+		id: "__thinking__",
+		kind: "custom",
+		content: /* @__PURE__ */ jsx(ThinkingIndicator, {})
+	}] : items;
+	const isUserMessage = (item) => item.kind === "message" && item.role === "user";
+	const stepItems = renderedItems.filter((item) => !isUserMessage(item));
+	const limit = collapseAfter ?? Infinity;
+	const collapsible = stepItems.length > limit;
+	const collapsed = collapsible && !expanded;
+	let renderList = renderedItems;
+	let hiddenCount = 0;
+	if (collapsed) {
+		const visible = [];
+		let stepCount = 0;
+		for (const item of renderedItems) {
+			if (stepCount >= limit) break;
+			visible.push(item);
+			if (!isUserMessage(item)) stepCount += 1;
+		}
+		renderList = visible;
+		hiddenCount = stepItems.length - limit;
+	}
+	const renderItem = (item) => {
+		if (item.kind === "message") return item.role === "user" ? /* @__PURE__ */ jsx(UserMessage, {
+			content: item.content,
+			timestamp: item.timestamp
+		}) : /* @__PURE__ */ jsx(AssistantMessage, { item });
+		if (item.kind === "tool") return /* @__PURE__ */ jsx(ToolCallStep, {
+			type: item.call.type,
+			label: item.call.label,
+			status: item.call.status,
+			detail: item.call.detail,
+			output: item.call.output,
+			duration: item.call.duration,
+			part: item.part,
+			actions: item.part ? renderToolActions?.(item.part) : void 0
+		});
+		if (item.kind === "tool_group") return /* @__PURE__ */ jsx(ToolCallGroup, {
+			title: item.title,
+			children: item.calls.map((call, callIndex) => {
+				const part = item.parts?.[callIndex];
+				return /* @__PURE__ */ jsx(ToolCallStep, {
+					type: call.type,
+					label: call.label,
+					status: call.status,
+					detail: call.detail,
+					output: call.output,
+					duration: call.duration,
+					part,
+					actions: part ? renderToolActions?.(part) : void 0
+				}, call.id);
+			})
+		});
+		if (item.kind === "status") return /* @__PURE__ */ jsx(StatusCard, { item });
+		if (item.kind === "artifact") return /* @__PURE__ */ jsx(ArtifactCard, { item });
+		return item.content;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className),
+		children: [renderList.map((item, index) => {
+			const kind = stepKind(item);
+			const prev = index > 0 ? stepKind(renderList[index - 1]) : void 0;
+			return /* @__PURE__ */ jsx("div", {
+				"data-timeline-step": kind,
+				className: cn(spacingBefore(prev, kind), kind === "tool" && ROW_BLEED),
+				children: renderItem(item)
+			}, item.id);
+		}), collapsible ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setExpanded((value) => !value),
+			className: "mt-2 self-start text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+			children: collapsed ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}` : "Show less"
+		}) : null]
+	});
+}
+//#endregion
+export { AgentTimeline };

package/dist/chat/chat-container.d.ts

@@ -0,0 +1,51 @@
+import { SessionMessage } from "../types/message.js";
+import { SessionPart, ToolPart } from "../types/parts.js";
+import { AgentBranding } from "../types/branding.js";
+import { CustomToolRenderer } from "../types/tool-display.js";
+import { Run } from "../types/run.js";
+import { OpenUIAction } from "../openui/openui-artifact-renderer.js";
+import { ReactNode } from "react";
+//#region src/chat/chat-container.d.ts
+/**
+ * Transcript-only container: message list + auto-scroll. Composers are
+ * composed BELOW this by the app (the canonical one is `AgentComposer` in
+ * `@tangle-network/sandbox-ui`) — this component never renders an input.
+ */
+export interface ChatContainerProps {
+  messages: SessionMessage[];
+  partMap: Record<string, SessionPart[]>;
+  isStreaming: boolean;
+  branding?: AgentBranding;
+  className?: string;
+  /** Custom renderer for tool details. Return ReactNode to override, null to use default. */
+  renderToolDetail?: CustomToolRenderer;
+  /** Presentation mode for the session view. */
+  presentation?: "runs" | "timeline";
+  /** Callback when an OpenUI action button is pressed within inline OpenUI blocks. */
+  onOpenUIAction?: (action: OpenUIAction) => void;
+  /** Enable rendering OpenUI schemas inline in the chat timeline. Defaults to true. */
+  enableOpenUI?: boolean;
+  /** Optional actions rendered beside each grouped assistant run. */
+  renderRunActions?: (run: Run) => ReactNode;
+  /** Optional actions rendered below each user message bubble. */
+  renderUserMessageActions?: (message: SessionMessage, parts: SessionPart[]) => ReactNode;
+  /** Optional actions rendered beside individual tool items in the run-grouped
+   *  (`runs`) presentation. */
+  renderToolActions?: (part: ToolPart, options: {
+    run: Run;
+    messageId: string;
+    partIndex: number;
+  }) => ReactNode;
+  /** Optional actions rendered beside individual tool items in the `timeline`
+   *  presentation, which has no run/message grouping (hence part-only). */
+  renderTimelineToolActions?: (part: ToolPart) => ReactNode;
+  /** In the `timeline` presentation, collapse to the first N spine rows behind
+   *  a "Show N more steps" toggle. Omit to always show every row. */
+  collapseTimelineAfter?: number;
+}
+/**
+ * Chat transcript container: message list + auto-scroll.
+ * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
+ */
+export declare const ChatContainer: import("react").MemoExoticComponent<({ messages, partMap, isStreaming, branding, className, renderToolDetail, presentation, onOpenUIAction, enableOpenUI, renderRunActions, renderUserMessageActions, renderToolActions, renderTimelineToolActions, collapseTimelineAfter }: ChatContainerProps) => import("react").JSX.Element>;
+//#endregion