Popout Sidebar

Popout Sidebar: displays artifacts and a file tree with multiple preview formats; can pop out into a standalone browser tab (drag to another monitor for a larger, clearer view); compatible with other sidebar plugins, can be shown at the same time.

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.

Adds a sidebar to the DeepSeek Harness Web UI that lists artifacts and a file tree, and can be popped out into a standalone browser tab with one click.

Now available

This plugin is now part of the DeepSeek Harness plugin ecosystem:

Channel	Entry
Curated plugin list	awesome-dsh-plugin.com · Detail page
Plugin market	dsh-market (in DSH: Settings → Plugin Market)

One-click install (recommended)

先装市场：

dsh plugin --profile web add dshmarket

After restarting dsh web, open Settings → Plugin Market, search for popout or sidebar, and click "Install".

Or install via registry:

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

After installing, restart dsh web and hard refresh the browser (Cmd/Ctrl+Shift+R). A persistent "Artifacts" icon button will appear in the top-right corner of the interface (visible even without an active session).

Features

• ↗️ Pop out to a standalone tab: one-click pops the sidebar out into an independent web tab (/popout-sidebar), auto-refreshes every 1.5 s, and can be dragged to another monitor for a larger, clearer view.
• 🗂 Artifacts sidebar: lists in real time the files created or modified by the agent via write / edit, plus files produced in the workspace by bash / pwsh commands (e.g. images generated by a script); the divider between the list and the preview area is draggable.
• 🌳 File tree: both the sidebar and the standalone tab contain a "File Tree" where you can browse the current workspace directory (lazy-loading expansion, click a file to preview), and it follows workspace changes in real time.
• 👀 Multi-type previews: preview by file type — code / plain text (syntax highlighting + line numbers), Markdown rendering, images, PDF (native browser viewer), HTML (sandboxed iframe); overly long content is truncated automatically.
• 📝 Edit diffs: files modified via edit show a "removed / added" diff in the preview.
• 🔗 Copy / reference: one-click copy of the file path, or write an @path reference into the session input (hover over a list row).
• 🧭 Compatible with other sidebars: when other "side cards" are open, this sidebar automatically yields to their left side, so both remain visible.
• ⚙️ Settings panel: a "Popout Sidebar" tab is added to the DSH settings, letting you toggle default expansion, auto-refresh, file tree, and set the minimum panel width (stored in localStorage); the panel can be made wider by dragging its left edge.
• 🗑 Clear mode: enter clear mode from the top-right corner, then click an artifact to mark it red, then click the red × to remove the list entry (only removes the entry, not the file on disk).
• ✖️ Close: click the "Artifacts" icon button in the top-right corner to collapse the panel.

How it works

• Host (Node process)
  • Listens for tools/result events, tracks successful write / edit calls and extracts file_path (for edit, additionally records the changed old_string/new_string fragments and tags the preview type by file extension).
  • Listens for tools/execute events and performs before/after workspace snapshot diffs for "opaque" executors such as bash / pwsh (recursive fs.listDir + version token fingerprints, skipping large directories like node_modules/.git), merging files indirectly created/modified by commands into the artifact list.
  • Exposes RPCs via harness.handle: artifacts.list, artifacts.read, artifacts.remove, artifacts.listDir.
  • Provides routes via webServer.register: /popout-sidebar (page), /popout-sidebar/data (JSON), /popout-sidebar/content (text preview), /popout-sidebar/media (binary image / PDF), /popout-sidebar/remove (remove entry), /popout-sidebar/listdir (directory listing).
• Client (browser)
  • Registers a persistent "Artifacts" icon button fixed to the top-right corner in shell.overlay (root scope), visible even when there is no active session.
  • Renders the floating sidebar panel in shell.overlay.
  • Subscribes to the session store and syncs the current session via cross-tab localStorage, so the sidebar and the standalone tab's file tree follow workspace switches in real time (consistent behavior).

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 / 设置面板

After modifying source code in src/shared/, src/host/, src/client/, run npm run build (or node scripts/build.js) to regenerate src/host.js and src/client.js before committing. At runtime, DSH only loads these two generated artifacts.

Recommended: install the pre-commit guard once: ln -sf ../../scripts/precommit.sh .git/hooks/pre-commit. Thereafter, every git commit will automatically rebuild the bundle; if the artifacts are out of sync with the source code, the commit will be blocked, eliminating the "new source, stale artifact" problem.

Usage

This plugin supports both static installation (recommended, persistent) and dynamic loading (temporary).

Static Installation

Prerequisite: DSH is installed (dsh web runs properly).

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

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

After installation, restart the DSH service (host half loads) and hard-refresh the browser (Cmd/Ctrl+Shift+R); the persistent "Artifacts" icon button will appear in the top-right corner of the interface.

• 包内 cordis.patch.yml（dsh.bundle.patch）让 CLI 自动把它挂进 dsh.profile.bundles；
• client 半由 package.json 的 dsh.client.platform: "web" + exports["./client"] 自动发现并加载；
• 本地开发用 dsh plugin --profile web add /绝对路径/dsh-popout-sidebar 会安装为符号链接，改 src/ 后重启服务 / 硬刷新即可生效。

Dynamic loading (temporary, process-level)

The return { ... } body of src/host.js and src/client.js can still be passed directly to cordis_define:

1. In a Harness session, call cordis_define: put the return { ... } body of src/host.js into code.host; put the return { ... } body of src/client.js into code.client.
2. Call cordis_run to activate the returned pluginId / packageId.
3. Click the "Artifacts" button; click the ↗ in the top-right corner of the panel to open the standalone tab.

In both modes, host and client communicate through the /popout-sidebar/* HTTP routes (dynamic mode additionally keeps harness.handle RPC compatibility), so behavior is consistent.

Settings

In the DSH settings panel (⚙️ in the bottom-left corner), a new "Popout Sidebar" tab will appear:

Setting	Default	Description
Expand by default	On	The sidebar is expanded by default after the page loads; turning it off makes it collapsed by default
Auto-refresh	On	While the panel is open, fetches the latest artifact list every 2s
File tree	On	Shows a "File tree" tab in the sidebar to browse workspace directories
Min panel width	20%	Minimum panel width (percentage of window width, 20–60%); drag the panel's left edge to make it wider
Default preview area height	70%	Percentage of panel height for the preview area (20–80), determining the position of the divider between the preview area and the list area; the divider can still be dragged for temporary adjustment

The "Artifacts" button (top-right), the standalone tab button (↗), and auto-yield left of other sidebars are persistent — no toggle.

Settings are saved in the browser's localStorage (key dsh-popout-sidebar:settings) and persist across refreshes.

Theming

• The sidebar panel follows the main UI's light / dark theme (uses --dsw-alias-* theme variables).
• The standalone tab is intentionally fixed to a light color scheme (to ensure content stays clear and stable on another monitor); for dark mode, manually append ?scheme=dark to the URL.

Updates

• This plugin is installed from GitHub source (not published to npm); updates are made by comparing commits: dsh-market's "Update" will automatically compare the locally locked commit with the repo's current HEAD, prompt "Update available" when new commits are detected, and a single click upgrades it.
• Update from the command line: dsh plugin --profile web update dsh-popout-sidebar (or re-add), then restart dsh web and hard-refresh the browser.

License

MIT