Introduction

In the DeepSeek Harness (DSH) plugin ecosystem, client plugins often need to display textual differences. Handwriting Diff algorithms, handling line alignment, and word-level highlighting are not only costly to develop, but also error-prone. dsh-diff-view provides a general-purpose Diff viewer component that reuses the styling and algorithm logic of native DSH Review, making it directly callable by plugin developers.

What Is This

This is a DSH client plugin maintained by joao-paulo-santos. It does not contain an independent access UI; instead, it is injected into the DSH client as a service and provides Diff view rendering capabilities.

Core Features

The core capabilities of this plugin focus on computing and displaying textual differences:

  • Diff component reuse: Provides diffFileComponent, which supports generating a file diff view from two complete texts.
  • Algorithm support: Performs line-level comparison based on the LCS (Longest Common Subsequence) algorithm.
  • Word highlighting: Supports word-level difference marking.
  • View modes: Supports switching between Split (side-by-side) and Unified (unified view) modes.
  • Line number handling: Provides accurate line numbers and preserves line-number correctness when context is collapsed.
  • Syntax highlighting: Reuses the platform’s useCodeHighlighter and languageForPath primitives, keeping the Diff view color scheme consistent with native Review.
  • Styling independence: The plugin includes a ddv-* stylesheet, so users do not need to manually manage CSS for diff lines.

Installation and Enablement

Installing this plugin requires having a DSH Checkout repository and an active Profile (for example, web).

  1. Clone the plugin repository:
    mkdir -p ~/dsh-plugins && cd ~/dsh-plugins
    git clone https://github.com/joao-paulo-santos/dsh-diff-view.git
  1. Add the plugin to the DSH Profile:
    # 假设你的 harness checkout 在当前目录
    pnpm dsh plugin --profile web add ~/dsh-plugins/dsh-diff-view
  1. Verify that the configuration has taken effect:
    pnpm dsh --profile web --dump-config

After installation, restart Harness. The plugin will automatically inject the diffView service.

Typical Usage

After injecting the diffView service, you can use it in the following ways:

1. Render a File Diff Component

Generate a Diff component from two complete texts. The component includes Split/Unified toggle buttons.

// consumer client half, inject: ['diffView', …]

const Diff = ctx.diffView.diffFileComponent({
  path: 'src/a.ts',        // 可选，用于选择语法高亮规则
  before: oldText,         // 修改前的文本
  after: newText,          // 修改后的文本
  initialMode: 'split',    // 默认模式: 'split' (默认) | 'unified'
  showToggle: true,        // 显示 Split/Unified 切换胶囊
  wrap: false,             // true 表示长行换行，false 表示滚动
  wordHighlights: true,    // 启用单词级高亮
})

return React.createElement(Diff, {})

2. Use Hunks Data

If you need more fine-grained control, you can use the hunksOf method to retrieve diff hunks.

const hunks = ctx.diffView.hunksOf(oldText, newText)
// 返回格式: [{ oldStart, oldLines, newStart, newLines, lines: [' ctx', '-old', '+new'] }]

3. Use the Low-Level Rendering Engine

For custom layouts, you can use the low-level line alignment and word span calculation engine.

// 1. 获取对齐的编辑行
const rows = ctx.diffView.engine.alignedEditRowsOf(beforeLines, afterLines)
// rows: [{ kind: 'same'|'replace'|'delete'|'insert', removedLine?, addedLine? }]

// 2. 获取单词级别的差异标记
const spans = ctx.diffView.engine.wordSpansOfLinePair(beforeLine, afterLine)
// spans: { removedSpans, addedSpans }: arrays of { text, changed }

Use Cases and Cautions

  • No independent UI access: This plugin does not provide a standalone page and must be invoked by host plugins through service injection.
  • Line-number authenticity: Line numbers are derived from the Diff calculation result before context collapse, so they remain accurate across different view modes.
  • Syntax highlighting dependency: If path is not provided, or if the platform does not implement the languageForPath primitive, diff lines will be rendered as plain text only.
  • Style management: CSS for diff lines is managed by the plugin’s ddv-* class names, so hosts do not need to write Diff-specific CSS.
  • No persistence: This plugin does not handle data persistence and is not tightly coupled to the Approval workflow.

Conclusion

dsh-diff-view is a lightweight, dependency-free DSH plugin focused on providing core Diff view capabilities. Whether you are building Approval tools, Scratchpads, or code review plugins, you can directly reuse its components and engine.