kyd-shared-badge 0.3.95 → 0.3.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.95",
+  "version": "0.3.97",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -22,6 +22,7 @@
     "@chatscope/chat-ui-kit-react": "^2.1.1",
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "@knowyourdeveloper/react-bubble-chart": "^1.0.5",
+    "@knowyourdeveloper/react-gauge-component": "^1.1.30",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "ai": "5.0.47",

package/src/SharedBadgeDisplay.tsx

@@ -288,7 +288,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
         <Reveal headless={isHeadless}>
           <div className={'kyd-avoid-break'}>
             <h4 className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills Footprint</h4>
-            <SkillsBubble skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} skillsByCategory={assessmentResult?.graph_insights?.skillsByCategory} />
+            <SkillsBubble skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} skillsByCategory={assessmentResult?.graph_insights?.skillsByCategory} skillsMeta={assessmentResult?.graph_insights?.skillsMeta} />
           </div>
         </Reveal>
         <div className={'pt-6 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>

package/src/components/GaugeCard.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import React from 'react';
+import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { hexToRgba, scoreToColorHex, scoreToCssVar, clampPercent } from '../colors';
+import { hexToRgba, scoreToColorHex, scoreToCssVar, clampPercent, red, yellow, green } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
@@ -28,13 +29,7 @@ export default function GaugeCard({
 }) {
   const pct = clampPercent(percent);
   const displayLabel = label || '';
-  // Use a fixed internal coordinate system and scale the SVG to container for responsiveness
-  const size = 280;
-  const strokeWidth = 32;
-  const radius = (size - strokeWidth) / 2;
-  const circumference = Math.PI * radius;
-  const progress = pct / 100;
-  const dash = circumference * progress;
+  // Keep card tinting consistent with score
   const progressColor = scoreToCssVar(pct);
   const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
 
@@ -69,11 +64,23 @@ 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 }}>
-          <svg width={'100%'} height={'100%'} viewBox={`0 0 ${size} ${size/2}`} preserveAspectRatio={'xMidYMid meet'}>
-            <path d={`M ${strokeWidth/2} ${size/2} A ${radius} ${radius} 0 0 1 ${size-strokeWidth/2} ${size/2}`} stroke={'var(--icon-button-secondary)'} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" />
-            <path d={`M ${strokeWidth/2} ${size/2} A ${radius} ${radius} 0 0 1 ${size-strokeWidth/2} ${size/2}`} stroke={progressColor} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" strokeDasharray={`${dash},${circumference}`} />
-            <line x1={size/2} y1={size/2} x2={size/2 + radius * Math.cos(Math.PI * progress - Math.PI)} y2={size/2 + radius * Math.sin(Math.PI * progress - Math.PI)} stroke={'var(--text-main)'} strokeWidth="2" />
-          </svg>
+          <GaugeComponent
+            type="semicircle"
+            style={{ width: '100%', height: '100%' }}
+            value={pct}
+            minValue={0}
+            maxValue={100}
+            arc={{
+              padding: 0.02,
+              // Explicit subArcs ensure left->right map: red -> yellow -> green
+              subArcs: [
+                { limit: 33, color: red },
+                { limit: 66, color: yellow },
+                { limit: 100, color: green },
+              ],
+            }}
+            pointer={{ type: 'blob', elastic: true, animationDelay: 0 }}
+          />
           {(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/SkillsBubble.tsx

@@ -4,6 +4,8 @@ import React, { useMemo, useRef, useState, useEffect } from 'react';
 import { BubbleChart } from '@knowyourdeveloper/react-bubble-chart';
 import '@knowyourdeveloper/react-bubble-chart/style.css';
 import { green1, green2, green3, green4, green5 } from '../colors';
+import { ProviderIcon } from '../utils/provider';
+import { providers } from '../types';
 
 type SkillsRadarPoint = {
   axis: string;
@@ -47,24 +49,14 @@ const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
   );
 };
 
-const pickGreenByExperience = (experience: number): string => {
-  const exp = Math.max(0, Math.min(100, Number(experience || 0)));
-  if (exp >= 80) return green1;
-  if (exp >= 60) return green2;
-  if (exp >= 40) return green3;
-  if (exp >= 20) return green4;
-  return green5;
-};
 
-export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, skillsMeta, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; skillsByCategory?: Record<string, string[]>; skillsMeta?: Record<string, { presence?: 'certified' | 'observed' | 'self-reported'; years?: number }>; headless?: boolean }) {
+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 }) {
   const hasRadar = !!(skillsCategoryRadar && skillsCategoryRadar.length > 0);
   const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 24);
   const containerRef = useRef<HTMLDivElement>(null);
   const legendRef = useRef<HTMLDivElement>(null);
   const [legendTooltip, setLegendTooltip] = useState<HoverTooltipState>(null);
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
-  console.log('skillsRadarLimited', skillsRadarLimited);
-  console.log('skillsByCategory', skillsByCategory);
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const id = window.setTimeout(() => {
@@ -74,6 +66,23 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
     }
   }, []);
 
+  // Tooltip helpers for legend/columns area
+  const computeTooltipPosition = (target: HTMLElement) => {
+    const host = legendRef.current;
+    if (!host) return { x: 0, y: 0 };
+    const rect = target.getBoundingClientRect();
+    const hostRect = host.getBoundingClientRect();
+    const x = rect.left - hostRect.left;
+    const y = rect.bottom - hostRect.top + 6;
+    return { x, y };
+  };
+  const showLegendTooltipAt = (target: EventTarget | null, title: string, body?: string) => {
+    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
   const bubbles = useMemo(() => {
     const seriesAvg = (d: SkillsRadarPoint): number => {
@@ -132,25 +141,36 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
     // Enrich with meta and sort by years desc
     const enriched = list.map((name) => {
       const meta = skillsMeta?.[name] || {};
-      return { name, years: Number(meta.years || 0), presence: (meta.presence as string) || '' };
+      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 };
     }).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 } | ''> = [];
+    const display: Array<{ label: string; years?: number; presence?: string; 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 });
+      display.push({ label, years: it.years, presence: it.presence, sources: it.sources });
     }
     if (list.length > 10) {
-      display.push({ label: `Others (${overflow})` });
+      // Aggregate years and sources for remaining datapoints beyond the top 10
+      const remaining = enriched.slice(10);
+      const aggregatedYears = remaining.reduce((sum, it) => sum + Number(it.years || 0), 0);
+      const aggregatedSourcesSet = new Set<string>();
+      for (const it of remaining) {
+        if (Array.isArray(it.sources)) {
+          for (const src of it.sources) aggregatedSourcesSet.add(String(src));
+        }
+      }
+      const aggregatedSources = Array.from(aggregatedSourcesSet);
+      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 });
+      display.push({ label: it?.name || '', years: it?.years, presence: it?.presence, sources: it?.sources });
     } else {
       if (items.length > 9) {
         const it = items[9];
-        display.push({ label: it?.name || '', years: it?.years, presence: it?.presence });
+        display.push({ label: it?.name || '', years: it?.years, presence: it?.presence, sources: it?.sources });
       }
     }
     while (display.length < 10) display.push('');
@@ -168,8 +188,94 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
     return map;
   }, [bubbles]);
 
+  const presenceColor = (presence?: string) => {
+    const p = String(presence || '').toLowerCase();
+    if (p === 'self-reported') return green5;
+    if (p === 'observed') return green3;
+    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 leftColumnGrid = useMemo(() => (skillsGrid || []).slice(0, 5), [skillsGrid]);
+  const rightColumnGrid = useMemo(() => (skillsGrid || []).slice(5, 10), [skillsGrid]);
+
   if (!hasRadar) return null;
 
+  const columnComponent = (entry: { label: string; years?: number; presence?: string; 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">
+          <div className="flex items-center gap-2 min-w-0 text-lg text-[var(--text-main)]">
+            <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">{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}
+          </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-main)]">{`${entry.years} Years`}</span> : <span className="opacity-0 whitespace-nowrap text-[var(--text-main)]">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) }} />
+                <span
+                  className="whitespace-nowrap text-sm underline decoration-dotted underline-offset-2 cursor-help"
+                  onMouseEnter={(e) => {
+                    const copy = presenceTooltipCopy(entry.presence);
+                    showLegendTooltipAt(e.currentTarget, copy.title, copy.body);
+                  }}
+                  onMouseLeave={hideLegendTooltip}
+                >
+                  {entry.presence}
+                </span>
+              </div>
+            ) : <span className="opacity-0 whitespace-nowrap">.</span>}
+          </div>
+        ) : null}
+      </div>
+    )
+  }
+
   return (
     <div className={'kyd-avoid-break'}>
       <div ref={containerRef} style={{ width: '100%', height: 340, position: 'relative' }}>
@@ -233,28 +339,37 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
           }}
         />
       </div>
-      <div className={'mt-3'}>
+      <div className='mt-8'>
         <div ref={legendRef} className={'kyd-avoid-break'} style={{ position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
           <div className="mb-2 text-xs font-medium" style={{ color: 'var(--text-main)' }}>
-            {activeCategory ? `Category: ${activeCategory}` : 'Category'}
-            {activeCategory ? ` • ${categoryPercentMap[activeCategory] ?? 0}%` : ''}
+            
+            {activeCategory ? (
+              <span
+                className="ml-1 underline decoration-dotted underline-offset-2 cursor-help"
+                onMouseEnter={(e) =>
+                  showLegendTooltipAt(
+                    e.currentTarget,
+                    'Category share',
+                    'Percent = how focused you are in this category vs others (combined signals).'
+                  )
+                }
+                onMouseLeave={hideLegendTooltip}
+              >
+                <span>{activeCategory ? `Category: ${activeCategory}` : 'Category'}</span> {`• ${categoryPercentMap[activeCategory] ?? 0}%`}
+              </span>
+            ) : null}
           </div>
-          <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs" style={{ color: 'var(--text-secondary)', height: 160 }}>
-            {skillsGrid.map((entry, idx) => (
-              <div key={idx} className="flex items-center gap-2 min-w-0">
-                <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 + 1}.</span>
-                {entry && typeof entry !== 'string' ? (
-                  <span className="truncate" title={entry.label}>
-                    {entry.label}
-                    {entry.years ? ` • ${entry.years}y` : ''}
-                    {entry.presence ? ` • ${entry.presence}` : ''}
-                  </span>
-                ) : (
-                  <span className="truncate">{typeof entry === 'string' ? entry : '\u00A0'}</span>
-                )}
-              </div>
-            ))}
+          <div className="grid grid-cols-2 gap-x-4 text-xs" style={{ color: 'var(--text-secondary)', minHeight: 250 }}>
+            <div className="grid gap-2">
+              {leftColumnGrid.map((entry, idx) => (
+                columnComponent(entry, idx, true)
+              ))}
+            </div>
+            <div className="grid gap-2">
+              {rightColumnGrid.map((entry, idx) => (
+                columnComponent(entry, idx, false)
+              ))}
+            </div>
           </div>
           {!headless && <TooltipBox state={legendTooltip} />}
         </div>

package/src/types.ts

@@ -1,3 +1,20 @@
+export const providers = [
+  'github',
+  'gitlab',
+  'credly',
+  'fiverr',
+  'kaggle',
+  'google_scholar',
+  'stackoverflow',
+  'linkedin',
+  'toptal',
+  'coursera',
+  'udemy',
+]
+
+export type ProviderNames = typeof providers;
+
+
 export type Provider = {
   id: string;
   name: string;
@@ -384,7 +401,7 @@ export interface GraphInsightsPayload {
   // 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 }>; 
+  skillsMeta?: Record<string, { presence?: 'certified' | 'observed' | 'self-reported'; years?: number; sources?: string[] }>; 
   // New: Flattened list of business rule selections (for appendix)
   business_rules_all?: Array<{
     provider: string;