🤖 feat: streamline RN tool rendering with web parity

- Add specialized tool cards (bash, file_read, file_edit_*) with diff syntax highlighting
- Implement proper streaming state management matching desktop reducer
- Fix reasoning auto-collapse and streaming cursor visibility
- Add MessageBubble chrome with consistent action buttons/timestamps
- Pin react-native-worklets to 0.5.1 for Expo Go compatibility

_Generated with `mux`_

Change-Id: I3d11d83d956a909a52501346b98afeb24eecd40f
Signed-off-by: Test <test@example.com>

Author: Test

apps/mobile/bun.lock

@@ -13,7 +13,7 @@
         "expo-blur": "^15.0.7",
         "expo-clipboard": "^8.0.7",
         "expo-constants": "~18.0.10",
-        "expo-haptics": "^15.0.7",
+        "expo-haptics": "~15.0.7",
         "expo-router": "~6.0.14",
         "expo-secure-store": "~15.0.7",
         "expo-status-bar": "^3.0.8",
@@ -22,7 +22,8 @@
         "react-native-markdown-display": "^7.0.2",
         "react-native-reanimated": "^4.1.3",
         "react-native-safe-area-context": "~5.6.0",
-        "react-native-screens": "4.16.0",
+        "react-native-screens": "~4.16.0",
+        "react-native-worklets": "0.5.1",
       },
       "devDependencies": {
         "@types/react": "~19.1.10",
@@ -1071,7 +1072,7 @@
 
     "react-native-web": ["react-native-web@0.21.2", "", { "dependencies": { "@babel/runtime": "^7.18.6", "@react-native/normalize-colors": "^0.74.1", "fbjs": "^3.0.4", "inline-style-prefixer": "^7.0.1", "memoize-one": "^6.0.0", "nullthrows": "^1.1.1", "postcss-value-parser": "^4.2.0", "styleq": "^0.1.3" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-SO2t9/17zM4iEnFvlu2DA9jqNbzNhoUP+AItkoCOyFmDMOhUnBBznBDCYN92fGdfAkfQlWzPoez6+zLxFNsZEg=="],
 
-    "react-native-worklets": ["react-native-worklets@0.6.1", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "semver": "7.7.2" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-URca8l7c7Uog7gv4mcg9KILdJlnbvwdS5yfXQYf5TDkD2W1VY1sduEKrD+sA3lUPXH/TG1vmXAvNxCNwPMYgGg=="],
+    "react-native-worklets": ["react-native-worklets@0.5.1", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "semver": "7.7.2" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-lJG6Uk9YuojjEX/tQrCbcbmpdLCSFxDK1rJlkDhgqkVi1KZzG7cdcBFQRqyNOOzR9Y0CXNuldmtWTGOyM0k0+w=="],
 
     "react-refresh": ["react-refresh@0.14.2", "", {}, "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA=="],
 

apps/mobile/package.json

@@ -19,7 +19,7 @@
     "expo-blur": "^15.0.7",
     "expo-clipboard": "^8.0.7",
     "expo-constants": "~18.0.10",
-    "expo-haptics": "^15.0.7",
+    "expo-haptics": "~15.0.7",
     "expo-router": "~6.0.14",
     "expo-secure-store": "~15.0.7",
     "expo-status-bar": "^3.0.8",
@@ -28,7 +28,8 @@
     "react-native-markdown-display": "^7.0.2",
     "react-native-reanimated": "^4.1.3",
     "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0"
+    "react-native-screens": "~4.16.0",
+    "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
     "@types/react": "~19.1.10",

apps/mobile/src/messages/MessageBubble.tsx

@@ -32,22 +32,17 @@ export function MessageBubble(props: MessageBubbleProps): JSX.Element {
   const variant = props.variant ?? "assistant";
 
   const timestamp = useMemo(() => {
-    if (typeof props.message.timestamp === "number") {
-      return formatTimestamp(props.message.timestamp);
+    const ts = "timestamp" in props.message ? props.message.timestamp : undefined;
+    if (typeof ts === "number") {
+      return formatTimestamp(ts);
     }
     return null;
-  }, [props.message.timestamp]);
+  }, [props.message]);
 
   const isLastPartOfMessage = useMemo(() => {
-    if (
-      "isLastPartOfMessage" in props.message &&
-      props.message.isLastPartOfMessage &&
-      "isPartial" in props.message &&
-      props.message.isPartial === false
-    ) {
-      return true;
-    }
-    return false;
+    // Simply check if this is marked as the last part
+    // Don't require isPartial === false, as that flag can be stale during streaming
+    return "isLastPartOfMessage" in props.message && props.message.isLastPartOfMessage === true;
   }, [props.message]);
 
   const showMetaRow = variant === "user" || isLastPartOfMessage;