dsh-vscode-mode 0.1.52 → 0.1.54

package/src/client/openFlow.ts

@@ -0,0 +1,330 @@
+/**
+ * dsh-vscode-mode client — 深链打开规则引擎（资源管理器右键 / Unity 外部编辑器落地）。
+ * 规则：文件夹 ⊂ 某已注册工作区 → 页面内弹窗二选一（使用最近的工作区 / 新建工作区）；
+ * 文件夹不在任何工作区 → 直达最近对话所在工作区新增；文件 → 最近对话 + 编辑器展开
+ * （无任何会话 → 以文件父目录注册工作区引导创建）。首路径驱动规则，其余路径：文件进
+ * 编辑器、文件夹补引用。纯函数可单测；编排依赖经 OpenDeps 注入（mock 可测）。
+ * 作者 ddj 2026-09-07
+ */
+import { rpc } from './rpc.js'
+import { chooseWorkspace } from './chooseDialog.js'
+import { emitOpenAt, openEditorView } from './events.js'
+import { toastDom } from './externalOpen.js'
+import { createAddToConversation } from './addToConversation.js'
+import type { AddOutcome, CtxLike } from './addToConversation.js'
+import type { OpenParams } from '../shared/externalOpen.js'
+
+/** 路径类型（host edrv.externalStat 判定）。 */
+export type PathKind = 'file' | 'directory' | 'missing'
+
+/** 打开规则分派结果。 */
+export type OpenRule = 'choose' | 'folderNew' | 'fileRecent' | 'bootstrap' | 'abort'
+
+/** 工作区视图最小形状（ctx.workspaces.list 快照行）。 */
+export interface WsView {
+  workspaceId: string
+  path: string
+  title: string
+  sessionIds?: readonly string[]
+  updatedAt?: string
+}
+
+/** 会话行最小形状（ctx.sessions.list 快照行）。 */
+export interface SessionRow {
+  id: string
+  cwd?: string
+  updatedAt?: number
+  origin?: 'subagent'
+}
+
+/** 打开编排依赖（全部可注入，便于 mock 测试）。 */
+export interface OpenDeps {
+  stat(path: string): Promise<PathKind>
+  workspaces(): { items: WsView[]; ready: boolean }
+  sessions(): { ids: string[]; byId: Record<string, SessionRow>; ready: boolean }
+  createSession(opts: { workspaceId?: string; cwd?: string }): Promise<string>
+  createWorkspace(path: string): Promise<{ workspaceId: string; title: string }>
+  openSession(id: string): void
+  reference(sessionId: string, path: string, appearance: 'file' | 'folder'): Promise<boolean>
+  choose(title: string, folder: string): Promise<'recent' | 'create' | null>
+  openEditor(path: string | null, line?: number, column?: number): void
+  schedule(fn: () => void, ms: number): void
+  notify(text: string): void
+}
+
+/** 等列表/输入就绪的节奏。 */
+const READY_TIMEOUT_MS = 15000
+const READY_TICK_MS = 300
+const REF_RETRY_MAX = 20
+const REF_RETRY_MS = 300
+const REST_STEP_MS = 150
+const LINE_AT_DELAY_MS = 200
+
+/**
+ * 路径规范化：`\→/`、小写、去尾分隔符（Windows 大小写不敏感前缀匹配用）。
+ * @author ddj 2026年09月07号
+ */
+export function normPath(p: string): string {
+  return String(p ?? '').replace(/\\/g, '/').replace(/\/+$/, '').toLowerCase()
+}
+
+/**
+ * 目录包含判定：child === root 或 child 位于 root 之下。
+ * @author ddj 2026年09月07号
+ */
+export function containsPath(root: string, child: string): boolean {
+  const r = normPath(root)
+  const c = normPath(child)
+  return c === r || c.startsWith(r + '/')
+}
+
+/**
+ * 父目录（文件引导创建工作区用；根路径回退自身）。
+ * @author ddj 2026年09月07号
+ */
+export function dirnameOf(p: string): string {
+  const norm = String(p ?? '').replace(/[\\/]+$/, '')
+  const cut = Math.max(norm.lastIndexOf('/'), norm.lastIndexOf('\\'))
+  return cut > 0 ? norm.slice(0, cut) : norm
+}
+
+/**
+ * 最近一次对话：排除子代理行，updatedAt 最新优先。
+ * @author ddj 2026年09月07号
+ */
+export function recentSession(byId: Record<string, SessionRow>, ids?: string[]): SessionRow | undefined {
+  const rows = (ids ?? Object.keys(byId)).map((id) => byId[id]).filter((row) => row && row.origin !== 'subagent')
+  return rows.sort((a, b) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0))[0]
+}
+
+/**
+ * 文件夹命中的已注册工作区（前缀包含），updatedAt 新者优先。
+ * @author ddj 2026年09月07号
+ */
+export function matchWorkspaces(items: WsView[], folder: string): WsView[] {
+  return items.filter((ws) => containsPath(ws.path, folder))
+}
+
+/**
+ * 规则分派：目录+命中工作区 → choose；目录未命中 → folderNew（以该文件夹为根注册新工作区，
+ * 用户确认：一律取右键的文件夹本身）；文件有会话 → fileRecent；文件无会话 → bootstrap；
+ * 路径缺失 → abort。
+ * @author ddj 2026年09月08号
+ */
+export function pickRule(kind: PathKind, matched: boolean, hasSession: boolean): OpenRule {
+  if (kind === 'missing') return 'abort'
+  if (kind === 'directory') return matched ? 'choose' : 'folderNew'
+  return hasSession ? 'fileRecent' : 'bootstrap'
+}
+
+/**
+ * 深链打开编排入口：等列表就绪 → 判型 → 规则分派 → 编排 create/open/引用/编辑器。
+ * @author ddj 2026年09月07号
+ * @param ctx 客户端根上下文（sessions/workspaces 服务）
+ * @param params 深链参数（首路径驱动规则）
+ * @param overrides 依赖覆盖（测试注入）
+ */
+export async function openDeepLink(ctx: unknown, params: OpenParams, overrides: Partial<OpenDeps> = {}): Promise<void> {
+  const deps = realDeps(ctx, overrides)
+  if (!(await waitListsReady(deps))) {
+    deps.notify('DSH 会话列表未就绪，请稍后重试')
+    return
+  }
+  const primary = params.paths[0]
+  const kind = await deps.stat(primary).catch(() => 'missing' as PathKind)
+  const sess = deps.sessions()
+  const rule = pickRule(kind, matchWorkspaces(deps.workspaces().items, primary).length > 0, Boolean(recentSession(sess.byId, sess.ids)))
+  try {
+    if (rule === 'abort') {
+      deps.notify('路径不存在：' + primary)
+      return
+    }
+    if (rule === 'choose') return await runChoose(deps, primary, params)
+    if (rule === 'folderNew') return await runFolderNew(deps, primary, params)
+    if (rule === 'fileRecent') return await runFileRecent(deps, primary, params)
+    return await runFileBootstrap(deps, primary, params)
+  } catch (error) {
+    deps.notify('打开失败：' + String((error as Error)?.message ?? error))
+  }
+}
+
+/** 等待会话与工作区列表就绪（上限 15s；超时按当前态判定）。 */
+async function waitListsReady(deps: OpenDeps): Promise<boolean> {
+  for (let waited = 0; waited < READY_TIMEOUT_MS; waited += READY_TICK_MS) {
+    if (deps.sessions().ready && deps.workspaces().ready) return true
+    await sleep(deps, READY_TICK_MS)
+  }
+  return deps.sessions().ready && deps.workspaces().ready
+}
+
+/** 规则 1：命中工作区 → 弹窗分派（取消即中止）。 */
+async function runChoose(deps: OpenDeps, folder: string, params: OpenParams): Promise<void> {
+  const matches = matchWorkspaces(deps.workspaces().items, folder)
+  const best = bestMatch(deps, matches)
+  const choice = await deps.choose(best?.title ?? '工作区', folder)
+  if (choice === null) return
+  if (choice === 'create') return runFolderNew(deps, folder, params)
+  const ws = best ?? deps.workspaces().items[0]
+  const sessionId = await spawnInWorkspace(deps, ws.workspaceId, undefined)
+  await settleRef(deps, sessionId, folder, 'folder')
+  deps.openEditor(null)
+  await openRest(deps, sessionId, params, 1)
+}
+
+/** 规则 3a：文件 → 所属工作区优先（有会话打开其最近会话；无会话新建 + 文件引用）；无匹配 → 最近对话。 */
+async function runFileRecent(deps: OpenDeps, file: string, params: OpenParams): Promise<void> {
+  const ws = pickFileWorkspace(deps, file)
+  if (ws) {
+    const anchor = recentSessionIn(deps, ws)
+    if (anchor) {
+      deps.openSession(anchor.id)
+      deps.openEditor(file, params.line, params.column)
+      await openRest(deps, anchor.id, params, 1)
+      return
+    }
+    // 文件所属工作区存在但无会话 → 在该工作区新建对话 + 文件引用
+    const sessionId = await spawnInWorkspace(deps, ws.workspaceId, undefined)
+    await settleRef(deps, sessionId, file, 'file')
+    deps.openEditor(file, params.line, params.column)
+    await openRest(deps, sessionId, params, 1)
+    return
+  }
+  const anchor = recentSession(deps.sessions().byId, deps.sessions().ids)
+  if (!anchor) return runFileBootstrap(deps, file, params)
+  deps.openSession(anchor.id)
+  deps.openEditor(file, params.line, params.column)
+  await openRest(deps, anchor.id, params, 1)
+}
+
+/**
+ * 文件所属工作区：前缀命中的工作区里，优先取有会话且最近活跃的；都无会话取路径最具体的。
+ * @author ddj 2026年09月08号
+ */
+function pickFileWorkspace(deps: OpenDeps, file: string): WsView | undefined {
+  const matches = matchWorkspaces(deps.workspaces().items, file)
+  if (!matches.length) return undefined
+  const withSessions = matches.filter((ws) => (ws.sessionIds ?? []).some((id) => Boolean(deps.sessions().byId[id])))
+  if (!withSessions.length) {
+    return [...matches].sort((a, b) => normPath(b.path).length - normPath(a.path).length)[0]
+  }
+  return withSessions.sort((a, b) => latestSessionAt(deps, b) - latestSessionAt(deps, a))[0]
+}
+
+/** 工作区内会话的最近活跃时间（无成员 → 0）。 */
+function latestSessionAt(deps: OpenDeps, ws: WsView): number {
+  const byId = deps.sessions().byId
+  return (ws.sessionIds ?? []).reduce((max, id) => Math.max(max, byId[id]?.updatedAt ?? 0), 0)
+}
+
+/** 工作区内最近一次会话（排除子代理与不在列表中的陈旧行）。 */
+function recentSessionIn(deps: OpenDeps, ws: WsView): SessionRow | undefined {
+  const byId = deps.sessions().byId
+  const rows = (ws.sessionIds ?? []).map((id) => byId[id]).filter((row) => row && row.origin !== 'subagent')
+  return rows.sort((a, b) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0))[0]
+}
+
+/** 规则 3b：文件 + 无任何会话 → 父目录注册工作区 + 新对话 + 文件引用 + 编辑器打开。 */
+async function runFileBootstrap(deps: OpenDeps, file: string, params: OpenParams): Promise<void> {
+  const ws = await deps.createWorkspace(dirnameOf(file))
+  const sessionId = await spawnInWorkspace(deps, ws.workspaceId, undefined)
+  await settleRef(deps, sessionId, file, 'file')
+  deps.openEditor(file, params.line, params.column)
+  await openRest(deps, sessionId, params, 1)
+}
+
+/** 规则 1.2：以文件夹注册新工作区 + 新对话 + 文件夹引用 + 编辑页。 */
+async function runFolderNew(deps: OpenDeps, folder: string, params: OpenParams): Promise<void> {
+  const ws = await deps.createWorkspace(folder)
+  const sessionId = await spawnInWorkspace(deps, ws.workspaceId, undefined)
+  await settleRef(deps, sessionId, folder, 'folder')
+  deps.openEditor(null)
+  await openRest(deps, sessionId, params, 1)
+}
+
+/** 在指定工作区（或回退 cwd）新建对话并置为当前；返回新会话 id。 */
+async function spawnInWorkspace(deps: OpenDeps, workspaceId: string | undefined, fallbackCwd: string | undefined): Promise<string> {
+  const sessionId = await deps.createSession(workspaceId ? { workspaceId } : fallbackCwd ? { cwd: fallbackCwd } : {})
+  deps.openSession(sessionId)
+  return sessionId
+}
+
+/** 命中工作区集中「最近」的一个（其成员会话 updatedAt 最新者优先）。 */
+function bestMatch(deps: OpenDeps, matches: WsView[]): WsView | undefined {
+  const byId = deps.sessions().byId
+  const score = (ws: WsView): number => {
+    const sessionLatest = (ws.sessionIds ?? []).reduce((max, id) => Math.max(max, byId[id]?.updatedAt ?? 0), 0)
+    return Math.max(sessionLatest, Date.parse(ws.updatedAt ?? '') || 0)
+  }
+  return [...matches].sort((a, b) => score(b) - score(a))[0]
+}
+
+/** 引用插入轮询：输入门面就绪前每 300ms 重试（appendReference 忙态已降级视为成功）。 */
+async function settleRef(deps: OpenDeps, sessionId: string, path: string, appearance: 'file' | 'folder'): Promise<void> {
+  for (let attempt = 0; attempt < REF_RETRY_MAX; attempt++) {
+    if (await deps.reference(sessionId, path, appearance)) return
+    await sleep(deps, REF_RETRY_MS)
+  }
+}
+
+/** 其余路径：文件进编辑器（步进），文件夹补文件夹引用。 */
+async function openRest(deps: OpenDeps, sessionId: string | null, params: OpenParams, from: number): Promise<void> {
+  const rest = params.paths.slice(from)
+  for (const [index, path] of rest.entries()) {
+    const kind = await deps.stat(path).catch(() => 'missing' as PathKind)
+    if (kind === 'file') {
+      deps.schedule(() => deps.openEditor(path), REST_STEP_MS * (index + 1))
+    } else if (kind === 'directory' && sessionId) {
+      await settleRef(deps, sessionId, path, 'folder')
+    }
+  }
+}
+
+/** 可注入 sleep。 */
+function sleep(deps: OpenDeps, ms: number): Promise<void> {
+  return new Promise((resolve) => deps.schedule(resolve, ms))
+}
+
+/** 真实依赖装配（全部来自 ctx 注入服务 + 既有 RPC/弹窗/编辑器入口）。 */
+function realDeps(ctx: unknown, overrides: Partial<OpenDeps> = {}): OpenDeps {
+  const service = (name: string): any => {
+    const get = (ctx as { get?: (name: string) => unknown } | undefined)?.get
+    return typeof get === 'function' ? get.call(ctx, name) : undefined
+  }
+  const add = createAddToConversation(ctx as CtxLike)
+  const base: OpenDeps = {
+    stat: async (path) => {
+      const result = await rpc('edrv.externalStat', { path })
+      return result.ok ? result.kind : 'missing'
+    },
+    workspaces: () => {
+      const snap = (service('workspaces')?.list?.getSnapshot?.() ?? {}) as { items?: WsView[]; phase?: string }
+      return { items: snap.items ?? [], ready: snap.phase === 'ready' }
+    },
+    sessions: () => {
+      const snap = (service('sessions')?.list?.getSnapshot?.() ?? {}) as { ids?: string[]; byId?: Record<string, SessionRow>; phase?: string }
+      return { ids: snap.ids ?? [], byId: snap.byId ?? {}, ready: snap.phase !== 'pending' }
+    },
+    createSession: async (opts) => await service('sessions').create(opts),
+    createWorkspace: async (path) => {
+      const ws = await service('workspaces').create({ path })
+      return { workspaceId: ws.workspaceId, title: ws.title }
+    },
+    openSession: (id) => service('sessions').open(id),
+    reference: async (sessionId, path, appearance) => {
+      const outcome: AddOutcome = await add.appendReference(sessionId, path, undefined, appearance)
+      return outcome !== 'unavailable'
+    },
+    choose: (title, folder) => chooseWorkspace(title, folder),
+    openEditor: (path, line, column) => {
+      if (path == null) {
+        openEditorView(null)
+        return
+      }
+      openEditorView(path)
+      if (line != null) setTimeout(() => emitOpenAt(path, line, column), LINE_AT_DELAY_MS)
+    },
+    schedule: (fn, ms) => setTimeout(fn, ms),
+    notify: (text) => toastDom(text),
+  }
+  return { ...base, ...overrides }
+}

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 {