[AI] Improve model catalog metadata and comparison

bin/catalog-import-utils.node.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import {
+	hasMoreCatalogModels,
+	mapConcurrentOrdered,
+} from "./catalog-import-utils";
+
+describe("catalog import utilities", () => {
+	it("stops pagination after all API rows are consumed", () => {
+		expect(hasMoreCatalogModels(100, 101, 100)).toBe(true);
+		expect(hasMoreCatalogModels(101, 101, 1)).toBe(false);
+		expect(hasMoreCatalogModels(100, 101, 0)).toBe(false);
+	});
+
+	it("keeps workers busy and returns results in input order", async () => {
+		let active = 0;
+		let maxActive = 0;
+		const completed: number[] = [];
+		const results = await mapConcurrentOrdered(
+			[30, 5, 10, 1],
+			2,
+			async (delay, index) => {
+				active++;
+				maxActive = Math.max(maxActive, active);
+				await new Promise((resolve) => setTimeout(resolve, delay));
+				active--;
+				return index;
+			},
+			(count) => completed.push(count),
+		);
+
+		expect(results).toEqual([0, 1, 2, 3]);
+		expect(maxActive).toBe(2);
+		expect(completed).toEqual([1, 2, 3, 4]);
+	});
+
+	it("stops dispatching and drains active work after a failure", async () => {
+		const started: number[] = [];
+		const finished: number[] = [];
+		let releaseActive!: () => void;
+		const active = new Promise<void>((resolve) => {
+			releaseActive = resolve;
+		});
+		const operation = mapConcurrentOrdered([0, 1, 2], 2, async (_, index) => {
+			started.push(index);
+			if (index === 0) throw new Error("failed");
+			await active;
+			finished.push(index);
+			return index;
+		});
+		let settled = false;
+		void operation.then(
+			() => (settled = true),
+			() => (settled = true),
+		);
+
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		expect(started).toEqual([0, 1]);
+		expect(settled).toBe(false);
+		releaseActive();
+		await expect(operation).rejects.toThrow("failed");
+		expect(started).toEqual([0, 1]);
+		expect(finished).toEqual([1]);
+	});
+});

bin/catalog-import-utils.ts

@@ -0,0 +1,41 @@
+export function hasMoreCatalogModels(
+	modelsSeen: number,
+	totalCount: number,
+	pageSize: number,
+): boolean {
+	return pageSize > 0 && modelsSeen < totalCount;
+}
+
+export async function mapConcurrentOrdered<T, R>(
+	values: readonly T[],
+	concurrency: number,
+	mapper: (value: T, index: number) => Promise<R>,
+	onComplete?: (completed: number) => void,
+): Promise<R[]> {
+	if (!Number.isInteger(concurrency) || concurrency < 1)
+		throw new RangeError("concurrency must be a positive integer");
+	const results = new Array<R>(values.length);
+	let nextIndex = 0;
+	let completed = 0;
+	let failed = false;
+	let firstError: unknown;
+
+	async function run(): Promise<void> {
+		while (!failed && nextIndex < values.length) {
+			const index = nextIndex++;
+			try {
+				results[index] = await mapper(values[index], index);
+				onComplete?.(++completed);
+			} catch (error) {
+				if (!failed) firstError = error;
+				failed = true;
+			}
+		}
+	}
+
+	await Promise.all(
+		Array.from({ length: Math.min(concurrency, values.length) }, run),
+	);
+	if (failed) throw firstError;
+	return results;
+}

bin/fetch-catalog-models.ts

@@ -25,6 +25,10 @@
 
 import fs from "node:fs";
 import path from "node:path";
+import {
+	hasMoreCatalogModels,
+	mapConcurrentOrdered,
+} from "./catalog-import-utils";
 
 interface CatalogModel {
 	model_id: string;
@@ -80,8 +84,6 @@ interface CatalogModel {
 	private?: boolean;
 	created_at?: string;
 	updated_at?: string;
-	// Returned by the catalog API but not consumed by the docs site.
-	// Stripped before writing to disk.
 	pricing?: Record<string, unknown>;
 }
 
@@ -188,6 +190,7 @@ async function fetchModelList(
 	const modelIds: string[] = [];
 	let page = 1;
 	let hasMore = true;
+	let modelsSeen = 0;
 
 	console.log("Fetching model list from Unified Catalog API...");
 	console.log(`  Base URL: ${API_BASE_URL}`);
@@ -225,13 +228,14 @@ async function fetchModelList(
 		}
 
 		const { count, total_count } = data.result_info!;
+		modelsSeen += data.result.length;
 		const privateNote =
 			skippedPrivate > 0 ? ` (${skippedPrivate} private skipped)` : "";
 		console.log(
-			`  Page ${page}: ${count} models (${modelIds.length}/${total_count})${privateNote}`,
+			`  Page ${page}: ${count} models (${modelsSeen}/${total_count})${privateNote}`,
 		);
 
-		hasMore = modelIds.length < total_count;
+		hasMore = hasMoreCatalogModels(modelsSeen, total_count, data.result.length);
 		page++;
 	}
 
@@ -289,26 +293,27 @@ async function fetchFromApi(): Promise<CatalogModel[]> {
 	);
 
 	// Pass 2: fetch full details for each model
-	const models: CatalogModel[] = [];
-	const failed: string[] = [];
-
-	for (let i = 0; i < modelIds.length; i += CONCURRENCY) {
-		const batch = modelIds.slice(i, i + CONCURRENCY);
-		const results = await Promise.all(
-			batch.map((id) => fetchModelDetail(ACCOUNT_ID, API_TOKEN, id)),
-		);
-
-		for (let j = 0; j < results.length; j++) {
-			const result = results[j];
-			if (result) {
-				models.push(result);
-			} else {
-				failed.push(batch[j]);
+	const results = await mapConcurrentOrdered(
+		modelIds,
+		CONCURRENCY,
+		async (modelId) => {
+			try {
+				return await fetchModelDetail(ACCOUNT_ID, API_TOKEN, modelId);
+			} catch (error) {
+				console.error(`  Failed to fetch ${modelId}:`, error);
+				return null;
 			}
-		}
+		},
+		(fetched) =>
+			process.stdout.write(`\r  ${fetched}/${modelIds.length} models fetched`),
+	);
 
-		const fetched = Math.min(i + CONCURRENCY, modelIds.length);
-		process.stdout.write(`\r  ${fetched}/${modelIds.length} models fetched`);
+	const models: CatalogModel[] = [];
+	const failed: string[] = [];
+	for (let index = 0; index < results.length; index++) {
+		const result = results[index];
+		if (result) models.push(result);
+		else failed.push(modelIds[index]);
 	}
 
 	console.log();
@@ -433,10 +438,6 @@ function writeModels(models: CatalogModel[]): void {
 		model.name = model.name.trim();
 		model.description = model.description.trim();
 
-		// Drop the `pricing` field — it's returned by the catalog API but is
-		// not consumed by the docs site and isn't declared in the schema.
-		delete model.pricing;
-
 		// Strip credentials from any pre-signed URLs in the response.
 		const redacted = redactCredentialUrls(model);
 

src/components/models/ModelBadges.astro

@@ -55,7 +55,7 @@ for (const { property_id, value } of model.propertiesList) {
 const badges: BadgeDef[] = [providerBadge, ...propertyBadges];
 ---
 
-<ul class="m-0 flex list-none flex-wrap items-center gap-1.5 p-0">
+<ul class="m-0 flex list-none flex-wrap items-center gap-x-1.5 p-0">
 	{
 		badges.map((badge) => (
 			<li class="m-0">

src/components/models/ModelCard.astro

@@ -15,6 +15,8 @@ import ModelBadges from "./ModelBadges.astro";
 import { authorData } from "~/components/models/data";
 import {
 	facetValues,
+	formatCompactTokens,
+	formatModelPricing,
 	pinnedModelNames,
 	type ModelCardData,
 } from "~/util/models";
@@ -43,12 +45,20 @@ const pinnedIndex = pinnedModelNames.indexOf(model.name);
 const isPinned = pinnedIndex >= 0;
 // Author logo; initial-letter tile when the author id is unmapped.
 const authorLogo = authorData[model.author]?.logo;
+const contextWindow = formatCompactTokens(model.properties.context_window);
+const maxOutputTokens = formatCompactTokens(model.properties.max_output_tokens);
+const pricing = formatModelPricing(model.pricing);
+const decisionFacts = [
+	contextWindow ? `Context: ${contextWindow}` : null,
+	maxOutputTokens ? `Maximum output: ${maxOutputTokens}` : null,
+	pricing.length > 0 ? "Pricing listed" : null,
+].filter((value): value is string => value !== null);
 ---
 
 <div
 	data-models-cell
 	data-name={model.name.toLowerCase()}
-	data-search={[model.name, model.shortName, model.description]
+	data-search={[model.name, model.shortName, model.description, ...model.tags]
 		.filter(Boolean)
 		.join(" ")
 		.toLowerCase()}
@@ -58,6 +68,18 @@ const authorLogo = authorData[model.author]?.logo;
 	data-facet-authors={facetValues(model, "authors").join("|")}
 	data-date={dateValue}
 	data-pinned-index={pinnedIndex}
+	data-model-id={model.modelId ?? model.name}
+	data-model-label={model.displayName}
+	data-model-href={href}
+	data-model-provider={model.hosting === "hosted" ? "Workers AI" : "AI Gateway"}
+	data-model-author={model.authorName}
+	data-model-task={model.task}
+	data-model-context={model.properties.context_window ?? ""}
+	data-model-output={model.properties.max_output_tokens ?? ""}
+	data-model-pricing={pricing.join("\n")}
+	data-model-capabilities={model.capabilities.join(", ")}
+	data-model-tags={model.tags.join(", ")}
+	data-model-zdr={model.properties.zdr === "true" ? "Yes" : "No"}
 	class={cellClass}
 >
 	<div
@@ -69,7 +91,9 @@ const authorLogo = authorData[model.author]?.logo;
 
 	<a
 		href={href}
-		class="group/card hover:bg-muted/30 focus-visible:outline-ring relative flex h-full flex-col p-5 text-inherit! no-underline transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2"
+		class:list={[
+			"group/card hover:bg-muted/30 focus-visible:outline-ring relative flex h-full min-w-0 flex-col p-5 pb-16 text-inherit! no-underline transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2",
+		]}
 	>
 		{
 			isPinned && (
@@ -103,9 +127,9 @@ const authorLogo = authorData[model.author]?.logo;
 					</span>
 				)
 			}
-			<div class="flex min-w-0 flex-1 items-center gap-2">
+			<div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
 				<h3
-					class="text-foreground group-hover/card:text-primary line-clamp-2 text-sm leading-snug font-semibold break-words"
+					class="text-foreground group-hover/card:text-primary line-clamp-2 min-w-0 text-sm leading-snug font-semibold [overflow-wrap:anywhere]"
 				>
 					{model.shortName}
 				</h3>
@@ -123,20 +147,48 @@ const authorLogo = authorData[model.author]?.logo;
 		</div>
 
 		<div
-			class="border-border mt-3 mb-3 flex items-center justify-between gap-2 border-t pt-3 text-xs"
+			class="border-border mt-3 mb-3 flex min-h-10 items-start justify-between gap-3 border-t pt-3 text-xs"
 		>
-			<span class="text-foreground truncate">{model.authorName}</span>
-			<span class="text-foreground shrink-0 font-mono tracking-wider uppercase">
+			<span
+				class="text-foreground line-clamp-2 min-w-0 flex-1 [overflow-wrap:anywhere]"
+			>
+				{model.authorName}
+			</span>
+			<span
+				class="text-foreground line-clamp-2 max-w-[58%] text-right font-mono leading-snug tracking-wider [overflow-wrap:anywhere] uppercase"
+			>
 				{model.task}
 			</span>
 		</div>
 
 		<p
-			class="text-muted-foreground mb-4 line-clamp-2 min-h-10 flex-1 text-sm leading-relaxed"
+			class="text-muted-foreground line-clamp-3 h-[4.5rem] min-w-0 shrink-0 text-sm leading-relaxed [overflow-wrap:anywhere]"
 		>
 			{model.description}
 		</p>
 
 		<ModelBadges model={model} />
 	</a>
+	<div
+		class="pointer-events-none absolute right-3 bottom-3 left-5 z-20 flex items-center justify-between gap-3"
+	>
+		{
+			decisionFacts.length > 0 && (
+				<ul class="text-muted-foreground flex min-w-0 list-none flex-wrap gap-x-3 gap-y-1 p-0 text-xs">
+					{decisionFacts.map((fact) => (
+						<li class="m-0">{fact}</li>
+					))}
+				</ul>
+			)
+		}
+		<button
+			type="button"
+			data-model-compare
+			aria-label={`Add ${model.displayName} to comparison`}
+			aria-pressed="false"
+			class="border-border bg-background text-muted-foreground hover:border-primary hover:text-primary focus-visible:outline-ring aria-pressed:border-primary aria-pressed:bg-primary aria-pressed:text-primary-foreground aria-pressed:hover:text-primary-foreground pointer-events-auto ml-auto shrink-0 cursor-pointer rounded-md border px-2 py-1 text-xs font-medium focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+		>
+			Compare
+		</button>
+	</div>
 </div>