dsh-file-manager — Right-panel file manager + @ file references for the DSH web GUI

English | 中文 (README.zh.md)

A plugin for the DeepSeek Harness desktop shell (dsh web): an Explorer file panel + Preview panel on the right of the chat area (a pixel-faithful re-implementation of FileManager, Apache-2.0 reference, not a copy), plus @ file references in the composer (tree multi-select modal + in-composer chips with line numbers). Everything is driven by the real filesystem and real git — no mocks.

Features

Right panels

• Explorer (rightmost column): Files / Changes tabs.
  • File tree: click to expand/collapse folders, open files; filename search on top (150ms debounce, click-to-locate).
  • Git changes: real git status (porcelain v1 -z) with stage / unstage / discard (untracked → delete, tracked → restore; batch discard requires confirmation).
  • Tree context menu: copy path, copy name, reveal in file manager, open with default app, rename, new file, new folder, delete (double-confirmed).
  • Drag a file row into the composer to insert its relative path into the draft.
• Preview (second-right column): multi-tab preview for markdown / html / code / diff / csv / pdf / word / excel / ppt / image / text / url. Source/preview toggle, split editing (persisted ratio), save (mtime conflict detection), download, refresh, middle-click close, right-click batch close.
• Mermaid: ```mermaid blocks in markdown preview render as charts; the runtime ships inside the plugin (same-origin, offline-capable, follows the theme).
• Dark/light themes, per-project persisted preferences, master switch (Settings → Web UI plugins).

@ file references (highlight)

Typing @ in the composer opens a pi-desktop-style tree multi-select modal (lazy directory tree + filename search + checkboxes):

• Picked files/directories land as in-composer chips (green </> glyph + basename + line range); the reference text stays hidden and is only serialized to @<relative-path>:<lines> plain text on send.
• Line numbers: a full-file reference carries the file's line count (@path:1-N); selecting a code range in the preview and clicking Add to chat produces a chip with just that range (@path:start-end).
• Chips are native dsh reference objects (not text decoration): Backspace deletes the whole chip, copy/paste keeps semantics, submit serializes through the plugin's registered file reference codec.
• Directory references use plain @path/ text (no line concept).

Install

# From npm (once published)
dsh plugin --profile web add @lijian-ui/dsh-file-manager

# Direct link from this repo (dev/onboarding; lib/ is committed, clone-and-use)
git clone https://github.com/lijian-ui/dsh-file-manager.git
cd dsh-file-manager
dsh plugin --profile web add link:$(pwd)

Restart dsh web after installing; open a project session to see the panels, and type @ in the composer for file references.

The desktop shell (dsh-desktop) develops against this via a local symlink (node_modules/@lijian-ui/dsh-file-manager → extensions/file-manager); after editing the source, npm run build regenerates lib/, then restart dev.

Architecture

• Host half (src/index.ts + src/host/): a cordis plugin exposing /filemgr/* HTTP routes — directory listing, file read (80k char text cap / image data URLs), write (mtime conflict detection), filename search, git status / stage / unstage / discard, and an SSE change stream. Every operation passes a workspace gate (realpath normalization + prefix check) and is loopback-only.
• Browser half (src/client/): framework-free state core (store.ts), drag engine (drag.ts), DOM layout controller (layout.ts — appends panel tracks to the shell's 3-column grid), React components (explorer / scm / preview / picker).
  • picker/FilePickerModal.tsx — the @ tree multi-select modal (bridge + modal; opens on a bare @ in the composer).
  • file-source.ts — registers the file input-trigger source (codec only; inert in the trigger menu).
  • reference.ts — chip insertion (slash/input-insert-reference bail; @path:lines serialization).
  • preview/selection.ts — preview selection → line-range mapping.
  • styles/chip.module.css — chip visuals (muted rounded pill + green </> glyph, global override of [data-decoration="chip"]).
• Workflow: after editing, npm run build (regenerates lib/) AND a dev restart are both required — neither substitutes for the other.

Build

npm install
npm run build      # tsc -b + tsdown → lib/
npm run test       # vitest

Attribution

This project is a re-implementation of FileManager (iOfficeAI/FileManager, Apache-2.0): dimensions, colors, motion, and interaction parameters were measured from v2.1.53; the implementation is new code and does not reproduce upstream source. Upstream copyright belongs to the FileManager project; this project retains attribution per the Apache-2.0 license.