Changeset 0.37.7 (#219)

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

src/js/sw/surfaces/settings/bridge-section.js

@@ -1,32 +0,0 @@
-/**
- * BridgeSection — thin Preact wrapper for deferred settings sections
- *
- * Renders a container <div> with the expected DOM IDs, then calls
- * the old JS loader function so legacy code can populate it.
- *
- * Props:
- *   id     — mount div ID (e.g. 'settingsTasksMount')
- *   loader — function to call after mount (e.g. () => _loadSettingsTasks?.())
- */
-const { html } = window;
-const { useEffect, useRef } = hooks;
-
-export function BridgeSection({ id, loader }) {
-    const ref = useRef(null);
-
-    useEffect(() => {
-        if (loader) {
-            // Defer to next tick so the DOM node is committed
-            requestAnimationFrame(() => {
-                try { loader(); }
-                catch (e) { console.warn('[settings/bridge]', id, e.message); }
-            });
-        }
-    }, [id, loader]);
-
-    return html`
-        <div ref=${ref} id=${id}>
-            <div class="settings-placeholder">Loading\u2026</div>
-        </div>
-    `;
-}

src/js/sw/surfaces/settings/data.js

@@ -0,0 +1,59 @@
+/**
+ * Settings > Data & Privacy — export and account deletion
+ */
+const { html } = window;
+const { useState, useCallback } = hooks;
+
+export default function DataSection() {
+    const [exporting, setExporting] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+
+    const exportData = useCallback(async () => {
+        setExporting(true);
+        try {
+            await sw.api.dataPortability.exportMe();
+            sw.toast('Export started \u2014 you will receive a download link shortly', 'success');
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setExporting(false); }
+    }, []);
+
+    const deleteAccount = useCallback(async () => {
+        const ok = await sw.confirm(
+            'Are you sure you want to delete your account? This action is permanent and cannot be undone. All your data, conversations, and settings will be permanently deleted.',
+            true,
+        );
+        if (!ok) return;
+        setDeleting(true);
+        try {
+            await sw.api.dataPortability.deleteAccount({ confirm: true });
+            sw.toast('Account deletion initiated', 'success');
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setDeleting(false); }
+    }, []);
+
+    return html`
+        <div>
+            <div class="settings-section">
+                <h3>Export Your Data</h3>
+                <p class="text-muted" style="font-size:13px;margin:0 0 12px;">
+                    Download a copy of all your data including conversations, settings, and memories.
+                    The export will be prepared and a download link will be provided.
+                </p>
+                <button class="btn-md btn-primary" disabled=${exporting} onClick=${exportData}>
+                    ${exporting ? 'Preparing\u2026' : 'Export My Data'}
+                </button>
+            </div>
+
+            <div class="settings-section" style="margin-top:24px;border-top:1px solid var(--border);padding-top:20px;">
+                <h3 style="color:var(--danger);">Danger Zone</h3>
+                <p class="text-muted" style="font-size:13px;margin:0 0 12px;">
+                    Permanently delete your account and all associated data. This action cannot be undone.
+                    We recommend exporting your data before proceeding.
+                </p>
+                <button class="btn-md btn-danger" disabled=${deleting} onClick=${deleteAccount}>
+                    ${deleting ? 'Deleting\u2026' : 'Delete My Account'}
+                </button>
+            </div>
+        </div>
+    `;
+}

src/js/sw/surfaces/settings/gitkeys.js

@@ -0,0 +1,97 @@
+/**
+ * Settings > Git Keys — SSH credential management
+ */
+const { html } = window;
+const { useState, useEffect, useCallback } = hooks;
+
+function fmtDate(d) {
+    if (!d) return '\u2014';
+    return new Date(d).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+}
+
+export default function GitKeysSection() {
+    const [keys, setKeys] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [showAdd, setShowAdd] = useState(false);
+
+    const load = useCallback(async () => {
+        try {
+            const data = await sw.api.git.credentials.list();
+            setKeys(Array.isArray(data) ? data : data.data || []);
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setLoading(false); }
+    }, []);
+
+    useEffect(() => { load(); }, []);
+
+    async function addKey(e) {
+        e.preventDefault();
+        const form = e.target;
+        const name = form.name.value.trim();
+        const key = form.key.value.trim();
+        if (!name) { sw.toast('Name is required', 'error'); return; }
+        try {
+            await sw.api.git.credentials.create({ name, public_key: key || undefined });
+            sw.toast('Credential added', 'success');
+            form.reset();
+            setShowAdd(false);
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    async function deleteKey(id) {
+        const ok = await sw.confirm('Delete this SSH credential?', true);
+        if (!ok) return;
+        try {
+            await sw.api.git.credentials.del(id);
+            sw.toast('Credential deleted', 'success');
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
+
+    return html`
+        <div>
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+                <span class="text-muted" style="font-size:12px;">${keys.length} credential${keys.length !== 1 ? 's' : ''}</span>
+                <div style="flex:1"></div>
+                <button class="btn-md btn-primary" onClick=${() => setShowAdd(!showAdd)}>
+                    ${showAdd ? 'Cancel' : '+ Add Key'}
+                </button>
+            </div>
+
+            ${showAdd && html`
+                <form class="settings-section" style="margin-bottom:16px;" onSubmit=${addKey}>
+                    <div class="form-group">
+                        <label>Name</label>
+                        <input name="name" placeholder="e.g. deploy-key-prod" required />
+                    </div>
+                    <div class="form-group">
+                        <label>Public Key <span class="text-muted" style="font-weight:400;">(paste, or leave blank to generate)</span></label>
+                        <textarea name="key" rows="3" placeholder="ssh-ed25519 AAAA..." style="font-family:var(--mono);font-size:12px;" />
+                    </div>
+                    <button type="submit" class="btn-small btn-primary">Add Credential</button>
+                </form>
+            `}
+
+            <div class="admin-list">
+                ${keys.length === 0 && html`<div class="empty-hint">No SSH credentials configured.</div>`}
+                ${keys.map(k => html`
+                    <div class="admin-surface-row" key=${k.id}>
+                        <div style="flex:1;min-width:0;">
+                            <strong>${k.name}</strong>
+                            ${k.fingerprint && html`
+                                <span class="text-muted" style="margin-left:8px;font-size:11px;font-family:var(--mono);">
+                                    ${k.fingerprint.substring(0, 24)}\u2026
+                                </span>
+                            `}
+                        </div>
+                        <span class="text-muted" style="font-size:11px;">${fmtDate(k.created_at)}</span>
+                        <button class="btn-small btn-danger" onClick=${() => deleteKey(k.id)}>Delete</button>
+                    </div>
+                `)}
+            </div>
+        </div>
+    `;
+}

src/js/sw/surfaces/settings/index.js

@@ -7,39 +7,34 @@
  *   __PAGE_DATA__  — { BYOKEnabled, ... } from Go template
  *
  * Layout: topbar + left nav + content area (same CSS classes as before).
- * Preact sections are loaded lazily. Bridge sections delegate to old JS.
+ * All sections are native Preact components loaded lazily.
  */
 const { html } = window;
 const { useState, useEffect, useCallback, useMemo } = hooks;
 const { render } = preact;
 
-import { BridgeSection } from './bridge-section.js';
 import { ToastContainer } from '../../primitives/toast.js';
 import { DialogStack } from '../../shell/dialog-stack.js';
 
 // ── Lazy section imports ────────────────────
 // Each returns a Promise<{ default: Component }> or { SectionName: Component }
 const sectionModules = {
-    general:    () => import('./general.js'),
-    appearance: () => import('./appearance.js'),
-    profile:    () => import('./profile.js'),
-    teams:      () => import('./teams.js'),
-    models:     () => import('./models.js'),
-    providers:  () => import('./providers.js'),
-    personas:   () => import('./personas.js'),
-    roles:      () => import('./roles.js'),
-    usage:      () => import('./usage.js'),
-};
-
-// ── Bridge section config (deferred to old JS) ──
-const bridgeSections = {
-    workflows:  { id: 'settingsDynamic',    loader: () => typeof loadTeamWorkflows === 'function' && loadTeamWorkflows() },
-    tasks:      { id: 'settingsTasksMount', loader: () => typeof _loadSettingsTasks === 'function' && _loadSettingsTasks() },
-    gitkeys:    { id: 'settingsDynamic',    loader: () => typeof _loadSettingsGitKeys === 'function' && _loadSettingsGitKeys() },
-    data:       { id: 'dpMount',            loader: () => typeof loadDataPrivacy === 'function' && loadDataPrivacy() },
-    knowledge:  { id: 'settingsDynamic',    loader: () => typeof KnowledgeUI !== 'undefined' && KnowledgeUI.openManagePanel?.() },
-    memory:     { id: 'settingsDynamic',    loader: () => typeof MemoryUI !== 'undefined' && MemoryUI.openSettingsPanel?.() },
-    notifications: { id: 'settingsDynamic', loader: () => typeof NotifPrefs !== 'undefined' && NotifPrefs.load?.() },
+    general:       () => import('./general.js'),
+    appearance:    () => import('./appearance.js'),
+    profile:       () => import('./profile.js'),
+    teams:         () => import('./teams.js'),
+    models:        () => import('./models.js'),
+    providers:     () => import('./providers.js'),
+    personas:      () => import('./personas.js'),
+    roles:         () => import('./roles.js'),
+    usage:         () => import('./usage.js'),
+    workflows:     () => import('./workflows.js'),
+    tasks:         () => import('./tasks.js'),
+    gitkeys:       () => import('./gitkeys.js'),
+    data:          () => import('./data.js'),
+    knowledge:     () => import('./knowledge.js'),
+    memory:        () => import('./memory.js'),
+    notifications: () => import('./notifications.js'),
 };
 
 // ── Nav structure ───────────────────────────
@@ -52,8 +47,11 @@ const NAV_ITEMS = [
     { key: 'teams',      label: 'Teams' },
     { key: 'workflows',  label: 'Workflows' },
     { key: 'tasks',      label: 'Tasks' },
-    { key: 'gitkeys',    label: 'Git Keys' },
-    { key: 'data',       label: 'Data & Privacy' },
+    { key: 'gitkeys',       label: 'Git Keys' },
+    { key: 'knowledge',     label: 'Knowledge Bases' },
+    { key: 'memory',        label: 'Memory' },
+    { key: 'notifications', label: 'Notifications' },
+    { key: 'data',          label: 'Data & Privacy' },
 ];
 
 const BYOK_ITEMS = [
@@ -198,12 +196,9 @@ function SettingsSurface() {
                 <div class="settings-content">
                     <h2>${title}</h2>
 
-                    ${bridgeSections[section]
-                        ? html`<${BridgeSection} id=${bridgeSections[section].id}
-                                                  loader=${bridgeSections[section].loader} />`
-                        : SectionComponent
-                            ? html`<${SectionComponent} />`
-                            : html`<div class="settings-placeholder">Loading\u2026</div>`
+                    ${SectionComponent
+                        ? html`<${SectionComponent} />`
+                        : html`<div class="settings-placeholder">Loading\u2026</div>`
                     }
                 </div>
             </div>

src/js/sw/surfaces/settings/knowledge.js

@@ -0,0 +1,182 @@
+/**
+ * Settings > Knowledge — personal knowledge base management
+ */
+const { html } = window;
+const { useState, useEffect, useCallback } = hooks;
+
+function fmtDate(d) {
+    if (!d) return '\u2014';
+    return new Date(d).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+}
+
+function formatBytes(b) {
+    if (!b) return '0 B';
+    if (b < 1024) return b + ' B';
+    if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
+    return (b / 1048576).toFixed(1) + ' MB';
+}
+
+export default function KnowledgeSection() {
+    const [kbs, setKbs] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [detail, setDetail] = useState(null);
+    const [docs, setDocs] = useState([]);
+    const [showCreate, setShowCreate] = useState(false);
+
+    const load = useCallback(async () => {
+        try {
+            const data = await sw.api.knowledge.list();
+            setKbs(Array.isArray(data) ? data : data.data || []);
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setLoading(false); }
+    }, []);
+
+    useEffect(() => { load(); }, []);
+
+    async function openDetail(kb) {
+        setDetail(kb);
+        try {
+            const d = await sw.api.knowledge.documents(kb.id);
+            setDocs(Array.isArray(d) ? d : d.data || []);
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    async function createKb(e) {
+        e.preventDefault();
+        const form = e.target;
+        const name = form.name.value.trim();
+        if (!name) { sw.toast('Name is required', 'error'); return; }
+        try {
+            await sw.api.knowledge.create({
+                name,
+                description: form.description.value.trim(),
+            });
+            sw.toast('Knowledge base created', 'success');
+            form.reset();
+            setShowCreate(false);
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    async function deleteKb(id) {
+        const ok = await sw.confirm('Delete this knowledge base and all its documents?', true);
+        if (!ok) return;
+        try {
+            await sw.api.knowledge.del(id);
+            sw.toast('Knowledge base deleted', 'success');
+            setDetail(null);
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    async function uploadDoc() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.txt,.md,.csv,.html,.pdf';
+        input.onchange = async () => {
+            const file = input.files[0];
+            if (!file) return;
+            try {
+                await sw.api.knowledge.upload(detail.id, file);
+                sw.toast('Document uploaded', 'success');
+                const d = await sw.api.knowledge.documents(detail.id);
+                setDocs(Array.isArray(d) ? d : d.data || []);
+            } catch (e) { sw.toast(e.message, 'error'); }
+        };
+        input.click();
+    }
+
+    async function deleteDoc(docId) {
+        const ok = await sw.confirm('Delete this document?', true);
+        if (!ok) return;
+        try {
+            await sw.api.knowledge.delDoc(detail.id, docId);
+            sw.toast('Document deleted', 'success');
+            setDocs(prev => prev.filter(d => d.id !== docId));
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    function statusBadge(status) {
+        const cls = status === 'ready' ? 'badge-active' : status === 'error' ? 'badge-inactive' : 'badge';
+        return html`<span class="badge ${cls}">${status}</span>`;
+    }
+
+    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
+
+    // Detail view
+    if (detail) return html`
+        <div>
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+                <button class="btn-small" onClick=${() => { setDetail(null); setDocs([]); }}>\u2190 Back</button>
+                <h4 style="margin:0;">${detail.name}</h4>
+                ${statusBadge(detail.status || 'active')}
+                <div style="flex:1"></div>
+                <button class="btn-small" onClick=${uploadDoc}>Upload Document</button>
+                <button class="btn-small btn-danger" onClick=${() => deleteKb(detail.id)}>Delete KB</button>
+            </div>
+
+            ${detail.description && html`
+                <p class="text-muted" style="font-size:13px;margin:0 0 8px;">${detail.description}</p>
+            `}
+            <p class="text-muted" style="font-size:12px;margin-bottom:12px;">
+                ${detail.document_count || 0} docs \u2022 Created ${fmtDate(detail.created_at)}
+            </p>
+
+            <div class="admin-list">
+                ${docs.length === 0 && html`<div class="empty-hint">No documents yet. Upload one to get started.</div>`}
+                ${docs.map(d => html`
+                    <div class="admin-surface-row" key=${d.id}>
+                        <div style="flex:1;min-width:0;">
+                            <strong>${d.filename}</strong>
+                            <span class="text-muted" style="margin-left:8px;font-size:11px;">${formatBytes(d.size_bytes)}</span>
+                            ${' '}${statusBadge(d.status || 'pending')}
+                        </div>
+                        <span class="text-muted" style="font-size:11px;">${fmtDate(d.created_at)}</span>
+                        <button class="btn-small btn-danger" onClick=${() => deleteDoc(d.id)}>Delete</button>
+                    </div>
+                `)}
+            </div>
+        </div>
+    `;
+
+    // List view
+    return html`
+        <div>
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+                <span class="text-muted" style="font-size:12px;">${kbs.length} knowledge base${kbs.length !== 1 ? 's' : ''}</span>
+                <div style="flex:1"></div>
+                <button class="btn-md btn-primary" onClick=${() => setShowCreate(!showCreate)}>
+                    ${showCreate ? 'Cancel' : '+ Create'}
+                </button>
+            </div>
+
+            ${showCreate && html`
+                <form class="settings-section" style="margin-bottom:16px;" onSubmit=${createKb}>
+                    <div class="form-group">
+                        <label>Name</label>
+                        <input name="name" placeholder="e.g. Product Documentation" required />
+                    </div>
+                    <div class="form-group">
+                        <label>Description</label>
+                        <input name="description" placeholder="Optional description" />
+                    </div>
+                    <button type="submit" class="btn-small btn-primary">Create Knowledge Base</button>
+                </form>
+            `}
+
+            <div class="admin-list">
+                ${kbs.length === 0 && html`<div class="empty-hint">No knowledge bases. Create one to get started.</div>`}
+                ${kbs.map(k => html`
+                    <div class="admin-surface-row" key=${k.id} style="cursor:pointer;" onClick=${() => openDetail(k)}>
+                        <div style="flex:1;min-width:0;">
+                            <strong>${k.name}</strong>
+                            <span class="text-muted" style="margin-left:8px;font-size:12px;">${k.document_count || 0} docs</span>
+                        </div>
+                        <span class="text-muted" style="font-size:11px;">${fmtDate(k.created_at)}</span>
+                        ${statusBadge(k.status || 'active')}
+                    </div>
+                `)}
+            </div>
+        </div>
+    `;
+}

src/js/sw/surfaces/settings/memory.js

@@ -0,0 +1,117 @@
+/**
+ * Settings > Memory — personal memory management
+ */
+const { html } = window;
+const { useState, useEffect, useCallback } = hooks;
+
+function fmtDate(d) {
+    if (!d) return '\u2014';
+    return new Date(d).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+}
+
+function truncate(s, len) {
+    if (!s) return '';
+    return s.length > len ? s.substring(0, len) + '\u2026' : s;
+}
+
+export default function MemorySection() {
+    const [memories, setMemories] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [count, setCount] = useState(0);
+    const [editingId, setEditingId] = useState(null);
+    const [editValue, setEditValue] = useState('');
+
+    const load = useCallback(async () => {
+        try {
+            const [data, c] = await Promise.all([
+                sw.api.memory.list(),
+                sw.api.memory.count().catch(() => null),
+            ]);
+            setMemories(Array.isArray(data) ? data : data.data || []);
+            if (c != null) setCount(typeof c === 'number' ? c : c.count || 0);
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setLoading(false); }
+    }, []);
+
+    useEffect(() => { load(); }, []);
+
+    function startEdit(m) {
+        setEditingId(m.id);
+        setEditValue(m.value || m.content || '');
+    }
+
+    function cancelEdit() {
+        setEditingId(null);
+        setEditValue('');
+    }
+
+    async function saveEdit(id) {
+        try {
+            await sw.api.memory.update(id, { value: editValue, content: editValue });
+            sw.toast('Memory updated', 'success');
+            setEditingId(null);
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    async function deleteMemory(id) {
+        const ok = await sw.confirm('Delete this memory?', true);
+        if (!ok) return;
+        try {
+            await sw.api.memory.del(id);
+            sw.toast('Memory deleted', 'success');
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    function statusBadge(status) {
+        if (!status) return null;
+        const cls = status === 'approved' ? 'badge-active'
+            : status === 'rejected' ? 'badge-inactive'
+            : 'badge';
+        return html`<span class="badge ${cls}">${status}</span>`;
+    }
+
+    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
+
+    return html`
+        <div>
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+                <span class="text-muted" style="font-size:12px;">${count || memories.length} memor${count === 1 ? 'y' : 'ies'}</span>
+                <div style="flex:1"></div>
+            </div>
+
+            <div class="admin-list">
+                ${memories.length === 0 && html`<div class="empty-hint">No memories stored.</div>`}
+                ${memories.map(m => html`
+                    <div class="admin-surface-row" key=${m.id} style="flex-direction:column;align-items:stretch;">
+                        ${editingId === m.id ? html`
+                            <div>
+                                <textarea rows="3" style="width:100%;font-size:13px;margin-bottom:8px;"
+                                          value=${editValue}
+                                          onInput=${e => setEditValue(e.target.value)} />
+                                <div style="display:flex;gap:6px;">
+                                    <button class="btn-small btn-primary" onClick=${() => saveEdit(m.id)}>Save</button>
+                                    <button class="btn-small" onClick=${cancelEdit}>Cancel</button>
+                                </div>
+                            </div>
+                        ` : html`
+                            <div style="display:flex;align-items:center;gap:8px;">
+                                <div style="flex:1;min-width:0;">
+                                    ${m.key && html`<strong style="margin-right:6px;">${m.key}</strong>`}
+                                    <span style="font-size:13px;color:var(--text-2);">${truncate(m.value || m.content || '', 120)}</span>
+                                </div>
+                                ${statusBadge(m.status)}
+                                <span class="text-muted" style="font-size:11px;white-space:nowrap;">${fmtDate(m.created_at)}</span>
+                            </div>
+                            <div style="display:flex;gap:6px;margin-top:6px;">
+                                <button class="btn-small" onClick=${() => startEdit(m)}>Edit</button>
+                                <button class="btn-small btn-danger" onClick=${() => deleteMemory(m.id)}>Delete</button>
+                            </div>
+                        `}
+                    </div>
+                `)}
+            </div>
+        </div>
+    `;
+}

src/js/sw/surfaces/settings/notifications.js

@@ -0,0 +1,96 @@
+/**
+ * Settings > Notifications — notification preferences
+ */
+const { html } = window;
+const { useState, useEffect, useCallback } = hooks;
+
+export default function NotificationsSection() {
+    const [prefs, setPrefs] = useState(null);
+    const [saving, setSaving] = useState({});
+
+    const load = useCallback(async () => {
+        try {
+            const data = await sw.api.notifications.prefs();
+            // Normalize: could be an array of { type, enabled, ... } or an object keyed by type
+            if (Array.isArray(data)) {
+                const obj = {};
+                data.forEach(p => { obj[p.type] = p; });
+                setPrefs(obj);
+            } else {
+                setPrefs(data || {});
+            }
+        } catch (e) { sw.toast(e.message, 'error'); setPrefs({}); }
+    }, []);
+
+    useEffect(() => { load(); }, []);
+
+    async function togglePref(type, currentEnabled) {
+        setSaving(prev => ({ ...prev, [type]: true }));
+        try {
+            await sw.api.notifications.setPref(type, { enabled: !currentEnabled });
+            setPrefs(prev => ({
+                ...prev,
+                [type]: { ...prev[type], enabled: !currentEnabled },
+            }));
+            sw.toast('Preference updated', 'success');
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setSaving(prev => ({ ...prev, [type]: false })); }
+    }
+
+    async function resetPref(type) {
+        setSaving(prev => ({ ...prev, [type]: true }));
+        try {
+            await sw.api.notifications.delPref(type);
+            sw.toast('Reset to default', 'success');
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setSaving(prev => ({ ...prev, [type]: false })); }
+    }
+
+    if (prefs === null) return html`<div class="settings-placeholder">Loading\u2026</div>`;
+
+    const types = Object.keys(prefs);
+
+    function friendlyName(type) {
+        return type
+            .replace(/_/g, ' ')
+            .replace(/\b\w/g, c => c.toUpperCase());
+    }
+
+    return html`
+        <div>
+            ${types.length === 0 && html`<div class="empty-hint">No notification preferences available.</div>`}
+
+            <div class="admin-list">
+                ${types.map(type => {
+                    const pref = prefs[type];
+                    const enabled = pref.enabled !== false;
+                    const isSaving = saving[type];
+                    return html`
+                        <div class="admin-surface-row" key=${type}>
+                            <div style="flex:1;min-width:0;">
+                                <strong>${friendlyName(type)}</strong>
+                                ${pref.description && html`
+                                    <div class="text-muted" style="font-size:12px;margin-top:2px;">${pref.description}</div>
+                                `}
+                            </div>
+                            <label class="toggle-label" style="margin:0;">
+                                <input type="checkbox"
+                                       checked=${enabled}
+                                       disabled=${isSaving}
+                                       onChange=${() => togglePref(type, enabled)} />
+                                <span class="toggle-track"></span>
+                            </label>
+                            <button class="btn-small btn-ghost"
+                                    disabled=${isSaving}
+                                    onClick=${() => resetPref(type)}
+                                    title="Reset to default">
+                                Reset
+                            </button>
+                        </div>
+                    `;
+                })}
+            </div>
+        </div>
+    `;
+}

src/js/sw/surfaces/settings/tasks.js

@@ -0,0 +1,71 @@
+/**
+ * Settings > Tasks — user's tasks with run/stop controls
+ */
+const { html } = window;
+const { useState, useEffect, useCallback } = hooks;
+
+function fmtDate(d) {
+    if (!d) return '\u2014';
+    return new Date(d).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+}
+
+export default function TasksSection() {
+    const [tasks, setTasks] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    const load = useCallback(async () => {
+        try {
+            const data = await sw.api.tasks.list();
+            setTasks(Array.isArray(data) ? data : data.data || []);
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setLoading(false); }
+    }, []);
+
+    useEffect(() => { load(); }, []);
+
+    async function runTask(id) {
+        try {
+            await sw.api.tasks.start(id);
+            sw.toast('Task started', 'success');
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    async function stopTask(id) {
+        try {
+            await sw.api.tasks.stop(id);
+            sw.toast('Task stopped', 'success');
+            load();
+        } catch (e) { sw.toast(e.message, 'error'); }
+    }
+
+    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
+
+    return html`
+        <div>
+            <div class="admin-list">
+                ${tasks.length === 0 && html`<div class="empty-hint">No tasks.</div>`}
+                ${tasks.map(t => html`
+                    <div class="admin-surface-row" key=${t.id}>
+                        <div style="flex:1;min-width:0;">
+                            <strong>${t.name}</strong>
+                            ${t.schedule && html`
+                                <span class="badge" style="margin-left:6px;">${t.schedule}</span>
+                            `}
+                        </div>
+                        <span class="text-muted" style="font-size:11px;">
+                            last: ${fmtDate(t.last_run_at)} \u2022 next: ${fmtDate(t.next_run_at)}
+                        </span>
+                        <span class="badge ${t.is_active ? 'badge-active' : 'badge-inactive'}">
+                            ${t.is_active ? 'running' : 'stopped'}
+                        </span>
+                        <div style="display:flex;gap:6px;">
+                            <button class="btn-small btn-primary" onClick=${() => runTask(t.id)}>Run</button>
+                            <button class="btn-small btn-ghost" onClick=${() => stopTask(t.id)}>Stop</button>
+                        </div>
+                    </div>
+                `)}
+            </div>
+        </div>
+    `;
+}

src/js/sw/surfaces/settings/workflows.js

@@ -0,0 +1,88 @@
+/**
+ * Settings > Workflows — read-only view of user's visible workflows
+ */
+const { html } = window;
+const { useState, useEffect, useCallback } = hooks;
+
+export default function WorkflowsSection() {
+    const [workflows, setWorkflows] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [detail, setDetail] = useState(null);
+    const [stages, setStages] = useState([]);
+
+    const load = useCallback(async () => {
+        try {
+            const data = await sw.api.workflows.list();
+            setWorkflows(Array.isArray(data) ? data : data.data || []);
+        } catch (e) { sw.toast(e.message, 'error'); }
+        finally { setLoading(false); }
+    }, []);
+
+    useEffect(() => { load(); }, []);
+
+    async function openDetail(wf) {
+        setDetail(wf);
+        try {
+            const d = await sw.api.workflows.get(wf.id);
+            setStages(d.stages || []);
+        } catch (e) { sw.toast(e.message, 'error'); setStages([]); }
+    }
+
+    if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
+
+    if (detail) return html`
+        <div>
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+                <button class="btn-small" onClick=${() => { setDetail(null); setStages([]); }}>\u2190 Back</button>
+                <h4 style="margin:0;">${detail.name}</h4>
+                <span class="badge ${detail.is_active ? 'badge-active' : 'badge-inactive'}">
+                    ${detail.is_active ? 'active' : 'inactive'}
+                </span>
+            </div>
+
+            ${detail.description && html`
+                <p class="text-muted" style="font-size:13px;margin:0 0 12px;">${detail.description}</p>
+            `}
+
+            <div style="display:flex;gap:12px;margin-bottom:16px;font-size:12px;color:var(--text-3);">
+                <span>Slug: <strong>/${detail.slug}</strong></span>
+                <span>Entry: <strong>${detail.entry_mode}</strong></span>
+                <span>Version: <strong>${detail.version || 0}</strong></span>
+            </div>
+
+            <h5 style="margin:0 0 8px;">Stages (${stages.length})</h5>
+            <div class="admin-list">
+                ${stages.length === 0 && html`<div class="empty-hint">No stages defined</div>`}
+                ${stages.map((s, i) => html`
+                    <div class="admin-surface-row" key=${s.id}>
+                        <span class="text-muted" style="font-size:11px;width:24px;">#${i + 1}</span>
+                        <strong style="flex:1;">${s.name || `Stage ${i + 1}`}</strong>
+                        <span class="badge">${s.stage_mode}</span>
+                        ${s.persona_id && html`<span class="badge badge-active">persona</span>`}
+                    </div>
+                `)}
+            </div>
+        </div>
+    `;
+
+    return html`
+        <div>
+            <div class="admin-list">
+                ${workflows.length === 0 && html`<div class="empty-hint">No workflows available.</div>`}
+                ${workflows.map(w => html`
+                    <div class="admin-surface-row" key=${w.id} style="cursor:pointer;" onClick=${() => openDetail(w)}>
+                        <div style="flex:1;min-width:0;">
+                            <strong>${w.name}</strong>
+                            <span class="text-muted" style="margin-left:8px;font-size:11px;">/${w.slug}</span>
+                        </div>
+                        <span class="badge">${w.entry_mode}</span>
+                        <span class="badge ${w.is_active ? 'badge-active' : 'badge-inactive'}">
+                            ${w.is_active ? 'active' : 'inactive'}
+                        </span>
+                        <span class="text-muted" style="font-size:11px;">v${w.version || 0}</span>
+                    </div>
+                `)}
+            </div>
+        </div>
+    `;
+}