[BUG] Rate limiting messages are shown as API errors in webview

[rossdonald]

Problem (one or two sentences)

The rate limiting messages that used to just show a countdown are now shown within the error details and are classified as errors.

Instead of showing the countdown till the request it shows:
API Error - Unknown API error. Please contact Roo Code support.
Clicking the Error details info icon shows: Rate limiting for 4 seconds...

Listed in the errors:

Roo-Code/webview-ui/src/components/chat/ErrorRow.tsx

Line 58 in c3a4d14

| "api_req_retry_delayed"

Uses error title

Roo-Code/webview-ui/src/components/chat/ErrorRow.tsx

Lines 126 to 127 in c3a4d14

	case "api_req_retry_delayed":
	return t("chat:apiRequest.errorTitle", { code: code ? ` · ${code}` : "" })

Uses failure message

Roo-Code/webview-ui/src/components/chat/ChatRow.tsx

Lines 1089 to 1090 in c3a4d14

	case "api_req_retry_delayed":
	let body = t(`chat:apiRequest.failed`)

Context (who is affected and when)

Users who use APIs with rate limits

Reproduction steps

1. Go to settings > Providers
2. Open Advanced Settings
3. Set Rate Limit to 10s
4. Make requests

Expected result

Shows countdown to next request

Actual result

Shows API error

Variations tried (optional)

Tried different models, same behaviour

App Version

3.36.13

API Provider (optional)

Google Gemini

Model Used (optional)

gemini-3-flash-preview OR glm4.6

Roo Code Task Links (optional)

No response

Relevant logs or errors (optional)

[roomote]

I've analyzed this issue and here's my proposed implementation plan:

Root Cause Analysis

The issue occurs in webview-ui/src/components/chat/ChatRow.tsx in the api_req_retry_delayed case handler (lines 1089-1151). When the backend sends rate limiting messages with the format Rate limiting for X seconds... (from src/core/task/Task.ts lines 3648-3652), the frontend's message parsing logic doesn't recognize this pattern.

The current code checks for:

1. Claude Code authentication errors
2. HTTP status codes (400+) at the start of the message
3. "Connection error" at the start

Rate limiting messages don't match any of these patterns, so they fall through to:

body = t("chat:apiRequest.errorMessage.unknown")
docsURL = "mailto:support@roocode.com?subject=Unknown API Error"

Proposed Solution

Add a check for rate limiting messages before the "unknown error" fallback in the api_req_retry_delayed case:

} else if (message.text.startsWith("Rate limiting for")) {
    // User-configured rate limiting - show as informational, not an error
    body = message.text
    // No docsURL needed - this is expected behavior based on user settings
}

This approach:

1. Detects rate limiting messages by checking if they start with "Rate limiting for"
2. Displays the original countdown message directly to the user (e.g., "Rate limiting for 4 seconds...")
3. Doesn't set a docsURL since this isn't an error condition
4. Keeps the existing retryInfo countdown indicator that shows the timer

Files to Modify

• webview-ui/src/components/chat/ChatRow.tsx - Add rate limiting message detection in the api_req_retry_delayed case

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.

[rossdonald]

Proposed Solution

Add a check for rate limiting messages before the "unknown error" fallback in the api_req_retry_delayed case:

} else if (message.text.startsWith("Rate limiting for")) {
// User-configured rate limiting - show as informational, not an error
body = message.text
// No docsURL needed - this is expected behavior based on user settings
}

@roomote This is not a very good solution because it still displays the red API error text, icon and error details. It simply just shows the countdown within the error row. It really needs to be a separate component, which is just a simple countdown. Do not implement a solution but propose a different solution.

[roomote]

Thanks for the feedback @rossdonald. You're right - the previous solution would still use the error-styled component, just with different text content.

Revised Proposed Solution

Create a dedicated RateLimitCountdown component that renders a simple, non-error countdown indicator for user-configured rate limiting.

Changes Required

1. Create a new component: webview-ui/src/components/chat/RateLimitCountdown.tsx

A lightweight countdown component with informational (neutral) styling:

• Small clock or timer icon (not error icon)
• Muted/gray text styling (not red error text)
• Just shows: "Rate limiting: Xs" with a countdown
• Optionally animated countdown indicator

2. Modify ChatRow.tsx in the api_req_retry_delayed case:

case "api_req_retry_delayed":
  // Check if this is user-configured rate limiting (not an API error)
  if (message.text?.startsWith("Rate limiting for")) {
    // Extract countdown from message text
    const match = message.text.match(/Rate limiting for (\d+) seconds/)
    const countdown = match ? parseInt(match[1], 10) : 0
    return <RateLimitCountdown seconds={countdown} />
  }
  
  // Existing error handling logic for actual API errors...

Why This Approach

1. Clean separation: Rate limiting is treated as expected behavior with its own UI, while actual API errors continue using ErrorRow
2. Better UX: Users see an informational countdown instead of alarming red error text
3. Minimal backend changes: No changes needed to Task.ts - the frontend just interprets the existing message differently
4. Consistent with user expectations: The message type "Rate limiting for X seconds..." clearly indicates user-configured behavior, not an error

Alternative Consideration

If we want even cleaner separation, we could add a new message type api_req_rate_limited on the backend to distinguish user-configured rate limiting from error-based retries. This would make the frontend logic cleaner but requires backend changes.

Let me know if you'd like me to proceed with implementing this approach!

[mrubens]

@roomote yeah please try that last suggestion

[roomote]

I have seen the comment and will proceed with implementing the revised solution - creating a dedicated RateLimitCountdown component with informational styling instead of error styling. I will open a PR to share progress.

[roomote]

Opened a PR with my attempt at addressing this: #10406

The implementation creates a dedicated RateLimitCountdown component with informational styling (clock icon, muted text) that replaces the error display when user-configured rate limiting is detected.

Feedback welcome!