Skip to main content

dsh-ui-web/packages/dsh-aionui-panel

34Stars2Forks0Issues0Watchers

Recreates AionUi right panel for DSH Web GUI: includes Explorer file tree with Git changes, multi-format preview, and per-project panel width persistence.

Categories▣ UI Enhancements
Evidence5/5methodologySourceInstallMaintenanceDSH versionSecurity scan
Machine-auditedInstall commandRepo verifieddsh-plugin topicLicenseREADMEAI wiki

ⓘ This plugin is a sub-package of the CAPTAIN1275/dsh-ui-web monorepo — stars and activity count the whole repository.

CAPTAIN1275CAPTAIN1275
·CAPTAIN1275/dsh-ui-web
Language
TypeScript
License
Apache-2.0
Branch
main
dsh-plugindsh-plugin-marketdsh-plugins

Install

cmdweb profile
$ dsh plugin --profile web add @captain1275/dsh-client-ui-aionui-panel

Run the command above in your terminal to install this plugin via the dsh CLI. You can switch Profile in the top-right corner. New to dsh? Read the beginner tutorial

Install via your agent

Install the DeepSeek Harness plugin CAPTAIN1275/dsh-ui-web/packages/dsh-aionui-panel for me: review the repository at https://github.com/CAPTAIN1275/dsh-ui-web first, then run the install command and verify the plugin loads successfully.

Paste this instruction to the DSH Web GUI assistant — it will install and verify for you.

One-Sentence Positioning

dsh-aionui-panel consists of two panels on the right side of the DSH Web GUI chat area: Explorer provides file tree, filename search, and Git changes staging/unstaging/discarding; Preview provides multi-tab preview for 10+ formats including markdown, code, documents, images, and PDFs, with panel width persisted per-project. It reimplements AionUI's right panel (Apache-2.0 reference implementation) using the official SDK, with data sourced from the host process's real filesystem and real git repository.

Core Capabilities

  • Explorer file tree: Click file to open in Preview, click entire row to expand/collapse folder, top search by filename (150ms debounce, skip .git and node_modules, 200 result cap, 20,000 scan limit).
  • Drag file to chat input box: Tree rows can be dragged to input box, relative path inserted at current draft cursor; highlight prompt bar appears above input box during drag.
  • Git changes panel: Reads real git status (porcelain v1 -z) and supports stage/unstage/discard; untracked goes through deletion, tracked goes through restore, batch discard shows confirmation.
  • Preview multi-tab preview: markdown/html/code/diff/csv/pdf/word/excel/ppt/image/text/url; supports source/preview toggle, split-pane editing (ratio persisted), save (mtime conflict detection), download, refresh, dirty indicator, middle-click close, right-click batch close (dirty confirmation), tab overflow gradient indicator.
  • Panel width draggable (rAF frame merge): Explorer default 260px / range 220500px; Preview default 480px / range 3401200px; double-click handle to reset to default width; two-level clamping ensures chat area >= 360px; collapse = width shrinks to 0 but component stays mounted, tree expansion state and preview tabs are preserved.
  • Preferences persisted per-project: localStorage keys follow AionUI (chat-workspace-width-px, chat-preview-width-px, preview-panel-split-ratio, project-panel-collapse:<root>, explorer-ui:<root>, scm-ui:<root>, preview-ui:<root>), LRU limit 12 scopes, invalid values fall back to default after range validation.

Technical Implementation

  • Language: TypeScript (ESM; host and browser half separated layer compilation)
  • Key Dependencies: @deepseek-ai/cordis (host half plugin runtime), @deepseek-ai/dsh-host-webserver and @deepseek-ai/dsh-subprocess (host HTTP routing and git subprocess management), @deepseek-ai/dsh-client-runtime / @deepseek-ai/dsh-client-locale / @deepseek-ai/dsh-client-ui-conversation (browser half injection), react ^18.2.0 (UI rendering)
  • Architecture Pattern: Cordis dual-half plugin — src/index.ts is the host half (Node process: fs/git service + /aionui-panel/* routes + systemPrompt announcements), src/client/index.ts is the browser half (Web GUI side: state core + drag engine + DOM layout controller + React components), src/core/types.ts is pure types shared between halves; cordis.patch.yml inserts plugin line into web profile list, package.json#dsh.client declares browser injection and platform: "web".
  • Entry Files: src/index.ts (host half entry), src/client/index.ts (browser half entry), src/host/routes.ts (/aionui-panel/* route layer, includes JSON content-type CSRF interception and SSE change stream), src/host/gate.ts (workspace gate), src/host/fs-service.ts / src/host/git-service.ts (fs/git data services)

Applicable Scenarios

Users who open project sessions in DSH Web GUI and want LLMs to directly see/modify real repository files: let agents read .ts or view .yaml during chat, or manually open several files for reference. If you're already running DSH on dsh web but feel "only typing to agent" isn't intuitive enough and want that VS Code-style right-side project explorer feel, this plugin fills that gap.

Prerequisites and Compatibility

DependencyMinimum VersionDescription
DSH Runtime>=0.1.0-rc.6peerDependencies locks @deepseek-ai/dsh-* to ^0.1.0-rc.6, including dsh-client-locale / dsh-client-runtime / dsh-client-ui-conversation / dsh-client-ui-slots / dsh-host-webserver / dsh-subprocess / dsh-system-prompt / dsh-workspace (package.json:33-43)
Client Runtime Profilewebcordis.patch.yml inserts plugin line into web profile roster, package.json#dsh.client.platform is also web; browser half does not load under headless profile (cordis.patch.yml:11-13, package.json:20-32)
React^18.2.0Browser half dependency, UI components based on React 18 rendering (package.json:42)
Node.jsNot declaredNeither root package.json nor this package's package.json has engines field; build/test depends on [email protected], [email protected], typescript@~5.7.2
PlatformCross-platform (macOS/Windows/Linux)Only depends on Node standard library (node:fs/node:http/node:path/node:fs/promises); host half path handling normalizes case-insensitive, separator-independent on win32 (src/host/gate.ts:1-46)
Native ModulesNoneNo koffi/node-pty/node:sqlite native bindings; git called via subprocess managed by @deepseek-ai/dsh-subprocess (src/host/git-service.ts:34-79)

Installation

dsh plugin --profile web add github:CAPTAIN1275/dsh-ui-web/packages/dsh-aionui-panel

After installation, restart dsh web and open a project session with a working directory to see the "Preview" and "Files/Changes" panels on the right side of the chat area.

Configuration

This plugin requires no DSH-side configuration (no cordis Schema or ctx.config exposed items). Browser-side "user preferences" — panel width, collapse state, Preview split ratio, tab order — are written by the plugin itself to localStorage, isolated by project root, requiring no manual user configuration.

FAQ

Q: What can I see after installing this plugin?

A: In project sessions opened with dsh web, two additional panels appear on the right side of the chat area: Explorer (file tree + Git changes tab) and Preview (multi-tab file preview). Files in the tree can be dragged to the chat input box to insert the relative path at the draft cursor; the agent will read the file as needed without manual path typing.

Q: What file formats does preview support?

A: markdown, html, code, diff, csv, pdf, word, excel, ppt, image, text, url — 10+ formats. Supports source/preview toggle, split-pane editing (ratio persisted), save (mtime conflict detection), download, refresh, dirty indicator, middle-click close, right-click batch close (dirty confirmation), tab overflow gradient indicator.

Q: Must use DSH Web GUI (profile=web) to see the panels?

A: Yes. cordis.patch.yml inserts the plugin line into the web profile list, and the dsh.client.platform field is also web; under CLI/headless profile the browser half doesn't load, so these two panels only appear in DSH Web GUI.

Q: Is the data source real filesystem or mock?

A: Real. Host process provides directory listing, file read/write, filename search, git status/diff/stage/unstage/discard via /aionui-panel/* HTTP routes; recursive fs.watch and 2-second git polling compose the SSE change stream, file tree and Git status refresh in real-time.

Q: What happens if workspace path is not in registered workspace?

A: Directly rejected. All requests' project root go through workspace gate: after realpath normalization must fall within some workspace returned by host workspace registry or its subdirectory; out-of-bounds returns stable error code path-outside-root. Meanwhile route layer enforces JSON content-type validation, intercepting form CSRF without CORS preflight.

Q: Can I use it without git binary installed?

A: File tree and preview work completely. Host half does a one-time git availability probe; probe failure logs and dispatches gitUnavailable event, SCM tab enters friendly "git not installed" state without retrying spawn every 2 seconds.

Q: Are panel width and collapse state saved?

A: Persisted to localStorage per-project, keys follow AionUI naming (chat-workspace-width-px, chat-preview-width-px, preview-panel-split-ratio, project-panel-collapse:<root>, explorer-ui:<root>, scm-ui:<root>, preview-ui:<root>), LRU limit 12 scopes, oldest unused gets evicted.

Q: Will agents know about this panel's existence?

A: Yes. Host half announces plugin capabilities, limitations, and collaboration method to all agents via systemPrompt section (order=210); when user mentions "right panel / preview panel / file tree / changes panel", the model knows it refers to this plugin.

Q: How to debug when bugs occur?

A: Any browser-side DOM/runtime wiring failures only console.error, won't throw, ensuring web shell isn't dragged down by plugin; open developer tools Console and filter dsh-aionui-panel to see failure reasons.

Getting Started Difficulty

Beginner — install plugin, restart dsh web, open project session to see panels, all interactions have instant visual feedback; no configuration or API calls needed.

Known Issues and Limitations

  • Host half text read per-tab limit 80,000 characters, image read data URL limit 8 MB, exceeding gets truncated (src/host/fs-service.ts:18-21).
  • Filename search result cap 200, scan cap 20,000, fixed skip of .git and node_modules; results over cap returned with truncated marker (src/host/fs-service.ts:22-28).
  • Git availability probe is one-time: after probe failure SCM tab enters "git not installed" state and stops retrying, but filesystem watching and Preview still work normally (src/host/routes.ts:101-138).
  • Non-file-tree drag scenarios (e.g., directly dragging OS Explorer files to DSH Web) still handled by DSH Web's own image drop handler; this plugin only takes over internal drags from file tree rows to chat input box (src/client/drag/file-drag.ts:7-12).
  • When user enables system prefers-reduced-motion, panel transition animations are globally disabled, including drag edge instant switching (README.md:50).
  • File tree permanently hides .git directory (src/host/fs-service.ts:27-28); to view .git internal files please use terminal or dsh-ssh-like plugins.

Read the usage guide →

Install steps, key points, FAQ and compatibility for this plugin — auto-derived from indexed fields.

Listing badge

Listed on deepseek-plugin.org
[![Listed on deepseek-plugin.org](https://img.shields.io/badge/listed_on-deepseek--plugin.org-007EC6)](https://deepseek-plugin.org/plugins/CAPTAIN1275/dsh-ui-web/packages/dsh-aionui-panel)

Paste this markdown into your GitHub README to link back to this listing. The badge only states the listing — not a security endorsement.

← Back to plugin directory