fix(tui): show model display names

Author: lambertjosh

packages/opencode/src/kilocode/plugins/sidebar-usage.tsx

@@ -1,6 +1,7 @@
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@kilocode/plugin/tui"
 import { createMemo, createResource, For, onCleanup, onMount, Show } from "solid-js"
 import { useLocal } from "@tui/context/local"
+import * as Model from "@tui/util/model"
 import { fmtAttemptCost, fmtScore } from "@/kilocode/components/model-info-panel-utils"
 import {
   failed,
@@ -28,6 +29,7 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
   )
   const usage = createMemo(() => select(result(), props.session_id))
   const unavailable = createMemo(() => failed(result(), props.session_id))
+  const providers = createMemo(() => Model.index([...props.api.state.provider]))
   const groups = createMemo(() => groupModelsByProvider(usage()?.models ?? [], props.api.state.provider))
   const bench = createMemo(() => {
     const current = local.model.current()
@@ -122,7 +124,7 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
                           {(model) => (
                             <box>
                               <text fg={theme().text} wrapMode="char">
-                                <b>{model.modelID}</b>
+                                <b>{Model.name(providers(), model.providerID, model.modelID)}</b>
                               </text>
                               <text fg={theme().textMuted} wrapMode="word">
                                 Steps {formatCount(model.steps)} | Cost {formatCost(model.cost)}