62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T9c06,'use client' import * as React from 'react' import { AlertCircle, Check, CheckCircle2, Clock, Code2, Coins, Copy, Cpu, Play, Rocket, Scale, ShieldCheck, Sparkles, Terminal, Trophy, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' export interface PromptAbTestingComparatorProps { experimentTitle?: string testSampleCount?: string className?: string } const testCases = [ { id: 'test-18', number: '#18', title: 'Button Component with CVA Variants', prompt: 'Generate a polymorphic Button component with cva variants in Vue 3.5 `, subScores: [ { label: 'SSR Safety', score: 68, status: 'Warning' }, { label: 'Type Safety', score: 84, status: 'Good' }, { label: 'Token Economy', score: 88, status: 'Good' }, { label: 'Style Conformance', score: 88, status: 'Good' }, ], } const promptBData = { id: 'prompt-b', label: 'Prompt B', variantName: 'Challenger (With Rules)', model: 'Claude 3.5 Sonnet', temperature: '0.7', maxTokens: 2048, latency: '1.28s', latencyDelta: '-0.14s (-9.8%)', outputTokens: 320, tokensDelta: '-20 tok (-5.9%)', cost: '$0.0016', costDelta: '-$0.0002 (-11.1%)', judgeScore: 96, judgeDelta: '+14 pts', judgeStatus: 'Winner · +14 pts', critique: 'Clean architectural separation with .variants.ts sidecar and strict 120-col Prettier formatting.', 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 `, subScores: [ { label: 'SSR Safety', score: 98, status: 'Optimal' }, { label: 'Type Safety', score: 96, status: 'Optimal' }, { label: 'Token Economy', score: 94, status: 'Optimal' }, { label: 'Style Conformance', score: 96, status: 'Optimal' }, ], } const rubricDimensions = [ { id: 'ssr-safety', name: 'SSR Safety & Circular Import Guard', promptAScore: '68 / 100', promptBScore: '98 / 100', delta: '+30 pts', isWinner: true, insight: 'Prompt B isolates variants into button.variants.ts, preventing component <-> index.ts SSR deadlocks.', }, { id: 'polymorphism', name: 'Polymorphism & Reka UI Primitive', promptAScore: '84 / 100', promptBScore: '96 / 100', delta: '+12 pts', isWinner: true, insight: 'Prompt B wraps Reka UI Primitive with asChild and data-slot attributes for full slot delegation.', }, { id: 'typescript-typing', name: 'TypeScript HTMLAttributes & Variants', promptAScore: '82 / 100', promptBScore: '95 / 100', delta: '+13 pts', isWinner: true, insight: "Uses HTMLAttributes['class'] and ButtonVariants['variant'] instead of generic string props.", }, { id: 'token-efficiency', name: 'Token Generation Efficiency', promptAScore: '88 / 100 (340 tok)', promptBScore: '94 / 100 (320 tok)', delta: '+6 pts (-5.9% tok)', isWinner: true, insight: 'Direct script setup syntax eliminates 20 tokens of redundant wrapper code per generation.', }, { id: 'style-conformance', name: 'Prettier & 120-Col Print Width', promptAScore: '88 / 100', promptBScore: '97 / 100', delta: '+9 pts', isWinner: true, insight: 'Strict adherence to single quotes, no semicolons, 2-space indentation, and sorted utility classes.', }, ] const summaryMetrics = [ { id: 'win-rate', label: 'Overall Win Rate', value: '84.0%', subvalue: '42 of 50 Tests Won', badge: 'Dominant Win', badgeVariant: 'success' as const, description: 'Prompt B outperformed or matched Prompt A in 47 / 50 benchmark cases.', highlight: true, }, { id: 'quality-lift', label: 'Quality Score Lift', value: '+18.4%', subvalue: '96.1 vs 81.2 Avg Score', badge: '+14.9 pts avg', badgeVariant: 'success' as const, description: 'Statistically significant improvement in architectural correctness.', highlight: true, }, { id: 'latency-delta', label: 'Avg Response Latency', value: '1.28s', subvalue: '-9.8% vs Baseline (1.42s)', badge: '-140ms faster', badgeVariant: 'secondary' as const, description: 'Lower token payload reduces end-to-end LLM response streaming latency.', highlight: false, }, { id: 'token-savings', label: 'Avg Token Economy', value: '320 tok', subvalue: '-5.9% Token Reduction', badge: '20 tok / call saved', badgeVariant: 'secondary' as const, description: 'Est. $20.00 / month cost savings per 100,000 component generation calls.', highlight: false, }, ] const goldenTests = [ { id: 'gt-1', name: '#01 Button with CVA Variants', category: 'Control', promptAScore: '82', promptBScore: '96', delta: '+14', winner: 'Prompt B', latencyA: '1.42s', latencyB: '1.28s', }, { id: 'gt-2', name: '#02 Card Container with Action', category: 'Layout', promptAScore: '79', promptBScore: '98', delta: '+19', winner: 'Prompt B', latencyA: '1.51s', latencyB: '1.34s', }, { id: 'gt-3', name: '#03 Tabs with Indicator Slider', category: 'Navigation', promptAScore: '80', promptBScore: '95', delta: '+15', winner: 'Prompt B', latencyA: '1.64s', latencyB: '1.41s', }, { id: 'gt-4', name: '#04 Semantic Status Badge', category: 'Feedback', promptAScore: '86', promptBScore: '97', delta: '+11', winner: 'Prompt B', latencyA: '1.15s', latencyB: '1.08s', }, { id: 'gt-5', name: '#05 Dropdown Menu Compound', category: 'Overlay', promptAScore: '81', promptBScore: '94', delta: '+13', winner: 'Prompt B', latencyA: '1.58s', latencyB: '1.39s', }, ] export function PromptAbTestingComparator({ experimentTitle = 'Prompt Optimization: Vue SFC AST Component Generator', testSampleCount = '50 Evaluation Prompts', className, }: PromptAbTestingComparatorProps) { const [isRunning, setIsRunning] = React.useState(false) const [isPromoted, setIsPromoted] = React.useState(false) const [copiedState, setCopiedState] = React.useState>({}) const [selectedTestCase] = React.useState('test-18') const currentTestCase = React.useMemo(() => { return testCases.find((tc) => tc.id === selectedTestCase) ?? testCases[0] }, [selectedTestCase]) const runComparison = React.useCallback(() => { if (isRunning) return setIsRunning(true) setTimeout(() => { setIsRunning(false) }, 1200) }, [isRunning]) const promotePromptB = React.useCallback(() => { setIsPromoted(true) }, []) const copyToClipboard = React.useCallback((key: string, text: string) => { navigator.clipboard?.writeText(text) setCopiedState((prev) => ({ ...prev, [key]: true })) setTimeout(() => { setCopiedState((prev) => ({ ...prev, [key]: false })) }, 2000) }, []) React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault() runComparison() } } window.addEventListener('keydown', handleKeyDown) return () => window.removeEventListener('keydown', handleKeyDown) }, [runComparison]) return (

{/* Production Promotion Success Banner (if promoted) */} {isPromoted && (

Prompt B (Challenger with Sidecar Isolation) Promoted to Production

100% of live component generation traffic is now routed through Prompt B. Expected quality lift: +18.4%.

Active in Production

)} {/* Header Section */}

{experimentTitle}

{testSampleCount}

Automated LLM Judge Shootout · Evaluator:{' '} Claude 3.5 Sonnet (Temp 0.0) ·{' '} 50 Test Cases

{/* Action Buttons */}

{/* Common Input Test Prompt Card */}

Common Input Test Prompt (Evaluation Benchmark) Standardized input payload dispatched to both prompt candidate configurations

{currentTestCase.number} of 50 {currentTestCase.category}

{/* Test Prompt Text */}

"{currentTestCase.prompt}"

{/* Meta chips / specifications */}

Benchmark Spec: target: {currentTestCase.componentTarget} framework: Vue 3.5 SFC engine: class-variance-authority + reka-ui isolation: zero-ssr-circular-imports

{/* 2-Column Side-by-Side Prompt Arena */}

{/* Left Column: Prompt A (Baseline - Control) */}

{promptAData.label} · {promptAData.variantName}

Model: {promptAData.model} · Temp:{' '} {promptAData.temperature}

Score: 82/100

{/* Tabs for Prompt A */}

Generated Output System Prompt

{/* Output Code Tab */}

                    {promptAData.outputCode}

{/* System Prompt Tab */}

{promptAData.systemPrompt}

{/* Performance Metrics Bar */}

Latency

{promptAData.latency}

Output Tokens

{promptAData.outputTokens}

Cost / Call

{promptAData.cost}

{/* Judge Score & Critique Box */}

Judge Score

{promptAData.judgeScore} / 100 {promptAData.judgeStatus}

Critique: {promptAData.critique}

{/* Right Column: Prompt B (Challenger with Rules - WINNER) */}

{promptBData.label} · {promptBData.variantName} {promptBData.judgeStatus}

Model: {promptBData.model} · Temp:{' '} {promptBData.temperature}

Score: 96/100

{/* Tabs for Prompt B */}

Generated Output System Prompt

{/* Output Code Tab */}

                    {promptBData.outputCode}

{/* System Prompt Tab */}

{promptBData.systemPrompt}

{/* Performance Metrics Bar with Deltas */}

Latency

{promptBData.latency}

{promptBData.latencyDelta}

Output Tokens

{promptBData.outputTokens}

{promptBData.tokensDelta}

Cost / Call

{promptBData.cost}

{promptBData.costDelta}

{/* Judge Score & Critique Box */}

Judge Score

{promptBData.judgeScore} / 100 {promptBData.judgeDelta}

Critique: {promptBData.critique}

{/* Automated Judge Verdict Card */}

Automated LLM Judge Benchmark Verdict Prompt B Won 42 of 50 Tests · 84% Win Rate

Direct comparison of code quality, SSR compatibility, type correctness, and token economics across 50 golden evaluation prompts.

Judge Model: Claude 3.5 Sonnet (Temp 0.0)

{/* 4 Primary Aggregate Metric Summary Cards */}

{summaryMetrics.map((metric) => (

{metric.label} {metric.badge}

{metric.value} {metric.subvalue && ( ({metric.subvalue}) )}

{metric.description}

))}

{/* Detailed Rubric Matrix Table */}

Evaluation Rubric & Dimension Delta Matrix

Evaluated on AST parse & runtime verification

Evaluation Dimension Prompt A (Baseline) Prompt B (Challenger) Score Delta Automated Judge Finding {rubricDimensions.map((rubric) => (

{rubric.name}

{rubric.promptAScore} {rubric.promptBScore} {rubric.delta} {rubric.insight} ))}

{/* Sample Golden Dataset Top Runs Table */}

Golden Evaluation Suite (Top Sample Runs)

5 of 50 Samples Shown

Test Case Category Prompt A Score Prompt B Score Score Delta Winner {goldenTests.map((gt) => ( {gt.name} {gt.category} {gt.promptAScore} / 100 {gt.promptBScore} / 100 {gt.delta} pts {gt.winner} ))}

) } export default PromptAbTestingComparator 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/prompt-ab-testing-comparator/PromptAbTestingComparator.tsx","content":"$64","type":"registry:page","target":"~/components/blocks/PromptAbTestingComparator.tsx"}],"className":"h-[70svh] min-h-80"}]]}]