Fix inline Markdown image previews in chat by Aculnaj · Pull Request #4785 · pingdotgg/t3code

Aculnaj · 2026-07-28T21:33:11Z

What Changed

Render Markdown images in assistant messages as compact inline previews.
Resolve workspace-local image paths through T3 Code's existing signed asset route, including relative, absolute, and file:// paths.
Add loading and unavailable states while preserving external image URLs.
Reuse the existing expanded-image dialog when an inline preview is clicked.
Keep linked Markdown images under the surrounding link's interaction instead of nesting an image-preview button inside the anchor.
Add focused tests for Markdown image path resolution and linked-image semantics.

Why

When the T3 Code server runs on one device and the web client is opened on another, local image paths from assistant messages cannot be loaded directly by the browser. They currently render as broken images with only their alt text visible.

Using the existing thread-scoped asset flow lets the environment that owns the workspace serve the image securely to the connected client without broadening filesystem access.

UI Changes

Before

Workspace-local Markdown images render as broken image icons and alt text.

Before screenshot to be attached.

After

Images render as compact previews with a subtle outline. Clicking a preview opens the existing expanded-image dialog, and Escape closes it again.

After screenshot and short interaction recording to be attached.

Verification

vp test run apps/web/src/markdown-images.test.ts apps/web/src/components/chat/MessagesTimeline.test.tsx — 19 tests passed.
vp run --filter @t3tools/web typecheck passed.
Targeted formatting and linting completed without errors.
Integrated browser verification in an isolated T3 environment confirmed that workspace images were served through /api/assets/; standalone images expanded and closed with Escape, while a linked image opened only its link without rendering a nested button or opening the image dialog.

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes
I included a video for animation/interaction changes

Note

Medium Risk
Touches chat rendering and workspace file asset URLs for assistant messages; scope is bounded to image paths and existing asset APIs, but remote clients now depend on signed asset delivery for local paths.

Overview
Assistant chat Markdown now renders img nodes as inline previews instead of raw broken <img> tags when paths point at workspace images.

Workspace-local sources (relative, absolute, and file://) are resolved with new resolveMarkdownImageFile and loaded through the existing thread-scoped signed asset route via useAssetUrlState, with loading and unavailable placeholders. External URLs still use direct src. Standalone previews can open the existing expanded-image dialog through a new onImageExpand prop wired from MessagesTimeline.

Linked images ([![alt](img)](url)) no longer nest a zoom button inside the anchor—a context flag disables expand so the link keeps sole click behavior.

Tests cover path resolution and linked-vs-standalone image semantics in the timeline markup.

^{Reviewed by Cursor Bugbot for commit a8dbe3e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix inline Markdown image previews in chat with workspace file resolution and expansion

Adds a custom image renderer in ChatMarkdown.tsx that resolves workspace-relative image paths to asset URLs, shows loading/unavailable placeholders, and triggers an onImageExpand callback on click.
Introduces markdown-images.ts with resolveMarkdownImageFile to determine when a markdown image src refers to a workspace file eligible for asset resolution.
Images nested inside links (anchor tags) suppress the expansion button and remain link-clickable only, detected via a new MarkdownImageInsideLinkContext.
Wires onImageExpand through AssistantTimelineRow in MessagesTimeline.tsx so assistant message images trigger the timeline's existing image expansion handler.

^{Macroscope summarized a8dbe3e.}

- Resolve workspace image paths against the thread cwd - Add loading, unavailable, and expandable image states - Cover markdown image path resolution with focused tests

coderabbitai · 2026-07-28T21:33:19Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a4a354d3-5d8f-485e-b335-0c5e4ec3e64f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

cursor

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit a8dbe3e. Configure here.}

cursor · 2026-07-29T21:38:02Z

  className?: string;
  /** Treat single newlines as hard breaks — chat-style user input. */
  lineBreaks?: boolean;
+  onImageExpand?: ((preview: ExpandedImagePreview) => void) | undefined;


File image URLs sanitized away

Medium Severity

rehype-sanitize strips file:// image src attributes because CHAT_MARKDOWN_SANITIZE_SCHEMA only permits the file protocol for href. This prevents file:// workspace images from rendering, as the custom image component never receives the original source to process.

^{Reviewed by Cursor Bugbot for commit a8dbe3e. Configure here.}

@Aculnaj can you please take a look?

macroscopeapp · 2026-07-29T21:39:21Z

Approvability

Verdict: Needs human review

This PR introduces a new feature (inline Markdown image previews) with multiple new components and UI capabilities. There is also an unresolved review comment identifying a potential bug where file:// URLs get sanitized, which could prevent workspace images from rendering correctly.

^{You can customize Macroscope's approvability policy. Learn more.}

TheBit · 2026-08-09T15:26:29Z

When the T3 Code server runs on one device and the web client is opened on another

It doesn't matter if this is on one device/client or another. You can't just see any pics in the chat, which is very sad :(
Just prompt:

Take the screenshot of https://example.com/ and paste it here

t3dotgg · 2026-08-23T11:55:20Z

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. Workspace image rendering already shipped in #6433.

Render inline markdown image previews

d9e6b6e

- Resolve workspace image paths against the thread cwd - Add loading, unavailable, and expandable image states - Cover markdown image path resolution with focused tests

github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Jul 28, 2026

macroscopeapp Bot reviewed Jul 28, 2026

View reviewed changes

Comment thread apps/web/src/components/ChatMarkdown.tsx

Fix linked Markdown image interactions

a8dbe3e

Aculnaj marked this pull request as ready for review July 29, 2026 21:31

cursor Bot reviewed Jul 29, 2026

View reviewed changes

t3dotgg closed this Aug 23, 2026

Navigation Menu

Uh oh!

Fix inline Markdown image previews in chat - #4785

Fix inline Markdown image previews in chat#4785
Aculnaj wants to merge 2 commits into
pingdotgg:mainfrom
Aculnaj:t3code/inline-chat-image-previews

Aculnaj commented Jul 28, 2026 •

edited by macroscopeapp Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 28, 2026 •

edited

Loading

Review skipped

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Jul 29, 2026

Uh oh!

TheBit Aug 10, 2026

Uh oh!

macroscopeapp Bot commented Jul 29, 2026

Uh oh!

TheBit commented Aug 9, 2026

Uh oh!

t3dotgg commented Aug 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Aculnaj commented Jul 28, 2026 • edited by macroscopeapp Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What Changed

Why

UI Changes

Before

After

Verification

Checklist

Fix inline Markdown image previews in chat with workspace file resolution and expansion

Uh oh!

coderabbitai Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jul 29, 2026

Choose a reason for hiding this comment

File image URLs sanitized away

Uh oh!

TheBit Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

macroscopeapp Bot commented Jul 29, 2026

Approvability

Uh oh!

TheBit commented Aug 9, 2026

Uh oh!

t3dotgg commented Aug 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Aculnaj commented Jul 28, 2026 •

edited by macroscopeapp Bot

Loading

coderabbitai Bot commented Jul 28, 2026 •

edited

Loading