Merge remote-tracking branch 'origin/master' into xtr/sidebar-workspace-controls

2026-08-11 19:58:15 +08:00
parent fb3ac235d1 e690867a8a
commit ef3eb0494c
383 changed files with 8182 additions and 2256 deletions
--- a/packages/client/README.i18n.yaml
+++ b/packages/client/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/README.md
-README.md: bbc32fb3944dcb3b7aa48ef1f8e24e5c93ff7a67
-README.zh.md: 5bfbd1ce6b41a44d3ef421ea59ecc29e1c329b3c
+README.md: a349b79783fae8fcfc9b3af7d3e96de779514d01
+README.zh.md: 342442001bd268048de901233fc1913027b6d70f
--- a/packages/client/README.md
+++ b/packages/client/README.md
@@ -18,11 +18,13 @@ The browser side of the dsh web GUI: shell boot, browser-host communication, sha
 | [`ui-slots/`](ui-slots/README.md) | Defines how UI features register and compose extension slots. |
 | [`ui-theme/`](ui-theme/README.md) | Applies the selected color theme. |
 | [`ui-primitives/`](ui-primitives/README.md) | Provides shared React controls, icons, and content renderers. |
+| [`ui-attachment/`](ui-attachment/README.md) | Provides attachment display atoms: draft-image rail, message gallery, and lightbox. |
 | [`ui-layout/`](ui-layout/README.md) | Arranges the main application regions. |
 | [`ui-sidebar/`](ui-sidebar/README.md) | Presents workspace and session navigation. |
 | [`ui-workspace/`](ui-workspace/README.md) | Provides workspace selection and creation surfaces. |
 | [`ui-conversation/`](ui-conversation/README.md) | Presents the active conversation and its input surface. |
 | [`ui-tool/`](ui-tool/README.md) | Composes Tool call trees and keyed per-Tool views. |
+| [`ui-workflow-run/`](ui-workflow-run/README.md) | Replays durable workflow runs as nested Chat disclosures with live-only child navigation. |
 | [`ui-goal/`](ui-goal/README.md) | Presents and manages the current goal. |
 | [`ui-trajectory/`](ui-trajectory/README.md) | Presents alternate views of agent activity. |
 | [`ui-command/`](ui-command/README.md) | Provides session-aware command discovery and dispatch. |
--- a/packages/client/README.zh.md
+++ b/packages/client/README.zh.md
@@ -18,11 +18,13 @@ dsh web GUI 的浏览器侧：shell 启动、浏览器与宿主通信、共享 U
 | [`ui-slots/`](ui-slots/README.md) | 定义 UI 功能注册和组合扩展 slot 的方式。 |
 | [`ui-theme/`](ui-theme/README.md) | 应用所选颜色主题。 |
 | [`ui-primitives/`](ui-primitives/README.md) | 提供共享 React 控件、图标和内容渲染器。 |
+| [`ui-attachment/`](ui-attachment/README.md) | 提供附件展示原子组件：草稿图片栏、消息画廊与灯箱。 |
 | [`ui-layout/`](ui-layout/README.md) | 排列应用的主要区域。 |
 | [`ui-sidebar/`](ui-sidebar/README.md) | 展示 Workspace 与会话导航。 |
 | [`ui-workspace/`](ui-workspace/README.md) | 提供 Workspace 选择与创建界面。 |
 | [`ui-conversation/`](ui-conversation/README.md) | 展示当前会话及其输入界面。 |
 | [`ui-tool/`](ui-tool/README.md) | 编排工具调用树和按工具键控的视图。 |
+| [`ui-workflow-run/`](ui-workflow-run/README.md) | 把持久工作流运行回放为 Chat 嵌套折叠项，并只为实时子 Session 提供导航。 |
 | [`ui-goal/`](ui-goal/README.md) | 展示和管理当前目标。 |
 | [`ui-trajectory/`](ui-trajectory/README.md) | 提供 agent（智能体）活动的其他视图。 |
 | [`ui-command/`](ui-command/README.md) | 提供会话感知的命令发现与分发。 |
--- a/packages/client/connection/tests/client-apply.spec.ts
+++ b/packages/client/connection/tests/client-apply.spec.ts
@@ -152,14 +152,14 @@ describe('connection client apply', () => {
    sockets[1]!.receive(JSON.stringify({
      type: 'server-request',
      rpcId: 'host-browser',
-      method: 'host/commands-changed',
-      payload: { type: 'host/commands-changed' },
+      method: 'host/remote-event',
+      payload: { type: 'host/remote-event', event: 'commands/change', args: [] },
    }))
    expect(await muxFrame).toMatchObject({
      value: { rpcId: 'mux-browser', payload: { type: 'session/subscribed', lastSeq: 8 } },
    })
    expect(await hostFrame).toMatchObject({
-      value: { rpcId: 'host-browser', payload: { type: 'host/commands-changed' } },
+      value: { rpcId: 'host-browser', payload: { type: 'host/remote-event', event: 'commands/change' } },
    })
    expect(errors).toHaveBeenCalledTimes(2)
    await vi.waitFor(() => { expect(envelopes.flat()).toHaveLength(2) })
--- a/packages/client/connection/tests/websocket-downlink.spec.ts
+++ b/packages/client/connection/tests/websocket-downlink.spec.ts
@@ -93,7 +93,7 @@ describe('WebSocket downlinks', () => {
      },
      async function * (signal) {
        try {
-          yield { rpcId: RpcId('host-1'), payload: { type: 'host/commands-changed' } }
+          yield { rpcId: RpcId('host-1'), payload: { type: 'host/remote-event', event: 'commands/change', args: [] } }
          await untilAbort(signal)
        } finally {
          hostAborted = true
@@ -116,8 +116,8 @@ describe('WebSocket downlinks', () => {
    expect(await hostFrame).toEqual({
      type: 'server-request',
      rpcId: 'host-1',
-      method: 'host/commands-changed',
-      payload: { type: 'host/commands-changed' },
+      method: 'host/remote-event',
+      payload: { type: 'host/remote-event', event: 'commands/change', args: [] },
    })

    const muxClosed = once(mux, 'close')
--- a/packages/client/locale/package.json
+++ b/packages/client/locale/package.json
@@ -33,7 +33,9 @@
    "client": {
      "inject": [
        "@deepseek-ai/dsh-client-connection",
-        "@deepseek-ai/dsh-client-runtime"
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-api-remotes"
      ],
      "platform": "web",
      "immediately": true
@@ -41,21 +43,25 @@
  },
  "license": "BSD-3-Clause",
  "peerDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
-    "@deepseek-ai/cordis": "workspace:^",
    "react": "^18.2.0"
  },
  "devDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
    "@types/react": "~18.3.1",
-    "@deepseek-ai/cordis": "workspace:^",
    "react": "^18.2.0"
  },
  "dependencies": {
--- a/packages/client/locale/src/client/LanguageRow.tsx
+++ b/packages/client/locale/src/client/LanguageRow.tsx
@@ -7,7 +7,7 @@
 import { useState } from 'react'
 import type { PropsLocale, PropsRuntime, PropsStore } from '@deepseek-ai/dsh-client-ui-slots'
 import { IconChevronDownOutline14, Menu } from '@deepseek-ai/dsh-client-ui-primitives'
-import type {} from './settings-contract.ts'
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 import type { createLanguageRowStore } from './settings-store.ts'
 import css from './LanguageRow.module.css'

--- a/packages/client/locale/src/client/index.ts
+++ b/packages/client/locale/src/client/index.ts
@@ -13,9 +13,11 @@ import type { Context } from '@deepseek-ai/cordis'
 import {
  type BoundActions, type LocaleDictOf, type LocaleNamespaceMap, type Translate, type TranslateNS,
 } from '@deepseek-ai/dsh-client-ui-slots'
-import {
-  bindSettingsScope, type ClientContext, type SettingsScope,
-} from '@deepseek-ai/dsh-client-runtime/client'
+import type { ClientContext, SettingsScope } from '@deepseek-ai/dsh-client-runtime/client'
+// Type-only: the ctx.settingsScope Context merge and the settings slot types.
+// Cross-plugin collaboration goes through the service, never a value import
+// (client bundle purity gate).
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 import {
  LOCALE_PREFERENCE_FIELD, LOCALE_SETTINGS_NAMESPACE, type LocaleId, type LocaleSettings,
 } from '../locale-settings.ts'
@@ -29,7 +31,6 @@ import { createLanguageRowStore } from './settings-store.ts'

 export type { LanguageRowComponentProps, LanguageRowInjected } from './LanguageRow.tsx'
 export type { LanguageOptionRow, LanguageRowState } from './settings-store.ts'
-export type { SettingsGeneralItemOwnerProps } from './settings-contract.ts'
 export type { CommonKey } from '../locales/index.ts'
 export type { LocaleId, LocaleSettings } from '../locale-settings.ts'

@@ -343,7 +344,7 @@ function detectBrowserLocale(): LocaleId | undefined {
 }

 /** Required services: slot registration plus the settings transport. */
-export const inject = ['slots', 'connection']
+export const inject = ['slots', 'connection', 'remote', 'settingsScope']

 /**
 * Client plugin body: provide the locale service with base dictionaries and
@@ -352,7 +353,7 @@ export const inject = ['slots', 'connection']
 * @param ctx - client cordis context.
 */
 export function apply(ctx: ClientContext): void {
-  const host = bindSettingsScope<LocaleSettings>(ctx, { namespace: LOCALE_SETTINGS_NAMESPACE })
+  const host = ctx.settingsScope.bind<LocaleSettings>({ namespace: LOCALE_SETTINGS_NAMESPACE })
  const locale = new LocaleService(ctx, host)
  locale.register(COMMON_NS, { zh, en })
  locale.register(SETTINGS_NS, { zh: settingsZh, en: settingsEn })
--- a/packages/client/locale/src/client/settings-contract.ts
+++ b/packages/client/locale/src/client/settings-contract.ts
@@ -1,26 +0,0 @@
-/**
- * The `settings.general.item` slot type — one preference row inside the
- * settings General section, contributed by the feature plugin that owns the
- * preference (locale → Language, ui-theme → Appearance). Options: `id` (row
- * key), `order` (row position). Rows draw their own internals (row layout,
- * separators via CSS); the section column only stacks them.
- *
- * TYPE HOME RATIONALE: the slot is declared at runtime by
- * ui-settings-general's General entry, but its type lives here — this
- * package is the common dependency of every item registrant (any settings
- * row carries copy, so every registrant already depends on locale), whereas
- * the declarer's own contract is unreachable for locale/ui-theme without a
- * reference cycle.
- */
-declare module '@deepseek-ai/dsh-client-ui-slots' {
-  interface SlotMap {
-    /** One preference row inside the settings General section (see module JSDoc). */
-    'settings.general.item': { kind: 'list'; scope: 'root'; owner: SettingsGeneralItemOwnerProps }
-  }
-}
-
-/** Owner share of a General preference row (the section supplies nothing). */
-export interface SettingsGeneralItemOwnerProps {
-  /** Marker field: item owner props are intentionally empty. */
-  children?: never
-}
--- a/packages/client/locale/tests/apply.spec.ts
+++ b/packages/client/locale/tests/apply.spec.ts
@@ -4,6 +4,8 @@
 import { Context } from '@deepseek-ai/cordis'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
+import { SettingsScopeService } from '@deepseek-ai/dsh-client-ui-settings/client'
+import { TestRemote } from '@deepseek-ai/dsh-client-test-runtime'
 import {
  apply, inject, SETTINGS_NS,
 } from '@deepseek-ai/dsh-client-locale/client'
@@ -43,6 +45,9 @@ async function bench() {
    }
  })
  ctx.provide('connection', { api: { settings: { describe, mutate } }, isLoopback: true } as never)
+  // The settings transport and the forwarded-event port the plugin injects.
+  new TestRemote(ctx)
+  await ctx.plugin(SettingsScopeService).await()
  return {
    ctx, slots: ctx.get('slots') as SlotsService, describe, mutate,
    setHostPreference: (next: string | undefined) => { preference = next; revision += 1 },
@@ -79,7 +84,7 @@ describe('locale apply', () => {
  })

  it('declares the slot service', () => {
-    expect(inject).toEqual(['slots', 'connection'])
+    expect(inject).toEqual(['slots', 'connection', 'remote', 'settingsScope'])
  })

  it('provides the service with base + settings dictionaries and registers the row (declaration before or after apply)', async () => {
@@ -134,10 +139,10 @@ describe('locale apply', () => {
    const locale = b.ctx.get('locale') as LocaleService
    await vi.waitFor(() => { expect(locale.getLocale().active).toBe('en') })
    b.setHostPreference(undefined)
-    b.ctx.emit('settings/changed', LOCALE_SETTINGS_NAMESPACE)
+    b.ctx.remote.$dispatch('settings/document-updated', [LOCALE_SETTINGS_NAMESPACE, 0])
    await vi.waitFor(() => { expect(locale.getLocale().active).toBe('zh') })
    b.setHostPreference('en')
-    b.ctx.emit('settings/changed', LOCALE_SETTINGS_NAMESPACE)
+    b.ctx.remote.$dispatch('settings/document-updated', [LOCALE_SETTINGS_NAMESPACE, 0])
    await vi.waitFor(() => { expect(locale.getLocale().active).toBe('en') })
    expect(b.describe).toHaveBeenCalledTimes(3)
  })
--- a/packages/client/locale/tests/invariant.spec.ts
+++ b/packages/client/locale/tests/invariant.spec.ts
@@ -6,6 +6,7 @@ import { apply as clientApply, COMMON_NS, LocaleService, inject } from '@deepsee
 import * as LocaleInvariant from '@deepseek-ai/dsh-client-locale/invariant'
 import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
 import InvariantService from '@deepseek-ai/dsh-invariants'
+import { stubSettingsScope } from '@deepseek-ai/dsh-client-test-runtime'

 describe('invariant companion', () => {
  it('registers under the package name with an empty installer', async () => {
@@ -20,10 +21,13 @@ describe('invariant companion', () => {

  it('client apply provides ctx.locale seeded with the zh/en common namespace', async () => {
    // The feature registers its own Language settings row, hence the slots edge.
-    expect(inject).toEqual(['slots', 'connection'])
+    expect(inject).toEqual(['slots', 'connection', 'remote', 'settingsScope'])
    const ctx = new Context()
    new SlotsService(ctx)
    ctx.provide('connection', { api: { settings: {} }, isLoopback: false } as never)
+    // The settings row's transport and the forwarded-event port.
+    ctx.provide('remote', { $on: () => () => {} } as never)
+    ctx.provide('settingsScope', { bind: () => stubSettingsScope().scope } as never)
    await ctx.plugin({ inject, apply: clientApply }).await()
    const locale = ctx.get('locale')
    expect(locale).toBeInstanceOf(LocaleService)
--- a/packages/client/locale/tsconfig.json
+++ b/packages/client/locale/tsconfig.json
@@ -25,6 +25,9 @@
    },
    {
      "path": "../../support/invariants"
+    },
+    {
+      "path": "../ui-settings"
    }
  ]
 }
--- a/packages/client/runtime/README.i18n.yaml
+++ b/packages/client/runtime/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/runtime/README.md
-README.md: e5eadf7757794f3197a42f470e4429c69c64ee4c
-README.zh.md: 7ebb89910daf3fc154939af3eed31ca9151d0a3c
+README.md: cfc612a445d1b673bffb4499c54fc612c15daa92
+README.zh.md: 0dc6136a7ebb4db5c3fc514f029bc255b55042aa
--- a/packages/client/runtime/README.md
+++ b/packages/client/runtime/README.md
@@ -2,7 +2,7 @@

 English | [中文](README.zh.md)

-Client cordis boot and React-free object services: SlotsService wraps SlotCore and supplies renderer data sources; SessionsService owns Session objects, list and scope state, and the shared event window and history paging used by registered conversation view targets. WorkspacesService depends on SessionsService and owns Workspace objects, list/actions, default-target derivation, and the New Session blank-reuse entry (`connectWorkspace`). The runtime fans the shared Host stream into Session and Workspace owners and bridges the registry-invalidation frames to typed ctx events (`commands/changed`, `session/preset-changed`, `settings/changed`, `credentials/changed`, `models/changed`) so surface caches refetch without touching the stream. `host/session-preset-changed` also folds its preset into the session row, because the switch's RPC echo reaches only the client that issued it. Client sessions are always Host-born (Session+Agent+cwd in one `session.create`); the client holds no pre-entity session state — a session's Agent scope (the client mirror of host dsh-scope, keyed by the shared agent/session id) is born when its row enters the list mirror and dies with the prune. Contract: api-contracts v3 §4. Each `Session` holds a generic `ProjectionValueStore` seeded from the history-tail `projections` block and updated by `session/projection` frames under higher-seq-wins; domain keys (including `todos`) are read via `projections.faceOf` / `useProjection`, not via `ConversationSnapshot`. The store also publishes one reference-stable whole-value map through `SessionSummary.projectionValues`, allowing global list consumers to reuse the same projections without creating per-session subscriptions.
+Client cordis boot and React-free object services: SlotsService wraps SlotCore and supplies renderer data sources; SessionsService owns Session objects, list and scope state, and the shared event window and history paging used by registered conversation view targets. WorkspacesService depends on SessionsService and owns Workspace objects, list/actions, default-target derivation, and the New Session blank-reuse entry (`connectWorkspace`). The runtime fans the shared Host stream into Session and Workspace owners and hands each generic `host/remote-event` frame to `ctx.remote.$dispatch`; domain packages subscribe to their owner events through `ctx.remote.$on` and decide which caches or session rows they invalidate. Client sessions are always Host-born (Session+Agent+cwd in one `session.create`); the client holds no pre-entity session state — a session's Agent scope (the client mirror of host dsh-scope, keyed by the shared agent/session id) is born when its row enters the list mirror and dies with the prune. Contract: api-contracts v3 §4. Each `Session` holds a generic `ProjectionValueStore` seeded from the history-tail `projections` block and updated by `session/projection` frames under higher-seq-wins; domain keys (including `todos`) are read via `projections.faceOf` / `useProjection`, not via `ConversationSnapshot`. The store also publishes one reference-stable whole-value map through `SessionSummary.projectionValues`, allowing global list consumers to reuse the same projections without creating per-session subscriptions.

 `bindSettingsScope` is the browser mirror of the Host-side settings owner seam for one domain-owned namespace. It subscribes before starting a nonblocking initial read, publishes a uSES snapshot (status, section value, revision, writability, host/memory mode), serializes `set` writes with the latest known namespace revision, suppresses stale publications, recovers a rejected latest write from Host state, and reaches quiescence on plugin disposal. The default decoder validates each section against the namespace's own serialized wire schema (rehydrated through dsh-client-schema-form), so a domain adds a decoder only to narrow beyond that schema. Loopback pages use the Host settings API; remote pages stay in memory mode. Domain packages own the namespace schema, default, and live service rather than putting product policy in runtime.
 ## Slot declaration injection
--- a/packages/client/runtime/README.zh.md
+++ b/packages/client/runtime/README.zh.md
@@ -2,7 +2,7 @@

 [English](README.md) | 中文

-客户端 cordis 启动与不依赖 React 的对象服务：SlotsService 包装 SlotCore 并提供 renderer 数据源；SessionsService 拥有 Session 对象、列表与 scope 状态，以及供已注册 conversation view target 共用的事件窗口与历史分页。WorkspacesService 依赖 SessionsService，拥有 Workspace 对象、列表／操作、默认目标派生，以及 New Session 空会话复用入口（`connectWorkspace`）。运行时把共享 Host 流分发给 Session 与 Workspace 所有者，并把注册表失效帧桥接为类型化 ctx 事件（`commands/changed`、`session/preset-changed`、`settings/changed`、`credentials/changed`、`models/changed`），使各表面缓存无需触碰流即可重拉。`host/session-preset-changed` 还会把其中的 preset 折进会话行，因为这次切换的 RPC 回执只会到达发起它的那个客户端。客户端会话一律由 Host 创建（一次 `session.create` 同时产生 Session、agent（智能体）和 cwd）；客户端不持有任何实体化之前的会话状态——agent scope（host dsh-scope 的客户端镜像，以 agent/session 共用 id 为键）在会话行进入列表镜像时创建，并随 prune 销毁。约定：api-contracts v3 §4。每个 `Session` 持有一个通用的 `ProjectionValueStore`，由历史记录尾部的 `projections` 块播种，并经 `session/projection` 帧按 seq 高者胜更新；领域键（含 `todos`）经 `projections.faceOf`／`useProjection` 读取，不经 `ConversationSnapshot`。该 store 还会通过 `SessionSummary.projectionValues` 发布一份引用稳定的完整值映射，使全局列表消费方无需为每个会话创建订阅，即可复用同一组投影。
+客户端 cordis 启动与不依赖 React 的对象服务：SlotsService 包装 SlotCore 并提供 renderer 数据源；SessionsService 拥有 Session 对象、列表与 scope 状态，以及供已注册 conversation view target 共用的事件窗口与历史分页。WorkspacesService 依赖 SessionsService，拥有 Workspace 对象、列表／操作、默认目标派生，以及 New Session 空会话复用入口（`connectWorkspace`）。运行时把共享 Host 流分发给 Session 与 Workspace 所有者，并把每个通用 `host/remote-event` 帧交给 `ctx.remote.$dispatch`；各领域包通过 `ctx.remote.$on` 订阅自身 owner 事件，并自行决定使哪些缓存或会话行失效。客户端会话一律由 Host 创建（一次 `session.create` 同时产生 Session、agent（智能体）和 cwd）；客户端不持有任何实体化之前的会话状态——agent scope（host dsh-scope 的客户端镜像，以 agent/session 共用 id 为键）在会话行进入列表镜像时创建，并随 prune 销毁。约定：api-contracts v3 §4。每个 `Session` 持有一个通用的 `ProjectionValueStore`，由历史记录尾部的 `projections` 块播种，并经 `session/projection` 帧按 seq 高者胜更新；领域键（含 `todos`）经 `projections.faceOf`／`useProjection` 读取，不经 `ConversationSnapshot`。该 store 还会通过 `SessionSummary.projectionValues` 发布一份引用稳定的完整值映射，使全局列表消费方无需为每个会话创建订阅，即可复用同一组投影。

 `bindSettingsScope` 面向单个由领域持有的 namespace，是 Host 侧 settings owner seam 的浏览器镜像。它在开始非阻塞初始读取前建立订阅，发布 uSES 快照（状态、分节值、revision、可写性、host／内存模式），使用已知最新 namespace revision 串行执行 `set` 写入，抑制陈旧发布，并在最新写入被拒时从 Host 状态恢复；插件释放时，它会达到完全停稳。默认解码器会对照该 namespace 自身的序列化 wire schema（经 dsh-client-schema-form 还原）校验每个分节，因此领域只有在需要比该 schema 进一步收窄时才添加解码器。回环页面使用 Host settings API，远程页面则停留在内存模式。namespace schema、默认值与实时服务归领域包所有，而非把产品政策放入运行时。
 ## Slot 声明注入
--- a/packages/client/runtime/package.json
+++ b/packages/client/runtime/package.json
@@ -33,7 +33,8 @@
    "client": {
      "inject": [
        "@deepseek-ai/dsh-client-connection",
-        "@deepseek-ai/dsh-typert-registry"
+        "@deepseek-ai/dsh-typert-registry",
+        "@deepseek-ai/dsh-api-gateway"
      ],
      "platform": "web",
      "immediately": true
@@ -44,7 +45,6 @@
    "@deepseek-ai/dsh-agent": "workspace:^",
    "@deepseek-ai/dsh-attachment": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
-    "@deepseek-ai/dsh-client-schema-form": "workspace:^",
    "@deepseek-ai/dsh-commands": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-host-apiproxy": "workspace:^",
@@ -59,19 +59,20 @@
    "zustand": "~4.4.7"
  },
  "peerDependencies": {
+    "@deepseek-ai/dsh-api-gateway": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
    "@deepseek-ai/dsh-type-meta": "workspace:^",
    "@deepseek-ai/dsh-typert-registry": "workspace:^",
    "@deepseek-ai/cordis": "workspace:^"
  },
  "devDependencies": {
+    "@deepseek-ai/dsh-api-gateway": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
    "@deepseek-ai/dsh-timeout": "workspace:^",
    "@deepseek-ai/dsh-type-meta": "workspace:^",
    "@deepseek-ai/dsh-typert-registry": "workspace:^",
-    "@types/react": "~18.3.1",
    "@deepseek-ai/cordis": "workspace:^",
-    "@deepseek-ai/schemastery": "workspace:^"
+    "@types/react": "~18.3.1"
  },
  "files": [
    "lib/index.js",
--- a/packages/client/runtime/src/client/contract/settings-scope.ts
+++ b/packages/client/runtime/src/client/contract/settings-scope.ts
@@ -0,0 +1,63 @@
+/**
+ * The settings-namespace scope contract. The type lives here, in the common
+ * dependency of every feature that owns a preference, while the implementation
+ * and its Host transport live with the Settings surface
+ * (`dsh-client-ui-settings`): a feature service accepts a scope through
+ * `attachSettings` without depending on the surface that binds it, which would
+ * otherwise close a reference cycle.
+ */
+
+/** Client-side sync state of one settings namespace. */
+export interface SettingsScopeSnapshot<T> {
+  /**
+   * `loading` until the first accepted section, `ready` while one stands, and
+   * `unavailable` when the namespace is not exposed to this client or the
+   * connection keeps preferences process-local (memory mode).
+   */
+  status: 'loading' | 'ready' | 'unavailable'
+  /** Last accepted schema-resolved section; undefined before the first acceptance. */
+  value: T | undefined
+  /** Namespace revision fencing the next write; undefined before the first Host view. */
+  revision: number | undefined
+  /** Whether the Host document accepts writes; memory mode never does. */
+  writable: boolean
+  /** `host` syncs with the Host document; `memory` keeps a remote browser process-local. */
+  mode: 'host' | 'memory'
+}
+
+/** Domain-owned description of one settings namespace consumed by a browser plugin. */
+export interface SettingsScopeSpec<T> {
+  /** Settings namespace registered by the owning Host plugin. */
+  namespace: string
+  /**
+   * Narrow one wire section; undefined keeps the last accepted value. The
+   * default validates the section against the namespace's own serialized wire
+   * schema, so domains add a decoder only to narrow beyond that schema.
+   */
+  decode?: (section: unknown) => T | undefined
+}
+
+/**
+ * Reactive owner handle over one namespace's durable section — the browser
+ * mirror of the Host-side `SettingsScope` owner seam. Domain services read
+ * and observe the snapshot and route explicit user choices through `set`.
+ */
+export interface SettingsScope<T> {
+  /** @returns the current sync snapshot (stable reference until the next change). */
+  getSnapshot(): SettingsScopeSnapshot<T>
+  /**
+   * Observe snapshot replacements.
+   * @param listener - invoked after each snapshot change.
+   * @returns the disposer removing this listener.
+   */
+  subscribe(listener: () => void): () => void
+  /**
+   * Queue one field write. Rapid writes preserve mutation order, each carries
+   * the latest known namespace revision, and only the latest settlement may
+   * publish; a rejected or failed latest write reloads Host state instead.
+   * @param field - scalar field inside the namespace section.
+   * @param value - JSON-shaped value selected by the user.
+   * @returns settlement after the write and any latest-write recovery read.
+   */
+  set(field: string, value: unknown): Promise<void>
+}
--- a/packages/client/runtime/src/client/index.ts
+++ b/packages/client/runtime/src/client/index.ts
@@ -1,6 +1,10 @@
 /** Browser runtime services for slots, sessions, workspaces, and connection-stream delivery. */
 import type { Context } from '@deepseek-ai/cordis'
 import type { ConnectionHandle, SessionId } from '@deepseek-ai/dsh-client-connection/client'
+// Type-only: the ctx.remote merge. Deliberately the gateway's Client half rather
+// than api-remotes': that face imports a Host-tsdown-generated artifact, and this
+// project sits in the Host build graph.
+import type {} from '@deepseek-ai/dsh-api-gateway/client'
 import type { TypeRTContext } from '@deepseek-ai/dsh-type-meta'
 import type { MaybeSnapshotSelectorHook, SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
 import { SlotsService } from './slots.ts'
@@ -42,9 +46,12 @@ export type { SessionProvideChannelHost } from './sessions/provide.ts'
 export { createScope } from './agents/scope.ts'
 export type { AgentScopeHandle } from './agents/scope.ts'
 export { DirectoryBrowseError, WorkspaceCreateError, WorkspacesService } from './workspaces/service.ts'
-export { bindSettingsScope, SettingsScopeController } from './settings-scope.ts'
-export type { SettingsScope, SettingsScopeSnapshot, SettingsScopeSpec } from './settings-scope.ts'
 export { resolveWorkspacePath } from './workspaces/path.ts'
+// Contract only: the scope implementation and its Host transport belong to
+// dsh-client-ui-settings (see that package's settings-scope.ts).
+export type {
+  SettingsScope, SettingsScopeSnapshot, SettingsScopeSpec,
+} from './contract/settings-scope.ts'
 export type { Session } from './sessions/session.ts'
 export type { ISession, ProjectionsFace, SessionFace } from './contract/session.ts'
 export type { AgentContext, ISessions } from './contract/sessions.ts'
@@ -150,47 +157,6 @@ declare module '@deepseek-ai/cordis' {
     * @param key - the mutated SlotMap key.
     */
    'slots/changed'(key: string): void
-    /**
-     * The host command registry changed (host/commands-changed passthrough).
-     * Pure invalidation signal: subscribers refetch `command.list` in the
-     * background rather than diffing.
-     * @mode emit
-     */
-    'commands/changed'(): void
-    /**
-     * One settings namespace's resolved value changed on the host
-     * (host/settings-changed passthrough). Subscribers refetch
-     * `settings.describe`; the frame carries no values.
-     * @mode emit
-     * @param ns - the namespace whose resolved value changed.
-     */
-    'settings/changed'(ns: string): void
-    /**
-     * One credential reference's state changed on the host
-     * (host/credentials-changed passthrough). The ref is an
-     * environment-variable NAME — never a value.
-     * @mode emit
-     * @param ref - the reference whose configured state changed.
-     */
-    'credentials/changed'(ref: string): void
-    /**
-     * The host provider topology changed (host/models-changed passthrough).
-     * Subscribers refetch `llm.providers`/`llm.models`/`session.models`.
-     * @mode emit
-     */
-    'models/changed'(): void
-    /**
-     * One session's agent preset changed (host/session-preset-changed
-     * passthrough), so everything its composition decides — the command
-     * catalog, the skill catalog — is stale for that session and no other.
-     * Every connected client observes it, not only the one that issued the
-     * switch. Subscribers refetch their own session-keyed caches; the frame
-     * carries no catalog.
-     * @mode emit
-     * @param sessionId - the session whose composition changed.
-     * @param agentPreset - the preset it now runs.
-     */
-    'session/preset-changed'(sessionId: SessionId, agentPreset: string): void
    /**
     * A connection generation was (re-)established. Wire-derived caches must
     * treat their state as stale and repull (commands directory; the queue
@@ -213,7 +179,7 @@ declare module '@deepseek-ai/cordis' {
 }

 /** Required services: the wire handle and Client TypeRT registry. */
-export const inject = ['connection', 'typert']
+export const inject = ['connection', 'typert', 'remote']

 /** Mounts the browser runtime services and connection stream.
 * @param ctx - Client Cordis context.
@@ -241,17 +207,12 @@ export function apply(ctx: Context): void {
    onHostEnvelope: (envelope) => {
      sessions.handleHostEnvelope(envelope)
      workspaces.handleHostEnvelope(envelope)
-      // Typed-event bridge: the session layer ignores registry frames (no
-      // session routing); consumers (command directory caches, the settings
-      // and model services) subscribe on ctx.
+      // Forwarded-event bridge: the session layer ignores registry frames (no
+      // session routing). This plugin owns the frame sink, so it hands the
+      // decoded frame straight to the Remote service, which fans it out to
+      // `ctx.remote.$on` subscribers; no consumer reads a frame.
      const frame = envelope.payload
-      if (frame.type === 'host/commands-changed') ctx.emit('commands/changed')
-      else if (frame.type === 'host/session-preset-changed') {
-        ctx.emit('session/preset-changed', frame.sessionId, frame.agentPreset)
-      }
-      else if (frame.type === 'host/settings-changed') ctx.emit('settings/changed', frame.ns)
-      else if (frame.type === 'host/credentials-changed') ctx.emit('credentials/changed', frame.ref)
-      else if (frame.type === 'host/models-changed') ctx.emit('models/changed')
+      if (frame.type === 'host/remote-event') ctx.remote.$dispatch(frame.event, frame.args)
    },
    onConnected: () => {
      sessions.handleConnected()
--- a/packages/client/runtime/src/client/sessions/manager.ts
+++ b/packages/client/runtime/src/client/sessions/manager.ts
@@ -811,14 +811,6 @@ export class SessionManager {
        }
        return
      }
-      case 'host/session-preset-changed': {
-        // Every connected client observes the switch here; only the tab that
-        // issued it also gets the RPC echo. The merge keeps the row's own
-        // updatedAt and lowers `blank` only, so re-applying the switching
-        // tab's own frame is a no-op.
-        this.noteAgentPreset(frame.sessionId, frame.agentPreset)
-        return
-      }
      case 'host/session-removed': {
        const summary = this.summaries.find(candidate => candidate.sessionId === frame.sessionId)
        const durableSubagent = summary?.origin === 'subagent' || this.addresses.has(frame.sessionId)
--- a/packages/client/runtime/tests/sessions-service.spec.ts
+++ b/packages/client/runtime/tests/sessions-service.spec.ts
@@ -87,23 +87,6 @@ describe('list store projection', () => {
    expect(b.svc.list.getSnapshot().byId[sid('s1')]?.agentPreset).toBe('minimal')
  })

-  it('learns a preset switch from the host frame, not only from the tab that issued it', async () => {
-    const b = bench()
-    await feedList(b, [{ id: 's1', blank: true, agentPreset: 'standard' }])
-
-    // Every connected client gets this frame; only the switching tab gets the
-    // RPC echo. A client that ignored the payload would keep labelling the
-    // session with the composition it replaced.
-    b.svc.handleHostEnvelope({
-      rpcId: 'r1' as never,
-      payload: { type: 'host/session-preset-changed', sessionId: sid('s1'), agentPreset: 'minimal' } as never,
-    })
-    await Promise.resolve()
-
-    expect(b.svc.list.getSnapshot().byId[sid('s1')]?.agentPreset).toBe('minimal')
-    expect(b.svc.list.getSnapshot().byId[sid('s1')]?.blank).toBe(true)
-  })
-
  it('reflects live increments (host stream via manager) into the store', async () => {
    const b = bench()
    await feedList(b, [{ id: 's1' }])
--- a/packages/client/runtime/tests/wire-events.spec.ts
+++ b/packages/client/runtime/tests/wire-events.spec.ts
@@ -1,26 +1,63 @@
 /**
- * Wire-to-typed-event bridge: host/commands-changed
- * → ctx 'commands/changed'; host/session-preset-changed →
- * ctx 'session/preset-changed'; each established connection generation →
- * ctx 'connection/reset' (the forced cache-invalidation broadcast).
+ * Wire-to-typed-event bridge: a `host/remote-event` frame is handed verbatim to
+ * the Remote service's `$dispatch` (its fan-out to `ctx.remote.$on` is
+ * api-gateway's own coverage); each established connection generation emits
+ * `connection/reset` for generation-scoped cache invalidation.
 */
 import { Context } from '@deepseek-ai/cordis'
 import { describe, expect, it } from 'vitest'
 import type { ConnectionHandle, ConnectionSinks } from '@deepseek-ai/dsh-client-connection/client'
 import TypertRegistry from '@deepseek-ai/dsh-typert-registry'
+// Type-only: the api-remotes facade carries both the allowlist's selection seat
+// and the owner packages' `./types` declarations, which together give `$on` its
+// key face and per-event listener signatures.
+import type {} from '@deepseek-ai/dsh-api-remotes/client'
 import * as RuntimeClient from '../src/client/index.ts'
 import { FakeApiClient } from './fake-api.ts'

+/**
+ * Compile-time face of `ctx.remote.$on`, asserted by type-checking this file
+ * rather than by running it: the allowlist narrows the key set, and each
+ * listener's parameters come from the owner package's own cordis `Events`
+ * declaration (so a brand cannot be flattened on the way to a consumer).
+ * @param ctx - any client Context carrying the Remote service.
+ */
+function forwardedEventContracts(ctx: Context): void {
+  ctx.remote.$on('settings/document-updated', (namespace, source) => {
+    // @ts-expect-error -- the brand survives the wire: a bare string is not a SettingsNamespace
+    const bare: typeof namespace = 'plain-string'
+    void bare; void namespace; void source
+  })
+  ctx.remote.$on('credentials/updated', () => {})
+  ctx.remote.$on('commands/change', () => {})
+  ctx.remote.$on('llm/adapters-updated', () => {})
+  ctx.remote.$on('agent-preset/selected', (sessionId, agentPreset) => {
+    void sessionId; void agentPreset
+  })
+  // @ts-expect-error -- client-local event outside the allowlist
+  ctx.remote.$on('slots/changed', () => {})
+  // @ts-expect-error -- declared host event the allowlist does not select
+  ctx.remote.$on('skills/change', () => {})
+}
+void forwardedEventContracts
+
 interface Bench {
  ctx: Context
  sinks: ConnectionSinks | undefined
+  /** Every `$dispatch` the runtime made, as `[event, ...args]`. */
+  dispatched: unknown[][]
 }

 async function mount(): Promise<Bench> {
  const ctx = new Context()
  await ctx.plugin(TypertRegistry)
  const api = new FakeApiClient()
-  const bench: Bench = { ctx, sinks: undefined }
+  const bench: Bench = { ctx, sinks: undefined, dispatched: [] }
+  // Stands in for api-gateway's Remote service: this spec owns the carrier's
+  // handoff, not the fan-out behind it.
+  ctx.reflect.provide('remote', {
+    $dispatch: (event: string, args: readonly unknown[]) => { bench.dispatched.push([event, ...args]) },
+  })
  const handle: ConnectionHandle = {
    api,
    isLoopback: true,
@@ -33,50 +70,52 @@ async function mount(): Promise<Bench> {
    },
  }
  ctx.reflect.provide('connection', handle)
-  ctx.reflect.provide('remote', {})
  await ctx.plugin(RuntimeClient).await()
  return bench
 }

 describe('wire event bridge', () => {
-  it('broadcasts commands/changed on a host/commands-changed frame, not on other host frames', async () => {
+  it('republishes a forwarded host event verbatim, and routes no other host frame there', async () => {
    const bench = await mount()
-    let changed = 0
-    bench.ctx.on('commands/changed', () => { changed++ })
-    bench.sinks?.onHostEnvelope?.({ rpcId: 'r1' as never, payload: { type: 'host/commands-changed' } })
-    expect(changed).toBe(1)
+    const seen = bench.dispatched
+    bench.sinks?.onHostEnvelope?.({
+      rpcId: 'r1' as never,
+      payload: { type: 'host/remote-event', event: 'commands/change', args: [] },
+    })
+    expect(seen).toEqual([['commands/change']])
+
    bench.sinks?.onHostEnvelope?.({
      rpcId: 'r2' as never,
      payload: { type: 'host/session-status', sessionId: 's1' as never, running: true },
    })
-    expect(changed).toBe(1)
+    expect(seen).toEqual([['commands/change']])
  })

-  it('broadcasts the settings/credentials/models invalidations with their frame payloads', async () => {
+  it('carries each forwarded event name with its own argument list, unfiltered', async () => {
    const bench = await mount()
-    const seen: unknown[][] = []
-    bench.ctx.on('settings/changed', ns => seen.push(['settings', ns]))
-    bench.ctx.on('credentials/changed', ref => seen.push(['credentials', ref]))
-    bench.ctx.on('models/changed', () => seen.push(['models']))
-    bench.sinks?.onHostEnvelope?.({ rpcId: 'r3' as never, payload: { type: 'host/settings-changed', ns: 'llm-pi-ai' } })
-    bench.sinks?.onHostEnvelope?.({ rpcId: 'r4' as never, payload: { type: 'host/credentials-changed', ref: 'OPENAI_API_KEY' } })
-    bench.sinks?.onHostEnvelope?.({ rpcId: 'r5' as never, payload: { type: 'host/models-changed' } })
-    expect(seen).toEqual([
-      ['settings', 'llm-pi-ai'],
-      ['credentials', 'OPENAI_API_KEY'],
-      ['models'],
-    ])
-  })
+    const seen = bench.dispatched

-  it('broadcasts session/preset-changed with the recomposed session and its new preset', async () => {
-    const bench = await mount()
-    const seen: Array<[string, string]> = []
-    bench.ctx.on('session/preset-changed', (sessionId, agentPreset) => { seen.push([sessionId, agentPreset]) })
    bench.sinks?.onHostEnvelope?.({
-      rpcId: 'r1' as never,
-      payload: { type: 'host/session-preset-changed', sessionId: 's1' as never, agentPreset: 'minimal' },
+      rpcId: 'r3' as never,
+      payload: { type: 'host/remote-event', event: 'settings/document-updated', args: ['llm-pi-ai', 7] },
    })
-    expect(seen).toEqual([['s1', 'minimal']])
+    bench.sinks?.onHostEnvelope?.({
+      rpcId: 'r4' as never,
+      payload: { type: 'host/remote-event', event: 'credentials/updated', args: ['OPENAI_API_KEY'] },
+    })
+    // The carrier does not second-guess the name: selecting what a consumer can
+    // receive is the allowlist's job, and dropping an unsubscribed name is the
+    // Remote service's. This plugin republishes whatever the frame carried.
+    bench.sinks?.onHostEnvelope?.({
+      rpcId: 'r5' as never,
+      payload: { type: 'host/remote-event', event: 'nobody/listening', args: ['ignored'] },
+    })
+
+    expect(seen).toEqual([
+      ['settings/document-updated', 'llm-pi-ai', 7],
+      ['credentials/updated', 'OPENAI_API_KEY'],
+      ['nobody/listening', 'ignored'],
+    ])
  })

  it('broadcasts connection/reset on every established generation (reconnect invalidation)', async () => {
--- a/packages/client/runtime/tsconfig.json
+++ b/packages/client/runtime/tsconfig.json
@@ -23,9 +23,6 @@
    {
      "path": "../connection"
    },
-    {
-      "path": "../schema-form"
-    },
    {
      "path": "../../host/apiproxy"
    },
@@ -61,6 +58,9 @@
    },
    {
      "path": "../../typert/registry"
+    },
+    {
+      "path": "../../api/gateway"
    }
  ],
  "exclude": [
--- a/packages/client/test-runtime/src/index.ts
+++ b/packages/client/test-runtime/src/index.ts
@@ -39,6 +39,7 @@ export { FixtureSession, TestSessions } from './sessions.ts'
 export { stubSettingsScope } from './settings-scope.ts'
 export type { StubSettingsScope } from './settings-scope.ts'
 export { TestWorkspaces } from './workspaces.ts'
+export { TestRemote } from './remote.ts'
 export { conversationSnapshot, workspaceListState } from './fixtures.ts'
 export type { SessionBehaviorOverrides, SessionFixture, Stabilizer } from './fixtures.ts'
 export { makeTranslate } from './translate.ts'
--- a/packages/client/test-runtime/src/remote.ts
+++ b/packages/client/test-runtime/src/remote.ts
@@ -0,0 +1,66 @@
+/** Test-owned Remote face: `$on` subscriptions driven by the internal forwarded-event plumbing. */
+import type { Context } from '@deepseek-ai/cordis'
+
+/**
+ * Remote service test double for the forwarded-event path. Feature specs need
+ * `ctx.remote.$on` to exist (their plugins inject `remote`) and need forwarded
+ * host events to reach those subscribers, but not the generated namespaces or
+ * the wire — so this double implements subscription and dispatch only.
+ *
+ * Dispatch is driven the same way production drives it: `client/runtime` owns the
+ * host frame sink and hands each decoded `host/remote-event` frame to
+ * `$dispatch`. A spec therefore exercises its refresh chains by calling
+ * `$dispatch(name, args)` on this double.
+ *
+ * `$mount` rejects: a spec that reaches a generated namespace through this
+ * double has outgrown it and needs the real Client Remote service.
+ *
+ * One deliberate asymmetry with production: a throwing listener propagates out
+ * of the emit instead of being contained and logged, so a spec cannot lean on
+ * this double for the containment guarantee `$on` documents — assert that
+ * against the real service.
+ */
+export class TestRemote {
+  private readonly subscriptions = new Map<string, Set<(...args: never[]) => void>>()
+
+  /**
+   * Register the double as `ctx.remote`.
+   * @param ctx - the spec's root Context.
+   */
+  constructor(ctx: Context) {
+    ctx.provide('remote', this)
+  }
+
+  /**
+   * Deliver one forwarded host event to its subscribers, standing in for the
+   * carrier that owns the frame sink.
+   * @param event - forwarded host event name.
+   * @param args - the Host argument list, verbatim.
+   */
+  $dispatch(event: string, args: readonly unknown[]): void {
+    const listeners = this.subscriptions.get(event)
+    if (listeners === undefined) return
+    for (const listener of [...listeners]) listener(...args as never[])
+  }
+
+  /**
+   * Subscribe to one forwarded host event.
+   * @param event - forwarded host event name.
+   * @param listener - receives the Host argument list verbatim.
+   * @returns disposer removing this subscription.
+   */
+  $on(event: string, listener: (...args: never[]) => void): () => void {
+    const listeners = this.subscriptions.get(event) ?? new Set()
+    this.subscriptions.set(event, listeners)
+    listeners.add(listener)
+    return () => { listeners.delete(listener) }
+  }
+
+  /**
+   * Generated-namespace mount, unsupported by this double.
+   * @returns never; always rejects.
+   */
+  $mount(): Promise<() => Promise<void>> {
+    return Promise.reject(new Error('TestRemote: $mount needs the real Client Remote service'))
+  }
+}
--- a/packages/client/test-runtime/tests/remote.spec.ts
+++ b/packages/client/test-runtime/tests/remote.spec.ts
@@ -0,0 +1,43 @@
+/**
+ * TestRemote's own contract: subscription and disposal, dispatch driven by the
+ * internal plumbing event, the silent drop for an unsubscribed name, and the
+ * `$mount` refusal that sends a spec to the real Client Remote service.
+ */
+import { Context } from '@deepseek-ai/cordis'
+import { describe, expect, it } from 'vitest'
+import { TestRemote } from '../src/remote.ts'
+
+describe('TestRemote', () => {
+  it('delivers a forwarded event to its subscribers and stops after disposal', async () => {
+    const ctx = new Context()
+    const remote = new TestRemote(ctx)
+    const seen: string[] = []
+    const off = remote.$on('settings/document-updated', (ns: string) => {
+      seen.push(ns)
+    })
+
+    ctx.remote.$dispatch('settings/document-updated', ['ui-theme', 1])
+    expect(seen).toEqual(['ui-theme'])
+
+    off()
+    ctx.remote.$dispatch('settings/document-updated', ['ui-theme', 2])
+    expect(seen).toEqual(['ui-theme'])
+    await ctx.fiber.dispose()
+  })
+
+  it('drops a forwarded event nobody subscribed to', async () => {
+    const ctx = new Context()
+    new TestRemote(ctx)
+    // No subscriber for this name: the emit must be inert rather than throwing,
+    // because the wire carries whatever the Host allowlist selected.
+    expect(() => { ctx.remote.$dispatch('credentials/updated', ['DEEPSEEK_API_KEY']) }).not.toThrow()
+    await ctx.fiber.dispose()
+  })
+
+  it('refuses $mount, which needs the real Client Remote service', async () => {
+    const ctx = new Context()
+    const remote = new TestRemote(ctx)
+    await expect(remote.$mount()).rejects.toThrow('needs the real Client Remote service')
+    await ctx.fiber.dispose()
+  })
+})
--- a/packages/client/ui-agent-preset/README.i18n.yaml
+++ b/packages/client/ui-agent-preset/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-agent-preset/README.md
-README.md: 3b0db5a3eedca256a00b65a3bd2738f22c0eb62e
-README.zh.md: 6f3c350f973119c201572f2c03145338b5cc5b00
+README.md: f0fdff4b1f2453be9e8b4c1d20f7ca0fee506d55
+README.zh.md: c391a4548f2bd2fc4bfe168e9d494bc0073a8cb2
--- a/packages/client/ui-agent-preset/README.md
+++ b/packages/client/ui-agent-preset/README.md
@@ -18,7 +18,7 @@ A session that has started is refused rather than queued: the host answers `agen

 ## The session-header label

-A third surface, beside the session title: the preset THIS session runs, as static chrome. A control there would promise a switch the host refuses outright. It reads the preset from the session's own summary — a resumed session runs what it was created with, not today's default — and resolves the display name against the same roster the General row reads.
+A third surface, beside the session title: the preset THIS session runs, as static chrome. A control there would promise a switch the host refuses outright. It reads the preset from the session's own summary and resolves the display name against the same roster the General row reads. Forwarded `agent-preset/selected` owner events fold committed blank-session switches into that shared summary in every tab; the initiating tab may already have applied the RPC echo, and the merge is idempotent.

 ## What it reads and writes

--- a/packages/client/ui-agent-preset/README.zh.md
+++ b/packages/client/ui-agent-preset/README.zh.md
@@ -18,7 +18,7 @@ chip 以部署默认值打开，其选择是**暂存**的——该界面先于

 ## 会话标题旁的标签

-第三个表层，位于会话标题旁：**本会话**所运行的 preset，作为静态装饰呈现。在那里放一个控件，等于承诺一次宿主会断然拒绝的切换。它从会话自身的摘要读取 preset——被恢复的会话运行的是它创建时的那一份，而非今天的默认值——并在 General 行所读的同一份名单上解析显示名称。
+第三个表层，位于会话标题旁：**本会话**所运行的 preset，作为静态装饰呈现。在那里放一个控件，等于承诺一次宿主会断然拒绝的切换。它从会话自身的摘要读取 preset，并在 General 行所读的同一份名单上解析显示名称。转发的 owner 事件 `agent-preset/selected` 会在每个标签页中把已经提交的空会话切换折进这份共享摘要；发起方标签页可能已经采用 RPC 回执，而合并是幂等的。

 ## 它读什么、写什么

--- a/packages/client/ui-agent-preset/package.json
+++ b/packages/client/ui-agent-preset/package.json
@@ -36,7 +36,8 @@
        "@deepseek-ai/dsh-client-locale",
        "@deepseek-ai/dsh-client-runtime",
        "@deepseek-ai/dsh-client-ui-conversation",
-        "@deepseek-ai/dsh-client-ui-settings"
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-api-remotes"
      ],
      "platform": "web"
    }
@@ -47,6 +48,8 @@
  },
  "license": "BSD-3-Clause",
  "peerDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
@@ -56,10 +59,10 @@
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-client-web-react": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
-    "@deepseek-ai/cordis": "workspace:^",
    "react": "^18.2.0"
  },
  "devDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
--- a/packages/client/ui-agent-preset/src/client/index.ts
+++ b/packages/client/ui-agent-preset/src/client/index.ts
@@ -14,6 +14,9 @@
 import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
+// Type-only: pulls the ctx.remote merge and the forwarded-event key face
+// (the settings invalidation rides the allowlist) into this program.
+import type {} from '@deepseek-ai/dsh-api-remotes/client'
 // Type-only: pulls the settings shell's SlotMap merge (the 'settings.section' entry).
 import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
@@ -43,7 +46,7 @@ export type { AgentPresetOption, AgentPresetSettingsState } from './settings-sto
 export { AGENT_PRESET_SETTINGS_NS, writeDefaultPreset } from './settings-store.ts'

 /** Required services (cordis fiber inject). */
-export const inject = ['slots', 'locale', 'connection']
+export const inject = ['slots', 'locale', 'connection', 'remote']

 /**
 * Mount the General-settings row.
@@ -71,15 +74,17 @@ export function apply(ctx: ClientContext): void {
  ctx.effect(() => {
    // The roster is a live directory and the default is a settings field, so
    // both an external settings edit and a reconnect can move this row.
-    const refresh = (ns?: string): void => {
-      if (ns !== undefined && ns !== AGENT_PRESET_SETTINGS_NS) return
+    const refresh = (): void => {
      void controller.load()
      // The section reads the same roster and marks the same default, so a
      // change made from either surface converges both.
      if (section.store.getSnapshot().status !== 'idle') void section.load()
    }
    const disposers = [
-      ctx.on('settings/changed', refresh),
+      ctx.remote.$on('settings/document-updated', (ns) => {
+        if (ns !== AGENT_PRESET_SETTINGS_NS) return
+        refresh()
+      }),
      ctx.on('connection/reset', () => { refresh() }),
    ]
    return () => { for (const dispose of disposers) dispose() }
@@ -132,10 +137,15 @@ export function apply(ctx: ClientContext): void {
      // the next session keeps offering the previous default until a reload,
      // which is exactly the session the setting claims to govern. A staged
      // pick survives: `load()` prefers it over the refreshed fallback.
-      const settingsMoved = scope.on('settings/changed', (ns?: string) => {
-        if (ns !== undefined && ns !== AGENT_PRESET_SETTINGS_NS) return
+      const settingsMoved = scope.remote.$on('settings/document-updated', (ns) => {
+        if (ns !== AGENT_PRESET_SETTINGS_NS) return
        void seat.load()
      })
+      // Every tab folds the committed preset into the shared session row; the
+      // initiating tab may already have applied the RPC echo, which is idempotent.
+      const presetSelected = scope.remote.$on('agent-preset/selected', (sessionId, agentPreset) => {
+        scope.sessions.noteAgentPreset(sessionId, agentPreset)
+      })
      // Authoring writes a FILE, not a setting, so nothing on the wire
      // announces it — without this the screen that starts the next session
      // keeps offering the roster as it stood when the chip first loaded, and
@@ -168,6 +178,7 @@ export function apply(ctx: ClientContext): void {
      return () => {
        stop()
        settingsMoved()
+        presetSelected()
        rosterReaders.delete(readRoster)
        creatorDraft = undefined
        chip()
--- a/packages/client/ui-agent-preset/src/client/section-store.ts
+++ b/packages/client/ui-agent-preset/src/client/section-store.ts
@@ -137,9 +137,10 @@ export class AgentPresetSectionController {
    /**
     * Called after this page changes the roster DIRECTORY, so the other
     * surfaces reading the same roster re-read it. A settings field moving is
-     * already announced by the host through `settings/changed`; a directory
-     * copied or deleted here is not, and the new-session chip has no other
-     * way to learn a preset it should offer now exists.
+     * already announced by the host through the forwarded
+     * `settings/document-updated`; a directory copied or deleted here is not,
+     * and the new-session chip has no other way to learn a preset it should
+     * offer now exists.
     */
    private readonly rosterChanged: () => void = () => {},
  ) {}
--- a/packages/client/ui-agent-preset/tests/apply.spec.ts
+++ b/packages/client/ui-agent-preset/tests/apply.spec.ts
@@ -10,7 +10,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { resolveSlotLabel } from '@deepseek-ai/dsh-client-ui-slots'
 import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
-import { usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
+import { TestRemote, usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
 import { apply, inject } from '@deepseek-ai/dsh-client-ui-agent-preset/client'
 import { AgentPresetLabel } from '../src/client/AgentPresetLabel.tsx'
 import type { AgentPresetLabelInjected } from '../src/client/AgentPresetLabel.tsx'
@@ -78,6 +78,9 @@ async function bench() {
  await ctx.plugin(SlotsService).await()
  const locale = new LocaleService(ctx)
  ctx.provide('locale', locale)
+  // The plugins inject `remote`; forwarded events reach them through the
+  // same `$dispatch` handoff the connection sink makes.
+  new TestRemote(ctx)
  const calls: string[] = []
  ctx.provide('connection', {
    api: {
@@ -162,6 +165,12 @@ function sessionsDouble(state: {
        return () => listeners.delete(fn)
      },
    },
+    noteAgentPreset: (sessionId: string, agentPreset: string) => {
+      const summary = state.byId[sessionId]
+      if (summary === undefined || summary.agentPreset === agentPreset) return
+      summary.agentPreset = agentPreset
+      for (const fn of listeners) fn()
+    },
    /** Push a list change the way the runtime's store does. */
    notify: () => { for (const fn of listeners) fn() },
  }
@@ -169,7 +178,7 @@ function sessionsDouble(state: {

 describe('ui-agent-preset apply', () => {
  it('declares the services it uses', () => {
-    expect(inject).toEqual(['slots', 'locale', 'connection'])
+    expect(inject).toEqual(['slots', 'locale', 'connection', 'remote'])
  })

  it('registers the General row and the settings section', async () => {
@@ -250,11 +259,11 @@ describe('ui-agent-preset apply', () => {
    await section.load()
    const before = calls.length

-    ctx.emit('settings/changed', 'agent-presets')
+    ctx.remote.$dispatch('settings/document-updated', ['agent-presets', 1])
    await vi.waitFor(() => { expect(calls.length).toBe(before + 2) })
    const afterRelevant = calls.length

-    ctx.emit('settings/changed', 'llm-deepseek')
+    ctx.remote.$dispatch('settings/document-updated', ['llm-deepseek', 1])
    await Promise.resolve()

    // Both surfaces re-read on their own namespace; an unrelated one moves
@@ -282,7 +291,7 @@ describe('ui-agent-preset apply', () => {
    await ctx.plugin({ inject: [...inject], apply }).await()
    const before = calls.length

-    ctx.emit('settings/changed', 'agent-presets')
+    ctx.remote.$dispatch('settings/document-updated', ['agent-presets', 1])
    await vi.waitFor(() => { expect(calls.length).toBeGreaterThan(before) })

    // Only the General row reloads: a section nobody opened has nothing to
@@ -333,17 +342,35 @@ describe('ui-agent-preset apply', () => {
    // An unrelated namespace moves nothing: the chip re-reads on its own
    // setting, not on every settings write in the process.
    moveDefault()
-    ctx.emit('settings/changed', 'llm-deepseek')
+    ctx.remote.$dispatch('settings/document-updated', ['llm-deepseek', 1])
    await Promise.resolve()
    expect(seat.hooks.agentPresetSeat.getSnapshot().current).toBe('standard')

-    ctx.emit('settings/changed', 'agent-presets')
+    ctx.remote.$dispatch('settings/document-updated', ['agent-presets', 1])
    await vi.waitFor(() => {
      expect(seat.hooks.agentPresetSeat.getSnapshot().current).toBe('minimal')
    })
    conversation()
  })

+  it('folds a remote preset commit into the shared session row', async () => {
+    const { ctx, slots } = await bench()
+    declareRoot(slots)
+    declareConversation(slots)
+    ctx.provide('conversation', {} as never)
+    const state = {
+      current: 's1',
+      byId: { s1: { id: 's1', blank: true, agentPreset: 'standard' } },
+    }
+    ctx.provide('sessions', sessionsDouble(state) as never)
+    ctx.provide('workspaces', workspacesDouble() as never)
+    await ctx.plugin({ inject: [...inject, 'conversation', 'sessions', 'workspaces'], apply }).await()
+
+    ctx.remote.$dispatch('agent-preset/selected', ['s1', 'minimal'])
+
+    expect(state.byId.s1.agentPreset).toBe('minimal')
+  })
+
  it('offers a just-authored preset on the new-session chip', async () => {
    const { ctx, slots } = await bench()
    declareRoot(slots)
--- a/packages/client/ui-agent-preset/tsconfig.json
+++ b/packages/client/ui-agent-preset/tsconfig.json
@@ -40,6 +40,9 @@
    },
    {
      "path": "../../support/invariants"
+    },
+    {
+      "path": "../../api/remotes/tsconfig.client.json"
    }
  ]
 }
--- a/packages/client/ui-attachment/README.i18n.yaml
+++ b/packages/client/ui-attachment/README.i18n.yaml
@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# side as of the last confirmed-consistent state. Both languages carry equal authority;
+# after editing either side, bring the other along and re-record with:
+#   pnpm run verify-translation-pairing --write packages/client/ui-attachment/README.md
+README.md: 9fab9c23b958606030b1e87fcbfa45130c980947
+README.zh.md: 668dba11154538f52a9a87692020868c1b8a63d5
--- a/packages/client/ui-attachment/README.md
+++ b/packages/client/ui-attachment/README.md
@@ -0,0 +1,27 @@
+# @deepseek-ai/dsh-client-ui-attachment
+
+English | [中文](README.zh.md)
+
+Pure React attachment atoms (zero cordis): the composer draft-image rail (`AttachmentRail`), the chat-history image gallery (`MessageImage`/`ImageGallery`), and the original-image lightbox (`ImageLightbox`). Every string arrives through label props resolved by the owning plugin's own locale namespace, and nothing here reads application state; `@deepseek-ai/dsh-client-ui-conversation` is the current consumer, bridging its `conversation` dictionary through its `image-labels` module.
+
+## Attachment rail
+
+`AttachmentRail` renders pending draft images as fixed 64px thumbnails (16px radius) in one horizontally scrolling row whose scrollbar stays hidden. Overflow is announced by circular edge arrows instead: each pages one viewport (minus one card of context, floored at 200px) with smooth scrolling (instant under `prefers-reduced-motion: reduce`), and arrow visibility is recomputed from scroll geometry on scroll, item-count changes, and rail size changes (a ResizeObserver on the rail element, so sidebar and panel resizes count, not only window resizes). The rail scrolls horizontally only: a non-passive listener consumes every wheel tick with a vertical component — nothing scrolls the conversation behind the composer — converting a pure vertical wheel to a horizontal step (LINE/PAGE deltas normalized to pixels, per-tick travel clamped to 60px) and keeping a diagonal pan's horizontal intent, while purely horizontal pans stay native. A newly added item is revealed at the rail's end; removal keeps the scroll position, and a rail that mounts over an already-populated draft keeps its start position. Each thumbnail opens its original through `onOpen` on a single click, and its remove control sits inside the card's top-right corner, hidden until the card is hovered or the control keyboard-focused; coarse-pointer (touch) surfaces show it permanently because they have no hover. The owner decides mounting and renders the rail only while items exist.
+
+## Message images and the lightbox
+
+`MessageImage` renders one durable history image bounded to 240px on its longer edge, loading a session-authorized URL through the owner's `ImageLoader`; a failed load renders an explicit retry control, and a settled load answers a single click by opening `ImageLightbox` (clicks during loading are ignored). `ImageGallery` wraps a message's images in one aligned flex group (`end` for user messages, `start` for assistant messages) and renders nothing for an empty list. `ImageLightbox` is a document-level modal preview that closes on Escape, a backdrop press, or its close control, and restores focus to its opener on unmount.
+
+## Model Experience
+
+None, as the package renders pure React atoms in the browser; nothing here reaches a model request.
+
+#### KV Cache effect
+
+None; this package neither assembles nor sends a provider request.
+
+## Known Limitations and Deferred Work
+
+- **Images only** — non-image files have no rail card or history renderer yet; DeepSeek Chat-style file cards and upload-progress states wait until the composer accepts non-image attachments.
+- **No zoom or download in the lightbox** — the preview renders the original at fit-to-viewport size only.
+- **The lightbox does not trap focus** — it sets `aria-modal` and restores focus on close, but Tab can reach the page behind it (behavior carried over from the pre-package component).
--- a/packages/client/ui-attachment/README.zh.md
+++ b/packages/client/ui-attachment/README.zh.md
@@ -0,0 +1,27 @@
+# @deepseek-ai/dsh-client-ui-attachment
+
+[English](README.md) | 中文
+
+纯 React 附件原子组件（零 cordis）：输入框草稿图片栏（`AttachmentRail`）、聊天历史图片画廊（`MessageImage`/`ImageGallery`）与原图灯箱（`ImageLightbox`）。所有文案都由持有方插件在自己的语言命名空间中解析后经 label props 传入，此包不读取任何应用状态；当前消费者是 `@deepseek-ai/dsh-client-ui-conversation`，经其 `image-labels` 模块桥接 `conversation` 词典。
+
+## 附件栏
+
+`AttachmentRail` 将待发送草稿图片渲染为固定 64px（16px 圆角）的缩略图横排，滚动条始终隐藏，溢出改由两端的圆形箭头提示：每次翻页滚动一个视口宽度（减去一张卡片作为上下文，下限 200px）并平滑滚动（`prefers-reduced-motion: reduce` 下瞬时完成），箭头的显隐在滚动、条目数量变化和栏自身尺寸变化时依据滚动几何重算（rail 元素上的 ResizeObserver，因此侧栏、面板的宽度变化也计入，不只是窗口尺寸变化）。附件栏只允许横向滚动：非 passive 监听器消费所有带纵向分量的滚轮事件——不会滚动输入框背后的会话记录——纯纵向滚轮转为横向步进（LINE/PAGE 单位先归一化为像素，单次行程钳制在 60px 内），对角平移保留其横向分量，纯横向平移保持原生滚动。新增条目会滚动到栏尾展示，删除则保持原位，带着已有草稿重新挂载的栏保持起始位置。每张缩略图单击经 `onOpen` 打开原图，删除按钮位于卡片内部右上角，悬停卡片或键盘聚焦时才显示；粗指针（触屏）设备没有悬停，因此常显。是否挂载由持有方决定，仅在有条目时渲染。
+
+## 消息图片与灯箱
+
+`MessageImage` 渲染一张持久化历史图片，长边收敛到 240px，经持有方的 `ImageLoader` 加载会话授权 URL；加载失败渲染显式重试按钮，加载完成后单击打开 `ImageLightbox`（加载中的点击被忽略）。`ImageGallery` 将一条消息的图片包为一个对齐的弹性分组（用户消息 `end`，助手消息 `start`），空列表不渲染。`ImageLightbox` 是文档级模态预览，按 Escape、按下遮罩或点关闭按钮均可关闭，卸载时将焦点还给打开者。
+
+## 模型体验
+
+无。该包（package）在浏览器中渲染纯 React 原子组件；这里没有任何内容进入模型请求。
+
+#### KV Cache 影响
+
+无；该包既不组装也不发送提供方请求。
+
+## 已知限制与暂缓事项
+
+- **仅支持图片** — 非图片文件尚无附件栏卡片与历史渲染；DeepSeek Chat 风格的文件卡片和上传进度状态等输入框接受非图片附件后再做。
+- **灯箱无缩放与下载** — 预览仅以适配视口的尺寸渲染原图。
+- **灯箱不锁定焦点** — 它设置 `aria-modal` 并在关闭时归还焦点，但 Tab 仍可移动到背后的页面（沿袭入包前组件的行为）。
--- a/packages/client/ui-attachment/package.json
+++ b/packages/client/ui-attachment/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@deepseek-ai/dsh-client-ui-attachment",
+  "description": "Pure React attachment atoms for the dsh web UI: draft-image rail, message image gallery, and original-image lightbox (zero cordis)",
+  "version": "0.0.1-rc.1",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/deepseek-ai/deepseek-harness.git",
+    "directory": "packages/client/ui-attachment"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./invariant": {
+      "types": "./lib/types/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "@deepseek-ai/dsh-attachment": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "clsx": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-invariants": "workspace:^",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/invariant.js",
+    "lib/types/**/*.d.ts"
+  ],
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-invariants": "workspace:^"
+  }
+}
--- a/packages/client/ui-attachment/src/AttachmentRail.module.css
+++ b/packages/client/ui-attachment/src/AttachmentRail.module.css
@@ -0,0 +1,118 @@
+/* Thumbnail geometry mirrors DeepSeek Chat's composer rail: 64px cards with a
+   16px radius, remove control fully inside the card, arrows overlaid at the
+   edges instead of a scrollbar. */
+
+.root {
+  position: relative;
+  min-width: 0;
+}
+
+.rail {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* Edge arrows page the overflow; the scrollbar stays hidden (both engines). */
+  scrollbar-width: none;
+  /* The rail scrolls on the composer's elevated input surface: bind the l2
+     pair (ui-theme styles/scrollbar.css rebinding contract) so anything that
+     does draw a thumb here matches the surface. */
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+}
+
+.rail::-webkit-scrollbar {
+  display: none;
+}
+
+.item {
+  position: relative;
+  flex: 0 0 64px;
+  width: 64px;
+  height: 64px;
+}
+
+.thumbnail {
+  width: 64px;
+  height: 64px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 16px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  cursor: zoom-in;
+}
+
+.thumbnail img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--dsw-alias-button-contrast-fill);
+  color: var(--dsw-alias-label-primary-inverted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.item:hover .remove,
+.remove:focus-visible {
+  opacity: 1;
+}
+
+/* Touch surfaces have no hover to reveal the control. */
+@media (pointer: coarse) {
+  .remove {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .remove {
+    transition: none;
+  }
+}
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 999px;
+  background: var(--dsw-specific-input-major);
+  color: var(--dsw-alias-label-secondary);
+  box-shadow: var(--dsw-shadow-lv2);
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.arrow:hover {
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+}
+
+.arrowLeft {
+  left: 4px;
+}
+
+.arrowRight {
+  right: 4px;
+}
--- a/packages/client/ui-attachment/src/AttachmentRail.tsx
+++ b/packages/client/ui-attachment/src/AttachmentRail.tsx
@@ -0,0 +1,200 @@
+/** Draft-attachment thumbnail rail: scrollbar-less horizontal overflow paged
+ * by edge arrows, hover-revealed per-item remove, single-click open. */
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import clsx from 'clsx'
+import {
+  IconChevronLeftOutline14, IconChevronRightOutline14, IconCloseFill14,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './AttachmentRail.module.css'
+
+/** One rail thumbnail; strings arrive resolved (zero-cordis atom). */
+export interface AttachmentRailItem {
+  /** Stable identity for the React key. */
+  id: string
+  /** Object or data URL rendered as the thumbnail. */
+  previewUrl: string
+  /** Image alt text (display name with the owner's fallback applied). */
+  alt: string
+  /** Accessible label of the item's remove control. */
+  removeLabel: string
+}
+
+/** Rail-level strings the owner resolves from its own locale namespace. */
+export interface AttachmentRailLabels {
+  /** Accessible name of the rail group. */
+  group: string
+  /** Thumbnail tooltip inviting the original-image preview. */
+  open: string
+  /** Accessible label of the left paging arrow. */
+  scrollLeft: string
+  /** Accessible label of the right paging arrow. */
+  scrollRight: string
+}
+
+/** Approximate pixels per wheel step for `deltaMode` LINE deltas (Firefox
+ * notch wheels report lines, not pixels). */
+const WHEEL_LINE_PX = 16
+
+/** Smooth paging unless the user asked for reduced motion. */
+function pageBehavior(): ScrollBehavior {
+  // jsdom (the unit lane) implements no matchMedia despite lib.dom's
+  // non-optional typing; the optional call keeps that lane on the default.
+  // oxlint-disable-next-line typescript/no-unnecessary-condition
+  return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth'
+}
+
+/**
+ * Horizontal thumbnail rail over the caller's draft attachments.
+ *
+ * The rail scrolls with its scrollbar hidden; overflow is announced by edge
+ * arrows recomputed from scroll geometry on scroll, item-count changes, and
+ * rail size changes (a ResizeObserver on the rail element, so sidebar or
+ * panel resizes count, not only window resizes). A vertical wheel pans the
+ * rail horizontally and is consumed exclusively (non-passive listener), a
+ * newly added item is revealed at the rail's end while a rail that mounts
+ * over an existing draft keeps its start position, and each thumbnail opens
+ * on a single click while its remove control sits inside the card and
+ * reveals on hover or focus. The owner decides mounting; it renders the rail
+ * only while items exist.
+ *
+ * @param props.items - resolved thumbnails in draft order.
+ * @param props.labels - rail-level strings (group name, open tooltip, arrows).
+ * @param props.onOpen - single-click open of one item's original image.
+ * @param props.onRemove - remove one item from the draft.
+ * @returns the rail group with its paging arrows.
+ */
+export function AttachmentRail<T extends AttachmentRailItem>({ items, labels, onOpen, onRemove }: {
+  items: readonly T[]
+  labels: AttachmentRailLabels
+  onOpen: (item: T) => void
+  onRemove: (item: T) => void
+}) {
+  const railRef = useRef<HTMLDivElement | null>(null)
+  // null marks the first layout pass: a rail that MOUNTS over an existing
+  // draft (session switch back to held images) is initial display, not
+  // growth, and must not jump to the end.
+  const countRef = useRef<number | null>(null)
+  const [edges, setEdges] = useState({ left: false, right: false })
+  const updateEdges = useCallback(() => {
+    const el = railRef.current
+    /* v8 ignore next -- defensive: every caller runs while the rail element is mounted. */
+    if (el === null) return
+    // 1px slack: engines report fractional scroll positions at the edges.
+    const left = el.scrollLeft > 1
+    const right = el.scrollLeft < el.scrollWidth - el.clientWidth - 1
+    setEdges(prev => prev.left === left && prev.right === right ? prev : { left, right })
+  }, [])
+  useLayoutEffect(() => {
+    const grew = countRef.current !== null && items.length > countRef.current
+    countRef.current = items.length
+    const el = railRef.current
+    /* v8 ignore next -- defensive: the rail div renders unconditionally, so the layout effect always finds it. */
+    if (el === null) return
+    // A newly added attachment lands at the rail's end: reveal it.
+    if (grew) el.scrollLeft = el.scrollWidth - el.clientWidth
+    updateEdges()
+  }, [items.length, updateEdges])
+  useEffect(() => {
+    const el = railRef.current
+    /* v8 ignore next -- defensive: the rail div renders unconditionally, so the mount effect always finds it. */
+    if (el === null) return
+    // The rail's width follows the composer, which resizes with sidebars and
+    // panels, not only the window — observe the element itself. jsdom (the
+    // unit lane) implements no ResizeObserver; every browser gets the
+    // subscription.
+    let disconnect = (): void => {}
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(updateEdges)
+      observer.observe(el)
+      disconnect = () => { observer.disconnect() }
+    }
+    // The rail scrolls horizontally ONLY: any wheel tick with a vertical
+    // component is consumed — without preventDefault it would also scroll the
+    // conversation behind the composer, and React's root wheel listener is
+    // passive, so the exclusion needs this manually attached non-passive
+    // listener. A diagonal trackpad pan keeps its horizontal intent; a pure
+    // vertical wheel converts to a horizontal step, with LINE and PAGE deltas
+    // (Firefox notch wheels) normalized to pixels before the per-tick clamp
+    // that keeps a fast wheel followable. A purely horizontal pan stays
+    // native.
+    const onWheel = (event: globalThis.WheelEvent): void => {
+      if (event.deltaY === 0) return
+      const scale = event.deltaMode === WheelEvent.DOM_DELTA_LINE
+        ? WHEEL_LINE_PX
+        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? el.clientWidth : 1
+      event.preventDefault()
+      el.scrollBy({
+        left: event.deltaX !== 0
+          ? event.deltaX * scale
+          : Math.sign(event.deltaY) * Math.min(Math.abs(event.deltaY) * scale, 60),
+        behavior: 'auto',
+      })
+    }
+    el.addEventListener('wheel', onWheel, { passive: false })
+    return () => {
+      disconnect()
+      el.removeEventListener('wheel', onWheel)
+    }
+  }, [updateEdges])
+  const page = (direction: -1 | 1): void => {
+    const el = railRef.current
+    /* v8 ignore next -- defensive: the arrows render only while the rail is mounted, so a click cannot find a null ref. */
+    if (el === null) return
+    // One viewport minus a card keeps the last visible thumbnail as context;
+    // the floor keeps narrow rails paging a useful distance.
+    el.scrollBy({ left: direction * Math.max(el.clientWidth - 64, 200), behavior: pageBehavior() })
+  }
+  return (
+    <div className={css.root}>
+      {edges.left && (
+        <button
+          type="button"
+          className={clsx(css.arrow, css.arrowLeft)}
+          aria-label={labels.scrollLeft}
+          onClick={() => { page(-1) }}
+        >
+          <IconChevronLeftOutline14 />
+        </button>
+      )}
+      <div
+        ref={railRef}
+        className={css.rail}
+        role="group"
+        aria-label={labels.group}
+        onScroll={updateEdges}
+      >
+        {items.map(item => (
+          <div key={item.id} className={css.item}>
+            <button
+              type="button"
+              className={css.thumbnail}
+              title={labels.open}
+              onClick={() => { onOpen(item) }}
+            >
+              <img src={item.previewUrl} alt={item.alt} />
+            </button>
+            <button
+              type="button"
+              className={css.remove}
+              aria-label={item.removeLabel}
+              onClick={() => { onRemove(item) }}
+            >
+              <IconCloseFill14 size={12} />
+            </button>
+          </div>
+        ))}
+      </div>
+      {edges.right && (
+        <button
+          type="button"
+          className={clsx(css.arrow, css.arrowRight)}
+          aria-label={labels.scrollRight}
+          onClick={() => { page(1) }}
+        >
+          <IconChevronRightOutline14 />
+        </button>
+      )}
+    </div>
+  )
+}
--- a/packages/client/ui-conversation/src/client/skeleton/ImageLightbox.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/ImageLightbox.module.css
--- a/packages/client/ui-attachment/src/ImageLightbox.tsx
+++ b/packages/client/ui-attachment/src/ImageLightbox.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import css from './ImageLightbox.module.css'
+
+/** Lightbox strings the owner resolves from its own locale namespace. */
+export interface ImageLightboxLabels {
+  /** Accessible name of the preview dialog. */
+  dialog: string
+  /** Accessible label of the close control. */
+  close: string
+}
+
+/**
+ * Document-level original-image preview opened by clicking a thumbnail.
+ * Closes on Escape, backdrop press, or the close control, and restores focus
+ * to the opener on unmount. Rendered through a body portal: an opener inside
+ * a transformed or filtered ancestor would otherwise trap the fixed backdrop
+ * in that ancestor's box instead of covering the viewport.
+ *
+ * @param props.src - the original image URL.
+ * @param props.alt - the image's alt text.
+ * @param props.labels - dialog and close-control strings.
+ * @param props.onClose - dismiss callback owned by the opener.
+ * @returns the modal preview dialog.
+ */
+export function ImageLightbox({ src, alt, labels, onClose }: {
+  src: string
+  alt: string
+  labels: ImageLightboxLabels
+  onClose: () => void
+}) {
+  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 createPortal(
+    <div
+      className={css.backdrop}
+      role="dialog"
+      aria-modal="true"
+      aria-label={labels.dialog}
+      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={labels.close} onClick={onClose}>×</button>
+    </div>,
+    document.body,
+  )
+}
--- a/packages/client/ui-conversation/src/client/chat/MessageImage.module.css
+++ b/packages/client/ui-conversation/src/client/chat/MessageImage.module.css
@@ -24,7 +24,7 @@
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
-  border-radius: 12px;
+  border-radius: 16px;
  background: var(--dsw-alias-interactive-bg-hover);
  cursor: zoom-in;
 }
--- a/packages/client/ui-attachment/src/MessageImage.tsx
+++ b/packages/client/ui-attachment/src/MessageImage.tsx
@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
+import { ImageLightbox } from './ImageLightbox.tsx'
+import type { ImageLightboxLabels } from './ImageLightbox.tsx'
+import css from './MessageImage.module.css'
+
+/** Loads a session-authorized durable image URL. */
+export type ImageLoader = (attachment: ImageAttachmentRef) => Promise<string>
+
+/** Message-image strings the owner resolves from its own locale namespace. */
+export interface MessageImageLabels {
+  /** Fallback display name for an unnamed image. */
+  image: string
+  /** Thumbnail tooltip inviting the original-image preview. */
+  open: string
+  /** Accessible thumbnail label; receives the image's display name. */
+  openNamed: (label: string) => string
+  /** Loading placeholder shown until bytes resolve. */
+  loading: string
+  /** Retry-control label shown when the load fails. */
+  loadFailed: string
+  /** Lightbox strings forwarded to the opened preview. */
+  lightbox: ImageLightboxLabels
+}
+
+/**
+ * Compact history renderer with retryable loading and click-to-open original
+ * preview.
+ *
+ * @param props.attachment - the durable image reference to load and bound.
+ * @param props.load - session-authorized URL loader.
+ * @param props.labels - resolved strings (tooltip, loading, retry, lightbox).
+ * @returns the bounded thumbnail button, or the retry control on failure.
+ */
+export function MessageImage({ attachment, load, labels }: {
+  attachment: ImageAttachmentRef
+  load: ImageLoader
+  labels: MessageImageLabels
+}) {
+  const [src, setSrc] = useState<string | null>(null)
+  const [error, setError] = useState(false)
+  const [open, setOpen] = useState(false)
+  // Retry re-arms the one load effect below, so every attempt — first load or
+  // retry — runs under the same liveness guard and the same reset.
+  const [attempt, setAttempt] = useState(0)
+  const request = useCallback(() => { setAttempt(a => a + 1) }, [])
+  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])
+
+  useEffect(() => {
+    let live = true
+    setError(false)
+    setSrc(null)
+    void load(attachment).then((url) => { if (live) setSrc(url) }).catch(() => { if (live) setError(true) })
+    return () => { live = false }
+  }, [attachment, load, attempt])
+
+  const label = attachment.name ?? labels.image
+  if (error) return <button type="button" className={css.error} onClick={request}>{labels.loadFailed}</button>
+  return (
+    <>
+      <button
+        type="button"
+        className={css.frame}
+        style={size}
+        title={labels.open}
+        aria-label={labels.openNamed(label)}
+        onClick={() => { if (src !== null) setOpen(true) }}
+      >
+        {src === null ? <span className={css.loading}>{labels.loading}</span> : <img src={src} alt={label} />}
+      </button>
+      {open && src !== null && <ImageLightbox src={src} alt={label} labels={labels.lightbox} onClose={close} />}
+    </>
+  )
+}
+
+/** Wrapping image group shared by user and assistant history. */
+export function ImageGallery({ images, load, align, labels }: {
+  images: readonly { attachment: ImageAttachmentRef }[]
+  load: ImageLoader
+  align: 'start' | 'end'
+  labels: MessageImageLabels
+}) {
+  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} labels={labels} />
+      ))}
+    </div>
+  )
+}
--- a/packages/client/ui-attachment/src/css-modules.d.ts
+++ b/packages/client/ui-attachment/src/css-modules.d.ts
@@ -0,0 +1,6 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+
+declare module '*.css'
--- a/packages/client/ui-attachment/src/index.ts
+++ b/packages/client/ui-attachment/src/index.ts
@@ -0,0 +1,14 @@
+/**
+ * Pure React attachment atoms (zero cordis): the composer draft-image rail,
+ * the chat-history image gallery, and the original-image lightbox. Owners
+ * resolve every string through their own locale namespace and pass it down;
+ * nothing here reads application state.
+ * @module @deepseek-ai/dsh-client-ui-attachment
+ */
+
+export { AttachmentRail } from './AttachmentRail.tsx'
+export type { AttachmentRailItem, AttachmentRailLabels } from './AttachmentRail.tsx'
+export { ImageLightbox } from './ImageLightbox.tsx'
+export type { ImageLightboxLabels } from './ImageLightbox.tsx'
+export { ImageGallery, MessageImage } from './MessageImage.tsx'
+export type { ImageLoader, MessageImageLabels } from './MessageImage.tsx'
--- a/packages/client/ui-attachment/src/invariant.ts
+++ b/packages/client/ui-attachment/src/invariant.ts
@@ -0,0 +1,31 @@
+/**
+ * Package-owned invariant companion for `@deepseek-ai/dsh-client-ui-attachment`.
+ * @module @deepseek-ai/dsh-client-ui-attachment/invariant
+ */
+
+/* jscpd:ignore-start */
+import type { Context } from '@deepseek-ai/cordis'
+import type { InvariantInstaller } from '@deepseek-ai/dsh-invariants'
+
+const PACKAGE_NAME = '@deepseek-ai/dsh-client-ui-attachment'
+
+/** Cordis companion plugin name. */
+export const name = 'client-ui-attachment-invariant'
+/** Service required before the companion can reserve package ownership. */
+export const inject = ['invariants']
+
+/**
+ * No runtime invariant: pure props-in React atoms with no Cordis API —
+ * no events, no services, no mutable cross-plugin state; rendering contracts
+ * are asserted directly by this package's component specs.
+ */
+const install: InvariantInstaller = () => {}
+
+/**
+ * Register this package's invariant companion.
+ * @param ctx - Cordis context carrying the invariant service.
+ * @returns the installed registration's disposer after setup succeeds.
+ */
+export const apply = (ctx: Context): Promise<() => void> =>
+  Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install))
+/* jscpd:ignore-end */
--- a/packages/client/ui-attachment/tests/attachment-rail.spec.tsx
+++ b/packages/client/ui-attachment/tests/attachment-rail.spec.tsx
@@ -0,0 +1,173 @@
+// @vitest-environment jsdom
+// AttachmentRail behavior in the jsdom lane: item rendering and callbacks,
+// arrow paging over stubbed scroll geometry (jsdom lays nothing out), the
+// exclusive vertical-wheel pan, and the new-item end reveal.
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render } from '@testing-library/react'
+import { AttachmentRail } from '../src/AttachmentRail.tsx'
+import type { AttachmentRailItem, AttachmentRailLabels } from '../src/AttachmentRail.tsx'
+
+afterEach(cleanup)
+
+// jsdom implements no ResizeObserver; the stub records instances so a test
+// can drive the size-change recompute path.
+const observers: { callback: ResizeObserverCallback; observed: Element[] }[] = []
+beforeEach(() => {
+  observers.length = 0
+  vi.stubGlobal('ResizeObserver', class {
+    observed: Element[] = []
+    constructor(callback: ResizeObserverCallback) {
+      observers.push({ callback, observed: this.observed })
+    }
+
+    observe(el: Element) { this.observed.push(el) }
+    disconnect() { this.observed.length = 0 }
+  })
+})
+afterEach(() => { vi.unstubAllGlobals() })
+
+const labels: AttachmentRailLabels = {
+  group: '待发送图片',
+  open: '查看原图',
+  scrollLeft: '向左滚动图片',
+  scrollRight: '向右滚动图片',
+}
+
+function item(id: string): AttachmentRailItem {
+  return { id, previewUrl: `blob:${id}`, alt: `${id}.png`, removeLabel: `移除图片 ${id}.png` }
+}
+
+/** Stub the rail's scroll geometry (jsdom reports 0 for every metric). */
+function stubGeometry(rail: HTMLElement, { scrollWidth, clientWidth }: { scrollWidth: number; clientWidth: number }) {
+  Object.defineProperty(rail, 'scrollWidth', { value: scrollWidth, configurable: true })
+  Object.defineProperty(rail, 'clientWidth', { value: clientWidth, configurable: true })
+  let scrollLeft = 0
+  Object.defineProperty(rail, 'scrollLeft', {
+    configurable: true,
+    get: () => scrollLeft,
+    set: (value: number) => { scrollLeft = value },
+  })
+  const scrollBy = vi.fn((options: { left: number }) => {
+    scrollLeft = Math.max(0, Math.min(scrollWidth - clientWidth, scrollLeft + options.left))
+  })
+  rail.scrollBy = scrollBy as unknown as typeof rail.scrollBy
+  return { scrollBy, setScrollLeft: (value: number) => { scrollLeft = value } }
+}
+
+describe('AttachmentRail', () => {
+  it('renders thumbnails in order and routes open and remove clicks', () => {
+    const onOpen = vi.fn()
+    const onRemove = vi.fn()
+    const items = [item('a'), item('b')]
+    const view = render(<AttachmentRail items={items} labels={labels} onOpen={onOpen} onRemove={onRemove} />)
+    const rail = view.getByRole('group', { name: '待发送图片' })
+    expect([...rail.querySelectorAll('img')].map(img => img.getAttribute('alt'))).toEqual(['a.png', 'b.png'])
+    fireEvent.click(view.getAllByTitle('查看原图')[0]!)
+    expect(onOpen).toHaveBeenCalledWith(items[0])
+    fireEvent.click(view.getByRole('button', { name: '移除图片 b.png' }))
+    expect(onRemove).toHaveBeenCalledWith(items[1])
+  })
+
+  it('shows edge arrows from scroll geometry and pages a viewport at a time', () => {
+    const view = render(
+      <AttachmentRail items={[item('a'), item('b'), item('c')]} labels={labels} onOpen={vi.fn()} onRemove={vi.fn()} />,
+    )
+    const rail = view.getByRole('group', { name: '待发送图片' })
+    const { scrollBy } = stubGeometry(rail, { scrollWidth: 400, clientWidth: 200 })
+    // No arrows until geometry is observed (mount saw jsdom's zero metrics).
+    expect(view.queryByLabelText('向右滚动图片')).toBeNull()
+    fireEvent.scroll(rail)
+    // Same-edges scroll takes the memoized-state path.
+    fireEvent.scroll(rail)
+    expect(view.queryByLabelText('向左滚动图片')).toBeNull()
+    const right = view.getByLabelText('向右滚动图片')
+    // clientWidth 200 - 64 < the 200 floor: pages by the floor.
+    fireEvent.click(right)
+    expect(scrollBy).toHaveBeenCalledWith({ left: 200, behavior: 'smooth' })
+    fireEvent.scroll(rail)
+    // Scrolled to the far edge: only the left arrow remains.
+    expect(view.queryByLabelText('向右滚动图片')).toBeNull()
+    fireEvent.click(view.getByLabelText('向左滚动图片'))
+    expect(scrollBy).toHaveBeenCalledWith({ left: -200, behavior: 'smooth' })
+    fireEvent.scroll(rail)
+    expect(view.queryByLabelText('向左滚动图片')).toBeNull()
+    expect(view.getByLabelText('向右滚动图片')).toBeTruthy()
+  })
+
+  it('shows both arrows mid-scroll and recomputes when the rail itself resizes', () => {
+    const view = render(
+      <AttachmentRail items={[item('a'), item('b'), item('c')]} labels={labels} onOpen={vi.fn()} onRemove={vi.fn()} />,
+    )
+    const rail = view.getByRole('group', { name: '待发送图片' })
+    const { setScrollLeft } = stubGeometry(rail, { scrollWidth: 400, clientWidth: 200 })
+    setScrollLeft(100)
+    // The component observes the rail element, not the window: a sidebar or
+    // panel resize reaches it through the ResizeObserver callback.
+    expect(observers.at(-1)?.observed).toContain(rail)
+    act(() => { observers.at(-1)!.callback([], undefined as never) })
+    expect(view.getByLabelText('向左滚动图片')).toBeTruthy()
+    expect(view.getByLabelText('向右滚动图片')).toBeTruthy()
+  })
+
+  it('pans horizontally on a vertical wheel, consuming the event, with clamped normalized travel', () => {
+    const view = render(
+      <AttachmentRail items={[item('a'), item('b')]} labels={labels} onOpen={vi.fn()} onRemove={vi.fn()} />,
+    )
+    const rail = view.getByRole('group', { name: '待发送图片' })
+    const { scrollBy } = stubGeometry(rail, { scrollWidth: 400, clientWidth: 200 })
+    // Converted ticks are consumed (preventDefault): fireEvent returns false.
+    expect(fireEvent.wheel(rail, { deltaY: 30 })).toBe(false)
+    expect(scrollBy).toHaveBeenCalledWith({ left: 30, behavior: 'auto' })
+    fireEvent.wheel(rail, { deltaY: 500 })
+    expect(scrollBy).toHaveBeenCalledWith({ left: 60, behavior: 'auto' })
+    fireEvent.wheel(rail, { deltaY: -500 })
+    expect(scrollBy).toHaveBeenCalledWith({ left: -60, behavior: 'auto' })
+    // Firefox notch wheels report lines; a page-mode wheel reports viewports.
+    fireEvent.wheel(rail, { deltaY: 2, deltaMode: WheelEvent.DOM_DELTA_LINE })
+    expect(scrollBy).toHaveBeenCalledWith({ left: 32, behavior: 'auto' })
+    fireEvent.wheel(rail, { deltaY: -1, deltaMode: WheelEvent.DOM_DELTA_PAGE })
+    expect(scrollBy).toHaveBeenCalledWith({ left: -60, behavior: 'auto' })
+    // A diagonal pan is consumed too — nothing vertical may escape the rail —
+    // and keeps its horizontal intent.
+    expect(fireEvent.wheel(rail, { deltaX: 12, deltaY: 30 })).toBe(false)
+    expect(scrollBy).toHaveBeenCalledWith({ left: 12, behavior: 'auto' })
+    // A purely horizontal pan and a zero-delta wheel keep native behavior.
+    expect(fireEvent.wheel(rail, { deltaX: 12, deltaY: 0 })).toBe(true)
+    fireEvent.wheel(rail, { deltaY: 0 })
+    expect(scrollBy).toHaveBeenCalledTimes(6)
+  })
+
+  it('pages instantly under a reduced-motion preference, smoothly otherwise', () => {
+    for (const [matches, behavior] of [[true, 'auto'], [false, 'smooth']] as const) {
+      vi.stubGlobal('matchMedia', vi.fn(() => ({ matches }) as MediaQueryList))
+      const view = render(
+        <AttachmentRail items={[item('a'), item('b'), item('c')]} labels={labels} onOpen={vi.fn()} onRemove={vi.fn()} />,
+      )
+      const rail = view.getByRole('group', { name: '待发送图片' })
+      const { scrollBy } = stubGeometry(rail, { scrollWidth: 400, clientWidth: 200 })
+      fireEvent.scroll(rail)
+      fireEvent.click(view.getByLabelText('向右滚动图片'))
+      expect(scrollBy).toHaveBeenCalledWith({ left: 200, behavior })
+      view.unmount()
+    }
+  })
+
+  it('reveals the rail end when an item is added, not when one is removed', () => {
+    const first = [item('a'), item('b')]
+    const view = render(
+      <AttachmentRail items={first} labels={labels} onOpen={vi.fn()} onRemove={vi.fn()} />,
+    )
+    const rail = view.getByRole('group', { name: '待发送图片' })
+    stubGeometry(rail, { scrollWidth: 400, clientWidth: 200 })
+    view.rerender(
+      <AttachmentRail items={[...first, item('c')]} labels={labels} onOpen={vi.fn()} onRemove={vi.fn()} />,
+    )
+    expect(rail.scrollLeft).toBe(200)
+    view.rerender(
+      <AttachmentRail items={first} labels={labels} onOpen={vi.fn()} onRemove={vi.fn()} />,
+    )
+    // Removal keeps the position; only growth jumps to the end.
+    expect(rail.scrollLeft).toBe(200)
+  })
+})
--- a/packages/client/ui-attachment/tests/image-lightbox.spec.tsx
+++ b/packages/client/ui-attachment/tests/image-lightbox.spec.tsx
@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import { ImageLightbox } from '../src/ImageLightbox.tsx'
+
+afterEach(cleanup)
+
+const labels = { dialog: '原图预览', close: '关闭原图预览' }
+
+describe('ImageLightbox', () => {
+  it('focuses its close control, closes by button and Escape, and restores focus', () => {
+    const opener = document.createElement('button')
+    document.body.appendChild(opener)
+    opener.focus()
+    const onClose = vi.fn()
+    const view = render(<ImageLightbox src="blob:original" alt="原图" labels={labels} onClose={onClose} />)
+    const close = view.getByRole('button', { name: '关闭原图预览' })
+    expect(document.activeElement).toBe(close)
+    fireEvent.keyDown(window, { key: 'a' })
+    expect(onClose).not.toHaveBeenCalled()
+    fireEvent.keyDown(window, { key: 'Escape' })
+    fireEvent.click(close)
+    expect(onClose).toHaveBeenCalledTimes(2)
+    view.unmount()
+    expect(document.activeElement).toBe(opener)
+    opener.remove()
+  })
+
+  it('tolerates a focus owner it cannot restore (no active element at mount)', () => {
+    // jsdom always reports body as the fallback active element; stub the
+    // element-less state a detached focus can leave.
+    Object.defineProperty(document, 'activeElement', { configurable: true, get: () => null })
+    try {
+      const view = render(<ImageLightbox src="blob:original" alt="原图" labels={labels} onClose={vi.fn()} />)
+      view.unmount()
+    } finally {
+      delete (document as { activeElement?: unknown }).activeElement
+    }
+  })
+
+  it('closes on a backdrop press but not on a press over the image', () => {
+    const onClose = vi.fn()
+    const view = render(<ImageLightbox src="blob:original" alt="原图" labels={labels} onClose={onClose} />)
+    fireEvent.mouseDown(view.getByRole('img'))
+    expect(onClose).not.toHaveBeenCalled()
+    fireEvent.mouseDown(view.getByRole('dialog', { name: '原图预览' }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+})
--- a/packages/client/ui-attachment/tests/invariant.spec.ts
+++ b/packages/client/ui-attachment/tests/invariant.spec.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { Context } from '@deepseek-ai/cordis'
+import * as AttachmentInvariant from '@deepseek-ai/dsh-client-ui-attachment/invariant'
+import InvariantService from '@deepseek-ai/dsh-invariants'
+
+describe('invariant companion', () => {
+  it('registers under the package name with an empty installer', async () => {
+    const ctx = new Context()
+    await ctx.plugin(InvariantService, { enabled: true })
+    await expect(ctx.plugin(AttachmentInvariant).await()).resolves.toBeDefined()
+  })
+})
--- a/packages/client/ui-attachment/tests/message-image.spec.tsx
+++ b/packages/client/ui-attachment/tests/message-image.spec.tsx
@@ -0,0 +1,103 @@
+// @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 { ImageGallery, MessageImage } from '../src/MessageImage.tsx'
+import type { MessageImageLabels } from '../src/MessageImage.tsx'
+
+afterEach(cleanup)
+
+const labels: MessageImageLabels = {
+  image: '图片',
+  open: '查看原图',
+  openNamed: label => `${label}，点击查看原图`,
+  loading: '图片加载中…',
+  loadFailed: '图片加载失败，点击重试',
+  lightbox: { dialog: '原图预览', close: '关闭原图预览' },
+}
+
+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 clicks into the original', async () => {
+    const load = vi.fn().mockResolvedValue('blob:history')
+    const view = render(<MessageImage attachment={attachment} load={load} labels={labels} />)
+    const frame = view.getByRole('button', { name: 'history.png，点击查看原图' })
+    expect(frame.getAttribute('style')).toContain('width: 240px')
+    expect(frame.getAttribute('style')).toContain('height: 120px')
+    expect(frame.getAttribute('title')).toBe('查看原图')
+    await waitFor(() => { expect(view.getByAltText('history.png')).toBeTruthy() })
+    expect(load).toHaveBeenCalledWith(attachment)
+    fireEvent.click(frame)
+    expect(view.getByRole('dialog', { name: '原图预览' })).toBeTruthy()
+    fireEvent.click(view.getByRole('button', { name: '关闭原图预览' }))
+    expect(view.queryByRole('dialog', { name: '原图预览' })).toBeNull()
+  })
+
+  it('ignores a click while the thumbnail is still loading', () => {
+    const load = vi.fn(() => new Promise<string>(() => {}))
+    const view = render(<MessageImage attachment={attachment} load={load} labels={labels} />)
+    const frame = view.getByRole('button', { name: 'history.png，点击查看原图' })
+    expect(view.getByText('图片加载中…')).toBeTruthy()
+    fireEvent.click(frame)
+    expect(view.queryByRole('dialog')).toBeNull()
+  })
+
+  it('falls back to the image label for an unnamed attachment', async () => {
+    const { name: _named, ...unnamed } = attachment
+    const load = vi.fn().mockResolvedValue('blob:unnamed')
+    const view = render(<MessageImage attachment={unnamed} load={load} labels={labels} />)
+    await waitFor(() => { expect(view.getByAltText('图片')).toBeTruthy() })
+    expect(view.getByRole('button', { name: '图片，点击查看原图' })).toBeTruthy()
+  })
+
+  it('surfaces a retry control when durable bytes cannot be read, including a failed retry', async () => {
+    const load = vi.fn()
+      .mockRejectedValueOnce(new Error('offline'))
+      .mockRejectedValueOnce(new Error('still offline'))
+      .mockResolvedValueOnce('blob:retry')
+    const view = render(<MessageImage attachment={attachment} load={load} labels={labels} />)
+    const retry = await view.findByRole('button', { name: '图片加载失败，点击重试' })
+    fireEvent.click(retry)
+    const retryAgain = await view.findByRole('button', { name: '图片加载失败，点击重试' })
+    fireEvent.click(retryAgain)
+    await waitFor(() => { expect(view.getByAltText('history.png')).toBeTruthy() })
+    expect(load).toHaveBeenCalledTimes(3)
+  })
+
+  it('ignores a load settling after unmount', async () => {
+    let resolve: ((url: string) => void) | undefined
+    const load = vi.fn(() => new Promise<string>((r) => { resolve = r }))
+    const view = render(<MessageImage attachment={attachment} load={load} labels={labels} />)
+    view.unmount()
+    resolve?.('blob:late')
+    await Promise.resolve()
+    let reject: ((error: Error) => void) | undefined
+    const failing = vi.fn(() => new Promise<string>((_r, rej) => { reject = rej }))
+    const second = render(<MessageImage attachment={attachment} load={failing} labels={labels} />)
+    second.unmount()
+    reject?.(new Error('late failure'))
+    await Promise.resolve()
+  })
+})
+
+describe('ImageGallery', () => {
+  it('renders nothing without images and an aligned wrapping group with them', async () => {
+    const load = vi.fn().mockResolvedValue('blob:gallery')
+    const empty = render(<ImageGallery images={[]} load={load} align="start" labels={labels} />)
+    expect(empty.container.firstChild).toBeNull()
+    const view = render(
+      <ImageGallery images={[{ attachment }, { attachment }]} load={load} align="end" labels={labels} />,
+    )
+    expect(view.container.querySelector('[data-align="end"]')).not.toBeNull()
+    await waitFor(() => { expect(view.getAllByAltText('history.png')).toHaveLength(2) })
+  })
+})
--- a/packages/client/ui-attachment/tsconfig.json
+++ b/packages/client/ui-attachment/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.base.client.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "lib/types"
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "../../attachment/attachment"
+    },
+    {
+      "path": "../../support/invariants"
+    },
+    {
+      "path": "../ui-primitives"
+    }
+  ]
+}
--- a/packages/client/ui-attachment/tsdown.config.ts
+++ b/packages/client/ui-attachment/tsdown.config.ts
@@ -0,0 +1,35 @@
+import { clientOnly } from '../tsdown.client.ts'
+
+// TODO(client-atoms): verbatim copy of ui-primitives/tsdown.config.ts (only
+// the package differs). On a third atoms package, extract a shared css-stub
+// client-library preset in packages/client/tsdown.client.ts instead of a
+// fourth copy.
+/**
+ * ui-attachment is browser-only, but its lib bundle IS imported under plain
+ * Node because the web shell is a lib (dsh-client-web's lib chain reaches
+ * this package). CSS imports are therefore stubbed to empty modules instead
+ * of externalized — the hashed class maps only matter in bundler contexts
+ * (loader module table / vite source paths), which compile src directly and
+ * never read lib.
+ */
+export default clientOnly([{
+  entry: ['lib/types/index.js', 'lib/types/invariant.js'],
+  outDir: 'lib',
+  format: ['esm'],
+  platform: 'neutral',
+  target: 'es2024',
+  fixedExtension: false,
+  dts: false,
+  clean: false,
+  plugins: [{
+    name: 'dsh-css-stub',
+    resolveId(source: string) {
+      if (!source.endsWith('.css')) return null
+      return `\0dsh-css-stub:${source}.mjs`
+    },
+    load(id: string) {
+      if (!id.startsWith('\0dsh-css-stub:')) return null
+      return 'export default {};'
+    },
+  }],
+}])
--- a/packages/client/ui-command/README.i18n.yaml
+++ b/packages/client/ui-command/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-command/README.md
-README.md: e49ce89804886a11f102fcaf60316e8044965c10
-README.zh.md: 8bd5afd7d0a173980f476cb96f8115525602b0b4
+README.md: 60b70cfbc3784dd5b138f8857270c4bbdc0fd634
+README.zh.md: 639b7f997e967527232bb88116558c5457b4d497
--- a/packages/client/ui-command/README.md
+++ b/packages/client/ui-command/README.md
@@ -6,7 +6,7 @@ Client command API (`ctx.command`): the session-keyed command-directory cache, t

 `src/client/contract.ts` is the fixed business contract: `CommandServiceContract.register(name, spec)` and `decorate(name, spec)` are everything a business package consumes; `CommandUiSpec{options, onSelect}` keeps popup data self-contained — the shell component belongs to this package and business packages never see it. A contribution is a client-owned command (a host-name collision fails loud); a decoration adds a bare-invocation popup to an EXISTING host command. The host keeps its catalog row, argument claim (space / argued Enter), and lifecycle logging, and a decorated name with no host row in the session's directory never fires. Command kinds derive per dispatch, never per registration: a host descriptor with `input` is `leadingInput`, a registered `CommandUiSpec` is `popupSelect`, and everything else is `execute`.

-`CommandDirectory` (`src/client/directory.ts`) is the one wire-derived cache, keyed by session. Ordinary sessions fetch through `command.list({sessionId})`, and the source's scope-birth `warm` hook prewarms the session's entry. Catalog-addressed continuable children resolve an empty command directory locally: `command.list` is Agent-bound, so prewarming it would activate a child merely to view persisted history. Entries are soft-invalidated by the `commands/changed` typed event (old snapshot serves while the repull flies) and by `session/preset-changed` for that one session (recomposing an agent registers nothing, so the registry-wide signal never fires for it), hard-invalidated by `connection/reset`, epoch-guarded so a superseded pull can never overwrite a newer one. `matchSpace` answers synchronously from this cache only; `matchEnter` strong-waits it on the SubmitAttempt signal and rejects on warmup failure — a `/` line is never silently downgraded to a plain prompt.
+`CommandDirectory` (`src/client/directory.ts`) is the one wire-derived cache, keyed by session. Ordinary sessions fetch through `command.list({sessionId})`, and the source's scope-birth `warm` hook prewarms the session's entry. Catalog-addressed continuable children resolve an empty command directory locally: `command.list` is Agent-bound, so prewarming it would activate a child merely to view persisted history. Entries are soft-invalidated by the forwarded `commands/change` owner event (old snapshots serve while the repull flies) and by forwarded `agent-preset/selected` for that one session (recomposing an agent registers nothing, so the registry-wide signal never fires for it), hard-invalidated by `connection/reset`, and epoch-guarded so a superseded pull can never overwrite a newer one. `matchSpace` answers synchronously from this cache only; `matchEnter` strong-waits it on the SubmitAttempt signal and rejects on warmup failure — a `/` line is never silently downgraded to a plain prompt.

 Menu queries fuzzy-match ordered, case-insensitive subsequences of command names. Prefixes rank first; separator boundaries, adjacent characters, and shorter gaps rank the remaining matches, with directory and contribution order breaking ties. This affects discovery only: space and Enter still require an exact command name. Rationale: [Web slash-command fuzzy discovery](../../../.agents/notes/implemented/feature/2026-08-04-web-slash-command-fuzzy-discovery.md).

--- a/packages/client/ui-command/README.zh.md
+++ b/packages/client/ui-command/README.zh.md
@@ -6,7 +6,7 @@

 `src/client/contract.ts` 是固定的业务 API 约定：`CommandServiceContract.register(name, spec)` 与 `decorate(name, spec)` 是业务包消费的全部内容；`CommandUiSpec{options, onSelect}` 自己提供 popup 数据——外层组件归本包所有，业务包永远见不到它。contribution 是 client 自有命令（与 host 同名碰撞即 fail-loud）；decoration（装饰）则为**已存在的** host 命令添加裸调用 popup。host 保留目录行、带参 claim（space / 带参 Enter）与生命周期记账，被装饰的名字若在会话目录中无 host 行，则永不触发。命令类型按每次派发派生，绝不在注册时定型：带 `input` 的 host descriptor 是 `leadingInput`，注册了 `CommandUiSpec` 的是 `popupSelect`，其余全部是 `execute`。

-`CommandDirectory`（`src/client/directory.ts`）是唯一的 wire 派生缓存，以会话为 key。普通会话通过 `command.list({sessionId})` 拉取，source 的 scope 出生 `warm` 钩子会预热该会话的缓存项。由目录寻址的可继续子代理会在客户端解析为空命令目录：`command.list` 绑定 Agent，若预热它，就会仅因查看持久化历史而激活子代理。缓存项由 `commands/changed` 类型化事件软失效（重拉在途期间旧快照继续服务），也由 `session/preset-changed` 对该会话单独软失效（重组 agent 不产生任何注册，注册表级信号不会为它触发），由 `connection/reset` 硬失效，并以 epoch 把关，被取代的旧拉取永远无法覆盖更新的结果。`matchSpace` 只凭该缓存同步应答；`matchEnter` 在 SubmitAttempt 信号上强等缓存，预热失败即拒绝——`/` 开头的一行绝不会被静默降级为普通提示词。
+`CommandDirectory`（`src/client/directory.ts`）是唯一的 wire 派生缓存，以会话为 key。普通会话通过 `command.list({sessionId})` 拉取，source 的 scope 出生 `warm` 钩子会预热该会话的缓存项。由目录寻址的可继续子代理会在客户端解析为空命令目录：`command.list` 绑定 Agent，若预热它，就会仅因查看持久化历史而激活子代理。缓存项由转发的 owner 事件 `commands/change` 软失效（重拉在途期间旧快照继续服务），也由转发的 `agent-preset/selected` 对该会话单独软失效（重组 agent 不产生任何注册，注册表级信号不会为它触发），由 `connection/reset` 硬失效，并以 epoch 把关，被取代的旧拉取永远无法覆盖更新的结果。`matchSpace` 只凭该缓存同步应答；`matchEnter` 在 SubmitAttempt 信号上强等缓存，预热失败即拒绝——`/` 开头的一行绝不会被静默降级为普通提示词。

 菜单查询会按顺序且不区分大小写地模糊匹配命令名的子序列。前缀排名最高；其余匹配项按分隔符边界优先、相邻字符优先、间隔越短越优先的规则排序，若仍同分，则以目录顺序和 contribution 顺序打破平局。此行为只影响命令发现：space 和 Enter 仍要求命令名精确匹配。原理：[Web 斜杠命令模糊发现](../../../.agents/notes/implemented/feature/2026-08-04-web-slash-command-fuzzy-discovery.md)。

--- a/packages/client/ui-command/package.json
+++ b/packages/client/ui-command/package.json
@@ -35,7 +35,8 @@
        "@deepseek-ai/dsh-client-runtime",
        "@deepseek-ai/dsh-client-locale",
        "@deepseek-ai/dsh-client-ui-slash",
-        "@deepseek-ai/dsh-client-ui-conversation"
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-api-remotes"
      ],
      "platform": "web"
    }
@@ -49,6 +50,8 @@
    "clsx": "^2.0.0"
  },
  "peerDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
@@ -57,10 +60,10 @@
    "@deepseek-ai/dsh-client-ui-slash": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
-    "@deepseek-ai/cordis": "workspace:^",
    "react": "^18.2.0"
  },
  "devDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
--- a/packages/client/ui-command/src/client/index.ts
+++ b/packages/client/ui-command/src/client/index.ts
@@ -45,7 +45,7 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
 const NS = 'command'

 /** Required services: the '/' source registry plus the scope + wire faces the service reads, and the copy's locale registry. */
-export const inject = ['slash', 'sessions', 'connection', 'locale']
+export const inject = ['slash', 'sessions', 'connection', 'locale', 'remote']

 /**
 * Client plugin body: mount the service, then register the popupSelect shell
--- a/packages/client/ui-command/src/client/service.ts
+++ b/packages/client/ui-command/src/client/service.ts
@@ -11,6 +11,9 @@ import { Service } from '@deepseek-ai/cordis'
 import type { Context } from '@deepseek-ai/cordis'
 import type { ConnectionHandle, SessionId } from '@deepseek-ai/dsh-client-connection/client'
 import type { ClientContext, ISessions } from '@deepseek-ai/dsh-client-runtime/client'
+// Type-only: pulls the ctx.remote merge and the forwarded-event key face
+// (`commands/change` rides the allowlist) into this program.
+import type {} from '@deepseek-ai/dsh-api-remotes/client'
 import type {
  CandidateRequest, ClientSessionContext, CommandClaim, PickOutcome, SlashCandidate, SlashPick,
  SubmitOutcome,
@@ -93,7 +96,7 @@ function fuzzyCandidates(candidates: readonly SlashCandidate[], rawQuery: string

 /** Command surface: session-keyed directory + '/' source + contribution registry + per-session popups. */
 export class CommandService extends Service implements CommandServiceContract {
-  static inject = ['slash', 'sessions', 'connection']
+  static inject = ['slash', 'sessions', 'connection', 'remote']

  private readonly directory: CommandDirectory
  private readonly live: LiveState = { contributions: new Map(), decorations: new Map(), popups: new Map() }
@@ -123,12 +126,12 @@ export class CommandService extends Service implements CommandServiceContract {
      matchEnter: (session, line, signal) => this.matchEnter(session, line, signal),
      warm: (session) => { this.directory.warm(session.sessionId) },
    }), 'command: slash source')
-    ctx.on('commands/changed', () => { this.directory.invalidateAll() })
+    ctx.remote.$on('commands/change', () => { this.directory.invalidateAll() })
    // A preset switch changes which commands one session's agent resolves and
    // registers nothing globally, so the registry-wide signal above never
    // fires for it: repull that key alone, soft, so the old snapshot serves
    // the menu until the new one lands.
-    ctx.on('session/preset-changed', (sessionId) => { void this.directory.refresh(sessionId) })
+    ctx.remote.$on('agent-preset/selected', (sessionId) => { void this.directory.refresh(sessionId) })
    ctx.on('connection/reset', () => { this.directory.resetConnected() })
  }

--- a/packages/client/ui-command/tests/browser-plugin.spec.ts
+++ b/packages/client/ui-command/tests/browser-plugin.spec.ts
@@ -14,6 +14,7 @@ import type { SlashSource } from '@deepseek-ai/dsh-client-ui-slash/client'
 import type { CommandServiceContract } from '../src/client/contract.ts'
 import type { PopupSelectInjected } from '../src/client/PopupSelectView.tsx'
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
+import { TestRemote } from '@deepseek-ai/dsh-client-test-runtime'
 import { apply, CommandService, inject } from '../src/client/index.ts'

 const sid = (k: string): SessionId => k as SessionId
@@ -38,6 +39,8 @@ async function bench() {
    name: 'root', children: { 'conversation.input.overlay': { kind: 'list', scope: 'session' } },
  } as never, (() => null) as never)
  ctx.provide('locale', new LocaleService(ctx))
+  // CommandService injects `remote` for the forwarded directory invalidation.
+  new TestRemote(ctx)
  const fiber = ctx.plugin({ inject: [...inject], apply })
  await fiber.await()
  const mint = (key: string) => {
@@ -50,7 +53,7 @@ async function bench() {

 describe('apply', () => {
  it('declares the services it binds', () => {
-    expect(inject).toEqual(['slash', 'sessions', 'connection', 'locale'])
+    expect(inject).toEqual(['slash', 'sessions', 'connection', 'locale', 'remote'])
  })

  it('mounts ctx.command, registers the source and the overlay entry, and folds up on disposal', async () => {
--- a/packages/client/ui-command/tests/service.spec.ts
+++ b/packages/client/ui-command/tests/service.spec.ts
@@ -10,6 +10,7 @@
 import { Context } from '@deepseek-ai/cordis'
 import { describe, expect, it, vi } from 'vitest'
 import { createScope, scopeOf } from '@deepseek-ai/dsh-client-runtime/client'
+import { TestRemote } from '@deepseek-ai/dsh-client-test-runtime'
 import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ClientSessionContext, ConsumeTokenRequest, SlashPick, SlashSource } from '@deepseek-ai/dsh-client-ui-slash/client'
 import type { CommandContribution, CommandDecoration, CommandUiSpec, SelectOption } from '../src/client/contract.ts'
@@ -78,6 +79,9 @@ async function bench(opts: BenchOptions = {}) {
      : undefined,
  })
  ctx.provide('connection', { api })
+  // CommandService injects `remote`; the directory invalidation arrives on the
+  // same `$dispatch` handoff the connection sink makes.
+  new TestRemote(ctx)
  /** Notices the fake conversation face collected (runDetached routing). */
  const notices: Array<{ scope: SessionId | undefined; level: 'info' | 'error'; text: string }> = []
  ctx.provide('conversation', {
@@ -598,7 +602,7 @@ describe('popupFor', () => {
 })

 describe('directory invalidation events', () => {
-  it('commands/changed repulls in the background while the old snapshot serves', async () => {
+  it('commands/change repulls in the background while the old snapshot serves', async () => {
    let round = 0
    const { ctx, source, warm } = await bench({
      commands: () => {
@@ -611,13 +615,13 @@ describe('directory invalidation events', () => {
      },
    })
    await warm(proj('s1'))
-    ctx.emit('commands/changed')
+    ctx.remote.$dispatch('commands/change', [])
    await new Promise(resolve => setTimeout(resolve, 0))
    expect(source.matchSpace!(proj('s1'), '/fresh')).not.toBeUndefined()
    expect(source.matchSpace!(proj('s1'), '/goal')).toBeUndefined()
  })

-  it('session/preset-changed repulls the recomposed session and leaves the others served', async () => {
+  it('agent-preset/selected repulls the recomposed session and leaves the others served', async () => {
    const rounds = new Map<SessionId, number>()
    const { ctx, source, warm } = await bench({
      commands: (payload) => {
@@ -634,7 +638,7 @@ describe('directory invalidation events', () => {
    await warm(proj('s2'))
    // A preset switch changes which commands one session's agent resolves;
    // every other session keeps the catalog its own composition serves.
-    ctx.emit('session/preset-changed', sid('s1'), 'minimal')
+    ctx.remote.$dispatch('agent-preset/selected', [sid('s1'), 'minimal'])
    await new Promise(resolve => setTimeout(resolve, 0))
    expect(source.matchSpace!(proj('s1'), '/fresh')).not.toBeUndefined()
    expect(source.matchSpace!(proj('s1'), '/goal')).toBeUndefined()
--- a/packages/client/ui-command/tsconfig.json
+++ b/packages/client/ui-command/tsconfig.json
@@ -34,6 +34,9 @@
    },
    {
      "path": "../../support/invariants"
+    },
+    {
+      "path": "../../api/remotes/tsconfig.client.json"
    }
  ]
 }
--- a/packages/client/ui-conversation/package.json
+++ b/packages/client/ui-conversation/package.json
@@ -35,6 +35,8 @@
        "@deepseek-ai/dsh-client-connection",
        "@deepseek-ai/dsh-client-locale",
        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-api-remotes",
        "@deepseek-ai/dsh-client-ui-layout"
      ],
      "platform": "web"
@@ -51,49 +53,55 @@
    "@deepseek-ai/schemastery": "workspace:^"
  },
  "peerDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
    "@deepseek-ai/dsh-agent": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-attachment": "workspace:^",
    "@deepseek-ai/dsh-brand": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-attachment": "workspace:^",
    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slash": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
-    "@deepseek-ai/dsh-compact": "workspace:^",
    "@deepseek-ai/dsh-commands": "workspace:^",
+    "@deepseek-ai/dsh-compact": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
    "@deepseek-ai/dsh-llm-retry": "workspace:^",
    "@deepseek-ai/dsh-token-meter": "workspace:^",
    "@deepseek-ai/dsh-tools": "workspace:^",
-    "@deepseek-ai/cordis": "workspace:^",
    "react": "^18.2.0"
  },
  "devDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
    "@deepseek-ai/dsh-agent": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-attachment": "workspace:^",
    "@deepseek-ai/dsh-brand": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
    "@deepseek-ai/dsh-client-test-runtime": "workspace:^",
-    "@deepseek-ai/dsh-compact": "workspace:^",
-    "@deepseek-ai/dsh-commands": "workspace:^",
-    "@deepseek-ai/dsh-goal": "workspace:^",
-    "@deepseek-ai/dsh-plan-mode": "workspace:^",
    "@deepseek-ai/dsh-client-ui-layout": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-attachment": "workspace:^",
    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slash": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
+    "@deepseek-ai/dsh-commands": "workspace:^",
+    "@deepseek-ai/dsh-compact": "workspace:^",
+    "@deepseek-ai/dsh-goal": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
    "@deepseek-ai/dsh-llm-retry": "workspace:^",
    "@deepseek-ai/dsh-permission": "workspace:^",
+    "@deepseek-ai/dsh-plan-mode": "workspace:^",
    "@deepseek-ai/dsh-session-projection": "workspace:^",
    "@deepseek-ai/dsh-token-meter": "workspace:^",
-    "@deepseek-ai/dsh-tools": "workspace:^",
    "@deepseek-ai/dsh-tool-todo": "workspace:^",
+    "@deepseek-ai/dsh-tools": "workspace:^",
    "@types/react": "~18.3.1",
-    "@deepseek-ai/cordis": "workspace:^",
    "react": "^18.2.0"
  },
  "files": [
--- a/packages/client/ui-conversation/src/client/apply.ts
+++ b/packages/client/ui-conversation/src/client/apply.ts
@@ -2,8 +2,11 @@
 import type { Context } from '@deepseek-ai/cordis'
 import { resolveSlotLabel, type BoundActions } from '@deepseek-ai/dsh-client-ui-slots'
 import {
-  bindSettingsScope, resolveWorkspacePath, type ISessions, type SessionId,
+  resolveWorkspacePath, type ISessions, type SessionId,
 } from '@deepseek-ai/dsh-client-runtime/client'
+// Type-only: the ctx.settingsScope Context merge. Cross-plugin collaboration
+// goes through the service, never a value import (client bundle purity gate).
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
@@ -46,7 +49,7 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {

 /** Services required by the conversation plugin. */
 export const inject = [
-  'slots', 'layout', 'sessions', 'workspaces', 'locale', 'connection',
+  'slots', 'layout', 'sessions', 'workspaces', 'locale', 'connection', 'remote', 'settingsScope',
  'conversationEvents', 'conversationViews',
 ]

@@ -128,7 +131,7 @@ export function apply(ctx: Context): void {
  // Apply-time construction keeps store identity bound to this fiber.
  const chatStore = createChatStore()
  const submissionPolicy = new ComposerSubmissionPolicy(
-    bindSettingsScope<ConversationSettings>(ctx, { namespace: CONVERSATION_SETTINGS_NAMESPACE }),
+    ctx.settingsScope.bind<ConversationSettings>({ namespace: CONVERSATION_SETTINGS_NAMESPACE }),
  )

  ctx.slots.inject('settings.general.item', () => ctx.slots.register({
--- a/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx
+++ b/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx
@@ -13,8 +13,9 @@ import { memo, useMemo } from 'react'
 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 { ImageGallery, type ImageLoader } from '@deepseek-ai/dsh-client-ui-attachment'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
-import { ImageGallery, type ImageLoader } from './MessageImage.tsx'
+import { messageImageLabels } from '../image-labels.ts'
 import { ReasoningRow } from './ReasoningRow.tsx'
 import css from './AssistantMarkdown.module.css'

@@ -62,7 +63,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} />
+            case 'image': return <ImageGallery key={i} images={[block]} load={imageLoader} align="start" labels={messageImageLabels(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/MessageImage.tsx
+++ b/packages/client/ui-conversation/src/client/chat/MessageImage.tsx
@@ -1,72 +0,0 @@
-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.tsx
+++ b/packages/client/ui-conversation/src/client/chat/MessageItem.tsx
@@ -10,10 +10,11 @@ import type {
 } 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 { ImageGallery, type ImageLoader } from '@deepseek-ai/dsh-client-ui-attachment'
+import { messageImageLabels } from '../image-labels.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'

 type UserImage = Extract<UserMessageNode['content'][number], { type: 'image' }>
@@ -177,7 +178,7 @@ function UserStyleBubble({
  return (
    <div className={css.userRow} data-pending-steering={pending || undefined} data-time-hover-root>
      <div className={css.userStack}>
-        <ImageGallery images={images} load={imageLoader} align="end" t={t} />
+        <ImageGallery images={images} load={imageLoader} align="end" labels={messageImageLabels(t)} />
        {showBubble && <div className={css.bubble}>
          {projectUserText(text)}
          {rest.map((block, i) => <JsonBlock key={i} label={t('message.extraBlock')} payload={block} truncatedLabel={truncated} />)}
--- a/packages/client/ui-conversation/src/client/image-labels.ts
+++ b/packages/client/ui-conversation/src/client/image-labels.ts
@@ -0,0 +1,48 @@
+/** Bridges the `conversation` locale namespace to the zero-cordis attachment
+ * atoms' label props (`@deepseek-ai/dsh-client-ui-attachment` reads no
+ * application state; owners resolve every string). */
+
+import type {
+  AttachmentRailLabels, ImageLightboxLabels, MessageImageLabels,
+} from '@deepseek-ai/dsh-client-ui-attachment'
+import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
+import type { ConversationKey } from './locales.ts'
+
+/**
+ * Resolve the original-image lightbox strings.
+ * @param t - the conversation-namespace translate.
+ * @returns the lightbox dialog and close-control labels.
+ */
+export function lightboxLabels(t: Translate<ConversationKey>): ImageLightboxLabels {
+  return { dialog: t('image.preview'), close: t('image.closePreview') }
+}
+
+/**
+ * Resolve the chat-history image strings.
+ * @param t - the conversation-namespace translate.
+ * @returns the message-image labels including the forwarded lightbox strings.
+ */
+export function messageImageLabels(t: Translate<ConversationKey>): MessageImageLabels {
+  return {
+    image: t('image.label'),
+    open: t('image.openOriginal'),
+    openNamed: label => t('image.openOriginalLabel', { label }),
+    loading: t('image.loading'),
+    loadFailed: t('image.loadFailed'),
+    lightbox: lightboxLabels(t),
+  }
+}
+
+/**
+ * Resolve the composer draft-image rail strings.
+ * @param t - the conversation-namespace translate.
+ * @returns the rail group, open-tooltip, and paging-arrow labels.
+ */
+export function attachmentRailLabels(t: Translate<ConversationKey>): AttachmentRailLabels {
+  return {
+    group: t('image.pending'),
+    open: t('image.openOriginal'),
+    scrollLeft: t('image.scrollLeft'),
+    scrollRight: t('image.scrollRight'),
+  }
+}
--- a/packages/client/ui-conversation/src/client/locales.ts
+++ b/packages/client/ui-conversation/src/client/locales.ts
@@ -27,9 +27,11 @@ export const zh = {
  'input.accessMode': '访问模式，当前：{name}',
  'image.dropHint': '松开以添加图片',
  'image.pending': '待发送图片',
-  'image.openOriginal': '双击查看原图',
-  'image.openOriginalLabel': '{label}，双击查看原图',
+  'image.openOriginal': '查看原图',
+  'image.openOriginalLabel': '{label}，点击查看原图',
  'image.remove': '移除图片 {name}',
+  'image.scrollLeft': '向左滚动图片',
+  'image.scrollRight': '向右滚动图片',
  'image.original': '原图',
  'image.label': '图片',
  'image.loadFailed': '图片加载失败，点击重试',
@@ -184,9 +186,11 @@ export const en = {
  '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.openOriginal': 'View original',
+  'image.openOriginalLabel': '{label}, click to view original',
  'image.remove': 'Remove image {name}',
+  'image.scrollLeft': 'Scroll images left',
+  'image.scrollRight': 'Scroll images right',
  'image.original': 'Original image',
  'image.label': 'Image',
  'image.loadFailed': 'Image failed to load; click to retry',
--- a/packages/client/ui-conversation/src/client/skeleton/ImageLightbox.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/ImageLightbox.tsx
@@ -1,40 +0,0 @@
-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
@@ -35,22 +35,6 @@
  padding: 0 var(--dsh-composer-side-clearance);
 }

-.error,
-.status {
-  width: 100%;
-  max-width: var(--dsh-composer-card-max-width);
-  margin-bottom: 6px;
-  padding: 4px 8px;
-  border-radius: 8px;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.status {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-secondary);
-}
-
 .notice {
  width: 100%;
  max-width: var(--dsh-composer-card-max-width);
@@ -68,11 +52,6 @@
  color: var(--dsw-alias-state-error-primary);
 }

-.error {
-  background: var(--dsw-alias-interactive-bg-hover-danger);
-  color: var(--dsw-alias-state-error-primary);
-}
-
 .card {
  box-sizing: border-box;
  position: relative; /* overlay anchor positioning context */
@@ -162,55 +141,13 @@
  padding: 10px 12px 0;
 }

+/* Rail seat: the card's top padding (10px) plus this 4px matches DeepSeek
+   Chat's spacing above the thumbnails; the card's 12px flex gap owns the space
+   below. The rail itself (arrows, hidden scrollbar, card geometry) is the
+   ui-attachment atom's. */
 .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;
+  padding: 4px 12px 0;
 }

 /* Floating overlay anchor (menu / popupSelect shell): entries position
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
@@ -9,7 +9,11 @@
 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'
+import {
+  IconPlusOutline16, IconWarningOutline16, Toast, Tooltip,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import { AttachmentRail, ImageLightbox } from '@deepseek-ai/dsh-client-ui-attachment'
+import type { AttachmentRailItem } from '@deepseek-ai/dsh-client-ui-attachment'
 // Type-only: the `plan` projection key merge (the TodoDock posture — the
 // composer reads a host-computed value; the domain owns the key).
 import type {} from '@deepseek-ai/dsh-plan-mode/client'
@@ -19,18 +23,17 @@ import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ComposerAttachment, ComposerBarProps } from '../contract/slots.ts'
 import { deriveDecorations } from '../input/decorations.ts'
 import type { DraftDecorations } from '../input/decorations.ts'
+import { attachmentRailLabels, lightboxLabels } from '../image-labels.ts'
 import { ContextMeter } from './ContextMeter.tsx'
-import { ImageLightbox } from './ImageLightbox.tsx'
 import { PermissionSelect } from './PermissionSelect.tsx'
 import css from './InputBar.module.css'

 /** Decoration product of the no-session state (no machine, empty draft). */
 const INERT_DECORATIONS: DraftDecorations = { token: null, chips: [], textRefs: [], hint: null }

-/** Prompt failure surface (derived from promptError). */
-export interface InputBarError {
-  op: 'send' | 'stop'
-  message: string
+/** Rail thumbnail carrying its source attachment for the open/remove callbacks. */
+interface ComposerRailItem extends AttachmentRailItem {
+  attachment: ComposerAttachment
 }

 export type InputBarProps = ComposerBarProps
@@ -56,12 +59,6 @@ export function InputBar({
  const planActive = useProjection('plan', plan => plan !== undefined && (plan.pending ? !plan.active : plan.active))
  // Absent (undefined: no frame yet) and cleared (null) both mean no goal.
  const hasGoal = useProjection('goal', goal => goal != null)
-  // Prompt failures are ordinary failures (no create/attach transaction
-  // exists anymore): the strip renders promptError, the draft stays in the
-  // machine, and the user resubmits.
-  const error: InputBarError | null = promptError === null
-    ? null
-    : { op: promptError.op, message: `${promptError.error.message} (${promptError.error.code})` }
  // Session-maybe: the machine faces are absent together while no session is
  // current; the bar renders the same DOM inert instead of a parallel tree.
  const live = input !== undefined && keyboard !== undefined && inputActions !== undefined
@@ -73,8 +70,26 @@ export function InputBar({
  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)
+  // Transient error banner (image-intake rejections and prompt failures): the
+  // seq keys the Toast so an identical repeated message restarts the
+  // hold-then-fade cycle instead of silently reusing the faded one.
+  const [toast, setToast] = useState<{ seq: number; text: string } | null>(null)
+  const toastSeq = useRef(0)
+  const showToast = useCallback((text: string) => {
+    toastSeq.current += 1
+    setToast({ seq: toastSeq.current, text })
+  }, [])
+  const dismissToast = useCallback(() => { setToast(null) }, [])
+  // Prompt failures are ordinary failures (no create/attach transaction exists
+  // anymore): the toast announces promptError, the draft stays in the machine,
+  // and the user resubmits. A remount over a session whose machine still holds
+  // an unresolved promptError deliberately re-announces it once — the failure
+  // is still pending, and a transient banner is its only surface.
+  useEffect(() => {
+    if (promptError !== null) showToast(`${promptError.error.message} (${promptError.error.code})`)
+  }, [promptError, showToast])
  const inputRef = useRef<HTMLTextAreaElement | null>(null)
+  const cardRef = useRef<HTMLDivElement | null>(null)
  const dragDepthRef = useRef(0)
  const scrollRef = useRef<HTMLDivElement | null>(null)
  const mirrorRef = useRef<HTMLDivElement | null>(null)
@@ -369,7 +384,10 @@ export function InputBar({
      .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))
+    if (files.length > 0 && addImages !== undefined) {
+      const rejected = addImages(files)
+      if (rejected !== null) showToast(rejected)
+    }
    const text = e.clipboardData.getData('text/plain')
    if (text === '') {
      if (files.length > 0) e.preventDefault()
@@ -393,7 +411,6 @@ export function InputBar({
    event.preventDefault()
    if (locked || machineBusy || addImages === undefined) return
    dragDepthRef.current += 1
-    setDropError(null)
    setDragActive(true)
  }

@@ -416,11 +433,24 @@ export function InputBar({
    setDragActive(false)
    if (locked || machineBusy || addImages === undefined) return
    const dropped = [...event.dataTransfer.files]
-    if (dropped.length > 0) setDropError(addImages(dropped))
+    if (dropped.length > 0) {
+      const rejected = addImages(dropped)
+      if (rejected !== null) showToast(rejected)
+    }
  }

  const closePreview = useCallback(() => { setPreview(null) }, [])

+  // Rail thumbnails with their strings resolved here: the attachment atoms are
+  // zero-cordis and read no locale.
+  const railItems = useMemo<ComposerRailItem[]>(() => attachments.map(attachment => ({
+    id: attachment.id,
+    previewUrl: attachment.previewUrl,
+    alt: attachment.file.name || t('image.pending'),
+    removeLabel: t('image.remove', { name: attachment.file.name }),
+    attachment,
+  })), [attachments, t])
+
  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.
@@ -543,10 +573,14 @@ export function InputBar({

  return (
    <div className={clsx(css.root, variant === 'hero' && css.hero)}>
-      {error !== null && (
-        <div className={css.error} role="alert">
-          {error.message}
-        </div>
+      {toast !== null && (
+        <Toast
+          key={toast.seq}
+          text={toast.text}
+          icon={<IconWarningOutline16 />}
+          anchor={cardRef.current}
+          onDone={dismissToast}
+        />
      )}
      {notice !== null && (
        <div className={clsx(css.notice, notice.level === 'error' && css.noticeError)} role="status">
@@ -558,8 +592,8 @@ 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
+        ref={cardRef}
        className={clsx(css.card, workspaceTrigger && css.cardWorkspaceTrigger, dragActive && css.dragActive)}
        data-composer-card
        onClick={workspaceTrigger ? onRequestWorkspace : undefined}
@@ -572,29 +606,14 @@ export function InputBar({
        {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>
-            ))}
+        {railItems.length > 0 && (
+          <div className={css.attachments}>
+            <AttachmentRail
+              items={railItems}
+              labels={attachmentRailLabels(t)}
+              onOpen={(item) => { setPreview(item.attachment) }}
+              onRemove={(item) => { removeImage?.(item.attachment.id) }}
+            />
          </div>
        )}
        {/* One scrollport, two text layers. The hidden mirror renders draft+'\n' and stretches the
@@ -628,10 +647,7 @@ export function InputBar({
                    ? t('placeholder.steerQueue')
                    : planActive ? t('placeholder.plan') : t('placeholder.default'))}
              rows={2}
-              onChange={(event) => {
-                setDropError(null)
-                onChange(event)
-              }}
+              onChange={onChange}
              onKeyDown={onKeyDown}
              onSelect={onSelect}
              onCopy={(e) => { onCopyOrCut(e, false) }}
@@ -712,8 +728,8 @@ export function InputBar({
        <ImageLightbox
          src={preview.previewUrl}
          alt={preview.file.name || t('image.original')}
+          labels={lightboxLabels(t)}
          onClose={closePreview}
-          t={t}
        />
      )}
      {footer}
--- a/packages/client/ui-conversation/tests/apply-inject.spec.tsx
+++ b/packages/client/ui-conversation/tests/apply-inject.spec.tsx
@@ -15,7 +15,7 @@
 // chat-toolview-slot.spec.tsx.

 import { describe, expect, it, vi } from 'vitest'
-import { SlotTestRuntime, usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
+import { SlotTestRuntime, usePinnedBrowserLanguages, stubSettingsScope } from '@deepseek-ai/dsh-client-test-runtime'
 import type { SessionBehaviorOverrides } from '@deepseek-ai/dsh-client-test-runtime'
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { ISession, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
@@ -48,6 +48,9 @@ function sessionFakeFor() {
 async function bench() {
  const runtime = await SlotTestRuntime.create()
  runtime.provide('connection', { api: { settings: {} }, isLoopback: false } as never)
+  // The plugin injects both; these specs exercise no settings path.
+  runtime.provide('remote', { $on: () => () => {} })
+  runtime.provide('settingsScope', { bind: () => stubSettingsScope().scope } as never)
  const sessionFake = sessionFakeFor()
  await runtime.sessions.add({
    id: ROOT,
--- a/packages/client/ui-conversation/tests/assembly-surfaces.spec.tsx
+++ b/packages/client/ui-conversation/tests/assembly-surfaces.spec.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react'
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { ISession, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import type { PropsRenderSlots } from '@deepseek-ai/dsh-client-ui-slots'
-import { SlotTestRuntime, usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
+import { SlotTestRuntime, usePinnedBrowserLanguages, stubSettingsScope } from '@deepseek-ai/dsh-client-test-runtime'
 import { apply, inject, type EmptyWorkspaceOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client'

 usePinnedBrowserLanguages('zh-CN')
@@ -51,6 +51,9 @@ function WorkspaceProbe({ open }: EmptyWorkspaceOwnerProps) {
 async function bench(opts?: { blank?: boolean }) {
  const runtime = await SlotTestRuntime.create()
  runtime.provide('connection', { api: { settings: {} }, isLoopback: false } as never)
+  // The plugin injects both; these specs exercise no settings path.
+  runtime.provide('remote', { $on: () => () => {} })
+  runtime.provide('settingsScope', { bind: () => stubSettingsScope().scope } as never)
  runtime.provide('layout', { openDetails: vi.fn(), closeDetails: vi.fn() })
  const locale = new LocaleService(runtime.ctx)
  runtime.provide('locale', locale)
@@ -76,6 +79,9 @@ describe('resident composer', () => {
  it('renders the locked view state while no session exists at all', async () => {
    const runtime = await SlotTestRuntime.create()
    runtime.provide('connection', { api: { settings: {} }, isLoopback: false } as never)
+    // The plugin injects both; these specs exercise no settings path.
+    runtime.provide('remote', { $on: () => () => {} })
+    runtime.provide('settingsScope', { bind: () => stubSettingsScope().scope } as never)
    runtime.provide('layout', { openDetails: vi.fn(), closeDetails: vi.fn() })
    const locale = new LocaleService(runtime.ctx)
    runtime.provide('locale', locale)
@@ -103,6 +109,9 @@ describe('resident composer', () => {
  it('keeps the complete Hero tree mounted when the first Workspace session appears', async () => {
    const runtime = await SlotTestRuntime.create()
    runtime.provide('connection', { api: { settings: {} }, isLoopback: false } as never)
+    // The plugin injects both; these specs exercise no settings path.
+    runtime.provide('remote', { $on: () => () => {} })
+    runtime.provide('settingsScope', { bind: () => stubSettingsScope().scope } as never)
    runtime.provide('layout', { openDetails: vi.fn(), closeDetails: vi.fn() })
    const locale = new LocaleService(runtime.ctx)
    runtime.provide('locale', locale)
@@ -169,6 +178,9 @@ describe('prompt rejection through the assembled composer', () => {
  it('renders the promptError alert strip and keeps the draft in the machine', async () => {
    const runtime = await SlotTestRuntime.create()
    runtime.provide('connection', { api: { settings: {} }, isLoopback: false } as never)
+    // The plugin injects both; these specs exercise no settings path.
+    runtime.provide('remote', { $on: () => () => {} })
+    runtime.provide('settingsScope', { bind: () => stubSettingsScope().scope } as never)
    runtime.provide('layout', { openDetails: vi.fn(), closeDetails: vi.fn() })
    const locale = new LocaleService(runtime.ctx)
    runtime.provide('locale', locale)
--- a/packages/client/ui-conversation/tests/chat-apply.spec.tsx
+++ b/packages/client/ui-conversation/tests/chat-apply.spec.tsx
@@ -6,7 +6,7 @@
 // entries. Tool composition belongs to ui-tool and its machinery spec.

 import { describe, expect, it, vi } from 'vitest'
-import { SlotTestRuntime, usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
+import { SlotTestRuntime, usePinnedBrowserLanguages, stubSettingsScope } from '@deepseek-ai/dsh-client-test-runtime'
 import { resolveSlotLabel } from '@deepseek-ai/dsh-client-ui-slots'
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
@@ -22,6 +22,9 @@ const CHILD = 'child-1' as SessionId
 async function bench() {
  const runtime = await SlotTestRuntime.create()
  runtime.provide('connection', { api: { settings: {} }, isLoopback: false } as never)
+  // The plugin injects both; these specs exercise no settings path.
+  runtime.provide('remote', { $on: () => () => {} })
+  runtime.provide('settingsScope', { bind: () => stubSettingsScope().scope } as never)
  await runtime.sessions.add({ id: ROOT, summary: { title: 'R', displayTitle: 'R' } }, { current: false })
  await runtime.sessions.add(
    { id: CHILD, summary: { title: 'C', displayTitle: 'C', parentId: ROOT } }, { current: false })
--- a/packages/client/ui-conversation/tests/image-labels.spec.tsx
+++ b/packages/client/ui-conversation/tests/image-labels.spec.tsx
@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+// The conversation-side bridge to the ui-attachment atoms: dictionary strings
+// flow through image-labels into the gallery, and assistant images keep their
+// block position between text blocks.
+
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, fireEvent, render } 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 { 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('assistant images through the label bridge', () => {
+  it('resolves zh dictionary strings and opens the lightbox on a single click', async () => {
+    const view = render(
+      <AssistantMarkdown
+        t={t}
+        blocks={[{ kind: 'image', attachment }]}
+        streaming={false}
+        loadImage={() => Promise.resolve('blob:history')}
+      />,
+    )
+    const frame = await view.findByRole('button', { name: 'history.png，点击查看原图' })
+    expect(frame.getAttribute('title')).toBe('查看原图')
+    await view.findByAltText('history.png')
+    fireEvent.click(frame)
+    expect(view.getByRole('dialog', { name: '原图预览' })).toBeTruthy()
+    fireEvent.click(view.getByRole('button', { name: '关闭原图预览' }))
+    expect(view.queryByRole('dialog', { name: '原图预览' })).toBeNull()
+  })
+
+  it('resolves the active English dictionary', async () => {
+    const view = render(
+      <AssistantMarkdown
+        t={enT}
+        blocks={[{ kind: 'image', attachment }]}
+        streaming={false}
+        loadImage={() => Promise.resolve('blob:history')}
+      />,
+    )
+    const frame = await view.findByRole('button', { name: 'history.png, click to view original' })
+    await view.findByAltText('history.png')
+    fireEvent.click(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/input-bar.spec.tsx
+++ b/packages/client/ui-conversation/tests/input-bar.spec.tsx
@@ -237,15 +237,49 @@ describe('image draft rail', () => {
    expect(removeImage).toHaveBeenCalledWith('draft-1')
  })

-  it('opens the original image on double-click and closes it with Escape', () => {
+  it('opens the original image on a single 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('双击查看原图'))
+    fireEvent.click(view.getByTitle('查看原图'))
    expect(view.getByRole('dialog', { name: '原图预览' })).toBeTruthy()
    fireEvent.keyDown(window, { key: 'Escape' })
    expect(view.queryByRole('dialog', { name: '原图预览' })).toBeNull()
  })
+
+  it('announces an image-intake rejection as a fading toast, repeatable for the same reason', () => {
+    vi.useFakeTimers()
+    try {
+      const addImages = vi.fn(() => '不支持的图片格式：text/plain')
+      const { view, textarea } = bench({ addImages })
+      const paste = () => {
+        fireEvent.paste(textarea, {
+          clipboardData: {
+            items: [{ kind: 'file', type: 'text/plain', getAsFile: () => new File(['x'], 'note.txt', { type: 'text/plain' }) }],
+            getData: () => '',
+          },
+        })
+      }
+      paste()
+      expect(view.getByRole('alert').textContent).toContain('不支持的图片格式：text/plain')
+      act(() => { vi.advanceTimersByTime(4000) })
+      expect(view.queryByRole('alert')).toBeNull()
+      // The identical rejection re-announces: the toast is keyed per show.
+      paste()
+      expect(view.getByRole('alert').textContent).toContain('不支持的图片格式：text/plain')
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('announces a rejected drop through the same toast', () => {
+    const addImages = vi.fn(() => '图片读取服务不可用')
+    const { view } = bench({ addImages })
+    const card = view.container.querySelector('[class*="card"]')!
+    const dataTransfer = { types: ['Files'], files: [new File([Uint8Array.of(1)], 'x.png', { type: 'image/png' })], dropEffect: 'none' }
+    fireEvent.drop(card, { dataTransfer })
+    expect(view.getByRole('alert').textContent).toContain('图片读取服务不可用')
+  })
 })

 describe('Enter semantics', () => {
@@ -941,10 +975,19 @@ describe('insertText (scoped event body)', () => {
 })

 describe('strips and variants', () => {
-  it('derives the failure strip from promptError (ordinary failure — no transaction UI, no Retry)', () => {
-    const send = bench({ promptError: { op: 'send', error: { code: 'agent-busy', message: 'boom', details: { reason: 'boom' } } } })
-    expect(send.view.container.querySelector('[role="alert"]')?.textContent).toBe('boom (agent-busy)')
-    expect(send.view.queryByRole('button', { name: 'Retry' })).toBeNull()
+  it('announces promptError as a fading toast (ordinary failure — no transaction UI, no Retry)', () => {
+    vi.useFakeTimers()
+    try {
+      const send = bench({ promptError: { op: 'send', error: { code: 'agent-busy', message: 'boom', details: { reason: 'boom' } } } })
+      // The toast body-portals (transformed ancestors must not trap it), so
+      // queries go through the view's document-bound helpers.
+      expect(send.view.getByRole('alert').textContent).toContain('boom (agent-busy)')
+      expect(send.view.queryByRole('button', { name: 'Retry' })).toBeNull()
+      act(() => { vi.advanceTimersByTime(4000) })
+      expect(send.view.queryByRole('alert')).toBeNull()
+    } finally {
+      vi.useRealTimers()
+    }
  })

  it('renders the notice strip from the machine notice store', () => {
--- a/packages/client/ui-conversation/tests/message-image.spec.tsx
+++ b/packages/client/ui-conversation/tests/message-image.spec.tsx
@@ -1,81 +0,0 @@
-// @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/tsconfig.json
+++ b/packages/client/ui-conversation/tsconfig.json
@@ -23,6 +23,9 @@
    {
      "path": "../ui-slots"
    },
+    {
+      "path": "../ui-attachment"
+    },
    {
      "path": "../ui-primitives"
    },
@@ -76,6 +79,9 @@
    },
    {
      "path": "../../interaction/permission"
+    },
+    {
+      "path": "../ui-settings"
    }
  ],
  "exclude": [
--- a/packages/client/ui-deliverables/tests/produced-files.spec.tsx
+++ b/packages/client/ui-deliverables/tests/produced-files.spec.tsx
@@ -16,9 +16,9 @@ import type {
  ConversationTimelineSnapshot, ConversationTurnDataMap, ConversationViewDefinition,
  ConversationViewNode, ToolResultNode, TurnLocation,
 } from '@deepseek-ai/dsh-client-runtime/client'
-import { apply as applyLocale } from '@deepseek-ai/dsh-client-locale/client'
+import { apply as applyLocale, inject as localeInject } from '@deepseek-ai/dsh-client-locale/client'
 import type { ChatFileMentions, TurnTailOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
-import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
+import { makeTranslate, stubSettingsScope } from '@deepseek-ai/dsh-client-test-runtime'
 import { ProducedFiles } from '../src/client/ProducedFiles.tsx'
 import {
  basename, deliverablesDefinition, producedFileMentions, producedForClosing, selectProducedFiles,
@@ -341,7 +341,10 @@ describe('plugin registration', () => {
      children: { 'conversation.chat.turnTail': { kind: 'chain', scope: 'session' } },
    } as never, () => null)
    ctx.provide('connection', { api: { settings: {} }, isLoopback: false } as never)
-    await ctx.plugin({ inject: ['slots'], apply: applyLocale }).await()
+    // ui-theme's Appearance row binds a durable scope through these two.
+    ctx.provide('remote', { $on: () => () => {} } as never)
+    ctx.provide('settingsScope', { bind: () => stubSettingsScope().scope } as never)
+    await ctx.plugin({ inject: localeInject, apply: applyLocale }).await()

    const fiber = ctx.plugin({ inject: [...inject], apply })
    await fiber.await()
--- a/packages/client/ui-layout/tests/apply.spec.ts
+++ b/packages/client/ui-layout/tests/apply.spec.ts
@@ -7,6 +7,7 @@
 // coverage gate still requires exercised.

 import { Context } from '@deepseek-ai/cordis'
+import { stubSettingsScope } from '@deepseek-ai/dsh-client-test-runtime'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
@@ -26,6 +27,9 @@ async function bench() {
  // seam for persistence; model this bench as a remote, memory-only browser.
  ctx.provide('locale', new LocaleService(ctx))
  ctx.provide('connection', { api: { settings: {} }, isLoopback: false } as never)
+  // ui-theme's Appearance row binds a durable scope through these two.
+  ctx.provide('remote', { $on: () => () => {} } as never)
+  ctx.provide('settingsScope', { bind: () => stubSettingsScope().scope } as never)
  await ctx.plugin({ inject: themeInject, apply: themeApply }).await()
  await slotsFiber.await()
  return { ctx, slots: ctx.get('slots') as SlotsService }
--- a/packages/client/ui-model/README.i18n.yaml
+++ b/packages/client/ui-model/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-model/README.md
-README.md: fdc3258eb37b45f4773648d2d796c275f8657d47
-README.zh.md: 116e151d1afeaaa22618c408eed2c7542d1357e7
+README.md: e49fdee52caa99cd249db7d7fbec0064c47e2dc7
+README.zh.md: 366c96c3e37619297075ad495142416ffd3baea6
--- a/packages/client/ui-model/README.md
+++ b/packages/client/ui-model/README.md
@@ -10,6 +10,8 @@ When the Host reports that no adapter serves the session's route (`session.model

 Directories are per-session, resolved lazily through `ctx.models.directoryFor(sessionId)`, and disposed with the session scope. Addressed subagent sessions expose neither entry, and their directory rejects loads, selections, and reconnect refreshes, because ordinary Agent-bound model RPCs would activate persisted child history outside the direct-parent continuation path.

+Every resident directory refetches directly on forwarded `llm/adapters-updated` and `settings/document-updated` owner events. Provider topology, provider catalogs, and the default selection therefore converge without the Host or client runtime deriving a separate model-change alias.
+
 The `/client` exports are the plugin body (`apply`/`inject`), `ModelService`, `ModelDirectory` with its state fields, and the seat's injected face type.

 ## Model Experience
--- a/packages/client/ui-model/README.zh.md
+++ b/packages/client/ui-model/README.zh.md
@@ -10,6 +10,8 @@ Host 报告的 `ModelSelection` 是唯一的选择事实，其中包含提供方

 目录按会话惰性解析（`ctx.models.directoryFor(sessionId)`），随会话作用域一并释放。已寻址 subagent 会话不公开任一入口，其目录会拒绝加载、选择与重新连接刷新，因为绑定到 agent（智能体）的普通模型 RPC 会在直接 parent 继续执行路径之外激活持久化 child 历史。

+每一份常驻目录都会直接在转发的 owner 事件 `llm/adapters-updated` 与 `settings/document-updated` 上重拉。因此提供方拓扑、提供方目录与默认选择都能收敛，Host 与 client runtime 无需再派生一个单独的模型变更别名。
+
 `/client` 导出面为插件本体（`apply`/`inject`）、`ModelService`、`ModelDirectory` 及其状态形状、slot 注入面类型。

 ## 模型体验
--- a/packages/client/ui-model/package.json
+++ b/packages/client/ui-model/package.json
@@ -34,7 +34,8 @@
      "inject": [
        "@deepseek-ai/dsh-client-locale",
        "@deepseek-ai/dsh-client-runtime",
-        "@deepseek-ai/dsh-client-ui-command"
+        "@deepseek-ai/dsh-client-ui-command",
+        "@deepseek-ai/dsh-api-remotes"
      ],
      "platform": "web"
    }
@@ -45,6 +46,7 @@
  },
  "license": "BSD-3-Clause",
  "peerDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
@@ -59,9 +61,11 @@
    "react": "^18.2.0"
  },
  "devDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
+    "@deepseek-ai/dsh-client-test-runtime": "workspace:^",
    "@deepseek-ai/dsh-client-ui-command": "workspace:^",
    "@deepseek-ai/dsh-client-ui-conversation": "workspace:^",
    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
--- a/packages/client/ui-model/src/client/ModelSelect.tsx
+++ b/packages/client/ui-model/src/client/ModelSelect.tsx
@@ -7,7 +7,9 @@
 * ToggleButton) shows both: model name + effort in the caption tone.
 * Data and submission ride the SAME per-session ModelDirectory as the
 * /model popup; exact-model reasoning metadata and the selected effort come
- * from the Host rather than a client-owned vocabulary.
+ * from the Host rather than a client-owned vocabulary. A rejected selection
+ * announces through the shared transient Toast anchored to the composer
+ * card; the in-menu strip with Retry remains the catalog-load surface.
 */
 import {
  useEffect, useId, useMemo, useRef, useState, useSyncExternalStore,
@@ -17,6 +19,7 @@ import clsx from 'clsx'
 import type { ModelReasoningEffort, ModelSelection } from '@deepseek-ai/dsh-client-connection/client'
 import {
  IconCheckOutline16, IconChevronDownOutline14, IconChevronRightOutline14,
+  IconWarningOutline16, Toast,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ModelSelectInjected } from './slots.ts'
@@ -49,6 +52,13 @@ export function ModelSelect(
  )
  const [open, setOpen] = useState(false)
  const [pane, setPane] = useState<Pane>('root')
+  // The in-menu error strip serves catalog loads (its Retry re-runs the
+  // load); a rejected SELECTION announces through the transient toast
+  // instead, so the strip renders only while the latest failure-capable
+  // action was a load.
+  const lastActionRef = useRef<'load' | 'select'>('load')
+  const [toast, setToast] = useState<{ seq: number; text: string } | null>(null)
+  const toastSeq = useRef(0)
  const rootRef = useRef<HTMLDivElement | null>(null)
  const triggerRef = useRef<HTMLButtonElement | null>(null)
  const itemRefs = useRef<(HTMLButtonElement | null)[]>([])
@@ -92,9 +102,17 @@ export function ModelSelect(
    ], [reasoning, t])
  const busy = state.status === 'selecting'

+  const reload = (): void => {
+    lastActionRef.current = 'load'
+    load()
+  }
+
  // Mount-time load resolves the trigger label; every open refreshes.
  useEffect(() => {
-    if (available) load()
+    if (available) {
+      lastActionRef.current = 'load'
+      load()
+    }
  }, [available, load])

  useEffect(() => {
@@ -111,7 +129,7 @@ export function ModelSelect(
  const show = (): void => {
    setPane('root')
    setOpen(true)
-    load()
+    reload()
  }

  const close = (restoreFocus = false): void => {
@@ -148,14 +166,25 @@ export function ModelSelect(
    close()
  }

+  const settleSelection = (accepted: boolean): void => {
+    if (accepted) {
+      if (rootRef.current !== null) close(true)
+      return
+    }
+    const message = directory.getSnapshot().error
+    if (message !== null) {
+      toastSeq.current += 1
+      setToast({ seq: toastSeq.current, text: t('error.action', { message }) })
+    }
+  }
+
  const choose = (selection: ModelSelection): void => {
    if (state.current?.provider === selection.provider && state.current.model === selection.model) {
      close(true)
      return
    }
-    void select(selection).then((accepted) => {
-      if (accepted && rootRef.current !== null) close(true)
-    })
+    lastActionRef.current = 'select'
+    void select(selection).then(settleSelection)
  }

  const chooseEffort = (effort: string | undefined): void => {
@@ -169,9 +198,8 @@ export function ModelSelect(
      model: state.current.model,
      ...effort === undefined ? {} : { reasoningEffort: effort },
    }
-    void select(selection).then((accepted) => {
-      if (accepted && rootRef.current !== null) close(true)
-    })
+    lastActionRef.current = 'select'
+    void select(selection).then(settleSelection)
  }

  const modelLabel = currentChoice?.model.name ?? t('trigger.fallback')
@@ -243,16 +271,16 @@ export function ModelSelect(
              {state.status === 'loading' && (
                <div className={css.status}>{t('status.loading')}</div>
              )}
-              {state.error !== null && (
+              {state.error !== null && lastActionRef.current === 'load' && (
                <div className={css.error}>
                  <span>{t('error.action', { message: state.error })}</span>
-                  <button type="button" className={css.retry} onClick={() => { load() }}>{t('retry')}</button>
+                  <button type="button" className={css.retry} onClick={reload}>{t('retry')}</button>
                </div>
              )}
              {state.failures.map(failure => (
                <div className={css.warning} key={failure.id}>
                  <span>{t('warning.groupLoad', { name: failure.name, message: failure.message })}</span>
-                  <button type="button" className={css.retry} onClick={() => { load() }}>{t('retry')}</button>
+                  <button type="button" className={css.retry} onClick={reload}>{t('retry')}</button>
                </div>
              ))}
              <div className={clsx(css.groups, 'scrollable')}>
@@ -299,10 +327,10 @@ export function ModelSelect(

          {pane === 'effort' && (
            <>
-              {state.error !== null && (
+              {state.error !== null && lastActionRef.current === 'load' && (
                <div className={css.error}>
                  <span>{t('error.action', { message: state.error })}</span>
-                  <button type="button" className={css.retry} onClick={() => { load() }}>{t('action.reload')}</button>
+                  <button type="button" className={css.retry} onClick={reload}>{t('action.reload')}</button>
                </div>
              )}
              {effortChoices.length === 0
@@ -333,6 +361,15 @@ export function ModelSelect(
          )}
        </div>
      )}
+      {toast !== null && (
+        <Toast
+          key={toast.seq}
+          text={toast.text}
+          icon={<IconWarningOutline16 />}
+          anchor={rootRef.current?.closest<HTMLElement>('[data-composer-card]') ?? null}
+          onDone={() => { setToast(null) }}
+        />
+      )}
    </div>
  )
 }
--- a/packages/client/ui-model/src/client/index.ts
+++ b/packages/client/ui-model/src/client/index.ts
@@ -12,6 +12,8 @@
 * history outside the direct-parent continuation path.
 */
 import type { ModelSelection, SessionModels } from '@deepseek-ai/dsh-client-connection/client'
+// Type-only: pulls the forwarded Host-event face and ctx.remote merge.
+import type {} from '@deepseek-ai/dsh-api-remotes/client'
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
 import type { CommandServiceContract, SelectOption } from '@deepseek-ai/dsh-client-ui-command/client'
 // Type-only: pulls the ui-conversation SlotMap merge (the input.model seat).
@@ -96,7 +98,7 @@ function selectionOf(state: ModelDirectoryState, id: string): ModelSelection | u
 const NS = 'model'

 /** Required services: the contribution registry, the seat's slot registry, locale, and the service's own faces. */
-export const inject = ['command', 'connection', 'locale', 'sessions', 'slots']
+export const inject = ['command', 'connection', 'locale', 'sessions', 'slots', 'remote']

 /**
 * Client plugin body: mount ModelService, register the `model` dictionaries,
--- a/packages/client/ui-model/src/client/service.ts
+++ b/packages/client/ui-model/src/client/service.ts
@@ -32,7 +32,7 @@ interface LiveState {

 /** The `ctx.models` session model-selection service. */
 export class ModelService extends Service {
-  static inject = ['connection', 'sessions']
+  static inject = ['connection', 'sessions', 'remote']

  private readonly live: LiveState = { directories: new Map() }

@@ -49,14 +49,15 @@ export class ModelService extends Service {
    ctx.on('connection/reset', () => {
      for (const directory of this.live.directories.values()) directory.resetConnected()
    })
-    // Provider topology changed on the host (a settings-born route appeared
-    // or dropped): refresh every open directory in the background so pickers
-    // show the new catalog without a reopen. Failures stay on each store.
-    ctx.on('models/changed', () => {
+    // Either source can change the directory: registry topology commits and
+    // settings documents that carry provider catalogs or default selection.
+    const refresh = (): void => {
      for (const directory of this.live.directories.values()) {
        directory.load().catch(() => undefined)
      }
-    })
+    }
+    ctx.remote.$on('llm/adapters-updated', refresh)
+    ctx.remote.$on('settings/document-updated', refresh)
  }

  /**
--- a/packages/client/ui-model/tests/browser-plugin.spec.ts
+++ b/packages/client/ui-model/tests/browser-plugin.spec.ts
@@ -13,6 +13,7 @@ import { describe, expect, it } from 'vitest'
 import { createScope } from '@deepseek-ai/dsh-client-runtime/client'
 import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
+import { TestRemote } from '@deepseek-ai/dsh-client-test-runtime'
 import type { ModelSelection } from '@deepseek-ai/dsh-client-connection/client'
 import type { CommandContribution, SelectOption } from '@deepseek-ai/dsh-client-ui-command/client'
 import type { ModelSelectInjected } from '../src/client/slots.ts'
@@ -112,6 +113,7 @@ async function bench() {
      ? { parentSessionId: sid('parent'), childSessionId: id, mode: 'continuable' as const }
      : undefined,
  })
+  new TestRemote(ctx)
  const fiber = ctx.plugin({ inject: [...inject], apply })
  await fiber.await()
  await ctx.plugin(function probe() {}).await()
@@ -245,14 +247,14 @@ describe('ui-model dual entry', () => {
    expect(b.blockOf('s1')).toBeUndefined()

    b.setRoutable(false)
-    b.ctx.emit('models/changed')
+    b.ctx.remote.$dispatch('llm/adapters-updated', [])
    await Promise.resolve()
    await Promise.resolve()
    expect(b.blockOf('s1')?.reason).toBe(zh['blocked.composer'])

    // Recovering clears it without a reload of the surface.
    b.setRoutable(true)
-    b.ctx.emit('models/changed')
+    b.ctx.remote.$dispatch('settings/document-updated', ['llm-deepseek', 1])
    await Promise.resolve()
    await Promise.resolve()
    expect(b.blockOf('s1')).toBeUndefined()
--- a/packages/client/ui-model/tests/model-select.spec.tsx
+++ b/packages/client/ui-model/tests/model-select.spec.tsx
@@ -135,6 +135,38 @@ describe('ModelSelect reasoning effort', () => {
    expect(screen.getByRole('menuitemradio', { name: 'DeepSeek-V4-Flash' })).toBeTruthy()
  })

+  it('announces a rejected selection as a transient toast and keeps the in-menu strip for loads', async () => {
+    const groups = [{
+      id: 'deepseek-official',
+      name: 'DeepSeek',
+      models: [
+        { id: 'deepseek-v4-flash', name: 'DeepSeek-V4-Flash', reasoning },
+        { id: 'deepseek-v4-pro', name: 'DeepSeek-V4-Pro' },
+      ],
+    }]
+    const directory = createSnapshotStore<ModelDirectoryState>(state({ groups }))
+    const select = vi.fn(async () => {
+      directory.set(state({ groups, status: 'error', error: 'model-unavailable: session already contains images' }))
+      return false
+    })
+    render(<ModelSelect
+      locked={false}
+      available
+      directory={directory}
+      load={vi.fn()}
+      select={select}
+      t={t}
+    />)
+
+    fireEvent.click(screen.getByRole('button', { name: /选择模型|当前/ }))
+    fireEvent.click(screen.getByRole('menuitem', { name: /模型/ }))
+    fireEvent.click(screen.getByRole('menuitemradio', { name: /DeepSeek-V4-Pro/ }))
+    const toast = await screen.findByRole('alert')
+    expect(toast.textContent).toContain('模型操作失败：model-unavailable: session already contains images')
+    // The selection failure does not render the in-menu load strip (no Retry).
+    expect(screen.queryByRole('button', { name: '重试' })).toBeNull()
+  })
+
  it('renders no Agent-bound control for an addressed subagent session', () => {
    const load = vi.fn()
    render(<ModelSelect
--- a/packages/client/ui-model/tsconfig.json
+++ b/packages/client/ui-model/tsconfig.json
@@ -37,6 +37,9 @@
    },
    {
      "path": "../../support/invariants"
+    },
+    {
+      "path": "../../api/remotes/tsconfig.client.json"
    }
  ]
 }
--- a/packages/client/ui-models/README.i18n.yaml
+++ b/packages/client/ui-models/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-models/README.md
-README.md: 89a253fca9f16ea5655cdd7536a441e98dcc4d3c
-README.zh.md: 350be495f1491738e6e861ba127b3b0070a5f073
+README.md: f6604f822412e9eb4574696f5b99e73fb7bd98ff
+README.zh.md: 2500bbae0982571a9a88dd5c259749e3504728de
--- a/packages/client/ui-models/README.md
+++ b/packages/client/ui-models/README.md
@@ -8,7 +8,7 @@ Rows are the *configured* providers (their profile resolves in the owning namesp

 The DeepSeek step projects `deepseek-official` readiness from that same joined snapshot after earlier onboarding pages complete. It recognizes the official adapter through its `llm-deepseek` configurable-provider declaration, so an undeclared live route with the same provider id is not treated as repairable configuration. A configured credential reference completes the step without rendering, including a read-only launch-environment credential. Only a mounted, active adapter with a missing writable reference shows the page that opens Settings on Models, whose existing setup card exclusively owns key input and `credentials.set`; the step never holds a secret. An absent adapter, inactive route, failed join, read-only deployment, or unusable settings or credential capability completes the step without rendering so onboarding cannot block the product; Models remains the diagnostic surface.

-Every edit lands as `settings.mutate` path ops against the stored section — a set per changed field, an unset per cleared one, and a single unset for a deleted provider row. The page only ever holds the REDACTED descriptor, so it mutates the fields it can see rather than rebuilding a section. DeepSeek's `models` is one replace-by-value array: the editor shows inherited effective rows until the first model edit materializes the complete array in the user layer, while reset unsets that override. A row carries the model id and display name; its context window and output cap sit behind the row's own disclosure, with the same fields the pi-ai provider form uses. Either capacity is typed as a count with an optional decimal `K` or `M` suffix (`256K`, `1M`; `1M` is 1000K) and stored as the plain count, spelled back in the shortest form that round-trips. Empty ids, duplicate ids, empty explicit names, and unreadable, non-positive, or fractional capacities fail before any write. A typed API key is judged on its own field the same way: after trimming, it must be non-empty and every character must be printable ASCII (`[\x21-\x7E]`), which is exactly what an HTTP header value can carry — the twin of `normalizeApiKey` in `@deepseek-ai/dsh-llm`, mirrored here because the source-plane split forbids importing it. A value matching a pasted `NAME=value` environment line or wrapped in matching quotes is refused as the same format failure; that pasted-line check runs only in the browser, since a false positive in a resolver would leave the environment refusing the key as well. A field holding only whitespace fails rather than being silently dropped, while an empty field is not a failure at all: it means keep the stored key on an editor card, and authenticate some other way on a create card. A refused key blocks both the write and the endpoint interrogation, so the page never spends a round trip to be told what the field already says. Each settings write carries the card's current `revision`, so a concurrent write from another tab or an external `settings.yaml` edit is refused as `settings-conflict`; after settings commit, the card adopts the returned redacted user subtree and revision before storing the credential, which makes a failed credential stage retry only that stage. Deletion removes a configured, writable credential only when the profile names the page's derived `<ROUTE>_API_KEY` target, then unsets the profile; both operations are idempotent, and a partial failure remains in the identified confirmation dialog for retry. Environment credentials, custom references, and credentials whose target cannot be identified remain untouched. The page refetches on the pushed invalidations (`settings/changed`, `credentials/changed`, `models/changed`, and `connection/reset`) once it has loaded, so an external `settings.yaml` edit, a second tab, or a settings-born route converges without polling.
+Every edit lands as `settings.mutate` path ops against the stored section — a set per changed field, an unset per cleared one, and a single unset for a deleted provider row. The page only ever holds the REDACTED descriptor, so it mutates the fields it can see rather than rebuilding a section. DeepSeek's `models` is one replace-by-value array: the editor shows inherited effective rows until the first model edit materializes the complete array in the user layer, while reset unsets that override. A row carries the model id and display name; its context window and output cap sit behind the row's own disclosure, with the same fields the pi-ai provider form uses. Either capacity is typed as a count with an optional decimal `K` or `M` suffix (`256K`, `1M`; `1M` is 1000K) and stored as the plain count, spelled back in the shortest form that round-trips. Empty ids, duplicate ids, empty explicit names, and unreadable, non-positive, or fractional capacities fail before any write. A typed API key is judged on its own field the same way: after trimming, it must be non-empty and every character must be printable ASCII (`[\x21-\x7E]`), which is exactly what an HTTP header value can carry — the twin of `normalizeApiKey` in `@deepseek-ai/dsh-llm`, mirrored here because the source-plane split forbids importing it. A value matching a pasted `NAME=value` environment line or wrapped in matching quotes is refused as the same format failure; that pasted-line check runs only in the browser, since a false positive in a resolver would leave the environment refusing the key as well. A field holding only whitespace fails rather than being silently dropped, while an empty field is not a failure at all: it means keep the stored key on an editor card, and authenticate some other way on a create card. A refused key blocks both the write and the endpoint interrogation, so the page never spends a round trip to be told what the field already says. Each settings write carries the card's current `revision`, so a concurrent write from another tab or an external `settings.yaml` edit is refused as `settings-conflict`; after settings commit, the card adopts the returned redacted user subtree and revision before storing the credential, which makes a failed credential stage retry only that stage. Deletion removes a configured, writable credential only when the profile names the page's derived `<ROUTE>_API_KEY` target, then unsets the profile; both operations are idempotent, and a partial failure remains in the identified confirmation dialog for retry. Environment credentials, custom references, and credentials whose target cannot be identified remain untouched. Once loaded, the page subscribes directly to forwarded `settings/document-updated`, `credentials/updated`, and `llm/adapters-updated` owner events, plus local `connection/reset`, so an external `settings.yaml` edit, a second tab, or a settings-born route converges without polling.

 ## Model list and endpoint interrogation

--- a/packages/client/ui-models/README.zh.md
+++ b/packages/client/ui-models/README.zh.md
@@ -8,7 +8,7 @@

 前序首次使用引导页面完成后，DeepSeek 步骤会从同一个联接快照得出 `deepseek-official` 的就绪状态。它通过 `llm-deepseek` 的可配置提供方声明识别官方适配器，因此同 id 但未声明的存活路由不属于可修复配置。凭据引用已配置时，该步骤会直接完成而不渲染，其中包括来自启动环境且只读的凭据。只有已挂载且活跃、引用可写但尚未配置的适配器才会显示前往「设置」Models 分区的页面；密钥输入和 `credentials.set` 仅由该分区已有的设置卡片负责，该步骤绝不持有 secret。适配器缺失、路由不活跃、联接失败、部署只读或设置／凭据能力不可用时，该步骤均不渲染并直接完成，以免首次使用引导阻塞产品；Models 页仍是诊断界面。

-每一次编辑都以 `settings.mutate` 的路径 op 落到已存分节上——每个变更字段一条 set、每个清空字段一条 unset、删除提供方行则是单独一条 unset。页面自始至终只持有**脱敏后**的 descriptor，因此它只修改自己看得见的字段，而不重建分节。DeepSeek 的 `models` 是一个按值整体替换的数组：编辑器会显示继承而来的生效模型行，直到第一次模型编辑将完整数组具化到用户层；重置则会取消该覆盖。每个模型行承载模型 ID 与显示名称，其上下文窗口与最大输出 token 数则收在该行自己的折叠区里，使用与 pi-ai 提供方表单相同的字段。两项容量都按数值键入，可带十进制的 `K` 或 `M` 后缀（`256K`、`1M`；`1M` 即 1000K），存储为纯数值，回显时写成能够往返的最短形式。空 ID、重复 ID、显式填写的空名称，以及无法读取、非正数或非整数的容量都会在写入前失败。键入的 API 密钥同样在它自己的字段上被判定：trim 之后必须非空，且每个字符都是可打印 ASCII（`[\x21-\x7E]`）——这正是 HTTP 标头值所能承载的范围，是 `@deepseek-ai/dsh-llm` 中 `normalizeApiKey` 的孪生体，因源码平面分割禁止直接引入而在此镜像。与整行粘贴的 `NAME=value` 环境变量匹配或首尾成对引号包裹的值，会以同一条格式失败被拒绝；这项粘贴行检查只在浏览器中运行，因为 resolver 中的一次误判会连带让环境变量这条路也拒绝该密钥。只含空白的输入框会失败而不是被静默丢弃；留空则完全不是失败：在编辑卡片上意味着保持已存储的密钥，在新建卡片上则意味着以其他方式鉴权。被拒绝的密钥会同时拦截写入与端点探测，因此页面不会白花一次往返去换取字段上已经写明的答案。每次 settings 写入都携带卡片当前的 `revision`，因此来自另一个标签页或对 `settings.yaml` 的外部编辑所产生的并发写入会以 `settings-conflict` 被拒绝；settings 提交成功后，卡片会在存储凭据前采用响应返回的脱敏用户子树与 revision，因此凭据阶段失败时，重试只会重复该阶段。删除操作只会在 profile 指向页面派生的 `<ROUTE>_API_KEY` 目标时清除已配置且可写的凭据，随后取消设置 profile；两项操作都具备幂等性，部分失败会停留在点名目标的确认对话框中供重试。环境凭据、自定义引用和无法识别目标的凭据保持不变。页面加载完成后会在推送的失效事件（`settings/changed`、`credentials/changed`、`models/changed` 与 `connection/reset`）上重拉，因此外部的 `settings.yaml` 编辑、第二个标签页或 settings 新生的路由都无需轮询即可收敛。
+每一次编辑都以 `settings.mutate` 的路径 op 落到已存分节上——每个变更字段一条 set、每个清空字段一条 unset、删除提供方行则是单独一条 unset。页面自始至终只持有**脱敏后**的 descriptor，因此它只修改自己看得见的字段，而不重建分节。DeepSeek 的 `models` 是一个按值整体替换的数组：编辑器会显示继承而来的生效模型行，直到第一次模型编辑将完整数组具化到用户层；重置则会取消该覆盖。每个模型行承载模型 ID 与显示名称，其上下文窗口与最大输出 token 数则收在该行自己的折叠区里，使用与 pi-ai 提供方表单相同的字段。两项容量都按数值键入，可带十进制的 `K` 或 `M` 后缀（`256K`、`1M`；`1M` 即 1000K），存储为纯数值，回显时写成能够往返的最短形式。空 ID、重复 ID、显式填写的空名称，以及无法读取、非正数或非整数的容量都会在写入前失败。键入的 API 密钥同样在它自己的字段上被判定：trim 之后必须非空，且每个字符都是可打印 ASCII（`[\x21-\x7E]`）——这正是 HTTP 标头值所能承载的范围，是 `@deepseek-ai/dsh-llm` 中 `normalizeApiKey` 的孪生体，因源码平面分割禁止直接引入而在此镜像。与整行粘贴的 `NAME=value` 环境变量匹配或首尾成对引号包裹的值，会以同一条格式失败被拒绝；这项粘贴行检查只在浏览器中运行，因为 resolver 中的一次误判会连带让环境变量这条路也拒绝该密钥。只含空白的输入框会失败而不是被静默丢弃；留空则完全不是失败：在编辑卡片上意味着保持已存储的密钥，在新建卡片上则意味着以其他方式鉴权。被拒绝的密钥会同时拦截写入与端点探测，因此页面不会白花一次往返去换取字段上已经写明的答案。每次 settings 写入都携带卡片当前的 `revision`，因此来自另一个标签页或对 `settings.yaml` 的外部编辑所产生的并发写入会以 `settings-conflict` 被拒绝；settings 提交成功后，卡片会在存储凭据前采用响应返回的脱敏用户子树与 revision，因此凭据阶段失败时，重试只会重复该阶段。删除操作只会在 profile 指向页面派生的 `<ROUTE>_API_KEY` 目标时清除已配置且可写的凭据，随后取消设置 profile；两项操作都具备幂等性，部分失败会停留在点名目标的确认对话框中供重试。环境凭据、自定义引用和无法识别目标的凭据保持不变。页面加载完成后会直接订阅转发的 owner 事件 `settings/document-updated`、`credentials/updated`、`llm/adapters-updated`，以及本地 `connection/reset`，因此外部的 `settings.yaml` 编辑、第二个标签页或 settings 新生的路由都无需轮询即可收敛。

 ## 模型列表与端点询问

--- a/packages/client/ui-models/package.json
+++ b/packages/client/ui-models/package.json
@@ -34,7 +34,8 @@
      "inject": [
        "@deepseek-ai/dsh-client-runtime",
        "@deepseek-ai/dsh-client-ui-settings",
-        "@deepseek-ai/dsh-client-locale"
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-api-remotes"
      ],
      "platform": "web"
    }
@@ -45,6 +46,8 @@
  },
  "license": "BSD-3-Clause",
  "peerDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
    "@deepseek-ai/dsh-client-schema-form": "workspace:^",
@@ -52,10 +55,10 @@
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-client-web-react": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
-    "@deepseek-ai/cordis": "workspace:^",
    "react": "^18.2.0"
  },
  "devDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
--- a/packages/client/ui-models/src/client/index.ts
+++ b/packages/client/ui-models/src/client/index.ts
@@ -12,6 +12,9 @@ import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
 import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
+// Type-only: pulls the ctx.remote merge and the forwarded-event key face
+// (settings/credentials invalidations ride the allowlist) into this program.
+import type {} from '@deepseek-ai/dsh-api-remotes/client'
 import { ModelsSection } from './ModelsSection.tsx'
 import type { ModelsSectionInjected } from './ModelsSection.tsx'
 import { DeepSeekOnboardingDialog } from './DeepSeekOnboardingDialog.tsx'
@@ -48,7 +51,7 @@ export function refreshIfLoaded(controller: ModelsSettingsStore): void {
 * ui-settings' apply, whose activation order relative to this one is NOT
 * constrained; registration depends on each slot through `slots.inject()`.
 */
-export const inject = ['slots', 'locale', 'connection']
+export const inject = ['slots', 'locale', 'connection', 'remote']

 /**
 * Register the Models section once the `settings.section` declaration is on
@@ -82,9 +85,9 @@ export function apply(ctx: ClientContext): void {
  ctx.effect(() => {
    const refresh = (): void => { refreshIfLoaded(controller) }
    const disposers = [
-      ctx.on('settings/changed', refresh),
-      ctx.on('credentials/changed', refresh),
-      ctx.on('models/changed', refresh),
+      ctx.remote.$on('settings/document-updated', refresh),
+      ctx.remote.$on('credentials/updated', refresh),
+      ctx.remote.$on('llm/adapters-updated', refresh),
      ctx.on('connection/reset', refresh),
    ]
    return () => { for (const dispose of disposers) dispose() }
--- a/packages/client/ui-models/tests/apply.spec.ts
+++ b/packages/client/ui-models/tests/apply.spec.ts
@@ -4,7 +4,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { resolveSlotLabel } from '@deepseek-ai/dsh-client-ui-slots'
 import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
-import { usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
+import { TestRemote, usePinnedBrowserLanguages } from '@deepseek-ai/dsh-client-test-runtime'
 import { apply, inject, refreshIfLoaded } from '@deepseek-ai/dsh-client-ui-models/client'
 import { ModelsSection } from '../src/client/ModelsSection.tsx'
 import { DeepSeekOnboardingDialog } from '../src/client/DeepSeekOnboardingDialog.tsx'
@@ -18,6 +18,9 @@ async function bench() {
  await ctx.plugin(SlotsService).await()
  const locale = new LocaleService(ctx)
  ctx.provide('locale', locale)
+  // The plugins inject `remote`; forwarded events reach them through the
+  // same `$dispatch` handoff the connection sink makes.
+  new TestRemote(ctx)
  // The apply path only captures the wire face; no call leaves this fake
  // until a section actually loads.
  ctx.provide('connection', { api: {} } as never)
@@ -39,7 +42,7 @@ function declare(slots: SlotsService): () => void {

 describe('ui-models apply', () => {
  it('declares the services it uses', () => {
-    expect(inject).toEqual(['slots', 'locale', 'connection'])
+    expect(inject).toEqual(['slots', 'locale', 'connection', 'remote'])
  })

  it('registers the models nav entry for declarations before or after apply', async () => {
@@ -135,9 +138,9 @@ describe('pushed invalidations', () => {
    declare(b.slots)
    await b.ctx.plugin({ inject: [...inject], apply }).await()
    // The fake wire face has no methods: a fetch attempt would throw.
-    b.ctx.emit('settings/changed', 'llm-pi-ai')
-    b.ctx.emit('credentials/changed', 'OPENAI_API_KEY')
-    b.ctx.emit('models/changed')
+    b.ctx.remote.$dispatch('settings/document-updated', ['llm-pi-ai', 1])
+    b.ctx.remote.$dispatch('credentials/updated', ['OPENAI_API_KEY'])
+    b.ctx.remote.$dispatch('llm/adapters-updated', [])
    b.ctx.emit('connection/reset')
  })

@@ -167,7 +170,7 @@ describe('pushed invalidations', () => {
    )()
    injected.controller.store.update((state) => { state.status = 'ready' })
    const load = vi.spyOn(injected.controller, 'load').mockResolvedValue()
-    b.ctx.emit('credentials/changed', 'DEEPSEEK_API_KEY')
+    b.ctx.remote.$dispatch('credentials/updated', ['DEEPSEEK_API_KEY'])
    expect(load).toHaveBeenCalledTimes(1)
  })
 })
--- a/packages/client/ui-models/tsconfig.json
+++ b/packages/client/ui-models/tsconfig.json
@@ -37,6 +37,9 @@
    },
    {
      "path": "../../support/invariants"
+    },
+    {
+      "path": "../../api/remotes/tsconfig.client.json"
    }
  ]
 }
--- a/packages/client/ui-permission/package.json
+++ b/packages/client/ui-permission/package.json
@@ -35,7 +35,9 @@
        "@deepseek-ai/dsh-client-connection",
        "@deepseek-ai/dsh-client-locale",
        "@deepseek-ai/dsh-client-runtime",
-        "@deepseek-ai/dsh-client-ui-command"
+        "@deepseek-ai/dsh-client-ui-command",
+        "@deepseek-ai/dsh-api-remotes",
+        "@deepseek-ai/dsh-client-ui-settings"
      ],
      "platform": "web"
    }
@@ -46,33 +48,38 @@
  },
  "license": "BSD-3-Clause",
  "peerDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
    "@deepseek-ai/dsh-client-schema-form": "workspace:^",
    "@deepseek-ai/dsh-client-ui-command": "workspace:^",
    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slash": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
    "@deepseek-ai/dsh-permission": "workspace:^",
-    "@deepseek-ai/cordis": "workspace:^",
    "react": "^18.2.0"
  },
  "devDependencies": {
+    "@deepseek-ai/cordis": "workspace:^",
+    "@deepseek-ai/dsh-api-remotes": "workspace:^",
    "@deepseek-ai/dsh-client-connection": "workspace:^",
    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
    "@deepseek-ai/dsh-client-schema-form": "workspace:^",
+    "@deepseek-ai/dsh-client-test-runtime": "workspace:^",
    "@deepseek-ai/dsh-client-ui-command": "workspace:^",
    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
+    "@deepseek-ai/dsh-client-ui-settings": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slash": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-client-web-react": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
    "@deepseek-ai/dsh-permission": "workspace:^",
    "@types/react": "~18.3.1",
-    "@deepseek-ai/cordis": "workspace:^",
    "react": "^18.2.0"
  },
  "files": [
--- a/packages/client/ui-permission/src/client/index.ts
+++ b/packages/client/ui-permission/src/client/index.ts
@@ -16,6 +16,11 @@
 import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
+// Type-only: the settings slot types (this package registers a General row).
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+// Type-only: pulls the ctx.remote merge and the forwarded-event key face
+// (the settings invalidation rides the allowlist) into this program.
+import type {} from '@deepseek-ai/dsh-api-remotes/client'
 import type { ClientContext, SessionFace } from '@deepseek-ai/dsh-client-runtime/client'
 import type { CommandServiceContract, SelectOption } from '@deepseek-ai/dsh-client-ui-command/client'
 import type { ClientSessionContext } from '@deepseek-ai/dsh-client-ui-slash/client'
@@ -38,7 +43,7 @@ export type {
 } from './settings-store.ts'

 /** Required services (cordis fiber inject). */
-export const inject = ['command', 'sessions', 'slots', 'locale', 'connection']
+export const inject = ['command', 'sessions', 'slots', 'locale', 'connection', 'remote']

 const ACCESS_NS = 'permission.access'

@@ -118,12 +123,12 @@ export function apply(ctx: ClientContext): void {
  })

  ctx.effect(() => {
-    const refresh = (ns?: string): void => {
-      if (ns !== undefined && ns !== PERMISSION_SETTINGS_NS) return
-      refreshPermissionIfLoaded(controller)
-    }
+    const refresh = (): void => { refreshPermissionIfLoaded(controller) }
    const disposers = [
-      ctx.on('settings/changed', refresh),
+      ctx.remote.$on('settings/document-updated', (ns) => {
+        if (ns !== PERMISSION_SETTINGS_NS) return
+        refresh()
+      }),
      ctx.on('connection/reset', () => { refresh() }),
    ]
    return () => {
--- a/packages/client/ui-permission/tests/browser-plugin.spec.ts
+++ b/packages/client/ui-permission/tests/browser-plugin.spec.ts
@@ -12,6 +12,7 @@ import { Context } from '@deepseek-ai/cordis'
 import { describe, expect, it } from 'vitest'
 import { SlotsService, type SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
+import { TestRemote } from '@deepseek-ai/dsh-client-test-runtime'
 import type { CommandDecoration } from '@deepseek-ai/dsh-client-ui-command/client'
 import type { PermissionSelect } from '@deepseek-ai/dsh-permission/client'
 import {
@@ -37,6 +38,9 @@ async function bench() {
  const locale = new LocaleService(ctx)
  locale.setLocale('en')
  ctx.provide('locale', locale)
+  // The plugin injects `remote`; forwarded events reach it through the same
+  // `$dispatch` handoff the connection sink makes.
+  new TestRemote(ctx)
  ctx.slots.register({
    name: 'root',
    children: {
@@ -158,8 +162,8 @@ describe('ui-permission browser plugin', () => {
  it('disposal removes the decoration (HMR safety)', async () => {
    const b = await bench()
    expect(b.decoration()).toBeDefined()
-    b.ctx.emit('settings/changed', 'another')
-    b.ctx.emit('settings/changed', 'permission')
+    b.ctx.remote.$dispatch('settings/document-updated', ['another', 1])
+    b.ctx.remote.$dispatch('settings/document-updated', ['permission', 1])
    b.ctx.emit('connection/reset')
    await b.fiber.dispose()
    expect(b.decoration()).toBeUndefined()
--- a/Show More
+++ b/Show More