feat(chat): add fullscreen diffs and task change review

app/_layout.tsx

@@ -186,6 +186,7 @@ function RootLayout() {
               }}
             >
               <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+              <Stack.Screen name="content-viewer" options={{ headerShown: false, presentation: "card" }} />
               <Stack.Screen
                 name="session/[id]"
                 options={{

app/content-viewer.tsx

@@ -0,0 +1,129 @@
+import { useState } from "react"
+import { Ionicons } from "@expo/vector-icons"
+import * as Clipboard from "expo-clipboard"
+import { Stack, useRouter } from "expo-router"
+import { Platform, ScrollView, StyleSheet, Text, TouchableOpacity, useColorScheme, View } from "react-native"
+import { useTranslation } from "react-i18next"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { WIDE_CONTENT_SCROLL_CONFIG } from "../src/lib/scroll-config"
+import { getContentViewer } from "../src/lib/content-viewer"
+import { parseDiffText, type DiffLine } from "../src/components/chat/diff-compute"
+
+function DiffContent({ lines, isDark }: { lines: DiffLine[]; isDark: boolean }) {
+  return (
+    <View style={s.diffLines}>
+      {lines.map((line, index) => (
+        <View
+          key={index}
+          style={[
+            s.diffLine,
+            line.type === "add" && (isDark ? s.diffAddDark : s.diffAdd),
+            line.type === "remove" && (isDark ? s.diffRemoveDark : s.diffRemove),
+          ]}
+        >
+          <Text style={[s.diffPrefix, isDark && s.diffPrefixDark]}>
+            {line.type === "add" ? "+" : line.type === "remove" ? "-" : " "}
+          </Text>
+          <Text
+            selectable
+            style={[
+              s.code,
+              isDark && s.codeDark,
+              line.type === "add" && s.diffAddText,
+              line.type === "remove" && s.diffRemoveText,
+            ]}
+          >
+            {line.text}
+          </Text>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+export default function ContentViewerScreen() {
+  const router = useRouter()
+  const insets = useSafeAreaInsets()
+  const isDark = useColorScheme() === "dark"
+  const { t } = useTranslation()
+  const [copied, setCopied] = useState(false)
+  const viewer = getContentViewer()
+
+  if (!viewer) {
+    return (
+      <View style={[s.empty, isDark && s.emptyDark]}>
+        <Text style={[s.emptyText, isDark && s.textDark]}>{t("chat.contentViewer.empty")}</Text>
+      </View>
+    )
+  }
+
+  const isDiff = viewer.language === "diff"
+  const diffLines = isDiff ? parseDiffText(viewer.content) : []
+
+  const copy = async () => {
+    await Clipboard.setStringAsync(viewer.content)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <View style={[s.screen, isDark && s.screenDark]}>
+      <Stack.Screen options={{ headerShown: false }} />
+      <View style={[s.toolbar, isDark && s.toolbarDark, { paddingTop: insets.top + 8 }]}>
+        <TouchableOpacity onPress={() => router.back()} style={s.toolbarButton} hitSlop={8}>
+          <Ionicons name="arrow-back" size={22} color={isDark ? "#fff" : "#111"} />
+          <Text style={[s.backText, isDark && s.textDark]}>{t("common.back")}</Text>
+        </TouchableOpacity>
+        <Text style={[s.title, isDark && s.textDark]} numberOfLines={1}>{viewer.title}</Text>
+        <TouchableOpacity onPress={copy} style={s.toolbarButton} hitSlop={8}>
+          <Ionicons name="copy-outline" size={20} color={isDark ? "#c4b5fd" : "#6d28d9"} />
+          <Text style={[s.copyText, isDark && s.copyTextDark]}>{copied ? t("common.copied") : t("common.copy")}</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={[s.content, isDark && s.contentDark]}>
+        <Text style={[s.language, isDark && s.languageDark]}>{viewer.language || t("chat.contentViewer.output")}</Text>
+        <ScrollView {...WIDE_CONTENT_SCROLL_CONFIG} style={s.horizontal} contentContainerStyle={s.scrollContent}>
+          <ScrollView nestedScrollEnabled contentContainerStyle={s.verticalContent}>
+            {isDiff ? <DiffContent lines={diffLines} isDark={isDark} /> : <Text selectable style={[s.code, isDark && s.codeDark]}>{viewer.content}</Text>}
+          </ScrollView>
+        </ScrollView>
+      </View>
+    </View>
+  )
+}
+
+const mono = Platform.OS === "ios" ? "Menlo" : "monospace"
+const s = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: "#f5f5f5" },
+  screenDark: { backgroundColor: "#0a0a0a" },
+  toolbar: { minHeight: 64, paddingHorizontal: 14, flexDirection: "row", alignItems: "center", justifyContent: "space-between", backgroundColor: "#fff", borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: "#ddd" },
+  toolbarDark: { backgroundColor: "#151515", borderBottomColor: "#333" },
+  toolbarButton: { flexDirection: "row", alignItems: "center", gap: 5, minWidth: 72 },
+  backText: { fontSize: 13, color: "#111" },
+  title: { flex: 1, textAlign: "center", fontSize: 15, fontWeight: "700", color: "#111" },
+  copyText: { fontSize: 12, color: "#6d28d9" },
+  copyTextDark: { color: "#c4b5fd" },
+  content: { flex: 1, margin: 10, borderRadius: 8, overflow: "hidden", backgroundColor: "#fff" },
+  contentDark: { backgroundColor: "#1a1a1a" },
+  language: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 11, fontWeight: "700", color: "#666", textTransform: "uppercase", backgroundColor: "#e8e8e8" },
+  languageDark: { color: "#aaa", backgroundColor: "#2a2a2a" },
+  horizontal: { flex: 1 },
+  scrollContent: { minWidth: "100%", flexGrow: 1 },
+  verticalContent: { padding: 14 },
+  code: { fontFamily: mono, fontSize: 13, lineHeight: 20, color: "#171717" },
+  codeDark: { color: "#e5e5e5" },
+  diffLines: { alignSelf: "flex-start", minWidth: "100%" },
+  diffLine: { flexDirection: "row", paddingHorizontal: 8, paddingVertical: 1 },
+  diffAdd: { backgroundColor: "#dcfce7" },
+  diffAddDark: { backgroundColor: "#052e16" },
+  diffRemove: { backgroundColor: "#fee2e2" },
+  diffRemoveDark: { backgroundColor: "#2a0a0a" },
+  diffPrefix: { width: 16, fontSize: 13, fontFamily: mono, lineHeight: 20, color: "#999999" },
+  diffPrefixDark: { color: "#666666" },
+  diffAddText: { color: "#16a34a" },
+  diffRemoveText: { color: "#dc2626" },
+  empty: { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: "#fff" },
+  emptyDark: { backgroundColor: "#0a0a0a" },
+  emptyText: { color: "#111" },
+  textDark: { color: "#fff" },
+})

app/session/[id].tsx

@@ -39,6 +39,7 @@ import { useConnections } from "../../src/stores/connections"
 import { useAuth } from "../../src/stores/auth"
 import { useCatalog } from "../../src/stores/catalog"
 import { useSpeech } from "../../src/lib/speech"
+import { reviewDiffsForMessage } from "../../src/lib/review-diffs"
 
 // --- Builtin slash commands ---
 const BUILTIN_COMMANDS: SlashCommand[] = [
@@ -179,14 +180,17 @@ export default function SessionScreen() {
 
   // Inverted FlatList: data is reversed (newest first) so newest renders at bottom
   const messageData = useMemo(
-    () =>
-      (messages || [])
+    () => {
+      const visible = (messages || [])
         .filter((msg) => !revertMessageID || msg.id.startsWith("temp-") || msg.id < revertMessageID)
+      return visible
         .map((msg) => ({
           message: msg,
           parts: (parts && parts[msg.id]) || [],
+          reviewDiffs: reviewDiffsForMessage(msg, visible),
         }))
-        .reverse(),
+        .reverse()
+    },
     [messages, parts, revertMessageID],
   )
 
@@ -675,6 +679,7 @@ export default function SessionScreen() {
                   message={item.message}
                   parts={item.parts}
                   isDark={isDark}
+                  reviewDiffs={item.reviewDiffs}
                   onLongPress={handleMessageLongPress}
                 />
               )}

src/components/chat/ContentViewerButton.tsx

@@ -0,0 +1,49 @@
+import { Ionicons } from "@expo/vector-icons"
+import { useRouter } from "expo-router"
+import { Text, TouchableOpacity, StyleSheet } from "react-native"
+import { useTranslation } from "react-i18next"
+import { setContentViewer } from "../../lib/content-viewer"
+
+interface Props {
+  title: string
+  content: string
+  language?: string
+  isDark: boolean
+}
+
+export function ContentViewerButton({ title, content, language, isDark }: Props) {
+  const router = useRouter()
+  const { t } = useTranslation()
+
+  if (!content) return null
+
+  return (
+    <TouchableOpacity
+      style={[s.button, isDark && s.buttonDark]}
+      onPress={() => {
+        setContentViewer({ title, language, content })
+        router.push("/content-viewer")
+      }}
+      hitSlop={6}
+    >
+      <Ionicons name="expand-outline" size={14} color={isDark ? "#c4b5fd" : "#6d28d9"} />
+      <Text style={[s.text, isDark && s.textDark]}>{t("chat.contentViewer.open")}</Text>
+    </TouchableOpacity>
+  )
+}
+
+const s = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-end",
+    gap: 5,
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderRadius: 5,
+    backgroundColor: "#ede9fe",
+  },
+  buttonDark: { backgroundColor: "#312e81" },
+  text: { fontSize: 11, fontWeight: "600", color: "#6d28d9" },
+  textDark: { color: "#c4b5fd" },
+})

src/components/chat/DiffView.tsx

@@ -1,9 +1,17 @@
 import { View, Text, StyleSheet, Platform, ScrollView } from "react-native"
 import { WIDE_CONTENT_SCROLL_CONFIG } from "../../lib/scroll-config"
 import { computeDiff } from "./diff-compute"
+import { ContentViewerButton } from "./ContentViewerButton"
 
 const mono = Platform.OS === "ios" ? "Menlo" : "monospace"
 
+export interface DiffLinesProps {
+  lines: ReturnType<typeof computeDiff>
+  isDark: boolean
+  title?: string
+  maxHeight?: number
+}
+
 interface Props {
   before: string
   after: string
@@ -13,11 +21,26 @@ interface Props {
 export function DiffView({ before, after, isDark }: Props) {
   const lines = computeDiff(before, after)
 
+  return <DiffLinesView lines={lines} isDark={isDark} title="diff" />
+}
+
+export function DiffLinesView({ lines, isDark, title, maxHeight }: DiffLinesProps) {
+
   if (lines.length === 0) return null
 
+  const fullDiff = lines.map((line) => `${line.type === "add" ? "+" : line.type === "remove" ? "-" : " "}${line.text}`).join("\n")
+
   return (
     <View style={[s.container, isDark && s.containerDark]}>
-      <ScrollView {...WIDE_CONTENT_SCROLL_CONFIG} testID="diff-view-scroll">
+      <View style={s.header}>
+        <ContentViewerButton title={title || "diff"} content={fullDiff} language="diff" isDark={isDark} />
+      </View>
+      <ScrollView
+        {...WIDE_CONTENT_SCROLL_CONFIG}
+        style={maxHeight ? { maxHeight } : undefined}
+        nestedScrollEnabled={maxHeight !== undefined}
+        testID="diff-view-scroll"
+      >
         <View>
           {lines.map((line, idx) => (
             <View
@@ -58,6 +81,7 @@ const s = StyleSheet.create({
     marginTop: 6,
   },
   containerDark: { backgroundColor: "#1a1a1a" },
+  header: { alignItems: "flex-end", paddingHorizontal: 8, paddingTop: 6 },
 
   line: {
     flexDirection: "row",

src/components/chat/MessageBubble.tsx

@@ -4,7 +4,8 @@ import { Ionicons } from "@expo/vector-icons"
 import { Markdown } from "../markdown"
 import { ToolCallCard } from "./ToolCallCard"
 import { ReasoningBlock } from "./ReasoningBlock"
-import type { Message, Part } from "../../lib/sdk"
+import { ReviewChanges } from "./ReviewChanges"
+import type { FileDiff, Message, Part } from "../../lib/sdk"
 
 const SCREEN_WIDTH = Dimensions.get("window").width
 
@@ -16,6 +17,7 @@ interface Props {
   message: Message
   parts: Part[]
   isDark: boolean
+  reviewDiffs?: FileDiff[]
   // Only wired up for user messages — long-press opens the "Edit message" /
   // revert action sheet. Identified by messageID (not a closure over parts)
   // so it stays correct even if the memo below bails on a stale render.
@@ -25,7 +27,7 @@ interface Props {
 // TODO: Replace with streamdown-rn once React 19 types PR lands - it has
 // built-in block-level memoization that eliminates re-renders for stable blocks
 export const MessageBubble = memo(
-  function MessageBubble({ message, parts, isDark, onLongPress }: Props) {
+  function MessageBubble({ message, parts, isDark, reviewDiffs, onLongPress }: Props) {
     const isUser = message.role === "user"
 
     const textParts = parts.filter((p) => p.type === "text")
@@ -101,6 +103,8 @@ export const MessageBubble = memo(
           <ToolCallCard key={tool.id} tool={tool} isDark={isDark} />
         ))}
 
+        {!isUser && reviewDiffs && reviewDiffs.length > 0 && <ReviewChanges diffs={reviewDiffs} isDark={isDark} />}
+
         {/* Tokens/cost for assistant messages */}
         {!isUser && message.tokens && (
           <Text style={[s.tokens, isDark && s.tokensDark]}>
@@ -121,6 +125,7 @@ export const MessageBubble = memo(
     if (prev.message !== next.message) return false
     if (prev.isDark !== next.isDark) return false
     if (prev.onLongPress !== next.onLongPress) return false
+    if (prev.reviewDiffs !== next.reviewDiffs) return false
     if (prev.parts.length !== next.parts.length) return false
     for (let i = 0; i < prev.parts.length; i++) {
       if (prev.parts[i] !== next.parts[i]) return false