fix(web/mobile): render project images in file nested markdown previews and harden markdown images

[flamboh]

The problem

• fix: render workspace images in chat markdown #6433 fixed workspace images in chat markdown. File previews still resolve relative images against the project root instead of the previewed document path. This meant that markdown files at the project root would render images properly, by coincidentally always checking cwd, but images in nested markdown files like docs/README.md would fail.
• mobile file previews don't render workspace images at all, and several src shapes die before the resolver runs.

The solution

• Use fix: render workspace images in chat markdown #6433's renderImage wiring for the file sidebar, resolving images based on the location of the document
• The current ThreadFeed architecture for chat markdown images is moved into a shared markdownImages.tsx to allow file previews and chat to use the same code paths
• This PR also makes it so inline styling rendering is handled correctly, an image with width/height=128 renders at 128x128 in file previews and snippets like <p align="center"> are centered

Hardening

• Windows drive paths get stripped before the resolver ever runs. This PR addresses that.
  • Without the fix, fix: render workspace images in chat markdown #6433's drive-path support is partially dead code: a Windows-hosted agent posting ![](C:\Users\x\screenshot.png) renders nothing
• SVG view fragments like icon.svg#logo would drop the #logo part and never re-append it, changing the client-side rendering
• Mobile fetched SVGs it couldn't draw
  • Mobile currently cannot render SVGs, so instead of fetching them when they can't even display, this PR guards against fetching them
• Copying text with a markdown image would drop the image
  • The clipboard serializer included the expiring asset URL, instead of the original markdown copy.

UI Changes

Below is the relevant HTML snippet for the desktop screenshots, with the favicon at public/icon-512.png for the root, and tests/public/icon-512.png for the nested examples:

<div>
  <p align="center">
    <img src="public/icon-512.png" alt="" width="128" height="128" />
  </p>

  <h1 align="center">Tagium</h1>

  <p align="center">
    Local, lossless metadata editing for MP3, FLAC, M4A, and Opus audio files. <br>
    Bring your favorite tracks anywhere you listen.
    <br />
    <a href="https://tagium.app">tagium.app</a>
  </p>
</div>

Web Before, nested readme

Fails to find images, is checking the wrong directory

Web Before, root dir readme

Ignores image height styling

Web After

Now renders at all and at the correct size.

Mobile UI changes

Here's the markdown for the below example:

# Workspace images in markdown

Relative image paths now resolve through signed asset URLs on iOS.

![Workspace-relative: apps/web/public/apple-touch-icon.png](apps/web/public/apple-touch-icon.png)

![External URL (control)](https://raw.githubusercontent.com/github/explore/main/topics/typescript/typescript.png)

iOS Before

iOS After

Scope Notes

• Mobile doesn't really render HTML at all right now, so I treated that as a separate out-of-scope issue.
• React Natives <Image> cannot decode SVGs at all, so SVGs show image not found.

The two above capability gaps are tracked in #7929

Review

• This could probably use a review from someone on an android client

---

Built with Fable 5 and GPT 5.6 Sol in T3 Code

Note

Render project images in FileMarkdownPreview and harden markdown images

• Resolves workspace-relative images in FileMarkdownPreview relative to the markdown document directory using signed asset URLs.
• Adds rehypePreserveWindowsImageSrc and isWindowsDrivePathHref to keep Windows drive path image sources through sanitization.
• Uses authoredImageSizeStyle to apply authored width and height as inline CSS while respecting chat layout bounds.
• Retains SVG fragments on signed URLs with markdownImageSourceFragment and copies the original markdown source on image selection.
• Risk: SVG images in mobile markdown render an unavailable placeholder instead of loading; check the .svg guard in markdownImages.tsx.

^{Macroscope summarized f632e92.}

[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: cd695e75-8500-41a0-b420-80cef0d58105

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

---

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]

One finding on the web markdown image path: workspace images now render a signed asset URL as src, which changes what the existing copy-as-markdown serializer emits. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the workspace-image loading placeholder now receives authored pixel dimensions but lacks the height/width caps the loaded image has, so oversized authored sizes can overflow the container and cause a large layout jump on load.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the new authored-dimension inline sizing in apps/web/src/components/ChatMarkdown.tsx: applying width and height as independent fixed pixel values lets the shared max-h/max-w caps clamp each axis separately, which breaks the authored aspect ratio for both-dimension images. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the authored image sizing added to ChatMarkdown: the both-axes branch still lets max-h-[30rem] reshape the box for tall images.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One remaining copy-fidelity inconsistency in the image renderer; the authored-size and signed-URL/copy handling for workspace images now looks correct (the min(100%, 30rem, ratio) width cap keeps the placeholder and the loaded image on the same proportional bounds).

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the new inline layout for workspace markdown images: the loading skeleton's geometry no longer matches the inline flow the same change introduces.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two layout findings on the new inline image handling in ChatMarkdown.tsx. Everything else (copy parity across all three image states, ratio-aware sizing for fully sized images, bounded placeholder width) looks consistent.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the authored image sizing helper in apps/web/src/components/ChatMarkdown.tsx. The both-axes case is now ratio-correct, but the single-axis case (the common README form) still loses the intrinsic ratio.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Skipped

Macroscope did not run approvability analysis for this PR. Macroscope could not determine whether this PR modifies its approvability configuration, so the PR was not approved automatically. A PR that may change the rules that govern approval is never approved automatically.

[t3dotgg]

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.

[Bil0000]

@t3dotgg This builds on top of #6433

[flamboh]

Bilal is correct. At minimum, any markdown file not in the root directory is broken and will not display images that are linked to relatively.

e.g.

tests/README.md
and
tests/public/icon.png

with an image relatively linked to by public/icon.png

will show "image not available"