kyd-shared-badge 0.3.47 → 0.3.49

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -8,13 +8,15 @@ 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 AiIcon from './components/icons/ai';
+import CodeIcon from './components/icons/code';
+import RiskIcon from './components/icons/risk';
 
 import { yellow, green } from './colors';
 import Skills from './components/Skills';
@@ -133,7 +135,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 +164,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 => {
+            // Map tab key to icon component
+            const IconComp = (() => {
+              if (t.key === 'ai') return AiIcon;
+              if (t.key === 'technical') return CodeIcon;
+              if (t.key === 'risk') return RiskIcon;
+              return null;
+            })();
+            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'
+                }}
+              >
+                {IconComp ? (
+                  <IconComp
+                    width={18}
+                    height={18}
+                    className="text-[var(--text-main)]"
+                    style={{ display: 'inline-block', verticalAlign: 'middle', color: 'var(--text-main)' }}
+                  />
+                ) : null}
+                {t.label}
+              </button>
+            );
+          })}
         </div>
       </div>
     </div>
@@ -238,19 +257,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>
@@ -266,6 +274,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>
                     );
                   })()}
@@ -479,7 +503,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               })()}
             </div>
           )}
-          <div>
+          <div id="appendix-connected">
             <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
           </div>
         </div>

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);

package/src/components/icons/ai.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { SVGProps } from "react"
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="512pt"
+    height="512pt"
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    stroke="currentColor"
+    {...props}
+  >
+    <path d="m413.15 256c11.828-10.562 22.391-21.121 31.684-31.262 33.797-38.02 45.625-70.125 33.797-91.246-6.7578-12.25-21.121-19.012-40.977-21.543-3.3789-15.629-17.742-27.457-34.641-27.457-19.012 0-34.641 15.207-35.484 34.219-9.7148 2.1133-19.434 5.0703-29.992 8.4492-15.207-71.816-42.668-119.13-74.773-119.13-32.531-0.003906-59.988 46.887-75.199 119.12-70.125-22.391-124.62-21.969-140.67 6.3359-11.828 21.121 0 53.227 33.797 91.246 9.293 10.562 19.855 21.121 31.684 31.262-11.828 10.562-22.391 21.121-31.684 31.262-33.797 38.02-45.625 70.125-33.797 91.246 5.9141 10.562 17.32 16.898 32.527 20.277 2.5352 16.898 17.32 29.992 35.062 29.992 19.012 0 34.641-15.207 35.484-33.797 11.828-2.5352 24.5-5.9141 37.598-10.137 15.207 72.238 42.668 119.55 75.195 119.55 32.105 0 59.988-47.312 74.773-119.55 32.527 10.562 62.098 16.055 85.754 16.055 27.035 0 46.469-7.1797 54.918-21.969 11.828-21.121 0-53.227-33.797-91.246-8.8672-10.562-19.43-21.121-31.258-31.684zm-10.137-163.06c11.828 0 21.543 7.6055 25.348 18.164 0.84375 2.5352 1.2656 5.4922 1.2656 8.4492v0.42188c0 14.363-12.25 26.191-26.613 26.191-12.672 0-23.234-8.8711-25.77-20.699-0.42188-2.1133-0.84375-3.8008-0.84375-5.9141v-2.957c1.6875-13.094 12.672-23.656 26.613-23.656zm-34.641 35.062c3.8008 15.629 17.742 27.457 34.641 27.457 19.434 0 35.062-15.207 35.484-34.219 15.629 2.1133 27.035 7.6055 32.527 16.898 9.7148 17.32-2.1133 46.891-32.527 81.109-9.293 10.562-19.855 21.121-31.684 31.262-7.1797-5.9141-14.363-11.828-21.969-18.164-11.406-8.8711-23.656-17.32-36.328-25.77-1.6914-24.926-4.6484-48.582-8.8711-70.125 9.7148-3.8008 19.43-6.3359 28.727-8.4492zm-37.598 245.02c-18.586-6.3359-38.02-14.363-57.875-23.656 10.984-5.4922 21.969-11.406 32.949-17.742 11.406-6.3359 22.391-13.098 32.949-19.855-1.6875 21.547-4.6445 42.246-8.0234 61.254zm-29.57-49.004c-13.098 7.6055-25.77 14.363-38.863 20.277-12.672-6.3359-25.77-13.098-38.863-20.277-13.098-7.6055-25.77-15.207-38.02-23.234-0.84375-14.785-1.2656-29.57-1.2656-44.777s0.42188-30.414 1.2656-44.777c12.25-8.0273 24.926-16.055 38.02-23.234 13.098-7.6055 25.77-14.363 38.863-20.277 12.672 6.3359 25.77 13.098 38.863 20.277 13.098 7.6055 25.77 15.207 38.02 23.234 0.84375 14.785 1.6914 29.57 1.6914 44.777s-0.42187 29.992-1.6914 44.777c-11.828 8.0273-24.504 16.055-38.02 23.234zm-114.91-12.25c10.562 6.7578 21.543 13.52 32.949 19.855 10.984 6.3359 21.969 12.25 32.949 17.742-19.855 9.293-39.289 17.32-57.875 23.656-3.375-19.008-5.9102-39.707-8.0234-61.254zm-9.7148-17.32c-18.586-12.672-35.484-25.348-51.117-38.441 15.207-13.098 32.527-26.191 51.117-38.441-0.84375 12.672-0.84375 25.348-0.84375 38.863-0.003906 13.52-0.003906 25.77 0.84375 38.02zm18.164-155.46c18.586 6.3359 38.02 14.363 57.875 23.656-10.984 5.4922-21.969 11.406-32.949 17.742-11.406 6.3359-22.391 13.098-32.949 19.855 1.6875-21.547 4.2227-42.246 8.0234-61.254zm144.05 61.254c-10.562-6.7578-21.543-13.52-32.949-19.855-10.984-6.3359-21.969-12.25-32.949-17.742 19.855-9.293 39.289-17.32 57.875-23.656 3.3789 19.008 6.3359 39.707 8.0234 61.254zm10.141 17.32c18.586 12.672 35.484 25.348 50.691 38.441-15.207 13.098-32.527 26.191-50.691 38.441 0.42188-12.672 0.84375-25.348 0.84375-38.441 0-13.098-0.42188-26.191-0.84375-38.441zm-86.18-201.08c27.457 0 52.383 46.047 66.324 113.21-21.121 7.1797-43.512 16.477-66.324 27.457-22.812-10.984-45.203-20.277-66.324-27.457 13.941-67.172 38.867-113.21 66.324-113.21zm-175.73 202.35c-30.414-34.219-42.246-63.789-32.527-81.109 6.7578-11.828 23.234-17.742 46.469-17.742 22.812 0 52.383 5.4922 84.91 16.055-4.2227 21.543-7.1797 45.203-8.8711 70.125-21.121 14.363-40.977 29.148-58.297 43.934-11.828-10.562-22.391-21.121-31.684-31.262zm27.457 201.08c-12.25 0-22.812-8.4492-25.77-19.855-0.42188-2.1133-0.84375-4.2227-0.84375-6.7578v-2.1133c1.2656-13.52 12.672-24.5 26.613-24.5 12.672 0 23.234 8.8711 25.77 21.121 0.42188 1.6914 0.42188 3.8008 0.42188 5.4922v3.3789c-1.2656 13.098-12.672 23.234-26.191 23.234zm34.641-33.793c-3.3789-16.055-17.742-27.883-34.641-27.883-18.164 0-33.371 13.941-35.062 31.684-11.828-2.5352-20.277-7.6055-24.926-15.629-9.7148-17.32 2.1133-46.891 32.527-81.109 9.293-10.562 19.855-21.121 31.684-31.262 17.32 14.785 37.176 29.57 58.297 43.934 1.6914 24.926 4.6484 48.582 8.8711 70.125-12.668 4.2266-24.922 7.6055-36.75 10.141zm113.64 109.41c-27.457 0-52.383-46.047-66.324-113.21 21.121-7.1797 43.512-16.477 66.324-27.457 22.812 10.984 45.203 20.277 66.324 27.457-14.363 67.172-38.863 113.21-66.324 113.21zm207.84-121.24c-13.52 24.078-65.902 22.812-131.38 1.6914 4.2227-21.543 7.1797-45.203 8.8711-70.125 21.121-13.941 40.977-28.727 58.297-43.934 11.828 10.562 22.391 21.121 31.684 31.262 30.414 34.215 42.242 63.785 32.527 81.105z"/>
+  </svg>
+)
+export default SvgComponent

package/src/components/icons/code.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { SVGProps } from "react"
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="512pt"
+    height="512pt"
+    fill="currentColor"
+    stroke="currentColor"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path d="M301.62 78.742a7.533 7.533 0 0 0-6.879 5.578l-91.039 339.52a7.525 7.525 0 0 0 5.281 9.16 7.53 7.53 0 0 0 9.22-5.28l91.101-339.5c.52-1.942.238-4-.762-5.72-1-1.738-2.64-3-4.578-3.52a7.636 7.636 0 0 0-2.34-.237zM163.7 114.363c-2.02-.04-3.96.7-5.398 2.078l-140.88 134.1v.02a7.538 7.538 0 0 0-2.36 5.46c0 2.079.86 4.06 2.36 5.481l140.88 134.06a7.58 7.58 0 0 0 5.379 2.102c2-.04 3.921-.899 5.3-2.34a7.519 7.519 0 0 0 2.059-5.399c-.04-2-.899-3.878-2.34-5.261L33.54 256.004l135.16-128.6v-.02a7.459 7.459 0 0 0 2.34-5.261 7.53 7.53 0 0 0-2.059-5.399 7.56 7.56 0 0 0-5.28-2.36zm184.62 0h-.02c-2 .059-3.898.898-5.28 2.36a7.519 7.519 0 0 0-2.06 5.398c.04 2 .9 3.898 2.34 5.261l135.16 128.6-135.16 128.66v.02a7.56 7.56 0 0 0-2.359 5.281c-.039 2 .7 3.942 2.078 5.399a7.6 7.6 0 0 0 5.301 2.32c2 .039 3.941-.719 5.379-2.102l140.88-134.06a7.549 7.549 0 0 0 2.36-5.48c0-2.059-.86-4.04-2.36-5.461l-140.88-134.1c-1.442-1.398-3.379-2.14-5.399-2.102z" />
+  </svg>
+)
+export default SvgComponent

package/src/components/icons/risk.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { SVGProps } from "react"
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="512pt"
+    height="512pt"
+    fill="currentColor"
+    stroke="currentColor"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path d="M499.2 374c0-64.961-25.301-126.04-71.238-171.96-45.941-45.941-107-71.238-171.96-71.238-64.961 0-126.04 25.301-171.96 71.238-45.922 45.922-71.219 106.98-71.238 171.92v.04c0 3.98 3.219 7.179 7.18 7.179h472.02c3.96 0 7.18-3.219 7.18-7.18h.019zm-405-161.8a239.59 239.59 0 0 1 9.281-8.781l12.68 15.102c1.422 1.699 3.461 2.558 5.52 2.558 1.64 0 3.28-.558 4.62-1.68 3.04-2.558 3.442-7.077.88-10.12l-12.7-15.121c17.302-13.68 36.32-24.66 56.5-32.72l6.782 18.642a7.193 7.193 0 0 0 6.762 4.738c.82 0 1.64-.14 2.46-.441a7.187 7.187 0 0 0 4.301-9.22l-6.78-18.64c20.558-6.739 42.16-10.54 64.315-11.22v19.72c0 3.98 3.219 7.18 7.18 7.18 3.96 0 7.18-3.22 7.18-7.18v-19.72c22.14.68 43.762 4.481 64.316 11.22l-6.782 18.64a7.183 7.183 0 0 0 4.301 9.22c.82.3 1.64.441 2.461.441 2.941 0 5.7-1.82 6.762-4.738l6.78-18.641a227.062 227.062 0 0 1 56.5 32.719l-12.698 15.12c-2.559 3.04-2.16 7.583.879 10.122 1.34 1.14 2.98 1.68 4.62 1.68a7.25 7.25 0 0 0 5.52-2.56l12.68-15.101c3.16 2.84 6.262 5.761 9.282 8.781a231.058 231.058 0 0 1 32.738 41.18l-17.141 9.898c-3.442 1.98-4.621 6.38-2.641 9.82A7.206 7.206 0 0 0 437 276.7c1.219 0 2.461-.32 3.578-.96l17.18-9.923c10.36 19.238 17.84 39.88 22.301 61.38l-19.48 3.44c-3.898.68-6.52 4.423-5.84 8.321a7.198 7.198 0 0 0 7.079 5.942c.422 0 .84-.04 1.261-.122l19.461-3.44a228.034 228.034 0 0 1 2.18 25.46l-130.88.02c-2.102-29.238-17.02-55.742-41-72.781l21.078-62.281a7.19 7.19 0 0 0-3.219-8.54 7.181 7.181 0 0 0-9 1.481l-46.62 53.078a98.428 98.428 0 0 0-19.083-1.879c-51.68 0-94.14 40.16-97.84 90.922H27.296c.262-8.582 1-17.078 2.18-25.46l19.46 3.44a6.9 6.9 0 0 0 1.263.122c3.422 0 6.46-2.461 7.078-5.942.68-3.898-1.922-7.64-5.84-8.32l-19.48-3.442c4.441-21.5 11.94-42.14 22.3-61.379l17.18 9.922c1.142.66 2.36.961 3.579.961a7.197 7.197 0 0 0 6.242-3.601c1.98-3.442.801-7.84-2.64-9.82L61.477 253.4c9.18-14.781 20.12-28.602 32.719-41.199zm188.68 125.46-21.738 6.059-5.621-21.86L283 290.58l.101-.102 25.68-29.238zm-40.68-22.422c-1.559 1.781-2.16 4.238-1.559 6.54l8.399 32.64a7.25 7.25 0 0 0 3.36 4.441c1.1.641 2.339.961 3.6.961.641 0 1.302-.078 1.923-.261l32.48-9.04a7.146 7.146 0 0 0 4.879-4.62l12.699-37.5c18.16 14.34 29.48 35.34 31.44 58.44l-166.84-.019c3.66-42.82 39.66-76.539 83.423-76.539 2.601 0 5.199.121 7.8.36z" />
+  </svg>
+)
+export default SvgComponent