kyd-shared-badge 0.3.121 → 0.3.123

package/src/connect/types.ts

@@ -40,6 +40,9 @@ export interface ConnectAccountsProps {
   githubAppSlugId: string;
   userId: string;
   inviteId?: string;
+  shouldShowContinueButton?: boolean;
+  shouldDisableContinueButton?: boolean;
+  onContinue?: () => void;
 }
 
 

package/src/ui/connect-progress.tsx

@@ -8,86 +8,166 @@ export type ConnectProgressProps = {
   connectedIds: Set<string>
   className?: string
   layout?: 'fixed-desktop' | 'inline'
+  // Preview what the score would be if a connect/disconnect action occurred
+  previewProviderId?: string | null
+  previewAction?: 'connect' | 'disconnect' | null
+  // When a provider is selected (in the connect screen), show a pulsing gain segment
+  selectedProviderId?: string | null
 }
 
 export function ConnectProgress(props: ConnectProgressProps) {
-  const { providers, connectedIds, className, layout = 'fixed-desktop' } = props
+  const { providers, connectedIds, className, layout = 'fixed-desktop', previewProviderId, previewAction, selectedProviderId } = props
 
-  const hasGithub = connectedIds.has('github')
-  const hasLinkedIn = connectedIds.has('linkedin')
+  const normalizeId = (s: string) => s.toLowerCase().replace(/[^a-z]/g, '')
+  const computeNormalizedSet = (ids: Set<string>) => {
+    const norm = new Set<string>()
+    ids.forEach(id => norm.add(normalizeId(id)))
+    return norm
+  }
+
+  const normalizedIds = useMemo(() => computeNormalizedSet(connectedIds), [connectedIds])
+  const hasGithub = normalizedIds.has('github')
+  const hasLinkedIn = normalizedIds.has('linkedin')
   const otherConnectedCount = useMemo(() => {
     let count = 0
-    connectedIds.forEach(id => { if (id !== 'github' && id !== 'linkedin') count += 1 })
+    normalizedIds.forEach(id => { if (id !== 'github' && id !== 'githubapp' && id !== 'linkedin') count += 1 })
     return count
-  }, [connectedIds])
+  }, [normalizedIds])
+
+  const computePercent = (ids: Set<string>) => {
+    const norm = computeNormalizedSet(ids)
+    const gh = norm.has('github')
+    const gha = norm.has('githubapp')
+    const li = norm.has('linkedin')
+    let others = 0
+    norm.forEach(id => { if (id !== 'github' && id !== 'githubapp' && id !== 'linkedin') others += 1 })
+    const githubWeight = gh ? 60 : 0
+    const githubAppWeight = gha ? 20 : 0
+    const linkedinWeight = li ? 0 : 0 // LinkedIn is not included in the score
+    const othersWeight = others * 10
+    return Math.max(0, Math.min(100, githubWeight + githubAppWeight + linkedinWeight + othersWeight))
+  }
 
-  const progressPercent = useMemo(() => {
-    const githubWeight = hasGithub ? 65 : 0
-    const linkedinWeight = hasLinkedIn ? 15 : 0
-    const othersWeight = Math.min(otherConnectedCount, 2) * 10
-    return Math.max(0, Math.min(100, githubWeight + linkedinWeight + othersWeight))
-  }, [hasGithub, hasLinkedIn, otherConnectedCount])
+  const progressPercent = useMemo(() => computePercent(connectedIds), [connectedIds])
+
+  const previewPercent = useMemo(() => {
+    const pid = normalizeId(previewProviderId || '')
+    if (!pid || !previewAction) return null as number | null
+    const next = new Set<string>(Array.from(normalizedIds))
+    const has = next.has(pid)
+    if (previewAction === 'connect' && !has) next.add(pid)
+    if (previewAction === 'disconnect' && has) next.delete(pid)
+    const val = computePercent(next)
+    if (process.env.NODE_ENV !== 'production') {
+      try {
+        // Debug details for preview behavior
+        const beforePercent = progressPercent
+        const beforeOthers = (() => {
+          let c = 0; normalizedIds.forEach(id => { if (id !== 'github' && id !== 'githubapp' && id !== 'linkedin') c += 1 })
+          return c
+        })()
+        let afterOthers = 0; next.forEach(id => { if (id !== 'github' && id !== 'githubapp' && id !== 'linkedin') afterOthers += 1 })
+        // eslint-disable-next-line no-console
+        console.log('[ConnectProgress] preview', {
+          pid,
+          previewAction,
+          hasBefore: normalizedIds.has(pid),
+          beforePercent,
+          afterPercent: val,
+          beforeOthers,
+          afterOthers,
+          normalizedIds: Array.from(normalizedIds),
+          nextIds: Array.from(next),
+        })
+      } catch {}
+    }
+    return val === progressPercent ? null : val
+  }, [previewProviderId, previewAction, normalizedIds, progressPercent])
 
   const progressCopy = useMemo(() => {
-    const score = progressPercent
-    if (score === 0) {
+    const score = previewPercent ?? progressPercent
+
+    if (score < 20) {
       return {
-        headline: 'Get started — connect GitHub',
-        body: 'GitHub contributes ~65% of your profile strength. Add LinkedIn (+15%) and 1–2 other platforms (+10% each). 70%+ is strong; 100% is optional.'
+        headline: 'Insufficient',
+        body: 'No meaningful data connections',
       }
-    }
-    if (hasGithub && score < 70) {
+    } else if (score < 40) {
       return {
-        headline: 'Good base — add more signals',
-        body: 'Add LinkedIn (+15%) and at least one other platform (+10%) to reach 70%+, which is considered strong. 100% is not mandatory.'
+        headline: 'Sparse',
+        body: 'Limited verified sources',
       }
-    }
-    if (!hasGithub && score < 70) {
+    } else if (score < 60) {
       return {
-        headline: 'Add GitHub for a big boost',
-        body: 'Current signals are light. Connecting GitHub adds ~65% weight and significantly improves your profile.'
+        headline: 'Adequate',
+        body: 'Adequate → Minimum viable data coverage',
       }
-    }
-    if (score >= 70 && score < 90) {
+    } else if (score < 80) {
       return {
-        headline: 'Strong — recommended coverage achieved',
-        body: '70%+ indicates a strong profile. Adding more platforms can further improve verification. 100% is optional but even better.'
+        headline: 'Robust',
+        body: 'Strong, multi-source data foundation',
       }
-    }
-    if (score >= 90) {
+    } else {
       return {
-        headline: 'Excellent — high confidence',
-        body: 'You are near complete coverage. 100% is not required, but additional platforms can further increase confidence.'
+        headline: 'Optimal',
+        body: 'Comprehensive, high-confidence dataset',
       }
     }
-    if (score === 100) {
-      return {
-        headline: 'Complete — high confidence',
-        body: 'You\'ve achieved the recommended coverage for a very strong profile! Connecting even more accounts can further strengthen your verification.'
-      }
+  }, [previewPercent, progressPercent]);
+
+  const selectedPulse = useMemo(() => {
+    const sid = normalizeId(selectedProviderId || '')
+    if (!sid || sid === 'githubapp') return { from: undefined as number | undefined, to: undefined as number | undefined }
+    // Do not show if already connected
+    if (normalizedIds.has(sid)) return { from: undefined as number | undefined, to: undefined as number | undefined }
+    // Potential gain if they proceed with this provider
+    let gain = 0
+    if (sid === 'github') gain = 65
+    else if (sid === 'linkedin') gain = 15
+    else {
+      // Others always contribute +10 each (no cap)
+      const othersAlready = otherConnectedCount
+      gain = 10
     }
-    return {
-      headline: 'Keep going',
-      body: 'Connect more platforms to strengthen your profile. 70%+ is strong; 100% is optional.'
+    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 {}
     }
-  }, [progressPercent, hasGithub])
+    return { from: progressPercent, to }
+  }, [selectedProviderId, normalizedIds, progressPercent, otherConnectedCount])
+
+  const isPreviewing = previewPercent !== null && previewPercent !== undefined
+  const valueToShow = previewPercent ?? progressPercent
 
   const content = (
     <Card className={`border-[var(--icon-button-secondary)] ${className || ''}`} style={{ backgroundColor: 'var(--content-card-background)'}}>
-      <CardContent className="py-3 px-3">
-        <div className="flex items-center gap-3">
-          <ProgressCircle value={progressPercent} size={64} thickness={6} />
-          <div className="min-w-0 max-w-xs">
-            <div className="text-base font-semibold truncate" style={{ color: 'var(--text-main)'}}>{progressCopy.headline}</div>
-            <div className="text-sm mt-0.5" style={{ color: 'var(--text-secondary)'}}>
+      <div className="p-4">
+        <div className="flex items-start gap-3">
+          <ProgressCircle
+            value={valueToShow}
+            size={64}
+            thickness={6}
+            highlightFrom={isPreviewing ? undefined : selectedPulse.from}
+            highlightTo={isPreviewing ? undefined : selectedPulse.to}
+            highlightPulse={Boolean(selectedPulse.to) && !isPreviewing}
+          />
+          <div className="min-w-0 max-w-xs flex flex-col gap-2 items-start justify-start">
+            <div className="text-base font-semibold truncate text-[var(--text-main)]">{progressCopy.headline}</div>
+            <div className="text-sm text-[var(--text-secondary)]">
               {progressCopy.body}
             </div>
-            <div className="text-sm mt-1" style={{ color: 'var(--text-secondary)'}}>
-              Weighted score • {progressPercent}%
-            </div>
           </div>
         </div>
-      </CardContent>
+      </div>
     </Card>
   )
 

package/src/ui/progress-circle.tsx

@@ -1,5 +1,6 @@
 'use client'
 import React from 'react'
+import { scoreToCssVar } from '../colors'
 
 export type ProgressCircleProps = {
   value: number
@@ -8,10 +9,14 @@ export type ProgressCircleProps = {
   className?: string
   showLabel?: boolean
   label?: string
+  // Optional highlight segment (e.g., to preview gain from an action)
+  highlightFrom?: number
+  highlightTo?: number
+  highlightPulse?: boolean
 }
 
 export function ProgressCircle(props: ProgressCircleProps) {
-  const { value, size = 72, thickness = 6, className, showLabel = true, label } = props
+  const { value, size = 72, thickness = 6, className, showLabel = true, label, highlightFrom, highlightTo, highlightPulse } = props
 
   const rawId = React.useId()
   const gradientId = React.useMemo(() => `kyd-pc-${String(rawId).replace(/:/g, '')}` , [rawId])
@@ -21,6 +26,14 @@ export function ProgressCircle(props: ProgressCircleProps) {
   const circumference = 2 * Math.PI * radius
   const dashOffset = circumference * (1 - clamped / 100)
 
+  const hasHighlight = Number.isFinite(highlightFrom as number) && Number.isFinite(highlightTo as number) && (typeof highlightFrom === 'number') && (typeof highlightTo === 'number') && highlightTo! > (highlightFrom as number)
+  const fromClamped = hasHighlight ? Math.max(0, Math.min(100, highlightFrom as number)) : 0
+  const toClamped = hasHighlight ? Math.max(0, Math.min(100, highlightTo as number)) : 0
+  const highlightLength = hasHighlight ? circumference * ((toClamped - fromClamped) / 100) : 0
+  const highlightOffset = hasHighlight ? circumference * (1 - toClamped / 100) : 0
+
+  const strokeColor = React.useMemo(() => scoreToCssVar(clamped), [clamped])
+
   return (
     <div className={`relative inline-flex items-center justify-center ${className || ''}`} style={{ width: size, height: size }}>
       <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="block">
@@ -44,34 +57,44 @@ export function ProgressCircle(props: ProgressCircleProps) {
           cy={size / 2}
           r={radius}
           fill="none"
-          stroke={`url(#${gradientId})`}
+          stroke={strokeColor}
           strokeWidth={thickness}
           strokeLinecap="round"
           strokeDasharray={circumference}
           strokeDashoffset={dashOffset}
-          style={{ transition: 'stroke-dashoffset 800ms ease' }}
+          style={{ transition: 'stroke-dashoffset 800ms ease, stroke 400ms ease, stroke-opacity 400ms ease' }}
           transform={`rotate(-90 ${size / 2} ${size / 2})`}
         />
+        {hasHighlight ? (
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            stroke="var(--icon-accent)"
+            strokeOpacity={0.6}
+            strokeWidth={thickness}
+            strokeLinecap="round"
+            strokeDasharray={`${highlightLength} ${circumference}`}
+            strokeDashoffset={highlightOffset}
+            transform={`rotate(-90 ${size / 2} ${size / 2})`}
+            className={highlightPulse ? 'animate-pulse' : ''}
+          />
+        ) : null}
         {/* subtle pulsing halo */}
         <circle
           cx={size / 2}
           cy={size / 2}
           r={radius + thickness / 2}
           fill="none"
-          stroke="var(--icon-accent)"
+          stroke={strokeColor}
           strokeOpacity={0.15}
           strokeWidth={2}
           className="animate-pulse"
+          style={{ transition: 'stroke 400ms ease, stroke-opacity 400ms ease' }}
         />
       </svg>
-      {showLabel ? (
-        <div
-          className="absolute inset-0 flex items-center justify-center text-[10px] sm:text-xs font-medium"
-          style={{ color: 'var(--text-main)' }}
-        >
-          {label ? label : `${Math.round(clamped)}%`}
-        </div>
-      ) : null}
+      
     </div>
   )
 }