@agents24/chat-react 0.5.29 → 0.5.31

package/dist/ui/tool-sessions.d.ts

@@ -23,7 +23,13 @@ export type AgentChatToolSlotContext = {
     resourceTargets: readonly ChatComputerResourceTarget[];
     openResource: (target: ChatComputerResourceTarget) => void;
 };
+export type AgentChatActivityIconContext = {
+    label: string;
+    kind: "tool" | "group" | "planning" | "node";
+    part?: ChatToolPart | ChatNodeActivityPart;
+};
 export type AgentChatToolSlots = {
+    renderActivityIcon?: (context: AgentChatActivityIconContext) => React.ReactNode;
     onExpandedChange?: (open: boolean, part?: ChatToolPart) => void;
     onToolSelect?: (part: ChatToolPart) => void;
     onResourceAction?: (target: ChatComputerResourceTarget, part: ChatToolPart) => void;
@@ -37,15 +43,17 @@ export declare function isAgentChatSubagent(part: ChatToolPart): boolean;
 export declare function isAgentChatToolRunning(part: ChatToolPart): boolean;
 export declare function latestRunningAgentChatToolId(parts: readonly ChatToolPart[]): string | null;
 export declare function partitionAgentChatToolTimeline(parts: readonly ChatPart[], toolViewMode?: AgentChatToolViewMode): AgentChatToolTimelineSegment[];
-export declare function AgentChatActivityRow({ label, modelTurnId, onSelect, }: {
+export declare function AgentChatActivityRow({ label, modelTurnId, renderActivityIcon, onSelect, }: {
     label: string;
     modelTurnId?: string;
+    renderActivityIcon?: AgentChatToolSlots["renderActivityIcon"];
     onSelect?: () => void;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function AgentChatModelTurnRow({ part }: {
     part: ChatModelTurnPart;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function AgentChatNodeActivityRow({ onSelect, part, }: {
+export declare function AgentChatNodeActivityRow({ renderActivityIcon, onSelect, part, }: {
+    renderActivityIcon?: AgentChatToolSlots["renderActivityIcon"];
     onSelect?: (part: ChatNodeActivityPart) => void;
     part: ChatNodeActivityPart;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/use-agent-chat-composer.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import type { AgentChatInputContract } from "../runtime/input-contract";
+import { type AgentChatComposerFile } from "./composer-attachments";
+export type AgentChatComposerOptions = {
+    inputContract?: AgentChatInputContract | null;
+    recordingEnabled?: boolean;
+    textareaRef?: React.RefObject<HTMLTextAreaElement | null>;
+    disabled?: boolean;
+    isRunning?: boolean;
+    isCancelling?: boolean;
+    forceExpanded?: boolean;
+    focusKey?: string | null;
+    restoredDraft?: {
+        revision: number;
+        text: string;
+        files: AgentChatComposerFile[];
+    } | null;
+    onSubmit(text: string, files: AgentChatComposerFile[]): void | Promise<void>;
+    /** Observe the shared recorder. Do not stop its tracks or start another capture. */
+    onRecordingStreamChange?: (stream: MediaStream | null) => void;
+};
+export declare function useAgentChatComposer(options: AgentChatComposerOptions): {
+    text: string;
+    setText: (value: string) => void;
+    files: AgentChatComposerFile[];
+    addFiles: (selected: readonly File[]) => void;
+    removeFile: (id: string) => void;
+    textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+    submit: () => Promise<void>;
+    canSubmit: boolean;
+    isSubmitting: boolean;
+    attachmentError: string | null;
+    attachmentMimeTypes: string[];
+    validationError: string | null;
+    recorder: {
+        error: string | null;
+        isRecording: boolean;
+        start: () => Promise<void>;
+        stop: () => void;
+    };
+    recordingAllowed: boolean;
+    fileAccept: string;
+    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    allowAttachments: boolean;
+    isExpanded: boolean;
+    action: "stop" | "send";
+};

package/dist/ui/use-audio-recorder.d.ts

@@ -1,8 +1,10 @@
-export declare function useAudioRecorder(onRecorded: (file: File) => void, options?: {
+export type AudioRecorderOptions = {
+    /** Subscribe to the recorder-owned stream; consumers must not stop its tracks. */
     onStreamChange?: (stream: MediaStream | null) => void;
-}): {
+};
+export declare function useAudioRecorder(onRecorded: (file: File) => void, options?: AudioRecorderOptions): {
     error: string | null;
     isRecording: boolean;
     start: () => Promise<void>;
-    stop: () => void | undefined;
+    stop: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.29",
+  "version": "0.5.31",
   "description": "Accessible web UI and complete default layout for Agents24 chat applications.",
   "license": "MIT",
   "repository": {
@@ -36,7 +36,10 @@
     },
     "./scaffold/styles.css": "./scaffold/styles.css",
     "./styles.css": "./dist/styles.css",
-    "./compatibility.json": "./compatibility.json"
+    "./compatibility.json": "./compatibility.json",
+    "./scaffold/host-styles.css": "./scaffold/host-styles.css",
+    "./scaffold/inherit.css": "./scaffold/inherit.css",
+    "./registry/agents24-chat.json": "./dist/registry/agents24-chat.json"
   },
   "files": [
     "dist",
@@ -52,15 +55,17 @@
   "scripts": {
     "sync:contract": "node scripts/sync-contract.mjs",
     "check:contract": "node scripts/sync-contract.mjs --check",
-    "build": "pnpm run sync:contract && tsup && tsc -p tsconfig.build.json && tsc -p tsconfig.scaffold-build.json",
+    "build": "pnpm run sync:contract && tsup && tsc -p tsconfig.build.json && tsc -p tsconfig.scaffold-build.json && pnpm run build:registry",
     "test": "tsx --test tests/*.test.ts",
     "check:boundaries": "node tests/check-boundaries.mjs",
-    "prepack": "pnpm run build && pnpm run check:boundaries"
+    "prepack": "pnpm run build && pnpm run check:boundaries",
+    "build:registry": "node scripts/generate-registry.mjs",
+    "check:registry": "node scripts/generate-registry.mjs --check"
   },
   "dependencies": {
     "@untitledui/file-icons": "0.0.9",
-    "@agents24/client": "0.2.14",
-    "@agents24/react": "0.2.18",
+    "@agents24/client": "0.2.15",
+    "@agents24/react": "0.2.19",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/merriweather": "^5.3.0",

package/scaffold/host-styles.css

@@ -0,0 +1,3 @@
+@import "@agents24/chat-react/styles.css";
+@import "./src/host.css";
+@import "./src/chat.css";

package/scaffold/inherit.css

@@ -0,0 +1,4 @@
+@import "@agents24/chat-react/styles.css";
+@import "tw-animate-css";
+@import "./src/chat.css";
+@source "./src/**/*.{ts,tsx}";

package/scaffold/manifest.json

@@ -14,8 +14,8 @@
     "@shadcn/react": "^0.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "0.542.0",
-    "radix-ui": "1.4.3",
+    "lucide-react": ">=0.542.0 <2.0.0",
+    "radix-ui": ">=1.4.3 <2.0.0",
     "streamdown": "^2.5.0",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"

package/scaffold/src/app.tsx

@@ -15,6 +15,8 @@ import {
 } from "@agents24/react"
 import * as React from "react"
 
+import type { Agents24ChatComposerProps } from "./components/chat/chat-composer"
+
 import { ChatShell } from "./components/chat/chat-shell"
 import { GUEST_CHAT_IDENTITY, type Agents24ChatIdentity } from "./identity"
 
@@ -35,7 +37,10 @@ export type Agents24ChatAppProps = {
   sidebar?: React.ReactNode
 }
 
+export type Agents24ChatComposerSlotProps = Agents24ChatComposerProps
+
 export type Agents24ChatScaffoldComponents = {
+  Composer?: React.ComponentType<Agents24ChatComposerSlotProps>
   Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
 }
 

package/scaffold/src/chat.css

@@ -50,10 +50,20 @@
   grid-template-areas: "textarea textarea textarea" "attach spacer submit";
 }
 
-[data-agents24-theme-root] .agents24-composer-grid:not([data-expanded]) {
+[data-agents24-theme-root] .agents24-composer-grid:not([data-expanded]):not([data-attachments]) {
   border-radius: var(--a24-composer-single-row-radius);
 }
 
+/* Draft attachments stay within the same surface and precede its input rows. */
+.agents24-composer-grid[data-attachments] {
+  grid-template-areas: "attachments attachments attachments" "attach textarea submit";
+  border-radius: 1.125rem;
+}
+.agents24-composer-grid[data-attachments][data-expanded] {
+  grid-template-areas: "attachments attachments attachments" "textarea textarea textarea" "attach spacer submit";
+}
+.agents24-composer-attachments { grid-area: attachments; }
+
 .agents24-composer-attach { grid-area: attach; }
 .agents24-composer-textarea { grid-area: textarea; }
 .agents24-composer-actions { grid-area: submit; }
@@ -64,3 +74,27 @@
   display: -webkit-box;
   overflow: hidden;
 }
+
+/* Host theme mode changes no document tokens or appearance. */
+[data-agents24-theme-root][data-agents24-theme="inherit"] {
+  --a24-composer-single-row-radius: var(--radius-xl, var(--radius, .75rem));
+  font-family: inherit;
+}
+[data-agents24-theme-root][data-agents24-theme="inherit"] :focus-visible {
+  outline: 2px solid var(--ring, currentColor) !important;
+  outline-offset: 2px;
+}
+[data-agents24-theme-root][data-agents24-theme="inherit"] .a24-context-status__popover {
+  background: var(--popover, var(--background));
+  color: var(--popover-foreground, var(--foreground));
+}
+
+[data-agents24-theme-root][data-agents24-theme="inherit"] [data-slot="button"] {
+  border-radius: var(--radius);
+}
+[data-agents24-theme-root][data-agents24-theme="inherit"] .a24-context-status__popover {
+  border-color: var(--border);
+}
+[data-agents24-theme-root][data-agents24-theme="inherit"] .a24-context-status__popover > span:not(.a24-context-status__sr-only) {
+  color: var(--muted-foreground);
+}

package/scaffold/src/components/chat/chat-composer.tsx

@@ -3,14 +3,10 @@ import * as React from "react"
 import {
   AgentChatContextStatus,
   ChatAttachmentRows,
-  chatComposerAction,
-  createAgentChatComposerFile,
-  revokeAgentChatComposerFiles,
-  useAudioRecorder,
-  useChatComposerFocus,
+  useAgentChatComposer,
   type AgentChatComposerFile,
 } from "@agents24/chat-react/ui"
-import { attachmentFileAccept, inputMimeTypes, validateAgentChatSubmission, type AgentChatInputContract } from "@agents24/chat-react/runtime"
+import { type AgentChatInputContract } from "@agents24/chat-react/runtime"
 import type { ContextWindow } from "@agents24/client/protocol"
 
 import { Button } from "../ui/button"
@@ -23,7 +19,9 @@ import { Textarea } from "../ui/textarea"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
 import { cn } from "../../lib/utils"
 
-type ChatComposerProps = {
+export type Agents24ChatComposerProps = {
+  queue?: React.ReactNode
+  onRecordingStreamChange?: (stream: MediaStream | null) => void
   inputContract: AgentChatInputContract
   disabled?: boolean
   contextWindow?: ContextWindow | null
@@ -45,6 +43,8 @@ type ChatComposerProps = {
 
 export function ChatComposer({
   inputContract,
+  queue,
+  onRecordingStreamChange,
   disabled,
   contextWindow,
   focusKey,
@@ -61,45 +61,14 @@ export function ChatComposer({
   onSubmit,
   restoredDraft,
   utilityRow = "inline",
-}: ChatComposerProps) {
-  const [text, setText] = React.useState("")
-  const [files, setFiles] = React.useState<AgentChatComposerFile[]>([])
-  const [attachmentError, setAttachmentError] = React.useState<string | null>(null)
+}: Agents24ChatComposerProps) {
   const inputRef = React.useRef<HTMLInputElement>(null)
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
-  const filesRef = React.useRef<AgentChatComposerFile[]>([])
-  const inFlightFilesRef = React.useRef<AgentChatComposerFile[]>([])
-  const submittingRef = React.useRef(false)
-  const draftRevisionRef = React.useRef(0)
-  const attachmentMimeTypes = inputMimeTypes(inputContract)
-  const allowAttachments = attachmentMimeTypes.length > 0
-  const recordingAllowed = inputContract.modalities.audio.recording_enabled
-  React.useEffect(() => {
-    filesRef.current = files
-  }, [files])
-  React.useEffect(() => () => {
-    revokeAgentChatComposerFiles(filesRef.current)
-    revokeAgentChatComposerFiles(inFlightFilesRef.current)
-  }, [])
-  const focusComposer = useChatComposerFocus({ textareaRef, disabled: Boolean(disabled), focusKey, restoredDraft,
-    onRestore: (draft) => {
-    draftRevisionRef.current += 1
-    revokeAgentChatComposerFiles(filesRef.current)
-    setText(draft.text)
-    setFiles(draft.files)
-  } })
-  const addRecording = React.useCallback((file: File) => {
-    draftRevisionRef.current += 1
-    setFiles((current) => [...current, createAgentChatComposerFile(file)])
-  }, [])
-  const recorder = useAudioRecorder(addRecording)
-  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62
-  const validationError = validateAgentChatSubmission(
-    inputContract,
-    text,
-    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType })),
-  )
-  const action = chatComposerAction({ hasDraft: Boolean(text.trim() || files.length), isRunning, isCancelling })
+  const { text, setText, files, removeFile, addFiles, textareaRef, submit,
+    attachmentError, attachmentMimeTypes, allowAttachments, recordingAllowed,
+    recorder, isExpanded, validationError, action, canSubmit } = useAgentChatComposer({
+      inputContract, disabled, focusKey, forceExpanded, isCancelling, isRunning,
+      onSubmit, restoredDraft, onRecordingStreamChange,
+    })
 
   const selectedAgent = agents.find((item) => item.id === agentId)
   const selectedModel = models.find((item) => item.id === modelId)
@@ -159,65 +128,33 @@ export function ChatComposer({
   const hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0
   const showUtilityRow = utilityRow === "below"
 
-  const submit = async () => {
-    if (disabled || isCancelling || submittingRef.current || validationError) return
-    const value = text
-    const selectedFiles = files
-    const clearedRevision = draftRevisionRef.current + 1
-    draftRevisionRef.current = clearedRevision
-    submittingRef.current = true
-    inFlightFilesRef.current = selectedFiles
-    setText("")
-    setFiles([])
-    focusComposer()
-    try {
-      await onSubmit(value, selectedFiles)
-      revokeAgentChatComposerFiles(selectedFiles)
-      inFlightFilesRef.current = []
-    } catch {
-      if (draftRevisionRef.current === clearedRevision) {
-        draftRevisionRef.current += 1
-        setText(value)
-        setFiles(selectedFiles)
-        inFlightFilesRef.current = []
-      } else {
-        revokeAgentChatComposerFiles(selectedFiles)
-        inFlightFilesRef.current = []
-      }
-    } finally {
-      submittingRef.current = false
-    }
-  }
-
   return (
     <div
       className="relative z-10 w-full pb-[max(1rem,env(safe-area-inset-bottom))]"
       data-agents24-chat-composer=""
     >
-      {allowAttachments && files.length > 0 && (
-        <div className="mb-2 min-w-0">
-          <ChatAttachmentRows
-            attachments={files}
-            onRemove={(attachment) => {
-              if (!attachment.id) return
-              draftRevisionRef.current += 1
-              setFiles((current) => {
-                const removed = current.find((file) => file.id === attachment.id)
-                if (removed) revokeAgentChatComposerFiles([removed])
-                return current.filter((file) => file.id !== attachment.id)
-              })
-            }}
-          />
-        </div>
-      )}
+      {queue}
       {attachmentError || recorder.error ? <p className="mb-2 text-xs text-destructive" role="alert">{attachmentError || recorder.error}</p> : null}
       <div
         data-expanded={isExpanded || undefined}
+        data-attachments={files.length > 0 || undefined}
         className={cn(
           "agents24-composer-grid grid min-w-0 items-center gap-2 rounded-xl border bg-background shadow-sm",
           isExpanded ? "p-2" : "p-1.5",
         )}
       >
+        {allowAttachments && files.length > 0 && (
+          <div className="agents24-composer-attachments min-w-0">
+            <ChatAttachmentRows
+              layout="composer"
+              attachments={files}
+              onRemove={(attachment) => {
+                if (!attachment.id) return
+                removeFile(attachment.id)
+              }}
+            />
+          </div>
+        )}
         {allowAttachments ? (
           <>
             <input
@@ -225,11 +162,9 @@ export function ChatComposer({
               className="sr-only"
               type="file"
               multiple
-              accept={attachmentFileAccept(attachmentMimeTypes)}
+              accept={attachmentMimeTypes.join(",")}
               onChange={(event) => {
-                const selected = Array.from(event.target.files ?? [])
-                setFiles((current) => [...current, ...selected.map(createAgentChatComposerFile)])
-                setAttachmentError(null)
+                addFiles(Array.from(event.target.files ?? []))
                 event.currentTarget.value = ""
               }}
             />
@@ -252,7 +187,6 @@ export function ChatComposer({
             isExpanded ? "py-2" : "h-9 py-2",
           )}
           onChange={(event) => {
-            draftRevisionRef.current += 1
             setText(event.target.value)
           }}
           onKeyDown={(event) => {
@@ -291,7 +225,7 @@ export function ChatComposer({
                 <TooltipContent>{validationError}</TooltipContent>
               </Tooltip>
             ) : (
-              <Button size="icon" aria-label={isRunning ? "Queue message" : "Send message"} disabled={disabled} onClick={() => void submit()}><ArrowUp /></Button>
+              <Button size="icon" aria-label={isRunning ? "Queue message" : "Send message"} disabled={!canSubmit} onClick={() => void submit()}><ArrowUp /></Button>
             )}
         </div>
       </div>

package/scaffold/src/components/chat/chat-shell.tsx

@@ -11,6 +11,7 @@ import type { Agents24ChatIdentity } from "../../identity"
 
 import { ChatComposer } from "./chat-composer"
 import { ChatMessage } from "./chat-message"
+import { SubagentTasks } from "./subagent-tasks"
 import { ThemeMenu } from "./theme-menu"
 import { ThreadSidebar } from "./thread-sidebar"
 import { TurnOutline } from "./turn-outline"
@@ -92,6 +93,7 @@ export function ChatShell({
   runtime: AgentChatRuntime
   sidebar?: React.ReactNode
 }) {
+  const Composer = components?.Composer || ChatComposer
   const { controller } = runtime
   const isUploading = controller.runState === "uploading"
   const isRunning =
@@ -167,6 +169,7 @@ export function ChatShell({
           data-agents24-chat-transcript=""
         >
           <OperationErrorNotice runtime={runtime} />
+          <SubagentTasks threadId={controller.activeThreadId} />
           <LatestThreadScroller.Provider autoScroll defaultScrollPosition="last-anchor" scrollPreviousItemPeek={64}>
             {!isEmptyState && (
                 <LatestThreadScroller.Root className="relative min-h-0 flex-1">
@@ -239,11 +242,10 @@ export function ChatShell({
                     <LatestThreadScroller.Button className="!relative !inset-auto !translate-x-0 rtl:!translate-x-0" />
                   </div>}
                   <div className="pointer-events-auto mx-auto w-full max-w-3xl px-4 sm:px-6">
-                    <AgentChatQueue pending={controller.pendingMessages} queue={controller.messageQueue}
-                      canSteer={controller.runState === "streaming"}
-                      onSteer={controller.steerPendingMessage} onRemove={controller.removePendingMessage}
-                      onEdit={retractForEdit} onResume={controller.resumeQueue} />
-                    <ChatComposer
+                    <Composer
+                      queue={<AgentChatQueue pending={controller.pendingMessages} queue={controller.messageQueue}
+                      onRemove={controller.removePendingMessage}
+                      onEdit={retractForEdit} onResume={controller.resumeQueue} />}
                       restoredDraft={restoredDraft}
                       inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
                       contextWindow={runtime.contextWindow}

package/scaffold/src/components/chat/external-link-dialog.tsx

@@ -14,9 +14,10 @@ import {
 export function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }: LinkSafetyModalProps) {
   const [copied, setCopied] = React.useState(false)
 
-  React.useEffect(() => {
-    if (!isOpen) setCopied(false)
-  }, [isOpen])
+  const close = () => {
+    setCopied(false)
+    onClose()
+  }
 
   const copyUrl = async () => {
     await navigator.clipboard.writeText(url)
@@ -25,11 +26,11 @@ export function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }: LinkSafe
 
   const openUrl = () => {
     onConfirm()
-    onClose()
+    close()
   }
 
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) onClose() }}>
+    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) close() }}>
       <DialogContent className="max-h-[calc(100dvh-2rem)] min-w-0 overflow-hidden sm:max-w-md">
         <DialogHeader>
           <DialogTitle>Open external link?</DialogTitle>

package/scaffold/src/components/chat/identity-control.tsx

@@ -21,7 +21,6 @@ function identityLabel(identity: Agents24ChatIdentity): string {
 }
 
 function IdentityAvatar({ identity }: { identity: Agents24ChatIdentity }) {
-  const label = identityLabel(identity)
   if (identity.avatarUrl) {
     return <img alt="" className="size-6 rounded-full object-cover" src={identity.avatarUrl} />
   }

package/scaffold/src/components/chat/subagent-tasks.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { useAgentClient, partsFromResponseBlocks } from "@agents24/react"
+import { AgentResponseTimeline } from "@agents24/chat-react/ui"
+import { useDelegationTasks, type DelegationHistory, type DelegationTask } from "@agents24/chat-react/runtime"
+import { Button } from "../ui/button"
+
+export function SubagentTasks({ threadId }: { threadId: string | null }) {
+  const client = useAgentClient()
+  const source = React.useMemo(() => ({ events: (input: { threadId: string; after: number; signal: AbortSignal }) =>
+    client.threads.delegations.events(input) }), [client])
+  const { tasks, error, refresh } = useDelegationTasks({ threadId, source })
+  const [selection, setSelection] = React.useState<{ threadId: string | null; handle: string | null }>({ threadId: null, handle: null })
+  const selected = selection.threadId === threadId ? selection.handle : null
+  if (!threadId || (!tasks.length && !error)) return null
+  return <section aria-label="Subagent tasks" className="mx-auto w-full max-w-3xl px-4 py-2 text-sm">
+    <details>
+      <summary className="cursor-pointer font-medium">Tasks ({tasks.length})</summary>
+      {error ? <p role="alert">Task updates are unavailable. Retrying…</p> : null}
+      <ul className="max-h-56 overflow-y-auto">
+        {tasks.map(task => <li key={task.handle} style={{ paddingInlineStart: Math.max(0, task.depth - 1) * 12 }}>
+          <button type="button" className="flex w-full items-center justify-between gap-3 rounded-md px-2 py-2 text-start hover:bg-muted"
+            onClick={() => setSelection({ threadId, handle: selected === task.handle ? null : task.handle })} aria-expanded={selected === task.handle}>
+            <span className="min-w-0 truncate">{task.name}{task.background ? " · Background" : ""}</span>
+            <span className="shrink-0 text-xs text-muted-foreground">{task.status.replaceAll("_", " ")}</span>
+          </button>
+        </li>)}
+      </ul>
+      {tasks.filter(task => task.handle === selected).map(task =>
+        <TaskConversation key={`${threadId}:${task.handle}`} threadId={threadId} task={task} onChanged={refresh} />)}
+    </details>
+  </section>
+}
+
+function TaskConversation({ threadId, task, onChanged }: {
+  threadId: string; task: DelegationTask; onChanged: () => void
+}) {
+  const client = useAgentClient()
+  const [history, setHistory] = React.useState<DelegationHistory | null>(null)
+  const [earlier, setEarlier] = React.useState<DelegationHistory["turns"]>([])
+  const historyInitialized = React.useRef(false)
+  const [before, setBefore] = React.useState<number | null>(null)
+  const [error, setError] = React.useState<string | null>(null)
+  const [busy, setBusy] = React.useState(false)
+  const operation = React.useRef<{ action: "interrupt" | "cancel"; id: string } | null>(null)
+  React.useEffect(() => {
+    const controller = new AbortController()
+    let timer: ReturnType<typeof setTimeout>
+    const refresh = async () => {
+      try {
+        const page = await client.threads.delegations.history({ threadId, handle: task.handle, signal: controller.signal })
+        if (controller.signal.aborted) return
+        setHistory(page)
+        if (!historyInitialized.current) {
+          historyInitialized.current = true
+          setBefore(page.paging.next_before_turn_index)
+        }
+      } catch {
+        if (!controller.signal.aborted) setError("Task history could not be loaded.")
+      } finally {
+        if (!controller.signal.aborted) timer = setTimeout(refresh, 2000)
+      }
+    }
+    void refresh()
+    return () => { controller.abort(); clearTimeout(timer) }
+  }, [client, threadId, task.handle])
+  const loadEarlier = async () => {
+    if (before === null) return
+    setBusy(true)
+    try {
+      const page = await client.threads.delegations.history({ threadId, handle: task.handle, before })
+      setEarlier(current => [...page.turns, ...current])
+      setBefore(page.paging.next_before_turn_index)
+    } catch { setError("Earlier task history could not be loaded.") }
+    finally { setBusy(false) }
+  }
+  const act = async (action: "interrupt" | "cancel") => {
+    setBusy(true); setError(null)
+    if (operation.current?.action !== action) operation.current = { action, id: crypto.randomUUID() }
+    try {
+      await client.threads.delegations.act({ threadId, handle: task.handle,
+        action: { action, operation_id: operation.current.id } })
+      operation.current = null
+      onChanged()
+    } catch { setError("The task action could not be completed. Try again.") }
+    finally { setBusy(false) }
+  }
+  const turns = Array.from(new Map([...earlier, ...(history?.turns || [])].map(turn => [turn.id, turn])).values())
+    .sort((a, b) => a.turn_index - b.turn_index)
+  return <div className="space-y-3 rounded-md bg-muted/30 p-3">
+    <h3 className="font-medium">{task.name}</h3>
+    {error ? <p role="alert">{error}</p> : null}
+    <div className="flex flex-wrap gap-2">
+      {task.capabilities.interrupt ? <Button variant="secondary" size="sm" disabled={busy} onClick={() => void act("interrupt")}>Interrupt</Button> : null}
+      {task.capabilities.cancel ? <Button variant="secondary" size="sm" disabled={busy} onClick={() => void act("cancel")}>Cancel task</Button> : null}
+      {before !== null ? <Button variant="ghost" size="sm" disabled={busy} onClick={() => void loadEarlier()}>Earlier exchanges</Button> : null}
+    </div>
+    <div className="max-h-[55dvh] space-y-4 overflow-y-auto break-words">
+      {turns.map(turn => <article key={turn.id} className="space-y-2">
+        {turn.assignment_instruction ? <p className="whitespace-pre-wrap text-muted-foreground">{turn.assignment_instruction}</p> : null}
+        {turn.user_input_text ? <p className="whitespace-pre-wrap">{turn.user_input_text}</p> : null}
+        {turn.exchanges?.map(exchange => <div key={exchange.id} className="whitespace-pre-wrap break-words text-sm">
+          <p className="text-xs font-medium">{exchange.sender === "parent" ? "Parent Agent" : "Subagent update"}</p>
+          {exchange.text}
+        </div>)}
+        <AgentResponseTimeline message={{ id: turn.id, role: "assistant", createdAt: turn.created_at, content: turn.assistant_output_text || "", parts: partsFromResponseBlocks(turn.response_blocks) }} />
+      </article>)}
+    </div>
+  </div>
+}

package/scaffold/src/components/chat/theme-menu.tsx

@@ -11,7 +11,7 @@ const options = [
 ]
 
 export function ThemeMenu() {
-  const { appearance, setAppearance } = useTheme()
+  const { appearance, setAppearance, inherited } = useTheme()
   const [open, setOpen] = React.useState(false)
   const rootRef = React.useRef<HTMLDivElement>(null)
   const firstItemRef = React.useRef<HTMLButtonElement>(null)
@@ -35,6 +35,8 @@ export function ThemeMenu() {
     }
   }, [open])
 
+  if (inherited) return null
+
   const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark"
   return (
     <div ref={rootRef} className="relative">