Redesign prompt area responsive layout to reduce clutter #272502
Description
Summary
Current prompt area is cluttered with too many visible controls, excessive truncation, and no room for new features. Implement responsive behavior across 3 breakpoints with collapsible components and reorganized layout.
Context
Users find the interface overwhelming with too many choices. We've hidden the mic icon due to space constraints, which isn't scalable as we add features.
Requirements
Responsive behavior:
- 3 breakpoints (Are there existing breakpoint values)
- Mode dropdown: Add icons for Agent, Plan, Edit, Ask
- Mode collapses to icon-only (no truncation) at smaller breakpoints
- Control order: Mode → Model → Tools (left to right)
- Mic icon: Always visible, inline with text area
Icon updates
- Agent: Currently Fluent Icon (just added to library)
- Ask: icon Name = comment
- Edit: Currently Fluent Icon (just added to library)
- Plan: icon Name = list-unordered
- Custom: icon Name = robot
NOTE: Icons will be moving to Fluent soon
Screen.Recording.2025-10-21.at.4.02.18.PM.mov
Medium breakpoint:
- Model dropdown becomes button flyout (popover)
- Flyout selection doesn't update button rest state
Error state:
- Mode auto-collapses to icon when error icon displays
Screen.Recording.2025-10-21.at.4.08.35.PM.mov
Tooltips:
- Enhanced tooltips with description footer
- Same content regardless of state
Screen.Recording.2025-10-21.at.4.10.02.PM.mov
Acceptance Criteria
- 3 breakpoints defined (coordinate with Eli)
- Mode dropdown has icons and collapses appropriately
- Controls reordered: Mode → Model → Tools
- Mic always visible, inline with text area
- Model becomes flyout at medium breakpoint
- Mode collapses when error icon shows
- Enhanced tooltips implemented
- Design matches Figma specs
Assets
Relevant issues
- 1e1bd82. (@eli-w-king work on Horizontal responsiveness)
- Centralize error notifications in VS Code prompt area for MCP servers #270446 (handed by central error indicator)
- Half pill shaped warning for MCP unclear to me #269018 (handed by central error indicator)
- Tools icon doesn't have visual indication if all/some/none tools are added #247566 (handled by hover)
- Agent mode: Overflow behavior isn't great #252164 (handled by responsiveness)
- Increase visual hierarchy of agent selection #277852
- Customize Key Binding for default Agent #277853
- Add Null State for User Generated Custom Agent Drop Down. #277562