diff --git a/.github/workflows/typecheck.yml b/.github/workflows/typecheck.yml
index fc9a52797c1d..5588276309cb 100644
--- a/.github/workflows/typecheck.yml
+++ b/.github/workflows/typecheck.yml
@@ -14,6 +14,11 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
 
+      - name: Setup Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        with:
+          node-version: "24"
+
       - name: Setup Bun
         uses: ./.github/actions/setup-bun
 
diff --git a/packages/app/src/components/dialog-select-model.tsx b/packages/app/src/components/dialog-select-model.tsx
index b4e8b3b719ca..1583c0c2ca3d 100644
--- a/packages/app/src/components/dialog-select-model.tsx
+++ b/packages/app/src/components/dialog-select-model.tsx
@@ -1,23 +1,160 @@
-import { Popover as Kobalte } from "@kobalte/core/popover"
-import { Component, ComponentProps, createMemo, JSX, Show, ValidComponent } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useLocal } from "@/context/local"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { popularProviders } from "@/hooks/use-providers"
-import { Button } from "@opencode-ai/ui/button"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tag } from "@opencode-ai/ui/tag"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { List } from "@opencode-ai/ui/list"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { ModelTooltip } from "./model-tooltip"
-import { useLanguage } from "@/context/language"
-import { decode64 } from "@/utils/base64"
+import { Popover as Kobalte } from '@kobalte/core/popover'
+import {
+  Component,
+  ComponentProps,
+  createMemo,
+  JSX,
+  Show,
+  ValidComponent,
+} from 'solid-js'
+import { createStore } from 'solid-js/store'
+import { useLocal } from '@/context/local'
+import { useDialog } from '@opencode-ai/ui/context/dialog'
+import { Button } from '@opencode-ai/ui/button'
+import { IconButton } from '@opencode-ai/ui/icon-button'
+import { Tag } from '@opencode-ai/ui/tag'
+import { Dialog } from '@opencode-ai/ui/dialog'
+import { List } from '@opencode-ai/ui/list'
+import { Tooltip } from '@opencode-ai/ui/tooltip'
+import { ModelTooltip } from './model-tooltip'
+import { useLanguage } from '@/context/language'
+import { decode64 } from '@/utils/base64'
 
 const isFree = (provider: string, cost: { input: number } | undefined) =>
-  provider === "opencode" && (!cost || cost.input === 0)
+  provider === 'opencode' && (!cost || cost.input === 0)
 
-type ModelState = ReturnType<typeof useLocal>["model"]
+const tierColor = {
+  frontier: 'var(--oc-tier-frontier)',
+  balanced: 'var(--oc-tier-balanced)',
+  performance: 'var(--oc-tier-performance)',
+}
+
+const tierOrder = {
+  frontier: 0,
+  balanced: 1,
+  performance: 2,
+}
+
+type ForgeModelTier = keyof typeof tierColor
+
+const forgeModelTiers = new Map<
+  string,
+  {
+    label: string
+    pricing: { inputPerMillion: number; outputPerMillion: number }
+    tier: ForgeModelTier
+  }
+>([
+  [
+    'anthropic:claude-opus-5',
+    {
+      label: 'Frontier · ~5× price',
+      pricing: { inputPerMillion: 5, outputPerMillion: 25 },
+      tier: 'frontier',
+    },
+  ],
+  [
+    'anthropic:claude-opus-4-8',
+    {
+      label: 'Frontier · ~5× price',
+      pricing: { inputPerMillion: 5, outputPerMillion: 25 },
+      tier: 'frontier',
+    },
+  ],
+  [
+    'openai:gpt-5.6-sol',
+    {
+      label: 'Frontier · ~5× price',
+      pricing: { inputPerMillion: 5, outputPerMillion: 30 },
+      tier: 'frontier',
+    },
+  ],
+  [
+    'anthropic:claude-sonnet-5',
+    {
+      label: 'Balanced · ~2× price',
+      pricing: { inputPerMillion: 3, outputPerMillion: 15 },
+      tier: 'balanced',
+    },
+  ],
+  [
+    'openai:gpt-5.6-terra',
+    {
+      label: 'Balanced · ~2× price',
+      pricing: { inputPerMillion: 2, outputPerMillion: 12 },
+      tier: 'balanced',
+    },
+  ],
+  [
+    'baseten:zai-org/GLM-5.2-Fast',
+    {
+      label: 'Balanced · ~2× price',
+      pricing: { inputPerMillion: 2.1, outputPerMillion: 6.6 },
+      tier: 'balanced',
+    },
+  ],
+  [
+    'baseten:moonshotai/Kimi-K3',
+    {
+      label: 'Balanced · ~2× price',
+      pricing: { inputPerMillion: 3, outputPerMillion: 15 },
+      tier: 'balanced',
+    },
+  ],
+  [
+    'openai:gpt-5.6-luna',
+    {
+      label: 'Performance',
+      pricing: { inputPerMillion: 0.2, outputPerMillion: 1.2 },
+      tier: 'performance',
+    },
+  ],
+  [
+    'baseten:zai-org/GLM-5.2-1M',
+    {
+      label: 'Performance',
+      pricing: { inputPerMillion: 1.4, outputPerMillion: 4.4 },
+      tier: 'performance',
+    },
+  ],
+  [
+    'baseten:moonshotai/Kimi-K2.7-Code',
+    {
+      label: 'Performance',
+      pricing: { inputPerMillion: 0.95, outputPerMillion: 4 },
+      tier: 'performance',
+    },
+  ],
+  [
+    'baseten:thinkingmachines/inkling',
+    {
+      label: 'Performance',
+      pricing: { inputPerMillion: 1, outputPerMillion: 4.05 },
+      tier: 'performance',
+    },
+  ],
+])
+
+function forgeModelTier(model: { provider: { id: string }; id: string }) {
+  return forgeModelTiers.get(`${model.provider.id}:${model.id}`)
+}
+
+function formatPrice(perMillion: number) {
+  return `$${perMillion.toFixed(2)}`
+}
+
+function ModelPrice(props: { model: Parameters<typeof forgeModelTier>[0] }) {
+  const tier = forgeModelTier(props.model)
+  if (!tier) return
+  return (
+    <span class="text-text-weak ml-auto shrink-0 tabular-nums">
+      {formatPrice(tier.pricing.inputPerMillion)} /{' '}
+      {formatPrice(tier.pricing.outputPerMillion)}
+    </span>
+  )
+}
+
+type ModelState = ReturnType<typeof useLocal>['model']
 
 const ModelList: Component<{
   provider?: string
@@ -32,27 +169,46 @@ const ModelList: Component<{
   const models = createMemo(() =>
     model
       .list()
-      .filter((m) => model.visible({ modelID: m.id, providerID: m.provider.id }))
-      .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
+      .filter((m) =>
+        model.visible({ modelID: m.id, providerID: m.provider.id })
+      )
+      .filter((m) => (props.provider ? m.provider.id === props.provider : true))
   )
 
   return (
     <List
-      class={`flex-1 px-3 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0 ${props.class ?? ""}`}
-      search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true, action: props.action }}
-      emptyMessage={language.t("dialog.model.empty")}
+      class={`min-h-0 flex-1 px-3 [&_[data-slot=list-scroll]]:min-h-0 [&_[data-slot=list-scroll]]:flex-1 ${props.class ?? ''}`}
+      search={{
+        placeholder: language.t('dialog.model.search.placeholder'),
+        autofocus: true,
+        action: props.action,
+      }}
+      emptyMessage={language.t('dialog.model.empty')}
       key={(x) => `${x.provider.id}:${x.id}`}
       items={models}
       current={model.current()}
-      filterKeys={["provider.name", "name", "id"]}
+      filterKeys={['provider.name', 'name', 'id']}
       sortBy={(a, b) => a.name.localeCompare(b.name)}
-      groupBy={(x) => x.provider.name}
+      groupBy={(model) => forgeModelTier(model)?.label ?? 'Other models'}
       sortGroupsBy={(a, b) => {
-        const aProvider = a.items[0].provider.id
-        const bProvider = b.items[0].provider.id
-        if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
-        if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
-        return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
+        const aTier = forgeModelTier(a.items[0])
+        const bTier = forgeModelTier(b.items[0])
+        if (!aTier) return bTier ? 1 : 0
+        if (!bTier) return -1
+        return tierOrder[aTier.tier] - tierOrder[bTier.tier]
+      }}
+      groupHeader={(group) => {
+        const tier = forgeModelTier(group.items[0])
+        return (
+          <span
+            class="font-bold"
+            style={{
+              color: tier ? tierColor[tier.tier] : 'var(--oc-ink-muted)',
+            }}
+          >
+            {group.category}
+          </span>
+        )
       }}
       itemWrapper={(item, node) => (
         <Tooltip
@@ -60,26 +216,36 @@ const ModelList: Component<{
           placement="right-start"
           gutter={12}
           openDelay={0}
-          value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
+          value={
+            <ModelTooltip
+              model={item}
+              latest={item.latest}
+              free={isFree(item.provider.id, item.cost)}
+            />
+          }
         >
           {node}
         </Tooltip>
       )}
       onSelect={(x) => {
-        model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
-          recent: true,
-        })
+        model.set(
+          x ? { modelID: x.id, providerID: x.provider.id } : undefined,
+          {
+            recent: true,
+          }
+        )
         props.onSelect()
       }}
     >
       {(i) => (
-        <div class="w-full flex items-center gap-x-2 text-13-regular">
+        <div class="text-13-regular flex w-full items-center gap-x-2">
           <span class="truncate">{i.name}</span>
+          <ModelPrice model={i} />
           <Show when={isFree(i.provider.id, i.cost)}>
-            <Tag>{language.t("model.tag.free")}</Tag>
+            <Tag>{language.t('model.tag.free')}</Tag>
           </Show>
           <Show when={i.latest}>
-            <Tag>{language.t("model.tag.latest")}</Tag>
+            <Tag>{language.t('model.tag.latest')}</Tag>
           </Show>
         </div>
       )}
@@ -87,8 +253,11 @@ const ModelList: Component<{
   )
 }
 
-type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
-type Dismiss = "escape" | "outside" | "select" | "manage" | "provider"
+type ModelSelectorTriggerProps = Omit<
+  ComponentProps<typeof Kobalte.Trigger>,
+  'as' | 'ref'
+>
+type Dismiss = 'escape' | 'outside' | 'select' | 'manage' | 'provider'
 
 export function ModelSelectorPopover(props: {
   provider?: string
@@ -96,7 +265,7 @@ export function ModelSelectorPopover(props: {
   children?: JSX.Element
   triggerAs?: ValidComponent
   triggerProps?: ModelSelectorTriggerProps
-  onClose?: (cause: "escape" | "select") => void
+  onClose?: (cause: 'escape' | 'select') => void
 }) {
   const [store, setStore] = createStore<{
     open: boolean
@@ -110,20 +279,20 @@ export function ModelSelectorPopover(props: {
   const directory = () => decode64(local.slug())
 
   const close = (dismiss: Dismiss) => {
-    setStore("dismiss", dismiss)
-    setStore("open", false)
+    setStore('dismiss', dismiss)
+    setStore('open', false)
   }
 
   const handleManage = () => {
-    close("manage")
-    void import("./dialog-manage-models").then((x) => {
+    close('manage')
+    void import('./dialog-manage-models').then((x) => {
       dialog.show(() => <x.DialogManageModels />)
     })
   }
 
   const handleConnectProvider = () => {
-    close("provider")
-    void import("./dialog-select-provider").then((x) => {
+    close('provider')
+    void import('./dialog-select-provider').then((x) => {
       dialog.show(() => <x.DialogSelectProvider directory={directory} />)
     })
   }
@@ -133,61 +302,69 @@ export function ModelSelectorPopover(props: {
     <Kobalte
       open={store.open}
       onOpenChange={(next) => {
-        if (next) setStore("dismiss", null)
-        setStore("open", next)
+        if (next) setStore('dismiss', null)
+        setStore('open', next)
       }}
       modal={false}
       placement="top-start"
       gutter={4}
     >
-      <Kobalte.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
+      <Kobalte.Trigger as={props.triggerAs ?? 'div'} {...props.triggerProps}>
         {props.children}
       </Kobalte.Trigger>
       <Kobalte.Portal>
         <Kobalte.Content
-          class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
+          class="border-border-base bg-surface-raised-stronger-non-alpha z-50 flex h-80 w-72 flex-col overflow-hidden rounded-md border p-2 shadow-md outline-none"
           onEscapeKeyDown={(event) => {
-            close("escape")
+            close('escape')
             event.preventDefault()
             event.stopPropagation()
           }}
-          onPointerDownOutside={() => close("outside")}
-          onFocusOutside={() => close("outside")}
+          onPointerDownOutside={() => close('outside')}
+          onFocusOutside={() => close('outside')}
           onCloseAutoFocus={(event) => {
             const dismiss = store.dismiss
-            if (dismiss === "outside") event.preventDefault()
-            if (dismiss === "escape" || dismiss === "select") {
+            if (dismiss === 'outside') event.preventDefault()
+            if (dismiss === 'escape' || dismiss === 'select') {
               event.preventDefault()
               props.onClose?.(dismiss)
             }
-            setStore("dismiss", null)
+            setStore('dismiss', null)
           }}
         >
-          <Kobalte.Title class="sr-only">{language.t("dialog.model.select.title")}</Kobalte.Title>
+          <Kobalte.Title class="sr-only">
+            {language.t('dialog.model.select.title')}
+          </Kobalte.Title>
           <ModelList
             provider={props.provider}
             model={props.model}
-            onSelect={() => close("select")}
+            onSelect={() => close('select')}
             class="p-1"
             action={
               <div class="flex items-center gap-1">
-                <Tooltip placement="top" value={language.t("command.provider.connect")}>
+                <Tooltip
+                  placement="top"
+                  value={language.t('command.provider.connect')}
+                >
                   <IconButton
                     icon="plus-small"
                     variant="ghost"
                     iconSize="normal"
                     class="size-6"
-                    aria-label={language.t("command.provider.connect")}
+                    aria-label={language.t('command.provider.connect')}
                     onClick={handleConnectProvider}
                   />
                 </Tooltip>
-                <Tooltip placement="top" value={language.t("dialog.model.manage")}>
+                <Tooltip
+                  placement="top"
+                  value={language.t('dialog.model.manage')}
+                >
                   <IconButton
                     icon="sliders"
                     variant="ghost"
                     iconSize="normal"
                     class="size-6"
-                    aria-label={language.t("dialog.model.manage")}
+                    aria-label={language.t('dialog.model.manage')}
                     onClick={handleManage}
                   />
                 </Tooltip>
@@ -200,36 +377,52 @@ export function ModelSelectorPopover(props: {
   )
 }
 
-export const DialogSelectModel: Component<{ provider?: string; model?: ModelState }> = (props) => {
+export const DialogSelectModel: Component<{
+  provider?: string
+  model?: ModelState
+}> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
   const local = useLocal()
   const directory = () => decode64(local.slug())
 
   const provider = () => {
-    void import("./dialog-select-provider").then((x) => {
+    void import('./dialog-select-provider').then((x) => {
       dialog.show(() => <x.DialogSelectProvider directory={directory} />)
     })
   }
 
   const manage = () => {
-    void import("./dialog-manage-models").then((x) => {
+    void import('./dialog-manage-models').then((x) => {
       dialog.show(() => <x.DialogManageModels />)
     })
   }
 
   return (
     <Dialog
-      title={language.t("dialog.model.select.title")}
+      title={language.t('dialog.model.select.title')}
       action={
-        <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={provider}>
-          {language.t("command.provider.connect")}
+        <Button
+          class="text-14-medium -my-1 h-7"
+          icon="plus-small"
+          tabIndex={-1}
+          onClick={provider}
+        >
+          {language.t('command.provider.connect')}
         </Button>
       }
     >
-      <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
-      <Button variant="ghost" class="ml-3 mt-5 mb-6 text-text-base self-start" onClick={manage}>
-        {language.t("dialog.model.manage")}
+      <ModelList
+        provider={props.provider}
+        model={props.model}
+        onSelect={() => dialog.close()}
+      />
+      <Button
+        variant="ghost"
+        class="text-text-base mt-5 mb-6 ml-3 self-start"
+        onClick={manage}
+      >
+        {language.t('dialog.model.manage')}
       </Button>
     </Dialog>
   )