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}}
|
||||
|
||||
@@ -55,12 +55,12 @@
|
||||
{{/* ── Sidebar ─────────────────────── */}}
|
||||
<div id="sidebar" class="sidebar">
|
||||
<div class="sidebar-top">
|
||||
{{/* Brand */}}
|
||||
<div class="sb-brand">
|
||||
{{/* Brand — click toggles sidebar */}}
|
||||
<div class="sb-brand" onclick="UI.toggleSidebar()" role="button" tabindex="0">
|
||||
<div id="brandSidebarLogo" class="sb-logo">
|
||||
<img src="{{.BasePath}}/favicon.svg" alt="" style="width:28px;height:28px;">
|
||||
<img src="{{.BasePath}}/favicon-32.png" alt="" class="brand-logo-img">
|
||||
</div>
|
||||
<span id="brandSidebarText" class="brand-text">Chat Switchboard</span>
|
||||
<span id="brandSidebarText" class="brand-text">Switchboard</span>
|
||||
<span id="brandWordmark" class="brand-text" style="display:none;"></span>
|
||||
</div>
|
||||
|
||||
@@ -73,24 +73,41 @@
|
||||
<button id="newChatDropBtn" class="split-btn-drop" title="More options">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
<div id="newChatDropdown" class="split-btn-dropdown">
|
||||
{{/* Populated by projects-ui.js */}}
|
||||
<div id="newChatDropdown" class="split-dropdown">
|
||||
<button class="split-dropdown-item" onclick="document.getElementById('newChatDropdown').classList.remove('open'); newChat();">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
||||
<span>New Chat</span>
|
||||
</button>
|
||||
<button class="split-dropdown-item" onclick="document.getElementById('newChatDropdown').classList.remove('open'); if(typeof createProject==='function') createProject();">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
||||
<span>New Project</span>
|
||||
</button>
|
||||
<button class="split-dropdown-item disabled" title="Coming soon">
|
||||
<svg width="14" height="14" 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"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>Group Chat</span>
|
||||
<span class="dd-hint">soon</span>
|
||||
</button>
|
||||
<button class="split-dropdown-item disabled" title="Coming soon">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
<span>New Channel</span>
|
||||
<span class="dd-hint">soon</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Search */}}
|
||||
<div id="sidebarSearch" class="sidebar-search">
|
||||
<svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input type="text" id="chatSearchInput" placeholder="Search chats…" autocomplete="off">
|
||||
<button id="chatSearchClear" class="search-clear" title="Clear search">✕</button>
|
||||
</div>
|
||||
|
||||
{{/* Sidebar toggle (hamburger) */}}
|
||||
<button id="sidebarToggle" class="sb-btn sidebar-toggle" title="Toggle sidebar">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{/* Search (outside sidebar-top, below brand section) */}}
|
||||
<div id="sidebarSearch" class="sidebar-search">
|
||||
<svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input type="text" id="chatSearchInput" placeholder="Search chats…" autocomplete="off">
|
||||
<button id="chatSearchClear" class="sidebar-search-clear" title="Clear search">✕</button>
|
||||
</div>
|
||||
|
||||
{{/* Sidebar toggle (hidden on desktop, used by JS for mobile) */}}
|
||||
<button id="sidebarToggle" class="sb-btn sidebar-toggle" title="Toggle sidebar">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
||||
</button>
|
||||
|
||||
{{/* Sidebar Tabs (Chats / Files) */}}
|
||||
<div id="sidebarTabs" class="sidebar-tabs" style="display:none;">
|
||||
<button class="sidebar-tab active" data-tab="chats">Chats</button>
|
||||
@@ -107,6 +124,12 @@
|
||||
|
||||
{{/* User / bottom */}}
|
||||
<div class="sidebar-bottom">
|
||||
{{/* Notes shortcut */}}
|
||||
<button id="notesBtn" class="sb-btn sidebar-notes-btn">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
<span class="sb-label">Notes</span>
|
||||
</button>
|
||||
<div class="sidebar-bottom-divider"></div>
|
||||
<button id="userMenuBtn" class="user-btn">
|
||||
<div id="userAvatar" class="user-avatar">
|
||||
<span id="avatarLetter">?</span>
|
||||
@@ -151,7 +174,7 @@
|
||||
<div class="workspace">
|
||||
<div class="workspace-primary workspace-pane">
|
||||
|
||||
{{/* Chat header: model selector + token count */}}
|
||||
{{/* Chat header: model selector + caps + tokens + panel + notif */}}
|
||||
<div class="chat-header">
|
||||
<div id="modelDropdown" class="model-dropdown">
|
||||
<button id="modelDropdownBtn" class="model-dropdown-btn">
|
||||
@@ -169,6 +192,21 @@
|
||||
<button id="summarizeBtn" class="action-btn" style="display:none;" title="Summarize older messages">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
</button>
|
||||
{{/* Panel toggle */}}
|
||||
<button id="panelToggleBtn" class="action-btn" title="Toggle side panel" onclick="if(typeof PanelRegistry!=='undefined')PanelRegistry.toggle('preview')">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
|
||||
</button>
|
||||
{{/* Notification bell (inline, not fixed) */}}
|
||||
<div id="notifWrap" class="notif-wrap">
|
||||
<button class="notif-bell" onclick="Notifications.toggleDropdown()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span id="notifBadge" class="notif-badge" style="display:none;">0</span>
|
||||
</button>
|
||||
<div id="notifDropdown" class="notif-dropdown" style="display:none;">
|
||||
<div id="notifPanelList"></div>
|
||||
<div id="notifPanelMore" style="text-align:center;padding:8px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -188,28 +226,49 @@
|
||||
{{/* Streaming tools display */}}
|
||||
<div id="streamTools" class="stream-tools" style="display:none;"></div>
|
||||
|
||||
{{/* Input toolbar (attach, tools toggle, KB) */}}
|
||||
<div class="input-toolbar">
|
||||
<button id="attachBtn" class="action-btn attach-btn" title="Attach file">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
|
||||
</button>
|
||||
{{/* tools-toggle.js adds toggle buttons here */}}
|
||||
</div>
|
||||
|
||||
{{/* Input wrap: CM6 editor + send/stop */}}
|
||||
<div class="input-wrap">
|
||||
<div id="messageInputWrap">
|
||||
{{/* CM6 mounts here (chat.js). Fallback textarea below. */}}
|
||||
<textarea id="messageInput" placeholder="Type a message…" rows="1"></textarea>
|
||||
{{/* Input area (centered, padded bottom) */}}
|
||||
<div class="chat-input-area">
|
||||
{{/* Input toolbar (attach, tools toggle, KB) */}}
|
||||
<div class="input-toolbar">
|
||||
<button id="attachBtn" class="action-btn attach-btn" title="Attach file">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
|
||||
</button>
|
||||
{{/* Tools toggle */}}
|
||||
<div class="tools-toggle-wrap" style="display:none;">
|
||||
<button id="toolsToggleBtn" class="action-btn tools-toggle-btn" title="Tools">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
||||
</button>
|
||||
<div id="toolsPopup" class="popup tools-popup"></div>
|
||||
</div>
|
||||
{{/* Knowledge Bases toggle */}}
|
||||
<div class="kb-toggle-wrap">
|
||||
<button id="kbToggleBtn" class="action-btn kb-toggle-btn" title="Knowledge Bases">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||
</button>
|
||||
<div id="kbPopup" class="popup kb-popup"></div>
|
||||
</div>
|
||||
{{/* tools-toggle.js + knowledge-ui.js show/populate these at init */}}
|
||||
</div>
|
||||
<div class="input-actions">
|
||||
<span id="inputTokenCount" class="input-token-count"></span>
|
||||
<button id="sendBtn" class="action-btn send-btn" title="Send message">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</button>
|
||||
<button id="stopBtn" class="action-btn stop-btn" title="Stop generating">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
|
||||
</button>
|
||||
|
||||
{{/* Input wrap: CM6 editor + send/stop */}}
|
||||
<div class="input-wrap">
|
||||
<div id="messageInputWrap">
|
||||
{{/* CM6 mounts here (chat.js). Fallback textarea below. */}}
|
||||
<textarea id="messageInput" placeholder="Type a message…" rows="1"></textarea>
|
||||
</div>
|
||||
<div class="input-actions">
|
||||
<span id="inputTokenCount" class="input-token-count"></span>
|
||||
<button id="sendBtn" class="action-btn send-btn" title="Send message">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</button>
|
||||
<button id="stopBtn" class="action-btn stop-btn" title="Stop generating">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-footer">
|
||||
<span class="chat-version">Switchboard v{{.Version}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -239,7 +298,7 @@
|
||||
<p>Open a code block preview or extension output here.</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/* Notes and project panels are registered dynamically */}}
|
||||
{{/* Notes and project panels are registered dynamically by their JS modules */}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -273,13 +332,13 @@
|
||||
<div class="modal-content modal-lg">
|
||||
<div class="modal-header">
|
||||
<h2>Settings</h2>
|
||||
<button class="modal-close" onclick="closeModal('settingsModal')">✕</button>
|
||||
<button id="settingsCloseBtn" class="modal-close" onclick="closeModal('settingsModal')">✕</button>
|
||||
</div>
|
||||
<div class="modal-tabs">
|
||||
<button class="settings-tab active" data-stab="general" onclick="UI.switchSettingsTab('general')">General</button>
|
||||
<button class="settings-tab" data-stab="appearance" onclick="UI.switchSettingsTab('appearance')">Appearance</button>
|
||||
<button id="settingsProvidersTabBtn" class="settings-tab" data-stab="providers" onclick="UI.switchSettingsTab('providers')">My Providers</button>
|
||||
<button id="settingsPersonasTabBtn" class="settings-tab" data-stab="personas" onclick="UI.switchSettingsTab('personas')">My Presets</button>
|
||||
<button id="settingsPersonasTabBtn" class="settings-tab" data-stab="personas" onclick="UI.switchSettingsTab('personas')">My Personas</button>
|
||||
<button id="settingsUsageTabBtn" class="settings-tab" data-stab="usage" onclick="UI.switchSettingsTab('usage')">Usage</button>
|
||||
<button class="settings-tab" data-stab="profile" onclick="UI.switchSettingsTab('profile')">Profile</button>
|
||||
<button id="settingsRolesTabBtn" class="settings-tab" data-stab="roles" onclick="UI.switchSettingsTab('roles')" style="display:none;">Roles</button>
|
||||
@@ -333,11 +392,11 @@
|
||||
<div id="providerAddForm" style="display:none;"></div>
|
||||
<div id="providerList"></div>
|
||||
</div>
|
||||
{{/* Presets tab */}}
|
||||
{{/* Personas tab */}}
|
||||
<div id="settingsPersonasTab" class="settings-tab-content" style="display:none;">
|
||||
<button id="userAddPresetBtn" class="btn-small" style="display:none;">+ New Preset</button>
|
||||
<div id="userAddPresetForm" style="display:none;"></div>
|
||||
<div id="userPresetList"></div>
|
||||
<button id="userAddPersonaBtn" class="btn-small" style="display:none;">+ New Persona</button>
|
||||
<div id="userAddPersonaForm" style="display:none;"></div>
|
||||
<div id="userPersonaList"></div>
|
||||
</div>
|
||||
{{/* Usage tab */}}
|
||||
<div id="settingsUsageTab" class="settings-tab-content" style="display:none;">
|
||||
@@ -345,6 +404,19 @@
|
||||
</div>
|
||||
{{/* Profile tab */}}
|
||||
<div id="settingsProfileTab" class="settings-tab-content" style="display:none;">
|
||||
<div class="form-group">
|
||||
<label>Avatar</label>
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:4px;">
|
||||
<div id="avatarPreview" class="user-avatar" style="width:48px;height:48px;font-size:20px;">
|
||||
<span id="avatarPreviewLetter">?</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;">
|
||||
<button id="avatarUploadBtn" class="btn-small">Upload</button>
|
||||
<button id="avatarRemoveBtn" class="btn-small btn-danger" style="display:none;">Remove</button>
|
||||
</div>
|
||||
<input type="file" id="avatarFileInput" accept="image/*" style="display:none;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Display Name</label>
|
||||
<input type="text" id="profileDisplayName">
|
||||
@@ -354,12 +426,12 @@
|
||||
<input type="email" id="profileEmail" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button class="btn-small" onclick="document.getElementById('profileChangePwForm').style.display=''">Change Password</button>
|
||||
<button id="profileChangePwBtn" class="btn-small">Change Password</button>
|
||||
<div id="profileChangePwForm" style="display:none;margin-top:8px;">
|
||||
<input type="password" id="settingsCurrentPw" placeholder="Current password" autocomplete="current-password" style="margin-bottom:6px;">
|
||||
<input type="password" id="settingsNewPw" placeholder="New password" autocomplete="new-password" style="margin-bottom:6px;">
|
||||
<input type="password" id="settingsConfirmPw" placeholder="Confirm new password" autocomplete="new-password" style="margin-bottom:6px;">
|
||||
<button class="btn-small" onclick="Pages.changePassword()">Update Password</button>
|
||||
<input type="password" id="profileCurrentPw" placeholder="Current password" autocomplete="current-password" style="margin-bottom:6px;">
|
||||
<input type="password" id="profileNewPw" placeholder="New password" autocomplete="new-password" style="margin-bottom:6px;">
|
||||
<input type="password" id="profileConfirmPw" placeholder="Confirm new password" autocomplete="new-password" style="margin-bottom:6px;">
|
||||
<button id="profileSavePwBtn" class="btn-small">Update Password</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -377,8 +449,8 @@
|
||||
<div id="settingsTeamsTab" class="settings-tab-content" style="display:none;">
|
||||
<div id="settingsTeamsList"></div>
|
||||
<div id="settingsTeamMembers" style="display:none;"></div>
|
||||
<div id="settingsTeamPresets" style="display:none;">
|
||||
<div id="adminPresetList"></div>
|
||||
<div id="settingsTeamPersonas" style="display:none;">
|
||||
<div id="adminPersonaList"></div>
|
||||
</div>
|
||||
<div id="settingsTeamProviders" style="display:none;">
|
||||
<button id="settingsTeamAddProviderBtn" class="btn-small" style="display:none;">+ Add Provider</button>
|
||||
@@ -394,7 +466,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-primary" onclick="UI.saveSettingsAndClose()">Save</button>
|
||||
<button id="settingsSaveBtn" class="btn-primary" onclick="UI.saveSettingsAndClose()">Save</button>
|
||||
<button class="btn-secondary" onclick="closeModal('settingsModal')">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -457,7 +529,7 @@
|
||||
<div class="form-group"><label><input type="checkbox" id="adminRegToggle"> Registration Enabled</label></div>
|
||||
<div class="form-group"><label>Default User State</label><select id="adminRegDefaultState"><option value="active">Active</option><option value="pending">Pending Approval</option></select></div>
|
||||
<div class="form-group"><label><input type="checkbox" id="adminUserProvidersToggle"> Allow User BYOK</label></div>
|
||||
<div class="form-group"><label><input type="checkbox" id="adminUserPresetsToggle"> Allow User Presets</label></div>
|
||||
<div class="form-group"><label><input type="checkbox" id="adminUserPersonasToggle"> Allow User Personas</label></div>
|
||||
<div class="form-group"><label><input type="checkbox" id="adminKBDirectAccessToggle"> KB Direct Access</label></div>
|
||||
<div class="form-group"><label>Default Model</label><select id="adminDefaultModel"></select></div>
|
||||
<div class="form-group"><label>System Prompt</label><textarea id="adminSystemPrompt" rows="4"></textarea></div>
|
||||
@@ -544,8 +616,8 @@
|
||||
<button id="teamAuditNextBtn" class="btn-small">→</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/* Team preset model select */}}
|
||||
<div style="display:none;"><select id="teamPreset_model"></select></div>
|
||||
{{/* Team persona model select */}}
|
||||
<div style="display:none;"><select id="teamPersona_model"></select></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -590,17 +662,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* ── Notification Bell ───────────────────── */}}
|
||||
<div id="notifWrap" class="notif-wrap" style="position:fixed;top:8px;right:12px;z-index:100;">
|
||||
<button class="notif-btn" onclick="Notifications.toggleDropdown()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span id="notifBadge" class="notif-badge" style="display:none;">0</span>
|
||||
</button>
|
||||
<div id="notifDropdown" class="notif-dropdown" style="display:none;">
|
||||
<div id="notifPanelList"></div>
|
||||
<div id="notifPanelMore" style="text-align:center;padding:8px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{/* ── Notification bell is now inside .chat-header ── */}}
|
||||
|
||||
{{/* ── Routing Policy Form (shared) ────────── */}}
|
||||
<div id="routingPolicyForm" style="display:none;">
|
||||
@@ -649,7 +711,6 @@
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/extensions.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/panels.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-format.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-core.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/tokens.js?v={{$.Version}}"></script>
|
||||
@@ -667,6 +728,7 @@
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/chat.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/settings-handlers.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/admin-handlers.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/surface-nav.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/editor-mode.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/app.js?v={{$.Version}}"></script>
|
||||
{{end}}
|
||||
|
||||
@@ -1,91 +1,127 @@
|
||||
{{/*
|
||||
Editor surface (Phase 2b).
|
||||
Server renders the layout shell with proper CSS sizing.
|
||||
editor-mode.js mounts CodeMirror, file tree, etc. into these containers.
|
||||
Fixes bugs #4 and #5: layout collapse when switching surfaces.
|
||||
Editor surface — matches switchboard-prototype-editor.jsx.
|
||||
IDE-like layout: topbar + file tree + tabs + code + chat pane.
|
||||
editor-mode.js builds CodeMirror, file tree, etc.
|
||||
*/}}
|
||||
|
||||
{{define "surface-editor"}}
|
||||
<div class="surface-editor" id="surfaceEditor" data-ws-id="{{.Data.WorkspaceID}}" data-ws-name="{{.Data.WorkspaceName}}">
|
||||
{{/* Header — editor-mode.js populates this */}}
|
||||
<div class="surface-editor-header" id="editorHeaderMount"></div>
|
||||
<div class="surface-editor">
|
||||
|
||||
<div class="surface-editor-body">
|
||||
{{/* Editor main area — left pane (tabs + code) + split handle + right pane (chat) */}}
|
||||
<div class="surface-editor-main" id="editorMainMount"></div>
|
||||
{{/* Top Bar */}}
|
||||
<div class="editor-topbar">
|
||||
<a href="{{.BasePath}}/" class="editor-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
|
||||
</a>
|
||||
<div style="width:1px;height:18px;background:var(--border);"></div>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent);"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
||||
<span style="font-size:13px;font-weight:600;" id="editorWorkspaceName">
|
||||
{{if .Data}}{{.Data.WorkspaceName}}{{else}}Editor{{end}}
|
||||
</span>
|
||||
<div style="display:flex;align-items:center;gap:4px;background:var(--purple-dim);padding:2px 8px;border-radius:4px;">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--purple)" stroke-width="2"><circle cx="12" cy="18" r="3"/><circle cx="12" cy="6" r="3"/><line x1="12" y1="9" x2="12" y2="15"/></svg>
|
||||
<span style="font-size:11px;font-weight:600;color:var(--purple);font-family:var(--mono);">main</span>
|
||||
</div>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="icon-btn" id="editorNewFileBtn" title="New File">
|
||||
<svg width="14" height="14" 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>
|
||||
</button>
|
||||
<button class="icon-btn" id="editorRefreshBtn" title="Refresh">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
|
||||
</button>
|
||||
<button class="icon-btn" id="editorSearchBtn" title="Search">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
</button>
|
||||
<div style="width:1px;height:18px;background:var(--border);"></div>
|
||||
<button class="icon-btn" id="editorToggleTree" title="Toggle file tree">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
|
||||
</button>
|
||||
<button class="icon-btn" id="editorToggleChat" title="Toggle chat">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{/* Body: tree + editor + chat */}}
|
||||
<div class="editor-body" id="editorBody">
|
||||
{{/* File Tree */}}
|
||||
<div class="editor-tree" id="editorFileTree">
|
||||
<div class="editor-tree-header">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
||||
<span style="font-size:11px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:0.4px;flex:1;">Files</span>
|
||||
<button class="icon-btn" id="treeNewFileBtn" title="New file">
|
||||
<svg width="12" height="12" 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>
|
||||
</button>
|
||||
</div>
|
||||
<div class="editor-tree-files" id="editorTreeFiles">
|
||||
{{/* Populated by editor-mode.js */}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Main Editor Area */}}
|
||||
<div class="editor-main" id="editorMain">
|
||||
{{/* Tabs */}}
|
||||
<div class="editor-tabs" id="editorTabs">
|
||||
{{/* Populated by editor-mode.js */}}
|
||||
</div>
|
||||
|
||||
{{/* Code Content */}}
|
||||
<div class="editor-content" id="editorContent">
|
||||
<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-3);">
|
||||
<div style="text-align:center;">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:0.12;display:inline-block;margin-bottom:10px;"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
|
||||
<p style="margin:0;font-size:14px;">Open a file to start editing</p>
|
||||
<p style="margin:6px 0 0;font-size:12px;">Select from the file tree or Ctrl+P</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Status Bar */}}
|
||||
<div class="editor-statusbar" id="editorStatusbar">
|
||||
<span>Ready</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Chat Pane (resizable) */}}
|
||||
<div id="editorSplitHandle" style="width:5px;background:var(--border);cursor:col-resize;flex-shrink:0;display:none;"></div>
|
||||
<div class="editor-chat" id="editorChatPane" style="display:none;">
|
||||
<div class="editor-chat-header">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
<span style="font-size:12px;font-weight:600;flex:1;">AI Chat</span>
|
||||
<span class="badge badge-accent" id="editorChatModel">claude-sonnet-4-5</span>
|
||||
</div>
|
||||
<div class="editor-chat-messages" id="editorChatMessages">
|
||||
{{/* Populated by editor-mode.js */}}
|
||||
</div>
|
||||
<div class="editor-chat-input">
|
||||
<div style="display:flex;gap:8px;align-items:flex-end;">
|
||||
<textarea id="editorChatInput" placeholder="Ask about this code…" rows="2"
|
||||
style="flex:1;background:var(--input-bg,var(--bg));border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:8px;font-size:12px;font-family:inherit;outline:none;resize:none;"></textarea>
|
||||
<button id="editorChatSendBtn" style="background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;">Send</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;margin-top:6px;font-size:10px;color:var(--text-3);">
|
||||
<span id="editorChatContext">Context: none</span>
|
||||
<span>·</span>
|
||||
<span>Cmd+L to focus</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toastContainer" class="toast-container"></div>
|
||||
{{end}}
|
||||
|
||||
{{/* CSS: consolidated into styles.css */}}
|
||||
{{define "css-editor"}}
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/persona-kb.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/memory.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/notifications.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/channel-models.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/branding/custom.css" onerror="this.remove()">
|
||||
<style>
|
||||
/*
|
||||
* Editor surface layout — owns the full viewport below banners.
|
||||
* This is the bug #5 fix: height is set by the server, not fought over
|
||||
* with other surfaces' CSS.
|
||||
*/
|
||||
.surface-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.surface-editor-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.surface-editor-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.surface-editor-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
|
||||
{{/* Scripts */}}
|
||||
{{define "scripts-editor"}}
|
||||
{{/* Chat rendering for the assist pane */}}
|
||||
<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-core.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/codemirror/codemirror.bundle.js?v={{.Version}}" onerror="console.warn('[CM6] Bundle not available')"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/chat.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/attachments.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/tokens.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/extensions.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notes.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/panels.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/editor-mode.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/projects-ui.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/tools-toggle.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/repl.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}">
|
||||
// Editor surface boot: initialize and mount into template containers
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (typeof EditorMode !== 'undefined' && window.__SURFACE__ === 'editor') {
|
||||
const data = window.__PAGE_DATA__ || {};
|
||||
if (data.WorkspaceID) {
|
||||
EditorMode.mountServerRendered(data.WorkspaceID, data.WorkspaceName || 'Workspace');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
@@ -58,7 +58,6 @@
|
||||
{{define "scripts-notes"}}
|
||||
<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-core.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/chat.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/attachments.js?v={{.Version}}"></script>
|
||||
|
||||
@@ -1,236 +1,162 @@
|
||||
{{/*
|
||||
Settings surface (Phase 2b).
|
||||
Server renders a full-page settings layout (replaces the modal).
|
||||
Reuses existing settings-handlers.js + ui-settings.js for interactions.
|
||||
Settings surface — matches switchboard-prototype-settings.jsx.
|
||||
Full-page layout: topbar + left nav + content area.
|
||||
JS (settings-handlers.js, ui-settings.js) populates dynamic sections.
|
||||
*/}}
|
||||
|
||||
{{define "surface-settings"}}
|
||||
<div class="surface-settings">
|
||||
<div class="settings-nav">
|
||||
<div class="settings-nav-title">Settings</div>
|
||||
{{$section := .Section}}
|
||||
<a href="{{.BasePath}}/settings/general" class="settings-nav-link{{if eq $section "general"}} active{{end}}">General</a>
|
||||
<a href="{{.BasePath}}/settings/appearance" class="settings-nav-link{{if eq $section "appearance"}} active{{end}}">Appearance</a>
|
||||
<a href="{{.BasePath}}/settings/providers" class="settings-nav-link{{if eq $section "providers"}} active{{end}}">My Providers</a>
|
||||
<a href="{{.BasePath}}/settings/models" class="settings-nav-link{{if eq $section "models"}} active{{end}}">My Models</a>
|
||||
<a href="{{.BasePath}}/settings/personas" class="settings-nav-link{{if eq $section "personas"}} active{{end}}">My Presets</a>
|
||||
<a href="{{.BasePath}}/settings/roles" class="settings-nav-link{{if eq $section "roles"}} active{{end}}">Model Roles</a>
|
||||
<a href="{{.BasePath}}/settings/knowledge" class="settings-nav-link{{if eq $section "knowledge"}} active{{end}}">Knowledge Bases</a>
|
||||
<a href="{{.BasePath}}/settings/memory" class="settings-nav-link{{if eq $section "memory"}} active{{end}}">Memory</a>
|
||||
<a href="{{.BasePath}}/settings/notifications" class="settings-nav-link{{if eq $section "notifications"}} active{{end}}">Notifications</a>
|
||||
<a href="{{.BasePath}}/settings/usage" class="settings-nav-link{{if eq $section "usage"}} active{{end}}">Usage</a>
|
||||
<div class="settings-nav-sep"></div>
|
||||
<a href="{{.BasePath}}/" class="settings-nav-link settings-nav-back">← Back to Chat</a>
|
||||
<div class="surface-settings" style="flex-direction:column;">
|
||||
|
||||
{{/* Top Bar */}}
|
||||
<div class="settings-topbar">
|
||||
<a href="{{.BasePath}}/" class="settings-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="settings-topbar-sep"></div>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--text-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>
|
||||
<span class="settings-topbar-title">Settings</span>
|
||||
</div>
|
||||
<div class="settings-content" id="settingsContentMount">
|
||||
{{/* Content rendered by section-specific JS or server template */}}
|
||||
<div class="settings-content-inner" id="settingsSection" data-section="{{.Section}}">
|
||||
{{if eq .Section "general"}}{{template "settings-general" .}}
|
||||
{{else if eq .Section "appearance"}}{{template "settings-appearance" .}}
|
||||
{{else if eq .Section "providers"}}{{template "settings-providers" .}}
|
||||
{{else if eq .Section "personas"}}{{template "settings-personas" .}}
|
||||
{{else}}<div class="settings-placeholder" id="settingsDynamic">Loading…</div>
|
||||
{{end}}
|
||||
|
||||
<div style="display:flex;flex:1;min-height:0;">
|
||||
{{/* Left Nav */}}
|
||||
<div class="settings-nav">
|
||||
{{$section := .Section}}
|
||||
{{$base := .BasePath}}
|
||||
|
||||
<a href="{{$base}}/settings/general" class="settings-nav-link{{if eq $section "general"}} active{{end}}">General</a>
|
||||
<a href="{{$base}}/settings/appearance" class="settings-nav-link{{if eq $section "appearance"}} active{{end}}">Appearance</a>
|
||||
<a href="{{$base}}/settings/models" class="settings-nav-link{{if eq $section "models"}} active{{end}}">Models</a>
|
||||
<a href="{{$base}}/settings/personas" class="settings-nav-link{{if eq $section "personas"}} active{{end}}">Personas</a>
|
||||
<a href="{{$base}}/settings/profile" class="settings-nav-link{{if eq $section "profile"}} active{{end}}">Profile</a>
|
||||
<a href="{{$base}}/settings/teams" class="settings-nav-link{{if eq $section "teams"}} active{{end}}">Teams</a>
|
||||
|
||||
{{/* BYOK-gated nav items */}}
|
||||
<div id="settingsByokNav" style="display:none;">
|
||||
<div class="settings-nav-sep"></div>
|
||||
<a href="{{$base}}/settings/providers" class="settings-nav-link{{if eq $section "providers"}} active{{end}}">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
|
||||
My Providers
|
||||
</a>
|
||||
<a href="{{$base}}/settings/roles" class="settings-nav-link{{if eq $section "roles"}} active{{end}}">Model Roles</a>
|
||||
<a href="{{$base}}/settings/usage" class="settings-nav-link{{if eq $section "usage"}} active{{end}}">My Usage</a>
|
||||
</div>
|
||||
|
||||
{{/* BYOK indicator */}}
|
||||
<div id="settingsByokIndicator" class="settings-nav-footer" style="display:none;">
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
|
||||
<span style="font-size:11px;font-weight:600;color:var(--success);">BYOK Enabled</span>
|
||||
</div>
|
||||
<p style="font-size:10px;color:var(--text-3);margin:0;line-height:1.5;">Admin has enabled Bring Your Own Key</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Content */}}
|
||||
<div class="settings-content" id="settingsContentMount">
|
||||
<div id="settingsSection" data-section="{{.Section}}">
|
||||
<h2 id="settingsSectionTitle">{{if eq .Section "general"}}General{{else if eq .Section "appearance"}}Appearance{{else if eq .Section "models"}}Models{{else if eq .Section "personas"}}Personas{{else if eq .Section "profile"}}Profile{{else if eq .Section "teams"}}Teams{{else if eq .Section "providers"}}My Providers{{else if eq .Section "roles"}}Model Roles{{else if eq .Section "usage"}}My Usage{{else if eq .Section "knowledge"}}Knowledge Bases{{else if eq .Section "memory"}}Memory{{else if eq .Section "notifications"}}Notifications{{else}}Settings{{end}}</h2>
|
||||
|
||||
{{if eq .Section "general"}}
|
||||
<div class="settings-section">
|
||||
<h3>Chat Defaults</h3>
|
||||
<div class="form-group">
|
||||
<label>Default Model</label>
|
||||
<select id="settingsModel"></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>System Prompt</label>
|
||||
<textarea id="settingsSystemPrompt" rows="3" placeholder="Optional system prompt…" style="max-width:100%;"></textarea>
|
||||
</div>
|
||||
<div style="display:flex;gap:16px;">
|
||||
<div class="form-group" style="flex:1;">
|
||||
<label>Max Tokens <span id="settingsMaxHint" style="font-weight:400;color:var(--text-3);"></span></label>
|
||||
<input type="number" id="settingsMaxTokens" placeholder="default">
|
||||
</div>
|
||||
<div class="form-group" style="flex:1;">
|
||||
<label>Temperature</label>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="range" id="settingsTemp" min="0" max="2" step="0.1" value="0.7" style="flex:1;">
|
||||
<span id="settingsTempValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);">0.7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);cursor:pointer;margin-top:4px;">
|
||||
<input type="checkbox" id="settingsThinking"> Show thinking blocks
|
||||
</label>
|
||||
</div>
|
||||
{{else if eq .Section "appearance"}}
|
||||
<div class="settings-section">
|
||||
<h3>Theme</h3>
|
||||
<div id="themeToggle" class="toggle-group">
|
||||
<button class="toggle-btn" data-theme="light">☀ Light</button>
|
||||
<button class="toggle-btn" data-theme="dark">☾ Dark</button>
|
||||
<button class="toggle-btn" data-theme="system">⊞ System</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3>UI Scale</h3>
|
||||
<div class="form-group">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="range" id="settingsScale" min="80" max="120" step="5" value="100" style="flex:1;">
|
||||
<span id="scaleValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 style="margin-top:16px;">Message Font Size</h3>
|
||||
<div class="form-group">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="range" id="settingsMsgFont" min="12" max="20" step="1" value="14" style="flex:1;">
|
||||
<span id="msgFontValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">14px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-md btn-primary" onclick="if(typeof UI!=='undefined')UI.saveAppearance?.()">Save</button>
|
||||
{{else if eq .Section "profile"}}
|
||||
<div class="settings-section">
|
||||
<h3>Profile</h3>
|
||||
<div class="form-group"><label>Display Name</label><input type="text" id="profileDisplayName" placeholder="Your display name"></div>
|
||||
<div class="form-group"><label>Email</label><input type="email" id="profileEmail" disabled></div>
|
||||
<button class="btn-md btn-primary" onclick="if(typeof Pages!=='undefined')Pages.saveProfile?.()">Save Profile</button>
|
||||
</div>
|
||||
<div class="settings-section" style="margin-top:20px;">
|
||||
<h3>Change Password</h3>
|
||||
<div class="form-group"><label>Current Password</label><input type="password" id="settingsCurrentPw" autocomplete="current-password"></div>
|
||||
<div class="form-group"><label>New Password</label><input type="password" id="settingsNewPw" autocomplete="new-password"></div>
|
||||
<div class="form-group"><label>Confirm New Password</label><input type="password" id="settingsConfirmPw" autocomplete="new-password"></div>
|
||||
<button class="btn-md btn-primary" onclick="if(typeof Pages!=='undefined')Pages.changePassword?.()">Update Password</button>
|
||||
</div>
|
||||
{{else if eq .Section "providers"}}
|
||||
<div id="userProvidersDisabled" style="display:none;">
|
||||
<div class="settings-section"><p style="color:var(--text-2);font-size:13px;">Your admin has disabled user-managed API keys (BYOK).</p></div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<button class="btn-md btn-primary" id="providerShowAddBtn" style="display:none;">+ Add Provider</button>
|
||||
</div>
|
||||
<div id="providerAddForm" style="display:none;"></div>
|
||||
<div id="providerList"><div class="settings-placeholder">Loading providers…</div></div>
|
||||
{{else if eq .Section "personas"}}
|
||||
<div style="margin-bottom:12px;">
|
||||
<button class="btn-md btn-primary" id="userAddPersonaBtn" style="display:none;">+ New Persona</button>
|
||||
</div>
|
||||
<div id="userAddPersonaForm" style="display:none;"></div>
|
||||
<div id="userPersonaList"><div class="settings-placeholder">Loading personas…</div></div>
|
||||
{{else}}<div class="settings-placeholder" id="settingsDynamic">Loading…</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toastContainer" class="toast-container"></div>
|
||||
{{end}}
|
||||
|
||||
{{define "settings-general"}}
|
||||
<div class="settings-section">
|
||||
<h2>Profile</h2>
|
||||
<div class="form-group">
|
||||
<label>Display Name</label>
|
||||
<input type="text" id="settingsDisplayName" value="{{if .User}}{{.User.display_name}}{{end}}" placeholder="Your name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" id="settingsEmail" value="{{if .User}}{{.User.email}}{{end}}" disabled>
|
||||
</div>
|
||||
<button class="btn-small btn-primary" onclick="Pages.saveProfile()">Save</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-section" style="margin-top:16px">
|
||||
<h2>Password</h2>
|
||||
<div class="form-group">
|
||||
<label>Current Password</label>
|
||||
<input type="password" id="settingsCurrentPw">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>New Password</label>
|
||||
<input type="password" id="settingsNewPw">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Confirm Password</label>
|
||||
<input type="password" id="settingsConfirmPw">
|
||||
</div>
|
||||
<button class="btn-small btn-primary" onclick="Pages.changePassword()">Change Password</button>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "settings-appearance"}}
|
||||
<div class="settings-section">
|
||||
<h2>Theme</h2>
|
||||
<div id="themeToggle" class="settings-toggle-group">
|
||||
<button class="theme-btn" data-theme="dark">Dark</button>
|
||||
<button class="theme-btn" data-theme="light">Light</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section" style="margin-top:16px">
|
||||
<h2>Editor Keymap</h2>
|
||||
<div id="keymapToggle" class="settings-toggle-group">
|
||||
<button class="theme-btn" data-keymap="standard">Standard</button>
|
||||
<button class="theme-btn" data-keymap="vim">Vim</button>
|
||||
<button class="theme-btn" data-keymap="emacs">Emacs</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section" style="margin-top:16px">
|
||||
<h2>UI Scale</h2>
|
||||
<div class="form-group">
|
||||
<input type="range" id="settingsScale" min="80" max="120" step="5" value="100">
|
||||
<span id="scaleValue">100%</span>
|
||||
</div>
|
||||
<h2>Message Font Size</h2>
|
||||
<div class="form-group">
|
||||
<input type="range" id="settingsMsgFont" min="12" max="20" step="1" value="14">
|
||||
<span id="msgFontValue">14px</span>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "settings-providers"}}
|
||||
<div id="userProvidersDisabled" class="settings-section" style="display:none;">
|
||||
<p style="color:var(--text-secondary);font-size:13px;">Your admin has disabled user-managed API keys (BYOK). Models are available through team presets.</p>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<button class="btn-small btn-primary" id="providerShowAddBtn">+ Add Provider</button>
|
||||
</div>
|
||||
<div id="providerAddForm" style="display:none;"></div>
|
||||
<div id="providerList"><div class="settings-placeholder">Loading providers…</div></div>
|
||||
{{end}}
|
||||
|
||||
{{define "settings-personas"}}
|
||||
<div style="margin-bottom:12px;">
|
||||
<button class="btn-small btn-primary" id="userAddPresetBtn">+ New Preset</button>
|
||||
</div>
|
||||
<div id="userAddPresetForm" style="display:none;"></div>
|
||||
<div id="userPresetList"><div class="settings-placeholder">Loading presets…</div></div>
|
||||
{{end}}
|
||||
|
||||
{{define "css-settings"}}
|
||||
<style>
|
||||
.surface-settings {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.settings-nav {
|
||||
width: 200px;
|
||||
border-right: 1px solid var(--border, #2a2a2a);
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.settings-nav-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary, #888);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.settings-nav-link {
|
||||
display: block;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.settings-nav-link.active { background: var(--bg-tertiary, #252528); }
|
||||
.settings-nav-link:hover { background: var(--bg-secondary, #1a1a1e); }
|
||||
.settings-nav-sep {
|
||||
margin: 12px 0;
|
||||
border-top: 1px solid var(--border, #2a2a2a);
|
||||
}
|
||||
.settings-nav-back { color: var(--text-secondary, #888); }
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.settings-section {
|
||||
padding: 16px;
|
||||
background: var(--bg-secondary, #1a1a1e);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border, #2a2a2a);
|
||||
max-width: 600px;
|
||||
}
|
||||
.settings-section h2 {
|
||||
font-size: 15px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.settings-toggle-group {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.settings-toggle-group .theme-btn {
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--border, #2a2a2a);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-primary, #0e0e10);
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.settings-toggle-group .theme-btn.active {
|
||||
background: var(--accent, #5865f2);
|
||||
border-color: var(--accent, #5865f2);
|
||||
color: white;
|
||||
}
|
||||
.settings-placeholder {
|
||||
padding: 20px;
|
||||
color: var(--text-secondary, #888);
|
||||
}
|
||||
.form-group { margin-bottom: 8px; }
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary, #888);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.form-group input, .form-group select, .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%;
|
||||
max-width: 300px;
|
||||
}
|
||||
.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; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings-nav { width: 160px; font-size: 12px; }
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
{{/* CSS: consolidated into styles.css */}}
|
||||
{{define "css-settings"}}{{end}}
|
||||
|
||||
{{/* Scripts */}}
|
||||
{{define "scripts-settings"}}
|
||||
<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-core.js?v={{.Version}}"></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/settings-handlers.js?v={{.Version}}"></script>
|
||||
@@ -239,32 +165,50 @@
|
||||
<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/notification-prefs.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}">
|
||||
// Settings surface boot
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const section = document.getElementById('settingsSection')?.dataset.section;
|
||||
if (!section) return;
|
||||
|
||||
// Appearance: wire up theme/keymap buttons and sliders
|
||||
if (section === 'appearance' && typeof UI !== 'undefined') {
|
||||
UI.loadAppearanceSettings();
|
||||
UI.initAppearance();
|
||||
// Show BYOK nav if enabled
|
||||
const pageData = window.__PAGE_DATA__;
|
||||
if (pageData && pageData.BYOKEnabled) {
|
||||
const byokNav = document.getElementById('settingsByokNav');
|
||||
const byokInd = document.getElementById('settingsByokIndicator');
|
||||
if (byokNav) byokNav.style.display = '';
|
||||
if (byokInd) byokInd.style.display = '';
|
||||
}
|
||||
|
||||
// Dynamic sections: let existing JS populate the container
|
||||
const dynamicSections = {
|
||||
providers: () => typeof UI !== 'undefined' && UI.loadProviderList(),
|
||||
models: () => typeof UI !== 'undefined' && UI.loadUserModels(),
|
||||
personas: () => typeof UI !== 'undefined' && UI.loadUserPresets(),
|
||||
usage: () => typeof UI !== 'undefined' && UI.loadMyUsage(),
|
||||
roles: () => typeof UI !== 'undefined' && UI.loadUserRoles(),
|
||||
knowledge: () => typeof KnowledgeUI !== 'undefined' && KnowledgeUI.openManagePanel(),
|
||||
memory: () => typeof MemoryUI !== 'undefined' && MemoryUI.openSettingsPanel(),
|
||||
notifications: () => typeof NotifPrefs !== 'undefined' && NotifPrefs.load(),
|
||||
};
|
||||
if (dynamicSections[section]) {
|
||||
dynamicSections[section]();
|
||||
if (section === 'appearance' && typeof UI !== 'undefined') {
|
||||
UI.loadAppearanceSettings?.();
|
||||
UI.initAppearance?.();
|
||||
}
|
||||
if (section === 'general' && typeof UI !== 'undefined') {
|
||||
UI.loadGeneralSettings?.();
|
||||
}
|
||||
if (section === 'profile') {
|
||||
const user = window.__USER__;
|
||||
if (user) {
|
||||
const dn = document.getElementById('profileDisplayName');
|
||||
const em = document.getElementById('profileEmail');
|
||||
if (dn) dn.value = user.display_name || user.username || '';
|
||||
if (em) em.value = user.email || '';
|
||||
}
|
||||
}
|
||||
|
||||
const dynamicSections = {
|
||||
providers: () => typeof UI !== 'undefined' && UI.loadProviderList?.(),
|
||||
models: () => typeof UI !== 'undefined' && UI.loadUserModels?.(),
|
||||
personas: () => typeof UI !== 'undefined' && UI.loadUserPersonas?.(),
|
||||
usage: () => typeof UI !== 'undefined' && UI.loadMyUsage?.(),
|
||||
roles: () => typeof UI !== 'undefined' && UI.loadUserRoles?.(),
|
||||
knowledge: () => typeof KnowledgeUI !== 'undefined' && KnowledgeUI.openManagePanel?.(),
|
||||
memory: () => typeof MemoryUI !== 'undefined' && MemoryUI.openSettingsPanel?.(),
|
||||
notifications: () => typeof NotifPrefs !== 'undefined' && NotifPrefs.load?.(),
|
||||
teams: () => typeof UI !== 'undefined' && UI.loadTeamsSettings?.(),
|
||||
};
|
||||
if (dynamicSections[section]) dynamicSections[section]();
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user