Commit ac4aae101d060b5355a5de58e23c7387886d9021 | the-knife

apps/desktop/src/electron/ElectronProtocol.test.ts+1

...	@@ -225,6 +225,7 @@ describe("ElectronProtocol", () => {	...	@@ -225,6 +225,7 @@ describe("ElectronProtocol", () => {
225	"http:",	225	"http:",
226	"https:",	226	"https:",
227	]);	227	]);
		228	assert.deepEqual(directives["media-src"], ["'self'", "t3code:", "blob:"]);
228	assert.deepEqual(directives["font-src"], ["'self'", "t3code:", "data:"]);	229	assert.deepEqual(directives["font-src"], ["'self'", "t3code:", "data:"]);
229	});	230	});
230	});	231	});

apps/desktop/src/electron/ElectronProtocol.ts+1

...	@@ -87,6 +87,7 @@ export function makeDesktopContentSecurityPolicy(input: DesktopProtocolRegistrat	...	@@ -87,6 +87,7 @@ export function makeDesktopContentSecurityPolicy(input: DesktopProtocolRegistrat
87	`script-src ${scriptSources.join(" ")}`,	87	`script-src ${scriptSources.join(" ")}`,
88	`connect-src ${connectSources.join(" ")}`,	88	`connect-src ${connectSources.join(" ")}`,
89	`img-src 'self' ${input.scheme}: blob: data: http: https:`,	89	`img-src 'self' ${input.scheme}: blob: data: http: https:`,
		90	`media-src 'self' ${input.scheme}: blob:`,
90	"style-src 'self' 'unsafe-inline'",	91	"style-src 'self' 'unsafe-inline'",
91	`font-src 'self' ${input.scheme}: data:`,	92	`font-src 'self' ${input.scheme}: data:`,
92	"worker-src 'self' blob:",	93	"worker-src 'self' blob:",

apps/server/src/assets/AssetAccess.test.ts+31

...	@@ -208,6 +208,37 @@ describe("AssetAccess", () => {	...	@@ -208,6 +208,37 @@ describe("AssetAccess", () => {
208	}).pipe(Effect.provide(testLayer)),	208	}).pipe(Effect.provide(testLayer)),
209	);	209	);
210		210
		211	it.effect("serves video attachments inline", () =>
		212	Effect.gen(function* () {
		213	const config = yield* ServerConfig.ServerConfig;
		214	const fileSystem = yield* FileSystem.FileSystem;
		215	const path = yield* Path.Path;
		216	const attachmentId = "thread-1-00000000-0000-4000-8000-000000000001-mp4";
		217	const attachmentPath = path.join(config.attachmentsDir, `${attachmentId}.mp4`);
		218	yield* fileSystem.makeDirectory(config.attachmentsDir, { recursive: true });
		219	yield* fileSystem.writeFile(attachmentPath, new Uint8Array([1, 2, 3]));
		220
		221	const result = yield* issueAssetUrl({
		222	resource: {
		223	_tag: "attachment",
		224	attachmentId,
		225	fileName: "demo.mp4",
		226	mimeType: 'video/mp4; codecs="avc1.42E01E"',
		227	},
		228	});
		229	const suffix = result.relativeUrl.slice(`${ASSET_ROUTE_PREFIX}/`.length);
		230	const separatorIndex = suffix.indexOf("/");
		231
		232	expect(
		233	yield* resolveAsset(suffix.slice(0, separatorIndex), suffix.slice(separatorIndex + 1)),
		234	).toEqual({
		235	kind: "file",
		236	path: attachmentPath,
		237	fileName: "demo.mp4",
		238	mimeType: "video/mp4",
		239	});
		240	}).pipe(Effect.provide(testLayer)),
		241	);
211	it.effect("issues project favicon capabilities with a signed fallback", () =>	242	it.effect("issues project favicon capabilities with a signed fallback", () =>
212	Effect.gen(function* () {	243	Effect.gen(function* () {
213	const fileSystem = yield* FileSystem.FileSystem;	244	const fileSystem = yield* FileSystem.FileSystem;

apps/server/src/assets/AssetAccess.ts+9-4

 @@ -48,6 +48,7 @@ const SIGNING_SECRET_NAME = "asset-access-signing-key";
 const ASSET_TOKEN_TTL_MS = 60 * 60 * 1000;
 const PROJECT_FAVICON_TOKEN_BUCKET_MS = 30 * 60 * 1000;
 const PROJECT_FAVICON_VERSION_PREFIX = "v";
+const INLINE_VIDEO_MIME_TYPE_PATTERN = /^video\/[\w!#$&^.+-]+$/i;
 const PREVIEW_ASSET_EXTENSIONS = new Set([
   ...WORKSPACE_BROWSER_PREVIEW_EXTENSIONS,
   ...WORKSPACE_IMAGE_PREVIEW_EXTENSIONS,
 @@ -300,16 +301,20 @@ export const issueAssetUrl = Effect.fn("AssetAccess.issueAssetUrl")(function* (i
         });
       }
       // Generic files carry their extension inside the attachment id (that
-      // shape resolves the on-disk path); images do not. Only generic files
+      // shape resolves the on-disk path); images do not. Videos and images
-      // download, images render inline in chat.
+      // render inline; other generic files download.
       const isGenericFile = parseAttachmentFileExtension(input.resource.attachmentId) !== null;
+      const videoMimeType = input.resource.mimeType?.split(";", 1)[0]?.trim() ?? "";
+      const isVideo = INLINE_VIDEO_MIME_TYPE_PATTERN.test(videoMimeType);
       claims = {
         version: 1,
         kind: "attachment",
         attachmentId: input.resource.attachmentId,
-        ...(isGenericFile ? { download: true } : {}),
+        ...(isGenericFile && !isVideo ? { download: true } : {}),
         ...(input.resource.fileName !== undefined ? { fileName: input.resource.fileName } : {}),
-        ...(input.resource.mimeType !== undefined ? { mimeType: input.resource.mimeType } : {}),
+        ...(input.resource.mimeType !== undefined
+          ? { mimeType: isVideo ? videoMimeType : input.resource.mimeType }
+          : {}),
         expiresAt,
       };
       fileName = input.resource.fileName ?? path.basename(attachmentPath);

apps/server/src/http.test.ts+11

...	@@ -50,6 +50,17 @@ describe("assetResponseHeaders", () => {	...	@@ -50,6 +50,17 @@ describe("assetResponseHeaders", () => {
50	});	50	});
51	});	51	});
52		52
		53	it("serves inline videos with their declared mime type", () => {
		54	expect(
		55	assetResponseHeaders("/attachments/demo.bin", {
		56	mimeType: 'video/mp4; codecs="avc1.42E01E"',
		57	}),
		58	).toEqual({
		59	"Cache-Control": "private, max-age=3600",
		60	"Content-Type": "video/mp4",
		61	"X-Content-Type-Options": "nosniff",
		62	});
		63	});
53	it("declares utf-8 for HTML assets so non-ASCII content renders correctly", () => {	64	it("declares utf-8 for HTML assets so non-ASCII content renders correctly", () => {
54	expect(assetResponseHeaders("/workspace/page.html")).toHaveProperty(	65	expect(assetResponseHeaders("/workspace/page.html")).toHaveProperty(
55	"Content-Type",	66	"Content-Type",

apps/server/src/http.ts+10-5

...	@@ -57,6 +57,8 @@ const DOWNLOAD_MIME_TYPE_PATTERN = /^[\w!#$&^.+-]+\/[\w!#$&^.+-]+$/;	...	@@ -57,6 +57,8 @@ const DOWNLOAD_MIME_TYPE_PATTERN = /^[\w!#$&^.+-]+\/[\w!#$&^.+-]+$/;
57	const isSafeDownloadMimeType = (mimeType: string): boolean =>	57	const isSafeDownloadMimeType = (mimeType: string): boolean =>
58	DOWNLOAD_MIME_TYPE_PATTERN.test(mimeType) &&	58	DOWNLOAD_MIME_TYPE_PATTERN.test(mimeType) &&
59	!/(?:^text\/html$\|\/xml(?:$\|-)\|\+xml$)/i.test(mimeType.trim().toLowerCase());	59	!/(?:^text\/html$\|\/xml(?:$\|-)\|\+xml$)/i.test(mimeType.trim().toLowerCase());
		60	const isSafeInlineVideoMimeType = (mimeType: string): boolean =>
		61	DOWNLOAD_MIME_TYPE_PATTERN.test(mimeType) && mimeType.toLowerCase().startsWith("video/");
60		62
61	/** RFC 6266 disposition with an ASCII fallback name plus a UTF-8 `filename`. /	63	/** RFC 6266 disposition with an ASCII fallback name plus a UTF-8 `filename`. /
62	export function downloadContentDisposition(fileName?: string): string {	64	export function downloadContentDisposition(fileName?: string): string {
...	@@ -86,6 +88,7 @@ export function assetResponseHeaders(	...	@@ -86,6 +88,7 @@ export function assetResponseHeaders(
86	},	88	},
87	): Record<string, string> {	89	): Record<string, string> {
88	const lowerPath = filePath.toLowerCase();	90	const lowerPath = filePath.toLowerCase();
		91	const inlineVideoMimeType = options?.mimeType?.split(";", 1)[0]?.trim();
89	return {	92	return {
90	"Cache-Control": "private, max-age=3600",	93	"Cache-Control": "private, max-age=3600",
91	"X-Content-Type-Options": "nosniff",	94	"X-Content-Type-Options": "nosniff",
...	@@ -98,9 +101,11 @@ export function assetResponseHeaders(	...	@@ -98,9 +101,11 @@ export function assetResponseHeaders(
98	? options.mimeType	101	? options.mimeType
99	: "application/octet-stream",	102	: "application/octet-stream",
100	}	103	}
101	: lowerPath.endsWith(".html") \|\| lowerPath.endsWith(".htm")	104	: inlineVideoMimeType !== undefined && isSafeInlineVideoMimeType(inlineVideoMimeType)
102	? { "Content-Type": "text/html; charset=utf-8" }	105	? { "Content-Type": inlineVideoMimeType }
103	: {}),	106	: lowerPath.endsWith(".html") \|\| lowerPath.endsWith(".htm")
		107	? { "Content-Type": "text/html; charset=utf-8" }
		108	: {}),
104	...(!options?.download && lowerPath.endsWith(".svg")	109	...(!options?.download && lowerPath.endsWith(".svg")
105	? { "Content-Security-Policy": SVG_CONTENT_SECURITY_POLICY }	110	? { "Content-Security-Policy": SVG_CONTENT_SECURITY_POLICY }
106	: {}),	111	: {}),
...	@@ -276,9 +281,9 @@ export const assetRouteLayer = HttpRouter.add(	...	@@ -276,9 +281,9 @@ export const assetRouteLayer = HttpRouter.add(
276	status: 200,	281	status: 200,
277	headers: assetResponseHeaders(	282	headers: assetResponseHeaders(
278	asset.path,	283	asset.path,
279	asset.download	284	asset.download \|\| asset.mimeType !== undefined
280	? {	285	? {
281	download: true,	286	...(asset.download ? { download: true } : {}),
282	...(asset.fileName !== undefined ? { fileName: asset.fileName } : {}),	287	...(asset.fileName !== undefined ? { fileName: asset.fileName } : {}),
283	...(asset.mimeType !== undefined ? { mimeType: asset.mimeType } : {}),	288	...(asset.mimeType !== undefined ? { mimeType: asset.mimeType } : {}),
284	}	289	}

apps/web/src/components/ChatView.logic.test.ts+27

...	@@ -21,6 +21,8 @@ import {	...	@@ -21,6 +21,8 @@ import {
21	dismissBranchMismatchForSession,	21	dismissBranchMismatchForSession,
22	ENVIRONMENT_RECONNECT_WARNING_GRACE_MS,	22	ENVIRONMENT_RECONNECT_WARNING_GRACE_MS,
23	getStartedThreadModelChangeBlockReason,	23	getStartedThreadModelChangeBlockReason,
		24	loadVideoPreviewUrl,
		25	isVideoPreviewRequestCurrent,
24	hasEnvironmentReconnectWarningGraceElapsed,	26	hasEnvironmentReconnectWarningGraceElapsed,
25	hasServerAcknowledgedLocalDispatch,	27	hasServerAcknowledgedLocalDispatch,
26	isBranchMismatchDismissedForSession,	28	isBranchMismatchDismissedForSession,
...	@@ -41,6 +43,31 @@ import {	...	@@ -41,6 +43,31 @@ import {
41	shouldWriteThreadErrorToCurrentServerThread,	43	shouldWriteThreadErrorToCurrentServerThread,
42	} from "./ChatView.logic";	44	} from "./ChatView.logic";
43		45
		46	describe("loadVideoPreviewUrl", () => {
		47	it("loads video bytes into an object URL", async () => {
		48	const objectUrl = await loadVideoPreviewUrl("data:video/mp4;base64,AA==");
		49	expect(objectUrl).toMatch(/^blob:/);
		50	URL.revokeObjectURL(objectUrl);
		51	});
		52
		53	it("stops loading when the preview request is cancelled", async () => {
		54	const controller = new AbortController();
		55	controller.abort();
		56
		57	await expect(
		58	loadVideoPreviewUrl("data:video/mp4;base64,AA==", controller.signal),
		59	).rejects.toMatchObject({ name: "AbortError" });
		60	});
		61	});
		62
		63	describe("isVideoPreviewRequestCurrent", () => {
		64	it("rejects changed threads and replaced previews", () => {
		65	expect(isVideoPreviewRequestCurrent("thread-1", "thread-2", 1, 1)).toBe(false);
		66	expect(isVideoPreviewRequestCurrent("thread-1", "thread-1", 1, 2)).toBe(false);
		67	expect(isVideoPreviewRequestCurrent("thread-1", "thread-1", 2, 2)).toBe(true);
		68	});
		69	});
		70
44	const environmentId = EnvironmentId.make("environment-local");	71	const environmentId = EnvironmentId.make("environment-local");
45	const projectId = ProjectId.make("project-1");	72	const projectId = ProjectId.make("project-1");
46	const threadId = ThreadId.make("thread-1");	73	const threadId = ThreadId.make("thread-1");

apps/web/src/components/ChatView.logic.ts+15

...	@@ -290,6 +290,21 @@ export function revokeBlobPreviewUrl(previewUrl: string \| undefined): void {	...	@@ -290,6 +290,21 @@ export function revokeBlobPreviewUrl(previewUrl: string \| undefined): void {
290	URL.revokeObjectURL(previewUrl);	290	URL.revokeObjectURL(previewUrl);
291	}	291	}
292		292
		293	export async function loadVideoPreviewUrl(url: string, signal?: AbortSignal): Promise<string> {
		294	const response = await fetch(url, signal ? { signal } : {});
		295	if (!response.ok) throw new Error(`Could not load video (${response.status}).`);
		296	return URL.createObjectURL(await response.blob());
		297	}
		298
		299	export function isVideoPreviewRequestCurrent(
		300	requestThreadKey: string,
		301	currentThreadKey: string,
		302	requestId: number,
		303	currentRequestId: number,
		304	): boolean {
		305	return requestThreadKey === currentThreadKey && requestId === currentRequestId;
		306	}
		307
293	export function revokeUserMessagePreviewUrls(message: ChatMessage): void {	308	export function revokeUserMessagePreviewUrls(message: ChatMessage): void {
294	if (message.role !== "user" \|\| !message.attachments) {	309	if (message.role !== "user" \|\| !message.attachments) {
295	return;	310	return;

apps/web/src/components/ChatView.tsx+95-14

 @@ -129,6 +129,7 @@ import {
   MAX_TERMINALS_PER_GROUP,
   type ChatMessage,
   isImageAttachment,
+  videoMimeType,
   type SessionPhase,
   type Thread,
   type TurnDiffSummary,
 @@ -360,6 +361,8 @@ import {
   cloneComposerImageForRetry,
   deriveLockedProvider,
   readFileAsDataUrl,
+  loadVideoPreviewUrl,
+  isVideoPreviewRequestCurrent,
   reconcileMountedTerminalThreadIds,
   resolveBackgroundDraftWorkspaceOptions,
   resolveDraftHeroState,
 @@ -1438,8 +1441,23 @@ function ChatViewContent(props: ChatViewProps) {
   const localComposerRef = useRef<ChatComposerHandle | null>(null);
   const composerRef = useComposerHandleContext() ?? localComposerRef;
   const [isWorkspaceFileDragActive, setIsWorkspaceFileDragActive] = useState(false);
+  const routeThreadKeyRef = useRef(routeThreadKey);
+  routeThreadKeyRef.current = routeThreadKey;
+  const videoPreviewRequestIdRef = useRef(0);
+  const videoPreviewAbortControllerRef = useRef<AbortController | null>(null);
+  const cancelVideoPreviewRequest = useCallback(() => {
+    videoPreviewRequestIdRef.current += 1;
+    videoPreviewAbortControllerRef.current?.abort();
+    videoPreviewAbortControllerRef.current = null;
+  }, []);
+  const [openingVideoAttachmentId, setOpeningVideoAttachmentId] = useState<string | null>(null);
   const [showScrollToBottom, setShowScrollToBottom] = useState(false);
   const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
+  useEffect(() => {
+    const item = expandedImage?.images[expandedImage.index];
+    if (item?.type !== "video" || !item.src.startsWith("blob:")) return;
+    return () => revokeBlobPreviewUrl(item.src);
+  }, [expandedImage]);
   const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
   const [feedbackSubmissionsByThreadKey, setFeedbackSubmissionsByThreadKey] = useState<
     Record<string, ReadonlyArray<CodexFeedbackSubmission>>
 @@ -2479,11 +2497,12 @@ function ChatViewContent(props: ChatViewProps) {
   useEffect(() => {
     return () => {
       clearAttachmentPreviewHandoffs();
+      cancelVideoPreviewRequest();
       for (const message of optimisticUserMessagesRef.current) {
         revokeUserMessagePreviewUrls(message);
       }
     };
-  }, [clearAttachmentPreviewHandoffs]);
+  }, [cancelVideoPreviewRequest, clearAttachmentPreviewHandoffs]);
   const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
     if (previewUrls.length === 0) return;
 @@ -2504,17 +2523,40 @@ function ChatViewContent(props: ChatViewProps) {
     });
   }, []);
   const serverMessages = activeThread?.messages;
-  const downloadFileAttachment = useCallback(
+  const openFileAttachment = useCallback(
     async (attachment: ChatFileAttachment) => {
       const connection = readPreparedConnection(environmentId);
       if (!connection) {
         toastManager.add({ type: "error", title: "The environment is not connected." });
         return;
       }
+      const videoMime = videoMimeType(attachment);
+      const isVideo = videoMime !== null;
+      const action = isVideo ? "play" : "download";
+      const videoPreviewAbortController = isVideo ? new AbortController() : null;
+      if (isVideo) {
+        videoPreviewAbortControllerRef.current?.abort();
+        videoPreviewAbortControllerRef.current = videoPreviewAbortController;
+      }
+      const videoPreviewRequestId = isVideo ? ++videoPreviewRequestIdRef.current : 0;
+      const isCurrentRequest = () =>
+        !isVideo ||
+        isVideoPreviewRequestCurrent(
+          routeThreadKey,
+          routeThreadKeyRef.current,
+          videoPreviewRequestId,
+          videoPreviewRequestIdRef.current,
+        );
+      const finishVideoPreviewRequest = () => {
+        if (videoPreviewRequestIdRef.current === videoPreviewRequestId) {
+          setOpeningVideoAttachmentId(null);
+          videoPreviewAbortControllerRef.current = null;
+        }
+      };
+      if (isVideo) setOpeningVideoAttachmentId(attachment.id);
-      // fileName and mimeType ride in the signed claims so the download gets
+      // fileName and mimeType ride in the signed claims so videos render
-      // a real filename and Content-Type even when the anchor's `download`
+      // inline while other files keep their real download name and type.
-      // attribute is ignored (cross-origin environment servers).
       const result = await createAttachmentAssetUrl({
         environmentId,
         input: {
 @@ -2522,15 +2564,20 @@ function ChatViewContent(props: ChatViewProps) {
             _tag: "attachment",
             attachmentId: attachment.id,
             fileName: attachment.name,
-            mimeType: attachment.mimeType,
+            mimeType: videoMime ?? attachment.mimeType,
           },
         },
       });
+      if (!isCurrentRequest()) {
+        finishVideoPreviewRequest();
+        return;
+      }
       if (result._tag === "Failure") {
+        finishVideoPreviewRequest();
         const error = squashAtomCommandFailure(result);
         toastManager.add({
           type: "error",
-          title: `Could not download ${attachment.name}`,
+          title: "Could not " + action + " " + attachment.name,
           description: error instanceof Error ? error.message : "The attachment is unavailable.",
         });
         return;
 @@ -2538,7 +2585,31 @@ function ChatViewContent(props: ChatViewProps) {
       const url = resolveAssetUrl(connection.httpBaseUrl, result.value.relativeUrl);
       if (!url) {
-        toastManager.add({ type: "error", title: `Could not download ${attachment.name}` });
+        finishVideoPreviewRequest();
+        toastManager.add({ type: "error", title: "Could not " + action + " " + attachment.name });
+        return;
+      }
+      if (isVideo) {
+        try {
+          const previewUrl = await loadVideoPreviewUrl(url, videoPreviewAbortController?.signal);
+          if (!isCurrentRequest()) {
+            revokeBlobPreviewUrl(previewUrl);
+            return;
+          }
+          setExpandedImage({
+            images: [{ src: previewUrl, name: attachment.name, type: "video" }],
+            index: 0,
+          });
+        } catch (error) {
+          if (!isCurrentRequest()) return;
+          toastManager.add({
+            type: "error",
+            title: "Could not play " + attachment.name,
+            description: error instanceof Error ? error.message : "The attachment is unavailable.",
+          });
+        } finally {
+          finishVideoPreviewRequest();
+        }
         return;
       }
       const anchor = document.createElement("a");
 @@ -2546,7 +2617,7 @@ function ChatViewContent(props: ChatViewProps) {
       anchor.download = attachment.name;
       anchor.click();
     },
-    [createAttachmentAssetUrl, environmentId],
+    [createAttachmentAssetUrl, environmentId, routeThreadKey],
   );
   const serverAttachmentIds = useMemo(() => {
     const attachmentIds = new Set<string>();
 @@ -4389,8 +4460,10 @@ function ChatViewContent(props: ChatViewProps) {
       return [];
     });
     resetLocalDispatch();
+    cancelVideoPreviewRequest();
+    setOpeningVideoAttachmentId(null);
     setExpandedImage(null);
-  }, [draftId, resetLocalDispatch, threadId]);
+  }, [cancelVideoPreviewRequest, draftId, resetLocalDispatch, threadId]);
   const closeExpandedImage = useCallback(() => {
     setExpandedImage(null);
 @@ -6843,9 +6916,14 @@ function ChatViewContent(props: ChatViewProps) {
     }
   };
-  const onExpandTimelineImage = useCallback((preview: ExpandedImagePreview) => {
+  const onExpandTimelineImage = useCallback(
-    setExpandedImage(preview);
+    (preview: ExpandedImagePreview) => {
-  }, []);
+      cancelVideoPreviewRequest();
+      setOpeningVideoAttachmentId(null);
+      setExpandedImage(preview);
+    },
+    [cancelVideoPreviewRequest],
+  );
   const onOpenTurnDiff = useCallback(
     (turnId: TurnId, filePath?: string) => {
       if (!isServerThread || !activeThreadRef) return;
 @@ -7139,7 +7217,8 @@ function ChatViewContent(props: ChatViewProps) {
                 onRevertUserMessage={onRevertUserMessage}
                 isRevertingCheckpoint={isRevertingCheckpoint}
                 onImageExpand={onExpandTimelineImage}
-                onFileDownload={downloadFileAttachment}
+                onFileOpen={openFileAttachment}
+                openingVideoAttachmentId={openingVideoAttachmentId}
                 markdownCwd={gitCwd ?? undefined}
                 resolvedTheme={resolvedTheme}
                 timestampFormat={timestampFormat}
 @@ -7320,6 +7399,8 @@ function ChatViewContent(props: ChatViewProps) {
                             scheduleComposerFocus={scheduleComposerFocus}
                             setThreadError={setThreadError}
                             onExpandImage={onExpandTimelineImage}
+                            onFileOpen={openFileAttachment}
+                            openingVideoAttachmentId={openingVideoAttachmentId}
                           />
                         </div>
                       </div>

apps/web/src/components/chat/ChatComposer.tsx+191-50

 @@ -1,5 +1,6 @@
 import type {
   ApprovalRequestId,
+  ChatFileAttachment,
   EnvironmentId,
   ModelSelection,
   PreviewAnnotationPayload,
 @@ -55,6 +56,8 @@ import {
   type DraftId,
   type PersistedComposerFileAttachment,
   type PersistedComposerImageAttachment,
+  composerFileDedupKey,
+  composerFileMatchesReattachMarker,
   composerFileNeedsReattach,
   composerTargetKey,
   hydrateImagesFromPersisted,
 @@ -86,6 +89,7 @@ import {
   classifyComposerAttachmentFile,
   fileAttachmentCapabilityBlockReason,
   fileAttachmentStagingLimit,
+  isPreviewableComposerVideo,
   normalizeComposerImageFileMimeType,
   shouldHandleComposerAttachmentPaste,
 } from "./composerAttachmentFiles";
 @@ -142,7 +146,11 @@ import {
 } from "./composerProviderState";
 import { ContextWindowMeter } from "./ContextWindowMeter";
 import { resolveContextWindowModelDisplayName } from "./ContextWindowMeter.logic";
-import { buildExpandedImagePreview, type ExpandedImagePreview } from "./ExpandedImagePreview";
+import {
+  attachVideoThumbnail,
+  buildExpandedImagePreview,
+  type ExpandedImagePreview,
+} from "./ExpandedImagePreview";
 import { basenameOfPath } from "../../pierre-icons";
 import { cn, randomUUID } from "~/lib/utils";
 import { Separator } from "../ui/separator";
 @@ -153,6 +161,30 @@ import {
 } from "./composerSubmission";
 import { ComposerPromptLengthValidation } from "./ComposerPromptLengthValidation";
+function ComposerVideoThumbnail({ file }: { file: File }) {
+  const setVideo = useCallback(
+    (video: HTMLVideoElement | null) => {
+      if (!video) return;
+      return attachVideoThumbnail(video, file);
+    },
+    [file],
+  );
+  return (
+    <video
+      ref={setVideo}
+      muted
+      playsInline
+      preload="metadata"
+      aria-hidden="true"
+      onLoadedMetadata={(event) => {
+        event.currentTarget.currentTime = Math.min(0.1, event.currentTarget.duration || 0);
+      }}
+      className="pointer-events-none absolute inset-0 size-full object-cover"
+    />
+  );
+}
 type ComposerCommandMenuPosition = {
   bottom: number;
   left: number;
 @@ -259,6 +291,7 @@ import {
   FileIcon,
   PaperclipIcon,
   PencilRulerIcon,
+  PlayIcon,
   type LucideIcon,
   LockIcon,
   LockOpenIcon,
 @@ -280,7 +313,7 @@ import {
 } from "../../providerInstances";
 import { type AppModelOption, getAppModelOptionsForInstance } from "../../modelSelection";
 import type { UnifiedSettings } from "@t3tools/contracts/settings";
-import type { SessionPhase, Thread } from "../../types";
+import { type SessionPhase, type Thread, videoMimeType } from "../../types";
 import type { PendingUserInputDraftAnswer } from "../../pendingUserInput";
 import type { PendingApproval, PendingUserInput } from "../../session-logic";
 import type { ContextWindowSnapshot } from "../../lib/contextWindow";
 @@ -683,6 +716,8 @@ export interface ChatComposerProps {
   scheduleComposerFocus: () => void;
   setThreadError: (threadId: ThreadId | null, error: string | null) => void;
   onExpandImage: (preview: ExpandedImagePreview) => void;
+  onFileOpen: (attachment: ChatFileAttachment) => void;
+  openingVideoAttachmentId: string | null;
 }
 // --------------------------------------------------------------------------
 @@ -762,6 +797,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     scheduleComposerFocus,
     setThreadError,
     onExpandImage,
+    onFileOpen,
+    openingVideoAttachmentId,
   } = props;
   // ------------------------------------------------------------------
   // Store subscriptions (prompt / images / terminal contexts)
 @@ -774,6 +811,12 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const prompt = composerDraft.prompt;
   const composerImages = composerDraft.images;
   const composerFiles = composerDraft.files;
+  const composerVideos = composerFiles.filter((file) =>
+    isPreviewableComposerVideo(file, environmentId),
+  );
+  const composerOtherFiles = composerFiles.filter(
+    (file) => !isPreviewableComposerVideo(file, environmentId),
+  );
   const composerTerminalContexts = composerDraft.terminalContexts;
   const composerElementContexts = composerDraft.elementContexts;
   const composerPreviewAnnotations = composerDraft.previewAnnotations;
 @@ -2363,11 +2406,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       let restoredFileCount = 0;
       const stashedFiles = entry.files ?? [];
       if (stashedFiles.length > 0) {
-        const fileDedupKey = (file: {
-          readonly mimeType: string;
-          readonly sizeBytes: number;
-          readonly name: string;
-        }) => `${file.mimeType}\u0000${file.sizeBytes}\u0000${file.name}`;
         const composerFilesNow = composerFilesRef.current;
         const existingFileIds = new Set(composerFilesNow.map((file) => file.id));
         const retainedUploadIds = new Set(
 @@ -2375,16 +2413,15 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
             file.uploadedAttachmentId ? [file.uploadedAttachmentId] : [],
           ),
         );
-        const existingFileKeys = new Set(composerFilesNow.map(fileDedupKey));
+        const existingFileKeys = new Set(composerFilesNow.map(composerFileDedupKey));
-        const reattachMarkerKeys = new Set(
+        const reattachMarkers = composerFilesNow.filter(composerFileNeedsReattach);
-          composerFilesNow.filter(composerFileNeedsReattach).map(fileDedupKey),
+        const restoredMarkerIds = new Set<string>();
-        );
         const duplicateFiles: PersistedComposerFileAttachment[] = [];
         const markerReplacements: ComposerFileAttachment[] = [];
         const appendedFiles: ComposerFileAttachment[] = [];
         for (const file of stashedFiles) {
           const expired = expiredAttachmentIds.has(file.attachmentId);
-          const key = fileDedupKey(file);
+          const key = composerFileDedupKey(file);
           const restored: ComposerFileAttachment = {
             type: "file",
             id: file.id,
 @@ -2404,23 +2441,23 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
             }
             continue;
           }
-          if (existingFileKeys.has(key)) {
+          const reattachMarker = reattachMarkers.find(
-            if (reattachMarkerKeys.has(key)) {
+            (marker) =>
-              // The draft row with this identity is a needs-reattach marker,
+              !restoredMarkerIds.has(marker.id) && composerFileMatchesReattachMarker(marker, file),
-              // not a real duplicate. Replace it (addFiles swaps a matching
+          );
-              // marker in place) instead of deleting the only uploaded copy.
+          if (reattachMarker) {
-              reattachMarkerKeys.delete(key);
+            restoredMarkerIds.add(reattachMarker.id);
-              existingFileIds.add(file.id);
+            existingFileIds.add(file.id);
-              if (expired) {
+            existingFileKeys.add(key);
-                // The draft's marker already says "attach again"; nothing to
+            if (expired) {
-                // restore or release, but say why the stash copy is gone.
+              expiredFileNames.push(file.name);
-                expiredFileNames.push(file.name);
+            } else {
-              } else {
+              retainedUploadIds.add(file.attachmentId);
-                retainedUploadIds.add(file.attachmentId);
+              markerReplacements.push(restored);
-                markerReplacements.push(restored);
-              }
-              continue;
             }
+            continue;
+          }
+          if (existingFileKeys.has(key)) {
             if (!expired && !retainedUploadIds.has(file.attachmentId)) {
               duplicateFiles.push(file);
             }
 @@ -2956,22 +2993,34 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     // A pick that matches a needs-reattach marker replaces it in the draft, so
     // it must not consume a slot; a draft full of markers would otherwise hit
     // the capacity error before the replacement path could run.
-    const reattachKeys = new Set(
+    const reattachMarkers = composerFilesRef.current.filter(composerFileNeedsReattach);
-      composerFilesRef.current
+    const replacedReattachMarkerIds = new Set<string>();
-        .filter(composerFileNeedsReattach)
-        .map((file) => `${file.mimeType}\u0000${file.sizeBytes}\u0000${file.name}`),
-    );
     const acceptedImages: File[] = [];
     const acceptedFiles: ComposerFileAttachment[] = [];
     let error: string | null = null;
     for (const file of files) {
       const attachmentKind = classifyComposerAttachmentFile(file);
-      const replacesReattachMarker =
+      const fileMimeType =
-        attachmentKind === "file" &&
+        attachmentKind === "file"
-        reattachKeys.delete(
+          ? (videoMimeType({ name: file.name, mimeType: file.type }) ??
-          `${file.type || "application/octet-stream"}\u0000${file.size}\u0000${file.name || "file"}`,
+            (file.type || "application/octet-stream"))
-        );
+          : file.type;
-      if (!replacesReattachMarker && reservedCount >= PROVIDER_SEND_TURN_MAX_ATTACHMENTS) {
+      const matchingReattachMarker =
+        attachmentKind === "file"
+          ? reattachMarkers.find(
+              (marker) =>
+                !replacedReattachMarkerIds.has(marker.id) &&
+                composerFileMatchesReattachMarker(marker, {
+                  name: file.name || "file",
+                  mimeType: fileMimeType,
+                  sizeBytes: file.size,
+                }),
+            )
+          : undefined;
+      if (matchingReattachMarker) {
+        replacedReattachMarkerIds.add(matchingReattachMarker.id);
+      }
+      if (!matchingReattachMarker && reservedCount >= PROVIDER_SEND_TURN_MAX_ATTACHMENTS) {
         error = `You can attach up to ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS} files per message.`;
         // Keep scanning: a later file in this batch can still replace a
         // needs-reattach marker without needing a free slot.
 @@ -2996,16 +3045,20 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
           error = fileAttachmentTooLargeMessage(file.name, fileStagingLimit);
           continue;
         }
+        const attachmentFile =
+          file.type === fileMimeType
+            ? file
+            : new File([file], file.name, { type: fileMimeType, lastModified: file.lastModified });
         acceptedFiles.push({
           type: "file",
           id: randomUUID(),
-          name: file.name || "file",
+          name: attachmentFile.name || "file",
-          mimeType: file.type || "application/octet-stream",
+          mimeType: fileMimeType,
-          sizeBytes: file.size,
+          sizeBytes: attachmentFile.size,
-          file,
+          file: attachmentFile,
         });
       }
-      if (!replacesReattachMarker) {
+      if (!matchingReattachMarker) {
         reservedCount += 1;
       }
     }
 @@ -3686,10 +3739,11 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
               {!isComposerCollapsedMobile &&
                 !isComposerApprovalState &&
                 pendingUserInputs.length === 0 &&
-                composerImages.some(
+                (composerVideos.length > 0 ||
-                  (image) =>
+                  composerImages.some(
-                    !composerPreviewAnnotations.some((annotation) => annotation.id === image.id),
+                    (image) =>
-                ) && (
+                      !composerPreviewAnnotations.some((annotation) => annotation.id === image.id),
+                  )) && (
                   <div className="mb-3 flex flex-wrap gap-2">
                     {composerImages
                       .filter(
 @@ -3800,15 +3854,102 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                           </div>
                         );
                       })}
+                    {composerVideos.map((file) => {
+                      const fileCanUpload =
+                        supportsAttachmentUploads &&
+                        maxFileAttachmentBytes !== null &&
+                        file.sizeBytes <= maxFileAttachmentBytes;
+                      const upload = fileCanUpload ? uploadsByImageId[file.id] : undefined;
+                      const isOpening = file.uploadedAttachmentId === openingVideoAttachmentId;
+                      return (
+                        <div
+                          key={file.id}
+                          className="relative h-16 w-16 overflow-hidden rounded-lg border border-border/80 bg-black"
+                        >
+                          <button
+                            type="button"
+                            className="flex h-full w-full cursor-zoom-in flex-col items-center justify-center gap-1 px-1 text-white aria-disabled:cursor-default aria-disabled:opacity-50"
+                            aria-busy={isOpening || undefined}
+                            aria-disabled={isOpening || undefined}
+                            aria-label={`${isOpening ? "Loading" : "Play"} ${file.name}`}
+                            onClick={() => {
+                              if (isOpening) return;
+                              if (file.file !== null) {
+                                const preview = buildExpandedImagePreview([file], file.id);
+                                if (preview) onExpandImage(preview);
+                                return;
+                              }
+                              if (!file.uploadedAttachmentId) return;
+                              onFileOpen({ ...file, id: file.uploadedAttachmentId });
+                            }}
+                          >
+                            {file.file && (
+                              <>
+                                <ComposerVideoThumbnail file={file.file} />
+                                <span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-black/10" />
+                              </>
+                            )}
+                            {isOpening ? (
+                              <span className="relative z-10 text-[10px]">Loading…</span>
+                            ) : (
+                              <PlayIcon className="relative z-10 size-4 fill-current drop-shadow-md" />
+                            )}
+                          </button>
+                          {upload?.status === "uploading" && (
+                            <span className="pointer-events-none absolute inset-x-0 bottom-0 bg-background/85 px-1 text-center text-[10px] text-foreground">
+                              {formatAttachmentUploadProgress(upload.progress)}
+                            </span>
+                          )}
+                          {upload?.status === "failed" && (
+                            <Tooltip>
+                              <TooltipTrigger
+                                render={
+                                  <Button
+                                    variant="ghost"
+                                    size="icon-xs"
+                                    className="absolute bottom-1 left-1 bg-background/85 hover:bg-background/95"
+                                    onClick={() =>
+                                      retryAttachmentUpload({
+                                        environmentId,
+                                        image: file,
+                                        draftTarget: composerDraftTarget,
+                                      })
+                                    }
+                                    aria-label={`Retry upload for ${file.name}`}
+                                  />
+                                }
+                              >
+                                <RotateCcwIcon />
+                              </TooltipTrigger>
+                              <TooltipPopup
+                                side="top"
+                                className="max-w-64 whitespace-normal leading-tight"
+                              >
+                                {upload.reason}
+                              </TooltipPopup>
+                            </Tooltip>
+                          )}
+                          <Button
+                            variant="ghost"
+                            size="icon-xs"
+                            className="absolute right-1 top-1 bg-background/80 hover:bg-background/90"
+                            onClick={() => removeComposerFileFromDraft(file.id)}
+                            aria-label={`Remove ${file.name}`}
+                          >
+                            <XIcon />
+                          </Button>
+                        </div>
+                      );
+                    })}
                   </div>
                 )}
               {!isComposerCollapsedMobile &&
                 !isComposerApprovalState &&
                 pendingUserInputs.length === 0 &&
-                composerFiles.length > 0 && (
+                composerOtherFiles.length > 0 && (
                   <div className="mb-3 flex flex-col gap-1">
-                    {composerFiles.map((file) => {
+                    {composerOtherFiles.map((file) => {
                       const fileCanUpload =
                         supportsAttachmentUploads &&
                         maxFileAttachmentBytes !== null &&

apps/web/src/components/chat/ExpandedImageDialog.test.tsx created+28

...	@@ -0,0 +1,28 @@
1	import { renderToStaticMarkup } from "react-dom/server";
2	import { describe, expect, it } from "vite-plus/test";
3
4	import { ExpandedImageDialog } from "./ExpandedImageDialog";
5	import type { ExpandedImagePreview } from "./ExpandedImagePreview";
6
7	describe("ExpandedImageDialog", () => {
8	it("renders video previews with native controls", () => {
9	const preview: ExpandedImagePreview = {
10	images: [
11	{
12	src: "https://environment.test/api/assets/demo.mp4",
13	name: "demo.mp4",
14	type: "video",
15	},
16	],
17	index: 0,
18	};
19
20	const markup = renderToStaticMarkup(
21	<ExpandedImageDialog preview={preview} onClose={() => {}} />,
22	);
23
24	expect(markup).toContain("<video");
25	expect(markup).toContain('controls=""');
26	expect(markup).toContain('aria-label="demo.mp4"');
27	});
28	});

apps/web/src/components/chat/ExpandedImageDialog.tsx+62-11

...	@@ -1,7 +1,7 @@	...	@@ -1,7 +1,7 @@
1	import { memo, useCallback, useEffect, useState } from "react";	1	import { memo, useCallback, useEffect, useState } from "react";
2	import { ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";	2	import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, XIcon } from "lucide-react";
3	import { Button } from "../ui/button";	3	import { Button } from "../ui/button";
4	import type { ExpandedImagePreview } from "./ExpandedImagePreview";	4	import { downloadVideoPreview, type ExpandedImagePreview } from "./ExpandedImagePreview";
5		5
6	interface ExpandedImageDialogProps {	6	interface ExpandedImageDialogProps {
7	preview: ExpandedImagePreview;	7	preview: ExpandedImagePreview;
...	@@ -13,12 +13,27 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({	...	@@ -13,12 +13,27 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
13	onClose,	13	onClose,
14	}: ExpandedImageDialogProps) {	14	}: ExpandedImageDialogProps) {
15	const [imageOffset, setImageOffset] = useState(0);	15	const [imageOffset, setImageOffset] = useState(0);
		16	const [failedVideoSrc, setFailedVideoSrc] = useState<string \| null>(null);
		17	const [downloadingVideoSrc, setDownloadingVideoSrc] = useState<string \| null>(null);
		18	const [downloadFailedVideoSrc, setDownloadFailedVideoSrc] = useState<string \| null>(null);
16	const index = (preview.index + imageOffset + preview.images.length) % preview.images.length;	19	const index = (preview.index + imageOffset + preview.images.length) % preview.images.length;
17		20
18	const navigateImage = useCallback((direction: -1 \| 1) => {	21	const navigateImage = useCallback((direction: -1 \| 1) => {
19	setImageOffset((current) => current + direction);	22	setImageOffset((current) => current + direction);
20	}, []);	23	}, []);
21		24
		25	const downloadVideo = async (src: string, name: string) => {
		26	setDownloadFailedVideoSrc(null);
		27	setDownloadingVideoSrc(src);
		28	try {
		29	await downloadVideoPreview(src, name);
		30	} catch {
		31	setDownloadFailedVideoSrc(src);
		32	} finally {
		33	setDownloadingVideoSrc((current) => (current === src ? null : current));
		34	}
		35	};
		36
22	useEffect(() => {	37	useEffect(() => {
23	const onKeyDown = (event: globalThis.KeyboardEvent) => {	38	const onKeyDown = (event: globalThis.KeyboardEvent) => {
24	if (event.key === "Escape") {	39	if (event.key === "Escape") {
...	@@ -45,18 +60,21 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({	...	@@ -45,18 +60,21 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
45		60
46	const item = preview.images[index];	61	const item = preview.images[index];
47	if (!item) return null;	62	if (!item) return null;
		63	const mediaLabel = item.type === "video" ? "video" : "image";
48		64
		65	const isDownloadingVideo = downloadingVideoSrc === item.src;
		66	const videoDownloadFailed = downloadFailedVideoSrc === item.src;
49	return (	67	return (
50	<div	68	<div
51	className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 px-4 py-6 [-webkit-app-region:no-drag]"	69	className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 px-4 py-6 [-webkit-app-region:no-drag]"
52	role="dialog"	70	role="dialog"
53	aria-modal="true"	71	aria-modal="true"
54	aria-label="Expanded image preview"	72	aria-label={`Expanded ${mediaLabel} preview`}
55	>	73	>
56	<button	74	<button
57	type="button"	75	type="button"
58	className="absolute inset-0 z-0 cursor-zoom-out"	76	className="absolute inset-0 z-0 cursor-zoom-out"
59	aria-label="Close image preview"	77	aria-label={`Close ${mediaLabel} preview`}
60	onClick={onClose}	78	onClick={onClose}
61	/>	79	/>
62	{preview.images.length > 1 && (	80	{preview.images.length > 1 && (
...	@@ -78,16 +96,49 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({	...	@@ -78,16 +96,49 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
78	variant="ghost"	96	variant="ghost"
79	className="absolute right-2 top-2"	97	className="absolute right-2 top-2"
80	onClick={onClose}	98	onClick={onClose}
81	aria-label="Close image preview"	99	aria-label={`Close ${mediaLabel} preview`}
82	>	100	>
83	<XIcon />	101	<XIcon />
84	</Button>	102	</Button>
85	<img	103	{item.type === "video" && failedVideoSrc === item.src ? (
86	src={item.src}	104	<div className="flex h-48 w-[min(92vw,32rem)] flex-col items-center justify-center gap-3 rounded-lg border border-border/70 bg-black px-6 text-center text-white shadow-2xl">
87	alt={item.name}	105	<p className="text-sm">
88	className="max-h-[86vh] max-w-[92vw] select-none rounded-lg border border-border/70 bg-background object-contain shadow-2xl"	106	{videoDownloadFailed
89	draggable={false}	107	? "Could not download this video."
90	/>	108	: "This video format cannot be played here."}
		109	</p>
		110	<Button
		111	size="sm"
		112	variant="secondary"
		113	aria-busy={isDownloadingVideo \|\| undefined}
		114	aria-disabled={isDownloadingVideo \|\| undefined}
		115	onClick={() => {
		116	if (isDownloadingVideo) return;
		117	void downloadVideo(item.src, item.name);
		118	}}
		119	>
		120	<DownloadIcon />
		121	{isDownloadingVideo ? "Downloading…" : "Download video"}
		122	</Button>
		123	</div>
		124	) : item.type === "video" ? (
		125	<video
		126	src={item.src}
		127	aria-label={item.name}
		128	autoPlay
		129	controls
		130	playsInline
		131	onError={() => setFailedVideoSrc(item.src)}
		132	className="max-h-[86vh] max-w-[92vw] rounded-lg border border-border/70 bg-black object-contain shadow-2xl"
		133	/>
		134	) : (
		135	<img
		136	src={item.src}
		137	alt={item.name}
		138	className="max-h-[86vh] max-w-[92vw] select-none rounded-lg border border-border/70 bg-background object-contain shadow-2xl"
		139	draggable={false}
		140	/>
		141	)}
91	<p className="mt-2 max-w-[92vw] truncate text-center text-xs text-muted-foreground/80">	142	<p className="mt-2 max-w-[92vw] truncate text-center text-xs text-muted-foreground/80">
92	{item.name}	143	{item.name}
93	{preview.images.length > 1 ? ` (${index + 1}/${preview.images.length})` : ""}	144	{preview.images.length > 1 ? ` (${index + 1}/${preview.images.length})` : ""}

apps/web/src/components/chat/ExpandedImagePreview.test.ts created+68

...	@@ -0,0 +1,68 @@
1	import { describe, expect, it, vi } from "vite-plus/test";
2
3	import type { ComposerFileAttachment } from "../../composerDraftStore";
4	import {
5	attachVideoThumbnail,
6	buildExpandedImagePreview,
7	downloadVideoPreview,
8	} from "./ExpandedImagePreview";
9
10	describe("buildExpandedImagePreview", () => {
11	it("builds a video preview for a local video attachment", () => {
12	const file = new File([new Uint8Array([1, 2, 3])], "demo.mp4", { type: "video/mp4" });
13	const attachment: ComposerFileAttachment = {
14	type: "file",
15	id: "video-1",
16	name: file.name,
17	mimeType: file.type,
18	sizeBytes: file.size,
19	file,
20	};
21
22	const preview = buildExpandedImagePreview([attachment], attachment.id);
23
24	expect(preview).toMatchObject({
25	images: [{ name: "demo.mp4", type: "video" }],
26	index: 0,
27	});
28	expect(preview?.images[0]?.src).toMatch(/^blob:/);
29	URL.revokeObjectURL(preview?.images[0]?.src ?? "");
30	});
31
32	it("releases a video thumbnail URL when detached", async () => {
33	const video = { src: "" } as HTMLVideoElement;
34	const file = new File([new Uint8Array([1, 2, 3])], "demo.mp4", { type: "video/mp4" });
35
36	const detach = attachVideoThumbnail(video, file);
37	const url = video.src;
38
39	expect((await fetch(url)).ok).toBe(true);
40	detach();
41	await expect(fetch(url)).rejects.toThrow();
42	});
43
44	it("downloads a video through a local blob URL", async () => {
45	vi.useFakeTimers();
46	const source = URL.createObjectURL(new Blob([new Uint8Array([1, 2, 3])]));
47	const click = vi.fn();
48	const anchor = { href: "", download: "", click };
49	vi.stubGlobal("document", { createElement: () => anchor });
50
51	try {
52	await downloadVideoPreview(source, "demo.mp4");
53
54	expect(anchor.download).toBe("demo.mp4");
55	expect(anchor.href).toMatch(/^blob:/);
56	expect(anchor.href).not.toBe(source);
57	expect(click).toHaveBeenCalledOnce();
58	expect((await fetch(anchor.href)).ok).toBe(true);
59
60	await vi.runAllTimersAsync();
61	await expect(fetch(anchor.href)).rejects.toThrow();
62	} finally {
63	URL.revokeObjectURL(source);
64	vi.useRealTimers();
65	vi.unstubAllGlobals();
66	}
67	});
68	});

apps/web/src/components/chat/ExpandedImagePreview.tsx+32-2

...	@@ -1,6 +1,10 @@	...	@@ -1,6 +1,10 @@
		1	import type { ComposerFileAttachment } from "../../composerDraftStore";
		2	import { type ChatImageAttachment, isVideoAttachment } from "../../types";
		3
1	export interface ExpandedImageItem {	4	export interface ExpandedImageItem {
2	src: string;	5	src: string;
3	name: string;	6	name: string;
		7	type?: "video";
4	}	8	}
5		9
6	export interface ExpandedImagePreview {	10	export interface ExpandedImagePreview {
...	@@ -8,12 +12,38 @@ export interface ExpandedImagePreview {	...	@@ -8,12 +12,38 @@ export interface ExpandedImagePreview {
8	index: number;	12	index: number;
9	}	13	}
10		14
		15	export function attachVideoThumbnail(video: HTMLVideoElement, file: File): () => void {
		16	const url = URL.createObjectURL(file);
		17	video.src = url;
		18	return () => URL.revokeObjectURL(url);
		19	}
		20
		21	export async function downloadVideoPreview(src: string, name: string): Promise<void> {
		22	const response = await fetch(src);
		23	if (!response.ok) throw new Error(`Could not download video (${response.status}).`);
		24	const url = URL.createObjectURL(await response.blob());
		25	const anchor = document.createElement("a");
		26	anchor.href = url;
		27	anchor.download = name;
		28	anchor.click();
		29	setTimeout(() => URL.revokeObjectURL(url), 30_000);
		30	}
		31
11	export function buildExpandedImagePreview(	32	export function buildExpandedImagePreview(
12	images: ReadonlyArray<{ id: string; name: string; previewUrl?: string }>,	33	images: ReadonlyArray<ChatImageAttachment \| ComposerFileAttachment>,
13	selectedImageId: string,	34	selectedImageId: string,
14	): ExpandedImagePreview \| null {	35	): ExpandedImagePreview \| null {
		36	const selected = images.find((image) => image.id === selectedImageId);
		37	if (selected?.type === "file" && selected.file && isVideoAttachment(selected)) {
		38	return {
		39	images: [{ src: URL.createObjectURL(selected.file), name: selected.name, type: "video" }],
		40	index: 0,
		41	};
		42	}
15	const previewableImages = images.flatMap((image) =>	43	const previewableImages = images.flatMap((image) =>
16	image.previewUrl ? [{ id: image.id, src: image.previewUrl, name: image.name }] : [],	44	image.type === "image" && image.previewUrl
		45	? [{ id: image.id, src: image.previewUrl, name: image.name }]
		46	: [],
17	);	47	);
18	if (previewableImages.length === 0) {	48	if (previewableImages.length === 0) {
19	return null;	49	return null;

apps/web/src/components/chat/MessagesTimeline.test.tsx+38

...	@@ -187,6 +187,7 @@ function buildProps() {	...	@@ -187,6 +187,7 @@ function buildProps() {
187	revertTurnCountByUserMessageId: new Map(),	187	revertTurnCountByUserMessageId: new Map(),
188	onRevertUserMessage: () => {},	188	onRevertUserMessage: () => {},
189	isRevertingCheckpoint: false,	189	isRevertingCheckpoint: false,
		190	openingVideoAttachmentId: null,
190	onImageExpand: () => {},	191	onImageExpand: () => {},
191	activeThreadEnvironmentId: ACTIVE_THREAD_ENVIRONMENT_ID,	192	activeThreadEnvironmentId: ACTIVE_THREAD_ENVIRONMENT_ID,
192	markdownCwd: undefined,	193	markdownCwd: undefined,
...	@@ -586,6 +587,43 @@ describe("MessagesTimeline", () => {	...	@@ -586,6 +587,43 @@ describe("MessagesTimeline", () => {
586	expect(markup).not.toContain('alt="report.pdf"');	587	expect(markup).not.toContain('alt="report.pdf"');
587	});	588	});
588		589
		590	it("renders video attachments as play buttons", () => {
		591	const entry = {
		592	...buildUserTimelineEntry("Watch the demo."),
		593	message: {
		594	...buildUserTimelineEntry("Watch the demo.").message,
		595	attachments: [
		596	{
		597	type: "file" as const,
		598	id: "attachment-demo-mp4",
		599	name: "demo.mp4",
		600	mimeType: "video/mp4",
		601	sizeBytes: 42,
		602	},
		603	],
		604	},
		605	};
		606
		607	const markup = renderToStaticMarkup(
		608	<MessagesTimeline {...buildProps()} timelineEntries={[entry]} />,
		609	);
		610	const busyMarkup = renderToStaticMarkup(
		611	<MessagesTimeline
		612	{...buildProps()}
		613	timelineEntries={[entry]}
		614	openingVideoAttachmentId="attachment-demo-mp4"
		615	/>,
		616	);
		617
		618	expect(markup).toContain('aria-label="Play demo.mp4"');
		619	expect(markup).toContain("min-h-[72px]");
		620	expect(markup).toContain(">demo.mp4</span>");
		621	expect(markup).not.toContain('aria-label="Download demo.mp4"');
		622	expect(busyMarkup).toContain('aria-busy="true"');
		623	expect(busyMarkup).toContain('aria-disabled="true"');
		624	expect(busyMarkup).not.toContain('disabled=""');
		625	expect(busyMarkup).toContain(">Loading…</span>");
		626	});
589	it("renders a file download button without creating its URL in advance", () => {	627	it("renders a file download button without creating its URL in advance", () => {
590	const entry = {	628	const entry = {
591	...buildUserTimelineEntry("Read the report."),	629	...buildUserTimelineEntry("Read the report."),

apps/web/src/components/chat/MessagesTimeline.tsx+48-10

 @@ -16,7 +16,7 @@ import {
 const EMPTY_AGENT_PANEL_MODEL = emptyAgentPanelModel();
 const NOOP_OPEN_AGENTS = () => {};
-const NOOP_DOWNLOAD_ATTACHMENT = (_attachment: ChatFileAttachment) => {};
+const NOOP_OPEN_ATTACHMENT = (_attachment: ChatFileAttachment) => {};
 import { resolveChatListAnchoredEndSpace } from "@t3tools/shared/chatList";
 import {
   createContext,
 @@ -45,6 +45,7 @@ import {
   type ChatImageAttachment,
   isFileAttachment,
   isImageAttachment,
+  isVideoAttachment,
   type TurnDiffSummary,
 } from "../../types";
 import {
 @@ -67,6 +68,7 @@ import {
   MessageCircleIcon,
   MousePointerClickIcon,
   PaintbrushIcon,
+  PlayIcon,
   SearchIcon,
   SquarePenIcon,
   TerminalIcon,
 @@ -153,7 +155,8 @@ interface TimelineRowSharedState {
   activeThreadEnvironmentId: EnvironmentId;
   onRevertUserMessage: (messageId: MessageId) => void;
   onImageExpand: (preview: ExpandedImagePreview) => void;
-  onFileDownload: (attachment: ChatFileAttachment) => void;
+  onFileOpen: (attachment: ChatFileAttachment) => void;
+  openingVideoAttachmentId: string | null;
   onOpenTurnDiff: (turnId: TurnId, filePath?: string) => void;
   onToggleTurnFold: (turnId: TurnId) => void;
   onToggleWorkGroup: (groupId: string, anchorKey: string) => void;
 @@ -232,7 +235,8 @@ interface MessagesTimelineProps {
   onRevertUserMessage: (messageId: MessageId) => void;
   isRevertingCheckpoint: boolean;
   onImageExpand: (preview: ExpandedImagePreview) => void;
-  onFileDownload?: (attachment: ChatFileAttachment) => void;
+  onFileOpen?: (attachment: ChatFileAttachment) => void;
+  openingVideoAttachmentId: string | null;
   activeThreadEnvironmentId: EnvironmentId;
   markdownCwd: string | undefined;
   resolvedTheme: "light" | "dark";
 @@ -278,7 +282,8 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   onRevertUserMessage,
   isRevertingCheckpoint,
   onImageExpand,
-  onFileDownload = NOOP_DOWNLOAD_ATTACHMENT,
+  onFileOpen = NOOP_OPEN_ATTACHMENT,
+  openingVideoAttachmentId,
   activeThreadEnvironmentId,
   markdownCwd,
   resolvedTheme,
 @@ -537,7 +542,8 @@ export const MessagesTimeline = memo(function MessagesTimeline({
       activeThreadEnvironmentId,
       onRevertUserMessage,
       onImageExpand,
-      onFileDownload,
+      onFileOpen,
+      openingVideoAttachmentId,
       onOpenTurnDiff,
       onToggleTurnFold,
       onToggleWorkGroup,
 @@ -554,7 +560,8 @@ export const MessagesTimeline = memo(function MessagesTimeline({
       activeThreadEnvironmentId,
       onRevertUserMessage,
       onImageExpand,
-      onFileDownload,
+      onFileOpen,
+      openingVideoAttachmentId,
       onOpenTurnDiff,
       onToggleTurnFold,
       onToggleWorkGroup,
 @@ -1005,6 +1012,8 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
   // comparisons) split it. Unknown types render as inert rows below the files.
   const userImages = (row.message.attachments ?? []).filter(isImageAttachment);
   const userFiles = (row.message.attachments ?? []).filter(isFileAttachment);
+  const userVideos = userFiles.filter(isVideoAttachment);
+  const otherUserFiles = userFiles.filter((file) => !isVideoAttachment(file));
   const unknownAttachments = (row.message.attachments ?? []).filter(
     (attachment) => !isImageAttachment(attachment) && !isFileAttachment(attachment),
   );
 @@ -1030,7 +1039,7 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
   return (
     <div className="group flex flex-col items-end gap-1">
       <div className="relative max-w-[80%] rounded-2xl bg-message p-3 text-message-foreground">
-        {regularImages.length > 0 && (
+        {(regularImages.length > 0 || userVideos.length > 0) && (
           <div className="mb-2 grid max-w-[420px] grid-cols-2 gap-2">
             {regularImages.map((image) => (
               <div
 @@ -1061,6 +1070,35 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
                 )}
               </div>
             ))}
+            {userVideos.map((file) => {
+              const isOpening = ctx.openingVideoAttachmentId === file.id;
+              return (
+                <div
+                  key={file.id}
+                  className="overflow-hidden rounded-lg border border-border/80 bg-black"
+                >
+                  <button
+                    type="button"
+                    disabled={file.downloadable === false}
+                    className="flex min-h-[72px] w-full cursor-zoom-in flex-col items-center justify-center gap-1 px-2 py-2 text-white disabled:cursor-default disabled:opacity-50 aria-disabled:cursor-default aria-disabled:opacity-50"
+                    aria-busy={isOpening || undefined}
+                    aria-disabled={isOpening || undefined}
+                    aria-label={`${isOpening ? "Loading" : "Play"} ${file.name}`}
+                    onClick={() => {
+                      if (isOpening) return;
+                      ctx.onFileOpen(file);
+                    }}
+                  >
+                    {isOpening ? (
+                      <span className="text-[11px]">Loading…</span>
+                    ) : (
+                      <PlayIcon className="size-8 fill-current" />
+                    )}
+                    <span className="max-w-full truncate text-[11px]">{file.name}</span>
+                  </button>
+                </div>
+              );
+            })}
           </div>
         )}
         {previewAnnotations.map((annotation, index) => (
 @@ -1070,9 +1108,9 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
             image={previewImages[index] ?? null}
           />
         ))}
-        {userFiles.length > 0 || unknownAttachments.length > 0 ? (
+        {otherUserFiles.length > 0 || unknownAttachments.length > 0 ? (
           <div className="mb-2 flex flex-col gap-1">
-            {userFiles.map((file) => {
+            {otherUserFiles.map((file) => {
               const content = (
                 <>
                   <FileIcon className="size-4 shrink-0 text-secondary-label" />
 @@ -1100,7 +1138,7 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
                   key={file.id}
                   type="button"
                   aria-label={`Download ${file.name}`}
-                  onClick={() => ctx.onFileDownload(file)}
+                  onClick={() => ctx.onFileOpen(file)}
                   className="flex min-w-0 cursor-pointer items-center gap-2 rounded-md py-1 text-left text-sm hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70"
                 >
                   {content}

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

...	@@ -2,12 +2,14 @@ import { EnvironmentId, PROVIDER_SEND_TURN_MAX_FILE_BYTES } from "@t3tools/contr	...	@@ -2,12 +2,14 @@ import { EnvironmentId, PROVIDER_SEND_TURN_MAX_FILE_BYTES } from "@t3tools/contr
2	import { describe, expect, it } from "vite-plus/test";	2	import { describe, expect, it } from "vite-plus/test";
3		3
4	import type { ComposerFileAttachment, ComposerImageAttachment } from "../../composerDraftStore";	4	import type { ComposerFileAttachment, ComposerImageAttachment } from "../../composerDraftStore";
		5	import { isVideoAttachment, videoMimeType } from "../../types";
5	import {	6	import {
6	attachmentsToReleaseOnUploadCapabilityLoss,	7	attachmentsToReleaseOnUploadCapabilityLoss,
7	classifyComposerAttachmentFile,	8	classifyComposerAttachmentFile,
8	fileAttachmentCapabilityBlockReason,	9	fileAttachmentCapabilityBlockReason,
9	fileAttachmentStagingLimit,	10	fileAttachmentStagingLimit,
10	inferImageMimeTypeFromName,	11	inferImageMimeTypeFromName,
		12	isPreviewableComposerVideo,
11	normalizeComposerImageFileMimeType,	13	normalizeComposerImageFileMimeType,
12	shouldHandleComposerAttachmentPaste,	14	shouldHandleComposerAttachmentPaste,
13	} from "./composerAttachmentFiles";	15	} from "./composerAttachmentFiles";
...	@@ -267,6 +269,48 @@ describe("composer attachment files", () => {	...	@@ -267,6 +269,48 @@ describe("composer attachment files", () => {
267	expect(released.map((attachment) => attachment.id)).toEqual(["image-1", "file-uploading"]);	269	expect(released.map((attachment) => attachment.id)).toEqual(["image-1", "file-uploading"]);
268	});	270	});
269		271
		272	it("keeps restored videos on the preview path in their upload environment", () => {
		273	const environmentId = EnvironmentId.make("environment-1");
		274	const video: ComposerFileAttachment = {
		275	type: "file",
		276	id: "video-1",
		277	name: "clip.mp4",
		278	mimeType: "video/mp4",
		279	sizeBytes: 3,
		280	file: null,
		281	uploadedAttachmentId: "uploaded-video-1",
		282	uploadEnvironmentId: environmentId,
		283	};
		284
		285	expect(isPreviewableComposerVideo(video, environmentId)).toBe(true);
		286	expect(isPreviewableComposerVideo(video, EnvironmentId.make("environment-2"))).toBe(false);
		287	});
		288
		289	it("recognizes common video extensions when the browser omits the MIME type", () => {
		290	const formats = [
		291	["clip.mp4", "video/mp4"],
		292	["clip.mov", "video/quicktime"],
		293	["clip.webm", "video/webm"],
		294	["clip.m4v", "video/mp4"],
		295	["clip.mkv", "video/x-matroska"],
		296	["clip.avi", "video/x-msvideo"],
		297	["clip.ogv", "video/ogg"],
		298	] as const;
		299
		300	for (const [name, expectedMimeType] of formats) {
		301	expect(
		302	isVideoAttachment({
		303	type: "file",
		304	id: name,
		305	name,
		306	mimeType: "application/octet-stream",
		307	sizeBytes: 1,
		308	}),
		309	).toBe(true);
		310	expect(videoMimeType({ name, mimeType: "application/octet-stream" })).toBe(expectedMimeType);
		311	}
		312	});
		313
270	it("claims image pastes even when clipboard text is present", () => {	314	it("claims image pastes even when clipboard text is present", () => {
271	const image = new File(["image"], "photo.heic", { type: "image/heic" });	315	const image = new File(["image"], "photo.heic", { type: "image/heic" });
272		316

apps/web/src/components/chat/composerAttachmentFiles.ts+13

 @@ -1,4 +1,5 @@
 import {
+  type EnvironmentId,
   isProviderSendTurnSupportedImageMimeType,
   PROVIDER_SEND_TURN_MAX_FILE_BYTES,
 } from "@t3tools/contracts";
 @@ -9,6 +10,7 @@ import {
 import type { ComposerFileAttachment, ComposerImageAttachment } from "../../composerDraftStore";
 import { isHeicImageFile } from "../../lib/imageCompression";
+import { isVideoAttachment } from "../../types";
 type ComposerAttachmentFileKind = "image" | "file" | "unsupported-image";
 @@ -75,6 +77,17 @@ export function classifyComposerAttachmentFile(
   return isProviderSendTurnSupportedImageMimeType(file.type) ? "image" : "unsupported-image";
 }
+export function isPreviewableComposerVideo(
+  file: ComposerFileAttachment,
+  environmentId: EnvironmentId,
+): boolean {
+  return (
+    isVideoAttachment(file) &&
+    (file.file !== null ||
+      (file.uploadedAttachmentId !== undefined && file.uploadEnvironmentId === environmentId))
+  );
+}
 /** Byte limit for adding a generic file to the local composer draft. */
 export function fileAttachmentStagingLimit(input: FileAttachmentCapabilityState): number | null {
   if (!input.attachmentUploadsCapabilityKnown) {

apps/web/src/components/pullRequest/PullRequestMarkdown.tsx+4-6

 @@ -10,12 +10,10 @@ import { splitPullRequestBody } from "./pullRequestMarkdown.logic";
  * A pull request body, rendered with the app's markdown renderer plus a card for each upload
  * embedded in it, which that renderer drops on the floor.
  *
- * The card links out instead of playing in place, because nothing here can play. A
+ * The card links out instead of playing in place. GitHub serves the file as uploaded — Mac
- * `github.com/user-attachments/assets/…` link is a 302 to a signed S3 URL that serves the file
+ * recordings are `video/quicktime`, which no Chromium decodes — and the desktop window's
- * as uploaded — `video/quicktime` for anything recorded on a Mac, which no Chromium decodes —
+ * `media-src` allows only `'self'`, the app scheme and `blob:`, so a remote source is refused
- * and the desktop window's content policy declares no `media-src`, so media falls back to
+ * before a byte is fetched. Opening the host works for every format.
- * `default-src 'self'` and every remote source is refused before a byte is fetched. A player
- * here can only be the box that never fills in; a card that opens the host is a real answer.
  */
 export function PullRequestMarkdown({
   text,

apps/web/src/composerDraftStore.test.ts+58

...	@@ -517,6 +517,34 @@ describe("composerDraftStore file attachments", () => {	...	@@ -517,6 +517,34 @@ describe("composerDraftStore file attachments", () => {
517	expect(files?.some(composerFileNeedsReattach)).toBe(false);	517	expect(files?.some(composerFileNeedsReattach)).toBe(false);
518	});	518	});
519		519
		520	it("replaces a legacy video marker after its MIME type is normalized", () => {
		521	const store = useComposerDraftStore.getState();
		522	const marker: ComposerFileAttachment = {
		523	type: "file",
		524	id: "file-marker",
		525	name: "clip.mkv",
		526	mimeType: "application/octet-stream",
		527	sizeBytes: 6,
		528	file: null,
		529	};
		530	store.addFiles(threadRef, [marker]);
		531
		532	const file = new File(["report"], marker.name, { type: "video/x-matroska" });
		533	const repicked: ComposerFileAttachment = {
		534	type: "file",
		535	id: "file-repicked",
		536	name: file.name,
		537	mimeType: file.type,
		538	sizeBytes: file.size,
		539	file,
		540	};
		541	store.addFiles(threadRef, [repicked, { ...repicked, id: "file-repicked-duplicate" }]);
		542
		543	const files = store.getComposerDraft(threadRef)?.files;
		544	expect(files?.map((entry) => entry.id)).toEqual(["file-repicked"]);
		545	expect(files?.some(composerFileNeedsReattach)).toBe(false);
		546	});
		547
520	it("replaces a needs-reattach marker with a stash-restored uploaded file", () => {	548	it("replaces a needs-reattach marker with a stash-restored uploaded file", () => {
521	const store = useComposerDraftStore.getState();	549	const store = useComposerDraftStore.getState();
522	const marker: ComposerFileAttachment = { ...makeFile("file-marker"), file: null };	550	const marker: ComposerFileAttachment = { ...makeFile("file-marker"), file: null };
...	@@ -553,6 +581,36 @@ describe("composerDraftStore file attachments", () => {	...	@@ -553,6 +581,36 @@ describe("composerDraftStore file attachments", () => {
553	]);	581	]);
554	});	582	});
555		583
		584	it("keeps same-name videos with different MIME types", () => {
		585	const store = useComposerDraftStore.getState();
		586	const mp4 = new File(["report"], "clip", { type: "video/mp4" });
		587	const webm = new File(["report"], "clip", { type: "video/webm" });
		588
		589	store.addFiles(threadRef, [
		590	{
		591	type: "file",
		592	id: "video-mp4",
		593	name: mp4.name,
		594	mimeType: mp4.type,
		595	sizeBytes: mp4.size,
		596	file: mp4,
		597	},
		598	{
		599	type: "file",
		600	id: "video-webm",
		601	name: webm.name,
		602	mimeType: webm.type,
		603	sizeBytes: webm.size,
		604	file: webm,
		605	},
		606	]);
		607
		608	expect(store.getComposerDraft(threadRef)?.files.map((file) => file.id)).toEqual([
		609	"video-mp4",
		610	"video-webm",
		611	]);
		612	});
		613
556	it("keeps the remaining file slot available after a duplicate is skipped", () => {	614	it("keeps the remaining file slot available after a duplicate is skipped", () => {
557	const store = useComposerDraftStore.getState();	615	const store = useComposerDraftStore.getState();
558	store.addImages(	616	store.addImages(

apps/web/src/composerDraftStore.ts+36-18

 @@ -39,6 +39,7 @@ import {
   DEFAULT_RUNTIME_MODE,
   type ChatFileAttachment,
   type ChatImageAttachment,
+  videoMimeType,
 } from "./types";
 import {
   type TerminalContextDraft,
 @@ -745,6 +746,26 @@ function composerImageDedupKey(image: ComposerImageAttachment): string {
   return `${image.mimeType}\u0000${image.sizeBytes}\u0000${image.name}`;
 }
+export function composerFileDedupKey(
+  file: Pick<ComposerFileAttachment, "mimeType" | "sizeBytes" | "name">,
+): string {
+  return `${file.mimeType}\u0000${file.sizeBytes}\u0000${file.name}`;
+}
+export function composerFileMatchesReattachMarker(
+  marker: Pick<ComposerFileAttachment, "mimeType" | "sizeBytes" | "name">,
+  file: Pick<ComposerFileAttachment, "mimeType" | "sizeBytes" | "name">,
+): boolean {
+  if (marker.name !== file.name || marker.sizeBytes !== file.sizeBytes) return false;
+  if (marker.mimeType === file.mimeType) return true;
+  const markerMimeType = marker.mimeType.toLowerCase();
+  return (
+    (markerMimeType === "" || markerMimeType === "application/octet-stream") &&
+    videoMimeType(marker) !== null &&
+    videoMimeType(file) !== null
+  );
+}
 function terminalContextDedupKey(context: TerminalContextDraft): string {
   return `${context.terminalId}\u0000${context.lineStart}\u0000${context.lineEnd}`;
 }
 @@ -3189,29 +3210,32 @@ const composerDraftStore = create<ComposerDraftStoreState>()(
             const existing = state.draftsByThreadKey[threadKey] ?? createEmptyThreadDraft();
             const knownIds = new Set(existing.files.map((file) => file.id));
             const knownFiles = new Map<string, ComposerFileAttachment>(
-              existing.files.map((file) => [
+              existing.files.map((file) => [composerFileDedupKey(file), file]),
-                `${file.mimeType}\u0000${file.sizeBytes}\u0000${file.name}`,
-                file,
-              ]),
             );
             const accepted: ComposerFileAttachment[] = [];
             // Needs-reattach markers replaced in place by a re-pick, keyed by
             // the marker's id.
             const replacements = new Map<string, ComposerFileAttachment>();
             for (const file of files) {
-              const key = `${file.mimeType}\u0000${file.sizeBytes}\u0000${file.name}`;
+              const key = composerFileDedupKey(file);
               if (knownIds.has(file.id)) {
                 continue;
               }
-              const duplicate = knownFiles.get(key);
+              const duplicate =
+                knownFiles.get(key) ??
+                existing.files.find(
+                  (candidate) =>
+                    composerFileNeedsReattach(candidate) &&
+                    !replacements.has(candidate.id) &&
+                    composerFileMatchesReattachMarker(candidate, file),
+                );
               if (duplicate) {
-                // A needs-reattach marker persists exactly the metadata this
+                // A needs-reattach marker is not a usable duplicate. Replace
-                // key hashes, so re-picking the same file matches its marker.
+                // it so the upload restarts.
-                // Dropping the pick as a duplicate would leave the draft
-                // blocked forever; replace the marker so the upload restarts.
                 if (composerFileNeedsReattach(duplicate) && !replacements.has(duplicate.id)) {
                   replacements.set(duplicate.id, file);
                   knownIds.add(file.id);
+                  knownFiles.set(key, file);
                 }
                 continue;
               }
 @@ -3802,18 +3826,12 @@ const composerDraftStore = create<ComposerDraftStoreState>()(
             // A file the destination already holds (same id, or same
             // metadata key) stays behind instead of duplicating there.
             const destinationFileIds = new Set(destination.files.map((file) => file.id));
-            const destinationFileKeys = new Set(
+            const destinationFileKeys = new Set(destination.files.map(composerFileDedupKey));
-              destination.files.map(
-                (file) => `${file.mimeType}\u0000${file.sizeBytes}\u0000${file.name}`,
-              ),
-            );
             const transferableFiles = source.files.filter(
               (file) =>
                 (file.file !== null || file.uploadEnvironmentId === destinationEnvironmentId) &&
                 !destinationFileIds.has(file.id) &&
-                !destinationFileKeys.has(
+                !destinationFileKeys.has(composerFileDedupKey(file)),
-                  `${file.mimeType}\u0000${file.sizeBytes}\u0000${file.name}`,
-                ),
             );
             const remainingAttachmentSlots = Math.max(
               0,

apps/web/src/types.ts+25

...	@@ -59,6 +59,31 @@ export function isFileAttachment(attachment: ChatAttachment): attachment is Chat	...	@@ -59,6 +59,31 @@ export function isFileAttachment(attachment: ChatAttachment): attachment is Chat
59	return attachment.type === "file";	59	return attachment.type === "file";
60	}	60	}
61		61
		62	const VIDEO_MIME_TYPE_BY_EXTENSION: Readonly<Record<string, string>> = {
		63	avi: "video/x-msvideo",
		64	m4v: "video/mp4",
		65	mkv: "video/x-matroska",
		66	mov: "video/quicktime",
		67	mp4: "video/mp4",
		68	ogv: "video/ogg",
		69	webm: "video/webm",
		70	};
		71
		72	export function videoMimeType(
		73	attachment: Pick<ChatFileAttachment, "name" \| "mimeType">,
		74	): string \| null {
		75	const mimeType = attachment.mimeType.split(";", 1)[0]?.trim().toLowerCase() ?? "";
		76	if (mimeType.startsWith("video/")) return mimeType;
		77	const dotIndex = attachment.name.lastIndexOf(".");
		78	return dotIndex < 0
		79	? null
		80	: (VIDEO_MIME_TYPE_BY_EXTENSION[attachment.name.slice(dotIndex + 1).toLowerCase()] ?? null);
		81	}
		82
		83	export function isVideoAttachment(attachment: ChatFileAttachment): boolean {
		84	return videoMimeType(attachment) !== null;
		85	}
		86
62	export interface ChatMessage extends Omit<OrchestrationMessage, "attachments"> {	87	export interface ChatMessage extends Omit<OrchestrationMessage, "attachments"> {
63	readonly attachments?: ReadonlyArray<ChatAttachment> \| undefined;	88	readonly attachments?: ReadonlyArray<ChatAttachment> \| undefined;
64	}	89	}

docs/user/composer.md+3

...	@@ -13,6 +13,9 @@ On web and desktop, attachments upload as soon as you add them. The send button	...	@@ -13,6 +13,9 @@ On web and desktop, attachments upload as soon as you add them. The send button
13	after every upload finishes. Failed uploads can be retried or removed. On mobile, attachments are	13	after every upload finishes. Failed uploads can be retried or removed. On mobile, attachments are
14	currently limited to images.	14	currently limited to images.
15		15
		16	Select a video attachment before or after sending to play it with the browser's built-in controls.
		17	Playback depends on the video formats and codecs that the browser supports.
		18
16	If you reload before a file finishes uploading, the draft keeps the file's name and shows **Attach	19	If you reload before a file finishes uploading, the draft keeps the file's name and shows **Attach
17	again** next to it. Attach the file again or remove it, then send.	20	again** next to it. Attach the file again or remove it, then send.
18		21

author	Bilal Bakr <62337003+Bil0000@users.noreply.github.com> 2026-08-30 22:58:35+03:00
committer	GitHub <noreply@github.com> 2026-08-30 12:58:35-07:00
log	ac4aae101d060b5355a5de58e23c7387886d9021
tree	57674b33c41cf7a1bc4f319e6329ca90e1d23c84
parent	f15680bd3c08a154bacb9b4d163cc8608a310970
signature	Signed by PGP key B5690EEEBB952194

feat(web): play video attachments in chat (#8688)