Commit f8e4accf27415eb9f7f4106087d2a1b0186d66b9 | the-knife

apps/mobile/app.config.ts+1

...	@@ -206,6 +206,7 @@ const config: ExpoConfig = {	...	@@ -206,6 +206,7 @@ const config: ExpoConfig = {
206	},	206	},
207	NSLocalNetworkUsageDescription:	207	NSLocalNetworkUsageDescription:
208	"Allow T3 Code to connect to T3 Code servers on your local network or tailnet.",	208	"Allow T3 Code to connect to T3 Code servers on your local network or tailnet.",
		209	NSPhotoLibraryAddUsageDescription: "Allow T3 Code to save images to your photo library.",
209	ITSAppUsesNonExemptEncryption: false,	210	ITSAppUsesNonExemptEncryption: false,
210	// The App Store screenshot harness rotates the iPad interface from	211	// The App Store screenshot harness rotates the iPad interface from
211	// inside the app (CI denies osascript the Accessibility access that	212	// inside the app (CI denies osascript the Accessibility access that

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

...	@@ -5,6 +5,7 @@ import UIKit	...	@@ -5,6 +5,7 @@ import UIKit
5	public final class T3NativeControlsModule: Module {	5	public final class T3NativeControlsModule: Module {
6	private let presentationSources = T3PresentationSources()	6	private let presentationSources = T3PresentationSources()
7	private var videoPresentation: T3NativeVideoPresentation?	7	private var videoPresentation: T3NativeVideoPresentation?
		8	private var filePresentation: T3NativeFilePresentation?
8		9
9	public func definition() -> ModuleDefinition {	10	public func definition() -> ModuleDefinition {
10	Name("T3NativeControls")	11	Name("T3NativeControls")
...	@@ -23,9 +24,22 @@ public final class T3NativeControlsModule: Module {	...	@@ -23,9 +24,22 @@ public final class T3NativeControlsModule: Module {
23	self.dismissVideo(identifier: identifier)	24	self.dismissVideo(identifier: identifier)
24	}.runOnQueue(.main)	25	}.runOnQueue(.main)
25		26
		27	AsyncFunction("presentFile") { (url: URL, title: String, sourceIdentifier: String, identifier: String, promise: Promise) in
		28	try self.presentFile(url: url, title: title, sourceIdentifier: sourceIdentifier,
		29	identifier: identifier, promise: promise)
		30	}.runOnQueue(.main)
		31
		32	AsyncFunction("dismissFile") { (identifier: String) in
		33	self.dismissFile(identifier: identifier)
		34	}.runOnQueue(.main)
		35
26	OnDestroy {	36	OnDestroy {
27	let presentation = self.videoPresentation	37	let presentation = self.videoPresentation
28	DispatchQueue.main.async { presentation?.dismiss() }	38	let file = self.filePresentation
		39	DispatchQueue.main.async {
		40	presentation?.dismiss()
		41	file?.dismiss()
		42	}
29	}	43	}
30		44
31	View(T3PresentationSourceView.self) {	45	View(T3PresentationSourceView.self) {
...	@@ -140,7 +154,7 @@ public final class T3NativeControlsModule: Module {	...	@@ -140,7 +154,7 @@ public final class T3NativeControlsModule: Module {
140	let isPlayableURL = url.isFileURL	154	let isPlayableURL = url.isFileURL
141	? FileManager.default.isReadableFile(atPath: url.path)	155	? FileManager.default.isReadableFile(atPath: url.path)
142	: (["https", "http"].contains(url.scheme?.lowercased() ?? "") && url.host != nil)	156	: (["https", "http"].contains(url.scheme?.lowercased() ?? "") && url.host != nil)
143	guard videoPresentation == nil,	157	guard videoPresentation == nil, filePresentation == nil,
144	let presenter = appContext?.utilities?.currentViewController(),	158	let presenter = appContext?.utilities?.currentViewController(),
145	isPlayableURL	159	isPlayableURL
146	else {	160	else {
...	@@ -162,6 +176,24 @@ public final class T3NativeControlsModule: Module {	...	@@ -162,6 +176,24 @@ public final class T3NativeControlsModule: Module {
162	if videoPresentation?.identifier == identifier { videoPresentation?.dismiss() }	176	if videoPresentation?.identifier == identifier { videoPresentation?.dismiss() }
163	}	177	}
164		178
		179	private func presentFile(url: URL, title: String, sourceIdentifier: String,
		180	identifier: String, promise: Promise) throws {
		181	guard filePresentation == nil, videoPresentation == nil,
		182	let presenter = appContext?.utilities?.currentViewController()
		183	else { throw URLError(.cannotLoadFromNetwork) }
		184	let file = T3NativeFilePresentation(identifier: identifier, sources: presentationSources,
		185	sourceIdentifier: sourceIdentifier) { [weak self] error in
		186	self?.filePresentation = nil
		187	if let error { promise.reject(error) } else { promise.resolve(nil) }
		188	}
		189	filePresentation = file
		190	file.present(url: url, title: title, from: presenter)
		191	}
		192
		193	private func dismissFile(identifier: String) {
		194	if filePresentation?.identifier == identifier { filePresentation?.dismiss() }
		195	}
		196
165	private func shareFile(url: URL, title: String, sourceIdentifier: String, promise: Promise) throws {	197	private func shareFile(url: URL, title: String, sourceIdentifier: String, promise: Promise) throws {
166	guard let presenter = appContext?.utilities?.currentViewController() else {	198	guard let presenter = appContext?.utilities?.currentViewController() else {
167	throw NSError(	199	throw NSError(

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

...	@@ -0,0 +1,165 @@
1	import ImageIO
2	import QuickLook
3	import UIKit
4	import UniformTypeIdentifiers
5
6	private final class FilePreviewItem: NSObject, QLPreviewItem {
7	var previewItemURL: URL?
8	var previewItemTitle: String?
9	}
10
11	private final class FilePreviewController: QLPreviewController {
12	var onAppear: (() -> Void)?
13
14	override func viewDidAppear(_ animated: Bool) {
15	super.viewDidAppear(animated)
16	onAppear?()
17	}
18	}
19
20	/// Quick Look owns image and document controls, zooming, and source-view transitions.
21	final class T3NativeFilePresentation: NSObject, QLPreviewControllerDataSource,
22	QLPreviewControllerDelegate, UIAdaptivePresentationControllerDelegate {
23	let identifier: String
24	private var controller: UIViewController?
25	private let completion: (Error?) -> Void
26	private weak var sources: T3PresentationSources?
27	private let sourceIdentifier: String
28	private let item = FilePreviewItem()
29	private var loading: Task<Void, Never>?
30	private var dismissRequested = false
31	private var finished = false
32
33	init(identifier: String, sources: T3PresentationSources, sourceIdentifier: String, completion: @escaping (Error?) -> Void) {
34	self.identifier = identifier
35	self.sources = sources
36	self.sourceIdentifier = sourceIdentifier
37	self.completion = completion
38	super.init()
39	}
40
41	func present(url: URL, title: String, from presenter: UIViewController) {
42	loading = Task { @MainActor [self] in
43	do {
44	let file = try await Self.prepareFile(url: url, title: title)
45	guard !finished, !Task.isCancelled else {
46	try? FileManager.default.removeItem(at: file.deletingLastPathComponent())
47	return
48	}
49	item.previewItemURL = file
50	item.previewItemTitle = title
51	let preview = FilePreviewController()
52	preview.delegate = self
53	preview.dataSource = self
54	preview.onAppear = { [weak self] in self?.resumePendingDismissal() }
55	controller = preview
56	presenter.present(preview, animated: !UIAccessibility.isReduceMotionEnabled) { [self] in
57	resumePendingDismissal()
58	}
59	preview.presentationController?.delegate = self
60	} catch {
61	finish(error: error)
62	}
63	}
64	}
65
66	func dismiss() {
67	dismissRequested = true
68	loading?.cancel()
69	guard !finished else { return }
70	guard let controller else { finish(); return }
71	// Drain Close from viewDidAppear after opening or cancelling an interactive dismissal.
72	// Starting a second modal transition while UIKit is settling the first can strand it.
73	guard !controller.isBeingPresented, !controller.isBeingDismissed else { return }
74	controller.dismiss(animated: !UIAccessibility.isReduceMotionEnabled) { [self] in finish() }
75	}
76
77	private func resumePendingDismissal() {
78	// Appearance callbacks run before UIKit has cleared the current transition.
79	DispatchQueue.main.async { [weak self] in
80	if self?.dismissRequested == true { self?.dismiss() }
81	}
82	}
83
84	func numberOfPreviewItems(in controller: QLPreviewController) -> Int { item.previewItemURL == nil ? 0 : 1 }
85
86	func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
87	item
88	}
89
90	func previewController(_ controller: QLPreviewController, transitionViewFor item: QLPreviewItem) -> UIView? {
91	guard !UIAccessibility.isReduceMotionEnabled else { return nil }
92	return sources?.view(for: sourceIdentifier)
93	}
94
95	func previewController(_ controller: QLPreviewController, frameFor item: QLPreviewItem,
96	inSourceView view: AutoreleasingUnsafeMutablePointer<UIView?>) -> CGRect {
97	guard !UIAccessibility.isReduceMotionEnabled, let source = sources?.view(for: sourceIdentifier) else { return .zero }
98	view.pointee = source
99	return source.bounds
100	}
101
102	func previewControllerDidDismiss(_ controller: QLPreviewController) { finish() }
103
104	func presentationControllerDidDismiss(_ presentationController: UIPresentationController) { finish() }
105
106	private func finish(error: Error? = nil) {
107	guard !finished else { return }
108	finished = true
109	loading?.cancel()
110	loading = nil
111	if let file = item.previewItemURL {
112	try? FileManager.default.removeItem(at: file.deletingLastPathComponent())
113	}
114	item.previewItemURL = nil
115	DispatchQueue.main.async { [completion] in completion(error) }
116	}
117
118	/// Copy original bytes so preview and sharing do not mutate a draft or workspace file.
119	nonisolated private static func prepareFile(url: URL, title: String) async throws -> URL {
120	try Task.checkCancellation()
121	let directory = FileManager.default.temporaryDirectory.appendingPathComponent("t3-preview-\(UUID().uuidString)")
122	try FileManager.default.createDirectory(at: directory, withIntermediateDirectories: true)
123	do {
124	let download = directory.appendingPathComponent("original")
125	if url.isFileURL {
126	try FileManager.default.copyItem(at: url, to: download)
127	} else if url.scheme == "data" {
128	try Data(contentsOf: url).write(to: download, options: .atomic)
129	} else {
130	guard ["https", "http"].contains(url.scheme?.lowercased() ?? "") else {
131	throw URLError(.unsupportedURL)
132	}
133	let (temporaryFile, response) = try await URLSession.shared.download(from: url)
134	guard let response = response as? HTTPURLResponse, (200..<300).contains(response.statusCode) else {
135	throw URLError(.badServerResponse)
136	}
137	try FileManager.default.moveItem(at: temporaryFile, to: download)
138	}
139	try Task.checkCancellation()
140	let type: UTType
141	if let image = CGImageSourceCreateWithURL(download as CFURL, nil),
142	CGImageSourceGetCount(image) > 0, let imageType = CGImageSourceGetType(image),
143	let detectedType = UTType(imageType as String) {
144	type = detectedType
145	} else if CGPDFDocument(download as CFURL) != nil {
146	type = .pdf
147	} else {
148	throw URLError(.cannotDecodeContentData)
149	}
150	let filename = URL(fileURLWithPath: title).lastPathComponent as NSString
151	let originalExtension = filename.pathExtension
152	let fileExtension = UTType(filenameExtension: originalExtension) == type
153	? originalExtension : type.preferredFilenameExtension ?? "png"
154	let stem = filename.deletingPathExtension
155	var name = String(stem.prefix(60)).components(separatedBy: .controlCharacters).joined(separator: "_")
156	while name.utf8.count > 200 { name.removeLast() }
157	let file = directory.appendingPathComponent("\(name.isEmpty ? "Preview" : name).\(fileExtension)")
158	try FileManager.default.moveItem(at: download, to: file)
159	return file
160	} catch {
161	try? FileManager.default.removeItem(at: directory)
162	throw error
163	}
164	}
165	}

apps/mobile/src/components/ComposerAttachmentStrip.tsx+67-36

 @@ -6,15 +6,18 @@ import { Alert, 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 { loadLocalVideoPreview } from "../lib/localVideoPreview";
+import { loadLocalAttachmentPreview } from "../lib/localAttachmentPreview";
+import { PresentationSource } from "./NativePresentation";
+import type { FilePreviewSource } from "./FilePreviewModal";
+import { isPdfFile } from "../lib/filePreview";
 export interface ComposerAttachmentStripProps {
   /** Attachments to display. */
   readonly attachments: ReadonlyArray<DraftComposerAttachment>;
   /** Called when the user removes an attachment. */
   readonly onRemove: (imageId: string) => void;
-  /** Called when the user taps on an image thumbnail to preview it. */
+  /** Called when the user taps an image or PDF to preview it. */
-  readonly onPressImage?: (previewUri: string) => void;
+  readonly onPressPreview?: (source: FilePreviewSource) => void;
   readonly onPressVideo?: (
     attachment: DraftComposerFileAttachment,
     sourceIdentifier: string,
 @@ -32,7 +35,7 @@ export function ComposerAttachmentThumbnail(props: {
   readonly size: number;
   readonly borderRadius: number;
   readonly compact?: boolean;
-  readonly onPressImage?: (previewUri: string) => void;
+  readonly onPressPreview?: (source: FilePreviewSource) => void;
   readonly onPressVideo?: (
     attachment: DraftComposerFileAttachment,
     sourceIdentifier: string,
 @@ -41,17 +44,30 @@ export function ComposerAttachmentThumbnail(props: {
   const { attachment } = props;
   const style = { width: props.size, height: props.size, borderRadius: props.borderRadius };
   if (attachment.type === "image") {
+    const sourceIdentifier = `draft-image:${attachment.id}`;
     return (
-      <Pressable
+      <PresentationSource identifier={sourceIdentifier}>
-        onPress={props.onPressImage ? () => props.onPressImage?.(attachment.previewUri) : undefined}
+        <Pressable
-      >
+          accessibilityRole="imagebutton"
-        <Image
+          accessibilityLabel={`Open ${attachment.name}`}
-          source={{ uri: attachment.previewUri }}
+          disabled={!props.onPressPreview}
-          style={style}
+          onPress={() =>
-          className="bg-subtle"
+            props.onPressPreview?.({
-          resizeMode="cover"
+              kind: "image",
-        />
+              uri: attachment.dataUrl,
-      </Pressable>
+              name: attachment.name,
+              sourceIdentifier,
+            })
+          }
+        >
+          <Image
+            source={{ uri: attachment.previewUri }}
+            style={style}
+            className="bg-subtle"
+            resizeMode="cover"
+          />
+        </Pressable>
+      </PresentationSource>
     );
   }
   const onPressVideo = props.onPressVideo;
 @@ -60,27 +76,42 @@ export function ComposerAttachmentThumbnail(props: {
       <ComposerVideoAttachment {...props} attachment={attachment} onPressVideo={onPressVideo} />
     );
   }
+  const canPreview = isPdfFile(attachment) && props.onPressPreview !== undefined;
+  const sourceIdentifier = `draft-file:${attachment.id}`;
   return (
-    <View
+    <PresentationSource identifier={sourceIdentifier}>
-      className={
+      <Pressable
-        props.compact
+        accessibilityRole="button"
-          ? "items-center justify-center bg-subtle"
+        accessibilityLabel={`Open ${attachment.name}`}
-          : "items-center justify-center gap-1 bg-subtle px-2"
+        disabled={!canPreview}
-      }
+        onPress={() =>
-      style={style}
+          props.onPressPreview?.({
-    >
+            kind: "pdf",
-      <SymbolView
+            name: attachment.name,
-        name="doc.text"
+            attachment,
-        size={props.compact ? 15 : 22}
+            sourceIdentifier,
-        tintColor="#a3a3a3"
+          })
-        type="monochrome"
+        }
-      />
+        className={
-      {!props.compact ? (
+          props.compact
-        <Text className="w-full text-center text-2xs text-foreground" numberOfLines={1}>
+            ? "items-center justify-center bg-subtle"
-          {attachment.name}
+            : "items-center justify-center gap-1 bg-subtle px-2"
-        </Text>
+        }
-      ) : null}
+        style={style}
-    </View>
+      >
+        <SymbolView
+          name="doc.text"
+          size={props.compact ? 15 : 22}
+          tintColor="#a3a3a3"
+          type="monochrome"
+        />
+        {!props.compact ? (
+          <Text className="w-full text-center text-2xs text-foreground" numberOfLines={1}>
+            {attachment.name}
+          </Text>
+        ) : null}
+      </Pressable>
+    </PresentationSource>
   );
 }
 @@ -113,7 +144,7 @@ function ComposerVideoAttachment(props: {
     shareRef.current = controller;
     setSharing(true);
     void (async () => {
-      const preview = await loadLocalVideoPreview(attachment, controller.signal);
+      const preview = await loadLocalAttachmentPreview(attachment, controller.signal);
       if (!preview) return;
       try {
         await preview.share(controller.signal, sourceIdentifier);
 @@ -185,7 +216,7 @@ export function ComposerAttachmentStrip(props: ComposerAttachmentStripProps) {
               attachment={attachment}
               size={size}
               borderRadius={radius}
-              onPressImage={props.onPressImage}
+              onPressPreview={props.onPressPreview}
               onPressVideo={props.onPressVideo}
             />
             <Pressable

apps/mobile/src/components/FilePreview.ios.tsx created+43

...	@@ -0,0 +1,43 @@
1	import { requireNativeModule } from "expo";
2	import { useEffect, useEffectEvent, useId } from "react";
3	import { Alert } from "react-native";
4
5	import type { ResolvedFilePreviewSource } from "./FilePreviewModal";
6
7	const NativeControls = requireNativeModule<{
8	presentFile(
9	uri: string,
10	name: string,
11	sourceIdentifier: string,
12	identifier: string,
13	): Promise<void>;
14	dismissFile(identifier: string): Promise<void>;
15	}>("T3NativeControls");
16
17	export function FilePreview(props: {
18	readonly source: ResolvedFilePreviewSource;
19	readonly onRequestClose: () => void;
20	}) {
21	const { uri, name, sourceIdentifier } = props.source;
22	const identifier = useId();
23	const onRequestClose = useEffectEvent(props.onRequestClose);
24
25	useEffect(() => {
26	let canceled = false;
27	void NativeControls.presentFile(uri, name ?? "Preview", sourceIdentifier ?? "", identifier)
28	.catch(() => {
29	if (!canceled) {
30	Alert.alert("Could not open preview", "The file could not be loaded. Please try again.");
31	}
32	})
33	.finally(() => {
34	if (!canceled) onRequestClose();
35	});
36	return () => {
37	canceled = true;
38	void NativeControls.dismissFile(identifier).catch(() => undefined);
39	};
40	}, [uri, name, sourceIdentifier, identifier]);
41
42	return null;
43	}

apps/mobile/src/components/FilePreview.tsx created+52

...	@@ -0,0 +1,52 @@
1	import { useEffect, useEffectEvent } from "react";
2	import { Alert } from "react-native";
3	import ImageViewing from "react-native-image-viewing";
4
5	import { downloadAndShareAttachment, shareLocalAttachment } from "../lib/attachmentDownload";
6	import type { ResolvedFilePreviewSource } from "./FilePreviewModal";
7
8	function PdfPreview(props: {
9	readonly source: ResolvedFilePreviewSource;
10	readonly onRequestClose: () => void;
11	}) {
12	const { uri, name } = props.source;
13	const onRequestClose = useEffectEvent(props.onRequestClose);
14	useEffect(() => {
15	const controller = new AbortController();
16	const input = {
17	attachment: { name: name ?? "Document.pdf", mimeType: "application/pdf" },
18	signal: controller.signal,
19	};
20	// Android's system chooser supplies the installed PDF apps.
21	const opened =
22	uri.startsWith("file:") \|\| uri.startsWith("content:")
23	? shareLocalAttachment({ ...input, uri })
24	: downloadAndShareAttachment({ ...input, url: uri });
25	void opened
26	.catch(() => {
27	if (!controller.signal.aborted) Alert.alert("Could not open PDF", "Please try again.");
28	})
29	.finally(() => {
30	if (!controller.signal.aborted) onRequestClose();
31	});
32	return () => controller.abort();
33	}, [uri, name]);
34	return null;
35	}
36
37	export function FilePreview(props: {
38	readonly source: ResolvedFilePreviewSource;
39	readonly onRequestClose: () => void;
40	}) {
41	if (props.source.kind === "pdf") return <PdfPreview {...props} />;
42	return (
43	<ImageViewing
44	images={[{ uri: props.source.uri }]}
45	imageIndex={0}
46	visible
47	onRequestClose={props.onRequestClose}
48	swipeToCloseEnabled
49	doubleTapToZoomEnabled
50	/>
51	);
52	}

apps/mobile/src/components/FilePreviewModal.tsx created+93

...	@@ -0,0 +1,93 @@
1	import { useIsFocused } from "@react-navigation/native";
2	import type { AssetResource, EnvironmentId } from "@t3tools/contracts";
3	import { useEffect, useEffectEvent, useState } from "react";
4	import { Alert, Keyboard } from "react-native";
5
6	import type { DraftComposerFileAttachment } from "../lib/composerImages";
7	import { loadLocalAttachmentPreview } from "../lib/localAttachmentPreview";
8	import { useAssetUrlState } from "../state/assets";
9	import { usePreparedConnection } from "../state/session";
10	import { FilePreview } from "./FilePreview";
11
12	export interface ResolvedFilePreviewSource {
13	readonly kind: "image" \| "pdf";
14	readonly uri: string;
15	readonly name?: string;
16	readonly sourceIdentifier?: string;
17	}
18
19	export type FilePreviewSource = Omit<ResolvedFilePreviewSource, "uri"> &
20	(
21	\| { readonly uri: string }
22	\| { readonly attachment: DraftComposerFileAttachment }
23	\| { readonly environmentId: EnvironmentId; readonly resource: AssetResource }
24	);
25
26	function ResolvedFilePreview(props: {
27	readonly source: FilePreviewSource;
28	readonly onRequestClose: () => void;
29	}) {
30	const { source } = props;
31	const environmentId = "environmentId" in source ? source.environmentId : null;
32	const connection = usePreparedConnection(environmentId);
33	const asset = useAssetUrlState(environmentId, "resource" in source ? source.resource : null);
34	// Keep the original URL through dismissal; a refreshed signature must not reopen the viewer.
35	const [uri, setUri] = useState<string \| null>("uri" in source ? source.uri : null);
36	const onRequestClose = useEffectEvent(props.onRequestClose);
37	const failed =
38	environmentId !== null &&
39	uri === null &&
40	(connection._tag === "None" \|\| asset._tag === "Failure");
41	useEffect(() => Keyboard.dismiss(), []);
42	useEffect(() => {
43	if (uri === null && asset._tag === "Success") setUri(asset.url);
44	}, [uri, asset]);
45	useEffect(() => {
46	if (!failed) return;
47	Alert.alert("Could not open preview", "Reconnect to this environment and try again.");
48	onRequestClose();
49	}, [failed]);
50	useEffect(() => {
51	if (!("attachment" in source)) return;
52	const controller = new AbortController();
53	let release: (() => void) \| undefined;
54	void loadLocalAttachmentPreview(source.attachment, controller.signal)
55	.then((file) => {
56	if (!file) return;
57	if (controller.signal.aborted) {
58	file.dispose();
59	return;
60	}
61	release = file.dispose;
62	setUri(file.uri);
63	})
64	.catch(() => {
65	if (controller.signal.aborted) return;
66	Alert.alert("Could not open preview", "Attach the file again and retry.");
67	onRequestClose();
68	});
69	return () => {
70	controller.abort();
71	release?.();
72	};
73	}, [source]);
74
75	return uri === null ? null : (
76	<FilePreview source={{ ...source, uri }} onRequestClose={props.onRequestClose} />
77	);
78	}
79
80	export function FilePreviewModal(props: {
81	readonly source: FilePreviewSource \| null;
82	readonly onRequestClose: () => void;
83	}) {
84	const isFocused = useIsFocused();
85	const hasSource = props.source !== null;
86	const onRequestClose = useEffectEvent(props.onRequestClose);
87	useEffect(() => {
88	if (!isFocused && hasSource) onRequestClose();
89	}, [isFocused, hasSource]);
90
91	if (!props.source \|\| !isFocused) return null;
92	return <ResolvedFilePreview source={props.source} onRequestClose={props.onRequestClose} />;
93	}

apps/mobile/src/components/VideoPreviewModal.ios.tsx+2-2

apps/mobile/src/components/VideoPreviewModal.tsx+2-2

...	@@ -20,7 +20,7 @@ import {	...	@@ -20,7 +20,7 @@ import {
20	type AttachmentPreviewFile,	20	type AttachmentPreviewFile,
21	} from "../lib/attachmentDownload";	21	} from "../lib/attachmentDownload";
22	import type { DraftComposerFileAttachment } from "../lib/composerImages";	22	import type { DraftComposerFileAttachment } from "../lib/composerImages";
23	import { loadLocalVideoPreview } from "../lib/localVideoPreview";	23	import { loadLocalAttachmentPreview } from "../lib/localAttachmentPreview";
24	import { useAssetUrlState } from "../state/assets";	24	import { useAssetUrlState } from "../state/assets";
25	import { usePreparedConnection } from "../state/session";	25	import { usePreparedConnection } from "../state/session";
26	import { SymbolView } from "./AppSymbol";	26	import { SymbolView } from "./AppSymbol";
...	@@ -155,7 +155,7 @@ function OpenVideoPreviewModal(props: {	...	@@ -155,7 +155,7 @@ function OpenVideoPreviewModal(props: {
155	setFailure(null);	155	setFailure(null);
156	const loading =	156	const loading =
157	source.type === "local"	157	source.type === "local"
158	? loadLocalVideoPreview(source.attachment, controller.signal)	158	? loadLocalAttachmentPreview(source.attachment, controller.signal)
159	: downloadAttachmentForPreview({	159	: downloadAttachmentForPreview({
160	url: downloadUrl!,	160	url: downloadUrl!,
161	attachment: { name: attachment.name, mimeType },	161	attachment: { name: attachment.name, mimeType },

apps/mobile/src/components/VideoThumbnailImage.tsx+2-2

...	@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";	...	@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
5	import { StyleSheet } from "react-native";	5	import { StyleSheet } from "react-native";
6		6
7	import type { DraftComposerFileAttachment } from "../lib/composerImages";	7	import type { DraftComposerFileAttachment } from "../lib/composerImages";
8	import { loadLocalVideoPreview } from "../lib/localVideoPreview";	8	import { loadLocalAttachmentPreview } from "../lib/localAttachmentPreview";
9	import { cachedVideoThumbnail, loadVideoThumbnail } from "../lib/videoThumbnails";	9	import { cachedVideoThumbnail, loadVideoThumbnail } from "../lib/videoThumbnails";
10		10
11	export function VideoThumbnailImage(props: {	11	export function VideoThumbnailImage(props: {
...	@@ -25,7 +25,7 @@ export function VideoThumbnailImage(props: {	...	@@ -25,7 +25,7 @@ export function VideoThumbnailImage(props: {
25	async (signal) =>	25	async (signal) =>
26	typeof source === "string"	26	typeof source === "string"
27	? { uri: source, dispose: () => undefined }	27	? { uri: source, dispose: () => undefined }
28	: loadLocalVideoPreview(source, signal),	28	: loadLocalAttachmentPreview(source, signal),
29	controller.signal,	29	controller.signal,
30	).then((thumbnail) => {	30	).then((thumbnail) => {
31	if (thumbnail && !controller.signal.aborted) setLoaded({ key: cacheKey, thumbnail });	31	if (thumbnail && !controller.signal.aborted) setLoaded({ key: cacheKey, thumbnail });

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

 @@ -17,9 +17,11 @@ import { SymbolView } from "../../components/AppSymbol";
 import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
 import { ControlPillMenu } from "../../components/ControlPill";
 import { EmptyState } from "../../components/EmptyState";
+import { FilePreviewModal, type FilePreviewSource } from "../../components/FilePreviewModal";
 import { LoadingScreen } from "../../components/LoadingScreen";
 import { resolveFileSelectionNavigationAction } from "../../lib/adaptive-navigation";
 import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
+import { isPdfFile } from "../../lib/filePreview";
 import { tryOpenExternalUrl } from "../../lib/openExternalUrl";
 import { useUniwindTheme } from "../../lib/useUniwindTheme";
 import { useThreadSelection } from "../../state/use-thread-selection";
 @@ -487,6 +489,7 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
     readonly mode: FileViewMode;
   } | null>(null);
   const [previewRevision, setPreviewRevision] = useState(0);
+  const [fullScreenPreview, setFullScreenPreview] = useState<FilePreviewSource | null>(null);
   const isBrowserFile = relativePath !== null && isBrowserPreviewFile(relativePath);
   const isImageFile = relativePath !== null && isImagePreviewFile(relativePath);
   const canPreview =
 @@ -586,6 +589,20 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
         inline: false,
         onPress: () => copyTextWithHaptic(relativePath),
       } as const,
+      isPdfFile({ name: relativePath }) && previewUri !== null
+        ? ({
+            id: "open-pdf",
+            title: "Open PDF",
+            icon: "arrow.up.left.and.arrow.down.right",
+            inline: false,
+            onPress: () =>
+              setFullScreenPreview({
+                kind: "pdf",
+                uri: previewUri,
+                name: basename(relativePath),
+              }),
+          } as const)
+        : null,
       isBrowserFile && typeof assetPreviewUri === "string"
         ? ({
             id: "open-browser",
 @@ -605,7 +622,15 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
           } as const)
         : null,
     ].filter((action) => action !== null);
-  }, [assetPreviewUri, canPreview, isBrowserFile, isImageFile, relativePath, resolvedActiveMode]);
+  }, [
+    assetPreviewUri,
+    previewUri,
+    canPreview,
+    isBrowserFile,
+    isImageFile,
+    relativePath,
+    resolvedActiveMode,
+  ]);
   const androidFileMenuActions = useMemo<MenuAction[]>(
     () =>
 @@ -766,6 +791,10 @@ export function ThreadFileScreen(props: ThreadFileRouteScreenProps) {
           truncated={fileData?.truncated ?? false}
           onRefresh={() => fileQuery.refresh()}
         />
+        <FilePreviewModal
+          source={fullScreenPreview}
+          onRequestClose={() => setFullScreenPreview(null)}
+        />
       </View>
     </ReviewHighlighterProvider>
   );

apps/mobile/src/features/files/WorkspaceFileImagePreview.tsx+26-23

 @@ -1,24 +1,25 @@
 import { useAtomValue } from "@effect/atom-react";
-import { useMemo, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { ActivityIndicator, Image, Pressable, View } from "react-native";
-import ImageViewing from "react-native-image-viewing";
 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";
 function ResolvedWorkspaceFileImagePreview(props: {
   readonly accessibilityLabel: string;
   readonly uri: string;
 }) {
   const [loadError, setLoadError] = useState<string | null>(null);
-  const [fullScreenVisible, setFullScreenVisible] = useState(false);
+  const [preview, setPreview] = useState<FilePreviewSource | null>(null);
+  const sourceIdentifier = useId();
   const imageSource = useMemo(
     () => ({ uri: props.uri, cache: "force-cache" as const }),
     [props.uri],
   );
-  const fullScreenImages = useMemo(() => [imageSource], [imageSource]);
   return (
     <View className="relative flex-1 bg-subtle">
 @@ -27,18 +28,27 @@ function ResolvedWorkspaceFileImagePreview(props: {
         accessibilityLabel={`Open full-screen preview of ${props.accessibilityLabel}`}
         disabled={loadError !== null}
         className="flex-1 p-4 active:bg-subtle-strong"
-        onPress={() => setFullScreenVisible(true)}
+        onPress={() =>
+          setPreview({
+            kind: "image",
+            uri: props.uri,
+            name: props.accessibilityLabel,
+            sourceIdentifier,
+          })
+        }
       >
-        <Image
+        <PresentationSource identifier={sourceIdentifier} style={{ flex: 1 }}>
-          accessible={false}
+          <Image
-          source={imageSource}
+            accessible={false}
-          className="h-full w-full"
+            source={imageSource}
-          resizeMode="contain"
+            className="h-full w-full"
-          onLoadStart={() => setLoadError(null)}
+            resizeMode="contain"
-          onError={(event) => {
+            onLoadStart={() => setLoadError(null)}
-            setLoadError(event.nativeEvent.error || "The image could not be rendered.");
+            onError={(event) => {
-          }}
+              setLoadError(event.nativeEvent.error || "The image could not be rendered.");
-        />
+            }}
+          />
+        </PresentationSource>
       </Pressable>
       {loadError !== null ? (
 @@ -47,14 +57,7 @@ function ResolvedWorkspaceFileImagePreview(props: {
         </View>
       ) : null}
-      <ImageViewing
+      <FilePreviewModal source={preview} onRequestClose={() => setPreview(null)} />
-        images={fullScreenImages}
-        imageIndex={0}
-        visible={fullScreenVisible}
-        onRequestClose={() => setFullScreenVisible(false)}
-        swipeToCloseEnabled
-        doubleTapToZoomEnabled
-      />
     </View>
   );
 }

apps/mobile/src/features/review/ReviewCommentComposerSheet.tsx+4-11

...	@@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";	...	@@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
5	import { Platform, Pressable, ScrollView, View, useWindowDimensions } from "react-native";	5	import { Platform, Pressable, ScrollView, View, useWindowDimensions } from "react-native";
6	import { KeyboardAvoidingView, KeyboardStickyView } from "react-native-keyboard-controller";	6	import { KeyboardAvoidingView, KeyboardStickyView } from "react-native-keyboard-controller";
7	import { useSafeAreaInsets } from "react-native-safe-area-context";	7	import { useSafeAreaInsets } from "react-native-safe-area-context";
8	import ImageViewing from "react-native-image-viewing";	8	import { FilePreviewModal, type FilePreviewSource } from "../../components/FilePreviewModal";
9		9
10	import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";	10	import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
11	import { SymbolView } from "../../components/AppSymbol";	11	import { SymbolView } from "../../components/AppSymbol";
...	@@ -53,7 +53,7 @@ export function ReviewCommentComposerSheet(props: ReviewCommentComposerSheetProp	...	@@ -53,7 +53,7 @@ export function ReviewCommentComposerSheet(props: ReviewCommentComposerSheetProp
53	Record<string, ReadonlyArray<ReviewHighlightedToken>>	53	Record<string, ReadonlyArray<ReviewHighlightedToken>>
54	>({});	54	>({});
55	const [attachments, setAttachments] = useState<ReadonlyArray<DraftComposerImageAttachment>>([]);	55	const [attachments, setAttachments] = useState<ReadonlyArray<DraftComposerImageAttachment>>([]);
56	const [previewImageUri, setPreviewImageUri] = useState<string \| null>(null);	56	const [previewFile, setPreviewFile] = useState<FilePreviewSource \| null>(null);
57		57
58	const selectedLines = useMemo(	58	const selectedLines = useMemo(
59	() => (target ? getSelectedReviewCommentLines(target) : []),	59	() => (target ? getSelectedReviewCommentLines(target) : []),
...	@@ -272,7 +272,7 @@ export function ReviewCommentComposerSheet(props: ReviewCommentComposerSheetProp	...	@@ -272,7 +272,7 @@ export function ReviewCommentComposerSheet(props: ReviewCommentComposerSheetProp
272	attachments={attachments}	272	attachments={attachments}
273	imageBorderRadius={16}	273	imageBorderRadius={16}
274	imageSize={60}	274	imageSize={60}
275	onPressImage={setPreviewImageUri}	275	onPressPreview={setPreviewFile}
276	removeButtonPlacement="gutter"	276	removeButtonPlacement="gutter"
277	onRemove={(imageId) => {	277	onRemove={(imageId) => {
278	setAttachments((current) =>	278	setAttachments((current) =>
...	@@ -332,14 +332,7 @@ export function ReviewCommentComposerSheet(props: ReviewCommentComposerSheetProp	...	@@ -332,14 +332,7 @@ export function ReviewCommentComposerSheet(props: ReviewCommentComposerSheetProp
332	</View>	332	</View>
333	</KeyboardStickyView>	333	</KeyboardStickyView>
334	) : null}	334	) : null}
335	<ImageViewing	335	<FilePreviewModal source={previewFile} onRequestClose={() => setPreviewFile(null)} />
336	images={previewImageUri ? [{ uri: previewImageUri }] : []}
337	imageIndex={0}
338	visible={previewImageUri !== null}
339	onRequestClose={() => setPreviewImageUri(null)}
340	swipeToCloseEnabled
341	doubleTapToZoomEnabled
342	/>
343	</View>	336	</View>
344	);	337	);
345	}	338	}

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx+21-5

 @@ -35,6 +35,7 @@ import {
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";
 import { ComposerAttachmentStrip } from "../../components/ComposerAttachmentStrip";
+import { FilePreviewModal, type FilePreviewSource } from "../../components/FilePreviewModal";
 import { VideoPreviewModal, type VideoPreviewSource } from "../../components/VideoPreviewModal";
 import { ProviderIcon } from "../../components/ProviderIcon";
 import { SymbolView } from "../../components/AppSymbol";
 @@ -167,17 +168,28 @@ export function NewTaskDraftScreen(props: {
   const loadedBranchesProjectKeyRef = useRef<string | null>(null);
   const [isComposerFocused, setIsComposerFocused] = useState(false);
   const [previewVideo, setPreviewVideo] = useState<VideoPreviewSource | null>(null);
-  const wasFocusedBeforeVideoRef = useRef(false);
+  const [previewFile, setPreviewFile] = useState<FilePreviewSource | null>(null);
+  const wasFocusedBeforePreviewRef = useRef(false);
   const openVideoPreview = useCallback(
     (attachment: DraftComposerFileAttachment, sourceIdentifier: string) => {
-      wasFocusedBeforeVideoRef.current = isComposerFocused;
+      wasFocusedBeforePreviewRef.current = isComposerFocused;
+      setPreviewFile(null);
       setPreviewVideo((current) => current ?? { type: "local", attachment, sourceIdentifier });
     },
     [isComposerFocused],
   );
-  const closeVideoPreview = useCallback(() => {
+  const openFilePreview = useCallback(
+    (source: FilePreviewSource) => {
+      wasFocusedBeforePreviewRef.current = isComposerFocused;
+      setPreviewVideo(null);
+      setPreviewFile((current) => current ?? source);
+    },
+    [isComposerFocused],
+  );
+  const closeMediaPreview = useCallback(() => {
     setPreviewVideo(null);
-    if (wasFocusedBeforeVideoRef.current) {
+    setPreviewFile(null);
+    if (wasFocusedBeforePreviewRef.current) {
       setTimeout(() => {
         if (navigation.isFocused()) promptInputRef.current?.focus();
       }, 100);
 @@ -1212,6 +1224,9 @@ export function NewTaskDraftScreen(props: {
                   ? () => undefined
                   : flow.removeAttachment
               }
+              onPressPreview={
+                isComposerInteractionLocked || voiceInput.isBusy ? undefined : openFilePreview
+              }
               onPressVideo={
                 isComposerInteractionLocked || voiceInput.isBusy ? undefined : openVideoPreview
               }
 @@ -1318,7 +1333,8 @@ export function NewTaskDraftScreen(props: {
           </ComposerDictationToolbar>
         </Animated.View>
       </ComposerSurface>
-      <VideoPreviewModal source={previewVideo} onRequestClose={closeVideoPreview} />
+      <VideoPreviewModal source={previewVideo} onRequestClose={closeMediaPreview} />
+      <FilePreviewModal source={previewFile} onRequestClose={closeMediaPreview} />
     </View>
   );

apps/mobile/src/features/threads/ThreadComposer.tsx+10-17

 @@ -20,7 +20,7 @@ import {
   type RefObject,
 } from "react";
 import { ActivityIndicator, Platform, Pressable, View, type ViewStyle } from "react-native";
-import ImageViewing from "react-native-image-viewing";
+import { FilePreviewModal, type FilePreviewSource } from "../../components/FilePreviewModal";
 import Animated, {
   FadeIn,
   FadeInDown,
 @@ -311,7 +311,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
   const inFlightThreadIdsRef = useRef(new Set<string>());
   const { onExpandedChange } = props;
-  const [previewImageUri, setPreviewImageUri] = useState<string | null>(null);
+  const [previewFile, setPreviewFile] = useState<FilePreviewSource | null>(null);
   const [previewVideo, setPreviewVideo] = useState<VideoPreviewSource | null>(null);
   const hasContent = props.draftMessage.trim().length > 0 || props.draftAttachments.length > 0;
   const showStopAction =
 @@ -372,17 +372,17 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
     onExpandedChange?.(isExpanded);
   }, [isExpanded, onExpandedChange]);
-  const onPressImage = useCallback(
+  const onPressPreview = useCallback(
-    (uri: string) => {
+    (source: FilePreviewSource) => {
       wasExpandedBeforePreviewRef.current = isFocused;
       setPreviewVideo(null);
-      setPreviewImageUri(uri);
+      setPreviewFile((current) => current ?? source);
     },
     [isFocused],
   );
   const closePreview = useCallback(() => {
-    setPreviewImageUri(null);
+    setPreviewFile(null);
     setPreviewVideo(null);
     if (wasExpandedBeforePreviewRef.current) {
       setTimeout(() => {
 @@ -394,7 +394,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
   const onPressVideo = useCallback(
     (attachment: DraftComposerFileAttachment, sourceIdentifier: string) => {
       wasExpandedBeforePreviewRef.current = isFocused;
-      setPreviewImageUri(null);
+      setPreviewFile(null);
       setPreviewVideo((current) => current ?? { type: "local", attachment, sourceIdentifier });
     },
     [isFocused],
 @@ -619,7 +619,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                 <ComposerAttachmentStrip
                   attachments={props.draftAttachments}
                   onRemove={voiceInput.isBusy ? () => undefined : props.onRemoveDraftImage}
-                  onPressImage={voiceInput.isBusy ? undefined : onPressImage}
+                  onPressPreview={voiceInput.isBusy ? undefined : onPressPreview}
                   onPressVideo={voiceInput.isBusy ? undefined : onPressVideo}
                 />
               </Animated.View>
 @@ -673,7 +673,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                     size={30}
                     borderRadius={8}
                     compact
-                    onPressImage={onPressImage}
+                    onPressPreview={onPressPreview}
                     onPressVideo={onPressVideo}
                   />
                 ))}
 @@ -819,14 +819,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
       </Animated.View>
       <VideoPreviewModal source={previewVideo} onRequestClose={closePreview} />
-      <ImageViewing
+      <FilePreviewModal source={previewFile} onRequestClose={closePreview} />
-        images={previewImageUri ? [{ uri: previewImageUri }] : []}
-        imageIndex={0}
-        visible={previewImageUri !== null}
-        onRequestClose={closePreview}
-        swipeToCloseEnabled
-        doubleTapToZoomEnabled
-      />
     </Animated.View>
   );
 });

apps/mobile/src/features/threads/ThreadFeed.tsx+152-79

 @@ -36,6 +36,7 @@ import {
   useMemo,
   useRef,
   useState,
+  useId,
   type ReactNode,
   type RefObject,
 } from "react";
 @@ -62,8 +63,9 @@ import {
   View,
   type ViewStyle,
 } from "react-native";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { FilePreviewModal, type FilePreviewSource } from "../../components/FilePreviewModal";
-import ImageViewing from "react-native-image-viewing";
+import { isPdfFile } from "../../lib/filePreview";
+import { PresentationSource } from "../../components/NativePresentation";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Animated, {
   FadeIn,
 @@ -212,9 +214,11 @@ export interface ThreadFeedProps {
 function MessageAttachmentImage(props: {
   readonly environmentId: EnvironmentId;
   readonly attachmentId: string;
+  readonly name: string;
   readonly className: string;
-  readonly onPressImage: (uri: string, headers?: Record<string, string>) => void;
+  readonly onPressPreview: (source: FilePreviewSource) => void;
 }) {
+  const sourceIdentifier = useId();
   const uri = useAssetUrl(props.environmentId, {
     _tag: "attachment",
     attachmentId: props.attachmentId,
 @@ -229,9 +233,17 @@ function MessageAttachmentImage(props: {
   }
   return (
-    <TouchableOpacity activeOpacity={0.7} onPress={() => props.onPressImage(uri)}>
+    <PresentationSource identifier={sourceIdentifier}>
-      <Image source={{ uri }} className={props.className} resizeMode="cover" />
+      <Pressable
-    </TouchableOpacity>
+        accessibilityRole="imagebutton"
+        accessibilityLabel={`Open ${props.name}`}
+        onPress={() =>
+          props.onPressPreview({ kind: "image", uri, name: props.name, sourceIdentifier })
+        }
+      >
+        <Image source={{ uri }} className={props.className} resizeMode="cover" />
+      </Pressable>
+    </PresentationSource>
   );
 }
 @@ -249,14 +261,21 @@ function isFileAttachment(attachment: ChatAttachment): attachment is ChatFileAtt
 function MessageAttachmentFile(props: {
   readonly environmentId: EnvironmentId;
   readonly attachment: ChatFileAttachment;
+  readonly onPressPreview: (source: FilePreviewSource) => void;
   readonly onPressVideo: (attachment: ChatFileAttachment, sourceIdentifier: string) => void;
 }) {
+  const sourceIdentifier = useId();
   const createAssetUrl = useAtomQueryRunner(assetEnvironment.createUrl, {
     reportFailure: false,
   });
   const preparedConnection = usePreparedConnection(props.environmentId);
   const { attachment } = props;
   const videoType = videoMimeType(attachment);
+  const isPdf = isPdfFile(attachment);
+  const fileTypeLabel = isPdf
+    ? "PDF"
+    : (attachment.name.match(/\.([a-z0-9]{1,8})$/i)?.[1]?.toUpperCase() ?? "File");
+  const sizeLabel = formatAttachmentSize(attachment.sizeBytes);
   const thumbnailUrl = useAssetUrl(
     props.environmentId,
     videoType === null
 @@ -348,26 +367,63 @@ function MessageAttachmentFile(props: {
   }
   return (
-    <Pressable
+    <PresentationSource
-      accessibilityRole="button"
+      identifier={sourceIdentifier}
-      accessibilityLabel={`Open ${attachment.name}`}
+      className="my-1"
-      accessibilityState={{ disabled: opening || httpBaseUrl === null, busy: opening }}
+      style={{ width: 280, maxWidth: "100%" }}
-      disabled={opening || httpBaseUrl === null}
-      className="flex-row items-center gap-2 py-1"
-      onPress={() => shareFile()}
     >
-      {opening ? (
+      <Pressable
-        <ActivityIndicator size="small" />
+        accessibilityRole="button"
-      ) : (
+        accessibilityLabel={`Open ${attachment.name}`}
-        <SymbolView name="doc.text" size={16} tintColor="#a3a3a3" type="monochrome" />
+        accessibilityValue={{ text: `${fileTypeLabel}, ${sizeLabel}` }}
-      )}
+        accessibilityState={{ disabled: opening || httpBaseUrl === null, busy: opening }}
-      <Text className="min-w-0 flex-1 text-sm text-foreground" numberOfLines={1}>
+        disabled={opening || httpBaseUrl === null}
-        {attachment.name}
+        className="min-w-0 flex-row items-center gap-3 rounded-xl border border-border bg-card p-3 active:bg-subtle"
-      </Text>
+        onPress={() =>
-      <Text className="text-xs text-foreground-muted">
+          isPdf
-        {formatAttachmentSize(attachment.sizeBytes)}
+            ? props.onPressPreview({
-      </Text>
+                kind: "pdf",
-    </Pressable>
+                name: attachment.name,
+                environmentId: props.environmentId,
+                resource: {
+                  _tag: "attachment",
+                  attachmentId: attachment.id,
+                  fileName: attachment.name,
+                  mimeType: "application/pdf",
+                },
+                sourceIdentifier,
+              })
+            : shareFile(sourceIdentifier)
+        }
+      >
+        <View className="h-12 w-10 shrink-0 items-center justify-center rounded-lg bg-subtle">
+          {opening ? (
+            <ActivityIndicator size="small" />
+          ) : (
+            <SymbolView
+              name="doc.text"
+              size={26}
+              tintColorClassName={isPdf ? "accent-red-500" : "accent-foreground-muted"}
+              type="monochrome"
+            />
+          )}
+        </View>
+        <View className="min-w-0 flex-1 gap-1">
+          <Text className="font-t3-medium text-sm text-foreground" numberOfLines={2}>
+            {attachment.name}
+          </Text>
+          <Text className="text-xs text-foreground-muted" numberOfLines={1}>
+            {fileTypeLabel} · {sizeLabel}
+          </Text>
+        </View>
+        <SymbolView
+          name="chevron.right"
+          size={12}
+          tintColorClassName="accent-foreground-muted"
+          type="monochrome"
+        />
+      </Pressable>
+    </PresentationSource>
   );
 }
 @@ -391,8 +447,9 @@ function ThreadMarkdownImageView(props: {
   readonly sourceKey: string;
   readonly unavailable: boolean;
   readonly alt: string | null;
-  readonly onPressImage: (uri: string) => void;
+  readonly onPressPreview: (source: FilePreviewSource) => void;
 }) {
+  const sourceIdentifier = useId();
   const [availableWidth, setAvailableWidth] = useState(0);
   const [sourceSize, setSourceSize] = useState<{ width: number; height: number } | null>(null);
   const [failedUri, setFailedUri] = useState<string | null>(null);
 @@ -437,27 +494,35 @@ function ThreadMarkdownImageView(props: {
           )}
         </View>
       ) : (
-        <TouchableOpacity
+        <PresentationSource identifier={sourceIdentifier} style={{ alignSelf: "flex-start" }}>
-          accessibilityRole="imagebutton"
+          <Pressable
-          accessibilityLabel={props.alt ?? "Markdown image"}
+            accessibilityRole="imagebutton"
-          activeOpacity={0.7}
+            accessibilityLabel={props.alt ?? "Markdown image"}
-          onPress={() => props.onPressImage(props.uri!)}
+            onPress={() =>
-          style={{ alignSelf: "flex-start" }}
+              props.onPressPreview({
-        >
+                kind: "image",
-          <View
+                uri: props.uri!,
-            className="items-center justify-center overflow-hidden rounded-[10px] bg-md-code-bg"
+                name: props.alt ?? "Image",
-            style={{
+                sourceIdentifier,
-              ...frameStyle,
+              })
-            }}
+            }
+            style={{ alignSelf: "flex-start" }}
           >
-            <ThreadMarkdownImageRequest
+            <View
-              key={props.uri}
+              className="items-center justify-center overflow-hidden rounded-[10px] bg-md-code-bg"
-              uri={props.uri}
+              style={{
-              onLoad={setSourceSize}
+                ...frameStyle,
-              onError={() => setFailedUri(props.uri)}
+              }}
-            />
+            >
-          </View>
+              <ThreadMarkdownImageRequest
-        </TouchableOpacity>
+                key={props.uri}
+                uri={props.uri}
+                onLoad={setSourceSize}
+                onError={() => setFailedUri(props.uri)}
+              />
+            </View>
+          </Pressable>
+        </PresentationSource>
       )}
       {props.alt ? (
         <Text selectable className="text-xs text-foreground-muted">
 @@ -506,7 +571,7 @@ function ThreadMarkdownImage(props: {
   readonly threadId: ThreadId;
   readonly path: string;
   readonly alt: string | null;
-  readonly onPressImage: (uri: string) => void;
+  readonly onPressPreview: (source: FilePreviewSource) => void;
 }) {
   const assetUrl = useAssetUrlState(props.environmentId, {
     _tag: "workspace-file",
 @@ -520,7 +585,7 @@ function ThreadMarkdownImage(props: {
       sourceKey={props.path}
       unavailable={assetUrl._tag === "Failure"}
       alt={props.alt}
-      onPressImage={props.onPressImage}
+      onPressPreview={props.onPressPreview}
     />
   );
 }
 @@ -532,7 +597,7 @@ function ThreadMarkdownImageUnavailable(props: { readonly alt: string | null })
       sourceKey="unavailable"
       unavailable
       alt={props.alt}
-      onPressImage={() => undefined}
+      onPressPreview={() => undefined}
     />
   );
 }
 @@ -1264,7 +1329,7 @@ function renderFeedEntry(
     readonly onToggleWorkGroup: (groupId: string) => void;
     readonly onToggleWorkRow: (rowId: string) => void;
     readonly onToggleTurnFold: (turnId: TurnId) => void;
-    readonly onPressImage: (uri: string, headers?: Record<string, string>) => void;
+    readonly onPressPreview: (source: FilePreviewSource) => void;
     readonly onPressVideo: (attachment: ChatFileAttachment, sourceIdentifier: string) => void;
     readonly onMarkdownLinkPress: (href: string) => void;
     readonly renderMarkdownImage: MarkdownImageRenderer;
 @@ -1375,14 +1440,16 @@ function renderFeedEntry(
                   key={attachment.id}
                   environmentId={props.environmentId}
                   attachmentId={attachment.id}
+                  name={attachment.name}
                   className="aspect-[1.3] w-full rounded-[14px] bg-white/15"
-                  onPressImage={props.onPressImage}
+                  onPressPreview={props.onPressPreview}
                 />
               ) : isFileAttachment(attachment) ? (
                 <MessageAttachmentFile
                   key={attachment.id}
                   environmentId={props.environmentId}
                   attachment={attachment}
+                  onPressPreview={props.onPressPreview}
                   onPressVideo={props.onPressVideo}
                 />
               ) : (
 @@ -1436,14 +1503,16 @@ function renderFeedEntry(
               key={attachment.id}
               environmentId={props.environmentId}
               attachmentId={attachment.id}
+              name={attachment.name}
               className="mt-1.5 aspect-[1.3] w-full rounded-[18px] bg-adaptive-neutral-200-800"
-              onPressImage={props.onPressImage}
+              onPressPreview={props.onPressPreview}
             />
           ) : isFileAttachment(attachment) ? (
             <MessageAttachmentFile
               key={attachment.id}
               environmentId={props.environmentId}
               attachment={attachment}
+              onPressPreview={props.onPressPreview}
               onPressVideo={props.onPressVideo}
             />
           ) : (
 @@ -1806,13 +1875,11 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
     expandedTurnIds: new Set(),
   });
   const { copiedRowId, expandedWorkGroups, expandedWorkRows, expandedTurnIds } = interactionState;
-  const [expandedImage, setExpandedImage] = useState<{
+  const [expandedFile, setExpandedFile] = useState<FilePreviewSource | null>(null);
-    uri: string;
-    headers?: Record<string, string>;
-  } | null>(null);
   const [expandedVideo, setExpandedVideo] = useState<VideoPreviewSource | null>(null);
   useEffect(() => {
     setExpandedVideo(null);
+    setExpandedFile(null);
   }, [props.environmentId, props.threadId, props.contentPresentation.kind]);
   const horizontalPadding = props.layoutVariant === "split" ? 20 : 16;
   const contentHorizontalPadding = deriveCenteredContentHorizontalPadding({
 @@ -1858,6 +1925,22 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
         );
         if (relativePath) {
           void Haptics.selectionAsync();
+          if (isPdfFile({ name: relativePath })) {
+            setExpandedFile(
+              (current) =>
+                current ?? {
+                  kind: "pdf",
+                  name: relativePath.split("/").at(-1),
+                  environmentId: props.environmentId,
+                  resource: {
+                    _tag: "workspace-file",
+                    threadId: props.threadId,
+                    path: relativePath,
+                  },
+                },
+            );
+            return;
+          }
           navigation.navigate("ThreadFile", {
             environmentId: String(props.environmentId),
             threadId: String(props.threadId),
 @@ -1869,6 +1952,12 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
       }
       if (presentation.href) {
+        if (/^https?:\/\//i.test(presentation.href) && isPdfFile({ name: presentation.href })) {
+          setExpandedFile(
+            (current) => current ?? { kind: "pdf", uri: presentation.href!, name: "Document.pdf" },
+          );
+          return;
+        }
         void tryOpenExternalUrl(presentation.href, "markdown-link");
       }
     },
 @@ -1884,7 +1973,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
             sourceKey={imageSource.uri}
             unavailable={false}
             alt={image.alt}
-            onPressImage={(uri) => setExpandedImage({ uri })}
+            onPressPreview={(source) => setExpandedFile((current) => current ?? source)}
           />
         );
       }
 @@ -1897,7 +1986,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
           threadId={props.threadId}
           path={imageSource.path}
           alt={image.alt}
-          onPressImage={(uri) => setExpandedImage({ uri })}
+          onPressPreview={(source) => setExpandedFile((current) => current ?? source)}
         />
       );
     },
 @@ -2285,8 +2374,8 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
     [suspendEndScrollMaintenanceForDisclosure],
   );
-  const onPressImage = useCallback((uri: string, headers?: Record<string, string>) => {
+  const onPressPreview = useCallback((source: FilePreviewSource) => {
-    setExpandedImage({ uri, headers });
+    setExpandedFile((current) => current ?? source);
   }, []);
   const onPressVideo = useCallback(
     (attachment: ChatFileAttachment, sourceIdentifier: string) => {
 @@ -2350,7 +2439,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
           onToggleWorkGroup,
           onToggleWorkRow,
           onToggleTurnFold,
-          onPressImage,
+          onPressPreview,
           onPressVideo,
           onMarkdownLinkPress,
           renderMarkdownImage,
 @@ -2379,7 +2468,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
       userBubbleMaxWidth,
       onCopyWorkRow,
       onMarkdownLinkPress,
-      onPressImage,
+      onPressPreview,
       onPressVideo,
       onToggleTurnFold,
       onToggleWorkGroup,
 @@ -2565,23 +2654,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
       </View>
       <VideoPreviewModal source={expandedVideo} onRequestClose={() => setExpandedVideo(null)} />
-      <ImageViewing
+      <FilePreviewModal source={expandedFile} onRequestClose={() => setExpandedFile(null)} />
-        images={
-          expandedImage
-            ? [
-                {
-                  uri: expandedImage.uri,
-                  headers: expandedImage.headers,
-                },
-              ]
-            : []
-        }
-        imageIndex={0}
-        visible={expandedImage !== null}
-        onRequestClose={() => setExpandedImage(null)}
-        swipeToCloseEnabled
-        doubleTapToZoomEnabled
-      />
     </>
   );
 });

apps/mobile/src/lib/composerFiles.test.ts+112

...	@@ -1,4 +1,5 @@	...	@@ -1,4 +1,5 @@
1	import { beforeEach, describe, expect, it, vi } from "vite-plus/test";	1	import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
		2	import { PROVIDER_SEND_TURN_MAX_IMAGE_BYTES } from "@t3tools/contracts";
2	import type { ImagePickerAsset } from "expo-image-picker";	3	import type { ImagePickerAsset } from "expo-image-picker";
3		4
4	const mocks = vi.hoisted(() => ({	5	const mocks = vi.hoisted(() => ({
...	@@ -9,6 +10,7 @@ const mocks = vi.hoisted(() => ({	...	@@ -9,6 +10,7 @@ const mocks = vi.hoisted(() => ({
9	delete: vi.fn(),	10	delete: vi.fn(),
10	open: vi.fn(),	11	open: vi.fn(),
11	size: vi.fn(),	12	size: vi.fn(),
		13	readBase64: vi.fn(),
12	}));	14	}));
13		15
14	vi.mock("expo-file-system", () => {	16	vi.mock("expo-file-system", () => {
...	@@ -55,6 +57,10 @@ vi.mock("expo-file-system", () => {	...	@@ -55,6 +57,10 @@ vi.mock("expo-file-system", () => {
55	mocks.copy(this.uri, destination.uri);	57	mocks.copy(this.uri, destination.uri);
56	}	58	}
57		59
		60	async base64(): Promise<string> {
		61	return mocks.readBase64(this.uri);
		62	}
		63
58	delete(): void {	64	delete(): void {
59	mocks.delete(this.uri);	65	mocks.delete(this.uri);
60	}	66	}
...	@@ -95,9 +101,115 @@ describe("composer file attachments", () => {	...	@@ -95,9 +101,115 @@ describe("composer file attachments", () => {
95	mocks.delete.mockReset();	101	mocks.delete.mockReset();
96	mocks.open.mockReset();	102	mocks.open.mockReset();
97	mocks.size.mockReset();	103	mocks.size.mockReset();
		104	mocks.readBase64.mockReset();
98	mocks.size.mockImplementation((uri: string) => (uri.startsWith("content:") ? null : 42));	105	mocks.size.mockImplementation((uri: string) => (uri.startsWith("content:") ? null : 42));
99	});	106	});
100		107
		108	describe("photo library image conversion", () => {
		109	const jpeg = "/9j/2Q==";
		110	const photo: ImagePickerAsset = {
		111	uri: "file:///picker/photo.heic",
		112	type: "image",
		113	fileName: "photo.HEIC",
		114	mimeType: "image/heic",
		115	fileSize: 20 * 1024 * 1024,
		116	base64: jpeg,
		117	width: 1,
		118	height: 1,
		119	};
		120
		121	it.each(["image/heic", "image/heif", undefined])(
		122	"attaches the native JPEG conversion with matching metadata when the source MIME is %s",
		123	async (mimeType) => {
		124	mocks.pickMedia.mockResolvedValue({
		125	canceled: false,
		126	assets: [{ ...photo, mimeType }],
		127	});
		128
		129	const result = await pickComposerImages({ existingCount: 0 });
		130
		131	expect(result).toEqual({
		132	images: [
		133	{
		134	id: "attachment-id",
		135	type: "image",
		136	name: "photo.jpg",
		137	mimeType: "image/jpeg",
		138	sizeBytes: 4,
		139	dataUrl: `data:image/jpeg;base64,${jpeg}`,
		140	previewUri: `data:image/jpeg;base64,${jpeg}`,
		141	},
		142	],
		143	error: null,
		144	});
		145	},
		146	);
		147
		148	it.each([
		149	{ extension: "png", mimeType: "image/png", base64: "iVBORw0KGgo=" },
		150	{ extension: "gif", mimeType: "image/gif", base64: "R0lGODlh" },
		151	{ extension: "webp", mimeType: "image/webp", base64: "UklGRgQAAABXRUJQ" },
		152	])("preserves original $extension bytes instead of the picker's JPEG", async (original) => {
		153	const name = `photo.${original.extension}`;
		154	mocks.pickMedia.mockResolvedValue({
		155	canceled: false,
		156	assets: [{ ...photo, fileName: name, mimeType: original.mimeType }],
		157	});
		158	mocks.readBase64.mockResolvedValue(original.base64);
		159
		160	const result = await pickComposerImages({ existingCount: 0 });
		161
		162	expect(result.error).toBeNull();
		163	expect(result.images).toEqual([
		164	expect.objectContaining({
		165	name,
		166	mimeType: original.mimeType,
		167	dataUrl: `data:${original.mimeType};base64,${original.base64}`,
		168	sizeBytes: Buffer.from(original.base64, "base64").byteLength,
		169	}),
		170	]);
		171	});
		172
		173	it("checks the converted JPEG size even when the HEIC source was smaller", async () => {
		174	const oversized =
		175	jpeg.slice(0, 4) + "A".repeat(Math.ceil(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / 3) * 4);
		176	mocks.pickMedia.mockResolvedValue({
		177	canceled: false,
		178	assets: [{ ...photo, fileSize: 42, base64: oversized }],
		179	});
		180
		181	await expect(pickComposerImages({ existingCount: 0 })).resolves.toEqual({
		182	images: [],
		183	error: "'photo.HEIC' exceeds the 10 MB attachment limit.",
		184	});
		185	});
		186
		187	it("does not relabel unconverted HEIC bytes as JPEG", async () => {
		188	mocks.pickMedia.mockResolvedValue({
		189	canceled: false,
		190	assets: [{ ...photo, base64: "AAAAGGZ0eXBoZWlj" }],
		191	});
		192
		193	const result = await pickComposerImages({ existingCount: 0 });
		194
		195	expect(result.images).toEqual([]);
		196	expect(result.error).toContain("not a supported image type");
		197	});
		198
		199	it("retains a converted photo when another original cannot be read", async () => {
		200	mocks.pickMedia.mockResolvedValue({
		201	canceled: false,
		202	assets: [{ ...photo, fileName: "missing.gif", mimeType: "image/gif" }, photo],
		203	});
		204	mocks.readBase64.mockRejectedValue(new Error("missing file"));
		205
		206	const result = await pickComposerImages({ existingCount: 0 });
		207
		208	expect(result.images).toEqual([expect.objectContaining({ name: "photo.jpg" })]);
		209	expect(result.error).toBe("Failed to read 'missing.gif'.");
		210	});
		211	});
		212
101	describe("photo library videos", () => {	213	describe("photo library videos", () => {
102	const image: ImagePickerAsset = {	214	const image: ImagePickerAsset = {
103	uri: "file:///picker/photo.png",	215	uri: "file:///picker/photo.png",

apps/mobile/src/lib/composerImages.ts+37-11

 @@ -351,7 +351,7 @@ export async function pickComposerMedia(input: {
       error = `You can attach up to ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS} attachments per message.`;
       break;
     }
-    const mimeType = asset.mimeType?.toLowerCase();
+    let mimeType = asset.mimeType?.toLowerCase();
     if (asset.type === "video" || mimeType?.startsWith("video/")) {
       if (input.maxVideoBytes === undefined) {
         error = "Video attachments are unavailable here.";
 @@ -375,35 +375,61 @@ export async function pickComposerMedia(input: {
       }
       continue;
     }
-    if (!mimeType?.startsWith("image/")) {
+    if (asset.type !== "image" && !mimeType?.startsWith("image/")) {
       error = `Unsupported file type for '${asset.fileName ?? "image"}'.`;
       continue;
     }
-    if (!isProviderSendTurnSupportedImageMimeType(mimeType)) {
-      error = `'${asset.fileName ?? "image"}' is not a supported image type. Attach GIF, JPEG, PNG, or WebP images.`;
-      continue;
-    }
-    const base64 = asset.base64;
+    let base64 = asset.base64;
     if (!base64) {
       error = `Failed to read '${asset.fileName ?? "image"}'.`;
       continue;
     }
-    const sizeBytes = asset.fileSize ?? estimateBase64ByteSize(base64);
+    let name = asset.fileName?.trim() || "image";
+    // The iOS picker returns JPEG base64 even when its metadata describes HEIC,
+    // PNG, or GIF. Keep supported originals so transparency and animation survive;
+    // use the native JPEG conversion for formats providers cannot accept.
+    if (base64.startsWith("/9j/")) {
+      if (
+        mimeType &&
+        mimeType !== "image/jpeg" &&
+        isProviderSendTurnSupportedImageMimeType(mimeType)
+      ) {
+        try {
+          const { File } = await import("expo-file-system");
+          base64 = await new File(asset.uri).base64();
+        } catch {
+          error = `Failed to read '${name}'.`;
+          continue;
+        }
+      } else {
+        mimeType = "image/jpeg";
+        if (!/\.jpe?g$/i.test(name)) {
+          name = `${name.replace(/\.[^.]+$/, "")}.jpg`;
+        }
+      }
+    }
+    if (!mimeType || !isProviderSendTurnSupportedImageMimeType(mimeType)) {
+      error = `'${name}' is not a supported image type. Attach GIF, JPEG, PNG, or WebP images.`;
+      continue;
+    }
+    const sizeBytes = estimateBase64ByteSize(base64);
     if (sizeBytes <= 0 || sizeBytes > PROVIDER_SEND_TURN_MAX_IMAGE_BYTES) {
       error = `'${asset.fileName ?? "image"}' exceeds the 10 MB attachment limit.`;
       continue;
     }
+    const dataUrl = `data:${mimeType};base64,${base64}`;
     attachments.push({
       id: uuidv4(),
       type: "image",
-      name: asset.fileName ?? "image",
+      name,
       mimeType,
       sizeBytes,
-      dataUrl: `data:${mimeType};base64,${base64}`,
+      dataUrl,
-      previewUri: asset.uri,
+      previewUri: mimeType === asset.mimeType?.toLowerCase() ? asset.uri : dataUrl,
     });
   }

apps/mobile/src/lib/filePreview.test.ts created+17

...	@@ -0,0 +1,17 @@
1	import { describe, expect, it } from "vite-plus/test";
2
3	import { isPdfFile } from "./filePreview";
4
5	describe("PDF preview detection", () => {
6	it.each([
7	[{ name: "download", mimeType: "application/pdf" }, true],
8	[{ name: "download", mimeType: "APPLICATION/PDF; charset=binary" }, true],
9	[{ name: "Report.PDF", mimeType: "application/octet-stream" }, true],
10	[{ name: "https://example.com/report.pdf?signature=abc#page=2" }, true],
11	[{ name: "report.pdf", mimeType: "text/plain" }, false],
12	[{ name: "report.pdf.exe" }, false],
13	[{ name: "https://example.com/page?download=report.pdf" }, false],
14	])("classifies %j as %s", (file, expected) => {
15	expect(isPdfFile(file)).toBe(expected);
16	});
17	});

apps/mobile/src/lib/filePreview.ts created+6

...	@@ -0,0 +1,6 @@
1	/** MIME metadata wins; use the extension for files reported without a specific type. */
2	export function isPdfFile(file: { readonly name: string; readonly mimeType?: string }): boolean {
3	const mimeType = file.mimeType?.split(";", 1)[0]?.trim().toLowerCase();
4	if (mimeType && mimeType !== "application/octet-stream") return mimeType === "application/pdf";
5	return /\.pdf$/i.test(file.name.split(/[?#]/, 1)[0] ?? "");
6	}

apps/mobile/src/lib/localAttachmentPreview.test.ts created+127

...	@@ -0,0 +1,127 @@
1	import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
2
3	const mocks = vi.hoisted(() => ({
4	retain: vi.fn(),
5	share: vi.fn(),
6	exists: vi.fn(),
7	}));
8
9	vi.mock("../state/use-composer-drafts", () => ({
10	retainComposerAttachmentFileForPreview: mocks.retain,
11	}));
12	vi.mock("./attachmentDownload", () => ({ shareLocalAttachment: mocks.share }));
13	vi.mock("expo-file-system", () => ({
14	File: class {
15	constructor(readonly uri: string) {}
16	get exists(): boolean {
17	return mocks.exists(this.uri);
18	}
19	},
20	Paths: {
21	document: {
22	uri: "file:///var/mobile/Containers/Data/Application/22222222-2222-4222-8222-222222222222/Documents/",
23	},
24	},
25	}));
26
27	import { loadLocalAttachmentPreview } from "./localAttachmentPreview";
28
29	const attachment = {
30	type: "file" as const,
31	id: "draft-video",
32	name: "clip.mov",
33	mimeType: "video/quicktime",
34	sizeBytes: 12,
35	fileUri:
36	"file:///var/mobile/Containers/Data/Application/11111111-1111-4111-8111-111111111111/Documents/t3-composer-attachments/33333333-3333-4333-8333-333333333333-clip.mov",
37	};
38
39	beforeEach(() => {
40	mocks.retain.mockReset();
41	mocks.share.mockReset();
42	mocks.exists.mockReset();
43	mocks.retain.mockImplementation(() => vi.fn());
44	mocks.exists.mockReturnValue(true);
45	mocks.share.mockResolvedValue(undefined);
46	});
47
48	describe("loadLocalAttachmentPreview", () => {
49	it("retains and shares a PDF with its original filename and type", async () => {
50	const pdf = { ...attachment, name: "report.pdf", mimeType: "application/pdf" };
51	const preview = await loadLocalAttachmentPreview(pdf, new AbortController().signal);
52	await preview!.share(new AbortController().signal);
53	expect(mocks.share).toHaveBeenCalledWith(
54	expect.objectContaining({
55	attachment: { name: "report.pdf", mimeType: "application/pdf" },
56	}),
57	);
58	expect(mocks.retain.mock.results[0]!.value).not.toHaveBeenCalled();
59	preview!.dispose();
60	expect(mocks.retain.mock.results[0]!.value).toHaveBeenCalledTimes(1);
61	});
62	it("resolves the current iOS container and releases its playback lease once", async () => {
63	const preview = await loadLocalAttachmentPreview(attachment, new AbortController().signal);
64	expect(preview?.uri).toContain("/22222222-2222-4222-8222-222222222222/Documents/");
65	expect(mocks.retain).toHaveBeenCalledWith(attachment);
66	const release = mocks.retain.mock.results[0]!.value;
67	expect(release).not.toHaveBeenCalled();
68	preview?.dispose();
69	preview?.dispose();
70	expect(release).toHaveBeenCalledTimes(1);
71	});
72
73	it.each([undefined, "share-button"])(
74	"keeps a separate share lease after playback closes (source: %s)",
75	async (sourceIdentifier) => {
76	const shared = Promise.withResolvers<void>();
77	mocks.share.mockReturnValue(shared.promise);
78	const preview = await loadLocalAttachmentPreview(attachment, new AbortController().signal);
79	const share = preview!.share(new AbortController().signal, sourceIdentifier);
80	expect(mocks.retain).toHaveBeenCalledTimes(2);
81	const releasePlayback = mocks.retain.mock.results[0]!.value;
82	const releaseShare = mocks.retain.mock.results[1]!.value;
83	preview!.dispose();
84	expect(releasePlayback).toHaveBeenCalledTimes(1);
85	expect(releaseShare).not.toHaveBeenCalled();
86	shared.resolve();
87	await share;
88	expect(releaseShare).toHaveBeenCalledTimes(1);
89	},
90	);
91
92	it("releases a failed share while keeping playback retained", async () => {
93	mocks.share.mockRejectedValue(new Error("Sharing unavailable"));
94	const preview = await loadLocalAttachmentPreview(attachment, new AbortController().signal);
95	await expect(preview!.share(new AbortController().signal)).rejects.toThrow(
96	"Sharing unavailable",
97	);
98	expect(mocks.retain.mock.results[1]!.value).toHaveBeenCalledTimes(1);
99	expect(mocks.retain.mock.results[0]!.value).not.toHaveBeenCalled();
100	preview!.dispose();
101	});
102
103	it("releases a load canceled during native module loading", async () => {
104	const controller = new AbortController();
105	const loading = loadLocalAttachmentPreview(attachment, controller.signal);
106	controller.abort();
107	await expect(loading).resolves.toBeNull();
108	expect(mocks.retain.mock.results[0]!.value).toHaveBeenCalledTimes(1);
109	expect(mocks.exists).not.toHaveBeenCalled();
110	});
111
112	it("reports missing files and releases their lease", async () => {
113	mocks.exists.mockReturnValue(false);
114	await expect(
115	loadLocalAttachmentPreview(attachment, new AbortController().signal),
116	).rejects.toThrow("This attachment is no longer available. Attach the file again.");
117	expect(mocks.retain.mock.results[0]!.value).toHaveBeenCalledTimes(1);
118	});
119
120	it("does not start sharing a disposed preview", async () => {
121	const preview = await loadLocalAttachmentPreview(attachment, new AbortController().signal);
122	preview!.dispose();
123	await preview!.share(new AbortController().signal);
124	expect(mocks.share).not.toHaveBeenCalled();
125	expect(mocks.retain).toHaveBeenCalledTimes(1);
126	});
127	});

apps/mobile/src/lib/localAttachmentPreview.ts created+59

...	@@ -0,0 +1,59 @@
1	import { videoMimeType } from "@t3tools/shared/video";
2
3	import type { DraftComposerFileAttachment } from "./composerImages";
4	import { resolveOwnedComposerAttachmentFileUri } from "./composerAttachmentFiles";
5	import { shareLocalAttachment, type AttachmentPreviewFile } from "./attachmentDownload";
6	import { retainComposerAttachmentFileForPreview } from "../state/use-composer-drafts";
7
8	/** Retains the draft original for preview and gives each outgoing share its own lease. */
9	export async function loadLocalAttachmentPreview(
10	attachment: DraftComposerFileAttachment,
11	signal: AbortSignal,
12	): Promise<AttachmentPreviewFile \| null> {
13	if (signal.aborted) return null;
14	const release = retainComposerAttachmentFileForPreview(attachment);
15	try {
16	const { File, Paths } = await import("expo-file-system");
17	if (signal.aborted) {
18	release();
19	return null;
20	}
21	const uri =
22	resolveOwnedComposerAttachmentFileUri(attachment.fileUri, Paths.document.uri) ??
23	attachment.fileUri;
24	const file = new File(uri);
25	if (!file.exists) {
26	throw new Error("The local attachment file is missing.");
27	}
28	let disposed = false;
29	return {
30	uri: file.uri,
31	dispose: () => {
32	if (disposed) return;
33	disposed = true;
34	release();
35	},
36	share: async (shareSignal, sourceIdentifier) => {
37	if (disposed \|\| shareSignal.aborted) return;
38	const releaseShare = retainComposerAttachmentFileForPreview(attachment);
39	try {
40	await shareLocalAttachment({
41	uri: file.uri,
42	attachment: {
43	name: attachment.name,
44	mimeType: videoMimeType(attachment) ?? attachment.mimeType,
45	},
46	signal: shareSignal,
47	sourceIdentifier,
48	});
49	} finally {
50	releaseShare();
51	}
52	},
53	};
54	} catch (cause) {
55	release();
56	if (signal.aborted) return null;
57	throw new Error("This attachment is no longer available. Attach the file again.", { cause });
58	}
59	}

apps/mobile/src/lib/localVideoPreview.test.ts deleted-114

...	@@ -1,114 +0,0 @@
1	import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
2
3	const mocks = vi.hoisted(() => ({
4	retain: vi.fn(),
5	share: vi.fn(),
6	exists: vi.fn(),
7	}));
8
9	vi.mock("../state/use-composer-drafts", () => ({
10	retainComposerAttachmentFileForPreview: mocks.retain,
11	}));
12	vi.mock("./attachmentDownload", () => ({ shareLocalAttachment: mocks.share }));
13	vi.mock("expo-file-system", () => ({
14	File: class {
15	constructor(readonly uri: string) {}
16	get exists(): boolean {
17	return mocks.exists(this.uri);
18	}
19	},
20	Paths: {
21	document: {
22	uri: "file:///var/mobile/Containers/Data/Application/22222222-2222-4222-8222-222222222222/Documents/",
23	},
24	},
25	}));
26
27	import { loadLocalVideoPreview } from "./localVideoPreview";
28
29	const attachment = {
30	type: "file" as const,
31	id: "draft-video",
32	name: "clip.mov",
33	mimeType: "video/quicktime",
34	sizeBytes: 12,
35	fileUri:
36	"file:///var/mobile/Containers/Data/Application/11111111-1111-4111-8111-111111111111/Documents/t3-composer-attachments/33333333-3333-4333-8333-333333333333-clip.mov",
37	};
38
39	beforeEach(() => {
40	mocks.retain.mockReset();
41	mocks.share.mockReset();
42	mocks.exists.mockReset();
43	mocks.retain.mockImplementation(() => vi.fn());
44	mocks.exists.mockReturnValue(true);
45	mocks.share.mockResolvedValue(undefined);
46	});
47
48	describe("loadLocalVideoPreview", () => {
49	it("resolves the current iOS container and releases its playback lease once", async () => {
50	const preview = await loadLocalVideoPreview(attachment, new AbortController().signal);
51	expect(preview?.uri).toContain("/22222222-2222-4222-8222-222222222222/Documents/");
52	expect(mocks.retain).toHaveBeenCalledWith(attachment);
53	const release = mocks.retain.mock.results[0]!.value;
54	expect(release).not.toHaveBeenCalled();
55	preview?.dispose();
56	preview?.dispose();
57	expect(release).toHaveBeenCalledTimes(1);
58	});
59
60	it.each([undefined, "share-button"])(
61	"keeps a separate share lease after playback closes (source: %s)",
62	async (sourceIdentifier) => {
63	const shared = Promise.withResolvers<void>();
64	mocks.share.mockReturnValue(shared.promise);
65	const preview = await loadLocalVideoPreview(attachment, new AbortController().signal);
66	const share = preview!.share(new AbortController().signal, sourceIdentifier);
67	expect(mocks.retain).toHaveBeenCalledTimes(2);
68	const releasePlayback = mocks.retain.mock.results[0]!.value;
69	const releaseShare = mocks.retain.mock.results[1]!.value;
70	preview!.dispose();
71	expect(releasePlayback).toHaveBeenCalledTimes(1);
72	expect(releaseShare).not.toHaveBeenCalled();
73	shared.resolve();
74	await share;
75	expect(releaseShare).toHaveBeenCalledTimes(1);
76	},
77	);
78
79	it("releases a failed share while keeping playback retained", async () => {
80	mocks.share.mockRejectedValue(new Error("Sharing unavailable"));
81	const preview = await loadLocalVideoPreview(attachment, new AbortController().signal);
82	await expect(preview!.share(new AbortController().signal)).rejects.toThrow(
83	"Sharing unavailable",
84	);
85	expect(mocks.retain.mock.results[1]!.value).toHaveBeenCalledTimes(1);
86	expect(mocks.retain.mock.results[0]!.value).not.toHaveBeenCalled();
87	preview!.dispose();
88	});
89
90	it("releases a load canceled during native module loading", async () => {
91	const controller = new AbortController();
92	const loading = loadLocalVideoPreview(attachment, controller.signal);
93	controller.abort();
94	await expect(loading).resolves.toBeNull();
95	expect(mocks.retain.mock.results[0]!.value).toHaveBeenCalledTimes(1);
96	expect(mocks.exists).not.toHaveBeenCalled();
97	});
98
99	it("reports missing files and releases their lease", async () => {
100	mocks.exists.mockReturnValue(false);
101	await expect(loadLocalVideoPreview(attachment, new AbortController().signal)).rejects.toThrow(
102	"This video is no longer available. Attach the file again.",
103	);
104	expect(mocks.retain.mock.results[0]!.value).toHaveBeenCalledTimes(1);
105	});
106
107	it("does not start sharing a disposed preview", async () => {
108	const preview = await loadLocalVideoPreview(attachment, new AbortController().signal);
109	preview!.dispose();
110	await preview!.share(new AbortController().signal);
111	expect(mocks.share).not.toHaveBeenCalled();
112	expect(mocks.retain).toHaveBeenCalledTimes(1);
113	});
114	});

apps/mobile/src/lib/localVideoPreview.ts deleted-59

...	@@ -1,59 +0,0 @@
1	import { videoMimeType } from "@t3tools/shared/video";
2
3	import type { DraftComposerFileAttachment } from "./composerImages";
4	import { resolveOwnedComposerAttachmentFileUri } from "./composerAttachmentFiles";
5	import { shareLocalAttachment, type AttachmentPreviewFile } from "./attachmentDownload";
6	import { retainComposerAttachmentFileForPreview } from "../state/use-composer-drafts";
7
8	/** Retains the draft original for playback and gives each outgoing share its own lease. */
9	export async function loadLocalVideoPreview(
10	attachment: DraftComposerFileAttachment,
11	signal: AbortSignal,
12	): Promise<AttachmentPreviewFile \| null> {
13	if (signal.aborted) return null;
14	const release = retainComposerAttachmentFileForPreview(attachment);
15	try {
16	const { File, Paths } = await import("expo-file-system");
17	if (signal.aborted) {
18	release();
19	return null;
20	}
21	const uri =
22	resolveOwnedComposerAttachmentFileUri(attachment.fileUri, Paths.document.uri) ??
23	attachment.fileUri;
24	const file = new File(uri);
25	if (!file.exists) {
26	throw new Error("The local attachment file is missing.");
27	}
28	let disposed = false;
29	return {
30	uri: file.uri,
31	dispose: () => {
32	if (disposed) return;
33	disposed = true;
34	release();
35	},
36	share: async (shareSignal, sourceIdentifier) => {
37	if (disposed \|\| shareSignal.aborted) return;
38	const releaseShare = retainComposerAttachmentFileForPreview(attachment);
39	try {
40	await shareLocalAttachment({
41	uri: file.uri,
42	attachment: {
43	name: attachment.name,
44	mimeType: videoMimeType(attachment) ?? attachment.mimeType,
45	},
46	signal: shareSignal,
47	sourceIdentifier,
48	});
49	} finally {
50	releaseShare();
51	}
52	},
53	};
54	} catch (cause) {
55	release();
56	if (signal.aborted) return null;
57	throw new Error("This video is no longer available. Attach the file again.", { cause });
58	}
59	}

docs/internals/mobile-navigation.md+22-5

...	@@ -51,13 +51,12 @@ use a separate implementation and do not need this workaround.	...	@@ -51,13 +51,12 @@ use a separate implementation and do not need this workaround.
51		51
52	## Native media presentations	52	## Native media presentations
53		53
54	`PresentationSource` in `NativePresentation` registers a thumbnail for AVKit's	54	`PresentationSource` in `NativePresentation` registers a thumbnail for AVKit,
55	full-screen entry and UIKit's share sheet. Wrap the thumbnail as its single child	55	image zoom transitions, and UIKit's share sheet. Wrap the thumbnail as its single child
56	and pass the stable identifier to the presentation. The registry keeps weak	56	and pass the stable identifier to the presentation. The registry keeps weak
57	references to source views; recycled or compact composer thumbnails can register	57	references to source views; recycled or compact composer thumbnails can register
58	the same identifier. Identifiers must distinguish simultaneously visible attachments.	58	the same identifier. Identifiers must distinguish simultaneously visible attachments.
59	This source registration does not own playback and can be reused by a future image	59	The source registration does not own the preview. Android uses a regular view.
60	viewer. Android uses a regular view.
61		60
62	On iOS, video previews mount `AVPlayerViewController` temporarily inside the	61	On iOS, video previews mount `AVPlayerViewController` temporarily inside the
63	registered source and enter full screen through AVKit. AVKit	62	registered source and enter full screen through AVKit. AVKit
...	@@ -67,7 +66,25 @@ simulator, that leaves native Close unable to exit full screen. When the source	...	@@ -67,7 +66,25 @@ simulator, that leaves native Close unable to exit full screen. When the source
67	the player uses a standard modal presentation. Programmatic entry uses the same	66	the player uses a standard modal presentation. Programmatic entry uses the same
68	guarded `enterFullScreenAnimated:completionHandler:` selector as Expo Video;	67	guarded `enterFullScreenAnimated:completionHandler:` selector as Expo Video;
69	if that selector is unavailable, the player also falls back to a standard modal.	68	if that selector is unavailable, the player also falls back to a standard modal.
70	Images retain their existing viewer.	69
		70	`FilePreviewModal` resolves image and PDF sources from a URI, a signed environment asset,
		71	or a retained composer file. On iOS, Quick Look owns image and document layout, controls,
		72	zooming, sharing, and interactive dismissal. Its delegate supplies the registered thumbnail
		73	and its bounds for Quick Look's source-view zoom. Do not layer `preferredTransition` or
		74	another image scroll view over that presentation: Quick Look coordinates its image gestures
		75	with the return to the thumbnail. Missing sources use the standard transition, and Reduce
		76	Motion disables animation. A pending programmatic Close waits until the current presentation
		77	or cancelled dismissal has settled before starting another transition.
		78
		79	The shared native presenter copies original bytes into its own temporary directory and
		80	removes that copy after dismissal. Network downloads write to disk, and sharing never edits
		81	the source attachment. Draft images use their stored upload data rather than a potentially
		82	expired picker URI. No React Navigation route or custom transition animator is needed.
		83
		84	The same viewer handles message images, markdown images, PDF attachments and links,
		85	composer thumbnails, and workspace image previews. The workspace PDF web preview has an
		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.
71		88
72	Received videos open directly from their signed asset URL. AVKit handles buffering;	89	Received videos open directly from their signed asset URL. AVKit handles buffering;
73	the client does not download the entire file or show a separate opening overlay before	90	the client does not download the entire file or show a separate opening overlay before

docs/user/composer.md+9-2

author	Julius Marminge <julius0216@outlook.com> 2026-08-31 16:23:40-07:00
committer	GitHub <noreply@github.com> 2026-08-31 16:23:40-07:00
log	f8e4accf27415eb9f7f4106087d2a1b0186d66b9
tree	92640b02ed6da9e78071cc50e0e1b4a75968a84e
parent	6d15c5bbc3f3c331a7466bb94c17413a35f7b659
signature	Signed by PGP key B5690EEEBB952194

...	@@ -4,7 +4,7 @@ import { requireNativeModule } from "expo";	...	@@ -4,7 +4,7 @@ import { requireNativeModule } from "expo";
4	import { useEffect, useEffectEvent, useId, useState } from "react";	4	import { useEffect, useEffectEvent, useId, useState } from "react";
5	import { Alert, Keyboard } from "react-native";	5	import { Alert, Keyboard } from "react-native";
6		6
7	import { loadLocalVideoPreview } from "../lib/localVideoPreview";	7	import { loadLocalAttachmentPreview } from "../lib/localAttachmentPreview";
8	import { useAssetUrlState } from "../state/assets";	8	import { useAssetUrlState } from "../state/assets";
9	import { usePreparedConnection } from "../state/session";	9	import { usePreparedConnection } from "../state/session";
10	import type { VideoPreviewSource } from "./VideoPreviewModal";	10	import type { VideoPreviewSource } from "./VideoPreviewModal";
...	@@ -67,7 +67,7 @@ function NativeVideoPreview(props: {	...	@@ -67,7 +67,7 @@ function NativeVideoPreview(props: {
67	void (async () => {	67	void (async () => {
68	const file =	68	const file =
69	source.type === "local"	69	source.type === "local"
70	? await loadLocalVideoPreview(source.attachment, controller.signal)	70	? await loadLocalAttachmentPreview(source.attachment, controller.signal)
71	: null;	71	: null;
72	if (source.type === "local" && !file) return;	72	if (source.type === "local" && !file) return;
73	try {	73	try {

...	@@ -20,7 +20,13 @@ file uploads, + opens a menu beside the button with Photo Library and **	...	@@ -20,7 +20,13 @@ file uploads, + opens a menu beside the button with Photo Library and **
20	Videos use the server's file upload limit. You can also share photos, videos, and files into	20	Videos use the server's file upload limit. You can also share photos, videos, and files into
21	T3 Code from other apps through the system share sheet. Mobile uploads happen when the message	21	T3 Code from other apps through the system share sheet. Mobile uploads happen when the message
22	sends, so queued messages keep their files until they deliver. Select a received file on mobile	22	sends, so queued messages keep their files until they deliver. Select a received file on mobile
23	to save it or open it in another app through the system share sheet.	23	to preview it or open the system share options.
		24
		25	Tap an image or PDF before or after sending to open it. On iOS, images zoom from their thumbnail
		26	into the native viewer. Pinch or double-tap to zoom, and swipe down or tap Close to return.
		27	Use Share to save a copy or send it to another app. PDFs support page navigation and search.
		28	PDF links in assistant responses open the same preview. On Android, images open in the image
		29	viewer and PDFs open the system chooser.
24		30
25	Select a video attachment before or after sending to play it. Web and desktop use the browser's	31	Select a video attachment before or after sending to play it. Web and desktop use the browser's
26	built-in controls. On mobile, videos open in a full-screen player with native playback controls.	32	built-in controls. On mobile, videos open in a full-screen player with native playback controls.
...	@@ -36,7 +42,8 @@ On web and desktop, if you reload before a file finishes uploading, the draft ke	...	@@ -36,7 +42,8 @@ On web and desktop, if you reload before a file finishes uploading, the draft ke
36	and shows Attach again next to it. Attach the file again or remove it, then send.	42	and shows Attach again next to it. Attach the file again or remove it, then send.
37		43
38	On web and desktop, HEIC and HEIF photos are automatically converted to JPEG when you drag them into	44	On web and desktop, HEIC and HEIF photos are automatically converted to JPEG when you drag them into
39	the composer or paste them into a message.	45	the composer or paste them into a message. On iOS, selecting them from Photo Library also
		46	converts them to JPEG. The 10 MB image limit applies to the converted photo.
40		47
41	On mobile, the model picker shows each OpenCode model's upstream provider, such as Anthropic,	48	On mobile, the model picker shows each OpenCode model's upstream provider, such as Anthropic,
42	GitHub Copilot, or OpenCode Zen, beneath its name. Search by that provider name to narrow the list	49	GitHub Copilot, or OpenCode Zen, beneath its name. Search by that provider name to narrow the list

feat(mobile): add native image and PDF previews (#8959)