diff --git a/frontend/src/app.ts b/frontend/src/app.ts
index ac36f997fdb866ca1569bfa1829732ef29341591..93b232123fc9776e0121b7c9d9ec4e19d8746286 100644
--- a/frontend/src/app.ts
+++ b/frontend/src/app.ts
@@ -6,6 +6,7 @@  *   <script id="compare-data" type="application/json">{...}</script>
  *   <div id="tree-root">   (file tree sidebar)
  *   <div id="diff-root">   (per-file diff sections)
  *   <button data-diff-layout="split">  / <button data-diff-layout="stacked">
+ *   <button data-diff-wrap>  (long-line wrapping toggle)
  *
  * Rendering uses @pierre/diffs (FileDiff vanilla class) for each file and
  * @pierre/trees (FileTree vanilla class) for the sidebar. Both render on the
@@ -42,6 +43,7 @@
 // ---- Constants ------------------------------------------------------------
 
 const LAYOUT_KEY = "compare.layout";
+const WRAP_KEY = "compare.wrap";
 const DEFAULT_LAYOUT: Layout = "split";
 
 // Auto light/dark: FileDiff selects the entry matching `themeType`. With
@@ -79,11 +81,42 @@     /* ignore persistence failures */
   }
 }
 
+function readWrap(): boolean {
+  try {
+    return localStorage.getItem(WRAP_KEY) === "true";
+  } catch {
+    /* localStorage may be unavailable (private mode); fall through */
+  }
+  return false;
+}
+
+function writeWrap(wrap: boolean): void {
+  try {
+    localStorage.setItem(WRAP_KEY, String(wrap));
+  } catch {
+    /* ignore persistence failures */
+  }
+}
+
 // "stacked" is the user-facing name for the unified diff style.
 function diffStyleFor(layout: Layout): "unified" | "split" {
   return layout === "split" ? "split" : "unified";
 }
 
+function diffOptionsFor(
+  layout: Layout,
+  wrap: boolean,
+): FileDiffOptions<undefined> {
+  return {
+    theme: THEME,
+    themeType: "system",
+    diffStyle: diffStyleFor(layout),
+    overflow: wrap ? "wrap" : "scroll",
+    // We render our own header row above, so disable the library header.
+    disableFileHeader: true,
+  };
+}
+
 function gitStatusFor(status: string): GitStatus {
   switch (status.toUpperCase()[0]) {
     case "A":
@@ -152,6 +185,7 @@   root: HTMLElement,
   data: CompareData,
   metaByPath: Map<string, FileDiffMetadata>,
   layout: Layout,
+  wrap: boolean,
 ): FileDiff[] {
   root.textContent = "";
   const instances: FileDiff[] = [];
@@ -160,8 +194,6 @@   if (data.files.length === 0) {
     root.append(el("div", "diff-empty", "No changes to display."));
     return instances;
   }
-
-  const style = diffStyleFor(layout);
 
   data.files.forEach((file, index) => {
     const section = el("section", "diff-file");
@@ -184,14 +216,7 @@       body.append(el("div", "diff-file-note", "No textual diff available."));
       return;
     }
 
-    const options: FileDiffOptions<undefined> = {
-      theme: THEME,
-      themeType: "system",
-      diffStyle: style,
-      // We render our own header row above, so disable the library header.
-      disableFileHeader: true,
-    };
-    const instance = new FileDiff(options);
+    const instance = new FileDiff(diffOptionsFor(layout, wrap));
     instance.render({ fileDiff: meta, containerWrapper: body });
     instances.push(instance);
   });
@@ -280,43 +305,53 @@   // hugging its content as rows appear and disappear.
   tree.subscribe(apply);
 }
 
-function wireLayoutToggle(
-  buttons: HTMLButtonElement[],
+function wireDiffControls(
+  layoutButtons: HTMLButtonElement[],
+  wrapButton: HTMLButtonElement | null,
   getInstances: () => FileDiff[],
-  initial: Layout,
+  initialLayout: Layout,
+  initialWrap: boolean,
 ): void {
-  let current = initial;
+  let layout = initialLayout;
+  let wrap = initialWrap;
 
-  const apply = (layout: Layout) => {
-    current = layout;
-    writeLayout(layout);
-    for (const btn of buttons) {
+  const reflectControls = () => {
+    for (const btn of layoutButtons) {
       btn.classList.toggle("active", btn.dataset.diffLayout === layout);
     }
-    const style = diffStyleFor(layout);
+    wrapButton?.classList.toggle("active", wrap);
+    wrapButton?.setAttribute("aria-pressed", String(wrap));
+  };
+
+  const rerender = () => {
     for (const instance of getInstances()) {
-      instance.setOptions({
-        theme: THEME,
-        themeType: "system",
-        diffStyle: style,
-        disableFileHeader: true,
-      });
+      instance.setOptions(diffOptionsFor(layout, wrap));
       instance.rerender();
     }
   };
 
-  for (const btn of buttons) {
+  for (const btn of layoutButtons) {
     btn.addEventListener("click", (ev) => {
       ev.preventDefault();
-      const layout = btn.dataset.diffLayout;
-      if (layout === "split" || layout === "stacked") apply(layout);
+      const next = btn.dataset.diffLayout;
+      if (next !== "split" && next !== "stacked") return;
+      layout = next;
+      writeLayout(layout);
+      reflectControls();
+      rerender();
     });
   }
 
-  // Reflect the initial (possibly persisted) layout on the buttons.
-  for (const btn of buttons) {
-    btn.classList.toggle("active", btn.dataset.diffLayout === current);
-  }
+  wrapButton?.addEventListener("click", (ev) => {
+    ev.preventDefault();
+    wrap = !wrap;
+    writeWrap(wrap);
+    reflectControls();
+    rerender();
+  });
+
+  // Reflect the initial (possibly persisted) options on the controls.
+  reflectControls();
 }
 
 function main(): void {
@@ -328,6 +363,7 @@   const treeRoot = document.getElementById("tree-root");
   if (!diffRoot) return;
 
   const layout = readLayout();
+  const wrap = readWrap();
 
   // parsePatchFiles returns one ParsedPatch per commit; each has a `files`
   // array of FileDiffMetadata. Flatten across patches and index by path.
@@ -344,14 +380,17 @@       console.error("compare: failed to parse patch", err);
     }
   }
 
-  const instances = renderDiffs(diffRoot, data, metaByPath, layout);
+  const instances = renderDiffs(diffRoot, data, metaByPath, layout, wrap);
   if (treeRoot) buildTree(treeRoot, data);
 
   const buttons = Array.from(
     document.querySelectorAll<HTMLButtonElement>("button[data-diff-layout]"),
   );
-  if (buttons.length > 0) {
-    wireLayoutToggle(buttons, () => instances, layout);
+  const wrapButton = document.querySelector<HTMLButtonElement>(
+    "button[data-diff-wrap]",
+  );
+  if (buttons.length > 0 || wrapButton) {
+    wireDiffControls(buttons, wrapButton, () => instances, layout, wrap);
   }
 }