kyd-shared-badge 0.3.45 → 0.3.47

package/package.json

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

package/src/PrintableBadgeDisplay.tsx

@@ -137,6 +137,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             })()}
             countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
             accountAuthenticity={assessmentResult?.account_authenticity}
+            companyName={badgeData.companyName}
         />
       </Reveal>
       {/* Coaching / Evidence under header when present */}

package/src/SharedBadgeDisplay.tsx

@@ -31,6 +31,7 @@ import AiUsageBody from './components/AiUsageBody';
 import SanctionsMatches from './components/SanctionsMatches';
 import AppendixContent from './components/AppendixContent';
 import { ProviderIcon, getProviderDisplayName, getProviderTooltipCopy, getCategoryTooltipCopy, barColor } from './utils/provider';
+import { matchLabelToColor } from './colors';
 import { useEffect, useMemo, useState } from 'react';
 type ChatWidgetProps = Partial<{
   api: string;
@@ -114,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' },
@@ -132,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-') || hash === 'appendix-connected')) {
+        if (hash && (hash.startsWith('appendix-skills') || hash.includes('appendix-skills-cat-'))) {
           setActiveTab('appendix');
         }
       } catch {}
@@ -215,8 +216,12 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
     </div>
   );
 
-  const RoleFitSection = () => (
-    !showRoleFit ? null : (
+  const RoleFitSection = () => {
+    // Local state for expanding long role descriptions
+    const [showFullRoleDescription, setShowFullRoleDescription] = useState(false);
+    const rec = assessmentResult?.recommendations;
+
+    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">
@@ -224,19 +229,46 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               <div>
                 <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Role Alignment</Reveal>
                 <Reveal headless={isHeadless}>
-                  <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
-                    {(() => {
-                      const em = assessmentResult?.enterprise_match;
-                      if (!em) return null;
-                      const role = em.role || {};
-                      return (
-                        <div>
-                          <div className={'font-medium mb-1'} style={{ color: 'var(--text-main)' }}>{em.label} {role?.name ? `— ${role.name}` : ''}</div>
-                          {em.description ? <div>{em.description}</div> : null}
+                  {(() => {
+                    const em = assessmentResult?.enterprise_match;
+                    if (!em) return null;
+                    const role = em.role || {};
+                    const roleName = role?.name || '';
+                    const primaryDescription = (role?.description || em.description || '').trim();
+                    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>
+                        {primaryDescription ? (
+                          <div>
+                            <span>{visibleText}</span>
+                            {isLong && (
+                              <button
+                                type="button"
+                                onClick={() => setShowFullRoleDescription(v => !v)}
+                                className={'ml-2 text-xs font-semibold'}
+                                style={{ color: 'var(--text-main)' }}
+                              >
+                                {showFullRoleDescription ? 'See less' : 'See more'}
+                              </button>
+                            )}
+                          </div>
+                        ) : null}
+                      </div>
+                    );
+                  })()}
                 </Reveal>
               </div>
             )}
@@ -258,11 +290,30 @@ 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>
-    )
-  );
+    );
+  };
 
   const TechnicalSection = () => (
     <div className={`${wrapperMaxWidth} mx-auto`}>
@@ -428,7 +479,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               })()}
             </div>
           )}
-          <div id="appendix-connected">
+          <div>
             <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
           </div>
         </div>
@@ -461,7 +512,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()}
@@ -472,7 +523,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             <TabNav />
             <div className={'px-2 sm:px-0 pb-2'}>
               {activeTab === 'overview' && OverviewSection()}
-              {activeTab === 'role' && RoleFitSection()}
+              {activeTab === 'role' && <RoleFitSection />}
               {activeTab === 'technical' && TechnicalSection()}
               {activeTab === 'risk' && RiskSection()}
               {activeTab === 'ai' && AiSection()}

package/src/colors.ts

@@ -96,5 +96,11 @@ export function clampPercent(value?: number): number {
     return `rgba(${r}, ${g}, ${b}, ${alpha})`
   }
   
+  export function matchLabelToColor(label: string): string {
+    const l = (label || '').toLowerCase();
+    if (l.includes('optimal') || l.includes('strong')) return green
+    if (l.includes('moderate')) return yellow
+    return red
+  }
   
   

package/src/components/ConnectedPlatforms.tsx

@@ -62,12 +62,13 @@ const ConnectedPlatforms = ({ accounts, authenticity }: { accounts?: ConnectedAc
         const label = (authenticity?.label || '').toLowerCase();
         const isCritical = label === 'likely inauthentic';
         const isSuspicious = label === 'suspicious';
+        const displayLabel = isSuspicious ? 'Warning' : label
         if (!label) return null;
         return (
           <div className={"mb-4 rounded-md border p-3"} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
             <div className="flex items-start gap-2">
               <span className="text-sm font-semibold" style={{ color: isCritical ? '#B00020' : isSuspicious ? '#9f580a' : 'var(--text-main)' }}>
-                {(authenticity?.label) || ''}
+                {displayLabel}
               </span>
             </div>
             {authenticity?.description ? (

package/src/components/ReportHeader.tsx

@@ -40,9 +40,10 @@ interface ReportHeaderProps {
     enterpriseMatch?: { label?: string; description?: string; roleName?: string } | null;
     countries?: string[];
     accountAuthenticity?: { label?: string; description?: string };
+    companyName?: string;
 }
 
-const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity }: ReportHeaderProps) => {
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName }: ReportHeaderProps) => {
   // Use the dynamic image if available, otherwise fall back to the score-based one.
   const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0);
   const tint = hexToRgba(pickTint(score || 0), 0.06);
@@ -102,7 +103,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
             <div className={'text-sm space-y-2'}>
               <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Developer:</span> <span style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</span></p>
               <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Requested By:</span> <span style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</span></p>
-              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Organization:</span> <span style={{ color: 'var(--text-main)' }}>Unaffiliated</span></p>
+              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Organization:</span> <span style={{ color: 'var(--text-main)' }}>{companyName || 'Unaffiliated'}</span></p>
               <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Date Generated:</span> <span style={{ color: 'var(--text-main)' }}>{formattedDate}</span></p>
               <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Report ID:</span> <span style={{ color: 'var(--text-main)' }}>{badgeId || 'N/A'}</span></p>
               {Array.isArray(countries) && countries.length > 0 && (

package/src/types.ts

@@ -34,6 +34,7 @@ export interface PublicBadgeData {
   }[];
   optOutScreening?: boolean;
   isPublic?: boolean;
+  companyName?: string;
 }
 
 export type VerifiedBadge = {
@@ -172,7 +173,7 @@ export interface EnterpriseMatch {
     description: string;
     categoryTargets?: Record<string, number>;
   };
-  label: string;
+  label: 'Incompatible' | 'Weak Match' | 'Moderate Match' | 'Strong Match' | 'Optimal Match';
   description: string;
   coaching?: EnterpriseCoaching;
 }