From e44cb04961091a3d3c5b4576e80509ed5ecc8cdb Mon Sep 17 00:00:00 2001
From: tyler-builds <tylerccarr+github@proton.me>
Date: Fri, 20 Mar 2026 13:50:33 -0500
Subject: [PATCH 1/2] feat(diff): add line wrap toggle

---
 apps/web/src/components/DiffPanel.tsx | 29 ++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 34ad788814..3885a70e16 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -3,7 +3,13 @@ import { FileDiff, type FileDiffMetadata, Virtualizer } from "@pierre/diffs/reac
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { ThreadId, type TurnId } from "@t3tools/contracts";
-import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  Columns2Icon,
+  Rows3Icon,
+  WrapTextIcon,
+} from "lucide-react";
 import {
   type WheelEvent as ReactWheelEvent,
   useCallback,
@@ -30,6 +36,7 @@ import { DiffPanelLoadingState, DiffPanelShell, type DiffPanelMode } from "./Dif
 import { ToggleGroup, Toggle } from "./ui/toggle-group";
 
 type DiffRenderMode = "stacked" | "split";
+type DiffOverflowMode = "scroll" | "wrap";
 type DiffThemeType = "light" | "dark";
 
 const DIFF_PANEL_UNSAFE_CSS = `
@@ -162,6 +169,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   const { resolvedTheme } = useTheme();
   const { settings } = useAppSettings();
   const [diffRenderMode, setDiffRenderMode] = useState<DiffRenderMode>("stacked");
+  const [diffOverflowMode, setDiffOverflowMode] = useState<DiffOverflowMode>("scroll");
   const patchViewportRef = useRef<HTMLDivElement>(null);
   const turnStripRef = useRef<HTMLDivElement>(null);
   const [canScrollTurnStripLeft, setCanScrollTurnStripLeft] = useState(false);
@@ -509,6 +517,24 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
           <Columns2Icon className="size-3" />
         </Toggle>
       </ToggleGroup>
+      <ToggleGroup
+        className="shrink-0 [-webkit-app-region:no-drag]"
+        variant="outline"
+        size="xs"
+        value={[diffOverflowMode]}
+        onValueChange={(value) => {
+          const next = value[0];
+          if (next === "wrap") {
+            setDiffOverflowMode("wrap");
+          } else {
+            setDiffOverflowMode("scroll");
+          }
+        }}
+      >
+        <Toggle aria-label="Toggle line wrapping" value="wrap">
+          <WrapTextIcon className="size-3" />
+        </Toggle>
+      </ToggleGroup>
     </>
   );
 
@@ -584,6 +610,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
                           lineDiffType: "none",
                           theme: resolveDiffThemeName(resolvedTheme),
                           themeType: resolvedTheme as DiffThemeType,
+                          overflow: diffOverflowMode === "wrap" ? "wrap" : "scroll",
                           unsafeCSS: DIFF_PANEL_UNSAFE_CSS,
                         }}
                       />

From 87fad1ee42b843e174dba6bfb4f8f119fcb6bb12 Mon Sep 17 00:00:00 2001
From: tyler-builds <tylerccarr+github@proton.me>
Date: Fri, 20 Mar 2026 17:31:05 -0500
Subject: [PATCH 2/2] Change ToggleGroup to single Toggle for diff line
 wrapping

---
 apps/web/src/components/DiffPanel.tsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 3885a70e16..b9d1edb944 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -517,24 +517,18 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
           <Columns2Icon className="size-3" />
         </Toggle>
       </ToggleGroup>
-      <ToggleGroup
+      <Toggle
         className="shrink-0 [-webkit-app-region:no-drag]"
         variant="outline"
         size="xs"
-        value={[diffOverflowMode]}
-        onValueChange={(value) => {
-          const next = value[0];
-          if (next === "wrap") {
-            setDiffOverflowMode("wrap");
-          } else {
-            setDiffOverflowMode("scroll");
-          }
+        aria-label="Toggle line wrapping"
+        pressed={diffOverflowMode === "wrap"}
+        onPressedChange={(pressed) => {
+          setDiffOverflowMode(pressed ? "wrap" : "scroll");
         }}
       >
-        <Toggle aria-label="Toggle line wrapping" value="wrap">
-          <WrapTextIcon className="size-3" />
-        </Toggle>
-      </ToggleGroup>
+        <WrapTextIcon className="size-3" />
+      </Toggle>
     </>
   );