feat(mobile): add composer attachment menu with video support (#8843)

Adopted from upstream `pingdotgg/t3code#8843` (`e3dcc1615`), stacked on the
voice-input branch because #8843 lands after #8614 upstream.

The + control now opens a native menu anchored beside it with Photo Library
and Choose Files, replacing the Alert sheet, and videos are accepted against
the server's file upload limit. An empty composer also shows the interrupt
button while the agent works; adding text or an attachment swaps it for send.

Twelve of the thirteen ThreadComposer conflicts were #8793's toolbar
restructure arriving as context again, declined as before. The genuine
content is ComposerAttachmentButton and the showStopAction change, both
applied into Pylon's structure: the button sits inside Pylon's toolbar
scroller rather than upstream's fixed left group.

Two silent drops caught that a clean typecheck would not have:
ComposerToolbarButton was removed from the import list through a
non-conflicting hunk, because upstream's restructure replaced every call
site - Pylon still has eleven. And upstream adds IconPhoto via a per-icon
deep import while Pylon uses the barrel, so the icon arrived in the symbol
map with no import behind it.

docs/user/composer.md keeps Pylon's voice and branding; upstream's text says
T3 Code.

Author: rynfar

apps/mobile/app.config.ts

@@ -178,6 +178,7 @@ const sharingPlugin: NonNullable<ExpoConfig["plugins"]>[number] = [
         supportsText: true,
         supportsWebUrlWithMaxCount: 1,
         supportsImageWithMaxCount: 8,
+        supportsMovieWithMaxCount: 8,
         supportsFileWithMaxCount: 8,
       },
     },

apps/mobile/src/components/AppSymbol.tsx

@@ -54,6 +54,7 @@ import {
   IconMoon,
   IconNetwork,
   IconPalette,
+  IconPhoto,
   IconPin,
   IconPinnedOff,
   IconPlayerPlay,
@@ -132,6 +133,7 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {
   magnifyingglass: IconSearch,
   paintbrush: IconPalette,
   "person.crop.circle": IconUserCircle,
+  photo: IconPhoto,
   pin: IconPin,
   "pin.slash": IconPinnedOff,
   play: IconPlayerPlay,

apps/mobile/src/components/ComposerAttachmentButton.tsx

@@ -0,0 +1,55 @@
+import type { MenuAction } from "@react-native-menu/menu";
+import { Pressable } from "react-native";
+
+import { SymbolView } from "./AppSymbol";
+import { ControlPillMenu } from "./ControlPill";
+
+const ATTACHMENT_MENU_ACTIONS: MenuAction[] = [
+  { id: "photos", title: "Photo Library", image: "photo" },
+  { id: "files", title: "Choose Files", image: "folder" },
+];
+
+export function ComposerAttachmentButton(props: {
+  readonly disabled?: boolean;
+  readonly supportsFiles: boolean;
+  readonly onPickMedia: () => Promise<void>;
+  readonly onPickFiles: () => Promise<void>;
+}) {
+  const button = (
+    <Pressable
+      accessibilityLabel="Add attachment"
+      accessibilityRole="button"
+      accessibilityState={{ disabled: props.disabled }}
+      className="size-[44px] shrink-0 items-center justify-center rounded-full active:opacity-70 disabled:opacity-50"
+      disabled={props.disabled}
+      onPress={props.supportsFiles ? undefined : () => void props.onPickMedia()}
+    >
+      <SymbolView
+        name="plus"
+        size={20}
+        weight="regular"
+        tintColorClassName="accent-icon"
+        type="monochrome"
+      />
+    </Pressable>
+  );
+
+  if (props.disabled || !props.supportsFiles) {
+    return button;
+  }
+
+  return (
+    <ControlPillMenu
+      actions={ATTACHMENT_MENU_ACTIONS}
+      onPressAction={({ nativeEvent }) => {
+        if (nativeEvent.event === "photos") {
+          void props.onPickMedia();
+        } else if (nativeEvent.event === "files") {
+          void props.onPickFiles();
+        }
+      }}
+    >
+      {button}
+    </ControlPillMenu>
+  );
+}

apps/mobile/src/components/ComposerToolbar.tsx

@@ -113,6 +113,7 @@ export function ComposerToolbarRow(props: {
 
 export function ComposerToolbarScroller(props: {
   readonly children: ReactNode;
+  readonly align?: "start" | "end";
   /** Only for non-Uniwind surfaces such as the native terminal palette. */
   readonly fadeOpaque?: string;
   /** Only for non-Uniwind surfaces such as the native terminal palette. */
@@ -167,6 +168,8 @@ export function ComposerToolbarScroller(props: {
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{
           alignItems: "center",
+          flexGrow: props.align === "end" ? 1 : undefined,
+          justifyContent: props.align === "end" ? "flex-end" : undefined,
           gap: COMPOSER_TOOLBAR_GAP,
           paddingLeft: 0,
           paddingRight: props.contentPaddingRight ?? 1,
@@ -214,6 +217,46 @@ export function ComposerToolbarScroller(props: {
   );
 }
 
+export function ComposerActionButton(props: {
+  readonly accessibilityLabel: string;
+  readonly disabled?: boolean;
+  readonly icon: ComponentProps<typeof SymbolView>["name"];
+  readonly onPress: () => void;
+  readonly variant?: "primary" | "danger";
+}) {
+  return (
+    <Pressable
+      accessibilityLabel={props.accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: props.disabled }}
+      className="size-[44px] shrink-0 items-center justify-center active:opacity-70"
+      disabled={props.disabled}
+      onPress={props.onPress}
+    >
+      <View
+        className={cn(
+          "size-[30px] items-center justify-center rounded-full",
+          props.variant === "danger"
+            ? "bg-danger"
+            : props.disabled
+              ? "bg-primary/15"
+              : "bg-primary",
+        )}
+      >
+        <SymbolView
+          name={props.icon}
+          size={16}
+          weight="semibold"
+          tintColorClassName={
+            props.variant === "danger" ? "accent-danger-foreground" : "accent-primary-foreground"
+          }
+          type="monochrome"
+        />
+      </View>
+    </Pressable>
+  );
+}
+
 export function ComposerToolbarButton(props: {
   readonly icon?: ComponentProps<typeof SymbolView>["name"];
   readonly iconNode?: ReactNode;

apps/mobile/src/components/ControlPill.tsx

@@ -6,16 +6,38 @@ import {
   type ComponentProps,
   type ReactElement,
   type ReactNode,
+  useMemo,
   useRef,
 } from "react";
-import { Platform, Pressable, View } from "react-native";
+import { Platform, Pressable, View, type ColorValue } from "react-native";
+import { withUniwind } from "uniwind";
 import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
 
 import { cn } from "../lib/cn";
+import { withMenuActionIconColors } from "../lib/menu-action-colors";
 import { AndroidAnchoredMenu } from "./AndroidAnchoredMenu";
 import { SymbolView } from "./AppSymbol";
 import { AppText as Text } from "./AppText";
 
+const ThemedMenuView = withUniwind(function NativeMenuView({
+  iconColor,
+  destructiveIconColor,
+  ...props
+}: ComponentProps<typeof MenuView> & {
+  readonly iconColor?: ColorValue;
+  readonly destructiveIconColor?: ColorValue;
+}) {
+  const actions = useMemo(
+    () =>
+      withMenuActionIconColors(props.actions, {
+        icon: iconColor,
+        destructiveIcon: destructiveIconColor,
+      }),
+    [props.actions, iconColor, destructiveIconColor],
+  );
+  return <MenuView {...props} actions={actions} />;
+});
+
 export function ControlPill(props: {
   readonly icon?: ComponentProps<typeof SymbolView>["name"];
   readonly iconNode?: ReactNode;
@@ -177,8 +199,13 @@ export function ControlPillMenu(
     });
   }
   return (
-    <MenuView {...menuProps} themeVariant={isDarkMode ? "dark" : "light"}>
+    <ThemedMenuView
+      {...menuProps}
+      iconColorClassName="accent-icon"
+      destructiveIconColorClassName="accent-danger-foreground"
+      themeVariant={isDarkMode ? "dark" : "light"}
+    >
       {children}
-    </MenuView>
+    </ThemedMenuView>
   );
 }

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

@@ -181,6 +181,54 @@ describe("incoming native shares", () => {
     expect(removeOwnedFile).toHaveBeenCalledWith(file.value);
   });
 
+  it.each([
+    { value: "file:///shared/clip.MOV", mimeType: "video/quicktime", originalName: "clip.MOV" },
+    { value: "content://media/videos/12", mimeType: "video/mp4", originalName: "clip.mp4" },
+  ])("imports a shared video from $value without reading it as an image", async (video) => {
+    const sizeBytes = 20 * 1024 * 1024;
+    const fileUri = `file:///documents/${video.originalName}`;
+    const readBase64 = vi.fn(async () => "unused");
+    const persistFile = vi.fn(async () => fileUri);
+    const removeOwnedFile = vi.fn(async () => undefined);
+
+    const result = await buildIncomingShareDraft({
+      id: "share-video",
+      createdAt: "2026-08-30T10:00:00.000Z",
+      payloads: [{ ...video, shareType: "video" }],
+      resolvedPayloads: [],
+      fileReader: { readBase64, persistFile, readSize: async () => sizeBytes, removeOwnedFile },
+    });
+
+    expect(result.warnings).toEqual([]);
+    expect(result.attachments).toEqual([
+      {
+        id: "share-video:file:0",
+        type: "file",
+        name: video.originalName,
+        mimeType: video.mimeType,
+        sizeBytes,
+        fileUri,
+      },
+    ]);
+    expect(readBase64).not.toHaveBeenCalled();
+    expect(removeOwnedFile).toHaveBeenCalledWith(video.value);
+    expect(
+      selectIncomingShareAttachments({
+        attachments: result.attachments,
+        maxFileAttachmentBytes: 50 * 1024 * 1024,
+      }),
+    ).toEqual({ attachments: result.attachments, warnings: [] });
+    expect(
+      selectIncomingShareAttachments({
+        attachments: result.attachments,
+        maxFileAttachmentBytes: 10 * 1024 * 1024,
+      }),
+    ).toEqual({
+      attachments: [],
+      warnings: [`'${video.originalName}' exceeds the 10 MB attachment limit.`],
+    });
+  });
+
   it("reports an unreadable shared file without calling it oversized", async () => {
     const file: SharePayload = {
       shareType: "file",