@jungjaehoon/mama-os 0.32.3 → 0.34.0

package/public/viewer/js/modules/settings.js

@@ -1,1257 +0,0 @@
-/**
- * Settings Module - MAMA OS Settings Management
- * @module modules/settings
- * @version 1.0.0
- *
- * Handles Settings tab functionality including:
- * - Load current configuration
- * - Save configuration changes
- * - Form validation
- * - Gateway enable/disable toggles
- */
-/* eslint-env browser */
-import { showToast, escapeHtml, escapeAttr, getElementByIdOrNull } from '../utils/dom.js';
-import { formatModelName } from '../utils/format.js';
-import { DebugLogger } from '../utils/debug-logger.js';
-import { reportPageContext } from '../utils/ui-commands.js';
-import { API, } from '../utils/api.js';
-const logger = new DebugLogger('Settings');
-// Model options by backend (single source of truth)
-// Claude models: https://platform.claude.com/docs/en/about-claude/models/overview
-const MODEL_OPTIONS = {
-    codex: [
-        'gpt-5.4',
-        'gpt-5.4-mini',
-        'gpt-4.1',
-        'gpt-4o',
-        'gpt-4o-mini',
-        'o1',
-        'o1-mini',
-        'o3-mini',
-    ],
-    claude: [
-        // Latest models (4.6)
-        'claude-opus-4-6',
-        'claude-sonnet-4-6',
-        // Previous gen (4.5)
-        'claude-opus-4-5-20251101',
-        'claude-sonnet-4-5-20250929',
-        'claude-haiku-4-5-20251001',
-        // Legacy models
-        'claude-sonnet-4-20250514',
-        'claude-opus-4-20250514',
-        'claude-3-7-sonnet-20250219',
-        'claude-3-haiku-20240307',
-    ],
-    cline: ['deepseek/deepseek-v4-flash'],
-};
-const DEFAULT_MODEL = {
-    claude: 'claude-sonnet-4-6',
-    codex: 'gpt-5.4',
-    cline: 'deepseek/deepseek-v4-flash',
-};
-export function getSettingsModelOptions(backend, currentModel) {
-    const options = MODEL_OPTIONS[backend] || MODEL_OPTIONS.claude;
-    return currentModel && !options.includes(currentModel)
-        ? [...options, currentModel]
-        : [...options];
-}
-const EFFORT_SUPPORTED_MODELS = new Set(['claude-opus-4-6', 'claude-sonnet-4-6']);
-const MAX_EFFORT_MODELS = new Set(['claude-opus-4-6']);
-/**
- * Settings Module Class
- */
-export class SettingsModule {
-    config = null;
-    mcpServersData = { servers: [] };
-    multiAgentData = { agents: [] };
-    initialized = false;
-    backendListenersInitialized = false;
-    delegatedListenersInitialized = false;
-    constructor() { }
-    supportsEffortModel(model) {
-        return EFFORT_SUPPORTED_MODELS.has(model);
-    }
-    supportsMaxEffortModel(model) {
-        return MAX_EFFORT_MODELS.has(model);
-    }
-    normalizeEffortForModel(model, effort) {
-        if (effort === 'max' && !this.supportsMaxEffortModel(model)) {
-            return 'high';
-        }
-        return effort;
-    }
-    getEffortLevelsForModel(model) {
-        if (this.supportsMaxEffortModel(model)) {
-            return ['low', 'medium', 'high', 'max'];
-        }
-        return ['low', 'medium', 'high'];
-    }
-    buildEffortOptions(model, selectedEffort) {
-        return this.getEffortLevelsForModel(model)
-            .map((effort) => {
-            const selected = selectedEffort === effort ? ' selected' : '';
-            const label = effort === 'max' ? `${effort} (Opus)` : effort;
-            return `<option value="${effort}"${selected}>${label}</option>`;
-        })
-            .join('');
-    }
-    refreshAgentEffortControls(agentId, model) {
-        const effortContainer = getElementByIdOrNull(`agent-effort-container-${agentId}`);
-        if (!effortContainer) {
-            return;
-        }
-        const supportsEffort = this.supportsEffortModel(model);
-        effortContainer.style.display = supportsEffort ? 'block' : 'none';
-        const effortSelect = getElementByIdOrNull(`agent-effort-${agentId}`);
-        if (!effortSelect) {
-            return;
-        }
-        const currentEffort = (effortSelect.value || 'medium');
-        const normalizedEffort = this.normalizeEffortForModel(model, currentEffort);
-        effortSelect.innerHTML = this.buildEffortOptions(model, normalizedEffort);
-        effortSelect.value = normalizedEffort;
-    }
-    /**
-     * Parse and validate required integer input.
-     */
-    parseIntegerInput(id, min, max, fallback) {
-        const raw = this.getValue(id);
-        if (raw === null) {
-            if (fallback === null) {
-                throw new Error(`필수 값이 비어 있습니다: ${id}`);
-            }
-            return fallback;
-        }
-        const trimmed = raw.trim();
-        if (!trimmed) {
-            if (fallback === null) {
-                throw new Error(`필수 값이 비어 있습니다: ${id}`);
-            }
-            return fallback;
-        }
-        const parsed = Number(trimmed);
-        if (!Number.isFinite(parsed) || !Number.isInteger(parsed)) {
-            throw new Error(`숫자 형식이 유효하지 않습니다: ${id}`);
-        }
-        if (parsed < min || parsed > max) {
-            throw new Error(`${id}는 ${min}~${max} 사이여야 합니다.`);
-        }
-        return parsed;
-    }
-    parseOptionalNumber(id, fieldName, options) {
-        const raw = this.getValue(id);
-        const trimmed = raw.trim();
-        if (!trimmed) {
-            return undefined;
-        }
-        const parsed = Number(trimmed);
-        if (!Number.isFinite(parsed)) {
-            throw new Error(`${fieldName}은(는) 유효한 숫자여야 합니다.`);
-        }
-        if (parsed < options.min) {
-            throw new Error(`${fieldName}은(는) ${options.min} 이상이어야 합니다.`);
-        }
-        if (options.max !== undefined && parsed > options.max) {
-            throw new Error(`${fieldName}은(는) ${options.max} 이하여야 합니다.`);
-        }
-        if (options.integerOnly !== false && !Number.isInteger(parsed)) {
-            throw new Error(`${fieldName}은(는) 정수여야 합니다.`);
-        }
-        return parsed;
-    }
-    /**
-     * Initialize settings module
-     */
-    async init() {
-        if (this.initialized) {
-            return;
-        }
-        this.initialized = true;
-        await this.loadSettings();
-        this.initBackendModelBinding();
-        this.initDelegatedEventHandlers();
-    }
-    initDelegatedEventHandlers() {
-        if (this.delegatedListenersInitialized) {
-            return;
-        }
-        this.delegatedListenersInitialized = true;
-        document.addEventListener('change', (e) => {
-            const target = e.target;
-            if (!(target instanceof HTMLElement)) {
-                return;
-            }
-            const actionElement = target.closest('[data-action]');
-            const action = actionElement?.dataset.action;
-            if (!action || !actionElement) {
-                return;
-            }
-            if (action === 'agent-toggle') {
-                const checkbox = actionElement;
-                const agentId = checkbox.dataset.agentId || '';
-                if (agentId) {
-                    void this.toggleAgent(agentId, checkbox.checked);
-                }
-                return;
-            }
-            if (action === 'agent-backend') {
-                const select = actionElement;
-                const agentId = select.dataset.agentId || '';
-                if (agentId) {
-                    this.onAgentBackendChange(agentId);
-                }
-                return;
-            }
-            if (action === 'agent-model') {
-                const select = actionElement;
-                const agentId = select.dataset.agentId || '';
-                if (agentId) {
-                    this.onAgentModelChange(agentId);
-                }
-                return;
-            }
-            if (action === 'cron-toggle') {
-                const checkbox = actionElement;
-                const cronId = checkbox.dataset.cronId || '';
-                if (cronId) {
-                    void this.toggleCronJob(cronId, checkbox.checked);
-                }
-                return;
-            }
-        });
-        document.addEventListener('click', (e) => {
-            const target = e.target;
-            if (!(target instanceof HTMLElement)) {
-                return;
-            }
-            // Handle agent-save button click
-            const saveButton = target.closest('[data-action="agent-save"]');
-            if (saveButton) {
-                e.preventDefault();
-                const agentId = saveButton.dataset.agentId || '';
-                if (agentId) {
-                    void this.saveAgentConfig(agentId);
-                }
-                return;
-            }
-            // Handle cron-delete button click
-            const deleteButton = target.closest('[data-action="cron-delete"]');
-            if (deleteButton) {
-                e.preventDefault();
-                const cronId = deleteButton.dataset.cronId || '';
-                if (cronId) {
-                    void this.deleteCronJob(cronId);
-                }
-                return;
-            }
-            const goAgentsButton = target.closest('[data-action="go-agents-tab"]');
-            if (goAgentsButton) {
-                e.preventDefault();
-                if (typeof window.switchTab === 'function') {
-                    window.switchTab('agents');
-                }
-            }
-        });
-    }
-    /**
-     * Load current settings from API
-     */
-    async loadSettings() {
-        this.setStatus('Loading...');
-        try {
-            this.config = await API.get('/api/config');
-            // Load MCP servers data
-            try {
-                this.mcpServersData = await API.get('/api/mcp-servers');
-            }
-            catch (e) {
-                logger.warn('MCP servers data unavailable:', e);
-                this.mcpServersData = { servers: [] };
-            }
-            // Load multi-agent data (F3)
-            try {
-                this.multiAgentData = await API.get('/api/multi-agent/agents');
-            }
-            catch (e) {
-                logger.warn('Multi-agent data unavailable:', e);
-                this.multiAgentData = { agents: [] };
-            }
-            this.populateForm();
-            this.setStatus('');
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            logger.error('Load error:', message);
-            this.setStatus(`Error: ${message}`, 'error');
-        }
-    }
-    /**
-     * Populate form with current config values
-     */
-    populateForm() {
-        if (!this.config) {
-            return;
-        }
-        // Discord
-        this.setCheckbox('settings-discord-enabled', this.config.discord?.enabled);
-        this.setValue('settings-discord-token', this.config.discord?.token || '', true);
-        this.setValue('settings-discord-channel', this.config.discord?.default_channel_id || '');
-        // Slack
-        this.setCheckbox('settings-slack-enabled', this.config.slack?.enabled);
-        this.setValue('settings-slack-bot-token', this.config.slack?.bot_token || '', true);
-        this.setValue('settings-slack-app-token', this.config.slack?.app_token || '', true);
-        // Telegram
-        this.setCheckbox('settings-telegram-enabled', this.config.telegram?.enabled);
-        this.setValue('settings-telegram-token', this.config.telegram?.token || '', true);
-        // Chatwork
-        this.setCheckbox('settings-chatwork-enabled', this.config.chatwork?.enabled);
-        this.setValue('settings-chatwork-token', this.config.chatwork?.api_token || '', true);
-        // Heartbeat
-        this.setCheckbox('settings-heartbeat-enabled', this.config.heartbeat?.enabled);
-        this.setValue('settings-heartbeat-interval', Math.round((this.config.heartbeat?.interval || 1800000) / 60000));
-        this.setValue('settings-heartbeat-quiet-start', this.config.heartbeat?.quiet_start ?? 23);
-        this.setValue('settings-heartbeat-quiet-end', this.config.heartbeat?.quiet_end ?? 8);
-        // Agent
-        const backend = (this.config.agent?.backend || 'claude');
-        const model = this.config.agent?.model || 'claude-sonnet-4-6';
-        const effort = (this.config.agent?.effort || 'medium');
-        this.setSelectValue('settings-agent-backend', backend);
-        this.updateModelOptions(backend, model);
-        const normalizedModel = this.getNormalizedModelForBackend(backend, model);
-        this.setSelectValue('settings-agent-model', normalizedModel);
-        this.setSelectValue('settings-agent-effort', effort);
-        this.updateEffortVisibility(normalizedModel);
-        this.setValue('settings-agent-max-turns', this.config.agent?.max_turns || 10);
-        this.setValue('settings-agent-timeout', Math.round((this.config.agent?.timeout || 300000) / 1000));
-        // Timeouts
-        this.populateTimeouts();
-        // Tool Mode
-        this.populateToolMode();
-        // Role Permissions
-        this.populateRoles();
-        // Multi-Agent Team (F3)
-        this.populateMultiAgentSection();
-        // Metrics
-        this.populateMetricsSection();
-        // Skills + Token Budget + Cron
-        this.populateSkillsSection();
-        this.populateTokenSection();
-        this.populateCronSection();
-        reportPageContext('settings', {
-            pageType: 'settings-overview',
-            gateways: {
-                discord: this.config.discord?.enabled ?? false,
-                slack: this.config.slack?.enabled ?? false,
-                telegram: this.config.telegram?.enabled ?? false,
-                chatwork: this.config.chatwork?.enabled ?? false,
-            },
-            agent: {
-                backend: this.config.agent?.backend ?? 'claude',
-                model: this.config.agent?.model ?? null,
-                max_turns: this.config.agent?.max_turns ?? null,
-                timeout: this.config.agent?.timeout ?? null,
-            },
-            multiAgentCount: this.multiAgentData.agents.length,
-            mcpServerCount: this.mcpServersData.servers.length,
-        });
-    }
-    /**
-     * Populate timeouts section from config
-     */
-    populateTimeouts() {
-        if (!this.config) {
-            return;
-        }
-        const t = this.config.timeouts;
-        if (!t) {
-            return;
-        }
-        this.setValue('settings-timeout-request', Math.round((t.request_ms ?? 120000) / 1000));
-        this.setValue('settings-timeout-agent', Math.round((t.agent_ms ?? 300000) / 1000));
-        this.setValue('settings-timeout-session', Math.round((t.session_ms ?? 1800000) / 60000));
-        this.setValue('settings-timeout-wf-step', Math.round((t.workflow_step_ms ?? 300000) / 1000));
-        this.setValue('settings-timeout-wf-max', Math.round((t.workflow_max_ms ?? 1800000) / 60000));
-        this.setValue('settings-timeout-ultrawork', Math.round((t.ultrawork_ms ?? 300000) / 1000));
-    }
-    /**
-     * Populate role permissions from config
-     */
-    populateRoles() {
-        const container = getElementByIdOrNull('settings-roles-container');
-        if (!container || !this.config.roles) {
-            return;
-        }
-        const { definitions, sourceMapping } = this.config.roles;
-        if (!definitions || !sourceMapping) {
-            return;
-        }
-        // Build reverse mapping: role -> sources
-        const roleSources = {};
-        for (const [source, role] of Object.entries(sourceMapping)) {
-            if (!roleSources[role]) {
-                roleSources[role] = [];
-            }
-            roleSources[role].push(source);
-        }
-        // Render each role
-        const roleColors = {
-            os_agent: { badge: 'green', label: 'Full Access' },
-            chat_bot: { badge: 'yellow', label: 'Limited' },
-        };
-        const roleIcons = {
-            os_agent: '🖥️',
-            chat_bot: '🤖',
-        };
-        const roleDefs = definitions;
-        const html = Object.entries(roleDefs)
-            .map(([roleName, roleConfig]) => {
-            const sources = roleSources[roleName] || [];
-            const color = roleColors[roleName] || { badge: 'gray', label: 'Custom' };
-            const icon = roleIcons[roleName] || '⚙️';
-            const displayName = escapeHtml(roleName.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()));
-            const allowedTools = roleConfig.allowedTools || [];
-            const blockedTools = roleConfig.blockedTools || [];
-            const hasSystemControl = roleConfig.systemControl;
-            const hasSensitiveAccess = roleConfig.sensitiveAccess;
-            const model = roleConfig.model || 'default';
-            const maxTurns = roleConfig.maxTurns;
-            // Format model name for display (and escape)
-            const displayModel = escapeHtml(formatModelName(model));
-            return `
-          <div class="bg-white border border-gray-200 rounded-lg p-2.5">
-            <div class="flex items-center justify-between mb-2">
-              <div class="flex items-center gap-2">
-                <span class="text-xl">${icon}</span>
-                <h3 class="font-semibold text-gray-900 text-sm">${displayName}</h3>
-                <span class="text-[10px] bg-${color.badge}-100 text-${color.badge}-800 px-1.5 py-0.5 rounded">${color.label}</span>
-              </div>
-            </div>
-            <div class="text-xs text-gray-600 space-y-1">
-              <div class="flex items-center gap-2">
-                <span class="font-medium">Model:</span>
-                <span class="bg-indigo-50 text-indigo-700 px-1.5 py-0.5 rounded text-[10px] font-medium">${displayModel}</span>
-                ${maxTurns
-                ? `<span class="text-gray-400">| ${escapeHtml(String(maxTurns))} turns</span>`
-                : ''}
-              </div>
-              <div><span class="font-medium">Source:</span> ${sources.map((s) => `<code class="bg-gray-100 px-1 rounded">${escapeHtml(s)}</code>`).join(' ')}</div>
-              <div><span class="font-medium">Allowed:</span> <code class="text-green-600 text-[10px]">${escapeHtml(allowedTools.join(', '))}</code></div>
-              ${blockedTools.length > 0 ? `<div><span class="font-medium">Blocked:</span> <code class="text-red-600 text-[10px]">${escapeHtml(blockedTools.join(', '))}</code></div>` : ''}
-              ${hasSystemControl || hasSensitiveAccess
-                ? `<div><span class="font-medium">Permissions:</span>
-                ${hasSystemControl ? '<span class="inline-block bg-blue-100 text-blue-800 text-[10px] px-1 rounded mr-1">systemControl</span>' : ''}
-                ${hasSensitiveAccess ? '<span class="inline-block bg-purple-100 text-purple-800 text-[10px] px-1 rounded">sensitiveAccess</span>' : ''}
-              </div>`
-                : ''}
-            </div>
-          </div>
-        `;
-        })
-            .join('');
-        container.innerHTML = html;
-    }
-    /**
-     * Populate tool selection checkboxes
-     */
-    populateToolMode() {
-        const tools = this.config.agent?.tools || { gateway: ['*'], mcp: [] };
-        const gatewayTools = tools.gateway || ['*'];
-        const mcpTools = tools.mcp || [];
-        // Set Gateway tool checkboxes
-        const gatewayCheckboxes = document.querySelectorAll('.gateway-tool');
-        const isGatewayAll = gatewayTools.includes('*');
-        gatewayCheckboxes.forEach((cb) => {
-            if (isGatewayAll) {
-                cb.checked = true;
-            }
-            else {
-                cb.checked = gatewayTools.includes(cb.value);
-            }
-        });
-        // Set Select All checkbox
-        const gatewaySelectAll = getElementByIdOrNull('gateway-select-all');
-        if (gatewaySelectAll) {
-            gatewaySelectAll.checked = isGatewayAll || this.allChecked('.gateway-tool');
-        }
-        // Dynamically render MCP servers from API
-        this.renderMCPServers(mcpTools);
-        // Update summary
-        this.updateToolSummary();
-    }
-    /**
-     * Render MCP servers dynamically from loaded data
-     */
-    renderMCPServers(selectedTools = []) {
-        const container = getElementByIdOrNull('mcp-tools-list');
-        if (!container) {
-            return;
-        }
-        const servers = (this.mcpServersData?.servers || []);
-        const isMCPAll = selectedTools.includes('*');
-        if (servers.length === 0) {
-            container.innerHTML = `
-        <p class="text-xs text-gray-500 col-span-full">
-          No MCP servers configured. Add servers to ~/.mama/mama-mcp-config.json
-        </p>
-      `;
-            return;
-        }
-        const serverColors = {
-            'brave-devtools': { border: 'border-blue-200', bg: 'bg-blue-50', icon: '🌐' },
-            'brave-search': { border: 'border-orange-200', bg: 'bg-orange-50', icon: '🔍' },
-            mama: { border: 'border-purple-200', bg: 'bg-purple-50', icon: '🧠' },
-            default: { border: 'border-gray-200', bg: 'bg-gray-50', icon: '🔌' },
-        };
-        const html = servers
-            .map((server) => {
-            const serverName = server.name || '';
-            const colors = serverColors[serverName] || serverColors['default'];
-            const toolValue = `mcp__${serverName}__*`;
-            const isChecked = isMCPAll || selectedTools.includes(toolValue);
-            // Escape server.name for safe HTML rendering (XSS prevention)
-            const safeName = escapeHtml(serverName);
-            const safeToolValue = escapeAttr(toolValue);
-            return `
-        <label class="flex items-center gap-2 p-2 border ${colors.border} rounded-lg text-xs cursor-pointer hover:${colors.bg}">
-          <input type="checkbox" class="mcp-tool" value="${safeToolValue}" ${isChecked ? 'checked' : ''}>
-          ${colors.icon} ${safeName}
-        </label>
-      `;
-        })
-            .join('');
-        container.innerHTML = html;
-        // Update Select All checkbox
-        const mcpSelectAll = getElementByIdOrNull('mcp-select-all');
-        if (mcpSelectAll) {
-            mcpSelectAll.checked = isMCPAll || this.allChecked('.mcp-tool');
-        }
-    }
-    /**
-     * Check if all checkboxes of a class are checked
-     */
-    allChecked(selector) {
-        const checkboxes = document.querySelectorAll(selector);
-        return Array.from(checkboxes).every((cb) => cb.checked);
-    }
-    /**
-     * Toggle all Gateway tools
-     */
-    toggleAllGateway(checked) {
-        document.querySelectorAll('.gateway-tool').forEach((cb) => {
-            cb.checked = checked;
-        });
-        this.updateToolSummary();
-    }
-    /**
-     * Toggle all MCP tools
-     */
-    toggleAllMCP(checked) {
-        document.querySelectorAll('.mcp-tool').forEach((cb) => {
-            cb.checked = checked;
-        });
-        this.updateToolSummary();
-    }
-    /**
-     * Update tool summary display
-     */
-    updateToolSummary() {
-        const gatewayCount = document.querySelectorAll('.gateway-tool:checked').length;
-        const mcpCount = document.querySelectorAll('.mcp-tool:checked').length;
-        const summaryEl = getElementByIdOrNull('tool-summary');
-        if (summaryEl) {
-            summaryEl.textContent = `Gateway: ${gatewayCount} tools | MCP: ${mcpCount} tools`;
-        }
-    }
-    /**
-     * Save settings and restart daemon to apply changes
-     */
-    async saveAndRestart() {
-        this.setStatus('Saving...');
-        try {
-            const updates = this.collectFormData();
-            await API.put('/api/config', updates);
-            this.setStatus('Saved! Restarting...', 'success');
-            showToast('Settings saved. Restarting daemon...');
-            // Trigger restart after save
-            try {
-                await API.post('/api/restart', {});
-            }
-            catch {
-                // Expected: connection drops when server exits
-            }
-            const isServiceReady = await this.waitForServiceAfterRestart();
-            if (!isServiceReady) {
-                this.setStatus('Restarted, but reconnect timed out. Please refresh manually.', 'error');
-                showToast('Restart request sent. Auto reconnect timed out - please refresh page.');
-                return;
-            }
-            this.setStatus('Reconnected. Reloading page...', 'success');
-            setTimeout(() => {
-                window.location.reload();
-            }, 400);
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            logger.error('Save error:', message);
-            this.setStatus(`Error: ${message}`, 'error');
-            showToast(`Failed to save: ${message}`);
-        }
-    }
-    /**
-     * Wait for service recovery after restart by polling dashboard status endpoint.
-     */
-    async waitForServiceAfterRestart() {
-        const maxAttempts = 40;
-        const intervalMs = 1000;
-        const readinessChecks = ['/api/health', '/api/dashboard/status'];
-        // Server waits 500ms + shell sleeps 1s before stopping, so wait at least 2.5s
-        // before first poll to ensure old server is actually down
-        const initialDelayMs = 2500;
-        this.setStatus('Restarting... waiting for shutdown', '');
-        await new Promise((resolve) => setTimeout(resolve, initialDelayMs));
-        for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-            this.setStatus(`Restarting... reconnecting (${attempt}/${maxAttempts})`, '');
-            let isReady = false;
-            for (const endpoint of readinessChecks) {
-                try {
-                    // Use shared API client for strict JSON response parsing and consistent errors.
-                    await API.get(endpoint);
-                    logger.debug('[Settings] Service ready check passed:', endpoint);
-                    isReady = true;
-                    break;
-                }
-                catch {
-                    logger.debug('[Settings] Service not ready yet:', endpoint);
-                }
-            }
-            if (isReady) {
-                return true;
-            }
-            await new Promise((resolve) => setTimeout(resolve, intervalMs));
-        }
-        return false;
-    }
-    /**
-     * Collect form data into config update object
-     */
-    collectFormData() {
-        const backend = (this.getSelectValue('settings-agent-backend') ||
-            this.config?.agent?.backend ||
-            'claude');
-        const model = this.getSelectValue('settings-agent-model') || this.config?.agent?.model || '';
-        const effort = (this.getSelectValue('settings-agent-effort') ||
-            this.config?.agent?.effort ||
-            'medium');
-        const useClaudeCli = backend === 'claude';
-        const resolvedModel = this.getNormalizedModelForBackend(backend, model);
-        const normalizedEffort = this.supportsEffortModel(resolvedModel)
-            ? this.normalizeEffortForModel(resolvedModel, effort)
-            : undefined;
-        const hasToolControls = document.querySelectorAll('.gateway-tool, .mcp-tool').length > 0;
-        const configuredTools = this.config?.agent?.tools;
-        const tools = hasToolControls
-            ? this.collectToolModeData()
-            : {
-                gateway: configuredTools?.gateway ?? [],
-                mcp: configuredTools?.mcp ?? [],
-                mcp_config: typeof configuredTools?.mcp_config === 'string'
-                    ? configuredTools.mcp_config
-                    : '~/.mama/mama-mcp-config.json',
-            };
-        // Get token values - if empty and original was masked, keep original
-        const discordToken = this.getTokenValue('settings-discord-token', this.config?.discord?.token);
-        const slackBotToken = this.getTokenValue('settings-slack-bot-token', this.config?.slack?.bot_token);
-        const slackAppToken = this.getTokenValue('settings-slack-app-token', this.config?.slack?.app_token);
-        const telegramToken = this.getTokenValue('settings-telegram-token', this.config?.telegram?.token);
-        const chatworkToken = this.getTokenValue('settings-chatwork-token', this.config?.chatwork?.api_token);
-        return {
-            discord: {
-                enabled: this.getCheckbox('settings-discord-enabled'),
-                token: discordToken,
-                default_channel_id: this.getValue('settings-discord-channel'),
-            },
-            slack: {
-                enabled: this.getCheckbox('settings-slack-enabled'),
-                bot_token: slackBotToken,
-                app_token: slackAppToken,
-            },
-            telegram: {
-                enabled: this.getCheckbox('settings-telegram-enabled'),
-                token: telegramToken,
-            },
-            chatwork: {
-                enabled: this.getCheckbox('settings-chatwork-enabled'),
-                api_token: chatworkToken,
-            },
-            heartbeat: {
-                enabled: this.getCheckbox('settings-heartbeat-enabled'),
-                interval: this.parseIntegerInput('settings-heartbeat-interval', 1, 1440, 30) * 60000,
-                quiet_start: this.parseIntegerInput('settings-heartbeat-quiet-start', 0, 23, 23),
-                quiet_end: this.parseIntegerInput('settings-heartbeat-quiet-end', 0, 23, 8),
-            },
-            use_claude_cli: useClaudeCli,
-            agent: {
-                backend,
-                model: resolvedModel,
-                // Effort for Claude 4.6 models (adaptive thinking). 'max' is Opus-only.
-                effort: normalizedEffort,
-                max_turns: this.parseIntegerInput('settings-agent-max-turns', 1, 100, this.config?.agent?.max_turns ?? 10),
-                timeout: this.parseIntegerInput('settings-agent-timeout', 1, 600, Math.round((this.config?.agent?.timeout ?? 300000) / 1000)) * 1000,
-                tools,
-            },
-            token_budget: {
-                // Keep existing integer constraint for daily limit to avoid partial values.
-                daily_limit: this.parseOptionalNumber('settings-token-daily-limit', 'daily_limit', {
-                    min: 0,
-                    integerOnly: true,
-                }),
-                alert_threshold: this.parseOptionalNumber('settings-token-alert-threshold', 'alert_threshold', {
-                    min: 0,
-                    max: 100,
-                    integerOnly: false,
-                }),
-            },
-            metrics: {
-                enabled: this.getCheckbox('settings-metrics-enabled'),
-                retention_days: this.parseIntegerInput('settings-metrics-retention', 1, 90, 7),
-            },
-            timeouts: {
-                request_ms: this.parseIntegerInput('settings-timeout-request', 0, 600, 120) * 1000,
-                agent_ms: this.parseIntegerInput('settings-timeout-agent', 0, 3600, 300) * 1000,
-                session_ms: this.parseIntegerInput('settings-timeout-session', 0, 1440, 30) * 60000,
-                workflow_step_ms: this.parseIntegerInput('settings-timeout-wf-step', 0, 7200, 300) * 1000,
-                workflow_max_ms: this.parseIntegerInput('settings-timeout-wf-max', 0, 1440, 30) * 60000,
-                ultrawork_ms: this.parseIntegerInput('settings-timeout-ultrawork', 0, 7200, 300) * 1000,
-            },
-        };
-    }
-    initBackendModelBinding() {
-        if (this.backendListenersInitialized) {
-            return;
-        }
-        this.backendListenersInitialized = true;
-        const backendSelect = getElementByIdOrNull('settings-agent-backend');
-        if (!backendSelect) {
-            return;
-        }
-        backendSelect.addEventListener('change', () => {
-            const backend = (this.getSelectValue('settings-agent-backend') || 'claude');
-            const currentModel = this.getSelectValue('settings-agent-model');
-            this.updateModelOptions(backend, currentModel);
-            const normalizedModel = this.getNormalizedModelForBackend(backend, currentModel);
-            this.setSelectValue('settings-agent-model', normalizedModel);
-            this.updateEffortVisibility(normalizedModel);
-        });
-        // Also listen for model changes to update effort visibility
-        const modelSelect = getElementByIdOrNull('settings-agent-model');
-        if (modelSelect) {
-            modelSelect.addEventListener('change', () => {
-                const model = this.getSelectValue('settings-agent-model');
-                this.updateEffortVisibility(model);
-            });
-        }
-    }
-    updateModelOptions(backend, currentModel) {
-        const select = getElementByIdOrNull('settings-agent-model');
-        if (!select) {
-            return;
-        }
-        const normalized = this.getNormalizedModelForBackend(backend, currentModel);
-        const modelList = getSettingsModelOptions(backend, normalized);
-        select.innerHTML = modelList
-            .map((m) => `<option value="${escapeHtml(m)}" ${m === normalized ? 'selected' : ''}>${escapeHtml(formatModelName(m))}</option>`)
-            .join('');
-        // Update effort visibility when model options change
-        this.updateEffortVisibility(normalized);
-    }
-    /**
-     * Show/hide effort level dropdown based on model selection
-     * Effort applies to Claude 4.6 models, with 'max' reserved for Opus.
-     */
-    updateEffortVisibility(model) {
-        const effortContainer = getElementByIdOrNull('settings-effort-container');
-        if (!effortContainer) {
-            return;
-        }
-        const supportsEffort = this.supportsEffortModel(model);
-        effortContainer.style.display = supportsEffort ? 'block' : 'none';
-        const effortSelect = getElementByIdOrNull('settings-agent-effort');
-        if (!effortSelect) {
-            return;
-        }
-        const currentEffort = (effortSelect.value || 'medium');
-        const normalizedEffort = this.normalizeEffortForModel(model, currentEffort);
-        effortSelect.innerHTML = this.buildEffortOptions(model, normalizedEffort);
-        effortSelect.value = normalizedEffort;
-    }
-    getNormalizedModelForBackend(backend, model) {
-        const isCodexBackend = backend === 'codex';
-        if (!model) {
-            return DEFAULT_MODEL[backend];
-        }
-        const isClaudeModel = /^claude-/i.test(model);
-        if (isCodexBackend && isClaudeModel) {
-            return DEFAULT_MODEL.codex;
-        }
-        if (backend === 'cline' && (isClaudeModel || /^gpt-/i.test(model))) {
-            return DEFAULT_MODEL.cline;
-        }
-        if (backend === 'claude' && !isClaudeModel) {
-            return DEFAULT_MODEL.claude;
-        }
-        return model;
-    }
-    /**
-     * Collect tool selection data from checkboxes
-     */
-    collectToolModeData() {
-        const gatewayTools = [];
-        const mcpTools = [];
-        // Collect selected Gateway tools
-        document.querySelectorAll('.gateway-tool:checked').forEach((cb) => {
-            gatewayTools.push(cb.value);
-        });
-        // Collect selected MCP tools
-        document.querySelectorAll('.mcp-tool:checked').forEach((cb) => {
-            mcpTools.push(cb.value);
-        });
-        // If all Gateway tools are selected, use wildcard
-        const allGateway = document.querySelectorAll('.gateway-tool');
-        if (gatewayTools.length === allGateway.length && gatewayTools.length > 0) {
-            return {
-                gateway: ['*'],
-                mcp: mcpTools,
-                mcp_config: '~/.mama/mama-mcp-config.json',
-            };
-        }
-        return {
-            gateway: gatewayTools,
-            mcp: mcpTools,
-            mcp_config: '~/.mama/mama-mcp-config.json',
-        };
-    }
-    /**
-     * Reset form to current saved values
-     */
-    resetForm() {
-        this.populateForm();
-        this.setStatus('Form reset');
-        setTimeout(() => this.setStatus(''), 2000);
-    }
-    /**
-     * Helper: Set checkbox value
-     */
-    setCheckbox(id, checked) {
-        const el = getElementByIdOrNull(id);
-        if (el) {
-            el.checked = !!checked;
-        }
-    }
-    /**
-     * Helper: Get checkbox value
-     */
-    getCheckbox(id) {
-        const el = getElementByIdOrNull(id);
-        return el ? el.checked : false;
-    }
-    /**
-     * Helper: Set input value
-     * @param {string} id - Element ID
-     * @param {string} value - Value to set
-     * @param {boolean} isSensitive - If true, treat as sensitive token (keep if masked)
-     */
-    setValue(id, value, isSensitive = false) {
-        const el = getElementByIdOrNull(id);
-        if (el) {
-            // For sensitive fields (tokens), preserve placeholder if value is masked
-            const normalized = String(value ?? '');
-            if (isSensitive && this.isMaskedToken(normalized)) {
-                el.placeholder = normalized;
-                el.value = '';
-            }
-            else {
-                el.value = normalized;
-            }
-        }
-    }
-    /**
-     * Check if a token is masked (e.g., "***[redacted]***")
-     */
-    isMaskedToken(token) {
-        if (token === undefined || token === null) {
-            return false;
-        }
-        const str = String(token);
-        return str === '***[redacted]***' || (str.startsWith('***[') && str.endsWith(']***'));
-    }
-    /**
-     * Get token value from input, preserving original if input is empty and original was masked
-     * @param {string} id - Input element ID
-     * @param {string} originalToken - Original token value from config
-     * @returns {string} Token to send (either new value or original masked token)
-     */
-    getTokenValue(id, originalToken) {
-        const inputValue = this.getValue(id);
-        // If user entered a new value, use it
-        if (inputValue && inputValue.trim() !== '') {
-            return inputValue;
-        }
-        // If input is empty and original was masked, keep the masked token (backend will preserve it)
-        if (this.isMaskedToken(originalToken)) {
-            return originalToken;
-        }
-        // Otherwise return the input value (may be empty)
-        return inputValue;
-    }
-    /**
-     * Helper: Get input value
-     */
-    getValue(id) {
-        const el = getElementByIdOrNull(id);
-        return el ? el.value : '';
-    }
-    /**
-     * Helper: Set select value
-     */
-    setSelectValue(id, value) {
-        const el = getElementByIdOrNull(id);
-        if (el) {
-            el.value = value;
-        }
-    }
-    /**
-     * Helper: Get select value
-     */
-    getSelectValue(id) {
-        const el = getElementByIdOrNull(id);
-        return el ? el.value : '';
-    }
-    /**
-     * Helper: Set radio button
-     */
-    setRadio(id, checked) {
-        const el = getElementByIdOrNull(id);
-        if (el) {
-            el.checked = !!checked;
-        }
-    }
-    /**
-     * Helper: Get radio button value
-     */
-    getRadio(id) {
-        const el = getElementByIdOrNull(id);
-        return el ? el.checked : false;
-    }
-    /**
-     * Set status message
-     */
-    setStatus(message, type = '') {
-        const statusEl = getElementByIdOrNull('settings-status');
-        if (statusEl) {
-            statusEl.textContent = message;
-            statusEl.className = `text-sm ${type === 'error' ? 'text-red-500' : type === 'success' ? 'text-green-500' : 'text-gray-500'}`;
-        }
-    }
-    /**
-     * Populate Multi-Agent Team section (F3)
-     * Agent editing has moved to the Agents tab — show redirect notice.
-     */
-    populateMultiAgentSection() {
-        const container = getElementByIdOrNull('settings-multi-agent-container');
-        if (!container) {
-            return;
-        }
-        container.innerHTML = `
-      <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
-        <p class="text-sm text-gray-600 mb-2">Agent management has moved to the Agents tab.</p>
-        <button data-action="go-agents-tab"
-          class="text-sm px-4 py-1.5 rounded-md bg-mama-yellow text-mama-black hover:bg-mama-yellow-hover font-medium">
-          Go to Agents
-        </button>
-      </div>`;
-    }
-    /**
-     * Toggle agent enabled status (F3)
-     */
-    async toggleAgent(agentId, enabled) {
-        try {
-            await API.put(`/api/multi-agent/agents/${agentId}`, { enabled });
-            logger.info(`Agent ${agentId} ${enabled ? 'enabled' : 'disabled'}`);
-        }
-        catch (error) {
-            logger.error('Failed to toggle agent:', error);
-            // Revert checkbox on error
-            const checkbox = document.querySelector(`input[data-action="agent-toggle"][data-agent-id="${agentId}"]`);
-            if (checkbox) {
-                checkbox.checked = !enabled;
-            }
-            alert(`Failed to update agent: ${error instanceof Error ? error.message : String(error)}`);
-        }
-    }
-    onAgentBackendChange(agentId) {
-        const backendSelect = getElementByIdOrNull(`agent-backend-${agentId}`);
-        const modelSelect = getElementByIdOrNull(`agent-model-${agentId}`);
-        if (!backendSelect || !modelSelect) {
-            return;
-        }
-        const backend = (backendSelect.value || 'claude');
-        const currentModel = modelSelect.value || '';
-        const normalized = this.getNormalizedModelForBackend(backend, currentModel);
-        const options = getSettingsModelOptions(backend, normalized);
-        modelSelect.innerHTML = options
-            .map((m) => `<option value="${escapeAttr(m)}" ${m === normalized ? 'selected' : ''}>${escapeHtml(formatModelName(m))}</option>`)
-            .join('');
-        this.refreshAgentEffortControls(agentId, normalized);
-    }
-    onAgentModelChange(agentId) {
-        const modelSelect = getElementByIdOrNull(`agent-model-${agentId}`);
-        if (!modelSelect) {
-            return;
-        }
-        const model = modelSelect.value || '';
-        this.refreshAgentEffortControls(agentId, model);
-    }
-    async saveAgentConfig(agentId) {
-        try {
-            const backendSelect = getElementByIdOrNull(`agent-backend-${agentId}`);
-            const modelSelect = getElementByIdOrNull(`agent-model-${agentId}`);
-            const delegateCheckbox = getElementByIdOrNull(`agent-delegate-${agentId}`);
-            const allToolsCheckbox = getElementByIdOrNull(`agent-alltools-${agentId}`);
-            if (!backendSelect || !modelSelect) {
-                throw new Error('Agent settings inputs not found');
-            }
-            const backend = (backendSelect.value || 'claude');
-            const model = this.getNormalizedModelForBackend(backend, modelSelect.value || '');
-            const can_delegate = delegateCheckbox?.checked ?? false;
-            const hasAllTools = allToolsCheckbox?.checked ?? false;
-            // Effort level
-            const effortSelect = getElementByIdOrNull(`agent-effort-${agentId}`);
-            const supportsEffort = this.supportsEffortModel(model);
-            const effort = supportsEffort && effortSelect
-                ? this.normalizeEffortForModel(model, effortSelect.value)
-                : undefined;
-            // Build tool_permissions based on checkbox
-            const tool_permissions = hasAllTools
-                ? { allowed: ['*'], blocked: [] }
-                : { allowed: ['Read', 'Grep', 'Glob'], blocked: [] };
-            await API.put(`/api/multi-agent/agents/${agentId}`, {
-                backend,
-                model,
-                effort,
-                can_delegate,
-                tool_permissions,
-            });
-            showToast(`Saved ${agentId} (applied)`);
-            await this.loadSettings();
-        }
-        catch (error) {
-            logger.error('Failed to save agent config:', error);
-            alert(`Failed to save agent config: ${error instanceof Error ? error.message : String(error)}`);
-        }
-    }
-    /**
-     * Populate installed skills section
-     */
-    async populateSkillsSection() {
-        const container = getElementByIdOrNull('settings-skills-container');
-        if (!container) {
-            return;
-        }
-        try {
-            const { skills } = await API.get('/api/skills');
-            if (!skills || skills.length === 0) {
-                container.innerHTML = '<p class="text-xs text-gray-400">No skills installed</p>';
-                return;
-            }
-            const sourceColors = {
-                mama: 'bg-yellow-100 text-yellow-700',
-                cowork: 'bg-blue-100 text-blue-700',
-                external: 'bg-purple-100 text-purple-700',
-            };
-            container.innerHTML = `
-        <div class="space-y-1.5">
-          ${skills
-                .map((s) => `
-            <div class="flex items-center justify-between py-1">
-              <div class="flex items-center gap-2">
-                <span class="text-xs font-medium text-gray-900">${escapeHtml(s.name)}</span>
-                <span class="text-[10px] px-1.5 py-0.5 rounded ${sourceColors[s.source] || 'bg-gray-100 text-gray-600'}">${escapeHtml(s.source)}</span>
-              </div>
-              <label class="relative inline-flex items-center cursor-pointer">
-                <input type="checkbox" ${s.enabled !== false ? 'checked' : ''}
-                  data-skill-source="${escapeHtml(s.source)}"
-                  data-skill-id="${escapeHtml(s.id)}"
-                  class="sr-only peer">
-                <div class="w-9 h-5 bg-gray-200 peer-focus:ring-2 peer-focus:ring-yellow-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-yellow-400"></div>
-              </label>
-            </div>
-          `)
-                .join('')}
-        </div>
-      `;
-            container.querySelectorAll('input[data-skill-id]').forEach((input) => {
-                input.addEventListener('change', (event) => {
-                    const target = event.target;
-                    if (!(target instanceof HTMLInputElement)) {
-                        return;
-                    }
-                    const source = target.dataset.skillSource || '';
-                    const id = target.dataset.skillId || '';
-                    if (!source || !id) {
-                        return;
-                    }
-                    this.toggleSkill(source, id, target.checked);
-                });
-            });
-        }
-        catch (error) {
-            logger.warn('Skills load error:', error instanceof Error ? error.message : String(error));
-            container.innerHTML = '<p class="text-xs text-gray-400">Failed to load skills</p>';
-        }
-    }
-    /**
-     * Toggle skill enabled/disabled from settings
-     */
-    async toggleSkill(source, name, enabled) {
-        try {
-            await API.toggleSkill(name, enabled, source);
-        }
-        catch (error) {
-            logger.error('Skill toggle failed:', error instanceof Error ? error.message : String(error));
-            this.populateSkillsSection();
-        }
-    }
-    /**
-     * Populate scheduled jobs section
-     */
-    async populateCronSection() {
-        const container = getElementByIdOrNull('settings-cron-container');
-        if (!container) {
-            return;
-        }
-        try {
-            const { jobs } = await API.get('/api/cron');
-            if (!jobs || jobs.length === 0) {
-                container.innerHTML = '<p class="text-xs text-gray-400">No scheduled jobs</p>';
-                return;
-            }
-            const cronJobs = jobs;
-            container.innerHTML = `<div class="space-y-1.5">${cronJobs
-                .map((job) => {
-                const nextRun = job.nextRun
-                    ? new Date(job.nextRun).toLocaleString([], {
-                        month: 'short',
-                        day: 'numeric',
-                        hour: '2-digit',
-                        minute: '2-digit',
-                    })
-                    : '-';
-                return `
-          <div class="flex items-center justify-between py-1">
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2">
-                <span class="text-xs font-medium text-gray-900">${escapeHtml(job.name || job.id)}</span>
-                <code class="text-[10px] bg-gray-100 px-1 rounded">${escapeHtml(job.schedule || job.cronExpr || '')}</code>
-              </div>
-              <p class="text-[10px] text-gray-500 truncate">${escapeHtml((job.prompt || '').slice(0, 80))}</p>
-            </div>
-              <div class="flex items-center gap-1 ml-2 shrink-0">
-                <span class="text-[10px] text-gray-400">${nextRun}</span>
-                <label class="relative inline-flex items-center cursor-pointer">
-                <input
-                  type="checkbox"
-                    ${job.enabled !== false ? 'checked' : ''}
-                    data-action="cron-toggle"
-                    data-cron-id="${escapeAttr(job.id)}"
-                    class="sr-only peer cron-toggle"
-                  >
-                <div class="w-9 h-5 bg-gray-200 peer-focus:ring-2 peer-focus:ring-yellow-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-yellow-400"></div>
-              </label>
-              <button
-                type="button"
-                data-action="cron-delete"
-                data-cron-id="${escapeAttr(job.id)}"
-                class="text-red-400 hover:text-red-600 text-xs px-1"
-                title="Delete"
-              >
-                ✕
-              </button>
-            </div>
-          </div>`;
-            })
-                .join('')}</div>`;
-        }
-        catch (error) {
-            logger.warn('Cron load error:', error);
-            container.innerHTML = '<p class="text-xs text-gray-400">Failed to load jobs</p>';
-        }
-    }
-    async addCronJob() {
-        const nameInput = getElementByIdOrNull('settings-cron-name');
-        const cronExprInput = getElementByIdOrNull('settings-cron-expr');
-        const promptInput = getElementByIdOrNull('settings-cron-prompt');
-        if (!nameInput || !cronExprInput || !promptInput) {
-            return;
-        }
-        const name = nameInput.value.trim();
-        const cronExpr = cronExprInput.value.trim();
-        const prompt = promptInput.value.trim();
-        if (!name || !cronExpr || !prompt) {
-            showToast('Please fill in all fields');
-            return;
-        }
-        try {
-            await API.post('/api/cron', { name, cron_expr: cronExpr, prompt });
-            nameInput.value = '';
-            cronExprInput.value = '';
-            promptInput.value = '';
-            showToast('Job created');
-            this.populateCronSection();
-        }
-        catch (error) {
-            showToast(`Failed: ${error instanceof Error ? error.message : String(error)}`);
-        }
-    }
-    async toggleCronJob(id, enabled) {
-        try {
-            await API.updateCronJob(id, { enabled });
-        }
-        catch (error) {
-            logger.error('Cron toggle failed:', error);
-            this.populateCronSection();
-        }
-    }
-    async deleteCronJob(id) {
-        if (!confirm('Delete this scheduled job?')) {
-            return;
-        }
-        try {
-            await API.del(`/api/cron/${encodeURIComponent(id)}`);
-            showToast('Job deleted');
-            this.populateCronSection();
-        }
-        catch (error) {
-            showToast(`Failed: ${error instanceof Error ? error.message : String(error)}`);
-        }
-    }
-    /**
-     * Populate metrics section from config
-     */
-    populateMetricsSection() {
-        const metrics = this.config?.metrics;
-        this.setCheckbox('settings-metrics-enabled', metrics?.enabled !== false);
-        this.setValue('settings-metrics-retention', metrics?.retention_days ?? 7);
-    }
-    /**
-     * Populate token budget section from config
-     */
-    populateTokenSection() {
-        const budget = this.config?.token_budget;
-        if (!budget) {
-            return;
-        }
-        this.setValue('settings-token-daily-limit', budget.daily_limit || '');
-        this.setValue('settings-token-alert-threshold', budget.alert_threshold || '');
-    }
-}