Swap custom diff view for @pierre/diffs in Vue web app
Session from pi-web on Hugging Face by woxQAQ · MIT · condensed by Coders Talk
Click a segment to jump to that moment
17msession
0interventions
GOAL
Replace the team's own diff renderer with the @pierre/diffs library inside the pi-web Vue app, keeping the existing theme system and tool-block diff stats working.
- +0Prompt · +0用 @pierre/diffs 替换我们实现的 diff 试试
- +0mAgent did · +0mExplored @pierre/diffs package internals (FileDiff, parsePatchFiles, registerCustomTheme) and the existing DiffView.vue, toolBlock.ts and theme system to plan the integration
- +4mAgent did · +4mAdded pierreDiff.ts utility, rewrote DiffView.vue to render diffs via FileDiff, updated toolBlock.ts and ChatTranscript.vue to pass path through, added a fallback-path test; tests (287 passed) and build:web succeeded
- +8mFail · +8mDeveloper shared a screenshot showing the diff rendered empty (0/0) even though the outer stats showed +22/-0
- +8mAgent did · +8mFound that @pierre/diffs sometimes parses a diff into a file with no real hunks and treats it as success; added filterRenderableDiffFiles to reject header-only fake parses, added a test, reran tests and build
- +10mFail · +10mDeveloper reported '没有颜色' (no color) — the diff rendered but without addition/removal highlighting
- +10mAgent did · +10mTried mapping Pierre's --diffs-* CSS variables to the app's own theme variables via unsafeCSS, then switched to targeting Pierre's rendered data-line-type attributes directly with CSS rules; rebuilt each time
- +14mFail · +14mDeveloper reported again '还是没有' (still no color) after the CSS-variable and attribute-selector attempts
- +14mAgent did · +14mAbandoned the CSS-cascade approach and switched to reading the palette and writing inline styles directly onto Pierre's shadow DOM nodes after each render (applyInlineDiffColors/applyLineStyles), rebuilt web bundle
- +17mOutcome · +17mDiff rendering migrated to @pierre/diffs with parsing/fallback fixes and passing tests/build, but the addition/removal color styling was still unconfirmed after three fix attempts — session ended pending the developer's next check
VERDICT
Next time I'd ask the agent up front to inspect how @pierre/diffs actually themes its shadow DOM (CSS variables vs. attribute-based styling) before wiring anything, since we burned three rounds guessing at the color layer. The fix that actually mattered was catching the case where Pierre 'successfully' parses a diff into a header with no hunks and silently renders empty — filtering that out is what made the diff content itself trustworthy; the color issue was still unresolved when the session ended.