@elabs-ai/components-ai 4.0.0 → 4.2.0

package/src/prompt-input.tsx

@@ -556,6 +556,10 @@ export const PromptInput = ({
   // Refs
   const inputRef = useRef<HTMLInputElement | null>(null);
   const formRef = useRef<HTMLFormElement | null>(null);
+  // In-flight guard for handleSubmit (#1.9) — a ref, not state, so a second
+  // Enter/click during the same synchronous event-handling pass sees the
+  // updated value immediately (no waiting for a re-render).
+  const isSubmittingRef = useRef(false);
 
   // ----- Local attachments (only used when no provider)
   const [items, setItems] = useState<(FileUIPart & { id: string })[]>([]);
@@ -887,6 +891,14 @@ export const PromptInput = ({
     async (event) => {
       event.preventDefault();
 
+      // In-flight guard (#1.9): a second Enter/click fired while the first
+      // submission is still being processed (mid blob conversion, mid async
+      // `onSubmit`) must not fire a second one — otherwise a double-Enter
+      // submits the same attachments twice.
+      if (isSubmittingRef.current) {
+        return;
+      }
+
       const form = event.currentTarget;
       const text = usingProvider
         ? controller.textInput.value
@@ -904,6 +916,23 @@ export const PromptInput = ({
         return;
       }
 
+      isSubmittingRef.current = true;
+
+      // The uncontrolled textarea's DOM value is about to be wiped by
+      // `form.reset()` below, before `onSubmit` has even run. Snapshot it so a
+      // sync throw / rejected promise can restore exactly what the user typed
+      // instead of losing it.
+      const textarea = usingProvider
+        ? null
+        : form.querySelector<HTMLTextAreaElement>('textarea[name="message"]');
+
+      const restoreTextOnFailure = () => {
+        if (textarea) {
+          textarea.value = text;
+          setHasLocalText(text.trim().length > 0);
+        }
+      };
+
       // Reset form immediately after capturing text to avoid race condition
       // where user input during async blob conversion would be lost
       if (!usingProvider) {
@@ -939,7 +968,9 @@ export const PromptInput = ({
               controller.textInput.clear();
             }
           } catch {
-            // Don't clear on error - user may want to retry
+            // Don't clear on error - user may want to retry; restore the text
+            // the early reset above wiped.
+            restoreTextOnFailure();
           }
         } else {
           // Sync function completed without throwing, clear inputs
@@ -949,7 +980,11 @@ export const PromptInput = ({
           }
         }
       } catch {
-        // Don't clear on error - user may want to retry
+        // Don't clear on error - user may want to retry; restore the text the
+        // early reset above wiped.
+        restoreTextOnFailure();
+      } finally {
+        isSubmittingRef.current = false;
       }
     },
     [usingProvider, controller, files, onSubmit, clear],
@@ -1583,7 +1618,10 @@ export type PromptInputTabLabelProps = HTMLAttributes<HTMLHeadingElement>;
 export const PromptInputTabLabel = ({ className, ...props }: PromptInputTabLabelProps) => (
   // Content provided via children in props
   // oxlint-disable-next-line eslint-plugin-jsx-a11y(heading-has-content)
-  <h3 className={cn("mb-2 px-3 font-medium text-muted-foreground text-xs", className)} {...props} />
+  <h3
+    className={cn("mb-2 px-3 font-medium text-muted-foreground text-meta", className)}
+    {...props}
+  />
 );
 
 export type PromptInputTabBodyProps = HTMLAttributes<HTMLDivElement>;
@@ -1596,7 +1634,7 @@ export type PromptInputTabItemProps = HTMLAttributes<HTMLDivElement>;
 
 export const PromptInputTabItem = ({ className, ...props }: PromptInputTabItemProps) => (
   <div
-    className={cn("flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent", className)}
+    className={cn("flex items-center gap-2 px-3 py-2 text-meta hover:bg-accent", className)}
     {...props}
   />
 );

package/src/queue.tsx

@@ -32,7 +32,7 @@ export type QueueItemProps = ComponentProps<"li">;
 export const QueueItem = ({ className, ...props }: QueueItemProps) => (
   <li
     className={cn(
-      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-body transition-colors hover:bg-muted",
       className,
     )}
     {...props}
@@ -90,7 +90,7 @@ export const QueueItemDescription = ({
 }: QueueItemDescriptionProps) => (
   <div
     className={cn(
-      "ms-6 text-xs",
+      "ms-6 text-meta",
       completed ? "text-muted-foreground/40 line-through" : "text-muted-foreground",
       className,
     )}
@@ -141,7 +141,7 @@ export type QueueItemFileProps = ComponentProps<"span">;
 
 export const QueueItemFile = ({ children, className, ...props }: QueueItemFileProps) => (
   <span
-    className={cn("flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs", className)}
+    className={cn("flex items-center gap-1 rounded border bg-muted px-2 py-1 text-meta", className)}
     {...props}
   >
     <PaperclipIcon size={12} />
@@ -177,7 +177,7 @@ export const QueueSectionTrigger = ({
   <CollapsibleTrigger asChild>
     <button
       className={cn(
-        "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-start font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+        "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-start font-medium text-muted-foreground text-body transition-colors hover:bg-muted",
         className,
       )}
       type="button"

package/src/reasoning.tsx

@@ -1,9 +1,19 @@
 "use client";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useLocale,
+} from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
-import { useStreamdownPlugins, useStreamdownTranslations } from "./_streamdown-i18n";
+import {
+  getStreamdownPluginsKey,
+  useStreamdownMermaidOptions,
+  useStreamdownPlugins,
+  useStreamdownTranslations,
+} from "./_streamdown-i18n";
 import { BrainIcon, ChevronDownIcon } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
 import {
@@ -140,29 +150,29 @@ export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> &
   getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
 };
 
-const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+const defaultGetThinkingMessage = (
+  isStreaming: boolean,
+  duration: number | undefined,
+  t: (key: string, vars?: Record<string, string | number>) => string,
+) => {
   if (isStreaming || duration === 0) {
-    return <Shimmer duration={1}>Thinking...</Shimmer>;
+    return <Shimmer duration={1}>{t("ai.reasoning.thinking")}</Shimmer>;
   }
   if (duration === undefined) {
-    return <p>Thought for a few seconds</p>;
+    return <p>{t("ai.reasoning.thoughtDefault")}</p>;
   }
-  return <p>Thought for {duration} seconds</p>;
+  return <p>{t("ai.reasoning.thoughtForDuration", { duration })}</p>;
 };
 
 export const ReasoningTrigger = memo(
-  ({
-    className,
-    children,
-    getThinkingMessage = defaultGetThinkingMessage,
-    ...props
-  }: ReasoningTriggerProps) => {
+  ({ className, children, getThinkingMessage, ...props }: ReasoningTriggerProps) => {
     const { isStreaming, isOpen, duration } = useReasoning();
+    const { t } = useLocale();
 
     return (
       <CollapsibleTrigger
         className={cn(
-          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          "flex w-full items-center gap-2 text-muted-foreground text-body transition-colors hover:text-foreground",
           className,
         )}
         {...props}
@@ -170,7 +180,9 @@ export const ReasoningTrigger = memo(
         {children ?? (
           <>
             <BrainIcon className="size-4" />
-            {getThinkingMessage(isStreaming, duration)}
+            {getThinkingMessage
+              ? getThinkingMessage(isStreaming, duration)
+              : defaultGetThinkingMessage(isStreaming, duration, t)}
             <ChevronDownIcon
               className={cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0")}
             />
@@ -202,19 +214,32 @@ export const ReasoningContent = memo(({ className, children, ...props }: Reasoni
   const translations = useStreamdownTranslations();
   // Brand-token-derived `code` plugin, not the package's static github-*
   // default (#315 follow-up) — re-derives when the active theme changes.
-  const plugins = useStreamdownPlugins();
+  // `math`/`cjk` are lazy-loaded off the raw text (#perf-5, see
+  // `_streamdown-i18n.ts`) — pass `children` so they load only when this
+  // reasoning block actually needs them.
+  const plugins = useStreamdownPlugins(typeof children === "string" ? children : "");
+  // The TOP-LEVEL Streamdown `mermaid` prop — catches a failed diagram
+  // render, including a missing `mermaid` optional peer (issue #33).
+  const mermaidOptions = useStreamdownMermaidOptions();
 
   return (
     <CollapsibleContent
       className={cn(
-        "mt-4 text-sm",
+        "mt-4 text-body",
         "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
         className,
       )}
       {...props}
     >
       {typeof children === "string" ? (
-        <Streamdown plugins={plugins} translations={translations}>
+        <Streamdown
+          // Forces a remount the first time the lazy math/cjk slot resolves —
+          // see `getStreamdownPluginsKey`'s doc in `_streamdown-i18n.ts` for why.
+          key={getStreamdownPluginsKey(plugins)}
+          plugins={plugins}
+          translations={translations}
+          mermaid={mermaidOptions}
+        >
           {children}
         </Streamdown>
       ) : (

package/src/sandbox.stories.tsx

@@ -13,7 +13,15 @@ import {
 const meta = {
   title: "AI/Sandbox",
   component: Sandbox,
-  parameters: { layout: "padded" },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A collapsible, tabbed view of a code-execution tool part — code in, output out, read-only. The real Monaco editing surface is `Editor/CodeEditor`; see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). `Sandbox` is the only place that knows whether the run body has arrived, so `SandboxContent` renders a layout-shaped skeleton while `loading`.",
+      },
+    },
+  },
 } satisfies Meta<typeof Sandbox>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/src/sandbox.tsx

@@ -70,7 +70,7 @@ export const SandboxHeader = ({ className, title, state, ...props }: SandboxHead
   >
     <div className="flex items-center gap-2">
       <Code className="size-4 text-muted-foreground" />
-      <span className="font-medium text-sm">{title}</span>
+      <span className="font-medium text-body">{title}</span>
       {getStatusBadge(state)}
     </div>
     <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
@@ -135,7 +135,7 @@ export type SandboxTabsTriggerProps = ComponentProps<typeof TabsTrigger>;
 export const SandboxTabsTrigger = ({ className, ...props }: SandboxTabsTriggerProps) => (
   <TabsTrigger
     className={cn(
-      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-body transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
       className,
     )}
     {...props}
@@ -145,5 +145,5 @@ export const SandboxTabsTrigger = ({ className, ...props }: SandboxTabsTriggerPr
 export type SandboxTabContentProps = ComponentProps<typeof TabsContent>;
 
 export const SandboxTabContent = ({ className, ...props }: SandboxTabContentProps) => (
-  <TabsContent className={cn("mt-0 text-sm", className)} {...props} />
+  <TabsContent className={cn("mt-0 text-body", className)} {...props} />
 );

package/src/schema-display.test.tsx

@@ -0,0 +1,56 @@
+/**
+ * schema-display.test.tsx — XSS lock for `SchemaDisplayPath` (#1.1 review finding).
+ *
+ * `path` is untrusted tool/model output. It must never be interpolated into
+ * `dangerouslySetInnerHTML` — the `{param}` highlight has to be rendered as
+ * real `<span>` children, not raw HTML.
+ */
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SchemaDisplay, SchemaDisplayHeader, SchemaDisplayPath } from "./schema-display";
+
+describe("SchemaDisplayPath — XSS", () => {
+  it("never injects HTML from the path, even when it contains markup", () => {
+    const maliciousPath = '/users/{id}"><img src=x onerror=alert(1)>';
+
+    const { container } = render(
+      <SchemaDisplay method="GET" path={maliciousPath}>
+        <SchemaDisplayHeader>
+          <SchemaDisplayPath />
+        </SchemaDisplayHeader>
+      </SchemaDisplay>,
+    );
+
+    // The dangerous markup must render as literal text, never as a live element.
+    expect(container.querySelector("img")).not.toBeInTheDocument();
+    expect(container.textContent).toContain(maliciousPath);
+  });
+
+  it("highlights {param} segments as separate span children", () => {
+    render(
+      <SchemaDisplay method="GET" path="/users/{id}/posts/{postId}">
+        <SchemaDisplayHeader>
+          <SchemaDisplayPath />
+        </SchemaDisplayHeader>
+      </SchemaDisplay>,
+    );
+
+    const idSpan = screen.getByText("{id}");
+    const postIdSpan = screen.getByText("{postId}");
+    expect(idSpan.tagName).toBe("SPAN");
+    expect(postIdSpan.tagName).toBe("SPAN");
+    expect(idSpan).toHaveClass("text-info-text");
+  });
+
+  it("renders an explicit path with no param braces verbatim", () => {
+    render(
+      <SchemaDisplay method="POST" path="/users">
+        <SchemaDisplayHeader>
+          <SchemaDisplayPath />
+        </SchemaDisplayHeader>
+      </SchemaDisplay>,
+    );
+
+    expect(screen.getByText("/users")).toBeInTheDocument();
+  });
+});

package/src/schema-display.tsx

@@ -2,10 +2,11 @@
 
 import { Badge } from "@elabs-ai/components-ui";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+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";
 
@@ -41,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 = ({
@@ -71,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}
     >
@@ -85,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>
   );
 };
 
@@ -111,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>
   );
@@ -142,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>
 );
 
@@ -172,13 +203,14 @@ export const SchemaDisplayParameters = ({
   ...props
 }: SchemaDisplayParametersProps) => {
   const { parameters } = 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">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>
@@ -222,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
@@ -237,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}
@@ -260,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>
   );
 };
@@ -286,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">
@@ -313,12 +346,13 @@ export const SchemaDisplayResponse = ({
   ...props
 }: SchemaDisplayResponseProps) => {
   const { responseBody } = 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">Response</span>
+        <span className="font-medium text-body">{t("ai.schemaDisplay.response")}</span>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="border-t">
@@ -404,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/selection-toolbar.stories.tsx

@@ -8,7 +8,15 @@ const meta = {
   title: "AI/SelectionToolbar",
   component: SelectionToolbar,
   tags: ["autodocs"],
-  parameters: { layout: "padded" },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "The small toolbar that floats over a TEXT SELECTION in a transcript, offering Quote. A dense secondary control row is `Layout/Toolbar`, the row above a list or table is `Layout/ViewToolbar`, and formatting chrome for a markdown source pane is `Editor/MarkdownToolbar` — see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). Positioned with a Popover virtual anchor at the selection rect; presentational only.",
+      },
+    },
+  },
 } satisfies Meta<typeof SelectionToolbar>;
 export default meta;
 type Story = StoryObj<typeof meta>;