fix: match API surface browser design

src/build/render.ts

@@ -1,8 +1,16 @@
 import path from "node:path";
 import ejs from "ejs";
 import { describeApplicability } from "../data/applicability.js";
-import { apiSurfaceLabel, apiSurfaceSdkMethod } from "../data/api-surfaces.js";
-import { buildProviderFacets, type CapabilityFacet } from "../data/catalog.js";
+import {
+  apiSurfaceLabel,
+  apiSurfaceSdkMethod,
+  buildApiSurfaceFacets,
+} from "../data/api-surfaces.js";
+import {
+  buildProviderFacets,
+  type CapabilityFacet,
+  type ProviderFacet,
+} from "../data/catalog.js";
 import {
   authLabel,
   conditionIcon,
@@ -14,11 +22,6 @@ import {
   providerLabel,
 } from "../data/display.js";
 import { groupParams } from "../data/group.js";
-import {
-  buildApiSurfaceFacets,
-  buildModelGroupProviderFacets,
-  groupModels,
-} from "../data/model-groups.js";
 import { usageGuideMarkdown } from "../data/llms.js";
 import { logoFor } from "../data/logos.js";
 import { VIEWS_DIR } from "../data/paths.js";
@@ -161,11 +164,10 @@ export function homeDescription(
 }
 
 export async function renderIndex(opts: RenderOptions): Promise<string> {
-  const modelGroups = groupModels(opts.catalog.models);
-  const providers = buildModelGroupProviderFacets(modelGroups);
+  const providers = buildProviderFacets(opts.catalog.models);
   const body = await ejs.renderFile(path.join(VIEWS_DIR, "index.ejs"), {
-    modelGroups,
-    apiSurfaces: buildApiSurfaceFacets(modelGroups),
+    models: opts.catalog.models,
+    apiSurfaces: buildApiSurfaceFacets(opts.catalog.models),
     capabilities: opts.capabilities,
     providers,
     helpers: viewHelpers,
@@ -174,8 +176,12 @@ export async function renderIndex(opts: RenderOptions): Promise<string> {
   const sampleParams = opts.capabilities.slice(0, 3).map((cap) => cap.path);
   return renderShell(
     {
-      title: homeTitle(modelGroups.length),
-      description: homeDescription(modelGroups.length, providers.length, sampleParams),
+      title: homeTitle(opts.catalog.models.length),
+      description: homeDescription(
+        opts.catalog.models.length,
+        providers.length,
+        sampleParams,
+      ),
       canonicalUrl: `${SITE_URL}/`,
       ogImage: ogImagePath("/"),
       structuredData: buildHomeStructuredData(

src/client/main.ts

@@ -1,5 +1,4 @@
 import { setupWebMCP } from "./webmcp.js";
-import { setupModelVariantTabs, syncModelVariants } from "./model-variants.js";
 
 type AuthFilter = "all" | "api_key" | "subscription";
 type SortMode = "provider" | "name" | "params";
@@ -204,19 +203,26 @@ function setupThemeToggle(): void {
 }
 
 function modelMatches(el: HTMLElement): boolean {
+  if (state.auth !== "all" && el.dataset.modelAuth !== state.auth) return false;
+
+  if (state.apiSurface !== "all" && el.dataset.modelApiSurface !== state.apiSurface) return false;
+
   if (state.providers.size > 0 && !state.providers.has(el.dataset.modelProvider ?? ""))
     return false;
 
+  if (state.capabilities.size > 0) {
+    const have = new Set((el.dataset.modelCapabilities ?? "").split(/\s+/).filter(Boolean));
+    for (const capability of state.capabilities) {
+      if (!have.has(capability)) return false;
+    }
+  }
+
   if (state.query) {
     const haystack = `${el.dataset.modelName ?? ""} ${el.dataset.modelProvider ?? ""} ${el.dataset.modelId ?? ""}`;
     if (!haystack.includes(state.query)) return false;
   }
 
-  return syncModelVariants(el, {
-    auth: state.auth,
-    apiSurface: state.apiSurface,
-    capabilities: state.capabilities,
-  });
+  return true;
 }
 
 function applyFilters(): void {
@@ -641,7 +647,6 @@ document.addEventListener("DOMContentLoaded", () => {
   setupClearFilters();
   setupSort();
   reorderList();
-  setupModelVariantTabs();
   setupModelLinks();
   setupSearchShortcut();
   setupScrollTopButton();

src/data/api-surfaces.ts

@@ -1,4 +1,4 @@
-import { ApiSurface, type ApiSurface as ApiSurfaceName } from "../schema/model.js";
+import { ApiSurface, type ApiSurface as ApiSurfaceName, type Model } from "../schema/model.js";
 
 export interface ApiSurfaceMeta {
   value: ApiSurfaceName;
@@ -11,15 +11,15 @@ const META: Record<ApiSurfaceName, Omit<ApiSurfaceMeta, "value">> = {
     label: "Chat Completions",
     sdkMethod: "chat.completions.create",
   },
-  "openai-responses": { label: "Responses", sdkMethod: "responses.create" },
-  "anthropic-messages": { label: "Messages", sdkMethod: "messages.create" },
+  "openai-responses": { label: "Responses API", sdkMethod: "responses.create" },
+  "anthropic-messages": { label: "Messages API", sdkMethod: "messages.create" },
   "google-generate-content": {
-    label: "Gemini generateContent",
+    label: "Generate content",
     sdkMethod: "models.generateContent",
   },
-  "amazon-bedrock-converse": { label: "Bedrock Converse", sdkMethod: "ConverseCommand" },
+  "amazon-bedrock-converse": { label: "Converse API", sdkMethod: "ConverseCommand" },
   "google-vertex-generate-content": {
-    label: "Vertex generateContent",
+    label: "Vertex generate content",
     sdkMethod: "generateContent",
   },
   "cohere-chat": { label: "Cohere Chat", sdkMethod: "chat" },
@@ -37,3 +37,15 @@ export function apiSurfaceLabel(surface: ApiSurfaceName): string {
 export function apiSurfaceSdkMethod(surface: ApiSurfaceName): string {
   return META[surface].sdkMethod;
 }
+
+export interface ApiSurfaceFacet {
+  apiSurface: ApiSurfaceName;
+  count: number;
+}
+
+export function buildApiSurfaceFacets(models: Model[]): ApiSurfaceFacet[] {
+  return API_SURFACES.map(({ value }) => ({
+    apiSurface: value,
+    count: models.filter((model) => model.apiSurface === value).length,
+  })).filter((facet) => facet.count > 0);
+}