Seamless split: no separate view; 'Include in split view' opens the chat beside the one being read, sidebar picks open in the last used window or glow an open one, closing to one chat returns to the normal view; opaque popovers; tests that actually find React

This commit is contained in:
Agent committed 2026-10-21 19:58:43 +00:00
1 parent 3445b2b972
commit ff3e09ac97
4 files changed
+320 -242

No files matched your search

+18 -19
View File
@@ -1,32 +1,31 @@
# @local/dsh-chat-split
Split view for DeepSeek Harness: several chats open at once in the main area.
## Features
- **Side by side, then a grid.** Chats sit in one row while each still gets the *readability width* (default 420 px). When the window is too narrow for that, they wrap into a grid of rows and columns.
- **Minimum height.** Every window is at least **396 px** tall (configurable). If the rows don't fit, the grid scrolls instead of squashing the chats.
- **A full chat in every window.** Each window renders the real conversation (messages, composer, tools), the same embedded view DSH uses for sub-agent chats.
- **Own chat list per window.** The `☰` button opens that window's own sidebar: filter and switch which chat the window shows. A blue dot marks chats already open in another window, and a green dot marks running ones.
- **Top bar per window.** Title, grid position (row · column), move up / left / right / down, and close.
- **Blue glow on re-selection.** Selecting a chat that is already open (from a window's list, *+ Add chat*, the "…" menu, or the main sidebar) while split view is showing flashes that window with a short blue glow. Choosing it in the main sidebar keeps you in split view.
- **Include / exclude.** Every chat's "…" menu in the sidebar has *Include in split view* / *Exclude from split view*.
- **Settings with a live preview.** *Settings → Chat split* has sliders for minimum height, readability width, gap and window chat-list width, plus a scaled preview of the split view built from your real chats. Drag the preview's width/height or change the number of chats to see where it wraps.
Chats side by side for DeepSeek Harness, right in the normal conversation area. There's no separate view or button to open first.
## Use
1. Click **Split view** in the sidebar's panel list (the two-pane icon).
2. Add chats with **+ Add chat**, the suggestions on the empty page, or *Include in split view* in a chat's "…" menu.
3. Rearrange with the arrows in each window's top bar; close with `✕`.
- **Put a chat beside the one you're reading:** in the sidebar, open that chat's "…" menu and choose **Include in split view**. The conversation area turns into a split with both chats.
- **Add more:** *Include in split view* on more chats, or the `+` in any window's top bar.
- **Pick chats in the main sidebar as usual:** a chat that's already open flashes its window with a short blue glow. Any other chat opens in the window you used last.
- **Back to one chat:** close windows with `✕` (or *Exclude from split view*) until one is left, or press `⤢` (*show only this chat*) on a window. The normal single-chat view comes back with that chat.
The list of open chats and the settings are stored in the browser (`localStorage`).
The split survives reloads; the set of open chats and the settings live in the browser (`localStorage`).
## Features
- **Side by side, then a grid.** Windows sit in one row while each conversation still gets the *readability width* (default 420 px, plus the window's chat list when that is shown). When the area is too narrow for that, they wrap into a grid of rows and columns.
- **Minimum height.** Every window is at least **396 px** tall (configurable). If the rows don't fit, the area scrolls instead of squashing the chats.
- **A full chat in every window.** Each window renders the real conversation (messages, composer, tools), the same embedded view DSH uses for sub-agent chats.
- **Own chat list per window.** `☰` shows that window's own chat list: filter it and switch what the window shows. A blue dot marks chats already open in another window, a green dot running ones.
- **Top bar per window.** Title, grid position (row · column), move up / left / right / down, `+` open a chat beside, `⤢` show only this chat, `✕` close.
- **Settings with a live preview.** *Settings → Chat split*: minimum height, readability width, gap, window chat-list width, and whether chat lists start open. A scaled preview built from your real chats shows where the windows wrap; drag its width/height or change the number of chats.
## Development
`client.js` is the whole plugin (`index.js` is an empty host half).
`client.js` is the whole plugin (`index.js` is an empty host half). The split is a `main` area entry without a panel-list button: it is selected automatically while two or more chats are open, and when the stock sidebar returns to the conversation view after a pick, it switches back before the browser paints.
```bash
node --test test/*.test.mjs # headless: registrations, rendering, layout maths, main-sidebar glow
node --test test/*.test.mjs # headless: registrations, include / pick / close flows, layout maths
```
The test loads `client.js` with real React (`REACT_DIR=<dir with react/ and react-dom/>`) against fake DSH services, and skips when React isn't found.
The test loads `client.js` with real React against fake DSH services (sessions, layout, workspace). It looks for a React install itself, or set `REACT_DIR=<dir with react/ and react-dom/>`. It skips when none is found.