LocalScriptsWeb/frontend/static/js/profile.js

// frontend/static/js/profile.js

// Profile functions
async function loadProfiles() {
    try {
        const profiles = await apiRequest('/profiles');
        updateProfileSelector(profiles);
        
        // Select first profile if none selected
        if (!currentProfile) {
            const defaultProfile = profiles.find(p => p.id === 'default') || profiles[0];
            if (defaultProfile) {
                await selectProfile(defaultProfile.id);
            }
        }
    } catch (error) {
        showError('Failed to load profiles');
    }
}

function updateProfileSelector(profiles) {
    const select = document.getElementById('profileSelect');
    select.innerHTML = profiles.map(profile => `
        <option value="${profile.id}" ${profile.id === currentProfile?.id ? 'selected' : ''}>
            ${profile.name}
        </option>
    `).join('');
}

async function selectProfile(profileId) {
    try {
        currentProfile = await apiRequest(`/profiles/${profileId}`);
        updateWorkDirDisplay();
    } catch (error) {
        showError('Failed to load profile');
    }
}

async function changeProfile() {
    const select = document.getElementById('profileSelect');
    await selectProfile(select.value);
}

async function selectWorkDir() {
    try {
        const response = await apiRequest('/select-directory');
        if (response.path) {
            await apiRequest(`/profiles/${currentProfile.id}`, {
                method: 'PUT',
                body: JSON.stringify({
                    ...currentProfile,
                    work_dir: response.path
                })
            });
            await selectProfile(currentProfile.id);
            showSuccess('Work directory updated successfully');
        }
    } catch (error) {
        showError('Failed to update work directory');
    }
}

// Profile editor modal
let editingProfile = null;

function showProfileEditor(profile = null) {
    editingProfile = profile;
    const modal = document.createElement('div');
    modal.className = 'modal active';
    
    modal.innerHTML = `
        <div class="modal-content">
            <h2>${profile ? 'Edit Profile' : 'New Profile'}</h2>
            <form id="profileForm" onsubmit="saveProfile(event)">
                <div class="form-group">
                    <label for="profileId">Profile ID</label>
                    <input type="text" id="profileId" name="id" 
                           value="${profile?.id || ''}"
                           ${profile?.id === 'default' ? 'readonly' : ''}
                           required pattern="[a-zA-Z0-9_-]+"
                           title="Only letters, numbers, underscore and dash allowed">
                </div>
                <div class="form-group">
                    <label for="profileName">Name</label>
                    <input type="text" id="profileName" name="name" 
                           value="${profile?.name || ''}" required>
                </div>
                <div class="form-group">
                    <label for="workDir">Work Directory</label>
                    <input type="text" id="workDir" name="work_dir" 
                           value="${profile?.work_dir || ''}" readonly>
                </div>
                <div class="form-group">
                    <label for="llmModel">LLM Model</label>
                    <select id="llmModel" name="llm_model">
                        <option value="gpt-4" ${profile?.llm_settings?.model === 'gpt-4' ? 'selected' : ''}>GPT-4</option>
                        <option value="gpt-3.5-turbo" ${profile?.llm_settings?.model === 'gpt-3.5-turbo' ? 'selected' : ''}>GPT-3.5 Turbo</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="apiKey">API Key</label>
                    <input type="password" id="apiKey" name="api_key" 
                           value="${profile?.llm_settings?.api_key || ''}">
                </div>
                <div class="form-group">
                    <label for="temperature">Temperature</label>
                    <input type="number" id="temperature" name="temperature" 
                           value="${profile?.llm_settings?.temperature || 0.7}"
                           min="0" max="2" step="0.1">
                </div>
                <div class="button-group">
                    <button type="button" onclick="closeModal(this)">Cancel</button>
                    <button type="submit">Save</button>
                </div>
            </form>
        </div>
    `;
    
    document.body.appendChild(modal);
}

async function saveProfile(event) {
    event.preventDefault();
    const form = event.target;
    const formData = new FormData(form);
    
    const profileData = {
        id: formData.get('id'),
        name: formData.get('name'),
        work_dir: formData.get('work_dir'),
        llm_settings: {
            model: formData.get('llm_model'),
            api_key: formData.get('api_key'),
            temperature: parseFloat(formData.get('temperature'))
        }
    };
    
    try {
        if (editingProfile) {
            await apiRequest(`/profiles/${editingProfile.id}`, {
                method: 'PUT',
                body: JSON.stringify(profileData)
            });
        } else {
            await apiRequest('/profiles', {
                method: 'POST',
                body: JSON.stringify(profileData)
            });
        }
        
        await loadProfiles();
        closeModal(event.target);
        showSuccess(`Profile ${editingProfile ? 'updated' : 'created'} successfully`);
    } catch (error) {
        showError(`Failed to ${editingProfile ? 'update' : 'create'} profile`);
    }
}

function editProfile() {
    if (!currentProfile) {
        showError('No profile selected');
        return;
    }
    showProfileEditor(currentProfile);
}

function newProfile() {
    showProfileEditor();
}