Changeset 0.22.7 (#149)
This commit is contained in:
@@ -1,193 +1,117 @@
|
||||
{{/* Admin surface — full admin panel with category/section navigation.
|
||||
Categories and sections mirror the SPA's ADMIN_SECTIONS structure.
|
||||
Server-rendered sections: roles, routing, providers, models, teams, users, settings.
|
||||
Hybrid sections: container div + JS loader fills content. */}}
|
||||
{{/*
|
||||
Admin surface — matches switchboard-prototype-admin.jsx.
|
||||
Full-page layout: topbar (with category tabs) + left nav + content area.
|
||||
JS (admin-handlers.js, ui-admin.js) populates dynamic sections.
|
||||
*/}}
|
||||
|
||||
{{define "surface-admin"}}
|
||||
<div class="admin-surface">
|
||||
{{/* ── Category bar (top) ───────────────── */}}
|
||||
<div class="admin-cat-bar">
|
||||
{{$cat := .Data.Category}}
|
||||
<button class="admin-cat{{if eq $cat "people"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/users'">People</button>
|
||||
<button class="admin-cat{{if eq $cat "ai"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/providers'">AI</button>
|
||||
<button class="admin-cat{{if eq $cat "routing"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/health'">Routing</button>
|
||||
<button class="admin-cat{{if eq $cat "system"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/settings'">System</button>
|
||||
<button class="admin-cat{{if eq $cat "monitoring"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/usage'">Monitoring</button>
|
||||
<div class="admin-cat-spacer"></div>
|
||||
<a href="{{.BasePath}}/" class="admin-back-link">← Chat</a>
|
||||
<div class="surface-admin">
|
||||
|
||||
{{/* Top Bar */}}
|
||||
<div class="admin-topbar">
|
||||
<a href="{{.BasePath}}/" class="admin-topbar-back">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
|
||||
Back to Chat
|
||||
</a>
|
||||
<div class="admin-topbar-sep"></div>
|
||||
<span class="admin-topbar-title">🔀 Administration</span>
|
||||
|
||||
{{/* Category tabs */}}
|
||||
<div class="admin-category-tabs" id="adminCategoryTabs">
|
||||
{{$section := .Section}}
|
||||
{{$base := .BasePath}}
|
||||
<a href="{{$base}}/admin/users" class="admin-cat-btn{{if eq $section "users"}} active{{else if eq $section "teams"}} active{{else if eq $section "groups"}} active{{end}}" data-cat="people">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||
People
|
||||
</a>
|
||||
<a href="{{$base}}/admin/providers" class="admin-cat-btn{{if eq $section "providers"}} active{{else if eq $section "models"}} active{{else if eq $section "personas"}} active{{else if eq $section "roles"}} active{{else if eq $section "knowledgeBases"}} active{{else if eq $section "memory"}} active{{end}}" data-cat="ai">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/></svg>
|
||||
AI
|
||||
</a>
|
||||
<a href="{{$base}}/admin/health" class="admin-cat-btn{{if eq $section "health"}} active{{else if eq $section "routing"}} active{{else if eq $section "capabilities"}} active{{end}}" data-cat="routing">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
Routing
|
||||
</a>
|
||||
<a href="{{$base}}/admin/settings" class="admin-cat-btn{{if eq $section "settings"}} active{{else if eq $section "storage"}} active{{else if eq $section "extensions"}} active{{end}}" data-cat="system">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09"/></svg>
|
||||
System
|
||||
</a>
|
||||
<a href="{{$base}}/admin/usage" class="admin-cat-btn{{if eq $section "usage"}} active{{else if eq $section "audit"}} active{{else if eq $section "stats"}} active{{end}}" data-cat="monitoring">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
Monitoring
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-body">
|
||||
{{/* ── Section sidebar ──────────────── */}}
|
||||
<nav class="admin-sidebar">
|
||||
{{$section := .Section}}
|
||||
{{$bp := .BasePath}}
|
||||
{{if eq $cat "people"}}
|
||||
<a href="{{$bp}}/admin/users" class="admin-nav-link{{if eq $section "users"}} active{{end}}">Users</a>
|
||||
<a href="{{$bp}}/admin/teams" class="admin-nav-link{{if eq $section "teams"}} active{{end}}">Teams</a>
|
||||
<a href="{{$bp}}/admin/groups" class="admin-nav-link{{if eq $section "groups"}} active{{end}}">Groups</a>
|
||||
{{else if eq $cat "ai"}}
|
||||
<a href="{{$bp}}/admin/providers" class="admin-nav-link{{if eq $section "providers"}} active{{end}}">Providers</a>
|
||||
<a href="{{$bp}}/admin/models" class="admin-nav-link{{if eq $section "models"}} active{{end}}">Models</a>
|
||||
<a href="{{$bp}}/admin/presets" class="admin-nav-link{{if eq $section "presets"}} active{{end}}">Personas</a>
|
||||
<a href="{{$bp}}/admin/roles" class="admin-nav-link{{if eq $section "roles"}} active{{end}}">Roles</a>
|
||||
<a href="{{$bp}}/admin/knowledgeBases" class="admin-nav-link{{if eq $section "knowledgeBases"}} active{{end}}">Knowledge</a>
|
||||
<a href="{{$bp}}/admin/memory" class="admin-nav-link{{if eq $section "memory"}} active{{end}}">Memory</a>
|
||||
{{else if eq $cat "routing"}}
|
||||
<a href="{{$bp}}/admin/health" class="admin-nav-link{{if eq $section "health"}} active{{end}}">Health</a>
|
||||
<a href="{{$bp}}/admin/routing" class="admin-nav-link{{if eq $section "routing"}} active{{end}}">Routing</a>
|
||||
<a href="{{$bp}}/admin/capabilities" class="admin-nav-link{{if eq $section "capabilities"}} active{{end}}">Capabilities</a>
|
||||
{{else if eq $cat "system"}}
|
||||
<a href="{{$bp}}/admin/settings" class="admin-nav-link{{if eq $section "settings"}} active{{end}}">Settings</a>
|
||||
<a href="{{$bp}}/admin/storage" class="admin-nav-link{{if eq $section "storage"}} active{{end}}">Storage</a>
|
||||
<a href="{{$bp}}/admin/extensions" class="admin-nav-link{{if eq $section "extensions"}} active{{end}}">Extensions</a>
|
||||
{{else if eq $cat "monitoring"}}
|
||||
<a href="{{$bp}}/admin/usage" class="admin-nav-link{{if eq $section "usage"}} active{{end}}">Usage</a>
|
||||
<a href="{{$bp}}/admin/audit" class="admin-nav-link{{if eq $section "audit"}} active{{end}}">Audit</a>
|
||||
<a href="{{$bp}}/admin/stats" class="admin-nav-link{{if eq $section "stats"}} active{{end}}">Stats</a>
|
||||
{{end}}
|
||||
</nav>
|
||||
{{/* Left Nav */}}
|
||||
<div class="admin-nav" id="adminNav">
|
||||
{{/* People sections */}}
|
||||
{{if eq $section "users"}}<a href="{{$base}}/admin/users" class="admin-nav-link active">Users</a>
|
||||
{{else}}<a href="{{$base}}/admin/users" class="admin-nav-link">Users</a>{{end}}
|
||||
{{if eq $section "teams"}}<a href="{{$base}}/admin/teams" class="admin-nav-link active">Teams</a>
|
||||
{{else}}<a href="{{$base}}/admin/teams" class="admin-nav-link">Teams</a>{{end}}
|
||||
{{if eq $section "groups"}}<a href="{{$base}}/admin/groups" class="admin-nav-link active">Groups</a>
|
||||
{{else}}<a href="{{$base}}/admin/groups" class="admin-nav-link">Groups</a>{{end}}
|
||||
</div>
|
||||
|
||||
{{/* ── Content area ─────────────────── */}}
|
||||
{{/* Content Area */}}
|
||||
<div class="admin-content">
|
||||
{{if eq .Section "roles"}}{{template "admin-roles" .}}
|
||||
{{else if eq .Section "routing"}}{{template "admin-routing" .}}
|
||||
{{else if eq .Section "providers"}}{{template "admin-providers" .}}
|
||||
{{else if eq .Section "models"}}{{template "admin-models" .}}
|
||||
{{else if eq .Section "teams"}}{{template "admin-teams" .}}
|
||||
{{else if eq .Section "users"}}{{template "admin-users" .}}
|
||||
{{else if eq .Section "settings"}}{{template "admin-settings" .}}
|
||||
{{else}}
|
||||
{{/* Hybrid: container for JS-loaded sections */}}
|
||||
<div class="admin-page" id="adminHybridContainer" data-section="{{.Section}}">
|
||||
<div class="admin-loading">Loading {{.Section}}…</div>
|
||||
<div class="admin-content-header">
|
||||
<h2 id="adminSectionTitle">{{$section}}</h2>
|
||||
<div style="flex:1;"></div>
|
||||
<div class="admin-search">
|
||||
<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 id="adminSearch" placeholder="Search…" autocomplete="off">
|
||||
</div>
|
||||
{{end}}
|
||||
<button id="adminAddBtn" class="btn-md btn-primary" style="display:none;">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<div class="admin-content-body" id="adminContentBody" data-section="{{$section}}">
|
||||
{{/* Populated by admin-handlers.js */}}
|
||||
<div class="settings-placeholder" id="adminDynamic">Loading…</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toastContainer" class="toast-container"></div>
|
||||
|
||||
{{/* Confirm dialog */}}
|
||||
<div id="confirmModal" class="modal-overlay">
|
||||
<div class="modal" style="max-width:380px;">
|
||||
<div class="modal-header">
|
||||
<h2 id="confirmTitle">Confirm</h2>
|
||||
<button class="modal-close" onclick="closeModal('confirmModal')">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="confirmMessage" style="color:var(--text-2);font-size:14px;line-height:1.65;"></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-md btn-ghost" onclick="closeModal('confirmModal')">Cancel</button>
|
||||
<button id="confirmOkBtn" class="btn-md btn-danger">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "css-admin"}}
|
||||
<style>
|
||||
/* ── Admin surface layout ───────────────── */
|
||||
.admin-surface { display: flex; flex-direction: column; height: 100%; font-family: inherit; }
|
||||
.admin-cat-bar {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
padding: 6px 12px; border-bottom: 1px solid var(--border, #2a2a2a);
|
||||
flex-shrink: 0; background: var(--bg-secondary, #1a1a1e);
|
||||
}
|
||||
.admin-cat {
|
||||
background: none; border: none; color: var(--text-secondary, #888);
|
||||
padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
|
||||
}
|
||||
.admin-cat:hover { background: var(--hover, #252528); color: var(--text-primary, #e0e0e0); }
|
||||
.admin-cat.active { background: var(--bg-tertiary, #252528); color: var(--text-primary, #e0e0e0); font-weight: 600; }
|
||||
.admin-cat-spacer { flex: 1; }
|
||||
.admin-back-link { color: var(--text-secondary, #888); text-decoration: none; font-size: 13px; padding: 5px 8px; }
|
||||
.admin-back-link:hover { color: var(--text-primary, #e0e0e0); }
|
||||
|
||||
.admin-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
|
||||
.admin-sidebar {
|
||||
width: 160px; border-right: 1px solid var(--border, #2a2a2a);
|
||||
padding: 8px; overflow-y: auto; flex-shrink: 0;
|
||||
}
|
||||
.admin-nav-link {
|
||||
display: block; padding: 6px 10px; border-radius: 6px;
|
||||
color: var(--text-primary, #e0e0e0); text-decoration: none;
|
||||
font-size: 13px; margin-bottom: 2px;
|
||||
}
|
||||
.admin-nav-link.active { background: var(--bg-tertiary, #252528); }
|
||||
.admin-nav-link:hover { background: var(--bg-secondary, #1a1a1e); }
|
||||
.admin-content { flex: 1; overflow-y: auto; padding: 20px; }
|
||||
|
||||
/* ── Shared admin styles ────────────────── */
|
||||
.admin-page h2 { font-size: 18px; margin: 0 0 8px; }
|
||||
.section-hint { font-size: 13px; color: var(--text-secondary, #888); margin: 0 0 16px; }
|
||||
.settings-section { padding: 16px; background: var(--bg-secondary, #1a1a1e); border-radius: 8px; border: 1px solid var(--border, #2a2a2a); margin-bottom: 16px; }
|
||||
.form-row { display: flex; flex-wrap: wrap; gap: 12px; }
|
||||
.form-group { margin-bottom: 8px; }
|
||||
.form-group label { display: block; font-size: 12px; color: var(--text-secondary, #888); margin-bottom: 4px; }
|
||||
.form-group select, .form-group input, .form-group textarea {
|
||||
padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border, #2a2a2a);
|
||||
background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0); font-size: 13px; width: 100%;
|
||||
}
|
||||
.btn-small { padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
|
||||
.btn-primary { background: var(--accent, #5865f2); color: white; }
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
.btn-danger { background: var(--error, #ef4444); color: white; }
|
||||
.btn-danger:hover { opacity: 0.9; }
|
||||
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
|
||||
.admin-inline-form { padding: 16px; background: var(--bg-secondary, #1a1a1e); border-radius: 8px; border: 1px solid var(--border, #2a2a2a); margin-bottom: 16px; }
|
||||
.empty-hint { font-size: 13px; color: var(--text-secondary, #888); padding: 12px 0; }
|
||||
.admin-loading { font-size: 13px; color: var(--text-tertiary, #666); padding: 20px; text-align: center; }
|
||||
|
||||
/* ── Tables ──────────────────────────────── */
|
||||
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
.admin-table th {
|
||||
text-align: left; padding: 8px; font-size: 11px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
color: var(--text-tertiary, #666); border-bottom: 1px solid var(--border, #2a2a2a);
|
||||
}
|
||||
.admin-table td { padding: 8px; border-bottom: 1px solid var(--border, #2a2a2a); vertical-align: top; }
|
||||
.admin-table tr:hover td { background: var(--hover, rgba(255,255,255,0.02)); }
|
||||
.admin-badge {
|
||||
display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.admin-badge-admin { background: rgba(239,68,68,0.15); color: #ef4444; }
|
||||
.admin-badge-user { background: rgba(59,130,246,0.15); color: #3b82f6; }
|
||||
.admin-badge-active { background: rgba(34,197,94,0.15); color: #22c55e; }
|
||||
.admin-badge-inactive { background: rgba(239,68,68,0.15); color: #ef4444; }
|
||||
.admin-badge-global { background: rgba(168,85,247,0.15); color: #a855f7; }
|
||||
.admin-badge-team { background: rgba(59,130,246,0.15); color: #3b82f6; }
|
||||
.admin-badge-personal { background: rgba(234,179,8,0.15); color: #eab308; }
|
||||
|
||||
/* ── Toolbar ─────────────────────────────── */
|
||||
.admin-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
|
||||
.admin-search {
|
||||
padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border, #2a2a2a);
|
||||
background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0);
|
||||
font-size: 13px; min-width: 200px;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
{{/* CSS: consolidated into styles.css */}}
|
||||
{{define "css-admin"}}{{end}}
|
||||
|
||||
{{/* Scripts */}}
|
||||
{{define "scripts-admin"}}
|
||||
<script nonce="{{.CSPNonce}}">
|
||||
// Hybrid section loader — for admin sections not yet server-rendered.
|
||||
// Detects the data-section on the hybrid container and calls the
|
||||
// appropriate legacy loader if ui-admin.js is loaded.
|
||||
(function() {
|
||||
const container = document.getElementById('adminHybridContainer');
|
||||
if (!container) return;
|
||||
const section = container.dataset.section;
|
||||
if (!section) return;
|
||||
|
||||
// Wait for UI and admin loaders to be available
|
||||
function tryLoad() {
|
||||
if (typeof UI === 'undefined' || typeof UI.loadAdminUsers === 'undefined') {
|
||||
setTimeout(tryLoad, 100);
|
||||
return;
|
||||
}
|
||||
container.innerHTML = '';
|
||||
const LOADERS = {
|
||||
groups: () => UI.loadAdminGroups(),
|
||||
presets: () => UI.loadAdminPresets(),
|
||||
knowledgeBases: () => typeof KnowledgeUI !== 'undefined' ? KnowledgeUI.openAdminPanel() : null,
|
||||
memory: () => typeof MemoryUI !== 'undefined' ? MemoryUI.openAdminPanel() : null,
|
||||
storage: () => typeof loadAdminStorage === 'function' ? loadAdminStorage() : null,
|
||||
extensions: () => UI.loadAdminExtensions(),
|
||||
health: () => UI.loadAdminHealth(),
|
||||
capabilities: () => UI.loadAdminCapabilities(),
|
||||
usage: () => UI.loadAdminUsage(),
|
||||
audit: () => UI.loadAuditLog(),
|
||||
stats: () => UI.loadAdminStats(),
|
||||
};
|
||||
const loader = LOADERS[section];
|
||||
if (loader) loader();
|
||||
else container.innerHTML = '<div class="empty-hint">Section not found</div>';
|
||||
}
|
||||
tryLoad();
|
||||
})();
|
||||
</script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/marked.min.js"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/purify.min.js"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-settings.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-admin.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/admin-handlers.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/settings-handlers.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/knowledge-ui.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/persona-kb.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/admin-scaffold.js?v={{.Version}}"></script>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user