dsh-vscode-mode 0.1.53 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vscode-mode",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "description": "DSH 上的类 VSCode 编码体验：Monaco 编辑器（文件页签/QuickOpen/状态栏，可驻 dsh-better-sidebar 侧边栏与对话同屏）+ Agent 编辑差异审查（整文件差异/采纳/拒绝/归档/回滚）+ 语言服务器（LSP）智能（跳转定义/引用/hover/大纲 + VSIX 扩展市场安装），状态持久化到工作区旁车",
   "keywords": [
     "dsh",

package/src/client/compat.ts

@@ -92,3 +92,34 @@ export function patchMethod<T extends object, K extends keyof T>(
     if (owner[key] === patched) owner[key] = original
   }
 }
+
+/** patchAccessor 的包装实现形状（original 为补丁前的实时实现）。 */
+export type PatchWrapper = (original: (...args: never[]) => unknown, ...args: never[]) => unknown
+
+/**
+ * accessor 感知的链式补丁：DSH 0.1.3+ 的 remote 命名空间方法（如
+ * remote.session.openWorkspacePath）是 getter-only accessor（Object.defineProperty
+ * 仅定义 get，直接赋值在严格模式下抛 TypeError），须整体替换属性描述符。
+ * 新 getter 每次访问现场调用原 getter 取最新一次性函数作 original，天然跟随
+ * DSH 内部 methods 表变化；data 属性降级走 patchMethod；属性缺失返回 null。
+ * @author ddj 2026年09月08号
+ * @param owner 目标对象
+ * @param key 属性名
+ * @param wrapper 包装实现（original 为补丁前的实时实现）
+ * @returns 恢复函数（幂等、带归属校验）；属性缺失时返回 null
+ */
+export function patchAccessor(owner: object, key: string, wrapper: PatchWrapper): (() => void) | null {
+  const descriptor = Object.getOwnPropertyDescriptor(owner, key)
+  if (!descriptor) return null
+  if (typeof descriptor.get !== 'function') return patchMethod(owner, key as never, wrapper as never)
+  const rawGet = descriptor.get as (this: object) => unknown
+  const patchedGet = function (): unknown {
+    const original = (...args: never[]) => (rawGet.call(owner) as (...args: never[]) => unknown)(...args)
+    return (...args: never[]) => wrapper(original, ...args)
+  }
+  Object.defineProperty(owner, key, { configurable: true, enumerable: descriptor.enumerable, get: patchedGet })
+  return () => {
+    const current = Object.getOwnPropertyDescriptor(owner, key)
+    if (current?.get === patchedGet) Object.defineProperty(owner, key, descriptor)
+  }
+}

package/src/client/imagePreview.ts

@@ -0,0 +1,45 @@
+/**
+ * dsh-vscode-mode client — 图片文件判定与 data URL 组装（编辑区图片预览面板用）。
+ * 纯函数、无 DOM 依赖，便于单测；MIME 表收敛在 shared/rpc.ts（host base64 响应同源）。
+ * @author ddj 2026年09月08号
+ */
+import { IMAGE_MIME } from '../shared/rpc.js'
+
+/** 可预览的图片扩展名集合（小写、无点）。 */
+const IMAGE_EXT_SET: Set<string> = new Set(Object.keys(IMAGE_MIME))
+
+/**
+ * 判断路径是否为可预览的图片文件（取 basename 扩展名，大小写不敏感）。
+ * @author ddj 2026年09月08号
+ * @param path 文件路径（`/` 或 `\` 分隔均可）
+ * @returns 是否图片文件
+ */
+export function isImagePath(path: string): boolean {
+  const base = String(path || '').split(/[\\/]/).pop() || ''
+  const dot = base.lastIndexOf('.')
+  if (dot <= 0) return false
+  return IMAGE_EXT_SET.has(base.slice(dot + 1).toLowerCase())
+}
+
+/**
+ * 判断路径是否为 SVG 文件（唯一提供「以文本打开」切换的图片格式）。
+ * @author ddj 2026年09月08号
+ * @param path 文件路径（`/` 或 `\` 分隔均可）
+ * @returns 是否 SVG
+ */
+export function isSvgPath(path: string): boolean {
+  const base = String(path || '').split(/[\\/]/).pop() || ''
+  const dot = base.lastIndexOf('.')
+  return dot > 0 && base.slice(dot + 1).toLowerCase() === 'svg'
+}
+
+/**
+ * base64 文本 → 可直接赋给 `<img src>` 的 data URL。
+ * @author ddj 2026年09月08号
+ * @param base64 base64 文本（不含 data: 前缀）
+ * @param mime MIME 类型（host edrv.read base64 响应携带）
+ * @returns data URL 字符串
+ */
+export function dataUrlOf(base64: string, mime: string): string {
+  return 'data:' + (mime || 'application/octet-stream') + ';base64,' + base64
+}

package/src/client/index.ts

@@ -25,6 +25,7 @@ import { loadMonaco } from './monaco/loader.js'
 import { createFileOpenerRegistry, scanSidebar, type FileOpenContext } from './fileOpeners.js'
 import type { FileOpenerRegistry } from './fileOpeners.js'
 import { installOpenPathRouter, vscodeOpener, autoValue } from './openPathRouter.js'
+import { patchRemoteOpen, probeRemoteOpen } from './remoteOpenRouter.js'
 import { setupExtOpen } from './externalOpen.js'
 import { SettingsContext } from './settingsContext.js'
 import { SIDEBAR_PLUGIN, pickSettingsBinder, registerSlotSafely } from './compat.js'
@@ -98,6 +99,17 @@ export function apply(ctx: any): void {
   const binder = pickSettingsBinder(ctx)
   const settings = binder.scope
   let selected = autoValue('auto')
+  /** 0.1.3+ 会话文件链接路由（remote.session.openWorkspacePath）是否已安装（compatSummary 展示用）。 */
+  let remoteOpenInstalled = false
+  /** 两条文件链接路由共用的路由日志（openPathRouter / remoteOpenRouter）。 */
+  const routeLogger = (message: string): void => console.warn('[dsh-vscode-mode] ' + message)
+  /** 两条路由共用的 FileOpenContext：当前会话 id 与工作区 cwd。 */
+  const openContext = (): FileOpenContext => {
+    const current = sessions?.list?.getSnapshot?.()
+    const sessionId = current?.current
+    const summary = sessionId ? current?.byId?.[sessionId] : undefined
+    return { sessionId, cwd: summary?.cwd } as FileOpenContext
+  }
   /** 可选探测 betterSidebar 服务（不进 inject：缺失会让插件停靠等待，杀死回退路径）。 */
   let sideService = detectSidebarService(ctx)
   /** 「添加到对话」动作集：编辑区/Tab 右键菜单注入文件引用与代码块（conversation 服务缺失时各动作安全降级）。 */
@@ -106,7 +118,8 @@ export function apply(ctx: any): void {
   /** 客户端侧兼容摘要（与 host 报告合并展示；惰性求值保证 HMR 后仍新鲜）。 */
   const compatSummary = (): CompatAdapter[] => [
     { name: '设置桥', active: settings !== undefined, note: settings !== undefined ? '使用 ' + binder.service + ' 桥' : '未绑定设置服务（fileOpenTool 持久化不可用）' },
-    { name: '文件打开路由（workspaces.openPath）', active: Boolean(workspaces?.openPath), note: 'vscode 打开器优先，失败回退系统打开' },
+    { name: '文件打开路由（workspaces.openPath）', active: Boolean(workspaces?.openPath), note: 'vscode 打开器优先，失败回退系统打开（0.1.2 及更早 DSH 的对话文件链接主路径）' },
+    { name: '会话文件链接路由（remote.session.openWorkspacePath）', active: remoteOpenInstalled, note: '0.1.3+ 对话文件引用/产物打开优先走插件打开器，失败回退系统打开' },
     { name: '侧边栏打开器（' + SIDEBAR_PLUGIN + '）', active: registry.get(SIDEBAR_PLUGIN) !== undefined, note: registry.get(SIDEBAR_PLUGIN) !== undefined ? '已注册（优先级 80）' : '未检测到侧边栏打开能力' },
     { name: '侧边栏编辑区（' + SIDEBAR_PLUGIN + '）', active: sideService !== undefined, note: sideService !== undefined ? '编辑区=侧边栏 Tab（对话+编辑同屏）' : '未检测到；安装 dsh-better-sidebar 后刷新启用侧边栏形态（' + SIDEBAR_INSTALL_CMD + '）' },
   ]
@@ -173,15 +186,40 @@ export function apply(ctx: any): void {
       workspaces,
       registry,
       selected: () => selected,
-      context: () => {
-        const current = sessions?.list?.getSnapshot?.()
-        const sessionId = current?.current
-        const summary = sessionId ? current?.byId?.[sessionId] : undefined
-        return { sessionId, cwd: summary?.cwd } as FileOpenContext
-      },
-      logger: (message: string) => console.warn('[dsh-vscode-mode] ' + message),
+      context: openContext,
+      logger: routeLogger,
     }), 'vscode-mode: file link routing')
   }
+  // 0.1.3+ 会话文件链接主路径：dsh-client-ui-chat 的 openFile 直接调
+  // remote.session.openWorkspacePath（session/openWorkspacePath RPC），绕开
+  // workspaces.openPath；该 namespace 由 api-remotes 在 loader.await 后挂载，
+  // 晚于本插件 apply，且旧版 DSH 可能整段不存在——不加 inject（避免旧版停等
+  // 永不激活），改为定时探测有界重试（与侧栏服务探测同款节奏）。
+  let remoteRetries = 0
+  const retryRemoteOpen = (): void => {
+    if (remoteOpenInstalled || remoteRetries >= 15) {
+      if (!remoteOpenInstalled) console.warn('[dsh-vscode-mode] 未探测到 remote.session.openWorkspacePath，0.1.3+ 会话文件链接路由未安装')
+      return
+    }
+    remoteRetries += 1
+    schedule(() => {
+      if (remoteOpenInstalled) return
+      const service = probeRemoteOpen(ctx)
+      if (!service) {
+        retryRemoteOpen()
+        return
+      }
+      const disposer = patchRemoteOpen(service, { registry, selected: () => selected, context: openContext, logger: routeLogger })
+      if (!disposer) {
+        console.warn('[dsh-vscode-mode] remote.session 存在但 openWorkspacePath 不可补丁，会话文件链接路由未安装')
+        return
+      }
+      remoteOpenInstalled = true
+      ctx.effect(() => disposer, 'vscode-mode: remote file link routing')
+      console.info('[dsh-vscode-mode] 已安装 0.1.3+ 会话文件链接路由（remote.session.openWorkspacePath）')
+    }, 2000)
+  }
+  retryRemoteOpen()
 
   // 中央「文件编辑」页签（旧形态回退）：类 VSCode 编辑器；侧边栏形态可用时编辑器住 betterSidebar Tab，
   // 本页签不注册（避免双实例：Monaco×2 + diff dock 每会话单源抢占）。

package/src/client/remoteOpenRouter.ts

@@ -0,0 +1,78 @@
+/**
+ * dsh-vscode-mode client — DSH 对话文件链接的 0.1.3+ 路由（remote.session 面）。
+ * 0.1.3 起 dsh-client-ui-chat 的 openFile 直接调 ctx.remote.session.openWorkspacePath
+ * （浏览器→host RPC session/openWorkspacePath），不再经过 workspaces.openPath，
+ * 旧路由补丁因此落空；该方法是 getter-only accessor，补丁经 compat.patchAccessor
+ * 换描述符安装。行为与 openPathRouter 对齐：插件打开器优先，"."（打开工作区文件夹）、
+ * 无可用打开器或打开失败时透传原实现（系统默认应用打开）。
+ * 纯逻辑，node 环境可单测（不依赖 DOM / events 模块）。
+ * 作者 ddj 2026年09月08号
+ */
+import { patchAccessor } from './compat.js'
+import { isAvailable, selectOpener, type FileOpenContext, type FileOpenerRegistry } from './fileOpeners.js'
+
+/** session.openWorkspacePath 的结果形状（host 返回 { opened: true }；客户端不做输出校验）。 */
+export interface OpenPathResult {
+  ok: boolean
+  value?: { opened: boolean }
+}
+
+/** openWorkspacePath 的请求形状；path 为 "." 时表示打开工作区文件夹。 */
+export interface OpenPathRequest {
+  path?: unknown
+}
+
+/** 补丁前 openWorkspacePath 的实时实现形状。 */
+type RemoteOpen = (request: OpenPathRequest) => Promise<OpenPathResult>
+
+/** 插件打开器接管成功时返回给调用方（chat 只看 ok，产物区读 value）。 */
+const OPENED_RESULT: OpenPathResult = { ok: true, value: { opened: true } }
+
+export interface RemoteOpenRouterOptions {
+  registry: FileOpenerRegistry
+  selected: () => string
+  context: () => FileOpenContext
+  logger?: (message: string) => void
+}
+
+/**
+ * 结构化探测 remote.session 命名空间服务及其 openWorkspacePath 方法。
+ * 旧版 DSH 无该 namespace、或 api-remotes 尚未挂载时返回 undefined。
+ * @author ddj 2026年09月08号
+ * @param ctx 客户端服务上下文
+ * @returns 命名空间服务实例；不可用返回 undefined
+ */
+export function probeRemoteOpen(ctx: { get: (name: string) => unknown }): object | undefined {
+  try {
+    const service = ctx.get('remote.session') as { openWorkspacePath?: unknown } | undefined
+    if (!service || typeof service.openWorkspacePath !== 'function') return undefined
+    return service
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * 安装可卸载的 remote.session.openWorkspacePath 路由（0.1.3+ 会话文件链接主路径）。
+ * @author ddj 2026年09月08号
+ * @param service probeRemoteOpen 命中的命名空间服务
+ * @param options 路由依赖
+ * @returns 恢复函数；目标属性缺失时返回 null（调用方停止安装并告警）
+ */
+export function patchRemoteOpen(service: object, options: RemoteOpenRouterOptions): (() => void) | null {
+  return patchAccessor(service, 'openWorkspacePath', async (original, ...args) => {
+    const fallback = original as unknown as RemoteOpen
+    const request = (args[0] ?? {}) as OpenPathRequest
+    const path = typeof request.path === 'string' ? request.path : ''
+    if (!path || path === '.') return fallback(request)
+    const opener = selectOpener(options.registry, options.selected())
+    if (!opener || !isAvailable(opener)) return fallback(request)
+    try {
+      await opener.open(path, options.context())
+      return OPENED_RESULT
+    } catch (error) {
+      options.logger?.('文件打开器 ' + opener.id + ' 失败，回退系统打开: ' + String(error))
+      return fallback(request)
+    }
+  })
+}

package/src/client/styles/editor.css

@@ -58,6 +58,12 @@
 [data-edrv-view] .edrv-minus-item::before { content: ''; position: absolute; left: 4px; top: 50%; width: 8px; height: 2px; transform: translateY(-50%); border-radius: 2px; background: #d9534f; }
 [data-edrv-view] .edrv-monaco-host { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
 [data-edrv-view] .edrv-monaco-host > div { position: absolute; inset: 0; min-width: 0; min-height: 0; }
+[data-edrv-view] .edrv-imgview { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+[data-edrv-view] .edrv-imgview-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; flex-shrink: 0; border-bottom: 1px solid var(--dsw-alias-border-l1, #e0e6e8); background: var(--dsw-alias-bg-layer-1, transparent); }
+[data-edrv-view] .edrv-imgview-meta { font-size: 11px; color: var(--dsw-alias-label-tertiary, #9aa5b1); white-space: nowrap; }
+[data-edrv-view] .edrv-imgview-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 14px; background-color: var(--dsw-alias-bg-layer-1, #f0f4f4); background-image: conic-gradient(rgba(128,128,128,.14) 25%, transparent 0 50%, rgba(128,128,128,.14) 0 75%, transparent 0); background-size: 16px 16px; }
+[data-edrv-view] .edrv-imgview-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 12px rgba(31,41,51,.18); }
+[data-edrv-view] .edrv-imgview-broken { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; color: var(--dsw-alias-label-tertiary, #777); }
 [data-edrv-view] .edrv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--dsw-alias-label-tertiary, #777); font-size: 13px; }
 [data-edrv-view] .edrv-diffbar { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0 auto; z-index: 25; width: fit-content; max-width: calc(100% - 20px); border-radius: 12px; background: var(--dsw-specific-tip, var(--dsw-alias-bg-layer-2, #f0f4f4)); border: 1px solid var(--dsw-alias-border-l1, #e0e6e8); box-shadow: none; overflow: visible; display: flex; flex-direction: column; }
 [data-edrv-view] .edrv-editor-area > .edrv-diffbar { max-height: calc(100% - 20px); }

package/src/client/ui/EditorView.ts

@@ -9,6 +9,7 @@ import React from 'react'
 import { dbg, rpc } from '../rpc.js'
 import { emitRefresh } from '../events.js'
 import { langOf, loadMonaco } from '../monaco/loader.js'
+import { dataUrlOf, isImagePath, isSvgPath } from '../imagePreview.js'
 import { applyTheme, registerThemes, themeNameOf } from '../monaco/theme.js'
 import { createDiffRenderer } from '../monaco/diffRender.js'
 import { ST, callIdAttr, noopHunk, summarize } from '../state/records.js'
@@ -53,6 +54,10 @@ export function EditorView(props) {
   const [dirtyMap, setDirtyMap] = React.useState({})
   const [content, setContent] = React.useState(null)
   const [contentPath, setContentPath] = React.useState(null)
+  const [imageSrc, setImageSrc] = React.useState(null) // 图片预览 data URL（图片 tab 专用，文本 tab 恒为 null）
+  const [imgSize, setImgSize] = React.useState(null) // 图片自然尺寸 { w, h }（路径栏 meta）
+  const [imgBroken, setImgBroken] = React.useState(false) // 图片解码失败（onError），显示占位与重试
+  const svgTextRef = React.useRef(new Set()) // 强制以文本打开的 SVG 路径集合（toggleSvgText 维护）
   const [status, setStatus] = React.useState('')
   const [lspServers, setLspServers] = React.useState([])
   const [error, setError] = React.useState(null)
@@ -117,6 +122,8 @@ export function EditorView(props) {
   }, [records, active])
 
   const contentReady = content !== null && contentPath === active
+  // 当前 tab 是否处于图片预览模式（与 loadContent 的分派条件同源；SVG 文本模式时为 false）
+  const isImageActive = !!active && isImagePath(active) && !svgTextRef.current.has(active)
   const regions = React.useMemo(() => diffRegions(currentRecords, contentReady ? content : null).filter((r) => !r.superseded), [currentRecords, content, contentPath, active])
   // useMemo 稳定引用：否则 hover 等重渲染会让 view zone effect 反复重建（- 号闪烁）
   const pendingRegions = React.useMemo(() => regions.filter((r) => r.status === ST.PENDING && !r.stale), [regions])
@@ -318,6 +325,11 @@ export function EditorView(props) {
    */
   const loadContent = (path, sid, force) => {
     const seq = ++loadSeqRef.current
+    // 图片文件走专用通道：base64 → data URL 预览，不建 Monaco model、不进文本/差异流程
+    if (isImagePath(path) && !svgTextRef.current.has(path)) {
+      loadImage(path, sid, seq)
+      return
+    }
     const cachedModel = force ? null : modelsRef.current.get(path)
     if (cachedModel) {
       // model 命中：直接显示其内容（切 tab 零等待），后台静默校验
@@ -361,6 +373,47 @@ export function EditorView(props) {
     })
   }
 
+  /**
+   * 加载图片文件为 data URL（编辑区只读预览）；失败走 loadError 面板（重试经 loadContent 分派回此）。
+   * @author ddj 2026年09月08号
+   * @param path 图片文件路径
+   * @param sid 会话 id
+   * @param seq 加载序号（过期响应丢弃）
+   */
+  const loadImage = (path, sid, seq) => {
+    setImageSrc(null)
+    setImgSize(null)
+    setImgBroken(false)
+    setLoadStage({ progress: monaco ? 72 : 12, message: '读取图片…' })
+    rpc('edrv.read', { sessionId: sid, path, encoding: 'base64' }).then((res) => {
+      if (seq !== loadSeqRef.current || path !== active) return
+      if (res && res.ok && res.encoding === 'base64') {
+        if (!res.mime) {
+          setLoadError('host 版本过旧：图片响应缺少 mime')
+          setError('host 版本过旧：图片响应缺少 mime')
+          setStatus('读取失败')
+          return
+        }
+        setImageSrc(dataUrlOf(res.content, res.mime))
+        setLoadStage({ progress: 100, message: '图片已就绪' })
+        setStatus('已加载')
+        return
+      }
+      const base = res?.error ? String(res.error) : '读取失败'
+      // 带出 host 解析后的真实路径：跳转失败时一眼看出是路径解析错还是目标不存在
+      const message = res?.resolvedPath ? base + '：' + String(res.resolvedPath) : base
+      setLoadError(message)
+      setError(message)
+      setStatus('读取失败')
+    }).catch((e) => {
+      if (seq !== loadSeqRef.current) return
+      const message = 'read异常:' + String(e)
+      setLoadError(message)
+      setError(message)
+      setStatus('读取失败')
+    })
+  }
+
   // 挂载轮询 + 事件订阅
   React.useEffect(() => {
     if (!sessionId) return
@@ -633,6 +686,9 @@ export function EditorView(props) {
     if (!active) return
     setContent(null)
     setContentPath(null)
+    setImageSrc(null)
+    setImgSize(null)
+    setImgBroken(false)
     setLoadError(null)
     setLoadStage({ progress: 10, message: '准备读取文件…' })
     setStatus('加载中…')
@@ -703,6 +759,7 @@ export function EditorView(props) {
   const doSave = (silent) => {
     const ed = editorRef.current
     if (!active || !ed) return
+    if (isImageActive) { setStatus('图片只读预览'); return }
     const text = ed.getValue()
     if (!silent) setStatus('保存中…')
     rpc('edrv.save', { sessionId, path: active, content: text }).then((res) => {
@@ -975,6 +1032,53 @@ export function EditorView(props) {
     refreshRecords(skipStale === true)
   }
 
+  /**
+   * SVG 在图片预览与文本编辑间切换（按路径记忆；重载分派随集合状态自动路由）。
+   * @author ddj 2026年09月08号
+   * @param path SVG 文件路径
+   */
+  const toggleSvgText = (path) => {
+    const next = new Set(svgTextRef.current)
+    if (next.has(path)) next.delete(path)
+    else next.add(path)
+    svgTextRef.current = next
+    setContent(null)
+    setContentPath(null)
+    setImageSrc(null)
+    setImgSize(null)
+    setImgBroken(false)
+    setLoadError(null)
+    setStatus(next.has(path) ? '已切换为文本模式' : '已切换为图片预览')
+    loadContent(path, sessionId, true)
+  }
+
+  /**
+   * 图片预览面板：工具条（尺寸 meta / SVG 文本切换 / 刷新）+ 棋盘底自适应图片。
+   * @author ddj 2026年09月08号
+   */
+  const imagePanel = () => React.createElement('div', { className: 'edrv-imgview' },
+    React.createElement('div', { className: 'edrv-imgview-bar' },
+      React.createElement('span', { className: 'edrv-imgview-meta' },
+        imgBroken ? '图片无法显示' : (imgSize ? imgSize.w + '×' + imgSize.h : '…')),
+      React.createElement('span', { style: { flex: 1 } }),
+      (isSvgPath(active) ? React.createElement('button', {
+        className: 'edrv-pill edrv-pill-ghost', title: '以文本方式查看/编辑（SVG 为文本格式）',
+        onClick: () => toggleSvgText(active),
+      }, '以文本打开') : null),
+      React.createElement('button', { className: 'edrv-pill edrv-pill-ghost', title: '重新加载图片', onClick: () => reloadFile() }, '⟳ 刷新')),
+    React.createElement('div', { className: 'edrv-imgview-stage' },
+      (imgBroken
+        ? React.createElement('div', { className: 'edrv-imgview-broken' },
+            React.createElement('div', null, '图片解码失败，文件可能已损坏'),
+            React.createElement('button', { className: 'edrv-pill edrv-pill-ghost', onClick: () => reloadFile() }, '重试'))
+        : React.createElement('img', {
+            className: 'edrv-imgview-img',
+            src: imageSrc,
+            alt: active || '',
+            onLoad: (e) => { setImgBroken(false); setImgSize({ w: e.target.naturalWidth, h: e.target.naturalHeight }) },
+            onError: () => setImgBroken(true),
+          }))))
+
   /**
    * 关闭当前差异浮窗并清理 hover 锚点。
    * @author ddj 2026年08月21号
@@ -1183,6 +1287,12 @@ export function EditorView(props) {
   const openPath = () => {
     const p = (pathDraft || '').trim()
     if (!p) return
+    // 图片文件跳过文本读探测（二进制会被 host 拒绝），直接进 tab 由 loadImage 接管
+    if (isImagePath(p)) {
+      openFile(p, false)
+      setOpenInput(false); setPathDraft(''); setStatus('已打开'); setError(null)
+      return
+    }
     setStatus('打开中…')
     rpc('edrv.read', { sessionId, path: p }).then((res) => {
       if (res && res.ok) {
@@ -1214,7 +1324,8 @@ export function EditorView(props) {
   const pathBar = React.createElement('div', { className: 'edrv-pathbar', title: active || '' },
     React.createElement('span', { className: 'edrv-pb-name' }, active ? String(active).split(/[\\/]/).pop() : '未打开文件'),
     React.createElement('span', { className: 'edrv-pb-full' }, active || '使用右上搜索框 (' + (chordOf('edrv.quickOpen') ?? 'Ctrl+P') + ') 打开文件'),
-    (active && langOf(active) ? React.createElement('span', { className: 'edrv-pb-meta' }, langOf(active)) : null),
+    (active && !isImageActive && langOf(active) ? React.createElement('span', { className: 'edrv-pb-meta' }, langOf(active)) : null),
+    (isImageActive && imgSize ? React.createElement('span', { className: 'edrv-pb-meta' }, imgSize.w + '×' + imgSize.h) : null),
     (cursor ? React.createElement('span', { className: 'edrv-pb-meta' }, cursor) : null),
     (status ? React.createElement('span', { className: 'edrv-pb-meta edrv-pb-status' }, status) : null))
 
@@ -1304,6 +1415,10 @@ export function EditorView(props) {
       setLoadStage({ progress: 10, message: '重新读取文件…' })
       loadContent(active, sessionId)
     })
+  } else if (isImageActive && imageSrc) {
+    body = imagePanel()
+  } else if (isImageActive) {
+    body = loadingBody(loadStage.message || '读取图片…', loadStage.progress)
   } else if (content === null) {
     body = loadingBody(loadStage.message || '读取文件内容…', loadStage.progress)
   } else {

package/src/compat.ts

@@ -129,7 +129,7 @@ export function detectGuards(ctx: Ctx): CompatAdapter[] {
 }
 
 /** 已实测覆盖的最高 DSH 版本（适配矩阵上界，超过则提示，见 buildReport）。 */
-const TESTED_DSH_MAX = '0.1.2-alpha.4'
+const TESTED_DSH_MAX = '0.1.3-alpha.2'
 
 /** 版本适配机制状态行：DSH 版本探测 + 设置 section 安装策略。 */
 export function versionAdapters(dshVersion: string): CompatAdapter[] {

package/src/dshVersion.ts

@@ -86,6 +86,7 @@ export function inDshRange(version: DshVersion | null | undefined, range: DshRan
 export function familyLabel(input: string): string {
   const version = parseDshVersion(input)
   if (!version) return '未知'
+  if (inDshRange(version, { from: '0.1.3-alpha.1' })) return '0.1.3-alpha 及更新（对话文件链接=remote.session.openWorkspacePath）'
   if (inDshRange(version, { from: '0.1.2-alpha.1' })) return '0.1.2-alpha 及更新（设置 API=settings.installSection）'
   return '0.1.0/0.1.1 rc 线（设置 API=installSettingsSection）'
 }

package/src/rpc.ts

@@ -5,6 +5,7 @@
  * 作者 ddj 2026-08-20
  */
 import type { DecideItem, DecideResult, RpcHandlerMap, RpcMethod, RpcRequestMap, RpcResult, RpcScope } from './shared/rpc.js'
+import { imageMimeOf } from './shared/rpc.js'
 import type { DiffRecord, RecordView } from './shared/types.js'
 import type { Ctx, Session } from './store.js'
 import {
@@ -303,6 +304,12 @@ export function buildHandlers(
           return { ok: false, error: '文件不存在', resolvedPath: fs.processPath(target) }
         }
         if ((info.size ?? 0) > READ_CAP) return { ok: false, error: '文件过大（>8MB），不支持整文件预览' }
+        if (args.encoding === 'base64') {
+          // 图片等二进制预览：readBytes 无解码、无二进制拒绝；超上限已由上方 stat 拦截
+          const bytes = await fs.readBytes(target, undefined, READ_CAP)
+          const content = Buffer.from(bytes).toString('base64')
+          return { ok: true, content, size: bytes.byteLength, encoding: 'base64', mime: imageMimeOf(args.path) }
+        }
         const content = await fs.readText(target)
         return { ok: true, content, size: content.length }
       } catch (error) {

package/src/shared/rpc.ts

@@ -21,6 +21,36 @@ import type { LspEnvInstallState, LspExtInfo, LspExtUpdate, LspHover, LspLocatio
 /** webServer 精确路由。 */
 export const RPC_PATH = '/edrv/rpc'
 
+/**
+ * 图片扩展名（小写、无点）→ MIME。edrv.read base64 响应与 client 图片预览共用，
+ * 收敛在此避免 host/client 两处漂移。
+ * @author ddj 2026年09月08号
+ */
+export const IMAGE_MIME: Record<string, string> = {
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  bmp: 'image/bmp',
+  ico: 'image/x-icon',
+  avif: 'image/avif',
+  svg: 'image/svg+xml',
+}
+
+/**
+ * 路径 → 图片 MIME：按 basename 扩展名小写查 {@link IMAGE_MIME}，未命中回退 application/octet-stream。
+ * @author ddj 2026年09月08号
+ * @param path 文件路径（`/` 或 `\` 分隔均可）
+ * @returns MIME 字符串
+ */
+export function imageMimeOf(path: string): string {
+  const base = String(path || '').split(/[\\/]/).pop() || ''
+  const dot = base.lastIndexOf('.')
+  const ext = dot > 0 ? base.slice(dot + 1).toLowerCase() : ''
+  return IMAGE_MIME[ext] ?? 'application/octet-stream'
+}
+
 /** 决策作用域：call=整条记录，hunk=单个差异块。 */
 export type RpcScope = 'call' | 'hunk'
 
@@ -111,7 +141,7 @@ export interface RpcRequestMap {
   'edrv.accept': { sessionId?: string; callId: string; scope?: RpcScope; hunkIndex?: number }
   'edrv.reject': { sessionId?: string; callId: string; scope?: RpcScope; hunkIndex?: number }
   'edrv.decideBatch': { sessionId?: string; items: DecideItem[] }
-  'edrv.read': { sessionId?: string; path: string }
+  'edrv.read': { sessionId?: string; path: string; encoding?: 'base64' }
   'edrv.original': { sessionId?: string; path: string }
   'edrv.save': { sessionId?: string; path: string; content: string }
   'edrv.archiveList': { sessionId?: string }
@@ -194,7 +224,7 @@ export interface RpcOkMap {
   'edrv.accept': { record: RecordView }
   'edrv.reject': { record: RecordView }
   'edrv.decideBatch': { results: DecideResult[] }
-  'edrv.read': { content: string; size: number }
+  'edrv.read': { content: string; size: number; encoding?: 'base64'; mime?: string }
   'edrv.original': { content: string; size: number; stale: StaleHunk[]; fallback: boolean }
   'edrv.save': object
   'edrv.archiveList': { entries: ArchiveEntry[] }