{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "prompt-ab-testing-comparator",
  "title": "Prompt Ab Testing Comparator",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/prompt-ab-testing-comparator/PromptAbTestingComparator.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  AlertCircle,\n  Check,\n  CheckCircle2,\n  Clock,\n  Code2,\n  Coins,\n  Copy,\n  Cpu,\n  Play,\n  Rocket,\n  Scale,\n  ShieldCheck,\n  Sparkles,\n  Terminal,\n  Trophy,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nexport interface PromptAbTestingComparatorProps {\n  experimentTitle?: string\n  testSampleCount?: string\n  className?: string\n}\n\nconst testCases = [\n  {\n    id: 'test-18',\n    number: '#18',\n    title: 'Button Component with CVA Variants',\n    prompt: 'Generate a polymorphic Button component with cva variants in Vue 3.5 <script setup lang=\"ts\">',\n    componentTarget: 'Button.vue',\n    category: 'Control / Primitive',\n  },\n  {\n    id: 'test-24',\n    number: '#24',\n    title: 'Card Container with Header and Action',\n    prompt: 'Generate a compound Card component with CardHeader, CardTitle, and CardAction in Vue 3.5',\n    componentTarget: 'Card.vue',\n    category: 'Layout / Primitive',\n  },\n  {\n    id: 'test-31',\n    number: '#31',\n    title: 'Tabs Navigation with Animated Indicator',\n    prompt: 'Create a headless accessible Tabs component with horizontal/vertical orientation support in Vue 3.5',\n    componentTarget: 'Tabs.vue',\n    category: 'Navigation',\n  },\n  {\n    id: 'test-42',\n    number: '#42',\n    title: 'Semantic Status Badge Component',\n    prompt: 'Build a Badge component with success, warning, destructive, and outline variants in Tailwind v4',\n    componentTarget: 'Badge.vue',\n    category: 'Feedback / Tag',\n  },\n]\n\nconst promptAData = {\n  id: 'prompt-a',\n  label: 'Prompt A',\n  variantName: 'Baseline Control',\n  model: 'Claude 3.5 Sonnet',\n  temperature: '0.7',\n  maxTokens: 2048,\n  latency: '1.42s',\n  outputTokens: 340,\n  cost: '$0.0018',\n  judgeScore: 82,\n  judgeStatus: 'Baseline Control',\n  critique: 'Generated inline cva variants in index.ts causing potential SSR circular imports.',\n  systemPrompt: `You are a Vue 3 component generator. Generate standard Vue SFC components with Tailwind CSS and class-variance-authority for variants.`,\n  outputCode: `<script setup lang=\"ts\">\nimport { buttonVariants } from './index'\n\ninterface Props {\n  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'\n  size?: 'default' | 'sm' | 'lg' | 'icon'\n  asChild?: boolean\n  class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n})\n</script>\n\n<template>\n  <button\n    :class=\"buttonVariants({ variant: props.variant, size: props.size, class: props.class })\"\n  >\n    <slot />\n  </button>\n</template>`,\n  subScores: [\n    { label: 'SSR Safety', score: 68, status: 'Warning' },\n    { label: 'Type Safety', score: 84, status: 'Good' },\n    { label: 'Token Economy', score: 88, status: 'Good' },\n    { label: 'Style Conformance', score: 88, status: 'Good' },\n  ],\n}\n\nconst promptBData = {\n  id: 'prompt-b',\n  label: 'Prompt B',\n  variantName: 'Challenger (With Rules)',\n  model: 'Claude 3.5 Sonnet',\n  temperature: '0.7',\n  maxTokens: 2048,\n  latency: '1.28s',\n  latencyDelta: '-0.14s (-9.8%)',\n  outputTokens: 320,\n  tokensDelta: '-20 tok (-5.9%)',\n  cost: '$0.0016',\n  costDelta: '-$0.0002 (-11.1%)',\n  judgeScore: 96,\n  judgeDelta: '+14 pts',\n  judgeStatus: 'Winner · +14 pts',\n  critique: 'Clean architectural separation with .variants.ts sidecar and strict 120-col Prettier formatting.',\n  systemPrompt: `You are a specialized Vue 3.5 SFC generator for UIPKGE. Adhere strictly to the sidecar variant architecture: 1) ALWAYS isolate CVA variant definitions into a standalone [name].variants.ts file to eliminate Vue SSR circular-import deadlocks, 2) Use <script setup lang=\"ts\"> with Primitive from reka-ui for polymorphic as/asChild rendering, 3) Follow 120-column Prettier formatting without semicolons.`,\n  outputCode: `<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants, type ButtonVariants } from './button.variants'\n\ninterface Props {\n  as?: string\n  asChild?: boolean\n  variant?: ButtonVariants['variant']\n  size?: ButtonVariants['size']\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-slot=\"button\"\n    :data-variant=\"variant\"\n    :data-size=\"size\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>`,\n  subScores: [\n    { label: 'SSR Safety', score: 98, status: 'Optimal' },\n    { label: 'Type Safety', score: 96, status: 'Optimal' },\n    { label: 'Token Economy', score: 94, status: 'Optimal' },\n    { label: 'Style Conformance', score: 96, status: 'Optimal' },\n  ],\n}\n\nconst rubricDimensions = [\n  {\n    id: 'ssr-safety',\n    name: 'SSR Safety & Circular Import Guard',\n    promptAScore: '68 / 100',\n    promptBScore: '98 / 100',\n    delta: '+30 pts',\n    isWinner: true,\n    insight: 'Prompt B isolates variants into button.variants.ts, preventing component <-> index.ts SSR deadlocks.',\n  },\n  {\n    id: 'polymorphism',\n    name: 'Polymorphism & Reka UI Primitive',\n    promptAScore: '84 / 100',\n    promptBScore: '96 / 100',\n    delta: '+12 pts',\n    isWinner: true,\n    insight: 'Prompt B wraps Reka UI Primitive with asChild and data-slot attributes for full slot delegation.',\n  },\n  {\n    id: 'typescript-typing',\n    name: 'TypeScript HTMLAttributes & Variants',\n    promptAScore: '82 / 100',\n    promptBScore: '95 / 100',\n    delta: '+13 pts',\n    isWinner: true,\n    insight: \"Uses HTMLAttributes['class'] and ButtonVariants['variant'] instead of generic string props.\",\n  },\n  {\n    id: 'token-efficiency',\n    name: 'Token Generation Efficiency',\n    promptAScore: '88 / 100 (340 tok)',\n    promptBScore: '94 / 100 (320 tok)',\n    delta: '+6 pts (-5.9% tok)',\n    isWinner: true,\n    insight: 'Direct script setup syntax eliminates 20 tokens of redundant wrapper code per generation.',\n  },\n  {\n    id: 'style-conformance',\n    name: 'Prettier & 120-Col Print Width',\n    promptAScore: '88 / 100',\n    promptBScore: '97 / 100',\n    delta: '+9 pts',\n    isWinner: true,\n    insight: 'Strict adherence to single quotes, no semicolons, 2-space indentation, and sorted utility classes.',\n  },\n]\n\nconst summaryMetrics = [\n  {\n    id: 'win-rate',\n    label: 'Overall Win Rate',\n    value: '84.0%',\n    subvalue: '42 of 50 Tests Won',\n    badge: 'Dominant Win',\n    badgeVariant: 'success' as const,\n    description: 'Prompt B outperformed or matched Prompt A in 47 / 50 benchmark cases.',\n    highlight: true,\n  },\n  {\n    id: 'quality-lift',\n    label: 'Quality Score Lift',\n    value: '+18.4%',\n    subvalue: '96.1 vs 81.2 Avg Score',\n    badge: '+14.9 pts avg',\n    badgeVariant: 'success' as const,\n    description: 'Statistically significant improvement in architectural correctness.',\n    highlight: true,\n  },\n  {\n    id: 'latency-delta',\n    label: 'Avg Response Latency',\n    value: '1.28s',\n    subvalue: '-9.8% vs Baseline (1.42s)',\n    badge: '-140ms faster',\n    badgeVariant: 'secondary' as const,\n    description: 'Lower token payload reduces end-to-end LLM response streaming latency.',\n    highlight: false,\n  },\n  {\n    id: 'token-savings',\n    label: 'Avg Token Economy',\n    value: '320 tok',\n    subvalue: '-5.9% Token Reduction',\n    badge: '20 tok / call saved',\n    badgeVariant: 'secondary' as const,\n    description: 'Est. $20.00 / month cost savings per 100,000 component generation calls.',\n    highlight: false,\n  },\n]\n\nconst goldenTests = [\n  {\n    id: 'gt-1',\n    name: '#01 Button with CVA Variants',\n    category: 'Control',\n    promptAScore: '82',\n    promptBScore: '96',\n    delta: '+14',\n    winner: 'Prompt B',\n    latencyA: '1.42s',\n    latencyB: '1.28s',\n  },\n  {\n    id: 'gt-2',\n    name: '#02 Card Container with Action',\n    category: 'Layout',\n    promptAScore: '79',\n    promptBScore: '98',\n    delta: '+19',\n    winner: 'Prompt B',\n    latencyA: '1.51s',\n    latencyB: '1.34s',\n  },\n  {\n    id: 'gt-3',\n    name: '#03 Tabs with Indicator Slider',\n    category: 'Navigation',\n    promptAScore: '80',\n    promptBScore: '95',\n    delta: '+15',\n    winner: 'Prompt B',\n    latencyA: '1.64s',\n    latencyB: '1.41s',\n  },\n  {\n    id: 'gt-4',\n    name: '#04 Semantic Status Badge',\n    category: 'Feedback',\n    promptAScore: '86',\n    promptBScore: '97',\n    delta: '+11',\n    winner: 'Prompt B',\n    latencyA: '1.15s',\n    latencyB: '1.08s',\n  },\n  {\n    id: 'gt-5',\n    name: '#05 Dropdown Menu Compound',\n    category: 'Overlay',\n    promptAScore: '81',\n    promptBScore: '94',\n    delta: '+13',\n    winner: 'Prompt B',\n    latencyA: '1.58s',\n    latencyB: '1.39s',\n  },\n]\n\nexport function PromptAbTestingComparator({\n  experimentTitle = 'Prompt Optimization: Vue SFC AST Component Generator',\n  testSampleCount = '50 Evaluation Prompts',\n  className,\n}: PromptAbTestingComparatorProps) {\n  const [isRunning, setIsRunning] = React.useState(false)\n  const [isPromoted, setIsPromoted] = React.useState(false)\n  const [copiedState, setCopiedState] = React.useState<Record<string, boolean>>({})\n  const [selectedTestCase] = React.useState('test-18')\n\n  const currentTestCase = React.useMemo(() => {\n    return testCases.find((tc) => tc.id === selectedTestCase) ?? testCases[0]\n  }, [selectedTestCase])\n\n  const runComparison = React.useCallback(() => {\n    if (isRunning) return\n    setIsRunning(true)\n    setTimeout(() => {\n      setIsRunning(false)\n    }, 1200)\n  }, [isRunning])\n\n  const promotePromptB = React.useCallback(() => {\n    setIsPromoted(true)\n  }, [])\n\n  const copyToClipboard = React.useCallback((key: string, text: string) => {\n    navigator.clipboard?.writeText(text)\n    setCopiedState((prev) => ({ ...prev, [key]: true }))\n    setTimeout(() => {\n      setCopiedState((prev) => ({ ...prev, [key]: false }))\n    }, 2000)\n  }, [])\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {\n        e.preventDefault()\n        runComparison()\n      }\n    }\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [runComparison])\n\n  return (\n    <div data-uipkge=\"\" data-slot=\"prompt-ab-testing-comparator\" className={cn('w-full space-y-6', className)}>\n      {/* Production Promotion Success Banner (if promoted) */}\n      {isPromoted && (\n        <div className=\"border-success/30 bg-success/10 text-foreground dark:text-foreground flex flex-col items-start justify-between gap-3 rounded-lg border p-4 shadow-xs sm:flex-row sm:items-center\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"bg-success flex size-9 shrink-0 items-center justify-center rounded-md text-white shadow-xs\">\n              <Rocket className=\"size-4\" aria-hidden=\"true\" />\n            </div>\n            <div className=\"space-y-0.5\">\n              <p className=\"text-foreground text-sm font-semibold\">\n                Prompt B (Challenger with Sidecar Isolation) Promoted to Production\n              </p>\n              <p className=\"text-muted-foreground text-xs\">\n                100% of live component generation traffic is now routed through Prompt B. Expected quality lift: +18.4%.\n              </p>\n            </div>\n          </div>\n          <Badge variant=\"success\" className=\"font-semibold\">\n            Active in Production\n          </Badge>\n        </div>\n      )}\n\n      {/* Header Section */}\n      <div className=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <div className=\"space-y-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2.5\">\n            <h2 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">{experimentTitle}</h2>\n            <Badge variant=\"outline\" className=\"font-mono text-xs\">\n              {testSampleCount}\n            </Badge>\n            <Badge variant=\"success\" className=\"border-success/20 bg-success/10 text-success gap-1.5 font-medium\">\n              <Sparkles className=\"size-3\" aria-hidden=\"true\" />\n              <span>Prompt B Winner · +18.4% Quality Lift</span>\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n            Automated LLM Judge Shootout · Evaluator:{' '}\n            <span className=\"text-foreground font-medium\">Claude 3.5 Sonnet (Temp 0.0)</span> ·{' '}\n            <span className=\"text-foreground font-medium\">50 Test Cases</span>\n          </p>\n        </div>\n\n        {/* Action Buttons */}\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            className=\"gap-1.5 shadow-xs\"\n            disabled={isRunning}\n            onClick={runComparison}\n          >\n            {isRunning ? (\n              <span className=\"border-primary size-3.5 animate-spin rounded-full border-2 border-t-transparent\" />\n            ) : (\n              <Play className=\"size-3.5 fill-current\" aria-hidden=\"true\" />\n            )}\n            <span>{isRunning ? 'Evaluating 50 Prompts...' : 'Run A/B Comparison'}</span>\n            <kbd className=\"bg-muted text-muted-foreground hidden items-center rounded px-1.5 py-0.5 font-mono text-xs sm:inline-flex\">\n              ⌘↵\n            </kbd>\n          </Button>\n\n          <Button\n            size=\"sm\"\n            variant=\"default\"\n            disabled={isPromoted}\n            className=\"gap-1.5 shadow-xs\"\n            onClick={promotePromptB}\n          >\n            <Rocket className=\"size-3.5\" aria-hidden=\"true\" />\n            <span>{isPromoted ? 'Prompt B Active in Prod' : 'Promote Prompt B to Production'}</span>\n          </Button>\n        </div>\n      </div>\n\n      {/* Common Input Test Prompt Card */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardHeader className=\"pb-3\">\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"flex items-center gap-2.5\">\n              <div className=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n                <Code2 className=\"size-4\" />\n              </div>\n              <div>\n                <CardTitle className=\"text-sm font-semibold\">Common Input Test Prompt (Evaluation Benchmark)</CardTitle>\n                <CardDescription className=\"text-xs\">\n                  Standardized input payload dispatched to both prompt candidate configurations\n                </CardDescription>\n              </div>\n            </div>\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                {currentTestCase.number} of 50\n              </Badge>\n              <Badge variant=\"secondary\" className=\"text-xs\">\n                {currentTestCase.category}\n              </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"space-y-3 pt-0\">\n          {/* Test Prompt Text */}\n          <div className=\"border-border bg-muted/40 text-foreground flex items-center justify-between rounded-md border p-3\">\n            <div className=\"flex items-center gap-2\">\n              <Terminal className=\"text-primary size-4 shrink-0\" />\n              <code className=\"font-mono text-xs leading-relaxed font-semibold\">\"{currentTestCase.prompt}\"</code>\n            </div>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"text-muted-foreground hover:text-foreground h-7 px-2 text-xs\"\n              onClick={() => copyToClipboard('test-prompt', currentTestCase.prompt)}\n            >\n              {copiedState['test-prompt'] ? (\n                <Check className=\"text-success mr-1 size-3.5\" />\n              ) : (\n                <Copy className=\"mr-1 size-3.5\" />\n              )}\n              <span>{copiedState['test-prompt'] ? 'Copied' : 'Copy'}</span>\n            </Button>\n          </div>\n\n          {/* Meta chips / specifications */}\n          <div className=\"flex flex-wrap items-center gap-2 pt-1\">\n            <span className=\"text-muted-foreground text-xs font-medium\">Benchmark Spec:</span>\n            <span className=\"border-border bg-muted/30 text-foreground rounded-md border px-2 py-0.5 font-mono text-xs\">\n              target: {currentTestCase.componentTarget}\n            </span>\n            <span className=\"border-border bg-muted/30 text-foreground rounded-md border px-2 py-0.5 font-mono text-xs\">\n              framework: Vue 3.5 SFC\n            </span>\n            <span className=\"border-border bg-muted/30 text-foreground rounded-md border px-2 py-0.5 font-mono text-xs\">\n              engine: class-variance-authority + reka-ui\n            </span>\n            <span className=\"border-border bg-muted/30 text-foreground rounded-md border px-2 py-0.5 font-mono text-xs\">\n              isolation: zero-ssr-circular-imports\n            </span>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* 2-Column Side-by-Side Prompt Arena */}\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n        {/* Left Column: Prompt A (Baseline - Control) */}\n        <Card className=\"border-border bg-card shadow-xs\">\n          <CardHeader className=\"pb-3\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <Badge variant=\"secondary\" className=\"font-mono text-xs font-semibold\">\n                    {promptAData.label} · {promptAData.variantName}\n                  </Badge>\n                </div>\n                <p className=\"text-muted-foreground text-xs\">\n                  Model: <span className=\"text-foreground font-medium\">{promptAData.model}</span> · Temp:{' '}\n                  <span className=\"font-mono font-medium tabular-nums\">{promptAData.temperature}</span>\n                </p>\n              </div>\n              <div className=\"flex items-center gap-1.5\">\n                <Badge variant=\"outline\" className=\"border-border/80 font-mono text-xs\">\n                  Score: <span className=\"text-foreground ml-1 font-bold tabular-nums\">82/100</span>\n                </Badge>\n              </div>\n            </div>\n          </CardHeader>\n\n          <CardContent className=\"space-y-4 pt-0\">\n            {/* Tabs for Prompt A */}\n            <Tabs defaultValue=\"output\" className=\"w-full\">\n              <div className=\"flex items-center justify-between\">\n                <TabsList className=\"grid w-64 grid-cols-2\">\n                  <TabsTrigger value=\"output\">Generated Output</TabsTrigger>\n                  <TabsTrigger value=\"prompt\">System Prompt</TabsTrigger>\n                </TabsList>\n\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground hover:text-foreground h-7 px-2 text-xs\"\n                  onClick={() => copyToClipboard('prompt-a-code', promptAData.outputCode)}\n                >\n                  {copiedState['prompt-a-code'] ? (\n                    <Check className=\"text-success mr-1 size-3.5\" />\n                  ) : (\n                    <Copy className=\"mr-1 size-3.5\" />\n                  )}\n                  <span>{copiedState['prompt-a-code'] ? 'Copied' : 'Copy'}</span>\n                </Button>\n              </div>\n\n              {/* Output Code Tab */}\n              <TabsContent value=\"output\" className=\"mt-3\">\n                <div className=\"relative\">\n                  <pre className=\"border-border bg-muted/40 text-foreground max-h-[300px] overflow-x-auto overflow-y-auto rounded-md border p-3 font-mono text-xs leading-relaxed\">\n                    <code>{promptAData.outputCode}</code>\n                  </pre>\n                </div>\n              </TabsContent>\n\n              {/* System Prompt Tab */}\n              <TabsContent value=\"prompt\" className=\"mt-3\">\n                <div className=\"border-border bg-muted/20 text-foreground max-h-[300px] min-h-[160px] overflow-y-auto rounded-md border p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap\">\n                  {promptAData.systemPrompt}\n                </div>\n              </TabsContent>\n            </Tabs>\n\n            {/* Performance Metrics Bar */}\n            <div className=\"border-border bg-muted/20 grid grid-cols-3 gap-2 rounded-lg border p-3 text-center\">\n              <div className=\"space-y-0.5\">\n                <span className=\"text-muted-foreground flex items-center justify-center gap-1 text-xs\">\n                  <Clock className=\"size-3\" />\n                  <span>Latency</span>\n                </span>\n                <p className=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{promptAData.latency}</p>\n              </div>\n              <div className=\"space-y-0.5\">\n                <span className=\"text-muted-foreground flex items-center justify-center gap-1 text-xs\">\n                  <Cpu className=\"size-3\" />\n                  <span>Output Tokens</span>\n                </span>\n                <p className=\"text-foreground font-mono text-sm font-semibold tabular-nums\">\n                  {promptAData.outputTokens}\n                </p>\n              </div>\n              <div className=\"space-y-0.5\">\n                <span className=\"text-muted-foreground flex items-center justify-center gap-1 text-xs\">\n                  <Coins className=\"size-3\" />\n                  <span>Cost / Call</span>\n                </span>\n                <p className=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{promptAData.cost}</p>\n              </div>\n            </div>\n\n            {/* Judge Score & Critique Box */}\n            <div className=\"border-border bg-card/60 space-y-2 rounded-lg border p-3.5 shadow-xs\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <Scale className=\"text-muted-foreground size-4\" />\n                  <span className=\"text-foreground text-xs font-semibold\">Judge Score</span>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-foreground font-mono text-base font-bold tabular-nums\">\n                    {promptAData.judgeScore} / 100\n                  </span>\n                  <Badge variant=\"outline\" className=\"text-xs\">\n                    {promptAData.judgeStatus}\n                  </Badge>\n                </div>\n              </div>\n              <div className=\"border-border/60 bg-muted/40 text-muted-foreground flex items-start gap-2 rounded-md border p-2.5 text-xs leading-relaxed\">\n                <AlertCircle className=\"text-warning mt-0.5 size-3.5 shrink-0\" />\n                <span>\n                  <strong>Critique:</strong> {promptAData.critique}\n                </span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Right Column: Prompt B (Challenger with Rules - WINNER) */}\n        <Card className=\"border-success/40 bg-success/[0.015] border-success/30 dark:bg-success/10] shadow-xs\">\n          <CardHeader className=\"pb-3\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <Badge\n                    variant=\"success\"\n                    className=\"border-success/30 bg-success/15 text-success font-mono text-xs font-semibold\"\n                  >\n                    {promptBData.label} · {promptBData.variantName}\n                  </Badge>\n                  <Badge variant=\"success\" className=\"gap-1 font-semibold\">\n                    <Trophy className=\"size-3\" />\n                    <span>{promptBData.judgeStatus}</span>\n                  </Badge>\n                </div>\n                <p className=\"text-muted-foreground text-xs\">\n                  Model: <span className=\"text-foreground font-medium\">{promptBData.model}</span> · Temp:{' '}\n                  <span className=\"font-mono font-medium tabular-nums\">{promptBData.temperature}</span>\n                </p>\n              </div>\n              <div className=\"flex items-center gap-1.5\">\n                <Badge\n                  variant=\"success\"\n                  className=\"border-success/30 bg-success/10 text-success font-mono text-xs font-bold\"\n                >\n                  Score: <span className=\"ml-1 tabular-nums\">96/100</span>\n                </Badge>\n              </div>\n            </div>\n          </CardHeader>\n\n          <CardContent className=\"space-y-4 pt-0\">\n            {/* Tabs for Prompt B */}\n            <Tabs defaultValue=\"output\" className=\"w-full\">\n              <div className=\"flex items-center justify-between\">\n                <TabsList className=\"grid w-64 grid-cols-2\">\n                  <TabsTrigger value=\"output\">Generated Output</TabsTrigger>\n                  <TabsTrigger value=\"prompt\">System Prompt</TabsTrigger>\n                </TabsList>\n\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground hover:text-foreground h-7 px-2 text-xs\"\n                  onClick={() => copyToClipboard('prompt-b-code', promptBData.outputCode)}\n                >\n                  {copiedState['prompt-b-code'] ? (\n                    <Check className=\"text-success mr-1 size-3.5\" />\n                  ) : (\n                    <Copy className=\"mr-1 size-3.5\" />\n                  )}\n                  <span>{copiedState['prompt-b-code'] ? 'Copied' : 'Copy'}</span>\n                </Button>\n              </div>\n\n              {/* Output Code Tab */}\n              <TabsContent value=\"output\" className=\"mt-3\">\n                <div className=\"relative\">\n                  <pre className=\"border-border bg-muted/40 text-foreground max-h-[300px] overflow-x-auto overflow-y-auto rounded-md border p-3 font-mono text-xs leading-relaxed\">\n                    <code>{promptBData.outputCode}</code>\n                  </pre>\n                </div>\n              </TabsContent>\n\n              {/* System Prompt Tab */}\n              <TabsContent value=\"prompt\" className=\"mt-3\">\n                <div className=\"border-border bg-muted/20 text-foreground max-h-[300px] min-h-[160px] overflow-y-auto rounded-md border p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap\">\n                  {promptBData.systemPrompt}\n                </div>\n              </TabsContent>\n            </Tabs>\n\n            {/* Performance Metrics Bar with Deltas */}\n            <div className=\"border-success/20 bg-success/[0.04] grid grid-cols-3 gap-2 rounded-lg border p-3 text-center\">\n              <div className=\"space-y-0.5\">\n                <span className=\"text-muted-foreground flex items-center justify-center gap-1 text-xs\">\n                  <Clock className=\"text-success size-3\" />\n                  <span>Latency</span>\n                </span>\n                <p className=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{promptBData.latency}</p>\n                <p className=\"text-success text-success text-xs font-semibold tabular-nums\">\n                  {promptBData.latencyDelta}\n                </p>\n              </div>\n              <div className=\"space-y-0.5\">\n                <span className=\"text-muted-foreground flex items-center justify-center gap-1 text-xs\">\n                  <Cpu className=\"text-success size-3\" />\n                  <span>Output Tokens</span>\n                </span>\n                <p className=\"text-foreground font-mono text-sm font-semibold tabular-nums\">\n                  {promptBData.outputTokens}\n                </p>\n                <p className=\"text-success text-success text-xs font-semibold tabular-nums\">\n                  {promptBData.tokensDelta}\n                </p>\n              </div>\n              <div className=\"space-y-0.5\">\n                <span className=\"text-muted-foreground flex items-center justify-center gap-1 text-xs\">\n                  <Coins className=\"text-success size-3\" />\n                  <span>Cost / Call</span>\n                </span>\n                <p className=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{promptBData.cost}</p>\n                <p className=\"text-success text-success text-xs font-semibold tabular-nums\">{promptBData.costDelta}</p>\n              </div>\n            </div>\n\n            {/* Judge Score & Critique Box */}\n            <div className=\"border-success/30 bg-success/[0.04] space-y-2 rounded-lg border p-3.5 shadow-xs\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <Trophy className=\"text-success size-4\" />\n                  <span className=\"text-foreground text-xs font-semibold\">Judge Score</span>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-success text-success font-mono text-base font-bold tabular-nums\">\n                    {promptBData.judgeScore} / 100\n                  </span>\n                  <Badge variant=\"success\" className=\"text-xs font-semibold\">\n                    {promptBData.judgeDelta}\n                  </Badge>\n                </div>\n              </div>\n              <div className=\"text-muted-foreground border-success/30 bg-success/[0.06] flex items-start gap-2 rounded-md border p-2.5 text-xs leading-relaxed\">\n                <CheckCircle2 className=\"text-success mt-0.5 size-3.5 shrink-0\" />\n                <span>\n                  <strong>Critique:</strong> {promptBData.critique}\n                </span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Automated Judge Verdict Card */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardHeader className=\"pb-4\">\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <div className=\"flex items-center gap-2\">\n                <CardTitle className=\"text-foreground text-base font-semibold\">\n                  Automated LLM Judge Benchmark Verdict\n                </CardTitle>\n                <Badge variant=\"success\" className=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                  Prompt B Won 42 of 50 Tests · 84% Win Rate\n                </Badge>\n              </div>\n              <CardDescription className=\"mt-1 text-xs\">\n                Direct comparison of code quality, SSR compatibility, type correctness, and token economics across 50\n                golden evaluation prompts.\n              </CardDescription>\n            </div>\n\n            <div className=\"border-border/80 bg-muted/30 flex items-center gap-2 self-start rounded-lg border px-3 py-1.5 text-xs sm:self-auto\">\n              <span className=\"text-muted-foreground\">Judge Model:</span>\n              <span className=\"text-foreground font-mono font-semibold\">Claude 3.5 Sonnet (Temp 0.0)</span>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"space-y-6\">\n          {/* 4 Primary Aggregate Metric Summary Cards */}\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n            {summaryMetrics.map((metric) => (\n              <Card\n                key={metric.id}\n                className={cn(\n                  'border-border bg-card/70 hover:border-border/80 shadow-xs transition-colors',\n                  metric.highlight && 'border-success/30 bg-success/[0.02] dark:bg-success/10]',\n                )}\n              >\n                <CardHeader className=\"pb-2\">\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <CardTitle className=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n                      {metric.label}\n                    </CardTitle>\n                    <Badge variant={metric.badgeVariant} className=\"text-xs font-medium tabular-nums\">\n                      {metric.badge}\n                    </Badge>\n                  </div>\n                </CardHeader>\n                <CardContent className=\"space-y-1.5 pb-4\">\n                  <div className=\"flex items-baseline gap-1.5\">\n                    <span\n                      className={cn(\n                        'text-2xl font-bold tracking-tight tabular-nums sm:text-3xl',\n                        metric.highlight ? 'text-success' : 'text-foreground',\n                      )}\n                    >\n                      {metric.value}\n                    </span>\n                    {metric.subvalue && (\n                      <span className=\"text-muted-foreground text-xs font-normal tabular-nums\">\n                        ({metric.subvalue})\n                      </span>\n                    )}\n                  </div>\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">{metric.description}</p>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n\n          {/* Detailed Rubric Matrix Table */}\n          <div className=\"space-y-3\">\n            <div className=\"flex items-center justify-between\">\n              <h4 className=\"text-foreground text-sm font-semibold\">Evaluation Rubric &amp; Dimension Delta Matrix</h4>\n              <span className=\"text-muted-foreground text-xs\">Evaluated on AST parse &amp; runtime verification</span>\n            </div>\n\n            <div className=\"border-border overflow-hidden rounded-lg border\">\n              <div className=\"overflow-x-auto\">\n                <Table>\n                  <TableHeader className=\"bg-muted/40\">\n                    <TableRow className=\"border-border hover:bg-transparent\">\n                      <TableHead className=\"text-foreground text-xs font-semibold\">Evaluation Dimension</TableHead>\n                      <TableHead className=\"text-foreground text-xs font-semibold\">Prompt A (Baseline)</TableHead>\n                      <TableHead className=\"text-foreground text-xs font-semibold\">Prompt B (Challenger)</TableHead>\n                      <TableHead className=\"text-foreground text-right text-xs font-semibold\">Score Delta</TableHead>\n                      <TableHead className=\"text-foreground text-xs font-semibold\">Automated Judge Finding</TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {rubricDimensions.map((rubric) => (\n                      <TableRow\n                        key={rubric.id}\n                        className=\"border-border bg-success/[0.02] hover:bg-success/[0.05] bg-success/[0.03]\"\n                      >\n                        <TableCell className=\"py-3.5\">\n                          <div className=\"flex items-center gap-2\">\n                            <ShieldCheck className=\"text-success size-4\" />\n                            <span className=\"text-foreground text-xs font-semibold\">{rubric.name}</span>\n                          </div>\n                        </TableCell>\n                        <TableCell className=\"text-muted-foreground py-3.5 font-mono text-xs tabular-nums\">\n                          {rubric.promptAScore}\n                        </TableCell>\n                        <TableCell className=\"text-success text-success py-3.5 font-mono text-xs font-bold tabular-nums\">\n                          {rubric.promptBScore}\n                        </TableCell>\n                        <TableCell className=\"py-3.5 text-right\">\n                          <Badge variant=\"success\" className=\"text-xs font-semibold tabular-nums\">\n                            {rubric.delta}\n                          </Badge>\n                        </TableCell>\n                        <TableCell className=\"text-muted-foreground py-3.5 text-xs leading-relaxed\">\n                          {rubric.insight}\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n          </div>\n\n          {/* Sample Golden Dataset Top Runs Table */}\n          <div className=\"space-y-3\">\n            <div className=\"flex items-center justify-between\">\n              <h4 className=\"text-foreground text-sm font-semibold\">Golden Evaluation Suite (Top Sample Runs)</h4>\n              <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                5 of 50 Samples Shown\n              </Badge>\n            </div>\n\n            <div className=\"border-border overflow-hidden rounded-lg border\">\n              <div className=\"overflow-x-auto\">\n                <Table>\n                  <TableHeader className=\"bg-muted/40\">\n                    <TableRow className=\"border-border hover:bg-transparent\">\n                      <TableHead className=\"text-foreground text-xs font-semibold\">Test Case</TableHead>\n                      <TableHead className=\"text-foreground text-xs font-semibold\">Category</TableHead>\n                      <TableHead className=\"text-foreground text-right text-xs font-semibold\">Prompt A Score</TableHead>\n                      <TableHead className=\"text-foreground text-right text-xs font-semibold\">Prompt B Score</TableHead>\n                      <TableHead className=\"text-foreground text-right text-xs font-semibold\">Score Delta</TableHead>\n                      <TableHead className=\"text-foreground text-right text-xs font-semibold\">Winner</TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {goldenTests.map((gt) => (\n                      <TableRow key={gt.id} className=\"border-border hover:bg-muted/30 transition-colors\">\n                        <TableCell className=\"text-foreground py-3 font-mono text-xs font-medium\">{gt.name}</TableCell>\n                        <TableCell className=\"py-3 text-xs\">\n                          <Badge variant=\"secondary\" className=\"text-xs\">\n                            {gt.category}\n                          </Badge>\n                        </TableCell>\n                        <TableCell className=\"text-muted-foreground py-3 text-right font-mono text-xs tabular-nums\">\n                          {gt.promptAScore} / 100\n                        </TableCell>\n                        <TableCell className=\"text-success text-success py-3 text-right font-mono text-xs font-bold tabular-nums\">\n                          {gt.promptBScore} / 100\n                        </TableCell>\n                        <TableCell className=\"py-3 text-right\">\n                          <span className=\"text-success text-success font-mono text-xs font-semibold tabular-nums\">\n                            {gt.delta} pts\n                          </span>\n                        </TableCell>\n                        <TableCell className=\"py-3 text-right\">\n                          <Badge variant=\"success\" className=\"text-xs font-semibold\">\n                            {gt.winner}\n                          </Badge>\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n\nexport default PromptAbTestingComparator\n",
      "type": "registry:page",
      "target": "~/components/blocks/PromptAbTestingComparator.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/table.json",
    "https://uipkge.dev/r/react/tabs.json"
  ],
  "description": "Side-by-side prompt variation comparison shootout with automated LLM judge scoring, win rates, and token diffs. Features benchmark test payload, side-by-side arena with latency, cost, and judge critique, plus aggregate win-rate scorecard.",
  "categories": [
    "ai",
    "analytics",
    "dashboard"
  ]
}