kyd-shared-badge 0.3.94 → 0.3.95

package/package.json

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

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} />
+            <SkillsBubble skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} skillsByCategory={assessmentResult?.graph_insights?.skillsByCategory} />
           </div>
         </Reveal>
         <div className={'pt-6 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>

package/src/components/SkillsBubble.tsx

@@ -56,14 +56,15 @@ const pickGreenByExperience = (experience: number): string => {
   return green5;
 };
 
-export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; skillsByCategory?: Record<string, 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'; years?: number }>; 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(() => {
@@ -128,20 +129,44 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, he
   const skillsGrid = useMemo(() => {
     const cat = activeCategory || '';
     const list = (skillsByCategory && cat in (skillsByCategory || {})) ? (skillsByCategory?.[cat] || []) : [];
-    const items = list.slice(0, 10);
+    // 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) || '' };
+    }).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: string[] = [];
-    for (let i = 0; i < Math.min(9, items.length); i++) display.push(items[i]);
+    const display: Array<{ label: string; years?: number; presence?: 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 });
+    }
     if (list.length > 10) {
-      display.push(`Others (${overflow})`);
+      display.push({ label: `Others (${overflow})` });
     } else if (items.length >= 10) {
-      display.push(items[9]);
+      const it = items[9];
+      display.push({ label: it?.name || '', years: it?.years, presence: it?.presence });
     } else {
-      if (items.length > 9) display.push(items[9]);
+      if (items.length > 9) {
+        const it = items[9];
+        display.push({ label: it?.name || '', years: it?.years, presence: it?.presence });
+      }
     }
     while (display.length < 10) display.push('');
     return display;
-  }, [activeCategory, skillsByCategory]);
+  }, [activeCategory, skillsByCategory, skillsMeta]);
+
+  // Compute category percent share (by ratio) for header display
+  const categoryPercentMap = useMemo(() => {
+    const total = bubbles.reduce((sum, b) => sum + (b.data?.ratio || 0), 0);
+    const map: Record<string, number> = {};
+    for (const b of bubbles) {
+      const p = total > 0 ? Math.round(((b.data?.ratio || 0) / total) * 100) : 0;
+      map[b.label] = p;
+    }
+    return map;
+  }, [bubbles]);
 
   if (!hasRadar) return null;
 
@@ -199,48 +224,11 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, he
               (node as HTMLElement).style.color = 'var(--text-main)';
               (node as HTMLElement).style.pointerEvents = 'none';
 
-              const header = document.createElement('div');
-              header.className = 'mb-1';
               const title = document.createElement('div');
               title.className = 'font-medium';
               title.style.color = 'var(--text-main)';
               title.textContent = String(d.displayText || d._id || '');
-              header.appendChild(title);
-
-              const content = document.createElement('div');
-              content.className = 'space-y-1';
-              const ratio = Number(d.value || 0);
-              const experience = Number(d.colorValue || 0);
-
-              const row1 = document.createElement('div');
-              row1.className = 'flex items-center justify-between gap-3';
-              const row1Left = document.createElement('span');
-              row1Left.style.color = 'var(--text-secondary)';
-              row1Left.textContent = 'Ratio';
-              const row1Right = document.createElement('span');
-              row1Right.className = 'font-medium';
-              row1Right.style.color = 'var(--text-main)';
-              row1Right.textContent = `${ratio}%`;
-              row1.appendChild(row1Left);
-              row1.appendChild(row1Right);
-
-              const row2 = document.createElement('div');
-              row2.className = 'flex items-center justify-between gap-3';
-              const row2Left = document.createElement('span');
-              row2Left.style.color = 'var(--text-secondary)';
-              row2Left.textContent = 'Experience';
-              const row2Right = document.createElement('span');
-              row2Right.className = 'font-medium';
-              row2Right.style.color = 'var(--text-main)';
-              row2Right.textContent = String(experience);
-              row2.appendChild(row2Left);
-              row2.appendChild(row2Right);
-
-              content.appendChild(row1);
-              content.appendChild(row2);
-
-              node.appendChild(header);
-              node.appendChild(content);
+              node.appendChild(title);
             } catch {}
           }}
         />
@@ -249,12 +237,22 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, he
         <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}%` : ''}
           </div>
           <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs" style={{ color: 'var(--text-secondary)', height: 160 }}>
-            {skillsGrid.map((label, idx) => (
+            {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: label ? 'var(--icon-button-secondary)' : 'transparent', flexShrink: 0 }} />
-                <span className="truncate" title={label}>{label || '\u00A0'}</span>
+                <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>

package/src/types.ts

@@ -383,6 +383,8 @@ 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 }>; 
   // New: Flattened list of business rule selections (for appendix)
   business_rules_all?: Array<{
     provider: string;