@furayoshi/dsh-widechat

Readme

# @furayoshi/dsh-widechat

A [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) plugin that widens the conversation column past the shipped cap, right-aligns the session stats strip, caps the user-message bubble, and caps the composer's inner scroll so long inputs do not hide the conversation above. Adds a settings row to the General page so all of these can be tuned without restarting DSH.

**Compatibility**
| DSH version  | min version |
| :--- | :--- |
| `0.1.2-rc.1` | `0.8`       |
| `0.1.1-rc.1` | `<0.8`      |

**NOTE**: as at the current state, this packages has been heavily vibecoded, including most of this README. I might rewrite it at the later date, but you have been warned :)

![widechat ui](media/widechat-ui.webp)

![widechat settings](media/widechat-settings.webp)

## What it does

The shipped DSH web UI caps the chat content with `--dsh-chat-content-width` (a fixed pixel value on pre-0.1.2 hosts, a `clamp()` of the column width on 0.1.2+) and centers the column with `margin: 0 auto`. On any monitor wider than ~1024px this leaves large empty gutters on both sides and a narrow reading area. This plugin widens that cap to leave only the configured gutter, caps the user-message bubble to a share of the column (the shipped default is narrow on wide viewports), and caps the composer's inner scroll to a percentage of the viewport so long inputs do not eat the conversation above.

A small row in the **General** settings page lets you tune four values:

- **Chat column gutter** — a slider, 0–10% of the cell on each side. The shipped default is `1 %`. The column is sized to leave this much whitespace on each side.
- **Session-stats alignment** — a three-way toggle (left / center / right). The shipped default is `right`. The session-stats line under the composer (token counts, duration, etc.) lines up accordingly.
- **Your message bubble width** — a slider, 30–100% of the chat column. The shipped default is `75 %`. Your outgoing messages are right-aligned at this width; the assistant's messages fill the rest of the column.
- **Composer max height** — a slider, 20–80% of the viewport. The shipped default is `50 %`. The composer's inner textarea scroll is capped at this height (with a 52 px floor), so long inputs do not push the conversation off-screen.

If a saved value is out of range or of the wrong type, the plugin falls back to the default and logs a `console.warn` with the offending field. The page never refuses to render.

## Install

DSH's `plugin` subcommand forwards pnpm commands into the profile directory and reconciles the profile's `dsh.profile.bundles` array against the installed packages. So `dsh plugin --profile web add <spec>` is the canonical install path: it runs `pnpm add <spec>`, then automatically appends the package to `bundles` if (and only if) the installed `package.json` declares a `dsh.bundle.patch` — which this package does.

### From npmjs

```sh
dsh plugin --profile web add @furayoshi/dsh-widechat
```

The `dsh plugin add` command runs `pnpm add` to install the package into `~/.dsh/profiles/web/node_modules/`, then reconciles the `dsh.profile.bundles` array in `~/.dsh/profiles/web/package.json` to include the new bundle. The user does not need to edit `package.json` manually.

### From a GitHub URL

```sh
dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat
```

The `github:<owner>/<repo>` spec is pnpm's shorthand for `https://github.com/<owner>/<repo>.git`. To pin a specific version:

```sh
# A specific tag
dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat#v0.8.0

# A branch (e.g. main)
dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat#main

# A specific commit SHA (for reproducible installs)
dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat#a1b2c3d4
```

pnpm clones the repo, runs `npm pack` from the cloned `package.json` to build the tarball (so the `files: ["lib", "cordis.patch.yml", ...]` list matters), and installs it. As long as `cordis.patch.yml` is in `files`, DSH's bundle loader finds it on the next boot.

### From a local path or clone

If you have the source locally (or want to hack on it), install it directly:

```sh
dsh plugin --profile web add @furayoshi/dsh-widechat@file:/home/<you>/work/dsh-widechat
```

The `file:` spec is pnpm's way to install from a local path. pnpm links the package's `files` into the profile's `node_modules/@furayoshi/dsh-widechat/`. The profile's `pnpm-workspace.yaml` sets `nodeLinker: hoisted`, so the linked files are **copies**, not symlinks — this means a rebuild of the source does **not** automatically reflect in the installed copy. After editing `src/` and running `npm run build:client`, re-link the package:

```sh
# From inside the profile directory:
rm -rf node_modules/@furayoshi && pnpm install
```

Then restart DSH to pick up the new bundle. (A future version of this plugin could provide a dev script that watches and rebuilds; for now the manual `rm` is the workflow.)

### Updating, removing, verifying

Because `dsh plugin` is just a pnpm forwarder, you can use any pnpm subcommand. From inside the profile directory:

```sh
# Update to the latest version
pnpm update @furayoshi/dsh-widechat

# Re-link after editing the source
rm -rf node_modules/@furayoshi && pnpm install

# Remove the plugin (also strips the entry from dsh.profile.bundles)
dsh plugin --profile web remove @furayoshi/dsh-widechat
```

### Verifying the install

Open the Web UI, click the settings cog, go to **General** — you should see a "Wide chat" row with the four controls. Drag the sliders, and the chat column / user bubble / composer update without a reload.

To verify DSH actually loaded the bundle, from inside the profile directory:

```sh
dsh web --dump-config | grep -i "widechat\|furayoshi"
```

You should see the host row registered under the new package name.

If you want to edit the source, the build is `npm run build` (which calls `tsc` for the host lib and `tsx scripts/build-client.ts` for the browser bundle). The `lib/` directory is shipped; the `src/` directory is the source.

## How it works

The plugin is two halves:

- **Host** (`lib/index.js`) registers the settings namespace `dsh-widechat` on the host `settings` service via `ctx.settings.register("dsh-widechat", schema)` with a `z.object` schema (`chatGutterPct`, `statsAlign`, `userBubblePct`, `composerMaxHeightPct`). The schema's bounds match the slider ranges exactly.
- **Client** (`lib/client/index.js`) binds a `SettingsScope` to that namespace, re-injects a small CSS override on every scope change, and registers a row in the `settings.general.item` slot.

The CSS override is intentionally minimal — it touches three things, one per setting (hashes as of DSH 0.1.2-rc.1; the column, bubble and stats hashes live in `dsh-client-ui-chat`, the rest in `dsh-client-ui-conversation`):

```css
:root, .wSkVaW_root, [data-phase] {
  --dsh-chat-content-width:        calc(100% - 2 × <chatGutterPct>%) !important;
  --dsh-composer-card-max-width:   calc(100% - 2 × <chatGutterPct>%) !important;
}
.Sixlwa_userStack { max-width: <userBubblePct>% !important; }
.uV2eYG_scroll   {
  min-height: 52px !important;                                  /* floor, see below */
  max-height: calc(<composerMaxHeightPct>vh - 64px) !important; /* ceiling on the textarea */
}
.uV2eYG_hero .uV2eYG_scroll { max-height: calc(<composerMaxHeightPct>vh - 132px) !important; }
.-NDN2W_root     { text-align: <statsAlign> !important; }
```

`chatGutterPct` and `userBubblePct` are **percentages of the cell**; `composerMaxHeightPct` is a **percentage of the viewport**. The cell grows when the sidebar collapses to the rail (56px from 280px), so the column and the bubble grow with it — and the gutter stays at the same percentage. The composer cap, in contrast, is absolute to the viewport so the conversation above is always visible regardless of the sidebar state.

The composer card itself has **no** `max-height` and **no** `overflow: hidden` override. The card grows naturally to fit its inner scroll (capped above) plus the card's chrome (accessory row, trigger row, padding, gaps). Earlier versions did enforce `max-height: <cap>vh; overflow: hidden;` on the card — but the popover menus (model picker, permission presets, …) open upward from the trigger row inside the card via `bottom: calc(100% + 8px)`, and the card's `overflow: hidden` clipped any portion of the menu that extended above the card top. With the card free to overflow, the menus extend above the card into the conversation area and are fully visible. The conversation scroll above the composer shrinks to make room for the taller card.

The `min-height: 52px` on `.uV2eYG_scroll` mirrors the shipped hero variant's mirror floor. Without it, on a small viewport with a low cap, the scroll collapses to ~28 px and the trigger row below it ends up visually overlapping the typing area. The 52 px floor keeps the textarea usable in that case; below it, the slider value is a no-op for the cap (the scroll holds at 52 px and does not get any smaller).

DSH's shipped rules are left untouched. The column is still `width: 100%`, `max-width: var(--dsh-chat-content-width)`, `margin: 0 auto`. Toggle, scroll, resize — all the DSH default behavior. The plugin only changes the values of variables (and a few caps on the composer's inner scroll) that DSH's CSS already reads.

## Configuration

The four settings live in the `dsh-widechat` settings namespace. They can also be edited directly in the user's settings document if the npm install flow is bypassed (the file-backed settings doc lives at `~/.dsh/settings.yaml`; see the host-side schema in `src/index.ts` for the canonical field names and bounds).

| Field | Type | Default | Range / values | Reference |
|---|---|---|---|---|
| `chatGutterPct` | number | `1` | 0–10 (clamped; integers) | cell width |
| `statsAlign` | string | `"right"` | `"left"`, `"center"`, `"right"` | — |
| `userBubblePct` | number | `75` | 30–100 (clamped; integers) | chat column |
| `composerMaxHeightPct` | number | `50` | 20–80 (clamped; integers) | viewport |

The slider value is the percentage applied to the reference for that row. A value of `0` is allowed for `chatGutterPct` (no gutter at all), and `100` for `userBubblePct` (your bubble fills the column). `composerMaxHeightPct` at `0` would clip the composer entirely; the slider starts at `20` to keep it usable.

Invalid values are dropped to the defaults and a `console.warn` is logged with the offending field name.

## Caveats

### This plugin overrides internal CSS-module class hashes

`.wSkVaW_root`, `.EvIC1a_column`, `.uV2eYG_card`, `.uV2eYG_scroll`, `.Sixlwa_userStack`, `.-NDN2W_root` are CSS-Modules-generated class names from the DSH UI packages — since 0.1.2 the root and composer hashes come from `@deepseek-ai/dsh-client-ui-conversation` and the column, bubble and stats hashes from the new `@deepseek-ai/dsh-client-ui-chat`. Their hashes (the part after the underscore) are recomputed every time the owning package is rebuilt. Any release of those packages can therefore silently break this plugin — specifically, if the shipped rule that reads the variable or has the matching class name changes shape, our override no longer reaches it.

After upgrading DSH, check whether the chat column widens, the user bubble stays right-aligned at the configured width, the composer's inner scroll caps at the configured height (and never gets smaller than 52 px), and the stats line still aligns. If any of those regress, the upstream CSS-module hashes changed; see "Updating" below.

### The slider wins over DSH's drag-to-resize (0.1.2+)

DSH 0.1.2 added drag handles on the chat column that persist a width in `localStorage` (`dsh.conversation.contentWidth`) and write it inline as `--dsh-chat-user-width`. This plugin's `!important` override of `--dsh-chat-content-width` takes precedence over that inline value, so the gutter slider stays the source of truth and dragging the handles is effectively a no-op while the plugin is installed.

### The `chatGutterPct` is interpreted against the cell, not the viewport

DSH's chat column is `width: 100%` of its cell. The plugin's cap is `100% - 2 × chatGutterPct%`, where the percentage is of the cell. So `chatGutterPct: 1` means "leave 1% of the cell on each side as a gutter", not 1% of the viewport. With the sidebar open the cell is small, so the gutter is small in absolute pixels. With the sidebar closed the cell is wider, so the gutter is wider in pixels but still the same percentage. This is the DSH default behavior — preserved on purpose so the column reflows smoothly when the sidebar toggles.

### The `composerMaxHeightPct` is interpreted against the viewport, not the cell

Unlike the other two percentages, the composer cap is `composerMaxHeightPct × 1vh`. The viewport is constant regardless of the sidebar state, so the cap doesn't change when the sidebar toggles. This is intentional: the cap exists to keep the conversation visible, which is a viewport-relative concern.

### What `cordis.patch.yml` is for

The package ships a `cordis.patch.yml` (in `files: ["lib", "cordis.patch.yml", "README.md", "LICENSE"]`) that inserts a single host row into DSH's host composition. The row's `apply()` is the function in `src/index.ts` that registers the `dsh-widechat` settings namespace. Without the patch, the host has no idea the plugin exists, the namespace is never registered, and the client side's `bind()` call would resolve a read-only scope. If you fork this plugin and rename the namespace, update the `id` in the patch to match.

## Updating

When the upstream hashes change, the fix is mechanical but unavoidable until DSH exposes a stable public API for layout overrides. The plugin targets six CSS-module class hashes (as of DSH 0.1.2-rc.1):

- `.wSkVaW_root` — the conversation root (defines the chat-content-width variable) — `dsh-client-ui-conversation`
- `.EvIC1a_column` — the chat column (reads the variable as max-width) — `dsh-client-ui-chat`
- `.uV2eYG_card` — the composer card (no override — see "How it works" for why) — `dsh-client-ui-conversation`
- `.uV2eYG_scroll` — the composer's inner textarea scroll (we cap its max-height; we floor it at 52px so the trigger row stays below the typing area) — `dsh-client-ui-conversation`
- `.Sixlwa_userStack` — the user-message bubble stack (we set its max-width) — `dsh-client-ui-chat`
- `.-NDN2W_root` — the session-stats line (we set its text-align) — `dsh-client-ui-chat`

The hashes live in `dsh-client-ui-conversation/lib/client.js` and `dsh-client-ui-chat/lib/client.js` (in the profile's `node_modules`). Since 0.1.2 the CSS is inlined as `const css$N = "..."` strings, so search for the rule you're overriding (e.g. `chat-content-width`) and read the class hash out of the selector. To update:

1. Search both `client.js` files for each of the six names above. If a name has changed (the part after the underscore), update the corresponding name in `src/client/css.ts`. If a name has been removed (e.g. DSH restructured the composer), comment out the matching rule and the matching slider in `src/client/WideChatRow.tsx`, and update this README's Caveats and "How it works" sections to match.
2. `npm run build` to rebuild the host and client bundles.
3. Bump the version in `package.json` (the user-facing change is a patch for a single-hash fix, minor for a class-set change, major for an API change).

## License

MIT — see [LICENSE](./LICENSE).