{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "ai-code-review-assistant", "title": "Ai Code Review Assistant", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/ai-code-review-assistant/ai-code-review-assistant.component.ts", "content": "// Edit this file to change the sample diff, AI annotations, chat thread and copy.\n// Patches toggle on click; \"Apply All AI Patches\" applies both after a short delay.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Bot,\n Check,\n CheckCheck,\n CircleCheck,\n CodeXml,\n Copy,\n Cpu,\n FileCodeCorner,\n GitBranch,\n GitCommitHorizontal,\n GitPullRequest,\n Layers,\n LucideAngularModule,\n MessageSquare,\n RefreshCw,\n RotateCcw,\n Send,\n ShieldCheck,\n Sparkles,\n TrendingDown,\n TrendingUp,\n X,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\nexport interface DiffLine {\n id: string\n oldNum?: number\n newNum?: number\n type: 'neutral' | 'deletion' | 'addition' | 'hunk'\n text: string\n annotationId?: string\n}\n\nexport interface ChatMessage {\n id: string\n sender: 'ai' | 'user'\n author: string\n timestamp: string\n text: string\n codeSnippet?: string\n}\n\nconst initialChatMessages: ChatMessage[] = [\n {\n id: 'msg-1',\n sender: 'ai',\n author: 'Glia AI Code Reviewer',\n timestamp: '2 min ago',\n text: \"I completed the AST review for PR #412. Migrating to OKLCH perceptual contrast is a massive win. I've pinpointed 2 optimization opportunities to maximize token efficiency and eliminate 20 DOM variables.\",\n },\n {\n id: 'msg-2',\n sender: 'user',\n author: 'Elena Rostova',\n timestamp: '1 min ago',\n text: 'Why is `color-mix(in oklab, ... 10%, transparent)` better than declaring separate opacity custom properties?',\n },\n {\n id: 'msg-3',\n sender: 'ai',\n author: 'Glia AI Code Reviewer',\n timestamp: 'Just now',\n text: 'Direct OKLab color-mix calculates the alpha composite on the GPU shader pipeline without registering 20 CSS custom properties in the browser style recalculation tree. This cuts ~1.8 KB from DOM memory while keeping luminance completely linear.',\n codeSnippet: 'color-mix(in oklab, var(--primary) 10%, transparent)',\n },\n]\n\nfunction buildDiffLines(applied: ReadonlySet): DiffLine[] {\n return [\n { id: 'hunk-1', type: 'hunk', text: '@@ -32,18 +32,24 @@ packages/shared/styles/tailwind.css' },\n { id: 'line-32', oldNum: 32, newNum: 32, type: 'neutral', text: '@import \"tailwindcss\";' },\n { id: 'line-33', oldNum: 33, newNum: 33, type: 'neutral', text: '@import \"tw-animate-css\";' },\n { id: 'line-34', oldNum: 34, newNum: 34, type: 'neutral', text: '' },\n { id: 'line-35', oldNum: 35, newNum: 35, type: 'neutral', text: '@theme inline {' },\n { id: 'line-36', oldNum: 36, newNum: 36, type: 'neutral', text: ' --font-sans: \"Inter\", system-ui, sans-serif;' },\n { id: 'line-37', oldNum: 37, newNum: 37, type: 'neutral', text: ' --font-mono: \"DM Mono\", monospace;' },\n {\n id: 'line-38',\n oldNum: 38,\n type: 'deletion',\n text: '- --primary-10: color-mix(in srgb, var(--primary) 10%, #ffffff);',\n },\n {\n id: 'line-39',\n oldNum: 39,\n type: 'deletion',\n text: '- --primary-20: color-mix(in srgb, var(--primary) 20%, #ffffff);',\n },\n { id: 'line-40', oldNum: 40, type: 'deletion', text: '- --primary-hover: hsl(var(--primary-hsl) / 0.85);' },\n {\n id: 'line-41',\n newNum: 38,\n type: 'addition',\n text: '+ --primary-hover: oklch(from var(--primary) calc(l * 0.92) c h);',\n },\n {\n id: 'line-42',\n newNum: 39,\n type: 'addition',\n text: applied.has('patch-1')\n ? '+ --primary-accent: color-mix(in oklab, var(--primary) 10%, transparent); /* [Glia AI Patch Applied] */'\n : '+ --primary-accent: color-mix(in oklab, var(--primary) 15%, transparent);',\n annotationId: 'patch-1',\n },\n { id: 'line-43', oldNum: 41, newNum: 40, type: 'neutral', text: ' --color-background: var(--background);' },\n { id: 'line-44', oldNum: 42, newNum: 41, type: 'neutral', text: ' --color-foreground: var(--foreground);' },\n { id: 'line-45', oldNum: 43, type: 'deletion', text: '- --muted-border: rgb(229 231 235 / 0.6);' },\n { id: 'line-46', newNum: 42, type: 'addition', text: '+ --muted-border: oklch(0.92 0.005 240 / 0.8);' },\n { id: 'line-47', oldNum: 44, newNum: 43, type: 'neutral', text: ' --color-border: var(--border);' },\n { id: 'line-48', oldNum: 45, newNum: 44, type: 'neutral', text: ' --color-input: var(--input);' },\n { id: 'line-49', oldNum: 46, type: 'deletion', text: '- --ring-offset-width: 2px;' },\n { id: 'line-50', newNum: 45, type: 'addition', text: '+ --color-ring: oklch(from var(--primary) l c h / 0.5);' },\n {\n id: 'line-51',\n newNum: 46,\n type: 'addition',\n text: applied.has('patch-2')\n ? '+ --ring-focus-shadow: 0 0 0 2px var(--color-ring); /* [Glia AI Patch Applied] */'\n : '+ --ring-focus-shadow: 0 0 0 2px var(--color-ring);',\n annotationId: 'patch-2',\n },\n { id: 'line-52', oldNum: 47, newNum: 47, type: 'neutral', text: ' --color-card: var(--card);' },\n {\n id: 'line-53',\n oldNum: 48,\n newNum: 48,\n type: 'neutral',\n text: ' --color-card-foreground: var(--card-foreground);',\n },\n { id: 'line-54', oldNum: 49, newNum: 49, type: 'neutral', text: '}' },\n ]\n}\n\n/**\n * AiCodeReviewAssistant -- the React block, 1:1: a PR header with review status, four\n * health cards, an annotated unified diff (with 1-click AI patches) in tabs, and an\n * AI chat thread that opens from the header or the annotations.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-ai-code-review-assistant, [ui-ai-code-review-assistant]',\n standalone: true,\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarImageComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCardDescriptionComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n UiTabsContentComponent,\n ],\n host: {\n 'data-uipkge': '',\n 'data-slot': 'ai-code-review-assistant',\n '[class]': 'hostClass',\n },\n template: `\n \n
\n
\n
\n
\n \n
\n \n \n PR #{{ prNumber }}\n \n

{{ prTitle }}

\n
\n\n \n
\n
\n \n \n ER\n \n {{ authorName }}\n (@{{ authorHandle }})\n
\n\n \n\n
\n \n {{ targetBranch }}\n ←\n {{ sourceBranch }}\n
\n\n \n\n
\n \n 8f2a49b\n ·\n +142\n -68\n
\n
\n
\n\n \n
\n @if (!allPatchesApplied()) {\n \n \n Review Completed · 2 Suggestions · 0 Security Flaws\n \n } @else {\n \n \n All Patches Applied · Ready to Merge\n \n }\n\n @if (!allPatchesApplied()) {\n \n @if (isApplyingAll()) {\n \n } @else {\n \n }\n {{ isApplyingAll() ? 'Applying Patches...' : 'Apply All AI Patches' }}\n \n } @else {\n \n \n Reset State\n \n }\n\n \n \n AI Chat (3)\n \n
\n
\n
\n
\n\n \n
\n \n
\n
\n
\n Code Quality Score\n
\n \n
\n
\n
\n
{{ qualityScore() }} / 100
\n

\n Clean Architecture · +14 pts vs baseline\n

\n
\n
\n \n 0 Anti-patterns · Clean CVA tokens\n
\n
\n
\n\n \n
\n
\n
\n Security & SAST Check\n
\n \n
\n
\n
\n
0 Vulnerabilities
\n

\n 0 Vulnerabilities Detected · Pass\n

\n
\n
\n \n OWASP Top 10 validated · Zero leaks\n
\n
\n
\n\n \n
\n
\n
\n Performance & Bundle Impact\n
\n \n
\n
\n
\n
-4.2 KB (-18%)
\n

Bundle Size Reduction · 14.8 KB → 10.6 KB

\n
\n
\n \n 20 CSS variables eliminated from DOM\n
\n
\n
\n\n \n
\n
\n
\n Test Coverage Delta\n
\n \n
\n
\n
\n
+2.4% Coverage
\n

48 new tests · 94.8% total coverage

\n
\n
\n \n 100% token regression suites pass\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n

\n packages/shared/styles/tailwind.css\n

\n CSS / Tailwind v4\n +24 -12 lines\n
\n

\n AST parser inspected 162 declarations · 2 optimization nodes annotated\n

\n
\n\n
\n \n @if (copiedDiff()) {\n \n } @else {\n \n }\n {{ copiedDiff() ? 'Copied Raw Diff' : 'Copy Raw Diff' }}\n \n
\n
\n
\n\n
\n
\n
\n \n \n \n
\n\n \n
\n \n
\n Unified Diff View\n ·\n +24 additions\n ·\n -12 deletions\n
\n AST Analyzed\n
\n\n \n
\n @for (line of diffLines(); track line.id) {\n @if (line.type === 'hunk') {\n \n \n {{ line.text }}\n
\n } @else {\n \n
\n {{\n line.oldNum ?? ''\n }}\n {{\n line.newNum ?? ''\n }}\n {{ prefix(line) }}\n {{ line.text }}\n
\n }\n\n \n @if (line.annotationId === 'patch-1') {\n \n
\n
\n
\n
\n \n
\n Glia AI Code Review · AST Suggestion \n \n \n Performance Optimization · High Impact\n \n Confidence 99.4% · AST Node #42\n
\n\n \n

\n Using\n color-mix(in oklab, var(--primary) 10%, transparent)\n achieves identical contrast without injecting 20 additional CSS variables into the global\n DOM.\n

\n\n \n
\n
\n Proposed AST Patch Replacement (Line 39):\n
\n
\n + --primary-accent: color-mix(in oklab, var(--primary) 10%, transparent);\n
\n
\n
\n\n \n
\n \n @if (copiedPatchId() === 'patch-1') {\n \n } @else {\n \n }\n {{ copiedPatchId() === 'patch-1' ? 'Copied' : 'Copy Patch' }}\n \n\n \n \n Explain in Chat\n \n\n \n @if (isApplied('patch-1')) {\n \n } @else {\n \n }\n {{ isApplied('patch-1') ? 'Patch Applied ✓' : 'Apply Suggestion (1-Click)' }}\n \n
\n
\n
\n }\n\n \n @if (line.annotationId === 'patch-2') {\n \n
\n
\n
\n
\n \n
\n Glia AI Code Review · Gamut Engine \n \n \n Accessibility & Gamut · WCAG AAA Verified\n \n Confidence 98.7% · AST Node #51\n
\n\n \n

\n OKLCH relative gamut mapping guarantees 7:1 contrast ratio across both light and dark themes\n with zero perceptual hue shift on wide-gamut displays.\n

\n\n \n
\n
\n Verified Relative Color Syntax:\n
\n
\n + --ring-focus-shadow: 0 0 0 2px var(--color-ring);\n
\n
\n
\n\n \n
\n \n \n Explain in Chat\n \n\n \n @if (isApplied('patch-2')) {\n \n } @else {\n \n }\n {{ isApplied('patch-2') ? 'Patch Applied ✓' : 'Apply Suggestion (1-Click)' }}\n \n
\n
\n
\n }\n }\n
\n \n \n\n \n
\n
\n
\n
\n
\n \n Rule 1: Zero Global DOM Pollution\n
\n Pass · Verified\n
\n

\n Eliminates 20 static opacity custom properties. All transparency channels are evaluated dynamically in\n OKLab color space.\n

\n
\n\n
\n
\n
\n \n Rule 2: Perceptual Uniformity (ΔE < 0.8)\n
\n Pass · Verified\n
\n

\n OKLCH lightness (L) scale provides mathematical linearity. Step changes in lightness feel uniform to\n human perception across all hues.\n

\n
\n\n
\n
\n
\n \n Rule 3: PostCSS Lightning Fallbacks\n
\n Pass · Verified\n
\n

\n Tailwind v4 engine generates automated sRGB fallback values for legacy web clients while streaming raw\n OKLCH to modern browsers.\n

\n
\n\n
\n
\n
\n \n Rule 4: WCAG 2.2 AAA Contrast Ratios\n
\n Pass · 7.1:1 Ratio\n
\n

\n Background to foreground contrast exceeds the 7:1 ratio threshold required for government and\n enterprise accessible software.\n

\n
\n
\n
\n\n \n
\n
\n
\n Token Architecture Comparison: Legacy vs. OKLCH Engine\n
\n
\n
\n Evaluation Metric\n Legacy HSL / sRGB\n OKLCH Perceptual Engine\n
\n
\n Total Token CSS Bundle\n 14.8 KB\n 10.6 KB (-28.4%)\n
\n
\n DOM Custom Properties\n 64 variables\n 44 variables (-31.2%)\n
\n
\n Display P3 Wide Gamut\n Clipping on 14 colors\n 100% P3 Coverage\n
\n
\n Perceptual Uniformity\n Non-linear (HSL shift)\n Mathematically Uniform (LCH)\n
\n
\n
\n
\n \n \n \n\n \n @if (isChatOpen()) {\n
\n
\n
\n
\n
\n \n
\n
\n

\n Glia AI Assistant · PR #{{ prNumber }} Review Thread\n

\n

\n Contextual code review dialogue with active AST parser & contrast engine\n

\n
\n
\n \n \n \n
\n
\n\n
\n \n
\n @for (msg of chatMessages(); track msg.id) {\n
\n
\n \n @if (msg.sender === 'ai') {\n \n } @else {\n \n \n ER\n \n }\n {{ msg.author }}\n \n {{ msg.timestamp }}\n
\n

{{ msg.text }}

\n @if (msg.codeSnippet) {\n \n {{ msg.codeSnippet }}\n
\n }\n
\n }\n
\n\n \n
\n Quick ask:\n \n Why OKLab over sRGB?\n \n \n Browser performance impact?\n \n
\n\n \n
\n \n \n \n
\n \n }\n `,\n})\nexport class UiAiCodeReviewAssistantComponent {\n @Input() prNumber = 412\n @Input() prTitle = 'refactor(tokens): migrate to OKLCH perceptual contrast engine'\n @Input() authorName = 'Elena Rostova'\n @Input() authorHandle = 'elena-rostova'\n @Input() authorRole = 'Staff Design Systems Engineer'\n @Input() authorAvatar = 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=96&h=96&fit=crop&crop=face'\n @Input() sourceBranch = 'feature/oklch-engine'\n @Input() targetBranch = 'main'\n @Input('class') className?: string\n\n readonly activeTab = signal('diff')\n readonly isApplyingAll = signal(false)\n readonly appliedPatches = signal>(new Set())\n readonly isChatOpen = signal(false)\n readonly chatInput = signal('')\n readonly copiedDiff = signal(false)\n readonly copiedPatchId = signal(null)\n readonly chatMessages = signal(initialChatMessages)\n\n readonly diffLines = computed(() => buildDiffLines(this.appliedPatches()))\n readonly allPatchesApplied = computed(() => this.appliedPatches().size === 2)\n readonly qualityScore = computed(() => (this.allPatchesApplied() ? 99 : 96))\n\n protected readonly Bot = Bot\n protected readonly Check = Check\n protected readonly CheckCheck = CheckCheck\n protected readonly CircleCheck = CircleCheck\n protected readonly CodeXml = CodeXml\n protected readonly Copy = Copy\n protected readonly Cpu = Cpu\n protected readonly FileCodeCorner = FileCodeCorner\n protected readonly GitBranch = GitBranch\n protected readonly GitCommitHorizontal = GitCommitHorizontal\n protected readonly GitPullRequest = GitPullRequest\n protected readonly Layers = Layers\n protected readonly MessageSquare = MessageSquare\n protected readonly RefreshCw = RefreshCw\n protected readonly RotateCcw = RotateCcw\n protected readonly Send = Send\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Sparkles = Sparkles\n protected readonly TrendingDown = TrendingDown\n protected readonly TrendingUp = TrendingUp\n protected readonly X = X\n protected readonly Zap = Zap\n\n private readonly timeouts = new Set>()\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timeouts.forEach((t) => clearTimeout(t)))\n }\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n isApplied(patchId: string): boolean {\n return this.appliedPatches().has(patchId)\n }\n\n rowClass(line: DiffLine): string {\n return cn(\n 'flex items-center px-3 py-0.5 transition-colors',\n line.type === 'addition' && 'border-success bg-success/10 text-success border-l-2 font-medium',\n line.type === 'deletion' &&\n 'border-destructive bg-destructive/10 text-foreground dark:text-foreground border-l-2 font-medium line-through opacity-85',\n line.type === 'neutral' && 'text-muted-foreground border-l-2 border-transparent',\n )\n }\n\n prefixClass(line: DiffLine): string {\n return cn(\n 'w-4 shrink-0 text-center font-bold select-none',\n line.type === 'addition' && 'text-success',\n line.type === 'deletion' && 'text-destructive',\n line.type === 'neutral' && 'text-transparent',\n )\n }\n\n prefix(line: DiffLine): string {\n return line.type === 'addition' ? '+' : line.type === 'deletion' ? '-' : ' '\n }\n\n applyButtonClass(patchId: string): string {\n return cn(\n 'h-7 gap-1 text-xs font-medium shadow-xs',\n this.isApplied(patchId) && 'border-success/30 text-success font-semibold',\n )\n }\n\n messageClass(msg: ChatMessage): string {\n return cn(\n 'flex flex-col gap-1 rounded-lg p-3 text-xs',\n msg.sender === 'ai'\n ? 'border-border/60 bg-muted/40 mr-8 border'\n : 'bg-primary/10 text-foreground border-primary/20 ml-8 border',\n )\n }\n\n togglePatch(patchId: string): void {\n this.appliedPatches.update((prev) => {\n const next = new Set(prev)\n if (next.has(patchId)) next.delete(patchId)\n else next.add(patchId)\n return next\n })\n }\n\n applyAllPatches(): void {\n if (this.isApplyingAll()) return\n this.isApplyingAll.set(true)\n this.later(() => {\n this.appliedPatches.set(new Set(['patch-1', 'patch-2']))\n this.isApplyingAll.set(false)\n }, 600)\n }\n\n resetPatches(): void {\n this.appliedPatches.set(new Set())\n }\n\n openChatWithTopic(topicText?: string): void {\n this.isChatOpen.set(true)\n if (!topicText) return\n const userMsg: ChatMessage = {\n id: `user-${Date.now()}`,\n sender: 'user',\n author: 'Elena Rostova',\n timestamp: 'Just now',\n text: topicText,\n }\n this.chatMessages.update((prev) => [...prev, userMsg])\n this.later(() => {\n const aiMsg: ChatMessage = {\n id: `ai-${Date.now()}`,\n sender: 'ai',\n author: 'Glia AI Code Reviewer',\n timestamp: 'Just now',\n text: `Regarding \"${topicText}\": Our AST lint engine verified that OKLCH relative color syntax produces 7:1 contrast on dark surfaces with zero gamut clipping on Apple Display P3 panels.`,\n }\n this.chatMessages.update((prev) => [...prev, aiMsg])\n }, 450)\n }\n\n onChatInput(e: Event): void {\n this.chatInput.set((e.target as HTMLInputElement).value)\n }\n\n handleSendMessage(e: Event): void {\n e.preventDefault()\n const text = this.chatInput().trim()\n if (!text) return\n const userMsg: ChatMessage = {\n id: `msg-${Date.now()}`,\n sender: 'user',\n author: 'Elena Rostova',\n timestamp: 'Just now',\n text,\n }\n this.chatMessages.update((prev) => [...prev, userMsg])\n this.chatInput.set('')\n this.later(() => {\n const aiMsg: ChatMessage = {\n id: `ai-${Date.now()}`,\n sender: 'ai',\n author: 'Glia AI Code Reviewer',\n timestamp: 'Just now',\n text: 'Validated against UIPKGE craft standards. The suggested AST refactor is fully backward-compatible with PostCSS fallback polyfills.',\n }\n this.chatMessages.update((prev) => [...prev, aiMsg])\n }, 500)\n }\n\n copyRawDiff(): void {\n const rawText = this.diffLines()\n .map((l) => `${l.text}`)\n .join('\\n')\n void navigator.clipboard?.writeText(rawText)\n this.copiedDiff.set(true)\n this.later(() => this.copiedDiff.set(false), 2000)\n }\n\n copyPatchCode(id: string, code: string): void {\n void navigator.clipboard?.writeText(code)\n this.copiedPatchId.set(id)\n this.later(() => this.copiedPatchId.set(null), 2000)\n }\n\n private later(fn: () => void, ms: number): void {\n const t = setTimeout(() => {\n this.timeouts.delete(t)\n fn()\n }, ms)\n this.timeouts.add(t)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/ai-code-review-assistant/ai-code-review-assistant.component.ts" }, { "path": "packages/registry-angular/blocks/ai-code-review-assistant/index.ts", "content": "export { UiAiCodeReviewAssistantComponent, type DiffLine, type ChatMessage } from './ai-code-review-assistant.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/ai-code-review-assistant/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "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/separator.json", "https://uipkge.dev/r/angular/tabs.json" ], "description": "GitHub PR automated AI code review assistant with AST syntax diff annotations, performance suggestions, and 1-click patch application.", "categories": [ "devops", "app", "ai" ] }