# dsh-web-ui

> Add a file tree, Git changes, and multi-tab file preview panels on the right side of the DSH web

## Metadata

- Author: [@zhu1090093659](https://github.com/zhu1090093659)
- Repo: <https://github.com/zhu1090093659/dsh-web-ui.git>
- GitHub: [zhu1090093659/dsh-web-ui](https://github.com/zhu1090093659/dsh-web-ui)
- Stars: 4,062
- Language: TypeScript
- License: [Apache-2.0](https://spdx.org/licenses/Apache-2.0.html)
- Homepage: <https://gallery.dsh-market.com>
- Topics: `deepseek-harness`, `dsh`, `dsh-plugin`, `web-ui`
- Forks: 248
- Open Issues: 46
- Last push: 2026-08-17T16:48:43.000Z
- Added: 2026-08-17T00:00:00.000Z

## Install

```bash
dsh plugin --profile web add github:zhu1090093659/dsh-web-ui/packages/dsh-aionui-panel
```

## Wiki

## One-Line Description
Adds "file tree + Git changes + file preview" three-panel layout to the right side of the chat area in the DSH web interface. It reads and writes real files and Git repositories in the current project. It lets you browse code, view changes, and edit files in the same window where you chat with AI, without switching between editors.

## Core Features

- **Browse project file tree**: Click entire row to expand directories, click file to open preview on the right, top search box locates files by name (~150ms debounce), right-click menu supports copy path, rename, create new, delete, and reveal in system file manager.
- **View and operate Git changes**: Reads real repository status, grouped by staged/changed/untracked/conflict, supports stage, unstage, discard changes, and prompts for confirmation before batch discard.
- **Multi-tab preview for 10+ formats**: markdown, HTML, code (with syntax highlighting), diff, CSV, PDF, images, and plain text can be read directly; supports source/preview toggle, split-pane editing, save (checks if file was modified by others before saving), download, and refresh.
- **Drag file into input box**: Drag a file from tree to chat input area, inserts relative path at cursor position, after message is sent AI reads the file automatically, eliminating manual path entry.
- **Render mermaid diagrams**: mermaid code blocks in markdown preview and chat messages are rendered as diagrams; diagram runtime is bundled within plugin and served from local same-origin address, no external CDN dependency; falls back to showing raw code block on syntax errors.
- **Adjust and remember layout**: Drag dividers to change width (file tree 220~500px, preview 340~1200px), double-click to reset, floating expand button appears at top-right after collapse; width, collapse state, and split ratio are remembered per project.

## Technical Implementation

- **Language**: TypeScript (React components + Node host service)
- **Key dependencies**: `@deepseek-ai/cordis` (plugin framework), `@deepseek-ai/dsh-host-webserver` (register HTTP routes), `@deepseek-ai/dsh-client-runtime` (browser runtime and session info), `mermaid` (bundled diagram runtime)
- **Architecture pattern**: Dual half structure with host-side and browser-side. Host half inserts via profile bundle layer in web profile through `cordis.patch.yml`, registers `/aionui-panel/*` series interfaces (directory listing, file read/write, filename search, Git status & operations, SSE change push) and injects capability description to AI; browser half is declared loaded via `dsh.client` in `package.json`, appends two-column panels to interface grid layout. All file operations go through workspace validation (real path normalization + prefix comparison, rejects out-of-bounds and `.git`), interfaces only accept local loopback requests by default. When multiple tabs open the same project, change push stream is relayed shared across tabs via cross-tab "master tab" to avoid filling same-origin connections.
- **Entry files**: `src/index.ts` (host side), `src/client/index.ts` (browser side)

## Use Cases

Suitable for users who use DSH web interface as their main workspace: let AI modify code while checking file contents and Git changes in the same screen, without opening another editor to confirm which lines AI changed. Also suitable for scenarios where you frequently need to give a file to AI — dragging a file directly from the tree into the input box is more convenient than typing the path manually. Documentation writers can use it to preview markdown and mermaid diagram rendering.

## Prerequisites & Compatibility

| Dependency | Minimum Version | Description |
|---|---|---|
| DSH | 0.1.0-rc.6 | Not declared in package.json engines, inferred from official SDK version range the plugin depends on |
| Node.js | Not declared | No engines field in package; building from source requires Node >= 22 and pnpm per development docs |
| React | 18.2+ | Peer dependency provided by host interface, usually no need to install separately |
| OS | Cross-platform | macOS / Windows / Linux; "reveal in file manager" provides precise location on Windows and macOS, Linux desktop falls back to opening containing directory |
| Git CLI | Optional | Only needed for changes panel; gives prompt if not installed, other features work normally |
| Native modules | None | Only uses Node built-in capabilities and external git command, no native extensions needed |

## Installation

```bash
dsh plugin --profile web add github:zhu1090093659/dsh-web-ui/packages/dsh-aionui-panel
```

## Configuration

| Config | Type | Description | Default |
|---|---|---|---|
| Enable right panel | Toggle | After closing, removes file tree and preview columns, hides floating expand button, and stops background file watching and Git polling; other plugins in the same family are not affected | On |

Interface preferences like panel width, collapse state, and split ratio are not configured in settings page, but automatically stored in browser local storage, separated by project.

## FAQ

**Q: Why doesn't the panel appear on the right after installation?**

A: You need to restart `dsh web` first, then open a project session with a working directory. The plugin uses the current session's working directory as project root; no panel is shown when session has no working directory.

**Q: What if the current directory is not a Git repository, or Git is not installed on the machine?**

A: Changes page will show "Current directory is not a git repository" or "Git not detected, please install git and try again", file tree and preview are unaffected. After detecting no Git, polling stops, no repeated error messages.

**Q: Can Word, Excel, PPT files show content in the panel?**

A: No, these three file types only provide download entry. Files that can be read directly in the panel include markdown, HTML, code, diff, CSV, PDF, images, and plain text.

**Q: Can large files be previewed completely?**

A: Text exceeding 80,000 characters is truncated; images over 8MB are rejected from preview. Filename search returns at most 200 results and stops after scanning 20,000 entries.

**Q: Where are panel width and collapse state saved?**

A: Saved in browser local storage, recorded separately by project path, preserves preview state for up to 12 projects, oldest is cleaned up when exceeded. Switching browsers or clearing site data resets to default width.

**Q: Can panels be used when accessing web interface from LAN or remotely?**

A: Only local access is allowed by default; requests from other sources are rejected (403) before touching files. If dsh-remote-web-ui is also installed and device pairing completed, requests with valid pairing credentials are allowed; unpaired or revoked devices are still rejected.

**Q: How to temporarily disable these panels?**

A: Find "Right Panel" in the Web UI plugin group in settings page and turn it off; panels will be removed and background monitoring stops. To completely remove, use `dsh plugin --profile web remove` to uninstall the corresponding package and restart `dsh web`.

**Q: Can't find this toggle in settings page?**

A: Some DSH versions don't expose this plugin's configuration namespace to the web settings page, in which case the form is unavailable and will show a hint. You can directly edit `~/.dsh/settings.yaml`, or add the namespace to server settings whitelist and restart.

## Getting Started Difficulty

Beginner — After installation, restart web interface and open a project session to use; only one configuration item is a main toggle; advanced operations only needed for remote access or manual config file editing.

## Known Issues & Limitations

- Word / Excel / PPT and unrecognized formats cannot be rendered in panel, can only be downloaded and opened with local software.
- Text preview limit is 80,000 characters, exceeding part is truncated; images over 8MB are directly rejected from preview.
- Filename search has limits (200 results / 20,000 scanned entries), may not find all in very large repositories; file tree and search skip `.git`, search also skips `node_modules`.
- HTML preview runs in sandbox frame with scripts disabled, pages relying on JavaScript won't show interactive effects.
- Changes like commits, branch switches made by other tools outside DSH that only modify `.git` require one polling cycle (~30 seconds) or window regaining focus to refresh; file content changes are reflected immediately via file watching.
- All read/write within `.git` directory is rejected; renaming or deleting project root is also rejected.
- Panel interfaces only accept local loopback requests by default, purely remote access scenarios need device pairing plugin.
- Interface preferences stored in browser local storage, preserves preview state for up to 12 projects max, not synced across browsers.
- Some DSH versions don't expose this plugin's configuration namespace to web settings page, can only modify config file or adjust server whitelist.

---

This document is auto-generated by [deepseek-plugin.org](https://deepseek-plugin.org). HTML page: [dsh-web-ui](https://deepseek-plugin.org/plugins/zhu1090093659/dsh-web-ui/packages/dsh-aionui-panel)
Wiki generated by AI (model: `MiniMax-M2.5`)