From 8517f815249d03e1509961d0b14c662e0791e821 Mon Sep 17 00:00:00 2001
From: Madison <madison.w.kennedy@gmail.com>
Date: Tue, 30 Dec 2025 04:22:02 -0600
Subject: [PATCH 1/2] api window overhaul

---
 docs/src/components/api/auth-panel.tsx | 625 ++++++++++++-------------
 1 file changed, 304 insertions(+), 321 deletions(-)

diff --git a/docs/src/components/api/auth-panel.tsx b/docs/src/components/api/auth-panel.tsx
index 1e84ae550a..019e61a208 100644
--- a/docs/src/components/api/auth-panel.tsx
+++ b/docs/src/components/api/auth-panel.tsx
@@ -3,12 +3,16 @@
 import { AdminOwnedProject, CurrentInternalUser, useUser } from '@stackframe/stack';
 import { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';
 import { stringCompare } from '@stackframe/stack-shared/dist/utils/strings';
-import { AlertTriangle, ChevronDown, Key, X } from 'lucide-react';
+import { AlertTriangle, ChevronDown, X } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
+import { cn } from '../../lib/cn';
 import { useSidebar } from '../layouts/sidebar-context';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { useAPIPageContext } from './api-page-wrapper';
 import { Button } from './button';
 
+type AuthMode = 'project' | 'manual';
+
 type StackAuthHeaderKey =
   | 'X-Stack-Access-Type'
   | 'X-Stack-Project-Id'
@@ -29,10 +33,10 @@ type StackAuthHeaderField = {
 const stackAuthHeaders: StackAuthHeaderField[] = [
   { key: 'X-Stack-Access-Type', label: 'Access Type', placeholder: 'client, server, or admin', required: true },
   { key: 'X-Stack-Project-Id', label: 'Project ID', placeholder: 'your-project-uuid', required: true },
-  { key: 'X-Stack-Publishable-Client-Key', label: 'Client Key', placeholder: 'pck_your_key_here', required: false, hideWhenProjectSelected: true },
-  { key: 'X-Stack-Secret-Server-Key', label: 'Server Key', placeholder: 'ssk_your_key_here', required: false, hideWhenProjectSelected: true },
-  { key: 'X-Stack-Access-Token', label: 'Access Token', placeholder: 'user_access_token', required: false, hideWhenProjectSelected: true },
-  { key: 'X-Stack-Admin-Access-Token', label: 'Admin Access Token', placeholder: 'admin_access_token', required: false, isSensitive: true },
+  { key: 'X-Stack-Publishable-Client-Key', label: 'Client Key', placeholder: 'pck_your_key_here', required: false },
+  { key: 'X-Stack-Secret-Server-Key', label: 'Server Key', placeholder: 'ssk_your_key_here', required: false },
+  { key: 'X-Stack-Access-Token', label: 'Access Token', placeholder: 'user_access_token', required: false },
+  { key: 'X-Stack-Admin-Access-Token', label: 'Admin Access Token', placeholder: 'admin_access_token', required: false },
 ];
 
 type UserHookResult = ReturnType<typeof useUser>;
@@ -41,6 +45,80 @@ function isInternalUser(user: UserHookResult): user is CurrentInternalUser {
   return Boolean(user && 'useOwnedProjects' in user && typeof user.useOwnedProjects === 'function');
 }
 
+function ProjectDropdown({
+  projects,
+  selectedProjectId,
+  onSelect,
+}: {
+  projects: AdminOwnedProject[],
+  selectedProjectId: string,
+  onSelect: (projectId: string) => void,
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedProject = projects.find(p => p.id === selectedProjectId);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "w-full px-3 py-2.5 pr-10 border rounded-lg text-sm bg-fd-background text-fd-foreground",
+            "focus:outline-none focus:ring-2 focus:ring-fd-primary/20 focus:border-fd-primary",
+            "border-fd-border cursor-pointer transition-colors",
+            "flex items-center justify-between text-left"
+          )}
+        >
+          <span className={selectedProjectId ? "text-fd-foreground" : "text-fd-muted-foreground"}>
+            {selectedProject ? selectedProject.displayName : "Choose a project..."}
+          </span>
+          <ChevronDown className={cn(
+            "w-4 h-4 text-fd-muted-foreground transition-transform",
+            open && "rotate-180"
+          )} />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-1.5" align="start">
+        <div className="max-h-[300px] overflow-y-auto">
+          <button
+            type="button"
+            onClick={() => {
+              onSelect('');
+              setOpen(false);
+            }}
+            className={cn(
+              "w-full px-3 py-2.5 text-sm text-left rounded-md transition-colors",
+              !selectedProjectId
+                ? "bg-fd-primary/10 text-fd-primary font-medium"
+                : "hover:bg-fd-accent hover:text-fd-accent-foreground"
+            )}
+          >
+            Choose a project...
+          </button>
+          {projects.map((project) => (
+            <button
+              key={project.id}
+              type="button"
+              onClick={() => {
+                onSelect(project.id);
+                setOpen(false);
+              }}
+              className={cn(
+                "w-full px-3 py-2.5 text-sm text-left rounded-md transition-colors",
+                selectedProjectId === project.id
+                  ? "bg-fd-primary/10 text-fd-primary font-medium"
+                  : "hover:bg-fd-accent hover:text-fd-accent-foreground"
+              )}
+            >
+              {project.displayName}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 export function AuthPanel() {
   const sidebarContext = useSidebar();
 
@@ -59,6 +137,10 @@ export function AuthPanel() {
   // State for project selection
   const [selectedProjectId, setSelectedProjectId] = useState<string>('');
 
+  // Mode: project selection OR manual entry
+  const canUseProjectMode = hasOwnedProjects && projects.length > 0;
+  const [authMode, setAuthMode] = useState<AuthMode>(canUseProjectMode ? 'project' : 'manual');
+
   // Use default functions if sidebar context is not available
   const { isAuthOpen, toggleAuth } = sidebarContext || {
     isAuthOpen: false,
@@ -106,43 +188,6 @@ export function AuthPanel() {
     });
   }, [selectedProjectId, user, updateSharedHeaders]);
 
-  const [isHomePage, setIsHomePage] = useState(false);
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  // Detect if we're on homepage and scroll state (same as AIChatDrawer)
-  useEffect(() => {
-    const checkHomePage = () => {
-      setIsHomePage(document.body.classList.contains('home-page'));
-    };
-
-    const checkScrolled = () => {
-      setIsScrolled(document.body.classList.contains('scrolled'));
-    };
-
-    // Initial check
-    checkHomePage();
-    checkScrolled();
-
-    // Set up observers for class changes
-    const observer = new MutationObserver(() => {
-      checkHomePage();
-      checkScrolled();
-    });
-
-    observer.observe(document.body, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  // Calculate position based on homepage and scroll state (same as AIChatDrawer)
-  const topPosition = isHomePage && isScrolled ? 'top-0' : 'top-0';
-  const height = isHomePage && isScrolled ? 'h-screen' : 'h-[calc(100vh)]';
-
   const missingRequiredHeaders = stackAuthHeaders.filter(
     header => header.required && !(headers[header.key] ?? '').trim()
   );
@@ -178,166 +223,136 @@ export function AuthPanel() {
     <>
       {/* Desktop Auth Panel - Matching AIChatDrawer design */}
       <div
-        className={`hidden md:block fixed ${topPosition} right-0 ${height} bg-fd-background border-l border-fd-border flex flex-col transition-all duration-300 ease-out z-50 w-96 ${
-          isAuthOpen ? 'translate-x-0' : 'translate-x-full'
+        className={`hidden md:block absolute top-4 right-4 max-h-[calc(100vh-2rem)] bg-fd-background border border-fd-border flex flex-col transition-all duration-300 ease-out z-50 w-96 rounded-lg pt-4 pr-4 pl-4 pb-2 shadow-lg ${
+          isAuthOpen ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
         }`}
       >
-        {/* Header - Matching AIChatDrawer */}
-        <div className="flex items-center justify-between p-3 border-b border-fd-border bg-fd-background">
-          <div className="flex items-center gap-2">
-            <div className={`w-5 h-5 rounded flex items-center justify-center ${
-              highlightMissingHeaders
-                ? 'bg-red-100 dark:bg-red-900/30 auth-error-pulse'
-                : 'bg-blue-100 dark:bg-blue-900/30'
-            }`}>
-              {highlightMissingHeaders ? (
-                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400" />
-              ) : (
-                <Key className="w-3 h-3 text-blue-600 dark:text-blue-400" />
-              )}
-            </div>
-            <div>
-              <h3 className="font-medium text-fd-foreground text-sm">
-                {highlightMissingHeaders ? 'Authentication Required' : 'API Authentication'}
-              </h3>
-              <p className="text-xs text-fd-muted-foreground">
-                Configure headers for requests
-              </p>
-            </div>
-          </div>
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 pb-3 border-b border-fd-border">
+          <h3 className="font-medium text-fd-foreground text-sm">
+            API Authentication
+          </h3>
           <button
             onClick={toggleAuth}
-            className="p-1 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors"
+            className="p-1 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors hover:transition-none"
             title="Close auth panel"
           >
-            <X className="w-3 h-3" />
+            <X className="w-4 h-4" />
           </button>
         </div>
 
-        {/* Error Message - Reserve space to prevent layout shifts */}
-        <div className="mx-3 mt-3 h-auto">
-          {highlightMissingHeaders && lastError ? (
-            <div className="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse">
-              <div className="flex items-center gap-2 text-xs">
-                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400 flex-shrink-0" />
-                <span className="text-red-800 dark:text-red-300 font-medium">
-                  {lastError.status} Error - Authentication required
-                </span>
-              </div>
-              {missingRequiredHeaders.length > 0 && (
-                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
-                  Missing: {missingRequiredHeaders.map(h => h.label).join(', ')}
-                </p>
-              )}
+        {/* Error Message */}
+        {highlightMissingHeaders && lastError && (
+          <div className="mx-4 mt-3 p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
+            <div className="flex items-center gap-2 text-xs">
+              <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400 flex-shrink-0" />
+              <span className="text-red-800 dark:text-red-300 font-medium">
+                {lastError.status} Error - Authentication required
+              </span>
             </div>
-          ) : null}
-        </div>
+          </div>
+        )}
+
+        {/* Mode Toggle - only show if user has projects */}
+        {canUseProjectMode && (
+          <div className="mx-4 mt-3 flex gap-4 border-b border-fd-border">
+            <button
+              type="button"
+              onClick={() => setAuthMode('project')}
+              className={cn(
+                "pb-2 text-sm font-medium border-b-2 -mb-px transition-colors",
+                authMode === 'project'
+                  ? "border-fd-foreground text-fd-foreground"
+                  : "border-transparent text-fd-muted-foreground hover:text-fd-foreground"
+              )}
+            >
+              Select Project
+            </button>
+            <button
+              type="button"
+              onClick={() => setAuthMode('manual')}
+              className={cn(
+                "pb-2 text-sm font-medium border-b-2 -mb-px transition-colors",
+                authMode === 'manual'
+                  ? "border-fd-foreground text-fd-foreground"
+                  : "border-transparent text-fd-muted-foreground hover:text-fd-foreground"
+              )}
+            >
+              Manual
+            </button>
+          </div>
+        )}
 
-        {/* Content - Fixed height to prevent layout shifts */}
+        {/* Content */}
         <div className="flex-1 min-h-0">
-          <div className="h-full overflow-y-auto p-3 space-y-3">
-            {/* Project Selector - Show only if user has owned projects */}
-            {hasOwnedProjects && projects.length > 0 && (
-              <div className="space-y-1.5 pb-3 border-b border-fd-border">
-                <label className="text-xs font-medium text-fd-foreground flex items-center gap-2">
-                  Quick Select Project
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
-                    logged in
-                  </span>
-                </label>
-                <div className="relative">
-                  <select
-                    value={selectedProjectId}
-                    onChange={(e) => handleProjectSelect(e.target.value)}
-                    className="w-full px-2 py-1.5 pr-8 border rounded-md text-xs bg-fd-background text-fd-foreground focus:outline-none focus:ring-1 focus:ring-fd-primary focus:border-fd-primary border-fd-border appearance-none cursor-pointer"
-                  >
-                    <option value="">Select a project...</option>
-                    {sortedProjects.map((project) => (
-                      <option key={project.id} value={project.id}>
-                        {project.displayName} ({project.id.slice(0, 8)}...)
-                      </option>
-                    ))}
-                  </select>
-                  <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-fd-muted-foreground pointer-events-none" />
-                </div>
+          <div className="h-full overflow-y-auto px-4 pt-4 pb-3 space-y-3">
+            {/* Project Selection Mode */}
+            {authMode === 'project' && canUseProjectMode && (
+              <div className="space-y-3">
+                <ProjectDropdown
+                  projects={sortedProjects}
+                  selectedProjectId={selectedProjectId}
+                  onSelect={handleProjectSelect}
+                />
                 {selectedProjectId && (
-                  <p className="text-xs text-green-600 dark:text-green-400">
-                    ✓ Headers auto-populated for admin authentication
-                  </p>
+                  <div className="flex items-center gap-2 p-2.5 rounded-lg bg-green-50 dark:bg-green-900/10 border border-green-200 dark:border-green-800">
+                    <div className="w-2 h-2 rounded-full bg-green-500"></div>
+                    <span className="text-sm text-green-700 dark:text-green-300">Ready to make requests</span>
+                  </div>
                 )}
+                <p className="text-xs text-fd-muted-foreground pt-2">
+                  Because you&apos;re signed in, requests are automatically authenticated with your account.
+                </p>
               </div>
             )}
 
-            {/* Manual Header Inputs */}
-            {stackAuthHeaders.map((header) => {
-              // Hide certain fields when project is selected
-              if (selectedProjectId && header.hideWhenProjectSelected) {
-                return null;
-              }
-
-              const value = headers[header.key] ?? '';
-              const isMissing = highlightMissingHeaders && header.required && !value.trim();
-              const isAutoPopulated = Boolean(header.isSensitive && selectedProjectId && value.length > 0);
-
-              return (
-                <div key={header.key} className={`space-y-1.5 ${
-                  isMissing ? 'p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse' : ''
-                }`}>
-                  <label className="text-xs font-medium text-fd-foreground flex items-center gap-2">
-                    {header.label}
-                    {header.required && (
-                      <span className={`text-xs px-1.5 py-0.5 rounded text-xs ${
-                        isMissing
-                          ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
-                          : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
-                      }`}>
-                        required
-                      </span>
-                    )}
-                    {isMissing && (
-                      <AlertTriangle className="w-3 h-3 text-red-500" />
-                    )}
-                  </label>
-                  <input
-                    type="text"
-                    placeholder={header.placeholder}
-                    value={value}
-                    onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
-                    readOnly={isAutoPopulated}
-                    className={`w-full px-2 py-1.5 border rounded-md text-xs bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-1 focus:border-transparent transition-all duration-200 ${
-                      isMissing
-                        ? 'border-red-300 focus:ring-red-500 dark:border-red-700'
-                        : 'border-fd-border focus:ring-fd-primary focus:border-fd-primary'
-                    } ${isAutoPopulated ? 'bg-fd-muted/50 cursor-not-allowed' : ''}`}
-                  />
-                  {isAutoPopulated && (
-                    <p className="text-xs text-fd-muted-foreground">Auto-populated from your account</p>
-                  )}
-                </div>
-              );
-            })}
+            {/* Manual Mode */}
+            {(authMode === 'manual' || !canUseProjectMode) && (
+              <div className="space-y-3">
+                {stackAuthHeaders.map((header) => {
+                  const value = headers[header.key] ?? '';
+                  const isMissing = highlightMissingHeaders && header.required && !value.trim();
+
+                  return (
+                    <div key={header.key} className="space-y-1.5">
+                      <label className="text-sm font-medium text-fd-foreground">
+                        {header.label}
+                      </label>
+                      <input
+                        type="text"
+                        placeholder={header.placeholder}
+                        value={value}
+                        onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
+                        className={cn(
+                          "w-full px-3 py-2 border rounded-lg text-sm bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-2 focus:ring-fd-primary/20 focus:border-fd-primary transition-colors",
+                          isMissing ? 'border-red-300 dark:border-red-700' : 'border-fd-border'
+                        )}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            )}
           </div>
         </div>
 
-        {/* Footer Status */}
-        <div className="border-t border-fd-border p-3">
-          <div className="flex items-center gap-2 text-xs">
-            <div className={`w-2 h-2 rounded-full ${
-              missingRequiredHeaders.length === 0 ? 'bg-green-500' : 'bg-red-500 auth-error-pulse'
-            }`} />
-            <span className="text-fd-muted-foreground">
-              {Object.values(headers).filter(v => v.trim()).length} configured
-              {selectedProjectId && ' (via project selection)'}
-            </span>
-          </div>
-          {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim()) && (
-            <div className="flex items-center gap-2 text-xs mt-1">
-              <div className="w-2 h-2 rounded-full bg-green-500" />
-              <span className="text-green-600 dark:text-green-400">
-                Ready for API requests
+        {/* Status Footer */}
+        <div className="border-t border-fd-border px-4 py-2.5">
+          <div className="flex items-center justify-between text-sm">
+            <div className="flex items-center gap-2">
+              <div className={cn(
+                "w-2 h-2 rounded-full",
+                missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                  ? 'bg-green-500'
+                  : 'bg-fd-muted-foreground/50'
+              )} />
+              <span className="text-fd-muted-foreground">
+                {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                  ? 'Ready'
+                  : 'Not configured'}
               </span>
             </div>
-          )}
+          </div>
         </div>
       </div>
 
@@ -348,170 +363,138 @@ export function AuthPanel() {
         }`}
         aria-hidden={!isAuthOpen}
       >
-        {/* Mobile Header */}
-        <div className="flex items-center justify-between p-3 border-b border-fd-border bg-fd-background">
-          <div className="flex items-center gap-2">
-            <div className={`w-5 h-5 rounded flex items-center justify-center ${
-              highlightMissingHeaders
-                ? 'bg-red-100 dark:bg-red-900/30 auth-error-pulse'
-                : 'bg-blue-100 dark:bg-blue-900/30'
-            }`}>
-              {highlightMissingHeaders ? (
-                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400" />
-              ) : (
-                <Key className="w-3 h-3 text-blue-600 dark:text-blue-400" />
-              )}
-            </div>
-            <div>
-              <h3 className="font-medium text-fd-foreground text-sm">
-                {highlightMissingHeaders ? 'Authentication Required' : 'API Authentication'}
-              </h3>
-              <p className="text-xs text-fd-muted-foreground">
-                Configure headers for requests
-              </p>
-            </div>
-          </div>
+        {/* Mobile Header - with safe area for notched devices */}
+        <div className="flex items-center justify-between px-4 py-4 pt-[max(1rem,env(safe-area-inset-top))] border-b border-fd-border bg-fd-background">
+          <h3 className="font-medium text-fd-foreground text-base">
+            API Authentication
+          </h3>
           <button
             onClick={toggleAuth}
-            className="p-1 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors"
+            className="p-2 -mr-2 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded-lg transition-colors hover:transition-none"
           >
-            <X className="w-4 h-4" />
+            <X className="w-5 h-5" />
           </button>
         </div>
 
         {/* Error Message - Mobile */}
-        <div className="mx-3 mt-3 h-auto">
-          {highlightMissingHeaders && lastError ? (
-            <div className="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse">
-              <div className="flex items-center gap-2 text-xs">
-                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400" />
-                <span className="text-red-800 dark:text-red-300 font-medium">
-                  {lastError.status} Error - Authentication required
-                </span>
-              </div>
-              {missingRequiredHeaders.length > 0 && (
-                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
-                  Missing: {missingRequiredHeaders.map(h => h.label).join(', ')}
-                </p>
-              )}
+        {highlightMissingHeaders && lastError && (
+          <div className="mx-4 mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <div className="flex items-center gap-2 text-sm">
+              <AlertTriangle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
+              <span className="text-red-800 dark:text-red-300 font-medium">
+                {lastError.status} Error - Authentication required
+              </span>
             </div>
-          ) : null}
-        </div>
+          </div>
+        )}
+
+        {/* Mode Toggle - Mobile */}
+        {canUseProjectMode && (
+          <div className="mx-4 mt-4 flex gap-6 border-b border-fd-border">
+            <button
+              type="button"
+              onClick={() => setAuthMode('project')}
+              className={cn(
+                "pb-3 text-base font-medium border-b-2 -mb-px transition-colors",
+                authMode === 'project'
+                  ? "border-fd-foreground text-fd-foreground"
+                  : "border-transparent text-fd-muted-foreground"
+              )}
+            >
+              Select Project
+            </button>
+            <button
+              type="button"
+              onClick={() => setAuthMode('manual')}
+              className={cn(
+                "pb-3 text-base font-medium border-b-2 -mb-px transition-colors",
+                authMode === 'manual'
+                  ? "border-fd-foreground text-fd-foreground"
+                  : "border-transparent text-fd-muted-foreground"
+              )}
+            >
+              Manual
+            </button>
+          </div>
+        )}
 
-        {/* Mobile Content - Fixed height to prevent layout shifts */}
+        {/* Mobile Content */}
         <div className="flex-1 min-h-0">
-          <div className="h-full overflow-y-auto p-3">
-            <div className="space-y-3">
-              {/* Project Selector - Mobile */}
-              {hasOwnedProjects && projects.length > 0 && (
-                <div className="space-y-1.5 pb-3 border-b border-fd-border">
-                  <label className="text-sm font-medium text-fd-foreground flex items-center gap-2">
-                    Quick Select Project
-                    <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
-                      logged in
-                    </span>
-                  </label>
-                  <div className="relative">
-                    <select
-                      value={selectedProjectId}
-                      onChange={(e) => handleProjectSelect(e.target.value)}
-                      className="w-full px-3 py-2 pr-8 border rounded-md text-sm bg-fd-background text-fd-foreground focus:outline-none focus:ring-1 focus:ring-fd-primary focus:border-fd-primary border-fd-border appearance-none cursor-pointer"
-                    >
-                      <option value="">Select a project...</option>
-                      {sortedProjects.map((project) => (
-                        <option key={project.id} value={project.id}>
-                          {project.displayName} ({project.id.slice(0, 8)}...)
-                        </option>
-                      ))}
-                    </select>
-                    <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-fd-muted-foreground pointer-events-none" />
+          <div className="h-full overflow-y-auto px-4 pt-4 pb-6 space-y-4">
+            {/* Project Selection Mode - Mobile */}
+            {authMode === 'project' && canUseProjectMode && (
+              <div className="space-y-4">
+                <ProjectDropdown
+                  projects={sortedProjects}
+                  selectedProjectId={selectedProjectId}
+                  onSelect={handleProjectSelect}
+                />
+                {selectedProjectId && (
+                  <div className="flex items-center gap-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/10 border border-green-200 dark:border-green-800">
+                    <div className="w-2.5 h-2.5 rounded-full bg-green-500"></div>
+                    <span className="text-base text-green-700 dark:text-green-300">Ready to make requests</span>
                   </div>
-                  {selectedProjectId && (
-                    <p className="text-xs text-green-600 dark:text-green-400">
-                      ✓ Headers auto-populated for admin authentication
-                    </p>
-                  )}
-                </div>
-              )}
+                )}
+                <p className="text-sm text-fd-muted-foreground pt-2">
+                  Because you&apos;re signed in, requests are automatically authenticated with your account.
+                </p>
+              </div>
+            )}
 
-              {/* Manual Header Inputs - Mobile */}
-              {stackAuthHeaders.map((header) => {
-                // Hide certain fields when project is selected
-                if (selectedProjectId && header.hideWhenProjectSelected) {
-                  return null;
-                }
-
-                const value = headers[header.key] ?? '';
-                const isMissing = highlightMissingHeaders && header.required && !value.trim();
-                const isAutoPopulated = Boolean(header.isSensitive && selectedProjectId && value.length > 0);
-
-                return (
-                  <div key={header.key} className={`space-y-1.5 ${
-                    isMissing ? 'p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse' : ''
-                  }`}>
-                    <label className="text-sm font-medium text-fd-foreground flex items-center gap-2">
-                      {header.label}
-                      {header.required && (
-                        <span className={`text-xs px-1.5 py-0.5 rounded ${
-                          isMissing
-                            ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
-                            : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
-                        }`}>
-                          required
-                        </span>
-                      )}
-                      {isMissing && (
-                        <AlertTriangle className="w-3 h-3 text-red-500" />
-                      )}
-                    </label>
-                    <input
-                      type="text"
-                      placeholder={header.placeholder}
-                      value={value}
-                      onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
-                      readOnly={isAutoPopulated}
-                      className={`w-full px-3 py-2 border rounded-md text-sm bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-1 focus:border-transparent transition-all duration-200 ${
-                        isMissing
-                          ? 'border-red-300 focus:ring-red-500 dark:border-red-700'
-                          : 'border-fd-border focus:ring-fd-primary focus:border-fd-primary'
-                      } ${isAutoPopulated ? 'bg-fd-muted/50 cursor-not-allowed' : ''}`}
-                    />
-                    {isAutoPopulated && (
-                      <p className="text-xs text-fd-muted-foreground">Auto-populated from your account</p>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
+            {/* Manual Mode - Mobile */}
+            {(authMode === 'manual' || !canUseProjectMode) && (
+              <div className="space-y-4">
+                {stackAuthHeaders.map((header) => {
+                  const value = headers[header.key] ?? '';
+                  const isMissing = highlightMissingHeaders && header.required && !value.trim();
+
+                  return (
+                    <div key={header.key} className="space-y-2">
+                      <label className="text-base font-medium text-fd-foreground">
+                        {header.label}
+                      </label>
+                      <input
+                        type="text"
+                        placeholder={header.placeholder}
+                        value={value}
+                        onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
+                        className={cn(
+                          "w-full px-4 py-3 border rounded-lg text-base bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-2 focus:ring-fd-primary/20 focus:border-fd-primary transition-colors",
+                          isMissing ? 'border-red-300 dark:border-red-700' : 'border-fd-border'
+                        )}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            )}
           </div>
         </div>
 
-        {/* Mobile Footer */}
-        <div className="border-t border-fd-border p-3 bg-fd-background">
+        {/* Mobile Status Footer - with safe area for home indicator */}
+        <div className="border-t border-fd-border px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] bg-fd-background">
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2 text-xs">
-              <div className={`w-2 h-2 rounded-full ${
-                missingRequiredHeaders.length === 0 ? 'bg-green-500' : 'bg-red-500 auth-error-pulse'
-              }`} />
-              <span className="text-fd-muted-foreground">
-                {Object.values(headers).filter(v => v.trim()).length} configured
-                {selectedProjectId && ' (via project)'}
+            <div className="flex items-center gap-2">
+              <div className={cn(
+                "w-2.5 h-2.5 rounded-full",
+                missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                  ? 'bg-green-500'
+                  : 'bg-fd-muted-foreground/50'
+              )} />
+              <span className="text-base text-fd-muted-foreground">
+                {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                  ? 'Ready'
+                  : 'Not configured'}
               </span>
             </div>
-            <Button onClick={toggleAuth} className="text-xs px-3 py-1">
+            <Button onClick={toggleAuth} className="px-6 py-2.5 text-base">
               Done
             </Button>
           </div>
-          {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim()) && (
-            <div className="flex items-center gap-2 text-xs mt-2">
-              <div className="w-2 h-2 rounded-full bg-green-500" />
-              <span className="text-green-600 dark:text-green-400">
-                Ready for API requests
-              </span>
-            </div>
-          )}
         </div>
       </div>
     </>
   );
 }
+
+

From 824a2c590370da9d6daa586df3cd7ad372927bed Mon Sep 17 00:00:00 2001
From: Madison <madison.w.kennedy@gmail.com>
Date: Wed, 14 Jan 2026 08:20:08 -0600
Subject: [PATCH 2/2] fix deselection

---
 docs/src/components/api/auth-panel.tsx | 634 +++++++++++++------------
 1 file changed, 330 insertions(+), 304 deletions(-)

diff --git a/docs/src/components/api/auth-panel.tsx b/docs/src/components/api/auth-panel.tsx
index 019e61a208..c8dfe98279 100644
--- a/docs/src/components/api/auth-panel.tsx
+++ b/docs/src/components/api/auth-panel.tsx
@@ -3,16 +3,12 @@
 import { AdminOwnedProject, CurrentInternalUser, useUser } from '@stackframe/stack';
 import { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';
 import { stringCompare } from '@stackframe/stack-shared/dist/utils/strings';
-import { AlertTriangle, ChevronDown, X } from 'lucide-react';
+import { AlertTriangle, ChevronDown, Key, X } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
-import { cn } from '../../lib/cn';
 import { useSidebar } from '../layouts/sidebar-context';
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { useAPIPageContext } from './api-page-wrapper';
 import { Button } from './button';
 
-type AuthMode = 'project' | 'manual';
-
 type StackAuthHeaderKey =
   | 'X-Stack-Access-Type'
   | 'X-Stack-Project-Id'
@@ -33,10 +29,10 @@ type StackAuthHeaderField = {
 const stackAuthHeaders: StackAuthHeaderField[] = [
   { key: 'X-Stack-Access-Type', label: 'Access Type', placeholder: 'client, server, or admin', required: true },
   { key: 'X-Stack-Project-Id', label: 'Project ID', placeholder: 'your-project-uuid', required: true },
-  { key: 'X-Stack-Publishable-Client-Key', label: 'Client Key', placeholder: 'pck_your_key_here', required: false },
-  { key: 'X-Stack-Secret-Server-Key', label: 'Server Key', placeholder: 'ssk_your_key_here', required: false },
-  { key: 'X-Stack-Access-Token', label: 'Access Token', placeholder: 'user_access_token', required: false },
-  { key: 'X-Stack-Admin-Access-Token', label: 'Admin Access Token', placeholder: 'admin_access_token', required: false },
+  { key: 'X-Stack-Publishable-Client-Key', label: 'Client Key', placeholder: 'pck_your_key_here', required: false, hideWhenProjectSelected: true },
+  { key: 'X-Stack-Secret-Server-Key', label: 'Server Key', placeholder: 'ssk_your_key_here', required: false, hideWhenProjectSelected: true },
+  { key: 'X-Stack-Access-Token', label: 'Access Token', placeholder: 'user_access_token', required: false, hideWhenProjectSelected: true },
+  { key: 'X-Stack-Admin-Access-Token', label: 'Admin Access Token', placeholder: 'admin_access_token', required: false, isSensitive: true },
 ];
 
 type UserHookResult = ReturnType<typeof useUser>;
@@ -45,80 +41,6 @@ function isInternalUser(user: UserHookResult): user is CurrentInternalUser {
   return Boolean(user && 'useOwnedProjects' in user && typeof user.useOwnedProjects === 'function');
 }
 
-function ProjectDropdown({
-  projects,
-  selectedProjectId,
-  onSelect,
-}: {
-  projects: AdminOwnedProject[],
-  selectedProjectId: string,
-  onSelect: (projectId: string) => void,
-}) {
-  const [open, setOpen] = useState(false);
-  const selectedProject = projects.find(p => p.id === selectedProjectId);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "w-full px-3 py-2.5 pr-10 border rounded-lg text-sm bg-fd-background text-fd-foreground",
-            "focus:outline-none focus:ring-2 focus:ring-fd-primary/20 focus:border-fd-primary",
-            "border-fd-border cursor-pointer transition-colors",
-            "flex items-center justify-between text-left"
-          )}
-        >
-          <span className={selectedProjectId ? "text-fd-foreground" : "text-fd-muted-foreground"}>
-            {selectedProject ? selectedProject.displayName : "Choose a project..."}
-          </span>
-          <ChevronDown className={cn(
-            "w-4 h-4 text-fd-muted-foreground transition-transform",
-            open && "rotate-180"
-          )} />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-1.5" align="start">
-        <div className="max-h-[300px] overflow-y-auto">
-          <button
-            type="button"
-            onClick={() => {
-              onSelect('');
-              setOpen(false);
-            }}
-            className={cn(
-              "w-full px-3 py-2.5 text-sm text-left rounded-md transition-colors",
-              !selectedProjectId
-                ? "bg-fd-primary/10 text-fd-primary font-medium"
-                : "hover:bg-fd-accent hover:text-fd-accent-foreground"
-            )}
-          >
-            Choose a project...
-          </button>
-          {projects.map((project) => (
-            <button
-              key={project.id}
-              type="button"
-              onClick={() => {
-                onSelect(project.id);
-                setOpen(false);
-              }}
-              className={cn(
-                "w-full px-3 py-2.5 text-sm text-left rounded-md transition-colors",
-                selectedProjectId === project.id
-                  ? "bg-fd-primary/10 text-fd-primary font-medium"
-                  : "hover:bg-fd-accent hover:text-fd-accent-foreground"
-              )}
-            >
-              {project.displayName}
-            </button>
-          ))}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
 export function AuthPanel() {
   const sidebarContext = useSidebar();
 
@@ -137,10 +59,6 @@ export function AuthPanel() {
   // State for project selection
   const [selectedProjectId, setSelectedProjectId] = useState<string>('');
 
-  // Mode: project selection OR manual entry
-  const canUseProjectMode = hasOwnedProjects && projects.length > 0;
-  const [authMode, setAuthMode] = useState<AuthMode>(canUseProjectMode ? 'project' : 'manual');
-
   // Use default functions if sidebar context is not available
   const { isAuthOpen, toggleAuth } = sidebarContext || {
     isAuthOpen: false,
@@ -188,12 +106,58 @@ export function AuthPanel() {
     });
   }, [selectedProjectId, user, updateSharedHeaders]);
 
+  const [isHomePage, setIsHomePage] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  // Detect if we're on homepage and scroll state (same as AIChatDrawer)
+  useEffect(() => {
+    const checkHomePage = () => {
+      setIsHomePage(document.body.classList.contains('home-page'));
+    };
+
+    const checkScrolled = () => {
+      setIsScrolled(document.body.classList.contains('scrolled'));
+    };
+
+    // Initial check
+    checkHomePage();
+    checkScrolled();
+
+    // Set up observers for class changes
+    const observer = new MutationObserver(() => {
+      checkHomePage();
+      checkScrolled();
+    });
+
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // Calculate position based on homepage and scroll state (same as AIChatDrawer)
+  const topPosition = isHomePage && isScrolled ? 'top-0' : 'top-0';
+  const height = isHomePage && isScrolled ? 'h-screen' : 'h-[calc(100vh)]';
+
   const missingRequiredHeaders = stackAuthHeaders.filter(
     header => header.required && !(headers[header.key] ?? '').trim()
   );
 
   // Handle project selection
   const handleProjectSelect = (projectId: string) => {
+    // Handle deselection (empty string)
+    if (projectId === '') {
+      setSelectedProjectId('');
+      // Clear all headers when deselecting
+      updateSharedHeaders(defaultHeaders);
+      return;
+    }
+
+    // Validate project exists
     if (!projects.some((projectItem) => projectItem.id === projectId)) {
       return;
     }
@@ -223,136 +187,166 @@ export function AuthPanel() {
     <>
       {/* Desktop Auth Panel - Matching AIChatDrawer design */}
       <div
-        className={`hidden md:block absolute top-4 right-4 max-h-[calc(100vh-2rem)] bg-fd-background border border-fd-border flex flex-col transition-all duration-300 ease-out z-50 w-96 rounded-lg pt-4 pr-4 pl-4 pb-2 shadow-lg ${
-          isAuthOpen ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
+        className={`hidden md:block fixed ${topPosition} right-0 ${height} bg-fd-background border-l border-fd-border flex flex-col transition-all duration-300 ease-out z-50 w-96 ${
+          isAuthOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
       >
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 pb-3 border-b border-fd-border">
-          <h3 className="font-medium text-fd-foreground text-sm">
-            API Authentication
-          </h3>
+        {/* Header - Matching AIChatDrawer */}
+        <div className="flex items-center justify-between p-3 border-b border-fd-border bg-fd-background">
+          <div className="flex items-center gap-2">
+            <div className={`w-5 h-5 rounded flex items-center justify-center ${
+              highlightMissingHeaders
+                ? 'bg-red-100 dark:bg-red-900/30 auth-error-pulse'
+                : 'bg-blue-100 dark:bg-blue-900/30'
+            }`}>
+              {highlightMissingHeaders ? (
+                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400" />
+              ) : (
+                <Key className="w-3 h-3 text-blue-600 dark:text-blue-400" />
+              )}
+            </div>
+            <div>
+              <h3 className="font-medium text-fd-foreground text-sm">
+                {highlightMissingHeaders ? 'Authentication Required' : 'API Authentication'}
+              </h3>
+              <p className="text-xs text-fd-muted-foreground">
+                Configure headers for requests
+              </p>
+            </div>
+          </div>
           <button
             onClick={toggleAuth}
-            className="p-1 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors hover:transition-none"
+            className="p-1 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors"
             title="Close auth panel"
           >
-            <X className="w-4 h-4" />
+            <X className="w-3 h-3" />
           </button>
         </div>
 
-        {/* Error Message */}
-        {highlightMissingHeaders && lastError && (
-          <div className="mx-4 mt-3 p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
-            <div className="flex items-center gap-2 text-xs">
-              <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400 flex-shrink-0" />
-              <span className="text-red-800 dark:text-red-300 font-medium">
-                {lastError.status} Error - Authentication required
-              </span>
-            </div>
-          </div>
-        )}
-
-        {/* Mode Toggle - only show if user has projects */}
-        {canUseProjectMode && (
-          <div className="mx-4 mt-3 flex gap-4 border-b border-fd-border">
-            <button
-              type="button"
-              onClick={() => setAuthMode('project')}
-              className={cn(
-                "pb-2 text-sm font-medium border-b-2 -mb-px transition-colors",
-                authMode === 'project'
-                  ? "border-fd-foreground text-fd-foreground"
-                  : "border-transparent text-fd-muted-foreground hover:text-fd-foreground"
-              )}
-            >
-              Select Project
-            </button>
-            <button
-              type="button"
-              onClick={() => setAuthMode('manual')}
-              className={cn(
-                "pb-2 text-sm font-medium border-b-2 -mb-px transition-colors",
-                authMode === 'manual'
-                  ? "border-fd-foreground text-fd-foreground"
-                  : "border-transparent text-fd-muted-foreground hover:text-fd-foreground"
+        {/* Error Message - Reserve space to prevent layout shifts */}
+        <div className="mx-3 mt-3 h-auto">
+          {highlightMissingHeaders && lastError ? (
+            <div className="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse">
+              <div className="flex items-center gap-2 text-xs">
+                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400 flex-shrink-0" />
+                <span className="text-red-800 dark:text-red-300 font-medium">
+                  {lastError.status} Error - Authentication required
+                </span>
+              </div>
+              {missingRequiredHeaders.length > 0 && (
+                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
+                  Missing: {missingRequiredHeaders.map(h => h.label).join(', ')}
+                </p>
               )}
-            >
-              Manual
-            </button>
-          </div>
-        )}
+            </div>
+          ) : null}
+        </div>
 
-        {/* Content */}
+        {/* Content - Fixed height to prevent layout shifts */}
         <div className="flex-1 min-h-0">
-          <div className="h-full overflow-y-auto px-4 pt-4 pb-3 space-y-3">
-            {/* Project Selection Mode */}
-            {authMode === 'project' && canUseProjectMode && (
-              <div className="space-y-3">
-                <ProjectDropdown
-                  projects={sortedProjects}
-                  selectedProjectId={selectedProjectId}
-                  onSelect={handleProjectSelect}
-                />
+          <div className="h-full overflow-y-auto p-3 space-y-3">
+            {/* Project Selector - Show only if user has owned projects */}
+            {hasOwnedProjects && projects.length > 0 && (
+              <div className="space-y-1.5 pb-3 border-b border-fd-border">
+                <label className="text-xs font-medium text-fd-foreground flex items-center gap-2">
+                  Quick Select Project
+                  <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
+                    logged in
+                  </span>
+                </label>
+                <div className="relative">
+                  <select
+                    value={selectedProjectId}
+                    onChange={(e) => handleProjectSelect(e.target.value)}
+                    className="w-full px-2 py-1.5 pr-8 border rounded-md text-xs bg-fd-background text-fd-foreground focus:outline-none focus:ring-1 focus:ring-fd-primary focus:border-fd-primary border-fd-border appearance-none cursor-pointer"
+                  >
+                    <option value="">Select a project...</option>
+                    {sortedProjects.map((project) => (
+                      <option key={project.id} value={project.id}>
+                        {project.displayName} ({project.id.slice(0, 8)}...)
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-fd-muted-foreground pointer-events-none" />
+                </div>
                 {selectedProjectId && (
-                  <div className="flex items-center gap-2 p-2.5 rounded-lg bg-green-50 dark:bg-green-900/10 border border-green-200 dark:border-green-800">
-                    <div className="w-2 h-2 rounded-full bg-green-500"></div>
-                    <span className="text-sm text-green-700 dark:text-green-300">Ready to make requests</span>
-                  </div>
+                  <p className="text-xs text-green-600 dark:text-green-400">
+                    ✓ Headers auto-populated for admin authentication
+                  </p>
                 )}
-                <p className="text-xs text-fd-muted-foreground pt-2">
-                  Because you&apos;re signed in, requests are automatically authenticated with your account.
-                </p>
               </div>
             )}
 
-            {/* Manual Mode */}
-            {(authMode === 'manual' || !canUseProjectMode) && (
-              <div className="space-y-3">
-                {stackAuthHeaders.map((header) => {
-                  const value = headers[header.key] ?? '';
-                  const isMissing = highlightMissingHeaders && header.required && !value.trim();
-
-                  return (
-                    <div key={header.key} className="space-y-1.5">
-                      <label className="text-sm font-medium text-fd-foreground">
-                        {header.label}
-                      </label>
-                      <input
-                        type="text"
-                        placeholder={header.placeholder}
-                        value={value}
-                        onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
-                        className={cn(
-                          "w-full px-3 py-2 border rounded-lg text-sm bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-2 focus:ring-fd-primary/20 focus:border-fd-primary transition-colors",
-                          isMissing ? 'border-red-300 dark:border-red-700' : 'border-fd-border'
-                        )}
-                      />
-                    </div>
-                  );
-                })}
-              </div>
-            )}
+            {/* Manual Header Inputs */}
+            {stackAuthHeaders.map((header) => {
+              // Hide certain fields when project is selected
+              if (selectedProjectId && header.hideWhenProjectSelected) {
+                return null;
+              }
+
+              const value = headers[header.key] ?? '';
+              const isMissing = highlightMissingHeaders && header.required && !value.trim();
+              const isAutoPopulated = Boolean(header.isSensitive && selectedProjectId && value.length > 0);
+
+              return (
+                <div key={header.key} className={`space-y-1.5 ${
+                  isMissing ? 'p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse' : ''
+                }`}>
+                  <label className="text-xs font-medium text-fd-foreground flex items-center gap-2">
+                    {header.label}
+                    {header.required && (
+                      <span className={`text-xs px-1.5 py-0.5 rounded text-xs ${
+                        isMissing
+                          ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+                          : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                      }`}>
+                        required
+                      </span>
+                    )}
+                    {isMissing && (
+                      <AlertTriangle className="w-3 h-3 text-red-500" />
+                    )}
+                  </label>
+                  <input
+                    type="text"
+                    placeholder={header.placeholder}
+                    value={value}
+                    onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
+                    readOnly={isAutoPopulated}
+                    className={`w-full px-2 py-1.5 border rounded-md text-xs bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-1 focus:border-transparent transition-all duration-200 ${
+                      isMissing
+                        ? 'border-red-300 focus:ring-red-500 dark:border-red-700'
+                        : 'border-fd-border focus:ring-fd-primary focus:border-fd-primary'
+                    } ${isAutoPopulated ? 'bg-fd-muted/50 cursor-not-allowed' : ''}`}
+                  />
+                  {isAutoPopulated && (
+                    <p className="text-xs text-fd-muted-foreground">Auto-populated from your account</p>
+                  )}
+                </div>
+              );
+            })}
           </div>
         </div>
 
-        {/* Status Footer */}
-        <div className="border-t border-fd-border px-4 py-2.5">
-          <div className="flex items-center justify-between text-sm">
-            <div className="flex items-center gap-2">
-              <div className={cn(
-                "w-2 h-2 rounded-full",
-                missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
-                  ? 'bg-green-500'
-                  : 'bg-fd-muted-foreground/50'
-              )} />
-              <span className="text-fd-muted-foreground">
-                {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
-                  ? 'Ready'
-                  : 'Not configured'}
+        {/* Footer Status */}
+        <div className="border-t border-fd-border p-3">
+          <div className="flex items-center gap-2 text-xs">
+            <div className={`w-2 h-2 rounded-full ${
+              missingRequiredHeaders.length === 0 ? 'bg-green-500' : 'bg-red-500 auth-error-pulse'
+            }`} />
+            <span className="text-fd-muted-foreground">
+              {Object.values(headers).filter(v => v.trim()).length} configured
+              {selectedProjectId && ' (via project selection)'}
+            </span>
+          </div>
+          {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim()) && (
+            <div className="flex items-center gap-2 text-xs mt-1">
+              <div className="w-2 h-2 rounded-full bg-green-500" />
+              <span className="text-green-600 dark:text-green-400">
+                Ready for API requests
               </span>
             </div>
-          </div>
+          )}
         </div>
       </div>
 
@@ -363,138 +357,170 @@ export function AuthPanel() {
         }`}
         aria-hidden={!isAuthOpen}
       >
-        {/* Mobile Header - with safe area for notched devices */}
-        <div className="flex items-center justify-between px-4 py-4 pt-[max(1rem,env(safe-area-inset-top))] border-b border-fd-border bg-fd-background">
-          <h3 className="font-medium text-fd-foreground text-base">
-            API Authentication
-          </h3>
+        {/* Mobile Header */}
+        <div className="flex items-center justify-between p-3 border-b border-fd-border bg-fd-background">
+          <div className="flex items-center gap-2">
+            <div className={`w-5 h-5 rounded flex items-center justify-center ${
+              highlightMissingHeaders
+                ? 'bg-red-100 dark:bg-red-900/30 auth-error-pulse'
+                : 'bg-blue-100 dark:bg-blue-900/30'
+            }`}>
+              {highlightMissingHeaders ? (
+                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400" />
+              ) : (
+                <Key className="w-3 h-3 text-blue-600 dark:text-blue-400" />
+              )}
+            </div>
+            <div>
+              <h3 className="font-medium text-fd-foreground text-sm">
+                {highlightMissingHeaders ? 'Authentication Required' : 'API Authentication'}
+              </h3>
+              <p className="text-xs text-fd-muted-foreground">
+                Configure headers for requests
+              </p>
+            </div>
+          </div>
           <button
             onClick={toggleAuth}
-            className="p-2 -mr-2 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded-lg transition-colors hover:transition-none"
+            className="p-1 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors"
           >
-            <X className="w-5 h-5" />
+            <X className="w-4 h-4" />
           </button>
         </div>
 
         {/* Error Message - Mobile */}
-        {highlightMissingHeaders && lastError && (
-          <div className="mx-4 mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-            <div className="flex items-center gap-2 text-sm">
-              <AlertTriangle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
-              <span className="text-red-800 dark:text-red-300 font-medium">
-                {lastError.status} Error - Authentication required
-              </span>
-            </div>
-          </div>
-        )}
-
-        {/* Mode Toggle - Mobile */}
-        {canUseProjectMode && (
-          <div className="mx-4 mt-4 flex gap-6 border-b border-fd-border">
-            <button
-              type="button"
-              onClick={() => setAuthMode('project')}
-              className={cn(
-                "pb-3 text-base font-medium border-b-2 -mb-px transition-colors",
-                authMode === 'project'
-                  ? "border-fd-foreground text-fd-foreground"
-                  : "border-transparent text-fd-muted-foreground"
-              )}
-            >
-              Select Project
-            </button>
-            <button
-              type="button"
-              onClick={() => setAuthMode('manual')}
-              className={cn(
-                "pb-3 text-base font-medium border-b-2 -mb-px transition-colors",
-                authMode === 'manual'
-                  ? "border-fd-foreground text-fd-foreground"
-                  : "border-transparent text-fd-muted-foreground"
+        <div className="mx-3 mt-3 h-auto">
+          {highlightMissingHeaders && lastError ? (
+            <div className="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse">
+              <div className="flex items-center gap-2 text-xs">
+                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400" />
+                <span className="text-red-800 dark:text-red-300 font-medium">
+                  {lastError.status} Error - Authentication required
+                </span>
+              </div>
+              {missingRequiredHeaders.length > 0 && (
+                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
+                  Missing: {missingRequiredHeaders.map(h => h.label).join(', ')}
+                </p>
               )}
-            >
-              Manual
-            </button>
-          </div>
-        )}
+            </div>
+          ) : null}
+        </div>
 
-        {/* Mobile Content */}
+        {/* Mobile Content - Fixed height to prevent layout shifts */}
         <div className="flex-1 min-h-0">
-          <div className="h-full overflow-y-auto px-4 pt-4 pb-6 space-y-4">
-            {/* Project Selection Mode - Mobile */}
-            {authMode === 'project' && canUseProjectMode && (
-              <div className="space-y-4">
-                <ProjectDropdown
-                  projects={sortedProjects}
-                  selectedProjectId={selectedProjectId}
-                  onSelect={handleProjectSelect}
-                />
-                {selectedProjectId && (
-                  <div className="flex items-center gap-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/10 border border-green-200 dark:border-green-800">
-                    <div className="w-2.5 h-2.5 rounded-full bg-green-500"></div>
-                    <span className="text-base text-green-700 dark:text-green-300">Ready to make requests</span>
+          <div className="h-full overflow-y-auto p-3">
+            <div className="space-y-3">
+              {/* Project Selector - Mobile */}
+              {hasOwnedProjects && projects.length > 0 && (
+                <div className="space-y-1.5 pb-3 border-b border-fd-border">
+                  <label className="text-sm font-medium text-fd-foreground flex items-center gap-2">
+                    Quick Select Project
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
+                      logged in
+                    </span>
+                  </label>
+                  <div className="relative">
+                    <select
+                      value={selectedProjectId}
+                      onChange={(e) => handleProjectSelect(e.target.value)}
+                      className="w-full px-3 py-2 pr-8 border rounded-md text-sm bg-fd-background text-fd-foreground focus:outline-none focus:ring-1 focus:ring-fd-primary focus:border-fd-primary border-fd-border appearance-none cursor-pointer"
+                    >
+                      <option value="">Select a project...</option>
+                      {sortedProjects.map((project) => (
+                        <option key={project.id} value={project.id}>
+                          {project.displayName} ({project.id.slice(0, 8)}...)
+                        </option>
+                      ))}
+                    </select>
+                    <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-fd-muted-foreground pointer-events-none" />
                   </div>
-                )}
-                <p className="text-sm text-fd-muted-foreground pt-2">
-                  Because you&apos;re signed in, requests are automatically authenticated with your account.
-                </p>
-              </div>
-            )}
+                  {selectedProjectId && (
+                    <p className="text-xs text-green-600 dark:text-green-400">
+                      ✓ Headers auto-populated for admin authentication
+                    </p>
+                  )}
+                </div>
+              )}
 
-            {/* Manual Mode - Mobile */}
-            {(authMode === 'manual' || !canUseProjectMode) && (
-              <div className="space-y-4">
-                {stackAuthHeaders.map((header) => {
-                  const value = headers[header.key] ?? '';
-                  const isMissing = highlightMissingHeaders && header.required && !value.trim();
-
-                  return (
-                    <div key={header.key} className="space-y-2">
-                      <label className="text-base font-medium text-fd-foreground">
-                        {header.label}
-                      </label>
-                      <input
-                        type="text"
-                        placeholder={header.placeholder}
-                        value={value}
-                        onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
-                        className={cn(
-                          "w-full px-4 py-3 border rounded-lg text-base bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-2 focus:ring-fd-primary/20 focus:border-fd-primary transition-colors",
-                          isMissing ? 'border-red-300 dark:border-red-700' : 'border-fd-border'
-                        )}
-                      />
-                    </div>
-                  );
-                })}
-              </div>
-            )}
+              {/* Manual Header Inputs - Mobile */}
+              {stackAuthHeaders.map((header) => {
+                // Hide certain fields when project is selected
+                if (selectedProjectId && header.hideWhenProjectSelected) {
+                  return null;
+                }
+
+                const value = headers[header.key] ?? '';
+                const isMissing = highlightMissingHeaders && header.required && !value.trim();
+                const isAutoPopulated = Boolean(header.isSensitive && selectedProjectId && value.length > 0);
+
+                return (
+                  <div key={header.key} className={`space-y-1.5 ${
+                    isMissing ? 'p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse' : ''
+                  }`}>
+                    <label className="text-sm font-medium text-fd-foreground flex items-center gap-2">
+                      {header.label}
+                      {header.required && (
+                        <span className={`text-xs px-1.5 py-0.5 rounded ${
+                          isMissing
+                            ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+                            : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                        }`}>
+                          required
+                        </span>
+                      )}
+                      {isMissing && (
+                        <AlertTriangle className="w-3 h-3 text-red-500" />
+                      )}
+                    </label>
+                    <input
+                      type="text"
+                      placeholder={header.placeholder}
+                      value={value}
+                      onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
+                      readOnly={isAutoPopulated}
+                      className={`w-full px-3 py-2 border rounded-md text-sm bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-1 focus:border-transparent transition-all duration-200 ${
+                        isMissing
+                          ? 'border-red-300 focus:ring-red-500 dark:border-red-700'
+                          : 'border-fd-border focus:ring-fd-primary focus:border-fd-primary'
+                      } ${isAutoPopulated ? 'bg-fd-muted/50 cursor-not-allowed' : ''}`}
+                    />
+                    {isAutoPopulated && (
+                      <p className="text-xs text-fd-muted-foreground">Auto-populated from your account</p>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
           </div>
         </div>
 
-        {/* Mobile Status Footer - with safe area for home indicator */}
-        <div className="border-t border-fd-border px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] bg-fd-background">
+        {/* Mobile Footer */}
+        <div className="border-t border-fd-border p-3 bg-fd-background">
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className={cn(
-                "w-2.5 h-2.5 rounded-full",
-                missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
-                  ? 'bg-green-500'
-                  : 'bg-fd-muted-foreground/50'
-              )} />
-              <span className="text-base text-fd-muted-foreground">
-                {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
-                  ? 'Ready'
-                  : 'Not configured'}
+            <div className="flex items-center gap-2 text-xs">
+              <div className={`w-2 h-2 rounded-full ${
+                missingRequiredHeaders.length === 0 ? 'bg-green-500' : 'bg-red-500 auth-error-pulse'
+              }`} />
+              <span className="text-fd-muted-foreground">
+                {Object.values(headers).filter(v => v.trim()).length} configured
+                {selectedProjectId && ' (via project)'}
               </span>
             </div>
-            <Button onClick={toggleAuth} className="px-6 py-2.5 text-base">
+            <Button onClick={toggleAuth} className="text-xs px-3 py-1">
               Done
             </Button>
           </div>
+          {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim()) && (
+            <div className="flex items-center gap-2 text-xs mt-2">
+              <div className="w-2 h-2 rounded-full bg-green-500" />
+              <span className="text-green-600 dark:text-green-400">
+                Ready for API requests
+              </span>
+            </div>
+          )}
         </div>
       </div>
     </>
   );
 }
-
-