feat: Add Roo Code Cloud provider support

- Add Roo Code Cloud as a new AI provider with authentication
- Implement OAuth flow with Clerk authentication service
- Add Grok Code Fast and Code Supernova models
- Fix deep link handling to prevent opening multiple app instances
- Focus main window after successful authentication
- Bump version to 0.23.0

Author: SFARPak

package.json

@@ -1,7 +1,7 @@
 {
   "name": "alifullstack",
   "productName": "AliFullStack",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Free, local, open-source AI app builder",
   "main": ".vite/build/main.js",
   "repository": {

src/components/settings/ApiKeyConfiguration.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/accordion";
 import { AzureConfiguration } from "./AzureConfiguration";
 import { VertexConfiguration } from "./VertexConfiguration";
+import { RooCodeConfiguration } from "./RooCodeConfiguration";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { UserSettings } from "@/lib/schemas";
@@ -57,6 +58,11 @@ export function ApiKeyConfiguration({
     return <VertexConfiguration />;
   }
 
+  // Special handling for Roo Code Cloud which uses OAuth authentication
+  if (provider === "roo") {
+    return <RooCodeConfiguration />;
+  }
+
   const envApiKey = envVarName ? envVars[envVarName] : undefined;
   const userApiKey = settings?.providerSettings?.[provider]?.apiKey?.value;
 

src/components/settings/RooCodeConfiguration.tsx

@@ -1,190 +1,87 @@
 import { useState, useEffect } from "react";
-import { LogIn, LogOut, User, AlertCircle } from "lucide-react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { CheckCircle, LogIn } from "lucide-react";
 import { IpcClient } from "@/ipc/ipc_client";
-import { showError } from "@/lib/toast";
-import { useDeepLink } from "@/hooks/useDeepLink";
 
-interface RooCodeConfigurationProps {
-  provider: string;
-}
-
-interface AuthState {
-  isAuthenticated: boolean;
-  userInfo?: {
-    name?: string;
-    email?: string;
-    picture?: string;
-  };
-}
-
-export function RooCodeConfiguration({ provider }: RooCodeConfigurationProps) {
-  const [authState, setAuthState] = useState<AuthState>({ isAuthenticated: false });
+export function RooCodeConfiguration() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [isInitializing, setIsInitializing] = useState(true);
 
   // Check authentication status on component mount
   useEffect(() => {
-    // Small delay to ensure IPC client is initialized
-    const timer = setTimeout(() => {
-      checkAuthStatus();
-    }, 100);
-    return () => clearTimeout(timer);
+    checkAuthStatus();
   }, []);
 
-  // Listen for authentication callback
-  useDeepLink("roocode-auth-callback", async (data: { code: string; state: string }) => {
-    try {
-      if (!(window as any).electron || !(window as any).electron.ipcRenderer) {
-        console.error("IPC renderer not available for auth callback");
-        return;
-      }
-
-      const ipcClient = IpcClient.getInstance();
-      await ipcClient.roocodeAuthCallback(data.code, data.state);
-      await checkAuthStatus(); // Refresh auth status
-    } catch (error) {
-      console.error("Failed to handle Roo Code auth callback:", error);
-      showError("Failed to complete Roo Code authentication");
-    }
-  });
-
   const checkAuthStatus = async () => {
-    try {
-      setIsInitializing(true);
-      // Check if IPC client is available
-      if (!(window as any).electron || !(window as any).electron.ipcRenderer) {
-        console.warn("IPC renderer not available yet, retrying...");
-        setTimeout(() => checkAuthStatus(), 500);
-        return;
-      }
-
-      const ipcClient = IpcClient.getInstance();
-      const status = await ipcClient.roocodeAuthStatus();
-      setAuthState(status);
-    } catch (error) {
-      console.error("Failed to check Roo Code auth status:", error);
-      setAuthState({ isAuthenticated: false });
-    } finally {
-      setIsInitializing(false);
-    }
-  };
-
-  const handleLogin = async () => {
     try {
       setIsLoading(true);
-      if (!(window as any).electron || !(window as any).electron.ipcRenderer) {
-        showError("IPC renderer not available. Please refresh the page.");
-        return;
-      }
-
       const ipcClient = IpcClient.getInstance();
-      await ipcClient.roocodeLogin();
-      // The login process will open a browser window and handle the callback
+      const authStatus = await ipcClient.roocodeAuthStatus();
+      setIsAuthenticated(authStatus?.isAuthenticated || false);
     } catch (error) {
-      console.error("Failed to initiate Roo Code login:", error);
-      showError("Failed to initiate Roo Code authentication");
+      console.error("Failed to check Roo Code authentication status:", error);
+      setIsAuthenticated(false);
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleLogout = async () => {
+  const handleSignIn = async () => {
     try {
       setIsLoading(true);
-      if (!(window as any).electron || !(window as any).electron.ipcRenderer) {
-        showError("IPC renderer not available. Please refresh the page.");
-        return;
-      }
-
       const ipcClient = IpcClient.getInstance();
-      await ipcClient.roocodeLogout();
-      await checkAuthStatus(); // Refresh auth status
+      // This will trigger the OAuth flow
+      await ipcClient.roocodeLogin();
+      // After sign in, check status again
+      setTimeout(checkAuthStatus, 1000);
     } catch (error) {
-      console.error("Failed to logout from Roo Code:", error);
-      showError("Failed to logout from Roo Code");
+      console.error("Failed to initiate Roo Code sign in:", error);
     } finally {
       setIsLoading(false);
     }
   };
 
-  if (isInitializing) {
+  if (isAuthenticated) {
     return (
-      <div className="space-y-4">
-        <div className="border rounded-lg px-4 py-4 bg-(--background-lightest)">
-          <div className="flex items-center justify-center">
-            <div className="text-sm text-muted-foreground">Checking authentication status...</div>
-          </div>
-        </div>
-      </div>
+      <Alert variant="default" className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950">
+        <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
+        <AlertTitle className="text-green-800 dark:text-green-200">
+          Connected to Roo Code Cloud
+        </AlertTitle>
+        <AlertDescription className="text-green-700 dark:text-green-300">
+          You are successfully authenticated with Roo Code Cloud. You can now use Roo Code Cloud models.
+        </AlertDescription>
+      </Alert>
     );
   }
 
   return (
     <div className="space-y-4">
-      <div className="border rounded-lg px-4 py-4 bg-(--background-lightest)">
-        <h3 className="text-lg font-medium mb-4">Roo Code Cloud Authentication</h3>
-
-        {authState.isAuthenticated ? (
-          <div className="space-y-4">
-            <Alert>
-              <User className="h-4 w-4" />
-              <AlertTitle className="flex items-center justify-between">
-                <span>Authenticated</span>
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  onClick={handleLogout}
-                  disabled={isLoading}
-                  className="flex items-center gap-1 h-7 px-2"
-                >
-                  <LogOut className="h-4 w-4" />
-                  {isLoading ? "Logging out..." : "Logout"}
-                </Button>
-              </AlertTitle>
-              <AlertDescription>
-                <div className="space-y-2">
-                  {authState.userInfo?.name && (
-                    <p><strong>Name:</strong> {authState.userInfo.name}</p>
-                  )}
-                  {authState.userInfo?.email && (
-                    <p><strong>Email:</strong> {authState.userInfo.email}</p>
-                  )}
-                  <p className="text-xs text-green-600 dark:text-green-400 mt-2">
-                    You are successfully authenticated with Roo Code Cloud.
-                  </p>
-                </div>
-              </AlertDescription>
-            </Alert>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>Not Authenticated</AlertTitle>
-              <AlertDescription>
-                You need to authenticate with Roo Code Cloud to use Roo Code models.
-                Click the button below to open your browser and sign in.
-              </AlertDescription>
-            </Alert>
-
-            <Button
-              onClick={handleLogin}
-              disabled={isLoading}
-              className="flex items-center gap-2"
-            >
-              <LogIn className="h-4 w-4" />
-              {isLoading ? "Opening browser..." : "Authenticate with Roo Code"}
-            </Button>
-
-            <p className="text-xs text-muted-foreground">
-              This will open your default browser to authenticate with Roo Code Cloud.
-              After authentication, you'll be redirected back to AliFullStack.
-            </p>
-          </div>
-        )}
+      <Alert variant="default">
+        <LogIn className="h-4 w-4" />
+        <AlertTitle>Roo Code Cloud Authentication Required</AlertTitle>
+        <AlertDescription>
+          To use Roo Code Cloud models, you need to authenticate with Roo Code Cloud.
+          This provides access to premium AI models with enhanced capabilities.
+        </AlertDescription>
+      </Alert>
+
+      <div className="flex justify-center">
+        <Button
+          onClick={handleSignIn}
+          disabled={isLoading}
+          className="flex items-center gap-2"
+        >
+          <LogIn className="h-4 w-4" />
+          {isLoading ? "Connecting..." : "Connect to Roo Code Cloud"}
+        </Button>
       </div>
+
+      <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+        Authentication is secure and only grants access to AI model services.
+        Your data remains private and is not shared.
+      </p>
     </div>
   );
 }

src/ipc/handlers/roocode_auth_handlers.ts

@@ -168,23 +168,7 @@ async function handleRooCodeLogin(): Promise<void> {
 
     logger.info(`Attempting to open authentication URL: ${authUrl}`);
 
-    // For development/demo purposes, we'll simulate successful authentication
-    // In production, this would open the browser for real authentication
-    if (process.env.NODE_ENV === 'development') {
-      logger.info("Development mode: Simulating successful authentication");
-      // Simulate authentication callback after a short delay
-      setTimeout(() => {
-        const mockCode = 'dev-auth-code-' + Date.now();
-        const mockState = state;
-        // Trigger the callback as if the user completed authentication
-        handleRooCodeCallback(mockCode, mockState).catch(err => {
-          logger.error("Mock authentication callback failed:", err);
-        });
-      }, 2000);
-      return;
-    }
-
-    // Open browser for authentication
+    // Open browser for authentication (always use real authentication, not mock)
     try {
       await shell.openExternal(authUrl);
       logger.info("Opened Roo Code authentication URL in browser");
@@ -198,7 +182,7 @@ async function handleRooCodeLogin(): Promise<void> {
   }
 }
 
-async function handleRooCodeCallback(code: string, state: string): Promise<void> {
+export async function handleRooCodeAuthCallback(code: string, state: string): Promise<void> {
   try {
     // Verify state parameter
     const authData = loadAuthData();
@@ -209,17 +193,7 @@ async function handleRooCodeCallback(code: string, state: string): Promise<void>
     }
 
     // Exchange code for credentials
-    // For development mode with mock codes, create mock credentials
-    let credentials: AuthCredentials;
-    if (code.startsWith('dev-auth-code-')) {
-      logger.info("Using mock credentials for development");
-      credentials = {
-        clientToken: 'mock-client-token-' + Date.now(),
-        sessionId: 'mock-session-id-' + Date.now(),
-      };
-    } else {
-      credentials = await clerkSignIn(code);
-    }
+    credentials = await clerkSignIn(code);
 
     // Save credentials
     saveAuthData({ credentials });
@@ -282,34 +256,18 @@ async function handleRooCodeAuthStatus(): Promise<AuthState> {
     }
 
     // Try to get a fresh session token to verify authentication
-    // For mock credentials, skip the API calls
     let userInfo: any;
-    if (credentials.clientToken.startsWith('mock-client-token-')) {
-      logger.info("Using mock user info for development");
-      userInfo = {
-        id: 'dev-user-id',
-        first_name: 'Dev',
-        last_name: 'User',
-        email_addresses: [{
-          id: 'primary-email-id',
-          email_address: '[email protected]'
-        }],
-        primary_email_address_id: 'primary-email-id',
-        image_url: 'https://via.placeholder.com/150'
-      };
-    } else {
-      try {
-        await clerkCreateSessionToken(credentials); // Verify credentials are still valid
-        userInfo = await clerkGetUserInfo(credentials);
-      } catch (error) {
-        logger.warn("Failed to refresh session token, treating as unauthenticated:", error);
-        // Clear invalid credentials
-        const filePath = getAuthStoragePath();
-        if (fs.existsSync(filePath)) {
-          fs.unlinkSync(filePath);
-        }
-        return { isAuthenticated: false };
+    try {
+      await clerkCreateSessionToken(credentials); // Verify credentials are still valid
+      userInfo = await clerkGetUserInfo(credentials);
+    } catch (error) {
+      logger.warn("Failed to refresh session token, treating as unauthenticated:", error);
+      // Clear invalid credentials
+      const filePath = getAuthStoragePath();
+      if (fs.existsSync(filePath)) {
+        fs.unlinkSync(filePath);
       }
+      return { isAuthenticated: false };
     }
 
     const authState: AuthState = {
@@ -346,6 +304,6 @@ export function registerRooCodeAuthHandlers(): void {
 
   // Handle deep link callback for authentication
   ipcMain.handle("roocode:auth-callback", async (_, code: string, state: string) => {
-    await handleRooCodeCallback(code, state);
+    await handleRooCodeAuthCallback(code, state);
   });
 }

src/ipc/ipc_host.ts

@@ -32,6 +32,7 @@ import { registerPortalHandlers } from "./handlers/portal_handlers";
 import { registerPromptHandlers } from "./handlers/prompt_handlers";
 import { registerHelpBotHandlers } from "./handlers/help_bot_handlers";
 import { registerTerminalHandlers, addTerminalOutput } from "./handlers/terminal_handlers";
+import { registerRooCodeAuthHandlers } from "./handlers/roocode_auth_handlers";
 import { AppOutput } from "./ipc_types";
 
 export function registerIpcHandlers() {
@@ -69,4 +70,5 @@ export function registerIpcHandlers() {
   registerPromptHandlers();
   registerHelpBotHandlers();
   registerTerminalHandlers();
+  registerRooCodeAuthHandlers();
 }