aimeat 1.2.0

package/dist/public/views/profile/chat-sessions-tab.js

@@ -0,0 +1,184 @@
+/**
+ * @file chat-sessions-tab.js
+ * @description Profile tab for managing AI chat sessions connected via agents.
+ *   Shows active sessions, allows creating new ones via prompt copy, and
+ *   removing existing sessions.
+ * @version-history
+ *   v1.0.0 — 2026-03-16 — Initial chat sessions tab
+ *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes; fix fallback strings
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml, timeAgo } from '/js/utils.js';
+import { Spinner } from './shared.js';
+import { useConfirm } from '/components/Modal.js';
+import { listAgents, deleteAgent } from '/js/services/agents.js';
+import { apiGet } from '/js/api.js';
+
+export default function ChatSessionsTab({ session, showToast, onStats }) {
+  const { confirm, ConfirmUI } = useConfirm();
+  const [chatSessions, setChatSessions] = useState(null);
+  const [expanded, setExpanded] = useState(null);
+  const [deleting, setDeleting] = useState(null);
+  const [copying, setCopying] = useState(null);
+
+  const loadData = useCallback(async () => {
+    try {
+      const agents = await listAgents(session.owner);
+      const sessions = agents.filter(a => a.owner === session.owner && a.name?.startsWith('session-'));
+      setChatSessions(sessions);
+      onStats?.({ chatSessions: sessions.length });
+    } catch { setChatSessions([]); }
+  }, [session?.owner, onStats]);
+
+  useEffect(() => {
+    if (session) loadData();
+  }, [session, loadData]);
+
+  // Live update listener
+  const loadRef = useRef(loadData);
+  loadRef.current = loadData;
+  useEffect(() => {
+    const handler = () => loadRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  const handleDelete = useCallback(async (s) => {
+    const name = s.display_name || s.name || 'session';
+    confirm(t('profile.chatSessions.confirmDelete'), async () => {
+      setDeleting(s.name);
+      try {
+        await deleteAgent(s.name);
+        showToast(t('profile.chatSessions.deleted'));
+        setExpanded(null);
+        loadData();
+      } catch {
+        showToast(t('profile.chatSessions.deleteError'));
+      } finally { setDeleting(null); }
+    }, { danger: true });
+  }, [showToast, loadData]);
+
+  const toggleExpand = useCallback((name) => {
+    setExpanded(prev => prev === name ? null : name);
+  }, []);
+
+  const copyPrompt = useCallback(async (type) => {
+    setCopying(type);
+    try {
+      const endpoint = type === 'quick'
+        ? '/v1/templates/chat-session-quick'
+        : '/v1/templates/chat-session-human';
+      const resp = await apiGet(endpoint);
+      const text = resp?.data?.prompt;
+      if (text) {
+        await navigator.clipboard.writeText(text);
+        showToast(t('profile.chatSessions.promptCopied'));
+      } else {
+        showToast(t('profile.chatSessions.promptError'));
+      }
+    } catch {
+      showToast(t('profile.chatSessions.promptError'));
+    } finally { setCopying(null); }
+  }, [showToast]);
+
+  if (!chatSessions) return html`<${Spinner} text=${t('profile.chatSessions.loading')} />`;
+  return html`
+    <div class="section-title">${t('profile.chatSessions.title')}</div>
+    <div class="section-desc">${t('profile.chatSessions.desc')}</div>
+
+    <div class="card mb-1">
+      <div class="card-header">
+        <div class="card-title">${t('profile.chatSessions.createTitle')}</div>
+      </div>
+      <div class="cs-create-body">
+        <p class="cs-create-desc">
+          ${t('profile.chatSessions.createDesc')}
+        </p>
+        <div class="flex-row-wrap mb-half">
+          <button class="btn-primary" onClick=${() => copyPrompt('quick')}
+            disabled=${copying === 'quick'}>
+            ${copying === 'quick' ? '...' : t('profile.chatSessions.copyQuickPrompt')}
+          </button>
+          <button class="btn-outline" onClick=${() => copyPrompt('detailed')}
+            disabled=${copying === 'detailed'}>
+            ${copying === 'detailed' ? '...' : t('profile.chatSessions.copyDetailedPrompt')}
+          </button>
+        </div>
+        <p class="cs-create-hint">
+          ${t('profile.chatSessions.createHint')}
+        </p>
+      </div>
+    </div>
+
+    ${chatSessions.length === 0
+      ? html`<div class="empty">${t('profile.chatSessions.empty')}</div>`
+      : html`
+        <div class="section-title cs-section-sub">${t('profile.chatSessions.activeSessions')}</div>
+        ${chatSessions.map(s => {
+          const isExpanded = expanded === s.name;
+          return html`
+            <div class="card ${isExpanded ? 'card-expanded' : ''}" key=${s.name}>
+              <div class="card-header card-clickable" onClick=${() => toggleExpand(s.name)}>
+                <span class="expand-icon">${isExpanded ? '\u25BC' : '\u25B6'}</span>
+                <div class="card-title">${escHtml(s.display_name || s.name || '-')}</div>
+                <span class="badge badge-info">${escHtml(s.name || '')}</span>
+              </div>
+              <div class="card-subtitle">${t('profile.chatSessions.lastSeen')}: ${s.last_seen ? timeAgo(s.last_seen) : '-'}</div>
+
+              ${isExpanded && html`
+                <div class="card-detail">
+                  <div class="detail-grid">
+                    <div class="detail-item">
+                      <span class="detail-label">GAII</span>
+                      <span class="detail-value mono">${escHtml(s.gaii || '-')}</span>
+                    </div>
+                    ${s.description ? html`
+                      <div class="detail-item">
+                        <span class="detail-label">${t('profile.chatSessions.description')}</span>
+                        <span class="detail-value">${escHtml(s.description)}</span>
+                      </div>
+                    ` : null}
+                    <div class="detail-item">
+                      <span class="detail-label">${t('profile.chatSessions.trust')}</span>
+                      <span class="detail-value">${s.trust_score ?? '-'}</span>
+                    </div>
+                    <div class="detail-item">
+                      <span class="detail-label">${t('profile.chatSessions.balance')}</span>
+                      <span class="detail-value">${s.morsel_balance ?? '-'} morsels</span>
+                    </div>
+                    ${s.roles ? html`
+                      <div class="detail-item">
+                        <span class="detail-label">${t('profile.chatSessions.roles')}</span>
+                        <span class="detail-value">${(s.roles || []).join(', ')}</span>
+                      </div>
+                    ` : null}
+                    ${s.created_at ? html`
+                      <div class="detail-item">
+                        <span class="detail-label">${t('profile.chatSessions.created')}</span>
+                        <span class="detail-value">${new Date(s.created_at).toLocaleString()}</span>
+                      </div>
+                    ` : null}
+                  </div>
+
+                  <div class="card-actions flex-actions">
+                    <button class="btn-outline btn-sm" onClick=${(e) => { e.stopPropagation(); navigator.clipboard.writeText(s.gaii || s.name); showToast('GAII copied'); }}>
+                      Copy GAII
+                    </button>
+                    <button class="btn-danger-solid btn-sm" onClick=${(e) => { e.stopPropagation(); handleDelete(s); }}
+                      disabled=${deleting === s.name}>
+                      ${deleting === s.name ? '...' : t('profile.chatSessions.remove')}
+                    </button>
+                  </div>
+                </div>
+              `}
+            </div>
+          `;
+        })}
+      `
+    }
+    <${ConfirmUI} />`;
+}

package/dist/public/views/profile/data-wallet-tab.js

@@ -0,0 +1,313 @@
+/**
+ * @file data-wallet-tab.js
+ * @description Data Wallet profile tab — displays consent rules, audit trail,
+ *   permission summary, and GDPR export controls for the logged-in owner.
+ * @structure
+ *   - DataWalletTab (default export) — main tab component
+ *   - Permission summary card, consent table with filter/bulk-revoke,
+ *     audit log with day-range selector, GDPR export button
+ * @usage Loaded by profile.js route as a lazy tab component.
+ * @version-history
+ *   v1.0.0 — 2026-03-10 — Initial data wallet tab implementation
+ *   v1.1.0 — 2026-03-17 — Refactor: 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 { escHtml, timeAgo } from '/js/utils.js';
+import { Spinner, recipientBadge, isExpiringSoon } from './shared.js';
+import * as consentService from '/js/services/consent.js';
+
+export default function DataWalletTab({ session, showToast }) {
+  const [consents, setConsents] = useState(null);
+  const [auditEntries, setAuditEntries] = useState(null);
+  const [auditDays, setAuditDays] = useState(30);
+  const [permSummary, setPermSummary] = useState(null);
+  const [showConsentForm, setShowConsentForm] = useState(false);
+  const [consentFilter, setConsentFilter] = useState('');
+  const [selectedConsents, setSelectedConsents] = useState(new Set());
+
+  useEffect(() => {
+    if (session) { loadConsents(); loadAudit(30); loadPermSummary(); }
+  }, [session]);
+
+  async function loadConsents() {
+    try {
+      const list = await consentService.listConsents();
+      setConsents(Array.isArray(list) ? list : []);
+    } catch { setConsents([]); }
+  }
+
+  async function loadAudit(days) {
+    try {
+      const list = await consentService.listAuditEntries(days);
+      setAuditEntries(Array.isArray(list) ? list : []);
+    } catch { setAuditEntries([]); }
+  }
+
+  async function loadPermSummary() {
+    try {
+      const data = await consentService.getPermissionSummary();
+      setPermSummary(data || null);
+    } catch { setPermSummary(null); }
+  }
+
+  // Live update listener
+  const loadAllRef = useRef(() => { loadConsents(); loadAudit(auditDays); loadPermSummary(); });
+  loadAllRef.current = () => { loadConsents(); loadAudit(auditDays); loadPermSummary(); };
+  useEffect(() => {
+    const handler = () => loadAllRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  async function handleGrant(body) {
+    try {
+      await consentService.grantConsent(body);
+      showToast(t('permissions.granted'));
+      setShowConsentForm(false);
+      loadConsents();
+      loadPermSummary();
+    } catch (e) { showToast(e.message || t('profile.error'), true); }
+  }
+
+  async function handleRevoke(id) {
+    try {
+      await consentService.revokeConsent(id);
+      showToast(t('wallet.consents.revoked'));
+      loadConsents();
+    } catch (e) { showToast(e.message || t('profile.error'), true); }
+  }
+
+  async function handleBulkRevoke(ids) {
+    try {
+      await consentService.bulkRevoke([...ids]);
+      showToast(t('wallet.consents.revoked'));
+    } catch (e) { showToast(e.message || t('profile.error'), true); }
+    setSelectedConsents(new Set());
+    loadConsents();
+    loadPermSummary();
+  }
+
+  async function handleExport() {
+    try {
+      const data = await consentService.exportGdpr(session.owner);
+      const json = JSON.stringify(data, null, 2);
+      const blob = new Blob([json], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'aimeat-export-' + new Date().toISOString().slice(0, 10) + '.json';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch { showToast(t('profile.error'), true); }
+  }
+
+  const filteredConsents = consents?.filter(c => {
+    if (!consentFilter) return true;
+    const q = consentFilter.toLowerCase();
+    const recip = (c.recipient_gaii || c.recipient || '').toLowerCase();
+    const pat = (c.data_pattern || c.pattern || '').toLowerCase();
+    return recip.includes(q) || pat.includes(q);
+  });
+
+  return html`
+    <div class="section-title">\u{1F6E1}\uFE0F ${t('profile.tabs.dataWallet')}</div>
+
+    ${permSummary && html`
+      <div class="card dw-summary-card">
+        <h3 class="card-h3">${t('permissions.summaryTitle')}</h3>
+        <div class="dw-summary-grid mb-1">
+          <div class="dw-stat">
+            <div class="dw-stat-value">${permSummary.active_consents || 0}</div>
+            <div class="text-meta-sm">${t('permissions.summaryActiveRules')}</div>
+          </div>
+          <div class="dw-stat">
+            <div class="dw-stat-value">${permSummary.total_memory_keys || 0}</div>
+            <div class="text-meta-sm">${t('permissions.summaryMemoryKeys')}</div>
+          </div>
+          <div class="dw-stat">
+            <div class="dw-stat-value">${permSummary.total_storage_files || 0}</div>
+            <div class="text-meta-sm">${t('permissions.summaryStorageFiles')}</div>
+          </div>
+        </div>
+        ${permSummary.rules_by_recipient_type && html`
+          <div class="text-meta mb-half">${t('permissions.summaryByType')}</div>
+          <div class="flex-row-wrap">
+            ${Object.entries(permSummary.rules_by_recipient_type).filter(([,v]) => v > 0).map(([k,v]) => html`
+              <span class="dw-type-tag">${k}: ${v}</span>
+            `)}
+          </div>
+        `}
+      </div>
+    `}
+
+    <div class="flex-between dw-section-title">
+      <h3 class="dw-section-heading">${t('wallet.consents.title')}</h3>
+      <button class="btn-primary" onClick=${() => setShowConsentForm(!showConsentForm)}>${t('permissions.grantBtn')}</button>
+    </div>
+
+    ${showConsentForm && html`
+      <div class="card dw-consent-card">
+        <h4 class="card-h3">${t('permissions.grantTitle')}</h4>
+        <form onSubmit=${(e) => {
+          e.preventDefault();
+          const fd = new FormData(e.target);
+          const rType = fd.get('recipientType');
+          let recipVal = fd.get('recipientValue');
+          if (rType === 'wildcard') recipVal = '*';
+          else if (rType === 'ghii') recipVal = 'ghii:' + recipVal;
+          else if (rType === 'domain') recipVal = 'domain:' + recipVal;
+          else if (rType === 'node') recipVal = 'node:' + recipVal;
+          else if (rType === 'organism') recipVal = 'organism.' + recipVal;
+          handleGrant({
+            data_pattern: fd.get('dataPattern'),
+            recipient: recipVal,
+            purpose: fd.get('purpose') || 'general',
+            scope: fd.get('scope') || 'private',
+            expires_at: fd.get('expires') || undefined,
+          });
+        }}>
+          <div class="dw-form-grid">
+            <div>
+              <label class="dw-label">${t('permissions.dataPattern')}</label>
+              <input name="dataPattern" class="input-field w-full" placeholder=${t('permissions.dataPatternHint')} required />
+            </div>
+            <div>
+              <label class="dw-label">${t('permissions.recipientType')}</label>
+              <select name="recipientType" class="input-field w-full">
+                <option value="gaii">${t('permissions.typGaii')}</option>
+                <option value="ghii">${t('permissions.typGhii')}</option>
+                <option value="organism">${t('permissions.typOrganism')}</option>
+                <option value="domain">${t('permissions.typDomain')}</option>
+                <option value="node">${t('permissions.typNode')}</option>
+                <option value="wildcard">${t('permissions.typWildcard')}</option>
+              </select>
+            </div>
+            <div>
+              <label class="dw-label">${t('permissions.recipient')}</label>
+              <input name="recipientValue" class="input-field w-full" placeholder="agent#owner@node" />
+            </div>
+            <div>
+              <label class="dw-label">${t('permissions.purpose')}</label>
+              <input name="purpose" class="input-field w-full" placeholder=${t('permissions.purposeHint')} />
+            </div>
+            <div>
+              <label class="dw-label">${t('permissions.scope')}</label>
+              <select name="scope" class="input-field w-full">
+                <option value="private">${t('permissions.scopePrivate')}</option>
+                <option value="dmz">${t('permissions.scopeDmz')}</option>
+                <option value="federation">${t('permissions.scopeFederation')}</option>
+              </select>
+            </div>
+            <div>
+              <label class="dw-label">${t('permissions.expires')}</label>
+              <input name="expires" type="date" class="input-field w-full" />
+            </div>
+          </div>
+          <div class="flex-actions">
+            <button type="submit" class="btn-primary">${t('permissions.grantBtn')}</button>
+            <button type="button" class="btn-outline btn-sm" onClick=${() => setShowConsentForm(false)}>${t('permissions.cancelBtn')}</button>
+          </div>
+        </form>
+      </div>
+    `}
+
+    ${consents && consents.length > 0 && html`
+      <div class="flex-row mb-half">
+        <input type="text" class="input-field dw-filter-input"
+          placeholder=${t('permissions.filterPlaceholder')}
+          value=${consentFilter}
+          onInput=${(e) => { setConsentFilter(e.target.value); setSelectedConsents(new Set()); }} />
+        ${selectedConsents.size > 0 && html`
+          <button class="btn-danger text-meta" onClick=${() => handleBulkRevoke(selectedConsents)}>
+            ${t('permissions.revokeSelected')} (${selectedConsents.size})
+          </button>
+        `}
+      </div>
+    `}
+
+    ${!consents ? html`<${Spinner} />`
+      : filteredConsents.length === 0 ? html`<div class="empty">${t('wallet.consents.empty')}</div>`
+      : html`<div class="card scroll-x">
+          <table class="consent-table"><thead><tr>
+            <th class="dw-checkbox-col"><input type="checkbox"
+              checked=${filteredConsents.length > 0 && filteredConsents.every(c => selectedConsents.has(c.id || c.consent_id))}
+              onChange=${(e) => {
+                if (e.target.checked) {
+                  setSelectedConsents(new Set(filteredConsents.map(c => c.id || c.consent_id)));
+                } else {
+                  setSelectedConsents(new Set());
+                }
+              }} /></th>
+            <th>${t('wallet.consents.pattern')}</th>
+            <th>${t('wallet.consents.recipient')}</th>
+            <th>${t('wallet.consents.purpose')}</th>
+            <th>${t('wallet.consents.scope')}</th>
+            <th>${t('wallet.consents.granted')}</th>
+            <th>${t('wallet.consents.expires')}</th>
+            <th></th>
+          </tr></thead><tbody>
+            ${filteredConsents.map(c => {
+              const cId = c.id || c.consent_id;
+              const isExpired = c.expires_at && new Date(c.expires_at) < new Date();
+              const expSoon = isExpiringSoon(c.expires_at);
+              return html`<tr class=${expSoon ? 'dw-expiring' : ''}>
+                <td><input type="checkbox" checked=${selectedConsents.has(cId)}
+                  onChange=${(e) => {
+                    const next = new Set(selectedConsents);
+                    e.target.checked ? next.add(cId) : next.delete(cId);
+                    setSelectedConsents(next);
+                  }} /></td>
+                <td><span class="dw-code-accent">${escHtml(c.data_pattern || c.pattern || '-')}</span></td>
+                <td class="dw-recipient-cell">${recipientBadge(c.recipient_gaii || c.recipient)} <span class="text-meta">${escHtml(c.recipient_gaii || c.recipient || '-')}</span></td>
+                <td>${escHtml(c.purpose || '-')}</td>
+                <td>${isExpired ? html`<span class="badge badge-muted">expired</span>` : html`<span class="badge badge-success">active</span>`} ${escHtml(c.scope || '-')}</td>
+                <td class="text-meta">${c.granted_at ? new Date(c.granted_at).toLocaleDateString() : '-'}</td>
+                <td class="text-meta">
+                  ${expSoon && html`<span class="dw-expiring-icon" title=${t('permissions.expiringWarning')}>\u26A0\uFE0F</span>`}
+                  ${c.expires_at ? new Date(c.expires_at).toLocaleDateString() : t('wallet.consents.never')}
+                </td>
+                <td>${!isExpired && html`<button class="btn-danger-solid btn-sm" onClick=${() => handleRevoke(cId)}>${t('wallet.consents.revoke')}</button>`}</td>
+              </tr>`;
+            })}
+          </tbody></table>
+        </div>`
+    }
+
+    <h3 class="dw-section-heading">${t('wallet.audit.title')}</h3>
+    <div class="flex-row mb-1">
+      ${[7, 30, 90].map(d => html`
+        <button class="audit-day-btn ${auditDays === d ? 'active' : ''}" onClick=${() => { setAuditDays(d); loadAudit(d); }}>${d} ${t('wallet.audit.days')}</button>
+      `)}
+    </div>
+    ${!auditEntries ? html`<${Spinner} />`
+      : auditEntries.length === 0 ? html`<div class="empty">${t('wallet.audit.empty')}</div>`
+      : html`<div class="card scroll-x">
+          <table class="audit-table"><thead><tr>
+            <th>${t('wallet.audit.who')}</th>
+            <th>${t('wallet.audit.what')}</th>
+            <th>${t('wallet.audit.when')}</th>
+            <th>${t('wallet.audit.purpose')}</th>
+          </tr></thead><tbody>
+            ${auditEntries.map(e => html`<tr>
+              <td>${escHtml(e.accessor_gaii || e.accessed_by || e.who || '-')}</td>
+              <td><span class="dw-code-accent">${escHtml(e.data_key || e.key || e.what || '-')}</span></td>
+              <td class="text-meta">${e.accessed_at ? timeAgo(e.accessed_at) : (e.timestamp ? timeAgo(e.timestamp) : '-')}</td>
+              <td>${escHtml(e.purpose || '-')}</td>
+            </tr>`)}
+          </tbody></table>
+        </div>`
+    }
+
+    <h3 class="dw-section-heading">${t('wallet.export.title')}</h3>
+    <div class="card">
+      <p class="text-caption mb-1">${t('wallet.export.description')}</p>
+      <button class="btn-primary" onClick=${handleExport}>${t('wallet.export.button')}</button>
+    </div>
+  `;
+}

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

@@ -0,0 +1,157 @@
+/**
+ * @file email-tab.js
+ * @description Profile tab for email verification and management.
+ *   Allows users to verify their email address with a 6-digit code,
+ *   view verification status, and change their email.
+ * @version-history
+ *   v1.0.0 — 2026-03-16 — Initial email verification tab
+ *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes; use GlassCard/ToggleSwitch
+ */
+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, GlassCard } from './shared.js';
+import { apiGet, apiPost } from '/js/api.js';
+
+export default function EmailTab({ session, showToast }) {
+  const [loading, setLoading] = useState(true);
+  const [ghiiData, setGhiiData] = useState(null);
+  const [email, setEmail] = useState('');
+  const [code, setCode] = useState('');
+  const [verificationId, setVerificationId] = useState(null);
+  const [step, setStep] = useState('idle'); // idle | codeSent | verified
+  const [sending, setSending] = useState(false);
+  const [verifying, setVerifying] = useState(false);
+  const [changing, setChanging] = useState(false);
+
+  useEffect(() => {
+    if (session) loadData();
+  }, [session]);
+
+  async function loadData() {
+    setLoading(true);
+    try {
+      const ghii = session.ghii || `${session.owner}@${window.AIMEAT?.auth?.nodeId || ''}`;
+      const res = await apiGet(`/v1/ghii/${encodeURIComponent(ghii)}`);
+      if (res.data) {
+        setGhiiData(res.data);
+        if (res.data.verification_level >= 1) {
+          setStep('verified');
+        }
+      }
+    } catch { /* ignore */ }
+    setLoading(false);
+  }
+
+  async function handleSendCode() {
+    if (!email.trim()) {
+      showToast(t('profile.email.enterEmail'), true);
+      return;
+    }
+    setSending(true);
+    try {
+      const res = await apiPost('/v1/ghii/email/verify', { email: email.trim() });
+      if (res.ok === false || res.error) {
+        showToast(res.error?.message || t('profile.email.sendFailed'), true);
+        setSending(false);
+        return;
+      }
+      setVerificationId(res.data?.verification_id || null);
+      setStep('codeSent');
+      showToast(t('profile.email.codeSent'));
+    } catch (err) {
+      showToast(err.message || t('profile.email.sendFailed'), true);
+    }
+    setSending(false);
+  }
+
+  async function handleVerifyCode() {
+    if (!code.trim()) {
+      showToast(t('profile.email.enterCode'), true);
+      return;
+    }
+    setVerifying(true);
+    try {
+      const body = { code: code.trim() };
+      if (verificationId) body.verification_id = verificationId;
+      const res = await apiPost('/v1/ghii/email/confirm', body);
+      if (res.ok === false || res.error) {
+        showToast(res.error?.message || t('profile.email.verifyFailed'), true);
+        setVerifying(false);
+        return;
+      }
+      setStep('verified');
+      showToast(t('profile.email.verifySuccess'));
+      // Notify other tabs (e.g. notifications-tab) that email status changed
+      window.dispatchEvent(new CustomEvent('aimeat-live-update'));
+      loadData();
+    } catch (err) {
+      showToast(err.message || t('profile.email.verifyFailed'), true);
+    }
+    setVerifying(false);
+  }
+
+  function handleChangeEmail() {
+    setChanging(true);
+    setStep('idle');
+    setCode('');
+    setVerificationId(null);
+  }
+
+  if (loading) return html`<${Spinner} />`;
+
+  const isVerified = step === 'verified' || (ghiiData?.verification_level >= 1);
+
+  return html`<div>
+    <div class="section-title">${t('profile.email.title')}</div>
+    <div class="section-desc">${t('profile.email.description')}</div>
+
+    <div class="pf-card">
+      ${isVerified && !changing ? html`
+        <${GlassCard}>
+          <div class="email-icon-row">
+            <span class="email-verified-icon">\u2713</span>
+            <span class="email-verified-text">${t('profile.email.verified')}</span>
+          </div>
+          <div class="email-status-text">
+            ${t('profile.email.verified')}
+          </div>
+          <button class="btn-outline btn-sm email-change-btn" onClick=${handleChangeEmail}>
+            ${t('profile.email.changeEmail')}
+          </button>
+        <//>
+      ` : step === 'codeSent' ? html`
+        <${GlassCard}>
+          <p class="email-sent-text">${t('profile.email.codeSent')}</p>
+          <div class="email-form-group">
+            <label class="email-form-label">${t('profile.email.enterCode')}</label>
+            <input class="pf-input input-verification-code" type="text" maxlength="6" placeholder="123456"
+              value=${code} onInput=${e => setCode(e.target.value)} />
+          </div>
+          <button class="btn-primary" onClick=${handleVerifyCode} disabled=${verifying}>
+            ${verifying ? '...' : t('profile.email.verify')}
+          </button>
+        <//>
+      ` : html`
+        <${GlassCard}>
+          ${!isVerified ? html`
+            <div class="email-icon-row">
+              <span class="email-unverified-icon">\u2709</span>
+              <span class="email-unverified-text">${t('profile.email.notVerified')}</span>
+            </div>
+          ` : null}
+          <div class="email-form-group">
+            <label class="email-form-label">${t('profile.email.enterEmail')}</label>
+            <input class="pf-input" type="email" placeholder="you@example.com"
+              value=${email} onInput=${e => setEmail(e.target.value)} />
+          </div>
+          <button class="btn-primary" onClick=${handleSendCode} disabled=${sending}>
+            ${sending ? '...' : t('profile.email.sendCode')}
+          </button>
+        <//>
+      `}
+    </div>
+  </div>`;
+}