kyd-shared-badge 0.3.44 → 0.3.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.44",
+  "version": "0.3.46",
   "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 */}
@@ -286,9 +287,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
           {/* Connected Platforms */}
           <Reveal headless={isHeadless}>
-            <div id="appendix-connected">
-              <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
-            </div>
+            <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
           </Reveal>
 
         

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;
@@ -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,11 @@ 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);
+
+    return !showRoleFit ? null : (
       <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 +228,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>
             )}
@@ -261,8 +292,8 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
           </div>
         </div>
       </div>
-    )
-  );
+    );
+  };
 
   const TechnicalSection = () => (
     <div className={`${wrapperMaxWidth} mx-auto`}>
@@ -428,7 +459,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 +492,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             </style>
             {/* Long-form original layout retained for headless/print */}
             {OverviewSection()}
-            {showRoleFit ? RoleFitSection() : null}
+            {showRoleFit ? <RoleFitSection /> : null}
             {TechnicalSection()}
             {RiskSection()}
             {AiSection()}
@@ -472,7 +503,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

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { formatLocalDate } from '../utils/date';
 import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
 import { SiCredly, SiFiverr } from 'react-icons/si';
@@ -35,6 +35,26 @@ const formatProviderName = (name?: string) => {
 
 const ConnectedPlatforms = ({ accounts, authenticity }: { accounts?: ConnectedAccount[]; authenticity?: { label?: string; description?: string; oauth_connected?: string[]; mismatches?: Array<{ provider?: string; detail?: string }> } }) => {
   const list = Array.isArray(accounts) ? accounts : [];
+  useEffect(() => {
+    const flash = () => {
+      const hash = typeof window !== 'undefined' ? window.location.hash : '';
+      if (!hash) return;
+      const id = hash.startsWith('#') ? hash.slice(1) : hash;
+      const el = document.getElementById(id) as HTMLElement | null;
+      if (!el) return;
+      const originalBg = el.style.backgroundColor;
+      el.style.transition = 'background-color 300ms ease';
+      el.style.backgroundColor = 'rgba(2, 163, 137, 0.14)';
+      // Ensure visibility after tab switch
+      try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch {}
+      setTimeout(() => {
+        el.style.backgroundColor = originalBg || '';
+      }, 1200);
+    };
+    flash();
+    window.addEventListener('hashchange', flash);
+    return () => window.removeEventListener('hashchange', flash);
+  }, []);
   if (list.length === 0) return null;
   return (
     <div className="pt-8">
@@ -42,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);
@@ -72,7 +73,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
               <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Account Authenticity {isCritical ? 'Warning' : 'Notice'}</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>
+                <a href="#appendix-connected" className={'text-xs font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>See more</a>
               </div>
             </div>
           </div>
@@ -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;
 }