From ac9385a68e4cbb5e6ff3faa0fbd4c6c2af727e84 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Wed, 20 May 2026 09:38:46 -0400
Subject: [PATCH] refactor(web): simplify models settings page

Drop the default model, base URL, and provider slug badge from each
provider row. Rows now show the display name (slug fallback), model
count, and configuration status.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/routes/settings-models.tsx | 28 ++-----------------
 1 file changed, 2 insertions(+), 26 deletions(-)

diff --git a/apps/fabro-web/app/routes/settings-models.tsx b/apps/fabro-web/app/routes/settings-models.tsx
index 2a2a05fb6..5250d9bca 100644
--- a/apps/fabro-web/app/routes/settings-models.tsx
+++ b/apps/fabro-web/app/routes/settings-models.tsx
@@ -1,7 +1,6 @@
 import type { Provider } from "@qltysh/fabro-api-client";
 import { useProviders } from "../lib/queries";
 import {
-  Badge,
   Dot,
   Panel,
   PanelSkeleton,
@@ -48,37 +47,14 @@ function ProvidersPanel({ providers }: { providers: Provider[] }) {
 function ProviderRow({ provider }: { provider: Provider }) {
   return (
     <Row
-      title={
-        <span className="inline-flex items-center gap-2">
-          {provider.display_name}
-          <Badge>{provider.id}</Badge>
-        </span>
-      }
-      help={<ProviderHelp provider={provider} />}
+      title={provider.display_name || provider.id}
+      help={`${provider.model_count} ${plural(provider.model_count, "model", "models")}`}
     >
       <ProviderStatus provider={provider} />
     </Row>
   );
 }
 
-function ProviderHelp({ provider }: { provider: Provider }) {
-  return (
-    <span className="inline-flex flex-wrap items-center gap-x-1.5">
-      <span>
-        {provider.model_count} {plural(provider.model_count, "model", "models")}
-      </span>
-      <span aria-hidden="true">·</span>
-      <span>default {provider.default_model ?? "—"}</span>
-      {provider.base_url ? (
-        <>
-          <span aria-hidden="true">·</span>
-          <span className="font-mono">{provider.base_url}</span>
-        </>
-      ) : null}
-    </span>
-  );
-}
-
 function ProviderStatus({ provider }: { provider: Provider }) {
   return (
     <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">