@elabs-ai/components-ai 4.1.0 → 4.2.0

package/src/conversation.test.tsx

@@ -16,6 +16,7 @@ import type { UIMessage } from "ai";
 import {
   Conversation,
   ConversationContent,
+  ConversationDownload,
   ConversationEmptyState,
   messagesToMarkdown,
 } from "./conversation";
@@ -69,6 +70,46 @@ describe("Conversation — transcript region", () => {
     expect(screen.getByRole("log")).toHaveClass("extra");
     expect(screen.getByRole("log")).toHaveClass("flex-1");
   });
+
+  it('defaults to aria-live="polite" and no aria-busy (not streaming)', () => {
+    render(
+      <Conversation>
+        <ConversationContent>x</ConversationContent>
+      </Conversation>,
+    );
+    const log = screen.getByRole("log");
+    expect(log).toHaveAttribute("aria-live", "polite");
+    expect(log).not.toHaveAttribute("aria-busy");
+  });
+
+  it('suppresses aria-live and sets aria-busy while isStreaming (perf review §2 — role="log" must not announce every token)', () => {
+    render(
+      <Conversation isStreaming>
+        <ConversationContent>x</ConversationContent>
+      </Conversation>,
+    );
+    const log = screen.getByRole("log");
+    expect(log).toHaveAttribute("aria-live", "off");
+    expect(log).toHaveAttribute("aria-busy", "true");
+  });
+
+  it("returns to aria-live=polite once streaming settles, so the final content is announced", () => {
+    const { rerender } = render(
+      <Conversation isStreaming>
+        <ConversationContent>partial</ConversationContent>
+      </Conversation>,
+    );
+    expect(screen.getByRole("log")).toHaveAttribute("aria-live", "off");
+
+    rerender(
+      <Conversation isStreaming={false}>
+        <ConversationContent>final</ConversationContent>
+      </Conversation>,
+    );
+    const log = screen.getByRole("log");
+    expect(log).toHaveAttribute("aria-live", "polite");
+    expect(log).not.toHaveAttribute("aria-busy");
+  });
 });
 
 describe("ConversationEmptyState", () => {
@@ -108,6 +149,18 @@ describe("ConversationEmptyState", () => {
   });
 });
 
+describe("ConversationDownload — accessible name (accessibility.md)", () => {
+  it("names the icon-only download control", () => {
+    render(<ConversationDownload messages={messages} />);
+    expect(screen.getByRole("button", { name: "Download conversation" })).toBeInTheDocument();
+  });
+
+  it("lets a caller override the accessible name", () => {
+    render(<ConversationDownload aria-label="Export chat" messages={messages} />);
+    expect(screen.getByRole("button", { name: "Export chat" })).toBeInTheDocument();
+  });
+});
+
 describe("messagesToMarkdown — the download serializer", () => {
   it("labels each message by role and joins every text part", () => {
     expect(messagesToMarkdown(messages)).toBe(

package/src/conversation.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, downloadBlob } from "@elabs-ai/components-ui";
+import { Button, downloadBlob, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import type { UIMessage } from "ai";
 import { ArrowDownIcon, DownloadIcon } from "lucide-react";
@@ -8,14 +8,27 @@ import type { ComponentProps } from "react";
 import { useCallback } from "react";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 
-export type ConversationProps = ComponentProps<typeof StickToBottom>;
+export type ConversationProps = ComponentProps<typeof StickToBottom> & {
+  /**
+   * The assistant response is still arriving (loading-states.md
+   * `isStreaming`). `role="log"` otherwise announces every incoming token to
+   * assistive tech as it streams in — deafening. While `true`, `aria-live`
+   * is suppressed (`"off"`) and `aria-busy` is set; once streaming ends,
+   * `aria-live` returns to `"polite"` so the settled content is what
+   * actually gets announced.
+   * @default false
+   */
+  isStreaming?: boolean;
+};
 
-export const Conversation = ({ className, ...props }: ConversationProps) => (
+export const Conversation = ({ className, isStreaming = false, ...props }: ConversationProps) => (
   <StickToBottom
     className={cn("relative flex-1 overflow-y-hidden", className)}
     initial="smooth"
     resize="smooth"
     role="log"
+    aria-live={isStreaming ? "off" : "polite"}
+    aria-busy={isStreaming || undefined}
     {...props}
   />
 );
@@ -68,8 +81,8 @@ export const ConversationEmptyState = ({
       <>
         {icon && <div className="text-muted-foreground">{icon}</div>}
         <div className="space-y-1">
-          <h3 className="font-medium text-sm">{title}</h3>
-          {description && <p className="text-muted-foreground text-sm">{description}</p>}
+          <h3 className="font-medium text-body">{title}</h3>
+          {description && <p className="text-muted-foreground text-body">{description}</p>}
         </div>
         {actions ? <div className="mt-1 flex items-center gap-2">{actions}</div> : null}
       </>
@@ -84,6 +97,7 @@ export const ConversationScrollButton = ({
   ...props
 }: ConversationScrollButtonProps) => {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  const { t } = useLocale();
 
   const handleScrollToBottom = useCallback(() => {
     scrollToBottom();
@@ -93,9 +107,16 @@ export const ConversationScrollButton = ({
     !isAtBottom && (
       <Button
         className={cn(
-          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
+          // Was `dark:bg-background dark:hover:bg-muted` — a hardcoded-dark
+          // branch invisible to any other registered theme (styling-and-tokens.md).
+          // `bg-background` already matches the `outline` variant's own default;
+          // the quieter `hover:bg-muted` (in place of `outline`'s default
+          // `hover:bg-accent`) now applies in every theme, not only the two
+          // shipped ones.
+          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full bg-background hover:bg-muted",
           className,
         )}
+        aria-label={t("ai.turnStatus.scrollToBottom")}
         onClick={handleScrollToBottom}
         size="icon"
         type="button"
@@ -138,6 +159,7 @@ export const ConversationDownload = ({
   children,
   ...props
 }: ConversationDownloadProps) => {
+  const { t } = useLocale();
   const handleDownload = useCallback(() => {
     const markdown = messagesToMarkdown(messages, formatMessage);
     downloadBlob(new Blob([markdown], { type: "text/markdown" }), filename);
@@ -146,9 +168,12 @@ export const ConversationDownload = ({
   return (
     <Button
       className={cn(
-        "absolute top-4 end-4 rounded-full dark:bg-background dark:hover:bg-muted",
+        // See `ConversationScrollButton` — was a hardcoded-dark-only branch;
+        // `bg-background hover:bg-muted` now applies in every theme.
+        "absolute top-4 end-4 rounded-full bg-background hover:bg-muted",
         className,
       )}
+      aria-label={t("ai.conversation.download")}
       onClick={handleDownload}
       size="icon"
       type="button"

package/src/diff-view.test.tsx

@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest";
-import { render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { type DiffLine } from "@elabs-ai/components-ui";
 import { DiffView } from "./diff-view";
@@ -162,6 +162,56 @@ describe("DiffView — pager (absorbs CodexDiff)", () => {
   });
 });
 
+describe("DiffView — old/new sides tokenize SEPARATELY (perf review §2 — a deleted comment opener must not swallow the added side)", () => {
+  afterEach(() => {
+    document.documentElement.removeAttribute("data-theme");
+    for (const token of [
+      "--code-foreground",
+      "--code-comment",
+      "--code-keyword",
+      "--code-number",
+    ]) {
+      document.documentElement.style.removeProperty(token);
+    }
+  });
+
+  it("does not let an unterminated block comment on the del side swallow the add side's tokens", async () => {
+    // Distinct resolved colors per scope (comment vs. keyword vs. number) so
+    // a merged/degenerate single-token line is distinguishable from a real,
+    // multi-token breakdown — see the module doc comment on `useDiffTokens`.
+    document.documentElement.setAttribute("data-theme", "light");
+    document.documentElement.style.setProperty("--code-foreground", "oklch(0.1 0 0)");
+    document.documentElement.style.setProperty("--code-comment", "oklch(0.5 0 0)");
+    document.documentElement.style.setProperty("--code-keyword", "oklch(0.3 0.2 260)");
+    document.documentElement.style.setProperty("--code-number", "oklch(0.4 0.2 140)");
+
+    const lines: DiffLine[] = [
+      { type: "del", oldNumber: 1, text: "/* unterminated" },
+      { type: "add", newNumber: 1, text: "const value = 1;" },
+    ];
+
+    const { container } = renderDiffView(<DiffView language="tsx" lines={lines} />);
+
+    // Combining old+new into ONE document (the bug) makes Shiki carry the
+    // del line's still-open `/*` across the line boundary, so the ENTIRE add
+    // line becomes one comment-colored token. Tokenized as its own document,
+    // `const value = 1;` is real code and splits into several distinctly
+    // colored spans.
+    await waitFor(() => {
+      const addLineText = container.querySelector(
+        '[data-diff-type="add"] [data-slot="diff-view-line-text"]',
+      );
+      const spans = addLineText?.querySelectorAll("span[style]") ?? [];
+      expect(spans.length).toBeGreaterThan(1);
+    });
+
+    const addLineText = container.querySelector(
+      '[data-diff-type="add"] [data-slot="diff-view-line-text"]',
+    );
+    expect(addLineText?.textContent).toContain("const value = 1;");
+  });
+});
+
 describe("DiffView — contextLines collapsing", () => {
   const longContext: DiffLine[] = Array.from({ length: 10 }, (_, i) => ({
     type: "context" as const,

package/src/diff-view.tsx

@@ -59,6 +59,7 @@ import { cva } from "class-variance-authority";
 import type { BundledLanguage, ThemedToken } from "shiki";
 import { highlightCode } from "./code-block";
 import { Shimmer } from "./shimmer";
+import { getThemeScope } from "./_theme-scope-store";
 
 // ─── Public types ───────────────────────────────────────────────────────────
 //
@@ -139,41 +140,27 @@ const MARKER_TONE: Record<"add" | "del" | "context", string> = {
   context: "text-muted-foreground",
 };
 
-// ─── Theme scope (mirrors code-block.tsx's private helper — not a fork of it) ──
-
-const getThemeScope = (el: Element | null): Element | null =>
-  el?.closest("[data-theme]") ??
-  (typeof document !== "undefined" ? document.documentElement : null);
+// `getThemeScope` (nearest `[data-theme]` ancestor, defaulting to `<html>`)
+// comes from the shared `_theme-scope-store` module — the exact same helper
+// `code-block.tsx` uses, not a second copy of it.
 
 // ─── Intra-line syntax highlighting ────────────────────────────────────────
 
 type TokenizedResult = NonNullable<ReturnType<typeof highlightCode>>;
 
 /**
- * Highlights only the lines that are real source (`add` / `del` / `context`)
- * as one combined document, so Shiki sees genuine surrounding context instead
- * of tokenizing each line in isolation, then maps the result back onto the
- * original line indices. `hunk` / `meta` lines are diff headers, not code, and
- * are excluded from the document entirely.
+ * Highlights ONE side's combined document (see `useDiffTokens` below) and
+ * returns the raw Shiki result once it resolves. `isStreaming` is forwarded
+ * to `highlightCode`'s `skipCache` — a streaming diff re-tokenizes a growing
+ * document on every line, and every intermediate value is never seen again,
+ * so permanently caching it is pure waste (perf review 1.4a/§3.2).
  */
-function useDiffTokens(
-  lines: DiffLine[],
+function useSideTokens(
+  combinedCode: string,
   language: BundledLanguage | undefined,
   scopeEl: Element | null,
-): Map<number, ThemedToken[]> | null {
-  const codeIndices = useMemo(
-    () =>
-      lines
-        .map((line, index) => ({ line, index }))
-        .filter(({ line }) => line.type !== "hunk" && line.type !== "meta")
-        .map(({ index }) => index),
-    [lines],
-  );
-  const combinedCode = useMemo(
-    () => codeIndices.map((index) => lines[index]?.text ?? "").join("\n"),
-    [codeIndices, lines],
-  );
-
+  isStreaming: boolean,
+): TokenizedResult | null {
   const [result, setResult] = useState<TokenizedResult | null>(null);
 
   useEffect(() => {
@@ -189,22 +176,90 @@ function useDiffTokens(
         if (!cancelled) setResult(r);
       },
       scopeEl,
+      isStreaming,
     );
     if (cached) setResult(cached);
     return () => {
       cancelled = true;
     };
-  }, [combinedCode, language, scopeEl]);
+  }, [combinedCode, language, scopeEl, isStreaming]);
+
+  return result;
+}
+
+/**
+ * Highlights the OLD file (`del` + `context` lines) and the NEW file (`add` +
+ * `context` lines) as two SEPARATE Shiki documents, then maps each back onto
+ * the original line indices. `hunk` / `meta` lines are diff headers, not
+ * code, and are excluded from both documents.
+ *
+ * The two sides used to be combined into ONE document (every real line,
+ * `del`/`add`/`context` alike, joined in original order). That let a
+ * still-open construct on one side leak its tokenizer STATE across the
+ * boundary onto the other — a deleted, unterminated `/*` opened a block
+ * comment that swallowed the immediately-following ADDED line as commented-out
+ * text, even though the two lines never coexist in either real version of the
+ * file. Tokenizing old/new as their own documents means Shiki only ever sees
+ * genuine same-version context around a construct.
+ */
+function useDiffTokens(
+  lines: DiffLine[],
+  language: BundledLanguage | undefined,
+  scopeEl: Element | null,
+  isStreaming: boolean,
+): Map<number, ThemedToken[]> | null {
+  const oldIndices = useMemo(
+    () =>
+      lines
+        .map((line, index) => ({ line, index }))
+        .filter(({ line }) => line.type === "del" || line.type === "context")
+        .map(({ index }) => index),
+    [lines],
+  );
+  const newIndices = useMemo(
+    () =>
+      lines
+        .map((line, index) => ({ line, index }))
+        .filter(({ line }) => line.type === "add" || line.type === "context")
+        .map(({ index }) => index),
+    [lines],
+  );
+
+  const oldCode = useMemo(
+    () => oldIndices.map((index) => lines[index]?.text ?? "").join("\n"),
+    [oldIndices, lines],
+  );
+  const newCode = useMemo(
+    () => newIndices.map((index) => lines[index]?.text ?? "").join("\n"),
+    [newIndices, lines],
+  );
+
+  const oldResult = useSideTokens(oldCode, language, scopeEl, isStreaming);
+  const newResult = useSideTokens(newCode, language, scopeEl, isStreaming);
 
   return useMemo(() => {
-    if (!language || !result) return null;
+    if (!language) return null;
     const map = new Map<number, ThemedToken[]>();
-    codeIndices.forEach((originalIndex, i) => {
-      const tokenLine = result.tokens[i];
-      if (tokenLine) map.set(originalIndex, tokenLine);
-    });
+    // `del` lines exist ONLY in the old-file document.
+    if (oldResult) {
+      oldIndices.forEach((originalIndex, i) => {
+        if (lines[originalIndex]?.type !== "del") return;
+        const tokenLine = oldResult.tokens[i];
+        if (tokenLine) map.set(originalIndex, tokenLine);
+      });
+    }
+    // `add` AND `context` lines come from the new-file document — a `context`
+    // line reads identically in both versions, and picking one consistently
+    // (rather than whichever side happened to resolve last) keeps its color
+    // stable across re-highlights.
+    if (newResult) {
+      newIndices.forEach((originalIndex, i) => {
+        const tokenLine = newResult.tokens[i];
+        if (tokenLine) map.set(originalIndex, tokenLine);
+      });
+    }
     return map;
-  }, [codeIndices, result, language]);
+  }, [oldIndices, newIndices, oldResult, newResult, language, lines]);
 }
 
 /** Renders pre-highlighted tokens; colour only (a diff row doesn't need bold/italic/underline). */
@@ -573,7 +628,7 @@ export const DiffView = forwardRef<HTMLDivElement, DiffViewProps>(function DiffV
     () => (maxLines ? lines.slice(0, maxLines) : lines),
     [lines, maxLines],
   );
-  const tokens = useDiffTokens(clippedLines, language, scopeEl);
+  const tokens = useDiffTokens(clippedLines, language, scopeEl, isStreaming);
   const { rows, expand } = useDiffRows(clippedLines, contextLines);
 
   const RowComponent = variant === "split" ? SplitRow : InlineRow;

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/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}