aimeat 1.40.0 → 2.0.0

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">

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

@@ -4,6 +4,11 @@
  *   during onboarding or production status (connection, platform, readiness,
  *   identity, delivery log) after completion.
  * @version-history
+ *   v1.8.0 -- 2026-07-17 -- Card scheme generalized: pf-agd-prod-grid renamed to the
+ *     shared pf-agd-card-grid; production sections carry pf-agd-card / --full.
+ *   v1.9.0 -- 2026-07-16 -- Mount folds webhook + delivery-log + onboarding-checklist into GET
+ *     /v1/agents/:name/integration/overview (getIntegrationOverview); skill-bundle version stays a
+ *     separate request; individual reads kept as fallback.
  *   v1.8.0 -- 2026-06-30 -- Onboarding checklist step labels use tOr() so a missing
  *     agentOnboarding.steps.* key falls back to the server-provided step.title (which carries
  *     the howTo-enriched onboarding payload) instead of rendering the raw i18n key.
@@ -14,6 +19,12 @@
  *     payloads -- dropped 3 copied-state useState hooks, 3 hand-rolled handlers, the
  *     copied-flag params threaded through both render functions, and the local
  *     copyToClipboard import.
+ *   v1.7.0 -- 2026-07-17 -- Production view: sections become cards in a responsive
+ *     two-column grid (pf-agd-prod-grid; Readiness + Delivery log full-width) and the
+ *     ambiguous second "Version" row is labelled "Bundle version" (new i18n key).
+ *   v1.6.0 -- 2026-07-17 -- Onboarding view: merge the checklist title + readiness score +
+ *     duplicate "Progress: N/M  X%" row into ONE canonical section header above the
+ *     progress bar (the zone-2 banner already repeats the same progress).
  *   v1.5.0 -- 2026-05-31 -- Live-update refresh no longer toggles the full-tab loading
  *     placeholder (added a showSpinner option). During Hello Integration the agent
  *     posts steps/telemetry rapidly, so the frequent SSE ticks were re-rendering the
@@ -37,7 +48,7 @@ import { timeAgo } from '/js/utils.js';
 import { CopyButton } from '/components/CopyButton.js';
 import { detectAgentState } from './state-detector.js';
 import {
-  getOnboarding, startOnboarding,
+  getOnboarding, startOnboarding, getIntegrationOverview,
   getWebhookConfig, testWebhook, updateWebhook,
   getSkillBundleVersion, getSkillBundleUrl, updateSkillBundle,
   getDeliveryLog
@@ -64,16 +75,28 @@ export default function TabIntegration({ agent, onboarding, showToast, agentName
   const loadData = useCallback(async ({ showSpinner = true } = {}) => {
     if (showSpinner) setLoading(true);
     try {
-      const [whResp, sbResp, dlResp, obResp] = await Promise.all([
-        getWebhookConfig(agentName).catch(() => null),
+      // Mount fold: ONE composite (webhook + delivery log + onboarding checklist) plus the skill-bundle
+      // version, which stays separate (bundle-generation pipeline, not a read). On composite failure, fall
+      // back to the individual reads. Each composite sub-object mirrors the matching endpoint's `.data`.
+      const [ov, sbResp] = await Promise.all([
+        getIntegrationOverview(agentName),
         getSkillBundleVersion(agentName).catch(() => null),
-        getDeliveryLog(agentName, 10).catch(() => null),
-        getOnboarding(agentName).catch(() => null),
       ]);
-      setWebhook(whResp?.data || null);
       setBundleVersion(sbResp?.data || null);
-      setDeliveries(dlResp?.data?.deliveries || []);
-      setPostChecklist(obResp?.data?.post_onboarding_checklist || null);
+      if (ov) {
+        setWebhook(ov.webhook || null);
+        setDeliveries(ov.deliveries?.deliveries || []);
+        setPostChecklist(ov.onboarding?.post_onboarding_checklist || null);
+      } else {
+        const [whResp, dlResp, obResp] = await Promise.all([
+          getWebhookConfig(agentName).catch(() => null),
+          getDeliveryLog(agentName, 10).catch(() => null),
+          getOnboarding(agentName).catch(() => null),
+        ]);
+        setWebhook(whResp?.data || null);
+        setDeliveries(dlResp?.data?.deliveries || []);
+        setPostChecklist(obResp?.data?.post_onboarding_checklist || null);
+      }
     } catch { /* silent */ }
     if (showSpinner) setLoading(false);
   }, [agentName]);
@@ -225,17 +248,17 @@ function renderOnboardingView(onboarding, agentName, handleRerun, rerunning, cur
   return html`
     <div>
       <div class="pf-agd-section">
-        <div class="pf-agd-section-label">
-          ${t('profile.agents.detail.integration.checklistTitle')}
-          ${' -- '}${t('profile.agents.detail.integration.readinessScore')}: ${pct > 0 ? `${pct} / 100` : '--'}
+        <div class="pf-agd-section-header">
+          <span class="pf-agd-section-label">
+            ${t('profile.agents.detail.integration.checklistTitle')}: ${passed}/${total}
+          </span>
+          <span class="pf-agd-section-label">
+            ${t('profile.agents.detail.integration.readinessScore')}: ${pct > 0 ? `${pct} / 100` : '--'}
+          </span>
         </div>
         <div class="pf-agd-progress-bar">
           <div class="pf-agd-progress-fill" style="width: ${pct}%"></div>
         </div>
-        <div class="pf-agd-section-header pf-agd-progress-header">
-          <span>${t('profile.agents.detail.integration.progress')}: ${passed}/${total}</span>
-          <span>${pct}%</span>
-        </div>
       </div>
 
       <div class="pf-agd-checklist">
@@ -300,9 +323,9 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
     : t('profile.agents.detail.integration.manual');
 
   return html`
-    <div>
+    <div class="pf-agd-card-grid">
       <!-- CONNECTION -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card">
         <div class="pf-agd-section-label">${t('profile.agents.detail.connection')}</div>
         <div class="pf-agd-info-row">
           <span class="pf-agd-info-label">${t('profile.agents.detail.integration.deliveryMethod')}</span>
@@ -386,7 +409,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
       </div>
 
       <!-- PLATFORM & SKILL -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card">
         <div class="pf-agd-section-label">${t('profile.agents.detail.platform')} & ${t('profile.agents.detail.skillBundle')}</div>
         <div class="pf-agd-info-row">
           <span class="pf-agd-info-label">${t('profile.agents.detail.platform')}</span>
@@ -402,7 +425,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
         </div>
         ${bundleVersion ? html`
           <div class="pf-agd-info-row">
-            <span class="pf-agd-info-label">${t('profile.agents.skillBundle.versionLabel')}</span>
+            <span class="pf-agd-info-label">${t('profile.agents.skillBundle.bundleVersionLabel')}</span>
             <span class="pf-agd-info-value">${bundleVersion.version || '--'}</span>
           </div>
         ` : ''}
@@ -420,7 +443,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
       </div>
 
       <!-- READINESS -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card pf-agd-card--full">
         <div class="pf-agd-section-label">${t('profile.agents.detail.readiness')}</div>
         <div class="pf-agd-step-pills">
           ${steps.map(s => html`
@@ -460,7 +483,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
 
       <!-- POST-ONBOARDING SETUP -->
       ${postChecklist && html`
-        <div class="pf-agd-section">
+        <div class="pf-agd-section pf-agd-card">
           <div class="pf-agd-section-label">${t('profile.agents.detail.integration.postOnboardingSetup')}</div>
           <div class="pf-agd-info-row">
             <span class="pf-agd-info-label">${t('profile.agents.detail.integration.commandsRegistered')}</span>
@@ -496,7 +519,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
       `}
 
       <!-- IDENTITY -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card">
         <div class="pf-agd-section-label">${t('profile.agents.detail.identity')}</div>
         <div class="pf-agd-info-row">
           <span class="pf-agd-info-label">GAII</span>
@@ -523,7 +546,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
       </div>
 
       <!-- DELIVERY LOG -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card pf-agd-card--full">
         <div class="pf-agd-section-label">${t('profile.agents.detail.deliveryLog')}</div>
         ${displayDeliveries.length > 0 ? html`
           <table class="pf-agd-delivery-log">

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

@@ -3,6 +3,9 @@
  * @description Messages tab with command palette, "/" autocomplete, and chat area.
  *   Wraps the existing messages subtab and adds command discovery.
  * @version-history
+ *   v1.7.0 -- 2026-07-16 -- Mount folds commands + threads + messages into GET /v1/agents/:name/messages/overview
+ *     (getMessagesOverview); the [activeThread] effect skips its first run so the composite is the only
+ *     initial load; individual reads kept as fallback.
  *   v1.6.0 -- 2026-06-10 -- Empty command palette is one quiet line ("Agent commands — none
  *     registered"), not an expandable empty box.
  *   v1.5.0 -- 2026-06-06 -- Thread buttons: fix field-name mismatch (use threadId/lastMessage from the
@@ -27,7 +30,7 @@ import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
 import { t } from '/js/i18n.js';
 import { timeAgo } from '/js/utils.js';
-import { sendMessage, listMessages, listThreads } from '/js/services/agent-messages.js';
+import { sendMessage, listMessages, listThreads, getMessagesOverview } from '/js/services/agent-messages.js';
 import { getAgentCommands } from '/js/services/agent-integration.js';
 import { Markdown } from '/components/Markdown.js';
 
@@ -113,6 +116,15 @@ export default function TabMessages({ agent, agentName, showToast }) {
   const [pendingPrompt, setPendingPrompt] = useState(null); // { promptId, threadId } | null
   const historyRef = useRef(null);
   const inputRef = useRef(null);
+  // The [activeThread] effect below also fires on mount; skip its first run so the mount composite is the
+  // only thing that loads messages initially (it would otherwise double-load the page-1 history).
+  const threadMounted = useRef(false);
+
+  function applyCommands(value) {
+    if (Array.isArray(value)) setCommands(value);
+    else if (typeof value === 'string') { try { setCommands(JSON.parse(value)); } catch { setCommands([]); } }
+    else setCommands([]);
+  }
 
   async function loadCommands() {
     try {
@@ -145,14 +157,33 @@ export default function TabMessages({ agent, agentName, showToast }) {
   }
 
   useEffect(() => {
-    loadCommands();
-    loadThreads();
-    loadMessages();
+    // Mount fold: ONE composite (commands + enriched threads + page-1 messages). On failure, fall back to
+    // the individual reads. Reset the thread-mounted guard so the [activeThread] effect skips its first run
+    // for this agent (the composite already seeded the messages).
+    threadMounted.current = false;
+    (async () => {
+      const ov = await getMessagesOverview(agentName);
+      if (ov) {
+        applyCommands(ov.commands);
+        setThreads(ov.threads || []);
+        setMessages(ov.messages?.messages || []);
+        setLoading(false);
+        return;
+      }
+      loadCommands();
+      loadThreads();
+      loadMessages();
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps -- Full initial load on mount and when the agent changes; the loaders also close over activeThread, but re-keying on it would double-fetch (activeThread is handled by the effect below).
   }, [agentName]);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- Reload messages when the active thread changes; loadMessages also depends on agentName, which the mount effect above already handles.
-  useEffect(() => { loadMessages(); }, [activeThread]);
+  useEffect(() => {
+    // Reload messages when the active thread CHANGES; the first run (mount) is skipped because the mount
+    // composite already loaded the page-1 history.
+    if (!threadMounted.current) { threadMounted.current = true; return; }
+    loadMessages();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeThread]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps -- Re-subscribe when the agent or active thread changes; the callback reads the current loaders via closure (fresh for these deps).
   useEffect(() => onLiveUpdate(['agent-messages'], () => { loadMessages(); loadThreads(); loadCommands(); }), [agentName, activeThread]);

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

@@ -10,6 +10,10 @@
  * @structure default export TabQuality({ agentName })
  * @usage rendered by agent-card.js renderTabContent() for the 'quality' tab
  * @version-history
+ *   v1.5.0 -- 2026-07-17 -- Card layout: performance full-width, reviews|rate side by
+ *     side, custom metrics full-width (shared pf-agd-card-grid scheme).
+ *   v1.4.0 -- 2026-07-16 -- Mount folds statistics + done-tasks into GET /v1/agents/:name/quality/overview
+ *     (getQualityOverview); individual statistics + done-tasks reads kept as fallback.
  *   v1.3.0 -- 2026-06-10 -- Deliverable rows show date+time (identical titles must be
  *     tellable apart) and unrated rows rate via INLINE stars (click submits immediately);
  *     the modal remains for re-rates (context/comment).
@@ -27,7 +31,7 @@ import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
 import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
 import { t } from '/js/i18n.js';
-import { getAgentStatistics, listTasks, rateTask } from '/js/services/agent-tasks.js';
+import { getAgentStatistics, getQualityOverview, listTasks, rateTask } from '/js/services/agent-tasks.js';
 import RateModal from './rate-modal.js';
 
 const html = htm.bind(h);
@@ -85,12 +89,20 @@ export default function TabQuality({ agentName, showToast }) {
     // live-update refetches -- swaps in fresh data in place without flashing an
     // empty tab. A transient error keeps the last good data rather than clearing.
     try {
-      const [statsResp, tasksResp] = await Promise.all([
-        getAgentStatistics(agentName),
-        listTasks(agentName, { status: 'done', per_page: 100 }).catch(() => null),
-      ]);
-      if (statsResp?.data) setData(statsResp.data);
-      setDoneTasks(tasksResp?.data?.tasks || []);
+      // Mount fold: ONE composite (recomputed statistics + done tasks). On failure, fall back to the
+      // individual two-request fan-out.
+      const ov = await getQualityOverview(agentName);
+      if (ov) {
+        if (ov.statistics) setData(ov.statistics);
+        setDoneTasks(ov.done_tasks || []);
+      } else {
+        const [statsResp, tasksResp] = await Promise.all([
+          getAgentStatistics(agentName),
+          listTasks(agentName, { status: 'done', per_page: 100 }).catch(() => null),
+        ]);
+        if (statsResp?.data) setData(statsResp.data);
+        setDoneTasks(tasksResp?.data?.tasks || []);
+      }
     } catch { /* keep showing the last good data on a transient error */ }
     setLoading(false);
   }, [agentName]);
@@ -143,8 +155,9 @@ export default function TabQuality({ agentName, showToast }) {
   const durKeys = Object.keys(durByContext);
 
   return html`
-    <div class="pf-agd-quality">
+    <div class="pf-agd-quality pf-agd-card-grid">
       <!-- Performance -->
+      <div class="pf-agd-card pf-agd-card--full">
       <div class="pf-agd-section-title">${t('profile.agents.detail.quality.performanceTitle')}</div>
       <div class="pf-agd-quality-desc">${t('profile.agents.detail.quality.performanceDesc')}</div>
       <div class="stat-grid">
@@ -179,7 +192,10 @@ export default function TabQuality({ agentName, showToast }) {
         </div>
       `}
 
+      </div>
+
       <!-- Reviews by context -->
+      <div class="pf-agd-card">
       <div class="pf-agd-section-title">${t('profile.agents.detail.quality.reviewsTitle')}</div>
       <div class="pf-agd-quality-desc">${t('profile.agents.detail.quality.reviewsDesc')}</div>
       ${contextKeys.length === 0
@@ -207,7 +223,10 @@ export default function TabQuality({ agentName, showToast }) {
           </div>
         `}
 
+      </div>
+
       <!-- Rate deliverables (completed tasks the owner can rate) -->
+      <div class="pf-agd-card">
       <div class="pf-agd-section-title">${t('profile.agents.detail.quality.pendingTitle')}</div>
       <div class="pf-agd-quality-desc">${t('profile.agents.detail.quality.pendingDesc')}</div>
       ${doneTasks.length === 0
@@ -228,7 +247,10 @@ export default function TabQuality({ agentName, showToast }) {
           </div>
         `}
 
+      </div>
+
       <!-- Custom metrics -->
+      <div class="pf-agd-card pf-agd-card--full">
       <div class="pf-agd-section-title">${t('profile.agents.detail.quality.customTitle')}</div>
       <div class="pf-agd-quality-desc">${t('profile.agents.detail.quality.customDesc')}</div>
       ${custom.length === 0
@@ -244,6 +266,8 @@ export default function TabQuality({ agentName, showToast }) {
           </div>
         `}
 
+      </div>
+
       <${RateModal}
         open=${!!rateTarget}
         onClose=${() => setRateTarget(null)}