The DSH ecosystem follows the philosophy that “everything is a plugin.” When developing web interfaces, developers often need background decoration or interaction feedback. The following introduces dsh-ui-pet, a Canvas sprite pet plugin designed for the DSH web GUI.

What It Is

dsh-ui-pet is a Canvas-based procedurally drawn pet that requires no additional asset files. It exists as a DSH bundle and client plugin, is rendered on the shell.overlay layer, and is fixed to the bottom-right corner of the viewport. Because pointer-events:none is set, it does not block clicks on page content and stays below other overlays and dialogs, serving purely as background decoration.

Core Features

  1. Procedural drawing: The pet is generated entirely by code, without loading image assets, and includes DPR (device pixel ratio)-aware rendering.
  2. Activity detection: It detects states by observing data-* hooks in the DOM, such as data-composer-card and data-chat-flow.
  3. Interaction response:
    • When typing: The pet leans toward the input box, its pupils focus, its tail swings faster, and a typing bubble appears.
    • During streaming: The pet switches to a contemplative pose, lifts its head slightly, and shows a busy bubble.
    • When idle: The pet breathes, blinks, follows the mouse with its eyes, and subtly adjusts its head with the cursor.
  4. Non-blocking design: It uses the pointer-events:none attribute to ensure the pet does not interfere with user interaction with the interface.

Installation and Activation

This plugin is installed and registered through the DSH CLI.

dsh plugin --profile web add @nkj/dsh-ui-pet

After installation, the CLI automatically merges the dependency declaration into dsh.profile.bundles and serves /plugins/@nkj/dsh-ui-pet/client.js on the next startup.

Typical Usage

After starting the web profile, open the application in a browser:

  1. Input interaction: While typing in the editor, the pet leans toward the input box in real time and shows a typing animation.
  2. Streaming response: After sending a message, when the assistant starts streaming its reply, the pet switches to a working pose.
  3. Observe details: Move the mouse; the pet’s eyes track the cursor, its head turns accordingly, and its tail sways naturally.

Use Cases and Notes

  • Target version: The plugin runtime is compatible with DSH 0.1.1-rc.2 (web profile).
  • Performance and permissions: The plugin only runs in the browser for display; it does not touch model requests and does not affect KV cache.
  • Known limitations:
    • Rendering layer: Due to source-code limitations in DSH, the plugin cannot be rendered underneath application content. It avoids blocking the reading area by using translucency and corner placement.
    • State detection: Busy-state detection is based on a heuristic algorithm over DOM changes. Brief non-streaming operations (such as expanding a tool) may trigger the working pose.
    • No type support: The build artifacts are standalone and do not depend on @deepseek-ai/* internal packages, but when developing inside the DSH monorepo, type definitions need to be restored.

This is a lightweight, playful plugin suitable for developers who want to add anthropomorphic details to the web interface without modifying DSH core source code.

Plugin catalog page | GitHub repository