kyd-shared-badge 0.3.40 → 0.3.41

package/package.json

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

package/src/PrintableBadgeDisplay.tsx

@@ -25,6 +25,12 @@ import Reveal from './components/Reveal';
 import { formatLocalDateTime } from './utils/date';
 import ChatWidget from './chat/ChatWidget';
 import UseCases from './components/UseCases';
+import SummaryCards from './components/SummaryCards';
+import TopContributingFactors from './components/TopContributingFactors';
+import AiUsageBody from './components/AiUsageBody';
+import SanctionsMatches from './components/SanctionsMatches';
+import AppendixContent from './components/AppendixContent';
+import { ProviderIcon, getProviderDisplayName, getProviderTooltipCopy, getCategoryTooltipCopy, barColor } from './utils/provider';
 type ChatWidgetProps = Partial<{
   api: string;
   title: string;
@@ -95,63 +101,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const skillsMatrix = assessmentResult?.skills_matrix || { skills: [] };
   const skillsAll = assessmentResult?.skills_all || { skills: [] };
   const connected = badgeData?.connectedAccounts || [];
-  const ProviderIcon = ({ name }: { name?: string }) => {
-    const n = (name || '').toLowerCase();
-    if (n.includes('github')) return <FaGithub />;
-    if (n.includes('gitlab')) return <FaGitlab />;
-    if (n.includes('stack')) return <FaStackOverflow />;
-    if (n.includes('credly')) return <SiCredly />;
-    if (n.includes('fiverr')) return <SiFiverr />;
-    if (n.includes('kaggle')) return <FaKaggle />;
-    if (n.includes('google')) return <FaGoogle />;
-    if (n.includes('linkedin')) return <FaLinkedin />;
-    return <span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
-  };
-
-  const getProviderDisplayName = (name?: string): string => {
-    const n = (name || '').toLowerCase();
-    if (n.includes('github')) return 'GitHub';
-    if (n.includes('gitlab')) return 'GitLab';
-    if (n.includes('stack')) return 'Stack Overflow';
-    if (n.includes('credly')) return 'Credly';
-    if (n.includes('fiverr')) return 'Fiverr';
-    if (n.includes('kaggle')) return 'Kaggle';
-    if (n.includes('google')) return 'Google Scholar';
-    if (n.includes('linkedin')) return 'LinkedIn';
-    return name || 'Provider';
-  };
-
-  const getProviderTooltipCopy = (provider?: string): string => {
-    const n = (provider || '').toLowerCase();
-    if (n.includes('github')) return 'Signals from open-source activity: commits, repos, stars, and collaboration patterns.';
-    if (n.includes('gitlab')) return 'Signals from GitLab projects and contributions that indicate delivery and collaboration.';
-    if (n.includes('stack')) return 'Signals from Q&A participation such as answers, reputation, and accepted solutions.';
-    if (n.includes('credly')) return 'Verified badges and certifications that validate specific skills or achievements.';
-    if (n.includes('fiverr')) return 'Client reviews, job history, and delivery consistency across freelance engagements.';
-    if (n.includes('kaggle')) return 'Competition results, notebooks, and dataset contributions that reflect analytical skill.';
-    if (n.includes('google')) return 'Publications, citations, and scholarly presence indicating research impact.';
-    if (n.includes('linkedin')) return 'Professional history, endorsements, and network signals indicating credibility.';
-    return 'Signals contributed from this provider relevant to capability and trust.';
-  };
-
-  const getCategoryTooltipCopy = (category: string): string => {
-    const name = (category || '').toLowerCase();
-    if (/network|connection|collab|peer/.test(name)) return 'Signals from the developer’s professional connections, collaborations, and peer recognition.';
-    if (/project|repo|portfolio|work/.test(name)) return 'Signals from a developer’s visible projects, repositories, or published work that indicate breadth and quality of output.';
-    if (/skill|cert|assessment|endorse/.test(name)) return 'Signals tied to specific technical abilities, such as verified certifications, assessments, or endorsements.';
-    if (/experience|tenure|history/.test(name)) return 'Signals of tenure and diversity of professional or project involvement over time.';
-    if (/activity|recency|frequency|engage/.test(name)) return 'Signals of recency and frequency of developer engagement in professional or technical platforms.';
-    if (/sanction|legal|criminal|regulatory|ofac|fbi|watchlist/.test(name)) return 'Signals of legal, criminal, or regulatory red flags linked to an identity.';
-    if (/identity|authentic|consisten/.test(name)) return 'Signals that indicate whether a developer’s identity is genuine and consistent across platforms.';
-    if (/reputation|review|rating|feedback|perceive|peer/.test(name)) return 'Signals of how peers, clients, and communities perceive the developer.';
-    if (/geo|jurisdiction|country|region|ip|location/.test(name)) return 'Signals tied to a developer’s geographic or jurisdictional context.';
-    if (/security|cyber/.test(name)) return 'Signals of security posture and potential cyber-risk exposure.';
-    if (/risk/.test(name)) return 'KYD Risk surfaces signals of authenticity, reputation, and environmental telemetry that indicate potential risks in engaging with a developer.';
-    if (/tech|technical/.test(name)) return 'KYD Technical surfaces signals from a developer’s portfolio, skills, experience, activity, and network to indicate the likelihood of technical capability.';
-    return 'Share of overall contribution by category based on applied weights.';
-  };
-
-  const barColor = (pct: number) => pct >= 60 ? green : pct >= 40 ? '#ffbb54' : '#EC6662';
+  
 
   return (
     <BusinessRulesProvider items={graphInsights?.business_rules_all}>
@@ -207,65 +157,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
           <div className="pt-8 first:pt-0 kyd-avoid-break">
             <Reveal headless={isHeadless} as={'h4'} offsetY={8} durationMs={500} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Report Summary</Reveal>
             <Reveal headless={isHeadless} as={'div'} offsetY={8} durationMs={500} className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 *:min-h-full kyd-avoid-break">
-                {/* Technical semicircle gauge (refactored) */}
-                {(() => {
-                  const ui = graphInsights?.uiSummary?.technical || {};
-                  const pct = Math.round(Number(ui?.percent ?? 0));
-                  const label = ui?.label || 'EVIDENCE';
-                  const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Technical');
-                  return (
-                      <GaugeCard
-                        key={'technical-card'}
-                        title={'KYD Technical'}
-                        description={'The gauge visualization shows a weighted composite of technical evidence, with rightward movement indicating stronger indications of developer capability'}
-                        percent={pct}
-                        label={label}
-                        topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
-                        topMoversTitle={'Top Score Movers'}
-                      />
-                  );
-                })()}
-
-                {/* Risk descending bars card (abstracted) */}
-                {(() => {
-                  const ui = graphInsights?.uiSummary?.risk || {};
-                  const pctGood = Math.round(Number(ui?.percent_good ?? 0));
-                  const label = ui?.label || 'RISK';
-                  const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Risk');
-                  const tooltip = 'Higher bar filled indicates lower overall risk; movement to the right reflects improved risk posture.';
-                  return (
-                      <RiskCard
-                        title={'KYD Risk'}
-                        description={'The bar chart visualizes relative risk levels, where shorter bars denote lower risk and taller bars indicate greater exposure.'}
-                        percentGood={pctGood}
-                        label={label}
-                        topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
-                        topMoversTitle={'Top Score Movers'}
-                        tooltipText={tooltip}
-                      />
-                  );
-                })()}
-
-                {/* AI transparency semicircle gauge */}
-                {(() => {
-                  const ai_usage_summary = assessmentResult?.ai_usage_summary;
-                  const label = 'AI Transparency'// TODO: calculate label frontend
-                  const topMovers = ai_usage_summary?.key_findings || []
-                  return (
-                      <GaugeCard
-                        key={'ai-card'}
-                        title={'KYD AI (Beta)'}
-                        description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
-                        percent={ai_usage_summary?.transparency_score}
-                        label={label}
-                        // id non-functional
-                        topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
-                        topMoversTitle={'Key Findings'}
-                      />
-                  );
-                })()}
-              </div>
+              <SummaryCards graphInsights={graphInsights} assessmentResult={assessmentResult} topBusinessForGenre={topBusinessForGenre} />
             </Reveal>
           </div>
 
@@ -310,33 +202,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                 {/* Right: Contributing Factors (hidden on small screens) */}
                 <Reveal headless={isHeadless} className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
                   <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
-                  <div className="space-y-4">
-                    {(genreMapping?.['Technical'] || []).map((cat: string) => {
-                      const topRules = (categoryTopByGraph?.[cat] || []).slice(0, 3) as BusinessRule[];
-                      if (!topRules || topRules.length === 0) return null;
-                      return (
-                        <div key={cat} className="pt-3 first:pt-0">
-                          <div className={'text-xs font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>{cat}</div>
-                          <div className="space-y-1">
-                            {topRules.map((r, idx: number) => (
-                              <div key={idx} className="flex items-center gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
-                                <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
-                                  <ProviderIcon name={r.provider} />
-                                  <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
-                                    <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
-                                      <div style={{ fontWeight: 600 }}>{getProviderDisplayName(r.provider)}</div>
-                                      <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{getProviderTooltipCopy(r.provider)}</div>
-                                    </div>
-                                  </div>
-                                </span>
-                                <BusinessRuleLink uid={r.uid} label={r.label} />
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
+                  <TopContributingFactors categories={genreMapping?.['Technical'] as string[] || []} categoryTopByGraph={categoryTopByGraph as any} />
                 </Reveal>
               </div>
 
@@ -385,33 +251,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               {/* Right: Contributing Factors (hidden on small screens) */}
               <Reveal headless={isHeadless} className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
                 <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
-                <div className="space-y-4">
-                  {genreMapping?.['Risk']?.map((cat: string) => {
-                    const topRules = (categoryTopByGraph?.[cat] || []).slice(0, 3) as BusinessRule[];
-                    if (!topRules || topRules.length === 0) return null;
-                    return (
-                      <div key={cat} className="pt-3 first:pt-0">
-                        <div className={'text-xs font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>{cat}</div>
-                        <div className="space-y-1">
-                          {topRules.map((r, idx: number) => (
-                            <div key={idx} className="flex items-center gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
-                              <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
-                                <ProviderIcon name={r.provider} />
-                                <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
-                                  <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
-                                    <div style={{ fontWeight: 600 }}>{getProviderDisplayName(r.provider)}</div>
-                                    <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{getProviderTooltipCopy(r.provider)}</div>
-                                  </div>
-                                </div>
-                              </span>
-                              <BusinessRuleLink uid={r.uid} label={r.label} />
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
+                <TopContributingFactors categories={genreMapping?.['Risk'] as string[] || []} categoryTopByGraph={categoryTopByGraph as any} />
               </Reveal>
             </div>
 
@@ -432,76 +272,9 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               </Reveal>
             ) : (
               <>
-                {(() => {
-                  const ss = assessmentResult?.screening_sources;
-                  const ofacMatches = ss?.ofac_screen?.matches && (ss.ofac_screen.matches.length > 0);
-                  const cslDetails = ss?.csl_details && (Array.isArray(ss.csl_details) ? ss.csl_details.length > 0 : Object.keys(ss.csl_details).length > 0);
-                  const fbiMatches = ss?.fbi_matches && (ss.fbi_matches.length > 0);
-                  if (!(ofacMatches || cslDetails || fbiMatches)) return null;
-                  return (
-                    <Reveal headless={isHeadless} className={'mb-8 rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' }}>
-                      <h4 className={'text-lg font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>3A. Sanctions Matches</h4>
-                      {/* OFAC matches */}
-                      {ofacMatches && (
-                        <div className={'mb-4'}>
-                          <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>OFAC API Matches</h5>
-                          <div>
-                            {ss!.ofac_screen!.matches!.map((m, i: number) => {
-                              const s = m?.sanction;
-                              const title = s?.name || 'Unknown';
-                              const programs = (s?.programs && s?.programs.length) ? ` — Programs: ${s?.programs.join(', ')}` : '';
-                              return (
-                                <div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
-                                  <div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
-                                  <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
-                                    <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{title}</span>
-                                    <span>{programs}</span>
-                                    {s?.entityLink ? (
-                                      <>
-                                        {' '}— <a href={s.entityLink} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a>
-                                      </>
-                                    ) : null}
-                                  </div>
-                                </div>
-                              );
-                            })}
-                          </div>
-                          <details className={'mt-2'}>
-                            <summary className={'cursor-pointer text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>View OFAC Raw JSON</summary>
-                            <pre className={'mt-2 overflow-auto text-xs p-3 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{JSON.stringify(ss!.ofac_screen!.raw, null, 2)}</pre>
-                          </details>
-                        </div>
-                      )}
-                      {/* CSL details */}
-                      {cslDetails && (
-                        <div className={'mb-4'}>
-                          <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>U.S. CSL Details</h5>
-                          <details>
-                            <summary className={'cursor-pointer text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>View CSL Raw JSON</summary>
-                            <pre className={'mt-2 overflow-auto text-xs p-3 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{JSON.stringify(ss!.csl_details, null, 2)}</pre>
-                          </details>
-                        </div>
-                      )}
-                      {/* FBI matches */}
-                      {fbiMatches && (
-                        <div className={'mb-2'}>
-                          <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>FBI Wanted List Matches</h5>
-                          <div>
-                            {ss!.fbi_matches!.map((f, i: number) => (
-                              <div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
-                                <div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
-                                <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
-                                  <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{f.title || 'Match'}</span>
-                                  {f.url ? <> — <a href={f.url} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a></> : null}
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-                      )}
-                    </Reveal>
-                  );
-                })()}
+                <Reveal headless={isHeadless}>
+                  <SanctionsMatches ss={assessmentResult?.screening_sources} title={'3A. Sanctions Matches'} />
+                </Reveal>
                 <Reveal headless={isHeadless}>
                   <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
                 </Reveal>
@@ -522,63 +295,9 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
               {/* Skills */}
               <Reveal headless={isHeadless}>
-                <div>
-                  <h4 id="appendix-skills" className={'text-lg font-bold mb-1'} style={{ color: 'var(--text-main)' }}>Skills</h4>
-                  <div className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
-                    Skills are grouped by evidence: Observed when demonstrated in code, Self-reported when declared by the developer without independent verification, and Certified when confirmed through a credential. These categories distinguish between use, claim, and third-party validation.
-                  </div>
-                  <SkillsAppendixTable skillsAll={skillsAll} />
-                </div>
+                <AppendixContent graphInsights={graphInsights} updatedAt={updatedAt} developerName={developerName} genreMapping={genreMapping as Record<string, string[]>} screeningSources={!badgeData.optOutScreening ? screening_sources : undefined} headless={isHeadless} skillsAll={skillsAll} />
               </Reveal>
 
-              {/* Observations */}
-              {Array.isArray(graphInsights?.business_rules_all) && graphInsights.business_rules_all.length > 0 && (
-                <Reveal headless={isHeadless}>
-                  <div>
-                    <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Observations</h4>
-                    <AppendixTables
-                      type="business_rules"
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                      sources={graphInsights.business_rules_all as any}
-                      searchedAt={updatedAt}
-                      developerName={developerName || 'this developer'}
-                      genreMapping={genreMapping as Record<string, string[]>}
-                      headless={isHeadless}
-                    />
-                  </div>
-                </Reveal>
-              )}
-              
-              {/* Sanctions & Watchlists */}
-              {!badgeData.optOutScreening && screening_sources && (
-                <Reveal headless={isHeadless}>
-                  <div>
-                    <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Sanctions & Watchlists</h4>
-                    {(() => {
-                      const ofacProvided = screening_sources.ofac_screen?.sources || [];
-                      const lists = [...(screening_sources.ofac_lists || []), ...ofacProvided];
-                      const seen: { [k: string]: boolean } = {};
-                      const dedup: string[] = [];
-                      for (let i = 0; i < lists.length; i++) {
-                          const val = lists[i];
-                          if (!seen[val]) { seen[val] = true; dedup.push(val); }
-                      }
-                      const detailed = screening_sources.sanctions_sources_detailed || [];
-                      const useDetailed = detailed && detailed.length > 0;
-                      return (
-                          <AppendixTables
-                              type="sanctions"
-                              sources={useDetailed ? detailed : dedup}
-                              searchedAt={updatedAt}
-                              developerName={developerName || 'this developer'}
-                              headless={isHeadless}
-                          />
-                      );
-                  })()}
-                  </div>
-                </Reveal>
-              )}
-
             </div>
           </div>
 

package/src/SharedBadgeDisplay.tsx

@@ -25,6 +25,12 @@ import Reveal from './components/Reveal';
 import { formatLocalDateTime } from './utils/date';
 import ChatWidget from './chat/ChatWidget';
 import UseCases from './components/UseCases';
+import SummaryCards from './components/SummaryCards';
+import TopContributingFactors from './components/TopContributingFactors';
+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 { useEffect, useMemo, useState } from 'react';
 type ChatWidgetProps = Partial<{
   api: string;
@@ -96,63 +102,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const skillsMatrix = assessmentResult?.skills_matrix || { skills: [] };
   const skillsAll = assessmentResult?.skills_all || { skills: [] };
   const connected = badgeData?.connectedAccounts || [];
-  const ProviderIcon = ({ name }: { name?: string }) => {
-    const n = (name || '').toLowerCase();
-    if (n.includes('github')) return <FaGithub />;
-    if (n.includes('gitlab')) return <FaGitlab />;
-    if (n.includes('stack')) return <FaStackOverflow />;
-    if (n.includes('credly')) return <SiCredly />;
-    if (n.includes('fiverr')) return <SiFiverr />;
-    if (n.includes('kaggle')) return <FaKaggle />;
-    if (n.includes('google')) return <FaGoogle />;
-    if (n.includes('linkedin')) return <FaLinkedin />;
-    return <span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
-  };
-
-  const getProviderDisplayName = (name?: string): string => {
-    const n = (name || '').toLowerCase();
-    if (n.includes('github')) return 'GitHub';
-    if (n.includes('gitlab')) return 'GitLab';
-    if (n.includes('stack')) return 'Stack Overflow';
-    if (n.includes('credly')) return 'Credly';
-    if (n.includes('fiverr')) return 'Fiverr';
-    if (n.includes('kaggle')) return 'Kaggle';
-    if (n.includes('google')) return 'Google Scholar';
-    if (n.includes('linkedin')) return 'LinkedIn';
-    return name || 'Provider';
-  };
-
-  const getProviderTooltipCopy = (provider?: string): string => {
-    const n = (provider || '').toLowerCase();
-    if (n.includes('github')) return 'Signals from open-source activity: commits, repos, stars, and collaboration patterns.';
-    if (n.includes('gitlab')) return 'Signals from GitLab projects and contributions that indicate delivery and collaboration.';
-    if (n.includes('stack')) return 'Signals from Q&A participation such as answers, reputation, and accepted solutions.';
-    if (n.includes('credly')) return 'Verified badges and certifications that validate specific skills or achievements.';
-    if (n.includes('fiverr')) return 'Client reviews, job history, and delivery consistency across freelance engagements.';
-    if (n.includes('kaggle')) return 'Competition results, notebooks, and dataset contributions that reflect analytical skill.';
-    if (n.includes('google')) return 'Publications, citations, and scholarly presence indicating research impact.';
-    if (n.includes('linkedin')) return 'Professional history, endorsements, and network signals indicating credibility.';
-    return 'Signals contributed from this provider relevant to capability and trust.';
-  };
-
-  const getCategoryTooltipCopy = (category: string): string => {
-    const name = (category || '').toLowerCase();
-    if (/network|connection|collab|peer/.test(name)) return 'Signals from the developer’s professional connections, collaborations, and peer recognition.';
-    if (/project|repo|portfolio|work/.test(name)) return 'Signals from a developer’s visible projects, repositories, or published work that indicate breadth and quality of output.';
-    if (/skill|cert|assessment|endorse/.test(name)) return 'Signals tied to specific technical abilities, such as verified certifications, assessments, or endorsements.';
-    if (/experience|tenure|history/.test(name)) return 'Signals of tenure and diversity of professional or project involvement over time.';
-    if (/activity|recency|frequency|engage/.test(name)) return 'Signals of recency and frequency of developer engagement in professional or technical platforms.';
-    if (/sanction|legal|criminal|regulatory|ofac|fbi|watchlist/.test(name)) return 'Signals of legal, criminal, or regulatory red flags linked to an identity.';
-    if (/identity|authentic|consisten/.test(name)) return 'Signals that indicate whether a developer’s identity is genuine and consistent across platforms.';
-    if (/reputation|review|rating|feedback|perceive|peer/.test(name)) return 'Signals of how peers, clients, and communities perceive the developer.';
-    if (/geo|jurisdiction|country|region|ip|location/.test(name)) return 'Signals tied to a developer’s geographic or jurisdictional context.';
-    if (/security|cyber/.test(name)) return 'Signals of security posture and potential cyber-risk exposure.';
-    if (/risk/.test(name)) return 'KYD Risk surfaces signals of authenticity, reputation, and environmental telemetry that indicate potential risks in engaging with a developer.';
-    if (/tech|technical/.test(name)) return 'KYD Technical surfaces signals from a developer’s portfolio, skills, experience, activity, and network to indicate the likelihood of technical capability.';
-    return 'Share of overall contribution by category based on applied weights.';
-  };
-
-  const barColor = (pct: number) => pct >= 60 ? green : pct >= 40 ? '#ffbb54' : '#EC6662';
+  
 
   // Determine Role Fit & Coaching visibility
   const hasEnterpriseMatch = !!assessmentResult?.enterprise_match;
@@ -256,59 +206,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
       </Reveal>
       <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)' }}>
         <Reveal headless={isHeadless} as={'h4'} offsetY={8} durationMs={500} className={'text-2xl font-semibold mb-4'} style={{ color: 'var(--text-main)' }}>Report Summary</Reveal>
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 *:min-h-full">
-          {(() => {
-            const ui = graphInsights?.uiSummary?.technical || {};
-            const pct = Math.round(Number(ui?.percent ?? 0));
-            const label = ui?.label || 'EVIDENCE';
-            const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Technical');
-            return (
-              <GaugeCard
-                key={'technical-card'}
-                title={'KYD Technical'}
-                description={'The gauge visualization shows a weighted composite of technical evidence, with rightward movement indicating stronger indications of developer capability'}
-                percent={pct}
-                label={label}
-                topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
-                topMoversTitle={'Top Score Movers'}
-              />
-            );
-          })()}
-          {(() => {
-            const ui = graphInsights?.uiSummary?.risk || {};
-            const pctGood = Math.round(Number(ui?.percent_good ?? 0));
-            const label = ui?.label || 'RISK';
-            const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Risk');
-            const tooltip = 'Higher bar filled indicates lower overall risk; movement to the right reflects improved risk posture.';
-            return (
-              <RiskCard
-                title={'KYD Risk'}
-                description={'The bar chart visualizes relative risk levels, where shorter bars denote lower risk and taller bars indicate greater exposure.'}
-                percentGood={pctGood}
-                label={label}
-                topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
-                topMoversTitle={'Top Score Movers'}
-                tooltipText={tooltip}
-              />
-            );
-          })()}
-          {(() => {
-            const ai_usage_summary = assessmentResult?.ai_usage_summary;
-            const label = 'AI Transparency';
-            const topMovers = ai_usage_summary?.key_findings || [];
-            return (
-              <GaugeCard
-                key={'ai-card'}
-                title={'KYD AI (Beta)'}
-                description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
-                percent={ai_usage_summary?.transparency_score}
-                label={label}
-                topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
-                topMoversTitle={'Key Findings'}
-              />
-            );
-          })()}
-        </div>
+        <SummaryCards graphInsights={graphInsights} assessmentResult={assessmentResult} topBusinessForGenre={topBusinessForGenre} />
         <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
           Report Completed: {formatLocalDateTime(updatedAt)}
         </div>
@@ -394,33 +292,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
           </Reveal>
           <Reveal headless={isHeadless} className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
             <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
-            <div className="space-y-4">
-              {(genreMapping?.['Technical'] || []).map((cat: string) => {
-                const topRules = (categoryTopByGraph?.[cat] || []).slice(0, 3) as BusinessRule[];
-                if (!topRules || topRules.length === 0) return null;
-                return (
-                  <div key={cat} className="pt-3 first:pt-0">
-                    <div className={'text-xs font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>{cat}</div>
-                    <div className="space-y-1">
-                      {topRules.map((r, idx: number) => (
-                        <div key={idx} className="flex items-center gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
-                          <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
-                            <ProviderIcon name={r.provider} />
-                            <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
-                              <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
-                                <div style={{ fontWeight: 600 }}>{getProviderDisplayName(r.provider)}</div>
-                                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{getProviderTooltipCopy(r.provider)}</div>
-                              </div>
-                            </div>
-                          </span>
-                          <BusinessRuleLink uid={r.uid} label={r.label} />
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
+            <TopContributingFactors categories={genreMapping?.['Technical'] as string[] || []} categoryTopByGraph={categoryTopByGraph as any} />
           </Reveal>
         </div>
         <Reveal headless={isHeadless}>
@@ -464,33 +336,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
           </Reveal>
           <Reveal headless={isHeadless} className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
             <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
-            <div className="space-y-4">
-              {genreMapping?.['Risk']?.map((cat: string) => {
-                const topRules = (categoryTopByGraph?.[cat] || []).slice(0, 3) as BusinessRule[];
-                if (!topRules || topRules.length === 0) return null;
-                return (
-                  <div key={cat} className="pt-3 first:pt-0">
-                    <div className={'text-xs font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>{cat}</div>
-                    <div className="space-y-1">
-                      {topRules.map((r, idx: number) => (
-                        <div key={idx} className="flex items-center gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
-                          <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
-                            <ProviderIcon name={r.provider} />
-                            <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
-                              <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
-                                <div style={{ fontWeight: 600 }}>{getProviderDisplayName(r.provider)}</div>
-                                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{getProviderTooltipCopy(r.provider)}</div>
-                              </div>
-                            </div>
-                          </span>
-                          <BusinessRuleLink uid={r.uid} label={r.label} />
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
+            <TopContributingFactors categories={genreMapping?.['Risk'] as string[] || []} categoryTopByGraph={categoryTopByGraph as any} />
           </Reveal>
         </div>
         {badgeData.optOutScreening ? (
@@ -508,73 +354,9 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             </div>
           </Reveal>
         ) : (
-          (() => {
-            const ss = assessmentResult?.screening_sources;
-            const ofacMatches = ss?.ofac_screen?.matches && (ss.ofac_screen.matches.length > 0);
-            const cslDetails = ss?.csl_details && (Array.isArray(ss.csl_details) ? ss.csl_details.length > 0 : Object.keys(ss.csl_details).length > 0);
-            const fbiMatches = ss?.fbi_matches && (ss.fbi_matches.length > 0);
-            if (!(ofacMatches || cslDetails || fbiMatches)) return null;
-            return (
-              <Reveal headless={isHeadless} className={'mb-0 mt-6 rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' }}>
-                <h4 className={'text-lg font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Sanctions Matches</h4>
-                {ofacMatches && (
-                  <div className={'mb-4'}>
-                    <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>OFAC API Matches</h5>
-                    <div>
-                      {ss!.ofac_screen!.matches!.map((m, i: number) => {
-                        const s = m?.sanction;
-                        const title = s?.name || 'Unknown';
-                        const programs = (s?.programs && s?.programs.length) ? ` — Programs: ${s?.programs.join(', ')}` : '';
-                        return (
-                          <div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
-                            <div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
-                            <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
-                              <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{title}</span>
-                              <span>{programs}</span>
-                              {s?.entityLink ? (
-                                <>
-                                  {' '}— <a href={s.entityLink} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a>
-                                </>
-                              ) : null}
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                    <details className={'mt-2'}>
-                      <summary className={'cursor-pointer text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>View OFAC Raw JSON</summary>
-                      <pre className={'mt-2 overflow-auto text-xs p-3 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{JSON.stringify(ss!.ofac_screen!.raw, null, 2)}</pre>
-                    </details>
-                  </div>
-                )}
-                {cslDetails && (
-                  <div className={'mb-4'}>
-                    <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>U.S. CSL Details</h5>
-                    <details>
-                      <summary className={'cursor-pointer text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>View CSL Raw JSON</summary>
-                      <pre className={'mt-2 overflow-auto text-xs p-3 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{JSON.stringify(ss!.csl_details, null, 2)}</pre>
-                    </details>
-                  </div>
-                )}
-                {fbiMatches && (
-                  <div className={'mb-2'}>
-                    <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>FBI Wanted List Matches</h5>
-                    <div>
-                      {ss!.fbi_matches!.map((f, i: number) => (
-                        <div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
-                          <div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
-                          <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
-                            <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{f.title || 'Match'}</span>
-                            {f.url ? <> — <a href={f.url} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a></> : null}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </Reveal>
-            );
-          })()
+          <Reveal headless={isHeadless} className={'mb-0 mt-6'}>
+            <SanctionsMatches ss={assessmentResult?.screening_sources} />
+          </Reveal>
         )}
       </div>
     </div>
@@ -584,79 +366,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
     <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)' }}>
         <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>KYD AI (Beta)</Reveal>
-        {(() => {
-          const ai = assessmentResult?.ai_usage_summary;
-          if (!ai) return null;
-          const techGauge = {
-            percent: Math.max(0, Math.min(100, Number(ai.originality_score ?? 0))),
-            label: 'Originality',
-          };
-          const riskGauge = {
-            percent: Math.max(0, Math.min(100, Number(ai.transparency_score ?? 0))),
-            label: ai.transparency_descriptor ? `Transparency — ${ai.transparency_descriptor}` : 'Transparency',
-          };
-          const stats: Array<{ label: string; value: string }>= [
-            { label: 'Files analyzed', value: String(ai.files_analyzed ?? 0) },
-            { label: 'Files with AI findings', value: String(ai.files_with_ai_findings ?? 0) },
-            { label: 'Files with disclosure', value: String(ai.files_with_disclosure ?? 0) },
-            { label: 'Repos analyzed', value: String(ai.repos_analyzed ?? 0) },
-            { label: 'Repos with AI findings', value: String(ai.repos_with_ai_findings ?? 0) },
-          ];
-          const findings = Array.isArray(ai.evidence) ? ai.evidence.slice(0, 5) : [];
-          const topMovers = Array.isArray(ai.key_findings) ? ai.key_findings : [];
-          return (
-            <div className="space-y-8">
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 *:min-h-full">
-                <GaugeCard
-                  key={'ai-originality'}
-                  title={'Originality'}
-                  description={'Estimated share of human-authored code based on linguistic signals in comments.'}
-                  percent={techGauge.percent}
-                  label={techGauge.label}
-                  topMovers={[]}
-                />
-                <GaugeCard
-                  key={'ai-transparency'}
-                  title={'Transparency'}
-                  description={'Proportion of AI-influenced files that include an explicit disclosure.'}
-                  percent={riskGauge.percent}
-                  label={riskGauge.label}
-                  topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
-                  topMoversTitle={'Key Findings'}
-                />
-              </div>
-              <div className="grid grid-cols-2 sm:grid-cols-5 gap-4">
-                {stats.map((s, i) => (
-                  <div key={i} className={'rounded-md p-3 border'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
-                    <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>{s.label}</div>
-                    <div className={'text-lg font-semibold'} style={{ color: 'var(--text-main)' }}>{s.value}</div>
-                  </div>
-                ))}
-              </div>
-              {findings.length > 0 && (
-                <div>
-                  <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Sample Findings</div>
-                  <div className="space-y-3">
-                    {findings.map((f, idx) => (
-                      <div key={idx} className={'rounded-md p-3 border'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
-                        <div className={'text-xs mb-1'} style={{ color: 'var(--text-secondary)' }}>{f.file_path || 'file'}</div>
-                        {f.snippet ? (
-                          <pre className={'text-xs overflow-auto p-2 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{f.snippet}</pre>
-                        ) : null}
-                        {f.reason ? (
-                          <div className={'text-xs mt-2'} style={{ color: 'var(--text-secondary)' }}>{f.reason}</div>
-                        ) : null}
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-              {ai.explanation && (
-                <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{ai.explanation}</div>
-              )}
-            </div>
-          );
-        })()}
+        <AiUsageBody ai={assessmentResult?.ai_usage_summary} />
       </div>
     </div>
   );

package/src/components/AiUsageBody.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React from 'react';
+import GaugeCard from './GaugeCard';
+
+export default function AiUsageBody({ ai }: { ai?: {
+  explanation?: string;
+  key_findings?: string[];
+  originality_score?: number;
+  transparency_score?: number;
+  transparency_descriptor?: string;
+  files_with_ai_findings?: number;
+  files_analyzed?: number;
+  files_with_disclosure?: number;
+  repos_analyzed?: number;
+  repos_with_ai_findings?: number;
+  evidence?: Array<{ file_path?: string; snippet?: string; reason?: string }>; 
+} }) {
+  if (!ai) return null;
+  const techGauge = {
+    percent: Math.max(0, Math.min(100, Number(ai.originality_score ?? 0))),
+    label: 'Originality',
+  };
+  const riskGauge = {
+    percent: Math.max(0, Math.min(100, Number(ai.transparency_score ?? 0))),
+    label: ai.transparency_descriptor ? `Transparency — ${ai.transparency_descriptor}` : 'Transparency',
+  };
+  const stats: Array<{ label: string; value: string }>= [
+    { label: 'Files analyzed', value: String(ai.files_analyzed ?? 0) },
+    { label: 'Files with AI findings', value: String(ai.files_with_ai_findings ?? 0) },
+    { label: 'Files with disclosure', value: String(ai.files_with_disclosure ?? 0) },
+    { label: 'Repos analyzed', value: String(ai.repos_analyzed ?? 0) },
+    { label: 'Repos with AI findings', value: String(ai.repos_with_ai_findings ?? 0) },
+  ];
+  const findings = Array.isArray(ai.evidence) ? ai.evidence.slice(0, 5) : [];
+  const topMovers = Array.isArray(ai.key_findings) ? ai.key_findings : [];
+
+  return (
+    <div className="space-y-8">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 *:min-h-full">
+        <GaugeCard
+          key={'ai-originality'}
+          title={'Originality'}
+          description={'Estimated share of human-authored code based on linguistic signals in comments.'}
+          percent={techGauge.percent}
+          label={techGauge.label}
+          topMovers={[]}
+        />
+        <GaugeCard
+          key={'ai-transparency'}
+          title={'Transparency'}
+          description={'Proportion of AI-influenced files that include an explicit disclosure.'}
+          percent={riskGauge.percent}
+          label={riskGauge.label}
+          topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
+          topMoversTitle={'Key Findings'}
+        />
+      </div>
+      <div className="grid grid-cols-2 sm:grid-cols-5 gap-4">
+        {stats.map((s, i) => (
+          <div key={i} className={'rounded-md p-3 border'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
+            <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>{s.label}</div>
+            <div className={'text-lg font-semibold'} style={{ color: 'var(--text-main)' }}>{s.value}</div>
+          </div>
+        ))}
+      </div>
+      {findings.length > 0 && (
+        <div>
+          <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Sample Findings</div>
+          <div className="space-y-3">
+            {findings.map((f, idx) => (
+              <div key={idx} className={'rounded-md p-3 border'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
+                <div className={'text-xs mb-1'} style={{ color: 'var(--text-secondary)' }}>{f.file_path || 'file'}</div>
+                {f.snippet ? (
+                  <pre className={'text-xs overflow-auto p-2 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{f.snippet}</pre>
+                ) : null}
+                {f.reason ? (
+                  <div className={'text-xs mt-2'} style={{ color: 'var(--text-secondary)' }}>{f.reason}</div>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {ai.explanation && (
+        <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{ai.explanation}</div>
+      )}
+    </div>
+  );
+}
+
+

package/src/components/AppendixContent.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import AppendixTables from './AppendixTables';
+import SkillsAppendixTable from './SkillsAppendixTable';
+import { GraphInsightsPayload, SkillsAll } from '../types';
+
+export default function AppendixContent({
+  graphInsights,
+  updatedAt,
+  developerName,
+  genreMapping,
+  screeningSources,
+  headless,
+  skillsAll,
+}: {
+  graphInsights: GraphInsightsPayload;
+  updatedAt: string;
+  developerName?: string;
+  genreMapping: Record<string, string[]>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  screeningSources?: any;
+  headless?: boolean;
+  skillsAll: SkillsAll;
+}) {
+  const ofacProvided = screeningSources?.ofac_screen?.sources || [];
+  const lists = [...(screeningSources?.ofac_lists || []), ...ofacProvided];
+  const seen: { [k: string]: boolean } = {};
+  const dedup: string[] = [];
+  for (let i = 0; i < lists.length; i++) {
+    const val = lists[i];
+    if (!seen[val]) { seen[val] = true; dedup.push(val); }
+  }
+  const detailed = screeningSources?.sanctions_sources_detailed || [];
+  const useDetailed = detailed && detailed.length > 0;
+
+  return (
+    <div className="space-y-10">
+      <div>
+        <h4 id="appendix-skills" className={'text-lg font-bold mb-1'} style={{ color: 'var(--text-main)' }}>Skills</h4>
+        <div className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
+          Skills are grouped by evidence: Observed when demonstrated in code, Self-reported when declared by the developer without independent verification, and Certified when confirmed through a credential.
+        </div>
+        <SkillsAppendixTable skillsAll={skillsAll} />
+      </div>
+      {Array.isArray(graphInsights?.business_rules_all) && graphInsights.business_rules_all.length > 0 && (
+        <div>
+          <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Observations</h4>
+          <AppendixTables
+            type="business_rules"
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            sources={graphInsights.business_rules_all as any}
+            searchedAt={updatedAt}
+            developerName={developerName || 'this developer'}
+            genreMapping={genreMapping as Record<string, string[]>}
+            headless={headless}
+          />
+        </div>
+      )}
+      {screeningSources && (
+        <div>
+          <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Sanctions & Watchlists</h4>
+          <AppendixTables
+            type="sanctions"
+            sources={useDetailed ? detailed : dedup}
+            searchedAt={updatedAt}
+            developerName={developerName || 'this developer'}
+            headless={headless}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+

package/src/components/SanctionsMatches.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import React from 'react';
+
+export default function SanctionsMatches({ ss, title }: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ss?: any;
+  title?: string;
+}) {
+  if (!ss) return null;
+  const ofacMatches = ss?.ofac_screen?.matches && (ss.ofac_screen.matches.length > 0);
+  const cslDetails = ss?.csl_details && (Array.isArray(ss.csl_details) ? ss.csl_details.length > 0 : Object.keys(ss.csl_details || {}).length > 0);
+  const fbiMatches = ss?.fbi_matches && (ss.fbi_matches.length > 0);
+  if (!(ofacMatches || cslDetails || fbiMatches)) return null;
+
+  return (
+    <div className={'rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' }}>
+      <h4 className={'text-lg font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>{title || 'Sanctions Matches'}</h4>
+      {ofacMatches && (
+        <div className={'mb-4'}>
+          <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>OFAC API Matches</h5>
+          <div>
+            {ss!.ofac_screen!.matches!.map((m: any, i: number) => {
+              const s = m?.sanction;
+              const t = s?.name || 'Unknown';
+              const programs = (s?.programs && s?.programs.length) ? ` — Programs: ${s?.programs.join(', ')}` : '';
+              return (
+                <div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
+                  <div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
+                  <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
+                    <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{t}</span>
+                    <span>{programs}</span>
+                    {s?.entityLink ? (
+                      <>
+                        {' '}— <a href={s.entityLink} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a>
+                      </>
+                    ) : null}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <details className={'mt-2'}>
+            <summary className={'cursor-pointer text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>View OFAC Raw JSON</summary>
+            <pre className={'mt-2 overflow-auto text-xs p-3 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{JSON.stringify(ss!.ofac_screen!.raw, null, 2)}</pre>
+          </details>
+        </div>
+      )}
+      {cslDetails && (
+        <div className={'mb-4'}>
+          <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>U.S. CSL Details</h5>
+          <details>
+            <summary className={'cursor-pointer text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>View CSL Raw JSON</summary>
+            <pre className={'mt-2 overflow-auto text-xs p-3 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{JSON.stringify(ss!.csl_details, null, 2)}</pre>
+          </details>
+        </div>
+      )}
+      {fbiMatches && (
+        <div className={'mb-2'}>
+          <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>FBI Wanted List Matches</h5>
+          <div>
+            {ss!.fbi_matches!.map((f: any, i: number) => (
+              <div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
+                <div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
+                <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
+                  <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{f.title || 'Match'}</span>
+                  {f.url ? <> — <a href={f.url} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a></> : null}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+

package/src/components/SummaryCards.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import GaugeCard from './GaugeCard';
+import RiskCard from './RiskCard';
+import { GraphInsightsPayload, AssessmentResult, TopBusinessRule } from '../types';
+
+export default function SummaryCards({ graphInsights, assessmentResult, topBusinessForGenre }: {
+  graphInsights: GraphInsightsPayload;
+  assessmentResult: AssessmentResult;
+  topBusinessForGenre: (genre: string) => TopBusinessRule[];
+}) {
+  const uiTech = graphInsights?.uiSummary?.technical || {};
+  const techPct = Math.round(Number(uiTech?.percent ?? 0));
+  const techLabel = uiTech?.label || 'EVIDENCE';
+  const techTop = uiTech?.top_movers && uiTech.top_movers.length > 0 ? uiTech.top_movers : topBusinessForGenre('Technical');
+
+  const uiRisk = graphInsights?.uiSummary?.risk || {};
+  const riskPctGood = Math.round(Number(uiRisk?.percent_good ?? 0));
+  const riskLabel = uiRisk?.label || 'RISK';
+  const riskTop = uiRisk?.top_movers && uiRisk.top_movers.length > 0 ? uiRisk.top_movers : topBusinessForGenre('Risk');
+
+  const ai = assessmentResult?.ai_usage_summary;
+  const aiLabel = 'AI Transparency';
+  const aiTopMovers = ai?.key_findings || [];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 *:min-h-full">
+      <GaugeCard
+        key={'technical-card'}
+        title={'KYD Technical'}
+        description={'The gauge visualization shows a weighted composite of technical evidence, with rightward movement indicating stronger indications of developer capability'}
+        percent={techPct}
+        label={techLabel}
+        topMovers={techTop?.map(t => ({ label: (t as any)?.label, uid: (t as any)?.uid }))}
+        topMoversTitle={'Top Score Movers'}
+      />
+      <RiskCard
+        title={'KYD Risk'}
+        description={'The bar chart visualizes relative risk levels, where shorter bars denote lower risk and taller bars indicate greater exposure.'}
+        percentGood={riskPctGood}
+        label={riskLabel}
+        topMovers={riskTop?.map(t => ({ label: (t as any)?.label, uid: (t as any)?.uid }))}
+        topMoversTitle={'Top Score Movers'}
+        tooltipText={'Higher bar filled indicates lower overall risk; movement to the right reflects improved risk posture.'}
+      />
+      <GaugeCard
+        key={'ai-card'}
+        title={'KYD AI (Beta)'}
+        description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
+        percent={ai?.transparency_score}
+        label={aiLabel}
+        topMovers={(aiTopMovers).map(t => ({ label: t, uid: 'ai-usage' }))}
+        topMoversTitle={'Key Findings'}
+      />
+    </div>
+  );
+}
+
+

package/src/components/TopContributingFactors.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React from 'react';
+import { BusinessRule } from '../types';
+import BusinessRuleLink from './BusinessRuleLink';
+import { ProviderIcon, getProviderDisplayName, getProviderTooltipCopy } from '../utils/provider';
+
+export default function TopContributingFactors({
+  categories,
+  categoryTopByGraph,
+}: {
+  categories: string[];
+  categoryTopByGraph: { [category: string]: BusinessRule[] };
+}) {
+  return (
+    <div className="space-y-4">
+      {(categories || []).map((cat: string) => {
+        const topRules = (categoryTopByGraph?.[cat] || []).slice(0, 3) as BusinessRule[];
+        if (!topRules || topRules.length === 0) return null;
+        return (
+          <div key={cat} className="pt-3 first:pt-0">
+            <div className={'text-xs font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>{cat}</div>
+            <div className="space-y-1">
+              {topRules.map((r, idx: number) => (
+                <div key={idx} className="flex items-center gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
+                  <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
+                    <ProviderIcon name={r.provider} />
+                    <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
+                      <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
+                        <div style={{ fontWeight: 600 }}>{getProviderDisplayName(r.provider)}</div>
+                        <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{getProviderTooltipCopy(r.provider)}</div>
+                      </div>
+                    </div>
+                  </span>
+                  <BusinessRuleLink uid={r.uid} label={r.label} />
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+

package/src/utils/provider.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import React from 'react';
+import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
+import { SiCredly, SiFiverr } from 'react-icons/si';
+
+export const ProviderIcon = ({ name }: { name?: string }) => {
+  const n = (name || '').toLowerCase();
+  if (n.includes('github')) return <FaGithub />;
+  if (n.includes('gitlab')) return <FaGitlab />;
+  if (n.includes('stack')) return <FaStackOverflow />;
+  if (n.includes('credly')) return <SiCredly />;
+  if (n.includes('fiverr')) return <SiFiverr />;
+  if (n.includes('kaggle')) return <FaKaggle />;
+  if (n.includes('google')) return <FaGoogle />;
+  if (n.includes('linkedin')) return <FaLinkedin />;
+  return <span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
+};
+
+export const getProviderDisplayName = (name?: string): string => {
+  const n = (name || '').toLowerCase();
+  if (n.includes('github')) return 'GitHub';
+  if (n.includes('gitlab')) return 'GitLab';
+  if (n.includes('stack')) return 'Stack Overflow';
+  if (n.includes('credly')) return 'Credly';
+  if (n.includes('fiverr')) return 'Fiverr';
+  if (n.includes('kaggle')) return 'Kaggle';
+  if (n.includes('google')) return 'Google Scholar';
+  if (n.includes('linkedin')) return 'LinkedIn';
+  return name || 'Provider';
+};
+
+export const getProviderTooltipCopy = (provider?: string): string => {
+  const n = (provider || '').toLowerCase();
+  if (n.includes('github')) return 'Signals from open-source activity: commits, repos, stars, and collaboration patterns.';
+  if (n.includes('gitlab')) return 'Signals from GitLab projects and contributions that indicate delivery and collaboration.';
+  if (n.includes('stack')) return 'Signals from Q&A participation such as answers, reputation, and accepted solutions.';
+  if (n.includes('credly')) return 'Verified badges and certifications that validate specific skills or achievements.';
+  if (n.includes('fiverr')) return 'Client reviews, job history, and delivery consistency across freelance engagements.';
+  if (n.includes('kaggle')) return 'Competition results, notebooks, and dataset contributions that reflect analytical skill.';
+  if (n.includes('google')) return 'Publications, citations, and scholarly presence indicating research impact.';
+  if (n.includes('linkedin')) return 'Professional history, endorsements, and network signals indicating credibility.';
+  return 'Signals contributed from this provider relevant to capability and trust.';
+};
+
+export const getCategoryTooltipCopy = (category: string): string => {
+  const name = (category || '').toLowerCase();
+  if (/network|connection|collab|peer/.test(name)) return 'Signals from the developer’s professional connections, collaborations, and peer recognition.';
+  if (/project|repo|portfolio|work/.test(name)) return 'Signals from a developer’s visible projects, repositories, or published work that indicate breadth and quality of output.';
+  if (/skill|cert|assessment|endorse/.test(name)) return 'Signals tied to specific technical abilities, such as verified certifications, assessments, or endorsements.';
+  if (/experience|tenure|history/.test(name)) return 'Signals of tenure and diversity of professional or project involvement over time.';
+  if (/activity|recency|frequency|engage/.test(name)) return 'Signals of recency and frequency of developer engagement in professional or technical platforms.';
+  if (/sanction|legal|criminal|regulatory|ofac|fbi|watchlist/.test(name)) return 'Signals of legal, criminal, or regulatory red flags linked to an identity.';
+  if (/identity|authentic|consisten/.test(name)) return 'Signals that indicate whether a developer’s identity is genuine and consistent across platforms.';
+  if (/reputation|review|rating|feedback|perceive|peer/.test(name)) return 'Signals of how peers, clients, and communities perceive the developer.';
+  if (/geo|jurisdiction|country|region|ip|location/.test(name)) return 'Signals tied to a developer’s geographic or jurisdictional context.';
+  if (/security|cyber/.test(name)) return 'Signals of security posture and potential cyber-risk exposure.';
+  if (/risk/.test(name)) return 'KYD Risk surfaces signals of authenticity, reputation, and environmental telemetry that indicate potential risks in engaging with a developer.';
+  if (/tech|technical/.test(name)) return 'KYD Technical surfaces signals from a developer’s portfolio, skills, experience, activity, and network to indicate the likelihood of technical capability.';
+  return 'Share of overall contribution by category based on applied weights.';
+};
+
+export const barColor = (pct: number) => (pct >= 60 ? '#19C37D' : pct >= 40 ? '#ffbb54' : '#EC6662');
+
+