kyd-shared-badge 0.3.100 → 0.3.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.100",
+  "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,11 +77,12 @@ 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: '100%', height: '100%' }}
+            style={{ width: 'calc(100% - 16px)', height: '100%', marginLeft: 8, marginRight: 8 }}
+            marginInPercent={{ top: 0.08, bottom: 0.0, left: 0.1, right: 0.1 }}
             value={pct}
             minValue={0}
             maxValue={100}
@@ -89,6 +90,9 @@ export default function RoleOverviewCard({
               valueLabel: {
                 formatTextValue: () => displayLabel,
                 matchColorWithArc: true,
+                style: {
+                  textShadow: 'none'
+                }
               },
               tickLabels: tickLabels,
             }}

package/src/components/SkillsBubble.tsx

@@ -13,6 +13,8 @@ type SkillsRadarPoint = {
   self_reported?: number;
   certified?: number;
   experience?: number; // 0-100 saturation driver
+  // Total evidence count (backend computed) per category
+  evidence_count_total?: number;
 };
 
 type HoverTooltipState = {
@@ -50,7 +52,7 @@ const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
 };
 
 
-export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, skillsMeta, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; skillsByCategory?: Record<string, string[]>; skillsMeta?: Record<string, { presence?: 'certified' | 'observed' | 'self-reported'; presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>; years?: number; sources?: string[] }>; headless?: boolean }) {
+export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, skillsMeta, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; skillsByCategory?: Record<string, string[]>; skillsMeta?: Record<string, { presence?: 'certified' | 'observed' | 'self-reported'; presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>; years?: number; sources?: string[]; evidenceCount?: number }>; headless?: boolean }) {
   const hasRadar = !!(skillsCategoryRadar && skillsCategoryRadar.length > 0);
   const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 24);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -85,7 +87,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
   };
   const hideLegendTooltip = () => setLegendTooltip(null);
 
-  // ratio drives size: average of observed/self_reported/certified
+  // ratio drives size by default; prefer backend evidence_count_total when present
   const bubbles = useMemo(() => {
     const seriesAvg = (d: SkillsRadarPoint): number => {
       const vals = [Number(d.observed || 0), Number(d.self_reported || 0), Number(d.certified || 0)];
@@ -94,10 +96,19 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
       return Math.max(0, Math.min(100, Math.round(base.reduce((a, b) => a + b, 0) / (base.length || 1))));
     };
 
-    const maxValue = Math.max(1, ...skillsRadarLimited.map(seriesAvg));
+    // Prefer evidence_count_total across categories if available; fallback to ratio
+    const evidenceTotals = (skillsCategoryRadar || []).map((d) => Number((d as any).evidence_count_total || 0));
+    const evidenceAvailable = evidenceTotals.some((v) => v > 0);
+
+    const maxValue = evidenceAvailable
+      ? Math.max(1, ...evidenceTotals)
+      : Math.max(1, ...skillsRadarLimited.map(seriesAvg));
 
     return skillsRadarLimited.map((d) => {
-      const value = seriesAvg(d);
+      const ratio = seriesAvg(d);
+      const evidenceCountTotal = Number((d as any).evidence_count_total || 0);
+      const valueRaw = evidenceAvailable ? evidenceCountTotal : ratio;
+      const value = Math.max(0, Number(valueRaw));
       const experience = Math.max(0, Math.min(100, Number(d.experience || 0)));
       const size = Math.max(2, Math.round((value / maxValue) * 100)); // 2..100
       const color = 'var(--content-card-background)';
@@ -105,11 +116,13 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
         label: d.axis,
         value: size,
         color,
-        tooltip: `${d.axis}\nRatio: ${value}\nExperience: ${experience}`,
-        data: { ratio: value, experience }
+        tooltip: evidenceAvailable
+          ? `${d.axis}\nEvidence: ${value} sources\nExperience: ${experience}`
+          : `${d.axis}\nRatio: ${ratio}\nExperience: ${experience}`,
+        data: { ratio, experience, evidence: value }
       };
     });
-  }, [skillsRadarLimited]);
+  }, [skillsRadarLimited, skillsCategoryRadar]);
 
   const bubbleData = useMemo(() => {
     return bubbles.map((b) => ({
@@ -245,39 +258,70 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
             <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: entry ? 'var(--icon-button-secondary)' : 'transparent', flexShrink: 0 }} />
             <span className="shrink-0 opacity-70 ">{idx + (isLeft ? 1 : 6)}.</span>
             {entry && typeof entry !== 'string' ? (
-              <span className="truncate" title={entry.label}>{entry.label}</span>
+              <span className="truncate" title={entry.label}>
+                {entry.label}
+                {/* Evidence count bullet */}
+                {(() => {
+                  const meta = skillsMeta?.[entry.label];
+                  const count = Number((meta as any)?.evidenceCount || 0);
+                  return count > 0 ? (
+                    <>
+                      {' '}<span className="opacity-60">•</span>{' '}
+                      <span
+                        className="underline decoration-dotted underline-offset-2 cursor-help opacity-80"
+                        onMouseEnter={(e) =>
+                          showLegendTooltipAt(
+                            e.currentTarget,
+                            'Evidence count',
+                            'Total number of sources across observed, certified, and self-reported evidence for this skill.'
+                          )
+                        }
+                        onMouseLeave={hideLegendTooltip}
+                      >
+                        {count}
+                      </span>
+                    </>
+                  ) : null;
+                })()}
+              </span>
             ) : (
               <span className="truncate">{typeof entry === 'string' ? entry : '\u00A0'}</span>
             )}
           </div>
           <span className="text-xs text-[var(--text-secondary)] flex flex-wrap items-center gap-1">
-            <span
-              className="underline decoration-dotted underline-offset-2 cursor-help"
-              onMouseEnter={(e) => showLegendTooltipAt(e.currentTarget, 'Sources', 'The source where we observed this skill.')}
-              onMouseLeave={hideLegendTooltip}
-            >
-              Sources
-            </span>:
-            {Array.isArray((entry as any).sources) && (entry as any).sources.length > 0 ? (
-              (() => {
-                const sourceProviders: string[] = ((entry as any).sources as string[]).map((src: string) => {
-                  const str = String(src);
-                  let provider = str.split(':')[0] || '';
-                  if (!provider || provider === str) {
-                    // If split(':')[0] didn't find a delimiter or provider (i.e., no ':'), try split('.')
-                    provider = str.split('.')[0] || '';
-                  }
-                  return provider.toLowerCase();
-                });
-                const uniqueProviders = Array.from(new Set<string>(sourceProviders));
-                const filteredProviders = uniqueProviders.filter((provider) =>
-                  providers.includes(provider.toLowerCase())
-                );
-                return filteredProviders.map((provider) => (
-                  <ProviderIcon key={provider} name={provider} />
-                ));
-              })()
-            ) : null}
+            {entry && typeof entry !== 'string' ? (
+              <>
+                <span
+                  className="underline decoration-dotted underline-offset-2 cursor-help"
+                  onMouseEnter={(e) => showLegendTooltipAt(e.currentTarget, 'Sources', 'The source where we observed this skill.')}
+                  onMouseLeave={hideLegendTooltip}
+                >
+                  Sources
+                </span>:
+                {Array.isArray((entry as any).sources) && (entry as any).sources.length > 0 ? (
+                  (() => {
+                    const sourceProviders: string[] = ((entry as any).sources as string[]).map((src: string) => {
+                      const str = String(src);
+                      let provider = str.split(':')[0] || '';
+                      if (!provider || provider === str) {
+                        // If split(':')[0] didn't find a delimiter or provider (i.e., no ':'), try split('.')
+                        provider = str.split('.')[0] || '';
+                      }
+                      return provider.toLowerCase();
+                    });
+                    const uniqueProviders = Array.from(new Set<string>(sourceProviders));
+                    const filteredProviders = uniqueProviders.filter((provider) =>
+                      providers.includes(provider.toLowerCase())
+                    );
+                    return filteredProviders.map((provider) => (
+                      <ProviderIcon key={provider} name={provider} />
+                    ));
+                  })()
+                ) : null}
+              </>
+            ) : (
+              <span className="opacity-0 whitespace-nowrap">'\u00A0'</span>
+            )}
           </span>
         </div>
         {entry && typeof entry !== 'string' ? (
@@ -348,7 +392,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
           >
             <div className="flex items-center gap-2">
               <span className="inline-block h-3 w-3 rounded-full" style={{ background: green1 }} />
-              <span>Size = ratio of observed/self-reported/certified</span>
+              <span>Size = evidence count per category</span>
             </div>
             <div className="flex items-center gap-2 mt-1">
               <span className="inline-block h-3 w-3 rounded-full" style={{ background: green5 }} />

package/src/types.ts

@@ -397,11 +397,21 @@ export interface GraphInsightsPayload {
     certified?: number; // 0-100
     // New: experience metric (0-100) for color saturation
     experience?: number;
+    // New: total evidence count across all skills in this category
+    evidence_count_total?: number;
   }>;
   // New: mapping of category -> list of skills contributing to that category
   skillsByCategory?: Record<string, string[]>;
   // New: per-skill metadata used by UI (e.g., presence label, experience years)
-  skillsMeta?: Record<string, { presence?: 'certified' | 'observed' | 'self-reported'; years?: number; sources?: string[] }>; 
+  skillsMeta?: Record<string, { 
+    presence?: 'certified' | 'observed' | 'self-reported'; 
+    // New: list of presence types for multi-dot rendering
+    presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>;
+    years?: number; 
+    sources?: string[];
+    // New: total number of evidence sources across observed/self-reported/certified
+    evidenceCount?: number; 
+  }>; 
   // New: Flattened list of business rule selections (for appendix)
   business_rules_all?: Array<{
     provider: string;