feat(app): add desktop setting to toggle file changes display

packages/app/src/components/settings-general.tsx

@@ -411,6 +411,20 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
+
+        <Show when={desktop()}>
+          <SettingsRow
+            title={language.t("settings.general.row.showFileChanges.title")}
+            description={language.t("settings.general.row.showFileChanges.description")}
+          >
+            <div data-action="settings-show-file-changes">
+              <Switch
+                checked={settings.general.showFileChanges()}
+                onChange={(checked) => settings.general.setShowFileChanges(checked)}
+              />
+            </div>
+          </SettingsRow>
+        </Show>
       </SettingsList>
     </div>
   )

packages/app/src/context/settings.tsx

@@ -34,6 +34,7 @@ export interface Settings {
     showSessionProgressBar: boolean
     showCustomAgents: boolean
     newLayoutDesigns?: boolean
+    showFileChanges: boolean
   }
   updates: {
     startup: boolean
@@ -121,6 +122,8 @@ const defaultSettings: Settings = {
     editToolPartsExpanded: false,
     showSessionProgressBar: true,
     showCustomAgents: false,
+    newLayoutDesigns: newLayoutDesignsDefault,
+    showFileChanges: true,
   },
   updates: {
     startup: true,
@@ -248,6 +251,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setNewLayoutDesigns(value: boolean) {
           setStore("general", "newLayoutDesigns", value)
         },
+        showFileChanges: withFallback(() => store.general?.showFileChanges, defaultSettings.general.showFileChanges),
+        setShowFileChanges(value: boolean) {
+          setStore("general", "showFileChanges", value)
+        },
       },
       updates: {
         startup: withFallback(() => store.updates?.startup, defaultSettings.updates.startup),

packages/app/src/i18n/en.ts

@@ -793,6 +793,9 @@ export const dict = {
     "Display the animated progress bar at the top of the session when the agent is working",
   "settings.general.row.newLayoutDesigns.title": "New layout and designs",
   "settings.general.row.newLayoutDesigns.description": "Enable the redesigned layout, home, composer, and session UI",
+  "settings.general.row.showFileChanges.title": "Show file changes",
+  "settings.general.row.showFileChanges.description":
+    "Display the changed file summary in the session timeline",
   "settings.general.row.pinchZoom.title": "Pinch to zoom",
   "settings.general.row.pinchZoom.description": "Allow trackpad pinch and Ctrl-scroll gestures to zoom",
 

packages/app/src/pages/session/message-timeline.tsx

@@ -1227,11 +1227,13 @@ export function MessageTimeline(props: {
       case "DiffSummary": {
         const diffSummaryRow = row as Accessor<TimelineRowByTag<"DiffSummary">>
         return (
-          <TimelineRowFrame row={diffSummaryRow}>
-            <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
-              <TimelineDiffSummaryRow diffs={diffSummaryRow().diffs} />
-            </div>
-          </TimelineRowFrame>
+          <Show when={platform.platform !== "desktop" || settings.general.showFileChanges()}>
+            <TimelineRowFrame row={diffSummaryRow}>
+              <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
+                <TimelineDiffSummaryRow diffs={diffSummaryRow().diffs} />
+              </div>
+            </TimelineRowFrame>
+          </Show>
         )
       }
       case "Error": {