@tangle-network/ui 11.6.0 → 11.8.0

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

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

@@ -51,13 +51,16 @@ export interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className
 
 /**
  * FileArtifactPane — opinionated artifact frame for file previews with tabs and
- * header actions.
+ * header actions. The body is `FilePreview`, so every kind it renders (image,
+ * PDF, video, audio, CSV, spreadsheet, markdown, code, text) renders here too;
+ * `onDownload` drives both the header button and the body's download cards.
  */
 export function FileArtifactPane({
   filename,
   content,
   blobUrl,
   mimeType,
+  size,
   onClose,
   onDownload,
   path,
@@ -188,6 +191,8 @@ export function FileArtifactPane({
         content={content}
         blobUrl={blobUrl}
         mimeType={mimeType}
+        size={size}
+        onDownload={onDownload}
         hideHeader={true}
       />
     </ArtifactPane>

package/src/files/file-format.ts

@@ -8,6 +8,8 @@
 export type FileFormat =
   | "pdf"
   | "image"
+  | "video"
+  | "audio"
   | "csv"
   | "spreadsheet"
   | "code"
@@ -17,7 +19,20 @@ export type FileFormat =
   | "text"
   | "unknown";
 
-const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "svg", "webp"];
+/**
+ * How a file surface renders a file. Every format maps to its own renderer;
+ * `unknown` becomes `binary`, which renders string content as text and offers a
+ * download for anything else.
+ */
+export type FilePreviewKind = Exclude<FileFormat, "unknown"> | "binary";
+
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "svg", "webp", "avif"];
+const VIDEO_EXTENSIONS = ["mp4", "webm", "mov"];
+const AUDIO_EXTENSIONS = ["mp3", "wav", "ogg", "m4a"];
+const SPREADSHEET_MIME_TYPES = [
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-excel",
+];
 
 const EXTENSION_TO_SYNTAX_LANGUAGE: Record<string, string> = {
   ts: "typescript",
@@ -97,14 +112,19 @@ export function detectFileFormat(filename: string, mimeType?: string): FileForma
   // 1. Specific MIME types are authoritative — they outrank the extension.
   if (mime === "application/pdf") return "pdf";
   if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("video/")) return "video";
+  if (mime.startsWith("audio/")) return "audio";
   if (mime === "text/markdown") return "markdown";
   if (mime === "application/json") return "json";
   if (mime === "text/csv" || mime === "application/csv") return "csv";
+  if (SPREADSHEET_MIME_TYPES.includes(mime)) return "spreadsheet";
   if (mime === "application/yaml" || mime === "application/x-yaml" || mime === "text/yaml") return "yaml";
 
   // 2. Fall back to the file extension.
   if (ext === "pdf") return "pdf";
   if (IMAGE_EXTENSIONS.includes(ext)) return "image";
+  if (VIDEO_EXTENSIONS.includes(ext)) return "video";
+  if (AUDIO_EXTENSIONS.includes(ext)) return "audio";
   if (ext === "csv") return "csv";
   if (ext === "xlsx" || ext === "xls") return "spreadsheet";
   if (CODE_EXTENSIONS.has(ext)) return "code";
@@ -119,13 +139,28 @@ export function detectFileFormat(filename: string, mimeType?: string): FileForma
   return "unknown";
 }
 
-/** Human-facing label for a detected format. */
-export function getFormatLabel(format: FileFormat): string {
+/**
+ * The preview renderer for a file, from its name and optional MIME type only.
+ * Same precedence as `detectFileFormat` (MIME outranks extension); a file that
+ * matches nothing is `binary`. Content is not an input: the preview renders a
+ * `binary` file's string content as text and offers a download otherwise.
+ */
+export function resolveFilePreviewKind(filename: string, mimeType?: string): FilePreviewKind {
+  const format = detectFileFormat(filename, mimeType);
+  return format === "unknown" ? "binary" : format;
+}
+
+/** Human-facing label for a detected format or preview kind. */
+export function getFormatLabel(format: FileFormat | FilePreviewKind): string {
   switch (format) {
     case "pdf":
       return "PDF";
     case "image":
       return "Image";
+    case "video":
+      return "Video";
+    case "audio":
+      return "Audio";
     case "csv":
       return "CSV";
     case "spreadsheet":
@@ -161,7 +196,10 @@ export function getSyntaxLanguage(filename: string): string | undefined {
  * a MIME type on an extensionless file (where the extension can't reveal it);
  * any other code format keys off the extension.
  */
-export function getCodeLanguage(filename: string, format: FileFormat): string | undefined {
+export function getCodeLanguage(
+  filename: string,
+  format: FileFormat | FilePreviewKind,
+): string | undefined {
   if (format === "json" || format === "yaml") return format;
   return getSyntaxLanguage(filename);
 }

package/src/files/file-preview-kind.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import {
+  detectFileFormat,
+  getFormatLabel,
+  resolveFilePreviewKind,
+  type FilePreviewKind,
+} from "./file-format";
+
+describe("resolveFilePreviewKind", () => {
+  it.each<[string, string | undefined, FilePreviewKind]>([
+    // Images
+    ["photo.png", undefined, "image"],
+    ["photo.jpg", undefined, "image"],
+    ["photo.jpeg", undefined, "image"],
+    ["anim.gif", undefined, "image"],
+    ["photo.webp", undefined, "image"],
+    ["icon.svg", undefined, "image"],
+    ["photo.avif", undefined, "image"],
+    // Documents
+    ["report.pdf", undefined, "pdf"],
+    // Video
+    ["clip.mp4", undefined, "video"],
+    ["clip.webm", undefined, "video"],
+    ["clip.mov", undefined, "video"],
+    // Audio
+    ["track.mp3", undefined, "audio"],
+    ["track.wav", undefined, "audio"],
+    ["track.ogg", undefined, "audio"],
+    ["track.m4a", undefined, "audio"],
+    // Tabular
+    ["data.csv", undefined, "csv"],
+    ["book.xlsx", undefined, "spreadsheet"],
+    ["legacy.xls", undefined, "spreadsheet"],
+    // Prose and structured text
+    ["README.md", undefined, "markdown"],
+    ["notes.markdown", undefined, "markdown"],
+    ["config.json", undefined, "json"],
+    ["compose.yaml", undefined, "yaml"],
+    ["compose.yml", undefined, "yaml"],
+    ["server.ts", undefined, "code"],
+    ["main.py", undefined, "code"],
+    ["output.log", undefined, "text"],
+    ["notes.txt", undefined, "text"],
+  ])("%s (%s) → %s", (filename, mimeType, kind) => {
+    expect(resolveFilePreviewKind(filename, mimeType)).toBe(kind);
+  });
+
+  it("lets an authoritative MIME type outrank the extension", () => {
+    expect(resolveFilePreviewKind("photo.txt", "image/png")).toBe("image");
+    expect(resolveFilePreviewKind("scan.png", "application/pdf")).toBe("pdf");
+    expect(resolveFilePreviewKind("clip.bin", "video/mp4")).toBe("video");
+    expect(resolveFilePreviewKind("track.webm", "audio/webm")).toBe("audio");
+    expect(
+      resolveFilePreviewKind(
+        "export.csv",
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      ),
+    ).toBe("spreadsheet");
+    expect(resolveFilePreviewKind("book.bin", "application/vnd.ms-excel")).toBe("spreadsheet");
+    expect(resolveFilePreviewKind("notes.json", "text/markdown")).toBe("markdown");
+  });
+
+  it("resolves MIME-only files with no extension", () => {
+    expect(resolveFilePreviewKind("blob", "image/webp")).toBe("image");
+    expect(resolveFilePreviewKind("blob", "video/webm")).toBe("video");
+    expect(resolveFilePreviewKind("blob", "audio/mpeg")).toBe("audio");
+    expect(resolveFilePreviewKind("blob", "application/json; charset=utf-8")).toBe("json");
+    expect(resolveFilePreviewKind("blob", "text/plain")).toBe("text");
+  });
+
+  it("ignores a generic MIME type and keeps the extension", () => {
+    expect(resolveFilePreviewKind("photo.png", "application/octet-stream")).toBe("image");
+    expect(resolveFilePreviewKind("main.py", "text/plain")).toBe("code");
+  });
+
+  it("resolves everything unmatched to binary", () => {
+    expect(resolveFilePreviewKind("mystery.bin")).toBe("binary");
+    expect(resolveFilePreviewKind("noextension")).toBe("binary");
+    expect(resolveFilePreviewKind("weights", "application/octet-stream")).toBe("binary");
+    expect(resolveFilePreviewKind("pdf")).toBe("binary");
+  });
+
+  it("agrees with detectFileFormat for every format that has a renderer", () => {
+    for (const filename of [
+      "photo.png",
+      "report.pdf",
+      "clip.mp4",
+      "track.mp3",
+      "data.csv",
+      "book.xlsx",
+      "README.md",
+      "config.json",
+      "compose.yml",
+      "server.ts",
+      "notes.txt",
+    ]) {
+      expect(resolveFilePreviewKind(filename)).toBe(detectFileFormat(filename));
+    }
+    expect(detectFileFormat("mystery.bin")).toBe("unknown");
+    expect(resolveFilePreviewKind("mystery.bin")).toBe("binary");
+  });
+
+  it("labels every preview kind", () => {
+    expect(getFormatLabel("video")).toBe("Video");
+    expect(getFormatLabel("audio")).toBe("Audio");
+    expect(getFormatLabel("image")).toBe("Image");
+    expect(getFormatLabel("binary")).toBe("File");
+  });
+});