Introduction

The DeepSeek Harness (DSH) plugin system allows the client to be extended. Under the Web profile, the StatsLine at the bottom of the composer is constrained by default due to CSS Modules rules. When used on wide-screen devices, longer statistics can be clipped and only partially displayed, which affects the complete presentation of the information.

The dsh-wide-stats-footer plugin aims to solve this display issue. It dynamically discovers CSS module hashes at runtime and applies precise CSS override rules to remove the width restriction on the stats footer, allowing it to span the full composer width and remain centered.

Plugin Overview

  • Name: dsh-wide-stats-footer
  • Owner: thomasvvugt
  • Category: Client
  • License: MIT

The core features of this plugin include:
1. Remove the width restriction from the composer stats footer.
2. Make the stats line span the full composer width and display centered.
3. Resolve the issue of long stats lines being clipped on wide screens.
4. Precisely adjust width restrictions and horizontal padding through CSS overrides.
5. Dynamically discover CSS module hashes at runtime to adapt to DSH builds.
6. Degrade to a silent no-op to avoid breaking the UI.
7. Zero npm dependencies and no installation scripts.

Installation and Enablement

Installing this plugin requires the DSH CLI tools.

  1. Run the following command to install the plugin:
    dsh plugin --profile web add github:thomasvvugt/dsh-wide-stats-footer

  1. After installation is complete, restart dsh web.

  2. Confirm that the plugin has been loaded by running the configuration dump command and looking for the dsh-wide-stats-footer layer:

    dsh --profile web --dump-config
  1. To pin a version, such as v0.1.0, you can specify the version number:
    dsh plugin --profile web add github:thomasvvugt/dsh-wide-stats-footer#v0.1.0

How It Works

DSH uses a CSS Modules mechanism to generate class names with hashed prefixes, such as .{hash}_root. Because hashes can change during the build process, hardcoding CSS selectors is not feasible.

The plugin dynamically locates the target element at runtime in the following way:
1. Scan document.styleSheets to find the stats line separator rule, which usually contains .{hash}_sep.
2. Verify that its sibling element .{hash}_root declares the max-width: var(--dsh-chat-content-width) restriction.
3. Use a MutationObserver to listen for changes to the DOM and <style> tags, and rerun the discovery logic when DSH rebuilds or switches themes.

Once the target is found, the plugin injects the following CSS rule:

.{hash}_root.{hash}_root { max-width: none; padding-left: 0; padding-right: 0; }

This rule uses a double-class selector, raising the specificity to (0,2,0), which overrides the DSH original rule’s (0,1,0) restriction. It retains text-align: center and width: 100%, ensuring that the footer remains centered within the container.

If a future DSH markup or structure change causes discovery to fail, the plugin automatically degrades to a silent no-op to ensure that the existing UI is not broken.

Diagnostics and Troubleshooting

The plugin provides a global diagnostic object, window.__WIDE_STATS_FOOTER__, for developers to inspect its state in the browser developer tools console:

{ appliedAt, styleHash, domHash, overrideChars, inlineFixed, lastSyncAt }

Common troubleshooting items:

  1. The footer is still clipped:

    • Check styleHash and domHash. If both are null, hash discovery failed. This may be because a DSH version update changed the markup structure, and the plugin has degraded to a silent no-op.
    • Check overrideChars. If it is 0, the override rule has not taken effect.
    • Check appliedAt. If it is null, the plugin is not running. Confirm that you have restarted dsh web and that dsh --dump-config includes this layer.

  2. It stops working after an update:

    • If it stops working only after a DSH update, this is usually caused by CSS module hash rotation. The plugin supports runtime rediscovery, but if the markup structure changes, it must degrade.

Notes

  • Client plugin: This plugin only affects the client side, with no host-side behavior or configuration options.
  • Version compatibility: Built against DSH 0.1.1-rc.2.
  • Performance impact: The plugin does not slow down the application. Discovery logic runs only at startup, and the MutationObserver triggers only on DOM or style changes, with no polling.
  • Theme compatibility: The plugin uses double-class specificity (0,2,0) and can override the DSH original rule. If a custom theme overrides this style with equal or higher specificity, the theme takes precedence, which is expected behavior.

Conclusion

dsh-wide-stats-footer provides developers with a low-cost way to fix the stats display issue in the DSH client on wide screens. Through its dynamic CSS discovery mechanism, it maintains compatibility across DSH version updates.

This plugin can be viewed in the SkillHub plugin catalog, and the source code is available on GitHub.