dsh-pixel-appearance

Pixel Appearance

适用于 DSH Web GUI 的像素、响应式、静态、原生和内容引导 Retrospective 主题，包含动画像素背景、指针光晕、可配置的像素几何、画布材质、编写器和侧边栏材质，以及可配置的双色主色渐变。

目标 Profile

插件会安装到这里；不确定时保持 web。

npx -y @deepseek-ai/dsh plugin --profile web add github:phos9herus/dsh-pixel-appearance#48c44cf030253e60b3b41c0100aa59df08e962f3

兼容性与来源证明

Pixel Appearance 以 dsh-pixel-appearance 发布，当前版本为 1.9.0。Plugin Hub 会校验它的 manifest，并保存精确安装来源，便于复现安装结果。

DSH 兼容范围: *
运行环境: web
发布来源: github
Registry 更新时间: 2026/11/5

版本

1.9.0stable

2026/11/5

1.8.0stable

2026/11/4

README

DSH Pixel Appearance

简体中文 · English

An appearance plugin for the DSH (DeepSeek Harness) Web GUI: native, pixel, reactive, retrospective, and static themes, animated pixel backgrounds, a pointer halo with a temporal pixel trail, configurable pixel geometry, canvas materials, and composer/sidebar materials.

DSH Pixel Appearance banner

The plugin is a self-contained DSH bundle: a Host half that publishes the Host-backed settings namespace and a browser half that renders the themes. All pictures, palettes, and code live in this repository; there is no runtime npm dependency.

Features

Themes

Native — keeps the stock DSH look and removes all custom layers.
Pixel — a seamless animated pixel field with ripple, rain, aurora, and pulse generators.
Response — an event-driven pixel field:
- a round pointer halo whose centre is the main colour and which fades to the background colour;
- a click wave at the pointer;
- waves from the composer edge or the text caret while typing, deleting, or moving the caret;
- waves from each new Agent message line (including streamed Markdown blocks);
- optional breathing halo (static or dynamic);
- optional temporal trail: main-colour pixels stamped at the pointer that fade back to the background over a configurable retention time;
- wave damping to shorten and fade every wave.
Retrospective (Review) — a content-guided pixel theme: it samples the current conversation (or the most recent session on a new session screen), scores it against Code, Investigation, Creation, and Discussion, and paints one exclusive 8-second sub-theme animation. A sub-theme menu can follow the content or lock one of the four; session reads are read-only and released immediately.
Static — a local or remote picture behind the main page and sidebar with adjustable blur and dim.

Appearance controls

Seven colour combinations plus custom main/background colours.
Pixel size (6–32 CSS px), square or rounded pixels, and a corner radius that scales with the pixel size.
Two-colour main-colour gradient for the pixel field: Universal (one canvas-space angle shared by every pixel theme) or Personal (per animation, per response part, and per review sub-theme mappings), with Auto, Neon, Sunset, Ice, and Aurora presets, start/end colours, a strength slider, and an angle slider in Universal mode.
Canvas surface material for every custom theme: frosted glass or transparent.
Composer and sidebar materials: native, frosted glass, or transparent, each with colour and opacity.
A global blur radius used by the frosted materials.
Responsive reduced-motion behaviour.

All settings are stored in the plugin's Host-backed Config, shared by every authenticated browser on the same DSH profile.

Requirements

DSH Desktop or a DSH Web GUI with the plugin manager.
Node.js 20+ only if you want to rebuild client.js from source.
The plugin is developed against DSH 0.2.1-rc.5; the client half relies on a few stable conversation DOM attributes (see Compatibility).

Installation

Recommended: install through DSH's plugin manager

Download or clone this repository to a permanent folder, for example:
```
C:\Users\<you>\.dsh\plugins\dsh-pixel-appearance
```
In DSH, open an Agent/Creator chat and send:
```
Use plugin_manager with action "install_bundle" and target
"<ABSOLUTE_PATH_TO_THIS_FOLDER>", then tell me when the installation is applied.
```
The same operation is plugin_manager({ action: "install_bundle", target: "<ABSOLUTE_PATH_TO_THIS_FOLDER>" }).
Fully quit and relaunch DSH (do not only close the window). Host code and Host Config are loaded at startup.
Open Settings → Appearance. The plugin is listed as Pixel Appearance in the plugin manager, and its settings page is labeled Appearance.

The bundle inserts a Host entry with id appearance. Disable or remove any other plugin that already owns that id before installing this one.

Advanced: link the package into a profile

If you manage your profile manually, place this folder somewhere permanent and add a dependency to the profile's package.json:

{
  "dependencies": {
    "dsh-pixel-appearance": "link:D:/path/to/dsh-pixel-appearance"
  }
}

Then install the profile dependencies with pnpm and enable the bundle in the plugin manager. This is equivalent to how local DSH plugins are linked; the plugin files are not copied into the profile.

Updating

Replace the folder contents with a new release, run the build if you edit the source, then fully restart DSH. A page refresh only reloads the browser half; changes to index.js (Host Config fields) always require a DSH restart.

Usage

Open Settings → Appearance → Theme and choose a theme card.

Theme cards: Native, Pixel, Response, Retrospective, Static.
The Canvas style panel is available for all custom themes (disabled under Native).
The Pixels panel is enabled for Pixel, Response, and Retrospective themes; its Gradient block offers off, universal, and custom modes.
The Response effect, Composer wave, and Wave damping panels appear when the Response theme is selected.
The Sub-theme animation panel appears when Retrospective is selected.
Static theme adds a Static picture panel.

Response interactions

Event	Effect
Pointer moves	Round pixel halo follows the pointer
Pointer click	Circular wave starts at the pointer
Typing / deleting in the composer	Wave from the composer edge, or a caret-centred circular wave
Caret movement	Same as above, using the current DOM Selection
New Agent message line	Wave from that row's edge
Halo trail	Main-colour pixels at the pointer fade over the retention time

The trail strength maps to a retention time of 250–2000 ms. A value of 0 disables the trail. Static and dynamic halo styles both support the trail. Wave damping also shortens the natural wave gradient: its colour reaches the target hue just before the damped wave fades out.

Retrospective content guidance

While a session is active, the theme samples the latest rendered Chat rows (text, code blocks, tool calls, and questions) and scores four sub-themes.
On a new-session screen with no Chat rows, it reads the most recent non-blank session read-only, scans the tail of its events, and releases it immediately. Failures or timeouts fall back to the session title/metadata.
Score changes use hysteresis and a minimum interval, so a new message does not switch the sub-theme on every row. Empty content starts from Discussion.
The Sub-theme animation panel exposes Follow content, Code, Investigation, Creation, and Discussion. Choosing a concrete sub-theme locks it; Follow content restores automatic selection.
The four animations share the 8-second seamless loop and two-colour pixel language; they never appear in the generic Animation menu.

Settings reference

Field	Default	Description
`theme`	`native`	`native`, `pixel`, `response`, `review`, or `static`
`palette`	`auto`	`auto`, `deepsea`, `neon`, `sunset`, `forest`, `paper`, or `custom`
`mainColor` / `backgroundColor`	—	Custom colours for the Custom palette
`animation`	`ripple`	Pixel animation: `ripple`, `rain`, `aurora`, `pulse`
`pixelSize`	`10`	Pixel block size in CSS px (6–32)
`pixelStyle`	`square`	`square` or `rounded`
`pixelRadius`	`0.25`	Corner radius as a fraction of the pixel size (0–0.5)
`gradientMode`	`off`	`off`, `universal` (one canvas-space gradient), or `custom` (per-target mappings)
`gradientPreset`	`auto`	`auto`, `neon`, `sunset`, `ice`, `aurora`, or `custom`
`gradientFrom` / `gradientTo`	—	Start/end colours for the `custom` preset; empty falls back to the main colour and its derived end
`gradientAngle`	`135`	Universal gradient angle in degrees (0–360)
`gradientStrength`	`1`	Gradient blend toward the plain main colour (0–1)
`gradientTargets`	—	JSON map of target → , , , or ; unset targets use

Development

client.js is generated from the fragments in src/. Do not edit it by hand.

node src/build.mjs
node --check client.js
node --check index.js

src/INTERFACE.md documents the fragment contract, the shared factory scope, the pixel engine API, the Host-backed Config fields, and the runtime behaviour.

Repository layout

dsh-pixel-appearance/
├─ index.js                 Host half: Config + settings registration
├─ client.js                Generated browser half (do not edit)
├─ cordis.patch.yml         DSH bundle patch (entry id: appearance)
├─ locale/                  Plugin manager metadata (zh / en)
├─ icon.svg                 Plugin icon
├─ docs/banner.svg          README artwork
├─ src/
│  ├─ 00-head.js            Loader wrapper, constants, locale dictionaries
│  ├─ 10-engine.js          Pixel field, palette ramp, dithering, painters
│  ├─ 20-store.js           Host-backed Config store and derived state
│  ├─ 30-settings.js        Settings page React tree and CSS
│  ├─ 40-runtime.js         Scene mount, theme application, materials
│  ├─ 45-response.js        Response theme event runtime and trail buffer
│  ├─ 47-review.js          Retrospective content detection, guides, animations
│  ├─ 99-tail.js            Factory return
│  ├─ build.mjs             Fragment concatenation
│  └─ INTERFACE.md          Fragment contract and engine API
├─ vendor/                  Vendored schemastery + cosmokit (MIT)
├─ .github/workflows/       Build + syntax CI
├─ CHANGELOG.md
├─ CONTRIBUTING.md
├─ THIRD_PARTY_NOTICES.md
└─ LICENSE

Compatibility

Host settings are per profile; a different DSH profile starts from defaults.
The Response theme reads these DSH DOM attributes: [data-composer-card], [data-chat-flow], [data-chat-anchor-key], and [data-chat-flow-kind]. If a DSH update changes them, update the selectors in src/45-response.js.
The Retrospective theme reads [data-conversation-content] [data-chat-anchor-key] and data-chat-flow-kind for the current session. On a new-session screen it uses the DSH session list and a read-only sessions.retain(...) tail read of the most recent non-blank session, releasing it immediately. Changes to those selectors, session events, or the retention API need matching updates in src/47-review.js.
Static local pictures are stored as compressed data URLs inside the profile's cordis.patch.yml; very large pictures still make the config heavy. Prefer a modest image or an https link.
Remote pictures depend on the Web GUI's CSP and network access.
On very large windows the pixel grid is capped at roughly 90,000 cells; the effective pixel size may be increased slightly to keep rendering smooth.
prefers-reduced-motion forces the static halo, pauses the continuous loop, and disables the temporal trail.
Enabling dsh-ascii-whales at the same time as the Pixel, Response, or Retrospective theme can stack two background canvases; disable one of them.

License

MIT. See LICENSE. Vendored packages keep their own MIT licenses in vendor/*/LICENSE; see THIRD_PARTY_NOTICES.md.

Acknowledgements

DSH / DeepSeek Harness for the plugin, slot, theme, and Host-backed settings APIs.
dsh-ascii-whales for the frosted-composer presentation pattern.

README

DSH Pixel Appearance

简体中文 · English

DSH Pixel Appearance banner

Features

Themes

Native — keeps the stock DSH look and removes all custom layers.
Pixel — a seamless animated pixel field with ripple, rain, aurora, and pulse generators.
Response — an event-driven pixel field:
- a round pointer halo whose centre is the main colour and which fades to the background colour;
- a click wave at the pointer;
- waves from the composer edge or the text caret while typing, deleting, or moving the caret;
- waves from each new Agent message line (including streamed Markdown blocks);
- optional breathing halo (static or dynamic);
- optional temporal trail: main-colour pixels stamped at the pointer that fade back to the background over a configurable retention time;
- wave damping to shorten and fade every wave.
Retrospective (Review) — a content-guided pixel theme: it samples the current conversation (or the most recent session on a new session screen), scores it against Code, Investigation, Creation, and Discussion, and paints one exclusive 8-second sub-theme animation. A sub-theme menu can follow the content or lock one of the four; session reads are read-only and released immediately.
Static — a local or remote picture behind the main page and sidebar with adjustable blur and dim.

Appearance controls

Seven colour combinations plus custom main/background colours.
Pixel size (6–32 CSS px), square or rounded pixels, and a corner radius that scales with the pixel size.
Two-colour main-colour gradient for the pixel field: Universal (one canvas-space angle shared by every pixel theme) or Personal (per animation, per response part, and per review sub-theme mappings), with Auto, Neon, Sunset, Ice, and Aurora presets, start/end colours, a strength slider, and an angle slider in Universal mode.
Canvas surface material for every custom theme: frosted glass or transparent.
Composer and sidebar materials: native, frosted glass, or transparent, each with colour and opacity.
A global blur radius used by the frosted materials.
Responsive reduced-motion behaviour.

All settings are stored in the plugin's Host-backed Config, shared by every authenticated browser on the same DSH profile.

Requirements

DSH Desktop or a DSH Web GUI with the plugin manager.
Node.js 20+ only if you want to rebuild client.js from source.
The plugin is developed against DSH 0.2.1-rc.5; the client half relies on a few stable conversation DOM attributes (see Compatibility).

Installation

Recommended: install through DSH's plugin manager

Download or clone this repository to a permanent folder, for example:
```
C:\Users\<you>\.dsh\plugins\dsh-pixel-appearance
```
In DSH, open an Agent/Creator chat and send:
```
Use plugin_manager with action "install_bundle" and target
"<ABSOLUTE_PATH_TO_THIS_FOLDER>", then tell me when the installation is applied.
```
The same operation is plugin_manager({ action: "install_bundle", target: "<ABSOLUTE_PATH_TO_THIS_FOLDER>" }).
Fully quit and relaunch DSH (do not only close the window). Host code and Host Config are loaded at startup.
Open Settings → Appearance. The plugin is listed as Pixel Appearance in the plugin manager, and its settings page is labeled Appearance.

The bundle inserts a Host entry with id appearance. Disable or remove any other plugin that already owns that id before installing this one.

Advanced: link the package into a profile

If you manage your profile manually, place this folder somewhere permanent and add a dependency to the profile's package.json:

{
  "dependencies": {
    "dsh-pixel-appearance": "link:D:/path/to/dsh-pixel-appearance"
  }
}

Then install the profile dependencies with pnpm and enable the bundle in the plugin manager. This is equivalent to how local DSH plugins are linked; the plugin files are not copied into the profile.

Updating

Usage

Open Settings → Appearance → Theme and choose a theme card.

Theme cards: Native, Pixel, Response, Retrospective, Static.
The Canvas style panel is available for all custom themes (disabled under Native).
The Pixels panel is enabled for Pixel, Response, and Retrospective themes; its Gradient block offers off, universal, and custom modes.
The Response effect, Composer wave, and Wave damping panels appear when the Response theme is selected.
The Sub-theme animation panel appears when Retrospective is selected.
Static theme adds a Static picture panel.

Response interactions

Event	Effect
Pointer moves	Round pixel halo follows the pointer
Pointer click	Circular wave starts at the pointer
Typing / deleting in the composer	Wave from the composer edge, or a caret-centred circular wave
Caret movement	Same as above, using the current DOM Selection
New Agent message line	Wave from that row's edge
Halo trail	Main-colour pixels at the pointer fade over the retention time

Retrospective content guidance

While a session is active, the theme samples the latest rendered Chat rows (text, code blocks, tool calls, and questions) and scores four sub-themes.
On a new-session screen with no Chat rows, it reads the most recent non-blank session read-only, scans the tail of its events, and releases it immediately. Failures or timeouts fall back to the session title/metadata.
Score changes use hysteresis and a minimum interval, so a new message does not switch the sub-theme on every row. Empty content starts from Discussion.
The Sub-theme animation panel exposes Follow content, Code, Investigation, Creation, and Discussion. Choosing a concrete sub-theme locks it; Follow content restores automatic selection.
The four animations share the 8-second seamless loop and two-colour pixel language; they never appear in the generic Animation menu.

Settings reference

Field	Default	Description
`theme`	`native`	`native`, `pixel`, `response`, `review`, or `static`
`palette`	`auto`	`auto`, `deepsea`, `neon`, `sunset`, `forest`, `paper`, or `custom`
`mainColor` / `backgroundColor`	—	Custom colours for the Custom palette
`animation`	`ripple`	Pixel animation: `ripple`, `rain`, `aurora`, `pulse`
`pixelSize`	`10`	Pixel block size in CSS px (6–32)
`pixelStyle`	`square`	`square` or `rounded`
`pixelRadius`	`0.25`	Corner radius as a fraction of the pixel size (0–0.5)
`gradientMode`	`off`	`off`, `universal` (one canvas-space gradient), or `custom` (per-target mappings)
`gradientPreset`	`auto`	`auto`, `neon`, `sunset`, `ice`, `aurora`, or `custom`
`gradientFrom` / `gradientTo`	—	Start/end colours for the `custom` preset; empty falls back to the main colour and its derived end
`gradientAngle`	`135`	Universal gradient angle in degrees (0–360)
`gradientStrength`	`1`	Gradient blend toward the plain main colour (0–1)
`gradientTargets`	—	JSON map of target → , , , or ; unset targets use

Development

client.js is generated from the fragments in src/. Do not edit it by hand.

node src/build.mjs
node --check client.js
node --check index.js

src/INTERFACE.md documents the fragment contract, the shared factory scope, the pixel engine API, the Host-backed Config fields, and the runtime behaviour.

Repository layout

dsh-pixel-appearance/
├─ index.js                 Host half: Config + settings registration
├─ client.js                Generated browser half (do not edit)
├─ cordis.patch.yml         DSH bundle patch (entry id: appearance)
├─ locale/                  Plugin manager metadata (zh / en)
├─ icon.svg                 Plugin icon
├─ docs/banner.svg          README artwork
├─ src/
│  ├─ 00-head.js            Loader wrapper, constants, locale dictionaries
│  ├─ 10-engine.js          Pixel field, palette ramp, dithering, painters
│  ├─ 20-store.js           Host-backed Config store and derived state
│  ├─ 30-settings.js        Settings page React tree and CSS
│  ├─ 40-runtime.js         Scene mount, theme application, materials
│  ├─ 45-response.js        Response theme event runtime and trail buffer
│  ├─ 47-review.js          Retrospective content detection, guides, animations
│  ├─ 99-tail.js            Factory return
│  ├─ build.mjs             Fragment concatenation
│  └─ INTERFACE.md          Fragment contract and engine API
├─ vendor/                  Vendored schemastery + cosmokit (MIT)
├─ .github/workflows/       Build + syntax CI
├─ CHANGELOG.md
├─ CONTRIBUTING.md
├─ THIRD_PARTY_NOTICES.md
└─ LICENSE

Compatibility

Host settings are per profile; a different DSH profile starts from defaults.
The Response theme reads these DSH DOM attributes: [data-composer-card], [data-chat-flow], [data-chat-anchor-key], and [data-chat-flow-kind]. If a DSH update changes them, update the selectors in src/45-response.js.
The Retrospective theme reads [data-conversation-content] [data-chat-anchor-key] and data-chat-flow-kind for the current session. On a new-session screen it uses the DSH session list and a read-only sessions.retain(...) tail read of the most recent non-blank session, releasing it immediately. Changes to those selectors, session events, or the retention API need matching updates in src/47-review.js.
Static local pictures are stored as compressed data URLs inside the profile's cordis.patch.yml; very large pictures still make the config heavy. Prefer a modest image or an https link.
Remote pictures depend on the Web GUI's CSP and network access.
On very large windows the pixel grid is capped at roughly 90,000 cells; the effective pixel size may be increased slightly to keep rendering smooth.
prefers-reduced-motion forces the static halo, pauses the continuous loop, and disables the temporal trail.
Enabling dsh-ascii-whales at the same time as the Pixel, Response, or Retrospective theme can stack two background canvases; disable one of them.

License

MIT. See LICENSE. Vendored packages keep their own MIT licenses in vendor/*/LICENSE; see THIRD_PARTY_NOTICES.md.

Acknowledgements

DSH / DeepSeek Harness for the plugin, slot, theme, and Host-backed settings APIs.
dsh-ascii-whales for the frosted-composer presentation pattern.

Pixel Appearance

兼容性与来源证明

版本

相关插件

Pixel Appearance

README

DSH Pixel Appearance

Features

Themes

Appearance controls

Requirements

Installation

Recommended: install through DSH's plugin manager

Advanced: link the package into a profile

Updating

Usage

Response interactions

Retrospective content guidance

Settings reference

Development

Repository layout

Compatibility

License

Acknowledgements

兼容性与来源证明

版本

相关插件

相关插件

相关插件

README

DSH Pixel Appearance

Features

Themes

Appearance controls

Requirements

Installation

Recommended: install through DSH's plugin manager

Advanced: link the package into a profile

Updating

Usage

Response interactions

Retrospective content guidance

Settings reference

Development

Repository layout

Compatibility

License

Acknowledgements