fix(app): drop model details tooltip from the composer model chip (#59108)

Co-authored-by: jayair <53023+jayair@users.noreply.github.com>
Co-authored-by: Kit Langton <kit.langton@gmail.com>
Co-authored-by: usrnk1 <7547651+usrnk1@users.noreply.github.com>

packages/app/e2e/regression/composer.spec.ts

@@ -586,6 +586,7 @@ test("keeps a line added at the end of a scrolling prompt clear of the bottom fa
     await page.keyboard.type(line)
     await page.keyboard.press("Shift+Enter")
   }
+
   await page.keyboard.type("Last line")
   await expect.poll(() => editor.innerText()).toMatch(/Line 12\nLast line$/)
 
@@ -906,11 +907,6 @@ test("marks a Console provider with its workspace only when it is also connected
   })
 
   const trigger = page.locator('[data-component="composer"] [data-action="composer-model"]')
-  await trigger.hover()
-  const details = page.getByRole("tooltip")
-  await expect(details.getByText("Console Model", { exact: true })).toBeVisible()
-  await expect(details.getByText("OpenCode", { exact: true })).toBeVisible()
-  await expect(details.getByText(/Anomaly \//)).toHaveCount(0)
   await trigger.click()
   const menu = page.getByRole("dialog", { name: "Select model", exact: true })
   await expect(menu.getByRole("option", { name: "Direct Gemini", exact: true })).toBeVisible()

packages/app/e2e/regression/mobile-model-pickers.spec.ts

@@ -203,14 +203,13 @@ for (const direction of ["ltr", "rtl"] as const) {
   })
 }
 
-test("desktop model button shows the model details", async ({ page }) => {
+test("desktop model button shows only the choose-model hint, not the model details", async ({ page }) => {
   const { model } = await openDesktopPicker(page, "ltr")
   await model.hover()
-  const details = page.getByRole("tooltip")
-  await expect(details.getByText("Mobile Model A", { exact: true })).toBeVisible()
-  await expect(details.getByText("OpenCode", { exact: true })).toBeVisible()
-  await expect(details.getByText("1,000,000", { exact: true })).toBeVisible()
-  await expect(details.getByText("Input & Output", { exact: true })).toBeVisible()
+  const tooltip = page.getByRole("tooltip")
+  await expect(tooltip).toContainText("Choose model")
+  await expect(tooltip.getByText("1,000,000", { exact: true })).toHaveCount(0)
+  await expect(tooltip.getByText("Input & Output", { exact: true })).toHaveCount(0)
 })
 
 test("model dialog shows a summary for models without variants", async ({ page }) => {

packages/app/src/composer/composer.tsx

@@ -6,15 +6,11 @@ import { useDialog } from "@opencode/ui/context/dialog"
 import { Icon } from "@opencode/ui/icon"
 import { Keybind } from "@opencode/ui/keybind"
 import { Slash } from "@opencode/ui/slash"
-import { consoleModelGroup } from "@/providers/models/provider-group"
-import { consoleProviderName } from "@/providers/catalog/console"
 import { Tooltip } from "@opencode/ui/tooltip"
 import { ComposerEditor } from "./editor/editor"
 import { DialogSelectModel, ModelSelectorDrawer } from "@/providers/models/select-dialog"
 import { DialogSelectModelNext, ModelSelectorDrawerNext } from "@/providers/models/select-dialog-next"
 import { useSettings } from "@/settings/model"
-import { ModelDetails } from "@/providers/models/details"
-import { createModelUsage } from "@/usage/model"
 import { DialogSelectModelUnpaid } from "@/providers/models/unpaid"
 import { formatKeybind, useCommand } from "@/shell/commands/command"
 import { useLanguage } from "@/runtime/i18n/language"
@@ -95,8 +91,6 @@ function ComposerModelControl(props: {
   const mobile = createMediaQuery("(max-width: 767px)")
   const dialog = useDialog()
   const settings = useSettings()
-  const managed = createMemo(() => consoleModelGroup(props.model.list()))
-  const usage = createModelUsage()
 
   const open = (detail: number) => {
     if (!props.paid) return props.onUnpaidClick()
@@ -117,14 +111,6 @@ function ComposerModelControl(props: {
     open(detail)
   })
 
-  const providerName = (provider: { id: string; name: string }) => {
-    const group = managed()
-
-    return group?.providers.some((item) => item.id === provider.id)
-      ? consoleProviderName(group, provider.name)
-      : provider.name
-  }
-
   const content = () => (
     <>
       <span class="flex min-w-0 whitespace-nowrap leading-4">
@@ -149,30 +135,12 @@ function ComposerModelControl(props: {
     <Show when={!props.loading || props.preview}>
       <Tooltip
         inactive={mobile()}
-        openDelay={750}
-        contentClass={props.model.current() ? "!p-0 rounded-md" : undefined}
         placement="top"
-        gutter={4}
         value={
-          <Show
-            when={props.model.current()}
-            fallback={
-              <>
-                {props.title}
-                <Keybind keys={props.keybind} variant="neutral" />
-              </>
-            }
-          >
-            {(model) => (
-              <div class="flex w-[188px] max-w-[calc(100vw-24px)] flex-col">
-                <ModelDetails model={model()} provider={providerName(model().provider)} usage={usage(model())} />
-                <div class="flex h-7 min-w-0 items-center gap-2 border-t-[0.5px] border-v2-border-border-base px-2">
-                  <span class="min-w-0 flex-1 truncate text-v2-text-text-faint">{props.title}</span>
-                  <Keybind keys={props.keybind} variant="neutral" />
-                </div>
-              </div>
-            )}
-          </Show>
+          <>
+            {props.title}
+            <Keybind keys={props.keybind} variant="neutral" />
+          </>
         }
       >
         {/* While loading, the drawer would open on a catalog that isn't there yet, so the inert chip stands in. */}