kyd-shared-badge 0.3.33 → 0.3.35

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -72,6 +72,14 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const genreMapping = (scoringSummary?.config?.genre_mapping) || {};
   const categoryScores = (scoringSummary?.category_scores) || {};
   const categoryTopByGraph = (graphInsights?.categoryTopBusiness) || {};
+  const roleTargets: Record<string, number> | undefined = (() => {
+    try {
+      const em: any = (assessmentResult as any)?.enterprise_match;
+      return (em && em.role && em.role.categoryTargets) ? (em.role.categoryTargets as Record<string, number>) : undefined;
+    } catch {
+      return undefined;
+    }
+  })();
 
   const topBusinessForGenre = (genre: string) => {
     const cats: string[] = (genreMapping)?.[genre] || [];
@@ -295,6 +303,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                     barColor={barColor}
                     getCategoryTooltipCopy={getCategoryTooltipCopy}
                     barHeight={16}
+                  categoryTargets={roleTargets}
                   />
                 </Reveal>
 
@@ -370,6 +379,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                   barColor={barColor}
                   getCategoryTooltipCopy={getCategoryTooltipCopy}
                   barHeight={16}
+                  categoryTargets={roleTargets}
                 />
               </Reveal>
               {/* Right: Contributing Factors (hidden on small screens) */}

package/src/components/CategoryBars.tsx

@@ -11,6 +11,7 @@ type CategoryBarsProps = {
   barColor: (percent: number) => string;
   getCategoryTooltipCopy: (category: string) => string;
   barHeight?: number; // px height for the filled bar
+  categoryTargets?: Record<string, number>; // desired target lengths (0-100)
 };
 
 const CategoryBars: React.FC<CategoryBarsProps> = ({
@@ -19,12 +20,18 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
   categoryScores,
   getCategoryTooltipCopy,
   barHeight = 6,
+  categoryTargets,
 }) => {
   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.
+        {categoryTargets && Object.keys(categoryTargets).length > 0 ? (
+          <>
+            {' '}Target overlays indicate desired evidence lengths for this role.
+          </>
+        ) : null}
       </div>
       <div className="flex-1 flex flex-col justify-between relative">
         <div
@@ -56,6 +63,10 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
             'Strong Evidence';
           const fillWidth = absPercent / 2; // half-bar represents 100%
           const left = isNegative ? `calc(50% - ${fillWidth}%)` : '50%';
+          const targetRaw = categoryTargets?.[category];
+          const hasTarget = typeof targetRaw === 'number' && isFinite(targetRaw);
+          const targetClamp = hasTarget ? Math.max(0, Math.min(100, Math.round(targetRaw as number))) : 0;
+          const targetWidth = targetClamp / 2; // same scale as fillWidth
           return (
             <div key={category} className="first:pt-0 group relative">
               <div className={'font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>
@@ -72,6 +83,20 @@ 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, ${red})` : `var(--status-positive, ${green})` }} />
+                  {/* role target overlay: positive side only, dashed outline */}
+                  {hasTarget && (
+                    <div
+                      className="absolute top-0 h-full"
+                      style={{
+                        left: '50%',
+                        width: `${targetWidth}%`,
+                        borderTop: '2px dashed var(--icon-accent)',
+                        borderBottom: '2px dashed var(--icon-accent)',
+                        opacity: 0.7,
+                      }}
+                      aria-hidden="true"
+                    />
+                  )}
                 </div>
               </div>
               <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
@@ -89,6 +114,11 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
                   <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
                     {getCategoryTooltipCopy(category)}
                   </div>
+                  {hasTarget && (
+                    <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
+                      Target: {targetClamp}%
+                    </div>
+                  )}
                 </div>
               </div>
             </div>

package/src/components/EnterpriseCoaching.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { FiThumbsUp, FiTrendingUp, FiInfo } from 'react-icons/fi';
+import { red, yellow, green, hexToRgba } from '../colors';
 
 type CoachingItem = {
   headline: string;
@@ -22,18 +23,18 @@ export default function EnterpriseCoaching({
 
   const toneTint = (label?: string) => {
     const l = (label || '').toLowerCase();
-    if (l.includes('optimal') || l.includes('strong')) return 'rgba(2,163,137,0.10)';
-    if (l.includes('moderate')) return 'rgba(255,187,84,0.10)';
-    return 'rgba(236,102,98,0.10)';
+    const base = (l.includes('optimal') || l.includes('strong'))
+      ? green
+      : (l.includes('moderate'))
+        ? yellow
+        : red;
+    return hexToRgba(base, 0.10);
   };
 
   return (
     <div className={'mt-4 p-4 rounded-lg border'} style={{ background: toneTint(matchLabel), borderColor: 'var(--icon-button-secondary)' }}>
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center gap-2">
-          <span className={'px-2 py-1 rounded text-xs font-semibold'} style={{ backgroundColor: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
-            {matchLabel || 'Role Match'}
-          </span>
           <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>
             {roleName ? `Role Alignment — ${roleName}` : 'Role Alignment'}
           </div>

package/src/types.ts

@@ -170,6 +170,7 @@ export interface EnterpriseMatch {
   role: {
     name: string;
     description: string;
+    categoryTargets?: Record<string, number>;
   };
   label: string;
   description: string;