mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-05-22 11:15:42 +00:00
Simplify plugin activation toggle UI
Replace the plugin list activation dropdown and advanced shortcut with a one-click ON/OFF switch. Keep project/profile-specific activation inside the plugin config flow, remove the old advanced-only modal, update plugin docs, and add regression coverage for the binary list toggle contract.
This commit is contained in:
Alessandro
parent
30315f5227
commit
d4a9cd82d5
9 changed files with 195 additions and 371 deletions
|
|
@ -228,9 +228,9 @@ embedding:
|
|||
|
||||
- Global and scoped activation are independent, with no inheritance between scopes.
|
||||
- Activation flags are files: `.toggle-1` (ON) and `.toggle-0` (OFF).
|
||||
- UI states are `ON`, `OFF`, and `Advanced` (shown when any project/profile-specific override exists).
|
||||
- The plugin list shows a binary `ON`/`OFF` global activation switch.
|
||||
- `always_enabled: true` in `plugin.yaml` forces ON and disables toggle controls in the UI.
|
||||
- The "Switch" modal is the canonical per-scope activation surface, and "Configure Plugin" keeps scope synchronized with the settings modal.
|
||||
- For plugins with project/profile scoping, the plugin config modal is the canonical per-scope activation surface.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ _META_TARGET_RE = re.compile(
|
|||
)
|
||||
|
||||
|
||||
type ToggleState = Literal["enabled", "disabled", "advanced"]
|
||||
type ToggleState = Literal["enabled", "disabled"]
|
||||
|
||||
|
||||
class PluginAssetFile(TypedDict):
|
||||
|
|
@ -517,30 +517,15 @@ def get_toggle_state(plugin_name: str) -> ToggleState:
|
|||
if meta.always_enabled:
|
||||
return "enabled"
|
||||
|
||||
# root plugin paths
|
||||
# List-level activation is the global/root state. Scoped project/profile
|
||||
# overrides are managed inside the plugin config modal.
|
||||
plugin_paths = get_plugin_roots(plugin_name)
|
||||
state = (
|
||||
return (
|
||||
"enabled"
|
||||
if determined_toggle_from_paths(True, reversed(plugin_paths))
|
||||
else "disabled"
|
||||
)
|
||||
|
||||
# additional toggles in project/agent directories, return advanced
|
||||
if meta.per_agent_config or meta.per_project_config:
|
||||
configs = find_plugin_assets(
|
||||
TOGGLE_FILE_PATTERN,
|
||||
plugin_name=plugin_name,
|
||||
project_name="*" if meta.per_project_config else "",
|
||||
agent_profile="*" if meta.per_agent_config else "",
|
||||
only_first=False,
|
||||
)
|
||||
|
||||
# Advanced if there are specific overrides (project or agent specific)
|
||||
if any(c.get("project_name") or c.get("agent_profile") for c in configs):
|
||||
state = "advanced"
|
||||
|
||||
return state
|
||||
|
||||
|
||||
@extension.extensible
|
||||
def toggle_plugin(
|
||||
|
|
|
|||
108
tests/test_plugin_activation_ui.py
Normal file
108
tests/test_plugin_activation_ui.py
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import sys
|
||||
from pathlib import Path
|
||||
from types import SimpleNamespace
|
||||
|
||||
|
||||
PROJECT_ROOT = Path(__file__).resolve().parents[1]
|
||||
if str(PROJECT_ROOT) not in sys.path:
|
||||
sys.path.insert(0, str(PROJECT_ROOT))
|
||||
|
||||
from helpers import files, plugins
|
||||
|
||||
|
||||
def test_plugins_list_uses_binary_toggle_instead_of_advanced_dropdown():
|
||||
html = (PROJECT_ROOT / "webui/components/plugins/list/plugin-list.html").read_text(
|
||||
encoding="utf-8"
|
||||
)
|
||||
store = (
|
||||
PROJECT_ROOT / "webui/components/plugins/list/pluginListStore.js"
|
||||
).read_text(encoding="utf-8")
|
||||
|
||||
assert "plugin-status-toggle" in html
|
||||
assert "plugin-status-select" not in html
|
||||
assert "Open Advanced" not in html
|
||||
assert 'value="advanced"' not in html
|
||||
assert "openPluginAdvancedToggle" not in store
|
||||
assert "plugin-toggle-advanced.html" not in store
|
||||
|
||||
|
||||
def test_advanced_plugin_toggle_modal_was_removed():
|
||||
assert not (
|
||||
PROJECT_ROOT / "webui/components/plugins/toggle/plugin-toggle-advanced.html"
|
||||
).exists()
|
||||
|
||||
|
||||
def test_list_toggle_state_is_global_even_when_scoped_rules_exist(monkeypatch):
|
||||
monkeypatch.setattr(
|
||||
plugins,
|
||||
"get_plugin_meta",
|
||||
lambda _plugin_name: SimpleNamespace(always_enabled=False),
|
||||
)
|
||||
monkeypatch.setattr(
|
||||
plugins,
|
||||
"get_plugin_roots",
|
||||
lambda _plugin_name: ["plugins/example", "usr/plugins/example"],
|
||||
)
|
||||
monkeypatch.setattr(
|
||||
plugins,
|
||||
"determined_toggle_from_paths",
|
||||
lambda _default, _paths: False,
|
||||
)
|
||||
|
||||
def fail_on_scoped_lookup(*_args, **_kwargs):
|
||||
raise AssertionError("Plugin list toggle state should not inspect scoped rules")
|
||||
|
||||
monkeypatch.setattr(plugins, "find_plugin_assets", fail_on_scoped_lookup)
|
||||
|
||||
assert plugins.get_toggle_state("example") == "disabled"
|
||||
|
||||
|
||||
def test_config_scope_activation_toggle_saves_immediately_for_selected_scope():
|
||||
html = (PROJECT_ROOT / "webui/components/plugins/plugin-settings.html").read_text(
|
||||
encoding="utf-8"
|
||||
)
|
||||
settings_store = (
|
||||
PROJECT_ROOT / "webui/components/plugins/plugin-settings-store.js"
|
||||
).read_text(encoding="utf-8")
|
||||
toggle_store = (
|
||||
PROJECT_ROOT / "webui/components/plugins/toggle/plugin-toggle-store.js"
|
||||
).read_text(encoding="utf-8")
|
||||
|
||||
assert "@change=\"context.setPluginEnabled($event.target.checked)\"" in html
|
||||
assert "projectName: this.projectName || \"\"" in settings_store
|
||||
assert "agentProfileKey: this.agentProfileKey || \"\"" in settings_store
|
||||
assert (
|
||||
"async setEnabled(enabled, { projectName = this.projectName, "
|
||||
"agentProfileKey = this.agentProfileKey } = {})"
|
||||
) in toggle_store
|
||||
assert "action: \"toggle_plugin\"" in toggle_store
|
||||
|
||||
|
||||
def test_toggle_plugin_writes_project_scope_file_immediately(tmp_path, monkeypatch):
|
||||
monkeypatch.setattr(files, "_base_dir", str(tmp_path))
|
||||
monkeypatch.setattr(plugins, "after_plugin_change", lambda *_args, **_kwargs: None)
|
||||
monkeypatch.setitem(
|
||||
sys.modules,
|
||||
"helpers.projects",
|
||||
SimpleNamespace(
|
||||
get_project_meta=lambda name, *sub_dirs: files.get_abs_path(
|
||||
"usr/projects",
|
||||
name,
|
||||
".a0proj",
|
||||
*sub_dirs,
|
||||
)
|
||||
),
|
||||
)
|
||||
|
||||
plugins.toggle_plugin.__wrapped__("example", False, project_name="alpha")
|
||||
|
||||
scoped_plugin_dir = (
|
||||
tmp_path / "usr/projects/alpha/.a0proj/plugins/example"
|
||||
)
|
||||
assert (scoped_plugin_dir / ".toggle-0").exists()
|
||||
assert not (scoped_plugin_dir / ".toggle-1").exists()
|
||||
|
||||
plugins.toggle_plugin.__wrapped__("example", True, project_name="alpha")
|
||||
|
||||
assert (scoped_plugin_dir / ".toggle-1").exists()
|
||||
assert not (scoped_plugin_dir / ".toggle-0").exists()
|
||||
|
|
@ -180,24 +180,17 @@
|
|||
<div class="plugin-footer-row">
|
||||
<div class="plugin-description" x-text="plugin.description || 'No description provided.'"></div>
|
||||
<div class="plugin-status-group">
|
||||
<template x-if="plugin.toggle_state === 'advanced'">
|
||||
<button type="button"
|
||||
class="button icon-button"
|
||||
title="Open Advanced"
|
||||
@click="$store.pluginListStore.openPluginAdvancedToggle(plugin)">
|
||||
<span class="icon material-symbols-outlined">rule_settings</span>
|
||||
</button>
|
||||
</template>
|
||||
<select class="plugin-status-select"
|
||||
@change="$store.pluginListStore.updateToggle(plugin, $event.target.value)"
|
||||
@click.stop
|
||||
:disabled="plugin.always_enabled">
|
||||
<option value="enabled" :selected="plugin.toggle_state === 'enabled'">ON</option>
|
||||
<option value="disabled" :selected="plugin.toggle_state === 'disabled'">OFF</option>
|
||||
<template x-if="plugin.per_project_config || plugin.per_agent_config">
|
||||
<option value="advanced" :selected="plugin.toggle_state === 'advanced'">Advanced</option>
|
||||
</template>
|
||||
</select>
|
||||
<label class="toggle plugin-status-toggle"
|
||||
:class="{ 'disabled-appearance': plugin.always_enabled || $store.pluginListStore.loading }"
|
||||
:title="plugin.always_enabled ? 'Always enabled' : ($store.pluginListStore.isPluginEnabled(plugin) ? 'Disable plugin' : 'Enable plugin')">
|
||||
<input type="checkbox"
|
||||
:checked="$store.pluginListStore.isPluginEnabled(plugin)"
|
||||
:disabled="plugin.always_enabled || $store.pluginListStore.loading"
|
||||
@change="$store.pluginListStore.updateToggle(plugin, $event.target.checked)"
|
||||
@click.stop>
|
||||
<span class="toggler"></span>
|
||||
</label>
|
||||
<span class="plugin-status-text" x-text="$store.pluginListStore.toggleStatusLabel(plugin)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -389,35 +382,40 @@
|
|||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.plugin-status-group .button {
|
||||
padding: 0.3rem 0.5rem;
|
||||
height: 2.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.plugin-status-toggle {
|
||||
width: 48px;
|
||||
height: 28px;
|
||||
flex: 0 0 48px;
|
||||
}
|
||||
|
||||
.plugin-status-group .button .icon {
|
||||
font-size: 1.1rem;
|
||||
.plugin-status-toggle .toggler {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.plugin-status-select {
|
||||
padding: 0.3rem 2rem 0.3rem 0.6rem;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text-primary);
|
||||
cursor: pointer;
|
||||
height: 2.2rem;
|
||||
width: 8rem;
|
||||
flex: 0 0 8rem;
|
||||
.plugin-status-toggle .toggler:before {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.plugin-status-select:disabled {
|
||||
opacity: 0.7;
|
||||
|
||||
.plugin-status-toggle input:checked + .toggler:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.plugin-status-toggle input:disabled + .toggler {
|
||||
cursor: default;
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.plugin-status-toggle.disabled-appearance {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.plugin-status-text {
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
.plugin-description {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { createStore } from "/js/AlpineStore.js";
|
|||
import * as api from "/js/api.js";
|
||||
import { renderSafeMarkdown } from "/js/safe-markdown.js";
|
||||
import { store as pluginSettingsStore } from "/components/plugins/plugin-settings-store.js";
|
||||
import { store as pluginToggleStore } from "/components/plugins/toggle/plugin-toggle-store.js";
|
||||
import { store as pluginExecuteStore } from "/components/plugins/list/plugin-execute-store.js";
|
||||
import { store as fileBrowserStore } from "/components/modals/file-browser/file-browser-store.js";
|
||||
import { store as markdownModalStore } from "/components/modals/markdown/markdown-store.js";
|
||||
|
|
@ -114,47 +113,37 @@ const model = {
|
|||
}
|
||||
},
|
||||
|
||||
async openPluginAdvancedToggle(plugin) {
|
||||
if (!plugin?.name) return;
|
||||
this.selectedPlugin = plugin;
|
||||
try {
|
||||
if (!pluginToggleStore?.open) {
|
||||
throw new Error("Plugin toggle store is unavailable.");
|
||||
}
|
||||
await pluginToggleStore.open(plugin);
|
||||
window.openModal?.("components/plugins/toggle/plugin-toggle-advanced.html");
|
||||
} catch (e) {
|
||||
showErrorNotification(e, "Failed to open plugin switch");
|
||||
}
|
||||
isPluginEnabled(plugin) {
|
||||
if (plugin?.always_enabled) return true;
|
||||
return plugin?.toggle_state === "enabled";
|
||||
},
|
||||
|
||||
async updateToggle(plugin, value) {
|
||||
if (!plugin?.name) return;
|
||||
|
||||
if (value === 'advanced') {
|
||||
await this.openPluginAdvancedToggle(plugin);
|
||||
return;
|
||||
}
|
||||
toggleStatusLabel(plugin) {
|
||||
return this.isPluginEnabled(plugin) ? "ON" : "OFF";
|
||||
},
|
||||
|
||||
const enabled = value === 'enabled';
|
||||
const clearOverrides = plugin.toggle_state === 'advanced';
|
||||
if (clearOverrides && !window.confirm(
|
||||
`"${plugin.display_name || plugin.name}" has per-scope activation rules that will be removed. Set globally to ${enabled ? 'ON' : 'OFF'}?`
|
||||
)) return;
|
||||
async updateToggle(plugin, enabled) {
|
||||
if (!plugin?.name) return;
|
||||
if (plugin.always_enabled) return;
|
||||
|
||||
const nextEnabled = !!enabled;
|
||||
const previousState = plugin.toggle_state;
|
||||
plugin.toggle_state = nextEnabled ? "enabled" : "disabled";
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await api.callJsonApi("plugins", {
|
||||
action: "toggle_plugin",
|
||||
plugin_name: plugin.name,
|
||||
enabled: enabled,
|
||||
enabled: nextEnabled,
|
||||
project_name: "",
|
||||
agent_profile: "",
|
||||
clear_overrides: clearOverrides,
|
||||
clear_overrides: false,
|
||||
});
|
||||
if (response?.error) throw new Error(response.error);
|
||||
await this.refresh();
|
||||
} catch (e) {
|
||||
plugin.toggle_state = previousState;
|
||||
showErrorNotification(e, "Failed to toggle plugin");
|
||||
this.loading = false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -114,6 +114,19 @@ const model = {
|
|||
await pluginToggleStore.loadToggleStatus();
|
||||
},
|
||||
|
||||
async setPluginEnabled(enabled) {
|
||||
if (!pluginToggleStore?.setEnabled) return;
|
||||
this.error = null;
|
||||
try {
|
||||
await pluginToggleStore.setEnabled(enabled, {
|
||||
projectName: this.projectName || "",
|
||||
agentProfileKey: this.agentProfileKey || "",
|
||||
});
|
||||
} catch (e) {
|
||||
this.error = e?.message || "Failed to save activation state";
|
||||
}
|
||||
},
|
||||
|
||||
async onScopeChanged() {
|
||||
const nextProject = this.projectName || "";
|
||||
const nextProfile = this.agentProfileKey || "";
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@
|
|||
<label class="toggle">
|
||||
<input type="checkbox"
|
||||
:checked="$store.pluginToggle?.status === 'enabled'"
|
||||
:disabled="$store.pluginToggle?.isSaving"
|
||||
@change="$store.pluginToggle.setEnabled($event.target.checked)">
|
||||
:disabled="$store.pluginToggle?.isSaving || context.isLoading"
|
||||
@change="context.setPluginEnabled($event.target.checked)">
|
||||
<span class="toggler"></span>
|
||||
</label>
|
||||
<span class="plugin-toggle-status-text" x-text="$store.pluginToggle?.statusLabel"></span>
|
||||
|
|
|
|||
|
|
@ -1,261 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Plugin Switch</title>
|
||||
<script type="module">
|
||||
import { store } from "/components/plugins/toggle/plugin-toggle-store.js";
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div x-data>
|
||||
<template x-if="$store.pluginToggle">
|
||||
<div x-create="$store.pluginToggle.open($store.pluginListStore?.selectedPlugin || '')">
|
||||
|
||||
<!-- Error -->
|
||||
<div x-show="$store.pluginToggle.error" class="plugin-settings-error">
|
||||
<span class="material-symbols-outlined">error</span>
|
||||
<span x-text="$store.pluginToggle.error"></span>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div x-show="$store.pluginToggle.isLoading" class="plugin-settings-loading">
|
||||
<span class="material-symbols-outlined spinning">progress_activity</span>
|
||||
<span>Loading status...</span>
|
||||
</div>
|
||||
|
||||
<!-- Main UI -->
|
||||
<div x-show="!$store.pluginToggle.isLoading">
|
||||
|
||||
<!-- Scope selector + per-scope ON/OFF -->
|
||||
<div class="plugin-settings-scope-section">
|
||||
<div class="plugin-settings-scope-header">
|
||||
<div class="plugin-settings-scope-header-copy">
|
||||
<div class="plugin-settings-scope-title">Scope</div>
|
||||
<div class="plugin-settings-scope-desc">Select which project or agent profile to configure.</div>
|
||||
</div>
|
||||
<div class="plugin-settings-scope-header-toggle">
|
||||
<span class="plugin-settings-toolbar-label">Enabled</span>
|
||||
<label class="toggle" :class="{ 'disabled-appearance': $store.pluginToggle.alwaysEnabled || $store.pluginToggle.isSaving }">
|
||||
<input type="checkbox"
|
||||
:checked="$store.pluginToggle.status === 'enabled'"
|
||||
:disabled="$store.pluginToggle.alwaysEnabled || $store.pluginToggle.isSaving"
|
||||
@change="$store.pluginToggle.setEnabled($event.target.checked)">
|
||||
<span class="toggler"></span>
|
||||
</label>
|
||||
<span class="plugin-toggle-status-text" x-text="$store.pluginToggle.statusLabel"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plugin-settings-toolbar">
|
||||
<div class="plugin-settings-toolbar-row">
|
||||
|
||||
<label class="plugin-settings-toolbar-item">
|
||||
<span class="plugin-settings-toolbar-label">Project</span>
|
||||
<select x-model="$store.pluginToggle.projectName"
|
||||
@change="$store.pluginToggle.onScopeChanged()"
|
||||
:disabled="!$store.pluginToggle.perProjectConfig">
|
||||
<option value="">Global</option>
|
||||
<template x-for="p in $store.pluginToggle.projects" :key="p.key">
|
||||
<option :value="p.key" x-text="p.label"></option>
|
||||
</template>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="plugin-settings-toolbar-item">
|
||||
<span class="plugin-settings-toolbar-label">Agent profile</span>
|
||||
<select x-model="$store.pluginToggle.agentProfileKey"
|
||||
@change="$store.pluginToggle.onScopeChanged()"
|
||||
:disabled="!$store.pluginToggle.perAgentConfig">
|
||||
<option value="">All profiles</option>
|
||||
<template x-for="a in $store.pluginToggle.agentProfiles" :key="a.key">
|
||||
<option :value="a.key" x-text="a.label"></option>
|
||||
</template>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button type="button" class="button plugin-settings-toolbar-button" title="View all scope configs" @click="$store.pluginToggle.openConfigListModal()">
|
||||
<span class="icon material-symbols-outlined">list</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="$store.pluginToggle.noScopeRuleMessage" class="plugin-settings-scope-info">
|
||||
<span class="material-symbols-outlined">info</span>
|
||||
<span x-text="$store.pluginToggle.noScopeRuleMessage"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-footer" data-modal-footer>
|
||||
<template x-if="$store.pluginToggle.hasConfigScreen">
|
||||
<button type="button" class="btn btn-ok footer-btn-left" @click="$store.pluginToggle.openConfigWithScope()">
|
||||
<span class="icon material-symbols-outlined">settings</span>
|
||||
Configure Plugin
|
||||
</button>
|
||||
</template>
|
||||
<button class="btn btn-cancel" @click="window.closeModal?.()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-btn-left {
|
||||
margin-left: var(--spacing-lg);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Shared scope layout — mirrors plugin-settings.html */
|
||||
.plugin-settings-scope-section {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
margin: 1rem;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plugin-settings-scope-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.plugin-settings-scope-header-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.plugin-settings-scope-header-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-left: auto;
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plugin-settings-scope-title {
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-normal);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.plugin-settings-scope-desc {
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.plugin-settings-toolbar {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.plugin-settings-toolbar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(0.75rem, 2vw, 2rem);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.plugin-settings-toolbar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1 1 0;
|
||||
min-width: 12rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.plugin-settings-toolbar-item select {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.plugin-settings-toolbar-label {
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plugin-settings-toolbar-button {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.5rem 0.75rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.plugin-settings-scope-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.plugin-settings-scope-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.plugin-settings-scope-header-toggle {
|
||||
margin-left: 0;
|
||||
justify-content: flex-start;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.plugin-settings-toolbar-item {
|
||||
flex-basis: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plugin-settings-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 2rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.plugin-settings-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--color-error, #e74c3c);
|
||||
background: var(--color-error-bg, #fdecea);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.disabled-appearance {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.plugin-toggle-status-text {
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
min-width: 2rem;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -169,24 +169,6 @@ const model = {
|
|||
}
|
||||
},
|
||||
|
||||
async openConfigWithScope() {
|
||||
if (!this.pluginName) return;
|
||||
this.error = null;
|
||||
try {
|
||||
await settingsStore.openConfig(
|
||||
this.pluginName,
|
||||
this.projectName || "",
|
||||
this.agentProfileKey || ""
|
||||
);
|
||||
} catch (e) {
|
||||
this.error = e?.message || "Failed to open plugin config";
|
||||
}
|
||||
},
|
||||
|
||||
async openConfigListModal() {
|
||||
await window.openModal?.("/components/plugins/toggle/plugin-toggles.html");
|
||||
},
|
||||
|
||||
async switchToConfig(projectName, agentProfile) {
|
||||
this.projectName = projectName || "";
|
||||
this.agentProfileKey = agentProfile || "";
|
||||
|
|
@ -217,8 +199,14 @@ const model = {
|
|||
}
|
||||
},
|
||||
|
||||
async setEnabled(enabled) {
|
||||
async setEnabled(enabled, { projectName = this.projectName, agentProfileKey = this.agentProfileKey } = {}) {
|
||||
if (!this.pluginName || this.alwaysEnabled) return;
|
||||
const previousStatus = this.status;
|
||||
const previousProjectName = this.projectName;
|
||||
const previousAgentProfileKey = this.agentProfileKey;
|
||||
this.projectName = projectName || "";
|
||||
this.agentProfileKey = agentProfileKey || "";
|
||||
this.status = enabled ? 'enabled' : 'disabled';
|
||||
this.isSaving = true;
|
||||
try {
|
||||
const response = await fetchApi("/plugins", {
|
||||
|
|
@ -237,7 +225,11 @@ const model = {
|
|||
await new Promise(r => setTimeout(r, 100));
|
||||
await this.loadConfigs();
|
||||
} catch (e) {
|
||||
this.status = previousStatus;
|
||||
this.projectName = previousProjectName;
|
||||
this.agentProfileKey = previousAgentProfileKey;
|
||||
this.error = e.message || "Failed to save";
|
||||
throw e;
|
||||
} finally {
|
||||
this.isSaving = false;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue