dsh-widescreen

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 <html> 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:

1. Registers a durable widescreen settings namespace on the Host (lib/index.js).
2. Binds it on the client through ctx.settingsScope and keeps a snapshot store in sync (lib/client.js).
3. Injects a small stylesheet and toggles an data-dsh-widescreen attribute on <html>. The stylesheet redefines the variable to 100% 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