Enhance mobile review comments with diff previews

- Add syntax-highlighted diff rendering and cached review state
- Support pasted/attached images in review comments
- Improve mobile review sheet handling for large or partial diffs

Co-authored-by: codex <codex@users.noreply.github.com>

Author: juliusmarminge

.oxfmtrc.json

@@ -11,7 +11,7 @@
     "**/routeTree.gen.ts",
     "apps/web/public/mockServiceWorker.js",
     "apps/web/src/lib/vendor/qrcodegen.ts",
-    "apps/mobile/uniwind-types.d.ts"
+    "apps/mobile/uniwind-types.d.ts",
     "*.icon/**"
   ],
   "sortPackageJson": {}

apps/mobile/package.json

@@ -73,6 +73,7 @@
     "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "~5.6.2",
     "react-native-screens": "~4.23.0",
+    "react-native-shiki-engine": "^0.3.9",
     "react-native-svg": "15.15.3",
     "react-native-worklets": "0.7.2",
     "shiki": "^4.0.2",

apps/mobile/src/app/threads/[environmentId]/[threadId]/_layout.tsx

@@ -46,6 +46,7 @@ export default function ThreadLayout() {
         options={{
           animation: "slide_from_right",
           contentStyle: sheetStyle,
+          headerBackButtonDisplayMode: "minimal",
           headerShown: true,
           headerTitle: "Files changed",
           headerBackTitle: "",

apps/mobile/src/components/ComposerAttachmentStrip.tsx

@@ -15,6 +15,8 @@ export interface ComposerAttachmentStripProps {
   readonly imageSize?: number;
   /** Border radius of each image thumbnail.  Defaults to 16. */
   readonly imageBorderRadius?: number;
+  /** Whether the remove button should sit in its own gutter instead of overlapping the image. */
+  readonly removeButtonPlacement?: "overlay" | "gutter";
 }
 
 /**
@@ -25,6 +27,8 @@ export function ComposerAttachmentStrip(props: ComposerAttachmentStripProps) {
   const subtleBg = useThemeColor("--color-subtle");
   const size = props.imageSize ?? 72;
   const radius = props.imageBorderRadius ?? 16;
+  const removeButtonPlacement = props.removeButtonPlacement ?? "overlay";
+  const removeButtonGutter = removeButtonPlacement === "gutter" ? 10 : 0;
 
   if (props.attachments.length === 0) {
     return null;
@@ -39,7 +43,14 @@ export function ComposerAttachmentStrip(props: ComposerAttachmentStripProps) {
     >
       <View style={{ flexDirection: "row", gap: 10 }}>
         {props.attachments.map((image) => (
-          <View key={image.id} style={{ position: "relative" }}>
+          <View
+            key={image.id}
+            style={{
+              position: "relative",
+              paddingTop: removeButtonGutter,
+              paddingRight: removeButtonGutter,
+            }}
+          >
             <Pressable
               onPress={props.onPressImage ? () => props.onPressImage!(image.previewUri) : undefined}
             >
@@ -57,8 +68,8 @@ export function ComposerAttachmentStrip(props: ComposerAttachmentStripProps) {
             <Pressable
               style={{
                 position: "absolute",
-                top: 4,
-                right: 4,
+                top: removeButtonPlacement === "gutter" ? 0 : 4,
+                right: removeButtonPlacement === "gutter" ? 0 : 4,
                 width: 22,
                 height: 22,
                 borderRadius: 11,