kyd-shared-badge 0.3.93 → 0.3.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.93",
+  "version": "0.3.94",
   "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>

package/src/components/SkillsBubble.tsx

@@ -56,12 +56,13 @@ const pickGreenByExperience = (experience: number): string => {
   return green5;
 };
 
-export default function SkillsBubble({ skillsCategoryRadar, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; headless?: boolean }) {
+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') {
@@ -111,18 +112,66 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
     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}
@@ -142,6 +191,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)';
@@ -197,53 +247,18 @@ export default function SkillsBubble({ skillsCategoryRadar, headless }: { skills
       </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'}
+          </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: 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,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;