@trujaycc/dsh-ui-easyfold

Readme

# @trujaycc/dsh-ui-easyfold

English | [中文](README.zh.md)

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](screenshots/pic1.png)

![Plugin effect: after expanding, the fold row sticks to the top and is always ready to collapse](screenshots/pic1.png)

## 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`:

```sh
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:

```sh
pnpm dsh plugin --profile web remove @trujaycc/dsh-ui-easyfold
```

## Develop

```sh
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:

```sh
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).