dsh-popout-sidebar README

The project's README from github.com/e2mcc/dsh-popout-sidebar. As one markdown file: README.md.

可弹出式侧边栏 · Popout Sidebar

可弹出式侧边栏：侧边栏展示产物与文件树，支持多种文件预览形式；并可弹出为独立浏览器标签页（可拖至另一显示器上更大更清晰的观看）；兼容其他 sidebar 插件，可以同时显示。

Popout Sidebar: a sidebar that lists the agent's artifacts and a file tree, with multiple preview formats, and pops out into a separate browser tab (drag it to another monitor for a larger, clearer view) — coexisting with other sidebar plugins at the same time.

给 DeepSeek Harness Web UI 增加一个展示产物（artifacts）与文件树的侧边栏，并可一键弹出为独立浏览器标签页。

已上线 / Now available

本插件已收录进 DeepSeek Harness 插件生态：

渠道 入口
插件精选列表 awesome-dsh-plugin.com · 详情页
插件市场 dsh-market（DSH 内：设置 → Plugin Market）

一键安装（推荐）

先装市场：

dsh plugin --profile web add dshmarket

重启 dsh web 后，打开 设置 → Plugin Market，搜索 popout 或 sidebar，点「安装」。

或直接按注册表命令安装：

dsh plugin --profile web add github:e2mcc/dsh-popout-sidebar

装完重启 dsh web 并硬刷新浏览器（Cmd/Ctrl+Shift+R），界面右上角出现常驻「产物」图标按钮（无会话时也可见）。

特性 / Features

工作原理 / How it works

目录结构 / Layout

.
├── README.md
├── LICENSE
├── package.json          # 静态 bundle 元数据（main / exports ./client / dsh.bundle / dsh.client）
├── cordis.patch.yml      # bundle 挂载补丁（dsh plugin add 自动识别）
├── scripts
│   ├── build.js          # 组装脚本：把 src/{shared,host,client} 拼成下面的两个单文件 bundle
│   └── precommit.sh      # 提交前守护：自动重建 bundle，产物过期则拦截提交
└── src
    ├── index.js          # 静态 Host 入口（ESM）：求值 host.js 主体并导出给 loader
    ├── host.js           # ⚙️ 生成产物：Host 单文件（由 scripts/build.js 生成，勿手改）
    ├── client.js         # ⚙️ 生成产物：Client 单文件 bundle（由 scripts/build.js 生成，勿手改）
    ├── shared/           # 两端共享的可复用纯函数（可移植 JS，无模板字符串）
    │   ├── ext.js        #   扩展名 → 预览类型（extType / fileExt）
    │   ├── markdown.js   #   极简 Markdown → HTML（含代码块高亮）
    │   └── highlight.js  #   零依赖语法高亮器（tok-* token）
    ├── host/             # Host 半模块（Node 进程）
    │   ├── body.js       #   骨架：inject / apply + 占位符
    │   ├── core.js       #   常量 + 产物追踪 + 文件操作 + RPC
    │   ├── page.js       #   独立标签页 HTML（内联 script 引用 shared）
    │   └── routes.js     #   /popout-sidebar/* HTTP 路由
    └── client/           # Client 半模块（浏览器）
        ├── body.js       #   骨架：__ModuleLoader__ 工厂 + 占位符
        ├── core.js       #   store / settings / 会话辅助
        ├── styles.js     #   注入的 CSS
        ├── icons.js      #   内联 SVG 图标
        ├── preview.js    #   renderPreview / CodeView / diff
        └── components.js #   FileTree / ArtifactsPanel / 设置面板

修改 src/shared/、src/host/、src/client/ 里的源码后，运行 npm run build（或 node scripts/build.js）重新生成 src/host.js 与 src/client.js，再提交。运行时 DSH 只加载这两个生成产物。

建议安装提交前守护（一次即可）：ln -sf ../../scripts/precommit.sh .git/hooks/pre-commit。之后每次 git commit 会自动重建 bundle，若产物与源码不同步会直接拦截提交，杜绝「源码新、产物旧」。

使用 / Usage

本插件同时支持静态安装（推荐，持久生效）与动态加载（临时）。

静态安装（推荐）

前置：DSH 已装好（dsh web 能正常运行）。

# 通过注册表（GitHub 源码）
dsh plugin --profile web add github:e2mcc/dsh-popout-sidebar

# 或通过 dsh-market 市场：装好市场后在 设置 → Plugin Market 里一键安装

装完重启 DSH 服务（host 半加载）并硬刷新浏览器（Cmd/Ctrl+Shift+R），界面右上角即出现常驻「产物」图标按钮。

动态加载（临时，进程级）

src/host.js 与 src/client.js 的 return { ... } 主体仍可直接传给 cordis_define：

  1. 在 Harness 会话中调用 cordis_define：code.host 填 src/host.js 的 return { ... } 主体；code.client 填 src/client.js 的 return { ... } 主体。
  2. 调用 cordis_run 激活返回的 pluginId / packageId。
  3. 点击「产物」按钮；点面板右上角 ↗ 打开独立标签页。

两种模式下 host 与 client 都通过 /popout-sidebar/* HTTP 路由通信（动态模式另保留 harness.handle RPC 兼容），因此行为一致。

设置 / Settings

在 DSH 设置面板（左下角 ⚙️）里会多出一个「Popout Sidebar」选项卡：

设置 默认 说明
默认展开 开 页面加载后侧边栏默认展开；关闭则默认收起
自动刷新 开 面板打开时每 2s 拉取最新产物列表
文件树 开 在侧边栏显示「文件树」标签页，浏览工作区目录
最短面板宽度 20% 面板最小宽度（占窗口宽度的百分比，20–60%）；更宽可拖动面板左边缘调整
预览区默认高度 70% 预览区占面板高度的百分比（20–80），决定预览区与列表区分界线的位置；仍可拖动分界线临时调整

右上角的「产物」图标按钮、独立标签页按钮（↗）、以及「自动让位到其他侧边栏左侧」均为常驻行为，无需开关。

设置保存在浏览器 localStorage（键 dsh-popout-sidebar:settings），刷新后仍然生效。

主题 / Theming

更新 / Updates

License

MIT

dsh-popout-sidebar (e2mcc/dsh-popout-sidebar)

Searching Database…

208 ·GitHub
Dsh-popout-sidebar
Что это?Плагин для веб-интерфейса DeepSeek Harness (DSH), который добавляет боковую панель со списком артефактов агента и деревом файлов, поддерживает несколько типов предпросмотра файлов и умеет выноситься в отдельную вкладку браузера для просмотра на другом мониторе.
Это отдельное приложение или оно встраивается во что-то другое?Это плагин DSH (DeepSeek Harness) из хост-модуля на Node и клиентского модуля для браузера, работающих внутри рантайма веб-интерфейса DSH, а не отдельное приложение.
Как установить это в свою установку DSH?Установите маркет плагинов DSH, перезапустите dsh web, затем зайдите в Settings → Plugin Market, найдите 'popout' или 'sidebar' и нажмите Install; альтернативно выполните команду установки из реестра самого плагина напрямую.
Нужно ли сначала, чтобы DeepSeek Harness уже работал?Да, DSH должен быть уже установлен, а dsh web должен нормально работать до добавления этого плагина; сборка из исходников требует Node.js 20 или новее.
Есть ли подводные камни установки, о которых стоит знать?После установки нужно перезапустить dsh web и жёстко обновить браузер (Cmd/Ctrl+Shift+R), чтобы появилась иконка артефактов; если вы правите исходники, придётся пересобираться через npm run build, иначе pre-commit хук будет блокировать коммиты, в которых бандл разошёлся с исходниками.
Какие типы файлов умеет предпросматривать боковая панель?Код и простой текст с подсветкой синтаксиса, отрисованный Markdown, изображения, PDF через нативный просмотрщик браузера и HTML внутри изолированного iframe, с автоматической обрезкой длинного содержимого.
Как он ловит файлы, созданные shell-командами?Он снимает слепки каталога воркспейса до и после выполнения команд bash/pwsh и сравнивает списки, чтобы находить косвенно созданные файлы, пропуская большие папки вроде node_modules и .git.
Можно ли запускать его вместе с другими плагинами боковой панели DSH?Да, когда открывается другая боковая панель, эта автоматически сдвигается влево от неё, так что обе видны одновременно.
Что делает 'clear mode'?Вход в режим очистки позволяет кликать по артефактам, помечая их красным, а затем нажать красный крестик, чтобы убрать их только из списка — сами файлы на диске не затрагиваются.
What are similar projects?dsh-gitbash-preset, dsh-lowtide, DSH-taskboard, DSH-Plugins-Marketplace, dsh-plugin-bridge, oh-dsh, anysearch-dsh, dsh-routing-suite
Which topics is it in?localstorage, cordis, agent-tools, file-manager, syntax-highlighting, dsh, dsh-plugin, deepseek-harness, pdf, utility, agents, plugin
Creator
e2mcc
Size
1 MB
Stars
208
Updated
CommitOct 10Releasev1.0.1Aug 20
Age
2mo
Commits · 90 Days