diff --git a/src/channels/web/mod.rs b/src/channels/web/mod.rs index 0d970569a9..a96f7c7b2d 100644 --- a/src/channels/web/mod.rs +++ b/src/channels/web/mod.rs @@ -102,6 +102,7 @@ impl GatewayChannel { cost_guard: None, routine_engine: Arc::new(tokio::sync::RwLock::new(None)), startup_time: std::time::Instant::now(), + active_config: server::ActiveConfigSnapshot::default(), }); Self { @@ -139,6 +140,7 @@ impl GatewayChannel { cost_guard: self.state.cost_guard.clone(), routine_engine: Arc::clone(&self.state.routine_engine), startup_time: self.state.startup_time, + active_config: self.state.active_config.clone(), }; mutate(&mut new_state); self.state = Arc::new(new_state); @@ -250,6 +252,12 @@ impl GatewayChannel { self } + /// Inject the active (resolved) configuration snapshot for the status endpoint. + pub fn with_active_config(mut self, config: server::ActiveConfigSnapshot) -> Self { + self.rebuild_state(|s| s.active_config = config); + self + } + /// Get the auth token (for printing to console on startup). pub fn auth_token(&self) -> &str { &self.auth_token diff --git a/src/channels/web/server.rs b/src/channels/web/server.rs index acec384235..a3a5a74b0d 100644 --- a/src/channels/web/server.rs +++ b/src/channels/web/server.rs @@ -126,6 +126,14 @@ impl RateLimiter { } } +/// Snapshot of the active (resolved) configuration exposed to the frontend. +#[derive(Debug, Clone, Default, serde::Serialize)] +pub struct ActiveConfigSnapshot { + pub llm_backend: String, + pub llm_model: String, + pub enabled_channels: Vec, +} + /// Shared state for all gateway handlers. pub struct GatewayState { /// Channel to send messages to the agent loop. @@ -177,6 +185,8 @@ pub struct GatewayState { pub routine_engine: RoutineEngineSlot, /// Server startup time for uptime calculation. pub startup_time: std::time::Instant, + /// Snapshot of active (resolved) configuration for the frontend. + pub active_config: ActiveConfigSnapshot, } /// Start the gateway HTTP server. @@ -2688,6 +2698,9 @@ async fn gateway_status_handler( daily_cost, actions_this_hour, model_usage, + llm_backend: state.active_config.llm_backend.clone(), + llm_model: state.active_config.llm_model.clone(), + enabled_channels: state.active_config.enabled_channels.clone(), }) } @@ -2713,6 +2726,9 @@ struct GatewayStatusResponse { actions_this_hour: Option, #[serde(skip_serializing_if = "Option::is_none")] model_usage: Option>, + llm_backend: String, + llm_model: String, + enabled_channels: Vec, } #[cfg(test)] @@ -2826,6 +2842,7 @@ mod tests { cost_guard: None, routine_engine: Arc::new(tokio::sync::RwLock::new(None)), startup_time: std::time::Instant::now(), + active_config: ActiveConfigSnapshot::default(), }) } diff --git a/src/channels/web/static/app.js b/src/channels/web/static/app.js index 081b0f3a5a..4665ca0555 100644 --- a/src/channels/web/static/app.js +++ b/src/channels/web/static/app.js @@ -20,6 +20,7 @@ const JOB_EVENTS_CAP = 500; const MEMORY_SEARCH_QUERY_MAX_LENGTH = 100; let stagedImages = []; let _ghostSuggestion = ''; +let currentSettingsSubtab = 'inference'; // --- Slash Commands --- @@ -134,6 +135,7 @@ function apiFetch(path, options) { throw new Error(body || (res.status + ' ' + res.statusText)); }); } + if (res.status === 204) return null; return res.json(); }); } @@ -363,8 +365,8 @@ function connectSSE() { debouncedLoadThreads(); } - // Extension setup flows can surface approvals while user is on Extensions tab. - if (currentTab === 'extensions') loadExtensions(); + // Extension setup flows can surface approvals from any settings subtab. + if (currentTab === 'settings') refreshCurrentSettingsTab(); }); eventSource.addEventListener('auth_required', (e) => { @@ -372,11 +374,21 @@ function connectSSE() { }); eventSource.addEventListener('auth_completed', (e) => { - handleAuthCompleted(JSON.parse(e.data)); + const data = JSON.parse(e.data); + // Dismiss whichever UI path was active: auth card (OAuth) or configure modal (setup). + removeAuthCard(data.extension_name); + closeConfigureModal(); + showToast(data.message, data.success ? 'success' : 'error'); + if (shouldShowChannelConnectedMessage(data.extension_name, data.success)) { + addMessage('system', 'Telegram is now connected. You can message me there and I can send you notifications.'); + } + // Refresh extensions list so status indicators update + if (currentTab === 'settings') refreshCurrentSettingsTab(); + enableChatInput(); }); eventSource.addEventListener('extension_status', (e) => { - if (currentTab === 'extensions') loadExtensions(); + if (currentTab === 'settings') refreshCurrentSettingsTab(); }); eventSource.addEventListener('image_generated', (e) => { @@ -1200,7 +1212,7 @@ function handleAuthCompleted(data) { if (shouldShowChannelConnectedMessage(data.extension_name, data.success)) { addMessage('system', 'Telegram is now connected. You can message me there and I can send you notifications.'); } - if (currentTab === 'extensions') loadExtensions(); + if (currentTab === 'settings') refreshCurrentSettingsTab(); enableChatInput(); } @@ -1825,13 +1837,11 @@ function switchTab(tab) { if (tab === 'jobs') loadJobs(); if (tab === 'routines') loadRoutines(); if (tab === 'logs') applyLogFilters(); - if (tab === 'extensions') { - loadExtensions(); - startPairingPoll(); + if (tab === 'settings') { + loadSettingsSubtab(currentSettingsSubtab); } else { stopPairingPoll(); } - if (tab === 'skills') loadSkills(); } // --- Memory (filesystem tree) --- @@ -2218,61 +2228,42 @@ var kindLabels = { 'wasm_channel': 'Channel', 'wasm_tool': 'Tool', 'mcp_server': function loadExtensions() { const extList = document.getElementById('extensions-list'); const wasmList = document.getElementById('available-wasm-list'); - const mcpList = document.getElementById('mcp-servers-list'); - const toolsTbody = document.getElementById('tools-tbody'); - const toolsEmpty = document.getElementById('tools-empty'); + extList.innerHTML = renderCardsSkeleton(3); - // Fetch all three in parallel + // Fetch extensions and registry in parallel Promise.all([ apiFetch('/api/extensions').catch(() => ({ extensions: [] })), - apiFetch('/api/extensions/tools').catch(() => ({ tools: [] })), apiFetch('/api/extensions/registry').catch(function(err) { console.warn('registry fetch failed:', err); return { entries: [] }; }), - ]).then(([extData, toolData, registryData]) => { - // Render installed extensions - if (extData.extensions.length === 0) { + ]).then(([extData, registryData]) => { + // Render installed extensions (exclude wasm_channel and mcp_server — shown in their own tabs) + var nonChannelExts = extData.extensions.filter(function(e) { + return e.kind !== 'wasm_channel' && e.kind !== 'mcp_server'; + }); + if (nonChannelExts.length === 0) { extList.innerHTML = '
' + I18n.t('extensions.noInstalled') + '
'; } else { extList.innerHTML = ''; - for (const ext of extData.extensions) { + for (const ext of nonChannelExts) { extList.appendChild(renderExtensionCard(ext)); } } - // Split registry entries by kind - var wasmEntries = registryData.entries.filter(function(e) { return e.kind !== 'mcp_server' && !e.installed; }); - var mcpEntries = registryData.entries.filter(function(e) { return e.kind === 'mcp_server'; }); + // Available extensions (exclude MCP servers and channels — they have their own tabs) + var wasmEntries = registryData.entries.filter(function(e) { + return e.kind !== 'mcp_server' && e.kind !== 'wasm_channel' && e.kind !== 'channel' && !e.installed; + }); - // Available WASM extensions + var wasmSection = document.getElementById('available-wasm-section'); if (wasmEntries.length === 0) { - wasmList.innerHTML = '
' + I18n.t('extensions.noAvailable') + '
'; + if (wasmSection) wasmSection.style.display = 'none'; } else { + if (wasmSection) wasmSection.style.display = ''; wasmList.innerHTML = ''; for (const entry of wasmEntries) { wasmList.appendChild(renderAvailableExtensionCard(entry)); } } - // MCP servers (show both installed and uninstalled) - if (mcpEntries.length === 0) { - mcpList.innerHTML = '
' + I18n.t('mcp.noServers') + '
'; - } else { - mcpList.innerHTML = ''; - for (const entry of mcpEntries) { - var installedExt = extData.extensions.find(function(e) { return e.name === entry.name; }); - mcpList.appendChild(renderMcpServerCard(entry, installedExt)); - } - } - - // Render tools - if (toolData.tools.length === 0) { - toolsTbody.innerHTML = ''; - toolsEmpty.style.display = 'block'; - } else { - toolsEmpty.style.display = 'none'; - toolsTbody.innerHTML = toolData.tools.map((t) => - '' + escapeHtml(t.name) + '' + escapeHtml(t.description) + '' - ).join(''); - } }); } @@ -2338,18 +2329,18 @@ function renderAvailableExtensionCard(entry) { showToast('Opening authentication for ' + entry.display_name, 'info'); openOAuthUrl(res.auth_url); } - loadExtensions(); + refreshCurrentSettingsTab(); // Auto-open configure for WASM channels if (entry.kind === 'wasm_channel') { showConfigureModal(entry.name); } } else { showToast('Install: ' + (res.message || 'unknown error'), 'error'); - loadExtensions(); + refreshCurrentSettingsTab(); } }).catch(function(err) { showToast('Install failed: ' + err.message, 'error'); - loadExtensions(); + refreshCurrentSettingsTab(); }); }); actions.appendChild(installBtn); @@ -2405,6 +2396,13 @@ function renderMcpServerCard(entry, installedExt) { activeLabel.textContent = I18n.t('ext.active'); actions.appendChild(activeLabel); } + if (installedExt.needs_setup || (installedExt.has_auth && installedExt.authenticated)) { + var configBtn = document.createElement('button'); + configBtn.className = 'btn-ext configure'; + configBtn.textContent = installedExt.authenticated ? I18n.t('ext.reconfigure') : I18n.t('ext.configure'); + configBtn.addEventListener('click', function() { showConfigureModal(installedExt.name); }); + actions.appendChild(configBtn); + } var removeBtn = document.createElement('button'); removeBtn.className = 'btn-ext remove'; removeBtn.textContent = I18n.t('ext.remove'); @@ -2426,10 +2424,10 @@ function renderMcpServerCard(entry, installedExt) { } else { showToast(I18n.t('ext.install') + ': ' + (res.message || 'unknown error'), 'error'); } - loadExtensions(); + loadMcpServers(); }).catch(function(err) { showToast(I18n.t('ext.installFailed', { message: err.message }), 'error'); - loadExtensions(); + loadMcpServers(); }); }); actions.appendChild(installBtn); @@ -2449,7 +2447,16 @@ function createReconfigureButton(extName) { function renderExtensionCard(ext) { const card = document.createElement('div'); - card.className = 'ext-card'; + var stateClass = 'state-inactive'; + if (ext.kind === 'wasm_channel') { + var s = ext.activation_status || 'installed'; + if (s === 'active') stateClass = 'state-active'; + else if (s === 'failed') stateClass = 'state-error'; + else if (s === 'pairing') stateClass = 'state-pairing'; + } else if (ext.active) { + stateClass = 'state-active'; + } + card.className = 'ext-card ' + stateClass; const header = document.createElement('div'); header.className = 'ext-header'; @@ -2594,6 +2601,12 @@ function renderExtensionCard(ext) { return card; } +function refreshCurrentSettingsTab() { + if (currentSettingsSubtab === 'extensions') loadExtensions(); + if (currentSettingsSubtab === 'channels') loadChannelsStatus(); + if (currentSettingsSubtab === 'mcp') loadMcpServers(); +} + function activateExtension(name) { apiFetch('/api/extensions/' + encodeURIComponent(name) + '/activate', { method: 'POST' }) .then((res) => { @@ -2607,7 +2620,7 @@ function activateExtension(name) { showToast('Opening authentication for ' + name, 'info'); openOAuthUrl(res.auth_url); } - loadExtensions(); + refreshCurrentSettingsTab(); return; } @@ -2623,23 +2636,24 @@ function activateExtension(name) { } else { showToast('Activate failed: ' + res.message, 'error'); } - loadExtensions(); + refreshCurrentSettingsTab(); }) .catch((err) => showToast('Activate failed: ' + err.message, 'error')); } function removeExtension(name) { - if (!confirm(I18n.t('ext.confirmRemove', { name: name }))) return; - apiFetch('/api/extensions/' + encodeURIComponent(name) + '/remove', { method: 'POST' }) - .then((res) => { - if (!res.success) { - showToast(I18n.t('ext.removeFailed', { message: res.message }), 'error'); - } else { - showToast(I18n.t('ext.removed', { name: name }), 'success'); - } - loadExtensions(); - }) - .catch((err) => showToast(I18n.t('ext.removeFailed', { message: err.message }), 'error')); + showConfirmModal(I18n.t('ext.confirmRemove', { name: name }), '', function() { + apiFetch('/api/extensions/' + encodeURIComponent(name) + '/remove', { method: 'POST' }) + .then((res) => { + if (!res.success) { + showToast(I18n.t('ext.removeFailed', { message: res.message }), 'error'); + } else { + showToast(I18n.t('ext.removed', { name: name }), 'success'); + } + refreshCurrentSettingsTab(); + }) + .catch((err) => showToast(I18n.t('ext.removeFailed', { message: err.message }), 'error')); + }, I18n.t('common.remove'), 'btn-danger'); } function showConfigureModal(name) { @@ -2770,7 +2784,7 @@ function submitConfigureModal(name, fields) { }); showToast('Opening OAuth authorization for ' + name, 'info'); openOAuthUrl(res.auth_url); - loadExtensions(); + refreshCurrentSettingsTab(); } // For non-OAuth success: the server always broadcasts auth_completed SSE, // which will show the toast and refresh extensions — no need to do it here too. @@ -2857,7 +2871,7 @@ function approvePairing(channel, code, container) { }).then(res => { if (res.success) { showToast('Pairing approved', 'success'); - loadExtensions(); + refreshCurrentSettingsTab(); } else { showToast(res.message || 'Approve failed', 'error'); } @@ -3963,7 +3977,7 @@ function addMcpServer() { showToast('Added MCP server ' + name, 'success'); document.getElementById('mcp-install-name').value = ''; document.getElementById('mcp-install-url').value = ''; - loadExtensions(); + loadMcpServers(); } else { showToast('Failed to add MCP server: ' + (res.message || 'unknown error'), 'error'); } @@ -3976,6 +3990,7 @@ function addMcpServer() { function loadSkills() { var skillsList = document.getElementById('skills-list'); + skillsList.innerHTML = renderCardsSkeleton(3); apiFetch('/api/skills').then(function(data) { if (!data.skills || data.skills.length === 0) { skillsList.innerHTML = '
' + I18n.t('skills.noInstalled') + '
'; @@ -3992,7 +4007,7 @@ function loadSkills() { function renderSkillCard(skill) { var card = document.createElement('div'); - card.className = 'ext-card'; + card.className = 'ext-card state-active'; var header = document.createElement('div'); header.className = 'ext-header'; @@ -4259,20 +4274,21 @@ function installSkill(nameOrSlug, url, btn) { } function removeSkill(name) { - if (!confirm(I18n.t('skills.confirmRemove', { name: name }))) return; - apiFetch('/api/skills/' + encodeURIComponent(name), { - method: 'DELETE', - headers: { 'X-Confirm-Action': 'true' }, - }).then(function(res) { - if (res.success) { - showToast(I18n.t('skills.removed', { name: name }), 'success'); - } else { - showToast(I18n.t('skills.removeFailed', { message: res.message || 'unknown error' }), 'error'); - } - loadSkills(); - }).catch(function(err) { - showToast(I18n.t('skills.removeFailed', { message: err.message }), 'error'); - }); + showConfirmModal(I18n.t('skills.confirmRemove', { name: name }), '', function() { + apiFetch('/api/skills/' + encodeURIComponent(name), { + method: 'DELETE', + headers: { 'X-Confirm-Action': 'true' }, + }).then(function(res) { + if (res.success) { + showToast(I18n.t('skills.removed', { name: name }), 'success'); + } else { + showToast(I18n.t('skills.removeFailed', { message: res.message || 'unknown error' }), 'error'); + } + loadSkills(); + }).catch(function(err) { + showToast(I18n.t('skills.removeFailed', { message: err.message }), 'error'); + }); + }, I18n.t('common.remove'), 'btn-danger'); } function installSkillFromForm() { @@ -4301,10 +4317,10 @@ document.addEventListener('keydown', (e) => { const tag = (e.target.tagName || '').toLowerCase(); const inInput = tag === 'input' || tag === 'textarea'; - // Mod+1-6: switch tabs - if (mod && e.key >= '1' && e.key <= '6') { + // Mod+1-5: switch tabs + if (mod && e.key >= '1' && e.key <= '5') { e.preventDefault(); - const tabs = ['chat', 'memory', 'jobs', 'routines', 'extensions', 'skills']; + const tabs = ['chat', 'memory', 'jobs', 'routines', 'settings']; const idx = parseInt(e.key) - 1; if (tabs[idx]) switchTab(tabs[idx]); return; @@ -4344,6 +4360,676 @@ document.addEventListener('keydown', (e) => { } }); +// --- Settings Tab --- + +document.querySelectorAll('.settings-subtab').forEach(function(btn) { + btn.addEventListener('click', function() { + switchSettingsSubtab(btn.getAttribute('data-settings-subtab')); + }); +}); + +function switchSettingsSubtab(subtab) { + currentSettingsSubtab = subtab; + document.querySelectorAll('.settings-subtab').forEach(function(b) { + b.classList.toggle('active', b.getAttribute('data-settings-subtab') === subtab); + }); + document.querySelectorAll('.settings-subpanel').forEach(function(p) { + p.classList.toggle('active', p.id === 'settings-' + subtab); + }); + // Clear search when switching subtabs so stale filters don't apply + var searchInput = document.getElementById('settings-search-input'); + if (searchInput && searchInput.value) { + searchInput.value = ''; + searchInput.dispatchEvent(new Event('input')); + } + loadSettingsSubtab(subtab); +} + +function loadSettingsSubtab(subtab) { + if (subtab === 'inference') loadInferenceSettings(); + else if (subtab === 'agent') loadAgentSettings(); + else if (subtab === 'channels') { loadChannelsStatus(); startPairingPoll(); } + else if (subtab === 'networking') loadNetworkingSettings(); + else if (subtab === 'extensions') { loadExtensions(); startPairingPoll(); } + else if (subtab === 'mcp') loadMcpServers(); + else if (subtab === 'skills') loadSkills(); + if (subtab !== 'extensions' && subtab !== 'channels') stopPairingPoll(); +} + +// --- Structured Settings Definitions --- + +var INFERENCE_SETTINGS = [ + { + group: 'cfg.group.llm', + settings: [ + { key: 'llm_backend', label: 'cfg.llm_backend.label', description: 'cfg.llm_backend.desc', + type: 'select', options: ['nearai', 'anthropic', 'openai', 'ollama', 'openai_compatible', 'tinfoil', 'bedrock'] }, + { key: 'selected_model', label: 'cfg.selected_model.label', description: 'cfg.selected_model.desc', type: 'text' }, + { key: 'ollama_base_url', label: 'cfg.ollama_base_url.label', description: 'cfg.ollama_base_url.desc', type: 'text', + showWhen: { key: 'llm_backend', value: 'ollama' } }, + { key: 'openai_compatible_base_url', label: 'cfg.openai_compatible_base_url.label', description: 'cfg.openai_compatible_base_url.desc', type: 'text', + showWhen: { key: 'llm_backend', value: 'openai_compatible' } }, + { key: 'bedrock_region', label: 'cfg.bedrock_region.label', description: 'cfg.bedrock_region.desc', type: 'text', + showWhen: { key: 'llm_backend', value: 'bedrock' } }, + { key: 'bedrock_cross_region', label: 'cfg.bedrock_cross_region.label', description: 'cfg.bedrock_cross_region.desc', type: 'text', + showWhen: { key: 'llm_backend', value: 'bedrock' } }, + { key: 'bedrock_profile', label: 'cfg.bedrock_profile.label', description: 'cfg.bedrock_profile.desc', type: 'text', + showWhen: { key: 'llm_backend', value: 'bedrock' } }, + ] + }, + { + group: 'cfg.group.embeddings', + settings: [ + { key: 'embeddings.enabled', label: 'cfg.embeddings_enabled.label', description: 'cfg.embeddings_enabled.desc', type: 'boolean' }, + { key: 'embeddings.provider', label: 'cfg.embeddings_provider.label', description: 'cfg.embeddings_provider.desc', + type: 'select', options: ['openai', 'nearai'] }, + { key: 'embeddings.model', label: 'cfg.embeddings_model.label', description: 'cfg.embeddings_model.desc', type: 'text' }, + ] + }, +]; + +var AGENT_SETTINGS = [ + { + group: 'cfg.group.agent', + settings: [ + { key: 'agent.name', label: 'cfg.agent_name.label', description: 'cfg.agent_name.desc', type: 'text' }, + { key: 'agent.max_parallel_jobs', label: 'cfg.agent_max_parallel_jobs.label', description: 'cfg.agent_max_parallel_jobs.desc', type: 'number' }, + { key: 'agent.job_timeout_secs', label: 'cfg.agent_job_timeout.label', description: 'cfg.agent_job_timeout.desc', type: 'number' }, + { key: 'agent.max_tool_iterations', label: 'cfg.agent_max_tool_iterations.label', description: 'cfg.agent_max_tool_iterations.desc', type: 'number' }, + { key: 'agent.use_planning', label: 'cfg.agent_use_planning.label', description: 'cfg.agent_use_planning.desc', type: 'boolean' }, + { key: 'agent.auto_approve_tools', label: 'cfg.agent_auto_approve.label', description: 'cfg.agent_auto_approve.desc', type: 'boolean' }, + { key: 'agent.default_timezone', label: 'cfg.agent_timezone.label', description: 'cfg.agent_timezone.desc', type: 'text' }, + { key: 'agent.session_idle_timeout_secs', label: 'cfg.agent_session_idle.label', description: 'cfg.agent_session_idle.desc', type: 'number' }, + { key: 'agent.stuck_threshold_secs', label: 'cfg.agent_stuck_threshold.label', description: 'cfg.agent_stuck_threshold.desc', type: 'number' }, + { key: 'agent.max_repair_attempts', label: 'cfg.agent_max_repair.label', description: 'cfg.agent_max_repair.desc', type: 'number' }, + { key: 'agent.max_cost_per_day_cents', label: 'cfg.agent_max_cost.label', description: 'cfg.agent_max_cost.desc', type: 'number', min: 0 }, + { key: 'agent.max_actions_per_hour', label: 'cfg.agent_max_actions.label', description: 'cfg.agent_max_actions.desc', type: 'number', min: 0 }, + { key: 'agent.allow_local_tools', label: 'cfg.agent_allow_local.label', description: 'cfg.agent_allow_local.desc', type: 'boolean' }, + ] + }, + { + group: 'cfg.group.heartbeat', + settings: [ + { key: 'heartbeat.enabled', label: 'cfg.heartbeat_enabled.label', description: 'cfg.heartbeat_enabled.desc', type: 'boolean' }, + { key: 'heartbeat.interval_secs', label: 'cfg.heartbeat_interval.label', description: 'cfg.heartbeat_interval.desc', type: 'number' }, + { key: 'heartbeat.notify_channel', label: 'cfg.heartbeat_notify_channel.label', description: 'cfg.heartbeat_notify_channel.desc', type: 'text' }, + { key: 'heartbeat.notify_user', label: 'cfg.heartbeat_notify_user.label', description: 'cfg.heartbeat_notify_user.desc', type: 'text' }, + { key: 'heartbeat.quiet_hours_start', label: 'cfg.heartbeat_quiet_start.label', description: 'cfg.heartbeat_quiet_start.desc', type: 'number', min: 0, max: 23 }, + { key: 'heartbeat.quiet_hours_end', label: 'cfg.heartbeat_quiet_end.label', description: 'cfg.heartbeat_quiet_end.desc', type: 'number', min: 0, max: 23 }, + { key: 'heartbeat.timezone', label: 'cfg.heartbeat_timezone.label', description: 'cfg.heartbeat_timezone.desc', type: 'text' }, + ] + }, + { + group: 'cfg.group.sandbox', + settings: [ + { key: 'sandbox.enabled', label: 'cfg.sandbox_enabled.label', description: 'cfg.sandbox_enabled.desc', type: 'boolean' }, + { key: 'sandbox.policy', label: 'cfg.sandbox_policy.label', description: 'cfg.sandbox_policy.desc', + type: 'select', options: ['readonly', 'workspace_write', 'full_access'] }, + { key: 'sandbox.timeout_secs', label: 'cfg.sandbox_timeout.label', description: 'cfg.sandbox_timeout.desc', type: 'number', min: 0 }, + { key: 'sandbox.memory_limit_mb', label: 'cfg.sandbox_memory.label', description: 'cfg.sandbox_memory.desc', type: 'number', min: 0 }, + { key: 'sandbox.image', label: 'cfg.sandbox_image.label', description: 'cfg.sandbox_image.desc', type: 'text' }, + ] + }, + { + group: 'cfg.group.routines', + settings: [ + { key: 'routines.max_concurrent', label: 'cfg.routines_max_concurrent.label', description: 'cfg.routines_max_concurrent.desc', type: 'number', min: 0 }, + { key: 'routines.default_cooldown_secs', label: 'cfg.routines_cooldown.label', description: 'cfg.routines_cooldown.desc', type: 'number', min: 0 }, + ] + }, + { + group: 'cfg.group.safety', + settings: [ + { key: 'safety.max_output_length', label: 'cfg.safety_max_output.label', description: 'cfg.safety_max_output.desc', type: 'number', min: 0 }, + { key: 'safety.injection_check_enabled', label: 'cfg.safety_injection_check.label', description: 'cfg.safety_injection_check.desc', type: 'boolean' }, + ] + }, + { + group: 'cfg.group.skills', + settings: [ + { key: 'skills.max_active', label: 'cfg.skills_max_active.label', description: 'cfg.skills_max_active.desc', type: 'number', min: 0 }, + { key: 'skills.max_context_tokens', label: 'cfg.skills_max_tokens.label', description: 'cfg.skills_max_tokens.desc', type: 'number', min: 0 }, + ] + }, + { + group: 'cfg.group.search', + settings: [ + { key: 'search.fusion_strategy', label: 'cfg.search_fusion.label', description: 'cfg.search_fusion.desc', + type: 'select', options: ['rrf', 'weighted'] }, + ] + }, +]; + +function renderSettingsSkeleton(rows) { + var html = '
'; + for (var i = 0; i < (rows || 5); i++) { + var w1 = 100 + Math.floor(Math.random() * 60); + var w2 = 140 + Math.floor(Math.random() * 60); + html += '
'; + } + html += '
'; + return html; +} + +function renderCardsSkeleton(count) { + var html = ''; + for (var i = 0; i < (count || 3); i++) { + html += '
'; + } + return html; +} + +function loadInferenceSettings() { + var container = document.getElementById('settings-inference-content'); + container.innerHTML = renderSettingsSkeleton(6); + + Promise.all([ + apiFetch('/api/settings/export'), + apiFetch('/api/gateway/status').catch(function() { return {}; }), + apiFetch('/v1/models').catch(function() { return { data: [] }; }) + ]).then(function(results) { + var settings = results[0].settings || {}; + var status = results[1]; + var modelsData = results[2]; + var activeValues = { + 'llm_backend': status.llm_backend, + 'selected_model': status.llm_model + }; + // Inject available model IDs as suggestions for the selected_model field + var modelIds = (modelsData.data || []).map(function(m) { return m.id; }).filter(Boolean); + var llmGroup = INFERENCE_SETTINGS[0]; + for (var i = 0; i < llmGroup.settings.length; i++) { + if (llmGroup.settings[i].key === 'selected_model') { + llmGroup.settings[i].suggestions = modelIds; + break; + } + } + container.innerHTML = ''; + renderStructuredSettingsInto(container, INFERENCE_SETTINGS, settings, activeValues); + }).catch(function(err) { + container.innerHTML = '
' + I18n.t('common.loadFailed') + ': ' + + escapeHtml(err.message) + '
'; + }); +} + +function loadAgentSettings() { + loadStructuredSettings('settings-agent-content', AGENT_SETTINGS); +} + +function loadStructuredSettings(containerId, settingsDefs) { + var container = document.getElementById(containerId); + container.innerHTML = renderSettingsSkeleton(8); + + apiFetch('/api/settings/export').then(function(data) { + var settings = data.settings || {}; + container.innerHTML = ''; + renderStructuredSettingsInto(container, settingsDefs, settings, {}); + }).catch(function(err) { + container.innerHTML = '
' + I18n.t('common.loadFailed') + ': ' + + escapeHtml(err.message) + '
'; + }); +} + +function renderStructuredSettingsInto(container, settingsDefs, settings, activeValues) { + for (var gi = 0; gi < settingsDefs.length; gi++) { + var groupDef = settingsDefs[gi]; + var group = document.createElement('div'); + group.className = 'settings-group'; + + var title = document.createElement('div'); + title.className = 'settings-group-title'; + title.textContent = I18n.t(groupDef.group); + group.appendChild(title); + + var rows = []; + for (var si = 0; si < groupDef.settings.length; si++) { + var def = groupDef.settings[si]; + var activeVal = activeValues ? activeValues[def.key] : undefined; + var row = renderStructuredSettingsRow(def, settings[def.key], activeVal); + if (def.showWhen) { + row.setAttribute('data-show-when-key', def.showWhen.key); + row.setAttribute('data-show-when-value', def.showWhen.value); + var currentVal = settings[def.showWhen.key]; + if (currentVal === def.showWhen.value) { + row.classList.remove('hidden'); + } else { + row.classList.add('hidden'); + } + } + rows.push(row); + group.appendChild(row); + } + + container.appendChild(group); + + // Wire up showWhen reactivity for select fields in this group + (function(groupRows, allSettings) { + for (var ri = 0; ri < groupRows.length; ri++) { + var sel = groupRows[ri].querySelector('.settings-select'); + if (sel) { + sel.addEventListener('change', function() { + var changedKey = this.getAttribute('data-setting-key'); + var changedVal = this.value; + for (var rj = 0; rj < groupRows.length; rj++) { + var whenKey = groupRows[rj].getAttribute('data-show-when-key'); + var whenVal = groupRows[rj].getAttribute('data-show-when-value'); + if (whenKey === changedKey) { + if (changedVal === whenVal) { + groupRows[rj].classList.remove('hidden'); + } else { + groupRows[rj].classList.add('hidden'); + } + } + } + }); + } + } + })(rows, settings); + } + + if (container.children.length === 0) { + container.innerHTML = '
' + I18n.t('settings.noSettings') + '
'; + } +} + +function renderStructuredSettingsRow(def, value, activeValue) { + var row = document.createElement('div'); + row.className = 'settings-row'; + + var labelWrap = document.createElement('div'); + labelWrap.className = 'settings-label-wrap'; + + var label = document.createElement('div'); + label.className = 'settings-label'; + label.textContent = I18n.t(def.label); + labelWrap.appendChild(label); + + if (def.description) { + var desc = document.createElement('div'); + desc.className = 'settings-description'; + desc.textContent = I18n.t(def.description); + labelWrap.appendChild(desc); + } + + row.appendChild(labelWrap); + + var inputWrap = document.createElement('div'); + inputWrap.style.display = 'flex'; + inputWrap.style.alignItems = 'center'; + inputWrap.style.gap = '8px'; + + var ariaLabel = I18n.t(def.label) + (def.description ? '. ' + I18n.t(def.description) : ''); + var placeholderText = activeValue ? I18n.t('settings.envValue', { value: activeValue }) : (def.placeholder || I18n.t('settings.envDefault')); + + if (def.type === 'boolean') { + var boolSel = document.createElement('select'); + boolSel.className = 'settings-select'; + boolSel.setAttribute('data-setting-key', def.key); + boolSel.setAttribute('aria-label', ariaLabel); + var boolDefault = document.createElement('option'); + boolDefault.value = ''; + boolDefault.textContent = activeValue !== undefined && activeValue !== null + ? '\u2014 ' + I18n.t('settings.envValue', { value: String(activeValue) }) + ' \u2014' + : '\u2014 ' + I18n.t('settings.useEnvDefault') + ' \u2014'; + if (value === null || value === undefined) boolDefault.selected = true; + boolSel.appendChild(boolDefault); + var boolOn = document.createElement('option'); + boolOn.value = 'true'; + boolOn.textContent = I18n.t('settings.on'); + if (value === true) boolOn.selected = true; + boolSel.appendChild(boolOn); + var boolOff = document.createElement('option'); + boolOff.value = 'false'; + boolOff.textContent = I18n.t('settings.off'); + if (value === false) boolOff.selected = true; + boolSel.appendChild(boolOff); + boolSel.addEventListener('change', (function(k, el) { + return function() { + if (el.value === '') saveSetting(k, null); + else saveSetting(k, el.value === 'true'); + }; + })(def.key, boolSel)); + inputWrap.appendChild(boolSel); + } else if (def.type === 'select' && def.options) { + var sel = document.createElement('select'); + sel.className = 'settings-select'; + sel.setAttribute('data-setting-key', def.key); + sel.setAttribute('aria-label', ariaLabel); + var emptyOpt = document.createElement('option'); + emptyOpt.value = ''; + emptyOpt.textContent = activeValue ? '\u2014 ' + I18n.t('settings.envValue', { value: activeValue }) + ' \u2014' : '\u2014 ' + I18n.t('settings.useEnvDefault') + ' \u2014'; + if (!value && value !== false && value !== 0) emptyOpt.selected = true; + sel.appendChild(emptyOpt); + for (var oi = 0; oi < def.options.length; oi++) { + var opt = document.createElement('option'); + opt.value = def.options[oi]; + opt.textContent = def.options[oi]; + if (String(value) === def.options[oi]) opt.selected = true; + sel.appendChild(opt); + } + sel.addEventListener('change', (function(k, el) { + return function() { saveSetting(k, el.value === '' ? null : el.value); }; + })(def.key, sel)); + inputWrap.appendChild(sel); + } else if (def.type === 'number') { + var numInp = document.createElement('input'); + numInp.type = 'number'; + numInp.className = 'settings-input'; + numInp.setAttribute('aria-label', ariaLabel); + numInp.value = (value === null || value === undefined) ? '' : value; + if (!value && value !== 0) numInp.placeholder = placeholderText; + if (def.min !== undefined) numInp.min = def.min; + if (def.max !== undefined) numInp.max = def.max; + numInp.addEventListener('change', (function(k, el) { + return function() { saveSetting(k, el.value === '' ? null : parseFloat(el.value)); }; + })(def.key, numInp)); + inputWrap.appendChild(numInp); + } else { + var textInp = document.createElement('input'); + textInp.type = 'text'; + textInp.className = 'settings-input'; + textInp.setAttribute('aria-label', ariaLabel); + textInp.value = (value === null || value === undefined) ? '' : String(value); + if (!value) textInp.placeholder = placeholderText; + // Attach datalist for autocomplete suggestions (e.g., model list) + if (def.suggestions && def.suggestions.length > 0) { + var dlId = 'dl-' + def.key.replace(/\./g, '-'); + var dl = document.createElement('datalist'); + dl.id = dlId; + for (var di = 0; di < def.suggestions.length; di++) { + var dlOpt = document.createElement('option'); + dlOpt.value = def.suggestions[di]; + dl.appendChild(dlOpt); + } + textInp.setAttribute('list', dlId); + inputWrap.appendChild(dl); + } + textInp.addEventListener('change', (function(k, el) { + return function() { saveSetting(k, el.value === '' ? null : el.value); }; + })(def.key, textInp)); + inputWrap.appendChild(textInp); + } + + var saved = document.createElement('span'); + saved.className = 'settings-saved-indicator'; + saved.textContent = '\u2713 ' + I18n.t('settings.saved'); + saved.setAttribute('data-key', def.key); + saved.setAttribute('role', 'status'); + saved.setAttribute('aria-live', 'polite'); + inputWrap.appendChild(saved); + + row.appendChild(inputWrap); + return row; +} + +var RESTART_REQUIRED_KEYS = ['llm_backend', 'selected_model', 'ollama_base_url', 'openai_compatible_base_url', + 'bedrock_region', 'bedrock_cross_region', 'bedrock_profile', 'embeddings.enabled', 'embeddings.provider', 'embeddings.model', + 'agent.auto_approve_tools', 'tunnel.provider', 'tunnel.public_url', 'gateway.rate_limit', 'gateway.max_connections']; + +var _settingsSavedTimers = {}; + +function saveSetting(key, value) { + var method = (value === null || value === undefined) ? 'DELETE' : 'PUT'; + var opts = { method: method }; + if (method === 'PUT') opts.body = { value: value }; + apiFetch('/api/settings/' + encodeURIComponent(key), opts).then(function() { + var indicator = document.querySelector('.settings-saved-indicator[data-key="' + key + '"]'); + if (indicator) { + if (_settingsSavedTimers[key]) clearTimeout(_settingsSavedTimers[key]); + indicator.classList.add('visible'); + _settingsSavedTimers[key] = setTimeout(function() { indicator.classList.remove('visible'); }, 2000); + } + // Show restart banner for inference settings + if (RESTART_REQUIRED_KEYS.indexOf(key) !== -1) { + showRestartBanner(); + } + }).catch(function(err) { + showToast('Failed to save ' + key + ': ' + err.message, 'error'); + }); +} + +function showRestartBanner() { + var container = document.querySelector('.settings-content'); + if (!container || container.querySelector('.restart-banner')) return; + var banner = document.createElement('div'); + banner.className = 'restart-banner'; + banner.setAttribute('role', 'alert'); + var textSpan = document.createElement('span'); + textSpan.className = 'restart-banner-text'; + textSpan.textContent = '\u26A0\uFE0F ' + I18n.t('settings.restartRequired'); + banner.appendChild(textSpan); + var restartBtn = document.createElement('button'); + restartBtn.className = 'restart-banner-btn'; + restartBtn.textContent = I18n.t('settings.restartNow'); + restartBtn.addEventListener('click', function() { triggerRestart(); }); + banner.appendChild(restartBtn); + container.insertBefore(banner, container.firstChild); +} + +function loadMcpServers() { + var mcpList = document.getElementById('mcp-servers-list'); + mcpList.innerHTML = renderCardsSkeleton(2); + + Promise.all([ + apiFetch('/api/extensions').catch(function() { return { extensions: [] }; }), + apiFetch('/api/extensions/registry').catch(function() { return { entries: [] }; }), + ]).then(function(results) { + var extData = results[0]; + var registryData = results[1]; + var mcpEntries = (registryData.entries || []).filter(function(e) { return e.kind === 'mcp_server'; }); + var installedMcp = (extData.extensions || []).filter(function(e) { return e.kind === 'mcp_server'; }); + + mcpList.innerHTML = ''; + var renderedNames = {}; + + // Registry entries (cross-referenced with installed) + for (var i = 0; i < mcpEntries.length; i++) { + renderedNames[mcpEntries[i].name] = true; + var installedExt = installedMcp.find(function(e) { return e.name === mcpEntries[i].name; }); + mcpList.appendChild(renderMcpServerCard(mcpEntries[i], installedExt)); + } + + // Custom installed MCP servers not in registry + for (var j = 0; j < installedMcp.length; j++) { + if (!renderedNames[installedMcp[j].name]) { + mcpList.appendChild(renderExtensionCard(installedMcp[j])); + } + } + + if (mcpList.children.length === 0) { + mcpList.innerHTML = '
' + I18n.t('mcp.noServers') + '
'; + } + }).catch(function(err) { + mcpList.innerHTML = '
' + I18n.t('common.loadFailed') + ': ' + + escapeHtml(err.message) + '
'; + }); +} + +function loadChannelsStatus() { + var container = document.getElementById('settings-channels-content'); + container.innerHTML = renderCardsSkeleton(4); + + Promise.all([ + apiFetch('/api/gateway/status').catch(function() { return {}; }), + apiFetch('/api/extensions').catch(function() { return { extensions: [] }; }), + apiFetch('/api/extensions/registry').catch(function() { return { entries: [] }; }), + ]).then(function(results) { + var status = results[0]; + var extensions = results[1].extensions || []; + var registry = results[2].entries || []; + + container.innerHTML = ''; + + // Built-in Channels section + var builtinSection = document.createElement('div'); + builtinSection.className = 'extensions-section'; + var builtinTitle = document.createElement('h3'); + builtinTitle.textContent = I18n.t('channels.builtin'); + builtinSection.appendChild(builtinTitle); + var builtinList = document.createElement('div'); + builtinList.className = 'extensions-list'; + + builtinList.appendChild(renderBuiltinChannelCard( + I18n.t('channels.webGateway'), + I18n.t('channels.webGatewayDesc'), + true, + 'SSE: ' + (status.sse_connections || 0) + ' \u00B7 WS: ' + (status.ws_connections || 0) + )); + + var enabledChannels = status.enabled_channels || []; + + builtinList.appendChild(renderBuiltinChannelCard( + I18n.t('channels.httpWebhook'), + I18n.t('channels.httpWebhookDesc'), + enabledChannels.indexOf('http') !== -1, + I18n.t('channels.configureVia', { env: 'ENABLE_HTTP=true' }) + )); + + builtinList.appendChild(renderBuiltinChannelCard( + I18n.t('channels.cli'), + I18n.t('channels.cliDesc'), + enabledChannels.indexOf('cli') !== -1, + I18n.t('channels.runWith', { cmd: 'ironclaw run --cli' }) + )); + + builtinList.appendChild(renderBuiltinChannelCard( + I18n.t('channels.repl'), + I18n.t('channels.replDesc'), + enabledChannels.indexOf('repl') !== -1, + I18n.t('channels.runWith', { cmd: 'ironclaw run --repl' }) + )); + + builtinSection.appendChild(builtinList); + container.appendChild(builtinSection); + + // Messaging Channels section — use extension cards with full stepper/pairing UI + var channelEntries = registry.filter(function(e) { + return e.kind === 'wasm_channel' || e.kind === 'channel'; + }); + var installedChannels = extensions.filter(function(e) { + return e.kind === 'wasm_channel'; + }); + + if (channelEntries.length > 0 || installedChannels.length > 0) { + var messagingSection = document.createElement('div'); + messagingSection.className = 'extensions-section'; + var messagingTitle = document.createElement('h3'); + messagingTitle.textContent = I18n.t('channels.messaging'); + messagingSection.appendChild(messagingTitle); + var messagingList = document.createElement('div'); + messagingList.className = 'extensions-list'; + + var renderedNames = {}; + + // Registry entries: show full ext card if installed, available card if not + for (var i = 0; i < channelEntries.length; i++) { + var entry = channelEntries[i]; + renderedNames[entry.name] = true; + var installed = null; + for (var k = 0; k < installedChannels.length; k++) { + if (installedChannels[k].name === entry.name) { installed = installedChannels[k]; break; } + } + if (installed) { + messagingList.appendChild(renderExtensionCard(installed)); + } else { + messagingList.appendChild(renderAvailableExtensionCard(entry)); + } + } + + // Installed channels not in registry (custom installs) + for (var j = 0; j < installedChannels.length; j++) { + if (!renderedNames[installedChannels[j].name]) { + messagingList.appendChild(renderExtensionCard(installedChannels[j])); + } + } + + messagingSection.appendChild(messagingList); + container.appendChild(messagingSection); + } + }); +} + +function renderBuiltinChannelCard(name, description, active, detail) { + var card = document.createElement('div'); + card.className = 'ext-card ' + (active ? 'state-active' : 'state-inactive'); + + var header = document.createElement('div'); + header.className = 'ext-header'; + + var nameEl = document.createElement('span'); + nameEl.className = 'ext-name'; + nameEl.textContent = name; + header.appendChild(nameEl); + + var kindEl = document.createElement('span'); + kindEl.className = 'ext-kind kind-builtin'; + kindEl.textContent = I18n.t('ext.builtin'); + header.appendChild(kindEl); + + var statusDot = document.createElement('span'); + statusDot.className = 'ext-auth-dot ' + (active ? 'authed' : 'unauthed'); + statusDot.title = active ? I18n.t('ext.active') : I18n.t('ext.inactive'); + header.appendChild(statusDot); + + card.appendChild(header); + + var desc = document.createElement('div'); + desc.className = 'ext-desc'; + desc.textContent = description; + card.appendChild(desc); + + if (detail) { + var detailEl = document.createElement('div'); + detailEl.className = 'ext-url'; + detailEl.textContent = detail; + card.appendChild(detailEl); + } + + var actions = document.createElement('div'); + actions.className = 'ext-actions'; + var label = document.createElement('span'); + label.className = 'ext-active-label'; + label.textContent = active ? I18n.t('ext.active') : I18n.t('ext.inactive'); + actions.appendChild(label); + card.appendChild(actions); + + return card; +} + +// --- Networking Settings --- + +var NETWORKING_SETTINGS = [ + { + group: 'cfg.group.tunnel', + settings: [ + { key: 'tunnel.provider', label: 'cfg.tunnel_provider.label', description: 'cfg.tunnel_provider.desc', + type: 'select', options: ['none', 'cloudflare', 'ngrok', 'tailscale', 'custom'] }, + { key: 'tunnel.public_url', label: 'cfg.tunnel_public_url.label', description: 'cfg.tunnel_public_url.desc', type: 'text' }, + ] + }, + { + group: 'cfg.group.gateway', + settings: [ + { key: 'gateway.rate_limit', label: 'cfg.gateway_rate_limit.label', description: 'cfg.gateway_rate_limit.desc', type: 'number', min: 0 }, + { key: 'gateway.max_connections', label: 'cfg.gateway_max_connections.label', description: 'cfg.gateway_max_connections.desc', type: 'number', min: 0 }, + ] + }, +]; + +function loadNetworkingSettings() { + var container = document.getElementById('settings-networking-content'); + container.innerHTML = renderSettingsSkeleton(4); + + apiFetch('/api/settings/export').then(function(data) { + var settings = data.settings || {}; + container.innerHTML = ''; + renderStructuredSettingsInto(container, NETWORKING_SETTINGS, settings, {}); + }).catch(function(err) { + container.innerHTML = '
' + I18n.t('common.loadFailed') + ': ' + + escapeHtml(err.message) + '
'; + }); +} + // --- Toasts --- function showToast(message, type) { @@ -4396,6 +5082,8 @@ document.getElementById('wasm-install-btn').addEventListener('click', () => inst document.getElementById('mcp-add-btn').addEventListener('click', () => addMcpServer()); document.getElementById('skill-search-btn').addEventListener('click', () => searchClawHub()); document.getElementById('skill-install-btn').addEventListener('click', () => installSkillFromForm()); +document.getElementById('settings-export-btn').addEventListener('click', () => exportSettings()); +document.getElementById('settings-import-btn').addEventListener('click', () => importSettings()); // --- Delegated Event Handlers (for dynamically generated HTML) --- @@ -4464,3 +5152,125 @@ document.addEventListener('click', function(e) { document.getElementById('language-btn').addEventListener('click', function() { if (typeof toggleLanguageMenu === 'function') toggleLanguageMenu(); }); + +// --- Confirmation Modal --- + +var _confirmModalCallback = null; + +function showConfirmModal(title, message, onConfirm, confirmLabel, confirmClass) { + var modal = document.getElementById('confirm-modal'); + document.getElementById('confirm-modal-title').textContent = title; + document.getElementById('confirm-modal-message').textContent = message || ''; + document.getElementById('confirm-modal-message').style.display = message ? '' : 'none'; + var btn = document.getElementById('confirm-modal-btn'); + btn.textContent = confirmLabel || I18n.t('btn.confirm'); + btn.className = confirmClass || 'btn-danger'; + _confirmModalCallback = onConfirm; + modal.style.display = 'flex'; + btn.focus(); +} + +function closeConfirmModal() { + document.getElementById('confirm-modal').style.display = 'none'; + _confirmModalCallback = null; +} + +document.getElementById('confirm-modal-btn').addEventListener('click', function() { + if (_confirmModalCallback) _confirmModalCallback(); + closeConfirmModal(); +}); +document.getElementById('confirm-modal-cancel-btn').addEventListener('click', closeConfirmModal); +document.getElementById('confirm-modal').addEventListener('click', function(e) { + if (e.target === this) closeConfirmModal(); +}); +document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && document.getElementById('confirm-modal').style.display === 'flex') { + closeConfirmModal(); + } +}); + +// --- Settings Import/Export --- + +function exportSettings() { + apiFetch('/api/settings/export').then(function(data) { + var blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); + var url = URL.createObjectURL(blob); + var a = document.createElement('a'); + a.href = url; + a.download = 'ironclaw-settings.json'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + showToast(I18n.t('settings.exportSuccess'), 'success'); + }).catch(function(err) { + showToast(I18n.t('settings.exportFailed', { message: err.message }), 'error'); + }); +} + +function importSettings() { + var input = document.createElement('input'); + input.type = 'file'; + input.accept = '.json,application/json'; + input.addEventListener('change', function() { + if (!input.files || !input.files[0]) return; + var reader = new FileReader(); + reader.onload = function() { + try { + var data = JSON.parse(reader.result); + apiFetch('/api/settings/import', { + method: 'POST', + body: data, + }).then(function() { + showToast(I18n.t('settings.importSuccess'), 'success'); + loadSettingsSubtab(currentSettingsSubtab); + }).catch(function(err) { + showToast(I18n.t('settings.importFailed', { message: err.message }), 'error'); + }); + } catch (e) { + showToast(I18n.t('settings.importFailed', { message: e.message }), 'error'); + } + }; + reader.readAsText(input.files[0]); + }); + input.click(); +} + +// --- Settings Search --- + +document.getElementById('settings-search-input').addEventListener('input', function() { + var query = this.value.toLowerCase(); + var activePanel = document.querySelector('.settings-subpanel.active'); + if (!activePanel) return; + var rows = activePanel.querySelectorAll('.settings-row'); + if (rows.length === 0) return; + var visibleCount = 0; + rows.forEach(function(row) { + var text = row.textContent.toLowerCase(); + if (query === '' || text.indexOf(query) !== -1) { + row.classList.remove('search-hidden'); + if (!row.classList.contains('hidden')) visibleCount++; + } else { + row.classList.add('search-hidden'); + } + }); + // Show/hide group titles based on visible children + var groups = activePanel.querySelectorAll('.settings-group'); + groups.forEach(function(group) { + var visibleRows = group.querySelectorAll('.settings-row:not(.search-hidden):not(.hidden)'); + if (visibleRows.length === 0 && query !== '') { + group.style.display = 'none'; + } else { + group.style.display = ''; + } + }); + // Show/hide empty state + var existingEmpty = activePanel.querySelector('.settings-search-empty'); + if (existingEmpty) existingEmpty.remove(); + if (query !== '' && visibleCount === 0) { + var empty = document.createElement('div'); + empty.className = 'settings-search-empty'; + empty.textContent = I18n.t('settings.noMatchingSettings', { query: this.value }); + activePanel.appendChild(empty); + } +}); diff --git a/src/channels/web/static/i18n/en.js b/src/channels/web/static/i18n/en.js index b637f14484..1f06430d75 100644 --- a/src/channels/web/static/i18n/en.js +++ b/src/channels/web/static/i18n/en.js @@ -29,9 +29,15 @@ I18n.register('en', { 'tab.memory': 'Memory', 'tab.jobs': 'Jobs', 'tab.routines': 'Routines', + 'tab.settings': 'Settings', 'tab.extensions': 'Extensions', 'tab.skills': 'Skills', 'tab.logs': 'Logs', + 'settings.inference': 'Inference', + 'settings.agent': 'Agent', + 'settings.channels': 'Channels', + 'settings.networking': 'Networking', + 'settings.mcp': 'MCP', // Status 'status.connected': 'Connected', @@ -131,10 +137,10 @@ I18n.register('en', { // Extensions Tab 'extensions.installed': 'Installed Extensions', - 'extensions.available': 'Available WASM Extensions', - 'extensions.installWasm': 'Install WASM Extension', + 'extensions.available': 'Available Extensions', + 'extensions.installWasm': 'Install Extension', 'extensions.noInstalled': 'No extensions installed', - 'extensions.noAvailable': 'No additional WASM extensions available', + 'extensions.noAvailable': 'No additional extensions available', 'extensions.loading': 'Loading...', 'extensions.install': 'Install', 'extensions.installing': 'Installing...', @@ -156,13 +162,8 @@ I18n.register('en', { 'mcp.addCustom': 'Add Custom MCP Server', 'mcp.add': 'Add', 'mcp.addedSuccess': 'Added MCP server {name}', - - // Registered Tools - 'tools.registered': 'Registered Tools', - 'tools.name': 'Name', - 'tools.description': 'Description', - 'tools.empty': 'No tools registered', - + + // Skills Tab 'skills.installed': 'Installed Skills', 'skills.noInstalled': 'No skills installed', @@ -302,6 +303,7 @@ I18n.register('en', { // Common 'common.loading': 'Loading...', + 'common.loadFailed': 'Failed to load', 'common.noData': 'No data', 'common.search': 'Search', 'common.add': 'Add', @@ -328,6 +330,8 @@ I18n.register('en', { // Extensions 'ext.active': 'Active', + 'ext.inactive': 'Inactive', + 'ext.builtin': 'Built-in', 'ext.remove': 'Remove', 'ext.install': 'Install', 'ext.installing': 'Installing...', @@ -348,4 +352,160 @@ I18n.register('en', { 'config.autoGenerate': 'Auto-generated if empty', 'config.save': 'Save', 'config.cancel': 'Cancel', + + // Settings toolbar + 'settings.export': 'Export', + 'settings.import': 'Import', + 'settings.searchPlaceholder': 'Search settings...', + 'settings.exportSuccess': 'Settings exported', + 'settings.exportFailed': 'Export failed: {message}', + 'settings.importSuccess': 'Settings imported successfully', + 'settings.importFailed': 'Import failed: {message}', + 'settings.restartRequired': 'Restart required for changes to take effect.', + 'settings.restartNow': 'Restart Now', + 'settings.noMatchingSettings': 'No settings matching "{query}"', + 'settings.noSettings': 'No settings found', + 'settings.saved': 'Saved', + 'settings.on': 'On', + 'settings.off': 'Off', + 'settings.envValue': 'env: {value}', + 'settings.envDefault': 'env default', + 'settings.useEnvDefault': 'use env default', + + // Settings groups + 'cfg.group.llm': 'LLM Provider', + 'cfg.group.embeddings': 'Embeddings', + 'cfg.group.agent': 'Agent', + 'cfg.group.heartbeat': 'Heartbeat', + 'cfg.group.sandbox': 'Sandbox', + 'cfg.group.routines': 'Routines', + 'cfg.group.safety': 'Safety', + 'cfg.group.skills': 'Skills', + 'cfg.group.search': 'Search', + 'cfg.group.tunnel': 'Tunnel', + 'cfg.group.gateway': 'Gateway', + + // Inference settings + 'cfg.llm_backend.label': 'Backend', + 'cfg.llm_backend.desc': 'LLM inference provider', + 'cfg.selected_model.label': 'Model', + 'cfg.selected_model.desc': 'Model name or ID for the selected backend', + 'cfg.ollama_base_url.label': 'Ollama URL', + 'cfg.ollama_base_url.desc': 'Base URL for Ollama API', + 'cfg.openai_compatible_base_url.label': 'OpenAI-compatible URL', + 'cfg.openai_compatible_base_url.desc': 'Base URL for OpenAI-compatible API', + 'cfg.bedrock_region.label': 'Bedrock Region', + 'cfg.bedrock_region.desc': 'AWS region for Bedrock', + 'cfg.bedrock_cross_region.label': 'Cross-Region', + 'cfg.bedrock_cross_region.desc': 'Enable cross-region inference', + 'cfg.bedrock_profile.label': 'AWS Profile', + 'cfg.bedrock_profile.desc': 'AWS profile for Bedrock auth', + 'cfg.embeddings_enabled.label': 'Enabled', + 'cfg.embeddings_enabled.desc': 'Enable vector embeddings for memory search', + 'cfg.embeddings_provider.label': 'Provider', + 'cfg.embeddings_provider.desc': 'Embeddings API provider', + 'cfg.embeddings_model.label': 'Model', + 'cfg.embeddings_model.desc': 'Embedding model name', + + // Agent settings + 'cfg.agent_name.label': 'Name', + 'cfg.agent_name.desc': 'Agent display name', + 'cfg.agent_max_parallel_jobs.label': 'Max Parallel Jobs', + 'cfg.agent_max_parallel_jobs.desc': 'Maximum concurrent background jobs', + 'cfg.agent_job_timeout.label': 'Job Timeout', + 'cfg.agent_job_timeout.desc': 'Max duration per job in seconds', + 'cfg.agent_max_tool_iterations.label': 'Max Tool Iterations', + 'cfg.agent_max_tool_iterations.desc': 'Max tool calls per turn', + 'cfg.agent_use_planning.label': 'Planning', + 'cfg.agent_use_planning.desc': 'Enable multi-step planning before execution', + 'cfg.agent_auto_approve.label': 'Auto-approve Tools', + 'cfg.agent_auto_approve.desc': 'Skip manual approval for tool calls', + 'cfg.agent_timezone.label': 'Timezone', + 'cfg.agent_timezone.desc': 'Default timezone (IANA)', + 'cfg.agent_session_idle.label': 'Session Idle Timeout', + 'cfg.agent_session_idle.desc': 'Seconds before idle session expires', + 'cfg.agent_stuck_threshold.label': 'Stuck Threshold', + 'cfg.agent_stuck_threshold.desc': 'Seconds before a job is considered stuck', + 'cfg.agent_max_repair.label': 'Max Repair Attempts', + 'cfg.agent_max_repair.desc': 'Auto-recovery attempts for stuck jobs', + 'cfg.agent_max_cost.label': 'Max Daily Cost', + 'cfg.agent_max_cost.desc': 'Daily LLM spend cap in cents (0 = unlimited)', + 'cfg.agent_max_actions.label': 'Max Actions/Hour', + 'cfg.agent_max_actions.desc': 'Hourly tool call rate limit (0 = unlimited)', + 'cfg.agent_allow_local.label': 'Allow Local Tools', + 'cfg.agent_allow_local.desc': 'Enable local filesystem tool execution', + + // Heartbeat settings + 'cfg.heartbeat_enabled.label': 'Enabled', + 'cfg.heartbeat_enabled.desc': 'Run periodic background checks', + 'cfg.heartbeat_interval.label': 'Interval', + 'cfg.heartbeat_interval.desc': 'Seconds between heartbeats (default: 1800)', + 'cfg.heartbeat_notify_channel.label': 'Notify Channel', + 'cfg.heartbeat_notify_channel.desc': 'Channel to send heartbeat findings to', + 'cfg.heartbeat_notify_user.label': 'Notify User', + 'cfg.heartbeat_notify_user.desc': 'User ID to notify', + 'cfg.heartbeat_quiet_start.label': 'Quiet Hours Start', + 'cfg.heartbeat_quiet_start.desc': 'Hour (0-23) to stop heartbeats', + 'cfg.heartbeat_quiet_end.label': 'Quiet Hours End', + 'cfg.heartbeat_quiet_end.desc': 'Hour (0-23) to resume heartbeats', + 'cfg.heartbeat_timezone.label': 'Timezone', + 'cfg.heartbeat_timezone.desc': 'Timezone for quiet hours (IANA)', + + // Sandbox settings + 'cfg.sandbox_enabled.label': 'Enabled', + 'cfg.sandbox_enabled.desc': 'Enable Docker sandbox for background jobs', + 'cfg.sandbox_policy.label': 'Policy', + 'cfg.sandbox_policy.desc': 'Sandbox security policy', + 'cfg.sandbox_timeout.label': 'Timeout', + 'cfg.sandbox_timeout.desc': 'Max job duration in seconds', + 'cfg.sandbox_memory.label': 'Memory Limit', + 'cfg.sandbox_memory.desc': 'Container memory limit (MB)', + 'cfg.sandbox_image.label': 'Docker Image', + 'cfg.sandbox_image.desc': 'Container image for sandbox jobs', + + // Routines settings + 'cfg.routines_max_concurrent.label': 'Max Concurrent', + 'cfg.routines_max_concurrent.desc': 'Maximum routines running simultaneously', + 'cfg.routines_cooldown.label': 'Default Cooldown', + 'cfg.routines_cooldown.desc': 'Minimum seconds between routine fires', + + // Safety settings + 'cfg.safety_max_output.label': 'Max Output Length', + 'cfg.safety_max_output.desc': 'Maximum output tokens per response', + 'cfg.safety_injection_check.label': 'Injection Check', + 'cfg.safety_injection_check.desc': 'Enable prompt injection detection', + + // Skills settings + 'cfg.skills_max_active.label': 'Max Active Skills', + 'cfg.skills_max_active.desc': 'Maximum skills active simultaneously', + 'cfg.skills_max_tokens.label': 'Max Context Tokens', + 'cfg.skills_max_tokens.desc': 'Token budget for skill prompts', + + // Search settings + 'cfg.search_fusion.label': 'Fusion Strategy', + 'cfg.search_fusion.desc': 'Hybrid search ranking method', + + // Networking settings + 'cfg.tunnel_provider.label': 'Provider', + 'cfg.tunnel_provider.desc': 'Public URL tunnel provider', + 'cfg.tunnel_public_url.label': 'Public URL', + 'cfg.tunnel_public_url.desc': 'Static public URL (if not using tunnel provider)', + 'cfg.gateway_rate_limit.label': 'Rate Limit', + 'cfg.gateway_rate_limit.desc': 'Max chat messages per minute', + 'cfg.gateway_max_connections.label': 'Max Connections', + 'cfg.gateway_max_connections.desc': 'Max simultaneous SSE/WS connections', + + // Channels subtab + 'channels.builtin': 'Built-in Channels', + 'channels.messaging': 'Messaging Channels', + 'channels.webGateway': 'Web Gateway', + 'channels.webGatewayDesc': 'Browser-based chat interface', + 'channels.httpWebhook': 'HTTP Webhook', + 'channels.httpWebhookDesc': 'Incoming webhook endpoint for external integrations', + 'channels.cli': 'CLI', + 'channels.cliDesc': 'Terminal UI with Ratatui', + 'channels.repl': 'REPL', + 'channels.replDesc': 'Simple read-eval-print loop for testing', + 'channels.configureVia': 'Configure via {env}', + 'channels.runWith': 'Run with: {cmd}', }); diff --git a/src/channels/web/static/i18n/zh-CN.js b/src/channels/web/static/i18n/zh-CN.js index 8a7fd520c4..a38554b048 100644 --- a/src/channels/web/static/i18n/zh-CN.js +++ b/src/channels/web/static/i18n/zh-CN.js @@ -29,9 +29,15 @@ I18n.register('zh-CN', { 'tab.memory': '记忆', 'tab.jobs': '任务', 'tab.routines': '定时任务', + 'tab.settings': '设置', 'tab.extensions': '扩展', 'tab.skills': '技能', 'tab.logs': '日志', + 'settings.inference': '推理', + 'settings.agent': '代理', + 'settings.channels': '频道', + 'settings.networking': '网络', + 'settings.mcp': 'MCP', // 状态 'status.connected': '已连接', @@ -131,10 +137,10 @@ I18n.register('zh-CN', { // 扩展标签页 'extensions.installed': '已安装扩展', - 'extensions.available': '可用 WASM 扩展', - 'extensions.installWasm': '安装 WASM 扩展', + 'extensions.available': '可用扩展', + 'extensions.installWasm': '安装扩展', 'extensions.noInstalled': '没有安装扩展', - 'extensions.noAvailable': '没有其他可用的 WASM 扩展', + 'extensions.noAvailable': '没有其他可用扩展', 'extensions.loading': '加载中...', 'extensions.install': '安装', 'extensions.installing': '安装中...', @@ -156,13 +162,8 @@ I18n.register('zh-CN', { 'mcp.addCustom': '添加自定义 MCP 服务器', 'mcp.add': '添加', 'mcp.addedSuccess': '已添加 MCP 服务器 {name}', - - // 注册工具 - 'tools.registered': '注册工具', - 'tools.name': '名称', - 'tools.description': '描述', - 'tools.empty': '没有注册工具', - + + // 技能标签页 'skills.installed': '已安装技能', 'skills.noInstalled': '没有安装技能', @@ -302,6 +303,7 @@ I18n.register('zh-CN', { // 通用 'common.loading': '加载中...', + 'common.loadFailed': '加载失败', 'common.noData': '暂无数据', 'common.search': '搜索', 'common.add': '添加', @@ -328,6 +330,8 @@ I18n.register('zh-CN', { // 扩展 'ext.active': '已激活', + 'ext.inactive': '未激活', + 'ext.builtin': '内置', 'ext.remove': '移除', 'ext.install': '安装', 'ext.installing': '安装中...', @@ -348,4 +352,160 @@ I18n.register('zh-CN', { 'config.autoGenerate': '如果为空则自动生成', 'config.save': '保存', 'config.cancel': '取消', + + // 设置工具栏 + 'settings.export': '导出', + 'settings.import': '导入', + 'settings.searchPlaceholder': '搜索设置...', + 'settings.exportSuccess': '设置已导出', + 'settings.exportFailed': '导出失败: {message}', + 'settings.importSuccess': '设置导入成功', + 'settings.importFailed': '导入失败: {message}', + 'settings.restartRequired': '需要重启才能使更改生效。', + 'settings.restartNow': '立即重启', + 'settings.noMatchingSettings': '没有匹配 "{query}" 的设置', + 'settings.noSettings': '未找到设置', + 'settings.saved': '已保存', + 'settings.on': '开启', + 'settings.off': '关闭', + 'settings.envValue': '环境变量: {value}', + 'settings.envDefault': '使用环境变量默认值', + 'settings.useEnvDefault': '使用环境变量默认值', + + // 设置分组 + 'cfg.group.llm': 'LLM 提供商', + 'cfg.group.embeddings': '嵌入向量', + 'cfg.group.agent': '代理', + 'cfg.group.heartbeat': '心跳', + 'cfg.group.sandbox': '沙箱', + 'cfg.group.routines': '定时任务', + 'cfg.group.safety': '安全', + 'cfg.group.skills': '技能', + 'cfg.group.search': '搜索', + 'cfg.group.tunnel': '隧道', + 'cfg.group.gateway': '网关', + + // 推理设置 + 'cfg.llm_backend.label': '后端', + 'cfg.llm_backend.desc': 'LLM 推理提供商', + 'cfg.selected_model.label': '模型', + 'cfg.selected_model.desc': '所选后端的模型名称或 ID', + 'cfg.ollama_base_url.label': 'Ollama URL', + 'cfg.ollama_base_url.desc': 'Ollama API 基础 URL', + 'cfg.openai_compatible_base_url.label': 'OpenAI 兼容 URL', + 'cfg.openai_compatible_base_url.desc': 'OpenAI 兼容 API 基础 URL', + 'cfg.bedrock_region.label': 'Bedrock 区域', + 'cfg.bedrock_region.desc': 'Bedrock 的 AWS 区域', + 'cfg.bedrock_cross_region.label': '跨区域', + 'cfg.bedrock_cross_region.desc': '启用跨区域推理', + 'cfg.bedrock_profile.label': 'AWS 配置文件', + 'cfg.bedrock_profile.desc': 'Bedrock 认证的 AWS 配置文件', + 'cfg.embeddings_enabled.label': '启用', + 'cfg.embeddings_enabled.desc': '启用向量嵌入以支持记忆搜索', + 'cfg.embeddings_provider.label': '提供商', + 'cfg.embeddings_provider.desc': '嵌入向量 API 提供商', + 'cfg.embeddings_model.label': '模型', + 'cfg.embeddings_model.desc': '嵌入向量模型名称', + + // 代理设置 + 'cfg.agent_name.label': '名称', + 'cfg.agent_name.desc': '代理显示名称', + 'cfg.agent_max_parallel_jobs.label': '最大并行任务数', + 'cfg.agent_max_parallel_jobs.desc': '最大并发后台任务数', + 'cfg.agent_job_timeout.label': '任务超时', + 'cfg.agent_job_timeout.desc': '每个任务的最大持续时间（秒）', + 'cfg.agent_max_tool_iterations.label': '最大工具迭代次数', + 'cfg.agent_max_tool_iterations.desc': '每轮最大工具调用次数', + 'cfg.agent_use_planning.label': '规划', + 'cfg.agent_use_planning.desc': '执行前启用多步规划', + 'cfg.agent_auto_approve.label': '自动批准工具', + 'cfg.agent_auto_approve.desc': '跳过工具调用的手动审批', + 'cfg.agent_timezone.label': '时区', + 'cfg.agent_timezone.desc': '默认时区（IANA）', + 'cfg.agent_session_idle.label': '会话空闲超时', + 'cfg.agent_session_idle.desc': '空闲会话过期前的秒数', + 'cfg.agent_stuck_threshold.label': '卡住阈值', + 'cfg.agent_stuck_threshold.desc': '任务被认为卡住前的秒数', + 'cfg.agent_max_repair.label': '最大修复尝试次数', + 'cfg.agent_max_repair.desc': '卡住任务的自动恢复尝试次数', + 'cfg.agent_max_cost.label': '每日最大费用', + 'cfg.agent_max_cost.desc': '每日 LLM 支出上限（美分，0 = 无限制）', + 'cfg.agent_max_actions.label': '每小时最大操作数', + 'cfg.agent_max_actions.desc': '每小时工具调用速率限制（0 = 无限制）', + 'cfg.agent_allow_local.label': '允许本地工具', + 'cfg.agent_allow_local.desc': '启用本地文件系统工具执行', + + // 心跳设置 + 'cfg.heartbeat_enabled.label': '启用', + 'cfg.heartbeat_enabled.desc': '运行定期后台检查', + 'cfg.heartbeat_interval.label': '间隔', + 'cfg.heartbeat_interval.desc': '心跳间隔秒数（默认：1800）', + 'cfg.heartbeat_notify_channel.label': '通知频道', + 'cfg.heartbeat_notify_channel.desc': '发送心跳发现的频道', + 'cfg.heartbeat_notify_user.label': '通知用户', + 'cfg.heartbeat_notify_user.desc': '要通知的用户 ID', + 'cfg.heartbeat_quiet_start.label': '静默时段开始', + 'cfg.heartbeat_quiet_start.desc': '停止心跳的小时（0-23）', + 'cfg.heartbeat_quiet_end.label': '静默时段结束', + 'cfg.heartbeat_quiet_end.desc': '恢复心跳的小时（0-23）', + 'cfg.heartbeat_timezone.label': '时区', + 'cfg.heartbeat_timezone.desc': '静默时段的时区（IANA）', + + // 沙箱设置 + 'cfg.sandbox_enabled.label': '启用', + 'cfg.sandbox_enabled.desc': '启用 Docker 沙箱以运行后台任务', + 'cfg.sandbox_policy.label': '策略', + 'cfg.sandbox_policy.desc': '沙箱安全策略', + 'cfg.sandbox_timeout.label': '超时', + 'cfg.sandbox_timeout.desc': '最大任务持续时间（秒）', + 'cfg.sandbox_memory.label': '内存限制', + 'cfg.sandbox_memory.desc': '容器内存限制（MB）', + 'cfg.sandbox_image.label': 'Docker 镜像', + 'cfg.sandbox_image.desc': '沙箱任务的容器镜像', + + // 定时任务设置 + 'cfg.routines_max_concurrent.label': '最大并发数', + 'cfg.routines_max_concurrent.desc': '同时运行的最大定时任务数', + 'cfg.routines_cooldown.label': '默认冷却时间', + 'cfg.routines_cooldown.desc': '定时任务触发间的最小秒数', + + // 安全设置 + 'cfg.safety_max_output.label': '最大输出长度', + 'cfg.safety_max_output.desc': '每次响应的最大输出令牌数', + 'cfg.safety_injection_check.label': '注入检查', + 'cfg.safety_injection_check.desc': '启用提示注入检测', + + // 技能设置 + 'cfg.skills_max_active.label': '最大活跃技能数', + 'cfg.skills_max_active.desc': '同时活跃的最大技能数', + 'cfg.skills_max_tokens.label': '最大上下文令牌数', + 'cfg.skills_max_tokens.desc': '技能提示的令牌预算', + + // 搜索设置 + 'cfg.search_fusion.label': '融合策略', + 'cfg.search_fusion.desc': '混合搜索排名方法', + + // 网络设置 + 'cfg.tunnel_provider.label': '提供商', + 'cfg.tunnel_provider.desc': '公网 URL 隧道提供商', + 'cfg.tunnel_public_url.label': '公网 URL', + 'cfg.tunnel_public_url.desc': '静态公网 URL（不使用隧道提供商时）', + 'cfg.gateway_rate_limit.label': '速率限制', + 'cfg.gateway_rate_limit.desc': '每分钟最大聊天消息数', + 'cfg.gateway_max_connections.label': '最大连接数', + 'cfg.gateway_max_connections.desc': '最大同时 SSE/WS 连接数', + + // 频道子标签 + 'channels.builtin': '内置频道', + 'channels.messaging': '消息频道', + 'channels.webGateway': 'Web 网关', + 'channels.webGatewayDesc': '基于浏览器的聊天界面', + 'channels.httpWebhook': 'HTTP Webhook', + 'channels.httpWebhookDesc': '用于外部集成的传入 webhook 端点', + 'channels.cli': 'CLI', + 'channels.cliDesc': '使用 Ratatui 的终端 UI', + 'channels.repl': 'REPL', + 'channels.replDesc': '用于测试的简单读取-求值-打印循环', + 'channels.configureVia': '通过 {env} 配置', + 'channels.runWith': '运行命令: {cmd}', }); diff --git a/src/channels/web/static/index.html b/src/channels/web/static/index.html index 4e1074d08e..b342cb535e 100644 --- a/src/channels/web/static/index.html +++ b/src/channels/web/static/index.html @@ -95,8 +95,7 @@

Restart IronClaw Instance

- - +
@@ -271,81 +270,129 @@

Restart IronClaw Instance

- -
-
-
-

Installed Extensions

-
-
Loading...
-
+ +
+
+
+ + + + + + +
-
-

Available WASM Extensions

-
-
Loading...
+
+
+
+ +
+ +
-
-
-

Install WASM Extension

-
- - - +
+
+
Loading settings...
+
-
-
-

MCP Servers

-
-
Loading...
+
+
+
Loading settings...
+
-

Add Custom MCP Server

-
- - - +
+
+
Loading channels...
+
-
-
-

Registered Tools

- - - -
NameDescription
- -
-
-
- - -
-
-
-

Search ClawHub

-
- - +
+
+
Loading...
+
-
-
-
-

Installed Skills

-
-
Loading skills...
+
+
+
+

Installed Extensions

+
+
Loading...
+
+
+
+

Available Extensions

+
+
Loading...
+
+
+
+

Install Extension

+
+ + + +
+
+
-
-
-

Install Skill by URL

-
- - - +
+
+
+

MCP Servers

+
+
Loading...
+
+

Add Custom MCP Server

+
+ + + +
+
+
+
+
+
+
+

Search ClawHub

+
+ + +
+
+
+
+

Installed Skills

+
+
Loading skills...
+
+
+
+

Install Skill by URL

+
+ + + +
+
+
+ + +
diff --git a/src/channels/web/static/style.css b/src/channels/web/static/style.css index 0ba5766f1d..da26defb7a 100644 --- a/src/channels/web/static/style.css +++ b/src/channels/web/static/style.css @@ -18,6 +18,12 @@ --radius-lg: 12px; --shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', Consolas, monospace; + --text-muted: #71717a; + --bg-hover: rgba(255, 255, 255, 0.03); + --danger-soft: rgba(230, 76, 76, 0.15); + --warning-soft: rgba(245, 166, 35, 0.15); + --transition-fast: 150ms ease; + --transition-base: 0.2s ease; } * { @@ -332,10 +338,10 @@ body { .restart-loader-content { position: relative; z-index: 10000; - background-color: #1a1a1a; - border: 1px solid #333; + background-color: var(--bg-secondary); + border: 1px solid var(--border); border-radius: 0.75rem; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); width: 100%; max-width: 28rem; margin: 0 1rem; @@ -352,7 +358,7 @@ body { } .restart-title { - color: #e0e0e0; + color: var(--text); font-size: 0.85rem; margin-bottom: 1rem; margin-top: 0; @@ -388,10 +394,10 @@ body { .restart-modal-content { position: relative; z-index: 10000; - background-color: #1a1a1a; - border: 1px solid #333; + background-color: var(--bg-secondary); + border: 1px solid var(--border); border-radius: 0.75rem; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); width: 100%; max-width: 28rem; margin: 0 1rem; @@ -403,11 +409,11 @@ body { align-items: center; justify-content: space-between; padding: 1rem 1.25rem; - border-bottom: 1px solid #2a2a2a; + border-bottom: 1px solid var(--border); } .restart-modal-header h2 { - color: #e0e0e0; + color: var(--text); font-size: 0.95rem; margin: 0; } @@ -426,8 +432,8 @@ body { } .restart-modal-close:hover { - color: #ccc; - background-color: #2a2a2a; + color: var(--text-secondary); + background-color: var(--bg-tertiary); } .restart-modal-body { @@ -435,21 +441,21 @@ body { } .restart-modal-description { - color: #aaa; + color: var(--text-secondary); font-size: 0.85rem; margin: 0; } .restart-modal-warning { margin-top: 1rem; - background-color: #1e1400; - border: 1px solid #3a2a00; + background-color: var(--warning-soft); + border: 1px solid rgba(245, 166, 35, 0.25); border-radius: 0.5rem; padding: 0.75rem 1rem; } .restart-modal-warning p { - color: #facc15; + color: var(--warning); font-size: 0.8rem; margin: 0; } @@ -460,7 +466,7 @@ body { justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.25rem; - border-top: 1px solid #2a2a2a; + border-top: 1px solid var(--border); } .restart-modal-btn { @@ -473,28 +479,28 @@ body { } .restart-modal-btn.cancel { - color: #ccc; + color: var(--text-secondary); background-color: transparent; } .restart-modal-btn.cancel:hover { - background-color: #2a2a2a; + background-color: var(--bg-tertiary); } .restart-modal-btn.confirm { - background-color: #00D894; - color: #111; + background-color: var(--accent); + color: #09090b; } .restart-modal-btn.confirm:hover { - background-color: #00be82; + background-color: var(--accent-hover); } /* Progress Bar for Restart */ .restart-progress-bar { width: 100%; height: 0.375rem; - background-color: #2a2a2a; + background-color: var(--bg-tertiary); border-radius: 9999px; overflow: hidden; } @@ -502,7 +508,7 @@ body { .restart-progress-fill { height: 100%; border-radius: 9999px; - background-color: #00D894; + background-color: var(--accent); width: 40%; animation: indeterminate 1.5s ease-in-out infinite; } @@ -523,14 +529,14 @@ body { } .restart-modal-info { - color: #666; + color: var(--text-secondary); font-size: 0.8rem; margin-top: 1.25rem; margin-bottom: 0; } .restart-modal-info a { - color: #00D894; + color: var(--accent); text-decoration: none; } @@ -2522,17 +2528,21 @@ body { } .extensions-section h3 { - font-size: 15px; + font-size: 11px; font-weight: 600; margin-bottom: 12px; - color: var(--text); + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; } .extensions-section h4 { - font-size: 13px; + font-size: 11px; font-weight: 600; margin: 16px 0 8px; - color: var(--text-secondary); + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.05em; } .extensions-list { @@ -2544,12 +2554,29 @@ body { .ext-card { background: var(--bg-secondary); border: 1px solid var(--border); + border-left: 3px solid transparent; border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 8px; - transition: border-color 0.2s, transform 0.2s; + transition: border-color var(--transition-base), box-shadow var(--transition-base), transform 0.2s; +} + +.ext-card.state-active { + border-left-color: var(--success); +} + +.ext-card.state-inactive { + border-left-color: var(--text-muted); +} + +.ext-card.state-error { + border-left-color: var(--danger); +} + +.ext-card.state-pairing { + border-left-color: var(--warning); } .ext-card:hover { @@ -2592,6 +2619,11 @@ body { color: var(--warning); } +.ext-kind.kind-builtin { + background: rgba(161, 161, 170, 0.15); + color: var(--text-secondary); +} + .ext-version { font-size: 11px; color: var(--text-muted); @@ -2767,13 +2799,20 @@ body { border-radius: var(--radius); cursor: pointer; font-size: 12px; + font-weight: 500; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text); + transition: all var(--transition-fast); } .btn-ext:hover { background: var(--border); + transform: translateY(-1px); +} + +.btn-ext:active { + transform: scale(0.97); } .btn-ext.activate { @@ -2873,6 +2912,7 @@ body { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; @@ -2893,7 +2933,7 @@ body { .configure-modal h3 { margin: 0 0 16px 0; font-size: 16px; - color: var(--text-primary); + color: var(--text); } .configure-form { @@ -2958,31 +2998,6 @@ body { justify-content: flex-end; } -.tools-table { - width: 100%; - border-collapse: collapse; -} - -.tools-table th, -.tools-table td { - padding: 8px 12px; - text-align: left; - border-bottom: 1px solid var(--border); - font-size: 13px; -} - -.tools-table th { - color: var(--text-secondary); - font-weight: 500; - text-transform: uppercase; - font-size: 11px; - letter-spacing: 0.5px; -} - -.tools-table tr:hover td { - background: rgba(255, 255, 255, 0.03); -} - /* --- Activity tab (unified sandbox job events) --- */ .activity-terminal { @@ -3636,10 +3651,14 @@ mark { gap: 8px; align-items: center; flex-wrap: wrap; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 14px; } .ext-install-form input { - padding: 6px 10px; + padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); @@ -3681,6 +3700,10 @@ mark { gap: 8px; align-items: center; margin-bottom: 12px; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 14px; } .skill-search-box input { @@ -3717,10 +3740,10 @@ mark { } .skill-trust { - font-size: 10px; - padding: 2px 6px; - border-radius: 8px; - font-weight: 500; + font-size: 11px; + padding: 3px 8px; + border-radius: 9999px; + font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } @@ -3864,6 +3887,27 @@ mark { border-bottom: 1px solid var(--border); } + /* Settings layout: horizontal subtabs on mobile */ + .settings-layout { flex-direction: column; } + .settings-sidebar { + width: 100%; + flex-direction: row; + overflow-x: auto; + border-right: none; + border-bottom: 1px solid var(--border); + padding: 0; + } + .settings-subtab { + border-left: none; + border-bottom: 2px solid transparent; + white-space: nowrap; + padding: 8px 16px; + } + .settings-subtab.active { + border-left-color: transparent; + border-bottom-color: var(--accent); + } + /* Extension install form */ .ext-install-form { flex-direction: column; @@ -3890,6 +3934,238 @@ mark { } } +/* --- Settings Tab Layout --- */ +.settings-layout { + flex: 1; + display: flex; + overflow: hidden; +} + +.settings-sidebar { + width: 180px; + border-right: 1px solid var(--border); + display: flex; + flex-direction: column; + background: var(--bg-secondary); + padding: 12px 0; + flex-shrink: 0; +} + +.settings-subtab { + display: block; + width: 100%; + padding: 10px 20px; + background: none; + border: none; + border-left: 2px solid transparent; + color: var(--text-secondary); + cursor: pointer; + font-size: 14px; + font-weight: 500; + text-align: left; + transition: color 0.2s, background 0.2s, border-color 0.2s; +} + +.settings-subtab:hover { + color: var(--text); + background: var(--bg-tertiary); +} + +.settings-subtab.active { + color: var(--accent); + border-left-color: var(--accent); + background: var(--bg-tertiary); +} + +.settings-content { + flex: 1; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.settings-subpanel { + display: none; + flex: 1; + overflow: hidden; + flex-direction: column; + opacity: 0; +} + +.settings-subpanel.active { + display: flex; + animation: settingsFadeIn 0.2s ease forwards; +} + +@keyframes settingsFadeIn { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Settings form styles (General subtab) */ +.settings-group { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 16px; + margin-bottom: 16px; +} + +.settings-group-title { + font-size: 11px; + font-weight: 600; + color: var(--text-secondary); + margin-bottom: 12px; + text-transform: uppercase; + letter-spacing: 0.05em; + padding-bottom: 8px; + border-bottom: 1px solid var(--border); +} + +.settings-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 12px; + margin: 0 -12px; + border-bottom: 1px solid rgba(255,255,255,0.04); + border-radius: 6px; + gap: 16px; + max-height: 80px; + overflow: hidden; + transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease, background var(--transition-fast); + opacity: 1; +} + +.settings-row:hover { + background: var(--bg-hover); +} + +.settings-row.hidden { + max-height: 0; + opacity: 0; + margin: 0; + padding: 0; + border-bottom: none; +} + +.settings-row.search-hidden { + display: none; +} + +.settings-row:last-child { border-bottom: none; } + +.settings-label { + font-size: 13px; + color: var(--text); + font-weight: 500; + flex-shrink: 0; + min-width: 180px; +} + +.settings-input { + padding: 6px 10px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text); + font-size: 13px; + font-family: 'IBM Plex Mono', monospace; + width: 240px; + max-width: 100%; +} + +.settings-input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); +} + +.settings-saved-indicator { + font-size: 11px; + color: var(--success); + opacity: 0; + transform: translateY(4px); + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.settings-saved-indicator.visible { + opacity: 1; + transform: translateY(0); +} + +.settings-description { + font-size: 11px; + color: var(--text-secondary); + margin-top: 2px; +} + +.restart-banner { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + background: var(--warning-soft); + border: 1px solid rgba(245, 166, 35, 0.25); + border-radius: var(--radius); + color: var(--text); + font-size: 12px; + margin: 8px 16px; + animation: settingsFadeIn 0.25s ease forwards; +} + +.restart-banner-text { + flex: 1; +} + +.restart-banner-btn { + padding: 4px 12px; + background: var(--warning); + color: #09090b; + border: none; + border-radius: var(--radius); + cursor: pointer; + font-size: 11px; + font-weight: 600; + white-space: nowrap; + transition: opacity var(--transition-fast); +} + +.restart-banner-btn:hover { + opacity: 0.85; +} + +.settings-label-wrap { + display: flex; + flex-direction: column; + flex-shrink: 0; + min-width: 180px; +} + +.settings-select { + padding: 6px 10px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text); + font-size: 13px; + font-family: 'IBM Plex Mono', monospace; + width: 240px; + max-width: 100%; + cursor: pointer; +} + +.settings-select:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); +} + +input[type="checkbox"]:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + /* Slash command autocomplete dropdown */ .slash-autocomplete { position: relative; @@ -4078,3 +4354,211 @@ mark { padding: 4px 8px; background: var(--bg-secondary); } + +/* Settings toolbar (search + import/export) */ +.settings-toolbar { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + border-bottom: 1px solid var(--border); + background: var(--bg-secondary); + flex-shrink: 0; +} + +.settings-search { + flex: 1; +} + +.settings-search input { + width: 100%; + padding: 6px 10px 6px 32px; + background: var(--bg); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 10px center; + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text); + font-size: 13px; + font-family: 'IBM Plex Mono', monospace; +} + +.settings-search input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); +} + +.settings-toolbar-btn { + padding: 6px 12px; + background: var(--bg-tertiary); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text-secondary); + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: all var(--transition-fast); + white-space: nowrap; +} + +.settings-toolbar-btn:hover { + background: var(--bg-secondary); + color: var(--text); + border-color: rgba(255, 255, 255, 0.15); + transform: translateY(-1px); +} + +.settings-toolbar-btn:active { + transform: scale(0.98); +} + +/* Confirmation modal */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + animation: modalFadeIn 0.15s ease; +} + +@keyframes modalFadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes modalSlideIn { + from { opacity: 0; transform: translateY(10px) scale(0.98); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +.modal { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 0; + max-width: 420px; + width: 90%; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + animation: modalSlideIn 0.2s ease; +} + +.modal h3 { + margin: 0; + padding: 16px 20px; + font-size: 16px; + color: var(--text); + border-bottom: 1px solid var(--border); +} + +.modal p { + margin: 0; + padding: 16px 20px; + font-size: 13px; + color: var(--text-secondary); +} + +.modal-actions { + display: flex; + justify-content: flex-end; + gap: 8px; + padding: 12px 20px; + border-top: 1px solid var(--border); +} + +.btn-secondary { + padding: 8px 16px; + background: var(--bg-tertiary); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text); + cursor: pointer; + font-size: 13px; +} + +.btn-secondary:hover { + background: var(--bg); +} + +.btn-danger { + padding: 8px 16px; + background: var(--danger); + border: 1px solid var(--danger); + border-radius: var(--radius); + color: white; + cursor: pointer; + font-size: 13px; +} + +.btn-danger:hover { + opacity: 0.9; +} + +/* Mobile settings responsiveness */ +@media (max-width: 768px) { + .settings-row { + flex-direction: column; + align-items: stretch; + max-height: 140px; + } + .settings-label-wrap { + min-width: unset; + } + .settings-input, .settings-select { + width: 100%; + } + .settings-toolbar { + flex-wrap: wrap; + } + .settings-search { + min-width: 150px; + } +} + +/* Loading skeletons */ +@keyframes shimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + +.skeleton-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 12px; + gap: 16px; +} + +.skeleton-bar { + height: 12px; + border-radius: 6px; + background: linear-gradient(90deg, var(--bg-tertiary) 25%, rgba(255,255,255,0.06) 50%, var(--bg-tertiary) 75%); + background-size: 200% 100%; + animation: shimmer 1.5s ease-in-out infinite; +} + +.skeleton-card { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 14px; + display: flex; + flex-direction: column; + gap: 10px; +} + +/* Settings search empty state */ +.settings-search-empty { + padding: 32px 16px; + text-align: center; + color: var(--text-muted); + font-size: 13px; +} diff --git a/src/channels/web/test_helpers.rs b/src/channels/web/test_helpers.rs index 981eacdd6d..76b2a76043 100644 --- a/src/channels/web/test_helpers.rs +++ b/src/channels/web/test_helpers.rs @@ -87,6 +87,7 @@ impl TestGatewayBuilder { cost_guard: None, routine_engine: Arc::new(tokio::sync::RwLock::new(None)), startup_time: std::time::Instant::now(), + active_config: crate::channels::web::server::ActiveConfigSnapshot::default(), }) } diff --git a/src/channels/web/ws.rs b/src/channels/web/ws.rs index 7287902e2f..76c1db699b 100644 --- a/src/channels/web/ws.rs +++ b/src/channels/web/ws.rs @@ -510,6 +510,7 @@ mod tests { cost_guard: None, routine_engine: Arc::new(tokio::sync::RwLock::new(None)), startup_time: std::time::Instant::now(), + active_config: crate::channels::web::server::ActiveConfigSnapshot::default(), } } } diff --git a/src/main.rs b/src/main.rs index a7d95bec60..28d24f4300 100644 --- a/src/main.rs +++ b/src/main.rs @@ -315,6 +315,17 @@ async fn async_main() -> anyhow::Result<()> { })); // Load WASM channels and register their webhook routes. + // Ensure the channels directory exists so the WASM runtime initializes even when + // no channels are installed yet — hot-activation needs the runtime to be available. + if config.channels.wasm_channels_enabled + && let Err(e) = std::fs::create_dir_all(&config.channels.wasm_channels_dir) + { + tracing::warn!( + path = %config.channels.wasm_channels_dir.display(), + error = %e, + "Failed to create WASM channels directory" + ); + } if config.channels.wasm_channels_enabled && config.channels.wasm_channels_dir.exists() { let wasm_result = ironclaw::channels::wasm::setup_wasm_channels( &config, @@ -503,6 +514,16 @@ async fn async_main() -> anyhow::Result<()> { gw = gw.with_skill_catalog(Arc::clone(sc)); } gw = gw.with_cost_guard(Arc::clone(&components.cost_guard)); + { + let active_model = components.llm.model_name().to_string(); + let mut enabled = channel_names.clone(); + enabled.push("gateway".into()); + gw = gw.with_active_config(ironclaw::channels::web::server::ActiveConfigSnapshot { + llm_backend: config.llm.backend.to_string(), + llm_model: active_model, + enabled_channels: enabled, + }); + } if config.sandbox.enabled { gw = gw.with_prompt_queue(Arc::clone(&prompt_queue)); diff --git a/tests/e2e/helpers.py b/tests/e2e/helpers.py index 629205a147..5f9a08ac6d 100644 --- a/tests/e2e/helpers.py +++ b/tests/e2e/helpers.py @@ -43,12 +43,13 @@ "approval_always_btn": ".approval-actions button.always", "approval_deny_btn": ".approval-actions button.deny", "approval_resolved": ".approval-resolved", - # Extensions tab – sections + # Settings subtabs + "settings_subtab": '.settings-subtab[data-settings-subtab="{subtab}"]', + "settings_subpanel": "#settings-{subtab}", + # Extensions section "extensions_list": "#extensions-list", "available_wasm_list": "#available-wasm-list", "mcp_servers_list": "#mcp-servers-list", - "tools_tbody": "#tools-tbody", - "tools_empty": "#tools-empty", # Extensions tab – cards "ext_card_installed": "#extensions-list .ext-card", "ext_card_available": "#available-wasm-list .ext-card.ext-available", @@ -90,6 +91,12 @@ "ext_stepper": ".ext-stepper", "stepper_step": ".stepper-step", "stepper_circle": ".stepper-circle", + # Confirm modal (custom, replaces window.confirm) + "confirm_modal": "#confirm-modal", + "confirm_modal_btn": "#confirm-modal-btn", + "confirm_modal_cancel": "#confirm-modal-cancel-btn", + # Channels subtab – cards + "channels_ext_card": "#settings-channels-content .ext-card", # Toast notifications "toast": ".toast", "toast_success": ".toast.toast-success", @@ -97,7 +104,7 @@ "toast_info": ".toast.toast-info", } -TABS = ["chat", "memory", "jobs", "routines", "extensions", "skills"] +TABS = ["chat", "memory", "jobs", "routines", "settings"] # Auth token used across all tests AUTH_TOKEN = "e2e-test-token" diff --git a/tests/e2e/scenarios/test_extensions.py b/tests/e2e/scenarios/test_extensions.py index f172d42061..23157c484d 100644 --- a/tests/e2e/scenarios/test_extensions.py +++ b/tests/e2e/scenarios/test_extensions.py @@ -87,23 +87,21 @@ "installed": False, } -_SAMPLE_TOOL = {"name": "echo", "description": "Echo a message"} -_SAMPLE_TOOL_2 = {"name": "time", "description": "Get current time"} - # ─── Navigation helpers ──────────────────────────────────────────────────────── async def go_to_extensions(page): - """Click the Extensions tab and wait for the panel to appear. + """Navigate to Settings > Extensions subtab and wait for content. Waits for loadExtensions() to finish rendering by polling for the first content signal (empty-state div or an installed card) rather than sleeping. """ - await page.locator(SEL["tab_button"].format(tab="extensions")).click() - await page.locator(SEL["tab_panel"].format(tab="extensions")).wait_for( + await page.locator(SEL["tab_button"].format(tab="settings")).click() + await page.locator(SEL["settings_subtab"].format(subtab="extensions")).click() + await page.locator(SEL["settings_subpanel"].format(subtab="extensions")).wait_for( state="visible", timeout=5000 ) - # loadExtensions() fires three parallel fetches then renders. Wait for the + # loadExtensions() fires parallel fetches then renders. Wait for the # first concrete DOM signal instead of a hard sleep so the test is # deterministic even under CI load. await page.locator( @@ -111,19 +109,39 @@ async def go_to_extensions(page): ).first.wait_for(state="visible", timeout=8000) -async def mock_ext_apis(page, *, installed=None, tools=None, registry=None): - """Intercept the three extension list APIs with fixture data. +async def go_to_channels(page): + """Navigate to Settings > Channels subtab and wait for content.""" + await page.locator(SEL["tab_button"].format(tab="settings")).click() + await page.locator(SEL["settings_subtab"].format(subtab="channels")).click() + await page.locator(SEL["settings_subpanel"].format(subtab="channels")).wait_for( + state="visible", timeout=5000 + ) + + +async def go_to_mcp(page): + """Navigate to Settings > MCP subtab and wait for content.""" + await page.locator(SEL["tab_button"].format(tab="settings")).click() + await page.locator(SEL["settings_subtab"].format(subtab="mcp")).click() + await page.locator(SEL["settings_subpanel"].format(subtab="mcp")).wait_for( + state="visible", timeout=5000 + ) + await page.locator( + f"{SEL['mcp_servers_list']} .empty-state, {SEL['ext_card_mcp']}" + ).first.wait_for(state="visible", timeout=8000) + + +async def mock_ext_apis(page, *, installed=None, registry=None): + """Intercept the extension list APIs with fixture data. - Must be called BEFORE navigating to the extensions tab. + Must be called BEFORE navigating to the extensions subtab. """ ext_body = json.dumps({"extensions": installed or []}) - tools_body = json.dumps({"tools": tools or []}) registry_body = json.dumps({"entries": registry or []}) # Playwright evaluates route handlers in LIFO order (last-registered fires # first). Register the broad handler first so it is checked last; the - # specific /tools and /registry handlers are registered after and therefore - # checked first — no continue_() fallthrough needed. + # specific /registry handler is registered after and therefore checked + # first — no continue_() fallthrough needed. async def handle_ext_list(route): path = route.request.url.split("?")[0] if path.endswith("/api/extensions"): @@ -133,13 +151,9 @@ async def handle_ext_list(route): await page.route("**/api/extensions*", handle_ext_list) - async def handle_tools(route): - await route.fulfill(status=200, content_type="application/json", body=tools_body) - async def handle_registry(route): await route.fulfill(status=200, content_type="application/json", body=registry_body) - await page.route("**/api/extensions/tools", handle_tools) await page.route("**/api/extensions/registry", handle_registry) @@ -151,46 +165,17 @@ async def wait_for_toast(page, text: str, *, timeout: int = 5000): # ─── Group A: Structural / empty state ──────────────────────────────────────── async def test_extensions_empty_tab_layout(page): - """Extensions tab with no data shows all three sections with correct empty-state messages.""" - await mock_ext_apis(page, tools=[]) + """Extensions subtab with no data shows sections with correct empty-state messages.""" + await mock_ext_apis(page) await go_to_extensions(page) - panel = page.locator(SEL["tab_panel"].format(tab="extensions")) + panel = page.locator(SEL["settings_subpanel"].format(subtab="extensions")) assert await panel.is_visible() ext_list = page.locator(SEL["extensions_list"]) assert await ext_list.is_visible() assert "No extensions installed" in await ext_list.text_content() - wasm_list = page.locator(SEL["available_wasm_list"]) - assert await wasm_list.is_visible() - assert "No additional WASM extensions available" in await wasm_list.text_content() - - mcp_list = page.locator(SEL["mcp_servers_list"]) - assert await mcp_list.is_visible() - assert "No MCP servers available" in await mcp_list.text_content() - - # Tools table should be empty - tbody = page.locator(SEL["tools_tbody"]) - rows = await tbody.locator("tr").count() - empty_visible = await page.locator(SEL["tools_empty"]).is_visible() - assert empty_visible or rows == 0, "Expected tools table to be empty" - - -async def test_extensions_tools_table_populated(page): - """Two mock tools produce two rows in the tools table.""" - await mock_ext_apis(page, tools=[_SAMPLE_TOOL, _SAMPLE_TOOL_2]) - await go_to_extensions(page) - - tbody = page.locator(SEL["tools_tbody"]) - rows = tbody.locator("tr") - await rows.first.wait_for(state="visible", timeout=5000) - assert await rows.count() == 2 - - text = await tbody.text_content() - assert "echo" in text - assert "time" in text - # ─── Group B: Installed WASM tool cards ─────────────────────────────────────── @@ -248,9 +233,9 @@ async def test_installed_wasm_tool_authed_shows_reconfigure_btn(page): async def test_installed_mcp_server_active(page): """Active MCP server shows 'Active' label and no Activate button.""" await mock_ext_apis(page, installed=[_MCP_ACTIVE]) - await go_to_extensions(page) + await go_to_mcp(page) - card = page.locator(SEL["ext_card_installed"]).first + card = page.locator(SEL["ext_card_mcp"]).first await card.wait_for(state="visible", timeout=5000) assert await card.locator(SEL["ext_active_label"]).count() == 1 assert await card.locator(SEL["ext_activate_btn"]).count() == 0 @@ -260,9 +245,9 @@ async def test_installed_mcp_server_active(page): async def test_installed_mcp_server_inactive_shows_activate(page): """Inactive MCP server shows Activate button.""" await mock_ext_apis(page, installed=[_MCP_INACTIVE]) - await go_to_extensions(page) + await go_to_mcp(page) - card = page.locator(SEL["ext_card_installed"]).first + card = page.locator(SEL["ext_card_mcp"]).first await card.wait_for(state="visible", timeout=5000) assert await card.locator(SEL["ext_activate_btn"]).count() == 1 @@ -270,7 +255,7 @@ async def test_installed_mcp_server_inactive_shows_activate(page): async def test_mcp_server_in_registry_not_installed(page): """Registry MCP entry (not installed) appears in the MCP section with Install button.""" await mock_ext_apis(page, registry=[_REGISTRY_MCP]) - await go_to_extensions(page) + await go_to_mcp(page) mcp_list = page.locator(SEL["mcp_servers_list"]) card = mcp_list.locator(".ext-card").first @@ -285,7 +270,7 @@ async def test_mcp_server_installed_auth_dot(page): installed_mcp = {**_MCP_ACTIVE, "name": "registry-mcp", "authenticated": False} registry_mcp = {**_REGISTRY_MCP, "name": "registry-mcp"} await mock_ext_apis(page, installed=[installed_mcp], registry=[registry_mcp]) - await go_to_extensions(page) + await go_to_mcp(page) mcp_list = page.locator(SEL["mcp_servers_list"]) card = mcp_list.locator(".ext-card").first @@ -299,8 +284,9 @@ async def test_mcp_server_installed_auth_dot(page): async def _load_wasm_channel(page, activation_status, activation_error=None): ext = {**_WASM_CHANNEL, "activation_status": activation_status, "activation_error": activation_error} await mock_ext_apis(page, installed=[ext]) - await go_to_extensions(page) - card = page.locator(SEL["ext_card_installed"]).first + await go_to_channels(page) + # Find the WASM channel card specifically (not built-in channel cards) + card = page.locator(SEL["channels_ext_card"], has_text="Test Channel").first await card.wait_for(state="visible", timeout=5000) return card @@ -446,9 +432,9 @@ async def handle_channel_install(route): await page.route("**/api/extensions/test-channel/setup", handle_channel_setup) await page.route("**/api/extensions/install", handle_channel_install) - await go_to_extensions(page) + await go_to_channels(page) - install_btn = page.locator(SEL["available_wasm_list"]).locator(SEL["ext_install_btn"]).first + install_btn = page.locator(SEL["channels_ext_card"]).locator(SEL["ext_install_btn"]).first await install_btn.wait_for(state="visible", timeout=5000) await install_btn.click() @@ -523,13 +509,14 @@ async def handle_ext_empty(route): # Override for subsequent calls await page.route("**/api/extensions*", handle_ext_empty) - # Auto-accept confirm dialog - await page.evaluate("window.confirm = () => true") - card = page.locator(SEL["ext_card_installed"]).first await card.wait_for(state="visible", timeout=5000) await card.locator(SEL["ext_remove_btn"]).click() + # Confirm via custom modal + await page.locator(SEL["confirm_modal"]).wait_for(state="visible", timeout=5000) + await page.locator(SEL["confirm_modal_btn"]).click() + # Card should disappear await page.wait_for_function( "() => document.querySelectorAll('#extensions-list .ext-card').length === 0", @@ -543,13 +530,14 @@ async def test_remove_cancelled_keeps_card(page): await mock_ext_apis(page, installed=[_WASM_TOOL]) await go_to_extensions(page) - # Reject the confirm dialog - await page.evaluate("window.confirm = () => false") - card = page.locator(SEL["ext_card_installed"]).first await card.wait_for(state="visible", timeout=5000) await card.locator(SEL["ext_remove_btn"]).click() + # Cancel via custom modal + await page.locator(SEL["confirm_modal"]).wait_for(state="visible", timeout=5000) + await page.locator(SEL["confirm_modal_cancel"]).click() + assert await page.locator(SEL["ext_card_installed"]).count() >= 1, "Card should remain after cancel" @@ -943,14 +931,10 @@ async def counting_handler(route): else: await route.continue_() - async def handle_tools(route): - await route.fulfill(status=200, content_type="application/json", body='{"tools":[]}') - async def handle_registry(route): await route.fulfill(status=200, content_type="application/json", body='{"entries":[]}') await page.route("**/api/extensions*", counting_handler) - await page.route("**/api/extensions/tools", handle_tools) await page.route("**/api/extensions/registry", handle_registry) await go_to_extensions(page) @@ -959,6 +943,9 @@ async def handle_registry(route): await _show_auth_card(page, extension_name="gmail", auth_url="https://example.com/oauth") assert await page.locator(SEL["auth_card"] + '[data-extension-name="gmail"]').count() == 1 + # Inject a counter to confirm refreshCurrentSettingsTab is called + await page.evaluate("window.__refreshCount = 0; var _origRefresh = refreshCurrentSettingsTab; refreshCurrentSettingsTab = function() { window.__refreshCount++; _origRefresh(); };") + await page.evaluate(""" handleAuthCompleted({ extension_name: 'gmail', @@ -969,14 +956,11 @@ async def handle_registry(route): await wait_for_toast(page, "OAuth flow expired. Please try again.") assert await page.locator(SEL["auth_card"] + '[data-extension-name="gmail"]').count() == 0 - assert ( - await page.locator( - SEL["toast_error"], has_text="OAuth flow expired. Please try again." - ).count() - >= 1 - ) - await page.wait_for_timeout(600) + # Wait for the refresh to complete + await page.wait_for_function("() => window.__refreshCount > 0", timeout=5000) + # Give the async fetch time to complete + await page.wait_for_timeout(1000) assert len(reload_count) > count_before, "Extensions list did not reload after auth failure" @@ -996,9 +980,9 @@ async def handle_activate(route): await mock_ext_apis(page, installed=[_MCP_INACTIVE]) await page.route("**/api/extensions/test-mcp-inactive/activate", handle_activate) - await go_to_extensions(page) + await go_to_mcp(page) - activate_btn = page.locator(SEL["ext_card_installed"]).first.locator(SEL["ext_activate_btn"]) + activate_btn = page.locator(SEL["ext_card_mcp"]).first.locator(SEL["ext_activate_btn"]) await activate_btn.wait_for(state="visible", timeout=5000) async with page.expect_response("**/api/extensions/test-mcp-inactive/activate", timeout=5000): @@ -1021,9 +1005,9 @@ async def handle_setup(route): await page.route("**/api/extensions/test-mcp-inactive/activate", handle_activate) await page.route("**/api/extensions/test-mcp-inactive/setup", handle_setup) - await go_to_extensions(page) + await go_to_mcp(page) - activate_btn = page.locator(SEL["ext_card_installed"]).first.locator(SEL["ext_activate_btn"]) + activate_btn = page.locator(SEL["ext_card_mcp"]).first.locator(SEL["ext_activate_btn"]) await activate_btn.wait_for(state="visible", timeout=5000) await activate_btn.click() @@ -1040,9 +1024,9 @@ async def handle_activate(route): await route.fulfill(status=200, content_type="application/json", body=json.dumps({"success": False, "message": "Config missing"})) await page.route("**/api/extensions/test-mcp-inactive/activate", handle_activate) - await go_to_extensions(page) + await go_to_mcp(page) - activate_btn = page.locator(SEL["ext_card_installed"]).first.locator(SEL["ext_activate_btn"]) + activate_btn = page.locator(SEL["ext_card_mcp"]).first.locator(SEL["ext_activate_btn"]) await activate_btn.wait_for(state="visible", timeout=5000) await activate_btn.click() @@ -1058,9 +1042,9 @@ async def handle_activate(route): await route.fulfill(status=200, content_type="application/json", body=json.dumps({"success": True, "auth_url": "https://example.com/oauth"})) await page.route("**/api/extensions/test-mcp-inactive/activate", handle_activate) - await go_to_extensions(page) + await go_to_mcp(page) - activate_btn = page.locator(SEL["ext_card_installed"]).first.locator(SEL["ext_activate_btn"]) + activate_btn = page.locator(SEL["ext_card_mcp"]).first.locator(SEL["ext_activate_btn"]) await activate_btn.wait_for(state="visible", timeout=5000) await activate_btn.click() @@ -1076,7 +1060,7 @@ async def handle_activate(route): # ─── Group J: Tab reload behaviour ──────────────────────────────────────────── async def test_extensions_tab_reloads_on_revisit(page): - """loadExtensions() is called again when re-navigating to the extensions tab.""" + """loadExtensions() is called again when re-navigating to the extensions subtab.""" call_count = [] async def counting_handler(route): @@ -1091,14 +1075,10 @@ async def counting_handler(route): else: await route.continue_() - async def handle_tools(route): - await route.fulfill(status=200, content_type="application/json", body='{"tools":[]}') - async def handle_registry(route): await route.fulfill(status=200, content_type="application/json", body='{"entries":[]}') await page.route("**/api/extensions*", counting_handler) - await page.route("**/api/extensions/tools", handle_tools) await page.route("**/api/extensions/registry", handle_registry) # First visit @@ -1118,48 +1098,6 @@ async def handle_registry(route): assert count_after_second > count_after_first, "loadExtensions not called on return visit" -async def test_auth_completed_sse_triggers_extensions_reload(page): - """auth_completed SSE event while on the extensions tab triggers a reload.""" - reload_count = [] - - async def counting_handler(route): - path = route.request.url.split("?")[0] - if path.endswith("/api/extensions"): - reload_count.append(1) - await route.fulfill( - status=200, - content_type="application/json", - body=json.dumps({"extensions": []}), - ) - else: - await route.continue_() - - async def handle_tools(route): - await route.fulfill(status=200, content_type="application/json", body='{"tools":[]}') - - async def handle_registry(route): - await route.fulfill(status=200, content_type="application/json", body='{"entries":[]}') - - await page.route("**/api/extensions*", counting_handler) - await page.route("**/api/extensions/tools", handle_tools) - await page.route("**/api/extensions/registry", handle_registry) - - await go_to_extensions(page) - count_before = len(reload_count) - - # Simulate auth_completed via the shared handler. - await page.evaluate(""" - handleAuthCompleted({ - extension_name: 'reload-ext', - success: true, - message: 'Reloaded.', - }); - """) - - await page.wait_for_timeout(600) - assert len(reload_count) > count_before, "loadExtensions was not called after auth_completed" - - # ─── Regression tests ───────────────────────────────────────────────────────── # Each test below is a regression for a specific bug found after the initial # test suite was written. The bug description is in the docstring. @@ -1237,9 +1175,9 @@ async def handle_activate(route): ) await page.route("**/api/extensions/test-mcp-inactive/activate", handle_activate) - await go_to_extensions(page) + await go_to_mcp(page) - activate_btn = page.locator(SEL["ext_card_installed"]).first.locator(SEL["ext_activate_btn"]) + activate_btn = page.locator(SEL["ext_card_mcp"]).first.locator(SEL["ext_activate_btn"]) await activate_btn.wait_for(state="visible", timeout=5000) await activate_btn.click() diff --git a/tests/e2e/scenarios/test_skills.py b/tests/e2e/scenarios/test_skills.py index 4d92331b6b..50f5b6be81 100644 --- a/tests/e2e/scenarios/test_skills.py +++ b/tests/e2e/scenarios/test_skills.py @@ -4,11 +4,18 @@ from helpers import SEL +async def go_to_skills(page): + """Navigate to Settings > Skills subtab.""" + await page.locator(SEL["tab_button"].format(tab="settings")).click() + await page.locator(SEL["settings_subtab"].format(subtab="skills")).click() + await page.locator(SEL["settings_subpanel"].format(subtab="skills")).wait_for( + state="visible", timeout=5000 + ) + + async def test_skills_tab_visible(page): - """Skills tab shows the search interface.""" - await page.locator(SEL["tab_button"].format(tab="skills")).click() - panel = page.locator(SEL["tab_panel"].format(tab="skills")) - await panel.wait_for(state="visible", timeout=5000) + """Skills subtab shows the search interface.""" + await go_to_skills(page) search_input = page.locator(SEL["skill_search_input"]) assert await search_input.is_visible(), "Skills search input not visible" @@ -16,7 +23,7 @@ async def test_skills_tab_visible(page): async def test_skills_search(page): """Search ClawHub for skills and verify results appear.""" - await page.locator(SEL["tab_button"].format(tab="skills")).click() + await go_to_skills(page) search_input = page.locator(SEL["skill_search_input"]) await search_input.fill("markdown") @@ -35,7 +42,7 @@ async def test_skills_search(page): async def test_skills_install_and_remove(page): """Install a skill from search results, then remove it.""" - await page.locator(SEL["tab_button"].format(tab="skills")).click() + await go_to_skills(page) # Search search_input = page.locator(SEL["skill_search_input"]) @@ -68,10 +75,14 @@ async def test_skills_install_and_remove(page): installed_count = await installed.count() assert installed_count >= 1, "Skill should appear in installed list after install" - # Remove the skill (confirm is already overridden) + # Remove the skill via confirm modal remove_btn = installed.first.locator("button", has_text="Remove") if await remove_btn.count() > 0: await remove_btn.click() + # Confirm in the modal + confirm_btn = page.locator(SEL["confirm_modal_btn"]) + await confirm_btn.wait_for(state="visible", timeout=5000) + await confirm_btn.click() # Wait for the card to disappear or list to shrink await page.wait_for_timeout(3000) new_count = await page.locator(SEL["skill_installed"]).count() diff --git a/tests/e2e/scenarios/test_wasm_lifecycle.py b/tests/e2e/scenarios/test_wasm_lifecycle.py index 961e7ad0c6..212cc3ce05 100644 --- a/tests/e2e/scenarios/test_wasm_lifecycle.py +++ b/tests/e2e/scenarios/test_wasm_lifecycle.py @@ -507,10 +507,10 @@ async def test_configure_noninstalled(ironclaw_server): async def test_extensions_tab_shows_registry(page): - """Extensions tab loads and shows available extensions from registry.""" - tab_btn = page.locator(SEL["tab_button"].format(tab="extensions")) - await tab_btn.click() - panel = page.locator(SEL["tab_panel"].format(tab="extensions")) + """Extensions subtab loads and shows available extensions from registry.""" + await page.locator(SEL["tab_button"].format(tab="settings")).click() + await page.locator(SEL["settings_subtab"].format(subtab="extensions")).click() + panel = page.locator(SEL["settings_subpanel"].format(subtab="extensions")) await panel.wait_for(state="visible", timeout=5000) available_section = page.locator(SEL["available_wasm_list"]) diff --git a/tests/openai_compat_integration.rs b/tests/openai_compat_integration.rs index 939f39eb53..a1bc6a6452 100644 --- a/tests/openai_compat_integration.rs +++ b/tests/openai_compat_integration.rs @@ -214,6 +214,7 @@ async fn start_test_server_with_provider( cost_guard: None, routine_engine: Arc::new(tokio::sync::RwLock::new(None)), startup_time: std::time::Instant::now(), + active_config: ironclaw::channels::web::server::ActiveConfigSnapshot::default(), }); let addr: SocketAddr = "127.0.0.1:0".parse().unwrap(); @@ -705,6 +706,7 @@ async fn test_no_llm_provider_returns_503() { cost_guard: None, routine_engine: Arc::new(tokio::sync::RwLock::new(None)), startup_time: std::time::Instant::now(), + active_config: ironclaw::channels::web::server::ActiveConfigSnapshot::default(), }); let addr: SocketAddr = "127.0.0.1:0".parse().unwrap(); diff --git a/tests/support/gateway_workflow_harness.rs b/tests/support/gateway_workflow_harness.rs index dd9e86430d..55087510b1 100644 --- a/tests/support/gateway_workflow_harness.rs +++ b/tests/support/gateway_workflow_harness.rs @@ -231,6 +231,7 @@ impl GatewayWorkflowHarness { cost_guard: Some(Arc::clone(&components.cost_guard)), routine_engine: Arc::clone(&routine_slot), startup_time: Instant::now(), + active_config: ironclaw::channels::web::server::ActiveConfigSnapshot::default(), }); let mut agent = Agent::new( diff --git a/tests/ws_gateway_integration.rs b/tests/ws_gateway_integration.rs index 51e39d8d9d..6702d4ffde 100644 --- a/tests/ws_gateway_integration.rs +++ b/tests/ws_gateway_integration.rs @@ -62,6 +62,7 @@ async fn start_test_server() -> ( cost_guard: None, routine_engine: Arc::new(tokio::sync::RwLock::new(None)), startup_time: std::time::Instant::now(), + active_config: ironclaw::channels::web::server::ActiveConfigSnapshot::default(), }); let addr: SocketAddr = "127.0.0.1:0".parse().unwrap();