kyd-shared-badge 0.3.141 → 0.3.200

package/package.json

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

package/src/PrintableBadgeDisplay.tsx

@@ -139,7 +139,8 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                 countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
                 accountAuthenticity={assessmentResult?.account_authenticity}
                 companyName={badgeData.companyName}
-                sourcesProviders={(badgeData?.connectedAccounts || []).map(a => (a?.name || '').toLowerCase())}
+              sourcesProviders={connected.map(a => (a?.name || '').toLowerCase())}
+              connectedAccounts={connected}
                 rightBadgeLayout={!hasEnterpriseMatch}
               />
             </div>

package/src/SharedBadgeDisplay.tsx

@@ -245,14 +245,15 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
               developerName={badgeData.developerName}
               updatedAt={updatedAt}
               score={overallFinalPercent || 0}
-              isPublic={true}
+              isPublic={isPublicView}
               badgeImageUrl={badgeData.badgeImageUrl || ''}
               summary={undefined}
               enterpriseMatch={null}
               countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
               accountAuthenticity={assessmentResult?.account_authenticity}
               companyName={badgeData.companyName}
-              sourcesProviders={(badgeData?.connectedAccounts || []).map(a => (a?.name || '').toLowerCase())}
+              sourcesProviders={connected.map(a => (a?.name || '').toLowerCase())}
+              connectedAccounts={connected}
               selfCheck={selfCheck}
               rightBadgeLayout={!hasEnterpriseMatch}
             />
@@ -340,54 +341,62 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
           <div className="space-y-10">
             {hasEnterpriseMatch && (
               <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}>
-                  {(() => {
-                    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='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>
-                            {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}
-
-                        {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>
+                {(() => {
+                  const em = assessmentResult?.enterprise_match;
+                  if (!em) return null;
+                  const role = em.role || {};
+                  const roleName = role?.name || '';
+                  return (
+                    <>
+                      <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>
+                        Role Alignment{roleName ? ` • ${roleName}` : ''}
+                      </Reveal>
+                      <Reveal headless={isHeadless}>
+                        {(() => {
+                          const primaryDescription = (role?.description || em.description || '').trim();
+                          const isLong = primaryDescription.length > 500;
+                          const visibleText = isLong && !showFullRoleDescription ? `${primaryDescription.slice(0, 500)}…` : primaryDescription;
+                          return (
+                            <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>
+                                  {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}
+
+                              {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>
-                            <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{em.description}</div>
-                          </div>
-                        ) : null}
-                      </div>
-                    );
-                  })()}
-                </Reveal>
+                          );
+                        })()}
+                      </Reveal>
+                    </>
+                  );
+                })()}
               </div>
             )}
             {hasCoaching && (() => {

package/src/chat/ChatWidget.tsx

@@ -36,8 +36,8 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
     window.addEventListener('resize', check);
     return () => window.removeEventListener('resize', check);
   }, []);
-  // Sidebar open state (default expanded on desktop, collapsed on mobile)
-  const [open, setOpen] = useState<boolean>(true);
+  // Sidebar open state (default collapsed)
+  const [open, setOpen] = useState<boolean>(false);
   // Avoid hydration mismatches by rendering only after mount
   const [hasMounted, setHasMounted] = useState(false);
   useEffect(() => { setHasMounted(true); }, []);

package/src/components/ReportHeader.tsx

@@ -6,6 +6,7 @@ import countriesLib from 'i18n-iso-countries';
 import enLocale from 'i18n-iso-countries/langs/en.json';
 import { FiInfo } from 'react-icons/fi';
 import { ProviderIcon } from '../utils/provider';
+import type { ConnectedAccount } from '../types';
 import { green1, green2, green3, green4, green5 } from '../colors';
 
 // Register English locale once at module import time
@@ -56,11 +57,14 @@ interface ReportHeaderProps {
     accountAuthenticity?: { label?: string; description?: string };
     companyName?: string;
     sourcesProviders?: string[];
+    connectedAccounts?: ConnectedAccount[];
     selfCheck?: boolean;
     rightBadgeLayout?: boolean;
 }
 
-const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName, sourcesProviders = [], selfCheck, rightBadgeLayout }: ReportHeaderProps) => {
+const normalizeProvider = (value?: string) => (value || '').toLowerCase().trim();
+
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName, sourcesProviders = [], connectedAccounts = [], selfCheck, rightBadgeLayout, isPublic }: ReportHeaderProps) => {
   // Use the dynamic image if available, otherwise fall back to the score-based one.
   const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0, false, selfCheck);
   const tint = hexToRgba(pickTint(score || 0, selfCheck), 0.06);
@@ -79,6 +83,35 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
       return true;
     });
   })();
+  const sourceAccounts = (() => {
+    const map: Record<string, ConnectedAccount> = {};
+    (Array.isArray(connectedAccounts) ? connectedAccounts : []).forEach((account) => {
+      const normalized = normalizeProvider(account?.name);
+      if (normalized && !map[normalized]) map[normalized] = account;
+      const underscored = normalized.replace(/\s+/g, '_');
+      if (underscored && !map[underscored]) map[underscored] = account;
+      const spaced = normalized.replace(/_/g, ' ');
+      if (spaced && !map[spaced]) map[spaced] = account;
+    });
+    return map;
+  })();
+  const resolveSourceLink = (provider: string) => {
+    if (!provider) return null;
+    if (!isPublic) {
+      return { href: '#appendix-connected', external: false };
+    }
+    const normalized = normalizeProvider(provider);
+    const account = sourceAccounts[normalized] || sourceAccounts[normalized.replace(/\s+/g, '_')] || sourceAccounts[normalized.replace(/_/g, ' ')];
+    if (account?.url) {
+      return { href: account.url, external: true, providerName: account?.name || provider };
+    }
+    return null;
+  };
+  const SourceIcon = ({ provider }: { provider: string }) => (
+    <span className={'text-sm'} style={{ color: 'var(--text-main)' }}>
+      <ProviderIcon name={provider} className={'inline-block align-middle'} />
+    </span>
+  );
   
   return (
     <div
@@ -126,18 +159,48 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                   );
               })()}
               {sources.length > 0 && (
-                <p className='flex items-center gap-2 mt-2 text-sm'>
-                  <a href="#appendix-connected" className={'inline-flex items-center gap-2 group'} style={{ color: 'var(--text-secondary)' }}>
+                isPublic ? (
+                  <div className='flex flex-wrap items-center gap-2 mt-2 text-sm' style={{ color: 'var(--text-secondary)' }}>
                     <span className={'font-semibold'}>Sources Shared:</span>
-                    <span className={'flex items-center gap-2'}>
-                      {sources.map((provider, idx) => (
-                        <span key={`${provider}-${idx}`} className={'text-sm'} style={{ color: 'var(--text-main)' }}>
-                          <ProviderIcon name={provider} className={'inline-block align-middle'} />
-                        </span>
-                      ))}
+                    <span className={'flex items-center gap-2 flex-wrap'}>
+                      {sources.map((provider, idx) => {
+                        const link = resolveSourceLink(provider);
+                        const icon = <SourceIcon provider={provider} />;
+                        if (link) {
+                          return (
+                            <a
+                              key={`${provider}-${idx}`}
+                              href={link.href}
+                              target={link.external ? '_blank' : undefined}
+                              rel={link.external ? 'noreferrer noopener' : undefined}
+                              className={'inline-flex items-center'}
+                              style={{ color: 'var(--text-main)' }}
+                              title={link.providerName || provider}
+                            >
+                              {icon}
+                            </a>
+                          );
+                        }
+                        return (
+                          <span key={`${provider}-${idx}`} className={'inline-flex items-center'}>
+                            {icon}
+                          </span>
+                        );
+                      })}
                     </span>
-                  </a>
-                </p>
+                  </div>
+                ) : (
+                  <p className='flex items-center gap-2 mt-2 text-sm'>
+                    <a href="#appendix-connected" className={'inline-flex items-center gap-2 group'} style={{ color: 'var(--text-secondary)' }}>
+                      <span className={'font-semibold'}>Sources Shared:</span>
+                      <span className={'flex items-center gap-2'}>
+                        {sources.map((provider, idx) => (
+                          <SourceIcon key={`${provider}-${idx}`} provider={provider} />
+                        ))}
+                      </span>
+                    </a>
+                  </p>
+                )
               )}
             {(enterpriseMatch?.description || matchLabel) ? (
               <div className={'hidden md:block text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>