@agent-native/toolkit 0.23.1 → 0.198.2

package/src/app/agentkit/react/components.tsx

@@ -0,0 +1,4435 @@
+import {
+  IconActivity,
+  IconAlertCircle,
+  IconArrowDown,
+  IconArrowFork,
+  IconArrowUp,
+  IconBook2,
+  IconBrain,
+  IconChevronLeft,
+  IconChevronRight,
+  IconCircleCheck,
+  IconCode,
+  IconCopy,
+  IconDotsVertical,
+  IconFile,
+  IconFolder,
+  IconFileText,
+  IconCheckbox,
+  IconMail,
+  IconUser,
+  IconPresentation,
+  IconStack2,
+  IconMessageChatbot,
+  IconGitBranch,
+  IconId,
+  IconMessage,
+  IconPlugConnected,
+  IconPlayerPause,
+  IconPlayerPlay,
+  IconPencil,
+  IconRefresh,
+  IconSearch,
+  IconTerminal2,
+  IconChecklist,
+  IconThumbDown,
+  IconThumbUp,
+  IconTool,
+  IconX,
+} from "@tabler/icons-react";
+import {
+  createContext,
+  Component,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+  type ErrorInfo,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type DragEvent as ReactDragEvent,
+  type FormEvent,
+  type ReactNode,
+} from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import {
+  ActionButton,
+  AgentSuggestionBar,
+  IconButton,
+  MessageQueueDrawer,
+  PromptComposer,
+  Surface,
+  TextField,
+  agentSuggestionPrompt,
+  type PromptComposerFile,
+  type PromptComposerProps,
+  type TiptapComposerHandle,
+  splitMarkdownBlocks,
+  writeClipboardText,
+} from "../../../agentkit.js";
+import {
+  Dialog,
+  Menu,
+  Popover,
+  TextArea,
+} from "../../../design-system/index.js";
+import {
+  createAgentKitComposerSubmission,
+  snapshotComposerValue,
+  type AgentKitComposerSubmission,
+} from "./composer-submission.js";
+export type { AgentKitComposerSubmission } from "./composer-submission.js";
+
+import type { AgentThreadState } from "@agent-native/agentkit/client";
+import {
+  AgentKitCapabilityError,
+  hasActiveAgentRuns,
+  isCurrentAgentSuggestion,
+  selectAgentSuggestions,
+} from "@agent-native/agentkit/client";
+import {
+  inferAgentActivityKind,
+  type AgentActivity,
+  type AgentApprovalRequest,
+  type AgentConnectionRequest,
+  type AgentError,
+  type AgentEvent,
+  type AgentInteraction,
+  type AgentMessage,
+  type AgentMessagePart,
+  type AgentObjectReference,
+  type AgentParticipant,
+  type AgentRunOptions,
+  type AgentTask,
+  type AgentThread,
+  type AgentToolCall,
+  type AgentWidget,
+  type RunId,
+} from "@agent-native/agentkit/protocol";
+
+import {
+  useAgentCapability,
+  useAgentConnection,
+  useAgentKit,
+  useAgentKitControl,
+  useAgentKitMutation,
+  useAgentThread,
+  type AgentConnectionErrorRenderProps,
+  type AgentKitQueueRenderProps,
+  type AgentKitRenderProps,
+  type AgentKitRenderSurface,
+  type AgentKitSuggestionsRenderProps,
+  type AgentRunFailureRenderProps,
+} from "./context.js";
+import { AgentStreamingText } from "./streaming-text.js";
+
+export interface AgentKitErrorBoundaryProps {
+  children: ReactNode;
+  resetKey?: string | number;
+  fallback: ReactNode | ((error: Error) => ReactNode);
+  onError?: (error: Error, info: ErrorInfo) => void;
+}
+
+interface AgentKitErrorBoundaryState {
+  error?: Error;
+  resetKey?: string | number;
+}
+
+/** Isolates custom renderers so one extension cannot take down the chat. */
+export class AgentKitErrorBoundary extends Component<
+  AgentKitErrorBoundaryProps,
+  AgentKitErrorBoundaryState
+> {
+  public state: AgentKitErrorBoundaryState = {
+    resetKey: this.props.resetKey,
+  };
+
+  public static getDerivedStateFromError(
+    error: Error,
+  ): Partial<AgentKitErrorBoundaryState> {
+    return { error };
+  }
+
+  public static getDerivedStateFromProps(
+    props: AgentKitErrorBoundaryProps,
+    state: AgentKitErrorBoundaryState,
+  ): Partial<AgentKitErrorBoundaryState> | null {
+    return props.resetKey !== state.resetKey
+      ? { error: undefined, resetKey: props.resetKey }
+      : null;
+  }
+
+  public componentDidCatch(error: Error, info: ErrorInfo): void {
+    try {
+      this.props.onError?.(error, info);
+    } catch (observerError) {
+      if (typeof globalThis.reportError === "function") {
+        globalThis.reportError(observerError);
+      } else {
+        console.error("AgentKit render observer failed.", observerError);
+      }
+    }
+  }
+
+  public render(): ReactNode {
+    if (!this.state.error) return this.props.children;
+    return typeof this.props.fallback === "function"
+      ? this.props.fallback(this.state.error)
+      : this.props.fallback;
+  }
+}
+
+function AgentKitSurfaceBoundary({
+  surface,
+  resetKey,
+  children,
+}: {
+  surface: AgentKitRenderSurface;
+  resetKey?: string | number;
+  children: ReactNode;
+}) {
+  const { labels, onRenderError, threadId } = useAgentKit();
+  return (
+    <AgentKitErrorBoundary
+      resetKey={resetKey}
+      fallback={
+        <div
+          className="agentkit-error"
+          data-render-surface={surface}
+          role="alert"
+        >
+          <IconAlertCircle aria-hidden="true" className="agentkit-icon" />
+          <span>{labels.renderError}</span>
+        </div>
+      }
+      onError={(error, info) =>
+        onRenderError?.({
+          error,
+          surface,
+          threadId,
+          componentStack: info.componentStack ?? undefined,
+        })
+      }
+    >
+      {children}
+    </AgentKitErrorBoundary>
+  );
+}
+
+function AgentKitRegionSlot({
+  slot: Slot,
+  threadId,
+  children,
+}: {
+  slot?: ComponentType<{
+    children: ReactNode;
+    threadId: string;
+  }>;
+  threadId: string;
+  children: ReactNode;
+}) {
+  return Slot ? <Slot threadId={threadId}>{children}</Slot> : children;
+}
+
+const allowedAgentProtocols = new Set(["http:", "https:", "mailto:", "blob:"]);
+const allowedAgentImageProtocols = new Set(["http:", "https:", "blob:"]);
+
+/** Keeps an unfinished bold delimiter literal while a streamed message grows. */
+function escapeIncompleteStrongMarkdown(text: string): string {
+  const delimiterPositions = new Map<"**" | "__", number[]>();
+  let inFence = false;
+  let fenceMarker = "";
+  let inlineCodeTicks = 0;
+  let offset = 0;
+
+  for (const line of text.split("\n")) {
+    const trimmed = line.trimStart();
+    if (!inFence) {
+      const fenceMatch = /^(?:`{3,}|~{3,})/.exec(trimmed);
+      if (fenceMatch) {
+        inFence = true;
+        fenceMarker = fenceMatch[0]!.charAt(0).repeat(fenceMatch[0]!.length);
+      }
+    }
+
+    if (!inFence) {
+      for (let index = 0; index < line.length; index += 1) {
+        if (line[index] === "\\") {
+          index += 1;
+          continue;
+        }
+        if (line[index] === "`") {
+          let tickCount = 1;
+          while (line[index + tickCount] === "`") tickCount += 1;
+          inlineCodeTicks = inlineCodeTicks === 0 ? tickCount : 0;
+          index += tickCount - 1;
+          continue;
+        }
+        if (inlineCodeTicks !== 0) continue;
+        const delimiter = line.slice(index, index + 2);
+        if (delimiter !== "**" && delimiter !== "__") continue;
+        const positions = delimiterPositions.get(delimiter) ?? [];
+        positions.push(offset + index);
+        delimiterPositions.set(delimiter, positions);
+        index += 1;
+      }
+    } else {
+      const closeMatch = /^(?:`{3,}|~{3,})\s*$/.exec(trimmed);
+      if (
+        closeMatch &&
+        closeMatch[0]!.charAt(0) === fenceMarker.charAt(0) &&
+        closeMatch[0]!.trim().length >= fenceMarker.length
+      ) {
+        inFence = false;
+        fenceMarker = "";
+      }
+    }
+    offset += line.length + 1;
+  }
+
+  const unmatched = [...delimiterPositions.entries()].flatMap(
+    ([delimiter, positions]) =>
+      positions.length % 2 === 1
+        ? [{ delimiter, position: positions.at(-1)! }]
+        : [],
+  );
+  return unmatched
+    .sort((left, right) => right.position - left.position)
+    .reduce(
+      (value, { delimiter, position }) =>
+        `${value.slice(0, position)}\\${delimiter[0]}\\${delimiter[1]}${value.slice(position + 2)}`,
+      text,
+    );
+}
+
+/** Rejects executable and embedded-data URLs before they reach a default anchor. */
+export function safeAgentHref(href?: string): string | undefined {
+  if (!href) return undefined;
+  try {
+    const parsed = new URL(href, "https://agentkit.invalid");
+    return allowedAgentProtocols.has(parsed.protocol) ? href : undefined;
+  } catch (error) {
+    if (error instanceof TypeError) return undefined;
+    throw error;
+  }
+}
+
+const AgentMarkdownBlock = memo(function AgentMarkdownBlock({
+  text,
+}: {
+  text: string;
+}) {
+  const safeText = escapeIncompleteStrongMarkdown(text);
+  return (
+    <ReactMarkdown
+      skipHtml
+      remarkPlugins={[remarkGfm]}
+      components={{
+        a: ({ children, href }) => {
+          const safeHref = safeAgentHref(href);
+          return safeHref ? (
+            <a href={safeHref}>{children}</a>
+          ) : (
+            <span>{children}</span>
+          );
+        },
+      }}
+    >
+      {safeText}
+    </ReactMarkdown>
+  );
+});
+
+function AgentMarkdown({ text }: { text: string }) {
+  const { completedBlocks, tail } = useMemo(
+    () => splitMarkdownBlocks(text),
+    [text],
+  );
+  const blocks = useMemo(
+    () => (tail ? [...completedBlocks, tail] : completedBlocks),
+    [completedBlocks, tail],
+  );
+
+  return (
+    <div className="agentkit-markdown" data-format="markdown">
+      {blocks.map((block, index) => (
+        <AgentMarkdownBlock key={index} text={block} />
+      ))}
+    </div>
+  );
+}
+
+/** Keeps participant avatars on image-capable, non-executable URL schemes. */
+export function safeAgentImageSrc(src?: string): string | undefined {
+  if (!src) return undefined;
+  try {
+    const parsed = new URL(src, "https://agentkit.invalid");
+    return allowedAgentImageProtocols.has(parsed.protocol) ? src : undefined;
+  } catch (error) {
+    if (error instanceof TypeError) return undefined;
+    throw error;
+  }
+}
+
+function createInvocationId(widgetId: string, actionId: string): string {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return `${widgetId}:${actionId}:${crypto.randomUUID()}`;
+  }
+  return `${widgetId}:${actionId}:${Date.now().toString(36)}`;
+}
+
+function activityIcon(kind: string): ReactNode {
+  const props = { "aria-hidden": true, className: "agentkit-icon" } as const;
+  switch (kind) {
+    case "status":
+      return <IconActivity {...props} />;
+    case "reasoning":
+    case "model":
+      return <IconBrain {...props} />;
+    case "search":
+      return <IconSearch {...props} />;
+    case "read":
+      return <IconBook2 {...props} />;
+    case "write":
+    case "edit":
+      return <IconCode {...props} />;
+    case "command":
+      return <IconTerminal2 {...props} />;
+    case "check":
+      return <IconCircleCheck {...props} />;
+    case "mcp":
+    case "connection":
+      return <IconPlugConnected {...props} />;
+    case "navigation":
+      return <IconGitBranch {...props} />;
+    case "delegation":
+      return <IconArrowFork {...props} />;
+    case "approval":
+      return <IconChecklist {...props} />;
+    default:
+      return <IconTool {...props} />;
+  }
+}
+
+function interactionIcon(kind: string): ReactNode {
+  const props = { "aria-hidden": true, className: "agentkit-icon" } as const;
+  switch (kind) {
+    case "started":
+    case "resumed":
+      return <IconPlayerPlay {...props} />;
+    case "messaged":
+      return <IconMessage {...props} />;
+    case "delegated":
+      return <IconArrowFork {...props} />;
+    case "paused":
+      return <IconPlayerPause {...props} />;
+    case "completed":
+      return <IconCircleCheck {...props} />;
+    case "failed":
+      return <IconAlertCircle {...props} />;
+    case "closed":
+      return <IconX {...props} />;
+    default:
+      return <IconActivity {...props} />;
+  }
+}
+
+export function AgentObjectReferenceView({
+  value: object,
+}: AgentKitRenderProps<AgentObjectReference>) {
+  const { onOpenObject } = useAgentKit();
+  const content = (
+    <>
+      <span className="agentkit-object-label">{object.label}</span>
+      {typeof object.metadata?.added === "number" ? (
+        <span className="agentkit-diff-added">+{object.metadata.added}</span>
+      ) : null}
+      {typeof object.metadata?.removed === "number" ? (
+        <span className="agentkit-diff-removed">
+          −{object.metadata.removed}
+        </span>
+      ) : null}
+    </>
+  );
+  return onOpenObject ? (
+    <button
+      type="button"
+      className="agentkit-object"
+      onClick={() => onOpenObject(object)}
+    >
+      {content}
+    </button>
+  ) : (
+    <span className="agentkit-object">{content}</span>
+  );
+}
+
+export function AgentParticipantView({
+  value: agent,
+}: AgentKitRenderProps<AgentParticipant>) {
+  return (
+    <AgentIdentityChip
+      id={agent.id}
+      name={agent.name}
+      kind={agent.kind}
+      status={agent.status}
+    />
+  );
+}
+
+function AgentIdentityChip({
+  id,
+  name,
+  kind,
+  status,
+}: {
+  id: string;
+  name: string;
+  kind?: string;
+  status?: AgentParticipant["status"];
+}) {
+  return (
+    <span
+      className="agentkit-agent"
+      data-agent-id={id}
+      data-agent-kind={kind}
+      data-status={status}
+    >
+      <span className="agentkit-agent-name">{name}</span>
+    </span>
+  );
+}
+
+function defaultInteractionLabel(
+  interaction: AgentInteraction,
+  labels: ReturnType<typeof useAgentKit>["labels"],
+): string {
+  if (interaction.label) return interaction.label;
+  switch (interaction.kind) {
+    case "started":
+      return labels.agentStarted;
+    case "resumed":
+      return labels.agentResumed;
+    case "messaged":
+      return labels.agentMessaged;
+    case "delegated":
+      return labels.agentDelegated;
+    case "paused":
+      return labels.agentPaused;
+    case "completed":
+      return labels.agentCompleted;
+    case "failed":
+      return labels.agentFailed;
+    case "closed":
+      return labels.agentClosed;
+    default:
+      return interaction.kind;
+  }
+}
+
+export function AgentInteractionItem({
+  value: interaction,
+  threadId,
+}: AgentKitRenderProps<AgentInteraction>) {
+  const { slots, registry, labels } = useAgentKit();
+  const thread = useAgentThread(threadId);
+  const agent = thread.agents[interaction.agentId];
+  const target = interaction.targetAgentId
+    ? thread.agents[interaction.targetAgentId]
+    : undefined;
+  const AgentRenderer = agent
+    ? (registry.agents?.[agent.kind ?? ""] ??
+      slots.agent ??
+      AgentParticipantView)
+    : undefined;
+  const TargetRenderer = target
+    ? (registry.agents?.[target.kind ?? ""] ??
+      slots.agent ??
+      AgentParticipantView)
+    : undefined;
+  const ObjectRenderer = slots.object ?? AgentObjectReferenceView;
+  const object = interaction.object ?? interaction.source;
+  return (
+    <div
+      className="agentkit-agent-interaction"
+      data-kind={interaction.kind}
+      data-scope={interaction.scope}
+    >
+      {interactionIcon(interaction.kind)}
+      {agent && AgentRenderer ? (
+        <AgentRenderer value={agent} threadId={threadId} />
+      ) : (
+        <AgentIdentityChip
+          id={interaction.agentId}
+          name={interaction.agentId}
+        />
+      )}
+      <span className="agentkit-agent-interaction-label">
+        {defaultInteractionLabel(interaction, labels)}
+      </span>
+      {target && TargetRenderer ? (
+        <TargetRenderer value={target} threadId={threadId} />
+      ) : interaction.targetAgentId ? (
+        <AgentIdentityChip
+          id={interaction.targetAgentId}
+          name={interaction.targetAgentId}
+        />
+      ) : null}
+      {object ? (
+        <ObjectRenderer value={object} threadId={threadId} />
+      ) : interaction.detail ? (
+        <span className="agentkit-agent-interaction-detail">
+          {interaction.detail}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+export function AgentActivityItem({
+  value: activity,
+  threadId,
+}: AgentKitRenderProps<AgentActivity>) {
+  const { slots, registry, labels } = useAgentKit();
+  const thread = useAgentThread();
+  const [open, setOpen] = useState(false);
+  const expandable = Boolean(activity.summary?.length);
+  const agent = activity.agentId ? thread.agents[activity.agentId] : undefined;
+  const AgentRenderer = agent
+    ? (registry.agents?.[agent.kind ?? ""] ??
+      slots.agent ??
+      AgentParticipantView)
+    : undefined;
+  const ObjectRenderer = slots.object ?? AgentObjectReferenceView;
+  return (
+    <div
+      className="agentkit-activity-item"
+      data-activity-kind={activity.kind}
+      data-status={activity.status}
+    >
+      <div className="agentkit-activity-row">
+        <ActivitySourceIcon activity={activity} threadId={threadId} />
+        {agent && AgentRenderer ? (
+          <AgentRenderer value={agent} threadId={threadId} />
+        ) : activity.agentId ? (
+          <AgentIdentityChip id={activity.agentId} name={activity.agentId} />
+        ) : null}
+        <span className="agentkit-activity-label">{activity.label}</span>
+        {activity.object ? (
+          <ObjectRenderer value={activity.object} threadId={threadId} />
+        ) : null}
+        {!activity.object && activity.source ? (
+          <ObjectRenderer value={activity.source} threadId={threadId} />
+        ) : !activity.object && activity.detail ? (
+          <span className="agentkit-activity-detail">{activity.detail}</span>
+        ) : null}
+        {expandable ? (
+          <button
+            type="button"
+            className="agentkit-activity-disclosure"
+            aria-expanded={open}
+            aria-label={open ? labels.collapseActivity : labels.expandActivity}
+            onClick={() => setOpen((current) => !current)}
+          >
+            <IconChevronRight
+              aria-hidden="true"
+              className="agentkit-icon agentkit-disclosure-icon"
+              data-open={open ? "true" : "false"}
+            />
+          </button>
+        ) : null}
+      </div>
+      {open ? (
+        <div className="agentkit-activity-summary">
+          {activity.summary?.map((part, index) => (
+            <AgentMessagePartView
+              key={`${activity.id}-summary-${index}`}
+              value={part}
+              threadId={threadId}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function objectReferenceIdentity(
+  object: AgentObjectReference | undefined,
+): string {
+  return object
+    ? [object.kind, object.id, object.uri ?? ""].join("\u0000")
+    : "";
+}
+
+function ActivitySourceIcon({
+  activity,
+  threadId,
+  compact = false,
+}: {
+  activity: AgentActivity;
+  threadId: string;
+  compact?: boolean;
+}) {
+  const { registry } = useAgentKit();
+  const thread = useAgentThread(threadId);
+  const tool = thread.tools[activity.id];
+  const source = tool ? registry.toolSource?.(tool) : undefined;
+  return source ? source.icon : compact ? null : activityIcon(activity.kind);
+}
+
+function activityClusterIdentity(
+  activity: AgentActivity,
+  sourceId?: string,
+): string {
+  return [
+    sourceId ?? "",
+    activity.kind,
+    activity.label.trim(),
+    activity.status,
+    activity.agentId ?? "",
+    objectReferenceIdentity(activity.object),
+    objectReferenceIdentity(activity.source),
+  ].join("\u0001");
+}
+
+function RepeatedActivityCluster({
+  activities,
+  threadId,
+}: {
+  activities: AgentActivity[];
+  threadId: string;
+}) {
+  const { slots, registry } = useAgentKit();
+  const thread = useAgentThread();
+  const [open, setOpen] = useState(false);
+  const activity = activities[0];
+  if (!activity) return null;
+  const agent = activity.agentId ? thread.agents[activity.agentId] : undefined;
+  const AgentRenderer = agent
+    ? (registry.agents?.[agent.kind ?? ""] ??
+      slots.agent ??
+      AgentParticipantView)
+    : undefined;
+  const ObjectRenderer = slots.object ?? AgentObjectReferenceView;
+  return (
+    <details
+      className="agentkit-activity-cluster"
+      data-activity-kind={activity.kind}
+      open={open}
+    >
+      <summary
+        className="agentkit-activity-row"
+        onClick={(event) => {
+          event.preventDefault();
+          setOpen((current) => !current);
+        }}
+      >
+        <ActivitySourceIcon activity={activity} threadId={threadId} />
+        {agent && AgentRenderer ? (
+          <AgentRenderer value={agent} threadId={threadId} />
+        ) : activity.agentId ? (
+          <AgentIdentityChip id={activity.agentId} name={activity.agentId} />
+        ) : null}
+        <span className="agentkit-activity-label">{activity.label}</span>
+        {activity.object ? (
+          <ObjectRenderer value={activity.object} threadId={threadId} />
+        ) : null}
+        {!activity.object && activity.source ? (
+          <ObjectRenderer value={activity.source} threadId={threadId} />
+        ) : null}
+        <span className="agentkit-activity-cluster-count">
+          ×{activities.length}
+        </span>
+        <IconChevronRight
+          aria-hidden="true"
+          className="agentkit-icon agentkit-disclosure-icon"
+          data-open={open ? "true" : "false"}
+        />
+      </summary>
+      <div className="agentkit-activity-cluster-items">
+        {activities.map((item) => (
+          <AgentActivityItem key={item.id} value={item} threadId={threadId} />
+        ))}
+      </div>
+    </details>
+  );
+}
+
+function toolToActivity(tool: AgentToolCall): AgentActivity {
+  return {
+    id: tool.id,
+    kind: inferAgentActivityKind(tool.name),
+    label: tool.name,
+    status:
+      tool.status === "completed"
+        ? "completed"
+        : tool.status === "running"
+          ? "running"
+          : tool.status,
+    detail:
+      typeof tool.output === "string"
+        ? tool.output
+        : typeof tool.input === "string"
+          ? tool.input
+          : undefined,
+  };
+}
+
+interface AgentEventRange {
+  runId?: RunId;
+  afterSequence?: number;
+  throughSequence?: number;
+}
+
+function sequenceInRange(
+  sequence: number,
+  { afterSequence, throughSequence }: AgentEventRange,
+): boolean {
+  return (
+    (afterSequence === undefined || sequence > afterSequence) &&
+    (throughSequence === undefined || sequence <= throughSequence)
+  );
+}
+
+export function formatAgentKitDuration(
+  ms: number,
+  units: { hour?: string; minute?: string; second?: string } = {},
+): string {
+  const hour = units.hour ?? "h";
+  const minute = units.minute ?? "m";
+  const second = units.second ?? "s";
+  const totalSeconds = Math.max(0, Math.round(ms / 1_000));
+  if (totalSeconds < 60) return `${Math.max(1, totalSeconds)}${second}`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes < 60) {
+    return seconds === 0
+      ? `${minutes}${minute}`
+      : `${minutes}${minute} ${seconds}${second}`;
+  }
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  return remainingMinutes === 0
+    ? `${hours}${hour}`
+    : `${hours}${hour} ${remainingMinutes}${minute}`;
+}
+
+function reasoningMessageId(event: AgentEvent): string | undefined {
+  if (event.type === "reasoning.delta" && event.text.trim()) {
+    return event.messageId;
+  }
+  if (
+    (event.type === "message.created" || event.type === "message.completed") &&
+    event.message.role === "assistant" &&
+    event.message.parts.some(
+      (part) => part.type === "reasoning" && part.text.trim(),
+    )
+  ) {
+    return event.message.id;
+  }
+  return undefined;
+}
+
+function workEventIdentity(event: AgentEvent): string | undefined {
+  const messageId = reasoningMessageId(event);
+  if (messageId) return `reasoning:${messageId}`;
+  if (
+    event.type === "activity.started" ||
+    event.type === "activity.updated" ||
+    event.type === "activity.completed"
+  ) {
+    return `activity:${event.activity.id}`;
+  }
+  if (event.type === "tool.started" || event.type === "tool.updated") {
+    return `tool:${event.toolCall.id}`;
+  }
+  if (event.type === "tool.delta") return `tool:${event.toolCallId}`;
+  if (event.type === "agent.interaction") {
+    return `interaction:${event.interaction.id}`;
+  }
+  if (
+    event.type === "task.created" ||
+    event.type === "task.updated" ||
+    event.type === "task.completed"
+  ) {
+    return `task:${event.task.id}`;
+  }
+  return undefined;
+}
+
+function firstWorkEvents(events: AgentEvent[]): AgentEvent[] {
+  const seen = new Set<string>();
+  return events.filter((event) => {
+    const identity = workEventIdentity(event);
+    if (!identity) return false;
+    const scopedIdentity = `${event.runId}:${identity}`;
+    if (seen.has(scopedIdentity)) return false;
+    seen.add(scopedIdentity);
+    return true;
+  });
+}
+
+function messageEventHasVisibleAssistantOutput(
+  event: AgentEvent,
+  assistantMessageIds: ReadonlySet<string>,
+): boolean {
+  if (event.type === "message.delta") {
+    return (
+      event.text.trim().length > 0 && assistantMessageIds.has(event.messageId)
+    );
+  }
+  if (event.type !== "message.created" && event.type !== "message.completed") {
+    return false;
+  }
+  return (
+    event.message.role === "assistant" &&
+    event.message.parts.some((part) => {
+      if (part.type === "reasoning") return false;
+      if (part.type === "text") return part.text.trim().length > 0;
+      return true;
+    })
+  );
+}
+
+export function AgentActivityGroup({
+  runId,
+  afterSequence,
+  throughSequence,
+  excludeAgentActivities = false,
+}: {
+  runId?: RunId;
+  afterSequence?: number;
+  throughSequence?: number;
+  excludeAgentActivities?: boolean;
+}) {
+  const { threadId, slots, registry, labels } = useAgentKit();
+  const thread = useAgentThread();
+  const runEvents = runId
+    ? thread.events.filter((event) => event.runId === runId)
+    : thread.events;
+  const activityMap = new Map<string, AgentActivity>();
+  const toolMap = new Map<string, AgentToolCall>();
+  const reasoningMap = new Map<string, AgentMessage>();
+  const messagesById = new Map(
+    thread.messages.map((message) => [message.id, message]),
+  );
+  const firstSequence = new Map<string, number>();
+  const latestSequence = new Map<string, number>();
+  const itemOrder: string[] = [];
+  const seenItems = new Set<string>();
+  const remember = (id: string, sequence: number) => {
+    if (seenItems.has(id)) return;
+    seenItems.add(id);
+    itemOrder.push(id);
+    firstSequence.set(id, sequence);
+  };
+  for (const event of runEvents) {
+    const messageId = reasoningMessageId(event);
+    const message = messageId ? messagesById.get(messageId) : undefined;
+    if (
+      message?.role === "assistant" &&
+      message.parts.some(
+        (part) =>
+          part.type === "reasoning" &&
+          part.visibility !== "hidden" &&
+          part.text.trim(),
+      )
+    ) {
+      const id = `reasoning:${message.id}`;
+      reasoningMap.set(id, message);
+      activityMap.set(id, {
+        id,
+        kind: "reasoning",
+        label: labels.reasoning,
+        status: message.status === "streaming" ? "running" : "completed",
+      });
+      remember(id, event.sequence);
+      latestSequence.set(id, event.sequence);
+    }
+    if (
+      event.type === "activity.started" ||
+      event.type === "activity.updated" ||
+      event.type === "activity.completed"
+    ) {
+      if (excludeAgentActivities && event.activity.agentId) continue;
+      activityMap.set(
+        event.activity.id,
+        thread.activities[event.activity.id] ?? event.activity,
+      );
+      remember(event.activity.id, event.sequence);
+      latestSequence.set(event.activity.id, event.sequence);
+    }
+    if (event.type === "tool.started" || event.type === "tool.updated") {
+      toolMap.set(
+        event.toolCall.id,
+        thread.tools[event.toolCall.id] ?? event.toolCall,
+      );
+      remember(event.toolCall.id, event.sequence);
+      latestSequence.set(event.toolCall.id, event.sequence);
+    }
+    if (event.type === "tool.delta") {
+      const tool = thread.tools[event.toolCallId];
+      if (tool) toolMap.set(tool.id, tool);
+      remember(event.toolCallId, event.sequence);
+      latestSequence.set(event.toolCallId, event.sequence);
+    }
+  }
+  const items = itemOrder.flatMap((id) => {
+    const sequence = firstSequence.get(id);
+    if (
+      sequence === undefined ||
+      !sequenceInRange(sequence, { afterSequence, throughSequence })
+    ) {
+      return [];
+    }
+    const activity = activityMap.get(id);
+    if (activity) return [activity];
+    const tool = toolMap.get(id);
+    return tool ? [toolToActivity(tool)] : [];
+  });
+  const durableToolResults = items.flatMap((activity) => {
+    const tool = toolMap.get(activity.id);
+    const Renderer = tool ? registry.tools?.[tool.name] : undefined;
+    if (!tool || tool.status === "running") return [];
+    if (Renderer) return [{ tool, Renderer }];
+    if (tool.metadata?.chatUI || tool.metadata?.mcpApp) {
+      return slots.tool ? [{ tool, Renderer: slots.tool }] : [];
+    }
+    return [];
+  });
+  const durableToolResultIds = new Set(
+    durableToolResults.map(({ tool }) => tool.id),
+  );
+  const activityItems = items.filter(
+    (activity) => !durableToolResultIds.has(activity.id),
+  );
+  const latestActivity = activityItems.reduce<AgentActivity | undefined>(
+    (current, activity) => {
+      if (activity.status !== "running") return current;
+      if (!current) return activity;
+      return (latestSequence.get(activity.id) ?? -1) >=
+        (latestSequence.get(current.id) ?? -1)
+        ? activity
+        : current;
+    },
+    undefined,
+  );
+  const running = items.some((item) => item.status === "running");
+  const run = runId ? thread.runs[runId] : undefined;
+  const segmentStartedEvent = firstWorkEvents(runEvents).find((event) =>
+    sequenceInRange(event.sequence, { afterSequence, throughSequence }),
+  );
+  const startedAt =
+    afterSequence === undefined && run?.startedAt
+      ? Date.parse(run.startedAt)
+      : segmentStartedEvent
+        ? Date.parse(segmentStartedEvent.occurredAt)
+        : Number.NaN;
+  const responseStartedEvent =
+    throughSequence === undefined
+      ? undefined
+      : runEvents.find((event) => event.sequence === throughSequence);
+  const completedAt = responseStartedEvent
+    ? Date.parse(responseStartedEvent.occurredAt)
+    : run?.completedAt
+      ? Date.parse(run.completedAt)
+      : Number.NaN;
+  const durationMs =
+    Number.isFinite(startedAt) && Number.isFinite(completedAt)
+      ? Math.max(0, completedAt - startedAt)
+      : undefined;
+  const activelyWorking =
+    throughSequence === undefined &&
+    (run === undefined ? running : run.status === "running");
+  const currentActivity = activelyWorking ? latestActivity : undefined;
+  const visiblyRunning =
+    throughSequence === undefined && activelyWorking && running;
+  const [elapsedAt, setElapsedAt] = useState<number>();
+  useEffect(() => {
+    if (!activelyWorking || !Number.isFinite(startedAt)) return;
+    const update = () => setElapsedAt(Date.now());
+    update();
+    const interval = globalThis.setInterval(update, 1_000);
+    return () => globalThis.clearInterval(interval);
+  }, [activelyWorking, startedAt]);
+  const activeDurationMs =
+    activelyWorking && elapsedAt !== undefined && Number.isFinite(startedAt)
+      ? Math.max(0, elapsedAt - startedAt)
+      : undefined;
+  const completedRunSummary =
+    throughSequence !== undefined ||
+    (items.length > 0 && !running) ||
+    runEvents.some(
+      (event) =>
+        event.runId === runId &&
+        (event.type === "run.completed" ||
+          event.type === "run.failed" ||
+          event.type === "run.cancelled"),
+    ) ||
+    (afterSequence === undefined &&
+      run !== undefined &&
+      ["completed", "failed", "cancelled"].includes(run.status));
+  if (items.length === 0) return null;
+  const displayGroups = new Map<ActivityBucket, AgentActivity[][]>(
+    ACTIVITY_BUCKET_ORDER.map((bucket) => [bucket, []]),
+  );
+  const clusterIdentity = (activity: AgentActivity) => {
+    const tool = toolMap.get(activity.id);
+    return activityClusterIdentity(
+      activity,
+      tool ? registry.toolSource?.(tool)?.id : undefined,
+    );
+  };
+  for (const activity of activityItems) {
+    const sourceTool = toolMap.get(activity.id);
+    const hasCustomToolRenderer = Boolean(
+      sourceTool && registry.tools?.[sourceTool.name],
+    );
+    const hasCustomActivityRenderer = Boolean(
+      registry.activities?.[activity.kind] ?? slots.activity,
+    );
+    const bucket = activityBucketForKind(activity.kind);
+    const bucketGroups = displayGroups.get(bucket)!;
+    const previous = bucketGroups.at(-1);
+    if (
+      !hasCustomToolRenderer &&
+      !hasCustomActivityRenderer &&
+      !reasoningMap.has(activity.id) &&
+      previous &&
+      !reasoningMap.has(previous[0]!.id) &&
+      clusterIdentity(previous[0] as AgentActivity) ===
+        clusterIdentity(activity)
+    ) {
+      previous.push(activity);
+    } else {
+      bucketGroups.push([activity]);
+    }
+  }
+  const hasExpandableActivity = ACTIVITY_BUCKET_ORDER.some(
+    (bucket) => displayGroups.get(bucket)!.length > 0,
+  );
+  const activityBucketLabels = {
+    thinking: "Thinking",
+    research: "Research",
+    actions: "Actions",
+    other: "Other",
+    ...labels.activityBuckets,
+  };
+  const formatDuration = (ms: number) =>
+    formatAgentKitDuration(ms, {
+      hour: labels.durationHourShort,
+      minute: labels.durationMinuteShort,
+      second: labels.durationSecondShort,
+    });
+  const summaryLabel = activelyWorking
+    ? activeDurationMs !== undefined && activeDurationMs >= 1_000
+      ? labels.workingFor.replace(
+          "{{duration}}",
+          formatDuration(activeDurationMs),
+        )
+      : labels.working
+    : completedRunSummary
+      ? durationMs !== undefined && durationMs >= 1_000
+        ? labels.workedFor.replace("{{duration}}", formatDuration(durationMs))
+        : labels.worked
+      : labels.activities;
+  return (
+    <>
+      {items
+        .filter((activity) => activity.status === "failed")
+        .map((activity) => (
+          <div key={activity.id} className="agentkit-run-failure" role="alert">
+            <IconAlertCircle aria-hidden="true" className="agentkit-icon" />
+            <div className="agentkit-run-failure-copy">
+              <strong>{activity.label}</strong>
+              <span>
+                {toolMap.get(activity.id)?.error?.message ??
+                  activity.detail ??
+                  labels.error}
+              </span>
+            </div>
+          </div>
+        ))}
+      {durableToolResults.length ? (
+        <div data-agentkit-tool-results="true">
+          {durableToolResults.map(({ tool, Renderer }) => (
+            <Renderer key={tool.id} value={tool} threadId={threadId} />
+          ))}
+        </div>
+      ) : null}
+      {hasExpandableActivity ? (
+        <AgentWorkDisclosure
+          label={summaryLabel}
+          running={visiblyRunning}
+          current={
+            currentActivity ? (
+              <span
+                className="agentkit-activities-current"
+                data-running="true"
+                data-agentkit-current-activity="true"
+                aria-live="polite"
+              >
+                <ActivitySourceIcon
+                  activity={currentActivity}
+                  threadId={threadId}
+                  compact
+                />
+                <span className="agentkit-activities-current-label">
+                  {currentActivity.label}
+                </span>
+              </span>
+            ) : null
+          }
+        >
+          <div className="agentkit-activities-list">
+            {ACTIVITY_BUCKET_ORDER.map((bucket) => {
+              const groups = displayGroups.get(bucket)!;
+              if (groups.length === 0) return null;
+              return (
+                <section
+                  key={bucket}
+                  className="agentkit-activity-bucket"
+                  data-activity-bucket={bucket}
+                  aria-label={activityBucketLabels[bucket]}
+                >
+                  <h3 className="agentkit-activity-bucket-title">
+                    {activityBucketLabels[bucket]}
+                  </h3>
+                  <div className="agentkit-activity-bucket-items">
+                    {groups.map((activities) => {
+                      const activity = activities[0] as AgentActivity;
+                      const reasoningMessage = reasoningMap.get(activity.id);
+                      if (reasoningMessage) {
+                        return (
+                          <AgentReasoningParts
+                            key={activity.id}
+                            message={reasoningMessage}
+                            threadId={threadId}
+                            active={
+                              activelyWorking &&
+                              currentActivity?.id === activity.id
+                            }
+                          />
+                        );
+                      }
+                      if (activities.length > 1) {
+                        return (
+                          <RepeatedActivityCluster
+                            key={`cluster:${activity.id}`}
+                            activities={activities}
+                            threadId={threadId}
+                          />
+                        );
+                      }
+                      const sourceTool = toolMap.get(activity.id);
+                      const ToolRenderer = sourceTool
+                        ? (registry.tools?.[sourceTool.name] ?? slots.tool)
+                        : undefined;
+                      if (sourceTool && ToolRenderer) {
+                        return (
+                          <ToolRenderer
+                            key={sourceTool.id}
+                            value={sourceTool}
+                            threadId={threadId}
+                          />
+                        );
+                      }
+                      const Renderer =
+                        registry.activities?.[activity.kind] ??
+                        slots.activity ??
+                        AgentActivityItem;
+                      return (
+                        <Renderer
+                          key={activity.id}
+                          value={activity}
+                          threadId={threadId}
+                        />
+                      );
+                    })}
+                  </div>
+                </section>
+              );
+            })}
+          </div>
+        </AgentWorkDisclosure>
+      ) : (
+        <div className="agentkit-activities-static">
+          <span className="agentkit-activities-label">{summaryLabel}</span>
+          {currentActivity ? (
+            <span
+              className="agentkit-activities-current"
+              data-running="true"
+              data-agentkit-current-activity="true"
+              aria-live="polite"
+            >
+              <ActivitySourceIcon
+                activity={currentActivity}
+                threadId={threadId}
+                compact
+              />
+              <span className="agentkit-activities-current-label">
+                {currentActivity.label}
+              </span>
+            </span>
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+}
+
+function AgentWorkDisclosure({
+  label,
+  running,
+  current,
+  children,
+}: {
+  label: string;
+  running?: boolean;
+  current?: ReactNode;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <details
+      className="agentkit-activities"
+      data-running={running ? "true" : undefined}
+      open={open}
+    >
+      <summary
+        className="agentkit-activities-summary"
+        onClick={(event) => {
+          event.preventDefault();
+          setOpen((value) => !value);
+        }}
+      >
+        <span className="agentkit-activities-heading">
+          <span className="agentkit-activities-label">{label}</span>
+          <IconChevronRight
+            aria-hidden="true"
+            className="agentkit-icon agentkit-summary-chevron"
+          />
+        </span>
+        {current}
+      </summary>
+      {children}
+    </details>
+  );
+}
+
+function AgentReasoningParts({
+  message,
+  threadId,
+  active,
+}: {
+  message: AgentMessage;
+  threadId: string;
+  active: boolean;
+}) {
+  return message.parts.map((part, index) =>
+    part.type === "reasoning" &&
+    part.visibility !== "hidden" &&
+    part.text.trim() ? (
+      <AgentMessagePartView
+        key={index}
+        value={part}
+        threadId={threadId}
+        active={active}
+        resetKey={`${threadId}:${message.id}:${index}`}
+      />
+    ) : null,
+  );
+}
+
+type ActivityBucket = "thinking" | "research" | "actions" | "other";
+
+const ACTIVITY_BUCKET_ORDER: ActivityBucket[] = [
+  "thinking",
+  "research",
+  "actions",
+  "other",
+];
+
+function activityBucketForKind(kind: string): ActivityBucket {
+  if (kind === "reasoning" || kind === "model" || kind === "status") {
+    return "thinking";
+  }
+  if (kind === "search" || kind === "read") return "research";
+  if (
+    kind === "write" ||
+    kind === "edit" ||
+    kind === "command" ||
+    kind === "check"
+  ) {
+    return "actions";
+  }
+  return "other";
+}
+
+export function AgentCollaborationFeed({
+  runId,
+  afterSequence,
+  throughSequence,
+}: AgentEventRange) {
+  const { threadId, slots, registry, labels } = useAgentKit();
+  const thread = useAgentThread();
+  const entries = new Map<
+    string,
+    | { type: "interaction"; value: AgentInteraction }
+    | { type: "activity"; value: AgentActivity }
+  >();
+  const firstSequence = new Map<string, number>();
+  const order: string[] = [];
+  const remember = (
+    key: string,
+    sequence: number,
+    entry:
+      | { type: "interaction"; value: AgentInteraction }
+      | { type: "activity"; value: AgentActivity },
+  ) => {
+    if (!entries.has(key)) {
+      order.push(key);
+      firstSequence.set(key, sequence);
+    }
+    entries.set(key, entry);
+  };
+  for (const event of thread.events) {
+    if (runId && event.runId !== runId) continue;
+    if (event.type === "agent.interaction") {
+      remember(`interaction:${event.interaction.id}`, event.sequence, {
+        type: "interaction",
+        value: event.interaction,
+      });
+    }
+    if (
+      (event.type === "activity.started" ||
+        event.type === "activity.updated" ||
+        event.type === "activity.completed") &&
+      event.activity.agentId
+    ) {
+      remember(`activity:${event.activity.id}`, event.sequence, {
+        type: "activity",
+        value: event.activity,
+      });
+    }
+  }
+  const selectedOrder = order.filter((key) => {
+    const sequence = firstSequence.get(key);
+    return (
+      sequence !== undefined &&
+      sequenceInRange(sequence, { afterSequence, throughSequence })
+    );
+  });
+  if (selectedOrder.length === 0) return null;
+  return (
+    <section
+      className="agentkit-agent-feed"
+      aria-label={labels.agents}
+      data-agent-collaboration-feed="true"
+    >
+      {selectedOrder.map((key) => {
+        const entry = entries.get(key);
+        if (!entry) return null;
+        if (entry.type === "interaction") {
+          const Renderer =
+            registry.agentInteractions?.[entry.value.kind] ??
+            slots.agentInteraction ??
+            AgentInteractionItem;
+          return <Renderer key={key} value={entry.value} threadId={threadId} />;
+        }
+        const Renderer =
+          registry.activities?.[entry.value.kind] ??
+          slots.activity ??
+          AgentActivityItem;
+        return <Renderer key={key} value={entry.value} threadId={threadId} />;
+      })}
+    </section>
+  );
+}
+
+export function AgentTaskItem({
+  value: task,
+  threadId,
+}: AgentKitRenderProps<AgentTask>) {
+  const { slots, registry } = useAgentKit();
+  const thread = useAgentThread();
+  const ObjectRenderer = slots.object ?? AgentObjectReferenceView;
+  const agent = task.assignedAgentId
+    ? thread.agents[task.assignedAgentId]
+    : undefined;
+  const AgentRenderer = agent
+    ? (registry.agents?.[agent.kind ?? ""] ??
+      slots.agent ??
+      AgentParticipantView)
+    : undefined;
+  const progress = task.progress
+    ? `${task.progress.completed}/${task.progress.total}`
+    : undefined;
+  return (
+    <div className="agentkit-task-row" data-status={task.status}>
+      <IconChecklist aria-hidden="true" className="agentkit-icon" />
+      {agent && AgentRenderer ? (
+        <AgentRenderer value={agent} threadId={threadId} />
+      ) : task.assignedAgentId ? (
+        <AgentIdentityChip
+          id={task.assignedAgentId}
+          name={task.assignedAgentId}
+        />
+      ) : null}
+      <span className="agentkit-task-title">{task.title}</span>
+      {task.object ? (
+        <ObjectRenderer value={task.object} threadId={threadId} />
+      ) : null}
+      {!task.object && task.source ? (
+        <ObjectRenderer value={task.source} threadId={threadId} />
+      ) : !task.object && task.detail ? (
+        <span className="agentkit-task-detail">{task.detail}</span>
+      ) : null}
+      {progress ? (
+        <span className="agentkit-task-progress">{progress}</span>
+      ) : null}
+    </div>
+  );
+}
+
+export function AgentTaskGroup({
+  runId,
+  afterSequence,
+  throughSequence,
+}: AgentEventRange) {
+  const { threadId, slots, registry, labels } = useAgentKit();
+  const thread = useAgentThread();
+  const ids: string[] = [];
+  const tasks = new Map<string, AgentTask>();
+  const firstSequence = new Map<string, number>();
+  for (const event of thread.events) {
+    if (runId && event.runId !== runId) continue;
+    if (
+      event.type !== "task.created" &&
+      event.type !== "task.updated" &&
+      event.type !== "task.completed"
+    ) {
+      continue;
+    }
+    if (!tasks.has(event.task.id)) {
+      ids.push(event.task.id);
+      firstSequence.set(event.task.id, event.sequence);
+    }
+    tasks.set(event.task.id, thread.tasks[event.task.id] ?? event.task);
+  }
+  const selectedIds = ids.filter((id) => {
+    const sequence = firstSequence.get(id);
+    return (
+      sequence !== undefined &&
+      sequenceInRange(sequence, { afterSequence, throughSequence })
+    );
+  });
+  if (selectedIds.length === 0) return null;
+  return (
+    <details className="agentkit-tasks">
+      <summary className="agentkit-tasks-summary">
+        <IconChecklist aria-hidden="true" className="agentkit-icon" />
+        <span>{labels.tasks}</span>
+        <span className="agentkit-tasks-count">{selectedIds.length}</span>
+        <IconChevronRight
+          aria-hidden="true"
+          className="agentkit-icon agentkit-summary-chevron"
+        />
+      </summary>
+      <div className="agentkit-tasks-list">
+        {selectedIds.map((id) => {
+          const task = tasks.get(id);
+          if (!task) return null;
+          const Renderer =
+            registry.tasks?.[task.kind ?? task.status] ??
+            slots.task ??
+            AgentTaskItem;
+          return <Renderer key={id} value={task} threadId={threadId} />;
+        })}
+      </div>
+    </details>
+  );
+}
+
+export function AgentApprovalPrompt({
+  request,
+  runId,
+}: {
+  request: AgentApprovalRequest;
+  runId: string;
+}) {
+  const { labels, requestComposerFocus, threadId } = useAgentKit();
+  const control = useAgentKitControl();
+  const [selected, setSelected] = useState<string[]>([]);
+  const [input, setInput] = useState("");
+  const [otherSelected, setOtherSelected] = useState(false);
+  const [other, setOther] = useState("");
+  const resolution = useAgentKitMutation(
+    (response: Parameters<typeof control.resolveApproval>[2]) =>
+      control.resolveApproval(runId, request.id, response),
+  );
+  const options = request.options ?? [];
+  const choice = request.kind === "choice" || options.length > 0;
+  const allowOther = choice && request.allowOther !== false;
+  const simpleApproval = !choice && options.length === 0 && !request.input;
+  const toggle = (id: string) => {
+    if (!request.allowMultiple) setOtherSelected(false);
+    setSelected((current) =>
+      request.allowMultiple
+        ? current.includes(id)
+          ? current.filter((item) => item !== id)
+          : [...current, id]
+        : [id],
+    );
+  };
+  const toggleOther = () => {
+    setOtherSelected((current) => !current);
+    if (!request.allowMultiple) setSelected([]);
+  };
+  const resolve = (response: Parameters<typeof control.resolveApproval>[2]) =>
+    void resolution
+      .execute(response)
+      .catch(() => undefined)
+      .finally(() => requestComposerFocus(threadId));
+  return (
+    <Surface
+      as="section"
+      className="agentkit-approval"
+      elevation="low"
+      padding="none"
+      aria-labelledby={`${request.id}-title`}
+    >
+      <div className="agentkit-approval-copy">
+        <h3 id={`${request.id}-title`}>{request.title}</h3>
+        {request.description ? <p>{request.description}</p> : null}
+      </div>
+      {options.length || allowOther ? (
+        <div className="agentkit-approval-options">
+          {options.map((option) => (
+            <button
+              key={option.id}
+              type="button"
+              aria-pressed={selected.includes(option.id)}
+              data-kind={option.kind}
+              disabled={resolution.pending}
+              onClick={() => toggle(option.id)}
+            >
+              <span>{option.label}</span>
+              {option.description ? <small>{option.description}</small> : null}
+            </button>
+          ))}
+          {allowOther ? (
+            <button
+              type="button"
+              aria-pressed={otherSelected}
+              data-kind="other"
+              disabled={resolution.pending}
+              onClick={toggleOther}
+            >
+              <span>{labels.approvalOther}</span>
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+      {allowOther && otherSelected ? (
+        <TextField
+          autoFocus
+          className="agentkit-approval-input"
+          label={labels.approvalOther}
+          disabled={resolution.pending}
+          placeholder={labels.approvalOtherPlaceholder}
+          value={other}
+          onChange={setOther}
+        />
+      ) : null}
+      {request.input ? (
+        <TextField
+          className="agentkit-approval-input"
+          label={request.input.label}
+          type={request.input.type === "url" ? "url" : "text"}
+          inputMode={request.input.type === "number" ? "decimal" : undefined}
+          required={request.input.required}
+          disabled={resolution.pending}
+          placeholder={request.input.placeholder}
+          value={input}
+          onChange={setInput}
+        />
+      ) : null}
+      <div className="agentkit-approval-footer">
+        {simpleApproval ? (
+          <>
+            <ActionButton
+              emphasis="outline"
+              size="compact"
+              disabled={resolution.pending}
+              onPress={() => resolve({ decision: "deny", optionIds: ["deny"] })}
+            >
+              {labels.approvalDeny}
+            </ActionButton>
+            <ActionButton
+              className="agentkit-primary-button"
+              intent="primary"
+              size="compact"
+              disabled={resolution.pending}
+              pending={resolution.pending}
+              onPress={() =>
+                resolve({ decision: "approve", optionIds: ["approve"] })
+              }
+            >
+              {labels.approvalApprove}
+            </ActionButton>
+          </>
+        ) : (
+          <ActionButton
+            className="agentkit-primary-button"
+            intent="primary"
+            size="compact"
+            disabled={
+              (selected.length === 0 && !otherSelected && !request.input) ||
+              (otherSelected && other.trim().length === 0) ||
+              (request.input?.required && input.trim().length === 0) ||
+              resolution.pending
+            }
+            pending={resolution.pending}
+            onPress={() =>
+              resolve({
+                decision: "approve",
+                optionIds: selected.length ? selected : undefined,
+                other: otherSelected ? other.trim() : undefined,
+                input: request.input
+                  ? { [request.input.id]: input }
+                  : undefined,
+              })
+            }
+          >
+            {labels.approvalSubmit}
+          </ActionButton>
+        )}
+      </div>
+      {resolution.error ? (
+        <p className="agentkit-command-error" role="alert">
+          {resolution.error.message}
+        </p>
+      ) : null}
+    </Surface>
+  );
+}
+
+export function AgentConnectionRequestCard({
+  request,
+  runId,
+}: {
+  request: AgentConnectionRequest;
+  runId: string;
+}) {
+  const { labels, onConnectionRequest, requestComposerFocus, threadId } =
+    useAgentKit();
+  const control = useAgentKitControl();
+  const resolution = useAgentKitMutation(
+    async (decision: "connect" | "decline") => {
+      const response =
+        decision === "decline"
+          ? { status: "declined" as const }
+          : await onConnectionRequest?.(request);
+      if (!response) {
+        throw new Error(labels.connectionFailed);
+      }
+      await control.resolveConnectionRequest(runId, request.id, response);
+      return response;
+    },
+  );
+  const resolve = (decision: "connect" | "decline") =>
+    void resolution
+      .execute(decision)
+      .catch(() => undefined)
+      .finally(() => requestComposerFocus(threadId));
+  const terminal =
+    request.status === "connected" ||
+    request.status === "declined" ||
+    request.status === "failed";
+  const title =
+    request.status === "connected"
+      ? labels.connectionConnected
+      : request.status === "failed"
+        ? labels.connectionFailed
+        : request.reason === "admin_required"
+          ? labels.connectionAdminRequired
+          : `${labels.connectionConnect} ${request.provider}`;
+  return (
+    <Surface
+      as="section"
+      className="agentkit-connection-request"
+      elevation="low"
+      padding="none"
+      data-status={request.status}
+      aria-labelledby={`${request.id}-title`}
+    >
+      <div className="agentkit-connection-request-copy">
+        <IconPlugConnected aria-hidden="true" className="agentkit-icon" />
+        <div>
+          <h3 id={`${request.id}-title`}>{title}</h3>
+          {request.detail ? <p>{request.detail}</p> : null}
+        </div>
+      </div>
+      {!terminal && request.reason !== "admin_required" ? (
+        <div className="agentkit-connection-request-actions">
+          <ActionButton
+            emphasis="outline"
+            size="compact"
+            disabled={resolution.pending}
+            onPress={() => resolve("decline")}
+          >
+            {labels.connectionNotNow}
+          </ActionButton>
+          <ActionButton
+            className="agentkit-primary-button"
+            intent="primary"
+            size="compact"
+            disabled={resolution.pending || !onConnectionRequest}
+            pending={resolution.pending}
+            onPress={() => resolve("connect")}
+          >
+            {resolution.pending
+              ? labels.connectionConnecting
+              : labels.connectionConnect}
+          </ActionButton>
+        </div>
+      ) : request.status === "failed" && onConnectionRequest ? (
+        <div className="agentkit-connection-request-actions">
+          <ActionButton
+            emphasis="outline"
+            size="compact"
+            disabled={resolution.pending}
+            pending={resolution.pending}
+            onPress={() => resolve("connect")}
+          >
+            {labels.connectionRetry}
+          </ActionButton>
+        </div>
+      ) : null}
+      {resolution.error ? (
+        <div className="agentkit-command-error" role="alert">
+          <IconAlertCircle aria-hidden="true" className="agentkit-icon" />
+          <span>{resolution.error.message}</span>
+        </div>
+      ) : null}
+    </Surface>
+  );
+}
+
+function AgentWidgetActionButton({
+  widget,
+  action,
+  threadId,
+}: {
+  widget: AgentWidget;
+  action: NonNullable<AgentWidget["actions"]>[number];
+  threadId: string;
+}) {
+  const control = useAgentKitControl(threadId);
+  const invocation = useAgentKitMutation(
+    () =>
+      control.invokeAction({
+        id: createInvocationId(widget.id, action.id),
+        action: action.action ?? "",
+        threadId,
+        widgetId: widget.id,
+        itemId: action.id,
+        payload: action.payload,
+      }),
+    threadId,
+  );
+  return (
+    <div className="agentkit-widget-action">
+      <ActionButton
+        className="agentkit-widget-action-button"
+        intent={
+          action.kind === "primary"
+            ? "primary"
+            : action.kind === "danger"
+              ? "danger"
+              : "neutral"
+        }
+        emphasis={action.kind === "primary" ? "solid" : "outline"}
+        size="compact"
+        disabled={action.disabled || !action.action || invocation.pending}
+        pending={invocation.pending}
+        onPress={() => void invocation.execute().catch(() => undefined)}
+      >
+        {action.label}
+      </ActionButton>
+      {invocation.error ? (
+        <span className="agentkit-command-error" role="alert">
+          {invocation.error.message}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+export function AgentWidgetView({
+  value: widget,
+  threadId,
+}: AgentKitRenderProps<AgentWidget>) {
+  if (
+    !widget.title &&
+    typeof widget.data !== "string" &&
+    !widget.actions?.length
+  ) {
+    return null;
+  }
+  const titleId = `${widget.id}-title`;
+  return (
+    <section
+      className="agentkit-widget-shell"
+      data-widget-kind={widget.kind}
+      aria-labelledby={widget.title ? titleId : undefined}
+    >
+      <Surface className="agentkit-widget" elevation="low" padding="none">
+        {widget.title ? <h3 id={titleId}>{widget.title}</h3> : null}
+        {typeof widget.data === "string" ? <p>{widget.data}</p> : null}
+        {widget.actions?.length ? (
+          <div className="agentkit-widget-actions">
+            {widget.actions.map((action) => (
+              <AgentWidgetActionButton
+                key={action.id}
+                widget={widget}
+                action={action}
+                threadId={threadId}
+              />
+            ))}
+          </div>
+        ) : null}
+      </Surface>
+    </section>
+  );
+}
+
+function AgentMentionIcon({ icon }: { icon: string }) {
+  const props = { size: 14, className: "agentkit-mention-icon" };
+  switch (icon) {
+    case "folder":
+      return <IconFolder {...props} />;
+    case "document":
+      return <IconFileText {...props} />;
+    case "form":
+      return <IconCheckbox {...props} />;
+    case "email":
+      return <IconMail {...props} />;
+    case "user":
+      return <IconUser {...props} />;
+    case "deck":
+      return <IconPresentation {...props} />;
+    case "agent":
+      return <IconMessageChatbot {...props} />;
+    case "file":
+      return <IconFile {...props} />;
+    default:
+      return <IconStack2 {...props} />;
+  }
+}
+
+function renderUserMessageText(text: string): ReactNode[] {
+  const richMatches = Array.from(text.matchAll(/@\[([^\]|]+)\|([^\]]+)\]/g));
+  if (richMatches.length) {
+    const parts: ReactNode[] = [];
+    let lastIndex = 0;
+    richMatches.forEach((match, index) => {
+      const start = match.index ?? 0;
+      if (start > lastIndex) parts.push(text.slice(lastIndex, start));
+      const label = match[1] ?? "";
+      parts.push(
+        <span
+          key={`rich-mention:${start}:${index}`}
+          className="agentkit-mention"
+          data-mention-label={label}
+        >
+          <AgentMentionIcon icon={match[2] ?? ""} />
+          <span className="agentkit-mention-label">{label}</span>
+        </span>,
+      );
+      lastIndex = start + match[0].length;
+    });
+    if (lastIndex < text.length) parts.push(text.slice(lastIndex));
+    return parts;
+  }
+
+  const plainMatches = Array.from(text.matchAll(/(^|\s)@(\w+)/g));
+  if (!plainMatches.length) return [text];
+  const parts: ReactNode[] = [];
+  let lastIndex = 0;
+  plainMatches.forEach((match, index) => {
+    const matchIndex = match.index ?? 0;
+    const start = matchIndex + (match[1]?.length ?? 0);
+    const end = matchIndex + match[0].length;
+    if (start > lastIndex) parts.push(text.slice(lastIndex, start));
+    const label = match[2] ?? "";
+    parts.push(
+      <span
+        key={`plain-mention:${start}:${index}`}
+        className="agentkit-mention agentkit-mention--plain"
+        data-mention-label={label}
+      >
+        @{label}
+      </span>,
+    );
+    lastIndex = end;
+  });
+  if (lastIndex < text.length) parts.push(text.slice(lastIndex));
+  return parts;
+}
+
+function AgentUserMessageText({ text }: { text: string }) {
+  const { labels } = useAgentKit();
+  const [expanded, setExpanded] = useState(false);
+  const [expandable, setExpandable] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const content = useMemo(() => renderUserMessageText(text), [text]);
+
+  useLayoutEffect(() => {
+    const element = contentRef.current;
+    if (!element) return;
+    const measure = () => setExpandable(element.scrollHeight > 200);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [content]);
+
+  return (
+    <div className="agentkit-user-message-text">
+      <div
+        className="agentkit-user-message-text-clip"
+        data-clamped={!expanded && expandable ? "true" : undefined}
+      >
+        <div ref={contentRef} className="agentkit-user-message-text-content">
+          {content}
+        </div>
+      </div>
+      {expandable ? (
+        <button
+          type="button"
+          className="agentkit-message-expand"
+          aria-expanded={expanded}
+          onClick={() => setExpanded((value) => !value)}
+        >
+          {expanded ? labels.collapseMessage : labels.expandMessage}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function AgentImageAttachmentPreview({
+  src,
+  alt,
+}: {
+  src: string;
+  alt: string;
+}) {
+  const { labels } = useAgentKit();
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={setOpen}
+      title={alt || labels.imagePreview}
+      closeLabel={labels.closePreview}
+      size="fullscreen"
+      trigger={
+        <button
+          type="button"
+          className="agentkit-image-attachment-trigger"
+          aria-label={labels.previewAttachment.replace("{{name}}", alt)}
+          title={alt}
+        >
+          <img src={src} alt={alt} />
+        </button>
+      }
+    >
+      <div className="agentkit-image-preview">
+        <img src={src} alt={alt} draggable={false} />
+      </div>
+    </Dialog>
+  );
+}
+
+export interface AgentMessagePartViewProps extends AgentKitRenderProps<AgentMessagePart> {
+  active?: boolean;
+  resetKey?: string;
+  userMessage?: boolean;
+}
+
+export function AgentMessagePartView({
+  value: part,
+  threadId,
+  active = false,
+  resetKey = `${threadId}:${part.type}`,
+  userMessage = false,
+}: AgentMessagePartViewProps) {
+  const { labels, slots, registry } = useAgentKit();
+  if (part.type === "reasoning" && part.visibility === "hidden") return null;
+  const RegisteredRenderer = registry.messageParts?.[part.type];
+  if (RegisteredRenderer) {
+    return (
+      <RegisteredRenderer
+        value={part}
+        threadId={threadId}
+        active={active}
+        resetKey={resetKey}
+      />
+    );
+  }
+  switch (part.type) {
+    case "text": {
+      const Renderer = userMessage ? undefined : slots.text;
+      return Renderer ? (
+        <Renderer
+          value={part}
+          threadId={threadId}
+          active={active}
+          resetKey={resetKey}
+        />
+      ) : userMessage ? (
+        <AgentUserMessageText text={part.text} />
+      ) : part.format === "markdown" ? (
+        <AgentStreamingText
+          text={part.text}
+          active={active}
+          resetKey={resetKey}
+        >
+          {(visibleText) => <AgentMarkdown text={visibleText} />}
+        </AgentStreamingText>
+      ) : (
+        <p data-format="plain">
+          <AgentStreamingText
+            text={part.text}
+            active={active}
+            resetKey={resetKey}
+          />
+        </p>
+      );
+    }
+    case "reasoning": {
+      const Renderer = slots.reasoning;
+      return Renderer ? (
+        <Renderer
+          value={part}
+          threadId={threadId}
+          active={active}
+          resetKey={resetKey}
+        />
+      ) : (
+        <details
+          className="agentkit-reasoning"
+          data-active={active ? "true" : undefined}
+        >
+          <summary className="agentkit-reasoning-summary">
+            {activityIcon("reasoning")}
+            <span className="agentkit-reasoning-label">
+              {part.label ?? labels.reasoning}
+            </span>
+            <IconChevronRight
+              aria-hidden="true"
+              className="agentkit-icon agentkit-reasoning-chevron"
+            />
+          </summary>
+          <div className="agentkit-reasoning-content">
+            <p>
+              <AgentStreamingText
+                text={part.text}
+                active={active}
+                resetKey={resetKey}
+              />
+            </p>
+          </div>
+        </details>
+      );
+    }
+    case "citation": {
+      const Renderer = slots.citation;
+      if (Renderer) return <Renderer value={part} threadId={threadId} />;
+      const href = safeAgentHref(part.url);
+      return href ? <a href={href}>{part.title}</a> : <span>{part.title}</span>;
+    }
+    case "annotation": {
+      const Renderer = slots.annotation;
+      if (Renderer) return <Renderer value={part} threadId={threadId} />;
+      const href = safeAgentHref(part.annotation.url);
+      return href ? (
+        <a href={href}>{part.annotation.label}</a>
+      ) : (
+        <span>{part.annotation.label}</span>
+      );
+    }
+    case "file": {
+      const Renderer = slots.file;
+      if (Renderer) return <Renderer value={part} threadId={threadId} />;
+      const href = safeAgentHref(part.url);
+      if (userMessage && part.mediaType?.startsWith("image/") && href) {
+        return <AgentImageAttachmentPreview src={href} alt={part.name} />;
+      }
+      if (userMessage && part.name.startsWith("pasted-text-")) {
+        return href ? (
+          <a
+            className="agentkit-file agentkit-file--pasted-text"
+            href={href}
+            download={part.name}
+            title={part.name}
+          >
+            <IconFileText aria-hidden="true" className="agentkit-icon" />
+            <span>{labels.pastedText}</span>
+          </a>
+        ) : (
+          <span className="agentkit-file agentkit-file--pasted-text">
+            <IconFileText aria-hidden="true" className="agentkit-icon" />
+            <span>{labels.pastedText}</span>
+          </span>
+        );
+      }
+      return href ? (
+        <a className="agentkit-file" href={href} download={part.name}>
+          <IconFile aria-hidden="true" className="agentkit-icon" />
+          <span>{part.name}</span>
+        </a>
+      ) : (
+        <span className="agentkit-file">
+          <IconFile aria-hidden="true" className="agentkit-icon" />
+          <span>{part.name}</span>
+        </span>
+      );
+    }
+    case "widget": {
+      const Renderer =
+        registry.widgets?.[part.widget.kind] ?? slots.widget ?? AgentWidgetView;
+      return <Renderer value={part.widget} threadId={threadId} />;
+    }
+    case "data": {
+      const Renderer = slots.data;
+      return Renderer ? <Renderer value={part} threadId={threadId} /> : null;
+    }
+    default:
+      return null;
+  }
+}
+
+/** Resolves the stable server request identity without exposing local UI ids. */
+export function resolveAgentMessageRequestId(
+  message: AgentMessage,
+  events: readonly AgentEvent[],
+): RunId | undefined {
+  const metadata = message.metadata as
+    | (Record<string, unknown> & {
+        custom?: Record<string, unknown>;
+      })
+    | undefined;
+  for (const source of [metadata?.custom, metadata]) {
+    for (const key of ["requestId", "runId"]) {
+      const value = source?.[key];
+      if (typeof value === "string" && value) return value as RunId;
+    }
+  }
+
+  for (let index = events.length - 1; index >= 0; index -= 1) {
+    const event = events[index];
+    const matches =
+      (event.type === "message.created" ||
+        event.type === "message.completed") &&
+      event.message.id === message.id;
+    if (
+      matches ||
+      ((event.type === "message.delta" || event.type === "reasoning.delta") &&
+        event.messageId === message.id)
+    ) {
+      return event.runId;
+    }
+  }
+  return undefined;
+}
+
+function resolveAgentMessageRunId(
+  message: AgentMessage,
+  events: readonly AgentEvent[],
+): RunId | undefined {
+  const metadata = message.metadata as
+    | (Record<string, unknown> & {
+        custom?: Record<string, unknown>;
+      })
+    | undefined;
+  for (const source of [metadata?.custom, metadata]) {
+    const value = source?.runId;
+    if (typeof value === "string" && value) return value as RunId;
+  }
+
+  for (let index = events.length - 1; index >= 0; index -= 1) {
+    const event = events[index];
+    if (
+      ((event.type === "message.created" ||
+        event.type === "message.completed") &&
+        event.message.id === message.id) ||
+      ((event.type === "message.delta" || event.type === "reasoning.delta") &&
+        event.messageId === message.id)
+    ) {
+      return event.runId;
+    }
+  }
+  return undefined;
+}
+
+interface AgentMessageEditContextValue {
+  enabled: boolean;
+  message: AgentMessage | null;
+  setMessage: (message: AgentMessage | null) => void;
+}
+
+const AgentMessageEditContext =
+  createContext<AgentMessageEditContextValue | null>(null);
+
+function messageText(message: AgentMessage): string {
+  return message.parts
+    .filter(
+      (part): part is Extract<AgentMessagePart, { type: "text" }> =>
+        part.type === "text",
+    )
+    .map((part) => part.text)
+    .join("\n");
+}
+
+function messageRunOptions(message: AgentMessage): AgentRunOptions {
+  const metadata = message.metadata ?? {};
+  const effort = metadata.reasoningEffort ?? metadata.effort;
+  const reasoningEffort = [
+    "none",
+    "minimal",
+    "low",
+    "medium",
+    "high",
+    "xhigh",
+  ].includes(String(effort))
+    ? (String(effort) as AgentRunOptions["reasoningEffort"])
+    : undefined;
+  return {
+    ...(typeof metadata.agentId === "string"
+      ? { agentId: metadata.agentId }
+      : {}),
+    ...(typeof metadata.model === "string" ? { model: metadata.model } : {}),
+    ...(typeof (metadata.requestMode ?? metadata.mode) === "string"
+      ? { mode: String(metadata.requestMode ?? metadata.mode) }
+      : {}),
+    ...(reasoningEffort ? { reasoningEffort } : {}),
+    metadata,
+  };
+}
+
+function findPreviousMessage(
+  messages: readonly AgentMessage[],
+  messageId: string,
+): AgentMessage | null | undefined {
+  const index = messages.findIndex((message) => message.id === messageId);
+  return index < 0 ? null : messages[index - 1];
+}
+
+function findPreviousUserMessage(
+  messages: readonly AgentMessage[],
+  messageId: string,
+): AgentMessage | undefined {
+  const index = messages.findIndex((message) => message.id === messageId);
+  if (index < 0) return undefined;
+  for (let previous = index - 1; previous >= 0; previous -= 1) {
+    const message = messages[previous];
+    if (message?.role === "user") return message;
+  }
+  return undefined;
+}
+
+async function forkAndResubmitMessage({
+  controller,
+  threadId,
+  messages,
+  sourceMessage,
+  text,
+  attachments,
+  options,
+  metadata,
+  onThreadForked,
+  messageUnavailable,
+}: {
+  controller: ReturnType<typeof useAgentKit>["controller"];
+  threadId: string;
+  messages: readonly AgentMessage[];
+  sourceMessage: AgentMessage;
+  text: string;
+  attachments?: Extract<AgentMessagePart, { type: "file" }>[];
+  options?: AgentRunOptions;
+  metadata?: Record<string, unknown>;
+  onThreadForked?: (thread: AgentThread) => void;
+  messageUnavailable: string;
+}): Promise<void> {
+  const previousMessage = findPreviousMessage(messages, sourceMessage.id);
+  if (previousMessage === null) {
+    throw new Error(messageUnavailable);
+  }
+  const forkedThread = await controller.forkThread(
+    threadId,
+    previousMessage?.id,
+  );
+  onThreadForked?.(forkedThread);
+  await controller.sendMessage({
+    threadId: forkedThread.id,
+    text,
+    attachments,
+    options,
+    metadata,
+  });
+}
+
+export function AgentMessageActions({
+  value: message,
+  threadId,
+}: AgentKitRenderProps<AgentMessage>) {
+  const {
+    controller,
+    labels,
+    slots,
+    onThreadForked,
+    onCopyMessage,
+    branchNavigation,
+  } = useAgentKit();
+  const thread = useAgentThread(threadId);
+  const feedbackCapability = useAgentCapability("feedback");
+  const forkingCapability = useAgentCapability("threadForking");
+  const control = useAgentKitControl(threadId);
+  const editContext = useContext(AgentMessageEditContext);
+  const text = messageText(message);
+  const previousUserMessage =
+    message.role === "assistant"
+      ? findPreviousUserMessage(thread.messages, message.id)
+      : undefined;
+  const isLastAssistantMessage =
+    message.role === "assistant" && thread.messages.at(-1)?.id === message.id;
+  const [copied, setCopied] = useState(false);
+  const [feedback, setFeedback] = useState<"positive" | "negative" | null>(
+    null,
+  );
+  const [feedbackReason, setFeedbackReason] = useState("");
+  const [feedbackReasonOpen, setFeedbackReasonOpen] = useState(false);
+  const [feedbackReasonSubmitted, setFeedbackReasonSubmitted] = useState(false);
+  const copiedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [requestIdCopied, setRequestIdCopied] = useState(false);
+  const [actionsMenuOpen, setActionsMenuOpen] = useState(false);
+  const requestIdCopiedTimer = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+  const requestId = useMemo(
+    () => resolveAgentMessageRequestId(message, thread.events),
+    [message, thread.events],
+  );
+  const runId = useMemo(
+    () => resolveAgentMessageRunId(message, thread.events),
+    [message, thread.events],
+  );
+  const messageSeq = thread.messages.findIndex(
+    (item) => item.id === message.id,
+  );
+  useEffect(
+    () => () => {
+      if (copiedTimer.current) clearTimeout(copiedTimer.current);
+      if (requestIdCopiedTimer.current)
+        clearTimeout(requestIdCopiedTimer.current);
+    },
+    [message.id],
+  );
+  const copyAction = useAgentKitMutation(async () => {
+    const handled = await onCopyMessage?.({ message, text });
+    if (!handled && !(await writeClipboardText(text))) {
+      throw new Error(labels.copyUnavailable);
+    }
+    setCopied(true);
+    if (copiedTimer.current) clearTimeout(copiedTimer.current);
+    copiedTimer.current = setTimeout(() => setCopied(false), 1_400);
+  }, `${threadId}:${message.id}:copy`);
+  const feedbackAction = useAgentKitMutation(
+    ({
+      value,
+      reason,
+    }: {
+      value: "positive" | "negative" | "dismissed";
+      reason?: string;
+    }) => {
+      const options = {
+        ...(runId ? { runId } : {}),
+        ...(messageSeq >= 0 ? { messageSeq } : {}),
+        ...(reason ? { reason } : {}),
+      };
+      return Object.keys(options).length
+        ? control.submitFeedback(message.id, value, options)
+        : control.submitFeedback(message.id, value);
+    },
+    `${threadId}:${message.id}:feedback`,
+  );
+  const branchNavigationAction = useAgentKitMutation(
+    async (direction: "previous" | "next") => {
+      if (direction === "previous") await branchNavigation?.onPrevious();
+      else await branchNavigation?.onNext();
+    },
+    `${threadId}:${message.id}:branch-navigation`,
+  );
+  const requestIdAction = useAgentKitMutation(
+    async () => {
+      if (!requestId) throw new Error(labels.requestIdUnavailable);
+      if (!(await writeClipboardText(requestId))) {
+        throw new Error(labels.copyUnavailable);
+      }
+      setRequestIdCopied(true);
+      if (requestIdCopiedTimer.current)
+        clearTimeout(requestIdCopiedTimer.current);
+      requestIdCopiedTimer.current = setTimeout(() => {
+        setRequestIdCopied(false);
+      }, 1_400);
+    },
+    `${threadId}:${message.id}:request-id:${requestId ?? "unavailable"}`,
+  );
+  const forkAction = useAgentKitMutation(async () => {
+    const thread = await control.fork(message.id);
+    onThreadForked?.(thread);
+  }, `${threadId}:${message.id}:fork`);
+  const regenerateAction = useAgentKitMutation(async () => {
+    if (!previousUserMessage) return;
+    await forkAndResubmitMessage({
+      controller,
+      threadId,
+      messages: thread.messages,
+      sourceMessage: previousUserMessage,
+      text: messageText(previousUserMessage),
+      attachments: previousUserMessage.parts.filter(
+        (part): part is Extract<AgentMessagePart, { type: "file" }> =>
+          part.type === "file",
+      ),
+      options: messageRunOptions(previousUserMessage),
+      metadata: previousUserMessage.metadata,
+      onThreadForked,
+      messageUnavailable: labels.messageUnavailable,
+    });
+  }, `${threadId}:${message.id}:regenerate`);
+  const updateFeedback = async (value: "positive" | "negative") => {
+    const previous = feedback;
+    if (previous === value) return;
+    setFeedback(value);
+    try {
+      await feedbackAction.execute({ value });
+    } catch {
+      setFeedback(previous);
+    }
+  };
+  const submitFeedbackReason = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const reason = feedbackReason.trim();
+    if (!reason) return;
+    try {
+      await feedbackAction.execute({ value: "negative", reason });
+      setFeedbackReason("");
+      setFeedbackReasonSubmitted(true);
+      setFeedbackReasonOpen(false);
+    } catch {
+      // coercion-ok: feedbackAction.error is rendered below and the draft stays available for retry.
+    }
+  };
+  const actionError =
+    copyAction.error ??
+    feedbackAction.error ??
+    branchNavigationAction.error ??
+    requestIdAction.error ??
+    forkAction.error ??
+    regenerateAction.error;
+  return (
+    <div className="agentkit-message-actions" data-role={message.role}>
+      {message.role === "assistant" ? (
+        <>
+          <div className="agentkit-message-actions-leading">
+            <IconButton
+              label={copied ? labels.copied : labels.copy}
+              icon={
+                copied ? (
+                  <IconCircleCheck aria-hidden="true" />
+                ) : (
+                  <IconCopy aria-hidden="true" />
+                )
+              }
+              size="compact"
+              pending={copyAction.pending}
+              onPress={() => void copyAction.execute().catch(() => undefined)}
+            />
+            {feedbackCapability.visible ? (
+              <>
+                <IconButton
+                  label={labels.positiveFeedback}
+                  icon={<IconThumbUp aria-hidden="true" />}
+                  size="compact"
+                  aria-pressed={feedback === "positive"}
+                  pending={feedbackAction.pending && feedback === "positive"}
+                  disabled={
+                    feedbackAction.pending || !feedbackCapability.enabled
+                  }
+                  title={feedbackCapability.reason}
+                  onPress={() => void updateFeedback("positive")}
+                />
+                <Popover
+                  open={feedbackReasonOpen}
+                  onOpenChange={(open) => {
+                    setFeedbackReasonOpen(open);
+                    if (open) setFeedbackReasonSubmitted(false);
+                  }}
+                  placement="bottom"
+                  align="start"
+                  className="agentkit-feedback-popover"
+                  trigger={
+                    <IconButton
+                      label={labels.negativeFeedback}
+                      icon={<IconThumbDown aria-hidden="true" />}
+                      size="compact"
+                      aria-pressed={feedback === "negative"}
+                      pending={
+                        feedbackAction.pending && feedback === "negative"
+                      }
+                      disabled={
+                        feedbackAction.pending || !feedbackCapability.enabled
+                      }
+                      title={feedbackCapability.reason}
+                      onPress={() => void updateFeedback("negative")}
+                    />
+                  }
+                >
+                  <form
+                    className="agentkit-feedback-form"
+                    onSubmit={submitFeedbackReason}
+                  >
+                    <TextArea
+                      label={labels.feedbackWhatWentWrong}
+                      value={feedbackReason}
+                      onChange={setFeedbackReason}
+                      placeholder={labels.feedbackPlaceholder}
+                      rows={3}
+                      maxLength={2_000}
+                      disabled={feedbackAction.pending}
+                      className="agentkit-feedback-textarea"
+                    />
+                    <div className="agentkit-feedback-footer">
+                      <span>
+                        {labels.feedbackKeyboardHint.replace(
+                          "{{shortcut}}",
+                          typeof navigator !== "undefined" &&
+                            /Mac|iPhone|iPad/.test(navigator.userAgent)
+                            ? "⌘"
+                            : "Ctrl",
+                        )}
+                      </span>
+                      <ActionButton
+                        type="submit"
+                        intent="primary"
+                        size="compact"
+                        pending={feedbackAction.pending}
+                        disabled={
+                          feedbackAction.pending || !feedbackReason.trim()
+                        }
+                      >
+                        {labels.feedbackSubmit}
+                      </ActionButton>
+                    </div>
+                  </form>
+                </Popover>
+                {feedbackReasonSubmitted ? (
+                  <span className="agentkit-visually-hidden" aria-live="polite">
+                    {labels.feedbackSubmitted}
+                  </span>
+                ) : null}
+              </>
+            ) : null}
+          </div>
+          <div className="agentkit-message-actions-trailing">
+            {isLastAssistantMessage &&
+            previousUserMessage &&
+            forkingCapability.visible &&
+            onThreadForked ? (
+              <IconButton
+                label={labels.regenerateResponse}
+                icon={<IconRefresh aria-hidden="true" />}
+                size="compact"
+                pending={regenerateAction.pending}
+                disabled={
+                  regenerateAction.pending ||
+                  hasActiveAgentRuns(thread) ||
+                  !forkingCapability.enabled
+                }
+                title={forkingCapability.reason}
+                onPress={() =>
+                  void regenerateAction.execute().catch(() => undefined)
+                }
+              />
+            ) : null}
+            {branchNavigation && branchNavigation.count > 1 ? (
+              <div
+                className="agentkit-branch-navigation"
+                aria-label={labels.branchPosition
+                  .replace("{{index}}", String(branchNavigation.index))
+                  .replace("{{count}}", String(branchNavigation.count))}
+              >
+                <IconButton
+                  label={labels.previousBranch}
+                  icon={<IconChevronLeft aria-hidden="true" />}
+                  size="compact"
+                  disabled={
+                    branchNavigation.index <= 1 ||
+                    branchNavigationAction.pending
+                  }
+                  pending={branchNavigationAction.pending}
+                  onPress={() =>
+                    void branchNavigationAction
+                      .execute("previous")
+                      .catch(() => undefined)
+                  }
+                />
+                <span aria-live="polite">
+                  {labels.branchPosition
+                    .replace("{{index}}", String(branchNavigation.index))
+                    .replace("{{count}}", String(branchNavigation.count))}
+                </span>
+                <IconButton
+                  label={labels.nextBranch}
+                  icon={<IconChevronRight aria-hidden="true" />}
+                  size="compact"
+                  disabled={
+                    branchNavigation.index >= branchNavigation.count ||
+                    branchNavigationAction.pending
+                  }
+                  pending={branchNavigationAction.pending}
+                  onPress={() =>
+                    void branchNavigationAction
+                      .execute("next")
+                      .catch(() => undefined)
+                  }
+                />
+              </div>
+            ) : null}
+            {message.createdAt ? (
+              <time dateTime={message.createdAt}>
+                {labels.formatTimestamp?.(message.createdAt) ??
+                  new Date(message.createdAt).toLocaleTimeString([], {
+                    hour: "numeric",
+                    minute: "2-digit",
+                  })}
+              </time>
+            ) : null}
+            {slots.messageActionsTrailing ? (
+              <slots.messageActionsTrailing
+                value={message}
+                threadId={threadId}
+              />
+            ) : null}
+            <Menu
+              open={actionsMenuOpen}
+              onOpenChange={(open) => {
+                setActionsMenuOpen(open);
+                if (!open) setRequestIdCopied(false);
+              }}
+              placement="bottom"
+              align="end"
+              className="agentkit-message-menu w-48"
+              trigger={
+                <IconButton
+                  label={labels.messageActions}
+                  icon={<IconDotsVertical aria-hidden="true" />}
+                  size="compact"
+                  aria-expanded={actionsMenuOpen}
+                  title={labels.messageActions}
+                />
+              }
+              items={[
+                {
+                  id: "copy-request-id",
+                  label: requestIdCopied
+                    ? labels.copied
+                    : requestId
+                      ? labels.copyRequestId
+                      : labels.requestIdUnavailable,
+                  icon: requestIdCopied ? (
+                    <IconCircleCheck size={14} aria-hidden="true" />
+                  ) : (
+                    <IconId size={14} aria-hidden="true" />
+                  ),
+                  disabled: !requestId || requestIdAction.pending,
+                },
+                ...(forkingCapability.visible && onThreadForked
+                  ? [
+                      {
+                        id: "fork-chat",
+                        label: (
+                          <span title={forkingCapability.reason}>
+                            {labels.fork}
+                          </span>
+                        ),
+                        icon: <IconGitBranch size={14} aria-hidden="true" />,
+                        disabled:
+                          !forkingCapability.enabled || forkAction.pending,
+                      },
+                    ]
+                  : []),
+              ]}
+              onAction={(id) => {
+                if (id === "copy-request-id") {
+                  void requestIdAction.execute().catch(() => undefined);
+                } else if (id === "fork-chat") {
+                  void forkAction.execute().catch(() => undefined);
+                }
+              }}
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="agentkit-message-actions-leading">
+            <IconButton
+              label={copied ? labels.copied : labels.copy}
+              icon={
+                copied ? (
+                  <IconCircleCheck aria-hidden="true" />
+                ) : (
+                  <IconCopy aria-hidden="true" />
+                )
+              }
+              size="compact"
+              pending={copyAction.pending}
+              onPress={() => void copyAction.execute().catch(() => undefined)}
+            />
+            {editContext?.enabled &&
+            forkingCapability.visible &&
+            text.trim() ? (
+              <IconButton
+                label={labels.editMessage}
+                icon={<IconPencil aria-hidden="true" />}
+                size="compact"
+                disabled={
+                  hasActiveAgentRuns(thread) || !forkingCapability.enabled
+                }
+                title={forkingCapability.reason}
+                aria-pressed={editContext.message?.id === message.id}
+                onPress={() => editContext.setMessage(message)}
+              />
+            ) : null}
+          </div>
+          <div className="agentkit-message-actions-trailing">
+            {message.createdAt ? (
+              <time dateTime={message.createdAt}>
+                {labels.formatTimestamp?.(message.createdAt) ??
+                  new Date(message.createdAt).toLocaleTimeString([], {
+                    hour: "numeric",
+                    minute: "2-digit",
+                  })}
+              </time>
+            ) : null}
+          </div>
+        </>
+      )}
+      {actionError ? (
+        <span className="agentkit-command-error" role="alert">
+          {actionError.message}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+export function AgentMessageView({
+  value: message,
+  threadId,
+}: AgentKitRenderProps<AgentMessage>) {
+  const { labels, slots } = useAgentKit();
+  const thread = useAgentThread(threadId);
+  const Supplement = slots.messageSupplement;
+  const Actions = slots.messageActions ?? AgentMessageActions;
+  const embeddedWidgetIds = new Set(
+    message.parts.flatMap((part) =>
+      part.type === "widget" ? [part.widget.id] : [],
+    ),
+  );
+  const embeddedAnnotationIds = new Set(
+    message.parts.flatMap((part) =>
+      part.type === "annotation" ? [part.annotation.id] : [],
+    ),
+  );
+  const attachedWidgets = Object.values(thread.widgets).filter(
+    (widget) =>
+      thread.widgetMessageIds[widget.id] === message.id &&
+      !embeddedWidgetIds.has(widget.id),
+  );
+  const attachedAnnotations = Object.values(thread.annotations).filter(
+    (annotation) =>
+      thread.annotationMessageIds[annotation.id] === message.id &&
+      !embeddedAnnotationIds.has(annotation.id),
+  );
+  if (
+    !message.parts.length &&
+    !attachedWidgets.length &&
+    !attachedAnnotations.length
+  ) {
+    return Supplement ? (
+      <Supplement value={message} threadId={threadId} />
+    ) : null;
+  }
+  return (
+    <article
+      className="agentkit-message"
+      data-role={message.role}
+      data-message-id={message.id}
+      aria-label={message.role === "user" ? labels.you : labels.assistant}
+      aria-busy={message.status === "streaming"}
+    >
+      <div className="agentkit-message-content">
+        {message.parts.map((part, index) => (
+          <AgentMessagePartView
+            key={`${message.id}-${index}`}
+            value={part}
+            threadId={threadId}
+            active={message.status === "streaming"}
+            resetKey={`${threadId}:${message.id}:${index}`}
+            userMessage={message.role === "user"}
+          />
+        ))}
+        {attachedWidgets.map((widget) => (
+          <AgentMessagePartView
+            key={widget.id}
+            value={{ type: "widget", widget }}
+            threadId={threadId}
+          />
+        ))}
+        {attachedAnnotations.length ? (
+          <div className="agentkit-annotations">
+            {attachedAnnotations.map((annotation) => (
+              <AgentMessagePartView
+                key={annotation.id}
+                value={{ type: "annotation", annotation }}
+                threadId={threadId}
+              />
+            ))}
+          </div>
+        ) : null}
+        {Supplement ? <Supplement value={message} threadId={threadId} /> : null}
+      </div>
+      <Actions value={message} threadId={threadId} />
+    </article>
+  );
+}
+
+export function AgentRunFailure({
+  error,
+  runId,
+  threadId,
+}: AgentRunFailureRenderProps) {
+  const { labels } = useAgentKit();
+  return (
+    <div
+      className="agentkit-run-failure"
+      data-error-code={error.code}
+      data-run-id={runId}
+      data-thread-id={threadId}
+      role="alert"
+    >
+      <IconAlertCircle aria-hidden="true" className="agentkit-icon" />
+      <div className="agentkit-run-failure-copy">
+        <strong>{labels.runFailed}</strong>
+        <span>{error.message}</span>
+      </div>
+    </div>
+  );
+}
+
+export function AgentConnectionErrorView({
+  error,
+  threadId,
+  recover,
+  recovering,
+  recoveryError,
+}: AgentConnectionErrorRenderProps) {
+  const { labels } = useAgentKit();
+  return (
+    <div
+      className="agentkit-error"
+      data-error-code={error.code}
+      data-thread-id={threadId}
+      role="alert"
+    >
+      <strong>{labels.error}</strong>
+      <span>{error.message}</span>
+      {error.retryable ? (
+        <div className="agentkit-error-actions">
+          <ActionButton
+            emphasis="outline"
+            size="compact"
+            pending={recovering}
+            onPress={() => void recover().catch(() => undefined)}
+          >
+            {labels.reconnect}
+          </ActionButton>
+        </div>
+      ) : null}
+      {recoveryError ? (
+        <span className="agentkit-command-error">{recoveryError.message}</span>
+      ) : null}
+    </div>
+  );
+}
+
+export interface AgentKitComposerProps extends Omit<
+  Pick<
+    PromptComposerProps,
+    | "slashCommands"
+    | "slashSkills"
+    | "includeDefaultSlashCommands"
+    | "includeDefaultSlashSkills"
+    | "onSlashCommand"
+    | "plusMenuMode"
+    | "voiceEnabled"
+    | "autoFocus"
+    | "disabled"
+    | "submissionDisabled"
+    | "onDisabledClick"
+    | "initialText"
+    | "initialTextKey"
+    | "layoutVariant"
+    | "availableModels"
+    | "modelListLoading"
+    | "selectedModel"
+    | "selectedEngine"
+    | "selectedEffort"
+    | "placeholder"
+    | "onConnectProvider"
+    | "onConnectLocalRuntime"
+    | "imageModelMenu"
+    | "onModelChange"
+    | "onEffortChange"
+    | "availableAgents"
+    | "selectedAgent"
+    | "agentOnly"
+    | "onAgentChange"
+    | "onModelSelectorOpenChange"
+    | "modelStatusChecksEnabled"
+    | "requireAgentEngine"
+    | "attachmentsEnabled"
+    | "onAttachmentRequest"
+    | "contextButtonTooltipDisabled"
+    | "onTextChange"
+    | "contextItems"
+    | "onRemoveContextItem"
+    | "onInspectContextItem"
+    | "onRetryContextItem"
+    | "contextMenuItems"
+    | "attachmentAdapter"
+    | "inlineTextAttachments"
+    | "extraActionButton"
+    | "onSubmit"
+    | "onBeforeSubmit"
+    | "onAttachmentError"
+    | "interceptBuildRequestsForBuilder"
+    | "planModeDisabled"
+    | "planModeDisabledReason"
+    | "stopButton"
+  >,
+  "onSubmit"
+> {
+  /** Override the default AgentKit submit path when the host owns send options. */
+  onSubmit?: PromptComposerProps["onSubmit"];
+  beforeSend?: (submission: AgentKitComposerSubmission) => void | Promise<void>;
+  composerRef?: { current: TiptapComposerHandle | null };
+  threadId?: string;
+  className?: string;
+  queueWhileRunning?: boolean;
+  showModelSelector?: boolean;
+  /** Controlled execution mode for agent-native act/plan workflows. */
+  mode?: "act" | "plan";
+  /** Initial execution mode when the composer is uncontrolled. */
+  defaultMode?: "act" | "plan";
+  /** Called when the execution mode changes. */
+  onModeChange?: (mode: "act" | "plan") => void;
+  /** Shared host toolbar controls shown above the composer. */
+  toolbarSlot?: ReactNode;
+}
+
+function hasActiveRuns(thread: AgentThreadState): boolean {
+  return hasActiveAgentRuns(thread);
+}
+
+export function AgentKitComposer({
+  threadId: requestedThreadId,
+  className,
+  queueWhileRunning = true,
+  showModelSelector = true,
+  slashCommands,
+  slashSkills,
+  includeDefaultSlashCommands,
+  includeDefaultSlashSkills,
+  onSlashCommand,
+  plusMenuMode,
+  voiceEnabled = false,
+  autoFocus = true,
+  mode,
+  defaultMode = "act",
+  onModeChange,
+  toolbarSlot,
+  disabled,
+  submissionDisabled,
+  onDisabledClick,
+  placeholder,
+  initialText,
+  initialTextKey,
+  layoutVariant,
+  availableModels,
+  modelListLoading,
+  selectedModel,
+  selectedEngine,
+  selectedEffort,
+  onConnectProvider,
+  onConnectLocalRuntime,
+  imageModelMenu,
+  onModelChange,
+  onEffortChange,
+  availableAgents,
+  selectedAgent,
+  agentOnly,
+  onAgentChange,
+  onModelSelectorOpenChange,
+  modelStatusChecksEnabled,
+  requireAgentEngine,
+  attachmentsEnabled,
+  onAttachmentRequest,
+  contextButtonTooltipDisabled,
+  onTextChange,
+  composerRef: hostComposerRef,
+  contextItems,
+  onRemoveContextItem,
+  extraActionButton,
+  onSubmit: onSubmitOverride,
+  onBeforeSubmit,
+  onAttachmentError,
+  interceptBuildRequestsForBuilder,
+  planModeDisabled,
+  planModeDisabledReason,
+  stopButton,
+  onInspectContextItem,
+  onRetryContextItem,
+  contextMenuItems,
+  attachmentAdapter,
+  inlineTextAttachments,
+  beforeSend,
+}: AgentKitComposerProps) {
+  const {
+    threadId: contextThreadId,
+    controller,
+    labels,
+    onThreadForked,
+    registerComposerFocus,
+    slots,
+  } = useAgentKit();
+  const editContext = useContext(AgentMessageEditContext);
+  const editingMessage = editContext?.message ?? null;
+  const threadId = requestedThreadId ?? contextThreadId;
+  const submitFailureDraftScopeRef = useRef<string | null>(null);
+  const getSubmitFailureDraftScope = useCallback(() => {
+    const scope = submitFailureDraftScopeRef.current;
+    submitFailureDraftScopeRef.current = null;
+    return scope;
+  }, []);
+  const queueCapability = useAgentCapability("messageQueue");
+  const suggestionsCapability = useAgentCapability("suggestions");
+  const uploadsCapability = useAgentCapability("uploads");
+  const modelSelectionCapability = useAgentCapability("modelSelection");
+  const canQueue = queueCapability.enabled;
+  const canUpload = uploadsCapability.enabled && attachmentsEnabled !== false;
+  const uploadGateRef = useRef({
+    enabled: canUpload,
+    reason: uploadsCapability.reason,
+  });
+  uploadGateRef.current = {
+    enabled: canUpload,
+    reason: uploadsCapability.reason,
+  };
+  // The host opts in through showModelSelector, so a capability the backend
+  // never reported keeps the selector instead of silently removing a control
+  // the host asked for. Only an explicit denial or outage takes it away.
+  const canSelectModel =
+    modelSelectionCapability.state === "unknown" ||
+    modelSelectionCapability.enabled;
+  const control = useAgentKitControl(threadId);
+  const thread = useAgentThread(threadId);
+  const command = useAgentKitMutation(
+    (execute: () => Promise<unknown>) => execute(),
+    threadId,
+  );
+  const localComposerRef = useRef<TiptapComposerHandle>(null);
+  const composerRef = hostComposerRef ?? localComposerRef;
+  const selectedSuggestionRef = useRef<
+    AgentKitSuggestionsRenderProps["suggestions"][number] | undefined
+  >(undefined);
+  const suggestionScope = useRef({ threadId, enabled: false, mounted: true });
+  suggestionScope.current = {
+    ...suggestionScope.current,
+    threadId,
+    enabled: !disabled && suggestionsCapability.enabled && !editingMessage,
+  };
+  useEffect(() => {
+    suggestionScope.current.mounted = true;
+    return () => {
+      suggestionScope.current.mounted = false;
+    };
+  }, []);
+  const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
+  const [attachmentError, setAttachmentError] = useState<string | null>(null);
+  const executionMode = mode ?? uncontrolledMode;
+  const active = hasActiveRuns(thread);
+  const composerInitialText = editingMessage
+    ? messageText(editingMessage)
+    : initialText;
+  const composerInitialTextKey = editingMessage
+    ? `edit:${editingMessage.id}`
+    : initialTextKey;
+  const focusComposer = useCallback(() => {
+    if (!autoFocus) return;
+    composerRef.current?.focus();
+    if (typeof globalThis.requestAnimationFrame === "function") {
+      globalThis.requestAnimationFrame(() => composerRef.current?.focus());
+    }
+  }, [autoFocus]);
+  const reportAttachmentError = useCallback(
+    (message: string) => {
+      if (onAttachmentError) onAttachmentError(message);
+      else setAttachmentError(message);
+    },
+    [onAttachmentError],
+  );
+  const addDroppedAttachment = useCallback(
+    async (file: File) => {
+      try {
+        const composer = composerRef.current;
+        if (!composer) throw new Error(labels.error);
+        await composer.addAttachment(file);
+        setAttachmentError(null);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : labels.error;
+        reportAttachmentError(message);
+        throw error;
+      }
+    },
+    [labels.error, reportAttachmentError],
+  );
+  useEffect(() => {
+    const receiveAttachments = (event: Event) => {
+      const detail = (
+        event as CustomEvent<{
+          threadId: string;
+          files: readonly File[];
+        }>
+      ).detail;
+      if (detail?.threadId !== threadId || !canUpload) return;
+      void Promise.all(
+        detail.files.map((file) => addDroppedAttachment(file)),
+      ).catch(() => undefined);
+    };
+    window.addEventListener("agentkit:attach-files", receiveAttachments);
+    return () =>
+      window.removeEventListener("agentkit:attach-files", receiveAttachments);
+  }, [addDroppedAttachment, canUpload, threadId]);
+  const composerToolbarSlot = editingMessage ? (
+    <>
+      <IconButton
+        label={labels.cancelEditing}
+        icon={<IconX aria-hidden="true" />}
+        size="compact"
+        onPress={() => {
+          composerRef.current?.setText(initialText ?? "");
+          editContext?.setMessage(null);
+          focusComposer();
+        }}
+      />
+      {toolbarSlot}
+    </>
+  ) : (
+    toolbarSlot
+  );
+  useEffect(
+    () => registerComposerFocus(threadId, focusComposer),
+    [focusComposer, registerComposerFocus, threadId],
+  );
+  // i18n-ignore: These type-level callback property names are not visible copy.
+  const submitMessage = async (
+    text: string,
+    files: PromptComposerFile[],
+    references: Parameters<PromptComposerProps["onSubmit"]>[2], // i18n-ignore: Type-only callback tuple, not rendered copy.
+    options: Parameters<PromptComposerProps["onSubmit"]>[3],
+    suggestion?: AgentKitSuggestionsRenderProps["suggestions"][number],
+  ) => {
+    submitFailureDraftScopeRef.current = null;
+    const assertSuggestionCurrent = () => {
+      if (
+        suggestion &&
+        (!suggestionScope.current.enabled ||
+          !suggestionScope.current.mounted ||
+          suggestionScope.current.threadId !== threadId ||
+          !isCurrentAgentSuggestion(controller.getThread(threadId), suggestion))
+      )
+        throw new Error(labels.error);
+    };
+    assertSuggestionCurrent();
+    const onLocalSubmit = () => {
+      options.onLocalSubmit?.();
+    };
+    if (!editingMessage && onSubmitOverride) {
+      const submitOptions = {
+        ...(suggestion ? { ...options, suggestion } : options),
+        onLocalSubmit,
+      };
+      await onSubmitOverride(text, files, references, submitOptions);
+      return;
+    }
+    if (files.length && !uploadGateRef.current.enabled) {
+      throw new AgentKitCapabilityError(
+        "uploads",
+        "unavailable",
+        uploadGateRef.current.reason ?? labels.error,
+      );
+    }
+    const effort = options.effort;
+    const contextItemsForSubmission = options.contextItems ?? contextItems;
+    const metadata = {
+      ...(editingMessage?.metadata ?? {}),
+      ...(suggestion ? { suggestion } : {}),
+      ...(contextItemsForSubmission === undefined
+        ? {}
+        : { contextItems: contextItemsForSubmission }),
+      ...(references.length ? { references } : {}),
+      ...(options.engine ? { engine: options.engine } : {}),
+      ...(options.model ? { model: options.model } : {}),
+      ...(effort ? { effort } : {}),
+      ...(selectedAgent ? { agentId: selectedAgent } : {}),
+      mode: executionMode,
+      requestMode: executionMode,
+    };
+    const runOptions: AgentRunOptions = {
+      ...(selectedAgent ? { agentId: selectedAgent } : {}),
+      model: options.model,
+      mode: executionMode,
+      reasoningEffort:
+        effort && !["auto", "max"].includes(effort)
+          ? (effort as AgentRunOptions["reasoningEffort"])
+          : undefined,
+      metadata,
+    };
+    const uploadFiles = files.map((file: PromptComposerFile) => ({
+      name: file.name,
+      mediaType: file.type || "application/octet-stream",
+      size: file.size,
+      body: file,
+    }));
+
+    if (editingMessage) {
+      if (!onThreadForked) {
+        throw new Error(labels.navigationUnavailable);
+      }
+      const previousMessage = findPreviousMessage(
+        thread.messages,
+        editingMessage.id,
+      );
+      if (previousMessage === null) {
+        throw new Error(labels.messageUnavailable);
+      }
+      const forkedThread = await controller.forkThread(
+        threadId,
+        previousMessage?.id,
+      );
+      submitFailureDraftScopeRef.current = `agentkit:${forkedThread.id}`;
+      onThreadForked(forkedThread);
+      const uploadedAttachments = uploadFiles.length
+        ? await controller.uploadFiles(forkedThread.id, uploadFiles)
+        : [];
+      const previousAttachments = editingMessage.parts.filter(
+        (part): part is Extract<AgentMessagePart, { type: "file" }> =>
+          part.type === "file",
+      );
+      const draft = createAgentKitComposerSubmission({
+        threadId: forkedThread.id,
+        intent: "immediate",
+        text,
+        composerModeContext: options.composerModeContext,
+        contextItems: contextItemsForSubmission,
+        references,
+        options: runOptions,
+      });
+      const payload = Object.freeze({
+        ...draft,
+        attachments: snapshotComposerValue([
+          ...previousAttachments,
+          ...uploadedAttachments,
+        ]),
+      });
+      await beforeSend?.(payload);
+      const sendMetadata = {
+        ...payload.options.metadata,
+        ...(payload.references.length
+          ? { references: payload.references }
+          : {}),
+        ...(payload.contextItems === undefined
+          ? {}
+          : { contextItems: payload.contextItems }),
+      };
+      await controller.sendMessage({
+        threadId: forkedThread.id,
+        text: payload.text,
+        attachments: [...payload.attachments],
+        options: payload.options,
+        metadata: sendMetadata,
+        onLocalSubmit,
+      });
+      submitFailureDraftScopeRef.current = null;
+      editContext?.setMessage(null);
+      return;
+    }
+    const submissionThread = controller.getThread(threadId);
+    const activeAtSubmit = hasActiveRuns(submissionThread);
+    const draft = createAgentKitComposerSubmission({
+      threadId,
+      intent:
+        canQueue &&
+        (options.intent === "queued" || (activeAtSubmit && queueWhileRunning))
+          ? "queued"
+          : "immediate",
+      text,
+      composerModeContext: options.composerModeContext,
+      contextItems: contextItemsForSubmission,
+      references,
+      options: runOptions,
+    });
+    const attachments = uploadFiles.length
+      ? await control.uploadFiles(uploadFiles)
+      : [];
+    const payload = Object.freeze({
+      ...draft,
+      attachments: snapshotComposerValue(attachments),
+    });
+    await beforeSend?.(payload);
+    assertSuggestionCurrent();
+    const sendMetadata = {
+      ...payload.options.metadata,
+      ...(payload.references.length ? { references: payload.references } : {}),
+      ...(payload.contextItems === undefined
+        ? {}
+        : { contextItems: payload.contextItems }),
+    };
+    const message = {
+      text: payload.text,
+      attachments: [...payload.attachments],
+      options: payload.options,
+      metadata: sendMetadata,
+      onLocalSubmit,
+    };
+    if (payload.intent === "queued") {
+      await control.queueMessage(message);
+    } else {
+      await control.sendMessage(message);
+    }
+  };
+  const prepareHostSubmit = async () => {
+    if (disabled) {
+      onDisabledClick?.();
+      return false;
+    }
+    if (submissionDisabled) return false;
+    if (editingMessage) return true;
+    return !onBeforeSubmit || (await onBeforeSubmit());
+  };
+  const steerQueued: AgentKitQueueRenderProps["onSteer"] =
+    !disabled && !submissionDisabled
+      ? (item) =>
+          void command
+            .execute(async () => {
+              if (!(await prepareHostSubmit())) return;
+              if (onSubmitOverride) {
+                await submitMessage(item.text, [], [], {
+                  intent: "immediate",
+                  attachments: item.attachments,
+                });
+                await control.removeQueued(item.id);
+              } else {
+                await control.steerQueued(item.id);
+              }
+            })
+            .catch(() => undefined)
+            .finally(focusComposer)
+      : undefined;
+  const supportsQueueReordering =
+    controller.supportsQueuedMessageReordering?.() ?? false;
+  const moveQueuedToTop = useAgentKitMutation(
+    (messageId: string) => control.moveQueuedMessageToTop(messageId),
+    `${threadId}:move-queued-to-top`,
+  );
+  const removeQueued: AgentKitQueueRenderProps["onRemove"] = (item) =>
+    void command
+      .execute(() => control.removeQueued(item.id))
+      .catch(() => undefined)
+      .finally(focusComposer);
+  const selectSuggestion: AgentKitSuggestionsRenderProps["onSelect"] = (
+    suggestion,
+  ) => {
+    if (
+      disabled ||
+      !suggestionsCapability.enabled ||
+      selectedSuggestionRef.current ||
+      !isCurrentAgentSuggestion(controller.getThread(threadId), suggestion)
+    )
+      return;
+    const composer = composerRef.current;
+    if (!composer) return;
+    selectedSuggestionRef.current = suggestion;
+    void composer
+      .submitWithText(agentSuggestionPrompt(suggestion))
+      .catch(() => undefined)
+      .finally(() => {
+        if (selectedSuggestionRef.current === suggestion)
+          selectedSuggestionRef.current = undefined;
+        focusComposer();
+      });
+  };
+  const Queue = slots.queue;
+  const Suggestions = slots.suggestions;
+  const suggestions = selectAgentSuggestions(thread);
+  return (
+    <div className={`agentkit-composer-stack ${className ?? ""}`}>
+      {queueCapability.visible ? (
+        Queue ? (
+          <Queue
+            items={thread.queuedMessages}
+            threadId={threadId}
+            active={active}
+            pending={command.pending || Boolean(disabled)}
+            onSteer={steerQueued}
+            onRemove={removeQueued}
+          />
+        ) : (
+          <MessageQueueDrawer
+            variant="recessed"
+            items={thread.queuedMessages.map((message) => ({
+              id: message.id,
+              text: message.text,
+              images: (message.attachments ?? []).flatMap((attachment) => {
+                if (!attachment.mediaType?.startsWith("image/")) return [];
+                const src = safeAgentImageSrc(attachment.url);
+                return src ? [src] : [];
+              }),
+            }))}
+            disabled={command.pending || Boolean(disabled)}
+            onSteer={
+              steerQueued
+                ? (item) => {
+                    const message = thread.queuedMessages.find(
+                      (candidate) => candidate.id === item.id,
+                    );
+                    if (message) steerQueued(message);
+                  }
+                : undefined
+            }
+            onRemove={(item) => {
+              const message = thread.queuedMessages.find(
+                (candidate) => candidate.id === item.id,
+              );
+              if (message) removeQueued(message);
+            }}
+            labels={{
+              region: labels.queue,
+              steer: labels.queueSteer,
+              steerHint: labels.queueSteerHint,
+              remove: labels.queueRemove,
+              moreActions: labels.queueMore,
+            }}
+            getItemActions={
+              supportsQueueReordering
+                ? (item) => [
+                    {
+                      id: "move-to-top",
+                      label: labels.queueMoveToTop,
+                      icon: <IconArrowUp aria-hidden="true" size={14} />,
+                      disabled:
+                        item.id === thread.queuedMessages[0]?.id ||
+                        moveQueuedToTop.pending,
+                      onSelect: (selected) =>
+                        void command
+                          .execute(() => moveQueuedToTop.execute(selected.id))
+                          .catch(() => undefined),
+                    },
+                  ]
+                : undefined
+            }
+          />
+        )
+      ) : null}
+      {suggestionsCapability.enabled &&
+      !disabled &&
+      !editingMessage &&
+      suggestions.length ? (
+        Suggestions ? (
+          <Suggestions
+            suggestions={suggestions}
+            threadId={threadId}
+            pending={command.pending}
+            onSelect={selectSuggestion}
+          />
+        ) : (
+          <AgentSuggestionBar
+            suggestions={suggestions.map((suggestion) => ({
+              ...suggestion,
+              disabled: command.pending || Boolean(disabled),
+            }))}
+            ariaLabel={labels.suggestions}
+            onSelect={selectSuggestion}
+            className="agentkit-suggestions"
+          />
+        )
+      ) : null}
+      <PromptComposer
+        contextItems={contextItems}
+        onRemoveContextItem={onRemoveContextItem}
+        onInspectContextItem={onInspectContextItem}
+        onRetryContextItem={onRetryContextItem}
+        contextMenuItems={contextMenuItems}
+        attachmentAdapter={attachmentAdapter}
+        inlineTextAttachments={inlineTextAttachments}
+        rootClassName="agentkit-composer"
+        draftScope={`agentkit:${threadId}${editingMessage ? `:edit:${editingMessage.id}` : ""}`}
+        ariaLabel={labels.composerLabel}
+        placeholder={placeholder ?? labels.composerPlaceholder}
+        disabled={disabled}
+        submissionDisabled={submissionDisabled || command.pending}
+        onDisabledClick={onDisabledClick}
+        onConnectProvider={onConnectProvider}
+        onConnectLocalRuntime={onConnectLocalRuntime}
+        imageModelMenu={imageModelMenu}
+        autoFocus={autoFocus}
+        composerRef={composerRef}
+        submitting={command.pending}
+        willQueue={active && queueWhileRunning && canQueue}
+        showModelSelector={showModelSelector && canSelectModel}
+        availableModels={availableModels}
+        modelListLoading={modelListLoading}
+        selectedModel={selectedModel}
+        selectedEngine={selectedEngine}
+        selectedEffort={selectedEffort}
+        onModelChange={onModelChange}
+        onEffortChange={onEffortChange}
+        availableAgents={availableAgents}
+        selectedAgent={selectedAgent}
+        agentOnly={agentOnly}
+        onAgentChange={onAgentChange}
+        onModelSelectorOpenChange={onModelSelectorOpenChange}
+        modelStatusChecksEnabled={modelStatusChecksEnabled}
+        requireAgentEngine={requireAgentEngine}
+        layoutVariant={layoutVariant}
+        toolbarSlot={composerToolbarSlot}
+        initialText={composerInitialText}
+        initialTextKey={composerInitialTextKey}
+        onTextChange={onTextChange}
+        extraActionButton={extraActionButton}
+        onBeforeSubmit={onBeforeSubmit}
+        getSubmitFailureDraftScope={getSubmitFailureDraftScope}
+        onAttachmentError={reportAttachmentError}
+        interceptBuildRequestsForBuilder={interceptBuildRequestsForBuilder}
+        planModeDisabled={planModeDisabled}
+        planModeDisabledReason={planModeDisabledReason}
+        stopButton={stopButton}
+        attachmentsEnabled={canUpload}
+        onAttachmentRequest={onAttachmentRequest}
+        contextButtonTooltipDisabled={contextButtonTooltipDisabled}
+        slashCommands={slashCommands}
+        slashSkills={slashSkills}
+        includeDefaultSlashCommands={includeDefaultSlashCommands ?? false}
+        includeDefaultSlashSkills={includeDefaultSlashSkills ?? false}
+        onSlashCommand={onSlashCommand}
+        plusMenuMode={plusMenuMode ?? "full"}
+        voiceEnabled={voiceEnabled}
+        execMode={executionMode === "plan" ? "plan" : "build"}
+        onExecModeChange={(nextMode) => {
+          const next = nextMode === "plan" ? "plan" : "act";
+          if (mode === undefined) setUncontrolledMode(next);
+          onModeChange?.(next);
+        }}
+        onSubmit={async (text, files, references, options) => {
+          if (disabled) {
+            onDisabledClick?.();
+            return;
+          }
+          focusComposer();
+          try {
+            await command.execute(async () => {
+              await submitMessage(
+                text,
+                files,
+                references,
+                options,
+                selectedSuggestionRef.current,
+              );
+            });
+          } finally {
+            focusComposer();
+          }
+        }}
+      />
+      {command.error ? (
+        <div className="agentkit-composer-error" role="alert">
+          <IconAlertCircle aria-hidden="true" className="agentkit-icon" />
+          <span>{command.error.message}</span>
+        </div>
+      ) : null}
+      {attachmentError ? (
+        <div className="agentkit-composer-error" role="alert">
+          <IconAlertCircle aria-hidden="true" className="agentkit-icon" />
+          <span>{attachmentError}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export interface AgentKitChatProps {
+  title?: ReactNode;
+  toolbar?: ReactNode;
+  composer?: boolean;
+  /** Configures the reference composer without replacing its slot. */
+  composerProps?: Omit<AgentKitComposerProps, "threadId">;
+  /** Marks conversations with messages supplied by a custom transcript slot. */
+  hasRenderedMessages?: boolean;
+  /** New conversations center the composer; embedded panels can anchor it. */
+  emptyComposerPlacement?: "center" | "bottom";
+  /** Follow new output until the user deliberately scrolls away. */
+  autoScroll?: boolean;
+  className?: string;
+}
+
+const AGENTKIT_TRANSCRIPT_BOTTOM_THRESHOLD = 24;
+const AGENTKIT_TRANSCRIPT_SCROLLBAR_IDLE_MS = 900;
+const AGENTKIT_TRANSCRIPT_SCROLL_KEYS = new Set([
+  "ArrowDown",
+  "ArrowUp",
+  "End",
+  "Home",
+  "PageDown",
+  "PageUp",
+  " ",
+]);
+
+export function isAgentKitTranscriptNearBottom(
+  element: Pick<HTMLElement, "clientHeight" | "scrollHeight" | "scrollTop">,
+  threshold = AGENTKIT_TRANSCRIPT_BOTTOM_THRESHOLD,
+) {
+  return (
+    element.scrollHeight - element.clientHeight - element.scrollTop <= threshold
+  );
+}
+
+export function AgentKitChat({
+  title,
+  toolbar,
+  composer = true,
+  composerProps,
+  hasRenderedMessages = false,
+  emptyComposerPlacement = "center",
+  autoScroll = true,
+  className,
+}: AgentKitChatProps) {
+  const { threadId, slots, labels, onThreadForked } = useAgentKit();
+  const connection = useAgentConnection();
+  const uploadsCapability = useAgentCapability("uploads");
+  const control = useAgentKitControl(threadId);
+  const recovery = useAgentKitMutation(() => control.load(), threadId);
+  const thread = useAgentThread(threadId);
+  const [pendingEdit, setPendingEdit] = useState<{
+    threadId: string;
+    message: AgentMessage;
+  } | null>(null);
+  const editingMessage =
+    pendingEdit?.threadId === threadId ? pendingEdit.message : null;
+  const setEditingMessage = useCallback(
+    (message: AgentMessage | null) => {
+      setPendingEdit(message ? { threadId, message } : null);
+    },
+    [threadId],
+  );
+  const messageEditContext: AgentMessageEditContextValue = {
+    enabled: composer && Boolean(onThreadForked),
+    message: editingMessage,
+    setMessage: setEditingMessage,
+  };
+  useEffect(() => setPendingEdit(null), [threadId]);
+  const hasConversation = thread.messages.length > 0 || hasRenderedMessages;
+  const Message = slots.message ?? AgentMessageView;
+  const EmptyState = slots.emptyState;
+  const Composer = slots.composer ?? AgentKitComposer;
+  const approvalEntries = Object.entries(thread.approvals);
+  const connectionRequestEntries = Object.entries(
+    thread.connectionRequests ?? {},
+  );
+  const ErrorState = slots.connectionError ?? AgentConnectionErrorView;
+  const RunFailure = slots.runFailure ?? AgentRunFailure;
+  const Approval = slots.approval;
+  const ConnectionRequest = slots.connectionRequest;
+  const Header = slots.header;
+  const Toolbar = slots.toolbar;
+  const Transcript = slots.transcript;
+  const Footer = slots.footer;
+  const transcriptRef = useRef<HTMLDivElement>(null);
+  const transcriptContentRef = useRef<HTMLDivElement>(null);
+  const fileDragDepthRef = useRef(0);
+  const followsTranscriptRef = useRef(true);
+  const transcriptThreadIdRef = useRef(threadId);
+  const previousLastMessageIdRef = useRef<string | undefined>(undefined);
+  const transcriptFollowFrameRef = useRef<number | undefined>(undefined);
+  const transcriptScrollbarInteractionRef = useRef(false);
+  const transcriptScrollbarTimeoutRef = useRef<
+    ReturnType<typeof setTimeout> | undefined
+  >(undefined);
+  const [transcriptScrollbarVisible, setTranscriptScrollbarVisible] =
+    useState(false);
+  const [transcriptAwayFromBottom, setTranscriptAwayFromBottom] =
+    useState(false);
+  const [fileDragActive, setFileDragActive] = useState(false);
+  const lastMessage = thread.messages.at(-1);
+  const lastEventId = thread.events.at(-1)?.id;
+  const connectionError =
+    connection.status === "error" ? connection.error : undefined;
+
+  const canDropFiles =
+    composer &&
+    uploadsCapability.enabled &&
+    composerProps?.attachmentsEnabled !== false;
+  const hasFiles = (event: ReactDragEvent<HTMLElement>) =>
+    Array.from(event.dataTransfer.types).includes("Files");
+  const handleFileDragEnter = (event: ReactDragEvent<HTMLElement>) => {
+    if (!canDropFiles || event.defaultPrevented || !hasFiles(event)) return;
+    if (
+      event.relatedTarget instanceof Node &&
+      event.currentTarget.contains(event.relatedTarget)
+    ) {
+      return;
+    }
+    event.preventDefault();
+    fileDragDepthRef.current += 1;
+    setFileDragActive(true);
+  };
+  const handleFileDragOver = (event: ReactDragEvent<HTMLElement>) => {
+    if (!canDropFiles || event.defaultPrevented || !hasFiles(event)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+    setFileDragActive(true);
+  };
+  const handleFileDragLeave = (event: ReactDragEvent<HTMLElement>) => {
+    if (!canDropFiles || !hasFiles(event)) return;
+    if (
+      event.relatedTarget instanceof Node &&
+      event.currentTarget.contains(event.relatedTarget)
+    ) {
+      return;
+    }
+    fileDragDepthRef.current = Math.max(0, fileDragDepthRef.current - 1);
+    setFileDragActive(fileDragDepthRef.current > 0);
+  };
+  const handleFileDrop = (event: ReactDragEvent<HTMLElement>) => {
+    if (!canDropFiles || !hasFiles(event)) return;
+    fileDragDepthRef.current = 0;
+    setFileDragActive(false);
+    if (event.defaultPrevented) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const files = Array.from(event.dataTransfer.files);
+    if (!files.length) return;
+    window.dispatchEvent(
+      new CustomEvent("agentkit:attach-files", {
+        detail: { threadId, files },
+      }),
+    );
+  };
+
+  const clearTranscriptScrollbarTimeout = useCallback(() => {
+    if (transcriptScrollbarTimeoutRef.current === undefined) return;
+    clearTimeout(transcriptScrollbarTimeoutRef.current);
+    transcriptScrollbarTimeoutRef.current = undefined;
+  }, []);
+
+  const hideTranscriptScrollbar = useCallback(() => {
+    clearTranscriptScrollbarTimeout();
+    transcriptScrollbarInteractionRef.current = false;
+    setTranscriptScrollbarVisible(false);
+  }, [clearTranscriptScrollbarTimeout]);
+
+  const scheduleTranscriptScrollbarHide = useCallback(() => {
+    clearTranscriptScrollbarTimeout();
+    transcriptScrollbarTimeoutRef.current = setTimeout(() => {
+      transcriptScrollbarTimeoutRef.current = undefined;
+      transcriptScrollbarInteractionRef.current = false;
+      setTranscriptScrollbarVisible(false);
+    }, AGENTKIT_TRANSCRIPT_SCROLLBAR_IDLE_MS);
+  }, [clearTranscriptScrollbarTimeout]);
+
+  const revealTranscriptScrollbar = useCallback(() => {
+    const transcript = transcriptRef.current;
+    if (!transcript || transcript.scrollHeight <= transcript.clientHeight)
+      return;
+    transcriptScrollbarInteractionRef.current = true;
+    setTranscriptScrollbarVisible(true);
+    scheduleTranscriptScrollbarHide();
+  }, [scheduleTranscriptScrollbarHide]);
+
+  const scrollTranscriptToBottom = useCallback(() => {
+    const transcript = transcriptRef.current;
+    if (!autoScroll || !transcript || !followsTranscriptRef.current) return;
+    const nextScrollTop = Math.max(
+      0,
+      transcript.scrollHeight - transcript.clientHeight,
+    );
+    if (Math.abs(transcript.scrollTop - nextScrollTop) <= 1) return;
+    transcript.scrollTop = nextScrollTop;
+  }, [autoScroll]);
+
+  const returnTranscriptToBottom = useCallback(() => {
+    const transcript = transcriptRef.current;
+    if (!transcript) return;
+    followsTranscriptRef.current = true;
+    const nextScrollTop = Math.max(
+      0,
+      transcript.scrollHeight - transcript.clientHeight,
+    );
+    transcript.scrollTop = nextScrollTop;
+    setTranscriptAwayFromBottom(false);
+  }, []);
+
+  const cancelScheduledTranscriptFollow = useCallback(() => {
+    if (transcriptFollowFrameRef.current === undefined) return;
+    if (typeof globalThis.cancelAnimationFrame === "function") {
+      globalThis.cancelAnimationFrame(transcriptFollowFrameRef.current);
+    }
+    transcriptFollowFrameRef.current = undefined;
+  }, []);
+
+  const scheduleTranscriptFollow = useCallback(() => {
+    if (!autoScroll || transcriptFollowFrameRef.current !== undefined) return;
+    if (typeof globalThis.requestAnimationFrame !== "function") {
+      scrollTranscriptToBottom();
+      return;
+    }
+    transcriptFollowFrameRef.current = globalThis.requestAnimationFrame(() => {
+      transcriptFollowFrameRef.current = undefined;
+      scrollTranscriptToBottom();
+    });
+  }, [autoScroll, scrollTranscriptToBottom]);
+
+  useEffect(
+    () => () => {
+      clearTranscriptScrollbarTimeout();
+      cancelScheduledTranscriptFollow();
+    },
+    [cancelScheduledTranscriptFollow, clearTranscriptScrollbarTimeout],
+  );
+
+  useLayoutEffect(() => {
+    if (transcriptThreadIdRef.current !== threadId) {
+      transcriptThreadIdRef.current = threadId;
+      previousLastMessageIdRef.current = undefined;
+      followsTranscriptRef.current = true;
+      setTranscriptAwayFromBottom(false);
+      hideTranscriptScrollbar();
+    }
+    const previousLastMessageId = previousLastMessageIdRef.current;
+    previousLastMessageIdRef.current = lastMessage?.id;
+    if (!autoScroll) return;
+    if (
+      lastMessage?.role === "user" &&
+      lastMessage.id !== previousLastMessageId
+    ) {
+      followsTranscriptRef.current = true;
+      hideTranscriptScrollbar();
+    }
+    scrollTranscriptToBottom();
+  }, [
+    autoScroll,
+    hideTranscriptScrollbar,
+    lastEventId,
+    lastMessage?.id,
+    lastMessage?.role,
+    scrollTranscriptToBottom,
+    threadId,
+  ]);
+
+  useLayoutEffect(() => {
+    const transcript = transcriptRef.current;
+    const content = transcriptContentRef.current;
+    if (
+      !autoScroll ||
+      !transcript ||
+      !content ||
+      typeof ResizeObserver === "undefined"
+    ) {
+      return;
+    }
+    const observer = new ResizeObserver(scheduleTranscriptFollow);
+    observer.observe(transcript);
+    observer.observe(content);
+    return () => {
+      observer.disconnect();
+      cancelScheduledTranscriptFollow();
+    };
+  }, [
+    autoScroll,
+    cancelScheduledTranscriptFollow,
+    scheduleTranscriptFollow,
+    threadId,
+  ]);
+
+  const handleTranscriptScroll = useCallback(() => {
+    const transcript = transcriptRef.current;
+    if (!transcript) return;
+    const nearBottom = isAgentKitTranscriptNearBottom(transcript);
+    if (nearBottom || transcriptScrollbarInteractionRef.current) {
+      followsTranscriptRef.current = nearBottom;
+    }
+    setTranscriptAwayFromBottom(!nearBottom);
+    if (transcriptScrollbarInteractionRef.current) {
+      scheduleTranscriptScrollbarHide();
+    }
+  }, [scheduleTranscriptScrollbarHide]);
+
+  const handleTranscriptPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const bounds = event.currentTarget.getBoundingClientRect();
+      const edgeDistance = Math.min(
+        Math.abs(event.clientX - bounds.left),
+        Math.abs(bounds.right - event.clientX),
+      );
+      if (edgeDistance <= 12) revealTranscriptScrollbar();
+    },
+    [revealTranscriptScrollbar],
+  );
+
+  const handleTranscriptKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLDivElement>) => {
+      if (AGENTKIT_TRANSCRIPT_SCROLL_KEYS.has(event.key)) {
+        revealTranscriptScrollbar();
+      }
+    },
+    [revealTranscriptScrollbar],
+  );
+  const messageRunIds = useMemo(() => {
+    const result = new Map<string, string>();
+    for (const event of thread.events) {
+      if (
+        event.type === "message.created" ||
+        event.type === "message.completed"
+      ) {
+        result.set(event.message.id, event.runId);
+      }
+      if (event.type === "message.delta" || event.type === "reasoning.delta") {
+        result.set(event.messageId, event.runId);
+      }
+    }
+    return result;
+  }, [thread.events]);
+  const messageBoundarySequences = useMemo(() => {
+    const firstVisibleSequence = new Map<string, number>();
+    const lastTextDeltaSequence = new Map<string, number>();
+    const assistantMessageIds = new Set(
+      thread.messages
+        .filter((message) => message.role === "assistant")
+        .map((message) => message.id),
+    );
+    for (const event of thread.events) {
+      if (!messageEventHasVisibleAssistantOutput(event, assistantMessageIds)) {
+        continue;
+      }
+      const messageId =
+        event.type === "message.created" || event.type === "message.completed"
+          ? event.message.id
+          : event.type === "message.delta"
+            ? event.messageId
+            : undefined;
+      if (!messageId) continue;
+      if (!firstVisibleSequence.has(messageId)) {
+        firstVisibleSequence.set(messageId, event.sequence);
+      }
+      if (event.type === "message.delta") {
+        lastTextDeltaSequence.set(messageId, event.sequence);
+      }
+    }
+    const result = new Map<string, number>();
+    for (const [messageId, sequence] of firstVisibleSequence) {
+      result.set(messageId, lastTextDeltaSequence.get(messageId) ?? sequence);
+    }
+    return result;
+  }, [thread.events, thread.messages]);
+  const lastAssistantMessagesByRun = useMemo(() => {
+    const result = new Map<RunId, { id: string; sequence: number }>();
+    for (const message of thread.messages) {
+      const runId = messageRunIds.get(message.id);
+      const sequence = messageBoundarySequences.get(message.id);
+      if (runId && message.role === "assistant" && sequence !== undefined) {
+        result.set(runId, { id: message.id, sequence });
+      }
+    }
+    return result;
+  }, [messageBoundarySequences, messageRunIds, thread.messages]);
+  const failedRuns = useMemo(() => {
+    const result = new Map<RunId, AgentError>();
+    for (const run of Object.values(thread.runs)) {
+      if (run.status === "failed" && run.error) {
+        result.set(run.id, run.error);
+      }
+    }
+    return result;
+  }, [thread.runs]);
+  const runWorkStarts = useMemo(
+    () => firstWorkEvents(thread.events),
+    [thread.events],
+  );
+  const groupedReasoningMessageIds = new Set(
+    runWorkStarts.flatMap((event) => {
+      const messageId = reasoningMessageId(event);
+      return messageId ? [messageId] : [];
+    }),
+  );
+  const hasRunWork = (
+    runId: RunId,
+    afterSequence?: number,
+    throughSequence?: number,
+  ) =>
+    runWorkStarts.some(
+      (event) =>
+        event.runId === runId &&
+        sequenceInRange(event.sequence, { afterSequence, throughSequence }),
+    );
+  const pendingRunIds = Array.from(
+    new Set(
+      runWorkStarts
+        .filter((event) => {
+          const boundary = lastAssistantMessagesByRun.get(event.runId);
+          return boundary === undefined || event.sequence > boundary.sequence;
+        })
+        .map((event) => event.runId),
+    ),
+  );
+  const pendingRuns = new Set(pendingRunIds);
+  const renderRunFailure = (runId: RunId) => {
+    const error = failedRuns.get(runId);
+    return error ? (
+      <RunFailure error={error} runId={runId} threadId={threadId} />
+    ) : null;
+  };
+  const renderRunWork = ({
+    runId,
+    anchor,
+    afterSequence,
+    throughSequence,
+  }: {
+    runId: RunId;
+    anchor: string;
+    afterSequence?: number;
+    throughSequence?: number;
+  }) => (
+    <AgentKitSurfaceBoundary
+      key={`run-work:${threadId}:${runId}:${anchor}`}
+      surface="activity"
+      resetKey={`${runId}:${anchor}:${thread.events.length}`}
+    >
+      <AgentCollaborationFeed
+        runId={runId}
+        afterSequence={afterSequence}
+        throughSequence={throughSequence}
+      />
+      <AgentTaskGroup
+        runId={runId}
+        afterSequence={afterSequence}
+        throughSequence={throughSequence}
+      />
+      <AgentActivityGroup
+        runId={runId}
+        afterSequence={afterSequence}
+        throughSequence={throughSequence}
+        excludeAgentActivities
+      />
+    </AgentKitSurfaceBoundary>
+  );
+  const transcriptItems: ReactNode[] = [];
+  const previousAssistantByRun = new Map<
+    RunId,
+    { id: string; sequence: number }
+  >();
+  for (const message of thread.messages) {
+    const runId = messageRunIds.get(message.id);
+    const sequence = messageBoundarySequences.get(message.id);
+    const isAssistantBoundary =
+      message.role === "assistant" &&
+      runId !== undefined &&
+      sequence !== undefined;
+    const previousAssistant =
+      isAssistantBoundary && runId
+        ? previousAssistantByRun.get(runId)
+        : undefined;
+    if (
+      isAssistantBoundary &&
+      runId &&
+      hasRunWork(runId, previousAssistant?.sequence, sequence)
+    ) {
+      transcriptItems.push(
+        renderRunWork({
+          runId,
+          anchor: previousAssistant?.id ?? "start",
+          afterSequence: previousAssistant?.sequence,
+          throughSequence: sequence,
+        }),
+      );
+    }
+    const displayMessage =
+      message.role === "assistant"
+        ? {
+            ...message,
+            parts: message.parts.filter(
+              (part) =>
+                part.type !== "reasoning" &&
+                (part.type !== "text" || part.text.trim()),
+            ),
+          }
+        : message;
+    if (
+      message.role === "assistant" &&
+      !groupedReasoningMessageIds.has(message.id) &&
+      message.parts.some(
+        (part) =>
+          part.type === "reasoning" &&
+          part.visibility !== "hidden" &&
+          part.text.trim(),
+      )
+    ) {
+      const active =
+        message.status === "streaming" && displayMessage.parts.length === 0;
+      transcriptItems.push(
+        <AgentWorkDisclosure
+          key={`reasoning:${threadId}:${message.id}`}
+          label={active ? labels.working : labels.worked}
+          running={active}
+        >
+          <div className="agentkit-activities-list">
+            <AgentReasoningParts
+              message={message}
+              threadId={threadId}
+              active={active}
+            />
+          </div>
+        </AgentWorkDisclosure>,
+      );
+    }
+    transcriptItems.push(
+      <AgentKitSurfaceBoundary
+        key={`message:${threadId}:${message.id}`}
+        surface="message"
+        resetKey={`${message.id}:${thread.events.length}`}
+      >
+        <Message value={displayMessage} threadId={threadId} />
+      </AgentKitSurfaceBoundary>,
+    );
+    if (isAssistantBoundary && runId) {
+      previousAssistantByRun.set(runId, { id: message.id, sequence });
+    }
+    const concludesRun =
+      isAssistantBoundary &&
+      runId !== undefined &&
+      lastAssistantMessagesByRun.get(runId)?.id === message.id;
+    if (concludesRun && !pendingRuns.has(runId) && failedRuns.has(runId)) {
+      transcriptItems.push(
+        <AgentKitSurfaceBoundary
+          key={`run-failure:${runId}`}
+          surface="activity"
+          resetKey={`${runId}:${thread.events.length}`}
+        >
+          {renderRunFailure(runId)}
+        </AgentKitSurfaceBoundary>,
+      );
+    }
+  }
+  for (const runId of pendingRunIds) {
+    const boundary = lastAssistantMessagesByRun.get(runId);
+    transcriptItems.push(
+      renderRunWork({
+        runId,
+        anchor: boundary?.id ?? "start",
+        afterSequence: boundary?.sequence,
+      }),
+    );
+    if (failedRuns.has(runId)) {
+      transcriptItems.push(
+        <AgentKitSurfaceBoundary
+          key={`run-failure:${runId}`}
+          surface="activity"
+          resetKey={`${runId}:${thread.events.length}`}
+        >
+          {renderRunFailure(runId)}
+        </AgentKitSurfaceBoundary>,
+      );
+    }
+  }
+  for (const [runId] of failedRuns) {
+    if (lastAssistantMessagesByRun.has(runId) || pendingRuns.has(runId)) {
+      continue;
+    }
+    transcriptItems.push(
+      <AgentKitSurfaceBoundary
+        key={`run-failure:${runId}`}
+        surface="activity"
+        resetKey={`${runId}:${thread.events.length}`}
+      >
+        {renderRunFailure(runId)}
+      </AgentKitSurfaceBoundary>,
+    );
+  }
+  return (
+    <AgentMessageEditContext.Provider value={messageEditContext}>
+      <section
+        aria-label={typeof title === "string" ? title : labels.conversation}
+        className={`agentkit-chat ${className ?? ""}`}
+        data-empty={!hasConversation}
+        data-empty-composer-placement={
+          hasConversation ? "bottom" : emptyComposerPlacement
+        }
+        onDragEnter={handleFileDragEnter}
+        onDragOver={handleFileDragOver}
+        onDragLeave={handleFileDragLeave}
+        onDrop={handleFileDrop}
+      >
+        {fileDragActive ? (
+          <div className="agentkit-file-drop-overlay" role="status">
+            {labels.dropFilesToAttach}
+          </div>
+        ) : null}
+        {hasConversation && (title || toolbar) ? (
+          <AgentKitSurfaceBoundary surface="header" resetKey={threadId}>
+            <AgentKitRegionSlot slot={Header} threadId={threadId}>
+              <header className="agentkit-chat-header">
+                <div className="agentkit-chat-title">{title}</div>
+                <AgentKitRegionSlot slot={Toolbar} threadId={threadId}>
+                  <div className="agentkit-chat-toolbar">{toolbar}</div>
+                </AgentKitRegionSlot>
+              </header>
+            </AgentKitRegionSlot>
+          </AgentKitSurfaceBoundary>
+        ) : null}
+        <div
+          ref={transcriptRef}
+          className="agentkit-transcript"
+          aria-live="off"
+          data-scrollbar-visible={transcriptScrollbarVisible}
+          onKeyDown={handleTranscriptKeyDown}
+          onPointerDown={handleTranscriptPointerDown}
+          onScroll={handleTranscriptScroll}
+          onTouchMove={revealTranscriptScrollbar}
+          onWheel={revealTranscriptScrollbar}
+        >
+          <div
+            ref={transcriptContentRef}
+            className="agentkit-transcript-content"
+          >
+            <AgentKitRegionSlot slot={Transcript} threadId={threadId}>
+              {!hasConversation && EmptyState ? (
+                <EmptyState threadId={threadId} />
+              ) : null}
+              {transcriptItems}
+              {approvalEntries.map(([approvalId, request]) => (
+                <AgentKitSurfaceBoundary
+                  key={`${threadId}:${approvalId}`}
+                  surface="approval"
+                  resetKey={`${approvalId}:${thread.events.length}`}
+                >
+                  {Approval ? (
+                    <Approval
+                      value={request}
+                      threadId={threadId}
+                      runId={thread.approvalRunIds[approvalId] ?? ""}
+                    />
+                  ) : (
+                    <AgentApprovalPrompt
+                      request={request}
+                      runId={thread.approvalRunIds[approvalId] ?? ""}
+                    />
+                  )}
+                </AgentKitSurfaceBoundary>
+              ))}
+              {connectionRequestEntries.map(([requestId, request]) => (
+                <AgentKitSurfaceBoundary
+                  key={`${threadId}:${requestId}`}
+                  surface="connection-request"
+                  resetKey={`${requestId}:${request.status}`}
+                >
+                  {ConnectionRequest ? (
+                    <ConnectionRequest
+                      value={request}
+                      threadId={threadId}
+                      runId={thread.connectionRequestRunIds[requestId] ?? ""}
+                    />
+                  ) : (
+                    <AgentConnectionRequestCard
+                      request={request}
+                      runId={thread.connectionRequestRunIds[requestId] ?? ""}
+                    />
+                  )}
+                </AgentKitSurfaceBoundary>
+              ))}
+              {connectionError ? (
+                <AgentKitSurfaceBoundary
+                  surface="connection-error"
+                  resetKey={`${threadId}:${connectionError.code}`}
+                >
+                  <ErrorState
+                    error={connectionError}
+                    threadId={threadId}
+                    recover={recovery.execute}
+                    recovering={recovery.pending}
+                    recoveryError={recovery.error}
+                  />
+                </AgentKitSurfaceBoundary>
+              ) : null}
+            </AgentKitRegionSlot>
+          </div>
+          {transcriptAwayFromBottom ? (
+            <div className="agentkit-scroll-to-bottom-control">
+              <IconButton
+                label={labels.scrollToBottom}
+                icon={<IconArrowDown aria-hidden="true" />}
+                size="compact"
+                onPress={returnTranscriptToBottom}
+              />
+            </div>
+          ) : null}
+        </div>
+        {composer ? (
+          <footer className="agentkit-chat-footer">
+            <AgentKitSurfaceBoundary surface="composer" resetKey={threadId}>
+              <AgentKitRegionSlot slot={Footer} threadId={threadId}>
+                {slots.composer ? (
+                  <Composer threadId={threadId} />
+                ) : (
+                  <AgentKitComposer {...composerProps} threadId={threadId} />
+                )}
+              </AgentKitRegionSlot>
+            </AgentKitSurfaceBoundary>
+          </footer>
+        ) : null}
+      </section>
+    </AgentMessageEditContext.Provider>
+  );
+}