Problem
In the Usage page AI Provider table, the Health column after Cache Rate does not visually distinguish provider health levels clearly enough. A provider or bucket around 99% health and one around 50% health can be rendered with the same color.
Affected UI
Usage page -> AI Provider tab -> table row -> Health column, immediately after Cache Rate.
The row wiring is in web/src/components/usage/credentials/AiProviderCredentialsSection.tsx. Cache Rate is rendered in the metrics group, and the following Health column is rendered through CredentialHealthPanel.
Relevant locations:
- web/src/components/usage/credentials/AiProviderCredentialsSection.tsx:56-62 renders Total Requests, Success Rate, Total Tokens, Cache Rate, then Health.
- web/src/components/usage/credentials/CredentialHealthPanel.tsx:284-287 computes bucketRate but chooses state through credentialHealthBucketState.
- web/src/components/usage/credentials/CredentialHealthPanel.tsx:301-311 maps any bucket with both success and failure to warning.
- web/src/components/usage/credentials/CredentialSections.module.scss:421-424 maps every warning bucket to the same yellow color.
Root Cause
CredentialHealthPanel computes each health block's displayed percentage, but the visual state ignores the actual percentage when choosing the color.
Current behavior:
- no requests -> empty
- failures == 0 -> success
- successes == 0 -> failure
- successes > 0 and failures > 0 -> warning
Because of this, any bucket with both success and failure becomes warning regardless of whether the actual success rate is 99%, 80%, or 50%. CSS then renders every warning bucket with the same color, so 99% and 50% can look equivalent.
Expected Behavior
The AI Provider Health column should make health differences visually obvious:
- near-perfect health such as 99% should look clearly healthy or near-healthy;
- degraded health such as 50% should be visibly worse;
- color, height, or tone should be based on success-rate thresholds or a gradient, not only on whether failures exist.
Problem
In the Usage page AI Provider table, the Health column after Cache Rate does not visually distinguish provider health levels clearly enough. A provider or bucket around 99% health and one around 50% health can be rendered with the same color.
Affected UI
Usage page -> AI Provider tab -> table row -> Health column, immediately after Cache Rate.
The row wiring is in web/src/components/usage/credentials/AiProviderCredentialsSection.tsx. Cache Rate is rendered in the metrics group, and the following Health column is rendered through CredentialHealthPanel.
Relevant locations:
Root Cause
CredentialHealthPanel computes each health block's displayed percentage, but the visual state ignores the actual percentage when choosing the color.
Current behavior:
Because of this, any bucket with both success and failure becomes warning regardless of whether the actual success rate is 99%, 80%, or 50%. CSS then renders every warning bucket with the same color, so 99% and 50% can look equivalent.
Expected Behavior
The AI Provider Health column should make health differences visually obvious: