dsh-visual-studio

1. 安装并启动 DeepSeek Harness：npx @deepseek-ai/dsh web
2. 在终端执行上面的安装命令（CLI 会解析插件并核验来源）
3. 用 dsh plugins list 确认已安装，必要时重启 Harness 生效

插件以当前 dsh 进程的权限运行，安装时可能执行代码。请先通读仓库源码与许可证，确认无破坏性命令与越权访问；本站只做索引，不对第三方插件安全性作担保。

事实信息来自公开插件目录快照（2026-10-01），介绍文案由本站再加工。

以下为插件仓库 README 全文（原始内容，由公开目录抓取整理）。

# @deepseek-ai/dsh-visual-studio

## 中文介绍

[英文](#english)

Visual HTML/SVG Studio（可视化 HTML/SVG 工作室）是一个持久化的 DeepSeek Harness 网页插件：在浏览器里打开、新建、实时预览并保存工作区内的 HTML/SVG 文件，支持「元素检查」与「手动批注」，批注会直接送回当前 Agent 会话，由 AI 精确修改源码。

### 功能特性

- **打开 / 新建 / 保存** 工作区内的 `.html` / `.htm` / `.svg` 文件。
- **实时预览**：源码编辑器旁是隔离 iframe 预览（`sandbox="allow-scripts"`、无 `allow-same-origin`，预览脚本运行在独立源，无法访问父页面 DOM / Cookie）。
- **元素检查模式**：在预览中点击任意 HTML/SVG 元素，显示选框、元素路径、稳定 selector、尺寸与主要 computed styles。
- **手动批注**：对选中元素或页面坐标添加批注（如「这里间距太大」「这个图标不对」），提交后连同文件路径、selector、元素 HTML/SVG、computed styles、位置尺寸与批注文字一起送回当前 Agent 会话。
- **自动刷新 + 状态保留**：Agent 修改源码后自动刷新预览，批注的「已处理 / 未处理」状态保留。
- **撤销 / 重做 / 保存 / 刷新 / 桌面-手机视口切换**。
- **版本备份**：覆盖文件前把旧内容写到同目录 `.dsh-visual-studio-backup-<时间戳>`，可恢复。

### 快速开始

```sh
# 构建
corepack pnpm install
corepack pnpm run build   # tsc -b && tsdown

# 测试
corepack pnpm test

# 安装到当前 web profile（重启后仍存在）
dsh plugin --profile web add <本仓库路径>
```

安装后重启 `dsh web`，右下角会出现 Visual Studio 浮动面板。示例见 `examples/demo.html` 与 `examples/demo.svg`。

---

## English

Visual HTML/SVG Studio — a persistent DeepSeek Harness **web plugin** that opens,
creates, previews, and saves workspace HTML/SVG files, with an element inspector
and agent-routed annotations.

## Features

- **Open / new / save** workspace `.html` / `.htm` / `.svg` files.
- **Live preview** in a sandboxed iframe (`sandbox="allow-scripts"`, no
  `allow-same-origin`, so previewed scripts run in an opaque origin with no
  parent-DOM or cookie access), beside a source editor.
- **Element inspector**: click any element in the preview to see a highlight
  box, breadcrumb path, stable CSS selector, size, and selected computed styles.
- **Annotations**: attach a note to an inspected element (or page coordinate)
  and submit it to the current agent session as an ordinary user message; the
  pending/processed state is kept across preview refreshes.
- **Undo / redo / save / refresh / desktop-mobile viewport** controls.
- **Versioned backups**: before overwriting a file, the previous content is
  written to a sibling `.dsh-visual-studio-backup-` file.

## Architecture

A dual-face Cordis plugin (one package, two halves):

- **Node half** (`src/index.ts`, host tree): registers the `/visual-studio`
  Connection RPC channel (`authority: loopback`) serving `list` / `read` /
  `write` / `create`. Every target path is containment-checked against the
  workspace root before any read or write.
- **Browser half** (`src/client/`, client tree): registers the `StudioPanel`
  into the `shell.overlay` slot and injects the file/session callbacks over
  the Connection transport.

The package carries both `dsh.client` (browser roster) and `dsh.bundle`
(`cordis.patch.yml` inserts its own row), so it installs either through
`dsh plugin add` or by adding the row to a profile's `cordis.patch.yml`.

Annotations reach the agent through the existing `session.prompt` RPC
(`mode: 'queue'`) — the same path the chat composer uses — so no custom
session-injection machinery is required.

## Requirements

- **Peer packages** `@deepseek-ai/*` at `^0.1.0-rc.5` (the DeepSeek Harness
  runtime). These come from the `deepseek-ai/deepseek-harness` monorepo (npm or
  a checkout); they are not vendored here.
- Node `>=22.19 || >=24`.

## Build

```sh
corepack pnpm install   # or npm install
corepack pnpm run build # tsc -b && tsdown
```

This emits `lib/index.js` (node half), `lib/invariant.js`, and `lib/client.js`
(the browser bundle).

## Test

```sh
corepack pnpm test
```

## Install into a Harness web profile

```sh
dsh plugin --profile web add
```

or manually: link this package into `$DSH_HOME/profiles/node_modules/@deepseek-ai/`
and add `- insert: [{ id: visual-studio, name: '@deepseek-ai/dsh-visual-studio' }]`
to `$DSH_HOME/profiles/web/cordis.patch.yml`, then restart `dsh web`.

## Uninstall

Remove the row from `$DSH_HOME/profiles/web/cordis.patch.yml` and delete the
`$DSH_HOME/profiles/node_modules/@deepseek-ai/dsh-visual-studio` link (or run
`dsh plugin --profile web remove @deepseek-ai/dsh-visual-studio`), then restart
`dsh web`.

## Examples

`examples/demo.html` and `examples/demo.svg` are the files used to exercise the
"click element → annotate → agent edits → auto-refresh" loop.

## Known Limitations and Deferred Work

- The preview iframe still runs user-authored scripts (`allow-scripts`); they
  are confined to an opaque origin but are not sanitized.
- Undo history and annotation state are session-local (annotations persist via
  `localStorage`; undo history does not survive a page reload).
- The `dsh.bundle` patch is dormant when installed through a profile patch
  layer rather than `dsh plugin add`.