#17610: feat(tui): add image file attachment support via @path syntax and /image command
size: M
Cluster:
Web UI Enhancements and Fixes
## Summary
Adds image file attachment support to the TUI, enabling users to send images to the agent directly from the terminal.
### The problem
The Gateway `chat.send` RPC already accepts `attachments[]` (base64 + mimeType), and `parseMessageWithAttachments()` properly validates, sniffs MIME, and converts to Claude API image content blocks. However, the TUI client had no way to send attachments — there was no input mechanism for images.
### The solution
Two complementary approaches:
**1. Inline `@path` syntax** — Users can reference image files directly in their message:
```
Analyze this screenshot @/home/user/screenshot.png and compare with @./mockup.jpg
```
The paths are extracted, files loaded as base64, and sent as attachments alongside the cleaned message text.
**2. `/image <path>` slash command** — For sending an image without additional text:
```
/image /tmp/error-screenshot.png
```
### Supported path formats
- Absolute: `@/home/user/photo.png`
- Relative: `@./images/test.jpg`
- Home-relative: `@~/Pictures/screenshot.webp`
- Quoted (spaces): `@"/path/with spaces/image.png"` or `@'./path/with spaces/image.png'`
### Supported image formats
png, jpg/jpeg, gif, webp, bmp, svg (max 5 MB)
### Changes
| File | Change |
|------|--------|
| `src/tui/gateway-chat.ts` | Add `attachments` to `ChatSendOptions`, pass through in `sendChat()` |
| `src/tui/tui-image-extract.ts` | **New** — `extractImagePaths()` + `loadImageAttachments()` |
| `src/tui/tui-image-extract.test.ts` | **New** — 18 unit tests |
| `src/tui/tui-command-handlers.ts` | Integrate image extraction in `sendMessage()` + handle `/image` command |
| `src/tui/commands.ts` | Add `/image` to slash command list + help text |
### Testing
- 18 new unit tests covering path extraction patterns, MIME detection, file size validation, multi-file loading, and error cases
- All existing TUI tests continue to pass
- Lint + format clean (0 warnings, 0 errors)
<!-- greptile_comment -->
<h3>Greptile Summary</h3>
Adds image file attachment support to the TUI via two input methods: inline `@path` syntax within messages and a `/image <path>` slash command. The implementation introduces a new `tui-image-extract.ts` module for regex-based path extraction and file loading (with extension, size, and MIME validation), wires attachments through `gateway-chat.ts` to the existing `chat.send` RPC, and includes 18 unit tests.
- The attachment type shape (`content`, `mimeType`, `fileName`) correctly matches what the gateway's `normalizeRpcAttachmentsToChatAttachments` expects
- Both the `/image` handler and `sendMessage` have a bug in their error-handling paths: if `loadImageAttachments` throws (file not found, too large, etc.) **before** the new run ID is assigned to `state.activeChatRunId`, the catch block will forget and null out a **previous** unrelated active run ID, potentially orphaning an in-flight chat request
<h3>Confidence Score: 3/5</h3>
- Mergeable with a targeted fix to the error-handling paths in both `/image` and `sendMessage`
- The core image extraction and loading logic is solid, the gateway integration type shapes match, and test coverage is good. However, the error-handling catch blocks in both the `/image` command handler and the modified `sendMessage` function can clobber an unrelated active run when the newly-added `loadImageAttachments` call throws before the new run ID is assigned. This is a real bug that can cause visible misbehavior (orphaned chat runs, lost error status) in a scenario that users will encounter (e.g. typo in image path).
- `src/tui/tui-command-handlers.ts` — both error-handling catch blocks need to be scoped to only clean up the run created within their own handler invocation
<sub>Last reviewed commit: 0d37b82</sub>
<!-- greptile_other_comments_section -->
<!-- /greptile_comment -->
Most Similar PRs
#20392: feat(tui): add image attachment support via /image command and drag...
by markshields-tl · 2026-02-18
87.3%
#16777: feat(gateway): add multimodal image support to /v1/chat/completions
by dzianisv · 2026-02-15
77.9%
#16346: feat: support image attachments in OpenAI chat completions endpoint
by sh1nj1 · 2026-02-14
75.7%
#22113: feat: support non-image file attachments in webchat chat.send
by Kt-L · 2026-02-20
75.6%
#10441: webchat: switch file uploads to HTTP /uploads
by supernewbilityxht1 · 2026-02-06
75.1%
#16018: feat: add image support to /v1/chat/completions endpoint
by sebastienb · 2026-02-14
73.0%
#4327: Gateway Web Chat: add image/file upload (attach, drag-drop, paste)
by RogerHsu7 · 2026-01-30
72.0%
#8284: Fix: Webchat images now persist after sending
by vishaltandale00 · 2026-02-03
71.9%
#22781: fix(webchat): persist chat attachments after guards and expose medi...
by Kansodata · 2026-02-21
71.0%
#6663: Web UI: handle drag-drop image attachments
by mar0der · 2026-02-01
70.7%