fix(web): search provider models

packages/web/src/index.css

@@ -491,6 +491,14 @@ tbody td:nth-child(3) {
   color: var(--color-text);
 }
 
+tbody tr:target td {
+  background-color: color-mix(
+    in srgb,
+    var(--color-brand) 12%,
+    var(--color-background)
+  );
+}
+
 tbody tr:last-child td {
   border-bottom: 0;
 }

packages/web/src/index.ts

@@ -8,6 +8,7 @@ interface SearchIndexItem {
   logo: string;
   tokens: string[];
   lab?: string;
+  provider?: string;
   modelCount?: number;
   providerCount?: number;
   context?: number;
@@ -266,7 +267,7 @@ function appendHighlightedText(
 function resultMeta(item: SearchIndexItem) {
   if (item.type === "model") {
     return [
-      item.lab,
+      item.lab ?? item.provider,
       item.providerCount === undefined
         ? undefined
         : `${item.providerCount} providers`,

packages/web/src/render.tsx

@@ -71,6 +71,7 @@ interface SearchIndexItem {
   logo: string;
   tokens: string[];
   lab?: string;
+  provider?: string;
   modelCount?: number;
   providerCount?: number;
   context?: number;
@@ -296,12 +297,48 @@ function buildSearchItems(
         metadata.family,
         metadata.release_date,
         metadata.last_updated,
+        ...model.providers.flatMap((provider) => [
+          displayModelName(provider),
+          provider.modelId,
+          provider.provider.name,
+          provider.providerId,
+        ]),
         ...(metadata.modalities?.input ?? []),
         ...(metadata.modalities?.output ?? []),
       ].filter((token): token is string => Boolean(token)),
     });
   }
 
+  for (const entry of ProviderModelEntries) {
+    if (entry.canonical) continue;
+
+    const displayName = displayModelName(entry);
+    items.push({
+      type: "model",
+      title: displayName,
+      id: `${entry.providerId}/${entry.modelId}`,
+      href: providerModelHref(entry.providerId, entry.modelId),
+      logo: logoHref(entry.providerId),
+      provider: entry.provider.name,
+      context: entry.model.limit?.context,
+      releaseDate: entry.model.release_date,
+      inputCost: entry.model.cost?.input,
+      outputCost: entry.model.cost?.output,
+      updated: entry.model.last_updated,
+      tokens: [
+        displayName,
+        entry.modelId,
+        entry.provider.name,
+        entry.providerId,
+        entry.model.family,
+        entry.model.release_date,
+        entry.model.last_updated,
+        ...(entry.model.modalities?.input ?? []),
+        ...(entry.model.modalities?.output ?? []),
+      ].filter((token): token is string => Boolean(token)),
+    });
+  }
+
   for (const [providerId, provider] of providers) {
     const providerModels = ProviderModelEntries.filter(
       (entry) => entry.providerId === providerId,
@@ -326,7 +363,6 @@ function buildSearchItems(
         provider.npm,
         provider.api,
         provider.doc,
-        ...providerModels.slice(0, 20).map(displayModelName),
       ].filter((token): token is string => Boolean(token)),
     });
   }
@@ -945,6 +981,7 @@ function ProviderModelsTable(props: {
 
           return (
             <tr
+              id={providerModelAnchor(entry.providerId, entry.modelId)}
               data-search={`${displayName} ${entry.modelId} ${entry.provider.name} ${entry.providerId} ${lab?.name ?? ""} ${entry.model.family ?? ""} ${booleanText(entry.model.reasoning)} ${booleanText(entry.model.tool_call)} ${booleanText(entry.model.structured_output)} ${booleanText(entry.model.temperature)}`}
             >
               {props.mode === "model" ? (
@@ -1438,6 +1475,14 @@ function providerHref(id: string) {
   return `/providers/${encodeURIComponent(id)}`;
 }
 
+function providerModelHref(providerId: string, modelId: string) {
+  return `${providerHref(providerId)}#${providerModelAnchor(providerId, modelId)}`;
+}
+
+function providerModelAnchor(providerId: string, modelId: string) {
+  return `provider-model-${encodeURIComponent(`${providerId}/${modelId}`).replace(/%/g, "_")}`;
+}
+
 function labHref(id: string) {
   return `/labs/${encodeURIComponent(id)}`;
 }