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).
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; 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.

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.

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