fix: implement proper unicode-aware word wrapping for text overflow (#97)

- Add paragraph word wrapping in markdown renderer (handlers.rs)
- Track current line width for proper wrap decisions
- Replace chars().count() with UnicodeWidthStr::width() in text_utils.rs
- Replace chars().count() with UnicodeWidthStr::width() in wrapping.rs
- Add split_at_visual_width() for proper CJK/emoji handling
- Update tests to verify visual width calculations

Author: echobt

src/cortex-core/src/markdown/renderer/handlers.rs

@@ -3,7 +3,7 @@
 use pulldown_cmark::{CodeBlockKind, HeadingLevel};
 use ratatui::style::Style;
 use ratatui::text::{Line, Span};
-use unicode_width::UnicodeWidthStr;
+use unicode_width::{UnicodeWidthChar, UnicodeWidthStr};
 
 use crate::markdown::inline::{render_blockquote_prefix, render_hr};
 use crate::markdown::list::ListContext;
@@ -20,6 +20,7 @@ impl<'a> RenderState<'a> {
     pub(super) fn start_paragraph(&mut self) {
         self.add_blank_line_if_needed();
         self.in_paragraph = true;
+        self.current_line_width = 0;
     }
 
     pub(super) fn start_heading(&mut self, level: HeadingLevel) {
@@ -116,6 +117,7 @@ impl<'a> RenderState<'a> {
         self.flush_line();
         self.in_paragraph = false;
         self.needs_newline = true;
+        self.current_line_width = 0;
     }
 
     pub(super) fn end_heading(&mut self) {
@@ -338,11 +340,101 @@ impl<'a> RenderState<'a> {
             return;
         }
 
-        // Regular text
+        // Paragraph text - apply word wrapping
+        if self.in_paragraph {
+            self.wrap_paragraph_text(text);
+            return;
+        }
+
+        // Regular text (headings, etc.) - no wrapping needed
         let style = self.current_style();
         self.push_span(Span::styled(text.to_string(), style));
     }
 
+    /// Wraps paragraph text to fit within the renderer's width.
+    ///
+    /// Handles word boundaries, preserves inline styles across line breaks,
+    /// and properly measures unicode character widths (CJK characters, emoji).
+    fn wrap_paragraph_text(&mut self, text: &str) {
+        let style = self.current_style();
+        let max_width = self.renderer.width as usize;
+
+        // Account for blockquote prefix width
+        let prefix_width = if self.blockquote_depth > 0 {
+            // Each blockquote level adds "│ " (2 chars)
+            self.blockquote_depth * 2
+        } else {
+            0
+        };
+
+        let available_width = max_width.saturating_sub(prefix_width);
+        if available_width == 0 {
+            // No room for text
+            return;
+        }
+
+        // Process text word by word
+        for word in text.split_inclusive(|c: char| c.is_whitespace()) {
+            let word_width = UnicodeWidthStr::width(word);
+
+            // Check if word fits on current line
+            if self.current_line_width + word_width <= available_width {
+                // Word fits - add it
+                self.push_span(Span::styled(word.to_string(), style));
+                self.current_line_width += word_width;
+            } else if self.current_line_width == 0 {
+                // First word on line but too long - break it
+                self.wrap_long_word(word, style, available_width);
+            } else {
+                // Word doesn't fit - start new line
+                self.flush_line();
+                self.current_line_width = 0;
+
+                // Trim leading whitespace from word when starting new line
+                let trimmed = word.trim_start();
+                let trimmed_width = UnicodeWidthStr::width(trimmed);
+
+                if trimmed_width <= available_width {
+                    self.push_span(Span::styled(trimmed.to_string(), style));
+                    self.current_line_width = trimmed_width;
+                } else {
+                    // Even trimmed word is too long - break it
+                    self.wrap_long_word(trimmed, style, available_width);
+                }
+            }
+        }
+    }
+
+    /// Wraps a word that is too long to fit on a single line.
+    ///
+    /// Breaks the word at visual width boundaries, handling multi-width
+    /// unicode characters properly.
+    fn wrap_long_word(&mut self, word: &str, style: Style, max_width: usize) {
+        let mut current_chunk = String::new();
+        let mut current_width = 0;
+
+        for ch in word.chars() {
+            let ch_width = UnicodeWidthChar::width(ch).unwrap_or(0);
+
+            if current_width + ch_width > max_width && !current_chunk.is_empty() {
+                // Flush current chunk as a line
+                self.push_span(Span::styled(current_chunk.clone(), style));
+                self.flush_line();
+                current_chunk.clear();
+                current_width = 0;
+            }
+
+            current_chunk.push(ch);
+            current_width += ch_width;
+        }
+
+        // Handle remaining characters
+        if !current_chunk.is_empty() {
+            self.push_span(Span::styled(current_chunk, style));
+            self.current_line_width = current_width;
+        }
+    }
+
     pub(super) fn handle_code(&mut self, code: &str) {
         if self.table_builder.is_some() {
             self.current_cell.push_str(code);
@@ -423,6 +515,7 @@ impl<'a> RenderState<'a> {
         let mut spans = self.get_blockquote_prefix();
         spans.extend(self.current_spans.drain(..));
         self.lines.push(Line::from(spans));
+        self.current_line_width = 0;
     }
 
     /// Push a span to the current line.

src/cortex-core/src/markdown/renderer/state.rs

@@ -87,6 +87,8 @@ pub(super) struct RenderState<'a> {
     pub(super) in_paragraph: bool,
     /// Whether we need a blank line before the next block.
     pub(super) needs_newline: bool,
+    /// Current line width for paragraph wrapping (visual columns).
+    pub(super) current_line_width: usize,
 
     // Heading state
     /// Current heading level (if in a heading).
@@ -121,6 +123,7 @@ impl<'a> RenderState<'a> {
             current_cell: String::new(),
             in_paragraph: false,
             needs_newline: false,
+            current_line_width: 0,
             current_heading_level: None,
             current_link_url: None,
             current_list_item: Vec::new(),

src/cortex-core/src/widgets/chat/wrapping.rs

@@ -1,8 +1,11 @@
 //! Text wrapping utilities.
 //!
 //! Provides functions for wrapping text to fit within specified widths.
+//! Uses unicode-width for proper handling of CJK characters and emoji.
 
-/// Wraps text to fit within the specified width.
+use unicode_width::{UnicodeWidthChar, UnicodeWidthStr};
+
+/// Wraps text to fit within the specified width (measured in visual columns).
 pub fn wrap_text(text: &str, max_width: usize) -> Vec<String> {
     if max_width == 0 {
         return vec![text.to_string()];
@@ -19,15 +22,15 @@ pub fn wrap_text(text: &str, max_width: usize) -> Vec<String> {
         let mut current_width = 0;
 
         for word in line.split_whitespace() {
-            let word_width = word.chars().count();
+            let word_width = UnicodeWidthStr::width(word);
 
             if current_width == 0 {
                 // First word on the line
                 if word_width > max_width {
-                    // Word is longer than max width, split it
+                    // Word is longer than max width, split it by visual width
                     let mut remaining = word;
                     while !remaining.is_empty() {
-                        let (chunk, rest) = split_at_char_boundary(remaining, max_width);
+                        let (chunk, rest) = split_at_visual_width(remaining, max_width);
                         lines.push(chunk.to_string());
                         remaining = rest;
                     }
@@ -36,21 +39,21 @@ pub fn wrap_text(text: &str, max_width: usize) -> Vec<String> {
                     current_width = word_width;
                 }
             } else if current_width + 1 + word_width <= max_width {
-                // Word fits on current line
+                // Word fits on current line (1 for space)
                 current_line.push(' ');
                 current_line.push_str(word);
                 current_width += 1 + word_width;
             } else {
                 // Word doesn't fit, start new line
                 lines.push(std::mem::take(&mut current_line));
                 if word_width > max_width {
-                    // Word is longer than max width, split it
+                    // Word is longer than max width, split it by visual width
                     let mut remaining = word;
                     while !remaining.is_empty() {
-                        let (chunk, rest) = split_at_char_boundary(remaining, max_width);
+                        let (chunk, rest) = split_at_visual_width(remaining, max_width);
                         if rest.is_empty() {
                             current_line = chunk.to_string();
-                            current_width = chunk.chars().count();
+                            current_width = UnicodeWidthStr::width(chunk);
                         } else {
                             lines.push(chunk.to_string());
                         }
@@ -75,7 +78,35 @@ pub fn wrap_text(text: &str, max_width: usize) -> Vec<String> {
     lines
 }
 
+/// Splits a string at a visual width boundary, returning (prefix, suffix).
+///
+/// Uses unicode-width to properly handle multi-width characters like CJK
+/// characters (2 columns) and emoji.
+pub fn split_at_visual_width(s: &str, max_width: usize) -> (&str, &str) {
+    if max_width == 0 {
+        return ("", s);
+    }
+
+    let mut visual_width = 0;
+    let mut byte_idx = s.len();
+
+    for (idx, ch) in s.char_indices() {
+        let ch_width = UnicodeWidthChar::width(ch).unwrap_or(0);
+        if visual_width + ch_width > max_width {
+            byte_idx = idx;
+            break;
+        }
+        visual_width += ch_width;
+    }
+
+    s.split_at(byte_idx)
+}
+
 /// Splits a string at a character boundary, returning (prefix, suffix).
+///
+/// Note: This function splits by character count, not visual width.
+/// For visual width-aware splitting, use `split_at_visual_width` instead.
+#[allow(dead_code)]
 pub fn split_at_char_boundary(s: &str, max_chars: usize) -> (&str, &str) {
     if max_chars == 0 {
         return ("", s);
@@ -127,7 +158,8 @@ mod tests {
         let wrapped = wrap_text(text, 10);
         assert!(wrapped.len() > 1);
         for line in &wrapped {
-            assert!(line.chars().count() <= 10);
+            // Visual width should be <= max_width
+            assert!(UnicodeWidthStr::width(line.as_str()) <= 10);
         }
     }
 
@@ -148,6 +180,28 @@ mod tests {
         assert_eq!(wrapped[2], "Line 3");
     }
 
+    #[test]
+    fn test_split_at_visual_width() {
+        // ASCII - 1 column per char
+        let (a, b) = split_at_visual_width("hello", 3);
+        assert_eq!(a, "hel");
+        assert_eq!(b, "lo");
+
+        let (a, b) = split_at_visual_width("hello", 10);
+        assert_eq!(a, "hello");
+        assert_eq!(b, "");
+
+        // CJK characters - 2 columns per char
+        // "日本語" = 6 visual columns (3 chars * 2 columns each)
+        let (a, b) = split_at_visual_width("日本語", 4);
+        assert_eq!(a, "日本"); // 4 visual columns
+        assert_eq!(b, "語");
+
+        let (a, b) = split_at_visual_width("日本語", 2);
+        assert_eq!(a, "日"); // 2 visual columns
+        assert_eq!(b, "本語");
+    }
+
     #[test]
     fn test_split_at_char_boundary() {
         let (a, b) = split_at_char_boundary("hello", 3);
@@ -158,8 +212,19 @@ mod tests {
         assert_eq!(a, "hello");
         assert_eq!(b, "");
 
+        // Character-based split: 2 chars regardless of visual width
         let (a, b) = split_at_char_boundary("日本語", 2);
         assert_eq!(a, "日本");
         assert_eq!(b, "語");
     }
+
+    #[test]
+    fn test_wrap_cjk_text() {
+        // "日本語テスト" = 12 visual columns
+        let text = "日本語テスト";
+        let wrapped = wrap_text(text, 6);
+        assert_eq!(wrapped.len(), 2);
+        assert_eq!(wrapped[0], "日本語"); // 6 visual columns
+        assert_eq!(wrapped[1], "テスト"); // 6 visual columns
+    }
 }