[Feature Proposal] Several UI improvements built with Claude Code CLI — interested in a PR?

[szmidtpiotr]

Hi!

I want to be upfront: I'm not a professional developer — I'm a regular user of Claude Code UI who's been using Claude Code CLI (the AI coding assistant) to build improvements on top of your project. I've been running my own fork and ended up with a few features I think others might find useful too.

I read your contributing guidelines and wanted to check with you first before opening a PR, since these are non-trivial additions.
What I've built:

1. Multi-window sync & bidirectional session rename
   Multiple open browser tabs now stay in sync via WebSocket broadcast
   When you rename a session in the Web UI, it writes the custom title back to the JSONL file — so the CLI /resume command sees it too
   When you rename via CLI /rename, the Web UI picks it up on the next file sync
   Session list filtering: agent sidechain files and internal TaskMaster sessions are hidden

2. Usage tracking (ContextUsagePill)
   A combined pill in the chat toolbar showing context window usage % and Claude.ai subscription usage %
   Hover/click popup with full details
   Includes a collapsible guide on how to set up your Claude session key

3. Toolbar redesign + ThinkingMode selector
   Reordered toolbar for better flow
   ThinkingMode selector redesigned as a labeled pill with color-coded background per mode
   Mobile: toolbar labels always visible, consistent button styling

4. Audio notifications
   Completion sounds with per-event toggles in settings

5. Slash commands forwarded to CLI
   Arbitrary CLI slash commands can be sent from the Web UI

6. Compact summary rendering
   isCompactSummary messages rendered as collapsible pills instead of cluttering the chat

All of this was built collaboratively with Claude Code CLI — I described what I wanted, Claude wrote the code, I tested it. So the code quality should be solid, but I wanted to be transparent about how it was made.

Happy to open a PR if you're interested. Also happy to split it into separate PRs per feature if that's easier to review.

Thanks for building this tool — it's been a great base to work from I was looking for some time!
Piotr Szmidt

[coderabbitai]

🔗 Related PRs

#218 - feat: UI updates to ChatInterface component and global styles. Changi… [merged]
#222 - feat(chat): add CLAUDE.md support [merged]
#223 - Feature/cli commands [merged]
#227 - feat(projects): add project creation wizard with enhanced UX [merged]
#289 - Add inline permission grant for Claude tool errors [merged]
#311 - Add loading progress indicator [merged]
#477 - style: improve UI for processing banner [merged]
#738 - Fix codex websocket issue [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[chrisbeardy]

these are great addiytions

[blackmammoth]

Hey @szmidtpiotr, thanks for the detailed explanations. We would love to review the PR. However, make sure to send it in small pr chunks as it'll be difficult to test a huge PR.

[szmidtpiotr]

Please give me a few days I'll finish next batch and send you all in small chunks