Commit e3dcc1615c9167048ecfe536f87ad1d353fa8a49 | the-knife

apps/mobile/app.config.ts+1

...	@@ -148,6 +148,7 @@ const sharingPlugin: NonNullable<ExpoConfig["plugins"]>[number] = [	...	@@ -148,6 +148,7 @@ const sharingPlugin: NonNullable<ExpoConfig["plugins"]>[number] = [
148	supportsText: true,	148	supportsText: true,
149	supportsWebUrlWithMaxCount: 1,	149	supportsWebUrlWithMaxCount: 1,
150	supportsImageWithMaxCount: 8,	150	supportsImageWithMaxCount: 8,
		151	supportsMovieWithMaxCount: 8,
151	supportsFileWithMaxCount: 8,	152	supportsFileWithMaxCount: 8,
152	},	153	},
153	},	154	},

apps/mobile/src/components/AppSymbol.tsx+2

...	@@ -59,6 +59,7 @@ import IconMinus from "@tabler/icons-react-native/IconMinus";	...	@@ -59,6 +59,7 @@ import IconMinus from "@tabler/icons-react-native/IconMinus";
59	import IconMoon from "@tabler/icons-react-native/IconMoon";	59	import IconMoon from "@tabler/icons-react-native/IconMoon";
60	import IconNetwork from "@tabler/icons-react-native/IconNetwork";	60	import IconNetwork from "@tabler/icons-react-native/IconNetwork";
61	import IconPalette from "@tabler/icons-react-native/IconPalette";	61	import IconPalette from "@tabler/icons-react-native/IconPalette";
		62	import IconPhoto from "@tabler/icons-react-native/IconPhoto";
62	import IconPin from "@tabler/icons-react-native/IconPin";	63	import IconPin from "@tabler/icons-react-native/IconPin";
63	import IconPinnedOff from "@tabler/icons-react-native/IconPinnedOff";	64	import IconPinnedOff from "@tabler/icons-react-native/IconPinnedOff";
64	import IconPlayerPlay from "@tabler/icons-react-native/IconPlayerPlay";	65	import IconPlayerPlay from "@tabler/icons-react-native/IconPlayerPlay";
...	@@ -133,6 +134,7 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {	...	@@ -133,6 +134,7 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {
133	magnifyingglass: IconSearch,	134	magnifyingglass: IconSearch,
134	paintbrush: IconPalette,	135	paintbrush: IconPalette,
135	"person.crop.circle": IconUserCircle,	136	"person.crop.circle": IconUserCircle,
		137	photo: IconPhoto,
136	pin: IconPin,	138	pin: IconPin,
137	"pin.slash": IconPinnedOff,	139	"pin.slash": IconPinnedOff,
138	play: IconPlayerPlay,	140	play: IconPlayerPlay,

apps/mobile/src/components/ComposerAttachmentButton.tsx created+55

...	@@ -0,0 +1,55 @@
1	import type { MenuAction } from "@react-native-menu/menu";
2	import { Pressable } from "react-native";
3
4	import { SymbolView } from "./AppSymbol";
5	import { ControlPillMenu } from "./ControlPill";
6
7	const ATTACHMENT_MENU_ACTIONS: MenuAction[] = [
8	{ id: "photos", title: "Photo Library", image: "photo" },
9	{ id: "files", title: "Choose Files", image: "folder" },
10	];
11
12	export function ComposerAttachmentButton(props: {
13	readonly disabled?: boolean;
14	readonly supportsFiles: boolean;
15	readonly onPickMedia: () => Promise<void>;
16	readonly onPickFiles: () => Promise<void>;
17	}) {
18	const button = (
19	<Pressable
20	accessibilityLabel="Add attachment"
21	accessibilityRole="button"
22	accessibilityState={{ disabled: props.disabled }}
23	className="size-[44px] shrink-0 items-center justify-center rounded-full active:opacity-70 disabled:opacity-50"
24	disabled={props.disabled}
25	onPress={props.supportsFiles ? undefined : () => void props.onPickMedia()}
26	>
27	<SymbolView
28	name="plus"
29	size={20}
30	weight="regular"
31	tintColorClassName="accent-icon"
32	type="monochrome"
33	/>
34	</Pressable>
35	);
36
37	if (props.disabled \|\| !props.supportsFiles) {
38	return button;
39	}
40
41	return (
42	<ControlPillMenu
43	actions={ATTACHMENT_MENU_ACTIONS}
44	onPressAction={({ nativeEvent }) => {
45	if (nativeEvent.event === "photos") {
46	void props.onPickMedia();
47	} else if (nativeEvent.event === "files") {
48	void props.onPickFiles();
49	}
50	}}
51	>
52	{button}
53	</ControlPillMenu>
54	);
55	}

apps/mobile/src/components/ComposerToolbar.tsx+43

...	@@ -113,6 +113,7 @@ export function ComposerToolbarRow(props: {	...	@@ -113,6 +113,7 @@ export function ComposerToolbarRow(props: {
113		113
114	export function ComposerToolbarScroller(props: {	114	export function ComposerToolbarScroller(props: {
115	readonly children: ReactNode;	115	readonly children: ReactNode;
		116	readonly align?: "start" \| "end";
116	/** Only for non-Uniwind surfaces such as the native terminal palette. */	117	/** Only for non-Uniwind surfaces such as the native terminal palette. */
117	readonly fadeOpaque?: string;	118	readonly fadeOpaque?: string;
118	/** Only for non-Uniwind surfaces such as the native terminal palette. */	119	/** Only for non-Uniwind surfaces such as the native terminal palette. */
...	@@ -167,6 +168,8 @@ export function ComposerToolbarScroller(props: {	...	@@ -167,6 +168,8 @@ export function ComposerToolbarScroller(props: {
167	showsHorizontalScrollIndicator={false}	168	showsHorizontalScrollIndicator={false}
168	contentContainerStyle={{	169	contentContainerStyle={{
169	alignItems: "center",	170	alignItems: "center",
		171	flexGrow: props.align === "end" ? 1 : undefined,
		172	justifyContent: props.align === "end" ? "flex-end" : undefined,
170	gap: COMPOSER_TOOLBAR_GAP,	173	gap: COMPOSER_TOOLBAR_GAP,
171	paddingLeft: 0,	174	paddingLeft: 0,
172	paddingRight: props.contentPaddingRight ?? 1,	175	paddingRight: props.contentPaddingRight ?? 1,
...	@@ -214,6 +217,46 @@ export function ComposerToolbarScroller(props: {	...	@@ -214,6 +217,46 @@ export function ComposerToolbarScroller(props: {
214	);	217	);
215	}	218	}
216		219
		220	export function ComposerActionButton(props: {
		221	readonly accessibilityLabel: string;
		222	readonly disabled?: boolean;
		223	readonly icon: ComponentProps<typeof SymbolView>["name"];
		224	readonly onPress: () => void;
		225	readonly variant?: "primary" \| "danger";
		226	}) {
		227	return (
		228	<Pressable
		229	accessibilityLabel={props.accessibilityLabel}
		230	accessibilityRole="button"
		231	accessibilityState={{ disabled: props.disabled }}
		232	className="size-[44px] shrink-0 items-center justify-center active:opacity-70"
		233	disabled={props.disabled}
		234	onPress={props.onPress}
		235	>
		236	<View
		237	className={cn(
		238	"size-[30px] items-center justify-center rounded-full",
		239	props.variant === "danger"
		240	? "bg-danger"
		241	: props.disabled
		242	? "bg-primary/15"
		243	: "bg-primary",
		244	)}
		245	>
		246	<SymbolView
		247	name={props.icon}
		248	size={16}
		249	weight="semibold"
		250	tintColorClassName={
		251	props.variant === "danger" ? "accent-danger-foreground" : "accent-primary-foreground"
		252	}
		253	type="monochrome"
		254	/>
		255	</View>
		256	</Pressable>
		257	);
		258	}
		259
217	export function ComposerToolbarButton(props: {	260	export function ComposerToolbarButton(props: {
218	readonly icon?: ComponentProps<typeof SymbolView>["name"];	261	readonly icon?: ComponentProps<typeof SymbolView>["name"];
219	readonly iconNode?: ReactNode;	262	readonly iconNode?: ReactNode;

apps/mobile/src/components/ControlPill.tsx+30-3

...	@@ -6,16 +6,38 @@ import {	...	@@ -6,16 +6,38 @@ import {
6	type ComponentProps,	6	type ComponentProps,
7	type ReactElement,	7	type ReactElement,
8	type ReactNode,	8	type ReactNode,
		9	useMemo,
9	useRef,	10	useRef,
10	} from "react";	11	} from "react";
11	import { Platform, Pressable, View, type PressableProps } from "react-native";	12	import { Platform, Pressable, View, type ColorValue, type PressableProps } from "react-native";
		13	import { withUniwind } from "uniwind";
12	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";	14	import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
13		15
14	import { cn } from "../lib/cn";	16	import { cn } from "../lib/cn";
		17	import { withMenuActionIconColors } from "../lib/menu-action-colors";
15	import { AndroidAnchoredMenu } from "./AndroidAnchoredMenu";	18	import { AndroidAnchoredMenu } from "./AndroidAnchoredMenu";
16	import { SymbolView } from "./AppSymbol";	19	import { SymbolView } from "./AppSymbol";
17	import { AppText as Text } from "./AppText";	20	import { AppText as Text } from "./AppText";
18		21
		22	const ThemedMenuView = withUniwind(function NativeMenuView({
		23	iconColor,
		24	destructiveIconColor,
		25	...props
		26	}: ComponentProps<typeof MenuView> & {
		27	readonly iconColor?: ColorValue;
		28	readonly destructiveIconColor?: ColorValue;
		29	}) {
		30	const actions = useMemo(
		31	() =>
		32	withMenuActionIconColors(props.actions, {
		33	icon: iconColor,
		34	destructiveIcon: destructiveIconColor,
		35	}),
		36	[props.actions, iconColor, destructiveIconColor],
		37	);
		38	return <MenuView {...props} actions={actions} />;
		39	});
		40
19	export function ControlPill(props: {	41	export function ControlPill(props: {
20	readonly icon?: ComponentProps<typeof SymbolView>["name"];	42	readonly icon?: ComponentProps<typeof SymbolView>["name"];
21	readonly iconNode?: ReactNode;	43	readonly iconNode?: ReactNode;
...	@@ -217,8 +239,13 @@ export function ControlPillMenu(	...	@@ -217,8 +239,13 @@ export function ControlPillMenu(
217	};	239	};
218	}	240	}
219	return (	241	return (
220	<MenuView {...menuProps} themeVariant={isDarkMode ? "dark" : "light"}>	242	<ThemedMenuView
		243	{...menuProps}
		244	iconColorClassName="accent-icon"
		245	destructiveIconColorClassName="accent-danger-foreground"
		246	themeVariant={isDarkMode ? "dark" : "light"}
		247	>
221	{children}	248	{children}
222	</MenuView>	249	</ThemedMenuView>
223	);	250	);
224	}	251	}

apps/mobile/src/features/sharing/incoming-share-model.test.ts+48

...	@@ -181,6 +181,54 @@ describe("incoming native shares", () => {	...	@@ -181,6 +181,54 @@ describe("incoming native shares", () => {
181	expect(removeOwnedFile).toHaveBeenCalledWith(file.value);	181	expect(removeOwnedFile).toHaveBeenCalledWith(file.value);
182	});	182	});
183		183
		184	it.each([
		185	{ value: "file:///shared/clip.MOV", mimeType: "video/quicktime", originalName: "clip.MOV" },
		186	{ value: "content://media/videos/12", mimeType: "video/mp4", originalName: "clip.mp4" },
		187	])("imports a shared video from $value without reading it as an image", async (video) => {
		188	const sizeBytes = 20 * 1024 * 1024;
		189	const fileUri = `file:///documents/${video.originalName}`;
		190	const readBase64 = vi.fn(async () => "unused");
		191	const persistFile = vi.fn(async () => fileUri);
		192	const removeOwnedFile = vi.fn(async () => undefined);
		193
		194	const result = await buildIncomingShareDraft({
		195	id: "share-video",
		196	createdAt: "2026-08-30T10:00:00.000Z",
		197	payloads: [{ ...video, shareType: "video" }],
		198	resolvedPayloads: [],
		199	fileReader: { readBase64, persistFile, readSize: async () => sizeBytes, removeOwnedFile },
		200	});
		201
		202	expect(result.warnings).toEqual([]);
		203	expect(result.attachments).toEqual([
		204	{
		205	id: "share-video:file:0",
		206	type: "file",
		207	name: video.originalName,
		208	mimeType: video.mimeType,
		209	sizeBytes,
		210	fileUri,
		211	},
		212	]);
		213	expect(readBase64).not.toHaveBeenCalled();
		214	expect(removeOwnedFile).toHaveBeenCalledWith(video.value);
		215	expect(
		216	selectIncomingShareAttachments({
		217	attachments: result.attachments,
		218	maxFileAttachmentBytes: 50 * 1024 * 1024,
		219	}),
		220	).toEqual({ attachments: result.attachments, warnings: [] });
		221	expect(
		222	selectIncomingShareAttachments({
		223	attachments: result.attachments,
		224	maxFileAttachmentBytes: 10 * 1024 * 1024,
		225	}),
		226	).toEqual({
		227	attachments: [],
		228	warnings: [`'${video.originalName}' exceeds the 10 MB attachment limit.`],
		229	});
		230	});
		231
184	it("reports an unreadable shared file without calling it oversized", async () => {	232	it("reports an unreadable shared file without calling it oversized", async () => {
185	const file: SharePayload = {	233	const file: SharePayload = {
186	shareType: "file",	234	shareType: "file",

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx+64-59

 @@ -25,12 +25,13 @@ import { PROVIDER_SEND_TURN_MAX_ATTACHMENTS } from "@t3tools/contracts";
 import { ComposerEditor, type ComposerEditorHandle } from "../../components/ComposerEditor";
 import {
+  ComposerActionButton,
   ComposerInlineControl,
-  ComposerToolbarButton,
   ComposerToolbarRow,
   ComposerToolbarScroller,
 } from "../../components/ComposerToolbar";
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
+import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";
 import { ComposerAttachmentStrip } from "../../components/ComposerAttachmentStrip";
 import { ProviderIcon } from "../../components/ProviderIcon";
 import { SymbolView } from "../../components/AppSymbol";
 @@ -55,7 +56,7 @@ import { makeTurnCommandMetadata } from "../../lib/commandMetadata";
 import {
   convertPastedImagesToAttachments,
   pickComposerFiles,
-  pickComposerImages,
+  pickComposerMedia,
 } from "../../lib/composerImages";
 import { useScaledTextRole } from "../settings/appearance/useScaledTextRole";
 import {
 @@ -715,12 +716,20 @@ export function NewTaskDraftScreen(props: {
   });
   const showBranchLoading = flow.branchesLoading && flow.availableBranches.length === 0;
-  async function handlePickImages(): Promise<void> {
+  async function handlePickMedia(): Promise<void> {
     if (isComposerInteractionLocked || voiceInput.isBusy) {
       return;
     }
-    const result = await pickComposerImages({ existingCount: flow.attachments.length });
+    const capabilities = selectedEnvironmentServerConfig?.environment.capabilities;
-    const rejectedCount = result.images.length > 0 ? flow.appendAttachments(result.images) : 0;
+    const result = await pickComposerMedia({
+      existingCount: flow.attachments.length,
+      maxVideoBytes:
+        capabilities?.attachmentUploads === true
+          ? capabilities.fileAttachments?.maxUploadBytes
+          : undefined,
+    });
+    const rejectedCount =
+      result.attachments.length > 0 ? flow.appendAttachments(result.attachments) : 0;
     const problems = [
       ...(result.error ? [result.error] : []),
       ...(rejectedCount > 0
 @@ -728,7 +737,7 @@ export function NewTaskDraftScreen(props: {
         : []),
     ];
     if (problems.length > 0) {
-      Alert.alert("Could not attach photo", problems.join("\n\n"));
+      Alert.alert("Could not attach photo or video", problems.join("\n\n"));
     }
   }
 @@ -991,7 +1000,6 @@ export function NewTaskDraftScreen(props: {
       style={{
         minHeight: 72,
         maxHeight: 160,
-        paddingHorizontal: 4,
         paddingVertical: 4,
       }}
       textStyle={{ ...bodyText, color: foregroundColor, fontFamily: regularFontFamily }}
 @@ -1115,7 +1123,7 @@ export function NewTaskDraftScreen(props: {
   );
   const composerDock = (
-    <View className="bg-sheet px-4 pt-1" style={{ paddingBottom: controlsBottomPadding }}>
+    <View className="bg-sheet px-[12px] pt-1" style={{ paddingBottom: controlsBottomPadding }}>
       {!voiceInput.isBusy && composerMenu.trigger && composerMenu.items.length > 0 ? (
         <View className="mb-2">
           <ComposerCommandPopover
 @@ -1134,12 +1142,11 @@ export function NewTaskDraftScreen(props: {
           minHeight: 140,
           overflow: "hidden",
           paddingBottom: 6,
-          paddingHorizontal: 14,
           paddingTop: 14,
         }}
       >
         {flow.attachments.length > 0 ? (
-          <View className="pb-2.5">
+          <View className="px-[14px] pb-2.5">
             <ComposerAttachmentStrip
               attachments={flow.attachments}
               imageBorderRadius={16}
 @@ -1153,12 +1160,17 @@ export function NewTaskDraftScreen(props: {
           </View>
         ) : null}
-        {promptEditor}
+        <View className="px-[14px]">{promptEditor}</View>
         <View className="h-1" />
         <Animated.View layout={COMPOSER_LAYOUT_TRANSITION} collapsable={false}>
           <ComposerDictationToolbar showsDictation={isVoiceInputPresented}>
-            <ComposerToolbarRow paddingBottom={0} paddingHorizontal={0} paddingTop={0}>
+            <ComposerToolbarRow
+              paddingBottom={0}
+              paddingHorizontal={0}
+              paddingTop={0}
+              style={{ gap: 0 }}
+            >
               <ComposerDictationCancelAction
                 presentation={voicePresentation}
                 onCancel={voiceInput.cancel}
 @@ -1172,58 +1184,52 @@ export function NewTaskDraftScreen(props: {
                   onDismissError={voiceInput.cancel}
                 />
               ) : (
-                <ComposerToolbarScroller contentPaddingRight={8} fadeSurface="sheet">
+                <>
-                  <ComposerToolbarButton
+                  <ComposerAttachmentButton
-                    accessibilityLabel="Add attachment"
-                    disabled={isComposerInteractionLocked}
-                    icon="plus"
-                    onPress={() => {
-                      if (
-                        selectedEnvironmentServerConfig?.environment.capabilities.fileAttachments
-                      ) {
-                        Alert.alert("Add attachment", undefined, [
-                          { text: "Photos", onPress: () => void handlePickImages() },
-                          { text: "Files", onPress: () => void handlePickFiles() },
-                          { text: "Cancel", style: "cancel" },
-                        ]);
-                        return;
-                      }
-                      void handlePickImages();
-                    }}
-                    showChevron={false}
-                  />
-                  <ComposerInlineControl
-                    accessibilityLabel="Model and reasoning settings"
                     disabled={isComposerInteractionLocked}
-                    emphasized
+                    supportsFiles={Boolean(
-                    iconNode={
+                      selectedEnvironmentServerConfig?.environment.capabilities.fileAttachments,
-                      <ProviderIcon provider={flow.selectedModelOption?.providerDriver} size={16} />
+                    )}
-                    }
+                    onPickMedia={handlePickMedia}
-                    label={flow.selectedModelOption?.label ?? "Choose model"}
+                    onPickFiles={handlePickFiles}
-                    maxWidth={152}
-                    onPress={settingsSheetPresentation.open}
                   />
-                  {flow.planModeEnabled ? (
+                  <ComposerToolbarScroller align="end" contentPaddingRight={0} fadeSurface="sheet">
                     <ComposerInlineControl
-                      accessibilityHint={`Switches to ${flow.interactionMode === "plan" ? "Build" : "Plan"} mode`}
+                      accessibilityLabel="Model and reasoning settings"
-                      accessibilityLabel={`Interaction mode: ${flow.interactionMode === "plan" ? "Plan" : "Build"}`}
                       disabled={isComposerInteractionLocked}
                       emphasized
-                      icon={
+                      iconNode={
-                        flow.interactionMode === "plan"
+                        <ProviderIcon
-                          ? { ios: "list.bullet.clipboard", android: "auto_awesome" }
+                          provider={flow.selectedModelOption?.providerDriver}
-                          : { ios: "hammer", android: "construction" }
+                          size={16}
-                      }
+                        />
-                      label={flow.interactionMode === "plan" ? "Plan" : "Build"}
-                      onPress={() =>
-                        flow.setInteractionMode(
-                          flow.interactionMode === "plan" ? "default" : "plan",
-                        )
                       }
-                      showChevron={false}
+                      label={flow.selectedModelOption?.label ?? "Choose model"}
+                      maxWidth={152}
+                      onPress={settingsSheetPresentation.open}
                     />
-                  ) : null}
+                    {flow.planModeEnabled ? (
-                </ComposerToolbarScroller>
+                      <ComposerInlineControl
+                        accessibilityHint={`Switches to ${flow.interactionMode === "plan" ? "Build" : "Plan"} mode`}
+                        accessibilityLabel={`Interaction mode: ${flow.interactionMode === "plan" ? "Plan" : "Build"}`}
+                        disabled={isComposerInteractionLocked}
+                        emphasized
+                        icon={
+                          flow.interactionMode === "plan"
+                            ? { ios: "list.bullet.clipboard", android: "auto_awesome" }
+                            : { ios: "hammer", android: "construction" }
+                        }
+                        label={flow.interactionMode === "plan" ? "Plan" : "Build"}
+                        onPress={() =>
+                          flow.setInteractionMode(
+                            flow.interactionMode === "plan" ? "default" : "plan",
+                          )
+                        }
+                        showChevron={false}
+                      />
+                    ) : null}
+                  </ComposerToolbarScroller>
+                </>
               )}
               <ComposerDictationPrimaryAction
                 state={voiceInput.state}
 @@ -1235,7 +1241,7 @@ export function NewTaskDraftScreen(props: {
                 onCancel={voiceInput.cancel}
               />
               {voicePresentation.showsSend ? (
-                <ComposerToolbarButton
+                <ComposerActionButton
                   accessibilityLabel={
                     flow.submitting
                       ? "Starting task"
 @@ -1246,7 +1252,6 @@ export function NewTaskDraftScreen(props: {
                   disabled={!canStart}
                   icon={environmentConnected ? "arrow.up" : "tray.and.arrow.up"}
                   onPress={() => void handleStart()}
-                  showChevron={false}
                   variant="primary"
                 />
               ) : null}

apps/mobile/src/features/threads/ThreadComposer.tsx+71-79

 @@ -19,15 +19,7 @@ import {
   useState,
   type RefObject,
 } from "react";
-import {
+import { ActivityIndicator, Image, Platform, Pressable, View, type ViewStyle } from "react-native";
-  ActivityIndicator,
-  Alert,
-  Image,
-  Platform,
-  Pressable,
-  View,
-  type ViewStyle,
-} from "react-native";
 import ImageViewing from "react-native-image-viewing";
 import Animated, {
   FadeIn,
 @@ -46,15 +38,15 @@ import { scopedThreadKey } from "../../lib/scopedEntities";
 import { AppText as Text } from "../../components/AppText";
 import { SymbolView } from "../../components/AppSymbol";
+import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";
 import { ComposerAttachmentStrip } from "../../components/ComposerAttachmentStrip";
 import { GlassSurface } from "../../components/GlassSurface";
 import { ComposerEditor, type ComposerEditorHandle } from "../../components/ComposerEditor";
 import {
+  ComposerActionButton,
   ComposerInlineControl,
-  ComposerToolbarButton,
   ComposerToolbarRow,
 } from "../../components/ComposerToolbar";
-import { ControlPill } from "../../components/ControlPill";
 import { ProviderIcon } from "../../components/ProviderIcon";
 import type { DraftComposerAttachment } from "../../lib/composerImages";
 import { buildModelOptions, groupByProvider } from "../../lib/modelOptions";
 @@ -67,6 +59,7 @@ import {
   ComposerDictationCancelAction,
   ComposerDictationDraftContent,
   ComposerDictationPrimaryAction,
+  ComposerDictationStartAction,
   ComposerDictationStatus,
   ComposerDictationToolbar,
 } from "../voice-input/ComposerDictationControl";
 @@ -115,7 +108,7 @@ export interface ThreadComposerProps {
   readonly projectCwd: string | null;
   readonly editorRef?: RefObject<ComposerEditorHandle | null>;
   readonly onChangeDraftMessage: (value: string) => void;
-  readonly onPickDraftImages: () => Promise<void>;
+  readonly onPickDraftMedia: () => Promise<void>;
   readonly onPickDraftFiles: () => Promise<void>;
   readonly onNativePasteImages: (uris: ReadonlyArray<string>) => Promise<void>;
   readonly onRemoveDraftImage: (imageId: string) => void;
 @@ -315,8 +308,9 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
   const [previewImageUri, setPreviewImageUri] = useState<string | null>(null);
   const hasContent = props.draftMessage.trim().length > 0 || props.draftAttachments.length > 0;
   const showStopAction =
-    props.selectedThread.session?.status === "running" ||
+    !hasContent &&
-    props.selectedThread.session?.status === "starting";
+    (props.selectedThread.session?.status === "running" ||
+      props.selectedThread.session?.status === "starting");
   const sendLabel =
     props.connectionState !== "connected" || props.queueCount > 0 ? "Queue" : "Send";
 @@ -528,7 +522,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
   return (
     <Animated.View
-      className="px-4"
+      className="px-[12px]"
       style={{
         paddingTop: isExpanded ? 8 : 6,
         paddingBottom: (props.bottomInset ?? 0) + (isExpanded ? 8 : 6),
 @@ -571,7 +565,6 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                   minHeight: 140,
                   overflow: "hidden" as const,
                   paddingBottom: 6,
-                  paddingHorizontal: 14,
                   paddingTop: 14,
                 }
               : {
 @@ -579,18 +572,27 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                   // shape morph stays bounded while rendering as a capsule.
                   borderRadius: 27,
                   overflow: "hidden" as const,
-                  paddingHorizontal: 14,
+                  paddingVertical: 2,
-                  paddingVertical: showsCompactDictation ? 2 : 5,
                 }
           }
         >
           <ComposerDictationDraftContent
             className={isExpanded ? undefined : "flex-row items-center"}
-            collapsed={showsCompactDictation}
+            compact={!isExpanded}
+            hidden={showsCompactDictation}
           >
+            {!isExpanded ? (
+              <ComposerAttachmentButton
+                supportsFiles={Boolean(
+                  props.serverConfig?.environment.capabilities.fileAttachments,
+                )}
+                onPickMedia={props.onPickDraftMedia}
+                onPickFiles={props.onPickDraftFiles}
+              />
+            ) : null}
             {isExpanded ? (
               <Animated.View
-                className={props.draftAttachments.length > 0 ? "pb-2.5" : undefined}
+                className={props.draftAttachments.length > 0 ? "px-[14px] pb-2.5" : undefined}
                 entering={FadeIn.duration(160)}
                 exiting={FadeOut.duration(120)}
               >
 @@ -602,7 +604,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
               </Animated.View>
             ) : null}
             <Animated.View
-              className={isExpanded ? undefined : "min-w-0 flex-1"}
+              className={isExpanded ? "px-[14px]" : "min-w-0 flex-1 px-[4px]"}
               layout={COMPOSER_LAYOUT_TRANSITION}
             >
               <ComposerEditor
 @@ -629,12 +631,10 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                     ? {
                         minHeight: 72,
                         maxHeight: 160,
-                        paddingHorizontal: 4,
                         paddingVertical: 4,
                       }
                     : {
                         height: 36,
-                        paddingHorizontal: 4,
                       }
                 }
                 textStyle={{
 @@ -643,7 +643,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                 }}
               />
             </Animated.View>
-            {!isExpanded && !voiceInput.isBusy && props.draftAttachments.length > 0 ? (
+            {!isExpanded && props.draftAttachments.length > 0 ? (
               <View className="flex-row gap-1 pl-1">
                 {props.draftAttachments.slice(0, 3).map((attachment) =>
                   attachment.type === "image" ? (
 @@ -675,33 +675,31 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                 ) : null}
               </View>
             ) : null}
-            {!isExpanded && !voiceInput.isBusy ? (
+            {!isExpanded ? (
-              <Animated.View
+              <View className="flex-row items-center">
-                className="flex-row items-center gap-1.5"
+                <ComposerDictationStartAction
-                entering={FadeIn.duration(180)}
+                  state={voiceInput.state}
-                exiting={FadeOut.duration(100)}
+                  isAvailable={voiceInput.isAvailable}
-              >
+                  onStart={voiceInput.start}
-                {voiceInput.isAvailable ? (
+                  onCancel={voiceInput.cancel}
-                  <ComposerDictationPrimaryAction
+                />
-                    state={voiceInput.state}
-                    presentation={voicePresentation}
-                    isAvailable={voiceInput.isAvailable}
-                    onStart={voiceInput.start}
-                    onConfirm={voiceInput.stop}
-                    onCancel={voiceInput.cancel}
-                  />
-                ) : null}
                 {showStopAction ? (
-                  <ControlPill icon="stop.fill" variant="danger" onPress={props.onStopThread} />
+                  <ComposerActionButton
+                    accessibilityLabel="Stop agent"
+                    icon="stop.fill"
+                    variant="danger"
+                    onPress={props.onStopThread}
+                  />
                 ) : (
-                  <ControlPill
+                  <ComposerActionButton
+                    accessibilityLabel={sendLabel}
                     icon="arrow.up"
                     variant="primary"
-                    disabled={!canSend}
+                    disabled={!hasContent}
                     onPress={handleSend}
                   />
                 )}
-              </Animated.View>
+              </View>
             ) : null}
             {isExpanded ? <View className="h-1" /> : null}
           </ComposerDictationDraftContent>
 @@ -712,12 +710,13 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
             layout={COMPOSER_LAYOUT_TRANSITION}
             pointerEvents={isToolbarVisible ? "auto" : "none"}
             style={
-              isToolbarVisible
+              isExpanded
                 ? undefined
                 : {
-                    height: 0,
+                    position: "absolute",
-                    opacity: 0,
+                    bottom: 2,
-                    overflow: "hidden",
+                    left: 0,
+                    right: 0,
                   }
             }
           >
 @@ -725,7 +724,12 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
               showsDictation={isVoiceInputPresented}
               visible={isToolbarVisible}
             >
-              <ComposerToolbarRow paddingBottom={0} paddingHorizontal={0} paddingTop={0}>
+              <ComposerToolbarRow
+                paddingBottom={0}
+                paddingHorizontal={0}
+                paddingTop={0}
+                style={{ gap: 0 }}
+              >
                 <ComposerDictationCancelAction
                   presentation={voicePresentation}
                   onCancel={voiceInput.cancel}
 @@ -739,24 +743,15 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                     onDismissError={voiceInput.cancel}
                   />
                 ) : (
-                  <View className="min-w-0 flex-1 flex-row items-center gap-2">
+                  <View className="min-w-0 flex-1 flex-row items-center justify-between">
-                    <ComposerToolbarButton
+                    <ComposerAttachmentButton
-                      accessibilityLabel="Add attachment"
+                      supportsFiles={Boolean(
-                      icon="plus"
+                        props.serverConfig?.environment.capabilities.fileAttachments,
-                      onPress={() => {
+                      )}
-                        if (props.serverConfig?.environment.capabilities.fileAttachments) {
+                      onPickMedia={props.onPickDraftMedia}
-                          Alert.alert("Add attachment", undefined, [
+                      onPickFiles={props.onPickDraftFiles}
-                            { text: "Photos", onPress: () => void props.onPickDraftImages() },
-                            { text: "Files", onPress: () => void props.onPickDraftFiles() },
-                            { text: "Cancel", style: "cancel" },
-                          ]);
-                          return;
-                        }
-                        void props.onPickDraftImages();
-                      }}
-                      showChevron={false}
                     />
-                    <View className="min-w-0 flex-1" style={{ maxWidth: 152 }}>
+                    <View className="min-w-0 shrink" style={{ maxWidth: 152 }}>
                       <ComposerInlineControl
                         accessibilityLabel="Model and reasoning settings"
                         emphasized
 @@ -770,7 +765,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                     </View>
                   </View>
                 )}
-                <View className="shrink-0 flex-row items-center gap-2">
+                <View className="shrink-0 flex-row items-center">
                   <ComposerDictationPrimaryAction
                     state={voiceInput.state}
                     presentation={voicePresentation}
 @@ -779,23 +774,20 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                     onConfirm={voiceInput.stop}
                     onCancel={voiceInput.cancel}
                   />
-                  {voicePresentation.showsSend ? (
-                    <ComposerToolbarButton
-                      accessibilityLabel={sendLabel}
-                      icon="arrow.up"
-                      variant="primary"
-                      disabled={!canSend}
-                      onPress={handleSend}
-                      showChevron={false}
-                    />
-                  ) : null}
                   {showStopAction ? (
-                    <ComposerToolbarButton
+                    <ComposerActionButton
                       accessibilityLabel="Stop agent"
                       icon="stop.fill"
                       variant="danger"
                       onPress={props.onStopThread}
-                      showChevron={false}
+                    />
+                  ) : voicePresentation.showsSend ? (
+                    <ComposerActionButton
+                      accessibilityLabel={sendLabel}
+                      icon="arrow.up"
+                      variant="primary"
+                      disabled={!canSend}
+                      onPress={handleSend}
                     />
                   ) : null}
                 </View>

apps/mobile/src/features/threads/ThreadDetailScreen.tsx+2-2

apps/mobile/src/features/threads/ThreadRouteScreen.tsx+1-1

...	@@ -793,7 +793,7 @@ function ThreadRouteContent(	...	@@ -793,7 +793,7 @@ function ThreadRouteContent(
793	usesAutomaticContentInsets={usesNativeHeaderGlass}	793	usesAutomaticContentInsets={usesNativeHeaderGlass}
794	onOpenConnectionEditor={handleOpenConnectionEditor}	794	onOpenConnectionEditor={handleOpenConnectionEditor}
795	onChangeDraftMessage={composer.onChangeDraftMessage}	795	onChangeDraftMessage={composer.onChangeDraftMessage}
796	onPickDraftImages={composer.onPickDraftImages}	796	onPickDraftMedia={composer.onPickDraftMedia}
797	onPickDraftFiles={composer.onPickDraftFiles}	797	onPickDraftFiles={composer.onPickDraftFiles}
798	onNativePasteImages={composer.onNativePasteImages}	798	onNativePasteImages={composer.onNativePasteImages}
799	onRemoveDraftImage={composer.onRemoveDraftImage}	799	onRemoveDraftImage={composer.onRemoveDraftImage}

apps/mobile/src/features/voice-input/ComposerDictationControl.tsx+99-40

 @@ -10,13 +10,12 @@ import {
 } from "react-native";
 import Animated, {
   Easing,
-  FadeIn,
-  FadeOut,
   LinearTransition,
   ReduceMotion,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
+  type EntryExitAnimationFunction,
   type SharedValue,
 } from "react-native-reanimated";
 @@ -35,8 +34,56 @@ const DICTATION_LAYOUT =
   Platform.OS === "android"
     ? undefined
     : LinearTransition.duration(DICTATION_TIMING.duration).reduceMotion(ReduceMotion.System);
-const DICTATION_ENTERING = FadeIn.duration(180).reduceMotion(ReduceMotion.System);
+const TOOLBAR_FLIP_TIMING = {
-const DICTATION_EXITING = FadeOut.duration(120).reduceMotion(ReduceMotion.System);
+  duration: 260,
+  easing: Easing.inOut(Easing.cubic),
+  reduceMotion: ReduceMotion.System,
+} as const;
+const TOOLBAR_HALF_HEIGHT = 22;
+const TOOLBAR_PERSPECTIVE = 600;
+/** Moves each face around the same horizontal axis, keeping their edges together. */
+function toolbarFlip(fromDegrees: number, toDegrees: number): EntryExitAnimationFunction {
+  return () => {
+    "worklet";
+    const fromRadians = (fromDegrees * Math.PI) / 180;
+    const toRadians = (toDegrees * Math.PI) / 180;
+    const fromSine = Math.sin(fromRadians);
+    const toSine = Math.sin(toRadians);
+    return {
+      initialValues: {
+        opacity: fromDegrees === 0 ? 1 : 0,
+        transform: [
+          { perspective: TOOLBAR_PERSPECTIVE },
+          { translateY: -TOOLBAR_HALF_HEIGHT * fromSine },
+          { rotateX: `${fromDegrees}deg` },
+        ],
+      },
+      animations: {
+        opacity: withTiming(toDegrees === 0 ? 1 : 0, TOOLBAR_FLIP_TIMING),
+        transform: [
+          { perspective: TOOLBAR_PERSPECTIVE },
+          {
+            translateY: withTiming(-TOOLBAR_HALF_HEIGHT * toSine, {
+              ...TOOLBAR_FLIP_TIMING,
+              easing: (time) => {
+                const angle =
+                  fromRadians + (toRadians - fromRadians) * TOOLBAR_FLIP_TIMING.easing(time);
+                return (Math.sin(angle) - fromSine) / (toSine - fromSine);
+              },
+            }),
+          },
+          { rotateX: withTiming(`${toDegrees}deg`, TOOLBAR_FLIP_TIMING) },
+        ],
+      },
+    };
+  };
+}
+const DRAFT_TOOLBAR_ENTERING = toolbarFlip(90, 0);
+const DRAFT_TOOLBAR_EXITING = toolbarFlip(0, 90);
+const DICTATION_TOOLBAR_ENTERING = toolbarFlip(-90, 0);
+const DICTATION_TOOLBAR_EXITING = toolbarFlip(0, -90);
 const WAVEFORM_BAR_HEIGHT = 32;
 const WAVEFORM_MIN_BAR_HEIGHT = 2;
 const WAVEFORM_BAR_SPACING = 5;
 @@ -46,51 +93,63 @@ const WAVEFORM_TIMING = {
   reduceMotion: ReduceMotion.System,
 } as const;
-/** Keeps the native editor mounted when compact dictation replaces the draft area. */
+/** Rotates the compact draft away without unmounting or resizing its native editor. */
 export function ComposerDictationDraftContent(props: {
   readonly children: ReactNode;
   readonly className?: string;
-  readonly collapsed: boolean;
+  readonly compact: boolean;
+  readonly hidden: boolean;
 }) {
-  const visibility = useSharedValue(props.collapsed ? 0 : 1);
+  const rotation = useSharedValue(props.hidden ? 1 : 0);
   useLayoutEffect(() => {
-    visibility.value = withTiming(props.collapsed ? 0 : 1, DICTATION_TIMING);
+    rotation.value = withTiming(props.hidden ? 1 : 0, TOOLBAR_FLIP_TIMING);
-  }, [props.collapsed, visibility]);
+  }, [props.hidden, rotation]);
+  const compact = props.compact;
   const animatedStyle = useAnimatedStyle(() => ({
-    opacity: visibility.value,
+    opacity: compact ? 1 - rotation.value : 1,
-    transform: [{ translateY: -4 * (1 - visibility.value) }],
+    transform: compact
+      ? [
+          { perspective: TOOLBAR_PERSPECTIVE },
+          { translateY: -TOOLBAR_HALF_HEIGHT * Math.sin((rotation.value * Math.PI) / 2) },
+          { rotateX: `${rotation.value * 90}deg` },
+        ]
+      : [],
   }));
   return (
     <Animated.View
-      accessibilityElementsHidden={props.collapsed}
+      accessibilityElementsHidden={props.hidden}
-      importantForAccessibility={props.collapsed ? "no-hide-descendants" : "auto"}
+      importantForAccessibility={props.hidden ? "no-hide-descendants" : "auto"}
       collapsable={false}
       className={props.className}
       layout={DICTATION_LAYOUT}
-      style={[animatedStyle, { overflow: "hidden" }, props.collapsed ? { height: 0 } : undefined]}
+      pointerEvents={props.hidden ? "none" : "auto"}
+      style={[animatedStyle, { backfaceVisibility: "hidden" }]}
     >
       {props.children}
     </Animated.View>
   );
 }
-/** Crossfades controls within one toolbar row while the draft keeps its position. */
+/** Flips the entire row while keeping the outgoing controls intact until it leaves. */
 export function ComposerDictationToolbar(props: {
   readonly children: ReactNode;
   readonly showsDictation: boolean;
   readonly visible?: boolean;
 }) {
   return (
-    <View className="relative h-11">
+    <View className="relative h-[44px] overflow-hidden">
-      <Animated.View
+      {props.visible !== false ? (
-        key={props.showsDictation ? "dictation" : "draft"}
+        <Animated.View
-        className="absolute inset-0"
+          key={props.showsDictation ? "dictation" : "draft"}
-        entering={DICTATION_ENTERING}
+          className="absolute inset-0"
-        exiting={props.visible === false ? undefined : DICTATION_EXITING}
+          entering={props.showsDictation ? DICTATION_TOOLBAR_ENTERING : DRAFT_TOOLBAR_ENTERING}
-      >
+          exiting={props.showsDictation ? DICTATION_TOOLBAR_EXITING : DRAFT_TOOLBAR_EXITING}
-        {props.children}
+          style={{ backfaceVisibility: "hidden" }}
-      </Animated.View>
+        >
+          {props.children}
+        </Animated.View>
+      ) : null}
     </View>
   );
 }
 @@ -179,19 +238,15 @@ function VoiceActionButton(props: {
       accessibilityLabel={props.accessibilityLabel}
       accessibilityRole="button"
       accessibilityState={{ busy: props.loading, disabled: props.disabled }}
-      className={cn(
+      className="size-[44px] shrink-0 items-center justify-center active:opacity-70"
-        "items-center justify-center active:opacity-70",
-        variant === "primary" ? "size-11" : "size-9",
-      )}
       disabled={props.disabled}
-      hitSlop={variant === "plain" ? 4 : undefined}
       onPress={props.onPress}
       style={{ opacity: props.disabled && !props.loading ? 0.4 : 1 }}
     >
       <View
         className={cn(
           "items-center justify-center",
-          variant === "primary" ? "size-11 rounded-full bg-subtle" : "size-9",
+          variant === "primary" ? "size-[30px] rounded-full bg-subtle" : "size-[44px]",
         )}
       >
         {variant === "primary" ? (
 @@ -200,25 +255,21 @@ function VoiceActionButton(props: {
             style={primaryStyle}
           />
         ) : null}
-        <Animated.View
+        <View className="absolute inset-0 items-center justify-center">
-          key={props.loading ? "loading" : "icon"}
-          className="absolute inset-0 items-center justify-center"
-          entering={DICTATION_ENTERING}
-          exiting={DICTATION_EXITING}
-        >
           {props.loading ? (
             <ActivityIndicator size="small" colorClassName="accent-icon-muted" />
           ) : (
             <SymbolView
               name={props.icon}
-              size={17}
+              size={variant === "primary" ? 16 : 20}
+              weight={variant === "primary" ? "semibold" : "regular"}
               tintColorClassName={
                 variant === "primary" ? "accent-primary-foreground" : "accent-icon"
               }
               type="monochrome"
             />
           )}
-        </Animated.View>
+        </View>
       </View>
     </Pressable>
   );
 @@ -237,11 +288,9 @@ export function ComposerDictationStatus(props: {
   }, [props.phase, recordingVisibility]);
   const waveformStyle = useAnimatedStyle(() => ({
     opacity: recordingVisibility.value,
-    transform: [{ translateY: -4 * (1 - recordingVisibility.value) }],
   }));
   const labelStyle = useAnimatedStyle(() => ({
     opacity: 1 - recordingVisibility.value,
-    transform: [{ translateY: 4 * recordingVisibility.value }],
   }));
   if (!props.presentation.statusLabel) return null;
 @@ -340,6 +389,16 @@ export function ComposerDictationPrimaryAction(props: {
     );
   }
+  return <ComposerDictationStartAction {...props} />;
+}
+export function ComposerDictationStartAction(props: {
+  readonly state: VoiceInputState;
+  readonly isAvailable: boolean;
+  readonly disabled?: boolean;
+  readonly onStart: () => void;
+  readonly onCancel: () => void;
+}) {
   if (!props.isAvailable) return null;
   const openSettings = props.state.phase === "error" && props.state.errorAction === "settings";
   return (

apps/mobile/src/lib/composerFiles.test.ts+189-1

...	@@ -1,8 +1,10 @@	...	@@ -1,8 +1,10 @@
1	import { beforeEach, describe, expect, it, vi } from "vite-plus/test";	1	import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
		2	import type { ImagePickerAsset } from "expo-image-picker";
2		3
3	const mocks = vi.hoisted(() => ({	4	const mocks = vi.hoisted(() => ({
4	documentUri: "file:///documents",	5	documentUri: "file:///documents",
5	pickFile: vi.fn(),	6	pickFile: vi.fn(),
		7	pickMedia: vi.fn(),
6	copy: vi.fn(),	8	copy: vi.fn(),
7	delete: vi.fn(),	9	delete: vi.fn(),
8	open: vi.fn(),	10	open: vi.fn(),
...	@@ -37,6 +39,14 @@ vi.mock("expo-file-system", () => {	...	@@ -37,6 +39,14 @@ vi.mock("expo-file-system", () => {
37	return mocks.size(this.uri) ?? null;	39	return mocks.size(this.uri) ?? null;
38	}	40	}
39		41
		42	get name(): string {
		43	return this.uri.split("/").at(-1) ?? "";
		44	}
		45
		46	get type(): string {
		47	return "video/quicktime";
		48	}
		49
40	create(): void {}	50	create(): void {}
41		51
42	open(mode: string) {	52	open(mode: string) {
...	@@ -64,18 +74,23 @@ vi.mock("expo-file-system", () => {	...	@@ -64,18 +74,23 @@ vi.mock("expo-file-system", () => {
64	};	74	};
65	});	75	});
66		76
		77	vi.mock("expo-image-picker", () => ({ launchImageLibraryAsync: mocks.pickMedia }));
67	vi.mock("./uuid", () => ({ uuidv4: () => "attachment-id" }));	78	vi.mock("./uuid", () => ({ uuidv4: () => "attachment-id" }));
68		79
69	import {	80	import {
70	persistComposerAttachmentFile,	81	persistComposerAttachmentFile,
71	pickComposerFiles,	82	pickComposerFiles,
		83	pickComposerImages,
		84	pickComposerMedia,
72	removePersistedComposerAttachmentFile,	85	removePersistedComposerAttachmentFile,
73	} from "./composerImages";	86	} from "./composerImages";
		87	import { isForegroundHandoffActive } from "./foreground-handoff";
74		88
75	describe("pickComposerFiles", () => {	89	describe("composer file attachments", () => {
76	beforeEach(() => {	90	beforeEach(() => {
77	mocks.documentUri = "file:///documents";	91	mocks.documentUri = "file:///documents";
78	mocks.pickFile.mockReset();	92	mocks.pickFile.mockReset();
		93	mocks.pickMedia.mockReset();
79	mocks.copy.mockReset();	94	mocks.copy.mockReset();
80	mocks.delete.mockReset();	95	mocks.delete.mockReset();
81	mocks.open.mockReset();	96	mocks.open.mockReset();
...	@@ -83,6 +98,179 @@ describe("pickComposerFiles", () => {	...	@@ -83,6 +98,179 @@ describe("pickComposerFiles", () => {
83	mocks.size.mockImplementation((uri: string) => (uri.startsWith("content:") ? null : 42));	98	mocks.size.mockImplementation((uri: string) => (uri.startsWith("content:") ? null : 42));
84	});	99	});
85		100
		101	describe("photo library videos", () => {
		102	const image: ImagePickerAsset = {
		103	uri: "file:///picker/photo.png",
		104	type: "image",
		105	fileName: "photo.png",
		106	mimeType: "image/png",
		107	fileSize: 3,
		108	base64: "YWJj",
		109	width: 1,
		110	height: 1,
		111	};
		112	const video: ImagePickerAsset = {
		113	uri: "file:///picker/clip.mov",
		114	type: "video",
		115	fileName: "clip.mov",
		116	mimeType: "video/quicktime",
		117	fileSize: 20 * 1024 * 1024,
		118	base64: null,
		119	width: 1920,
		120	height: 1080,
		121	};
		122
		123	it("retains mixed photos and videos, keeping video bytes in durable file storage", async () => {
		124	mocks.pickMedia.mockResolvedValue({ canceled: false, assets: [image, video] });
		125	mocks.size.mockReturnValue(video.fileSize);
		126
		127	const result = await pickComposerMedia({ existingCount: 0, maxVideoBytes: 50 * 1024 * 1024 });
		128
		129	expect(mocks.pickMedia).toHaveBeenCalledWith(
		130	expect.objectContaining({
		131	mediaTypes: ["images", "videos"],
		132	shouldDownloadFromNetwork: true,
		133	}),
		134	);
		135	expect(result).toEqual({
		136	attachments: [
		137	expect.objectContaining({ type: "image", dataUrl: "data:image/png;base64,YWJj" }),
		138	{
		139	id: "attachment-id",
		140	type: "file",
		141	name: "clip.mov",
		142	mimeType: "video/quicktime",
		143	sizeBytes: video.fileSize,
		144	fileUri: "file:///documents/t3-composer-attachments/attachment-id-clip.mov",
		145	},
		146	],
		147	error: null,
		148	});
		149	expect(mocks.copy).toHaveBeenCalledWith(
		150	video.uri,
		151	"file:///documents/t3-composer-attachments/attachment-id-clip.mov",
		152	);
		153	expect(mocks.delete).not.toHaveBeenCalled();
		154	});
		155
		156	it("keeps image-only destinations on the image picker path", async () => {
		157	mocks.pickMedia.mockResolvedValue({ canceled: false, assets: [image] });
		158
		159	const result = await pickComposerImages({ existingCount: 0 });
		160
		161	expect(mocks.pickMedia).toHaveBeenCalledWith(
		162	expect.objectContaining({ mediaTypes: ["images"] }),
		163	);
		164	expect(result.images).toEqual([
		165	expect.objectContaining({ type: "image", name: "photo.png" }),
		166	]);
		167	expect(result.error).toBeNull();
		168	expect(mocks.copy).not.toHaveBeenCalled();
		169	});
		170
		171	it("does not persist videos when the destination lacks file support", async () => {
		172	mocks.pickMedia.mockResolvedValue({ canceled: false, assets: [video, image] });
		173
		174	const result = await pickComposerMedia({ existingCount: 0 });
		175
		176	expect(result.attachments).toEqual([expect.objectContaining({ type: "image" })]);
		177	expect(result.error).toBe("Video attachments are unavailable here.");
		178	expect(mocks.copy).not.toHaveBeenCalled();
		179	});
		180
		181	it("uses local video metadata when the picker omits its name, MIME type, or size", async () => {
		182	mocks.pickMedia.mockResolvedValue({
		183	canceled: false,
		184	assets: [{ ...video, fileName: null, mimeType: undefined, fileSize: undefined }],
		185	});
		186
		187	const result = await pickComposerMedia({ existingCount: 0, maxVideoBytes: 1024 });
		188
		189	expect(result.error).toBeNull();
		190	expect(result.attachments).toEqual([
		191	expect.objectContaining({
		192	type: "file",
		193	name: "clip.mov",
		194	mimeType: "video/quicktime",
		195	sizeBytes: 42,
		196	}),
		197	]);
		198	});
		199
		200	it.each([
		201	{
		202	reason: "picker size exceeds the server limit",
		203	reported: 2 * 1024 * 1024,
		204	stored: 42,
		205	limit: 1024 * 1024,
		206	error: "'clip.mov' exceeds the 1 MB attachment limit.",
		207	},
		208	{
		209	reason: "actual size exceeds the server limit",
		210	reported: 42,
		211	stored: 2 * 1024 * 1024,
		212	limit: 1024 * 1024,
		213	error: "'clip.mov' exceeds the 1 MB attachment limit.",
		214	},
		215	{
		216	reason: "stored copy is empty",
		217	reported: 42,
		218	stored: 0,
		219	limit: 1024 * 1024,
		220	error: "'clip.mov' is empty or could not be read.",
		221	},
		222	{
		223	reason: "server advertises more than the contract limit",
		224	reported: 51 * 1024 * 1024,
		225	stored: 42,
		226	limit: 80 * 1024 * 1024,
		227	error: "'clip.mov' exceeds the 50 MB attachment limit.",
		228	},
		229	])(
		230	"rejects a video when $reason while retaining the selected photo",
		231	async ({ reported, stored, limit, error }) => {
		232	mocks.pickMedia.mockResolvedValue({
		233	canceled: false,
		234	assets: [{ ...video, fileSize: reported }, image],
		235	});
		236	mocks.size.mockReturnValue(stored);
		237
		238	const result = await pickComposerMedia({ existingCount: 0, maxVideoBytes: limit });
		239
		240	expect(result).toEqual({
		241	attachments: [expect.objectContaining({ type: "image" })],
		242	error,
		243	});
		244	if (stored === 0) {
		245	expect(mocks.delete).toHaveBeenCalledWith(
		246	"file:///documents/t3-composer-attachments/attachment-id-clip.mov",
		247	);
		248	}
		249	},
		250	);
		251
		252	it("applies the remaining attachment slots to photos and videos together", async () => {
		253	mocks.pickMedia.mockResolvedValue({ canceled: false, assets: [image, video] });
		254
		255	const result = await pickComposerMedia({ existingCount: 7, maxVideoBytes: 50 * 1024 * 1024 });
		256
		257	expect(result.attachments).toEqual([expect.objectContaining({ type: "image" })]);
		258	expect(result.error).toBe("You can attach up to 8 attachments per message.");
		259	expect(mocks.pickMedia).toHaveBeenCalledWith(expect.objectContaining({ selectionLimit: 1 }));
		260	expect(mocks.copy).not.toHaveBeenCalled();
		261	});
		262
		263	it("reports a native video retrieval error and ends the foreground handoff", async () => {
		264	mocks.pickMedia.mockRejectedValue(new Error("Could not download video from iCloud."));
		265
		266	await expect(pickComposerMedia({ existingCount: 0, maxVideoBytes: 1024 })).resolves.toEqual({
		267	attachments: [],
		268	error: "Could not download video from iCloud.",
		269	});
		270	expect(isForegroundHandoffActive()).toBe(false);
		271	});
		272	});
		273
86	it("copies picked files into app-owned storage without loading their contents", async () => {	274	it("copies picked files into app-owned storage without loading their contents", async () => {
87	mocks.pickFile.mockResolvedValue({	275	mocks.pickFile.mockResolvedValue({
88	canceled: false,	276	canceled: false,

apps/mobile/src/lib/composerImages.ts+101-36

 @@ -157,6 +157,40 @@ export async function removePersistedComposerAttachmentFile(uri: string): Promis
   }
 }
+async function createComposerFileAttachment(input: {
+  readonly uri: string;
+  readonly name: string;
+  readonly mimeType: string;
+  readonly sizeBytes: number | null;
+  readonly maxBytes: number;
+}): Promise<DraftComposerFileAttachment> {
+  if (input.sizeBytes !== null && input.sizeBytes > input.maxBytes) {
+    throw new Error(fileAttachmentTooLargeMessage(input.name, input.maxBytes));
+  }
+  const { File } = await import("expo-file-system");
+  const fileUri = await persistComposerAttachmentFile(input.uri, input.name, input.maxBytes);
+  try {
+    const sizeBytes = new File(fileUri).size ?? input.sizeBytes ?? 0;
+    if (sizeBytes <= 0) {
+      throw new Error(`'${input.name}' is empty or could not be read.`);
+    }
+    if (sizeBytes > input.maxBytes) {
+      throw new Error(fileAttachmentTooLargeMessage(input.name, input.maxBytes));
+    }
+    return {
+      id: uuidv4(),
+      type: "file",
+      name: input.name,
+      mimeType: input.mimeType,
+      sizeBytes,
+      fileUri,
+    };
+  } catch (error) {
+    await removePersistedComposerAttachmentFile(fileUri);
+    throw error;
+  }
+}
 export async function pickComposerFiles(input: {
   readonly existingCount: number;
   readonly maxBytes?: number;
 @@ -199,32 +233,16 @@ export async function pickComposerFiles(input: {
     // contract rejects empty names at send time, so fall back before the name
     // reaches storage, errors, or the attachment itself.
     const name = file.name.trim().length > 0 ? file.name : "file";
-    const sizeBytes = file.size ?? null;
-    if (sizeBytes !== null && sizeBytes > maxBytes) {
-      error = fileAttachmentTooLargeMessage(name, maxBytes);
-      continue;
-    }
     try {
-      const fileUri = await persistComposerAttachmentFile(file.uri, name, maxBytes);
+      attachments.push(
-      const storedSizeBytes = new File(fileUri).size ?? sizeBytes ?? 0;
+        await createComposerFileAttachment({
-      if (storedSizeBytes <= 0) {
+          uri: file.uri,
-        await removePersistedComposerAttachmentFile(fileUri);
+          name,
-        error = `'${name}' is empty or could not be read.`;
+          mimeType: file.type || "application/octet-stream",
-        continue;
+          sizeBytes: file.size ?? null,
-      }
+          maxBytes,
-      if (storedSizeBytes > maxBytes) {
+        }),
-        await removePersistedComposerAttachmentFile(fileUri);
+      );
-        error = fileAttachmentTooLargeMessage(name, maxBytes);
-        continue;
-      }
-      attachments.push({
-        id: uuidv4(),
-        type: "file",
-        name,
-        mimeType: file.type || "application/octet-stream",
-        sizeBytes: storedSizeBytes,
-        fileUri,
-      });
     } catch (cause) {
       error = cause instanceof Error ? cause.message : `Could not read '${name}'.`;
     }
 @@ -239,7 +257,7 @@ async function loadImagePicker() {
   try {
     return await import("expo-image-picker");
   } catch (error) {
-    throw new Error("Image attachments are unavailable right now.", { cause: error });
+    throw new Error("The photo library is unavailable right now.", { cause: error });
   }
 }
 @@ -254,12 +272,27 @@ async function loadClipboard() {
 export async function pickComposerImages(input: { readonly existingCount: number }): Promise<{
   readonly images: ReadonlyArray<DraftComposerImageAttachment>;
   readonly error: string | null;
+}> {
+  const result = await pickComposerMedia(input);
+  return {
+    images: result.attachments.filter((attachment) => attachment.type === "image"),
+    error: result.error,
+  };
+}
+/** Videos use file uploads; omit maxVideoBytes for image-only destinations. */
+export async function pickComposerMedia(input: {
+  readonly existingCount: number;
+  readonly maxVideoBytes?: number;
+}): Promise<{
+  readonly attachments: ReadonlyArray<DraftComposerAttachment>;
+  readonly error: string | null;
 }> {
   const remainingSlots = PROVIDER_SEND_TURN_MAX_ATTACHMENTS - input.existingCount;
   if (remainingSlots <= 0) {
     return {
-      images: [],
+      attachments: [],
-      error: `You can attach up to ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS} images per message.`,
+      error: `You can attach up to ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS} attachments per message.`,
     };
   }
 @@ -268,9 +301,8 @@ export async function pickComposerImages(input: { readonly existingCount: number
     imagePicker = await loadImagePicker();
   } catch (error) {
     return {
-      images: [],
+      attachments: [],
-      error:
+      error: error instanceof Error ? error.message : "The photo library is unavailable right now.",
-        error instanceof Error ? error.message : "Image attachments are unavailable right now.",
     };
   }
 @@ -280,28 +312,61 @@ export async function pickComposerImages(input: { readonly existingCount: number
   let result: Awaited<ReturnType<typeof imagePicker.launchImageLibraryAsync>>;
   try {
     result = await imagePicker.launchImageLibraryAsync({
-      mediaTypes: ["images"],
+      mediaTypes: input.maxVideoBytes === undefined ? ["images"] : ["images", "videos"],
       allowsMultipleSelection: true,
       selectionLimit: remainingSlots,
       base64: true,
       quality: 1,
+      shouldDownloadFromNetwork: true,
     });
+  } catch (error) {
+    return {
+      attachments: [],
+      error: error instanceof Error ? error.message : "Could not open the photo library.",
+    };
   } finally {
     endHandoff();
   }
   if (result.canceled) {
     return {
-      images: [],
+      attachments: [],
       error: null,
     };
   }
-  const nextImages: DraftComposerImageAttachment[] = [];
+  const attachments: DraftComposerAttachment[] = [];
   let error: string | null = null;
   for (const asset of result.assets) {
+    if (attachments.length >= remainingSlots) {
+      error = `You can attach up to ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS} attachments per message.`;
+      break;
+    }
     const mimeType = asset.mimeType?.toLowerCase();
+    if (asset.type === "video" || mimeType?.startsWith("video/")) {
+      if (input.maxVideoBytes === undefined) {
+        error = "Video attachments are unavailable here.";
+        continue;
+      }
+      try {
+        const { File } = await import("expo-file-system");
+        const file = new File(asset.uri);
+        attachments.push(
+          await createComposerFileAttachment({
+            uri: asset.uri,
+            name: asset.fileName?.trim() || file.name || "video",
+            mimeType: mimeType || file.type || "application/octet-stream",
+            sizeBytes: asset.fileSize ?? null,
+            maxBytes: clampFileAttachmentUploadBytes(input.maxVideoBytes),
+          }),
+        );
+      } catch (cause) {
+        error =
+          cause instanceof Error ? cause.message : `Could not read '${asset.fileName ?? "video"}'.`;
+      }
+      continue;
+    }
     if (!mimeType?.startsWith("image/")) {
       error = `Unsupported file type for '${asset.fileName ?? "image"}'.`;
       continue;
 @@ -323,7 +388,7 @@ export async function pickComposerImages(input: { readonly existingCount: number
       continue;
     }
-    nextImages.push({
+    attachments.push({
       id: uuidv4(),
       type: "image",
       name: asset.fileName ?? "image",
 @@ -335,7 +400,7 @@ export async function pickComposerImages(input: { readonly existingCount: number
   }
   return {
-    images: nextImages,
+    attachments,
     error,
   };
 }

apps/mobile/src/lib/menu-action-colors.test.ts created+67

...	@@ -0,0 +1,67 @@
1	import type { MenuAction } from "@react-native-menu/menu";
2	import { describe, expect, it } from "vite-plus/test";
3
4	import { withMenuActionIconColors } from "./menu-action-colors";
5
6	describe("withMenuActionIconColors", () => {
7	it.each(["#111111", "#eeeeee"])(
8	"gives icons a visible color at every menu depth for the %s theme",
9	(icon) => {
10	const actions: MenuAction[] = [
11	{ id: "photos", title: "Photos", image: "photo" },
12	{
13	title: "Thread",
14	subactions: [
15	{
16	title: "Pinned thread",
17	image: "pin",
18	subactions: [{ title: "Move up", image: "arrow.up" }],
19	},
20	],
21	},
22	];
23
24	const result = withMenuActionIconColors(actions, { icon, destructiveIcon: "#ff0000" });
25
26	expect(result[0]?.imageColor).toBe(icon);
27	expect(result[1]).not.toHaveProperty("imageColor");
28	expect(result[1]?.subactions?.[0]?.imageColor).toBe(icon);
29	expect(result[1]?.subactions?.[0]?.subactions?.[0]?.imageColor).toBe(icon);
30	expect(actions[0]).not.toHaveProperty("imageColor");
31	expect(actions[1]?.subactions?.[0]).not.toHaveProperty("imageColor");
32	},
33	);
34
35	it("uses the destructive color while retaining action state and attributes", () => {
36	const action: MenuAction = {
37	id: "delete",
38	title: "Delete",
39	image: "trash",
40	state: "off",
41	attributes: { destructive: true, disabled: true },
42	};
43
44	expect(
45	withMenuActionIconColors([action], {
46	icon: "#111111",
47	destructiveIcon: "#cc0000",
48	}),
49	).toEqual([{ ...action, imageColor: "#cc0000" }]);
50	});
51
52	it.each(["#123456", "transparent", 0])("preserves explicit icon color %s", (imageColor) => {
53	const action: MenuAction = {
54	title: "Delete",
55	image: "trash",
56	imageColor,
57	attributes: { destructive: true },
58	};
59
60	expect(
61	withMenuActionIconColors([action], {
62	icon: "#111111",
63	destructiveIcon: "#cc0000",
64	}),
65	).toEqual([action]);
66	});
67	});

apps/mobile/src/lib/menu-action-colors.ts created+24

...	@@ -0,0 +1,24 @@
1	import type { MenuAction } from "@react-native-menu/menu";
2
3	// MenuView's iOS bridge treats an omitted imageColor as transparent.
4	export function withMenuActionIconColors(
5	actions: readonly MenuAction[],
6	colors: {
7	readonly icon: MenuAction["imageColor"];
8	readonly destructiveIcon: MenuAction["imageColor"];
9	},
10	): MenuAction[] {
11	return actions.map((action) => ({
12	...action,
13	...(action.image
14	? {
15	imageColor:
16	action.imageColor ??
17	(action.attributes?.destructive ? colors.destructiveIcon : colors.icon),
18	}
19	: {}),
20	...(action.subactions
21	? { subactions: withMenuActionIconColors(action.subactions, colors) }
22	: {}),
23	}));
24	}

apps/mobile/src/state/use-composer-drafts.test.ts+20-11

 @@ -221,40 +221,49 @@ describe("mobile composer drafts", () => {
     });
   });
-  it("caps appended attachments at the send limit against the live draft", () => {
+  it("releases videos rejected by the live draft limit and keeps accepted files", async () => {
+    const outboxLoad = vi.spyOn(threadOutboxManager, "load").mockResolvedValue(true);
+    onTestFinished(() => outboxLoad.mockRestore());
+    const cleanup = Promise.withResolvers<void>();
+    composerAttachmentCleanupMocks.remove.mockImplementationOnce(async () => {
+      cleanup.resolve();
+    });
     const makeAttachment = (id: string) => ({
       id,
       type: "file" as const,
-      name: `${id}.pdf`,
+      name: `${id}.mov`,
-      mimeType: "application/pdf",
+      mimeType: "video/quicktime",
       sizeBytes: 42,
-      fileUri: `file:///documents/t3-composer-attachments/${id}.pdf`,
+      fileUri: `file:///documents/t3-composer-attachments/${id}.mov`,
     });
+    const draftKey = "new-task:environment-1:project-cap";
     const existing = Array.from({ length: 7 }, (_, index) => makeAttachment(`held-${index}`));
     appAtomRegistry.set(composerDraftsAtom, {
-      "environment-1:thread-cap": { text: "send this", attachments: existing },
+      [draftKey]: { text: "send this", attachments: existing },
     });
-    const rejected = appendComposerDraftAttachments("environment-1:thread-cap", [
+    const rejected = appendComposerDraftAttachments(draftKey, [
       makeAttachment("incoming-1"),
       makeAttachment("incoming-2"),
     ]);
     expect(rejected).toBe(1);
-    const draft = appAtomRegistry.get(composerDraftsAtom)["environment-1:thread-cap"];
+    const draft = appAtomRegistry.get(composerDraftsAtom)[draftKey];
     expect(draft?.attachments).toHaveLength(8);
     expect(draft?.attachments.at(-1)?.id).toBe("incoming-1");
+    await cleanup.promise;
+    expect(composerAttachmentCleanupMocks.remove).toHaveBeenCalledExactlyOnceWith(
+      makeAttachment("incoming-2").fileUri,
+    );
     // Restore paths bypass the cap so a failed send never drops its files.
     const overflowRejected = appendComposerDraftAttachments(
-      "environment-1:thread-cap",
+      draftKey,
       [makeAttachment("restored-1")],
       { allowOverflow: true },
     );
     expect(overflowRejected).toBe(0);
-    expect(
+    expect(appAtomRegistry.get(composerDraftsAtom)[draftKey]?.attachments).toHaveLength(9);
-      appAtomRegistry.get(composerDraftsAtom)["environment-1:thread-cap"]?.attachments,
-    ).toHaveLength(9);
   });
   it("keeps shared attachment files until every draft releases them", async () => {

apps/mobile/src/state/use-thread-composer-state.ts+13-8

 @@ -28,7 +28,7 @@ import {
   convertPastedImagesToAttachments,
   pasteComposerClipboard,
   pickComposerFiles,
-  pickComposerImages,
+  pickComposerMedia,
 } from "../lib/composerImages";
 import type { DraftComposerImageAttachment } from "../lib/composerImages";
 import { scopedThreadKey } from "../lib/scopedEntities";
 @@ -316,26 +316,31 @@ export function useThreadComposerState() {
     [selectedThreadShell],
   );
-  const onPickDraftImages = useCallback(async () => {
+  const onPickDraftMedia = useCallback(async () => {
     if (!selectedThreadShell) {
       return;
     }
     const threadKey = scopedThreadKey(selectedThreadShell.environmentId, selectedThreadShell.id);
-    const result = await pickComposerImages({
+    const capabilities = selectedEnvironmentRuntime?.serverConfig?.environment.capabilities;
+    const result = await pickComposerMedia({
       existingCount: composerDrafts[threadKey]?.attachments.length ?? 0,
+      maxVideoBytes:
+        capabilities?.attachmentUploads === true
+          ? capabilities.fileAttachments?.maxUploadBytes
+          : undefined,
     });
-    const rejectedImageCount = appendComposerDraftAttachments(threadKey, result.images);
+    const rejectedCount = appendComposerDraftAttachments(threadKey, result.attachments);
     const problems = [
       ...(result.error ? [result.error] : []),
-      ...(rejectedImageCount > 0
+      ...(rejectedCount > 0
         ? [`You can attach up to ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS} attachments per message.`]
         : []),
     ];
     if (problems.length > 0) {
-      Alert.alert("Could not attach image", problems.join("\n\n"));
+      Alert.alert("Could not attach photo or video", problems.join("\n\n"));
     }
-  }, [composerDrafts, selectedThreadShell]);
+  }, [composerDrafts, selectedEnvironmentRuntime?.serverConfig, selectedThreadShell]);
   const onPickDraftFiles = useCallback(async () => {
     if (!selectedThreadShell) {
 @@ -470,7 +475,7 @@ export function useThreadComposerState() {
     runtimeMode,
     interactionMode,
     onChangeDraftMessage,
-    onPickDraftImages,
+    onPickDraftMedia,
     onPickDraftFiles,
     onPasteIntoDraft,
     onNativePasteImages,

docs/internals/mobile-navigation.md+7

...	@@ -41,3 +41,10 @@ After changing a dependency patch, refresh CocoaPods before rebuilding an	...	@@ -41,3 +41,10 @@ After changing a dependency patch, refresh CocoaPods before rebuilding an
41	existing iOS project. pnpm installs each patch hash in a different directory;	41	existing iOS project. pnpm installs each patch hash in a different directory;
42	an old Pods project can keep compiling the previous directory even though Metro	42	an old Pods project can keep compiling the previous directory even though Metro
43	and `apps/mobile/node_modules` resolve to the new patch.	43	and `apps/mobile/node_modules` resolve to the new patch.
		44
		45	`ControlPillMenu` resolves semantic icon colors through `withUniwind` and supplies them to every
		46	iOS `MenuView` action, including nested actions. The menu library's Fabric bridge converts a missing
		47	`imageColor` to transparent, so callers should use this wrapper instead of
		48	rendering `MenuView` directly. Explicit colors are preserved, and destructive
		49	actions default to the theme's danger foreground color. Native stack header menus
		50	use a separate implementation and do not need this workaround.

docs/user/composer.md+14-7

...	@@ -4,15 +4,21 @@ Messages can contain up to 120,000 characters. If a draft is longer, T3 Code kee	...	@@ -4,15 +4,21 @@ Messages can contain up to 120,000 characters. If a draft is longer, T3 Code kee
4	composer and shows how many characters need to be removed. Shorten the draft or split it into	4	composer and shows how many characters need to be removed. Shorten the draft or split it into
5	multiple messages, then send again in the same thread.	5	multiple messages, then send again in the same thread.
6		6
		7	On mobile, an empty composer shows an interrupt button while the agent is working. Adding text
		8	or an attachment replaces it with the send button. This applies to both compact and expanded
		9	composers.
		10
7	You can attach images up to 10 MB. On servers that support file uploads, you can also	11	You can attach images up to 10 MB. On servers that support file uploads, you can also
8	attach text files, PDFs, ZIP archives, and other files. Each file can be up to the limit advertised	12	attach videos, text files, PDFs, ZIP archives, and other files. Each file can be up to the limit advertised
9	by the server, capped at 50 MB. Each message can contain up to eight attachments in total. Files	13	by the server, capped at 50 MB. Each message can contain up to eight attachments in total. Files
10	upload directly to the environment, where your agent can read, copy, or edit them by their file path.	14	upload directly to the environment, where your agent can read, copy, or edit them by their file path.
11		15
12	On web and desktop, attachments upload as soon as you add them. The send button becomes available	16	On web and desktop, attachments upload as soon as you add them. The send button becomes available
13	after every upload finishes. Failed uploads can be retried or removed. On mobile, the + control	17	after every upload finishes. Failed uploads can be retried or removed. On mobile, tap + to open
14	offers Photos, and adds Files when the connected server supports file uploads. You can share a file	18	the photo library from either the compact or expanded composer. When the connected server supports
15	into T3 Code from any app through the system share sheet. Mobile uploads happen when the message	19	file uploads, + opens a menu beside the button with Photo Library and Choose Files.
		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
16	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
17	to save it or open it in another app through the system share sheet.	23	to save it or open it in another app through the system share sheet.
18		24
...	@@ -41,9 +47,10 @@ send.	...	@@ -41,9 +47,10 @@ send.
41	## Voice input on iPhone	47	## Voice input on iPhone
42		48
43	On supported iPhones with iOS 26 or later, tap the microphone in the composer to record a message.	49	On supported iPhones with iOS 26 or later, tap the microphone in the composer to record a message.
44	An expanded composer keeps your draft visible and replaces its toolbar with waves that respond to	50	An expanded composer keeps your draft visible and flips its bottom toolbar into recording controls
45	your voice. A collapsed composer shows a compact recording strip instead. Tap the checkmark to	51	with waves that respond to your voice. A collapsed composer flips into a compact recording strip
46	finish and transcribe on your device. The waves fade into a transcription status, then the usual	52	without changing height. Tap the checkmark to finish and transcribe on your device. The waves fade
		53	into a transcription status, then the usual
47	controls return with the text inserted at the selection where recording started. If the keyboard	54	controls return with the text inserted at the selection where recording started. If the keyboard
48	is open when you start, it stays open during voice input. You can review and edit the text before	55	is open when you start, it stays open during voice input. You can review and edit the text before
49	you send it.	56	you send it.

author	Julius Marminge <julius0216@outlook.com> 2026-08-30 20:10:13-07:00
committer	GitHub <noreply@github.com> 2026-08-30 20:10:13-07:00
log	e3dcc1615c9167048ecfe536f87ad1d353fa8a49
tree	eeb4a79f1b732288e42833d73706f89aa9e4a81b
parent	7963ac7404ff2196c3e8e4198ecc02a5e742b0a1
signature	Signed by PGP key B5690EEEBB952194

...	@@ -121,7 +121,7 @@ export interface ThreadDetailScreenProps {	...	@@ -121,7 +121,7 @@ export interface ThreadDetailScreenProps {
121	readonly onHeaderMaterialVisibilityChange?: (visible: boolean) => void;	121	readonly onHeaderMaterialVisibilityChange?: (visible: boolean) => void;
122	readonly onOpenConnectionEditor: () => void;	122	readonly onOpenConnectionEditor: () => void;
123	readonly onChangeDraftMessage: (value: string) => void;	123	readonly onChangeDraftMessage: (value: string) => void;
124	readonly onPickDraftImages: () => Promise<void>;	124	readonly onPickDraftMedia: () => Promise<void>;
125	readonly onPickDraftFiles: () => Promise<void>;	125	readonly onPickDraftFiles: () => Promise<void>;
126	readonly onNativePasteImages: (uris: ReadonlyArray<string>) => Promise<void>;	126	readonly onNativePasteImages: (uris: ReadonlyArray<string>) => Promise<void>;
127	readonly onRemoveDraftImage: (imageId: string) => void;	127	readonly onRemoveDraftImage: (imageId: string) => void;
...	@@ -812,7 +812,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread	...	@@ -812,7 +812,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
812	projectCwd={props.projectWorkspaceRoot}	812	projectCwd={props.projectWorkspaceRoot}
813	bottomInset={composerBottomInset}	813	bottomInset={composerBottomInset}
814	onChangeDraftMessage={props.onChangeDraftMessage}	814	onChangeDraftMessage={props.onChangeDraftMessage}
815	onPickDraftImages={props.onPickDraftImages}	815	onPickDraftMedia={props.onPickDraftMedia}
816	onPickDraftFiles={props.onPickDraftFiles}	816	onPickDraftFiles={props.onPickDraftFiles}
817	onNativePasteImages={props.onNativePasteImages}	817	onNativePasteImages={props.onNativePasteImages}
818	onRemoveDraftImage={props.onRemoveDraftImage}	818	onRemoveDraftImage={props.onRemoveDraftImage}

Add mobile composer attachment menu with video support (#8843)