Feat v0.2.5 ui polish dead code (#9)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>

src/js/sw/surfaces/admin/index.js

@@ -15,6 +15,7 @@ const { render } = preact;
 
 import { ToastContainer } from '../../primitives/toast.js';
 import { DialogStack } from '../../shell/dialog-stack.js';
+import { UserMenu } from '../../shell/user-menu.js';
 
 // ── Category → Section mapping ──────────────
 const ADMIN_SECTIONS = {
@@ -121,26 +122,6 @@ function AdminSurface() {
         }
     }, [section]);
 
-    // Back button with return URL stash
-    useEffect(() => {
-        const RETURN_KEY = 'sb_admin_return';
-        if (!sessionStorage.getItem(RETURN_KEY)) {
-            const ref = document.referrer;
-            if (ref && ref.startsWith(location.origin) && !ref.includes('/admin')) {
-                sessionStorage.setItem(RETURN_KEY, ref);
-            } else {
-                sessionStorage.setItem(RETURN_KEY, location.origin + BASE + '/');
-            }
-        }
-    }, []);
-
-    const backClick = useCallback((e) => {
-        e.preventDefault();
-        const RETURN_KEY = 'sb_admin_return';
-        const returnURL = sessionStorage.getItem(RETURN_KEY);
-        sessionStorage.removeItem(RETURN_KEY);
-        location.href = returnURL || BASE + '/';
-    }, []);
 
     const navClick = useCallback((e) => {
         e.preventDefault();
@@ -155,15 +136,6 @@ function AdminSurface() {
         <div class="surface-admin">
             ${/* Top Bar */``}
             <div class="admin-topbar">
-                <a href="${BASE}/" class="admin-topbar-back" onClick=${backClick}>
-                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="19" y1="12" x2="5" y2="12"/>
-                        <polyline points="12 19 5 12 12 5"/>
-                    </svg>
-                    Back
-                </a>
-                <div class="admin-topbar-sep"></div>
                 <span class="admin-topbar-title">
                     <img src="${BASE}/favicon.svg" alt="" width="18" height="18" style="vertical-align:-3px;" />
                     Administration
@@ -179,6 +151,10 @@ function AdminSurface() {
                         </a>
                     `)}
                 </div>
+
+                <div style="margin-left:auto;">
+                    <${UserMenu} placement="down-right" />
+                </div>
             </div>
 
             <div class="admin-body">

src/js/sw/surfaces/admin/settings.js

@@ -6,7 +6,6 @@ const { useState, useEffect, useCallback } = hooks;
 
 export default function SettingsSection() {
     const [cfg, setCfg] = useState({});
-    const [models, setModels] = useState([]);
     const [surfaces, setSurfaces] = useState([]);
     const [vault, setVault] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -14,9 +13,8 @@ export default function SettingsSection() {
 
     const load = useCallback(async () => {
         try {
-            const [s, m, v, surfList] = await Promise.all([
+            const [s, v, surfList] = await Promise.all([
                 sw.api.admin.settings.get(),
-                sw.api.admin.models.list().catch(() => []),
                 sw.api.admin.vault.status().catch(() => null),
                 sw.api.admin.surfaces.list().catch(() => []),
             ]);
@@ -28,11 +26,6 @@ export default function SettingsSection() {
                 default_surface: cfg_.default_surface?.id || '',
                 allow_registration: pol.allow_registration === 'true',
                 registration_default_state: cfg_.registration_default_state || 'pending',
-                system_prompt: cfg_.system_prompt || '',
-                default_model: pol.default_model || '',
-                allow_user_byok: pol.allow_user_byok === 'true',
-                allow_user_personas: pol.allow_user_personas === 'true',
-                allow_kb_direct_access: pol.allow_kb_direct_access === 'true' || pol.kb_direct_access === 'true',
                 banner_enabled: !!cfg_.banner?.enabled,
                 banner_text: cfg_.banner?.text || '',
                 banner_bg: cfg_.banner?.bg || '#007a33',
@@ -43,17 +36,7 @@ export default function SettingsSection() {
                 message_variant: cfg_.message?.variant || 'info',
                 footer_enabled: !!cfg_.footer?.enabled,
                 footer_text: cfg_.footer?.text || '',
-                search_provider: cfg_.search_provider || 'duckduckgo',
-                search_endpoint: cfg_.search_endpoint || '',
-                search_api_key: cfg_.search_api_key || '',
-                search_max_results: cfg_.search_max_results || 5,
-                compaction_enabled: !!cfg_.auto_compaction_enabled,
-                compaction_threshold: cfg_.compaction_threshold || 70,
-                compaction_cooldown: cfg_.compaction_cooldown || 30,
-                memory_extraction_enabled: !!cfg_.memory_extraction_enabled,
-                memory_auto_approve: !!cfg_.memory_auto_approve,
             });
-            setModels(m || []);
             setVault(v);
         } catch (e) { sw.toast(e.message, 'error'); }
         finally { setLoading(false); }
@@ -69,16 +52,9 @@ export default function SettingsSection() {
             // Default surface
             await sw.api.admin.settings.update('default_surface', { value: cfg.default_surface ? { id: cfg.default_surface } : null });
 
-            // Policies
+            // Registration
             await sw.api.admin.settings.update('allow_registration', { value: String(cfg.allow_registration) });
             await sw.api.admin.settings.update('registration_default_state', { value: cfg.registration_default_state });
-            await sw.api.admin.settings.update('allow_user_byok', { value: String(cfg.allow_user_byok) });
-            await sw.api.admin.settings.update('allow_user_personas', { value: String(cfg.allow_user_personas) });
-            await sw.api.admin.settings.update('allow_kb_direct_access', { value: String(cfg.allow_kb_direct_access) });
-
-            // System prompt & default model
-            await sw.api.admin.settings.update('system_prompt', { value: cfg.system_prompt });
-            if (cfg.default_model) await sw.api.admin.settings.update('default_model', { value: cfg.default_model });
 
             // Banner
             await sw.api.admin.settings.update('banner', { value: {
@@ -102,23 +78,6 @@ export default function SettingsSection() {
                 text: cfg.footer_text,
             }});
 
-            // Search
-            await sw.api.admin.settings.update('search_provider', { value: cfg.search_provider });
-            if (cfg.search_provider === 'searxng') {
-                await sw.api.admin.settings.update('search_endpoint', { value: cfg.search_endpoint });
-                await sw.api.admin.settings.update('search_api_key', { value: cfg.search_api_key });
-            }
-            await sw.api.admin.settings.update('search_max_results', { value: cfg.search_max_results });
-
-            // Compaction
-            await sw.api.admin.settings.update('auto_compaction_enabled', { value: String(cfg.compaction_enabled) });
-            await sw.api.admin.settings.update('compaction_threshold', { value: cfg.compaction_threshold });
-            await sw.api.admin.settings.update('compaction_cooldown', { value: cfg.compaction_cooldown });
-
-            // Memory
-            await sw.api.admin.settings.update('memory_extraction_enabled', { value: String(cfg.memory_extraction_enabled) });
-            await sw.api.admin.settings.update('memory_auto_approve', { value: String(cfg.memory_auto_approve) });
-
             sw.toast('Settings saved', 'success');
         } catch (e) { sw.toast(e.message, 'error'); }
         finally { setSaving(false); }
@@ -155,23 +114,6 @@ export default function SettingsSection() {
                 </div>
             </div>
 
-            <div class="settings-section"><h3>System Prompt</h3>
-                <textarea rows="4" placeholder="Global system prompt\u2026" value=${cfg.system_prompt} onInput=${e => set('system_prompt', e.target.value)}></textarea>
-            </div>
-
-            <div class="settings-section"><h3>Default Model</h3>
-                <select value=${cfg.default_model} onChange=${e => set('default_model', e.target.value)}>
-                    <option value="">-- None (first visible) --</option>
-                    ${models.map(m => html`<option key=${m.id} value=${m.model_id || m.id}>${m.display_name || m.model_id || m.id}</option>`)}
-                </select>
-            </div>
-
-            <div class="settings-section"><h3>Policies</h3>
-                <label class="toggle-label"><input type="checkbox" checked=${cfg.allow_user_byok} onChange=${e => set('allow_user_byok', e.target.checked)} /><span class="toggle-track"></span><span>Allow BYOK (user API keys)</span></label>
-                <label class="toggle-label"><input type="checkbox" checked=${cfg.allow_user_personas} onChange=${e => set('allow_user_personas', e.target.checked)} /><span class="toggle-track"></span><span>Allow user personas</span></label>
-                <label class="toggle-label"><input type="checkbox" checked=${cfg.allow_kb_direct_access} onChange=${e => set('allow_kb_direct_access', e.target.checked)} /><span class="toggle-track"></span><span>Allow direct KB access</span></label>
-            </div>
-
             <div class="settings-section"><h3>Environment Banner</h3>
                 <label class="toggle-label"><input type="checkbox" checked=${cfg.banner_enabled} onChange=${e => set('banner_enabled', e.target.checked)} /><span class="toggle-track"></span><span>Show environment banner</span></label>
                 ${cfg.banner_enabled && html`
@@ -217,36 +159,6 @@ export default function SettingsSection() {
                 `}
             </div>
 
-            <div class="settings-section"><h3>Web Search</h3>
-                <div class="form-group"><label>Provider</label>
-                    <select value=${cfg.search_provider} onChange=${e => set('search_provider', e.target.value)}>
-                        <option value="duckduckgo">DuckDuckGo</option><option value="searxng">SearXNG</option>
-                    </select>
-                </div>
-                ${cfg.search_provider === 'searxng' && html`
-                    <div class="form-group"><label>Endpoint</label><input value=${cfg.search_endpoint} onInput=${e => set('search_endpoint', e.target.value)} placeholder="https://searxng.example.com" /></div>
-                    <div class="form-group"><label>API Key</label><input value=${cfg.search_api_key} onInput=${e => set('search_api_key', e.target.value)} placeholder="Optional" /></div>
-                `}
-                <div class="form-group"><label>Max Results</label><input type="number" min="1" max="20" value=${cfg.search_max_results} onInput=${e => set('search_max_results', parseInt(e.target.value) || 5)} /></div>
-            </div>
-
-            <div class="settings-section"><h3>Auto-Compaction</h3>
-                <label class="toggle-label"><input type="checkbox" checked=${cfg.compaction_enabled} onChange=${e => set('compaction_enabled', e.target.checked)} /><span class="toggle-track"></span><span>Enable auto-compaction</span></label>
-                ${cfg.compaction_enabled && html`
-                    <div class="form-row" style="margin-top:8px;">
-                        <div class="form-group"><label>Threshold (%)</label><input type="number" min="50" max="95" value=${cfg.compaction_threshold} onInput=${e => set('compaction_threshold', parseInt(e.target.value))} /></div>
-                        <div class="form-group"><label>Cooldown (min)</label><input type="number" min="5" max="1440" value=${cfg.compaction_cooldown} onInput=${e => set('compaction_cooldown', parseInt(e.target.value))} /></div>
-                    </div>
-                `}
-            </div>
-
-            <div class="settings-section"><h3>Memory Extraction</h3>
-                <label class="toggle-label"><input type="checkbox" checked=${cfg.memory_extraction_enabled} onChange=${e => set('memory_extraction_enabled', e.target.checked)} /><span class="toggle-track"></span><span>Enable memory extraction</span></label>
-                ${cfg.memory_extraction_enabled && html`
-                    <label class="toggle-label" style="margin-top:8px;"><input type="checkbox" checked=${cfg.memory_auto_approve} onChange=${e => set('memory_auto_approve', e.target.checked)} /><span class="toggle-track"></span><span>Auto-approve extracted memories</span></label>
-                `}
-            </div>
-
             <div class="settings-section"><h3>Encryption Vault</h3>
                 ${vault
                     ? html`<div class="text-muted" style="font-size:12px;">Key set: ${vault.encryption_key_set ? 'Yes' : 'No'} \u2022 User vaults: ${vault.user_vaults_count ?? '?'}</div>`

src/js/sw/surfaces/settings/general.js

@@ -1,68 +1,35 @@
 /**
- * GeneralSection — chat defaults: model, system prompt, max tokens, temperature, thinking
+ * GeneralSection — user preferences (default surface)
  */
 const { html } = window;
-const { useState, useEffect, useCallback, useRef } = hooks;
+const { useState, useEffect, useCallback } = hooks;
 
 export function GeneralSection() {
-    const [models, setModels] = useState([]);
-    const [settings, setSettings] = useState({});
+    const [surfaces, setSurfaces] = useState([]);
+    const [defaultSurface, setDefaultSurface] = useState('');
     const [saving, setSaving] = useState(false);
-    const [maxHint, setMaxHint] = useState('');
-    const tempRef = useRef(null);
 
-    // Load settings + models
     useEffect(() => {
         (async () => {
             try {
-                const [s, m] = await Promise.all([
+                const [s, surfList] = await Promise.all([
                     sw.api.profile.settings(),
-                    sw.api.models.enabled(),
+                    sw.api.get('/api/v1/surfaces').catch(() => []),
                 ]);
                 const sObj = s || {};
-                setSettings({
-                    model: sObj.model || '',
-                    system_prompt: sObj.system_prompt || '',
-                    max_tokens: sObj.max_tokens || 0,
-                    temperature: sObj.temperature ?? 0.7,
-                    show_thinking: sObj.show_thinking || false,
-                });
-                const modelList = (m.data || []).filter(x => !x.hidden);
-                setModels(modelList);
-
-                // Set initial max hint
-                const active = modelList.find(x => x.id === sObj.model);
-                if (active?.capabilities?.max_output_tokens > 0) {
-                    setMaxHint(`(model max: ${(active.capabilities.max_output_tokens / 1000).toFixed(0)}K)`);
-                }
+                setDefaultSurface(sObj.default_surface || '');
+                setSurfaces((surfList || []).filter(s => s.route?.startsWith('/s/')));
             } catch (e) {
                 console.warn('[settings/general] Load failed:', e.message);
             }
         })();
     }, []);
 
-    const onModelChange = useCallback((e) => {
-        const id = e.target.value;
-        setSettings(s => ({ ...s, model: id }));
-        const m = models.find(x => x.id === id);
-        const cap = m?.capabilities || {};
-        setMaxHint(cap.max_output_tokens > 0
-            ? `(model max: ${(cap.max_output_tokens / 1000).toFixed(0)}K)` : '');
-    }, [models]);
-
-    const onTempInput = useCallback((e) => {
-        setSettings(s => ({ ...s, temperature: parseFloat(e.target.value) }));
-    }, []);
-
     const save = useCallback(async () => {
         setSaving(true);
         try {
             await sw.api.profile.updateSettings({
-                model: settings.model,
-                system_prompt: settings.system_prompt,
-                max_tokens: settings.max_tokens,
-                temperature: settings.temperature,
-                show_thinking: settings.show_thinking,
+                default_surface: defaultSurface,
             });
             sw.emit('toast', { message: 'Settings saved', variant: 'success' });
         } catch (e) {
@@ -70,57 +37,22 @@ export function GeneralSection() {
         } finally {
             setSaving(false);
         }
-    }, [settings]);
+    }, [defaultSurface]);
 
     return html`
         <div class="settings-section">
-            <h3>Chat Defaults</h3>
+            <h3>Default Surface</h3>
             <div class="form-group">
-                <label>Default Model</label>
-                <select value=${settings.model} onChange=${onModelChange}>
-                    ${models.map(m => html`
-                        <option value=${m.id}>
-                            ${m.name || m.id}${m.provider ? ` (${m.provider})` : ''}
-                        </option>
-                    `)}
+                <label>Landing page after login</label>
+                <select value=${defaultSurface} onChange=${e => setDefaultSurface(e.target.value)}>
+                    <option value="">-- Use global default --</option>
+                    ${surfaces.map(s => html`<option key=${s.id} value=${s.id}>${s.icon ? s.icon + ' ' : ''}${s.title || s.id}</option>`)}
                 </select>
             </div>
-            <div class="form-group">
-                <label>System Prompt</label>
-                <textarea rows="3" placeholder="Optional system prompt\u2026"
-                          style="max-width:100%;"
-                          value=${settings.system_prompt}
-                          onInput=${e => setSettings(s => ({ ...s, system_prompt: e.target.value }))} />
-            </div>
-            <div style="display:flex;gap:16px;">
-                <div class="form-group" style="flex:1;">
-                    <label>Max Tokens${' '}
-                        <span style="font-weight:400;color:var(--text-3);">${maxHint}</span>
-                    </label>
-                    <input type="number" placeholder="default"
-                           value=${settings.max_tokens || ''}
-                           onInput=${e => setSettings(s => ({ ...s, max_tokens: parseInt(e.target.value) || 0 }))} />
-                </div>
-                <div class="form-group" style="flex:1;">
-                    <label>Temperature</label>
-                    <div style="display:flex;align-items:center;gap:8px;">
-                        <input type="range" min="0" max="2" step="0.1"
-                               ref=${tempRef}
-                               value=${settings.temperature}
-                               onInput=${onTempInput}
-                               style="flex:1;" />
-                        <span style="font-size:12px;color:var(--text-2);font-family:var(--mono);">
-                            ${settings.temperature}
-                        </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"
-                       checked=${settings.show_thinking}
-                       onChange=${e => setSettings(s => ({ ...s, show_thinking: e.target.checked }))} />
-                Show thinking blocks
-            </label>
+            <span style="font-size:12px;color:var(--text-3);">
+                Override the global default set by your administrator.
+                If your chosen surface is uninstalled, the global default is used.
+            </span>
         </div>
         <button class="btn-md btn-primary" style="margin-top:12px;"
                 disabled=${saving} onClick=${save}>

src/js/sw/surfaces/welcome/index.js

@@ -0,0 +1,67 @@
+/**
+ * WelcomeSurface — fallback landing page.
+ * Shown when no default surface is configured or no extensions are installed.
+ * Checks for available extension surfaces and adjusts messaging.
+ */
+const { html } = window;
+const { useState, useEffect } = hooks;
+const { render } = preact;
+
+import { Topbar } from '../../shell/topbar.js';
+
+function WelcomeSurface() {
+    const BASE = window.__BASE__ || '';
+    const isAdmin = sw.can?.('surface.admin.access');
+    const [surfaces, setSurfaces] = useState([]);
+
+    useEffect(() => {
+        sw.api.get('/api/v1/surfaces').then(list => {
+            setSurfaces((list || []).filter(s => s.route?.startsWith('/s/')));
+        }).catch(() => {});
+    }, []);
+
+    const hasSurfaces = surfaces.length > 0;
+
+    return html`
+        <${Topbar} title="Switchboard" />
+        <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:24px;">
+            <div style="max-width:420px;width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:32px;text-align:center;">
+                <div style="font-size:36px;margin-bottom:16px;">${hasSurfaces ? '🏠' : '📦'}</div>
+                <h2 style="font-size:20px;font-weight:600;margin:0 0 8px;">Welcome to Switchboard</h2>
+                ${hasSurfaces ? html`
+                    <p style="font-size:14px;color:var(--text-2);margin:0 0 24px;line-height:1.5;">
+                        No default surface is configured. Choose a surface from
+                        the menu, or ${isAdmin ? 'set a default in admin settings.' : 'ask your administrator to set a default.'}
+                    </p>
+                    ${isAdmin && html`
+                        <a href="${BASE}/admin/settings"
+                           style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;">
+                            Set Default Surface
+                        </a>
+                    `}
+                ` : html`
+                    <p style="font-size:14px;color:var(--text-2);margin:0 0 24px;line-height:1.5;">
+                        No surfaces are installed yet. Install an extension surface
+                        to get started.
+                    </p>
+                    ${isAdmin && html`
+                        <a href="${BASE}/admin/packages"
+                           style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;">
+                            Go to Packages
+                        </a>
+                    `}
+                    ${!isAdmin && html`
+                        <p style="font-size:13px;color:var(--text-3);">
+                            Ask your administrator to install a surface package.
+                        </p>
+                    `}
+                `}
+            </div>
+        </div>
+    `;
+}
+
+const mount = document.getElementById('welcome-mount');
+if (mount) {
+    render(html`<${WelcomeSurface} />`, mount);
+}