{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ai-code-review-assistant", "title": "Ai Code Review Assistant", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/ai-code-review-assistant/AiCodeReviewAssistant.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Bot,\n Check,\n CheckCircle2,\n CheckCheck,\n Code2,\n Copy,\n Cpu,\n FileCode2,\n GitBranch,\n GitCommit,\n GitPullRequest,\n Layers,\n MessageSquare,\n RefreshCw,\n RotateCcw,\n Send,\n ShieldCheck,\n Sparkles,\n TrendingDown,\n TrendingUp,\n X,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nexport interface AiCodeReviewAssistantProps {\n prNumber?: number\n prTitle?: string\n authorName?: string\n authorHandle?: string\n authorRole?: string\n authorAvatar?: string\n sourceBranch?: string\n targetBranch?: string\n className?: string\n}\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\nexport function AiCodeReviewAssistant({\n prNumber = 412,\n prTitle = 'refactor(tokens): migrate to OKLCH perceptual contrast engine',\n authorName = 'Elena Rostova',\n authorHandle = 'elena-rostova',\n authorRole = 'Staff Design Systems Engineer',\n authorAvatar = 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=96&h=96&fit=crop&crop=face',\n sourceBranch = 'feature/oklch-engine',\n targetBranch = 'main',\n className,\n}: AiCodeReviewAssistantProps) {\n const [activeTab, setActiveTab] = React.useState('diff')\n const [isApplyingAll, setIsApplyingAll] = React.useState(false)\n const [appliedPatches, setAppliedPatches] = React.useState>(new Set())\n const [isChatOpen, setIsChatOpen] = React.useState(false)\n const [chatInput, setChatInput] = React.useState('')\n const [copiedDiff, setCopiedDiff] = React.useState(false)\n const [copiedPatchId, setCopiedPatchId] = React.useState(null)\n\n const [chatMessages, setChatMessages] = React.useState([\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\n const diffLines: DiffLine[] = React.useMemo(\n () => [\n {\n id: 'hunk-1',\n type: 'hunk',\n text: '@@ -32,18 +32,24 @@ packages/shared/styles/tailwind.css',\n },\n {\n id: 'line-32',\n oldNum: 32,\n newNum: 32,\n type: 'neutral',\n text: '@import \"tailwindcss\";',\n },\n {\n id: 'line-33',\n oldNum: 33,\n newNum: 33,\n type: 'neutral',\n text: '@import \"tw-animate-css\";',\n },\n {\n id: 'line-34',\n oldNum: 34,\n newNum: 34,\n type: 'neutral',\n text: '',\n },\n {\n id: 'line-35',\n oldNum: 35,\n newNum: 35,\n type: 'neutral',\n text: '@theme inline {',\n },\n {\n id: 'line-36',\n oldNum: 36,\n newNum: 36,\n type: 'neutral',\n text: ' --font-sans: \"Inter\", system-ui, sans-serif;',\n },\n {\n id: 'line-37',\n oldNum: 37,\n newNum: 37,\n type: 'neutral',\n text: ' --font-mono: \"DM Mono\", monospace;',\n },\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 {\n id: 'line-40',\n oldNum: 40,\n type: 'deletion',\n text: '- --primary-hover: hsl(var(--primary-hsl) / 0.85);',\n },\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: appliedPatches.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 {\n id: 'line-43',\n oldNum: 41,\n newNum: 40,\n type: 'neutral',\n text: ' --color-background: var(--background);',\n },\n {\n id: 'line-44',\n oldNum: 42,\n newNum: 41,\n type: 'neutral',\n text: ' --color-foreground: var(--foreground);',\n },\n {\n id: 'line-45',\n oldNum: 43,\n type: 'deletion',\n text: '- --muted-border: rgb(229 231 235 / 0.6);',\n },\n {\n id: 'line-46',\n newNum: 42,\n type: 'addition',\n text: '+ --muted-border: oklch(0.92 0.005 240 / 0.8);',\n },\n {\n id: 'line-47',\n oldNum: 44,\n newNum: 43,\n type: 'neutral',\n text: ' --color-border: var(--border);',\n },\n {\n id: 'line-48',\n oldNum: 45,\n newNum: 44,\n type: 'neutral',\n text: ' --color-input: var(--input);',\n },\n {\n id: 'line-49',\n oldNum: 46,\n type: 'deletion',\n text: '- --ring-offset-width: 2px;',\n },\n {\n id: 'line-50',\n newNum: 45,\n type: 'addition',\n text: '+ --color-ring: oklch(from var(--primary) l c h / 0.5);',\n },\n {\n id: 'line-51',\n newNum: 46,\n type: 'addition',\n text: appliedPatches.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 {\n id: 'line-52',\n oldNum: 47,\n newNum: 47,\n type: 'neutral',\n text: ' --color-card: var(--card);',\n },\n {\n id: 'line-53',\n oldNum: 48,\n newNum: 48,\n type: 'neutral',\n text: ' --color-card-foreground: var(--card-foreground);',\n },\n {\n id: 'line-54',\n oldNum: 49,\n newNum: 49,\n type: 'neutral',\n text: '}',\n },\n ],\n [appliedPatches],\n )\n\n const allPatchesApplied = appliedPatches.size === 2\n const qualityScore = allPatchesApplied ? 99 : 96\n\n const togglePatch = (patchId: string) => {\n setAppliedPatches((prev) => {\n const next = new Set(prev)\n if (next.has(patchId)) {\n next.delete(patchId)\n } else {\n next.add(patchId)\n }\n return next\n })\n }\n\n const applyAllPatches = () => {\n if (isApplyingAll) return\n setIsApplyingAll(true)\n setTimeout(() => {\n setAppliedPatches(new Set(['patch-1', 'patch-2']))\n setIsApplyingAll(false)\n }, 600)\n }\n\n const resetPatches = () => {\n setAppliedPatches(new Set())\n }\n\n const openChatWithTopic = (topicText?: string) => {\n setIsChatOpen(true)\n if (topicText) {\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 setChatMessages((prev) => [...prev, userMsg])\n setTimeout(() => {\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 setChatMessages((prev) => [...prev, aiMsg])\n }, 450)\n }\n }\n\n const handleSendMessage = (e: React.FormEvent) => {\n e.preventDefault()\n const text = 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 setChatMessages((prev) => [...prev, userMsg])\n setChatInput('')\n\n setTimeout(() => {\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 setChatMessages((prev) => [...prev, aiMsg])\n }, 500)\n }\n\n const copyRawDiff = () => {\n const rawText = diffLines.map((l) => `${l.text}`).join('\\n')\n navigator.clipboard?.writeText(rawText)\n setCopiedDiff(true)\n setTimeout(() => setCopiedDiff(false), 2000)\n }\n\n const copyPatchCode = (id: string, code: string) => {\n navigator.clipboard?.writeText(code)\n setCopiedPatchId(id)\n setTimeout(() => setCopiedPatchId(null), 2000)\n }\n\n return (\n
\n {/* Header: Pull Request Info & AI Review Status */}\n \n \n
\n
\n {/* PR Badge & Title */}\n
\n \n \n PR #{prNumber}\n \n

{prTitle}

\n
\n\n {/* Meta: Author, Branches, Commit */}\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 {/* Actions & Review Status */}\n
\n {!allPatchesApplied ? (\n \n \n Review Completed · 2 Suggestions · 0 Security Flaws\n \n ) : (\n \n \n All Patches Applied · Ready to Merge\n \n )}\n\n {!allPatchesApplied ? (\n \n {isApplyingAll ? : }\n {isApplyingAll ? 'Applying Patches...' : 'Apply All AI Patches'}\n \n ) : (\n \n \n Reset State\n \n )}\n\n openChatWithTopic()}\n >\n \n AI Chat (3)\n \n
\n
\n \n \n\n {/* 4 Code Review Health Cards */}\n
\n {/* Card 1: Quality Score */}\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 {/* Card 2: Security & Vulnerability Check */}\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 {/* Card 3: Performance & Bundle Impact */}\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 {/* Card 4: Test Coverage Delta */}\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 {/* Annotated Code Diff Reviewer Card */}\n \n \n
\n
\n
\n \n \n packages/shared/styles/tailwind.css\n \n \n CSS / Tailwind v4\n \n \n +24 -12 lines\n \n
\n \n AST parser inspected 162 declarations · 2 optimization nodes annotated\n \n
\n\n
\n \n {copiedDiff ? : }\n {copiedDiff ? 'Copied Raw Diff' : 'Copy Raw Diff'}\n \n
\n
\n \n\n \n \n \n \n \n Unified Code Diff\n \n \n \n AST Rule Checks (4)\n \n \n \n Token Matrix & Gamut\n \n \n\n {/* Tab 1: Visual Unified Code Diff with Inline AI Annotations */}\n \n
\n
\n Unified Diff View\n ·\n +24 additions\n ·\n -12 deletions\n
\n AST Analyzed\n
\n\n
\n
\n {diffLines.map((line) => (\n \n {/* Hunk Line */}\n {line.type === 'hunk' ? (\n
\n {line.text}\n
\n ) : (\n /* Diff Code Row */\n \n {/* Old Line Number */}\n \n {line.oldNum ?? ''}\n \n {/* New Line Number */}\n \n {line.newNum ?? ''}\n \n {/* Prefix */}\n \n {line.type === 'addition' ? '+' : line.type === 'deletion' ? '-' : ' '}\n \n {/* Code Text */}\n {line.text}\n
\n )}\n\n {/* Inline AI Review Annotation Card #1 (Pinned under line 42) */}\n {line.annotationId === 'patch-1' && (\n
\n
\n
\n
\n
\n \n
\n \n Glia AI Code Review · AST Suggestion\n \n \n \n Performance Optimization · High Impact\n \n Confidence 99.4% · AST Node #42\n
\n\n {/* Explanation */}\n

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

\n\n {/* Code Preview Replacement */}\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 {/* Action Buttons */}\n
\n \n copyPatchCode('patch-1', 'color-mix(in oklab, var(--primary) 10%, transparent)')\n }\n >\n {copiedPatchId === 'patch-1' ? (\n \n ) : (\n \n )}\n {copiedPatchId === 'patch-1' ? 'Copied' : 'Copy Patch'}\n \n\n \n openChatWithTopic(\n 'Explain why OKLab color-mix avoids DOM stylesheet recalculation overhead',\n )\n }\n >\n \n Explain in Chat\n \n\n togglePatch('patch-1')}\n >\n {appliedPatches.has('patch-1') ? (\n \n ) : (\n \n )}\n \n {appliedPatches.has('patch-1') ? 'Patch Applied ✓' : 'Apply Suggestion (1-Click)'}\n \n \n
\n
\n
\n )}\n\n {/* Inline AI Review Annotation Card #2 (Pinned under line 51) */}\n {line.annotationId === 'patch-2' && (\n
\n
\n
\n
\n
\n \n
\n \n Glia AI Code Review · Gamut Engine\n \n \n \n Accessibility & Gamut · WCAG AAA Verified\n \n Confidence 98.7% · AST Node #51\n
\n\n {/* Explanation */}\n

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

\n\n {/* Code Preview Replacement */}\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 {/* Action Buttons */}\n
\n \n openChatWithTopic(\n 'How does OKLCH guarantee WCAG AAA contrast without shift on P3 monitors?',\n )\n }\n >\n \n Explain in Chat\n \n\n togglePatch('patch-2')}\n >\n {appliedPatches.has('patch-2') ? (\n \n ) : (\n \n )}\n \n {appliedPatches.has('patch-2') ? 'Patch Applied ✓' : 'Apply Suggestion (1-Click)'}\n \n \n
\n
\n
\n )}\n \n ))}\n
\n
\n \n\n {/* Tab 2: AST Rule Verification Suite */}\n \n
\n
\n
\n
\n \n Rule 1: Zero Global DOM Pollution\n
\n \n Pass · Verified\n \n
\n

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

\n
\n\n
\n
\n
\n \n Rule 2: Perceptual Uniformity (ΔE < 0.8)\n
\n \n Pass · Verified\n \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 \n Pass · Verified\n \n
\n

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

\n
\n\n
\n
\n
\n \n Rule 4: WCAG 2.2 AAA Contrast Ratios\n
\n \n Pass · 7.1:1 Ratio\n \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 {/* Tab 3: Token Matrix & Gamut Breakdown */}\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 {/* Interactive AI Review Assistant Chat Panel */}\n {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 setIsChatOpen(false)}\n >\n \n \n
\n \n\n \n {/* Message History */}\n
\n {chatMessages.map((msg) => (\n \n
\n \n {msg.sender === 'ai' ? (\n \n ) : (\n \n \n ER\n \n )}\n {msg.author}\n \n {msg.timestamp}\n
\n

{msg.text}

\n {msg.codeSnippet && (\n
\n {msg.codeSnippet}\n
\n )}\n
\n ))}\n \n\n {/* Preset Prompt Chips */}\n
\n Quick ask:\n openChatWithTopic('Why is OKLab preferred over sRGB color space?')}\n >\n Why OKLab over sRGB?\n \n openChatWithTopic('How does this affect browser performance?')}\n >\n Browser performance impact?\n \n
\n\n {/* Chat Input Field */}\n
\n setChatInput(e.target.value)}\n type=\"text\"\n placeholder=\"Ask Glia AI about this code review or AST transformation...\"\n className=\"border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex-1 rounded-md border px-3 py-2 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n />\n \n \n
\n \n )}\n \n )\n}\n\nexport default AiCodeReviewAssistant\n", "type": "registry:block", "target": "~/components/blocks/AiCodeReviewAssistant.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "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/separator.json", "https://uipkge.dev/r/react/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" ] }