@elabs-ai/components-ai 4.0.0 → 4.2.0

package/src/code-block.test.tsx

@@ -4,7 +4,7 @@ import { fileURLToPath } from "node:url";
 import type { CSSProperties } from "react";
 import { afterEach, describe, expect, it } from "vitest";
 import { render, waitFor } from "@testing-library/react";
-import { CodeBlock } from "./code-block";
+import { CodeBlock, CodeBlockCopyButton, highlightCode } from "./code-block";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -189,3 +189,102 @@ describe("CodeBlock isStreaming (#269, loading-states.md)", () => {
     expect(container.querySelector('[role="status"]')).toBeNull();
   });
 });
+
+describe("CodeBlockCopyButton accessible name (a11y review)", () => {
+  it("has an aria-label so the icon-only button has an accessible name", () => {
+    const { container } = render(
+      <CodeBlock code="const a = 1;" language="tsx">
+        <CodeBlockCopyButton />
+      </CodeBlock>,
+    );
+    expect(container.querySelector("button")).toHaveAccessibleName("Copy");
+  });
+
+  it("lets a consumer override the label", () => {
+    const { container } = render(
+      <CodeBlock code="const a = 1;" language="tsx">
+        <CodeBlockCopyButton aria-label="Copy snippet" />
+      </CodeBlock>,
+    );
+    expect(container.querySelector("button")).toHaveAccessibleName("Copy snippet");
+  });
+});
+
+// ─── `highlightCode` awaited helper for the perf-fix regression locks below ──
+
+function highlightAsync(
+  code: string,
+  language: Parameters<typeof highlightCode>[1],
+  el?: Element | null,
+  skipCache = false,
+): Promise<NonNullable<ReturnType<typeof highlightCode>>> {
+  return new Promise((resolve) => {
+    const cached = highlightCode(code, language, (result) => resolve(result), el, skipCache);
+    if (cached) resolve(cached);
+  });
+}
+
+const flattenTokenContent = (result: NonNullable<ReturnType<typeof highlightCode>>): string =>
+  result.tokens.map((line) => line.map((token) => token.content).join("")).join("\n");
+
+describe("highlightCode cache key — no hash collision (perf review 1.4b/1.4c)", () => {
+  it("does not collide two >200-char strings sharing a length, prefix and suffix but differing in the middle", async () => {
+    const prefix = "a".repeat(150);
+    const suffix = "b".repeat(150);
+    // Same length, same first/last 100 chars — the OLD `length:first100:last100`
+    // cache key collided on exactly this shape (a mid-string edit), showing
+    // whichever of the two resolved second on top of BOTH code blocks.
+    const codeA = `${prefix}1${suffix}`;
+    const codeB = `${prefix}2${suffix}`;
+
+    await highlightAsync(codeA, "tsx");
+    await highlightAsync(codeB, "tsx");
+
+    // Re-requesting codeA must still return a SYNCHRONOUS cache hit for its
+    // OWN content — never codeB's.
+    const againA = highlightCode(codeA, "tsx");
+    expect(againA).not.toBeNull();
+    expect(flattenTokenContent(againA!)).toBe(codeA);
+    expect(flattenTokenContent(againA!)).not.toBe(codeB);
+  });
+});
+
+describe("highlightCode tokensCache is bounded (perf review 1.4a — LRU ~200 entries)", () => {
+  it("evicts the least-recently-used entry once the cache exceeds its cap", async () => {
+    const codes = Array.from({ length: 205 }, (_, i) => `const lruEvictionProbe_${i} = ${i};`);
+
+    for (const code of codes) {
+      // Sequential on purpose: each must actually populate the cache (and
+      // become the most-recently-used entry) before the next one runs.
+
+      await highlightAsync(code, "tsx");
+    }
+
+    // The very first entry inserted is the least-recently-used once 205 > the
+    // 200-entry cap — it must have been evicted, so re-requesting it is a
+    // cache MISS (highlightCode returns null synchronously and kicks off a
+    // fresh async highlight instead).
+    expect(highlightCode(codes[0] as string, "tsx")).toBeNull();
+
+    // The most recently inserted entry is still a synchronous cache hit.
+    expect(highlightCode(codes[204] as string, "tsx")).not.toBeNull();
+  });
+});
+
+describe("highlightCode skipCache (perf review 1.4a — never permanently cache mid-stream)", () => {
+  it("does not persist a highlight into the shared cache when skipCache is set", async () => {
+    const code = "const streamingSkipCacheProbe = 'a';";
+    await highlightAsync(code, "tsx", undefined, true);
+
+    // A later, non-streaming request for the EXACT same code is a cache
+    // MISS — the streaming pass never wrote it in.
+    expect(highlightCode(code, "tsx")).toBeNull();
+  });
+
+  it("still persists an ordinary (non-streaming) highlight", async () => {
+    const code = "const nonStreamingCacheProbe = 'b';";
+    await highlightAsync(code, "tsx");
+
+    expect(highlightCode(code, "tsx")).not.toBeNull();
+  });
+});

package/src/code-block.tsx

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