aimeat 1.16.2 → 1.18.0

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

@@ -24,7 +24,7 @@ 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 } from '/js/utils.js';
+import { escHtml, copyToClipboard } from '/js/utils.js';
 import { apiGet, apiPost, apiDelete } from '/js/api.js';
 import { listConsents, grantConsent, revokeConsent } from '/js/services/consent.js';
 import { Spinner } from './shared.js';
@@ -63,9 +63,9 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
   const nodeUrl = window.location.origin;
   const nodeId = session?.nodeId || '';
 
-  const loadPackages = useCallback(async () => {
+  const loadPackages = useCallback(async ({ showSpinner = true } = {}) => {
     try {
-      setLoading(true);
+      if (showSpinner) setLoading(true);
       const list = await knowledgeService.listMyPackages();
       const hydrated = await Promise.all(list.map(async (pkg) => {
         if (pkg.value) return pkg;
@@ -76,7 +76,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
       }));
       setPackages(hydrated);
       onStats?.({ knowledge: hydrated.length });
-    } catch { setPackages([]); }
+    } catch { if (showSpinner) setPackages([]); } // keep old list on a transient live-update refetch
     finally { setLoading(false); }
   }, [onStats]);
 
@@ -133,7 +133,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
   const loadRef = useRef(loadPackages);
   loadRef.current = loadPackages;
   useEffect(() => {
-    const handler = () => { loadRef.current(); loadFedConsents(); };
+    const handler = () => { loadRef.current({ showSpinner: false }); loadFedConsents(); }; // silent
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, []);
@@ -178,7 +178,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
         : await knowledgeService.getAgentPrompt();
       const text = resp?.data?.prompt;
       if (text) {
-        await navigator.clipboard.writeText(text);
+        await copyToClipboard(text);
         showToast(t('knowledge.actionBar.copy' + (type === 'human' ? 'HumanPrompt' : 'AgentPrompt')) + ' \u2713');
       } else {
         showToast('Prompt template not available yet');
@@ -276,12 +276,12 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
     try {
       const resp = await knowledgeService.exportPackage(packageId);
       const json = JSON.stringify(resp?.data || manifest, null, 2);
-      await navigator.clipboard.writeText(json);
+      await copyToClipboard(json);
       showToast(t('knowledge.myKnowledge.exportCopied') || 'Package JSON copied to clipboard');
     } catch {
       // Fallback: export the manifest we already have
       try {
-        await navigator.clipboard.writeText(JSON.stringify(manifest, null, 2));
+        await copyToClipboard(JSON.stringify(manifest, null, 2));
         showToast(t('knowledge.myKnowledge.exportCopied') || 'Package JSON copied to clipboard');
       } catch {
         showToast('Failed to export package');
@@ -481,7 +481,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
           <strong>${escHtml(label)}</strong>
           ${entry.key && entry.key !== label ? html`<span class="kpkg-detail-key">${escHtml(entry.key)}</span>` : null}
         </div>
-        ${loadingEntries === pkg.key && !rawData ? html`<p class="kpkg-detail-loading">Loading...</p>` : null}
+        ${loadingEntries === pkg.key && !rawData ? html`<p class="kpkg-detail-loading">${t('common.loading')}</p>` : null}
         ${val && html`<pre class="kpkg-detail-value">${val}</pre>`}
         ${renderEntryRefs(entry.references)}
         ${renderRelatedEntries(entry.related_entries, allEntries)}
@@ -616,7 +616,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
       <!-- MY KNOWLEDGE -->
       <div class="kpkg-section">
         <h3>${t('knowledge.myKnowledge.title')}</h3>
-        ${loading && html`<${Spinner} text="Loading..." />`}
+        ${loading && html`<${Spinner} text=${t('common.loading')} />`}
         ${!loading && packages.length === 0 && html`
           <p class="kpkg-empty">${t('knowledge.myKnowledge.empty')}</p>
         `}
@@ -742,7 +742,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
       <!-- KNOWLEDGE ORGANISMS -->
       <div class="kpkg-section">
         <h3>${t('knowledge.organisms.title')}</h3>
-        ${organismLoading && html`<${Spinner} text="Loading..." />`}
+        ${organismLoading && html`<${Spinner} text=${t('common.loading')} />`}
         ${!organismLoading && organismPackages.length === 0 && html`
           <p class="kpkg-empty">${t('knowledge.organisms.empty')}</p>
         `}
@@ -762,7 +762,7 @@ export default function KnowledgeTab({ session, showToast, onStats }) {
       <!-- DISCOVER -->
       <div class="kpkg-section">
         <h3>${t('knowledge.discover.title')}</h3>
-        ${discoverLoading && html`<${Spinner} text="Loading..." />`}
+        ${discoverLoading && html`<${Spinner} text=${t('common.loading')} />`}
         ${!discoverLoading && discovered.filter(p => p.sharing?.allow_clone !== false).length === 0 && html`
           <p class="kpkg-empty">${t('knowledge.discover.empty')}</p>
         `}

package/dist/public/views/profile/landing-page.js

@@ -1,16 +1,22 @@
 /**
  * @file landing-page.js
- * @description Adaptive profile landing page with three user tier variants
- *   (new / active / experienced). Shows tier-specific dashboard content with
- *   onboarding, app strip, menu sections, and inline preview panels.
+ * @description Profile landing page. Navigation is a PERSISTENT, grouped sidebar
+ *   (every tab always visible — no activity-based hiding) plus a content column
+ *   showing either the selected tab or the home dashboard (ProfileCard +
+ *   tier-based onboarding/app-strip). On mobile the sidebar is an off-canvas
+ *   drawer. The logged-in pill + Logout live in the global shell header
+ *   (spa.html), not here. Replaced the old new/active/experienced tier-adaptive
+ *   menu, which was unpredictable for humans and agentic developers.
  * @structure
- *   - computeTier() — exported heuristic for user tier detection
+ *   - computeTier() — exported heuristic; now gates only the home onboarding content
  *   - tierLevel() — exported numeric tier comparison helper
- *   - ProfileCard, HeroOnboarding, KnowledgeCallout, KnowledgeButton,
- *     GhostTiles, CortexSection, AppStrip — section sub-components
- *   - MenuSection, MenuItem — generic menu layout components
+ *   - SIDEBAR_GROUPS — grouped, always-visible tab list
+ *   - ProfileCard, HeroOnboarding, KnowledgeCallout, GhostTiles, CortexSection,
+ *     AppStrip — home/section sub-components
  *   - LandingPage — main orchestrator (default export)
  * @version-history
+ *   v2.0.0 — 2026-06-03 — Replace tier-adaptive menu with a persistent grouped sidebar
+ *     + content column + mobile drawer; computeTier now only gates home onboarding.
  *   v1.2.0 — 2026-03-19 — Expandable AppStrip chips with launch button; remove Generator primary style
  *   v1.1.0 — 2026-03-19 — Persist open tab to localStorage across page reloads
  *   v1.0.0 — 2026-03-18 — Initial adaptive landing page implementation
@@ -503,6 +509,50 @@ function InlineView({ tabId, label, onClose, renderTab }) {
   `;
 }
 
+/* ───── Persistent sidebar groups (replaces the tier-adaptive menu) ─────
+ * Every tab is always present and grouped into stable sections — no activity-based
+ * hiding, so humans and agentic developers can predict where each tab lives.
+ * Group titles reuse existing i18n keys; tab labels reuse profile.tabs.* / *.tabLabel. */
+const SIDEBAR_GROUPS = [
+  { titleKey: 'profile.landing.menuDaily', items: [
+    { id: 'agents', icon: '\u{1F916}', labelKey: 'profile.tabs.agents', badgeStat: 'agents' },
+    { id: 'scheduler', icon: '⏰', labelKey: 'profile.tabs.scheduler' },
+    { id: 'memory', icon: '\u{1F9E0}', labelKey: 'profile.tabs.memory' },
+    { id: 'boards', icon: '\u{1F4CB}', labelKey: 'profile.tabs.boards' },
+    { id: 'knowledge', icon: '\u{1F4DA}', labelKey: 'knowledge.tabLabel' },
+    { id: 'notifications', icon: '\u{1F514}', labelKey: 'profile.tabs.notifications' },
+    { id: 'apps', icon: '⚙️', labelKey: 'profile.tabs.apps' },
+  ] },
+  { titleKey: 'profile.landing.menuBuildShare', items: [
+    { id: 'generator', icon: '\u{1F534}', labelKey: 'profile.generator.tabLabel' },
+    { id: 'foundry', icon: '\u{1F3ED}', labelKey: 'profile.foundry.tabLabel' },
+    { id: 'calibrator', icon: '\u{1F3AF}', labelKey: 'profile.calibrator.tabLabel' },
+    { id: 'extensions', icon: '\u{1F50C}', labelKey: 'profile.tabs.extensions' },
+    { id: 'capabilities', icon: '⚡', labelKey: 'capabilities.tabLabel' },
+    { id: 'portfolio', icon: '\u{1F3A8}', labelKey: 'portfolio.tabLabel' },
+    { id: 'packages', icon: '\u{1F4E6}', labelKey: 'profile.tabs.packages' },
+  ] },
+  { titleKey: 'profile.landing.menuTechnical', items: [
+    { id: 'actions', icon: '\u{1F6E0}️', labelKey: 'profile.tabs.services' },
+    { id: 'work', icon: '\u{1F4CB}', labelKey: 'profile.tabs.work' },
+    { id: 'mcp', icon: '\u{1F517}', labelKey: 'profile.tabs.mcp' },
+    { id: 'chatsessions', icon: '\u{1F4AC}', labelKey: 'profile.tabs.chatSessions' },
+  ] },
+  { titleKey: 'profile.landing.menuPersonal', items: [
+    { id: 'wallet', icon: '\u{1F48E}', labelKey: 'profile.tabs.wallet' },
+    { id: 'email', icon: '\u{1F4E7}', labelKey: 'profile.tabs.email' },
+    { id: 'access', icon: '\u{1F510}', labelKey: 'profile.tabs.access' },
+    { id: 'organisms', icon: '\u{1F3E2}', labelKey: 'profile.tabs.organisms' },
+    { id: 'dataWallet', icon: '\u{1F512}', labelKey: 'profile.tabs.dataWallet' },
+  ] },
+  { titleKey: 'profile.landing.menuInfra', items: [
+    { id: 'federation', icon: '\u{1F310}', labelKey: 'profile.tabs.federation' },
+    { id: 'nodes', icon: '\u{1F5A5}️', labelKey: 'profile.tabs.nodes' },
+    { id: 'nodeStats', icon: '\u{1F4CA}', labelKey: 'profile.tabs.nodeStats' },
+    { id: 'security', icon: '\u{1F6E1}️', labelKey: 'profile.tabs.security' },
+  ] },
+];
+
 /* ───── Main landing page ───── */
 
 export default function LandingPage({ tier, stats, session, navigate, showToast, locale, renderTab, getTabLabel }) {
@@ -520,6 +570,7 @@ export default function LandingPage({ tier, stats, session, navigate, showToast,
     return null;
   });
   const [expanded, setExpanded] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   const owner = session.owner;
 
@@ -578,11 +629,7 @@ export default function LandingPage({ tier, stats, session, navigate, showToast,
   const isExperienced = tier === 'experienced';
 
   return html`
-    <div class="pf-landing">
-
-      <${ProfileCard} tier=${tier} stats=${stats} session=${session}
-        onEditProfile=${() => setEditOpen(true)}
-        onChangePassword=${() => setPwOpen(true)} />
+    <div class="pf-shell${drawerOpen ? ' pf-shell--open' : ''}">
 
       ${editOpen && html`<${EditProfileModal}
         session=${session}
@@ -595,150 +642,54 @@ export default function LandingPage({ tier, stats, session, navigate, showToast,
         onChanged=${() => { setPwOpen(false); showToast?.(t('profile.landing.passwordChanged')); }}
       />`}
 
-      ${isNew && html`
-        <${HeroOnboarding} switchTab=${(id) => open(id, 'hero')} />
-        ${viewAt('hero')}
-
-        <${KnowledgeCallout} switchTab=${() => open('knowledge', 'knowledge-new')} />
-        ${viewAt('knowledge-new')}
+      <button class="pf-mnav-toggle" onClick=${() => setDrawerOpen(o => !o)}>☰ ${t('profile.landing.menu')}</button>
+      <div class="pf-scrim" onClick=${() => setDrawerOpen(false)}></div>
 
-        <${GhostTiles} switchTab=${() => open('packages', 'ghost')} />
-        ${viewAt('ghost')}
-
-        <${CortexSection} switchTab=${() => open('extensions', 'cortex')} />
-        ${viewAt('cortex')}
-
-        <${MenuSection} title=${t('profile.landing.menuManagement')}>
-          <div class="pf-menu-grid">
-            <${MenuItem} icon="\u{1F9E0}" label=${t('profile.tabs.memory')} active=${isOpen('memory')} onClick=${() => open('memory', 'manage-new')} />
-            <${MenuItem} icon="\u{1F48E}" label=${t('profile.tabs.wallet')} active=${isOpen('wallet')} onClick=${() => open('wallet', 'manage-new')} />
-            <${MenuItem} icon="\u{1F510}" label=${t('profile.tabs.access')} active=${isOpen('access')} onClick=${() => open('access', 'manage-new')} />
-            <${MenuItem} icon="\u{1F4E7}" label=${t('profile.tabs.email')} active=${isOpen('email')} onClick=${() => open('email', 'manage-new')} />
-          </div>
-          <div class="pf-expand-trigger" onClick=${() => setExpanded(!expanded)}>
-            ${expanded ? '\u25BE' : '\u25B8'} ${t('profile.landing.expandAll')}
-          </div>
-          ${expanded && html`
-            <div class="pf-menu-grid pf-menu-grid-expanded">
-              <${MenuItem} icon="\u{1F916}" label=${t('profile.tabs.agents')} active=${isOpen('agents')} onClick=${() => open('agents', 'manage-new')} />
-              <${MenuItem} icon="\u{1F4AC}" label=${t('profile.tabs.chatSessions')} active=${isOpen('chatsessions')} onClick=${() => open('chatsessions', 'manage-new')} />
-              <${MenuItem} icon="\u{1F50C}" label=${t('profile.tabs.extensions')} active=${isOpen('extensions')} onClick=${() => open('extensions', 'manage-new')} />
-              <${MenuItem} icon="\u{1F534}" label=${t('profile.generator.tabLabel')} active=${isOpen('generator')} onClick=${() => open('generator', 'manage-new')} />
-              <${MenuItem} icon="\u{1F3ED}" label=${t('profile.foundry.tabLabel')} active=${isOpen('foundry')} onClick=${() => open('foundry', 'manage-new')} />
-              <${MenuItem} icon="\u{1F3AF}" label=${t('profile.calibrator.tabLabel')} active=${isOpen('calibrator')} onClick=${() => open('calibrator', 'manage-new')} />
-              <${MenuItem} icon="\u{1F4E6}" label=${t('profile.tabs.packages')} active=${isOpen('packages')} onClick=${() => open('packages', 'manage-new')} />
-              <${MenuItem} icon="\u{1F4DA}" label=${t('knowledge.tabLabel')} active=${isOpen('knowledge')} onClick=${() => open('knowledge', 'manage-new')} />
-              <${MenuItem} icon="\u{1F4CB}" label=${t('profile.tabs.boards')} active=${isOpen('boards')} onClick=${() => open('boards', 'manage-new')} />
-              <${MenuItem} icon="\u{1F3A8}" label=${t('portfolio.tabLabel')} active=${isOpen('portfolio')} onClick=${() => open('portfolio', 'manage-new')} />
-              <${MenuItem} icon="\u{1F6E0}\uFE0F" label=${t('profile.tabs.services')} active=${isOpen('actions')} onClick=${() => open('actions', 'manage-new')} />
-              <${MenuItem} icon="\u{1F4CB}" label=${t('profile.tabs.work')} active=${isOpen('work')} onClick=${() => open('work', 'manage-new')} />
-              <${MenuItem} icon="\u{1F3E2}" label=${t('profile.tabs.organisms')} active=${isOpen('organisms')} onClick=${() => open('organisms', 'manage-new')} />
-              <${MenuItem} icon="\u{1F512}" label=${t('profile.tabs.dataWallet')} active=${isOpen('dataWallet')} onClick=${() => open('dataWallet', 'manage-new')} />
-              <${MenuItem} icon="\u{1F514}" label=${t('profile.tabs.notifications')} active=${isOpen('notifications')} onClick=${() => open('notifications', 'manage-new')} />
-              <${MenuItem} icon="\u{1F512}" label=${t('profile.tabs.security')} active=${isOpen('security')} onClick=${() => open('security', 'manage-new')} />
-              <${MenuItem} icon="⚡" label=${t('capabilities.tabLabel')} active=${isOpen('capabilities')} onClick=${() => open('capabilities', 'manage-new')} />
-            </div>
-          `}
-        <//>
-        ${viewAt('manage-new')}
-      `}
+      <aside class="pf-sidebar">
+        <div class="pf-side-identity">
+          <div class="pf-side-avatar"></div>
+          <div class="pf-side-id-name">${session.displayName || owner}</div>
+        </div>
 
-      ${(isActive || isExperienced) && html`
-        <${AppStrip} apps=${apps} switchTab=${(id) => open(id, 'apps')} />
-        ${viewAt('apps')}
-
-        <${MenuSection} title=${t('profile.landing.menuDaily')}>
-          <div class="pf-menu-grid">
-            <${MenuItem} icon="\u{1F4E6}" label=${t('profile.landing.packagesExt')} active=${isOpen('packages')} onClick=${() => open('packages', 'daily')} />
-            <${MenuItem} icon="\u{1F514}" label=${t('profile.landing.notificationsBadge')} active=${isOpen('notifications')} onClick=${() => open('notifications', 'daily')} />
-            <${MenuItem} icon="\u{1F916}" label=${t('profile.tabs.agents')}
-              badge=${typeof stats.agents === 'number' ? stats.agents : 0} badgeMuted
-              active=${isOpen('agents')} onClick=${() => open('agents', 'daily')} />
-            <${MenuItem} icon="\u{1F9E0}" label=${t('profile.tabs.memory')} active=${isOpen('memory')} onClick=${() => open('memory', 'daily')} />
-            <${MenuItem} icon="\u{1F4CB}" label=${t('profile.tabs.boards')} active=${isOpen('boards')} onClick=${() => open('boards', 'daily')} />
-            <${MenuItem} icon="\u{1F4DA}" label=${t('knowledge.tabLabel')} active=${isOpen('knowledge')} onClick=${() => open('knowledge', 'daily')} />
+        <button class="pf-side-item${!openView ? ' pf-side-item--active' : ''}"
+          onClick=${() => { close(); setDrawerOpen(false); }}>
+          <span class="pf-side-ico">\u{1F3E0}</span><span class="pf-side-label">${t('profile.landing.home')}</span>
+        </button>
+
+        ${SIDEBAR_GROUPS.map(g => html`
+          <div class="pf-side-group">
+            <div class="pf-side-group-title">${t(g.titleKey)}</div>
+            ${g.items.map(it => html`
+              <button class="pf-side-item${isOpen(it.id) ? ' pf-side-item--active' : ''}"
+                onClick=${() => { open(it.id, 'main'); setDrawerOpen(false); }}>
+                <span class="pf-side-ico">${it.icon}</span>
+                <span class="pf-side-label">${t(it.labelKey)}</span>
+                ${it.badgeStat && typeof stats?.[it.badgeStat] === 'number' && stats[it.badgeStat] > 0
+                  ? html`<span class="pf-side-badge">${stats[it.badgeStat]}</span>` : null}
+              </button>
+            `)}
           </div>
-        <//>
-        ${viewAt('daily')}
-
-        ${isActive && html`
-          <${KnowledgeButton} switchTab=${() => open('knowledge', 'knowledge-btn')} />
-          ${viewAt('knowledge-btn')}
-        `}
+        `)}
+      </aside>
 
-        <${MenuSection} title=${t('profile.landing.menuBuildShare')}>
-          <div class="pf-menu-grid">
-            <${MenuItem} icon="\u{1F534}" label=${t('profile.generator.tabLabel')} active=${isOpen('generator')} onClick=${() => open('generator', 'build')} />
-            <${MenuItem} icon="\u{1F3ED}" label=${t('profile.foundry.tabLabel')} active=${isOpen('foundry')} onClick=${() => open('foundry', 'build')} />
-            <${MenuItem} icon="\u{1F3AF}" label=${t('profile.calibrator.tabLabel')} active=${isOpen('calibrator')} onClick=${() => open('calibrator', 'build')} />
-            <${MenuItem} icon="\u{1F50C}" label=${t('profile.tabs.extensions')} active=${isOpen('extensions')} onClick=${() => open('extensions', 'build')} />
-            <${MenuItem} icon="⚡" label=${t('capabilities.tabLabel')} active=${isOpen('capabilities')} onClick=${() => open('capabilities', 'build')} />
-            <${MenuItem} icon="\u{1F3A8}" label=${t('portfolio.tabLabel')} active=${isOpen('portfolio')} onClick=${() => open('portfolio', 'build')} />
-            ${isExperienced && html`
-              <${MenuItem} icon="\u{1F4E4}" label=${t('profile.landing.ownPackages')} active=${isOpen('packages')} onClick=${() => open('packages', 'build')} />
-            `}
+      <main class="pf-content">
+        ${openView ? html`
+          <div class="pf-content-head">
+            <button class="pf-back-btn" onClick=${close}>← ${t('profile.landing.home')}</button>
+            <span class="pf-back-current">${getTabLabel(openView.tabId)}</span>
           </div>
-        <//>
-        ${viewAt('build')}
-
-        ${isExperienced ? html`
-          <${MenuSection} title=${t('profile.landing.menuManagement')}>
-            <div class="pf-menu-subgroup">
-              <div class="pf-menu-subgroup-title">${t('profile.landing.menuTechnical')}</div>
-              <div class="pf-menu-grid">
-                <${MenuItem} icon="\u2699\uFE0F" label=${t('profile.tabs.apps')} active=${isOpen('apps')} onClick=${() => open('apps', 'manage')} />
-                <${MenuItem} icon="\u{1F517}" label=${t('profile.tabs.mcp')} active=${isOpen('mcp')} onClick=${() => open('mcp', 'manage')} />
-                <${MenuItem} icon="\u{1F6E0}\uFE0F" label=${t('profile.tabs.services')} active=${isOpen('actions')} onClick=${() => open('actions', 'manage')} />
-                <${MenuItem} icon="\u{1F4CB}" label=${t('profile.tabs.work')} active=${isOpen('work')} onClick=${() => open('work', 'manage')} />
-                <${MenuItem} icon="\u{1F4AC}" label=${t('profile.tabs.chatSessions')} active=${isOpen('chatsessions')} onClick=${() => open('chatsessions', 'manage')} />
-              </div>
-            </div>
-            <div class="pf-menu-subgroup">
-              <div class="pf-menu-subgroup-title">${t('profile.landing.menuPersonal')}</div>
-              <div class="pf-menu-grid">
-                <${MenuItem} icon="\u{1F48E}" label=${t('profile.tabs.wallet')} active=${isOpen('wallet')} onClick=${() => open('wallet', 'manage')} />
-                <${MenuItem} icon="\u{1F4E7}" label=${t('profile.tabs.email')} active=${isOpen('email')} onClick=${() => open('email', 'manage')} />
-                <${MenuItem} icon="\u{1F510}" label=${t('profile.tabs.access')} active=${isOpen('access')} onClick=${() => open('access', 'manage')} />
-                <${MenuItem} icon="\u{1F3E2}" label=${t('profile.tabs.organisms')} active=${isOpen('organisms')} onClick=${() => open('organisms', 'manage')} />
-              </div>
-            </div>
-          <//>
-          ${viewAt('manage')}
-
-          <${MenuSection} title=${t('profile.landing.menuInfra')} annotation=${t('profile.landing.menuInfraAnnotation')}>
-            <div class="pf-menu-grid">
-              <${MenuItem} icon="\u{1F310}" label=${t('profile.tabs.federation')} indigo active=${isOpen('federation')} onClick=${() => open('federation', 'infra')} />
-              <${MenuItem} icon="\u{1F5A5}\uFE0F" label=${t('profile.tabs.nodes')} active=${isOpen('nodes')} onClick=${() => open('nodes', 'infra')} />
-              <${MenuItem} icon="\u{1F4CA}" label=${t('profile.tabs.nodeStats')} active=${isOpen('nodeStats')} onClick=${() => open('nodeStats', 'infra')} />
-              <${MenuItem} icon="\u{1F512}" label=${t('profile.tabs.security')} active=${isOpen('security')} onClick=${() => open('security', 'infra')} />
-            </div>
-          <//>
-          ${viewAt('infra')}
+          <div class="pf-content-body">${renderTab(openView.tabId)}</div>
         ` : html`
-          <${MenuSection} title=${t('profile.landing.menuManagement')}>
-            <div class="pf-menu-grid">
-              <${MenuItem} icon="\u2699\uFE0F" label=${t('profile.tabs.apps')} active=${isOpen('apps')} onClick=${() => open('apps', 'manage')} />
-              <${MenuItem} icon="\u{1F517}" label=${t('profile.tabs.mcp')} active=${isOpen('mcp')} onClick=${() => open('mcp', 'manage')} />
-              <${MenuItem} icon="\u{1F48E}" label=${t('profile.tabs.wallet')} active=${isOpen('wallet')} onClick=${() => open('wallet', 'manage')} />
-              <${MenuItem} icon="\u{1F4E7}" label=${t('profile.tabs.email')} active=${isOpen('email')} onClick=${() => open('email', 'manage')} />
-              <${MenuItem} icon="\u{1F510}" label=${t('profile.tabs.access')} active=${isOpen('access')} onClick=${() => open('access', 'manage')} />
-            </div>
-            <div class="pf-expand-trigger" onClick=${() => setExpanded(!expanded)}>
-              ${expanded ? '\u25BE' : '\u25B8'} ${t('profile.landing.expandMore')}
-            </div>
-            ${expanded && html`
-              <div class="pf-menu-grid pf-menu-grid-expanded">
-                <${MenuItem} icon="\u{1F6E0}\uFE0F" label=${t('profile.tabs.services')} active=${isOpen('actions')} onClick=${() => open('actions', 'manage')} />
-                <${MenuItem} icon="\u{1F4CB}" label=${t('profile.tabs.work')} active=${isOpen('work')} onClick=${() => open('work', 'manage')} />
-                <${MenuItem} icon="\u{1F4AC}" label=${t('profile.tabs.chatSessions')} active=${isOpen('chatsessions')} onClick=${() => open('chatsessions', 'manage')} />
-                <${MenuItem} icon="\u{1F512}" label=${t('profile.tabs.dataWallet')} active=${isOpen('dataWallet')} onClick=${() => open('dataWallet', 'manage')} />
-                <${MenuItem} icon="\u{1F3E2}" label=${t('profile.tabs.organisms')} active=${isOpen('organisms')} onClick=${() => open('organisms', 'manage')} />
-              </div>
-            `}
-          <//>
-          ${viewAt('manage')}
+          <${ProfileCard} tier=${tier} stats=${stats} session=${session}
+            onEditProfile=${() => setEditOpen(true)}
+            onChangePassword=${() => setPwOpen(true)} />
+          ${isNew ? html`<${HeroOnboarding} switchTab=${(id) => open(id, 'main')} />` : null}
+          ${(isNew || isActive) ? html`<${KnowledgeCallout} switchTab=${() => open('knowledge', 'main')} />` : null}
+          ${isNew ? html`<${GhostTiles} switchTab=${() => open('packages', 'main')} />` : null}
+          <${CortexSection} switchTab=${() => open('extensions', 'main')} />
+          <${AppStrip} apps=${apps} switchTab=${(id) => open(id, 'main')} />
         `}
-      `}
+      </main>
     </div>
   `;
 }

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

@@ -7,6 +7,10 @@
  *   v1.1.0 — 2026-03-18 — Fix: use AuthImage for thumbnails and authenticated download to avoid 401
  *   v1.2.0 — 2026-05-22 — Add Browse Home / Browse Remote panels for federation memory sync
  *   v1.3.0 — 2026-05-22 — Add timestamps, sort controls, fix group picker rotation bug
+ *   v1.4.0 — 2026-06-02 — Component unification (#2): edit modal uses the canonical
+ *     <Modal> component (Escape/backdrop close + header ✕).
+ *   v1.5.0 — 2026-06-02 — Component unification (#1): "Copy URLs" button uses canonical
+ *     <CopyButton> (toast preserved via onCopied).
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
@@ -24,7 +28,8 @@ import { getNodeUrl } from '/js/services/auth.js';
 import { listGroups } from '/js/services/sharing-groups.js';
 import TagCloud from '/js/components/tag-cloud.js';
 import TagEditor from '/js/components/tag-editor.js';
-import { useConfirm } from '/components/Modal.js';
+import { Modal, useConfirm } from '/components/Modal.js';
+import { CopyButton } from '/components/CopyButton.js';
 
 export default function MemoryTab({ session, showToast, onStats }) {
   const { confirm, ConfirmUI } = useConfirm();
@@ -490,15 +495,17 @@ export default function MemoryTab({ session, showToast, onStats }) {
       });
     };
 
-    const copyFileUrls = () => {
-      const urls = filtered.map(f => `${NODE_URL}/v1/memory/files/${encodeURIComponent(f.key || f.name)}`).join('\n');
-      navigator.clipboard.writeText(urls).then(() => showToast(t('profile.files.urlsCopied') || `${filtered.length} URLs copied`));
-    };
+    const fileUrls = filtered.map(f => `${NODE_URL}/v1/memory/files/${encodeURIComponent(f.key || f.name)}`).join('\n');
 
     return html`
       <div class="action-bar">
         <button class="btn-primary" onClick=${() => setShowFileForm(!showFileForm)}>${t('profile.files.uploadBtn')}</button>
-        ${filtered.length > 0 && html`<button class="btn-outline btn-sm" onClick=${copyFileUrls} title="Copy file URLs">\u{1F4CB} ${t('profile.files.copyUrls') || 'Copy URLs'} (${filtered.length})</button>`}
+        ${filtered.length > 0 && html`<${CopyButton}
+          text=${fileUrls}
+          label=${`\u{1F4CB} ${t('profile.files.copyUrls') || 'Copy URLs'} (${filtered.length})`}
+          title="Copy file URLs"
+          className="btn-outline btn-sm"
+          onCopied=${() => showToast(t('profile.files.urlsCopied') || `${filtered.length} URLs copied`)} />`}
         <span class="text-meta-sm">${t('profile.files.sizeLimit')}</span>
       </div>
       <${TagCloud} tags=${[...allTags]} selected=${fileTagFilter} onToggle=${toggleTag} onClear=${() => setFileTagFilter(new Set())} />
@@ -1081,9 +1088,7 @@ function EditMemoryModal({ memKey, initialValue, initialVisibility, initialVersi
     }
   };
   return html`
-    <div class="modal-overlay" onClick=${e => { if (e.target.className.includes('modal-overlay')) onCancel(); }}>
-      <div class="modal">
-        <h3>${t('profile.memory.editTitle')}: ${escHtml(memKey)}</h3>
+    <${Modal} open=${true} onClose=${onCancel} title=${`${t('profile.memory.editTitle')}: ${memKey}`}>
         <div class="form-row flex-row mb-half">
           <label class="pf-label-inline">${t('profile.memory.visLabel')}</label>
           <button class="kpkg-vis-pill"
@@ -1111,6 +1116,5 @@ function EditMemoryModal({ memKey, initialValue, initialVisibility, initialVersi
           <button class="btn-primary" onClick=${() => onSave(value, vis, initialVersion, vis === 'group' ? groupId : undefined)}>${t('profile.save')}</button>
           <button class="btn-outline" onClick=${onCancel}>${t('profile.cancel')}</button>
         </div>
-      </div>
-    </div>`;
+    <//>`;
 }

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

@@ -30,9 +30,9 @@ function fmtBytes(b) {
 }
 
 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>
+  return html`<div class="stat-card">
+    <div class="stat-card-value" style=${`color:${color}`}>${value}</div>
+    <div class="stat-card-label">${label}</div>
   </div>`;
 }
 

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

@@ -5,14 +5,21 @@
  * @version-history
  *   v1.0.0 — 2026-03-16 — Initial nodes tab
  *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes
+ *   v1.2.0 — 2026-06-02 — Component unification (#1): tunnel-URL copy button uses
+ *     canonical <CopyButton> (toast preserved via onCopied).
+ *   v1.3.0 — 2026-06-02 — Component unification (#11): node status dot uses
+ *     canonical <StatusDot> (online/offline/degraded/detached) instead of the
+ *     bespoke 10px .pn-status-dot (now 8px, with title tooltip added).
  */
 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 { escHtml, timeAgo } from '/js/utils.js';
 import { Spinner } from './shared.js';
+import { CopyButton } from '/components/CopyButton.js';
+import { StatusDot } from '/components/StatusDot.js';
 import { useConfirm } from '/components/Modal.js';
 import * as nodesService from '/js/services/nodes.js';
 import { getNodeUrl } from '/js/services/auth.js';
@@ -99,7 +106,7 @@ export default function NodesTab({ session, showToast, onStats }) {
                 setExpandedNodes(s);
               }}>
                 <div class="pn-header-left">
-                  <div class="pn-status-dot ${statusClass}"></div>
+                  <${StatusDot} status=${statusClass} title=${statusLabel} />
                   <span class="pn-name">${escHtml(node.node_id)}</span>
                 </div>
                 <div class="pn-badges">
@@ -117,7 +124,7 @@ export default function NodesTab({ session, showToast, onStats }) {
                     <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>
+                      <${CopyButton} text=${tunnelUrl} label=${t('profile.nodes.copyUrl')} className="pn-copy-btn" onCopied=${() => showToast(t('profile.nodes.copied'))} />
                     </span>
                   </div>
                   <div class="pn-padding-half">

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

@@ -27,13 +27,13 @@ export default function NotificationsTab({ session, showToast }) {
 
   // Re-check email verification when other tabs update data (e.g. email confirmed)
   useEffect(() => {
-    const handler = () => { if (session) checkSubscription(); };
+    const handler = () => { if (session) checkSubscription({ showSpinner: false }); }; // silent
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, [session]);
 
-  async function checkSubscription() {
-    setLoading(true);
+  async function checkSubscription({ showSpinner = true } = {}) {
+    if (showSpinner) setLoading(true);
     try {
       // Get VAPID key
       const vapidRes = await apiGet('/v1/push/vapid-key');