kyd-shared-badge 0.3.99 → 0.3.101

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -211,7 +211,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
         {/* Quadrant layout */}
         <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
           {/* Top-left: Name, countries, badge image handled by ReportHeader */}
-          <div>
+          <div className={`${hasEnterpriseMatch ? '' : 'md:col-span-2'}`}>
             <ReportHeader 
               badgeId={badgeId}
               developerName={badgeData.developerName}
@@ -227,20 +227,22 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             />
           </div>
           {/* Top-right: Role match section */}
-          <div>
-            {(() => {
-              const em = assessmentResult?.enterprise_match;
-              if (!em) return <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>No role match available.</div>;
-              const role = em.role || {};
-              return (
-                <RoleOverviewCard
-                  title={'Role Alignment'}
-                  matchLabel={em.label}
-                  roleName={role?.name || 'Role'}
-                />
-              );
-            })()}
-          </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>
+          )}
 
           {/* Bottom-left: Technical score */}
           <div>

package/src/components/GaugeCard.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { hexToRgba, scoreToColorHex, scoreToCssVar, clampPercent, red, yellow, green } from '../colors';
+import { hexToRgba, scoreToColorHex, clampPercent, red, yellow, green } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
@@ -29,20 +29,43 @@ export default function GaugeCard({
 }) {
   const pct = clampPercent(percent);
   const displayLabel = label || '';
-  // Keep card tinting consistent with score
-  const progressColor = scoreToCssVar(pct);
   const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
 
+  // Technical evidence tiers from backend thresholds
+  const tickLabels = useMemo(() => ({
+    type: 'outer' as const,
+    hideMinMax: false,
+    defaultTickLineConfig: {
+      length: 7,
+      width: 1,
+      distanceFromArc: 3,
+      color: 'var(--icon-button-secondary)'
+    },
+    defaultTickValueConfig: {
+      style: {
+        fontSize: '10px',
+        fill: 'var(--text-secondary)'
+      }
+    },
+    ticks: [
+      { value: 0, valueConfig: { formatTextValue: () => 'Very Low' } },
+      { value: 25, valueConfig: { formatTextValue: () => 'Low' } },
+      { value: 50, valueConfig: { formatTextValue: () => 'Moderate' } },
+      { value: 75, valueConfig: { formatTextValue: () => 'High' } },
+      { value: 100, valueConfig: { formatTextValue: () => 'Very High' } },
+    ]
+  }), []);
+
   return (
     <div
-      className={'rounded-md p-5 border flex flex-col min-h-full'}
+      className={'rounded-md border flex flex-col min-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 flex items-start justify-between gap-2 pt-5 px-5">
         <div>
           <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
           {description ? (
@@ -63,19 +86,21 @@ export default function GaugeCard({
         )}
       </div>
       <div className="flex-grow flex flex-col items-center justify-center" style={{ minHeight: 200 }}>
-        <div className="relative group" style={{ width: '100%', aspectRatio: '2 / 1', maxWidth: 360 }}>
+        <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}
             labels={{
               valueLabel: {
-                // Show backend-provided label in the center instead of percent
-                formatTextValue: () => displayLabel,
+                // Hide center text; show tier labels around the arc instead
+                formatTextValue: () => '',
                 matchColorWithArc: true,
               },
+              tickLabels: tickLabels,
             }}
             arc={{
               padding: 0.02,
@@ -98,7 +123,6 @@ export default function GaugeCard({
             </div>
           )}
         </div>
-        <div className={'mt-3 text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{displayLabel}</div>
       </div>
       {Array.isArray(topMovers) && topMovers.length > 0 && (
         <div className="mt-4 text-center">

package/src/components/ReportHeader.tsx

@@ -51,7 +51,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
   
   return (
     <div
-      className={'mb-8 p-6 rounded-xl shadow-lg border'}
+      className={'p-6 rounded-md shadow-md border'}
       style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${tint}, ${tint})` }}
     >
       {(() => {
@@ -73,14 +73,18 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
           </div>
         );
       })()}
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
         {/* Info section: Title, Candidate, Details and Summary */}
         <div className="w-full">
           <div className='space-y-2'>
             <span className='flex gap-2 w-full items-end text-start justify-start'>
-              <h2 className={'text-xl font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate Report:</h2>
+              <h2 className={'text-xl font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate:</h2>
               <div className={'text-xl font-bold'} style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</div>
             </span>
+            <span className='flex gap-2 w-full items-end text-start justify-start'>
+              <h3 className='text-sm font-semibold text-[--text-secondary]'>Date:</h3>
+              <span className='text-sm text-[--text-main]'>{formatLocalDate(updatedAt)}</span>
+            </span>
             <div className={'text-sm'}>
               {Array.isArray(countries) && countries.length > 0 && (
                 (() => {
@@ -88,9 +92,21 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                     .map(code => countriesLib.getName((code || '').toUpperCase(), 'en') || code)
                     .filter(Boolean);
                   return (
-                    <p>
-                      <span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Observed Country Affiliations:</span>{' '}
+                    <p className={'flex items-center gap-1'}>
+                      <span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>
+                        {countryNames.length > 1 ? 'Countries:' : 'Country:'}
+                      </span>
+                      
                       <span style={{ color: 'var(--text-main)' }}>{countryNames.join(', ')}</span>
+                      <span className={'relative inline-flex items-center group cursor-help'} style={{ color: 'var(--text-secondary)' }}>
+                        <FiInfo size={14} />
+                        <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 }}>Countries</div>
+                            <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>Derived from linked sources and activity; shows where they’re most affiliated.</div>
+                          </div>
+                        </div>
+                      </span>
                     </p>
                   );
                 })()
@@ -135,7 +151,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
         {/* Badge Image with robust centered overlay */}
         <div className="w-full 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} priority className='w-full h-auto pointer-events-none p-10'/>
+            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={100} height={100} priority className='w-full h-auto pointer-events-none p-10'/>
             <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 ">
                 {Math.round(score || 0)}%

package/src/components/RiskCard.tsx

@@ -89,6 +89,18 @@ export default function RiskCard({
               }}
             />
           ))}
+          <span
+            className="pointer-events-none absolute left-[-65px] bottom-0 text-xs"
+            style={{ color: 'var(--text-secondary)' }}
+          >
+            Low risk -
+          </span>
+          <span
+            className="pointer-events-none absolute right-[-68px] top-0 text-xs"
+            style={{ color: 'var(--text-secondary)' }}
+          >
+            - High Risk
+          </span>
           {(tooltipText || description) && (
             <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 }}>

package/src/components/RoleOverviewCard.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import React, { useMemo } from 'react';
+import Link from 'next/link';
+import { FiInfo } from 'react-icons/fi';
 import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
 import { clampPercent, hexToRgba, scoreToColorHex, red, yellow, green } from '../colors';
 
@@ -27,17 +29,33 @@ export default function RoleOverviewCard({
   const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
   const displayLabel = String(matchLabel || '').trim();
 
-  const segmentLabels = [
-    'Incompatible',
-    'Weak',
-    'Partial',
-    'Strong',
-    'Optimal',
-  ];
+  const tickLabels = useMemo(() => ({
+    type: 'outer' as const,
+    hideMinMax: false,
+    defaultTickLineConfig: {
+      length: 7,
+      width: 1,
+      distanceFromArc: 3,
+      color: 'var(--icon-button-secondary)'
+    },
+    defaultTickValueConfig: {
+      style: {
+        fontSize: '10px',
+        fill: 'var(--text-secondary)'
+      }
+    },
+    ticks: [
+      { value: 0, valueConfig: { formatTextValue: () => 'Incompatible' } },
+      { value: 25, valueConfig: { formatTextValue: () => 'Weak' } },
+      { value: 50, valueConfig: { formatTextValue: () => 'Partial' } },
+      { value: 75, valueConfig: { formatTextValue: () => 'Strong' } },
+      { value: 100, valueConfig: { formatTextValue: () => 'Optimal' } },
+    ]
+  }), []);
 
   return (
     <div
-      className={'rounded-md p-5 border flex flex-col min-h-full'}
+      className={'rounded-md p-5 border flex flex-col h-full'}
       style={{
         backgroundColor: 'var(--content-card-background)',
         borderColor: 'var(--icon-button-secondary)',
@@ -47,16 +65,24 @@ export default function RoleOverviewCard({
       <div className="mb-3 flex items-start justify-between gap-2">
         <div>
           <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
-          {roleName ? (
-            <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>{roleName}</div>
-          ) : null}
+          <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>
         </div>
+        <span className={'relative inline-flex items-center group cursor-help'} style={{ color: 'var(--text-secondary)' }}>
+          <FiInfo />
+          <div className="hidden group-hover:block absolute z-30 right-0 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 }}>{title}</div>
+              <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Alignment reflects how well the candidate matches the target role based on KYD evidence.</div>
+            </div>
+          </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 }}>
           <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}
@@ -65,6 +91,7 @@ export default function RoleOverviewCard({
                 formatTextValue: () => displayLabel,
                 matchColorWithArc: true,
               },
+              tickLabels: tickLabels,
             }}
             arc={{
               padding: 0.02,
@@ -74,17 +101,13 @@ export default function RoleOverviewCard({
             pointer={{ type: 'arrow', elastic: true, animationDelay: 0 }}
           />
         </div>
-        <div className="mt-3 w-full">
-          <div className="grid grid-cols-5 text-[10px] sm:text-xs" style={{ color: 'var(--text-secondary)' }}>
-            {segmentLabels.map((label, idx) => (
-              <div key={idx} className="flex flex-col items-center">
-                <div className="h-2 w-px" style={{ background: 'var(--icon-button-secondary)' }} />
-                <div className="mt-1 whitespace-nowrap">{label}</div>
-              </div>
-            ))}
-          </div>
+        {roleName ? (
+        <div className="mt-3 text-center">
+          <Link href="#role" className={'text-sm font-semibold text-[var(--text-main)] hover:underline'}>{roleName}</Link>
         </div>
+      ) : null}
       </div>
+      
     </div>
   );
 }

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 = {
@@ -20,7 +22,7 @@ type HoverTooltipState = {
   x: number;
   y: number;
   title: string;
-  body?: string;
+  body?: React.ReactNode;
 } | null;
 
 const TooltipBox = ({ state }: { state: 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'; 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);
@@ -58,6 +60,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
   const [legendTooltip, setLegendTooltip] = useState<HoverTooltipState>(null);
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
   const [legendHovered, setLegendHovered] = useState<boolean>(false);
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const id = window.setTimeout(() => {
@@ -77,14 +80,14 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
     const y = rect.bottom - hostRect.top + 6;
     return { x, y };
   };
-  const showLegendTooltipAt = (target: EventTarget | null, title: string, body?: string) => {
+  const showLegendTooltipAt = (target: EventTarget | null, title: string, body?: React.ReactNode) => {
     if (!(target instanceof HTMLElement)) return;
     const { x, y } = computeTooltipPosition(target);
     setLegendTooltip({ visible: true, x, y, title, body });
   };
   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)];
@@ -93,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)';
@@ -104,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) => ({
@@ -144,15 +158,16 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
     const enriched = list.map((name) => {
       const meta = skillsMeta?.[name] || {};
       const sources = Array.isArray((meta as any).sources) ? (meta as any).sources as string[] : [];
-      return { name, years: Number(meta.years || 0), presence: (meta.presence as string) || '', sources };
+      const presenceTypes = Array.isArray((meta as any).presenceTypes) ? ((meta as any).presenceTypes as Array<'certified' | 'observed' | 'self-reported'>) : ((meta as any).presence ? [String((meta as any).presence) as any] : []);
+      return { name, years: Number(meta.years || 0), presence: (meta as any).presence as string | undefined, presenceTypes, sources };
     }).sort((a, b) => b.years - a.years || a.name.localeCompare(b.name));
     const items = enriched.slice(0, 10);
     const overflow = list.length - items.length;
-    const display: Array<{ label: string; years?: number; presence?: string; sources?: string[] } | ''> = [];
+    const display: Array<{ label: string; years?: number; presence?: string; presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>; sources?: string[] } | ''> = [];
     for (let i = 0; i < Math.min(9, items.length); i++) {
       const it = items[i];
       const label = it.name ? `${it.name}` : '';
-      display.push({ label, years: it.years, presence: it.presence, sources: it.sources });
+      display.push({ label, years: it.years, presence: it.presence, presenceTypes: it.presenceTypes, sources: it.sources });
     }
     if (list.length > 10) {
       // Aggregate years and sources for remaining datapoints beyond the top 10
@@ -168,11 +183,11 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
       display.push({ label: `Others (${overflow})`, years: aggregatedYears, sources: aggregatedSources });
     } else if (items.length >= 10) {
       const it = items[9];
-      display.push({ label: it?.name || '', years: it?.years, presence: it?.presence, sources: it?.sources });
+      display.push({ label: it?.name || '', years: it?.years, presence: it?.presence, presenceTypes: it?.presenceTypes, sources: it?.sources });
     } else {
       if (items.length > 9) {
         const it = items[9];
-        display.push({ label: it?.name || '', years: it?.years, presence: it?.presence, sources: it?.sources });
+        display.push({ label: it?.name || '', years: it?.years, presence: it?.presence, presenceTypes: it?.presenceTypes, sources: it?.sources });
       }
     }
     while (display.length < 10) display.push('');
@@ -193,17 +208,41 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
   const presenceColor = (presence?: string) => {
     const p = String(presence || '').toLowerCase();
     if (p === 'self-reported') return green5;
-    if (p === 'observed') return green3;
+    if (p === 'observed') return green2;
     if (p === 'certified') return green1;
     return 'var(--icon-button-secondary)';
   };
 
-  const presenceTooltipCopy = (presence?: string): { title: string; body: string } => {
-    const p = String(presence || '').toLowerCase();
-    if (p === 'self-reported') return { title: 'Self-reported', body: 'Claims (bios, profiles, resumes).' };
-    if (p === 'observed') return { title: 'Observed', body: 'Evidence directly from code and repos.' };
-    if (p === 'certified') return { title: 'Certified', body: 'Verified by credential issuers.' };
-    return { title: 'Info', body: '' };
+  const presenceLegendTooltip = (): { title: string; body: React.ReactNode } => {
+    const Row = ({ color, label }: { color: string; label: string }) => (
+      <div className="flex items-center gap-2">
+        <span className="inline-block h-2 w-2 rounded-full" style={{ background: color }} />
+        <span>{label}</span>
+      </div>
+    );
+    return {
+      title: 'Presence types',
+      body: (
+        <div className="grid gap-1">
+          <Row color={presenceColor('certified')} label="Certified — Verified by credential issuers." />
+          <Row color={presenceColor('observed')} label="Observed — Evidence directly from code and repos." />
+          <Row color={presenceColor('self-reported')} label="Self-reported — Claims (bios, profiles, resumes)." />
+        </div>
+      )
+    };
+  };
+
+  const experienceLegendTooltip = (): { title: string; body: React.ReactNode } => {
+    return {
+      title: 'Experience',
+      body: (
+        <div className="grid gap-1 mt-2">
+          <div>
+            Calculated as time between first and most recent observed evidence across repositories.
+          </div>
+        </div>
+      )
+    };
   };
 
   const leftColumnGrid = useMemo(() => (skillsGrid || []).slice(0, 5), [skillsGrid]);
@@ -211,7 +250,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
 
   if (!hasRadar) return null;
 
-  const columnComponent = (entry: { label: string; years?: number; presence?: string; sources?: string[] } | '', idx: number, isLeft: boolean) => {
+  const columnComponent = (entry: { label: string; years?: number; presence?: string; presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>; sources?: string[] } | '', idx: number, isLeft: boolean) => {
     return (
       <div key={idx} className="flex items-stretch justify-between gap-3 min-w-0">
         <div className="flex flex-col min-w-0 justify-center">
@@ -219,59 +258,115 @@ 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' ? (
-          <div className="flex flex-col items-end leading-tight h-full justify-between text-base">
-            {entry.years ? <span className="whitespace-nowrap text-[var(--text-secondary)]">{`${entry.years} Years`}</span> : <span className="opacity-0 whitespace-nowrap text-[var(--text-secondary)]">0 Years</span>}
-            {entry.presence ? (
-              <div className="flex items-center gap-1">
-                <span className="inline-block h-2 w-2 rounded-full text-sm" style={{ background: presenceColor(entry.presence) }} />
+          <div 
+            className="flex flex-col items-end leading-tight h-full justify-start text-base"
+          >
+            <div className="pb-1">
+              {entry.years ? (
                 <span
-                  className="whitespace-nowrap text-sm underline decoration-dotted underline-offset-2 cursor-help"
+                  className="whitespace-nowrap text-[var(--text-secondary)] underline decoration-dotted underline-offset-2 cursor-help"
                   onMouseEnter={(e) => {
-                    const copy = presenceTooltipCopy(entry.presence);
+                    const copy = experienceLegendTooltip();
                     showLegendTooltipAt(e.currentTarget, copy.title, copy.body);
                   }}
                   onMouseLeave={hideLegendTooltip}
                 >
-                  {entry.presence}
+                  {`${entry.years} Years`}
                 </span>
-              </div>
-            ) : <span className="opacity-0 whitespace-nowrap">.</span>}
+              ) : (
+                <span className="opacity-0 whitespace-nowrap text-[var(--text-secondary)]">0 Years</span>
+              )}
+            </div>
+            <div
+              onMouseEnter={(e) => {
+                const copy = presenceLegendTooltip();
+                showLegendTooltipAt(e.currentTarget, copy.title, copy.body);
+              }}
+              onMouseLeave={hideLegendTooltip}
+              className="pt-1"
+            >
+            {(() => {
+              const types = Array.isArray(entry.presenceTypes) ? entry.presenceTypes : (entry.presence ? [String(entry.presence) as any] : []);
+              const hasAny = types.length > 0;
+              return hasAny ? (
+                <div
+                  className="flex items-center gap-1"
+                  
+                >
+                  {types.map((t) => (
+                    <span key={t} className="inline-block h-2 w-2 rounded-full" style={{ background: presenceColor(t) }} />
+                  ))}
+                </div>
+              ) : <span className="opacity-0 whitespace-nowrap">.</span>;
+            })()}
+            </div>
           </div>
         ) : null}
       </div>
@@ -297,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/connect/ConnectAccounts.tsx

@@ -242,10 +242,12 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
               </div>
               <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>How your data is handled</h3>
               <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-2 leading-relaxed">
-                Hey there! We understand that giving access to your private repositories can be a bit scary. So here's the deal: We install the KYD GitHub App in your account - we only have read access. Then, once you request a badge assessment, we read the repositories and analyze the code, then its deleted, forever. Your code is not accessible to anyone, not even us. 
+                We understand that giving access to your private repositories can be a bit scary. So here's the deal: We install the KYD GitHub App in your account. The app has 
+                <span className="mx-1"><Link href="https://docs.github.com/en/rest/authentication/permissions-required-for-github-apps?apiVersion=2022-11-28#repository-permissions-for-contents" target="_blank" rel="noopener noreferrer" className="underline" style={{ color: 'var(--icon-accent)'}}>Contents <ExternalLink className="size-3 inline-block" /></Link></span>
+                read access - only to the repositories you select. Then, once you request a badge assessment, we read the repositories and analyze the code, then its deleted, forever. Your code is not accessible to anyone, not even us. 
               </p>
               <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-3 leading-relaxed">
-                For details, see our{' '}
+                For other details, see our{' '}
                 <Link href="https://www.knowyourdeveloper.ai/privacy-policy" target="_blank" rel="noopener noreferrer" className="underline" style={{ color: 'var(--icon-accent)'}}>
                   Privacy Policy <ExternalLink className="size-3 inline-block ml-1" />
                 </Link>.
@@ -368,7 +370,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                   onClick={() => setShowDataHandling(true)}
                   className="sm:text-sm text-xs underline text-[var(--icon-accent)] hover:text-[var(--icon-accent-hover)]"
                 >
-                  See how your data is handled
+                  How KYD Handles Your Data
                 </button>
               </p>
               <div className="flex flex-col sm:flex-row w-full gap-3 mt-2 justify-center items-center">

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;