@elabs-ai/components-ai 4.1.0 → 5.0.0

package/src/stack-trace.tsx

@@ -3,20 +3,11 @@
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 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 { AlertTriangleIcon, CheckIcon, ChevronDownIcon, CopyIcon } from "lucide-react";
 import type { ComponentProps } from "react";
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { createContext, memo, useCallback, useContext, useMemo } from "react";
 
 // Regex patterns for parsing stack traces
 const STACK_FRAME_WITH_PARENS_REGEX = /^at\s+(.+?)\s+\((.+):(\d+):(\d+)\)$/;
@@ -188,7 +179,7 @@ export const StackTrace = memo(
       <StackTraceContext.Provider value={contextValue}>
         <div
           className={cn(
-            "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-sm",
+            "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-body",
             className,
           )}
           {...props}
@@ -293,42 +284,35 @@ export const StackTraceCopyButton = memo(
   ({
     onCopy,
     onError,
-    timeout = 2000,
+    timeout,
     className,
     children,
+    "aria-label": ariaLabel,
     ...props
   }: StackTraceCopyButtonProps) => {
-    const [isCopied, setIsCopied] = useState(false);
-    const timeoutRef = useRef<number>(0);
+    const { t } = useLocale();
     const { raw } = useStackTrace();
+    // 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(
+      timeout === undefined ? undefined : { resetAfterMs: timeout },
+    );
 
     const copyToClipboard = useCallback(async () => {
-      if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
-        onError?.(new Error("Clipboard API not available"));
-        return;
-      }
-
-      try {
-        await navigator.clipboard.writeText(raw);
-        setIsCopied(true);
+      const ok = await copy(raw);
+      if (ok) {
         onCopy?.();
-        timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
-      } catch (error) {
-        onError?.(error as Error);
+      } else {
+        onError?.(new Error("Clipboard API not available"));
       }
-    }, [raw, onCopy, onError, timeout]);
-
-    useEffect(
-      () => () => {
-        window.clearTimeout(timeoutRef.current);
-      },
-      [],
-    );
+    }, [copy, raw, onCopy, onError]);
 
     const Icon = isCopied ? CheckIcon : CopyIcon;
 
     return (
       <Button
+        aria-label={ariaLabel ?? t("copy")}
         className={cn("size-7", className)}
         onClick={copyToClipboard}
         size="icon"
@@ -440,7 +424,7 @@ export const StackTraceFrames = memo(
         {framesToShow.map((frame) => (
           <div
             className={cn(
-              "text-xs",
+              "text-meta",
               frame.isInternal ? "text-muted-foreground/50" : "text-foreground/90",
             )}
             key={frame.raw}
@@ -464,7 +448,7 @@ export const StackTraceFrames = memo(
           </div>
         ))}
         {framesToShow.length === 0 && (
-          <div className="text-muted-foreground text-xs">{t("ai.stackTrace.empty")}</div>
+          <div className="text-muted-foreground text-meta">{t("ai.stackTrace.empty")}</div>
         )}
       </div>
     );

package/src/streamdown-i18n.test.tsx

@@ -13,6 +13,7 @@ import { LocaleProvider } from "@elabs-ai/components-ui";
 import { MessageResponse } from "./message";
 import { MarkdownView } from "./markdown-view";
 import { Reasoning, ReasoningContent } from "./reasoning";
+import { _debugActiveThemeScopeCount } from "./_theme-scope-store";
 
 const CODE_MARKDOWN = "```js\nconst a = 1;\n```";
 // `MarkdownView` re-maps `code` onto `ProseInlineCode`, so its Streamdown chrome
@@ -107,6 +108,28 @@ describe("Streamdown chrome microcopy (#310)", () => {
   });
 });
 
+describe("useReactiveCodePlugin shares ONE theme-scope observer (perf review §3.3)", () => {
+  it("registers a single tracked scope for many simultaneously-mounted MessageResponse instances", () => {
+    const before = _debugActiveThemeScopeCount();
+
+    const { unmount } = render(
+      <>
+        <MessageResponse>{CODE_MARKDOWN}</MessageResponse>
+        <MessageResponse>{CODE_MARKDOWN}</MessageResponse>
+        <MessageResponse>{CODE_MARKDOWN}</MessageResponse>
+      </>,
+    );
+
+    // Under the old per-hook `MutationObserver`, a message-dense conversation
+    // registered one observer PER instance; the shared store collapses every
+    // instance watching the same `<html>` scope into exactly one.
+    expect(_debugActiveThemeScopeCount()).toBe(before + 1);
+
+    unmount();
+    expect(_debugActiveThemeScopeCount()).toBe(before);
+  });
+});
+
 /**
  * #315 follow-up — the "major" carve-out: only `<CodeBlock>` had been
  * de-GitHub-ed; every fenced code block rendered through `MessageResponse`/

package/src/templates-ai-assistant.stories.tsx

@@ -1,6 +1,7 @@
 /**
- * AI assistant template — the canonical full-screen AI assistant composition
- * (app-shell + chat shell: Conversation + PromptInput). This story is the
+ * AI assistant template — the canonical full-screen AI assistant composition:
+ * app-shell nav, an immersive `ChatShell` (transcript scrolls behind a floating
+ * `Composer`, one centred reading column) and the `ContextPanel` right rail. This story is the
  * single source of truth: `pnpm gen:templates` derives the consumer template
  * source (`docs/playbooks/templates/ai-assistant.tsx`) from it.
  * Verify across both themes with globals=theme:<slug>.
@@ -10,8 +11,10 @@ import { useState } from "react";
 import { AppIcon } from "@elabs-ai/components-icons";
 import {
   Button,
+  NavUser,
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarHeader,
@@ -23,7 +26,16 @@ import {
   SidebarTrigger,
 } from "@elabs-ai/components-ui";
 import {
+  AssetPreview,
+  ChatShell,
   Composer,
+  ContextPanel,
+  ContextPanelBody,
+  ContextPanelDetail,
+  ContextPanelHeader,
+  ContextPanelProvider,
+  ContextPanelSection,
+  ContextPanelTrigger,
   Conversation,
   ConversationContent,
   ConversationEmptyState,
@@ -31,6 +43,9 @@ import {
   Message,
   MessageContent,
   MessageResponse,
+  ProducedAssetTree,
+  useContextPanel,
+  type ContextAsset,
 } from "./index";
 import { Bot, History, Home, MessageSquare, Settings } from "lucide-react";
 
@@ -47,10 +62,36 @@ const nav = [
   { id: "settings", label: "Settings", icon: Settings },
 ];
 
+/** Right rail root — what the assistant produced; selecting one drills in. */
+function ContextRailRoot({ assets }: { assets: ContextAsset[] }) {
+  const { state, actions } = useContextPanel();
+  return (
+    <ContextPanelSection label="Produced assets">
+      <ProducedAssetTree
+        assets={assets}
+        selectedId={state.selectedAsset?.id}
+        onSelect={actions.openDetail}
+      />
+    </ContextPanelSection>
+  );
+}
+
+/** Right rail detail — the focused asset, with Back in the panel header. */
+function ContextRailDetail() {
+  const { state } = useContextPanel();
+  return (
+    <ContextPanelDetail>
+      {state.selectedAsset ? <AssetPreview asset={state.selectedAsset} /> : null}
+    </ContextPanelDetail>
+  );
+}
+
 function AiAssistantTemplate() {
   const [active, setActive] = useState("chat");
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [status, setStatus] = useState<"ready" | "submitted">("ready");
+  // Files the assistant produced — wire to your runtime's tool outputs.
+  const [assets] = useState<ContextAsset[]>([]);
 
   function send(text: string) {
     setMessages((m) => [...m, { id: crypto.randomUUID(), role: "user", text }]);
@@ -61,98 +102,121 @@ function AiAssistantTemplate() {
   }
 
   return (
-    <SidebarProvider>
-      <Sidebar collapsible="icon">
-        <SidebarHeader className="px-3 py-2">
-          <div className="flex items-center gap-2">
-            <AppIcon height={20} aria-hidden />
-            <span className="truncate font-semibold group-data-[collapsible=icon]:hidden">
-              Assistant
-            </span>
-          </div>
-        </SidebarHeader>
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {nav.map((n) => (
-                  <SidebarMenuItem key={n.id}>
-                    <SidebarMenuButton
-                      isActive={active === n.id}
-                      tooltip={n.label}
-                      onClick={() => setActive(n.id)}
-                    >
-                      <n.icon aria-hidden="true" />
-                      <span>{n.label}</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-      </Sidebar>
-      <SidebarInset className="flex flex-col overflow-hidden">
-        <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
-          <SidebarTrigger />
-          <h1 className="text-body font-medium">AI Assistant</h1>
-        </header>
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <Conversation className="flex-1">
-            <ConversationContent>
-              {messages.length === 0 ? (
-                <ConversationEmptyState
-                  icon={<MessageSquare className="size-8" aria-hidden="true" />}
-                  title="Start the conversation"
-                  description="Ask anything to begin."
-                  actions={
-                    <>
-                      <Button
-                        onClick={() => send("What can you help me with?")}
-                        size="sm"
-                        variant="outline"
+    // The provider wraps the whole shell so the header trigger and the right
+    // rail share one open/closed state.
+    <ContextPanelProvider>
+      <SidebarProvider className="h-svh min-h-0">
+        <Sidebar collapsible="icon">
+          <SidebarHeader className="px-3 py-2">
+            <div className="flex items-center gap-2">
+              <AppIcon height={20} aria-hidden />
+              <span className="truncate font-semibold group-data-[collapsible=icon]:hidden">
+                Assistant
+              </span>
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {nav.map((n) => (
+                    <SidebarMenuItem key={n.id}>
+                      <SidebarMenuButton
+                        isActive={active === n.id}
+                        tooltip={n.label}
+                        onClick={() => setActive(n.id)}
                       >
-                        What can you help me with?
-                      </Button>
-                      <Button
-                        onClick={() => send("Summarize my recent activity")}
-                        size="sm"
-                        variant="outline"
-                      >
-                        Summarize my recent activity
-                      </Button>
-                    </>
-                  }
+                        <n.icon aria-hidden="true" />
+                        <span>{n.label}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>
+            <NavUser user={{ name: "Avery Rao", email: "avery@example.com" }} />
+          </SidebarFooter>
+        </Sidebar>
+        <SidebarInset className="flex min-w-0 flex-col overflow-hidden">
+          <header className="flex h-header shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger />
+            <h1 className="text-body font-medium">AI Assistant</h1>
+            <ContextPanelTrigger className="ms-auto" />
+          </header>
+          {/* `bare`: the transcript scrolls behind the floating composer and
+              both share one centred reading column. */}
+          <div className="min-h-0 flex-1">
+            <ChatShell
+              variant="bare"
+              composer={
+                <Composer
+                  placeholder="Send a message…"
+                  status={status === "submitted" ? "Generating…" : "Awaiting your input"}
+                  sendStatus={status}
+                  onSubmit={(message) => {
+                    const text = message.text?.trim();
+                    if (text) send(text);
+                  }}
                 />
-              ) : (
-                messages.map((m) => (
-                  <Message from={m.role} key={m.id}>
-                    <MessageContent>
-                      <MessageResponse>{m.text}</MessageResponse>
-                    </MessageContent>
-                  </Message>
-                ))
-              )}
-            </ConversationContent>
-            <ConversationScrollButton />
-          </Conversation>
-          <Composer
-            placeholder="Send a message…"
-            status={status === "submitted" ? "Generating…" : "Awaiting your input"}
-            sendStatus={status}
-            onSubmit={(message) => {
-              const text = message.text?.trim();
-              if (text) send(text);
-            }}
+              }
+            >
+              <Conversation className="flex-1">
+                <ConversationContent>
+                  {messages.length === 0 ? (
+                    <ConversationEmptyState
+                      icon={<MessageSquare className="size-8" aria-hidden="true" />}
+                      title="Start the conversation"
+                      description="Ask anything to begin."
+                      actions={
+                        <>
+                          <Button
+                            onClick={() => send("What can you help me with?")}
+                            size="sm"
+                            variant="outline"
+                          >
+                            What can you help me with?
+                          </Button>
+                          <Button
+                            onClick={() => send("Summarize my recent activity")}
+                            size="sm"
+                            variant="outline"
+                          >
+                            Summarize my recent activity
+                          </Button>
+                        </>
+                      }
+                    />
+                  ) : (
+                    messages.map((m) => (
+                      <Message from={m.role} key={m.id}>
+                        <MessageContent>
+                          <MessageResponse>{m.text}</MessageResponse>
+                        </MessageContent>
+                      </Message>
+                    ))
+                  )}
+                </ConversationContent>
+                <ConversationScrollButton />
+              </Conversation>
+            </ChatShell>
+          </div>
+        </SidebarInset>
+        <ContextPanel>
+          <ContextPanelHeader title="Context" />
+          <ContextPanelBody
+            root={<ContextRailRoot assets={assets} />}
+            detail={<ContextRailDetail />}
           />
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
+        </ContextPanel>
+      </SidebarProvider>
+    </ContextPanelProvider>
   );
 }
 
 const meta = {
-  title: "Patterns/Templates/AI Assistant",
+  title: "Patterns/Templates/Starters/AI Assistant",
   parameters: { layout: "fullscreen" },
   tags: ["autodocs"],
 } satisfies Meta;

package/src/test-results.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { StatusBadge, StatusIcon, type Status } from "@elabs-ai/components-ui";
+import { StatusBadge, StatusIcon, useLocale, type Status } from "@elabs-ai/components-ui";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { ChevronRightIcon } from "lucide-react";
@@ -64,7 +64,7 @@ export const TestResultsDuration = ({
 
   return (
     <span
-      className={cn("shrink-0 text-muted-foreground text-sm tabular-nums", className)}
+      className={cn("shrink-0 text-muted-foreground text-body tabular-nums", className)}
       {...props}
     >
       {children ?? formatDuration(summary.duration)}
@@ -76,6 +76,7 @@ export type TestResultsSummaryProps = HTMLAttributes<HTMLDivElement>;
 
 export const TestResultsSummary = ({ className, children, ...props }: TestResultsSummaryProps) => {
   const { summary } = useContext(TestResultsContext);
+  const { t } = useLocale();
 
   if (!summary) {
     return null;
@@ -86,16 +87,16 @@ export const TestResultsSummary = ({ className, children, ...props }: TestResult
       {children ?? (
         <>
           <StatusBadge size="sm" status="complete">
-            {summary.passed} passed
+            {t("ai.testResults.passedCount", { count: summary.passed })}
           </StatusBadge>
           {summary.failed > 0 && (
             <StatusBadge size="sm" status="failed">
-              {summary.failed} failed
+              {t("ai.testResults.failedCount", { count: summary.failed })}
             </StatusBadge>
           )}
           {summary.skipped > 0 && (
             <StatusBadge size="sm" status="skipped">
-              {summary.skipped} skipped
+              {t("ai.testResults.skippedCount", { count: summary.skipped })}
             </StatusBadge>
           )}
         </>
@@ -134,6 +135,7 @@ export const TestResultsProgress = ({
   ...props
 }: TestResultsProgressProps) => {
   const { summary } = useContext(TestResultsContext);
+  const { t, formatNumber } = useLocale();
 
   if (!summary) {
     return null;
@@ -156,11 +158,14 @@ export const TestResultsProgress = ({
               style={{ width: `${failedPercent}%` }}
             />
           </div>
-          <div className="flex justify-between text-muted-foreground text-xs tabular-nums">
+          <div className="flex justify-between text-muted-foreground text-meta tabular-nums">
             <span>
-              {summary.passed}/{summary.total} tests passed
+              {t("ai.testResults.testsPassed", { passed: summary.passed, total: summary.total })}
+            </span>
+            <span>
+              {formatNumber(passedPercent, { maximumFractionDigits: 0 })}
+              {"%"}
             </span>
-            <span>{passedPercent.toFixed(0)}%</span>
           </div>
         </>
       )}
@@ -247,7 +252,7 @@ export const TestSuiteName = ({ className, children, ...props }: TestSuiteNamePr
     >
       <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-fast ease-standard motion-reduce:transition-none group-data-[state=open]:rotate-90" />
       <TestStatusIcon status={status} />
-      <span className="min-w-0 flex-1 truncate font-medium text-sm">{children ?? name}</span>
+      <span className="min-w-0 flex-1 truncate font-medium text-body">{children ?? name}</span>
     </CollapsibleTrigger>
   );
 };
@@ -265,20 +270,35 @@ export const TestSuiteStats = ({
   className,
   children,
   ...props
-}: TestSuiteStatsProps) => (
-  <div
-    className={cn("ms-auto flex shrink-0 items-center gap-3 text-xs tabular-nums", className)}
-    {...props}
-  >
-    {children ?? (
-      <>
-        {passed > 0 && <span className="text-success-text">{passed} passed</span>}
-        {failed > 0 && <span className="text-destructive-text">{failed} failed</span>}
-        {skipped > 0 && <span className="text-muted-foreground">{skipped} skipped</span>}
-      </>
-    )}
-  </div>
-);
+}: TestSuiteStatsProps) => {
+  const { t } = useLocale();
+  return (
+    <div
+      className={cn("ms-auto flex shrink-0 items-center gap-3 text-meta tabular-nums", className)}
+      {...props}
+    >
+      {children ?? (
+        <>
+          {passed > 0 && (
+            <span className="text-success-text">
+              {t("ai.testResults.passedCount", { count: passed })}
+            </span>
+          )}
+          {failed > 0 && (
+            <span className="text-destructive-text">
+              {t("ai.testResults.failedCount", { count: failed })}
+            </span>
+          )}
+          {skipped > 0 && (
+            <span className="text-muted-foreground">
+              {t("ai.testResults.skippedCount", { count: skipped })}
+            </span>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
 
 export type TestSuiteContentProps = ComponentProps<typeof CollapsibleContent>;
 
@@ -328,7 +348,7 @@ export const TestDuration = ({ className, children, ...props }: TestDurationProp
 
   return (
     <span
-      className={cn("shrink-0 text-muted-foreground text-xs tabular-nums", className)}
+      className={cn("shrink-0 text-muted-foreground text-meta tabular-nums", className)}
       {...props}
     >
       {children ?? `${duration}ms`}
@@ -365,7 +385,7 @@ export const Test = ({ name, status, duration, className, children, ...props }:
   return (
     <TestContext.Provider value={contextValue}>
       <div
-        className={cn("flex min-w-0 items-center gap-2 ps-10 pe-4 py-2 text-sm", className)}
+        className={cn("flex min-w-0 items-center gap-2 ps-10 pe-4 py-2 text-body", className)}
         {...props}
       >
         {children ?? (
@@ -391,7 +411,7 @@ export const TestError = ({ className, children, ...props }: TestErrorProps) =>
 export type TestErrorMessageProps = HTMLAttributes<HTMLParagraphElement>;
 
 export const TestErrorMessage = ({ className, children, ...props }: TestErrorMessageProps) => (
-  <p className={cn("font-medium text-destructive-text text-sm", className)} {...props}>
+  <p className={cn("font-medium text-destructive-text text-body", className)} {...props}>
     {children}
   </p>
 );
@@ -400,7 +420,7 @@ export type TestErrorStackProps = HTMLAttributes<HTMLPreElement>;
 
 export const TestErrorStack = ({ className, children, ...props }: TestErrorStackProps) => (
   <pre
-    className={cn("mt-2 overflow-auto font-mono text-destructive-text text-xs", className)}
+    className={cn("mt-2 overflow-auto font-mono text-destructive-text text-meta", className)}
     {...props}
   >
     {children}

package/src/token-usage.tsx

@@ -154,7 +154,7 @@ export const TokenUsageContentHeader = ({
     <div className={cn("w-full space-y-2 p-3", className)} {...props}>
       {children ?? (
         <>
-          <div className="flex items-center justify-between gap-3 text-xs">
+          <div className="flex items-center justify-between gap-3 text-meta">
             <p>{displayPct}</p>
             <p className="font-mono text-muted-foreground">
               {used} / {total}
@@ -207,7 +207,7 @@ export const TokenUsageContentFooter = ({
   return (
     <div
       className={cn(
-        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs",
+        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-meta",
         className,
       )}
       {...props}
@@ -259,7 +259,7 @@ export const TokenUsageInput = ({ className, children, ...props }: TokenUsageInp
   });
 
   return (
-    <div className={cn("flex items-center justify-between text-xs", className)} {...props}>
+    <div className={cn("flex items-center justify-between text-meta", className)} {...props}>
       <span className="text-muted-foreground">{t("ai.tokenUsage.input")}</span>
       <TokensWithCost costText={inputCostText} tokens={inputTokens} />
     </div>
@@ -293,7 +293,7 @@ export const TokenUsageOutput = ({ className, children, ...props }: TokenUsageOu
   });
 
   return (
-    <div className={cn("flex items-center justify-between text-xs", className)} {...props}>
+    <div className={cn("flex items-center justify-between text-meta", className)} {...props}>
       <span className="text-muted-foreground">{t("ai.tokenUsage.output")}</span>
       <TokensWithCost costText={outputCostText} tokens={outputTokens} />
     </div>
@@ -333,7 +333,7 @@ export const TokenUsageReasoning = ({
   });
 
   return (
-    <div className={cn("flex items-center justify-between text-xs", className)} {...props}>
+    <div className={cn("flex items-center justify-between text-meta", className)} {...props}>
       <span className="text-muted-foreground">{t("ai.tokenUsage.reasoning")}</span>
       <TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />
     </div>
@@ -369,7 +369,7 @@ export const TokenUsageCache = ({ className, children, ...props }: TokenUsageCac
   });
 
   return (
-    <div className={cn("flex items-center justify-between text-xs", className)} {...props}>
+    <div className={cn("flex items-center justify-between text-meta", className)} {...props}>
       <span className="text-muted-foreground">{t("ai.tokenUsage.cache")}</span>
       <TokensWithCost costText={cacheCostText} tokens={cacheTokens} />
     </div>