Merge pull request #1003 from deepseek-harness/worktree/web-remote-markdown-images

feat(web): render remote Markdown images
2026-08-03 16:41:00 +08:00
parent 8daca45712 fec8339a18
commit 3009bc5312
16 changed files with 378 additions and 16 deletions
@@ -1,6 +1,6 @@
 # Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
-#   pnpm run verify-translation-pairing --write
-2026-07-23-web-assistant-markdown.md: 38d193271d88b3a8f32ba1b191e8a6d432176281
-2026-07-23-web-assistant-markdown.zh.md: be3cd041c6012af142fc27934fda125dfc4cf6de
+#   pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-07-23-web-assistant-markdown.md
+2026-07-23-web-assistant-markdown.md: d5074e6090699229f5c43dd93eef0fdfbfedab76
+2026-07-23-web-assistant-markdown.zh.md: 31f0fd6835c9921f544f4b6217a0c834dff79859
@@ -20,7 +20,7 @@ The dependency is explicit in `ui-primitives`; because that pure library is seed

 ## Untrusted output policy

-Assistant-authored destinations are restricted to absolute HTTP, HTTPS, and mailto URLs. HTTP(S) links open in a new tab with `rel="noopener noreferrer"`; relative destinations and other protocols render as non-navigable text. Markdown images render only their alt text, so model output cannot initiate a remote image request. Raw HTML remains inert source text because no HTML parser enters the pipeline. Shiki output is a static span tree generated from the fence text (no scripts or user HTML).
+Assistant-authored link destinations are restricted to absolute HTTP, HTTPS, and mailto URLs. HTTP(S) links open in a new tab with `rel="noopener noreferrer"`; relative destinations and other protocols render as non-navigable text. Markdown images follow the separate [remote-image policy](2026-07-30-web-remote-markdown-images.md). Raw HTML remains inert source text because no HTML parser enters the pipeline. Shiki output is a static span tree generated from the fence text (no scripts or user HTML).

 Fenced code and GFM tables own horizontal overflow so long content cannot widen the conversation column.

@@ -32,7 +32,7 @@ Fenced code and GFM tables own horizontal overflow so long content cannot widen

 **Parse Markdown into session snapshots.** This would make React nodes or presentation ASTs durable runtime state and reintroduce a final-versus-streaming mode boundary. Parsing stays at the presentation leaf instead.

-**Enable raw HTML or remote images with sanitization.** Neither capability has a current product need, while both enlarge the executable or network privacy boundary. They remain disabled rather than adding sanitizer and image-policy dependencies.
+**Enable raw HTML with sanitization.** Raw HTML has no current product need and would enlarge the executable-content boundary, so it remains disabled rather than adding a sanitizer dependency. Remote images are governed by the later [image policy](2026-07-30-web-remote-markdown-images.md).

 **Port deepsuite Prism `highlight.css` and the mdast pipeline.** Appearance parity is owned by CSS Modules and shared `--dsw-*` tokens; highlighting stays on the existing shiki allowlist so the client does not take a second highlighter or Prism class contract.

@@ -20,7 +20,7 @@ Web 对话通过会话事件、历史回放与流式累积保留 assistant Markd

 ## 不受信任输出策略

-assistant 生成的目标地址仅限绝对 HTTP、HTTPS 与 mailto URL。HTTP(S) 链接会在新标签页中打开，并带有 `rel="noopener noreferrer"`；相对目标地址与其他协议会渲染为不可导航的文本。Markdown 图片仅渲染替代文本，因此模型输出无法发起远程图片请求。由于管线中未引入 HTML 解析器，原始 HTML 仍是不会生效的源文本。Shiki 输出是由围栏文本生成的静态 span 树（不含脚本或用户 HTML）。
+assistant 生成的链接目标地址仅限绝对 HTTP、HTTPS 与 mailto URL。HTTP(S) 链接会在新标签页中打开，并带有 `rel="noopener noreferrer"`；相对目标地址与其他协议会渲染为不可导航的文本。Markdown 图片遵循独立的[远程图片策略](2026-07-30-web-remote-markdown-images.md)。由于流水线中未引入 HTML 解析器，原始 HTML 仍是不会生效的源文本。Shiki 输出是由围栏文本生成的静态 span 树（不含脚本或用户 HTML）。

 围栏代码与 GFM 表格各自处理横向溢出，因此较长内容无法撑宽对话栏。

@@ -32,7 +32,7 @@ assistant 生成的目标地址仅限绝对 HTTP、HTTPS 与 mailto URL。HTTP(S

 **将 Markdown 解析为会话快照。**这会让 React 节点或呈现层 AST 成为持久的运行时状态，并重新引入最终输出与流式输出之间的模式边界。解析仍留在呈现层的叶节点中。

-**通过净化启用原始 HTML 或远程图片。**当前产品并不需要这两项功能，但二者都会扩大可执行行为或网络隐私边界。因此它们保持禁用，无需增加净化器与图片策略依赖。
+**通过净化启用原始 HTML。** 原始 HTML 当前没有产品需求，并且会扩大可执行内容边界，因此保持禁用，无需增加净化器依赖。远程图片由后续的[图片策略](2026-07-30-web-remote-markdown-images.md)约束。

 **移植 deepsuite 的 Prism `highlight.css` 与 mdast 管线。**外观一致性由 CSS Modules 与共享的 `--dsw-*` token 负责；高亮仍走现有的 shiki 允许列表，使客户端不必引入第二套高亮器或 Prism class 契约。

@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# side as of the last confirmed-consistent state. Both languages carry equal authority;
+# after editing either side, bring the other along and re-record with:
+#   pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-07-30-web-remote-markdown-images.md
+2026-07-30-web-remote-markdown-images.md: 23dc699aab87597b7b5bfee83d0d745d4798303e
+2026-07-30-web-remote-markdown-images.zh.md: 54db9b25e9f558d77c84bb67c05fadea2c9086ac
@@ -0,0 +1,29 @@
+# Agent Note: Remote Web Markdown images
+
+Status: implemented
+
+English | [中文](2026-07-30-web-remote-markdown-images.zh.md)
+
+## Problem
+
+Assistant Markdown can name diagrams and screenshots with standard image syntax, but the Web renderer replaces every image with italic alt text. Even absolute HTTP(S) destinations therefore lose ordinary Markdown behavior.
+
+## Decision
+
+`MarkdownText` renders absolute HTTP(S) image destinations as lazy, responsive `<img>` elements with asynchronous decoding and `referrerPolicy="no-referrer"`. Relative paths, absolute local paths, `file:` URLs, and unsupported schemes retain the existing alt-text fallback. Raw HTML stays disabled, so an assistant cannot bypass the Markdown image component with a hand-authored `<img>`.
+
+The image component reuses the renderer's absolute-URL policy without adding a host proxy, local-file route, Session dependency, sanitizer, or image fetcher. Finalized history, streaming output, interrupted partials, and every other `MarkdownText` consumer receive the same behavior.
+
+## Alternatives considered
+
+**Keep all images as alt text.** This preserves the smallest network boundary but defeats the product need to inspect network-hosted visual artifacts inline.
+
+**Proxy remote images through the host.** A proxy could hide the browser's network address from the image origin, but it would make the host perform arbitrary outbound fetches and require a separate redirect, DNS, size, and content policy. Direct HTTP(S) loading keeps that request visible to browser controls; omitting the referrer limits conversation-origin disclosure.
+
+**Support local paths in the same change.** Web origins cannot directly load host files. A safe implementation needs a separately reviewed authority boundary, so relative paths, absolute local paths, and `file:` URLs remain disabled.
+
+**Allow `data:` images.** Large data URLs duplicate binary content into durable transcript text. The HTTP(S)-only policy covers the current need without expanding session logs.
+
+## Consequences
+
+Assistant replies display remote images during streaming and replay without changing session events or host protocols. Remote origins still observe the image request, client network address, and any credentials that browser policy permits for that origin. Local and unsupported destinations remain inert alt text.
@@ -0,0 +1,29 @@
+# Agent Note: Web 中的远程 Markdown 图片
+
+Status: implemented
+
+[English](2026-07-30-web-remote-markdown-images.md) | 中文
+
+## 问题
+
+assistant Markdown 可以使用标准图片语法引用图表和截图，但 Web 渲染器会把每张图片替换为斜体替代文本。因此，即使目标地址是绝对 HTTP(S) URL，也无法获得普通的 Markdown 图片行为。
+
+## 决策
+
+`MarkdownText` 将绝对 HTTP(S) 图片目标地址渲染为延迟加载的响应式 `<img>` 元素，并使用异步解码与 `referrerPolicy="no-referrer"`。相对路径、绝对本地路径、`file:` URL 与不支持的协议继续沿用现有的替代文本回退。原始 HTML 保持禁用，因此 assistant 无法通过手写 `<img>` 绕过 Markdown 图片组件。
+
+图片组件复用渲染器的绝对 URL 策略，不新增主机代理、本地文件路由、Session 依赖、净化器或图片抓取器。已完成的历史消息、流式输出、被中断的部分输出以及其他所有 `MarkdownText` 消费方均获得同一行为。
+
+## 考虑过的替代方案
+
+**将所有图片都保留为替代文本。** 这种方案维持了最小的网络边界，但无法满足在行内查看网络托管的视觉产物这一产品需求。
+
+**通过主机代理远程图片。** 代理可以向图片源站隐藏浏览器的网络地址，但这会让主机执行任意出站请求，并且需要单独制定重定向、DNS、大小与内容策略。直接加载 HTTP(S) 图片可让浏览器控制机制继续观察该请求；不发送 referrer 可减少对话来源信息的暴露。
+
+**在同一变更中支持本地路径。** Web 源无法直接加载主机文件。安全的实现需要单独评审的权限边界，因此相对路径、绝对本地路径与 `file:` URL 保持禁用。
+
+**允许 `data:` 图片。** 大型 data URL 会将二进制内容以文本形式重复写入持久化的 transcript（文本记录）。仅允许 HTTP(S) 的策略足以满足当前需求，且不会扩大会话日志。
+
+## 后果
+
+assistant 回复会在流式输出与回放期间显示远程图片，且不改变会话事件或主机协议。远程源站仍可观察到图片请求、客户端网络地址，以及浏览器策略允许发送给该源站的任何凭据。本地及不支持的目标地址仍只显示不会发起请求的替代文本。
@@ -0,0 +1,205 @@
+// Web e2e scenario: absolute HTTP(S) Markdown images. A validated session
+// assembled through the Session API is seeded cold into the real web
+// composition, then a separate image origin proves that the browser receives
+// a real network image while local-path Markdown remains inert alt text.
+import { createServer, type Server } from 'node:http'
+import { fileURLToPath } from 'node:url'
+import type { Browser, Page } from 'playwright'
+import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
+import { createMessage, createUserMessage } from '@deepseek-ai/dsh-llm'
+import {
+  SESSION_FORMAT_VERSION,
+  Session,
+  SessionId,
+} from '@deepseek-ai/dsh-session'
+import type {} from '@deepseek-ai/dsh-session-title'
+import {
+  assertFixtureInventory,
+  captureStableAria,
+  compareOrRefreshGolden,
+  launchWebScaffold,
+  seedSession,
+  watchConsole,
+  webSnapshotMode,
+  type WebScaffold,
+} from './scaffold.ts'
+import { newEnglishPage, saveFailureShot } from './support.ts'
+
+const SNAPSHOT_DIR = fileURLToPath(new URL('./snapshots/markdown-images', import.meta.url))
+const UI_EXPECTED = fileURLToPath(new URL('./snapshots/markdown-images/ui.expected.md', import.meta.url))
+const MODE = webSnapshotMode()
+const SEED_ID = 'markdown-images-web-e2e'
+const REMOTE_ALT = 'Remote test image'
+const LOCAL_ALT = 'Local test image'
+const PNG = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+  'base64',
+)
+
+interface ImageOrigin {
+  server: Server
+  url: string
+  requests: Array<{ path: string | undefined; referer: string | undefined }>
+}
+
+/** Start the deterministic remote image origin used by this browser scenario. */
+async function startImageOrigin(): Promise<ImageOrigin> {
+  const requests: ImageOrigin['requests'] = []
+  const server = createServer((request, response) => {
+    requests.push({ path: request.url, referer: request.headers.referer })
+    response.writeHead(200, {
+      'cache-control': 'no-store',
+      'content-length': PNG.length,
+      'content-type': 'image/png',
+    })
+    response.end(PNG)
+  })
+  await new Promise<void>((resolve, reject) => {
+    server.once('error', reject)
+    server.listen(0, '127.0.0.1', resolve)
+  })
+  const address = server.address()
+  if (address === null || typeof address === 'string') {
+    throw new Error('image origin did not expose an IP socket')
+  }
+  return {
+    server,
+    url: `http://127.0.0.1:${String(address.port)}/image.png`,
+    requests,
+  }
+}
+
+/** Stop one image origin after the browser and host release their requests. */
+async function stopServer(server: Server): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    server.close((error) => {
+      if (error === undefined) resolve()
+      else reject(error)
+    })
+  })
+}
+
+/** Build one closed, invariant-checked session fixture with remote and local image Markdown. */
+function markdownImageFixture(remoteUrl: string): string {
+  const session = new Session(SessionId('markdown-image-source'))
+  session.append('turn/start', {
+    turn: 1,
+    trigger: { kind: 'message', source: { kind: 'user' } },
+  })
+  const user = session.append('user/message', createUserMessage({
+    content: [{ type: 'text', text: 'Show the Markdown image policy.' }],
+    source: { kind: 'user' },
+  }), { surfaceOp: 'append' })
+  session.append('session/title', {
+    title: 'Markdown image policy',
+    messageSeqs: [user.seq],
+    source: { kind: 'fallback' },
+  })
+  session.append('step/start', { turn: 1, step: 1 })
+  session.append('assistant/message', {
+    turn: 1,
+    step: 1,
+    message: createMessage({
+      role: 'assistant',
+      content: [{
+        type: 'text',
+        text: [
+          '## Markdown images',
+          '',
+          `![${REMOTE_ALT}](${remoteUrl})`,
+          '',
+          `![${LOCAL_ALT}](./local-image.png)`,
+          '',
+          'REMOTE_IMAGE_DONE',
+        ].join('\n'),
+      }],
+      source: { kind: 'model', provider: 'fixture', model: 'fixture' },
+    }),
+  }, { surfaceOp: 'append' })
+  session.append('step/end', { turn: 1, step: 1 })
+  session.append('turn/end', { turn: 1, reason: { kind: 'completed' } })
+
+  const header = {
+    type: 'session',
+    version: SESSION_FORMAT_VERSION,
+    id: '{{sessionId}}',
+    createdAt: 0,
+    cwd: '{{cwd}}',
+  }
+  return [
+    JSON.stringify(header),
+    ...session.events.map(event => JSON.stringify(event)),
+    '',
+  ].join('\n')
+}
+
+describe('web e2e: remote Markdown image rendering', () => {
+  let scaffold: WebScaffold
+  let imageOrigin: ImageOrigin
+  let browser: Browser
+  let page: Page
+  let tripwire: ReturnType<typeof watchConsole>
+
+  beforeAll(async () => {
+    imageOrigin = await startImageOrigin()
+    scaffold = await launchWebScaffold({})
+    await seedSession(scaffold, markdownImageFixture(imageOrigin.url), SEED_ID)
+    browser = await chromium.launch()
+    page = await newEnglishPage(browser)
+    tripwire = watchConsole(page)
+    await page.goto(scaffold.baseUrl, { waitUntil: 'load' })
+    await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
+  }, 120_000)
+
+  afterAll(async () => {
+    await browser?.close()
+    await scaffold?.close()
+    await stopServer(imageOrigin.server)
+  })
+
+  it.skipIf(MODE === 'record')('loads only the remote image and matches the conversation golden', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-markdown-images'))
+    const groupRow = page.locator('[role="treeitem"]').first()
+    await groupRow.waitFor({ timeout: 15_000 })
+    await groupRow.click()
+    const sessionRow = page.locator('[role="treeitem"]').nth(1)
+    await sessionRow.waitFor({ timeout: 10_000 })
+    await sessionRow.click()
+    await expect.poll(() => page.getByText('REMOTE_IMAGE_DONE', { exact: true }).count(), {
+      timeout: 15_000,
+    }).toBe(1)
+
+    const image = page.getByRole('img', { name: REMOTE_ALT })
+    await image.waitFor({ timeout: 10_000 })
+    await expect.poll(() => image.evaluate(element => (element as HTMLImageElement).naturalWidth), {
+      timeout: 10_000,
+    }).toBeGreaterThan(0)
+    expect(await image.evaluate((element) => {
+      const computed = getComputedStyle(element)
+      return {
+        borderRadius: computed.borderRadius,
+        decoding: element.getAttribute('decoding'),
+        loading: element.getAttribute('loading'),
+        maxWidth: computed.maxWidth,
+        referrerPolicy: element.getAttribute('referrerpolicy'),
+      }
+    })).toEqual({
+      borderRadius: '8px',
+      decoding: 'async',
+      loading: 'lazy',
+      maxWidth: '100%',
+      referrerPolicy: 'no-referrer',
+    })
+    expect(await page.getByRole('img', { name: LOCAL_ALT }).count()).toBe(0)
+    expect(await page.getByText(LOCAL_ALT, { exact: true }).count()).toBe(1)
+    expect(imageOrigin.requests).toEqual([{ path: '/image.png', referer: undefined }])
+
+    const snapshot = (await captureStableAria(page, '[class*="centerCol"]', scaffold.workspaceCwd))
+      .split(SEED_ID).join('{{seededId}}')
+    await compareOrRefreshGolden(UI_EXPECTED, snapshot, MODE)
+    expect(tripwire.pageErrors).toEqual([])
+    expect(tripwire.warnings).toEqual([])
+    await assertFixtureInventory(SNAPSHOT_DIR, ['ui.expected.md'])
+  }, 60_000)
+})
@@ -0,0 +1,30 @@
+- banner:
+  - navigation "Session hierarchy":
+    - button "Markdown image policy" [disabled]
+  - tablist:
+    - tab "Chat" [selected]
+    - tab "Trajectory"
+- text: Show the Markdown image policy. {{clock}}
+- button "Copy":
+  - img
+- button "Branch into a new conversation":
+  - img
+- heading "Markdown images" [level=2]
+- paragraph:
+  - img "Remote test image"
+- paragraph: Local test image
+- paragraph: REMOTE_IMAGE_DONE
+- button "Copy":
+  - img
+- button "Branch into a new conversation":
+  - img
+- text: {{clock}}
+- textbox "Message the agent"
+- button "Commands":
+  - img
+- 'button "Access mode, current: Workspace Write"': Workspace Write
+- button "Select model, current deepseek-v4-flash":
+  - text: deepseek-v4-flash
+  - img
+- button "Send message" [disabled]
+- text: 1 turns · 1 steps Input 0 tok · Output 0 tok
@@ -46,6 +46,7 @@
    "tests/cordis-tool-round.e2e.ts",
    "tests/web-search-round.e2e.ts",
    "tests/message-actions.e2e.ts",
+    "tests/markdown-images.e2e.ts",
    "tests/queue-actions.e2e.ts",
    "tests/skill-invocation-policy.e2e.ts",
    "tests/permission-policy-context.e2e.ts",
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-primitives/README.md
-README.md: 8bdc3f043488631424c85a4319020c3d8ba5437b
-README.zh.md: 52b507bb924ca4c05e92ed09d819339621c3bc20
+README.md: 7318acd9b9a6047b1144789bcd2655132237f6c5
+README.zh.md: e326846dc2099472bc0a81dff093ff24b614559b
@@ -10,7 +10,7 @@ Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Modal/

 ## Markdown rendering

-`MarkdownText` renders GFM and `$…$` / `$$…$$` TeX math from untrusted assistant output through React elements, with math typeset by KaTeX and trusted commands disabled. It omits raw HTML, neutralizes relative and non-HTTP(S)/mailto links, opens HTTP(S) links with safe external-link attributes, and renders image alt text without loading remote resources; `MessageText` remains the literal-text primitive for user-authored content. `extractMarkdownPlainText` removes Markdown presentation markup for compact labels while preserving raw HTML as literal text. Element spacing, tables, links, and inline code use the same `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` tokens as deepsuite `@deepseek/md`. Fenced blocks render through `CodeBlock` (language banner, copy control, shiki for the registered grammars).
+`MarkdownText` renders GFM and `$…$` / `$$…$$` TeX math from untrusted assistant output through React elements, with math typeset by KaTeX and trusted commands disabled. It omits raw HTML, neutralizes relative and non-HTTP(S)/mailto links, opens HTTP(S) links with safe external-link attributes, and renders absolute HTTP(S) images without a referrer; relative paths, absolute local paths, `file:` URLs, and unsupported schemes retain their alt text. `MessageText` remains the literal-text primitive for user-authored content. `extractMarkdownPlainText` removes Markdown presentation markup for compact labels while preserving raw HTML as literal text. Element spacing, responsive images, tables, links, and inline code use the same `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` tokens as deepsuite `@deepseek/md`. Fenced blocks render through `CodeBlock` (language banner, copy control, shiki for the registered grammars).

 ## Terminal output

@@ -10,7 +10,7 @@

 ## Markdown 渲染

-`MarkdownText` 通过 React 元素渲染来自不受信任 assistant 输出的 GFM 与 `$…$` / `$$…$$` TeX 公式，公式由 KaTeX 排版并禁用受信任命令。它会省略原始 HTML，使相对链接及非 HTTP(S)/mailto 链接失效，以安全的外部链接属性打开 HTTP(S) 链接，并只渲染图片 alt 文本而不加载远程资源；`MessageText` 仍是用户创作内容使用的字面文本原语。`extractMarkdownPlainText` 会移除 Markdown 呈现标记以用于紧凑标签，同时将原始 HTML 保留为字面文本。元素间距、表格、链接与行内代码使用与 deepsuite `@deepseek/md` 相同的 `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` token。围栏代码块通过 `CodeBlock` 渲染（语言横幅、复制控件，以及对已注册语法使用 shiki）。
+`MarkdownText` 通过 React 元素渲染来自不受信任 assistant 输出的 GFM 与 `$…$` / `$$…$$` TeX 公式，公式由 KaTeX 排版并禁用受信任命令。它会省略原始 HTML，使相对链接及非 HTTP(S)/mailto 链接失效，以安全的外部链接属性打开 HTTP(S) 链接，并在不发送 referrer 的情况下渲染采用绝对 HTTP(S) URL 的图片；相对路径、绝对本地路径、`file:` URL 与不受支持的 scheme 会保留其 alt 文本。`MessageText` 仍是用户创作内容使用的字面文本原语。`extractMarkdownPlainText` 会移除 Markdown 呈现标记以用于紧凑标签，同时将原始 HTML 保留为字面文本。元素间距、响应式图片、表格、链接与行内代码使用与 deepsuite `@deepseek/md` 相同的 `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` token。围栏代码块通过 `CodeBlock` 渲染（语言横幅、复制控件，以及对已注册语法使用 shiki）。

 ## 终端输出

@@ -230,3 +230,14 @@
  color: var(--dsw-alias-label-tertiary);
  font-style: italic;
 }
+
+.image {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  margin: 0;
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-base);
+  object-fit: contain;
+}
@@ -37,6 +37,15 @@ export interface MarkdownCodeLabels {
  copiedLabel?: string | undefined
 }

+function remoteImageUrl(url: string): string | undefined {
+  try {
+    const protocol = new URL(url).protocol
+    return protocol === 'http:' || protocol === 'https:' ? url : undefined
+  } catch {
+    return undefined
+  }
+}
+
 /** Build the component table; while `streaming`, fences render the plain arm (see CodeBlock). */
 function buildComponents(streaming: boolean, codeLabels?: MarkdownCodeLabels): Components {
  return {
@@ -53,7 +62,20 @@ function buildComponents(streaming: boolean, codeLabels?: MarkdownCodeLabels): C
        </a>
      )
    },
-    img: ({ alt = '' }) => <span className={css.imageAlt}>{alt}</span>,
+    img: ({ alt = '', src = '' }) => {
+      const imageSrc = remoteImageUrl(src)
+      if (imageSrc === undefined) return <span className={css.imageAlt}>{alt}</span>
+      return (
+        <img
+          className={css.image}
+          src={imageSrc}
+          alt={alt}
+          loading="lazy"
+          decoding="async"
+          referrerPolicy="no-referrer"
+        />
+      )
+    },
    table: ({ children }) => (
      <div className={css.tableScroll}>
        <table>{children}</table>
@@ -98,7 +120,9 @@ const streamingComponents = buildComponents(true)
 * pass a reference-stable object (memoized per locale revision), because the
 * component table memoizes on its identity and a fresh literal per render
 * would rebuild it every streaming chunk.
- * @returns A GFM document with TeX math rendered through KaTeX and raw HTML, relative links, unsafe protocols, and remote images disabled.
+ * @returns A GFM document with TeX math rendered through KaTeX; raw HTML,
+ * relative links, and unsafe protocols are disabled, while absolute HTTP(S)
+ * images render directly.
 */
 export function MarkdownText({ text, streaming = false, codeLabels }: {
  text: string
@@ -99,13 +99,35 @@ describe('MarkdownText', () => {
    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy()
  })

-  it('neutralizes raw HTML, unsafe or relative links, and remote images', () => {
+  it('renders absolute HTTP(S) images with bounded presentation', () => {
+    const markdown = [
+      '![secure diagram](https://example.com/secure.png)',
+      '![plain diagram](http://example.com/plain.png)',
+    ].join('\n\n')
+    const { container } = render(<MarkdownText text={markdown} />)
+    const images = [...container.querySelectorAll('img')]
+    expect(images.map(image => image.getAttribute('src'))).toEqual([
+      'https://example.com/secure.png',
+      'http://example.com/plain.png',
+    ])
+    for (const image of images) {
+      expect(image.getAttribute('loading')).toBe('lazy')
+      expect(image.getAttribute('decoding')).toBe('async')
+      expect(image.getAttribute('referrerpolicy')).toBe('no-referrer')
+    }
+  })
+
+  it('neutralizes raw HTML, unsafe or relative links, and unsupported images', () => {
    const markdown = [
      '<script>globalThis.compromised = true</script>',
      '<img src="x" onerror="globalThis.compromised = true">',
      '[script](javascript:alert(1)) [relative](/settings)',
      '[mail](mailto:dev@example.com) [web](http://example.com) [upper](HTTPS://example.com)',
-      '![remote diagram](https://example.com/private.png)',
+      '![relative diagram](private.png)',
+      '![absolute diagram](/workspace/private.png)',
+      '![file diagram](file:///workspace/private.png)',
+      '![script diagram](javascript:alert(1))',
+      '![mail diagram](mailto:dev@example.com)',
    ].join('\n\n')
    const { container } = render(<MarkdownText text={markdown} />)

@@ -117,7 +139,11 @@ describe('MarkdownText', () => {
    expect(screen.getByRole('link', { name: 'mail' }).getAttribute('target')).toBeNull()
    expect(screen.getByRole('link', { name: 'web' }).getAttribute('rel')).toBe('noopener noreferrer')
    expect(screen.getByRole('link', { name: 'upper' }).getAttribute('target')).toBe('_blank')
-    expect(screen.getByText('remote diagram')).toBeTruthy()
+    expect(screen.getByText('relative diagram')).toBeTruthy()
+    expect(screen.getByText('absolute diagram')).toBeTruthy()
+    expect(screen.getByText('file diagram')).toBeTruthy()
+    expect(screen.getByText('script diagram')).toBeTruthy()
+    expect(screen.getByText('mail diagram')).toBeTruthy()
  })

  it('keeps incomplete streaming Markdown renderable', () => {
@@ -33,6 +33,7 @@
    "apps/web/tests/cordis-tool-round.e2e.ts",
    "apps/web/tests/web-search-round.e2e.ts",
    "apps/web/tests/message-actions.e2e.ts",
+    "apps/web/tests/markdown-images.e2e.ts",
    "apps/web/tests/queue-actions.e2e.ts",
    "apps/web/tests/skill-invocation-policy.e2e.ts",
    "apps/web/tests/permission-policy-context.e2e.ts",