@tangle-network/ui 11.7.0 → 11.8.0

package/dist/files.js

@@ -1,23 +1,29 @@
 import {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
   FileTree,
   RichFileTree,
-  filterFileTree
-} from "./chunk-PLWRAS5Z.js";
+  filterFileTree,
+  parseCsv
+} from "./chunk-XGOWUDDW.js";
+import "./chunk-4CLN43XT.js";
 import {
   detectFileFormat,
   fileExtension,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
-} from "./chunk-ZRVH3WCA.js";
+  getSyntaxLanguage,
+  resolveFilePreviewKind
+} from "./chunk-XU3HB5QL.js";
+import "./chunk-MKTSMWVD.js";
 import "./chunk-LTEKI7YJ.js";
 import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
@@ -28,5 +34,7 @@ export {
   filterFileTree,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
+  getSyntaxLanguage,
+  parseCsv,
+  resolveFilePreviewKind
 };

package/dist/hooks.js

@@ -11,19 +11,20 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-4ENFLPWQ.js";
+} from "./chunk-BWOUSEHM.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-UYTRNR7Z.js";
-import "./chunk-6RIX7M27.js";
-import "./chunk-XT4JMYVB.js";
-import "./chunk-EIUE5GV2.js";
-import "./chunk-AAUNOHVL.js";
+} from "./chunk-565EATZZ.js";
+import "./chunk-Q7ZR6LSD.js";
+import "./chunk-KNYSKNZX.js";
+import "./chunk-ND3ZFXQK.js";
+import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
-import "./chunk-ZRVH3WCA.js";
+import "./chunk-4CLN43XT.js";
+import "./chunk-XU3HB5QL.js";
 import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, Agen
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot } from './run.js';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallStatus, d as ToolCallType, p as parseToolEvent } from './tool-call-feed-D9iofJgW.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from './openui.js';
-export { FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage } from './files.js';
+export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewKind, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind } from './files.js';
 export { Markdown, MarkdownProps } from './markdown.js';
 export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-0kSpWMnf.js';
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from './auth.js';

package/dist/index.js

@@ -20,7 +20,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-4ENFLPWQ.js";
+} from "./chunk-BWOUSEHM.js";
 import {
   addMessage,
   addParts,
@@ -146,39 +146,35 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-VDCZHOOO.js";
+} from "./chunk-X53RZSX6.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-UYTRNR7Z.js";
+} from "./chunk-565EATZZ.js";
 import {
   LiveDuration
-} from "./chunk-LFVF2HFB.js";
+} from "./chunk-YTO5V6QS.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-6RIX7M27.js";
+} from "./chunk-Q7ZR6LSD.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-CVX53NCC.js";
+} from "./chunk-OXZRCXJK.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   RunRowShell,
   RunRowStatusDot
-} from "./chunk-XT4JMYVB.js";
+} from "./chunk-KNYSKNZX.js";
 import {
   TOOL_CATEGORY_ICONS,
-  formatBytes,
-  formatDuration,
-  formatUptime,
   getToolCategory,
   getToolDisplayMetadata,
-  getToolErrorText,
-  truncateText
-} from "./chunk-EIUE5GV2.js";
+  getToolErrorText
+} from "./chunk-ND3ZFXQK.js";
 import {
   CommandPreview,
   DiffPreview,
@@ -187,7 +183,7 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-AAUNOHVL.js";
+} from "./chunk-NWECTSOH.js";
 import {
   TextShimmer
 } from "./chunk-L57WRIND.js";
@@ -215,24 +211,33 @@ import {
   badgeVariants
 } from "./chunk-GYPQXTJU.js";
 import {
-  Button,
-  buttonVariants
-} from "./chunk-MKTSMWVD.js";
-import {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
   FileTree,
   RichFileTree,
-  filterFileTree
-} from "./chunk-PLWRAS5Z.js";
+  filterFileTree,
+  parseCsv
+} from "./chunk-XGOWUDDW.js";
+import {
+  formatBytes,
+  formatDuration,
+  formatUptime,
+  truncateText
+} from "./chunk-4CLN43XT.js";
 import {
   detectFileFormat,
   fileExtension,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
-} from "./chunk-ZRVH3WCA.js";
+  getSyntaxLanguage,
+  resolveFilePreviewKind
+} from "./chunk-XU3HB5QL.js";
+import {
+  Button,
+  buttonVariants
+} from "./chunk-MKTSMWVD.js";
 import {
   Tabs,
   TabsContent,
@@ -262,6 +267,7 @@ export {
   AvatarImage,
   Badge,
   Button,
+  CSV_PREVIEW_ROW_LIMIT,
   Card,
   CardContent,
   CardDescription,
@@ -413,10 +419,12 @@ export {
   hasBackgroundRunningSessions,
   isStreamingAtom,
   messagesAtom,
+  parseCsv,
   parseToolEvent,
   partMapAtom,
   registerActiveSession,
   resetActiveSessions,
+  resolveFilePreviewKind,
   setActiveSessionAttention,
   setActiveSessionConnection,
   setActiveSessionError,

package/dist/run.js

@@ -1,27 +1,28 @@
 import {
   LiveDuration
-} from "./chunk-LFVF2HFB.js";
+} from "./chunk-YTO5V6QS.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-6RIX7M27.js";
+} from "./chunk-Q7ZR6LSD.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-CVX53NCC.js";
+} from "./chunk-OXZRCXJK.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   RunRowShell,
   RunRowStatusDot
-} from "./chunk-XT4JMYVB.js";
-import "./chunk-EIUE5GV2.js";
-import "./chunk-AAUNOHVL.js";
+} from "./chunk-KNYSKNZX.js";
+import "./chunk-ND3ZFXQK.js";
+import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
 import "./chunk-3M7BPSSW.js";
 import "./chunk-GYPQXTJU.js";
+import "./chunk-4CLN43XT.js";
+import "./chunk-XU3HB5QL.js";
 import "./chunk-MKTSMWVD.js";
-import "./chunk-ZRVH3WCA.js";
 import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";

package/dist/sdk-hooks.js

@@ -5,19 +5,20 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-4ENFLPWQ.js";
+} from "./chunk-BWOUSEHM.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-UYTRNR7Z.js";
-import "./chunk-6RIX7M27.js";
-import "./chunk-XT4JMYVB.js";
-import "./chunk-EIUE5GV2.js";
-import "./chunk-AAUNOHVL.js";
+} from "./chunk-565EATZZ.js";
+import "./chunk-Q7ZR6LSD.js";
+import "./chunk-KNYSKNZX.js";
+import "./chunk-ND3ZFXQK.js";
+import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
-import "./chunk-ZRVH3WCA.js";
+import "./chunk-4CLN43XT.js";
+import "./chunk-XU3HB5QL.js";
 import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";

package/dist/tool-previews.js

@@ -7,8 +7,8 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-AAUNOHVL.js";
-import "./chunk-ZRVH3WCA.js";
+} from "./chunk-NWECTSOH.js";
+import "./chunk-XU3HB5QL.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/utils.js

@@ -4,14 +4,16 @@ import {
 } from "./chunk-XGKULLYE.js";
 import {
   TOOL_CATEGORY_ICONS,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText
+} from "./chunk-ND3ZFXQK.js";
+import {
   formatBytes,
   formatDuration,
   formatUptime,
-  getToolCategory,
-  getToolDisplayMetadata,
-  getToolErrorText,
   truncateText
-} from "./chunk-EIUE5GV2.js";
+} from "./chunk-4CLN43XT.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.7.0",
+  "version": "11.8.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/files/file-artifact-pane.stories.tsx

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileArtifactPane } from "./file-artifact-pane";
+
+const TS_SOURCE = `interface SandboxConfig {
+  model: string
+  timeout: number
+  env: Record<string, string>
+}
+
+// Create a new sandbox and stream its output.
+export async function run(config: SandboxConfig) {
+  const sandbox = await Sandbox.create(config)
+  for await (const chunk of sandbox.stream()) {
+    process.stdout.write(chunk)
+  }
+}`;
+
+const MARKDOWN_SOURCE = `# Run report
+
+The agent finished **3 of 3** tasks.
+
+| Task | Result |
+| --- | --- |
+| Build | pass |
+| Test | 315 / 315 |
+| Deploy | staging |
+
+\`\`\`ts
+export const ready = true
+\`\`\`
+`;
+
+// A transparent SVG, larger than the pane, so the checker ground shows through
+// and the fit-to-pane / natural-size toggle has a visible effect.
+const IMAGE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 640 360">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#8263FF"/>
+      <stop offset="1" stop-color="#10b981"/>
+    </linearGradient>
+  </defs>
+  <circle cx="220" cy="180" r="120" fill="url(#g)"/>
+  <rect x="360" y="80" width="200" height="200" rx="28" fill="#FFB347" opacity="0.9"/>
+  <text x="320" y="330" text-anchor="middle" font-family="sans-serif" font-size="22" fill="#E8E6F6">chart.svg · 1600 × 900</text>
+</svg>`;
+const IMAGE_URL = `data:image/svg+xml;utf8,${encodeURIComponent(IMAGE_SVG)}`;
+
+// One-page PDF (Helvetica text and a rule) so the viewer has real content.
+const PDF_URL =
+  "data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iago8PCAvVHlwZSAvQ2F0YWxvZyAvUGFnZXMgMiAwIFIgPj4KZW5kb2JqCjIgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzIC9LaWRzIFszIDAgUl0gL0NvdW50IDEgPj4KZW5kb2JqCjMgMCBvYmoKPDwgL1R5cGUgL1BhZ2UgL1BhcmVudCAyIDAgUiAvTWVkaWFCb3ggWzAgMCA2MTIgNzkyXSAvQ29udGVudHMgNCAwIFIgL1Jlc291cmNlcyA8PCAvRm9udCA8PCAvRjEgNSAwIFIgPj4gPj4gPj4KZW5kb2JqCjQgMCBvYmoKPDwgL0xlbmd0aCAyODkgPj4Kc3RyZWFtCkJUIC9GMSAyMiBUZiA1NiA3MDAgVGQgKEZpbGVBcnRpZmFjdFBhbmUpIFRqIEVUCkJUIC9GMSAxMiBUZiA1NiA2NzIgVGQgKFBERiBwcmV2aWV3IHJlbmRlcnMgdGhlIGJsb2JVcmwgYXQgZnVsbCBwYW5lIGhlaWdodC4pIFRqIEVUCkJUIC9GMSAxMiBUZiA1NiA2NTIgVGQgKEV2ZXJ5IGNvbnN1bWVyIG9mIEB0YW5nbGUtbmV0d29yay91aS9maWxlcyBnZXRzIHRoaXMgZm9yIGZyZWUuKSBUaiBFVAo1NiA2MjAgbSA1NTYgNjIwIGwgUwpCVCAvRjEgMTAgVGYgNTYgNTk2IFRkIChQYWdlIDEgb2YgMSkgVGogRVQKZW5kc3RyZWFtCmVuZG9iago1IDAgb2JqCjw8IC9UeXBlIC9Gb250IC9TdWJ0eXBlIC9UeXBlMSAvQmFzZUZvbnQgL0hlbHZldGljYSA+PgplbmRvYmoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAwNTggMDAwMDAgbiAKMDAwMDAwMDExNSAwMDAwMCBuIAowMDAwMDAwMjQxIDAwMDAwIG4gCjAwMDAwMDA1ODEgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA2IC9Sb290IDEgMCBSID4+CnN0YXJ0eHJlZgo2NTEKJSVFT0YK";
+
+const CSV_SOURCE = [
+  "id,name,role,note,active",
+  ...Array.from({ length: 520 }, (_, i) =>
+    [
+      i + 1,
+      `"Lovelace, Ada ${i + 1}"`,
+      ["engineer", "maintainer", "architect"][i % 3],
+      `"Handles ""quoted"" values, and commas"`,
+      i % 4 === 0 ? "false" : "true",
+    ].join(","),
+  ),
+].join("\n");
+
+// CC0 sample media hosted by MDN; the story only needs a playable src.
+const VIDEO_URL = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+const AUDIO_URL = "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3";
+
+const meta: Meta<typeof FileArtifactPane> = {
+  title: "Files/FileArtifactPane",
+  component: FileArtifactPane,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    onDownload: { action: "download" },
+    onClose: { action: "close" },
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[560px] w-[760px] overflow-hidden rounded-xl border border-border bg-card text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FileArtifactPane>;
+
+export const Code: Story = {
+  args: { filename: "run.ts", path: "src/run.ts", content: TS_SOURCE },
+};
+
+export const Image: Story = {
+  args: {
+    filename: "chart.svg",
+    path: "out/chart.svg",
+    blobUrl: IMAGE_URL,
+    mimeType: "image/svg+xml",
+    size: 1_204,
+  },
+};
+
+export const Pdf: Story = {
+  name: "PDF",
+  args: {
+    filename: "report.pdf",
+    path: "out/report.pdf",
+    blobUrl: PDF_URL,
+    mimeType: "application/pdf",
+    size: 834,
+  },
+};
+
+export const Csv: Story = {
+  name: "CSV (520 rows, capped at 500)",
+  args: { filename: "people.csv", path: "data/people.csv", content: CSV_SOURCE },
+};
+
+export const Video: Story = {
+  args: {
+    filename: "flower.mp4",
+    path: "media/flower.mp4",
+    blobUrl: VIDEO_URL,
+    mimeType: "video/mp4",
+  },
+};
+
+export const Audio: Story = {
+  args: {
+    filename: "t-rex-roar.mp3",
+    path: "media/t-rex-roar.mp3",
+    blobUrl: AUDIO_URL,
+    mimeType: "audio/mpeg",
+  },
+};
+
+export const Spreadsheet: Story = {
+  args: { filename: "ledger.xlsx", path: "finance/ledger.xlsx", size: 48_213 },
+};
+
+export const MarkdownProse: Story = {
+  name: "Markdown",
+  args: { filename: "REPORT.md", path: "out/REPORT.md", content: MARKDOWN_SOURCE },
+};
+
+export const BinaryWithoutLink: Story = {
+  name: "Binary without a download link",
+  args: { filename: "weights.bin", path: "model/weights.bin", size: 402_653_184 },
+};

package/src/files/file-artifact-pane.test.tsx

@@ -0,0 +1,192 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { FileArtifactPane } from "./file-artifact-pane";
+import { CSV_PREVIEW_ROW_LIMIT, parseCsv } from "./file-preview";
+
+const BLOB_URL = "blob:https://app.tangle.tools/1f2e3d4c";
+
+function csvWithRows(rowCount: number): string {
+  const rows = Array.from({ length: rowCount }, (_, i) => `"Ada, Countess ${i}",x,${i}`);
+  return ["name,note,n", ...rows].join("\n");
+}
+
+describe("FileArtifactPane previews", () => {
+  it("renders an image from blobUrl and toggles natural size on click", () => {
+    const { container } = render(
+      <FileArtifactPane filename="chart.png" blobUrl={BLOB_URL} mimeType="image/png" />,
+    );
+
+    const img = container.querySelector("img");
+    expect(img).not.toBeNull();
+    expect(img).toHaveAttribute("src", BLOB_URL);
+    expect(img).toHaveAttribute("alt", "chart.png");
+    expect(img).toHaveClass("object-contain");
+
+    const toggle = screen.getByRole("button", { name: "Show image at natural size" });
+    expect(toggle).toHaveAttribute("aria-pressed", "false");
+    fireEvent.click(toggle);
+    expect(screen.getByRole("button", { name: "Fit image to pane" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    expect(container.querySelector("img")).toHaveClass("max-w-none");
+  });
+
+  it("renders a PDF as an <object> of the blobUrl", () => {
+    const { container } = render(
+      <FileArtifactPane filename="report.pdf" blobUrl={BLOB_URL} mimeType="application/pdf" />,
+    );
+
+    const viewer = container.querySelector("object");
+    expect(viewer).not.toBeNull();
+    expect(viewer).toHaveAttribute("data", BLOB_URL);
+    expect(viewer).toHaveAttribute("type", "application/pdf");
+    expect(viewer).toHaveAttribute("title", "report.pdf");
+  });
+
+  it("renders video and audio with native controls", () => {
+    const video = render(<FileArtifactPane filename="demo.mp4" blobUrl={BLOB_URL} />);
+    const videoElement = video.container.querySelector("video");
+    expect(videoElement).not.toBeNull();
+    expect(videoElement).toHaveAttribute("src", BLOB_URL);
+    expect(videoElement).toHaveAttribute("controls");
+    video.unmount();
+
+    const audio = render(<FileArtifactPane filename="voice.m4a" blobUrl={BLOB_URL} />);
+    const audioElement = audio.container.querySelector("audio");
+    expect(audioElement).not.toBeNull();
+    expect(audioElement).toHaveAttribute("src", BLOB_URL);
+    expect(audioElement).toHaveAttribute("controls");
+    expect(audio.getAllByText("voice.m4a").length).toBeGreaterThan(1); // header + player label
+  });
+
+  it("parses quoted commas in CSV and caps the table at the row limit", () => {
+    const total = CSV_PREVIEW_ROW_LIMIT + 1;
+    const { container } = render(
+      <FileArtifactPane filename="people.csv" content={csvWithRows(total)} />,
+    );
+
+    const headers = Array.from(container.querySelectorAll("thead th")).map((th) => th.textContent);
+    expect(headers).toEqual(["name", "note", "n"]);
+    expect(container.querySelectorAll("thead th")[0]).toHaveClass("sticky");
+
+    const bodyRows = container.querySelectorAll("tbody tr");
+    expect(bodyRows).toHaveLength(CSV_PREVIEW_ROW_LIMIT);
+    expect(bodyRows[0].querySelectorAll("td")[0]).toHaveTextContent("Ada, Countess 0");
+    expect(bodyRows[0].querySelectorAll("td")).toHaveLength(3);
+
+    expect(
+      screen.getByText(`Showing ${CSV_PREVIEW_ROW_LIMIT} of ${total} rows · 3 columns`),
+    ).toBeInTheDocument();
+  });
+
+  it("reports the row count when the CSV is under the cap", () => {
+    render(<FileArtifactPane filename="people.csv" content={csvWithRows(3)} />);
+    expect(screen.getByText("3 rows · 3 columns")).toBeInTheDocument();
+  });
+
+  it("renders a spreadsheet as a download card and calls onDownload", () => {
+    const onDownload = vi.fn();
+    render(
+      <FileArtifactPane filename="book.xlsx" size={1536} onDownload={onDownload} />,
+    );
+
+    expect(screen.getByText("1.5 KB")).toBeInTheDocument();
+    expect(
+      screen.getByText("Download to open this workbook in a spreadsheet app."),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Download" }));
+    expect(onDownload).toHaveBeenCalledTimes(1);
+
+    // The header keeps its own download control.
+    fireEvent.click(screen.getByRole("button", { name: "Download book.xlsx" }));
+    expect(onDownload).toHaveBeenCalledTimes(2);
+  });
+
+  it("renders markdown through the package Markdown renderer", () => {
+    const { container } = render(
+      <FileArtifactPane filename="README.md" content={"# Title\n\nBody with **bold**."} />,
+    );
+    expect(container.querySelector(".tangle-prose")).not.toBeNull();
+    expect(container.querySelector("h1")).toHaveTextContent("Title");
+    expect(container.querySelector("strong")).toHaveTextContent("bold");
+  });
+
+  it("renders a binary file with no download link as one muted sentence", () => {
+    const onDownload = vi.fn();
+    const withDownload = render(
+      <FileArtifactPane filename="weights.bin" onDownload={onDownload} />,
+    );
+    expect(
+      withDownload.getByText("This file needs a download link to preview."),
+    ).toBeInTheDocument();
+    fireEvent.click(withDownload.getByRole("button", { name: "Download" }));
+    expect(onDownload).toHaveBeenCalledTimes(1);
+    withDownload.unmount();
+
+    render(<FileArtifactPane filename="weights.bin" />);
+    expect(screen.getByText("This file needs a download link to preview.")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Download" })).toBeNull();
+  });
+
+  it("renders the same sentence for an image, PDF, or video without a blobUrl", () => {
+    for (const filename of ["chart.png", "report.pdf", "demo.mp4"]) {
+      const { getByText, unmount } = render(<FileArtifactPane filename={filename} />);
+      expect(getByText("This file needs a download link to preview.")).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it("renders an unknown file's text content as text", () => {
+    const { container } = render(
+      <FileArtifactPane filename="Makefile.custom" content={"build:\n\tgo build"} />,
+    );
+    expect(container.querySelector("pre")).toHaveTextContent("go build");
+    expect(container.querySelector("code")).toBeNull();
+  });
+
+  it("keeps code on the syntax highlighter and text on a plain pre", () => {
+    const code = render(
+      <FileArtifactPane filename="server.ts" content={"const x = 1;\nexport { x };"} />,
+    );
+    expect(code.container.querySelector("code")).not.toBeNull();
+    expect(code.container.querySelector("table")).toBeNull();
+    expect(code.getByText(/ts · 2 lines/)).toBeInTheDocument();
+    code.unmount();
+
+    const text = render(<FileArtifactPane filename="notes.txt" content="just words" />);
+    expect(text.container.querySelector("pre")).toHaveTextContent("just words");
+    expect(text.container.querySelector("code")).toBeNull();
+  });
+
+  it("renders SVG source as code when the host read it as text", () => {
+    const { container } = render(
+      <FileArtifactPane filename="icon.svg" content={'<svg xmlns="http://www.w3.org/2000/svg"/>'} />,
+    );
+    expect(container.querySelector("code")).not.toBeNull();
+    expect(container.querySelector("img")).toBeNull();
+  });
+});
+
+describe("parseCsv", () => {
+  it("keeps commas, line breaks, and doubled quotes inside quoted cells", () => {
+    expect(parseCsv('a,b\n"x, y","line 1\nline 2"\n"say ""hi""",z')).toEqual([
+      ["a", "b"],
+      ["x, y", "line 1\nline 2"],
+      ['say "hi"', "z"],
+    ]);
+  });
+
+  it("trims unquoted cells and accepts CRLF, blank lines, and a trailing line break", () => {
+    expect(parseCsv("a, b\r\n\r\n1 ,2\r\n")).toEqual([
+      ["a", "b"],
+      ["1", "2"],
+    ]);
+  });
+
+  it("returns no rows for empty input", () => {
+    expect(parseCsv("")).toEqual([]);
+    expect(parseCsv("\n\n")).toEqual([]);
+  });
+});