dsh-inline-diff
English | 简体中文
See every file your agent edits, right in the chat. No clicking required.
By default the DeepSeek Harness web GUI collapses each file edit into a tiny one-line row. This plugin replaces those rows with an always-open, side-by-side diff: old code on the left, new code on the right, additions in green, deletions in red, a colored edge bar on every changed row, a hover highlight that tracks the row under your cursor, and a +N −N summary for every file.
| |
|---|
| Without | collapsed rows, one click per file to see what changed |
| With | the full diff right there, in the conversation |
What it looks like
A typical edit: changed lines paired side by side, with the exact words that changed highlighted. Pairs are matched by similarity, so an insertion placed above an edited line (a comment, a blank line) does not steal the changed line's counterpart — unmatched lines simply render as plain additions or removals:
A diff card of an edit, with changed words highlighted
Words or whole lines
By default a changed line gets double highlighting: the row is tinted green/red, and on top of that the exact words that changed get a stronger highlight. Prefer it calmer? Open Settings → Plugins → Inline diff and pick Lines only. You keep the row tint but lose the word chips. The choice is saved in your DSH settings and survives restarts.
Line numbers
Every row carries a 1-based line number in a muted gutter, on both the old and the new side. The numbers come from the harness itself: when an edit settles, the plugin anchors each served hunk to its true position, and for hunks without an anchor the card reads the file through a fenced workspace route and locates the changed block verbatim. A hunk that cannot be located (a block appearing more than once, a drifted file, no host half) falls back to window-relative numbering from the hunk's first row, so a number always renders — but it may not be the file's true line. Prefer it cleaner? Pick Off under Settings → Plugins → Inline diff → Line numbers and the gutter disappears entirely. Like the other choices, this is saved and survives restarts.
Indentation
Edits often arrive indented with their surrounding code, which pushes the actual change toward the middle of the card. By default the diff strips the leading whitespace every non-empty line shares, so changes sit closer to the gutter; a small ⇤ N badge on the file header shows how many characters were removed. Prefer seeing the code as written? Pick Keep under Settings → Plugins → Inline diff and the original indentation stays. Like the highlighting choice, this is saved and survives restarts.
Syntax highlighting
Code rows are colored by a bundled highlight.js (the same language set the Solution Explorer sidebar uses), so edits read like an editor: keywords in your accent color, strings green, comments muted, and so on. The tokens read the same --shiki-token-* variables your GUI's code blocks render with, and the language is detected from the file's extension; unknown extensions stay plain. Prefer plain text? Pick Off under Settings → Plugins → Inline diff → Syntax highlighting. Like the other choices, this is saved and survives restarts.
dsh-stylevault compatible: its Colors panel overrides exactly those --shiki-token-* variables, so restyling your theme there restyles the diff cards too.
Fold long hunks
Cards stay fully expanded by default. Turn on Fold long hunks under Settings → Plugins → Inline diff and a stepper appears for the visible rows per end (default 8): a hunk spanning more than two visible ends plus four extra rows shows its first and last rows with the middle behind a bar; click the bar (or focus it and press Enter) to reveal the hidden rows, and click the bar that replaces it to fold them away again. Like the other choices, this is saved and survives restarts.
Wallpaper glass
With dsh-wallpaper-engine installed and a wallpaper live, diff cards adopt its liquid-glass look: a translucent surface, a frosted blur of the wallpaper behind them, and the same specular sheen the composer and message bubbles use. Blur strength and transparency follow wallpaper-engine's own glass sliders. Prefer the stock opaque cards? Pick Off under Settings → Plugins → Inline diff → Wallpaper glass. Like the other choices, this is saved and survives restarts.
Themes
Every color on the card, from surfaces and text to borders and the green/red diff tints, is derived from your GUI's theme tokens (Settings → Appearance). The card follows light mode, dark mode, and any custom accent colors instead of a fixed palette. The syntax token colors ride the same system (the GUI's shiki code palette); before any theme variables exist they simply render as the card's plain text color.
The same compact edit under a custom theme — dsh-stylevault overrides exactly those token variables, so a restyle there restyles every diff card:
A compact diff card with a custom theme
Language
The settings card comes with English and Simplified Chinese text. It follows the GUI language picked under Settings → General → Language; when nothing is stored it follows your browser. A missing translation falls back to English.
Install
With the dsh CLI (easiest):
dsh plugin --profile web add github:JanEickholt/dsh-inline-diff
From GitHub (manual, same result):
-
Add the plugin to your profile's package.json:
"dsh-inline-diff": "github:JanEickholt/dsh-inline-diff"
then run pnpm install in the profile directory.
-
Add it to your profile's cordis.patch.yml:
- insert:
- id: inline-diff
name: 'dsh-inline-diff'
-
Refresh the GUI page. Done. Every edit and file write now renders as an inline diff.
Manual: copy this repository into <profile>/node_modules/dsh-inline-diff/ and add the same patch row.
Contributing
Contributions of any kind are welcome: code, bug reports, docs, design ideas, screenshots, or just telling us what confused you. Open an issue or a pull request; nothing is too small.
Layout
The client ships as a single self-contained file because DSH loads it as one module. Its source of truth is src/, split per concern (line-diff.js, render.js, style.js, i18n.js, …). pnpm build (or pnpm test, which builds first) concatenates those blocks into lib/client.js. Edit files under src/, never lib/client.js directly. The two-tab indentation on code lines mirrors the module-loader wrapper the generated file is wrapped in; blank-line placement between blocks is added by the build.
About this project
This plugin was written by an AI coding agent (with a human steering it).
License
MIT
