fix: disable Vercel deployment protection for public access

Deployed sites were requiring Vercel login due to SSO protection being
enabled by default on the Vercel team. Added disable_deployment_protection()
method that sets ssoProtection to null via PATCH /v10/projects/{projectId}.

Called in ensure_project() for new projects and deploy_files() for existing
projects to ensure all deployments are publicly accessible.

Author: iamjr15

backend/services/vercel_deploy.py

@@ -65,6 +65,25 @@ def _team_params(self) -> Dict[str, str]:
         """Add team params to requests if team_id is configured."""
         return {"teamId": self.team_id} if self.team_id else {}
 
+    async def disable_deployment_protection(self, project_id: str) -> None:
+        """
+        Disable SSO protection on a Vercel project to make deployments publicly accessible.
+
+        Without this, deployments may require Vercel login to view if the team
+        has default deployment protection enabled.
+        """
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            resp = await client.patch(
+                f"{VERCEL_API_BASE}/v10/projects/{project_id}",
+                headers=self._headers(),
+                params=self._team_params(),
+                json={"ssoProtection": None}
+            )
+            if resp.status_code not in (200, 201):
+                logger.warning(f"Failed to disable deployment protection: {resp.status_code} {resp.text}")
+            else:
+                logger.info(f"Disabled deployment protection for project: {project_id}")
+
     async def ensure_project(self, project_name: str, framework: str = "nextjs") -> Dict[str, Any]:
         """
         Create or get existing Vercel project.
@@ -92,7 +111,10 @@ async def ensure_project(self, project_name: str, framework: str = "nextjs") ->
                 json={"name": project_name, "framework": framework}
             )
             if resp.status_code in (200, 201):
-                return resp.json()
+                project = resp.json()
+                # Disable deployment protection for public access
+                await self.disable_deployment_protection(project.get('id'))
+                return project
 
             error_msg = f"Failed to create Vercel project: {resp.status_code} {resp.text}"
             logger.error(error_msg)
@@ -152,6 +174,10 @@ async def deploy_files(
             if resp.status_code in (200, 201):
                 result = resp.json()
                 logger.info(f"Vercel deployment created: {result.get('id')} -> {result.get('url')}")
+                # Disable deployment protection to ensure public access (fixes existing projects too)
+                project_id = result.get('projectId')
+                if project_id:
+                    await self.disable_deployment_protection(project_id)
                 return result
 
             error_msg = f"Vercel deployment failed: {resp.status_code} {resp.text}"

frontend/src/components/home/sections/hero-section.tsx

@@ -192,24 +192,23 @@ export function HeroSection() {
 
           <div className="flex items-center w-full max-w-3xl gap-2 flex-wrap justify-center">
             <div className="w-full relative group">
-              <div className="relative z-10 border border-zinc-800 bg-black shadow-2xl overflow-hidden px-4 py-2 transition-colors duration-300 group-focus-within:border-zinc-700">
-                <ChatInput
-                  ref={chatInputRef}
-                  onSubmit={handleChatInputSubmit}
-                  placeholder="Describe what you need help with..."
-                  loading={isSubmitting}
-                  disabled={isSubmitting}
-                  value={inputValue}
-                  onChange={setInputValue}
-                  isLoggedIn={!!user}
-                  autoFocus={false}
-                  appType={appType}
-                  onAppTypeChange={setAppType}
-                  selectedModel={selectedModel}
-                  onModelChange={setSelectedModel}
-                  bgColor="bg-black"
-                />
-              </div>
+              <ChatInput
+                ref={chatInputRef}
+                onSubmit={handleChatInputSubmit}
+                placeholder="Describe what you need help with..."
+                loading={isSubmitting}
+                disabled={isSubmitting}
+                value={inputValue}
+                onChange={setInputValue}
+                isLoggedIn={!!user}
+                autoFocus={false}
+                appType={appType}
+                onAppTypeChange={setAppType}
+                selectedModel={selectedModel}
+                onModelChange={setSelectedModel}
+                bgColor="bg-[#121212]"
+                variant="home"
+              />
               {/* Grid line extension effect */}
               <div className="absolute -left-4 top-1/2 w-4 h-px bg-zinc-800/50" />
               <div className="absolute -right-4 top-1/2 w-4 h-px bg-zinc-800/50" />

frontend/src/components/suggestions/examples.tsx

@@ -90,7 +90,7 @@ export const Examples = ({
         {allPrompts.map((prompt, index) => (
           <motion.div
             key={`${prompt.title}-${index}`}
-            initial={{ opacity: 0, scale: 0.8 }}
+            initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{
               duration: 0.3,
@@ -99,14 +99,14 @@ export const Examples = ({
             }}
           >
             <button
-              className="w-fit h-fit px-3 py-2 rounded-full border border-zinc-800 bg-black hover:bg-zinc-900 hover:border-zinc-700 text-sm font-normal text-muted-foreground hover:text-white transition-all cursor-pointer"
+              className="w-fit h-fit px-4 py-2.5 rounded-none border border-white/5 bg-[#09090b] shadow-[0_1px_2px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.05)] hover:bg-[#121212] hover:border-white/10 text-[11px] font-mono font-medium tracking-wider text-zinc-400 hover:text-white transition-all cursor-pointer group"
               onClick={() => onSelectPrompt && onSelectPrompt(prompt.query)}
             >
-              <div className="flex items-center gap-2">
-                <div className="flex-shrink-0">
+              <div className="flex items-center gap-3">
+                <div className="flex-shrink-0 opacity-50 group-hover:opacity-100 transition-all duration-300 grayscale group-hover:grayscale-0 scale-90 group-hover:scale-100">
                   {prompt.icon}
                 </div>
-                <span className="whitespace-nowrap">{prompt.title}</span>
+                <span className="whitespace-nowrap uppercase">{prompt.title}</span>
               </div>
             </button>
           </motion.div>

frontend/src/components/thread/chat-input/chat-input.tsx

@@ -50,6 +50,7 @@ export interface ChatInputProps {
   // Model selection
   selectedModel?: string;
   onModelChange?: (modelId: string) => void;
+  variant?: 'default' | 'home';
 }
 
 export interface UploadedFile {
@@ -78,13 +79,14 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
       onAgentSelect,
       // Removed unused agentName prop - custom agents no longer supported
       messages = [],
-      bgColor = 'bg-card',
+      bgColor = 'bg-[#121212]',
       isLoggedIn = true,
       disableAnimation = false,
       appType = 'web',
       onAppTypeChange,
       selectedModel,
       onModelChange,
+      variant = 'default',
     },
     ref,
   ) => {
@@ -244,18 +246,21 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
         >
           <div className="w-full text-sm flex flex-col justify-between items-start">
             <div className={cn(
-              "w-full p-2 transition-colors duration-200 rounded-2xl overflow-hidden",
+              "w-full transition-colors duration-200 overflow-hidden",
+              variant === 'home' ? "rounded-none border border-white/5 shadow-[0_20px_50px_-12px_rgba(0,0,0,1),inset_0_1px_0_rgba(255,255,255,0.15)] bg-[#09090b]" : "rounded-2xl",
               bgColor,
               isDraggingOver && "bg-zinc-900"
             )}>
-              <AttachmentGroup
-                files={uploadedFiles || []}
-                sandboxId={sandboxId}
-                onRemove={removeUploadedFile}
-                layout="inline"
-                maxHeight="216px"
-                showPreviews={true}
-              />
+              <div className={cn(variant === 'home' ? "px-4 pt-2" : "px-2 pt-2")}>
+                <AttachmentGroup
+                  files={uploadedFiles || []}
+                  sandboxId={sandboxId}
+                  onRemove={removeUploadedFile}
+                  layout="inline"
+                  maxHeight="216px"
+                  showPreviews={true}
+                />
+              </div>
               <MessageInput
                 ref={textareaRef}
                 value={value}
@@ -287,6 +292,7 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
                 onAppTypeChange={onAppTypeChange}
                 selectedModel={selectedModel}
                 onModelChange={onModelChange}
+                variant={variant}
               />
             </div>
           </div>

frontend/src/components/thread/chat-input/file-upload-handler.tsx

@@ -6,6 +6,7 @@ import { Paperclip, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { useAuth } from '@clerk/nextjs';
 import { useQueryClient } from '@tanstack/react-query';
+import { cn } from '@/lib/utils';
 import { fileQueryKeys } from '@/hooks/react-query/files/use-file-queries';
 // Tooltip removed to prevent ref compose loops
 import { UploadedFile } from './chat-input';
@@ -201,6 +202,7 @@ interface FileUploadHandlerProps {
   messages?: any[]; // Add messages prop
   isLoggedIn?: boolean;
   appType?: 'web' | 'mobile';
+  className?: string;
 }
 
 export const FileUploadHandler = forwardRef<
@@ -220,6 +222,7 @@ export const FileUploadHandler = forwardRef<
       messages = [],
       isLoggedIn = true,
       appType = 'web',
+      className,
     },
     ref,
   ) => {
@@ -277,15 +280,18 @@ export const FileUploadHandler = forwardRef<
             onClick={handleFileUpload}
             variant="ghost"
             size="sm"
-            className="h-8 w-8 p-0 bg-transparent hover:bg-zinc-800/50 rounded-full text-zinc-400 hover:text-zinc-200 flex items-center justify-center transition-colors"
+            className={cn(
+              "h-8 w-8 p-0 bg-transparent hover:bg-zinc-800/50 rounded-full text-zinc-400 hover:text-zinc-200 flex items-center justify-center transition-colors",
+              className
+            )}
             disabled={
               !isLoggedIn || loading || (disabled && !isAgentRunning) || isUploading
             }
           >
             {isUploading ? (
               <Loader2 className="h-4 w-4 animate-spin" />
             ) : (
-              <Paperclip className="h-4 w-4" />
+              <Paperclip className={cn("h-4 w-4", className?.includes("h-9") && "h-5 w-5")} />
             )}
           </Button>
         </span>