Skip to content

Conversation

@BoQsc
Copy link
Contributor

@BoQsc BoQsc commented Sep 12, 2025

image

Description

Adds color-coded diff highlighting to Edit tool results, making additions and removals visually distinct with green and red backgrounds while preserving the original Edit tool styling and layout.

Type of Change

Please add the appropriate label(s) to this PR and check the relevant box(es):

  • 🐛 bug - Bug fix (non-breaking change which fixes an issue)
  • feature - New feature (non-breaking change which adds functionality)
  • 💥 breaking - Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 documentation - Documentation update
  • performance - Performance improvement
  • 🔨 refactor - Code refactoring
  • 🧪 test - Adding or updating tests
  • 🔧 chore - Maintenance, dependencies, tooling

Changes Made

  • Added SimpleDiffHighlighter.tsx component for rendering diff content with color highlighting
  • Added simpleDiffDetector.ts utility for parsing lines with +/- diff markers
  • Integrated diff highlighting in CollapsibleDetails.tsx for both preview and expanded states
  • Enabled diff highlighting specifically for Edit tool results in MessageComponents.tsx
  • Preserved original Edit tool styling: font family, spacing, and layout remain unchanged
  • Added theme support with different colors for light/dark modes
  • Focus: Edit tools only, no changes to MarkdownRenderer or other components

Testing

  • Tests pass locally (make test - no new test failures)
  • Code is formatted (make format)
  • TypeScript compilation passes (npm run typecheck)
  • Lint issues resolved (only pre-existing unrelated errors remain)
  • Visual testing: diff highlighting displays correctly in both themes
  • Functionality testing: works in preview and expanded Edit tool states
  • Scope testing: only affects Edit tools, other message types unchanged

- Add SimpleDiffHighlighter component for color-coded diff display
- Add simpleDiffDetector utility for parsing diff content
- Enable diff highlighting in both preview and expanded states
- Preserve original Edit tool styling (font, spacing, layout)
- Support light/dark theme color schemes
- Only highlight content with +/- diff markers
- Focus: Edit tools only, no MarkdownRenderer changes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@BoQsc BoQsc marked this pull request as draft September 12, 2025 13:40
@BoQsc BoQsc marked this pull request as ready for review September 12, 2025 15:42
@BoQsc BoQsc marked this pull request as draft September 13, 2025 18:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant