From 81b4221a7a8de2f17c8518f74961ec4f6e7bdd80 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Fri, 9 Jan 2026 22:05:04 +1300
Subject: [PATCH] feat(04-02): show variant suffix in fal.ai model names

- Extract last segment from model ID (e.g., "effects" from "kling-video/v1.6/pro/effects")
- Append as suffix if not already in name: "Kling 1.6 - effects"
- Helps differentiate model variants with same display name
---
 src/components/modals/ModelSearchDialog.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/ModelSearchDialog.tsx b/src/components/modals/ModelSearchDialog.tsx
index 55029b51..0b097867 100644
--- a/src/components/modals/ModelSearchDialog.tsx
+++ b/src/components/modals/ModelSearchDialog.tsx
@@ -227,6 +227,21 @@ export function ModelSearchDialog({
     }
   };
 
+  // Get display name with suffix for fal.ai models to differentiate variants
+  const getDisplayName = (model: ProviderModel): string => {
+    if (model.provider === "fal") {
+      // Extract the last segment of the ID (e.g., "effects" from "kling-video/v1.6/pro/effects")
+      const segments = model.id.split("/");
+      const lastSegment = segments[segments.length - 1];
+
+      // Only add suffix if it's not already in the name (case-insensitive)
+      if (lastSegment && !model.name.toLowerCase().includes(lastSegment.toLowerCase())) {
+        return `${model.name} - ${lastSegment}`;
+      }
+    }
+    return model.name;
+  };
+
   // Get model page URL for the provider's website
   const getModelUrl = (model: ProviderModel): string => {
     if (model.provider === "replicate") {
@@ -483,9 +498,9 @@ export function ModelSearchDialog({
 
                   {/* Model Info */}
                   <div className="flex-1 min-w-0">
-                    {/* Model name */}
+                    {/* Model name with variant suffix for fal.ai */}
                     <div className="font-medium text-neutral-100 text-sm truncate">
-                      {model.name}
+                      {getDisplayName(model)}
                     </div>
 
                     {/* Model ID with link to provider page */}