agent-relay 2.0.16 → 2.0.18

package/packages/dashboard/ui/app/signup/page.tsx

@@ -1,5 +1,5 @@
 /**
- * Signup Page - GitHub OAuth via Nango
+ * Signup Page - GitHub OAuth via Nango or Email/Password
  *
  * Key: Initialize Nango on page load, not on click.
  * This avoids popup blockers by ensuring openConnectUI is synchronous.
@@ -11,7 +11,10 @@ import React, { useState, useEffect, useRef } from 'react';
 import Nango from '@nangohq/frontend';
 import { LogoIcon } from '../../react-components/Logo';
 
+type AuthMethod = 'github' | 'email';
+
 export default function SignupPage() {
+  const [authMethod, setAuthMethod] = useState<AuthMethod>('github');
   const [isReady, setIsReady] = useState(false);
   const [isAuthenticating, setIsAuthenticating] = useState(false);
   const [authStatus, setAuthStatus] = useState<string>('');
@@ -19,6 +22,12 @@ export default function SignupPage() {
   const [redirectTarget, setRedirectTarget] = useState<string>('/app');
   const [showSuccess, setShowSuccess] = useState(false);
 
+  // Email signup form state
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [displayName, setDisplayName] = useState('');
+
   // Store Nango instance - initialized on mount
   const nangoRef = useRef<InstanceType<typeof Nango> | null>(null);
 
@@ -49,7 +58,8 @@ export default function SignupPage() {
         if (!mounted) return;
 
         if (!response.ok || !data.sessionToken) {
-          setError('Failed to initialize. Please refresh the page.');
+          // Don't set error - email signup doesn't need Nango
+          setIsReady(true);
           return;
         }
 
@@ -59,7 +69,8 @@ export default function SignupPage() {
       } catch (err) {
         if (mounted) {
           console.error('Init error:', err);
-          setError('Failed to initialize. Please refresh the page.');
+          // Still allow email signup even if Nango fails
+          setIsReady(true);
         }
       }
     };
@@ -98,7 +109,7 @@ export default function SignupPage() {
     }
   };
 
-  const checkAuthStatus = async (connectionId: string): Promise<{ ready: boolean }> => {
+  const checkAuthStatus = async (connectionId: string): Promise<{ ready: boolean; needsEmail?: boolean }> => {
     const response = await fetch(`/api/auth/nango/login-status/${connectionId}`, {
       credentials: 'include',
     });
@@ -126,6 +137,11 @@ export default function SignupPage() {
         try {
           const result = await checkAuthStatus(connectionId);
           if (result && result.ready) {
+            // If user needs to provide email, redirect to complete-profile
+            if (result.needsEmail) {
+              window.location.href = '/complete-profile';
+              return;
+            }
             await handlePostAuthRedirect();
             return;
           }
@@ -150,7 +166,7 @@ export default function SignupPage() {
   // Use nango.auth() instead of openConnectUI to avoid popup blocker issues
   const handleGitHubAuth = async () => {
     if (!nangoRef.current) {
-      setError('Not ready. Please refresh the page.');
+      setError('GitHub signup not available. Please use email signup or refresh the page.');
       return;
     }
 
@@ -191,6 +207,70 @@ export default function SignupPage() {
     }
   };
 
+  // Handle email signup
+  const handleEmailSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    // Validate passwords match
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    // Validate password length
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters long');
+      return;
+    }
+
+    setIsAuthenticating(true);
+    setAuthStatus('Creating your account...');
+
+    try {
+      // Get CSRF token first
+      const csrfResponse = await fetch('/api/auth/session', { credentials: 'include' });
+      const csrfToken = csrfResponse.headers.get('x-csrf-token');
+
+      const response = await fetch('/api/auth/email/signup', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(csrfToken && { 'x-csrf-token': csrfToken }),
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          email,
+          password,
+          displayName: displayName || undefined,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setError(data.error || 'Signup failed');
+        setIsAuthenticating(false);
+        setAuthStatus('');
+        return;
+      }
+
+      // Success - redirect to app
+      setAuthStatus('Account created! Redirecting...');
+      setShowSuccess(true);
+      setRedirectTarget('/app');
+
+      setTimeout(() => {
+        window.location.href = '/app';
+      }, 1500);
+    } catch (err) {
+      console.error('Email signup error:', err);
+      setError('Failed to connect. Please try again.');
+      setIsAuthenticating(false);
+      setAuthStatus('');
+    }
+  };
+
   const isLoading = !isReady || isAuthenticating;
 
   return (
@@ -249,7 +329,7 @@ export default function SignupPage() {
                 </svg>
               </div>
               <h2 className="text-xl font-semibold text-white mb-2">Creating Account</h2>
-              <p className="text-text-muted">{authStatus || 'Connecting to GitHub...'}</p>
+              <p className="text-text-muted">{authStatus || 'Setting things up...'}</p>
             </div>
           ) : (
             <div>
@@ -259,57 +339,167 @@ export default function SignupPage() {
                 </div>
               )}
 
-              {/* Features list */}
-              <div className="mb-6 space-y-3">
-                <div className="flex items-center gap-3 text-sm text-text-secondary">
-                  <div className="w-8 h-8 rounded-lg bg-accent-cyan/10 flex items-center justify-center flex-shrink-0">
-                    <svg className="w-4 h-4 text-accent-cyan" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                    </svg>
+              {/* Auth method tabs */}
+              <div className="flex mb-6 bg-bg-secondary/50 rounded-lg p-1">
+                <button
+                  type="button"
+                  onClick={() => setAuthMethod('github')}
+                  className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
+                    authMethod === 'github'
+                      ? 'bg-bg-primary text-white shadow-sm'
+                      : 'text-text-muted hover:text-white'
+                  }`}
+                >
+                  GitHub
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setAuthMethod('email')}
+                  className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
+                    authMethod === 'email'
+                      ? 'bg-bg-primary text-white shadow-sm'
+                      : 'text-text-muted hover:text-white'
+                  }`}
+                >
+                  Email
+                </button>
+              </div>
+
+              {authMethod === 'github' ? (
+                <>
+                  {/* Features list */}
+                  <div className="mb-6 space-y-3">
+                    <div className="flex items-center gap-3 text-sm text-text-secondary">
+                      <div className="w-8 h-8 rounded-lg bg-accent-cyan/10 flex items-center justify-center flex-shrink-0">
+                        <svg className="w-4 h-4 text-accent-cyan" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                        </svg>
+                      </div>
+                      <span>Deploy AI agents in seconds</span>
+                    </div>
+                    <div className="flex items-center gap-3 text-sm text-text-secondary">
+                      <div className="w-8 h-8 rounded-lg bg-[#00ffc8]/10 flex items-center justify-center flex-shrink-0">
+                        <svg className="w-4 h-4 text-[#00ffc8]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                        </svg>
+                      </div>
+                      <span>Real-time agent collaboration</span>
+                    </div>
+                    <div className="flex items-center gap-3 text-sm text-text-secondary">
+                      <div className="w-8 h-8 rounded-lg bg-[#0891b2]/10 flex items-center justify-center flex-shrink-0">
+                        <svg className="w-4 h-4 text-[#0891b2]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                        </svg>
+                      </div>
+                      <span>Secure credential management</span>
+                    </div>
                   </div>
-                  <span>Deploy AI agents in seconds</span>
-                </div>
-                <div className="flex items-center gap-3 text-sm text-text-secondary">
-                  <div className="w-8 h-8 rounded-lg bg-[#00ffc8]/10 flex items-center justify-center flex-shrink-0">
-                    <svg className="w-4 h-4 text-[#00ffc8]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                    </svg>
+
+                  <button
+                    type="button"
+                    onClick={handleGitHubAuth}
+                    disabled={isLoading}
+                    className="w-full py-4 px-6 bg-[#24292e] hover:bg-[#2f363d] border border-[#444d56] rounded-xl text-white font-medium flex items-center justify-center gap-3 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    {!isReady ? (
+                      <>
+                        <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                        </svg>
+                        <span>Loading...</span>
+                      </>
+                    ) : (
+                      <>
+                        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                          <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                        </svg>
+                        <span>Sign up with GitHub</span>
+                      </>
+                    )}
+                  </button>
+                </>
+              ) : (
+                <form onSubmit={handleEmailSignup} className="space-y-4">
+                  <div>
+                    <label htmlFor="displayName" className="block text-sm font-medium text-text-secondary mb-2">
+                      Name <span className="text-text-muted">(optional)</span>
+                    </label>
+                    <input
+                      type="text"
+                      id="displayName"
+                      value={displayName}
+                      onChange={(e) => setDisplayName(e.target.value)}
+                      disabled={isAuthenticating}
+                      className="w-full px-4 py-3 bg-bg-secondary border border-border-subtle rounded-xl text-white placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 focus:border-accent-cyan disabled:opacity-50"
+                      placeholder="Your name"
+                    />
                   </div>
-                  <span>Real-time agent collaboration</span>
-                </div>
-                <div className="flex items-center gap-3 text-sm text-text-secondary">
-                  <div className="w-8 h-8 rounded-lg bg-[#0891b2]/10 flex items-center justify-center flex-shrink-0">
-                    <svg className="w-4 h-4 text-[#0891b2]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-                    </svg>
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium text-text-secondary mb-2">
+                      Email
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                      disabled={isAuthenticating}
+                      className="w-full px-4 py-3 bg-bg-secondary border border-border-subtle rounded-xl text-white placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 focus:border-accent-cyan disabled:opacity-50"
+                      placeholder="you@example.com"
+                    />
                   </div>
-                  <span>Secure credential management</span>
-                </div>
-              </div>
-
-              <button
-                type="button"
-                onClick={handleGitHubAuth}
-                disabled={isLoading}
-                className="w-full py-4 px-6 bg-[#24292e] hover:bg-[#2f363d] border border-[#444d56] rounded-xl text-white font-medium flex items-center justify-center gap-3 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {!isReady ? (
-                  <>
-                    <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-                    </svg>
-                    <span>Loading...</span>
-                  </>
-                ) : (
-                  <>
-                    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-                    </svg>
-                    <span>Sign up with GitHub</span>
-                  </>
-                )}
-              </button>
+                  <div>
+                    <label htmlFor="password" className="block text-sm font-medium text-text-secondary mb-2">
+                      Password
+                    </label>
+                    <input
+                      type="password"
+                      id="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
+                      minLength={8}
+                      disabled={isAuthenticating}
+                      className="w-full px-4 py-3 bg-bg-secondary border border-border-subtle rounded-xl text-white placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 focus:border-accent-cyan disabled:opacity-50"
+                      placeholder="At least 8 characters"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="confirmPassword" className="block text-sm font-medium text-text-secondary mb-2">
+                      Confirm Password
+                    </label>
+                    <input
+                      type="password"
+                      id="confirmPassword"
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      required
+                      disabled={isAuthenticating}
+                      className="w-full px-4 py-3 bg-bg-secondary border border-border-subtle rounded-xl text-white placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 focus:border-accent-cyan disabled:opacity-50"
+                      placeholder="Confirm your password"
+                    />
+                  </div>
+                  <button
+                    type="submit"
+                    disabled={isLoading || !email || !password || !confirmPassword}
+                    className="w-full py-4 px-6 bg-accent-cyan hover:bg-accent-cyan/90 rounded-xl text-black font-medium flex items-center justify-center gap-3 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    {isAuthenticating ? (
+                      <>
+                        <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                        </svg>
+                        <span>{authStatus || 'Creating account...'}</span>
+                      </>
+                    ) : (
+                      <span>Create Account</span>
+                    )}
+                  </button>
+                </form>
+              )}
 
               <p className="mt-6 text-center text-text-muted text-sm">
                 By signing up, you agree to our{' '}

package/packages/dashboard/ui/lib/cloudApi.ts

@@ -42,6 +42,7 @@ export interface CloudUser {
   }>;
   pendingInvites: number;
   onboardingCompleted: boolean;
+  displayName?: string;
 }
 
 export type SessionExpiredCallback = (error: SessionError) => void;

package/packages/dashboard/ui/react-components/App.tsx

@@ -221,7 +221,7 @@ export function App({ wsUrl, orchestratorUrl }: AppProps) {
   // Derive current user from cloud session (falls back to undefined in non-cloud mode)
   const currentUser: CurrentUser | undefined = cloudSession?.user
     ? {
-        displayName: cloudSession.user.githubUsername,
+        displayName: cloudSession.user.githubUsername || cloudSession.user.displayName || '',
         avatarUrl: cloudSession.user.avatarUrl,
       }
     : undefined;

package/packages/dashboard/ui/react-components/ProviderAuthFlow.tsx

@@ -65,6 +65,7 @@ export function ProviderAuthFlow({
   const popupOpenedRef = useRef(false);
   const pollingRef = useRef(false);
   const cliPollingRef = useRef(false);
+  const completingRef = useRef(false); // Prevent double-calling handleComplete
 
   const backendProviderId = PROVIDER_ID_MAP[provider.id] || provider.id;
 
@@ -320,6 +321,14 @@ export function ProviderAuthFlow({
     const targetSessionId = sid || sessionId;
     if (!targetSessionId) return;
 
+    // Prevent double-calling (both CLI polling and status polling may detect success)
+    if (completingRef.current) return;
+    completingRef.current = true;
+
+    // Stop both polling loops
+    pollingRef.current = false;
+    cliPollingRef.current = false;
+
     setStatus('submitting');
     setErrorMessage(null);
 
@@ -343,6 +352,7 @@ export function ProviderAuthFlow({
       // Brief delay to show success message before parent unmounts component
       setTimeout(() => onSuccess(), 1500);
     } catch (err) {
+      completingRef.current = false; // Allow retry on error
       const msg = err instanceof Error ? err.message : 'Failed to complete authentication';
       setErrorMessage(msg);
       setStatus('error');

package/packages/dashboard/ui/react-components/RepoAccessPanel.tsx

@@ -9,7 +9,8 @@
  * - POST /api/workspaces/quick - Create workspace for a repo
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import Nango from '@nangohq/frontend';
 
 interface AccessibleRepo {
   id: number;
@@ -69,10 +70,17 @@ export function RepoAccessPanel({
   const [repos, setRepos] = useState<AccessibleRepo[]>([]);
   const [loadingState, setLoadingState] = useState<LoadingState>('idle');
   const [error, setError] = useState<string | null>(null);
+  const [isGitHubNotConnected, setIsGitHubNotConnected] = useState(false);
   const [creatingWorkspace, setCreatingWorkspace] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [filterType, setFilterType] = useState<'all' | 'with-workspace' | 'without-workspace'>('all');
 
+  // GitHub OAuth state
+  const nangoRef = useRef<InstanceType<typeof Nango> | null>(null);
+  const [isNangoReady, setIsNangoReady] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [connectError, setConnectError] = useState<string | null>(null);
+
   // Create a map of repo full names to workspace IDs for quick lookup
   const repoToWorkspace = new Map<string, Workspace>();
   workspaces.forEach(ws => {
@@ -85,6 +93,7 @@ export function RepoAccessPanel({
   const fetchRepos = useCallback(async () => {
     setLoadingState('loading');
     setError(null);
+    setIsGitHubNotConnected(false);
 
     try {
       const response = await fetch('/api/repos/accessible?perPage=100', {
@@ -94,7 +103,8 @@ export function RepoAccessPanel({
       if (!response.ok) {
         const data = await response.json();
         if (data.code === 'NANGO_NOT_CONNECTED') {
-          throw new Error('GitHub not connected. Please reconnect your GitHub account.');
+          setIsGitHubNotConnected(true);
+          throw new Error('GitHub not connected. Connect your GitHub account to see your repositories.');
         }
         throw new Error(data.error || 'Failed to fetch repositories');
       }
@@ -113,6 +123,98 @@ export function RepoAccessPanel({
     fetchRepos();
   }, [fetchRepos]);
 
+  // Initialize Nango when GitHub is not connected
+  useEffect(() => {
+    if (!isGitHubNotConnected) return;
+
+    let mounted = true;
+
+    const initNango = async () => {
+      try {
+        // Get Nango session token for GitHub login
+        const response = await fetch('/api/auth/nango/login-session', {
+          credentials: 'include',
+        });
+        const data = await response.json();
+
+        if (!mounted) return;
+
+        if (response.ok && data.sessionToken) {
+          nangoRef.current = new Nango({ connectSessionToken: data.sessionToken });
+          setIsNangoReady(true);
+        }
+      } catch (err) {
+        console.error('Failed to initialize Nango:', err);
+      }
+    };
+
+    initNango();
+    return () => { mounted = false; };
+  }, [isGitHubNotConnected]);
+
+  // Handle GitHub OAuth connection
+  const handleConnectGitHub = async () => {
+    if (!nangoRef.current) {
+      setConnectError('GitHub connection not available. Please refresh the page.');
+      return;
+    }
+
+    setIsConnecting(true);
+    setConnectError(null);
+
+    try {
+      const result = await nangoRef.current.auth('github');
+      if (result && 'connectionId' in result) {
+        // Poll for auth completion
+        const pollForAuth = async (attempts = 0): Promise<void> => {
+          if (attempts > 30) {
+            throw new Error('Authentication timed out. Please try again.');
+          }
+
+          const statusRes = await fetch(`/api/auth/nango/login-status/${result.connectionId}`, {
+            credentials: 'include',
+          });
+          const statusData = await statusRes.json();
+
+          if (statusData.ready) {
+            // Auth complete, refresh repos
+            setIsConnecting(false);
+            setIsGitHubNotConnected(false);
+            fetchRepos();
+            return;
+          }
+
+          await new Promise(resolve => setTimeout(resolve, 1000));
+          return pollForAuth(attempts + 1);
+        };
+
+        await pollForAuth();
+      } else {
+        throw new Error('No connection ID returned');
+      }
+    } catch (err: unknown) {
+      const error = err as Error & { type?: string };
+      console.error('GitHub auth error:', error);
+
+      // Don't show error for user-cancelled auth
+      if (error.type === 'user_cancelled' || error.message?.includes('closed')) {
+        setIsConnecting(false);
+        // Re-initialize Nango for next attempt
+        fetch('/api/auth/nango/login-session', { credentials: 'include' })
+          .then(res => res.json())
+          .then(data => {
+            if (data.sessionToken) {
+              nangoRef.current = new Nango({ connectSessionToken: data.sessionToken });
+            }
+          });
+        return;
+      }
+
+      setConnectError(error.message || 'Failed to connect GitHub');
+      setIsConnecting(false);
+    }
+  };
+
   // Create workspace for a repo
   const handleCreateWorkspace = useCallback(async (repoFullName: string) => {
     setCreatingWorkspace(repoFullName);
@@ -176,8 +278,55 @@ export function RepoAccessPanel({
     );
   }
 
-  // Error state
+  // Error state - special handling for GitHub not connected
   if (loadingState === 'error') {
+    if (isGitHubNotConnected) {
+      return (
+        <div className={`p-6 ${className}`}>
+          <div className="bg-bg-tertiary border border-border-subtle rounded-xl p-8 text-center">
+            <div className="w-16 h-16 mx-auto mb-4 bg-bg-hover rounded-full flex items-center justify-center">
+              <GitHubIcon className="w-8 h-8 text-text-muted" />
+            </div>
+            <h3 className="text-lg font-semibold text-text-primary mb-2">Connect GitHub</h3>
+            <p className="text-text-muted mb-6 max-w-md mx-auto">
+              Connect your GitHub account to see your repositories and enable agent access to your code.
+            </p>
+            {connectError && (
+              <p className="text-error text-sm mb-4">{connectError}</p>
+            )}
+            <button
+              onClick={handleConnectGitHub}
+              disabled={!isNangoReady || isConnecting}
+              className="px-6 py-3 bg-gradient-to-r from-accent-cyan to-[#00b8d9] text-bg-deep font-medium rounded-lg hover:shadow-glow-cyan transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isConnecting ? (
+                <span className="flex items-center gap-2">
+                  <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                  Connecting...
+                </span>
+              ) : !isNangoReady ? (
+                <span className="flex items-center gap-2">
+                  <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                  Loading...
+                </span>
+              ) : (
+                <span className="flex items-center gap-2">
+                  <GitHubIcon className="w-5 h-5" />
+                  Connect GitHub Account
+                </span>
+              )}
+            </button>
+          </div>
+        </div>
+      );
+    }
+
     return (
       <div className={`p-6 ${className}`}>
         <div className="bg-error/10 border border-error/20 rounded-xl p-4 text-center">
@@ -390,3 +539,11 @@ function RepoIcon({ className = '' }: { className?: string }) {
     </svg>
   );
 }
+
+function GitHubIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+    </svg>
+  );
+}