Feat/design improvements and minor bug fixes#939
Merged
Conversation
Consecutive tool calls (Edit, Read, Grep, etc.) grouped inconsistently: - The group threshold was 3, so a run of only 2 calls stayed ungrouped while a run of 3 collapsed — making two back-to-back edits look different from three. - A run was broken by any interleaved message, including ones that render nothing (reasoning hidden when showThinking is off). Providers like Codex interleave hidden reasoning between tool calls, so visually continuous edits intermittently failed to group. Lower TOOL_GROUP_THRESHOLD to 2 and skip non-rendered messages when extending a run, so any 2+ consecutive same-tool calls collapse reliably. ChatMessagesPane now passes showThinking into groupConsecutiveTools.
Constrain both ChatMessagesPane content and ChatComposer to the same max-w-3xl centered column. Previously only the composer had a max-width, causing messages to fill the full width while the input stayed narrow, making them visually misaligned with large empty gutters on either side.
Rework the color system around warm neutrals and route hardcoded surfaces through theme tokens for consistency. - Theme tokens (index.css, ThemeContext): warm cream light mode and neutral charcoal dark mode, replacing the pure-white/blue-tinted palette; update PWA theme-color meta - Code blocks: soft grey background in light mode via oneLight/oneDark, and drop the Tailwind Typography <pre> shell that framed the highlighter in a dark box - Dropdowns/panels: convert CommandMenu, Quick Settings, and the JSON response block from hardcoded gray/slate to popover/muted/border tokens - Git panel: Publish button purple -> primary blue - Composer: drop top padding so the input sits flush with the thread
…nd modal - Composer: give the permission-mode and token-usage buttons a fixed h-8 so every bottom-toolbar control shares one height - CommandResultModal: replace the blue gradient header (gradient fill, glow blobs, blue eyebrow + icon chip) with a clean neutral header on popover/muted tokens
- MainContentTitle: truncate the session title with an ellipsis instead of horizontal-scrolling it - MessageComponent: use text-foreground for the provider logo chip so the currentColor Codex/OpenAI mark is visible on the light theme - MessageCopyControl: render the copy-format dropdown in a portal so it escapes the chat message's `contain: paint` clip box; anchor it to the trigger, flip above near the viewport bottom, close on scroll/resize
- Replace the purple provider-button colors, heading icon, and form submit button with the primary token (no purple in the MCP UI) - Portal the add/edit MCP server modal to document.body so its fixed overlay covers the full viewport, fixing the white band at the top caused by the Settings dialog's transformed tab content becoming the containing block
…he rest of the UI
Wrap ActivityIndicator in the same mx-auto max-w-3xl container as the text input so the "Analyzing…" label and Stop button stay within the input's boundaries instead of spanning the full window width.
Closed
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThe PR updates fonts and theme tokens, restyles auth and onboarding screens, removes chat display preferences, refactors chat scrolling and message rendering, and migrates code editor dark mode to the app theme context. ChangesDesign System and Shared UI Refresh
Auth and Onboarding UI Redesign
Chat Scroll, Messaging, and Command UI
Code Editor Theme Source Migration
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
This was
linked to
issues
Jun 30, 2026
Closed
Closed
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/chat/hooks/useChatSessionState.ts (1)
584-592: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick winCancel the delayed auto-scroll on session switches.
Line 591 schedules
scrollToBottom()200ms later, but that timeout is never cleared or revalidated. If the user navigates to another session before it fires, the callback runs against the newscrollContainerRefand snaps the wrong chat to the bottom.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/chat/hooks/useChatSessionState.ts` around lines 584 - 592, The delayed auto-scroll in reloadExternalMessages should be cancelled or guarded when the active session changes, because the setTimeout can fire after navigation and scroll the wrong chat. Update the useChatSessionState logic around reloadExternalMessages, isNearBottom, and scrollToBottom to store the timeout id and clear it on session switch/unmount, or recheck selectedSession.id before calling scrollToBottom so only the current session is affected.
🧹 Nitpick comments (1)
src/components/auth/view/SetupForm.tsx (1)
129-132: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAssociate the new requirements hint with the affected inputs.
This helper copy is only visual right now, so screen readers will not announce the username/password constraints when those fields receive focus. Please give the hint an
idand plumbaria-describedbythroughAuthInputFieldfor the relevant inputs.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/auth/view/SetupForm.tsx` around lines 129 - 132, The requirements hint in SetupForm is only visual, so it is not announced when the username and password inputs receive focus. Give the hint element an id in SetupForm, then update AuthInputField to accept and forward aria-describedby to the underlying input so the username and password fields can reference that hint. Make sure the relevant AuthInputField usages in the auth form pass that described-by id only for the affected inputs.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/auth/view/AuthErrorAlert.tsx`:
- Around line 13-15: The AuthErrorAlert component’s wrapper is only a styled
div, so screen readers may not announce new auth validation/API errors when
errorMessage changes. Update the outer element in AuthErrorAlert to expose the
message to assistive tech by adding role="alert" or an appropriate aria-live
setting on the wrapper, keeping the existing AlertCircle and error text
structure intact.
In `@src/components/auth/view/AuthInputField.tsx`:
- Around line 64-71: The password visibility toggle in AuthInputField should
remain keyboard-focusable; remove the tabIndex={-1} behavior from the toggle
button so the show/hide control can be reached in LoginForm and SetupForm. Keep
the existing button behavior and aria-label logic in AuthInputField, but ensure
the interactive control stays in the normal tab order.
In `@src/components/auth/view/AuthLoadingScreen.tsx`:
- Around line 17-27: The AuthLoadingScreen component no longer announces loading
status to assistive tech, so add a polite aria-live status region with sr-only
loading text around the current loading UI. Update AuthLoadingScreen and the
loading dots loop so the dots are marked decorative (for example, hidden from
screen readers) while the screen-reader text provides the actual loading
message.
In `@src/components/chat/view/ChatInterface.tsx`:
- Around line 367-374: The scroll-to-bottom control in ChatInterface is
icon-only and currently relies on title, which is not a reliable accessible
name. Update the button in ChatInterface so it has an explicit aria-label using
the same localized text, and mark ArrowDownIcon as decorative with aria-hidden
so screen readers announce the control correctly.
In
`@src/components/code-editor/view/subcomponents/markdown/MarkdownCodeBlock.tsx`:
- Line 55: The copy button in MarkdownCodeBlock is hidden for keyboard users
because it only becomes visible on hover, so restore a focus-visible state for
the button. Update the button styling in MarkdownCodeBlock to mirror the
chat-side Markdown component by making the control visible on
focus/focus-visible (and keep hover behavior intact), so tabbing to the copy
action always reveals it.
In `@src/components/main-content/view/subcomponents/MainContentTitle.tsx`:
- Around line 73-75: The session title in MainContentTitle is now truncated, so
users need a way to see the full value when it overflows. Update the <h2> that
renders getSessionTitle(selectedSession) to expose the complete session name via
a title attribute or equivalent tooltip/hover mechanism, keeping the existing
truncate styling while ensuring the full title is discoverable.
In `@src/components/onboarding/view/Onboarding.tsx`:
- Around line 179-181: The onboarding error container in Onboarding should
announce new validation/save failures to assistive tech instead of only
rendering visually. Update the div that wraps the errorMessage in the Onboarding
component to use an alert announcement mechanism such as role="alert" or
aria-live="assertive" so screen readers are notified when the message appears.
In `@src/components/onboarding/view/subcomponents/AgentConnectionCard.tsx`:
- Around line 41-46: The AgentConnectionCard status text is being truncated,
which can hide important provider errors or connected emails. Update the status
rendering in AgentConnectionCard so the full statusText remains accessible, for
example by adding a tooltip/title or similar hover/focus affordance while
keeping the existing truncated layout. Use the existing statusText and
title/status block in AgentConnectionCard to preserve the visible compact UI
without losing the full message.
In `@src/index.css`:
- Around line 129-131: The body block in src/index.css violates the current
Stylelint formatting rule because the new declaration is not separated by the
required blank line. Reformat the body rule so the existing `@apply` line and the
font-family declaration in the body selector follow the project's spacing
convention, keeping the body block compliant with Stylelint.
- Around line 966-995: The chat activity animation keyframes use from/to
selectors, but the repo’s Stylelint rules expect percentage-based keyframes.
Update chat-activity-enter and chat-activity-exit in the keyframes block to use
0%/65%/100% instead of from/to while keeping the same transform, opacity, and
filter values.
---
Outside diff comments:
In `@src/components/chat/hooks/useChatSessionState.ts`:
- Around line 584-592: The delayed auto-scroll in reloadExternalMessages should
be cancelled or guarded when the active session changes, because the setTimeout
can fire after navigation and scroll the wrong chat. Update the
useChatSessionState logic around reloadExternalMessages, isNearBottom, and
scrollToBottom to store the timeout id and clear it on session switch/unmount,
or recheck selectedSession.id before calling scrollToBottom so only the current
session is affected.
---
Nitpick comments:
In `@src/components/auth/view/SetupForm.tsx`:
- Around line 129-132: The requirements hint in SetupForm is only visual, so it
is not announced when the username and password inputs receive focus. Give the
hint element an id in SetupForm, then update AuthInputField to accept and
forward aria-describedby to the underlying input so the username and password
fields can reference that hint. Make sure the relevant AuthInputField usages in
the auth form pass that described-by id only for the affected inputs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 26bcd186-b0f8-44b1-890b-c50d8530ae96
📒 Files selected for processing (64)
index.htmlsrc/components/auth/view/AuthErrorAlert.tsxsrc/components/auth/view/AuthInputField.tsxsrc/components/auth/view/AuthLoadingScreen.tsxsrc/components/auth/view/AuthScreenLayout.tsxsrc/components/auth/view/LoginForm.tsxsrc/components/auth/view/SetupForm.tsxsrc/components/chat/hooks/useChatSessionState.tssrc/components/chat/types/types.tssrc/components/chat/utils/toolGrouping.tssrc/components/chat/view/ChatInterface.tsxsrc/components/chat/view/subcomponents/ActivityIndicator.tsxsrc/components/chat/view/subcomponents/ChatComposer.tsxsrc/components/chat/view/subcomponents/ChatMessagesPane.tsxsrc/components/chat/view/subcomponents/CommandMenu.tsxsrc/components/chat/view/subcomponents/CommandResultModal.tsxsrc/components/chat/view/subcomponents/LoadAllMessagesOverlay.tsxsrc/components/chat/view/subcomponents/Markdown.tsxsrc/components/chat/view/subcomponents/MessageComponent.tsxsrc/components/chat/view/subcomponents/MessageCopyControl.tsxsrc/components/chat/view/subcomponents/TokenUsageSummary.tsxsrc/components/code-editor/constants/settings.tssrc/components/code-editor/hooks/useCodeEditorSettings.tssrc/components/code-editor/view/CodeEditor.tsxsrc/components/code-editor/view/subcomponents/markdown/MarkdownCodeBlock.tsxsrc/components/code-editor/view/subcomponents/markdown/MarkdownPreview.tsxsrc/components/git-panel/view/GitPanelHeader.tsxsrc/components/main-content/view/MainContent.tsxsrc/components/main-content/view/subcomponents/MainContentTitle.tsxsrc/components/mcp/constants.tssrc/components/mcp/view/McpServers.tsxsrc/components/mcp/view/modals/McpServerFormModal.tsxsrc/components/onboarding/view/Onboarding.tsxsrc/components/onboarding/view/subcomponents/AgentConnectionCard.tsxsrc/components/onboarding/view/subcomponents/AgentConnectionsStep.tsxsrc/components/onboarding/view/subcomponents/GitConfigurationStep.tsxsrc/components/onboarding/view/subcomponents/OnboardingStepProgress.tsxsrc/components/quick-settings-panel/constants.tssrc/components/quick-settings-panel/types.tssrc/components/quick-settings-panel/view/QuickSettingsContent.tsxsrc/components/quick-settings-panel/view/QuickSettingsPanelHeader.tsxsrc/components/quick-settings-panel/view/QuickSettingsPanelView.tsxsrc/components/quick-settings-panel/view/QuickSettingsSection.tsxsrc/components/quick-settings-panel/view/QuickSettingsToggleRow.tsxsrc/components/settings/constants/constants.tssrc/components/settings/hooks/useSettingsController.tssrc/components/settings/types/types.tssrc/components/settings/view/Settings.tsxsrc/components/settings/view/tabs/AppearanceSettingsTab.tsxsrc/components/shell/view/Shell.tsxsrc/contexts/ThemeContext.jsxsrc/hooks/useUiPreferences.tssrc/i18n/locales/de/settings.jsonsrc/i18n/locales/en/settings.jsonsrc/i18n/locales/fr/settings.jsonsrc/i18n/locales/it/settings.jsonsrc/i18n/locales/ja/settings.jsonsrc/i18n/locales/ko/settings.jsonsrc/i18n/locales/ru/settings.jsonsrc/i18n/locales/tr/settings.jsonsrc/i18n/locales/zh-CN/settings.jsonsrc/i18n/locales/zh-TW/settings.jsonsrc/index.csstailwind.config.js
💤 Files with no reviewable changes (19)
- src/components/settings/types/types.ts
- src/i18n/locales/ja/settings.json
- src/i18n/locales/ru/settings.json
- src/i18n/locales/ko/settings.json
- src/components/quick-settings-panel/types.ts
- src/components/settings/view/Settings.tsx
- src/i18n/locales/zh-TW/settings.json
- src/i18n/locales/fr/settings.json
- src/i18n/locales/zh-CN/settings.json
- src/components/settings/constants/constants.ts
- src/i18n/locales/en/settings.json
- src/hooks/useUiPreferences.ts
- src/components/code-editor/constants/settings.ts
- src/i18n/locales/tr/settings.json
- src/components/settings/view/tabs/AppearanceSettingsTab.tsx
- src/i18n/locales/it/settings.json
- src/components/settings/hooks/useSettingsController.ts
- src/components/chat/types/types.ts
- src/i18n/locales/de/settings.json
This was
linked to
issues
Jun 30, 2026
…//github.com/siteboon/claudecodeui into feat/design-improvements-and-minor-bug-fixes
viper151
approved these changes
Jul 1, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #936, #937.
Supersedes #936
This pull request delivers a comprehensive visual and UX overhaul of the authentication screens, making them more modern, accessible, and consistent with the app’s branding. It introduces ambient backgrounds, improved input fields with icon support and password visibility toggles, enhanced error and loading states, and a more polished overall layout. Additionally, minor improvements and bugfixes are included for chat session state management.
Authentication UI/UX Redesign
AuthScreenLayoutandAuthLoadingScreen, including blurred color glows, grid overlays, and updated logo usage for a more modern and inviting look. [1] [2]AuthInputFieldto support optional icons, show/hide password toggles, and improved focus/hover/disabled states. Updated all usages inLoginFormandSetupFormto use relevant icons (User,Lock,ShieldCheck). [1] [2] [3] [4] [5] [6]AuthErrorAlertwith a more prominent style and icon, improving accessibility and clarity. [1] [2]AuthLoadingScreen,LoginForm, andSetupFormwith improved visuals, animated spinners, and better feedback for users. [1] [2] [3]Typography and Branding
Encode Sansfor UI,Merriweatherfor chat) inindex.htmlfor improved typography and brand consistency.Bugfixes and Minor Improvements
useChatSessionState. [1] [2] [3] [4]These changes result in a more polished, user-friendly authentication flow that better matches the overall product design and improves the user experience.
Summary by CodeRabbit