aimeat 1.2.0

package/dist/public/views/profile/node-stats-tab.js

@@ -0,0 +1,132 @@
+/**
+ * @file node-stats-tab.js
+ * @description Profile tab showing real-time node statistics including uptime,
+ *   request counts, tunnel metrics, mailbox stats, and security counters.
+ * @version-history
+ *   v1.0.0 — 2026-03-16 — Initial node stats tab
+ *   v1.1.0 — 2026-03-17 — Replace all inline styles with CSS classes
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { Spinner } from './shared.js';
+import { getNodeStats } from '/js/services/stats.js';
+
+function fmtUptime(s) {
+  const d = Math.floor(s / 86400);
+  const hr = Math.floor((s % 86400) / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  if (d > 0) return d + 'd ' + hr + 'h ' + m + 'm';
+  if (hr > 0) return hr + 'h ' + m + 'm';
+  return m + 'm';
+}
+
+function fmtBytes(b) {
+  if (b < 1024) return b + ' B';
+  if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
+  return (b / 1048576).toFixed(1) + ' MB';
+}
+
+function StatCard({ label, value, color }) {
+  return html`<div class="card stat-card">
+    <div class="stat-value" style=${`color:${color}`}>${value}</div>
+    <div class="stat-label">${label}</div>
+  </div>`;
+}
+
+export default function NodeStatsTab({ session, showToast }) {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  // Live update listener
+  const liveRef = useRef(loadData);
+  liveRef.current = loadData;
+  useEffect(() => {
+    const handler = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  async function loadData() {
+    try {
+      const stats = await getNodeStats();
+      if (stats) { setData(stats); setError(false); }
+      else setError(true);
+    } catch { setError(true); }
+  }
+
+  if (error) return html`<div class="section-title">${t('profile.nodeStats.title')}</div>
+    <p class="text-meta">${t('profile.nodeStats.error')}</p>`;
+  if (!data) return html`<${Spinner} text=${t('profile.nodeStats.loading')} />`;
+  const s = data;
+  return html`
+    <div class="section-title">${t('profile.nodeStats.title')}</div>
+    <div class="section-desc">${t('profile.nodeStats.desc')}</div>
+
+    <div class="stat-grid">
+      <${StatCard} label=${t('profile.nodeStats.uptime')} value=${fmtUptime(s.uptime_seconds)} color="var(--love1)" />
+      <${StatCard} label=${t('profile.nodeStats.requests')} value=${(s.requests_total || 0).toLocaleString()} color="var(--accent)" />
+      <${StatCard} label=${t('profile.nodeStats.owners')} value=${s.active_owners || 0} color="var(--success)" />
+      <${StatCard} label=${t('profile.nodeStats.agents')} value=${s.active_agents || 0} color="var(--success)" />
+      <${StatCard} label=${t('profile.nodeStats.memoryWrites')} value=${(s.memory_writes || 0).toLocaleString()} color="#8b5cf6" />
+      <${StatCard} label=${t('profile.nodeStats.memoryReads')} value=${(s.memory_reads || 0).toLocaleString()} color="#8b5cf6" />
+    </div>
+
+    <div class="stat-two-col">
+      <div class="card p-1">
+        <h4 class="stat-panel-h4">${t('profile.nodeStats.requestsByMethod')}</h4>
+        ${s.requests_by_method ? Object.entries(s.requests_by_method).map(([m, c]) => html`
+          <div class="stat-row">
+            <span class="stat-row-label">${m}</span>
+            <span class="stat-row-value">${c.toLocaleString()}</span>
+          </div>`) : null}
+      </div>
+      <div class="card p-1">
+        <h4 class="stat-panel-h4">${t('profile.nodeStats.requestsByStatus')}</h4>
+        ${s.requests_by_status ? Object.entries(s.requests_by_status).map(([code, c]) => {
+          const color = code.startsWith('2') ? 'var(--success)' : code.startsWith('4') ? 'var(--warn)' : code.startsWith('5') ? 'var(--danger)' : 'var(--muted)';
+          return html`<div class="stat-row">
+            <span class="stat-row-label" style=${`color:${color}`}>${code}</span>
+            <span class="stat-row-value">${c.toLocaleString()}</span>
+          </div>`;
+        }) : null}
+      </div>
+    </div>
+
+    ${s.tunnel ? html`
+      <h3 class="stat-section-h3">${t('profile.nodeStats.tunnelTitle')}</h3>
+      <div class="stat-grid-sm">
+        <${StatCard} label=${t('profile.nodeStats.tunnelActive')} value=${s.tunnel.connections_active} color="var(--success)" />
+        <${StatCard} label=${t('profile.nodeStats.tunnelTotal')} value=${s.tunnel.connections_total} color="var(--accent)" />
+        <${StatCard} label=${t('profile.nodeStats.msgSent')} value=${(s.tunnel.messages_sent_total || 0).toLocaleString()} color="#3b82f6" />
+        <${StatCard} label=${t('profile.nodeStats.msgReceived')} value=${(s.tunnel.messages_received_total || 0).toLocaleString()} color="#3b82f6" />
+        <${StatCard} label=${t('profile.nodeStats.deliveryFails')} value=${s.tunnel.delivery_failures_total} color=${s.tunnel.delivery_failures_total > 0 ? 'var(--danger)' : 'var(--success)'} />
+        <${StatCard} label=${t('profile.nodeStats.latencyAvg')} value=${(s.tunnel.delivery_latency_avg_ms || 0).toFixed(0) + ' ms'} color="var(--accent)" />
+        <${StatCard} label=${t('profile.nodeStats.latencyP95')} value=${(s.tunnel.delivery_latency_p95_ms || 0).toFixed(0) + ' ms'} color=${(s.tunnel.delivery_latency_p95_ms || 0) > 200 ? 'var(--warn)' : 'var(--accent)'} />
+      </div>` : null}
+
+    ${s.mailbox ? html`
+      <h3 class="stat-section-h3">${t('profile.nodeStats.mailboxTitle')}</h3>
+      <div class="stat-grid-sm">
+        <${StatCard} label=${t('profile.nodeStats.mailboxItems')} value=${s.mailbox.items_total} color="var(--accent)" />
+        <${StatCard} label=${t('profile.nodeStats.mailboxBytes')} value=${fmtBytes(s.mailbox.bytes_total)} color="var(--accent)" />
+        <${StatCard} label=${t('profile.nodeStats.mailboxDelivered')} value=${(s.mailbox.delivered_total || 0).toLocaleString()} color="var(--success)" />
+        <${StatCard} label=${t('profile.nodeStats.mailboxExpired')} value=${s.mailbox.expired_total} color=${s.mailbox.expired_total > 0 ? 'var(--warn)' : 'var(--success)'} />
+      </div>` : null}
+
+    <h3 class="stat-section-h3">${t('profile.nodeStats.securityTitle')}</h3>
+    <div class="stat-grid-sm">
+      <${StatCard} label=${t('profile.nodeStats.authFailures')} value=${s.auth_failures_total || 0} color=${(s.auth_failures_total || 0) > 0 ? 'var(--danger)' : 'var(--success)'} />
+      <${StatCard} label=${t('profile.nodeStats.rateLimitHits')} value=${s.rate_limit_hits_total || 0} color=${(s.rate_limit_hits_total || 0) > 0 ? 'var(--warn)' : 'var(--success)'} />
+      <${StatCard} label=${t('profile.nodeStats.scopeDenials')} value=${s.scope_denials_total || 0} color=${(s.scope_denials_total || 0) > 0 ? 'var(--warn)' : 'var(--success)'} />
+    </div>
+
+    <p class="stat-footer">${t('profile.nodeStats.startedAt')}: ${new Date(s.started_at).toLocaleString()}</p>
+  `;
+}

package/dist/public/views/profile/nodes-tab.js

@@ -0,0 +1,195 @@
+/**
+ * @file nodes-tab.js
+ * @description Profile tab for managing personal node registrations, visibility,
+ *   agent assignments, tunnel URLs, and mailbox status.
+ * @version-history
+ *   v1.0.0 — 2026-03-16 — Initial nodes tab
+ *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml, timeAgo, copyToClipboard } from '/js/utils.js';
+import { Spinner } from './shared.js';
+import { useConfirm } from '/components/Modal.js';
+import * as nodesService from '/js/services/nodes.js';
+import { getNodeUrl } from '/js/services/auth.js';
+
+export default function NodesTab({ session, showToast, onStats }) {
+  const { confirm, ConfirmUI } = useConfirm();
+  const NODE_URL = getNodeUrl();
+  const tunnelUrl = NODE_URL.replace(/^http/, 'ws') + '/v1/personal/tunnel';
+  const [nodes, setNodes] = useState(null);
+  const [showNodeForm, setShowNodeForm] = useState(false);
+  const [expandedNodes, setExpandedNodes] = useState(new Set());
+  const [expandedSetups, setExpandedSetups] = useState(new Set());
+
+  useEffect(() => {
+    if (session) loadData();
+  }, [session]);
+
+  // Live update listener
+  const liveRef = useRef(loadData);
+  liveRef.current = loadData;
+  useEffect(() => {
+    const handler = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  async function loadData() {
+    try {
+      const list = await nodesService.listNodes();
+      setNodes(list);
+      onStats?.({ nodes: list.length });
+    } catch { setNodes([]); onStats?.({ nodes: 0 }); }
+  }
+
+  async function handleRegister(nodeId, vis, gaiis) {
+    let nid = nodeId.trim();
+    if (!nid) { showToast(t('profile.nodes.registerFailed'), true); return; }
+    const agentGaiis = gaiis ? gaiis.split(',').map(s => s.trim()).filter(Boolean) : [];
+    const resp = await nodesService.registerNode(nid, session.owner, session.publicKey, agentGaiis, vis);
+    if (resp.ok !== false) { showToast(t('profile.nodes.registered')); setShowNodeForm(false); loadData(); }
+    else showToast(t('profile.nodes.registerFailed'), true);
+  }
+
+  async function handleDetach(nodeId) {
+    confirm(t('profile.nodes.detachConfirm'), async () => {
+      const resp = await nodesService.detachNode(nodeId);
+      if (resp.ok === false) { showToast(resp.error?.message || t('profile.error'), true); return; }
+      showToast(t('profile.nodes.detachedToast'));
+      loadData();
+    }, { danger: true });
+  }
+
+  async function handleSetVis(nodeId, vis) {
+    const resp = await nodesService.setVisibility(nodeId, vis);
+    if (resp.ok === false) { showToast(resp.error?.message || t('profile.error'), true); return; }
+    showToast(t('profile.nodes.visUpdated'));
+    loadData();
+  }
+
+  return html`
+    <div class="section-title">${t('profile.nodes.title')}</div>
+    <div class="section-desc">${t('profile.nodes.desc')}</div>
+    <button class="btn-primary mb-1" onClick=${() => setShowNodeForm(!showNodeForm)}>${t('profile.nodes.addBtn')}</button>
+    ${showNodeForm && html`<${NodeForm} onRegister=${handleRegister} onCancel=${() => setShowNodeForm(false)} />`}
+    ${!nodes ? html`<${Spinner} text=${t('profile.nodes.loading')} />`
+      : nodes.length === 0 ? html`<div class="empty">${t('profile.nodes.empty')}</div>`
+      : nodes.map((node, idx) => {
+          const statusClass = node.status || 'offline';
+          const statusLabel = t('profile.nodes.' + statusClass) || statusClass;
+          const isPublic = node.visibility === 'public';
+          const agentCount = node.agent_gaiis?.length || 0;
+          const agentWord = agentCount === 1 ? t('profile.nodes.agent') : t('profile.nodes.agents');
+          const mailboxCount = node.mailbox?.items || 0;
+          const isOpen = expandedNodes.has(idx);
+          const setupOpen = expandedSetups.has(idx);
+          const mbUsedMB = ((node.mailbox?.used_bytes || 0) / 1024 / 1024).toFixed(1);
+          const mbQuotaMB = ((node.mailbox?.quota_bytes || 0) / 1024 / 1024).toFixed(0);
+
+          return html`
+            <div class="pn-card">
+              <div class="pn-header" onClick=${() => {
+                const s = new Set(expandedNodes);
+                s.has(idx) ? s.delete(idx) : s.add(idx);
+                setExpandedNodes(s);
+              }}>
+                <div class="pn-header-left">
+                  <div class="pn-status-dot ${statusClass}"></div>
+                  <span class="pn-name">${escHtml(node.node_id)}</span>
+                </div>
+                <div class="pn-badges">
+                  ${isPublic
+                    ? html`<span class="badge badge-success">${t('profile.nodes.public')}</span>`
+                    : html`<span class="badge badge-muted">${t('profile.nodes.private')}</span>`}
+                  <span class="badge badge-${statusClass === 'online' ? 'success' : statusClass === 'degraded' ? 'warn' : 'danger'}">${statusLabel}</span>
+                  <span class="pn-arrow ${isOpen ? 'open' : ''}">\u25BC</span>
+                </div>
+              </div>
+              <div class="pn-quick">${agentCount} ${agentWord} \u2502 ${t('profile.nodes.mailboxItems')}: ${mailboxCount} ${t('profile.nodes.items')}</div>
+              ${isOpen && html`
+                <div class="pn-details open">
+                  <div class="pn-detail-row">
+                    <span class="pn-detail-label">${t('profile.nodes.tunnelUrl')}</span>
+                    <span class="pn-detail-value flex-row">
+                      <code class="text-meta-sm">${tunnelUrl}</code>
+                      <button class="pn-copy-btn" onClick=${() => { copyToClipboard(tunnelUrl).then(() => showToast(t('profile.nodes.copied'))); }}>${t('profile.nodes.copyUrl')}</button>
+                    </span>
+                  </div>
+                  <div class="pn-padding-half">
+                    <span class="pn-detail-label">${t('profile.nodes.agentList')}</span>
+                    ${node.agent_gaiis?.length > 0
+                      ? html`<div class="pn-agent-list">${node.agent_gaiis.map(g => html`<div class="pn-agent-item">${escHtml(g)}</div>`)}</div>`
+                      : html`<div class="pn-no-agents">${t('profile.nodes.noAgents')}</div>`}
+                  </div>
+                  <div class="pn-detail-row">
+                    <span class="pn-detail-label">${t('profile.nodes.mailbox')}</span>
+                    <span class="pn-detail-value">${mailboxCount} ${t('profile.nodes.items')} (${mbUsedMB} ${t('profile.nodes.mailboxOf')} ${mbQuotaMB} MB)</span>
+                  </div>
+                  <div class="pn-detail-row">
+                    <span class="pn-detail-label">${t('profile.nodes.lastSeen')}</span>
+                    <span class="pn-detail-value">${node.last_seen ? timeAgo(node.last_seen) : '-'}</span>
+                  </div>
+                  <div class="pn-detail-row">
+                    <span class="pn-detail-label">${t('profile.nodes.visibility')}</span>
+                    <div class="pn-vis-toggle">
+                      <button class="pn-vis-btn ${!isPublic ? 'active' : ''}" onClick=${() => handleSetVis(node.node_id, 'private')}>${t('profile.nodes.private')}</button>
+                      <button class="pn-vis-btn ${isPublic ? 'active' : ''}" onClick=${() => handleSetVis(node.node_id, 'public')}>${t('profile.nodes.public')}</button>
+                    </div>
+                  </div>
+                  <div class="flex-actions">
+                    <button class="expand-btn btn-sm" onClick=${() => {
+                      const s = new Set(expandedSetups);
+                      s.has(idx) ? s.delete(idx) : s.add(idx);
+                      setExpandedSetups(s);
+                    }}>${t('profile.nodes.setupTitle')} <span class="pn-setup-arrow ${setupOpen ? 'open' : ''}">\u25BC</span></button>
+                    ${setupOpen && html`
+                      <div class="pn-setup open">
+                        <ol>
+                          <li>${t('profile.nodes.setupStep1')}</li>
+                          <li>${t('profile.nodes.setupStep2')}</li>
+                          <li>${t('profile.nodes.setupStep3')}</li>
+                          <li>${t('profile.nodes.setupStep4')}</li>
+                        </ol>
+                        <a href="/docs/personal-node-setup-guide.md" target="_blank" class="pn-setup-link">${t('profile.nodes.setupDocs')} \u2192</a>
+                      </div>
+                    `}
+                  </div>
+                  <button class="pn-detach-btn" onClick=${() => handleDetach(node.node_id)}>${t('profile.nodes.detachBtn')}</button>
+                </div>
+              `}
+            </div>`;
+        })
+    }
+    <${ConfirmUI} />`;
+}
+
+function NodeForm({ onRegister, onCancel }) {
+  const [nodeId, setNodeId] = useState('');
+  const [vis, setVis] = useState('private');
+  const [gaiis, setGaiis] = useState('');
+  return html`
+    <div class="create-form">
+      <div class="section-title">${t('profile.nodes.addTitle')}</div>
+      <div class="form-row"><label>${t('profile.nodes.nodeIdLabel')}</label><input class="input-field" placeholder=${t('profile.nodes.nodeIdPlaceholder')} value=${nodeId} onInput=${e => setNodeId(e.target.value)} /></div>
+      <div class="form-row"><label>${t('profile.nodes.visLabel')}</label>
+        <div class="radio-row">
+          <label class="radio-label">
+            <input type="radio" name="nodeVis" value="private" checked=${vis === 'private'} onChange=${() => setVis('private')} /> ${t('profile.nodes.private')}
+          </label>
+          <label class="radio-label">
+            <input type="radio" name="nodeVis" value="public" checked=${vis === 'public'} onChange=${() => setVis('public')} /> ${t('profile.nodes.public')}
+          </label>
+        </div>
+      </div>
+      <div class="form-row"><label>${t('profile.nodes.agentGaiisLabel')}</label><input class="input-field" placeholder=${t('profile.nodes.agentGaiisPlaceholder')} value=${gaiis} onInput=${e => setGaiis(e.target.value)} /></div>
+      <div class="form-actions">
+        <button class="btn-primary" onClick=${() => onRegister(nodeId, vis, gaiis)}>${t('profile.nodes.registerBtn')}</button>
+        <button class="btn-outline" onClick=${onCancel}>${t('profile.nodes.cancelBtn')}</button>
+      </div>
+    </div>`;
+}

package/dist/public/views/profile/notifications-tab.js

@@ -0,0 +1,274 @@
+/**
+ * @file notifications-tab.js
+ * @description Profile tab for push notification and email notification preferences.
+ * @version-history
+ *   v1.0.0 — 2026-03-17 — Refactor: replace inline styles with CSS classes; use ToggleSwitch and GlassCard from shared.js
+ */
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { Spinner, ToggleSwitch, GlassCard } from './shared.js';
+import { apiGet, apiPost, apiDelete } from '/js/api.js';
+
+export default function NotificationsTab({ session, showToast }) {
+  const [loading, setLoading] = useState(true);
+  const [subscribed, setSubscribed] = useState(false);
+  const [subStatus, setSubStatus] = useState(null); // null | 'subscribing' | 'unsubscribing'
+  const [vapidKey, setVapidKey] = useState(null);
+  const [emailVerified, setEmailVerified] = useState(false);
+  const [emailPrefs, setEmailPrefs] = useState({ enabled: false, extensions: true, system: true, security: true });
+  const [savingEmail, setSavingEmail] = useState(false);
+
+  useEffect(() => {
+    if (session) checkSubscription();
+  }, [session]);
+
+  // Re-check email verification when other tabs update data (e.g. email confirmed)
+  useEffect(() => {
+    const handler = () => { if (session) checkSubscription(); };
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [session]);
+
+  async function checkSubscription() {
+    setLoading(true);
+    try {
+      // Get VAPID key
+      const vapidRes = await apiGet('/v1/push/vapid-key');
+      if (vapidRes.data?.vapidPublicKey) {
+        setVapidKey(vapidRes.data.vapidPublicKey);
+      }
+      // Check if browser has active subscription and sync with server
+      if ('serviceWorker' in navigator) {
+        const reg = await navigator.serviceWorker.getRegistration('/sw.js');
+        if (reg) {
+          const sub = await reg.pushManager.getSubscription();
+          if (sub) {
+            // Re-register with server in case it lost the record (e.g. restart)
+            const subJson = sub.toJSON();
+            await apiPost('/v1/push/subscribe', {
+              endpoint: subJson.endpoint,
+              keys: { p256dh: subJson.keys.p256dh, auth: subJson.keys.auth },
+            });
+          }
+          setSubscribed(!!sub);
+        }
+      }
+    } catch { /* push not configured */ }
+    // Check email verification status
+    try {
+      const ghii = session.ghii || `${session.owner}@${window.AIMEAT?.auth?.nodeId || ''}`;
+      const ghiiRes = await apiGet(`/v1/ghii/${encodeURIComponent(ghii)}`);
+      if (ghiiRes.data?.verification_level >= 1) {
+        setEmailVerified(true);
+      }
+      // Load email notification preferences from memory
+      const prefsRes = await apiGet('/v1/memory/settings.email_notifications');
+      if (prefsRes.data?.value) {
+        setEmailPrefs(prefsRes.data.value);
+      }
+    } catch { /* no prefs yet */ }
+    setLoading(false);
+  }
+
+  async function handleSubscribe() {
+    setSubStatus('subscribing');
+    try {
+      if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+        showToast(t('profile.notifications.noBrowserSupport'), true);
+        setSubStatus(null);
+        return;
+      }
+      const reg = await navigator.serviceWorker.register('/sw.js');
+      await navigator.serviceWorker.ready;
+
+      const key = vapidKey;
+      if (!key) {
+        showToast(t('profile.notifications.notConfigured'), true);
+        setSubStatus(null);
+        return;
+      }
+
+      const urlBase64 = key.replace(/-/g, '+').replace(/_/g, '/');
+      const raw = atob(urlBase64);
+      const outputArray = new Uint8Array(raw.length);
+      for (let i = 0; i < raw.length; i++) outputArray[i] = raw.charCodeAt(i);
+
+      const subscription = await reg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: outputArray,
+      });
+      const subJson = subscription.toJSON();
+      const res = await apiPost('/v1/push/subscribe', {
+        endpoint: subJson.endpoint,
+        keys: { p256dh: subJson.keys.p256dh, auth: subJson.keys.auth },
+      });
+      if (res.ok === false || res.error) {
+        showToast(res.error?.message || t('profile.notifications.subscribeFailed'), true);
+        setSubStatus(null);
+        return;
+      }
+      setSubscribed(true);
+      showToast(t('profile.notifications.subscribeSuccess'));
+    } catch (err) {
+      console.error('Push subscribe failed:', err);
+      showToast(t('profile.notifications.subscribeFailed'), true);
+    }
+    setSubStatus(null);
+  }
+
+  async function handleUnsubscribe() {
+    setSubStatus('unsubscribing');
+    try {
+      const reg = await navigator.serviceWorker.getRegistration('/sw.js');
+      if (reg) {
+        const sub = await reg.pushManager.getSubscription();
+        if (sub) await sub.unsubscribe();
+      }
+      await apiDelete('/v1/push/subscribe');
+      setSubscribed(false);
+      showToast(t('profile.notifications.unsubscribeSuccess'));
+    } catch {
+      showToast(t('profile.notifications.unsubscribeFailed'), true);
+    }
+    setSubStatus(null);
+  }
+
+  async function handleTestPush() {
+    try {
+      const res = await apiPost('/v1/push/test');
+      if (res.ok === false || res.error) {
+        showToast(res.error?.message || t('profile.notifications.testFailed'), true);
+        return;
+      }
+      showToast(t('profile.notifications.testSent'));
+    } catch {
+      showToast(t('profile.notifications.testFailed'), true);
+    }
+  }
+
+  if (loading) return html`<div><${Spinner} /></div>`;
+
+  async function handleSaveEmailPrefs(newPrefs) {
+    setSavingEmail(true);
+    try {
+      await apiPost('/v1/memory', {
+        key: 'settings.email_notifications',
+        value: newPrefs,
+        visibility: 'private',
+        tags: ['settings'],
+      });
+      setEmailPrefs(newPrefs);
+      showToast(t('profile.notifications.emailPrefsSaved'));
+    } catch {
+      showToast(t('profile.notifications.emailPrefsFailed'), true);
+    }
+    setSavingEmail(false);
+  }
+
+  function renderEmailNotifications() {
+    if (!emailVerified) {
+      return html`
+        <${GlassCard}>
+          <div class="pf-notif-disabled">
+            <div class="pf-notif-heading">${t('profile.notifications.emailNotifications')}</div>
+            <p class="text-caption">${t('profile.notifications.emailNotVerified')}</p>
+          </div>
+        </${GlassCard}>
+      `;
+    }
+
+    return html`
+      <${GlassCard}>
+        <div class="flex-between mb-1">
+          <div class="pf-notif-text">
+            <div class="pf-notif-heading">${t('profile.notifications.emailNotifications')}</div>
+            <div class="text-caption">${t('profile.notifications.enableEmailNotifs')}</div>
+          </div>
+          <${ToggleSwitch} checked=${emailPrefs.enabled}
+            onChange=${e => handleSaveEmailPrefs({ ...emailPrefs, enabled: e.target.checked })} />
+        </div>
+
+        ${emailPrefs.enabled ? html`
+          <div class="pf-notif-options">
+            <label class="pf-notif-option">
+              <input type="checkbox" checked=${emailPrefs.extensions}
+                onChange=${e => handleSaveEmailPrefs({ ...emailPrefs, extensions: e.target.checked })} />
+              ${t('profile.notifications.notifTypeExtensions')}
+            </label>
+            <label class="pf-notif-option">
+              <input type="checkbox" checked=${emailPrefs.system}
+                onChange=${e => handleSaveEmailPrefs({ ...emailPrefs, system: e.target.checked })} />
+              ${t('profile.notifications.notifTypeSystem')}
+            </label>
+            <label class="pf-notif-option">
+              <input type="checkbox" checked=${emailPrefs.security}
+                onChange=${e => handleSaveEmailPrefs({ ...emailPrefs, security: e.target.checked })} />
+              ${t('profile.notifications.notifTypeSecurity')}
+            </label>
+          </div>
+        ` : null}
+      </${GlassCard}>
+    `;
+  }
+
+  function renderPushButtons() {
+    if (subscribed) {
+      return html`
+        <div class="flex-row">
+          <button class="btn-primary" onClick=${handleTestPush}>
+            ${t('profile.notifications.testBtn')}
+          </button>
+          <button class="btn-outline" onClick=${handleUnsubscribe}
+            disabled=${subStatus === 'unsubscribing'}>
+            ${subStatus === 'unsubscribing'
+              ? t('profile.notifications.unsubscribing')
+              : t('profile.notifications.unsubscribeBtn')}
+          </button>
+        </div>`;
+    }
+    return html`
+      <button class="btn-primary" onClick=${handleSubscribe}
+        disabled=${subStatus === 'subscribing'}>
+        ${subStatus === 'subscribing'
+          ? t('profile.notifications.subscribing')
+          : t('profile.notifications.subscribeBtn')}
+      </button>`;
+  }
+
+  if (!vapidKey) {
+    return html`<div>
+      <div class="section-title">${t('profile.notifications.title')}</div>
+      <div class="section-desc">${t('profile.notifications.explain')}</div>
+
+      <p class="text-caption">${t('profile.notifications.notConfigured')}</p>
+
+      <div class="section-title mt-section">${t('profile.notifications.emailNotifications')}</div>
+      ${renderEmailNotifications()}
+    </div>`;
+  }
+
+  return html`<div>
+    <div class="section-title">${t('profile.notifications.title')}</div>
+    <div class="section-desc">${t('profile.notifications.explain')}</div>
+
+    <${GlassCard}>
+      <div class="flex-between">
+        <div class="pf-notif-text">
+          <div class="pf-notif-heading">${t('profile.notifications.browserPush')}</div>
+          <div class="text-caption">${subscribed
+            ? t('profile.notifications.statusActive')
+            : t('profile.notifications.statusInactive')}</div>
+        </div>
+        ${renderPushButtons()}
+      </div>
+    </${GlassCard}>
+
+    <p class="text-meta mt-xs">${t('profile.notifications.hint')}</p>
+
+    <div class="section-title mt-section">${t('profile.notifications.emailNotifications')}</div>
+    ${renderEmailNotifications()}
+  </div>`;
+}