Chat mode vs. Code (</>) mode toggle is too small/low-contrast, easy to switch by mistake

### Preflight Checklist

- [x] I have searched [existing requests](https://github.com/anthropics/claude-code/issues?q=is%3Aissue%20label%3Aenhancement) and this feature hasn't been requested yet
- [x] This is a single feature request (not multiple features)

### Problem Statement

Type: UI/UX feedback

Thank you as always for your support and excellent product, Claude Team!
I hope this will reach out to you.

Description
The top-left toggle switches between "Chat" mode (speech-bubble icon) and "Code" mode ( icon), which have completely separate session/history lists. The toggle buttons are small and visually similar in weight/color, making it very easy to select the wrong mode without noticing.

What happened
I was in (Code) mode and didn't realize it. My chat history sidebar appeared empty, and I spent significant time troubleshooting it as a data-loss/sync bug (checking storage, comparing to claude.ai web, filing what I thought was a bug report) — when in fact nothing was lost; I was simply looking at the other mode's (separate, mostly-empty) session list.

Suggestion
Make the distinction between the two modes more intuitive/obvious, for example:

Larger, more visually distinct toggle buttons
A persistent label (e.g. "Chat" / "Code") next to the icon, not just an icon
A clear visual indicator (color, background, border) showing which mode is currently active
Possibly a brief tooltip or onboarding hint explaining the two are separate histories

Impact
Low severity (no data loss), but caused real user confusion and wasted troubleshooting time believing it was a bug.

I'm just a novice user but was lucky enough to find the solution myself, but others less familiar with switching between the two modes could easily fall into the same confusion.

### Proposed Solution

The interface should make it visually unambiguous which mode (Chat vs. Code) is currently active, for example:

- Add a persistent text label next to or below each icon ("Chat" / "Code"), not just an icon-only toggle.
- Make the buttons larger and give the active one a clearly distinct visual state (e.g. filled background, accent color, or underline) rather than a subtle color change on a small icon.
- Show the current mode's name somewhere persistent in the header/title area, so a glance confirms which mode's history you're looking at.
- Optionally, a brief tooltip on hover explaining that Chat and Code maintain separate, independent session histories.

This would prevent users from mistakenly believing their chat history was lost simply because they were viewing the other mode's (mostly empty) session list.

### Alternative Solutions

Currently, the only "workaround" is to carefully check which icon (speech bubble vs. ) is highlighted before assuming session history is missing — there's no way to resize, relabel, or otherwise make the toggle more distinct from within the app itself.

Other apps commonly avoid this ambiguity by using text-labeled tabs (e.g. "Chat" / "Code") instead of icon-only toggles, or by showing the current mode's name persistently in the header, so the active mode is unambiguous at a glance.

### Priority

Low - Nice to have

### Feature Category

Other

### Use Case Example

_No response_

### Additional Context

_No response_

No implementation files, tests, or entry points are named. Start by locating the Chat/Code mode toggle and reviewing how its active state and separate histories are presented. Done means the current mode is unambiguous at a glance and switching modes is less likely to happen unnoticed.

Written by the indexing model from the issue text.