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

Julius Marminge committed 7 months ago

Commit f86d4661 parent 78a95fb17 files · +1567 −575Browse files

Unified · Split

17 files

.oxfmtrc.json +1 −1
apps/mobile/package.json +1 −0
apps/mobile/src/app/threads/[environmentId]/[threadId]/_layout.tsx +1 −0
apps/mobile/src/components/ComposerAttachmentStrip.tsx +14 −3
apps/mobile/src/features/threads/review/ReviewCommentComposerSheet.tsx +266 −135
apps/mobile/src/features/threads/review/ReviewSheet.tsx +544 −410
apps/mobile/src/features/threads/review/reviewCommentSelection.ts +4 −0
apps/mobile/src/features/threads/review/reviewDiffRendering.tsx +82 −0
apps/mobile/src/features/threads/review/reviewHighlighterEngine.test.ts +43 −0
apps/mobile/src/features/threads/review/reviewHighlighterEngine.ts +36 −0
apps/mobile/src/features/threads/review/reviewModel.test.ts +60 −0
apps/mobile/src/features/threads/review/reviewModel.ts +99 −0
apps/mobile/src/features/threads/review/reviewState.ts +195 −0
apps/mobile/src/features/threads/review/shikiReviewHighlighter.test.ts +44 −0
apps/mobile/src/features/threads/review/shikiReviewHighlighter.ts +138 −21
apps/mobile/src/features/threads/use-thread-composer-state.ts +21 −0
bun.lock +18 −5

.oxfmtrc.json+1−1

@@ -11,7 +11,7 @@ · 10 unmodified lines
11	"**/routeTree.gen.ts",	11	"**/routeTree.gen.ts",
12	"apps/web/public/mockServiceWorker.js",	12	"apps/web/public/mockServiceWorker.js",
13	"apps/web/src/lib/vendor/qrcodegen.ts",	13	"apps/web/src/lib/vendor/qrcodegen.ts",
14	"apps/mobile/uniwind-types.d.ts"	14	"apps/mobile/uniwind-types.d.ts",
15	".icon/*"	15	".icon/*"
16	],	16	],
17	"sortPackageJson": {}	17	"sortPackageJson": {}

apps/mobile/package.json+1−0

@@ -73,6 +73,7 @@ · 72 unmodified lines
73	"react-native-reanimated": "4.2.1",	73	"react-native-reanimated": "4.2.1",
74	"react-native-safe-area-context": "~5.6.2",	74	"react-native-safe-area-context": "~5.6.2",
75	"react-native-screens": "~4.23.0",	75	"react-native-screens": "~4.23.0",
		76	"react-native-shiki-engine": "^0.3.9",
76	"react-native-svg": "15.15.3",	77	"react-native-svg": "15.15.3",
77	"react-native-worklets": "0.7.2",	78	"react-native-worklets": "0.7.2",
78	"shiki": "^4.0.2",	79	"shiki": "^4.0.2",

apps/mobile/src/app/threads/[environmentId]/[threadId]/_layout.tsx+1−0

@@ -46,6 +46,7 @@ export default function ThreadLayout() { · 45 unmodified lines
46	options={{	46	options={{
47	animation: "slide_from_right",	47	animation: "slide_from_right",
48	contentStyle: sheetStyle,	48	contentStyle: sheetStyle,
		49	headerBackButtonDisplayMode: "minimal",
49	headerShown: true,	50	headerShown: true,
50	headerTitle: "Files changed",	51	headerTitle: "Files changed",
51	headerBackTitle: "",	52	headerBackTitle: "",

apps/mobile/src/components/ComposerAttachmentStrip.tsx+14−3

   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";
 }
 /**
   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;
     >
       <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}
             >
             <Pressable
               style={{
                 position: "absolute",
-                top: 4,
+                top: removeButtonPlacement === "gutter" ? 0 : 4,
-                right: 4,
+                right: removeButtonPlacement === "gutter" ? 0 : 4,
                 width: 22,
                 height: 22,
                 borderRadius: 11,

apps/mobile/src/features/threads/review/ReviewCommentComposerSheet.tsx+266−135

@@ -1,12 +1,29 @@
1	import { useLocalSearchParams, useRouter } from "expo-router";	1	import { useLocalSearchParams, useRouter } from "expo-router";
2	import { SymbolView } from "expo-symbols";	2	import { SymbolView } from "expo-symbols";
3	import { useMemo, useState } from "react";	3	import { TextInputWrapper } from "expo-paste-input";
4	import { Platform, Pressable, ScrollView, Text as NativeText, View } from "react-native";	4	import { useEffect, useMemo, useState } from "react";
		5	import {
		6	KeyboardAvoidingView,
		7	Platform,
		8	Pressable,
		9	ScrollView,
		10	View,
		11	useColorScheme,
		12	useWindowDimensions,
		13	} from "react-native";
5	import { useSafeAreaInsets } from "react-native-safe-area-context";	14	import { useSafeAreaInsets } from "react-native-safe-area-context";
		15	import ImageViewing from "react-native-image-viewing";
6		16
7	import { AppText as Text, AppTextInput as TextInput } from "../../../components/AppText";	17	import { AppText as Text, AppTextInput as TextInput } from "../../../components/AppText";
		18	import { ComposerAttachmentStrip } from "../../../components/ComposerAttachmentStrip";
		19	import { ControlPill } from "../../../components/ControlPill";
8	import { cn } from "../../../lib/cn";	20	import { cn } from "../../../lib/cn";
		21	import type { DraftComposerImageAttachment } from "../../../lib/composerImages";
		22	import { convertPastedImagesToAttachments, pickComposerImages } from "../../../lib/composerImages";
9	import { useThemeColor } from "../../../lib/useThemeColor";	23	import { useThemeColor } from "../../../lib/useThemeColor";
		24	import { useNativePaste } from "../../../hooks/useNativePaste";
		25	import { setPendingConnectionError } from "../../../state/use-remote-environment-registry";
		26	import { appendReviewCommentToDraft } from "../use-thread-composer-state";
10	import {	27	import {
11	clearReviewCommentTarget,	28	clearReviewCommentTarget,
12	formatReviewCommentContext,	29	formatReviewCommentContext,
@@ -15,28 +32,21 @@ import { · 2 unmodified lines
15	getSelectedReviewCommentLines,	32	getSelectedReviewCommentLines,
16	useReviewCommentTarget,	33	useReviewCommentTarget,
17	} from "./reviewCommentSelection";	34	} from "./reviewCommentSelection";
18	import { appendReviewCommentToDraft } from "../use-thread-composer-state";	35	import { changeTone, DiffTokenText } from "./reviewDiffRendering";
19		36	import {
20	const REVIEW_MONO_FONT_FAMILY = Platform.select({	37	highlightReviewSelectedLines,
21	ios: "ui-monospace",	38	type ReviewDiffTheme,
22	android: "monospace",	39	type ReviewHighlightedToken,
23	default: "monospace",	40	} from "./shikiReviewHighlighter";
24	});
25
26	function renderVisibleWhitespace(value: string): string {
27	const expandedTabs = value.replace(/\t/g, " ");
28	return expandedTabs.replace(/^( +)/, (leading) => leading.replaceAll(" ", "\u00A0"));
29	}
30		41
31	function changeTone(change: "context" \| "add" \| "delete"): string {	42	const REVIEW_COMMENT_PREVIEW_MAX_LINES = 5;
32	if (change === "add") return "bg-emerald-500/12";	43	const REVIEW_COMMENT_LINE_HEIGHT = 26;
33	if (change === "delete") return "bg-rose-500/12";
34	return "bg-card";
35	}
36		44
37	export function ReviewCommentComposerSheet() {	45	export function ReviewCommentComposerSheet() {
38	const router = useRouter();	46	const router = useRouter();
39	const insets = useSafeAreaInsets();	47	const insets = useSafeAreaInsets();
		48	const { width } = useWindowDimensions();
		49	const colorScheme = useColorScheme();
40	const iconTint = String(useThemeColor("--color-icon"));	50	const iconTint = String(useThemeColor("--color-icon"));
41	const target = useReviewCommentTarget();	51	const target = useReviewCommentTarget();
42	const { environmentId, threadId } = useLocalSearchParams<{	52	const { environmentId, threadId } = useLocalSearchParams<{
@@ -44,6 +54,11 @@ export function ReviewCommentComposerSheet() { · 1 unmodified line
44	threadId: string;	54	threadId: string;
45	}>();	55	}>();
46	const [commentText, setCommentText] = useState("");	56	const [commentText, setCommentText] = useState("");
		57	const [highlightedLinesById, setHighlightedLinesById] = useState<
		58	Record<string, ReadonlyArray<ReviewHighlightedToken>>
		59	>({});
		60	const [attachments, setAttachments] = useState<ReadonlyArray<DraftComposerImageAttachment>>([]);
		61	const [previewImageUri, setPreviewImageUri] = useState<string \| null>(null);
47		62
48	const selectedLines = useMemo(	63	const selectedLines = useMemo(
49	() => (target ? getSelectedReviewCommentLines(target) : []),	64	() => (target ? getSelectedReviewCommentLines(target) : []),
@@ -53,136 +68,252 @@ export function ReviewCommentComposerSheet() { · 3 unmodified lines
53	const lastLine = selectedLines[selectedLines.length - 1] ?? null;	68	const lastLine = selectedLines[selectedLines.length - 1] ?? null;
54	const firstNumber = firstLine ? getReviewUnifiedLineNumber(firstLine) : null;	69	const firstNumber = firstLine ? getReviewUnifiedLineNumber(firstLine) : null;
55	const lastNumber = lastLine ? getReviewUnifiedLineNumber(lastLine) : null;	70	const lastNumber = lastLine ? getReviewUnifiedLineNumber(lastLine) : null;
		71	const selectedTheme = (colorScheme === "dark" ? "dark" : "light") satisfies ReviewDiffTheme;
56	const canSubmit =	72	const canSubmit =
57	commentText.trim().length > 0 && target !== null && !!environmentId && !!threadId;	73	commentText.trim().length > 0 && target !== null && !!environmentId && !!threadId;
		74	const selectionLabel =
		75	selectedLines.length === 1
		76	? firstNumber !== null
		77	? `Line ${firstNumber}`
		78	: "File comment"
		79	: firstNumber !== null && lastNumber !== null
		80	? `Lines ${firstNumber}-${lastNumber}`
		81	: `${selectedLines.length} lines selected`;
		82	const previewHeight = Math.max(
		83	Math.min(selectedLines.length, REVIEW_COMMENT_PREVIEW_MAX_LINES) * REVIEW_COMMENT_LINE_HEIGHT,
		84	REVIEW_COMMENT_LINE_HEIGHT,
		85	);
		86	const previewViewportWidth = Math.max(width - 40, 280);
		87	const handleNativePaste = useNativePaste((uris) => {
		88	void (async () => {
		89	try {
		90	const images = await convertPastedImagesToAttachments({
		91	uris,
		92	existingCount: attachments.length,
		93	});
		94	if (images.length > 0) {
		95	setAttachments((current) => [...current, ...images]);
		96	}
		97	} catch (error) {
		98	console.error("[review comment] error converting pasted images", error);
		99	}
		100	})();
		101	});
		102
		103	useEffect(() => {
		104	if (!target \|\| selectedLines.length === 0) {
		105	setHighlightedLinesById({});
		106	return;
		107	}
		108
		109	let cancelled = false;
		110	void highlightReviewSelectedLines({
		111	filePath: target.filePath,
		112	lines: selectedLines,
		113	theme: selectedTheme,
		114	})
		115	.then((next) => {
		116	if (!cancelled) {
		117	setHighlightedLinesById(next);
		118	}
		119	})
		120	.catch(() => {
		121	if (!cancelled) {
		122	setHighlightedLinesById({});
		123	}
		124	});
		125
		126	return () => {
		127	cancelled = true;
		128	};
		129	}, [selectedLines, selectedTheme, target]);
		130
		131	async function handlePickImages(): Promise<void> {
		132	const result = await pickComposerImages({ existingCount: attachments.length });
		133	if (result.images.length > 0) {
		134	setAttachments((current) => [...current, ...result.images]);
		135	}
		136	if (result.error) {
		137	setPendingConnectionError(result.error);
		138	}
		139	}
58		140
59	return (	141	return (
60	<ScrollView	142	<KeyboardAvoidingView
61	keyboardShouldPersistTaps="handled"	143	behavior={Platform.OS === "ios" ? "padding" : "height"}
62	showsVerticalScrollIndicator={false}	144	keyboardVerticalOffset={Platform.OS === "ios" ? 12 : 0}
63	contentContainerStyle={{	145	style={{ flex: 1 }}
64	paddingHorizontal: 20,
65	paddingTop: 8,
66	paddingBottom: Math.max(insets.bottom, 18) + 18,
67	gap: 16,
68	}}
69	>	146	>
70	<View className="flex-row items-center justify-between py-2">	147	<View
71	<Pressable	148	style={{
72	className="bg-subtle h-12 w-12 items-center justify-center rounded-full"	149	flex: 1,
73	onPress={() => {	150	paddingHorizontal: 20,
74	clearReviewCommentTarget();	151	paddingTop: 8,
75	router.dismiss();	152	paddingBottom: Math.max(insets.bottom, 18) + 18,
76	}}	153	}}
77	>	154	>
78	<SymbolView name="xmark" size={18} tintColor={iconTint} type="monochrome" />	155	<View className="flex-row items-center justify-between py-2">
79	</Pressable>	156	<Pressable
80		157	className="bg-subtle h-12 w-12 items-center justify-center rounded-full"
81	<Text className="text-[18px] font-t3-bold text-foreground">Add Comment</Text>	158	onPress={() => {
82		159	clearReviewCommentTarget();
83	<Pressable	160	router.dismiss();
84	className={cn(	161	}}
85	"min-h-[44px] min-w-[124px] items-center justify-center rounded-full px-5",
86	canSubmit ? "bg-foreground" : "border border-border bg-card",
87	)}
88	disabled={!canSubmit}
89	onPress={() => {
90	if (!target \|\| !environmentId \|\| !threadId \|\| commentText.trim().length === 0) {
91	return;
92	}
93
94	appendReviewCommentToDraft({
95	environmentId,
96	threadId,
97	text: formatReviewCommentContext(target, commentText),
98	});
99	clearReviewCommentTarget();
100	router.dismiss();
101	}}
102	style={{ opacity: canSubmit ? 1 : 0.55 }}
103	>
104	<Text
105	className={cn(
106	"text-[14px] font-t3-bold",
107	canSubmit ? "text-background" : "text-foreground-muted",
108	)}
109	>	162	>
110	Comment	163	<SymbolView name="xmark" size={18} tintColor={iconTint} type="monochrome" />
111	</Text>	164	</Pressable>
112	</Pressable>
113	</View>
114		165
115	{!target ? (	166	<Text className="text-[18px] font-t3-bold text-foreground">Add Comment</Text>
116	<View className="rounded-[22px] border border-border bg-card px-4 py-5">	167
117	<Text className="text-[15px] font-t3-bold text-foreground">No selection</Text>	168	<View className="h-12 w-12" />
118	<Text className="mt-1 text-[13px] leading-[19px] text-foreground-muted">
119	Select a diff line or range first.
120	</Text>
121	</View>	169	</View>
122	) : (	170
123	<>	171	{!target ? (
124	<View className="gap-1 rounded-[22px] border border-border bg-card px-4 py-4">	172	<View className="rounded-[22px] border border-border bg-card px-4 py-5">
125	<Text className="font-mono text-[13px] leading-[18px] text-foreground">	173	<Text className="text-[15px] font-t3-bold text-foreground">No selection</Text>
126	{target.filePath}	174	<Text className="mt-1 text-[13px] leading-[19px] text-foreground-muted">
127	</Text>	175	Select a diff line or range first.
128	<Text className="text-[12px] font-t3-medium text-foreground-muted">
129	{selectedLines.length === 1
130	? firstNumber !== null
131	? `Line ${firstNumber}`
132	: "File comment"
133	: firstNumber !== null && lastNumber !== null
134	? `Lines ${firstNumber}-${lastNumber}`
135	: `${selectedLines.length} lines selected`}
136	</Text>	176	</Text>
137	</View>	177	</View>
		178	) : (
		179	<View className="flex-1 gap-4">
		180	<View className="gap-1 px-1">
		181	<Text className="text-[11px] font-t3-bold uppercase text-foreground-muted">
		182	{selectionLabel}
		183	</Text>
		184	<Text
		185	className="font-mono text-[12px] leading-[17px] text-foreground-muted"
		186	ellipsizeMode="middle"
		187	numberOfLines={2}
		188	>
		189	{target.filePath}
		190	</Text>
		191	</View>
138		192
139	<View className="overflow-hidden rounded-[22px] border border-border bg-card">	193	<View className="overflow-hidden rounded-[22px] border border-border bg-card">
140	{selectedLines.map((line) => {	194	<ScrollView
141	const lineNumber = getReviewUnifiedLineNumber(line);	195	horizontal
142		196	bounces={false}
143	return (	197	keyboardShouldPersistTaps="always"
144	<View	198	showsHorizontalScrollIndicator={false}
145	key={line.id}	199	>
146	className={cn(	200	<ScrollView
147	"flex-row items-start border-b border-border/60",	201	bounces={false}
148	changeTone(line.change),	202	scrollEnabled={selectedLines.length > REVIEW_COMMENT_PREVIEW_MAX_LINES}
149	)}	203	nestedScrollEnabled
		204	keyboardShouldPersistTaps="always"
		205	showsVerticalScrollIndicator={
		206	selectedLines.length > REVIEW_COMMENT_PREVIEW_MAX_LINES
		207	}
		208	style={{ height: previewHeight }}
150	>	209	>
151	<Text className="w-9 px-1 py-2 text-right text-[11px] font-t3-medium text-foreground-muted">	210	<View style={{ minWidth: previewViewportWidth }}>
152	{lineNumber ?? ""}	211	{selectedLines.map((line) => {
153	</Text>	212	const lineNumber = getReviewUnifiedLineNumber(line);
154	<Text	213
155	className="px-0.5 py-2 text-center font-mono text-[12px] text-foreground-muted"	214	return (
156	style={{ width: 18 }}	215	<View
157	>	216	key={line.id}
158	{getReviewChangeMarker(line.change)}	217	className={cn("flex-row items-start", changeTone(line.change))}
159	</Text>	218	style={{ height: REVIEW_COMMENT_LINE_HEIGHT }}
160	<NativeText	219	>
161	selectable	220	<Text className="w-9 px-1 py-1 text-right text-[11px] font-t3-medium text-foreground-muted">
162	className="flex-1 px-1 py-2 text-[12px] leading-[19px] text-foreground"	221	{lineNumber ?? ""}
163	style={{ fontFamily: REVIEW_MONO_FONT_FAMILY }}	222	</Text>
164	>	223	<Text
165	{renderVisibleWhitespace(line.content \|\| " ")}	224	className="px-0.5 py-1 text-center font-mono text-[12px] text-foreground-muted"
166	</NativeText>	225	style={{ width: 18 }}
		226	>
		227	{getReviewChangeMarker(line.change)}
		228	</Text>
		229	<View className="min-w-0 flex-1 flex-shrink-0 px-1 py-1">
		230	<DiffTokenText
		231	fallback={line.content}
		232	tokens={highlightedLinesById[line.id] ?? null}
		233	/>
		234	</View>
		235	</View>
		236	);
		237	})}
		238	</View>
		239	</ScrollView>
		240	</ScrollView>
		241	</View>
		242
		243	<View className="gap-2">
		244	<Text className="text-[13px] font-t3-bold text-foreground">Comment</Text>
		245	<View
		246	className="overflow-hidden rounded-[20px] border border-border bg-card"
		247	style={{ height: 172 }}
		248	>
		249	<View className="flex-1 px-4 pt-3.5">
		250	<TextInputWrapper onPaste={handleNativePaste}>
		251	<TextInput
		252	autoFocus
		253	multiline
		254	placeholder="Leave a comment..."
		255	textAlignVertical="top"
		256	value={commentText}
		257	onChangeText={setCommentText}
		258	className="flex-1 border-0 bg-transparent px-0 py-0 font-sans text-[15px]"
		259	/>
		260	</TextInputWrapper>
167	</View>	261	</View>
168	);	262	{attachments.length > 0 ? (
169	})}	263	<View className="px-4 pb-3 pt-2">
170	</View>	264	<ComposerAttachmentStrip
		265	attachments={attachments}
		266	imageBorderRadius={16}
		267	imageSize={60}
		268	onPressImage={setPreviewImageUri}
		269	removeButtonPlacement="gutter"
		270	onRemove={(imageId) => {
		271	setAttachments((current) =>
		272	current.filter((image) => image.id !== imageId),
		273	);
		274	}}
		275	/>
		276	</View>
		277	) : null}
		278	</View>
		279	</View>
171		280
172	<View className="gap-2">	281	<View className="flex-row items-center gap-3 pt-1">
173	<Text className="text-[13px] font-t3-bold text-foreground">Comment</Text>	282	<ControlPill icon="plus" onPress={() => void handlePickImages()} />
174	<TextInput	283	<View className="flex-1" />
175	autoFocus	284	<ControlPill
176	multiline	285	icon="arrow.up"
177	placeholder="Leave a comment..."	286	label="Comment"
178	textAlignVertical="top"	287	variant="primary"
179	value={commentText}	288	disabled={!canSubmit}
180	onChangeText={setCommentText}	289	onPress={() => {
181	className="min-h-[192px] rounded-[20px] px-4 py-3.5 font-sans text-[15px]"	290	if (!target \|\| !environmentId \|\| !threadId \|\| commentText.trim().length === 0) {
182	/>	291	return;
		292	}
		293
		294	appendReviewCommentToDraft({
		295	environmentId,
		296	threadId,
		297	text: formatReviewCommentContext(target, commentText),
		298	attachments,
		299	});
		300	setAttachments([]);
		301	clearReviewCommentTarget();
		302	router.dismiss();
		303	}}
		304	/>
		305	</View>
183	</View>	306	</View>
184	</>	307	)}
185	)}	308	</View>
186	</ScrollView>	309	<ImageViewing
		310	images={previewImageUri ? [{ uri: previewImageUri }] : []}
		311	imageIndex={0}
		312	visible={previewImageUri !== null}
		313	onRequestClose={() => setPreviewImageUri(null)}
		314	swipeToCloseEnabled
		315	doubleTapToZoomEnabled
		316	/>
		317	</KeyboardAvoidingView>
187	);	318	);
188	}	319	}

apps/mobile/src/features/threads/review/ReviewSheet.tsx+544−410

-import {
+import { ThreadId, type OrchestrationCheckpointSummary } from "@t3tools/contracts";
-  ThreadId,
+import { LegendList } from "@legendapp/list/react-native";
-  type GitReviewDiffSection,
-  type OrchestrationCheckpointSummary,
-} from "@t3tools/contracts";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import Stack from "expo-router/stack";
 import { SymbolView } from "expo-symbols";
-import { type ReactElement, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, type ReactElement, useCallback, useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
-  Platform,
   Pressable,
   ScrollView,
   Text as NativeText,
 import { getEnvironmentClient } from "../../../state/use-remote-environment-registry";
 import { useSelectedThreadDetail } from "../../../state/use-thread-detail";
 import { useThreadSelection } from "../../../state/use-thread-selection";
+import { useThreadDraftForThread } from "../use-thread-composer-state";
+import {
+  getCachedReviewParsedDiff,
+  setReviewGitSections,
+  setReviewSelectedSectionId,
+  setReviewTurnDiff,
+  updateReviewExpandedFileIds,
+  updateReviewRevealedLargeFileIds,
+  useReviewCacheForThread,
+} from "./reviewState";
 import {
-  buildReviewParsedDiff,
   getReadyReviewCheckpoints,
   buildReviewSectionItems,
   getDefaultReviewSectionId,
+  getReviewFilePreviewState,
   getReviewSectionIdForCheckpoint,
+  type ReviewParsedDiff,
   type ReviewRenderableFile,
   type ReviewRenderableLineRow,
 } from "./reviewModel";
 import {
+  getCachedHighlightedReviewFile,
   highlightReviewFile,
   type ReviewDiffTheme,
   type ReviewHighlightedFile,
 import {
   buildReviewCommentTarget,
   clearReviewCommentTarget,
+  countReviewCommentContexts,
   formatReviewSelectedRangeLabel,
   getReviewChangeMarker,
   getReviewUnifiedLineNumber,
   type ReviewCommentTarget,
   useReviewCommentTarget,
 } from "./reviewCommentSelection";
+import { changeTone, DiffTokenText } from "./reviewDiffRendering";
 interface PendingCommentSelection {
   readonly sectionTitle: string;
   readonly anchorIndex: number;
 }
-const REVIEW_MONO_FONT_FAMILY = Platform.select({
+interface ReviewLineActionInput {
-  ios: "ui-monospace",
+  readonly sectionTitle: string;
-  android: "monospace",
+  readonly filePath: string;
-  default: "monospace",
+  readonly lines: ReadonlyArray<ReviewRenderableLineRow>;
-});
+  readonly lineIndex: number;
+}
 const IOS_NAV_BAR_HEIGHT = 44;
 const REVIEW_HEADER_SPACING = 32;
-function changeTone(change: ReviewRenderableLineRow["change"]): string {
-  if (change === "add") return "bg-emerald-500/12";
-  if (change === "delete") return "bg-rose-500/12";
-  return "bg-card";
-}
 function changeTypeLabel(type: ReviewRenderableFile["changeType"]): string {
   switch (type) {
     case "new":
   }
 }
-function formatHeaderDiffSummary(parsedDiff: ReturnType<typeof buildReviewParsedDiff>): {
+function formatHeaderDiffSummary(parsedDiff: ReviewParsedDiff): {
   readonly additions: string | null;
   readonly deletions: string | null;
 } {
   };
 }
-function shouldAutoExpandFile(file: ReviewRenderableFile): boolean {
-  return file.additions + file.deletions <= 20 && file.rows.length <= 40;
-}
 function getDefaultExpandedFileIds(
   files: ReadonlyArray<ReviewRenderableFile>,
 ): ReadonlyArray<string> {
-  const autoExpanded = files.filter(shouldAutoExpandFile).map((file) => file.id);
+  return files.map((file) => file.id);
-  if (autoExpanded.length > 0) {
-    return autoExpanded;
-  }
-  return files.length === 1 ? [files[0]!.id] : [];
-}
-function renderVisibleWhitespace(value: string): string {
-  const expandedTabs = value.replace(/\t/g, "    ");
-  return expandedTabs.replace(/^( +)/, (leading) => leading.replaceAll(" ", "\u00A0"));
-}
-function DiffTokenText(props: {
-  readonly tokens: ReadonlyArray<ReviewHighlightedToken> | null;
-  readonly fallback: string;
-}) {
-  if (!props.tokens || props.tokens.length === 0) {
-    return (
-      <NativeText
-        selectable
-        className="text-[12px] leading-[19px] text-foreground"
-        style={{ fontFamily: REVIEW_MONO_FONT_FAMILY }}
-      >
-        {renderVisibleWhitespace(props.fallback || " ")}
-      </NativeText>
-    );
-  }
-  return (
-    <NativeText
-      selectable
-      className="text-[12px] leading-[19px] text-foreground"
-      style={{ fontFamily: REVIEW_MONO_FONT_FAMILY }}
-    >
-      {(() => {
-        let offset = 0;
-        return props.tokens.map((token) => {
-          const start = offset;
-          offset += token.content.length;
-          const fontWeight =
-            token.fontStyle !== null && (token.fontStyle & 2) === 2
-              ? ("700" as const)
-              : ("400" as const);
-          const fontStyle =
-            token.fontStyle !== null && (token.fontStyle & 1) === 1
-              ? ("italic" as const)
-              : ("normal" as const);
-          return (
-            <NativeText
-              key={`${start}:${token.content.length}:${token.color ?? ""}:${token.fontStyle ?? ""}`}
-              selectable
-              style={{
-                color: token.color ?? undefined,
-                fontFamily: REVIEW_MONO_FONT_FAMILY,
-                fontWeight,
-                fontStyle,
-              }}
-            >
-              {token.content.length > 0 ? renderVisibleWhitespace(token.content) : " "}
-            </NativeText>
-          );
-        });
-      })()}
-    </NativeText>
-  );
 }
-function ReviewLineRow(props: {
+const ReviewLineRow = memo(function ReviewLineRow(props: {
   readonly line: ReviewRenderableLineRow;
   readonly tokens: ReadonlyArray<ReviewHighlightedToken> | null;
   readonly viewportWidth: number;
   return (
     <Pressable
       className={cn(
-        "flex-row items-start border-b border-border/60",
+        "flex-row items-start",
         changeTone(props.line.change),
         props.selectionState === "anchor" && "bg-sky-500/16",
         props.selectionState === "selected" && "bg-amber-300/28",
       onPress={props.onComment}
       style={{ minWidth: props.viewportWidth }}
     >
-      <Text className="w-9 px-1 py-2 text-right text-[11px] font-t3-medium text-foreground-muted">
+      <Text className="w-9 px-1 py-1 text-right text-[11px] font-t3-medium text-foreground-muted">
         {lineNumber ?? ""}
       </Text>
       <Text
-        className="px-0.5 py-2 text-center font-mono text-[12px] text-foreground-muted"
+        className="px-0.5 py-1 text-center font-mono text-[12px] text-foreground-muted"
         style={{ width: 18 }}
       >
         {getReviewChangeMarker(props.line.change)}
       </Text>
-      <View className="min-w-0 flex-1 flex-shrink-0 px-1 py-2">
+      <View className="min-w-0 flex-1 flex-shrink-0 px-1 py-1">
         <DiffTokenText tokens={props.tokens} fallback={props.line.content} />
       </View>
     </Pressable>
   );
-}
+});
-function ReviewFileCard(props: {
+const ReviewFileCard = memo(function ReviewFileCard(props: {
   readonly file: ReviewRenderableFile;
+  readonly fileId: string;
   readonly expanded: boolean;
-  readonly onToggle: () => void;
+  readonly onToggleFile: (fileId: string) => void;
 }) {
   return (
     <View className="border-b border-border bg-card" style={{ zIndex: 1 }}>
-      <Pressable className="flex-row items-start gap-2 px-3 py-3" onPress={props.onToggle}>
+      <Pressable
+        className="flex-row items-start gap-2 px-3 py-3"
+        onPress={() => props.onToggleFile(props.fileId)}
+      >
         <View className="pt-0.5">
           <SymbolView
             name={props.expanded ? "chevron.down" : "chevron.right"}
       </Pressable>
     </View>
   );
-}
+});
-function ReviewFileBody(props: {
+const ReviewFileBody = memo(function ReviewFileBody(props: {
   readonly file: ReviewRenderableFile;
   readonly sectionTitle: string;
   readonly highlightedFile: ReviewHighlightedFile | null;
   readonly viewportWidth: number;
   readonly pendingSelection: PendingCommentSelection | null;
   readonly selectedTarget: ReviewCommentTarget | null;
-  readonly onPressLine: (
+  readonly onPressLine: (input: ReviewLineActionInput) => void;
-    line: ReviewRenderableLineRow,
+  readonly onStartRangeSelection: (input: ReviewLineActionInput) => void;
-    availableLines: ReadonlyArray<ReviewRenderableLineRow>,
-    lineIndex: number,
-  ) => void;
-  readonly onStartRangeSelection: (
-    line: ReviewRenderableLineRow,
-    availableLines: ReadonlyArray<ReviewRenderableLineRow>,
-    lineIndex: number,
-  ) => void;
 }) {
-  const commentableLines = props.file.rows.filter(
+  const commentableLines = useMemo(
-    (row): row is ReviewRenderableLineRow => row.kind === "line",
+    () => props.file.rows.filter((row): row is ReviewRenderableLineRow => row.kind === "line"),
+    [props.file.rows],
+  );
+  const lineIndexById = useMemo(
+    () => new Map(commentableLines.map((line, index) => [line.id, index])),
+    [commentableLines],
+  );
+  const anchorLineId = useMemo(
+    () =>
+      props.pendingSelection &&
+      props.pendingSelection.sectionTitle === props.sectionTitle &&
+      props.pendingSelection.filePath === props.file.path
+        ? (props.pendingSelection.lines[props.pendingSelection.anchorIndex]?.id ?? null)
+        : null,
+    [props.file.path, props.pendingSelection, props.sectionTitle],
+  );
+  const selectedLineIds = useMemo(
+    () =>
+      props.selectedTarget &&
+      props.selectedTarget.sectionTitle === props.sectionTitle &&
+      props.selectedTarget.filePath === props.file.path
+        ? new Set(getSelectedReviewCommentLines(props.selectedTarget).map((line) => line.id))
+        : null,
+    [props.file.path, props.sectionTitle, props.selectedTarget],
   );
-  const anchorLineId =
-    props.pendingSelection &&
-    props.pendingSelection.sectionTitle === props.sectionTitle &&
-    props.pendingSelection.filePath === props.file.path
-      ? (props.pendingSelection.lines[props.pendingSelection.anchorIndex]?.id ?? null)
-      : null;
-  const selectedLineIds =
-    props.selectedTarget &&
-    props.selectedTarget.sectionTitle === props.sectionTitle &&
-    props.selectedTarget.filePath === props.file.path
-      ? new Set(getSelectedReviewCommentLines(props.selectedTarget).map((line) => line.id))
-      : null;
   return (
     <ScrollView
                     : null
               }
               onComment={() => {
-                const lineIndex = commentableLines.findIndex(
+                props.onPressLine({
-                  (candidate) => candidate.id === row.id,
+                  sectionTitle: props.sectionTitle,
-                );
+                  filePath: props.file.path,
-                props.onPressLine(row, commentableLines, lineIndex >= 0 ? lineIndex : 0);
+                  lines: commentableLines,
+                  lineIndex: lineIndexById.get(row.id) ?? 0,
+                });
               }}
               onStartRangeSelection={() => {
-                const lineIndex = commentableLines.findIndex(
+                props.onStartRangeSelection({
-                  (candidate) => candidate.id === row.id,
+                  sectionTitle: props.sectionTitle,
-                );
+                  filePath: props.file.path,
-                props.onStartRangeSelection(row, commentableLines, lineIndex >= 0 ? lineIndex : 0);
+                  lines: commentableLines,
+                  lineIndex: lineIndexById.get(row.id) ?? 0,
+                });
               }}
             />
           );
       </View>
     </ScrollView>
   );
-}
+});
+const ReviewFileSuppressedBody = memo(function ReviewFileSuppressedBody(props: {
+  readonly message: string;
+  readonly actionLabel?: string | null;
+  readonly fileId: string;
+  readonly onLoadDiffFile?: (fileId: string) => void;
+}) {
+  return (
+    <View className="gap-2 border-b border-border bg-card px-4 py-3">
+      <Text className="text-[12px] leading-[18px] text-foreground-muted">{props.message}</Text>
+      {props.actionLabel && props.onLoadDiffFile ? (
+        <Pressable
+          className="self-start rounded-full bg-subtle px-3 py-2"
+          onPress={() => props.onLoadDiffFile?.(props.fileId)}
+        >
+          <Text className="text-[12px] font-t3-bold text-foreground">{props.actionLabel}</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+});
+const ReviewFileItem = memo(function ReviewFileItem(props: {
+  readonly file: ReviewRenderableFile;
+  readonly expanded: boolean;
+  readonly sectionTitle: string;
+  readonly selectedTheme: ReviewDiffTheme;
+  readonly pendingSelection: PendingCommentSelection | null;
+  readonly selectedTarget: ReviewCommentTarget | null;
+  readonly viewportWidth: number;
+  readonly revealedLarge: boolean;
+  readonly onToggleFile: (fileId: string) => void;
+  readonly onLoadDiffFile: (fileId: string) => void;
+  readonly onPressLine: (input: ReviewLineActionInput) => void;
+  readonly onStartRangeSelection: (input: ReviewLineActionInput) => void;
+}) {
+  const previewState = useMemo(() => getReviewFilePreviewState(props.file), [props.file]);
+  const shouldRenderBody =
+    previewState.kind === "render" || (previewState.reason === "large" && props.revealedLarge);
+  const highlightCacheKey = `${props.selectedTheme}:${props.file.cacheKey}`;
+  const [highlightedFile, setHighlightedFile] = useState<ReviewHighlightedFile | null>(() =>
+    getCachedHighlightedReviewFile(props.file, props.selectedTheme),
+  );
+  useEffect(() => {
+    setHighlightedFile(getCachedHighlightedReviewFile(props.file, props.selectedTheme));
+  }, [highlightCacheKey, props.file, props.selectedTheme]);
+  useEffect(() => {
+    if (!props.expanded || !shouldRenderBody) {
+      return;
+    }
+    const cached = getCachedHighlightedReviewFile(props.file, props.selectedTheme);
+    if (cached) {
+      setHighlightedFile(cached);
+      return;
+    }
+    let cancelled = false;
+    void highlightReviewFile(props.file, props.selectedTheme)
+      .then((result) => {
+        if (!cancelled) {
+          setHighlightedFile(result);
+        }
+      })
+      .catch(() => {
+        if (cancelled) {
+          return;
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [highlightCacheKey, props.expanded, props.file, props.selectedTheme, shouldRenderBody]);
+  return (
+    <>
+      <ReviewFileCard
+        file={props.file}
+        fileId={props.file.id}
+        expanded={props.expanded}
+        onToggleFile={props.onToggleFile}
+      />
+      {props.expanded ? (
+        shouldRenderBody ? (
+          <ReviewFileBody
+            file={props.file}
+            sectionTitle={props.sectionTitle}
+            highlightedFile={highlightedFile}
+            pendingSelection={props.pendingSelection}
+            selectedTarget={props.selectedTarget}
+            viewportWidth={props.viewportWidth}
+            onPressLine={props.onPressLine}
+            onStartRangeSelection={props.onStartRangeSelection}
+          />
+        ) : (
+          <ReviewFileSuppressedBody
+            message={previewState.message}
+            actionLabel={previewState.actionLabel}
+            fileId={props.file.id}
+            onLoadDiffFile={previewState.actionLabel ? props.onLoadDiffFile : undefined}
+          />
+        )
+      ) : null}
+    </>
+  );
+});
+const ReviewNotice = memo(function ReviewNotice(props: { readonly notice: string }) {
+  return (
+    <View className="border-b border-amber-200 bg-amber-50 px-4 py-3 dark:border-amber-900/60 dark:bg-amber-950/40">
+      <Text className="text-[12px] font-t3-bold uppercase text-amber-700 dark:text-amber-300">
+        Partial diff
+      </Text>
+      <Text className="text-[12px] leading-[18px] text-amber-800 dark:text-amber-200">
+        {props.notice}
+      </Text>
+    </View>
+  );
+});
 function ReviewSelectionActionBar(props: {
   readonly target: ReviewCommentTarget | null;
     environmentId: string;
     threadId: string;
   }>();
+  const { draftMessage } = useThreadDraftForThread({ environmentId, threadId });
+  const reviewCache = useReviewCacheForThread({ environmentId, threadId });
   const { selectedThreadProject } = useThreadSelection();
   const selectedThread = useSelectedThreadDetail();
-  const [gitSections, setGitSections] = useState<ReadonlyArray<GitReviewDiffSection>>([]);
-  const [turnDiffById, setTurnDiffById] = useState<Record<string, string>>({});
   const [loadingTurnIds, setLoadingTurnIds] = useState<Record<string, boolean>>({});
-  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(null);
   const [loadingGitDiffs, setLoadingGitDiffs] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [expandedFileIdsBySection, setExpandedFileIdsBySection] = useState<
-    Record<string, ReadonlyArray<string> | undefined>
-  >({});
-  const [highlightedFileByKey, setHighlightedFileByKey] = useState<
-    Record<string, ReviewHighlightedFile>
-  >({});
   const [pendingCommentSelection, setPendingCommentSelection] =
     useState<PendingCommentSelection | null>(null);
   const activeCommentTarget = useReviewCommentTarget();
     () =>
       buildReviewSectionItems({
         checkpoints: readyCheckpoints,
-        gitSections,
+        gitSections: reviewCache.gitSections,
-        turnDiffById,
+        turnDiffById: reviewCache.turnDiffById,
         loadingTurnIds,
       }),
-    [gitSections, loadingTurnIds, readyCheckpoints, turnDiffById],
+    [loadingTurnIds, readyCheckpoints, reviewCache.gitSections, reviewCache.turnDiffById],
   );
   const selectedSection =
-    reviewSections.find((section) => section.id === selectedSectionId) ?? reviewSections[0] ?? null;
+    reviewSections.find((section) => section.id === reviewCache.selectedSectionId) ??
+    reviewSections[0] ??
+    null;
   const topContentInset = insets.top + IOS_NAV_BAR_HEIGHT;
   const parsedDiff = useMemo(
-    () => buildReviewParsedDiff(selectedSection?.diff, selectedSection?.id ?? "mobile-review"),
+    () =>
-    [selectedSection?.diff, selectedSection?.id],
+      getCachedReviewParsedDiff({
+        threadKey: reviewCache.threadKey,
+        sectionId: selectedSection?.id ?? null,
+        diff: selectedSection?.diff,
+      }),
+    [reviewCache.threadKey, selectedSection?.diff, selectedSection?.id],
   );
   const headerDiffSummary = useMemo(() => formatHeaderDiffSummary(parsedDiff), [parsedDiff]);
+  const pendingReviewCommentCount = useMemo(
+    () => countReviewCommentContexts(draftMessage),
+    [draftMessage],
+  );
   const selectedTheme = (colorScheme === "dark" ? "dark" : "light") satisfies ReviewDiffTheme;
   const expandedFileIds = useMemo(
     () =>
       selectedSection?.id && parsedDiff.kind === "files"
-        ? (expandedFileIdsBySection[selectedSection.id] ??
+        ? (reviewCache.expandedFileIdsBySection[selectedSection.id] ??
           getDefaultExpandedFileIds(parsedDiff.files))
         : [],
-    [expandedFileIdsBySection, parsedDiff, selectedSection?.id],
+    [parsedDiff, reviewCache.expandedFileIdsBySection, selectedSection?.id],
   );
-  const expandedFiles = useMemo(
+  const revealedLargeFileIds = useMemo(
     () =>
-      parsedDiff.kind === "files"
+      selectedSection?.id
-        ? parsedDiff.files.filter((file) => expandedFileIds.includes(file.id))
+        ? (reviewCache.revealedLargeFileIdsBySection[selectedSection.id] ?? [])
         : [],
-    [expandedFileIds, parsedDiff],
+    [reviewCache.revealedLargeFileIdsBySection, selectedSection?.id],
   );
   const loadGitDiffs = useCallback(async () => {
     if (!environmentId || !cwd) {
       return;
     setError(null);
     try {
       const result = await client.git.getReviewDiffs({ cwd });
-      setGitSections(result.sections);
+      if (reviewCache.threadKey) {
+        setReviewGitSections(reviewCache.threadKey, result.sections);
+      }
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : "Failed to load review diffs.");
     } finally {
       setLoadingGitDiffs(false);
     }
-  }, [cwd, environmentId]);
+  }, [cwd, environmentId, reviewCache.threadKey]);
   const loadTurnDiff = useCallback(
     async (checkpoint: OrchestrationCheckpointSummary, force = false) => {
       }
       const sectionId = getReviewSectionIdForCheckpoint(checkpoint);
-      setSelectedSectionId(sectionId);
+      if (reviewCache.threadKey) {
+        setReviewSelectedSectionId(reviewCache.threadKey, sectionId);
+      }
-      if (!force && turnDiffById[sectionId] !== undefined) {
+      if (!force && reviewCache.turnDiffById[sectionId] !== undefined) {
         return;
       }
           fromTurnCount: Math.max(0, checkpoint.checkpointTurnCount - 1),
           toTurnCount: checkpoint.checkpointTurnCount,
         });
-        setTurnDiffById((current) => ({ ...current, [sectionId]: result.diff }));
+        if (reviewCache.threadKey) {
+          setReviewTurnDiff(reviewCache.threadKey, sectionId, result.diff);
+        }
       } catch (cause) {
         setError(cause instanceof Error ? cause.message : "Failed to load turn diff.");
       } finally {
         });
       }
     },
-    [environmentId, threadId, turnDiffById],
+    [environmentId, reviewCache.threadKey, reviewCache.turnDiffById, threadId],
   );
   useEffect(() => {
     }
     const fallbackId = getDefaultReviewSectionId(reviewSections);
-    if (!selectedSectionId || !reviewSections.some((section) => section.id === selectedSectionId)) {
+    if (
-      setSelectedSectionId(fallbackId);
+      reviewCache.threadKey &&
+      (!reviewCache.selectedSectionId ||
+        !reviewSections.some((section) => section.id === reviewCache.selectedSectionId))
+    ) {
+      setReviewSelectedSectionId(reviewCache.threadKey, fallbackId);
     }
-  }, [reviewSections, selectedSectionId]);
+  }, [reviewCache.selectedSectionId, reviewCache.threadKey, reviewSections]);
   useEffect(() => {
     const latest = readyCheckpoints[0];
     }
     const latestId = getReviewSectionIdForCheckpoint(latest);
-    if (turnDiffById[latestId] !== undefined || loadingTurnIds[latestId]) {
+    if (reviewCache.turnDiffById[latestId] !== undefined || loadingTurnIds[latestId]) {
       return;
     }
     void loadTurnDiff(latest);
-  }, [loadTurnDiff, loadingTurnIds, readyCheckpoints, turnDiffById]);
+  }, [loadTurnDiff, loadingTurnIds, readyCheckpoints, reviewCache.turnDiffById]);
   useEffect(() => {
     if (!selectedSection || selectedSection.kind !== "turn" || selectedSection.diff !== null) {
   }, [checkpointBySectionId, loadTurnDiff, loadingTurnIds, selectedSection]);
   useEffect(() => {
-    if (!selectedSectionId || parsedDiff.kind !== "files") {
+    if (!reviewCache.threadKey || !selectedSection?.id || parsedDiff.kind !== "files") {
       return;
     }
-    setExpandedFileIdsBySection((current) => {
+    updateReviewExpandedFileIds(reviewCache.threadKey, selectedSection.id, (existing) => {
-      const existing = current[selectedSectionId];
       if (existing !== undefined) {
         const validIds = existing.filter((id) => parsedDiff.files.some((file) => file.id === id));
         if (validIds.length === existing.length) {
-          return current;
+          return existing;
         }
-        return { ...current, [selectedSectionId]: validIds };
+        return validIds;
       }
-      return {
+      return getDefaultExpandedFileIds(parsedDiff.files);
-        ...current,
-        [selectedSectionId]: getDefaultExpandedFileIds(parsedDiff.files),
-      };
     });
-  }, [parsedDiff, selectedSectionId]);
+  }, [parsedDiff, reviewCache.threadKey, selectedSection?.id]);
   useEffect(() => {
-    if (!selectedSection || expandedFiles.length === 0) {
+    if (!reviewCache.threadKey || !selectedSection?.id || parsedDiff.kind !== "files") {
       return;
     }
-    const filesToHighlight = expandedFiles.filter((file) => {
+    updateReviewRevealedLargeFileIds(reviewCache.threadKey, selectedSection.id, (existing) => {
-      const key = `${selectedSection.id}:${selectedTheme}:${file.cacheKey}`;
+      if (existing === undefined) {
-      return highlightedFileByKey[key] === undefined;
+        return undefined;
-    });
+      }
-    if (filesToHighlight.length === 0) {
-      return;
-    }
-    let cancelled = false;
+      const validIds = existing.filter((id) => parsedDiff.files.some((file) => file.id === id));
-    void Promise.all(
+      if (validIds.length === existing.length) {
-      filesToHighlight.map(
+        return existing;
-        async (file) =>
+      }
-          [
-            `${selectedSection.id}:${selectedTheme}:${file.cacheKey}`,
-            await highlightReviewFile(file, selectedTheme),
-          ] as const,
-      ),
-    )
-      .then((entries) => {
-        if (!cancelled) {
-          setHighlightedFileByKey((current) => ({
-            ...current,
-            ...Object.fromEntries(entries),
-          }));
-        }
-      })
-      .catch(() => {
-        if (cancelled) {
-          return;
-        }
-      });
-    return () => {
+      return validIds;
-      cancelled = true;
+    });
-    };
+  }, [parsedDiff, reviewCache.threadKey, selectedSection?.id]);
-  }, [expandedFiles, highlightedFileByKey, selectedSection, selectedTheme]);
   const refreshSelectedSection = useCallback(async () => {
     if (!selectedSection) {
     await loadGitDiffs();
   }, [checkpointBySectionId, loadGitDiffs, loadTurnDiff, selectedSection]);
-  const reviewContent = useMemo(() => {
+  const handleToggleExpandedFile = useCallback(
+    (fileId: string) => {
+      if (!reviewCache.threadKey || !selectedSection?.id || parsedDiff.kind !== "files") {
+        return;
+      }
+      updateReviewExpandedFileIds(reviewCache.threadKey, selectedSection.id, (existing) => {
+        const currentIds = existing ?? getDefaultExpandedFileIds(parsedDiff.files);
+        return currentIds.includes(fileId)
+          ? currentIds.filter((id) => id !== fileId)
+          : [...currentIds, fileId];
+      });
+    },
+    [parsedDiff, reviewCache.threadKey, selectedSection?.id],
+  );
+  const handleRevealLargeDiff = useCallback(
+    (fileId: string) => {
+      if (!reviewCache.threadKey || !selectedSection?.id) {
+        return;
+      }
+      updateReviewRevealedLargeFileIds(reviewCache.threadKey, selectedSection.id, (existing) => {
+        const currentIds = existing ?? [];
+        return currentIds.includes(fileId) ? currentIds : [...currentIds, fileId];
+      });
+    },
+    [reviewCache.threadKey, selectedSection?.id],
+  );
+  const handlePressLine = useCallback(
+    (input: ReviewLineActionInput) => {
+      if (pendingCommentSelection) {
+        if (
+          pendingCommentSelection.sectionTitle === input.sectionTitle &&
+          pendingCommentSelection.filePath === input.filePath
+        ) {
+          setReviewCommentTarget(
+            buildReviewCommentTarget(
+              {
+                sectionTitle: pendingCommentSelection.sectionTitle,
+                filePath: pendingCommentSelection.filePath,
+                lines: pendingCommentSelection.lines,
+              },
+              pendingCommentSelection.anchorIndex,
+              input.lineIndex,
+            ),
+          );
+          setPendingCommentSelection(null);
+          return;
+        }
+        clearReviewCommentTarget();
+        setPendingCommentSelection({
+          sectionTitle: input.sectionTitle,
+          filePath: input.filePath,
+          lines: input.lines,
+          anchorIndex: input.lineIndex,
+        });
+        return;
+      }
+      setReviewCommentTarget({
+        sectionTitle: input.sectionTitle,
+        filePath: input.filePath,
+        lines: input.lines,
+        startIndex: input.lineIndex,
+        endIndex: input.lineIndex,
+      });
+      if (environmentId && threadId) {
+        router.push({
+          pathname: "/threads/[environmentId]/[threadId]/review-comment",
+          params: { environmentId, threadId },
+        });
+      }
+    },
+    [environmentId, pendingCommentSelection, router, threadId],
+  );
+  const handleStartRangeSelection = useCallback((input: ReviewLineActionInput) => {
+    clearReviewCommentTarget();
+    setPendingCommentSelection({
+      sectionTitle: input.sectionTitle,
+      filePath: input.filePath,
+      lines: input.lines,
+      anchorIndex: input.lineIndex,
+    });
+  }, []);
+  const parsedDiffNotice =
+    parsedDiff.kind === "files" || parsedDiff.kind === "raw" ? parsedDiff.notice : null;
+  const listHeader = useMemo(() => {
     const children: ReactElement[] = [];
-    const stickyHeaderIndices: number[] = [];
     if (error) {
       children.push(
       );
     }
-    if (parsedDiff.kind !== "empty" && parsedDiff.notice) {
+    if (parsedDiffNotice) {
-      children.push(
+      children.push(<ReviewNotice key="review-notice" notice={parsedDiffNotice} />);
-        <View
-          key="review-notice"
-          className="border-b border-amber-200 bg-amber-50 px-4 py-3 dark:border-amber-900/60 dark:bg-amber-950/40"
-        >
-          <Text className="text-[12px] font-t3-bold uppercase text-amber-700 dark:text-amber-300">
-            Partial diff
-          </Text>
-          <Text className="text-[12px] leading-[18px] text-amber-800 dark:text-amber-200">
-            {parsedDiff.notice}
-          </Text>
-        </View>,
-      );
-    }
-    if (!selectedSection) {
-      children.push(
-        <View key="review-empty-state" className="border-b border-border bg-card px-4 py-5">
-          <Text className="text-[14px] font-t3-bold text-foreground">No review diffs</Text>
-          <Text className="text-[12px] leading-[18px] text-foreground-muted">
-            This thread has no ready turn diffs and the worktree diff is empty.
-          </Text>
-        </View>,
-      );
-      return { children, stickyHeaderIndices };
     }
-    if (selectedSection.isLoading && selectedSection.diff === null) {
+    if (children.length === 0) {
-      children.push(
+      return null;
-        <View
-          key="review-loading"
-          className="items-center gap-3 border-b border-border bg-card px-4 py-6"
-        >
-          <ActivityIndicator size="small" />
-          <Text className="text-[12px] text-foreground-muted">Loading diff…</Text>
-        </View>,
-      );
-      return { children, stickyHeaderIndices };
     }
-    if (parsedDiff.kind === "empty") {
+    return <>{children}</>;
-      children.push(
+  }, [error, parsedDiffNotice]);
-        <View key="review-no-changes" className="border-b border-border bg-card px-4 py-5">
-          <Text className="text-[14px] font-t3-bold text-foreground">No changes</Text>
-          <Text className="text-[12px] leading-[18px] text-foreground-muted">
-            {selectedSection.subtitle ?? "This diff is empty."}
-          </Text>
-        </View>,
-      );
-      return { children, stickyHeaderIndices };
-    }
-    if (parsedDiff.kind === "raw") {
+  const renderFileItem = useCallback(
-      children.push(
+    ({ item }: { item: ReviewRenderableFile; index: number }) => {
-        <View key="review-raw" className="gap-3 border-b border-border bg-card px-4 py-4">
+      if (!selectedSection) {
-          <Text className="text-[12px] leading-[18px] text-foreground-muted">
+        return null;
-            {parsedDiff.reason}
-          </Text>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} bounces={false}>
-            <Text selectable className="font-mono text-[12px] leading-[19px] text-foreground">
-              {parsedDiff.text}
-            </Text>
-          </ScrollView>
-        </View>,
-      );
-      return { children, stickyHeaderIndices };
-    }
-    parsedDiff.files.forEach((file) => {
-      const isExpanded = expandedFileIds.includes(file.id);
-      const fileHighlightKey = `${selectedSection.id}:${selectedTheme}:${file.cacheKey}`;
-      const fileHighlights = highlightedFileByKey[fileHighlightKey] ?? null;
-      stickyHeaderIndices.push(children.length);
-      children.push(
-        <ReviewFileCard
-          key={`review-file-header:${file.id}`}
-          file={file}
-          expanded={isExpanded}
-          onToggle={() =>
-            setExpandedFileIdsBySection((current) => {
-              const existing =
-                current[selectedSection.id] ?? getDefaultExpandedFileIds(parsedDiff.files);
-              const next = existing.includes(file.id)
-                ? existing.filter((id) => id !== file.id)
-                : [...existing, file.id];
-              return {
-                ...current,
-                [selectedSection.id]: next,
-              };
-            })
-          }
-        />,
-      );
-      if (isExpanded) {
-        children.push(
-          <ReviewFileBody
-            key={`review-file-body:${file.id}`}
-            file={file}
-            sectionTitle={selectedSection.title}
-            highlightedFile={fileHighlights}
-            pendingSelection={pendingCommentSelection}
-            selectedTarget={activeCommentTarget}
-            viewportWidth={Math.max(width, 280)}
-            onPressLine={(_line, availableLines, lineIndex) => {
-              if (pendingCommentSelection) {
-                if (
-                  pendingCommentSelection.sectionTitle === selectedSection.title &&
-                  pendingCommentSelection.filePath === file.path
-                ) {
-                  setReviewCommentTarget(
-                    buildReviewCommentTarget(
-                      {
-                        sectionTitle: pendingCommentSelection.sectionTitle,
-                        filePath: pendingCommentSelection.filePath,
-                        lines: pendingCommentSelection.lines,
-                      },
-                      pendingCommentSelection.anchorIndex,
-                      lineIndex,
-                    ),
-                  );
-                  setPendingCommentSelection(null);
-                  return;
-                }
-                clearReviewCommentTarget();
-                setPendingCommentSelection({
-                  sectionTitle: selectedSection.title,
-                  filePath: file.path,
-                  lines: availableLines,
-                  anchorIndex: lineIndex,
-                });
-                return;
-              }
-              setReviewCommentTarget({
-                sectionTitle: selectedSection.title,
-                filePath: file.path,
-                lines: availableLines,
-                startIndex: lineIndex,
-                endIndex: lineIndex,
-              });
-              if (environmentId && threadId) {
-                router.push({
-                  pathname: "/threads/[environmentId]/[threadId]/review-comment",
-                  params: { environmentId, threadId },
-                });
-              }
-            }}
-            onStartRangeSelection={(_line, availableLines, lineIndex) => {
-              clearReviewCommentTarget();
-              setPendingCommentSelection({
-                sectionTitle: selectedSection.title,
-                filePath: file.path,
-                lines: availableLines,
-                anchorIndex: lineIndex,
-              });
-            }}
-          />,
-        );
       }
-    });
+      const pendingSelectionForFile =
+        pendingCommentSelection &&
+        pendingCommentSelection.sectionTitle === selectedSection.title &&
+        pendingCommentSelection.filePath === item.path
+          ? pendingCommentSelection
+          : null;
+      const selectedTargetForFile =
+        activeCommentTarget &&
+        activeCommentTarget.sectionTitle === selectedSection.title &&
+        activeCommentTarget.filePath === item.path
+          ? activeCommentTarget
+          : null;
+      return (
+        <ReviewFileItem
+          file={item}
+          expanded={expandedFileIds.includes(item.id)}
+          sectionTitle={selectedSection.title}
+          selectedTheme={selectedTheme}
+          pendingSelection={pendingSelectionForFile}
+          selectedTarget={selectedTargetForFile}
+          viewportWidth={Math.max(width, 280)}
+          revealedLarge={revealedLargeFileIds.includes(item.id)}
+          onToggleFile={handleToggleExpandedFile}
+          onLoadDiffFile={handleRevealLargeDiff}
+          onPressLine={handlePressLine}
+          onStartRangeSelection={handleStartRangeSelection}
+        />
+      );
+    },
+    [
+      activeCommentTarget,
+      expandedFileIds,
+      handlePressLine,
+      handleRevealLargeDiff,
+      handleStartRangeSelection,
+      handleToggleExpandedFile,
+      pendingCommentSelection,
+      revealedLargeFileIds,
+      selectedSection,
+      selectedTheme,
+      width,
+    ],
+  );
-    return { children, stickyHeaderIndices };
+  const visibleListExtraData = useMemo(() => {
+    return {
+      selectedSectionId: selectedSection?.id ?? null,
+      selectedTheme,
+      expandedFileIds,
+      revealedLargeFileIds,
+      pendingSelection: pendingCommentSelection,
+      selectedTarget: activeCommentTarget,
+      viewportWidth: Math.max(width, 280),
+    };
   }, [
     activeCommentTarget,
-    error,
     expandedFileIds,
-    highlightedFileByKey,
     pendingCommentSelection,
-    parsedDiff,
+    revealedLargeFileIds,
-    router,
     selectedSection,
     selectedTheme,
-    threadId,
     width,
-    environmentId,
   ]);
   return (
               >
                 Files Changed
               </NativeText>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 6,
+                  flexWrap: "wrap",
+                }}
+              >
                 {headerDiffSummary.additions && headerDiffSummary.deletions ? (
                   <>
                     <NativeText
                     >
                       {headerDiffSummary.deletions}
                     </NativeText>
+                    {pendingReviewCommentCount > 0 ? (
+                      <NativeText
+                        style={{
+                          fontFamily: "DMSans_700Bold",
+                          fontSize: 12,
+                          fontWeight: "700",
+                          color: "#b45309",
+                        }}
+                      >
+                        {pendingReviewCommentCount} pending
+                      </NativeText>
+                    ) : null}
                   </>
                 ) : (
-                  <NativeText
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-                    numberOfLines={1}
+                    <NativeText
-                    style={{
+                      numberOfLines={1}
-                      fontFamily: "DMSans_700Bold",
+                      style={{
-                      fontSize: 12,
+                        fontFamily: "DMSans_700Bold",
-                      fontWeight: "700",
+                        fontSize: 12,
-                      color: headerMuted,
+                        fontWeight: "700",
-                    }}
+                        color: headerMuted,
-                  >
+                      }}
-                    {selectedSection?.title ?? "Review changes"}
+                    >
-                  </NativeText>
+                      {selectedSection?.title ?? "Review changes"}
+                    </NativeText>
+                    {pendingReviewCommentCount > 0 ? (
+                      <NativeText
+                        style={{
+                          fontFamily: "DMSans_700Bold",
+                          fontSize: 12,
+                          fontWeight: "700",
+                          color: "#b45309",
+                        }}
+                      >
+                        {pendingReviewCommentCount} pending
+                      </NativeText>
+                    ) : null}
+                  </View>
                 )}
               </View>
             </View>
             <Stack.Toolbar.MenuAction
               key={section.id}
               icon={section.id === selectedSection?.id ? "checkmark" : "circle"}
-              onPress={() => setSelectedSectionId(section.id)}
+              onPress={() => {
+                if (reviewCache.threadKey) {
+                  setReviewSelectedSectionId(reviewCache.threadKey, section.id);
+                }
+              }}
               subtitle={section.subtitle ?? undefined}
             >
               <Stack.Toolbar.Label>{section.title}</Stack.Toolbar.Label>
       </Stack.Toolbar>
       <View className="flex-1 bg-sheet">
-        <ScrollView
+        {selectedSection && parsedDiff.kind === "files" ? (
-          contentInsetAdjustmentBehavior="never"
+          <LegendList
-          contentInset={{ top: topContentInset }}
+            style={{ flex: 1 }}
-          contentOffset={{ x: 0, y: -topContentInset }}
+            contentInsetAdjustmentBehavior="never"
-          scrollIndicatorInsets={{ top: topContentInset }}
+            contentInset={{ top: topContentInset }}
-          showsVerticalScrollIndicator={false}
+            scrollIndicatorInsets={{ top: topContentInset }}
-          style={{ flex: 1 }}
+            data={parsedDiff.files as ReviewRenderableFile[]}
-          stickyHeaderIndices={reviewContent.stickyHeaderIndices}
+            renderItem={renderFileItem}
-          stickyHeaderHiddenOnScroll={false}
+            keyExtractor={(file) => file.id}
-          contentContainerStyle={{
+            extraData={visibleListExtraData}
-            paddingTop: REVIEW_HEADER_SPACING,
+            keyboardShouldPersistTaps="handled"
-            paddingBottom: Math.max(insets.bottom, 18) + 18,
+            estimatedItemSize={220}
-          }}
+            drawDistance={900}
-        >
+            recycleItems
-          {reviewContent.children}
+            ListHeaderComponent={listHeader}
-        </ScrollView>
+            contentContainerStyle={{
+              paddingTop: REVIEW_HEADER_SPACING,
+              paddingBottom: Math.max(insets.bottom, 18) + 18,
+            }}
+          />
+        ) : (
+          <ScrollView
+            contentInsetAdjustmentBehavior="never"
+            contentInset={{ top: topContentInset }}
+            contentOffset={{ x: 0, y: -topContentInset }}
+            scrollIndicatorInsets={{ top: topContentInset }}
+            showsVerticalScrollIndicator={false}
+            style={{ flex: 1 }}
+            contentContainerStyle={{
+              paddingTop: REVIEW_HEADER_SPACING,
+              paddingBottom: Math.max(insets.bottom, 18) + 18,
+            }}
+          >
+            {listHeader}
+            {!selectedSection ? (
+              <View className="border-b border-border bg-card px-4 py-5">
+                <Text className="text-[14px] font-t3-bold text-foreground">No review diffs</Text>
+                <Text className="text-[12px] leading-[18px] text-foreground-muted">
+                  This thread has no ready turn diffs and the worktree diff is empty.
+                </Text>
+              </View>
+            ) : selectedSection.isLoading && selectedSection.diff === null ? (
+              <View className="items-center gap-3 border-b border-border bg-card px-4 py-6">
+                <ActivityIndicator size="small" />
+                <Text className="text-[12px] text-foreground-muted">Loading diff…</Text>
+              </View>
+            ) : parsedDiff.kind === "empty" ? (
+              <View className="border-b border-border bg-card px-4 py-5">
+                <Text className="text-[14px] font-t3-bold text-foreground">No changes</Text>
+                <Text className="text-[12px] leading-[18px] text-foreground-muted">
+                  {selectedSection.subtitle ?? "This diff is empty."}
+                </Text>
+              </View>
+            ) : parsedDiff.kind === "raw" ? (
+              <View className="gap-3 border-b border-border bg-card px-4 py-4">
+                <Text className="text-[12px] leading-[18px] text-foreground-muted">
+                  {parsedDiff.reason}
+                </Text>
+                <ScrollView horizontal showsHorizontalScrollIndicator={false} bounces={false}>
+                  <Text selectable className="font-mono text-[12px] leading-[19px] text-foreground">
+                    {parsedDiff.text}
+                  </Text>
+                </ScrollView>
+              </View>
+            ) : null}
+          </ScrollView>
+        )}
         <ReviewSelectionActionBar
           target={activeCommentTarget}

apps/mobile/src/features/threads/review/reviewCommentSelection.ts+4−0

@@ -152,3 +152,7 @@ export function formatReviewCommentContext(target: ReviewCommentTarget, comment: · 151 unmodified lines
152	"</review_comment>",	152	"</review_comment>",
153	].join("\n");	153	].join("\n");
154	}	154	}
		155
		156	export function countReviewCommentContexts(value: string): number {
		157	return Array.from(value.matchAll(/<review_comment>/g)).length;
		158	}

apps/mobile/src/features/threads/review/reviewDiffRendering.tsx+82−0

@@ -0,0 +1,82 @@
	1	import { Platform, Text as NativeText } from "react-native";
	2
	3	import { cn } from "../../../lib/cn";
	4
	5	import type { ReviewRenderableLineRow } from "./reviewModel";
	6	import type { ReviewHighlightedToken } from "./shikiReviewHighlighter";
	7
	8	export const REVIEW_MONO_FONT_FAMILY = Platform.select({
	9	ios: "ui-monospace",
	10	android: "monospace",
	11	default: "monospace",
	12	});
	13
	14	export function renderVisibleWhitespace(value: string): string {
	15	const expandedTabs = value.replace(/\t/g, " ");
	16	return expandedTabs.replace(/^( +)/, (leading) => leading.replaceAll(" ", "\u00A0"));
	17	}
	18
	19	export function changeTone(change: ReviewRenderableLineRow["change"]): string {
	20	if (change === "add") return "bg-emerald-500/12";
	21	if (change === "delete") return "bg-rose-500/12";
	22	return "bg-card";
	23	}
	24
	25	export function DiffTokenText(props: {
	26	readonly tokens: ReadonlyArray<ReviewHighlightedToken> \| null;
	27	readonly fallback: string;
	28	readonly className?: string;
	29	}) {
	30	if (!props.tokens \|\| props.tokens.length === 0) {
	31	return (
	32	<NativeText
	33	selectable
	34	className={cn("text-[13px] leading-[17px] font-medium text-foreground", props.className)}
	35	style={{ fontFamily: REVIEW_MONO_FONT_FAMILY }}
	36	>
	37	{renderVisibleWhitespace(props.fallback \|\| " ")}
	38	</NativeText>
	39	);
	40	}
	41
	42	return (
	43	<NativeText
	44	selectable
	45	className={cn("text-[13px] leading-[17px] font-medium text-foreground", props.className)}
	46	style={{ fontFamily: REVIEW_MONO_FONT_FAMILY }}
	47	>
	48	{(() => {
	49	let offset = 0;
	50
	51	return props.tokens.map((token) => {
	52	const start = offset;
	53	offset += token.content.length;
	54
	55	const fontWeight =
	56	token.fontStyle !== null && (token.fontStyle & 2) === 2
	57	? ("700" as const)
	58	: ("500" as const);
	59	const fontStyle =
	60	token.fontStyle !== null && (token.fontStyle & 1) === 1
	61	? ("italic" as const)
	62	: ("normal" as const);
	63
	64	return (
	65	<NativeText
	66	key={`${start}:${token.content.length}:${token.color ?? ""}:${token.fontStyle ?? ""}`}
	67	selectable
	68	style={{
	69	color: token.color ?? undefined,
	70	fontFamily: REVIEW_MONO_FONT_FAMILY,
	71	fontWeight,
	72	fontStyle,
	73	}}
	74	>
	75	{token.content.length > 0 ? renderVisibleWhitespace(token.content) : " "}
	76	</NativeText>
	77	);
	78	});
	79	})()}
	80	</NativeText>
	81	);
	82	}

apps/mobile/src/features/threads/review/reviewHighlighterEngine.test.ts+43−0

@@ -0,0 +1,43 @@
	1	import { describe, expect, it } from "vitest";
	2
	3	import {
	4	hasTurboModuleProxy,
	5	resolveReviewHighlighterEngine,
	6	resolveReviewHighlighterEnginePreference,
	7	} from "./reviewHighlighterEngine";
	8
	9	describe("resolveReviewHighlighterEnginePreference", () => {
	10	it("defaults invalid values to auto", () => {
	11	expect(resolveReviewHighlighterEnginePreference(undefined)).toBe("auto");
	12	expect(resolveReviewHighlighterEnginePreference("bogus")).toBe("auto");
	13	});
	14
	15	it("accepts supported values", () => {
	16	expect(resolveReviewHighlighterEnginePreference("auto")).toBe("auto");
	17	expect(resolveReviewHighlighterEnginePreference("javascript")).toBe("javascript");
	18	expect(resolveReviewHighlighterEnginePreference("native")).toBe("native");
	19	});
	20	});
	21
	22	describe("resolveReviewHighlighterEngine", () => {
	23	it("uses javascript when explicitly requested", () => {
	24	expect(resolveReviewHighlighterEngine("javascript", true)).toBe("javascript");
	25	expect(resolveReviewHighlighterEngine("javascript", false)).toBe("javascript");
	26	});
	27
	28	it("uses native when available for auto or native preference", () => {
	29	expect(resolveReviewHighlighterEngine("auto", true)).toBe("native");
	30	expect(resolveReviewHighlighterEngine("native", true)).toBe("native");
	31	});
	32
	33	it("falls back to javascript when native is unavailable", () => {
	34	expect(resolveReviewHighlighterEngine("auto", false)).toBe("javascript");
	35	expect(resolveReviewHighlighterEngine("native", false)).toBe("javascript");
	36	});
	37	});
	38
	39	describe("hasTurboModuleProxy", () => {
	40	it("returns false outside a native runtime", () => {
	41	expect(hasTurboModuleProxy()).toBe(false);
	42	});
	43	});

apps/mobile/src/features/threads/review/reviewHighlighterEngine.ts+36−0

@@ -0,0 +1,36 @@
	1	export type ReviewHighlighterEnginePreference = "auto" \| "javascript" \| "native";
	2	export type ReviewHighlighterEngine = "javascript" \| "native";
	3
	4	export function resolveReviewHighlighterEnginePreference(
	5	value: string \| undefined,
	6	): ReviewHighlighterEnginePreference {
	7	switch (value) {
	8	case "javascript":
	9	case "native":
	10	case "auto":
	11	return value;
	12	default:
	13	return "auto";
	14	}
	15	}
	16
	17	export function resolveReviewHighlighterEngine(
	18	preference: ReviewHighlighterEnginePreference,
	19	nativeAvailable: boolean,
	20	): ReviewHighlighterEngine {
	21	if (preference === "javascript") {
	22	return "javascript";
	23	}
	24
	25	if (nativeAvailable) {
	26	return "native";
	27	}
	28
	29	return "javascript";
	30	}
	31
	32	export function hasTurboModuleProxy(): boolean {
	33	const turboModuleProxy = (globalThis as { readonly __turboModuleProxy?: unknown })
	34	.__turboModuleProxy;
	35	return typeof turboModuleProxy === "function";
	36	}

apps/mobile/src/features/threads/review/reviewModel.test.ts+60−0

@@ -11,7 +11,9 @@ import { · 10 unmodified lines
11	buildReviewParsedDiff,	11	buildReviewParsedDiff,
12	buildReviewSectionItems,	12	buildReviewSectionItems,
13	getDefaultReviewSectionId,	13	getDefaultReviewSectionId,
		14	getReviewFilePreviewState,
14	getReviewSectionIdForCheckpoint,	15	getReviewSectionIdForCheckpoint,
		16	type ReviewRenderableFile,
15	} from "./reviewModel";	17	} from "./reviewModel";
16		18
17	function makeCheckpoint(	19	function makeCheckpoint(
@@ -27,6 +29,24 @@ function makeCheckpoint( · 9 unmodified lines
27	};	29	};
28	}	30	}
29		31
		32	function makeRenderableFile(
		33	input: Partial<ReviewRenderableFile> & Pick<ReviewRenderableFile, "path">,
		34	): ReviewRenderableFile {
		35	return {
		36	id: input.path,
		37	cacheKey: input.path,
		38	previousPath: null,
		39	changeType: "new",
		40	additions: 0,
		41	deletions: 0,
		42	languageHint: null,
		43	additionLines: [],
		44	deletionLines: [],
		45	rows: [],
		46	...input,
		47	};
		48	}
		49
30	describe("buildReviewSectionItems", () => {	50	describe("buildReviewSectionItems", () => {
31	it("keeps one chip per checkpoint and appends git sources", () => {	51	it("keeps one chip per checkpoint and appends git sources", () => {
32	const checkpoints = [	52	const checkpoints = [
@@ -171,4 +191,44 @@ describe("buildReviewParsedDiff", () => { · 138 unmodified lines
171	header: "@@ -1,1 +1,2 @@",	191	header: "@@ -1,1 +1,2 @@",
172	});	192	});
173	});	193	});
		194
		195	it("suppresses preview for non-text file formats", () => {
		196	const preview = getReviewFilePreviewState(
		197	makeRenderableFile({
		198	path: "apps/mobile/assets/icon.png",
		199	}),
		200	);
		201
		202	expect(preview).toMatchObject({
		203	kind: "suppressed",
		204	reason: "non-text",
		205	title: "Non-text file",
		206	actionLabel: null,
		207	});
		208	});
		209
		210	it("suppresses large diffs until explicitly requested", () => {
		211	const preview = getReviewFilePreviewState(
		212	makeRenderableFile({
		213	path: "apps/mobile/src/big.ts",
		214	rows: Array.from({ length: 401 }, (_, index) => ({
		215	kind: "line" as const,
		216	id: `line-${index}`,
		217	change: "add" as const,
		218	oldLineNumber: null,
		219	newLineNumber: index + 1,
		220	content: `const line${index} = ${index};`,
		221	additionTokenIndex: index,
		222	deletionTokenIndex: null,
		223	})),
		224	}),
		225	);
		226
		227	expect(preview).toMatchObject({
		228	kind: "suppressed",
		229	reason: "large",
		230	title: "Large diff",
		231	actionLabel: "Load diff",
		232	});
		233	});
174	});	234	});

apps/mobile/src/features/threads/review/reviewModel.ts+99−0

@@ -48,6 +48,18 @@ export interface ReviewRenderableFile { · 47 unmodified lines
48	readonly rows: ReadonlyArray<ReviewRenderableRow>;	48	readonly rows: ReadonlyArray<ReviewRenderableRow>;
49	}	49	}
50		50
		51	export type ReviewFilePreviewState =
		52	\| {
		53	readonly kind: "render";
		54	}
		55	\| {
		56	readonly kind: "suppressed";
		57	readonly reason: "non-text" \| "large";
		58	readonly title: string;
		59	readonly message: string;
		60	readonly actionLabel: string \| null;
		61	};
		62
51	export type ReviewParsedDiff =	63	export type ReviewParsedDiff =
52	\| {	64	\| {
53	readonly kind: "empty";	65	readonly kind: "empty";
@@ -147,6 +159,50 @@ const FNV_OFFSET_BASIS_32 = 0x811c9dc5; · 93 unmodified lines
147	const FNV_PRIME_32 = 0x01000193;	159	const FNV_PRIME_32 = 0x01000193;
148	const SECONDARY_HASH_SEED = 0x9e3779b9;	160	const SECONDARY_HASH_SEED = 0x9e3779b9;
149	const SECONDARY_HASH_MULTIPLIER = 0x85ebca6b;	161	const SECONDARY_HASH_MULTIPLIER = 0x85ebca6b;
		162	const LARGE_DIFF_LINE_THRESHOLD = 400;
		163	const LARGE_DIFF_CHARACTER_THRESHOLD = 24_000;
		164	const NON_TEXT_FILE_EXTENSIONS = new Set([
		165	"png",
		166	"jpg",
		167	"jpeg",
		168	"gif",
		169	"webp",
		170	"bmp",
		171	"ico",
		172	"icns",
		173	"avif",
		174	"heic",
		175	"tif",
		176	"tiff",
		177	"mp3",
		178	"wav",
		179	"flac",
		180	"ogg",
		181	"m4a",
		182	"aac",
		183	"mp4",
		184	"mov",
		185	"avi",
		186	"mkv",
		187	"webm",
		188	"pdf",
		189	"zip",
		190	"gz",
		191	"tgz",
		192	"bz2",
		193	"7z",
		194	"rar",
		195	"woff",
		196	"woff2",
		197	"ttf",
		198	"otf",
		199	"eot",
		200	"wasm",
		201	"exe",
		202	"dll",
		203	"so",
		204	"dylib",
		205	]);
150		206
151	function fnv1a32(input: string, seed: number, multiplier: number): number {	207	function fnv1a32(input: string, seed: number, multiplier: number): number {
152	let hash = seed >>> 0;	208	let hash = seed >>> 0;
@@ -168,6 +224,49 @@ function buildPatchCacheKey(patch: string, scope: string): string { · 15 unmodified lines
168	return `${scope}:${normalizedPatch.length}:${primary}:${secondary}`;	224	return `${scope}:${normalizedPatch.length}:${primary}:${secondary}`;
169	}	225	}
170		226
		227	function getFileExtension(path: string): string \| null {
		228	const match = /\.([a-z0-9]+)$/i.exec(path);
		229	return match?.[1]?.toLowerCase() ?? null;
		230	}
		231
		232	function countReviewRenderableLineRows(file: ReviewRenderableFile): number {
		233	return file.rows.reduce((total, row) => total + (row.kind === "line" ? 1 : 0), 0);
		234	}
		235
		236	function countReviewRenderableCharacters(file: ReviewRenderableFile): number {
		237	return file.rows.reduce(
		238	(total, row) => total + (row.kind === "line" ? row.content.length : row.header.length),
		239	0,
		240	);
		241	}
		242
		243	export function getReviewFilePreviewState(file: ReviewRenderableFile): ReviewFilePreviewState {
		244	const extension = getFileExtension(file.path);
		245	if (extension && NON_TEXT_FILE_EXTENSIONS.has(extension)) {
		246	return {
		247	kind: "suppressed",
		248	reason: "non-text",
		249	title: "Non-text file",
		250	message: "Diff preview is not available for this file format.",
		251	actionLabel: null,
		252	};
		253	}
		254
		255	const lineCount = countReviewRenderableLineRows(file);
		256	const characterCount = countReviewRenderableCharacters(file);
		257	if (lineCount > LARGE_DIFF_LINE_THRESHOLD \|\| characterCount > LARGE_DIFF_CHARACTER_THRESHOLD) {
		258	return {
		259	kind: "suppressed",
		260	reason: "large",
		261	title: "Large diff",
		262	message: "Large diffs are not rendered by default.",
		263	actionLabel: "Load diff",
		264	};
		265	}
		266
		267	return { kind: "render" };
		268	}
		269
171	function fallbackHunkHeader(hunk: FileDiffMetadata["hunks"][number]): string {	270	function fallbackHunkHeader(hunk: FileDiffMetadata["hunks"][number]): string {
172	return `@@ -${hunk.deletionStart},${hunk.deletionCount} +${hunk.additionStart},${hunk.additionCount} @@`;	271	return `@@ -${hunk.deletionStart},${hunk.deletionCount} +${hunk.additionStart},${hunk.additionCount} @@`;
173	}	272	}

apps/mobile/src/features/threads/review/reviewState.ts+195−0

@@ -0,0 +1,195 @@
	1	import { useAtomValue } from "@effect/atom-react";
	2
	3	import { EnvironmentId, ThreadId, type GitReviewDiffSection } from "@t3tools/contracts";
	4	import { Atom } from "effect/unstable/reactivity";
	5
	6	import { scopedThreadKey } from "../../../lib/scopedEntities";
	7	import { appAtomRegistry } from "../../../state/atom-registry";
	8	import { buildReviewParsedDiff, type ReviewParsedDiff } from "./reviewModel";
	9
	10	const EMPTY_GIT_REVIEW_SECTIONS = Object.freeze<ReadonlyArray<GitReviewDiffSection>>([]);
	11	const EMPTY_REVIEW_TURN_DIFFS = Object.freeze<Readonly<Record<string, string>>>({});
	12	const EMPTY_REVIEW_SECTION_FILE_IDS = Object.freeze<
	13	Readonly<Record<string, ReadonlyArray<string> \| undefined>>
	14	>({});
	15	const EMPTY_REVIEW_GIT_SECTIONS_ATOM = Atom.make(EMPTY_GIT_REVIEW_SECTIONS).pipe(
	16	Atom.keepAlive,
	17	Atom.withLabel("mobile:review:git-sections:null"),
	18	);
	19	const EMPTY_REVIEW_TURN_DIFFS_ATOM = Atom.make(EMPTY_REVIEW_TURN_DIFFS).pipe(
	20	Atom.keepAlive,
	21	Atom.withLabel("mobile:review:turn-diffs:null"),
	22	);
	23	const EMPTY_REVIEW_SELECTED_SECTION_ID_ATOM = Atom.make<string \| null>(null).pipe(
	24	Atom.keepAlive,
	25	Atom.withLabel("mobile:review:selected-section-id:null"),
	26	);
	27	const EMPTY_REVIEW_SECTION_FILE_IDS_ATOM = Atom.make(EMPTY_REVIEW_SECTION_FILE_IDS).pipe(
	28	Atom.keepAlive,
	29	Atom.withLabel("mobile:review:section-file-ids:null"),
	30	);
	31
	32	const reviewGitSectionsByThreadKeyAtom = Atom.family((threadKey: string) =>
	33	Atom.make(EMPTY_GIT_REVIEW_SECTIONS).pipe(
	34	Atom.keepAlive,
	35	Atom.withLabel(`mobile:review:git-sections:${threadKey}`),
	36	),
	37	);
	38
	39	const reviewTurnDiffByThreadKeyAtom = Atom.family((threadKey: string) =>
	40	Atom.make(EMPTY_REVIEW_TURN_DIFFS).pipe(
	41	Atom.keepAlive,
	42	Atom.withLabel(`mobile:review:turn-diffs:${threadKey}`),
	43	),
	44	);
	45
	46	const reviewSelectedSectionIdByThreadKeyAtom = Atom.family((threadKey: string) =>
	47	Atom.make<string \| null>(null).pipe(
	48	Atom.keepAlive,
	49	Atom.withLabel(`mobile:review:selected-section-id:${threadKey}`),
	50	),
	51	);
	52
	53	const reviewExpandedFileIdsByThreadKeyAtom = Atom.family((threadKey: string) =>
	54	Atom.make(EMPTY_REVIEW_SECTION_FILE_IDS).pipe(
	55	Atom.keepAlive,
	56	Atom.withLabel(`mobile:review:expanded-file-ids:${threadKey}`),
	57	),
	58	);
	59
	60	const reviewRevealedLargeFileIdsByThreadKeyAtom = Atom.family((threadKey: string) =>
	61	Atom.make(EMPTY_REVIEW_SECTION_FILE_IDS).pipe(
	62	Atom.keepAlive,
	63	Atom.withLabel(`mobile:review:revealed-large-file-ids:${threadKey}`),
	64	),
	65	);
	66
	67	const reviewParsedDiffBySectionCacheKeyAtom = Atom.family((cacheKey: string) =>
	68	Atom.make<{ readonly diff: string \| null; readonly parsed: ReviewParsedDiff } \| null>(null).pipe(
	69	Atom.keepAlive,
	70	Atom.withLabel(`mobile:review:parsed-diffs:${cacheKey}`),
	71	),
	72	);
	73
	74	function buildThreadKey(input: {
	75	readonly environmentId?: string;
	76	readonly threadId?: string;
	77	}): string \| null {
	78	return input.environmentId && input.threadId
	79	? scopedThreadKey(EnvironmentId.make(input.environmentId), ThreadId.make(input.threadId))
	80	: null;
	81	}
	82
	83	function buildSectionCacheKey(threadKey: string, sectionId: string): string {
	84	return `${threadKey}:${sectionId}`;
	85	}
	86
	87	export function useReviewCacheForThread(input: {
	88	readonly environmentId?: string;
	89	readonly threadId?: string;
	90	}) {
	91	const threadKey = buildThreadKey(input);
	92	const gitSections = useAtomValue(
	93	threadKey ? reviewGitSectionsByThreadKeyAtom(threadKey) : EMPTY_REVIEW_GIT_SECTIONS_ATOM,
	94	);
	95	const turnDiffById = useAtomValue(
	96	threadKey ? reviewTurnDiffByThreadKeyAtom(threadKey) : EMPTY_REVIEW_TURN_DIFFS_ATOM,
	97	);
	98	const selectedSectionId = useAtomValue(
	99	threadKey
	100	? reviewSelectedSectionIdByThreadKeyAtom(threadKey)
	101	: EMPTY_REVIEW_SELECTED_SECTION_ID_ATOM,
	102	);
	103	const expandedFileIdsBySection = useAtomValue(
	104	threadKey
	105	? reviewExpandedFileIdsByThreadKeyAtom(threadKey)
	106	: EMPTY_REVIEW_SECTION_FILE_IDS_ATOM,
	107	);
	108	const revealedLargeFileIdsBySection = useAtomValue(
	109	threadKey
	110	? reviewRevealedLargeFileIdsByThreadKeyAtom(threadKey)
	111	: EMPTY_REVIEW_SECTION_FILE_IDS_ATOM,
	112	);
	113
	114	return {
	115	threadKey,
	116	gitSections,
	117	turnDiffById,
	118	selectedSectionId,
	119	expandedFileIdsBySection,
	120	revealedLargeFileIdsBySection,
	121	};
	122	}
	123
	124	export function setReviewGitSections(
	125	threadKey: string,
	126	sections: ReadonlyArray<GitReviewDiffSection>,
	127	): void {
	128	appAtomRegistry.set(reviewGitSectionsByThreadKeyAtom(threadKey), sections);
	129	}
	130
	131	export function setReviewTurnDiff(threadKey: string, sectionId: string, diff: string): void {
	132	const atom = reviewTurnDiffByThreadKeyAtom(threadKey);
	133	const current = appAtomRegistry.get(atom);
	134	appAtomRegistry.set(atom, {
	135	...current,
	136	[sectionId]: diff,
	137	});
	138	}
	139
	140	export function setReviewSelectedSectionId(threadKey: string, sectionId: string \| null): void {
	141	appAtomRegistry.set(reviewSelectedSectionIdByThreadKeyAtom(threadKey), sectionId);
	142	}
	143
	144	export function updateReviewExpandedFileIds(
	145	threadKey: string,
	146	sectionId: string,
	147	update: (current: ReadonlyArray<string> \| undefined) => ReadonlyArray<string> \| undefined,
	148	): void {
	149	const atom = reviewExpandedFileIdsByThreadKeyAtom(threadKey);
	150	const current = appAtomRegistry.get(atom);
	151	const nextValue = update(current[sectionId]);
	152	appAtomRegistry.set(atom, {
	153	...current,
	154	[sectionId]: nextValue,
	155	});
	156	}
	157
	158	export function updateReviewRevealedLargeFileIds(
	159	threadKey: string,
	160	sectionId: string,
	161	update: (current: ReadonlyArray<string> \| undefined) => ReadonlyArray<string> \| undefined,
	162	): void {
	163	const atom = reviewRevealedLargeFileIdsByThreadKeyAtom(threadKey);
	164	const current = appAtomRegistry.get(atom);
	165	const nextValue = update(current[sectionId]);
	166	appAtomRegistry.set(atom, {
	167	...current,
	168	[sectionId]: nextValue,
	169	});
	170	}
	171
	172	export function getCachedReviewParsedDiff(input: {
	173	readonly threadKey: string \| null;
	174	readonly sectionId: string \| null;
	175	readonly diff: string \| null \| undefined;
	176	}): ReviewParsedDiff {
	177	if (!input.threadKey \|\| !input.sectionId) {
	178	return buildReviewParsedDiff(input.diff, input.sectionId ?? "mobile-review");
	179	}
	180
	181	const cacheKey = buildSectionCacheKey(input.threadKey, input.sectionId);
	182	const normalizedDiff = input.diff?.trim() ?? null;
	183	const atom = reviewParsedDiffBySectionCacheKeyAtom(cacheKey);
	184	const cached = appAtomRegistry.get(atom);
	185	if (cached && cached.diff === normalizedDiff) {
	186	return cached.parsed;
	187	}
	188
	189	const parsed = buildReviewParsedDiff(input.diff, input.sectionId);
	190	appAtomRegistry.set(atom, {
	191	diff: normalizedDiff,
	192	parsed,
	193	});
	194	return parsed;
	195	}

apps/mobile/src/features/threads/review/shikiReviewHighlighter.test.ts+44−0

@@ -0,0 +1,44 @@
	1	import { describe, expect, it } from "vitest";
	2
	3	import type { ReviewRenderableFile } from "./reviewModel";
	4	import { highlightReviewFile } from "./shikiReviewHighlighter";
	5
	6	function makeRenderableFile(
	7	input: Partial<ReviewRenderableFile> & Pick<ReviewRenderableFile, "path">,
	8	): ReviewRenderableFile {
	9	return {
	10	id: input.path,
	11	cacheKey: input.path,
	12	previousPath: null,
	13	changeType: "new",
	14	additions: 0,
	15	deletions: 0,
	16	languageHint: null,
	17	additionLines: [],
	18	deletionLines: [],
	19	rows: [],
	20	...input,
	21	};
	22	}
	23
	24	describe("highlightReviewFile", () => {
	25	it("preserves one highlighted token row per diff line even without trailing newlines", async () => {
	26	const file = makeRenderableFile({
	27	path: "apps/mobile/src/example.test.ts",
	28	additionLines: [
	29	'const items = ["a"];',
	30	'expect(items).toEqual(["a"]);',
	31	"const next = items.map((item) => item.toUpperCase());",
	32	'expect(next).toContain("A");',
	33	],
	34	});
	35
	36	const highlighted = await highlightReviewFile(file, "light");
	37
	38	expect(highlighted.additionLines).toHaveLength(file.additionLines.length);
	39	expect(highlighted.additionLines[0]?.some((token) => token.content === "const")).toBe(true);
	40	expect(highlighted.additionLines[1]?.some((token) => token.content === "expect")).toBe(true);
	41	expect(highlighted.additionLines[2]?.some((token) => token.content === "const")).toBe(true);
	42	expect(highlighted.additionLines[3]?.some((token) => token.content === "expect")).toBe(true);
	43	});
	44	});

apps/mobile/src/features/threads/review/shikiReviewHighlighter.ts+138−21

@@ -1,6 +1,12 @@
1	import { getFiletypeFromFileName } from "@pierre/diffs/utils";	1	import { getFiletypeFromFileName } from "@pierre/diffs/utils";
2		2
3	import type { ReviewRenderableFile } from "./reviewModel";	3	import {
		4	hasTurboModuleProxy,
		5	resolveReviewHighlighterEngine,
		6	resolveReviewHighlighterEnginePreference,
		7	type ReviewHighlighterEngine,
		8	} from "./reviewHighlighterEngine";
		9	import type { ReviewRenderableFile, ReviewRenderableLineRow } from "./reviewModel";
4		10
5	export type ReviewDiffTheme = "light" \| "dark";	11	export type ReviewDiffTheme = "light" \| "dark";
6		12
@@ -19,8 +25,12 @@ const SHIKI_THEME_BY_SCHEME = { · 12 unmodified lines
19	light: "github-light-default",	25	light: "github-light-default",
20	dark: "github-dark-default",	26	dark: "github-dark-default",
21	} as const;	27	} as const;
		28	const REVIEW_HIGHLIGHTER_ENGINE_PREFERENCE = resolveReviewHighlighterEnginePreference(
		29	process.env.EXPO_PUBLIC_REVIEW_HIGHLIGHTER_ENGINE,
		30	);
22		31
23	const highlightCache = new Map<string, Promise<ReviewHighlightedFile>>();	32	const highlightCache = new Map<string, Promise<ReviewHighlightedFile>>();
		33	const resolvedHighlightCache = new Map<string, ReviewHighlightedFile>();
24	const loadedLanguages = new Set<string>(["text"]);	34	const loadedLanguages = new Set<string>(["text"]);
25	type ShikiHighlighter = {	35	type ShikiHighlighter = {
26	loadLanguage: (...langs: string[]) => Promise<void>;	36	loadLanguage: (...langs: string[]) => Promise<void>;
@@ -30,38 +40,83 @@ type ShikiHighlighter = { · 3 unmodified lines
30	) => Promise<Array<Array<{ content: string; color?: string; fontStyle?: number }>>>;	40	) => Promise<Array<Array<{ content: string; color?: string; fontStyle?: number }>>>;
31	};	41	};
32	let highlighterPromise: Promise<ShikiHighlighter> \| null = null;	42	let highlighterPromise: Promise<ShikiHighlighter> \| null = null;
		43	let activeHighlighterEnginePromise: Promise<ReviewHighlighterEngine> \| null = null;
33		44
34	function cleanLastNewline(value: string): string {	45	function stripTrailingNewline(value: string): string {
35	return value.endsWith("\n") ? value.slice(0, -1) : value;	46	return value.endsWith("\n") ? value.slice(0, -1) : value;
36	}	47	}
37		48
38	function joinPatchLines(lines: ReadonlyArray<string>): string {	49	function joinPatchLines(lines: ReadonlyArray<string>): string {
39	if (lines.length === 0) {	50	return lines.map(stripTrailingNewline).join("\n");
40	return "";
41	}
42
43	return cleanLastNewline(lines.join(""));
44	}	51	}
45		52
46	async function getHighlighter() {	53	async function getHighlighter() {
47	if (!highlighterPromise) {	54	if (!highlighterPromise) {
48	highlighterPromise = import("shiki").then(	55	const configuredHighlighterPromise = import("shiki").then(async (shikiModule) => {
49	async ({ createHighlighter, createJavaScriptRegexEngine }) => {	56	const nativeRuntimeAvailable = hasTurboModuleProxy();
50	const highlighter = await createHighlighter({	57	let nativeEngineAvailable = false;
51	themes: [SHIKI_THEME_BY_SCHEME.light, SHIKI_THEME_BY_SCHEME.dark],	58
52	langs: [],	59	if (nativeRuntimeAvailable && REVIEW_HIGHLIGHTER_ENGINE_PREFERENCE !== "javascript") {
53	engine: createJavaScriptRegexEngine(),	60	try {
54	});	61	const nativeEngineModule = await import("react-native-shiki-engine");
55	return highlighter as unknown as ShikiHighlighter;	62	nativeEngineAvailable = nativeEngineModule.isNativeEngineAvailable();
56	},	63	if (nativeEngineAvailable) {
57	);	64	const createHighlighter = shikiModule.createBundledHighlighter({
		65	langs: shikiModule.bundledLanguages,
		66	themes: shikiModule.bundledThemes,
		67	engine: () => nativeEngineModule.createNativeEngine(),
		68	});
		69	const highlighter = await createHighlighter({
		70	themes: [SHIKI_THEME_BY_SCHEME.light, SHIKI_THEME_BY_SCHEME.dark],
		71	langs: [],
		72	});
		73	return {
		74	highlighter: highlighter as unknown as ShikiHighlighter,
		75	engine: "native" as const,
		76	};
		77	}
		78	} catch {
		79	nativeEngineAvailable = false;
		80	}
		81	}
		82
		83	const engine = resolveReviewHighlighterEngine(
		84	REVIEW_HIGHLIGHTER_ENGINE_PREFERENCE,
		85	nativeEngineAvailable,
		86	);
		87	const createHighlighter = shikiModule.createBundledHighlighter({
		88	langs: shikiModule.bundledLanguages,
		89	themes: shikiModule.bundledThemes,
		90	engine: () => shikiModule.createJavaScriptRegexEngine(),
		91	});
		92	const highlighter = await createHighlighter({
		93	themes: [SHIKI_THEME_BY_SCHEME.light, SHIKI_THEME_BY_SCHEME.dark],
		94	langs: [],
		95	});
		96	return {
		97	highlighter: highlighter as unknown as ShikiHighlighter,
		98	engine,
		99	};
		100	});
		101
		102	highlighterPromise = configuredHighlighterPromise.then((result) => result.highlighter);
		103	activeHighlighterEnginePromise = configuredHighlighterPromise.then((result) => result.engine);
58	}	104	}
59		105
60	return highlighterPromise as Promise<ShikiHighlighter>;	106	return highlighterPromise as Promise<ShikiHighlighter>;
61	}	107	}
62		108
63	async function resolveLanguage(file: ReviewRenderableFile): Promise<string> {	109	export async function getActiveReviewHighlighterEngine(): Promise<ReviewHighlighterEngine> {
64	const candidate = file.languageHint ?? getFiletypeFromFileName(file.path);	110	await getHighlighter();
		111	return (activeHighlighterEnginePromise ??
		112	Promise.resolve("javascript")) as Promise<ReviewHighlighterEngine>;
		113	}
		114
		115	async function resolveLanguageFromPath(
		116	path: string,
		117	languageHint: string \| null = null,
		118	): Promise<string> {
		119	const candidate = languageHint ?? getFiletypeFromFileName(path);
65	if (!candidate \|\| candidate === "text" \|\| candidate === "ansi") {	120	if (!candidate \|\| candidate === "text" \|\| candidate === "ansi") {
66	return "text";	121	return "text";
67	}	122	}
@@ -79,6 +134,10 @@ async function resolveLanguage(file: ReviewRenderableFile): Promise<string> { · 11 unmodified lines
79	return candidate;	134	return candidate;
80	}	135	}
81		136
		137	async function resolveLanguage(file: ReviewRenderableFile): Promise<string> {
		138	return resolveLanguageFromPath(file.path, file.languageHint);
		139	}
		140
82	function normalizeHighlightedLines(	141	function normalizeHighlightedLines(
83	tokenLines: ReadonlyArray<ReadonlyArray<{ content: string; color?: string; fontStyle?: number }>>,	142	tokenLines: ReadonlyArray<ReadonlyArray<{ content: string; color?: string; fontStyle?: number }>>,
84	): ReadonlyArray<ReadonlyArray<ReviewHighlightedToken>> {	143	): ReadonlyArray<ReadonlyArray<ReviewHighlightedToken>> {
@@ -105,12 +164,27 @@ async function highlightLines( · 20 unmodified lines
105	return normalizeHighlightedLines(tokenLines);	164	return normalizeHighlightedLines(tokenLines);
106	}	165	}
107		166
		167	function getHighlightCacheKey(file: ReviewRenderableFile, theme: ReviewDiffTheme): string {
		168	return `${SHIKI_THEME_BY_SCHEME[theme]}:${file.cacheKey}`;
		169	}
		170
		171	export function getCachedHighlightedReviewFile(
		172	file: ReviewRenderableFile,
		173	theme: ReviewDiffTheme,
		174	): ReviewHighlightedFile \| null {
		175	return resolvedHighlightCache.get(getHighlightCacheKey(file, theme)) ?? null;
		176	}
		177
108	export async function highlightReviewFile(	178	export async function highlightReviewFile(
109	file: ReviewRenderableFile,	179	file: ReviewRenderableFile,
110	theme: ReviewDiffTheme,	180	theme: ReviewDiffTheme,
111	): Promise<ReviewHighlightedFile> {	181	): Promise<ReviewHighlightedFile> {
112	const shikiTheme = SHIKI_THEME_BY_SCHEME[theme];	182	const shikiTheme = SHIKI_THEME_BY_SCHEME[theme];
113	const cacheKey = `${shikiTheme}:${file.cacheKey}`;	183	const cacheKey = getHighlightCacheKey(file, theme);
		184	const resolved = resolvedHighlightCache.get(cacheKey);
		185	if (resolved) {
		186	return resolved;
		187	}
114	const cached = highlightCache.get(cacheKey);	188	const cached = highlightCache.get(cacheKey);
115	if (cached) {	189	if (cached) {
116	return cached;	190	return cached;
@@ -123,9 +197,52 @@ export async function highlightReviewFile( · 6 unmodified lines
123	highlightLines(joinPatchLines(file.deletionLines), language, shikiTheme),	197	highlightLines(joinPatchLines(file.deletionLines), language, shikiTheme),
124	]);	198	]);
125		199
126	return { additionLines, deletionLines };	200	const highlighted = { additionLines, deletionLines };
		201	resolvedHighlightCache.set(cacheKey, highlighted);
		202	return highlighted;
127	})();	203	})();
128		204
129	highlightCache.set(cacheKey, promise);	205	highlightCache.set(cacheKey, promise);
130	return promise;	206	return promise;
131	}	207	}
		208
		209	export async function highlightReviewSelectedLines(input: {
		210	readonly filePath: string;
		211	readonly lines: ReadonlyArray<ReviewRenderableLineRow>;
		212	readonly theme: ReviewDiffTheme;
		213	readonly languageHint?: string \| null;
		214	}): Promise<Record<string, ReadonlyArray<ReviewHighlightedToken>>> {
		215	if (input.lines.length === 0) {
		216	return {};
		217	}
		218
		219	const language = await resolveLanguageFromPath(input.filePath, input.languageHint ?? null);
		220	const shikiTheme = SHIKI_THEME_BY_SCHEME[input.theme];
		221	const additionLikeLines = input.lines
		222	.filter((line) => line.change !== "delete")
		223	.map((line) => `${line.content}\n`);
		224	const deletionLines = input.lines
		225	.filter((line) => line.change === "delete")
		226	.map((line) => `${line.content}\n`);
		227	const [additionTokens, deletionTokens] = await Promise.all([
		228	highlightLines(joinPatchLines(additionLikeLines), language, shikiTheme),
		229	highlightLines(joinPatchLines(deletionLines), language, shikiTheme),
		230	]);
		231
		232	const tokenMap: Record<string, ReadonlyArray<ReviewHighlightedToken>> = {};
		233	let additionIndex = 0;
		234	let deletionIndex = 0;
		235
		236	input.lines.forEach((line) => {
		237	if (line.change === "delete") {
		238	tokenMap[line.id] = deletionTokens[deletionIndex] ?? [];
		239	deletionIndex += 1;
		240	return;
		241	}
		242
		243	tokenMap[line.id] = additionTokens[additionIndex] ?? [];
		244	additionIndex += 1;
		245	});
		246
		247	return tokenMap;
		248	}

apps/mobile/src/features/threads/use-thread-composer-state.ts+21−0

@@ -93,6 +93,7 @@ export function appendReviewCommentToDraft(input: { · 92 unmodified lines
93	readonly environmentId: string;	93	readonly environmentId: string;
94	readonly threadId: string;	94	readonly threadId: string;
95	readonly text: string;	95	readonly text: string;
		96	readonly attachments?: ReadonlyArray<DraftComposerImageAttachment>;
96	}): void {	97	}): void {
97	const threadKey = scopedThreadKey(	98	const threadKey = scopedThreadKey(
98	EnvironmentId.make(input.environmentId),	99	EnvironmentId.make(input.environmentId),
@@ -105,6 +106,26 @@ export function appendReviewCommentToDraft(input: { · 6 unmodified lines
105	...current,	106	...current,
106	[threadKey]: `${existing}${separator}${input.text}`,	107	[threadKey]: `${existing}${separator}${input.text}`,
107	});	108	});
		109	if (input.attachments && input.attachments.length > 0) {
		110	appendDraftAttachments(threadKey, input.attachments);
		111	}
		112	}
		113
		114	export function useThreadDraftForThread(input: {
		115	readonly environmentId?: string;
		116	readonly threadId?: string;
		117	}) {
		118	const draftMessageByThreadKey = useAtomValue(draftMessageByThreadKeyAtom);
		119	const draftAttachmentsByThreadKey = useAtomValue(draftAttachmentsByThreadKeyAtom);
		120	const threadKey =
		121	input.environmentId && input.threadId
		122	? scopedThreadKey(EnvironmentId.make(input.environmentId), ThreadId.make(input.threadId))
		123	: null;
		124
		125	return {
		126	draftMessage: threadKey ? (draftMessageByThreadKey[threadKey] ?? "") : "",
		127	draftAttachments: threadKey ? (draftAttachmentsByThreadKey[threadKey] ?? []) : [],
		128	};
108	}	129	}
109		130
110	function clearDraft(threadKey: string): void {	131	function clearDraft(threadKey: string): void {

bun.lock+18−5

         "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",
     "@shikijs/transformers": ["@shikijs/transformers@3.23.0", "", { "dependencies": { "@shikijs/core": "3.23.0", "@shikijs/types": "3.23.0" } }, "sha512-F9msZVxdF+krQNSdQ4V+Ja5QemeAoTQ2jxt7nJCwhDsdF1JWS3KxIQXA3lQbyKwS3J61oHRUSv4jYWv3CkaKTQ=="],
-    "@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+    "@shikijs/types": ["@shikijs/types@3.23.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ=="],
     "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
     "react-native-screens": ["react-native-screens@4.23.0", "", { "dependencies": { "react-freeze": "^1.0.0", "warn-once": "^0.1.0" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-XhO3aK0UeLpBn4kLecd+J+EDeRRJlI/Ro9Fze06vo1q163VeYtzfU9QS09/VyDFMWR1qxDC1iazCArTPSFFiPw=="],
+    "react-native-shiki-engine": ["react-native-shiki-engine@0.3.9", "", { "dependencies": { "@shikijs/types": "^3.19.0", "@shikijs/vscode-textmate": "^10.0.2" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-FoCzxk6ODGqbYFXRAgnrZ+ZTt5gbCfvwxxobuvGtvjIAK3GtjV6gOImldgI2hB/oelwqw1gksrFjpN3BqE7jKA=="],
     "react-native-svg": ["react-native-svg@15.15.3", "", { "dependencies": { "css-select": "^5.1.0", "css-tree": "^1.1.3", "warn-once": "0.1.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-/k4KYwPBLGcx2f5d4FjE+vCScK7QOX14cl2lIASJ28u4slHHtIhL0SZKU7u9qmRBHxTCKPoPBtN6haT1NENJNA=="],
     "react-native-worklets": ["react-native-worklets@0.7.2", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "7.27.1", "@babel/plugin-transform-class-properties": "7.27.1", "@babel/plugin-transform-classes": "7.28.4", "@babel/plugin-transform-nullish-coalescing-operator": "7.27.1", "@babel/plugin-transform-optional-chaining": "7.27.1", "@babel/plugin-transform-shorthand-properties": "7.27.1", "@babel/plugin-transform-template-literals": "7.27.1", "@babel/plugin-transform-unicode-regex": "7.27.1", "@babel/preset-typescript": "7.27.1", "convert-source-map": "2.0.0", "semver": "7.7.3" }, "peerDependencies": { "@babel/core": "*", "react": "*", "react-native": "*" } }, "sha512-DuLu1kMV/Uyl9pQHp3hehAlThoLw7Yk2FwRTpzASOmI+cd4845FWn3m2bk9MnjUw8FBRIyhwLqYm2AJaXDXsog=="],
     "@rollup/pluginutils/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
-    "@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA=="],
+    "@shikijs/core/@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+    "@shikijs/engine-javascript/@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+    "@shikijs/engine-oniguruma/@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+    "@shikijs/langs/@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
-    "@shikijs/transformers/@shikijs/types": ["@shikijs/types@3.23.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ=="],
+    "@shikijs/primitive/@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+    "@shikijs/themes/@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+    "@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA=="],
     "@tailwindcss/node/tailwindcss": ["tailwindcss@4.2.1", "", {}, "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw=="],
     "serialize-error/type-fest": ["type-fest@0.13.1", "", {}, "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg=="],
+    "shiki/@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
     "simple-plist/bplist-parser": ["bplist-parser@0.3.1", "", { "dependencies": { "big-integer": "1.6.x" } }, "sha512-PyJxiNtA5T2PlLIeBot4lbp7rj4OadzjnMZD/G5zuBNt8ei/yCU7+wW0h2bag9vr8c+/WuRWmSxbqAl9hL1rBA=="],
     "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
     "@pierre/diffs/shiki/@shikijs/themes": ["@shikijs/themes@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0" } }, "sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA=="],
-    "@pierre/diffs/shiki/@shikijs/types": ["@shikijs/types@3.23.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ=="],
     "@react-native/babel-preset/babel-plugin-syntax-hermes-parser/hermes-parser": ["hermes-parser@0.32.0", "", { "dependencies": { "hermes-estree": "0.32.0" } }, "sha512-g4nBOWFpuiTqjR3LZdRxKUkij9iyveWeuks7INEsMX741f3r9xxrOe8TeQfUxtda0eXmiIFiMQzoeSQEno33Hw=="],
     "@react-native/codegen/glob/minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],