fix: improve error handling and user feedback in authentication and chat components

- Added error logging in LoginForm for OAuth result handling.
- Introduced auto-focus functionality for the textarea in ChatForm based on flow status.
- Enhanced ChatMessages to conditionally display a message when no active tasks are present.
- Updated OAuthResult to provide user feedback during authentication process with status messages and improved window handling.

Author: asdek

.vscode/launch.json

@@ -100,7 +100,7 @@
                 "DATABASE_URL": "postgres://postgres:postgres@localhost:5432/pentagidb?sslmode=disable",
             },
             "args": [
-                "-cmd", "reindex",
+                "info", "-verbose",
             ],
             "cwd": "${workspaceFolder}",
             "output": "${workspaceFolder}/build/__debug_bin_etester",

frontend/src/features/authentication/LoginForm.tsx

@@ -162,6 +162,7 @@ const LoginForm = ({ providers, returnUrl = '/chat/new' }: LoginFormProps) => {
                         }
                     } catch {
                         // In case of error, fall through to common handling below
+                        console.error('error during OAuth result handling:', error);
                     }
                 }
 

frontend/src/features/chat/ChatForm.tsx

@@ -22,6 +22,7 @@ interface ChatFormProps {
 
 const ChatForm = ({ selectedFlowId, flowStatus, onSubmit }: ChatFormProps) => {
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const textareaId = 'chat-textarea';
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -44,6 +45,10 @@ const ChatForm = ({ selectedFlowId, flowStatus, onSubmit }: ChatFormProps) => {
             return 'What would you like me to help you with?';
         }
 
+        if (flowStatus === StatusType.Waiting) {
+            return 'Continue the conversation...';
+        }
+
         if (flowStatus === StatusType.Finished) {
             return 'The flow is finished';
         }
@@ -86,6 +91,20 @@ const ChatForm = ({ selectedFlowId, flowStatus, onSubmit }: ChatFormProps) => {
         isSubmitting ||
         (selectedFlowId !== 'new' && (!flowStatus || ![StatusType.Waiting].includes(flowStatus)));
 
+    // Auto-focus on textarea when needed
+    useEffect(() => {
+        if (
+            !isDisabled &&
+            (selectedFlowId === 'new' || flowStatus === StatusType.Waiting)
+        ) {
+            const textarea = document.querySelector(`#${textareaId}`) as HTMLTextAreaElement;
+            if (textarea) {
+                const timeoutId = setTimeout(() => textarea.focus(), 0);
+                return () => clearTimeout(timeoutId);
+            }
+        }
+    }, [selectedFlowId, flowStatus, isDisabled]);
+
     return (
         <Form {...form}>
             <form
@@ -99,6 +118,7 @@ const ChatForm = ({ selectedFlowId, flowStatus, onSubmit }: ChatFormProps) => {
                         <FormControl>
                             <Textarea
                                 {...field}
+                                id={textareaId}
                                 placeholder={getPlaceholderText()}
                                 disabled={isDisabled}
                                 onKeyDown={handleKeyDown}

frontend/src/features/chat/ChatMessages.tsx

@@ -13,6 +13,7 @@ import { cn } from '@/lib/utils';
 import ChatMessage from './ChatMessage';
 
 interface ChatMessagesProps {
+    selectedFlowId: string | null;
     logs?: MessageLogFragmentFragment[];
     className?: string;
 }
@@ -21,7 +22,7 @@ const searchFormSchema = z.object({
     search: z.string(),
 });
 
-const ChatMessages = ({ logs, className }: ChatMessagesProps) => {
+const ChatMessages = ({ selectedFlowId, logs, className }: ChatMessagesProps) => {
     const messagesEndRef = useRef<HTMLDivElement>(null);
 
     // Memoize the scroll function to avoid recreating it on every render
@@ -64,7 +65,7 @@ const ChatMessages = ({ logs, className }: ChatMessagesProps) => {
     }, [filteredLogs.length, scrollMessages]);
 
     return (
-        <div className={cn('flex flex-col', className)}>
+        <div className={cn('flex h-full flex-col', className)}>
             <div className="sticky top-0 z-10 bg-background py-4">
                 <Form {...form}>
                     <FormField
@@ -97,15 +98,25 @@ const ChatMessages = ({ logs, className }: ChatMessagesProps) => {
                     />
                 </Form>
             </div>
-            <div className="space-y-4 pb-4">
-                {filteredLogs.map((log) => (
-                    <ChatMessage
-                        key={log.id}
-                        log={log}
-                    />
-                ))}
-                <div ref={messagesEndRef} />
-            </div>
+
+            {filteredLogs.length > 0 || selectedFlowId !== 'new' ? (
+                <div className="flex-1 space-y-4 overflow-y-auto pb-4">
+                    {filteredLogs.map((log) => (
+                        <ChatMessage
+                            key={log.id}
+                            log={log}
+                        />
+                    ))}
+                    <div ref={messagesEndRef} />
+                </div>
+            ) : (
+                <div className="flex flex-1 items-center justify-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                        <p>No Active Tasks</p>
+                        <p className="text-xs">Starting a new task may take some time as the PentAGI agent downloads the required Docker image</p>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };

frontend/src/pages/Chat.tsx

@@ -381,7 +381,10 @@ const Chat = () => {
                             >
                                 <Card className="flex h-[calc(100dvh-3rem)] flex-col rounded-none border-0">
                                     <CardContent className="flex-1 overflow-y-auto pb-0">
-                                        <ChatMessages logs={flowData?.messageLogs ?? []} />
+                                        <ChatMessages
+                                            selectedFlowId={selectedFlowId}
+                                            logs={flowData?.messageLogs ?? []}
+                                        />
                                     </CardContent>
                                     <CardFooter className="sticky bottom-0 border-t bg-background pt-4">
                                         <ChatForm

frontend/src/pages/OAuthResult.tsx

@@ -1,43 +1,111 @@
-import { useEffect } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import Logo from '@/components/icons/Logo';
 import ThemeProvider from '@/providers/ThemeProvider';
 
 const OAuthResult = () => {
+    const [statusMessage, setStatusMessage] = useState('Authentication in progress...');
+    const messageRef = useRef(statusMessage);
+    const prevMessageRef = useRef(statusMessage);
+
+    // Success delay is short, error delay is longer to allow reading
+    const successDelay = 2000;
+    const errorDelay = 5000;
+
+    // Synchronize state with ref without problematic dependencies
+    useLayoutEffect(() => {
+        if (prevMessageRef.current !== messageRef.current) {
+            setStatusMessage(messageRef.current);
+            prevMessageRef.current = messageRef.current;
+        }
+    }, []);
+
     useEffect(() => {
         const params = new URLSearchParams(window.location.search);
         const status = params.get('status');
         const error = params.get('error');
 
-        if (window.opener) {
-            window.opener.postMessage(
-                {
-                    type: 'oauth-result',
-                    status,
-                    error,
-                },
-                window.location.origin,
-            );
-
-            const closeWindow = new Promise<void>((resolve) => {
-                const timer = setTimeout(() => {
+        // This is used to track all timeouts that need to be cleared on cleanup
+        let redirectTimer: NodeJS.Timeout | null = null;
+        let cleanupTimer: NodeJS.Timeout | null = null;
+        let closeTimer: NodeJS.Timeout | null = null;
+
+        const updateMessage = (message: string) => {
+            messageRef.current = message;
+        };
+
+        // Handle window close safely
+        const handleClose = (delay: number) => {
+            closeTimer = setTimeout(() => {
+                try {
                     if (window && !window.closed) {
                         window.close();
                     }
-                    resolve();
-                }, 10000);
+                } catch (e) {
+                    console.error('Delayed window close failed:', e);
+                }
+            }, delay);
+        };
+
+        // Handle redirection if needed
+        const handleRedirect = (url: string, delay: number) => {
+            redirectTimer = setTimeout(() => {
+                try {
+                    window.location.href = url;
+                } catch (e) {
+                    console.error('Redirection failed:', e);
+                }
+            }, delay);
+
+            // Ensure redirect timer gets cleaned up
+            cleanupTimer = setTimeout(() => {
+                if (redirectTimer) {
+                    clearTimeout(redirectTimer);
+                    redirectTimer = null;
+                }
+            }, delay + 100);
+        };
 
-                return () => clearTimeout(timer);
-            });
+        if (window.opener) {
+            try {
+                window.opener.postMessage(
+                    {
+                        type: 'oauth-result',
+                        status,
+                        error,
+                    },
+                    window.location.origin,
+                );
 
-            closeWindow.catch(() => window.close());
+                // Success handling
+                updateMessage('Authentication complete, closing window...');
+                handleClose(successDelay);
+            } catch (e) {
+                console.error('Failed to send message to opener:', e);
+                updateMessage('Error communicating with parent window. Closing in a few seconds...');
+                handleClose(errorDelay);
+            }
+        } else {
+            // If no opener, redirect to login
+            updateMessage('Authentication window opened directly. Redirecting to login page...');
+            handleRedirect('/login', errorDelay / 2);
+            handleClose(errorDelay);
         }
-    }, []);
+
+        // Cleanup function for useEffect
+        return () => {
+            // Explicitly clear all timeouts
+            if (redirectTimer) clearTimeout(redirectTimer);
+            if (cleanupTimer) clearTimeout(cleanupTimer);
+            if (closeTimer) clearTimeout(closeTimer);
+        };
+    }, [successDelay, errorDelay]);
 
     return (
         <ThemeProvider>
             <div className="flex h-screen w-full items-center justify-center bg-gradient-to-r from-slate-800 to-slate-950">
                 <Logo className="m-auto size-32 animate-logo-spin text-white delay-10000" />
+                <div className="fixed bottom-4 text-sm text-white">{statusMessage}</div>
             </div>
         </ThemeProvider>
     );