onboarding fixes, design

.cursor/rules.json

···
 {
-  "name": "Pandora Project Rules",
-  "description": "Rules and guidelines for the Pandora project",
+  "name": "PR Cat Project Rules",
+  "description": "Rules and guidelines for the PR Cat project",
   "technologies": {
     "required": [
       {

app/api/debug/categorize-pr/route.ts

···
     
     console.log(`DEBUG: Starting categorization for PR #${pullRequest.number} (ID: ${prId}) in ${repository.full_name}`);
     
-    // Get AI settings for organization
+    // Get API settings for organization
     const aiSettings = await getOrganizationAiSettings(organizationId);
     if (!aiSettings.selectedModelId || aiSettings.selectedModelId === '__none__') {
       return NextResponse.json({ 
···
     }
     
     // Get provider and model info
+    const provider = aiSettings.provider;
     const selectedModelId = aiSettings.selectedModelId;
-    const [provider] = selectedModelId.split('/');
+    
+    if (!provider) {
+      return NextResponse.json({ 
+        error: 'AI provider not set for organization'
+      }, { status: 400 });
+    }
     
     // Get API key for provider
-    const apiKey = await getOrganizationApiKey(organizationId, provider as 'openai' | 'google' | 'anthropic');
+    const apiKey = await getOrganizationApiKey(organizationId, provider);
     
     if (!apiKey) {
       return NextResponse.json({ 

app/api/webhook/github/route.ts

···
       }
     }
     
-    // 1. Fetch Organization's AI Settings (using organizationId)
+    // 1. Get API settings (model + API key)
+    console.log(`WEBHOOK AI SETTINGS: Getting AI settings for organization ${organizationId}`);
     const aiSettings = await getOrganizationAiSettings(organizationId);
-    console.log(`WEBHOOK AI SETTINGS: Organization ${organizationId} AI settings:`, 
-                aiSettings ? `model=${aiSettings.selectedModelId}` : "No settings found");
-                
-    if (!aiSettings || !aiSettings.selectedModelId) {
+    const selectedModelId = aiSettings.selectedModelId;
+    
+    if (!selectedModelId || selectedModelId === '__none__') {
       console.log(`WEBHOOK INFO: AI categorization disabled for organization ${organizationId} (no model selected).`);
       await PullRequestRepository.updatePullRequest(prDbId, { ai_status: 'skipped', error_message: 'AI categorization disabled for organization' });
       return;
     }
-
-    const selectedModelId = aiSettings.selectedModelId;
-    console.log(`WEBHOOK AI MODEL: Organization ${organizationId} selected AI model: ${selectedModelId}`);
-
-    const modelInfo = allModels.find(m => m.id === selectedModelId);
-    if (!modelInfo) {
-      console.error(`WEBHOOK ERROR: Selected model ID ${selectedModelId} not found in allModels for organization ${organizationId}.`);
-      await PullRequestRepository.updatePullRequest(prDbId, { ai_status: 'error', error_message: `Selected AI model ${selectedModelId} not configured` });
+    
+    const provider = aiSettings.provider;
+    
+    if (!provider) {
+      console.log(`WEBHOOK INFO: AI provider not set for organization ${organizationId}.`);
+      await PullRequestRepository.updatePullRequest(prDbId, { ai_status: 'skipped', error_message: 'AI provider not set for organization' });
       return;
     }
-    const provider = modelInfo.provider;
-    console.log(`WEBHOOK AI PROVIDER: Determined provider: ${provider} for model ${selectedModelId}`);
-
+    
+    console.log(`WEBHOOK MODEL: Using AI model ${selectedModelId} with provider ${provider}`);
+    
     const apiKey = await getOrganizationApiKey(organizationId, provider);
     if (!apiKey) {
       console.warn(`WEBHOOK WARNING: API key for provider ${provider} not set for organization ${organizationId}. Skipping AI categorization.`);

app/dashboard/analytics/page.tsx

···
     >
       <AppSidebar variant="inset" />
       <SidebarInset>
-        <SiteHeader />
+        <SiteHeader pageTitle="Team Collaboration Insights" />
         <div className="flex flex-1 flex-col">
           <div className="@container/main flex flex-1 flex-col gap-2">
             <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-              <div className="flex justify-between items-center px-4 lg:px-6">
-                <h1 className="text-2xl font-semibold">Team Collaboration Insights</h1>
+              <div className="flex justify-end items-center px-4 lg:px-6">
                 <Button variant="outline" size="sm">
                   <IconDownload className="mr-2 h-4 w-4" />
                   Export Team Report

app/dashboard/debug/page.tsx

···
     >
       <AppSidebar variant="inset" />
       <SidebarInset>
-        <SiteHeader />
+        <SiteHeader pageTitle="Debug Information" />
         <div className="flex flex-1 flex-col">
           <div className="@container/main flex flex-1 flex-col gap-2">
             <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-              <div className="px-4 lg:px-6">
-                <h1 className="text-2xl font-semibold">Debug Information</h1>
-              </div>
               <div className="grid gap-4 px-4 lg:px-6">
                 <Card>
                   <CardHeader>

app/dashboard/lifecycle/page.tsx

···
     >
       <AppSidebar variant="inset" />
       <SidebarInset>
-        <SiteHeader />
+        <SiteHeader pageTitle="PR Lifecycle" />
         <div className="flex flex-1 flex-col">
           <div className="@container/main flex flex-1 flex-col gap-2">
             <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
               <div className="flex justify-between items-center px-4 lg:px-6">
-                <h1 className="text-2xl font-semibold">PR Lifecycle</h1>
                 <div className="flex gap-3">
                   <RepositoryFilter />
                   <DateRangePickerWithPresets />

app/dashboard/page.tsx

···
     >
       <AppSidebar variant="inset" />
       <SidebarInset>
-        <SiteHeader />
+        <SiteHeader pageTitle="Dashboard Overview" />
         {setupIncomplete && (
           <div className="px-4 pt-4 lg:px-6">
             <SetupStatusAlert />
···
         <div className="flex flex-1 flex-col">
           <div className="@container/main flex flex-1 flex-col gap-2">
             <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-              <div className="px-4 lg:px-6">
-                <h1 className="text-2xl font-semibold">Dashboard Overview</h1>
-              </div>
               <SectionCardsEngineering />
               <div className="px-4 lg:px-6">
                 <ActionableRecommendations />

app/dashboard/projects/page.tsx

···
     >
       <AppSidebar variant="inset" />
       <SidebarInset>
-        <SiteHeader />
+        <SiteHeader pageTitle="Projects & Repositories" />
         <div className="flex flex-1 flex-col">
           <div className="@container/main flex flex-1 flex-col gap-2">
             <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-              <div className="px-4 lg:px-6">
-                <h1 className="text-2xl font-semibold">Projects & Repositories</h1>
-              </div>
               <RepositoryInsights />
             </div>
           </div>

app/dashboard/settings/page.tsx

···
     >
       <AppSidebar variant="inset" />
       <SidebarInset>
-        <SiteHeader />
+        <SiteHeader pageTitle="Settings" />
         <div className="flex flex-1 flex-col">
           <div className="@container/main flex flex-1 flex-col gap-2">
             <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-              <div className="px-4 lg:px-6">
-                <h1 className="text-2xl font-semibold">Settings</h1>
-              </div>
-              
               <Tabs defaultValue="github" className="px-4 lg:px-6">
                 <TabsList>
                   <TabsTrigger value="github">GitHub</TabsTrigger>

app/dashboard/team/page.tsx

···
     >
       <AppSidebar variant="inset" />
       <SidebarInset>
-        <SiteHeader />
+        <SiteHeader pageTitle="Team Performance" />
         <div className="flex flex-1 flex-col">
           <div className="@container/main flex flex-1 flex-col gap-2">
             <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-              <div className="px-4 lg:px-6">
-                <h1 className="text-2xl font-semibold">Team Performance</h1>
-              </div>
               <DeveloperPerformance />
             </div>
           </div>

components/onboarding-wizard.tsx

···
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { InstallGitHubApp } from '@/components/ui/install-github-app';
-import { CheckCircle2, ChevronRight, Github } from 'lucide-react';
+import { CheckCircle2, ChevronRight, Github, CheckIcon } from 'lucide-react';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
+import { allModels, ModelDefinition } from '@/lib/ai-models';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Organization, Repository } from '@/lib/types';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Checkbox } from '@/components/ui/checkbox';
 
 // Define the onboarding steps
 const STEPS = {
···
   COMPLETE: 4
 };
 
+// Define minimal organization and repository types
+interface GitHubOrganization {
+  id: number;
+  login: string;
+  avatar_url?: string;
+}
+
+interface GitHubRepository {
+  id: number;
+  name: string;
+  full_name: string;
+  private: boolean;
+}
+
 export function OnboardingWizard() {
   const { data: session, status } = useSession();
   const router = useRouter();
   const [currentStep, setCurrentStep] = useState(STEPS.WELCOME);
   const [githubAppInstalled, setGithubAppInstalled] = useState(false);
   
+  // Add AI settings state
+  const [selectedProvider, setSelectedProvider] = useState<'openai' | 'google' | 'anthropic' | null>(null);
+  const [selectedModelId, setSelectedModelId] = useState<string | null>(null);
+  const [apiKey, setApiKey] = useState<string>('');
+
+  // Add organization and repository state
+  const [organizations, setOrganizations] = useState<GitHubOrganization[]>([]);
+  const [selectedOrg, setSelectedOrg] = useState<GitHubOrganization | null>(null);
+  const [repositories, setRepositories] = useState<GitHubRepository[]>([]);
+  const [selectedRepoIds, setSelectedRepoIds] = useState<Set<number>>(new Set());
+  const [isLoadingOrgs, setIsLoadingOrgs] = useState(false);
+  const [isLoadingRepos, setIsLoadingRepos] = useState(false);
+
+  // Filter models based on selected provider
+  const availableModels = selectedProvider 
+    ? allModels.filter(model => model.provider === selectedProvider)
+    : [];
+
+  // Load GitHub data when on repository selection step
+  useEffect(() => {
+    const fetchGitHubData = async () => {
+      if (currentStep === STEPS.REPO_SELECT) {
+        await fetchGitHubOrganizations();
+      }
+    };
+    
+    fetchGitHubData();
+  }, [currentStep]);
+
+  // Fetch GitHub organizations directly
+  const fetchGitHubOrganizations = async () => {
+    setIsLoadingOrgs(true);
+    try {
+      // Use GitHub API directly - bypassing our backend API
+      const accessToken = session?.accessToken;
+      
+      if (!accessToken) {
+        console.error('No GitHub access token found in session');
+        toast.error('GitHub authorization required');
+        return;
+      }
+      
+      const response = await fetch('https://api.github.com/user/orgs', {
+        headers: {
+          Authorization: `Bearer ${accessToken}`, 
+          Accept: 'application/vnd.github.v3+json'
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`GitHub API error: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      setOrganizations(data);
+      
+      if (data.length > 0) {
+        setSelectedOrg(data[0]);
+        fetchGitHubRepositories(data[0].login);
+      }
+    } catch (error) {
+      console.error('Error fetching GitHub organizations:', error);
+      toast.error('Failed to load GitHub organizations');
+      // Fallback to mocks if needed
+      setOrganizations([
+        { id: 1, login: 'Example-Organization', avatar_url: '' }
+      ]);
+    } finally {
+      setIsLoadingOrgs(false);
+    }
+  };
+
+  // Fetch repositories for the selected organization
+  const fetchGitHubRepositories = async (orgName: string) => {
+    setIsLoadingRepos(true);
+    try {
+      // Use GitHub API directly - bypassing our backend API
+      const accessToken = session?.accessToken;
+      
+      if (!accessToken) {
+        console.error('No GitHub access token found in session');
+        toast.error('GitHub authorization required');
+        return;
+      }
+      
+      const response = await fetch(`https://api.github.com/orgs/${orgName}/repos?per_page=100`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          Accept: 'application/vnd.github.v3+json'
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`GitHub API error: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      setRepositories(data);
+    } catch (error) {
+      console.error(`Error fetching repositories for ${orgName}:`, error);
+      toast.error('Failed to load repositories');
+      // Fallback to mocks if needed
+      setRepositories([
+        { id: 101, name: 'example-repo', full_name: 'Example-Organization/example-repo', private: false }
+      ]);
+    } finally {
+      setIsLoadingRepos(false);
+    }
+  };
+
+  // Handle organization selection
+  const handleOrgSelect = (org: GitHubOrganization) => {
+    setSelectedOrg(org);
+    setRepositories([]);
+    setSelectedRepoIds(new Set());
+    fetchGitHubRepositories(org.login);
+  };
+  
+  // Toggle repository selection
+  const toggleRepository = (repoId: number) => {
+    setSelectedRepoIds(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(repoId)) {
+        newSet.delete(repoId);
+      } else {
+        newSet.add(repoId);
+      }
+      return newSet;
+    });
+  };
+  
   // Check if GitHub App is installed (simplified version)
   useEffect(() => {
     // In a real implementation, you'd make an API call to check if the GitHub App
···
     // This is where you'd open the GitHub App installation page
     // For now, we'll use the InstallGitHubApp component's logic
   };
+
+  // Handle provider selection
+  const handleProviderSelect = (provider: 'openai' | 'google' | 'anthropic' | null) => {
+    setSelectedProvider(provider);
+    setSelectedModelId(null); // Reset model when provider changes
+    setApiKey('');
+  };
   
   // Go to next step
-  const handleNext = () => {
+  const handleNext = async () => {
     if (currentStep < STEPS.COMPLETE) {
+      // Validate AI settings before proceeding
+      if (currentStep === STEPS.AI_SETUP) {
+        if (!selectedProvider) {
+          toast.warning("Please select an AI provider");
+          return;
+        }
+        if (!selectedModelId) {
+          toast.warning("Please select an AI model");
+          return;
+        }
+        
+        // Save AI settings (in a real app, this would be persisted)
+        toast.success(`${selectedProvider} provider with ${selectedModelId} model selected`);
+        // In a real implementation, you would save the API key and other settings to the database
+      }
+
+      // Handle repository tracking when completing the repo selection step
+      if (currentStep === STEPS.REPO_SELECT && selectedRepoIds.size > 0) {
+        try {
+          // In a real implementation, you would save the selected repositories
+          // This is a simplified version that just shows a toast
+          toast.success(`${selectedRepoIds.size} repositories selected for tracking`);
+          
+          // Ideally you'd make an API call to update repositories
+          // const response = await fetch('/api/repositories/track', {
+          //   method: 'POST',
+          //   headers: { 'Content-Type': 'application/json' },
+          //   body: JSON.stringify({ 
+          //     repositoryIds: Array.from(selectedRepoIds),
+          //     tracked: true 
+          //   })
+          // });
+          // if (!response.ok) throw new Error('Failed to update repository tracking');
+        } catch (error) {
+          console.error('Error updating repository tracking:', error);
+          toast.error('Failed to update repository tracking');
+          return;
+        }
+      }
+      
       setCurrentStep(currentStep + 1);
     } else {
       // Onboarding complete, navigate to dashboard
···
   
   // Progress percentage
   const progressPercentage = Math.min(100, (currentStep / (STEPS.COMPLETE)) * 100);
+
+  // Get API key label and link based on provider
+  const getApiKeyInfo = () => {
+    if (!selectedProvider) return { label: '', link: '' };
+    
+    switch (selectedProvider) {
+      case 'openai':
+        return {
+          label: 'OpenAI API Key',
+          link: 'https://platform.openai.com/api-keys'
+        };
+      case 'google':
+        return {
+          label: 'Google AI API Key',
+          link: 'https://ai.google.dev/'
+        };
+      case 'anthropic':
+        return {
+          label: 'Anthropic API Key',
+          link: 'https://console.anthropic.com/'
+        };
+      default:
+        return { label: '', link: '' };
+    }
+  };
+  
+  const apiKeyInfo = getApiKeyInfo();
   
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-background p-4">
···
         <CardHeader>
           <div className="flex justify-between items-center">
             <div>
-              <CardTitle className="text-2xl">Welcome to Pandora</CardTitle>
+              <CardTitle className="text-2xl">Welcome to PR Cat</CardTitle>
               <CardDescription>
                 Let's get your workspace set up in just a few steps
               </CardDescription>
···
           </div>
         </CardHeader>
         
-        <Progress value={progressPercentage} className="mb-4 mx-6" />
+        <div className="px-6">
+          <Progress value={progressPercentage} className="mb-4" />
+        </div>
         
         <CardContent>
           {currentStep === STEPS.WELCOME && (
             <div className="space-y-4">
-              <h3 className="text-lg font-medium">Welcome to Pandora PR Categorizer!</h3>
               <p>
-                Pandora helps you categorize and analyze pull requests using AI.
-                Let's set up your account in a few simple steps.
+              PR Cat helps engineering leads who are in the trenches with their teams. Not an enterprise surveillance tool, but a collaborative platform that improves flow and removes barriers together.
               </p>
               <div className="flex flex-col space-y-2">
                 <div className="flex items-center space-x-2 text-sm">
···
             <div className="space-y-4">
               <h3 className="text-lg font-medium">Install GitHub App</h3>
               <p>
-                To analyze your pull requests, Pandora needs access to your GitHub repositories.
+                To analyze your pull requests, PR Cat needs access to your GitHub repositories.
                 Install our GitHub App to continue.
               </p>
               
···
                 <div className="flex flex-col items-center space-y-4 p-4 bg-muted/50 rounded-md">
                   <Github className="h-10 w-10" />
                   <p className="text-sm text-center">
-                    Click the button below to install the Pandora GitHub App.
+                    Click the button below to install the PR Cat GitHub App.
                     You'll be redirected to GitHub to complete the installation.
                   </p>
                   <InstallGitHubApp onClick={handleGitHubAppInstall} />
···
             <div className="space-y-4">
               <h3 className="text-lg font-medium">Configure AI Settings</h3>
               <p>
-                Pandora uses AI to categorize your pull requests. Choose your preferred AI provider and add your API key.
+                PR Cat uses AI to categorize your pull requests. Choose your preferred AI provider and add your API key.
               </p>
+              
+              {/* Provider Selection */}
               <div className="space-y-2">
-                <p className="text-sm font-medium">Select AI Provider</p>
+                <Label htmlFor="provider-select">Select AI Provider</Label>
                 <div className="grid grid-cols-3 gap-2">
-                  <Button variant="outline" className="justify-start h-auto py-2" onClick={() => toast.info("OpenAI selected")}>
+                  <Button 
+                    variant={selectedProvider === 'openai' ? 'default' : 'outline'} 
+                    className="justify-start h-auto py-2" 
+                    onClick={() => handleProviderSelect('openai')}
+                  >
                     <div className="flex flex-col items-start">
                       <span>OpenAI</span>
                       <span className="text-xs text-muted-foreground">GPT-4o, GPT-3.5</span>
                     </div>
                   </Button>
-                  <Button variant="outline" className="justify-start h-auto py-2" onClick={() => toast.info("Google selected")}>
+                  <Button 
+                    variant={selectedProvider === 'google' ? 'default' : 'outline'} 
+                    className="justify-start h-auto py-2" 
+                    onClick={() => handleProviderSelect('google')}
+                  >
                     <div className="flex flex-col items-start">
                       <span>Google</span>
                       <span className="text-xs text-muted-foreground">Gemini</span>
                     </div>
                   </Button>
-                  <Button variant="outline" className="justify-start h-auto py-2" onClick={() => toast.info("Anthropic selected")}>
+                  <Button 
+                    variant={selectedProvider === 'anthropic' ? 'default' : 'outline'} 
+                    className="justify-start h-auto py-2" 
+                    onClick={() => handleProviderSelect('anthropic')}
+                  >
                     <div className="flex flex-col items-start">
                       <span>Anthropic</span>
                       <span className="text-xs text-muted-foreground">Claude</span>
                     </div>
                   </Button>
                 </div>
-                <p className="text-sm text-muted-foreground mt-4">
-                  You can configure these settings in detail later from the Settings page.
-                </p>
               </div>
+              
+              {/* Model Selection - only shown when provider is selected */}
+              {selectedProvider && (
+                <div className="space-y-2">
+                  <Label htmlFor="model-select">Select AI Model</Label>
+                  <Select
+                    value={selectedModelId || ''}
+                    onValueChange={(value) => setSelectedModelId(value || null)}
+                  >
+                    <SelectTrigger id="model-select">
+                      <SelectValue placeholder={`Select ${selectedProvider} model`} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableModels.map((model) => (
+                        <SelectItem key={model.id} value={model.id}>
+                          {model.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+              
+              {/* API Key Input - only shown when provider is selected */}
+              {selectedProvider && (
+                <div className="space-y-2">
+                  <Label htmlFor="api-key-input">{apiKeyInfo.label}</Label>
+                  <Input
+                    id="api-key-input"
+                    type="password"
+                    placeholder="Enter your API key"
+                    value={apiKey}
+                    onChange={(e) => setApiKey(e.target.value)}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Get your API key from <a href={apiKeyInfo.link} target="_blank" rel="noopener noreferrer" className="underline">
+                      {selectedProvider === 'openai' ? 'OpenAI dashboard' : 
+                       selectedProvider === 'google' ? 'Google AI Studio' : 'Anthropic Console'}
+                    </a>.
+                  </p>
+                </div>
+              )}
+              
+              <p className="text-sm text-muted-foreground mt-4">
+                You can configure these settings in detail later from the Settings page.
+              </p>
             </div>
           )}
           
···
             <div className="space-y-4">
               <h3 className="text-lg font-medium">Select Repositories</h3>
               <p>
-                Choose which repositories you want Pandora to analyze and categorize pull requests for.
+                Choose which repositories you want PR Cat to analyze and categorize pull requests for.
               </p>
-              <div className="p-4 bg-muted/50 rounded-md">
-                <p className="text-sm text-center">
-                  You can select repositories once GitHub organizations have been synced.
-                  This can be done from the dashboard after setup.
-                </p>
-              </div>
+              
+              {isLoadingOrgs ? (
+                <div className="p-4 bg-muted/50 rounded-md text-center">
+                  <p>Loading your GitHub organizations...</p>
+                </div>
+              ) : organizations.length === 0 ? (
+                <div className="p-4 bg-muted/50 rounded-md">
+                  <p className="text-sm text-center">
+                    No GitHub organizations found. Please make sure you've installed the PR Cat GitHub App and have access to GitHub organizations.
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {/* Organization List */}
+                  <div className="space-y-2">
+                    <Label>Select Organization</Label>
+                    <div className="flex flex-wrap gap-2">
+                      {organizations.map((org) => (
+                        <Button
+                          key={org.id}
+                          variant={selectedOrg?.id === org.id ? "default" : "outline"}
+                          size="sm"
+                          onClick={() => handleOrgSelect(org)}
+                          className="flex items-center gap-2"
+                        >
+                          <Avatar className="h-5 w-5">
+                            <AvatarImage src={org.avatar_url || undefined} alt={org.login} />
+                            <AvatarFallback>{org.login.charAt(0).toUpperCase()}</AvatarFallback>
+                          </Avatar>
+                          <span>{org.login}</span>
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+                  
+                  {/* Repository List */}
+                  {selectedOrg && (
+                    <div className="space-y-2">
+                      <Label>Select Repositories to Track</Label>
+                      {isLoadingRepos ? (
+                        <p className="text-sm">Loading repositories...</p>
+                      ) : repositories.length === 0 ? (
+                        <p className="text-sm">No repositories found for this organization.</p>
+                      ) : (
+                        <div className="max-h-60 overflow-y-auto border rounded-md p-2">
+                          {repositories.map((repo) => (
+                            <div 
+                              key={repo.id} 
+                              className="flex items-center p-2 hover:bg-muted/50 rounded-md cursor-pointer"
+                              onClick={() => toggleRepository(repo.id)}
+                            >
+                              <Checkbox 
+                                id={`repo-${repo.id}`}
+                                checked={selectedRepoIds.has(repo.id)}
+                                className="mr-2"
+                              />
+                              <Label 
+                                htmlFor={`repo-${repo.id}`}
+                                className="flex-grow cursor-pointer"
+                              >
+                                {repo.name}
+                                {repo.private && (
+                                  <span className="ml-2 text-xs bg-muted px-1 py-0.5 rounded">Private</span>
+                                )}
+                              </Label>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                      <p className="text-xs text-muted-foreground">
+                        Selected {selectedRepoIds.size} repositories for tracking
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           )}
           
···
               </div>
               <h3 className="text-lg font-medium">Setup Complete!</h3>
               <p>
-                You're all set! Pandora is now ready to help you analyze and categorize your pull requests.
+                You're all set! PR Cat is now ready to help you analyze and categorize your pull requests.
               </p>
             </div>
           )}

components/site-header.tsx

···
 import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
-import { Button } from "@/components/ui/button"
-import { RefreshCcw, Settings, FileBarChart } from "lucide-react"
+import { PrcatLogo } from "@/components/ui/prcat-logo"
 
-export function SiteHeader() {
+export function SiteHeader({ pageTitle }: { pageTitle?: string }) {
   return (
     <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
       <div className="flex w-full items-center justify-between gap-1 px-4 lg:gap-2 lg:px-6">
···
             orientation="vertical"
             className="mx-2 data-[orientation=vertical]:h-4"
           />
-          <h1 className="text-base font-medium">Dashboard</h1>
-        </div>
-        
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" className="gap-1.5">
-            <RefreshCcw size={16} />
-            <span className="hidden md:inline">Sync GitHub PRs</span>
-          </Button>
-          
-          <Button variant="outline" size="sm" className="gap-1.5">
-            <FileBarChart size={16} />
-            <span className="hidden md:inline">Generate Report</span>
-          </Button>
-          
-          <Button variant="outline" size="sm" className="gap-1.5">
-            <Settings size={16} />
-            <span className="hidden md:inline">Configure Categories</span>
-          </Button>
+          {pageTitle ? (
+            <h1 className="text-2xl font-semibold">{pageTitle}</h1>
+          ) : (
+            <PrcatLogo fontSize="text-base" iconSize="h-4 w-4" />
+          )}
         </div>
       </div>
     </header>

components/ui/ai-settings-tab.tsx

···
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Input } from '@/components/ui/input';
 import { toast } from 'sonner';
-import { AiSettings as FetchedAiSettings, UpdateAiSettingsPayload } from '@/lib/repositories';
+import { AiSettings as FetchedAiSettings, UpdateAiSettingsPayload, AIProvider } from '@/lib/repositories';
 import { Organization } from '@/lib/types';
 import { Avatar, AvatarImage, AvatarFallback } from './avatar';
-import { allModels, ModelDefinition } from '@/lib/ai-models'; // Import shared models and definition
+import { allModels, ModelDefinition } from '@/lib/ai-models';
 
 export function AiSettingsTab() {
   const { data: session, status: sessionStatus } = useSession();
···
 
   const [fetchedSettings, setFetchedSettings] = useState<FetchedAiSettings | null>(null);
   
+  const [selectedProvider, setSelectedProvider] = useState<AIProvider>(null);
   const [selectedModelId, setSelectedModelId] = useState<string | null>(null);
   const [openaiApiKeyInput, setOpenaiApiKeyInput] = useState('');
   const [googleApiKeyInput, setGoogleApiKeyInput] = useState('');
···
 
   const [isLoadingSettings, setIsLoadingSettings] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+
+  // Filter models by selected provider
+  const availableModels = selectedProvider 
+    ? allModels.filter(model => model.provider === selectedProvider)
+    : [];
 
   useEffect(() => {
     if (session?.organizations && Array.isArray(session.organizations)) {
···
       if (!selectedOrganization) return;
       setIsLoadingSettings(true);
       setFetchedSettings(null);
+      setSelectedProvider(null);
       setSelectedModelId(null);
       setOpenaiApiKeyInput('');
       setGoogleApiKeyInput('');
···
         }
         const data: FetchedAiSettings = await response.json();
         setFetchedSettings(data);
+        setSelectedProvider(data.provider);
         setSelectedModelId(data.selectedModelId);
       } catch (error) {
         toast.error(error instanceof Error ? error.message : 'Could not load AI settings.');
···
       fetchSettings();
     } else {
       setFetchedSettings(null);
+      setSelectedProvider(null);
       setSelectedModelId(null);
       setOpenaiApiKeyInput('');
       setGoogleApiKeyInput('');
···
     }
   }, [selectedOrganization]);
 
-  const currentSelectedModelDetails = selectedModelId ? allModels.find(m => m.id === selectedModelId) : null;
+  // When provider changes, reset model selection
+  useEffect(() => {
+    if (selectedProvider) {
+      // Check if current selected model is from the new provider
+      const currentModelMatchesProvider = selectedModelId && 
+        allModels.some(m => m.id === selectedModelId && m.provider === selectedProvider);
+      
+      // If not, clear the model selection
+      if (!currentModelMatchesProvider) {
+        setSelectedModelId(null);
+      }
+    }
+  }, [selectedProvider, selectedModelId]);
 
   const handleSave = async () => {
     if (!selectedOrganization) return;
     setIsSaving(true);
 
     const payload: UpdateAiSettingsPayload = {
+      provider: selectedProvider,
       selectedModelId: selectedModelId,
     };
 
-    const modelDetails = selectedModelId ? allModels.find(m => m.id === selectedModelId) : null;
-
-    if (modelDetails) {
+    // Handle API key changes based on provider
+    if (selectedProvider) {
       let currentInput = '';
       let apiKeyCurrentlySet = false;
       let apiKeyPayloadKey: keyof UpdateAiSettingsPayload | null = null;
 
-      switch (modelDetails.provider) {
+      switch (selectedProvider) {
         case 'openai':
           currentInput = openaiApiKeyInput;
           apiKeyCurrentlySet = !!fetchedSettings?.isOpenAiKeySet;
···
       const fetchResponse = await fetch(`/api/organizations/${selectedOrganization.id}/ai-settings`);
       const data: FetchedAiSettings = await fetchResponse.json();
       setFetchedSettings(data);
+      setSelectedProvider(data.provider);
       setSelectedModelId(data.selectedModelId);
       setOpenaiApiKeyInput(''); 
       setGoogleApiKeyInput('');
···
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-6">
+              {/* Provider Selection */}
               <div className="space-y-2">
-                <Label htmlFor="ai-model-select">AI Model</Label>
+                <Label htmlFor="provider-select">AI Provider</Label>
                 <Select
-                  value={selectedModelId === null ? '__none__' : selectedModelId}
+                  value={selectedProvider || ''}
                   onValueChange={(value) => {
-                    const newModelId = value === '__none__' ? null : value;
-                    setSelectedModelId(newModelId);
-                    setOpenaiApiKeyInput('');
-                    setGoogleApiKeyInput('');
-                    setAnthropicApiKeyInput('');
+                    if (value === '') {
+                      setSelectedProvider(null);
+                    } else {
+                      setSelectedProvider(value as AIProvider);
+                    }
                   }}
                 >
-                  <SelectTrigger id="ai-model-select">
-                    <SelectValue placeholder="Select a model (or None)" />
+                  <SelectTrigger id="provider-select">
+                    <SelectValue placeholder="Select an AI provider" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="__none__">None (Disable AI Categorization)</SelectItem>
-                    {allModels.map(model => (
-                      <SelectItem key={model.id} value={model.id}>
-                        {model.providerName}: {model.name}
-                      </SelectItem>
-                    ))}
+                    <SelectItem value="">None (Disable AI Categorization)</SelectItem>
+                    <SelectItem value="openai">OpenAI</SelectItem>
+                    <SelectItem value="google">Google (Gemini)</SelectItem>
+                    <SelectItem value="anthropic">Anthropic (Claude)</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
+              
+              {/* Model Selection - only shown when provider is selected */}
+              {selectedProvider && (
+                <div className="space-y-2">
+                  <Label htmlFor="model-select">AI Model</Label>
+                  <Select
+                    value={selectedModelId || ''} 
+                    onValueChange={(value) => setSelectedModelId(value || null)}
+                  >
+                    <SelectTrigger id="model-select">
+                      <SelectValue placeholder={`Select ${selectedProvider} model`} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableModels.map(model => (
+                        <SelectItem key={model.id} value={model.id}>
+                          {model.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
 
-              {currentSelectedModelDetails && (
+              {/* API key input - show based on selected provider */}
+              {selectedProvider === 'openai' && (
                 <div className="space-y-2">
-                  <Label htmlFor={`api-key-${currentSelectedModelDetails.provider}`}>
-                    {currentSelectedModelDetails.providerName} API Key
+                  <Label htmlFor="openai-key">
+                    OpenAI API Key
+                    {fetchedSettings?.isOpenAiKeySet && <span className="ml-2 text-xs text-muted-foreground">(Already set)</span>}
                   </Label>
                   <Input
-                    id={`api-key-${currentSelectedModelDetails.provider}`}
+                    id="openai-key"
                     type="password"
-                    value={getApiKeyInputProps(currentSelectedModelDetails.provider).value}
-                    onChange={getApiKeyInputProps(currentSelectedModelDetails.provider).onChange}
-                    placeholder={getApiKeyInputProps(currentSelectedModelDetails.provider).placeholder}
+                    placeholder={getApiKeyInputProps('openai').placeholder}
+                    value={openaiApiKeyInput}
+                    onChange={getApiKeyInputProps('openai').onChange}
                   />
-                  {getApiKeyInputProps(currentSelectedModelDetails.provider).isSet && 
-                   !getApiKeyInputProps(currentSelectedModelDetails.provider).value && (
-                    <p className="text-xs text-muted-foreground">
-                      An API key is currently set for {currentSelectedModelDetails.providerName}.
-                      To update it, enter the new key. 
-                      To clear this key, leave this field blank and click "Save AI Settings".
-                    </p>
-                  )}
-                   {!getApiKeyInputProps(currentSelectedModelDetails.provider).isSet && 
-                    currentSelectedModelDetails.provider && ( // Ensure provider exists to show specific message
-                     <p className="text-xs text-muted-foreground">
-                      Enter your {currentSelectedModelDetails.providerName} API key.
-                    </p>
-                   )
-                   }
+                  <p className="text-xs text-muted-foreground">Get your API key from <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer" className="underline">OpenAI dashboard</a>.</p>
                 </div>
               )}
-              
-              {selectedModelId && !currentSelectedModelDetails && (
-                <p className="text-destructive text-xs">Error: Selected model details not found. Please re-select.</p>
+
+              {selectedProvider === 'google' && (
+                <div className="space-y-2">
+                  <Label htmlFor="google-key">
+                    Google AI API Key
+                    {fetchedSettings?.isGoogleKeySet && <span className="ml-2 text-xs text-muted-foreground">(Already set)</span>}
+                  </Label>
+                  <Input
+                    id="google-key"
+                    type="password"
+                    placeholder={getApiKeyInputProps('google').placeholder}
+                    value={googleApiKeyInput}
+                    onChange={getApiKeyInputProps('google').onChange}
+                  />
+                  <p className="text-xs text-muted-foreground">Get your API key from <a href="https://ai.google.dev/" target="_blank" rel="noopener noreferrer" className="underline">Google AI Studio</a>.</p>
+                </div>
               )}
 
+              {selectedProvider === 'anthropic' && (
+                <div className="space-y-2">
+                  <Label htmlFor="anthropic-key">
+                    Anthropic API Key
+                    {fetchedSettings?.isAnthropicKeySet && <span className="ml-2 text-xs text-muted-foreground">(Already set)</span>}
+                  </Label>
+                  <Input
+                    id="anthropic-key"
+                    type="password"
+                    placeholder={getApiKeyInputProps('anthropic').placeholder}
+                    value={anthropicApiKeyInput}
+                    onChange={getApiKeyInputProps('anthropic').onChange}
+                  />
+                  <p className="text-xs text-muted-foreground">Get your API key from <a href="https://console.anthropic.com/" target="_blank" rel="noopener noreferrer" className="underline">Anthropic Console</a>.</p>
+                </div>
+              )}
             </CardContent>
             <CardFooter>
-              <Button onClick={handleSave} disabled={isSaving || isLoadingSettings || !selectedOrganization}>
+              <Button onClick={handleSave} disabled={isSaving}>
                 {isSaving ? 'Saving...' : 'Save AI Settings'}
               </Button>
             </CardFooter>

components/ui/prcat-logo.tsx

···
   return (
     <div className={cn("inline-flex flex-row items-center", className)}>
       <div className="flex flex-row items-center">
-        <span className={cn("inline-block", fontSize, dark ? "text-white" : "text-foreground")}>pr</span>
+        <span className={cn("inline-block font-bold", fontSize, dark ? "text-white" : "text-foreground")}>PR</span>
         <svg 
           xmlns="http://www.w3.org/2000/svg" 
           fill="none" 
···
             clipRule="evenodd"
           />
         </svg>
-        <span className={cn("inline-block", fontSize, dark ? "text-white" : "text-foreground")}>cat</span>
+        <span className={cn("inline-block font-bold", fontSize, dark ? "text-white" : "text-foreground")}>Cat</span>
       </div>
     </div>
   );

components/ui/setup-status-alert.tsx

···
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { useRouter } from 'next/navigation';
+import { PrcatLogo } from '@/components/ui/prcat-logo';
 
 interface SetupStatusAlertProps {
   className?: string;
···
       <AlertCircle className="h-4 w-4" />
       <AlertTitle>Setup Incomplete</AlertTitle>
       <AlertDescription className="flex justify-between items-center">
-        <span>Your Pandora setup is incomplete. Complete the setup to enable PR categorization.</span>
+        <div className="flex items-center">
+          <span>Your </span>
+          <PrcatLogo className="mx-1" iconSize="h-3 w-3" fontSize="text-sm" />
+          <span> setup is incomplete. Complete the setup to enable PR categorization.</span>
+        </div>
         <Button 
           size="sm" 
           onClick={() => router.push('/onboarding')}

lib/repositories/settings-repository.ts

···
 import { query, execute } from '@/lib/db';
 import { Setting } from '@/lib/types';
 
-// Old keys (will be replaced or unused for AI settings)
-// const AI_PROVIDER_KEY = 'ai_provider';
-// const AI_MODEL_ID_KEY = 'ai_model_id';
-
-// New keys for AI settings
+// Keys for AI settings
+const AI_PROVIDER_KEY = 'ai_provider';
 const AI_SELECTED_MODEL_ID_KEY = 'ai_selected_model_id';
 const AI_OPENAI_API_KEY_KEY = 'ai_openai_api_key';
-const AI_GOOGLE_API_KEY_KEY = 'ai_google_api_key'; // Or GEMINI_API_KEY if that naming is preferred
+const AI_GOOGLE_API_KEY_KEY = 'ai_google_api_key';
 const AI_ANTHROPIC_API_KEY_KEY = 'ai_anthropic_api_key';
 
+// Valid AI provider values
+export type AIProvider = 'openai' | 'google' | 'anthropic' | null;
+
 // Interface for data returned to the client (keys are not sent)
-export interface AiSettings { // Renamed from GetAiSettingsResponse for brevity in frontend
+export interface AiSettings {
+  provider: AIProvider;
   selectedModelId: string | null;
   isOpenAiKeySet: boolean;
   isGoogleKeySet: boolean;
···
 
 // Interface for payload when updating settings (actual keys are sent)
 export interface UpdateAiSettingsPayload {
-  selectedModelId?: string | null;    // To change the model or disable AI (null)
-  openaiApiKey?: string | null;    // To set or clear/remove a key. Null to clear.
+  provider?: AIProvider;
+  selectedModelId?: string | null;
+  openaiApiKey?: string | null;
   googleApiKey?: string | null;
   anthropicApiKey?: string | null;
 }
···
 }
 
 export async function getOrganizationAiSettings(organizationId: number): Promise<AiSettings> {
+  const provider = await getOrganizationSetting(organizationId, AI_PROVIDER_KEY) as AIProvider;
   const selectedModelId = await getOrganizationSetting(organizationId, AI_SELECTED_MODEL_ID_KEY);
   const openAiKey = await getOrganizationSetting(organizationId, AI_OPENAI_API_KEY_KEY);
   const googleKey = await getOrganizationSetting(organizationId, AI_GOOGLE_API_KEY_KEY);
   const anthropicKey = await getOrganizationSetting(organizationId, AI_ANTHROPIC_API_KEY_KEY);
 
   return {
+    provider: provider || null,
     selectedModelId,
-    isOpenAiKeySet: !!openAiKey, // True if key exists and is not empty string (could refine if empty string is valid)
+    isOpenAiKeySet: !!openAiKey,
     isGoogleKeySet: !!googleKey,
     isAnthropicKeySet: !!anthropicKey,
   };
···
   organizationId: number, 
   payload: UpdateAiSettingsPayload
 ): Promise<void> {
+  if (payload.provider !== undefined) {
+    await updateOrganizationSetting(organizationId, AI_PROVIDER_KEY, payload.provider);
+  }
   if (payload.selectedModelId !== undefined) {
     await updateOrganizationSetting(organizationId, AI_SELECTED_MODEL_ID_KEY, payload.selectedModelId);
   }
···
   }
 }
 
-// New function to get a specific API key for an organization and provider
-export async function getOrganizationApiKey(organizationId: number, provider: 'openai' | 'google' | 'anthropic'): Promise<string | null> {
+// Get a specific API key for an organization and provider
+export async function getOrganizationApiKey(organizationId: number, provider: AIProvider): Promise<string | null> {
+  if (!provider) return null;
+  
   let apiKeyDBKey = '';
   switch (provider) {
     case 'openai':
···
       apiKeyDBKey = AI_ANTHROPIC_API_KEY_KEY;
       break;
     default:
-      // Should not happen with TypeScript, but good for safety
       console.error(`Invalid provider specified for getOrganizationApiKey: ${provider}`);
       return null;
   }

package.json

···
 {
-  "name": "pandora",
+  "name": "prcat",
   "version": "0.1.0",
   "private": true,
   "scripts": {