Persist diff view toggle with localStorage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@because/sandlot",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "description": "Sandboxed, branch-based development with Claude",
   "type": "module",
   "bin": {

src/commands/diff.html

@@ -23,6 +23,12 @@
 <div class="header">
   <h1><code>{{BRANCH}}</code></h1>
   {{PROMPT_SECTION}}
+  <div style="margin: 12px 0;">
+    <label style="cursor:pointer; user-select:none; font-size:14px; color:#8b949e;">
+      <input type="checkbox" id="unified-toggle" style="cursor:pointer; vertical-align:middle; margin-right:6px;">
+      Unified
+    </label>
+  </div>
   <div class="meta">
     {{LOG_SECTION}}
     {{STAT_SECTION}}
@@ -34,16 +40,49 @@
 <script>
   const diffString = {{DIFF_JSON}};
   const targetElement = document.getElementById("diff");
-  const configuration = {
+  const toggle = document.getElementById("unified-toggle");
-    drawFileList: true,
+
-    matching: "lines",
+  // Split raw diff into per-file chunks and classify each
-    outputFormat: "side-by-side",
+  function splitDiff(raw) {
-    highlight: true,
+    const files = [];
-    colorScheme: "dark",
+    const parts = raw.split(/^(?=diff --git )/m);
-  };
+    for (const part of parts) {
-  const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
+      if (!part.trim()) continue;
-  diff2htmlUi.draw();
+      const isNew = /^new file mode/m.test(part);
-  diff2htmlUi.highlightCode();
+      const isDeleted = /^deleted file mode/m.test(part);
+      files.push({ raw: part, isNew, isDeleted });
+    }
+    return files;
+  }
+
+  const files = splitDiff(diffString);
+
+  function renderAll(modifiedFormat) {
+    targetElement.innerHTML = "";
+    for (const file of files) {
+      const div = document.createElement("div");
+      targetElement.appendChild(div);
+      const format = (file.isNew || file.isDeleted) ? "line-by-line" : modifiedFormat;
+      const ui = new Diff2HtmlUI(div, file.raw, {
+        drawFileList: false,
+        matching: "lines",
+        outputFormat: format,
+        highlight: true,
+        colorScheme: "dark",
+      }, hljs);
+      ui.draw();
+      ui.highlightCode();
+    }
+  }
+
+  const saved = localStorage.getItem("sandlot-unified") === "1";
+  toggle.checked = saved;
+  renderAll(saved ? "line-by-line" : "side-by-side");
+
+  toggle.addEventListener("change", function () {
+    localStorage.setItem("sandlot-unified", this.checked ? "1" : "0");
+    renderAll(this.checked ? "line-by-line" : "side-by-side");
+  });
 </script>
 </body>
 </html>