create-agents24-app 0.2.30 → 0.2.31

package/dist/scaffold/host-styles.css

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

package/dist/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/dist/scaffold/src/app.tsx

@@ -16,6 +16,7 @@ import {
 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"
 
@@ -36,9 +37,11 @@ export type Agents24ChatAppProps = {
   sidebar?: React.ReactNode
 }
 
+export type Agents24ChatComposerSlotProps = Agents24ChatComposerProps
+
 export type Agents24ChatScaffoldComponents = {
+  Composer?: React.ComponentType<Agents24ChatComposerSlotProps>
   Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
-  Composer?: React.ComponentType<Agents24ChatComposerProps>
 }
 
 export type ChatHitlResponse = HitlResponse

package/dist/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; }

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

@@ -20,6 +20,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
 import { cn } from "../../lib/utils"
 
 export type Agents24ChatComposerProps = {
+  queue?: React.ReactNode
+  onRecordingStreamChange?: (stream: MediaStream | null) => void
   inputContract: AgentChatInputContract
   disabled?: boolean
   contextWindow?: ContextWindow | null
@@ -41,6 +43,8 @@ export type Agents24ChatComposerProps = {
 
 export function ChatComposer({
   inputContract,
+  queue,
+  onRecordingStreamChange,
   disabled,
   contextWindow,
   focusKey,
@@ -59,12 +63,12 @@ export function ChatComposer({
   utilityRow = "inline",
 }: Agents24ChatComposerProps) {
   const inputRef = React.useRef<HTMLInputElement>(null)
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
-  const composer = useAgentChatComposer({ inputContract, disabled, isRunning, isCancelling,
-    focusKey, restoredDraft, textareaRef, onSubmit: ({ text, files }) => onSubmit(text, files) })
-  const { text, files, setText, validationError, attachmentError, recorder, recordingAllowed,
-    allowAttachments, action, submit } = composer
-  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62
+  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)
@@ -129,22 +133,28 @@ export function ChatComposer({
       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) composer.removeFile(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
@@ -152,9 +162,9 @@ export function ChatComposer({
               className="sr-only"
               type="file"
               multiple
-              accept={composer.fileAccept}
+              accept={attachmentMimeTypes.join(",")}
               onChange={(event) => {
-                composer.addFiles(Array.from(event.target.files ?? []))
+                addFiles(Array.from(event.target.files ?? []))
                 event.currentTarget.value = ""
               }}
             />
@@ -176,8 +186,15 @@ export function ChatComposer({
             "agents24-composer-textarea max-h-56 min-h-9 field-sizing-content resize-none overflow-y-auto border-0 bg-transparent px-2 shadow-none focus-visible:ring-0 dark:bg-transparent",
             isExpanded ? "py-2" : "h-9 py-2",
           )}
-          onChange={(event) => setText(event.target.value)}
-          onKeyDown={composer.onKeyDown}
+          onChange={(event) => {
+            setText(event.target.value)
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+              event.preventDefault()
+              void submit()
+            }
+          }}
         />
         <div className="agents24-composer-actions flex items-center gap-1">
           {utilityRow === "inline" ? <AgentChatContextStatus contextWindow={contextWindow} /> : null}
@@ -208,7 +225,7 @@ export function ChatComposer({
                 <TooltipContent>{validationError}</TooltipContent>
               </Tooltip>
             ) : (
-              <Button size="icon" aria-label={isRunning ? "Queue message" : "Send message"} disabled={disabled || !composer.canSubmit} 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/dist/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"
@@ -168,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">
@@ -240,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} />
                     <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/dist/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/dist/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/dist/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/dist/scaffold/src/components/theme-provider.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 
 export type Agents24ChatAppearance = "system" | "light" | "dark"
-export type Agents24ChatTheme = "soft" | "sharp" | "inherit"
+export type Agents24ChatTheme = "soft" | "sharp"
 
 export type Agents24ChatAppearanceController = {
   appearance: Agents24ChatAppearance
@@ -9,13 +9,28 @@ export type Agents24ChatAppearanceController = {
 }
 
 type ThemeContextValue = {
-  appearance: Agents24ChatAppearance
   inherited: boolean
+  appearance: Agents24ChatAppearance
   portalContainer: HTMLElement | null
   setAppearance: (appearance: Agents24ChatAppearance) => void
 }
 
 const ThemeContext = React.createContext<ThemeContextValue | null>(null)
+const appearanceEvent = "agents24-chat-appearance-change"
+const subscribeAppearance = (notify: () => void) => {
+  window.addEventListener("storage", notify)
+  window.addEventListener(appearanceEvent, notify)
+  return () => {
+    window.removeEventListener("storage", notify)
+    window.removeEventListener(appearanceEvent, notify)
+  }
+}
+const subscribeDarkMode = (notify: () => void) => {
+  const media = window.matchMedia?.("(prefers-color-scheme: dark)")
+  media?.addEventListener("change", notify)
+  return () => media?.removeEventListener("change", notify)
+}
+const getDarkMode = () => window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false
 const storageKey = "agents24-chat-appearance"
 
 function storedAppearance(): Agents24ChatAppearance {
@@ -31,48 +46,36 @@ export function ThemeProvider({
   children,
   controller,
   theme = "soft",
+  mode = "isolated",
 }: {
   children: React.ReactNode
   controller?: Agents24ChatAppearanceController
   theme?: Agents24ChatTheme
+  mode?: "isolated" | "inherit"
 }) {
-  const [internalAppearance, setInternalAppearance] = React.useState<Agents24ChatAppearance>("system")
-  const [resolvedAppearance, setResolvedAppearance] = React.useState<"light" | "dark">("light")
-  const [mounted, setMounted] = React.useState(false)
+  const [sessionAppearance, setSessionAppearance] = React.useState<Agents24ChatAppearance | null>(null)
+  const stored = React.useSyncExternalStore(subscribeAppearance, storedAppearance, () => "system" as const)
+  const systemDark = React.useSyncExternalStore(subscribeDarkMode, getDarkMode, () => false)
   const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null)
-  const appearance = controller?.appearance ?? internalAppearance
-
-  React.useEffect(() => {
-    if (theme !== "inherit" && !controller) setInternalAppearance(storedAppearance())
-    setMounted(true)
-  }, [controller, theme])
-
-  React.useEffect(() => {
-    if (theme === "inherit" || !mounted || typeof window === "undefined" || typeof window.matchMedia !== "function") return
-    const media = window.matchMedia("(prefers-color-scheme: dark)")
-    const apply = () => setResolvedAppearance(
-      appearance === "system" ? media.matches ? "dark" : "light" : appearance,
-    )
-    apply()
-    media.addEventListener("change", apply)
-    return () => media.removeEventListener("change", apply)
-  }, [appearance, mounted, theme])
+  const appearance = controller?.appearance ?? sessionAppearance ?? stored
+  const resolvedAppearance = appearance === "system" ? (systemDark ? "dark" : "light") : appearance
 
   const change = React.useCallback((next: Agents24ChatAppearance) => {
-    if (theme === "inherit") return
     if (controller) {
       controller.setAppearance(next)
       return
     }
+    setSessionAppearance(next)
     try { window.localStorage.setItem(storageKey, next) } catch { /* storage is optional */ }
-    setInternalAppearance(next)
-  }, [controller, theme])
+    window.dispatchEvent(new Event(appearanceEvent))
+  }, [controller])
 
   return (
-    <ThemeContext.Provider value={{ appearance, inherited: theme === "inherit", portalContainer, setAppearance: change }}>
+    <ThemeContext.Provider value={{ appearance, portalContainer, setAppearance: change, inherited: mode === "inherit" }}>
       <div
         ref={setPortalContainer}
-        className={theme === "inherit" ? "size-full" : `${resolvedAppearance} size-full`}
+        className={mode === "inherit" ? "size-full" : `${resolvedAppearance} size-full`}
+        data-agents24-theme-mode={mode}
         data-agents24-theme={theme}
         data-agents24-theme-root=""
       >

package/dist/scaffold/src/components/ui/tooltip.tsx

@@ -21,6 +21,7 @@ function TooltipTrigger({
   asChild: _asChild,
   ...props
 }: React.ComponentProps<typeof Slot.Root> & { asChild?: boolean }) {
+  void _asChild
   return <Slot.Root data-slot="tooltip-trigger" {...props} />
 }
 
@@ -35,6 +36,8 @@ function TooltipContent({
   sideOffset?: number
   align?: "start" | "center" | "end"
 }) {
+  void _align
+  void _sideOffset
   return (
     <span
       role="tooltip"

package/dist/scaffold/src/host.css

@@ -0,0 +1,11 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "tw-animate-css";
+@import "@fontsource-variable/jetbrains-mono";
+@import "@fontsource-variable/merriweather";
+@import "@fontsource-variable/inter";
+
+@source "./**/*.{ts,tsx}";
+
+@import "./theme.css";

package/dist/scaffold/src/index.css

@@ -6,216 +6,4 @@
 
 @source "./**/*.{ts,tsx}";
 
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --font-heading: var(--a24-font-heading);
-  --font-sans: var(--a24-font-sans);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-  --a24-composer-single-row-radius: 9999px;
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --font-serif: var(--a24-font-heading);
-  --font-mono: var(--a24-font-mono);
-}
-
-[data-agents24-theme-root]:not([data-agents24-theme="inherit"]) {
-  color-scheme: light;
-  --a24-font-heading: 'Inter Variable', sans-serif;
-  --a24-font-sans: 'Inter Variable', sans-serif;
-  --a24-font-mono: 'JetBrains Mono Variable', monospace;
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.147 0.004 49.25);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.147 0.004 49.25);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.147 0.004 49.25);
-  --primary: oklch(0.52 0.105 223.128);
-  --primary-foreground: oklch(0.984 0.019 200.873);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.97 0.001 106.424);
-  --muted-foreground: oklch(0.553 0.013 58.071);
-  --accent: oklch(0.97 0.001 106.424);
-  --accent-foreground: oklch(0.216 0.006 56.043);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.923 0.003 48.717);
-  --input: oklch(0.923 0.003 48.717);
-  --ring: oklch(0.709 0.01 56.259);
-  --radius: 0.875rem;
-  --sidebar: oklch(0.985 0.001 106.423);
-  --sidebar-foreground: oklch(0.147 0.004 49.25);
-  --sidebar-primary: oklch(0.609 0.126 221.723);
-  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
-  --sidebar-accent: oklch(0.97 0.001 106.424);
-  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
-  --sidebar-border: oklch(0.923 0.003 48.717);
-  --sidebar-ring: oklch(0.709 0.01 56.259);
-  --chart-1: oklch(0.845 0.143 164.978);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.596 0.145 163.225);
-  --chart-4: oklch(0.508 0.118 165.612);
-  --chart-5: oklch(0.432 0.095 166.913);
-}
-
-[data-agents24-theme-root]:not([data-agents24-theme="inherit"]).dark {
-  color-scheme: dark;
-  --background: oklch(0.147 0.004 49.25);
-  --foreground: oklch(0.985 0.001 106.423);
-  --card: oklch(0.216 0.006 56.043);
-  --card-foreground: oklch(0.985 0.001 106.423);
-  --popover: oklch(0.216 0.006 56.043);
-  --popover-foreground: oklch(0.985 0.001 106.423);
-  --primary: oklch(0.45 0.085 224.283);
-  --primary-foreground: oklch(0.984 0.019 200.873);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.268 0.007 34.298);
-  --muted-foreground: oklch(0.709 0.01 56.259);
-  --accent: oklch(0.268 0.007 34.298);
-  --accent-foreground: oklch(0.985 0.001 106.423);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.553 0.013 58.071);
-  --sidebar: oklch(0.216 0.006 56.043);
-  --sidebar-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-primary: oklch(0.715 0.143 215.221);
-  --sidebar-primary-foreground: oklch(0.302 0.056 229.695);
-  --sidebar-accent: oklch(0.268 0.007 34.298);
-  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.553 0.013 58.071);
-  --chart-1: oklch(0.845 0.143 164.978);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.596 0.145 163.225);
-  --chart-4: oklch(0.508 0.118 165.612);
-  --chart-5: oklch(0.432 0.095 166.913);
-}
-
-[data-agents24-theme-root]:not([data-agents24-theme="inherit"])[data-agents24-theme="sharp"] {
-  --a24-composer-single-row-radius: 0;
-  --a24-font-heading: 'Merriweather Variable', serif;
-  --a24-font-sans: 'JetBrains Mono Variable', monospace;
-  --a24-font-mono: 'JetBrains Mono Variable', monospace;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --radius: 0;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.865 0.127 207.078);
-  --chart-2: oklch(0.715 0.143 215.221);
-  --chart-3: oklch(0.609 0.126 221.723);
-  --chart-4: oklch(0.52 0.105 223.128);
-  --chart-5: oklch(0.45 0.085 224.283);
-}
-
-[data-agents24-theme-root]:not([data-agents24-theme="inherit"])[data-agents24-theme="sharp"].dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.865 0.127 207.078);
-  --chart-2: oklch(0.715 0.143 215.221);
-  --chart-3: oklch(0.609 0.126 221.723);
-  --chart-4: oklch(0.52 0.105 223.128);
-  --chart-5: oklch(0.45 0.085 224.283);
-}
-
-@layer base {
-  [data-agents24-theme-root]:not([data-agents24-theme="inherit"]), [data-agents24-theme-root]:not([data-agents24-theme="inherit"]) * {
-    @apply border-border outline-ring/50;
-    box-sizing: border-box;
-  }
-  [data-agents24-theme-root]:not([data-agents24-theme="inherit"]) {
-    @apply size-full overflow-hidden bg-background font-sans text-foreground antialiased;
-  }
-  [data-agents24-theme-root]:not([data-agents24-theme="inherit"]) button,
-  [data-agents24-theme-root]:not([data-agents24-theme="inherit"]) textarea { font: inherit; }
-}
+@import "./theme.css";

package/dist/scaffold/src/index.tsx

@@ -13,11 +13,12 @@ import { TooltipProvider } from "./components/ui/tooltip"
 export type Agents24ChatScaffoldProps = Agents24ChatAppProps & {
   appearanceController?: Agents24ChatAppearanceController
   theme?: Agents24ChatTheme
+  themeMode?: "isolated" | "inherit"
 }
 
-export function Agents24ChatScaffold({ appearanceController, theme, ...props }: Agents24ChatScaffoldProps) {
+export function Agents24ChatScaffold({ appearanceController, theme, themeMode, ...props }: Agents24ChatScaffoldProps) {
   return (
-    <ThemeProvider controller={appearanceController} theme={theme}>
+    <ThemeProvider controller={appearanceController} theme={theme} mode={themeMode}>
       <TooltipProvider>
         <App {...props} />
       </TooltipProvider>
@@ -37,6 +38,7 @@ export type {
   ChatHitlResponse,
   Agents24ChatScaffoldComponents,
   Agents24ChatTimelineSlotProps,
+  Agents24ChatComposerSlotProps,
 } from "./app"
 export { TooltipProvider as Agents24ChatTooltipProvider }
 

package/dist/scaffold/src/theme.css

@@ -0,0 +1,215 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--a24-font-heading);
+  --font-sans: var(--a24-font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --a24-composer-single-row-radius: 9999px;
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --font-serif: var(--a24-font-heading);
+  --font-mono: var(--a24-font-mono);
+}
+
+[data-agents24-theme-root] {
+  color-scheme: light;
+  --a24-font-heading: 'Inter Variable', sans-serif;
+  --a24-font-sans: 'Inter Variable', sans-serif;
+  --a24-font-mono: 'JetBrains Mono Variable', monospace;
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.52 0.105 223.128);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --radius: 0.875rem;
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.609 0.126 221.723);
+  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.845 0.143 164.978);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.596 0.145 163.225);
+  --chart-4: oklch(0.508 0.118 165.612);
+  --chart-5: oklch(0.432 0.095 166.913);
+}
+
+[data-agents24-theme-root].dark,
+.dark [data-agents24-theme-root][data-agents24-theme-mode="inherit"] {
+  color-scheme: dark;
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.45 0.085 224.283);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.715 0.143 215.221);
+  --sidebar-primary-foreground: oklch(0.302 0.056 229.695);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.845 0.143 164.978);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.596 0.145 163.225);
+  --chart-4: oklch(0.508 0.118 165.612);
+  --chart-5: oklch(0.432 0.095 166.913);
+}
+
+[data-agents24-theme-root][data-agents24-theme="sharp"] {
+  --a24-composer-single-row-radius: 0;
+  --a24-font-heading: 'Merriweather Variable', serif;
+  --a24-font-sans: 'JetBrains Mono Variable', monospace;
+  --a24-font-mono: 'JetBrains Mono Variable', monospace;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --radius: 0;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.865 0.127 207.078);
+  --chart-2: oklch(0.715 0.143 215.221);
+  --chart-3: oklch(0.609 0.126 221.723);
+  --chart-4: oklch(0.52 0.105 223.128);
+  --chart-5: oklch(0.45 0.085 224.283);
+}
+
+[data-agents24-theme-root][data-agents24-theme="sharp"].dark,
+.dark [data-agents24-theme-root][data-agents24-theme="sharp"][data-agents24-theme-mode="inherit"] {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.865 0.127 207.078);
+  --chart-2: oklch(0.715 0.143 215.221);
+  --chart-3: oklch(0.609 0.126 221.723);
+  --chart-4: oklch(0.52 0.105 223.128);
+  --chart-5: oklch(0.45 0.085 224.283);
+}
+
+@layer base {
+  [data-agents24-theme-root], [data-agents24-theme-root] * {
+    @apply border-border outline-ring/50;
+    box-sizing: border-box;
+  }
+  [data-agents24-theme-root] {
+    @apply size-full overflow-hidden bg-background font-sans text-foreground antialiased;
+  }
+  [data-agents24-theme-root] button,
+  [data-agents24-theme-root] textarea { font: inherit; }
+}

package/dist/scaffold-manifest.json

@@ -8,8 +8,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"
@@ -20,9 +20,10 @@
     "tailwindcss": "^4.1.16"
   },
   "source": "packages/agents24-chat-react/scaffold",
-  "sha256": "ff79a5c99abb98c547132058504c6404d1cf9513f63ad98aaf1dfafc2dad4688",
+  "sha256": "c601ce4b1ce003ee92b6f59710ac74d4afa2f8630d7e1f86eda993ea7e7e4de4",
   "files": [
     "components.json",
+    "host-styles.css",
     "inherit.css",
     "manifest.json",
     "src/app.tsx",
@@ -34,6 +35,7 @@
     "src/components/chat/external-link-dialog.tsx",
     "src/components/chat/identity-control.tsx",
     "src/components/chat/message-parts.tsx",
+    "src/components/chat/subagent-tasks.tsx",
     "src/components/chat/theme-menu.tsx",
     "src/components/chat/thread-sidebar.tsx",
     "src/components/chat/timeline-loading.ts",
@@ -57,10 +59,12 @@
     "src/components/ui/textarea.tsx",
     "src/components/ui/tooltip.tsx",
     "src/hooks/use-mobile.ts",
+    "src/host.css",
     "src/identity.ts",
     "src/index.css",
     "src/index.tsx",
     "src/lib/utils.ts",
+    "src/theme.css",
     "styles.css"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-agents24-app",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "description": "Create a production-ready Agents24 React application.",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,7 @@
     "provenance": false
   },
   "dependencies": {
-    "@agents24/cli": "0.3.25",
+    "@agents24/cli": "0.3.26",
     "@clack/prompts": "1.7.0",
     "shadcn": "4.13.1"
   },

package/templates/integrations/nextjs/app/api/agents24/[[...path]]/route.ts

@@ -5,10 +5,31 @@ export const runtime = "nodejs";
 export const dynamic = "force-dynamic";
 export const maxDuration = 300;
 
-export const GET = handleAgents24;
-export const POST = handleAgents24;
-export const PUT = handleAgents24;
-export const PATCH = handleAgents24;
-export const DELETE = handleAgents24;
-export const HEAD = handleAgents24;
-export const OPTIONS = handleAgents24;
+// Next development may construct Request URLs from its wildcard bind address.
+// Restore only that address from Host; the BFF still checks both Origin and Host.
+function handle(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+  if (["0.0.0.0", "[::]"].includes(url.hostname)) {
+    const host = request.headers.get("host");
+    try {
+      if (!host) throw new Error("Missing Host");
+      const external = new URL(`${url.protocol}//${host}`);
+      if (external.username || external.password || external.pathname !== "/" || external.search || external.hash) {
+        throw new Error("Invalid Host");
+      }
+      url.host = external.host;
+      request = new Request(url, request);
+    } catch {
+      return Promise.resolve(new Response(null, { status: 403 }));
+    }
+  }
+  return handleAgents24(request);
+}
+
+export const GET = handle;
+export const POST = handle;
+export const PUT = handle;
+export const PATCH = handle;
+export const DELETE = handle;
+export const HEAD = handle;
+export const OPTIONS = handle;

package/versions.json

@@ -1,9 +1,9 @@
 {
   "agents24": {
-    "@agents24/client": "^0.2.14",
-    "@agents24/react": "^0.2.18",
-    "@agents24/chat-react": "^0.5.30",
-    "@agents24/node": "^0.5.22"
+    "@agents24/client": "^0.2.15",
+    "@agents24/react": "^0.2.19",
+    "@agents24/chat-react": "^0.5.31",
+    "@agents24/node": "^0.5.23"
   },
   "runtime": {
     "next": "^16.3.4",