npm - @elabs-ai/components-ai - Versions diffs - 4.1.0 → 4.2.0 - Mend

@elabs-ai/components-ai 4.1.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/README.md +2 -2
package/dist/index.d.ts +43 -16
package/dist/index.js +1297 -926
package/dist/index.js.map +1 -1
package/package.json +9 -9
package/src/__contract__/audio-visualizer.contract.test.tsx +49 -0
package/src/__contract__/chat-shell.contract.test.tsx +49 -0
package/src/__contract__/grouped-parts.contract.test.tsx +49 -0
package/src/__contract__/image.contract.test.tsx +49 -0
package/src/__contract__/markdown-view.contract.test.tsx +49 -0
package/src/__contract__/message-feedback.contract.test.tsx +49 -0
package/src/__contract__/message-form.contract.test.tsx +49 -0
package/src/__contract__/message-table.contract.test.tsx +49 -0
package/src/__contract__/model-provider-logo.contract.test.tsx +49 -0
package/src/__contract__/persona.contract.test.tsx +49 -0
package/src/__contract__/prompt-input-effort.contract.test.tsx +49 -0
package/src/__contract__/prompt-input-mode.contract.test.tsx +49 -0
package/src/_chat-shell-rail.tsx +2 -2
package/src/_lazy-cjk.test.ts +43 -0
package/src/_lazy-cjk.ts +73 -0
package/src/_lazy-math.test.ts +63 -0
package/src/_lazy-math.ts +90 -0
package/src/_streamdown-i18n.ts +73 -21
package/src/_streamdown-safety.ts +2 -2
package/src/_theme-scope-store.test.ts +83 -0
package/src/_theme-scope-store.ts +103 -0
package/src/agent-event.tsx +1 -1
package/src/agent.tsx +18 -13
package/src/artifact.tsx +2 -2
package/src/asset-preview.test.tsx +40 -0
package/src/asset-preview.tsx +83 -12
package/src/attachments.tsx +7 -4
package/src/code-block.test.tsx +100 -1
package/src/code-block.tsx +166 -103
package/src/commit.tsx +30 -41
package/src/confirmation.tsx +1 -1
package/src/context-panel.tsx +1 -1
package/src/conversation.stories.tsx +23 -0
package/src/conversation.test.tsx +53 -0
package/src/conversation.tsx +32 -7
package/src/diff-view.test.tsx +52 -2
package/src/diff-view.tsx +89 -34
package/src/environment-variables.tsx +20 -37
package/src/file-tree.test.tsx +21 -0
package/src/file-tree.tsx +12 -2
package/src/inline-citation.tsx +5 -5
package/src/jsx-preview.tsx +151 -43
package/src/markdown-view.test.tsx +7 -3
package/src/markdown-view.tsx +8 -1
package/src/message-form.stories.tsx +36 -3
package/src/message-form.test.tsx +8 -2
package/src/message-form.tsx +15 -7
package/src/message-table.stories.tsx +2 -2
package/src/message-table.test.tsx +7 -0
package/src/message-table.tsx +8 -4
package/src/message.test.tsx +73 -3
package/src/message.tsx +36 -12
package/src/model-provider-logo.test.tsx +57 -3
package/src/model-provider-logo.tsx +45 -11
package/src/open-in-chat.tsx +50 -29
package/src/package-info.tsx +12 -12
package/src/prompt-input-slash.stories.tsx +1 -1
package/src/prompt-input.test.tsx +67 -1
package/src/prompt-input.tsx +42 -4
package/src/queue.tsx +4 -4
package/src/reasoning.tsx +17 -6
package/src/sandbox.tsx +3 -3
package/src/schema-display.test.tsx +56 -0
package/src/schema-display.tsx +68 -37
package/src/session-header.tsx +1 -1
package/src/snippet.test.tsx +6 -2
package/src/snippet.tsx +14 -34
package/src/speech-input.test.tsx +109 -0
package/src/speech-input.tsx +31 -3
package/src/stack-trace.tsx +20 -36
package/src/streamdown-i18n.test.tsx +23 -0
package/src/test-results.tsx +47 -27
package/src/token-usage.tsx +6 -6
package/src/tool.test.tsx +65 -0
package/src/tool.tsx +59 -23
package/src/transcription.tsx +1 -1
package/src/voice-selector.tsx +5 -5
package/src/web-preview.test.tsx +51 -1
package/src/web-preview.tsx +39 -8

package/src/code-block.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
-import { Button, useLocale } from "@elabs-ai/components-ui";
+import { Button, useCopyToClipboard, useLocale } from "@elabs-ai/components-ui";
 import {
   Select,
   SelectContent,
@@ -20,6 +20,7 @@ import {
   useEffect,
   useLayoutEffect,
   useMemo,
+  useReducer,
   useRef,
   useState,
 } from "react";
@@ -27,17 +28,7 @@ import type { BundledLanguage, BundledTheme, HighlighterGeneric, ThemedToken } f
 import { createHighlighter } from "shiki";
 import { buildCodeBlockTheme, codeBlockThemeId, getThemeScopeKey } from "./_code-block-theme";
-/**
- * Nearest ancestor (inclusive) carrying `data-theme`, defaulting to `<html>`.
- * Lets a CodeBlock rendered inside a region-scoped `<div data-theme="…">`
- * (a supported `ThemeProvider`/decorator pattern — see
- * @.claude/rules/theming.md) resolve THAT region's `--code-*` tokens instead
- * of always the document root's (#315 follow-up).
- */
-const getThemeScope = (el: Element | null): Element | null =>
-  el?.closest("[data-theme]") ??
-  (typeof document !== "undefined" ? document.documentElement : null);
+import { getThemeScope, useThemeScopeRevision } from "./_theme-scope-store";
 // Shiki uses bitflags for font styles: 1=italic, 2=bold, 4=underline
 // oxlint-disable-next-line eslint(no-bitwise)
@@ -158,12 +149,54 @@ const highlighterCache = new Map<
   Promise<HighlighterGeneric<BundledLanguage, BundledTheme>>
 >();
-// Token cache
+// Token cache — bounded to the `MAX_TOKENS_CACHE_ENTRIES` most recently used
+// entries (perf review 1.4a). Unbounded growth showed up while streaming: a
+// growing code string re-tokenizes on every token, and every intermediate
+// string used to get its own permanent cache entry — O(n²) memory that was
+// never released for the lifetime of the tab.
+const MAX_TOKENS_CACHE_ENTRIES = 200;
 const tokensCache = new Map<string, TokenizedCode>();
+/** Reads `key`, marking it most-recently-used (moves it to the end). */
+const tokensCacheGet = (key: string): TokenizedCode | undefined => {
+  const value = tokensCache.get(key);
+  if (value === undefined) return undefined;
+  tokensCache.delete(key);
+  tokensCache.set(key, value);
+  return value;
+};
+/** Writes `key`, evicting the least-recently-used entries over the cap. */
+const tokensCacheSet = (key: string, value: TokenizedCode): void => {
+  tokensCache.delete(key);
+  tokensCache.set(key, value);
+  while (tokensCache.size > MAX_TOKENS_CACHE_ENTRIES) {
+    const oldestKey = tokensCache.keys().next().value;
+    if (oldestKey === undefined) break;
+    tokensCache.delete(oldestKey);
+  }
+};
 // Subscribers for async token updates
 const subscribers = new Map<string, Set<(result: TokenizedCode) => void>>();
+// FNV-1a 32-bit — cheap, and (unlike the previous length + first/last 100
+// chars key) hashes the FULL string, so two different strings of the same
+// length sharing a prefix and suffix longer than 100 chars (an edit to the
+// MIDDLE of a >200-char block — the common case for a diff or a streamed
+// correction) no longer collide onto the same cache entry and show stale,
+// wrong-content highlighting (#perf 1.4b).
+const hashCode = (value: string): string => {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < value.length; i++) {
+    // oxlint-disable-next-line eslint(no-bitwise)
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  // oxlint-disable-next-line eslint(no-bitwise)
+  return (hash >>> 0).toString(36);
+};
 // The theme id is part of the cache key (#315) — the SAME code+language must
 // re-tokenize (and re-cache) when the active brand theme changes, or a code
 // block would keep showing stale colors from the theme active when it was
@@ -176,11 +209,8 @@ const subscribers = new Map<string, Set<(result: TokenizedCode) => void>>();
 // the validated name would let the pre-mount render's `:root` colors poison
 // the cache under the key `ThemeProvider` later writes explicitly, and they'd
 // never be replaced.
-const getTokensCacheKey = (code: string, language: BundledLanguage, themeId: string) => {
-  const start = code.slice(0, 100);
-  const end = code.length > 100 ? code.slice(-100) : "";
-  return `${themeId}:${language}:${code.length}:${start}:${end}`;
-};
+const getTokensCacheKey = (code: string, language: BundledLanguage, themeId: string) =>
+  `${themeId}:${language}:${code.length}:${hashCode(code)}`;
 const getHighlighter = (
   language: BundledLanguage,
@@ -225,18 +255,27 @@ const createRawTokens = (code: string): TokenizedCode => ({
 // whose active brand theme's `--code-*` tokens the highlighter derives its
 // colors from. Passing a descendant of a region-scoped `<div data-theme="…">`
 // resolves THAT region's theme instead of the document root's.
+//
+// `skipCache` (fifth, purely-additive parameter, default `false`) is set by a
+// caller mid-stream (perf review 1.4a): a streaming code block re-tokenizes a
+// GROWING string on every token, so every intermediate value is, by
+// definition, never seen again — permanently caching it only pays rent
+// (bounded now by the LRU cap, but still pure waste) without ever paying off
+// with a hit. A cache HIT (the final, settled string matches an
+// already-cached entry) is still honored either way.
 export const highlightCode = (
   code: string,
   language: BundledLanguage,
   // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-callbacks)
   callback?: (result: TokenizedCode) => void,
   el?: Element | null,
+  skipCache = false,
 ): TokenizedCode | null => {
   const themeId = codeBlockThemeId(getThemeScopeKey(el));
   const tokensCacheKey = getTokensCacheKey(code, language, themeId);
   // Return cached result if available
-  const cached = tokensCache.get(tokensCacheKey);
+  const cached = tokensCacheGet(tokensCacheKey);
   if (cached) {
     return cached;
   }
@@ -269,8 +308,11 @@ export const highlightCode = (
         tokens: result.tokens,
       };
-      // Cache the result
-      tokensCache.set(tokensCacheKey, tokenized);
+      // Cache the result — unless the caller told us it is mid-stream, in
+      // which case this exact string is very unlikely to recur.
+      if (!skipCache) {
+        tokensCacheSet(tokensCacheKey, tokenized);
+      }
       // Notify all subscribers
       const subs = subscribers.get(tokensCacheKey);
@@ -314,12 +356,12 @@ const CodeBlockBody = memo(
     return (
       <pre
-        className={cn("m-0 p-4 text-sm", wrap && "whitespace-pre-wrap break-words", className)}
+        className={cn("m-0 p-4 text-body", wrap && "whitespace-pre-wrap break-words", className)}
         style={preStyle}
       >
         <code
           className={cn(
-            "font-mono text-sm",
+            "font-mono text-body",
             showLineNumbers && "[counter-increment:line_0] [counter-reset:line]",
           )}
         >
@@ -367,7 +409,7 @@ export const CodeBlockHeader = ({
 }: HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-xs",
+      "flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-meta",
       className,
     )}
     {...props}
@@ -406,45 +448,46 @@ export const CodeBlockActions = ({
   </div>
 );
+// Streaming re-highlight throttle (perf review 1.4e / §3.2): re-tokenizing
+// on every single streamed token is O(n²) work over the life of a response.
+// At most one highlight pass per window, ALWAYS with a trailing call so the
+// final, settled string still gets highlighted the moment streaming stops.
+const STREAM_HIGHLIGHT_THROTTLE_MS = 200;
 export const CodeBlockContent = ({
   code,
   language,
   showLineNumbers = false,
   wrap = false,
+  isStreaming = false,
 }: {
   code: string;
   language: BundledLanguage;
   showLineNumbers?: boolean;
   wrap?: boolean;
+  isStreaming?: boolean;
 }) => {
   // Track the active brand theme (#315), SCOPED to this code block's own
   // subtree (`getThemeScope`) rather than always `<html>` — so a CodeBlock
   // nested inside a region-scoped `<div data-theme="dark">` (a supported
   // ThemeProvider/decorator pattern) picks up THAT region's `--code-*` tokens,
-  // not the document root's. A MutationObserver on the resolved scope element
-  // re-derives the Shiki theme — and any already-highlighted code — whenever
-  // that region's `data-theme` changes.
+  // not the document root's. `useThemeScopeRevision` (`_theme-scope-store.ts`)
+  // shares ONE MutationObserver per scope element across every subscriber
+  // watching it, instead of one per `CodeBlock` instance (perf review §3.3).
   const scopeRef = useRef<HTMLDivElement>(null);
-  const [themeRevision, setThemeRevision] = useState(0);
+  // The ref only attaches after the first commit, so the scope resolved
+  // during the initial render (before mount) may have fallen back to
+  // `<html>`. Force one more render right after mount — synchronously, before
+  // paint, via `useLayoutEffect` — so a scoped code block never flashes the
+  // document root's colors first; `useThemeScopeRevision` re-subscribes to
+  // the now-correct scope on that render.
+  const [, forceMountRerender] = useReducer((tick: number) => tick + 1, 0);
   useLayoutEffect(() => {
-    if (typeof document === "undefined") return;
-    // The ref only attaches after this first commit, so the scope resolved
-    // during the initial render (before mount) may have fallen back to
-    // `<html>`. Bump the revision now — synchronously, before paint, via
-    // `useLayoutEffect` — so a scoped code block never flashes the document
-    // root's colors first.
-    const scope = getThemeScope(scopeRef.current);
-    setThemeRevision((r) => r + 1);
-    const observer = new MutationObserver(() => setThemeRevision((r) => r + 1));
-    observer.observe(scope ?? document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"],
-    });
-    return () => observer.disconnect();
+    forceMountRerender();
   }, []);
   const scopeEl = getThemeScope(scopeRef.current);
+  const themeRevision = useThemeScopeRevision(scopeRef.current);
   // Keyed on the RAW `data-theme` scope, not the validated theme name (#315
   // follow-up) — see `_code-block-theme.ts`'s module doc comment. An unset
   // attribute (the pre-mount render) and an explicit `data-theme="light"`
@@ -452,25 +495,27 @@ export const CodeBlockContent = ({
   // mean this memo's dependency doesn't CHANGE across that mutation and the
   // stale `:root`-tokenized colors would never be recomputed once
   // `ThemeProvider` mounts and writes the attribute explicitly.
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- themeRevision is the trigger; the scope key itself is re-read live off scopeEl.
-  const themeScopeKey = useMemo(() => getThemeScopeKey(scopeEl), [themeRevision]);
+  const themeScopeKey = useMemo(
+    () => getThemeScopeKey(scopeEl),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- themeRevision is the trigger; scopeEl's own identity already changes across the post-mount re-render above.
+    [themeRevision, scopeEl],
+  );
   // Memoized raw tokens for immediate display
   const rawTokens = useMemo(() => createRawTokens(code), [code]);
-  // Synchronous cache lookup — avoids setState in effect for cached results.
-  // `themeScopeKey` isn't read directly below (highlightCode re-derives it from
-  // `scopeEl` itself), but it MUST stay a dependency: a theme switch mutates
-  // the SAME scope element's `data-theme` attribute, so `scopeEl`'s object
-  // identity never changes — `themeScopeKey` (keyed on `themeRevision`) is the
-  // only signal that tells this memo to re-tokenize.
-  const syncTokens = useMemo(
-    () => highlightCode(code, language, undefined, scopeEl) ?? rawTokens,
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- themeScopeKey is required to trigger recompute; see comment above.
-    [code, language, themeScopeKey, scopeEl, rawTokens],
-  );
+  // Synchronous cache PEEK — a plain, side-effect-free `Map.get`, never a
+  // call into `highlightCode` (the OLD code called it here with no callback,
+  // AND again in the effect below with one; on a cache miss both calls
+  // independently kicked off `getHighlighter(language).then(...)` and
+  // computed `codeToTokens` for the SAME code twice — perf review 1.4d).
+  // Highlighting is now triggered from exactly ONE place: the effect.
+  const themeId = codeBlockThemeId(themeScopeKey);
+  const tokensCacheKey = getTokensCacheKey(code, language, themeId);
+  const syncTokens = tokensCache.get(tokensCacheKey) ?? rawTokens;
-  // Async highlighting result (populated after shiki loads)
+  // Async highlighting result (populated after shiki loads, or synchronously
+  // inside the effect on a cache hit).
   const [asyncTokens, setAsyncTokens] = useState<TokenizedCode | null>(null);
   const asyncKeyRef = useRef({ code, language, themeScopeKey });
@@ -484,35 +529,62 @@ export const CodeBlockContent = ({
     setAsyncTokens(null);
   }
+  // Last time THIS instance actually ran a highlight pass — the throttle
+  // clock while `isStreaming` (perf review 1.4e).
+  const lastHighlightAtRef = useRef(0);
   useEffect(() => {
     let cancelled = false;
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+    const runHighlight = () => {
+      lastHighlightAtRef.current = Date.now();
+      // `highlightCode` returns the tokenized result SYNCHRONOUSLY on a cache
+      // hit (and never invokes the callback in that case — see its early
+      // `if (cached) return cached` branch). That cache hit is the COMMON case
+      // right after a theme switch (#315): the highlighter for this language is
+      // already loaded, so re-tokenizing for the new theme resolves within a
+      // microtask — often before this effect even runs — and without this
+      // direct check `asyncTokens` would stay null forever, stranding the
+      // code block on its raw/unhighlighted fallback after every theme change.
+      const cached = highlightCode(
+        code,
+        language,
+        (result) => {
+          if (!cancelled) {
+            setAsyncTokens(result);
+          }
+        },
+        scopeEl,
+        isStreaming,
+      );
+      if (cached && !cancelled) {
+        setAsyncTokens(cached);
+      }
+    };
-    // `highlightCode` returns the tokenized result SYNCHRONOUSLY on a cache
-    // hit (and never invokes the callback in that case — see its early
-    // `if (cached) return cached` branch). That cache hit is the COMMON case
-    // right after a theme switch (#315): the highlighter for this language is
-    // already loaded, so re-tokenizing for the new theme resolves within a
-    // microtask — often before this effect even runs — and without this
-    // direct check `asyncTokens` would stay null forever, stranding the
-    // code block on its raw/unhighlighted fallback after every theme change.
-    const cached = highlightCode(
-      code,
-      language,
-      (result) => {
-        if (!cancelled) {
-          setAsyncTokens(result);
-        }
-      },
-      scopeEl,
-    );
-    if (cached && !cancelled) {
-      setAsyncTokens(cached);
+    if (!isStreaming) {
+      // Not streaming: always highlight immediately (also the path a
+      // just-finished stream's LAST token takes, guaranteeing the final,
+      // settled code always gets a full, cacheable highlight even if the
+      // throttle skipped some of the tokens before it).
+      runHighlight();
+    } else {
+      const elapsed = Date.now() - lastHighlightAtRef.current;
+      if (elapsed >= STREAM_HIGHLIGHT_THROTTLE_MS) {
+        runHighlight();
+      } else {
+        timeoutId = setTimeout(runHighlight, STREAM_HIGHLIGHT_THROTTLE_MS - elapsed);
+      }
     }
     return () => {
       cancelled = true;
+      if (timeoutId !== undefined) {
+        clearTimeout(timeoutId);
+      }
     };
-  }, [code, language, themeScopeKey, scopeEl]);
+  }, [code, language, themeScopeKey, scopeEl, isStreaming]);
   const tokenized = asyncTokens ?? syncTokens;
@@ -554,6 +626,7 @@ export const CodeBlock = ({
           language={language}
           showLineNumbers={showLineNumbers}
           wrap={wrap}
+          isStreaming={isStreaming}
         />
         {isStreaming ? (
           <div
@@ -578,44 +651,34 @@ export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
 export const CodeBlockCopyButton = ({
   onCopy,
   onError,
-  timeout = 2000,
+  timeout,
   children,
   className,
   ...props
 }: CodeBlockCopyButtonProps) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef<number>(0);
+  const { t } = useLocale();
   const { code } = useContext(CodeBlockContext);
+  // Shared implementation (`@elabs-ai/components-ui`) instead of a private
+  // copy of the same copy-to-clipboard state machine — this one used to
+  // duplicate `SnippetCopyButton`'s (issue-workflow.md dedupe finding).
+  const { copied: isCopied, copy } = useCopyToClipboard(
+    timeout === undefined ? undefined : { resetAfterMs: timeout },
+  );
   const copyToClipboard = useCallback(async () => {
-    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+    const ok = await copy(code);
+    if (ok) {
+      onCopy?.();
+    } else {
       onError?.(new Error("Clipboard API not available"));
-      return;
-    }
-    try {
-      if (!isCopied) {
-        await navigator.clipboard.writeText(code);
-        setIsCopied(true);
-        onCopy?.();
-        timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
-      }
-    } catch (error) {
-      onError?.(error as Error);
     }
-  }, [code, onCopy, onError, timeout, isCopied]);
-  useEffect(
-    () => () => {
-      window.clearTimeout(timeoutRef.current);
-    },
-    [],
-  );
+  }, [copy, code, onCopy, onError]);
   const Icon = isCopied ? CheckIcon : CopyIcon;
   return (
     <Button
+      aria-label={t("copy")}
       className={cn("shrink-0", className)}
       onClick={copyToClipboard}
       size="icon"
@@ -647,7 +710,7 @@ export const CodeBlockLanguageSelectorTrigger = ({
   ...props
 }: CodeBlockLanguageSelectorTriggerProps) => (
   <SelectTrigger
-    className={cn("h-7 border-none bg-transparent px-2 text-xs shadow-none", className)}
+    className={cn("h-7 border-none bg-transparent px-2 text-meta shadow-none", className)}
     size="sm"
     {...props}
   />

package/src/commit.tsx CHANGED Viewed

@@ -3,11 +3,11 @@
 import { Avatar, AvatarFallback } from "@elabs-ai/components-ui";
 import { Button } from "@elabs-ai/components-ui";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
-import { useLocale } from "@elabs-ai/components-ui";
+import { useCopyToClipboard, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { CheckIcon, CopyIcon, FileIcon, GitCommitIcon, MinusIcon, PlusIcon } from "lucide-react";
 import type { ComponentProps, HTMLAttributes } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 export type CommitProps = ComponentProps<typeof Collapsible>;
@@ -35,7 +35,7 @@ export const CommitHeader = ({ className, children, ...props }: CommitHeaderProp
 export type CommitHashProps = HTMLAttributes<HTMLSpanElement>;
 export const CommitHash = ({ className, children, ...props }: CommitHashProps) => (
-  <span className={cn("font-mono text-xs", className)} {...props}>
+  <span className={cn("font-mono text-meta", className)} {...props}>
     <GitCommitIcon className="me-1 inline-block size-3" />
     {children}
   </span>
@@ -44,7 +44,7 @@ export const CommitHash = ({ className, children, ...props }: CommitHashProps) =
 export type CommitMessageProps = HTMLAttributes<HTMLSpanElement>;
 export const CommitMessage = ({ className, children, ...props }: CommitMessageProps) => (
-  <span className={cn("font-medium text-sm", className)} {...props}>
+  <span className={cn("font-medium text-body", className)} {...props}>
     {children}
   </span>
 );
@@ -53,7 +53,7 @@ export type CommitMetadataProps = HTMLAttributes<HTMLDivElement>;
 export const CommitMetadata = ({ className, children, ...props }: CommitMetadataProps) => (
   <div
-    className={cn("flex items-center gap-2 text-muted-foreground text-xs", className)}
+    className={cn("flex items-center gap-2 text-muted-foreground text-meta", className)}
     {...props}
   >
     {children}
@@ -90,7 +90,7 @@ export type CommitAuthorAvatarProps = ComponentProps<typeof Avatar> & {
 export const CommitAuthorAvatar = ({ initials, className, ...props }: CommitAuthorAvatarProps) => (
   <Avatar className={cn("size-8", className)} {...props}>
-    <AvatarFallback className="text-xs">{initials}</AvatarFallback>
+    <AvatarFallback className="text-meta">{initials}</AvatarFallback>
   </Avatar>
 );
@@ -116,7 +116,7 @@ export const CommitTimestamp = ({ date, className, children, ...props }: CommitT
   }, [updateFormatted]);
   return (
-    <time className={cn("text-xs", className)} dateTime={date.toISOString()} {...props}>
+    <time className={cn("text-meta", className)} dateTime={date.toISOString()} {...props}>
       {children ?? formatted}
     </time>
   );
@@ -150,43 +150,32 @@ export const CommitCopyButton = ({
   hash,
   onCopy,
   onError,
-  timeout = 2000,
+  timeout,
   children,
   className,
+  "aria-label": ariaLabel,
   ...props
 }: CommitCopyButtonProps) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef<number>(0);
+  const { t } = useLocale();
+  // 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 copyToClipboard = useCallback(async () => {
-    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+    const ok = await copy(hash);
+    if (ok) {
+      onCopy?.();
+    } else {
       onError?.(new Error("Clipboard API not available"));
-      return;
     }
-    try {
-      if (!isCopied) {
-        await navigator.clipboard.writeText(hash);
-        setIsCopied(true);
-        onCopy?.();
-        timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
-      }
-    } catch (error) {
-      onError?.(error as Error);
-    }
-  }, [hash, onCopy, onError, timeout, isCopied]);
-  useEffect(
-    () => () => {
-      window.clearTimeout(timeoutRef.current);
-    },
-    [],
-  );
+  }, [copy, hash, onCopy, onError]);
   const Icon = isCopied ? CheckIcon : CopyIcon;
   return (
     <Button
+      aria-label={ariaLabel ?? t("copy")}
       className={cn("size-7 shrink-0", className)}
       onClick={copyToClipboard}
       size="icon"
@@ -219,7 +208,7 @@ export type CommitFileProps = HTMLAttributes<HTMLDivElement>;
 export const CommitFile = ({ className, children, ...props }: CommitFileProps) => (
   <div
     className={cn(
-      "flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/50",
+      "flex items-center justify-between gap-2 rounded px-2 py-1 text-body hover:bg-muted/50",
       className,
     )}
     {...props}
@@ -237,10 +226,10 @@ export const CommitFileInfo = ({ className, children, ...props }: CommitFileInfo
 );
 const fileStatusStyles = {
-  added: "text-green-600 dark:text-green-400",
-  deleted: "text-red-600 dark:text-red-400",
-  modified: "text-yellow-600 dark:text-yellow-400",
-  renamed: "text-blue-600 dark:text-blue-400",
+  added: "text-success-text",
+  deleted: "text-destructive-text",
+  modified: "text-warning-text",
+  renamed: "text-info-text",
 };
 const fileStatusLabels = {
@@ -261,7 +250,7 @@ export const CommitFileStatus = ({
   ...props
 }: CommitFileStatusProps) => (
   <span
-    className={cn("font-medium font-mono text-xs", fileStatusStyles[status], className)}
+    className={cn("font-medium font-mono text-meta", fileStatusStyles[status], className)}
     {...props}
   >
     {children ?? fileStatusLabels[status]}
@@ -277,7 +266,7 @@ export const CommitFileIcon = ({ className, ...props }: CommitFileIconProps) =>
 export type CommitFilePathProps = HTMLAttributes<HTMLSpanElement>;
 export const CommitFilePath = ({ className, children, ...props }: CommitFilePathProps) => (
-  <span className={cn("truncate font-mono text-xs", className)} {...props}>
+  <span className={cn("truncate font-mono text-meta", className)} {...props}>
     {children}
   </span>
 );
@@ -285,7 +274,7 @@ export const CommitFilePath = ({ className, children, ...props }: CommitFilePath
 export type CommitFileChangesProps = HTMLAttributes<HTMLDivElement>;
 export const CommitFileChanges = ({ className, children, ...props }: CommitFileChangesProps) => (
-  <div className={cn("flex shrink-0 items-center gap-1 font-mono text-xs", className)} {...props}>
+  <div className={cn("flex shrink-0 items-center gap-1 font-mono text-meta", className)} {...props}>
     {children}
   </div>
 );
@@ -305,7 +294,7 @@ export const CommitFileAdditions = ({
   }
   return (
-    <span className={cn("text-green-600 dark:text-green-400", className)} {...props}>
+    <span className={cn("text-success-text", className)} {...props}>
       {children ?? (
         <>
           <PlusIcon className="inline-block size-3" />
@@ -331,7 +320,7 @@ export const CommitFileDeletions = ({
   }
   return (
-    <span className={cn("text-red-600 dark:text-red-400", className)} {...props}>
+    <span className={cn("text-destructive-text", className)} {...props}>
       {children ?? (
         <>
           <MinusIcon className="inline-block size-3" />

package/src/confirmation.tsx CHANGED Viewed

@@ -251,7 +251,7 @@ export const ConfirmationActions = ({ className, ...props }: ConfirmationActions
 export type ConfirmationActionProps = ComponentProps<typeof Button>;
 export const ConfirmationAction = ({ className, ...props }: ConfirmationActionProps) => (
-  <Button className={cn("h-8 px-3 text-sm", className)} type="button" {...props} />
+  <Button className={cn("h-8 px-3 text-body", className)} type="button" {...props} />
 );
 export type ConfirmationApproveProps = ConfirmationActionProps;

package/src/context-panel.tsx CHANGED Viewed

@@ -382,7 +382,7 @@ export const ContextPanel = forwardRef<HTMLDivElement, ContextPanelProps>(functi
         >
           <SheetHeader className="sr-only">
             <SheetTitle>{t("ai.contextPanel.title")}</SheetTitle>
-            <SheetDescription>Displays the chat context panel.</SheetDescription>
+            <SheetDescription>{t("ai.contextPanel.description")}</SheetDescription>
           </SheetHeader>
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>

package/src/conversation.stories.tsx CHANGED Viewed

@@ -34,6 +34,29 @@ export const Default: Story = {
   ),
 };
+/**
+ * `isStreaming` suppresses the live-region chatter while tokens are still
+ * arriving (`aria-live="off"` + `aria-busy`) — see the prop's doc on
+ * `ConversationProps` for why a `"polite"` region would otherwise announce
+ * every incoming token.
+ */
+export const Streaming: Story = {
+  render: () => (
+    <div className="flex h-72 flex-col rounded-lg border">
+      <Conversation isStreaming>
+        <ConversationContent>
+          <Message from="user">
+            <MessageContent>Summarize the deploy log.</MessageContent>
+          </Message>
+          <Message from="assistant">
+            <MessageContent>Deploying to production</MessageContent>
+          </Message>
+        </ConversationContent>
+      </Conversation>
+    </div>
+  ),
+};
 /**
  * **Layout lock (#72).** With zero messages, `ConversationEmptyState` must render
  * vertically centred in the conversation canvas — not pinned to the top with a