@trujaycc/dsh-ui-easyfold
English | 中文
Easy-fold plugin for the dsh Web GUI: two browser-side behaviors that keep long expanded content easy to read and fold.
Problem
Some disclosure components have a reading ergonomics problem: when the folded content is very long, expanding it and scrolling down to read carries the fold button out of the screen; to collapse the content again, the user must first scroll back to the top of the content to reach the button, interrupting their reading position.
Problem illustration: after expanding long content, the fold button scrolls out of the screen
Plugin effect: after expanding, the fold row sticks to the top and is always ready to collapse
What the plugin does
Both behaviors run entirely in the browser:
- Sticky fold row — while the content is expanded, the fold row pins to the top of the conversation scrollport, staying visible and clickable during reading; the pin releases by itself once the whole content has scrolled out, without changing the layout.
- Collapse scroll compensation — folding a pinned component (click, Enter, or Space on the row) pulls the scrollport back to the fold row's position — the spot the pinned row occupied. The viewport stays at the component node instead of landing below it; a fold of a row already inside the viewport stays exactly in place.
Affected UI components
| Component | Status |
|---|
| Think (reasoning fold row) | Implemented |
| Other long-content fold components | Planned |
Install
Requires a dsh deployment with the Web surface. Install into the profile you use for pnpm dsh web:
pnpm dsh plugin --profile web add @trujaycc/dsh-ui-easyfold
pnpm dsh plugin add installs the package into the profile and registers its bundle patch layer automatically (the profile manifest's dsh.profile.bundles gains the entry). Restart pnpm dsh web to compose the new row, then open the Web page.
To uninstall:
pnpm dsh plugin --profile web remove @trujaycc/dsh-ui-easyfold
Develop
pnpm install
pnpm run typecheck
pnpm test
pnpm run build # emits lib/index.js and lib/client.js (ModuleLoader handoff)
The client bundle resolves react from the dsh Web loader's platform module table; the package declares no other runtime dependencies. To test a local checkout before publishing, install it by path or tarball:
pnpm pack
pnpm dsh plugin --profile web add ./trujaycc-dsh-ui-easyfold-0.1.0.tgz
Model Experience
None. Presentation-only client plugin: no host services, tools, or session events; nothing reaches a model request or the session log.
KV Cache effect
None.
Known Limitations and Deferred Work
- Product DOM contract coupling — both behaviors hook the dsh Web chat DOM by its stable attributes (
data-conversation-scroll, data-variant="think", data-open, data-disclosure-row). A product markup change silently disables them.
- First scrollport only — the compensation targets the first
data-conversation-scroll in the document; side-by-side session windows (subagent views) keep a single behavior owner.
- Bounded commit patience — the compensation waits up to eight animation frames for the product's React commit; a deferred commit beyond that window skips the correction (no scroll damage, just no pull-back).
