Merge master into feature/workspace-picker-composer

2026-08-10 16:50:03 +08:00
parent eadb23ab1b a44009ec35
commit cce148f20d
265 changed files with 6107 additions and 939 deletions
--- a/packages/client/connection/package.json
+++ b/packages/client/connection/package.json
@@ -29,6 +29,7 @@
  },
  "license": "BSD-3-Clause",
  "dependencies": {
+    "@deepseek-ai/dsh-attachment": "workspace:^",
    "@deepseek-ai/dsh-host-apiproxy": "workspace:^",
    "@deepseek-ai/dsh-commands": "workspace:^",
    "@deepseek-ai/dsh-llm": "workspace:^",
--- a/packages/client/connection/src/client/api.ts
+++ b/packages/client/connection/src/client/api.ts
@@ -6,10 +6,10 @@
 // The ./api and ./client subpath exports are the browser-safe channels.

 export type {
-  ApiProxy, SessionsApi, SessionSearchItem, SessionSummary, HostApi, EventsApi, MuxFrame, HostFrame,
+  ApiProxy, SessionsApi, SessionSearchItem, SessionSummary, PromptContentPart, HostApi, EventsApi, MuxFrame, HostFrame,
  ApprovalResponsePayload, QuestionResponsePayload, HistoryEntry, ToolEventView,
  DirectoryEntry, DirectoryListing,
-  WorkspaceApi, WorkspaceId, WorkspaceView,
+  ResponseValue, WorkspaceApi, WorkspaceId, WorkspaceView,
  CommandsApi, CommandDescriptor, SkillsApi, SkillEntry,
  ModelCatalogFailure, ModelCatalogModel, ModelProviderGroup, ModelReasoning,
  ModelReasoningEffort, ModelSelection, QueueAction, QueuedInboxItem, SessionModels,
@@ -37,6 +37,9 @@ export type { SessionId, SessionEvent } from '@deepseek-ai/dsh-session/types'
 export type { MessageId } from '@deepseek-ai/dsh-llm/brand'
 export type { ContentBlock, StreamChunk } from '@deepseek-ai/dsh-llm/types'

+/** Successful value returned by the connection-generation host handshake. */
+export type HostDescription = import('@deepseek-ai/dsh-host-apiproxy/api').ResponseValue<'host.describe'>
+
 import type { RpcResponse, RpcResult } from '@deepseek-ai/dsh-host-apiproxy/api'

 /**
--- a/packages/client/connection/src/client/connection.ts
+++ b/packages/client/connection/src/client/connection.ts
@@ -131,11 +131,15 @@ export class ConnectionController {
        // subscribed baseline. The timeout guards against a carrier that never fires onOpen
        // (see ConnectionConfig.streamOpenTimeoutMs).
        const timeout = new AbortController()
-        await Promise.all([
+        const [description] = await Promise.all([
          this.api.host.describe({}),
          Promise.race([streamsOpen, sleep(this.config.streamOpenTimeoutMs, timeout.signal)]),
        ])
        timeout.abort()
+        const descriptionResult = description.result
+        if (!descriptionResult.ok) {
+          throw new Error(`host.describe failed: ${descriptionResult.error.code}: ${descriptionResult.error.message}`)
+        }
        if (ac.signal.aborted) throw new Error('generation aborted during readiness handshake')
        this.attempt = 0
        this.emitState('connected')
--- a/packages/client/connection/src/client/fixture.ts
+++ b/packages/client/connection/src/client/fixture.ts
@@ -1,7 +1,7 @@
 // FixtureApi: standalone UI development without a server. Real contract shape: unary takes
 // RpcRequest<P> and returns RpcResponse<T> (echoing the rpcId); streams yield RpcRequest<frame>
 // (the fixture IS the fake server, so it mints frame rpcIds); root respond takes ClientResponse
-// and returns RpcReceipt. fx-alpha carries a hand-built history script (60 turns, pageable);
+// and returns RpcReceipt. fx-alpha carries a hand-built history script (74 turns, pageable);
 // prompt triggers a chunked streaming replay; cancel stops the replay; resident pending
 // approval/question requests exercise replay and composer takeover with stable rpcIds.

@@ -19,6 +19,7 @@ import type {
  ToolResultMessage,
  UserMessage,
 } from '@deepseek-ai/dsh-llm'
+import type { AttachmentIdType, ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
 import type {
  SessionEvent,
  SessionId,
@@ -51,10 +52,10 @@ function userMessage(content: ContentBlock[], source: MessageSource = { kind: 'u
  return createUserMessage({ content, source })
 }

-function assistantMessage(content: ContentBlock[]): AssistantMessage {
+function assistantMessage(content: ContentBlock[], model = 'fx-1'): AssistantMessage {
  return createAssistantMessage({
    content,
-    source: { provider: 'fixture', model: 'fx-1' },
+    source: { provider: 'fixture', model },
  })
 }

@@ -330,6 +331,16 @@ function sid(id: string): SessionId {
  return id as SessionId
 }

+const FIXTURE_IMAGE_DATA = 'iVBORw0KGgoAAAANSUhEUgAAAKAAAABaCAYAAAA/xl1SAAAAvklEQVR42u3SMQ0AAAjAMIyhELM4AAe8PD1qYFlk9cCXEAEDYkAwIAYEA2JAMCAGBANiQDAgBgQDYkAwIAYEA2JAMCAGBANiQDAgBgQDYkAwIAYEA2JAMCAGxIBCYEAMCAbEgGBADAgGxIBgQAwIBsSAYEAMCAbEgGBADAgGxIBgQAwIBsSAYEAMCAbEgGBADAgGxIAYEAyIAcGAGBAMiAHBgBgQDIgBwYAYEAyIAcGAGBAMiAHBgBgQDIgB4bYWLb6pnOb1xAAAAABJRU5ErkJggg=='
+const FIXTURE_IMAGE_REF: ImageAttachmentRef = {
+  attachmentId: 'fixture:image' as AttachmentIdType,
+  mediaType: 'image/png',
+  bytes: 247,
+  width: 160,
+  height: 90,
+  name: 'fixture-image.png',
+}
+
 /** Deterministic provider billing attached to fixture assistant messages. */
 function fixtureUsage(turn: number, step: number): TokenUsage {
  return {
@@ -340,7 +351,7 @@ function fixtureUsage(turn: number, step: number): TokenUsage {
  }
 }

-/** fx-alpha history script: 60 turns (~130+ messages -> 3 pages at PAGE_MESSAGES=50),
+/** fx-alpha history script: 74 turns (~150+ messages -> 4 pages at PAGE_MESSAGES=50),
 *  mixing reasoning blocks / tool call+result / context. */
 function buildAlphaLog(): SessionEvent[] {
  const events: Record<string, unknown>[] = []
@@ -476,7 +487,7 @@ function buildAlphaLog(): SessionEvent[] {
    push({ type: 'step/end', data: { turn, step: 0 } })
    push({ type: 'turn/end', data: { turn, reason: { kind: 'completed' } } })
  }
-  // Turn 72: todo_write sample — the TodoRow toolview in the flow plus the
+  // Turn 73: todo_write sample — the TodoRow toolview in the flow plus the
  // todo/write snapshot event feeding the TodoPanel plan strip. Two items are
  // in_progress: this fixture chooses the parallel policy, so both surfaces
  // must render a parallel plan rather than the first active item alone.
@@ -535,8 +546,32 @@ function buildAlphaLog(): SessionEvent[] {
  toolTurn(70, 'web_search', '{"query":"deepseek harness architecture"}', 'Search results for deepseek harness architecture.')
  toolTurn(71, 'web_fetch', '{"url":"https://www.deepseek.com/blog/harness-architecture"}', '# Harness architecture\n\nEverything is a plugin.')

+  // Turn 72: user and assistant images share one durable fixture object.
+  // The todo turn remains last so its standing projection stays visible.
+  push({ type: 'turn/start', data: { turn: 72 } })
+  push({
+    type: 'user/message',
+    surfaceOp: 'append',
+    data: userMessage([{ type: 'image', attachment: FIXTURE_IMAGE_REF }, ...text('历史用户图片')]),
+  })
+  push({ type: 'step/start', data: { turn: 72, step: 0 } })
+  push({
+    type: 'assistant/message',
+    surfaceOp: 'append',
+    data: {
+      turn: 72,
+      step: 0,
+      message: assistantMessage(
+        [...text('结构化模型图片：'), { type: 'image', attachment: FIXTURE_IMAGE_REF }],
+        'fx-vision',
+      ),
+    },
+  })
+  push({ type: 'step/end', data: { turn: 72, step: 0 } })
+  push({ type: 'turn/end', data: { turn: 72, reason: { kind: 'completed' } } })
+
  const todoArgs = JSON.stringify({ todos: fixtureTodos })
-  toolTurn(72, 'todo_write', todoArgs, 'Updated todo list: 1 pending, 2 in progress, 1 completed.')
+  toolTurn(73, 'todo_write', todoArgs, 'Updated todo list: 1 pending, 2 in progress, 1 completed.')
  // The real tool appends the snapshot mid-execution — between tool/call and
  // tool/result — so the fixture reproduces that exact ordering (the last
  // toolTurn events run ... tool/call, tool/result, step/end, turn/end).
@@ -855,7 +890,6 @@ function estimateFixtureContent(blocks: readonly ContentBlock[]): number {
    // ContentBlockMap is merge-extensible: this client graph sees only the
    // base four members, but fixture turns do carry extended blocks at
    // runtime, so the structural JSON fallback below is live code.
-    // oxlint-disable-next-line typescript/no-unnecessary-condition -- the type collapses without the out-of-graph merges (see above).
    if (block.type === 'tool-result') {
      return tokens + estimateFixtureContent(block.content) + BLOCK_OVERHEAD
    }
@@ -1057,6 +1091,18 @@ function pageOf(
  return { events, hasMore: start > 0 }
 }

+/** Fixture mirror of host session-scoped attachment authorization. */
+function logReferencesAttachment(log: readonly SessionEvent[], attachmentId: string): boolean {
+  const visit = (value: unknown): boolean => {
+    if (Array.isArray(value)) return value.some(visit)
+    if (typeof value !== 'object' || value === null) return false
+    const record = value as Record<string, unknown>
+    if (record.attachmentId === attachmentId) return true
+    return Object.values(record).some(visit)
+  }
+  return log.some(event => visit(event.data))
+}
+
 /** Fixture mirror of first-party message extraction used by session-query. */
 function searchBlockText(block: ContentBlock): string[] {
  switch (block.type) {
@@ -1351,6 +1397,10 @@ function createFixtureWorld(options: FixtureOptions): FixtureWorld {
    session.sessionId,
    { provider: 'deepseek-official', model: 'deepseek-v4-flash' },
  ]))
+  const attachments = new Map<string, { attachment: ImageAttachmentRef; data: string }>([[
+    String(FIXTURE_IMAGE_REF.attachmentId),
+    { attachment: FIXTURE_IMAGE_REF, data: FIXTURE_IMAGE_DATA },
+  ]])
  /** Credential store double: set/unset flip the describe badge, values never read back. */
  const fixtureCredentials = new Map<string, true>([
    // The assembled fixture represents an already-configured shipped
@@ -1368,7 +1418,7 @@ function createFixtureWorld(options: FixtureOptions): FixtureWorld {
    ['my-agent', { trust: 'user', content: "- id: tool-read\n  name: '@deepseek-ai/dsh-tool-read'\n" }],
  ])
  let fixtureDefaultPreset = 'standard'
-  const nextTurn = new Map<SessionId, number>([[sid('fx-alpha'), 60]])
+  const nextTurn = new Map<SessionId, number>([[sid('fx-alpha'), 74]])
  let nextSession = 1
  let nextRpc = 1
  let attachedSessions = options.empty ? 0 : 1
@@ -2145,9 +2195,26 @@ function createFixtureWorld(options: FixtureOptions): FixtureWorld {
        // First accepted prompt appends events: the summary stops being blank.
        summary.blank = false
        const userText = content.map(b => (b.type === 'text' ? b.text : '')).join('')
+        const durable: ContentBlock[] = content.map((block) => {
+          if (block.type === 'text') return block
+          const attachment: ImageAttachmentRef = {
+            attachmentId: `fixture:${randomUuid()}` as AttachmentIdType,
+            mediaType: block.mediaType,
+            bytes: Math.max(
+              1,
+              Math.floor(block.data.length * 3 / 4)
+              - (block.data.endsWith('==') ? 2 : block.data.endsWith('=') ? 1 : 0),
+            ),
+            width: 160,
+            height: 90,
+            ...block.name === undefined ? {} : { name: block.name },
+          }
+          attachments.set(String(attachment.attachmentId), { attachment, data: block.data })
+          return { type: 'image', attachment }
+        })
        if (mode === 'steer' && replays.has(id)) {
          // Steering: the durable user/message lands inside the current turn; the replay continues.
-          append(id, { type: 'user/message', surfaceOp: 'append', data: userMessage(content) })
+          append(id, { type: 'user/message', surfaceOp: 'append', data: userMessage(durable) })
          return ok(request, { accepted: true as const })
        }
        const turn = nextTurn.get(id) ?? 0
@@ -2160,7 +2227,7 @@ function createFixtureWorld(options: FixtureOptions): FixtureWorld {
        if (plan.wanted !== null && plan.wanted !== plan.active) {
          append(id, { type: 'plan/mode', data: { active: plan.wanted } })
        }
-        append(id, { type: 'user/message', surfaceOp: 'append', data: userMessage(content) })
+        append(id, { type: 'user/message', surfaceOp: 'append', data: userMessage(durable) })
        // Capacity parallel of the host token-meter's request/context record:
        // log-only, appended inside the open turn, and deduplicated against the
        // route already recorded (the fixture never varies contextWindow).
@@ -2186,6 +2253,27 @@ function createFixtureWorld(options: FixtureOptions): FixtureWorld {
        )
        return ok(request, { accepted: true as const })
      },
+      attachment: (request) => {
+        const stored = attachments.get(String(request.payload.attachmentId))
+        if (stored === undefined) {
+          return err(request, {
+            code: 'attachment-error',
+            message: 'fixture attachment missing',
+            details: { reason: 'ATTACHMENT_NOT_FOUND' },
+          })
+        }
+        if (!logReferencesAttachment(
+          logs.get(request.payload.sessionId) ?? [],
+          String(request.payload.attachmentId),
+        )) {
+          return err(request, {
+            code: 'attachment-error',
+            message: 'fixture attachment is not referenced by this session',
+            details: { reason: 'ATTACHMENT_NOT_REFERENCED' },
+          })
+        }
+        return ok(request, stored)
+      },
      updateQueue: request => err(request, {
        code: 'queue-item-not-found',
        message: 'fixture has no pending queue item',
@@ -2262,15 +2350,14 @@ function createFixtureWorld(options: FixtureOptions): FixtureWorld {
        archivedSessionIds: [...archivedSessionIds],
      }),
      create: (request) => {
-        const { path, name } = request.payload
-        const target = path ?? `/tmp/fixture-workspaces/${name ?? ''}`
-        const existing = workspaces.find(w => w.path === target)
+        const { path } = request.payload
+        const existing = workspaces.find(w => w.path === path)
        if (existing !== undefined) return ok(request, { workspace: { ...existing }, created: false })
        const now = new Date().toISOString()
        const created: WorkspaceView = {
          workspaceId: wid(`fx-ws-${nextWorkspace++}`),
-          path: target,
-          title: name ?? target.split('/').filter(Boolean).at(-1) ?? target,
+          path,
+          title: path.split('/').filter(Boolean).at(-1) ?? path,
          sessionIds: [],
          createdAt: now,
          updatedAt: now,
@@ -2837,6 +2924,7 @@ export class FixtureApiClient extends AbstractApiClient {
      case 'session.rename': return this.api.sessions.rename(request)
      case 'session.fork': return this.api.sessions.fork(request)
      case 'session.prompt': return this.api.sessions.prompt(request)
+      case 'session.attachment': return this.api.sessions.attachment(request)
      case 'session.updateQueue': return this.api.sessions.updateQueue(request)
      case 'session.cancel': return this.api.sessions.cancel(request)
      case 'subagent.list': return this.api.subagents.list(request)
--- a/packages/client/connection/src/client/index.ts
+++ b/packages/client/connection/src/client/index.ts
@@ -14,7 +14,7 @@ import type { ClientConnectionRpc } from '../rpc.ts'

 // ---- Contract re-exports (browser-safe apiproxy channels + core types) ----
 export type {
-  ApiProxy, SessionsApi, SessionSearchItem, SessionSummary, HostApi, EventsApi, MuxFrame, HostFrame,
+  ApiProxy, SessionsApi, SessionSearchItem, SessionSummary, PromptContentPart, HostApi, EventsApi, MuxFrame, HostFrame,
  ApprovalResponsePayload, QuestionResponsePayload, HistoryEntry, ToolEventView,
  DirectoryEntry, DirectoryListing,
  ToolCallView, ToolResultView, WorkspaceApi, WorkspaceId, WorkspaceView,
@@ -24,7 +24,7 @@ export type {
  SubagentsApi, SubagentAddress, SubagentCatalog, SubagentListEntry, SubagentPromptReceipt,
  RpcRequest, RpcResponse, RpcResult, RpcError, RpcErrorCode,
  ClientRequest, ServerResponse, ServerRequest, ClientResponse, RpcMessage, RpcReceipt,
-  IApiClient, SessionId, SessionEvent, ContentBlock, StreamChunk,
+  HostDescription, IApiClient, SessionId, SessionEvent, ContentBlock, StreamChunk,
  GoalsApi, GoalRef,
  SettingsApi, SettingsNamespaceView, SettingsPathOpView, SettingsSecretView,
  CredentialsApi, CredentialView, ConfigurableProviderView, DiscoveredModelView, LlmApi,
--- a/packages/client/connection/src/http-bridge.ts
+++ b/packages/client/connection/src/http-bridge.ts
@@ -21,8 +21,14 @@ export interface FetchHandler {
 * @param req - incoming node:http request (fully read before dispatch).
 * @param res - node:http response the bridge writes and owns to completion.
 * @param apiHandler - fetch-shaped API carrier the request is dispatched to.
+ * @param maxRequestBodyBytes - maximum body bytes buffered before dispatch.
 */
-export async function bridge(req: IncomingMessage, res: ServerResponse, apiHandler: FetchHandler): Promise<void> {
+export async function bridge(
+  req: IncomingMessage,
+  res: ServerResponse,
+  apiHandler: FetchHandler,
+  maxRequestBodyBytes = 32 * 1024 * 1024,
+): Promise<void> {
  const abort = new AbortController()
  // Client-disconnect detection MUST hang off the response, not the request:
  // since Node 16, IncomingMessage 'close' fires as soon as the request body is
@@ -32,8 +38,26 @@ export async function bridge(req: IncomingMessage, res: ServerResponse, apiHandl
  res.on('close', () => {
    if (!res.writableEnded) abort.abort()
  })
+  const declaredLength = req.headers['content-length']
+  if (declaredLength !== undefined && Number(declaredLength) > maxRequestBodyBytes) {
+    res.writeHead(413, { connection: 'close' })
+    res.end()
+    req.destroy()
+    return
+  }
  const chunks: Buffer[] = []
-  for await (const chunk of req) chunks.push(chunk as Buffer)
+  let received = 0
+  for await (const chunk of req) {
+    const buffer = chunk as Buffer
+    received += buffer.byteLength
+    if (received > maxRequestBodyBytes) {
+      res.writeHead(413, { connection: 'close' })
+      res.end()
+      req.destroy()
+      return
+    }
+    chunks.push(buffer)
+  }
  /* v8 ignore next 3 -- `??` arms: node:http always sets url/method on server
  requests; the fields are only optional on the client-side IncomingMessage type */
  const request = new Request(new URL(req.url ?? '/', 'http://dsh.internal'), {
--- a/packages/client/connection/src/index.ts
+++ b/packages/client/connection/src/index.ts
@@ -1,6 +1,7 @@
 /** Host HTTP bridge for browser-client RPC. */
 import type { Context } from 'cordis'
 import z from 'schemastery'
+import type {} from '@deepseek-ai/dsh-attachment'
 // Activates the httpServer Context merge used below.
 import type { WebRoute, WebUpgradeRoute } from '@deepseek-ai/dsh-host-webserver'
 import { toFetchHandler } from '@deepseek-ai/dsh-host-apiproxy'
@@ -25,6 +26,25 @@ export { API_PATH, HOST_EVENTS_PATH, MUX_EVENTS_PATH } from './api-path.ts'
 /** Stable Cordis plugin name. */
 export const name = 'client-connection'

+/** Headroom for RPC JSON fields around aggregate base64 image payloads. */
+const REQUEST_ENVELOPE_HEADROOM_BYTES = 1024 * 1024
+
+function assertImageBodyCapacity(ctx: Context, maxRequestBodyBytes: number): void {
+  const attachments = ctx.get('attachments')
+  if (attachments === undefined) return
+  const requiredImageBodyBytes = Math.ceil(
+    attachments.imageLimits.maxMessageImageBytes * 4 / 3,
+  ) + REQUEST_ENVELOPE_HEADROOM_BYTES
+  if (maxRequestBodyBytes < requiredImageBodyBytes) {
+    throw new Error(
+      `client-connection maxRequestBodyBytes (${String(maxRequestBodyBytes)}) must be at least `
+      + `${String(requiredImageBodyBytes)} for the configured aggregate image limit`,
+    )
+  }
+}
+/** Default carrier cap for all HTTP RPC bodies. */
+const DEFAULT_MAX_REQUEST_BODY_BYTES = 32 * 1024 * 1024
+
 /** Services required before providing Connection; API Proxy is an optional `/api` fallback. */
 export const inject = ['httpServer']

@@ -39,10 +59,13 @@ export interface ConnectionConfig {
   * that is not a bare, canonical authority fails the plugin load.
   */
  trustedHosts?: string[]
+  /** Maximum buffered JSON body for every `/api` request. */
+  maxRequestBodyBytes?: number
 }

 export const Config: z<ConnectionConfig> = z.object({
  trustedHosts: z.array(String).default([]),
+  maxRequestBodyBytes: z.natural().min(1).default(DEFAULT_MAX_REQUEST_BODY_BYTES),
 })

 /**
@@ -109,9 +132,11 @@ const PRIVILEGED_METHODS = new Set([
 export function apply(ctx: Context, config?: ConnectionConfig): void {
  // The Loader resolves schema defaults; hand-built test contexts may pass none.
  const trustedHosts = config?.trustedHosts ?? []
+  const maxRequestBodyBytes = config?.maxRequestBodyBytes ?? DEFAULT_MAX_REQUEST_BODY_BYTES
  // Config boundary: a malformed entry fails the load loudly here rather than
  // silently authorizing its hostname prefix at request time.
  for (const entry of trustedHosts) assertTrustedAuthority(entry)
+  if (ctx.get('apiProxy') !== undefined) assertImageBodyCapacity(ctx, maxRequestBodyBytes)
  const connection = new HostConnectionService(ctx, trustedHosts)
  const fetchHandler = connection.createSharedFetchHandler(API_PATH, {
    async fetch(request) {
@@ -144,11 +169,12 @@ export function apply(ctx: Context, config?: ConnectionConfig): void {
        res.end('forbidden')
        return
      }
-      await bridge(req, res, fetchHandler)
+      await bridge(req, res, fetchHandler, maxRequestBodyBytes)
    },
  }
  ctx.effect(() => ctx.httpServer.register(route), 'client-connection: /api route')
  ctx.inject(['apiProxy'], (apiCtx) => {
+    assertImageBodyCapacity(apiCtx, maxRequestBodyBytes)
    const downlinks = new WebSocketDownlinks(apiCtx.apiProxy)
    const registerDownlink = (
      path: string,
--- a/packages/client/connection/tests/connection.spec.ts
+++ b/packages/client/connection/tests/connection.spec.ts
@@ -83,6 +83,35 @@ describe('connection lifecycle', () => {
    }
  })

+  it('treats a host.describe business error as generation failure', async () => {
+    const api = new FakeApiClient()
+    let describeCalls = 0
+    api.onDescribe = () => {
+      describeCalls += 1
+      if (describeCalls === 1) {
+        return Promise.resolve({
+          rpcId: 'bad-describe' as never,
+          result: {
+            ok: false as const,
+            error: { code: 'internal' as const, message: 'not ready', details: {} },
+          },
+        })
+      }
+      return Promise.resolve(ok({ version: '0', cwd: '/f', attachedSessions: 0 }))
+    }
+    let connected = 0
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+    const controller = new ConnectionController(api, { onConnected: () => { connected++ } }, FAST)
+    controller.start()
+    try {
+      await vi.waitFor(() => { expect(describeCalls).toBe(2) })
+      await vi.waitFor(() => { expect(connected).toBe(1) })
+    } finally {
+      controller.stop()
+      warnSpy.mockRestore()
+    }
+  })
+
  it('converges stream/error frames into reconnect instead of dispatching them', async () => {
    const api = new FakeApiClient()
    const muxSeen: string[] = []
--- a/packages/client/connection/tests/fake-api.ts
+++ b/packages/client/connection/tests/fake-api.ts
@@ -67,6 +67,8 @@ export class FakeApiClient implements IApiClient {
  => Promise<RpcResponse<{ selected: ModelSelection }>> =
    payload => Promise.resolve(ok({ selected: { provider: payload.provider, model: payload.model } }))
  onPrompt: (payload: unknown) => Promise<RpcResponse<{ accepted: true }>> = () => Promise.resolve(ok({ accepted: true as const }))
+  onAttachment: (payload: unknown) => Promise<RpcResponse<{ attachment: { attachmentId: never; mediaType: 'image/png'; bytes: number; width: number; height: number }; data: string }>> =
+    () => Promise.resolve(ok({ attachment: { attachmentId: 'a' as never, mediaType: 'image/png', bytes: 1, width: 1, height: 1 }, data: 'AA==' }))
  onUpdateQueue: (payload: unknown) => Promise<RpcResponse<{ accepted: true }>> = () => Promise.resolve(ok({ accepted: true as const }))
  onCancel: (payload: unknown) => Promise<RpcResponse<{ accepted: true }>> = () => Promise.resolve(ok({ accepted: true as const }))
  onDescribe: (payload: unknown) => Promise<RpcResponse<{ version: string; cwd: string; attachedSessions: number }>> =
@@ -110,6 +112,7 @@ export class FakeApiClient implements IApiClient {
    rename: (payload: unknown) => this.record('session.rename', payload, this.onRename(payload)),
    fork: (payload: unknown) => this.record('session.fork', payload, this.onFork(payload)),
    prompt: (payload: unknown) => this.record('session.prompt', payload, this.onPrompt(payload)),
+    attachment: (payload: unknown) => this.record('session.attachment', payload, this.onAttachment(payload)),
    updateQueue: (payload: unknown) => this.record('session.updateQueue', payload, this.onUpdateQueue(payload)),
    cancel: (payload: unknown) => this.record('session.cancel', payload, this.onCancel(payload)),
  }
--- a/packages/client/connection/tests/fixture.spec.ts
+++ b/packages/client/connection/tests/fixture.spec.ts
@@ -535,7 +535,7 @@ describe('createFixtureApi', () => {
    expect(reused.result.value).toMatchObject({ created: false, workspace: { workspaceId: 'fx-ws-fixture' } })
  })

-  it('workspace.create by name mints a new entity and pushes host/workspace-changed', async () => {
+  it('workspace.create on a fresh path mints a new entity and pushes host/workspace-changed', async () => {
    const api = createFixtureApi()
    const abort = new AbortController()
    const seen: HostFrame[] = []
@@ -546,7 +546,7 @@ describe('createFixtureApi', () => {
      }
    })()
    await new Promise(resolve => setTimeout(resolve, 10))
-    const created = await api.workspace.create(req({ name: 'nova' }))
+    const created = await api.workspace.create(req({ path: '/tmp/fixture-workspaces/nova' }))
    if (!created.result.ok) throw new Error('create failed')
    expect(created.result.value.created).toBe(true)
    expect(created.result.value.workspace).toMatchObject({
@@ -554,16 +554,7 @@ describe('createFixtureApi', () => {
    })
    await consuming
    expect(seen).toEqual([{ type: 'host/workspace-changed', workspace: created.result.value.workspace }])
-    // path spelling falls back to the basename when no title/name rides along.
-    const pathOnly = await api.workspace.create(req({ path: '/tmp/fixture-elsewhere/base' }))
-    if (!pathOnly.result.ok) throw new Error('pathOnly failed')
-    expect(pathOnly.result.value.workspace.title).toBe('base')
-    // Degenerate spellings reach the impl unfiltered (the fixture carrier has
-    // no schema gate): both-absent falls back to the bucket dir, and a
-    // basename-less path serves as its own title.
-    const bare = await api.workspace.create(req({}))
-    if (!bare.result.ok) throw new Error('bare failed')
-    expect(bare.result.value.workspace).toMatchObject({ path: '/tmp/fixture-workspaces/', title: 'fixture-workspaces' })
+    // A basename-less path serves as its own title.
    const rootPath = await api.workspace.create(req({ path: '/' }))
    if (!rootPath.result.ok) throw new Error('rootPath failed')
    expect(rootPath.result.value.workspace.title).toBe('/')
@@ -584,7 +575,7 @@ describe('createFixtureApi', () => {
    const missing = await api.workspace.rename(req({ workspaceId: 'fx-ws-void' as WorkspaceId, title: 'x' }))
    expect(missing.result).toMatchObject({ ok: false, error: { code: 'workspace-not-found', details: { workspaceId: 'fx-ws-void' } } })

-    await api.workspace.create(req({ name: 'occupied' }))
+    await api.workspace.create(req({ path: '/tmp/fixture-workspaces/occupied' }))
    const conflict = await api.workspace.rename(req({ workspaceId: wsid, title: ' occupied ' }))
    expect(conflict.result).toMatchObject({ ok: false, error: { code: 'workspace-name-conflict', details: { name: 'occupied' } } })

@@ -722,7 +713,7 @@ describe('createFixtureApi', () => {
    expect(initialSessions.result).toMatchObject({ ok: true, value: { items: [] } })
    expect(initialWorkspaces.result).toMatchObject({ ok: true, value: { items: [] } })

-    const made = await api.workspace.create(req({ name: 'nova' }))
+    const made = await api.workspace.create(req({ path: '/tmp/fixture-workspaces/nova' }))
    if (!made.result.ok) throw new Error('workspace create failed')
    const abort = new AbortController()
    const framesPromise = collect(api.events.host(req({}), abort.signal), abort, frames => frames.length === 2)
@@ -991,7 +982,7 @@ describe('FixtureApiClient (protocol-level fake carrier)', () => {
    expect((await client.sessions.cancel({ sessionId: id })).result.ok).toBe(true)
    expect((await client.host.describe({})).result.ok).toBe(true)
    expect((await client.workspace.list({})).result.ok).toBe(true)
-    const workspace = await client.workspace.create({ name: 'via-client' })
+    const workspace = await client.workspace.create({ path: '/tmp/fixture-workspaces/via-client' })
    if (!workspace.result.ok) throw new Error('workspace create failed')
    expect(workspace.result.value.workspace.title).toBe('via-client')
    const wsid = workspace.result.value.workspace.workspaceId
@@ -1049,7 +1040,7 @@ describe('FixtureApiClient (protocol-level fake carrier)', () => {
    })
    const client = new FixtureApiClient()
    await expect(client.sessions.list({})).resolves.toMatchObject({ result: { ok: true, value: { items: [] } } })
-    const made = await client.workspace.create({ name: 'query-workspace' })
+    const made = await client.workspace.create({ path: '/tmp/fixture-workspaces/query-workspace' })
    if (!made.result.ok) throw new Error('workspace create failed')
    const abort = new AbortController()
    const framesPromise = collect(client.events.host({}, abort.signal), abort, frames => frames.length === 2)
--- a/packages/client/connection/tests/http-bridge.spec.ts
+++ b/packages/client/connection/tests/http-bridge.spec.ts
@@ -5,6 +5,34 @@ import { describe, expect, it } from 'vitest'
 import { bridge } from '../src/http-bridge.ts'

 describe('HTTP bridge abort', () => {
+  it('destroys a declared-oversize request instead of draining it', async () => {
+    const destroyed: true[] = []
+    const request = Readable.from([]) as unknown as IncomingMessage
+    Object.assign(request, {
+      url: '/api/session.prompt',
+      method: 'POST',
+      headers: { 'content-type': 'application/json', 'content-length': '999999' },
+      destroy: () => { destroyed.push(true) },
+    })
+    let status: number | undefined
+    let headers: unknown
+    const response = Object.assign(new EventEmitter(), {
+      writableEnded: false,
+      writeHead(code: number, values?: unknown) { status = code; headers = values; return this },
+      write() { return true },
+      end(this: { writableEnded: boolean }) { this.writableEnded = true; return this },
+    }) as unknown as ServerResponse
+
+    await bridge(request, response, {
+      fetch: () => { throw new Error('a rejected request must never reach the handler') },
+    }, 1000)
+    // The socket must not stay parked draining a body the client can trickle
+    // at will after the rejection — same discipline as the chunked overrun.
+    expect(status).toBe(413)
+    expect(headers).toMatchObject({ connection: 'close' })
+    expect(destroyed).toHaveLength(1)
+  })
+
  it('aborts a pending native picker request when the browser disconnects', async () => {
    const body = JSON.stringify({
      type: 'client-request', rpcId: 'picker-1', method: 'host.pickDirectory', payload: {},
@@ -38,7 +66,7 @@ describe('HTTP bridge abort', () => {
        }
        return Response.json({ aborted: fetchRequest.signal.aborted })
      },
-    })
+    }, Number.MAX_SAFE_INTEGER)
    await started
    response.emit('close')
    await pending
--- a/packages/client/connection/tests/node-half.spec.ts
+++ b/packages/client/connection/tests/node-half.spec.ts
@@ -7,6 +7,7 @@ import { describe, expect, it } from 'vitest'
 import type { AddressInfo } from 'node:net'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import type { ApiProxy } from '@deepseek-ai/dsh-host-apiproxy/api'
+import type { AttachmentStore } from '@deepseek-ai/dsh-attachment'
 import { RpcId, type ClientRequest } from '@deepseek-ai/dsh-host-apiproxy/api'
 import type { HttpServerService, WebRoute, WebUpgradeRoute } from '@deepseek-ai/dsh-host-webserver'
 import { API_PATH, apply, HOST_EVENTS_PATH, inject, MUX_EVENTS_PATH, type HostConnectionHandle } from '../src/index.ts'
@@ -89,6 +90,19 @@ async function mounted(config?: { trustedHosts?: string[] }): Promise<{
 }

 describe('connection node half', () => {
+  it('fails loud when the carrier cap cannot hold the configured image batch', () => {
+    const ctx = new Context()
+    const routes: WebRoute[] = []
+    ctx.provide('httpServer', fakeHttpServer(routes, []) as HttpServerService)
+    ctx.provide('attachments', {
+      imageLimits: { maxMessageImageBytes: 20 * 1024 * 1024 },
+    } as AttachmentStore)
+    ctx.provide('apiProxy', {} as ApiProxy)
+    expect(() => { apply(ctx, { maxRequestBodyBytes: 1024 }) })
+      .toThrow(/must be at least .* aggregate image limit/)
+    expect(routes).toHaveLength(0)
+  })
+
  it('fails the load on a trustedHosts entry that is not a bare authority', async () => {
    const routes: WebRoute[] = []
    const upgrades: WebUpgradeRoute[] = []
--- a/packages/client/connection/tsconfig.json
+++ b/packages/client/connection/tsconfig.json
@@ -9,6 +9,9 @@
    "src"
  ],
  "references": [
+    {
+      "path": "../../attachment/attachment"
+    },
    {
      "path": "../../llm/llm"
    },
--- a/packages/client/runtime/package.json
+++ b/packages/client/runtime/package.json
@@ -33,6 +33,7 @@
  "license": "BSD-3-Clause",
  "dependencies": {
    "@deepseek-ai/dsh-agent": "workspace:^",
+    "@deepseek-ai/dsh-attachment": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-commands": "workspace:^",
    "@deepseek-ai/dsh-compact": "workspace:^",
--- a/packages/client/runtime/src/client/contract/session.ts
+++ b/packages/client/runtime/src/client/contract/session.ts
@@ -7,9 +7,9 @@
 * must stub); runtime-internal entry points (history staging, wire-frame
 * dispatch) stay on the class, invisible out here.
 */
-import type { ContentBlock } from '@deepseek-ai/dsh-llm/types'
+import type { AttachmentIdType, ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
 import type {
-  MessageId, QueueAction, RpcResult, SessionId,
+  MessageId, PromptContentPart, QueueAction, RpcResult, SessionId,
 } from '@deepseek-ai/dsh-client-connection/client'
 import type { ConversationSnapshot } from '../sessions/conversation.ts'
 import type { ObservableSnapshot } from './store.ts'
@@ -33,11 +33,19 @@ export interface ISession {
  readonly projections: ProjectionsFace
  /**
   * Send a prompt into the session.
-   * @param content - model-facing content blocks.
+   * @param content - text plus browser-owned temporary image uploads.
   * @param mode - 'queue' appends a turn; 'steer' interrupts the running one.
   * @returns acceptance, or the business error (also mirrored into snapshot.promptError).
   */
-  prompt(content: ContentBlock[], mode: 'queue' | 'steer'): Promise<RpcResult<{ accepted: true }>>
+  prompt(content: PromptContentPart[], mode: 'queue' | 'steer'): Promise<RpcResult<{ accepted: true }>>
+  /**
+   * Resolve one durable image referenced by this session.
+   * @param attachmentId - opaque id found in the folded session log.
+   * @returns the authenticated reference and decoded bytes.
+   */
+  readAttachment(
+    attachmentId: AttachmentIdType,
+  ): Promise<RpcResult<{ attachment: ImageAttachmentRef; data: Uint8Array }>>
  /**
   * Apply one edit, remove, or strict steer action to a still-pending queue occurrence.
   * @param itemId - agent-owned inbox occurrence identity.
--- a/packages/client/runtime/src/client/contract/workspaces.ts
+++ b/packages/client/runtime/src/client/contract/workspaces.ts
@@ -27,11 +27,11 @@ export interface IWorkspaces {
   */
  startSession(workspaceId?: WorkspaceId): void
  /**
-   * Create a Workspace by name or register an existing path.
-   * @param input - exactly one Host create spelling.
+   * Register an existing path as a Workspace.
+   * @param input - the Host create payload.
   * @returns the created or idempotently resolved Workspace.
   */
-  create(input: { name: string } | { path: string }): Promise<WorkspaceView>
+  create(input: { path: string }): Promise<WorkspaceView>
  /**
   * Open the Host's native directory picker.
   * @returns the selected path, or null when the user cancelled.
--- a/packages/client/runtime/src/client/sessions/conversation.ts
+++ b/packages/client/runtime/src/client/sessions/conversation.ts
@@ -8,6 +8,7 @@
 import type { CommandId } from '@deepseek-ai/dsh-commands/brand'
 import type { MessageId } from '@deepseek-ai/dsh-llm/brand'
 import type { ContentBlock } from '@deepseek-ai/dsh-llm/types'
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
 import type { LlmRetryEventData } from '@deepseek-ai/dsh-llm-retry/types'
 import type { TodoItem } from '@deepseek-ai/dsh-session/types'
 import type {
@@ -43,6 +44,7 @@ export interface AssistantProvenanceView {
 export type AssistantBlock =
  | { kind: 'text'; text: string }
  | { kind: 'reasoning'; text: string }
+  | { kind: 'image'; attachment: ImageAttachmentRef }
  | { kind: 'tool-call'; callId: string; name: string; argsRaw: string }
  | { kind: 'other'; block: unknown }

@@ -64,6 +66,7 @@ export function toAssistantBlock(block: ContentBlock): AssistantBlock {
  switch (block.type) {
    case 'text': return { kind: 'text', text: block.text }
    case 'reasoning': return { kind: 'reasoning', text: block.text }
+    case 'image': return { kind: 'image', attachment: block.attachment }
    case 'tool-call': return { kind: 'tool-call', callId: String(block.id), name: block.name, argsRaw: block.arguments }
    default: return { kind: 'other', block }
  }
--- a/packages/client/runtime/src/client/sessions/session.ts
+++ b/packages/client/runtime/src/client/sessions/session.ts
@@ -1,10 +1,10 @@
 // Sessions remain resident after creation so they continue consuming mux frames off-screen.

 import type { Context } from 'cordis'
-import type { ContentBlock } from '@deepseek-ai/dsh-llm/types'
+import type { AttachmentIdType, ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
 import type { SessionEvent } from '@deepseek-ai/dsh-session/types'
 import type {
-  HistoryEntry, IApiClient, MessageId, MuxFrame, QueueAction, RpcError,
+  HistoryEntry, IApiClient, MessageId, MuxFrame, PromptContentPart, QueueAction, RpcError,
  RpcId, RpcResponse, RpcResult, SessionId, SubagentAddress, ToolEventView,
 } from '@deepseek-ai/dsh-client-connection/client'
 // Value import from the inline-safe wire layer (not the connection plugin):
@@ -178,11 +178,11 @@ export class Session implements SessionFace {

  /**
   * Send (queue/steer passed through 1:1); failures land in the snapshot's promptError.
-   * @param content - core content blocks verbatim.
+   * @param content - text plus browser-owned temporary image uploads.
   * @param mode - queue appends after the current turn; steer interrupts it.
   * @returns the prompt result (also mirrored into promptError on failure).
   */
-  async prompt(content: ContentBlock[], mode: 'queue' | 'steer'): Promise<RpcResult<{ accepted: true }>> {
+  async prompt(content: PromptContentPart[], mode: 'queue' | 'steer'): Promise<RpcResult<{ accepted: true }>> {
    this.promptError = null
    this.lastAgentError = null
    // Synchronous, before the first await: the blank → engaging edge must be
@@ -205,8 +205,24 @@ export class Session implements SessionFace {
          },
        }
      } else {
-        const routed = (await this.api.subagents.prompt({ ...this.address, content })).result
-        result = routed.ok ? { ok: true, value: { accepted: true } } : routed
+        if (content.some(part => part.type === 'image')) {
+          result = {
+            ok: false,
+            error: {
+              code: 'attachment-error',
+              message: 'Image input is unavailable for subagent continuations.',
+              details: { reason: 'SUBAGENT_IMAGE_UNSUPPORTED' },
+            },
+          }
+        } else {
+          const routed = (await this.api.subagents.prompt({
+            ...this.address,
+            content: content.flatMap(part => part.type === 'text'
+              ? [{ type: 'text' as const, text: part.text }]
+              : []),
+          })).result
+          result = routed.ok ? { ok: true, value: { accepted: true } } : routed
+        }
      }
    } catch (error) {
      result = transportError(error)
@@ -232,6 +248,28 @@ export class Session implements SessionFace {
    return result
  }

+  /**
+   * Resolve one image referenced by this session into browser-consumable bytes.
+   * @param attachmentId - opaque id found in the folded session log.
+   * @returns the authenticated reference and decoded bytes.
+   */
+  async readAttachment(
+    attachmentId: AttachmentIdType,
+  ): Promise<RpcResult<{ attachment: ImageAttachmentRef; data: Uint8Array }>> {
+    try {
+      const result = (await this.api.sessions.attachment({
+        sessionId: this.sessionId,
+        attachmentId,
+      })).result
+      if (!result.ok) return result
+      const binary = atob(result.value.data)
+      const data = Uint8Array.from(binary, char => char.charCodeAt(0))
+      return { ok: true, value: { attachment: result.value.attachment, data } }
+    } catch (error) {
+      return transportError(error)
+    }
+  }
+
  /** Apply one operation to a still-pending queue occurrence. */
  async updateQueue(itemId: MessageId, action: QueueAction): Promise<RpcResult<{ accepted: true }>> {
    try {
--- a/packages/client/runtime/src/client/workspaces/manager.ts
+++ b/packages/client/runtime/src/client/workspaces/manager.ts
@@ -120,7 +120,7 @@ export class WorkspaceManager {
  /**
   * Create or resolve a real Workspace, then publish its returned snapshot
   * without waiting for the changed frame.
-   * @param input - name under workspaceRoot or an existing absolute path.
+   * @param input - the existing absolute path to adopt.
   * @returns the wire result.
   */
  async create(input: WorkspaceCreateInput): Promise<RpcResult<{ workspace: WorkspaceView; created: boolean }>> {
--- a/packages/client/runtime/src/client/workspaces/service.ts
+++ b/packages/client/runtime/src/client/workspaces/service.ts
@@ -186,11 +186,11 @@ export class WorkspacesService implements IWorkspaces {
  }

  /**
-   * Create a Workspace by name or register an existing path.
-   * @param input - exactly one Host create spelling.
+   * Register an existing path as a Workspace.
+   * @param input - the Host create payload.
   * @returns the created or idempotently resolved Workspace.
   */
-  async create(input: { name: string } | { path: string }): Promise<WorkspaceView> {
+  async create(input: { path: string }): Promise<WorkspaceView> {
    const result = await this.manager.create(input)
    if (!result.ok) throw new WorkspaceCreateError(result.error)
    return result.value.workspace
--- a/packages/client/runtime/src/client/workspaces/workspace.ts
+++ b/packages/client/runtime/src/client/workspaces/workspace.ts
@@ -8,7 +8,7 @@ import type { ObservableSnapshot } from '../contract/store.ts'
 import { Notifier } from '../sessions/notifier.ts'

 /** Host input retained by a local Workspace until materialization succeeds. */
-export type WorkspaceCreateInput = { name: string } | { path: string }
+export type WorkspaceCreateInput = { path: string }

 /** Observable state of a client-local Workspace intent. */
 export interface WorkspaceIntentSnapshot {
@@ -137,7 +137,6 @@ export class Workspace implements ObservableSnapshot<WorkspaceSnapshot> {
 }

 function intentName(input: WorkspaceCreateInput): string {
-  if ('name' in input) return input.name
  const trimmed = input.path.replace(/[\\/]+$/, '')
  return trimmed.split(/[\\/]/).pop() ?? input.path
 }
--- a/packages/client/runtime/tests/conversation.spec.ts
+++ b/packages/client/runtime/tests/conversation.spec.ts
@@ -1,22 +1,30 @@
 /** Assistant block classifier (moved here with sessions/conversation.ts). */

 import { describe, expect, it } from 'vitest'
+import { AttachmentId } from '@deepseek-ai/dsh-attachment'
 import type { ContentBlock } from '@deepseek-ai/dsh-client-connection/client'
 import { toAssistantBlock, toAssistantBlocks } from '../src/client/sessions/conversation.ts'

 describe('toAssistantBlock', () => {
  it('classifies the four block shapes', () => {
+    const attachment = {
+      attachmentId: AttachmentId(`sha256:${'a'.repeat(64)}`),
+      mediaType: 'image/png' as const,
+      bytes: 68,
+      width: 1,
+      height: 1,
+    }
    const blocks: ContentBlock[] = [
      { type: 'text', text: '正文' },
      { type: 'reasoning', text: '思考' },
      { type: 'tool-call', id: 'c1', name: 'echo', arguments: '{}' } as ContentBlock,
-      { type: 'image', data: 'x' } as unknown as ContentBlock,
+      { type: 'image', attachment },
    ]
    expect(toAssistantBlocks(blocks)).toEqual([
      { kind: 'text', text: '正文' },
      { kind: 'reasoning', text: '思考' },
      { kind: 'tool-call', callId: 'c1', name: 'echo', argsRaw: '{}' },
-      { kind: 'other', block: blocks[3] },
+      { kind: 'image', attachment },
    ])
    expect(toAssistantBlock(blocks[0] as ContentBlock)).toEqual({ kind: 'text', text: '正文' })
  })
--- a/packages/client/runtime/tests/fake-api.ts
+++ b/packages/client/runtime/tests/fake-api.ts
@@ -85,6 +85,8 @@ export class FakeApiClient implements IApiClient {
  Promise<RpcResponse<{ selected: ModelSelection }>> =
    payload => Promise.resolve(ok({ selected: { provider: payload.provider, model: payload.model } }))
  onPrompt: (payload: unknown) => Promise<RpcResponse<{ accepted: true }>> = () => Promise.resolve(ok({ accepted: true as const }))
+  onAttachment: (payload: unknown) => Promise<RpcResponse<{ attachment: { attachmentId: never; mediaType: 'image/png'; bytes: number; width: number; height: number }; data: string }>> =
+    () => Promise.resolve(ok({ attachment: { attachmentId: 'a' as never, mediaType: 'image/png', bytes: 1, width: 1, height: 1 }, data: 'AA==' }))
  onUpdateQueue: (payload: unknown) => Promise<RpcResponse<{ accepted: true }>> = () => Promise.resolve(ok({ accepted: true as const }))
  onCancel: (payload: unknown) => Promise<RpcResponse<{ accepted: true }>> = () => Promise.resolve(ok({ accepted: true as const }))

@@ -129,6 +131,7 @@ export class FakeApiClient implements IApiClient {
    rename: (payload: unknown) => this.record('session.rename', payload, this.onRename(payload)),
    fork: (payload: unknown) => this.record('session.fork', payload, this.onFork(payload)),
    prompt: (payload: unknown) => this.record('session.prompt', payload, this.onPrompt(payload)),
+    attachment: (payload: unknown) => this.record('session.attachment', payload, this.onAttachment(payload)),
    updateQueue: (payload: unknown) => this.record('session.updateQueue', payload, this.onUpdateQueue(payload)),
    cancel: (payload: unknown) => this.record('session.cancel', payload, this.onCancel(payload)),
  }
--- a/packages/client/runtime/tests/session.spec.ts
+++ b/packages/client/runtime/tests/session.spec.ts
@@ -531,6 +531,21 @@ describe('prompt and cancel errors', () => {
    expect(result.ok).toBe(false)
    expect(session.getSnapshot().promptError).toMatchObject({ op: 'stop', error: { code: 'internal' } })
  })
+
+  it('reads session-authorized attachment bytes and keeps the opaque id on the wire', async () => {
+    const { api, session } = makeSession()
+    const result = await session.readAttachment('attachment-1' as never)
+    expect(result).toEqual({
+      ok: true,
+      value: {
+        attachment: { attachmentId: 'a', mediaType: 'image/png', bytes: 1, width: 1, height: 1 },
+        data: Uint8Array.of(0),
+      },
+    })
+    expect(api.callsOf('session.attachment')).toEqual([{
+      sessionId: SID, attachmentId: 'attachment-1',
+    }])
+  })
 })

 describe('rename', () => {
--- a/packages/client/runtime/tests/workspaces-service.spec.ts
+++ b/packages/client/runtime/tests/workspaces-service.spec.ts
@@ -59,7 +59,7 @@ describe('WorkspaceManager', () => {
    expect(manager.getSnapshot()).toMatchObject({ phase: 'ready', state: 'error', error: { message: 'wire down' } })
  })

-  it('creates by name/path, prepends a new row, and folds failures', async () => {
+  it('creates by path, prepends a new row, and folds failures', async () => {
    const api = new FakeApiClient()
    const manager = new WorkspaceManager(api)
    api.onWorkspaceCreate = payload => Promise.resolve(ok({
@@ -67,8 +67,8 @@ describe('WorkspaceManager', () => {
      created: true,
      payload,
    } as never))
-    await expect(manager.create({ name: 'created' })).resolves.toMatchObject({ ok: true })
-    expect(api.callsOf('workspace.create')).toEqual([{ name: 'created' }])
+    await expect(manager.create({ path: '/w/created' })).resolves.toMatchObject({ ok: true })
+    expect(api.callsOf('workspace.create')).toEqual([{ path: '/w/created' }])
    expect(manager.getSnapshot().items[0]?.workspaceId).toBe('created')

    api.onWorkspaceCreate = () => Promise.reject(new Error('create transport'))
--- a/packages/client/runtime/tsconfig.json
+++ b/packages/client/runtime/tsconfig.json
@@ -8,6 +8,9 @@
    "src"
  ],
  "references": [
+    {
+      "path": "../../attachment/attachment"
+    },
    {
      "path": "../../../vendor/cordis"
    },
--- a/packages/client/test-runtime/src/sessions.ts
+++ b/packages/client/test-runtime/src/sessions.ts
@@ -1,5 +1,6 @@
 /** Test-owned sessions face: the SlotsService host contract over declarative fixtures. */
 import type { Context } from 'cordis'
+import type { AttachmentIdType } from '@deepseek-ai/dsh-attachment'
 import { createScope, scopeOf, SessionProvideChannel } from '@deepseek-ai/dsh-client-runtime/client'
 import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
 import type {
@@ -88,6 +89,15 @@ export class FixtureSession implements SessionFace {
    throw new Error(`test session "${this.sessionId}": prompt is not stubbed — supply it on the fixture's session face`)
  }

+  /**
+   * Fail-loud stub; supply `readAttachment` on the fixture's session face to exercise it.
+   * @param _attachmentId - opaque durable attachment id.
+   * @returns never — always throws.
+   */
+  readAttachment(_attachmentId: AttachmentIdType): never {
+    throw new Error(`test session "${this.sessionId}": readAttachment is not stubbed — supply it on the fixture's session face`)
+  }
+
  /**
   * Fail-loud stub; supply `updateQueue` on the fixture's session face to exercise it.
   * @returns never — always throws.
--- a/packages/client/test-runtime/src/workspaces.ts
+++ b/packages/client/test-runtime/src/workspaces.ts
@@ -73,18 +73,17 @@ export class TestWorkspaces implements IWorkspaces {
  /**
   * Create a Workspace (recorded). The default echoes a view derived from
   * the input; stub for failure or list-coupled flows.
-   * @param input - exactly one Host create spelling.
+   * @param input - the Host create payload.
   * @returns the created Workspace view.
   */
-  async create(input: { name: string } | { path: string }): Promise<WorkspaceView> {
+  async create(input: { path: string }): Promise<WorkspaceView> {
    this.calls.push({ method: 'create', args: [input] })
    const stub = this.stubs.get('create')
    if (stub !== undefined) return await (stub(input) as Promise<WorkspaceView>)
-    const title = 'name' in input ? input.name : input.path
    return {
-      workspaceId: `ws-${title}` as WorkspaceId,
-      title,
-      path: 'path' in input ? input.path : `/${input.name}`,
+      workspaceId: `ws-${input.path}` as WorkspaceId,
+      title: input.path,
+      path: input.path,
      sessionIds: [],
    } as unknown as WorkspaceView
  }
--- a/packages/client/test-runtime/tests/runtime.spec.tsx
+++ b/packages/client/test-runtime/tests/runtime.spec.tsx
@@ -520,6 +520,7 @@ describe('fixture session face', () => {
    await runtime.sessions.add({ id: 's1' })
    const bare = runtime.sessions.behavior('s1')
    expect(() => bare.prompt()).toThrow(/prompt is not stubbed/)
+    expect(() => bare.readAttachment('att-1' as Parameters<typeof bare.readAttachment>[0])).toThrow(/readAttachment is not stubbed/)
    expect(() => bare.updateQueue()).toThrow(/updateQueue is not stubbed/)
    expect(() => bare.cancel()).toThrow(/cancel is not stubbed/)
    expect(() => bare.command()).toThrow(/command is not stubbed/)
@@ -567,8 +568,8 @@ describe('workspaces action face', () => {
  it('records every IWorkspaces verb with inert defaults and honors stubs', async () => {
    const runtime = await SlotTestRuntime.create()
    const ws = runtime.workspaces
-    const created = await ws.create({ name: 'alpha' })
-    expect(created.title).toBe('alpha')
+    const created = await ws.create({ path: '/tmp/alpha' })
+    expect(created.title).toBe('/tmp/alpha')
    const registered = await ws.create({ path: '/tmp/beta' })
    expect(registered.path).toBe('/tmp/beta')
    await expect(ws.pickDirectory()).resolves.toBeNull()
@@ -592,7 +593,7 @@ describe('workspaces action face', () => {
    ws.stub('openPath', () => Promise.resolve())
    ws.stub('insertSessionBefore', () => Promise.resolve({ workspaceId: 'w1', title: '', path: '', sessionIds: [] } as never))
    ws.stub('archiveSession', () => Promise.resolve())
-    expect((await ws.create({ name: 'y' })).title).toBe('X')
+    expect((await ws.create({ path: '/y' })).title).toBe('X')
    await expect(ws.pickDirectory()).resolves.toBe('/picked')
    expect((await ws.rename('w1' as WorkspaceId, 'z')).title).toBe('S')
    await ws.delete('w1' as WorkspaceId)
--- a/packages/client/ui-conversation/README.i18n.yaml
+++ b/packages/client/ui-conversation/README.i18n.yaml
@@ -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-conversation/README.md
-README.md: 79f8217189e9bec505677a59970a27d49fd7d0af
-README.zh.md: 1ea6c5d57df931f75876430eccde80e7e398c9e4
+README.md: 323c968b3333c91e106a2962838447a6cdd4c6a6
+README.zh.md: 03865e25be62911e14d996ad6a28bae02fde9bdd
--- a/packages/client/ui-conversation/README.md
+++ b/packages/client/ui-conversation/README.md
@@ -18,7 +18,7 @@ Approvals take over the composer through the chain this package declares: `Appro

 The session header declares and renders the session-scoped `'conversation.session.header.actions'` list beside the title, allowing feature plugins to contribute controls without entering the skeleton. The composer chain currency includes the current conversation `session`; ui-subagent selects one-shot or parent-unavailable addressed sessions for reason-specific read-only copy, while the ordinary InputBar keeps every addressed child Send-only because the continuation service exposes no public per-Activation cancellation operation and `session.cancel` would bypass its ownership.

-Logged non-user messages render as a default-collapsed disclosure whose header names the role the runtime projected for the message — `上下文注入` for an injection, `跨会话召回` for a recalled session — followed by the producer name that projection read out of the durable source, so a reader distinguishes a skill catalog from a workspace instruction file or a recalled session without expanding. A source that names no producer shows the role alone. The shared `DisclosureRow` primitive gives this context surface the same compact geometry as other flow rows while retaining context semantics: the expanded body follows its content height up to a 141px scrolling cap and synthesizes no tool state or summary ([historical disclosure decision](../../../.agents/notes/archived/feature/2026-07-30-web-context-injection-disclosure.md), [producer-label decision](../../../.agents/notes/implemented/feature/2026-08-04-web-context-source-and-steer-marks.md)). That body follows the form the producer declared on its durable source: `instructions` names the reconciled files above their text, `catalog` lists the entries the source recorded instead of the model-facing prose, and every other value — absent, unknown to this version, or carrying no usable fields — renders the opaque body, which shows the model-facing text with its real line breaks and the remaining source fields. The opaque body is the documented default, not a leftover: a resumed, forked, or foreign log must render whether or not its producer is mounted here. A durable or pending steering bubble carries an `插话` / `Interjection` caption above it, the only thing distinguishing a mid-turn interjection from the turn-opening prompt that shares its bubble.
+Logged non-user messages render as a default-collapsed disclosure whose header names the role the runtime projected for the message — `上下文注入` for an injection, `跨会话召回` for a recalled session — followed by the producer name that projection read out of the durable source, so a reader distinguishes a skill catalog from a workspace instruction file or a recalled session without expanding. A source that names no producer shows the role alone. The shared `DisclosureRow` primitive gives this context surface the same compact geometry as other flow rows while retaining context semantics: the expanded body follows its content height up to a 141px scrolling cap and synthesizes no tool state or summary ([historical disclosure decision](../../../.agents/notes/archived/feature/2026-07-30-web-context-injection-disclosure.md), [producer-label decision](../../../.agents/notes/implemented/feature/2026-08-04-web-context-source-and-steer-marks.md)). That body follows the form the producer declared on its durable source: `instructions` names the reconciled files above their text, `catalog` lists the entries the source recorded instead of the model-facing prose, and every other value — absent, unknown to this version, or carrying no usable fields — renders the opaque body, which shows the model-facing text with its real line breaks and the remaining source fields. The opaque body is the documented default, not a leftover: a resumed, forked, or foreign log must render whether or not its producer is mounted here. A durable or pending steering bubble shares the user bubble's presentation unadorned; its mid-turn position in the flow is the only steering signal the transcript shows.

 A Think row stays collapsed by default and exposes live reasoning throughput without expanding the chain of thought: while its reasoning block is the streaming tail, the summary switches from the settled first line to the latest non-blank line and its one-line scrollport follows each delta to the inline end. Expanding the row removes the moving summary and leaves the full reasoning in ordinary page flow, so page reading never fights an internal follower; settlement restores the stable first-line summary at the left edge ([decision](../../../.agents/notes/implemented/feature/2026-08-02-web-thinking-tail-scroll.md)).

--- a/packages/client/ui-conversation/README.zh.md
+++ b/packages/client/ui-conversation/README.zh.md
@@ -16,7 +16,7 @@ Chat 业务行是彼此独立的注册表贡献，不是封闭的内建联合。

 会话页头会在标题旁声明并渲染 Session scope 的 `'conversation.session.header.actions'` 列表，使功能插件无需进入骨架即可贡献控件。编辑器链的 currency 包含当前对话 `session`；ui-subagent 会选取 one-shot 或 parent 不可用的已寻址会话，并按原因显示只读文案，而普通 InputBar 会让所有已寻址 child 仅保留 Send，因为继续执行服务不公开逐 Activation 取消操作，`session.cancel` 也会绕过其所有权。

-已记录的非用户消息渲染为默认折叠的展开项，标题栏先给出运行时为该消息投影出的角色——注入为 `上下文注入`，召回为 `跨会话召回`——其后是该投影从持久来源读出的生产者名称，因此读者无需展开即可区分 skill（技能）目录、工作区指令文件与被召回的会话。来源未提供生产者名称时只显示角色。共享的 `DisclosureRow` 原子组件让该上下文界面与消息流中的其他紧凑行保持相同几何，同时保留上下文语义：展开内容区的高度会随内容自适应，最大为 141px，超出后滚动，且不会合成工具状态或摘要（[历史展开项决策](../../../.agents/notes/archived/feature/2026-07-30-web-context-injection-disclosure.md)、[生产者标签决策](../../../.agents/notes/implemented/feature/2026-08-04-web-context-source-and-steer-marks.md)）。该内容区按生产方在持久来源上声明的形态渲染：`instructions` 在正文之上列出它对账过的文件，`catalog` 列出来源记录的条目而非面向模型的散文，其余取值——未声明、本版本不认识、或字段不可用——一律渲染 opaque 内容区，即按真实换行展示面向模型的文本，并把剩余来源字段列出。opaque 不是兜底剩余物而是有文档的默认：恢复的、fork 的、外部写入的日志，无论其生产方是否挂载在此处，都必须渲染得出来。持久或待处理的 steering（中途引导）气泡上方带有 `插话` / `Interjection` 标注，这是把中途插话与共用同一气泡的开轮提示区分开的唯一标识。
+已记录的非用户消息渲染为默认折叠的展开项，标题栏先给出运行时为该消息投影出的角色——注入为 `上下文注入`，召回为 `跨会话召回`——其后是该投影从持久来源读出的生产者名称，因此读者无需展开即可区分 skill（技能）目录、工作区指令文件与被召回的会话。来源未提供生产者名称时只显示角色。共享的 `DisclosureRow` 原子组件让该上下文界面与消息流中的其他紧凑行保持相同几何，同时保留上下文语义：展开内容区的高度会随内容自适应，最大为 141px，超出后滚动，且不会合成工具状态或摘要（[历史展开项决策](../../../.agents/notes/archived/feature/2026-07-30-web-context-injection-disclosure.md)、[生产者标签决策](../../../.agents/notes/implemented/feature/2026-08-04-web-context-source-and-steer-marks.md)）。该内容区按生产方在持久来源上声明的形态渲染：`instructions` 在正文之上列出它对账过的文件，`catalog` 列出来源记录的条目而非面向模型的散文，其余取值——未声明、本版本不认识、或字段不可用——一律渲染 opaque 内容区，即按真实换行展示面向模型的文本，并把剩余来源字段列出。opaque 不是兜底剩余物而是有文档的默认：恢复的、fork 的、外部写入的日志，无论其生产方是否挂载在此处，都必须渲染得出来。持久或待处理的 steering（中途引导）气泡沿用用户气泡的呈现，不加任何装饰；transcript 中唯一的 steering 信号是它出现在轮次中途的位置。

 Think 行默认保持折叠，并在不展开思维链的情况下暴露实时推理（reasoning）吞吐：当推理块是流式输出尾部时，摘要从结算后的首行切换到最新的非空行，其单行滚动区会随每个 delta 追到行内末端。展开该行会移除移动摘要，让完整推理进入普通页面流，因此页面阅读不会与内部跟随器争夺滚动；结算后恢复左对齐的稳定首行摘要（[决策](../../../.agents/notes/implemented/feature/2026-08-02-web-thinking-tail-scroll.md)）。

--- a/packages/client/ui-conversation/package.json
+++ b/packages/client/ui-conversation/package.json
@@ -40,6 +40,8 @@
  },
  "peerDependencies": {
    "@deepseek-ai/dsh-agent": "^0.0.1",
+    "@deepseek-ai/dsh-attachment": "^0.0.1",
+    "@deepseek-ai/dsh-brand": "^0.0.1",
    "@deepseek-ai/dsh-client-locale": "^0.0.1",
    "@deepseek-ai/dsh-client-runtime": "^0.0.1",
    "@deepseek-ai/dsh-client-ui-primitives": "^0.0.1",
@@ -56,6 +58,8 @@
  },
  "devDependencies": {
    "@deepseek-ai/dsh-agent": "workspace:^",
+    "@deepseek-ai/dsh-attachment": "workspace:^",
+    "@deepseek-ai/dsh-brand": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
    "@deepseek-ai/dsh-client-test-runtime": "workspace:^",
--- a/packages/client/ui-conversation/src/client/apply.ts
+++ b/packages/client/ui-conversation/src/client/apply.ts
@@ -13,7 +13,7 @@ import type {
 } from './contract/slots.ts'
 import type { InputNotice } from './input/contract.ts'
 import { createChatStore } from './stores.ts'
-import { ConversationService } from './service.ts'
+import { ConversationService, UnsupportedImageMediaTypeError } from './service.ts'
 import type { IConversation } from './service.ts'
 import { ComposerBlockRegistry } from './input/blocks.ts'
 import type { ComposerBlock } from './input/blocks.ts'
@@ -91,6 +91,13 @@ function scopedConversation(sessions: ISessions, id: SessionId): IConversation {
  return conversation
 }

+/** Resolve package-internal attachment operations from the public service registration. */
+function concreteConversation(ctx: Context): ConversationService {
+  const conversation = ctx.get('conversation') as ConversationService | undefined
+  if (conversation === undefined) throw new Error('ui-conversation: conversation service unavailable')
+  return conversation
+}
+
 /** Chain routing: claim the composer while an approval wait is pending (pure — owner props only). */
 function selectApproval({ interactions }: ComposerChainProps): ApprovalWait | null {
  return interactions.find((i): i is ApprovalWait => i.kind === 'approval') ?? null
@@ -201,9 +208,16 @@ export function apply(ctx: Context): void {
        if (sessionId !== undefined && nextId !== sessionId) {
          const from = inputHub.shell(sessionId)
          const draft = from.snapshot.draft
-          if (draft !== '') {
-            inputHub.shell(nextId).setDraft(draft)
-            from.setDraft('')
+          const imageIds = from.snapshot.imageIds
+          const next = inputHub.shell(nextId)
+          if (imageIds.length === 0 || next.addImages(imageIds)) {
+            if (draft !== '') {
+              next.setDraft(draft)
+              from.setDraft('')
+            }
+            if (imageIds.length > 0) {
+              for (const id of imageIds) from.removeImage(id)
+            }
          }
        }
        sessions.open(nextId)
@@ -220,10 +234,14 @@ export function apply(ctx: Context): void {
      'conversation.view': { kind: 'list', scope: 'session' },
    },
    store: chatStore,
-    inject: (sessionId: SessionId, _actions: BoundActions<typeof chatStore>): ConversationSessionInjected => ({
-      views,
-      bindDraftMirror: write => inputHub.shell(sessionId).bindMirror(write),
-    }),
+    inject: (sessionId: SessionId, _actions: BoundActions<typeof chatStore>): ConversationSessionInjected => {
+      const conversation = concreteConversation(ctx)
+      return {
+        views,
+        releaseSessionImages: (id) => { conversation.releaseSessionImages(id) },
+        bindDraftMirror: write => inputHub.shell(sessionId).bindMirror(write),
+      }
+    },
  }, ConversationSession)

  // Header chrome sits above the resident scrollport but shares the same
@@ -262,6 +280,9 @@ export function apply(ctx: Context): void {
      if (sessionId === undefined) {
        return {
          keyboard: undefined,
+          addImages: undefined,
+          removeImage: undefined,
+          draftImages: undefined,
          resolveSubmitMode: (running, gesture, steeringAvailable) =>
            submissionPolicy.resolve(running, gesture, steeringAvailable),
          toggleCommandMenu: undefined,
@@ -270,10 +291,32 @@ export function apply(ctx: Context): void {
          hooks: { notices: ABSENT_NOTICES, lexicon: ABSENT_LEXICON, menuLauncher: ABSENT_MENU_LAUNCHER },
        }
      }
+      const conversation = concreteConversation(ctx)
      const shell = inputHub.shell(sessionId)
      const slash = inputHub.slash(sessionId)
      return {
        keyboard: shell,
+        addImages: (files) => {
+          try {
+            const images = conversation.createDraftImages(files)
+            if (!shell.addImages(images.map(image => image.id))) {
+              conversation.releaseDraftImages(images)
+            }
+            return null
+          } catch (error: unknown) {
+            if (error instanceof UnsupportedImageMediaTypeError) {
+              return t('image.unsupportedType', {
+                type: error.mediaType || t('image.unknownType'),
+              })
+            }
+            return error instanceof Error ? error.message : String(error)
+          }
+        },
+        removeImage: (id) => {
+          conversation.releaseDraftImage(id)
+          shell.removeImage(id)
+        },
+        draftImages: ids => conversation.draftImages(ids),
        resolveSubmitMode: (running, gesture, steeringAvailable) =>
          submissionPolicy.resolve(running, gesture, steeringAvailable),
        toggleCommandMenu: slash === undefined
@@ -332,6 +375,7 @@ export function apply(ctx: Context): void {
    },
    store: chatStore,
    inject: (sessionId: SessionId, actions: BoundActions<typeof chatStore>): ChatViewInjected => {
+      const conversation = concreteConversation(ctx)
      const scoped = scopedConversation(sessions, sessionId)
      return {
        openDetails: (target) => {
@@ -347,6 +391,7 @@ export function apply(ctx: Context): void {
          })
        },
        loadOlder: () => { void scoped.loadOlder() },
+        loadImage: attachment => conversation.resolveImage(sessionId, attachment),
        // Unregistered 'trajectory' id is safe: the tab ring falls back to
        // the first view, and the untouched inspect target stays inert.
        inspectCall: (callId) => {
--- a/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx
+++ b/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx
@@ -14,6 +14,7 @@ import type { AssistantBlock } from '@deepseek-ai/dsh-client-runtime/client'
 import { JsonBlock, MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { MarkdownFileMentions } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
+import { ImageGallery, type ImageLoader } from './MessageImage.tsx'
 import { ReasoningRow } from './ReasoningRow.tsx'
 import css from './AssistantMarkdown.module.css'

@@ -22,6 +23,8 @@ export interface AssistantMarkdownProps {
  streaming: boolean
  /** Frozen partial of an aborted turn: rendered with a stopped marker. */
  interrupted?: boolean | undefined
+  /** Session-authorized durable image loader. */
+  loadImage?: ImageLoader
  /** Resolved prose file mentions for this Assistant's closing turn. */
  mentions?: MarkdownFileMentions | undefined
  /** The owning view's locale seat, passed down as a plain prop. */
@@ -30,8 +33,9 @@ export interface AssistantMarkdownProps {

 /** Reasoning block as the Think variant summary row (figma 39:28304). */
 export const AssistantMarkdown = memo(function AssistantMarkdown({
-  blocks, streaming, interrupted, mentions, t,
+  blocks, streaming, interrupted, loadImage, mentions, t,
 }: AssistantMarkdownProps) {
+  const imageLoader = loadImage ?? (() => Promise.reject(new Error(t('image.serviceUnavailable'))))
  // Stable per locale revision (t identity changes on switch): a fresh object
  // per render would rebuild MarkdownText's component table every chunk.
  const codeLabels = useMemo(() => ({ copyLabel: t('copy'), copiedLabel: t('copied') }), [t])
@@ -58,6 +62,7 @@ export const AssistantMarkdown = memo(function AssistantMarkdown({
              />
            )
            case 'reasoning': return <ReasoningRow key={i} text={block.text} running={streaming && i === last} t={t} />
+            case 'image': return <ImageGallery key={i} images={[block]} load={imageLoader} align="start" t={t} />
            // Grouped into tool rows by ChatView; hasVisible above skips an empty shell.
            case 'tool-call': return null
            default: return (
--- a/packages/client/ui-conversation/src/client/chat/AssistantNodeView.tsx
+++ b/packages/client/ui-conversation/src/client/chat/AssistantNodeView.tsx
@@ -4,7 +4,7 @@ import { AssistantMarkdown } from './AssistantMarkdown.tsx'

 /** Streaming, settled, and interrupted Assistant states share one keyed renderer instance. */
 export const AssistantNodeView = memo(function AssistantNodeView({
-  node, useTurnData, openFile, fileMentions, t,
+  node, useTurnData, openFile, loadImage, fileMentions, t,
 }: ChatNodeViewProps<'assistant-step'>) {
  const data = node.data
  const turn = node.location.kind === 'turn' || node.location.kind === 'step'
@@ -25,6 +25,7 @@ export const AssistantNodeView = memo(function AssistantNodeView({
      blocks={data.blocks}
      streaming={data.status === 'running'}
      interrupted={data.status === 'interrupted'}
+      loadImage={loadImage}
      mentions={mentions}
      t={t}
    />
--- a/packages/client/ui-conversation/src/client/chat/ChatNodeSeat.tsx
+++ b/packages/client/ui-conversation/src/client/chat/ChatNodeSeat.tsx
@@ -18,7 +18,7 @@ type RoutedChatNodeOwner = {
 /** Subscribe and dispatch one stable Context key without observing sibling Nodes. */
 export const ChatNodeSeat = memo(function ChatNodeSeat({
  nodeKey, selectedCallId, cwd, openFile, inspectCall, forkAt,
-  fileMentions, useSession, renderSlot, t,
+  loadImage, fileMentions, useSession, renderSlot, t,
 }: ChatNodeSeatProps) {
  const node = useSession(snapshot => snapshot.chat.nodes.get(nodeKey))
  const routedNode = node as ChatNode | undefined
@@ -30,8 +30,9 @@ export const ChatNodeSeat = memo(function ChatNodeSeat({
      openFile,
      inspectCall,
      forkAt,
+      loadImage,
      fileMentions,
-    }, [node, selectedCallId, cwd, openFile, inspectCall, forkAt, fileMentions])
+    }, [node, selectedCallId, cwd, openFile, inspectCall, forkAt, loadImage, fileMentions])
  if (routedNode === undefined || owner === null) return null
  // Runtime dispatch owns the correlation: every Node's discriminant is the
  // keyed-slot entry passed alongside that same Node. TypeScript does not
--- a/packages/client/ui-conversation/src/client/chat/ChatView.tsx
+++ b/packages/client/ui-conversation/src/client/chat/ChatView.tsx
@@ -144,7 +144,7 @@ function TurnStatus({ startTime, t }: {
 * ordered business Node crosses the keyed renderer seat.
 */
 export function ChatView({
-  useSession, useSessions, useStore, renderSlot, sessionId, openFile, loadOlder, inspectCall, chatScroll, forkAt,
+  useSession, useSessions, useStore, renderSlot, sessionId, openFile, loadOlder, loadImage, inspectCall, chatScroll, forkAt,
  fileMentions, t,
 }: ChatViewSlotProps) {
  const order = useSession(s => s.chat.order)
@@ -389,6 +389,7 @@ export function ChatView({
              openFile={openFile}
              inspectCall={inspectCall}
              forkAt={forkAt}
+              loadImage={loadImage}
              fileMentions={fileMentions}
              renderSlot={renderSlot}
              t={t}
@@ -401,7 +402,7 @@ export function ChatView({
              wait, tool execution, streaming) so it never flickers per step. */}
          {running && <TurnStatus startTime={runningTurnStart} t={t} />}
          {pendingSteering.map(item => (
-            <PendingSteeringBubble key={item.id} content={item.content} t={t} />
+            <PendingSteeringBubble key={item.id} content={item.content} loadImage={loadImage} t={t} />
          ))}
        </div>
        {!atBottom && (
--- a/packages/client/ui-conversation/src/client/chat/MessageImage.module.css
+++ b/packages/client/ui-conversation/src/client/chat/MessageImage.module.css
@@ -0,0 +1,53 @@
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: min(240px, 100%);
+}
+
+.gallery[data-align='end'] {
+  justify-content: flex-end;
+  align-self: flex-end;
+}
+
+.gallery[data-align='start'] {
+  justify-content: flex-start;
+  align-self: flex-start;
+}
+
+.frame {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 12px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  cursor: zoom-in;
+}
+
+.frame img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.loading,
+.error {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.error {
+  max-width: 240px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 10px;
+  background: var(--dsw-alias-interactive-bg-hover-danger);
+  cursor: pointer;
+}
--- a/packages/client/ui-conversation/src/client/chat/MessageImage.tsx
+++ b/packages/client/ui-conversation/src/client/chat/MessageImage.tsx
@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
+import { ImageLightbox } from '../skeleton/ImageLightbox.tsx'
+import css from './MessageImage.module.css'
+
+/** Loads a session-authorized durable image URL. */
+export type ImageLoader = (attachment: ImageAttachmentRef) => Promise<string>
+
+/** Compact history renderer with retryable loading and double-click original preview. */
+export function MessageImage({ attachment, load, t }: {
+  attachment: ImageAttachmentRef
+  load: ImageLoader
+  t: ChatViewSlotProps['t']
+}) {
+  const [src, setSrc] = useState<string | null>(null)
+  const [error, setError] = useState(false)
+  const [open, setOpen] = useState(false)
+  const close = useCallback(() => { setOpen(false) }, [])
+  const size = useMemo(() => {
+    const scale = Math.min(1, 240 / attachment.width, 240 / attachment.height)
+    return { width: Math.max(1, Math.round(attachment.width * scale)), height: Math.max(1, Math.round(attachment.height * scale)) }
+  }, [attachment.height, attachment.width])
+
+  const request = useCallback(() => {
+    setError(false)
+    setSrc(null)
+    void load(attachment).then(setSrc).catch(() => { setError(true) })
+  }, [attachment, load])
+
+  useEffect(() => {
+    let live = true
+    setError(false)
+    void load(attachment).then((url) => { if (live) setSrc(url) }).catch(() => { if (live) setError(true) })
+    return () => { live = false }
+  }, [attachment, load])
+
+  const label = attachment.name ?? t('image.label')
+  if (error) return <button type="button" className={css.error} onClick={request}>{t('image.loadFailed')}</button>
+  return (
+    <>
+      <button
+        type="button"
+        className={css.frame}
+        style={size}
+        title={t('image.openOriginal')}
+        aria-label={t('image.openOriginalLabel', { label })}
+        onDoubleClick={() => { if (src !== null) setOpen(true) }}
+      >
+        {src === null ? <span className={css.loading}>{t('image.loading')}</span> : <img src={src} alt={label} />}
+      </button>
+      {open && src !== null && <ImageLightbox src={src} alt={label} onClose={close} t={t} />}
+    </>
+  )
+}
+
+/** Wrapping image group shared by user and assistant history. */
+export function ImageGallery({ images, load, align, t }: {
+  images: readonly { attachment: ImageAttachmentRef }[]
+  load: ImageLoader
+  align: 'start' | 'end'
+  t: ChatViewSlotProps['t']
+}) {
+  if (images.length === 0) return null
+  return (
+    <div className={css.gallery} data-align={align}>
+      {images.map((image, index) => (
+        <MessageImage key={`${image.attachment.attachmentId}:${index}`} {...image} load={load} t={t} />
+      ))}
+    </div>
+  )
+}
--- a/packages/client/ui-conversation/src/client/chat/MessageItem.module.css
+++ b/packages/client/ui-conversation/src/client/chat/MessageItem.module.css
@@ -8,18 +8,17 @@
  gap: 6px;
 }

-/* Steering caption above the bubble: mid-turn interjections carry the same
-   bubble as a turn-opening prompt, so the transcript names which one this is. */
-.steeringMark {
-  padding-right: 4px;
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 12px;
-  line-height: 16px;
+.userStack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  min-width: 0;
+  max-width: min(525px, 82%);
 }
-
 .bubble {
  /* 525px cap inside the 736 column; percentage keeps narrow windows sane. */
-  max-width: min(525px, 82%);
+  max-width: 100%;
  background: var(--dsw-specific-bubble);
  border-radius: 22px;
  /* 44px single-line bubble: 24 line + 10 vertical padding each side. */
--- a/packages/client/ui-conversation/src/client/chat/MessageItem.tsx
+++ b/packages/client/ui-conversation/src/client/chat/MessageItem.tsx
@@ -1,30 +1,40 @@
 // MessageItem: simple chat nodes — user and consumed-steering bubbles
-// (right-aligned, with clock + copy IconActions; steering adds the
-// interjection caption that names it; branch lives only under assistant
-// answers), pending steering (caption + copy only), context injection,
+// (right-aligned, with clock + copy IconActions; branch lives only under
+// assistant answers), pending steering (copy only), context injection,
 // compaction marker, retry disclosure, and unknown-surface JSON rows.

 import { memo, useEffect, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
 import type {
-  ModelRetryNode, TurnErrorNode,
+  ModelRetryNode, TurnErrorNode, UserMessageNode,
 } from '@deepseek-ai/dsh-client-runtime/client'
 import { JsonBlock, MessageText, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatNodeViewProps, ChatViewSlotProps } from '../contract/slots.ts'
 import { CompactionItem } from './CompactionItem.tsx'
 import { ContextInjectionRow } from './ContextInjectionRow.tsx'
 import { MessageIconActions } from './MessageIconActions.tsx'
+import { ImageGallery, type ImageLoader } from './MessageImage.tsx'
 import css from './MessageItem.module.css'

-function contentText(content: readonly unknown[]): { text: string; rest: unknown[] } {
+type UserImage = Extract<UserMessageNode['content'][number], { type: 'image' }>
+
+function contentParts(content: readonly unknown[]): {
+  text: string
+  images: { attachment: UserImage['attachment'] }[]
+  rest: unknown[]
+} {
  const texts: string[] = []
+  const images: { attachment: UserImage['attachment'] }[] = []
  const rest: unknown[] = []
  for (const block of content) {
-    const b = block as { type?: string; text?: string }
+    const b = block as { type?: string; text?: string; attachment?: unknown }
    if (b.type === 'text' && typeof b.text === 'string') texts.push(b.text)
+    else if (b.type === 'image' && b.attachment !== undefined) {
+      images.push({ attachment: (b as UserImage).attachment })
+    }
    else rest.push(block)
  }
-  return { text: texts.join(''), rest }
+  return { text: texts.join(''), images, rest }
 }

 function retrySeconds(milliseconds: number): number {
@@ -151,25 +161,27 @@ function projectUserText(text: string): ReactNode {

 /** Right-aligned bubble shared by user and steering rows. */
 function UserStyleBubble({
-  content, actions, pending = false, steering = false, t,
+  content, imageLoader, actions, pending = false, t,
 }: {
  content: readonly unknown[]
+  imageLoader: ImageLoader
  /** Optional IconActions (or similar) below the bubble; receives the joined text. */
  actions?: (text: string) => ReactNode
  /** Whether this is the Host-authoritative pre-admission steering projection. */
  pending?: boolean
-  /** Marks the bubble as mid-turn steering rather than a turn-opening prompt. */
-  steering?: boolean
  t: ChatViewSlotProps['t']
 }): ReactNode {
-  const { text, rest } = contentText(content)
+  const { text, images, rest } = contentParts(content)
  const truncated = (total: number): string => t('json.truncated', { total })
+  const showBubble = text !== '' || rest.length > 0
  return (
    <div className={css.userRow} data-pending-steering={pending || undefined} data-time-hover-root>
-      {steering && <span className={css.steeringMark} data-steering-mark>{t('message.steering')}</span>}
-      <div className={css.bubble}>
-        {projectUserText(text)}
-        {rest.map((block, i) => <JsonBlock key={i} label={t('message.extraBlock')} payload={block} truncatedLabel={truncated} />)}
+      <div className={css.userStack}>
+        <ImageGallery images={images} load={imageLoader} align="end" t={t} />
+        {showBubble && <div className={css.bubble}>
+          {projectUserText(text)}
+          {rest.map((block, i) => <JsonBlock key={i} label={t('message.extraBlock')} payload={block} truncatedLabel={truncated} />)}
+        </div>}
      </div>
      {actions?.(text)}
    </div>
@@ -182,15 +194,17 @@ function UserStyleBubble({
 * @param props - Pending message content and conversation translator.
 * @returns the pending steering bubble.
 */
-export function PendingSteeringBubble({ content, t }: {
+export function PendingSteeringBubble({ content, loadImage, t }: {
  content: readonly unknown[]
+  loadImage?: ImageLoader
  t: ChatViewSlotProps['t']
 }): ReactNode {
+  const imageLoader = loadImage ?? (() => Promise.reject(new Error(t('image.serviceUnavailable'))))
  return (
    <UserStyleBubble
      content={content}
+      imageLoader={imageLoader}
      pending
-      steering
      t={t}
      actions={text => (
        <MessageIconActions
@@ -206,13 +220,13 @@ export function PendingSteeringBubble({ content, t }: {

 /** User and admitted-steering keyed Chat renderer. */
 export const UserMessageNodeView = memo(function UserMessageNodeView({
-  node, t,
+  node, loadImage, t,
 }: ChatNodeViewProps<'user' | 'steering'>) {
  const data = node.data
  return (
    <UserStyleBubble
      content={data.content}
-      steering={data.kind === 'steering'}
+      imageLoader={loadImage}
      t={t}
      actions={text => (
        <MessageIconActions
--- a/packages/client/ui-conversation/src/client/contract/slots.ts
+++ b/packages/client/ui-conversation/src/client/contract/slots.ts
@@ -1,5 +1,6 @@
 /** Conversation slot declarations and their composed component props. */
 import type { ReactNode, RefObject } from 'react'
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
 import type {
  InjectFace, MaybeSnapshotSelectorHook, PropsLocale, PropsRenderSlots, PropsRuntime, PropsStore,
  SlotHookFactory, SnapshotSelectorHook,
@@ -12,12 +13,22 @@ import type {
 import type { MarkdownFileMentions } from '@deepseek-ai/dsh-client-ui-primitives'
 import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
 import type { ComposerBlock } from '../input/blocks.ts'
-import type { ComposerKeyboard, EditSelection, InputActions, InputNotice, InputState } from '../input/contract.ts'
+import type {
+  ComposerKeyboard, DraftAttachmentId, EditSelection, InputActions, InputNotice, InputState,
+} from '../input/contract.ts'
 import type { createChatStore } from '../stores.ts'
 import type { ComposerSubmitGesture, InputSubmitMode } from './composer-submission.ts'
 import type { ChatNode, ChatNodeKind } from './chat-nodes.ts'
 import type { CallId, SelectionTarget, ViewTab } from './views.ts'

+/** Browser-owned image that has not crossed the durable host boundary. */
+export interface ComposerAttachment {
+  kind: 'image'
+  id: DraftAttachmentId
+  file: File
+  previewUrl: string
+}
+
 declare module '@deepseek-ai/dsh-client-ui-slots' {
  interface SlotMap {
    /**
@@ -259,6 +270,8 @@ export interface ChatNodeOwnerProps {
  openFile: (path: string) => void
  inspectCall: (callId: CallId) => void
  forkAt: (seq: number) => void
+  /** Resolve a session-authorized historical image for inline display. */
+  loadImage: (attachment: ImageAttachmentRef) => Promise<string>
  fileMentions: (owner: TurnTailOwnerProps) => MarkdownFileMentions | undefined
 }

@@ -328,6 +341,8 @@ export interface ConversationSessionInjected {
    subscribe: (fn: () => void) => () => void
    version: () => number
  }
+  /** Release historical image URLs when this rendered session scope unmounts. */
+  releaseSessionImages: (sessionId: SessionId) => void
  /** Bind the input machine's draft persistence mirror to the session store. */
  bindDraftMirror: (write: (text: string) => void) => () => void
 }
@@ -387,6 +402,12 @@ export interface ComposerBarOwnerProps {
 export interface ComposerBarInjected {
  /** The InputBar-exclusive keyboard/DOM command face (private plane); absent with the session. */
  keyboard: ComposerKeyboard | undefined
+  /** Create previews and append image ids to the session input. */
+  addImages: ((files: readonly File[]) => string | null) | undefined
+  /** Release one preview and remove its id from session input. */
+  removeImage: ((id: DraftAttachmentId) => void) | undefined
+  /** Resolve ordered input ids to browser-owned draft images. */
+  draftImages: ((ids: readonly DraftAttachmentId[]) => readonly ComposerAttachment[]) | undefined
  /** Resolve one keyboard submission gesture against the current running state and persisted preference. */
  resolveSubmitMode: (
    running: boolean,
@@ -569,6 +590,8 @@ export interface ChatViewInjected {
   */
  openFile: (path: string) => void
  loadOlder: () => void
+  /** Resolve a session-authorized historical image for inline display. */
+  loadImage: (attachment: ImageAttachmentRef) => Promise<string>
  /** Hand a call off to the trajectory view: write the one-shot inspect target and switch tabs. */
  inspectCall: (callId: CallId) => void
  /**
--- a/packages/client/ui-conversation/src/client/index.ts
+++ b/packages/client/ui-conversation/src/client/index.ts
@@ -16,6 +16,7 @@ export type {} from './conversation-nodes/turn-tail.ts'
 export { apply, inject } from './apply.ts'
 export { ConversationService } from './service.ts'
 export type { IConversation } from './service.ts'
+export type { DraftAttachmentId } from './input/contract.ts'

 export type {
  CallId, ChatStoreState, SelectionTarget, ViewTab,
@@ -28,7 +29,7 @@ export type {
 export type {
  ChatFileMentions, ChatNodeOwnerProps, ChatNodeViewProps,
  ChatStore, ChatViewInjected, ChatViewSlotProps, CommandRowOwnerProps, CommandRowProps, ComposerBarInjected,
-  ComposerChainProps, ConversationInjected,
+  ComposerAttachment, ComposerChainProps, ConversationInjected,
  ConversationSessionHeaderInjected, ConversationSessionInjected, ConversationSlotProps, ConvViewOwnerProps,
  ConvViewProps, DetailsInjected, DetailsSlotProps, DetailsToolOwnerProps, EmptyWorkspaceOwnerProps,
  TurnTailOwnerProps, UseChatNodeTurnData,
--- a/packages/client/ui-conversation/src/client/input/contract.ts
+++ b/packages/client/ui-conversation/src/client/input/contract.ts
@@ -6,6 +6,7 @@
 * (machine.ts) is package-private and never exported.
 */
 import type { ClientContext, SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import type { Branded } from '@deepseek-ai/dsh-brand'
 import type {
  ArbitrateKey, ArbitrateOutcome, CommandClaim, ConsumeTokenRequest, PickOutcome,
  ReferenceInsert, SubmitOutcome, TokenSpan,
@@ -13,6 +14,9 @@ import type {
 import type { QueueRow } from '../contract/queue.ts'
 import type { InputSubmitMode } from '../contract/composer-submission.ts'

+/** Browser-runtime identity of one unsent image draft. */
+export type DraftAttachmentId = Branded<'DraftAttachmentId'>
+
 /**
 * The scoped-event application verbs: the hub's bail listeners call these,
 * and the boolean answer IS the event's bail value (true ⟺ the machine
@@ -29,6 +33,12 @@ export interface InputTarget {
 export interface SessionInput extends InputTarget {
  /** Single write path for draft text (all mutation rides machine events). */
  setDraft(text: string): void
+  /** Append ordered browser-owned image ids; busy admission phases refuse. */
+  addImages(ids: readonly DraftAttachmentId[]): boolean
+  /** Remove one browser-owned image id. */
+  removeImage(id: DraftAttachmentId): void
+  /** Drop ids whose browser-owned objects no longer exist. */
+  pruneImages(ids: readonly DraftAttachmentId[]): void
  /**
   * THE complexity sink: enter adjudication, submit transaction, and the default sink live inside.
   * @param mode - delivery intent retained through asynchronous adjudication and serialization.
@@ -63,6 +73,12 @@ export interface InputService {
 export interface InputActions {
  /** Single public draft write path (full next draft; occurrence math via diff scan). */
  setDraft(text: string): void
+  /** Append ordered browser-owned image ids; busy admission phases refuse. */
+  addImages(ids: readonly DraftAttachmentId[]): boolean
+  /** Remove one browser-owned image id. */
+  removeImage(id: DraftAttachmentId): void
+  /** Drop ids whose browser-owned objects no longer exist. */
+  pruneImages(ids: readonly DraftAttachmentId[]): void
  /** Enter submission (adjudication / claim transaction / default sink inside). */
  submit(): void
 }
@@ -192,6 +208,8 @@ export interface InputMachineOptions {
 /** Published input state (the currency; per-session). */
 export interface InputState {
  readonly draft: string
+  /** Ordered runtime-only image ids; bytes and URLs stay in ConversationService. */
+  readonly imageIds: readonly DraftAttachmentId[]
  /** Monotonic draft revision (span CAS compares against this). */
  readonly draftRev: number
  readonly phase: 'plain' | 'adjudicating' | 'claimed' | 'submitting'
--- a/packages/client/ui-conversation/src/client/input/facade.ts
+++ b/packages/client/ui-conversation/src/client/input/facade.ts
@@ -13,7 +13,7 @@ import type {
  ReferenceInsert, SlashController, TokenSpan,
 } from '@deepseek-ai/dsh-client-ui-slash/client'
 import type {
-  EditRange, EditSelection, InputActions, InputEffect, InputNotice, InputState,
+  DraftAttachmentId, EditRange, EditSelection, InputActions, InputEffect, InputNotice, InputState,
  PasteComponent, QueuedMessage, SessionInput, SubmitAttempt,
 } from './contract.ts'
 import type { InputSubmitMode } from '../contract/composer-submission.ts'
@@ -45,7 +45,7 @@ export interface SessionInputDeps {
   */
  steerQueue?: (() => void) | undefined
  /** The plain-message sink (send choreography / materialize fork — the hub owns it). */
-  defaultSink(text: string, mode: InputSubmitMode): void
+  defaultSink(text: string, imageIds: readonly DraftAttachmentId[], mode: InputSubmitMode): void
 }

 /** Guard tier from the machine phase. */
@@ -74,6 +74,9 @@ export class SessionInputShell implements SessionInput {
  /** The public provide-channel action face (one stable identity per session). */
  readonly actions: InputActions = {
    setDraft: (text) => { this.setDraft(text) },
+    addImages: ids => this.addImages(ids),
+    removeImage: (id) => { this.removeImage(id) },
+    pruneImages: (ids) => { this.pruneImages(ids) },
    submit: () => { this.submit('queue') },
  }

@@ -82,6 +85,7 @@ export class SessionInputShell implements SessionInput {
  private readonly core = new InputMachine({ now: () => Date.now() })
  private noticeSeq = 0
  private lastDraft = ''
+  private imageIds: readonly DraftAttachmentId[] = []
  private disposed = false
  /** Draft persistence mirror (chat store write; receives the clipboard projection, never raw placeholders). */
  private mirrorFn: ((text: string) => void) | undefined
@@ -103,12 +107,54 @@ export class SessionInputShell implements SessionInput {
    this.run(this.core.dispatch({ type: 'draft-changed', draft: text, ...(editRange !== undefined ? { editRange } : {}) }))
  }

+  /** Append ordered image ids unless an admission transaction is locked. */
+  addImages(ids: readonly DraftAttachmentId[]): boolean {
+    if (this.snapshot.phase === 'adjudicating' || this.snapshot.phase === 'submitting') return false
+    if (ids.length === 0) return true
+    this.imageIds = [...this.imageIds, ...ids]
+    this.publish()
+    return true
+  }
+
+  /** Remove one image id from this draft. */
+  removeImage(id: DraftAttachmentId): void {
+    const next = this.imageIds.filter(candidate => candidate !== id)
+    if (next.length === this.imageIds.length) return
+    this.imageIds = next
+    this.publish()
+  }
+
+  /**
+   * Keep only image ids that still resolve in the browser attachment registry.
+   * @param available - live registry ids.
+   */
+  pruneImages(available: readonly DraftAttachmentId[]): void {
+    const keep = new Set(available)
+    const next = this.imageIds.filter(id => keep.has(id))
+    if (next.length === this.imageIds.length) return
+    this.imageIds = next
+    this.publish()
+  }
+
+  /**
+   * Restore a failed attempt before any images added after its admission.
+   * @param ids - failed attempt image ids.
+   */
+  restoreImages(ids: readonly DraftAttachmentId[]): void {
+    const current = new Set(this.imageIds)
+    this.imageIds = [...ids.filter(id => !current.has(id)), ...this.imageIds]
+    this.publish()
+  }
+
  /**
   * Clear the draft as a successful-send commit: no undo unit is recorded and
   * the undo history is cut, so Ctrl/Cmd-Z cannot resurrect sent content
   * (the command path gets the same discipline from submit-settled success).
+   * @param imageIds - admitted image ids to remove from this draft.
   */
-  commitSend(): void {
+  commitSend(imageIds: readonly DraftAttachmentId[]): void {
+    const submitted = new Set(imageIds)
+    this.imageIds = this.imageIds.filter(id => !submitted.has(id))
    this.run(this.core.dispatch({ type: 'send-committed' }))
  }

@@ -150,6 +196,10 @@ export class SessionInputShell implements SessionInput {
   * dismisses and the menu tracks frozen.
   */
  submit(mode: InputSubmitMode = 'queue'): void {
+    if (this.snapshot.draft.trim() === '' && this.imageIds.length > 0) {
+      if (this.snapshot.phase === 'plain') this.deps.defaultSink('', [...this.imageIds], mode)
+      return
+    }
    this.run(this.core.dispatch({ type: 'enter', mode }))
    const phase = this.snapshot.phase
    if (phase === 'adjudicating' || phase === 'submitting') {
@@ -364,9 +414,10 @@ export class SessionInputShell implements SessionInput {
   * the clipboard text. Chip-free drafts skip the async detour.
   */
  private sinkSerialized(draft: string, mode: InputSubmitMode): void {
+    const imageIds = [...this.imageIds]
    const occurrences = this.core.state.occurrences
    if (occurrences.length === 0) {
-      this.deps.defaultSink(draft.trim(), mode)
+      this.deps.defaultSink(draft.trim(), imageIds, mode)
      return
    }
    const slash = this.deps.slash?.()
@@ -386,7 +437,7 @@ export class SessionInputShell implements SessionInput {
          cursor = part.offset + 1
        }
        out += draft.slice(cursor)
-        this.deps.defaultSink(out.trim(), mode)
+        this.deps.defaultSink(out.trim(), imageIds, mode)
      },
      (error: unknown) => {
        controller.abort()
@@ -444,7 +495,7 @@ export class SessionInputShell implements SessionInput {

  private compose(): InputState {
    const core = this.core.state
-    return { ...core, queue: this.deps.queue?.getSnapshot() ?? EMPTY_QUEUE }
+    return { ...core, imageIds: this.imageIds, queue: this.deps.queue?.getSnapshot() ?? EMPTY_QUEUE }
  }

  private publish(): void {
--- a/packages/client/ui-conversation/src/client/input/hub.ts
+++ b/packages/client/ui-conversation/src/client/input/hub.ts
@@ -12,7 +12,7 @@ import type { ClientContext, ISessions, SessionBinding, SessionFace, SessionId }
 import type { SlashController } from '@deepseek-ai/dsh-client-ui-slash/client'
 import type { TranslateNS } from '@deepseek-ai/dsh-client-locale/client'
 import { queueReadFaceOf } from '../queue/store.ts'
-import type { ComposerKeyboard, InputService, SessionInput } from './contract.ts'
+import type { ComposerKeyboard, DraftAttachmentId, InputService, SessionInput } from './contract.ts'
 import type { InputSubmitMode } from '../contract/composer-submission.ts'
 import type { PopupDismissFace } from './facade.ts'
 import { SessionInputShell } from './facade.ts'
@@ -22,6 +22,17 @@ interface CommandFace {
  popupFor(actx: ClientContext): PopupDismissFace
 }

+/** Attachment-send face resolved lazily to keep hub/service construction acyclic. */
+interface ConversationAttachmentFace {
+  sendSession(
+    session: SessionFace,
+    text: string,
+    imageIds: readonly DraftAttachmentId[],
+    mode: InputSubmitMode,
+  ): Promise<void>
+  releaseDraftImage(id: DraftAttachmentId): void
+}
+
 /** Session-addressed input facade registry (InputService face + composer-layer extras). */
 export class InputHub implements InputService {
  private readonly shells = new Map<SessionId, SessionInputShell>()
@@ -64,7 +75,7 @@ export class InputHub implements InputService {
      slash: () => this.controller(actx),
      popup: () => this.popup(actx),
      queue: queueReadFaceOf(session),
-      defaultSink: (text, mode) => { this.sink(session, text, mode) },
+      defaultSink: (text, imageIds, mode) => { this.sink(session, text, imageIds, mode) },
      steerQueue: () => { void this.steerQueue(session, shell) },
    })
    this.shells.set(id, shell)
@@ -83,8 +94,11 @@ export class InputHub implements InputService {
      ]
      return () => {
        for (const off of offs) off()
+        const drafts = shell.snapshot.imageIds
        shell.dispose()
        this.shells.delete(id)
+        const conversation = this.rootCtx.get('conversation') as ConversationAttachmentFace | undefined
+        for (const imageId of drafts) conversation?.releaseDraftImage(imageId)
      }
    }, 'conversation.input: session shell')
    return shell
@@ -132,19 +146,25 @@ export class InputHub implements InputService {
   * exactly one path; a failed first prompt is an ordinary prompt failure
   * (error strip via promptError, draft restored only while untouched).
   */
-  private sink(session: SessionFace, text: string, mode: InputSubmitMode): void {
-    if (text === '') return
+  private sink(
+    session: SessionFace,
+    text: string,
+    imageIds: readonly DraftAttachmentId[],
+    mode: InputSubmitMode,
+  ): void {
+    if (text === '' && imageIds.length === 0) return
    const shell = this.shells.get(session.sessionId)
    // Commit, not an editable clear: undo must not resurrect sent content.
-    shell?.commitSend()
-    void session.prompt([{ type: 'text', text }], mode).then(
-      (result) => {
-        if (!result.ok && shell?.snapshot.draft === '') shell.setDraft(text)
-      },
-      () => {
+    shell?.commitSend(imageIds)
+    void this.conversation().sendSession(session, text, imageIds, mode).catch(() => {
+      if (this.shells.get(session.sessionId) === shell) {
+        shell?.restoreImages(imageIds)
        if (shell?.snapshot.draft === '') shell.setDraft(text)
-      },
-    )
+        return
+      }
+      const conversation = this.rootCtx.get('conversation') as ConversationAttachmentFace | undefined
+      for (const id of imageIds) conversation?.releaseDraftImage(id)
+    })
  }

  /**
@@ -186,4 +206,10 @@ export class InputHub implements InputService {
    if (sessions === undefined) throw new Error('conversation.input: sessions service unavailable')
    return sessions
  }
+
+  private conversation(): ConversationAttachmentFace {
+    const conversation = this.rootCtx.get('conversation') as ConversationAttachmentFace | undefined
+    if (conversation === undefined) throw new Error('conversation.input: conversation service unavailable')
+    return conversation
+  }
 }
--- a/packages/client/ui-conversation/src/client/input/machine.ts
+++ b/packages/client/ui-conversation/src/client/input/machine.ts
@@ -133,6 +133,7 @@ export class InputMachine {
    const c = this.claim
    return {
      draft: this.draft,
+      imageIds: [],
      draftRev: this.draftRev,
      phase: this.phase,
      ...(c ? { claim: { token: c.token, ...(c.hint !== undefined ? { hint: c.hint } : {}) } } : {}),
--- a/packages/client/ui-conversation/src/client/locales.ts
+++ b/packages/client/ui-conversation/src/client/locales.ts
@@ -25,6 +25,20 @@ export const zh = {
  'input.send': '发送消息',
  'placeholder.steerQueue': 'Cmd/Ctrl+Enter 插话发送全部排队消息',
  'input.accessMode': '访问模式，当前：{name}',
+  'image.dropHint': '松开以添加图片',
+  'image.pending': '待发送图片',
+  'image.openOriginal': '双击查看原图',
+  'image.openOriginalLabel': '{label}，双击查看原图',
+  'image.remove': '移除图片 {name}',
+  'image.original': '原图',
+  'image.label': '图片',
+  'image.loadFailed': '图片加载失败，点击重试',
+  'image.loading': '图片加载中…',
+  'image.preview': '原图预览',
+  'image.closePreview': '关闭原图预览',
+  'image.serviceUnavailable': '图片读取服务不可用',
+  'image.unsupportedType': '不支持的图片格式：{type}',
+  'image.unknownType': '未知格式',
  'context.aria': '上下文已用 {percent}',
  'context.used': '上下文已用',
  'context.system': '系统提示词',
@@ -80,7 +94,6 @@ export const zh = {
  'message.context.relay.from': '来自会话 {session}',
  'message.context.recall.counts': '保留 {retained} 条 · 省略 {omitted} 条',
  'message.context.recall.truncated': '已截断',
-  'message.steering': '插话',
  'message.compaction': '上下文已压缩',
  'message.compaction.running': '正在压缩…',
  'message.compaction.completed': '已压缩 {items} 条历史记录（约 {tokens} tokens）',
@@ -169,6 +182,20 @@ export const en = {
  'input.send': 'Send message',
  'placeholder.steerQueue': 'Cmd/Ctrl+Enter steers all queued messages',
  'input.accessMode': 'Access mode, current: {name}',
+  'image.dropHint': 'Drop to add images',
+  'image.pending': 'Pending images',
+  'image.openOriginal': 'Double-click to view original',
+  'image.openOriginalLabel': '{label}, double-click to view original',
+  'image.remove': 'Remove image {name}',
+  'image.original': 'Original image',
+  'image.label': 'Image',
+  'image.loadFailed': 'Image failed to load; click to retry',
+  'image.loading': 'Loading image…',
+  'image.preview': 'Original image preview',
+  'image.closePreview': 'Close original image preview',
+  'image.serviceUnavailable': 'Image loading service unavailable',
+  'image.unsupportedType': 'Unsupported image format: {type}',
+  'image.unknownType': 'unknown format',
  'context.aria': '{percent} of context used',
  'context.used': 'of context used',
  'context.system': 'System prompt',
@@ -224,7 +251,6 @@ export const en = {
  'message.context.relay.from': 'From session {session}',
  'message.context.recall.counts': '{retained} kept · {omitted} omitted',
  'message.context.recall.truncated': 'truncated',
-  'message.steering': 'Interjection',
  'message.compaction': 'Context compacted',
  'message.compaction.running': 'Compacting context…',
  'message.compaction.completed': 'Compacted {items} history items (~{tokens} tokens)',
--- a/packages/client/ui-conversation/src/client/service.ts
+++ b/packages/client/ui-conversation/src/client/service.ts
@@ -13,9 +13,12 @@ import type { Context } from 'cordis'
 // error, so scope resolution goes through the sessions service (scopeOf
 // method) instead of the standalone helper.
 import type { ISessions, SessionFace, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ImageAttachmentRef, ImageMediaType } from '@deepseek-ai/dsh-attachment'
+import type { ComposerAttachment } from './contract/slots.ts'
 import type { QueueAction, QueueItemId } from './contract/queue.ts'
 import type { ComposerBlocks } from './input/blocks.ts'
-import type { InputService } from './input/contract.ts'
+import type { DraftAttachmentId, InputService } from './input/contract.ts'
+import type { InputSubmitMode } from './contract/composer-submission.ts'

 /**
 * The outward conversation face (`ctx.conversation`): the scope-addressed
@@ -55,12 +58,46 @@ export interface IConversation {
  loadOlder(): Promise<void>
 }

+/** Create one browser-only draft descriptor; only its id enters input state. */
+function browserDraftAttachment(file: File): ComposerAttachment {
+  return {
+    kind: 'image',
+    id: crypto.randomUUID() as DraftAttachmentId,
+    previewUrl: URL.createObjectURL(file),
+    file,
+  }
+}
+
+interface ImageUrlEntry {
+  readonly sessionId: SessionId
+  readonly generation: number
+  readonly pending: Promise<string>
+}
+
+/** Unsupported browser-declared image type, localized by the UI boundary. */
+export class UnsupportedImageMediaTypeError extends Error {
+  /** Browser-declared MIME value, possibly empty. */
+  readonly mediaType: string
+
+  /** @param mediaType - Browser-declared MIME value, possibly empty. */
+  constructor(mediaType: string) {
+    super(`unsupported image media type: ${mediaType || '(empty)'}`)
+    this.name = 'UnsupportedImageMediaTypeError'
+    this.mediaType = mediaType
+  }
+}
+
 /** Scope-addressed conversation service (root singleton, provided as `conversation`). */
 export class ConversationService extends Service implements IConversation {
  /** The per-session input machine registry (InputService face). */
  readonly input: InputService
  /** The per-session composer-block registry. */
  readonly blocks: ComposerBlocks
+  private readonly draftAttachments = new Map<DraftAttachmentId, ComposerAttachment>()
+  private readonly imageUrls = new Map<string, ImageUrlEntry>()
+  private readonly imageGenerations = new Map<SessionId, number>()
+  private readonly createdImageUrls = new Set<string>()
+  private disposed = false

  /**
   * @param ctx - owning root context (the plugin apply context; the service
@@ -73,6 +110,14 @@ export class ConversationService extends Service implements IConversation {
    super(ctx, 'conversation')
    this.input = config.input
    this.blocks = config.blocks
+    ctx.effect(() => () => {
+      this.disposed = true
+      for (const url of this.createdImageUrls) revokePreview(url)
+      this.createdImageUrls.clear()
+      this.draftAttachments.clear()
+      this.imageUrls.clear()
+      this.imageGenerations.clear()
+    }, 'conversation attachment URL cache')
  }

  /**
@@ -87,6 +132,136 @@ export class ConversationService extends Service implements IConversation {
    if (!result.ok) throw new Error(`conversation.send failed: ${result.error.code}: ${result.error.message}`)
  }

+  /**
+   * Submit ordered draft images with text through one host admission.
+   * @param session - target session.
+   * @param text - serialized prompt text.
+   * @param imageIds - ordered draft-local attachment ids.
+   * @param mode - queue or steer delivery selected by composer policy.
+   */
+  async sendSession(
+    session: SessionFace,
+    text: string,
+    imageIds: readonly DraftAttachmentId[],
+    mode: InputSubmitMode,
+  ): Promise<void> {
+    const attachments = this.draftImages(imageIds)
+    if (attachments.length !== imageIds.length) {
+      throw new Error('conversation.sendSession: one or more draft images are no longer available')
+    }
+    const uploaded = await this.serializeImages(attachments.map(attachment => attachment.file))
+    const content = [...uploaded, ...(text === '' ? [] : [{ type: 'text' as const, text }])]
+    const result = await session.prompt(content, mode)
+    if (!result.ok) throw new Error(`conversation.send failed: ${result.error.code}: ${result.error.message}`)
+    this.releaseDraftImages(attachments)
+  }
+
+  /**
+   * Create runtime-only draft images and their object URLs.
+   * @param files - browser files to register after MIME validation.
+   * @returns ordered draft descriptors.
+   */
+  createDraftImages(files: readonly File[]): readonly ComposerAttachment[] {
+    for (const file of files) imageMediaType(file.type)
+    return files.map((file) => {
+      const attachment = browserDraftAttachment(file)
+      this.draftAttachments.set(attachment.id, attachment)
+      this.createdImageUrls.add(attachment.previewUrl)
+      return attachment
+    })
+  }
+
+  /**
+   * Resolve ordered input-state ids to runtime-owned draft images.
+   * @param ids - draft attachment ids.
+   * @returns descriptors that remain live, in requested order.
+   */
+  draftImages(ids: readonly DraftAttachmentId[]): readonly ComposerAttachment[] {
+    const attachments: ComposerAttachment[] = []
+    for (const id of ids) {
+      const attachment = this.draftAttachments.get(id)
+      if (attachment !== undefined) attachments.push(attachment)
+    }
+    return attachments
+  }
+
+  /**
+   * Release one browser-owned draft image and preview URL.
+   * @param id - draft attachment id.
+   */
+  releaseDraftImage(id: DraftAttachmentId): void {
+    const attachment = this.draftAttachments.get(id)
+    if (attachment === undefined) return
+    this.draftAttachments.delete(id)
+    this.createdImageUrls.delete(attachment.previewUrl)
+    revokePreview(attachment.previewUrl)
+  }
+
+  /**
+   * Release a set of browser-owned draft images.
+   * @param attachments - descriptors to release.
+   */
+  releaseDraftImages(attachments: readonly ComposerAttachment[]): void {
+    for (const attachment of attachments) this.releaseDraftImage(attachment.id)
+  }
+
+  /**
+   * Resolve and cache one session-authorized historical image URL.
+   * @param sessionId - owning session authorization scope.
+   * @param attachment - durable image reference.
+   * @returns browser URL valid until its rendered session is released.
+   */
+  resolveImage(sessionId: SessionId, attachment: ImageAttachmentRef): Promise<string> {
+    if (this.disposed) return Promise.reject(new Error('conversation.resolveImage: service is disposed'))
+    const key = `${sessionId}:${attachment.attachmentId}`
+    const cached = this.imageUrls.get(key)
+    if (cached !== undefined) return cached.pending
+    const generation = this.imageGenerations.get(sessionId) ?? 0
+    const session = this.requireSessions().binding(sessionId)?.session
+    if (session === undefined) {
+      return Promise.reject(new Error(`conversation.resolveImage: unknown session "${sessionId}"`))
+    }
+    const pending = session.readAttachment(attachment.attachmentId)
+      .then((result) => {
+        if (!result.ok) throw new Error(`${result.error.code}: ${result.error.message}`)
+        if (this.disposed) throw new Error('conversation.resolveImage: service was disposed before loading completed')
+        if ((this.imageGenerations.get(sessionId) ?? 0) !== generation) {
+          throw new Error('historical image scope was released before loading completed')
+        }
+        if (typeof URL.createObjectURL !== 'function') {
+          return `data:${result.value.attachment.mediaType};base64,${bytesToBase64(result.value.data)}`
+        }
+        const bytes = Uint8Array.from(result.value.data)
+        const url = URL.createObjectURL(new Blob([bytes.buffer], { type: result.value.attachment.mediaType }))
+        this.createdImageUrls.add(url)
+        return url
+      })
+      .catch((error: unknown) => {
+        if (this.imageUrls.get(key)?.generation === generation) this.imageUrls.delete(key)
+        throw error
+      })
+    this.imageUrls.set(key, { sessionId, generation, pending })
+    return pending
+  }
+
+  /**
+   * Release every historical image URL owned by one rendered session.
+   * @param sessionId - rendered session scope.
+   */
+  releaseSessionImages(sessionId: SessionId): void {
+    this.imageGenerations.set(sessionId, (this.imageGenerations.get(sessionId) ?? 0) + 1)
+    for (const [key, entry] of this.imageUrls) {
+      if (entry.sessionId !== sessionId) continue
+      this.imageUrls.delete(key)
+      void entry.pending.then((url) => {
+        if (!this.createdImageUrls.delete(url)) return
+        revokePreview(url)
+      }, () => {
+        // A failed or invalidated load owns no object URL.
+      })
+    }
+  }
+
  /** Apply one operation to a pending queue occurrence. */
  async updateQueue(itemId: QueueItemId, action: QueueAction): Promise<void> {
    const session = this.scopedSession('updateQueue')
@@ -136,4 +311,39 @@ export class ConversationService extends Service implements IConversation {
    if (sessions === undefined) throw new Error('conversation: sessions service unavailable')
    return sessions
  }
+
+  /** Convert browser files to canonical base64 prompt parts. */
+  private serializeImages(images: readonly File[]): Promise<Parameters<SessionFace['prompt']>[0]> {
+    return Promise.all(images.map(async file => ({
+      type: 'image' as const,
+      mediaType: imageMediaType(file.type),
+      data: bytesToBase64(new Uint8Array(await file.arrayBuffer())),
+      ...(file.name === '' ? {} : { name: file.name }),
+    })))
+  }
+}
+
+function imageMediaType(value: string): ImageMediaType {
+  switch (value) {
+    case 'image/png':
+    case 'image/jpeg':
+    case 'image/webp':
+    case 'image/gif':
+      return value
+    default:
+      throw new UnsupportedImageMediaTypeError(value)
+  }
+}
+
+function bytesToBase64(data: Uint8Array): string {
+  let binary = ''
+  const chunk = 0x8000
+  for (let offset = 0; offset < data.length; offset += chunk) {
+    binary += String.fromCharCode(...data.subarray(offset, offset + chunk))
+  }
+  return btoa(binary)
+}
+
+function revokePreview(url: string): void {
+  if (url.startsWith('blob:')) URL.revokeObjectURL(url)
 }
--- a/packages/client/ui-conversation/src/client/skeleton/ConversationSession.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/ConversationSession.tsx
@@ -121,8 +121,8 @@ export function ConversationSessionHeader({
 * @returns the active view area, or null while the Session remains blank.
 */
 export function ConversationSession({
-  useSession, useInput, inputActions, useStore, actions,
-  renderSlot, views, bindDraftMirror,
+  sessionId, useSession, useInput, inputActions, useStore, actions,
+  renderSlot, views, bindDraftMirror, releaseSessionImages,
 }: ConversationSessionProps) {
  useSyncExternalStore(views.subscribe, views.version)
  const tabs = views.list()
@@ -143,6 +143,10 @@ export function ConversationSession({
    // the machine mirror, not this seed effect.
  }, [inputActions])

+  useEffect(() => () => {
+    releaseSessionImages(sessionId)
+  }, [releaseSessionImages, sessionId])
+
  if (blank && composerPhase === 'blank') return null
  return (
    <div className={css.viewArea}>
--- a/packages/client/ui-conversation/src/client/skeleton/ImageLightbox.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/ImageLightbox.module.css
@@ -0,0 +1,34 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 40px;
+  background: color-mix(in srgb, var(--dsw-alias-label-primary) 74%, transparent);
+}
+
+.image {
+  max-width: min(100%, 1600px);
+  max-height: calc(100vh - 80px);
+  object-fit: contain;
+  border-radius: 12px;
+  background: var(--dsw-specific-input-major);
+  box-shadow: var(--dsw-shadow-lv3);
+}
+
+.close {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 999px;
+  background: var(--dsw-specific-input-major);
+  color: var(--dsw-alias-label-primary);
+  font-size: 24px;
+  cursor: pointer;
+}
--- a/packages/client/ui-conversation/src/client/skeleton/ImageLightbox.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/ImageLightbox.tsx
@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
+import css from './ImageLightbox.module.css'
+
+/** Document-level original-image preview opened by an explicit double-click. */
+export function ImageLightbox({ src, alt, onClose, t }: {
+  src: string
+  alt: string
+  onClose: () => void
+  t: ChatViewSlotProps['t']
+}) {
+  const closeRef = useRef<HTMLButtonElement | null>(null)
+  const restoreRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null
+    closeRef.current?.focus()
+    const onKeyDown = (event: globalThis.KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      restoreRef.current?.focus()
+    }
+  }, [onClose])
+
+  return (
+    <div
+      className={css.backdrop}
+      role="dialog"
+      aria-modal="true"
+      aria-label={t('image.preview')}
+      onMouseDown={(event) => { if (event.target === event.currentTarget) onClose() }}
+    >
+      <img className={css.image} src={src} alt={alt} />
+      <button ref={closeRef} type="button" className={css.close} aria-label={t('image.closePreview')} onClick={onClose}>×</button>
+    </div>
+  )
+}
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
@@ -136,6 +136,25 @@
  background: var(--dsw-alias-state-business-primary);
 }

+.dragActive {
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary) 24%, transparent), var(--dsw-shadow-lv2);
+}
+
+.dropHint {
+  position: absolute;
+  z-index: 2;
+  inset: 4px;
+  display: grid;
+  place-items: center;
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--dsw-specific-input-major) 88%, var(--dsw-alias-state-business-primary));
+  color: var(--dsw-alias-state-business-primary);
+  font-size: 14px;
+  font-weight: 600;
+  pointer-events: none;
+}
+
 .accessory {
  display: flex;
  align-items: center;
@@ -143,6 +162,57 @@
  padding: 10px 12px 0;
 }

+.attachments {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px 12px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.attachment {
+  position: relative;
+  flex: 0 0 72px;
+  width: 72px;
+  height: 72px;
+}
+
+.thumbnail {
+  width: 72px;
+  height: 72px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 12px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  cursor: zoom-in;
+}
+
+.thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--dsw-specific-input-major);
+  border-radius: 999px;
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-specific-input-major);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+
 /* Floating overlay anchor (menu / popupSelect shell): entries position
   themselves against the card (bottom: 100% + gap); closed entries render null. */
 .overlayAnchor {
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
@@ -6,8 +6,8 @@
 * region-slot content) ride the owner props. Session facts
 * (running/removed/promptError) are self-selected via useSession. */

-import { useEffect, useRef } from 'react'
-import type { ChangeEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { ChangeEvent, DragEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
 import clsx from 'clsx'
 import { IconPlusOutline16, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
 // Type-only: the `plan` projection key merge (the TodoDock posture — the
@@ -16,10 +16,11 @@ import type {} from '@deepseek-ai/dsh-plan-mode/client'
 // Type-only: the `goal` projection key merge (hint disambiguation).
 import type {} from '@deepseek-ai/dsh-goal/client'
 import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
-import type { ComposerBarProps } from '../contract/slots.ts'
+import type { ComposerAttachment, ComposerBarProps } from '../contract/slots.ts'
 import { deriveDecorations } from '../input/decorations.ts'
 import type { DraftDecorations } from '../input/decorations.ts'
 import { ContextMeter } from './ContextMeter.tsx'
+import { ImageLightbox } from './ImageLightbox.tsx'
 import { PermissionSelect } from './PermissionSelect.tsx'
 import css from './InputBar.module.css'

@@ -35,7 +36,8 @@ export interface InputBarError {
 export type InputBarProps = ComposerBarProps

 export function InputBar({
-  useSession, useInput, inputActions, keyboard, resolveSubmitMode, toggleCommandMenu, stop, command, t,
+  useSession, useInput, inputActions, keyboard, addImages, removeImage, draftImages,
+  resolveSubmitMode, toggleCommandMenu, stop, command, t,
  renderSlot, useNotices, useLexicon, useMenuLauncher,
  useProjection, sessionId, variant, disabled: inert = false, blocked,
  workspacePickerOpen = false, onRequestWorkspace,
@@ -64,8 +66,16 @@ export function InputBar({
  // current; the bar renders the same DOM inert instead of a parallel tree.
  const live = input !== undefined && keyboard !== undefined && inputActions !== undefined
  const draft = input?.draft ?? ''
-  const empty = draft.trim() === ''
+  const attachments = useMemo(
+    () => input === undefined || draftImages === undefined ? [] : draftImages(input.imageIds),
+    [draftImages, input?.imageIds],
+  )
+  const empty = draft.trim() === '' && attachments.length === 0
+  const [preview, setPreview] = useState<ComposerAttachment | null>(null)
+  const [dragActive, setDragActive] = useState(false)
+  const [dropError, setDropError] = useState<string | null>(null)
  const inputRef = useRef<HTMLTextAreaElement | null>(null)
+  const dragDepthRef = useRef(0)
  const scrollRef = useRef<HTMLDivElement | null>(null)
  const mirrorRef = useRef<HTMLDivElement | null>(null)
  // IME guard: composition Enter picks a candidate, it must not send. The ref outlives renders;
@@ -109,6 +119,17 @@ export function InputBar({
  const canSteerQueue = !locked && !machineBusy && !commandMenuOpen && empty && running && subagent === null
    && input.queue.some(row => row.placement === 'queued')

+  useEffect(() => {
+    if (input === undefined || inputActions === undefined) return
+    if (attachments.length !== input.imageIds.length) {
+      inputActions.pruneImages(attachments.map(attachment => attachment.id))
+    }
+  }, [attachments, input?.imageIds, inputActions])
+
+  useEffect(() => {
+    if (preview !== null && !attachments.some(attachment => attachment.id === preview.id)) setPreview(null)
+  }, [attachments, preview])
+
  // Scroll the draft scrollport the minimum that brings `caret` into view — the
  // browser's own behavior for typing, performed for the paths where it does
  // not act.
@@ -344,8 +365,16 @@ export function InputBar({
  const onPaste = (e: React.ClipboardEvent<HTMLTextAreaElement>): void => {
    if (keyboard === undefined) return // absent machine: no draft can accept a paste
    if (machineBusy || locked) return
+    const files = Array.from(e.clipboardData.items)
+      .filter(item => item.kind === 'file')
+      .map(item => item.getAsFile())
+      .filter((file): file is File => file !== null)
+    if (files.length > 0 && addImages !== undefined) setDropError(addImages(files))
    const text = e.clipboardData.getData('text/plain')
-    if (text === '') return
+    if (text === '') {
+      if (files.length > 0) e.preventDefault()
+      return
+    }
    e.preventDefault()
    const el = e.currentTarget
    const sel = selectionOf(el)
@@ -359,6 +388,39 @@ export function InputBar({
    keyboard.track(keyboard.snapshot.draft, caret)
  }

+  const onDragEnter = (event: DragEvent<HTMLDivElement>): void => {
+    if (!event.dataTransfer.types.includes('Files')) return
+    event.preventDefault()
+    if (locked || machineBusy || addImages === undefined) return
+    dragDepthRef.current += 1
+    setDropError(null)
+    setDragActive(true)
+  }
+
+  const onDragOver = (event: DragEvent<HTMLDivElement>): void => {
+    if (!event.dataTransfer.types.includes('Files')) return
+    event.preventDefault()
+    event.dataTransfer.dropEffect = locked || machineBusy || addImages === undefined ? 'none' : 'copy'
+  }
+
+  const onDragLeave = (event: DragEvent<HTMLDivElement>): void => {
+    if (!event.dataTransfer.types.includes('Files') || locked || machineBusy) return
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1)
+    if (dragDepthRef.current === 0) setDragActive(false)
+  }
+
+  const onDrop = (event: DragEvent<HTMLDivElement>): void => {
+    if (!event.dataTransfer.types.includes('Files')) return
+    event.preventDefault()
+    dragDepthRef.current = 0
+    setDragActive(false)
+    if (locked || machineBusy || addImages === undefined) return
+    const dropped = [...event.dataTransfer.files]
+    if (dropped.length > 0) setDropError(addImages(dropped))
+  }
+
+  const closePreview = useCallback(() => { setPreview(null) }, [])
+
  const onSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>): void => {
    // Any caret/selection gesture ends a live paste attempt (the machine
    // cannot observe DOM selection). Cheap no-op when none is live.
@@ -496,14 +558,45 @@ export function InputBar({
          their pointer events), so the WHOLE capsule is the pick target.
          pointerdown stops here so the Menu's outside-close cannot race the
          click's reopen (close-then-open flickers the chip's open echo). */}
+      {dropError !== null && <div className={css.error} role="alert">{dropError}</div>}
      <div
-        className={clsx(css.card, workspaceTrigger && css.cardWorkspaceTrigger)}
+        className={clsx(css.card, workspaceTrigger && css.cardWorkspaceTrigger, dragActive && css.dragActive)}
        data-composer-card
        onClick={workspaceTrigger ? onRequestWorkspace : undefined}
        onPointerDown={workspaceTrigger ? (e) => { e.stopPropagation() } : undefined}
+        onDragEnter={onDragEnter}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
      >
+        {dragActive && <div className={css.dropHint} role="status">{t('image.dropHint')}</div>}
        {overlay !== undefined && <div className={css.overlayAnchor}>{overlay}</div>}
        {accessory !== undefined && <div className={css.accessory}>{accessory}</div>}
+        {attachments.length > 0 && (
+          <div className={css.attachments} role="group" aria-label={t('image.pending')}>
+            {attachments.map(attachment => (
+              <div key={attachment.id} className={css.attachment}>
+                <button
+                  type="button"
+                  className={css.thumbnail}
+                  title={t('image.openOriginal')}
+                  onDoubleClick={() => { setPreview(attachment) }}
+                >
+                  <img src={attachment.previewUrl} alt={attachment.file.name || t('image.pending')} />
+                </button>
+                <button
+                  type="button"
+                  className={css.remove}
+                  aria-label={t('image.remove', { name: attachment.file.name })}
+                  onClick={() => {
+                    setDropError(null)
+                    removeImage?.(attachment.id)
+                  }}
+                >×</button>
+              </div>
+            ))}
+          </div>
+        )}
        {/* One scrollport, two text layers. The hidden mirror renders draft+'\n' and stretches the
            stack to the draft's FULL height (counting rows by '\n' cannot see soft wraps); the
            absolutely-positioned backdrop and textarea ride that height, and .scroll — capped at 14
@@ -535,7 +628,10 @@ export function InputBar({
                    ? t('placeholder.steerQueue')
                    : planActive ? t('placeholder.plan') : t('placeholder.default'))}
              rows={2}
-              onChange={onChange}
+              onChange={(event) => {
+                setDropError(null)
+                onChange(event)
+              }}
              onKeyDown={onKeyDown}
              onSelect={onSelect}
              onCopy={(e) => { onCopyOrCut(e, false) }}
@@ -612,6 +708,14 @@ export function InputBar({
          </div>
        </div>
      </div>
+      {preview !== null && (
+        <ImageLightbox
+          src={preview.previewUrl}
+          alt={preview.file.name || t('image.original')}
+          onClose={closePreview}
+          t={t}
+        />
+      )}
      {footer}
    </div>
  )
--- a/packages/client/ui-conversation/src/client/stores.ts
+++ b/packages/client/ui-conversation/src/client/stores.ts
@@ -9,8 +9,6 @@ import type { CallId, ChatStoreState, SelectionTarget } from './contract/views.t
 type ChatActions = {
  select: (draft: ChatStoreState, target: SelectionTarget | null) => void
  setDraft: (draft: ChatStoreState, text: string) => void
-  clearDraft: (draft: ChatStoreState) => void
-  restoreDraft: (draft: ChatStoreState, text: string) => void
  setView: (draft: ChatStoreState, view: string) => void
  setInspect: (draft: ChatStoreState, target: { callId: CallId } | null) => void
 }
@@ -21,15 +19,14 @@ type ChatActions = {
 */
 export function createChatStore(): EngineStoreHandle<ChatStoreState, ChatActions> {
  return defineStore({
+    // Anchored to the contract shape: consumers read the store through
+    // PropsStore<ChatStore>'s SnapshotSelectorHook<ChatStoreState>, so init
+    // and the contract cannot drift.
    init: (): ChatStoreState => ({ selection: null, draft: '', view: null, inspect: null }),
    persist: 'dsh.conversation.chat',
    actions: {
      select: (d, target: SelectionTarget | null) => { d.selection = target },
      setDraft: (d, text: string) => { d.draft = text },
-      clearDraft: (d) => { d.draft = '' },
-      // Optimistic-send failure restore: only when the user typed nothing new
-      // since the clear (send choreography lives in the inject factory).
-      restoreDraft: (d, text: string) => { if (d.draft === '') d.draft = text },
      setView: (d, view: string) => { d.view = view },
      setInspect: (d, target: { callId: CallId } | null) => { d.inspect = target },
    },
--- a/packages/client/ui-conversation/tests/chat-branch-tails.spec.tsx
+++ b/packages/client/ui-conversation/tests/chat-branch-tails.spec.tsx
@@ -229,7 +229,7 @@ describe('MessageItem arms', () => {
    expect(vi.getTimerCount()).toBe(0)
  })

-  it('consumed steering is captioned as an interjection and keeps copy without branch', () => {
+  it('consumed steering renders as a plain user bubble and keeps copy without branch', () => {
    const writeText = vi.fn().mockResolvedValue(undefined)
    Object.defineProperty(navigator, 'clipboard', {
      configurable: true,
@@ -242,7 +242,7 @@ describe('MessageItem arms', () => {
      } as never}
      />,
    )
-    expect(view.getByText('插话')).toBeTruthy()
+    expect(view.queryByText('插话')).toBeNull()
    expect(view.getByText('steer!')).toBeTruthy()
    expect(view.getByText(/附加内容块/)).toBeTruthy()
    fireEvent.click(view.getByRole('button', { name: '复制' }))
--- a/packages/client/ui-conversation/tests/chat-store.spec.ts
+++ b/packages/client/ui-conversation/tests/chat-store.spec.ts
@@ -25,8 +25,6 @@ describe('createChatStore', () => {

    store.actions.setDraft('hello')
    expect(store.store.getSnapshot().draft).toBe('hello')
-    store.actions.clearDraft()
-    expect(store.store.getSnapshot().draft).toBe('')

    store.actions.setView('chat')
    expect(store.store.getSnapshot().view).toBe('chat')
@@ -37,17 +35,6 @@ describe('createChatStore', () => {
    expect(store.store.getSnapshot().inspect).toBeNull()
  })

-  it('restoreDraft only fills an empty draft (optimistic-send rollback contract)', () => {
-    const store = createChatStore().create()
-    // Rollback path: draft was cleared by send, nothing typed since.
-    store.actions.restoreDraft('failed text')
-    expect(store.store.getSnapshot().draft).toBe('failed text')
-    // The user typed something new before the failure landed: keep theirs.
-    store.actions.setDraft('newer input')
-    store.actions.restoreDraft('stale text')
-    expect(store.store.getSnapshot().draft).toBe('newer input')
-  })
-
  it('persists per scope key and rehydrates a fresh instance', () => {
    const handle = createChatStore()
    const s1 = handle.create('sess-1')
--- a/packages/client/ui-conversation/tests/chat-view.spec.tsx
+++ b/packages/client/ui-conversation/tests/chat-view.spec.tsx
@@ -261,7 +261,13 @@ function makeHarness(init?: Partial<ConversationSnapshot>) {
    useWorkspaces: emptyWorkspaces(),
    useProjection: (() => undefined),
    useInput: (() => { throw new Error('unused') }),
-    inputActions: { setDraft: () => {}, submit: () => {} },
+    inputActions: {
+      setDraft: () => {},
+      addImages: () => true,
+      removeImage: () => {},
+      pruneImages: () => {},
+      submit: () => {},
+    },
    useStore: bindSnapshotSelector(chat),
    actions: chat.actions,
    renderSlot,
@@ -269,6 +275,7 @@ function makeHarness(init?: Partial<ConversationSnapshot>) {
    openDetails,
    openFile,
    loadOlder,
+    loadImage: vi.fn(() => Promise.reject(new Error('not used'))),
    inspectCall,
    chatScroll,
    forkAt,
@@ -459,9 +466,6 @@ describe('ChatView', () => {
    expect(view.queryByText('later')).toBeNull()
    const pendingBubble = view.getByText('interrupt now').closest('[data-pending-steering]')
    expect(pendingBubble).not.toBeNull()
-    // Pending and durable steering carry the same interjection caption, so the
-    // hand-off does not change what the row says it is.
-    expect(within(pendingBubble as HTMLElement).getByText('插话')).toBeTruthy()
    fireEvent.click(within(pendingBubble as HTMLElement).getByRole('button', { name: '复制' }))
    expect(writeText).toHaveBeenCalledWith('interrupt now')
    expect(within(pendingBubble as HTMLElement).queryByRole('button', { name: '在新对话中分支' })).toBeNull()
@@ -483,7 +487,6 @@ describe('ChatView', () => {
    })
    expect(view.getAllByText('interrupt now')).toHaveLength(1)
    expect(view.container.querySelector('[data-pending-steering]')).toBeNull()
-    expect(view.getAllByText('插话')).toHaveLength(1)
    // Only the durable steering bubble: the turn is still running, so its
    // assistant narration owns no footer yet, and a steering bubble never
    // carries a branch action.
--- a/packages/client/ui-conversation/tests/gate-branch-tails.spec.tsx
+++ b/packages/client/ui-conversation/tests/gate-branch-tails.spec.tsx
@@ -122,7 +122,13 @@ describe('render branch tails', () => {
        useWorkspaces={bindSnapshotSelector(emptyWorkspaces)}
        useProjection={(() => undefined)}
        useInput={(() => { throw new Error('unused') })}
-        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        inputActions={{
+          setDraft: () => {},
+          addImages: () => true,
+          removeImage: () => {},
+          pruneImages: () => {},
+          submit: () => {},
+        }}
        useStore={bindSnapshotSelector(chat)}
        actions={chat.actions}
        closeDetails={vi.fn()}
@@ -173,7 +179,13 @@ describe('render branch tails', () => {
        useWorkspaces={bindSnapshotSelector(emptyWorkspaces)}
        useProjection={(() => undefined)}
        useInput={(() => { throw new Error('unused') })}
-        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        inputActions={{
+          setDraft: () => {},
+          addImages: () => true,
+          removeImage: () => {},
+          pruneImages: () => {},
+          submit: () => {},
+        }}
        useStore={bindSnapshotSelector(chat)}
        actions={chat.actions}
        closeDetails={vi.fn()}
--- a/packages/client/ui-conversation/tests/input-bar.spec.tsx
+++ b/packages/client/ui-conversation/tests/input-bar.spec.tsx
@@ -12,6 +12,8 @@ import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
 import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
 import type { ClientContext, ConversationSnapshot, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import { SessionInputShell } from '../src/client/input/facade.ts'
+import type { ComposerAttachment } from '../src/client/contract/slots.ts'
+import type { DraftAttachmentId } from '../src/client/input/contract.ts'
 import { InputBar } from '../src/client/skeleton/InputBar.tsx'
 import type { InputBarProps } from '../src/client/skeleton/InputBar.tsx'
 import { zh } from '../src/client/locales.ts'
@@ -72,6 +74,8 @@ interface BenchOptions {
  overlay?: React.ReactNode
  leftItems?: React.ReactNode
  rightItems?: React.ReactNode
+  attachments?: readonly ComposerAttachment[]
+  addImages?: (files: readonly File[]) => string | null
  commandMenuOpen?: boolean
  busyEnter?: 'queue' | 'steer'
  toggleCommandMenu?: (selection: { start: number; end: number }) => void
@@ -116,7 +120,9 @@ function bench(over?: BenchOptions) {
      : {}),
  })
  if (over?.draft !== undefined && over.draft !== '') shell.setDraft(over.draft)
+  if (over?.attachments !== undefined) shell.addImages(over.attachments.map(attachment => attachment.id))
  const stop = vi.fn()
+  const removeImage = vi.fn((id: DraftAttachmentId) => { shell.removeImage(id) })
  const menuLauncher = createSnapshotStore<string | null>(over?.commandMenuOpen === true ? 'command' : null)
  const slotCalls: { key: string; owner: unknown }[] = []
  const renderSlot = ((key: string, owner: object) => {
@@ -142,6 +148,12 @@ function bench(over?: BenchOptions) {
    useInput: bindSnapshotSelector(shell.state),
    inputActions: shell.actions,
    keyboard: shell,
+    addImages: over?.addImages ?? (() => null),
+    removeImage,
+    draftImages: ids => ids.flatMap((id) => {
+      const attachment = over?.attachments?.find(candidate => candidate.id === id)
+      return attachment === undefined ? [] : [attachment]
+    }),
    resolveSubmitMode: (running, gesture, steeringAvailable) => {
      if (!running || !steeringAvailable) return 'queue'
      const preferred = over?.busyEnter ?? 'queue'
@@ -174,11 +186,66 @@ function bench(over?: BenchOptions) {
  )!
  const interruptButton = view.container.querySelector<HTMLButtonElement>('button[aria-label="停止生成"]')
  return {
-    view, textarea, button, interruptButton, props, sink, shell, wiring: shell, session, stop, slotCalls, menuLauncher,
+    view, textarea, button, interruptButton, props, sink, shell, wiring: shell, session, stop, removeImage, slotCalls,
+    menuLauncher,
    steerQueue: over?.steerQueue,
  }
 }

+describe('image draft rail', () => {
+  it('collects clipboard files while preserving text from a mixed paste', () => {
+    const addImages = vi.fn(() => null)
+    const { textarea, shell } = bench({ addImages })
+    const image = new File([Uint8Array.of(1, 2, 3)], 'pixel.png', { type: 'image/png' })
+    fireEvent.paste(textarea, {
+      clipboardData: {
+        items: [
+          { kind: 'string', type: 'text/plain', getAsFile: () => null },
+          { kind: 'file', type: 'image/png', getAsFile: () => image },
+        ],
+        getData: () => '同时粘贴的文字',
+      },
+    })
+    expect(addImages).toHaveBeenCalledWith([image])
+    expect(shell.snapshot.draft).toBe('同时粘贴的文字')
+  })
+
+  it('accepts file drops and prevents browser navigation', () => {
+    const addImages = vi.fn(() => null)
+    const { view } = bench({ addImages })
+    const card = view.container.querySelector('[class*="card"]')!
+    const image = new File([Uint8Array.of(1)], 'dropped.png', { type: 'image/png' })
+    const dataTransfer = { types: ['Files'], files: [image], dropEffect: 'none' }
+    expect(fireEvent.dragEnter(card, { dataTransfer })).toBe(false)
+    expect(view.getByRole('status').textContent).toContain('松开以添加图片')
+    expect(fireEvent.dragOver(card, { dataTransfer })).toBe(false)
+    expect(dataTransfer.dropEffect).toBe('copy')
+    expect(fireEvent.drop(card, { dataTransfer })).toBe(false)
+    expect(addImages).toHaveBeenCalledWith([image])
+  })
+
+  it('sends an image-only draft and removes its thumbnail', () => {
+    const file = new File([Uint8Array.of(1)], 'pixel.png', { type: 'image/png' })
+    const attachment = { kind: 'image' as const, id: 'draft-1' as DraftAttachmentId, file, previewUrl: 'blob:draft-1' }
+    const { view, textarea, sink, removeImage } = bench({ attachments: [attachment] })
+    expect((view.getByRole('button', { name: '发送消息' }) as HTMLButtonElement).disabled).toBe(false)
+    fireEvent.keyDown(textarea, { key: 'Enter' })
+    expect(sink).toHaveBeenCalledWith('', ['draft-1'], 'queue')
+    fireEvent.click(view.getByRole('button', { name: '移除图片 pixel.png' }))
+    expect(removeImage).toHaveBeenCalledWith('draft-1')
+  })
+
+  it('opens the original image on double-click and closes it with Escape', () => {
+    const file = new File([Uint8Array.of(1)], 'pixel.png', { type: 'image/png' })
+    const attachment = { kind: 'image' as const, id: 'draft-1' as DraftAttachmentId, file, previewUrl: 'blob:draft-1' }
+    const { view } = bench({ attachments: [attachment] })
+    fireEvent.doubleClick(view.getByTitle('双击查看原图'))
+    expect(view.getByRole('dialog', { name: '原图预览' })).toBeTruthy()
+    fireEvent.keyDown(window, { key: 'Escape' })
+    expect(view.queryByRole('dialog', { name: '原图预览' })).toBeNull()
+  })
+})
+
 describe('Enter semantics', () => {
  it('advertises the empty-draft whole-queue steering gesture when it is available', () => {
    const { textarea } = bench({ running: true, queue: [row('q-1')], steerQueue: vi.fn() })
@@ -234,7 +301,7 @@ describe('Enter semantics', () => {
  it('plain Enter submits queue mode through the machine; repeat and empty are suppressed', () => {
    const { textarea, sink } = bench({ draft: 'hello' })
    fireEvent.keyDown(textarea, { key: 'Enter' })
-    expect(sink).toHaveBeenCalledWith('hello', 'queue')
+    expect(sink).toHaveBeenCalledWith('hello', [], 'queue')
    fireEvent.keyDown(textarea, { key: 'Enter', repeat: true })
    expect(sink).toHaveBeenCalledTimes(1)
    const empty = bench({ draft: '   ' })
@@ -259,15 +326,15 @@ describe('Enter semantics', () => {
  it('Ctrl/Meta+Enter sends normally while idle and steers while running', () => {
    const idle = bench({ draft: 'hello' })
    fireEvent.keyDown(idle.textarea, { key: 'Enter', metaKey: true })
-    expect(idle.sink).toHaveBeenCalledWith('hello', 'queue')
+    expect(idle.sink).toHaveBeenCalledWith('hello', [], 'queue')

    const busyCtrl = bench({ running: true, draft: 'steer with ctrl' })
    fireEvent.keyDown(busyCtrl.textarea, { key: 'Enter', ctrlKey: true })
-    expect(busyCtrl.sink).toHaveBeenCalledWith('steer with ctrl', 'steer')
+    expect(busyCtrl.sink).toHaveBeenCalledWith('steer with ctrl', [], 'steer')

    const busyMeta = bench({ running: true, draft: 'steer with cmd' })
    fireEvent.keyDown(busyMeta.textarea, { key: 'Enter', metaKey: true })
-    expect(busyMeta.sink).toHaveBeenCalledWith('steer with cmd', 'steer')
+    expect(busyMeta.sink).toHaveBeenCalledWith('steer with cmd', [], 'steer')
  })

  it('empty-draft Cmd/Ctrl+Enter steers the whole queue instead of submitting', () => {
@@ -332,7 +399,7 @@ describe('Enter semantics', () => {
    const steerQueue = vi.fn()
    const { textarea, sink } = bench({ running: true, queue: [row('q-1')], draft: '插话', steerQueue })
    fireEvent.keyDown(textarea, { key: 'Enter', ctrlKey: true })
-    expect(sink).toHaveBeenCalledWith('插话', 'steer')
+    expect(sink).toHaveBeenCalledWith('插话', [], 'steer')
    expect(steerQueue).not.toHaveBeenCalled()
  })

@@ -380,7 +447,7 @@ describe('running and lock semantics', () => {
    expect(textarea.disabled).toBe(false)
    fireEvent.change(textarea, { target: { value: '排队消息2' } })
    fireEvent.keyDown(textarea, { key: 'Enter' })
-    expect(sink).toHaveBeenCalledWith('排队消息2', 'queue')
+    expect(sink).toHaveBeenCalledWith('排队消息2', [], 'queue')
    expect(button.getAttribute('aria-label')).toBe('停止生成')
    fireEvent.click(button)
    expect(stop).toHaveBeenCalledTimes(1)
@@ -389,17 +456,17 @@ describe('running and lock semantics', () => {
  it('running plain Enter follows the busy-state Steer preference', () => {
    const { textarea, sink } = bench({ running: true, busyEnter: 'steer', draft: '直接插话' })
    fireEvent.keyDown(textarea, { key: 'Enter' })
-    expect(sink).toHaveBeenCalledWith('直接插话', 'steer')
+    expect(sink).toHaveBeenCalledWith('直接插话', [], 'steer')
  })

  it('running Cmd/Ctrl+Enter uses the opposite of the busy-state Enter preference', () => {
    const meta = bench({ running: true, busyEnter: 'steer', draft: '排到下一轮' })
    fireEvent.keyDown(meta.textarea, { key: 'Enter', metaKey: true })
-    expect(meta.sink).toHaveBeenCalledWith('排到下一轮', 'queue')
+    expect(meta.sink).toHaveBeenCalledWith('排到下一轮', [], 'queue')

    const ctrl = bench({ running: true, busyEnter: 'steer', draft: 'also queue' })
    fireEvent.keyDown(ctrl.textarea, { key: 'Enter', ctrlKey: true })
-    expect(ctrl.sink).toHaveBeenCalledWith('also queue', 'queue')
+    expect(ctrl.sink).toHaveBeenCalledWith('also queue', [], 'queue')
  })

  it('running continuable subagent keeps Send beside an independent Stop', () => {
@@ -419,7 +486,7 @@ describe('running and lock semantics', () => {
    expect(interruptButton).not.toBeNull()
    expect(textarea.disabled).toBe(false)
    fireEvent.click(button)
-    expect(sink).toHaveBeenCalledWith('后续消息', 'queue')
+    expect(sink).toHaveBeenCalledWith('后续消息', [], 'queue')
    fireEvent.click(interruptButton!)
    expect(stop).toHaveBeenCalledTimes(1)
  })
@@ -476,11 +543,11 @@ describe('running and lock semantics', () => {
    }
    const plain = bench({ running: true, busyEnter: 'steer', draft: 'plain', subagent })
    fireEvent.keyDown(plain.textarea, { key: 'Enter' })
-    expect(plain.sink).toHaveBeenCalledWith('plain', 'queue')
+    expect(plain.sink).toHaveBeenCalledWith('plain', [], 'queue')

    const accelerated = bench({ running: true, draft: 'accelerated', subagent })
    fireEvent.keyDown(accelerated.textarea, { key: 'Enter', metaKey: true })
-    expect(accelerated.sink).toHaveBeenCalledWith('accelerated', 'queue')
+    expect(accelerated.sink).toHaveBeenCalledWith('accelerated', [], 'queue')
  })

  it('disabled (session removed) locks the textarea and chrome', () => {
@@ -493,7 +560,7 @@ describe('running and lock semantics', () => {
  it('idle primary sends and disables on empty draft', () => {
    const { button, sink } = bench({ draft: 'go' })
    fireEvent.click(button)
-    expect(sink).toHaveBeenCalledWith('go', 'queue')
+    expect(sink).toHaveBeenCalledWith('go', [], 'queue')
    const empty = bench()
    expect(empty.button.disabled).toBe(true)
  })
@@ -618,7 +685,7 @@ describe('running and lock semantics', () => {
    }
    // Pasted text lands below the fold: scroll down by exactly the overshoot.
    caretAt(500)
-    fireEvent.paste(textarea, { clipboardData: { getData: () => 'pasted' } })
+    fireEvent.paste(textarea, { clipboardData: { items: [], getData: () => 'pasted' } })
    await settle()
    expect(scroll.scrollTop).toBe(88) // 524 - 436
    // Measured on the mirror's own text, at the index the paste left the caret
@@ -627,12 +694,12 @@ describe('running and lock semantics', () => {
    expect(measured!.offset).toBe('pasted'.length)
    // A caret already inside the box does not move it.
    caretAt(200)
-    fireEvent.paste(textarea, { clipboardData: { getData: () => 'more' } })
+    fireEvent.paste(textarea, { clipboardData: { items: [], getData: () => 'more' } })
    await settle()
    expect(scroll.scrollTop).toBe(88)
    // Above the fold (a cut can leave it there): scroll back up.
    caretAt(60)
-    fireEvent.paste(textarea, { clipboardData: { getData: () => 'again' } })
+    fireEvent.paste(textarea, { clipboardData: { items: [], getData: () => 'again' } })
    await settle()
    expect(scroll.scrollTop).toBe(48) // 88 - (100 - 60)
    // A caret straight after a newline has nothing on its line to measure, so
@@ -640,7 +707,7 @@ describe('running and lock semantics', () => {
    // chromium reports no client rects at all for the collapsed position.
    mirror.style.lineHeight = '24px'
    caretAt(500)
-    fireEvent.paste(textarea, { clipboardData: { getData: () => 'block\n' } })
+    fireEvent.paste(textarea, { clipboardData: { items: [], getData: () => 'block\n' } })
    await settle()
    // The four pastes accumulate at the draft's head, so the caret is at the
    // end of what they inserted — and the measured index is the newline before it.
--- a/packages/client/ui-conversation/tests/input-matrix.spec.tsx
+++ b/packages/client/ui-conversation/tests/input-matrix.spec.tsx
@@ -48,6 +48,9 @@ function mountBar(shell: SessionInputShell, over?: { running?: boolean; disabled
    useInput: bindSnapshotSelector(shell.state),
    inputActions: shell.actions,
    keyboard: shell,
+    addImages: () => null,
+    removeImage: () => {},
+    draftImages: () => [],
    resolveSubmitMode: () => 'queue',
    toggleCommandMenu: vi.fn(),
    useNotices: bindSnapshotSelector(shell.notices),
@@ -90,7 +93,7 @@ describe('matrix row: plain', () => {
    fireEvent.change(textarea, { target: { value: '普通消息' } })
    expect(shell.snapshot.claim).toBeUndefined()
    fireEvent.keyDown(textarea, { key: 'Enter' })
-    expect(sink).toHaveBeenCalledWith('普通消息', 'queue')
+    expect(sink).toHaveBeenCalledWith('普通消息', [], 'queue')
    expect(shell.snapshot.phase).toBe('plain')
  })
 })
@@ -189,7 +192,7 @@ describe('matrix row: locked (session disabled)', () => {
    expect((textarea).disabled).toBe(false)
    fireEvent.change(textarea, { target: { value: '排队' } })
    fireEvent.keyDown(textarea, { key: 'Enter' })
-    expect(sink).toHaveBeenCalledWith('排队', 'queue')
+    expect(sink).toHaveBeenCalledWith('排队', [], 'queue')
  })
 })

--- a/packages/client/ui-conversation/tests/input-scenarios.spec.tsx
+++ b/packages/client/ui-conversation/tests/input-scenarios.spec.tsx
@@ -134,6 +134,9 @@ async function scopedBench(register?: (slash: SlashService) => void) {
    useInput: bindSnapshotSelector(shell.state),
    inputActions: shell.actions,
    keyboard: shell,
+    addImages: () => null,
+    removeImage: () => {},
+    draftImages: () => [],
    resolveSubmitMode: () => 'queue',
    toggleCommandMenu: (selection) => {
      const snapshot = shell.snapshot
@@ -237,7 +240,7 @@ describe('scenario D: execute-kind /compact', () => {
    act(() => { b2.shell.setDraft('/compact 现在') })
    fireEvent.keyDown(b2.textarea, { key: 'Enter' })
    // execute with trailing → matchEnter answers undefined → default sink.
-    await vi.waitFor(() => { expect(b2.sink).toHaveBeenCalledWith('/compact 现在', 'queue') })
+    await vi.waitFor(() => { expect(b2.sink).toHaveBeenCalledWith('/compact 现在', [], 'queue') })
    expect(b2.executed).toHaveLength(0)
  })
 })
@@ -291,7 +294,7 @@ describe('scenario I: unknown /xyz + enter', () => {
    const b = await bench()
    act(() => { b.shell.setDraft('/xyz 干点啥') })
    fireEvent.keyDown(b.textarea, { key: 'Enter' })
-    await vi.waitFor(() => { expect(b.sink).toHaveBeenCalledWith('/xyz 干点啥', 'queue') })
+    await vi.waitFor(() => { expect(b.sink).toHaveBeenCalledWith('/xyz 干点啥', [], 'queue') })
    expect(b.shell.snapshot.phase).toBe('plain')
    expect(b.execute).not.toHaveBeenCalled()
  })
--- a/packages/client/ui-conversation/tests/message-image.spec.tsx
+++ b/packages/client/ui-conversation/tests/message-image.spec.tsx
@@ -0,0 +1,81 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import { AttachmentId } from '@deepseek-ai/dsh-attachment'
+import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
+import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
+import { MessageImage } from '../src/client/chat/MessageImage.tsx'
+import { AssistantMarkdown } from '../src/client/chat/AssistantMarkdown.tsx'
+import { en, zh } from '../src/client/locales.ts'
+
+afterEach(cleanup)
+
+const t = makeTranslate(zh, commonZh)
+const enT = makeTranslate(en, commonZh)
+
+const attachment = {
+  attachmentId: AttachmentId(`sha256:${'a'.repeat(64)}`),
+  mediaType: 'image/png' as const,
+  bytes: 68,
+  width: 640,
+  height: 320,
+  name: 'history.png',
+}
+
+describe('MessageImage', () => {
+  it('loads a session-authorized URL, bounds the thumbnail, and double-clicks into the original', async () => {
+    const load = vi.fn().mockResolvedValue('blob:history')
+    const view = render(<MessageImage attachment={attachment} load={load} t={t} />)
+    const frame = view.getByRole('button', { name: 'history.png，双击查看原图' })
+    expect(frame.getAttribute('style')).toContain('width: 240px')
+    expect(frame.getAttribute('style')).toContain('height: 120px')
+    await waitFor(() => { expect(view.getByAltText('history.png')).toBeTruthy() })
+    expect(load).toHaveBeenCalledWith(attachment)
+    fireEvent.doubleClick(frame)
+    expect(view.getByRole('dialog', { name: '原图预览' })).toBeTruthy()
+    fireEvent.click(view.getByRole('button', { name: '关闭原图预览' }))
+    expect(view.queryByRole('dialog', { name: '原图预览' })).toBeNull()
+  })
+
+  it('surfaces a retry control when durable bytes cannot be read', async () => {
+    const load = vi.fn()
+      .mockRejectedValueOnce(new Error('offline'))
+      .mockResolvedValueOnce('blob:retry')
+    const view = render(<MessageImage attachment={attachment} load={load} t={t} />)
+    const retry = await view.findByRole('button', { name: '图片加载失败，点击重试' })
+    fireEvent.click(retry)
+    await waitFor(() => { expect(view.getByAltText('history.png')).toBeTruthy() })
+    expect(load).toHaveBeenCalledTimes(2)
+  })
+
+  it('renders image controls from the active English dictionary', async () => {
+    const load = vi.fn().mockResolvedValue('blob:history')
+    const view = render(<MessageImage attachment={attachment} load={load} t={enT} />)
+    const frame = view.getByRole('button', { name: 'history.png, double-click to view original' })
+    await waitFor(() => { expect(view.getByAltText('history.png')).toBeTruthy() })
+    fireEvent.doubleClick(frame)
+    expect(view.getByRole('dialog', { name: 'Original image preview' })).toBeTruthy()
+    expect(view.getByRole('button', { name: 'Close original image preview' })).toBeTruthy()
+  })
+
+  it('keeps assistant images at their original position between text blocks', async () => {
+    const view = render(
+      <AssistantMarkdown
+        t={t}
+        blocks={[
+          { kind: 'text', text: 'before' },
+          { kind: 'image', attachment },
+          { kind: 'text', text: 'after' },
+        ]}
+        streaming={false}
+        loadImage={() => Promise.resolve('blob:middle')}
+      />,
+    )
+    const image = await view.findByAltText('history.png')
+    const before = view.getByText('before')
+    const after = view.getByText('after')
+    expect(before.compareDocumentPosition(image) & Node.DOCUMENT_POSITION_FOLLOWING).not.toBe(0)
+    expect(image.compareDocumentPosition(after) & Node.DOCUMENT_POSITION_FOLLOWING).not.toBe(0)
+  })
+})
--- a/packages/client/ui-conversation/tests/queue-dock.spec.tsx
+++ b/packages/client/ui-conversation/tests/queue-dock.spec.tsx
@@ -61,7 +61,8 @@ function liveSession(initial: ConversationSnapshot) {
  }
 }

-const INPUT_STATE: InputState = { draft: '', draftRev: 0, phase: 'plain', occurrences: [], queue: [] }
+/** InputZone owner stub (the dock reads useSession only; the zone fields satisfy the owner share). */
+const INPUT_STATE: InputState = { draft: '', imageIds: [], draftRev: 0, phase: 'plain', occurrences: [], queue: [] }

 // Standard locale seat stub mirroring the real ns → common → key chain.
 const t: QueueDockProps['t'] = makeTranslate(zh, commonZh)
--- a/packages/client/ui-conversation/tests/service-orchestration.spec.ts
+++ b/packages/client/ui-conversation/tests/service-orchestration.spec.ts
@@ -5,15 +5,15 @@
 // tag probe).
 import { Context } from 'cordis'
 import { describe, expect, it, vi } from 'vitest'
-import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
-import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
-import type { QueuedMessage } from '@deepseek-ai/dsh-client-runtime/client'
-import { ConversationService } from '@deepseek-ai/dsh-client-ui-conversation/client'
+import { AttachmentId } from '@deepseek-ai/dsh-attachment'
+import { makeTranslate, SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
+import type { QueuedMessage, SessionFace } from '@deepseek-ai/dsh-client-runtime/client'
 import { ComposerBlockRegistry } from '../src/client/input/blocks.ts'
 import { InputHub } from '../src/client/input/hub.ts'
+import { ConversationService, UnsupportedImageMediaTypeError } from '../src/client/service.ts'
 import { zh } from '../src/client/locales.ts'

-async function bench() {
+async function bench(readAttachment?: SessionFace['readAttachment']) {
  const runtime = await SlotTestRuntime.create()
  const prompt = vi.fn(() => Promise.resolve({ ok: true as const, value: { accepted: true as const } }))
  const updateQueue = vi.fn(() => Promise.resolve({ ok: true as const, value: { accepted: true as const } }))
@@ -21,7 +21,7 @@ async function bench() {
  const loadOlder = vi.fn(() => Promise.resolve())
  await runtime.sessions.add({
    id: 's1',
-    session: { prompt, updateQueue, cancel, loadOlder },
+    session: { prompt, updateQueue, cancel, loadOlder, ...(readAttachment === undefined ? {} : { readAttachment }) },
  })
  // config.input is required (the apply shares its hub with the inject
  // factories); the bench passes its own instance explicitly.
@@ -34,7 +34,7 @@ async function bench() {
  const root = runtime.ctx.get('conversation') as ConversationService
  const scoped = runtime.sessions.scope('s1')!.get('conversation') as ConversationService
  const shell = hub.shellFor(runtime.sessions.binding('s1')!)
-  return { runtime, root, scoped, hub, shell, prompt, updateQueue, cancel, loadOlder }
+  return { runtime, fiber, root, scoped, hub, shell, prompt, updateQueue, cancel, loadOlder }
 }

 describe('ConversationService', () => {
@@ -83,6 +83,52 @@ describe('ConversationService', () => {
    await b.runtime.dispose()
  })

+  it('releases draft previews when their session scope is disposed', async () => {
+    const b = await bench()
+    const created = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:draft-1')
+    const revoked = vi.spyOn(URL, 'revokeObjectURL').mockReturnValue(undefined)
+    try {
+      const [attachment] = b.root.createDraftImages([
+        new File([new Uint8Array(4)], 'a.png', { type: 'image/png' }),
+      ])
+      if (attachment === undefined) throw new Error('draft attachment missing')
+      b.root.input.for(b.runtime.sessions.scope('s1')!).addImages([attachment.id])
+      await b.runtime.sessions.remove('s1')
+      expect(b.root.draftImages([attachment.id])).toEqual([])
+      expect(revoked).toHaveBeenCalledWith('blob:draft-1')
+    } finally {
+      created.mockRestore()
+      revoked.mockRestore()
+    }
+    await b.runtime.dispose()
+  })
+
+  it('validates every MIME type before allocating previews', async () => {
+    const b = await bench()
+    const created = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:preview')
+    expect(() => b.root.createDraftImages([
+      new File([Uint8Array.of(1)], 'valid.png', { type: 'image/png' }),
+      new File([Uint8Array.of(2)], 'invalid.svg', { type: 'image/svg+xml' }),
+    ])).toThrow(UnsupportedImageMediaTypeError)
+    expect(created).not.toHaveBeenCalled()
+    created.mockRestore()
+    await b.runtime.dispose()
+  })
+
+  it('invalidates pending historical image loads when the rendered session is released', async () => {
+    const read = Promise.withResolvers<Awaited<ReturnType<SessionFace['readAttachment']>>>()
+    const b = await bench(() => read.promise)
+    const sessionId = b.runtime.sessions.behavior('s1').sessionId
+    const attachment = {
+      attachmentId: AttachmentId('image-1'), mediaType: 'image/png', bytes: 1, width: 1, height: 1,
+    } as const
+    const pending = b.root.resolveImage(sessionId, attachment)
+    b.root.releaseSessionImages(sessionId)
+    read.resolve({ ok: true, value: { attachment, data: Uint8Array.of(1) } })
+    await expect(pending).rejects.toThrow('historical image scope was released')
+    await b.runtime.dispose()
+  })
+
  it('fails loudly from the root scope, on an unbound session, or without SessionsService', async () => {
    const b = await bench()
    await expect(b.root.send('x')).rejects.toThrow(/requires a session scope/)
--- a/packages/client/ui-conversation/tests/skeleton.spec.tsx
+++ b/packages/client/ui-conversation/tests/skeleton.spec.tsx
@@ -179,6 +179,7 @@ function mount(
            subscribe: () => () => {},
            version: () => 1,
          }}
+          releaseSessionImages={vi.fn()}
          bindDraftMirror={write => wiring.bindMirror(write)}
        />
      )
@@ -198,6 +199,9 @@ function mount(
          useInput={useInput}
          inputActions={inputActions}
          keyboard={wiring}
+          addImages={() => null}
+          removeImage={() => {}}
+          draftImages={() => []}
          resolveSubmitMode={() => 'queue'}
          toggleCommandMenu={vi.fn()}
          useNotices={bindSnapshotSelector(wiring.notices)}
@@ -305,7 +309,7 @@ describe('ConversationRoot resident composer', () => {
    fireEvent.change(box, { target: { value: 'ordinary revised' } })
    expect(b.chat.store.getSnapshot().draft).toBe('ordinary revised')
    fireEvent.keyDown(box, { key: 'Enter' })
-    expect(b.sink).toHaveBeenCalledWith('ordinary revised', 'queue')
+    expect(b.sink).toHaveBeenCalledWith('ordinary revised', [], 'queue')
    expect((b.view.getByRole('button', { name: 'Child' }) as HTMLButtonElement).disabled).toBe(true)
    expect(b.view.queryByText('Root')).toBeNull()
  })
--- a/packages/client/ui-conversation/tsconfig.json
+++ b/packages/client/ui-conversation/tsconfig.json
@@ -8,6 +8,12 @@
    "src"
  ],
  "references": [
+    {
+      "path": "../../attachment/attachment"
+    },
+    {
+      "path": "../../util/brand"
+    },
    {
      "path": "../../../vendor/cordis"
    },
--- a/packages/client/ui-tool/tests/diff-card.spec.tsx
+++ b/packages/client/ui-tool/tests/diff-card.spec.tsx
@@ -331,7 +331,13 @@ describe('DetailsPanel diff Output section', () => {
        useSessions={bindSnapshotSelector(sessions)}
        useWorkspaces={bindSnapshotSelector(workspaces)}
        useInput={(() => { throw new Error('unused') })}
-        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        inputActions={{
+          setDraft: () => {},
+          addImages: () => true,
+          removeImage: () => {},
+          pruneImages: () => {},
+          submit: () => {},
+        }}
        useProjection={(() => undefined)}
        useStore={bindSnapshotSelector(chat)}
        actions={chat.actions}
--- a/packages/client/ui-tool/tests/read-card.spec.tsx
+++ b/packages/client/ui-tool/tests/read-card.spec.tsx
@@ -278,7 +278,13 @@ describe('DetailsPanel Output section (read)', () => {
        useSessions={bindSnapshotSelector(sessions)}
        useWorkspaces={bindSnapshotSelector(workspaces)}
        useInput={(() => { throw new Error('unused') })}
-        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        inputActions={{
+          setDraft: () => {},
+          addImages: () => true,
+          removeImage: () => {},
+          pruneImages: () => {},
+          submit: () => {},
+        }}
        useProjection={(() => undefined)}
        useStore={bindSnapshotSelector(chat)}
        actions={chat.actions}
--- a/packages/client/ui-tool/tests/search-card.spec.tsx
+++ b/packages/client/ui-tool/tests/search-card.spec.tsx
@@ -393,7 +393,13 @@ describe('DetailsPanel Output section (search)', () => {
        useSessions={bindSnapshotSelector(sessions)}
        useWorkspaces={bindSnapshotSelector(workspaces)}
        useInput={(() => { throw new Error('unused') })}
-        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        inputActions={{
+          setDraft: () => {},
+          addImages: () => true,
+          removeImage: () => {},
+          pruneImages: () => {},
+          submit: () => {},
+        }}
        useProjection={(() => undefined)}
        useStore={bindSnapshotSelector(chat)}
        actions={chat.actions}
--- a/packages/client/ui-tool/tests/terminal-card.spec.tsx
+++ b/packages/client/ui-tool/tests/terminal-card.spec.tsx
@@ -468,7 +468,7 @@ describe('DetailsPanel Output section', () => {
        useSessions={bindSnapshotSelector(sessions)}
        useWorkspaces={bindSnapshotSelector(workspaces)}
        useInput={(() => { throw new Error('unused') })}
-        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        inputActions={{ setDraft: () => {}, addImages: () => true, removeImage: () => {}, pruneImages: () => {}, submit: () => {} }}
        useProjection={(() => undefined)}
        useStore={bindSnapshotSelector(chat)}
        actions={chat.actions}
@@ -653,7 +653,7 @@ describe('DetailsPanel Output section', () => {
          baselinesReady: true, recentWorkspaceId: undefined,
        }))}
        useInput={(() => { throw new Error('unused') })}
-        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        inputActions={{ setDraft: () => {}, addImages: () => true, removeImage: () => {}, pruneImages: () => {}, submit: () => {} }}
        useProjection={(() => undefined)}
        useStore={bindSnapshotSelector(chat)}
        actions={chat.actions}
--- a/packages/client/ui-tool/tests/web-card.spec.tsx
+++ b/packages/client/ui-tool/tests/web-card.spec.tsx
@@ -223,7 +223,13 @@ describe('DetailsPanel web Output section', () => {
        useSessions={bindSnapshotSelector(sessions)}
        useWorkspaces={bindSnapshotSelector(workspaces)}
        useInput={(() => { throw new Error('unused') })}
-        inputActions={{ setDraft: () => {}, submit: () => {} }}
+        inputActions={{
+          setDraft: () => {},
+          addImages: () => true,
+          removeImage: () => {},
+          pruneImages: () => {},
+          submit: () => {},
+        }}
        useProjection={(() => undefined)}
        useStore={bindSnapshotSelector(chat)}
        actions={chat.actions}
--- a/packages/client/ui-trajectory/src/client/TrajectoryView.tsx
+++ b/packages/client/ui-trajectory/src/client/TrajectoryView.tsx
@@ -46,6 +46,7 @@ function timelineBlock(block: AssistantBlock): AssistantBlock {
  switch (block.kind) {
    case 'text': return { kind: 'text', text: '' }
    case 'reasoning': return { kind: 'reasoning', text: '' }
+    case 'image': return block
    case 'tool-call': return {
      kind: 'tool-call',
      callId: block.callId,
--- a/packages/client/ui-trajectory/src/client/layout.ts
+++ b/packages/client/ui-trajectory/src/client/layout.ts
@@ -736,6 +736,12 @@ function assistantSourceBlock(block: AssistantBlock): TrajectorySourceBlock {
      callId: block.callId,
      toolName: block.name,
    }
+    // Attachment refs carry no fetchable bytes, so the record shows the
+    // durable metadata instead of an inline preview.
+    case 'image': return {
+      type: 'image',
+      content: stringifySourceValue(block.attachment),
+    }
    case 'other': return sourceBlock(block.block)
  }
 }
--- a/packages/client/ui-trajectory/tests/views.spec.tsx
+++ b/packages/client/ui-trajectory/tests/views.spec.tsx
@@ -194,8 +194,12 @@ function mount(slots: SlotsService, nodes: ConversationSnapshot['nodes'] = NODES
    subscribe: (fn: () => void) => slots.subscribe('conversation.view', fn),
    version: () => slots.getVersion('conversation.view'),
  }
-  const useInput = bindSnapshotSelector(createSnapshotStore({ draft: '', draftRev: 0, phase: 'plain', queue: [] })) as never
-  const inputActions = { setDraft: vi.fn(), submit: vi.fn() }
+  const useInput = bindSnapshotSelector(createSnapshotStore({
+    draft: '', imageIds: [], draftRev: 0, phase: 'plain', occurrences: [], queue: [],
+  })) as never
+  const inputActions = {
+    setDraft: vi.fn(), addImages: vi.fn(), removeImage: vi.fn(), pruneImages: vi.fn(), submit: vi.fn(),
+  }
  // Minimal outlet twin: resolve the ring entry by the `only` filter and
  // render it with the session standard kit (what SlotOutlet does for a
  // list-kind session slot, minus machinery).
@@ -256,6 +260,7 @@ function mount(slots: SlotsService, nodes: ConversationSnapshot['nodes'] = NODES
        actions={chat.actions}
        renderSlot={renderSlot}
        views={views}
+        releaseSessionImages={vi.fn()}
        useInput={useInput}
        inputActions={inputActions}
        bindDraftMirror={() => () => {}}