@elabs-ai/components-ai 4.1.0 → 4.2.0

package/src/agent.tsx

@@ -31,9 +31,9 @@ export const AgentHeader = memo(({ className, name, model, ...props }: AgentHead
   <div className={cn("flex w-full items-center justify-between gap-4 p-3", className)} {...props}>
     <div className="flex items-center gap-2">
       <BotIcon className="size-4 text-muted-foreground" />
-      <span className="font-medium text-sm">{name}</span>
+      <span className="font-medium text-body">{name}</span>
       {model && (
-        <Badge className="font-mono text-xs" variant="secondary">
+        <Badge className="font-mono text-meta" variant="secondary">
           {model}
         </Badge>
       )}
@@ -56,10 +56,10 @@ export const AgentInstructions = memo(
     const { t } = useLocale();
     return (
       <div className={cn("space-y-2", className)} {...props}>
-        <span className="font-medium text-muted-foreground text-sm">
+        <span className="font-medium text-muted-foreground text-body">
           {t("ai.agent.instructions")}
         </span>
-        <div className="rounded-md bg-muted/50 p-3 text-muted-foreground text-sm">
+        <div className="rounded-md bg-muted/50 p-3 text-muted-foreground text-body">
           <p>{children}</p>
         </div>
       </div>
@@ -73,7 +73,7 @@ export const AgentTools = memo(({ className, ...props }: AgentToolsProps) => {
   const { t } = useLocale();
   return (
     <div className={cn("space-y-2", className)}>
-      <span className="font-medium text-muted-foreground text-sm">{t("ai.agent.tools")}</span>
+      <span className="font-medium text-muted-foreground text-body">{t("ai.agent.tools")}</span>
       <Accordion className="rounded-md border" {...props} />
     </div>
   );
@@ -93,7 +93,7 @@ export const AgentTool = memo(({ className, tool, value, ...props }: AgentToolPr
 
   return (
     <AccordionItem className={cn("border-b last:border-b-0", className)} value={value} {...props}>
-      <AccordionTrigger className="px-3 py-2 text-sm hover:no-underline">
+      <AccordionTrigger className="px-3 py-2 text-body hover:no-underline">
         {description ?? "No description"}
       </AccordionTrigger>
       <AccordionContent className="px-3 pb-3">
@@ -109,14 +109,19 @@ export type AgentOutputProps = ComponentProps<"div"> & {
   schema: string;
 };
 
-export const AgentOutput = memo(({ className, schema, ...props }: AgentOutputProps) => (
-  <div className={cn("space-y-2", className)} {...props}>
-    <span className="font-medium text-muted-foreground text-sm">Output Schema</span>
-    <div className="rounded-md bg-muted/50">
-      <CodeBlock code={schema} language="typescript" />
+export const AgentOutput = memo(({ className, schema, ...props }: AgentOutputProps) => {
+  const { t } = useLocale();
+  return (
+    <div className={cn("space-y-2", className)} {...props}>
+      <span className="font-medium text-muted-foreground text-body">
+        {t("ai.agent.outputSchema")}
+      </span>
+      <div className="rounded-md bg-muted/50">
+        <CodeBlock code={schema} language="typescript" />
+      </div>
     </div>
-  </div>
-));
+  );
+});
 
 Agent.displayName = "Agent";
 AgentHeader.displayName = "AgentHeader";

package/src/artifact.tsx

@@ -86,13 +86,13 @@ export const ArtifactClose = ({
 export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
 
 export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
-  <p className={cn("font-medium text-foreground text-sm", className)} {...props} />
+  <p className={cn("font-medium text-foreground text-body", className)} {...props} />
 );
 
 export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
 
 export const ArtifactDescription = ({ className, ...props }: ArtifactDescriptionProps) => (
-  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
+  <p className={cn("text-muted-foreground text-body", className)} {...props} />
 );
 
 export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;

package/src/asset-preview.test.tsx

@@ -54,6 +54,46 @@ describe("AssetPreview (#193, research 04 §5 ASSET-4)", () => {
   });
 });
 
+// The old parser split every line on a bare `,` — a comma, an escaped quote,
+// or a newline INSIDE a quoted field corrupted the row/column count.
+describe("AssetPreview CSV parsing — quoted fields (review #1)", () => {
+  it("keeps a comma inside a quoted field as part of that one cell", () => {
+    const asset: ContextAsset = {
+      id: "quoted-comma",
+      name: "quoted-comma.csv",
+      type: "csv",
+      content: 'name,note\n"Acme, Inc.",big account',
+    };
+    render(<AssetPreview asset={asset} />);
+    expect(screen.getByText("Acme, Inc.")).toBeInTheDocument();
+    expect(screen.getByText("1 row")).toBeInTheDocument();
+  });
+
+  it("unescapes a doubled quote inside a quoted field", () => {
+    const asset: ContextAsset = {
+      id: "escaped-quote",
+      name: "escaped-quote.csv",
+      type: "csv",
+      content: 'name,note\n"Say ""hi""",greeting',
+    };
+    render(<AssetPreview asset={asset} />);
+    expect(screen.getByText('Say "hi"')).toBeInTheDocument();
+  });
+
+  it("keeps a newline inside a quoted field from starting a new row", () => {
+    const asset: ContextAsset = {
+      id: "embedded-newline",
+      name: "embedded-newline.csv",
+      type: "csv",
+      content: 'name,note\n"multi\nline",x\nsecond,y',
+    };
+    render(<AssetPreview asset={asset} />);
+    // Two data rows total — the embedded newline must NOT read as a third.
+    expect(screen.getByText("2 rows")).toBeInTheDocument();
+    expect(screen.getByText("second")).toBeInTheDocument();
+  });
+});
+
 /**
  * The seam that lets a format this package cannot parse (a PDF, a spreadsheet,
  * a video) show up in the rail without `@elabs-ai/components-ai`

package/src/asset-preview.tsx

@@ -30,6 +30,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  useLocale,
 } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import type { HTMLAttributes, ReactNode } from "react";
@@ -72,18 +73,87 @@ interface ParsedCsv {
   rows: string[][];
 }
 
-/** Minimal preview-grade CSV split (no quoted-comma handling — it's a glance, not a grid). */
+/**
+ * A small RFC 4180-ish CSV tokenizer: handles quoted fields (commas and
+ * newlines inside quotes don't end the field/row) and the `""` escaped-quote
+ * convention. Single pass over the raw string — no line pre-split, so a
+ * quoted field spanning multiple lines survives intact. Still preview-grade
+ * (unquoted cells are trimmed for the glance table), not a full CSV grammar.
+ */
+function parseCsvRows(content: string): string[][] {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let field = "";
+  let wasQuoted = false;
+  let inQuotes = false;
+
+  const endField = () => {
+    row.push(wasQuoted ? field : field.trim());
+    field = "";
+    wasQuoted = false;
+  };
+  const endRow = () => {
+    endField();
+    rows.push(row);
+    row = [];
+  };
+
+  for (let i = 0; i < content.length; i++) {
+    const ch = content[i];
+
+    if (inQuotes) {
+      if (ch === '"') {
+        if (content[i + 1] === '"') {
+          field += '"';
+          i += 1;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        field += ch;
+      }
+      continue;
+    }
+
+    if (ch === '"' && field === "") {
+      inQuotes = true;
+      wasQuoted = true;
+      continue;
+    }
+
+    if (ch === ",") {
+      endField();
+      continue;
+    }
+
+    if (ch === "\r") {
+      continue;
+    }
+
+    if (ch === "\n") {
+      endRow();
+      continue;
+    }
+
+    field += ch;
+  }
+
+  // A trailing field/row with no terminating newline.
+  if (field !== "" || row.length > 0) {
+    endRow();
+  }
+
+  return rows;
+}
+
 function parseCsv(content: string): ParsedCsv {
-  const lines = content
-    .trim()
-    .split(/\r?\n/)
-    .filter((line) => line.length > 0);
-  const [head = "", ...rest] = lines;
-  const split = (line: string) => line.split(",").map((cell) => cell.trim());
-  return { header: split(head), rows: rest.map(split) };
+  const rows = parseCsvRows(content.trim()).filter((r) => !(r.length === 1 && r[0] === ""));
+  const [header = [], ...rest] = rows;
+  return { header, rows: rest };
 }
 
 const CsvPreview = ({ content }: { content: string }) => {
+  const { t } = useLocale();
   const { header, rows } = useMemo(() => parseCsv(content), [content]);
   return (
     <div className="flex flex-col gap-2">
@@ -109,7 +179,7 @@ const CsvPreview = ({ content }: { content: string }) => {
         </TableBody>
       </Table>
       <p className="text-meta text-muted-foreground">
-        {rows.length} {rows.length === 1 ? "row" : "rows"}
+        {t("ai.assetPreview.rowCount", { count: rows.length })}
       </p>
     </div>
   );
@@ -135,6 +205,7 @@ export const AssetPreview = ({
   className,
   ...props
 }: AssetPreviewProps) => {
+  const { t } = useLocale();
   const [mode, setMode] = useState<AssetPreviewMode>(defaultMode);
   const injectedRenderer = useAssetPreviewRenderer();
   const content = asset.content ?? "";
@@ -150,7 +221,7 @@ export const AssetPreview = ({
   if (injected !== null) {
     body = injected;
   } else if (asset.type !== "image" && content.length === 0) {
-    body = <p className="text-body text-muted-foreground">No preview available…</p>;
+    body = <p className="text-body text-muted-foreground">{t("ai.assetPreview.noPreview")}</p>;
   } else if (showRaw) {
     body = <CodeBlock code={content} language={assetLanguage(asset)} wrap />;
   } else {
@@ -197,7 +268,7 @@ export const AssetPreview = ({
               className={cn(!showRaw && "bg-accent text-accent-foreground")}
               onClick={() => setMode("preview")}
             >
-              Preview
+              {t("ai.assetPreview.preview")}
             </Button>
             <Button
               type="button"
@@ -207,7 +278,7 @@ export const AssetPreview = ({
               className={cn(showRaw && "bg-accent text-accent-foreground")}
               onClick={() => setMode("raw")}
             >
-              Raw
+              {t("ai.assetPreview.raw")}
             </Button>
           </ArtifactActions>
         ) : null}

package/src/attachments.tsx

@@ -192,8 +192,8 @@ export const Attachment = ({ data, onRemove, className, children, ...props }: At
           variant === "inline" && [
             "flex h-8 cursor-pointer select-none items-center gap-1.5",
             "rounded-md border border-border px-1.5",
-            "font-medium text-sm transition-colors duration-fast ease-standard motion-reduce:transition-none",
-            "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            "font-medium text-body transition-colors duration-fast ease-standard motion-reduce:transition-none",
+            "hover:bg-accent/50 hover:text-accent-foreground",
           ],
           variant === "list" && [
             "flex w-full items-center gap-3 rounded-lg border p-3",
@@ -283,7 +283,7 @@ export const AttachmentInfo = ({
     <div className={cn("min-w-0 flex-1", className)} {...props}>
       <span className="block truncate">{label}</span>
       {showMediaType && data.mediaType && (
-        <span className="block truncate text-muted-foreground text-xs">{data.mediaType}</span>
+        <span className="block truncate text-muted-foreground text-meta">{data.mediaType}</span>
       )}
     </div>
   );
@@ -385,7 +385,10 @@ export type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
 
 export const AttachmentEmpty = ({ className, children, ...props }: AttachmentEmptyProps) => (
   <div
-    className={cn("flex items-center justify-center p-4 text-muted-foreground text-sm", className)}
+    className={cn(
+      "flex items-center justify-center p-4 text-muted-foreground text-body",
+      className,
+    )}
     {...props}
   >
     {children ?? "No attachments"}

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();
+  });
+});