Fix #362: Surface OpenAI authentication errors as HTTP 401

archon-ui-main/src/components/mcp/ToolTestingPanel.tsx

@@ -3,6 +3,8 @@ import { X, Play, ChevronDown, TerminalSquare, Copy, Check, MinusCircle, Maximiz
 import { Client, Tool } from './MCPClients';
 import { Button } from '../ui/Button';
 import { mcpClientService } from '../../services/mcpClientService';
+import { ErrorAlert, useErrorHandler } from '../ui/ErrorAlert';
+import { parseKnowledgeBaseError, EnhancedError } from '../../services/knowledgeBaseErrorHandler';
 
 interface ToolTestingPanelProps {
   client: Client | null;
@@ -37,6 +39,7 @@ export const ToolTestingPanel = ({
   const [isResizing, setIsResizing] = useState(false);
   const [isMaximized, setIsMaximized] = useState(false);
   const [isExecuting, setIsExecuting] = useState(false);
+  const { error, setError, clearError } = useErrorHandler();
   const terminalRef = useRef<HTMLDivElement>(null);
   const resizeHandleRef = useRef<HTMLDivElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
@@ -92,6 +95,13 @@ export const ToolTestingPanel = ({
     };
   }, [isResizing]);
 
+  // Cleanup error state on component unmount
+  useEffect(() => {
+    return () => {
+      clearError(); // Clear any pending errors when component unmounts
+    };
+  }, [clearError]);
+
   // Handle tool selection
   const handleToolSelect = (tool: Tool) => {
     setSelectedTool(tool);
@@ -260,9 +270,23 @@ export const ToolTestingPanel = ({
 
     } catch (error: any) {
       console.error('MCP tool execution failed:', error);
+
+      // Parse error through enhanced error handler for better user experience
+      const enhancedError = parseKnowledgeBaseError(error);
+      setError(enhancedError);
+
       setTimeout(() => {
         addTypingLine(`> ERROR: Failed to execute tool on ${client.name}`, false, true);
         addTypingLine(`> ${error.message || 'Unknown error occurred'}`, false, true);
+
+        // Add special handling for OpenAI/RAG related errors
+        if (enhancedError.isOpenAIError && enhancedError.errorDetails) {
+          addTypingLine(`> Error Type: ${enhancedError.errorDetails.error_type}`, false, true);
+          if (enhancedError.errorDetails.tokens_used) {
+            addTypingLine(`> Tokens Used: ${enhancedError.errorDetails.tokens_used}`, false, true);
+          }
+        }
+
         addTypingLine('> Execution failed');
         setIsExecuting(false);
       }, 300);
@@ -286,6 +310,9 @@ export const ToolTestingPanel = ({
   const executeSelectedTool = () => {
     if (!selectedTool || !client || isExecuting) return;
 
+    // Clear any previous errors
+    clearError();
+
     // Validate required parameters
     const validationError = validateParameters();
     if (validationError) {
@@ -415,6 +442,9 @@ export const ToolTestingPanel = ({
 
         {/* Content */}
         <div className="px-6 py-4 h-[calc(100%-73px)] overflow-y-auto">
+          {/* Error Alert for OpenAI/RAG errors */}
+          <ErrorAlert error={error} onDismiss={clearError} />
+
           {client.tools.length === 0 ? (
             <div className="flex items-center justify-center h-full">
               <div className="text-center">

archon-ui-main/src/components/ui/Alert.tsx

@@ -0,0 +1,46 @@
+/**
+ * Basic Alert component for error display
+ * 
+ * Provides consistent styling for alerts throughout the application.
+ */
+
+import React from 'react';
+
+interface AlertProps {
+  children: React.ReactNode;
+  variant?: 'default' | 'destructive';
+  className?: string;
+}
+
+export const Alert: React.FC<AlertProps> = ({ 
+  children, 
+  variant = 'default', 
+  className = '' 
+}) => {
+  const baseClasses = 'p-4 border rounded-lg';
+  const variantClasses = variant === 'destructive' 
+    ? 'border-red-300 bg-red-50 text-red-800'
+    : 'border-blue-300 bg-blue-50 text-blue-800';
+
+  return (
+    <div className={`${baseClasses} ${variantClasses} ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+interface AlertDescriptionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const AlertDescription: React.FC<AlertDescriptionProps> = ({ 
+  children, 
+  className = '' 
+}) => {
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};

archon-ui-main/src/components/ui/ErrorAlert.tsx

@@ -0,0 +1,162 @@
+/**
+ * Enhanced error alert component for displaying OpenAI API errors
+ * 
+ * Provides specialized UI feedback for different error types including
+ * quota exhaustion, rate limiting, and API errors.
+ * 
+ * Related to GitHub issue #362 - improves user experience by showing
+ * clear, actionable error messages instead of generic failures.
+ */
+
+import React from 'react';
+import { Alert, AlertDescription } from './Alert';
+import { EnhancedError, getDisplayErrorMessage, getErrorSeverity, getErrorAction } from '../../services/knowledgeBaseErrorHandler';
+
+interface ErrorAlertProps {
+  error: EnhancedError | null;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+/**
+ * Validate error object structure and properties
+ */
+function isValidError(error: any): error is EnhancedError {
+  if (!error || typeof error !== 'object') return false;
+
+  // Check that it has basic Error properties
+  if (typeof error.message !== 'string') return false;
+
+  // If it claims to be an OpenAI error, validate the structure
+  if (error.isOpenAIError === true) {
+    if (!error.errorDetails || typeof error.errorDetails !== 'object') return false;
+
+    const { error_type, message, error: errorField } = error.errorDetails;
+    if (typeof error_type !== 'string' || typeof message !== 'string') return false;
+  }
+
+  // If statusCode is present, it should be a number
+  if (error.statusCode !== undefined && typeof error.statusCode !== 'number') return false;
+
+  return true;
+}
+
+export const ErrorAlert: React.FC<ErrorAlertProps> = ({ error, onDismiss, className = '' }) => {
+  if (!error) return null;
+
+  // Validate error object structure
+  if (!isValidError(error)) {
+    console.warn('Invalid error object passed to ErrorAlert:', error);
+    // Create a fallback error object
+    const fallbackError: EnhancedError = Object.assign(new Error('Invalid error object received'), {
+      errorDetails: {
+        error: 'validation_error',
+        message: 'An error occurred but the error details could not be parsed properly.',
+        error_type: 'api_error' as const
+      }
+    });
+    error = fallbackError;
+  }
+
+  const severity = getErrorSeverity(error);
+  const displayMessage = getDisplayErrorMessage(error);
+  const suggestedAction = getErrorAction(error);
+
+  // Determine alert styling based on severity
+  const alertVariant = severity === 'error' ? 'destructive' : 'default';
+
+  // Special styling for OpenAI errors
+  const isOpenAIError = error.isOpenAIError;
+
+  return (
+    <Alert variant={alertVariant} className={`mb-4 ${className}`}>
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          {/* Error icon based on type */}
+          <div className="flex items-center gap-2 mb-2">
+            {isOpenAIError ? (
+              <span className="text-lg">⚠️</span>
+            ) : (
+              <span className="text-lg">❌</span>
+            )}
+            <span className="font-semibold">
+              {isOpenAIError ? 'OpenAI API Error' : 'Error'}
+            </span>
+          </div>
+
+          {/* Main error message */}
+          <AlertDescription className="text-sm mb-2">
+            {displayMessage}
+          </AlertDescription>
+
+          {/* Suggested action for OpenAI errors */}
+          {suggestedAction && (
+            <div className="mt-2 p-2 bg-blue-50 border-l-4 border-blue-400 rounded-r">
+              <p className="text-sm font-medium text-blue-800">
+                💡 Suggested action:
+              </p>
+              <p className="text-sm text-blue-700 mt-1">
+                {suggestedAction}
+              </p>
+            </div>
+          )}
+
+          {/* Token usage info for quota errors */}
+          {error.errorDetails?.tokens_used && (
+            <div className="mt-2 text-xs text-gray-600">
+              Tokens used: {error.errorDetails.tokens_used.toLocaleString()}
+            </div>
+          )}
+        </div>
+
+        {/* Dismiss button */}
+        {onDismiss && (
+          <button
+            onClick={onDismiss}
+            className="ml-4 text-gray-400 hover:text-gray-600 focus:outline-none"
+            aria-label="Dismiss error"
+          >
+            <span className="text-lg">×</span>
+          </button>
+        )}
+      </div>
+    </Alert>
+  );
+};
+
+/**
+ * Hook for handling knowledge base operation errors
+ * 
+ * Usage example:
+ * ```tsx
+ * const { error, setError, clearError } = useErrorHandler();
+ * 
+ * const handleSearch = async () => {
+ *   try {
+ *     await knowledgeBaseService.searchKnowledgeBase(query);
+ *   } catch (err) {
+ *     setError(err as EnhancedError);
+ *   }
+ * };
+ * 
+ * return (
+ *   <>
+ *     <ErrorAlert error={error} onDismiss={clearError} />
+ *     <YourComponentContent />
+ *   </>
+ * );
+ * ```
+ */
+export function useErrorHandler() {
+  const [error, setError] = React.useState<EnhancedError | null>(null);
+
+  const clearError = React.useCallback(() => {
+    setError(null);
+  }, []);
+
+  return {
+    error,
+    setError,
+    clearError
+  };
+}

archon-ui-main/src/pages/KnowledgeBasePage.tsx

@@ -19,6 +19,7 @@ import { KnowledgeItemCard } from '../components/knowledge-base/KnowledgeItemCar
 import { GroupedKnowledgeItemCard } from '../components/knowledge-base/GroupedKnowledgeItemCard';
 import { KnowledgeGridSkeleton, KnowledgeTableSkeleton } from '../components/knowledge-base/KnowledgeItemSkeleton';
 import { GroupCreationModal } from '../components/knowledge-base/GroupCreationModal';
+import { parseKnowledgeBaseError, getDisplayErrorMessage, getErrorAction, EnhancedError } from '../services/knowledgeBaseErrorHandler';
 
 const extractDomain = (url: string): string => {
   try {
@@ -92,7 +93,11 @@ export const KnowledgeBasePage = () => {
       setTotalItems(response.total);
     } catch (error) {
       console.error('Failed to load knowledge items:', error);
-      showToast('Failed to load knowledge items', 'error');
+
+      // Parse the error using enhanced error handler
+      const enhancedError = parseKnowledgeBaseError(error);
+      const displayMessage = getDisplayErrorMessage(enhancedError);
+      showToast(displayMessage, 'error');
       setKnowledgeItems([]);
     } finally {
       setLoading(false);
@@ -498,7 +503,17 @@ export const KnowledgeBasePage = () => {
       }
     } catch (error) {
       console.error('Failed to refresh knowledge item:', error);
-      showToast('Failed to refresh knowledge item', 'error');
+
+      // Parse the error using enhanced error handler
+      const enhancedError = parseKnowledgeBaseError(error);
+      const displayMessage = getDisplayErrorMessage(enhancedError);
+      const suggestedAction = getErrorAction(enhancedError);
+
+      const fullMessage = suggestedAction 
+        ? `${displayMessage} ${suggestedAction}`
+        : displayMessage;
+
+      showToast(fullMessage, 'error');
     }
   };
 
@@ -737,7 +752,17 @@ export const KnowledgeBasePage = () => {
       }
     } catch (error) {
       console.error('Failed to retry:', error);
-      showToast(`Retry failed: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
+
+      // Parse the error using enhanced error handler
+      const enhancedError = parseKnowledgeBaseError(error);
+      const displayMessage = getDisplayErrorMessage(enhancedError);
+      const suggestedAction = getErrorAction(enhancedError);
+
+      const fullMessage = suggestedAction 
+        ? `Retry failed: ${displayMessage} ${suggestedAction}`
+        : `Retry failed: ${displayMessage}`;
+
+      showToast(fullMessage, 'error');
     }
   };
 
@@ -1384,7 +1409,18 @@ const AddKnowledgeModal = ({
       }
     } catch (error) {
       console.error('Failed to add knowledge:', error);
-      showToast('Failed to add knowledge source', 'error');
+
+      // Parse the error using the enhanced error handler
+      const enhancedError = parseKnowledgeBaseError(error);
+      const displayMessage = getDisplayErrorMessage(enhancedError);
+      const suggestedAction = getErrorAction(enhancedError);
+
+      // Show enhanced error message with action if available
+      const fullMessage = suggestedAction 
+        ? `${displayMessage} ${suggestedAction}`
+        : displayMessage;
+
+      showToast(fullMessage, 'error');
     } finally {
       setLoading(false);
     }