switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.22.5 (#147)

Browse Source 
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit is contained in:
Jeffrey Smith
2026-03-03 09:58:23 +00:00
committed by xcaliber
parent 3953dcf364
commit 45fe965c32
32 changed files with 3021 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
server/pages/templates/admin/models.html Normal file
View File

@@ -0,0 +1,54 @@
{{/* Admin models — model catalog table. */}}
{{define "admin-models"}}
<div class="admin-page">
<h2>Model Catalog</h2>
<p class="section-hint">All models synced from providers. Toggle visibility to control what users can access.</p>
<div class="admin-toolbar">
<input type="text" class="admin-search" id="modelSearch" placeholder="Filter models…" oninput="Pages.filterModels(this.value)">
<select class="admin-search" style="min-width:120px;" id="modelTypeFilter" onchange="Pages.filterModels()">
<option value="">All types</option>
<option value="chat">Chat</option>
<option value="embedding">Embedding</option>
<option value="image">Image</option>
</select>
<select class="admin-search" style="min-width:140px;" id="modelProviderFilter" onchange="Pages.filterModels()">
<option value="">All providers</option>
{{range .Data.Providers}}
<option value="{{.ID}}">{{.Name}}</option>
{{end}}
</select>
</div>
{{if .Data.Models}}
<table class="admin-table" id="modelTable">
<thead>
<tr>
<th>Model</th>
<th>Provider</th>
<th>Type</th>
<th>Capabilities</th>
<th></th>
</tr>
</thead>
<tbody>
{{range .Data.Models}}
<tr data-provider="{{.ProviderConfigID}}" data-type="{{.ModelType}}" data-name="{{.DisplayName}} {{.ModelID}}">
<td>
<strong>{{.DisplayName}}</strong>
{{if ne .DisplayName .ModelID}}<br><span style="font-size:11px;color:var(--text-tertiary,#666);">{{.ModelID}}</span>{{end}}
</td>
<td>{{.ProviderName}}</td>
<td><span class="admin-badge">{{.ModelType}}</span></td>
<td style="font-size:11px;color:var(--text-secondary);">—</td>
<td></td>
</tr>
{{end}}
</tbody>
</table>
{{else}}
<div class="empty-hint">No models in catalog. Sync a provider to populate.</div>
{{end}}
</div>
{{end}}

6
server/pages/templates/admin/overview.html Normal file
View File

@@ -0,0 +1,6 @@
{{define "admin-overview"}}
<div class="admin-page">
<h2>Admin Overview</h2>
<p class="section-hint">System administration. Select a section from the navigation.</p>
</div>
{{end}}

97
server/pages/templates/admin/providers.html Normal file
View File

@@ -0,0 +1,97 @@
{{/* Admin providers — server-rendered provider list with status. */}}
{{define "admin-providers"}}
<div class="admin-page">
<h2>Providers</h2>
<p class="section-hint">AI provider configurations. Each provider connects to an API endpoint.</p>
<div class="admin-toolbar">
<button class="btn-small btn-primary" onclick="Pages.showProviderForm()">+ Add Provider</button>
</div>
<div id="providerFormWrap" style="display:none;">
{{template "admin-provider-form" .}}
</div>
{{if .Data.Providers}}
<table class="admin-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Scope</th>
<th>Models</th>
<th>Endpoint</th>
<th></th>
</tr>
</thead>
<tbody>
{{range .Data.ProviderDetails}}
<tr>
<td><strong>{{.Name}}</strong></td>
<td><span class="admin-badge">{{.Provider}}</span></td>
<td><span class="admin-badge admin-badge-{{.Scope}}">{{.Scope}}</span></td>
<td>{{.ModelCount}}</td>
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);">{{.Endpoint}}</td>
<td>
<button class="btn-small" onclick="Pages.syncProvider('{{.ID}}')">Sync</button>
<button class="btn-small" onclick="Pages.editProvider('{{.ID}}')">Edit</button>
</td>
</tr>
{{end}}
</tbody>
</table>
{{else}}
<div class="empty-hint">No providers configured. Add one to get started.</div>
{{end}}
</div>
{{end}}
{{define "admin-provider-form"}}
<div class="admin-inline-form" id="providerForm">
<h3 style="margin:0 0 12px;font-size:14px;" id="providerFormTitle">Add Provider</h3>
<input type="hidden" id="providerFormId" value="">
<div class="form-row">
<div class="form-group" style="flex:1;min-width:150px;">
<label>Name</label>
<input type="text" id="providerFormName" placeholder="My OpenAI">
</div>
<div class="form-group" style="flex:1;min-width:150px;">
<label>Type</label>
<select id="providerFormType">
<option value="">— select —</option>
{{range .Data.ProviderTypes}}
<option value="{{.ID}}">{{.Name}}</option>
{{end}}
</select>
</div>
</div>
<div class="form-row">
<div class="form-group" style="flex:2;min-width:200px;">
<label>Endpoint</label>
<input type="text" id="providerFormEndpoint" placeholder="https://api.openai.com/v1">
</div>
<div class="form-group" style="flex:1;min-width:150px;">
<label>API Key</label>
<input type="password" id="providerFormKey" placeholder="sk-...">
</div>
</div>
<div class="form-row">
<div class="form-group" style="flex:1;min-width:150px;">
<label>Scope</label>
<select id="providerFormScope">
<option value="global">Global</option>
<option value="team">Team</option>
</select>
</div>
<div class="form-group" style="flex:1;min-width:150px;" id="providerFormTeamWrap" style="display:none;">
<label>Team</label>
{{template "team-select" (dict "FieldName" "providerFormTeamId" "Label" "" "Teams" .Data.Teams "Selected" "" "AllowEmpty" false)}}
</div>
</div>
<div style="display:flex;gap:8px;margin-top:8px;">
<button class="btn-small btn-primary" onclick="Pages.saveProvider()">Save</button>
<button class="btn-small" onclick="Pages.hideProviderForm()">Cancel</button>
</div>
</div>
{{end}}

94
server/pages/templates/admin/roles.html Normal file
View File

@@ -0,0 +1,94 @@
{{/*
admin/roles.html — Model Roles configuration page.
Fixes bug #1: embedding models now appear via model_type filtering.
*/}}
{{define "admin-roles"}}
<div class="admin-page">
<h2>Model Roles</h2>
<p class="section-hint">Configure which models serve background tasks. Each role has a primary and optional fallback.</p>
{{$providers := .Data.Providers}}
{{$models := .Data.Models}}
{{range .Data.Roles}}
<section class="settings-section" style="margin-bottom:16px">
<h3 style="font-size:14px;margin:0 0 12px;text-transform:capitalize">{{.Name}} Role</h3>
<p class="section-hint" style="margin-bottom:12px">
{{if eq .Name "utility"}}Summarization, classification, routing — typically a fast, cheap chat model.{{end}}
{{if eq .Name "embedding"}}Vector generation for knowledge base search and semantic note search.{{end}}
</p>
{{$roleName := .Name}}
{{$filterType := roleFilterType .Name}}
{{$primaryProvID := ""}}
{{$primaryModelID := ""}}
{{$fallbackProvID := ""}}
{{$fallbackModelID := ""}}
{{if .Primary}}
{{$primaryProvID = .Primary.ProviderID}}
{{$primaryModelID = .Primary.ModelID}}
{{end}}
{{if .Fallback}}
{{$fallbackProvID = .Fallback.ProviderID}}
{{$fallbackModelID = .Fallback.ModelID}}
{{end}}
<div class="role-config" data-role="{{$roleName}}">
<div style="margin-bottom:8px">
<label style="font-size:12px;color:var(--text-secondary)">Primary</label>
<div class="form-row" style="gap:8px;align-items:center;margin-top:4px">
<select class="model-provider-select"
data-role="{{$roleName}}" data-slot="primary"
data-filter-type="{{$filterType}}"
onchange="Pages.roleProviderChanged(this)"
style="min-width:140px">
<option value="">— none —</option>
{{range $providers}}
<option value="{{.ID}}"{{if eq .ID $primaryProvID}} selected{{end}}>{{.Name}}</option>
{{end}}
</select>
<select class="model-model-select"
data-role="{{$roleName}}" data-slot="primary"
style="min-width:200px">
<option value="">— select model —</option>
{{range $models}}
{{if and (eq .ProviderConfigID $primaryProvID) (or (eq $filterType "") (eq .ModelType $filterType))}}
<option value="{{.ModelID}}"{{if eq .ModelID $primaryModelID}} selected{{end}}>{{.DisplayName}}</option>
{{end}}
{{end}}
</select>
</div>
</div>
<div style="margin-bottom:8px">
<label style="font-size:12px;color:var(--text-secondary)">Fallback</label>
<div class="form-row" style="gap:8px;align-items:center;margin-top:4px">
<select class="model-provider-select"
data-role="{{$roleName}}" data-slot="fallback"
data-filter-type="{{$filterType}}"
onchange="Pages.roleProviderChanged(this)"
style="min-width:140px">
<option value="">— none —</option>
{{range $providers}}
<option value="{{.ID}}"{{if eq .ID $fallbackProvID}} selected{{end}}>{{.Name}}</option>
{{end}}
</select>
<select class="model-model-select"
data-role="{{$roleName}}" data-slot="fallback"
style="min-width:200px">
<option value="">— select model —</option>
{{range $models}}
{{if and (eq .ProviderConfigID $fallbackProvID) (or (eq $filterType "") (eq .ModelType $filterType))}}
<option value="{{.ModelID}}"{{if eq .ModelID $fallbackModelID}} selected{{end}}>{{.DisplayName}}</option>
{{end}}
{{end}}
</select>
</div>
</div>
<button class="btn-small btn-primary" onclick="Pages.saveRole('{{$roleName}}')">Save</button>
</div>
</section>
{{end}}
</div>
{{end}}

80
server/pages/templates/admin/routing.html Normal file
View File

@@ -0,0 +1,80 @@
{{/*
admin/routing.html — Routing Policy management.
Fixes bug #2: team scope uses a proper dropdown, not raw text.
*/}}
{{define "admin-routing"}}
<div class="admin-page">
<h2>Routing Policies</h2>
<p class="section-hint">Define rules for model selection, cost limits, and team-specific routing.</p>
<div style="margin-bottom:12px">
<button class="btn-small btn-primary" onclick="Pages.showRoutingForm()">+ New Policy</button>
</div>
<div id="routingPolicyForm" style="display:none" class="admin-inline-form">
<input type="hidden" id="routingPolicyId">
<div class="form-row" style="gap:8px">
<div class="form-group" style="flex:1">
<label>Name</label>
<input type="text" id="routingPolicyName" placeholder="e.g. Prefer local provider">
</div>
<div class="form-group" style="width:80px">
<label>Priority</label>
<input type="number" id="routingPolicyPriority" value="100" min="0" max="999">
</div>
</div>
<div class="form-row" style="gap:8px">
<div class="form-group" style="flex:1">
<label>Type</label>
<select id="routingPolicyType">
<option value="provider_prefer">Provider Prefer</option>
<option value="team_route">Team Route</option>
<option value="cost_limit">Cost Limit</option>
<option value="model_alias">Model Alias</option>
</select>
</div>
<div class="form-group" style="flex:1">
<label>Scope</label>
<select id="routingPolicyScope" onchange="Pages.routingScopeChanged(this)">
<option value="global">Global</option>
<option value="team">Team</option>
</select>
</div>
</div>
{{/* Team dropdown — shown when scope=team. Pre-populated from server. */}}
<div class="form-row" id="routingTeamRow" style="display:none">
<div class="form-group" style="flex:1">
<label>Team</label>
<select id="routingPolicyTeamId">
<option value="">— select team —</option>
{{range .Data.Teams}}
<option value="{{.ID}}">{{.Name}}</option>
{{end}}
</select>
</div>
</div>
<div class="form-group">
<label>Config (JSON)</label>
<textarea id="routingPolicyConfig" rows="4" placeholder='{"provider_config_id": "..."}'
style="font-family:monospace;"></textarea>
</div>
<div class="form-row" style="gap:8px">
<label class="checkbox-label">
<input type="checkbox" id="routingPolicyActive" checked> Active
</label>
</div>
<div class="form-row" style="gap:8px;margin-top:8px">
<button class="btn-small btn-primary" onclick="Pages.saveRoutingPolicy()">Save</button>
<button class="btn-small" onclick="Pages.hideRoutingForm()">Cancel</button>
</div>
</div>
<div id="routingPolicyList">
{{if not .Data.Policies}}
<div class="empty-hint">No routing policies configured.</div>
{{end}}
</div>
</div>
{{end}}

83
server/pages/templates/admin/settings.html Normal file
View File

@@ -0,0 +1,83 @@
{{/* Admin settings — core system configuration. */}}
{{define "admin-settings"}}
<div class="admin-page">
<h2>Settings</h2>
<p class="section-hint">Core system configuration. Changes take effect immediately.</p>
{{/* ── Registration ───────────────────── */}}
<div class="settings-section">
<h3 style="font-size:14px;margin:0 0 12px;">Registration</h3>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="settRegEnabled"> Allow new user registration
</label>
</div>
<div class="form-group">
<label>Default new user state</label>
<select id="settRegDefaultState" style="width:180px;">
<option value="active">Active immediately</option>
<option value="pending">Pending approval</option>
</select>
</div>
</div>
{{/* ── User Permissions ─────────────────── */}}
<div class="settings-section">
<h3 style="font-size:14px;margin:0 0 12px;">User Permissions</h3>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="settUserBYOK"> Allow users to add own API keys (BYOK)
</label>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="settUserPersonas"> Allow users to create personas
</label>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="settKBDirect"> Allow direct knowledge base access
</label>
</div>
</div>
{{/* ── Banner ─────────────────────────── */}}
<div class="settings-section">
<h3 style="font-size:14px;margin:0 0 12px;">Environment Banner</h3>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="settBannerEnabled"> Show banner
</label>
</div>
<div id="bannerFields" style="display:none;">
<div class="form-row">
<div class="form-group" style="flex:2;min-width:200px;">
<label>Text</label>
<input type="text" id="settBannerText" placeholder="UNCLASSIFIED">
</div>
<div class="form-group" style="flex:1;min-width:100px;">
<label>Background</label>
<input type="color" id="settBannerBg" value="#007a33" style="width:60px;height:30px;padding:2px;">
</div>
<div class="form-group" style="flex:1;min-width:100px;">
<label>Text Color</label>
<input type="color" id="settBannerFg" value="#ffffff" style="width:60px;height:30px;padding:2px;">
</div>
</div>
</div>
</div>
{{/* ── System Prompt ──────────────────── */}}
<div class="settings-section">
<h3 style="font-size:14px;margin:0 0 12px;">Default System Prompt</h3>
<div class="form-group">
<textarea id="settSystemPrompt" rows="4" style="width:100%;resize:vertical;" placeholder="Optional system prompt applied to all new conversations"></textarea>
</div>
</div>
<div style="margin-top:16px;">
<button class="btn-small btn-primary" onclick="Pages.saveSettings()">Save Settings</button>
</div>
</div>
{{end}}

62
server/pages/templates/admin/teams.html Normal file
View File

@@ -0,0 +1,62 @@
{{/* Admin teams — team list with member counts. */}}
{{define "admin-teams"}}
<div class="admin-page">
<h2>Teams</h2>
<p class="section-hint">Organize users into teams for scoped access to providers, presets, and policies.</p>
<div class="admin-toolbar">
<button class="btn-small btn-primary" onclick="Pages.showTeamForm()">+ Create Team</button>
</div>
<div id="teamFormWrap" style="display:none;">
<div class="admin-inline-form" id="teamForm">
<h3 style="margin:0 0 12px;font-size:14px;" id="teamFormTitle">Create Team</h3>
<input type="hidden" id="teamFormId" value="">
<div class="form-row">
<div class="form-group" style="flex:1;min-width:200px;">
<label>Name</label>
<input type="text" id="teamFormName" placeholder="Engineering">
</div>
<div class="form-group" style="flex:2;min-width:250px;">
<label>Description</label>
<input type="text" id="teamFormDescription" placeholder="Optional description">
</div>
</div>
<div style="display:flex;gap:8px;margin-top:8px;">
<button class="btn-small btn-primary" onclick="Pages.saveTeam()">Save</button>
<button class="btn-small" onclick="Pages.hideTeamForm()">Cancel</button>
</div>
</div>
</div>
{{if .Data.Teams}}
<table class="admin-table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Members</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{{range .Data.Teams}}
<tr>
<td><strong>{{.Name}}</strong></td>
<td style="color:var(--text-secondary);">{{.Description}}</td>
<td>{{.MemberCount}}</td>
<td><span class="admin-badge admin-badge-{{if .IsActive}}active{{else}}inactive{{end}}">{{if .IsActive}}active{{else}}inactive{{end}}</span></td>
<td>
<button class="btn-small" onclick="Pages.editTeam('{{.ID}}','{{.Name}}','{{.Description}}')">Edit</button>
</td>
</tr>
{{end}}
</tbody>
</table>
{{else}}
<div class="empty-hint">No teams created yet.</div>
{{end}}
</div>
{{end}}

48
server/pages/templates/admin/users.html Normal file
View File

@@ -0,0 +1,48 @@
{{/* Admin users — user management table. */}}
{{define "admin-users"}}
<div class="admin-page">
<h2>Users</h2>
<p class="section-hint">Manage user accounts, roles, and access.</p>
<div class="admin-toolbar">
<input type="text" class="admin-search" id="userSearch" placeholder="Filter users…" oninput="Pages.filterUsers(this.value)">
</div>
{{if .Data.Users}}
<table class="admin-table" id="userTable">
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Display Name</th>
<th>Role</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{{range .Data.Users}}
<tr data-name="{{.Username}} {{.Email}} {{.DisplayName}}">
<td><strong>{{.Username}}</strong></td>
<td style="color:var(--text-secondary);">{{.Email}}</td>
<td>{{.DisplayName}}</td>
<td><span class="admin-badge admin-badge-{{.Role}}">{{.Role}}</span></td>
<td><span class="admin-badge admin-badge-{{if .IsActive}}active{{else}}inactive{{end}}">{{if .IsActive}}active{{else}}inactive{{end}}</span></td>
<td>
<button class="btn-small" onclick="Pages.editUserRole('{{.ID}}','{{.Username}}','{{.Role}}')">Role</button>
{{if .IsActive}}
<button class="btn-small" onclick="Pages.toggleUser('{{.ID}}',false)">Disable</button>
{{else}}
<button class="btn-small" onclick="Pages.toggleUser('{{.ID}}',true)">Enable</button>
{{end}}
</td>
</tr>
{{end}}
</tbody>
</table>
{{else}}
<div class="empty-hint">No users found.</div>
{{end}}
</div>
{{end}}

72
server/pages/templates/base.html Normal file
View File

@@ -0,0 +1,72 @@
{{define "base.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
<title>{{block "title" .}}Chat Switchboard{{end}}</title>
<link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
<link rel="icon" type="image/x-icon" href="{{.BasePath}}/favicon.ico?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/styles.css?v={{.Version}}">
{{if eq .Surface "chat"}}{{template "css-chat" .}}{{end}}
{{if eq .Surface "admin"}}{{template "css-admin" .}}{{end}}
{{if eq .Surface "editor"}}{{template "css-editor" .}}{{end}}
{{if eq .Surface "notes"}}{{template "css-notes" .}}{{end}}
{{if eq .Surface "settings"}}{{template "css-settings" .}}{{end}}
<style>
:root {
--banner-h: 28px;
--banner-top-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
--banner-bot-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
--surface-h: calc(100vh - var(--banner-top-h) - var(--banner-bot-h));
}
body { margin: 0; background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0); }
.surface { height: var(--surface-h); overflow: hidden; }
.banner { flex-shrink: 0; }
</style>
<meta name="theme-color" content="#0e0e10">
</head>
<body data-surface="{{.Surface}}" data-base-path="{{.BasePath}}">
{{if .Banner.Visible}}
<div class="banner banner-top" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;overflow:hidden;">
{{.Banner.Text}}
</div>
{{end}}
<div class="surface" id="surface">
{{if eq .Surface "chat"}}{{template "surface-chat" .}}
{{else if eq .Surface "admin"}}{{template "surface-admin" .}}
{{else if eq .Surface "editor"}}{{template "surface-editor" .}}
{{else if eq .Surface "notes"}}{{template "surface-notes" .}}
{{else if eq .Surface "settings"}}{{template "surface-settings" .}}
{{else}}<div style="padding:20px">Unknown surface: {{.Surface}}</div>
{{end}}
</div>
{{if .Banner.Visible}}
<div class="banner banner-bottom" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;overflow:hidden;">
{{.Banner.Text}}
</div>
{{end}}
<script nonce="{{.CSPNonce}}">
window.__BASE__ = '{{.BasePath}}';
window.__VERSION__ = '{{.Version}}';
window.__SURFACE__ = '{{.Surface}}';
window.__PAGE_DATA__ = {{.Data | toJSON}};
window.__USER__ = {{.User | toJSON}};
</script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/api.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/events.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-primitives.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/pages.js?v={{.Version}}"></script>
{{if eq .Surface "chat"}}{{template "scripts-chat" .}}{{end}}
{{if eq .Surface "admin"}}{{template "scripts-admin" .}}{{end}}
{{if eq .Surface "editor"}}{{template "scripts-editor" .}}{{end}}
{{if eq .Surface "notes"}}{{template "scripts-notes" .}}{{end}}
{{if eq .Surface "settings"}}{{template "scripts-settings" .}}{{end}}
</body>
</html>
{{end}}

29
server/pages/templates/components/file-upload.html Normal file
View File

@@ -0,0 +1,29 @@
{{/*
Reusable file upload component (v0.23.0).
Renders a drop zone + file picker button.
Expects dict with:
FieldName — unique ID for the input (e.g. "workspace-upload")
Label — optional label text
Multiple — bool, allow multiple files
Accept — optional file type filter (e.g. ".md,.txt,.go")
DropZone — bool, show drag-and-drop zone
*/}}
{{define "file-upload"}}
<div class="file-upload-wrap" id="{{.FieldName}}Wrap">
{{if .Label}}<label class="form-group-label">{{.Label}}</label>{{end}}
<input type="file" id="{{.FieldName}}Input"
{{if .Multiple}}multiple{{end}}
{{if .Accept}}accept="{{.Accept}}"{{end}}
style="display:none">
<button type="button" class="btn-small btn-primary"
onclick="document.getElementById('{{.FieldName}}Input').click()">
Choose files…
</button>
{{if .DropZone}}
<div class="file-upload-drop" id="{{.FieldName}}Drop">
Drop files here or click above
</div>
{{end}}
</div>
{{end}}

36
server/pages/templates/components/model-select.html Normal file
View File

@@ -0,0 +1,36 @@
{{/*
model-select: Reusable provider + model dropdown pair.
Used in admin roles page with FilterType for model_type filtering.
When provider changes, Pages.roleProviderChanged() filters models
from __PAGE_DATA__.Models on the client side.
*/}}
{{define "model-select"}}
<div class="form-group model-select-group" data-field="{{index . "FieldName"}}">
{{if index . "Label"}}<label>{{index . "Label"}}</label>{{end}}
<div class="form-row" style="gap:8px;align-items:center">
<select name="{{index . "FieldName"}}_provider"
class="model-provider-select"
data-target="{{index . "FieldName"}}_model"
data-filter-type="{{index . "FilterType"}}"
style="min-width:140px">
<option value="">— select provider —</option>
{{$selProv := index . "SelectedProvider"}}
{{range index . "Providers"}}
<option value="{{.ID}}"{{if eq .ID $selProv}} selected{{end}}>{{.Name}}</option>
{{end}}
</select>
<select name="{{index . "FieldName"}}_model"
class="model-model-select"
style="min-width:200px">
<option value="">— select model —</option>
{{$selModel := index . "SelectedModel"}}
{{$filterType := index . "FilterType"}}
{{range index . "Models"}}
{{if and (eq .ProviderConfigID $selProv) (or (eq $filterType "") (eq .ModelType $filterType))}}
<option value="{{.ModelID}}"{{if eq .ModelID $selModel}} selected{{end}}>{{.DisplayName}}</option>
{{end}}
{{end}}
</select>
</div>
</div>
{{end}}

18
server/pages/templates/components/team-select.html Normal file
View File

@@ -0,0 +1,18 @@
{{/*
team-select: Reusable team dropdown.
Pre-populated from server data — no client-side fetch needed.
*/}}
{{define "team-select"}}
<div class="form-group">
{{if index . "Label"}}<label>{{index . "Label"}}</label>{{end}}
<select name="{{index . "FieldName"}}" class="team-select">
{{if index . "AllowEmpty"}}
<option value="">— all teams —</option>
{{end}}
{{$sel := index . "Selected"}}
{{range index . "Teams"}}
<option value="{{.ID}}"{{if eq .ID $sel}} selected{{end}}>{{.Name}}</option>
{{end}}
</select>
</div>
{{end}}

72
server/pages/templates/login.html Normal file
View File

@@ -0,0 +1,72 @@
{{define "login.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login — Chat Switchboard</title>
<link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/styles.css?v={{.Version}}">
<style>
:root {
--banner-h: 28px;
--banner-top-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
--banner-bot-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
}
body { margin: 0; background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0); }
</style>
</head>
<body>
{{if .Banner.Visible}}
<div class="banner banner-top" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;">
{{.Banner.Text}}
</div>
{{end}}
<div style="display:flex;align-items:center;justify-content:center;height:calc(100vh - var(--banner-top-h) - var(--banner-bot-h));">
<div style="width:360px;padding:32px;">
<div style="text-align:center;margin-bottom:24px;">
<img src="{{.BasePath}}/favicon-32.png" alt="" style="width:48px;height:48px;margin-bottom:12px;">
<h1 style="font-size:20px;margin:0;">Chat Switchboard</h1>
</div>
<div id="loginError" class="form-error" style="display:none;margin-bottom:12px;color:#ef4444;font-size:13px;"></div>
<div style="margin-bottom:12px;">
<label for="loginUsername" style="display:block;font-size:12px;color:var(--text-secondary,#888);margin-bottom:4px;">Username</label>
<input type="text" id="loginUsername" autocomplete="username" autofocus
style="width:100%;padding:8px;border-radius:6px;border:1px solid var(--border,#2a2a2a);background:var(--bg-secondary,#1a1a1e);color:var(--text-primary,#e0e0e0);font-size:14px;box-sizing:border-box;">
</div>
<div style="margin-bottom:16px;">
<label for="loginPassword" style="display:block;font-size:12px;color:var(--text-secondary,#888);margin-bottom:4px;">Password</label>
<input type="password" id="loginPassword" autocomplete="current-password"
style="width:100%;padding:8px;border-radius:6px;border:1px solid var(--border,#2a2a2a);background:var(--bg-secondary,#1a1a1e);color:var(--text-primary,#e0e0e0);font-size:14px;box-sizing:border-box;">
</div>
<button id="loginBtn" onclick="Pages.doLogin()"
style="width:100%;padding:10px;border:none;border-radius:6px;background:var(--accent,#5865f2);color:white;font-size:14px;cursor:pointer;">
Log In
</button>
</div>
</div>
{{if .Banner.Visible}}
<div class="banner banner-bottom" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;">
{{.Banner.Text}}
</div>
{{end}}
<script>
window.__BASE__ = '{{.BasePath}}';
</script>
<script src="{{.BasePath}}/js/pages.js?v={{.Version}}"></script>
<script>
document.getElementById('loginPassword').addEventListener('keydown', (e) => {
if (e.key === 'Enter') Pages.doLogin();
});
document.getElementById('loginUsername').addEventListener('keydown', (e) => {
if (e.key === 'Enter') document.getElementById('loginPassword').focus();
});
</script>
</body>
</html>
{{end}}

193
server/pages/templates/surfaces/admin.html Normal file
View 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
View 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
View 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
View 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
View 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}}