Changeset 0.37.6 (#218)

Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
2026-03-21 16:21:59 +00:00
parent 74f3cb84e9
commit 5f1c733002
30 changed files with 2959 additions and 131 deletions
--- a/src/js/sw/surfaces/admin/models.js
+++ b/src/js/sw/surfaces/admin/models.js
@@ -0,0 +1,95 @@
+/**
+ * Admin > AI > Models
+ */
+const { html } = window;
+const { useState, useEffect, useCallback } = hooks;
+
+export default function ModelsSection() {
+    const [models, setModels] = useState([]);
+    const [search, setSearch] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [fetching, setFetching] = useState(false);
+
+    const load = useCallback(async () => {
+        try {
+            const data = await sw.api.admin.models.list();
+            setModels(Array.isArray(data) ? data : data.models || data.data || []);
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setLoading(false); }
+    }, []);
+
+    useEffect(() => { load(); }, []);
+
+    async function fetchModels() {
+        setFetching(true);
+        try {
+            const result = await sw.api.admin.models.fetch();
+            sw.toast(`Synced: ${result.added || 0} added, ${result.updated || 0} updated, ${result.total || 0} total`, 'success');
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setFetching(false); }
+    }
+
+    async function setVisibility(id, visibility) {
+        try {
+            await sw.api.admin.models.update(id, { visibility });
+            setModels(prev => prev.map(m => m.id === id ? { ...m, visibility } : m));
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    async function bulkSetVisibility(visibility) {
+        try {
+            await sw.api.admin.models.bulkUpdate(visibility);
+            sw.toast(`All models set to ${visibility}`, 'success');
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    const filtered = models.filter(m => {
+        if (!search) return true;
+        const q = search.toLowerCase();
+        return (m.model_id || m.id || '').toLowerCase().includes(q) ||
+               (m.display_name || '').toLowerCase().includes(q) ||
+               (m.provider_name || '').toLowerCase().includes(q);
+    });
+
+    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
+
+    return html`
+        <div>
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+                <button class="btn-small btn-primary" onClick=${fetchModels} disabled=${fetching}>
+                    ${fetching ? 'Fetching\u2026' : 'Fetch Models'}
+                </button>
+                <span class="text-muted" style="font-size:12px;">${models.length} models</span>
+                <div style="flex:1"></div>
+                <button class="btn-small" onClick=${() => bulkSetVisibility('enabled')}>Enable All</button>
+                <button class="btn-small" onClick=${() => bulkSetVisibility('disabled')}>Disable All</button>
+            </div>
+
+            <div class="admin-search" style="margin-bottom:12px;">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--text-3);flex-shrink:0;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                <input placeholder="Search models\u2026" value=${search} onInput=${e => setSearch(e.target.value)} autocomplete="off" />
+            </div>
+
+            <div class="admin-list">
+                ${filtered.length === 0 && html`<div class="empty-hint">No models found</div>`}
+                ${filtered.map(m => html`
+                    <div class="admin-surface-row" key=${m.id}>
+                        <div style="flex:1;min-width:0;">
+                            <strong>${m.display_name || m.model_id || m.id}</strong>
+                            ${m.display_name && m.model_id && html`<span class="text-muted" style="margin-left:8px;font-size:11px;">${m.model_id}</span>`}
+                            ${m.provider_name && html`<span class="badge" style="margin-left:6px;">${m.provider_name}</span>`}
+                        </div>
+                        <select value=${m.visibility || 'disabled'} onChange=${e => setVisibility(m.id, e.target.value)}
+                                style="font-size:11px;padding:2px 4px;">
+                            <option value="enabled">enabled</option>
+                            <option value="disabled">disabled</option>
+                            <option value="team">team only</option>
+                        </select>
+                    </div>
+                `)}
+            </div>
+        </div>
+    `;
+}