@linxin666/dsh-client-ui-aionui-panel

Usage

When a project session (the current session has a working directory) is open, two panels appear to the right of the chat area:

• Explorer (rightmost column, default 260px, range 220–500px): File / Changes two tabs; clicking a row in the file tree expands/collapses a folder, clicking a file opens it in the preview panel, and the top filename search (150ms debounce, clicking a result locates it in the tree without interrupting flow); the Changes tab reads the real git status and supports stage / unstage / discard (untracked via delete, tracked via restore, bulk discard asks for confirmation).
• File-tree context menu: right-clicking a file or folder opens a menu — copy path, copy name, reveal in file manager, open with default app (files only), rename, new file, new folder, delete (with confirmation); every operation goes through the workspace gate (loopback fence + .git refusal), and reveal uses explorer /select on Windows, open -R on macOS, falling back to opening the parent directory on Linux desktops.
• Drag a file to the input box: file rows in the tree can be dragged (except directory rows); dropping onto the chat input area inserts the relative path (e.g. deploy/base/deployment.yaml) at the cursor of the current draft, and the agent reads the file itself once the message arrives — no need to type the path by hand; a highlighted hint bar shows above the input while dragging.
• Preview (second column from right, default 480px, range 340–1200px): multi-tab preview supporting markdown / html / code / diff / csv / pdf / word / excel / ppt / image / text / url (code previews are syntax-highlighted via the official shiki core); source/preview toggle, split-screen editing (ratio persisted), save (mtime conflict detection), download, refresh (4-state: dead buttons are not rendered), dirty dot, middle-click close, right-click menu batch close (dirty confirm), and tab-overflow gradient indicator.
• Mermaid diagrams: fenced ```mermaid blocks render as diagrams in the markdown preview. The mermaid runtime is bundled in the package and served same-origin via /aionui-panel/vendor/mermaid.js (no CDN, offline-friendly, loopback-fenced); diagrams follow the shell's light/dark theme and re-render on theme flips; a diagram with syntax errors falls back to the plain code block.

Interaction details:

• Drag the left edge handle to resize (merged per frame via rAF, body user-select:none); double-click the handle to reset to the default width.
• Two-level width clamping (Explorer first, Preview second) mathematically guarantees the chat area stays >= 360px; out-of-range values are written back to persistence.
• Collapse = width shrinks to 0 while the component stays mounted (tree expanded state / preview tabs are not lost), no transition animation; a floating expand button appears on the right after collapsing.
• Light/dark themes follow the GUI (body[data-ds-dark-theme]), and prefers-reduced-motion globally disables animations.
• Preferences persist per project (localStorage keys matching AionUi): chat-workspace-width-px / chat-preview-width-px / preview-panel-split-ratio / project-panel-collapse: / explorer-ui: / scm-ui: / preview-ui: (LRU capped at 12 scopes). Reads are always range-checked; invalid values fall back to defaults.