release/v5.5.9

[code-crusher]

No description provided.

[matter-ai-bot]

Context

Summary By MatterAI

🔄 What Changed

Updated the extension version to 5.5.9 and introduced a visual "Monthly Usage" progress bar in the BottomApiConfig and KiloCode settings components to track resource consumption.

🔍 Impact of the Change

Improves user transparency regarding plan limits by providing a clear, real-time visual indicator of monthly usage percentages and remaining code reviews.

📁 Total Files Changed

Click to Expand

File	ChangeLog
Version Bump src/package.json	Incremented extension version to 5.5.9.
Cleanup Types src/shared/WebviewMessage.ts	Removed redundant whitespace in message definitions.
Usage UI webview-ui/src/components/kilocode/BottomApiConfig.tsx	Added usage percentage logic and progress bar rendering.
Provider UI webview-ui/src/components/kilocode/settings/providers/KiloCode.tsx	Integrated usage progress bar into the KiloCode provider settings view.

🧪 Test Added/Recommended

Recommended

• Unit tests for usagePercentage calculation logic with null/undefined profileData inputs.
• UI regression tests for the progress bar width calculation using Math.min(usagePercentage, 100).

🔒 Security Vulnerabilities

N/A

Implementation

The implementation calculates usagePercentage from the profileData object. It uses a CSS color-mix for the progress bar background and dynamically sets the width of the progress indicator, capped at 100% using Math.min. The UI components were updated to include these new visual elements alongside existing plan information.

Screenshots

before	after
N/A	Usage progress bar visible in API config and settings

How to Test

• Open the VS Code extension and navigate to the KiloCode settings or the Bottom API configuration.
• Ensure profileData is populated from the backend.
• Verify that the "Monthly Usage" progress bar correctly reflects the percentage provided by the API.
• Check that the "Monthly Code Reviews" count is formatted correctly.

Get in Touch

N/A

⏳ Estimated code review effort

LOW (~8 minutes)

Tip

Quality Recommendations

1. Extract the progress bar UI into a shared reusable component to avoid code duplication between BottomApiConfig.tsx and KiloCode.tsx

2. Add a utility function for the usage percentage calculation to ensure consistent handling of null/undefined values across the app

♫ Tanka Poem

Version numbers rise, 📈
Usage bars now fill the screen, 📊
Clear for all to see.
Metrics mapped in shades of blue, 💙
Code reviews flow fast and true. ✨

Sequence Diagram

sequenceDiagram
    participant UI as Webview UI
    participant State as profileData
    participant Logic as Usage Logic

    UI->>State: Access profileData
    State-->>UI: usagePercentage, plan, remainingReviews
    UI->>Logic: Calculate usagePercentage ?? null
    Logic-->>UI: usageValue
    Note over UI: Render Progress Bar
    UI->>UI: Math.min(usageValue, 100)
    UI-->>UI: Display % and Progress Bar

Loading

[matter-ai-bot]

🧪 PR Review is completed: The PR successfully implements the usage percentage visualization. A minor edge-case improvement is suggested to ensure CSS validity if the usage percentage is ever negative.

⬇️ Low Priority Suggestions (2)

webview-ui/src/components/kilocode/BottomApiConfig.tsx (1 suggestion)

Location: webview-ui/src/components/kilocode/BottomApiConfig.tsx (Lines 148-148)

🟡 Edge Case Handling

Issue: If usagePercentage is negative (e.g., due to credit adjustments or backend anomalies), Math.min(usagePercentage, 100) will return a negative number, resulting in an invalid CSS width property (e.g., width: -5%).

Fix: Clamp the value with Math.max(0, ...) to ensure the width is always a valid positive percentage.

Impact: Prevents invalid CSS and potential rendering issues for edge-case data.

-  													style={{ width: `${Math.min(usagePercentage, 100)}%` }}
+  													style={{ width: `${Math.max(0, Math.min(usagePercentage, 100))}%` }}

webview-ui/src/components/kilocode/settings/providers/KiloCode.tsx (1 suggestion)

Location: webview-ui/src/components/kilocode/settings/providers/KiloCode.tsx (Lines 169-169)

🟡 Edge Case Handling

Issue: If usagePercentage is negative (e.g., due to credit adjustments or backend anomalies), Math.min(usagePercentage, 100) will return a negative number, resulting in an invalid CSS width property (e.g., width: -5%).

Fix: Clamp the value with Math.max(0, ...) to ensure the width is always a valid positive percentage.

Impact: Prevents invalid CSS and potential rendering issues for edge-case data.

-  												style={{ width: `${Math.min(usagePercentage, 100)}%` }}
+  												style={{ width: `${Math.max(0, Math.min(usagePercentage, 100))}%` }}