feat(tui): click FROM FILE path to open single image overlay, remove inline preview

Author: engalar

tui/app.go

@@ -167,6 +167,30 @@ func (a App) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		a.syncHintBar()
 		return a, nil
 
+	case OpenImageOverlayMsg:
+		w, h := a.width, a.height
+		paths := msg.Paths
+		title := msg.Title
+		return a, func() tea.Msg {
+			innerW := w - 4
+			innerH := h - 4
+			if innerW < 20 {
+				innerW = 20
+			}
+			if innerH < 5 {
+				innerH = 5
+			}
+			perImg := innerH / len(paths)
+			if perImg < 1 {
+				perImg = 1
+			}
+			content := renderImagesWithSize(paths, innerW, perImg)
+			if content == "" {
+				content = "(no image rendered — set MXCLI_IMAGE_PROTOCOL or install chafa)"
+			}
+			return OpenOverlayMsg{Title: title, Content: content}
+		}
+
 	case CompareLoadMsg:
 		a.compare.SetContent(msg.Side, msg.Title, msg.NodeType, msg.Content)
 		return a, nil

tui/image_render.go

@@ -2,6 +2,7 @@ package tui
 
 import (
 	"encoding/base64"
+	"fmt"
 	"os"
 	"os/exec"
 	"strings"
@@ -62,10 +63,10 @@ func renderImageIterm2(path string) string {
 	return "\x1b]1337;File=inline=1;width=auto:" + encoded + "\a"
 }
 
-// renderImageChafa renders an image file using chafa, which auto-detects the
-// best protocol for the current terminal (including Sixel via DA1 query).
-func renderImageChafa(path string) string {
-	out, err := exec.Command("chafa", "--format=symbols", path).Output()
+// renderImageChafa renders an image file using chafa sized to width x height cells.
+func renderImageChafa(path string, width, height int) string {
+	size := fmt.Sprintf("%dx%d", width, height)
+	out, err := exec.Command("chafa", "--format=symbols", "--size="+size, path).Output()
 	if err != nil {
 		return ""
 	}
@@ -74,23 +75,25 @@ func renderImageChafa(path string) string {
 
 // renderImageSixel renders an image file using the Sixel protocol via img2sixel.
 // Falls back to chafa --format=sixel if img2sixel is not available.
-func renderImageSixel(path string) string {
+func renderImageSixel(path string, width, height int) string {
+	size := fmt.Sprintf("%dx%d", width, height)
 	if p, err := exec.LookPath("img2sixel"); err == nil {
-		out, err := exec.Command(p, path).Output()
+		out, err := exec.Command(p, "--width="+fmt.Sprintf("%d", width), path).Output()
 		if err == nil {
 			return string(out)
 		}
 	}
-	out, err := exec.Command("chafa", "--format=sixel", path).Output()
+	out, err := exec.Command("chafa", "--format=sixel", "--size="+size, path).Output()
 	if err != nil {
 		return ""
 	}
 	return string(out)
 }
 
-// renderImages renders a list of image file paths using the detected terminal protocol.
-// Returns empty string if the terminal does not support inline images.
-func renderImages(paths []string) string {
+// renderImagesWithSize renders a list of image paths using the detected terminal protocol,
+// constraining each image to width × perImgHeight cells.
+// Multiple images are stacked vertically.
+func renderImagesWithSize(paths []string, width, perImgHeight int) string {
 	protocol := detectImageProtocol()
 	if protocol == "" || len(paths) == 0 {
 		return ""
@@ -103,9 +106,9 @@ func renderImages(paths []string) string {
 		case "iterm2":
 			sb.WriteString(renderImageIterm2(p))
 		case "sixel":
-			sb.WriteString(renderImageSixel(p))
+			sb.WriteString(renderImageSixel(p, width, perImgHeight))
 		case "chafa":
-			sb.WriteString(renderImageChafa(p))
+			sb.WriteString(renderImageChafa(p, width, perImgHeight))
 		}
 		sb.WriteString("\n")
 	}

tui/miller.go

@@ -21,12 +21,13 @@ const (
 type PreviewPane struct {
 	childColumn  *Column
 	content      string
-	imageContent string // inline image sequences — excluded from yank
+	imagePaths   []string // source image file paths for lazy rendering
 	contentLines []string // split content for scrolling
 	highlighted  string
 	mode         PreviewMode
 	loading      bool
 	scrollOffset int
+
 }
 
 // navEntry stores one level of the navigation stack for drill-in / go-back.
@@ -114,7 +115,7 @@ func (m MillerView) Update(msg tea.Msg) (MillerView, tea.Cmd) {
 		Trace("miller: PreviewReady key=%q highlight=%q len=%d", msg.NodeKey, msg.HighlightType, len(msg.Content))
 		m.preview.loading = false
 		m.preview.content = msg.Content
-		m.preview.imageContent = msg.ImageContent
+		m.preview.imagePaths = msg.ImagePaths
 		m.preview.contentLines = strings.Split(msg.Content, "\n")
 		m.preview.highlighted = msg.HighlightType
 		m.preview.childColumn = nil
@@ -183,7 +184,7 @@ func (m MillerView) handleCursorChanged(msg CursorChangedMsg) (MillerView, tea.C
 		col.SetItems(treeNodesToItems(node.Children))
 		m.preview.childColumn = &col
 		m.preview.content = ""
-		m.preview.imageContent = ""
+		m.preview.imagePaths = nil
 		m.preview.contentLines = nil
 		m.preview.loading = false
 		m.preview.scrollOffset = 0
@@ -199,7 +200,7 @@ func (m MillerView) handleCursorChanged(msg CursorChangedMsg) (MillerView, tea.C
 		return m, cmd
 	}
 	m.preview.content = ""
-	m.preview.imageContent = ""
+	m.preview.imagePaths = nil
 	m.preview.contentLines = nil
 	m.preview.loading = false
 	return m, nil
@@ -393,8 +394,14 @@ func (m MillerView) renderPreview(previewWidth int) string {
 		if m.preview.mode == PreviewNDSL {
 			modeLabel = "NDSL"
 		}
+		if len(m.preview.imagePaths) > 0 {
+			modeLabel += "  🖼 click path to view"
+		}
 
 		contentHeight := m.height - 1 // reserve 1 line for header
+		if contentHeight < 1 {
+			contentHeight = 1
+		}
 		srcLines := m.preview.contentLines
 		totalSrc := len(srcLines)
 
@@ -461,14 +468,10 @@ func (m MillerView) renderPreview(previewWidth int) string {
 			out.WriteByte('\n')
 		}
 
-		rendered := lipgloss.NewStyle().
+		return lipgloss.NewStyle().
 			Width(previewWidth).
 			MaxHeight(m.height).
 			Render(out.String())
-		if m.preview.imageContent != "" {
-			rendered += "\n" + m.preview.imageContent
-		}
-		return rendered
 	}
 
 	return lipgloss.NewStyle().
@@ -628,6 +631,19 @@ func (m MillerView) handleMouse(msg tea.MouseMsg) (MillerView, tea.Cmd) { //noli
 			return m, nil
 
 		case zonePreview:
+			// If imagecollection, click a FROM FILE line → open that image in overlay
+			if m.preview.childColumn == nil && len(m.preview.imagePaths) > 0 {
+				// Y=0 tabbar, Y=1 MDL header, Y=2+ content (0-indexed visual lines)
+				clickedVLine := msg.Y - 2
+				path := findImagePathAtClick(m.preview.contentLines, m.preview.imagePaths,
+					clickedVLine, m.preview.scrollOffset)
+				if path != "" {
+					return m, func() tea.Msg {
+						return OpenImageOverlayMsg{Title: "Image Preview", Paths: []string{path}}
+					}
+				}
+				return m, nil
+			}
 			// Click preview child item → drill in, then select the clicked item
 			if m.preview.childColumn != nil {
 				clickedIdx := m.preview.childColumn.HitTestIndex(msg.Y)
@@ -748,7 +764,7 @@ func (m *MillerView) updateFocusStyles() {
 func (m *MillerView) clearPreview() {
 	m.preview.childColumn = nil
 	m.preview.content = ""
-	m.preview.imageContent = ""
+	m.preview.imagePaths = nil
 	m.preview.contentLines = nil
 	m.preview.loading = false
 	m.preview.scrollOffset = 0
@@ -811,3 +827,37 @@ func cloneItems(items []ColumnItem) []ColumnItem {
 	copy(cloned, items)
 	return cloned
 }
+
+// findImagePathAtClick maps a clicked visual line (0-indexed relative to content area)
+// plus the current scroll offset to an image file path in imagePaths.
+// Returns "" if no FROM FILE line is found near the click.
+func findImagePathAtClick(contentLines, imagePaths []string, clickedVLine, scrollOffset int) string {
+	// Approximate source line: each long FROM FILE line typically wraps to ~2 visual lines.
+	// Search a window of ±3 source lines around the estimate to handle wrapping.
+	approx := clickedVLine + scrollOffset
+	for delta := 0; delta <= 3; delta++ {
+		for _, sign := range []int{0, 1, -1} {
+			srcIdx := approx + sign*delta
+			if srcIdx < 0 || srcIdx >= len(contentLines) {
+				continue
+			}
+			plain := stripANSI(contentLines[srcIdx])
+			i := strings.Index(plain, "FROM FILE '")
+			if i == -1 {
+				continue
+			}
+			rest := plain[i+len("FROM FILE '"):]
+			end := strings.Index(rest, "'")
+			if end == -1 {
+				continue
+			}
+			foundPath := rest[:end]
+			for _, p := range imagePaths {
+				if p == foundPath {
+					return p
+				}
+			}
+		}
+	}
+	return ""
+}

tui/preview.go

@@ -46,14 +46,14 @@ const (
 // PreviewResult holds cached preview content.
 type PreviewResult struct {
 	Content       string
-	ImageContent  string // rendered inline images (excluded from yank)
-	HighlightType string // "mdl" / "ndsl" / "plain"
+	ImagePaths    []string // image file paths for lazy rendering (excluded from yank)
+	HighlightType string   // "mdl" / "ndsl" / "plain"
 }
 
 // PreviewReadyMsg is sent when async preview content is available.
 type PreviewReadyMsg struct {
 	Content       string
-	ImageContent  string // rendered inline images (excluded from yank)
+	ImagePaths    []string // image file paths for lazy rendering (excluded from yank)
 	HighlightType string
 	NodeKey       string
 }
@@ -133,21 +133,20 @@ func (e *PreviewEngine) RequestPreview(nodeType, qualifiedName string, mode Prev
 				highlighted = DetectAndHighlight(content)
 			}
 
-			// Render inline images separately so yank only copies MDL text.
-			var imageContent string
+			// Extract image paths for lazy rendering (size-aware, excluded from yank).
+			var imagePaths []string
 			if strings.ToLower(nodeType) == "imagecollection" && mode == PreviewMDL {
-				imagePaths := extractImagePaths(content)
-				imageContent = renderImages(imagePaths)
+				imagePaths = extractImagePaths(content)
 			}
 
-			result := PreviewResult{Content: highlighted, ImageContent: imageContent, HighlightType: highlightType}
+			result := PreviewResult{Content: highlighted, ImagePaths: imagePaths, HighlightType: highlightType}
 			e.mu.Lock()
 			e.cache[key] = result
 			e.mu.Unlock()
 
 			return PreviewReadyMsg{
 				Content:       highlighted,
-				ImageContent:  imageContent,
+				ImagePaths:    imagePaths,
 				HighlightType: highlightType,
 				NodeKey:       key,
 			}

tui/tab.go

@@ -14,6 +14,12 @@ type OpenOverlayMsg struct {
 	Content string
 }
 
+// OpenImageOverlayMsg requests a full-size image overlay for a list of image paths.
+type OpenImageOverlayMsg struct {
+	Title string
+	Paths []string
+}
+
 // ParseTree parses JSON from mxcli project-tree output.
 func ParseTree(jsonStr string) ([]*TreeNode, error) {
 	var nodes []*TreeNode