kyd-shared-badge 0.3.121 → 0.3.122

package/package.json

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

package/src/connect/ConnectAccounts.tsx

@@ -3,9 +3,9 @@ import { useRouter } from 'next/navigation';
 import { ProviderIcon } from '../utils/provider';
 import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
-import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Settings, Shield, InfoIcon } from 'lucide-react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle } from '../ui';
+import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Eye, Lock, InfoIcon } from 'lucide-react';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { Button, Input, Spinner, Card, CardHeader, CardContent, CardTitle, ConnectProgress } from '../ui';
 import Link from 'next/link';
 import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '../ui/';
 
@@ -42,6 +42,9 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     githubAppSlugId,
     userId,
     inviteId,
+    shouldShowContinueButton,
+    shouldDisableContinueButton,
+    onContinue,
   } = props;
 
   const router = useRouter();
@@ -49,8 +52,9 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   const [linkUrl, setLinkUrl] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isDisconnecting, setIsDisconnecting] = useState<string | null>(null);
-  const [showGithubManage, setShowGithubManage] = useState(false);
   const [showDataHandling, setShowDataHandling] = useState(false);
+  const [previewProviderId, setPreviewProviderId] = useState<string | null>(null);
+  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(
@@ -63,8 +67,6 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   useEffect(() => {
     if (initialProviderId && initialProviderId !== selectedProviderId) {
       setSelectedProviderIdAndCallback(initialProviderId);
-      // If we landed here from initialProviderId, show the existing card (not manage)
-      if (initialProviderId === 'githubapp') setShowGithubManage(false);
     }
     // Do not clear selection if initialProviderId becomes falsy later
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -114,7 +116,6 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
       });
       const data = await res.json().catch(() => ({}));
       if (!res.ok) throw new Error(data?.error || `Failed to disconnect ${providerId}.`);
-      setShowGithubManage(false);
       if (onDisconnected) onDisconnected(providerId);
     } catch (e) {
       const err = e as Error;
@@ -194,10 +195,18 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     ) || null;
   }, [selectedProviderId, providers]);
 
+  const setPreview = (providerId: string, action: 'connect' | 'disconnect') => {
+    setPreviewProviderId(providerId.toLowerCase());
+    setPreviewAction(action);
+  };
+  const clearPreview = () => {
+    setPreviewProviderId(null);
+    setPreviewAction(null);
+  };
+
   const handleConnectBack = () => {
     setSelectedProviderIdAndCallback(null);
     setLinkUrl('');
-    setShowGithubManage(false);
     setShowDataHandling(false);
   };
 
@@ -206,11 +215,18 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     animate: { opacity: 1, y: 0 },
     exit: { opacity: 0, y: -20 },
   };
+  const shouldReduceMotion = useReducedMotion();
+  const ease = [0.22, 1, 0.36, 1] as const;
   const fadeOnly = {
     initial: { opacity: 0 },
     animate: { opacity: 1 },
     exit: { opacity: 0 },
   };
+  const fadeIn = {
+    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 8 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.3, ease } },
+    exit: { opacity: 0, y: shouldReduceMotion ? 0 : -4, transition: { duration: 0.2, ease } }
+  };
   
   // GitHub status helpers
   const githubConnectedAccount = useMemo(() => {
@@ -225,482 +241,451 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   // Progress UI is outsourced to ConnectProgress
   
   return (
-    <>
-
-      <AnimatePresence initial={false} mode="wait">
-      {showDataHandling ? (
-        <motion.div
-          key="data-handling-card"
-          className="rounded-xl border max-w-xl w-full"
-          initial="initial" animate="animate" exit="exit" variants={fadeOnly}
-          style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
-        >
-          <div className="sm:p-6 p-4">
-            <button onClick={() => setShowDataHandling(false)} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
-              <ArrowLeft className="w-4 h-4" />
-              Back
-            </button>
-            <div className="text-center">
-              <div className="flex justify-center mb-4">
-                <InfoIcon className="w-10 h-10 text-[var(--text-main)]" />
-              </div>
-              <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>How your data is handled</h3>
-              <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-2 leading-relaxed">
-                We understand that giving access to your private repositories can be a bit scary. So here's the deal: We install the KYD GitHub App in your account. The app has 
-                <span className="mx-1"><Link href="https://docs.github.com/en/rest/authentication/permissions-required-for-github-apps?apiVersion=2022-11-28#repository-permissions-for-contents" target="_blank" rel="noopener noreferrer" className="underline" style={{ color: 'var(--icon-accent)'}}>Contents <ExternalLink className="size-3 inline-block" /></Link></span>
-                read access - only to the repositories you select. Then, once you request a badge assessment, we read the repositories and analyze the code, then its deleted, forever. Your code is not accessible to anyone, not even us. 
-              </p>
-              <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-3 leading-relaxed">
-                For other details, see our{' '}
-                <Link href="https://www.knowyourdeveloper.ai/privacy-policy" target="_blank" rel="noopener noreferrer" className="underline" style={{ color: 'var(--icon-accent)'}}>
-                  Privacy Policy <ExternalLink className="size-3 inline-block ml-1" />
-                </Link>.
-              </p>
-            </div>
-          </div>
-        </motion.div>
-      ) : selectedProvider && selectedProvider.id !== 'githubapp' ? (
-        <motion.div
-          key="connect-card"
-          initial="initial" animate="animate" exit="exit" variants={fadeOnly}
-          className="rounded-xl border max-w-xl w-full"
-          style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
-        >
-          <div className="sm:p-6 p-4">
-            <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
-              <ArrowLeft className="w-4 h-4" />
-              Back
-            </button>
-            <div className="text-center">
-              <div className="flex justify-center mb-4">
-                <ProviderIcon name={selectedProvider.id} className={`w-10 h-10 ${selectedProvider.iconColor || 'text-gray-500'}`} />
-              </div>
-              <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>
-                {selectedProvider.connectionType === 'url' || (selectedProvider.connectionType || 'url') === 'link'
-                  ? `Use Public ${selectedProvider.name} Profile`
-                  : `Connect ${selectedProvider.name}`}
-              </h3>
-              <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto">
-                {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link')
-                  ? (selectedProvider.placeholder || 'Enter your public profile URL.')
-                  : `Authorize with ${selectedProvider.name} to connect your account.`}
-              </p>
-            </div>
-
-            {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link') ? (
-              <motion.form
-                onSubmit={(e) => { e.preventDefault(); onSubmitLink(selectedProvider.id); }}
-                className="mt-6 space-y-4"
-                initial="initial" animate="animate" exit="exit" variants={cardVariants}
-              >
-                {selectedProvider.id === 'linkedin' && (
-                  <>
-                    <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
-                      <Link
-                        href="https://www.linkedin.com/public-profile/settings"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="underline"
-                        style={{ color: 'var(--icon-accent)' }}
-                      >
-                        LinkedIn <ExternalLink className="size-3 inline-block ml-1 underline-0" />
-                      </Link>
-                      . This opens your public profile settings (you’ll see your shareable URL if you’re signed in).
-                    </p>
-                    <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
-                      LinkedIn data is not used to contribute to your score.
-                    </p>
-                  </>
-
-                )}
-                <div className="relative">
-                  <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" />
-                  <Input
-                    type="url"
-                    value={linkUrl}
-                    onChange={(e) => setLinkUrl(e.target.value)}
-                    placeholder={selectedProvider.placeholder || 'https://example.com/your-profile'}
-                    required
-                    className="w-full border bg-transparent p-2 pl-9"
-                    style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                    onPaste={selectedProvider.id === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
-                    onBlur={selectedProvider.id === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
-                  />
-                </div>
-                <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                  <Button type="submit" className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors" disabled={isSubmitting}>
-                    {isSubmitting ? (
-                      <div className="flex items-center justify-center">
-                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                        Connecting...
-                      </div>
-                    ) : (
-                      'Connect'
-                    )}
-                  </Button>
-                </motion.div>
-              </motion.form>
-            ) : (
-              <div className="mt-6">
-                <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                  <Button onClick={() => onOAuth(selectedProvider.id)} className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors">
-                    <ExternalLink className="w-4 h-4 mr-2" />
-                    Connect with {selectedProvider.name}
-                  </Button>
-                </motion.div>
-              </div>
-            )}
+    <div className="w-full grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_380px] lg:justify-center gap-6 items-start max-w-7xl">
+      <div className="w-full flex justify-end">
+        <div className="w-full max-w-lg">
+          {/* Mobile: show progress above accounts, left-aligned */}
+          <div className="lg:hidden mb-4">
+            <ConnectProgress
+              layout="inline"
+              providers={providers}
+              connectedIds={connectedIds}
+              previewProviderId={previewProviderId}
+              previewAction={previewAction}
+              selectedProviderId={selectedProvider?.id || null}
+            />
           </div>
-        </motion.div>
-      ) : selectedProvider && selectedProvider.id === 'githubapp' ? (
-        (!showGithubManage && initialProviderId === 'githubapp') ? (
-          <div
-            key="github-card"
-            className="rounded-xl border max-w-xl w-full"
-            style={{
-              backgroundColor: 'var(--content-card-background)',
-              borderColor: 'var(--icon-button-secondary)',
-            }}
-          >
-            <motion.div className="p-6 flex flex-col items-center" initial="initial" animate="animate" exit="exit" variants={fadeOnly}>
-              <div className="w-full flex items-center gap-3 mb-2 justify-center">
-                <ProviderIcon name="github" className="w-8 h-8 inline-block" />
-                <span className="sm:text-xl text-base font-semibold text-[var(--text-main)]">Connect Private GitHub Repositories</span>
-              </div>
-              <p className="sm:text-sm text-xs text-[var(--text-secondary)] leading-relaxed mt-1 mb-6 text-center max-w-md">
-                You&apos;ve successfully linked your GitHub account! 
-                <br />
-                To complete your profile, you can optionally allow access to your <b>private repositories</b>. This is useful if you&apos;d like to highlight private work or share additional contributions for verification.
-                <br /><br />
-                <span className="text-[var(--text-main)] font-medium">
-                  Would you like to connect your private repositories?
-                </span>
-                <button
-                  type="button"
-                  onClick={() => setShowDataHandling(true)}
-                  className="sm:text-sm text-xs underline text-[var(--icon-accent)] hover:text-[var(--icon-accent-hover)]"
-                >
-                  How KYD Handles Your Data
+          {showDataHandling ? (
+            <motion.div
+              key="data-handling-card"
+              className="rounded-xl border max-w-xl w-full"
+              initial="initial" animate="animate" exit="exit" variants={fadeOnly}
+              style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
+            >
+              <div className="sm:p-6 p-4">
+                <button onClick={() => setShowDataHandling(false)} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
+                  <ArrowLeft className="w-4 h-4" />
+                  Back
                 </button>
-              </p>
-              <div className="flex flex-col sm:flex-row w-full gap-3 mt-2 justify-center items-center">
-                <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                  <Button
-                    className="w-full sm:w-auto text-[var(--text-main)] transition-colors border border-[var(--icon-button-secondary)]"
-                    variant="destructive"
-                    onClick={() => {
-                      handleConnectBack();
-                    }}
-                  >
-                    No, don&#39;t connect
-                  </Button>
-                </motion.div>
-                <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
-                  <Button
-                    className="w-full sm:w-auto bg-[var(--icon-accent)] text-white transition-colors font-semibold"
-                    onClick={onGithubAppInstall}
-                  >
-                    <span className="flex items-center justify-center">
-                      <ExternalLink className="w-4 h-4 mr-2" />
-                      Yes, connect my private repos
-                    </span>
-                  </Button>
-                </motion.div>
+                <div className="text-center">
+                  <div className="flex justify-center mb-4">
+                    <InfoIcon className="w-10 h-10 text-[var(--text-main)]" />
+                  </div>
+                  <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>How your data is handled</h3>
+                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-2 leading-relaxed">
+                    We understand that giving access to your private repositories can be a bit scary. So here's the deal: We install the KYD GitHub App in your account. The app has 
+                    <span className="mx-1"><Link href="https://docs.github.com/en/rest/authentication/permissions-required-for-github-apps?apiVersion=2022-11-28#repository-permissions-for-contents" target="_blank" rel="noopener noreferrer" className="underline" style={{ color: 'var(--icon-accent)'}}>Contents <ExternalLink className="size-3 inline-block" /></Link></span>
+                    read access - only to the repositories you select. Then, once you request a badge assessment, we read the repositories and analyze the code, then its deleted, forever. Your code is not accessible to anyone, not even us. 
+                  </p>
+                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-3 leading-relaxed">
+                    For other details, see our{' '}
+                    <Link href="https://www.knowyourdeveloper.ai/privacy-policy" target="_blank" rel="noopener noreferrer" className="underline" style={{ color: 'var(--icon-accent)'}}>
+                      Privacy Policy <ExternalLink className="size-3 inline-block ml-1" />
+                    </Link>.
+                  </p>
+                </div>
               </div>
             </motion.div>
-          </div>
-        ) : (
-          <motion.div
-            key="github-manage"
-            className="rounded-xl border max-w-xl w-full"
-            style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
-            variants={cardVariants}
-            initial="initial"
-            animate="animate"
-            exit="exit"
-          >
-            <div className="sm:p-6 p-4">
-              <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
-                <ArrowLeft className="w-4 h-4" />
-                Back
-              </button>
-              <div className="text-center">
-                <div className="flex justify-center mb-4">
-                  <ProviderIcon name="github" className="w-10 h-10" />
+          ) : selectedProvider && selectedProvider.id !== 'githubapp' ? (
+            <motion.div
+              key="connect-card"
+              initial="initial" animate="animate" exit="exit" variants={fadeOnly}
+              className="rounded-xl border max-w-xl w-full"
+              style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
+            >
+              <div className="sm:p-6 p-4">
+                <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
+                  <ArrowLeft className="w-4 h-4" />
+                  Back
+                </button>
+                <div className="text-center">
+                  <div className="flex justify-center mb-4">
+                    <ProviderIcon name={selectedProvider.id} className={`w-10 h-10 ${selectedProvider.iconColor || 'text-gray-500'}`} />
+                  </div>
+                  <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>
+                    {selectedProvider.connectionType === 'url' || (selectedProvider.connectionType || 'url') === 'link'
+                      ? `Use Public ${selectedProvider.name} Profile`
+                      : `Connect ${selectedProvider.name}`}
+                  </h3>
+                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto">
+                    {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link')
+                      ? (selectedProvider.placeholder || 'Enter your public profile URL.')
+                      : `Authorize with ${selectedProvider.name} to connect your account.`}
+                  </p>
                 </div>
-                <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>Manage GitHub Connections</h3>
-                <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md">
-                  Connect or disconnect your GitHub OAuth account and optional GitHub App for private repositories.
-                </p>
-              </div>
 
-              <div className="mt-6 space-y-4">
-                <div className="rounded-lg border p-4" style={{ borderColor: 'var(--icon-button-secondary)'}}>
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <div className="font-semibold sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>GitHub OAuth</div>
-                      <div className="sm:text-sm text-xs" style={{ color: 'var(--text-secondary)'}}>{isGithubConnected ? 'Connected' : 'Not connected'}</div>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      {isGithubConnected ? (
-                        <Button
-                          onClick={() => onDisconnect('github')}
-                          className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
-                          style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                          variant="destructive"
-                          disabled={isDisconnecting === 'github'}
-                        >
-                          {isDisconnecting === 'github' ? <Spinner /> : <Unlink className="size-3 sm:size-4" />}
-                          <span>Disconnect</span>
-                        </Button>
-                      ) : (
-                        <Button
-                          onClick={() => onOAuth('github')}
-                          className="bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)]"
-                        >
-                          <ExternalLink className="w-4 h-4 mr-2" />
-                          Connect
-                        </Button>
-                      )}
+                {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link') ? (
+                  <motion.form
+                    onSubmit={(e) => { e.preventDefault(); onSubmitLink(selectedProvider.id); }}
+                    className="mt-6 space-y-4"
+                    initial="initial" animate="animate" exit="exit" variants={cardVariants}
+                  >
+                    {selectedProvider.id === 'linkedin' && (
+                      <>
+                        <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
+                          <Link
+                            href="https://www.linkedin.com/public-profile/settings"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="underline"
+                            style={{ color: 'var(--icon-accent)' }}
+                          >
+                            LinkedIn <ExternalLink className="size-3 inline-block ml-1 underline-0" />
+                          </Link>
+                          . This opens your public profile settings (you’ll see your shareable URL if you’re signed in).
+                        </p>
+                        <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
+                          LinkedIn data is not used to contribute to your score.
+                        </p>
+                      </>
+
+                    )}
+                    <div className="relative">
+                      <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" />
+                      <Input
+                        type="url"
+                        value={linkUrl}
+                        onChange={(e) => setLinkUrl(e.target.value)}
+                        placeholder={selectedProvider.placeholder || 'https://example.com/your-profile'}
+                        required
+                        className="w-full border bg-transparent p-2 pl-9"
+                        style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                        onPaste={selectedProvider.id === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
+                        onBlur={selectedProvider.id === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
+                      />
                     </div>
+                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                      <Button type="submit" className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors" disabled={isSubmitting}>
+                        {isSubmitting ? (
+                          <div className="flex items-center justify-center">
+                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                            Connecting...
+                          </div>
+                        ) : (
+                          'Connect'
+                        )}
+                      </Button>
+                    </motion.div>
+                  </motion.form>
+                ) : (
+                  <div className="mt-6">
+                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                      <Button onClick={() => onOAuth(selectedProvider.id)} className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors">
+                        <ExternalLink className="w-4 h-4 mr-2" />
+                        Connect with {selectedProvider.name}
+                      </Button>
+                    </motion.div>
                   </div>
-                </div>
-
-                <div className="rounded-lg border p-4" style={{ borderColor: 'var(--icon-button-secondary)'}}>
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <div className="font-semibold sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>GitHub App (Private Repos)</div>
+                )}
+              </div>
+            </motion.div>
+          ) : selectedProvider && selectedProvider.id === 'githubapp' ? (
+              <div
+                key="github-card"
+                className="rounded-xl border max-w-xl w-full"
+                style={{
+                  backgroundColor: 'var(--content-card-background)',
+                  borderColor: 'var(--icon-button-secondary)',
+                }}
+              >
+                <motion.div className="p-6 flex flex-col items-center" initial="initial" animate="animate" exit="exit" variants={fadeOnly}>
+                  <div className="w-full flex items-center gap-3 mb-2 justify-center">
+                    <ProviderIcon name="github" className="w-8 h-8 inline-block" />
+                    <span className="sm:text-xl text-base font-semibold text-[var(--text-main)]">Connect Private GitHub Repositories</span>
+                  </div>
+                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] leading-relaxed mt-1 mb-6 text-center max-w-md">
+                    You&apos;ve successfully linked your GitHub account! 
+                    <br />
+                    To complete your profile, you can optionally allow access to your <b>private repositories</b>. This is useful if you&apos;d like to highlight private work or share additional contributions for verification.
+                    <br /><br />
+                    <span className="text-[var(--text-main)] font-medium">
+                      Would you like to connect your private repositories?
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => setShowDataHandling(true)}
+                      className="sm:text-sm text-xs underline text-[var(--icon-accent)] hover:text-[var(--icon-accent-hover)]"
+                    >
+                      How KYD Handles Your Data
+                    </button>
+                  </p>
+                  <div className="flex flex-col sm:flex-row w-full gap-3 mt-2 justify-center items-center">
+                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                       <Button
-                        className="inline-flex items-center text-xs font-medium text-[var(--icon-accent)] hover:text-[var(--icon-accent-hover)] transition-colors underline px-0 py-0 h-auto"
-                        onClick={() => setShowDataHandling(true)}
-                        variant="link"
+                        className="w-full sm:w-auto text-[var(--text-main)] transition-colors border border-[var(--icon-button-secondary)]"
+                        variant="destructive"
+                        onClick={() => {
+                          handleConnectBack();
+                        }}
                       >
-                        How is my data handled?
+                        No, don&#39;t connect
                       </Button>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      {isGithubAppInstalled ? (
-                        <Button
-                          onClick={() => { window.location.href = 'https://github.com/settings/installations'; }}
-                          className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
-                          style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                          variant="destructive"
-                        >
-                          <Unlink className="size-3 sm:size-4" />
-                          <span>Uninstall</span>
-                        </Button>
-                      ) : (
-                        <Button
-                          onClick={onGithubAppInstall}
-                          className="bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)]"
-                        >
+                    </motion.div>
+                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                      <Button
+                        className="w-full sm:w-auto bg-[var(--icon-accent)] text-white transition-colors font-semibold"
+                        onClick={onGithubAppInstall}
+                      >
+                        <span className="flex items-center justify-center">
                           <ExternalLink className="w-4 h-4 mr-2" />
-                          Install
-                        </Button>
-                      )}
-                    </div>
+                          Yes, connect my private repos
+                        </span>
+                      </Button>
+                    </motion.div>
                   </div>
-                </div>
+                </motion.div>
               </div>
-            </div>
-          </motion.div>
-        )
-      ) : (
-        <Card className="border-[var(--icon-button-secondary)] pt-2" style={{ backgroundColor: 'var(--content-card-background)'}}>
-          <AnimatePresence mode="wait">
-            <motion.div key="platform-list-shared" variants={cardVariants} initial="initial" animate="animate" exit="exit" transition={{ duration: 0.3 }}>
-              <CardHeader className="pb-4">
-                {handleBackButton && (
-                  <button onClick={() => handleBackButton()} className="flex items-center gap-2 text-sm mb-4 text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors">
-                    <ArrowLeft className="w-4 h-4" /> Back
-                  </button>
-                )}
-                <CardTitle className="sm:text-xl text-base font-semibold text-[var(--text-main)] mb-2">{headerTitle}</CardTitle>
-                <p className="sm:text-sm text-xs text-[var(--text-secondary)] leading-relaxed">{headerDescription}</p>
-              </CardHeader>
-              <CardContent className="space-y-2">
-                {(() => {
-                  const oauthList = list.filter(p => p.connectionType === 'oauth');
-                  const urlList = list.filter(p => (p.connectionType || 'url') === 'url' || p.connectionType === 'link');
-
-                  const Row = (provider: typeof list[number]) => {
-                    const providerId = provider.id;
-                    const isRequired = requiredProviders?.includes(providerId);
-                    const isConnected = connectedIds.has(providerId.toLowerCase());
-                    const needsReconnect = reconnectIds.has(providerId.toLowerCase());
-                    const isOauth = provider.connectionType === 'oauth'
-                    const connectedUrl = connected.find(c => c.name.toLowerCase() === providerId.toLowerCase())?.url;
-                    const betaFlag = () => (
-                      <span
-                        className="ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200"
-                        style={{ verticalAlign: 'middle', letterSpacing: '0.05em' }}
-                      >
-                        Beta
-                      </span>
-                    );
-
-                    const requiredFlag = () => (
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger>
-                            <div className="flex items-center justify-center size-4 sm:size-5 rounded-full bg-[var(--icon-accent)] cursor-help">
-                              <span className="text-white text-xs font-bold -translate-y-px select-none">!</span>
-                            </div>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Required by <span className="font-semibold">{companyName || 'your recruiter'}</span></p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    );
-
-                    return (
-                      <div key={providerId} className="group flex items-center justify-between p-2 rounded-lg transition-colors hover:bg-[var(--icon-button-secondary)]/10 transform transition-transform hover:-translate-y-px">
-                        <div className="flex items-center gap-3">
-
-                          {isConnected && connectedUrl ? (
-                            <Link href={connectedUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:underline">
-                              <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
-                              <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
-                              {isRequired && !isConnected ? (requiredFlag()) : null}
-                            </Link>
-                          ) : (
+          ) : (
+            <Card className="border-[var(--icon-button-secondary)] pt-2" style={{ backgroundColor: 'var(--content-card-background)'}}>
+              <AnimatePresence mode="wait">
+                <motion.div key="platform-list-shared" variants={cardVariants} initial="initial" animate="animate" exit="exit" transition={{ duration: 0.3 }}>
+                  <CardHeader className="pb-4">
+                    {handleBackButton && (
+                      <button onClick={() => handleBackButton()} className="flex items-center gap-2 text-sm mb-4 text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors">
+                        <ArrowLeft className="w-4 h-4" /> Back
+                      </button>
+                    )}
+                    <CardTitle className="sm:text-xl text-base font-semibold text-[var(--text-main)] mb-2">{headerTitle}</CardTitle>
+                    <p className="sm:text-sm text-xs text-[var(--text-secondary)] leading-relaxed">{headerDescription}</p>
+                  </CardHeader>
+                  <CardContent className="space-y-2">
+                    {(() => {
+                      const oauthList = list.filter(p => p.connectionType === 'oauth');
+                      const urlList = list.filter(p => (p.connectionType || 'url') === 'url' || p.connectionType === 'link');
+
+                      const Row = (provider: typeof list[number]) => {
+                        const providerId = provider.id;
+                        const isRequired = requiredProviders?.includes(providerId);
+                        const isConnected = connectedIds.has(providerId.toLowerCase());
+                        const needsReconnect = reconnectIds.has(providerId.toLowerCase());
+                        const isOauth = provider.connectionType === 'oauth'
+                        const connectedUrl = connected.find(c => c.name.toLowerCase() === providerId.toLowerCase())?.url;
+                        const betaFlag = () => (
+                          <span
+                            className="ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200"
+                            style={{ verticalAlign: 'middle', letterSpacing: '0.05em' }}
+                          >
+                            Beta
+                          </span>
+                        );
+
+                        const requiredFlag = () => (
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <div className="flex items-center justify-center size-4 sm:size-5 rounded-full bg-[var(--icon-accent)] cursor-help">
+                                  <span className="text-white text-xs font-bold -translate-y-px select-none">!</span>
+                                </div>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>Required by <span className="font-semibold">{companyName || 'your recruiter'}</span></p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        );
+
+                        return (
+                          <div key={providerId} className="group flex items-center justify-between p-2 rounded-lg transition-colors hover:bg-[var(--icon-button-secondary)]/10 transform transition-transform hover:-translate-y-px">
                             <div className="flex items-center gap-3">
-                              <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
-                              <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
-                              {isRequired && !isConnected ? (requiredFlag()) : null}
+
+                              {isConnected && connectedUrl ? (
+                                <Link href={connectedUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:underline">
+                                  <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
+                                  <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
+                                  {isRequired && !isConnected ? (requiredFlag()) : null}
+                                </Link>
+                              ) : (
+                                <div className="flex items-center gap-3">
+                                  <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
+                                  <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
+                                  {isRequired && !isConnected ? (requiredFlag()) : null}
+                                </div>
+                              )}
+                              {provider.beta ? betaFlag() : null}
                             </div>
-                          )}
-                          {provider.beta ? betaFlag() : null}
-                        </div>
-
-                        {providerId.toLowerCase() === 'github' ? (
-                          <div className="flex items-center gap-2">
-                            {(!isConnected && !isGithubAppInstalled) && (
-                              <Button
-                                onClick={() => setSelectedProviderIdAndCallback(providerId)}
-                                className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
-                              >
-                                <Link2 className="size-3 sm:size-4" />
-                                <span className="sm:text-base text-sm">Connect</span>
-                              </Button>
-                            )}
-                            {(isConnected && !isGithubAppInstalled) && (
-                              <Button
-                                onClick={() => { setShowGithubManage(true); setSelectedProviderIdAndCallback('githubapp'); }}
-                                className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
-                              >
-                                <Settings className="size-3 sm:size-4" />
-                                <span className="sm:text-base text-sm">Manage</span>
-                              </Button>
-                            )}
-                            {(isConnected && isGithubAppInstalled) && (
-                              <div
-                                className="relative flex items-center group"
-                                onClick={() => { setShowGithubManage(true); setSelectedProviderIdAndCallback('githubapp'); }}
-                                style={{ cursor: 'pointer' }}
-                              >
+
+                            {providerId.toLowerCase() === 'github' ? (
+                              <div className="flex items-center gap-2">
+                                {/* Public (OAuth) */}
+                                {isGithubConnected ? (
+                                  <div className="relative flex items-center">
+                                    <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
+                                      <CheckCircle className="size-3 sm:size-4" />
+                                      <span className="text-sm font-medium">Connected</span>
+                                    </div>
+                                    <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
+                                      <button
+                                        onClick={() => onDisconnect('github')}
+                                        onMouseEnter={() => setPreview('github', '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"
+                                        disabled={isDisconnecting === 'github'}
+                                      >
+                                        {isDisconnecting === 'github' ? <Spinner /> : <Unlink className="size-3 sm:size-4" />}
+                                        <span>Disconnect</span>
+                                      </button>
+                                    </div>
+                                  </div>
+                                ) : (
+                                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                                    <Button
+                                      onClick={() => setSelectedProviderIdAndCallback('github')}
+                                      onMouseEnter={() => setPreview('github', 'connect')}
+                                      onMouseLeave={clearPreview}
+                                      className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
+                                    >
+                                      <Eye className="size-3 sm:size-4" />
+                                      <span className="sm:text-base text-sm">Connect</span>
+                                    </Button>
+                                  </motion.div>
+                                )}
+
+                                {/* Private (GitHub App) */}
+                                {isGithubAppInstalled ? (
+                                  <div className="relative flex items-center">
+                                    <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
+                                      <CheckCircle className="size-3 sm:size-4" />
+                                      <span className="text-sm font-medium">Connected</span>
+                                    </div>
+                                    <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
+                                      <button
+                                        onClick={() => { window.location.href = 'https://github.com/settings/installations'; }}
+                                        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" />
+                                        <span>Uninstall</span>
+                                      </button>
+                                    </div>
+                                  </div>
+                                ) : (
+                                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                                    <Button
+                                      onClick={() => setSelectedProviderIdAndCallback('githubapp')}
+                                      className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
+                                    >
+                                      <Lock className="size-3 sm:size-4" />
+                                      <span className="sm:text-base text-sm">Connect</span>
+                                    </Button>
+                                  </motion.div>
+                                )}
+                              </div>
+                            ) : isConnected && isDisconnecting !== providerId ? (
+                              <div className="relative flex items-center">
                                 <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
                                   <CheckCircle className="size-3 sm:size-4" />
                                   <span className="text-sm font-medium">Connected</span>
                                 </div>
                                 <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
-                                  <div className="flex items-center gap-1.5 text-red-600 text-sm hover:underline">
+                                  <button
+                                    onClick={() => onDisconnect(providerId)}
+                                    onMouseEnter={() => setPreview(providerId, '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" />
                                     <span>Disconnect</span>
-                                  </div>
+                                  </button>
                                 </div>
                               </div>
-                            )}
-                            {isDisconnecting === providerId && (
-                              <Spinner />
+                            ) : isDisconnecting === providerId ? (
+                              <div className="relative flex items-center">
+                                <Spinner />
+                              </div>
+                            ) : (
+                              <div className="flex items-center gap-2">
+                                <>
+                                  <Button
+                                    onClick={() => setSelectedProviderIdAndCallback(providerId)}
+                                    onMouseEnter={() => setPreview(providerId, 'connect')}
+                                    onMouseLeave={clearPreview}
+                                    className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
+                                  >
+                                    {isOauth ? (
+                                      <Link2 className="size-3 sm:size-4" />
+                                    ) : (
+                                      <LinkIcon className="size-3 sm:size-4" />
+                                    )}
+                                    <span className="sm:text-base text-sm">Connect</span>
+                                  </Button>
+                                  {needsReconnect && !isRequired && (
+                                    <Button
+                                      onClick={() => onDisconnect(providerId)}
+                                      onMouseEnter={() => setPreview(providerId, 'disconnect')}
+                                      onMouseLeave={clearPreview}
+                                      className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
+                                      style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                                      variant="destructive"
+                                    >
+                                      <Unlink className="size-3 sm:size-4" />
+                                      <span>Remove</span>
+                                    </Button>
+                                  )}
+                                </>
+                              </div>
                             )}
                           </div>
-                        ) : isConnected && isDisconnecting !== providerId ? (
-                          <div className="relative flex items-center">
-                            <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
-                              <CheckCircle className="size-3 sm:size-4" />
-                              <span className="text-sm font-medium">Connected</span>
-                            </div>
-                            <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
-                              <button
-                                onClick={() => onDisconnect(providerId)}
-                                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" />
-                                <span>Disconnect</span>
-                              </button>
-                            </div>
-                          </div>
-                        ) : isDisconnecting === providerId ? (
-                          <div className="relative flex items-center">
-                            <Spinner />
-                          </div>
-                        ) : (
-                          <div className="flex items-center gap-2">
-                            <>
-                              <Button
-                                onClick={() => setSelectedProviderIdAndCallback(providerId)}
-                                className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
-                              >
-                                {isOauth ? (
-                                  <Link2 className="size-3 sm:size-4" />
-                                ) : (
-                                  <LinkIcon className="size-3 sm:size-4" />
-                                )}
-                                <span className="sm:text-base text-sm">Connect</span>
-                              </Button>
-                              {needsReconnect && !isRequired && (
-                                <Button
-                                  onClick={() => onDisconnect(providerId)}
-                                  className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
-                                  style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                                  variant="destructive"
-                                >
-                                  <Unlink className="size-3 sm:size-4" />
-                                  <span>Remove</span>
-                                </Button>
-                              )}
-                            </>
-                          </div>
-                        )}
-                      </div>
-                    );
-                  };
+                        );
+                      };
 
-                  return (
-                    <>
-                      {oauthList.length ? (
+                      return (
                         <>
-                          <div className="flex items-center my-2">
-                            <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
-                            <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>OAuth</span>
-                            <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
-                          </div>
-                          {oauthList.map(p => Row(p))}
-                        </>
-                      ) : null}
+                          {oauthList.length ? (
+                            <>
+                              <div className="flex items-center my-2">
+                                <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                                <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>OAuth</span>
+                                <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                              </div>
+                              {oauthList.map(p => Row(p))}
+                            </>
+                          ) : null}
 
-                      {urlList.length ? (
-                        <>
-                          <div className="flex items-center my-2">
-                            <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
-                            <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>Public Urls</span>
-                            <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
-                          </div>
-                          {urlList.map(p => Row(p))}
+                          {urlList.length ? (
+                            <>
+                              <div className="flex items-center my-2">
+                                <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                                <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>Public Urls</span>
+                                <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                              </div>
+                              {urlList.map(p => Row(p))}
+                            </>
+                          ) : null}
                         </>
-                      ) : null}
-                    </>
-                  );
-                })()}
-              </CardContent>
+                      );
+                    })()}
+                  </CardContent>
+                </motion.div>
+              </AnimatePresence>
+            </Card>
+          )}
+          {shouldShowContinueButton && (
+            <motion.div className="mt-6 w-full" initial="hidden" animate="visible" variants={fadeIn}>
+              <motion.div whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }}>
+                <Button
+                  onClick={onContinue}
+                  disabled={shouldDisableContinueButton}
+                  className="w-full text-white font-medium py-2.5 bg-[var(--icon-accent)] disabled:opacity-50"
+                >
+                  Continue
+                </Button>
+              </motion.div>
             </motion.div>
-          </AnimatePresence>
-        </Card>
-      )}
-      </AnimatePresence>
-    </>
+          )}
+          </div>
+        </div>
+
+        {/* Desktop: progress card to the right, sticky while scrolling */}
+        <div className="hidden lg:block lg:sticky lg:top-6">
+          <ConnectProgress
+            layout="inline"
+            providers={providers}
+            connectedIds={connectedIds}
+            previewProviderId={previewProviderId}
+            previewAction={previewAction}
+            selectedProviderId={selectedProvider?.id || null}
+          />
+        </div>
+      </div>
   );
 }
 

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,10 +8,15 @@ 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')
@@ -21,12 +26,33 @@ export function ConnectProgress(props: ConnectProgressProps) {
     return count
   }, [connectedIds])
 
-  const progressPercent = useMemo(() => {
-    const githubWeight = hasGithub ? 65 : 0
-    const linkedinWeight = hasLinkedIn ? 15 : 0
-    const othersWeight = Math.min(otherConnectedCount, 2) * 10
+  const computePercent = (ids: Set<string>) => {
+    const gh = ids.has('github')
+    const li = ids.has('linkedin')
+    let others = 0
+    ids.forEach(id => {
+      const lid = id.toLowerCase()
+      if (lid !== 'github' && lid !== 'linkedin') others += 1
+    })
+    const githubWeight = gh ? 65 : 0
+    const linkedinWeight = li ? 15 : 0
+    const othersWeight = Math.min(others, 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 = (previewProviderId || '').toLowerCase()
+    if (!pid || !previewAction) return null as number | null
+    if (pid === 'githubapp') return null
+    const next = new Set<string>(Array.from(connectedIds))
+    const has = next.has(pid)
+    if (previewAction === 'connect' && !has) next.add(pid)
+    if (previewAction === 'disconnect' && has) next.delete(pid)
+    const val = computePercent(next)
+    return val === progressPercent ? null : val
+  }, [previewProviderId, previewAction, connectedIds, progressPercent])
 
   const progressCopy = useMemo(() => {
     const score = progressPercent
@@ -72,18 +98,45 @@ export function ConnectProgress(props: ConnectProgressProps) {
     }
   }, [progressPercent, hasGithub])
 
+  const selectedPulse = useMemo(() => {
+    const sid = (selectedProviderId || '').toLowerCase()
+    if (!sid || sid === 'githubapp') return { from: undefined as number | undefined, to: undefined as number | undefined }
+    // Do not show if already connected
+    if (connectedIds.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 contribute up to 2*10 capped
+      const othersAlready = otherConnectedCount
+      if (othersAlready < 2) gain = 10
+    }
+    const to = Math.max(0, Math.min(100, progressPercent + gain))
+    return { from: progressPercent, to }
+  }, [selectedProviderId, connectedIds, progressPercent, otherConnectedCount])
+
+  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} />
+          <ProgressCircle
+            value={valueToShow}
+            size={64}
+            thickness={6}
+            highlightFrom={selectedPulse.from}
+            highlightTo={selectedPulse.to}
+            highlightPulse={Boolean(selectedPulse.to)}
+          />
           <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)'}}>
               {progressCopy.body}
             </div>
             <div className="text-sm mt-1" style={{ color: 'var(--text-secondary)'}}>
-              Weighted score • {progressPercent}%
+              Weighted score • {valueToShow}%
             </div>
           </div>
         </div>

package/src/ui/progress-circle.tsx

@@ -8,10 +8,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 +25,12 @@ 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
+
   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">
@@ -52,6 +62,22 @@ export function ProgressCircle(props: ProgressCircleProps) {
           style={{ transition: 'stroke-dashoffset 800ms 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}