Skip to content

style: improve UI for processing banner#477

Merged
viper151 merged 2 commits intomainfrom
style/improve-processing-status-banner
Mar 4, 2026
Merged

style: improve UI for processing banner#477
viper151 merged 2 commits intomainfrom
style/improve-processing-status-banner

Conversation

@blackmammoth
Copy link
Collaborator

@blackmammoth blackmammoth commented Mar 4, 2026

Processing banner UI now looks like this:

image

Summary by CodeRabbit

Release Notes

  • New Features
    • Rich Claude status card with provider badge, live/paused state, animated loading dots, and compact status line
    • Elapsed-time display to track generation duration
    • Optional Stop Generation control with Esc-key hint for interruption
    • Accessibility improvements for status announcements
    • Added localized strings for the new status UI (en, ja, ko, zh-CN)

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 4, 2026

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Replaces the simple Claude status spinner with a rich card-style ClaudeStatus UI (logo, live/paused badge, animated dots, elapsed-time label, optional abort control) and adds i18n keys for the new UI across English, Japanese, Korean, and Chinese locales.

Changes

Cohort / File(s) Summary
Component
src/components/chat/view/subcomponents/ClaudeStatus.tsx
Reimplemented status UI: provider logo, live/paused badge, animated dots, elapsed-time formatting, Esc/Stop control, accessibility attributes, i18n integration, animation config, and signature default provider = 'claude'. Removed legacy token/spinner logic.
i18n — English
src/i18n/locales/en/chat.json
Added top-level claudeStatus translations (actions, state, elapsed, controls, providers) used by the new component.
i18n — Japanese
src/i18n/locales/ja/chat.json
Added top-level claudeStatus translations (actions, state, elapsed, controls, providers).
i18n — Korean
src/i18n/locales/ko/chat.json
Added top-level claudeStatus translations (actions, state, elapsed, controls, providers).
i18n — Chinese (zh-CN)
src/i18n/locales/zh-CN/chat.json
Added top-level claudeStatus translations (actions, state, elapsed, controls, providers); inserted in two locations within the file.

Possibly related PRs

Suggested reviewers

  • viper151

Poem

🐰 I hopped to render status bright,
Logos, dots, and time in sight.
Translations stitched in every land,
A little stop button at my hand.
Hooray—Claude's badge now looks just right!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'style: improve UI for processing banner' directly aligns with the main changes, which redesigned the ClaudeStatus component UI from a simple spinner to a rich, card-like interface with provider logo, state badges, animated dots, and controls.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch style/improve-processing-status-banner

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/chat/view/subcomponents/ClaudeStatus.tsx`:
- Around line 118-159: The live region (role="status" aria-live="polite" in
ClaudeStatus.tsx) currently contains rapidly-updating UI (animatedDots and the
elapsed/timer display) which triggers noisy screen-reader announcements; fix by
removing these from the live region—either move the animated dots span
(animatedDots) and the elapsedLabel/timer out of the element with role="status"
or mark those elements with aria-hidden="true" (for example the span that
renders animatedDots and the element that renders elapsedLabel) so only
meaningful, infrequent status text (isLoading/cleanStatusText/providerLabel)
remains announced.
- Around line 28-33: The provider label translation should have a defensive
fallback so missing keys (e.g. messageTypes.gemini) don't render raw keys;
update the translation call(s) that use PROVIDER_LABEL_KEYS (the calls around
the current t(...) usage in ClaudeStatus.tsx) to pass a defaultValue (e.g. a
humanized provider name derived from the provider string or a capitalized
provider) so when i18n lookup fails it shows a usable label; ensure all
occurrences that reference PROVIDER_LABEL_KEYS (the lookup for
claude/codex/cursor/gemini) include this defaultValue fallback.

In `@src/i18n/locales/ja/chat.json`:
- Around line 209-235: The new claudeStatus localization entries are still in
English; update the values under "claudeStatus" (including all keys in
"actions": thinking, processing, analyzing, working, computing, reasoning;
"state": live, paused; "elapsed": seconds, minutesSeconds, label, startingNow;
"controls": stopGeneration, pressEscToStop; and "providers.assistant") to their
appropriate Japanese translations so the banner displays Japanese text for
Japanese users while preserving the same key names and interpolation
placeholders (e.g., {{count}}, {{minutes}}, {{seconds}}, {{time}}).

In `@src/i18n/locales/ko/chat.json`:
- Around line 218-244: Translate all English values under the claudeStatus
object to Korean while preserving interpolation tokens and keys; update
claudeStatus.actions (thinking, processing, analyzing, working, computing,
reasoning), claudeStatus.state (live, paused), claudeStatus.elapsed (seconds,
minutesSeconds, label, startingNow) and claudeStatus.controls (stopGeneration,
pressEscToStop) plus claudeStatus.providers.assistant with appropriate Korean
strings, keeping placeholders like {{count}}, {{minutes}}, {{seconds}}, and
{{time}} intact and not altering key names or punctuation.

In `@src/i18n/locales/zh-CN/chat.json`:
- Around line 218-244: The claudeStatus block in the zh-CN locale contains
English strings; update the values under the "claudeStatus" object to Simplified
Chinese for all keys so the processing banner and controls are translated.
Specifically translate the keys in claudeStatus.actions ("thinking",
"processing", "analyzing", "working", "computing", "reasoning"),
claudeStatus.state ("live", "paused"), claudeStatus.elapsed ("seconds",
"minutesSeconds", "label", "startingNow"), claudeStatus.controls
("stopGeneration", "pressEscToStop"), and claudeStatus.providers ("assistant")
to appropriate Simplified Chinese text while preserving the JSON keys and
interpolation placeholders like {{count}}, {{minutes}}, {{seconds}}, and
{{time}}.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c92ae4ee-1187-4e4c-84d1-2b04c07c13b3

📥 Commits

Reviewing files that changed from the base of the PR and between 453a145 and 62d0b9f.

📒 Files selected for processing (5)
  • src/components/chat/view/subcomponents/ClaudeStatus.tsx
  • src/i18n/locales/en/chat.json
  • src/i18n/locales/ja/chat.json
  • src/i18n/locales/ko/chat.json
  • src/i18n/locales/zh-CN/chat.json

Comment on lines +28 to +33
const PROVIDER_LABEL_KEYS: Record<string, string> = {
claude: 'messageTypes.claude',
codex: 'messageTypes.codex',
cursor: 'messageTypes.cursor',
gemini: 'messageTypes.gemini',
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, verify the file exists and examine the code at the specified lines
head -110 src/components/chat/view/subcomponents/ClaudeStatus.tsx | tail -80

Repository: siteboon/claudecodeui

Length of output: 2536


🏁 Script executed:

# Run the provided verification script to check locale coverage
#!/bin/bash
set -euo pipefail

python - <<'PY'
import json
import glob

required = ["claude", "cursor", "codex", "gemini"]

for path in sorted(glob.glob("src/i18n/locales/*/chat.json")):
    with open(path, "r", encoding="utf-8") as f:
        data = json.load(f)
    message_types = data.get("messageTypes", {})
    missing = [k for k in required if k not in message_types]
    if missing:
        print(f"{path}: missing messageTypes keys -> {', '.join(missing)}")
PY

Repository: siteboon/claudecodeui

Length of output: 131


🏁 Script executed:

# Check the structure of the messageTypes in one locale file to understand the format
cat src/i18n/locales/en/chat.json | jq '.messageTypes' | head -20

Repository: siteboon/claudecodeui

Length of output: 206


🏁 Script executed:

# Search for where PROVIDER_LABEL_KEYS is used, particularly around lines 98-101
grep -n "providerLabelKey\|PROVIDER_LABEL_KEYS" src/components/chat/view/subcomponents/ClaudeStatus.tsx

Repository: siteboon/claudecodeui

Length of output: 256


Add a defensive fallback for provider label translations.

The Japanese locale (src/i18n/locales/ja/chat.json) is missing the messageTypes.gemini key. Without a defaultValue in the translation call at line 100, the UI will render the literal key string "messageTypes.gemini" instead of a user-facing label when this provider is selected with that locale.

🛡️ Suggested hardening
 const PROVIDER_LABEL_KEYS: Record<string, string> = {
   claude: 'messageTypes.claude',
   codex: 'messageTypes.codex',
   cursor: 'messageTypes.cursor',
   gemini: 'messageTypes.gemini',
 };
+
+const PROVIDER_LABEL_FALLBACKS: Record<string, string> = {
+  claude: 'Claude',
+  codex: 'Codex',
+  cursor: 'Cursor',
+  gemini: 'Gemini',
+};
@@
   const providerLabelKey = PROVIDER_LABEL_KEYS[provider];
   const providerLabel = providerLabelKey
-    ? t(providerLabelKey)
+    ? t(providerLabelKey, {
+        defaultValue: PROVIDER_LABEL_FALLBACKS[provider] ?? 'Assistant',
+      })
     : t('claudeStatus.providers.assistant', { defaultValue: 'Assistant' });

Also applies to: 98-101

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/chat/view/subcomponents/ClaudeStatus.tsx` around lines 28 -
33, The provider label translation should have a defensive fallback so missing
keys (e.g. messageTypes.gemini) don't render raw keys; update the translation
call(s) that use PROVIDER_LABEL_KEYS (the calls around the current t(...) usage
in ClaudeStatus.tsx) to pass a defaultValue (e.g. a humanized provider name
derived from the provider string or a capitalized provider) so when i18n lookup
fails it shows a usable label; ensure all occurrences that reference
PROVIDER_LABEL_KEYS (the lookup for claude/codex/cursor/gemini) include this
defaultValue fallback.

Comment on lines +209 to 235
"claudeStatus": {
"actions": {
"thinking": "Thinking",
"processing": "Processing",
"analyzing": "Analyzing",
"working": "Working",
"computing": "Computing",
"reasoning": "Reasoning"
},
"state": {
"live": "Live",
"paused": "Paused"
},
"elapsed": {
"seconds": "{{count}}s",
"minutesSeconds": "{{minutes}}m {{seconds}}s",
"label": "{{time}} elapsed",
"startingNow": "Starting now"
},
"controls": {
"stopGeneration": "Stop Generation",
"pressEscToStop": "Press Esc anytime to stop"
},
"providers": {
"assistant": "Assistant"
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Localize the new claudeStatus entries for Japanese users.

The added status/action/control strings are English, which breaks expected Japanese localization in the new banner.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/i18n/locales/ja/chat.json` around lines 209 - 235, The new claudeStatus
localization entries are still in English; update the values under
"claudeStatus" (including all keys in "actions": thinking, processing,
analyzing, working, computing, reasoning; "state": live, paused; "elapsed":
seconds, minutesSeconds, label, startingNow; "controls": stopGeneration,
pressEscToStop; and "providers.assistant") to their appropriate Japanese
translations so the banner displays Japanese text for Japanese users while
preserving the same key names and interpolation placeholders (e.g., {{count}},
{{minutes}}, {{seconds}}, {{time}}).

Comment on lines +218 to +244
"claudeStatus": {
"actions": {
"thinking": "Thinking",
"processing": "Processing",
"analyzing": "Analyzing",
"working": "Working",
"computing": "Computing",
"reasoning": "Reasoning"
},
"state": {
"live": "Live",
"paused": "Paused"
},
"elapsed": {
"seconds": "{{count}}s",
"minutesSeconds": "{{minutes}}m {{seconds}}s",
"label": "{{time}} elapsed",
"startingNow": "Starting now"
},
"controls": {
"stopGeneration": "Stop Generation",
"pressEscToStop": "Press Esc anytime to stop"
},
"providers": {
"assistant": "Assistant"
}
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Provide Korean translations for claudeStatus strings.

The new keys are currently in English, so this locale will not render a localized processing banner.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/i18n/locales/ko/chat.json` around lines 218 - 244, Translate all English
values under the claudeStatus object to Korean while preserving interpolation
tokens and keys; update claudeStatus.actions (thinking, processing, analyzing,
working, computing, reasoning), claudeStatus.state (live, paused),
claudeStatus.elapsed (seconds, minutesSeconds, label, startingNow) and
claudeStatus.controls (stopGeneration, pressEscToStop) plus
claudeStatus.providers.assistant with appropriate Korean strings, keeping
placeholders like {{count}}, {{minutes}}, {{seconds}}, and {{time}} intact and
not altering key names or punctuation.

Comment on lines +218 to +244
"claudeStatus": {
"actions": {
"thinking": "Thinking",
"processing": "Processing",
"analyzing": "Analyzing",
"working": "Working",
"computing": "Computing",
"reasoning": "Reasoning"
},
"state": {
"live": "Live",
"paused": "Paused"
},
"elapsed": {
"seconds": "{{count}}s",
"minutesSeconds": "{{minutes}}m {{seconds}}s",
"label": "{{time}} elapsed",
"startingNow": "Starting now"
},
"controls": {
"stopGeneration": "Stop Generation",
"pressEscToStop": "Press Esc anytime to stop"
},
"providers": {
"assistant": "Assistant"
}
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Translate claudeStatus copy in the zh-CN locale.

All newly added values are English, so the processing banner remains untranslated for Simplified Chinese users.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/i18n/locales/zh-CN/chat.json` around lines 218 - 244, The claudeStatus
block in the zh-CN locale contains English strings; update the values under the
"claudeStatus" object to Simplified Chinese for all keys so the processing
banner and controls are translated. Specifically translate the keys in
claudeStatus.actions ("thinking", "processing", "analyzing", "working",
"computing", "reasoning"), claudeStatus.state ("live", "paused"),
claudeStatus.elapsed ("seconds", "minutesSeconds", "label", "startingNow"),
claudeStatus.controls ("stopGeneration", "pressEscToStop"), and
claudeStatus.providers ("assistant") to appropriate Simplified Chinese text
while preserving the JSON keys and interpolation placeholders like {{count}},
{{minutes}}, {{seconds}}, and {{time}}.

@viper151 viper151 self-requested a review March 4, 2026 17:46
@viper151 viper151 merged commit 2320e1d into main Mar 4, 2026
4 of 5 checks passed
SuperOuxx pushed a commit to SuperOuxx/coding-agent-ui that referenced this pull request Mar 5, 2026
@blackmammoth blackmammoth deleted the style/improve-processing-status-banner branch March 5, 2026 10:49
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.

3 participants