feat: wrap mobile review diffs (#445)

tests/test_my_work.py

@@ -3950,12 +3950,45 @@ process.stdout.write(JSON.stringify({{ html, expanded: button.attrs['aria-expand
     assert 'class="review-diff-line review-inline-target removed"' in output["html"]
     assert 'data-old-position="1"' in output["html"]
     assert 'data-new-position="1"' in output["html"]
+    assert '<span class="review-line-numbers" aria-hidden="true"><span class="review-line-number old">1</span><span class="review-line-number new"></span></span>' in output["html"]
+    assert '<span class="review-line-numbers" aria-hidden="true"><span class="review-line-number old"></span><span class="review-line-number new">1</span></span>' in output["html"]
+    assert '<span class="review-line-code">-old &lt;token&gt;</span>' in output["html"]
+    assert '<span class="review-line-code">+new &amp; safe</span>' in output["html"]
     assert 'aria-label="Comment on src/&lt;api&gt;.py line 1"' in output["html"]
     assert 'Mark reviewed' in output["html"]
     assert output["expanded"] == "true"
     assert output["hidden"] is False
 
 
+def test_review_wrap_preference_defaults_to_phone_layout_and_persists_explicit_choice():
+    script = f"""
+const reviewSheet = require({json.dumps(str(REVIEW_SHEET))});
+const values = new Map();
+const storage = {{
+  getItem: key => values.has(key) ? values.get(key) : null,
+  setItem: (key, value) => values.set(key, value),
+}};
+const phone = reviewSheet.createWrapPreference({{storage, mobile: true}});
+const initial = phone.snapshot();
+const disabled = phone.setWrapped(false);
+const restoredPhone = reviewSheet.createWrapPreference({{storage, mobile: true}}).snapshot();
+const restoredDesktop = reviewSheet.createWrapPreference({{storage, mobile: false}}).snapshot();
+process.stdout.write(JSON.stringify({{initial, disabled, restoredPhone, restoredDesktop,
+  stored: values.get('stackchain.review-wrap.v1')}}));
+"""
+    result = subprocess.run(
+        ["node", "-e", script], check=True, capture_output=True, text=True
+    )
+
+    assert json.loads(result.stdout) == {
+        "initial": {"wrapped": True, "explicit": False},
+        "disabled": {"wrapped": False, "explicit": True},
+        "restoredPhone": {"wrapped": False, "explicit": True},
+        "restoredDesktop": {"wrapped": False, "explicit": True},
+        "stored": "false",
+    }
+
+
 def test_review_diff_parser_maps_multi_hunk_lines_to_old_or_new_positions():
     script = f"""
 const reviewSheet = require({json.dumps(str(REVIEW_SHEET))});
@@ -3973,14 +4006,14 @@ process.stdout.write(JSON.stringify(rows));
 
     assert json.loads(result.stdout) == [
         {"text": "@@ -10,3 +20,4 @@ function run()", "kind": "hunk", "commentable": False},
-        {"text": " context", "kind": "context", "commentable": True, "new_position": 20},
-        {"text": "-removed", "kind": "removed", "commentable": True, "old_position": 11},
-        {"text": "+added", "kind": "added", "commentable": True, "new_position": 21},
-        {"text": "+second", "kind": "added", "commentable": True, "new_position": 22},
+        {"text": " context", "kind": "context", "commentable": True, "old_line": 10, "new_line": 20, "new_position": 20},
+        {"text": "-removed", "kind": "removed", "commentable": True, "old_line": 11, "old_position": 11},
+        {"text": "+added", "kind": "added", "commentable": True, "new_line": 21, "new_position": 21},
+        {"text": "+second", "kind": "added", "commentable": True, "new_line": 22, "new_position": 22},
         {"text": "\\ No newline at end of file", "kind": "note", "commentable": False},
         {"text": "@@ -40 +51 @@", "kind": "hunk", "commentable": False},
-        {"text": "-old tail", "kind": "removed", "commentable": True, "old_position": 40},
-        {"text": "+new tail", "kind": "added", "commentable": True, "new_position": 51},
+        {"text": "-old tail", "kind": "removed", "commentable": True, "old_line": 40, "old_position": 40},
+        {"text": "+new tail", "kind": "added", "commentable": True, "new_line": 51, "new_position": 51},
     ]
 
 
@@ -4207,6 +4240,25 @@ async def test_review_requests_open_an_accessible_mobile_detail_sheet():
     assert '.review-diff' in html and 'overflow-x:auto' in html
 
 
+@pytest.mark.anyio
+async def test_mobile_review_wraps_long_lines_with_gutters_and_persisted_toggle():
+    html = await dashboard()
+
+    assert 'id="review-wrap-lines"' in html
+    assert 'aria-pressed="false"' in html
+    assert 'aria-controls="review-files"' in html
+    assert "createReviewController.createWrapPreference" in html
+    assert "matchMedia('(max-width: 600px)').matches" in html
+    assert "reviewFilesElement.classList.toggle('wrap-lines', snapshot.wrapped)" in html
+    assert "wrapPreference.setWrapped" in html
+    assert '.review-display-tools button' in html and 'min-height:44px' in html
+    assert '.review-line-numbers' in html and 'grid-template-columns:4ch 4ch' in html
+    assert '.review-line-code' in html and 'overflow-wrap:anywhere' in html
+    assert '.wrap-lines .review-diff' in html and 'overflow-x:hidden' in html
+    assert '.wrap-lines .review-diff-line' in html and 'min-width:0' in html
+    assert '.wrap-lines .review-line-code' in html and 'white-space:pre-wrap' in html
+
+
 @pytest.mark.anyio
 async def test_review_attention_drafts_require_revision_instead_of_resending_stale_payload():
     html = await dashboard()