Model tier frontend: Add consumption rate display and model capability tooltip

[xinquiry]

Summary

The model tier selection UI in the frontend currently doesn't display consumption rates or model capabilities, making it difficult for users to understand the cost implications and available features of each tier.

Current State

• Model tier selector shows tier names (ULTRA, PRO, STANDARD, LITE) but no pricing information
• Users cannot see which models are available in each tier
• No indication of model capabilities (e.g., image generation support)

Proposed Changes

1. Display Consumption Rates

Show the tier multiplier rates next to each tier option:

Tier	Rate	Display
ULTRA	6.8x	"6.8x credits"
PRO	3.0x	"3.0x credits"
STANDARD	1.0x	"1.0x credits"
LITE	0.0x	"Free"

2. Add Info Tooltip (ℹ️)

Add an info icon next to each tier that shows on hover:

• Available models in the tier
• Model capabilities (text, image generation, code, etc.)
• Brief description of each model's strengths

Example tooltip content for PRO tier:

Available Models:
• gemini-3-pro-preview - Advanced reasoning and analysis
• gemini-2.5-flash-image - Image generation capable
• gpt-5.2 - General purpose with strong coding

Design Reference

┌─────────────────────────────────┐
│ Model Tier                      │
├─────────────────────────────────┤
│ ○ ULTRA (6.8x) ℹ️               │
│ ● PRO (3.0x) ℹ️                 │
│ ○ STANDARD (1.0x) ℹ️            │
│ ○ LITE (Free) ℹ️                │
└─────────────────────────────────┘

Technical Notes

• Tier rates are defined in service/app/schemas/model_tier.py (TIER_MODEL_CONSUMPTION_RATE)
• Model candidates per tier are in TIER_MODEL_CANDIDATES
• Frontend model tier selector is in the session/chat creation flow

Acceptance Criteria

• Consumption rate displayed next to each tier option
• Info icon (ℹ️ or !) added to each tier
• Hover tooltip shows available models and their capabilities
• LITE tier clearly marked as "Free"
• Responsive design for mobile view