@tangle-network/ui 11.24.0 → 11.26.0

package/src/chat/message-author.test.tsx

@@ -0,0 +1,189 @@
+import { render, screen, within } from "@testing-library/react"
+import type { ReactElement } from "react"
+import { describe, expect, it } from "vitest"
+import type { ChatAuthor } from "../types/message"
+import type { SessionPart } from "../types/parts"
+import { AgentTimeline, type AgentTimelineItem } from "./agent-timeline"
+import { ChatMessage } from "./chat-message"
+import { isViewerMessage, MessageAuthor } from "./message-author"
+import { UserMessage } from "./user-message"
+
+function html(ui: ReactElement): string {
+  return render(ui).container.innerHTML
+}
+
+const segmentedParts: SessionPart[] = [
+  { type: "text", text: "I signed the lease in March." },
+  { type: "text", text: "Lease uploaded: lease.pdf", synthetic: true },
+  { type: "text", text: "Here it is." },
+]
+
+// The snapshots below were recorded from the components before `author`
+// existed. A transcript that names no author must keep that exact markup.
+describe("a transcript without authors", () => {
+  it("renders ChatMessage as before", () => {
+    expect(html(<ChatMessage role="user" content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-end"><div class="flex items-center gap-2 px-1 flex-row-reverse"><span class="font-medium text-foreground text-xs">You</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background"><div class="whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[var(--line-height-base)]">Can I break my lease early?</div></div></div>"`)
+    expect(html(<ChatMessage role="assistant" content="It depends on the lease terms." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 text-foreground"><div class="tangle-prose max-w-none tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]"><p>It depends on the lease terms.</p></div></div></div>"`)
+    expect(html(<ChatMessage role="system" content="Session started." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"><div class="tangle-prose max-w-none tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]"><p>Session started.</p></div></div></div>"`)
+  })
+
+  it("renders UserMessage actions and application notes as before", () => {
+    expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
+    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground"><button type="button">Copy</button></div></div>"`)
+  })
+
+  it("renders UserMessage as before", () => {
+    expect(html(<UserMessage content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">Can I break my lease early?</div></div></div></div>"`)
+  })
+
+  it("renders AgentTimeline messages as before", () => {
+    expect(
+      html(
+        <AgentTimeline
+          items={[
+            { id: "u1", kind: "message", role: "user", content: "Can I break my lease early?" },
+            { id: "a1", kind: "message", role: "assistant", content: "It depends on the lease terms." },
+          ]}
+        />,
+      ),
+    ).toMatchInlineSnapshot(`"<div class="mx-auto flex w-full max-w-5xl flex-col px-4 py-4"><div data-timeline-step="user" class=""><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">Can I break my lease early?</div></div></div></div></div><div data-timeline-step="prose" class="mt-4"><div><div class="tangle-prose max-w-none tangle-prose text-[length:var(--font-size-base)] leading-[1.5]"><p>It depends on the lease terms.</p></div></div></div></div>"`)
+  })
+})
+
+const client: ChatAuthor = { id: "client-maria", name: "Maria Lopez", role: "Client" }
+const attorney: ChatAuthor = { id: "attorney-jane", name: "Jane Doe", role: "Attorney" }
+const agent: ChatAuthor = { id: "agent-intake", name: "Intake assistant", role: "AI" }
+
+/** The bubble that holds a message's text. */
+function bubbleOf(text: string): HTMLElement {
+  return screen.getByText(text).parentElement as HTMLElement
+}
+
+describe("a viewerId without authors", () => {
+  it("changes nothing", () => {
+    expect(html(<UserMessage content="Hello" viewerId="client-maria" />)).toBe(html(<UserMessage content="Hello" />))
+    expect(html(<ChatMessage role="user" content="Hello" viewerId="client-maria" />)).toBe(
+      html(<ChatMessage role="user" content="Hello" />),
+    )
+  })
+})
+
+describe("isViewerMessage", () => {
+  it("treats an unauthored message as the reader's, and an authored one only when it is the viewer", () => {
+    expect(isViewerMessage(undefined, undefined)).toBe(true)
+    expect(isViewerMessage(undefined, "client-maria")).toBe(true)
+    expect(isViewerMessage(client, "client-maria")).toBe(true)
+    expect(isViewerMessage(attorney, "client-maria")).toBe(false)
+    expect(isViewerMessage(client, undefined)).toBe(false)
+  })
+})
+
+describe("MessageAuthor", () => {
+  it("shows the name, the role as a tag, and initials in a decorative avatar", () => {
+    const { container } = render(<MessageAuthor author={attorney} />)
+    expect(screen.getByText("Jane Doe")).toBeInTheDocument()
+    expect(screen.getByText("Attorney")).toBeInTheDocument()
+    const avatar = container.querySelector("[aria-hidden]")
+    expect(avatar?.textContent).toBe("JD")
+  })
+
+  it("omits the tag when the author has no role", () => {
+    const { container } = render(<MessageAuthor author={{ id: "guest", name: "Guest" }} />)
+    expect(container.querySelectorAll("span")).toHaveLength(2)
+  })
+
+  it("keys the avatar tone to the id, so two people with one name stay apart", () => {
+    const tones = (author: ChatAuthor) => render(<MessageAuthor author={author} />).container.querySelector("[aria-hidden]")!.className
+    const first = tones({ id: "client-maria", name: "Sam Lee" })
+    expect(tones({ id: "client-maria", name: "Sam Lee" })).toBe(first)
+    expect(tones({ id: "attorney-jane", name: "Sam Lee" })).not.toBe(first)
+  })
+})
+
+describe("UserMessage with an author", () => {
+  it("renders the reader's own message exactly as an unauthored one", () => {
+    expect(html(<UserMessage content="Hello" author={client} viewerId={client.id} />)).toBe(html(<UserMessage content="Hello" />))
+  })
+
+  it("puts someone else's message at the start, on a card, under their name and role", () => {
+    const { container } = render(<UserMessage content="Did you give a forwarding address?" author={attorney} viewerId={client.id} />)
+    expect(container.firstElementChild?.className).toContain("justify-start")
+    expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-card")
+    expect(bubbleOf("Did you give a forwarding address?").className).not.toContain("bg-foreground")
+    expect(screen.getByText("Jane Doe")).toBeInTheDocument()
+    expect(screen.getByText("Attorney")).toBeInTheDocument()
+  })
+
+  it("names every author when there is no viewer", () => {
+    render(<UserMessage content="Hello" author={client} />)
+    expect(screen.getByText("Maria Lopez")).toBeInTheDocument()
+  })
+
+  it("names the author once above a message split by application notes", () => {
+    const { container } = render(<UserMessage parts={segmentedParts} author={attorney} viewerId={client.id} />)
+    expect(screen.getAllByText("Jane Doe")).toHaveLength(1)
+    expect(container.querySelectorAll("[data-message-author]")).toHaveLength(1)
+    expect(bubbleOf("Here it is.").className).toContain("bg-card")
+  })
+})
+
+describe("ChatMessage with an author", () => {
+  it("keeps the reader's label on their own message", () => {
+    render(<ChatMessage role="user" content="Hello" author={client} viewerId={client.id} />)
+    expect(screen.getByText("You")).toBeInTheDocument()
+    expect(screen.queryByText("Maria Lopez")).not.toBeInTheDocument()
+  })
+
+  it("names someone else at the start of the row, on a card", () => {
+    const { container } = render(<ChatMessage role="user" content="Hello Maria" author={attorney} viewerId={client.id} />)
+    expect(container.firstElementChild?.className).toContain("items-start")
+    expect(screen.queryByText("You")).not.toBeInTheDocument()
+    expect(screen.getByText("Jane Doe")).toBeInTheDocument()
+    expect(bubbleOf("Hello Maria").className).toContain("bg-card")
+  })
+
+  it("names the agent in place of the assistant label", () => {
+    render(<ChatMessage role="assistant" content="Noted." author={agent} />)
+    expect(screen.queryByText("Agent")).not.toBeInTheDocument()
+    expect(screen.getByText("Intake assistant")).toBeInTheDocument()
+  })
+})
+
+describe("AgentTimeline with three participants", () => {
+  const thread: AgentTimelineItem[] = [
+    { id: "m1", kind: "message", role: "user", author: client, content: "My landlord kept my deposit." },
+    { id: "m2", kind: "message", role: "assistant", author: agent, content: "I shared your summary with Jane Doe." },
+    {
+      id: "t1",
+      kind: "tool",
+      call: { id: "c1", type: "write", label: "Write", status: "success", detail: "intake/summary.md" },
+    },
+    { id: "m3", kind: "message", role: "assistant", author: agent, content: "The summary has your lease dates." },
+    { id: "m4", kind: "message", role: "user", author: attorney, content: "Did you give a forwarding address?" },
+    { id: "m5", kind: "message", role: "assistant", author: agent, content: "I added the email to the case file." },
+  ]
+
+  it("sets the client's own words apart from the attorney's on the client's screen", () => {
+    render(<AgentTimeline items={thread} viewerId={client.id} />)
+    expect(bubbleOf("My landlord kept my deposit.").className).toContain("bg-foreground")
+    expect(screen.queryByText("Maria Lopez")).not.toBeInTheDocument()
+    expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-card")
+    expect(screen.getByText("Jane Doe")).toBeInTheDocument()
+  })
+
+  it("mirrors the thread on the attorney's screen", () => {
+    render(<AgentTimeline items={thread} viewerId={attorney.id} />)
+    expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-foreground")
+    expect(bubbleOf("My landlord kept my deposit.").className).toContain("bg-card")
+    expect(screen.getByText("Maria Lopez")).toBeInTheDocument()
+    expect(screen.queryByText("Jane Doe")).not.toBeInTheDocument()
+  })
+
+  it("names the agent once per turn, not after each tool row", () => {
+    const { container } = render(<AgentTimeline items={thread} viewerId={client.id} />)
+    const steps = Array.from(container.querySelectorAll("[data-timeline-step='prose']"))
+    const named = steps.map((step) => within(step as HTMLElement).queryByText("Intake assistant") !== null)
+    // m2 opens the agent's turn, m3 continues it after the tool row, m5 follows the attorney.
+    expect(named).toEqual([true, false, true])
+  })
+})

package/src/chat/message-author.tsx

@@ -0,0 +1,52 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../lib/utils";
+import { IconTile } from "../primitives/icon-tile";
+import { Tag } from "../primitives/tag";
+import { toneFor } from "../primitives/tone";
+import type { ChatAuthor } from "../types/message";
+
+/**
+ * Whether the reader wrote a human message. A message without an author is
+ * the reader's, which keeps a two-party transcript as it was. A message with
+ * an author is the reader's only when that author is `viewerId`; with no
+ * `viewerId`, every authored message belongs to someone else.
+ */
+export function isViewerMessage(author: ChatAuthor | undefined, viewerId: string | undefined): boolean {
+  return author === undefined || author.id === viewerId;
+}
+
+export interface MessageAuthorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  author: ChatAuthor;
+}
+
+/**
+ * The line above a message in a transcript with several participants: the
+ * author's avatar, name and, when given, their role as a tag.
+ *
+ * The avatar's tone comes from the author's id, so a participant keeps one
+ * colour for the whole thread and in every product. Tones can repeat between
+ * participants, so the name is always shown beside it. The avatar repeats the
+ * visible name and is hidden from assistive technology.
+ */
+export function MessageAuthor({ author, className, ...props }: MessageAuthorProps) {
+  return (
+    <div data-message-author="" className={cn("flex min-w-0 max-w-full items-center gap-2", className)} {...props}>
+      <IconTile
+        size="xs"
+        src={author.avatarUrl}
+        name={author.name}
+        tone={toneFor(author.id)}
+        className="rounded-full"
+      />
+      <span className="min-w-0 truncate font-medium text-foreground text-sm" title={author.name}>
+        {author.name}
+      </span>
+      {author.role ? (
+        // A long role truncates at half the row, so it never hides the name.
+        <Tag size="sm" emphasis="outline" className="max-w-[50%]">
+          {author.role}
+        </Tag>
+      ) : null}
+    </div>
+  );
+}

package/src/chat/user-message.tsx

@@ -1,6 +1,7 @@
 import { memo, type ReactNode } from "react";
-import type { SessionMessage } from "../types/message";
+import type { ChatAuthor, SessionMessage } from "../types/message";
 import type { SessionPart } from "../types/parts";
+import { isViewerMessage, MessageAuthor } from "./message-author";
 import { SyntheticText, userTextSegments } from "./synthetic-text";
 
 export interface UserMessageProps {
@@ -11,15 +12,25 @@ export interface UserMessageProps {
   content?: string;
   timestamp?: Date;
   actions?: ReactNode;
+  /**
+   * Who wrote the message, when more than one person shares the transcript.
+   * Omit it in a two-party chat: the message renders as the reader's.
+   */
+  author?: ChatAuthor;
+  /**
+   * The reader's participant id. A message whose `author` has another id is
+   * someone else's: it sits at the start, on a card, under its author.
+   */
+  viewerId?: string;
 }
 
 function formatTime(date: Date): string {
   return date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
 }
 
-function MessageActions({ children }: { children: ReactNode }) {
+function MessageActions({ children, align = "end" }: { children: ReactNode; align?: "start" | "end" }) {
   return (
-    <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
+    <div className={`flex flex-wrap items-center ${align === "end" ? "justify-end" : "justify-start"} gap-1.5 text-xs text-muted-foreground`}>
       {children}
     </div>
   );
@@ -52,29 +63,73 @@ function UserBubble({ text, timestamp, actions }: {
   );
 }
 
+/**
+ * Another person's speech: start-aligned under its author, on a card rather
+ * than the reader's inverse fill, so "mine" and "theirs" differ before the
+ * names are read. The timestamp is revealed on the bubble's far side.
+ */
+function OtherPersonBubble({ text, timestamp, actions, author }: {
+  text: string;
+  timestamp?: Date;
+  actions?: ReactNode;
+  /** The author line; absent on a later segment of the same message. */
+  author?: ChatAuthor;
+}) {
+  return (
+    <div className="flex justify-start">
+      <div className="group flex min-w-0 max-w-[78%] flex-col items-start gap-1.5">
+        {author ? <MessageAuthor author={author} /> : null}
+        <div className="relative min-w-0 max-w-full rounded-2xl border border-border bg-card px-4 py-3 text-foreground">
+          {timestamp ? (
+            <span
+              data-user-message-time=""
+              className="pointer-events-none absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+            >
+              {formatTime(timestamp)}
+            </span>
+          ) : null}
+          <div className="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">
+            {text}
+          </div>
+        </div>
+        {actions ? <MessageActions align="start">{actions}</MessageActions> : null}
+      </div>
+    </div>
+  );
+}
+
 /**
  * User speech retains the inverse-theme bubble and direct-content contract.
  * Application notes interrupt the bubble in source order, outside its attribution.
  */
 export const UserMessage = memo(
-  ({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => {
+  ({ message: _message, parts, content, timestamp, actions, author, viewerId }: UserMessageProps) => {
+    const other = isViewerMessage(author, viewerId) ? undefined : author;
+    // `headed` puts the author line on the first spoken segment only.
+    const bubble = (text: string, bubbleActions?: ReactNode, headed = true, key?: number) =>
+      other ? (
+        <OtherPersonBubble key={key} text={text} timestamp={timestamp} actions={bubbleActions} author={headed ? other : undefined} />
+      ) : (
+        <UserBubble key={key} text={text} timestamp={timestamp} actions={bubbleActions} />
+      );
     // Explicit direct content (including empty content) still overrides parts.
     if (content != null) {
-      return content.trim() ? <UserBubble text={content} timestamp={timestamp} actions={actions} /> : null;
+      return content.trim() ? bubble(content, actions) : null;
     }
     const segments = userTextSegments(parts ?? []);
     if (segments.length === 0) return null;
     if (segments.length === 1 && !segments[0].synthetic) {
-      return <UserBubble text={segments[0].text} timestamp={timestamp} actions={actions} />;
+      return bubble(segments[0].text, actions);
     }
+    const firstSpoken = segments.find((segment) => !segment.synthetic);
     return (
       <div className="space-y-2">
         {segments.map((segment) => segment.synthetic ? (
           <SyntheticText key={segment.index} text={segment.text} />
         ) : (
-          <UserBubble key={segment.index} text={segment.text} timestamp={timestamp} />
+          bubble(segment.text, undefined, segment === firstSpoken, segment.index)
         ))}
-        {actions ? <MessageActions>{actions}</MessageActions> : null}
+        {actions ? <MessageActions align={other ? "start" : "end"}>{actions}</MessageActions> : null}
       </div>
     );
   },

package/src/editor/editor-peers.ts

@@ -32,6 +32,9 @@ import type * as TiptapCollaborationCaret from "@tiptap/extension-collaboration-
 import type * as TiptapReact from "@tiptap/react";
 import type * as TiptapStarterKit from "@tiptap/starter-kit";
 import type * as Yjs from "yjs";
+import { isMissingPeerError, rethrow } from "../lib/optional-peer";
+
+export { isMissingPeerError };
 
 /** Namespaces the local markdown editor needs. */
 export interface DocumentEditorPeers {
@@ -89,31 +92,6 @@ export function isMissingEditorPeersError(error: unknown): boolean {
   return error instanceof Error && error.name === "MissingEditorPeersError";
 }
 
-/** The messages a bundler or a runtime gives for a module it cannot resolve. */
-const RESOLUTION_FAILURE =
-  /could not resolve|cannot find (?:module|package)|can't resolve|failed to resolve|module not found/i;
-
-/**
- * True when the rejection says the package is not installed. Only such an
- * error gets the install list: a transient chunk-fetch failure that reads as
- * "install the peers" sends the reader to the wrong fix. An error this
- * predicate does not match keeps its own message, so it can only
- * under-report.
- */
-export function isMissingPeerError(error: unknown): boolean {
-  return error instanceof Error && RESOLUTION_FAILURE.test(error.message);
-}
-
-/**
- * Hands an `import()` rejection on unchanged. esbuild reports an unresolvable
- * literal `import()` as a build error and defers it to run time only when the
- * call carries a `.catch()`, so every peer import attaches this handler. It
- * changes nothing at run time.
- */
-function rethrow(error: unknown): never {
-  throw error;
-}
-
 /**
  * Every optional peer the `./editor` entry needs at run time. The loaders
  * import all but `@tiptap/core`, which the tiptap packages need in turn: a

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

@@ -2,6 +2,12 @@ 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";
+import { MissingPdfjsError, loadPdfjs } from "./pdf-loader";
+
+vi.mock("./pdf-loader", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./pdf-loader")>()),
+  loadPdfjs: vi.fn(),
+}));
 
 const BLOB_URL = "blob:https://app.tangle.tools/1f2e3d4c";
 
@@ -32,16 +38,20 @@ describe("FileArtifactPane previews", () => {
     expect(container.querySelector("img")).toHaveClass("max-w-none");
   });
 
-  it("renders a PDF as an <object> of the blobUrl", () => {
+  it("renders a PDF in PdfViewer, and in an <object> of the blobUrl without pdfjs-dist", async () => {
+    vi.mocked(loadPdfjs).mockRejectedValue(new MissingPdfjsError());
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
     const { container } = render(
       <FileArtifactPane filename="report.pdf" blobUrl={BLOB_URL} mimeType="application/pdf" />,
     );
 
+    expect(screen.getByRole("status")).toHaveTextContent("Loading report.pdf");
+    expect(await screen.findByText(/does not include the page viewer/)).toBeInTheDocument();
     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");
+    consoleError.mockRestore();
   });
 
   it("renders video and audio with native controls", () => {

package/src/files/file-card.test.tsx

@@ -0,0 +1,62 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FileCard } from "./file-card";
+
+const UPLOADED = new Date("2026-10-06T15:30:00Z");
+
+describe("FileCard", () => {
+  it("names the file with its size, date and uploader", () => {
+    const { container } = render(
+      <FileCard
+        filename="Engagement letter.pdf"
+        size={2_516_582}
+        date={UPLOADED}
+        uploader={{ name: "Dana Ruiz", role: "Client" }}
+      />,
+    );
+
+    expect(screen.getByText("Engagement letter.pdf")).toBeInTheDocument();
+    expect(screen.getByText("2.4 MB")).toBeInTheDocument();
+    expect(container.querySelector("time")).toHaveAttribute("datetime", UPLOADED.toISOString());
+    expect(screen.getByText("Uploaded by Dana Ruiz (Client)")).toBeInTheDocument();
+  });
+
+  it("leaves out what it does not know", () => {
+    const { container } = render(<FileCard filename="notes.txt" date="not a date" />);
+    expect(container.querySelector("time")).toBeNull();
+    expect(screen.queryByText(/Uploaded by/)).toBeNull();
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("takes its icon tone from the file kind, with the MIME type outranking the name", () => {
+    const pdf = render(<FileCard filename="brief.pdf" />);
+    expect(pdf.container.querySelector("[aria-hidden='true']")?.className).toContain(
+      "--tone-orange-bg",
+    );
+    pdf.unmount();
+
+    const sheet = render(<FileCard filename="export" mimeType="text/csv" />);
+    expect(sheet.container.querySelector("[aria-hidden='true']")?.className).toContain(
+      "--tone-lime-bg",
+    );
+  });
+
+  it("offers Download and the host's own actions", () => {
+    const onDownload = vi.fn();
+    render(
+      <FileCard
+        filename="book.xlsx"
+        description="Download to open this workbook in a spreadsheet app."
+        onDownload={onDownload}
+        actions={<button type="button">Open</button>}
+      />,
+    );
+
+    expect(
+      screen.getByText("Download to open this workbook in a spreadsheet app."),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Download" }));
+    expect(onDownload).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole("button", { name: "Open" })).toBeInTheDocument();
+  });
+});