fix(web): stop treating TypeScript sources as video attachments

Review follow-ups on the #8688 port.

videoMimeType accepted any video/* MIME, and hosts map a .ts file to
video/mp2t. Attaching a TypeScript source turned it into an unnamed black
play tile, dropped its download row in the transcript, and ended at "This
video format cannot be played here". The extension now decides first, and a
bare MIME is only trusted when it names a container Pylon actually plays.

Also: re-wrapping a staged File copied the whole blob whenever the browser
reported no type at all, purely to stamp application/octet-stream that
mimeType already carries; that copy is now limited to real corrections. And
composer video tiles show the filename, which the transcript tile already
did — without it two videos are indistinguishable black squares.

Author: rynfar

apps/web/src/components/chat/ChatComposer.tsx

@@ -3722,8 +3722,12 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
           error = fileAttachmentTooLargeMessage(file.name, fileStagingLimit);
           continue;
         }
+        // Re-wrapping copies the whole blob, so only do it when the resolved
+        // type is a real correction. A browser that reported no type at all
+        // gains nothing from being stamped octet-stream: `mimeType` below
+        // already carries the resolved value.
         const attachmentFile =
-          file.type === fileMimeType
+          file.type === fileMimeType || fileMimeType === "application/octet-stream"
             ? file
             : new File([file], file.name, { type: fileMimeType, lastModified: file.lastModified });
         acceptedFiles.push({
@@ -4602,7 +4606,14 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                               {isOpening ? (
                                 <span className="relative z-10 text-[10px]">Loading…</span>
                               ) : (
-                                <PlayIcon className="relative z-10 size-4 fill-current drop-shadow-md" />
+                                <>
+                                  <PlayIcon className="relative z-10 size-4 fill-current drop-shadow-md" />
+                                  {/* Two videos are otherwise indistinguishable
+                                      black tiles when no thumbnail decodes. */}
+                                  <span className="pointer-events-none relative z-10 w-full truncate text-center text-[9px] leading-tight drop-shadow-md">
+                                    {file.name}
+                                  </span>
+                                </>
                               )}
                             </button>
                             {upload?.status === "uploading" && (

apps/web/src/components/chat/composerAttachmentFiles.test.ts

@@ -322,3 +322,24 @@ describe("composer attachment files", () => {
     ).toBe(true);
   });
 });
+
+describe("videoMimeType", () => {
+  it("resolves known video containers by extension", () => {
+    expect(videoMimeType({ name: "clip.mkv", mimeType: "" })).toBe("video/x-matroska");
+    expect(videoMimeType({ name: "clip.MP4", mimeType: "application/octet-stream" })).toBe(
+      "video/mp4",
+    );
+  });
+
+  it("does not treat a TypeScript source as a video", () => {
+    // Hosts map `.ts` to the MPEG transport stream type, so a bare `video/*`
+    // check would render source files as blank play tiles.
+    expect(videoMimeType({ name: "session-logic.ts", mimeType: "video/mp2t" })).toBeNull();
+    expect(videoMimeType({ name: "clip.ts", mimeType: "video/mp2t" })).toBeNull();
+  });
+
+  it("accepts a playable container when the name carries no extension", () => {
+    expect(videoMimeType({ name: "recording", mimeType: "video/webm" })).toBe("video/webm");
+    expect(videoMimeType({ name: "recording", mimeType: "video/mp2t" })).toBeNull();
+  });
+});

apps/web/src/types.ts

@@ -69,15 +69,29 @@ const VIDEO_MIME_TYPE_BY_EXTENSION: Readonly<Record<string, string>> = {
   webm: "video/webm",
 };
 
+const PLAYABLE_VIDEO_MIME_TYPES: ReadonlySet<string> = new Set(
+  Object.values(VIDEO_MIME_TYPE_BY_EXTENSION),
+);
+
+/**
+ * The container this attachment should be presented as, or null when it is not
+ * a video Pylon offers to play.
+ *
+ * The extension decides first. Trusting a bare `video/*` prefix misreads files
+ * the host maps to a transport stream — a TypeScript `.ts` source is reported as
+ * `video/mp2t` — which would turn source files into blank play tiles.
+ */
 export function videoMimeType(
   attachment: Pick<ChatFileAttachment, "name" | "mimeType">,
 ): string | null {
-  const mimeType = attachment.mimeType.split(";", 1)[0]?.trim().toLowerCase() ?? "";
-  if (mimeType.startsWith("video/")) return mimeType;
   const dotIndex = attachment.name.lastIndexOf(".");
-  return dotIndex < 0
-    ? null
-    : (VIDEO_MIME_TYPE_BY_EXTENSION[attachment.name.slice(dotIndex + 1).toLowerCase()] ?? null);
+  const byExtension =
+    dotIndex < 0
+      ? null
+      : (VIDEO_MIME_TYPE_BY_EXTENSION[attachment.name.slice(dotIndex + 1).toLowerCase()] ?? null);
+  if (byExtension !== null) return byExtension;
+  const mimeType = attachment.mimeType.split(";", 1)[0]?.trim().toLowerCase() ?? "";
+  return PLAYABLE_VIDEO_MIME_TYPES.has(mimeType) ? mimeType : null;
 }
 
 export function isVideoAttachment(attachment: ChatFileAttachment): boolean {