@deepseek-ai/dsh-client-ui-breathing-bg

English | 中文

Web ambient-backdrop plugin: a dot-wave "breathing light" painted on a full-bleed canvas behind the conversation transcript. Its browser half registers the breathing entry in the conversation-declared conversation.background backdrop slot; the host half is empty on purpose — the light is a browser-only surface over live conversation state, with no tool, service, or event wiring to mount.

The dot lattice rides two counter-traveling sine waves plus a cross-swell, and the whole field inhales and exhales through a slow envelope. While the harness is idle the field stays calm, gray-white, and slow. While it works, the field takes a semantic state color and its pace, wave amplitude, and color saturation scale with a smoothed intensity:

Snapshot facts	State	Color token
last turn failed / session open failed	error	--dsw-alias-state-error-primary (red)
pending interaction (approval/question)	waiting	--dsw-alias-state-success-primary (green)
tool calls executing	tool	--dsw-alias-state-warn-primary (amber)
assistant partial streaming	streaming	--dsw-alias-state-business-primary (blue)
turn running before first token	streaming (quiet)	business blue
messages queued	queued	--dsw-alias-label-secondary
everything else	idle	--dsw-alias-label-tertiary (calm gray)

Priority: error outranks waiting, which outranks tool — a pending question or approval pauses the harness (its tool call stays open in runningCalls, but the "your turn" green must win over the amber of the open call) — which outranks streaming, the quiet running gap, queued, then idle. State switches and intensity swings cross-fade the dot color (lerped per frame) instead of snapping.

Streaming intensity is additionally boosted by the measured decode rate — the chars/sec growth of the in-flight assistant partial — so the light visibly quickens and deepens as tokens pour in, then eases back down when streaming pauses (fast attack, slower decay). Colors are read from the theme sheet's semantic tokens at runtime, so the light follows light/dark switching without any palette duplication; prefers-reduced-motion renders one calm static frame instead of animating. All per-frame math lives in pure visual-state / wave-field modules (unit-tested without a canvas); the component only maps the snapshot through them onto the 2D context.

Install into a DeepSeek Harness checkout

This package is a workspace plugin of the deepseek-harness monorepo: it composes into the web bundle and is built with the repo's own tooling. It cannot be installed standalone today — the @deepseek-ai packages published on npm predate the conversation.background slot, and the plugin registers into nothing (and renders nothing) without it.

On a machine with a harness checkout of the same release family (e.g. 0.1.0-rc.5):

1. Place this package into the workspace (this repo's root IS the package):

   git clone https://github.com/CharserHH/DeepSeek-Harness-Breathing-BG.git <harness>/packages/client/ui-breathing-bg
   

2. Apply the harness-side integration patch (declares and renders the conversation.background backdrop slot, registers the bundle row, regenerates the slot catalog, audits the README). The patch ships inside the package at patches/conversation-background-slot.patch and covers packages/client/ui-conversation/src/client/{contract/slots.ts, apply.ts, skeleton/ConversationRoot.tsx, skeleton/ConversationRoot.module.css}, packages/bundle/web-app/{cordis.patch.yml, package.json}, tsconfig.client.json, the generated slot-catalog.ts, and the Model-Experience audit allowlist:

   cd <harness>
   git apply packages/client/ui-breathing-bg/patches/conversation-background-slot.patch
   

3. Link and build:

   pnpm install
   pnpm run gen-client-catalog
   pnpm --filter @deepseek-ai/dsh-client-ui-breathing-bg bundle
   pnpm --filter @deepseek-ai/dsh-client-ui-conversation bundle
   pnpm --filter @deepseek-ai/dsh-cordis-client-runner bundle
   pnpm --filter @deepseek-ai/dsh-web-frontend run build
   

4. Restart dsh web and hard-refresh the browser (the plugin row is part of the boot composition).

Tests

pnpm exec vitest run packages/client/ui-breathing-bg   # from the harness root

Model Experience

None, as the backdrop is a browser-side UI plugin layer that reads the conversation snapshot and registers nothing model-facing.

KV Cache effect

No direct invalidation; the plugin holds no model-visible state.

Known Limitations and Deferred Work

• Ambient by design — the backdrop is pointer-transparent and purely decorative; it never carries information a user must act on.
• Canvas, not DOM — the dot field is drawn on a 2D canvas, so it is not reachable by assistive technology (the canvas is aria-hidden); no accessible alternative is planned for a decorative layer.
• The layer mounts only with a session — the conversation.background slot is strict-session-scoped, so the blank hero screen keeps its own static glow rather than the breathing field.