Changeset 0.22.5 (#147)
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit is contained in:
193
server/pages/templates/surfaces/admin.html
Normal file
193
server/pages/templates/surfaces/admin.html
Normal file
@@ -0,0 +1,193 @@
|
||||
{{/* 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}}
|
||||
57
server/pages/templates/surfaces/chat.html
Normal file
57
server/pages/templates/surfaces/chat.html
Normal file
@@ -0,0 +1,57 @@
|
||||
{{/*
|
||||
Chat surface (Phase 1 bridge).
|
||||
Server renders the page shell. Existing SPA JS takes over the DOM.
|
||||
All scripts from index.html are loaded here — minus the three
|
||||
already in base.html (api.js, events.js, ui-primitives.js).
|
||||
*/}}
|
||||
|
||||
{{define "surface-chat"}}
|
||||
<div id="appContainer" class="app" style="display:none;height:100%;">
|
||||
{{/* SPA builds its DOM here — same as current index.html */}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "css-chat"}}
|
||||
<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}}/css/notification-prefs.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/branding/custom.css" onerror="this.remove()">
|
||||
{{end}}
|
||||
|
||||
{{define "scripts-chat"}}
|
||||
{{/* Vendor libs */}}
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/marked.min.js" onerror="this.onerror=null;this.src='https://cdnjs.cloudflare.com/ajax/libs/marked/16.3.0/lib/marked.umd.min.js'"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/purify.min.js" onerror="this.onerror=null;this.src='https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.4/purify.min.js'"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/codemirror/codemirror.bundle.js?v={{$.Version}}" onerror="console.warn('[CM6] Bundle not available — falling back to textarea')"></script>
|
||||
{{/* App JS — order matches index.html (minus api/events/ui-primitives already in base) */}}
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/debug.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/repl.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/surfaces.js?v={{$.Version}}"></script>
|
||||
<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>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/notes.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/note-graph.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/attachments.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/tools-toggle.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/knowledge-ui.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/memory-ui.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/persona-kb.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/projects-ui.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/channel-models.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/notification-prefs.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/notifications.js?v={{$.Version}}"></script>
|
||||
<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/editor-mode.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/router.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/app.js?v={{$.Version}}"></script>
|
||||
{{end}}
|
||||
92
server/pages/templates/surfaces/editor.html
Normal file
92
server/pages/templates/surfaces/editor.html
Normal file
@@ -0,0 +1,92 @@
|
||||
{{/*
|
||||
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.
|
||||
*/}}
|
||||
|
||||
{{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-body">
|
||||
{{/* Editor main area — left pane (tabs + code) + split handle + right pane (chat) */}}
|
||||
<div class="surface-editor-main" id="editorMainMount"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{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}}
|
||||
|
||||
{{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}}/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/surfaces.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}}
|
||||
93
server/pages/templates/surfaces/notes.html
Normal file
93
server/pages/templates/surfaces/notes.html
Normal file
@@ -0,0 +1,93 @@
|
||||
{{/*
|
||||
Notes surface (Phase 2b).
|
||||
Server renders the layout shell. Existing notes.js + note-graph.js
|
||||
handle CRUD and rendering inside the containers.
|
||||
*/}}
|
||||
|
||||
{{define "surface-notes"}}
|
||||
<div class="surface-notes" id="surfaceNotes">
|
||||
<div class="surface-notes-body">
|
||||
{{/* Notes list + editor */}}
|
||||
<div class="surface-notes-main" id="notesMainMount"></div>
|
||||
{{/* Chat assist pane (optional, can toggle) */}}
|
||||
<div class="surface-notes-assist" id="notesAssistMount"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "css-notes"}}
|
||||
<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>
|
||||
.surface-notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.surface-notes-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.surface-notes-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.surface-notes-assist {
|
||||
width: 400px;
|
||||
border-left: 1px solid var(--border, #2a2a2a);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.surface-notes-assist { display: none; }
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
|
||||
{{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>
|
||||
<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/note-graph.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/surfaces.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/projects-ui.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}">
|
||||
// Notes surface boot: open notes panel in standalone mode
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (window.__SURFACE__ === 'notes' && typeof openNotes === 'function') {
|
||||
// Mount notes list into the main container
|
||||
const mount = document.getElementById('notesMainMount');
|
||||
if (mount) {
|
||||
// Notes panel will build into the mount point
|
||||
mount.dataset.notesStandalone = 'true';
|
||||
}
|
||||
openNotes();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
249
server/pages/templates/surfaces/settings.html
Normal file
249
server/pages/templates/surfaces/settings.html
Normal file
@@ -0,0 +1,249 @@
|
||||
{{/*
|
||||
Settings surface (Phase 2b).
|
||||
Server renders a full-page settings layout (replaces the modal).
|
||||
Reuses existing settings-handlers.js + ui-settings.js for interactions.
|
||||
*/}}
|
||||
|
||||
{{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>
|
||||
<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}}<div class="settings-placeholder" id="settingsDynamic">Loading…</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</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 "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}}
|
||||
|
||||
{{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>
|
||||
<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/notification-prefs.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();
|
||||
}
|
||||
|
||||
// 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]();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user