@elabs-ai/components-ai 4.1.0 → 5.0.0

package/src/composer.test.tsx

@@ -531,3 +531,48 @@ describe("Composer — shortcut hints change with a busy state (#107)", () => {
     expect(shortcutRow).not.toContainElement(stopButton);
   });
 });
+
+describe("Composer — mentions slot", () => {
+  const ROSTER = [
+    { id: "u-ada", label: "Ada Lovelace" },
+    { id: "u-grace", label: "Grace Hopper" },
+  ];
+
+  it("opens the roster on @, inserts on Enter without submitting, then submits and resets", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    const onValueChange = vi.fn();
+    render(
+      <Composer
+        onSubmit={onSubmit}
+        showAttach={false}
+        showVoice={false}
+        mentions={{ options: ROSTER, onValueChange }}
+      />,
+    );
+    const field = screen.getByRole("textbox") as HTMLTextAreaElement;
+    // The composer's own field — what PromptInput's submit reads.
+    expect(field).toHaveAttribute("name", "message");
+
+    await user.click(field);
+    await user.keyboard("hi @ada");
+    expect(field).toHaveAttribute("data-state", "open");
+    await user.keyboard("{Enter}");
+    expect(field.value).toBe("hi @Ada Lovelace ");
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(onValueChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({ mentions: [expect.objectContaining({ id: "u-ada" })] }),
+    );
+
+    await user.keyboard("{Enter}");
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit.mock.calls[0]![0].text.trim()).toBe("hi @Ada Lovelace");
+    expect(field.value).toBe("");
+    expect(onValueChange).toHaveBeenLastCalledWith({ text: "", mentions: [] });
+  });
+
+  it("refuses slashCommands and mentions together at the type level", () => {
+    // @ts-expect-error — the field takes a slash palette OR a mention roster.
+    render(<Composer slashCommands={[]} mentions={{ options: ROSTER }} />);
+  });
+});

package/src/composer.tsx

@@ -2,7 +2,20 @@
 
 import { useCallback, useRef, useState, type ComponentProps, type ReactNode } from "react";
 import { ArrowUp, Mic, Paperclip, Sparkles } from "lucide-react";
-import { cn, Kbd, useLocale } from "@elabs-ai/components-ui";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  cn,
+  Kbd,
+  MentionInput,
+  MentionInputContent,
+  MentionInputEmpty,
+  MentionInputItem,
+  MentionInputList,
+  MentionInputTextarea,
+  useLocale,
+  type MentionOption,
+  type MentionValue,
+} from "@elabs-ai/components-ui";
 
 import {
   PromptInput,
@@ -62,7 +75,29 @@ export interface ComposerShortcut {
   label: string;
 }
 
-export interface ComposerProps {
+/**
+ * An `@`-mention roster for the composer field (`MentionInput` from
+ * `@elabs-ai/components-ui`). The field keeps its own submit contract; the
+ * mentions ride alongside the text in a `MentionValue`.
+ *
+ * Read the mentions on submit from `value` (controlled) or from
+ * `onValueChange`, and resolve them with `serializeMentions(value)`
+ * (`{ text, mentionedIds }`). `Composer` resets the value to empty after a
+ * submit it accepts — through `onValueChange`, so a controlled caller's state
+ * clears too.
+ */
+export interface ComposerMentions {
+  /** Who (or what) can be mentioned. */
+  options: MentionOption[];
+  /** Controlled value. Omit for an uncontrolled roster. */
+  value?: MentionValue;
+  /** Fires on every edit, pick and post-submit reset. */
+  onValueChange?: (value: MentionValue) => void;
+}
+
+const EMPTY_MENTION_VALUE: MentionValue = { text: "", mentions: [] };
+
+export interface ComposerBaseProps {
   /** Submit handler — receives the assembled message (text + attachments). */
   onSubmit?: PromptInputProps["onSubmit"];
   /** Textarea placeholder. Default `"Ask me anything…"`. */
@@ -96,20 +131,6 @@ export interface ComposerProps {
    * and is entirely yours; `aria-label` names the scale.
    */
   effort?: ComposerEffortProps;
-  /**
-   * Slash-command palette. When set (and non-empty) the textarea becomes a
-   * `PromptInputSlashTextarea` wrapped in a `PromptInputSlash`, so typing `/`
-   * at the start of a line opens a filtered command list — nothing else about
-   * the composer changes.
-   *
-   * Note this makes the textarea REACT-CONTROLLED (the palette needs to read
-   * and splice the text), which is why `Composer` clears its own copy of the
-   * text on submit: `PromptInput`'s `form.reset()` reaches the DOM node, not
-   * React state.
-   */
-  slashCommands?: PromptInputSlashProps["commands"];
-  /** Fires with the chosen slash command (alongside the text splice). */
-  onSlashCommand?: PromptInputSlashProps["onSelect"];
   /**
    * Override the DEFAULT tool buttons (today: the attach button) — e.g. to add
    * a web-search or connect-data control. Render `PromptInputButton`s /
@@ -185,6 +206,38 @@ export interface ComposerProps {
   className?: string;
 }
 
+/**
+ * The field enhancements that each take over the textarea — a slash palette OR
+ * a mention roster, never both. The union makes the impossible combination a
+ * type error instead of a silent precedence rule.
+ */
+export type ComposerFieldProps =
+  | {
+      /**
+       * Slash-command palette. When set (and non-empty) the textarea becomes a
+       * `PromptInputSlashTextarea` wrapped in a `PromptInputSlash`, so typing `/`
+       * at the start of a line opens a filtered command list — nothing else about
+       * the composer changes.
+       *
+       * Note this makes the textarea REACT-CONTROLLED (the palette needs to read
+       * and splice the text), which is why `Composer` clears its own copy of the
+       * text on submit: `PromptInput`'s `form.reset()` reaches the DOM node, not
+       * React state.
+       */
+      slashCommands?: PromptInputSlashProps["commands"];
+      /** Fires with the chosen slash command (alongside the text splice). */
+      onSlashCommand?: PromptInputSlashProps["onSelect"];
+      mentions?: never;
+    }
+  | {
+      /** `@`-mention roster on the field — see `ComposerMentions`. */
+      mentions?: ComposerMentions;
+      slashCommands?: never;
+      onSlashCommand?: never;
+    };
+
+export type ComposerProps = ComposerBaseProps & ComposerFieldProps;
+
 /**
  * Composer — the standard brand-ui AI chat input.
  *
@@ -202,9 +255,10 @@ export interface ComposerProps {
  *
  * **Composer is the chat input. Every control the `PromptInput` family ships
  * is reachable from a `Composer` prop; drop to `PromptInput` only for a
- * bespoke shell.** `modelPicker`, `mode`, `effort` and `slashCommands` are the
- * four slots that make that true — they render `ModelPicker`,
- * `PromptInputMode`, `PromptInputEffort` and `PromptInputSlash` respectively,
+ * bespoke shell.** `modelPicker`, `mode`, `effort`, `slashCommands` and
+ * `mentions` are the slots that make that true — they render `ModelPicker`,
+ * `PromptInputMode`, `PromptInputEffort`, `PromptInputSlash` and
+ * `MentionInput` respectively,
  * in the footer order `attach · modelPicker · mode · effort │ voice · send`
  * (the same left-to-right arrangement `TerminalComposer` uses, so the chat and
  * console skins agree).
@@ -218,6 +272,7 @@ export function Composer({
   effort,
   slashCommands,
   onSlashCommand,
+  mentions,
   tools,
   sendStatus,
   onStop,
@@ -239,6 +294,12 @@ export function Composer({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [text, setText] = useState("");
   const hasSlash = slashCommands !== undefined && slashCommands.length > 0;
+  // Always called (hook order); only read when `mentions` is set.
+  const [mentionValue, setMentionValue] = useControllableState<MentionValue>({
+    prop: mentions?.value,
+    defaultProp: EMPTY_MENTION_VALUE,
+    onChange: mentions?.onValueChange,
+  });
 
   // #107: "Composer shortcut hints change with a busy state" — derived from
   // the existing canonical `sendStatus`, never a second boolean prop. The
@@ -258,9 +319,12 @@ export function Composer({
       // keep rendering the sent text straight back. Clearing here is a no-op in
       // the uncontrolled (non-slash) arrangement.
       setText("");
-      return onSubmit?.(message, event);
+      const result = onSubmit?.(message, event);
+      // `form.reset()` cannot clear a value MentionInput controls either.
+      if (mentions) setMentionValue(EMPTY_MENTION_VALUE);
+      return result;
     },
-    [onSubmit],
+    [onSubmit, mentions, setMentionValue],
   );
 
   const resolvedPlaceholder = placeholder ?? t("ai.composer.placeholder");
@@ -305,6 +369,25 @@ export function Composer({
                   placeholder={resolvedPlaceholder}
                 />
               </PromptInputSlash>
+            ) : mentions ? (
+              <MentionInput
+                options={mentions.options}
+                value={mentionValue}
+                onValueChange={setMentionValue}
+              >
+                {/* `asChild` lends the mention behaviour to the composer's own
+                    textarea, so `name="message"` — what PromptInput's submit
+                    reads — survives. */}
+                <MentionInputTextarea asChild>
+                  <PromptInputTextarea placeholder={resolvedPlaceholder} />
+                </MentionInputTextarea>
+                <MentionInputContent>
+                  <MentionInputList>
+                    {(option) => <MentionInputItem key={option.id} option={option} />}
+                  </MentionInputList>
+                  <MentionInputEmpty />
+                </MentionInputContent>
+              </MentionInput>
             ) : (
               <PromptInputTextarea placeholder={resolvedPlaceholder} />
             )}

package/src/confirmation.tsx

@@ -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.stories.tsx

@@ -102,7 +102,7 @@ function WorkspaceDemo(providerProps: Omit<ContextPanelProviderProps, "children"
     <ContextPanelProvider {...providerProps}>
       <div className="flex h-[520px] w-full overflow-hidden rounded-xl border bg-background">
         <div className="flex min-w-0 flex-1 flex-col">
-          <header className="flex h-12 shrink-0 items-center justify-between border-b px-4">
+          <header className="flex h-header shrink-0 items-center justify-between border-b px-4">
             <span className="text-subtitle">Agentic workspace</span>
             <ContextPanelTrigger />
           </header>

package/src/context-panel.tsx

@@ -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>
@@ -469,7 +469,7 @@ export const ContextPanelHeader = forwardRef<HTMLDivElement, ContextPanelHeaderP
       <div
         ref={ref}
         data-slot="context-panel-header"
-        className={cn("flex h-12 shrink-0 items-center gap-2 border-b px-3", className)}
+        className={cn("flex h-header shrink-0 items-center gap-2 border-b px-3", className)}
         {...props}
       >
         {isDetail ? (

package/src/conversation.stories.tsx

@@ -5,6 +5,7 @@ import { Message, MessageContent } from "./message";
 const meta = {
   title: "AI/Conversation",
   component: Conversation,
+  tags: ["autodocs"],
   parameters: {
     layout: "padded",
     docs: {
@@ -34,6 +35,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

package/src/conversation.test.tsx

@@ -16,6 +16,7 @@ import type { UIMessage } from "ai";
 import {
   Conversation,
   ConversationContent,
+  ConversationDownload,
   ConversationEmptyState,
   messagesToMarkdown,
 } from "./conversation";
@@ -44,6 +45,22 @@ describe("Conversation — transcript region", () => {
     expect(screen.getByRole("log")).toBeInTheDocument();
   });
 
+  it("lets the content grow past the viewport so its composer inset stays scrollable", () => {
+    render(
+      <Conversation>
+        <ConversationContent>
+          <p>turn</p>
+        </ConversationContent>
+      </Conversation>,
+    );
+    const content = screen.getByText("turn").parentElement!;
+    // `min-h-0` clamps the content to the viewport height: the turns then
+    // overflow it and the bottom padding (the floating-composer inset) is
+    // left behind, so the last turn scrolls under the composer.
+    expect(content).not.toHaveClass("min-h-0");
+    expect(content).toHaveClass("shrink-0", "flex-1");
+  });
+
   it("renders its children inside the log, in order", () => {
     render(
       <Conversation>
@@ -69,6 +86,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 +165,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}
   />
 );
@@ -35,7 +48,19 @@ export const ConversationContent = ({
     // can't resolve against a block-level parent whose own height is
     // `min-height`-only (the #72 empty-state-pinned-to-the-top bug).
     scrollClassName={cn("flex flex-col", scrollClassName)}
-    className={cn("flex flex-1 min-h-0 flex-col gap-8 p-4", className)}
+    // Inside a `ChatShell variant="bare"` the composer floats over the
+    // transcript: the shell publishes `--chat-composer-inset` (its measured
+    // height) so the last turn scrolls clear of it, and `--chat-column` so
+    // turns share the composer's reading column. Outside such a shell both
+    // variables are unset: the inset falls back to 0 and `max-width` to none.
+    // `shrink-0`, never `min-h-0`: the content div must grow with its turns.
+    // Clamped to the viewport height, the turns overflow it and its bottom
+    // padding stays behind at the viewport's edge, so the last turn ends up
+    // under the floating composer instead of above it.
+    className={cn(
+      "mx-auto flex w-full max-w-(--chat-column) flex-1 shrink-0 flex-col gap-8 p-4 pb-[calc(var(--chat-composer-inset,0px)+--spacing(4))]",
+      className,
+    )}
     {...props}
   />
 );
@@ -68,8 +93,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 +109,7 @@ export const ConversationScrollButton = ({
   ...props
 }: ConversationScrollButtonProps) => {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  const { t } = useLocale();
 
   const handleScrollToBottom = useCallback(() => {
     scrollToBottom();
@@ -93,9 +119,18 @@ 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.
+          // `--chat-composer-inset`: lift the button clear of a floating
+          // `ChatShell variant="bare"` composer (0 anywhere else).
+          "absolute bottom-[calc(var(--chat-composer-inset,0px)+--spacing(4))] left-[50%] z-30 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 +173,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 +182,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.stories.tsx

@@ -194,3 +194,82 @@ export const ChangeReviewComposition: Story = {
     </div>
   ),
 };
+
+/**
+ * Focus indicator on expandable line (#313): Tab to the "show more" button
+ * and assert the compound indicator's OUTLINE layer (`outlineStyle: "solid"`,
+ * `--ring-contour`) that `focus-ring` adds — not just `boxShadow !== "none"`,
+ * which the legacy `ring-2` pattern also produces.
+ *
+ * The prior version passed a `hiddenLineCount` prop that `DiffViewProps`
+ * (`diff-view.tsx:77`) does not define — React spread it onto the DOM as a
+ * meaningless `hiddenlinecount` attribute and warned about it, and the "show
+ * more" row NEVER rendered (a real diff never mentions "50" anywhere).
+ * `getByRole("button", …)` then always threw before the focus check ran.
+ * `CollapsedRow` (`diff-view.tsx:289`) only appears when `collapseDiffRows`
+ * (`packages/ui/src/lib/diff-rows.ts`) actually collapses a context run
+ * longer than `contextLines` — so this story now supplies a real 10-line
+ * context run with `contextLines={2}`, which collapses to
+ * `top(1) + collapsed(8) + bottom(1)`, i.e. a real "Show 8 more lines"
+ * button. The button's accessible name is
+ * `t("ai.diffView.showMore", { count })`, not the literal "Show more" —
+ * matched by a count-tolerant regex so it doesn't drift with the wording.
+ */
+export const FocusIndicatorExpand: Story = {
+  name: "Keyboard focus — expand",
+  render: () => (
+    <div className="max-w-2xl">
+      <DiffView
+        lines={Array.from({ length: 10 }, (_, i) => ({
+          type: "context" as const,
+          oldNumber: i + 1,
+          newNumber: i + 1,
+          text: `line ${i + 1}`,
+        }))}
+        contextLines={2}
+      />
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: /show \d+ more lines?/i });
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    const focused = getComputedStyle(button);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+  },
+};
+
+/**
+ * Focus indicator on scrollable pager (#313): Tab to the diff body and
+ * assert the compound indicator's OUTLINE layer on the actual scroll
+ * container. The prior version located it via `getByText(/^export/)`, which
+ * throws "multiple elements" under `variant="split"` (the same line renders
+ * once per pane) — and even resolved, `scrollDiv.parentElement` was never
+ * the scroll container itself (the text sits several nodes deep inside it).
+ * Query the tabbable scroll container directly — it carries `tabIndex={0}`
+ * and `focus-ring-inset` (`diff-view.tsx`'s `DiffViewPager`) — instead of
+ * inferring it from rendered content.
+ */
+export const FocusIndicatorPager: Story = {
+  name: "Keyboard focus — pager",
+  render: () => (
+    <div className="max-w-2xl">
+      <DiffView lines={SAMPLE_LINES} pager variant="split" />
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const pager = canvas.getByRole("region");
+    const scrollDiv = pager.querySelector<HTMLElement>('[tabindex="0"]');
+    if (scrollDiv == null) {
+      throw new Error("expected a tabbable scroll container inside the pager region");
+    }
+    await userEvent.tab();
+    await expect(scrollDiv).toHaveFocus();
+    const focused = getComputedStyle(scrollDiv);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+  },
+};

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,