kyd-shared-badge 0.3.9 → 0.3.10

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -213,7 +213,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
                   return (
                       <GaugeCard
                         key={'ai-card'}
-                        title={'KYD AI'}
+                        title={'KYD AI (Beta)'}
                         description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
                         percent={ai_usage_summary?.transparency_score}
                         label={label}
@@ -249,7 +249,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
                 {/* Left: Bars */}
                 <Reveal className="lg:col-span-8 h-full">
                   <CategoryBars
-                    title={'Technical Category Contributions - Percentages'}
+                    title={'Technical Category Contributions'}
                     categories={genreMapping?.['Technical'] as string[]}
                     categoryScores={categoryScores}
                     barColor={barColor}
@@ -466,13 +466,16 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
 
         
           <div className="pt-8">
-            <h3 className={'text-2xl font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Appendix: Data Sources</h3>
+            <h3 className={'text-2xl font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Appendix</h3>
             <div className="space-y-8">
 
               {/* Skills */}
               <Reveal>
                 <div>
-                  <h4 id="appendix-skills" className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Skills</h4>
+                  <h4 id="appendix-skills" className={'text-lg font-bold mb-1'} style={{ color: 'var(--text-main)' }}>Skills</h4>
+                  <div className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
+                    Skills are grouped by evidence: Observed when demonstrated in code, Self-reported when declared by the developer without independent verification, and Certified when confirmed through a credential. These categories distinguish between use, claim, and third-party validation.
+                  </div>
                   <SkillsAppendixTable skillsAll={skillsAll} />
                 </div>
               </Reveal>

package/src/colors.ts

@@ -41,3 +41,27 @@ export { red, yellow, green }
 // #D5E8E2
 
 // #EEF6F4
+
+const green1 = '#02a389'
+const green2 = '#7BB9AA'
+const green3 = '#A9D1C6'
+const green4 = '#D5E8E2'
+const green5 = '#EEF6F4'
+
+export { green1, green2, green3, green4, green5 }
+
+const yellow1 = '#F4BE66'
+const yellow2 = '#F7CF8F'
+const yellow3 = '#F9DFB6'
+const yellow4 = '#FDEFDB'
+const yellow5 = '#FEF9F0'
+
+export { yellow1, yellow2, yellow3, yellow4, yellow5 }
+
+const red1 = '#EC6662'
+const red2 = '#F1908C'
+const red3 = '#F5B7B3'
+const red4 = '#FADBDA'
+const red5 = '#FDF0EF'
+
+export { red1, red2, red3, red4, red5 }

package/src/components/CategoryBars.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import { green, red } from '../colors';
 
 type CategoryBarsProps = {
   title: string;
@@ -22,6 +23,9 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
   return (
     <div className="relative flex flex-col h-full">
       <div className="font-semibold text-xl mb-2" style={{ color: 'var(--text-main)' }}>{title}</div>
+      <div className="text-sm mb-6" style={{ color: 'var(--text-secondary)' }}>
+        Each bar represents a category's net evidence: positive values extend right in green, negative values extend left, and bar length denotes contribution magnitude.
+      </div>
       <div className="flex-1 flex flex-col justify-between relative">
         <div
           className="absolute top-0 bottom-0 w-px"
@@ -53,11 +57,11 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
           const fillWidth = absPercent / 2; // half-bar represents 100%
           const left = isNegative ? `calc(50% - ${fillWidth}%)` : '50%';
           return (
-            <div key={category} className="first:pt-0">
+            <div key={category} className="first:pt-0 group relative">
               <div className={'font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>
                 {category}
               </div>
-              <div className="relative group">
+              <div className="relative">
                 <div
                   className="w-full rounded-full overflow-hidden relative"
                   style={{
@@ -67,23 +71,23 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
                   }}
                 >
                   {/* signed fill originating from center */}
-                  <div className="absolute top-0 h-full" style={{ left, width: `${fillWidth}%`, backgroundColor: isNegative ? 'var(--status-negative, #EC6662)' : 'var(--status-positive, #02a389)' }} />
+                  <div className="absolute top-0 h-full" style={{ left, width: `${fillWidth}%`, backgroundColor: isNegative ? `var(--status-negative, ${red})` : `var(--status-positive, ${green})` }} />
                 </div>
-                <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,
-                    }}
-                  >
-                    <div style={{ fontWeight: 600 }}>{category}</div>
-                    <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{label}</div>
-                    <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
-                      {getCategoryTooltipCopy(category)}
-                    </div>
+              </div>
+              <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,
+                  }}
+                >
+                  <div style={{ fontWeight: 600 }}>{category}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{label}</div>
+                  <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
+                    {getCategoryTooltipCopy(category)}
                   </div>
                 </div>
               </div>

package/src/components/GaugeCard.tsx

@@ -3,9 +3,24 @@
 import React from 'react';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
+import { green, yellow, red } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
+const hexToRgba = (hex: string, alpha: number) => {
+  const clean = hex.replace('#', '');
+  const r = parseInt(clean.substring(0, 2), 16);
+  const g = parseInt(clean.substring(2, 4), 16);
+  const b = parseInt(clean.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+const pickTint = (score: number) => {
+  if (score >= 75) return green;
+  if (score >= 50) return yellow;
+  return red;
+};
+
 export default function GaugeCard({
   title,
   description,
@@ -31,6 +46,13 @@ export default function GaugeCard({
   const circumference = Math.PI * radius;
   const progress = pct / 100;
   const dash = circumference * progress;
+  const progressColor =
+    pct <= 33
+      ? `var(--status-negative, ${red})`
+      : pct <= 66
+      ? `var(--status-neutral, ${yellow})`
+      : `var(--status-positive, ${green})`;
+  const headerTint = hexToRgba(pickTint(pct), 0.06);
 
   return (
     <div
@@ -38,6 +60,7 @@ export default function GaugeCard({
       style={{
         backgroundColor: 'var(--content-card-background)',
         borderColor: 'var(--icon-button-secondary)',
+        backgroundImage: `linear-gradient(${headerTint}, ${headerTint})`,
       }}
     >
       <div className="mb-3 flex items-start justify-between gap-2">
@@ -64,7 +87,7 @@ export default function GaugeCard({
         <div className="relative group" style={{ width: size, height: size / 2 }}>
           <svg width={size} height={size / 2} viewBox={`0 0 ${size} ${size/2}`}>
             <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={'var(--bubble-foreground)'} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" strokeDasharray={`${dash},${circumference}`} />
+            <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>
           {(tooltipText || description) && (

package/src/components/GraphInsights.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 // import { red, yellow, green } from '@/components/badge/colors';
 import { GraphInsightsPayload, ScoringSummary } from '../types';
+import { green1, green2, green3, green4, green5 } from '../colors';
 import {
   ResponsiveContainer,
   Tooltip,
@@ -188,6 +189,46 @@ const GraphInsights = ({
 
   if (!graphInsights) return null;
 
+  // Tooltip for axis labels (outside of Recharts' built-in hover zones)
+  const [labelHover, setLabelHover] = React.useState<
+    | {
+        x: number;
+        y: number;
+        name: string;
+        score: number;
+        avg?: number;
+      }
+    | null
+  >(null);
+
+  const radarLookup = React.useMemo(() => {
+    const map = new Map<string, { score: number; avg?: number }>();
+    for (const d of radarData) map.set(d.axis, { score: d.score, avg: d.avg });
+    return map;
+  }, [radarData]);
+
+  // Custom tick renderer to attach hover handlers to category names
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const renderAngleTick = (props: any) => {
+    const { payload, x, y, textAnchor } = props;
+    const name: string = payload?.value ?? '';
+    const info = radarLookup.get(name) || { score: 0, avg: undefined };
+    return (
+      <text
+        x={x}
+        y={y}
+        textAnchor={textAnchor}
+        dominantBaseline="central"
+        style={{ fill: 'var(--text-secondary)', fontSize: 12, cursor: 'default' }}
+        onMouseEnter={() => setLabelHover({ x, y, name, score: info.score, avg: info.avg })}
+        onMouseMove={() => setLabelHover({ x, y, name, score: info.score, avg: info.avg })}
+        onMouseLeave={() => setLabelHover(null)}
+      >
+        {name}
+      </text>
+    );
+  };
+
   return (
     <div className="grid grid-cols-1 gap-6">
       {/* Spider Chart: Category Balance (genre-scoped) */}
@@ -197,7 +238,7 @@ const GraphInsights = ({
             
             {/* Spider Chart: Category Scores */}
             <div className="" style={{ width: '100%', height: 450 }}>
-              <div className="" style={{ width: '100%', height: 375 }}>
+              <div className="relative" style={{ width: '100%', height: 375 }}>
                 <div className="mb-2">
                   <div className={'font-medium'} style={{ color: 'var(--text-main)' }}>{genre ? `${genre} ` : ''} Category Contributions - Percentages</div>
                   <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>The spider diagram displays the KYD {genre} score across its sub-categories, with each point representing the strength of available evidence signals</div>
@@ -205,7 +246,7 @@ const GraphInsights = ({
                 <ResponsiveContainer>
                   <RadarChart data={radarData} cx="50%" cy="50%" outerRadius="70%">
                     <PolarGrid stroke="var(--icon-button-secondary)" />
-                    <PolarAngleAxis dataKey="axis" tick={{ fill: 'var(--text-secondary)', fontSize: 12 }} />
+                    <PolarAngleAxis dataKey="axis" tick={renderAngleTick} />
                     <PolarRadiusAxis angle={55} domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} className="text-sm" />
                     {/* Primary area */}
                     <Radar name="Category Score" dataKey="score" stroke={'var(--text-main)'} fill={'var(--text-main)'} fillOpacity={0.22} />
@@ -214,6 +255,23 @@ const GraphInsights = ({
                     <Tooltip content={<RadarCategoryTooltip />} />
                   </RadarChart>
                 </ResponsiveContainer>
+                {labelHover && (
+                  <div
+                    className="pointer-events-none absolute z-30"
+                    style={{
+                      left: Math.max(0, labelHover.x - 150),
+                      top: Math.max(0, labelHover.y + 8),
+                    }}
+                  >
+                    <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6, maxWidth: 320 }}>
+                      <div style={{ fontWeight: 600 }}>{labelHover.name}</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
+                        Score: {Math.round(labelHover.score)}{labelHover.avg !== undefined ? ` • Avg: ${Math.round(labelHover.avg)}` : ''}
+                      </div>
+                      <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-secondary)' }}>{getCategoryTooltipCopy(labelHover.name)}</div>
+                    </div>
+                  </div>
+                )}
               </div>
               {/* Custom legend below the spider chart */}
               <div className="mt-3 flex items-center justify-center gap-4" style={{ color: 'var(--text-secondary)', fontSize: 12 }}>
@@ -238,10 +296,7 @@ const GraphInsights = ({
                 <ResponsiveContainer>
                   <PieChart>
                     {(() => {
-                      const isDarkMode = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
-                      const palette = !isDarkMode
-                        ? ['#E0E0E0', '#BDBDBD', '#9E9E9E', '#757575', '#616161', '#424242', '#212121']
-                        : ['#212121', '#424242', '#616161', '#757575', '#9E9E9E', '#BDBDBD', '#E0E0E0'];
+                      const palette = [green1, green2, green3, green4, green5];
                       const total = categoryData.reduce((sum, d) => sum + (d.value || 0), 0);
                       const pieData = categoryData.map(d => ({
                         name: d.category,
@@ -249,7 +304,7 @@ const GraphInsights = ({
                         share: total > 0 ? (d.value / total) : 0,
                       }));
 
-                      // Smaller, theme-aware labels
+                      // Smaller labels
                       const renderLabel = (props: {x: number, y: number, textAnchor: string, percent: number, name: string, payload: {name: string}}) => {
                         const pct = Math.round(((props?.percent ?? 0) * 100));
                         if (pct < 4) return null;
@@ -290,10 +345,7 @@ const GraphInsights = ({
                 {/* Legend below the pie chart: includes 0% categories */}
                 <div className="mt-3">
                 {(() => {
-                  const isDarkMode = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
-                  const palette = !isDarkMode
-                    ? ['#E0E0E0', '#BDBDBD', '#9E9E9E', '#757575', '#616161', '#424242', '#212121']
-                    : ['#212121', '#424242', '#616161', '#757575', '#9E9E9E', '#BDBDBD', '#E0E0E0'];
+                  const palette = [green1, green2, green3, green4, green5];
                   const pieNames = categoryData.map((d) => d.category);
                   const getColor = (name: string) => {
                     const idx = pieNames.indexOf(name);

package/src/components/RiskCard.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
+import { green, yellow, red } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
@@ -26,6 +27,22 @@ export default function RiskCard({
   const pctGood = Math.max(0, Math.min(100, Math.round(Number(percentGood ?? 0))));
   const displayLabel = label || '';
 
+  const hexToRgba = (hex: string, alpha: number) => {
+    const clean = hex.replace('#', '');
+    const r = parseInt(clean.substring(0, 2), 16);
+    const g = parseInt(clean.substring(2, 4), 16);
+    const b = parseInt(clean.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  };
+
+  const pickTint = (score: number) => {
+    if (score >= 75) return green;
+    if (score >= 50) return yellow;
+    return red;
+  };
+
+  const headerTint = hexToRgba(pickTint(pctGood), 0.06);
+
   // bar heights ascending representation
   const bars = [40, 60, 85, 110, 140];
   let activeIndex = 0; // Default to the shortest bar (highest risk)
@@ -45,6 +62,7 @@ export default function RiskCard({
       style={{
         backgroundColor: 'var(--content-card-background)',
         borderColor: 'var(--icon-button-secondary)',
+        backgroundImage: `linear-gradient(${headerTint}, ${headerTint})`,
       }}
     >
       <div className="mb-3 flex items-start justify-between gap-2">