mindroot 8.6.0__py3-none-any.whl → 8.8.0__py3-none-any.whl

mindroot/coreplugins/admin/static/js/backup/agent-form.js

@@ -0,0 +1,1133 @@
+import { LitElement, html, css } from './lit-core.min.js';
+import { BaseEl } from './base.js';
+import './toggle-switch.js';
+import { unsafeHTML } from '../../../chat/static/js/lit-html/directives/unsafe-html.js';
+import './missing-commands.js';
+import {markdownRenderer} from './markdown-renderer.js';
+import showNotification from './notification.js';
+import './indexed-agents.js';
+
+class AgentForm extends BaseEl {
+  static properties = {
+    agent: { type: Object },
+    newAgent: { type: Boolean },
+    loading: { type: Boolean },
+    personas: { type: Array },
+    commands: { type: Object },
+    serviceModels: { type: Object },
+    missingCommands: { type: Object },
+    pendingPlugins: { type: Array },
+    showInstructionsEditor: { type: Boolean },
+    showTechnicalInstructionsEditor: { type: Boolean },
+    indexedAgentsVisible: { type: Boolean }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      margin-top: 20px;
+    }
+
+    .agent-form {
+      padding: 15px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.02);
+    }
+
+    .form-group {
+      margin-bottom: 15px;
+    }
+
+    .form-group label {
+      display: block;
+      margin-bottom: 5px;
+      color: #f0f0f0;
+    }
+
+    .required::after {
+      content: " *";
+      color: #e57373;
+    }
+
+    summary::before {
+      content: "\u25b6";
+      display: inline-block;
+      margin-right: 5px;
+      transition: transform 0.2s;
+    }
+
+    details[open] > summary::before { transform: rotate(90deg); }
+
+    details > * :not(summary) {
+      user-select: none;
+    }
+
+    .form-group-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 5px;
+    }
+
+    .form-group-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .markdown-preview {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      padding: 12px;
+      min-height: 100px;
+      color: #f0f0f0;
+      margin-bottom: 10px;
+      max-height: 400px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .markdown-preview ul {
+      padding-left: 20px;
+    }
+
+    .markdown-preview li {
+      margin-bottom: 5px;
+    }
+
+    .markdown-preview ul {
+      list-style-type: none;
+      padding-left: 0;
+    }
+    
+    .markdown-preview input[type="checkbox"] {
+      margin-right: 8px;
+    }
+
+    .markdown-preview h1, .markdown-preview h2, .markdown-preview h3, 
+    .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 {
+      background: transparent;
+      border: none;
+      padding: 0;
+      margin-top: 1em;
+      margin-bottom: 0.5em;
+      font-weight: bold;
+    }
+
+    /* Edit button for full-width display */
+    .edit-button {
+      background: transparent;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #f0f0f0;
+      border-radius: 4px;
+      padding: 4px 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      margin-bottom: 10px;
+    }
+
+    /* Icon button for header */
+    .icon-button {
+      background: transparent;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #f0f0f0;
+      border-radius: 4px;
+      padding: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+    }
+
+    .edit-button:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .icon-button:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    input[type="text"],
+    select,
+    textarea {
+      width: 100%;
+      padding: 8px 12px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      color: #f0f0f0;
+      font-size: 0.95rem;
+    }
+
+    textarea {
+      min-height: 60vh;
+      max-height: 60vh;
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+
+    textarea::-webkit-scrollbar {
+      width: 8px;  /* Medium-thin width */
+    }
+
+    textarea::-webkit-scrollbar-track {
+      background: #222;  /* Dark background */
+    }
+
+    textarea::-webkit-scrollbar-thumb {
+      background: #666;  /* Medium gray scrollbar handle */
+      border-radius: 4px;
+    }
+
+    textarea::-webkit-scrollbar-thumb:hover {
+      background: #999;  /* Lighter on hover */
+    }
+
+    textarea {
+      scrollbar-width: thin;
+      scrollbar-color: #666 #222;
+    }
+
+    input[type="text"]:focus,
+    select:focus,
+    textarea:focus {
+      outline: none;
+      border-color: rgba(255, 255, 255, 0.2);
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    .commands-section {
+      margin-top: 20px;
+    }
+
+    .commands-category {
+      margin-bottom: 20px;
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 8px;
+      padding: 15px;
+    }
+
+    .commands-category h4 {
+      margin-bottom: 15px;
+      color: #f0f0f0;
+      font-size: 1.1rem;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      padding-bottom: 8px;
+    }
+
+    .commands-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 12px;
+    }
+
+    .command-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .command-item:hover {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+
+    .command-info {
+      flex: 1;
+      margin-right: 12px;
+      position: relative;
+    }
+
+    .command-name {
+      color: #f0f0f0;
+      font-weight: 500;
+    }
+
+    .tooltip-text {
+      visibility: hidden;
+      position: absolute;
+      z-index: 1;
+      left: 0;
+      top: 100%;
+      margin-top: 10px;
+      width: 250px;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: #fff;
+      text-align: left;
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 0.9em;
+      line-height: 1.4;
+      white-space: normal;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    }
+
+    .command-info:hover .tooltip-text {
+      visibility: visible;
+    }
+
+    .btn {
+      padding: 8px 16px;
+      background: #2196F3;
+      border: none;
+      border-radius: 4px;
+      color: white;
+      cursor: pointer;
+      font-size: 0.95rem;
+      transition: all 0.2s;
+    }
+
+    .btn:hover {
+      background: #1976D2;
+    }
+
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.attachShadow({mode: 'open'});
+    this.personas = [];
+    this.commands = {};
+    this.showInstructionsEditor = false;
+    this.loading = false;
+    this.plugins = [];
+    this.providerMapping = {}; // Map display names to module names
+    this.agent = {
+      commands: [],
+      name: '',
+      hashver: '',
+      preferred_providers: [],
+      thinking_level: 'off', // Default to medium
+      persona: '',
+      recommended_plugins: []
+    };
+    this.showTechnicalInstructionsEditor = false; 
+    this.newAgent = false;
+    this.pendingPlugins = [];
+    this.fetchPersonas();
+    this.resetEditors();
+    this.fetchCommands();
+    this.fetchServiceModels();
+    this.fetchPlugins();
+  }
+
+  async fetchMissingCommands() {
+    if (!this.agent.name) return;
+    
+    // Skip API call for new agents that haven't been saved yet
+    if (this.newAgent) {
+      this.missingCommands = {};
+      return;
+    }
+    
+    try {
+      const response = await fetch(`/admin/missing-commands/${this.agent.name}`);
+      if (!response.ok) throw new Error('Failed to fetch missing commands');
+      this.missingCommands = await response.json();
+      console.log('Fetched missing commands:', this.missingCommands);
+      this.requestUpdate();
+    } catch (error) {
+      this.missingCommands = {};
+      console.log(`Error fetching missing commands: ${error.message}`);
+    }
+  }
+
+  updated(changedProperties) {
+    // Handle newAgent property changes
+    if (changedProperties.has('newAgent')) {
+      console.log('newAgent changed to:', this.newAgent);
+      if (this.newAgent) {
+        // Initialize empty agent with defaults for new agent
+        this.agent = {
+          ...this.agent,
+          commands: this.agent.commands || [],
+          preferred_providers: this.agent.preferred_providers || [],
+          recommended_plugins: this.agent.recommended_plugins || []
+        };
+      }
+    }
+    
+    console.log('Updated with changes:', changedProperties);
+    super.updated(changedProperties);
+    if (changedProperties.has('agent')) {
+      console.log('Agent updated:', this.agent);
+      // Force select element to update
+      const select = this.shadowRoot.querySelector('select[name="persona"]');
+      if (select && this.agent.persona) {
+        select.value = this.agent.persona;
+      }
+      
+      if (this.agent.name) {
+        this.fetchMissingCommands();
+        this.checkRecommendedPlugins();
+      }
+    }
+  }
+
+  resetEditors() {
+    this.showInstructionsEditor = false;
+    this.showTechnicalInstructionsEditor = false;
+  }
+
+  async fetchServiceModels() {
+    try {
+      const response = await fetch('/service-models');
+      if (!response.ok) throw new Error('Failed to fetch service models');
+      const data = await response.json();
+      this.serviceModels = data;
+      console.log('Fetched service models:', this.serviceModels); 
+      // now re-render everything (force)
+      this.requestUpdate();
+    } catch (error) {
+      showNotification('error', `Error loading service models: ${error.message}`);
+    }
+  }
+
+  // Fetch available personas
+  async fetchPersonas() {
+    try {
+      const response = await fetch('/personas/local');
+      if (!response.ok) throw new Error('Failed to fetch personas');
+      this.personas = await response.json();
+      console.log('Fetched personas:', this.personas);
+      console.log('Current agent persona:', this.agent.persona);
+    } catch (error) {
+      showNotification('error', `Error loading personas: ${error.message}`);
+    }
+  }
+
+  async fetchPlugins() {
+    try {
+      const response = await fetch('/plugin-manager/get-all-plugins');
+      if (!response.ok) throw new Error('Failed to fetch plugins');
+      const result = await response.json();
+      this.plugins = result.data.filter(plugin => plugin.enabled);
+      console.log('Fetched plugins:', this.plugins);
+      
+      // Add category (module name) for each plugin if available
+      for (const plugin of this.plugins) {
+        let name = plugin.name;
+        if (plugin.source_path) {
+           plugin.source = plugin.source_path
+           name = plugin.source_path.split('/').filter(Boolean).pop();
+        }
+        if (plugin.github_url) {
+            plugin.source = plugin.github_url
+        }
+        const uniqueId = name.replace(/[^a-zA-Z0-9]/g, '_');
+        name = uniqueId;
+        plugin.name = name
+        plugin._uniqueId = uniqueId;
+        plugin._id = uniqueId
+
+      }
+      
+    } catch (error) {
+      showNotification('error', `Error loading plugins: ${error.message}`);
+    }
+  }
+
+  renderMarkdown(text) {
+    return markdownRenderer.parse(text); 
+  }
+
+
+  async checkRecommendedPlugins() {
+    if (!this.agent.name || !this.agent.recommended_plugins || this.agent.recommended_plugins.length === 0) {
+      this.pendingPlugins = [];
+      return;
+    }
+    
+    // Skip API call for new agents that haven't been saved yet
+    if (this.newAgent) {
+      this.pendingPlugins = [];
+      return;
+    }
+    
+    try {
+      // Check which recommended plugins are not installed
+      const response = await fetch(`/admin/check-recommended-plugins/${this.agent.name}`);
+      if (!response.ok) throw new Error('Failed to check recommended plugins');
+      const result = await response.json();
+      
+      if (result.pending_plugins) {
+        this.pendingPlugins = result.pending_plugins;
+      } else {
+        this.pendingPlugins = [];
+      }
+      
+      console.log('Pending plugins:', this.pendingPlugins);
+      this.requestUpdate();
+    } catch (error) {
+      console.log(`Error checking recommended plugins: ${error.message}`);
+      this.pendingPlugins = [];
+    }
+  }
+
+  async installRecommendedPlugins() {
+    const response = await fetch(`/admin/install-recommended-plugins/${this.agent.name}`, {
+      method: 'POST'
+    });
+    const result = await response.json();
+    showNotification('success', 'Recommended plugins installed. Please refresh the page to see the changes.');
+    this.checkRecommendedPlugins();
+  }
+
+  async fetchCommands() {
+    try {
+      const response = await fetch('/commands');
+      if (!response.ok) throw new Error('Failed to fetch commands');
+      const data = await response.json();
+      this.commands = this.organizeCommands(data);
+    } catch (error) {
+      showNotification('error', `Error loading commands: ${error.message}`);
+    }
+  }
+
+  organizeCommands(commands) {
+    const grouped = {};
+    for (const [cmdName, cmdInfoArray] of Object.entries(commands)) {
+      const cmdInfo = cmdInfoArray[0];
+      const provider = cmdInfo.provider || 'Other';
+      if (!grouped[provider]) {
+        grouped[provider] = [];
+        this.plugins.push(provider)
+      }
+      grouped[provider].push({
+        name: cmdName,
+        provider,
+        providerName: provider,
+        docstring: cmdInfo.docstring,
+        flags: cmdInfo.flags,
+        uniqueId: `${cmdName}_${provider}`.replace(/[^a-zA-Z0-9]/g, '_')
+      });
+      
+      this.providerMapping[provider] = provider;
+    }
+    return grouped;
+  }
+
+  handleInputChange(event) {  
+    const { name, value, type, checked } = event.target;
+     console.log({name, value, type}) 
+    if (name === 'commands') {
+      if (!Array.isArray(this.agent.commands)) {
+        this.agent.commands = [];
+      }
+      if (checked) {
+        this.agent.commands.push(value);
+      } else {
+        this.agent.commands = this.agent.commands.filter(command => command !== value);
+      }
+
+      // Update the entire agent object WITHOUT overwriting commands
+      this.agent = { ...this.agent };
+      return;
+    }
+    
+    // Handle required_plugins similar to commands
+    if (name === 'recommended_plugins') {
+      if (!this.agent.recommended_plugins || !Array.isArray(this.agent.recommended_plugins)) {
+        this.agent.recommended_plugins = [];
+      }
+      if (checked) {
+        this.agent.recommended_plugins.push(value);
+      } else {
+        this.agent.recommended_plugins = this.agent.recommended_plugins.filter(plugin => plugin !== value);
+      }
+
+      this.agent = { ...this.agent };
+      return;
+    }
+    console.log('before',this.agent)
+    // Handle all other inputs
+    const inputValue = type === 'checkbox' ? checked : value;
+    this.agent = { ...this.agent, [name]: inputValue };
+    console.log('after', this.agent)
+  }
+
+  handlePreferredProviderChange(e) {
+    const { value, checked, id } = e.detail || e.target;
+    console.log(`Preferred provider change: ID=${id || 'unknown'} Value=${value}, Checked=${checked}`);
+    
+    // Ensure preferred_providers is always an array
+    if (!Array.isArray(this.agent.preferred_providers)) {
+      this.agent.preferred_providers = [];
+    }
+    
+    let preferred_providers = [...this.agent.preferred_providers];
+    
+    if (checked) {
+      if (!preferred_providers.includes(id)) {
+        preferred_providers.push(id);
+        console.log(`Added ${id} to preferred_providers: ${preferred_providers.join(', ')}`);
+      }
+    } else {
+      const index = preferred_providers.indexOf(id);
+      if (index !== -1) preferred_providers.splice(index, 1);
+      console.log(`Removed ${id} from preferred_providers: ${preferred_providers.join(', ')}`);
+    }
+    
+    this.agent = { ...this.agent, preferred_providers };
+  }
+
+  validateForm() {
+    // Get current form values to ensure we're validating the latest state
+    const nameInput = this.shadowRoot.querySelector('input[name="name"]');
+    const personaSelect = this.shadowRoot.querySelector('select[name="persona"]');
+    const instructionsTextarea = this.shadowRoot.querySelector('textarea[name="instructions"]');
+    
+    const currentName = nameInput?.value || this.agent.name;
+    const currentPersona = personaSelect?.value || this.agent.persona;
+    const currentInstructions = instructionsTextarea?.value || this.agent.instructions;
+    
+    if (!currentName?.trim()) {
+      showNotification('error', 'Name is required');
+      return false;
+    }
+    if (!currentPersona?.trim()) {
+      showNotification('error', 'Persona is required');
+      return false;
+    }
+    if (!currentInstructions?.trim()) {
+      showNotification('error', 'Instructions are required');
+      return false;
+    }
+    return true;
+  }
+
+  async handleSubmit(event) {  // Complete replacement of method
+    event?.preventDefault();
+    
+    // Check if this is a partial save (from instruction save buttons)
+    const isPartialSave = event?.submitter?.classList.contains('partial-save') || 
+                         (event?.target?.classList.contains('icon-button') && 
+                          (this.showInstructionsEditor || this.showTechnicalInstructionsEditor));
+    
+    // For partial saves, update the agent with current textarea values before saving
+   if (isPartialSave) {
+      if (this.showInstructionsEditor) {
+        const instructionsTextarea = this.shadowRoot.querySelector('textarea[name="instructions"]');
+        if (instructionsTextarea) this.agent.instructions = instructionsTextarea.value;
+      }
+      if (this.showTechnicalInstructionsEditor) {
+        const techInstructionsTextarea = this.shadowRoot.querySelector('textarea[name="technicalInstructions"]');
+        if (techInstructionsTextarea) this.agent.technicalInstructions = techInstructionsTextarea.value;
+      }
+    }
+    
+    // Store current form state before any operations
+    const formState = {
+      name: this.agent.name,
+      persona: this.agent.persona,
+      instructions: this.agent.instructions,
+      technicalInstructions: this.agent.technicalInstructions,
+      commands: [...(this.agent.commands || [])],
+      recommended_plugins: [...(this.agent.recommended_plugins || [])],
+      preferred_providers: [...(this.agent.preferred_providers || [])]
+    };
+    
+    // Skip full validation for partial saves
+    if (!isPartialSave && !this.validateForm()) {
+      // Restore form state on validation error
+      this.agent = {
+        ...this.agent,
+        ...formState
+      };
+      // Force update to refresh the form
+      this.requestUpdate();
+      return;
+    }
+    
+    // For new agents, ensure we have default values
+    if (this.newAgent) {
+      this.agent.commands = this.agent.commands || [];
+      this.agent.preferred_providers = this.agent.preferred_providers || [];
+      this.agent.recommended_plugins = this.agent.recommended_plugins || [];
+    }
+
+    try {
+      this.loading = true;
+      const method = this.newAgent ? 'POST' : 'PUT';
+      const url = this.newAgent ? '/agents/local' : `/agents/local/${this.agent.name}`;
+     
+      const cmdSwitches = this.shadowRoot.querySelectorAll('.toggle-command')
+      console.log({cmdSwitches})
+      let cmdsOn = []
+      for (const cmdSwitch of cmdSwitches) {
+        console.log({cmdSwitch})
+        if (cmdSwitch.checked) {
+          cmdsOn.push(cmdSwitch.id.replace('cmd-', ''))
+        }
+      }
+      if (cmdsOn.length > 0) {
+        this.agent.commands = cmdsOn
+      }
+      for (let cmd in this.missingCommands) {
+        if (!this.agent.commands.includes(cmd)) {
+          this.agent.commands.push(cmd)
+        }
+      }
+
+      console.log('Saving, commands are:', this.agent.commands)
+
+      const selectedModelsEls = this.shadowRoot.querySelectorAll('.service-model-select');
+      console.log('Selected models:', selectedModelsEls, this.agent.service_models);
+      for (const select of selectedModelsEls) {
+        const selectedValue = select.value;
+        const serviceName = select.name;
+        if (selectedValue) {
+          console.log(`Selected value for ${serviceName}:`, selectedValue);
+          const [provider, model] = selectedValue.split('__');
+          if (!this.agent.service_models) {
+            this.agent.service_models = {};
+          }
+          this.agent.service_models[serviceName] = { provider, model }
+        }
+      }
+
+      console.log('Agent before saving:', this.agent);
+      const formData = new FormData();
+      const agentData = { ...this.agent };
+
+      agentData.flags = [];
+      if (this.agent.uncensored) {
+        // Make sure flags is an array
+        if (!Array.isArray(agentData.flags)) {
+          agentData.flags = [];
+        }
+        agentData.flags.push('uncensored');
+      }
+      
+      formData.append('agent', JSON.stringify(agentData));
+      
+      const response = await fetch(url, {
+        method,
+        body: formData
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to save agent');
+      }
+
+      // Get the saved agent data from response and update local state
+      const savedAgent = await response.json();
+      
+      // For partial saves, just update with saved data and preserve current agent state
+      if (isPartialSave) {
+        // Store the current edited values before merging
+        const currentInstructions = this.agent.instructions;
+        const currentTechnicalInstructions = this.agent.technicalInstructions;
+        
+        this.agent = {
+          ...this.agent,
+          ...savedAgent
+        };
+        
+        // Restore the edited field values to prevent server response from overwriting them
+        if (this.showInstructionsEditor) {
+          this.agent.instructions = currentInstructions;
+        }
+        if (this.showTechnicalInstructionsEditor) {
+          this.agent.technicalInstructions = currentTechnicalInstructions;
+        }
+      } else {
+        // For full saves, merge with current form values
+        this.agent = {
+          ...savedAgent,
+          name: this.shadowRoot.querySelector('input[name="name"]')?.value || savedAgent.name,
+          persona: this.shadowRoot.querySelector('select[name="persona"]')?.value || savedAgent.persona,
+          thinking_level: this.shadowRoot.querySelector('select[name="thinking_level"]')?.value || savedAgent.thinking_level
+        };
+      }
+      
+      // Reset editors after partial save (from icon buttons)
+      if (isPartialSave) {
+        this.showInstructionsEditor = false;
+        this.showTechnicalInstructionsEditor = false;
+      }
+
+      showNotification('success', `Agent ${this.agent.name} saved successfully`);
+      
+      // Dispatch event with merged data to preserve form state
+      this.dispatchEvent(new CustomEvent('agent-saved', { 
+        detail: { ...this.agent, isPartialSave },  // Include the partial save flag
+        bubbles: true,
+        composed: true
+      }));
+    } catch (error) {
+      showNotification('error', `Error saving agent: ${error.message}`);
+      
+      // Restore form state on error
+      this.agent = {
+        ...this.agent,
+        ...formState
+      };
+      
+      // Force update to refresh the form with restored data
+      this.requestUpdate();
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  renderRequiredPlugins() {
+    // Ensure required_plugins is always an array
+    if (!Array.isArray(this.agent.recommended_plugins)) {
+      this.agent.recommended_plugins = [];
+    }
+    
+    if (!this.plugins || this.plugins.length === 0) {
+      // Fetch plugins if not already loaded
+      if (!this.pluginsFetched) {
+        this.pluginsFetched = true;
+        this.fetchPlugins();
+      }
+      return html`<div>Loading plugins...</div>`;
+    }
+    
+    return html`
+      <div class="commands-category">
+        <h4>Recommended Plugins</h4>
+        <div class="commands-grid">
+          ${this.plugins.map(plugin => {
+            
+            const toggleId = `req_${plugin._uniqueId}`;
+            let source = plugin.remote_source
+            if (!source) source = plugin.github_url 
+            if (!source) return null;
+
+            return html`
+            <div class="command-item">
+              <div class="command-info">
+                <div class="command-name">${source}</div>
+              </div>
+              <toggle-switch 
+                .checked=${Boolean(this.agent.recommended_plugins.includes(source))}
+                id="${toggleId}"
+                @toggle-change=${(e) => this.handleInputChange({ 
+                  target: { 
+                    plugin: plugin,
+                    name: 'recommended_plugins', 
+                    value: source,
+                    type: 'checkbox', 
+                    checked: e.detail.checked 
+                  } 
+                })}>
+              </toggle-switch>
+            </div>
+          `;})}
+        </div>
+      </div>
+    `;
+  }
+
+  renderCommands() {
+    return Object.entries(this.commands).map(([provider, commands]) => html`
+      <div class="commands-category">
+        <details>
+          <summary>${provider}</summary>
+          <div class="commands-grid">
+            ${commands.map(command => html`
+              <div class="command-item">
+                <div class="command-info">
+                  <div class="command-name">${command.name}</div>
+                  ${command.docstring ? html`
+                    <div class="tooltip-text">${command.docstring}</div>
+                  ` : ''}
+                </div>
+                <toggle-switch 
+                   class="toggle-command" 
+                  .checked=${this.agent.commands?.includes(command.name) || false}
+                  id="cmd-${command.name}" 
+                  @toggle-change=${(e) => this.handleInputChange({ 
+                    target: {
+                      name: 'commands', 
+                      value: command.name, 
+                      type: 'checkbox',
+                      checked: e.detail.checked 
+                    }
+                  })}>
+                </toggle-switch>
+              </div>
+            `)}
+          </div>
+        </details>
+      </div>
+    `);
+  }
+
+renderServiceModels() {
+  if (this.serviceModels === undefined || Object.keys(this.serviceModels).length === 0) {
+    return html`<div>Loading service models...</div>`;
+  }
+
+  console.log('Service models:', this.serviceModels);
+  console.log('Agent service models:', this.agent.service_models);
+  return html`
+    <div class="commands-category">
+    <h4>Service Models</h4>
+    <div class="commands-grid">
+      ${Object.entries(this.serviceModels).map(([serviceName, providers]) => html`
+        <div class="command-item">
+      <div class="command-info">
+        <div class="command-name">${serviceName}</div>
+      </div>
+      <select name="${serviceName}" 
+              class="service-model-select"
+              @change=${this.handleInputChange}>
+        ${Object.entries(providers).map(([provider, models]) => html`
+          <optgroup label="${provider}">
+            ${models.map(model => html`
+              <option
+              ?selected=${this.agent.service_models && 
+             this.agent.service_models[serviceName] && 
+             this.agent.service_models[serviceName].provider == provider && 
+             this.agent.service_models[serviceName].model == model}
+                value="${provider}__${model}">${model}</option>
+            `)}
+          </optgroup>
+        `)}
+      </select>
+        </div>
+      `)}
+    </div>
+  `
+}
+
+
+  renderPreferredProviders() {
+    // Ensure preferred_providers is always an array
+    if (!Array.isArray(this.agent.preferred_providers)) {
+      this.agent.preferred_providers = [];
+    }
+    console.log('Preferred providers:', this.agent.preferred_providers);
+    return html`
+      <div class="commands-category">
+        <h4>Preferred Providers</h4>
+        <div class="commands-grid">
+          ${this.plugins.map(plugin => {
+            // Use provider name (module name) as the value
+            // Create a unique ID for each toggle
+            const toggleId = `pref_${plugin.name}`
+            console.log(`Rendering preferred provider for plugin: ${plugin.name}`)
+            return html`
+            <div class="command-item" data-provider="${plugin.name}">
+              <div class="command-info">
+                <div class="command-name">${plugin.name}</div>
+              </div>
+              <toggle-switch 
+                .checked=${this.agent.preferred_providers?.includes(plugin.name) || false}
+                id="${toggleId}"
+                @toggle-change=${(e) => this.handlePreferredProviderChange({ 
+                  detail: {
+                    plugin: plugin.name,
+                    value: plugin.name, 
+                    id: plugin.name,
+                    checked: e.detail.checked 
+                  } 
+                })}>
+              </toggle-switch>
+            </div>
+          `;})}
+        </div>
+      </div>
+    `;
+  }
+
+  renderPendingPlugins() {
+    if (!this.pendingPlugins || this.pendingPlugins.length === 0) {
+      return html``;
+    }
+    
+    return html`
+      <div class="form-group commands-section">
+        <div class="commands-category">
+          <h4>Pending Recommended Plugins</h4>
+          <p>This agent recommends the following plugins that are not yet installed:</p>
+          <ul>
+            ${this.pendingPlugins.map(plugin => html`<li>${plugin}</li>`)}
+          </ul>
+          <button class="btn" @click=${this.installRecommendedPlugins}>
+            Install Recommended Plugins
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  _render() {
+    return html`
+      <form class="agent-form" @submit=${this.handleSubmit}>
+        <div class="form-group">
+          <label class="required">Name:</label>
+          <input type="text" name="name" 
+                 .value=${this.agent.name || ''} 
+                 @input=${this.handleInputChange}>
+        </div>
+
+        <div class="form-group">
+          <label class="required">Persona:</label>
+          <select name="persona" 
+                  value=${this.agent.persona || ''}
+                  @change=${this.handleInputChange}>
+            <option value="">Select a persona</option>
+            ${this.personas.map(persona => html`
+              <option value="${persona.name}" ?selected=${persona.name === this.agent.persona}>${persona.name}</option>
+            `)}
+          </select>
+        </div>
+
+        <div class="form-group">
+          <div class="form-group-header">
+            <label class="required">Instructions:</label>
+            <div class="form-group-actions">
+              ${this.showInstructionsEditor ? html`
+                <button type="button" class="icon-button partial-save" @click=${async (e) => { e.preventDefault(); await this.handleSubmit(e); }}>
+                  <span class="material-icons">save</span>
+                </button>
+              ` : html`
+                <button type="button" class="icon-button" @click=${() => this.showInstructionsEditor = true}>
+                  <span class="material-icons">edit</span>
+                </button>
+              `}
+            </div>
+          </div>
+          ${this.showInstructionsEditor ? html`
+            <textarea name="instructions" 
+                    .value=${this.agent.instructions || ''}></textarea>
+          ` : html`
+            <div class="markdown-preview">
+              ${unsafeHTML(this.renderMarkdown(this.agent.instructions || ''))}
+            </div>
+          `}
+        </div>
+
+        <div class="form-group">
+          <div class="form-group-header">
+            <label>Technical Instructions:</label>
+            <div class="form-group-actions">
+              ${this.showTechnicalInstructionsEditor ? html`
+                <button type="button" class="icon-button partial-save" @click=${async (e) => { e.preventDefault(); await this.handleSubmit(e); }}>
+                  <span class="material-icons">save</span>
+                </button>
+              ` : html`
+                <button type="button" class="icon-button" @click=${() => this.showTechnicalInstructionsEditor = true}>
+                  <span class="material-icons">edit</span>
+                </button>
+              `}
+            </div>
+          </div>
+          ${this.showTechnicalInstructionsEditor ? html`
+            <textarea name="technicalInstructions" 
+                    .value=${this.agent.technicalInstructions || ''}></textarea>
+          ` : html`
+            <div class="markdown-preview">
+              ${unsafeHTML(this.renderMarkdown(this.agent.technicalInstructions || ''))}
+            </div>
+          `}
+        </div>
+
+        <div class="form-group">
+          <label>
+            Uncensored:
+            <toggle-switch 
+              .checked=${this.agent.uncensored || false}
+              @toggle-change=${(e) => this.handleInputChange({ 
+                target: { 
+                  name: 'uncensored', 
+                  type: 'checkbox',
+                  checked: e.detail.checked 
+                } 
+              })}>
+            </toggle-switch>
+          </label>
+        </div>
+
+        <div class="form-group reasoning-level-group">
+          <label>Reasoning Effort:</label>
+          <select name="thinking_level" 
+                 value=${this.agent.thinking_level || 'off'}
+                 @change=${this.handleInputChange}>
+            <option value="off" 
+                   ?selected=${(this.agent.thinking_level || 'off') === 'off'}>
+              Off
+            </option> 
+            <option value="low" 
+                   ?selected=${(this.agent.thinking_level || 'off') === 'low'}>
+              Low
+            </option>
+            <option value="medium" 
+                   ?selected=${(this.agent.thinking_level || 'off') === 'medium'}>
+              Medium
+            </option>
+            <option value="high" 
+                   ?selected=${(this.agent.thinking_level || 'off') === 'high'}>
+              High
+            </option>
+          </select>
+        </div>
+       
+        ${this.renderPendingPlugins()}
+
+        <div class="form-group commands-section">
+          <details>
+            <summary>Preferred Providers</summary>
+            ${this.renderPreferredProviders()}
+          </details>
+        </div> 
+
+        <div class="form-group commands-section">
+          <details>
+            <summary>Select Models</summary>
+            ${this.renderServiceModels()}
+          </details>
+        </div> 
+
+        <div class="form-group commands-section">
+          <details>
+            <summary>Recommended Plugins</summary>
+            ${this.renderRequiredPlugins()}
+          </details>
+        </div>
+
+        ${this.agent.name && this.missingCommands && Object.keys(this.missingCommands).length > 0 ? html`
+          <div class="form-group commands-section">
+            <details>
+              <summary>Missing Commands (${Object.keys(this.missingCommands).length})</summary>
+              <missing-commands .agentName=${this.agent.name}></missing-commands>
+            </details>
+          </div>
+        ` : ''}
+
+        <div class="form-group commands-section">
+          <details><summary>Available Commands</summary>
+          ${this.renderCommands()}
+          </details>
+        </div>
+
+        <div class="agent-insert-end"></div>
+        <button class="btn" type="submit" ?disabled=${this.loading}>
+          ${this.loading ? 'Saving...' : 'Save'}
+        </button>
+        
+      </form>
+    `;
+   }
+}
+
+customElements.define('agent-form', AgentForm);