kyd-shared-badge 0.3.118 → 0.3.120

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.118",
+  "version": "0.3.120",
   "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/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, ConnectProgress } from '../ui';
 import Link from 'next/link';
 import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '../ui/';
 
@@ -222,8 +222,23 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     return setupAction === 'install' || setupAction === 'created';
   }, [githubConnectedAccount]);
   
+  // Progress UI is outsourced to ConnectProgress
+  
   return (
-    <AnimatePresence initial={false} mode="wait">
+    <>
+      {/* Mobile: relative summary above content */}
+      {providers?.length ? (
+        <div className="sm:hidden px-4 mb-3">
+          <ConnectProgress layout="inline" providers={providers} connectedIds={connectedIds} />
+        </div>
+      ) : null}
+
+      {/* Desktop: fixed top-right summary */}
+      {providers?.length ? (
+        <ConnectProgress providers={providers} connectedIds={connectedIds} />
+      ) : null}
+
+      <AnimatePresence initial={false} mode="wait">
       {showDataHandling ? (
         <motion.div
           key="data-handling-card"
@@ -695,7 +710,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
           </AnimatePresence>
         </Card>
       )}
-    </AnimatePresence>
+      </AnimatePresence>
+    </>
   );
 }
 

package/src/lib/support/routes.ts

@@ -86,7 +86,7 @@ export async function createSupportTicketRoute(req: NextRequest, userId: string)
           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.at(-1)?.id
+          startingAfter = inv.data[inv.data.length - 1]?.id
         }
         totalSpentUsd = Math.round(totalSpentUsd) / 100
       }
@@ -116,7 +116,7 @@ export async function createSupportTicketRoute(req: NextRequest, userId: string)
     }
 
     const product = 'KYD Self-check'
-    const name = userItem?.fullName || userItem?.email || ''
+    const name = userItem?.fullName || userItem?.name || userItem?.email || ''
     const email = userItem?.email || ''
 
     const html = `

package/src/ui/connect-progress.tsx

@@ -0,0 +1,97 @@
+'use client'
+import React, { useMemo } from 'react'
+import { Card, CardContent } from './card'
+import { ProgressCircle } from './progress-circle'
+
+export type ConnectProgressProps = {
+  providers: Array<{ id: string; name: string }>
+  connectedIds: Set<string>
+  className?: string
+  layout?: 'fixed-desktop' | 'inline'
+}
+
+export function ConnectProgress(props: ConnectProgressProps) {
+  const { providers, connectedIds, className, layout = 'fixed-desktop' } = props
+
+  const hasGithub = connectedIds.has('github')
+  const hasLinkedIn = connectedIds.has('linkedin')
+  const otherConnectedCount = useMemo(() => {
+    let count = 0
+    connectedIds.forEach(id => { if (id !== 'github' && id !== 'linkedin') count += 1 })
+    return count
+  }, [connectedIds])
+
+  const progressPercent = useMemo(() => {
+    const githubWeight = hasGithub ? 65 : 0
+    const linkedinWeight = hasLinkedIn ? 15 : 0
+    const othersWeight = Math.min(otherConnectedCount, 2) * 10
+    return Math.max(0, Math.min(100, githubWeight + linkedinWeight + othersWeight))
+  }, [hasGithub, hasLinkedIn, otherConnectedCount])
+
+  const progressCopy = useMemo(() => {
+    const score = progressPercent
+    if (score === 0) {
+      return {
+        headline: 'Get started — connect GitHub',
+        body: 'GitHub contributes ~65% of your profile strength. Add LinkedIn (+15%) and 1–2 other platforms (+10% each). 70%+ is strong; 100% is optional.'
+      }
+    }
+    if (hasGithub && score < 70) {
+      return {
+        headline: 'Good base — add more signals',
+        body: 'Add LinkedIn (+15%) and at least one other platform (+10%) to reach 70%+, which is considered strong. 100% is not mandatory.'
+      }
+    }
+    if (!hasGithub && score < 70) {
+      return {
+        headline: 'Add GitHub for a big boost',
+        body: 'Current signals are light. Connecting GitHub adds ~65% weight and significantly improves your profile.'
+      }
+    }
+    if (score >= 70 && score < 90) {
+      return {
+        headline: 'Strong — recommended coverage achieved',
+        body: '70%+ indicates a strong profile. Adding more platforms can further improve verification. 100% is optional but even better.'
+      }
+    }
+    if (score >= 90) {
+      return {
+        headline: 'Excellent — high confidence',
+        body: 'You are near complete coverage. 100% is not required, but additional platforms can further increase confidence.'
+      }
+    }
+    return {
+      headline: 'Keep going',
+      body: 'Connect more platforms to strengthen your profile. 70%+ is strong; 100% is optional.'
+    }
+  }, [progressPercent, hasGithub])
+
+  const content = (
+    <Card className={`border-[var(--icon-button-secondary)] ${className || ''}`} style={{ backgroundColor: 'var(--content-card-background)'}}>
+      <CardContent className="py-3 px-3">
+        <div className="flex items-center gap-3">
+          <ProgressCircle value={progressPercent} size={64} thickness={6} />
+          <div className="min-w-0 max-w-xs">
+            <div className="text-sm font-semibold truncate" style={{ color: 'var(--text-main)'}}>{progressCopy.headline}</div>
+            <div className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)'}}>
+              {progressCopy.body}
+            </div>
+            <div className="text-[10px] mt-1" style={{ color: 'var(--text-secondary)'}}>
+              Weighted score • {progressPercent}%
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+
+  if (layout === 'inline') return content
+
+  return (
+    <div className="hidden sm:block fixed top-6 right-6 z-50">{content}</div>
+  )
+}
+
+export default ConnectProgress
+
+

package/src/ui/index.ts

@@ -3,4 +3,6 @@ export * from './card';
 export * from './input';
 export * from './textarea';
 export * from './spinner';
-export * from './tooltip';
+export * from './tooltip';
+export * from './progress-circle';
+export * from './connect-progress';

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
+
+