前言¶

用 DeepSeek Harness 做静态页或简单前端时，常见流程是：让智能体改文件、切到浏览器或本地服务器看效果、再回来继续对话。窗口来回切换，保存后还要手动刷新。社区插件 dsh-live-preview（维护者 2011126630z-commits）在 Harness Web UI 右侧增加实时预览面板：选定工作区里的 HTML，边聊边看；保存后自动重载。智能体也可通过 live_preview 工具打开或聚焦页面。

这是什么¶

dsh-live-preview 是 DeepSeek Harness 的客户端类插件（分类：客户端）。它在带 Web UI 的 Harness 里挂载预览面板，用本机只读预览服务提供页面，与对话区同源 API、iframe 独立 origin，避免预览页读到 Harness 的认证态。许可证为 MIT；当前资料中的包版本为 0.4.1。

核心功能¶

下面按 README 已列能力归纳，不超出文档范围。

面板与浏览

• 预览面板贴在 Harness UI 右侧，可拖拽左缘调整宽度；宽度与设备模式会记住。
• 工作区 → 目录 → 文件树；HTML 文件带 HTML 标记，点击进入预览。
• 设备宽度：全宽 / 768 px（Tablet）/ 375 px（Phone），支持在新标签页打开。
• Harness 重启后，若面板曾打开，浏览器会恢复上次打开的页面。
• Separate window：在系统默认浏览器中打开预览并收起面板内视图，自动重载与编辑聚焦仍可用（桌面壳层会由 Host 代为 window.open）。

自动重载

• 默认开启 Auto reload：通过 SSE 监听变更，并有版本轮询回退；可关闭，也可点 Reload 手动刷新。
• 仅对预览实际加载过的文件建立监听，工作区里无关写入（日志、数据导出等）不会误触发整页刷新。

编辑聚焦（Focus）

• 保存后尽量指出「刚改的是哪一块」：HTML 按源行与 data-lp-line 标记滚动并描边；CSS 按变更行所在规则的选择器描边（最多 12 个元素）；其他文本文件在面板显示「Editing … · line N」而不描边页面。
• 聚焦经 sessionStorage 在重载后保留；面板提供 Locate / 清除，约 15 秒后淡出。
• 工具侧可显式调用 focus / clear（见下文示例）。

智能体工具 live_preview

• 动作：open / close / refresh / root / focus / clear。
• 打开路径会相对调用方会话工作目录解析，并选取最近的已注册工作区作为预览根。

安全与隔离（文档说明）

• 预览服务只绑定 127.0.0.1；请求需一次性 token（?t=）或 dshprev HttpOnly cookie。
• 只读、无写接口；realpath containment 拒绝 ..、编码穿越与符号链接逃逸。
• 不向局域网或远程暴露。

环境与依赖¶

• 带 Web UI 的 DeepSeek Harness（dsh web 或桌面应用）。
• Harness 所在主机需 Node.js 20+。

安装与启用¶

安装方式以仓库 README 为准：在 Harness 主机上取得插件目录后，以 local bundle 安装（勿使用资料未出现的 dsh plugin add github:… 一类拼接命令）。

1. 将 dsh-live-preview 仓库放到主机上的任意路径（README 说明为 clone 到本地；移动或删除目录后需重新安装 bundle）。
2. 通过插件管理器安装本地 bundle，例如：

plugin_manager install_bundle(target: "/absolute/path/to/dsh-live-preview")

UI 路径：Plugins → Add → local bundle directory。

3. 刷新 Web UI（Ctrl+R）。会话标题栏会出现眼睛图标。

本地目录安装会原地链接检出目录；路径变更后需重装。

典型用法¶

面板操作

• 眼睛图标：打开 / 关闭预览面板。
• Workspace 下拉：切换预览根（仅已注册工作区）。
• Choose file：浏览并点击 HTML 预览；点击文件夹进入下一层。
• Full / Tablet / Phone、Auto reload、Reload、Open in a new tab、Separate window 按标签含义使用；拖拽面板左缘改宽度。

让智能体打开页面

对智能体说（README 示例）：

Open the live preview on maas-home-preview/index.html

对应工具调用形如：

live_preview({ action: "open", path: "maas-home-preview/index.html" })

聚焦示例（JSON）

{ "action": "focus", "selector": "#hero" }
{ "action": "focus", "path": "index.html", "line": 312 }
{ "action": "clear" }

配置¶

在 cordis.patch.yml 补丁层中编辑该插件行的 config：

- id: dsh-live-preview
  config:
    port: 8123              # 0 = 自动选空闲端口；占用时会回退
    autoReload: true        # 默认广播重载
    roots: []               # 额外允许作为预览根的绝对路径
    ignore: ["node_modules", ".git", "dist", "build", ".tmp", ".venv"]
    panelWidthRatio: 0.46   # 面板初始宽度比例

架构简述¶

Harness Web UI 通过同源 JSON API（/dsh-live-preview/*）驱动面板；iframe 加载本机 loopback 预览服务（默认端口 8123，可配置）。Host 侧插件为零依赖，负责静态文件、注入重载脚本、对已服务文件的 fs.watch 与 SSE 等。详见 README 中的结构示意。

适用场景与注意¶

适合

• 静态 HTML/CSS/JS 或无需 npm run dev 即可在浏览器打开的页面。
• 希望「左侧对话、右侧页面」、保存即看的 Harness 前端/HTML 协作。

限制（README）

• 仅静态文件；需要 dev server 的项目目前不会代理（文档标注为 planned）。
• 页面内使用绝对路径的后端接口可能在预览中 404。
• 若页面 CSP 阻止注入的重载脚本，面板侧仍有回退重载；安装或升级插件后可能需要先手动刷新一次页面。
• Harness 大版本升级时，内部 boot 契约变化可能需要插件小版本跟进。

安装前

插件在 当前 dsh 进程权限 下运行，会在本机开启只读预览服务并读取工作区文件。安装前应自行审阅 源码 与 MIT 许可证，确认路径与忽略规则符合你的安全策略。

结尾¶

dsh-live-preview 把「改完立刻看见」收进 Harness 界面：面板预览、保存重载、编辑聚焦，以及 live_preview 工具，减少在聊天与浏览器之间的切换。目录与仓库链接如下，版本与星标以站点与 GitHub 为准。

• 社区目录页：https://www.skillhub.cn/plugins/2011126630z-commits/dsh-live-preview
• GitHub：https://github.com/2011126630z-commits/dsh-live-preview