dsh-widescreen
Widescreen mode for the DeepSeek Harness web UI. Adds a toggle in Settings → General (设置 → 通用设置) that lets the session detail page fill the available browser width instead of the fixed 748px content column.
Features
- One switch in Settings → General: Widescreen mode (宽屏模式).
- When on, the chat column, date dividers, question cards, and the composer card all expand to the full width of the center column — no more excessive whitespace on wide monitors.
- When off, behavior is byte-for-byte the shipped default (748px content column).
- Container-relative sizing only (
--dsh-chat-content-width: 100%): browser zoom and window resizing keep reflowing exactly as before, and narrow viewports are unaffected. - The preference is persisted in the DSH user-settings document; it survives page reloads and restarts.
- Fully reversible: removing the plugin restores the default layout with no residue.
Install
> Requires DSH 0.1.0-rc.x (Web profile).
From GitHub
dsh plugin --profile web add github:Temoa/dsh-widescreen
No build scripts are involved: the repository ships pre-built lib/ artifacts, so no prepare authorization is needed.
From a local checkout
dsh plugin --profile web add ./dsh-widescreen
Restart dsh after installing (dsh --profile web), then open Settings → General and flip the switch.
Uninstall
dsh plugin --profile web remove dsh-widescreen
Restart dsh after removing (dsh --profile web). The default 748px layout is fully restored: the stylesheet and the `` attribute are torn down with the plugin, and the persisted preference section is ignored once the namespace is gone.
How it works
The conversation root in dsh-client-ui-conversation pins the chat content width with a component-scoped CSS variable:
--dsh-chat-content-width: 748px;
Every width-limited element (chat column, date dividers, user-question cards, composer card, dock rows) reads that variable. The plugin:
- Registers a durable
widescreensettings namespace on the Host (lib/index.js). - Binds it on the client through
ctx.settingsScopeand keeps a snapshot store in sync (lib/client.js). - Injects a small stylesheet and toggles an
data-dsh-widescreenattribute on`. The stylesheet redefines the variable to100%` on the two containers that own every consumer:
html[data-dsh-widescreen="on"] [data-conversation-scroll],
html[data-dsh-widescreen="on"] [data-composer-seat] {
--dsh-chat-content-width: 100%;
}
--dsh-composer-card-max-width derives from the same variable, so the composer follows automatically. Because the value is container-relative (100%), the original viewport/zoom-responsive reflow is untouched.
The General-settings row registers into the additive settings.general.item slot (order 30, after Appearance and Composer Enter), exactly like the shipped preference rows.
Repository layout
dsh-widescreen/
├── package.json # dsh.bundle.patch + dsh.client manifests
├── cordis.patch.yml # composition layer: inserts the plugin row
├── lib/
│ ├── index.js # Host half: settings namespace registration
│ └── client.js # Browser half: __ModuleLoader__ bundle
├── README.md
├── README.zh.md
└── LICENSE
The client bundle is authored directly in the official window.__ModuleLoader__.load({ id, factory }) artifact format documented in the harness's client build tooling, so the repository needs no build step to install.
Development
npm run check # node --check on both lib files
License
MIT
