kyd-shared-badge 0.3.43 → 0.3.45

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -132,7 +132,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
         const keys = new Set(tabs.map(t => t.key));
         if (hash && keys.has(hash)) setActiveTab(hash);
         // If the hash targets a skills appendix anchor, switch to Appendix
-        if (hash && (hash.startsWith('appendix-skills') || hash.includes('appendix-skills-cat-'))) {
+        if (hash && (hash.startsWith('appendix-skills') || hash.includes('appendix-skills-cat-') || hash === 'appendix-connected')) {
           setActiveTab('appendix');
         }
       } catch {}
@@ -428,7 +428,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               })()}
             </div>
           )}
-          <div>
+          <div id="appendix-connected">
             <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
           </div>
         </div>

package/src/components/ConnectedPlatforms.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { formatLocalDate } from '../utils/date';
 import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
 import { SiCredly, SiFiverr } from 'react-icons/si';
@@ -35,6 +35,26 @@ const formatProviderName = (name?: string) => {
 
 const ConnectedPlatforms = ({ accounts, authenticity }: { accounts?: ConnectedAccount[]; authenticity?: { label?: string; description?: string; oauth_connected?: string[]; mismatches?: Array<{ provider?: string; detail?: string }> } }) => {
   const list = Array.isArray(accounts) ? accounts : [];
+  useEffect(() => {
+    const flash = () => {
+      const hash = typeof window !== 'undefined' ? window.location.hash : '';
+      if (!hash) return;
+      const id = hash.startsWith('#') ? hash.slice(1) : hash;
+      const el = document.getElementById(id) as HTMLElement | null;
+      if (!el) return;
+      const originalBg = el.style.backgroundColor;
+      el.style.transition = 'background-color 300ms ease';
+      el.style.backgroundColor = 'rgba(2, 163, 137, 0.14)';
+      // Ensure visibility after tab switch
+      try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch {}
+      setTimeout(() => {
+        el.style.backgroundColor = originalBg || '';
+      }, 1200);
+    };
+    flash();
+    window.addEventListener('hashchange', flash);
+    return () => window.removeEventListener('hashchange', flash);
+  }, []);
   if (list.length === 0) return null;
   return (
     <div className="pt-8">

package/src/components/ReportHeader.tsx

@@ -71,6 +71,9 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
             <div className={'text-sm'}>
               <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Account Authenticity {isCritical ? 'Warning' : 'Notice'}</div>
               <div className={'mt-1'} style={{ color: 'var(--text-secondary)' }}>{accountAuthenticity?.description || (isCritical ? 'We detected signals that some linked accounts may be inauthentic. Review sources below.' : 'Some inconsistencies were observed across linked accounts. Review sources below.')}</div>
+              <div className={'mt-2'}>
+                <a href="#appendix-connected" className={'text-xs font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>See more</a>
+              </div>
             </div>
           </div>
         );