Changeset 0.22.7 (#149)

This commit is contained in:
2026-03-04 10:44:42 +00:00
parent d8e0664fa3
commit 389e47b0f9
62 changed files with 6820 additions and 1476 deletions

View File

@@ -1,236 +1,162 @@
{{/*
Settings surface (Phase 2b).
Server renders a full-page settings layout (replaces the modal).
Reuses existing settings-handlers.js + ui-settings.js for interactions.
Settings surface — matches switchboard-prototype-settings.jsx.
Full-page layout: topbar + left nav + content area.
JS (settings-handlers.js, ui-settings.js) populates dynamic sections.
*/}}
{{define "surface-settings"}}
<div class="surface-settings">
<div class="settings-nav">
<div class="settings-nav-title">Settings</div>
{{$section := .Section}}
<a href="{{.BasePath}}/settings/general" class="settings-nav-link{{if eq $section "general"}} active{{end}}">General</a>
<a href="{{.BasePath}}/settings/appearance" class="settings-nav-link{{if eq $section "appearance"}} active{{end}}">Appearance</a>
<a href="{{.BasePath}}/settings/providers" class="settings-nav-link{{if eq $section "providers"}} active{{end}}">My Providers</a>
<a href="{{.BasePath}}/settings/models" class="settings-nav-link{{if eq $section "models"}} active{{end}}">My Models</a>
<a href="{{.BasePath}}/settings/personas" class="settings-nav-link{{if eq $section "personas"}} active{{end}}">My Presets</a>
<a href="{{.BasePath}}/settings/roles" class="settings-nav-link{{if eq $section "roles"}} active{{end}}">Model Roles</a>
<a href="{{.BasePath}}/settings/knowledge" class="settings-nav-link{{if eq $section "knowledge"}} active{{end}}">Knowledge Bases</a>
<a href="{{.BasePath}}/settings/memory" class="settings-nav-link{{if eq $section "memory"}} active{{end}}">Memory</a>
<a href="{{.BasePath}}/settings/notifications" class="settings-nav-link{{if eq $section "notifications"}} active{{end}}">Notifications</a>
<a href="{{.BasePath}}/settings/usage" class="settings-nav-link{{if eq $section "usage"}} active{{end}}">Usage</a>
<div class="settings-nav-sep"></div>
<a href="{{.BasePath}}/" class="settings-nav-link settings-nav-back">← Back to Chat</a>
<div class="surface-settings" style="flex-direction:column;">
{{/* Top Bar */}}
<div class="settings-topbar">
<a href="{{.BasePath}}/" class="settings-topbar-back">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
Back to Chat
</a>
<div class="settings-topbar-sep"></div>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--text-2)"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
<span class="settings-topbar-title">Settings</span>
</div>
<div class="settings-content" id="settingsContentMount">
{{/* Content rendered by section-specific JS or server template */}}
<div class="settings-content-inner" id="settingsSection" data-section="{{.Section}}">
{{if eq .Section "general"}}{{template "settings-general" .}}
{{else if eq .Section "appearance"}}{{template "settings-appearance" .}}
{{else if eq .Section "providers"}}{{template "settings-providers" .}}
{{else if eq .Section "personas"}}{{template "settings-personas" .}}
{{else}}<div class="settings-placeholder" id="settingsDynamic">Loading…</div>
{{end}}
<div style="display:flex;flex:1;min-height:0;">
{{/* Left Nav */}}
<div class="settings-nav">
{{$section := .Section}}
{{$base := .BasePath}}
<a href="{{$base}}/settings/general" class="settings-nav-link{{if eq $section "general"}} active{{end}}">General</a>
<a href="{{$base}}/settings/appearance" class="settings-nav-link{{if eq $section "appearance"}} active{{end}}">Appearance</a>
<a href="{{$base}}/settings/models" class="settings-nav-link{{if eq $section "models"}} active{{end}}">Models</a>
<a href="{{$base}}/settings/personas" class="settings-nav-link{{if eq $section "personas"}} active{{end}}">Personas</a>
<a href="{{$base}}/settings/profile" class="settings-nav-link{{if eq $section "profile"}} active{{end}}">Profile</a>
<a href="{{$base}}/settings/teams" class="settings-nav-link{{if eq $section "teams"}} active{{end}}">Teams</a>
{{/* BYOK-gated nav items */}}
<div id="settingsByokNav" style="display:none;">
<div class="settings-nav-sep"></div>
<a href="{{$base}}/settings/providers" class="settings-nav-link{{if eq $section "providers"}} active{{end}}">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
My Providers
</a>
<a href="{{$base}}/settings/roles" class="settings-nav-link{{if eq $section "roles"}} active{{end}}">Model Roles</a>
<a href="{{$base}}/settings/usage" class="settings-nav-link{{if eq $section "usage"}} active{{end}}">My Usage</a>
</div>
{{/* BYOK indicator */}}
<div id="settingsByokIndicator" class="settings-nav-footer" style="display:none;">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
<span style="font-size:11px;font-weight:600;color:var(--success);">BYOK Enabled</span>
</div>
<p style="font-size:10px;color:var(--text-3);margin:0;line-height:1.5;">Admin has enabled Bring Your Own Key</p>
</div>
</div>
{{/* Content */}}
<div class="settings-content" id="settingsContentMount">
<div id="settingsSection" data-section="{{.Section}}">
<h2 id="settingsSectionTitle">{{if eq .Section "general"}}General{{else if eq .Section "appearance"}}Appearance{{else if eq .Section "models"}}Models{{else if eq .Section "personas"}}Personas{{else if eq .Section "profile"}}Profile{{else if eq .Section "teams"}}Teams{{else if eq .Section "providers"}}My Providers{{else if eq .Section "roles"}}Model Roles{{else if eq .Section "usage"}}My Usage{{else if eq .Section "knowledge"}}Knowledge Bases{{else if eq .Section "memory"}}Memory{{else if eq .Section "notifications"}}Notifications{{else}}Settings{{end}}</h2>
{{if eq .Section "general"}}
<div class="settings-section">
<h3>Chat Defaults</h3>
<div class="form-group">
<label>Default Model</label>
<select id="settingsModel"></select>
</div>
<div class="form-group">
<label>System Prompt</label>
<textarea id="settingsSystemPrompt" rows="3" placeholder="Optional system prompt…" style="max-width:100%;"></textarea>
</div>
<div style="display:flex;gap:16px;">
<div class="form-group" style="flex:1;">
<label>Max Tokens <span id="settingsMaxHint" style="font-weight:400;color:var(--text-3);"></span></label>
<input type="number" id="settingsMaxTokens" placeholder="default">
</div>
<div class="form-group" style="flex:1;">
<label>Temperature</label>
<div style="display:flex;align-items:center;gap:8px;">
<input type="range" id="settingsTemp" min="0" max="2" step="0.1" value="0.7" style="flex:1;">
<span id="settingsTempValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);">0.7</span>
</div>
</div>
</div>
<label style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);cursor:pointer;margin-top:4px;">
<input type="checkbox" id="settingsThinking"> Show thinking blocks
</label>
</div>
{{else if eq .Section "appearance"}}
<div class="settings-section">
<h3>Theme</h3>
<div id="themeToggle" class="toggle-group">
<button class="toggle-btn" data-theme="light">&#9728; Light</button>
<button class="toggle-btn" data-theme="dark">&#9790; Dark</button>
<button class="toggle-btn" data-theme="system">&#8862; System</button>
</div>
</div>
<div class="settings-section">
<h3>UI Scale</h3>
<div class="form-group">
<div style="display:flex;align-items:center;gap:8px;">
<input type="range" id="settingsScale" min="80" max="120" step="5" value="100" style="flex:1;">
<span id="scaleValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">100%</span>
</div>
</div>
<h3 style="margin-top:16px;">Message Font Size</h3>
<div class="form-group">
<div style="display:flex;align-items:center;gap:8px;">
<input type="range" id="settingsMsgFont" min="12" max="20" step="1" value="14" style="flex:1;">
<span id="msgFontValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">14px</span>
</div>
</div>
</div>
<button class="btn-md btn-primary" onclick="if(typeof UI!=='undefined')UI.saveAppearance?.()">Save</button>
{{else if eq .Section "profile"}}
<div class="settings-section">
<h3>Profile</h3>
<div class="form-group"><label>Display Name</label><input type="text" id="profileDisplayName" placeholder="Your display name"></div>
<div class="form-group"><label>Email</label><input type="email" id="profileEmail" disabled></div>
<button class="btn-md btn-primary" onclick="if(typeof Pages!=='undefined')Pages.saveProfile?.()">Save Profile</button>
</div>
<div class="settings-section" style="margin-top:20px;">
<h3>Change Password</h3>
<div class="form-group"><label>Current Password</label><input type="password" id="settingsCurrentPw" autocomplete="current-password"></div>
<div class="form-group"><label>New Password</label><input type="password" id="settingsNewPw" autocomplete="new-password"></div>
<div class="form-group"><label>Confirm New Password</label><input type="password" id="settingsConfirmPw" autocomplete="new-password"></div>
<button class="btn-md btn-primary" onclick="if(typeof Pages!=='undefined')Pages.changePassword?.()">Update Password</button>
</div>
{{else if eq .Section "providers"}}
<div id="userProvidersDisabled" style="display:none;">
<div class="settings-section"><p style="color:var(--text-2);font-size:13px;">Your admin has disabled user-managed API keys (BYOK).</p></div>
</div>
<div style="margin-bottom:12px;">
<button class="btn-md btn-primary" id="providerShowAddBtn" style="display:none;">+ Add Provider</button>
</div>
<div id="providerAddForm" style="display:none;"></div>
<div id="providerList"><div class="settings-placeholder">Loading providers…</div></div>
{{else if eq .Section "personas"}}
<div style="margin-bottom:12px;">
<button class="btn-md btn-primary" id="userAddPersonaBtn" style="display:none;">+ New Persona</button>
</div>
<div id="userAddPersonaForm" style="display:none;"></div>
<div id="userPersonaList"><div class="settings-placeholder">Loading personas…</div></div>
{{else}}<div class="settings-placeholder" id="settingsDynamic">Loading…</div>
{{end}}
</div>
</div>
</div>
</div>
<div id="toastContainer" class="toast-container"></div>
{{end}}
{{define "settings-general"}}
<div class="settings-section">
<h2>Profile</h2>
<div class="form-group">
<label>Display Name</label>
<input type="text" id="settingsDisplayName" value="{{if .User}}{{.User.display_name}}{{end}}" placeholder="Your name">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="settingsEmail" value="{{if .User}}{{.User.email}}{{end}}" disabled>
</div>
<button class="btn-small btn-primary" onclick="Pages.saveProfile()">Save</button>
</div>
<div class="settings-section" style="margin-top:16px">
<h2>Password</h2>
<div class="form-group">
<label>Current Password</label>
<input type="password" id="settingsCurrentPw">
</div>
<div class="form-group">
<label>New Password</label>
<input type="password" id="settingsNewPw">
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" id="settingsConfirmPw">
</div>
<button class="btn-small btn-primary" onclick="Pages.changePassword()">Change Password</button>
</div>
{{end}}
{{define "settings-appearance"}}
<div class="settings-section">
<h2>Theme</h2>
<div id="themeToggle" class="settings-toggle-group">
<button class="theme-btn" data-theme="dark">Dark</button>
<button class="theme-btn" data-theme="light">Light</button>
</div>
</div>
<div class="settings-section" style="margin-top:16px">
<h2>Editor Keymap</h2>
<div id="keymapToggle" class="settings-toggle-group">
<button class="theme-btn" data-keymap="standard">Standard</button>
<button class="theme-btn" data-keymap="vim">Vim</button>
<button class="theme-btn" data-keymap="emacs">Emacs</button>
</div>
</div>
<div class="settings-section" style="margin-top:16px">
<h2>UI Scale</h2>
<div class="form-group">
<input type="range" id="settingsScale" min="80" max="120" step="5" value="100">
<span id="scaleValue">100%</span>
</div>
<h2>Message Font Size</h2>
<div class="form-group">
<input type="range" id="settingsMsgFont" min="12" max="20" step="1" value="14">
<span id="msgFontValue">14px</span>
</div>
</div>
{{end}}
{{define "settings-providers"}}
<div id="userProvidersDisabled" class="settings-section" style="display:none;">
<p style="color:var(--text-secondary);font-size:13px;">Your admin has disabled user-managed API keys (BYOK). Models are available through team presets.</p>
</div>
<div style="margin-bottom:12px;">
<button class="btn-small btn-primary" id="providerShowAddBtn">+ Add Provider</button>
</div>
<div id="providerAddForm" style="display:none;"></div>
<div id="providerList"><div class="settings-placeholder">Loading providers…</div></div>
{{end}}
{{define "settings-personas"}}
<div style="margin-bottom:12px;">
<button class="btn-small btn-primary" id="userAddPresetBtn">+ New Preset</button>
</div>
<div id="userAddPresetForm" style="display:none;"></div>
<div id="userPresetList"><div class="settings-placeholder">Loading presets…</div></div>
{{end}}
{{define "css-settings"}}
<style>
.surface-settings {
display: flex;
height: 100%;
overflow: hidden;
}
.settings-nav {
width: 200px;
border-right: 1px solid var(--border, #2a2a2a);
padding: 12px;
overflow-y: auto;
flex-shrink: 0;
}
.settings-nav-title {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary, #888);
margin-bottom: 12px;
}
.settings-nav-link {
display: block;
padding: 6px 10px;
border-radius: 6px;
color: var(--text-primary, #e0e0e0);
text-decoration: none;
font-size: 13px;
margin-bottom: 2px;
}
.settings-nav-link.active { background: var(--bg-tertiary, #252528); }
.settings-nav-link:hover { background: var(--bg-secondary, #1a1a1e); }
.settings-nav-sep {
margin: 12px 0;
border-top: 1px solid var(--border, #2a2a2a);
}
.settings-nav-back { color: var(--text-secondary, #888); }
.settings-content {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.settings-section {
padding: 16px;
background: var(--bg-secondary, #1a1a1e);
border-radius: 8px;
border: 1px solid var(--border, #2a2a2a);
max-width: 600px;
}
.settings-section h2 {
font-size: 15px;
margin: 0 0 12px;
}
.settings-toggle-group {
display: flex;
gap: 6px;
}
.settings-toggle-group .theme-btn {
padding: 6px 14px;
border: 1px solid var(--border, #2a2a2a);
border-radius: 6px;
background: var(--bg-primary, #0e0e10);
color: var(--text-primary, #e0e0e0);
cursor: pointer;
font-size: 13px;
}
.settings-toggle-group .theme-btn.active {
background: var(--accent, #5865f2);
border-color: var(--accent, #5865f2);
color: white;
}
.settings-placeholder {
padding: 20px;
color: var(--text-secondary, #888);
}
.form-group { margin-bottom: 8px; }
.form-group label {
display: block;
font-size: 12px;
color: var(--text-secondary, #888);
margin-bottom: 4px;
}
.form-group input, .form-group select, .form-group textarea {
padding: 6px 8px;
border-radius: 6px;
border: 1px solid var(--border, #2a2a2a);
background: var(--bg-primary, #0e0e10);
color: var(--text-primary, #e0e0e0);
font-size: 13px;
width: 100%;
max-width: 300px;
}
.btn-small {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
}
.btn-primary {
background: var(--accent, #5865f2);
color: white;
}
.btn-primary:hover { opacity: 0.9; }
@media (max-width: 768px) {
.settings-nav { width: 160px; font-size: 12px; }
}
</style>
{{end}}
{{/* CSS: consolidated into styles.css */}}
{{define "css-settings"}}{{end}}
{{/* Scripts */}}
{{define "scripts-settings"}}
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/marked.min.js"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/purify.min.js"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-core.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-settings.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/settings-handlers.js?v={{.Version}}"></script>
@@ -239,32 +165,50 @@
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notification-prefs.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}">
// Settings surface boot
document.addEventListener('DOMContentLoaded', () => {
const section = document.getElementById('settingsSection')?.dataset.section;
if (!section) return;
// Appearance: wire up theme/keymap buttons and sliders
if (section === 'appearance' && typeof UI !== 'undefined') {
UI.loadAppearanceSettings();
UI.initAppearance();
// Show BYOK nav if enabled
const pageData = window.__PAGE_DATA__;
if (pageData && pageData.BYOKEnabled) {
const byokNav = document.getElementById('settingsByokNav');
const byokInd = document.getElementById('settingsByokIndicator');
if (byokNav) byokNav.style.display = '';
if (byokInd) byokInd.style.display = '';
}
// Dynamic sections: let existing JS populate the container
const dynamicSections = {
providers: () => typeof UI !== 'undefined' && UI.loadProviderList(),
models: () => typeof UI !== 'undefined' && UI.loadUserModels(),
personas: () => typeof UI !== 'undefined' && UI.loadUserPresets(),
usage: () => typeof UI !== 'undefined' && UI.loadMyUsage(),
roles: () => typeof UI !== 'undefined' && UI.loadUserRoles(),
knowledge: () => typeof KnowledgeUI !== 'undefined' && KnowledgeUI.openManagePanel(),
memory: () => typeof MemoryUI !== 'undefined' && MemoryUI.openSettingsPanel(),
notifications: () => typeof NotifPrefs !== 'undefined' && NotifPrefs.load(),
};
if (dynamicSections[section]) {
dynamicSections[section]();
if (section === 'appearance' && typeof UI !== 'undefined') {
UI.loadAppearanceSettings?.();
UI.initAppearance?.();
}
if (section === 'general' && typeof UI !== 'undefined') {
UI.loadGeneralSettings?.();
}
if (section === 'profile') {
const user = window.__USER__;
if (user) {
const dn = document.getElementById('profileDisplayName');
const em = document.getElementById('profileEmail');
if (dn) dn.value = user.display_name || user.username || '';
if (em) em.value = user.email || '';
}
}
const dynamicSections = {
providers: () => typeof UI !== 'undefined' && UI.loadProviderList?.(),
models: () => typeof UI !== 'undefined' && UI.loadUserModels?.(),
personas: () => typeof UI !== 'undefined' && UI.loadUserPersonas?.(),
usage: () => typeof UI !== 'undefined' && UI.loadMyUsage?.(),
roles: () => typeof UI !== 'undefined' && UI.loadUserRoles?.(),
knowledge: () => typeof KnowledgeUI !== 'undefined' && KnowledgeUI.openManagePanel?.(),
memory: () => typeof MemoryUI !== 'undefined' && MemoryUI.openSettingsPanel?.(),
notifications: () => typeof NotifPrefs !== 'undefined' && NotifPrefs.load?.(),
teams: () => typeof UI !== 'undefined' && UI.loadTeamsSettings?.(),
};
if (dynamicSections[section]) dynamicSections[section]();
});
</script>
{{end}}