Visually distinguish plan mode from chat mode in composer

[Xisisrefliel]

What Changed

Updated the composer container's border and send button styling in ChatView.tsx to visually distinguish "plan" mode from "chat" mode:

• Composer border: focused state uses border-amber-500/45 in plan mode, border-ring/45 in chat mode (unfocused remains border-border in both)

• Send button: uses bg-amber-500/90 in plan mode, bg-primary/90 in chat mode

Why

When the composer is in plan mode, there is no visual cue on the composer itself to indicate the active interaction mode. Adding an amber accent to the border and send button provides immediate, at-a-glance feedback so users don't accidentally send messages in the wrong mode.

UI Changes

Before	After

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Note

Visually distinguish plan mode from chat mode in the composer

• Adds a 'Plan' badge above the composer and applies ring-plan amber color tokens to the focus ring, drag-over border, and send button when interactionMode === 'plan'.
• Introduces a --ring-plan CSS color token (amber-500) in index.css to support plan-specific styling.
• Removes the inline Chat/Plan toggle button from the input bar in ChatView.tsx.

^{Macroscope summarized 45a7d5e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 2ee5b1cf-521f-4f29-93d8-018e290efaa8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[juliusmarminge]

i like this direction, wanted to do something like this myself. personally I think the button should go entirely, jsut have the slash command for it.

not entirely sure on the amber color, feels a bit off but also not sure off a better one.

additionally might be cool to have a box or something like this to add an explanation of the changed border?

[Xisisrefliel]

Does this look good/better? @juliusmarminge
Also removed the button.

On focus:

Not focused:

[Noojuno]

I think the button should go entirely, jsut have the slash command for it.

@juliusmarminge I think the Plan button would be pretty useful for wider adoption of T3 Code.

Part of my role at work (I work in a DevEx team in a large org) is evangelizing and encouraging adoption of tooling, with a big focus on AI tooling atm.

One thing I've noticed is that there are a lot of devs that won't actually know that functionality exists unless it's very obvious, particularly if they're a bit hesitant around AI/agentic development in general.

We have run into similar stuff with Cursor (devs at my org use Cursor or Claude Code at a 50/50 split) where unless new features are very obvious, people will often not even try to use it. Don't even get me started on Claude Code and the nightmare that is onboarding these devs into the terminal!

You can sort of see an example of it with T3 Code already in #687, where there was a ticket raised to add an integrated terminal because it's hidden behind a keyboard shortcut.

[juliusmarminge]

will think on it more. thank you @Xisisrefliel for now, will get back to you on this