diff --git a/apps/desktop/src/components/desktop-onboarding-overlay.tsx b/apps/desktop/src/components/desktop-onboarding-overlay.tsx index d3f12a71dff..f3eb8fc1a51 100644 --- a/apps/desktop/src/components/desktop-onboarding-overlay.tsx +++ b/apps/desktop/src/components/desktop-onboarding-overlay.tsx @@ -1,9 +1,11 @@ import { useStore } from '@nanostores/react' +import { useQuery } from '@tanstack/react-query' import { useEffect, useMemo, useRef, useState } from 'react' import { ModelPickerDialog } from '@/components/model-picker' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' +import { getGlobalModelOptions } from '@/hermes' import { Check, ChevronDown, @@ -660,6 +662,18 @@ function ConfirmingModelPanel({ // a familiar UI for users who'll see this picker again later. const [pickerOpen, setPickerOpen] = useState(false) + // Pull pricing + tier for the just-picked default so the confirm card + // shows the same $/Mtok + Free/Pro info the picker and CLI do. + const options = useQuery({ + queryKey: ['onboarding-model-options', flow.providerSlug], + queryFn: () => getGlobalModelOptions() + }) + const providerRow = options.data?.providers?.find( + p => String(p.slug).toLowerCase() === flow.providerSlug.toLowerCase() + ) + const price = providerRow?.pricing?.[flow.currentModel] + const freeTier = providerRow?.free_tier + return (
@@ -670,8 +684,25 @@ function ConfirmingModelPanel({
-

Default model

+
+

Default model

+ {freeTier === true && ( + + Free tier + + )} + {freeTier === false && ( + + Pro + + )} +

{flow.currentModel}

+ {price && (price.input || price.output) && ( +

+ {price.free ? 'Free' : `${price.input || '?'} in / ${price.output || '?'} out per Mtok`} +

+ )}