Preface¶

When running agent sessions in DeepSeek Harness (DSH), models generate files in the workspace through write, edit, or shell commands. The main dialog area is suitable for viewing reasoning and tool calls, but to quickly browse “which files were changed in this session,” open previews, or paste paths back into the input box, one often has to switch between the terminal and editor repeatedly.

Below introduces dsh-popout-sidebar maintained by e2mcc: it provides a persistent “Artifacts” sidebar in the top-right corner of the Web UI, listing agent artifacts and file trees, supporting multi-type previews, and offering one-click pop-out to an independent browser tab—allowing for larger, clearer viewing on another monitor. It can display simultaneously with other sidebar plugins without requiring a choice between them.

What This Is¶

dsh-popout-sidebar (GitHub: e2mcc/dsh-popout-sidebar) is a client-side plugin in the DSH ecosystem, currently at version 1.0.1, licensed under MIT, and requires Node >= 20.

In one sentence: It adds a sidebar to the DSH Web UI for displaying artifacts and file trees, with the ability to pop out into an independent browser tab.

The plugin has been included in the DSH plugin ecosystem and can be installed via the awesome-dsh-plugin.com detail page or dsh-market (within DSH: Settings → Plugin Market). The community directory SkillHub also includes it.

Core Features¶

Artifact Tracking and Preview¶

The sidebar lists in real time files created or modified by the agent through write / edit, as well as files indirectly generated in the workspace by bash / pwsh commands (e.g., images produced by scripts). The dividing line between the list and preview area can be dragged to adjust.

Previews are distinguished by file type:

• Code / Plain Text: Syntax highlighting with line numbers
• Markdown: Rendered display
• Images, PDF: Native browser viewing
• HTML: Sandbox iframe
• Overly long content is automatically truncated

Files modified via edit display “deleted / added” diff snippets in the preview.

File Tree¶

Both the sidebar and independent tab contain a “File Tree,” allowing browsing of the current workspace directory (with lazy-load expansion, click files to preview) and real-time tracking of workspace switches.

Pop-Out to Independent Tab¶

Clicking the ↗ in the top-right corner of the panel pops out the sidebar into an independent web tab (route /popout-sidebar), which auto-refreshes every 1.5 seconds. It can be dragged to another monitor for viewing. The independent tab intentionally uses a light color scheme; for dark mode, manually append ?scheme=dark to the address.

Copy and Reference¶

When hovering over a list row, you can one-click copy the file path or insert an @path reference into the session input box.

Compatibility with Other Sidebars¶

When other “side cards” are open, this sidebar automatically moves to their left side, allowing both to be visible simultaneously.

Settings and Clearing¶

The DSH settings panel adds a “Popout Sidebar” tab, where you can toggle default expansion, auto-refresh, file tree, set minimum panel width, etc. (stored in browser localStorage under the key dsh-popout-sidebar:settings). After entering clearing mode from the top-right, clicking artifacts highlights them in red; clicking the red × removes list entries (only removes entries, does not affect disk files).

Installation and Enabling¶

Prerequisite: DSH is installed, and dsh web runs normally.

Via Plugin Market (Recommended)¶

First install the market plugin:

dsh plugin --profile web add dshmarket

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

Direct Installation via Registry¶

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

After installation, restart dsh web and hard-refresh the browser (Cmd/Ctrl+Shift+R). The persistent “Artifacts” icon button will appear in the top-right corner of the interface (visible even without a session).

The cordis.patch.yml in the package allows the CLI to automatically attach to dsh.profile.bundles; the client half is automatically discovered and loaded via dsh.client.platform: "web" in package.json.

Updating¶

When installed from GitHub source, updates are based on commit comparison. Command line:

dsh plugin --profile web update dsh-popout-sidebar

Then restart dsh web and hard-refresh the browser. When installed via dsh-market, the market compares the locally locked commit with the repository HEAD and prompts for updates when new commits are available.

Typical Usage¶

Daily Operations After Static Installation¶

1. Start DSH Web UI, click the “Artifacts” icon in the top-right corner to expand the sidebar.
2. In a session, have the agent write or edit files, or execute shell commands that generate files; the sidebar list will update automatically (when the panel is open, it fetches by default every 2 seconds; you can toggle “Auto-refresh” in settings).
3. Click files in the list to view content in the preview area below; edited files show diffs.
4. For a larger view, click the ↗ in the top-right corner of the panel to open the /popout-sidebar independent tab, then drag it to a second monitor.
5. Switch to the “File Tree” tab to browse the workspace directory; click files to preview.
6. Hover over list rows to copy paths or insert @path into the input box to continue the conversation.
7. Click the “Artifacts” icon in the top-right corner to collapse the panel.

Dynamic Loading (Temporary, Process-Level)¶

Suitable for temporary trials without writing to the profile. In a Harness session:

1. Call cordis_define: fill code.host with the return { ... } body from src/host.js; fill code.client with the return { ... } body from src/client.js.
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 independent tab.

In both modes, the host and client communicate via /popout-sidebar/* HTTP routes, with consistent behavior.

Working Principle Overview¶

Host (Node Process) monitors tools/result to track write / edit, monitors tools/execute to compare before-and-after snapshots of the workspace for bash / pwsh, incorporating indirectly generated files into the artifact list; exposes RPC via harness.handle, and provides /popout-sidebar series routes via webServer.register.

Client (Browser) registers the persistent top-right button and floating panel in shell.overlay, subscribes to session store, and synchronizes the current session via cross-tab localStorage, ensuring consistent file tree behavior between the sidebar and independent tab.

Settings¶

In the DSH settings (bottom-left ⚙️) under the “Popout Sidebar” tab:

The “Artifacts” icon in the top-right corner, the independent tab button ↗, and automatic repositioning to the left of other sidebars are persistent behaviors without toggle options.

Use Cases and Notes¶

Who it’s for: Developers who frequently run long sessions in the DSH Web UI, need to monitor artifact lists, preview Markdown/code/images, or want to drag the sidebar to a second monitor.

Permissions and Security: The plugin runs with the current dsh process permissions, can read workspace files, and provides previews via HTTP routes. Before installation, review the source code and MIT license to ensure it aligns with your environment policies.

Ecosystem Note: DSH’s philosophy is “everything is a plugin”; community directories like SkillHub, awesome-dsh-plugin, and dsh-market are independent sites with no official affiliation to DeepSeek / High-Flyer.

For local development, you can install the plugin directory via symlink:

dsh plugin --profile web add /absolute/path/dsh-popout-sidebar

After modifying src/, restart the service and hard-refresh; after modifying source code, run npm run build to regenerate the bundle.

Conclusion¶

dsh-popout-sidebar consolidates “session artifacts + file tree + multi-type preview” into a pop-out sidebar, addressing the insufficient information density in the main interface and the inconvenience of cross-monitor viewing, while coexisting with other sidebars. If you’re already using the DSH Web UI, follow the commands above to install, restart and hard-refresh, then start using it from the “Artifacts” button in the top-right corner.

• Directory page: https://www.skillhub.cn/plugins/e2mcc/dsh-popout-sidebar
• GitHub: https://github.com/e2mcc/dsh-popout-sidebar