@agents24/chat-react 0.5.30 → 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

@@ -1,48 +1,47 @@
 import * as React from "react";
-import { type AgentChatInputContract } from "../runtime/input-contract";
+import type { AgentChatInputContract } from "../runtime/input-contract";
 import { type AgentChatComposerFile } from "./composer-attachments";
-export type AgentChatComposerDraft = {
-    revision: number;
-    text: string;
-    files: AgentChatComposerFile[];
-};
-export type UseAgentChatComposerOptions = {
+export type AgentChatComposerOptions = {
+    inputContract?: AgentChatInputContract | null;
+    recordingEnabled?: boolean;
+    textareaRef?: React.RefObject<HTMLTextAreaElement | null>;
     disabled?: boolean;
     isRunning?: boolean;
     isCancelling?: boolean;
-    inputContract?: AgentChatInputContract | null;
-    recordingEnabled?: boolean;
+    forceExpanded?: boolean;
     focusKey?: string | null;
-    restoredDraft?: AgentChatComposerDraft | null;
-    textareaRef: React.RefObject<HTMLTextAreaElement | null>;
-    onSubmit: (input: {
+    restoredDraft?: {
+        revision: number;
         text: string;
         files: AgentChatComposerFile[];
-        attachmentIds: string[];
-    }) => void | Promise<void>;
+    } | 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;
 };
-/** Presentation state only. The host/runtime still owns upload and admission. */
-export declare function useAgentChatComposer({ disabled, isRunning, isCancelling, inputContract, recordingEnabled, focusKey, restoredDraft, textareaRef, onSubmit }: UseAgentChatComposerOptions): {
+export declare function useAgentChatComposer(options: AgentChatComposerOptions): {
     text: string;
+    setText: (value: string) => void;
     files: AgentChatComposerFile[];
-    isSubmitting: boolean;
+    addFiles: (selected: readonly File[]) => void;
+    removeFile: (id: string) => void;
+    textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+    submit: () => Promise<void>;
     canSubmit: boolean;
-    validationError: string | null;
+    isSubmitting: boolean;
     attachmentError: string | null;
-    recordingAllowed: boolean;
+    attachmentMimeTypes: string[];
+    validationError: string | null;
     recorder: {
         error: string | null;
         isRecording: boolean;
         start: () => Promise<void>;
         stop: () => void;
     };
-    accept: string[] | null;
-    fileAccept: string | undefined;
+    recordingAllowed: boolean;
+    fileAccept: string;
+    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
     allowAttachments: boolean;
+    isExpanded: boolean;
     action: "stop" | "send";
-    setText: (value: string) => void;
-    addFiles: (selected: readonly File[]) => void;
-    removeFile: (id: string) => void;
-    submit: () => Promise<void>;
-    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
 };

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

@@ -1,6 +1,8 @@
-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>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.30",
+  "version": "0.5.31",
   "description": "Accessible web UI and complete default layout for Agents24 chat applications.",
   "license": "MIT",
   "repository": {
@@ -37,6 +37,7 @@
     "./scaffold/styles.css": "./scaffold/styles.css",
     "./styles.css": "./dist/styles.css",
     "./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"
   },
@@ -63,8 +64,8 @@
   },
   "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/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

@@ -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/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/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/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/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/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/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/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";