kyd-shared-badge 0.3.31 → 0.3.33

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -263,7 +263,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
           {/* Enterprise Use Cases (directly under the three summary cards) */}
           {assessmentResult?.enterprise_use_cases?.items && assessmentResult.enterprise_use_cases.items.length > 0 && (
-            <UseCases useCases={assessmentResult.enterprise_use_cases} headless={isHeadless} />
+            <UseCases useCases={assessmentResult.enterprise_use_cases} headless={isHeadless} badgeId={badgeId} />
           )}
 
           {/* Technical Scores */}

package/src/components/UseCases.tsx

@@ -2,22 +2,34 @@
 
 import Reveal from './Reveal';
 import { EnterpriseUseCases, UseCaseItem } from '../types';
+import Image from 'next/image';
 
-export default function UseCases({ useCases, headless }: { useCases?: EnterpriseUseCases | null; headless?: boolean }) {
+export default function UseCases({ useCases, headless, badgeId }: { useCases?: EnterpriseUseCases | null; headless?: boolean; badgeId?: string }) {
   if (!useCases || !Array.isArray(useCases.items) || useCases.items.length === 0) return null;
 
   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}`;
+  // Generate unique indices (1-9) for each use case, ensuring no repeats
+  const usedIndices = new Set<number>();
+  const getUniqueIndex = (idx: number) => {
+    const seed = `${badgeId || ''}|${idx}`;
     let hash = 0;
     for (let i = 0; i < seed.length; i++) {
       hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
     }
-    return (hash % 9) + 1;
+    let baseIndex = (hash % 9) + 1;
+    
+    // If base index is already used, find next available
+    let finalIndex = baseIndex;
+    let attempts = 0;
+    while (usedIndices.has(finalIndex) && attempts < 9) {
+      finalIndex = ((finalIndex) % 9) + 1;
+      attempts++;
+    }
+    
+    usedIndices.add(finalIndex);
+    return finalIndex;
   };
 
   return (
@@ -26,15 +38,14 @@ export default function UseCases({ useCases, headless }: { useCases?: Enterprise
         <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) => {
-            const imgIndex = fallbackIndex(uc, idx);
+            const imgIndex = getUniqueIndex(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={'flex items-center gap-3 pb-2'}>
+                <Image 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)' }}>
                   <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>Potential Impact: </span>

package/src/types.ts

@@ -181,8 +181,6 @@ 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 {