feat: add terminal-native image preview to TUI
Los mantenedores suelen responder en 1 día
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Aptitud para principiantes
- 15/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bastante claro
- Estado de actividad
- Activo
- Stack tecnológico
- javascript
- Área
- cli
Línea de trabajo
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.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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.
- Lenguaje dominante
- JavaScript
- Estrellas
- 3
- Forks
- 0
- Merge medio
- 1 h 27 min
- PR fusionados (30 d)
- 235
Preparar el entorno
- Incluye un Dockerfile o un archivo de Docker Compose
- Tiene una plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de avoidwork/madz
-
approved feature
Dificultad 4/5 3-5 días Aptitud para principiantes 52/100
Los mantenedores suelen responder en 1 día
-
feat: add browser automation toolPosiblemente ocupada @avoidwork la tomó hoy. Abiertoapproved feature in progress
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
Los mantenedores suelen responder en 1 día
-
feature
Dificultad 5/5 Más de una semana Aptitud para principiantes 35/100
Los mantenedores suelen responder en 1 día
-
feature
Dificultad 5/5 Más de una semana Aptitud para principiantes 35/100
Los mantenedores suelen responder en 1 día
Todos los issues de avoidwork/madz
Issues similares
-
Dificultad 1/5 Menos de una hora Aptitud para principiantes 70/100
Los mantenedores suelen responder en 1 día
-
Add: Story4 CZAbiertocheck:passed logos:add
Dificultad 1/5 Menos de una hora Aptitud para principiantes 70/100
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
adobe/helix-shared#1310 ·
Los mantenedores suelen responder en 1 día
-
[workshop-sim] Improve: Strengthen practice and checkpoints in Step 05 (What Are Agentic Workflows?)Abiertofeedback simulation workshop
Dificultad 2/5 1-3 horas Aptitud para principiantes 85/100
githubnext/gh-aw-workshop#4972 ·
Los mantenedores suelen responder en 1 día
-
agent/ci-maintainer ci good first issue help wanted stage/010-actionable
Dificultad 2/5 1-3 horas Aptitud para principiantes 80/100
cncf/endusers#1890 · 3 comentarios ·
Los mantenedores suelen responder en 1 día