Jeffrey Smith
45fe965c32
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
194 lines
12 KiB
HTML
194 lines
12 KiB
HTML
{{/* 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. */}}
|
|
|
|
{{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>
|
|
|
|
<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>
|
|
|
|
{{/* ── 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>
|
|
{{end}}
|
|
</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}}
|
|
|
|
{{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>
|
|
{{end}}
|