kyd-shared-badge 0.3.30 → 0.3.31

package/package.json

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

package/src/components/EnterpriseCoaching.tsx

@@ -37,7 +37,7 @@ export default function EnterpriseCoaching({
           <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>
             {roleName ? `Role Alignment — ${roleName}` : 'Role Alignment'}
           </div>
-          <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
+          {/* <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
             <FiInfo size={14} />
             <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 }}>
@@ -45,7 +45,7 @@ export default function EnterpriseCoaching({
                 <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>These items reflect alignment evidence and coaching opportunities based on the role requirements.</div>
               </div>
             </div>
-          </span>
+          </span> */}
         </div>
       </div>
       <ul className={'space-y-3'}>
@@ -61,7 +61,7 @@ export default function EnterpriseCoaching({
                 <div className={'text-sm'}>{it.rationale}</div>
                 {it.action ? (
                   <div className={'text-sm'}>
-                    <span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Action:</span> {it.action}
+                    <span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Coaching Opportunity:</span> {it.action}
                   </div>
                 ) : null}
               </div>

package/src/components/ReportHeader.tsx

@@ -103,7 +103,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
               <div className={'hidden md:block text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <p className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Role Match{enterpriseMatch?.roleName ? ` — ${enterpriseMatch.roleName}` : ''}</p>
+                    <p className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Role Alignment{enterpriseMatch?.roleName ? ` — ${enterpriseMatch.roleName}` : ''}</p>
                     <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
                       <FiInfo size={16} />
                       <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">

package/src/components/UseCases.tsx

@@ -9,13 +9,31 @@ export default function UseCases({ useCases, headless }: { useCases?: Enterprise
   const items: UseCaseItem[] = useCases.items.slice(0, 4);
   const note = (useCases.note || '').trim();
 
+  // Fallback: derive a stable pseudo-random index (1-9) if backend hasn't set one
+  const fallbackIndex = (uc: UseCaseItem, idx: number) => {
+    if (typeof uc.image_index === 'number' && uc.image_index >= 1 && uc.image_index <= 9) return uc.image_index;
+    const seed = `${uc.title}|${uc.demonstrated_capability}|${idx}`;
+    let hash = 0;
+    for (let i = 0; i < seed.length; i++) {
+      hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+    }
+    return (hash % 9) + 1;
+  };
+
   return (
     <Reveal headless={!!headless}>
       <div className={'pt-8 kyd-avoid-break'}>
         <h3 className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Potential Use Cases</h3>
         <div className={'grid grid-cols-1 md:grid-cols-2 gap-4'}>
-          {items.map((uc, idx) => (
+          {items.map((uc, idx) => {
+            const imgIndex = fallbackIndex(uc, idx);
+            const imgSrc = `/badge/puzzle${imgIndex}.svg`;
+            return (
             <div key={idx} className={'rounded-md p-5 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+              <div className={'flex items-start gap-3'}>
+                <img src={imgSrc} alt={''} width={36} height={36} style={{ flexShrink: 0 }} />
+                <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{uc.title}</div>
+              </div>
               <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{uc.title}</div>
               {uc.potential_impact ? (
                 <div className={'text-sm mt-2'} style={{ color: 'var(--text-secondary)' }}>
@@ -36,7 +54,7 @@ export default function UseCases({ useCases, headless }: { useCases?: Enterprise
                 </div>
               ) : null}
             </div>
-          ))}
+          );})}
         </div>
         {note ? (
           <div className={'text-xs mt-3'} style={{ color: 'var(--text-secondary)' }}>{note}</div>

package/src/types.ts

@@ -181,6 +181,8 @@ export interface UseCaseItem {
   potential_impact: string;
   demonstrated_capability: string;
   justification: string;
+  // Optional deterministic image index (1-9) assigned by backend
+  image_index?: number;
 }
 
 export interface EnterpriseUseCases {