fix: address CodeRabbit review feedback for UpgradeModal and CI

- CI: pin Bun to 1.3.4 and use --frozen-lockfile for reproducible builds
- UpgradeModal: refactor to Radix Dialog for proper a11y (role, aria-modal, focus trap, Escape)
- Use feature/currentTier props in rendered content
- Add optional onUpgrade callback prop

Author: Ryan Roland Dabao

.github/workflows/ci.yml

@@ -44,10 +44,10 @@ jobs:
 
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: latest
+          bun-version: "1.3.4"
 
       - name: Install dependencies
-        run: bun install
+        run: bun install --frozen-lockfile
 
       - name: TypeScript check
         run: bunx tsc --noEmit

src/components/interview-lab/UpgradeModal.tsx

@@ -1,29 +1,58 @@
 'use client';
 
 import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
 
 export interface UpgradeModalProps {
   open: boolean;
   onClose: () => void;
+  onUpgrade?: () => void;
   feature: string;
   reason: string;
   currentTier: string;
   recommendedTier: string;
 }
 
-export function UpgradeModal({ open, onClose, feature, reason, currentTier, recommendedTier }: UpgradeModalProps) {
-  if (!open) return null;
+export function UpgradeModal({
+  open,
+  onClose,
+  onUpgrade,
+  feature,
+  reason,
+  currentTier,
+  recommendedTier,
+}: UpgradeModalProps) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
-      <div className="bg-white rounded-lg border border-[#E5E5E0] shadow-lg w-full max-w-sm mx-4 p-4 space-y-3">
-        <h3 className="text-base font-semibold text-[#171717]">Upgrade Required</h3>
-        <p className="text-sm text-[#404040] break-words">{reason}</p>
-        <div className="flex gap-2">
-          <button onClick={onClose} className="flex-1 px-3 py-2 rounded-md border border-[#E5E5E0] text-sm font-medium text-[#171717]">Close</button>
-          <button onClick={onClose} className="flex-1 px-3 py-2 rounded-md bg-[#FF6B35] text-white text-sm font-medium">Upgrade to {recommendedTier}</button>
-        </div>
-      </div>
-    </div>
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Upgrade Required</DialogTitle>
+          <DialogDescription>
+            The <span className="font-medium text-ink-900">{feature}</span> feature
+            requires a {recommendedTier} plan. You are currently on the {currentTier} plan.
+          </DialogDescription>
+        </DialogHeader>
+
+        <p className="text-sm text-ink-500">{reason}</p>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={onUpgrade ?? onClose}>
+            Upgrade to {recommendedTier}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }