From 45e70b5d947c6ade76beb2418a7fe9f2933d7dc9 Mon Sep 17 00:00:00 2001
From: Ken Ojibe <ken@thesightline.co>
Date: Tue, 5 May 2026 10:55:39 -0400
Subject: [PATCH] fix: make Runs/Blueprints tooltips functional on model card
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract stats into PerformanceSummaryStats client component so
  Radix UI tooltip hydration works (page.tsx is a Server Component)
- Use TooltipTrigger as native button (no asChild) for reliable
  pointer-event capture
- Add info icon (ℹ) to the right of each label
- Set delayDuration={200} on TooltipProvider

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../[modelId]/PerformanceSummaryStats.tsx     | 48 +++++++++++++++++++
 src/app/(standard)/cards/[modelId]/page.tsx   | 39 ++-------------
 2 files changed, 53 insertions(+), 34 deletions(-)
 create mode 100644 src/app/(standard)/cards/[modelId]/PerformanceSummaryStats.tsx

diff --git a/src/app/(standard)/cards/[modelId]/PerformanceSummaryStats.tsx b/src/app/(standard)/cards/[modelId]/PerformanceSummaryStats.tsx
new file mode 100644
index 00000000..5f310fb8
--- /dev/null
+++ b/src/app/(standard)/cards/[modelId]/PerformanceSummaryStats.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
+import Icon from '@/components/ui/icon';
+
+interface Props {
+  totalRuns: number;
+  totalBlueprints: number;
+}
+
+export default function PerformanceSummaryStats({ totalRuns, totalBlueprints }: Props) {
+  return (
+    <TooltipProvider delayDuration={200}>
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <Icon name="activity" className="h-3.5 w-3.5 text-muted-foreground mr-2" />
+            <Tooltip>
+              <TooltipTrigger className="flex items-center gap-1 text-sm cursor-help underline-offset-4 hover:underline decoration-dotted">
+                Runs
+                <Icon name="info" className="h-3 w-3 text-muted-foreground" />
+              </TooltipTrigger>
+              <TooltipContent>
+                Number of times this model was evaluated across all blueprints
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <span className="font-medium">{totalRuns}</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <Icon name="users" className="h-3.5 w-3.5 text-muted-foreground mr-2" />
+            <Tooltip>
+              <TooltipTrigger className="flex items-center gap-1 text-sm cursor-help underline-offset-4 hover:underline decoration-dotted">
+                Blueprints
+                <Icon name="info" className="h-3 w-3 text-muted-foreground" />
+              </TooltipTrigger>
+              <TooltipContent>
+                Distinct evaluation blueprints/configs this model was tested on
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <span className="font-medium">{totalBlueprints}</span>
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/src/app/(standard)/cards/[modelId]/page.tsx b/src/app/(standard)/cards/[modelId]/page.tsx
index bf7b33d7..abad18db 100644
--- a/src/app/(standard)/cards/[modelId]/page.tsx
+++ b/src/app/(standard)/cards/[modelId]/page.tsx
@@ -8,7 +8,7 @@ import Link from 'next/link';
 import Icon, { type IconName } from '@/components/ui/icon';
 import ResponseRenderer from '@/app/components/ResponseRenderer';
 import RemarkGfmPlugin from 'remark-gfm';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
+import PerformanceSummaryStats from './PerformanceSummaryStats';
 
 // Shared formatters
 const formatPercent = (value?: number | null, fractionDigits = 1): string => {
@@ -285,41 +285,13 @@ export default async function ModelCardPage({ params }: ModelCardPageProps) {
 
             {/* Right Column - Stats & Metadata (Secondary) */}
             <div className="lg:w-80 bg-muted/10 border-t lg:border-t-0 lg:border-l border-border p-6 lg:sticky lg:top-4 self-start">
-              <TooltipProvider>
-              
               {/* Quick Stats */}
               <div className="mb-6">
                 <h3 className="font-medium text-sm text-muted-foreground mb-3">Performance Summary</h3>
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center">
-                        <Icon name="activity" className="h-3.5 w-3.5 text-muted-foreground mr-2" />
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <span className="text-sm cursor-help">Runs</span>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          Number of times this model was evaluated across all blueprints
-                        </TooltipContent>
-                      </Tooltip>
-                    </div>
-                    <span className="font-medium">{modelCard.overallStats.totalRuns}</span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center">
-                      <Icon name="users" className="h-3.5 w-3.5 text-muted-foreground mr-2" />
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <span className="text-sm cursor-help">Blueprints</span>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          Distinct evaluation blueprints/configs this model was tested on
-                        </TooltipContent>
-                      </Tooltip>
-                    </div>
-                    <span className="font-medium">{modelCard.overallStats.totalBlueprints}</span>
-                  </div>
-                </div>
+                <PerformanceSummaryStats
+                  totalRuns={modelCard.overallStats.totalRuns}
+                  totalBlueprints={modelCard.overallStats.totalBlueprints}
+                />
               </div>
 
               {/* Top Dimensional Performance */}
@@ -496,7 +468,6 @@ export default async function ModelCardPage({ params }: ModelCardPageProps) {
               <div className="text-center">
                 <div className="text-xs text-muted-foreground">Updated {new Date(modelCard.lastUpdated).toLocaleDateString()}</div>
               </div>
-              </TooltipProvider>
             </div>
           </div>
         </div>