aimeat 1.40.0 → 2.0.0

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

@@ -17,18 +17,23 @@
  *   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
  *   v1.5.0 — 2026-05-05 — add intro section, i18n for categories/featured, fix status badge label
+ *   v1.6.0 — 2026-07-16 — Mount folds the 3 LOCAL reads (instances + packages + templates) into ONE
+ *     GET /v1/packages/tab (PackagesTabService); the cross-node federation-templates call stays separate.
+ *     Falls back to the individual reads if the composite is unavailable. (Phase 4 slice 6 — frontend.)
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback } from 'preact/hooks';
 import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
+import { EmptyState } from '/components/EmptyState.js';
+import { StatusDot } from '/components/StatusDot.js';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml, copyToClipboard } 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';
+import { apiGet } from '/js/api.js';
 
 // ─── InstanceCard ───────────────────────────────────────────────────────────
 // Expanded card for one installed package instance: shows every component's
@@ -128,7 +133,7 @@ function InstanceCard({ inst, session, onCheckUpdate, onRemove, navigate }) {
               <span class="pkg-comp-id">${escHtml(c.componentId)}</span>
               <span class="pkg-comp-type">${c.type}</span>
               <span class="pkg-comp-status">
-                <span class="pkg-dot pkg-dot-active" title=${t('packages.statusActive') || 'Active'}></span>
+                <${StatusDot} status="active" title=${t('packages.statusActive') || 'Active'} />
                 ${c.customized ? html`<span class="pkg-comp-customized" title=${t('packages.customizedHint') || 'Customized after install'}>✏</span>` : ''}
               </span>
               <span class="pkg-comp-actions">${actionsFor(c)}</span>
@@ -161,14 +166,24 @@ export default function PackagesTab({ session, showToast, navigate }) {
   const loadData = useCallback(async ({ showSpinner = true } = {}) => {
     if (showSpinner) setLoading(true);
     try {
-      const [instRes, pkgRes, tplRes] = await Promise.all([
-        pkgService.listInstances({ status: 'installed' }),
-        pkgService.listPackages({ 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 ?? []);
+      // Mount: ONE composite (GET /v1/packages/tab) seeds the three LOCAL sections (installed instances +
+      // owner's packages + newest templates). Falls back to the three individual reads on failure. The
+      // cross-node federation-templates call below stays separate (best-effort outbound).
+      const ov = await apiGet('/v1/packages/tab').then(r => r?.data).catch(() => null);
+      if (ov) {
+        setInstances(ov.instances?.instances ?? []);
+        setPackages(ov.packages?.packages ?? []);
+        setTemplates(ov.templates?.templates ?? []);
+      } else {
+        const [instRes, pkgRes, tplRes] = await Promise.all([
+          pkgService.listInstances({ status: 'installed' }),
+          pkgService.listPackages({ 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 });
@@ -240,21 +255,6 @@ export default function PackagesTab({ session, showToast, navigate }) {
     }
   };
 
-  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 {
-      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 {
@@ -389,7 +389,7 @@ export default function PackagesTab({ session, showToast, navigate }) {
         <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>
+            <${EmptyState} text=${t('packages.noInstances') || 'No packages installed yet.'} />
           ` : html`
             <div class="pkg-grid">
               ${instances.map(inst => html`
@@ -431,7 +431,7 @@ export default function PackagesTab({ session, showToast, navigate }) {
             </select>
           </div>
           ${filtered.length === 0 ? html`
-            <p class="pkg-empty">${t('packages.noPackages') || 'No packages available.'}</p>
+            <${EmptyState} text=${t('packages.noPackages') || 'No packages available.'} />
           ` : html`
             <div class="pkg-grid">
               ${filtered.map(pkg => html`
@@ -459,11 +459,6 @@ export default function PackagesTab({ session, showToast, navigate }) {
                       <button class="btn-outline btn-sm" onClick=${() => handleDownloadZip(pkg.packageGroupId, pkg.name)}>
                         ${t('packages.downloadZip') || 'Download ZIP'}
                       </button>
-                      <button class="btn-outline btn-sm" 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 btn-sm" onClick=${() => handleProposeAsTemplate(pkg.packageGroupId)}>
                           ${t('packages.proposeAsTemplate') || 'Propose as Template'}
@@ -487,7 +482,7 @@ export default function PackagesTab({ session, showToast, navigate }) {
         <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>
+            <${EmptyState} text=${t('packages.noTemplates') || 'No templates available yet.'} />
           ` : html`
             <div class="pkg-grid">
               ${templates.map(tpl => html`
@@ -510,11 +505,6 @@ export default function PackagesTab({ session, showToast, navigate }) {
                       <button class="btn-outline btn-sm" onClick=${() => handleDownloadZip(tpl.packageGroupId, tpl.title)}>
                         ${t('packages.downloadZip') || 'Download ZIP'}
                       </button>
-                      <button class="btn-outline btn-sm" 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>

package/dist/public/views/profile/scheduler-calendar.js

@@ -13,6 +13,10 @@
  *   <${SchedulerCalendar} schedules=${[...managed, ...extensions]} reloadKey=${tick} onJumpTo=${jump} />
  * @version-history
  *   v1.0.0 -- 2026-07-03 -- Initial day/week/month scheduler calendar (server-projected cron cadence)
+ *   v1.1.0 -- 2026-07-17 -- Continuous / high-frequency schedules (server `frequent` summary — per-minute /
+ *     hourly crons) no longer flood the grid: they render once in a "Continuously running" strip above the
+ *     calendar as cadence pills (every-N-min · ~N/day), clickable to jump to the card. A "show in grid"
+ *     toggle folds them back in as aggregated ⟳ ×N/day chips (week/day columns, a ⟳×count badge in month).
  */
 import { h } from 'preact';
 import htm from 'htm';
@@ -39,6 +43,13 @@ function kindLabel(type) {
   const known = { ai: 'ai', agent_task: 'agent_task', extension: 'extension', 'eco-capability': 'eco-capability', core: 'core' };
   return known[type] ? 'profile.scheduler.kind.' + known[type] : null;
 }
+/** Human cadence for a continuous schedule from its median interval (minutes). */
+function cadenceLabel(min) {
+  if (!min || !isFinite(min)) return '';
+  if (min < 60) return t('profile.scheduler.cal.everyMin', { n: min });
+  if (min % 60 === 0) return t('profile.scheduler.cal.everyHour', { n: min / 60 });
+  return t('profile.scheduler.cal.everyMin', { n: min });
+}
 
 const HOUR_START = 6;
 const HOUR_END = 22;
@@ -47,6 +58,9 @@ export default function SchedulerCalendar({ schedules = [], reloadKey = 0, onJum
   const [mode, setMode] = useState('week');
   const [anchorMs, setAnchorMs] = useState(() => startOfDay(new Date()).getTime());
   const [occ, setOcc] = useState([]);            // [{ scheduleId, at: Date }]
+  const [freq, setFreq] = useState([]);          // [{ scheduleId, cron, intervalMinutes, approxPerDay }] — continuous/high-frequency
+  const [foldFreq, setFoldFreq] = useState(false); // also render continuous schedules inside the grid (aggregated)
+  const [freqExpanded, setFreqExpanded] = useState(false); // strip: show all vs. a preview
   const [truncated, setTruncated] = useState(false);
   const [loading, setLoading] = useState(true);
 
@@ -95,9 +109,10 @@ export default function SchedulerCalendar({ schedules = [], reloadKey = 0, onJum
       .then((res) => {
         if (!alive) return;
         setOcc((res?.data?.occurrences || []).map((o) => ({ scheduleId: o.scheduleId, at: new Date(o.at) })));
+        setFreq(res?.data?.frequent || []);
         setTruncated(!!res?.data?.truncated);
       })
-      .catch(() => { if (alive) { setOcc([]); setTruncated(false); } })
+      .catch(() => { if (alive) { setOcc([]); setFreq([]); setTruncated(false); } })
       .finally(() => { if (alive) setLoading(false); });
     return () => { alive = false; };
   }, [startMs, endMs, reloadKey]);
@@ -122,6 +137,20 @@ export default function SchedulerCalendar({ schedules = [], reloadKey = 0, onJum
 
   const eventsOn = useCallback((day) => events.filter((e) => sameDay(e.at, day)), [events]);
 
+  // Continuous / high-frequency schedules joined to their meta, busiest first.
+  const frequentList = useMemo(() => freq
+    .map((f) => {
+      const s = byId.get(f.scheduleId);
+      return {
+        scheduleId: f.scheduleId,
+        type: s?.type || 'core',
+        name: (s && (s.displayName || s.name)) || t('profile.scheduler.cal.unknown'),
+        intervalMinutes: f.intervalMinutes,
+        approxPerDay: f.approxPerDay,
+      };
+    })
+    .sort((a, b) => b.approxPerDay - a.approxPerDay), [freq, byId]);
+
   // ── navigation ──
   const shift = useCallback((dir) => setAnchorMs((ms) => {
     const d = new Date(ms);
@@ -167,16 +196,47 @@ export default function SchedulerCalendar({ schedules = [], reloadKey = 0, onJum
       ${truncated ? html`<div class="sch-cal-trunc">${t('profile.scheduler.cal.truncated')}</div>` : null}
     </div>`;
 
-  const emptyHint = (!loading && events.length === 0)
+  const emptyHint = (!loading && events.length === 0 && frequentList.length === 0)
     ? html`<div class="sch-cal-empty">${schedules.some((s) => s.enabled !== false && s.cron && s.cron !== '@activate')
         ? t('profile.scheduler.cal.noEvents') : t('profile.scheduler.cal.empty')}</div>`
     : null;
 
+  // ── "Continuously running" strip: high-frequency crons summarized (not one-chip-per-fire) ──
+  const FREQ_PREVIEW = 6;
+  const frequentStrip = frequentList.length ? html`<div class="sch-cal-freq">
+    <div class="sch-cal-freq-head">
+      <span class="sch-cal-freq-title">${t('profile.scheduler.cal.frequentTitle')} <span class="sch-cal-freq-count">${frequentList.length}</span></span>
+      <button type="button" class="btn-ghost btn-sm" onClick=${() => setFoldFreq((v) => !v)}>
+        ${foldFreq ? t('profile.scheduler.cal.freqHideGrid') : t('profile.scheduler.cal.freqShowGrid')}
+      </button>
+    </div>
+    <div class="sch-cal-freq-pills">
+      ${(freqExpanded ? frequentList : frequentList.slice(0, FREQ_PREVIEW)).map((f) => html`<button type="button"
+        class="sch-cal-freqpill sch-cal-ev--${kindClass(f.type)}" key=${f.scheduleId}
+        title=${`${f.name} · ${cadenceLabel(f.intervalMinutes)}`} onClick=${() => onJumpTo?.(f.scheduleId)}>
+        <span class="sch-cal-freqdot"></span>
+        <span class="sch-cal-freqname">${f.name}</span>
+        <span class="sch-cal-freqcad">${cadenceLabel(f.intervalMinutes)} · ${t('profile.scheduler.cal.perDay', { n: f.approxPerDay })}</span>
+      </button>`)}
+      ${frequentList.length > FREQ_PREVIEW ? html`<button type="button" class="sch-cal-freqmore" onClick=${() => setFreqExpanded((v) => !v)}>
+        ${freqExpanded ? t('profile.scheduler.cal.showLess') : t('profile.scheduler.cal.showMore', { n: frequentList.length - FREQ_PREVIEW })}
+      </button>` : null}
+    </div>
+  </div>` : null;
+
+  // Aggregated per-day chip for a continuous schedule (used when folded into the grid).
+  const freqChip = (f, key) => html`<button type="button"
+    class="${'sch-cal-ev sch-cal-ev--' + kindClass(f.type) + ' sch-cal-ev--click sch-cal-freqchip'}" key=${key}
+    title=${`${f.name} · ${cadenceLabel(f.intervalMinutes)}`} onClick=${() => onJumpTo?.(f.scheduleId)}>
+    <span class="sch-cal-freqmark">⟳</span> ${f.name} <span class="sch-cal-evtime">×${f.approxPerDay}</span></button>`;
+  const gridFreq = foldFreq ? frequentList : [];
+
   // ── month ──
   if (mode === 'month') {
     const cells = Array.from({ length: 42 }, (_, i) => addDays(start, i));
     return html`<section class="sch-cal">
       ${head}
+      ${frequentStrip}
       <div class="sch-cal-weekrow">${weekdays.map((w, i) => html`<div class="sch-cal-wd" key=${i}>${w}</div>`)}</div>
       <div class="sch-cal-month">
         ${cells.map((day, i) => {
@@ -185,6 +245,7 @@ export default function SchedulerCalendar({ schedules = [], reloadKey = 0, onJum
           return html`<div class="sch-cal-cell ${inMonth ? '' : 'sch-cal-cell--dim'} ${sameDay(day, now) ? 'sch-cal-cell--today' : ''}" key=${i}>
             <span class="sch-cal-daynum">${day.getDate()}</span>
             <span class="sch-cal-cell-evs">
+              ${foldFreq && inMonth && gridFreq.length ? html`<span class="sch-cal-ev sch-cal-ev--core sch-cal-ev--dot sch-cal-freqcount" title=${t('profile.scheduler.cal.frequentTitle')}><span class="sch-cal-freqmark">⟳</span> ×${gridFreq.length}</span>` : null}
               ${evs.slice(0, 3).map((e, j) => html`<button type="button" class=${evClass(e) + ' sch-cal-ev--click sch-cal-ev--dot'} key=${j} title=${evTitle(e)} onClick=${onEv(e)}>${e.name}</button>`)}
               ${evs.length > 3 ? html`<span class="sch-cal-more">+${evs.length - 3}</span>` : null}
             </span>
@@ -200,6 +261,7 @@ export default function SchedulerCalendar({ schedules = [], reloadKey = 0, onJum
     const days = Array.from({ length: 7 }, (_, i) => addDays(start, i));
     return html`<section class="sch-cal">
       ${head}
+      ${frequentStrip}
       <div class="sch-cal-week">
         ${days.map((day, i) => {
           const evs = eventsOn(day);
@@ -209,7 +271,8 @@ export default function SchedulerCalendar({ schedules = [], reloadKey = 0, onJum
               <span class="sch-cal-daynum">${day.getDate()}</span>
             </div>
             <div class="sch-cal-weekcol-evs">
-              ${evs.length === 0 ? html`<span class="sch-cal-dotempty">·</span>` : evs.map(chip)}
+              ${gridFreq.map((f, j) => freqChip(f, 'gf' + j))}
+              ${evs.length === 0 && gridFreq.length === 0 ? html`<span class="sch-cal-dotempty">·</span>` : evs.map(chip)}
             </div>
           </div>`;
         })}
@@ -230,7 +293,12 @@ export default function SchedulerCalendar({ schedules = [], reloadKey = 0, onJum
     </div>`;
   return html`<section class="sch-cal">
     ${head}
-    ${dayEvents.length === 0 && !loading ? html`<div class="sch-cal-empty">${t('profile.scheduler.cal.noEvents')}</div>` : null}
+    ${frequentStrip}
+    ${dayEvents.length === 0 && frequentList.length === 0 && !loading ? html`<div class="sch-cal-empty">${t('profile.scheduler.cal.noEvents')}</div>` : null}
+    ${foldFreq && gridFreq.length ? html`<div class="sch-cal-bucket">
+      <span class="sch-cal-hour"><span class="sch-cal-freqmark">⟳</span></span>
+      <div class="sch-cal-hour-evs">${gridFreq.map((f, j) => freqChip(f, 'gf' + j))}</div>
+    </div>` : null}
     ${earlier.length ? bucket('profile.scheduler.cal.earlier', earlier) : null}
     <div class="sch-cal-day">
       ${hours.map((hr) => {

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

@@ -11,6 +11,8 @@
  *   - jumpToSchedule — scroll to + flash a schedule's card/row when its calendar event is clicked
  * @usage Registered in profile.js TABS as { id:'scheduler', component: SchedulerTab }.
  * @version-history
+ *   v1.1.0 -- 2026-07-16 -- Mount folds schedules + agents into GET /v1/scheduler/tab (getSchedulerTab);
+ *     occurrences stay a range-driven request; individual reads kept as fallback.
  *   v1.0.0 -- 2026-06-03 -- Initial master scheduler view
  *   v1.0.1 -- 2026-06-03 -- Extension cron "Next run" uses formatUntil (was timeAgo → negative "ago")
  *   v1.1.0 -- 2026-07-03 -- Add SchedulerCalendar (day/week/month cadence view) at the top; clicking a
@@ -24,10 +26,11 @@ import { onLiveUpdate } from '/lib/live-updates.js';
 import { t } from '/js/i18n.js';
 import { timeAgo } from '/js/utils.js';
 import { listAgents } from '/js/services/agents.js';
-import { listAllSchedules, createSchedule } from '/js/services/schedules.js';
+import { listAllSchedules, getSchedulerTab, createSchedule } from '/js/services/schedules.js';
 import ScheduleItem, { formatUntil } from './schedule-item.js';
 import SchedulerCalendar from './scheduler-calendar.js';
 
+import { EmptyState } from '/components/EmptyState.js';
 const html = htm.bind(h);
 
 /** Scroll to and briefly flash a schedule's card (or extension row) by id. */
@@ -64,9 +67,17 @@ export default function SchedulerTab({ showToast }) {
 
   const loadData = useCallback(async () => {
     try {
-      const [schedRes, agentsRes] = await Promise.all([listAllSchedules(), listAgents().catch(() => null)]);
-      setData(schedRes?.data || { managed: [], extensions: [], agentInternal: [] });
-      setAgents(agentsRes?.data?.agents || []);
+      // Mount fold: ONE composite (schedule aggregate + agent names). On failure, fall back to the
+      // individual reads. The calendar's occurrence projection stays a separate (range-driven) request.
+      const ov = await getSchedulerTab();
+      if (ov) {
+        setData(ov.schedules);
+        setAgents(ov.agents);
+      } else {
+        const [schedRes, agentsRes] = await Promise.all([listAllSchedules(), listAgents().catch(() => null)]);
+        setData(schedRes?.data || { managed: [], extensions: [], agentInternal: [] });
+        setAgents(agentsRes?.data?.agents || []);
+      }
       setError(null);
       setReloadTick((n) => n + 1);
     } catch (e) {
@@ -115,7 +126,7 @@ export default function SchedulerTab({ showToast }) {
       <div class="sch-section">
         <h3 class="sch-section-title">${t('profile.scheduler.managedTitle')}</h3>
         ${data.managed.length === 0
-          ? html`<div class="sch-empty">${t('profile.scheduler.noManaged')}</div>`
+          ? html`<${EmptyState} text=${t('profile.scheduler.noManaged')} />`
           : html`<div class="sch-card-list">${data.managed.map(j => html`<${ScheduleItem} key=${j.id} schedule=${j} onChanged=${loadData} showToast=${showToast} />`)}</div>`}
       </div>
 

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

@@ -2,6 +2,11 @@
  * @file security-tab.js
  * @description Profile tab for CORS origin management (GHII + per-agent) and session revocation.
  * @version-history
+ *   v1.2.0 — 2026-07-18 — Vaihe 2d: the two bespoke `consent-table`s (per-agent CORS + sessions) →
+ *     canonical generic <DataTable> (rows/headers), unifying them with the node-wide table look
+ *     (accent-tinted divider/hover → neutral canonical). Cell content preserved verbatim.
+ *   v1.1.0 — 2026-07-16 — Mount folds GHII CORS + per-agent CORS + sessions into GET /v1/security/overview
+ *     (getSecurityOverview) — kills the CORS-per-agent fan-out; individual reads kept as fallback.
  *   v1.0.0 — 2026-03-17 — Refactor: replace inline styles with CSS utility classes (card-h3, flex-between, etc.)
  */
 import { h } from 'preact';
@@ -11,6 +16,7 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
 import { Spinner } from './shared.js';
+import { DataTable } from '/components/DataTable.js';
 import { useConfirm } from '/components/Modal.js';
 import * as securityService from '/js/services/security.js';
 import { listAgents } from '/js/services/agents.js';
@@ -28,13 +34,21 @@ export default function SecurityTab({ session, showToast }) {
   const loadData = useCallback(async () => {
     setLoading(true);
     try {
-      const [agents, sessionsList] = await Promise.all([
-        listAgents(session.owner),
-        securityService.listSessions(),
-      ]);
-      const result = await securityService.loadAll(agents);
-      setSecurityData(result);
-      setSessions(sessionsList);
+      // Mount fold: ONE composite (GHII CORS + per-agent CORS resolved server-side + sessions). On failure,
+      // fall back to listAgents + the per-agent CORS fan-out + listSessions.
+      const ov = await securityService.getSecurityOverview();
+      if (ov) {
+        setSecurityData({ ghii: ov.ghii, agents: ov.agents });
+        setSessions(ov.sessions);
+      } else {
+        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);
   }, [session]);
@@ -126,39 +140,32 @@ export default function SecurityTab({ session, showToast }) {
     ${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 => {
+          <${DataTable}
+            headers=${[t('profile.security.agent'), t('profile.security.origins'), t('profile.security.status'), '']}
+            rows=${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
+              return [
+                html`<span class="text-code text-accent">${escHtml(agentName)}</span>`,
+                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="text-meta">${hasCustom ? (ac.allowed_origins || []).join(', ') : (ac.effective || []).join(', ')}</span>`,
+                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`<span class="badge badge-muted">${t('profile.security.inheritedFrom')}: ${ac.inherited_from || t('profile.security.nodeDefault')}</span>`,
+                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>`;
+                  : html`<button class="btn-outline" onClick=${() => setCorsEditAgent({name: agentName, value: hasCustom ? (ac.allowed_origins || []).join('\\n') : ''})}>${t('profile.security.edit')}</button>`,
+              ];
             })}
-          </tbody></table>
+          />
         </div>`
     }
 
@@ -176,20 +183,13 @@ export default function SecurityTab({ session, showToast }) {
     ${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`
+          <${DataTable}
+            headers=${[t('profile.security.sessionIdentity'), t('profile.security.sessionIssuedAt'), t('profile.security.sessionExpiresAt'), '']}
+            rows=${sessions.map(s => [
+              html`<span class="text-code">${escHtml(s.gaii || session.owner)}</span>${s.current ? html` <span class="badge badge-success">${t('profile.security.currentSession')}</span>` : null}`,
+              html`<span class="text-meta">${new Date(s.issued_at).toLocaleString()}</span>`,
+              html`<span class="text-meta">${new Date(s.expires_at).toLocaleString()}</span>`,
+              s.current ? null : html`
                 <button class="btn-danger-solid btn-sm" disabled=${revokingId === s.session_id}
                   onClick=${async () => {
                     setRevokingId(s.session_id);
@@ -202,9 +202,9 @@ export default function SecurityTab({ session, showToast }) {
                   }}>
                   ${revokingId === s.session_id ? '...' : t('profile.security.revoke')}
                 </button>
-              `}</td>
-            </tr>`)}
-          </tbody></table>
+              `,
+            ])}
+          />
         </div>`
     }
 

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

@@ -22,6 +22,7 @@ import { useConfirm } from '/components/Modal.js';
 import { Markdown } from '/components/Markdown.js';
 import * as skillsService from '/js/services/skills.js';
 
+import { EmptyState } from '/components/EmptyState.js';
 const html = htm.bind(h);
 
 /** Split a SKILL.md into its YAML frontmatter (shown as code) and markdown body (rendered). */
@@ -205,7 +206,7 @@ export default function SkillsTab({ showToast }) {
 
         ${loading ? html`<${Spinner} />` : (
           library.user.length === 0
-            ? html`<div class="pf-skl-empty">${t('skills.emptyMine')}</div>`
+            ? html`<${EmptyState} text=${t('skills.emptyMine')} />`
             : library.user.map(s => renderRow(s, { editable: true }))
         )}
       </div>
@@ -217,7 +218,7 @@ export default function SkillsTab({ showToast }) {
         <div class="pf-skl-section-hint">${t('skills.nodeLibraryHint')}</div>
         ${loading ? null : (
           library.node.length === 0
-            ? html`<div class="pf-skl-empty">${t('skills.emptyNode')}</div>`
+            ? html`<${EmptyState} text=${t('skills.emptyNode')} />`
             : library.node.map(s => renderRow(s, { editable: false }))
         )}
       </div>

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

@@ -8,6 +8,15 @@
  *   v1.2.0 — 2026-05-22 — Show info message for federated users instead of infinite spinner
  *   v1.3.0 — 2026-06-02 — Component unification (#1): copy buttons use canonical
  *     <CopyButton>; delete local copyToClipboard helper + dead copied-state/handlers.
+ *   v1.4.0 — 2026-07-16 — Mount folds the tab's wallet+transactions AND MoneyActivity's checkout+orders
+ *     into ONE GET /v1/wallet/overview (WalletTabService); MoneyActivity seeds from `initial` + skips its
+ *     own mount fetch. The Enterprise PSP section keeps its own /v1/me/psp call. Falls back to the
+ *     individual endpoints if the composite is unavailable. (Phase 4 slice 3 — frontend half.)
+ *   v1.5.0 — 2026-07-18 — Vaihe 3 card-cohesion: the two remaining unframed sections now sit in a `.card`
+ *     like the balance/lifetime/history sections do — PSP `.wallet-psp` block and MoneyActivity's
+ *     purchases/sales `.tx-list`s (were bare blocks straight under their section headers). Campsite Rule 8:
+ *     the tx-item / tx-item-wrap dividers + hover swapped hardcoded rgba(232,86,74,…) for --border /
+ *     --accent-subtle tokens (theme-aware).
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
@@ -61,7 +70,7 @@ function PspSection() {
   return html`
     <div class="section-title mt-2">${t('profile.wallet.pspTitle')}</div>
     <div class="section-desc">${t('profile.wallet.pspDesc')}</div>
-    <div class="wallet-psp">
+    <div class="card wallet-psp">
       ${psp.configured
         ? html`<span class="pf-psp-chip pf-psp-chip--ok">${t('profile.wallet.pspConfigured')} ${psp.keyHint || ''}</span>`
         : html`<span class="pf-psp-chip pf-psp-chip--warn">${t('profile.wallet.pspMissing')}</span>`}
@@ -77,8 +86,13 @@ function PspSection() {
 /* "Money purchases & sales" — real-money (EUR/USD) checkout activity, separate from morsels.
  * Purchases come from the buyer's checkout sessions, sales from received orders; both filtered to
  * money currencies (minor units → major). Renders nothing when there is no money activity. */
-function MoneyActivity() {
-  const [data, setData] = useState(null);
+function MoneyActivity({ initial }) {
+  // Seeded from GET /v1/wallet/overview (checkoutSessions + orders, money currencies only); else self-loads.
+  const [data, setData] = useState(() => {
+    if (!initial) return null;
+    const m = (x) => x.currency && x.currency !== 'morsel';
+    return { purchases: (initial.checkoutSessions?.sessions ?? []).filter(m), sales: (initial.orders?.orders ?? []).filter(m) };
+  });
   const load = useCallback(async () => {
     try {
       const [s, o] = await Promise.all([
@@ -91,7 +105,7 @@ function MoneyActivity() {
       setData({ purchases, sales });
     } catch { setData({ purchases: [], sales: [] }); }
   }, []);
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => { if (!initial) load(); }, [load]);   // eslint-disable-line react-hooks/exhaustive-deps -- seed once from `initial`; fetch only when unseeded
   if (!data || (!data.purchases.length && !data.sales.length)) return null;
   const money = (amt, cur) => fmtMoney(amt, cur);
   const row = (x, isSale) => html`
@@ -105,16 +119,17 @@ function MoneyActivity() {
     <div class="section-desc">${t('profile.wallet.moneyDesc')}</div>
     ${data.purchases.length ? html`
       <div class="text-meta mb-1">${t('profile.wallet.moneyPurchases')}</div>
-      <div class="tx-list">${data.purchases.map(x => row(x, false))}</div>` : null}
+      <div class="card"><div class="tx-list">${data.purchases.map(x => row(x, false))}</div></div>` : null}
     ${data.sales.length ? html`
       <div class="text-meta mb-1 mt-1">${t('profile.wallet.moneySales')}</div>
-      <div class="tx-list">${data.sales.map(x => row(x, true))}</div>` : null}`;
+      <div class="card"><div class="tx-list">${data.sales.map(x => row(x, true))}</div></div>` : null}`;
 }
 
 export default function WalletTab({ session, showToast, onStats }) {
   const [walletData, setWalletData] = useState(null);
   const [walletTx, setWalletTx] = useState(null);
   const [expandedTx, setExpandedTx] = useState(null);
+  const [moneyInitial, setMoneyInitial] = useState(null);   // seeds MoneyActivity from the composite
 
   // Request form state
   const [reqAmount, setReqAmount] = useState('');
@@ -137,6 +152,18 @@ export default function WalletTab({ session, showToast, onStats }) {
 
   async function loadData() {
     try {
+      // Mount: ONE composite call (GET /v1/wallet/overview) seeds wallet + recent transactions AND the
+      // MoneyActivity section (checkout-sessions + orders). The Enterprise PSP section stays on its own
+      // /v1/me/psp call. Falls back to the individual wallet endpoints if the composite is unavailable.
+      const ov = await apiGet('/v1/wallet/overview').then(r => r?.data).catch(() => null);
+      if (ov?.wallet) {
+        setWalletData(ov.wallet);
+        onStats?.({ balance: ov.wallet.balance ?? '-' });
+        setWalletTx(ov.transactions?.transactions || []);
+        setMoneyInitial(ov);
+        return;
+      }
+      // Fallback — the tab's own two reads (MoneyActivity self-loads when moneyInitial stays null).
       const resp = await getWallet();
       const w = resp?.data || resp || {};
       setWalletData(w);
@@ -222,7 +249,7 @@ export default function WalletTab({ session, showToast, onStats }) {
     <${PspSection} />
 
     <!-- Real-money (EUR/USD) purchases & sales, separate from the morsel ledger -->
-    <${MoneyActivity} />
+    <${MoneyActivity} initial=${moneyInitial} />
 
     <!-- Copy balance button -->
     <div class="mb-1">