@samitouri / QOSami_Agents_Zero-2 / commits / a807e245

Use prototype-based context for plugin settings

Refactor plugin settings to use a per-modal prototype/context instead of binding directly to the global store. Introduces pluginSettingsPrototype (renamed export) and a lightweight instantiate helper (Alpine.magic('instantiate')) to clone the prototype into a modal-local context. Plugin config HTMLs (code_execution, infection_check, memory, text_editor) now bind UI fields to config.* and use context.* for modal-level state and actions; plugin settings components (plugin-settings.html, plugin-configs.html, plugin-settings-store.js, pluginListStore.js) were updated to create and consume the local context and to pass context into nested modals. Documentation and the SKILL guide were updated to describe the new modal contract and usage. This change scopes settings UI state to modal instances, enabling safer local state and easier integration with core-setting wrappers (use context.saveMode = 'core').

frdel committed Mar 9, 2026 at 21:19 UTC a807e2458bfa22e9040d5f2f5cc0fbf9420a004d
12 files changed +157 -113
AGENTS.md
+1 -1
@@ -128,7 +128,7 @@ Key Files:
128 - Location: Always develop new plugins in usr/plugins/.
129 - Manifest: Every plugin requires a plugin.yaml with name, description, version, and optionally settings_sections, per_project_config, per_agent_config, and always_enabled.
130 - Discovery: Conventions based on folder names (api/, tools/, webui/, extensions/).
131 -- Settings: Use get_plugin_config(plugin_name, agent=agent) to retrieve settings. Plugins can expose a UI for settings via webui/config.html. For plugins wrapping core settings, set $store.pluginSettings.saveMode = 'core' in x-init.
131 +- Settings: Use get_plugin_config(plugin_name, agent=agent) to retrieve settings. Plugins can expose a UI for settings via webui/config.html. Plugin settings modals instantiate a local context from $store.pluginSettingsPrototype; bind plugin fields to config.* and use context.* for modal-level state and actions. For plugins wrapping core settings, set context.saveMode = 'core' in x-init.
132 - Activation: Global and scoped activation rules are stored as .toggle-1 (ON) and .toggle-0 (OFF). Scoped rules are handled via the plugin "Switch" modal.
133
134 ### Lifecycle Synchronization
docs/agents/AGENTS.plugins.md
+3 -2
@@ -87,8 +87,9 @@ Core JS hooks can also expose runtime UI surfaces when static HTML breakpoints a
87 ## 4. Plugin Settings
88
89 1. Add webui/config.html to your plugin.
90 -2. Bind fields to $store.pluginSettings.settings.
91 -3. Settings are scoped per-project and per-agent automatically.
90 +2. The plugin settings wrapper instantiates a local modal context from $store.pluginSettingsPrototype.
91 +3. Bind plugin fields to config.* and use context.* for modal-level state and actions.
92 +4. Settings are scoped per-project and per-agent automatically.
93
94 ### Resolution Priority (Highest First)
95 1. project/.a0proj/agents/<profile>/plugins/<name>/config.json
plugins/code_execution/webui/config.html
+17 -17
@@ -5,7 +5,7 @@
5
6 <body>
7 <div x-data>
8 - <template x-if="$store.pluginSettings.settings">
8 + <template x-if="config">
9 <div>
10 <div class="section-title">Code Execution</div>
11 <div class="section-description">
@@ -22,7 +22,7 @@
22 </div>
23 </div>
24 <div class="field-control">
25 - <select x-model="$store.pluginSettings.settings.ssh_enabled">
25 + <select x-model="config.ssh_enabled">
26 <option value="auto">Auto</option>
27 <option value="true">SSH</option>
28 <option value="false">Local TTY</option>
@@ -31,7 +31,7 @@
31 </div>
32
33 <!-- SSH credentials (shown when SSH or Auto) -->
34 - <template x-if="$store.pluginSettings.settings.ssh_enabled !== 'false'">
34 + <template x-if="config.ssh_enabled !== 'false'">
35 <div>
36 <div class="field">
37 <div class="field-label">
@@ -39,7 +39,7 @@
39 <div class="field-description">Hostname or IP of the SSH target. Leave empty to use the RFC URL from settings.</div>
40 </div>
41 <div class="field-control">
42 - <input type="text" x-model="$store.pluginSettings.settings.ssh_addr" placeholder="(from RFC URL)" />
42 + <input type="text" x-model="config.ssh_addr" placeholder="(from RFC URL)" />
43 </div>
44 </div>
45
@@ -49,7 +49,7 @@
49 <div class="field-description">SSH port on the target host (default: 55022 for Docker RFC).</div>
50 </div>
51 <div class="field-control">
52 - <input type="number" min="1" max="65535" x-model.number="$store.pluginSettings.settings.ssh_port" />
52 + <input type="number" min="1" max="65535" x-model.number="config.ssh_port" />
53 </div>
54 </div>
55
@@ -59,7 +59,7 @@
59 <div class="field-description">Username for SSH login.</div>
60 </div>
61 <div class="field-control">
62 - <input type="text" x-model="$store.pluginSettings.settings.ssh_user" placeholder="root" />
62 + <input type="text" x-model="config.ssh_user" placeholder="root" />
63 </div>
64 </div>
65
@@ -69,7 +69,7 @@
69 <div class="field-description">Password for SSH login. Leave empty to use the dev root password (via RFC).</div>
70 </div>
71 <div class="field-control">
72 - <input type="password" autocomplete="off" x-model="$store.pluginSettings.settings.ssh_pass" placeholder="(from RFC)" />
72 + <input type="password" autocomplete="off" x-model="config.ssh_pass" placeholder="(from RFC)" />
73 </div>
74 </div>
75 </div>
@@ -87,7 +87,7 @@
87 <div class="field-description">Seconds to wait for the first output before returning control to the agent.</div>
88 </div>
89 <div class="field-control">
90 - <input type="number" min="1" x-model.number="$store.pluginSettings.settings.code_exec_first_output_timeout" />
90 + <input type="number" min="1" x-model.number="config.code_exec_first_output_timeout" />
91 </div>
92 </div>
93
@@ -97,7 +97,7 @@
97 <div class="field-description">Seconds to wait between output chunks before returning control.</div>
98 </div>
99 <div class="field-control">
100 - <input type="number" min="1" x-model.number="$store.pluginSettings.settings.code_exec_between_output_timeout" />
100 + <input type="number" min="1" x-model.number="config.code_exec_between_output_timeout" />
101 </div>
102 </div>
103
@@ -107,7 +107,7 @@
107 <div class="field-description">Hard cap on total execution time in seconds.</div>
108 </div>
109 <div class="field-control">
110 - <input type="number" min="1" x-model.number="$store.pluginSettings.settings.code_exec_max_exec_timeout" />
110 + <input type="number" min="1" x-model.number="config.code_exec_max_exec_timeout" />
111 </div>
112 </div>
113
@@ -117,7 +117,7 @@
117 <div class="field-description">Seconds of idle output before checking for dialog prompts.</div>
118 </div>
119 <div class="field-control">
120 - <input type="number" min="1" x-model.number="$store.pluginSettings.settings.code_exec_dialog_timeout" />
120 + <input type="number" min="1" x-model.number="config.code_exec_dialog_timeout" />
121 </div>
122 </div>
123
@@ -133,7 +133,7 @@
133 <div class="field-description">Seconds to wait for the first output.</div>
134 </div>
135 <div class="field-control">
136 - <input type="number" min="1" x-model.number="$store.pluginSettings.settings.output_first_output_timeout" />
136 + <input type="number" min="1" x-model.number="config.output_first_output_timeout" />
137 </div>
138 </div>
139
@@ -143,7 +143,7 @@
143 <div class="field-description">Seconds to wait between output chunks.</div>
144 </div>
145 <div class="field-control">
146 - <input type="number" min="1" x-model.number="$store.pluginSettings.settings.output_between_output_timeout" />
146 + <input type="number" min="1" x-model.number="config.output_between_output_timeout" />
147 </div>
148 </div>
149
@@ -153,7 +153,7 @@
153 <div class="field-description">Hard cap on total wait time in seconds.</div>
154 </div>
155 <div class="field-control">
156 - <input type="number" min="1" x-model.number="$store.pluginSettings.settings.output_max_exec_timeout" />
156 + <input type="number" min="1" x-model.number="config.output_max_exec_timeout" />
157 </div>
158 </div>
159
@@ -163,7 +163,7 @@
163 <div class="field-description">Seconds of idle output before checking for dialog prompts.</div>
164 </div>
165 <div class="field-control">
166 - <input type="number" min="1" x-model.number="$store.pluginSettings.settings.output_dialog_timeout" />
166 + <input type="number" min="1" x-model.number="config.output_dialog_timeout" />
167 </div>
168 </div>
169
@@ -181,7 +181,7 @@
181 </div>
182 </div>
183 <div class="field-control">
184 - <textarea rows="5" x-model="$store.pluginSettings.settings.prompt_patterns"></textarea>
184 + <textarea rows="5" x-model="config.prompt_patterns"></textarea>
185 </div>
186 </div>
187
@@ -193,7 +193,7 @@
193 </div>
194 </div>
195 <div class="field-control">
196 - <textarea rows="4" x-model="$store.pluginSettings.settings.dialog_patterns"></textarea>
196 + <textarea rows="4" x-model="config.dialog_patterns"></textarea>
197 </div>
198 </div>
199 </div>
plugins/infection_check/webui/config.html
+6 -6
@@ -2,7 +2,7 @@
2 <head><title>Infection Check</title></head>
3 <body>
4 <div x-data>
5 - <template x-if="$store.pluginSettings.settings">
5 + <template x-if="config">
6 <div>
7 <div class="section-title">Infection Check</div>
8 <div class="section-description">
@@ -19,7 +19,7 @@
19 </div>
20 </div>
21 <div class="field-control">
22 - <select x-model="$store.pluginSettings.settings.mode">
22 + <select x-model="config.mode">
23 <option value="thoughts">Thoughts (faster)</option>
24 <option value="complete">Complete (thorough)</option>
25 </select>
@@ -32,7 +32,7 @@
32 <div class="field-description">Which model runs the security analysis.</div>
33 </div>
34 <div class="field-control">
35 - <select x-model="$store.pluginSettings.settings.model">
35 + <select x-model="config.model">
36 <option value="utility">Utility model</option>
37 <option value="main">Main model</option>
38 </select>
@@ -46,7 +46,7 @@
46 </div>
47 <div class="field-control">
48 <input type="number" min="0" max="10"
49 - x-model.number="$store.pluginSettings.settings.max_clarifications" />
49 + x-model.number="config.max_clarifications" />
50 </div>
51 </div>
52
@@ -57,7 +57,7 @@
57 </div>
58 <div class="field-control">
59 <input type="number" min="0" max="100"
60 - x-model.number="$store.pluginSettings.settings.history_size" />
60 + x-model.number="config.history_size" />
61 </div>
62 </div>
63
@@ -68,7 +68,7 @@
68 </div>
69 <div class="field-control" style="width:100%;">
70 <textarea rows="14" style="width:100%;font-family:monospace;font-size:0.85em;"
71 - x-model="$store.pluginSettings.settings.prompt"></textarea>
71 + x-model="config.prompt"></textarea>
72 </div>
73 </div>
74
plugins/memory/webui/config.html
+21 -21
@@ -5,7 +5,7 @@
5
6 <body>
7 <div x-data>
8 - <template x-if="$store.pluginSettings.settings">
8 + <template x-if="config">
9 <div>
10 <div class="section-title">Memory</div>
11 <div class="section-description">
@@ -13,7 +13,7 @@
13 context awareness.
14 </div>
15
16 - <div class="field" x-show="$store.pluginSettings.projectName">
16 + <div class="field" x-show="context.projectName">
17 <div class="field-label">
18 <div class="field-title">Project Isolation</div>
19 <div class="field-description">
@@ -22,7 +22,7 @@
22 </div>
23 <div class="field-control">
24 <label class="toggle">
25 - <input type="checkbox" x-model="$store.pluginSettings.settings.project_memory_isolation" />
25 + <input type="checkbox" x-model="config.project_memory_isolation" />
26 <span class="toggler"></span>
27 </label>
28 </div>
@@ -36,7 +36,7 @@
36 </div>
37 </div>
38 <div class="field-control">
39 - <input type="text" x-model="$store.pluginSettings.settings.agent_memory_subdir" placeholder="Auto (Project-isolated)" />
39 + <input type="text" x-model="config.agent_memory_subdir" placeholder="Auto (Project-isolated)" />
40 </div>
41 </div>
42
@@ -64,7 +64,7 @@
64 </div>
65 <div class="field-control">
66 <label class="toggle">
67 - <input type="checkbox" x-model="$store.pluginSettings.settings.memory_recall_enabled" />
67 + <input type="checkbox" x-model="config.memory_recall_enabled" />
68 <span class="toggler"></span>
69 </label>
70 </div>
@@ -80,7 +80,7 @@
80 </div>
81 <div class="field-control">
82 <label class="toggle">
83 - <input type="checkbox" x-model="$store.pluginSettings.settings.memory_recall_delayed" />
83 + <input type="checkbox" x-model="config.memory_recall_delayed" />
84 <span class="toggler"></span>
85 </label>
86 </div>
@@ -96,7 +96,7 @@
96 </div>
97 <div class="field-control">
98 <label class="toggle">
99 - <input type="checkbox" x-model="$store.pluginSettings.settings.memory_recall_query_prep" />
99 + <input type="checkbox" x-model="config.memory_recall_query_prep" />
100 <span class="toggler"></span>
101 </label>
102 </div>
@@ -113,7 +113,7 @@
113 <div class="field-control">
114 <label class="toggle">
115 <input type="checkbox"
116 - x-model="$store.pluginSettings.settings.memory_recall_post_filter" />
116 + x-model="config.memory_recall_post_filter" />
117 <span class="toggler"></span>
118 </label>
119 </div>
@@ -129,9 +129,9 @@
129 </div>
130 <div class="field-control">
131 <input type="range" min="1" max="10" step="1"
132 - x-model.number="$store.pluginSettings.settings.memory_recall_interval" />
132 + x-model.number="config.memory_recall_interval" />
133 <span class="range-value"
134 - x-text="$store.pluginSettings.settings.memory_recall_interval"></span>
134 + x-text="config.memory_recall_interval"></span>
135 </div>
136 </div>
137
@@ -144,7 +144,7 @@
144 </div>
145 <div class="field-control">
146 <input type="number"
147 - x-model.number="$store.pluginSettings.settings.memory_recall_history_len" />
147 + x-model.number="config.memory_recall_history_len" />
148 </div>
149 </div>
150
@@ -157,9 +157,9 @@
157 </div>
158 <div class="field-control">
159 <input type="range" min="0" max="1" step="0.01"
160 - x-model.number="$store.pluginSettings.settings.memory_recall_similarity_threshold" />
160 + x-model.number="config.memory_recall_similarity_threshold" />
161 <span class="range-value"
162 - x-text="$store.pluginSettings.settings.memory_recall_similarity_threshold"></span>
162 + x-text="config.memory_recall_similarity_threshold"></span>
163 </div>
164 </div>
165
@@ -172,7 +172,7 @@
172 </div>
173 <div class="field-control">
174 <input type="number"
175 - x-model.number="$store.pluginSettings.settings.memory_recall_memories_max_search" />
175 + x-model.number="config.memory_recall_memories_max_search" />
176 </div>
177 </div>
178
@@ -185,7 +185,7 @@
185 </div>
186 <div class="field-control">
187 <input type="number"
188 - x-model.number="$store.pluginSettings.settings.memory_recall_memories_max_result" />
188 + x-model.number="config.memory_recall_memories_max_result" />
189 </div>
190 </div>
191
@@ -198,7 +198,7 @@
198 </div>
199 <div class="field-control">
200 <input type="number"
201 - x-model.number="$store.pluginSettings.settings.memory_recall_solutions_max_search" />
201 + x-model.number="config.memory_recall_solutions_max_search" />
202 </div>
203 </div>
204
@@ -211,7 +211,7 @@
211 </div>
212 <div class="field-control">
213 <input type="number"
214 - x-model.number="$store.pluginSettings.settings.memory_recall_solutions_max_result" />
214 + x-model.number="config.memory_recall_solutions_max_result" />
215 </div>
216 </div>
217
@@ -225,7 +225,7 @@
225 <div class="field-control">
226 <label class="toggle">
227 <input type="checkbox"
228 - x-model="$store.pluginSettings.settings.memory_memorize_enabled" />
228 + x-model="config.memory_memorize_enabled" />
229 <span class="toggler"></span>
230 </label>
231 </div>
@@ -242,7 +242,7 @@
242 <div class="field-control">
243 <label class="toggle">
244 <input type="checkbox"
245 - x-model="$store.pluginSettings.settings.memory_memorize_consolidation" />
245 + x-model="config.memory_memorize_consolidation" />
246 <span class="toggler"></span>
247 </label>
248 </div>
@@ -259,9 +259,9 @@
259 </div>
260 <div class="field-control">
261 <input type="range" min="0" max="1" step="0.01"
262 - x-model.number="$store.pluginSettings.settings.memory_memorize_replace_threshold" />
262 + x-model.number="config.memory_memorize_replace_threshold" />
263 <span class="range-value"
264 - x-text="$store.pluginSettings.settings.memory_memorize_replace_threshold"></span>
264 + x-text="config.memory_memorize_replace_threshold"></span>
265 </div>
266 </div>
267 </div>
plugins/text_editor/webui/config.html
+4 -4
@@ -5,7 +5,7 @@
5
6 <body>
7 <div x-data>
8 - <template x-if="$store.pluginSettings.settings">
8 + <template x-if="config">
9 <div>
10 <div class="section-title">Text Editor</div>
11 <div class="section-description">
@@ -21,7 +21,7 @@
21 </div>
22 <div class="field-control">
23 <input type="number" min="50" max="5000"
24 - x-model.number="$store.pluginSettings.settings.max_line_tokens" />
24 + x-model.number="config.max_line_tokens" />
25 </div>
26 </div>
27
@@ -34,7 +34,7 @@
34 </div>
35 <div class="field-control">
36 <input type="number" min="10" max="1000"
37 - x-model.number="$store.pluginSettings.settings.default_line_count" />
37 + x-model.number="config.default_line_count" />
38 </div>
39 </div>
40
@@ -47,7 +47,7 @@
47 </div>
48 <div class="field-control">
49 <input type="number" min="500" max="50000"
50 - x-model.number="$store.pluginSettings.settings.max_total_read_tokens" />
50 + x-model.number="config.max_total_read_tokens" />
51 </div>
52 </div>
53 </div>
skills/a0-create-plugin/SKILL.md
+5 -5
@@ -88,7 +88,7 @@ If your plugin needs user-configurable settings, add `webui/config.html`. The sy
88
89 ### Settings modal contract
90
91 -The modal provides Project + Agent profile context selectors. Your config.html binds to `$store.pluginSettings.settings`:
91 +The modal provides Project + Agent profile context selectors. The plugin settings wrapper instantiates a local modal context from `$store.pluginSettingsPrototype`. Inside `config.html`, bind plugin fields to `config.*` and use `context.*` for modal-level state and actions:
92
93 ```html
94 <html>
@@ -100,14 +100,14 @@ The modal provides Project + Agent profile context selectors. Your config.html b
100 </head>
101 <body>
102 <div x-data>
103 - <input x-model="$store.pluginSettings.settings.my_key" />
104 - <input type="checkbox" x-model="$store.pluginSettings.settings.feature_enabled" />
103 + <input x-model="config.my_key" />
104 + <input type="checkbox" x-model="config.feature_enabled" />
105 </div>
106 </body>
107 </html>
108 ```
109
110 -The modal's Save button persists `$store.pluginSettings.settings` to `config.json` in the correct scope (project/agent/global).
110 +The modal's Save button persists `config` to `config.json` in the correct scope (project/agent/global).
111
112 ### Surfacing core settings (e.g. memory pattern)
113
@@ -115,7 +115,7 @@ If your plugin exposes existing core settings rather than plugin-specific ones,
115
116 ```html
117 <div x-data x-init="
118 - $store.pluginSettings.saveMode = 'core';
118 + context.saveMode = 'core';
119 if ($store.settings && !$store.settings.settings) $store.settings.onOpen();
120 ">
121 <x-component path="settings/agent/memory.html"></x-component>
webui/components/plugins/list/pluginListStore.js
+1 -1
@@ -63,7 +63,7 @@ const model = {
63 const pluginToggleStore = Alpine.store("pluginToggle");
64 if (pluginToggleStore?.open) await pluginToggleStore.open(plugin);
65
66 - const pluginSettingsStore = Alpine.store("pluginSettings");
66 + const pluginSettingsStore = Alpine.store("pluginSettingsPrototype");
67 if (!pluginSettingsStore?.open) {
68 throw new Error("Plugin settings store is unavailable.");
69 }
webui/components/plugins/plugin-configs.html
+20 -14
@@ -6,47 +6,53 @@
6 </script>
7 </head>
8 <body>
9 - <div x-data>
10 - <template x-if="$store.pluginSettings">
11 - <div x-create="$store.pluginSettings.loadConfigList()" class="plugin-configs-container">
12 -
13 - <div x-show="$store.pluginSettings.configsError" class="plugin-configs-error">
9 + <div x-data="(() => {
10 + const modals = Array.from(document.querySelectorAll('.modal.show'));
11 + const parentModal = /** @type {HTMLElement & { __pluginSettingsContext?: object }} */ (modals[modals.length - 2] || null);
12 + return {
13 + context: parentModal?.__pluginSettingsContext || null,
14 + };
15 + })()">
16 + <template x-if="context">
17 + <div x-create="context.loadConfigList()" class="plugin-configs-container">
18 +
19 + <div x-show="context.configsError" class="plugin-configs-error">
20 <span class="material-symbols-outlined">error</span>
15 - <span x-text="$store.pluginSettings.configsError"></span>
21 + <span x-text="context.configsError"></span>
22 </div>
23
18 - <div x-show="$store.pluginSettings.isListingConfigs" class="plugin-configs-loading">
24 + <div x-show="context.isListingConfigs" class="plugin-configs-loading">
25 <span class="material-symbols-outlined spinning">progress_activity</span>
26 <span>Loading configurations...</span>
27 </div>
28
23 - <div x-show="!$store.pluginSettings.isListingConfigs" class="plugin-configs-list">
24 - <template x-if="($store.pluginSettings.configs || []).length === 0">
29 + <div x-show="!context.isListingConfigs" class="plugin-configs-list">
30 + <template x-if="(context.configs || []).length === 0">
31 <div class="plugin-configs-empty">No configurations found.</div>
32 </template>
33
28 - <template x-for="cfg in ($store.pluginSettings.configs || [])" :key="(cfg.project_name || '') + '|' + (cfg.agent_profile || '')">
34 + <template x-for="cfg in (context.configs || [])" :key="(cfg.project_name || '') + '|' + (cfg.agent_profile || '')">
35 <div class="plugin-configs-row">
36 <div class="plugin-configs-scope">
37 <div class="plugin-configs-scope-top">
38 <div class="plugin-configs-scope-line">
39 <span class="plugin-configs-scope-key">Project:</span>
34 - <span x-text="$store.pluginSettings.projectLabel(cfg.project_name || '')"></span>
40 + <span x-text="context.projectLabel(cfg.project_name || '')"></span>
41 </div>
42 <div class="plugin-configs-scope-line">
43 <span class="plugin-configs-scope-key">Agent profile:</span>
38 - <span x-text="$store.pluginSettings.agentProfileLabel(cfg.agent_profile || '')"></span>
44 + <span x-text="context.agentProfileLabel(cfg.agent_profile || '')"></span>
45 </div>
46 </div>
47 <div class="plugin-configs-scope-sub" x-text="cfg.path || ''"></div>
48 </div>
49
50 <div class="plugin-configs-actions">
45 - <button type="button" class="button" @click="$store.pluginSettings.switchToConfig(cfg.project_name || '', cfg.agent_profile || '')">
51 + <button type="button" class="button" @click="context.switchToConfig(cfg.project_name || '', cfg.agent_profile || '')">
52 <span class="icon material-symbols-outlined">list</span>
53 Show
54 </button>
49 - <button type="button" class="button cancel icon-button" title="Delete" @click="$confirmClick($event, () => $store.pluginSettings.deleteConfig(cfg.project_name || '', cfg.agent_profile || ''))">
55 + <button type="button" class="button cancel icon-button" title="Delete" @click="$confirmClick($event, () => context.deleteConfig(cfg.project_name || '', cfg.agent_profile || ''))">
56 <span class="icon material-symbols-outlined">delete</span>
57 </button>
58 </div>
webui/components/plugins/plugin-settings-store.js
+1 -1
@@ -355,4 +355,4 @@ const model = {
355 },
356 };
357
358 -export const store = createStore("pluginSettings", model);
358 +export const store = createStore("pluginSettingsPrototype", model);
webui/components/plugins/plugin-settings.html
+51 -41
@@ -6,14 +6,23 @@
6 </script>
7 </head>
8 <body>
9 - <div x-data>
10 - <template x-if="$store.pluginSettings">
11 - <div x-create="$store.pluginSettings.onModalOpen()"
12 - x-destroy="$store.pluginSettings.cleanup(); $store.pluginListStore?.refresh()">
9 + <div x-data="(() => {
10 + const context = $instantiate($store.pluginSettingsPrototype);
11 + return {
12 + context,
13 + get config() {
14 + return this.context.settings;
15 + },
16 + };
17 + })()">
18 + <template x-if="context">
19 + <div>
20 + <div x-create="context.onModalOpen(); (() => { const modal = $el.closest('.modal'); if (modal) modal.__pluginSettingsContext = context; })()"
21 + x-destroy="context.cleanup(); $store.pluginListStore?.refresh()">
22
23 <!-- Context toolbar: Project + Agent profile (only when at least one scope is configurable) -->
24 <div class="plugin-settings-scope-section"
16 - x-show="$store.pluginSettings.perProjectConfig || $store.pluginSettings.perAgentConfig">
25 + x-show="context.perProjectConfig || context.perAgentConfig">
26 <div class="plugin-settings-scope-header">
27 <div class="plugin-settings-scope-title">Settings scope</div>
28 <div class="plugin-settings-scope-desc">This plugin supports settings per project or agent profile.</div>
@@ -23,12 +32,12 @@
32
33 <label class="plugin-settings-toolbar-item">
34 <span class="plugin-settings-toolbar-label">Project</span>
26 - <select x-model="$store.pluginSettings.projectName"
27 - x-init="$nextTick(() => $el.value = $store.pluginSettings.projectName)"
28 - @change="$store.pluginSettings.onScopeChanged()"
29 - :disabled="!$store.pluginSettings.perProjectConfig">
35 + <select x-model="context.projectName"
36 + x-init="$nextTick(() => $el.value = context.projectName)"
37 + @change="context.onScopeChanged()"
38 + :disabled="!context.perProjectConfig">
39 <option value="">Global</option>
31 - <template x-for="project in $store.pluginSettings.projects" :key="project.key">
40 + <template x-for="project in context.projects" :key="project.key">
41 <option :value="project.key" x-text="project.label"></option>
42 </template>
43 </select>
@@ -36,18 +45,18 @@
45
46 <label class="plugin-settings-toolbar-item">
47 <span class="plugin-settings-toolbar-label">Agent profile</span>
39 - <select x-model="$store.pluginSettings.agentProfileKey"
40 - x-init="$nextTick(() => $el.value = $store.pluginSettings.agentProfileKey)"
41 - @change="$store.pluginSettings.onScopeChanged()"
42 - :disabled="!$store.pluginSettings.perAgentConfig">
48 + <select x-model="context.agentProfileKey"
49 + x-init="$nextTick(() => $el.value = context.agentProfileKey)"
50 + @change="context.onScopeChanged()"
51 + :disabled="!context.perAgentConfig">
52 <option value="">All profiles</option>
44 - <template x-for="profile in $store.pluginSettings.agentProfiles" :key="profile.key">
53 + <template x-for="profile in context.agentProfiles" :key="profile.key">
54 <option :value="profile.key" x-text="profile.label"></option>
55 </template>
56 </select>
57 </label>
58
50 - <button type="button" class="button plugin-settings-toolbar-button" title="Show existing configurations" @click="$store.pluginSettings.openConfigListModal()">
59 + <button type="button" class="button plugin-settings-toolbar-button" title="Show existing configurations" @click="context.openConfigListModal()">
60 <span class="icon material-symbols-outlined">list</span>
61 </button>
62
@@ -70,50 +79,51 @@
79 </div>
80 </div>
81
73 - <div x-show="$store.pluginSettings.scopeMismatchMessage" class="plugin-settings-scope-info">
82 + <div x-show="context.scopeMismatchMessage" class="plugin-settings-scope-info">
83 <span class="material-symbols-outlined">info</span>
75 - <span x-text="$store.pluginSettings.scopeMismatchMessage"></span>
84 + <span x-text="context.scopeMismatchMessage"></span>
85 </div>
86 </div>
87
88 <!-- Error -->
80 - <div x-show="$store.pluginSettings.error" class="plugin-settings-error">
89 + <div x-show="context.error" class="plugin-settings-error">
90 <span class="material-symbols-outlined">error</span>
82 - <span x-text="$store.pluginSettings.error"></span>
91 + <span x-text="context.error"></span>
92 </div>
93
94 <!-- Loading -->
86 - <div x-show="$store.pluginSettings.isLoading" class="plugin-settings-loading">
95 + <div x-show="context.isLoading" class="plugin-settings-loading">
96 <span class="material-symbols-outlined spinning">progress_activity</span>
97 <span>Loading settings...</span>
98 </div>
99
100 <!-- Plugin settings body: plugin provides /plugins/<name>/webui/config.html -->
92 - <div x-show="!$store.pluginSettings.isLoading"
101 + <div x-show="!context.isLoading"
102 class="plugin-settings-body"
94 - x-html="$store.pluginSettings.settingsComponentHtml">
103 + x-html="context.settingsComponentHtml">
104 </div>
105
106 </div>
98 - </template>
99 - </div>
107
101 - <!-- Footer (pinned outside scroll area) -->
102 - <div class="modal-footer" data-modal-footer>
103 - <button class="btn btn-ok"
104 - @click="$store.pluginSettings.save()"
105 - :disabled="$store.pluginSettings?.isSaving || $store.pluginSettings?.isLoading">
106 - Save
107 - </button>
108 - <button class="btn"
109 - @click="$store.pluginSettings.resetToDefault()"
110 - :disabled="$store.pluginSettings?.isSaving || $store.pluginSettings?.isLoading">
111 - Default
112 - </button>
113 - <button class="btn btn-cancel"
114 - @click="window.closeModal?.()">
115 - Cancel
116 - </button>
108 + <!-- Footer (pinned outside scroll area) -->
109 + <div class="modal-footer" data-modal-footer>
110 + <button class="btn btn-ok"
111 + @click="context.save()"
112 + :disabled="context?.isSaving || context?.isLoading">
113 + Save
114 + </button>
115 + <button class="btn"
116 + @click="context.resetToDefault()"
117 + :disabled="context?.isSaving || context?.isLoading">
118 + Default
119 + </button>
120 + <button class="btn btn-cancel"
121 + @click="window.closeModal?.()">
122 + Cancel
123 + </button>
124 + </div>
125 + </div>
126 + </template>
127 </div>
128
129 <style>
webui/js/initFw.js
+27
@@ -150,3 +150,30 @@ Alpine.directive(
150 cleanup(() => clearInterval(intervalId));
151 }
152 );
153 +
154 +
155 + // clone existing global store into standalone instance
156 + globalThis.Alpine.magic('instantiate', () => (src) => {
157 + const out = {};
158 + const desc = Object.getOwnPropertyDescriptors(src);
159 +
160 + for (const k in desc) {
161 + const d = desc[k];
162 +
163 + if (d.get || d.set || typeof d.value === "function") {
164 + Object.defineProperty(out, k, d);
165 + } else {
166 + const v = d.value;
167 + Object.defineProperty(out, k, {
168 + ...d,
169 + value: Array.isArray(v)
170 + ? v.map(i => (i && typeof i === "object" ? { ...i } : i))
171 + : v && typeof v === "object"
172 + ? { ...v }
173 + : v
174 + });
175 + }
176 + }
177 +
178 + return out;
179 +});
\ No newline at end of file