feat(mobile): diff review surface — inline comments, native review toolbar, rebuilt diff renderer

apps/mobile/app/(authenticated)/_layout.tsx

@@ -30,7 +30,10 @@ export default function AuthenticatedLayout() {
 		<CollectionsProvider>
 			<PromptInputProvider>
 				<Stack screenOptions={{ headerShown: false }}>
-					<Stack.Screen name="(home)" />
+					{/* Root headers are hidden — `title` here only names routes in
+				    back-button long-press menus (otherwise raw route names leak,
+				    e.g. "(home)"). */}
+					<Stack.Screen name="(home)" options={{ title: "Home" }} />
 					<Stack.Screen
 						name="settings/index"
 						options={settingsScreenOptions("Settings")}
@@ -53,23 +56,35 @@ export default function AuthenticatedLayout() {
 					/>
 					<Stack.Screen
 						name="workspace/[id]/chat/[sessionId]"
-						options={{ ...glassHeaderOptions, title: "" }}
+						options={{ ...glassHeaderOptions, title: "Chat" }}
 					/>
 					<Stack.Screen
 						name="workspace/[id]/chat/acp/[sessionId]"
-						options={{ ...glassHeaderOptions, title: "" }}
+						options={{ ...glassHeaderOptions, title: "Chat" }}
 					/>
 					<Stack.Screen
 						name="workspace/[id]/diff"
 						options={{ ...glassHeaderOptions, title: "Changes" }}
 					/>
 					<Stack.Screen
 						name="workspace/[id]/files-changed"
-						options={{ ...glassHeaderOptions, title: "Files changed" }}
+						options={{
+							// Solid themed header (matches the sticky file bars), not glass.
+							headerShown: true,
+							headerBackButtonDisplayMode: "minimal",
+							headerShadowVisible: false,
+							title: "Files changed",
+							// Right-swipes are horizontal diff scrolling — back stays edge-only.
+							fullScreenGestureEnabled: false,
+						}}
 					/>
 					<Stack.Screen
 						name="workspace/[id]/file"
-						options={{ ...glassHeaderOptions, title: "" }}
+						options={{
+							...glassHeaderOptions,
+							title: "",
+							fullScreenGestureEnabled: false,
+						}}
 					/>
 					<Stack.Screen
 						name="workspace/[id]/commits"
@@ -81,6 +96,36 @@ export default function AuthenticatedLayout() {
 							title: "Commits",
 						}}
 					/>
+					<Stack.Screen
+						name="workspace/[id]/line-comment"
+						options={{
+							presentation: "formSheet",
+							sheetAllowedDetents: [0.75],
+							sheetGrabberVisible: true,
+							...glassHeaderOptions,
+							title: "Add comment",
+						}}
+					/>
+					<Stack.Screen
+						name="workspace/[id]/finish-review"
+						options={{
+							presentation: "formSheet",
+							sheetAllowedDetents: [0.75],
+							sheetGrabberVisible: true,
+							...glassHeaderOptions,
+							title: "Finish review",
+						}}
+					/>
+					<Stack.Screen
+						name="workspace/[id]/jump-to-file"
+						options={{
+							presentation: "formSheet",
+							sheetAllowedDetents: [0.75],
+							sheetGrabberVisible: true,
+							...glassHeaderOptions,
+							title: "Jump to file",
+						}}
+					/>
 				</Stack>
 			</PromptInputProvider>
 		</CollectionsProvider>

apps/mobile/app/(authenticated)/workspace/[id]/finish-review.tsx

@@ -0,0 +1,3 @@
+import { FinishReviewSheet } from "@/screens/(authenticated)/workspace/[id]/finish-review";
+
+export default FinishReviewSheet;

apps/mobile/app/(authenticated)/workspace/[id]/jump-to-file.tsx

@@ -0,0 +1,3 @@
+import { JumpToFileSheet } from "@/screens/(authenticated)/workspace/[id]/jump-to-file";
+
+export default JumpToFileSheet;

apps/mobile/app/(authenticated)/workspace/[id]/line-comment.tsx

@@ -0,0 +1,3 @@
+import { LineCommentSheet } from "@/screens/(authenticated)/workspace/[id]/line-comment";
+
+export default LineCommentSheet;

apps/mobile/package.json

@@ -51,6 +51,7 @@
 		"@shikijs/core": "4.2.0",
 		"@shikijs/langs": "4.2.0",
 		"@shikijs/themes": "4.2.0",
+		"@shopify/flash-list": "2.3.2",
 		"@superset/auth": "workspace:*",
 		"@superset/db": "workspace:*",
 		"@superset/host-client": "workspace:*",

apps/mobile/screens/(authenticated)/(home)/home/components/NewChatWidget/NewChatWidget.tsx

@@ -48,11 +48,16 @@ import {
 	StyleSheet,
 	View,
 } from "react-native";
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import Animated, {
+	FadeIn,
+	FadeOut,
+	LinearTransition,
+} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { usePromptInputController } from "@/components/ai-elements/prompt-input";
 import type { HostWorkspaceItem } from "@/hooks/useHostWorkspaces";
 import { getHostServiceClientByUrl } from "@/lib/host-service/client";
+import { cn } from "@/lib/utils";
 import { useAfterTransitionEnd } from "@/screens/(authenticated)/(home)/hooks/useAfterTransitionEnd";
 import {
 	type ChatTarget,
@@ -334,7 +339,26 @@ export function NewChatWidget({
 					className="px-3"
 					style={{ paddingBottom: focused ? 8 : insets.bottom + 8 }}
 				>
-					{above ? <View className="flex-row pb-2 pl-1">{above}</View> : null}
+					{/* The pill resizes natively (SwiftUI spring) while RN relayouts land
+			    in discrete jumps — the layout spring makes the chip glide between
+			    those jumps; z-10 keeps mid-animation frames above the glass. */}
+					{above ? (
+						<Animated.View
+							className="z-10"
+							layout={LinearTransition.springify().duration(350)}
+						>
+							{/* Extra clearance while expanded: the settled glass renders
+						    taller than the frame matchContents reports. */}
+							<View
+								className={cn(
+									"flex-row pl-1",
+									expanded ? "pb-[26px]" : "pb-2.5",
+								)}
+							>
+								{above}
+							</View>
+						</Animated.View>
+					) : null}
 					<Host matchContents={{ vertical: true }} style={{ width: "100%" }}>
 						<VStack
 							spacing={0}

apps/mobile/screens/(authenticated)/components/PressableScale/PressableScale.tsx

@@ -1,5 +1,10 @@
 import { type ComponentProps, type ReactNode, useRef } from "react";
-import { Pressable, StyleSheet } from "react-native";
+import {
+	Pressable,
+	type StyleProp,
+	StyleSheet,
+	type ViewStyle,
+} from "react-native";
 import Animated, {
 	useAnimatedStyle,
 	useSharedValue,
@@ -17,11 +22,13 @@ const HOLD_FADE_MS = 150;
 
 export function PressableScale({
 	children,
+	style,
 	onPressIn,
 	onPressOut,
 	...props
-}: Omit<ComponentProps<typeof Pressable>, "children"> & {
+}: Omit<ComponentProps<typeof Pressable>, "children" | "style"> & {
 	children?: ReactNode;
+	style?: StyleProp<ViewStyle>;
 }) {
 	const pressed = useSharedValue(0);
 	const holdFadeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -35,7 +42,7 @@ export function PressableScale({
 	return (
 		<AnimatedPressable
 			{...props}
-			style={containerStyle}
+			style={[style, containerStyle]}
 			onPressIn={(event) => {
 				pressed.value = withTiming(1, { duration: PRESS_IN_MS });
 				if (holdFadeTimer.current) clearTimeout(holdFadeTimer.current);

apps/mobile/screens/(authenticated)/workspace/[id]/WorkspaceScreen/WorkspaceScreen.tsx

@@ -59,9 +59,7 @@ export function WorkspaceScreen() {
 
 	return (
 		<View className="bg-background flex-1">
-			<Stack.Screen
-				options={{ ...glassHeaderOptions, title: workspace?.name ?? "" }}
-			>
+			<Stack.Screen options={{ ...glassHeaderOptions, title: "Workspace" }}>
 				<Stack.Title asChild>
 					<View className="max-w-64 items-center">
 						<Text className="font-semibold text-[17px]" numberOfLines={1}>

apps/mobile/screens/(authenticated)/workspace/[id]/commits/CommitsSheet.tsx

@@ -1,6 +1,6 @@
 import { useQueries } from "@tanstack/react-query";
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
-import { ArrowRight, GitCommitHorizontal } from "lucide-react-native";
+import { ArrowRight, GitCommitVertical } from "lucide-react-native";
 import { useMemo } from "react";
 import { FlatList, View } from "react-native";
 import { Icon } from "@/components/ui/icon";
@@ -68,7 +68,7 @@ export function CommitsSheet() {
 					<Text className="font-semibold text-[17px]">Commits</Text>
 					<View className="flex-row items-center gap-1.5">
 						<Icon
-							as={GitCommitHorizontal}
+							as={GitCommitVertical}
 							className="text-muted-foreground size-3.5"
 						/>
 						<Text className="text-muted-foreground text-xs">

apps/mobile/screens/(authenticated)/workspace/[id]/components/FileStatusBadge/FileStatusBadge.tsx

@@ -0,0 +1,35 @@
+import { View } from "react-native";
+import { Text } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+// Mirrors the desktop changes-view language (ChangesView/utils/status.tsx):
+// VS Code-style boxed glyphs — green +, yellow dot, red −, blue →, purple copy.
+const STATUS_STYLE: Record<string, { glyph: string; className: string }> = {
+	added: { glyph: "+", className: "border-green-400 text-green-400" },
+	untracked: { glyph: "+", className: "border-green-400 text-green-400" },
+	modified: { glyph: "•", className: "border-yellow-400 text-yellow-400" },
+	deleted: { glyph: "−", className: "border-red-400 text-red-400" },
+	renamed: { glyph: "→", className: "border-blue-400 text-blue-400" },
+	copied: { glyph: "⧉", className: "border-purple-400 text-purple-400" },
+};
+
+const FALLBACK_STYLE = {
+	glyph: "•",
+	className: "border-muted-foreground text-muted-foreground",
+};
+
+export function FileStatusBadge({ status }: { status: string }) {
+	const style = STATUS_STYLE[status] ?? FALLBACK_STYLE;
+	return (
+		<View
+			className={cn(
+				"size-5 items-center justify-center rounded border-[1.5px]",
+				style.className,
+			)}
+		>
+			<Text className={cn("font-bold text-[11px]", style.className)}>
+				{style.glyph}
+			</Text>
+		</View>
+	);
+}

apps/mobile/screens/(authenticated)/workspace/[id]/components/FileStatusBadge/index.ts

@@ -0,0 +1 @@
+export { FileStatusBadge } from "./FileStatusBadge";

apps/mobile/screens/(authenticated)/workspace/[id]/diff/WorkspaceDiffScreen.tsx

@@ -6,7 +6,7 @@ import {
 	Circle,
 	CircleDot,
 	FileDiff,
-	GitCommitHorizontal,
+	GitCommitVertical,
 	XCircle,
 } from "lucide-react-native";
 import { useCallback, useState } from "react";
@@ -141,7 +141,7 @@ export function WorkspaceDiffScreen() {
 					}
 				/>
 				<CardRow
-					icon={GitCommitHorizontal}
+					icon={GitCommitVertical}
 					label={
 						commits.length === 1 ? "1 commit" : `${commits.length} commits`
 					}

apps/mobile/screens/(authenticated)/workspace/[id]/file/FileViewerScreen.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import * as Clipboard from "expo-clipboard";
 import { Stack, useLocalSearchParams } from "expo-router";
-import { ActivityIndicator, ScrollView, View } from "react-native";
+import { ActivityIndicator, ScrollView, Share, View } from "react-native";
 import { CodeBlockContent } from "@/components/ai-elements/code-block";
 import { Text } from "@/components/ui/text";
 import { useWorkspaceHost } from "@/hooks/useWorkspaceHost";
@@ -10,38 +10,7 @@ import {
 	getHostServiceClientByUrl,
 } from "@/lib/host-service/client";
 import type { ChangesetSource } from "../hooks/useWorkspaceChangeset";
-
-const LANGUAGE_BY_EXTENSION: Record<string, string> = {
-	ts: "typescript",
-	mts: "typescript",
-	cts: "typescript",
-	tsx: "tsx",
-	js: "javascript",
-	mjs: "javascript",
-	cjs: "javascript",
-	jsx: "tsx",
-	json: "json",
-	jsonc: "json",
-	md: "markdown",
-	mdx: "markdown",
-	py: "python",
-	rs: "rust",
-	go: "go",
-	css: "css",
-	html: "html",
-	yml: "yaml",
-	yaml: "yaml",
-	sql: "sql",
-	sh: "bash",
-	bash: "bash",
-	zsh: "bash",
-	diff: "diff",
-};
-
-function languageForPath(path: string): string {
-	const extension = path.split(".").pop()?.toLowerCase() ?? "";
-	return LANGUAGE_BY_EXTENSION[extension] ?? "text";
-}
+import { languageForPath } from "../utils/languageForPath";
 
 export function FileViewerScreen() {
 	const { id, path, source } = useLocalSearchParams<{
@@ -75,25 +44,56 @@ export function FileViewerScreen() {
 
 	const contents = query.data?.newFile.contents ?? "";
 	const fileName = path?.split("/").pop() ?? "File";
+	const directory = path?.includes("/")
+		? path.slice(0, path.lastIndexOf("/"))
+		: null;
 
 	return (
 		<>
-			<Stack.Screen options={{ title: fileName }} />
-			<Stack.Toolbar placement="right">
-				<Stack.Toolbar.Button
-					icon="doc.on.doc"
-					accessibilityLabel="Copy path"
-					onPress={() => void Clipboard.setStringAsync(path ?? "")}
-				/>
-			</Stack.Toolbar>
+			<Stack.Screen options={{ title: fileName }}>
+				<Stack.Title asChild>
+					<View className="max-w-72 items-center">
+						<Text className="font-semibold text-[15px]" numberOfLines={1}>
+							{fileName}
+						</Text>
+						{directory ? (
+							<Text
+								className="text-muted-foreground text-[10.5px]"
+								numberOfLines={1}
+							>
+								{directory}
+							</Text>
+						) : null}
+					</View>
+				</Stack.Title>
+				<Stack.Toolbar placement="right">
+					<Stack.Toolbar.Menu icon="ellipsis" accessibilityLabel="File actions">
+						<Stack.Toolbar.MenuAction
+							icon="doc.on.doc"
+							onPress={() => void Clipboard.setStringAsync(path ?? "")}
+						>
+							Copy relative path
+						</Stack.Toolbar.MenuAction>
+						<Stack.Toolbar.MenuAction
+							icon="doc.on.doc"
+							onPress={() => void Clipboard.setStringAsync(fileName)}
+						>
+							Copy file name
+						</Stack.Toolbar.MenuAction>
+						<Stack.Toolbar.MenuAction
+							icon="square.and.arrow.up"
+							onPress={() => void Share.share({ message: contents })}
+						>
+							Share via…
+						</Stack.Toolbar.MenuAction>
+					</Stack.Toolbar.Menu>
+				</Stack.Toolbar>
+			</Stack.Screen>
 			<ScrollView
 				className="bg-background flex-1"
 				contentInsetAdjustmentBehavior="automatic"
 				contentContainerStyle={{ paddingBottom: 48 }}
 			>
-				<Text className="text-muted-foreground px-4 pb-2 pt-1 text-xs">
-					{path}
-				</Text>
 				{query.isLoading ? (
 					<View className="items-center py-20">
 						<ActivityIndicator />