aimeat 1.2.0

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

@@ -0,0 +1,393 @@
+/**
+ * @file packages-tab.js
+ * @description Profile tab for managing package instances, browsing available packages,
+ *   and exploring the template gallery. Displays three sub-views: My Instances (installed
+ *   packages with status/update/remove), Browse Packages (search/filter/install), and
+ *   Template Gallery (community listings with ratings).
+ * @structure
+ *   - PackagesTab (default export) — main tab component with sub-view navigation
+ * @usage
+ *   import PackagesTab from './profile/packages-tab.js';
+ *   <PackagesTab session={session} showToast={showToast} navigate={navigate} locale={locale} />
+ * @version-history
+ *   v1.0.0 — 2026-03-15 — initial implementation (Phase 6)
+ *   v1.1.0 — 2026-03-16 — restyle to match extensions-tab pattern (grid cards, consistent CSS)
+ *   v1.2.0 — 2026-03-17 — add "Open in Generator" / "Edit in Generator" buttons for
+ *     importing packages into generator projects (fork vs edit detection)
+ *   v1.3.0 — 2026-03-20 — add ZIP upload/download and template proposal buttons
+ *   v1.4.0 — 2026-03-20 — add remote templates section with federation sync
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { Spinner } from './shared.js';
+import { useConfirm } from '/components/Modal.js';
+import * as pkgService from '/js/services/packages.js';
+import { importPackageToGenerator } from '/js/services/generator-packaging.js';
+
+export default function PackagesTab({ session, showToast, navigate, locale }) {
+  const { confirm, ConfirmUI } = useConfirm();
+  const [instances, setInstances] = useState([]);
+  const [packages, setPackages] = useState([]);
+  const [templates, setTemplates] = useState([]);
+  const [remoteTemplates, setRemoteTemplates] = useState([]);
+  const [syncing, setSyncing] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [view, setView] = useState('instances');
+  const [search, setSearch] = useState('');
+  const [category, setCategory] = useState('');
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [instRes, pkgRes, tplRes] = await Promise.all([
+        pkgService.listInstances({ status: 'active' }),
+        pkgService.listPackages({ status: 'published', author: session?.owner }),
+        pkgService.listTemplates({ sort: 'newest' }),
+      ]);
+      if (instRes.ok) setInstances(instRes.data?.instances ?? []);
+      if (pkgRes.ok) setPackages(pkgRes.data?.packages ?? []);
+      if (tplRes.ok) setTemplates(tplRes.data?.templates ?? []);
+      // Load remote/federated templates (best-effort)
+      try {
+        const fedRes = await pkgService.listFederationTemplates({ limit: 50 });
+        if (fedRes.ok) setRemoteTemplates(fedRes.data?.templates ?? []);
+      } catch (_) { /* federation may not be available */ }
+    } catch (e) { /* ignore */ }
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { loadData(); }, [loadData]);
+
+  // Live updates
+  useEffect(() => {
+    const handler = () => { loadData(); };
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [loadData]);
+
+  const handleInstall = async (groupId) => {
+    const label = prompt(t('packages.labelPrompt') || 'Instance label (optional):');
+    if (label === null) return;
+    const res = await pkgService.installPackage(groupId, { label: label || '' });
+    if (res.ok) {
+      showToast(t('packages.installed'));
+      loadData();
+    } else {
+      showToast(res.error || 'Install failed', true);
+    }
+  };
+
+  const handleRemove = async (id) => {
+    confirm(t('packages.confirmRemove') || 'Remove this instance?', async () => {
+      const res = await pkgService.removeInstance(id, false);
+      if (res.ok) {
+        showToast(t('packages.instanceRemoved'));
+        loadData();
+      } else {
+        showToast(res.error || 'Remove failed', true);
+      }
+    }, { danger: true });
+  };
+
+  const handleCheckUpdate = async (id) => {
+    const res = await pkgService.checkUpdate(id);
+    if (res.ok && res.data) {
+      if (res.data.updateAvailable) {
+        showToast(`${t('packages.updateAvailable')}: ${res.data.latestVersion}`);
+      } else {
+        showToast(t('packages.noUpdateAvailable'));
+      }
+    } else {
+      showToast(res.error || 'Check failed', true);
+    }
+  };
+
+  const handleOpenInGenerator = async (groupId, author) => {
+    const currentUser = session?.owner || '';
+    const isOwn = author === currentUser;
+    if (!isOwn) {
+      const ok = window.confirm(t('profile.generator.forkConfirm') || 'This will create your own copy of this package for editing. Continue?');
+      if (!ok) return;
+    }
+    try {
+      const newProjectId = await importPackageToGenerator(groupId, null, currentUser);
+      showToast(t('profile.packages.importSuccess') || 'Package imported as generator project');
+      navigate('generator');
+    } catch (e) {
+      showToast(e.message, true);
+    }
+  };
+
+  const handleDownloadZip = async (groupId, name) => {
+    try {
+      const blob = await pkgService.exportPackageZip(groupId);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${name}.zip`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (e) {
+      showToast(t('packages.exportFailed') || e.message, true);
+    }
+  };
+
+  const handleUploadZip = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    e.target.value = '';
+    try {
+      await pkgService.importPackageZip(file);
+      showToast(t('packages.importSuccess') || 'Package imported');
+      loadData();
+    } catch (err) {
+      showToast(err.message || t('packages.importFailed'), true);
+    }
+  };
+
+  const handleProposeAsTemplate = async (groupId) => {
+    try {
+      const res = await pkgService.proposeAsTemplate(groupId);
+      if (res.ok) {
+        showToast(t('packages.proposePending'));
+        loadData();
+      } else {
+        showToast(res.error || 'Proposal failed', true);
+      }
+    } catch (e) {
+      showToast(e.message, true);
+    }
+  };
+
+  const handleSyncFederation = async () => {
+    setSyncing(true);
+    try {
+      const res = await pkgService.syncFederationTemplates();
+      if (res.ok) {
+        showToast(t('packages.federation.syncSuccess') || 'Federation sync complete');
+        loadData();
+      } else {
+        showToast(res.error?.message || 'Sync failed', true);
+      }
+    } catch (e) {
+      showToast(e.message, true);
+    }
+    setSyncing(false);
+  };
+
+  const isOperator = session?.roles?.includes('operator');
+
+  if (loading) return html`<${Spinner} />`;
+
+  const filtered = packages.filter(p => {
+    if (search && !p.name?.toLowerCase().includes(search.toLowerCase()) && !p.description?.toLowerCase().includes(search.toLowerCase())) return false;
+    if (category && p.category !== category) return false;
+    return true;
+  });
+
+  return html`
+    <div class="pkg-tab">
+      <div class="pkg-nav">
+        <button class=${view === 'instances' ? 'active' : ''} onClick=${() => setView('instances')}>
+          \u{1F4E6} ${t('packages.myInstances') || 'My Instances'} (${instances.length})
+        </button>
+        <button class=${view === 'browse' ? 'active' : ''} onClick=${() => setView('browse')}>
+          \u{1F50D} ${t('packages.browse') || 'Browse Packages'}
+        </button>
+        <button class=${view === 'gallery' ? 'active' : ''} onClick=${() => setView('gallery')}>
+          \u{2B50} ${t('packages.gallery') || 'Template Gallery'}
+        </button>
+      </div>
+
+      ${view === 'instances' && html`
+        <div class="pkg-section">
+          <h3>${t('packages.myInstances') || 'My Instances'}</h3>
+          ${instances.length === 0 ? html`
+            <p class="pkg-empty">${t('packages.noInstances') || 'No packages installed yet.'}</p>
+          ` : html`
+            <div class="pkg-grid">
+              ${instances.map(inst => html`
+                <div class="pkg-card" key=${inst.id}>
+                  <div class="pkg-card-header">
+                    <span class="pkg-card-name">${escHtml(inst.label || inst.packageGroupId)}</span>
+                    <span class="pkg-badge pkg-badge-${inst.status}">${inst.status}</span>
+                  </div>
+                  <div class="pkg-card-meta">
+                    <span class="pkg-card-version">${escHtml(inst.packageVersion)}</span>
+                    <span>\u00B7 ${inst.installedComponents?.length ?? 0} ${t('packages.components') || 'components'}</span>
+                  </div>
+                  <div class="pkg-card-footer">
+                    <div class="pkg-card-actions">
+                      <button onClick=${() => handleCheckUpdate(inst.id)}>${t('packages.checkUpdate') || 'Check Update'}</button>
+                      <button class="danger" onClick=${() => handleRemove(inst.id)}>${t('packages.remove') || 'Remove'}</button>
+                    </div>
+                  </div>
+                </div>
+              `)}
+            </div>
+          `}
+        </div>
+      `}
+
+      ${view === 'browse' && html`
+        <div class="pkg-section">
+          <div class="pkg-section-header">
+            <h3>${t('packages.browse') || 'Available Packages'}</h3>
+            <label class="btn-outline pkg-upload-btn">
+              ${t('packages.uploadZip') || 'Upload ZIP'}
+              <input type="file" accept=".zip" class="pkg-hidden-input" onChange=${handleUploadZip} />
+            </label>
+          </div>
+          <div class="pkg-filters">
+            <input type="text" placeholder=${t('packages.search') || 'Search...'}
+              value=${search} onInput=${e => setSearch(e.target.value)} />
+            <select value=${category} onChange=${e => setCategory(e.target.value)}>
+              <option value="">${t('packages.allCategories') || 'All Categories'}</option>
+              <option value="signage">Signage</option>
+              <option value="marketplace">Marketplace</option>
+              <option value="iot">IoT</option>
+              <option value="social">Social</option>
+              <option value="productivity">Productivity</option>
+              <option value="communication">Communication</option>
+              <option value="other">Other</option>
+            </select>
+          </div>
+          ${filtered.length === 0 ? html`
+            <p class="pkg-empty">${t('packages.noPackages') || 'No packages available.'}</p>
+          ` : html`
+            <div class="pkg-grid">
+              ${filtered.map(pkg => html`
+                <div class="pkg-card" key=${pkg.id}>
+                  <div class="pkg-card-header">
+                    <span class="pkg-card-name">${escHtml(pkg.name)}</span>
+                    ${pkg.category && html`<span class="pkg-tag">${pkg.category}</span>`}
+                  </div>
+                  <div class="pkg-card-desc">${escHtml(pkg.description || '')}</div>
+                  <div class="pkg-card-meta">
+                    <span class="pkg-card-version">${pkg.version}</span>
+                    <span>${t('packages.by') || 'by'} ${escHtml(pkg.author)}</span>
+                    <span>\u00B7 ${pkg.components?.length ?? 0} ${t('packages.components') || 'components'}</span>
+                  </div>
+                  ${pkg.templateStatus === 'rejected' && pkg.rejectionReason && html`
+                    <div class="pkg-rejection">
+                      ${t('packages.moderation.rejectionReason')}: ${escHtml(pkg.rejectionReason)}
+                    </div>
+                  `}
+                  <div class="pkg-card-footer">
+                    <div class="pkg-card-actions">
+                      <button class="primary" onClick=${() => handleInstall(pkg.packageGroupId)}>
+                        ${t('packages.install') || 'Install'}
+                      </button>
+                      <button onClick=${() => handleDownloadZip(pkg.packageGroupId, pkg.name)}>
+                        ${t('packages.downloadZip') || 'Download ZIP'}
+                      </button>
+                      <button onClick=${() => handleOpenInGenerator(pkg.packageGroupId, pkg.author)}>
+                        ${pkg.author === session?.owner
+                          ? (t('packages.editInGenerator') || 'Edit in Generator')
+                          : (t('packages.openInGenerator') || 'Open in Generator')}
+                      </button>
+                      ${pkg.status === 'published' && !pkg.templateStatus && pkg.author === session?.owner && html`
+                        <button class="btn-outline" onClick=${() => handleProposeAsTemplate(pkg.packageGroupId)}>
+                          ${t('packages.proposeAsTemplate') || 'Propose as Template'}
+                        </button>
+                      `}
+                    </div>
+                  </div>
+                </div>
+              `)}
+            </div>
+          `}
+        </div>
+      `}
+
+      ${view === 'gallery' && html`
+        <div class="pkg-section">
+          <h3>${t('packages.gallery') || 'Template Gallery'}</h3>
+          ${templates.length === 0 ? html`
+            <p class="pkg-empty">${t('packages.noTemplates') || 'No templates available yet.'}</p>
+          ` : html`
+            <div class="pkg-grid">
+              ${templates.map(tpl => html`
+                <div class="pkg-card" key=${tpl.id}>
+                  <div class="pkg-card-header">
+                    <span class="pkg-card-name">${escHtml(tpl.title)}</span>
+                    ${tpl.featured && html`<span class="pkg-badge pkg-badge-featured">\u2B50 Featured</span>`}
+                  </div>
+                  <div class="pkg-card-desc">${escHtml(tpl.description || '')}</div>
+                  <div class="pkg-card-meta">
+                    <span>${t('packages.by') || 'by'} ${escHtml(tpl.packageAuthor)}</span>
+                    <span>\u00B7 \u2B50 ${tpl.rating?.toFixed(1) ?? '0.0'} (${tpl.reviewCount ?? 0})</span>
+                    <span>\u00B7 ${tpl.installCount ?? 0} ${t('packages.installs') || 'installs'}</span>
+                  </div>
+                  <div class="pkg-card-footer">
+                    <div class="pkg-card-actions">
+                      <button class="primary" onClick=${() => handleInstall(tpl.packageGroupId)}>
+                        ${t('packages.install') || 'Install'}
+                      </button>
+                      <button onClick=${() => handleDownloadZip(tpl.packageGroupId, tpl.title)}>
+                        ${t('packages.downloadZip') || 'Download ZIP'}
+                      </button>
+                      <button onClick=${() => handleOpenInGenerator(tpl.packageGroupId, tpl.packageAuthor)}>
+                        ${tpl.packageAuthor === session?.owner
+                          ? (t('packages.editInGenerator') || 'Edit in Generator')
+                          : (t('packages.openInGenerator') || 'Open in Generator')}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              `)}
+            </div>
+          `}
+
+          ${remoteTemplates.length > 0 && html`
+            <div class="pkg-section-header pkg-remote-header">
+              <h3>${t('packages.federation.remoteTemplates') || 'Remote Templates'}</h3>
+              ${isOperator && html`
+                <button class="btn-outline" onClick=${handleSyncFederation} disabled=${syncing}>
+                  ${syncing
+                    ? (t('dashboard.loading') || 'Loading...')
+                    : (t('packages.federation.syncFromFederation') || 'Sync from Federation')}
+                </button>
+              `}
+            </div>
+            <div class="pkg-grid">
+              ${remoteTemplates.map(rt => html`
+                <div class="pkg-card" key=${rt.id || rt.title}>
+                  <div class="pkg-card-header">
+                    <span class="pkg-card-name">${escHtml(rt.title || rt.name || '')}</span>
+                    <span class="pkg-tag">${escHtml(rt.sourceNode || t('packages.federation.sourceNode') || 'Remote')}</span>
+                  </div>
+                  <div class="pkg-card-desc">${escHtml(rt.description || '')}</div>
+                  <div class="pkg-card-meta">
+                    ${rt.author ? html`<span>${t('packages.by') || 'by'} ${escHtml(rt.author)}</span>` : null}
+                    ${rt.category ? html`<span>\u00B7 ${escHtml(rt.category)}</span>` : null}
+                    ${rt.installCount != null ? html`<span>\u00B7 ${rt.installCount} ${t('packages.installs') || 'installs'}</span>` : null}
+                  </div>
+                  <div class="pkg-card-footer">
+                    <div class="pkg-card-actions">
+                      ${rt.packageGroupId ? html`
+                        <button class="primary" onClick=${() => handleInstall(rt.packageGroupId)}>
+                          ${t('packages.federation.installFromRemote') || 'Install'}
+                        </button>
+                        <button onClick=${() => handleDownloadZip(rt.packageGroupId, rt.title || rt.name)}>
+                          ${t('packages.downloadZip') || 'Download ZIP'}
+                        </button>
+                      ` : null}
+                    </div>
+                  </div>
+                </div>
+              `)}
+            </div>
+          `}
+        </div>
+      `}
+      <${ConfirmUI} />
+    </div>
+  `;
+}

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

@@ -0,0 +1,31 @@
+/**
+ * @file portfolio-tab.js
+ * @description Profile tab providing navigation to the portfolio builder and public view.
+ * @version-history
+ *   v1.0.0 — 2026-03-16 — Initial portfolio tab
+ *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+
+export default function PortfolioTab({ session, navigate }) {
+  return html`
+    <div class="tab-content">
+      <div class="portfolio-center">
+        <h3>${t('portfolio.builder.heading')}</h3>
+        <p class="portfolio-subtitle">${t('portfolio.builder.subtitle')}</p>
+        <button class="btn-primary" onClick=${() => navigate('/v1/portfolio')}>
+          ${t('portfolio.builder.heading')}
+        </button>
+        <br/><br/>
+        ${session && html`
+          <a href="/v1/portfolio/${encodeURIComponent(session.owner)}" class="btn-ghost" target="_blank">
+            ${t('portfolio.builder.viewPublic')}
+          </a>
+        `}
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,219 @@
+/**
+ * @file security-tab.js
+ * @description Profile tab for CORS origin management (GHII + per-agent) and session revocation.
+ * @version-history
+ *   v1.0.0 — 2026-03-17 — Refactor: replace inline styles with CSS utility classes (card-h3, flex-between, etc.)
+ */
+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 { escHtml } from '/js/utils.js';
+import { Spinner } from './shared.js';
+import { useConfirm } from '/components/Modal.js';
+import * as securityService from '/js/services/security.js';
+import { listAgents } from '/js/services/agents.js';
+
+export default function SecurityTab({ session, showToast }) {
+  const { confirm, ConfirmUI } = useConfirm();
+  const [securityData, setSecurityData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [corsEditGhii, setCorsEditGhii] = useState(null);
+  const [corsEditAgent, setCorsEditAgent] = useState(null);
+  const [revoking, setRevoking] = useState(false);
+  const [sessions, setSessions] = useState([]);
+  const [revokingId, setRevokingId] = useState(null);
+
+  useEffect(() => {
+    if (session) loadData();
+  }, [session]);
+
+  async function loadData() {
+    setLoading(true);
+    try {
+      const [agents, sessionsList] = await Promise.all([
+        listAgents(session.owner),
+        securityService.listSessions(),
+      ]);
+      const result = await securityService.loadAll(agents);
+      setSecurityData(result);
+      setSessions(sessionsList);
+    } catch { setSecurityData({ ghii: {}, agents: [] }); }
+    setLoading(false);
+  }
+
+  async function saveGhiiCors(originsText) {
+    const origins = originsText.trim()
+      ? originsText.split(/[,\n]/).map(o => o.trim()).filter(Boolean)
+      : null;
+    try {
+      const resp = await securityService.setGhiiCors(origins);
+      if (resp.ok === false) throw new Error(resp.error?.message || 'Save failed');
+      showToast(t('profile.security.saved'));
+      setCorsEditGhii(null);
+      loadData();
+    } catch(e) { showToast(e.message || t('profile.error'), true); }
+  }
+
+  async function saveAgentCors(agentName, originsText) {
+    const origins = originsText.trim()
+      ? originsText.split(/[,\n]/).map(o => o.trim()).filter(Boolean)
+      : null;
+    try {
+      const resp = await securityService.setAgentCors(agentName, origins);
+      if (resp.ok === false) throw new Error(resp.error?.message || 'Save failed');
+      showToast(t('profile.security.saved'));
+      setCorsEditAgent(null);
+      loadData();
+    } catch(e) { showToast(e.message || t('profile.error'), true); }
+  }
+
+  async function handleRevokeAll() {
+    confirm(t('profile.security.revokeConfirm') || 'Are you sure you want to revoke all active sessions? You will be logged out.', async () => {
+      setRevoking(true);
+      try {
+        const data = await securityService.revokeAllSessions();
+        if (data.ok !== false) {
+          showToast((t('profile.security.sessionsRevoked') || 'All sessions revoked') + ` (${data.data?.revoked ?? 0})`);
+          setTimeout(() => { localStorage.removeItem('aimeat_session'); location.reload(); }, 1500);
+        } else {
+          showToast(data.error?.message || 'Failed to revoke sessions', true);
+        }
+      } catch(e) { showToast(e.message || 'Error', true); }
+      setRevoking(false);
+    }, { danger: true });
+  }
+
+  if (loading || !securityData) return html`<${Spinner} text=${t('profile.security.loading')} />`;
+
+  const ghii = securityData.ghii || {};
+  const agentsCors = securityData.agents || [];
+  const isInherited = ghii.inherited !== false;
+  const effectiveOrigins = ghii.effective || [];
+
+  return html`
+    <div class="section-title">\u{1F512} ${t('profile.security.title')}</div>
+    <div class="section-desc">${t('profile.security.desc')}</div>
+
+    <h3 class="card-h3 mt-section">${t('profile.security.ghiiTitle')}</h3>
+    <p class="text-caption mb-1">${t('profile.security.ghiiDesc')}</p>
+    <div class="card">
+      <div class="flex-between mb-half">
+        <span class="pf-bold">${t('profile.security.allowedOrigins')}</span>
+        <span class="badge ${isInherited ? 'badge-muted' : 'badge-success'}">${isInherited ? t('profile.security.inherited') : t('profile.security.custom')}</span>
+      </div>
+      <div class="text-caption mb-half">
+        ${t('profile.security.effective')}: ${effectiveOrigins.includes('*') ? t('profile.security.wildcard') : effectiveOrigins.join(', ') || '-'}
+      </div>
+      ${corsEditGhii !== null ? html`
+        <textarea class="input-field text-code mb-half"
+          placeholder=${t('profile.security.originsPlaceholder')}
+          value=${corsEditGhii}
+          onInput=${e => setCorsEditGhii(e.target.value)}></textarea>
+        <div class="flex-row">
+          <button class="btn-primary" onClick=${() => saveGhiiCors(corsEditGhii)}>${t('profile.security.save')}</button>
+          <button class="btn-danger-solid" onClick=${() => saveGhiiCors('')}>${t('profile.security.reset')}</button>
+          <button class="btn-ghost" onClick=${() => setCorsEditGhii(null)}>${t('profile.cancel')}</button>
+        </div>
+      ` : html`
+        <button class="btn-outline" onClick=${() => setCorsEditGhii(ghii.allowed_origins ? ghii.allowed_origins.join('\\n') : '')}>${t('profile.security.edit')}</button>
+      `}
+    </div>
+
+    <h3 class="card-h3 mt-section">${t('profile.security.agentsTitle')}</h3>
+    <p class="text-caption mb-1">${t('profile.security.agentsDesc')}</p>
+    ${agentsCors.length === 0
+      ? html`<div class="empty">${t('profile.security.noAgents')}</div>`
+      : html`<div class="card scroll-x">
+          <table class="consent-table"><thead><tr>
+            <th>${t('profile.security.agent')}</th>
+            <th>${t('profile.security.origins')}</th>
+            <th>${t('profile.security.status')}</th>
+            <th></th>
+          </tr></thead><tbody>
+            ${agentsCors.map(ac => {
+              const agentName = (ac.gaii || '').split('#')[0] || ac.gaii;
+              const hasCustom = ac.allowed_origins !== null && ac.allowed_origins !== undefined;
+              const isEditing = corsEditAgent && corsEditAgent.name === agentName;
+              return html`<tr>
+                <td><span class="text-code text-accent">${escHtml(agentName)}</span></td>
+                <td class="text-meta">${isEditing
+                  ? html`<textarea class="input-field text-code pf-textarea-sm"
+                      value=${corsEditAgent.value}
+                      onInput=${e => setCorsEditAgent({name: agentName, value: e.target.value})}></textarea>`
+                  : html`${hasCustom ? (ac.allowed_origins || []).join(', ') : (ac.effective || []).join(', ')}`
+                }</td>
+                <td>${hasCustom
+                  ? html`<span class="badge badge-success">${t('profile.security.custom')}</span>`
+                  : html`<span class="badge badge-muted">${t('profile.security.inheritedFrom')}: ${ac.inherited_from || t('profile.security.nodeDefault')}</span>`
+                }</td>
+                <td>${isEditing
+                  ? html`<div class="flex-row">
+                      <button class="btn-primary btn-sm" onClick=${() => saveAgentCors(agentName, corsEditAgent.value)}>${t('profile.security.save')}</button>
+                      <button class="btn-danger-solid btn-sm" onClick=${() => saveAgentCors(agentName, '')}>${t('profile.security.reset')}</button>
+                      <button class="btn-ghost btn-sm" onClick=${() => setCorsEditAgent(null)}>${t('profile.cancel')}</button>
+                    </div>`
+                  : html`<button class="btn-outline" onClick=${() => setCorsEditAgent({name: agentName, value: hasCustom ? (ac.allowed_origins || []).join('\\n') : ''})}>${t('profile.security.edit')}</button>`
+                }</td>
+              </tr>`;
+            })}
+          </tbody></table>
+        </div>`
+    }
+
+    <h3 class="card-h3 mt-section">${t('profile.security.inheritanceTitle')}</h3>
+    <div class="card">
+      <p class="text-caption">${t('profile.security.inheritanceDesc')}</p>
+      <div class="text-code text-meta text-accent mt-xs">
+        Memory key \u2192 Agent \u2192 GHII (your account) \u2192 Node default
+      </div>
+    </div>
+
+    <h3 class="card-h3 mt-section">${t('profile.security.sessions')}</h3>
+    <p class="text-caption mb-1">${t('profile.security.sessionsHint')}</p>
+
+    ${sessions.length === 0
+      ? html`<div class="empty">${t('profile.security.noSessions')}</div>`
+      : html`<div class="card scroll-x">
+          <table class="consent-table"><thead><tr>
+            <th>${t('profile.security.sessionIdentity')}</th>
+            <th>${t('profile.security.sessionIssuedAt')}</th>
+            <th>${t('profile.security.sessionExpiresAt')}</th>
+            <th></th>
+          </tr></thead><tbody>
+            ${sessions.map(s => html`<tr>
+              <td>
+                <span class="text-code">${escHtml(s.gaii || session.owner)}</span>
+                ${s.current ? html` <span class="badge badge-success">${t('profile.security.currentSession')}</span>` : null}
+              </td>
+              <td class="text-meta">${new Date(s.issued_at).toLocaleString()}</td>
+              <td class="text-meta">${new Date(s.expires_at).toLocaleString()}</td>
+              <td>${s.current ? null : html`
+                <button class="btn-danger-solid btn-sm" disabled=${revokingId === s.session_id}
+                  onClick=${async () => {
+                    setRevokingId(s.session_id);
+                    try {
+                      await securityService.revokeSession(s.session_id);
+                      showToast(t('profile.security.sessionRevoked'));
+                      setSessions(prev => prev.filter(x => x.session_id !== s.session_id));
+                    } catch(e) { showToast(e.message || 'Error', true); }
+                    setRevokingId(null);
+                  }}>
+                  ${revokingId === s.session_id ? '...' : t('profile.security.revoke')}
+                </button>
+              `}</td>
+            </tr>`)}
+          </tbody></table>
+        </div>`
+    }
+
+    <div class="card mt-1">
+      <p class="text-caption mb-half">${t('profile.security.sessionsDesc')}</p>
+      <button class="btn-danger-solid" onClick=${handleRevokeAll} disabled=${revoking}>
+        ${revoking ? t('profile.security.revoking') : t('profile.security.revokeAll')}
+      </button>
+    </div>
+    <${ConfirmUI} />
+  `;
+}