In the development and debugging workflow of DeepSeek Harness (DSH), after the model executes the edit or write tool, the original tool card usually only displays a code snippet or file path. This approach is not intuitive enough when reviewing specific changes and can easily miss changes within lines. The dsh-client-ui-code-diffs plugin aims to solve this problem by upgrading the tool card to an inline diff view.

What Is This

This is a pure client-side plugin maintained by user linhoulong123. It intercepts and replaces the default edit/write tool card rendering logic in DSH through a priority override mechanism, enabling it to directly display a comparison view of code changes in the message stream.

Core Features

The plugin provides the following features:

  • Whole-line red/green diff: Added lines are displayed with a green background, and removed lines are displayed with a red background; the background color follows theme variables.
  • Character-level highlighting: Parts of the same line that change are highlighted individually.
  • Syntax coloring: Supports syntax highlighting for languages such as Kotlin, Java, TypeScript, JavaScript, Python, JSON, XML, and CSS.
  • Information statistics: Displays line numbers and added/removed line counts.
  • Status labels: Shows status labels such as executing, failed, or “Open File”.
  • Large file handling: Diffs over 600 lines automatically truncate the middle content to avoid rendering lag.
  • Automatic replacement: Registers with a lower priority and automatically overrides the built-in edit/write cards.

Installation and Activation

Run the following command in the terminal to install the plugin. After installation, you need to restart the dsh web service for the changes to take effect.

dsh plugin --profile web add <npm-or-github-spec>

Typical Usage

In a conversation, after the model calls the edit or write tool to modify a file, the corresponding card in the message stream will automatically render as a whole-line red/green diff view, making it convenient for developers to compare added and removed content directly.

Notes and Compatibility

  • Pure client-side: The plugin has no server-side logic; all rendering is performed on the client.
  • Runtime dependency: Depends on the React runtime provided by the host.
  • Environment requirements:
    • DeepSeek Harness version: 0.1.0-rc.6
    • Node.js version: >= 20

Summary

This plugin significantly improves the efficiency of reviewing code changes in DSH by providing visual diff display. For plugin details and source code, visit its GitHub repository or community catalog.