kyd-shared-badge 0.3.86 → 0.3.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.86",
+  "version": "0.3.88",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -21,6 +21,7 @@
     "@aws-sdk/lib-dynamodb": "^3.893.0",
     "@chatscope/chat-ui-kit-react": "^2.1.1",
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
+    "@knowyourdeveloper/react-bubble-chart": "^1.0.0",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "ai": "5.0.47",

package/src/PrintableBadgeDisplay.tsx

@@ -17,7 +17,8 @@ import GaugeCard from './components/GaugeCard';
 import RiskCard from './components/RiskCard';
 
 import { yellow, green } from './colors';
-import Skills from './components/Skills';
+import SkillsValidation from './components/SkillsValidation';
+import SkillsBubble from './components/SkillsBubble';
 import CategoryBars from './components/CategoryBars';
 import SkillsAppendixTable from './components/SkillsAppendixTable';
 import { BusinessRulesProvider } from './components/BusinessRulesContext';
@@ -212,7 +213,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                 <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} />
+                    <SkillsValidation skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} />
                   </div>
                 </div>
               </Reveal>

package/src/SharedBadgeDisplay.tsx

@@ -15,7 +15,8 @@ import CodeIcon from './components/icons/code';
 import RiskIcon from './components/icons/risk';
 
 import { yellow } from './colors';
-import Skills from './components/Skills';
+import SkillsBubble from './components/SkillsBubble';
+import SkillsValidation from './components/SkillsValidation';
 import CategoryBars from './components/CategoryBars';
 import SkillsAppendixTable from './components/SkillsAppendixTable';
 import { BusinessRulesProvider } from './components/BusinessRulesContext';
@@ -24,6 +25,8 @@ import { formatLocalDateTime } from './utils/date';
 import ChatWidget from './chat/ChatWidget';
 import UseCases from './components/UseCases';
 import SummaryCards from './components/SummaryCards';
+import GaugeCard from './components/GaugeCard';
+import RiskCard from './components/RiskCard';
 import TopContributingFactors from './components/TopContributingFactors';
 import AiUsageBody from './components/AiUsageBody';
 import SanctionsMatches from './components/SanctionsMatches';
@@ -204,28 +207,93 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const OverviewSection = () => (
     <div className={`${wrapperMaxWidth} mx-auto mt-6`}>
       <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) || []}
-            accountAuthenticity={assessmentResult?.account_authenticity}
-        />
+        <div className={'rounded-xl shadow-xl p-6 sm:p-8 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+          {/* Quadrant layout */}
+          <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
+            {/* Top-left: Name, countries, badge image handled by ReportHeader */}
+            <div>
+              <ReportHeader 
+                badgeId={badgeId}
+                developerName={badgeData.developerName}
+                updatedAt={updatedAt}
+                score={overallFinalPercent || 0}
+                isPublic={true}
+                badgeImageUrl={badgeData.badgeImageUrl || ''}
+                summary={undefined}
+                enterpriseMatch={null}
+                countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
+                accountAuthenticity={assessmentResult?.account_authenticity}
+                companyName={badgeData.companyName}
+              />
+            </div>
+            {/* Top-right: Role match section */}
+            <div className={'rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
+              <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Role Alignment</div>
+              {(() => {
+                const em = assessmentResult?.enterprise_match;
+                if (!em) return <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>No role match available.</div>;
+                const role = em.role || {};
+                return (
+                  <div className={'space-y-2'}>
+                    <div className={'flex items-center gap-2'}>
+                      <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{role?.name || 'Role'}</div>
+                      <span className={'px-2 py-0.5 rounded text-xs font-semibold'} style={{ backgroundColor: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>{em.label}</span>
+                    </div>
+                    {em.description ? (
+                      <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{em.description}</div>
+                    ) : null}
+                  </div>
+                );
+              })()}
+            </div>
+
+            {/* Bottom-left: Technical score */}
+            <div>
+              {(() => {
+                const uiTech = graphInsights?.uiSummary?.technical || {};
+                const techPct = Math.round(Number(uiTech?.percent ?? 0));
+                const techLabel = uiTech?.label || 'EVIDENCE';
+                return (
+                  <GaugeCard
+                    title={'KYD Technical'}
+                    description={'Composite of technical evidence; more right indicates stronger capability'}
+                    percent={techPct}
+                    label={techLabel}
+                    topMovers={[]}
+                  />
+                );
+              })()}
+            </div>
+            {/* Bottom-right: Risk score */}
+            <div>
+              {(() => {
+                const uiRisk = graphInsights?.uiSummary?.risk || {};
+                const riskPctGood = Math.round(Number(uiRisk?.percent_good ?? 0));
+                const riskLabel = uiRisk?.label || 'RISK';
+                return (
+                  <RiskCard
+                    title={'KYD Risk'}
+                    description={'Lower bar height indicates lower risk exposure'}
+                    percentGood={riskPctGood}
+                    label={riskLabel}
+                    topMovers={[]}
+                  />
+                );
+              })()}
+            </div>
+          </div>
+        </div>
       </Reveal>
+
+      {/* Full-width Skills bubble chart below quadrant */}
       <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>
-        <SummaryCards graphInsights={graphInsights} assessmentResult={assessmentResult} topBusinessForGenre={topBusinessForGenre} />
-        <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
+        <Reveal headless={isHeadless}>
+          <div className={'kyd-avoid-break'}>
+            <h4 className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills Footprint</h4>
+            <SkillsBubble skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} />
+          </div>
+        </Reveal>
+        <div className={'pt-6 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
           Report Completed: {formatLocalDateTime(updatedAt)}
         </div>
       </div>
@@ -392,7 +460,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
           <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} />
+              <SkillsValidation skillsCategoryRadar={graphInsights?.skillsCategoryRadar} headless={isHeadless} />
             </div>
           </div>
         </Reveal>

package/src/components/ReportHeader.tsx

@@ -49,12 +49,6 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
   const tint = hexToRgba(pickTint(score || 0), 0.06);
   const matchLabel = enterpriseMatch?.label;
   
-  const formattedDate = updatedAt ? formatLocalDate(updatedAt, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  }) : 'N/A';
-
   return (
     <div
       className={'mb-8 p-6 rounded-xl shadow-lg border'}
@@ -79,33 +73,15 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
           </div>
         );
       })()}
-      <div className="flex flex-col md:flex-row items-center md:items-stretch gap-6">
-        {/* Left Half: Badge Image with robust centered overlay */}
-        <div className="w-full md:w-1/3 flex items-center justify-center self-stretch">
-          <div className="relative w-full max-w-xs select-none">
-            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={400} height={400} priority className='w-full h-auto pointer-events-none p-10'/>
-            {/* Centered overlay slightly lower on Y axis, responsive and readable */}
-            <div className="pointer-events-none absolute left-1/2 top-[66%] -translate-x-1/2 -translate-y-1/2">
-              <div className="font-extrabold text-black text-3xl " >
-                {Math.round(score || 0)}%
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Right Half: Title, Candidate, Details and Summary section */}
-        <div className="w-full md:w-2/3">
-          <div className={'space-y-4'}>
+      <div className="flex flex-col gap-6">
+        {/* Info section: Title, Candidate, Details and Summary */}
+        <div className="w-full">
+          <div className='space-y-2'>
             <span className='flex gap-2 w-full items-end text-start justify-start'>
               <h2 className={'text-xl font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate Report:</h2>
               <div className={'text-xl font-bold'} style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</div>
             </span>
-            <div className={'text-sm space-y-2'}>
-              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Developer:</span> <span style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</span></p>
-              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Requested By:</span> <span style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</span></p>
-              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Organization:</span> <span style={{ color: 'var(--text-main)' }}>{companyName || 'Unaffiliated'}</span></p>
-              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Date Generated:</span> <span style={{ color: 'var(--text-main)' }}>{formattedDate}</span></p>
-              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Report ID:</span> <span style={{ color: 'var(--text-main)' }}>{badgeId || 'N/A'}</span></p>
+            <div className={'text-sm'}>
               {Array.isArray(countries) && countries.length > 0 && (
                 (() => {
                   const countryNames = countries
@@ -155,6 +131,18 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
             )}
           </div>
         </div>
+
+        {/* Badge Image with robust centered overlay */}
+        <div className="w-full flex items-center justify-center self-stretch">
+          <div className="relative w-full max-w-xs select-none">
+            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={400} height={400} priority className='w-full h-auto pointer-events-none p-10'/>
+            <div className="pointer-events-none absolute left-1/2 top-[66%] -translate-x-1/2 -translate-y-1/2">
+              <div className="font-extrabold text-black text-3xl ">
+                {Math.round(score || 0)}%
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

package/src/components/Skills.tsx

@@ -11,6 +11,9 @@ import {
   YAxis,
   CartesianGrid,
   Tooltip,
+  ScatterChart,
+  Scatter,
+  ZAxis,
 } from 'recharts';
 
 
@@ -265,69 +268,31 @@ const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix
               }}
             >
               {(() => {
-                const measured = containerWidth || (containerRef.current?.clientWidth || 0);
-                const parentWidth = containerRef.current?.parentElement?.clientWidth || measured;
-                const width = Math.max(0, Math.min(measured, parentWidth));
-                const height = 300;
-                const innerWidth = Math.max(0, width);
-                const innerHeight = Math.max(0, height);
-                const packed = packBubbles(combinedBubbleData, innerWidth, innerHeight, headless ? 10 : 6);
+                const data = combinedBubbleData.map((d, idx) => ({ x: (idx % 4) + 1, y: Math.floor(idx / 4) + 1, value: d.value, label: d.label }));
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const BubbleTooltip = ({ active, payload }: any) => {
+                  if (!active || !payload || !payload.length) return null;
+                  const p = payload[0]?.payload;
+                  return (
+                    <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 }}>{p?.label}</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Score: {p?.value}</div>
+                    </div>
+                  );
+                };
                 return (
-                  <svg width={'100%'} height={height} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="xMidYMid meet">
-                    <g transform={headless ? 'translate(0, 0)' : 'translate(-25, -20)'}>
-                      {packed.map((b, idx) => {
-                        const clipId = `bubble-clip-${idx}`;
-                        const canShowText = b.r >= 14;
-                        const labelSpec = canShowText ? buildLabelLines(b.label, b.r) : { lines: [], fontSize: 10 };
-                        const lineGap = Math.max(2, Math.floor(labelSpec.fontSize * 0.2));
-                        const totalTextHeight = labelSpec.lines.length * labelSpec.fontSize + Math.max(0, (labelSpec.lines.length - 1) * lineGap);
-                        const startY = -Math.floor(totalTextHeight / 2) + Math.floor(labelSpec.fontSize * 0.85);
-                        return (
-                          <g
-                            key={idx}
-                            transform={`translate(${b.x},${b.y})`}
-                            onMouseEnter={(e) => {
-                              const rect = containerRef.current?.getBoundingClientRect();
-                              if (!rect) return;
-                              setFootprintChartTooltip({
-                                visible: true,
-                                x: e.clientX - rect.left + 12,
-                                y: e.clientY - rect.top + 12,
-                                title: b.label,
-                                body: `Score: ${b.value}`,
-                              });
-                            }}
-                            onMouseMove={(e) => {
-                              if (!footprintChartTooltip || !containerRef.current) return;
-                              const rect = containerRef.current.getBoundingClientRect();
-                              setFootprintChartTooltip({ ...footprintChartTooltip, x: e.clientX - rect.left + 12, y: e.clientY - rect.top + 12 });
-                            }}
-                            onMouseLeave={() => setFootprintChartTooltip(null)}
-                          >
-                            <defs>
-                              <clipPath id={clipId}>
-                                <circle r={b.r} />
-                              </clipPath>
-                            </defs>
-                            <circle r={b.r} fill={'var(--bubble-foreground)'} stroke={'var(--icon-button-secondary)'} />
-                            <title>{`${b.label}: ${b.value}`}</title>
-                            {canShowText && labelSpec.lines.length > 0 ? (
-                              <g clipPath={`url(#${clipId})`} style={{ pointerEvents: 'none' }}>
-                                {labelSpec.lines.map((line, li) => (
-                                  <text key={li} y={startY + li * (labelSpec.fontSize + lineGap)} fontSize={labelSpec.fontSize} textAnchor="middle" fill={'var(--bubble-background)'}>
-                                    {line}
-                                  </text>
-                                ))}
-                              </g>
-                            ) : null}
-                          </g>
-                        );
-                      })}
-                    </g>
-                  </svg>
+                  <ResponsiveContainer>
+                    <ScatterChart margin={{ top: 8, right: 8, bottom: 8, left: 8 }}>
+                      <CartesianGrid strokeDasharray="3 3" stroke={'var(--icon-button-secondary)'} />
+                      <XAxis type="number" dataKey="x" tick={false} axisLine={false} domain={[0, 5]} />
+                      <YAxis type="number" dataKey="y" tick={false} axisLine={false} domain={[0, Math.ceil(data.length / 4) + 1]} />
+                      <ZAxis dataKey="value" range={[80, 360]} />
+                      <Tooltip content={<BubbleTooltip />} cursor={{ stroke: 'var(--icon-button-secondary)' }} />
+                      <Scatter data={data} fill={'var(--bubble-foreground)'} />
+                    </ScatterChart>
+                  </ResponsiveContainer>
                 );
               })()}
-              {!headless && <TooltipBox state={footprintChartTooltip} />}
             </div>
             {/* Legend */}
             <div className={'mt-3'}>

package/src/components/SkillsBubble.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import React, { useMemo, useRef, useState, useEffect } from 'react';
+import BubbleChart from '@knowyourdeveloper/react-bubble-chart';
+
+type SkillsRadarPoint = {
+  axis: string;
+  observed?: number;
+  self_reported?: number;
+  certified?: number;
+  experience?: number; // 0-100 saturation driver
+};
+
+type HoverTooltipState = {
+  visible: boolean;
+  x: number;
+  y: number;
+  title: string;
+  body?: string;
+} | null;
+
+const TooltipBox = ({ state }: { state: HoverTooltipState }) => {
+  if (!state || !state.visible) return null;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: state.x,
+        top: state.y,
+        pointerEvents: 'none',
+        background: 'var(--content-card-background)',
+        border: '1px solid var(--icon-button-secondary)',
+        color: 'var(--text-main)',
+        padding: 10,
+        borderRadius: 6,
+        minWidth: 250,
+        maxWidth: 320,
+        zIndex: 10,
+      }}
+    >
+      <div style={{ fontWeight: 600 }}>{state.title}</div>
+      {state.body ? (
+        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{state.body}</div>
+      ) : null}
+    </div>
+  );
+};
+
+export default function SkillsBubble({ skillsCategoryRadar, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; headless?: boolean }) {
+  const hasRadar = !!(skillsCategoryRadar && skillsCategoryRadar.length > 0);
+  const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 24);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const legendRef = useRef<HTMLDivElement>(null);
+  const [legendTooltip, setLegendTooltip] = useState<HoverTooltipState>(null);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const id = window.setTimeout(() => {
+        try { window.dispatchEvent(new Event('resize')); } catch {}
+      }, 0);
+      return () => window.clearTimeout(id);
+    }
+  }, []);
+
+  // ratio drives size: average of observed/self_reported/certified
+  const bubbles = useMemo(() => {
+    const seriesAvg = (d: SkillsRadarPoint): number => {
+      const vals = [Number(d.observed || 0), Number(d.self_reported || 0), Number(d.certified || 0)];
+      const nonZero = vals.filter((v) => v > 0);
+      const base = (nonZero.length > 0 ? nonZero : vals);
+      return Math.max(0, Math.min(100, Math.round(base.reduce((a, b) => a + b, 0) / (base.length || 1))));
+    };
+
+    const maxValue = Math.max(1, ...skillsRadarLimited.map(seriesAvg));
+
+    return skillsRadarLimited.map((d) => {
+      const value = seriesAvg(d);
+      const experience = Math.max(0, Math.min(100, Number(d.experience || 0)));
+      const size = Math.max(2, Math.round((value / maxValue) * 100)); // 2..100
+      // map experience to saturation in HSL; keep hue constant for brand-neutral look
+      const saturation = Math.max(20, Math.min(100, experience));
+      const color = `hsl(210 ${saturation}% 45%)`;
+      return {
+        label: d.axis,
+        value: size,
+        color,
+        tooltip: `${d.axis}\nRatio: ${value}\nExperience: ${experience}`,
+        data: { ratio: value, experience }
+      };
+    });
+  }, [skillsRadarLimited]);
+
+  const percentLegend = useMemo(() => {
+    const total = bubbles.reduce((sum, b) => sum + (b.data?.ratio || 0), 0);
+    return bubbles
+      .map((b) => ({ label: b.label, percent: total > 0 ? Math.round(((b.data?.ratio || 0) / total) * 100) : 0, experience: b.data?.experience || 0 }))
+      .sort((a, b) => b.percent - a.percent);
+  }, [bubbles]);
+
+  if (!hasRadar) return null;
+
+  return (
+    <div className={'kyd-avoid-break'}>
+      <div ref={containerRef} style={{ width: '100%', height: 340 }}>
+        <BubbleChart
+          width={'100%'}
+          height={'100%'}
+          graph={{ zoom: 1 }}
+          showLegend={false}
+          data={bubbles}
+          legend={false}
+          valueFont={{ family: 'system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, sans-serif', size: 11, color: 'var(--text-main)' }}
+          labelFont={{ family: 'system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, sans-serif', size: 12, color: 'var(--text-main)' }}
+          bubbleClickFun={(_evt: unknown, b: { label?: string }) => {
+            try {
+              if (typeof window !== 'undefined') {
+                const anchor = `#appendix-skills-cat-${encodeURIComponent(String(b?.label || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''))}`;
+                const url = `#appendix${anchor}`;
+                window.location.hash = url;
+              }
+            } catch {}
+          }}
+          tooltip
+        />
+      </div>
+      <div className={'mt-3'}>
+        <div ref={legendRef} className={'kyd-avoid-break'} style={{ position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1">
+            {percentLegend.map((item, idx) => (
+              <button
+                key={idx}
+                className="flex items-center gap-2 text-xs text-left hover:underline underline-offset-2"
+                style={{ color: 'var(--text-secondary)', background: 'transparent' }}
+                onClick={() => {
+                  try {
+                    if (typeof window !== 'undefined') {
+                      const anchor = `#appendix-skills-cat-${encodeURIComponent(item.label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''))}`;
+                      const url = `#appendix${anchor}`;
+                      window.location.hash = url;
+                    }
+                  } catch {}
+                }}
+                onMouseEnter={(e) => {
+                  const rect = legendRef.current?.getBoundingClientRect();
+                  if (!rect) return;
+                  const x = e.clientX - rect.left + 12;
+                  const y = e.clientY - rect.top + 12;
+                  setLegendTooltip({ visible: true, x, y, title: item.label, body: `${item.label} • ${item.percent}% of ratio • Experience ${item.experience}` });
+                }}
+                onMouseMove={(e) => {
+                  if (!legendTooltip || !legendRef.current) return;
+                  const rect = legendRef.current.getBoundingClientRect();
+                  setLegendTooltip({ ...legendTooltip, x: e.clientX - rect.left + 12, y: e.clientY - rect.top + 12 });
+                }}
+                onMouseLeave={() => setLegendTooltip(null)}
+              >
+                <span className={'inline-block h-2 w-2 rounded-full'} style={{ backgroundColor: `hsl(210 ${Math.max(20, Math.min(100, item.experience))}% 45%)`, flexShrink: 0 }} />
+                <span className="truncate">{item.label}</span>
+                <span className="ml-auto opacity-80">{item.percent}%</span>
+              </button>
+            ))}
+          </div>
+          {!headless && <TooltipBox state={legendTooltip} />}
+          {/* Legends */}
+          <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
+            <div className="flex items-center gap-2">
+              <span className="inline-block h-3 w-3 rounded-full" style={{ background: 'hsl(210 80% 45%)' }} />
+              <span>Bubble size: relative ratio of observed/self-reported/certified</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="inline-block h-3 w-3 rounded-full" style={{ background: 'hsl(210 20% 45%)' }} />
+              <span>Color saturation: experience (darker = more experienced)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+

package/src/components/SkillsValidation.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
+
+type SkillsRadarPoint = {
+  axis: string;
+  observed?: number;
+  self_reported?: number;
+  certified?: number;
+};
+
+export default function SkillsValidation({ skillsCategoryRadar, headless }: { skillsCategoryRadar?: SkillsRadarPoint[]; headless?: boolean }) {
+  const skillsRadarLimited = (skillsCategoryRadar || []).slice(0, 8);
+
+  return (
+    <div className={'rounded-lg p-4 border kyd-avoid-break'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
+      <h4 className={'font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills by Validation Type</h4>
+      <p className={'text-sm mb-4'} style={{ color: 'var(--text-secondary)' }}>The bar chart shows how each skill is supported by self-attested claims, observed practice, or certified evidence.</p>
+      <div style={{ height: 360 }}>
+        <ResponsiveContainer>
+          <BarChart data={skillsRadarLimited} margin={{ top: 8, right: 8, left: 8, bottom: 36 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke={'var(--icon-button-secondary)'} />
+            <XAxis dataKey="axis" tick={{ fill: 'var(--text-secondary)', fontSize: 12 }} interval={0} angle={-20} textAnchor="end" height={50} />
+            <YAxis domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} />
+            <Tooltip contentStyle={{ background: 'var(--content-card-background)', border: `1px solid var(--icon-button-secondary)`, color: 'var(--text-main)' }} />
+            <Bar dataKey="observed" name="Observed" fill={'var(--bar-observed)'} isAnimationActive={!headless} />
+            <Bar dataKey="self_reported" name="Self-reported" fill={'var(--bar-self-reported)'} isAnimationActive={!headless} />
+            <Bar dataKey="certified" name="Certified" fill={'var(--bar-certified)'} isAnimationActive={!headless} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+

package/src/components/SummaryCards.tsx

@@ -20,12 +20,10 @@ export default function SummaryCards({ graphInsights, assessmentResult, topBusin
   const riskLabel = uiRisk?.label || 'RISK';
   const riskTop = uiRisk?.top_movers && uiRisk.top_movers.length > 0 ? uiRisk.top_movers : topBusinessForGenre('Risk');
 
-  const ai = assessmentResult?.ai_usage_summary;
-  const aiLabel = 'AI Transparency';
-  const aiTopMovers = ai?.key_findings || [];
+  // AI section removed per requirements
 
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 *:min-h-full">
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 *:min-h-full">
       <GaugeCard
         key={'technical-card'}
         title={'KYD Technical'}
@@ -44,15 +42,7 @@ export default function SummaryCards({ graphInsights, assessmentResult, topBusin
         topMoversTitle={'Top Score Movers'}
         tooltipText={'Higher bar filled indicates lower overall risk; movement to the right reflects improved risk posture.'}
       />
-      <GaugeCard
-        key={'ai-card'}
-        title={'KYD AI (Beta)'}
-        description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
-        percent={ai?.transparency_score}
-        label={aiLabel}
-        topMovers={(aiTopMovers).map(t => ({ label: t, uid: 'ai-usage' }))}
-        topMoversTitle={'Key Findings'}
-      />
+      {/* AI card removed */}
     </div>
   );
 }

package/src/connect/ConnectAccounts.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/navigation';
 import { ProviderIcon } from '../utils/provider';
 import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
-import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Settings } from 'lucide-react';
+import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Settings, Shield, InfoIcon } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle } from '../ui';
 import Link from 'next/link';
@@ -38,7 +38,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     headerDescription,
     requiredProviders,
     companyName,
-    initialProviderId,
+    initialProviderId, // = process.env.NEXT_PUBLIC_STAGE === 'dev' ? 'githubapp' : undefined,
     githubAppSlugId,
     userId,
     inviteId,
@@ -50,6 +50,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isDisconnecting, setIsDisconnecting] = useState<string | null>(null);
   const [showGithubManage, setShowGithubManage] = useState(false);
+  const [showDataHandling, setShowDataHandling] = useState(false);
 
   const apiBase = apiGatewayUrl || (typeof process !== 'undefined' ? (process.env.NEXT_PUBLIC_API_GATEWAY_URL as string) : '');
   const connectedIds = useMemo(
@@ -197,6 +198,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     setSelectedProviderIdAndCallback(null);
     setLinkUrl('');
     setShowGithubManage(false);
+    setShowDataHandling(false);
   };
 
   const cardVariants = {
@@ -204,6 +206,11 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     animate: { opacity: 1, y: 0 },
     exit: { opacity: 0, y: -20 },
   };
+  const fadeOnly = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  };
   
   // GitHub status helpers
   const githubConnectedAccount = useMemo(() => {
@@ -216,14 +223,189 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   }, [githubConnectedAccount]);
   
   return (
-    <>
-      {selectedProvider && selectedProvider.id !== 'githubapp' ? (
-        <AnimatePresence>
+    <AnimatePresence initial={false} mode="wait">
+      {showDataHandling ? (
+        <motion.div
+          key="data-handling-card"
+          className="rounded-xl border max-w-xl w-full"
+          initial="initial" animate="animate" exit="exit" variants={fadeOnly}
+          style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
+        >
+          <div className="sm:p-6 p-4">
+            <button onClick={() => setShowDataHandling(false)} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
+              <ArrowLeft className="w-4 h-4" />
+              Back
+            </button>
+            <div className="text-center">
+              <div className="flex justify-center mb-4">
+                <InfoIcon className="w-10 h-10 text-[var(--text-main)]" />
+              </div>
+              <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>How your data is handled</h3>
+              <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-2 leading-relaxed">
+                Hey there! We understand that giving access to your private repositories can be a bit scary. So here's the deal: We install the KYD GitHub App in your account - we only have read access. Then, once you request a badge assessment, we read the repositories and analyze the code, then its deleted, forever. Your code is not accessible to anyone, not even us. 
+              </p>
+              <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-3 leading-relaxed">
+                For details, see our{' '}
+                <Link href="https://www.knowyourdeveloper.ai/privacy-policy" target="_blank" rel="noopener noreferrer" className="underline" style={{ color: 'var(--icon-accent)'}}>
+                  Privacy Policy <ExternalLink className="size-3 inline-block ml-1" />
+                </Link>.
+              </p>
+            </div>
+          </div>
+        </motion.div>
+      ) : selectedProvider && selectedProvider.id !== 'githubapp' ? (
+        <motion.div
+          key="connect-card"
+          initial="initial" animate="animate" exit="exit" variants={fadeOnly}
+          className="rounded-xl border max-w-xl w-full"
+          style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
+        >
+          <div className="sm:p-6 p-4">
+            <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
+              <ArrowLeft className="w-4 h-4" />
+              Back
+            </button>
+            <div className="text-center">
+              <div className="flex justify-center mb-4">
+                <ProviderIcon name={selectedProvider.id} className={`w-10 h-10 ${selectedProvider.iconColor || 'text-gray-500'}`} />
+              </div>
+              <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>
+                {selectedProvider.connectionType === 'url' || (selectedProvider.connectionType || 'url') === 'link'
+                  ? `Use Public ${selectedProvider.name} Profile`
+                  : `Connect ${selectedProvider.name}`}
+              </h3>
+              <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto">
+                {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link')
+                  ? (selectedProvider.placeholder || 'Enter your public profile URL.')
+                  : `Authorize with ${selectedProvider.name} to connect your account.`}
+              </p>
+            </div>
+
+            {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link') ? (
+              <motion.form
+                onSubmit={(e) => { e.preventDefault(); onSubmitLink(selectedProvider.id); }}
+                className="mt-6 space-y-4"
+                initial="initial" animate="animate" exit="exit" variants={cardVariants}
+              >
+                {selectedProvider.id === 'linkedin' && (
+                  <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
+                    <Link
+                      href="https://www.linkedin.com/public-profile/settings"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline"
+                      style={{ color: 'var(--icon-accent)' }}
+                    >
+                      LinkedIn <ExternalLink className="size-3 inline-block ml-1 underline-0" />
+                    </Link>
+                    . This opens your public profile settings (you’ll see your shareable URL if you’re signed in).
+                  </p>
+                )}
+                <div className="relative">
+                  <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" />
+                  <Input
+                    type="url"
+                    value={linkUrl}
+                    onChange={(e) => setLinkUrl(e.target.value)}
+                    placeholder={selectedProvider.placeholder || 'https://example.com/your-profile'}
+                    required
+                    className="w-full border bg-transparent p-2 pl-9"
+                    style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                    onPaste={selectedProvider.id === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
+                    onBlur={selectedProvider.id === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
+                  />
+                </div>
+                <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                  <Button type="submit" className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <div className="flex items-center justify-center">
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                        Connecting...
+                      </div>
+                    ) : (
+                      'Connect'
+                    )}
+                  </Button>
+                </motion.div>
+              </motion.form>
+            ) : (
+              <div className="mt-6">
+                <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                  <Button onClick={() => onOAuth(selectedProvider.id)} className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors">
+                    <ExternalLink className="w-4 h-4 mr-2" />
+                    Connect with {selectedProvider.name}
+                  </Button>
+                </motion.div>
+              </div>
+            )}
+          </div>
+        </motion.div>
+      ) : selectedProvider && selectedProvider.id === 'githubapp' ? (
+        (!showGithubManage && initialProviderId === 'githubapp') ? (
+          <div
+            key="github-card"
+            className="rounded-xl border max-w-xl w-full"
+            style={{
+              backgroundColor: 'var(--content-card-background)',
+              borderColor: 'var(--icon-button-secondary)',
+            }}
+          >
+            <motion.div className="p-6 flex flex-col items-center" initial="initial" animate="animate" exit="exit" variants={fadeOnly}>
+              <div className="w-full flex items-center gap-3 mb-2 justify-center">
+                <ProviderIcon name="github" className="w-8 h-8 inline-block" />
+                <span className="sm:text-xl text-base font-semibold text-[var(--text-main)]">Connect Private GitHub Repositories</span>
+              </div>
+              <p className="sm:text-sm text-xs text-[var(--text-secondary)] leading-relaxed mt-1 mb-6 text-center max-w-md">
+                You&apos;ve successfully linked your GitHub account! 
+                <br />
+                To complete your profile, you can optionally allow access to your <b>private repositories</b>. This is useful if you&apos;d like to highlight private work or share additional contributions for verification.
+                <br /><br />
+                <span className="text-[var(--text-main)] font-medium">
+                  Would you like to connect your private repositories?
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setShowDataHandling(true)}
+                  className="sm:text-sm text-xs underline text-[var(--icon-accent)] hover:text-[var(--icon-accent-hover)]"
+                >
+                  See how your data is handled
+                </button>
+              </p>
+              <div className="flex flex-col sm:flex-row w-full gap-3 mt-2 justify-center items-center">
+                <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                  <Button
+                    className="w-full sm:w-auto text-[var(--text-main)] transition-colors border border-[var(--icon-button-secondary)]"
+                    variant="destructive"
+                    onClick={() => {
+                      handleConnectBack();
+                    }}
+                  >
+                    No, don&#39;t connect
+                  </Button>
+                </motion.div>
+                <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                  <Button
+                    className="w-full sm:w-auto bg-[var(--icon-accent)] text-white transition-colors font-semibold"
+                    onClick={onGithubAppInstall}
+                  >
+                    <span className="flex items-center justify-center">
+                      <ExternalLink className="w-4 h-4 mr-2" />
+                      Yes, connect my private repos
+                    </span>
+                  </Button>
+                </motion.div>
+              </div>
+            </motion.div>
+          </div>
+        ) : (
           <motion.div
-            key="connect-card"
+            key="github-manage"
             className="rounded-xl border max-w-xl w-full"
             style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
-            initial="initial" animate="animate" exit="exit" variants={cardVariants}
+            variants={cardVariants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
           >
             <div className="sm:p-6 p-4">
               <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
@@ -232,227 +414,85 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
               </button>
               <div className="text-center">
                 <div className="flex justify-center mb-4">
-                  <ProviderIcon name={selectedProvider.id} className={`w-10 h-10 ${selectedProvider.iconColor || 'text-gray-500'}`} />
+                  <ProviderIcon name="github" className="w-10 h-10" />
                 </div>
-                <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>
-                  {selectedProvider.connectionType === 'url' || (selectedProvider.connectionType || 'url') === 'link'
-                    ? `Use Public ${selectedProvider.name} Profile`
-                    : `Connect ${selectedProvider.name}`}
-                </h3>
-                <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto">
-                  {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link')
-                    ? (selectedProvider.placeholder || 'Enter your public profile URL.')
-                    : `Authorize with ${selectedProvider.name} to connect your account.`}
+                <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>Manage GitHub Connections</h3>
+                <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md">
+                  Connect or disconnect your GitHub OAuth account and optional GitHub App for private repositories.
                 </p>
               </div>
 
-              {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link') ? (
-                <motion.form
-                  onSubmit={(e) => { e.preventDefault(); onSubmitLink(selectedProvider.id); }}
-                  className="mt-6 space-y-4"
-                  initial="initial" animate="animate" exit="exit" variants={cardVariants}
-                >
-                  {selectedProvider.id === 'linkedin' && (
-                    <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
-                      <Link
-                        href="https://www.linkedin.com/public-profile/settings"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="underline"
-                        style={{ color: 'var(--icon-accent)' }}
-                      >
-                        LinkedIn <ExternalLink className="size-3 inline-block ml-1 underline-0" />
-                      </Link>
-                      . This opens your public profile settings (you’ll see your shareable URL if you’re signed in).
-                    </p>
-                  )}
-                  <div className="relative">
-                    <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" />
-                    <Input
-                      type="url"
-                      value={linkUrl}
-                      onChange={(e) => setLinkUrl(e.target.value)}
-                      placeholder={selectedProvider.placeholder || 'https://example.com/your-profile'}
-                      required
-                      className="w-full border bg-transparent p-2 pl-9"
-                      style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                      onPaste={selectedProvider.id === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
-                      onBlur={selectedProvider.id === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
-                    />
-                  </div>
-                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                    <Button type="submit" className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors" disabled={isSubmitting}>
-                      {isSubmitting ? (
-                        <div className="flex items-center justify-center">
-                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                          Connecting...
-                        </div>
+              <div className="mt-6 space-y-4">
+                <div className="rounded-lg border p-4" style={{ borderColor: 'var(--icon-button-secondary)'}}>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="font-semibold sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>GitHub OAuth</div>
+                      <div className="sm:text-sm text-xs" style={{ color: 'var(--text-secondary)'}}>{isGithubConnected ? 'Connected' : 'Not connected'}</div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {isGithubConnected ? (
+                        <Button
+                          onClick={() => onDisconnect('github')}
+                          className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
+                          style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                          variant="destructive"
+                          disabled={isDisconnecting === 'github'}
+                        >
+                          {isDisconnecting === 'github' ? <Spinner /> : <Unlink className="size-3 sm:size-4" />}
+                          <span>Disconnect</span>
+                        </Button>
                       ) : (
-                        'Connect'
+                        <Button
+                          onClick={() => onOAuth('github')}
+                          className="bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)]"
+                        >
+                          <ExternalLink className="w-4 h-4 mr-2" />
+                          Connect
+                        </Button>
                       )}
-                    </Button>
-                  </motion.div>
-                </motion.form>
-              ) : (
-                <div className="mt-6">
-                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                    <Button onClick={() => onOAuth(selectedProvider.id)} className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors">
-                      <ExternalLink className="w-4 h-4 mr-2" />
-                      Connect with {selectedProvider.name}
-                    </Button>
-                  </motion.div>
-                </div>
-              )}
-            </div>
-          </motion.div>
-        </AnimatePresence>
-      ) : selectedProvider && selectedProvider.id === 'githubapp' ? (
-        <AnimatePresence>
-          {(!showGithubManage && initialProviderId === 'githubapp') ? (
-            <motion.div
-              key="github-card"
-              className="rounded-xl border max-w-xl w-full"
-              style={{
-                backgroundColor: 'var(--content-card-background)',
-                borderColor: 'var(--icon-button-secondary)',
-              }}
-              variants={cardVariants}
-              initial="initial"
-              animate="animate"
-              exit="exit"
-              transition={{ duration: 0.3 }}
-            >
-              <div className="p-6 flex flex-col items-center">
-                <div className="w-full flex items-center gap-3 mb-2 justify-center">
-                  <ProviderIcon name="github" className="w-8 h-8 inline-block" />
-                  <span className="sm:text-xl text-base font-semibold text-[var(--text-main)]">Connect Private GitHub Repositories</span>
-                </div>
-                <p className="sm:text-sm text-xs text-[var(--text-secondary)] leading-relaxed mt-1 mb-6 text-center max-w-md">
-                  You’ve successfully linked your GitHub account! 
-                  <br />
-                  To complete your profile, you can optionally allow access to your <b>private repositories</b>. This is useful if you’d like to highlight private work or share additional contributions for verification.
-                  <br /><br />
-                  <span className="text-[var(--text-main)] font-medium">
-                    Would you like to connect your private repositories?
-                  </span>
-                </p>
-                <div className="flex flex-col sm:flex-row w-full gap-3 mt-2 justify-center items-center">
-                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                    <Button
-                      className="w-full sm:w-auto text-[var(--text-main)] transition-colors border border-[var(--icon-button-secondary)]"
-                      variant="destructive"
-                      onClick={() => {
-                        handleConnectBack();
-                      }}
-                    >
-                      No, don&#39;t connect
-                    </Button>
-                  </motion.div>
-                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                    <Button
-                      className="w-full sm:w-auto bg-[var(--icon-accent)] text-white transition-colors font-semibold"
-                      onClick={onGithubAppInstall}
-                    >
-                      <span className="flex items-center justify-center">
-                        <ExternalLink className="w-4 h-4 mr-2" />
-                        Yes, connect my private repos
-                      </span>
-                    </Button>
-                  </motion.div>
-                </div>
-              </div>
-            </motion.div>
-          ) : (
-            <motion.div
-              key="github-manage"
-              className="rounded-xl border max-w-xl w-full"
-              style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
-              variants={cardVariants}
-              initial="initial"
-              animate="animate"
-              exit="exit"
-            >
-              <div className="sm:p-6 p-4">
-                <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
-                  <ArrowLeft className="w-4 h-4" />
-                  Back
-                </button>
-                <div className="text-center">
-                  <div className="flex justify-center mb-4">
-                    <ProviderIcon name="github" className="w-10 h-10" />
+                    </div>
                   </div>
-                  <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>Manage GitHub Connections</h3>
-                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md">
-                    Connect or disconnect your GitHub OAuth account and optional GitHub App for private repositories.
-                  </p>
                 </div>
 
-                <div className="mt-6 space-y-4">
-                  <div className="rounded-lg border p-4" style={{ borderColor: 'var(--icon-button-secondary)'}}>
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <div className="font-semibold sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>GitHub OAuth</div>
-                        <div className="sm:text-sm text-xs" style={{ color: 'var(--text-secondary)'}}>{isGithubConnected ? 'Connected' : 'Not connected'}</div>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        {isGithubConnected ? (
-                          <Button
-                            onClick={() => onDisconnect('github')}
-                            className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
-                            style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                            variant="destructive"
-                            disabled={isDisconnecting === 'github'}
-                          >
-                            {isDisconnecting === 'github' ? <Spinner /> : <Unlink className="size-3 sm:size-4" />}
-                            <span>Disconnect</span>
-                          </Button>
-                        ) : (
-                          <Button
-                            onClick={() => onOAuth('github')}
-                            className="bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)]"
-                          >
-                            <ExternalLink className="w-4 h-4 mr-2" />
-                            Connect
-                          </Button>
-                        )}
-                      </div>
+                <div className="rounded-lg border p-4" style={{ borderColor: 'var(--icon-button-secondary)'}}>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="font-semibold sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>GitHub App (Private Repos)</div>
+                      <Button
+                        className="inline-flex items-center text-xs font-medium text-[var(--icon-accent)] hover:text-[var(--icon-accent-hover)] transition-colors underline px-0 py-0 h-auto"
+                        onClick={() => setShowDataHandling(true)}
+                        variant="link"
+                      >
+                        How is my data handled?
+                      </Button>
                     </div>
-                  </div>
-
-                  <div className="rounded-lg border p-4" style={{ borderColor: 'var(--icon-button-secondary)'}}>
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <div className="font-semibold sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>GitHub App (Private Repos)</div>
-                        <div className="sm:text-sm text-xs" style={{ color: 'var(--text-secondary)'}}>{isGithubAppInstalled ? 'Installed' : 'Not installed'}</div>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        {isGithubAppInstalled ? (
-                          <Button
-                            onClick={() => { window.location.href = 'https://github.com/settings/installations'; }}
-                            className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
-                            style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                            variant="destructive"
-                          >
-                            <Unlink className="size-3 sm:size-4" />
-                            <span>Uninstall</span>
-                          </Button>
-                        ) : (
-                          <Button
-                            onClick={onGithubAppInstall}
-                            className="bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)]"
-                          >
-                            <ExternalLink className="w-4 h-4 mr-2" />
-                            Install
-                          </Button>
-                        )}
-                      </div>
+                    <div className="flex items-center gap-2">
+                      {isGithubAppInstalled ? (
+                        <Button
+                          onClick={() => { window.location.href = 'https://github.com/settings/installations'; }}
+                          className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
+                          style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                          variant="destructive"
+                        >
+                          <Unlink className="size-3 sm:size-4" />
+                          <span>Uninstall</span>
+                        </Button>
+                      ) : (
+                        <Button
+                          onClick={onGithubAppInstall}
+                          className="bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)]"
+                        >
+                          <ExternalLink className="w-4 h-4 mr-2" />
+                          Install
+                        </Button>
+                      )}
                     </div>
                   </div>
                 </div>
               </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
+            </div>
+          </motion.div>
+        )
       ) : (
         <Card className="border-[var(--icon-button-secondary)] pt-2" style={{ backgroundColor: 'var(--content-card-background)'}}>
           <AnimatePresence mode="wait">
@@ -647,7 +687,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
           </AnimatePresence>
         </Card>
       )}
-    </>
+    </AnimatePresence>
   );
 }
 

package/src/types.ts

@@ -378,6 +378,8 @@ export interface GraphInsightsPayload {
     observed?: number; // 0-100
     self_reported?: number; // 0-100
     certified?: number; // 0-100
+    // New: experience metric (0-100) for color saturation
+    experience?: number;
   }>;
   // New: Flattened list of business rule selections (for appendix)
   business_rules_all?: Array<{