Commit 922bd692251bc803c12a3fab159efe83c957bb70 | the-knife

apps/mobile/modules/t3-markdown-text/src/markdownLinks.ts+13-143

...	@@ -1,31 +1,15 @@	...	@@ -1,31 +1,15 @@
1	import {	1	import {
		2	fileBasename,
		3	formatFilePathPosition,
2	inlineCodeFilePathCandidate,	4	inlineCodeFilePathCandidate,
3	isConventionalFilePosition,	5	normalizeMarkdownLinkDestination,
		6	parseMarkdownFileLink,
4	} from "@t3tools/client-runtime/markdown-links";	7	} from "@t3tools/client-runtime/markdown-links";
5	import { videoMimeType } from "@t3tools/shared/video";	8	import { videoMimeType } from "@t3tools/shared/video";
6		9
7	import type { MARKDOWN_FILE_ICON_SOURCES } from "./markdownFileIcons.generated";	10	import type { MARKDOWN_FILE_ICON_SOURCES } from "./markdownFileIcons.generated";
8		11
9	const WINDOWS_DRIVE_PATH_PATTERN = /^[A-Za-z]:[\\/]/;
10	const WINDOWS_UNC_PATH_PATTERN = /^\\\\/;
11	const RELATIVE_PATH_PREFIX_PATTERN = /^(~\/\|\.{1,2}\/)/;
12	const RELATIVE_FILE_PATH_PATTERN =
13	/^(?:[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)\/)+[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)(?::\d+){0,2}$/;
14	const RELATIVE_FILE_NAME_PATTERN =
15	/^[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)*\.[A-Za-z0-9_-]+(?::\d+){0,2}$/;
16	const POSITION_SUFFIX_PATTERN = /:\d+(?::\d+)?$/;	12	const POSITION_SUFFIX_PATTERN = /:\d+(?::\d+)?$/;
17	const POSIX_FILE_ROOT_PREFIXES = [
18	"/Users/",
19	"/home/",
20	"/tmp/",
21	"/var/",
22	"/etc/",
23	"/opt/",
24	"/mnt/",
25	"/Volumes/",
26	"/private/",
27	"/root/",
28	] as const;
29		13
30	export type MarkdownLinkPresentation =	14	export type MarkdownLinkPresentation =
31	\| {	15	\| {
...	@@ -246,112 +230,13 @@ const FILE_ICON_BY_EXTENSION: Readonly<Record<string, MarkdownFileIcon>> = {	...	@@ -246,112 +230,13 @@ const FILE_ICON_BY_EXTENSION: Readonly<Record<string, MarkdownFileIcon>> = {
246	zsh: "bash",	230	zsh: "bash",
247	};	231	};
248		232
249	function safeDecode(value: string): string {
250	try {
251	return decodeURIComponent(value);
252	} catch {
253	return value;
254	}
255	}
256
257	function normalizeDestination(value: string): string {
258	const trimmed = value.trim();
259	return trimmed.startsWith("<") && trimmed.endsWith(">") ? trimmed.slice(1, -1) : trimmed;
260	}
261
262	/** Native link and media APIs have no document scheme to inherit from protocol-relative URLs. */	233	/** Native link and media APIs have no document scheme to inherit from protocol-relative URLs. */
263	export function normalizeNativeMarkdownUrl(value: string): string {	234	export function normalizeNativeMarkdownUrl(value: string): string {
264	return value.startsWith("//") ? `https:${value}` : value;	235	return value.startsWith("//") ? `https:${value}` : value;
265	}	236	}
266		237
267	function fileUrlTarget(href: string): { readonly path: string; readonly hash: string } \| null {
268	try {
269	const parsed = new URL(href);
270	if (parsed.protocol.toLowerCase() !== "file:") {
271	return null;
272	}
273	const uncHostname = parsed.hostname.toLowerCase() === "localhost" ? "" : parsed.hostname;
274	const rawPath = uncHostname
275	? `\\\\${uncHostname}${parsed.pathname.replaceAll("/", "\\")}`
276	: parsed.pathname;
277	const path = /^\/[A-Za-z]:[\\/]/.test(rawPath) ? rawPath.slice(1) : rawPath;
278	return { path, hash: parsed.hash };
279	} catch {
280	return null;
281	}
282	}
283
284	function stripSearchAndHash(value: string): { readonly path: string; readonly hash: string } {
285	const hashIndex = value.indexOf("#");
286	const pathWithSearch = hashIndex >= 0 ? value.slice(0, hashIndex) : value;
287	const hash = hashIndex >= 0 ? value.slice(hashIndex) : "";
288	const queryIndex = pathWithSearch.indexOf("?");
289	return {
290	path: queryIndex >= 0 ? pathWithSearch.slice(0, queryIndex) : pathWithSearch,
291	hash,
292	};
293	}
294
295	function splitFilePosition(
296	path: string,
297	hash: string,
298	): { readonly path: string; readonly line?: number; readonly column?: number } {
299	const suffixMatch = path.match(/:(\d+)(?::(\d+))?$/);
300	const hashMatch = suffixMatch ? null : hash.match(/^#L(\d+)(?:C(\d+))?$/i);
301	const match = suffixMatch ?? hashMatch;
302	if (!match?.[1]) {
303	return { path };
304	}
305
306	const line = Number.parseInt(match[1], 10);
307	const column = match[2] ? Number.parseInt(match[2], 10) : undefined;
308	const pathWithoutPosition = suffixMatch ? path.slice(0, -suffixMatch[0].length) : path;
309	return {
310	path: pathWithoutPosition,
311	...(line > 0 ? { line } : {}),
312	...(column !== undefined && column > 0 ? { column } : {}),
313	};
314	}
315
316	function looksLikePosixFilesystemPath(path: string): boolean {
317	if (!path.startsWith("/")) {
318	return false;
319	}
320	if (POSIX_FILE_ROOT_PREFIXES.some((prefix) => path.startsWith(prefix))) {
321	return true;
322	}
323	if (POSITION_SUFFIX_PATTERN.test(path)) {
324	return true;
325	}
326	const basename = path.slice(path.lastIndexOf("/") + 1);
327	return /\.[A-Za-z0-9_-]+$/.test(basename);
328	}
329
330	function looksLikeFilePath(value: string): boolean {
331	if (WINDOWS_DRIVE_PATH_PATTERN.test(value) \|\| WINDOWS_UNC_PATH_PATTERN.test(value)) {
332	return true;
333	}
334	if (RELATIVE_PATH_PREFIX_PATTERN.test(value)) {
335	return true;
336	}
337	if (value.startsWith("/")) {
338	return looksLikePosixFilesystemPath(value);
339	}
340	if (FILE_ICON_BY_NAME[value.replace(POSITION_SUFFIX_PATTERN, "").toLowerCase()]) {
341	return true;
342	}
343	if (isConventionalFilePosition(value)) return true;
344	return RELATIVE_FILE_PATH_PATTERN.test(value) \|\| RELATIVE_FILE_NAME_PATTERN.test(value);
345	}
346
347	function fileLabel(value: string): string {
348	const normalized = value.replaceAll("\\", "/");
349	const basename = normalized.slice(normalized.lastIndexOf("/") + 1);
350	return basename \|\| normalized;
351	}
352
353	export function resolveMarkdownFileIcon(value: string): MarkdownFileIcon {	238	export function resolveMarkdownFileIcon(value: string): MarkdownFileIcon {
354	const basename = fileLabel(value).replace(POSITION_SUFFIX_PATTERN, "").toLowerCase();	239	const basename = fileBasename(value).replace(POSITION_SUFFIX_PATTERN, "").toLowerCase();
355	if (videoMimeType({ name: basename, mimeType: "" }) !== null) return "video";	240	if (videoMimeType({ name: basename, mimeType: "" }) !== null) return "video";
356	const exactIcon = FILE_ICON_BY_NAME[basename];	241	const exactIcon = FILE_ICON_BY_NAME[basename];
357	if (exactIcon) return exactIcon;	242	if (exactIcon) return exactIcon;
...	@@ -367,7 +252,7 @@ export function resolveMarkdownFileIcon(value: string): MarkdownFileIcon {	...	@@ -367,7 +252,7 @@ export function resolveMarkdownFileIcon(value: string): MarkdownFileIcon {
367	}	252	}
368		253
369	export function resolveMarkdownLinkPresentation(href: string): MarkdownLinkPresentation {	254	export function resolveMarkdownLinkPresentation(href: string): MarkdownLinkPresentation {
370	const normalized = normalizeDestination(href);	255	const normalized = normalizeMarkdownLinkDestination(href);
371	try {	256	try {
372	const parsed = new URL(normalizeNativeMarkdownUrl(normalized));	257	const parsed = new URL(normalizeNativeMarkdownUrl(normalized));
373	if (parsed.protocol === "http:" \|\| parsed.protocol === "https:") {	258	if (parsed.protocol === "http:" \|\| parsed.protocol === "https:") {
...	@@ -381,31 +266,16 @@ export function resolveMarkdownLinkPresentation(href: string): MarkdownLinkPrese	...	@@ -381,31 +266,16 @@ export function resolveMarkdownLinkPresentation(href: string): MarkdownLinkPrese
381	// Relative paths and non-URL link destinations are handled below.	266	// Relative paths and non-URL link destinations are handled below.
382	}	267	}
383		268
384	const source = normalized.toLowerCase().startsWith("file:")	269	const target = parseMarkdownFileLink(normalized);
385	? fileUrlTarget(normalized)	270	if (target) {
386	: stripSearchAndHash(normalized);
387	const decodedSource = source
388	? { path: safeDecode(source.path.trim()), hash: safeDecode(source.hash.trim()) }
389	: null;
390	const fileTarget = decodedSource
391	? splitFilePosition(decodedSource.path, decodedSource.hash)
392	: null;
393	const targetWithPosition = fileTarget
394	? `${fileTarget.path}${
395	fileTarget.line
396	? `:${fileTarget.line}${fileTarget.column ? `:${fileTarget.column}` : ""}`
397	: ""
398	}`
399	: null;
400	if (fileTarget && targetWithPosition && looksLikeFilePath(targetWithPosition)) {
401	return {	271	return {
402	kind: "file",	272	kind: "file",
403	href: normalized,	273	href: normalized,
404	icon: resolveMarkdownFileIcon(fileTarget.path),	274	icon: resolveMarkdownFileIcon(target.path),
405	label: fileLabel(targetWithPosition),	275	label: fileBasename(formatFilePathPosition(target)),
406	path: fileTarget.path,	276	path: target.path,
407	...(fileTarget.line ? { line: fileTarget.line } : {}),	277	...(target.line ? { line: target.line } : {}),
408	...(fileTarget.column ? { column: fileTarget.column } : {}),	278	...(target.column ? { column: target.column } : {}),
409	};	279	};
410	}	280	}
411		281

apps/mobile/modules/t3-native-controls/ios/T3NativeFilePresentation.swift+2

...	@@ -144,6 +144,8 @@ final class T3NativeFilePresentation: NSObject, QLPreviewControllerDataSource,	...	@@ -144,6 +144,8 @@ final class T3NativeFilePresentation: NSObject, QLPreviewControllerDataSource,
144	type = detectedType	144	type = detectedType
145	} else if CGPDFDocument(download as CFURL) != nil {	145	} else if CGPDFDocument(download as CFURL) != nil {
146	type = .pdf	146	type = .pdf
		147	} else if URL(fileURLWithPath: title).pathExtension.lowercased() == "svg" {
		148	type = .svg
147	} else {	149	} else {
148	throw URLError(.cannotDecodeContentData)	150	throw URLError(.cannotDecodeContentData)
149	}	151	}

apps/mobile/src/components/ComposerAttachmentStrip.tsx+12-43

 @@ -1,12 +1,12 @@
 import { SymbolView } from "../components/AppSymbol";
 import { videoMimeType } from "@t3tools/shared/video";
-import { useEffect, useRef, useState } from "react";
+import { useMemo } from "react";
-import { Alert, Image, Pressable, ScrollView, View } from "react-native";
+import { Image, Pressable, ScrollView, View } from "react-native";
 import { AppText as Text } from "./AppText";
 import type { DraftComposerAttachment, DraftComposerFileAttachment } from "../lib/composerImages";
 import { VideoAttachmentTile } from "./VideoAttachmentTile";
-import { loadLocalAttachmentPreview } from "../lib/localAttachmentPreview";
+import type { MediaActionsSource } from "../lib/mediaActions";
 import { PresentationSource } from "./NativePresentation";
 import type { FilePreviewSource } from "./FilePreviewModal";
 import { isPdfFile } from "../lib/filePreview";
 @@ -175,46 +175,16 @@ function ComposerVideoAttachment(props: {
   const { attachment } = props;
   const sourceIdentifier = `draft:${attachment.id}`;
   const style = { width: props.size, height: props.size, borderRadius: props.borderRadius };
-  const shareRef = useRef<AbortController | null>(null);
+  const actionsSource = useMemo<MediaActionsSource>(
-  const [sharing, setSharing] = useState(false);
+    () => ({
-  useEffect(
+      name: attachment.name,
-    () => () => {
+      mimeType: videoMimeType(attachment) ?? attachment.mimeType,
-      shareRef.current?.abort();
+      sourceIdentifier,
-      shareRef.current = null;
+      attachment,
-    },
+    }),
-    [],
+    [attachment, sourceIdentifier],
   );
-  const onShare = () => {
-    if (shareRef.current) return;
-    const controller = new AbortController();
-    shareRef.current = controller;
-    setSharing(true);
-    void (async () => {
-      const preview = await loadLocalAttachmentPreview(attachment, controller.signal);
-      if (!preview) return;
-      try {
-        await preview.share(controller.signal, sourceIdentifier);
-      } finally {
-        preview.dispose();
-      }
-    })()
-      .catch((error: unknown) => {
-        if (!controller.signal.aborted) {
-          Alert.alert(
-            "Could not share video",
-            error instanceof Error ? error.message : "Try again.",
-          );
-        }
-      })
-      .finally(() => {
-        if (shareRef.current === controller) {
-          shareRef.current = null;
-          setSharing(false);
-        }
-      });
-  };
   return (
     <VideoAttachmentTile
       name={attachment.name}
 @@ -222,8 +192,7 @@ function ComposerVideoAttachment(props: {
       thumbnailSource={attachment}
       compact={props.compact}
       onPress={() => props.onPressVideo(attachment, sourceIdentifier)}
-      onShare={onShare}
+      actionsSource={actionsSource}
-      disabled={sharing}
       style={style}
     />
   );

apps/mobile/src/components/FilePreview.ios.tsx+1-6

...	@@ -3,7 +3,6 @@ import { useEffect, useEffectEvent, useId } from "react";	...	@@ -3,7 +3,6 @@ import { useEffect, useEffectEvent, useId } from "react";
3	import { Alert } from "react-native";	3	import { Alert } from "react-native";
4		4
5	import type { ResolvedFilePreviewSource } from "./FilePreviewModal";	5	import type { ResolvedFilePreviewSource } from "./FilePreviewModal";
6	import { MediaImagePreview } from "./MediaImagePreview";
7		6
8	const NativeControls = requireNativeModule<{	7	const NativeControls = requireNativeModule<{
9	presentFile(	8	presentFile(
...	@@ -47,9 +46,5 @@ export function FilePreview(props: {	...	@@ -47,9 +46,5 @@ export function FilePreview(props: {
47	readonly source: ResolvedFilePreviewSource;	46	readonly source: ResolvedFilePreviewSource;
48	readonly onRequestClose: () => void;	47	readonly onRequestClose: () => void;
49	}) {	48	}) {
50	return props.source.kind === "image" && props.source.actionsSource ? (	49	return <NativeFilePreview {...props} />;
51	<MediaImagePreview {...props} />
52	) : (
53	<NativeFilePreview {...props} />
54	);
55	}	50	}

apps/mobile/src/components/MediaActionsMenu.tsx+3-1

apps/mobile/src/components/MediaImagePreview.tsx+1-1

...	@@ -42,7 +42,7 @@ function ImagePreviewHeader() {	...	@@ -42,7 +42,7 @@ function ImagePreviewHeader() {
42	);	42	);
43	}	43	}
44		44
45	/** Chat and workspace media retain source actions on both platforms; other files use native previews. */	45	/** Android keeps media actions in its in-app image viewer. iOS uses Quick Look. */
46	export function MediaImagePreview(props: MediaImagePreviewProps) {	46	export function MediaImagePreview(props: MediaImagePreviewProps) {
47	return (	47	return (
48	<ImagePreviewContext value={props}>	48	<ImagePreviewContext value={props}>

apps/mobile/src/components/MediaVideoPlayer.tsx+35-46

 @@ -101,8 +101,8 @@ interface MediaVideoPlayerProps {
   readonly thumbnailVisible?: boolean;
   readonly unavailable?: boolean;
   readonly expanded?: boolean;
+  readonly autoPlay?: boolean;
   readonly paused?: boolean;
-  readonly onExpand?: () => void;
   readonly actionsSource?: MediaActionsSource;
 }
 @@ -122,62 +122,51 @@ function MediaVideoPlayerContent(props: MediaVideoPlayerProps) {
         <LoadedMediaVideo
           uri={props.uri ?? playbackUri}
           resolvePlaybackUri={props.resolvePlaybackUri}
-          playRequested={!props.expanded}
+          playRequested={!props.expanded || props.autoPlay === true}
           paused={(props.paused ?? false) || mediaActions.sharing}
         />
       ) : (
-        <Pressable
+        <MediaActionsMenu media={mediaActions} inModal={props.expanded} style={{ flex: 1 }}>
-          accessibilityRole="button"
+          <Pressable
-          accessibilityLabel={`Play ${props.name}`}
+            accessibilityRole="button"
-          accessibilityState={{ disabled: props.uri === null || props.unavailable === true }}
+            accessibilityLabel={`Play ${props.name}`}
-          disabled={props.uri === null || props.unavailable === true}
+            accessibilityHint={
-          onPress={() => setPlaybackUri(props.uri)}
+              mediaActions.actions.length > 0 ? "Touch and hold for media actions" : undefined
-          className="flex-1 items-center justify-center gap-2 px-4"
+            }
-        >
+            accessibilityState={{ disabled: props.uri === null || props.unavailable === true }}
-          {!props.unavailable ? (
+            // Stays pressable so the long-press menu still opens on a failed or unsigned tile.
-            <VideoThumbnailImage
+            onPress={() => {
-              cacheKey={props.thumbnailKey}
+              if (props.uri !== null && !props.unavailable) setPlaybackUri(props.uri);
-              source={props.thumbnailVisible === false ? null : props.uri}
+            }}
-              contentFit="contain"
+            className="flex-1 items-center justify-center px-4"
-            />
+          >
-          ) : null}
+            {!props.unavailable ? (
-          {props.unavailable ? (
+              <VideoThumbnailImage
-            <AppText className="text-sm text-white/80">Video unavailable</AppText>
+                cacheKey={props.thumbnailKey}
-          ) : props.uri === null ? (
+                source={props.thumbnailVisible === false ? null : props.uri}
-            <ActivityIndicator color="#ffffff" accessibilityLabel="Loading video" />
+                contentFit="contain"
-          ) : (
+              />
-            <>
+            ) : null}
+            {props.unavailable ? (
+              <AppText className="text-sm text-white/80">Video unavailable</AppText>
+            ) : props.uri === null ? (
+              <ActivityIndicator color="#ffffff" accessibilityLabel="Loading video" />
+            ) : (
               <View className="size-12 items-center justify-center rounded-full bg-black/60">
                 <SymbolView name="play" size={28} tintColor="#ffffff" type="monochrome" />
               </View>
+            )}
+            {props.uri !== null && !props.unavailable ? (
               <AppText
-                className="rounded bg-black/60 px-2 py-1 text-center text-xs text-white"
+                className="absolute right-2 bottom-2 max-w-[75%] rounded bg-black/60 px-2 py-1 text-right text-xs text-white"
-                numberOfLines={2}
+                numberOfLines={1}
               >
                 {props.name}
               </AppText>
-            </>
+            ) : null}
-          )}
+          </Pressable>
-        </Pressable>
+        </MediaActionsMenu>
       )}
-      {props.onExpand ? (
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={`Expand ${props.name}`}
-          onPress={() => {
-            setPlaybackUri(null);
-            props.onExpand?.();
-          }}
-          className="absolute right-1 top-1 min-h-11 min-w-11 items-center justify-center rounded-md bg-black/60 px-2"
-        >
-          <AppText className="text-xs text-white">Expand</AppText>
-        </Pressable>
-      ) : null}
-      {props.actionsSource ? (
-        <View className="absolute left-1 top-1">
-          <MediaActionsMenu media={mediaActions} inModal={props.expanded} />
-        </View>
-      ) : null}
     </View>
   );
 }

apps/mobile/src/components/MediaVideoPreviewModal.tsx deleted-96

...	@@ -1,96 +0,0 @@
1	import { useEffect } from "react";
2	import { Keyboard, Modal, Pressable, View } from "react-native";
3	import { useSafeAreaInsets } from "react-native-safe-area-context";
4
5	import { useMediaActions } from "../lib/mediaActions";
6	import { MediaActionsMenu } from "./MediaActionsMenu";
7	import {
8	mediaVideoPreviewUri,
9	mediaVideoThumbnailKey,
10	type MediaVideoPreviewSource,
11	} from "../lib/videoPreviewSource";
12	import { useAssetUrlState, useRefreshAssetUrl } from "../state/assets";
13	import { usePreparedConnection } from "../state/session";
14	import { AppText } from "./AppText";
15	import { SymbolView } from "./AppSymbol";
16	import { MediaVideoPlayer } from "./MediaVideoPlayer";
17	import { MediaSourceCaption } from "./MediaSourceCaption";
18
19	/** Media files stream in place. A client-side copy is made only for an explicit share. */
20	export function MediaVideoPreviewModal(props: {
21	readonly source: MediaVideoPreviewSource;
22	readonly onRequestClose: () => void;
23	}) {
24	const { source } = props;
25	const insets = useSafeAreaInsets();
26	const environmentId = "environmentId" in source ? source.environmentId : null;
27	const connection = usePreparedConnection(environmentId);
28	const asset = useAssetUrlState(environmentId, "resource" in source ? source.resource : null);
29	const refreshAssetUrl = useRefreshAssetUrl(
30	environmentId,
31	"resource" in source ? source.resource : null,
32	);
33	const resolvePlaybackUri =
34	"resource" in source
35	? async () => mediaVideoPreviewUri(source, await refreshAssetUrl())
36	: undefined;
37	const uri = mediaVideoPreviewUri(source, asset._tag === "Success" ? asset.url : null);
38	const mediaActions = useMediaActions(source.actionsSource, props.onRequestClose);
39	const unavailable =
40	uri === null &&
41	environmentId !== null &&
42	(connection._tag === "None" \|\| asset._tag === "Failure");
43
44	useEffect(() => Keyboard.dismiss(), []);
45	return (
46	<Modal
47	visible
48	animationType="fade"
49	presentationStyle="fullScreen"
50	onRequestClose={props.onRequestClose}
51	statusBarTranslucent
52	navigationBarTranslucent
53	>
54	<View
55	className="flex-1 bg-black"
56	style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
57	>
58	<View className="min-h-14 flex-row items-center gap-3 pl-4 pr-2">
59	<AppText className="flex-1 font-t3-medium text-base text-white" numberOfLines={2}>
60	{source.name}
61	</AppText>
62	<MediaActionsMenu media={mediaActions} inModal />
63	<Pressable
64	accessibilityRole="button"
65	accessibilityLabel="Close video"
66	onPress={props.onRequestClose}
67	className="size-12 items-center justify-center"
68	>
69	<SymbolView name="xmark" size={20} tintColor="#ffffff" type="monochrome" />
70	</Pressable>
71	</View>
72	<MediaSourceCaption source={mediaActions.title} />
73	<MediaVideoPlayer
74	uri={uri}
75	resolvePlaybackUri={resolvePlaybackUri}
76	name={source.name}
77	thumbnailKey={mediaVideoThumbnailKey(source)}
78	unavailable={unavailable}
79	paused={mediaActions.sharing}
80	expanded
81	/>
82	<Pressable
83	accessibilityRole="button"
84	accessibilityLabel="Save or share video"
85	disabled={uri === null \|\| mediaActions.sharing}
86	onPress={mediaActions.share}
87	className="mx-4 my-3 min-h-12 items-center justify-center rounded-xl bg-white/15 px-4"
88	>
89	<AppText className="font-t3-medium text-base text-white">
90	{mediaActions.sharing ? "Opening share sheet..." : "Save or share video"}
91	</AppText>
92	</Pressable>
93	</View>
94	</Modal>
95	);
96	}

apps/mobile/src/components/VideoAttachmentMenu.tsx deleted-53

...	@@ -1,53 +0,0 @@
1	import type { ReactElement } from "react";
2	import { Platform, type PressableProps } from "react-native";
3
4	import { ControlPillMenu } from "./ControlPill";
5	import { PresentationSource } from "./NativePresentation";
6
7	export function VideoAttachmentMenu(props: {
8	readonly sourceIdentifier: string;
9	readonly onOpen: () => void;
10	readonly onShare?: () => void;
11	readonly disabled?: boolean;
12	readonly children: ReactElement<PressableProps>;
13	}) {
14	return (
15	<PresentationSource
16	identifier={props.sourceIdentifier}
17	accessible={Platform.OS === "ios"}
18	accessibilityRole="button"
19	accessibilityLabel={props.children.props.accessibilityLabel}
20	accessibilityHint={props.children.props.accessibilityHint}
21	accessibilityState={{ disabled: props.disabled ?? false }}
22	onAccessibilityTap={() => {
23	if (!props.disabled) props.onOpen();
24	}}
25	accessibilityActions={props.onShare ? [{ name: "share", label: "Save or share video" }] : []}
26	onAccessibilityAction={({ nativeEvent }) => {
27	if (nativeEvent.actionName === "share" && !props.disabled) props.onShare?.();
28	}}
29	>
30	{Platform.OS === "ios" && props.onShare ? (
31	<ControlPillMenu
32	shouldOpenOnLongPress
33	style={{ alignSelf: "flex-start" }}
34	actions={[
35	{
36	id: "share",
37	title: "Save or share video",
38	image: "square.and.arrow.up",
39	attributes: { disabled: props.disabled ?? false },
40	},
41	]}
42	onPressAction={({ nativeEvent }) => {
43	if (nativeEvent.event === "share") props.onShare?.();
44	}}
45	>
46	{props.children}
47	</ControlPillMenu>
48	) : (
49	props.children
50	)}
51	</PresentationSource>
52	);
53	}

apps/mobile/src/components/VideoAttachmentTile.tsx+56-42

 @@ -2,65 +2,79 @@ import { Platform, Pressable, View, type StyleProp, type ViewStyle } from "react
 import { cn } from "../lib/cn";
 import type { DraftComposerFileAttachment } from "../lib/composerImages";
+import { useMediaActions, type MediaActionsSource } from "../lib/mediaActions";
 import { SymbolView } from "./AppSymbol";
 import { AppText } from "./AppText";
-import { VideoAttachmentMenu } from "./VideoAttachmentMenu";
+import { MediaActionsMenu } from "./MediaActionsMenu";
+import { PresentationSource } from "./NativePresentation";
 import { VideoThumbnailImage } from "./VideoThumbnailImage";
 export function VideoAttachmentTile(props: {
   readonly name: string;
   readonly sourceIdentifier: string;
   readonly thumbnailSource: string | DraftComposerFileAttachment | null;
+  readonly actionsSource?: MediaActionsSource;
   readonly compact?: boolean;
   readonly onPress: (sourceIdentifier: string) => void;
-  readonly onShare?: () => void;
   readonly disabled?: boolean;
   readonly className?: string;
   readonly style?: StyleProp<ViewStyle>;
 }) {
+  const mediaActions = useMediaActions(props.disabled ? undefined : props.actionsSource);
+  const hasActions = mediaActions.actions.length > 0;
   return (
-    <VideoAttachmentMenu
+    <PresentationSource
-      sourceIdentifier={props.sourceIdentifier}
+      identifier={props.sourceIdentifier}
-      onOpen={() => props.onPress(props.sourceIdentifier)}
+      accessible={Platform.OS === "ios"}
-      onShare={props.onShare}
+      accessibilityRole="button"
-      disabled={props.disabled}
+      accessibilityLabel={`Play ${props.name}`}
+      accessibilityState={{ disabled: props.disabled ?? false }}
+      onAccessibilityTap={() => {
+        if (!props.disabled) props.onPress(props.sourceIdentifier);
+      }}
+      accessibilityActions={mediaActions.actions.map(({ id, title }) => ({
+        name: id,
+        label: title,
+      }))}
+      onAccessibilityAction={({ nativeEvent }) => {
+        if (props.disabled) return;
+        mediaActions.actions.find(({ id }) => id === nativeEvent.actionName)?.run();
+      }}
     >
-      <Pressable
+      <MediaActionsMenu media={mediaActions}>
-        accessibilityRole="button"
+        <Pressable
-        accessibilityLabel={`Play ${props.name}`}
+          accessibilityRole="button"
-        accessibilityHint={
+          accessibilityLabel={`Play ${props.name}`}
-          Platform.OS === "ios" && props.onShare
+          accessibilityHint={hasActions ? "Touch and hold for media actions" : undefined}
-            ? "Touch and hold for save and share options"
+          accessibilityState={{ disabled: props.disabled ?? false }}
-            : undefined
+          disabled={props.disabled}
-        }
+          onPress={() => props.onPress(props.sourceIdentifier)}
-        accessibilityState={{ disabled: props.disabled ?? false }}
+          className={cn("items-center justify-center overflow-hidden bg-black/80", props.className)}
-        disabled={props.disabled}
+          style={props.style}
-        onPress={() => props.onPress(props.sourceIdentifier)}
-        className={cn("items-center justify-center overflow-hidden bg-black/80", props.className)}
-        style={props.style}
-      >
-        <VideoThumbnailImage cacheKey={props.sourceIdentifier} source={props.thumbnailSource} />
-        <View
-          className={cn(
-            "items-center justify-center rounded-full bg-black/45",
-            props.compact ? "size-6" : "size-12",
-          )}
         >
-          <SymbolView
+          <VideoThumbnailImage cacheKey={props.sourceIdentifier} source={props.thumbnailSource} />
-            name="play"
+          <View
-            size={props.compact ? 15 : 24}
+            className={cn(
-            tintColor="#ffffff"
+              "items-center justify-center rounded-full bg-black/45",
-            type="monochrome"
+              props.compact ? "size-6" : "size-12",
-          />
+            )}
-        </View>
+          >
-        {!props.compact ? (
+            <SymbolView
-          <View className="absolute inset-x-0 bottom-0 bg-black/55 px-2 py-1.5">
+              name="play"
-            <AppText className="text-center text-xs text-white" numberOfLines={1}>
+              size={props.compact ? 15 : 24}
-              {props.name}
+              tintColor="#ffffff"
-            </AppText>
+              type="monochrome"
+            />
           </View>
-        ) : null}
+          {!props.compact ? (
-      </Pressable>
+            <View className="absolute inset-x-0 bottom-0 bg-black/55 px-2 py-1.5">
-    </VideoAttachmentMenu>
+              <AppText className="text-center text-xs text-white" numberOfLines={1}>
+                {props.name}
+              </AppText>
+            </View>
+          ) : null}
+        </Pressable>
+      </MediaActionsMenu>
+    </PresentationSource>
   );
 }

apps/mobile/src/components/VideoPreviewModal.ios.tsx+28-30

 @@ -1,14 +1,12 @@
 import { useIsFocused } from "@react-navigation/native";
-import { videoMimeType } from "@t3tools/shared/video";
 import { requireNativeModule } from "expo";
 import { useEffect, useEffectEvent, useId, useState } from "react";
 import { Alert, Keyboard } from "react-native";
 import { loadLocalAttachmentPreview } from "../lib/localAttachmentPreview";
-import { useAssetUrlState } from "../state/assets";
+import { mediaVideoPreviewUri, type VideoPreviewSource } from "../lib/videoPreviewSource";
+import { useAssetUrlState, useRefreshAssetUrl } from "../state/assets";
 import { usePreparedConnection } from "../state/session";
-import type { AttachmentVideoPreviewSource, VideoPreviewSource } from "../lib/videoPreviewSource";
-import { MediaVideoPreviewModal } from "./MediaVideoPreviewModal";
 export type { VideoPreviewSource } from "../lib/videoPreviewSource";
 @@ -23,27 +21,28 @@ const NativeControls = requireNativeModule<{
 }>("T3NativeControls");
 function NativeVideoPreview(props: {
-  readonly source: AttachmentVideoPreviewSource;
+  readonly source: VideoPreviewSource;
   readonly onRequestClose: () => void;
 }) {
   const { source } = props;
-  const { attachment } = source;
+  const localAttachment = source.type === "local" ? source.attachment : null;
   const identifier = useId();
   const onRequestClose = useEffectEvent(props.onRequestClose);
-  const environmentId = source.type === "remote" ? source.environmentId : null;
+  const environmentId =
+    source.type === "media" && "environmentId" in source ? source.environmentId : null;
+  const resource = source.type === "media" && "resource" in source ? source.resource : null;
   const preparedConnection = usePreparedConnection(environmentId);
-  const mimeType = videoMimeType(attachment) ?? attachment.mimeType;
+  const assetUrl = useAssetUrlState(environmentId, resource);
-  const assetUrl = useAssetUrlState(
+  const refreshAssetUrl = useEffectEvent(useRefreshAssetUrl(environmentId, resource));
-    environmentId,
+  const name = source.type === "media" ? source.name : source.attachment.name;
-    source.type === "remote"
+  // The first minted URL is kept so a background refresh does not restart playback.
-      ? { _tag: "attachment", attachmentId: attachment.id, fileName: attachment.name, mimeType }
+  const resolvedUrl =
-      : null,
+    source.type === "media"
-  );
+      ? mediaVideoPreviewUri(source, assetUrl._tag === "Success" ? assetUrl.url : null)
-  const [playbackUrl, setPlaybackUrl] = useState<string | null>(() =>
+      : null;
-    assetUrl._tag === "Success" ? assetUrl.url : null,
+  const [playbackUrl, setPlaybackUrl] = useState<string | null>(resolvedUrl);
-  );
   const loadError =
-    source.type === "remote" && playbackUrl === null
+    resource !== null && playbackUrl === null
       ? preparedConnection._tag === "None"
         ? "Reconnect to this environment and open the video again."
         : assetUrl._tag === "Failure"
 @@ -53,8 +52,8 @@ function NativeVideoPreview(props: {
   useEffect(() => Keyboard.dismiss(), []);
   useEffect(() => {
-    if (playbackUrl === null && assetUrl._tag === "Success") setPlaybackUrl(assetUrl.url);
+    if (playbackUrl === null && resolvedUrl !== null) setPlaybackUrl(resolvedUrl);
-  }, [playbackUrl, assetUrl]);
+  }, [playbackUrl, resolvedUrl]);
   useEffect(() => {
     if (!loadError) return;
     Alert.alert("Could not open video", loadError);
 @@ -62,21 +61,21 @@ function NativeVideoPreview(props: {
   }, [loadError]);
   useEffect(() => {
-    if (source.type === "remote" && playbackUrl === null) return;
+    if (localAttachment === null && playbackUrl === null) return;
     const controller = new AbortController();
     let ready = false;
     void (async () => {
       const file =
-        source.type === "local"
+        localAttachment !== null
-          ? await loadLocalAttachmentPreview(source.attachment, controller.signal)
+          ? await loadLocalAttachmentPreview(localAttachment, controller.signal)
           : null;
-      if (source.type === "local" && !file) return;
+      if (localAttachment !== null && !file) return;
       try {
         if (controller.signal.aborted) return;
         ready = true;
         await NativeControls.presentVideo(
           file?.uri ?? playbackUrl!,
-          attachment.name,
+          name,
           source.sourceIdentifier ?? "",
           identifier,
         );
 @@ -87,10 +86,12 @@ function NativeVideoPreview(props: {
       }
     })().catch((error: unknown) => {
       if (controller.signal.aborted) return;
+      // AVKit gives no retry, so re-mint now; the cached URL may simply have expired.
+      if (ready) void refreshAssetUrl();
       Alert.alert(
         "Could not open video",
         ready
-          ? "This video couldn't be loaded or played. Check the connection, or touch and hold the attachment to save or share the original."
+          ? "This video couldn't be loaded or played. Check the connection, or touch and hold the video to save or share the original."
           : error instanceof Error
             ? error.message
             : "Could not load this video.",
 @@ -101,7 +102,7 @@ function NativeVideoPreview(props: {
       controller.abort();
       void NativeControls.dismissVideo(identifier).catch(() => undefined);
     };
-  }, [source, attachment.name, playbackUrl, identifier]);
+  }, [localAttachment, name, source.sourceIdentifier, playbackUrl, identifier]);
   return null;
 }
 @@ -118,8 +119,5 @@ export function VideoPreviewModal(props: {
   }, [isFocused, hasSource]);
   if (!props.source || !isFocused) return null;
-  if (props.source.type === "media") {
-    return <MediaVideoPreviewModal source={props.source} onRequestClose={props.onRequestClose} />;
-  }
   return <NativeVideoPreview source={props.source} onRequestClose={props.onRequestClose} />;
 }

apps/mobile/src/components/VideoPreviewModal.tsx+153-180

 @@ -1,190 +1,139 @@
 import { useIsFocused } from "@react-navigation/native";
 import { videoMimeType } from "@t3tools/shared/video";
-import { useEvent } from "expo";
-import { useVideoPlayer, VideoView } from "expo-video";
 import { useEffect, useRef, useState } from "react";
-import {
+import { ActivityIndicator, Keyboard, Modal, Pressable, View } from "react-native";
-  ActivityIndicator,
-  AppState,
-  Keyboard,
-  Modal,
-  Pressable,
-  StyleSheet,
-  View,
-} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {
-  downloadAttachmentForPreview,
-  type AttachmentPreviewFile,
-} from "../lib/attachmentDownload";
 import { loadLocalAttachmentPreview } from "../lib/localAttachmentPreview";
-import type { AttachmentVideoPreviewSource, VideoPreviewSource } from "../lib/videoPreviewSource";
+import { useMediaActions, type MediaActionsSource } from "../lib/mediaActions";
-import { useAssetUrlState } from "../state/assets";
+import {
+  mediaVideoPreviewUri,
+  mediaVideoThumbnailKey,
+  type LocalVideoPreviewSource,
+  type MediaVideoPreviewSource,
+  type VideoPreviewSource,
+} from "../lib/videoPreviewSource";
+import { useAssetUrlState, useRefreshAssetUrl } from "../state/assets";
 import { usePreparedConnection } from "../state/session";
-import { SymbolView } from "./AppSymbol";
 import { AppText } from "./AppText";
-import { MediaVideoPreviewModal } from "./MediaVideoPreviewModal";
+import { SymbolView } from "./AppSymbol";
+import { MediaActionsMenu } from "./MediaActionsMenu";
+import { MediaSourceCaption } from "./MediaSourceCaption";
+import { MediaVideoPlayer } from "./MediaVideoPlayer";
 export type { VideoPreviewSource } from "../lib/videoPreviewSource";
-function VideoPlayback(props: { readonly file: AttachmentPreviewFile }) {
+interface PlaybackState {
-  const player = useVideoPlayer(props.file.uri, (player) => {
+  readonly uri: string | null;
-    player.staysActiveInBackground = false;
+  readonly resolvePlaybackUri?: () => Promise<string | null>;
-    if (AppState.currentState === "active") player.play();
+  readonly unavailable: boolean;
-  });
+  readonly error: string | null;
-  const { status } = useEvent(player, "statusChange", { status: player.status });
+  readonly actionsSource: MediaActionsSource | undefined;
-  const shareControllerRef = useRef<AbortController | null>(null);
+}
-  const [sharing, setSharing] = useState(false);
-  const [shareError, setShareError] = useState<string | null>(null);
-  useEffect(
-    () => () => {
-      shareControllerRef.current?.abort();
-      shareControllerRef.current = null;
-    },
-    [],
-  );
-  const onShare = () => {
+function useMediaPlayback(source: MediaVideoPreviewSource): PlaybackState {
-    if (shareControllerRef.current) return;
+  const environmentId = "environmentId" in source ? source.environmentId : null;
-    player.pause();
+  const resource = "resource" in source ? source.resource : null;
-    const controller = new AbortController();
+  const connection = usePreparedConnection(environmentId);
-    shareControllerRef.current = controller;
+  const asset = useAssetUrlState(environmentId, resource);
-    setSharing(true);
+  const refreshAssetUrl = useRefreshAssetUrl(environmentId, resource);
-    setShareError(null);
+  const uri = mediaVideoPreviewUri(source, asset._tag === "Success" ? asset.url : null);
-    void props.file
+  return {
-      .share(controller.signal)
+    uri,
-      .catch((error: unknown) => {
+    ...(resource !== null
-        if (!controller.signal.aborted) {
+      ? { resolvePlaybackUri: async () => mediaVideoPreviewUri(source, await refreshAssetUrl()) }
-          setShareError(error instanceof Error ? error.message : "Could not share this video.");
+      : {}),
-        }
+    unavailable:
-      })
+      uri === null &&
-      .finally(() => {
+      environmentId !== null &&
-        if (shareControllerRef.current === controller) {
+      (connection._tag === "None" || asset._tag === "Failure"),
-          shareControllerRef.current = null;
+    error: null,
-          setSharing(false);
+    actionsSource: source.actionsSource,
-        }
-      });
   };
-  return (
-    <>
-      <View className="flex-1 items-center justify-center">
-        {status === "error" ? (
-          <AppText className="px-6 text-center text-base text-white/80">
-            This video couldn't be played on this device. You can save or share the original file.
-          </AppText>
-        ) : (
-          <>
-            <VideoView
-              player={player}
-              style={StyleSheet.absoluteFill}
-              nativeControls
-              contentFit="contain"
-              fullscreenOptions={{ enable: true }}
-              allowsPictureInPicture={false}
-            />
-            {status === "loading" ? (
-              <ActivityIndicator color="#ffffff" accessibilityLabel="Loading video" />
-            ) : null}
-          </>
-        )}
-      </View>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel="Save or share video"
-        accessibilityState={{ disabled: sharing, busy: sharing }}
-        disabled={sharing}
-        onPress={onShare}
-        className="mx-4 my-3 min-h-12 items-center justify-center rounded-xl bg-white/15 px-4"
-      >
-        <AppText className="font-t3-medium text-base text-white">
-          {sharing ? "Opening share sheet..." : "Save or share video"}
-        </AppText>
-      </Pressable>
-      {shareError ? (
-        <AppText accessibilityRole="alert" className="px-4 pb-3 text-sm text-white/80">
-          {shareError}
-        </AppText>
-      ) : null}
-    </>
-  );
 }
-function OpenVideoPreviewModal(props: {
+function useLocalPlayback(source: LocalVideoPreviewSource): PlaybackState {
-  readonly source: AttachmentVideoPreviewSource;
-  readonly onRequestClose: () => void;
-}) {
-  const { source } = props;
   const { attachment } = source;
-  const insets = useSafeAreaInsets();
+  const [uri, setUri] = useState<string | null>(null);
-  const environmentId = source.type === "remote" ? source.environmentId : null;
+  const [error, setError] = useState<string | null>(null);
-  const preparedConnection = usePreparedConnection(environmentId);
+  // Only a different file needs a new lease; a metadata update on the same
-  const fileUri = source.type === "local" ? source.attachment.fileUri : null;
+  // draft must not dispose the file Android is still playing.
-  const mimeType = videoMimeType(attachment) ?? attachment.mimeType;
+  const attachmentRef = useRef(attachment);
-  const assetUrl = useAssetUrlState(
+  attachmentRef.current = attachment;
-    environmentId,
+  const { id: attachmentId, fileUri } = attachment;
-    source.type === "remote"
-      ? { _tag: "attachment", attachmentId: attachment.id, fileName: attachment.name, mimeType }
-      : null,
-  );
-  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
-  const [file, setFile] = useState<AttachmentPreviewFile | null>(null);
-  const [failure, setFailure] = useState<string | null>(null);
-  useEffect(() => Keyboard.dismiss(), []);
-  useEffect(() => {
-    if (environmentId !== null && downloadUrl === null && assetUrl._tag === "Success") {
-      setDownloadUrl(assetUrl.url);
-    }
-  }, [environmentId, downloadUrl, assetUrl]);
   useEffect(() => {
-    if (source.type === "remote" && downloadUrl === null) return;
+    setUri(null);
+    setError(null);
     const controller = new AbortController();
-    let preview: AttachmentPreviewFile | null = null;
+    const loading = loadLocalAttachmentPreview(attachmentRef.current, controller.signal);
-    setFile(null);
-    setFailure(null);
-    const loading =
-      source.type === "local"
-        ? loadLocalAttachmentPreview(source.attachment, controller.signal)
-        : downloadAttachmentForPreview({
-            url: downloadUrl!,
-            attachment: { name: attachment.name, mimeType },
-            signal: controller.signal,
-          });
     void loading.then(
-      (loaded) => {
+      (file) => {
-        if (controller.signal.aborted) {
+        if (file === null) return;
-          loaded?.dispose();
+        if (controller.signal.aborted) file.dispose();
-          return;
+        else setUri(file.uri);
-        }
-        preview = loaded;
-        setFile(loaded);
       },
-      (error: unknown) => {
+      (cause: unknown) => {
         if (!controller.signal.aborted) {
-          setFailure(error instanceof Error ? error.message : "Could not load this video.");
+          setError(cause instanceof Error ? cause.message : "Could not load this video.");
         }
       },
     );
     return () => {
       controller.abort();
-      preview?.dispose();
+      void loading.then(
+        (file) => file?.dispose(),
+        () => undefined,
+      );
     };
-  }, [source.type, environmentId, attachment.id, attachment.name, mimeType, fileUri, downloadUrl]);
+  }, [attachmentId, fileUri]);
+  const mimeType = videoMimeType(attachment) ?? attachment.mimeType;
+  return {
+    uri,
+    unavailable: error !== null,
+    error,
+    actionsSource: uri === null ? undefined : { name: attachment.name, mimeType, uri },
+  };
+}
+function MediaPreviewModal(props: {
+  readonly source: MediaVideoPreviewSource;
+  readonly onRequestClose: () => void;
+}) {
+  return (
+    <OpenVideoPreviewModal
+      name={props.source.name}
+      thumbnailKey={mediaVideoThumbnailKey(props.source)}
+      playback={useMediaPlayback(props.source)}
+      onRequestClose={props.onRequestClose}
+    />
+  );
+}
+function LocalPreviewModal(props: {
+  readonly source: LocalVideoPreviewSource;
+  readonly onRequestClose: () => void;
+}) {
+  return (
+    <OpenVideoPreviewModal
+      name={props.source.attachment.name}
+      thumbnailKey={`local:${props.source.attachment.id}`}
+      playback={useLocalPlayback(props.source)}
+      onRequestClose={props.onRequestClose}
+    />
+  );
+}
-  const loadError =
+function OpenVideoPreviewModal(props: {
-    failure ??
+  readonly name: string;
-    (environmentId !== null && downloadUrl === null
+  readonly thumbnailKey: string;
-      ? preparedConnection._tag === "None"
+  readonly playback: PlaybackState;
-        ? "This environment is disconnected. Reconnect and open the video again."
+  readonly onRequestClose: () => void;
-        : assetUrl._tag === "Failure"
+}) {
-          ? "Could not load this video. Check the connection to this environment and try again."
+  const { playback } = props;
-          : null
+  const insets = useSafeAreaInsets();
-      : null);
+  const mediaActions = useMediaActions(playback.actionsSource, props.onRequestClose);
+  useEffect(() => Keyboard.dismiss(), []);
   return (
     <Modal
       visible
 @@ -200,8 +149,9 @@ function OpenVideoPreviewModal(props: {
       >
         <View className="min-h-14 flex-row items-center gap-3 pl-4 pr-2">
           <AppText className="flex-1 font-t3-medium text-base text-white" numberOfLines={2}>
-            {attachment.name}
+            {props.name}
           </AppText>
+          <MediaActionsMenu media={mediaActions} inModal />
           <Pressable
             accessibilityRole="button"
             accessibilityLabel="Close video"
 @@ -211,22 +161,40 @@ function OpenVideoPreviewModal(props: {
             <SymbolView name="xmark" size={20} tintColor="#ffffff" type="monochrome" />
           </Pressable>
         </View>
-        {file ? (
+        <MediaSourceCaption source={mediaActions.title} />
-          <VideoPlayback key={file.uri} file={file} />
+        {playback.uri === null && !playback.unavailable ? (
-        ) : (
           <View className="flex-1 items-center justify-center gap-3 px-6">
-            {loadError ? (
+            <ActivityIndicator color="#ffffff" />
-              <AppText accessibilityRole="alert" className="text-center text-base text-white/80">
+            <AppText className="text-sm text-white/80">Loading video...</AppText>
-                {loadError}
-              </AppText>
-            ) : (
-              <>
-                <ActivityIndicator color="#ffffff" />
-                <AppText className="text-sm text-white/80">Loading video...</AppText>
-              </>
-            )}
           </View>
+        ) : (
+          <MediaVideoPlayer
+            uri={playback.uri}
+            resolvePlaybackUri={playback.resolvePlaybackUri}
+            name={props.name}
+            thumbnailKey={props.thumbnailKey}
+            unavailable={playback.unavailable}
+            paused={mediaActions.sharing}
+            expanded
+            autoPlay
+          />
         )}
+        {playback.error ? (
+          <AppText accessibilityRole="alert" className="px-4 pb-3 text-sm text-white/80">
+            {playback.error}
+          </AppText>
+        ) : null}
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Save or share video"
+          disabled={playback.uri === null || mediaActions.sharing}
+          onPress={mediaActions.share}
+          className="mx-4 my-3 min-h-12 items-center justify-center rounded-xl bg-white/15 px-4"
+        >
+          <AppText className="font-t3-medium text-base text-white">
+            {mediaActions.sharing ? "Opening share sheet..." : "Save or share video"}
+          </AppText>
+        </Pressable>
       </View>
     </Modal>
   );
 @@ -243,12 +211,17 @@ export function VideoPreviewModal(props: {
   }, [isFocused, hasSource, props.onRequestClose]);
   const { source } = props;
   if (source === null || !isFocused) return null;
-  if (source.type === "media") {
+  return source.type === "local" ? (
-    return <MediaVideoPreviewModal source={source} onRequestClose={props.onRequestClose} />;
+    <LocalPreviewModal
-  }
+      key={`local:${source.attachment.id}:${source.attachment.fileUri}`}
-  const key =
+      source={source}
-    source.type === "local"
+      onRequestClose={props.onRequestClose}
-      ? `local:${source.attachment.id}:${source.attachment.fileUri}`
+    />
-      : `remote:${source.environmentId}:${source.attachment.id}`;
+  ) : (
-  return <OpenVideoPreviewModal key={key} source={source} onRequestClose={props.onRequestClose} />;
+    <MediaPreviewModal
+      key={mediaVideoThumbnailKey(source)}
+      source={source}
+      onRequestClose={props.onRequestClose}
+    />
+  );
 }

apps/mobile/src/features/files/ThreadFilesRouteScreen.tsx+1-1

...	@@ -668,7 +668,7 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {	...	@@ -668,7 +668,7 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
668	id: action.id,	668	id: action.id,
669	title: action.title,	669	title: action.title,
670	icon:	670	icon:
671	action.id === "share" ? ("square.and.arrow.up" as const) : ("doc.on.doc" as const),	671	action.id === "save" ? ("square.and.arrow.up" as const) : ("doc.on.doc" as const),
672	inline: false,	672	inline: false,
673	onPress: action.run,	673	onPress: action.run,
674	}))	674	}))

apps/mobile/src/features/files/WorkspaceFileImagePreview.tsx+38-75

 @@ -1,11 +1,8 @@
-import { useAtomValue } from "@effect/atom-react";
 import { useId, useMemo, useState } from "react";
 import { ActivityIndicator, Image, Pressable, View } from "react-native";
-import { AsyncResult } from "effect/unstable/reactivity";
 import { AppText as Text } from "../../components/AppText";
 import { EmptyState } from "../../components/EmptyState";
-import { workspaceFileImageAtom } from "./workspace-file-image-cache";
 import { FilePreviewModal, type FilePreviewSource } from "../../components/FilePreviewModal";
 import { PresentationSource } from "../../components/NativePresentation";
 import { useMediaActions, type MediaActionsSource } from "../../lib/mediaActions";
 @@ -27,86 +24,52 @@ function ResolvedWorkspaceFileImagePreview(props: {
   return (
     <View className="relative flex-1 bg-subtle">
-      <Pressable
+      <MediaActionsMenu media={mediaActions} style={{ flex: 1 }}>
-        accessibilityRole="button"
+        <Pressable
-        accessibilityLabel={`Open full-screen preview of ${props.accessibilityLabel}`}
+          accessibilityRole="button"
-        disabled={loadError !== null}
+          accessibilityLabel={`Open full-screen preview of ${props.accessibilityLabel}`}
-        className="flex-1 p-4 active:bg-subtle-strong"
+          accessibilityHint={
-        onPress={() =>
+            mediaActions.actions.length > 0 ? "Touch and hold for media actions" : undefined
-          setPreview({
+          }
-            kind: "image",
+          disabled={loadError !== null}
-            uri: props.uri,
+          className="flex-1 p-4 active:bg-subtle-strong"
-            name: props.accessibilityLabel,
+          onPress={() =>
-            sourceIdentifier,
+            setPreview({
-            actionsSource: props.actionsSource,
+              kind: "image",
-          })
+              uri: props.uri,
-        }
+              name: props.accessibilityLabel,
-      >
+              sourceIdentifier,
-        <PresentationSource identifier={sourceIdentifier} style={{ flex: 1 }}>
+              actionsSource: props.actionsSource,
-          <Image
+            })
-            accessible={false}
+          }
-            source={imageSource}
+        >
-            className="h-full w-full"
+          <PresentationSource identifier={sourceIdentifier} style={{ flex: 1 }}>
-            resizeMode="contain"
+            <Image
-            onLoadStart={() => setLoadError(null)}
+              accessible={false}
-            onError={(event) => {
+              source={imageSource}
-              setLoadError(event.nativeEvent.error || "The image could not be rendered.");
+              className="h-full w-full"
-            }}
+              resizeMode="contain"
-          />
+              onLoadStart={() => setLoadError(null)}
-        </PresentationSource>
+              onError={(event) => {
-      </Pressable>
+                setLoadError(event.nativeEvent.error || "The image could not be rendered.");
+              }}
+            />
+          </PresentationSource>
+        </Pressable>
+      </MediaActionsMenu>
       {loadError !== null ? (
-        <View className="absolute inset-0 items-center justify-center bg-card px-6">
+        <View
+          pointerEvents="none"
+          className="absolute inset-0 items-center justify-center bg-card px-6"
+        >
           <EmptyState title="Image unavailable" detail={loadError} />
         </View>
       ) : null}
-      <View className="absolute right-2 top-2">
-        <MediaActionsMenu media={mediaActions} />
-      </View>
       <FilePreviewModal source={preview} onRequestClose={() => setPreview(null)} />
     </View>
   );
 }
-function CachedWorkspaceFileImagePreview(props: {
-  readonly accessibilityLabel: string;
-  readonly uri: string;
-  readonly actionsSource?: MediaActionsSource;
-}) {
-  const imageAtom = useMemo(() => workspaceFileImageAtom(props.uri), [props.uri]);
-  const imageResult = useAtomValue(imageAtom);
-  if (AsyncResult.isFailure(imageResult)) {
-    return (
-      <View className="flex-1 items-center justify-center bg-card px-6">
-        <EmptyState
-          title="Image unavailable"
-          detail="The image could not be loaded into the local cache."
-        />
-      </View>
-    );
-  }
-  if (!AsyncResult.isSuccess(imageResult)) {
-    return (
-      <View className="flex-1 items-center justify-center gap-3 bg-card px-6">
-        <ActivityIndicator />
-        <Text className="text-center text-sm text-foreground-muted">Loading image...</Text>
-      </View>
-    );
-  }
-  return (
-    <ResolvedWorkspaceFileImagePreview
-      accessibilityLabel={props.accessibilityLabel}
-      uri={imageResult.value}
-      actionsSource={props.actionsSource}
-    />
-  );
-}
 export function WorkspaceFileImagePreview(props: {
   readonly accessibilityLabel: string;
   readonly uri: string | null;
 @@ -124,7 +87,7 @@ export function WorkspaceFileImagePreview(props: {
   }
   return (
-    <CachedWorkspaceFileImagePreview
+    <ResolvedWorkspaceFileImagePreview
       accessibilityLabel={props.accessibilityLabel}
       uri={props.uri}
       actionsSource={props.actionsSource}

apps/mobile/src/features/files/WorkspaceFileVideoPreview.tsx-7

 @@ -1,9 +1,7 @@
-import { useState } from "react";
 import { View } from "react-native";
 import { EmptyState } from "../../components/EmptyState";
 import { MediaVideoPlayer } from "../../components/MediaVideoPlayer";
-import { VideoPreviewModal, type VideoPreviewSource } from "../../components/VideoPreviewModal";
 import type { MediaVideoPreviewSource } from "../../lib/videoPreviewSource";
 /** Uses the signed progressive URL directly; choosing a file never preloads its video bytes as text. */
 @@ -15,7 +13,6 @@ export function WorkspaceFileVideoPreview(props: {
   readonly resolvePlaybackUri: () => Promise<string | null>;
   readonly unavailable: boolean;
 }) {
-  const [preview, setPreview] = useState<VideoPreviewSource | null>(null);
   const uri = props.uri;
   if (props.unavailable) {
 @@ -37,11 +34,7 @@ export function WorkspaceFileVideoPreview(props: {
         name={props.name}
         thumbnailKey={props.thumbnailKey}
         actionsSource={props.source?.actionsSource}
-        onExpand={
-          uri === null || props.source === null ? undefined : () => setPreview(props.source)
-        }
       />
-      <VideoPreviewModal source={preview} onRequestClose={() => setPreview(null)} />
     </View>
   );
 }

apps/mobile/src/features/files/workspace-file-image-cache.test.ts deleted-64

...	@@ -1,64 +0,0 @@
1	import { AtomRegistry } from "effect/unstable/reactivity";
2	import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
3	import { describe, expect, it, vi } from "vite-plus/test";
4
5	import { createWorkspaceFileImageAtomFamily } from "./workspace-file-image-cache";
6
7	describe("workspaceFileImageAtom", () => {
8	it("reuses a prefetched image across route remounts", async () => {
9	const prefetch = vi.fn(async () => true);
10	const imageAtom = createWorkspaceFileImageAtomFamily({ idleTtlMs: 1_000, prefetch });
11	const registry = AtomRegistry.make({ timeoutResolution: 1 });
12	const first = imageAtom("https://example.test/image.png");
13	const firstUnmount = registry.mount(first);
14
15	await vi.waitFor(() => {
16	expect(AsyncResult.isSuccess(registry.get(first))).toBe(true);
17	});
18	firstUnmount();
19
20	const remounted = imageAtom("https://example.test/image.png");
21	const secondUnmount = registry.mount(remounted);
22
23	expect(remounted).toBe(first);
24	expect(AsyncResult.isSuccess(registry.get(remounted))).toBe(true);
25	expect(prefetch).toHaveBeenCalledTimes(1);
26
27	secondUnmount();
28	registry.dispose();
29	});
30
31	it("prefetches different asset URLs independently", async () => {
32	const prefetch = vi.fn(async () => true);
33	const imageAtom = createWorkspaceFileImageAtomFamily({ prefetch });
34	const registry = AtomRegistry.make();
35	const first = imageAtom("https://example.test/first.png");
36	const second = imageAtom("https://example.test/second.png");
37	const firstUnmount = registry.mount(first);
38	const secondUnmount = registry.mount(second);
39
40	await vi.waitFor(() => {
41	expect(AsyncResult.isSuccess(registry.get(first))).toBe(true);
42	expect(AsyncResult.isSuccess(registry.get(second))).toBe(true);
43	});
44	expect(prefetch).toHaveBeenCalledTimes(2);
45
46	firstUnmount();
47	secondUnmount();
48	registry.dispose();
49	});
50
51	it("exposes prefetch failures", async () => {
52	const imageAtom = createWorkspaceFileImageAtomFamily({ prefetch: async () => false });
53	const registry = AtomRegistry.make();
54	const atom = imageAtom("https://example.test/missing.png");
55	const unmount = registry.mount(atom);
56
57	await vi.waitFor(() => {
58	expect(AsyncResult.isFailure(registry.get(atom))).toBe(true);
59	});
60
61	unmount();
62	registry.dispose();
63	});
64	});

apps/mobile/src/features/files/workspace-file-image-cache.ts deleted-48

...	@@ -1,48 +0,0 @@
1	import * as Data from "effect/Data";
2	import * as Effect from "effect/Effect";
3	import { Atom } from "effect/unstable/reactivity";
4
5	const WORKSPACE_IMAGE_IDLE_TTL_MS = 30 * 60_000;
6
7	type ImagePrefetch = (uri: string) => Promise<boolean>;
8
9	class WorkspaceImageCacheKey extends Data.Class<{ readonly uri: string }> {}
10
11	export class WorkspaceImagePrefetchError extends Data.TaggedError("WorkspaceImagePrefetchError")<{
12	readonly cause?: unknown;
13	readonly uri: string;
14	}> {}
15
16	async function prefetchWithNativeImage(uri: string): Promise<boolean> {
17	const { Image } = await import("react-native");
18	return Image.prefetch(uri);
19	}
20
21	export function createWorkspaceFileImageAtomFamily(options?: {
22	readonly idleTtlMs?: number;
23	readonly prefetch?: ImagePrefetch;
24	}) {
25	const idleTtlMs = options?.idleTtlMs ?? WORKSPACE_IMAGE_IDLE_TTL_MS;
26	const prefetch = options?.prefetch ?? prefetchWithNativeImage;
27	const family = Atom.family((key: WorkspaceImageCacheKey) =>
28	Atom.make(
29	Effect.tryPromise({
30	try: async () => {
31	const cached = await prefetch(key.uri);
32	if (!cached) {
33	throw new WorkspaceImagePrefetchError({ uri: key.uri });
34	}
35	return key.uri;
36	},
37	catch: (cause) =>
38	cause instanceof WorkspaceImagePrefetchError
39	? cause
40	: new WorkspaceImagePrefetchError({ uri: key.uri, cause }),
41	}),
42	).pipe(Atom.setIdleTTL(idleTtlMs), Atom.withLabel(`mobile:workspace-image:${key.uri}`)),
43	);
44
45	return (uri: string) => family(new WorkspaceImageCacheKey({ uri }));
46	}
47
48	export const workspaceFileImageAtom = createWorkspaceFileImageAtomFamily();

apps/mobile/src/features/threads/ThreadFeed.tsx+87-71

 @@ -105,6 +105,7 @@ import { resolveMarkdownMediaPreview } from "../../lib/markdownMedia";
 import { useMediaActions, type MediaActionsSource } from "../../lib/mediaActions";
 import { MediaActionsMenu } from "../../components/MediaActionsMenu";
 import {
+  attachmentVideoPreviewSource,
   mediaVideoPreviewUri,
   mediaVideoThumbnailKey,
   type MediaVideoPreviewSource,
 @@ -251,14 +252,21 @@ function MessageAttachmentImage(props: {
   readonly environmentId: EnvironmentId;
   readonly attachmentId: string;
   readonly name: string;
+  readonly mimeType: string;
   readonly className: string;
   readonly onPressPreview: (source: FilePreviewSource) => void;
 }) {
   const sourceIdentifier = useId();
-  const uri = useAssetUrl(props.environmentId, {
+  const resource = useMemo(
-    _tag: "attachment",
+    () => ({
-    attachmentId: props.attachmentId,
+      _tag: "attachment" as const,
-  });
+      attachmentId: props.attachmentId,
+      fileName: props.name,
+      mimeType: props.mimeType,
+    }),
+    [props.attachmentId, props.name, props.mimeType],
+  );
+  const uri = useAssetUrl(props.environmentId, resource);
   if (uri === null) {
     return (
 @@ -274,7 +282,20 @@ function MessageAttachmentImage(props: {
         accessibilityRole="imagebutton"
         accessibilityLabel={`Open ${props.name}`}
         onPress={() =>
-          props.onPressPreview({ kind: "image", uri, name: props.name, sourceIdentifier })
+          // The viewer mints its own URL from the resource so the image survives a refresh.
+          props.onPressPreview({
+            kind: "image",
+            environmentId: props.environmentId,
+            resource,
+            name: props.name,
+            sourceIdentifier,
+            actionsSource: {
+              name: props.name,
+              mimeType: props.mimeType,
+              environmentId: props.environmentId,
+              resource,
+            },
+          })
         }
       >
         <Image source={{ uri }} className={props.className} resizeMode="cover" />
 @@ -389,14 +410,18 @@ function MessageAttachmentFile(props: {
   };
   if (videoType !== null) {
+    const sourceIdentifier = `attachment:${props.environmentId}:${attachment.id}`;
     return (
       <VideoAttachmentTile
         name={attachment.name}
-        sourceIdentifier={`attachment:${props.environmentId}:${attachment.id}`}
+        sourceIdentifier={sourceIdentifier}
         thumbnailSource={thumbnailUrl}
+        actionsSource={
+          attachmentVideoPreviewSource(props.environmentId, attachment, sourceIdentifier)
+            .actionsSource
+        }
         disabled={opening || httpBaseUrl === null}
         onPress={(sourceIdentifier) => props.onPressVideo(attachment, sourceIdentifier)}
-        onShare={() => shareFile(`attachment:${props.environmentId}:${attachment.id}`)}
         className="my-1 rounded-2xl"
         style={{ width: 224, maxWidth: "100%", aspectRatio: 16 / 9 }}
       />
 @@ -520,62 +545,60 @@ function ThreadMarkdownImageView(props: {
       style={{ alignSelf: "stretch", gap: 6 }}
     >
       {props.uri === null || failed ? (
-        <View
+        <MediaActionsMenu media={mediaActions}>
-          className="items-center justify-center rounded-[10px] bg-md-code-bg"
+          <Pressable
-          style={{
+            accessibilityRole="imagebutton"
-            ...frameStyle,
+            accessibilityLabel={props.alt ?? "Markdown image"}
-          }}
+            accessibilityHint={
-        >
+              mediaActions.actions.length > 0 ? "Touch and hold for media actions" : undefined
-          {failed ? (
+            }
-            <Text className="text-xs text-foreground-muted">Image unavailable</Text>
+            className="items-center justify-center rounded-[10px] bg-md-code-bg"
-          ) : (
+            style={frameStyle}
-            <ActivityIndicator />
+          >
-          )}
+            {failed ? (
-          {props.actionsSource ? (
+              <Text className="text-xs text-foreground-muted">Image unavailable</Text>
-            <View className="absolute right-1 top-1">
+            ) : (
-              <MediaActionsMenu media={mediaActions} />
+              <ActivityIndicator />
-            </View>
+            )}
-          ) : null}
+          </Pressable>
-        </View>
+        </MediaActionsMenu>
       ) : (
         <PresentationSource identifier={sourceIdentifier} style={{ alignSelf: "flex-start" }}>
-          <View>
+          <MediaActionsMenu media={mediaActions}>
-            <MediaActionsMenu media={mediaActions}>
+            <Pressable
-              <Pressable
+              accessibilityRole="imagebutton"
-                accessibilityRole="imagebutton"
+              accessibilityLabel={props.alt ?? "Markdown image"}
-                accessibilityLabel={props.alt ?? "Markdown image"}
+              accessibilityHint={
-                onPress={() =>
+                mediaActions.actions.length > 0 ? "Touch and hold for media actions" : undefined
-                  props.onPressPreview({
+              }
-                    kind: "image",
+              onPress={() =>
-                    uri: props.uri!,
+                // Quick Look picks the viewer from the name's extension, so it needs the
-                    name: props.alt ?? "Image",
+                // file name rather than the alt text.
-                    sourceIdentifier,
+                props.onPressPreview({
-                    actionsSource: props.actionsSource,
+                  kind: "image",
-                  })
+                  uri: props.uri!,
-                }
+                  name: props.actionsSource?.name ?? props.alt ?? "Image",
-                style={{ alignSelf: "flex-start" }}
+                  sourceIdentifier,
+                  actionsSource: props.actionsSource,
+                })
+              }
+              style={{ alignSelf: "flex-start" }}
+            >
+              <View
+                className="items-center justify-center overflow-hidden rounded-[10px] bg-md-code-bg"
+                style={{
+                  ...frameStyle,
+                }}
               >
-                <View
+                <ThreadMarkdownImageRequest
-                  className="items-center justify-center overflow-hidden rounded-[10px] bg-md-code-bg"
+                  key={props.uri}
-                  style={{
+                  uri={props.uri}
-                    ...frameStyle,
+                  onLoad={setSourceSize}
-                  }}
+                  onError={() => setFailedUri(props.uri)}
-                >
+                />
-                  <ThreadMarkdownImageRequest
-                    key={props.uri}
-                    uri={props.uri}
-                    onLoad={setSourceSize}
-                    onError={() => setFailedUri(props.uri)}
-                  />
-                </View>
-              </Pressable>
-            </MediaActionsMenu>
-            {props.actionsSource ? (
-              <View className="absolute right-1 top-1">
-                <MediaActionsMenu media={mediaActions} />
               </View>
-            ) : null}
+            </Pressable>
-          </View>
+          </MediaActionsMenu>
         </PresentationSource>
       )}
       {props.alt ? (
 @@ -658,10 +681,7 @@ function ThreadMediaVisibility(props: { readonly children: ReactNode }) {
   return <ThreadMediaVisibleContext value={visible}>{props.children}</ThreadMediaVisibleContext>;
 }
-function ThreadMarkdownVideo(props: {
+function ThreadMarkdownVideo(props: { readonly source: MediaVideoPreviewSource }) {
-  readonly source: MediaVideoPreviewSource;
-  readonly onExpand: (source: MediaVideoPreviewSource) => void;
-}) {
   const { source } = props;
   const visible = useContext(ThreadMediaVisibleContext);
   const thumbnailKey = mediaVideoThumbnailKey(source);
 @@ -688,7 +708,6 @@ function ThreadMarkdownVideo(props: {
       thumbnailVisible={visible}
       unavailable={"resource" in source && asset._tag === "Failure"}
       actionsSource={source.actionsSource}
-      onExpand={() => props.onExpand(source)}
     />
   );
 }
 @@ -1593,6 +1612,7 @@ function renderFeedEntry(
                   environmentId={props.environmentId}
                   attachmentId={attachment.id}
                   name={attachment.name}
+                  mimeType={attachment.mimeType}
                   className="aspect-[1.3] w-full rounded-[14px] bg-white/15"
                   onPressPreview={props.onPressPreview}
                 />
 @@ -1656,6 +1676,7 @@ function renderFeedEntry(
               environmentId={props.environmentId}
               attachmentId={attachment.id}
               name={attachment.name}
+              mimeType={attachment.mimeType}
               className="mt-1.5 aspect-[1.3] w-full rounded-[18px] bg-adaptive-neutral-200-800"
               onPressPreview={props.onPressPreview}
             />
 @@ -2218,7 +2239,6 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
           <ThreadMarkdownVideo
             key={image.href}
             source={{ ...media.source, name: image.alt ?? media.source.name }}
-            onExpand={(source) => setExpandedVideo((current) => current ?? source)}
           />
         );
       }
 @@ -2667,12 +2687,8 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
     (attachment: ChatFileAttachment, sourceIdentifier: string) => {
       setExpandedVideo(
         (current) =>
-          current ?? {
+          current ??
-            type: "remote",
+          attachmentVideoPreviewSource(props.environmentId, attachment, sourceIdentifier),
-            environmentId: props.environmentId,
-            attachment,
-            sourceIdentifier,
-          },
       );
     },
     [props.environmentId],

apps/mobile/src/lib/markdownMedia.test.ts+11

...	@@ -61,6 +61,17 @@ describe("resolveMarkdownMediaPreview", () => {	...	@@ -61,6 +61,17 @@ describe("resolveMarkdownMediaPreview", () => {
61	});	61	});
62	});	62	});
63		63
		64	it("serves a linked T3 attachment file in place like any other host path", () => {
		65	const path = "/home/demo/.t3/userdata/attachments/11111111-1111-4111-8111-111111111111-mp4.mp4";
		66	expect(resolveMarkdownMediaPreview(path, input)).toMatchObject({
		67	kind: "video",
		68	source: {
		69	resource: { _tag: "media-file", threadId: input.threadId, path },
		70	actionsSource: { resource: { _tag: "media-file", path } },
		71	},
		72	});
		73	});
		74
64	it("resolves protocol-relative media for native APIs without rewriting its signed query", () => {	75	it("resolves protocol-relative media for native APIs without rewriting its signed query", () => {
65	expect(	76	expect(
66	resolveMarkdownMediaPreview("//cdn.example.com/clip.mp4?signature=a%2fb#t=2", input),	77	resolveMarkdownMediaPreview("//cdn.example.com/clip.mp4?signature=a%2fb#t=2", input),

apps/mobile/src/lib/markdownMedia.ts+13-53

...	@@ -1,15 +1,6 @@	...	@@ -1,15 +1,6 @@
1	import {	1	import { resolveMediaSource } from "@t3tools/client-runtime/media-source";
2	classifyMarkdownImageSource,
3	markdownImageSourceFragment,
4	} from "@t3tools/client-runtime/markdown-images";
5	import type { EnvironmentId, ThreadId } from "@t3tools/contracts";	2	import type { EnvironmentId, ThreadId } from "@t3tools/contracts";
6	import { normalizeNativeMarkdownUrl } from "@t3tools/mobile-markdown-text/links";	3	import { normalizeNativeMarkdownUrl } from "@t3tools/mobile-markdown-text/links";
7	import { mediaMimeType, mediaMimeTypeFromExtension } from "@t3tools/shared/filePreview";
8	import {
9	mediaFileReference,
10	mediaReferenceFileName,
11	mediaUrlReference,
12	} from "@t3tools/client-runtime/media-reference";
13		4
14	import type { FilePreviewSource } from "../components/FilePreviewModal";	5	import type { FilePreviewSource } from "../components/FilePreviewModal";
15	import type { MediaVideoPreviewSource } from "./videoPreviewSource";	6	import type { MediaVideoPreviewSource } from "./videoPreviewSource";
...	@@ -29,61 +20,30 @@ export function resolveMarkdownMediaPreview(	...	@@ -29,61 +20,30 @@ export function resolveMarkdownMediaPreview(
29	\| { readonly kind: "image"; readonly source: FilePreviewSource }	20	\| { readonly kind: "image"; readonly source: FilePreviewSource }
30	\| { readonly kind: "video"; readonly source: MediaVideoPreviewSource }	21	\| { readonly kind: "video"; readonly source: MediaVideoPreviewSource }
31	\| null {	22	\| null {
32	const classified = classifyMarkdownImageSource(href, input.workspaceRoot);	23	const media = resolveMediaSource(href, input);
33	if (classified._tag === "Blocked") return null;	24	if (media === null \|\| media.access === "unavailable") return null;
34	const path =	25	const { kind, name, mimeType, reference, srcFragment } = media;
35	classified._tag === "WorkspaceFile"	26
36	? classified.path.replace(/:\d+(?::\d+)?$/, "")
37	: classified.uri.split(/[?#]/, 1)[0]!;
38	const basename = path.split(/[\\/]/).at(-1) ?? "";
39	const extensionIndex = basename.lastIndexOf(".");
40	// Local paths have already been decoded. Do not interpret literal #, ?, or % characters again.
41	const detectedMimeType =
42	classified._tag === "Direct"
43	? mediaMimeType(classified.uri)
44	: extensionIndex < 0
45	? null
46	: mediaMimeTypeFromExtension(basename.slice(extensionIndex));
47	const mimeType = detectedMimeType ?? (input.imageEmbed ? "image/*" : null);
48	if (mimeType === null) return null;
49	const kind = mimeType.startsWith("video/") ? "video" : "image";
50	const reference =
51	classified._tag === "Direct"
52	? mediaUrlReference(classified.uri)
53	: mediaFileReference(path, input.workspaceRoot);
54	const name =
55	(reference && mediaReferenceFileName(reference)) \|\| (kind === "video" ? "Video" : "Image");
56	const srcFragment = markdownImageSourceFragment(href);
57	const target =	27	const target =
58	classified._tag === "Direct"	28	media.access === "direct"
59	? { uri: normalizeNativeMarkdownUrl(classified.uri) }	29	? { uri: normalizeNativeMarkdownUrl(media.uri) }
60	: {	30	: {
61	environmentId: input.environmentId,	31	environmentId: input.environmentId,
62	resource: {	32	resource: media.resource,
63	_tag: "media-file" as const,
64	threadId: input.threadId,
65	path,
66	},
67	...(srcFragment ? { srcFragment } : {}),	33	...(srcFragment ? { srcFragment } : {}),
68	};	34	};
69	const actionsSource: MediaActionsSource =	35	const actionsSource: MediaActionsSource =
70	classified._tag === "Direct"	36	media.access === "direct"
71	? { reference, uri: classified.uri, name, mimeType }	37	? { reference, uri: media.uri, name, mimeType }
72	: {	38	: {
73	reference,	39	reference,
74	environmentId: input.environmentId,	40	environmentId: input.environmentId,
75	threadId: input.threadId,	41	threadId: input.threadId,
76	resource: { _tag: "media-file", threadId: input.threadId, path },	42	resource: media.resource,
77	name,	43	name,
78	mimeType,	44	mimeType,
79	};	45	};
80	return kind === "video"	46	return kind === "video"
81	? {	47	? { kind, source: { type: "media", name, mimeType, ...target, actionsSource } }
82	kind,	48	: { kind, source: { kind, name, ...target, actionsSource } };
83	source: { type: "media", name, mimeType, ...target, actionsSource },
84	}
85	: {
86	kind,
87	source: { kind, name, ...target, actionsSource },
88	};
89	}	49	}

apps/mobile/src/lib/mediaActions.ts+73-46

...	@@ -1,4 +1,5 @@	...	@@ -1,4 +1,5 @@
1	import { useNavigation } from "@react-navigation/native";	1	import { useNavigation } from "@react-navigation/native";
		2	import type { MediaActionId } from "@t3tools/client-runtime/media-actions";
2	import type { MediaReference } from "@t3tools/client-runtime/media-reference";	3	import type { MediaReference } from "@t3tools/client-runtime/media-reference";
3	import type { AssetResource, EnvironmentId, ThreadId } from "@t3tools/contracts";	4	import type { AssetResource, EnvironmentId, ThreadId } from "@t3tools/contracts";
4	import { normalizeNativeMarkdownUrl } from "@t3tools/mobile-markdown-text/links";	5	import { normalizeNativeMarkdownUrl } from "@t3tools/mobile-markdown-text/links";
...	@@ -7,18 +8,23 @@ import { Alert } from "react-native";	...	@@ -7,18 +8,23 @@ import { Alert } from "react-native";
7		8
8	import { useRefreshAssetUrl } from "../state/assets";	9	import { useRefreshAssetUrl } from "../state/assets";
9	import { downloadAndShareAttachment, shareLocalAttachment } from "./attachmentDownload";	10	import { downloadAndShareAttachment, shareLocalAttachment } from "./attachmentDownload";
		11	import type { DraftComposerFileAttachment } from "./composerImages";
10	import { copyTextWithHaptic } from "./copyTextWithHaptic";	12	import { copyTextWithHaptic } from "./copyTextWithHaptic";
		13	import { loadLocalAttachmentPreview } from "./localAttachmentPreview";
11		14
12	/** Authored source metadata is kept separate from temporary preview/download URLs. */	15	/** Authored source metadata is kept separate from temporary preview/download URLs. */
13	export type MediaActionsSource = {	16	export type MediaActionsSource = {
14	readonly reference?: MediaReference;	17	readonly reference?: MediaReference;
15	readonly name: string;	18	readonly name: string;
16	readonly mimeType: string;	19	readonly mimeType: string;
		20	/** Anchors the iOS share sheet to the view that opened the menu. */
		21	readonly sourceIdentifier?: string;
17	} & (	22	} & (
18	\| { readonly uri: string }	23	\| { readonly uri: string }
		24	\| { readonly attachment: DraftComposerFileAttachment }
19	\| {	25	\| {
20	readonly environmentId: EnvironmentId;	26	readonly environmentId: EnvironmentId;
21	readonly threadId: ThreadId;	27	readonly threadId?: ThreadId;
22	readonly resource: AssetResource;	28	readonly resource: AssetResource;
23	}	29	}
24	);	30	);
...	@@ -39,12 +45,23 @@ export function useMediaActions(source: MediaActionsSource \| undefined, onOpenFi	...	@@ -39,12 +45,23 @@ export function useMediaActions(source: MediaActionsSource \| undefined, onOpenFi
39	controller.current = request;	45	controller.current = request;
40	setSharing(true);	46	setSharing(true);
41	void (async () => {	47	void (async () => {
		48	if ("attachment" in source) {
		49	const preview = await loadLocalAttachmentPreview(source.attachment, request.signal);
		50	if (!preview) return;
		51	try {
		52	await preview.share(request.signal, source.sourceIdentifier);
		53	} finally {
		54	preview.dispose();
		55	}
		56	return;
		57	}
42	const uri = "uri" in source ? normalizeNativeMarkdownUrl(source.uri) : await refresh();	58	const uri = "uri" in source ? normalizeNativeMarkdownUrl(source.uri) : await refresh();
43	if (request.signal.aborted) return;	59	if (request.signal.aborted) return;
44	if (uri === null) throw new Error("The file could not be loaded. Reconnect and try again.");	60	if (uri === null) throw new Error("The file could not be loaded. Reconnect and try again.");
45	const input = {	61	const input = {
46	attachment: { name: source.name, mimeType: source.mimeType },	62	attachment: { name: source.name, mimeType: source.mimeType },
47	signal: request.signal,	63	signal: request.signal,
		64	sourceIdentifier: source.sourceIdentifier,
48	};	65	};
49	if (/^(file\|content):/i.test(uri)) await shareLocalAttachment({ ...input, uri });	66	if (/^(file\|content):/i.test(uri)) await shareLocalAttachment({ ...input, uri });
50	else await downloadAndShareAttachment({ ...input, url: uri });	67	else await downloadAndShareAttachment({ ...input, url: uri });
...	@@ -66,52 +83,62 @@ export function useMediaActions(source: MediaActionsSource \| undefined, onOpenFi	...	@@ -66,52 +83,62 @@ export function useMediaActions(source: MediaActionsSource \| undefined, onOpenFi
66	};	83	};
67		84
68	const reference = source?.reference;	85	const reference = source?.reference;
69	const actions: { id: string; title: string; run: () => void; disabled?: boolean }[] = source	86	const relativePath = reference?.kind === "file" ? reference.relativePath : undefined;
70	? [	87	const threadId = source && "threadId" in source ? source.threadId : undefined;
71	...(reference?.kind === "file"	88	const actions: { id: MediaActionId; title: string; run: () => void; disabled?: boolean }[] =
72	? [	89	source
73	{	90	? [
74	id: "copy-path",	91	...(reference?.kind === "file"
75	title: "Copy full path",	92	? [
76	run: () => copyTextWithHaptic(reference.path),	93	{
77	},	94	id: "copy-full-path" as const,
78	...(reference.relativePath	95	title: "Copy full path",
79	? [	96	run: () => copyTextWithHaptic(reference.path),
80	{	97	},
81	id: "copy-relative-path",	98	]
82	title: "Copy relative path",	99	: []),
83	run: () => copyTextWithHaptic(reference.relativePath!),	100	...(relativePath
84	},	101	? [
85	]	102	{
86	: []),	103	id: "copy-relative-path" as const,
87	...(reference.relativePath && source && "environmentId" in source	104	title: "Copy relative path",
88	? [	105	run: () => copyTextWithHaptic(relativePath),
89	{	106	},
90	id: "open-file",	107	]
91	title: "Open in file viewer",	108	: []),
92	run: () => {	109	...(reference?.kind === "url"
93	onOpenFile?.();	110	? [
94	navigation.navigate("ThreadFile", {	111	{
95	environmentId: String(source.environmentId),	112	id: "copy-url" as const,
96	threadId: String(source.threadId),	113	title: "Copy URL",
97	path: reference.relativePath!.split("/"),	114	run: () => copyTextWithHaptic(reference.url),
98	});	115	},
99	},	116	]
100	},	117	: []),
101	]	118	...(relativePath && "environmentId" in source && threadId !== undefined
102	: []),	119	? [
103	]	120	{
104	: reference	121	id: "open-file" as const,
105	? [{ id: "copy-url", title: "Copy URL", run: () => copyTextWithHaptic(reference.url) }]	122	title: "Open in file viewer",
		123	run: () => {
		124	onOpenFile?.();
		125	navigation.navigate("ThreadFile", {
		126	environmentId: String(source.environmentId),
		127	threadId: String(threadId),
		128	path: relativePath.split("/"),
		129	});
		130	},
		131	},
		132	]
106	: []),	133	: []),
107	{	134	{
108	id: "share",	135	id: "save" as const,
109	title: sharing ? "Opening share sheet…" : "Save or share",	136	title: sharing ? "Opening share sheet…" : "Save or share",
110	run: share,	137	run: share,
111	disabled: sharing,	138	disabled: sharing,
112	},	139	},
113	]	140	]
114	: [];	141	: [];
115	return {	142	return {
116	title: reference?.kind === "file" ? reference.path : reference?.url,	143	title: reference?.kind === "file" ? reference.path : reference?.url,
117	actions,	144	actions,

apps/mobile/src/lib/videoPreviewSource.ts+46-17

...	@@ -1,4 +1,5 @@	...	@@ -1,4 +1,5 @@
1	import type { AssetResource, ChatFileAttachment, EnvironmentId } from "@t3tools/contracts";	1	import type { AssetResource, ChatFileAttachment, EnvironmentId } from "@t3tools/contracts";
		2	import { videoMimeType } from "@t3tools/shared/video";
2		3
3	import type { DraftComposerFileAttachment } from "./composerImages";	4	import type { DraftComposerFileAttachment } from "./composerImages";
4	import type { MediaActionsSource } from "./mediaActions";	5	import type { MediaActionsSource } from "./mediaActions";
...	@@ -14,7 +15,7 @@ export type MediaVideoPreviewSource = {	...	@@ -14,7 +15,7 @@ export type MediaVideoPreviewSource = {
14	\| { readonly uri: string }	15	\| { readonly uri: string }
15	\| {	16	\| {
16	readonly environmentId: EnvironmentId;	17	readonly environmentId: EnvironmentId;
17	readonly resource: Extract<AssetResource, { readonly _tag: "media-file" }>;	18	readonly resource: Extract<AssetResource, { readonly _tag: "attachment" \| "media-file" }>;
18	}	19	}
19	);	20	);
20		21
...	@@ -32,23 +33,51 @@ export function mediaVideoThumbnailKey(source: MediaVideoPreviewSource): string	...	@@ -32,23 +33,51 @@ export function mediaVideoThumbnailKey(source: MediaVideoPreviewSource): string
32	return JSON.stringify(	33	return JSON.stringify(
33	"uri" in source	34	"uri" in source
34	? ["media-video", source.uri]	35	? ["media-video", source.uri]
35	: [	36	: source.resource._tag === "attachment"
36	"media-video",	37	? ["media-video", source.environmentId, "attachment", source.resource.attachmentId]
37	source.environmentId,	38	: [
38	source.resource.threadId,	39	"media-video",
39	source.resource.path,	40	source.environmentId,
40	source.srcFragment ?? "",	41	source.resource.threadId,
41	],	42	source.resource.path,
		43	source.srcFragment ?? "",
		44	],
42	);	45	);
43	}	46	}
44		47
45	export type AttachmentVideoPreviewSource = (	48	export interface LocalVideoPreviewSource {
46	\| { readonly type: "local"; readonly attachment: DraftComposerFileAttachment }	49	readonly type: "local";
47	\| {	50	readonly attachment: DraftComposerFileAttachment;
48	readonly type: "remote";	51	readonly sourceIdentifier?: string;
49	readonly environmentId: EnvironmentId;	52	}
50	readonly attachment: ChatFileAttachment;	53
51	}	54	export type VideoPreviewSource = LocalVideoPreviewSource \| MediaVideoPreviewSource;
52	) & { readonly sourceIdentifier?: string };
53		55
54	export type VideoPreviewSource = AttachmentVideoPreviewSource \| MediaVideoPreviewSource;	56	export function attachmentVideoPreviewSource(
		57	environmentId: EnvironmentId,
		58	attachment: ChatFileAttachment,
		59	sourceIdentifier?: string,
		60	): MediaVideoPreviewSource {
		61	const mimeType = videoMimeType(attachment) ?? attachment.mimeType;
		62	const resource = {
		63	_tag: "attachment" as const,
		64	attachmentId: attachment.id,
		65	fileName: attachment.name,
		66	mimeType,
		67	};
		68	return {
		69	type: "media",
		70	name: attachment.name,
		71	mimeType,
		72	...(sourceIdentifier ? { sourceIdentifier } : {}),
		73	environmentId,
		74	resource,
		75	actionsSource: {
		76	name: attachment.name,
		77	mimeType,
		78	...(sourceIdentifier ? { sourceIdentifier } : {}),
		79	environmentId,
		80	resource,
		81	},
		82	};
		83	}

apps/mobile/src/state/assets.ts+17-23

 @@ -1,23 +1,20 @@
 import { useAtomValue } from "@effect/atom-react";
-import { createAssetEnvironmentAtoms, resolveAssetUrl } from "@t3tools/client-runtime/state/assets";
+import {
+  type AssetUrlState,
+  assetUrlStateFromResult,
+  createAssetEnvironmentAtoms,
+  EMPTY_ASSET_URL_ATOM,
+} from "@t3tools/client-runtime/state/assets";
 import type { AssetResource, EnvironmentId } from "@t3tools/contracts";
-import { AsyncResult, Atom } from "effect/unstable/reactivity";
 import { useCallback } from "react";
 import { connectionAtomRuntime } from "../connection/runtime";
 import { usePreparedConnection } from "./session";
 import { useAtomQueryRunner } from "./use-atom-query-runner";
-export const assetEnvironment = createAssetEnvironmentAtoms(connectionAtomRuntime);
+export type { AssetUrlState } from "@t3tools/client-runtime/state/assets";
-const EMPTY_ASSET_URL_ATOM = Atom.make(AsyncResult.initial<never, never>(false)).pipe(
-  Atom.withLabel("mobile-asset-url:empty"),
-);
-export type AssetUrlState =
+export const assetEnvironment = createAssetEnvironmentAtoms(connectionAtomRuntime);
-  | { readonly _tag: "Loading" }
-  | { readonly _tag: "Failure" }
-  | { readonly _tag: "Success"; readonly url: string };
 export function useAssetUrlState(
   environmentId: EnvironmentId | null,
 @@ -29,14 +26,10 @@ export function useAssetUrlState(
       ? EMPTY_ASSET_URL_ATOM
       : assetEnvironment.createUrl({ environmentId, input: { resource } }),
   );
-  if (result._tag === "Failure") {
+  return assetUrlStateFromResult(
-    return { _tag: "Failure" };
+    result,
-  }
+    preparedConnection._tag === "Some" ? preparedConnection.value.httpBaseUrl : null,
-  if (preparedConnection._tag === "None" || result._tag !== "Success") {
+  );
-    return { _tag: "Loading" };
-  }
-  const url = resolveAssetUrl(preparedConnection.value.httpBaseUrl, result.value.relativeUrl);
-  return url === null ? { _tag: "Failure" } : { _tag: "Success", url };
 }
 export function useAssetUrl(
 @@ -60,9 +53,10 @@ export function useRefreshAssetUrl(
   });
   return useCallback(async () => {
     if (environmentId === null || resource === null || httpBaseUrl === null) return null;
-    const result = await createUrl({ environmentId, input: { resource } });
+    const state = assetUrlStateFromResult(
-    return result._tag === "Success"
+      await createUrl({ environmentId, input: { resource } }),
-      ? resolveAssetUrl(httpBaseUrl, result.value.relativeUrl)
+      httpBaseUrl,
-      : null;
+    );
+    return state._tag === "Success" ? state.url : null;
   }, [createUrl, environmentId, httpBaseUrl, resource]);
 }

apps/web/src/assets/assetUrls.ts+24-35

 @@ -1,5 +1,10 @@
 import { useAtomValue } from "@effect/atom-react";
-import { resolveAssetUrl } from "@t3tools/client-runtime/state/assets";
+import {
+  type AssetUrlState,
+  assetUrlStateFromResult,
+  EMPTY_ASSET_URL_ATOM,
+  resolveAssetUrl,
+} from "@t3tools/client-runtime/state/assets";
 import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
 import type { AssetResource, EnvironmentId } from "@t3tools/contracts";
 import { AsyncResult } from "effect/unstable/reactivity";
 @@ -9,58 +14,42 @@ import { assetEnvironment } from "~/state/assets";
 import { usePreparedConnection } from "~/state/session";
 import { useAtomQueryRunner } from "~/state/use-atom-query-runner";
-export { resolveAssetUrl } from "@t3tools/client-runtime/state/assets";
+export { resolveAssetUrl, type AssetUrlState } from "@t3tools/client-runtime/state/assets";
-export type AssetUrlState =
-  | { readonly _tag: "Loading" }
-  | { readonly _tag: "Failure" }
-  | { readonly _tag: "Success"; readonly url: string; readonly sourcePath?: string };
 export function useAssetUrlState(
-  environmentId: EnvironmentId,
+  environmentId: EnvironmentId | null,
-  resource: AssetResource,
+  resource: AssetResource | null,
 ): AssetUrlState {
   const preparedConnection = usePreparedConnection(environmentId);
   const result = useAtomValue(
-    assetEnvironment.createUrl({
+    environmentId === null || resource === null
-      environmentId,
+      ? EMPTY_ASSET_URL_ATOM
-      input: { resource },
+      : assetEnvironment.createUrl({ environmentId, input: { resource } }),
-    }),
+  );
+  return assetUrlStateFromResult(
+    result,
+    preparedConnection._tag === "Some" ? preparedConnection.value.httpBaseUrl : null,
   );
-  if (result._tag === "Failure") {
-    return { _tag: "Failure" };
-  }
-  if (preparedConnection._tag === "None" || result._tag !== "Success") {
-    return { _tag: "Loading" };
-  }
-  const url = resolveAssetUrl(preparedConnection.value.httpBaseUrl, result.value.relativeUrl);
-  return url === null
-    ? { _tag: "Failure" }
-    : {
-        _tag: "Success",
-        url,
-        ...(result.value.sourcePath !== undefined ? { sourcePath: result.value.sourcePath } : {}),
-      };
 }
-export function useAssetUrl(environmentId: EnvironmentId, resource: AssetResource): string | null {
+export function useAssetUrl(
+  environmentId: EnvironmentId | null,
+  resource: AssetResource | null,
+): string | null {
   const result = useAssetUrlState(environmentId, resource);
-  if (result._tag !== "Success") {
+  return result._tag === "Success" ? result.url : null;
-    return null;
-  }
-  return result.url;
 }
-/** Re-mints an exact-file capability after a file change or an explicit retry. */
 export function useAssetUrlRefresh(
-  environmentId: EnvironmentId,
+  environmentId: EnvironmentId | null,
-  resource: AssetResource,
+  resource: AssetResource | null,
 ): () => Promise<void> {
   const refresh = useAtomQueryRunner(assetEnvironment.createUrl, {
     reportFailure: false,
     refresh: true,
   });
   return useCallback(async () => {
+    if (environmentId === null || resource === null) return;
     const result = await refresh({ environmentId, input: { resource } });
     if (result._tag === "Failure") throw squashAtomCommandFailure(result);
   }, [environmentId, resource, refresh]);

apps/web/src/components/ChatMarkdown.tsx-24

...	@@ -1274,7 +1274,6 @@ function ChatMarkdownVideo(props: {	...	@@ -1274,7 +1274,6 @@ function ChatMarkdownVideo(props: {
1274	readonly mediaIdentity?: string \| undefined;	1274	readonly mediaIdentity?: string \| undefined;
1275	readonly actionsSource?: MediaActionSource \| undefined;	1275	readonly actionsSource?: MediaActionSource \| undefined;
1276	readonly onRetry?: (() => Promise<void>) \| undefined;	1276	readonly onRetry?: (() => Promise<void>) \| undefined;
1277	readonly onImageExpand?: ((preview: ExpandedImagePreview) => void) \| undefined;
1278	}) {	1277	}) {
1279	return (	1278	return (
1280	<MediaVideoPlayer	1279	<MediaVideoPlayer
...	@@ -1296,27 +1295,6 @@ function ChatMarkdownVideo(props: {	...	@@ -1296,27 +1295,6 @@ function ChatMarkdownVideo(props: {
1296	)}	1295	)}
1297	onRetry={props.onRetry}	1296	onRetry={props.onRetry}
1298	actionsSource={props.actionsSource}	1297	actionsSource={props.actionsSource}
1299	onExpand={
1300	props.onImageExpand
1301	? (src) => {
1302	props.onImageExpand?.({
1303	images: [
1304	{
1305	src,
1306	name: props.alt \|\| "video",
1307	type: "video",
1308	autoPlay: false,
1309	...(props.originalUrl ? { originalUrl: props.originalUrl } : {}),
1310	...(props.actionsSource
1311	? { actionsSource: { ...props.actionsSource, src } }
1312	: {}),
1313	},
1314	],
1315	index: 0,
1316	});
1317	}
1318	: undefined
1319	}
1320	/>	1298	/>
1321	);	1299	);
1322	}	1300	}
...	@@ -1378,7 +1356,6 @@ export const ChatMarkdownAssetImage = memo(function ChatMarkdownAssetImage(props	...	@@ -1378,7 +1356,6 @@ export const ChatMarkdownAssetImage = memo(function ChatMarkdownAssetImage(props
1378	style={props.style}	1356	style={props.style}
1379	mediaIdentity={JSON.stringify([props.environmentId, props.resource, props.srcFragment])}	1357	mediaIdentity={JSON.stringify([props.environmentId, props.resource, props.srcFragment])}
1380	onRetry={refreshAssetUrl}	1358	onRetry={refreshAssetUrl}
1381	onImageExpand={props.onImageExpand}
1382	actionsSource={actionsSource}	1359	actionsSource={actionsSource}
1383	/>	1360	/>
1384	);	1361	);
...	@@ -2642,7 +2619,6 @@ function ChatMarkdown({	...	@@ -2642,7 +2619,6 @@ function ChatMarkdown({
2642	copyMarkdown={copyMarkdown}	2619	copyMarkdown={copyMarkdown}
2643	originalUrl={originalUrl}	2620	originalUrl={originalUrl}
2644	style={authoredSizeStyle}	2621	style={authoredSizeStyle}
2645	onImageExpand={imageExpand}
2646	actionsSource={actionsSource}	2622	actionsSource={actionsSource}
2647	/>	2623	/>
2648	);	2624	);

apps/web/src/components/ChatView.logic.test.ts-9

 @@ -24,7 +24,6 @@ import {
   dismissBranchMismatchForSession,
   ENVIRONMENT_RECONNECT_WARNING_GRACE_MS,
   getStartedThreadModelChangeBlockReason,
-  isVideoPreviewRequestCurrent,
   hasEnvironmentReconnectWarningGraceElapsed,
   hasServerAcknowledgedLocalDispatch,
   isBranchMismatchDismissedForSession,
 @@ -130,14 +129,6 @@ describe("proactive panels", () => {
   });
 });
-describe("isVideoPreviewRequestCurrent", () => {
-  it("rejects changed threads and replaced previews", () => {
-    expect(isVideoPreviewRequestCurrent("thread-1", "thread-2", 1, 1)).toBe(false);
-    expect(isVideoPreviewRequestCurrent("thread-1", "thread-1", 1, 2)).toBe(false);
-    expect(isVideoPreviewRequestCurrent("thread-1", "thread-1", 2, 2)).toBe(true);
-  });
-});
 describe("toolGroupConsumesUpwardNavigation", () => {
   class ScrollElement extends EventTarget {
     scrollTop = 0;

apps/web/src/components/ChatView.logic.ts-9

...	@@ -399,15 +399,6 @@ export async function resolveFileAttachmentUrl(input: {	...	@@ -399,15 +399,6 @@ export async function resolveFileAttachmentUrl(input: {
399	return url;	399	return url;
400	}	400	}
401		401
402	export function isVideoPreviewRequestCurrent(
403	requestThreadKey: string,
404	currentThreadKey: string,
405	requestId: number,
406	currentRequestId: number,
407	): boolean {
408	return requestThreadKey === currentThreadKey && requestId === currentRequestId;
409	}
410
411	export function revokeUserMessagePreviewUrls(message: ChatMessage): void {	402	export function revokeUserMessagePreviewUrls(message: ChatMessage): void {
412	if (message.role !== "user" \|\| !message.attachments) {	403	if (message.role !== "user" \|\| !message.attachments) {
413	return;	404	return;

apps/web/src/components/ChatView.tsx+12-53

 @@ -135,7 +135,6 @@ import {
   type ChatMessage,
   isBrowserPreviewAttachment,
   isImageAttachment,
-  videoMimeType,
   type SessionPhase,
   type Thread,
   type TurnDiffSummary,
 @@ -300,7 +299,7 @@ import type { AssistantCitationRequest } from "./chat/AssistantCitationSource";
 import { resolveTimelineIsAtEnd } from "./chat/MessagesTimeline.logic";
 import { ChatHeader } from "./chat/ChatHeader";
 import { PanelLayoutControls, RightPanelMaximizeControl } from "./chat/PanelLayoutControls";
-import { type ExpandedImagePreview } from "./chat/ExpandedImagePreview";
+import { expandedImageKey, type ExpandedImagePreview } from "./chat/ExpandedImagePreview";
 import { NoActiveThreadState } from "./NoActiveThreadState";
 import { WorkspacePageHeader } from "./WorkspacePageHeader";
 import {
 @@ -375,7 +374,6 @@ import {
   deriveLockedProvider,
   readFileAsDataUrl,
   resolveFileAttachmentUrl,
-  isVideoPreviewRequestCurrent,
   reconcileMountedTerminalThreadIds,
   resolveBackgroundDraftWorkspaceOptions,
   resolveDraftHeroState,
 @@ -1509,19 +1507,13 @@ function ChatViewContent(props: ChatViewProps) {
     [composerRef],
   );
   const [isWorkspaceFileDragActive, setIsWorkspaceFileDragActive] = useState(false);
-  const routeThreadKeyRef = useRef(routeThreadKey);
-  routeThreadKeyRef.current = routeThreadKey;
-  const videoPreviewRequestIdRef = useRef(0);
-  const cancelVideoPreviewRequest = useCallback(() => {
-    videoPreviewRequestIdRef.current += 1;
-  }, []);
-  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;
+    if (item?.type !== "video" || item.src === null || !item.src.startsWith("blob:")) return;
-    return () => revokeBlobPreviewUrl(item.src);
+    const src = item.src;
+    return () => revokeBlobPreviewUrl(src);
   }, [expandedImage]);
   const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
   const [feedbackSubmissionsByThreadKey, setFeedbackSubmissionsByThreadKey] = useState<
 @@ -2575,12 +2567,11 @@ function ChatViewContent(props: ChatViewProps) {
   useEffect(() => {
     return () => {
       clearAttachmentPreviewHandoffs();
-      cancelVideoPreviewRequest();
       for (const message of optimisticUserMessagesRef.current) {
         revokeUserMessagePreviewUrls(message);
       }
     };
-  }, [cancelVideoPreviewRequest, clearAttachmentPreviewHandoffs]);
+  }, [clearAttachmentPreviewHandoffs]);
   const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
     if (previewUrls.length === 0) return;
 @@ -2608,18 +2599,6 @@ function ChatViewContent(props: ChatViewProps) {
         toastManager.add({ type: "error", title: "The environment is not connected." });
         return;
       }
-      const isVideo = videoMimeType(attachment) !== null;
-      const action = isVideo ? "play" : "download";
-      const videoPreviewRequestId = isVideo ? ++videoPreviewRequestIdRef.current : 0;
-      const isCurrentRequest = () =>
-        !isVideo ||
-        isVideoPreviewRequestCurrent(
-          routeThreadKey,
-          routeThreadKeyRef.current,
-          videoPreviewRequestId,
-          videoPreviewRequestIdRef.current,
-        );
-      if (isVideo) setOpeningVideoAttachmentId(attachment.id);
       try {
         const url = await resolveFileAttachmentUrl({
 @@ -2628,30 +2607,19 @@ function ChatViewContent(props: ChatViewProps) {
           httpBaseUrl: connection.httpBaseUrl,
           createAssetUrl: createAttachmentAssetUrl,
         });
-        if (!isCurrentRequest()) return;
-        if (isVideo) {
-          setExpandedImage({
-            images: [{ src: url, name: attachment.name, type: "video" }],
-            index: 0,
-          });
-          return;
-        }
         const anchor = document.createElement("a");
         anchor.href = url;
         anchor.download = attachment.name;
         anchor.click();
       } catch (error) {
-        if (!isCurrentRequest()) return;
         toastManager.add({
           type: "error",
-          title: "Could not " + action + " " + attachment.name,
+          title: "Could not download " + attachment.name,
           description: error instanceof Error ? error.message : "The attachment is unavailable.",
         });
-      } finally {
-        if (isVideo && isCurrentRequest()) setOpeningVideoAttachmentId(null);
       }
     },
-    [createAttachmentAssetUrl, environmentId, routeThreadKey],
+    [createAttachmentAssetUrl, environmentId],
   );
   const openFileAttachment = useCallback(
     (attachment: ChatFileAttachment) => {
 @@ -4690,10 +4658,8 @@ function ChatViewContent(props: ChatViewProps) {
       return [];
     });
     resetLocalDispatch();
-    cancelVideoPreviewRequest();
-    setOpeningVideoAttachmentId(null);
     setExpandedImage(null);
-  }, [cancelVideoPreviewRequest, draftId, resetLocalDispatch, threadId]);
+  }, [draftId, resetLocalDispatch, threadId]);
   const closeExpandedImage = useCallback(() => {
     setExpandedImage(null);
 @@ -7188,14 +7154,9 @@ function ChatViewContent(props: ChatViewProps) {
     }
   };
-  const onExpandTimelineImage = useCallback(
+  const onExpandTimelineImage = useCallback((preview: ExpandedImagePreview) => {
-    (preview: ExpandedImagePreview) => {
+    setExpandedImage(preview);
-      cancelVideoPreviewRequest();
+  }, []);
-      setOpeningVideoAttachmentId(null);
-      setExpandedImage(preview);
-    },
-    [cancelVideoPreviewRequest],
-  );
   const onOpenTurnDiff = useCallback(
     (turnId: TurnId, filePath?: string) => {
       if (!isServerThread || !activeThreadRef) return;
 @@ -7525,7 +7486,6 @@ function ChatViewContent(props: ChatViewProps) {
                 onImageExpand={onExpandTimelineImage}
                 onFileOpen={openFileAttachment}
                 onFileDownload={downloadFileAttachment}
-                openingVideoAttachmentId={openingVideoAttachmentId}
                 markdownCwd={gitCwd ?? undefined}
                 resolvedTheme={resolvedTheme}
                 timestampFormat={timestampFormat}
 @@ -7701,7 +7661,6 @@ function ChatViewContent(props: ChatViewProps) {
                             setThreadError={setThreadError}
                             onExpandImage={onExpandTimelineImage}
                             onFileOpen={openFileAttachment}
-                            openingVideoAttachmentId={openingVideoAttachmentId}
                           />
                         </div>
                       </ComposerSurface.Host>
 @@ -7922,7 +7881,7 @@ function ChatViewContent(props: ChatViewProps) {
       {expandedImage && (
         <ExpandedImageDialog
-          key={`${expandedImage.images[expandedImage.index]?.src ?? "image"}:${expandedImage.index}`}
+          key={expandedImageKey(expandedImage)}
           preview={expandedImage}
           onClose={closeExpandedImage}
         />

apps/web/src/components/chat/ChatComposer.tsx+3-13

...	@@ -741,7 +741,6 @@ export interface ChatComposerProps {	...	@@ -741,7 +741,6 @@ export interface ChatComposerProps {
741	setThreadError: (threadId: ThreadId \| null, error: string \| null) => void;	741	setThreadError: (threadId: ThreadId \| null, error: string \| null) => void;
742	onExpandImage: (preview: ExpandedImagePreview) => void;	742	onExpandImage: (preview: ExpandedImagePreview) => void;
743	onFileOpen: (attachment: ChatFileAttachment) => void;	743	onFileOpen: (attachment: ChatFileAttachment) => void;
744	openingVideoAttachmentId: string \| null;
745	}	744	}
746		745
747	// --------------------------------------------------------------------------	746	// --------------------------------------------------------------------------
...	@@ -820,7 +819,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)	...	@@ -820,7 +819,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
820	setThreadError,	819	setThreadError,
821	onExpandImage,	820	onExpandImage,
822	onFileOpen,	821	onFileOpen,
823	openingVideoAttachmentId,
824	} = props;	822	} = props;
825	const activeTasksProgress = props.threadSyncPhase === null ? props.activeTasksProgress : null;	823	const activeTasksProgress = props.threadSyncPhase === null ? props.activeTasksProgress : null;
826	const activeTaskSteps = props.threadSyncPhase === null ? props.activeTaskSteps : null;	824	const activeTaskSteps = props.threadSyncPhase === null ? props.activeTaskSteps : null;
...	@@ -4020,7 +4018,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)	...	@@ -4020,7 +4018,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
4020	maxFileAttachmentBytes !== null &&	4018	maxFileAttachmentBytes !== null &&
4021	file.sizeBytes <= maxFileAttachmentBytes;	4019	file.sizeBytes <= maxFileAttachmentBytes;
4022	const upload = fileCanUpload ? uploadsByImageId[file.id] : undefined;	4020	const upload = fileCanUpload ? uploadsByImageId[file.id] : undefined;
4023	const isOpening = file.uploadedAttachmentId === openingVideoAttachmentId;
4024	return (	4021	return (
4025	<div	4022	<div
4026	key={file.id}	4023	key={file.id}
...	@@ -4028,12 +4025,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)	...	@@ -4028,12 +4025,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
4028	>	4025	>
4029	<button	4026	<button
4030	type="button"	4027	type="button"
4031	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"	4028	className="flex h-full w-full cursor-zoom-in flex-col items-center justify-center gap-1 px-1 text-white"
4032	aria-busy={isOpening \|\| undefined}	4029	aria-label={`Play ${file.name}`}
4033	aria-disabled={isOpening \|\| undefined}
4034	aria-label={`${isOpening ? "Loading" : "Play"} ${file.name}`}
4035	onClick={() => {	4030	onClick={() => {
4036	if (isOpening) return;
4037	if (file.file !== null) {	4031	if (file.file !== null) {
4038	const preview = buildExpandedImagePreview([file], file.id);	4032	const preview = buildExpandedImagePreview([file], file.id);
4039	if (preview) onExpandImage(preview);	4033	if (preview) onExpandImage(preview);
...	@@ -4049,11 +4043,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)	...	@@ -4049,11 +4043,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
4049	<span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-black/10" />	4043	<span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-black/10" />
4050	</>	4044	</>
4051	)}	4045	)}
4052	{isOpening ? (	4046	<PlayIcon className="relative z-10 size-4 fill-current drop-shadow-md" />
4053	<span className="relative z-10 text-[10px]">Loading…</span>
4054	) : (
4055	<PlayIcon className="relative z-10 size-4 fill-current drop-shadow-md" />
4056	)}
4057	</button>	4047	</button>
4058	{upload?.status === "uploading" && (	4048	{upload?.status === "uploading" && (
4059	<span className="pointer-events-none absolute inset-x-0 bottom-0 bg-background/85 px-1 text-center text-[10px] text-foreground">	4049	<span className="pointer-events-none absolute inset-x-0 bottom-0 bg-background/85 px-1 text-center text-[10px] text-foreground">

apps/web/src/components/chat/ExpandedImageDialog.tsx+35-25

 @@ -2,11 +2,12 @@ import { memo, useCallback, useEffect, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";
 import { Button } from "../ui/button";
-import type { ExpandedImagePreview } from "./ExpandedImagePreview";
+import type { ExpandedImageItem, ExpandedImagePreview } from "./ExpandedImagePreview";
-import { prepareVideoFirstFrame } from "../../lib/videoFirstFrame";
 import { resolveExternalWebLinkHost } from "./externalLinkContextMenu";
+import { useAssetUrlRefresh, useAssetUrlState } from "../../assets/assetUrls";
 import { OpenMediaLink } from "../media/OpenMediaLink";
 import { MediaActions, type MediaActionSource } from "../media/MediaActions";
+import { MediaVideoPlayer } from "../media/MediaVideoPlayer";
 import { isContextMenuOpen } from "../../contextMenuFallback";
 interface ExpandedImageDialogProps {
 @@ -14,23 +15,47 @@ interface ExpandedImageDialogProps {
   onClose: () => void;
 }
+const EXPANDED_MEDIA_STATE_CLASS_NAME =
+  "flex aspect-auto h-48 min-h-0 w-[min(92vw,32rem)] flex-col items-center justify-center gap-3 rounded-lg border border-border/70 bg-black p-6 text-center text-sm text-white shadow-2xl";
 function ExpandedMediaFailure({ children }: { children: ReactNode }) {
   return (
-    <div
+    <div role="alert" className={EXPANDED_MEDIA_STATE_CLASS_NAME}>
-      role="alert"
-      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-sm text-white shadow-2xl"
-    >
       {children}
     </div>
   );
 }
+function ExpandedVideo({ item }: { readonly item: ExpandedImageItem }) {
+  const asset = item.actionsSource?.asset;
+  const assetUrl = useAssetUrlState(asset?.environmentId ?? null, asset?.resource ?? null);
+  const refreshAssetUrl = useAssetUrlRefresh(asset?.environmentId ?? null, asset?.resource ?? null);
+  const src = asset
+    ? assetUrl._tag === "Success"
+      ? assetUrl.url + (item.srcFragment ?? "")
+      : null
+    : item.src;
+  return (
+    <MediaVideoPlayer
+      src={src}
+      label={item.name}
+      sourceFailed={assetUrl._tag === "Failure"}
+      originalUrl={item.originalUrl}
+      preload="metadata"
+      autoPlay={item.autoPlay ?? true}
+      className="block max-h-[86vh] max-w-[92vw] text-center"
+      videoClassName="aspect-auto max-h-[86vh] w-auto max-w-[92vw] rounded-lg border border-border/70 shadow-2xl"
+      stateClassName={EXPANDED_MEDIA_STATE_CLASS_NAME}
+      onRetry={asset ? refreshAssetUrl : undefined}
+    />
+  );
+}
 export const ExpandedImageDialog = memo(function ExpandedImageDialog({
   preview,
   onClose,
 }: ExpandedImageDialogProps) {
   const [imageOffset, setImageOffset] = useState(0);
-  const [failedVideoSrc, setFailedVideoSrc] = useState<string | null>(null);
   const [failedImageSrc, setFailedImageSrc] = useState<string | null>(null);
   const index = (preview.index + imageOffset + preview.images.length) % preview.images.length;
   const item = preview.images[index];
 @@ -125,24 +150,9 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
           >
             <XIcon />
           </Button>
-          {item.type === "video" && failedVideoSrc === item.src ? (
+          {item.type === "video" ? (
-            <ExpandedMediaFailure>
+            <ExpandedVideo key={index} item={item} />
-              <p>This video could not be loaded or played.</p>
+          ) : item.src === null || failedImageSrc === item.src ? (
-              <OpenMediaLink originalUrl={item.originalUrl} src={item.src} fileName={item.name} />
-            </ExpandedMediaFailure>
-          ) : item.type === "video" ? (
-            <video
-              src={item.src}
-              aria-label={item.name}
-              autoPlay={item.autoPlay ?? true}
-              preload="metadata"
-              controls
-              playsInline
-              onLoadedMetadata={(event) => prepareVideoFirstFrame(event.currentTarget)}
-              onError={() => setFailedVideoSrc(item.src)}
-              className="max-h-[86vh] max-w-[92vw] rounded-lg border border-border/70 bg-black object-contain shadow-2xl"
-            />
-          ) : failedImageSrc === item.src ? (
             <ExpandedMediaFailure>
               <p>
                 {openOriginalLink

apps/web/src/components/chat/ExpandedImagePreview.tsx+45-45

...	@@ -3,31 +3,30 @@ import { type ChatImageAttachment, isVideoAttachment } from "../../types";	...	@@ -3,31 +3,30 @@ import { type ChatImageAttachment, isVideoAttachment } from "../../types";
3	import type {	3	import type {
4	AssetCreateUrlResult,	4	AssetCreateUrlResult,
5	AssetResource,	5	AssetResource,
		6	ChatFileAttachment,
6	EnvironmentId,	7	EnvironmentId,
7	ScopedThreadRef,	8	ScopedThreadRef,
8	} from "@t3tools/contracts";	9	} from "@t3tools/contracts";
9	import {	10	import { videoMimeType } from "@t3tools/shared/video";
10	classifyMarkdownImageSource,	11	import { resolveMediaSource } from "@t3tools/client-runtime/media-source";
11	markdownImageSourceFragment,
12	} from "@t3tools/client-runtime/markdown-images";
13	import { mediaFileReference, mediaUrlReference } from "@t3tools/client-runtime/media-reference";
14	import { resolveAssetUrl } from "@t3tools/client-runtime/state/assets";	12	import { resolveAssetUrl } from "@t3tools/client-runtime/state/assets";
15	import {	13	import {
16	squashAtomCommandFailure,	14	squashAtomCommandFailure,
17	type AtomCommandResult,	15	type AtomCommandResult,
18	} from "@t3tools/client-runtime/state/runtime";	16	} from "@t3tools/client-runtime/state/runtime";
19	import { mediaKindFromPath, mediaMimeTypeFromExtension } from "@t3tools/shared/filePreview";
20	import { resolveExternalWebLinkHost } from "./externalLinkContextMenu";	17	import { resolveExternalWebLinkHost } from "./externalLinkContextMenu";
21	import type { MediaActionSource } from "../media/MediaActions";	18	import type { MediaActionSource } from "../media/MediaActions";
22	import { resolveProtocolRelativeMediaUrl } from "../media/mediaContent";	19	import { resolveProtocolRelativeMediaUrl } from "../media/mediaContent";
23		20
24	export interface ExpandedImageItem {	21	export interface ExpandedImageItem {
25	src: string;	22	/** A loadable URL, or null when the dialog must mint one from `asset` first. */
		23	src: string \| null;
26	name: string;	24	name: string;
27	type?: "video";	25	type?: "video";
28	autoPlay?: boolean;	26	autoPlay?: boolean;
29	/** Authored remote destination to open when embedding fails, never a generated asset URL. */	27	/** Authored remote destination to open when embedding fails, never a generated asset URL. */
30	originalUrl?: string;	28	originalUrl?: string;
		29	srcFragment?: string;
31	actionsSource?: MediaActionSource;	30	actionsSource?: MediaActionSource;
32	}	31	}
33		32
...	@@ -49,45 +48,24 @@ export async function resolveMarkdownMediaPreview(input: {	...	@@ -49,45 +48,24 @@ export async function resolveMarkdownMediaPreview(input: {
49	input: { resource: AssetResource };	48	input: { resource: AssetResource };
50	}) => Promise<AtomCommandResult<AssetCreateUrlResult, unknown>>;	49	}) => Promise<AtomCommandResult<AssetCreateUrlResult, unknown>>;
51	}): Promise<ExpandedImagePreview \| null> {	50	}): Promise<ExpandedImagePreview \| null> {
52	const source =	51	const media = resolveMediaSource(input.source, {
53	input.resolvedFilePath === undefined	52	threadId: input.threadRef?.threadId,
54	? classifyMarkdownImageSource(input.source, input.cwd)	53	workspaceRoot: input.cwd,
55	: { _tag: "WorkspaceFile" as const, path: input.resolvedFilePath };	54	resolvedFilePath: input.resolvedFilePath,
56	if (source._tag === "Blocked") return null;	55	});
57		56	if (media === null) return null;
58	const path =	57	const { kind, name, reference } = media;
59	source._tag === "Direct"
60	? source.uri.split(/[?#]/, 1)[0]!
61	: source.path.replace(/:\d+(?::\d+)?$/, "");
62	const name = path.split(/[\\/]/).at(-1) ?? "";
63	const extensionIndex = name.lastIndexOf(".");
64	const fileMimeType =
65	extensionIndex < 0 ? null : mediaMimeTypeFromExtension(name.slice(extensionIndex));
66	const kind =
67	source._tag === "Direct"
68	? mediaKindFromPath(source.uri)
69	: fileMimeType === null
70	? null
71	: fileMimeType.startsWith("video/")
72	? "video"
73	: "image";
74	if (kind === null) return null;
75
76	const reference =
77	source._tag === "Direct" ? mediaUrlReference(source.uri) : mediaFileReference(path, input.cwd);
78	const relativePath = reference?.kind === "file" ? reference.relativePath : undefined;	58	const relativePath = reference?.kind === "file" ? reference.relativePath : undefined;
		59
79	let src: string;	60	let src: string;
80	let asset: MediaActionSource["asset"];	61	let asset: MediaActionSource["asset"];
81	if (source._tag === "Direct") {	62	if (media.access === "direct") {
82	src = resolveProtocolRelativeMediaUrl(source.uri);	63	src = resolveProtocolRelativeMediaUrl(media.uri);
83	} else {	64	} else {
84	if (!input.threadRef \|\| !input.httpBaseUrl) {	65	if (media.access === "unavailable" \|\| !input.threadRef \|\| !input.httpBaseUrl) {
85	throw new Error("Reconnect to this environment and open the media again.");	66	throw new Error("Reconnect to this environment and open the media again.");
86	}	67	}
87	asset = {	68	asset = { environmentId: input.threadRef.environmentId, resource: media.resource };
88	environmentId: input.threadRef.environmentId,
89	resource: { _tag: "media-file", threadId: input.threadRef.threadId, path },
90	};
91	const result = await input.createAssetUrl({	69	const result = await input.createAssetUrl({
92	environmentId: asset.environmentId,	70	environmentId: asset.environmentId,
93	input: { resource: asset.resource },	71	input: { resource: asset.resource },
...	@@ -95,20 +73,21 @@ export async function resolveMarkdownMediaPreview(input: {	...	@@ -95,20 +73,21 @@ export async function resolveMarkdownMediaPreview(input: {
95	if (result._tag === "Failure") throw squashAtomCommandFailure(result);	73	if (result._tag === "Failure") throw squashAtomCommandFailure(result);
96	const assetUrl = resolveAssetUrl(input.httpBaseUrl, result.value.relativeUrl);	74	const assetUrl = resolveAssetUrl(input.httpBaseUrl, result.value.relativeUrl);
97	if (assetUrl === null) throw new Error("The environment returned an invalid media URL.");	75	if (assetUrl === null) throw new Error("The environment returned an invalid media URL.");
98	src = assetUrl + markdownImageSourceFragment(input.source);	76	src = assetUrl + media.srcFragment;
99	}	77	}
100	return {	78	return {
101	images: [	79	images: [
102	{	80	{
103	src,	81	src,
104	name: name \|\| kind,	82	name,
105	...(kind === "video" ? { type: "video", autoPlay: false } : {}),	83	...(kind === "video" ? { type: "video", autoPlay: false } : {}),
106	...(source._tag === "Direct" && resolveExternalWebLinkHost(source.uri) !== null	84	...(media.access === "direct" && resolveExternalWebLinkHost(media.uri) !== null
107	? { originalUrl: source.uri }	85	? { originalUrl: media.uri }
108	: {}),	86	: {}),
		87	...(media.srcFragment ? { srcFragment: media.srcFragment } : {}),
109	actionsSource: {	88	actionsSource: {
110	kind,	89	kind,
111	name: name \|\| kind,	90	name,
112	src,	91	src,
113	...(reference ? { reference } : {}),	92	...(reference ? { reference } : {}),
114	...(asset ? { asset } : {}),	93	...(asset ? { asset } : {}),
...	@@ -122,6 +101,27 @@ export async function resolveMarkdownMediaPreview(input: {	...	@@ -122,6 +101,27 @@ export async function resolveMarkdownMediaPreview(input: {
122	};	101	};
123	}	102	}
124		103
		104	export function buildAttachmentVideoAsset(
		105	environmentId: EnvironmentId,
		106	attachment: ChatFileAttachment,
		107	): NonNullable<MediaActionSource["asset"]> {
		108	return {
		109	environmentId,
		110	resource: {
		111	_tag: "attachment" as const,
		112	attachmentId: attachment.id,
		113	fileName: attachment.name,
		114	mimeType: videoMimeType(attachment) ?? attachment.mimeType,
		115	},
		116	};
		117	}
		118
		119	export function expandedImageKey(preview: ExpandedImagePreview): string {
		120	const item = preview.images[preview.index];
		121	const asset = item?.actionsSource?.asset;
		122	return `${item?.src ?? (asset ? JSON.stringify([asset.environmentId, asset.resource]) : "image")}:${preview.index}`;
		123	}
		124
125	export function attachVideoThumbnail(video: HTMLVideoElement, file: File): () => void {	125	export function attachVideoThumbnail(video: HTMLVideoElement, file: File): () => void {
126	const url = URL.createObjectURL(file);	126	const url = URL.createObjectURL(file);
127	video.src = url;	127	video.src = url;

apps/web/src/components/chat/MessagesTimeline.test.tsx+31-16

...	@@ -147,7 +147,6 @@ function buildProps() {	...	@@ -147,7 +147,6 @@ function buildProps() {
147	revertTurnCountByUserMessageId: new Map(),	147	revertTurnCountByUserMessageId: new Map(),
148	onRevertUserMessage: () => {},	148	onRevertUserMessage: () => {},
149	isRevertingCheckpoint: false,	149	isRevertingCheckpoint: false,
150	openingVideoAttachmentId: null,
151	onImageExpand: () => {},	150	onImageExpand: () => {},
152	activeThreadEnvironmentId: ACTIVE_THREAD_ENVIRONMENT_ID,	151	activeThreadEnvironmentId: ACTIVE_THREAD_ENVIRONMENT_ID,
153	markdownCwd: undefined,	152	markdownCwd: undefined,
...	@@ -465,7 +464,7 @@ describe("MessagesTimeline", () => {	...	@@ -465,7 +464,7 @@ describe("MessagesTimeline", () => {
465	expect(markup).not.toContain('alt="report.pdf"');	464	expect(markup).not.toContain('alt="report.pdf"');
466	});	465	});
467		466
468	it("renders video attachments as play buttons", () => {	467	it("renders video attachments with the shared video player", () => {
469	const entry = {	468	const entry = {
470	...buildUserTimelineEntry("Watch the demo."),	469	...buildUserTimelineEntry("Watch the demo."),
471	message: {	470	message: {
...	@@ -477,6 +476,7 @@ describe("MessagesTimeline", () => {	...	@@ -477,6 +476,7 @@ describe("MessagesTimeline", () => {
477	name: "demo.mp4",	476	name: "demo.mp4",
478	mimeType: "video/mp4",	477	mimeType: "video/mp4",
479	sizeBytes: 42,	478	sizeBytes: 42,
		479	previewUrl: "https://environment.test/api/assets/demo.mp4",
480	},	480	},
481	],	481	],
482	},	482	},
...	@@ -485,22 +485,37 @@ describe("MessagesTimeline", () => {	...	@@ -485,22 +485,37 @@ describe("MessagesTimeline", () => {
485	const markup = renderToStaticMarkup(	485	const markup = renderToStaticMarkup(
486	<MessagesTimeline {...buildProps()} timelineEntries={[entry]} />,	486	<MessagesTimeline {...buildProps()} timelineEntries={[entry]} />,
487	);	487	);
488	const busyMarkup = renderToStaticMarkup(	488
489	<MessagesTimeline	489	expect(markup).toContain("<video");
490	{...buildProps()}	490	expect(markup).toContain('aria-label="demo.mp4"');
491	timelineEntries={[entry]}	491	expect(markup).toContain('controls=""');
492	openingVideoAttachmentId="attachment-demo-mp4"	492	expect(markup).not.toContain("Expand demo.mp4");
493	/>,	493	});
		494
		495	it("shows the filename while an optimistic video is unavailable", () => {
		496	const entry = {
		497	...buildUserTimelineEntry("Uploading the demo."),
		498	message: {
		499	...buildUserTimelineEntry("Uploading the demo.").message,
		500	attachments: [
		501	{
		502	type: "file" as const,
		503	id: "optimistic-demo-mp4",
		504	name: "pending-demo.mp4",
		505	mimeType: "video/mp4",
		506	sizeBytes: 42,
		507	downloadable: false,
		508	},
		509	],
		510	},
		511	};
		512
		513	const markup = renderToStaticMarkup(
		514	<MessagesTimeline {...buildProps()} timelineEntries={[entry]} />,
494	);	515	);
495		516
496	expect(markup).toContain('aria-label="Play demo.mp4"');	517	expect(markup).not.toContain("<video");
497	expect(markup).toContain("min-h-[72px]");	518	expect(markup).toContain(">pending-demo.mp4</div>");
498	expect(markup).toContain(">demo.mp4</span>");
499	expect(markup).not.toContain('aria-label="Download demo.mp4"');
500	expect(busyMarkup).toContain('aria-busy="true"');
501	expect(busyMarkup).toContain('aria-disabled="true"');
502	expect(busyMarkup).not.toContain('disabled=""');
503	expect(busyMarkup).toContain(">Loading…</span>");
504	});	519	});
505	it("renders an ordinary file download button without creating its URL in advance", () => {	520	it("renders an ordinary file download button without creating its URL in advance", () => {
506	const entry = {	521	const entry = {

apps/web/src/components/chat/MessagesTimeline.tsx+53-40

 @@ -1,6 +1,5 @@
 import {
   type AssistantCitation,
-  type ChatFileAttachment,
   type EnvironmentId,
   type MessageId,
   type ScopedThreadRef,
 @@ -50,6 +49,7 @@ import {
   workLogEntryIsToolLike,
 } from "../../session-logic";
 import {
+  type ChatFileAttachment,
   type ChatImageAttachment,
   isBrowserPreviewAttachment,
   isFileAttachment,
 @@ -79,7 +79,6 @@ import {
   MessageCircleIcon,
   MousePointerClickIcon,
   PaintbrushIcon,
-  PlayIcon,
   SearchIcon,
   SquarePenIcon,
   TerminalIcon,
 @@ -89,8 +88,14 @@ import {
   ZapIcon,
 } from "lucide-react";
 import { Button } from "../ui/button";
+import { useAssetUrlRefresh, useAssetUrlState } from "../../assets/assetUrls";
+import { MediaVideoPlayer } from "../media/MediaVideoPlayer";
 import { getVirtualizedScrollFadeClassName } from "../ui/scroll-area";
-import { buildExpandedImagePreview, ExpandedImagePreview } from "./ExpandedImagePreview";
+import {
+  buildAttachmentVideoAsset,
+  buildExpandedImagePreview,
+  ExpandedImagePreview,
+} from "./ExpandedImagePreview";
 import { ProposedPlanCard } from "./ProposedPlanCard";
 import { ChangedFilesCard } from "./ChangedFilesTree";
 import { shouldAutoExpandChangedFiles } from "./changedFilesPresentation";
 @@ -188,7 +193,6 @@ interface TimelineRowSharedState {
   onImageExpand: (preview: ExpandedImagePreview) => void;
   onFileOpen: (attachment: ChatFileAttachment) => void;
   onFileDownload: (attachment: ChatFileAttachment) => void;
-  openingVideoAttachmentId: string | null;
   onOpenTurnDiff: (turnId: TurnId, filePath?: string) => void;
   onToggleTurnFold: (turnId: TurnId) => void;
   onToggleWorkGroup: (groupId: string, anchorKey: string) => void;
 @@ -289,7 +293,6 @@ interface MessagesTimelineProps {
   onImageExpand: (preview: ExpandedImagePreview) => void;
   onFileOpen?: (attachment: ChatFileAttachment) => void;
   onFileDownload?: (attachment: ChatFileAttachment) => void;
-  openingVideoAttachmentId: string | null;
   activeThreadEnvironmentId: EnvironmentId;
   markdownCwd: string | undefined;
   resolvedTheme: "light" | "dark";
 @@ -341,7 +344,6 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   onImageExpand,
   onFileOpen = NOOP_OPEN_ATTACHMENT,
   onFileDownload = NOOP_OPEN_ATTACHMENT,
-  openingVideoAttachmentId,
   activeThreadEnvironmentId,
   markdownCwd,
   resolvedTheme,
 @@ -638,7 +640,6 @@ export const MessagesTimeline = memo(function MessagesTimeline({
       onImageExpand,
       onFileOpen,
       onFileDownload,
-      openingVideoAttachmentId,
       onOpenTurnDiff,
       onToggleTurnFold,
       onToggleWorkGroup,
 @@ -663,7 +664,6 @@ export const MessagesTimeline = memo(function MessagesTimeline({
       onImageExpand,
       onFileOpen,
       onFileDownload,
-      openingVideoAttachmentId,
       onOpenTurnDiff,
       onToggleTurnFold,
       onToggleWorkGroup,
 @@ -1127,6 +1127,45 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
   );
 });
+function UserVideoAttachment({ file }: { readonly file: ChatFileAttachment }) {
+  const ctx = use(TimelineRowCtx);
+  const asset = useMemo(
+    () =>
+      file.downloadable === false
+        ? null
+        : buildAttachmentVideoAsset(ctx.activeThreadEnvironmentId, file),
+    [ctx.activeThreadEnvironmentId, file.downloadable, file.id, file.mimeType, file.name],
+  );
+  const resource = asset?.resource ?? null;
+  const assetUrl = useAssetUrlState(ctx.activeThreadEnvironmentId, resource);
+  const refreshAssetUrl = useAssetUrlRefresh(ctx.activeThreadEnvironmentId, resource);
+  const src = assetUrl._tag === "Success" ? assetUrl.url : (file.previewUrl ?? null);
+  if (asset === null && src === null) {
+    return (
+      <div className="flex aspect-[4/3] w-full items-center justify-center rounded-lg border border-border/80 bg-black px-2 py-3 text-center text-[11px] text-white/70">
+        {file.name}
+      </div>
+    );
+  }
+  return (
+    <MediaVideoPlayer
+      src={src}
+      sourceFailed={
+        file.previewUrl === undefined && resource !== null && assetUrl._tag === "Failure"
+      }
+      label={file.name}
+      preload="visible"
+      className="block aspect-[4/3] w-full"
+      videoClassName="aspect-auto size-full rounded-lg border border-border/80"
+      stateClassName="aspect-auto min-h-full rounded-lg border border-border/80 bg-black text-white"
+      onRetry={asset ? refreshAssetUrl : undefined}
+      actionsSource={asset ? { kind: "video", name: file.name, src, asset } : undefined}
+    />
+  );
+}
 function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
   const ctx = use(TimelineRowCtx);
   // The attachment union has an open member, so guards (not literal type
 @@ -1165,12 +1204,12 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
             {regularImages.map((image) => (
               <div
                 key={image.id}
-                className="overflow-hidden rounded-lg border border-border/80 bg-background/70"
+                className="aspect-[4/3] overflow-hidden rounded-lg border border-border/80 bg-background/70"
               >
                 {image.previewUrl ? (
                   <button
                     type="button"
-                    className="h-full w-full cursor-zoom-in"
+                    className="block h-full w-full cursor-zoom-in"
                     aria-label={`Preview ${image.name}`}
                     onClick={() => {
                       const preview = buildExpandedImagePreview(regularImages, image.id);
 @@ -1181,7 +1220,7 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
                     <img
                       src={image.previewUrl}
                       alt={image.name}
-                      className="block h-auto max-h-[220px] w-full object-cover"
+                      className="block size-full object-cover"
                     />
                   </button>
                 ) : (
 @@ -1191,35 +1230,9 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
                 )}
               </div>
             ))}
-            {userVideos.map((file) => {
+            {userVideos.map((file) => (
-              const isOpening = ctx.openingVideoAttachmentId === file.id;
+              <UserVideoAttachment key={file.id} file={file} />
-              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) => (

apps/web/src/components/media/MediaActions.tsx+21-16

 @@ -1,3 +1,4 @@
+import type { MediaActionId } from "@t3tools/client-runtime/media-actions";
 import {
   mediaReferenceFileName,
   type MediaReference,
 @@ -68,8 +69,6 @@ export function useMediaActions(source: MediaActionSource) {
   return { save, copyImage };
 }
-type MediaAction = "copy-full" | "copy-relative" | "copy-url" | "save" | "copy-image" | "open-file";
 /** Adds source-aware actions and a tooltip to the existing media element without a layout wrapper. */
 export function MediaActions({
   source,
 @@ -82,8 +81,6 @@ export function MediaActions({
   const [tooltipOpen, setTooltipOpen] = useState(false);
   const menuOpen = useRef(false);
   const reference = source.reference;
-  const hasActions =
-    source.kind === "image" || reference !== undefined || source.onOpenFile !== undefined;
   const tooltip = reference?.kind === "file" ? reference.path : (reference?.url ?? source.name);
   const showMenu = async (position: { x: number; y: number }) => {
 @@ -94,28 +91,37 @@ export function MediaActions({
     let failureTitle = "Could not open media menu";
     let progressToast: ReturnType<typeof toastManager.add> | undefined;
     try {
-      const items: ContextMenuItem<MediaAction>[] = [];
+      const noun = source.kind === "image" ? "image" : "video";
+      const unavailable = source.src === null && source.asset === undefined;
+      const canCopyImage =
+        typeof navigator !== "undefined" &&
+        Boolean(navigator.clipboard?.write) &&
+        typeof ClipboardItem !== "undefined";
+      const items: ContextMenuItem<MediaActionId>[] = [];
       if (reference?.kind === "file") {
-        items.push({ id: "copy-full", label: "Copy full path" });
+        items.push({ id: "copy-full-path", label: "Copy full path" });
         if (reference.relativePath)
-          items.push({ id: "copy-relative", label: "Copy relative path" });
+          items.push({ id: "copy-relative-path", label: "Copy relative path" });
       } else if (reference?.kind === "url") {
         items.push({ id: "copy-url", label: "Copy URL" });
       }
+      if (source.onOpenFile) items.push({ id: "open-file", label: "Open in file viewer" });
+      items.push({ id: "save", label: `Save ${noun}`, disabled: unavailable });
       if (source.kind === "image") {
-        const unavailable = source.src === null && source.asset === undefined;
+        items.push({
-        items.push({ id: "save", label: "Save image", disabled: unavailable });
+          id: "copy-image",
-        items.push({ id: "copy-image", label: "Copy image", disabled: unavailable });
+          label: "Copy image",
+          disabled: unavailable || !canCopyImage,
+        });
       }
-      if (source.onOpenFile) items.push({ id: "open-file", label: "Open in file viewer" });
       const action = await api.contextMenu.show(items, position);
       if (!action) return;
       failureTitle = `Could not ${items.find((item) => item.id === action)?.label.toLowerCase() ?? "complete media action"}`;
       const text =
-        action === "copy-full" && reference?.kind === "file"
+        action === "copy-full-path" && reference?.kind === "file"
           ? reference.path
-          : action === "copy-relative" && reference?.kind === "file"
+          : action === "copy-relative-path" && reference?.kind === "file"
             ? reference.relativePath
             : action === "copy-url" && reference?.kind === "url"
               ? reference.url
 @@ -131,7 +137,7 @@ export function MediaActions({
       } else if (action === "save" || action === "copy-image") {
         progressToast = toastManager.add({
           type: "loading",
-          title: action === "save" ? "Preparing image download…" : "Copying image…",
+          title: action === "save" ? `Preparing ${noun} download…` : "Copying image…",
         });
         await (action === "save" ? save() : copyImage());
         toastManager.update(progressToast, {
 @@ -158,7 +164,7 @@ export function MediaActions({
         render={children}
         tabIndex={0}
         onContextMenu={(event) => {
-          if (!hasActions || event.defaultPrevented) return;
+          if (event.defaultPrevented) return;
           event.preventDefault();
           event.stopPropagation();
           const bounds = event.currentTarget.getBoundingClientRect();
 @@ -170,7 +176,6 @@ export function MediaActions({
         }}
         onKeyDown={(event) => {
           if (
-            !hasActions ||
             event.defaultPrevented ||
             !(event.key === "ContextMenu" || (event.shiftKey && event.key === "F10"))
           )

apps/web/src/components/media/MediaVideoPlayer.tsx+12-24

 @@ -1,4 +1,4 @@
-import { Maximize2Icon, RotateCwIcon, TriangleAlertIcon } from "lucide-react";
+import { RotateCwIcon, TriangleAlertIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import { cn } from "../../lib/utils";
 @@ -14,11 +14,13 @@ interface MediaVideoPlayerProps {
   readonly originalUrl?: string | undefined;
   readonly revision?: string | null | undefined;
   readonly preload?: "visible" | "metadata" | undefined;
+  readonly autoPlay?: boolean | undefined;
   readonly className?: string | undefined;
   readonly videoClassName?: string | undefined;
+  /** Styles the loading and failure panels, which otherwise assume an inline light surface. */
+  readonly stateClassName?: string | undefined;
   readonly style?: CSSProperties | undefined;
   readonly copyMarkdown?: string | undefined;
-  readonly onExpand?: ((src: string) => void) | undefined;
   readonly onRetry?: (() => Promise<void>) | undefined;
   readonly actionsSource?: MediaActionSource | undefined;
 }
 @@ -31,11 +33,12 @@ export function MediaVideoPlayer({
   originalUrl,
   revision = null,
   preload = "visible",
+  autoPlay = false,
   className,
   videoClassName,
+  stateClassName,
   style,
   copyMarkdown,
-  onExpand,
   onRetry,
   actionsSource,
 }: MediaVideoPlayerProps) {
 @@ -114,23 +117,6 @@ export function MediaVideoPlayer({
     }
   };
-  const expandButton =
-    onExpand && src !== null ? (
-      <Button
-        type="button"
-        variant="secondary"
-        size="icon-xs"
-        className={failed ? undefined : "absolute right-2 top-2"}
-        aria-label={`Expand ${label || "video"}`}
-        onClick={() => {
-          videoRef.current?.pause();
-          onExpand(latestSrc ?? src);
-        }}
-      >
-        <Maximize2Icon />
-      </Button>
-    ) : null;
   const player = (
     <span
       className={cn("relative inline-block align-middle", className)}
 @@ -140,7 +126,10 @@ export function MediaVideoPlayer({
       {failed ? (
         <span
           role="alert"
-          className="flex min-h-28 flex-col items-center justify-center gap-3 rounded-lg border border-border/40 bg-muted/40 p-4 text-center text-sm text-muted-foreground"
+          className={cn(
+            "flex min-h-28 flex-col items-center justify-center gap-3 rounded-lg border border-border/40 bg-muted/40 p-4 text-center text-sm text-muted-foreground",
+            stateClassName,
+          )}
         >
           <span className="inline-flex items-center gap-1.5">
             <TriangleAlertIcon aria-hidden className="size-3.5 shrink-0" />
 @@ -159,7 +148,6 @@ export function MediaVideoPlayer({
               </Button>
             ) : null}
             <OpenMediaLink originalUrl={originalUrl} src={latestSrc ?? src} fileName={label} />
-            {expandButton}
           </span>
         </span>
       ) : src !== null ? (
 @@ -168,6 +156,7 @@ export function MediaVideoPlayer({
           ref={videoRef}
           src={src}
           aria-label={label || "Video preview"}
+          autoPlay={autoPlay}
           controls
           playsInline
           preload={preload === "metadata" || preloadedSrc === src ? "metadata" : "none"}
 @@ -186,11 +175,10 @@ export function MediaVideoPlayer({
         <span
           role="status"
           aria-label="Loading video"
-          className="block aspect-video w-full rounded-lg bg-muted/60"
+          className={cn("block aspect-video w-full rounded-lg bg-muted/60", stateClassName)}
           style={style}
         />
       )}
-      {!failed && expandButton}
     </span>
   );
   return actionsSource ? <MediaActions source={actionsSource}>{player}</MediaActions> : player;

apps/web/src/filePathDisplay.ts+11-16

 @@ -1,22 +1,18 @@
-import { splitPathAndPosition } from "./terminal-links";
+import {
+  fileBasename,
+  formatFilePathPosition,
+  splitFilePathPosition,
+  stripSlashPrefixedWindowsDrive,
+} from "@t3tools/client-runtime/markdown-links";
 function normalizePathSeparators(path: string): string {
   return path.replaceAll("\\", "/");
 }
-function canonicalizeWindowsDrivePath(path: string): string {
-  return /^\/[A-Za-z]:\//.test(path) ? path.slice(1) : path;
-}
 function trimTrailingPathSeparators(path: string): string {
   return path.replace(/[\\/]+$/, "");
 }
-function basenameOfPath(path: string): string {
-  const separatorIndex = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
-  return separatorIndex >= 0 ? path.slice(separatorIndex + 1) : path;
-}
 function stripRelativePrefixes(path: string): string {
   return path.replace(/^\.\/+/, "").replace(/^\/+/, "");
 }
 @@ -25,15 +21,15 @@ export function formatWorkspaceRelativePath(
   pathWithPosition: string,
   workspaceRoot: string | undefined,
 ): string {
-  const { path, line, column } = splitPathAndPosition(pathWithPosition);
+  const position = splitFilePathPosition(pathWithPosition);
-  const normalizedPath = canonicalizeWindowsDrivePath(normalizePathSeparators(path));
+  const normalizedPath = stripSlashPrefixedWindowsDrive(normalizePathSeparators(position.path));
   let displayPath = normalizedPath;
   if (workspaceRoot) {
-    const normalizedWorkspaceRoot = canonicalizeWindowsDrivePath(
+    const normalizedWorkspaceRoot = stripSlashPrefixedWindowsDrive(
       normalizePathSeparators(trimTrailingPathSeparators(workspaceRoot)),
     );
-    const workspaceLabel = basenameOfPath(normalizedWorkspaceRoot);
+    const workspaceLabel = fileBasename(normalizedWorkspaceRoot);
     const pathForCompare = normalizedPath.toLowerCase();
     const workspaceForCompare = normalizedWorkspaceRoot.toLowerCase();
     const workspaceWithSeparator = `${workspaceForCompare}/`;
 @@ -52,6 +48,5 @@ export function formatWorkspaceRelativePath(
     }
   }
-  if (!line) return displayPath;
+  return formatFilePathPosition({ ...position, path: displayPath });
-  return `${displayPath}:${line}${column ? `:${column}` : ""}`;
 }

apps/web/src/markdown-links.test.ts+8-1

 @@ -270,8 +270,15 @@ describe("resolveMarkdownFileLinkTarget", () => {
     ).toBe("D:/Programme/t3code/apps/web/src/components/ChatMarkdown.tsx:1");
   });
-  it("does not treat app routes as file links", () => {
+  it("does not treat app routes as file links, even with a line anchor", () => {
     expect(resolveMarkdownFileLinkTarget("/chat/settings")).toBeNull();
+    expect(resolveMarkdownFileLinkTarget("/chat/settings#L3", "/repo")).toBeNull();
+  });
+  it("decodes an encoded drive colon in a file uri before dropping its slash", () => {
+    expect(resolveMarkdownFileLinkTarget("file:///c%3A/Users/x/shot.png")).toBe(
+      "c:/Users/x/shot.png",
+    );
   });
 });

apps/web/src/markdown-links.ts+25-214

...	@@ -1,53 +1,21 @@	...	@@ -1,53 +1,21 @@
1	import {	1	import {
		2	fileBasename,
		3	formatFilePathPosition,
2	inlineCodeFilePathCandidate,	4	inlineCodeFilePathCandidate,
3	isConventionalFilePosition,	5	isRelativeFilePath,
		6	normalizeMarkdownLinkDestination,
		7	parseFileUrlHref,
		8	parseMarkdownFileLink,
		9	safeDecodeURIComponent,
		10	splitFilePathPosition,
		11	workspaceRelativeFilePath,
4	} from "@t3tools/client-runtime/markdown-links";	12	} from "@t3tools/client-runtime/markdown-links";
5		13
6	import { formatWorkspaceRelativePath } from "./filePathDisplay";	14	import { formatWorkspaceRelativePath } from "./filePathDisplay";
7	import {	15	import { isTerminalLinkActivation, resolvePathLinkTarget } from "./terminal-links";
8	isTerminalLinkActivation,	16
9	resolvePathLinkTarget,	17	export { normalizeMarkdownLinkDestination };
10	splitPathAndPosition,
11	} from "./terminal-links";
12		18
13	const WINDOWS_DRIVE_PATH_PATTERN = /^[A-Za-z]:[\\/]/;
14	const WINDOWS_UNC_PATH_PATTERN = /^\\\\/;
15	const EXTERNAL_SCHEME_PATTERN = /^([A-Za-z][A-Za-z0-9+.-]):(.)$/;
16	const RELATIVE_PATH_PREFIX_PATTERN = /^(~\/\|\.{1,2}\/)/;
17	const RELATIVE_FILE_PATH_PATTERN =
18	/^(?:[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)\/)+[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)(?::\d+){0,2}$/;
19	const RELATIVE_FILE_NAME_PATTERN =
20	/^[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)*\.[A-Za-z0-9_-]+(?::\d+){0,2}$/;
21	const POSITION_SUFFIX_PATTERN = /:\d+(?::\d+)?$/;
22	const POSITION_ONLY_PATTERN = /^\d+(?::\d+)?$/;
23	// Standard OS and dev-container roots; deliberately excludes app-route-ish
24	// prefixes like /app/ or /chat/ so SPA routes never read as files.
25	const POSIX_FILE_ROOT_PREFIXES = [
26	"/Users/",
27	"/home/",
28	"/tmp/",
29	"/var/",
30	"/etc/",
31	"/opt/",
32	"/mnt/",
33	"/Volumes/",
34	"/private/",
35	"/root/",
36	"/usr/",
37	"/bin/",
38	"/sbin/",
39	"/lib/",
40	"/lib64/",
41	"/srv/",
42	"/dev/",
43	"/proc/",
44	"/sys/",
45	"/run/",
46	"/boot/",
47	"/media/",
48	"/workspace/",
49	"/workspaces/",
50	] as const;
51	const MARKDOWN_LINK_HREF_PATTERN =	19	const MARKDOWN_LINK_HREF_PATTERN =
52	/\[[^\]]]$\s(?:<([^>\n]+)>\|([^\s)]+))(?:\s+["'][^"']["'])?\s$/g;	20	/\[[^\]]]$\s(?:<([^>\n]+)>\|([^\s)]+))(?:\s+["'][^"']["'])?\s$/g;
53		21
...	@@ -81,112 +49,14 @@ export function shouldOpenMarkdownFileLinkInBrowserByDefault(path: string): bool	...	@@ -81,112 +49,14 @@ export function shouldOpenMarkdownFileLinkInBrowserByDefault(path: string): bool
81	return /\.pdf$/i.test(path.split(/[?#]/, 1)[0] ?? "");	49	return /\.pdf$/i.test(path.split(/[?#]/, 1)[0] ?? "");
82	}	50	}
83		51
84	function safeDecode(value: string): string {
85	try {
86	return decodeURIComponent(value);
87	} catch {
88	return value;
89	}
90	}
91
92	export function isWindowsDrivePathHref(href: string): boolean {	52	export function isWindowsDrivePathHref(href: string): boolean {
93	return WINDOWS_DRIVE_PATH_PATTERN.test(safeDecode(href));	53	return /^[A-Za-z]:[\\/]/.test(safeDecodeURIComponent(href));
94	}
95
96	function unwrapMarkdownLinkDestination(value: string): string {
97	return value.startsWith("<") && value.endsWith(">") ? value.slice(1, -1) : value;
98	}
99
100	export function normalizeMarkdownLinkDestination(value: string): string {
101	return unwrapMarkdownLinkDestination(value.trim());
102	}
103
104	function stripSearchAndHash(value: string): { path: string; hash: string } {
105	const hashIndex = value.indexOf("#");
106	const pathWithSearch = hashIndex >= 0 ? value.slice(0, hashIndex) : value;
107	const rawHash = hashIndex >= 0 ? value.slice(hashIndex) : "";
108	const queryIndex = pathWithSearch.indexOf("?");
109	const path = queryIndex >= 0 ? pathWithSearch.slice(0, queryIndex) : pathWithSearch;
110	return { path, hash: rawHash };
111	}
112
113	function normalizeWindowsDrivePath(path: string): string {
114	return /^\/[A-Za-z]:[\\/]/.test(path) ? path.slice(1) : path;
115	}
116
117	function parseFileUrlHref(
118	href: string,
119	options?: { readonly decodePath?: boolean },
120	): { path: string; hash: string } \| null {
121	try {
122	const parsed = new URL(href);
123	if (parsed.protocol.toLowerCase() !== "file:") return null;
124
125	const uncHostname = parsed.hostname.toLowerCase() === "localhost" ? "" : parsed.hostname;
126	const rawPath = uncHostname
127	? `\\\\${uncHostname}${parsed.pathname.replaceAll("/", "\\")}`
128	: parsed.pathname;
129	if (rawPath.length === 0) return null;
130
131	// Browser URL parser encodes "C:/foo" as "/C:/foo" for file URLs.
132	const normalizedPath = normalizeWindowsDrivePath(rawPath);
133
134	return {
135	path: options?.decodePath === false ? normalizedPath : safeDecode(normalizedPath),
136	hash: parsed.hash,
137	};
138	} catch {
139	return null;
140	}
141	}	54	}
142		55
143	export function rewriteMarkdownFileUriHref(href: string \| undefined): string \| null {	56	export function rewriteMarkdownFileUriHref(href: string \| undefined): string \| null {
144	if (!href) return null;	57	if (!href) return null;
145	const normalizedHref = normalizeMarkdownLinkDestination(href);	58	const target = parseFileUrlHref(normalizeMarkdownLinkDestination(href));
146	const target = parseFileUrlHref(normalizedHref, { decodePath: false });	59	return target ? `${target.path}${target.hash}` : null;
147	if (!target) return null;
148	return `${target.path}${target.hash}`;
149	}
150
151	function looksLikePosixFilesystemPath(path: string): boolean {
152	if (!path.startsWith("/")) return false;
153	if (POSIX_FILE_ROOT_PREFIXES.some((prefix) => path.startsWith(prefix))) return true;
154	if (POSITION_SUFFIX_PATTERN.test(path)) return true;
155	const basename = path.slice(path.lastIndexOf("/") + 1);
156	return /\.[A-Za-z0-9_-]+$/.test(basename);
157	}
158
159	function appendLineColumnFromHash(path: string, hash: string): string {
160	if (!hash \|\| POSITION_SUFFIX_PATTERN.test(path)) return path;
161	const match = hash.match(/^#L(\d+)(?:C(\d+))?$/i);
162	if (!match?.[1]) return path;
163	const line = match[1];
164	const column = match[2];
165	return `${path}:${line}${column ? `:${column}` : ""}`;
166	}
167
168	function isLikelyPathCandidate(path: string): boolean {
169	if (WINDOWS_DRIVE_PATH_PATTERN.test(path) \|\| WINDOWS_UNC_PATH_PATTERN.test(path)) return true;
170	if (RELATIVE_PATH_PREFIX_PATTERN.test(path)) return true;
171	if (path.startsWith("/")) return looksLikePosixFilesystemPath(path);
172	return RELATIVE_FILE_PATH_PATTERN.test(path) \|\| RELATIVE_FILE_NAME_PATTERN.test(path);
173	}
174
175	function isRelativePath(path: string): boolean {
176	return (
177	RELATIVE_PATH_PREFIX_PATTERN.test(path) \|\|
178	(!path.startsWith("/") &&
179	!WINDOWS_DRIVE_PATH_PATTERN.test(path) &&
180	!WINDOWS_UNC_PATH_PATTERN.test(path))
181	);
182	}
183
184	function hasExternalScheme(path: string): boolean {
185	const match = path.match(EXTERNAL_SCHEME_PATTERN);
186	if (!match) return false;
187	const rest = match[2] ?? "";
188	if (rest.startsWith("//")) return true;
189	return !POSITION_ONLY_PATTERN.test(rest);
190	}	60	}
191		61
192	/**	62	/**
...	@@ -200,34 +70,11 @@ export function resolveMarkdownFileLinkTarget(	...	@@ -200,34 +70,11 @@ export function resolveMarkdownFileLinkTarget(
200	baseDir: string \| undefined = cwd,	70	baseDir: string \| undefined = cwd,
201	): string \| null {	71	): string \| null {
202	if (!href) return null;	72	if (!href) return null;
203	const rawHref = normalizeMarkdownLinkDestination(href);	73	const target = parseMarkdownFileLink(href);
204	if (rawHref.length === 0 \|\| rawHref.startsWith("#") \|\| rawHref.startsWith("//")) return null;	74	if (!target) return null;
205
206	const fileUrlTarget = rawHref.toLowerCase().startsWith("file:")
207	? parseFileUrlHref(rawHref)
208	: null;
209	const source = fileUrlTarget ?? stripSearchAndHash(rawHref);
210	const decodedPath = normalizeWindowsDrivePath(
211	fileUrlTarget ? source.path.trim() : safeDecode(source.path.trim()),
212	);
213	const decodedHash = safeDecode(source.hash.trim());
214
215	if (decodedPath.length === 0) return null;
216	if (
217	!WINDOWS_DRIVE_PATH_PATTERN.test(decodedPath) &&
218	!WINDOWS_UNC_PATH_PATTERN.test(decodedPath) &&
219	hasExternalScheme(decodedPath)
220	) {
221	return null;
222	}
223
224	if (!isLikelyPathCandidate(decodedPath)) return null;
225
226	const pathWithPosition = appendLineColumnFromHash(decodedPath, decodedHash);
227	if (!isRelativePath(pathWithPosition)) {
228	return pathWithPosition;
229	}
230		75
		76	const pathWithPosition = formatFilePathPosition(target);
		77	if (!isRelativeFilePath(pathWithPosition)) return pathWithPosition;
231	if (!baseDir) return null;	78	if (!baseDir) return null;
232	return resolvePathLinkTarget(pathWithPosition, baseDir);	79	return resolvePathLinkTarget(pathWithPosition, baseDir);
233	}	80	}
...	@@ -246,38 +93,7 @@ export function resolveInlineCodeFileLinkMeta(	...	@@ -246,38 +93,7 @@ export function resolveInlineCodeFileLinkMeta(
246	const candidate = inlineCodeFilePathCandidate(codeText);	93	const candidate = inlineCodeFilePathCandidate(codeText);
247	if (candidate === null) return null;	94	if (candidate === null) return null;
248		95
249	const resolved = resolveMarkdownFileLinkMeta(candidate, cwd, baseDir);	96	return resolveMarkdownFileLinkMeta(candidate, cwd, baseDir);
250	if (resolved) return resolved;
251
252	// `Makefile:12` — conventional extensionless names fail the generic
253	// markdown-link candidate patterns, but here the :line suffix already
254	// marked the span as a file reference.
255	if (baseDir && isConventionalFilePosition(candidate)) {
256	return buildFileLinkMetaFromTarget(resolvePathLinkTarget(candidate, baseDir), cwd);
257	}
258	return null;
259	}
260
261	function basenameOfPath(path: string): string {
262	// A trailing separator is a valid way to write a directory, so trim it before
263	// taking the final segment. Without this the segment reads as empty and the
264	// chip renders with no label at all.
265	const trimmed = path.replace(/[/\\]+$/, "") \|\| path;
266	const separatorIndex = Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\"));
267	return separatorIndex >= 0 ? trimmed.slice(separatorIndex + 1) : trimmed;
268	}
269
270	function workspaceRelativePath(path: string, workspaceRoot: string \| undefined): string \| null {
271	if (!workspaceRoot) return null;
272	const normalizedPath = normalizeWindowsDrivePath(path.replaceAll("\\", "/"));
273	const normalizedRoot = normalizeWindowsDrivePath(workspaceRoot.replaceAll("\\", "/")).replace(
274	/\/+$/,
275	"",
276	);
277	const pathForCompare = normalizedPath.toLowerCase();
278	const rootForCompare = normalizedRoot.toLowerCase();
279	if (!pathForCompare.startsWith(`${rootForCompare}/`)) return null;
280	return normalizedPath.slice(normalizedRoot.length + 1);
281	}	97	}
282		98
283	export function resolveMarkdownFileLinkMeta(	99	export function resolveMarkdownFileLinkMeta(
...	@@ -291,19 +107,14 @@ export function resolveMarkdownFileLinkMeta(	...	@@ -291,19 +107,14 @@ export function resolveMarkdownFileLinkMeta(
291	}	107	}
292		108
293	function buildFileLinkMetaFromTarget(targetPath: string, cwd?: string): MarkdownFileLinkMeta {	109	function buildFileLinkMetaFromTarget(targetPath: string, cwd?: string): MarkdownFileLinkMeta {
294	const { path, line, column } = splitPathAndPosition(targetPath);	110	const { path, line, column } = splitFilePathPosition(targetPath);
295	const parsedLine = line ? Number.parseInt(line, 10) : Number.NaN;
296	const parsedColumn = column ? Number.parseInt(column, 10) : Number.NaN;
297	const lineNumber = Number.isFinite(parsedLine) ? parsedLine : undefined;
298	const columnNumber = Number.isFinite(parsedColumn) ? parsedColumn : undefined;
299
300	return {	111	return {
301	filePath: path,	112	filePath: path,
302	targetPath,	113	targetPath,
303	displayPath: formatWorkspaceRelativePath(targetPath, cwd),	114	displayPath: formatWorkspaceRelativePath(targetPath, cwd),
304	workspaceRelativePath: workspaceRelativePath(path, cwd),	115	workspaceRelativePath: workspaceRelativeFilePath(path, cwd),
305	basename: basenameOfPath(path),	116	basename: fileBasename(path),
306	...(lineNumber !== undefined ? { line: lineNumber } : {}),	117	...(line !== undefined ? { line } : {}),
307	...(columnNumber !== undefined ? { column: columnNumber } : {}),	118	...(column !== undefined ? { column } : {}),
308	};	119	};
309	}	120	}

apps/web/src/terminal-links.ts+8-32

...	@@ -1,3 +1,8 @@	...	@@ -1,3 +1,8 @@
		1	import {
		2	formatFilePathPosition,
		3	splitFilePathPosition,
		4	} from "@t3tools/client-runtime/markdown-links";
		5
1	import { isMacPlatform } from "./lib/utils";	6	import { isMacPlatform } from "./lib/utils";
2		7
3	export type TerminalLinkKind = "url" \| "path";	8	export type TerminalLinkKind = "url" \| "path";
...	@@ -137,35 +142,6 @@ function inferHomeFromCwd(cwd: string): string \| undefined {	...	@@ -137,35 +142,6 @@ function inferHomeFromCwd(cwd: string): string \| undefined {
137	return undefined;	142	return undefined;
138	}	143	}
139		144
140	export function splitPathAndPosition(value: string): {
141	path: string;
142	line: string \| undefined;
143	column: string \| undefined;
144	} {
145	let path = value;
146	let column: string \| undefined;
147	let line: string \| undefined;
148
149	const columnMatch = path.match(/:(\d+)$/);
150	if (!columnMatch?.[1]) {
151	return { path, line: undefined, column: undefined };
152	}
153
154	column = columnMatch[1];
155	path = path.slice(0, -columnMatch[0].length);
156
157	const lineMatch = path.match(/:(\d+)$/);
158	if (lineMatch?.[1]) {
159	line = lineMatch[1];
160	path = path.slice(0, -lineMatch[0].length);
161	} else {
162	line = column;
163	column = undefined;
164	}
165
166	return { path, line, column };
167	}
168
169	export function extractTerminalLinks(line: string): TerminalLinkMatch[] {	145	export function extractTerminalLinks(line: string): TerminalLinkMatch[] {
170	const urlMatches = collectMatches(line, "url", URL_PATTERN, []);	146	const urlMatches = collectMatches(line, "url", URL_PATTERN, []);
171	const pathMatches = collectMatches(line, "path", FILE_PATH_PATTERN, urlMatches);	147	const pathMatches = collectMatches(line, "path", FILE_PATH_PATTERN, urlMatches);
...	@@ -271,7 +247,8 @@ export function isTerminalLinkActivation(	...	@@ -271,7 +247,8 @@ export function isTerminalLinkActivation(
271	}	247	}
272		248
273	export function resolvePathLinkTarget(rawPath: string, cwd: string): string {	249	export function resolvePathLinkTarget(rawPath: string, cwd: string): string {
274	const { path, line, column } = splitPathAndPosition(rawPath);	250	const position = splitFilePathPosition(rawPath);
		251	const { path } = position;
275		252
276	let resolvedPath = path;	253	let resolvedPath = path;
277	if (path.startsWith("~/")) {	254	if (path.startsWith("~/")) {
...	@@ -285,6 +262,5 @@ export function resolvePathLinkTarget(rawPath: string, cwd: string): string {	...	@@ -285,6 +262,5 @@ export function resolvePathLinkTarget(rawPath: string, cwd: string): string {
285	resolvedPath = joinPath(cwd, path, separator);	262	resolvedPath = joinPath(cwd, path, separator);
286	}	263	}
287		264
288	if (!line) return resolvedPath;	265	return formatFilePathPosition({ ...position, path: resolvedPath });
289	return `${resolvedPath}:${line}${column ? `:${column}` : ""}`;
290	}	266	}

docs/internals/mobile-navigation.md+13-6

...	@@ -86,10 +86,15 @@ composer thumbnails, and workspace image previews. The workspace PDF web preview	...	@@ -86,10 +86,15 @@ composer thumbnails, and workspace image previews. The workspace PDF web preview
86	Open PDF action for the native viewer. Android retains its image viewer and uses the	86	Open PDF action for the native viewer. Android retains its image viewer and uses the
87	system chooser for PDFs. Saving images on iOS uses the add-only photo-library permission.	87	system chooser for PDFs. Saving images on iOS uses the add-only photo-library permission.
88		88
89	Received videos open directly from their signed asset URL. AVKit handles buffering;	89	Every full-screen video preview on iOS is AVKit, playing directly from the signed asset
90	the client does not download the entire file or show a separate opening overlay before	90	URL: sent attachments, composer drafts, and file links that point at a video. Inline
91	presentation. The URL is captured once per preview so credential refresh does not	91	markdown embeds and the workspace file screen play in place with the Expo Video player.
92	restart playback. Saving or sharing still downloads the original file.	92	AVKit handles buffering; the client does not download the entire file or show a separate
		93	opening overlay before presentation.
		94	The URL is captured once per preview so credential refresh does not restart playback.
		95	Media actions (copy path, open in file viewer, save or share) belong to the surface that
		96	opened the video, a long-press on the thumbnail, so the player carries no
		97	menu. AVKit has no retry; a failure alerts and closes, re-mints the URL in the background, and the next open plays from the fresh one.
93		98
94	The native presentation promise completes after dismissal. Local draft previews	99	The native presentation promise completes after dismissal. Local draft previews
95	hold their file lease until that promise settles. The iOS preview component requests	100	hold their file lease until that promise settles. The iOS preview component requests
...	@@ -97,8 +102,10 @@ native dismissal when its source screen unmounts. Playback pauses in the backgro	...	@@ -97,8 +102,10 @@ native dismissal when its source screen unmounts. Playback pauses in the backgro
97	AVPlayer activates audio as playback starts. The presenter pauses and releases	102	AVPlayer activates audio as playback starts. The presenter pauses and releases
98	its own player on close, then restores the previous audio-session configuration	103	its own player on close, then restores the previous audio-session configuration
99	if no other component changed it during playback. It does not deactivate the	104	if no other component changed it during playback. It does not deactivate the
100	shared session, which may still serve another player or recorder. Android retains	105	shared session, which may still serve another player or recorder. Android plays every
101	its React Native modal and Expo Video player.	106	video, attachments included, in its React Native modal with the Expo Video player.
		107	Composer drafts play and share from their local file; other videos stream from the
		108	signed URL and download only for save or share.
102		109
103	`shareFileFromSource` uses the same source registration to anchor UIKit's activity	110	`shareFileFromSource` uses the same source registration to anchor UIKit's activity
104	controller. Its promise completes when the native share flow finishes, keeping	111	controller. Its promise completes when the native share flow finishes, keeping

docs/user/composer.md+11-11

packages/client-runtime/package.json+8

...	@@ -27,6 +27,14 @@	...	@@ -27,6 +27,14 @@
27	"types": "./src/mediaReference.ts",	27	"types": "./src/mediaReference.ts",
28	"default": "./src/mediaReference.ts"	28	"default": "./src/mediaReference.ts"
29	},	29	},
		30	"./media-source": {
		31	"types": "./src/mediaSource.ts",
		32	"default": "./src/mediaSource.ts"
		33	},
		34	"./media-actions": {
		35	"types": "./src/mediaActions.ts",
		36	"default": "./src/mediaActions.ts"
		37	},
30	"./codex-file-citations": {	38	"./codex-file-citations": {
31	"types": "./src/codexFileCitations.ts",	39	"types": "./src/codexFileCitations.ts",
32	"default": "./src/codexFileCitations.ts"	40	"default": "./src/codexFileCitations.ts"

packages/client-runtime/src/markdownImages.ts+24-56

 @@ -1,66 +1,27 @@
+import { isWindowsAbsolutePath } from "@t3tools/shared/path";
+import {
+  normalizeMarkdownLinkDestination,
+  parseFileUrlHref,
+  safeDecodeURIComponent,
+  splitMarkdownLinkSearchAndHash,
+  stripSlashPrefixedWindowsDrive,
+} from "./markdownLinks.ts";
 const DIRECT_IMAGE_SOURCE_PATTERN = /^(?:https?:|data:|blob:|\/\/)/i;
 const URI_SCHEME_PATTERN = /^[A-Za-z][A-Za-z0-9+.-]*:/;
-const WINDOWS_DRIVE_PATH_PATTERN = /^[A-Za-z]:[\\/]/;
 export type MarkdownImageSource =
   | { readonly _tag: "Direct"; readonly uri: string }
   | { readonly _tag: "WorkspaceFile"; readonly path: string }
   | { readonly _tag: "Blocked" };
-function safeDecode(value: string): string {
-  try {
-    return decodeURIComponent(value);
-  } catch {
-    return value;
-  }
-}
-function normalizeSource(value: string): string {
-  const trimmed = value.trim();
-  return trimmed.startsWith("<") && trimmed.endsWith(">") ? trimmed.slice(1, -1) : trimmed;
-}
 export function markdownImageSourceFragment(source: string): string {
-  const normalizedSource = normalizeSource(source);
+  return splitMarkdownLinkSearchAndHash(normalizeMarkdownLinkDestination(source)).hash;
-  const hashIndex = normalizedSource.indexOf("#");
-  return hashIndex >= 0 ? normalizedSource.slice(hashIndex) : "";
-}
-function normalizeWindowsDrivePath(value: string): string {
-  return /^\/[A-Za-z]:[\\/]/.test(value) ? value.slice(1) : value;
-}
-function parseFileUrl(value: string): string | null {
-  try {
-    const parsed = new URL(value);
-    if (parsed.protocol.toLowerCase() !== "file:") return null;
-    if (parsed.hostname.length > 0 && parsed.hostname.toLowerCase() !== "localhost") {
-      const pathname = safeDecode(parsed.pathname).replaceAll("/", "\\");
-      return `\\\\${safeDecode(parsed.hostname)}${pathname}`;
-    }
-    const pathname = safeDecode(parsed.pathname);
-    if (pathname.length === 0) return null;
-    return normalizeWindowsDrivePath(pathname);
-  } catch {
-    return null;
-  }
-}
-function stripSearchAndHash(value: string): string {
-  const searchIndex = value.indexOf("?");
-  const hashIndex = value.indexOf("#");
-  const end = [searchIndex, hashIndex]
-    .filter((index) => index >= 0)
-    .reduce((lowest, index) => Math.min(lowest, index), value.length);
-  return value.slice(0, end);
 }
 function joinWorkspacePath(workspaceRoot: string, relativePath: string): string {
-  const windows =
+  const separator = isWindowsAbsolutePath(workspaceRoot) ? "\\" : "/";
-    WINDOWS_DRIVE_PATH_PATTERN.test(workspaceRoot) || workspaceRoot.startsWith("\\\\");
-  const separator = windows ? "\\" : "/";
   const root = workspaceRoot.replace(/[\\/]+$/, "");
   const path = relativePath.replace(/[\\/]/g, separator).replace(/^[\\/]+/, "");
   return `${root}${separator}${path}`;
 @@ -77,7 +38,7 @@ export function classifyMarkdownImageSource(
 ): MarkdownImageSource {
   if (value === null || value === undefined) return { _tag: "Blocked" };
-  const source = normalizeSource(value);
+  const source = normalizeMarkdownLinkDestination(value);
   if (source.length === 0 || source.startsWith("#") || source.startsWith("?")) {
     return { _tag: "Blocked" };
   }
 @@ -86,13 +47,20 @@ export function classifyMarkdownImageSource(
   }
   if (/^file:/i.test(source)) {
-    const path = parseFileUrl(source);
+    const target = parseFileUrlHref(source);
-    return path === null ? { _tag: "Blocked" } : { _tag: "WorkspaceFile", path };
+    return target === null
+      ? { _tag: "Blocked" }
+      : {
+          _tag: "WorkspaceFile",
+          path: stripSlashPrefixedWindowsDrive(safeDecodeURIComponent(target.path)),
+        };
   }
-  const path = normalizeWindowsDrivePath(safeDecode(stripSearchAndHash(source)));
+  const path = stripSlashPrefixedWindowsDrive(
+    safeDecodeURIComponent(splitMarkdownLinkSearchAndHash(source).path),
+  );
   if (path.length === 0) return { _tag: "Blocked" };
-  if (path.startsWith("/") || WINDOWS_DRIVE_PATH_PATTERN.test(path) || path.startsWith("\\\\")) {
+  if (path.startsWith("/") || isWindowsAbsolutePath(path)) {
     return { _tag: "WorkspaceFile", path };
   }
   if (URI_SCHEME_PATTERN.test(path) || path.startsWith("~/") || path.startsWith("~\\")) {

packages/client-runtime/src/markdownLinks.test.ts+141-1

...	@@ -1,6 +1,14 @@	...	@@ -1,6 +1,14 @@
1	import { describe, expect, it } from "vite-plus/test";	1	import { describe, expect, it } from "vite-plus/test";
2		2
3	import { inlineCodeFilePathCandidate, isConventionalFilePosition } from "./markdownLinks.js";	3	import {
		4	fileBasename,
		5	inlineCodeFilePathCandidate,
		6	isConventionalFilePosition,
		7	parseFileUrlHref,
		8	parseMarkdownFileLink,
		9	splitFilePathPosition,
		10	workspaceRelativeFilePath,
		11	} from "./markdownLinks.ts";
4		12
5	describe("inlineCodeFilePathCandidate", () => {	13	describe("inlineCodeFilePathCandidate", () => {
6	it.each([	14	it.each([
...	@@ -28,3 +36,135 @@ describe("isConventionalFilePosition", () => {	...	@@ -28,3 +36,135 @@ describe("isConventionalFilePosition", () => {
28	expect(isConventionalFilePosition("port:3000")).toBe(false);	36	expect(isConventionalFilePosition("port:3000")).toBe(false);
29	});	37	});
30	});	38	});
		39
		40	describe("parseFileUrlHref", () => {
		41	it.each([
		42	["file:///Users/julius/project/src/main.ts#L42", "/Users/julius/project/src/main.ts", "#L42"],
		43	[
		44	"file:///D:/Programme/t3code/OpenInPicker.tsx#L69",
		45	"D:/Programme/t3code/OpenInPicker.tsx",
		46	"#L69",
		47	],
		48	["file://server/share/workspace-image.svg", "\\\\server\\share\\workspace-image.svg", ""],
		49	["file://localhost/home/me/notes.md", "/home/me/notes.md", ""],
		50	])("parses %s", (href, path, hash) => {
		51	expect(parseFileUrlHref(href)).toEqual({ path, hash });
		52	});
		53
		54	it("keeps percent-encoding so the caller decodes once", () => {
		55	expect(parseFileUrlHref("file:///Users/julius/project/file%2520name.md")?.path).toBe(
		56	"/Users/julius/project/file%2520name.md",
		57	);
		58	expect(parseFileUrlHref("file:///c%3A/Users/x/shot.png")?.path).toBe("/c%3A/Users/x/shot.png");
		59	});
		60
		61	it.each(["https://example.com/a.ts", "file://%", "/Users/julius/a.ts"])("rejects %s", (href) => {
		62	expect(parseFileUrlHref(href)).toBeNull();
		63	});
		64	});
		65
		66	describe("splitFilePathPosition", () => {
		67	it.each([
		68	["src/main.ts", "", { path: "src/main.ts" }],
		69	["src/main.ts:12", "", { path: "src/main.ts", line: 12 }],
		70	["src/main.ts:12:5", "", { path: "src/main.ts", line: 12, column: 5 }],
		71	["src/main.ts", "#L18C2", { path: "src/main.ts", line: 18, column: 2 }],
		72	["src/main.ts:3", "#L18C2", { path: "src/main.ts", line: 3 }],
		73	["src/main.ts:0", "", { path: "src/main.ts" }],
		74	["src/main.ts", "#section", { path: "src/main.ts" }],
		75	])("splits %s%s", (path, hash, expected) => {
		76	expect(splitFilePathPosition(path, hash)).toEqual(expected);
		77	});
		78	});
		79
		80	describe("parseMarkdownFileLink", () => {
		81	// Both clients consume this table, so a path the web app recognizes is one
		82	// the mobile app recognizes too.
		83	it.each([
		84	["/Users/julius/project/AGENTS.md", "/Users/julius/project/AGENTS.md"],
		85	["/home/me/notes.md", "/home/me/notes.md"],
		86	["/usr/local/bin/tool", "/usr/local/bin/tool"],
		87	["/workspace/Makefile", "/workspace/Makefile"],
		88	["/tmp/favicons/", "/tmp/favicons/"],
		89	["C:\\Users\\mike\\project\\src\\main.ts", "C:\\Users\\mike\\project\\src\\main.ts"],
		90	["C:%5Crepo%5Cimage.png", "C:\\repo\\image.png"],
		91	["\\\\server\\share\\image.png", "\\\\server\\share\\image.png"],
		92	["/D:/Programme/t3code/OpenInPicker.tsx", "D:/Programme/t3code/OpenInPicker.tsx"],
		93	["</D:/Programme/t3code/ChatMarkdown.tsx:1>", "D:/Programme/t3code/ChatMarkdown.tsx"],
		94	["file:///Users/julius/project/file%2520name.md", "/Users/julius/project/file%20name.md"],
		95	["file://server/share/workspace-image.svg", "\\\\server\\share\\workspace-image.svg"],
		96	["file://localhost/home/me/notes.md", "/home/me/notes.md"],
		97	["apps/mobile/src/index.ts:10", "apps/mobile/src/index.ts"],
		98	["docs/My%20Folder/checklist.xml", "docs/My Folder/checklist.xml"],
		99	["Updated%20cutover%20checklist.md", "Updated cutover checklist.md"],
		100	["./scripts/deploy", "./scripts/deploy"],
		101	["~/notes/today.md", "~/notes/today.md"],
		102	["AGENTS.md", "AGENTS.md"],
		103	["script.ts:10", "script.ts"],
		104	["/tmp/clip%23one.mp4#t=2", "/tmp/clip#one.mp4"],
		105	])("recognizes %s as a file", (href, path) => {
		106	expect(parseMarkdownFileLink(href)?.path).toBe(path);
		107	});
		108
		109	it.each([
		110	"",
		111	"#anchor",
		112	"//cdn.example.com/clip.mp4",
		113	"https://example.com/docs",
		114	"mailto:someone@example.com",
		115	"javascript:alert(1)",
		116	"/chat/settings",
		117	"/chat/settings#L3",
		118	"/app#L1",
		119	"readme",
		120	"TODO:12",
		121	])("does not treat %s as a file", (href) => {
		122	expect(parseMarkdownFileLink(href)).toBeNull();
		123	});
		124
		125	it("accepts conventional extensionless names with or without a position", () => {
		126	expect(parseMarkdownFileLink("Makefile")).toEqual({ path: "Makefile" });
		127	expect(parseMarkdownFileLink("Dockerfile:8")).toEqual({ path: "Dockerfile", line: 8 });
		128	expect(parseMarkdownFileLink("/srv/app/Makefile")).toEqual({ path: "/srv/app/Makefile" });
		129	});
		130
		131	it("reads positions from suffixes and line anchors", () => {
		132	expect(parseMarkdownFileLink("/Users/julius/project/src/main.ts#L42C7")).toEqual({
		133	path: "/Users/julius/project/src/main.ts",
		134	line: 42,
		135	column: 7,
		136	});
		137	expect(parseMarkdownFileLink("file://server/share/src/main.ts#L42C7")).toMatchObject({
		138	path: "\\\\server\\share\\src\\main.ts",
		139	line: 42,
		140	column: 7,
		141	});
		142	});
		143	});
		144
		145	describe("fileBasename", () => {
		146	it.each([
		147	["/tmp/favicons/", "favicons"],
		148	["C:\\Users\\kelchm\\.claude\\", ".claude"],
		149	["/tmp/", "tmp"],
		150	["AGENTS.md", "AGENTS.md"],
		151	["/", "/"],
		152	])("labels %s as %s", (path, basename) => {
		153	expect(fileBasename(path)).toBe(basename);
		154	});
		155	});
		156
		157	describe("workspaceRelativeFilePath", () => {
		158	it.each([
		159	["/repo/project/src/main.ts", "/repo/project", "src/main.ts"],
		160	["/repo/project/src/main.ts", "/repo/project/", "src/main.ts"],
		161	["C:\\Users\\mike\\t3code\\apps\\web\\a.ts", "C:/Users/mike/t3code", "apps/web/a.ts"],
		162	["/C:/Users/mike/t3code/apps/web/a.ts", "C:/Users/mike/t3code", "apps/web/a.ts"],
		163	["/Repo/Project/src/main.ts", "/repo/project", "src/main.ts"],
		164	["/tmp/report.ts", "/repo/project", null],
		165	["/repo/project-two/a.ts", "/repo/project", null],
		166	["/repo/project/a.ts", undefined, null],
		167	])("relates %s to %s", (path, workspaceRoot, relativePath) => {
		168	expect(workspaceRelativeFilePath(path, workspaceRoot)).toBe(relativePath);
		169	});
		170	});

packages/client-runtime/src/markdownLinks.ts+197-8

...	@@ -1,12 +1,49 @@	...	@@ -1,12 +1,49 @@
1	const WINDOWS_DRIVE_PATH_PATTERN = /^[A-Za-z]:[\\/]/;	1	import { isWindowsAbsolutePath } from "@t3tools/shared/path";
2	const WINDOWS_UNC_PATH_PATTERN = /^\\\\/;	2
		3	const SLASH_PREFIXED_WINDOWS_DRIVE_PATTERN = /^\/[A-Za-z]:[\\/]/;
3	const RELATIVE_PATH_PREFIX_PATTERN = /^(~\/\|\.{1,2}\/)/;	4	const RELATIVE_PATH_PREFIX_PATTERN = /^(~\/\|\.{1,2}\/)/;
		5	const RELATIVE_FILE_PATH_PATTERN =
		6	/^(?:[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)\/)+[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)(?::\d+){0,2}$/;
		7	const RELATIVE_FILE_NAME_PATTERN =
		8	/^[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)*\.[A-Za-z0-9_-]+(?::\d+){0,2}$/;
		9	const EXTERNAL_SCHEME_PATTERN = /^([A-Za-z][A-Za-z0-9+.-]):(.)$/;
4	const POSITION_SUFFIX_PATTERN = /:\d+(?::\d+)?$/;	10	const POSITION_SUFFIX_PATTERN = /:\d+(?::\d+)?$/;
		11	const POSITION_SUFFIX_CAPTURE_PATTERN = /:(\d+)(?::(\d+))?$/;
		12	const POSITION_HASH_PATTERN = /^#L(\d+)(?:C(\d+))?$/i;
		13	const POSITION_ONLY_PATTERN = /^\d+(?::\d+)?$/;
5	const INLINE_CODE_DISQUALIFIER_PATTERN = /[\s`]/;	14	const INLINE_CODE_DISQUALIFIER_PATTERN = /[\s`]/;
6	const PATH_SEPARATOR_PATTERN = /[\\/]/;	15	const PATH_SEPARATOR_PATTERN = /[\\/]/;
7	const FILE_EXTENSION_PATTERN = /\.[A-Za-z0-9_-]+$/;	16	const FILE_EXTENSION_PATTERN = /\.[A-Za-z0-9_-]+$/;
8	const NUMERIC_DOTTED_PATTERN = /^\d+(?:\.\d+)+$/;	17	const NUMERIC_DOTTED_PATTERN = /^\d+(?:\.\d+)+$/;
9	const BARE_EXTENSIONLESS_POSITION_PATTERN = /^[A-Za-z0-9_-]+(?::\d+){1,2}$/;	18	const BARE_EXTENSIONLESS_POSITION_PATTERN = /^[A-Za-z0-9_-]+(?::\d+){1,2}$/;
		19	// Standard OS and dev-container roots; deliberately excludes app-route-ish
		20	// prefixes like /app/ or /chat/ so SPA routes never read as files.
		21	const POSIX_FILE_ROOT_PREFIXES = [
		22	"/Users/",
		23	"/home/",
		24	"/tmp/",
		25	"/var/",
		26	"/etc/",
		27	"/opt/",
		28	"/mnt/",
		29	"/Volumes/",
		30	"/private/",
		31	"/root/",
		32	"/usr/",
		33	"/bin/",
		34	"/sbin/",
		35	"/lib/",
		36	"/lib64/",
		37	"/srv/",
		38	"/dev/",
		39	"/proc/",
		40	"/sys/",
		41	"/run/",
		42	"/boot/",
		43	"/media/",
		44	"/workspace/",
		45	"/workspaces/",
		46	] as const;
10	// `Name:digits` also matches `error:1`, `port:3000`, and `TODO:12`.	47	// `Name:digits` also matches `error:1`, `port:3000`, and `TODO:12`.
11	const EXTENSIONLESS_FILE_NAMES = new Set([	48	const EXTENSIONLESS_FILE_NAMES = new Set([
12	"Makefile",	49	"Makefile",
...	@@ -131,18 +168,14 @@ export function inlineCodeFilePathCandidate(codeText: string): string \| null {	...	@@ -131,18 +168,14 @@ export function inlineCodeFilePathCandidate(codeText: string): string \| null {
131	const trimmed = codeText.trim();	168	const trimmed = codeText.trim();
132	if (trimmed.length === 0 \|\| INLINE_CODE_DISQUALIFIER_PATTERN.test(trimmed)) return null;	169	if (trimmed.length === 0 \|\| INLINE_CODE_DISQUALIFIER_PATTERN.test(trimmed)) return null;
133		170
134	const candidate =	171	const candidate = isWindowsAbsolutePath(trimmed) ? trimmed : trimmed.replaceAll("\\", "/");
135	WINDOWS_DRIVE_PATH_PATTERN.test(trimmed) \|\| WINDOWS_UNC_PATH_PATTERN.test(trimmed)
136	? trimmed
137	: trimmed.replaceAll("\\", "/");
138	const hasPosition = POSITION_SUFFIX_PATTERN.test(candidate);	172	const hasPosition = POSITION_SUFFIX_PATTERN.test(candidate);
139	if (!hasPosition && !PATH_SEPARATOR_PATTERN.test(candidate)) return null;	173	if (!hasPosition && !PATH_SEPARATOR_PATTERN.test(candidate)) return null;
140		174
141	const hasExplicitPathShape =	175	const hasExplicitPathShape =
142	RELATIVE_PATH_PREFIX_PATTERN.test(candidate) \|\|	176	RELATIVE_PATH_PREFIX_PATTERN.test(candidate) \|\|
143	candidate.startsWith("/") \|\|	177	candidate.startsWith("/") \|\|
144	WINDOWS_DRIVE_PATH_PATTERN.test(candidate) \|\|	178	isWindowsAbsolutePath(candidate);
145	WINDOWS_UNC_PATH_PATTERN.test(candidate);
146	if (!hasExplicitPathShape) {	179	if (!hasExplicitPathShape) {
147	const withoutPosition = candidate.replace(POSITION_SUFFIX_PATTERN, "");	180	const withoutPosition = candidate.replace(POSITION_SUFFIX_PATTERN, "");
148	const firstSegment = withoutPosition.split("/")[0] ?? withoutPosition;	181	const firstSegment = withoutPosition.split("/")[0] ?? withoutPosition;
...	@@ -156,3 +189,159 @@ export function inlineCodeFilePathCandidate(codeText: string): string \| null {	...	@@ -156,3 +189,159 @@ export function inlineCodeFilePathCandidate(codeText: string): string \| null {
156	}	189	}
157	return candidate;	190	return candidate;
158	}	191	}
		192
		193	export function safeDecodeURIComponent(value: string): string {
		194	try {
		195	return decodeURIComponent(value);
		196	} catch {
		197	return value;
		198	}
		199	}
		200
		201	export function normalizeMarkdownLinkDestination(value: string): string {
		202	const trimmed = value.trim();
		203	return trimmed.startsWith("<") && trimmed.endsWith(">") ? trimmed.slice(1, -1) : trimmed;
		204	}
		205
		206	/** Browser URL parsers write `C:/foo` as `/C:/foo` for file URLs. */
		207	export function stripSlashPrefixedWindowsDrive(path: string): string {
		208	return SLASH_PREFIXED_WINDOWS_DRIVE_PATTERN.test(path) ? path.slice(1) : path;
		209	}
		210
		211	export function splitMarkdownLinkSearchAndHash(value: string): {
		212	readonly path: string;
		213	readonly hash: string;
		214	} {
		215	const hashIndex = value.indexOf("#");
		216	const pathWithSearch = hashIndex >= 0 ? value.slice(0, hashIndex) : value;
		217	const hash = hashIndex >= 0 ? value.slice(hashIndex) : "";
		218	const queryIndex = pathWithSearch.indexOf("?");
		219	return {
		220	path: queryIndex >= 0 ? pathWithSearch.slice(0, queryIndex) : pathWithSearch,
		221	hash,
		222	};
		223	}
		224
		225	/**
		226	* Turns a `file:` URL into a host path, still percent-encoded so callers that
		227	* decode every destination in one place do not decode file URLs twice. A
		228	* non-localhost authority becomes a UNC share.
		229	*/
		230	export function parseFileUrlHref(
		231	href: string,
		232	): { readonly path: string; readonly hash: string } \| null {
		233	try {
		234	const parsed = new URL(href);
		235	if (parsed.protocol.toLowerCase() !== "file:") return null;
		236
		237	const uncHostname = parsed.hostname.toLowerCase() === "localhost" ? "" : parsed.hostname;
		238	const path = uncHostname
		239	? `\\\\${uncHostname}${parsed.pathname.replaceAll("/", "\\")}`
		240	: parsed.pathname;
		241	if (path.length === 0) return null;
		242	return { path: stripSlashPrefixedWindowsDrive(path), hash: parsed.hash };
		243	} catch {
		244	return null;
		245	}
		246	}
		247
		248	export interface FilePathPosition {
		249	readonly path: string;
		250	readonly line?: number;
		251	readonly column?: number;
		252	}
		253
		254	export function splitFilePathPosition(path: string, hash = ""): FilePathPosition {
		255	const suffixMatch = path.match(POSITION_SUFFIX_CAPTURE_PATTERN);
		256	const match = suffixMatch ?? hash.match(POSITION_HASH_PATTERN);
		257	if (!match?.[1]) return { path };
		258
		259	const line = Number.parseInt(match[1], 10);
		260	const column = match[2] === undefined ? undefined : Number.parseInt(match[2], 10);
		261	return {
		262	path: suffixMatch ? path.slice(0, -suffixMatch[0].length) : path,
		263	...(line > 0 ? { line } : {}),
		264	...(column !== undefined && column > 0 ? { column } : {}),
		265	};
		266	}
		267
		268	export function formatFilePathPosition(position: FilePathPosition): string {
		269	if (!position.line) return position.path;
		270	return `${position.path}:${position.line}${position.column ? `:${position.column}` : ""}`;
		271	}
		272
		273	export function isRelativeFilePath(path: string): boolean {
		274	return (
		275	RELATIVE_PATH_PREFIX_PATTERN.test(path) \|\|
		276	(!path.startsWith("/") && !isWindowsAbsolutePath(path))
		277	);
		278	}
		279
		280	function looksLikePosixFilesystemPath(path: string): boolean {
		281	if (!path.startsWith("/")) return false;
		282	if (POSIX_FILE_ROOT_PREFIXES.some((prefix) => path.startsWith(prefix))) return true;
		283	if (POSITION_SUFFIX_PATTERN.test(path)) return true;
		284	const basename = path.slice(path.lastIndexOf("/") + 1);
		285	return EXTENSIONLESS_FILE_NAMES.has(basename) \|\| FILE_EXTENSION_PATTERN.test(basename);
		286	}
		287
		288	/**
		289	* Decides whether a decoded link destination is a file path rather than a route
		290	* or prose. Only a `:line` suffix the author wrote counts as evidence; a `#L`
		291	* anchor never turns `/chat/settings` into a file.
		292	*/
		293	function looksLikeFilePath(path: string, authoredPath: string): boolean {
		294	if (isWindowsAbsolutePath(path) \|\| RELATIVE_PATH_PREFIX_PATTERN.test(path)) return true;
		295	if (path.startsWith("/")) return looksLikePosixFilesystemPath(authoredPath);
		296	if (EXTENSIONLESS_FILE_NAMES.has(path)) return true;
		297	return RELATIVE_FILE_PATH_PATTERN.test(authoredPath) \|\| RELATIVE_FILE_NAME_PATTERN.test(path);
		298	}
		299
		300	function hasExternalScheme(path: string): boolean {
		301	if (isWindowsAbsolutePath(path)) return false;
		302	const match = path.match(EXTERNAL_SCHEME_PATTERN);
		303	if (!match) return false;
		304	const rest = match[2] ?? "";
		305	if (rest.startsWith("//")) return true;
		306	return !POSITION_ONLY_PATTERN.test(rest);
		307	}
		308
		309	export function parseMarkdownFileLink(href: string): FilePathPosition \| null {
		310	const normalized = normalizeMarkdownLinkDestination(href);
		311	if (normalized.length === 0 \|\| normalized.startsWith("#") \|\| normalized.startsWith("//")) {
		312	return null;
		313	}
		314
		315	const source =
		316	(normalized.toLowerCase().startsWith("file:") ? parseFileUrlHref(normalized) : null) ??
		317	splitMarkdownLinkSearchAndHash(normalized);
		318	// A percent-encoded drive colon (`/c%3A/`) only becomes strippable once decoded.
		319	const path = stripSlashPrefixedWindowsDrive(safeDecodeURIComponent(source.path.trim()));
		320	const hash = safeDecodeURIComponent(source.hash.trim());
		321	if (path.length === 0 \|\| hasExternalScheme(path)) return null;
		322
		323	const position = splitFilePathPosition(path, hash);
		324	return looksLikeFilePath(position.path, path) ? position : null;
		325	}
		326
		327	export function fileBasename(path: string): string {
		328	// A trailing separator is a valid way to write a directory. Trim it before
		329	// taking the final segment so the label is never empty.
		330	const trimmed = path.replace(/[/\\]+$/, "");
		331	if (trimmed.length === 0) return path;
		332	const separatorIndex = Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\"));
		333	return separatorIndex >= 0 ? trimmed.slice(separatorIndex + 1) : trimmed;
		334	}
		335
		336	export function workspaceRelativeFilePath(
		337	path: string,
		338	workspaceRoot: string \| null \| undefined,
		339	): string \| null {
		340	if (!workspaceRoot) return null;
		341	const normalizedPath = stripSlashPrefixedWindowsDrive(path.replaceAll("\\", "/"));
		342	const normalizedRoot = stripSlashPrefixedWindowsDrive(
		343	workspaceRoot.replaceAll("\\", "/"),
		344	).replace(/\/+$/, "");
		345	if (!normalizedPath.toLowerCase().startsWith(`${normalizedRoot.toLowerCase()}/`)) return null;
		346	return normalizedPath.slice(normalizedRoot.length + 1);
		347	}

packages/client-runtime/src/mediaActions.ts created+8

...	@@ -0,0 +1,8 @@
1	/** Menu action ids shared by every client so labels and handlers line up across surfaces. */
2	export type MediaActionId =
3	\| "copy-full-path"
4	\| "copy-relative-path"
5	\| "copy-url"
6	\| "open-file"
7	\| "save"
8	\| "copy-image";

packages/client-runtime/src/mediaReference.ts+3-6

...	@@ -1,5 +1,7 @@	...	@@ -1,5 +1,7 @@
1	import { isWindowsAbsolutePath } from "@t3tools/shared/path";	1	import { isWindowsAbsolutePath } from "@t3tools/shared/path";
2		2
		3	import { safeDecodeURIComponent } from "./markdownLinks.ts";
		4
3	/** The authored media location, never the temporary URL used to load its bytes. */	5	/** The authored media location, never the temporary URL used to load its bytes. */
4	export type MediaReference =	6	export type MediaReference =
5	\| {	7	\| {
...	@@ -86,10 +88,5 @@ export function mediaReferenceFileName(reference: MediaReference): string \| unde	...	@@ -86,10 +88,5 @@ export function mediaReferenceFileName(reference: MediaReference): string \| unde
86	} catch {	88	} catch {
87	return undefined;	89	return undefined;
88	}	90	}
89	if (!basename) return undefined;	91	return basename ? safeDecodeURIComponent(basename) : undefined;
90	try {
91	return decodeURIComponent(basename);
92	} catch {
93	return basename;
94	}
95	}	92	}

packages/client-runtime/src/mediaSource.test.ts created+141

...	@@ -0,0 +1,141 @@
1	import { ThreadId } from "@t3tools/contracts";
2	import { describe, expect, it } from "vite-plus/test";
3
4	import { resolveMediaSource } from "./mediaSource.ts";
5
6	const threadId = ThreadId.make("thread-1");
7	const attachmentId =
8	"11111111-1111-4111-8111-111111111111-22222222-2222-4222-8222-222222222222-mp4";
9
10	describe("resolveMediaSource", () => {
11	describe("direct URLs", () => {
12	it("keeps the authored URL and decodes the display name once", () => {
13	const href = "https://cdn.example.com/clip%20one%2520%2Emp4?signature=a%2fb#t=2";
14	expect(resolveMediaSource(href, { threadId })).toEqual({
15	kind: "video",
16	mimeType: "video/mp4",
17	name: "clip one%20.mp4",
18	reference: { kind: "url", url: href },
19	srcFragment: "#t=2",
20	access: "direct",
21	uri: href,
22	});
23	});
24
25	it("keeps protocol-relative URLs as authored; clients add the scheme", () => {
26	const href = "//cdn.example.com/clip.mp4?sig=1#t=2";
27	expect(resolveMediaSource(href, { threadId })).toMatchObject({
28	access: "direct",
29	uri: href,
30	reference: { kind: "url", url: href },
31	});
32	});
33
34	it("accepts extensionless image embeds only when asked", () => {
35	const href = "https://cdn.example.com/render?id=42";
36	expect(resolveMediaSource(href, { threadId })).toBeNull();
37	expect(resolveMediaSource(href, { threadId, imageEmbed: true })).toMatchObject({
38	kind: "image",
39	mimeType: "image/*",
40	name: "render",
41	});
42	});
43
44	it.each(["data:image/png;base64,AAAA", "blob:https://app.t3.codes/id"])(
45	"loads %s directly",
46	(href) => {
47	expect(resolveMediaSource(href, { threadId, imageEmbed: true })).toMatchObject({
48	access: "direct",
49	uri: href,
50	});
51	},
52	);
53	});
54
55	describe("host paths", () => {
56	// POSIX, Windows, UNC, and file URLs must all reach the same media-file resource.
57	it.each([
58	["/tmp/frame%23one.png:12", "/tmp/frame#one.png"],
59	["/tmp/frame%3Fone.png:12:3", "/tmp/frame?one.png"],
60	["/tmp/frame%2523one.png:12", "/tmp/frame%23one.png"],
61	["C:\\Users\\demo\\frame.png", "C:\\Users\\demo\\frame.png"],
62	["/C:/Users/demo/frame.png", "C:/Users/demo/frame.png"],
63	["file:///C:/Users/demo/frame.png", "C:/Users/demo/frame.png"],
64	["file://server/share/frame.png", "\\\\server\\share\\frame.png"],
65	["\\\\server\\share\\frame.png", "\\\\server\\share\\frame.png"],
66	])("resolves %s through the environment", (href, path) => {
67	expect(resolveMediaSource(href, { threadId, workspaceRoot: "/repo" })).toEqual({
68	kind: "image",
69	mimeType: "image/png",
70	name: path.split(/[\\/]/).at(-1),
71	reference: { kind: "file", path },
72	srcFragment: "",
73	access: "environment",
74	resource: { _tag: "media-file", threadId, path },
75	});
76	});
77
78	it("joins relative paths to the workspace and records the relative reference", () => {
79	expect(
80	resolveMediaSource("screens/logo.svg?v=2#mark", { threadId, workspaceRoot: "/repo" }),
81	).toEqual({
82	kind: "image",
83	mimeType: "image/svg+xml",
84	name: "logo.svg",
85	reference: {
86	kind: "file",
87	path: "/repo/screens/logo.svg",
88	relativePath: "screens/logo.svg",
89	},
90	srcFragment: "#mark",
91	access: "environment",
92	resource: { _tag: "media-file", threadId, path: "/repo/screens/logo.svg" },
93	});
94	});
95
96	it("prefers a caller-resolved path over classifying the source", () => {
97	expect(
98	resolveMediaSource("logo.svg", {
99	threadId,
100	workspaceRoot: "/repo",
101	resolvedFilePath: "/repo/docs/logo.svg",
102	}),
103	).toMatchObject({
104	access: "environment",
105	resource: { _tag: "media-file", path: "/repo/docs/logo.svg" },
106	reference: { relativePath: "docs/logo.svg" },
107	});
108	});
109
110	it("separates a playback fragment from literal filename characters", () => {
111	expect(resolveMediaSource("/tmp/clip%23one.mp4#t=2", { threadId })).toMatchObject({
112	kind: "video",
113	srcFragment: "#t=2",
114	resource: { path: "/tmp/clip#one.mp4" },
115	});
116	});
117
118	it("cannot be loaded without a thread to mint through", () => {
119	expect(resolveMediaSource("/tmp/clip.mp4", { threadId: undefined })).toMatchObject({
120	kind: "video",
121	access: "unavailable",
122	});
123	});
124
125	it.each(["notes.txt", "/repo/README", "/repo/archive.zip"])(
126	"returns null for the non-media path %s",
127	(href) => {
128	expect(resolveMediaSource(href, { threadId, workspaceRoot: "/repo" })).toBeNull();
129	},
130	);
131	});
132
133	it("serves T3 attachment files in place like any other host path", () => {
134	const path = `/home/demo/.t3/userdata/attachments/${attachmentId}.mp4`;
135	expect(resolveMediaSource(path, { threadId, workspaceRoot: "/repo" })).toMatchObject({
136	kind: "video",
137	access: "environment",
138	resource: { _tag: "media-file", threadId, path },
139	});
140	});
141	});

packages/client-runtime/src/mediaSource.ts created+104

...	@@ -0,0 +1,104 @@
1	import type { AssetResource, ThreadId } from "@t3tools/contracts";
2	import { mediaMimeType, mediaMimeTypeFromExtension } from "@t3tools/shared/filePreview";
3
4	import {
5	classifyMarkdownImageSource,
6	markdownImageSourceFragment,
7	type MarkdownImageSource,
8	} from "./markdownImages.ts";
9	import {
10	fileBasename,
11	splitFilePathPosition,
12	splitMarkdownLinkSearchAndHash,
13	} from "./markdownLinks.ts";
14	import {
15	mediaFileReference,
16	mediaReferenceFileName,
17	mediaUrlReference,
18	type MediaReference,
19	} from "./mediaReference.ts";
20
21	export type MediaSourceResource = Extract<AssetResource, { readonly _tag: "media-file" }>;
22
23	/** What a piece of authored media is and how its bytes can be reached. */
24	export type ResolvedMediaSource = {
25	readonly kind: "image" \| "video";
26	readonly mimeType: string;
27	readonly name: string;
28	readonly reference?: MediaReference;
29	readonly srcFragment: string;
30	} & (
31	\| {
32	readonly access: "direct";
33	readonly uri: string;
34	}
35	\| {
36	readonly access: "environment";
37	readonly resource: MediaSourceResource;
38	}
39	\| {
40	readonly access: "unavailable";
41	}
42	);
43
44	export interface ResolveMediaSourceInput {
45	readonly threadId: ThreadId \| undefined;
46	readonly workspaceRoot?: string \| null \| undefined;
47	readonly resolvedFilePath?: string \| undefined;
48	/** Image syntax can target an endpoint without a recognizable extension. */
49	readonly imageEmbed?: boolean \| undefined;
50	}
51
52	function classify(source: string, input: ResolveMediaSourceInput): MarkdownImageSource {
53	return input.resolvedFilePath === undefined
54	? classifyMarkdownImageSource(source, input.workspaceRoot)
55	: { _tag: "WorkspaceFile", path: input.resolvedFilePath };
56	}
57
58	export function resolveMediaSource(
59	source: string,
60	input: ResolveMediaSourceInput,
61	): ResolvedMediaSource \| null {
62	const classified = classify(source, input);
63	if (classified._tag === "Blocked") return null;
64
65	const path =
66	classified._tag === "Direct"
67	? splitMarkdownLinkSearchAndHash(classified.uri).path
68	: splitFilePathPosition(classified.path).path;
69	// Local paths have already been decoded. Do not interpret literal #, ?, or % characters again.
70	const basename = fileBasename(path);
71	const extensionIndex = basename.lastIndexOf(".");
72	const detectedMimeType =
73	classified._tag === "Direct"
74	? mediaMimeType(classified.uri)
75	: extensionIndex < 0
76	? null
77	: mediaMimeTypeFromExtension(basename.slice(extensionIndex));
78	const mimeType = detectedMimeType ?? (input.imageEmbed ? "image/*" : null);
79	if (mimeType === null) return null;
80	const kind = mimeType.startsWith("video/") ? "video" : "image";
81
82	const reference =
83	classified._tag === "Direct"
84	? mediaUrlReference(classified.uri)
85	: mediaFileReference(path, input.workspaceRoot);
86	const name = (reference && mediaReferenceFileName(reference)) \|\| basename \|\| kind;
87	const common = {
88	kind,
89	mimeType,
90	name,
91	...(reference ? { reference } : {}),
92	srcFragment: markdownImageSourceFragment(source),
93	} as const;
94
95	if (classified._tag === "Direct") {
96	return { ...common, access: "direct", uri: classified.uri };
97	}
98	if (input.threadId === undefined) return { ...common, access: "unavailable" };
99	return {
100	...common,
101	access: "environment",
102	resource: { _tag: "media-file", threadId: input.threadId, path },
103	};
104	}

packages/client-runtime/src/state/assets.ts+36-2

...	@@ -1,6 +1,11 @@	...	@@ -1,6 +1,11 @@
1	import { AssetResource, EnvironmentId, WS_METHODS } from "@t3tools/contracts";	1	import {
		2	type AssetCreateUrlResult,
		3	AssetResource,
		4	EnvironmentId,
		5	WS_METHODS,
		6	} from "@t3tools/contracts";
2	import * as Schema from "effect/Schema";	7	import * as Schema from "effect/Schema";
3	import { Atom } from "effect/unstable/reactivity";	8	import { AsyncResult, Atom } from "effect/unstable/reactivity";
4		9
5	import type { EnvironmentRegistry } from "../connection/registry.ts";	10	import type { EnvironmentRegistry } from "../connection/registry.ts";
6	import { createEnvironmentRpcQueryAtomFamily } from "./runtime.ts";	11	import { createEnvironmentRpcQueryAtomFamily } from "./runtime.ts";
...	@@ -43,6 +48,35 @@ export function resolveAssetUrl(httpBaseUrl: string, relativeUrl: string): strin	...	@@ -43,6 +48,35 @@ export function resolveAssetUrl(httpBaseUrl: string, relativeUrl: string): strin
43	}	48	}
44	}	49	}
45		50
		51	export const EMPTY_ASSET_URL_ATOM = Atom.make(AsyncResult.initial<never, never>(false)).pipe(
		52	Atom.withLabel("asset-url:empty"),
		53	);
		54
		55	export type AssetUrlState =
		56	\| { readonly _tag: "Loading" }
		57	\| { readonly _tag: "Failure" }
		58	\| {
		59	readonly _tag: "Success";
		60	readonly url: string;
		61	/** The host path the server chose to serve, when it differs from what was asked for. */
		62	readonly sourcePath?: string;
		63	};
		64
		65	export function assetUrlStateFromResult(
		66	result: AsyncResult.AsyncResult<AssetCreateUrlResult, unknown>,
		67	httpBaseUrl: string \| null,
		68	): AssetUrlState {
		69	if (result._tag === "Failure") return { _tag: "Failure" };
		70	if (httpBaseUrl === null \|\| result._tag !== "Success") return { _tag: "Loading" };
		71	const url = resolveAssetUrl(httpBaseUrl, result.value.relativeUrl);
		72	if (url === null) return { _tag: "Failure" };
		73	return {
		74	_tag: "Success",
		75	url,
		76	...(result.value.sourcePath !== undefined ? { sourcePath: result.value.sourcePath } : {}),
		77	};
		78	}
		79
46	export function createAssetEnvironmentAtoms<R, E>(	80	export function createAssetEnvironmentAtoms<R, E>(
47	runtime: Atom.AtomRuntime<EnvironmentRegistry \| R, E>,	81	runtime: Atom.AtomRuntime<EnvironmentRegistry \| R, E>,
48	) {	82	) {

packages/client-runtime/src/work-log/presentation.test.ts+5-11

 @@ -353,17 +353,11 @@ describe("toolGroupAction", () => {
 describe("resolveViewedImageAsset", () => {
   const threadId = ThreadId.make("thread-1");
-  it("loads t3 attachment paths as attachments", () => {
+  it("serves t3 attachment paths in place like any other host path", () => {
-    const attachmentId =
+    const path = "/Users/demo/.t3/dev/attachments/11111111-1111-4111-8111-111111111111.png";
-      "11111111-1111-4111-8111-111111111111-22222222-2222-4222-8222-222222222222";
+    expect(resolveViewedImageAsset(path, { threadId, workspaceRoot: "/workspace" })).toEqual({
-    expect(
+      resource: { _tag: "media-file", threadId, path },
-      resolveViewedImageAsset(`/Users/demo/.t3/dev/attachments/${attachmentId}.png`, {
+      alt: "11111111-1111-4111-8111-111111111111.png",
-        threadId,
-        workspaceRoot: "/workspace",
-      }),
-    ).toEqual({
-      resource: { _tag: "attachment", attachmentId },
-      alt: `${attachmentId}.png`,
       srcFragment: "",
     });
   });

packages/client-runtime/src/work-log/presentation.ts+13-21

...	@@ -4,10 +4,8 @@ import {	...	@@ -4,10 +4,8 @@ import {
4	type ThreadId,	4	type ThreadId,
5	type ToolLifecycleItemType,	5	type ToolLifecycleItemType,
6	} from "@t3tools/contracts";	6	} from "@t3tools/contracts";
7	import {	7	import { classifyMarkdownImageSource } from "@t3tools/client-runtime/markdown-images";
8	classifyMarkdownImageSource,	8	import { resolveMediaSource } from "@t3tools/client-runtime/media-source";
9	markdownImageSourceFragment,
10	} from "@t3tools/client-runtime/markdown-images";
11	import { isWorkspaceImagePreviewPath } from "@t3tools/shared/filePreview";	9	import { isWorkspaceImagePreviewPath } from "@t3tools/shared/filePreview";
12		10
13	export function isWorktreeSetupActivity(kind: string): boolean {	11	export function isWorktreeSetupActivity(kind: string): boolean {
...	@@ -350,15 +348,11 @@ export function workEntryViewedImagePath(entry: WorkLogPresentationEntry): strin	...	@@ -350,15 +348,11 @@ export function workEntryViewedImagePath(entry: WorkLogPresentationEntry): strin
350	}	348	}
351		349
352	export interface ViewedImageAsset {	350	export interface ViewedImageAsset {
353	readonly resource: Extract<AssetResource, { readonly _tag: "attachment" \| "media-file" }>;	351	readonly resource: Extract<AssetResource, { readonly _tag: "media-file" }>;
354	readonly alt: string;	352	readonly alt: string;
355	readonly srcFragment: string;	353	readonly srcFragment: string;
356	}	354	}
357		355
358	const ABSOLUTE_IMAGE_SOURCE_PATTERN = /^(?:file:\|[\\/]\|[a-z]:[\\/])/i;
359	const T3_ATTACHMENT_IMAGE_PATH_PATTERN =
360	/(?:^\|[\\/])(?:dev\|userdata)[\\/]attachments[\\/]([a-z0-9_-]{1,128})\.[a-z0-9]{1,10}$/i;
361
362	export function resolveViewedImageAsset(	356	export function resolveViewedImageAsset(
363	source: string,	357	source: string,
364	input: {	358	input: {
...	@@ -366,24 +360,22 @@ export function resolveViewedImageAsset(	...	@@ -366,24 +360,22 @@ export function resolveViewedImageAsset(
366	readonly workspaceRoot?: string \| null \| undefined;	360	readonly workspaceRoot?: string \| null \| undefined;
367	},	361	},
368	): ViewedImageAsset \| null {	362	): ViewedImageAsset \| null {
		363	// A relative path with no known workspace still names a media-file relative
		364	// to the thread's workspace, so classify against "." and drop the prefix.
369	const imageSource = classifyMarkdownImageSource(source, input.workspaceRoot ?? ".");	365	const imageSource = classifyMarkdownImageSource(source, input.workspaceRoot ?? ".");
370	if (imageSource._tag !== "WorkspaceFile") return null;	366	if (imageSource._tag !== "WorkspaceFile") return null;
371		367	const resolvedFilePath =
372	const path =
373	input.workspaceRoot == null && imageSource.path.startsWith("./")	368	input.workspaceRoot == null && imageSource.path.startsWith("./")
374	? imageSource.path.slice(2)	369	? imageSource.path.slice(2)
375	: imageSource.path;	370	: imageSource.path;
376	const attachmentId = ABSOLUTE_IMAGE_SOURCE_PATTERN.test(source)
377	? (T3_ATTACHMENT_IMAGE_PATH_PATTERN.exec(path)?.[1] ?? null)
378	: null;
379		371
380	return {	372	const media = resolveMediaSource(source, {
381	resource: attachmentId	373	threadId: input.threadId,
382	? { _tag: "attachment", attachmentId }	374	workspaceRoot: input.workspaceRoot,
383	: { _tag: "media-file", threadId: input.threadId, path },	375	resolvedFilePath,
384	alt: path.split(/[\\/]/).at(-1) ?? "image",	376	});
385	srcFragment: markdownImageSourceFragment(source),	377	if (media === null \|\| media.access !== "environment") return null;
386	};	378	return { resource: media.resource, alt: media.name, srcFragment: media.srcFragment };
387	}	379	}
388		380
389	function toolGroupActionCount(	381	function toolGroupActionCount(

author	Julius Marminge <julius0216@outlook.com> 2026-09-02 19:37:41-07:00
committer	GitHub <noreply@github.com> 2026-09-02 19:37:41-07:00
log	922bd692251bc803c12a3fab159efe83c957bb70
tree	eb779ea33c073ce16ab93e59bddfea60768d12b2
parent	31eeb443305a4e11c8b20a7c8ff2b3f5e841eb0f
signature	Signed by PGP key B5690EEEBB952194

...	@@ -1,6 +1,6 @@	...	@@ -1,6 +1,6 @@
1	import { MenuView } from "@react-native-menu/menu";	1	import { MenuView } from "@react-native-menu/menu";
2	import type { ReactElement } from "react";	2	import type { ReactElement } from "react";
3	import { Platform, View, type PressableProps } from "react-native";	3	import { Platform, View, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
4		4
5	import type { useMediaActions } from "../lib/mediaActions";	5	import type { useMediaActions } from "../lib/mediaActions";
6	import { SymbolView } from "./AppSymbol";	6	import { SymbolView } from "./AppSymbol";
...	@@ -10,6 +10,7 @@ export function MediaActionsMenu(props: {	...	@@ -10,6 +10,7 @@ export function MediaActionsMenu(props: {
10	readonly media: ReturnType<typeof useMediaActions>;	10	readonly media: ReturnType<typeof useMediaActions>;
11	readonly inModal?: boolean;	11	readonly inModal?: boolean;
12	readonly children?: ReactElement<PressableProps>;	12	readonly children?: ReactElement<PressableProps>;
		13	readonly style?: StyleProp<ViewStyle>;
13	}) {	14	}) {
14	if (props.media.actions.length === 0) return props.children ?? null;	15	if (props.media.actions.length === 0) return props.children ?? null;
15	// Android's normal anchored menu lives in the app-root portal, behind native modals.	16	// Android's normal anchored menu lives in the app-root portal, behind native modals.
...	@@ -18,6 +19,7 @@ export function MediaActionsMenu(props: {	...	@@ -18,6 +19,7 @@ export function MediaActionsMenu(props: {
18	return (	19	return (
19	<Menu	20	<Menu
20	title={props.media.title}	21	title={props.media.title}
		22	style={props.style}
21	shouldOpenOnLongPress={props.children !== undefined}	23	shouldOpenOnLongPress={props.children !== undefined}
22	actions={props.media.actions.map(({ id, title, disabled }) => ({	24	actions={props.media.actions.map(({ id, title, disabled }) => ({
23	id,	25	id,

...	@@ -37,12 +37,12 @@ download button beside it to save a copy. Other attached files download when sel	...	@@ -37,12 +37,12 @@ download button beside it to save a copy. Other attached files download when sel
37	Select a video attachment before or after sending to play it. Web and desktop use the browser's	37	Select a video attachment before or after sending to play it. Web and desktop use the browser's
38	built-in controls. On mobile, videos open in a full-screen player with native playback controls.	38	built-in controls. On mobile, videos open in a full-screen player with native playback controls.
39	Supported videos show a thumbnail in the conversation and composer.	39	Supported videos show a thumbnail in the conversation and composer.
40	On web, desktop, and iOS, received videos stream from their environment as they play. Supported formats and codecs	40	Received videos stream from their environment as they play on every platform. Supported formats and
41	depend on the browser or device; you can save an unsupported video to open it in another app.	41	codecs depend on the browser or device; you can save an unsupported video to open it in another app.
42		42
43	On iOS, the system player zooms from the attachment. Swipe down or tap Close to return to the	43	On iOS, the system player zooms from the attachment. Swipe down or tap Close to return to the
44	conversation or draft. Touch and hold the attachment, then choose Save or share video to open	44	conversation or draft. Touch and hold a video thumbnail, then choose Save or share to open
45	the system share options. On Android, use Save or share video inside the preview.	45	the system share options. On Android, the same menu is also available inside the preview.
46		46
47	On web and desktop, if you reload before a file finishes uploading, the draft keeps the file's name	47	On web and desktop, if you reload before a file finishes uploading, the draft keeps the file's name
48	and shows Attach again next to it. Attach the file again or remove it, then send.	48	and shows Attach again next to it. Attach the file again or remove it, then send.
...	@@ -97,20 +97,20 @@ open a media preview.	...	@@ -97,20 +97,20 @@ open a media preview.
97	Videos opened from the file explorer or a file-viewer tab also play inside T3 Code. They	97	Videos opened from the file explorer or a file-viewer tab also play inside T3 Code. They
98	stream from the environment as needed, rather than downloading the entire video before playback.	98	stream from the environment as needed, rather than downloading the entire video before playback.
99	Paths in inline code, such as `/tmp/recording.mp4`, work the same way. Image embeds stay inline;	99	Paths in inline code, such as `/tmp/recording.mp4`, work the same way. Image embeds stay inline;
100	video embeds show a player with controls and an option to expand. Visible video previews load	100	video embeds show a player with the browser's controls, full screen included. Visible video previews load
101	an initial frame when supported, but stay paused until you press Play. Video file references use	101	an initial frame when supported, but stay paused until you press Play. Video file references use
102	a filmstrip icon.	102	a filmstrip icon.
103		103
104	On web and desktop, hover over a preview to see its full file path or original URL. Right-click	104	On web and desktop, hover over a preview to see its full file path or original URL. Right-click
105	to copy that reference, save an image, or copy an image to the clipboard. Use the video player's	105	to copy that reference, save the image or video, or copy an image to the clipboard. The video
106	built-in controls to download videos. If the player cannot decode a video, its error message	106	player's built-in controls can download a video too. If the player cannot decode a video, its error message
107	offers a link to open the source in the browser. Workspace media also offers **Copy relative	107	offers a link to open the source in the browser. Workspace media also offers **Copy relative
108	path and Open in file viewer**. These actions are available in expanded previews too.	108	path and Open in file viewer**. These actions are available in expanded previews too.
109		109
110	On mobile, touch and hold an inline image or use a preview's Media actions menu to see its	110	On mobile, touch and hold an inline image or a video thumbnail to see its source,
111	source, copy the path or URL, or choose Save or share. Workspace media can open in the file	111	copy the path or URL, or choose Save or share. Workspace files can open in the file viewer
112	viewer from the same menu. Saving downloads a copy only when you request it; it does not change	112	from the same menu. Saving downloads a copy only when you request it; it does not change how
113	how the video buffers during playback. On iOS, touch and hold a file reference in a message to	113	the video buffers during playback. On iOS, touch and hold a file reference in a message to
114	copy its full or relative path or open it in the file viewer.	114	copy its full or relative path or open it in the file viewer.
115		115
116	Use Markdown image syntax to embed either kind of media:	116	Use Markdown image syntax to embed either kind of media:

refactor(media): unify file and media previews across clients (#9253)