kyd-shared-badge 0.3.125 → 0.3.127

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -217,7 +217,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
         {/* Quadrant layout */}
         <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
           {/* Top-left: Name, countries, badge image handled by ReportHeader */}
-          <div className={`${hasEnterpriseMatch ? '' : 'md:col-span-2'}`}>
+          <div className={`${hasEnterpriseMatch ? 'h-full' : 'md:col-span-2'}`}>
             <ReportHeader 
               badgeId={badgeId}
               developerName={badgeData.developerName}

package/src/components/ReportHeader.tsx

@@ -77,7 +77,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
   
   return (
     <div
-      className={'p-6 rounded-md border'}
+      className={'p-6 rounded-md border h-full'}
       style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${tint}, ${tint})` }}
     >
       {(() => {
@@ -99,7 +99,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
           </div>
         );
       })()}
-      <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-row items-center justify-between' : 'flex-col'}`}>
+      <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-row items-center justify-between' : 'flex-col h-full'}`}>
         {/* Info section: Title, Candidate, Details and Summary */}
         <div className={`w-full ${rightBadgeLayout ? 'md:flex-1' : ''}`}>
           <div className='space-y-1'>
@@ -139,7 +139,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
               {sources.length > 0 && (
                 <p className='flex items-center gap-2 mt-2 text-sm'>
                   <a href="#appendix-connected" className={'inline-flex items-center gap-2 group'} style={{ color: 'var(--text-secondary)' }}>
-                    <span className={'font-semibold'}>Sources:</span>
+                    <span className={'font-semibold'}>Sources Shared:</span>
                     <span className={'flex items-center gap-2'}>
                       {sources.map((provider, idx) => (
                         <span key={`${provider}-${idx}`} className={'text-sm'} style={{ color: 'var(--text-main)' }}>
@@ -187,8 +187,8 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
         </div>
 
         {/* Badge Image with robust centered overlay */}
-        <div className={`flex items-center ${rightBadgeLayout ? 'md:justify-end h-20' : 'justify-center w-full mt-4'} `}>
-          <div className={`relative w-full ${rightBadgeLayout ? 'max-w-[85px]' : 'px-28'} select-none`}>
+        <div className={`flex items-center ${rightBadgeLayout ? 'md:justify-end h-20' : 'justify-center w-full h-full mt-4'} `}>
+          <div className={`relative w-full ${rightBadgeLayout ? 'max-w-[85px]' : 'px-24 sm:px-6 lg:px-12 xl:px-28'} select-none`}>
             <Image 
               src={finalBadgeImageUrl} 
               alt="KYD Badge" 
@@ -198,7 +198,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
               className='w-full h-auto pointer-events-none'
             />
             <div className={`pointer-events-none absolute left-1/2  -translate-x-1/2 -translate-y-1/2 ${rightBadgeLayout ? 'top-[72%]' : 'top-[69%]'}`}>
-              <div className={`font-extrabold text-black ${rightBadgeLayout ? 'text-xs' : 'text-3xl'}`}>
+              <div className={`font-extrabold text-black ${rightBadgeLayout ? 'text-xs' : 'text-base sm:text-2xl md:text-2xl lg:text-3xl'}`}>
                 {Math.round(score || 0)}%
               </div>
             </div>

package/src/components/SkillsAppendixTable.tsx

@@ -56,7 +56,13 @@ const SkillsAppendixTable = ({ skillsAll }: { skillsAll?: SkillsAll }) => {
         <div key={cat}>
           <h5 id={`appendix-skills-cat-${slugify(cat)}`} className={'text-base font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>{cat}</h5>
           <div className={'overflow-auto rounded-lg border'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-            <table className="min-w-full text-sm">
+            <table className="min-w-full text-sm" style={{ tableLayout: 'fixed', width: '100%' }}>
+              <colgroup>
+                <col style={{ width: '40%' }} />
+                <col style={{ width: '20%' }} />
+                <col style={{ width: '20%' }} />
+                <col style={{ width: '20%' }} />
+              </colgroup>
               <thead>
                 <tr style={{ backgroundColor: 'var(--content-card-background)' }}>
                   <th className="text-left p-3" style={{ color: 'var(--text-secondary)' }}>Skill</th>

package/src/connect/ConnectAccounts.tsx

@@ -57,10 +57,18 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   const [previewAction, setPreviewAction] = useState<'connect' | 'disconnect' | null>(null);
 
   const apiBase = apiGatewayUrl || (typeof process !== 'undefined' ? (process.env.NEXT_PUBLIC_API_GATEWAY_URL as string) : '');
-  const connectedIds = useMemo(
-    () => new Set((connected || []).map(c => (c.id ? c.id.toLowerCase() : c.name.toLowerCase()))),
-    [connected]
-  );
+  const connectedIds = useMemo(() => {
+    const set = new Set((connected || []).map(c => (c.id ? c.id.toLowerCase() : c.name.toLowerCase())));
+    // Include virtual provider 'githubapp' when the GitHub App is installed
+    try {
+      const gh = (connected || []).find(c => (c?.name || '').toLowerCase() === 'github');
+      const setupAction = gh?.app_installation_info?.setupAction;
+      if (setupAction === 'install' || setupAction === 'created') {
+        set.add('githubapp');
+      }
+    } catch {}
+    return set;
+  }, [connected]);
   const reconnectIds = useMemo(() => new Set((needsReconnectIds || []).map(id => id.toLowerCase())), [needsReconnectIds]);
 
   // React to upstream changes to initialProviderId (e.g., after oauth success)
@@ -570,6 +578,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                                     <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
                                       <button
                                         onClick={() => { window.location.href = 'https://github.com/settings/installations'; }}
+                                        onMouseEnter={() => setPreview('githubapp', 'disconnect')}
+                                        onMouseLeave={clearPreview}
                                         className="inline-flex items-center gap-1.5 py-1.5 text-sm text-red-600 hover:text-red-700 hover:underline"
                                       >
                                         <Unlink className="size-3 sm:size-4" />

package/src/ui/connect-progress.tsx

@@ -108,18 +108,7 @@ export function ConnectProgress(props: ConnectProgressProps) {
       gain = 10
     }
     const to = Math.max(0, Math.min(100, progressPercent + gain))
-    if (process.env.NODE_ENV !== 'production') {
-      try {
-        // eslint-disable-next-line no-console
-        console.log('[ConnectProgress] selectedPulse', {
-          sid,
-          progressPercent,
-          gain,
-          to,
-          othersAlready: otherConnectedCount,
-        })
-      } catch {}
-    }
+   
     return { from: progressPercent, to }
   }, [selectedProviderId, normalizedIds, progressPercent, otherConnectedCount])
 

package/src/ui/progress-circle.tsx

@@ -104,7 +104,13 @@ export function ProgressCircle(props: ProgressCircleProps) {
       </svg>
       {centerIndicator ? (
         <div className={`absolute inset-0 flex items-center justify-center`} aria-hidden>
-          <ArrowUpIcon className="w-4 h-4 text-[var(--icon-accent)]" />
+          <ArrowUpIcon
+            className={`w-4 h-4`}
+            style={{
+              color: centerIndicator === 'up' ? greenHex : redHex,
+              transform: centerIndicator === 'up' ? undefined : 'rotate(180deg)',
+            }}
+          />
         </div>
       ) : null}
     </div>