@elabs-ai/components-ai 4.1.0 → 4.2.0

package/src/schema-display.tsx

@@ -5,8 +5,8 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/c
 import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { ChevronRightIcon } from "lucide-react";
-import type { ComponentProps, HTMLAttributes } from "react";
-import { createContext, useContext, useMemo } from "react";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { createContext, Fragment, useContext, useMemo } from "react";
 
 type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
 
@@ -42,13 +42,36 @@ const SchemaDisplayContext = createContext<SchemaDisplayContextType>({
 });
 
 const methodStyles: Record<HttpMethod, string> = {
-  DELETE: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
-  GET: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-  PATCH: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-  POST: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-  PUT: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400",
+  DELETE: "border-destructive/40 bg-destructive/10 text-destructive-text",
+  GET: "border-success/40 bg-success/10 text-success-text",
+  PATCH: "border-warning/40 bg-warning/10 text-warning-text",
+  POST: "border-info/40 bg-info/10 text-info-text",
+  PUT: "border-warning/40 bg-warning/10 text-warning-text",
 };
 
+/** Splits a `{param}` path into plain-text and parameter segments for safe rendering. */
+function splitSchemaPath(path: string): Array<{ text: string; isParam: boolean }> {
+  const parts: Array<{ text: string; isParam: boolean }> = [];
+  const regex = /\{([^}]+)\}/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null = regex.exec(path);
+
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      parts.push({ isParam: false, text: path.slice(lastIndex, match.index) });
+    }
+    parts.push({ isParam: true, text: match[0] });
+    lastIndex = match.index + match[0].length;
+    match = regex.exec(path);
+  }
+
+  if (lastIndex < path.length) {
+    parts.push({ isParam: false, text: path.slice(lastIndex) });
+  }
+
+  return parts;
+}
+
 export type SchemaDisplayHeaderProps = HTMLAttributes<HTMLDivElement>;
 
 export const SchemaDisplayHeader = ({
@@ -72,7 +95,7 @@ export const SchemaDisplayMethod = ({
 
   return (
     <Badge
-      className={cn("font-mono text-xs", methodStyles[method], className)}
+      className={cn("font-mono text-meta", methodStyles[method], className)}
       variant="secondary"
       {...props}
     >
@@ -86,19 +109,26 @@ export type SchemaDisplayPathProps = HTMLAttributes<HTMLSpanElement>;
 export const SchemaDisplayPath = ({ className, children, ...props }: SchemaDisplayPathProps) => {
   const { path } = useContext(SchemaDisplayContext);
 
-  // Highlight path parameters
-  const highlightedPath = path.replaceAll(
-    /\{([^}]+)\}/g,
-    '<span class="text-blue-600 dark:text-blue-400">{$1}</span>',
+  // Highlight path parameters as real elements — the path is untrusted
+  // (tool/model output) and must never reach dangerouslySetInnerHTML.
+  const pathNodes = useMemo<ReactNode>(
+    () =>
+      splitSchemaPath(path).map((part, index) =>
+        part.isParam ? (
+          <span className="text-info-text" key={`${part.text}-${index}`}>
+            {part.text}
+          </span>
+        ) : (
+          <Fragment key={`${part.text}-${index}`}>{part.text}</Fragment>
+        ),
+      ),
+    [path],
   );
 
   return (
-    <span
-      className={cn("font-mono text-sm", className)}
-      // oxlint-disable-next-line eslint-plugin-react(no-danger)
-      dangerouslySetInnerHTML={{ __html: children ?? highlightedPath }}
-      {...props}
-    />
+    <span className={cn("font-mono text-body", className)} {...props}>
+      {children ?? pathNodes}
+    </span>
   );
 };
 
@@ -112,7 +142,7 @@ export const SchemaDisplayDescription = ({
   const { description } = useContext(SchemaDisplayContext);
 
   return (
-    <p className={cn("border-b px-4 py-3 text-muted-foreground text-sm", className)} {...props}>
+    <p className={cn("border-b px-4 py-3 text-muted-foreground text-body", className)} {...props}>
       {children ?? description}
     </p>
   );
@@ -143,25 +173,25 @@ export const SchemaDisplayParameter = ({
 }: SchemaDisplayParameterProps) => (
   <div className={cn("px-4 py-3 ps-10", className)} {...props}>
     <div className="flex items-center gap-2">
-      <span className="font-mono text-sm">{name}</span>
-      <Badge className="text-xs" variant="outline">
+      <span className="font-mono text-body">{name}</span>
+      <Badge className="text-meta" variant="outline">
         {type}
       </Badge>
       {location && (
-        <Badge className="text-xs" variant="secondary">
+        <Badge className="text-meta" variant="secondary">
           {location}
         </Badge>
       )}
       {required && (
         <Badge
-          className="bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400"
+          className="border-destructive/40 bg-destructive/10 text-destructive-text text-meta"
           variant="secondary"
         >
           required
         </Badge>
       )}
     </div>
-    {description && <p className="mt-1 text-muted-foreground text-sm">{description}</p>}
+    {description && <p className="mt-1 text-muted-foreground text-body">{description}</p>}
   </div>
 );
 
@@ -179,8 +209,8 @@ export const SchemaDisplayParameters = ({
     <Collapsible className={cn(className)} defaultOpen {...props}>
       <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-start transition-colors hover:bg-muted/50">
         <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-        <span className="font-medium text-sm">{t("ai.schemaDisplay.parameters")}</span>
-        <Badge className="ms-auto text-xs" variant="secondary">
+        <span className="font-medium text-body">{t("ai.schemaDisplay.parameters")}</span>
+        <Badge className="ms-auto text-meta" variant="secondary">
           {parameters?.length}
         </Badge>
       </CollapsibleTrigger>
@@ -224,13 +254,13 @@ export const SchemaDisplayProperty = ({
           style={{ paddingLeft }}
         >
           <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-          <span className="font-mono text-sm">{name}</span>
-          <Badge className="text-xs" variant="outline">
+          <span className="font-mono text-body">{name}</span>
+          <Badge className="text-meta" variant="outline">
             {type}
           </Badge>
           {required && (
             <Badge
-              className="bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400"
+              className="border-destructive/40 bg-destructive/10 text-destructive-text text-meta"
               variant="secondary"
             >
               required
@@ -239,7 +269,7 @@ export const SchemaDisplayProperty = ({
         </CollapsibleTrigger>
         {description && (
           <p
-            className="pb-2 text-muted-foreground text-sm"
+            className="pb-2 text-muted-foreground text-body"
             style={{ paddingLeft: paddingLeft + 24 }}
           >
             {description}
@@ -262,20 +292,20 @@ export const SchemaDisplayProperty = ({
       <div className="flex items-center gap-2">
         {/* Spacer for alignment */}
         <span className="size-4" />
-        <span className="font-mono text-sm">{name}</span>
-        <Badge className="text-xs" variant="outline">
+        <span className="font-mono text-body">{name}</span>
+        <Badge className="text-meta" variant="outline">
           {type}
         </Badge>
         {required && (
           <Badge
-            className="bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400"
+            className="border-destructive/40 bg-destructive/10 text-destructive-text text-meta"
             variant="secondary"
           >
             required
           </Badge>
         )}
       </div>
-      {description && <p className="mt-1 ps-6 text-muted-foreground text-sm">{description}</p>}
+      {description && <p className="mt-1 ps-6 text-muted-foreground text-body">{description}</p>}
     </div>
   );
 };
@@ -288,12 +318,13 @@ export const SchemaDisplayRequest = ({
   ...props
 }: SchemaDisplayRequestProps) => {
   const { requestBody } = useContext(SchemaDisplayContext);
+  const { t } = useLocale();
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>
       <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-start transition-colors hover:bg-muted/50">
         <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-        <span className="font-medium text-sm">Request Body</span>
+        <span className="font-medium text-body">{t("ai.schemaDisplay.requestBody")}</span>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="border-t">
@@ -321,7 +352,7 @@ export const SchemaDisplayResponse = ({
     <Collapsible className={cn(className)} defaultOpen {...props}>
       <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-start transition-colors hover:bg-muted/50">
         <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-        <span className="font-medium text-sm">{t("ai.schemaDisplay.response")}</span>
+        <span className="font-medium text-body">{t("ai.schemaDisplay.response")}</span>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="border-t">
@@ -407,7 +438,7 @@ export const SchemaDisplayExample = ({
   ...props
 }: SchemaDisplayExampleProps) => (
   <pre
-    className={cn("mx-4 mb-4 overflow-auto rounded-md bg-muted p-4 font-mono text-sm", className)}
+    className={cn("mx-4 mb-4 overflow-auto rounded-md bg-muted p-4 font-mono text-body", className)}
     {...props}
   >
     {children}

package/src/session-header.tsx

@@ -194,7 +194,7 @@ export const SessionHeader = forwardRef<HTMLDivElement, SessionHeaderProps>(func
                   {item.href != null ? (
                     <a
                       href={item.href}
-                      className="text-primary-text underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                      className="text-link underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                     >
                       {item.label}
                     </a>

package/src/snippet.test.tsx

@@ -88,7 +88,7 @@ describe("SnippetCopyButton", () => {
     await waitFor(() => expect(onError).toHaveBeenCalled());
   });
 
-  it("reports an UNAVAILABLE clipboard through onError (insecure context / old browser)", () => {
+  it("reports an UNAVAILABLE clipboard through onError (insecure context / old browser)", async () => {
     Object.defineProperty(navigator, "clipboard", { value: undefined, configurable: true });
     const onError = vi.fn();
     render(
@@ -98,7 +98,11 @@ describe("SnippetCopyButton", () => {
       </Snippet>,
     );
     fireEvent.click(screen.getByRole("button", { name: "Copy" }));
-    expect(onError).toHaveBeenCalled();
+    // The shared `useCopyToClipboard` hook (`@elabs-ai/components-ui`) always
+    // resolves `copy()` on a microtask, even for the synchronous
+    // "clipboard missing" case — so this needs a `waitFor`, unlike a
+    // hand-rolled synchronous check would have.
+    await waitFor(() => expect(onError).toHaveBeenCalled());
   });
 
   it("fires onCopy once the write resolves", async () => {

package/src/snippet.tsx

@@ -8,18 +8,10 @@ import {
   InputGroupText,
 } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
-import { useLocale } from "@elabs-ai/components-ui";
+import { useCopyToClipboard, useLocale } from "@elabs-ai/components-ui";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import type { ComponentProps } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { createContext, useCallback, useContext, useMemo } from "react";
 
 interface SnippetContextType {
   code: string;
@@ -79,40 +71,28 @@ export type SnippetCopyButtonProps = ComponentProps<typeof InputGroupButton> & {
 export const SnippetCopyButton = ({
   onCopy,
   onError,
-  timeout = 2000,
+  timeout,
   children,
   className,
   ...props
 }: SnippetCopyButtonProps) => {
   const { t } = useLocale();
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef<number>(0);
   const { code } = useContext(SnippetContext);
+  // Shared implementation (`@elabs-ai/components-ui`) instead of a private
+  // copy of the same copy-to-clipboard state machine (issue-workflow.md
+  // dedupe finding) — see `CodeBlockCopyButton` for the reference usage.
+  const { copied: isCopied, copy } = useCopyToClipboard(
+    timeout === undefined ? undefined : { resetAfterMs: timeout },
+  );
 
   const copyToClipboard = useCallback(async () => {
-    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+    const ok = await copy(code);
+    if (ok) {
+      onCopy?.();
+    } else {
       onError?.(new Error("Clipboard API not available"));
-      return;
-    }
-
-    try {
-      if (!isCopied) {
-        await navigator.clipboard.writeText(code);
-        setIsCopied(true);
-        onCopy?.();
-        timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
-      }
-    } catch (error) {
-      onError?.(error as Error);
     }
-  }, [code, onCopy, onError, timeout, isCopied]);
-
-  useEffect(
-    () => () => {
-      window.clearTimeout(timeoutRef.current);
-    },
-    [],
-  );
+  }, [copy, code, onCopy, onError]);
 
   const Icon = isCopied ? CheckIcon : CopyIcon;
 

package/src/speech-input.test.tsx

@@ -0,0 +1,109 @@
+/**
+ * speech-input.test.tsx — the MediaRecorder fallback path's two race bugs:
+ * a double click starting two recorders before the first `getUserMedia()`
+ * resolves, and an unmount during a pending `getUserMedia()` leaving the
+ * microphone on with nothing left to stop it.
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import { SpeechInput } from "./speech-input";
+
+class FakeMediaRecorder {
+  state: "inactive" | "recording" = "inactive";
+  private listeners = new Map<string, Set<(event: Event) => void>>();
+
+  constructor(public stream: MediaStream) {}
+
+  addEventListener(type: string, cb: (event: Event) => void) {
+    if (!this.listeners.has(type)) this.listeners.set(type, new Set());
+    this.listeners.get(type)?.add(cb);
+  }
+
+  removeEventListener(type: string, cb: (event: Event) => void) {
+    this.listeners.get(type)?.delete(cb);
+  }
+
+  start() {
+    this.state = "recording";
+  }
+
+  stop() {
+    this.state = "inactive";
+    for (const cb of this.listeners.get("stop") ?? []) cb(new Event("stop"));
+  }
+}
+
+function makeFakeStream() {
+  const tracks = [{ stop: vi.fn() }, { stop: vi.fn() }];
+  return {
+    getTracks: () => tracks,
+    tracks,
+  } as unknown as MediaStream & { tracks: { stop: ReturnType<typeof vi.fn> }[] };
+}
+
+function stubMediaRecorderEnvironment(getUserMedia: (...args: unknown[]) => unknown) {
+  vi.stubGlobal("MediaRecorder", FakeMediaRecorder);
+  Object.defineProperty(navigator, "mediaDevices", {
+    configurable: true,
+    value: { getUserMedia },
+  });
+}
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  // @ts-expect-error -- test-only cleanup of a property we defined above
+  delete navigator.mediaDevices;
+});
+
+describe("SpeechInput — media-recorder fallback getUserMedia race guards", () => {
+  it("does not call getUserMedia twice for a double click before the first call resolves", async () => {
+    let resolveGetUserMedia: ((stream: MediaStream) => void) | undefined;
+    const getUserMedia = vi.fn(
+      () =>
+        new Promise((resolve: (stream: MediaStream) => void) => {
+          resolveGetUserMedia = resolve;
+        }),
+    );
+    stubMediaRecorderEnvironment(getUserMedia);
+
+    const startSpy = vi.spyOn(FakeMediaRecorder.prototype, "start");
+    const { getByRole } = render(<SpeechInput onAudioRecorded={() => Promise.resolve("hi")} />);
+    const button = getByRole("button");
+
+    fireEvent.click(button);
+    fireEvent.click(button);
+
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+
+    resolveGetUserMedia?.(makeFakeStream());
+    // Only ONE recorder is ever created/started — the second click's
+    // `getUserMedia()` call was suppressed by the in-flight guard, not merely
+    // delayed.
+    await waitFor(() => expect(startSpy).toHaveBeenCalledTimes(1));
+  });
+
+  it("stops the granted tracks when the component unmounts before getUserMedia resolves", async () => {
+    let resolveGetUserMedia: ((stream: MediaStream) => void) | undefined;
+    const getUserMedia = vi.fn(
+      () =>
+        new Promise((resolve: (stream: MediaStream) => void) => {
+          resolveGetUserMedia = resolve;
+        }),
+    );
+    stubMediaRecorderEnvironment(getUserMedia);
+
+    const { getByRole, unmount } = render(
+      <SpeechInput onAudioRecorded={() => Promise.resolve("hi")} />,
+    );
+    fireEvent.click(getByRole("button"));
+
+    unmount();
+
+    const stream = makeFakeStream();
+    resolveGetUserMedia?.(stream);
+
+    await waitFor(() => expect(stream.tracks[0]?.stop).toHaveBeenCalledTimes(1));
+    expect(stream.tracks[1]?.stop).toHaveBeenCalledTimes(1);
+  });
+});

package/src/speech-input.tsx

@@ -101,6 +101,21 @@ export const SpeechInput = ({
   const onTranscriptionChangeRef =
     useRef<SpeechInputProps["onTranscriptionChange"]>(onTranscriptionChange);
   const onAudioRecordedRef = useRef<SpeechInputProps["onAudioRecorded"]>(onAudioRecorded);
+  // Guards a pending `getUserMedia()` call against a second click/toggle
+  // firing before the first resolves (both see `isListening === false`, since
+  // that flips only once the stream is actually granted).
+  const isStartingMediaRecorderRef = useRef(false);
+  // Flips false on unmount so an in-flight `getUserMedia()` that resolves
+  // AFTER teardown stops its just-granted tracks immediately instead of
+  // leaving the microphone on with nothing listening.
+  const isMountedRef = useRef(true);
+
+  useEffect(
+    () => () => {
+      isMountedRef.current = false;
+    },
+    [],
+  );
 
   // Keep refs in sync
   onTranscriptionChangeRef.current = onTranscriptionChange;
@@ -183,12 +198,23 @@ export const SpeechInput = ({
 
   // Start MediaRecorder recording
   const startMediaRecorder = useCallback(async () => {
-    if (!onAudioRecordedRef.current) {
+    if (!onAudioRecordedRef.current || isStartingMediaRecorderRef.current) {
       return;
     }
 
+    isStartingMediaRecorderRef.current = true;
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+      // Unmounted (or stopped) while getUserMedia was pending — the granted
+      // tracks have no listener left to stop them later, so stop them now.
+      if (!isMountedRef.current) {
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        return;
+      }
+
       streamRef.current = stream;
       const mediaRecorder = new MediaRecorder(stream);
       audioChunksRef.current = [];
@@ -241,6 +267,8 @@ export const SpeechInput = ({
       setIsListening(true);
     } catch {
       setIsListening(false);
+    } finally {
+      isStartingMediaRecorderRef.current = false;
     }
   }, []);
 
@@ -281,7 +309,7 @@ export const SpeechInput = ({
       {isListening &&
         [0, 1, 2].map((index) => (
           <div
-            className="absolute inset-0 animate-ping rounded-full border-2 border-red-400/30"
+            className="absolute inset-0 animate-ping rounded-full border-2 border-destructive/30"
             key={index}
             style={{
               animationDelay: `${index * 0.3}s`,
@@ -295,7 +323,7 @@ export const SpeechInput = ({
         className={cn(
           "relative z-10 rounded-full transition-colors duration-slow ease-standard motion-reduce:transition-none",
           isListening
-            ? "bg-destructive text-white hover:bg-destructive/80 hover:text-white"
+            ? "bg-destructive text-destructive-foreground hover:bg-destructive/80 hover:text-destructive-foreground"
             : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
           className,
         )}

package/src/stack-trace.tsx

@@ -3,20 +3,11 @@
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Button } from "@elabs-ai/components-ui";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
-import { useLocale } from "@elabs-ai/components-ui";
+import { useCopyToClipboard, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { AlertTriangleIcon, CheckIcon, ChevronDownIcon, CopyIcon } from "lucide-react";
 import type { ComponentProps } from "react";
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { createContext, memo, useCallback, useContext, useMemo } from "react";
 
 // Regex patterns for parsing stack traces
 const STACK_FRAME_WITH_PARENS_REGEX = /^at\s+(.+?)\s+\((.+):(\d+):(\d+)\)$/;
@@ -188,7 +179,7 @@ export const StackTrace = memo(
       <StackTraceContext.Provider value={contextValue}>
         <div
           className={cn(
-            "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-sm",
+            "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-body",
             className,
           )}
           {...props}
@@ -293,42 +284,35 @@ export const StackTraceCopyButton = memo(
   ({
     onCopy,
     onError,
-    timeout = 2000,
+    timeout,
     className,
     children,
+    "aria-label": ariaLabel,
     ...props
   }: StackTraceCopyButtonProps) => {
-    const [isCopied, setIsCopied] = useState(false);
-    const timeoutRef = useRef<number>(0);
+    const { t } = useLocale();
     const { raw } = useStackTrace();
+    // Shared implementation (`@elabs-ai/components-ui`) instead of a private
+    // copy of the same copy-to-clipboard state machine (issue-workflow.md
+    // dedupe finding) — see `CodeBlockCopyButton` for the reference usage.
+    const { copied: isCopied, copy } = useCopyToClipboard(
+      timeout === undefined ? undefined : { resetAfterMs: timeout },
+    );
 
     const copyToClipboard = useCallback(async () => {
-      if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
-        onError?.(new Error("Clipboard API not available"));
-        return;
-      }
-
-      try {
-        await navigator.clipboard.writeText(raw);
-        setIsCopied(true);
+      const ok = await copy(raw);
+      if (ok) {
         onCopy?.();
-        timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
-      } catch (error) {
-        onError?.(error as Error);
+      } else {
+        onError?.(new Error("Clipboard API not available"));
       }
-    }, [raw, onCopy, onError, timeout]);
-
-    useEffect(
-      () => () => {
-        window.clearTimeout(timeoutRef.current);
-      },
-      [],
-    );
+    }, [copy, raw, onCopy, onError]);
 
     const Icon = isCopied ? CheckIcon : CopyIcon;
 
     return (
       <Button
+        aria-label={ariaLabel ?? t("copy")}
         className={cn("size-7", className)}
         onClick={copyToClipboard}
         size="icon"
@@ -440,7 +424,7 @@ export const StackTraceFrames = memo(
         {framesToShow.map((frame) => (
           <div
             className={cn(
-              "text-xs",
+              "text-meta",
               frame.isInternal ? "text-muted-foreground/50" : "text-foreground/90",
             )}
             key={frame.raw}
@@ -464,7 +448,7 @@ export const StackTraceFrames = memo(
           </div>
         ))}
         {framesToShow.length === 0 && (
-          <div className="text-muted-foreground text-xs">{t("ai.stackTrace.empty")}</div>
+          <div className="text-muted-foreground text-meta">{t("ai.stackTrace.empty")}</div>
         )}
       </div>
     );

package/src/streamdown-i18n.test.tsx

@@ -13,6 +13,7 @@ import { LocaleProvider } from "@elabs-ai/components-ui";
 import { MessageResponse } from "./message";
 import { MarkdownView } from "./markdown-view";
 import { Reasoning, ReasoningContent } from "./reasoning";
+import { _debugActiveThemeScopeCount } from "./_theme-scope-store";
 
 const CODE_MARKDOWN = "```js\nconst a = 1;\n```";
 // `MarkdownView` re-maps `code` onto `ProseInlineCode`, so its Streamdown chrome
@@ -107,6 +108,28 @@ describe("Streamdown chrome microcopy (#310)", () => {
   });
 });
 
+describe("useReactiveCodePlugin shares ONE theme-scope observer (perf review §3.3)", () => {
+  it("registers a single tracked scope for many simultaneously-mounted MessageResponse instances", () => {
+    const before = _debugActiveThemeScopeCount();
+
+    const { unmount } = render(
+      <>
+        <MessageResponse>{CODE_MARKDOWN}</MessageResponse>
+        <MessageResponse>{CODE_MARKDOWN}</MessageResponse>
+        <MessageResponse>{CODE_MARKDOWN}</MessageResponse>
+      </>,
+    );
+
+    // Under the old per-hook `MutationObserver`, a message-dense conversation
+    // registered one observer PER instance; the shared store collapses every
+    // instance watching the same `<html>` scope into exactly one.
+    expect(_debugActiveThemeScopeCount()).toBe(before + 1);
+
+    unmount();
+    expect(_debugActiveThemeScopeCount()).toBe(before);
+  });
+});
+
 /**
  * #315 follow-up — the "major" carve-out: only `<CodeBlock>` had been
  * de-GitHub-ed; every fenced code block rendered through `MessageResponse`/