new-api/docs/superpowers/specs/2026-05-08-cascading-channel-model-selector-design.md

created	status
2026-05-08	approved

Cascading Channel-Model Selector for User Ratio

Goal

Improve the “Add Ratio” modal in UserRatioSection: select channel first, then pick a model from that channel’s supported models via dropdown instead of manual text input.

Scope

Single file: web/src/components/table/users/modals/UserRatioSection.jsx

No backend changes — the existing /api/channel/ endpoint already returns the models field (comma-separated string) for each channel.

Design

Data flow

1. loadChannels() fetches channel list, stores two things:
   • channelOptions: [{ label, value }] for the channel dropdown (existing)
   • channelMap: { [channelId]: channelObject } for looking up models by channel ID (new)
2. When user selects a channel in the form:
   • Parse channel.models by comma into an array
   • Set modelOptions to [{ label: model, value: model }] for each model
   • Clear any previously selected model value
3. Model dropdown uses modelOptions with filter and showClear, disabled when no channel is selected

Form field order

1. Channel (Select, with search) — existing
2. Model (Select, with search) — changed from Input to Select
3. Ratio (InputNumber) — existing

What does NOT change

• Backend API and data model
• Table columns and display
• Submit payload format (model_name, channel_id, ratio)