Repository navigation
Use different border colors for "Plan" and "Chat" modes so its easier to differentiate #205
Description
Activity
- added a commit that references this issue
on Mar 9, 2026 I'd just add that the send button also change colors to match - looks a bit off having it stay blue. Otherwise love the change because I often accidentally send messages meaning to be in plan mode.
Plan and Build modes now use distinct icons and active-mode styling in the composer, so the mode is visually differentiated without relying on border color alone.
This was closed as part of a large repo-wide maintenance sweep. If you think it's still relevant, please reopen.
- added a commit that references this issue
on Oct 7, 2026
I used amber-500 but whatever color is fine ig.
Prompt:
In apps/web/src/components/ChatView.tsx, update the composer container's border styling to visually distinguish "plan" mode from "chat" mode when the composer is focused. Find the
Change the border logic so that:
focus-within:border-amber-500
Move the focus-within:border-ring from being unconditionally applied into the conditional so each mode gets its own focus border color.
The transition-colors duration-200 class already on the element handles smooth animation. interactionMode is already in scope — no new imports or variables needed.
Before:
After:
