feat: add GitHub-style diff stats display to task header

[kiloconnect]

Summary

Adds a GitHub-style diff stats display to the task header showing the number of lines added and removed by the current task. The UI updates in real-time as the user accepts file changes.

Changes

New Files

• webview-ui/src/components/ui/hooks/kilocode/useTaskDiffStats.ts: Custom React hook that aggregates diff stats from all accepted file operations in the task's message history
• webview-ui/src/components/kilocode/DiffStatsDisplay.tsx: GitHub-style component displaying "+X −Y" with proportional colored boxes (green for additions, red for deletions)
• webview-ui/src/components/ui/hooks/__tests__/useTaskDiffStats.spec.ts: Comprehensive tests for the hook
• webview-ui/src/components/kilocode/__tests__/DiffStatsDisplay.spec.tsx: Tests for the display component

Modified Files

• webview-ui/src/components/kilocode/KiloTaskHeader.tsx: Integrated the diff stats display in both collapsed and expanded states
• webview-ui/src/i18n/locales/en/chat.json: Added "Changes" translation key

How It Works

1. The useTaskDiffStats hook iterates through clineMessages and filters for answered tool requests that have diff stats
2. It aggregates added and removed counts from both single file operations and batch operations (batchDiffs)
3. The DiffStatsDisplay component renders the stats with:
   • Green text for additions ("+X")
   • Red text for deletions ("−Y")
   • 5 proportional boxes showing the add/remove ratio
   • Tooltip with detailed breakdown

Visual Example

The display looks like: +8 −4 ■■■■□ where:

• 4 green boxes represent additions
• 1 red box represents deletions
• Empty boxes fill the remaining space

Testing

• Added unit tests for the hook covering empty messages, single operations, multiple operations, batch diffs, and edge cases
• Added component tests for rendering, tooltip behavior, and box calculation

[changeset-bot]

🦋 Changeset detected

Latest commit: 88511ba

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
kilo-code	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[kiloconnect]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Overview

This PR adds a GitHub-style diff stats display component that shows lines added/removed in real-time during task execution. The implementation is clean, well-tested, and follows project best practices.

Highlights:

• ✅ Properly memoized component with memo() and useMemo for performance
• ✅ Comprehensive test coverage for both component and hook
• ✅ Handles edge cases gracefully (empty arrays, invalid JSON, null values)
• ✅ Uses Tailwind CSS classes as per project guidelines
• ✅ Good accessibility with aria-hidden on decorative elements
• ✅ Proper TypeScript types throughout
• ✅ Changeset included with appropriate patch version bump

Files Reviewed (6 files)

• .changeset/task-diff-stats-display.md - Changeset file
• webview-ui/src/components/kilocode/DiffStatsDisplay.tsx - New diff stats display component
• webview-ui/src/components/kilocode/__tests__/DiffStatsDisplay.spec.tsx - Component tests
• webview-ui/src/components/ui/hooks/kilocode/useTaskDiffStats.ts - Hook to aggregate diff stats
• webview-ui/src/components/ui/hooks/__tests__/useTaskDiffStats.spec.ts - Hook tests
• webview-ui/src/i18n/locales/en/chat.json - Added "changes" translation key