feat: add terminal-native image preview to TUI
I maintainer di solito rispondono entro 1 giorno
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Idoneità per principianti
- 15/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Attiva
- Stack tecnologico
- javascript
- Ambito
- cli
Direzione di ricerca
Start with the image() renderer in src/tui/markdownText.js (around line 242), which currently emits raw markdown, and with readImageImpl in src/tools/image/readImage.js for the bytes. Check tests/unit/markdownText.test.js for the existing renderer tests. The issue requires an OpenSpec proposal and design sign-off before any code, so this is not ready to start. Done means the escape sequence is emitted for a supported terminal and the markdown fallback is kept otherwise.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
Summary
Add terminal-native image preview to the TUI, rendering images directly in the terminal via the iTerm/Kitty inline-image protocol using the existing readImage tool and image tooling.
Motivation
Users want to preview images without leaving the terminal or opening an external viewer. The TUI currently has no way to render image content inline, forcing a context switch to view screenshots, diagrams, or other image assets.
Proposed Solution
Render images inline in the TUI using the iTerm/Kitty inline-image protocol. Reuse the existing readImage tool and image tooling to load image data, then emit the appropriate terminal escape sequences to display the image in place.
Dependencies
- Terminal protocol support — iTerm2, Kitty, WezTerm, or a compatible terminal that supports the inline-image protocol. No npm package required; the feature relies on terminal-native escape sequences.
- Existing tooling — Reuse the existing
readImagetool and image handling code already present in the project.
Testing Strategy
- Unit tests: Verify the image-to-escape-sequence conversion produces correct output for supported formats.
- Integration test: Render an image through the TUI and confirm the inline-image protocol is emitted.
- Edge cases: Unsupported terminal (no inline-image support), missing image file, very large image, and non-image file input.
Security Considerations
- Credential storage: No credentials involved — this feature only reads local image files.
- Input validation: Validate image paths and file types before reading to prevent path traversal and unexpected file reads.
- OWASP: Restrict reads to allowed image paths; avoid reading arbitrary files based on user-controlled input.
Alternatives Considered
- External viewer — Launching an external image viewer (e.g.,
open,xdg-open) is simpler but breaks the terminal-native workflow and requires a GUI. - ASCII/ANSI art rendering — Lower fidelity and not a true image preview.
OpenSpec Note
This project uses OpenSpec for feature development. If this request is approved, I will:
- Run
/opsx:proposeto generate a full proposal with specs and tasks - Iterate on the design before any code is written
- Follow the task-driven implementation workflow
Additional Context
Split out from issue #1339 as part of the "Terminal image preview" group of TUI enhancements.
Audit Findings (for Issue #1355)
src/tui/markdownText.js— Theimage({ href, title, text, tokens })renderer (line 242) currently emits the raw markdownstring. This is the primary integration point: replace it with an inline-image escape sequence when the terminal supports the iTerm/Kitty protocol.src/tools/image/readImage.js—readImageImplreturns{ ok, mimeType, data }wheredatais base64 andmimeTypeis detected from the file extension viadetectMimeType(). This is the source of image bytes for inline rendering. Note theimage.maxSizeconfig (default 100000 bytes on the base64 output) caps how large an image can be read — inline previews will inherit this limit.src/tools/image/sendImage.js—sendImageImplbuilds adata:<mimeType>;base64,<data>URI. The same data-URI construction pattern is reusable for the inline-image protocol payload.src/tools/index.js—readImageis registered withfilesystem:readpermission and classified forsearch,research,coding,documentation,debugagent types. No new registration needed for the TUI renderer.src/provider/imageDispatchMiddleware.js— HandlesreadImageresults for LLM vision dispatch (multimodalimage_url). This is the agent-side path; the TUI inline preview is a separate, terminal-side rendering concern and does not overlap with this middleware.src/tui/messageBubble.js— Renders message content throughMarkdownText(line 403/420). Inline images rendered bymarkdownTextwill flow through here automatically; no change needed unless image sizing/positioning requires a custom component.- Dependencies already present —
ansi-escapes(v7.3.0) andink(v8.0.0) are inpackage.json.ansi-escapesprovides terminal escape helpers; verify whether it exposes an inline-image helper or whether the iTerm/Kitty escape sequence must be constructed manually. - Tests — Existing coverage at
tests/unit/markdownText.test.js(renderer),tests/unit/tools/image/readImage.test.js, andtests/unit/tools/image/sendImage.test.js. New tests should extendmarkdownText.test.jsfor the image renderer and add a terminal-protocol detection test.
Fix Steps
- Detect terminal support — Add a helper (e.g., in
src/tui/markdownText.jsor a newsrc/tui/imagePreview.js) that detects whether the terminal supports the iTerm (OSC 1337) or Kitty (OSC 1337/APC) inline-image protocol. Useprocess.env.TERM_PROGRAM(iTerm.app, WezTerm, kitty) and/orprocess.env.KITTY_WINDOW_IDas signals. - Build the inline-image escape sequence — Construct the protocol payload from the base64
dataandmimeTypereturned byreadImageImpl. For iTerm:\x1b]1337;File=inline=1;width=<w>;height=<h>;preserveAspectRatio=1:<base64>\x07. For Kitty:\x1b_Ga=T,f=100,<base64>\x1b\\. Reuse the data-URI construction pattern fromsendImage.js. - Wire into the markdown renderer — Replace the
image()method insrc/tui/markdownText.js(line 242) to emit the inline-image sequence when terminal support is detected, falling back to the currentmarkdown otherwise. - Handle image source resolution — The markdown
hrefmay be a local path or a URL. For local paths, read viareadImageImpl(respecting the sandbox allowlist andimage.maxSize); for remote URLs, fetch the bytes. Decide whether to support remote URLs in the MVP. - Write unit tests — Extend
tests/unit/markdownText.test.jsto assert the inline-image escape sequence is emitted for supported terminals and the markdown fallback for unsupported ones. Add a test for the protocol-detection helper. - Verify — Run
npm run test,npm run lint, andnpm run coverageto confirm no regressions.
- Lingua principale
- JavaScript
- Stelle
- 2
- Fork
- 0
- Merge medio
- 1h 34m
- PR unite (30g)
- 231
Preparare l'ambiente
- Include un Dockerfile o un file Docker Compose
- Ha un modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di avoidwork/madz
-
fix: show file picker empty message below the input lineForse già presa @avoidwork l’ha presa 1 giorno fa. Apertaapproved bug in progress
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
avoidwork/madz#1412 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
feature
Difficoltà 5/5 Più di una settimana Idoneità per principianti 35/100
I maintainer di solito rispondono entro 1 giorno
Tutte le issue di avoidwork/madz
Issue simili
-
documentation
Difficoltà 2/5 1-3 ore Idoneità per principianti 74/100
andromarces/agent-loops#886 ·
I maintainer di solito rispondono entro 1 giorno
-
bug effort:low model:light plan planner:gpt-6-1-sol tests
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
I maintainer di solito rispondono entro 1 giorno
-
B: visual
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
FreeTubeApp/FreeTube#9929 ·
I maintainer di solito rispondono entro 1 giorno
-
🐛 Bug: `--clear-screen` not very useful (at least not for dealing with large test/error output)Apertastatus: in triage type: bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 62/100
mochajs/mocha#6428 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
Fixed-position outer <svg> lands outside a clip after scroll; fixed HTML boxes are re-anchoredAperta🔧 in development
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100