kyd-shared-badge 0.3.98 → 0.3.100

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -27,6 +27,7 @@ import UseCases from './components/UseCases';
 import SummaryCards from './components/SummaryCards';
 import GaugeCard from './components/GaugeCard';
 import RiskCard from './components/RiskCard';
+import RoleOverviewCard from './components/RoleOverviewCard';
 import TopContributingFactors from './components/TopContributingFactors';
 import AiUsageBody from './components/AiUsageBody';
 import SanctionsMatches from './components/SanctionsMatches';
@@ -210,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}
@@ -226,25 +227,22 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             />
           </div>
           {/* Top-right: Role match section */}
-          <div className={'rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-            <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Role Alignment</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 (
-                <div className={'space-y-2'}>
-                  <div className={'flex items-center gap-2'}>
-                    <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{role?.name || 'Role'}</div>
-                    <span className={'px-2 py-0.5 rounded text-xs font-semibold'} style={{ backgroundColor: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>{em.label}</span>
-                  </div>
-                  {em.description ? (
-                    <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{em.description}</div>
-                  ) : null}
-                </div>
-              );
-            })()}
-          </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,13 +86,22 @@ 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: {
+                // Hide center text; show tier labels around the arc instead
+                formatTextValue: () => '',
+                matchColorWithArc: true,
+              },
+              tickLabels: tickLabels,
+            }}
             arc={{
               padding: 0.02,
               // Explicit subArcs ensure left->right map: red -> yellow -> green
@@ -91,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

@@ -0,0 +1,114 @@
+'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';
+
+export default function RoleOverviewCard({
+  title,
+  matchLabel,
+  roleName,
+}: {
+  title: string;
+  matchLabel?: string;
+  roleName?: string;
+}) {
+  const pct = useMemo(() => {
+    const raw = String(matchLabel || '').toLowerCase();
+    let mapped = 0;
+    if (raw.includes('optimal')) mapped = 100;
+    else if (raw.includes('strong')) mapped = 75;
+    else if (raw.includes('partial')) mapped = 50;
+    else if (raw.includes('weak')) mapped = 25;
+    else mapped = 0; // incompatible or unknown
+    return clampPercent(mapped);
+  }, [matchLabel]);
+
+  const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
+  const displayLabel = String(matchLabel || '').trim();
+
+  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 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>
+          <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>
+        </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%' }}
+            value={pct}
+            minValue={0}
+            maxValue={100}
+            labels={{
+              valueLabel: {
+                formatTextValue: () => displayLabel,
+                matchColorWithArc: true,
+              },
+              tickLabels: tickLabels,
+            }}
+            arc={{
+              padding: 0.02,
+              gradient: true,
+              colorArray: [red, yellow, green],
+            }}
+            pointer={{ type: 'arrow', elastic: true, animationDelay: 0 }}
+          />
+        </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

@@ -20,7 +20,7 @@ type HoverTooltipState = {
   x: number;
   y: number;
   title: string;
-  body?: string;
+  body?: React.ReactNode;
 } | null;
 
 const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
@@ -50,7 +50,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[] }>; headless?: boolean }) {
   const hasRadar = !!(skillsCategoryRadar && skillsCategoryRadar.length > 0);
   const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 24);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -58,6 +58,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,7 +78,7 @@ 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 });
@@ -144,15 +145,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 +170,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 +195,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 +237,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">
@@ -255,23 +281,48 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
           </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>

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">