Fix inline Markdown image previews in chat

[Aculnaj]

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.
• Add focused tests for Markdown image path resolution.

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 — 18 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 two 1024×1024 workspace images were served through /api/assets/, displayed as 288×288 previews, expanded on click, and closed with Escape.

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

Fix inline Markdown image previews in chat

• Adds a custom MarkdownImage renderer to ChatMarkdown that routes <img> tags through a workspace asset resolution pipeline or renders them directly.
• Workspace-referenced images are resolved via useAssetUrlState and show loading/unavailable states while fetching or on failure.
• Clicking an image triggers an optional onImageExpand callback (wired through MessagesTimeline) to open an expanded preview.
• Adds resolveMarkdownImageFile in markdown-images.ts to detect whether an image src refers to a workspace file path.

📊 Macroscope summarized d9e6b6e. 3 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted

🗂️ Filtered Issues

No issues evaluated.

[coderabbitai]

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: 869f0c9a-f1d7-4c88-874f-1f05fc0317fb

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

🟡 Medium components/ChatMarkdown.tsx:1657

Passing onExpand to MarkdownImage unconditionally renders a <button> inside the <a> for linked-image Markdown like [![alt](image.png)](https://example.com). This produces invalid nested interactive elements (<button> inside <a>) and causes a single click to both trigger image expansion and bubble to the anchor, navigating the link. The img component override should suppress or coordinate onExpand when the image is rendered inside a link.

🤖 Copy this AI Prompt to have your agent fix this:

In file @apps/web/src/components/ChatMarkdown.tsx around line 1657:

Passing `onExpand` to `MarkdownImage` unconditionally renders a `<button>` inside the `<a>` for linked-image Markdown like `[![alt](image.png)](https://example.com)`. This produces invalid nested interactive elements (`<button>` inside `<a>`) and causes a single click to both trigger image expansion and bubble to the anchor, navigating the link. The `img` component override should suppress or coordinate `onExpand` when the image is rendered inside a link.