dsh-visual-sidebar

@atchangan/dsh-visual-sidebar

A visual sidebar for the right details column of the DeepSeek Harness Web UI. It replaces the native tool-details panel with a resident, theme-aware, multi-tab sidebar: Overview / Compare / Insights / Context / Collection — each built on data that nothing else in the harness already surfaces.

中文文档见 README.zh-CN.md。

Association: this repository is the standalone installable package. ATchangan/dsh-visual-sidebar-fork is a fork of deepseek-ai/deepseek-harness whose tree hosts only this plugin (the same content at the repository root) — the fork keeps the upstream relationship visible while remaining a plain plugin package, not a full harness copy.

What it does

Features

• Takes over the details single slot at priority: -1 (official renderer stays at priority: 0; lowest renders). It does not re-declare conversation.details.tool — the native tool-details panel and its seat are deliberately left to the framework's official entry (the trajectory view owns full tool/request inspection).
• Per-session memory: open/tab/split are persisted per session through the framework store engine (localStorage, key rsp.sidebar.<sessionId>); switching back to a session restores its panel state, and the framework's closeDetails() on session switch is re-opened from the panel's own mount effect when the session remembered open.
• Entry points: a 面板 button in the conversation header action strip, plus the native drag-to-resize handle on the right edge.
• Theme & i18n: colors/fonts come from --dsw-* / --ds-* tokens (light/dark follow the DSH theme automatically); dictionaries ship zh + en; registration respects prefers-reduced-motion.
• Extensibility: the panel declares two additive child slots — rightpanel.toolbar (header tools) and rightpanel.extras (bottom extras) — for third-party plugins.
• Zero runtime dependencies: charts are hand-drawn inline SVG; only the module table externals (react, @deepseek-ai/dsh-client-runtime/client, @deepseek-ai/dsh-client-ui-primitives) are resolved at runtime.

Requirements

• DSH Web client @deepseek-ai/* packages 0.1.x (built against 0.1.1-rc.2; peer range >=0.1.0-rc.5 <0.2.0), Node ^22.19.0 || >=24.0.0.
• The plugin is a client-only DSH package: an empty node half (lib/index.js) plus the lazy-CJS client bundle (lib/client.js registered through window.__ModuleLoader__.load), discovered via dsh.client.platform = "web" and exports["./client"].

Install

DSH Desktop (market verification path)

The package carries a verifiable DSH bundle field:

"dsh": {
  "bundle": { "patch": "./cordis.patch.yml" },
  "client": { "inject": [...], "platform": "web" }
}

With the Desktop community market or the built-in terminal:

# inside a DSH Desktop terminal, for the active profile:
dsh plugin add --save-exact @atchangan/dsh-visual-sidebar@0.1.0

The bundle patch inserts the loader row:

- insert:
    - id: ui-visual-sidebar
      name: '@atchangan/dsh-visual-sidebar'

Manual profile install

1. npm pack (or clone the repo) and install the tarball into the profile: pnpm add --save-exact ./path/to/package.tgz in the profile directory (e.g. $DSH_HOME/profiles/desktop).
2. Add the row above to the profile's cordis.patch.yml, or let dsh plugin add handle both.
3. Restart DSH Desktop (or the dsh web host) and refresh the page.

Development

pnpm install            # installs the dev toolchain (esbuild, typescript)
pnpm typecheck          # strict TS check against the published 0.1.1-rc.2 type packages
pnpm build              # emits lib/client.js (+map) and lib/index.js (+map)
pnpm verify             # vm-based loader smoke test (single __ModuleLoader__ registration, apply/inject exports)

The client bundle replicates the in-repo clientBundle preset contract: CJS closure registered via window.__ModuleLoader__.load, externals resolved through the injected require (module table), everything else inlined; .css is inlined as text and injected at materialization under style[data-plugin-css].

Runtime contract this plugin relies on (verified against DSH 0.1.1-rc.2)

• details slot: single / session scope, declared by ui-layout's frame; shadowing at a lower priority is the documented mechanism ("lowest renders").
• Session standard kit: useSession, useProjection, useSessions, useWorkspaces, useInput, inputActions (the last two via ui-conversation's standard provide channel).
• Chat anchors: [data-chat-anchor-key] on node rows inside the [data-conversation-scroll] scrollport (used by the click-to-scroll interaction).
• Projections: tokenUsage, sessionStats, contextPressure, contextBreakdown (host-provided whole values; read defensively).
• Persistence: framework defineStore persist (per-session suffix) + a root snapshot store for the collection.

Known Limitations and Deferred Work

• No native tool-details replica (by design): the panel deliberately does not render conversation.details.tool and cannot read the internal chatStore selection; full tool/request inspection is the trajectory view's job. Clicking a tool row in chat only opens the panel column — it does not locate the tool.
• Blank sessions: the conversation header (and thus the 面板 button) is hidden while a session is blank; the panel still mounts and shows its empty-state guidance once the column opens.
• Stalled detection is a heuristic: a running session with no updatedAt activity for 2+ minutes is flagged "长时间无更新", not a definitive deadlock.
• Cross-session trends: per-session time series are not available from the list store, so the compare trend sparkline covers the current session only.
• File-type collection items are added manually (the panel accepts a file reference/path); produced-file references are rendered by ui-deliverables and deliberately not duplicated.
• Panel width is owned by the framework layout store (native drag handle; default width on open) — the plugin persists tab/split/open, not the pixel width.
• Package name scope: @atchangan must be an npm scope registered to the publisher before npm publish; keep the id in cordis.patch.yml and the __ModuleLoader__ registration consistent with package.json#name (the build derives both from it).

License

MIT — see LICENSE.