@elabs-ai/components-ai 4.1.0 → 4.2.0

package/src/package-info.tsx

@@ -35,17 +35,17 @@ export const PackageInfoName = ({ className, children, ...props }: PackageInfoNa
   return (
     <div className={cn("flex items-center gap-2", className)} {...props}>
       <PackageIcon className="size-4 text-muted-foreground" />
-      <span className="font-medium font-mono text-sm">{children ?? name}</span>
+      <span className="font-medium font-mono text-body">{children ?? name}</span>
     </div>
   );
 };
 
 const changeTypeStyles: Record<ChangeType, string> = {
-  added: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-  major: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
-  minor: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-  patch: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-  removed: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
+  added: "bg-info/10 text-info-text",
+  major: "bg-destructive/10 text-destructive-text",
+  minor: "bg-warning/10 text-warning-text",
+  patch: "bg-success/10 text-success-text",
+  removed: "bg-muted text-muted-foreground",
 };
 
 const changeTypeIcons: Record<ChangeType, React.ReactNode> = {
@@ -71,7 +71,7 @@ export const PackageInfoChangeType = ({
 
   return (
     <Badge
-      className={cn("gap-1 text-xs capitalize", changeTypeStyles[changeType], className)}
+      className={cn("gap-1 text-meta capitalize", changeTypeStyles[changeType], className)}
       variant="secondary"
       {...props}
     >
@@ -93,7 +93,7 @@ export const PackageInfoVersion = ({ className, children, ...props }: PackageInf
   return (
     <div
       className={cn(
-        "mt-2 flex items-center gap-2 font-mono text-muted-foreground text-sm",
+        "mt-2 flex items-center gap-2 font-mono text-muted-foreground text-body",
         className,
       )}
       {...props}
@@ -154,7 +154,7 @@ export const PackageInfoDescription = ({
   children,
   ...props
 }: PackageInfoDescriptionProps) => (
-  <p className={cn("mt-2 text-muted-foreground text-sm", className)} {...props}>
+  <p className={cn("mt-2 text-muted-foreground text-body", className)} {...props}>
     {children}
   </p>
 );
@@ -175,7 +175,7 @@ export const PackageInfoDependencies = ({
   ...props
 }: PackageInfoDependenciesProps) => (
   <div className={cn("space-y-2", className)} {...props}>
-    <span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+    <span className="font-medium text-muted-foreground text-meta uppercase tracking-wide">
       Dependencies
     </span>
     <div className="space-y-1">{children}</div>
@@ -194,11 +194,11 @@ export const PackageInfoDependency = ({
   children,
   ...props
 }: PackageInfoDependencyProps) => (
-  <div className={cn("flex items-center justify-between text-sm", className)} {...props}>
+  <div className={cn("flex items-center justify-between text-body", className)} {...props}>
     {children ?? (
       <>
         <span className="font-mono text-muted-foreground">{name}</span>
-        {version && <span className="font-mono text-xs">{version}</span>}
+        {version && <span className="font-mono text-meta">{version}</span>}
       </>
     )}
   </div>

package/src/prompt-input-slash.stories.tsx

@@ -28,7 +28,7 @@ function Field({ commands = COMMANDS }: { commands?: SlashCommand[] }) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [text, setText] = useState("");
   return (
-    <div className="mx-auto w-[28rem]">
+    <div className="mx-auto w-full max-w-[28rem]">
       <PromptInput onSubmit={() => undefined}>
         <PromptInputSlash
           commands={commands}

package/src/prompt-input.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen, fireEvent, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {
@@ -107,6 +107,72 @@ describe("PromptInput — empty submissions are blocked", () => {
   });
 });
 
+describe("PromptInput — failed submit restores the composer (#1.9)", () => {
+  it("restores the typed text after a rejected async onSubmit", async () => {
+    const onSubmit = vi.fn(() => Promise.reject(new Error("network error")));
+    render(<Harness onSubmit={onSubmit} />);
+
+    const textarea = screen.getByPlaceholderText("Ask…") as HTMLTextAreaElement;
+    await userEvent.type(textarea, "hello{Enter}");
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    // form.reset() wipes the uncontrolled textarea before onSubmit even runs —
+    // a rejected promise must restore exactly what the user had typed.
+    await waitFor(() => expect(textarea.value).toBe("hello"));
+  });
+
+  it("restores the typed text after a synchronous onSubmit throw", async () => {
+    const onSubmit = vi.fn(() => {
+      throw new Error("boom");
+    });
+    render(<Harness onSubmit={onSubmit} />);
+
+    const textarea = screen.getByPlaceholderText("Ask…") as HTMLTextAreaElement;
+    await userEvent.type(textarea, "hello{Enter}");
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(textarea.value).toBe("hello"));
+  });
+});
+
+describe("PromptInput — in-flight guard blocks a duplicate submit (#1.9)", () => {
+  it("does not call onSubmit twice for a double Enter on an attachment-only message before the first submit settles", async () => {
+    // Attachments are only cleared once onSubmit resolves, so the submit
+    // control stays enabled (canSubmit = files.length > 0) while the first
+    // call is still pending — an in-flight ref, not the affordance, must
+    // stop a second Enter from re-sending the same attachment.
+    let resolveSubmit: (() => void) | undefined;
+    const onSubmit = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveSubmit = resolve;
+        }),
+    );
+    render(<Harness onSubmit={onSubmit} />);
+
+    const file = new File(["hello"], "notes.txt", { type: "text/plain" });
+    fireEvent.change(screen.getByLabelText("Upload files"), { target: { files: [file] } });
+
+    const textarea = screen.getByPlaceholderText("Ask…");
+    // Both Enters fire back-to-back, with NO await between them — the guard
+    // that matters here is the synchronous `isSubmittingRef` set before
+    // `handleSubmit`'s first `await` (the blob→data-URL conversion), not
+    // React re-rendering the (still-canSubmit) affordance in between.
+    fireEvent.keyDown(textarea, { key: "Enter" });
+    fireEvent.keyDown(textarea, { key: "Enter" });
+
+    // `handleSubmit` is async — `onSubmit` itself isn't called until after the
+    // attachment's blob→data-URL conversion microtask, so wait for it rather
+    // than asserting synchronously.
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    // Let the pending `onSubmit` promise's resolution (and the resulting
+    // `clear()`/state update) settle inside `act` before the test ends.
+    await act(async () => {
+      resolveSubmit?.();
+    });
+  });
+});
+
 describe("PromptInputSubmit — disabled affordance mirrors the guard", () => {
   it("marks itself aria-disabled at rest and clears it after typing", async () => {
     render(<Harness />);

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

@@ -9,6 +9,7 @@ import {
 } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import {
+  getStreamdownPluginsKey,
   useStreamdownMermaidOptions,
   useStreamdownPlugins,
   useStreamdownTranslations,
@@ -155,12 +156,12 @@ const defaultGetThinkingMessage = (
   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>{t("ai.reasoning.thoughtDefault")}</p>;
   }
-  return <p>Thought for {duration} seconds</p>;
+  return <p>{t("ai.reasoning.thoughtForDuration", { duration })}</p>;
 };
 
 export const ReasoningTrigger = memo(
@@ -171,7 +172,7 @@ export const ReasoningTrigger = memo(
     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}
@@ -213,7 +214,10 @@ 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();
@@ -221,14 +225,21 @@ export const ReasoningContent = memo(({ className, children, ...props }: Reasoni
   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} mermaid={mermaidOptions}>
+        <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.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();
+  });
+});