kyd-shared-badge 0.3.65 → 0.3.66

package/package.json

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

package/src/PrintableBadgeDisplay.tsx

@@ -31,7 +31,6 @@ import AiUsageBody from './components/AiUsageBody';
 import SanctionsMatches from './components/SanctionsMatches';
 import AppendixContent from './components/AppendixContent';
 import { ProviderIcon, getProviderDisplayName, getProviderTooltipCopy, getCategoryTooltipCopy, barColor } from './utils/provider';
-import ResumeView from './components/ResumeView';
 type ChatWidgetProps = Partial<{
   api: string;
   title: string;
@@ -224,21 +223,6 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
 
           <div className="pt-8 space-y-8">
-        {(() => {
-          const resumeJson = (assessmentResult as any)?.resume?.json || null;
-          const roleName = (() => {
-            try { return (assessmentResult?.enterprise_match?.role?.name) || undefined; } catch { return undefined; }
-          })();
-          if (!resumeJson) return null;
-          return (
-            <Reveal headless={isHeadless}>
-              <div className={'kyd-avoid-break'}>
-                <h3 className={'text-2xl font-bold mb-3'} style={{ color: 'var(--text-main)' }}>Resume</h3>
-                <ResumeView resume={resumeJson} roleName={roleName} showDownloadButton={false} />
-              </div>
-            </Reveal>
-          );
-        })()}
             <Reveal headless={isHeadless} as={'h3'} offsetY={8} className={`text-2xl font-bold ${isHeadless ? 'kyd-break-before' : ''}`} style={{ color: 'var(--text-main)' }}>KYD Risk - Overview</Reveal>
             
             {/* Risk Graph Insights and Category Bars */}

package/src/SharedBadgeDisplay.tsx

@@ -564,11 +564,11 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             <TabNav />
             <div className={'px-2 sm:px-0 pb-2'}>
               {activeTab === 'overview' && OverviewSection()}
-              {activeTab === 'resume' && <ResumeSection />}
-              {activeTab === 'role' && <RoleFitSection />}
               {activeTab === 'technical' && TechnicalSection()}
               {activeTab === 'risk' && RiskSection()}
               {activeTab === 'ai' && AiSection()}
+              {activeTab === 'role' && <RoleFitSection />}
+              {activeTab === 'resume' && <ResumeSection />}
               {activeTab === 'appendix' && AppendixSection()}
             </div>
           </>

package/src/components/AppendixTables.tsx

@@ -5,6 +5,10 @@ import { formatLocalDate } from '../utils/date';
 import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
 import { SiCredly, SiFiverr } from 'react-icons/si';
 import { DomainCSVRow } from '../types';
+import { red, yellow, green, hexToRgba } from '../colors';
+import RiskIcon from './icons/risk';
+import CodeIcon from './icons/code';
+import AiIcon from './icons/ai';
 
 interface SanctionSource {
     issuingEntity: string;
@@ -134,6 +138,8 @@ const DomainRow = ({ source, searchedAt, developerName }: { source: DomainSource
 const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName, genreMapping, headless }) => {
     const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
     const [expanded, setExpanded] = useState<{ [k: number]: boolean }>({});
+    const [sortBy, setSortBy] = useState<'pillar' | 'category' | 'label' | 'weight' | null>(null);
+    const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
 
     useEffect(() => {
         const flashIfRule = () => {
@@ -168,6 +174,27 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
         ? ["Country", "Entity Type", "Entity/Domain", "Searched On", "Value", "Findings"]
         : ["Platform", "KYD Pillar", "Category", "Observation", "Weight Impact"];
 
+    const sortableBusinessHeaders: Record<string, 'pillar' | 'category' | 'label' | 'weight'> = {
+        'KYD Pillar': 'pillar',
+        'Category': 'category',
+        'Observation': 'label',
+        'Weight Impact': 'weight',
+    };
+
+    const onHeaderClick = (header: string) => {
+        if (type !== 'business_rules') return;
+        const key = sortableBusinessHeaders[header as keyof typeof sortableBusinessHeaders];
+        if (!key) return;
+        setSortBy(prev => {
+            if (prev === key) {
+                setSortDir(d => (d === 'asc' ? 'desc' : 'asc'));
+                return prev;
+            }
+            setSortDir('asc');
+            return key;
+        });
+    };
+
     // Build quick lookup: category -> KYD Pillar (e.g., Technical or Risk)
     const categoryToPillar: Record<string, string> = (() => {
         const map: Record<string, string> = {};
@@ -214,16 +241,34 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
         ? (parsedSources as SanctionSource[]).slice().sort((a, b) => (b.matched === true ? 1 : 0) - (a.matched === true ? 1 : 0))
         : type === 'business_rules'
         ? (() => {
-            const orderForPillar = (p: string) => (p === 'Technical' ? 0 : p === 'Risk' ? 1 : 2);
-            return (parsedSources as (BusinessRuleRow & { pillar?: string })[]).slice().sort((a, b) => {
-                const ap = (a as any).pillar || '';
-                const bp = (b as any).pillar || '';
-                const cmpPillar = orderForPillar(ap) - orderForPillar(bp);
-                if (cmpPillar !== 0) return cmpPillar;
-                const ac = (a.category || '').localeCompare(b.category || '');
-                if (ac !== 0) return ac;
-                // Within same category, sort by descending weight for usefulness
-                return Number(b.weight || 0) - Number(a.weight || 0);
+            const orderForPillar = (p: string) => (p === 'Technical' ? 0 : p === 'Risk' ? 1 : p === 'AI' ? 2 : 3);
+            const items = (parsedSources as (BusinessRuleRow & { pillar?: string })[]).slice();
+            if (!sortBy) {
+                return items.sort((a, b) => {
+                    const ap = (a as any).pillar || '';
+                    const bp = (b as any).pillar || '';
+                    const cmpPillar = orderForPillar(ap) - orderForPillar(bp);
+                    if (cmpPillar !== 0) return cmpPillar;
+                    const ac = (a.category || '').localeCompare(b.category || '');
+                    if (ac !== 0) return ac;
+                    return Number(b.weight || 0) - Number(a.weight || 0);
+                });
+            }
+            return items.sort((a, b) => {
+                const dir = sortDir === 'asc' ? 1 : -1;
+                if (sortBy === 'pillar') {
+                    return dir * (orderForPillar((a as any).pillar || '') - orderForPillar((b as any).pillar || ''));
+                }
+                if (sortBy === 'category') {
+                    return dir * ((a.category || '').localeCompare(b.category || ''));
+                }
+                if (sortBy === 'label') {
+                    return dir * ((a.label || '').localeCompare(b.label || ''));
+                }
+                if (sortBy === 'weight') {
+                    return dir * (Number(a.weight || 0) - Number(b.weight || 0));
+                }
+                return 0;
             });
         })()
         : parsedSources;
@@ -251,11 +296,23 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                     </colgroup>
                     <thead className={''}>
                         <tr>
-                            {headers.map(header => (
-                                <th key={header} scope="col" className={'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider'} style={{ color: 'var(--text-secondary)' }}>
-                                    {header}
-                                </th>
-                            ))}
+                            {headers.map(header => {
+                                const isSortable = type === 'business_rules' && Object.prototype.hasOwnProperty.call(sortableBusinessHeaders, header);
+                                const isActive = isSortable && sortBy === sortableBusinessHeaders[header as keyof typeof sortableBusinessHeaders];
+                                const arrow = isActive ? (sortDir === 'asc' ? ' ▲' : ' ▼') : '';
+                                return (
+                                    <th
+                                        key={header}
+                                        scope="col"
+                                        onClick={() => onHeaderClick(header)}
+                                        className={'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider'}
+                                        style={{ color: 'var(--text-secondary)', cursor: isSortable ? 'pointer' : 'default', userSelect: isSortable ? 'none' : 'auto' }}
+                                        aria-sort={isActive ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}
+                                    >
+                                        {header}{arrow}
+                                    </th>
+                                );
+                            })}
                         </tr>
                     </thead>
                     <tbody className={''}>
@@ -280,7 +337,7 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                             }
                             const br = source as BusinessRuleRow & { pillar?: string };
                             const anchorId = br.uid ? `rule-${br.uid}` : undefined;
-                            const ProviderIcon = ({ name }: { name?: string }) => {
+                            const ProviderIcon = ({ name, pillar }: { name?: string, pillar?: string }) => {
                                 const n = (name || '').toLowerCase();
                                 if (n.includes('github')) return <FaGithub />;
                                 if (n.includes('gitlab')) return <FaGitlab />;
@@ -290,13 +347,29 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                                 if (n.includes('kaggle')) return <FaKaggle />;
                                 if (n.includes('google')) return <FaGoogle />;
                                 if (n.includes('linkedin')) return <FaLinkedin />;
+                                const p = (pillar || '').toLowerCase();
+                                if (p === 'risk') return <RiskIcon width={28} height={28} />;
+                                if (p === 'technical') return <CodeIcon width={28} height={28} />;
+                                if (p === 'ai') return <AiIcon width={28} height={28} />;
                                 return <span className="inline-block w-8 h-8 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
                             };
                             return (
-                                <tr id={anchorId} key={index} className={'transition-colors hover:bg-black/5'}>
+                                <tr
+                                    id={anchorId}
+                                    key={index}
+                                    className={'transition-colors hover:bg-black/5'}
+                                    style={{
+                                        backgroundColor: (() => {
+                                            const w = Number(br.weight);
+                                            if (!Number.isFinite(w)) return undefined;
+                                            const hex = w > 0 ? green : w < 0 ? red : yellow;
+                                            return hexToRgba(hex, 0.06);
+                                        })(),
+                                    }}
+                                >
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>
                                         <span title={br.provider || ''} className={'inline-flex items-center text-4xl'} style={{ color: 'var(--text-main)' }}>
-                                            <ProviderIcon name={br.provider} />
+                                            <ProviderIcon name={br.provider} pillar={br.pillar} />
                                         </span>
                                     </td>
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{br.pillar || '—'}</td>

package/src/types.ts

@@ -9,6 +9,10 @@ export type Provider = {
     hoverBg: string;
     text: string;
   };
+  endpoint?: string;
+  placeholder?: string;
+  copy?: string;
+  beta?: boolean;
 };
 
 export interface PublicBadgeData {