kyd-shared-badge 0.3.16 → 0.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -155,6 +155,12 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
             isPublic={true}
             badgeImageUrl={badgeData.badgeImageUrl || ''}
             summary={report_summary}
+            enterpriseMatch={(() => {
+              const em = assessmentResult?.enterprise_match;
+              if (!em) return null;
+              const role = em.role || {};
+              return { score: typeof em.score === 'number' ? em.score : undefined, description: em.description, roleName: role.name };
+            })()}
             countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
         />
       </Reveal>

package/src/components/ReportHeader.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { formatLocalDate } from '../utils/date';
 import countriesLib from 'i18n-iso-countries';
 import enLocale from 'i18n-iso-countries/langs/en.json';
+import { FiInfo } from 'react-icons/fi';
 
 // Register English locale once at module import time
 countriesLib.registerLocale(enLocale);
@@ -36,10 +37,11 @@ interface ReportHeaderProps {
     isPublic: boolean;
     badgeImageUrl: string;
     summary?: string;
+    enterpriseMatch?: { score?: number; description?: string; roleName?: string } | null;
     countries?: string[];
 }
 
-const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, countries = [] }: ReportHeaderProps) => {
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [] }: ReportHeaderProps) => {
   // Use the dynamic image if available, otherwise fall back to the score-based one.
   const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0);
   const tint = hexToRgba(pickTint(score || 0), 0.06);
@@ -59,7 +61,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
         {/* Left Half: Badge Image with robust centered overlay */}
         <div className="w-full md:w-1/3 flex items-center justify-center self-stretch">
           <div className="relative w-full max-w-xs select-none">
-            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={400} height={400} unoptimized className='w-full h-auto pointer-events-none p-10'/>
+            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={400} height={400} priority className='w-full h-auto pointer-events-none p-10'/>
             {/* Centered overlay slightly lower on Y axis, responsive and readable */}
             <div className="pointer-events-none absolute left-1/2 top-[66%] -translate-x-1/2 -translate-y-1/2">
               <div className="font-extrabold text-black text-3xl " >
@@ -96,7 +98,32 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                 })()
               )}
             </div>
-            {summary && (
+            {(enterpriseMatch?.description || enterpriseMatch?.score !== undefined) ? (
+              <div className={'hidden md:block text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <p className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Role Match{enterpriseMatch?.roleName ? ` — ${enterpriseMatch.roleName}` : ''}</p>
+                    <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
+                      <FiInfo size={16} />
+                      <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 }}>AI-generated</div>
+                          <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>Role match score and description are AI-generated.</div>
+                        </div>
+                      </div>
+                    </span>
+                  </div>
+                  {typeof enterpriseMatch?.score === 'number' && (
+                    <span className="px-2 py-1 rounded text-xs font-semibold" style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
+                      {Math.round(enterpriseMatch.score)}%
+                    </span>
+                  )}
+                </div>
+                {enterpriseMatch?.description && (
+                  <p className={'text-sm'} style={{ color: 'var(--text-main)' }}>{enterpriseMatch.description}</p>
+                )}
+              </div>
+            ) : summary && (
               <div className={'hidden md:block text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>
                 <div>
                   <p className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Summary:</p>

package/src/types.ts

@@ -154,6 +154,15 @@ export interface FBIWantedMatch {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   raw_result: any;
 }
+export interface EnterpriseMatch {
+  role: {
+    name: string;
+    description: string;
+  };
+  score: number;
+  description: string;
+}
+
 
 export interface AssessmentResult {
   final_percent: number;
@@ -225,8 +234,8 @@ export interface AssessmentResult {
   skills_matrix?: SkillsMatrix;
   skills_all?: SkillsAll;
   graph_insights?: GraphInsightsPayload;
+  enterprise_match?: EnterpriseMatch;
 }
-
 export interface ClientMetadata {
   ipAddress: string;
   userAgent: string;