kyd-shared-badge 0.1.0

package/README.md

@@ -0,0 +1,20 @@
+# @kyd/shared-badge
+
+Shared KYD badge display component for Next.js apps.
+
+## Install
+
+```
+npm i @kyd/shared-badge
+```
+
+## Usage
+
+```tsx
+import { SharedBadgeDisplay } from '@kyd/shared-badge'
+import type { PublicBadgeData } from '@kyd/shared-badge'
+
+export default function Page({ badgeData }: { badgeData: PublicBadgeData }) {
+  return <SharedBadgeDisplay badgeData={badgeData} />
+}
+```

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "kyd-shared-badge",
+  "version": "0.1.0",
+  "private": false,
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {},
+  "peerDependencies": {
+    "next": ">=13",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "react-icons": "^4.12.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "rollup": "^4.46.2"
+  }
+}

package/src/SharedBadgeDisplay.tsx

@@ -0,0 +1,238 @@
+'use client';
+
+import React from 'react';
+import { IconType } from 'react-icons';
+import { FiAlertTriangle, FiCpu, FiShield, FiThumbsUp } from 'react-icons/fi';
+import { PublicBadgeData } from './types';
+import ShareButton from './components/ShareButton';
+import ReportHeader from './components/ReportHeader';
+import AppendixTables from './components/AppendixTables';
+import ProviderInsights from './components/ProviderInsights';
+import IpRiskAnalysisDisplay from './components/IpRiskAnalysisDisplay';
+
+const getScoreColor = (score: number) => {
+    if (score >= 80) return 'text-[#6A9846]';
+    if (score >= 65) return 'text-[#EABE52]';
+    return 'text-[#D3452E]';
+};
+
+const getRiskText = (risk: number) => {
+    if (risk >= 80) return 'Low Risk';
+    if (risk >= 65) return 'Medium Risk';
+    if (risk >= 40) return 'High Risk';
+    return 'Critical Risk';
+};
+
+interface ScoreCardProps {
+  title: React.ReactNode;
+  score: number;
+  description: string;
+  descriptor?: string;
+  icon: IconType;
+  scoreType: 'number' | 'risk' | 'descriptor';
+}
+
+const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreType }: ScoreCardProps) => {
+    const scoreColor = scoreType === 'descriptor' ? 'text-neutral-400' : getScoreColor(score);
+    let displayScore;
+
+    if (scoreType === 'risk') {
+        displayScore = getRiskText(score);
+    } else if (scoreType === 'descriptor') {
+        displayScore = descriptor;
+    } else {
+        displayScore = `${score}/100`;
+    }
+
+    return (
+        <div className="p-6 rounded-lg flex flex-col items-center justify-start text-center dark:bg-neutral-800/50 backdrop-blur-sm bg-white/70 shadow-lg border border-neutral-200 dark:border-neutral-700 h-full">
+            <div className={`text-3xl mb-4 ${scoreColor}`}>
+                <Icon />
+            </div>
+            <h3 className={`font-semibold text-xl text-neutral-800 dark:text-white mb-2 ${scoreType === 'descriptor' ? 'text-neutral-400' : ''}`}>{title}</h3>
+            <p className={`text-4xl font-bold ${scoreColor}`}>{displayScore}</p>
+            <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-4">{description}</p>
+        </div>
+    );
+};
+
+const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
+  const { badgeId, developerName, assessmentResult, updatedAt, connectedPlatforms } = badgeData;
+  const { summary_scores, report_summary, developer_trust_explanation, key_skills, screening_sources, industry_considerations } = assessmentResult;
+  
+  const devTrustScore = summary_scores.developer_trust;
+  const riskScore = summary_scores.risk_score;
+  const aiUsageScore = summary_scores.ai_usage;
+
+  return (
+    <div className='max-w-6xl mx-auto'>
+        <div className="flex justify-end items-center mb-4">
+            <ShareButton
+                badgeId={badgeId}
+                shareTitle={`KYD Self-Check™ Report | ${badgeData.developerName}`}
+                shareText="Check out my KYD Self-Check™ from Know Your Developer™"
+                buttonText="Share"
+                className="flex items-center justify-center h-10 w-10 sm:w-auto sm:px-4 sm:py-2 bg-indigo-600 text-white rounded-full sm:rounded-md hover:bg-indigo-700 transition-all duration-300 ease-in-out"
+            />
+        </div>
+        <ReportHeader 
+            badgeId={badgeId}
+            developerName={badgeData.developerName}
+            updatedAt={updatedAt}
+            score={summary_scores.kyd_self_check.score}
+            isPublic={true}
+            badgeImageUrl={badgeData.badgeImageUrl || ''}
+        />
+        <div className="bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg shadow-xl p-6 sm:p-8 mt-8">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                <ScoreCard 
+                  title="KYD Technical™" 
+                  score={devTrustScore?.score || 0}
+                  description={devTrustScore?.description || ''}
+                  icon={FiThumbsUp}
+                      scoreType='number'
+                />
+                <ScoreCard 
+                  title="KYD Risk™" 
+                  score={riskScore?.score || 0}
+                  description={riskScore?.description || ''}
+                  icon={FiShield}
+                      scoreType='risk'
+                />
+                <ScoreCard 
+                  title={<span>KYD AI™ <span className="text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded-full align-middle">Beta</span></span>}
+                  score={0}
+                  description={aiUsageScore?.description || 'Analysis of AI tool usage and transparency.'}
+                  descriptor={aiUsageScore?.descriptor}
+                  icon={FiCpu}
+                  scoreType='descriptor'
+                />
+            </div>
+
+            <div className="space-y-12 divide-y divide-neutral-200/50 dark:divide-neutral-700/50">
+                <div className="pt-8 first:pt-0">
+                    <h3 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">1. Summary Findings</h3>
+                    <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300">
+                        <p>{report_summary}</p>
+                    </div>
+                    {key_skills && key_skills.length > 0 && (
+                        <div className="mt-6">
+                            <h4 className="text-lg font-semibold text-neutral-900 dark:text-white mb-3">Key Skills Observed</h4>
+                            <div className="flex flex-wrap gap-2">
+                                {key_skills.map((skill: string, index: number) => (
+                                    <span key={index} className="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-1 rounded-full dark:bg-blue-900 dark:text-blue-300">
+                                        {skill}
+                                    </span>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                <div className="pt-8">
+                    <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">2. KYD Technical™ Signals</h3>
+                    <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300 mb-6">
+                        <p>{developer_trust_explanation}</p>
+                    </div>
+                    <ProviderInsights 
+                        platforms={connectedPlatforms || []} 
+                        insights={assessmentResult.provider_insights} 
+                        variant="public" 
+                    />
+                </div>
+                
+                <div className="pt-8">
+                      <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">3. KYD Risk™ Signals</h3>
+                      {badgeData.optOutScreening ? (
+                          <div className="mb-4 p-4 bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-300 dark:border-yellow-700 rounded-lg">
+                              <div className="flex items-start">
+                                  <span className="h-5 w-5 text-yellow-500 dark:text-yellow-400 mr-3 mt-0.5 flex-shrink-0">
+                                      <FiAlertTriangle size={20} />
+                                  </span>
+                                  <div>
+                                      <h4 className="font-bold text-yellow-800 dark:text-yellow-200">User Opted Out of Screening</h4>
+                                      <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                                          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>
+                          </div>
+                      ) : (
+                        <>
+                          <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300 space-y-4 mb-6">
+                              <p>{riskScore?.description || ''}</p>
+                          </div>
+                          <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
+                        </>
+                      )}
+                </div>
+
+                <div className="pt-8">
+                      <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">4. KYD AI™ Signals <span className="text-sm font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded-full align-middle">Beta</span></h3>
+                      <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300 mb-6 space-y-4">
+                        <p>{assessmentResult.ai_usage_summary?.explanation}</p>
+                        {assessmentResult.ai_usage_summary?.key_findings && (
+                          <ul className="list-disc list-inside">
+                            {assessmentResult.ai_usage_summary.key_findings.map((finding, index) => (
+                              <li key={index}>{finding}</li>
+                            ))}
+                          </ul>
+                        )}
+                  </div>
+                </div>
+
+                <div className="pt-8">
+                    <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">5. Industry Considerations</h3>
+                    <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300">
+                        <p>{industry_considerations}</p>
+                    </div>
+                </div>
+
+                {!badgeData.optOutScreening && screening_sources && (
+                    <div className="pt-8">
+                        <h3 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">6. Appendix: Data Sources</h3>
+                        <div className="space-y-8">
+                            <div>
+                                <h4 className="text-xl font-bold text-neutral-800 dark:text-white mb-4">Sanctions & Watchlists</h4>
+                                <AppendixTables
+                                    type="sanctions"
+                                    sources={[...(screening_sources.ofac_lists || []), ...(screening_sources.additional_watchlists || [])]}
+                                    searchedAt={updatedAt}
+                                    developerName={developerName || 'this developer'}
+                                />
+                            </div>
+                            <div>
+                                <h4 className="text-xl font-bold text-neutral-800 dark:text-white mb-4">Country-specific Entity Affiliations</h4>
+                                <AppendixTables
+                                    type="domains"
+                                    sources={screening_sources.risk_profile_domains || []}
+                                    searchedAt={updatedAt}
+                                    developerName={developerName || 'this developer'}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                <div className="pt-8 text-sm text-neutral-500 dark:text-neutral-400 text-center">
+                    Report Completed: {new Date(updatedAt).toLocaleString(undefined, {
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                        hour: 'numeric',
+                        minute: '2-digit',
+                        timeZoneName: 'short',
+                    })}
+                </div>
+            </div>
+        </div>
+        <footer className="mt-12 pt-6 border-t border-neutral-200 dark:border-neutral-700">
+            <p className="text-center text-xs text-gray-500 dark:text-gray-400 max-w-4xl mx-auto">
+                © 2025 Know Your Developer, LLC. All rights reserved. KYD Self-Check™, and associated marks are trademarks of Know Your Developer, LLC. This document is confidential, proprietary, and intended solely for the individual or entity to whom it is addressed. Unauthorized use, disclosure, copying, or distribution of this document or any of its contents is strictly prohibited and may be unlawful. Know Your Developer, LLC assumes no responsibility or liability for any errors or omissions contained herein. Report validity subject to the terms and conditions stated on the official Know Your Developer website located at https://knowyourdeveloper.ai.
+            </p>
+        </footer>
+    </div>
+  );
+};
+
+export default SharedBadgeDisplay; 

package/src/components/AppendixTables.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import React, { useState } from 'react';
+import { DomainCSVRow } from '../lib/types';
+
+interface SanctionSource {
+    issuingEntity: string;
+    listName: string;
+}
+
+interface DomainSource {
+    country?: string;
+    entityType?: string;
+    entityName?: string;
+    url: string;
+}
+
+const PAGE_SIZE = 25;
+
+interface AppendixTableProps {
+    type: 'sanctions' | 'domains';
+    sources: string[] | DomainCSVRow[];
+    searchedAt: string;
+    developerName: string;
+}
+
+const SanctionsRow = ({ source, searchedAt, developerName }: { source: SanctionSource, searchedAt: string, developerName: string }) => (
+    <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
+        <td className="px-4 py-4 whitespace-nowrap text-sm font-medium text-neutral-800 dark:text-neutral-200">
+            {source.issuingEntity}
+        </td>
+        <td className="px-4 py-4 whitespace-normal text-sm text-neutral-600 dark:text-neutral-300">
+            {source.listName}
+        </td>
+        <td className="px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300">
+            {searchedAt}
+        </td>
+        <td className="px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300">
+            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                Not Found
+            </span>
+        </td>
+        <td className="px-4 py-4 text-sm text-neutral-600 dark:text-neutral-300 whitespace-normal">
+            No exact match for <strong>{developerName}</strong> (based on name and email) was found on this list.
+        </td>
+    </tr>
+);
+
+const DomainRow = ({ source, searchedAt, developerName }: { source: DomainSource, searchedAt: string, developerName: string }) => (
+     <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
+        <td className="px-4 py-4 whitespace-normal text-sm text-neutral-600 dark:text-neutral-300">{source.country || 'N/A'}</td>
+        <td className="px-4 py-4 whitespace-normal text-sm text-neutral-600 dark:text-neutral-300">{source.entityType || 'N/A'}</td>
+        <td className="px-4 py-4 whitespace-normal text-sm font-medium text-neutral-800 dark:text-neutral-200">{source.entityName || source.url}</td>
+        <td className="px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300">{searchedAt}</td>
+        <td className="px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300">
+            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                Not Found
+            </span>
+        </td>
+        <td className="px-4 py-4 text-sm text-neutral-600 dark:text-neutral-300 whitespace-normal">
+            No profile matching <strong>{developerName}</strong> (based on name and email) was found at this domain.
+        </td>
+    </tr>
+);
+
+
+const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName }) => {
+    const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+
+    const formattedDate = new Date(searchedAt).toLocaleString(undefined, {
+        year: 'numeric', month: 'short', day: 'numeric',
+        hour: 'numeric', minute: '2-digit',
+    });
+
+    const headers = type === 'sanctions' 
+        ? ["Issuing Entity", "List Name", "List Searched On", "Findings", "What the Findings Mean"]
+        : ["Country", "Entity Type", "Entity/Domain", "Searched On", "Findings", "What the Findings Mean"];
+
+    const parsedSources = type === 'sanctions' 
+        ? (sources as string[]).map(sourceString => {
+            const parts = sourceString.split(':');
+            return { issuingEntity: parts[0].trim(), listName: parts.slice(1).join(':').trim() };
+        })
+        : (sources as DomainCSVRow[]).map(s => ({
+            country: s.Country,
+            entityType: s['Entity Type'],
+            entityName: s['Entity Name'],
+            url: s.URL,
+        }));
+
+    const visibleParsedSources = parsedSources.slice(0, visibleCount);
+
+    const handleLoadMore = () => {
+        setVisibleCount(currentCount => currentCount + PAGE_SIZE);
+    };
+
+    if (!sources || sources.length === 0) {
+        return null;
+    }
+
+    return (
+        <div>
+            <div className="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700">
+                <table className="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
+                    <thead className="bg-neutral-50 dark:bg-neutral-800">
+                        <tr>
+                            {headers.map(header => (
+                                <th key={header} scope="col" className="px-4 py-3 text-left text-xs font-semibold text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
+                                    {header}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody className="bg-white dark:bg-neutral-900 divide-y divide-neutral-200 dark:divide-neutral-700">
+                        {visibleParsedSources.map((source, index) => 
+                            type === 'sanctions' 
+                            ? <SanctionsRow key={index} source={source as SanctionSource} searchedAt={formattedDate} developerName={developerName} />
+                            : <DomainRow key={index} source={source as DomainSource} searchedAt={formattedDate} developerName={developerName} />
+                        )}
+                    </tbody>
+                </table>
+            </div>
+            {parsedSources.length > PAGE_SIZE && (
+                <div className="mt-4 flex items-center justify-between text-sm text-neutral-600 dark:text-neutral-400">
+                    <p>
+                        Showing {Math.min(visibleCount, parsedSources.length)} of {parsedSources.length} entries
+                    </p>
+                    {visibleCount < parsedSources.length && (
+                        <button
+                            onClick={handleLoadMore}
+                            className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-md"
+                        >
+                            Load More
+                        </button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AppendixTables; 

package/src/components/IpRiskAnalysisDisplay.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { FiInfo } from 'react-icons/fi';
+import { IpRiskAnalysis, IpRiskAnalysisFinding } from '../lib/types';
+
+interface IpRiskAnalysisDisplayProps {
+    ipRiskAnalysis?: IpRiskAnalysis;
+}
+
+const FindingRow = ({ finding }: { finding: IpRiskAnalysisFinding }) => (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-2 py-4 border-b border-neutral-200 dark:border-neutral-700 last:border-b-0">
+        <div className="md:col-span-1">
+            <p className="font-semibold text-neutral-800 dark:text-white">{finding.label}</p>
+        </div>
+        <div className="md:col-span-2">
+            <p className="text-neutral-700 dark:text-neutral-300">{finding.details}</p>
+            <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1 italic">{finding.implication}</p>
+        </div>
+    </div>
+);
+
+
+const IpRiskAnalysisDisplay = ({ ipRiskAnalysis }: IpRiskAnalysisDisplayProps) => {
+    if (!ipRiskAnalysis || !ipRiskAnalysis.checked || !ipRiskAnalysis.findings || ipRiskAnalysis.findings.length === 0) {
+        return (
+            <div className="mt-6 p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg flex items-center">
+                <FiInfo className="h-5 w-5 text-neutral-500 mr-3 flex-shrink-0" />
+                <p className="text-sm text-neutral-600 dark:text-neutral-400">IP risk analysis was not performed for this assessment.</p>
+            </div>
+        );
+    }
+
+    const { findings = [] } = ipRiskAnalysis;
+
+    return (
+        <div className="mt-6">
+            <div className="divide-y divide-neutral-200 dark:divide-neutral-700">
+                {findings.map((finding, index) => (
+                    <FindingRow key={index} finding={finding} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default IpRiskAnalysisDisplay; 

package/src/components/ProviderInsights.tsx

@@ -0,0 +1,109 @@
+import { IconType } from 'react-icons';
+import { FaGithub, FaGitlab, FaStackOverflow, FaAtlassian, FaLinkedin, FaGoogle } from 'react-icons/fa';
+import { SiFiverr, SiCredly, SiKaggle } from 'react-icons/si';
+import { ProviderInsight } from '@/lib/types';
+
+interface Platform {
+  name: string;
+  handle?: string | null;
+  url?: string | null;
+  observedAt?: string;
+}
+
+interface ProviderInsightsProps {
+  platforms: Platform[];
+  insights: { [provider: string]: ProviderInsight };
+  variant?: 'public' | 'private';
+}
+
+const providerIcons: { [key: string]: IconType } = {
+  GitHub: FaGithub,
+  GitLab: FaGitlab,
+  'Stack Overflow': FaStackOverflow,
+  Atlassian: FaAtlassian,
+  Fiverr: SiFiverr,
+  LinkedIn: FaLinkedin,
+  Credly: SiCredly,
+  Kaggle: SiKaggle,
+  'Google Scholar': FaGoogle,
+};
+
+export default function ProviderInsights({ platforms, insights, variant = 'private' }: ProviderInsightsProps) {
+  if (!platforms || platforms.length === 0) {
+    return null;
+  }
+
+  const isPublic = variant === 'public';
+
+  return (
+    <div className="space-y-6">
+      {platforms.map(platform => {
+        const Icon = platform.name ? providerIcons[platform.name] : null;
+        const providerInsight = insights[platform.name];
+        const observedDate = platform.observedAt ? new Date(platform.observedAt).toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+        }) : null;
+
+        return (
+          <div key={platform.name} className="bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700">
+            {/* Header */}
+            <div className="p-4 border-b border-neutral-200 dark:border-neutral-700">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  {Icon && <Icon className="h-6 w-6 text-neutral-600 dark:text-neutral-400" />}
+                  <h3 className="font-semibold text-lg text-neutral-900 dark:text-white">{platform.name}</h3>
+                </div>
+                {observedDate && (
+                  <span className="text-sm text-neutral-500 dark:text-neutral-400">
+                    {isPublic ? `Accessed: ${observedDate}` : `Observed: ${observedDate}`}
+                  </span>
+                )}
+              </div>
+              {platform.url && (
+                <a
+                  href={platform.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mt-2 inline-block text-sm text-indigo-600 dark:text-indigo-400 hover:underline"
+                >
+                  {platform.handle || 'View Profile'}
+                </a>
+              )}
+            </div>
+
+            {/* Insights */}
+            {providerInsight && (
+              <div className="p-4">
+                {/* Summary */}
+                <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
+                  {providerInsight.summary}
+                </p>
+
+                {/* Data Points */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {providerInsight.data_points.map((point, index) => (
+                    <div key={index} className="bg-neutral-50 dark:bg-neutral-700/50 rounded-lg p-4">
+                      <div className="flex justify-between items-baseline mb-2">
+                        <h4 className="font-medium text-neutral-900 dark:text-white">
+                          {point.label}
+                        </h4>
+                        <span className="font-bold text-neutral-700 dark:text-neutral-200">
+                          {point.value}
+                        </span>
+                      </div>
+                      <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                        {point.significance}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+} 

package/src/components/ReportHeader.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import Image from 'next/image';
+
+const getBadgeImageUrl = (score: number) => {
+  if (score >= 75) return '/badgegreen.png';
+  if (score >= 50) return '/badgeyellow.png';
+  return '/badgered.png';
+};
+
+interface ReportHeaderProps {
+    badgeId: string | undefined;
+    developerName: string | undefined;
+    updatedAt: string | undefined;
+    score: number | undefined;
+    isPublic: boolean;
+    badgeImageUrl: string;
+}
+
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic, badgeImageUrl }: ReportHeaderProps) => {
+    // Use the dynamic image if available, otherwise fall back to the score-based one.
+    const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score);
+    
+    const formattedDate = updatedAt ? new Date(updatedAt).toLocaleString(undefined, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    }) : 'N/A';
+
+    return (
+        <div className="mb-8 p-6 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg shadow-lg flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
+            {/* Left Section */}
+            <div className="flex items-center text-left md:text-center">
+                <Image src={finalBadgeImageUrl} alt="KYD Badge" width={150} height={150} unoptimized />
+                <div className='flex flex-col'>
+                    <h1 className="font-bold text-lg text-neutral-900 dark:text-white">
+                      KYD Self-Check™
+                    </h1>
+                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                      {isPublic ? 'Public Report' : 'Private Report'}
+                    </p>
+                </div>
+            </div>
+
+            {/* Middle Section */}
+            <div className="text-left md:text-center">
+                <p className="text-sm text-neutral-600 dark:text-neutral-400">Developer</p>
+                <p className="font-semibold text-neutral-900 dark:text-white text-2xl">{developerName || 'N/A'}</p>
+            </div>
+
+            {/* Right Section */}
+            <div className="text-left text-sm text-neutral-600 dark:text-neutral-400 space-y-1">
+                <p><span className="font-semibold text-neutral-800 dark:text-neutral-200">Requested By:</span> {developerName || 'N/A'}</p>
+                <p><span className="font-semibold text-neutral-800 dark:text-neutral-200">Organization:</span> Unaffiliated</p>
+                <p><span className="font-semibold text-neutral-800 dark:text-neutral-200">Date Completed:</span> {formattedDate}</p>
+                <p><span className="font-semibold text-neutral-800 dark:text-neutral-200">Report ID:</span> {badgeId}</p>
+            </div>
+        </div>
+    );
+};
+
+export default ReportHeader; 

package/src/components/ShareButton.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { FiShare2, FiLink, FiRefreshCw } from 'react-icons/fi';
+import { FaTwitter, FaFacebook, FaLinkedin, FaReddit } from 'react-icons/fa';
+import toast from 'react-hot-toast';
+
+interface ShareButtonProps {
+    badgeId: string | undefined;
+    shareTitle: string;
+    shareText: string;
+    buttonText: string;
+    className?: string;
+    isPublic?: boolean;
+    onTogglePrivacy?: () => Promise<void> | void;
+}
+
+const ShareButton = ({ badgeId, shareTitle, shareText, buttonText, className, isPublic = true, onTogglePrivacy }: ShareButtonProps) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isToggling, setIsToggling] = useState(false);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [isNativeShareSupported, setIsNativeShareSupported] = useState(false);
+    const [url, setUrl] = useState('');
+
+    useEffect(() => {
+        setIsNativeShareSupported(!!navigator.share);
+        if (badgeId) {
+            setUrl(`${window.location.origin}/share/badge/${badgeId}`);
+        }
+    }, [badgeId]);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+                setIsMenuOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [menuRef]);
+
+    const handleButtonClick = async () => {
+        if (!isPublic && onTogglePrivacy) {
+            setIsToggling(true);
+            try {
+                await onTogglePrivacy();
+                setIsMenuOpen(true);
+            } catch (error) {
+                // The parent component is expected to show a toast.
+                console.error("Failed to make badge public for sharing.", error);
+            } finally {
+                setIsToggling(false);
+            }
+        } else {
+            setIsMenuOpen(!isMenuOpen);
+        }
+    };
+
+    const handleCopyLink = async () => {
+        if (url) {
+            try {
+                await navigator.clipboard.writeText(url);
+                toast.success('Link copied to clipboard!');
+            } catch (error) {
+                console.error('Failed to copy link:', error);
+                toast.error('Failed to copy link.');
+            }
+        }
+        setIsMenuOpen(false);
+    };
+
+    const socialPlatforms = [
+        {
+            name: 'Twitter',
+            icon: FaTwitter,
+            url: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(shareText)}`,
+            color: 'text-sky-500'
+        },
+        {
+            name: 'Facebook',
+            icon: FaFacebook,
+            url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
+            color: 'text-blue-600'
+        },
+        {
+            name: 'LinkedIn',
+            icon: FaLinkedin,
+            url: `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}&title=${encodeURIComponent(shareTitle)}&summary=${encodeURIComponent(shareText)}`,
+            color: 'text-sky-700'
+        },
+        {
+            name: 'Reddit',
+            icon: FaReddit,
+            url: `https://www.reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(shareTitle)}`,
+            color: 'text-orange-500'
+        }
+    ];
+
+    const handleNativeShare = async () => {
+        if (url && navigator.share) {
+            const shareData = {
+                title: shareTitle,
+                text: shareText,
+                url: url,
+            };
+            try {
+                await navigator.share(shareData);
+                toast.success('Assessment shared successfully!');
+            } catch (error) {
+                if (!(error instanceof Error && error.name === 'AbortError')) {
+                    console.error('Native share failed:', error);
+                    toast.error('Could not share.');
+                }
+            }
+        } else if (!navigator.share) {
+            toast.error('Native sharing is not supported on this browser.');
+        } else {
+            toast.error('Could not find a valid badge to share.');
+        }
+        setIsMenuOpen(false);
+    };
+
+    return (
+        <div className="relative" ref={menuRef}>
+            <button
+                onClick={handleButtonClick}
+                disabled={!badgeId || !url || isToggling}
+                className={className || "flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors disabled:bg-indigo-400 disabled:cursor-not-allowed"}
+            >
+                {isToggling ? (
+                    <FiRefreshCw className="animate-spin" />
+                ) : (
+                    <FiShare2 />
+                )}
+                <span className="hidden sm:inline sm:ml-2">{isToggling ? 'Making Public...' : buttonText}</span>
+            </button>
+
+            {isMenuOpen && (
+                <div className="absolute right-0 mt-2 w-56 origin-top-right bg-white dark:bg-neutral-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20">
+                    <div className="py-1">
+                        {socialPlatforms.map((platform) => {
+                            const Icon = platform.icon;
+                            return (
+                                <a
+                                    key={platform.name}
+                                    href={platform.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    onClick={() => setIsMenuOpen(false)}
+                                    className="flex items-center w-full px-4 py-2 text-sm text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-700"
+                                >
+                                    <Icon className={`mr-3 h-5 w-5 ${platform.color}`} />
+                                    <span>Share on {platform.name}</span>
+                                </a>
+                            );
+                        })}
+                        <div className="border-t border-neutral-200 dark:border-neutral-700 my-1"></div>
+                        <button
+                            onClick={handleCopyLink}
+                            className="flex items-center w-full px-4 py-2 text-sm text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-700"
+                        >
+                            <FiLink className="mr-3 h-5 w-5" />
+                            <span>Copy Link</span>
+                        </button>
+                        {isNativeShareSupported && (
+                             <>
+                                <div className="border-t border-neutral-200 dark:border-neutral-700 my-1"></div>
+                                <button
+                                    onClick={handleNativeShare}
+                                    className="flex items-center w-full px-4 py-2 text-sm text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-700"
+                                >
+                                    <FiShare2 className="mr-3 h-5 w-5" />
+                                    <span>Share via...</span>
+                                </button>
+                            </>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ShareButton; 

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export { default as SharedBadgeDisplay } from './SharedBadgeDisplay';

package/src/types.ts

@@ -0,0 +1,172 @@
+export type Provider = {
+  id: string;
+  name: string;
+  authUrl?: string;
+  connectionType?: 'oauth' | 'url';
+  iconColor?: string;
+  colors: {
+    bg: string;
+    hoverBg: string;
+    text: string;
+  };
+};
+
+export type AssessmentSummary = {
+  badgeId: string;
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+  assessmentError?: string;
+  kyd_self_check_score?: number;
+};
+
+export interface PublicBadgeData {
+  badgeId: string;
+  developerName?: string;
+  assessmentResult: AssessmentResult;
+  updatedAt: string;
+  badgeImageUrl?: string;
+  connectedPlatforms?: {
+    name: string;
+    url?: string;
+    handle?: string;
+    observedAt?: string;
+  }[];
+  optOutScreening?: boolean;
+}
+
+export type VerifiedBadge = {
+  badgeName: string;
+  issuedOn: string;
+  issuerName: string;
+  recipientName: string;
+  url: string;
+};
+
+export type User = {
+  userId: string;
+  name: string;
+  email: string;
+  fullName:string;
+  profilePictureUrl?: string;
+  verifiedBadges: VerifiedBadge[];
+  assessmentStatus: 'idle' | 'in-progress' | 'completed' | 'failed' | 'pending_payment';
+  assessmentResult?: AssessmentResult;
+  assessmentError?: string;
+  assessmentUpdatedAt?: string;
+  latestBadgeId?: string;
+  latestBadgeImageUrl?: string;
+  isPublic?: boolean;
+  assessments: AssessmentSummary[];
+  connectedPlatforms?: { name: string; url: string | null; handle: string | null; observedAt?: string }[];
+};
+
+export interface SummaryScore {
+  score?: number;
+  description: string;
+  descriptor?: string;
+  letter_grade?: string;
+}
+
+export interface DataPoint {
+  label: string;
+  value: string;
+  significance: string;
+}
+
+export interface ProviderInsight {
+  data_points: DataPoint[];
+  summary: string;
+}
+
+export interface DomainCSVRow {
+    Country?: string;
+    'Entity Type'?: string;
+    'Entity Name'?: string;
+    URL: string;
+}
+
+export interface IpRiskAnalysisFinding {
+    label: string;
+    details: string;
+    implication: string;
+}
+
+export interface IpRiskAnalysis {
+    checked: boolean;
+    findings: IpRiskAnalysisFinding[];
+    raw_data: {
+        vpn_ips?: string[];
+        countries?: string[];
+        blocklisted_ips?: { ip: string; lists: string[] }[];
+        abusive_ips?: string[];
+        impossible_travel_events?: string[];
+        anomalous_geo_logins?: string[];
+    };
+}
+
+export interface AssessmentResult {
+  report_summary: string;
+  recommendations: {
+    summary: string;
+    bullet_points: string[];
+  };
+  developer_trust_explanation: string;
+  industry_considerations: string;
+  ai_usage_summary: {
+    explanation: string;
+    key_findings: string[];
+    files_with_ai_findings: number;
+    files_analyzed: number;
+  };
+  key_skills: string[];
+  summary_scores: {
+    developer_trust: SummaryScore;
+    risk_score: SummaryScore;
+    kyd_self_check: SummaryScore;
+    ai_usage: SummaryScore;
+  };
+  provider_insights: {
+    [provider: string]: ProviderInsight;
+  };
+  badgeId?: string;
+  screening_sources?: {
+    ofac_lists: string[];
+    risk_profile_domains: DomainCSVRow[];
+    additional_watchlists?: string[];
+    ip_risk_analysis?: IpRiskAnalysis;
+  };
+  optOutScreening?: boolean;
+  clientMetadata?: ClientMetadata;
+}
+
+export interface ClientMetadata {
+  ipAddress: string;
+  userAgent: string;
+  language: string;
+  screenResolution: string;
+  timezone: string;
+  referrer: string;
+}
+
+export interface ScoresByCategory {
+  [category: string]: {
+    subtotal: number;
+    fields: {
+      [field: string]: FieldScore | AnalyzedItem | AnalyzedItem[];
+    };
+  };
+}
+
+export interface FieldScore {
+  score: number;
+  summary?: string;
+  justification: string;
+}
+
+export interface AnalyzedItem {
+  repo_name?: string;
+  summary: string;
+  quality_score?: number;
+  professional_score?: number;
+}