fix(mobile): queued edits end when their run starts, wherever you are (#25468)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: juliusmarminge

apps/mobile/src/Stack.tsx

@@ -82,7 +82,6 @@ import {
   NewTaskEnvironmentPickerRouteScreen,
 } from "./features/threads/NewTaskContextPickerScreens";
 import {
-  ExistingThreadSettingsRouteProvider,
   ExistingThreadSettingsRouteScreen,
   NewTaskThreadSettingsRouteScreen,
 } from "./features/threads/ThreadSettingsSheet";
@@ -550,20 +549,18 @@ function RootStackLayout(props: {
         <ThreadOutboxDrainWorker />
         <ShowcaseCaptureCoordinator pathname={pathname} />
         <SettingsEnvironmentFilterProvider open={settingsOpen}>
-          <ExistingThreadSettingsRouteProvider>
-            <WorkspaceConnectionStatusProvider>
-              <AndroidWorkspaceTabsProvider state={props.state}>
-                <AdaptiveWorkspaceLayout
-                  pathname={workspaceLocation.pathname}
-                  workspaceRouteKey={workspaceLocation.routeKey}
-                  selectedPullRequestKey={selectedPullRequestKey(props.state)}
-                >
-                  {props.children}
-                  <HardwareKeyboardCommandOverlay />
-                </AdaptiveWorkspaceLayout>
-              </AndroidWorkspaceTabsProvider>
-            </WorkspaceConnectionStatusProvider>
-          </ExistingThreadSettingsRouteProvider>
+          <WorkspaceConnectionStatusProvider>
+            <AndroidWorkspaceTabsProvider state={props.state}>
+              <AdaptiveWorkspaceLayout
+                pathname={workspaceLocation.pathname}
+                workspaceRouteKey={workspaceLocation.routeKey}
+                selectedPullRequestKey={selectedPullRequestKey(props.state)}
+              >
+                {props.children}
+                <HardwareKeyboardCommandOverlay />
+              </AdaptiveWorkspaceLayout>
+            </AndroidWorkspaceTabsProvider>
+          </WorkspaceConnectionStatusProvider>
         </SettingsEnvironmentFilterProvider>
       </HardwareKeyboardCommandProvider>
     </NewTaskFlowProvider>

apps/mobile/src/components/ComposerAttachmentStrip.tsx

@@ -3,10 +3,13 @@ import { composerImageGallery } from "../lib/composerImageGallery";
 import { SymbolView } from "./ui/AppSymbol";
 import { imageMimeType } from "@t3tools/shared/image";
 import { videoMimeType } from "@t3tools/shared/video";
-import { useEffect, useMemo, useState } from "react";
+import { useAtomValue } from "@effect/atom-react";
+import { AsyncResult, Atom } from "effect/reactivity";
+import { Paths } from "expo-file-system";
 import { Image, Pressable, ScrollView, View } from "react-native";
 
 import { AppText as Text } from "./ui/AppText";
+import { MaterializedPreviewKey, materializedPreviewAtom } from "../lib/composerImagePreview";
 import { PierreEntryIcon } from "./PierreEntryIcon";
 import {
   isFileBackedComposerAttachment,
@@ -93,65 +96,31 @@ export function ComposerAttachmentThumbnail(props: ComposerAttachmentThumbnailPr
   );
 }
 
-const PREVIEW_CACHE_DIRECTORY = "t3-composer-previews";
-
 /** Fabric re-parses URLs each layout; large data URLs can stall and abort commits. */
 const INLINE_PREVIEW_FALLBACK_MAX_CHARS = 256_000;
 
-async function materializeDataUrlPreview(id: string, dataUrl: string): Promise<string | null> {
-  const comma = dataUrl.indexOf(",");
-  if (comma < 0) return null;
-  const { Directory, File, Paths } = await import("expo-file-system");
-  const mimeType = /^data:([^;,]+)/.exec(dataUrl)?.[1] ?? "image/jpeg";
-  const extension = (mimeType.split("/")[1] ?? "jpg").replace("jpeg", "jpg");
-  const directory = new Directory(Paths.cache, PREVIEW_CACHE_DIRECTORY);
-  directory.create({ idempotent: true, intermediates: true });
-  const file = new File(directory, `${id}.${extension}`);
-  if (!file.exists) {
-    file.create();
-    await file.write(dataUrl.slice(comma + 1), { encoding: "base64" });
-  }
-  return file.uri;
-}
+const noMaterializedPreview = Atom.make(AsyncResult.initial<string | null>()).pipe(
+  Atom.withLabel("composer-image-preview:none"),
+);
 
 function useComposerImagePreviewUri(attachment: DraftComposerImageAttachment): string | null {
-  const { id, fileUri, previewUri } = attachment;
-  const [rebased, setRebased] = useState<{ fileUri: string; uri: string } | null>(null);
-  const [materialized, setMaterialized] = useState<{ id: string; uri: string | null } | null>(null);
+  const { fileUri, previewUri } = attachment;
   const inlinePreview = fileUri === undefined && previewUri.startsWith("data:");
-  useEffect(() => {
-    if (fileUri === undefined) return;
-    let cancelled = false;
-    void (async () => {
-      const { Paths } = await import("expo-file-system");
-      const owned = resolveOwnedComposerAttachmentFileUri(fileUri, Paths.document.uri);
-      if (!cancelled && owned !== null && owned !== previewUri) setRebased({ fileUri, uri: owned });
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [fileUri, previewUri]);
-  useEffect(() => {
-    if (!inlinePreview) return;
-    let cancelled = false;
-    void materializeDataUrlPreview(id, previewUri)
-      .then((uri) => {
-        if (!cancelled && uri !== null) setMaterialized({ id, uri });
-      })
-      .catch((error: unknown) => {
-        console.warn("[composer-attachments] could not cache an image preview", error);
-        if (!cancelled) setMaterialized({ id, uri: null });
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [id, inlinePreview, previewUri]);
-  if (fileUri !== undefined && rebased?.fileUri === fileUri) return rebased.uri;
-  if (fileUri !== undefined) return previewUri.startsWith("data:") ? fileUri : previewUri;
+  const materialized = useAtomValue(
+    inlinePreview
+      ? materializedPreviewAtom(new MaterializedPreviewKey(attachment))
+      : noMaterializedPreview,
+  );
+  if (fileUri !== undefined) {
+    // Reinstalls move the app container, so a stored file URI may point at the old one.
+    const owned = resolveOwnedComposerAttachmentFileUri(fileUri, Paths.document.uri);
+    if (owned !== null) return owned;
+    return previewUri.startsWith("data:") ? fileUri : previewUri;
+  }
   if (inlinePreview) {
-    if (materialized?.id !== id) return null;
+    if (!AsyncResult.isSuccess(materialized)) return null;
     return (
-      materialized.uri ??
+      materialized.value ??
       (previewUri.length <= INLINE_PREVIEW_FALLBACK_MAX_CHARS ? previewUri : null)
     );
   }
@@ -280,15 +249,12 @@ function ComposerVideoAttachment(props: {
   const { attachment } = props;
   const sourceIdentifier = `draft:${attachment.id}`;
   const style = { width: props.size, height: props.size, borderRadius: props.borderRadius };
-  const actionsSource = useMemo<MediaActionsSource>(
-    () => ({
-      name: attachment.name,
-      mimeType: videoMimeType(attachment) ?? attachment.mimeType,
-      sourceIdentifier,
-      attachment,
-    }),
-    [attachment, sourceIdentifier],
-  );
+  const actionsSource: MediaActionsSource = {
+    name: attachment.name,
+    mimeType: videoMimeType(attachment) ?? attachment.mimeType,
+    sourceIdentifier,
+    attachment,
+  };
 
   return (
     <VideoAttachmentTile
@@ -304,7 +270,7 @@ function ComposerVideoAttachment(props: {
 }
 
 export function ComposerAttachmentStrip(props: ComposerAttachmentStripProps) {
-  const gallery = useMemo(() => composerImageGallery(props.attachments), [props.attachments]);
+  const gallery = composerImageGallery(props.attachments);
   const size = props.imageSize ?? 72;
   const radius = props.imageBorderRadius ?? 16;
   const removeButtonPlacement = props.removeButtonPlacement ?? "overlay";

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx

@@ -1246,10 +1246,6 @@ export function NewTaskDraftScreen(props: {
         onSendMessage={handleStart}
         onReconnectEnvironment={() => onReconnectEnvironment(selectedProject.environmentId)}
         canSwitchThreadProvider
-        onUpdateThreadModelSelection={(selection) =>
-          flow.setSelectedModelKey(`${selection.instanceId}:${selection.model}`, selection.options)
-        }
-        onUpdateThreadRuntimeMode={flow.setRuntimeMode}
         onUpdateThreadInteractionMode={flow.planModeEnabled ? flow.setInteractionMode : undefined}
         onRespondToApproval={async () => {}}
         onSelectUserInputOption={() => {}}

apps/mobile/src/features/threads/PendingUserInputCard.tsx

@@ -269,6 +269,7 @@ export function PendingUserInputCard(props: PendingUserInputCardProps) {
               </View>
               {question.allowCustomAnswer !== false ? (
                 <QuestionAttachments
+                  key={`${props.pendingUserInput.requestId}:${question.id}`}
                   requestId={props.pendingUserInput.requestId}
                   question={question}
                   questions={props.pendingUserInput.questions}

apps/mobile/src/features/threads/QuestionAttachments.tsx

@@ -45,27 +45,23 @@ export function QuestionAttachments(props: {
   const [previewVideo, setPreviewVideo] = useState<VideoPreviewSource | null>(null);
   const configs = useServerConfigs();
   const drafts = useAtomValue(composerDraftsAtom);
-  const scopeKey = JSON.stringify([
-    selectedThread?.environmentId,
-    selectedThread?.id,
-    props.requestId,
-    props.question.id,
-  ]);
-  // Unmounted inputs never emit onBlur; explicitly release keyboard ownership.
   const focusedRef = useRef(false);
   const onInputFocusChange = props.onInputFocusChange;
-  const releaseFocus = useEffectEvent(() => {
-    if (focusedRef.current) onInputFocusChange?.(false);
-  });
-  useEffect(() => () => releaseFocus(), []);
-  const pickerScope = useRef<{ key: string; active: boolean } | null>(null);
+  // The caller keys this component by request and question, so unmounting ends any open
+  // picker's scope.
+  const pickerScope = useRef<{ active: boolean }>({ active: false });
   useEffect(() => {
-    const scope = { key: scopeKey, active: true };
+    const scope = { active: true };
     pickerScope.current = scope;
     return () => {
       scope.active = false;
     };
-  }, [scopeKey]);
+  }, []);
+  // Unmounted inputs never emit onBlur; explicitly release keyboard ownership.
+  const releaseFocus = useEffectEvent(() => {
+    if (focusedRef.current) onInputFocusChange?.(false);
+  });
+  useEffect(() => () => releaseFocus(), []);
   const append = (
     key: string,
     attachments: Parameters<typeof appendComposerDraftAttachments>[1],
@@ -106,7 +102,7 @@ export function QuestionAttachments(props: {
     })
       .then(async (images) => {
         if (
-          scope?.active &&
+          scope.active &&
           (appAtomRegistry.get(questionAttachmentPreparationAtom)[key] ?? 0) > 0
         ) {
           if (append(key, images) > 0)
@@ -150,7 +146,7 @@ export function QuestionAttachments(props: {
       const picked = "files" in result ? result.files : result.attachments;
       // Resolution on another client clears the reservation while the picker is open.
       if (
-        !scope?.active ||
+        !scope.active ||
         (appAtomRegistry.get(questionAttachmentPreparationAtom)[key] ?? 0) === 0
       ) {
         await releaseUnusedComposerAttachmentFiles(picked);