kyd-shared-badge 0.3.34 → 0.3.36

package/package.json

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

package/src/PrintableBadgeDisplay.tsx

@@ -0,0 +1,608 @@
+'use client';
+
+import { FiAlertTriangle } from 'react-icons/fi';
+import { PublicBadgeData, GraphInsightsPayload, ScoringSummary, BusinessRule, TopBusinessRule, EnterpriseMatch } from './types';
+// import ShareButton from './components/ShareButton';
+import ReportHeader from './components/ReportHeader';
+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 { yellow, green } from './colors';
+import Skills from './components/Skills';
+import CategoryBars from './components/CategoryBars';
+import SkillsAppendixTable from './components/SkillsAppendixTable';
+import { BusinessRulesProvider } from './components/BusinessRulesContext';
+import Reveal from './components/Reveal';
+import { formatLocalDateTime } from './utils/date';
+import ChatWidget from './chat/ChatWidget';
+import UseCases from './components/UseCases';
+type ChatWidgetProps = Partial<{
+  api: string;
+  title: string;
+  hintText: string;
+  loginPath: string;
+  headerOffset: 'auto' | 'none' | number;
+  developerName: string;
+}>;
+
+// const hexToRgba = (hex: string, alpha: number) => {
+//   const clean = hex.replace('#', '');
+//   const r = parseInt(clean.substring(0, 2), 16);
+//   const g = parseInt(clean.substring(2, 4), 16);
+//   const b = parseInt(clean.substring(4, 6), 16);
+//   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+// };
+
+const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: boolean }) => {
+  const { 
+    badgeId, 
+    developerName, 
+    assessmentResult, 
+    updatedAt, 
+    // connectedAccounts
+   } = badgeData;
+
+  const { 
+    // report_summary, 
+    // developer_trust_explanation, 
+    screening_sources, 
+    // industry_considerations 
+  } = assessmentResult;
+
+  const graphInsights: GraphInsightsPayload = (assessmentResult)?.graph_insights || {} as GraphInsightsPayload;
+  const scoringSummary: ScoringSummary = (assessmentResult)?.scoring_summary || {} as ScoringSummary;
+  
+
+  const wrapperMaxWidth = 'max-w-5xl';
+  const isHeadless = !!headless;
+
+  // Overall and genre scores
+  const overallFinalPercent = assessmentResult?.final_percent || 0;
+
+  // Build category display grouped by genres from scoring_summary.config.genre_mapping
+  const genreMapping = (scoringSummary?.config?.genre_mapping) || {};
+  const categoryScores = (scoringSummary?.category_scores) || {};
+  const categoryTopByGraph = (graphInsights?.categoryTopBusiness) || {};
+  const roleTargets: Record<string, number> | undefined = (() => {
+    try {
+      const em: EnterpriseMatch | undefined = assessmentResult?.enterprise_match;
+      return (em && em.role && em.role.categoryTargets) ? (em.role.categoryTargets as Record<string, number>) : undefined;
+    } catch {
+      return undefined;
+    }
+  })();
+
+  const topBusinessForGenre = (genre: string) => {
+    const cats: string[] = (genreMapping)?.[genre] || [];
+    const items = [];
+    for (const c of cats) {
+      const arr = (categoryTopByGraph)?.[c] || [];
+      for (const it of arr) items.push(it);
+    }
+    items.sort((a, b) => Number(b?.weight || 0) - Number(a?.weight || 0));
+    return items.slice(0, 3) as TopBusinessRule[];
+  };
+
+  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}>
+    <div className={`${wrapperMaxWidth} mx-auto`}>
+      {isHeadless && (
+        <style>
+          {`@page { margin: 0; }
+            html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
+            #__next, main { margin: 0 !important; padding: 0 !important; }
+            @media print {
+              .kyd-break-before { break-before: page; page-break-before: always; }
+              .kyd-break-after  { break-after: page;  page-break-after: always; }
+              .kyd-avoid-break  { break-inside: avoid; page-break-inside: avoid; }
+              .kyd-keep-with-next { break-after: avoid; page-break-after: avoid; }
+            }`}
+        </style>
+      )}
+      {/* Share controls removed; app-level pages render their own actions */}
+      <Reveal headless={isHeadless} offsetY={8} durationMs={500}>
+        <ReportHeader 
+            badgeId={badgeId}
+            developerName={badgeData.developerName}
+            updatedAt={updatedAt}
+            score={overallFinalPercent || 0}
+            isPublic={true}
+            badgeImageUrl={badgeData.badgeImageUrl || ''}
+            summary={assessmentResult?.report_summary || ''}
+            enterpriseMatch={(() => {
+              const em = assessmentResult?.enterprise_match;
+              if (!em) return null;
+              const role = em.role || {};
+              return { label: em.label, description: em.description, roleName: role.name };
+            })()}
+            countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
+        />
+      </Reveal>
+      {/* Coaching / Evidence under header when present */}
+      {(() => {
+        const em = assessmentResult.enterprise_match;
+        const coaching = em?.coaching;
+        if (!coaching || !(Array.isArray(coaching.items) && coaching.items.length)) return null;
+        return (
+          <Reveal headless={isHeadless}>
+            <EnterpriseCoaching roleName={em?.role?.name} matchLabel={em?.label} coaching={coaching} />
+          </Reveal>
+        );
+      })()}
+      <div
+        className={isHeadless ? 'p-6 sm:p-8 mt-2 border' : 'rounded-xl shadow-xl p-6 sm:p-8 mt-8 border'}
+        style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
+      >
+        <div className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
+          <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>
+            </Reveal>
+          </div>
+
+          {/* Enterprise Use Cases (directly under the three summary cards) */}
+          {assessmentResult?.enterprise_use_cases?.items && assessmentResult.enterprise_use_cases.items.length > 0 && (
+            <UseCases useCases={assessmentResult.enterprise_use_cases} headless={isHeadless} badgeId={badgeId} />
+          )}
+
+          {/* Technical Scores */}
+          <div className="mt-8" >
+            <div key={'Technical'} className='pt-8 space-y-8 kyd-avoid-break' style={{ 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 Technical</Reveal>
+              {/* technical graph insights */}
+              <Reveal headless={isHeadless}>
+                <div className="">
+                  <GraphInsights
+                    graphInsights={graphInsights}
+                    categories={genreMapping?.['Technical'] as string[]}
+                    genre={'Technical'}
+                    scoringSummary={scoringSummary}
+                    headless={isHeadless}
+                  />
+                </div>
+              </Reveal>
+
+              {/* category bars and contributing factors */}
+              <div className="grid grid-cols-1 lg:grid-cols-12 w-full gap-8 items-stretch py-8 border-t" style={{ borderColor: 'var(--icon-button-secondary)'}}>
+                
+                {/* Left: Bars */}
+                <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
+                  <CategoryBars
+                    title={'Technical Category Contributions'}
+                    categories={genreMapping?.['Technical'] as string[]}
+                    categoryScores={categoryScores}
+                    barColor={barColor}
+                    getCategoryTooltipCopy={getCategoryTooltipCopy}
+                    barHeight={16}
+                    categoryTargets={roleTargets}
+                  />
+                </Reveal>
+
+                {/* 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>
+                </Reveal>
+              </div>
+
+              <Reveal headless={isHeadless}>
+                <div className="pt-8 border-t kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)'}}>
+                  <h3 className={'text-xl font-bold mb-3 kyd-keep-with-next'} style={{ color: 'var(--text-main)' }}>KYD Technical - Skills Insights</h3>
+                  <div className={'prose prose-sm max-w-none mb-6 space-y-4'} style={{ color: 'var(--text-secondary)' }}>
+                    <Skills skillsMatrix={skillsMatrix} skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} />
+                  </div>
+                </div>
+              </Reveal>
+              
+            </div>
+          </div>
+
+
+
+          <div className="pt-8 space-y-8">
+            <Reveal headless={isHeadless} as={'h3'} offsetY={8} className={`text-2xl font-bold ${isHeadless ? 'kyd-break-before' : ''}`} style={{ color: 'var(--text-main)' }}>KYD Risk - Overview</Reveal>
+            
+            {/* Risk Graph Insights and Category Bars */}
+            <Reveal headless={isHeadless}>
+              <div className="">
+                <GraphInsights
+                  graphInsights={graphInsights}
+                  categories={genreMapping?.['Risk'] as string[]}
+                  genre={'Risk'}
+                  scoringSummary={scoringSummary}
+                  headless={isHeadless}
+                />
+              </div>
+            </Reveal>
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-stretch py-8 border-y kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)' }}>
+              {/* Left: Bars */}
+              <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
+                <CategoryBars
+                  title={'KYD Risk - Category Insights'}
+                  categories={genreMapping?.['Risk'] as string[]}
+                  categoryScores={categoryScores}
+                  barColor={barColor}
+                  getCategoryTooltipCopy={getCategoryTooltipCopy}
+                  barHeight={16}
+                  categoryTargets={roleTargets}
+                />
+              </Reveal>
+              {/* 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>
+              </Reveal>
+            </div>
+
+            {/* cyber risk display */}
+            {badgeData.optOutScreening ? (
+              <Reveal headless={isHeadless} className={'p-4 rounded-lg border'} style={{ backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' }}>
+                  <div className="flex items-start">
+                      <span className="h-5 w-5 mr-3 mt-0.5 flex-shrink-0" style={{ color: yellow }}>
+                          <FiAlertTriangle size={20} />
+                      </span>
+                      <div>
+                          <h4 className={'font-bold'} style={{ color: 'var(--text-main)' }}>User Opted Out of Screening</h4>
+                          <p className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>
+                              The user chose not to participate in the automated sanctions and risk screening process. The risk score reflects this decision and is for informational purposes only.
+                          </p>
+                      </div>
+                  </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-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}>
+                  <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
+                </Reveal>
+              </>
+            )}
+
+          </div>
+
+          {/* Connected Platforms */}
+          <Reveal headless={isHeadless}>
+            <ConnectedPlatforms accounts={connected} />
+          </Reveal>
+
+        
+          <div className="pt-8">
+            <h3 className={`text-2xl font-bold mb-4 ${isHeadless ? 'kyd-break-before' : ''}`} style={{ color: 'var(--text-main)' }}>Appendix</h3>
+            <div className="space-y-8">
+
+              {/* 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>
+              </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>
+
+          <Reveal headless={isHeadless}>
+            <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
+                Report Completed: {formatLocalDateTime(updatedAt)}
+            </div>
+          </Reveal>
+        </div>
+      </div>
+      <Reveal headless={isHeadless}>
+        <footer className={'mt-12 pt-6 border-t'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
+          <p className={'text-center text-xs max-w-4xl mx-auto'} style={{ color: 'var(--text-secondary)' }}>
+            © 2025 Know Your Developer, LLC. All rights reserved. KYD Self-Check™, and associated marks are trademarks of Know Your Developer, LLC. This document is confidential, proprietary, and intended solely for the individual or entity to whom it is addressed. Unauthorized use, disclosure, copying, or distribution of this document or any of its contents is strictly prohibited and may be unlawful. Know Your Developer, LLC assumes no responsibility or liability for any errors or omissions contained herein. Report validity subject to the terms and conditions stated on the official Know Your Developer website located at https://knowyourdeveloper.ai.
+          </p>
+        </footer>
+      </Reveal>
+      {/* Floating chat widget */}
+      {!headless && (
+        <ChatWidget api={chatProps?.api || '/api/chat'} badgeId={badgeId} title={chatProps?.title} hintText={chatProps?.hintText} loginPath={chatProps?.loginPath} headerOffset={chatProps?.headerOffset} developerName={developerName} />
+      )}
+    </div>
+    </BusinessRulesProvider>
+  );
+};
+
+export default SharedBadgeDisplay;