kyd-shared-badge 0.3.101 → 0.3.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.101",
+  "version": "0.3.102",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -21,7 +21,7 @@
     "@aws-sdk/lib-dynamodb": "^3.893.0",
     "@chatscope/chat-ui-kit-react": "^2.1.1",
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
-    "@knowyourdeveloper/react-bubble-chart": "^1.0.6",
+    "@knowyourdeveloper/react-bubble-chart": "^1.0.7",
     "@knowyourdeveloper/react-gauge-component": "^1.1.30",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",

package/src/SharedBadgeDisplay.tsx

@@ -224,6 +224,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               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())}
             />
           </div>
           {/* Top-right: Role match section */}

package/src/components/GaugeCard.tsx

@@ -97,8 +97,11 @@ export default function GaugeCard({
             labels={{
               valueLabel: {
                 // Hide center text; show tier labels around the arc instead
-                formatTextValue: () => '',
+                formatTextValue: () => displayLabel,
                 matchColorWithArc: true,
+                style: {
+                  textShadow: 'none'
+                }
               },
               tickLabels: tickLabels,
             }}

package/src/components/ReportHeader.tsx

@@ -5,6 +5,7 @@ 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 { ProviderIcon } from '../utils/provider';
 
 // Register English locale once at module import time
 countriesLib.registerLocale(enLocale);
@@ -41,13 +42,28 @@ interface ReportHeaderProps {
     countries?: string[];
     accountAuthenticity?: { label?: string; description?: string };
     companyName?: string;
+    sourcesProviders?: string[];
 }
 
-const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName }: ReportHeaderProps) => {
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName, sourcesProviders = [] }: 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);
   const matchLabel = enterpriseMatch?.label;
+  const sources = (() => {
+    const primary = Array.isArray(sourcesProviders) ? sourcesProviders : [];
+    // Fallback to authenticity oauth list if no explicit sources provided
+    const fallback = (accountAuthenticity as any)?.oauth_connected as string[] | undefined;
+    const combined = (primary && primary.length ? primary : (fallback || [])).filter(Boolean);
+    // Deduplicate while preserving order
+    const seen: Record<string, boolean> = {};
+    return combined.filter((n) => {
+      const key = (n || '').toLowerCase();
+      if (seen[key]) return false;
+      seen[key] = true;
+      return true;
+    });
+  })();
   
   return (
     <div
@@ -111,6 +127,20 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                   );
                 })()
               )}
+              {sources.length > 0 && (
+                <p className={'flex items-center gap-2 mt-2'}>
+                  <a href="#appendix-connected" className={'inline-flex items-center gap-2 group'} style={{ color: 'var(--text-secondary)' }}>
+                    <span className={'font-semibold'}>Sources:</span>
+                    <span className={'flex items-center gap-2'}>
+                      {sources.map((provider, idx) => (
+                        <span key={`${provider}-${idx}`} className={'text-sm'} style={{ color: 'var(--text-main)' }}>
+                          <ProviderIcon name={provider} className={'inline-block align-middle'} />
+                        </span>
+                      ))}
+                    </span>
+                  </a>
+                </p>
+              )}
             </div>
             {(enterpriseMatch?.description || matchLabel) ? (
               <div className={'hidden md:block text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>

package/src/components/RoleOverviewCard.tsx

@@ -45,7 +45,7 @@ export default function RoleOverviewCard({
       }
     },
     ticks: [
-      { value: 0, valueConfig: { formatTextValue: () => 'Incompatible' } },
+      { value: 0, valueConfig: { formatTextValue: () => 'Very Weak' } }, // Incompatible is too long, gets cut off
       { value: 25, valueConfig: { formatTextValue: () => 'Weak' } },
       { value: 50, valueConfig: { formatTextValue: () => 'Partial' } },
       { value: 75, valueConfig: { formatTextValue: () => 'Strong' } },
@@ -55,14 +55,14 @@ export default function RoleOverviewCard({
 
   return (
     <div
-      className={'rounded-md p-5 border flex flex-col h-full'}
+      className={'rounded-md border flex flex-col h-full'}
       style={{
         backgroundColor: 'var(--content-card-background)',
         borderColor: 'var(--icon-button-secondary)',
         backgroundImage: `linear-gradient(${headerTint}, ${headerTint})`,
       }}
     >
-      <div className="mb-3 flex items-start justify-between gap-2">
+      <div className="mb-3  px-5 pt-5 flex items-start justify-between gap-2">
         <div>
           <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
           <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>How well the candidate aligns with the target role based on KYD evidence.</div>
@@ -77,8 +77,8 @@ export default function RoleOverviewCard({
           </div>
         </span>
       </div>
-      <div className="flex-grow flex flex-col items-center justify-center" style={{ minHeight: 200 }}>
-        <div className="relative" style={{ width: '100%', aspectRatio: '2 / 1', maxWidth: 360 }}>
+      <div className="flex-grow flex flex-col items-center justify-center pb-5" style={{ minHeight: 200 }}>
+        <div className="relative group" style={{ width: '100%', aspectRatio: '2 / 1', maxWidth: 390 }}>
           <GaugeComponent
             type="semicircle"
             style={{ width: 'calc(100% - 16px)', height: '100%', marginLeft: 8, marginRight: 8 }}
@@ -90,6 +90,9 @@ export default function RoleOverviewCard({
               valueLabel: {
                 formatTextValue: () => displayLabel,
                 matchColorWithArc: true,
+                style: {
+                  textShadow: 'none'
+                }
               },
               tickLabels: tickLabels,
             }}