feat(opencode): Add cost of the models in the model picker

packages/app/src/components/dialog-select-model.tsx

@@ -18,6 +18,14 @@ import { useLanguage } from "@/context/language"
 const isFree = (provider: string, cost: { input: number } | undefined) =>
   provider === "opencode" && (!cost || cost.input === 0)
 
+function formatCost(cost?: { input: number; output: number }) {
+  if (!cost || (cost.input === 0 && cost.output === 0)) return undefined
+  return {
+    input: `$${cost.input.toFixed(2)}`,
+    output: `$${cost.output.toFixed(2)}`,
+  }
+}
+
 const ModelList: Component<{
   provider?: string
   class?: string
@@ -39,6 +47,14 @@ const ModelList: Component<{
       class={`flex-1 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")}
+      header={
+        <div class="flex items-center justify-between px-3 py-1 text-11-regular text-text-dimmed">
+          <span>Model</span>
+          <span class="flex items-center text-right tabular-nums">
+            Input / Output /1M tok
+          </span>
+        </div>
+      }
       key={(x) => `${x.provider.id}:${x.id}`}
       items={models}
       current={local.model.current()}
@@ -69,17 +85,35 @@ const ModelList: Component<{
         props.onSelect()
       }}
     >
-      {(i) => (
-        <div class="w-full flex items-center gap-x-2 text-13-regular">
-          <span class="truncate">{i.name}</span>
-          <Show when={isFree(i.provider.id, i.cost)}>
-            <Tag>{language.t("model.tag.free")}</Tag>
-          </Show>
-          <Show when={i.latest}>
-            <Tag>{language.t("model.tag.latest")}</Tag>
-          </Show>
-        </div>
-      )}
+      {(i) => {
+        const price = () => formatCost(i.cost)
+        return (
+          <div class="w-full flex items-center gap-x-2 text-13-regular">
+            <span class="truncate">{i.name}</span>
+            <Show when={i.latest}>
+              <Tag>{language.t("model.tag.latest")}</Tag>
+            </Show>
+            <span class="ml-auto text-11-regular text-text-dimmed shrink-0 tabular-nums whitespace-nowrap flex items-center">
+              <Show
+                when={!isFree(i.provider.id, i.cost) && price()}
+                fallback={
+                  <Show when={isFree(i.provider.id, i.cost)}>
+                    <span class="w-[13ch] text-right">{language.t("model.tag.free")}</span>
+                  </Show>
+                }
+              >
+                {(p) => (
+                  <>
+                    <span class="w-[6ch] text-right">{p().input}</span>
+                    <span class="px-0.5">/</span>
+                    <span class="w-[6ch] text-right">{p().output}</span>
+                  </>
+                )}
+              </Show>
+            </span>
+          </div>
+        )
+      }}
     </List>
   )
 }

packages/app/src/components/model-tooltip.tsx

@@ -18,6 +18,10 @@ type ModelInfo = {
     input: Array<string>
   }
   reasoning?: boolean
+  cost?: {
+    input: number
+    output: number
+  }
   limit: {
     context: number
   }
@@ -73,6 +77,12 @@ export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?
       : language.t("model.tooltip.reasoning.none")
   }
   const context = () => language.t("model.tooltip.context", { limit: props.model.limit.context.toLocaleString() })
+  const pricing = () => {
+    if (props.free) return "Free"
+    const cost = props.model.cost
+    if (!cost || (cost.input === 0 && cost.output === 0)) return undefined
+    return `$${cost.input.toFixed(2)} / $${cost.output.toFixed(2)} /1M tokens`
+  }
 
   return (
     <div class="flex flex-col gap-1 py-1">
@@ -86,6 +96,9 @@ export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?
       </Show>
       <div class="text-12-regular text-text-invert-base">{reasoning()}</div>
       <div class="text-12-regular text-text-invert-base">{context()}</div>
+      <Show when={pricing()}>
+        {(price) => <div class="text-12-regular text-text-invert-base">{price()}</div>}
+      </Show>
     </div>
   )
 }

packages/opencode/src/cli/cmd/models.ts

@@ -36,11 +36,21 @@ export const ModelsCommand = cmd({
       async fn() {
         const providers = await Provider.list()
 
+        function formatCost(cost: { input: number; output: number }) {
+          if (cost.input === 0 && cost.output === 0) return UI.Style.TEXT_DIM + "Free" + UI.Style.TEXT_NORMAL
+          return (
+            UI.Style.TEXT_DIM +
+            `$${cost.input.toFixed(2)} / $${cost.output.toFixed(2)} /1M tokens` +
+            UI.Style.TEXT_NORMAL
+          )
+        }
+
         function printModels(providerID: string, verbose?: boolean) {
           const provider = providers[providerID]
           const sortedModels = Object.entries(provider.models).sort(([a], [b]) => a.localeCompare(b))
           for (const [modelID, model] of sortedModels) {
             process.stdout.write(`${providerID}/${modelID}`)
+            process.stdout.write("  " + formatCost(model.cost))
             process.stdout.write(EOL)
             if (verbose) {
               process.stdout.write(JSON.stringify(model, null, 2))

packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx

@@ -15,6 +15,11 @@ export function useConnected() {
   )
 }
 
+function formatCost(cost?: { input: number; output: number }) {
+  if (!cost || (cost.input === 0 && cost.output === 0)) return "Free".padStart(15)
+  return `${`$${cost.input.toFixed(2)}`.padStart(6)} / ${`$${cost.output.toFixed(2)}`.padStart(6)}`
+}
+
 export function DialogModel(props: { providerID?: string }) {
   const local = useLocal()
   const sync = useSync()
@@ -48,7 +53,7 @@ export function DialogModel(props: { providerID?: string }) {
             description: provider.name,
             category,
             disabled: provider.id === "opencode" && model.id.includes("-nano"),
-            footer: model.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
+            footer: formatCost(model.cost),
             onSelect: () => {
               dialog.clear()
               local.model.set({ providerID: provider.id, modelID: model.id }, { recent: true })
@@ -86,7 +91,7 @@ export function DialogModel(props: { providerID?: string }) {
               : undefined,
             category: connected() ? provider.name : undefined,
             disabled: provider.id === "opencode" && model.includes("-nano"),
-            footer: info.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
+            footer: formatCost(info.cost),
             onSelect() {
               dialog.clear()
               local.model.set({ providerID: provider.id, modelID: model }, { recent: true })
@@ -159,6 +164,7 @@ export function DialogModel(props: { providerID?: string }) {
       flat={true}
       skipFilter={true}
       title={title()}
+      columnHeader="Input / Output /1M tok"
       current={local.model.current()}
     />
   )

packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx

@@ -21,6 +21,7 @@ export interface DialogSelectProps<T> {
   onFilter?: (query: string) => void
   onSelect?: (option: DialogSelectOption<T>) => void
   skipFilter?: boolean
+  columnHeader?: string
   keybind?: {
     keybind?: Keybind.Info
     title: string
@@ -263,6 +264,16 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
           />
         </box>
       </box>
+      <Show when={props.columnHeader}>
+        <box paddingLeft={4} paddingRight={4} flexDirection="row" justifyContent="space-between">
+          <text fg={theme.textMuted} attributes={TextAttributes.BOLD}>
+            Model
+          </text>
+          <text fg={theme.textMuted} attributes={TextAttributes.BOLD}>
+            {props.columnHeader}
+          </text>
+        </box>
+      </Show>
       <Show
         when={grouped().length > 0}
         fallback={
@@ -320,9 +331,9 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                         gap={1}
                       >
                         <Option
-                          title={option.title}
-                          footer={flatten() ? (option.category ?? option.footer) : option.footer}
-                          description={option.description !== category ? option.description : undefined}
+                          title={flatten() && option.category ? `${option.category} / ${option.title}` : option.title}
+                          footer={option.footer}
+                          description={!flatten() && option.description !== category ? option.description : undefined}
                           active={active()}
                           current={current()}
                           gutter={option.gutter}

packages/ui/src/components/list.tsx

@@ -46,6 +46,7 @@ export interface ListProps<T> extends FilteredListProps<T> {
   divider?: boolean
   add?: ListAddProps
   groupHeader?: (group: { category: string; items: T[] }) => JSX.Element
+  header?: JSX.Element
 }
 
 export interface ListRef {
@@ -309,6 +310,9 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
           {searchAction()}
         </div>
       </Show>
+      <Show when={props.header}>
+        <div data-slot="list-column-header">{props.header}</div>
+      </Show>
       <div ref={setScrollRef} data-slot="list-scroll">
         <Show
           when={flat().length > 0 || showAdd()}