kyd-shared-badge 0.3.35 → 0.3.37

package/src/SharedBadgeDisplay.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { FiAlertTriangle } from 'react-icons/fi';
-import { PublicBadgeData, GraphInsightsPayload, ScoringSummary, BusinessRule, TopBusinessRule } from './types';
+import { PublicBadgeData, GraphInsightsPayload, ScoringSummary, BusinessRule, TopBusinessRule, EnterpriseMatch } from './types';
 // import ShareButton from './components/ShareButton';
 import ReportHeader from './components/ReportHeader';
 import EnterpriseCoaching from './components/EnterpriseCoaching';
@@ -25,6 +25,7 @@ import Reveal from './components/Reveal';
 import { formatLocalDateTime } from './utils/date';
 import ChatWidget from './chat/ChatWidget';
 import UseCases from './components/UseCases';
+import { useEffect, useMemo, useState } from 'react';
 type ChatWidgetProps = Partial<{
   api: string;
   title: string;
@@ -52,7 +53,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
    } = badgeData;
 
   const { 
-    report_summary, 
+    // report_summary, 
     // developer_trust_explanation, 
     screening_sources, 
     // industry_considerations 
@@ -74,7 +75,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const categoryTopByGraph = (graphInsights?.categoryTopBusiness) || {};
   const roleTargets: Record<string, number> | undefined = (() => {
     try {
-      const em: any = (assessmentResult as any)?.enterprise_match;
+      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;
@@ -153,23 +154,88 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
   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 */}
+  // Determine Role Fit & Coaching visibility
+  const hasEnterpriseMatch = !!assessmentResult?.enterprise_match;
+  const hasCoaching = !!(assessmentResult?.enterprise_match?.coaching && Array.isArray(assessmentResult.enterprise_match.coaching.items) && assessmentResult.enterprise_match.coaching.items.length > 0);
+  const hasUseCases = !!(assessmentResult?.enterprise_use_cases?.items && assessmentResult.enterprise_use_cases.items.length > 0);
+  const showRoleFit = hasEnterpriseMatch || hasCoaching || hasUseCases;
+
+  // Simple tabs for non-headless view
+  const tabs = useMemo(() => {
+    const arr = [
+      { key: 'overview', label: 'Overview' },
+      ...(showRoleFit ? [{ key: 'role', label: 'Role Fit & Coaching' }] : []),
+      { key: 'technical', label: 'KYD Technical' },
+      { key: 'risk', label: 'KYD Risk' },
+      { key: 'ai', label: 'KYD AI' },
+      { key: 'appendix', label: 'Appendix' }
+    ];
+    return arr;
+  }, [showRoleFit]);
+
+  const [activeTab, setActiveTab] = useState<string>('overview');
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      try {
+        const hash = (typeof window !== 'undefined' && window.location.hash ? window.location.hash.substring(1) : '').toLowerCase();
+        const keys = new Set(tabs.map(t => t.key));
+        if (hash && keys.has(hash)) setActiveTab(hash);
+        // If the hash targets a skills appendix anchor, switch to Appendix
+        if (hash && (hash.startsWith('appendix-skills') || hash.includes('appendix-skills-cat-'))) {
+          setActiveTab('appendix');
+        }
+      } catch {}
+    };
+
+    handleHashChange(); // Run on mount and when tabs change
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('hashchange', handleHashChange);
+      return () => {
+        window.removeEventListener('hashchange', handleHashChange);
+      };
+    }
+  }, [tabs]);
+
+  const computeStickyTop = (): string | number => {
+    if (isHeadless) return 0;
+    const ho = chatProps?.headerOffset;
+    if (ho === 'none') return 0;
+    if (typeof ho === 'number') return ho;
+    if (ho === 'auto') return 'var(--kyd-tabs-offset, var(--kyd-header-offset, 64px))';
+    return 'var(--kyd-tabs-offset, 0px)';
+  };
+
+  const TabNav = () => (
+    <div className={'sticky z-10'} style={{ top: computeStickyTop(), background: 'var(--background)', borderBottom: '1px solid var(--icon-button-secondary)' }}>
+      <div className={`${wrapperMaxWidth} mx-auto px-2 sm:px-0 overflow-x-auto`}>
+        <div className="flex gap-1 sm:gap-2">
+          {tabs.map(t => (
+            <button
+              key={t.key}
+              onClick={() => {
+                setActiveTab(t.key);
+                try { if (typeof window !== 'undefined') window.history.replaceState(null, '', `#${t.key}`); } catch {}
+              }}
+              className={`px-3 sm:px-4 py-2 text-sm rounded-t ${activeTab === t.key ? 'font-semibold' : ''}`}
+              style={{
+                color: 'var(--text-main)',
+                background: activeTab === t.key ? 'var(--content-card-background)' : 'transparent',
+                border: activeTab === t.key ? '1px solid var(--icon-button-secondary)' : '1px solid transparent',
+                borderBottomColor: 'transparent'
+              }}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  const OverviewSection = () => (
+    <div className={`${wrapperMaxWidth} mx-auto mt-6`}>
       <Reveal headless={isHeadless} offsetY={8} durationMs={500}>
         <ReportHeader 
             badgeId={badgeId}
@@ -178,7 +244,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             score={overallFinalPercent || 0}
             isPublic={true}
             badgeImageUrl={badgeData.badgeImageUrl || ''}
-            summary={report_summary}
+            summary={assessmentResult?.report_summary || ''}
             enterpriseMatch={(() => {
               const em = assessmentResult?.enterprise_match;
               if (!em) return null;
@@ -188,405 +254,408 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             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>
+      <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>
+        <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
+          Report Completed: {formatLocalDateTime(updatedAt)}
+        </div>
+      </div>
+    </div>
+  );
 
-                {/* 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;
+  const RoleFitSection = () => (
+    !showRoleFit ? null : (
+      <div className={`${wrapperMaxWidth} mx-auto`}>
+        <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+          <div className="space-y-10">
+            {hasEnterpriseMatch && (
+              <div>
+                <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Role Alignment</Reveal>
+                <Reveal headless={isHeadless}>
+                  <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
+                    {(() => {
+                      const em = assessmentResult?.enterprise_match;
+                      if (!em) return null;
+                      const role = em.role || {};
                       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 className={'font-medium mb-1'} style={{ color: 'var(--text-main)' }}>{em.label} {role?.name ? `— ${role.name}` : ''}</div>
+                          {em.description ? <div>{em.description}</div> : null}
                         </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>
+            )}
+            {hasCoaching && (() => {
+              const em = assessmentResult?.enterprise_match;
+              const coaching = em?.coaching;
+              if (!coaching || !(Array.isArray(coaching.items) && coaching.items.length)) return null;
+              return (
+                <div>
+                  <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Role Alignment Coaching</Reveal>
+                  <Reveal headless={isHeadless}>
+                    <EnterpriseCoaching roleName={em?.role?.name} matchLabel={em?.label} coaching={coaching} />
+                  </Reveal>
                 </div>
-              </Reveal>
-              
-            </div>
+              );
+            })()}
+            {hasUseCases && (
+              <div>
+                <UseCases useCases={assessmentResult?.enterprise_use_cases} headless={isHeadless} badgeId={badgeId} />
+              </div>
+            )}
           </div>
+        </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} />
+  const TechnicalSection = () => (
+    <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 Technical</Reveal>
+        <Reveal headless={isHeadless}>
+          <div className="">
+            <GraphInsights
+              graphInsights={graphInsights}
+              categories={genreMapping?.['Technical'] as string[]}
+              genre={'Technical'}
+              scoringSummary={scoringSummary}
+              headless={isHeadless}
+            />
+          </div>
+        </Reveal>
+        <div className="grid grid-cols-1 lg:grid-cols-12 w-full gap-8 items-stretch py-8">
+          <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>
+          <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>
-              </Reveal>
+                      ))}
+                    </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>
+  );
 
-            {/* 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>
+  const RiskSection = () => (
+    <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={'h3'} offsetY={8} className={'text-2xl font-bold'} style={{ color: 'var(--text-main)' }}>KYD Risk</Reveal>
+        <Reveal headless={isHeadless}>
+          <div className="mt-4">
+            <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 kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)' }}>
+          <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>
+          <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>
-              </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>
+          </Reveal>
+        </div>
+        {badgeData.optOutScreening ? (
+          <Reveal headless={isHeadless} className={'p-4 rounded-lg border mt-6'} 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-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>
-                          <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>
+                    <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>
-                      )}
-                    </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>
                   </div>
-                  <SkillsAppendixTable skillsAll={skillsAll} />
-                </div>
+                )}
               </Reveal>
+            );
+          })()
+        )}
+      </div>
+    </div>
+  );
 
-              {/* 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>
-              )}
+  const AiSection = () => (
+    <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)' }}>
+        {(() => {
+          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>
+    </div>
+  );
 
+  const AppendixSection = () => (
+    <div className={`${wrapperMaxWidth} mx-auto`}>
+      <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+        <div className="space-y-10">
+          <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>
-
-          <Reveal headless={isHeadless}>
-            <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
-                Report Completed: {formatLocalDateTime(updatedAt)}
+          {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"
+                sources={graphInsights.business_rules_all}
+                searchedAt={updatedAt}
+                developerName={developerName || 'this developer'}
+                genreMapping={genreMapping as Record<string, string[]>}
+                headless={isHeadless}
+              />
             </div>
-          </Reveal>
+          )}
+          {!badgeData.optOutScreening && screening_sources && (
+            <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>
+          )}
+          <div>
+            <ConnectedPlatforms accounts={connected} />
+          </div>
         </div>
       </div>
       <Reveal headless={isHeadless}>
@@ -596,11 +665,50 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
           </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>
+  );
+
+  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>
+            {/* Long-form original layout retained for headless/print */}
+            {OverviewSection()}
+            {showRoleFit ? RoleFitSection() : null}
+            {TechnicalSection()}
+            {RiskSection()}
+            {AiSection()}
+            {AppendixSection()}
+          </>
+        ) : (
+          <>
+            <TabNav />
+            <div className={'px-2 sm:px-0 pb-2'}>
+              {activeTab === 'overview' && OverviewSection()}
+              {activeTab === 'role' && RoleFitSection()}
+              {activeTab === 'technical' && TechnicalSection()}
+              {activeTab === 'risk' && RiskSection()}
+              {activeTab === 'ai' && AiSection()}
+              {activeTab === 'appendix' && AppendixSection()}
+            </div>
+          </>
+        )}
+        {!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>
   );
 };