From 1b121ee7022b9a3ffc16a24f59ca089d0ff59a23 Mon Sep 17 00:00:00 2001
From: Dax Raad <d@ironbay.co>
Date: Fri, 21 Nov 2025 00:18:22 -0500
Subject: [PATCH] tui: display 'Free' label for OpenCode models instead of
 styled component

Simplifies the model selection UI by rendering the free label as plain text rather than a styled span component, reducing unnecessary markup while maintaining clarity about model pricing.
---
 .../opencode/src/cli/cmd/tui/component/dialog-model.tsx   | 8 ++++----
 .../src/cli/cmd/tui/component/dialog-provider.tsx         | 1 -
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx b/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx
index 77a3b0f03..35e885243 100644
--- a/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx
@@ -9,7 +9,7 @@ import { createDialogProviderOptions, DialogProvider } from "./dialog-provider"
 
 function Free() {
   const { theme } = useTheme()
-  return <span style={{ fg: theme.secondary }}>Free</span>
+  return <span style={{ fg: theme.text }}>Free</span>
 }
 const PROVIDER_PRIORITY: Record<string, number> = {
   opencode: 0,
@@ -52,7 +52,7 @@ export function DialogModel() {
                 title: model.name ?? item.modelID,
                 description: provider.name,
                 category: "Recent",
-                footer: model.cost?.input === 0 && provider.id === "opencode" ? <Free /> : undefined,
+                footer: model.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
                 onSelect: () => {
                   dialog.clear()
                   local.model.set(
@@ -83,9 +83,9 @@ export function DialogModel() {
                 modelID: model,
               },
               title: info.name ?? model,
-              description: provider.name,
+              description: connected() ? provider.name : undefined,
               category: connected() ? provider.name : undefined,
-              footer: info.cost?.input === 0 && provider.id === "opencode" ? <Free /> : undefined,
+              footer: info.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
               onSelect() {
                 dialog.clear()
                 local.model.set(
diff --git a/packages/opencode/src/cli/cmd/tui/component/dialog-provider.tsx b/packages/opencode/src/cli/cmd/tui/component/dialog-provider.tsx
index d4553410a..0211d029f 100644
--- a/packages/opencode/src/cli/cmd/tui/component/dialog-provider.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/dialog-provider.tsx
@@ -51,7 +51,6 @@ export function createDialogProviderOptions() {
                     options={methods.map((x, index) => ({
                       title: x.label,
                       value: index,
-                      category: "Method",
                     }))}
                     onSelect={(option) => resolve(option.value)}
                   />