Repository: supabase/supabase
File: apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx (TypeScript)

Code before:
  CommandItem_Shadcn_,
  CommandList_Shadcn_,
  Command_Shadcn_,
  PopoverContent_Shadcn_,
  PopoverTrigger_Shadcn_,
  Popover_Shadcn_,
  TooltipContent,
  TooltipTrigger,
  Tooltip,
} from 'ui'

interface ModelSelectorProps {
  selectedModel: 'gpt-5' | 'gpt-5-mini'
  onSelectModel: (model: 'gpt-5' | 'gpt-5-mini') => void
}

export const ModelSelector = ({ selectedModel, onSelectModel }: ModelSelectorProps) => {
  const router = useRouter()
  const { data: organization } = useSelectedOrganizationQuery()

  const [open, setOpen] = useState(false)

  const canAccessProModels = organization?.plan?.id !== 'free'
  const slug = organization?.slug ?? '_'

  const upgradeHref = `/org/${slug ?? '_'}/billing?panel=costControl&source=ai-assistant-model`

  const handleSelectModel = (model: 'gpt-5' | 'gpt-5-mini') => {
    if (model === 'gpt-5' && !canAccessProModels) {
      setOpen(false)
      void router.push(upgradeHref)
      return
    }

    onSelectModel(model)
    setOpen(false)
  }

  return (
    <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
      <PopoverTrigger_Shadcn_ asChild>
        <Button
          type="outline"
          className="text-foreground-light"
          iconRight={<ChevronsUpDown strokeWidth={1} size={12} />}
        >
          {selectedModel}
        </Button>
      </PopoverTrigger_Shadcn_>
      <PopoverContent_Shadcn_ className="p-0 w-44" align="start" side="top">
        <Command_Shadcn_>

Review comment (suggestion):
```suggestion
  const upgradeHref = `/org/${slug ?? '_'}/billing?source=ai-assistant-model`
```

This opens the cost control side panel, whereas the upgrade subscription plan button is on the main page

Code after:
  CommandItem_Shadcn_,
  CommandList_Shadcn_,
  Command_Shadcn_,
  PopoverContent_Shadcn_,
  PopoverTrigger_Shadcn_,
  Popover_Shadcn_,
  TooltipContent,
  TooltipTrigger,
  Tooltip,
} from 'ui'

interface ModelSelectorProps {
  selectedModel: 'gpt-5' | 'gpt-5-mini'
  onSelectModel: (model: 'gpt-5' | 'gpt-5-mini') => void
}

export const ModelSelector = ({ selectedModel, onSelectModel }: ModelSelectorProps) => {
  const router = useRouter()
  const { data: organization } = useSelectedOrganizationQuery()

  const [open, setOpen] = useState(false)

  const canAccessProModels = organization?.plan?.id !== 'free'
  const slug = organization?.slug ?? '_'

  const upgradeHref = `/org/${slug ?? '_'}/billing?panel=subscriptionPlan&source=ai-assistant-model`

  const handleSelectModel = (model: 'gpt-5' | 'gpt-5-mini') => {
    if (model === 'gpt-5' && !canAccessProModels) {
      setOpen(false)
      void router.push(upgradeHref)
      return
    }

    onSelectModel(model)
    setOpen(false)
  }

  return (
    <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
      <PopoverTrigger_Shadcn_ asChild>
        <Button
          type="outline"
          className="text-foreground-light"
          iconRight={<ChevronsUpDown strokeWidth={1} size={12} />}
        >
          {selectedModel}
        </Button>
      </PopoverTrigger_Shadcn_>
      <PopoverContent_Shadcn_ className="p-0 w-44" align="start" side="top">
        <Command_Shadcn_>