From 86e9ef9d53d686aa61ab841d0dd7d1e2ca447059 Mon Sep 17 00:00:00 2001
From: yuhuahung <yuhuahung@synology.com>
Date: Wed, 8 Jul 2026 14:14:15 +0800
Subject: [PATCH 1/7] feat(ui): add span-level word wrapper wrap_spans

---
 src/ui/text_utils.rs | 299 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 298 insertions(+), 1 deletion(-)

diff --git a/src/ui/text_utils.rs b/src/ui/text_utils.rs
index 371d5ed0..b953d8cf 100644
--- a/src/ui/text_utils.rs
+++ b/src/ui/text_utils.rs
@@ -1,5 +1,5 @@
 use ratatui::{style::Style, text::Span};
-use unicode_width::UnicodeWidthStr;
+use unicode_width::{UnicodeWidthChar, UnicodeWidthStr};
 
 pub(super) fn truncate_str(s: &str, max_len: usize) -> String {
     if s.len() <= max_len {
@@ -93,9 +93,171 @@ pub(super) fn truncate_or_pad_spans(
     }
 }
 
+pub(super) fn wrap_spans<'a>(spans: &[Span<'a>], width: usize) -> Vec<Vec<Span<'a>>> {
+    if width == 0 {
+        return vec![spans.to_vec()];
+    }
+    if spans.is_empty() || spans.iter().all(|s| s.content.is_empty()) {
+        return vec![vec![]];
+    }
+    let total: usize = spans.iter().map(|s| s.content.width()).sum();
+    if total <= width {
+        return vec![spans.to_vec()];
+    }
+
+    #[derive(Clone)]
+    struct Item {
+        ch: char,
+        style: Style,
+        w: usize,
+    }
+
+    fn flush_unit(
+        unit: &mut Vec<Item>,
+        unit_w: &mut usize,
+        current: &mut Vec<Item>,
+        current_w: &mut usize,
+        rows: &mut Vec<Vec<Item>>,
+        width: usize,
+    ) {
+        if unit.is_empty() {
+            return;
+        }
+        if *current_w + *unit_w <= width {
+            current.append(unit);
+            *current_w += *unit_w;
+            *unit_w = 0;
+            return;
+        }
+        if *unit_w <= width {
+            rows.push(std::mem::take(current));
+            *current_w = *unit_w;
+            current.append(unit);
+            *unit_w = 0;
+            return;
+        }
+        while !unit.is_empty() {
+            let remaining = width.saturating_sub(*current_w);
+            let mut consumed = 0usize;
+            let mut consumed_w = 0usize;
+            for it in unit.iter() {
+                if consumed_w + it.w > remaining {
+                    break;
+                }
+                consumed_w += it.w;
+                consumed += 1;
+            }
+            if consumed == 0 {
+                if current.is_empty() {
+                    let it = unit.remove(0);
+                    let w = it.w;
+                    current.push(it);
+                    *current_w = w;
+                    rows.push(std::mem::take(current));
+                    *current_w = 0;
+                } else {
+                    rows.push(std::mem::take(current));
+                    *current_w = 0;
+                }
+            } else {
+                let drained: Vec<Item> = unit.drain(..consumed).collect();
+                current.extend(drained);
+                *current_w += consumed_w;
+                if !unit.is_empty() {
+                    rows.push(std::mem::take(current));
+                    *current_w = 0;
+                }
+            }
+        }
+        *unit_w = 0;
+    }
+
+    let mut rows: Vec<Vec<Item>> = Vec::new();
+    let mut current: Vec<Item> = Vec::new();
+    let mut current_w: usize = 0;
+    let mut word: Vec<Item> = Vec::new();
+    let mut word_w: usize = 0;
+
+    for span in spans {
+        for ch in span.content.chars() {
+            let w = UnicodeWidthChar::width(ch).unwrap_or(if ch == '\t' { 1 } else { 0 });
+            let item = Item {
+                ch,
+                style: span.style,
+                w,
+            };
+            if ch == ' ' || ch == '\t' {
+                flush_unit(
+                    &mut word,
+                    &mut word_w,
+                    &mut current,
+                    &mut current_w,
+                    &mut rows,
+                    width,
+                );
+                let mut ws = vec![item];
+                let mut ws_w = w;
+                flush_unit(
+                    &mut ws,
+                    &mut ws_w,
+                    &mut current,
+                    &mut current_w,
+                    &mut rows,
+                    width,
+                );
+            } else {
+                word.push(item);
+                word_w += w;
+            }
+        }
+    }
+    flush_unit(
+        &mut word,
+        &mut word_w,
+        &mut current,
+        &mut current_w,
+        &mut rows,
+        width,
+    );
+    if !current.is_empty() || rows.is_empty() {
+        rows.push(current);
+    }
+
+    rows.into_iter()
+        .map(|row| {
+            let mut out: Vec<Span<'a>> = Vec::new();
+            let mut buf = String::new();
+            let mut cur_style: Option<Style> = None;
+            for it in row {
+                match cur_style {
+                    Some(s) if s == it.style => buf.push(it.ch),
+                    _ => {
+                        if let Some(s) = cur_style {
+                            out.push(Span::styled(std::mem::take(&mut buf), s));
+                        }
+                        cur_style = Some(it.style);
+                        buf.push(it.ch);
+                    }
+                }
+            }
+            if let Some(s) = cur_style {
+                out.push(Span::styled(buf, s));
+            }
+            out
+        })
+        .collect()
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
+    use ratatui::style::Color;
+
+    fn flatten<'a>(row: &[Span<'a>]) -> Vec<(Style, String)> {
+        row.iter()
+            .map(|s| (s.style, s.content.to_string()))
+            .collect()
+    }
 
     #[test]
     fn should_return_string_unchanged_when_within_max_len() {
@@ -165,4 +327,139 @@ mod tests {
             "padded spans should have exactly {width} chars, got {total_chars}"
         );
     }
+
+    #[test]
+    fn should_return_single_row_when_input_fits() {
+        let spans = vec![Span::raw("hello")];
+        let rows = wrap_spans(&spans, 10);
+        assert_eq!(rows.len(), 1);
+        assert_eq!(flatten(&rows[0]), vec![(Style::default(), "hello".into())]);
+    }
+
+    #[test]
+    fn should_return_single_empty_row_for_empty_input() {
+        let spans: Vec<Span> = vec![];
+        let rows = wrap_spans(&spans, 10);
+        assert_eq!(rows.len(), 1);
+        assert!(rows[0].is_empty());
+    }
+
+    #[test]
+    fn should_return_single_empty_row_for_all_empty_span_contents() {
+        let red = Style::default().fg(Color::Red);
+        let spans = vec![Span::styled("", red), Span::raw("")];
+        let rows = wrap_spans(&spans, 10);
+        assert_eq!(rows.len(), 1);
+        assert!(rows[0].is_empty());
+    }
+
+    #[test]
+    fn should_return_input_unchanged_when_width_is_zero() {
+        let spans = vec![Span::raw("hello world")];
+        let rows = wrap_spans(&spans, 0);
+        assert_eq!(rows.len(), 1);
+        assert_eq!(
+            flatten(&rows[0]),
+            vec![(Style::default(), "hello world".into())]
+        );
+    }
+
+    #[test]
+    fn should_wrap_at_whitespace_word_boundary() {
+        let spans = vec![Span::raw("hello world foo")];
+        let rows = wrap_spans(&spans, 8);
+        assert_eq!(rows.len(), 3);
+        assert_eq!(flatten(&rows[0]), vec![(Style::default(), "hello ".into())]);
+        assert_eq!(flatten(&rows[1]), vec![(Style::default(), "world ".into())]);
+        assert_eq!(flatten(&rows[2]), vec![(Style::default(), "foo".into())]);
+    }
+
+    #[test]
+    fn should_hard_split_a_word_longer_than_width() {
+        let spans = vec![Span::raw("aaaaaaaaaa")];
+        let rows = wrap_spans(&spans, 4);
+        assert_eq!(rows.len(), 3);
+        assert_eq!(rows[0][0].content, "aaaa");
+        assert_eq!(rows[1][0].content, "aaaa");
+        assert_eq!(rows[2][0].content, "aa");
+    }
+
+    #[test]
+    fn should_preserve_styles_across_wrap_boundary() {
+        let red = Style::default().fg(Color::Red);
+        let blue = Style::default().fg(Color::Blue);
+        let spans = vec![Span::styled("hello ", red), Span::styled("world", blue)];
+        let rows = wrap_spans(&spans, 6);
+        assert_eq!(rows.len(), 2);
+        assert_eq!(flatten(&rows[0]), vec![(red, "hello ".into())]);
+        assert_eq!(flatten(&rows[1]), vec![(blue, "world".into())]);
+    }
+
+    #[test]
+    fn should_split_a_span_that_crosses_a_wrap_point() {
+        let red = Style::default().fg(Color::Red);
+        let spans = vec![Span::styled("hello world", red)];
+        let rows = wrap_spans(&spans, 6);
+        assert_eq!(rows.len(), 2);
+        assert_eq!(flatten(&rows[0]), vec![(red, "hello ".into())]);
+        assert_eq!(flatten(&rows[1]), vec![(red, "world".into())]);
+    }
+
+    #[test]
+    fn should_merge_same_style_spans_into_one_when_wrapping() {
+        let red = Style::default().fg(Color::Red);
+        let spans = vec![Span::styled("he", red), Span::styled("llo", red)];
+        let rows = wrap_spans(&spans, 3);
+        assert_eq!(rows.len(), 2);
+        assert_eq!(flatten(&rows[0]), vec![(red, "hel".into())]);
+        assert_eq!(flatten(&rows[1]), vec![(red, "lo".into())]);
+    }
+
+    #[test]
+    fn should_wrap_cjk_chars_by_display_width() {
+        let spans = vec![Span::raw("中文測試")];
+        let rows = wrap_spans(&spans, 5);
+        assert_eq!(rows.len(), 2);
+        assert_eq!(rows[0][0].content, "中文");
+        assert_eq!(rows[1][0].content, "測試");
+    }
+
+    #[test]
+    fn should_emit_oversized_char_alone_when_width_is_one_and_char_is_wide() {
+        let spans = vec![Span::raw("中")];
+        let rows = wrap_spans(&spans, 1);
+        assert_eq!(rows.len(), 1);
+        assert_eq!(rows[0][0].content, "中");
+    }
+
+    #[test]
+    fn should_treat_tab_as_whitespace_break() {
+        let spans = vec![Span::raw("hello\tworld")];
+        let rows = wrap_spans(&spans, 6);
+        assert_eq!(rows.len(), 2);
+        assert_eq!(rows[0][0].content, "hello\t");
+        assert_eq!(rows[1][0].content, "world");
+    }
+
+    #[test]
+    fn should_preserve_leading_whitespace_on_continuation_rows() {
+        let spans = vec![Span::raw("foo   bar baz")];
+        let rows = wrap_spans(&spans, 7);
+        assert_eq!(rows.len(), 2);
+        assert_eq!(rows[0][0].content, "foo   ");
+        assert_eq!(rows[1][0].content, "bar baz");
+    }
+
+    #[test]
+    fn should_handle_multibyte_utf8_char_boundaries_safely() {
+        let spans = vec![Span::raw("ab中文cd")];
+        let rows = wrap_spans(&spans, 4);
+        assert_eq!(rows.len(), 2);
+        for row in &rows {
+            let w: usize = row.iter().map(|s| s.content.width()).sum();
+            assert!(w <= 4, "row width {w} exceeds 4");
+        }
+        assert_eq!(rows[0][0].content, "ab中");
+        assert_eq!(rows[1][0].content, "文cd");
+    }
 }

From 63cc61ae6e26e5cd710d4c30784e911c16587dfe Mon Sep 17 00:00:00 2001
From: yuhuahung <yuhuahung@synology.com>
Date: Wed, 8 Jul 2026 14:15:39 +0800
Subject: [PATCH 2/7] refactor(ui): share wrap-aware cursor-line highlight
 across diff views

---
 src/ui/diff_side_by_side.rs | 25 ++++++++-----------------
 src/ui/diff_unified.rs      | 24 ++++++++++--------------
 src/ui/diff_view.rs         | 25 +++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/ui/diff_side_by_side.rs b/src/ui/diff_side_by_side.rs
index 30ff941a..aec9cd20 100644
--- a/src/ui/diff_side_by_side.rs
+++ b/src/ui/diff_side_by_side.rs
@@ -15,7 +15,7 @@ use crate::theme::Theme;
 use crate::ui::comment_panel;
 use crate::ui::diff_view::{
     apply_horizontal_scroll, comment_type_presentation, cursor_indicator, cursor_indicator_spaced,
-    diff_stat_title, hunk_header_text_and_style, is_line_highlighted,
+    diff_stat_title, hunk_header_text_and_style, paint_cursor_line_highlight,
     paint_visual_selection_overlay, populate_row_to_annotation, render_expander_line,
     render_hidden_lines, scroll_comment_input_into_view,
 };
@@ -794,22 +794,13 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
     }
     frame.render_widget(diff, inner);
 
-    if app.cursor_line_highlight {
-        let viewport_height = inner.height as usize;
-        for offset in 0..viewport_height {
-            if is_line_highlighted(app, offset) {
-                let row_rect = Rect {
-                    x: inner.x,
-                    y: inner.y + offset as u16,
-                    width: inner.width,
-                    height: 1,
-                };
-                frame
-                    .buffer_mut()
-                    .set_style(row_rect, Style::default().bg(app.theme.cursor_line_bg));
-            }
-        }
-    }
+    paint_cursor_line_highlight(
+        frame,
+        inner,
+        &visible_lines_unscrolled_for_overlay,
+        &row_heights,
+        app,
+    );
 
     // Painted last so the cell overlay wins over cursor-line bg on overlap.
     if let Some(sel) = app.visual_selection {
diff --git a/src/ui/diff_unified.rs b/src/ui/diff_unified.rs
index 756dc005..c6f722d4 100644
--- a/src/ui/diff_unified.rs
+++ b/src/ui/diff_unified.rs
@@ -16,9 +16,9 @@ use crate::theme::Theme;
 use crate::ui::comment_panel;
 use crate::ui::diff_view::{
     apply_horizontal_scroll, comment_type_presentation, cursor_indicator, cursor_indicator_spaced,
-    diff_stat_title, hunk_header_text_and_style, is_line_highlighted, paint_unified_diff_rows_with,
-    paint_visual_selection_overlay, populate_row_to_annotation, push_comment_bar,
-    render_expander_line, render_hidden_lines, scroll_comment_input_into_view,
+    diff_stat_title, hunk_header_text_and_style, paint_cursor_line_highlight,
+    paint_unified_diff_rows_with, paint_visual_selection_overlay, populate_row_to_annotation,
+    push_comment_bar, render_expander_line, render_hidden_lines, scroll_comment_input_into_view,
     unified_line_bg_style,
 };
 use crate::ui::styles;
@@ -1191,17 +1191,13 @@ pub(super) fn render_unified_diff(frame: &mut Frame, app: &mut App, area: Rect)
 
     // Cursor-line bg has to land after the paragraph: spans on +/- lines carry
     // explicit diff_add_bg/diff_del_bg that would mask a pre-paint over the code.
-    if app.cursor_line_highlight {
-        paint_unified_diff_rows_with(
-            frame,
-            inner,
-            &visible_lines_unscrolled_for_bg,
-            &row_heights,
-            |idx, _line| {
-                is_line_highlighted(app, idx).then(|| Style::default().bg(app.theme.cursor_line_bg))
-            },
-        );
-    }
+    paint_cursor_line_highlight(
+        frame,
+        inner,
+        &visible_lines_unscrolled_for_bg,
+        &row_heights,
+        app,
+    );
 
     if let Some(sel) = app.visual_selection {
         paint_visual_selection_overlay(frame, inner, app, sel, &app.theme);
diff --git a/src/ui/diff_view.rs b/src/ui/diff_view.rs
index 34d31908..02147a40 100644
--- a/src/ui/diff_view.rs
+++ b/src/ui/diff_view.rs
@@ -504,6 +504,31 @@ pub(super) fn unified_line_bg_style(line: &Line, theme: &Theme) -> Option<Style>
     Some(Style::default().bg(bg))
 }
 
+/// Paint the cursor-line background across visible logical lines, expanding
+/// each highlighted line to cover all of its wrapped visual rows. Shared by
+/// unified and side-by-side views so they can't drift out of sync — mismatched
+/// logical/visual indexing was the exact bug this helper prevents.
+pub(super) fn paint_cursor_line_highlight(
+    frame: &mut Frame,
+    inner: Rect,
+    visible_lines_unscrolled: &[Line],
+    row_heights: &[usize],
+    app: &App,
+) {
+    if !app.cursor_line_highlight {
+        return;
+    }
+    paint_unified_diff_rows_with(
+        frame,
+        inner,
+        visible_lines_unscrolled,
+        row_heights,
+        |idx, _line| {
+            is_line_highlighted(app, idx).then(|| Style::default().bg(app.theme.cursor_line_bg))
+        },
+    );
+}
+
 pub(super) fn paint_unified_diff_rows_with<F>(
     frame: &mut Frame,
     inner: Rect,

From 2f4fb0adc0c6a80cd61eb2ba10777a7682a21030 Mon Sep 17 00:00:00 2001
From: yuhuahung <yuhuahung@synology.com>
Date: Wed, 8 Jul 2026 14:17:11 +0800
Subject: [PATCH 3/7] refactor(ui): simplify side-by-side pair loop and
 expanded-context helper

---
 src/ui/diff_side_by_side.rs | 129 ++++++++++++++++--------------------
 1 file changed, 58 insertions(+), 71 deletions(-)

diff --git a/src/ui/diff_side_by_side.rs b/src/ui/diff_side_by_side.rs
index aec9cd20..7fe40836 100644
--- a/src/ui/diff_side_by_side.rs
+++ b/src/ui/diff_side_by_side.rs
@@ -488,11 +488,8 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
                             render_sbs_expanded_context_line(
                                 &mut lines,
                                 &mut line_idx,
-                                ctx.current_line_idx,
                                 expanded_line,
-                                ctx.content_width,
-                                &app.theme,
-                                lw,
+                                &ctx,
                             );
                         }
                     }
@@ -564,11 +561,8 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
                             render_sbs_expanded_context_line(
                                 &mut lines,
                                 &mut line_idx,
-                                ctx.current_line_idx,
                                 expanded_line,
-                                ctx.content_width,
-                                &app.theme,
-                                lw,
+                                &ctx,
                             );
                         }
                     }
@@ -642,11 +636,8 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
                         render_sbs_expanded_context_line(
                             &mut lines,
                             &mut line_idx,
-                            ctx.current_line_idx,
                             expanded_line,
-                            ctx.content_width,
-                            &app.theme,
-                            lw,
+                            &ctx,
                         );
                     }
                 }
@@ -678,11 +669,8 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
                         render_sbs_expanded_context_line(
                             &mut lines,
                             &mut line_idx,
-                            ctx.current_line_idx,
                             expanded_line,
-                            ctx.content_width,
-                            &app.theme,
-                            lw,
+                            &ctx,
                         );
                     }
                 }
@@ -850,13 +838,13 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
 fn render_sbs_expanded_context_line(
     lines: &mut Vec<Line<'_>>,
     line_idx: &mut usize,
-    current_line_idx: usize,
     expanded_line: &crate::model::DiffLine,
-    content_width: usize,
-    theme: &Theme,
-    lw: usize,
+    ctx: &SideBySideContext,
 ) {
-    let indicator = cursor_indicator(*line_idx, current_line_idx);
+    let theme = ctx.theme;
+    let lw = ctx.lineno_width;
+    let content_width = ctx.content_width;
+    let indicator = cursor_indicator(*line_idx, ctx.current_line_idx);
     let old_line_num = expanded_line
         .old_lineno
         .map(|n| format!("{n:>lw$} "))
@@ -865,20 +853,21 @@ fn render_sbs_expanded_context_line(
         .new_lineno
         .map(|n| format!("{n:>lw$} "))
         .unwrap_or_else(|| " ".repeat(lw + 1));
+    let ec_style = styles::expanded_context_style(theme);
     let line_spans = vec![
         Span::styled(indicator, styles::current_line_indicator_style(theme)),
-        Span::styled(old_line_num, styles::expanded_context_style(theme)),
-        Span::styled(" ", styles::expanded_context_style(theme)),
+        Span::styled(old_line_num, ec_style),
+        Span::styled(" ", ec_style),
         Span::styled(
             truncate_or_pad(&expanded_line.content, content_width),
-            styles::expanded_context_style(theme),
+            ec_style,
         ),
         Span::styled(" │ ", styles::dim_style(theme)),
-        Span::styled(new_line_num, styles::expanded_context_style(theme)),
-        Span::styled(" ", styles::expanded_context_style(theme)),
+        Span::styled(new_line_num, ec_style),
+        Span::styled(" ", ec_style),
         Span::styled(
             truncate_or_pad(&expanded_line.content, content_width),
-            styles::expanded_context_style(theme),
+            ec_style,
         ),
     ];
     lines.push(Line::from(line_spans));
@@ -1086,6 +1075,8 @@ fn render_deletion_addition_pair_side_by_side(
 
     // Render each pair of deletion/addition
     for offset in 0..max_lines {
+        let del_opt = (offset < del_count).then(|| &hunk_lines[start_idx + offset]);
+        let add_opt = (offset < add_count).then(|| &hunk_lines[add_start + offset]);
         if ctx.is_visible(line_idx) {
             let indicator = cursor_indicator(line_idx, ctx.current_line_idx);
 
@@ -1095,8 +1086,7 @@ fn render_deletion_addition_pair_side_by_side(
             )];
 
             // Left side (deletion)
-            if offset < del_count {
-                let del_line = &hunk_lines[start_idx + offset];
+            if let Some(del_line) = del_opt {
                 add_deletion_spans(
                     ctx.theme,
                     &mut spans,
@@ -1111,8 +1101,7 @@ fn render_deletion_addition_pair_side_by_side(
             spans.push(Span::styled(" │ ", styles::dim_style(ctx.theme)));
 
             // Right side (addition)
-            if offset < add_count {
-                let add_line = &hunk_lines[add_start + offset];
+            if let Some(add_line) = add_opt {
                 add_addition_spans(
                     ctx.theme,
                     &mut spans,
@@ -1131,62 +1120,60 @@ fn render_deletion_addition_pair_side_by_side(
         line_idx += 1;
 
         // Add comments for deletion
-        if offset < del_count {
-            let del_line = &hunk_lines[start_idx + offset];
-            if let Some(old_ln) = del_line.old_lineno {
-                let (new_line_idx, cursor_info) = add_comments_to_line(
+        if let Some(del_line) = del_opt
+            && let Some(old_ln) = del_line.old_lineno
+        {
+            let (new_line_idx, cursor_info) = add_comments_to_line(
+                old_ln,
+                line_comments,
+                LineSide::Old,
+                ctx,
+                file_idx,
+                line_idx,
+                lines,
+            );
+            line_idx = new_line_idx;
+            if cursor_info.is_some() {
+                cursor_info_out = cursor_info;
+            }
+            if let Some(file) = ctx.app.diff_files.get(file_idx) {
+                line_idx = add_remote_threads_to_line(
                     old_ln,
-                    line_comments,
                     LineSide::Old,
                     ctx,
-                    file_idx,
+                    file.display_path(),
                     line_idx,
                     lines,
                 );
-                line_idx = new_line_idx;
-                if cursor_info.is_some() {
-                    cursor_info_out = cursor_info;
-                }
-                if let Some(file) = ctx.app.diff_files.get(file_idx) {
-                    line_idx = add_remote_threads_to_line(
-                        old_ln,
-                        LineSide::Old,
-                        ctx,
-                        file.display_path(),
-                        line_idx,
-                        lines,
-                    );
-                }
             }
         }
 
         // Add comments for addition
-        if offset < add_count {
-            let add_line = &hunk_lines[add_start + offset];
-            if let Some(new_ln) = add_line.new_lineno {
-                let (new_line_idx, cursor_info) = add_comments_to_line(
+        if let Some(add_line) = add_opt
+            && let Some(new_ln) = add_line.new_lineno
+        {
+            let (new_line_idx, cursor_info) = add_comments_to_line(
+                new_ln,
+                line_comments,
+                LineSide::New,
+                ctx,
+                file_idx,
+                line_idx,
+                lines,
+            );
+            line_idx = new_line_idx;
+            if cursor_info.is_some() {
+                cursor_info_out = cursor_info;
+            }
+            if let Some(file) = ctx.app.diff_files.get(file_idx) {
+                line_idx = add_remote_threads_to_line(
                     new_ln,
-                    line_comments,
                     LineSide::New,
                     ctx,
-                    file_idx,
+                    file.display_path(),
                     line_idx,
                     lines,
                 );
-                line_idx = new_line_idx;
-                if cursor_info.is_some() {
-                    cursor_info_out = cursor_info;
-                }
-                if let Some(file) = ctx.app.diff_files.get(file_idx) {
-                    line_idx = add_remote_threads_to_line(
-                        new_ln,
-                        LineSide::New,
-                        ctx,
-                        file.display_path(),
-                        line_idx,
-                        lines,
-                    );
-                }
             }
         }
     }

From e9af749f922b5b8f89e52ddfda6341435b5fa7be Mon Sep 17 00:00:00 2001
From: yuhuahung <yuhuahung@synology.com>
Date: Wed, 8 Jul 2026 14:17:41 +0800
Subject: [PATCH 4/7] fix(ui): single-pass wrap in unified view so row heights
 match rendered rows

---
 src/ui/diff_unified.rs | 101 ++++++++++++++++++++++++++++++++---------
 1 file changed, 80 insertions(+), 21 deletions(-)

diff --git a/src/ui/diff_unified.rs b/src/ui/diff_unified.rs
index c6f722d4..1317b929 100644
--- a/src/ui/diff_unified.rs
+++ b/src/ui/diff_unified.rs
@@ -3,7 +3,7 @@ use ratatui::{
     layout::Rect,
     style::{Modifier, Style},
     text::{Line, Span},
-    widgets::{Block, Borders, Paragraph, Wrap},
+    widgets::{Block, Borders, Paragraph},
 };
 use unicode_width::UnicodeWidthStr;
 
@@ -1119,24 +1119,34 @@ pub(super) fn render_unified_diff(frame: &mut Frame, app: &mut App, area: Rect)
 
     let scroll_offset = app.diff_state.scroll_offset;
     let wrap = app.diff_state.wrap_lines;
-    // Word-wrap-accurate visual row count per line, shared by every row-mapping
-    // consumer below so per-row backgrounds and overlays align with the
-    // rendered (word-wrapped) paragraph rather than drifting on prose lines.
-    let row_heights = crate::ui::diff_view::compute_row_heights(
-        &visible_lines_unscrolled,
-        wrap,
-        inner.width as usize,
-    );
+    let viewport_width = inner.width as usize;
+    let visible_lines_unscrolled_for_bg = visible_lines_unscrolled.clone();
+    // Single pass: wrap each logical line once, producing both the visual
+    // rows to render and the per-line height used by every row-mapping
+    // consumer below, so the two can't disagree.
+    let (row_heights, wrapped_lines): (Vec<usize>, Option<Vec<Line>>) =
+        if wrap && viewport_width > 0 {
+            let mut heights = Vec::with_capacity(visible_lines_unscrolled_for_bg.len());
+            let mut out: Vec<Line> = Vec::new();
+            for line in &visible_lines_unscrolled_for_bg {
+                let rows = crate::ui::text_utils::wrap_spans(&line.spans, viewport_width);
+                heights.push(rows.len());
+                out.extend(rows.into_iter().map(Line::from));
+            }
+            (heights, Some(out))
+        } else {
+            (vec![1; visible_lines_unscrolled_for_bg.len()], None)
+        };
     app.diff_state.visible_line_count = populate_row_to_annotation(
         &mut app.diff_row_to_annotation,
         &row_heights,
-        inner.width as usize,
+        viewport_width,
         inner.height as usize,
         wrap,
         scroll_offset,
     );
 
-    let max_scroll_x = max_content_width.saturating_sub(inner.width as usize);
+    let max_scroll_x = max_content_width.saturating_sub(viewport_width);
     if app.diff_state.scroll_x > max_scroll_x {
         app.diff_state.scroll_x = max_scroll_x;
     }
@@ -1145,14 +1155,12 @@ pub(super) fn render_unified_diff(frame: &mut Frame, app: &mut App, area: Rect)
     }
 
     let scroll_x = app.diff_state.scroll_x;
-    let visible_lines_unscrolled_for_bg = visible_lines_unscrolled.clone();
-    let visible_lines: Vec<Line> = if app.diff_state.wrap_lines {
-        visible_lines_unscrolled
-    } else {
-        visible_lines_unscrolled
+    let visible_lines: Vec<Line> = match wrapped_lines {
+        Some(out) => out,
+        None => visible_lines_unscrolled
             .into_iter()
             .map(|line| apply_horizontal_scroll(line, scroll_x))
-            .collect()
+            .collect(),
     };
 
     // Paint per-visual-row add/del backgrounds across full row width.
@@ -1183,10 +1191,7 @@ pub(super) fn render_unified_diff(frame: &mut Frame, app: &mut App, area: Rect)
     crate::ui::diff_view::paint_section_highlight(frame, &overlay_ctx);
 
     // Keep paragraph bg unset so pre-painted per-row diff backgrounds remain visible.
-    let mut diff = Paragraph::new(visible_lines).style(Style::default().fg(app.theme.fg_primary));
-    if app.diff_state.wrap_lines {
-        diff = diff.wrap(Wrap { trim: false });
-    }
+    let diff = Paragraph::new(visible_lines).style(Style::default().fg(app.theme.fg_primary));
     frame.render_widget(diff, inner);
 
     // Cursor-line bg has to land after the paragraph: spans on +/- lines carry
@@ -1772,4 +1777,58 @@ mod remote_comments_snapshot_tests {
             "review-level thread leaked under Hide:\n{body}"
         );
     }
+
+    #[test]
+    fn should_wrap_long_line_in_unified_view_when_wrap_enabled() {
+        let long: String = "x".repeat(200);
+        let hunk = DiffHunk {
+            header: "@@ -0,0 +1,1 @@".to_string(),
+            lines: vec![DiffLine {
+                origin: LineOrigin::Addition,
+                content: long.clone(),
+                old_lineno: None,
+                new_lineno: Some(1),
+                highlighted_spans: None,
+            }],
+            old_start: 0,
+            old_count: 0,
+            new_start: 1,
+            new_count: 1,
+        };
+        let hunks = vec![hunk];
+        let content_hash = DiffFile::compute_content_hash(&hunks);
+        let file = DiffFile {
+            old_path: Some(PathBuf::from("src/lib.rs")),
+            new_path: Some(PathBuf::from("src/lib.rs")),
+            status: FileStatus::Modified,
+            hunks,
+            is_binary: false,
+            is_too_large: false,
+            is_commit_message: false,
+            content_hash,
+        };
+        let mut app = make_revision_app(vec![file]);
+        app.set_diff_wrap(true);
+        app.rebuild_annotations();
+
+        let backend = TestBackend::new(80, 20);
+        let mut terminal = Terminal::new(backend).unwrap();
+        terminal
+            .draw(|frame| super::render_unified_diff(frame, &mut app, Rect::new(0, 0, 80, 20)))
+            .expect("draw");
+        let body = body_text(terminal.backend().buffer());
+
+        let tail: String = long.chars().rev().take(20).collect::<String>();
+        let tail: String = tail.chars().rev().collect();
+        assert!(
+            body.contains(&tail),
+            "tail of wrapped long line should appear in body:\n{body}"
+        );
+
+        assert!(
+            app.diff_state.visible_line_count > 0 && app.diff_state.visible_line_count < 20,
+            "expected logical visible_line_count 1..20, got {}",
+            app.diff_state.visible_line_count
+        );
+    }
 }

From 60ebb0b3b7971d32ceb823e02794a072179ddf5a Mon Sep 17 00:00:00 2001
From: yuhuahung <yuhuahung@synology.com>
Date: Wed, 8 Jul 2026 14:18:33 +0800
Subject: [PATCH 5/7] feat(ui): per-column word wrap in side-by-side view

---
 src/ui/diff_side_by_side.rs | 542 ++++++++++++++++++++++++++++++++++--
 src/ui/diff_view.rs         |  77 -----
 2 files changed, 519 insertions(+), 100 deletions(-)

diff --git a/src/ui/diff_side_by_side.rs b/src/ui/diff_side_by_side.rs
index 7fe40836..211740f5 100644
--- a/src/ui/diff_side_by_side.rs
+++ b/src/ui/diff_side_by_side.rs
@@ -3,14 +3,14 @@ use ratatui::{
     layout::Rect,
     style::{Modifier, Style},
     text::{Line, Span},
-    widgets::{Block, Borders, Paragraph, Wrap},
+    widgets::{Block, Borders, Paragraph},
 };
 use unicode_width::UnicodeWidthStr;
 
 use crate::app::{
     App, DiffSource, ExpandDirection, FocusedPanel, GAP_EXPAND_BATCH, GapId, InputMode,
 };
-use crate::model::{FileStatus, LineOrigin, LineRange, LineSide};
+use crate::model::{DiffLine, FileStatus, LineOrigin, LineRange, LineSide};
 use crate::theme::Theme;
 use crate::ui::comment_panel;
 use crate::ui::diff_view::{
@@ -20,9 +20,117 @@ use crate::ui::diff_view::{
     render_hidden_lines, scroll_comment_input_into_view,
 };
 use crate::ui::styles;
-use crate::ui::text_utils::{truncate_or_pad, truncate_or_pad_spans};
+use crate::ui::text_utils::{truncate_or_pad, truncate_or_pad_spans, wrap_spans};
 use crate::vcs::git::calculate_gap;
 
+#[derive(Clone, Default)]
+struct SbsRowMeta {
+    left_content: Vec<Span<'static>>,
+    right_content: Vec<Span<'static>>,
+    left_prefix: Vec<Span<'static>>,
+    right_prefix: Vec<Span<'static>>,
+    left_pad_style: Style,
+    right_pad_style: Style,
+}
+
+fn content_spans_for_diff_line(
+    theme: &Theme,
+    dl: &DiffLine,
+    origin: LineOrigin,
+) -> Vec<Span<'static>> {
+    let base = match origin {
+        LineOrigin::Context => styles::diff_context_style(theme),
+        LineOrigin::Addition => styles::diff_add_style(theme),
+        LineOrigin::Deletion => styles::diff_del_style(theme),
+    };
+    if let Some(ref h) = dl.highlighted_spans {
+        h.iter().map(|(s, t)| Span::styled(t.clone(), *s)).collect()
+    } else {
+        vec![Span::styled(dl.content.clone(), base)]
+    }
+}
+
+fn column_pad_style(theme: &Theme, dl: &DiffLine, origin: LineOrigin) -> Style {
+    match origin {
+        LineOrigin::Context => styles::diff_context_style(theme),
+        LineOrigin::Addition => {
+            if dl.highlighted_spans.is_some() {
+                Style::default().fg(theme.diff_add).bg(theme.syntax_add_bg)
+            } else {
+                styles::diff_add_style(theme)
+            }
+        }
+        LineOrigin::Deletion => {
+            if dl.highlighted_spans.is_some() {
+                Style::default().fg(theme.diff_del).bg(theme.syntax_del_bg)
+            } else {
+                styles::diff_del_style(theme)
+            }
+        }
+    }
+}
+
+fn pad_spans_to_width(
+    mut spans: Vec<Span<'static>>,
+    width: usize,
+    pad_style: Style,
+) -> Vec<Span<'static>> {
+    let cur: usize = spans.iter().map(|s| s.content.width()).sum();
+    if cur < width {
+        spans.push(Span::styled(" ".repeat(width - cur), pad_style));
+    }
+    spans
+}
+
+struct SideSpec {
+    lineno: Option<u32>,
+    marker: &'static str,
+    marker_style: Style,
+}
+
+fn sbs_row_prefixes(
+    theme: &Theme,
+    indicator: &'static str,
+    left: SideSpec,
+    right: SideSpec,
+    lw: usize,
+) -> (Vec<Span<'static>>, Vec<Span<'static>>) {
+    let dim = styles::dim_style(theme);
+    let old_num = left
+        .lineno
+        .map(|n| format!("{n:>lw$}"))
+        .unwrap_or_else(|| " ".repeat(lw));
+    let new_num = right
+        .lineno
+        .map(|n| format!("{n:>lw$}"))
+        .unwrap_or_else(|| " ".repeat(lw));
+
+    let left_prefix = vec![
+        Span::styled(indicator, styles::current_line_indicator_style(theme)),
+        Span::styled(format!("{old_num} "), dim),
+        Span::styled(left.marker.to_string(), left.marker_style),
+    ];
+    let right_prefix = vec![
+        Span::styled(" │ ", dim),
+        Span::styled(format!("{new_num} "), dim),
+        Span::styled(right.marker.to_string(), right.marker_style),
+    ];
+    (left_prefix, right_prefix)
+}
+
+/// Continuation-row prefixes shared by every wrapped line: blank in place of
+/// the line numbers (same width, so columns stay aligned) with the center
+/// divider preserved.
+fn sbs_blank_prefixes(theme: &Theme, lw: usize) -> (Vec<Span<'static>>, Vec<Span<'static>>) {
+    let dim = styles::dim_style(theme);
+    let left = vec![Span::styled(" ".repeat(lw + 3), Style::default())];
+    let right = vec![
+        Span::styled(" │ ", dim),
+        Span::styled(" ".repeat(lw + 2), Style::default()),
+    ];
+    (left, right)
+}
+
 /// Cursor info for the inline comment input box in side-by-side view:
 /// (cursor_logical_line, cursor_column, box_start_line, box_end_line)
 type SideBySideCursorInfo = (usize, u16, usize, usize, usize);
@@ -47,6 +155,7 @@ struct SideBySideContext<'a> {
     // RefCell so deeply-nested rendering helpers can push without each
     // intermediate function needing a `&mut Vec` parameter threaded through.
     comment_bars: std::cell::RefCell<Vec<crate::ui::diff_view::CommentBarAnchor>>,
+    sbs_meta: std::cell::RefCell<std::collections::HashMap<usize, SbsRowMeta>>,
     // Only fully build spans for diff lines whose `line_idx` falls in this
     // half-open range; off-screen rows push `Line::default()` placeholders.
     visible_start: usize,
@@ -108,6 +217,7 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
         editing_comment_id: app.editing_comment_id.as_deref(),
         current_file_idx: app.diff_state.current_file_idx,
         comment_bars: std::cell::RefCell::new(Vec::new()),
+        sbs_meta: std::cell::RefCell::new(std::collections::HashMap::new()),
         visible_start,
         visible_end,
     };
@@ -690,6 +800,10 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
         let mut bars = ctx.comment_bars.borrow_mut();
         std::mem::take(&mut *bars)
     };
+    let sbs_meta = {
+        let mut m = ctx.sbs_meta.borrow_mut();
+        std::mem::take(&mut *m)
+    };
     drop(ctx);
     app.comment_input_annotation_offset = annotation_offset;
 
@@ -726,22 +840,73 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
 
     let scroll_offset = app.diff_state.scroll_offset;
     let wrap = app.diff_state.wrap_lines;
-    // Word-wrap-accurate visual row count per line; see `compute_row_heights`.
-    let row_heights = crate::ui::diff_view::compute_row_heights(
-        &visible_lines_unscrolled,
-        wrap,
-        inner.width as usize,
-    );
+    let viewport_width = inner.width as usize;
+    let visible_lines_unscrolled_for_overlay = visible_lines_unscrolled.clone();
+    // Single pass: wrap each logical line once, producing both the visual
+    // rows to render and the per-line height used by every row-mapping
+    // consumer below, so the two can't disagree.
+    let (row_heights, wrapped_lines): (Vec<usize>, Option<Vec<Line>>) = if wrap && content_width > 0
+    {
+        let mut heights = Vec::with_capacity(visible_lines_unscrolled_for_overlay.len());
+        let mut out: Vec<Line> = Vec::new();
+        let (left_prefix_blank, right_prefix_blank) = sbs_blank_prefixes(&app.theme, lw);
+        for (i, line) in visible_lines_unscrolled_for_overlay.iter().enumerate() {
+            let logical_idx = scroll_offset + i;
+            match sbs_meta.get(&logical_idx) {
+                Some(m) => {
+                    let left_rows = if m.left_content.is_empty() {
+                        vec![Vec::new()]
+                    } else {
+                        wrap_spans(&m.left_content, content_width)
+                    };
+                    let right_rows = if m.right_content.is_empty() {
+                        vec![Vec::new()]
+                    } else {
+                        wrap_spans(&m.right_content, content_width)
+                    };
+                    let n = left_rows.len().max(right_rows.len()).max(1);
+                    heights.push(n);
+                    let empty_row: Vec<Span> = Vec::new();
+                    for k in 0..n {
+                        let left_content_row = left_rows.get(k).unwrap_or(&empty_row).clone();
+                        let right_content_row = right_rows.get(k).unwrap_or(&empty_row).clone();
+                        let left_padded =
+                            pad_spans_to_width(left_content_row, content_width, m.left_pad_style);
+                        let right_padded =
+                            pad_spans_to_width(right_content_row, content_width, m.right_pad_style);
+                        let (left_prefix, right_prefix) = if k == 0 {
+                            (m.left_prefix.clone(), m.right_prefix.clone())
+                        } else {
+                            (left_prefix_blank.clone(), right_prefix_blank.clone())
+                        };
+                        let mut spans = left_prefix;
+                        spans.extend(left_padded);
+                        spans.extend(right_prefix);
+                        spans.extend(right_padded);
+                        out.push(Line::from(spans));
+                    }
+                }
+                None => {
+                    let rows = wrap_spans(&line.spans, viewport_width);
+                    heights.push(rows.len());
+                    out.extend(rows.into_iter().map(Line::from));
+                }
+            }
+        }
+        (heights, Some(out))
+    } else {
+        (vec![1; visible_lines_unscrolled_for_overlay.len()], None)
+    };
     app.diff_state.visible_line_count = populate_row_to_annotation(
         &mut app.diff_row_to_annotation,
         &row_heights,
-        inner.width as usize,
+        viewport_width,
         inner.height as usize,
         wrap,
         scroll_offset,
     );
 
-    let max_scroll_x = max_content_width.saturating_sub(inner.width as usize);
+    let max_scroll_x = max_content_width.saturating_sub(viewport_width);
     if app.diff_state.scroll_x > max_scroll_x {
         app.diff_state.scroll_x = max_scroll_x;
     }
@@ -750,14 +915,12 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
     }
 
     let scroll_x = app.diff_state.scroll_x;
-    let visible_lines_unscrolled_for_overlay = visible_lines_unscrolled.clone();
-    let visible_lines: Vec<Line> = if app.diff_state.wrap_lines {
-        visible_lines_unscrolled
-    } else {
-        visible_lines_unscrolled
+    let visible_lines: Vec<Line> = match wrapped_lines {
+        Some(out) => out,
+        None => visible_lines_unscrolled
             .into_iter()
             .map(|line| apply_horizontal_scroll(line, scroll_x))
-            .collect()
+            .collect(),
     };
 
     let overlay_ctx = crate::ui::diff_view::DiffOverlayPaint {
@@ -776,10 +939,7 @@ pub(super) fn render_side_by_side_diff(frame: &mut Frame, app: &mut App, area: R
     // Section-marker row tint (hunk headers + expand/hidden stubs).
     crate::ui::diff_view::paint_section_highlight(frame, &overlay_ctx);
 
-    let mut diff = Paragraph::new(visible_lines).style(styles::panel_style(&app.theme));
-    if app.diff_state.wrap_lines {
-        diff = diff.wrap(Wrap { trim: false });
-    }
+    let diff = Paragraph::new(visible_lines).style(styles::panel_style(&app.theme));
     frame.render_widget(diff, inner);
 
     paint_cursor_line_highlight(
@@ -856,14 +1016,14 @@ fn render_sbs_expanded_context_line(
     let ec_style = styles::expanded_context_style(theme);
     let line_spans = vec![
         Span::styled(indicator, styles::current_line_indicator_style(theme)),
-        Span::styled(old_line_num, ec_style),
+        Span::styled(old_line_num.clone(), ec_style),
         Span::styled(" ", ec_style),
         Span::styled(
             truncate_or_pad(&expanded_line.content, content_width),
             ec_style,
         ),
         Span::styled(" │ ", styles::dim_style(theme)),
-        Span::styled(new_line_num, ec_style),
+        Span::styled(new_line_num.clone(), ec_style),
         Span::styled(" ", ec_style),
         Span::styled(
             truncate_or_pad(&expanded_line.content, content_width),
@@ -871,6 +1031,30 @@ fn render_sbs_expanded_context_line(
         ),
     ];
     lines.push(Line::from(line_spans));
+
+    let dim = styles::dim_style(theme);
+    let left_prefix = vec![
+        Span::styled(indicator, styles::current_line_indicator_style(theme)),
+        Span::styled(old_line_num, ec_style),
+        Span::styled(" ", ec_style),
+    ];
+    let right_prefix = vec![
+        Span::styled(" │ ", dim),
+        Span::styled(new_line_num, ec_style),
+        Span::styled(" ", ec_style),
+    ];
+    let content = vec![Span::styled(expanded_line.content.clone(), ec_style)];
+    ctx.sbs_meta.borrow_mut().insert(
+        *line_idx,
+        SbsRowMeta {
+            left_content: content.clone(),
+            right_content: content,
+            left_prefix,
+            right_prefix,
+            left_pad_style: ec_style,
+            right_pad_style: ec_style,
+        },
+    );
     *line_idx += 1;
 }
 
@@ -1010,6 +1194,35 @@ fn render_context_line_side_by_side(
         }
 
         lines.push(Line::from(spans));
+
+        let content = content_spans_for_diff_line(ctx.theme, diff_line, LineOrigin::Context);
+        let ctx_style = styles::diff_context_style(ctx.theme);
+        let (lp, rp) = sbs_row_prefixes(
+            ctx.theme,
+            indicator,
+            SideSpec {
+                lineno: diff_line.old_lineno,
+                marker: " ",
+                marker_style: ctx_style,
+            },
+            SideSpec {
+                lineno: diff_line.new_lineno,
+                marker: " ",
+                marker_style: ctx_style,
+            },
+            w,
+        );
+        ctx.sbs_meta.borrow_mut().insert(
+            line_idx,
+            SbsRowMeta {
+                left_content: content.clone(),
+                right_content: content,
+                left_prefix: lp,
+                right_prefix: rp,
+                left_pad_style: ctx_style,
+                right_pad_style: ctx_style,
+            },
+        );
     } else {
         lines.push(Line::default());
     }
@@ -1114,6 +1327,56 @@ fn render_deletion_addition_pair_side_by_side(
             }
 
             lines.push(Line::from(spans));
+
+            let w = ctx.lineno_width;
+            let (left_content, left_pad, left_marker, left_lineno, left_marker_style) =
+                match del_opt {
+                    Some(dl) => (
+                        content_spans_for_diff_line(ctx.theme, dl, LineOrigin::Deletion),
+                        column_pad_style(ctx.theme, dl, LineOrigin::Deletion),
+                        "▌",
+                        dl.old_lineno,
+                        styles::diff_del_style(ctx.theme),
+                    ),
+                    None => (Vec::new(), Style::default(), " ", None, Style::default()),
+                };
+            let (right_content, right_pad, right_marker, right_lineno, right_marker_style) =
+                match add_opt {
+                    Some(al) => (
+                        content_spans_for_diff_line(ctx.theme, al, LineOrigin::Addition),
+                        column_pad_style(ctx.theme, al, LineOrigin::Addition),
+                        "▌",
+                        al.new_lineno,
+                        styles::diff_add_style(ctx.theme),
+                    ),
+                    None => (Vec::new(), Style::default(), " ", None, Style::default()),
+                };
+            let (lp, rp) = sbs_row_prefixes(
+                ctx.theme,
+                indicator,
+                SideSpec {
+                    lineno: left_lineno,
+                    marker: left_marker,
+                    marker_style: left_marker_style,
+                },
+                SideSpec {
+                    lineno: right_lineno,
+                    marker: right_marker,
+                    marker_style: right_marker_style,
+                },
+                w,
+            );
+            ctx.sbs_meta.borrow_mut().insert(
+                line_idx,
+                SbsRowMeta {
+                    left_content,
+                    right_content,
+                    left_prefix: lp,
+                    right_prefix: rp,
+                    left_pad_style: left_pad,
+                    right_pad_style: right_pad,
+                },
+            );
         } else {
             lines.push(Line::default());
         }
@@ -1209,6 +1472,36 @@ fn render_standalone_addition_side_by_side(
         );
 
         lines.push(Line::from(spans));
+
+        let w = ctx.lineno_width;
+        let right_content = content_spans_for_diff_line(ctx.theme, diff_line, LineOrigin::Addition);
+        let right_pad = column_pad_style(ctx.theme, diff_line, LineOrigin::Addition);
+        let (lp, rp) = sbs_row_prefixes(
+            ctx.theme,
+            indicator,
+            SideSpec {
+                lineno: None,
+                marker: " ",
+                marker_style: Style::default(),
+            },
+            SideSpec {
+                lineno: diff_line.new_lineno,
+                marker: "▌",
+                marker_style: styles::diff_add_style(ctx.theme),
+            },
+            w,
+        );
+        ctx.sbs_meta.borrow_mut().insert(
+            line_idx,
+            SbsRowMeta {
+                left_content: Vec::new(),
+                right_content,
+                left_prefix: lp,
+                right_prefix: rp,
+                left_pad_style: Style::default(),
+                right_pad_style: right_pad,
+            },
+        );
     } else {
         lines.push(Line::default());
     }
@@ -1549,6 +1842,7 @@ mod remote_comments_side_by_side_snapshot_tests {
     use ratatui::Terminal;
     use ratatui::backend::TestBackend;
     use ratatui::buffer::Buffer;
+    use ratatui::layout::Rect;
     use std::path::{Path, PathBuf};
 
     struct SnapshotVcs {
@@ -1750,4 +2044,206 @@ mod remote_comments_side_by_side_snapshot_tests {
             "remote comment leaked under Hide:\n{body}"
         );
     }
+
+    fn diff_file_with_pair(left: &str, right: &str) -> DiffFile {
+        let lines = vec![
+            DiffLine {
+                origin: LineOrigin::Deletion,
+                content: left.to_string(),
+                old_lineno: Some(1),
+                new_lineno: None,
+                highlighted_spans: None,
+            },
+            DiffLine {
+                origin: LineOrigin::Addition,
+                content: right.to_string(),
+                old_lineno: None,
+                new_lineno: Some(1),
+                highlighted_spans: None,
+            },
+        ];
+        let hunks = vec![DiffHunk {
+            header: "@@ -1,1 +1,1 @@".to_string(),
+            lines,
+            old_start: 1,
+            old_count: 1,
+            new_start: 1,
+            new_count: 1,
+        }];
+        let content_hash = DiffFile::compute_content_hash(&hunks);
+        DiffFile {
+            old_path: Some(PathBuf::from("src/lib.rs")),
+            new_path: Some(PathBuf::from("src/lib.rs")),
+            status: FileStatus::Modified,
+            hunks,
+            is_binary: false,
+            is_too_large: false,
+            is_commit_message: false,
+            content_hash,
+        }
+    }
+
+    fn diff_file_with_standalone_deletion(left: &str) -> DiffFile {
+        let lines = vec![DiffLine {
+            origin: LineOrigin::Deletion,
+            content: left.to_string(),
+            old_lineno: Some(1),
+            new_lineno: None,
+            highlighted_spans: None,
+        }];
+        let hunks = vec![DiffHunk {
+            header: "@@ -1,1 +0,0 @@".to_string(),
+            lines,
+            old_start: 1,
+            old_count: 1,
+            new_start: 0,
+            new_count: 0,
+        }];
+        let content_hash = DiffFile::compute_content_hash(&hunks);
+        DiffFile {
+            old_path: Some(PathBuf::from("src/lib.rs")),
+            new_path: Some(PathBuf::from("src/lib.rs")),
+            status: FileStatus::Modified,
+            hunks,
+            is_binary: false,
+            is_too_large: false,
+            is_commit_message: false,
+            content_hash,
+        }
+    }
+
+    fn draw_sbs(app: &mut App, w: u16, h: u16) -> Buffer {
+        let backend = TestBackend::new(w, h);
+        let mut terminal = Terminal::new(backend).unwrap();
+        terminal
+            .draw(|frame| super::render_side_by_side_diff(frame, app, Rect::new(0, 0, w, h)))
+            .expect("draw sbs");
+        terminal.backend().buffer().clone()
+    }
+
+    fn char_at(buf: &Buffer, x: u16, y: u16) -> String {
+        buf[(x, y)].symbol().to_string()
+    }
+
+    #[test]
+    fn should_wrap_long_line_in_side_by_side_view_when_wrap_enabled() {
+        let long_left = "L".repeat(200);
+        let mut app = make_pr_app();
+        app.diff_files = vec![diff_file_with_pair(&long_left, "short")];
+        app.set_diff_wrap(true);
+        app.rebuild_annotations();
+
+        let buf = draw_sbs(&mut app, 160, 20);
+
+        let mut rows_with_l = 0u16;
+        for y in 0..buf.area.height {
+            let row: String = (0..buf.area.width).map(|x| char_at(&buf, x, y)).collect();
+            if row.contains("LLLLLLLLLL") {
+                rows_with_l += 1;
+            }
+        }
+        assert!(
+            rows_with_l >= 2,
+            "expected long left content to span >=2 visual rows, got {rows_with_l}"
+        );
+    }
+
+    #[test]
+    fn should_not_wrap_when_wrap_disabled_in_side_by_side() {
+        let long_left = "L".repeat(200);
+        let mut app = make_pr_app();
+        app.diff_files = vec![diff_file_with_pair(&long_left, "short")];
+        app.set_diff_wrap(false);
+        app.rebuild_annotations();
+
+        let buf = draw_sbs(&mut app, 160, 20);
+
+        let rows_with_l: u16 = (0..buf.area.height)
+            .filter(|&y| {
+                (0..buf.area.width)
+                    .map(|x| char_at(&buf, x, y))
+                    .collect::<String>()
+                    .contains("LLLLLLLLLL")
+            })
+            .count() as u16;
+        assert_eq!(
+            rows_with_l, 1,
+            "wrap-off should produce exactly one row of L, got {rows_with_l}"
+        );
+    }
+
+    #[test]
+    fn should_align_divider_on_wrapped_rows_in_side_by_side() {
+        let long_left = "L".repeat(200);
+        let mut app = make_pr_app();
+        app.diff_files = vec![diff_file_with_pair(&long_left, "short")];
+        app.set_diff_wrap(true);
+        app.rebuild_annotations();
+
+        let lw = 1usize;
+        let inner_w = 158usize;
+        let content_width = (inner_w - crate::app::sbs_overhead(lw) as usize) / 2;
+        let divider_x_inner = crate::app::sbs_left_gutter(lw) as usize + content_width;
+        let divider_glyph_x = 1 + divider_x_inner + 1;
+
+        let buf = draw_sbs(&mut app, 160, 20);
+
+        let mut rows_with_l: Vec<u16> = Vec::new();
+        for y in 0..buf.area.height {
+            let row: String = (0..buf.area.width).map(|x| char_at(&buf, x, y)).collect();
+            if row.contains("LLLLLLLLLL") {
+                rows_with_l.push(y);
+            }
+        }
+        assert!(
+            rows_with_l.len() >= 2,
+            "expected ≥2 wrapped rows, got {}",
+            rows_with_l.len()
+        );
+        for y in &rows_with_l {
+            let glyph = char_at(&buf, divider_glyph_x as u16, *y);
+            assert_eq!(
+                glyph, "│",
+                "expected │ at col {divider_glyph_x} on row {y}, got {glyph:?}"
+            );
+        }
+    }
+
+    #[test]
+    fn should_pad_shorter_column_on_wrapped_rows_in_side_by_side() {
+        let long_left = "L".repeat(200);
+        let mut app = make_pr_app();
+        app.diff_files = vec![diff_file_with_standalone_deletion(&long_left)];
+        app.set_diff_wrap(true);
+        app.rebuild_annotations();
+
+        let buf = draw_sbs(&mut app, 160, 20);
+
+        let lw = 1usize;
+        let inner_w = 158usize;
+        let content_width = (inner_w - crate::app::sbs_overhead(lw) as usize) / 2;
+        let divider_glyph_x = 1 + crate::app::sbs_left_gutter(lw) as usize + content_width + 1;
+        let right_content_start = divider_glyph_x + 2 + lw + 1 + 1;
+        let right_content_end = right_content_start + content_width;
+
+        let mut checked = 0;
+        for y in 0..buf.area.height {
+            let row: String = (0..buf.area.width).map(|x| char_at(&buf, x, y)).collect();
+            if !row.contains("LLLLLLLLLL") {
+                continue;
+            }
+            checked += 1;
+            let right: String = (right_content_start..right_content_end)
+                .map(|x| char_at(&buf, x as u16, y))
+                .collect();
+            assert!(
+                right.trim().is_empty(),
+                "right column should be blank on wrapped L row {y}, got {right:?}"
+            );
+        }
+        assert!(
+            checked >= 2,
+            "expected ≥2 wrapped rows to check, got {checked}"
+        );
+    }
 }
diff --git a/src/ui/diff_view.rs b/src/ui/diff_view.rs
index 02147a40..1fe13d7e 100644
--- a/src/ui/diff_view.rs
+++ b/src/ui/diff_view.rs
@@ -3,7 +3,6 @@ use ratatui::{
     layout::Rect,
     style::Style,
     text::{Line, Span},
-    widgets::{Paragraph, Wrap},
 };
 
 use crate::app::{
@@ -908,37 +907,6 @@ fn is_file_header_line(line: &Line) -> bool {
         .unwrap_or(false)
 }
 
-/// Number of visual (screen) rows each logical line occupies once rendered.
-///
-/// When wrapping is on this must match the `Paragraph`'s word wrap
-/// (`Wrap { trim: false }`) exactly, so it reuses ratatui's own
-/// [`Paragraph::line_count`]. A plain `div_ceil(width, viewport)` assumes
-/// character packing and *under-counts* prose lines that word-wrap (a word
-/// pushed to the next row leaves the first row short of the viewport width).
-/// That under-count made every per-row background/overlay paint below such a
-/// line drift upward relative to the rendered text.
-///
-/// Computed once per frame and shared by all row-mapping consumers.
-pub(super) fn compute_row_heights(
-    lines: &[Line],
-    wrap_lines: bool,
-    viewport_width: usize,
-) -> Vec<usize> {
-    if !wrap_lines || viewport_width == 0 {
-        return vec![1; lines.len()];
-    }
-    let width = viewport_width as u16;
-    lines
-        .iter()
-        .map(|line| {
-            Paragraph::new(line.clone())
-                .wrap(Wrap { trim: false })
-                .line_count(width)
-                .max(1)
-        })
-        .collect()
-}
-
 fn visual_rows_for_line(row_heights: &[usize], idx: usize) -> usize {
     row_heights.get(idx).copied().unwrap_or(1)
 }
@@ -1051,49 +1019,4 @@ mod tests {
         // then: scroll so box_end (10) is visible => scroll = 10 - 10 + 1 = 1
         assert_eq!(scroll, 1);
     }
-
-    /// Reference height straight from ratatui's renderer — the value
-    /// `compute_row_heights` must reproduce for per-row paints to align.
-    fn rendered_height(line: &Line, width: u16) -> usize {
-        Paragraph::new(line.clone())
-            .wrap(Wrap { trim: false })
-            .line_count(width)
-    }
-
-    #[test]
-    fn should_count_one_row_per_line_when_wrap_disabled() {
-        let lines = vec![Line::from("a".repeat(200)), Line::from("short")];
-        assert_eq!(compute_row_heights(&lines, false, 80), vec![1, 1]);
-    }
-
-    #[test]
-    fn should_match_rendered_height_for_word_wrapped_prose() {
-        // given: a prose line whose words can't be split, so word-wrap takes
-        // more rows than character packing predicts.
-        let line = Line::from(
-            "PR review sessions are keyed by forge coordinates rather than a local checkout",
-        );
-        let width = 20usize;
-
-        // then: our count matches what the Paragraph actually renders...
-        let heights = compute_row_heights(std::slice::from_ref(&line), true, width);
-        assert_eq!(heights[0], rendered_height(&line, width as u16));
-
-        // ...and it exceeds the naive char-packing estimate that caused the
-        // background/marker drift (regression guard).
-        let total_width: usize = line.spans.iter().map(|s| s.content.width()).sum();
-        assert!(
-            heights[0] > total_width.div_ceil(width),
-            "word wrap should take more rows than div_ceil for this prose line: \
-             got {} vs div_ceil {}",
-            heights[0],
-            total_width.div_ceil(width),
-        );
-    }
-
-    #[test]
-    fn should_treat_empty_line_as_one_row() {
-        let lines = vec![Line::from("")];
-        assert_eq!(compute_row_heights(&lines, true, 80), vec![1]);
-    }
 }

From c0c04873d63a8c24f010b74d23a73988f399677f Mon Sep 17 00:00:00 2001
From: yuhuahung <yuhuahung@synology.com>
Date: Wed, 8 Jul 2026 17:04:11 +0800
Subject: [PATCH 6/7] fix(ui): extend comment-box gutter bar over wrapped rows

---
 src/ui/diff_unified.rs | 90 ++++++++++++++++++++++++++++++++++++++++++
 src/ui/diff_view.rs    | 36 ++++++++++-------
 2 files changed, 112 insertions(+), 14 deletions(-)

diff --git a/src/ui/diff_unified.rs b/src/ui/diff_unified.rs
index 1317b929..35bd61e7 100644
--- a/src/ui/diff_unified.rs
+++ b/src/ui/diff_unified.rs
@@ -1831,4 +1831,94 @@ mod remote_comments_snapshot_tests {
             app.diff_state.visible_line_count
         );
     }
+
+    #[test]
+    fn should_extend_comment_bar_over_wrapped_rows_when_wrap_enabled() {
+        use crate::model::{Comment, CommentType};
+
+        let long: String = "x".repeat(200);
+        let hunk = DiffHunk {
+            header: "@@ -0,0 +1,1 @@".to_string(),
+            lines: vec![DiffLine {
+                origin: LineOrigin::Addition,
+                content: long.clone(),
+                old_lineno: None,
+                new_lineno: Some(1),
+                highlighted_spans: None,
+            }],
+            old_start: 0,
+            old_count: 0,
+            new_start: 1,
+            new_count: 1,
+        };
+        let hunks = vec![hunk];
+        let content_hash = DiffFile::compute_content_hash(&hunks);
+        let path = PathBuf::from("src/lib.rs");
+        let file = DiffFile {
+            old_path: Some(path.clone()),
+            new_path: Some(path.clone()),
+            status: FileStatus::Modified,
+            hunks,
+            is_binary: false,
+            is_too_large: false,
+            is_commit_message: false,
+            content_hash,
+        };
+        let mut app = make_revision_app(vec![file]);
+        app.set_diff_wrap(true);
+
+        let file_review = app
+            .session
+            .get_file_mut(&path)
+            .expect("file registered in session");
+        file_review.add_line_comment(
+            1,
+            Comment::new("needs a rename".to_string(), CommentType::Note, None),
+        );
+        app.rebuild_annotations();
+
+        let backend = TestBackend::new(80, 20);
+        let mut terminal = Terminal::new(backend).unwrap();
+        terminal
+            .draw(|frame| super::render_unified_diff(frame, &mut app, Rect::new(0, 0, 80, 20)))
+            .expect("draw");
+        let buffer = terminal.backend().buffer();
+
+        let mut cap: Option<(u16, u16)> = None;
+        let mut cap_count = 0;
+        for y in 0..buffer.area.height {
+            for x in 0..buffer.area.width {
+                if buffer[(x, y)].symbol() == "╭" {
+                    cap = Some((x, y));
+                    cap_count += 1;
+                }
+            }
+        }
+        assert_eq!(
+            cap_count, 1,
+            "expected exactly one ╭ cap in the gutter, got {cap_count}"
+        );
+        let (bar_x, cap_y) = cap.unwrap();
+
+        let mut box_top_y: Option<u16> = None;
+        for y in (cap_y + 1)..buffer.area.height {
+            if buffer[(bar_x, y)].symbol() == "├" {
+                box_top_y = Some(y);
+                break;
+            }
+        }
+        let box_top_y = box_top_y.expect("expected ├ box top below the ╭ cap");
+        assert!(
+            box_top_y > cap_y + 1,
+            "test needs at least one row between cap and box top; cap_y={cap_y} box_top_y={box_top_y}"
+        );
+
+        for y in (cap_y + 1)..box_top_y {
+            let glyph = buffer[(bar_x, y)].symbol();
+            assert_eq!(
+                glyph, "│",
+                "expected │ at ({bar_x},{y}) between cap ({cap_y}) and box top ({box_top_y}), got {glyph:?}"
+            );
+        }
+    }
 }
diff --git a/src/ui/diff_view.rs b/src/ui/diff_view.rs
index 1fe13d7e..4db8699a 100644
--- a/src/ui/diff_view.rs
+++ b/src/ui/diff_view.rs
@@ -752,16 +752,18 @@ pub(super) fn paint_comment_box_bar(frame: &mut Frame, ctx: &DiffOverlayPaint) {
     let style = styles::file_header_style(ctx.theme);
     let fg = style.fg.unwrap_or(ctx.theme.fg_primary);
 
-    // Walk visible logical rows once, mapping each to its first visual row.
-    let mut row_visual: Vec<(usize, u16)> = Vec::with_capacity(ctx.visible_lines_unscrolled.len());
+    // Walk visible logical rows once, mapping each to its first visual row
+    // and its visual row count so wrapped rows also get the bar glyph.
+    let mut row_visual: Vec<(usize, u16, usize)> =
+        Vec::with_capacity(ctx.visible_lines_unscrolled.len());
     let mut visual_row: usize = 0;
     for (idx, _) in ctx.visible_lines_unscrolled.iter().enumerate() {
         if visual_row >= ctx.inner.height as usize {
             break;
         }
         let logical = ctx.scroll_offset + idx;
-        row_visual.push((logical, ctx.inner.y + visual_row as u16));
         let rows = visual_rows_for_line(ctx.row_heights, idx);
+        row_visual.push((logical, ctx.inner.y + visual_row as u16, rows));
         visual_row += rows;
     }
 
@@ -771,23 +773,29 @@ pub(super) fn paint_comment_box_bar(frame: &mut Frame, ctx: &DiffOverlayPaint) {
         }
         let bar_top_logical = anchor.box_top_row.saturating_sub(anchor.height);
         // Bar covers logical rows [bar_top_logical, box_top_row - 1].
-        for (logical, y) in &row_visual {
+        for (logical, y, rows) in &row_visual {
             if *logical >= anchor.box_top_row {
                 break;
             }
             if *logical < bar_top_logical {
                 continue;
             }
-            let glyph = if *logical == bar_top_logical {
-                '╭'
-            } else {
-                '│'
-            };
-            let cell = &mut frame.buffer_mut()[(bar_screen_col, *y)];
-            cell.set_char(glyph);
-            cell.set_fg(fg);
-            if let Some(bg) = style.bg {
-                cell.set_bg(bg);
+            for r in 0..*rows {
+                let y = *y + r as u16;
+                if y >= ctx.inner.y + ctx.inner.height {
+                    break;
+                }
+                let glyph = if *logical == bar_top_logical && r == 0 {
+                    '╭'
+                } else {
+                    '│'
+                };
+                let cell = &mut frame.buffer_mut()[(bar_screen_col, y)];
+                cell.set_char(glyph);
+                cell.set_fg(fg);
+                if let Some(bg) = style.bg {
+                    cell.set_bg(bg);
+                }
             }
         }
     }

From 5d4eee133b92e58b63006702235b2536e68f0612 Mon Sep 17 00:00:00 2001
From: yuhuahung <yuhuahung@synology.com>
Date: Wed, 8 Jul 2026 17:13:38 +0800
Subject: [PATCH 7/7] feat(ui): replace front-draining with cursor walk in
 wrap_spans hard split

---
 src/ui/text_utils.rs | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/ui/text_utils.rs b/src/ui/text_utils.rs
index b953d8cf..0800c383 100644
--- a/src/ui/text_utils.rs
+++ b/src/ui/text_utils.rs
@@ -105,7 +105,7 @@ pub(super) fn wrap_spans<'a>(spans: &[Span<'a>], width: usize) -> Vec<Vec<Span<'
         return vec![spans.to_vec()];
     }
 
-    #[derive(Clone)]
+    #[derive(Clone, Copy)]
     struct Item {
         ch: char,
         style: Style,
@@ -136,11 +136,12 @@ pub(super) fn wrap_spans<'a>(spans: &[Span<'a>], width: usize) -> Vec<Vec<Span<'
             *unit_w = 0;
             return;
         }
-        while !unit.is_empty() {
+        let mut pos = 0;
+        while pos < unit.len() {
             let remaining = width.saturating_sub(*current_w);
             let mut consumed = 0usize;
             let mut consumed_w = 0usize;
-            for it in unit.iter() {
+            for it in &unit[pos..] {
                 if consumed_w + it.w > remaining {
                     break;
                 }
@@ -149,26 +150,22 @@ pub(super) fn wrap_spans<'a>(spans: &[Span<'a>], width: usize) -> Vec<Vec<Span<'
             }
             if consumed == 0 {
                 if current.is_empty() {
-                    let it = unit.remove(0);
-                    let w = it.w;
-                    current.push(it);
-                    *current_w = w;
-                    rows.push(std::mem::take(current));
-                    *current_w = 0;
-                } else {
-                    rows.push(std::mem::take(current));
-                    *current_w = 0;
+                    current.push(unit[pos]);
+                    pos += 1;
                 }
+                rows.push(std::mem::take(current));
+                *current_w = 0;
             } else {
-                let drained: Vec<Item> = unit.drain(..consumed).collect();
-                current.extend(drained);
+                current.extend_from_slice(&unit[pos..pos + consumed]);
+                pos += consumed;
                 *current_w += consumed_w;
-                if !unit.is_empty() {
+                if pos < unit.len() {
                     rows.push(std::mem::take(current));
                     *current_w = 0;
                 }
             }
         }
+        unit.clear();
         *unit_w = 0;
     }