kyd-shared-badge 0.3.46 → 0.3.48

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -8,13 +8,13 @@ import EnterpriseCoaching from './components/EnterpriseCoaching';
 import AppendixTables from './components/AppendixTables';
 import BusinessRuleLink from './components/BusinessRuleLink';
 import IpRiskAnalysisDisplay from './components/IpRiskAnalysisDisplay';
-// import Image from 'next/image';
 import GraphInsights from './components/GraphInsights';
 import ConnectedPlatforms from './components/ConnectedPlatforms';
 import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
 import { SiCredly, SiFiverr } from 'react-icons/si';
 import GaugeCard from './components/GaugeCard';
 import RiskCard from './components/RiskCard';
+import Image from 'next/image';
 
 import { yellow, green } from './colors';
 import Skills from './components/Skills';
@@ -115,7 +115,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const tabs = useMemo(() => {
     const arr = [
       { key: 'overview', label: 'Overview' },
-      ...(showRoleFit ? [{ key: 'role', label: 'Role Fit & Coaching' }] : []),
+      { key: 'role', label: 'Role Fit & Coaching' },
       { key: 'technical', label: 'KYD Technical' },
       { key: 'risk', label: 'KYD Risk' },
       { key: 'ai', label: 'KYD AI' },
@@ -133,7 +133,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
         const keys = new Set(tabs.map(t => t.key));
         if (hash && keys.has(hash)) setActiveTab(hash);
         // If the hash targets a skills appendix anchor, switch to Appendix
-        if (hash && (hash.startsWith('appendix-skills') || hash.includes('appendix-skills-cat-'))) {
+        if (hash && (hash.startsWith('appendix-skills') || hash.includes('appendix-skills-cat-') || hash.includes('appendix-connected'))) {
           setActiveTab('appendix');
         }
       } catch {}
@@ -162,24 +162,41 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
     <div className={'sticky z-10'} style={{ top: computeStickyTop(), background: 'var(--background)', borderBottom: '1px solid var(--icon-button-secondary)' }}>
       <div className={`${wrapperMaxWidth} mx-auto px-2 sm:px-0 overflow-x-auto`}>
         <div className="flex gap-1 sm:gap-2">
-          {tabs.map(t => (
-            <button
-              key={t.key}
-              onClick={() => {
-                setActiveTab(t.key);
-                try { if (typeof window !== 'undefined') window.history.replaceState(null, '', `#${t.key}`); } catch {}
-              }}
-              className={`px-3 sm:px-4 py-2 text-sm rounded-t ${activeTab === t.key ? 'font-semibold' : ''}`}
-              style={{
-                color: 'var(--text-main)',
-                background: activeTab === t.key ? 'var(--content-card-background)' : 'transparent',
-                border: activeTab === t.key ? '1px solid var(--icon-button-secondary)' : '1px solid transparent',
-                borderBottomColor: 'transparent'
-              }}
-            >
-              {t.label}
-            </button>
-          ))}
+          {tabs.map(t => {
+            // Determine if this tab should have an icon
+            let iconSrc: string | null = null;
+            if (t.key === 'ai') iconSrc = '/badge/ai.svg';
+            if (t.key === 'technical') iconSrc = '/badge/code.svg';
+            if (t.key === 'risk') iconSrc = '/badge/risk.svg';
+            return (
+              <button
+                key={t.key}
+                onClick={() => {
+                  setActiveTab(t.key);
+                  try { if (typeof window !== 'undefined') window.history.replaceState(null, '', `#${t.key}`); } catch {}
+                }}
+                className={`px-3 sm:px-4 py-2 text-sm rounded-t flex items-center gap-2 ${activeTab === t.key ? 'font-semibold' : ''}`}
+                style={{
+                  color: 'var(--text-main)',
+                  background: activeTab === t.key ? 'var(--content-card-background)' : 'transparent',
+                  border: activeTab === t.key ? '1px solid var(--icon-button-secondary)' : '1px solid transparent',
+                  borderBottomColor: 'transparent'
+                }}
+              >
+                {iconSrc && (
+                  <Image
+                    src={iconSrc}
+                    alt=""
+                    width={18}
+                    height={18}
+                    className="text-[var(--text-main)]"
+                    style={{ display: 'inline-block', verticalAlign: 'middle', color: 'var(--text-main)' }}
+                  />
+                )}
+                {t.label}
+              </button>
+            );
+          })}
         </div>
       </div>
     </div>
@@ -219,8 +236,9 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const RoleFitSection = () => {
     // Local state for expanding long role descriptions
     const [showFullRoleDescription, setShowFullRoleDescription] = useState(false);
+    const rec = assessmentResult?.recommendations;
 
-    return !showRoleFit ? null : (
+    return (
       <div className={`${wrapperMaxWidth} mx-auto`}>
         <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
           <div className="space-y-10">
@@ -237,19 +255,8 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                     const isLong = primaryDescription.length > 500;
                     const visibleText = isLong && !showFullRoleDescription ? `${primaryDescription.slice(0, 500)}…` : primaryDescription;
                     return (
-                      <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
-                        <div className="flex items-center text-start gap-2 py-3">
-                          <div className={'text-base font-semibold'} style={{ color: 'var(--text-main)' }}>{roleName}</div>
-                          <span>-</span>
-                          <div
-                            className={
-                              `px-3 py-1 inline-block rounded-md font-semibold shadow-sm text-[var(--text-main)] border`
-                            }
-                            style={{ borderColor: matchLabelToColor(em.label) }}
-                          >
-                            {em.label}
-                          </div>
-                        </div>
+                      <div className='mt-3' style={{ color: 'var(--text-secondary)' }}>
+                        <div className={'text-base font-semibold'} style={{ color: 'var(--text-main)' }}>{roleName}</div>
                         {primaryDescription ? (
                           <div>
                             <span>{visibleText}</span>
@@ -265,6 +272,22 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                             )}
                           </div>
                         ) : null}
+
+                        {em.description ? (
+                          <div>
+                            <div className="flex items-center text-start gap-2 mt-3">
+                              <div className={'text-base font-semibold'} style={{ color: 'var(--text-main)' }}>Alignment Description</div>
+                              <span>-</span>
+                              <div 
+                                className={`px-2 py-1 inline-block rounded-md font-semibold shadow-sm text-[var(--text-main)] border`}
+                                style={{ borderColor: matchLabelToColor(em.label) }}
+                              >
+                                {em.label}
+                              </div>
+                            </div>
+                            <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{em.description}</div>
+                          </div>
+                        ) : null}
                       </div>
                     );
                   })()}
@@ -289,6 +312,25 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                 <UseCases useCases={assessmentResult?.enterprise_use_cases} headless={isHeadless} badgeId={badgeId} />
               </div>
             )}
+            <div>
+              <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Recommendations</Reveal>
+              <Reveal headless={isHeadless}>
+                <div className={'space-y-3'}>
+                  {rec?.summary ? (
+                    <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{rec.summary}</div>
+                  ) : null}
+                  {Array.isArray(rec?.bullet_points) && (rec?.bullet_points?.length || 0) > 0 ? (
+                    <ul className={'list-disc pl-5 text-sm'} style={{ color: 'var(--text-secondary)' }}>
+                      {rec?.bullet_points?.map((bp, idx) => (
+                        <li key={idx}>{bp}</li>
+                      ))}
+                    </ul>
+                  ) : (!rec?.summary ? (
+                    <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>No recommendations available.</div>
+                  ) : null)}
+                </div>
+              </Reveal>
+            </div>
           </div>
         </div>
       </div>
@@ -459,7 +501,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               })()}
             </div>
           )}
-          <div>
+          <div id="appendix-connected">
             <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
           </div>
         </div>
@@ -492,7 +534,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             </style>
             {/* Long-form original layout retained for headless/print */}
             {OverviewSection()}
-            {showRoleFit ? <RoleFitSection /> : null}
+            <RoleFitSection />
             {TechnicalSection()}
             {RiskSection()}
             {AiSection()}

package/src/components/ReportHeader.tsx

@@ -70,7 +70,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
           <div className={'mb-4 rounded-md border p-3 flex items-start gap-2'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
             <span className={'mt-0.5'} style={{ color: isCritical ? '#B00020' : '#9f580a' }}><FiAlertTriangle size={18} /></span>
             <div className={'text-sm'}>
-              <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Account Authenticity {isCritical ? 'Warning' : 'Notice'}</div>
+              <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{isCritical ? 'Warning' : 'Attention'}</div>
               <div className={'mt-1'} style={{ color: 'var(--text-secondary)' }}>{accountAuthenticity?.description || (isCritical ? 'We detected signals that some linked accounts may be inauthentic. Review sources below.' : 'Some inconsistencies were observed across linked accounts. Review sources below.')}</div>
               <div className={'mt-2'}>
                 <a href="#appendix-connected" className={'text-xs font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>See more</a>

package/src/components/UseCases.tsx

@@ -35,7 +35,7 @@ export default function UseCases({ useCases, headless, badgeId }: { useCases?: E
   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>
+        <h3 className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Project Capabilities</h3>
         <div className={'grid grid-cols-1 md:grid-cols-2 gap-4'}>
           {items.map((uc, idx) => {
             const imgIndex = getUniqueIndex(idx);