More enhancements and big fixes (#20)

- Improved markdown viewer
- Added web agent
- minor fixes

Author: tysonthomas9

config/gni/devtools_grd_files.gni

@@ -665,6 +665,7 @@ grd_files_bundled_sources = [
   "front_end/panels/ai_chat/evaluation/test-cases/research-agent-tests.js",
   "front_end/panels/ai_chat/evaluation/test-cases/schema-extractor-tests.js",
   "front_end/panels/ai_chat/evaluation/test-cases/streamlined-schema-extractor-tests.js",
+  "front_end/panels/ai_chat/evaluation/test-cases/web-task-agent-tests.js",
   "front_end/panels/ai_chat/evaluation/utils/ErrorHandlingUtils.js",
   "front_end/panels/ai_chat/evaluation/utils/EvaluationTypes.js",
   "front_end/panels/ai_chat/evaluation/utils/PromptTemplates.js",

front_end/panels/ai_chat/BUILD.gn

@@ -75,6 +75,7 @@ devtools_module("ai_chat") {
     "evaluation/test-cases/streamlined-schema-extractor-tests.ts",
     "evaluation/test-cases/research-agent-tests.ts",
     "evaluation/test-cases/action-agent-tests.ts",
+    "evaluation/test-cases/web-task-agent-tests.ts",
     "evaluation/runner/EvaluationRunner.ts",
     "evaluation/runner/VisionAgentEvaluationRunner.ts",
     "common/MarkdownViewerUtil.ts",
@@ -96,6 +97,7 @@ devtools_module("ai_chat") {
     "../../models/logs:bundle",
     "../../ui/components/helpers:bundle",
     "../../ui/components/markdown_view:bundle",
+    "../../ui/components/snackbars:bundle",
     "../../ui/components/text_editor:bundle",
     "../../ui/legacy:bundle",
     "../../ui/lit:bundle",
@@ -164,6 +166,7 @@ _ai_chat_sources = [
     "evaluation/test-cases/streamlined-schema-extractor-tests.ts",
     "evaluation/test-cases/research-agent-tests.ts",
     "evaluation/test-cases/action-agent-tests.ts",
+    "evaluation/test-cases/web-task-agent-tests.ts",
     "evaluation/runner/EvaluationRunner.ts",
     "evaluation/runner/VisionAgentEvaluationRunner.ts",
     "common/MarkdownViewerUtil.ts",

front_end/panels/ai_chat/LLM/GroqProvider.ts

@@ -427,4 +427,34 @@ export class GroqProvider extends LLMBaseProvider {
       };
     }
   }
+
+  /**
+   * Validate that required credentials are available for Groq
+   */
+  validateCredentials(): {isValid: boolean, message: string, missingItems?: string[]} {
+    const storageKeys = this.getCredentialStorageKeys();
+    const apiKey = localStorage.getItem(storageKeys.apiKey!);
+    
+    if (!apiKey) {
+      return {
+        isValid: false,
+        message: 'Groq API key is required. Please add your API key in Settings.',
+        missingItems: ['API Key']
+      };
+    }
+    
+    return {
+      isValid: true,
+      message: 'Groq credentials are configured correctly.'
+    };
+  }
+
+  /**
+   * Get the storage keys this provider uses for credentials
+   */
+  getCredentialStorageKeys(): {apiKey: string} {
+    return {
+      apiKey: 'ai_chat_groq_api_key'
+    };
+  }
 }

front_end/panels/ai_chat/LLM/LLMClient.ts

@@ -339,4 +339,43 @@ export class LLMClient {
     return provider.testConnection(modelName);
   }
 
+  /**
+   * Static method to validate credentials for a specific provider
+   */
+  static validateProviderCredentials(providerType: string): {isValid: boolean, message: string, missingItems?: string[]} {
+    try {
+      // Create temporary provider instance for validation (no API key needed for validation)
+      let provider;
+      
+      switch (providerType) {
+        case 'openai':
+          provider = new OpenAIProvider('');
+          break;
+        case 'litellm':
+          provider = new LiteLLMProvider('', '');
+          break;
+        case 'groq':
+          provider = new GroqProvider('');
+          break;
+        case 'openrouter':
+          provider = new OpenRouterProvider('');
+          break;
+        default:
+          return {
+            isValid: false,
+            message: `Unknown provider type: ${providerType}`,
+            missingItems: ['Valid provider selection']
+          };
+      }
+      
+      return provider.validateCredentials();
+    } catch (error) {
+      return {
+        isValid: false,
+        message: `Failed to validate ${providerType} credentials: ${error instanceof Error ? error.message : String(error)}`,
+        missingItems: ['Provider configuration']
+      };
+    }
+  }
+
 }

front_end/panels/ai_chat/LLM/LLMProvider.ts

@@ -44,6 +44,18 @@ export interface LLMProviderInterface {
    * Test connection to a specific model (optional)
    */
   testConnection?(modelId: string): Promise<{success: boolean, message: string}>;
+  
+  /**
+   * Validate that required credentials are available for this provider
+   * @returns Object with validation result and user-friendly message
+   */
+  validateCredentials(): {isValid: boolean, message: string, missingItems?: string[]};
+  
+  /**
+   * Get the storage keys this provider uses for credentials
+   * @returns Array of localStorage keys this provider needs
+   */
+  getCredentialStorageKeys(): {apiKey?: string, endpoint?: string, [key: string]: string | undefined};
 }
 
 /**
@@ -71,6 +83,10 @@ export abstract class LLMBaseProvider implements LLMProviderInterface {
 
   abstract parseResponse(response: LLMResponse): any;
 
+  abstract validateCredentials(): {isValid: boolean, message: string, missingItems?: string[]};
+  
+  abstract getCredentialStorageKeys(): {apiKey?: string, endpoint?: string, [key: string]: string | undefined};
+  
   /**
    * Helper method to handle provider-specific errors
    */

front_end/panels/ai_chat/LLM/LiteLLMProvider.ts

@@ -374,4 +374,45 @@ export class LiteLLMProvider extends LLMBaseProvider {
       };
     }
   }
+
+  /**
+   * Validate that required credentials are available for LiteLLM
+   */
+  validateCredentials(): {isValid: boolean, message: string, missingItems?: string[]} {
+    const storageKeys = this.getCredentialStorageKeys();
+    const endpoint = localStorage.getItem(storageKeys.endpoint!);
+    const apiKey = localStorage.getItem(storageKeys.apiKey!) || localStorage.getItem('ai_chat_api_key');
+    
+    const missingItems: string[] = [];
+    
+    if (!endpoint) {
+      missingItems.push('Endpoint URL');
+    }
+    
+    if (missingItems.length > 0) {
+      return {
+        isValid: false,
+        message: `LiteLLM configuration incomplete. Missing: ${missingItems.join(', ')}. Please configure in Settings.`,
+        missingItems
+      };
+    }
+    
+    // Note: API key is optional for LiteLLM
+    return {
+      isValid: true,
+      message: apiKey ? 
+        'LiteLLM credentials are configured correctly.' : 
+        'LiteLLM endpoint configured. API key is optional but may be required for some models.'
+    };
+  }
+
+  /**
+   * Get the storage keys this provider uses for credentials
+   */
+  getCredentialStorageKeys(): {apiKey: string, endpoint: string} {
+    return {
+      apiKey: 'ai_chat_litellm_api_key',
+      endpoint: 'ai_chat_litellm_endpoint'
+    };
+  }
 }

front_end/panels/ai_chat/LLM/OpenAIProvider.ts

@@ -468,4 +468,34 @@ export class OpenAIProvider extends LLMBaseProvider {
   parseResponse(response: LLMResponse): ReturnType<typeof LLMResponseParser.parseResponse> {
     return LLMResponseParser.parseResponse(response);
   }
+
+  /**
+   * Validate that required credentials are available for OpenAI
+   */
+  validateCredentials(): {isValid: boolean, message: string, missingItems?: string[]} {
+    const storageKeys = this.getCredentialStorageKeys();
+    const apiKey = localStorage.getItem(storageKeys.apiKey!);
+    
+    if (!apiKey) {
+      return {
+        isValid: false,
+        message: 'OpenAI API key is required. Please add your API key in Settings.',
+        missingItems: ['API Key']
+      };
+    }
+    
+    return {
+      isValid: true,
+      message: 'OpenAI credentials are configured correctly.'
+    };
+  }
+
+  /**
+   * Get the storage keys this provider uses for credentials
+   */
+  getCredentialStorageKeys(): {apiKey: string} {
+    return {
+      apiKey: 'ai_chat_api_key'
+    };
+  }
 }

front_end/panels/ai_chat/LLM/OpenRouterProvider.ts

@@ -480,4 +480,34 @@ export class OpenRouterProvider extends LLMBaseProvider {
       };
     }
   }
+
+  /**
+   * Validate that required credentials are available for OpenRouter
+   */
+  validateCredentials(): {isValid: boolean, message: string, missingItems?: string[]} {
+    const storageKeys = this.getCredentialStorageKeys();
+    const apiKey = localStorage.getItem(storageKeys.apiKey!);
+    
+    if (!apiKey) {
+      return {
+        isValid: false,
+        message: 'OpenRouter API key is required. Please add your API key in Settings.',
+        missingItems: ['API Key']
+      };
+    }
+    
+    return {
+      isValid: true,
+      message: 'OpenRouter credentials are configured correctly.'
+    };
+  }
+
+  /**
+   * Get the storage keys this provider uses for credentials
+   */
+  getCredentialStorageKeys(): {apiKey: string} {
+    return {
+      apiKey: 'ai_chat_openrouter_api_key'
+    };
+  }
 }