@elabs-ai/components-ai 4.0.0 → 4.2.0

package/src/environment-variables.tsx

@@ -4,18 +4,10 @@ import { Badge } from "@elabs-ai/components-ui";
 import { Button } from "@elabs-ai/components-ui";
 import { Switch } 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, EyeIcon, EyeOffIcon } from "lucide-react";
 import type { ComponentProps, HTMLAttributes } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
 
 interface EnvironmentVariablesContextType {
   showValues: boolean;
@@ -86,7 +78,7 @@ export const EnvironmentVariablesTitle = ({
   children,
   ...props
 }: EnvironmentVariablesTitleProps) => (
-  <h3 className={cn("font-medium text-sm", className)} {...props}>
+  <h3 className={cn("font-medium text-body", className)} {...props}>
     {children ?? "Environment Variables"}
   </h3>
 );
@@ -102,7 +94,7 @@ export const EnvironmentVariablesToggle = ({
 
   return (
     <div className={cn("flex items-center gap-2", className)}>
-      <span className="text-muted-foreground text-xs">
+      <span className="text-muted-foreground text-meta">
         {showValues ? <EyeIcon size={14} /> : <EyeOffIcon size={14} />}
       </span>
       <Switch
@@ -159,7 +151,7 @@ export const EnvironmentVariableName = ({
   const { name } = useContext(EnvironmentVariableContext);
 
   return (
-    <span className={cn("font-mono text-sm", className)} {...props}>
+    <span className={cn("font-mono text-body", className)} {...props}>
       {children ?? name}
     </span>
   );
@@ -180,7 +172,7 @@ export const EnvironmentVariableValue = ({
   return (
     <span
       className={cn(
-        "font-mono text-muted-foreground text-sm",
+        "font-mono text-muted-foreground text-body",
         !showValues && "select-none",
         className,
       )}
@@ -234,15 +226,19 @@ export type EnvironmentVariableCopyButtonProps = ComponentProps<typeof Button> &
 export const EnvironmentVariableCopyButton = ({
   onCopy,
   onError,
-  timeout = 2000,
+  timeout,
   copyFormat = "value",
   children,
   className,
+  "aria-label": ariaLabel,
   ...props
 }: EnvironmentVariableCopyButtonProps) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef<number>(0);
+  const { t } = useLocale();
   const { name, value } = useContext(EnvironmentVariableContext);
+  // 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({ resetAfterMs: timeout ?? 2000 });
 
   const getTextToCopy = useCallback((): string => {
     const formatMap = {
@@ -254,32 +250,19 @@ export const EnvironmentVariableCopyButton = ({
   }, [name, value, copyFormat]);
 
   const copyToClipboard = useCallback(async () => {
-    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
-      onError?.(new Error("Clipboard API not available"));
-      return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(getTextToCopy());
-      setIsCopied(true);
+    const ok = await copy(getTextToCopy());
+    if (ok) {
       onCopy?.();
-      timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
-    } catch (error) {
-      onError?.(error as Error);
+    } else {
+      onError?.(new Error("Clipboard API not available"));
     }
-  }, [getTextToCopy, onCopy, onError, timeout]);
-
-  useEffect(
-    () => () => {
-      window.clearTimeout(timeoutRef.current);
-    },
-    [],
-  );
+  }, [copy, getTextToCopy, onCopy, onError]);
 
   const Icon = isCopied ? CheckIcon : CopyIcon;
 
   return (
     <Button
+      aria-label={ariaLabel ?? t("copy")}
       className={cn("size-6 shrink-0", className)}
       onClick={copyToClipboard}
       size="icon"
@@ -298,7 +281,7 @@ export const EnvironmentVariableRequired = ({
   children,
   ...props
 }: EnvironmentVariableRequiredProps) => (
-  <Badge className={cn("text-xs", className)} variant="secondary" {...props}>
+  <Badge className={cn("text-meta", className)} variant="secondary" {...props}>
     {children ?? "Required"}
   </Badge>
 );

package/src/file-tree.test.tsx

@@ -25,6 +25,27 @@ describe("FileTree folder icons", () => {
   });
 });
 
+describe("FileTreeFolder expand/collapse control (accessibility.md — icon-only controls need aria-label)", () => {
+  it("names the chevron toggle, and flips the name with expanded state", async () => {
+    const user = userEvent.setup();
+    render(
+      <FileTree defaultExpanded={new Set()}>
+        <FileTreeFolder path="src" name="src">
+          <FileTreeFile path="src/index.ts" name="index.ts" />
+        </FileTreeFolder>
+      </FileTree>,
+    );
+
+    const toggle = screen.getByRole("button", { name: "Expand src" });
+    expect(toggle).toBeInTheDocument();
+
+    await user.click(toggle);
+
+    expect(screen.getByRole("button", { name: "Collapse src" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Expand src" })).not.toBeInTheDocument();
+  });
+});
+
 describe("FileTree variant axis (#193, research 04 §4 ASSET-1)", () => {
   it("keeps the IDE look by default (code variant — non-breaking)", () => {
     const { container } = render(

package/src/file-tree.tsx

@@ -5,6 +5,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
   fileIconFor,
+  useLocale,
 } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -50,7 +51,7 @@ const FileTreeContext = createContext<FileTreeContextType>({
 const fileTreeVariants = cva("", {
   variants: {
     variant: {
-      code: "rounded-lg border bg-background font-mono text-sm",
+      code: "rounded-lg border bg-background font-mono text-body",
       document: "text-body",
     },
   },
@@ -158,6 +159,7 @@ export const FileTreeFolder = ({
   children,
   ...props
 }: FileTreeFolderProps) => {
+  const { t } = useLocale();
   const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
   const isExpanded = expandedPaths.has(path);
   const isSelected = selectedPath === path;
@@ -184,10 +186,15 @@ export const FileTreeFolder = ({
           >
             <CollapsibleTrigger asChild>
               <button
+                aria-label={t(
+                  isExpanded ? "ai.fileTree.collapseFolder" : "ai.fileTree.expandFolder",
+                  { name },
+                )}
                 className="flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0"
                 type="button"
               >
                 <ChevronRightIcon
+                  aria-hidden="true"
                   className={cn(
                     "size-4 shrink-0 text-muted-foreground transition-transform",
                     isExpanded && "rotate-90",
@@ -353,6 +360,7 @@ export type ProducedAssetTreeProps = Omit<
  */
 export const ProducedAssetTree = forwardRef<HTMLDivElement, ProducedAssetTreeProps>(
   function ProducedAssetTree({ assets, selectedId, onSelect, ...props }, ref) {
+    const { t } = useLocale();
     const assetsById = useMemo(() => new Map(assets.map((asset) => [asset.id, asset])), [assets]);
     const handleSelect = useCallback(
       (path: string) => {
@@ -370,7 +378,9 @@ export const ProducedAssetTree = forwardRef<HTMLDivElement, ProducedAssetTreePro
         {...props}
       >
         {assets.length === 0 ? (
-          <p className="px-2 py-1 text-body text-muted-foreground">No assets produced yet.</p>
+          <p className="px-2 py-1 text-body text-muted-foreground">
+            {t("ai.fileTree.noAssetsProduced")}
+          </p>
         ) : (
           assets.map((asset) => {
             const Icon = assetIcon(asset);

package/src/gallery.tsx

@@ -317,10 +317,11 @@ function GalleryTilt({ className, children }: { className?: string; children: Re
 }
 
 function GalleryEmpty() {
+  const { t } = useLocale();
   return (
     <div className="flex min-h-32 flex-col items-center justify-center gap-2 p-6 text-center text-muted-foreground">
       <ImageOff className="size-6" aria-hidden="true" />
-      <p className="text-body">No images</p>
+      <p className="text-body">{t("ai.gallery.noImages")}</p>
     </div>
   );
 }
@@ -485,6 +486,7 @@ function GalleryDetailPanel({
   index: number;
   renderMeta?: GalleryProps["renderMeta"];
 }) {
+  const { t } = useLocale();
   const custom = renderMeta?.(image, index);
   if (custom != null) {
     return <div className="flex flex-col gap-4">{custom}</div>;
@@ -494,7 +496,7 @@ function GalleryDetailPanel({
   const hasBody = Boolean(image.description) || hasMeta;
 
   if (!hasBody) {
-    return <p className="text-body text-muted-foreground">No details</p>;
+    return <p className="text-body text-muted-foreground">{t("ai.gallery.noDetails")}</p>;
   }
 
   return (

package/src/index.ts

@@ -20,11 +20,13 @@
  * See ATTRIBUTION.md and .claude/rules/attribution.md.
  */
 export * from "./agent";
+export * from "./agent-event";
 export * from "./agent-timeline";
 export * from "./artifact";
 export * from "./asset-preview";
 export * from "./attachments";
 export * from "./audio-player";
+export * from "./audio-visualizer";
 export * from "./canvas";
 export * from "./chain-of-thought";
 export * from "./chat-greeting";
@@ -34,10 +36,10 @@ export * from "./commit";
 export * from "./composer";
 export * from "./confirmation";
 export * from "./connection";
-export * from "./context";
 export * from "./context-panel";
 export * from "./controls";
 export * from "./conversation";
+export * from "./diff-view";
 export * from "./edge";
 export * from "./environment-variables";
 export * from "./file-tree";
@@ -45,13 +47,13 @@ export * from "./gallery";
 export * from "./grouped-parts";
 export * from "./image";
 export * from "./inline-citation";
-export * from "./interactive-terminal";
 export * from "./jsx-preview";
 // Mermaid loads on first diagram render, not in the entry chunk. `preloadMermaid`
 // warms it early when a surface is known to render diagrams.
 export { createLazyMermaidPlugin, lazyMermaid, preloadMermaid } from "./_lazy-mermaid";
 export * from "./markdown-view";
 export * from "./message";
+export * from "./message-compare";
 export * from "./message-edit";
 export * from "./message-feedback";
 export * from "./message-form";
@@ -59,21 +61,27 @@ export * from "./message-form-spec";
 export * from "./message-table";
 export * from "./message-table-spec";
 export * from "./mic-selector";
-export * from "./model-selector";
+export * from "./model-provider-logo";
 export * from "./motion-config";
 export * from "./node";
 export * from "./open-in-chat";
 export * from "./package-info";
 export * from "./panel";
 export * from "./part-groups";
+export * from "./permission-mode-select";
 export * from "./persona";
 export * from "./plan";
 export * from "./prompt-input";
+export * from "./prompt-input-effort";
+export * from "./prompt-input-mode";
+export * from "./prompt-input-slash";
 export * from "./queue";
 export * from "./reasoning";
 export * from "./sandbox";
 export * from "./schema-display";
 export * from "./selection-toolbar";
+export * from "./session-header";
+export * from "./session-status-bar";
 export * from "./shimmer";
 export * from "./snippet";
 export * from "./sources";
@@ -81,12 +89,14 @@ export * from "./speech-input";
 export * from "./stack-trace";
 export * from "./suggestion";
 export * from "./task";
-export * from "./terminal";
 export * from "./test-results";
+export * from "./token-usage";
 export * from "./tool";
 export * from "./tool-result-card";
 export * from "./toolbar";
 export * from "./transcription";
+export * from "./turn-status";
+export * from "./use-audio-level";
 export * from "./voice-selector";
 export * from "./web-preview";
 

package/src/inline-citation.tsx

@@ -208,7 +208,7 @@ export const InlineCitationCarouselIndex = ({
   return (
     <div
       className={cn(
-        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
+        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-meta",
         className,
       )}
       {...props}
@@ -289,10 +289,10 @@ export const InlineCitationSource = ({
   ...props
 }: InlineCitationSourceProps) => (
   <div className={cn("space-y-1", className)} {...props}>
-    {title && <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>}
-    {url && <p className="truncate break-all text-muted-foreground text-xs">{url}</p>}
+    {title && <h4 className="truncate font-medium text-body leading-tight">{title}</h4>}
+    {url && <p className="truncate break-all text-muted-foreground text-meta">{url}</p>}
     {description && (
-      <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">{description}</p>
+      <p className="line-clamp-3 text-muted-foreground text-body leading-relaxed">{description}</p>
     )}
     {children}
   </div>
@@ -306,7 +306,7 @@ export const InlineCitationQuote = ({
   ...props
 }: InlineCitationQuoteProps) => (
   <blockquote
-    className={cn("border-muted border-s-2 ps-3 text-muted-foreground text-sm italic", className)}
+    className={cn("border-muted border-s-2 ps-3 text-muted-foreground text-body italic", className)}
     {...props}
   >
     {children}

package/src/jsx-preview.stories.tsx

@@ -18,7 +18,7 @@ function Stat({ label, value, delta }: { label: string; value: string; delta?: s
     <div className="rounded-lg border bg-card p-4 text-card-foreground">
       <div className="text-meta text-muted-foreground">{label}</div>
       <div className="text-title tabular-nums">{value}</div>
-      {delta ? <div className="text-caption text-primary">{delta}</div> : null}
+      {delta ? <div className="text-caption text-primary-text">{delta}</div> : null}
     </div>
   );
 }
@@ -50,7 +50,7 @@ const DASHBOARD =
   "</div>";
 
 const meta = {
-  title: "AI/JSX Preview",
+  title: "AI/JSXPreview",
   component: JSXPreview,
   parameters: { layout: "padded" },
 } satisfies Meta<typeof JSXPreview>;

package/src/jsx-preview.tsx

@@ -46,7 +46,23 @@ interface JSXPreviewContextValue {
 
 const JSXPreviewContext = createContext<JSXPreviewContextValue | null>(null);
 
-const TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/;
+/**
+ * HTML elements that must never render from agent/model-authored JSX: script
+ * execution, style/link/meta/base injection, and embeddable third-party
+ * surfaces (iframe/object/embed) or a form that could post data out. Merged
+ * with `react-jsx-parser`'s own default (`script`) via `blacklistedTags`.
+ */
+const JSX_PREVIEW_BLACKLISTED_TAGS = [
+  "script",
+  "style",
+  "iframe",
+  "form",
+  "object",
+  "embed",
+  "link",
+  "meta",
+  "base",
+];
 
 export const useJSXPreview = () => {
   const context = useContext(JSXPreviewContext);
@@ -56,37 +72,101 @@ export const useJSXPreview = () => {
   return context;
 };
 
-const matchJsxTag = (code: string) => {
-  if (code.trim() === "") {
-    return null;
-  }
+const TAG_NAME_START = /[a-zA-Z]/;
+const TAG_NAME_CHAR = /[a-zA-Z0-9]/;
 
-  const match = code.match(TAG_REGEX);
+interface JsxTagMatch {
+  tagName: string;
+  type: "opening" | "closing" | "self-closing";
+  endIndex: number;
+}
 
-  if (!match || match.index === undefined) {
-    return null;
-  }
+/**
+ * Finds the next complete JSX tag at or after `fromIndex`, tracking brace
+ * depth and quoted strings so a `>` inside an attribute expression (e.g.
+ * `onClick={() => foo()}`) is never mistaken for the tag's own closing
+ * bracket (the previous plain regex did exactly that). Walks the ORIGINAL
+ * string by absolute index — no per-iteration substring slicing — so one
+ * pass over the whole input is linear.
+ */
+function findNextJsxTag(code: string, fromIndex: number): JsxTagMatch | null {
+  const len = code.length;
+  let i = fromIndex;
+
+  while (i < len) {
+    if (code[i] !== "<") {
+      i++;
+      continue;
+    }
 
-  const [fullMatch = "", tagName = "", attributes = "", selfClosing] = match;
+    let j = i + 1;
+    const closing = code[j] === "/";
+    if (closing) j++;
 
-  let type: "self-closing" | "closing" | "opening";
-  if (selfClosing) {
-    type = "self-closing";
-  } else if (fullMatch.startsWith("</")) {
-    type = "closing";
-  } else {
-    type = "opening";
+    const nameStart = j;
+    if (!TAG_NAME_START.test(code[nameStart] ?? "")) {
+      i++;
+      continue;
+    }
+    j++;
+    while (j < len && TAG_NAME_CHAR.test(code[j] ?? "")) {
+      j++;
+    }
+    const tagName = code.slice(nameStart, j);
+
+    let depth = 0;
+    let quote: string | null = null;
+    let k = j;
+    let closedAt = -1;
+    let selfClosing = false;
+
+    while (k < len) {
+      const ch = code[k];
+      if (quote) {
+        if (ch === quote) quote = null;
+        k++;
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        quote = ch;
+        k++;
+        continue;
+      }
+      if (ch === "{") {
+        depth++;
+        k++;
+        continue;
+      }
+      if (ch === "}") {
+        depth = Math.max(0, depth - 1);
+        k++;
+        continue;
+      }
+      if (depth === 0 && ch === ">") {
+        let p = k - 1;
+        while (p > j && code[p] === " ") p--;
+        selfClosing = code[p] === "/";
+        closedAt = k + 1;
+        break;
+      }
+      k++;
+    }
+
+    // No closing '>' yet for this tag at this depth — it is incomplete, not
+    // a match; the caller treats everything from here on as trailing text.
+    if (closedAt === -1) {
+      return null;
+    }
+
+    return {
+      endIndex: closedAt,
+      tagName,
+      type: closing ? "closing" : selfClosing ? "self-closing" : "opening",
+    };
   }
 
-  return {
-    attributes: attributes.trim(),
-    endIndex: match.index + fullMatch.length,
-    startIndex: match.index,
-    tag: fullMatch,
-    tagName,
-    type,
-  };
-};
+  return null;
+}
 
 const stripIncompleteTag = (text: string) => {
   // Find the last '<' that isn't part of a complete tag
@@ -106,32 +186,28 @@ const stripIncompleteTag = (text: string) => {
 
 const completeJsxTag = (code: string) => {
   const stack: string[] = [];
-  let result = "";
-  let currentPosition = 0;
+  let position = 0;
 
-  while (currentPosition < code.length) {
-    const match = matchJsxTag(code.slice(currentPosition));
+  while (position < code.length) {
+    const match = findNextJsxTag(code, position);
     if (!match) {
-      // No more tags found, strip any trailing incomplete tag
-      result += stripIncompleteTag(code.slice(currentPosition));
+      // No more complete tags ahead; everything past `position` is trailing
+      // text (possibly a mid-typed tag), handled by stripIncompleteTag below.
       break;
     }
-    const { tagName, type, endIndex } = match;
 
-    // Include any text content before this tag
-    result += code.slice(currentPosition, currentPosition + endIndex);
-
-    if (type === "opening") {
-      stack.push(tagName);
-    } else if (type === "closing") {
+    if (match.type === "opening") {
+      stack.push(match.tagName);
+    } else if (match.type === "closing") {
       stack.pop();
     }
 
-    currentPosition += endIndex;
+    position = match.endIndex;
   }
 
   return (
-    result +
+    code.slice(0, position) +
+    stripIncompleteTag(code.slice(position)) +
     [...stack]
       .reverse()
       .map((tag) => `</${tag}>`)
@@ -139,6 +215,35 @@ const completeJsxTag = (code: string) => {
   );
 };
 
+/** How often `completeJsxTag` may re-run while content is still streaming in. */
+const STREAM_RECOMPUTE_THROTTLE_MS = 80;
+
+/**
+ * Tag-balances `jsx` like `completeJsxTag`, but while `isStreaming` is true it
+ * skips a fresh (expensive, whole-string) recompute more often than once per
+ * `STREAM_RECOMPUTE_THROTTLE_MS` — otherwise every incoming token re-scans the
+ * entire accumulated string from scratch. Settled input (`isStreaming` false)
+ * always recomputes immediately so the final render is exact.
+ */
+function useCompletedJsx(jsx: string, isStreaming: boolean): string {
+  const cacheRef = useRef({ jsx, result: completeJsxTag(jsx), time: 0 });
+
+  return useMemo(() => {
+    const cache = cacheRef.current;
+    if (jsx === cache.jsx) return cache.result;
+
+    const now = Date.now();
+    if (isStreaming && now - cache.time < STREAM_RECOMPUTE_THROTTLE_MS) {
+      return cache.result;
+    }
+
+    const result = completeJsxTag(jsx);
+    cacheRef.current = { jsx, result, time: now };
+    return result;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- cacheRef is a stable ref, not reactive state
+  }, [jsx, isStreaming]);
+}
+
 export type JSXPreviewProps = ComponentProps<"div"> & {
   jsx: string;
   /** Content is arriving incrementally — build up, suppress transient errors. */
@@ -177,8 +282,9 @@ export const JSXPreview = memo(
 
     // The tag-balanced best-effort of the current input. When it differs from the
     // raw jsx, the input ends mid-tag → it is INCOMPLETE (still streaming / being
-    // typed), not invalid. This is the timer-free "not-ready" signal.
-    const completed = useMemo(() => completeJsxTag(jsx), [jsx]);
+    // typed), not invalid. This is the timer-free "not-ready" signal. Throttled
+    // while streaming so every incoming token doesn't re-scan the whole string.
+    const completed = useCompletedJsx(jsx, isStreaming);
     const isIncomplete = jsx.trim() !== "" && completed !== jsx;
 
     const processedJsx = useMemo(() => {
@@ -293,7 +399,9 @@ export const JSXPreviewContent = memo(({ className, ...props }: JSXPreviewConten
   return (
     <div className={cn("jsx-preview-content", className)} {...props}>
       <JsxParser
+        allowUnknownElements={false}
         bindings={bindings}
+        blacklistedTags={JSX_PREVIEW_BLACKLISTED_TAGS}
         components={components}
         jsx={displayJsx}
         onError={handleError}