{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "prompt-ab-testing-comparator", "title": "Prompt Ab Testing Comparator", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/prompt-ab-testing-comparator/prompt-ab-testing-comparator.component.ts", "content": "// Side-by-side prompt variation comparison shootout: benchmark test payload, Prompt A\n// (baseline) vs Prompt B (challenger) arena with latency / cost / judge critique, plus an\n// aggregate win-rate scorecard with rubric matrix and golden runs. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n AlertCircle,\n Check,\n CheckCircle2,\n Clock,\n Code2,\n Coins,\n Copy,\n Cpu,\n LucideAngularModule,\n Play,\n Rocket,\n Scale,\n ShieldCheck,\n Sparkles,\n Terminal,\n Trophy,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\ninterface TestCase {\n id: string\n number: string\n title: string\n prompt: string\n componentTarget: string\n category: string\n}\n\nconst testCases: TestCase[] = [\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 \n\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 \n\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 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 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 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 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 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 },\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 },\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 },\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 },\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 },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-prompt-ab-testing-comparator, [ui-prompt-ab-testing-comparator]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n \n @if (isPromoted()) {\n \n
\n
\n \n
\n
\n

\n Prompt B (Challenger with Sidecar Isolation) Promoted to Production\n

\n

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

\n
\n
\n Active in Production \n
\n }\n\n \n
\n
\n
\n

\n {{ experimentTitle }}\n

\n \n {{ testSampleCount }}\n \n \n \n Prompt B Winner · +18.4% Quality Lift\n \n
\n

\n Automated LLM Judge Shootout · Evaluator:\n Claude 3.5 Sonnet (Temp 0.0) ·\n 50 Test Cases\n

\n
\n\n \n
\n \n @if (isRunning()) {\n \n } @else {\n \n }\n {{ isRunning() ? 'Evaluating 50 Prompts...' : 'Run A/B Comparison' }}\n
\n
\n\n \n
\n
\n
\n
\n
\n \n
\n
\n

Common Input Test Prompt (Evaluation Benchmark)

\n

\n Standardized input payload dispatched to both prompt candidate configurations\n

\n
\n
\n
\n {{ currentTestCase().number }} of 50 \n \n {{ currentTestCase().category }}\n \n
\n
\n
\n\n
\n \n \n
\n \n \"{{ currentTestCase().prompt }}\" \n
\n \n @if (copiedState()['test-prompt']) {\n \n } @else {\n \n }\n {{ copiedState()['test-prompt'] ? 'Copied' : 'Copy' }}\n \n
\n\n \n
\n Benchmark Spec:\n \n target: {{ currentTestCase().componentTarget }}\n \n \n framework: Vue 3.5 SFC\n \n \n engine: class-variance-authority + reka-ui\n \n \n isolation: zero-ssr-circular-imports\n \n
\n
\n
\n\n \n
\n \n
\n
\n
\n
\n
\n \n {{ promptA.label }} · {{ promptA.variantName }}\n \n
\n

\n Model: {{ promptA.model }} · Temp:\n {{ promptA.temperature }}\n

\n
\n
\n \n Score: 82/100\n \n
\n
\n
\n\n
\n \n \n
\n \n \n \n \n\n \n @if (copiedState()['prompt-a-code']) {\n \n } @else {\n \n }\n {{ copiedState()['prompt-a-code'] ? 'Copied' : 'Copy' }}\n \n
\n\n \n
\n {{ promptA.outputCode }}\n
\n \n\n \n \n {{ promptA.systemPrompt }}\n
\n \n \n\n \n
\n
\n \n \n Latency\n \n

\n {{ promptA.latency }}\n

\n
\n
\n \n \n Output Tokens\n \n

\n {{ promptA.outputTokens }}\n

\n
\n
\n \n \n Cost / Call\n \n

\n {{ promptA.cost }}\n

\n
\n
\n\n \n
\n
\n
\n \n Judge Score\n
\n
\n \n {{ promptA.judgeScore }} / 100\n \n \n {{ promptA.judgeStatus }}\n \n
\n
\n \n \n Critique: {{ promptA.critique }}\n
\n
\n
\n \n\n \n
\n
\n
\n
\n
\n \n {{ promptB.label }} · {{ promptB.variantName }}\n \n \n \n {{ promptB.judgeStatus }}\n \n
\n

\n Model: {{ promptB.model }} · Temp:\n {{ promptB.temperature }}\n

\n
\n
\n \n Score: 96/100\n \n
\n
\n
\n\n
\n \n \n
\n \n \n \n \n\n \n @if (copiedState()['prompt-b-code']) {\n \n } @else {\n \n }\n {{ copiedState()['prompt-b-code'] ? 'Copied' : 'Copy' }}\n \n
\n\n \n
\n {{ promptB.outputCode }}\n
\n \n\n \n \n {{ promptB.systemPrompt }}\n
\n \n \n\n \n
\n
\n \n \n Latency\n \n

\n {{ promptB.latency }}\n

\n

\n {{ promptB.latencyDelta }}\n

\n
\n
\n \n \n Output Tokens\n \n

\n {{ promptB.outputTokens }}\n

\n

\n {{ promptB.tokensDelta }}\n

\n
\n
\n \n \n Cost / Call\n \n

\n {{ promptB.cost }}\n

\n

\n {{ promptB.costDelta }}\n

\n
\n
\n\n \n
\n
\n
\n \n Judge Score\n
\n
\n \n {{ promptB.judgeScore }} / 100\n \n \n {{ promptB.judgeDelta }}\n \n
\n
\n \n \n Critique: {{ promptB.critique }}\n
\n
\n \n \n \n\n \n
\n
\n
\n
\n
\n

\n Automated LLM Judge Benchmark Verdict\n

\n \n Prompt B Won 42 of 50 Tests · 84% Win Rate\n \n
\n

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

\n
\n\n \n Judge Model:\n Claude 3.5 Sonnet (Temp 0.0)\n
\n
\n
\n\n
\n \n
\n @for (metric of summaryMetrics; track metric.id) {\n \n
\n
\n

\n {{ metric.label }}\n

\n \n {{ metric.badge }}\n \n
\n
\n
\n
\n \n {{ metric.value }}\n \n @if (metric.subvalue) {\n \n ({{ metric.subvalue }})\n \n }\n
\n

\n {{ metric.description }}\n

\n
\n
\n }\n
\n\n \n
\n
\n

Evaluation Rubric & Dimension Delta Matrix

\n Evaluated on AST parse & runtime verification\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n @for (rubric of rubricDimensions; track rubric.id) {\n \n \n \n \n {{ rubric.promptBScore }}\n \n \n \n \n }\n \n
Evaluation DimensionPrompt A (Baseline)Prompt B (Challenger)Score DeltaAutomated Judge Finding
\n
\n \n {{ rubric.name }}\n
\n 		\n {{ rubric.promptAScore }}\n \n \n {{ rubric.delta }}\n \n \n {{ rubric.insight }}\n
\n
\n
\n
\n\n \n
\n
\n

Golden Evaluation Suite (Top Sample Runs)

\n 5 of 50 Samples Shown\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @for (gt of goldenTests; track gt.id) {\n \n \n \n \n \n {{ gt.promptBScore }} / 100\n \n \n \n \n }\n \n
Test CaseCategoryPrompt A ScorePrompt B ScoreScore DeltaWinner
\n {{ gt.name }}\n \n \n {{ gt.category }}\n \n \n {{ gt.promptAScore }} / 100\n \n \n {{ gt.delta }} pts\n \n \n \n {{ gt.winner }}\n \n
\n
\n
\n
\n \n \n \n `,\n})\nexport class UiPromptAbTestingComparatorComponent {\n protected readonly AlertCircle = AlertCircle\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Code2 = Code2\n protected readonly Coins = Coins\n protected readonly Copy = Copy\n protected readonly Cpu = Cpu\n protected readonly Play = Play\n protected readonly Rocket = Rocket\n protected readonly Scale = Scale\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Sparkles = Sparkles\n protected readonly Terminal = Terminal\n protected readonly Trophy = Trophy\n protected readonly cn = cn\n\n protected readonly promptA = promptAData\n protected readonly promptB = promptBData\n protected readonly rubricDimensions = rubricDimensions\n protected readonly summaryMetrics = summaryMetrics\n protected readonly goldenTests = goldenTests\n\n @Input() experimentTitle = 'Prompt Optimization: Vue SFC AST Component Generator'\n @Input() testSampleCount = '50 Evaluation Prompts'\n @Input('class') className?: string\n\n readonly isRunning = signal(false)\n readonly isPromoted = signal(false)\n readonly copiedState = signal>({})\n readonly selectedTestCase = signal('test-18')\n\n private copyTimer: ReturnType | undefined\n private runTimer: ReturnType | undefined\n\n constructor() {\n const destroyRef = inject(DestroyRef)\n destroyRef.onDestroy(() => {\n clearTimeout(this.copyTimer)\n clearTimeout(this.runTimer)\n window.removeEventListener('keydown', this.keyHandler)\n })\n window.addEventListener('keydown', this.keyHandler)\n }\n\n private readonly keyHandler = (e: KeyboardEvent) => {\n if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {\n e.preventDefault()\n this.runComparison()\n }\n }\n\n readonly currentTestCase = computed(() => {\n return testCases.find((tc) => tc.id === this.selectedTestCase()) ?? testCases[0]!\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n runComparison(): void {\n if (this.isRunning()) return\n this.isRunning.set(true)\n clearTimeout(this.runTimer)\n this.runTimer = setTimeout(() => this.isRunning.set(false), 1200)\n }\n\n promotePromptB(): void {\n this.isPromoted.set(true)\n }\n\n copyToClipboard(key: string, text: string): void {\n try {\n navigator.clipboard?.writeText(text)\n } catch {\n // Clipboard unavailable (e.g. jsdom) — still flip the copied indicator.\n }\n this.copiedState.update((prev) => ({ ...prev, [key]: true }))\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => {\n this.copiedState.update((prev) => ({ ...prev, [key]: false }))\n }, 2000)\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/prompt-ab-testing-comparator/prompt-ab-testing-comparator.component.ts" }, { "path": "packages/registry-angular/blocks/prompt-ab-testing-comparator/index.ts", "content": "export { UiPromptAbTestingComparatorComponent } from './prompt-ab-testing-comparator.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/prompt-ab-testing-comparator/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/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" ] }