fix: refine mermaid rendering — restore image placeholders, use picker font size, improve UX

Restore IMAGE_PLACEHOLDER_LINES (16) and PARAGRAPH_IMAGE_PLACEHOLDER_LINES (13)
to their original values since mermaid has its own MERMAID_PLACEHOLDER_LINES (22).
Use picker font dimensions instead of hardcoded 8px multiplier for mermaid pixel
width calculation. Truncate long mermaid error messages to fit display width. Add
hint when mermaid feature is disabled. Note mermaid-rs-renderer pre-1.0 maturity.

Author: nicholasjpaterno

Cargo.toml

@@ -92,6 +92,7 @@ opensesame = { version = "0.1.1", features = ["serde"] }
 libc = "0.2"
 
 # Mermaid diagram rendering (pure Rust, no external tools)
+# NOTE: pre-1.0 crate in early development; semver pins to >=0.2.0, <0.3.0
 mermaid-rs-renderer = { version = "0.2", default-features = false, optional = true }
 resvg = { version = "0.44", optional = true }
 

src/tui/app.rs

@@ -437,7 +437,7 @@ pub struct App {
     #[cfg(feature = "mermaid")]
     pub mermaid_render_errors: HashMap<u64, String>,
     #[cfg(feature = "mermaid")]
-    pub mermaid_last_width: u16,
+    pub mermaid_last_render_width: u32,
 
     // LaTeX detection state
     pub latex_detected: bool,
@@ -659,7 +659,7 @@ impl App {
             #[cfg(feature = "mermaid")]
             mermaid_render_errors: HashMap::new(),
             #[cfg(feature = "mermaid")]
-            mermaid_last_width: 0,
+            mermaid_last_render_width: 0,
 
             // LaTeX detection
             latex_detected: false,
@@ -804,11 +804,18 @@ impl App {
         source.hash(&mut hasher);
         let hash = hasher.finish();
 
-        // Clear caches on width change (re-rasterize at new size)
-        if width != self.mermaid_last_width {
+        // Use picker's actual font width for accurate pixel calculation
+        let font_width = self.picker.as_ref().map_or(8u16, |p| {
+            let (w, _) = p.font_size();
+            if w < 1 { 8 } else { w }
+        });
+        let target_px = (width as u32) * (font_width as u32);
+
+        // Clear caches on render width change (re-rasterize at new size)
+        if target_px != self.mermaid_last_render_width {
             self.mermaid_protocol_cache.clear();
             self.mermaid_render_errors.clear();
-            self.mermaid_last_width = width;
+            self.mermaid_last_render_width = target_px;
         }
 
         // Already cached (success or failure)
@@ -818,9 +825,6 @@ impl App {
         if self.mermaid_render_errors.contains_key(&hash) {
             return false;
         }
-
-        // Render: target pixel width ≈ terminal columns × ~8px per cell
-        let target_px = (width as u32) * 8;
         match crate::tui::mermaid::render_mermaid_to_image(source, target_px) {
             Ok(img) => {
                 if let Some(picker) = self.picker.as_mut() {

src/tui/interactive.rs

@@ -31,13 +31,13 @@ pub const IMAGE_OFFSET: usize = 7000;
 
 /// Placeholder lines reserved for block-level images in rendered output.
 /// 1 label line + IMAGE_PLACEHOLDER_LINES blank lines = BLOCK_IMAGE_TOTAL_LINES.
-pub const IMAGE_PLACEHOLDER_LINES: usize = 22;
-pub const BLOCK_IMAGE_TOTAL_LINES: usize = 1 + IMAGE_PLACEHOLDER_LINES; // 23
+pub const IMAGE_PLACEHOLDER_LINES: usize = 16;
+pub const BLOCK_IMAGE_TOTAL_LINES: usize = 1 + IMAGE_PLACEHOLDER_LINES; // 17
 
 /// Placeholder lines reserved for paragraphs containing inline images.
 /// 1 text line + PARAGRAPH_IMAGE_PLACEHOLDER_LINES blank lines = PARAGRAPH_WITH_IMAGE_TOTAL_LINES.
-pub const PARAGRAPH_IMAGE_PLACEHOLDER_LINES: usize = 22;
-pub const PARAGRAPH_WITH_IMAGE_TOTAL_LINES: usize = 1 + PARAGRAPH_IMAGE_PLACEHOLDER_LINES; // 23
+pub const PARAGRAPH_IMAGE_PLACEHOLDER_LINES: usize = 13;
+pub const PARAGRAPH_WITH_IMAGE_TOTAL_LINES: usize = 1 + PARAGRAPH_IMAGE_PLACEHOLDER_LINES; // 14
 
 /// Placeholder lines reserved for mermaid diagram rendering.
 pub const MERMAID_PLACEHOLDER_LINES: usize = 22;

src/tui/ui/mod.rs

@@ -733,10 +733,17 @@ fn render_mermaid_images(frame: &mut Frame, app: &mut App, area: Rect) {
                 frame.render_stateful_widget(img_widget, render_area, protocol_state);
             }
         } else if let Some(error) = app.mermaid_render_errors.get(&hash) {
+            let prefix = "⚠ mermaid render failed: ";
+            let max_msg_len = (inner.width as usize).saturating_sub(prefix.len());
+            let truncated = if error.len() > max_msg_len {
+                format!("{}…", &error[..max_msg_len.saturating_sub(1)])
+            } else {
+                error.clone()
+            };
             let error_line = Line::from(vec![
                 Span::styled("⚠ ", Style::default().fg(Color::Yellow)),
                 Span::styled(
-                    format!("mermaid render failed: {}", error),
+                    format!("mermaid render failed: {}", truncated),
                     Style::default().fg(Color::DarkGray),
                 ),
             ]);
@@ -1543,10 +1550,7 @@ fn render_markdown_enhanced(
                                 .add_modifier(Modifier::BOLD),
                         ));
                     }
-                    header_spans.push(Span::styled(
-                        "▸ mermaid diagram",
-                        theme.code_fence_style(),
-                    ));
+                    header_spans.push(Span::styled("▸ mermaid diagram", theme.code_fence_style()));
                     lines.push(Line::from(header_spans));
 
                     // Reserve blank lines for the image overlay
@@ -1571,6 +1575,14 @@ fn render_markdown_enhanced(
                         theme.code_fence_style(),
                     ));
 
+                    #[cfg(not(feature = "mermaid"))]
+                    if lang_str == "mermaid" {
+                        fence_spans.push(Span::styled(
+                            " (enable 'mermaid' feature to render)",
+                            Style::default().fg(Color::DarkGray),
+                        ));
+                    }
+
                     lines.push(Line::from(fence_spans));
 
                     // Highlighted code