Merge remote-tracking branch 'origin/master' into PAP-10507-what-can-we-borrow-from-roughdraft

cli/src/__tests__/common.test.ts

@@ -4,7 +4,7 @@ import path from "node:path";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { writeContext } from "../client/context.js";
 import { setStoredBoardCredential } from "../client/board-auth.js";
-import { resolveApiBase, resolveCommandContext } from "../commands/client/common.js";
+import { inferContentTypeFromPath, resolveApiBase, resolveCommandContext } from "../commands/client/common.js";
 
 const ORIGINAL_ENV = { ...process.env };
 
@@ -158,3 +158,30 @@ describe("resolveCommandContext", () => {
     expect(explicitResolved.authSource).toBe("explicit");
   });
 });
+
+describe("inferContentTypeFromPath", () => {
+  it("maps the issue-attachment file types the server allows", () => {
+    // Must match server/src/attachment-types.ts DEFAULT_ALLOWED_TYPES exactly.
+    expect(inferContentTypeFromPath("newsletter.html")).toBe("text/html");
+    expect(inferContentTypeFromPath("page.htm")).toBe("text/html");
+    expect(inferContentTypeFromPath("data.csv")).toBe("text/csv");
+    expect(inferContentTypeFromPath("bundle.zip")).toBe("application/zip");
+    expect(inferContentTypeFromPath("demo.mp4")).toBe("video/mp4");
+    expect(inferContentTypeFromPath("clip.webm")).toBe("video/webm");
+    expect(inferContentTypeFromPath("teaser.m4v")).toBe("video/x-m4v");
+    expect(inferContentTypeFromPath("walkthrough.mov")).toBe("video/quicktime");
+    expect(inferContentTypeFromPath("report.pdf")).toBe("application/pdf");
+    expect(inferContentTypeFromPath("chart.png")).toBe("image/png");
+  });
+
+  it("emits text types with no charset parameter so they match the exact allowlist", () => {
+    expect(inferContentTypeFromPath("notes.md")).toBe("text/markdown");
+    expect(inferContentTypeFromPath("log.txt")).toBe("text/plain");
+  });
+
+  it("is case-insensitive and returns undefined for unknown extensions", () => {
+    expect(inferContentTypeFromPath("/abs/Path/IMAGE.PNG")).toBe("image/png");
+    expect(inferContentTypeFromPath("archive.unknownext")).toBeUndefined();
+    expect(inferContentTypeFromPath("noextension")).toBeUndefined();
+  });
+});

cli/src/__tests__/issue-subresources.test.ts

@@ -221,6 +221,40 @@ describe("issue subresource commands", () => {
       selectedOptionIds: ["file-a", "file-b"],
     });
   });
+
+  it("forwards the agent run-id header and inferred content-type on attachment:upload", async () => {
+    // Regression: the multipart upload uses a hand-rolled fetch (not the JSON
+    // client), so it must forward X-Paperclip-Run-Id itself — otherwise an
+    // agent-authenticated upload is rejected with "401 Agent run id required".
+    const RUN_ID = "cccccccc-cccc-4ccc-8ccc-cccccccccccc";
+    const tmp = await mkdtemp(join(tmpdir(), "paperclip-cli-test-"));
+    const filePath = join(tmp, "deliverable.html");
+    await writeFile(filePath, "<html><body>hi</body></html>", "utf8");
+    const fetchMock = vi.fn().mockImplementation(() => Promise.resolve(jsonResponse()));
+    vi.stubGlobal("fetch", fetchMock);
+    vi.spyOn(process.stdout, "write").mockImplementation(() => true);
+
+    try {
+      await run([
+        "issue", "attachment:upload", ISSUE_ID,
+        "--company-id", COMPANY_ID,
+        "--file", filePath,
+        "--run-id", RUN_ID,
+      ]);
+    } finally {
+      await rm(tmp, { recursive: true, force: true });
+    }
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    const [url, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+    expect(url).toBe(`http://localhost:3100/api/companies/${COMPANY_ID}/issues/${ISSUE_ID}/attachments`);
+    expect(init.method).toBe("POST");
+    const headers = init.headers as Record<string, string>;
+    expect(headers["x-paperclip-run-id"]).toBe(RUN_ID);
+    expect(headers.authorization).toBe("Bearer board-token");
+    const file = (init.body as FormData).get("file") as File;
+    expect(file.type).toBe("text/html");
+  });
 });
 
 function jsonResponse(body: unknown = { ok: true }, init: ResponseInit = { status: 200 }): Response {

cli/src/commands/client/common.ts

@@ -13,6 +13,7 @@ export interface BaseClientOptions {
   profile?: string;
   apiBase?: string;
   apiKey?: string;
+  runId?: string;
   companyId?: string;
   json?: boolean;
 }
@@ -34,6 +35,7 @@ export function addCommonClientOptions(command: Command, opts?: { includeCompany
     .option("--profile <name>", "CLI context profile name")
     .option("--api-base <url>", "Base URL for the Paperclip API")
     .option("--api-key <token>", "Bearer token for agent-authenticated calls")
+    .option("--run-id <id>", "Heartbeat run id for agent-authenticated mutations (checkout/release/interactions/in-progress update); falls back to $PAPERCLIP_RUN_ID")
     .option("--json", "Output raw JSON");
 
   if (opts?.includeCompany) {
@@ -68,9 +70,16 @@ export function resolveCommandContext(
     );
   }
 
+  // Agent-authenticated mutations (checkout, release, interactions, PATCH of an
+  // in-progress issue) require the X-Paperclip-Run-Id header (the server returns
+  // "401 Agent run id required" without it). Source it from --run-id, else the
+  // PAPERCLIP_RUN_ID env the adapter/embodiment context already exports.
+  const runId = options.runId?.trim() || process.env.PAPERCLIP_RUN_ID?.trim() || undefined;
+
   const api = new PaperclipApiClient({
     apiBase,
     apiKey,
+    runId,
     recoverAuth: explicitApiKey || !canAttemptInteractiveBoardAuth()
       ? undefined
       : async ({ error }) => {
@@ -126,18 +135,32 @@ export function apiPath(strings: TemplateStringsArray, ...values: Array<string |
 export function inferContentTypeFromPath(filePath: string): string | undefined {
   const ext = filePath.split(/[\\/]/).pop()?.split(".").pop()?.toLowerCase();
   if (!ext) return undefined;
+  // These MIME strings are matched against the server's issue-attachment
+  // allowlist (server/src/attachment-types.ts DEFAULT_ALLOWED_TYPES) by EXACT
+  // string, so text types must carry no "; charset=..." parameter or the upload
+  // is rejected with "422 Unsupported attachment content type". Keep this set in
+  // sync with that allowlist (plus svg/avif, accepted by the asset routes).
   return {
     avif: "image/avif",
+    csv: "text/csv",
     gif: "image/gif",
+    htm: "text/html",
+    html: "text/html",
     jpeg: "image/jpeg",
     jpg: "image/jpeg",
     json: "application/json",
-    md: "text/markdown; charset=utf-8",
+    m4v: "video/x-m4v",
+    md: "text/markdown",
+    mov: "video/quicktime",
+    mp4: "video/mp4",
     pdf: "application/pdf",
     png: "image/png",
+    qt: "video/quicktime",
     svg: "image/svg+xml",
-    txt: "text/plain; charset=utf-8",
+    txt: "text/plain",
+    webm: "video/webm",
     webp: "image/webp",
+    zip: "application/zip",
   }[ext];
 }
 

cli/src/commands/client/issue.ts

@@ -953,6 +953,7 @@ export function registerIssueCommands(program: Command): void {
             issueId,
             filePath: opts.file,
             commentId: opts.commentId,
+            runId: ctx.api.runId,
           });
           printOutput(attachment, { json: ctx.json });
         } catch (err) {
@@ -1392,15 +1393,22 @@ function buildApiUrl(apiBase: string, path: string): string {
 async function uploadAttachment(
   apiBase: string,
   apiKey: string | undefined,
-  input: { companyId: string; issueId: string; filePath: string; commentId?: string },
+  input: { companyId: string; issueId: string; filePath: string; commentId?: string; runId?: string },
 ): Promise<unknown> {
   const bytes = await readFile(input.filePath);
   const form = new FormData();
   form.set("file", new Blob([bytes], { type: inferContentTypeFromPath(input.filePath) }), input.filePath.split(/[\\/]/).pop() ?? "attachment");
   if (input.commentId) form.set("issueCommentId", input.commentId);
+  // This multipart upload uses a hand-rolled fetch rather than PaperclipApiClient,
+  // so it must forward the agent run-id header itself — otherwise an
+  // agent-authenticated upload is rejected with "401 Agent run id required"
+  // (the client injects x-paperclip-run-id automatically for JSON requests).
+  const headers: Record<string, string> = {};
+  if (apiKey) headers.authorization = `Bearer ${apiKey}`;
+  if (input.runId) headers["x-paperclip-run-id"] = input.runId;
   const response = await fetch(buildApiUrl(apiBase, apiPath`/api/companies/${input.companyId}/issues/${input.issueId}/attachments`), {
     method: "POST",
-    headers: apiKey ? { authorization: `Bearer ${apiKey}` } : undefined,
+    headers,
     body: form,
   });
   return parseFetchResponse(response);

server/src/__tests__/issue-agent-mutation-ownership-routes.test.ts

@@ -608,6 +608,27 @@ describe("agent issue mutation checkout ownership", () => {
     expect(mockStorageService.deleteObject).not.toHaveBeenCalled();
   });
 
+  it("rejects the checked-out owner without a run id on attachment upload (401)", async () => {
+    // Regression: an agent-authenticated client (e.g. the CLI's attachment:upload)
+    // that fails to send X-Paperclip-Run-Id must be rejected — mutating your own
+    // in-progress checkout requires proving run ownership.
+    const app = await createApp({
+      type: "agent",
+      agentId: ownerAgentId,
+      companyId,
+      source: "agent_key",
+      // intentionally no runId
+    });
+
+    const res = await request(app)
+      .post(`/api/companies/${companyId}/issues/${issueId}/attachments`)
+      .attach("file", Buffer.from("report"), { filename: "report.html", contentType: "text/html" });
+
+    expect(res.status, JSON.stringify(res.body)).toBe(401);
+    expect(res.body.error).toBe("Agent run id required");
+    expect(mockStorageService.putFile).not.toHaveBeenCalled();
+  });
+
   it("allows the checked-out owner with the matching run id to patch and update documents", async () => {
     const app = await createApp(ownerActor());
 

ui/src/components/InlineEntitySelector.test.tsx

@@ -1,22 +1,33 @@
 // @vitest-environment jsdom
 
-import { act } from "react";
 import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { InlineEntitySelector } from "./InlineEntitySelector";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 
+async function act(callback: () => void | Promise<void>) {
+  let result: void | Promise<void> = undefined;
+  flushSync(() => {
+    result = callback();
+  });
+  await result;
+}
+
 describe("InlineEntitySelector", () => {
   let container: HTMLDivElement;
+  let originalMatchMedia: typeof window.matchMedia;
 
   beforeEach(() => {
+    originalMatchMedia = window.matchMedia;
     container = document.createElement("div");
     document.body.appendChild(container);
   });
 
   afterEach(() => {
+    window.matchMedia = originalMatchMedia;
     container.remove();
     document.body.innerHTML = "";
   });
@@ -77,4 +88,51 @@ describe("InlineEntitySelector", () => {
       root.unmount();
     });
   });
+
+  it("focuses the search input when opened on coarse pointers", async () => {
+    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+      matches: query === "(pointer: coarse)",
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <InlineEntitySelector
+          value=""
+          options={[
+            { id: "agent:agent-1", label: "CodexCoder" },
+            { id: "agent:agent-2", label: "DesignBot" },
+          ]}
+          placeholder="Assignee"
+          noneLabel="No assignee"
+          searchPlaceholder="Search assignees..."
+          emptyMessage="No assignees found."
+          onChange={vi.fn()}
+        />,
+      );
+    });
+
+    const trigger = container.querySelector("button") as HTMLButtonElement | null;
+    expect(trigger).not.toBeNull();
+
+    await act(async () => {
+      trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    const searchInput = document.querySelector('input[placeholder="Search assignees..."]') as HTMLInputElement | null;
+    expect(searchInput).not.toBeNull();
+    expect(document.activeElement).toBe(searchInput);
+
+    act(() => {
+      root.unmount();
+    });
+  });
 });

ui/src/components/InlineEntitySelector.tsx

@@ -135,15 +135,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
           disablePortal={disablePortal}
           onOpenAutoFocus={(event) => {
             event.preventDefault();
-            // On touch devices, don't auto-focus the search input to avoid
-            // opening the virtual keyboard which reshapes the viewport and
-            // pushes the popover off-screen.
-            const isTouch = typeof window.matchMedia === "function"
-              ? window.matchMedia("(pointer: coarse)").matches
-              : false;
-            if (!isTouch) {
-              inputRef.current?.focus();
-            }
+            inputRef.current?.focus();
           }}
           onCloseAutoFocus={(event) => {
             if (!shouldPreventCloseAutoFocusRef.current) return;

ui/src/components/IssueThreadInteractionCard.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
-import { act } from "react";
 import type { ComponentProps, ReactNode } from "react";
+import { flushSync } from "react-dom";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { IssueThreadInteractionCard } from "./IssueThreadInteractionCard";
@@ -34,6 +34,10 @@ vi.mock("@/lib/router", () => ({
   ),
 }));
 
+function act(callback: () => void) {
+  flushSync(callback);
+}
+
 function renderCard(
   props: Partial<ComponentProps<typeof IssueThreadInteractionCard>> = {},
 ) {
@@ -460,6 +464,48 @@ describe("IssueThreadInteractionCard", () => {
     expect(host.textContent).toContain("+34 more");
   });
 
+  it("expands the hidden accepted selections when the +N more chip is clicked", () => {
+    const host = renderCard({
+      interaction: acceptedManyRequestCheckboxConfirmationInteraction,
+    });
+
+    const countSelectedChips = () =>
+      Array.from(host.querySelectorAll("*")).filter(
+        (node) => node.children.length === 0 && node.textContent?.trim().startsWith("Selected:"),
+      ).length;
+
+    expect(countSelectedChips()).toBe(8);
+
+    const moreButton = Array.from(host.querySelectorAll("button")).find((button) =>
+      button.textContent?.includes("+34 more"),
+    );
+    expect(moreButton).toBeTruthy();
+    moreButton?.focus();
+    expect(document.activeElement).toBe(moreButton);
+
+    act(() => {
+      moreButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(host.textContent).not.toContain("+34 more");
+    expect(countSelectedChips()).toBe(42);
+    expect(document.activeElement).toBe(moreButton);
+
+    const showLessButton = Array.from(host.querySelectorAll("button")).find((button) =>
+      button.textContent?.includes("Show less"),
+    );
+    expect(showLessButton).toBeTruthy();
+    expect(showLessButton).toBe(moreButton);
+
+    act(() => {
+      showLessButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(countSelectedChips()).toBe(8);
+    expect(host.textContent).toContain("+34 more");
+    expect(document.activeElement).toBe(moreButton);
+  });
+
   it("stays compact and scrollable with around 100 options", () => {
     const host = renderCard({
       interaction: manyOptionsRequestCheckboxConfirmationInteraction,

ui/src/components/IssueThreadInteractionCard.tsx

@@ -1335,6 +1335,7 @@ function RequestCheckboxConfirmationResolution({
   interaction: RequestCheckboxConfirmationInteraction;
 }) {
   const target = interaction.payload.target ?? null;
+  const [expanded, setExpanded] = useState(false);
 
   if (interaction.status === "accepted") {
     const totalOptions = interaction.payload.options.length;
@@ -1343,8 +1344,13 @@ function RequestCheckboxConfirmationResolution({
       result: interaction.result,
     });
     const selectedCount = interaction.result?.selectedOptionIds?.length ?? selectedLabels.length;
-    const visibleLabels = selectedLabels.slice(0, CHECKBOX_SUMMARY_LABEL_LIMIT);
-    const hiddenCount = selectedLabels.length - visibleLabels.length;
+    const visibleLabels = expanded
+      ? selectedLabels
+      : selectedLabels.slice(0, CHECKBOX_SUMMARY_LABEL_LIMIT);
+    const hiddenCount = selectedLabels.length - CHECKBOX_SUMMARY_LABEL_LIMIT;
+    const hasHiddenLabels = hiddenCount > 0;
+    const chipClassName =
+      "inline-flex items-center rounded-sm border border-border/60 bg-transparent px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground";
 
     return (
       <div className="space-y-3">
@@ -1361,10 +1367,18 @@ function RequestCheckboxConfirmationResolution({
             {visibleLabels.map((label, index) => (
               <TaskField key={`${label}-${index}`} label="Selected" value={label} />
             ))}
-            {hiddenCount > 0 ? (
-              <span className="inline-flex items-center rounded-sm border border-border/60 bg-transparent px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
-                +{hiddenCount} more
-              </span>
+            {hasHiddenLabels ? (
+              <button
+                type="button"
+                onClick={() => setExpanded((current) => !current)}
+                className={cn(
+                  chipClassName,
+                  "cursor-pointer transition-colors hover:border-border hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                )}
+                aria-expanded={expanded}
+              >
+                {expanded ? "Show less" : `+${hiddenCount} more`}
+              </button>
             ) : null}
           </div>
         ) : null}

ui/src/components/artifacts/ArtifactCard.test.tsx

@@ -1,4 +1,8 @@
+// @vitest-environment jsdom
+
 import type { ReactNode } from "react";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 
@@ -88,6 +92,82 @@ describe("ArtifactCard", () => {
     expect(markup).toContain('preload="metadata"');
   });
 
+  it("seeks video previews after metadata loads so a thumbnail frame is painted", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+
+    flushSync(() => {
+      root.render(
+        <ArtifactCard
+          artifact={makeArtifact({ mediaKind: "video", contentType: "video/mp4", contentPath: "/files/clip.mp4" })}
+        />,
+      );
+    });
+
+    const video = container.querySelector("video") as HTMLVideoElement;
+    expect(video).not.toBeNull();
+    expect(video.dataset.frameReady).toBe("false");
+
+    Object.defineProperty(video, "readyState", {
+      configurable: true,
+      value: HTMLMediaElement.HAVE_METADATA,
+    });
+
+    flushSync(() => {
+      video.dispatchEvent(new Event("loadedmetadata", { bubbles: true }));
+    });
+
+    expect(video.currentTime).toBe(0.05);
+
+    flushSync(() => {
+      video.dispatchEvent(new Event("seeked", { bubbles: true }));
+    });
+
+    expect(video.dataset.frameReady).toBe("true");
+
+    flushSync(() => root.unmount());
+    container.remove();
+  });
+
+  it("reveals video previews if the browser does not report seek completion", () => {
+    vi.useFakeTimers();
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+
+    try {
+      flushSync(() => {
+        root.render(
+          <ArtifactCard
+            artifact={makeArtifact({ mediaKind: "video", contentType: "video/mp4", contentPath: "/files/clip.mp4" })}
+          />,
+        );
+      });
+
+      const video = container.querySelector("video") as HTMLVideoElement;
+      expect(video).not.toBeNull();
+      expect(video.dataset.frameReady).toBe("false");
+
+      flushSync(() => {
+        video.dispatchEvent(new Event("loadedmetadata", { bubbles: true }));
+      });
+
+      expect(video.currentTime).toBe(0.05);
+      expect(video.dataset.frameReady).toBe("false");
+
+      flushSync(() => {
+        vi.advanceTimersByTime(3000);
+      });
+
+      expect(video.dataset.frameReady).toBe("true");
+    } finally {
+      flushSync(() => root.unmount());
+      container.remove();
+      vi.useRealTimers();
+    }
+  });
+
   it("renders a falling-back video placeholder when no content path exists", () => {
     const markup = renderToStaticMarkup(
       <ArtifactCard artifact={makeArtifact({ mediaKind: "video", contentPath: null })} />,

ui/src/components/artifacts/ArtifactCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { type SyntheticEvent, useEffect, useRef, useState } from "react";
 import { Download, ExternalLink, Paperclip, Play } from "lucide-react";
 import type { CompanyArtifact } from "@/api/artifacts";
 import { Link } from "@/lib/router";
@@ -52,6 +52,16 @@ function ImagePreview({ artifact }: { artifact: CompanyArtifact }) {
 
 function VideoPreview({ artifact }: { artifact: CompanyArtifact }) {
   const [errored, setErrored] = useState(false);
+  const [frameReady, setFrameReady] = useState(false);
+  const thumbnailSeekRequested = useRef(false);
+  const frameReadyFallbackTimer = useRef<number | null>(null);
+  useEffect(() => {
+    return () => {
+      if (frameReadyFallbackTimer.current !== null) {
+        window.clearTimeout(frameReadyFallbackTimer.current);
+      }
+    };
+  }, []);
   if (errored || !artifact.contentPath) {
     return (
       <PreviewFrame className="flex items-center justify-center bg-black/80">
@@ -61,6 +71,43 @@ function VideoPreview({ artifact }: { artifact: CompanyArtifact }) {
       </PreviewFrame>
     );
   }
+
+  const markFrameReady = () => {
+    if (frameReadyFallbackTimer.current !== null) {
+      window.clearTimeout(frameReadyFallbackTimer.current);
+      frameReadyFallbackTimer.current = null;
+    }
+    setFrameReady(true);
+  };
+  const scheduleFrameReadyFallback = () => {
+    if (frameReadyFallbackTimer.current !== null) {
+      window.clearTimeout(frameReadyFallbackTimer.current);
+    }
+    frameReadyFallbackTimer.current = window.setTimeout(markFrameReady, 3000);
+  };
+  const loadThumbnailFrame = (event: SyntheticEvent<HTMLVideoElement>) => {
+    if (thumbnailSeekRequested.current) return;
+    thumbnailSeekRequested.current = true;
+    const video = event.currentTarget;
+    const duration = Number.isFinite(video.duration) && video.duration > 0 ? video.duration : 0;
+    const seekTarget = duration > 0 ? Math.min(0.12, duration / 2) : 0.05;
+    try {
+      if (Math.abs(video.currentTime - seekTarget) > 0.001) {
+        video.currentTime = seekTarget;
+        scheduleFrameReadyFallback();
+      } else {
+        markFrameReady();
+      }
+    } catch {
+      markFrameReady();
+    }
+  };
+  const handleLoadedData = (event: SyntheticEvent<HTMLVideoElement>) => {
+    if (thumbnailSeekRequested.current || event.currentTarget.currentTime > 0) {
+      markFrameReady();
+    }
+  };
+
   return (
     <PreviewFrame className="bg-black">
       <video
@@ -68,7 +115,11 @@ function VideoPreview({ artifact }: { artifact: CompanyArtifact }) {
         preload="metadata"
         muted
         playsInline
-        className="h-full w-full object-contain"
+        data-frame-ready={frameReady ? "true" : "false"}
+        className={cn("h-full w-full object-contain transition-opacity", frameReady ? "opacity-100" : "opacity-0")}
+        onLoadedMetadata={loadThumbnailFrame}
+        onLoadedData={handleLoadedData}
+        onSeeked={markFrameReady}
         onError={() => setErrored(true)}
       />
       <div className="pointer-events-none absolute inset-0 flex items-center justify-center">