From faebf6c053889babf4791aa075dfd4dcecb0bd7d Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 6 Oct 2025 15:56:41 +0000
Subject: [PATCH] Add model information tooltip to pricing pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create ModelTooltip component showing all 6 available models with friendly names
- Update pricing config to include tooltip on '6 Powerful Models' feature text
- Enhance PlanFeature type to support React elements in addition to strings
- Models display with appropriate badges (Pro, New, Starter requirements)
- Tooltip appears on both pricing page and marketing page pricing section

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/components/ModelTooltip.tsx | 72 ++++++++++++++++++++++++
 frontend/src/config/pricingConfig.tsx    | 24 ++++++--
 2 files changed, 92 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/ModelTooltip.tsx

diff --git a/frontend/src/components/ModelTooltip.tsx b/frontend/src/components/ModelTooltip.tsx
new file mode 100644
index 000000000..3b6830cfb
--- /dev/null
+++ b/frontend/src/components/ModelTooltip.tsx
@@ -0,0 +1,72 @@
+import { Info } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { MODEL_CONFIG } from "@/components/ModelSelector";
+
+export function ModelTooltip() {
+  // Get all models from the MODEL_CONFIG
+  const models = Object.entries(MODEL_CONFIG).map(([id, config]) => ({
+    id,
+    displayName: config.displayName,
+    shortName: config.shortName,
+    badges: config.badges || [],
+    requiresPro: config.requiresPro,
+    requiresStarter: config.requiresStarter
+  }));
+
+  // Sort models: Free models first, then starter, then pro, with some logical ordering
+  const sortedModels = models.sort((a, b) => {
+    // Free models (no requirements) first
+    if (!a.requiresPro && !a.requiresStarter && (b.requiresPro || b.requiresStarter)) return -1;
+    if (!b.requiresPro && !b.requiresStarter && (a.requiresPro || a.requiresStarter)) return 1;
+
+    // Then starter models
+    if (a.requiresStarter && !b.requiresStarter && !b.requiresPro) return 1;
+    if (b.requiresStarter && !a.requiresStarter && !a.requiresPro) return -1;
+
+    // Then pro models
+    if (a.requiresPro && !b.requiresPro) return 1;
+    if (b.requiresPro && !a.requiresPro) return -1;
+
+    // Within same tier, sort alphabetically
+    return a.displayName.localeCompare(b.displayName);
+  });
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button className="inline-flex items-center justify-center w-4 h-4 ml-1 text-[hsl(var(--marketing-text-muted))] hover:text-foreground transition-colors">
+            <Info className="w-4 h-4" />
+            <span className="sr-only">View available models</span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs p-4">
+          <div className="space-y-3">
+            <div className="font-medium text-sm">Available Models:</div>
+            <div className="space-y-2">
+              {sortedModels.map((model) => (
+                <div key={model.id} className="flex items-start gap-2">
+                  <div className="flex-1">
+                    <div className="text-sm font-medium text-foreground">{model.displayName}</div>
+                    {model.badges && model.badges.length > 0 && (
+                      <div className="flex gap-1 mt-1">
+                        {model.badges.map((badge) => (
+                          <span
+                            key={badge}
+                            className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-[hsl(var(--purple))]/10 text-[hsl(var(--purple))]"
+                          >
+                            {badge}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/frontend/src/config/pricingConfig.tsx b/frontend/src/config/pricingConfig.tsx
index 9ddc7e3c6..f0a345d21 100644
--- a/frontend/src/config/pricingConfig.tsx
+++ b/frontend/src/config/pricingConfig.tsx
@@ -1,7 +1,8 @@
 import { Check, X } from "lucide-react";
+import { ModelTooltip } from "@/components/ModelTooltip";
 
 export type PlanFeature = {
-  text: string;
+  text: string | React.ReactNode;
   included: boolean;
   icon?: React.ReactNode;
 };
@@ -136,7 +137,12 @@ export const PRICING_PLANS: PricingPlan[] = [
         icon: <Check className="w-4 h-4 text-green-500" />
       },
       {
-        text: "6 Powerful Models (including DeepSeek R1)",
+        text: (
+          <span className="flex items-center">
+            6 Powerful Models (including DeepSeek R1)
+            <ModelTooltip />
+          </span>
+        ),
         included: true,
         icon: <Check className="w-4 h-4 text-green-500" />
       },
@@ -191,7 +197,12 @@ export const PRICING_PLANS: PricingPlan[] = [
         icon: <Check className="w-4 h-4 text-green-500" />
       },
       {
-        text: "6 Powerful Models (including DeepSeek R1)",
+        text: (
+          <span className="flex items-center">
+            6 Powerful Models (including DeepSeek R1)
+            <ModelTooltip />
+          </span>
+        ),
         included: true,
         icon: <Check className="w-4 h-4 text-green-500" />
       },
@@ -255,7 +266,12 @@ export const PRICING_PLANS: PricingPlan[] = [
         icon: <Check className="w-4 h-4 text-green-500" />
       },
       {
-        text: "6 Powerful Models (including DeepSeek R1)",
+        text: (
+          <span className="flex items-center">
+            6 Powerful Models (including DeepSeek R1)
+            <ModelTooltip />
+          </span>
+        ),
         included: true,
         icon: <Check className="w-4 h-4 text-green-500" />
       },