Combine the Features and Capabilities data into just Features

Author: samejr

apps/webapp/app/presenters/v3/ModelRegistryPresenter.server.ts

@@ -64,14 +64,12 @@ export type ModelCatalogItem = {
   description: string | null;
   contextWindow: number | null;
   maxOutputTokens: number | null;
-  capabilities: string[];
+  /** Combined capabilities (from DB) and boolean feature flags (from catalog) as slug strings. */
+  features: string[];
   inputPrice: number | null;
   outputPrice: number | null;
   /** When the model was publicly released (from startDate on LlmModel). */
   releaseDate: string | null;
-  supportsStructuredOutput: boolean;
-  supportsParallelToolCalls: boolean;
-  supportsStreamingToolCalls: boolean;
   /** Dated variants of this model (only populated on base models). */
   variants: ModelVariant[];
 };
@@ -98,6 +96,17 @@ export type ModelDetail = ModelCatalogItem & {
   }>;
 };
 
+function buildFeatures(
+  capabilities: string[],
+  catalogEntry: { supportsStructuredOutput: boolean; supportsParallelToolCalls: boolean; supportsStreamingToolCalls: boolean } | undefined
+): string[] {
+  const features = [...capabilities];
+  if (catalogEntry?.supportsStructuredOutput) features.push("structured_output");
+  if (catalogEntry?.supportsParallelToolCalls) features.push("parallel_tool_calls");
+  if (catalogEntry?.supportsStreamingToolCalls) features.push("streaming_tool_calls");
+  return features;
+}
+
 export type ModelMetricsPoint = {
   minute: string;
   callCount: number;
@@ -214,13 +223,10 @@ export class ModelRegistryPresenter extends BasePresenter {
         description: m.description,
         contextWindow: m.contextWindow,
         maxOutputTokens: m.maxOutputTokens,
-        capabilities: m.capabilities,
+        features: buildFeatures(m.capabilities, catalogEntry),
         inputPrice: inputPrice ? Number(inputPrice.price) : null,
         outputPrice: outputPrice ? Number(outputPrice.price) : null,
         releaseDate: m.startDate ? m.startDate.toISOString().split("T")[0] : null,
-        supportsStructuredOutput: catalogEntry?.supportsStructuredOutput ?? false,
-        supportsParallelToolCalls: catalogEntry?.supportsParallelToolCalls ?? false,
-        supportsStreamingToolCalls: catalogEntry?.supportsStreamingToolCalls ?? false,
         variants: [],
         _baseModelName: m.baseModelName,
       };
@@ -331,13 +337,10 @@ export class ModelRegistryPresenter extends BasePresenter {
       description: model.description,
       contextWindow: model.contextWindow,
       maxOutputTokens: model.maxOutputTokens,
-      capabilities: model.capabilities,
+      features: buildFeatures(model.capabilities, catalogEntry),
       inputPrice: inputPrice ? Number(inputPrice.price) : null,
       outputPrice: outputPrice ? Number(outputPrice.price) : null,
       releaseDate: model.startDate ? model.startDate.toISOString().split("T")[0] : null,
-      supportsStructuredOutput: catalogEntry?.supportsStructuredOutput ?? false,
-      supportsParallelToolCalls: catalogEntry?.supportsParallelToolCalls ?? false,
-      supportsStreamingToolCalls: catalogEntry?.supportsStreamingToolCalls ?? false,
       variants: [],
       matchPattern: model.matchPattern,
       source: model.source,

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models.$modelId/route.tsx

@@ -42,7 +42,7 @@ import {
   formatModelPrice,
   formatTokenCount,
   formatModelCost,
-  formatCapability,
+  formatFeature,
   formatProviderName,
 } from "~/utils/modelFormatters";
 
@@ -312,14 +312,14 @@ function OverviewTab({
                 </Property.Value>
               </Property.Item>
             )}
-            {model.capabilities.length > 0 && (
+            {model.features.length > 0 && (
               <Property.Item>
-                <Property.Label>Capabilities</Property.Label>
+                <Property.Label>Features</Property.Label>
                 <Property.Value>
                   <div className="flex flex-wrap gap-1">
-                    {model.capabilities.map((cap) => (
-                      <Badge key={cap} variant="outline-rounded">
-                        {formatCapability(cap)}
+                    {model.features.map((f) => (
+                      <Badge key={f} variant="outline-rounded">
+                        {formatFeature(f)}
                       </Badge>
                     ))}
                   </div>