kyd-shared-badge 0.3.92 → 0.3.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.92",
+  "version": "0.3.94",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -21,7 +21,7 @@
     "@aws-sdk/lib-dynamodb": "^3.893.0",
     "@chatscope/chat-ui-kit-react": "^2.1.1",
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
-    "@knowyourdeveloper/react-bubble-chart": "^1.0.4",
+    "@knowyourdeveloper/react-bubble-chart": "^1.0.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "ai": "5.0.47",

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>

package/src/components/SkillsBubble.tsx

@@ -3,6 +3,7 @@
 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';
 
 type SkillsRadarPoint = {
   axis: string;
@@ -24,35 +25,44 @@ const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
   if (!state || !state.visible) return null;
   return (
     <div
+      className="rounded-md border shadow-sm px-3 py-2 text-xs"
       style={{
         position: 'absolute',
         left: state.x,
         top: state.y,
         pointerEvents: 'none',
         background: 'var(--content-card-background)',
-        border: '1px solid var(--icon-button-secondary)',
+        borderColor: 'var(--icon-button-secondary)',
         color: 'var(--text-main)',
-        padding: 10,
-        borderRadius: 6,
+        zIndex: 10,
         minWidth: 250,
         maxWidth: 320,
-        zIndex: 10,
       }}
     >
-      <div style={{ fontWeight: 600 }}>{state.title}</div>
+      <div className="font-medium" style={{ color: 'var(--text-main)' }}>{state.title}</div>
       {state.body ? (
-        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{state.body}</div>
+        <div style={{ color: 'var(--text-secondary)' }}>{state.body}</div>
       ) : null}
     </div>
   );
 };
 
-export default function SkillsBubble({ skillsCategoryRadar, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; headless?: boolean }) {
+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, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; skillsByCategory?: Record<string, 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);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -78,9 +88,7 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
       const value = seriesAvg(d);
       const experience = Math.max(0, Math.min(100, Number(d.experience || 0)));
       const size = Math.max(2, Math.round((value / maxValue) * 100)); // 2..100
-      // map experience to saturation in HSL; keep hue constant for brand-neutral look
-      const saturation = Math.max(20, Math.min(100, experience));
-      const color = `hsl(210 ${saturation}% 45%)`;
+      const color = 'var(--content-card-background)';
       return {
         label: d.axis,
         value: size,
@@ -101,22 +109,69 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
   }, [bubbles]);
 
   const colorLegend = useMemo(() => {
-    const steps = [20, 35, 50, 65, 80, 90, 100];
-    return steps.map((s) => `hsl(210 ${s}% 45%)`);
+    return [green5, green4, green3, green2, green1];
   }, []);
 
-  const percentLegend = 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);
-  }, [bubbles]);
+  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] || []) : [];
+    const items = list.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]);
+    if (list.length > 10) {
+      display.push(`Others (${overflow})`);
+    } else if (items.length >= 10) {
+      display.push(items[9]);
+    } else {
+      if (items.length > 9) display.push(items[9]);
+    }
+    while (display.length < 10) display.push('');
+    return display;
+  }, [activeCategory, skillsByCategory]);
 
   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}
@@ -136,71 +191,74 @@ 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)';
+              (node as HTMLElement).style.borderColor = 'var(--icon-button-secondary)';
+              (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.style.fontWeight = '600';
+              title.className = 'font-medium';
+              title.style.color = 'var(--text-main)';
               title.textContent = String(d.displayText || d._id || '');
-              const body = document.createElement('div');
-              body.style.fontSize = '12px';
-              body.style.color = 'var(--text-secondary)';
+              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);
-              body.textContent = `${ratio}% ratio • Experience ${experience}`;
-              node.appendChild(title);
-              node.appendChild(body);
+
+              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);
             } 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: `hsl(210 ${Math.max(20, Math.min(100, item.experience))}% 45%)`, 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'}
+          </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) => (
+              <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>
+              </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: 'hsl(210 80% 45%)' }} />
-              <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: 'hsl(210 20% 45%)' }} />
-              <span>Color saturation: experience (darker = more experienced)</span>
-            </div>
-          </div>
         </div>
       </div>
     </div>

package/src/types.ts

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