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
What is this?A plugin for DeepSeek Harness (DSH) Web UI that adds a sidebar listing the agent's artifacts and a file tree, with multiple file preview types, and can pop out into a separate browser tab for viewing on another monitor.
Is this a standalone app or does it plug into something else?It's a DSH (DeepSeek Harness) plugin made of a Node host module and a browser client module that run inside the DSH Web UI runtime, not a standalone application.
How do I install this into my DSH setup?Install the DSH plugin market, restart dsh web, then go to Settings → Plugin Market, search 'popout' or 'sidebar' and click Install; alternatively run the plugin's registry install command directly.
Do I need DeepSeek Harness already running first?Yes, DSH must already be installed and dsh web must run normally before adding this plugin; building from source needs Node.js 20 or newer.
Any install pitfalls I should know about?After installing you must restart dsh web and hard-refresh the browser (Cmd/Ctrl+Shift+R) for the artifact icon to appear; if you edit the source, you must rebuild with npm run build or the pre-commit hook will block commits where the bundle is out of sync with the source.
What file types can the sidebar preview?Code and plain text with syntax highlighting, rendered Markdown, images, PDFs via the browser's native viewer, and HTML inside a sandboxed iframe, with long content auto-truncated.
How does it catch files created by shell commands?It snapshots the workspace directory before and after bash/pwsh command execution and diffs the listings to detect files created indirectly, skipping large folders like node_modules and .git.
Can I run this alongside other DSH sidebar plugins?Yes, when another sidebar panel opens this one automatically shifts to its left so both stay visible at once.
What does 'clear mode' do?Entering clear mode lets you click artifacts to mark them red, then click the red x to remove them from the list only — the underlying files on disk are untouched.
What are similar projects?dsh-gitbash-preset, dsh-lowtide, DSH-taskboard, DSH-Plugins-Marketplace, dsh-plugin-bridge, oh-dsh, dsh-routing-suite, dsh-router-standard
Which topics is it in?localstorage, cordis, agent-tools, file-manager, syntax-highlighting, dsh, dsh-plugin, deepseek-harness, pdf, agents, utility, plugin
Creator
e2mcc
Size
1 MB
Stars
208
Updated
CommitOct 10Releasev1.0.1Aug 20
Age
2mo
Commits · 90 Days