aimeat 1.40.0 → 2.0.0

package/dist/public/views/portal-dev.panels.js

@@ -29,135 +29,129 @@ function McpPanel({ locale, isLoggedIn, session }) {
     setTimeout(() => setCopied(false), 2000);
   }, [mcpUrl]);
 
-  const tabStyle = (tab) => `padding:.4rem .75rem;border:none;border-radius:.25rem .25rem 0 0;cursor:pointer;font-size:.8rem;font-weight:600;${
-    setupTab === tab
-      ? 'background:rgba(130,100,255,.15);color:var(--accent,#a78bfa)'
-      : 'background:transparent;color:var(--muted)'
-  }`;
-
   return html`
     <div class="dv-panel">
       <h3>${dt('panel.mcpBadge', locale)}</h3>
 
       ${!isLoggedIn && html`
-        <div class="dv-mcp-prereq" style="background:rgba(255,180,0,.08);border:1px solid rgba(255,180,0,.25);border-radius:.5rem;padding:.75rem 1rem;margin-bottom:1rem">
+        <div class="dv-callout dv-callout--warn">
           <strong>${dt('panel.mcpPrereqTitle', locale)}</strong>
-          <p style="margin:.5rem 0 0;font-size:.9rem" dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.mcpPrereqDesc', locale)) }}></p>
+          <p class="dv-p-mt-lg" dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.mcpPrereqDesc', locale)) }}></p>
         </div>
       `}
 
       ${isLoggedIn && session?.gaii && html`
-        <div style="background:rgba(100,255,150,.08);border:1px solid rgba(100,255,150,.25);border-radius:.5rem;padding:.75rem 1rem;margin-bottom:1rem">
+        <div class="dv-callout dv-callout--success">
           <strong>${dt('panel.mcpReady', locale)}</strong>
-          <div style="margin-top:.5rem;font-size:.85rem">
+          <div class="dv-mt-sm">
             <div><strong>GHII:</strong> ${session.ghii || '-'}</div>
             <div><strong>Agent GAII:</strong> <code>${session.gaii}</code></div>
           </div>
-          <p style="margin:.5rem 0 0;font-size:.85rem;color:var(--muted)" dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.mcpReadyDesc', locale)) }}></p>
+          <p class="dv-p-mt-muted" dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.mcpReadyDesc', locale)) }}></p>
         </div>
       `}
 
       ${isLoggedIn && html`
-        <div style="background:rgba(130,100,255,.08);border:1px solid rgba(130,100,255,.25);border-radius:.5rem;padding:.75rem 1rem;margin-bottom:1rem">
+        <div class="dv-callout dv-callout--purple">
           <strong>${dt('panel.mcpSetupTitle', locale)}</strong>
-          <p style="margin:.5rem 0 0;font-size:.85rem" dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.mcpSetupDesc', locale)) }}></p>
+          <p class="dv-p-mt" dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.mcpSetupDesc', locale)) }}></p>
 
           <!-- Platform tabs -->
-          <div style="display:flex;gap:2px;margin-top:.75rem;border-bottom:1px solid rgba(130,100,255,.2)">
-            <button type="button" style="${tabStyle('code')}" onClick=${() => setSetupTab('code')}>
+          <div class="dv-setup-tabs">
+            <button type="button" class=${`dv-setup-tab ${setupTab === 'code' ? 'active' : ''}`} onClick=${() => setSetupTab('code')}>
               Claude Code
             </button>
-            <button type="button" style="${tabStyle('cowork')}" onClick=${() => setSetupTab('cowork')}>
+            <button type="button" class=${`dv-setup-tab ${setupTab === 'cowork' ? 'active' : ''}`} onClick=${() => setSetupTab('cowork')}>
               Claude Desktop
             </button>
-            <button type="button" style="${tabStyle('chat')}" onClick=${() => setSetupTab('chat')}>
+            <button type="button" class=${`dv-setup-tab ${setupTab === 'chat' ? 'active' : ''}`} onClick=${() => setSetupTab('chat')}>
               Claude.ai Chat
             </button>
           </div>
 
           <!-- Tab content -->
-          <div style="padding:.75rem 0 0">
+          <div class="dv-tab-content">
             ${setupTab === 'code' && html`
-              <p style="font-size:.82rem;color:var(--muted);margin:0 0 .75rem">
+              <p class="dv-panel-desc">
                 ${dt('panel.mcpSetupCodeDesc', locale)}
               </p>
-              <div style="margin-bottom:.75rem">
-                <div style="font-size:.8rem;color:var(--muted);margin-bottom:.25rem">${dt('panel.mcpCodeRunThis', locale)}</div>
-                <div style="display:flex;align-items:center;gap:.5rem">
-                  <code style="font-size:.78rem;background:var(--code-bg);padding:.4rem .6rem;border-radius:.25rem;user-select:all;flex:1;word-break:break-all">claude mcp add aimeat --transport http ${mcpUrl}</code>
+              <div class="dv-field">
+                <div class="dv-field-label">${dt('panel.mcpCodeRunThis', locale)}</div>
+                <div class="dv-code-row">
+                  <code class="dv-code">claude mcp add aimeat --transport http ${mcpUrl}</code>
                   <button type="button" onClick=${copyCommand}
-                    style="padding:.3rem .6rem;background:var(--love1,#E8564A);color:#fff;border:none;border-radius:.25rem;cursor:pointer;font-size:.75rem;white-space:nowrap">
+                    class="dv-copy-btn">
                     ${copied ? dt('panel.mcpCopied', locale) : dt('panel.mcpCopyCommand', locale)}
                   </button>
                 </div>
               </div>
-              <p style="font-size:.8rem;color:var(--muted);margin:0;font-style:italic">
+              <p class="dv-hint">
                 ${dt('panel.mcpCodeOAuthNote', locale)}
               </p>
             `}
 
             ${setupTab === 'cowork' && html`
-              <p style="font-size:.82rem;color:var(--muted);margin:0 0 .75rem">
+              <p class="dv-panel-desc">
                 ${dt('panel.mcpSetupCoworkDesc', locale)}
               </p>
-              <div style="font-size:.85rem">
-                <ol style="margin:0;padding-left:1.25rem;line-height:1.8">
+              <div class="dv-block-sm">
+                <ol class="dv-steps">
                   <li>${dt('panel.mcpDesktopStep1', locale)}
-                    <div style="margin:.5rem 0">
+                    <div class="dv-step-media">
                       <img src="/assets/mcp_1_add_custom_connector.png" alt="Add custom connector dialog"
-                        style="max-width:100%;border-radius:.5rem;border:1px solid var(--border,rgba(255,255,255,.1))" />
+                        class="dv-step-img" />
                     </div>
                   </li>
                   <li>${dt('panel.mcpDesktopStep2', locale)}
-                    <div style="display:flex;align-items:center;gap:.5rem;margin:.4rem 0">
-                      <code style="font-size:.78rem;background:var(--code-bg);padding:.25rem .5rem;border-radius:.25rem;user-select:all">${mcpUrl}</code>
+                    <div class="dv-step-row">
+                      <code class="dv-code--inline">${mcpUrl}</code>
                       <button type="button" onClick=${copyUrl}
-                        style="padding:.2rem .5rem;background:rgba(130,100,255,.15);color:var(--accent,#a78bfa);border:1px solid rgba(130,100,255,.3);border-radius:.25rem;cursor:pointer;font-size:.75rem;white-space:nowrap">
+                        class="dv-copy-btn--alt">
                         ${copied ? dt('panel.mcpCopied', locale) : dt('panel.mcpCopyUrl', locale)}
                       </button>
                     </div>
                   </li>
                   <li>${dt('panel.mcpDesktopStep3', locale)}
-                    <div style="margin:.5rem 0">
+                    <div class="dv-step-media">
                       <img src="/assets/mcp_2_connect_disconnect_connector.png" alt="Connected connector with options"
-                        style="max-width:100%;border-radius:.5rem;border:1px solid var(--border,rgba(255,255,255,.1))" />
+                        class="dv-step-img" />
                     </div>
                   </li>
                   <li>${dt('panel.mcpDesktopStep4', locale)}</li>
                 </ol>
-                <p style="margin-top:.75rem;font-size:.8rem;color:var(--muted);font-style:italic">${dt('panel.mcpDesktopNote', locale)}</p>
+                <p class="dv-note">${dt('panel.mcpDesktopNote', locale)}</p>
               </div>
             `}
 
             ${setupTab === 'chat' && html`
-              <div style="font-size:.85rem">
-                <p style="margin:0 0 .75rem;color:var(--muted)">${dt('panel.mcpSetupChatDesc', locale)}</p>
-                <ol style="margin:0;padding-left:1.25rem;line-height:1.6">
+              <div class="dv-block-sm">
+                <p class="dv-p-desc-muted">${dt('panel.mcpSetupChatDesc', locale)}</p>
+                <ol class="dv-steps dv-steps--tight">
                   <li>${dt('panel.mcpChatStep1', locale)}</li>
                   <li>${dt('panel.mcpChatStep2', locale)}
-                    <div style="margin:.5rem 0">
+                    <div class="dv-step-media">
                       <img src="/assets/mcp_1_add_custom_connector.png" alt="Add custom connector dialog"
-                        style="max-width:100%;border-radius:.5rem;border:1px solid var(--border,rgba(255,255,255,.1))" />
+                        class="dv-step-img" />
                     </div>
                   </li>
                   <li>${dt('panel.mcpChatStep3', locale)}
-                    <div style="display:flex;align-items:center;gap:.5rem;margin:.4rem 0">
-                      <code style="font-size:.8rem;background:var(--code-bg);padding:.25rem .5rem;border-radius:.25rem;user-select:all">${mcpUrl}</code>
+                    <div class="dv-step-row">
+                      <code class="dv-code--inline-sm">${mcpUrl}</code>
                       <button type="button" onClick=${copyUrl}
-                        style="padding:.2rem .5rem;background:rgba(130,100,255,.15);color:var(--accent,#a78bfa);border:1px solid rgba(130,100,255,.3);border-radius:.25rem;cursor:pointer;font-size:.75rem;white-space:nowrap">
+                        class="dv-copy-btn--alt">
                         ${copied ? dt('panel.mcpCopied', locale) : dt('panel.mcpCopyUrl', locale)}
                       </button>
                     </div>
                   </li>
                   <li>${dt('panel.mcpChatStep4', locale)}</li>
                   <li>${dt('panel.mcpChatStep5', locale)}
-                    <div style="margin:.5rem 0">
+                    <div class="dv-step-media">
                       <img src="/assets/mcp_2_connect_disconnect_connector.png" alt="Connected connector ready to use"
-                        style="max-width:100%;border-radius:.5rem;border:1px solid var(--border,rgba(255,255,255,.1))" />
+                        class="dv-step-img" />
                     </div>
                   </li>
                 </ol>
-                <p style="margin-top:.75rem;font-size:.8rem;color:var(--muted);font-style:italic">${dt('panel.mcpChatNote', locale)}</p>
+                <p class="dv-note">${dt('panel.mcpChatNote', locale)}</p>
               </div>
             `}
           </div>
@@ -169,18 +163,18 @@ function McpPanel({ locale, isLoggedIn, session }) {
       </div>
 
       ${isLoggedIn && html`
-        <div style="margin-top:.75rem;padding:.5rem .75rem;background:rgba(100,200,255,.06);border:1px solid rgba(100,200,255,.15);border-radius:.25rem;font-size:.82rem">
+        <div class="dv-info-box">
           <span dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.mcpProfileLink', locale)) }}></span>
           ${' '}
-          <a href="/v1/profile#mcp" style="color:var(--accent,#a78bfa);text-decoration:underline">
+          <a href="/v1/profile#mcp" class="dv-link">
             ${dt('panel.mcpProfileLinkAction', locale)}
           </a>
         </div>
       `}
 
-      <details style="margin-top:.75rem;font-size:.85rem">
-        <summary style="cursor:pointer;color:var(--muted)">${dt('panel.mcpAuthDetails', locale)}</summary>
-        <div style="margin-top:.5rem;padding:.5rem;background:rgba(255,255,255,.03);border-radius:.25rem" dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.mcpAuthExplain', locale)) }}></div>
+      <details class="dv-details">
+        <summary class="dv-details-summary">${dt('panel.mcpAuthDetails', locale)}</summary>
+        <div class="dv-details-body" dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.mcpAuthExplain', locale)) }}></div>
       </details>
     </div>
   `;
@@ -212,8 +206,8 @@ function BrowsePanel({ locale, onSwitchToPromptPackage }) {
         <${CopyBtn} text=${prompt} locale=${locale} />
         <div class="dv-prompt-text">${prompt}</div>
       </div>
-      <h3 style="margin-top:1rem">${dt('panel.browseUpgradeTitle', locale)}</h3>
-      <ul style="margin-left:1.5rem">
+      <h3 class="dv-mt">${dt('panel.browseUpgradeTitle', locale)}</h3>
+      <ul class="dv-ul-indent">
         <li>${dt('panel.browseUpgrade1', locale)}</li>
         <li>${dt('panel.browseUpgrade2', locale)}</li>
         ${(() => {
@@ -252,8 +246,8 @@ function PromptPackagePanel({ locale, platform, variant, isLoggedIn }) {
       <h3>${dt('panel.promptBadge', locale)}</h3>
       <p dangerouslySetInnerHTML=${{ __html: sanitizeHtml(dt('panel.promptDesc', locale)) }}></p>
       ${isLoggedIn
-        ? html`<p style="color:var(--success);font-size:.85rem">\u2705 ${dt('panel.promptLoggedIn', locale)}</p>`
-        : html`<p style="color:var(--muted);font-size:.85rem">\ud83d\udc64 ${dt('panel.promptAnon', locale)}</p>`
+        ? html`<p class="dv-ok-line">\u2705 ${dt('panel.promptLoggedIn', locale)}</p>`
+        : html`<p class="dv-muted-line">\ud83d\udc64 ${dt('panel.promptAnon', locale)}</p>`
       }
       <div class="dv-goals">
         ${GOAL_LIST.map(g => html`
@@ -310,13 +304,13 @@ function CapTabs({ variant, platform, locale, isLoggedIn, session }) {
       `}
       ${activeTab === 'mcp' && (hasMcp
         ? html`<${McpPanel} locale=${locale} isLoggedIn=${isLoggedIn} session=${session} />`
-        : html`<div class="dv-unavail-notice"><div class="dv-unavail-icon">\ud83d\udd12</div><p>${dt('tabs.unavailable', locale)}</p><p style="font-size:.8rem;margin-top:.5rem">${dt('tabs.upgradeForMcp', locale)}</p></div>`
+        : html`<div class="dv-unavail-notice"><div class="dv-unavail-icon">\ud83d\udd12</div><p>${dt('tabs.unavailable', locale)}</p><p class="dv-unavail-sub">${dt('tabs.upgradeForMcp', locale)}</p></div>`
       )}
       ${activeTab === 'api' && (hasApi
         ? (variant.path === 'browse'
             ? html`<${BrowsePanel} locale=${locale} onSwitchToPromptPackage=${() => setActiveTab('apps')} />`
             : html`<${ApiPanel} locale=${locale} />`)
-        : html`<div class="dv-unavail-notice"><div class="dv-unavail-icon">\ud83d\udd12</div><p>${dt('tabs.unavailable', locale)}</p><p style="font-size:.8rem;margin-top:.5rem">${dt('tabs.upgradeForApi', locale)}</p></div>`
+        : html`<div class="dv-unavail-notice"><div class="dv-unavail-icon">\ud83d\udd12</div><p>${dt('tabs.unavailable', locale)}</p><p class="dv-unavail-sub">${dt('tabs.upgradeForApi', locale)}</p></div>`
       )}
     </div>
   `;

package/dist/public/views/portal.components.js

@@ -1,21 +1,21 @@
-/**
- * @file public/views/portal.components.js
- * @description Portal feed / prompt / world sub-components (OnelinersFeed, PromptSection, UserWorldAccordion, TheWorld). Extracted from portal.js to satisfy max-file-lines.
- * @version-history
- *   v1.0.0 — 2026-07-13 — Extracted from views/portal.js (max-file-lines)
- */
-import { h } from "preact";
-import { useState, useEffect, useCallback } from "preact/hooks";
-import htm from "htm";
-import { t } from "/js/i18n.js";
-import { CopyButton as BaseCopyButton } from "/components/CopyButton.js";
-import { StatusDot } from "/components/StatusDot.js";
-import { hasAuth, getCurrentSession, timeAgo } from "./portal.helpers.js";
-import { buildMainPrompt, buildFullBuilderPrompt, buildAgentPrompt, buildConnectPrompt } from "./portal.prompts.js";
-
-const html = htm.bind(h);
-const NODE_URL = window.location.origin;
-
+/**
+ * @file public/views/portal.components.js
+ * @description Portal feed / prompt / world sub-components (OnelinersFeed, PromptSection, UserWorldAccordion, TheWorld). Extracted from portal.js to satisfy max-file-lines.
+ * @version-history
+ *   v1.0.0 — 2026-07-13 — Extracted from views/portal.js (max-file-lines)
+ */
+import { h } from "preact";
+import { useState, useEffect, useCallback } from "preact/hooks";
+import htm from "htm";
+import { t } from "/js/i18n.js";
+import { CopyButton as BaseCopyButton } from "/components/CopyButton.js";
+import { StatusDot } from "/components/StatusDot.js";
+import { hasAuth, getCurrentSession, timeAgo } from "./portal.helpers.js";
+import { buildMainPrompt, buildFullBuilderPrompt, buildAgentPrompt, buildConnectPrompt } from "./portal.prompts.js";
+
+const html = htm.bind(h);
+const NODE_URL = window.location.origin;
+
 function pickProvocation() {
   const lines = t('portal.provocation.lines');
   const weights = t('portal.provocation.weights');
@@ -195,28 +195,13 @@ function UserWorldAccordion() {
         </div>
       </details>
 
-      <!-- Marketplace -->
-      <details class="user-world-item">
-        <summary class="user-world-summary">\u{1F6D2} ${t('portal.userWorld.marketplace.title')}</summary>
-        <div class="user-world-content">
-          <div class="user-world-desc">${t('portal.userWorld.marketplace.desc')}</div>
-          <div class="user-link-row">
-            <a class="user-link-btn" href="/v1/marketplace">${t('portal.userWorld.marketplace.open')}</a>
-            <a class="user-link-btn" href="/v1/profile?tab=services">${t('portal.userWorld.marketplace.manage')}</a>
-          </div>
-        </div>
-      </details>
-
       <!-- Recent Services -->
       <details class="user-world-item">
         <summary class="user-world-summary">\u{1F9ED} ${t('portal.userWorld.services.title')}</summary>
         <div class="user-world-content">
           <div class="user-world-desc">${t('portal.userWorld.services.desc')}</div>
           <div class="user-link-row">
-            <a class="user-link-btn" href="/v1/hobbies">${t('portal.userWorld.services.hobbies')}</a>
-            <a class="user-link-btn" href="/v1/guides">${t('portal.userWorld.services.guides')}</a>
             <a class="user-link-btn" href="/v1/aimeat-os">${t('portal.userWorld.services.aimeatOs')}</a>
-            <a class="user-link-btn" href="/v1/openclaw">${t('portal.userWorld.services.openclaw')}</a>
             <a class="user-link-btn" href="/app-catalog.html">${t('portal.userWorld.services.catalog')}</a>
           </div>
         </div>
@@ -290,9 +275,6 @@ export function TheWorld({ navigate }) {
         <div class="prompt-actions">
           <${CopyButton} text=${connectPr} label=${t('portal.world.connect.copyBtn')} copiedLabel=${t('portal.world.connect.copied')} />
         </div>
-        <div style="margin-top:0.75rem;text-align:center">
-          <a href="/v1/openclaw" class="connect-link">${t('portal.world.connect.readMore')} \u2192</a>
-        </div>
       </div>
 
       <!-- Services / Builders -->

package/dist/public/views/portal.prompts.js

@@ -1,12 +1,12 @@
-/**
- * @file public/views/portal.prompts.js
- * @description Portal mega-prompt builders (always English). Extracted from portal.js to satisfy max-file-lines.
- * @version-history
- *   v1.0.0 — 2026-07-13 — Extracted from views/portal.js (max-file-lines)
- */
-
-const NODE_URL = window.location.origin;
-
+/**
+ * @file public/views/portal.prompts.js
+ * @description Portal mega-prompt builders (always English). Extracted from portal.js to satisfy max-file-lines.
+ * @version-history
+ *   v1.0.0 — 2026-07-13 — Extracted from views/portal.js (max-file-lines)
+ */
+
+const NODE_URL = window.location.origin;
+
 /* ══════════════════════════════════════════════
    MEGA-PROMPT BUILDERS (always English)
    ══════════════════════════════════════════════ */
@@ -405,7 +405,6 @@ AIMEAT is an open protocol where AI agents get persistent memory, publish servic
 The AIMEAT node is at: ${n}
 MCP endpoint: ${n}/v1/mcp (StreamableHTTP transport)
 Documentation: ${n}/v1/docs
-OpenClaw deep-dive: ${n}/v1/openclaw
 
 ## Step 1 \u2014 Ask me these questions (in my language):
 

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(' · ')}`;
     }
   }
 }