kyd-shared-badge 0.3.128 → 0.3.130

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -211,6 +211,28 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
     </div>
   );
 
+  const AuthenticityNotice = () => {
+    const label = (assessmentResult?.account_authenticity?.label || '').toLowerCase();
+    if (!label) return null;
+    const isCritical = label === 'likely inauthentic';
+    const isSuspicious = label === 'suspicious';
+    if (!isCritical && !isSuspicious) return null;
+    return (
+      <div className={'mt-4'}>
+        <div className={'rounded-md border p-3 flex items-start gap-2'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+          <span className={'mt-0.5'} style={{ color: isCritical ? '#B00020' : '#9f580a' }}><FiAlertTriangle size={18} /></span>
+          <div className={'text-sm'}>
+            <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{isCritical ? 'Warning' : 'Attention'}</div>
+            <div className={'mt-1'} style={{ color: 'var(--text-secondary)' }}>{assessmentResult?.account_authenticity?.description || (isCritical ? 'We detected signals that some linked accounts may be inauthentic. Review sources below.' : 'Some inconsistencies were observed across linked accounts. Review sources below.')}</div>
+            <div className={'mt-2'}>
+              <a href="#appendix-connected" className={'text-xs font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>See more</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   const OverviewSection = () => (
     <div className={`${wrapperMaxWidth} mx-auto mt-6`}>
       <Reveal headless={isHeadless} offsetY={8} durationMs={500}>
@@ -387,7 +409,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)' }}>Score Improvement Recommendationsw</Reveal>
+              <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Score Improvement Recommendations</Reveal>
               <Reveal headless={isHeadless}>
                 <div className={'space-y-3'}>
                   {rec?.summary ? (
@@ -631,6 +653,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
                 }`}
             </style>
             {/* Long-form original layout retained for headless/print */}
+            <AuthenticityNotice />
             {OverviewSection()}
             <RoleFitSection />
             {TechnicalSection()}
@@ -643,6 +666,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
               <>
                 <TabNav />
                 <div className={'px-2 sm:px-0 pb-2'}>
+                  {activeTab === 'overview' && <AuthenticityNotice />}
                   {activeTab === 'overview' && OverviewSection()}
                   {activeTab === 'technical' && TechnicalSection()}
                   {activeTab === 'risk' && RiskSection()}
@@ -653,7 +677,10 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
                 </div>
               </>
             ) : (
-              OverviewSection()
+              <>
+                <AuthenticityNotice />
+                {OverviewSection()}
+              </>
             )
         )}
         {!headless && !suppressChat && (

package/src/components/AppendixTables.tsx

@@ -9,6 +9,7 @@ import { red, yellow, green, hexToRgba } from '../colors';
 import RiskIcon from './icons/risk';
 import CodeIcon from './icons/code';
 import AiIcon from './icons/ai';
+import { ProviderIcon } from '../utils/provider';
 
 interface SanctionSource {
     issuingEntity: string;
@@ -304,6 +305,7 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                                     <th
                                         key={header}
                                         scope="col"
+                                        title={header === 'Observation' ? 'Observation attribute details are part of the KYD proprietary framework and are available on a case-by-case basis.' : undefined}
                                         onClick={() => onHeaderClick(header)}
                                         className={'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider'}
                                         style={{ color: 'var(--text-secondary)', cursor: isSortable ? 'pointer' : 'default', userSelect: isSortable ? 'none' : 'auto' }}
@@ -337,22 +339,6 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                             }
                             const br = source as BusinessRuleRow & { pillar?: string };
                             const anchorId = br.uid ? `rule-${br.uid}` : undefined;
-                            const ProviderIcon = ({ name, pillar }: { name?: string, pillar?: string }) => {
-                                const n = (name || '').toLowerCase();
-                                if (n.includes('github')) return <FaGithub />;
-                                if (n.includes('gitlab')) return <FaGitlab />;
-                                if (n.includes('stack')) return <FaStackOverflow />;
-                                if (n.includes('credly')) return <SiCredly />;
-                                if (n.includes('fiverr')) return <SiFiverr />;
-                                if (n.includes('kaggle')) return <FaKaggle />;
-                                if (n.includes('google')) return <FaGoogle />;
-                                if (n.includes('linkedin')) return <FaLinkedin />;
-                                const p = (pillar || '').toLowerCase();
-                                if (p === 'risk') return <RiskIcon width={28} height={28} />;
-                                if (p === 'technical') return <CodeIcon width={28} height={28} />;
-                                if (p === 'ai') return <AiIcon width={28} height={28} />;
-                                return <span className="inline-block w-8 h-8 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
-                            };
                             return (
                                 <tr
                                     id={anchorId}
@@ -369,12 +355,18 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                                 >
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>
                                         <span title={br.provider || ''} className={'inline-flex items-center text-4xl'} style={{ color: 'var(--text-main)' }}>
-                                            <ProviderIcon name={br.provider} pillar={br.pillar} />
+                                            <ProviderIcon name={br.provider} className='relative w-8 h-8' />
                                         </span>
                                     </td>
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{br.pillar || '—'}</td>
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{br.category || '—'}</td>
-                                    <td className={'px-4 py-4 whitespace-normal text-sm font-medium'} style={{ color: 'var(--text-main)' }}>{br.label || '—'}</td>
+                                    <td
+                                        className={'px-4 py-4 whitespace-normal text-sm font-medium'}
+                                        style={{ color: 'var(--text-main)' }}
+                                        title={'Observation attribute details are part of the KYD proprietary framework and are available on a case-by-case basis.'}
+                                    >
+                                        -
+                                    </td>
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{(() => {
                                         const weight = Number(br.weight);
                                         if (!Number.isFinite(weight)) return 'Neutral';

package/src/components/ReportHeader.tsx

@@ -4,7 +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, FiAlertTriangle } from 'react-icons/fi';
+import { FiInfo } from 'react-icons/fi';
 import { ProviderIcon } from '../utils/provider';
 import { green1, green2, green3, green4, green5 } from '../colors';
 
@@ -80,25 +80,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
       className={'p-6 rounded-md border h-full'}
       style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${tint}, ${tint})` }}
     >
-      {(() => {
-        const label = (accountAuthenticity?.label || '').toLowerCase();
-        if (!label) return null;
-        const isCritical = label === 'likely inauthentic';
-        const isSuspicious = label === 'suspicious';
-        if (!isCritical && !isSuspicious) return null;
-        return (
-          <div className={'mb-4 rounded-md border p-3 flex items-start gap-2'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
-            <span className={'mt-0.5'} style={{ color: isCritical ? '#B00020' : '#9f580a' }}><FiAlertTriangle size={18} /></span>
-            <div className={'text-sm'}>
-              <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{isCritical ? 'Warning' : 'Attention'}</div>
-              <div className={'mt-1'} style={{ color: 'var(--text-secondary)' }}>{accountAuthenticity?.description || (isCritical ? 'We detected signals that some linked accounts may be inauthentic. Review sources below.' : 'Some inconsistencies were observed across linked accounts. Review sources below.')}</div>
-              <div className={'mt-2'}>
-                <a href="#appendix-connected" className={'text-xs font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>See more</a>
-              </div>
-            </div>
-          </div>
-        );
-      })()}
+      {/* Authenticity notice moved to top-level display */}
       <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-row items-center justify-between' : 'flex-col h-full'}`}>
         {/* Info section: Title, Candidate, Details and Summary */}
         <div className={`w-full ${rightBadgeLayout ? 'md:flex-1' : ''}`}>

package/src/components/SkillsBubble.tsx

@@ -172,7 +172,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
     if (list.length > 10) {
       // Aggregate years and sources for remaining datapoints beyond the top 10
       const remaining = enriched.slice(10);
-      const aggregatedYears = remaining.reduce((sum, it) => sum + Number(it.years || 0), 0);
+      const aggregatedYears = Math.round(remaining.reduce((sum, it) => sum + Number(it.years || 0), 0) * 10) / 10;
       const aggregatedSourcesSet = new Set<string>();
       for (const it of remaining) {
         if (Array.isArray(it.sources)) {

package/src/utils/provider.tsx

@@ -1,7 +1,10 @@
 'use client';
 
-import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
-import { SiCoursera, SiCredly, SiFiverr, SiToptal, SiUdemy } from 'react-icons/si';
+import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle, FaShieldAlt } from 'react-icons/fa';
+import { SiCoursera, SiCredly, SiFiverr, SiUdemy, SiAmazon } from 'react-icons/si';
+import RiskIcon from '../components/icons/risk';
+import CodeIcon from '../components/icons/code';
+import AiIcon from '../components/icons/ai';
 
 export const ProviderIcon = ({ name, className }: { name?: string; className?: string }) => {
   const n = (name || '').toLowerCase();
@@ -11,11 +14,15 @@ export const ProviderIcon = ({ name, className }: { name?: string; className?: s
   if (n.includes('credly')) return <SiCredly className={className} />;
   if (n.includes('fiverr')) return <SiFiverr className={className} />;
   if (n.includes('kaggle')) return <FaKaggle className={className} />;
-  if (n.includes('google')) return <FaGoogle className={className} />;
+  if (n.includes('google') || n.includes('gscholar')) return <FaGoogle className={className} />;
   if (n.includes('linkedin')) return <FaLinkedin className={className} />;
-  if (n.includes('toptal')) return <SiToptal className={className} />;
   if (n.includes('coursera')) return <SiCoursera className={className} />;
   if (n.includes('udemy')) return <SiUdemy className={className} />;
+  if (n.includes('amazon')) return <SiAmazon className={className} />;
+  if (n.includes('cyber')) return <RiskIcon className={className} />;
+  if (n.includes('risk')) return <RiskIcon className={className} />;
+  if (n.includes('technical')) return <CodeIcon className={className} />;
+  if (n.includes('ai')) return <AiIcon className={className} />;
   return <span className={className || 'inline-block w-3 h-3 rounded-full'} style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
 };
 
@@ -29,9 +36,9 @@ export const getProviderDisplayName = (name?: string): string => {
   if (n.includes('kaggle')) return 'Kaggle';
   if (n.includes('google')) return 'Google Scholar';
   if (n.includes('linkedin')) return 'LinkedIn';
-  if (n.includes('toptal')) return 'TopTal';
   if (n.includes('coursera')) return 'Coursera';
   if (n.includes('udemy')) return 'Udemy';
+  if (n.includes('amazon')) return 'Amazon Author';
   return name || 'Provider';
 };
 
@@ -45,9 +52,9 @@ export const getProviderTooltipCopy = (provider?: string): string => {
   if (n.includes('kaggle')) return 'Competition results, notebooks, and dataset contributions that reflect analytical skill.';
   if (n.includes('google')) return 'Publications, citations, and scholarly presence indicating research impact.';
   if (n.includes('linkedin')) return 'Professional history, endorsements, and network signals indicating credibility.';
-  if (n.includes('toptal')) return 'Professional history, endorsements, and network signals indicating credibility.';
   if (n.includes('coursera')) return 'Professional history, training, and course completion signals indicating credibility.';
   if (n.includes('udemy')) return 'Professional history, training, and course completion signals indicating credibility.';
+  if (n.includes('amazon')) return 'Published works and author profile signals from Amazon Stores indicating credibility.';
   return 'Signals contributed from this provider relevant to capability and trust.';
 };