kyd-shared-badge 0.3.93 → 0.3.95

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -207,80 +207,78 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const OverviewSection = () => (
     <div className={`${wrapperMaxWidth} mx-auto mt-6`}>
       <Reveal headless={isHeadless} offsetY={8} durationMs={500}>
-        <div className={'rounded-xl shadow-xl p-6 sm:p-8 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
-          {/* Quadrant layout */}
-          <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
-            {/* Top-left: Name, countries, badge image handled by ReportHeader */}
-            <div>
-              <ReportHeader 
-                badgeId={badgeId}
-                developerName={badgeData.developerName}
-                updatedAt={updatedAt}
-                score={overallFinalPercent || 0}
-                isPublic={true}
-                badgeImageUrl={badgeData.badgeImageUrl || ''}
-                summary={undefined}
-                enterpriseMatch={null}
-                countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
-                accountAuthenticity={assessmentResult?.account_authenticity}
-                companyName={badgeData.companyName}
-              />
-            </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}
+        {/* Quadrant layout */}
+        <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
+          {/* Top-left: Name, countries, badge image handled by ReportHeader */}
+          <div>
+            <ReportHeader 
+              badgeId={badgeId}
+              developerName={badgeData.developerName}
+              updatedAt={updatedAt}
+              score={overallFinalPercent || 0}
+              isPublic={true}
+              badgeImageUrl={badgeData.badgeImageUrl || ''}
+              summary={undefined}
+              enterpriseMatch={null}
+              countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
+              accountAuthenticity={assessmentResult?.account_authenticity}
+              companyName={badgeData.companyName}
+            />
+          </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>
-                );
-              })()}
-            </div>
+                  {em.description ? (
+                    <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{em.description}</div>
+                  ) : null}
+                </div>
+              );
+            })()}
+          </div>
 
-            {/* Bottom-left: Technical score */}
-            <div>
-              {(() => {
-                const uiTech = graphInsights?.uiSummary?.technical || {};
-                const techPct = Math.round(Number(uiTech?.percent ?? 0));
-                const techLabel = uiTech?.label || 'EVIDENCE';
-                return (
-                  <GaugeCard
-                    title={'KYD Technical'}
-                    description={'Composite of technical evidence; more right indicates stronger capability'}
-                    percent={techPct}
-                    label={techLabel}
-                    topMovers={[]}
-                  />
-                );
-              })()}
-            </div>
-            {/* Bottom-right: Risk score */}
-            <div>
-              {(() => {
-                const uiRisk = graphInsights?.uiSummary?.risk || {};
-                const riskPctGood = Math.round(Number(uiRisk?.percent_good ?? 0));
-                const riskLabel = uiRisk?.label || 'RISK';
-                return (
-                  <RiskCard
-                    title={'KYD Risk'}
-                    description={'Lower bar height indicates lower risk exposure'}
-                    percentGood={riskPctGood}
-                    label={riskLabel}
-                    topMovers={[]}
-                  />
-                );
-              })()}
-            </div>
+          {/* Bottom-left: Technical score */}
+          <div>
+            {(() => {
+              const uiTech = graphInsights?.uiSummary?.technical || {};
+              const techPct = Math.round(Number(uiTech?.percent ?? 0));
+              const techLabel = uiTech?.label || 'EVIDENCE';
+              return (
+                <GaugeCard
+                  title={'KYD Technical'}
+                  description={'Composite of technical evidence; more right indicates stronger capability'}
+                  percent={techPct}
+                  label={techLabel}
+                  topMovers={[]}
+                />
+              );
+            })()}
+          </div>
+          {/* Bottom-right: Risk score */}
+          <div>
+            {(() => {
+              const uiRisk = graphInsights?.uiSummary?.risk || {};
+              const riskPctGood = Math.round(Number(uiRisk?.percent_good ?? 0));
+              const riskLabel = uiRisk?.label || 'RISK';
+              return (
+                <RiskCard
+                  title={'KYD Risk'}
+                  description={'Lower bar height indicates lower risk exposure'}
+                  percentGood={riskPctGood}
+                  label={riskLabel}
+                  topMovers={[]}
+                />
+              );
+            })()}
           </div>
         </div>
       </Reveal>
@@ -290,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,13 +56,15 @@ const pickGreenByExperience = (experience: number): string => {
   return green5;
 };
 
-export default function SkillsBubble({ skillsCategoryRadar, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; 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(() => {
@@ -111,18 +113,90 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
     return [green5, green4, green3, green2, green1];
   }, []);
 
-  const percentLegend = useMemo(() => {
+  const defaultActiveCategory = useMemo(() => {
+    let best: { label: string; ratio: number } | null = null;
+    for (const b of bubbles) {
+      const ratio = Number(b.data?.ratio || 0);
+      if (!best || ratio > best.ratio) best = { label: b.label, ratio };
+    }
+    return best?.label || (skillsRadarLimited[0]?.axis || null);
+  }, [bubbles, skillsRadarLimited]);
+
+  useEffect(() => {
+    if (!activeCategory && defaultActiveCategory) setActiveCategory(defaultActiveCategory);
+  }, [activeCategory, defaultActiveCategory]);
+
+  const skillsGrid = useMemo(() => {
+    const cat = activeCategory || '';
+    const list = (skillsByCategory && cat in (skillsByCategory || {})) ? (skillsByCategory?.[cat] || []) : [];
+    // 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: 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({ label: `Others (${overflow})` });
+    } else if (items.length >= 10) {
+      const it = items[9];
+      display.push({ label: it?.name || '', years: it?.years, presence: it?.presence });
+    } else {
+      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, 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);
-    return bubbles
-      .map((b) => ({ label: b.label, percent: total > 0 ? Math.round(((b.data?.ratio || 0) / total) * 100) : 0, experience: b.data?.experience || 0 }))
-      .sort((a, b) => b.percent - a.percent);
+    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;
 
   return (
     <div className={'kyd-avoid-break'}>
-      <div ref={containerRef} style={{ width: '100%', height: 340 }}>
+      <div ref={containerRef} style={{ width: '100%', height: 340, position: 'relative' }}>
+        {!headless && (
+          <div
+            className="text-xs rounded-md border shadow-sm px-2 py-1"
+            style={{
+              position: 'absolute',
+              right: 8,
+              top: 8,
+              zIndex: 5,
+              pointerEvents: 'none',
+              background: 'var(--content-card-background)',
+              borderColor: 'var(--icon-button-secondary)',
+              color: 'var(--text-secondary)'
+            }}
+          >
+            <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>
+            </div>
+            <div className="flex items-center gap-2 mt-1">
+              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green5 }} />
+              <span>Color = experience (darker = more)</span>
+            </div>
+          </div>
+        )}
         <BubbleChart
           className='w-full h-full'
           data={bubbleData}
@@ -142,6 +216,7 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
           }}
           tooltipFunc={(node, d) => {
             try {
+              try { setActiveCategory(String(d.displayText || d._id || '')); } catch {}
               node.innerHTML = '';
               node.className = 'rounded-md border shadow-sm px-3 py-2 text-xs';
               (node as HTMLElement).style.background = 'var(--content-card-background)';
@@ -149,101 +224,39 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
               (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 {}
           }}
         />
       </div>
       <div className={'mt-3'}>
         <div ref={legendRef} className={'kyd-avoid-break'} style={{ position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1">
-            {percentLegend.map((item, idx) => (
-              <button
-                key={idx}
-                className="flex items-center gap-2 text-xs text-left hover:underline underline-offset-2"
-                style={{ color: 'var(--text-secondary)', background: 'transparent' }}
-                onClick={() => {
-                  try {
-                    if (typeof window !== 'undefined') {
-                      const anchor = `#appendix-skills-cat-${encodeURIComponent(item.label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''))}`;
-                      const url = `#appendix${anchor}`;
-                      window.location.hash = url;
-                    }
-                  } catch {}
-                }}
-                onMouseEnter={(e) => {
-                  const rect = legendRef.current?.getBoundingClientRect();
-                  if (!rect) return;
-                  const x = e.clientX - rect.left + 12;
-                  const y = e.clientY - rect.top + 12;
-                  setLegendTooltip({ visible: true, x, y, title: item.label, body: `${item.label} • ${item.percent}% of ratio • Experience ${item.experience}` });
-                }}
-                onMouseMove={(e) => {
-                  if (!legendTooltip || !legendRef.current) return;
-                  const rect = legendRef.current.getBoundingClientRect();
-                  setLegendTooltip({ ...legendTooltip, x: e.clientX - rect.left + 12, y: e.clientY - rect.top + 12 });
-                }}
-                onMouseLeave={() => setLegendTooltip(null)}
-              >
-                <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: pickGreenByExperience(item.experience), flexShrink: 0 }} />
-                <span className="truncate">{item.label}</span>
-                <span className="ml-auto opacity-80">{item.percent}%</span>
-              </button>
+          <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((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>
           {!headless && <TooltipBox state={legendTooltip} />}
-          {/* Legends */}
-          <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
-            <div className="flex items-center gap-2">
-              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green1 }} />
-              <span>Bubble size: relative ratio of observed/self-reported/certified</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green5 }} />
-              <span>Color shade: experience (darker = more experienced)</span>
-            </div>
-          </div>
         </div>
       </div>
     </div>

package/src/types.ts

@@ -381,6 +381,10 @@ export interface GraphInsightsPayload {
     // New: experience metric (0-100) for color saturation
     experience?: 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 }>; 
   // New: Flattened list of business rule selections (for appendix)
   business_rules_all?: Array<{
     provider: string;