kyd-shared-badge 0.3.117 → 0.3.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.117",
+  "version": "0.3.119",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -18,7 +18,9 @@
   "dependencies": {
     "@ai-sdk/openai": "^2.0.42",
     "@aws-sdk/client-s3": "^3.893.0",
+    "@aws-sdk/client-ses": "^3.916.0",
     "@aws-sdk/lib-dynamodb": "^3.893.0",
+    "@aws-sdk/s3-request-presigner": "^3.916.0",
     "@chatscope/chat-ui-kit-react": "^2.1.1",
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "@knowyourdeveloper/react-bubble-chart": "^1.0.8",
@@ -34,6 +36,7 @@
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
     "recharts": "^2.15.4",
+    "stripe": "^19.1.0",
     "tailwind-merge": "^3.3.1",
     "ulid": "^3.0.1"
   },

package/src/PrintableBadgeDisplay.tsx

@@ -15,6 +15,7 @@ import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } f
 import { SiCredly, SiFiverr } from 'react-icons/si';
 import GaugeCard from './components/GaugeCard';
 import RiskCard from './components/RiskCard';
+import RoleOverviewCard from './components/RoleOverviewCard';
 
 import { yellow, green } from './colors';
 import SkillsValidation from './components/SkillsValidation';
@@ -87,6 +88,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
       return undefined;
     }
   })();
+  const hasEnterpriseMatch = !!assessmentResult?.enterprise_match;
 
   const topBusinessForGenre = (genre: string) => {
     const cats: string[] = (genreMapping)?.[genre] || [];
@@ -120,28 +122,86 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             }`}
         </style>
       )}
-      {/* Share controls removed; app-level pages render their own actions */}
-      <Reveal headless={isHeadless} offsetY={8} durationMs={500}>
-        <ReportHeader 
-            badgeId={badgeId}
-            developerName={badgeData.developerName}
-            updatedAt={updatedAt}
-            score={overallFinalPercent || 0}
-            isPublic={true}
-            badgeImageUrl={badgeData.badgeImageUrl || ''}
-            summary={assessmentResult?.report_summary || ''}
-            enterpriseMatch={(() => {
-              const em = assessmentResult?.enterprise_match;
-              if (!em) return null;
-              const role = em.role || {};
-              return { label: em.label, description: em.description, roleName: role.name };
-            })()}
-            countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
-            accountAuthenticity={assessmentResult?.account_authenticity}
-            companyName={badgeData.companyName}
-            rightBadgeLayout={!assessmentResult?.enterprise_match}
-        />
-      </Reveal>
+      {/* Overview quadrant layout (mirrors SharedBadgeDisplay overview) */}
+      <div className={'mt-6'}>
+        <Reveal headless={isHeadless} offsetY={8} durationMs={500}>
+          <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
+            <div className={`${hasEnterpriseMatch ? '' : 'md:col-span-2'}`}>
+              <ReportHeader
+                badgeId={badgeId}
+                developerName={badgeData.developerName}
+                updatedAt={updatedAt}
+                score={overallFinalPercent || 0}
+                isPublic={true}
+                badgeImageUrl={badgeData.badgeImageUrl || ''}
+                summary={undefined}
+                enterpriseMatch={null}
+                countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
+                accountAuthenticity={assessmentResult?.account_authenticity}
+                companyName={badgeData.companyName}
+                sourcesProviders={(badgeData?.connectedAccounts || []).map(a => (a?.name || '').toLowerCase())}
+                rightBadgeLayout={!hasEnterpriseMatch}
+              />
+            </div>
+            {hasEnterpriseMatch && (
+              <div>
+                {(() => {
+                  const em = assessmentResult?.enterprise_match;
+                  if (!em) return null;
+                  const role = em.role || {};
+                  return (
+                    <RoleOverviewCard
+                      title={'Role Alignment'}
+                      matchLabel={em.label}
+                      roleName={role?.name || 'Role'}
+                    />
+                  );
+                })()}
+              </div>
+            )}
+            <div>
+              {(() => {
+                const uiTech = graphInsights?.uiSummary?.technical || {};
+                const techPct = Math.round(Number(uiTech?.percent ?? 0));
+                const techLabel = uiTech?.label || 'EVIDENCE';
+                return (
+                  <GaugeCard
+                    title={'KYD Technical'}
+                    description={'Composite of technical evidence; more right indicates stronger capability'}
+                    percent={techPct}
+                    label={techLabel}
+                    topMovers={[]}
+                  />
+                );
+              })()}
+            </div>
+            <div>
+              {(() => {
+                const uiRisk = graphInsights?.uiSummary?.risk || {};
+                const riskPctGood = Math.round(Number(uiRisk?.percent_good ?? 0));
+                const riskLabel = uiRisk?.label || 'RISK';
+                return (
+                  <RiskCard
+                    title={'KYD Risk'}
+                    description={'Lower bar height indicates lower risk exposure'}
+                    percentGood={riskPctGood}
+                    label={riskLabel}
+                    topMovers={[]}
+                  />
+                );
+              })()}
+            </div>
+          </div>
+        </Reveal>
+        <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+          <Reveal headless={isHeadless}>
+            <div className={'kyd-avoid-break'}>
+              <h4 className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills Footprint</h4>
+              <SkillsBubble skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} skillsByCategory={assessmentResult?.graph_insights?.skillsByCategory} skillsMeta={assessmentResult?.graph_insights?.skillsMeta} />
+            </div>
+          </Reveal>
+        </div>
+      </div>
       {/* Coaching / Evidence under header when present */}
       {(() => {
         const em = assessmentResult.enterprise_match;
@@ -158,12 +218,6 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
         style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
       >
         <div className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-          <div className="pt-8 first:pt-0 kyd-avoid-break">
-            <Reveal headless={isHeadless} as={'h4'} offsetY={8} durationMs={500} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Report Summary</Reveal>
-            <Reveal headless={isHeadless} as={'div'} offsetY={8} durationMs={500} className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-              <SummaryCards graphInsights={graphInsights} assessmentResult={assessmentResult} topBusinessForGenre={topBusinessForGenre} />
-            </Reveal>
-          </div>
 
           {/* Enterprise Use Cases (directly under the three summary cards) */}
           {assessmentResult?.enterprise_use_cases?.items && assessmentResult.enterprise_use_cases.items.length > 0 && (

package/src/SharedBadgeDisplay.tsx

@@ -387,7 +387,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
               </div>
             )}
             <div>
-              <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Recommendations</Reveal>
+              <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Score Improvement Recommendationsw</Reveal>
               <Reveal headless={isHeadless}>
                 <div className={'space-y-3'}>
                   {rec?.summary ? (

package/src/components/CategoryBars.tsx

@@ -53,6 +53,14 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
                 0
             )
           );
+          const candidatePercentRaw = Math.round(
+            Number(
+              score?.business?.percent_progress ??
+                score?.combined?.percent_progress ??
+                0
+            )
+          );
+          const candidateClamp = Math.max(0, Math.min(100, candidatePercentRaw));
           const absPercent = Math.max(0, Math.min(Math.abs(signed), 100));
           const isNegative = signed < 0;
           const label =
@@ -131,6 +139,7 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
                   {hasTarget && (
                     <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
                       Target: {targetClamp}%
+                      <div>Candidate Match: {candidateClamp}%</div>
                     </div>
                   )}
                 </div>

package/src/components/RoleOverviewCard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useMemo } from 'react';
-import Link from 'next/link';
+// Link not required for hash-only navigation
 import { FiInfo } from 'react-icons/fi';
 import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
 import { clampPercent, hexToRgba, scoreToColorHex, red, yellow, green } from '../colors';
@@ -101,10 +101,31 @@ export default function RoleOverviewCard({
             }}
             pointer={{ type: 'arrow', elastic: true, animationDelay: 0 }}
           />
+          <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
+            <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
+              <div style={{ fontWeight: 600 }}>{title}</div>
+              <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Alignment reflects how well the candidate matches the target role based on KYD evidence.</div>
+            </div>
+          </div>
         </div>
         {roleName ? (
         <div className="mt-3 text-center">
-          <Link href="#role" className={'text-sm font-semibold text-[var(--text-main)] hover:underline'}>{roleName}</Link>
+          <a
+            href="#role"
+            className={'text-sm font-semibold text-[var(--text-main)] hover:underline'}
+            onClick={(e) => {
+              try {
+                e.preventDefault();
+                if (typeof window !== 'undefined') {
+                  window.location.hash = 'role';
+                  // Ensure listeners respond even if framework doesn't emit hashchange automatically
+                  window.dispatchEvent(new HashChangeEvent('hashchange'));
+                }
+              } catch {}
+            }}
+          >
+            {roleName}
+          </a>
         </div>
       ) : null}
       </div>

package/src/components/support/SupportForm.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import toast from "react-hot-toast"
+import { Button } from "../../ui/button"
+import { Input } from "../../ui/input"
+import { Textarea } from "../../ui/textarea"
+
+type SubjectOption = 'Question - General' | 'Question - Billing' | 'Feature Recommendation' | 'Other'
+
+export function SupportForm({
+  session,
+  productLabel = 'KYD Self-check',
+}: {
+  session?: { user?: { fullName?: string | null; name?: string | null; email?: string | null } | null } | null
+  productLabel?: string
+}) {
+  const [subject, setSubject] = useState<SubjectOption>('Question - General')
+  const [description, setDescription] = useState('')
+  const [file, setFile] = useState<File | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSent, setIsSent] = useState(false)
+
+  const nameVal = useMemo(() => (session?.user?.fullName || session?.user?.name || ''), [session])
+  const emailVal = useMemo(() => (session?.user?.email || ''), [session])
+  const productVal = productLabel
+
+  const onFileChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const f = e.target.files?.[0] || null
+    if (!f) { setFile(null); return }
+    const allowed = new Set(['image/png', 'image/jpeg', 'image/webp'])
+    if (!allowed.has(f.type)) { toast.error('Only PNG, JPG, or WEBP allowed'); return }
+    if (f.size > 5 * 1024 * 1024) { toast.error('Max file size is 5MB'); return }
+    setFile(f)
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!session) { toast.error('Please sign in to submit.'); return }
+    if (!description.trim()) { toast.error('Please add a description.'); return }
+
+    setIsSubmitting(true)
+    try {
+      let screenshotKey: string | undefined
+      if (file) {
+        const mime = file.type
+        const body = JSON.stringify({ filename: file.name, mime })
+        const res = await fetch('/api/support/presign', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body })
+        if (!res.ok) throw new Error('Failed to prepare upload')
+        const { uploadUrl, key } = await res.json()
+        const up = await fetch(uploadUrl, { method: 'PUT', headers: { 'Content-Type': mime }, body: file })
+        if (!up.ok) throw new Error('Upload failed')
+        screenshotKey = key
+      }
+
+      const resp = await fetch('/api/support', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ subject, description, screenshotKey })
+      })
+      if (!resp.ok) {
+        const t = await resp.json().catch(() => ({}))
+        throw new Error(t?.error || 'Failed to submit support request')
+      }
+      toast.success('Sent to support. Thank you!')
+      setDescription('')
+      setFile(null)
+      setSubject('Question - General')
+      setIsSent(true)
+    } catch (err) {
+      const e2 = err as Error
+      toast.error(e2.message || 'Something went wrong')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  if (isSent) {
+    return (
+      <div className="w-full">
+        <div className="rounded-xl border p-6 md:p-10 text-center max-w-2xl mx-auto">
+          <h2 className="text-xl md:text-2xl font-semibold mb-2">Thanks! Your message was sent.</h2>
+          <p className="text-sm md:text-base mb-6">Our team will review and get back to you at your account email.</p>
+          <div className="flex items-center justify-center gap-3">
+            <Button onClick={() => setIsSent(false)} className="px-4">Send another</Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="w-full">
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="rounded-xl border p-4 sm:p-6">
+          <h2 className="text-lg font-semibold mb-4">Contact Support</h2>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm mb-1">Name</label>
+              <Input value={nameVal} readOnly />
+            </div>
+            <div>
+              <label className="block text-sm mb-1">Email</label>
+              <Input value={emailVal} readOnly />
+            </div>
+            <div>
+              <label className="block text-sm mb-1">Product</label>
+              <Input value={productVal} readOnly />
+            </div>
+            <div>
+              <label className="block text-sm mb-1">Subject</label>
+              <select
+                value={subject}
+                onChange={(e) => setSubject(e.target.value as SubjectOption)}
+                className="w-full rounded-md border bg-transparent p-2"
+              >
+                <option>Question - General</option>
+                <option>Question - Billing</option>
+                <option>Feature Recommendation</option>
+                <option>Other</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-xl border p-4 sm:p-6">
+          <h2 className="text-lg font-semibold mb-4">Description</h2>
+          <div className="space-y-4">
+            <div>
+              <Textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Tell us what's going on..."
+                className="min-h-[160px]"
+              />
+            </div>
+            <div>
+              <label className="block text-sm mb-1">Optional screenshot (PNG/JPG/WEBP, ≤5MB)</label>
+              <Input type="file" accept="image/png,image/jpeg,image/webp" onChange={onFileChange} />
+              {file ? (
+                <p className="text-xs mt-2">{file.name} ({Math.round(file.size/1024)} KB)</p>
+              ) : null}
+            </div>
+          </div>
+
+          <div className="mt-6">
+            <Button type="submit" disabled={isSubmitting} className="w-full justify-center">
+              {isSubmitting ? 'Sending…' : 'Send to Support'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+export default SupportForm
+
+

package/src/connect/ConnectAccounts.tsx

@@ -5,7 +5,7 @@ import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
 import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Settings, Shield, InfoIcon } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle } from '../ui';
+import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle, ProgressCircle } from '../ui';
 import Link from 'next/link';
 import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '../ui/';
 
@@ -222,8 +222,33 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     return setupAction === 'install' || setupAction === 'created';
   }, [githubConnectedAccount]);
   
+  // Progress computation
+  const targetProviderIds = useMemo(() => {
+    const targets = (requiredProviders && requiredProviders.length
+      ? requiredProviders
+      : providers.map(p => p.id))
+      .map(id => id.toLowerCase());
+    return new Set(targets);
+  }, [requiredProviders, providers]);
+  const numConnectedTargets = useMemo(() => {
+    let count = 0;
+    targetProviderIds.forEach(id => { if (connectedIds.has(id)) count += 1; });
+    return count;
+  }, [targetProviderIds, connectedIds]);
+  const progressPercent = useMemo(() => {
+    const total = targetProviderIds.size;
+    if (!total) return 0;
+    return Math.round((numConnectedTargets / total) * 100);
+  }, [numConnectedTargets, targetProviderIds]);
+  
   return (
-    <AnimatePresence initial={false} mode="wait">
+    <>
+      {providers?.length ? (
+        <div className="fixed sm:bottom-6 sm:right-6 bottom-4 right-4 z-50 pointer-events-none">
+          <ProgressCircle value={progressPercent} size={68} thickness={6} />
+        </div>
+      ) : null}
+      <AnimatePresence initial={false} mode="wait">
       {showDataHandling ? (
         <motion.div
           key="data-handling-card"
@@ -695,7 +720,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
           </AnimatePresence>
         </Card>
       )}
-    </AnimatePresence>
+      </AnimatePresence>
+    </>
   );
 }
 

package/src/index.ts

@@ -11,4 +11,6 @@ export * from './components/charts/ChartEmptyState';
 export * from './components/charts/ChartLegend';
 export { default as ConnectAccounts } from './connect/ConnectAccounts';
 export * from './connect/types';
-export { normalizeLinkedInInput } from './connect/linkedin';
+export { normalizeLinkedInInput } from './connect/linkedin';
+export { default as SupportForm } from './components/support/SupportForm';
+export { createSupportPresignRoute, createSupportTicketRoute } from './lib/support/routes';

package/src/lib/support/routes.ts

@@ -0,0 +1,162 @@
+import { NextRequest } from 'next/server'
+import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3'
+import { DynamoDBClient } from '@aws-sdk/client-dynamodb'
+import { DynamoDBDocumentClient, GetCommand, QueryCommand } from '@aws-sdk/lib-dynamodb'
+import { SESClient, SendEmailCommand } from '@aws-sdk/client-ses'
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
+
+const s3 = new S3Client({})
+const dbClient = new DynamoDBClient({})
+const doc = DynamoDBDocumentClient.from(dbClient)
+const ses = new SESClient({})
+
+function getIp(req: NextRequest) {
+  const xf = req.headers.get('x-forwarded-for') || ''
+  const ip = xf.split(',')[0].trim() || req.headers.get('x-real-ip') || ''
+  return String(ip)
+}
+
+function getUa(req: NextRequest) {
+  return req.headers.get('user-agent') || ''
+}
+
+function getLocationHeaders(req: NextRequest) {
+  const country = req.headers.get('x-vercel-ip-country') || ''
+  const city = req.headers.get('x-vercel-ip-city') || ''
+  return { country, city }
+}
+
+function escapeHtml(str: string) {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+export async function createSupportPresignRoute(req: NextRequest, userId: string) {
+  try {
+    const { filename, mime } = await req.json()
+    const bucket = process.env.SUPPORT_SCREENSHOTS_BUCKET as string
+    if (!bucket) return Response.json({ error: 'Bucket not configured' }, { status: 500 })
+
+    const safeName = String(filename || 'upload').replace(/[^a-zA-Z0-9._-]/g, '_')
+    const ext = safeName.includes('.') ? safeName.split('.').pop() : 'png'
+    const key = `${userId}/${Date.now()}-${Math.random().toString(36).slice(2)}.${ext}`
+
+    const command = new PutObjectCommand({ Bucket: bucket, Key: key, ContentType: String(mime || 'image/png') })
+    const uploadUrl = await getSignedUrl(s3, command, { expiresIn: 60 * 5 })
+    return Response.json({ uploadUrl, key })
+  } catch (e) {
+    console.error('support presign error', e)
+    return Response.json({ error: 'Failed to create upload URL' }, { status: 500 })
+  }
+}
+
+export async function createSupportTicketRoute(req: NextRequest, userId: string) {
+  try {
+    const body = await req.json().catch(() => ({}))
+    const subject: string = String(body?.subject || '')
+    const description: string = String(body?.description || '')
+    const screenshotKey: string | undefined = body?.screenshotKey
+    if (!subject || !description) return Response.json({ error: 'Missing fields' }, { status: 400 })
+
+    const userTable = process.env.USER_TABLE_NAME as string
+    const badgeTable = process.env.BADGE_TABLE_NAME as string
+    const supportBucket = process.env.SUPPORT_SCREENSHOTS_BUCKET as string
+    const sesFrom = process.env.SES_FROM_EMAIL as string
+    if (!userTable || !badgeTable || !sesFrom) return Response.json({ error: 'Server not configured' }, { status: 500 })
+
+    // Get user to find stripeCustomerId + totals
+    const userResp = await doc.send(new GetCommand({ TableName: userTable, Key: { userId } }))
+    const userItem = (userResp as any).Item || {}
+    const stripeCustomerId: string | undefined = userItem.stripeCustomerId
+
+    // Stripe total spent
+    let totalSpentUsd = 0
+    try {
+      const stripeKey = process.env.STRIPE_SECRET_KEY
+      if (stripeKey && stripeCustomerId) {
+        const Stripe = (await import('stripe')).default
+        const stripe = new Stripe(stripeKey)
+        let hasMore = true
+        let startingAfter: string | undefined
+        while (hasMore) {
+          const inv = await stripe.invoices.list({ customer: stripeCustomerId, status: 'paid', limit: 100, starting_after: startingAfter })
+          for (const i of inv.data) totalSpentUsd += (i.total || 0)
+          hasMore = inv.has_more
+          startingAfter = inv.data[inv.data.length - 1]?.id
+        }
+        totalSpentUsd = Math.round(totalSpentUsd) / 100
+      }
+    } catch {}
+
+    // Total reports run by user
+    let totalReports = 0
+    try {
+      const countResp = await doc.send(new QueryCommand({
+        TableName: badgeTable,
+        IndexName: 'userId-index',
+        KeyConditionExpression: 'userId = :u',
+        ExpressionAttributeValues: { ':u': userId },
+        Select: 'COUNT',
+      }))
+      totalReports = (countResp as any).Count || 0
+    } catch {}
+
+    const ip = getIp(req)
+    const ua = getUa(req)
+    const { country, city } = getLocationHeaders(req)
+
+    let screenshotUrl: string | undefined
+    if (screenshotKey && supportBucket) {
+      const getCmd = new GetObjectCommand({ Bucket: supportBucket, Key: screenshotKey })
+      screenshotUrl = await getSignedUrl(s3, getCmd, { expiresIn: 60 * 30 })
+    }
+
+    const product = 'KYD Self-check'
+    const name = userItem?.fullName || userItem?.name || userItem?.email || ''
+    const email = userItem?.email || ''
+
+    const html = `
+      <div style="font-family:Arial,sans-serif;line-height:1.5">
+        <h2>New Support Request</h2>
+        <h3>User</h3>
+        <ul>
+          <li><b>Name:</b> ${escapeHtml(name)}</li>
+          <li><b>Email:</b> ${escapeHtml(email)}</li>
+          <li><b>Product:</b> ${escapeHtml(product)}</li>
+        </ul>
+        <h3>Details</h3>
+        <ul>
+          <li><b>Subject:</b> ${escapeHtml(subject)}</li>
+          <li><b>Description:</b><br/>${escapeHtml(description).replace(/\n/g,'<br/>')}</li>
+        </ul>
+        <h3>Meta</h3>
+        <ul>
+          <li><b>Total spent (USD):</b> $${totalSpentUsd.toFixed(2)}</li>
+          <li><b>Total reports run:</b> ${totalReports}</li>
+          <li><b>Location:</b> ${escapeHtml([city, country].filter(Boolean).join(', ') || 'Unknown')}</li>
+          <li><b>Browser:</b> ${escapeHtml(ua)}</li>
+          <li><b>IP:</b> ${escapeHtml(ip)}</li>
+        </ul>
+        ${screenshotUrl ? `<p><a href="${screenshotUrl}">View Screenshot</a></p>` : ''}
+      </div>
+    `
+
+    const send = new SendEmailCommand({
+      Source: sesFrom,
+      Destination: { ToAddresses: ['team@knowyourdeveloper.ai'] },
+      Message: { Subject: { Data: `Support: ${subject}` }, Body: { Html: { Data: html } } },
+    })
+    await ses.send(send)
+
+    return Response.json({ ok: true })
+  } catch (e) {
+    console.error('support submit error', e)
+    return Response.json({ error: 'Failed to send support request' }, { status: 500 })
+  }
+}
+
+

package/src/ui/index.ts

@@ -1,5 +1,7 @@
 export * from './button';
 export * from './card';
 export * from './input';
+export * from './textarea';
 export * from './spinner';
-export * from './tooltip';
+export * from './tooltip';
+export * from './progress-circle';

package/src/ui/progress-circle.tsx

@@ -0,0 +1,78 @@
+'use client'
+import React from 'react'
+
+export type ProgressCircleProps = {
+  value: number
+  size?: number
+  thickness?: number
+  className?: string
+  showLabel?: boolean
+  label?: string
+}
+
+export function ProgressCircle(props: ProgressCircleProps) {
+  const { value, size = 72, thickness = 6, className, showLabel = true, label } = props
+
+  const clamped = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0))
+  const radius = (size - thickness) / 2
+  const circumference = 2 * Math.PI * radius
+  const dashOffset = circumference * (1 - clamped / 100)
+
+  return (
+    <div className={`relative inline-flex items-center justify-center ${className || ''}`} style={{ width: size, height: size }}>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="block">
+        <defs>
+          <linearGradient id="kyd-progress-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="var(--icon-accent)" />
+            <stop offset="100%" stopColor="var(--icon-accent-hover)" />
+          </linearGradient>
+        </defs>
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="var(--icon-button-secondary)"
+          strokeOpacity={0.3}
+          strokeWidth={thickness}
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="url(#kyd-progress-gradient)"
+          strokeWidth={thickness}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+          style={{ transition: 'stroke-dashoffset 800ms ease' }}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+        {/* subtle pulsing halo */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius + thickness / 2}
+          fill="none"
+          stroke="var(--icon-accent)"
+          strokeOpacity={0.15}
+          strokeWidth={2}
+          className="animate-pulse"
+        />
+      </svg>
+      {showLabel ? (
+        <div
+          className="absolute inset-0 flex items-center justify-center text-[10px] sm:text-xs font-medium"
+          style={{ color: 'var(--text-main)' }}
+        >
+          {label ? label : `${Math.round(clamped)}%`}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default ProgressCircle
+
+

package/src/ui/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+
+import { cn } from "../utils"
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-xs",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
+
+