aimeat 1.40.1 → 2.1.0

package/dist/public/views/portfolio.js

@@ -45,8 +45,9 @@ 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 { t, getLocale } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
+import { listApps } from '/js/services/apps.js';
 import { NODE_URL, tr, stampCspNonce, getSession } from './portfolio/shared.js';
 import { PortfolioBuilder } from './portfolio/builder.js';
 
@@ -56,6 +57,8 @@ function PortfolioViewer({ username, navigate }) {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [errMsg, setErrMsg] = useState(null);
+  // Apps the owner promoted (their PUBLIC app-catalog.promoted doc), joined to app metadata.
+  const [promotedApps, setPromotedApps] = useState([]);
   const frameRef = useRef(null);
 
   // ── Portfolio bridge ──
@@ -144,6 +147,56 @@ function PortfolioViewer({ username, navigate }) {
       });
   }, [username]);
 
+  // Load the owner's promoted apps once we know their GHII (data.owner_gaiis[0]). The doc is PUBLIC,
+  // read anonymously via /v1/memory/:gaii/:key; app names/icons come from the public /v1/apps list.
+  useEffect(() => {
+    const ownerGhii = Array.isArray(data?.owner_gaiis) ? data.owner_gaiis[0] : null;
+    if (!ownerGhii) { setPromotedApps([]); return undefined; }
+    let cancelled = false;
+    (async () => {
+      try {
+        const resp = await fetch(`${NODE_URL}/v1/memory/${encodeURIComponent(ownerGhii)}/${encodeURIComponent('app-catalog.promoted')}?soft=1`);
+        const j = await resp.json().catch(() => null);
+        const items = (j && j.data && j.data.value && Array.isArray(j.data.value.items)) ? j.data.value.items : [];
+        if (!items.length) { if (!cancelled) setPromotedApps([]); return; }
+        let byRef = {};
+        try {
+          const apps = await listApps();
+          (apps || []).forEach(a => { byRef[`${a.owner}/${a.filename || a.name}`] = a; });
+        } catch { /* names fall back to the filename */ }
+        const cards = items.filter(it => it && typeof it.ref === 'string').map(it => {
+          const slash = it.ref.indexOf('/');
+          const owner = it.ref.slice(0, slash);
+          const filename = it.ref.slice(slash + 1);
+          const app = byRef[it.ref];
+          return {
+            ref: it.ref, owner, filename, text: it.text || {},
+            name: (app && app.manifest && app.manifest.name) || filename.replace(/\.html?$/i, ''),
+            icon: (app && app.manifest && app.manifest.icon) || '\u{1F4E6}',
+          };
+        });
+        if (!cancelled) setPromotedApps(cards);
+      } catch { if (!cancelled) setPromotedApps([]); }
+    })();
+    return () => { cancelled = true; };
+  }, [data]);
+
+  // The "Promoted apps" block — the owner's showcased apps with their per-language pitch.
+  const promotedBlock = promotedApps.length ? html`
+    <div class="portfolio-promoted">
+      <h3 class="portfolio-promoted-title">\u{1F4E3} ${tr('portfolio.viewer.promoted', 'Promoted apps')}</h3>
+      <div class="portfolio-promoted-grid">
+        ${promotedApps.map(p => {
+          const pitch = p.text[getLocale()] || p.text.en || p.text.fi || '';
+          return html`
+            <a class="portfolio-promoted-card" href=${`${NODE_URL}/v1/apps/${encodeURIComponent(p.owner)}/${encodeURIComponent(p.filename)}?mode=inline`} target="_blank" rel="noopener">
+              <div class="portfolio-promoted-name">${p.icon} ${escHtml(p.name)}</div>
+              ${pitch ? html`<div class="portfolio-promoted-pitch">${escHtml(pitch)}</div>` : ''}
+            </a>`;
+        })}
+      </div>
+    </div>` : '';
+
   if (loading) return html`<div class="portfolio-container"><div class="view-loading">Loading portfolio...</div></div>`;
 
   if (errMsg || !data) {
@@ -183,6 +236,7 @@ function PortfolioViewer({ username, navigate }) {
             ⛶ ${tr('portfolio.viewer.fullscreen', 'Fullscreen')}
           </button>
         </div>
+        ${promotedBlock}
         <iframe ref=${frameRef} class="portfolio-viewer-frame portfolio-viewer-frame-full"
           srcdoc=${stampCspNonce(data.portfolio_html)} sandbox="allow-scripts"
           onLoad=${(e) => postAuthState(e.target.contentWindow)}></iframe>
@@ -190,16 +244,17 @@ function PortfolioViewer({ username, navigate }) {
     `;
   }
 
-  // No portfolio HTML — show basic profile info
+  // No portfolio HTML — show basic profile info + any promoted apps.
   return html`
     <div class="portfolio-container">
-      <div class="portfolio-not-found">
+      <div class="portfolio-profile-head">
         <h2>${escHtml(data.display_name || username)}</h2>
         <p>${data.bio ? escHtml(data.bio) : t('portfolio.viewer.notFoundDesc')}</p>
-        <button class="btn-ghost" style="margin-top:1rem;" onClick=${() => navigate('/v1/portal')}>
-          ${t('portfolio.viewer.backToPortal')}
-        </button>
       </div>
+      ${promotedBlock}
+      <button class="btn-ghost" style="margin-top:1rem;" onClick=${() => navigate('/v1/portal')}>
+        ${t('portfolio.viewer.backToPortal')}
+      </button>
     </div>
   `;
 }

package/dist/public/views/profile/access-tab/access-tokens.js

@@ -44,11 +44,11 @@ Use it by adding this HTTP header to your requests (and, for browser testing, se
 The server recognizes the token and treats every request as if I'm logged in — no extra login step. Open the app, click through it, read/write via it, and confirm it behaves correctly. Tell me what you find.`;
 }
 
-export function AccessTokensSection({ session, showToast }) {
+export function AccessTokensSection({ session, showToast, initial }) {
   const { confirm, ConfirmUI } = useConfirm();
   const isOperator = (session.roles || []).includes('operator');
 
-  const [tokens, setTokens] = useState(null);
+  const [tokens, setTokens] = useState(initial?.tokens ?? null);   // seeded from /v1/access/overview; else self-loads
   const [showCreate, setShowCreate] = useState(false);
   const [creating, setCreating] = useState(false);
   const [created, setCreated] = useState(null); // { token, prompt }
@@ -67,7 +67,7 @@ export function AccessTokensSection({ session, showToast }) {
     try { const r = await apiGet('/v1/access/tokens'); setTokens(r.data?.tokens || []); }
     catch { setTokens([]); }
   }, []);
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => { if (!initial) load(); }, [load]);   // eslint-disable-line react-hooks/exhaustive-deps -- seed once from `initial`; fetch only when unseeded
 
   const liveRef = useRef(load);
   liveRef.current = load;

package/dist/public/views/profile/access-tab/agent-defaults.js

@@ -13,8 +13,8 @@ import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
 import { getOwnerDefaults, upsertOwnerDefaults } from '/js/services/agent-directives.js';
 
-export function AgentDefaultsSection({ showToast }) {
-  const [defaults, setDefaults] = useState(null);
+export function AgentDefaultsSection({ showToast, initial }) {
+  const [defaults, setDefaults] = useState(initial?.defaults ?? null);   // seeded from /v1/access/overview; else self-loads
   const [editing, setEditing] = useState(false);
   const [saving, setSaving] = useState(false);
 
@@ -32,7 +32,7 @@ export function AgentDefaultsSection({ showToast }) {
     }
   }, []);
 
-  useEffect(() => { loadDefaults(); }, [loadDefaults]);
+  useEffect(() => { if (!initial) loadDefaults(); }, [loadDefaults]);   // eslint-disable-line react-hooks/exhaustive-deps -- seed once from `initial`; fetch only when unseeded
 
   // Live update listener
   const liveRef = useRef(loadDefaults);

package/dist/public/views/profile/access-tab/connected-apps.js

@@ -17,15 +17,17 @@ import { apiGet, apiDelete } from '/js/api.js';
 
 // Apps the owner has explicitly granted scoped access to (the H-2 app-grant flow). Each
 // holds its OWN revocable token bound to a narrow scope set — never the login session.
-export function ConnectedAppsSection({ showToast }) {
+export function ConnectedAppsSection({ showToast, initial }) {
   const { confirm, ConfirmUI } = useConfirm();
-  const [grants, setGrants] = useState(null);
+  // `initial` (the app-grants slice of GET /v1/access/overview) seeds us so the mount does no fetch of
+  // its own; live-update + post-revoke still reload via the individual endpoint. Absent → self-load.
+  const [grants, setGrants] = useState(initial?.grants ?? null);
 
   const load = useCallback(async () => {
     try { const r = await apiGet('/v1/app-grants'); setGrants(r.data?.grants || []); }
     catch { setGrants([]); }
   }, []);
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => { if (!initial) load(); }, [load]);   // eslint-disable-line react-hooks/exhaustive-deps -- seed once from `initial`; fetch only when unseeded
 
   const liveRef = useRef(load);
   liveRef.current = load;

package/dist/public/views/profile/access-tab/sharing-groups.js

@@ -3,6 +3,8 @@
  * @description Sharing Groups section — CRUD for sharing groups with expandable
  *   member lists. Extracted from access-tab.js to satisfy max-file-lines.
  * @version-history
+ *   v1.1.0 — 2026-07-16 — Member-add identifier input is the shared ContactPicker (contacts +
+ *     directory suggestions, full-id mode).
  *   v1.0.0 — 2026-07-13 — Extracted from access-tab.js (max-file-lines)
  */
 import { h } from 'preact';
@@ -12,11 +14,12 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
 import { useConfirm } from '/components/Modal.js';
+import { ContactPicker } from '/components/ContactPicker.js';
 import * as groupsApi from '/js/services/sharing-groups.js';
 
-export function SharingGroupsSection({ showToast }) {
+export function SharingGroupsSection({ showToast, initial }) {
   const { confirm, ConfirmUI } = useConfirm();
-  const [groups, setGroups] = useState(null);
+  const [groups, setGroups] = useState(initial?.groups ?? null);   // seeded from /v1/access/overview; else self-loads
   const [expandedId, setExpandedId] = useState(null);
   const [showCreate, setShowCreate] = useState(false);
   const [creating, setCreating] = useState(false);
@@ -49,7 +52,7 @@ export function SharingGroupsSection({ showToast }) {
     }
   }, []);
 
-  useEffect(() => { loadGroups(); }, [loadGroups]);
+  useEffect(() => { if (!initial) loadGroups(); }, [loadGroups]);   // eslint-disable-line react-hooks/exhaustive-deps -- seed once from `initial`; fetch only when unseeded
 
   // Deep link from the Memory tab's "Create a group →": scroll here and open the form.
   useEffect(() => {
@@ -238,10 +241,8 @@ export function SharingGroupsSection({ showToast }) {
               <div class="create-form">
                 <div class="form-row">
                   <label>${t('profile.access.sgMemberIdentifier') || 'Identifier (GHII or GAII)'}</label>
-                  <input type="text" class="input-field input-sm"
-                    placeholder=${'alice@node-id'}
-                    value=${memberIdent} onInput=${e => setMemberIdent(e.target.value)}
-                    onKeyDown=${e => e.key === 'Enter' && handleAddMember(group.id)} />
+                  <${ContactPicker} value=${memberIdent} onChange=${setMemberIdent} valueMode="full"
+                    placeholder=${'alice@node-id'} onSubmit=${() => handleAddMember(group.id)} />
                 </div>
                 <div class="form-row">
                   <label>${t('profile.access.sgMemberType') || 'Type'}</label>

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

@@ -22,6 +22,10 @@
  *     sharing-groups section accepts the Memory tab's deep link (aimeat.access.focus).
  *   v1.5.0 -- 2026-06-20 -- Add Connected Apps section (H-2 app grants): list + revoke the
  *     scoped, user-approved access tokens published apps hold (GET/DELETE /v1/app-grants).
+ *   v1.6.0 -- 2026-07-16 -- Mount folds the 6-request fan-out into ONE GET /v1/access/overview
+ *     (AccessTabService); parent seeds consent+public-key, the four child sections seed from their
+ *     `initial` slice and skip their own mount fetch (live-update still self-refreshes). Falls back to
+ *     the individual endpoints if the composite is unavailable. (Phase 4 slice 2 — frontend half.)
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -61,13 +65,23 @@ export default function AccessTab({ session, showToast }) {
   // undefined = loading, null = no keypair stored, string = the key
   const [pubKey, setPubKey] = useState(undefined);
 
-  // Load auth consents + own GHII profile (public key) on mount
+  // Mount: ONE composite call (GET /v1/access/overview) seeds the parent (auth consents + public key)
+  // AND the four child sections (app-grants / access-tokens / groups / agent-defaults), which receive
+  // their slice as `initial` and skip their own mount fetch. undefined = loading, null = composite
+  // unavailable → parent + children fall back to the individual endpoints.
+  const [overview, setOverview] = useState(undefined);
   useEffect(() => {
-    apiGet('/v1/consent').then(data => {
-      const all = data.data?.consents || [];
-      setAuthConsents(all.filter(c => c.scope === 'auth' && c.status === 'active'));
-    }).catch(() => {});
-    apiGet('/v1/ghii/me').then(r => setPubKey(r?.data?.public_key ?? null)).catch(() => setPubKey(null));
+    apiGet('/v1/access/overview').then(r => {
+      const d = r?.data;
+      if (!d) throw new Error('no overview');
+      setAuthConsents((d.consent?.consents || []).filter(c => c.scope === 'auth' && c.status === 'active'));
+      setPubKey(d.publicKey ?? null);
+      setOverview(d);
+    }).catch(() => {
+      setOverview(null);   // children self-load; parent falls back to its own two reads
+      apiGet('/v1/consent').then(data => setAuthConsents((data.data?.consents || []).filter(c => c.scope === 'auth' && c.status === 'active'))).catch(() => {});
+      apiGet('/v1/ghii/me').then(r => setPubKey(r?.data?.public_key ?? null)).catch(() => setPubKey(null));
+    });
   }, []);
 
   async function addAuthNode() {
@@ -233,9 +247,11 @@ export default function AccessTab({ session, showToast }) {
     </div>`;
     })()}
 
-    <${ConnectedAppsSection} showToast=${showToast} />
-    <${AccessTokensSection} session=${session} showToast=${showToast} />
-    <${SharingGroupsSection} showToast=${showToast} />
-    <${AgentDefaultsSection} showToast=${showToast} />
+    ${overview !== undefined ? html`
+      <${ConnectedAppsSection} showToast=${showToast} initial=${overview?.appGrants} />
+      <${AccessTokensSection} session=${session} showToast=${showToast} initial=${overview?.accessTokens} />
+      <${SharingGroupsSection} showToast=${showToast} initial=${overview?.groups} />
+      <${AgentDefaultsSection} showToast=${showToast} initial=${overview?.agentDefaults} />
+    ` : null}
   `;
 }

package/dist/public/views/profile/agents/agent-card.js

@@ -3,6 +3,9 @@
  * @description Agent card component with collapsed/expanded states,
  *   Two-Zone Header (identity + state-dependent status), and tab bar.
  * @version-history
+ *   2026-07-19 — AppDev tab (KB UI): learned-pitfall + template management surface, start-prompt copy, model badge
+ *   v1.20.0 -- 2026-07-17 -- Style unification: collapsed-bar summary separators use a
+ *     middle dot (·) instead of a pipe, matching the rest of the profile meta rows.
  *   v1.19.0 -- 2026-07-03 -- Add Contracts sub-tab (tab-contracts.js) — agent-side contract-engagement view.
  *   v1.18.0 -- 2026-06-30 -- Onboarding step labels use tOr() so a missing agentOnboarding.steps.*
  *     key falls back to the server-provided step.title instead of rendering the raw key.
@@ -254,6 +257,7 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
           <div class="pf-agd-zone1-badges">
             ${renderModeBadge(agent)}
             ${renderPlatformBadge(onboarding)}
+            ${renderModelBadge(agent)}
             ${renderReadinessBadge(state, onboarding)}
             ${agent.federate && html`<span class="pf-agd-badge pf-agd-badge--federation">${t('profile.federated')}</span>`}
           </div>
@@ -404,7 +408,7 @@ function renderDeliveryIndicator(agent) {
     label = t('profile.agents.detail.deliveryPolling');
   }
 
-  return html`<span class="pf-agd-delivery-indicator">${label}${icon ? ` ${icon}` : ''} </span>`;
+  return html`<span class="pf-agd-delivery-indicator">${label}${icon ? ` ${icon}` : ''} · </span>`;
 }
 
 function renderPlatformBadge(onboarding) {
@@ -414,6 +418,13 @@ function renderPlatformBadge(onboarding) {
   return html`<span class="pf-agd-badge pf-agd-badge--platform">${platform}${version ? ` v${version}` : ''}</span>`;
 }
 
+// Self-reported primary LLM (indicative — coding platforms delegate to subagents on other
+// models mid-session). Comes from the owner agent list projection (agent.model).
+function renderModelBadge(agent) {
+  if (!agent?.model) return null;
+  return html`<span class="pf-agd-badge pf-agd-badge--model" title=${t('profile.agents.modelBadgeTitle')}>${agent.model}</span>`;
+}
+
 const READINESS_RANKS = { none: 0, basic: 1, standard: 2, advanced: 3, full: 4 };
 
 function renderReadinessBadge(state, onboarding) {
@@ -449,13 +460,13 @@ function renderReadinessBadge(state, onboarding) {
 function renderCollapsedStats(state, agent, onboarding) {
   switch (state) {
     case 'new':
-      return html`${agent.last_seen ? `${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}` : ''} | ${t('profile.agents.detail.state.newSummary')}`;
+      return html`${agent.last_seen ? `${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)} · ` : ''}${t('profile.agents.detail.state.newSummary')}`;
     case 'onboarding': {
       const nextStep = onboarding?.steps?.find(s => s.status === 'pending');
-      return html`${agent.last_seen ? `${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}` : ''} ${nextStep ? `| ${t('profile.agents.detail.state.next')}: ${tOr('agentOnboarding.steps.' + nextStep.id, nextStep.title || nextStep.id)}` : ''}`;
+      return html`${agent.last_seen ? `${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}` : ''}${nextStep ? ` · ${t('profile.agents.detail.state.next')}: ${tOr('agentOnboarding.steps.' + nextStep.id, nextStep.title || nextStep.id)}` : ''}`;
     }
     case 'problem':
-      return html`${t('profile.agents.detail.state.problemSummary')} | ${agent.last_seen ? `${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}` : ''}`;
+      return html`${t('profile.agents.detail.state.problemSummary')}${agent.last_seen ? ` · ${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}` : ''}`;
     case 'idle':
     case 'production':
     default: {
@@ -466,7 +477,7 @@ function renderCollapsedStats(state, agent, onboarding) {
         if (done || act) parts.push(`${t('profile.agents.detail.today')}: ${done || 0} ${t('profile.agents.detail.done')}${act ? `, ${act} ${t('profile.agents.detail.active')}` : ''}`);
       }
       if (agent.tokensUsedToday != null) parts.push(`${t('profile.agents.detail.tokensToday')}: ${agent.tokensUsedToday.toLocaleString()}`);
-      return html`${parts.join(' | ')}`;
+      return html`${parts.join(' · ')}`;
     }
   }
 }

package/dist/public/views/profile/agents/tab-activity.js

@@ -3,6 +3,8 @@
  * @description Enhanced Activity tab with governance filter and category badges.
  *   Wraps the existing activity subtab with additional filter pills.
  * @version-history
+ *   v1.7.0 -- 2026-07-16 -- Mount folds 5 agent-domain reads into GET /v1/agents/:name/activity/overview
+ *     (getActivityOverview); ledger stays separate. Individual six-request fan-out kept as fallback.
  *   v1.6.0 -- 2026-06-10 -- Event log strictly newest-first (pages interleaved lifecycle events);
  *     "Tokens used (30d)" shows "—/not reported" when telemetry isn't wired (0 claimed no usage);
  *     delivery health shows a neutral "Delivery: polling" line when neither MCP nor webhook is
@@ -20,7 +22,7 @@ import { useState, useEffect, useRef } from 'preact/hooks';
 import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
 import { t } from '/js/i18n.js';
-import { getActivity, getActivityLog } from '/js/services/agent-activity.js';
+import { getActivity, getActivityLog, getActivityOverview } from '/js/services/agent-activity.js';
 import { getDirectives } from '/js/services/agent-directives.js';
 import { getWebhookConfig, getTelemetry } from '/js/services/agent-integration.js';
 import { getLedgerUsage } from '/js/services/ledger.js';
@@ -62,16 +64,32 @@ export default function TabActivity({ agent, agentName }) {
   async function loadData({ showSpinner = true } = {}) {
     if (showSpinner) setLoading(true);
     try {
-      const [actResp, logResp, dirResp, whResp, telResp, ledgerResp] = await Promise.all([
-        getActivity(agentName, 30).catch(() => null),
-        getActivityLog(agentName, 1, 50).catch(() => null),
-        getDirectives(agentName).catch(() => null),
-        getWebhookConfig(agentName).catch(() => null),
-        getTelemetry(agentName, { days: 1 }).catch(() => null),
-        // The usage ledger is the accurate token source (per-LLM-call). Keyed by the agent's
-        // full GAII, not the bare name — filtering by the name matches nothing.
+      // Mount fold: ONE composite (activity_stats + event log + directives budget + webhook + telemetry)
+      // plus the ledger, which stays separate (different auth model — owner-GHII scoped). On composite
+      // failure, fall back to the individual five-request fan-out. Each composite sub-object mirrors the
+      // matching endpoint's `.data`, so the downstream field access below is unchanged.
+      // The usage ledger is the accurate token source (per-LLM-call). Keyed by the agent's full GAII,
+      // not the bare name — filtering by the name matches nothing.
+      const [overview, ledgerResp] = await Promise.all([
+        getActivityOverview(agentName),
         getLedgerUsage(agent?.gaii || agentName, { groupBy: 'day' }).catch(() => null),
       ]);
+      let actResp, logResp, dirResp, whResp, telResp;
+      if (overview) {
+        actResp = { data: overview.activity };
+        logResp = { data: overview.log };
+        dirResp = { data: overview.directives };
+        whResp = { data: overview.webhook };
+        telResp = { data: overview.telemetry };
+      } else {
+        [actResp, logResp, dirResp, whResp, telResp] = await Promise.all([
+          getActivity(agentName, 30).catch(() => null),
+          getActivityLog(agentName, 1, 50).catch(() => null),
+          getDirectives(agentName).catch(() => null),
+          getWebhookConfig(agentName).catch(() => null),
+          getTelemetry(agentName, { days: 1 }).catch(() => null),
+        ]);
+      }
       setStats(actResp?.data?.activity_stats || null);
       setLedgerTotals(ledgerResp?.data?.totals || null);
       setEvents(logResp?.data?.events || []);

package/dist/public/views/profile/agents/tab-agent-config.js

@@ -9,6 +9,9 @@
  *   v1.2.0 -- 2026-06-02 -- Component unification: route handleCopy through the shared
  *     copyToClipboard (/js/utils.js) instead of raw navigator.clipboard.writeText, so the
  *     insecure-context fallback applies; toast preserved (TIER 3, stays a handler)
+ *   v1.4.0 -- 2026-07-17 -- Style unification: budget-guards card uses the canonical
+ *     agent-detail section title (pf-agd-section-title) instead of the profile-level
+ *     red section-title.
  *   v1.3.0 -- 2026-06-10 -- AgentDangerZone at the tab bottom: typed-agent-name gate +
  *     the shared confirm — replaces the Delete button that sat on every tab's footer.
  */
@@ -48,7 +51,7 @@ function ScheduleBudgetSection({ agent, agentName, showToast }) {
 
   return html`
     <div class="sch-form sch-budget-section">
-      <div class="section-title">${t('profile.scheduler.budgetTitle')}</div>
+      <div class="pf-agd-section-title">${t('profile.scheduler.budgetTitle')}</div>
       <div class="section-desc">${t('profile.scheduler.budgetDesc')}</div>
       <div class="sch-constraints">
         <label class="sch-check">

package/dist/public/views/profile/agents/tab-contracts.js

@@ -7,6 +7,8 @@
  * @structure TabContracts — offered-contracts row + Active engagements + Retired (history)
  * @usage <${TabContracts} agent=${agent} agentName=${agent.name} showToast=${showToast} />
  * @version-history
+ *   v1.1.0 -- 2026-07-17 -- Card layout: offers and active-workspaces side by side in
+ *     pf-agd-card-grid; retired history spans full width.
  *   v1.0.0 — 2026-07-03 — Initial agent Contracts sub-tab (engagement visibility + activate/deactivate).
  */
 import { h } from 'preact';
@@ -66,7 +68,8 @@ export default function TabContracts({ agent, agentName, showToast }) {
   const label = (e) => e.contract || (t('organisms.bareContract') || 'contract');
 
   return html`
-    <div class="pf-agd-contracts">
+    <div class="pf-agd-contracts pf-agd-card-grid">
+      <div class="pf-agd-card">
       <div class="pf-agd-section-title">${t('profile.agents.detail.contracts.offersTitle') || 'Contracts this agent offers'}</div>
       <div class="section-desc">${t('profile.agents.detail.contracts.offersDesc') || 'The workspace contracts this agent advertises. Owners see these when choosing an agent for a workspace.'}</div>
       <div class="agc-caps">
@@ -74,8 +77,10 @@ export default function TabContracts({ agent, agentName, showToast }) {
           ? (capabilities.length ? capabilities : ['']).map(c => html`<span class="badge badge-info pj-mini" key=${c}>${'📜 '}${c || (t('organisms.bareContract') || 'contract')}</span>`)
           : html`<span class="pf-agd-empty">${t('profile.agents.detail.contracts.noOffers') || 'This agent advertises no workspace contract (add a workspace-contract + contract.<id> tag in Data Access).'}</span>`}
       </div>
+      </div>
 
-      <div class="pf-agd-section-title agc-mt">${t('profile.agents.detail.contracts.activeTitle') || 'Active in these workspaces'}</div>
+      <div class="pf-agd-card">
+      <div class="pf-agd-section-title">${t('profile.agents.detail.contracts.activeTitle') || 'Active in these workspaces'}</div>
       ${active.length ? html`
         <div class="agc-list">
           ${active.map(e => html`
@@ -92,9 +97,11 @@ export default function TabContracts({ agent, agentName, showToast }) {
             </div>`)}
         </div>`
         : html`<div class="pf-agd-empty">${t('profile.agents.detail.contracts.noneActive') || 'Not active in any workspace yet. Owners adopt this agent from a workspace’s People panel.'}</div>`}
+      </div>
 
       ${retired.length ? html`
-        <div class="pf-agd-section-title agc-mt">${t('profile.agents.detail.contracts.retiredTitle') || 'Retired (history)'}</div>
+        <div class="pf-agd-card pf-agd-card--full">
+        <div class="pf-agd-section-title">${t('profile.agents.detail.contracts.retiredTitle') || 'Retired (history)'}</div>
         <div class="agc-list">
           ${retired.map(e => html`
             <div class="agc-row agc-row--retired" key=${engKey(e)}>
@@ -107,6 +114,7 @@ export default function TabContracts({ agent, agentName, showToast }) {
               <button class="btn-ghost btn-sm" disabled=${busy === engKey(e)}
                 onClick=${() => readopt(e)}>${busy === engKey(e) ? '…' : (t('organisms.reAdopt') || 'Re-adopt')}</button>
             </div>`)}
+        </div>
         </div>` : null}
     </div>`;
 }

package/dist/public/views/profile/agents/tab-data-access.js

@@ -3,6 +3,8 @@
  * @description Data Access tab: shared tags, memory areas, knowledge packages,
  *   and effective scope summary.
  * @version-history
+ *   v1.10.0 -- 2026-07-17 -- Card layout: tags/areas/knowledge/skills sections pair up in
+ *     the shared pf-agd-card-grid; stored keys + scope summary span full width.
  *   v1.0.0 -- 2026-05-24 -- Initial creation for Agent Detail Tab-View
  *   v1.1.0 -- 2026-05-24 -- Add area form (F12), link package (F13), doc count (F14), tags help (F15), scope footer (F16)
  *   v1.2.0 -- 2026-05-30 -- Live-update refresh also re-fetches the currently expanded memory entry's value (was: only the key list refreshed, the open entry stayed stale until the user closed + reopened it or switched tabs). Also stop showing the full-tab "Loading..." overlay on every live-update tick -- it now only shows on initial mount.
@@ -16,6 +18,8 @@
  *   v1.8.0 -- 2026-07-07 -- Stored Memory Keys: expanded entries whose value contains image
  *     URLs (e.g. crews.<agent>.images.* records from the image-maker crew) now render the
  *     image(s) inline as a preview above the raw value, each linking to the full-size file.
+ *   v1.9.0 -- 2026-07-16 -- Mount folds 3 reads into GET /v1/agents/:name/data-access/overview
+ *     (getDataAccessOverview; memory keys metadata-only); individual fan-out kept as fallback.
  */
 
 import { h } from 'preact';
@@ -25,7 +29,7 @@ import { onLiveUpdate } from '/lib/live-updates.js';
 import { t } from '/js/i18n.js';
 import { apiGet, apiPatch } from '/js/api.js';
 import { timeAgo } from '/js/utils.js';
-import { getDirectives, upsertDirectives } from '/js/services/agent-directives.js';
+import { getDirectives, getDataAccessOverview, upsertDirectives } from '/js/services/agent-directives.js';
 import { updateMemoryFull, deleteMemory, createMemory } from '/js/services/memory.js';
 import * as skillsService from '/js/services/skills.js';
 import { useConfirm } from '/components/Modal.js';
@@ -117,18 +121,30 @@ export default function TabDataAccess({ agent, agentName, showToast, allAgents }
   async function loadData({ showSpinner = true } = {}) {
     if (showSpinner) setLoading(true);
     try {
-      const [dirResp, memResp, links] = await Promise.all([
-        getDirectives(agentName).catch(() => null),
-        apiGet(`/v1/memory?prefix=&per_page=100&agent=${encodeURIComponent(agent.gaii || agentName)}`).catch(() => null),
-        skillsService.getAgentSkillLinks(agentName).catch(() => []),
-      ]);
-      const data = dirResp?.data || {};
-      setMemoryAreas(data.memory_areas || []);
-      setResources(data.resources || []);
-      setSkillLinks(links);
-      const items = memResp?.data?.items || memResp?.data || [];
-      const keys = (Array.isArray(items) ? items : [])
-        .map(item => ({ key: item.key, visibility: item.visibility, version: item.version, createdAt: item.created_at ?? item.createdAt, updatedAt: item.updated_at ?? item.updatedAt }));
+      // Mount fold: ONE composite (directives memory areas + resources + agent memory metadata + skill
+      // links). On failure, fall back to the individual three-request fan-out. The composite returns
+      // memory keys already in the rendered shape (metadata only — no values loaded).
+      const ov = await getDataAccessOverview(agentName);
+      let keys;
+      if (ov) {
+        setMemoryAreas(ov.directives?.memory_areas || []);
+        setResources(ov.directives?.resources || []);
+        setSkillLinks(ov.skill_links || []);
+        keys = (ov.memory_keys || []).map(k => ({ key: k.key, visibility: k.visibility, version: k.version, createdAt: k.created_at, updatedAt: k.updated_at }));
+      } else {
+        const [dirResp, memResp, links] = await Promise.all([
+          getDirectives(agentName).catch(() => null),
+          apiGet(`/v1/memory?prefix=&per_page=100&agent=${encodeURIComponent(agent.gaii || agentName)}`).catch(() => null),
+          skillsService.getAgentSkillLinks(agentName).catch(() => []),
+        ]);
+        const data = dirResp?.data || {};
+        setMemoryAreas(data.memory_areas || []);
+        setResources(data.resources || []);
+        setSkillLinks(links);
+        const items = memResp?.data?.items || memResp?.data || [];
+        keys = (Array.isArray(items) ? items : [])
+          .map(item => ({ key: item.key, visibility: item.visibility, version: item.version, createdAt: item.created_at ?? item.createdAt, updatedAt: item.updated_at ?? item.updatedAt }));
+      }
       setMemoryKeys(keys);
 
       // If the user has a memory entry expanded, re-fetch its value too so
@@ -432,9 +448,9 @@ export default function TabDataAccess({ agent, agentName, showToast, allAgents }
   }
 
   return html`
-    <div>
+    <div class="pf-agd-card-grid">
       <!-- SHARED TAGS -->
-      <div class="pf-agd-data-section">
+      <div class="pf-agd-data-section pf-agd-card">
         <div class="pf-agd-section-header">
           <span class="pf-agd-section-title">${t('profile.agents.detail.data_access.sharedTagsTitle')}</span>
           ${tags.length === 0 && !addingTag && html`<span class="pf-agd-none-inline">${t('profile.agents.detail.data_access.noneInline') || 'none'}</span>`}
@@ -467,7 +483,7 @@ export default function TabDataAccess({ agent, agentName, showToast, allAgents }
       </div>
 
       <!-- MEMORY AREAS -->
-      <div class="pf-agd-data-section">
+      <div class="pf-agd-data-section pf-agd-card">
         <div class="pf-agd-section-header">
           <span class="pf-agd-section-title">${t('profile.agents.detail.data_access.memoryAreasTitle')}</span>
           ${!hasAreas && !addingArea && html`<span class="pf-agd-none-inline">${t('profile.agents.detail.data_access.noneInline') || 'none'}</span>`}
@@ -518,7 +534,7 @@ export default function TabDataAccess({ agent, agentName, showToast, allAgents }
       </div>
 
       <!-- KNOWLEDGE PACKAGES -->
-      <div class="pf-agd-data-section">
+      <div class="pf-agd-data-section pf-agd-card">
         <div class="pf-agd-section-header">
           <span class="pf-agd-section-title">${t('profile.agents.detail.data_access.knowledgeTitle')}</span>
           ${!hasResources && !addingPackage && html`<span class="pf-agd-none-inline">${t('profile.agents.detail.data_access.noneInline') || 'none'}</span>`}
@@ -544,7 +560,7 @@ export default function TabDataAccess({ agent, agentName, showToast, allAgents }
       </div>
 
       <!-- SKILLS (registry refs — distinct from knowledge packages) -->
-      <div class="pf-agd-data-section">
+      <div class="pf-agd-data-section pf-agd-card">
         <div class="pf-agd-section-header">
           <span class="pf-agd-section-title">${t('profile.agents.detail.data_access.skillsTitle')}</span>
           ${skillLinks.length === 0 && !addingSkill && html`<span class="pf-agd-none-inline">${t('profile.agents.detail.data_access.noneInline') || 'none'}</span>`}
@@ -576,7 +592,7 @@ export default function TabDataAccess({ agent, agentName, showToast, allAgents }
       </div>
 
       <!-- STORED MEMORY KEYS -->
-      <div class="pf-agd-data-section">
+      <div class="pf-agd-data-section pf-agd-card pf-agd-card--full">
           <div class="pf-agd-section-header">
             <span class="pf-agd-section-title">${t('profile.agents.detail.data_access.storedKeysTitle')}</span>
             ${!hasKeys && !addingKey && html`<span class="pf-agd-none-inline">${t('profile.agents.detail.data_access.noneInline') || 'none'}</span>`}
@@ -667,7 +683,7 @@ export default function TabDataAccess({ agent, agentName, showToast, allAgents }
       </div>
 
       <!-- EFFECTIVE SCOPE SUMMARY -->
-      <div class="pf-agd-scope-summary">
+      <div class="pf-agd-scope-summary pf-agd-card--full">
         ${t('profile.agents.detail.data_access.effectiveScope')}:\n${
           [...memoryAreas.map(a => a.key_prefix || a.key || a), ...tags.map(tag => `agents.tag.${tag}.*`), 'agents.shared.index'].join(', ')
         }${hasResources ? `\n${t('profile.agents.detail.data_access.knowledgeTitle')}: ${resources.map(r => r.name || r.url || r).join(', ')}` : ''}

package/dist/public/views/profile/agents/tab-directives.js

@@ -4,6 +4,7 @@
  *   View mode shows formatted text; edit mode uses a single textarea.
  *   Memory areas, knowledge packages, and config files live in their own tabs.
  * @version-history
+ *   v2.2.0 -- 2026-07-17 -- Tab content wrapped in a single pf-agd-card.
  *   v2.0.0 -- 2026-05-24 -- C5: rewrite as full structured text editor; M6: no SSE listener (owner-initiated only)
  *   v2.1.0 -- 2026-05-31 -- Fix: behavioral directives were sent as `content` (a
  *     field the API/storage doesn't have) so they silently vanished on save.
@@ -114,7 +115,7 @@ export default function TabDirectives({ agentName, showToast }) {
   const hasContent = purpose || content;
 
   return html`
-    <div>
+    <div class="pf-agd-card">
       ${!editing ? html`
         <!-- View mode -->
         <div class="pf-agd-section-header">