Add provider-based grouping (accordion) to model picker for better model discovery

Bắt đầu bằng việc xem xét model-picker-mockup.html và github-copilot-model-picker-improvement.md, sau đó đánh giá cách việc nhóm provider được đề xuất phù hợp với codebase của tiện ích Copilot. Công việc được xem là hoàn tất khi có thiết kế khả thi cho các phần provider có thể thu gọn, số lượng model, tương tác bàn phím có khả năng truy cập, hiệu ứng animation, khả năng duy trì lựa chọn và việc xác thực thông qua các bước UX và user-testing được đề xuất.

Feature Request: GitHub Copilot Model Picker Provider Grouping

Summary

Request to improve the GitHub Copilot model picker UI by adding provider-based grouping (accordion/submenu) to reduce cognitive load and improve discoverability of AI models.

Problem

Current model picker displays all models in a flat, ungrouped list. As the number of providers and models grows, users experience:

• Difficulty scanning for models from specific providers
• Increased cognitive load remembering which provider offers which model
• Poor scalability with growing model catalog

Proposed Solution

Implement provider-based grouping using an accordion-style interface:

• Each provider (OpenAI, Anthropic, Google, NVIDIA, etc.) as a collapsible section
• Section headers show provider name and model count
• Click header to expand/collapse provider's models
• Visual indicators for expand/collapse state
• Smooth animations for better UX

Benefits

• Faster model selection: Users can quickly navigate to their preferred provider
• Reduced cognitive load: Provider context is immediately visible
• Better scalability: Interface remains usable as more providers/models are added
• Improved discoverability: Logical grouping matches how users conceptualize AI models

Mockup Reference

See model-picker-mockup.html for visual implementation example showing:

• Provider sections with expand/collapse icons
• Model lists that slide open/closed using transform/scale (layout-performance safe)
• Selection states and hover effects
• Responsive width suitable for dropdown/popup context

Implementation Notes

• Uses opacity and transform for animations (avoids layout thrashing)
• System font stack for native platform feel
• Keyboard accessible design (expand/collapse via Enter/Space)
• Selection persistence considerations

Suggested Next Steps

1. Design review with GitHub Copilot UX team
2. Technical feasibility assessment
3. Prototyping in Copilot extension codebase
4. User testing with developer audience
5. A/B testing against current flat-list implementation

Files

• github-copilot-model-picker-improvement.md: Detailed design plan
• model-picker-mockup.html: Visual mockup with working interactions
• This file: Executive summary for stakeholder consumption

---

Submitted via GitHub Copilot feedback channel
Date: 2026-08-09

Mockup & full plan gist: https://gist.github.com/mcfuryamen/1e194890e70e444d90d605126da04951