aimeat 1.35.0 → 1.37.0

package/dist/public/views/portfolio.js

@@ -3,6 +3,33 @@
  * @description Portfolio view — builder (select content, generate AI prompt,
  *   upload HTML) and public viewer (sandboxed iframe render).
  * @version-history
+ *   v1.5.0 — 2026-07-03 — Portfolio origin surfaces: builder shows the standalone
+ *     URL (<username>.portfolio.<apex>) + an aimeat-badge toggle (showBadge, saved
+ *     to portfolio.config); viewer toolbar links to the standalone page. Both come
+ *     from the server (standalone_url on /v1/portfolio/config and data/:username).
+ *   v1.4.0 — 2026-07-03 — Viewer bridge: the trusted parent posts login state
+ *     ('aimeat-portfolio-auth') into the sandboxed portfolio and serves a narrow
+ *     fetch RPC ('aimeat-portfolio-fetch' → '...-fetch-result') that reads the
+ *     portfolio owner's records with the VISITOR's session — enabling the new
+ *     'members' memory visibility (logged-in-only content, never in the HTML).
+ *     Requests are allowlisted to data.owner_gaiis; the visitor's JWT never
+ *     enters the iframe. Prompt documents the protocol + members entries.
+ *   v1.3.2 — 2026-07-03 — Builder prompt fixes for the sandboxed viewer reality:
+ *     memory fetch URLs now use the anonymous public route /v1/memory/:gaii/:key
+ *     (old /v1/memory/:key always 401s without auth) and only for public-visibility
+ *     records; forbid credentialed fetch() (Origin:null + wildcard CORS rejects it);
+ *     auth-gate pattern defaults to logged-out placeholder + listens for an
+ *     'aimeat-portfolio-auth' postMessage instead of window.AIMEAT (unreachable
+ *     from the opaque-origin sandbox).
+ *   v1.3.1 — 2026-07-03 — Stamp the SPA's CSP nonce onto <script> tags before setting
+ *     srcdoc (viewer + builder preview): about:srcdoc inherits the parent document's
+ *     CSP (script-src 'self' 'nonce-…'), so the portfolio's nonce-less inline script
+ *     never executed. The sandbox (opaque origin, no allow-same-origin) remains the
+ *     security boundary — same trust level as the app-launch 'unsafe-inline' CSP.
+ *   v1.3.0 — 2026-07-03 — Public viewer renders full-bleed: portfolio iframe fills the
+ *     viewport below the nav (no more 900px column), slim toolbar with back link + owner
+ *     name + a native Fullscreen button; drop the dead contentDocument autosize hack
+ *     (opaque-origin sandbox always threw). Campsite: btn btn-* → btn-*.
  *   v1.2.0 — 2026-06-10 — Workflow round: ①②③ flow banner explains the AI-chat round-trip;
  *     group summaries show selected/total + select-all checkbox; Generate disabled with a hint
  *     when nothing is selected; "Custom" type and custom auth-gate open describe-textareas that
@@ -27,6 +54,24 @@ import { CopyButton } from '/components/CopyButton.js';
 
 const NODE_URL = typeof window !== 'undefined' ? window.location.origin : '';
 
+/* ── CSP nonce stamping for srcdoc iframes ──
+   about:srcdoc inherits the SPA document's CSP, whose script-src is
+   'self' + a per-request nonce (no 'unsafe-inline') — so a portfolio's
+   inline <script> is blocked unless it carries that nonce. Stamp the
+   SPA's own nonce onto the portfolio's script tags before rendering
+   (client-side mirror of src/utils/csp-nonce.ts). Isolation does not
+   rest on CSP here: the sandbox (allow-scripts only → opaque origin,
+   no session/cookies/storage) is the security boundary, matching the
+   'unsafe-inline' CSP the app-launch endpoint grants published apps. */
+function stampCspNonce(htmlStr) {
+  let nonce = '';
+  for (const s of document.scripts) {
+    if (s.nonce) { nonce = s.nonce; break; }
+  }
+  if (!nonce) return htmlStr;
+  return htmlStr.replace(/<script(?=[\s>])/gi, `<script nonce="${nonce}"`);
+}
+
 /* ── Auth helpers ── */
 function getSession() {
   const a = window.AIMEAT?.auth;
@@ -127,12 +172,33 @@ The user wants to create a personal portfolio website. Generate a single, self-c
     }
   }
 
-  // Selected memory entries
+  // Selected memory entries — three delivery paths, decided by record visibility:
+  //   public  → plain anonymous fetch from /v1/memory/:gaii/:key
+  //   members → requested from the hosting viewer over the postMessage bridge
+  //             (the viewer fetches with the VISITOR's session; anonymous → no data)
+  //   other   → not deliverable to visitors at all; bake preview or placeholder
+  const publicMems = selectedMemories.filter(m => m.visibility === 'public');
+  const memberMems = selectedMemories.filter(m => m.visibility === 'members');
+  const gatedMems = selectedMemories.filter(m => m.visibility !== 'public' && m.visibility !== 'members');
   if (selectedMemories.length > 0) {
     prompt += `\n## Memory Entries\n`;
-    prompt += `These entries can be fetched live from the node API for dynamic portfolio content:\n`;
-    for (const mem of selectedMemories) {
-      prompt += `- ${mem.key} (${mem.visibility}) → GET ${url}/v1/memory/${encodeURIComponent(mem.key)}\n`;
+    if (publicMems.length > 0) {
+      prompt += `These PUBLIC entries can be fetched live (anonymously, no auth) for dynamic portfolio content:\n`;
+      for (const mem of publicMems) {
+        prompt += `- ${mem.key} → GET ${url}/v1/memory/${encodeURIComponent(mem.gaii || ghii)}/${encodeURIComponent(mem.key)}\n`;
+      }
+    }
+    if (memberMems.length > 0) {
+      prompt += `These MEMBERS-ONLY entries are readable by logged-in node members. Do NOT fetch them directly (an anonymous fetch returns 404). Request each from the hosting viewer over the postMessage bridge (see "Viewer Bridge" below) and render the value inside a [data-auth-required] section, keeping a [data-auth-placeholder] fallback:\n`;
+      for (const mem of memberMems) {
+        prompt += `- key: ${mem.key} · gaii: ${mem.gaii || ghii}\n`;
+      }
+    }
+    if (gatedMems.length > 0) {
+      prompt += `These entries are NOT readable by visitors at all (any fetch attempt returns 401/404). Represent each with its preview text baked into the HTML, or a placeholder the user can edit:\n`;
+      for (const mem of gatedMems) {
+        prompt += `- ${mem.key} (visibility: ${mem.visibility})${mem.preview ? ` — preview: ${mem.preview}` : ''}\n`;
+      }
     }
   }
 
@@ -183,35 +249,82 @@ The user wants to create a personal portfolio website. Generate a single, self-c
 - **CRITICAL — Images and files:** ONLY use URLs listed in the "Selected Images" section above. Do NOT invent, guess, or fabricate any URLs. If a resource (avatar, resume, screenshot, etc.) is not listed above, it does not exist.
 ${resourceNotes}${sectionNotes}- For missing images: Use inline SVG placeholders, CSS gradients, or emoji — never a broken image URL
 - For project screenshots: If no screenshot URL is provided for a project, use a styled CSS placeholder card instead of an <img> tag
-- If memory entries are selected: Fetch them live with fetch() calls to the node API URLs above
+- If PUBLIC memory entries are listed above: fetch them live with plain \`fetch(url)\` calls to those exact URLs
+- **CRITICAL — fetch() must stay credential-free:** always call \`fetch(url)\` with no options object — never set \`credentials\` ('include'/'same-origin'), and never send an Authorization header. The portfolio runs in an opaque-origin sandbox (the browser sends \`Origin: null\`); the node answers CORS with a wildcard, and browsers reject credentialed requests to wildcard responses. Only the anonymous public URLs listed above are reachable.
 - Mobile-responsive design (works on phone, tablet, desktop)
 - Include proper <meta> tags for SEO and social sharing (og:title, og:description, og:image)
 - **IMPORTANT — CSP compatibility:** The portfolio HTML will be rendered inside a sandboxed iframe. All JavaScript MUST be inside a single \`<script>\` tag at the end of \`<body>\`. Do NOT use inline event handlers (onclick=, onload=, etc.) — use addEventListener instead. Do NOT use external script/CSS CDN links.
 `;
 
-  if (authGates.length > 0) {
+  if (authGates.length > 0 || memberMems.length > 0) {
     prompt += `
-## Auth-Gated Sections Implementation
-Sections marked as auth-gated should be hidden by default and only shown when the viewer is
-logged in to the AIMEAT node. Use this detection pattern:
+## Viewer Bridge (auth state + members-only data)
+The portfolio renders inside a sandboxed iframe with an opaque origin: it has NO access to the
+hosting page's session, cookies, or \`window.AIMEAT\` — login state cannot be read directly.
+The hosting AIMEAT viewer bridges over postMessage. Two message flows:
+
+1. Viewer → portfolio: \`{ type: 'aimeat-portfolio-auth', loggedIn: boolean }\` — posted on load
+   and whenever the visitor's login state changes.
+2. Portfolio → viewer: \`{ type: 'aimeat-portfolio-fetch', gaii: string, key: string, id: number }\`
+   (id = your own correlation number). The viewer answers with
+   \`{ type: 'aimeat-portfolio-fetch-result', id, ok: boolean, gaii, key, value }\` — \`value\` is the
+   memory record's value when \`ok\` is true, otherwise null (not logged in / no access).
+   The viewer only serves the gaii+key pairs listed in "Memory Entries" above.
+
+Implementation pattern — default to logged-out, activate on the viewer's signal:
 
 \`\`\`javascript
-// Check if the viewer is authenticated on this AIMEAT node
-const isLoggedIn = window.AIMEAT?.auth?.hasSession?.() || false;
-document.querySelectorAll('[data-auth-required]').forEach(el => {
-  el.style.display = isLoggedIn ? '' : 'none';
-});
-// Show placeholder for unauthenticated viewers
-document.querySelectorAll('[data-auth-placeholder]').forEach(el => {
-  el.style.display = isLoggedIn ? 'none' : '';
+function applyAuthState(isLoggedIn) {
+  document.querySelectorAll('[data-auth-required]').forEach(el => {
+    el.style.display = isLoggedIn ? '' : 'none';
+  });
+  document.querySelectorAll('[data-auth-placeholder]').forEach(el => {
+    el.style.display = isLoggedIn ? 'none' : '';
+  });
+}
+applyAuthState(false);
+
+// Members-only data: ask the viewer, resolve by correlation id.
+let bridgeSeq = 0;
+const bridgePending = {};
+function fetchMemberData(gaii, key) {
+  return new Promise((resolve) => {
+    const id = ++bridgeSeq;
+    bridgePending[id] = resolve;
+    window.parent.postMessage({ type: 'aimeat-portfolio-fetch', gaii, key, id }, '*');
+  });
+}
+
+window.addEventListener('message', (e) => {
+  const d = e.data;
+  if (!d) return;
+  if (d.type === 'aimeat-portfolio-auth') {
+    applyAuthState(!!d.loggedIn);
+    // (Re-)request members-only data when the viewer reports a logged-in visitor.
+    if (d.loggedIn) loadMemberSections();
+  } else if (d.type === 'aimeat-portfolio-fetch-result' && bridgePending[d.id]) {
+    bridgePending[d.id](d.ok ? d.value : null);
+    delete bridgePending[d.id];
+  }
 });
+
+async function loadMemberSections() {
+  // Example: const contact = await fetchMemberData('<gaii>', '<key>');
+  // if (contact) { render it into the [data-auth-required] section }
+}
 \`\`\`
 
-Wrap auth-gated content in \`<div data-auth-required>\` and add a placeholder:
+Wrap gated content in \`<div data-auth-required>\` and add a placeholder:
 \`<div data-auth-placeholder>Log in to see more content</div>\`
 
-NOTE: This is a convenience feature, not a security boundary. The content is in the HTML source.
-For truly private data, use the AIMEAT consent system.
+Rules:
+- Show the placeholder until data actually arrives — no spinners waiting on the bridge
+  (an older viewer never answers, and the placeholder is the correct fallback).
+- Members-only values arrive ONLY via the bridge — never bake them into the HTML and never
+  fetch them directly.
+- Content that is merely wrapped in [data-auth-required] but baked into the HTML is a
+  convenience, not a security boundary — it is visible in the HTML source. Keep truly
+  private data out of the portfolio entirely.
 `;
   }
 
@@ -265,6 +378,11 @@ function PortfolioBuilder({ session, navigate }) {
 
   // Existing portfolio state
   const [existingConfig, setExistingConfig] = useState(null);
+  // Standalone portfolio-origin URL (<username>.portfolio.<apex>) — null when
+  // the node has the portfolio origin disabled.
+  const [standaloneUrl, setStandaloneUrl] = useState(null);
+  // Whether the standalone page shows the aimeat attribution badge (default on).
+  const [showBadge, setShowBadge] = useState(true);
 
   // Load catalog + existing config
   useEffect(() => {
@@ -275,7 +393,11 @@ function PortfolioBuilder({ session, navigate }) {
     ]).then(([catRes, cfgRes]) => {
       if (catRes.ok !== false && catRes.data) setCatalog(catRes.data);
       else setErrMsg('Failed to load content catalog');
-      if (cfgRes.ok !== false && cfgRes.data?.config) setExistingConfig(cfgRes.data.config);
+      if (cfgRes.ok !== false && cfgRes.data?.config) {
+        setExistingConfig(cfgRes.data.config);
+        setShowBadge(cfgRes.data.config.showBadge !== false);
+      }
+      if (cfgRes.ok !== false && cfgRes.data?.standalone_url) setStandaloneUrl(cfgRes.data.standalone_url);
       setLoading(false);
     }).catch(() => {
       setErrMsg('Network error');
@@ -283,6 +405,14 @@ function PortfolioBuilder({ session, navigate }) {
     });
   }, [session]);
 
+  // Persist the badge toggle immediately (it only affects the standalone page).
+  const handleBadgeToggle = async (value) => {
+    setShowBadge(value);
+    const next = { ...(existingConfig || {}), enabled: existingConfig?.enabled || false, showBadge: value, tags: ['portfolio'] };
+    setExistingConfig(next);
+    await apiPut('/v1/portfolio/config', next);
+  };
+
   // Toggle helpers
   const toggleSet = (setter, value) => {
     setter(prev => {
@@ -352,6 +482,7 @@ function PortfolioBuilder({ session, navigate }) {
       selectedBoards: [...selectedBoards],
       selectedCortex: [...selectedCortex],
       selectedMemories: [...selectedMemories],
+      showBadge,
       tags: ['portfolio'],
     });
   };
@@ -407,6 +538,7 @@ function PortfolioBuilder({ session, navigate }) {
           authGates: [...authGates],
           publishedAt: new Date().toISOString(),
           htmlSizeKb: sizeKb,
+          showBadge,
           tags: ['portfolio'],
         });
         setExistingConfig({ ...(existingConfig || {}), enabled: true });
@@ -481,7 +613,10 @@ function PortfolioBuilder({ session, navigate }) {
           <span class="portfolio-published-dot">●</span>
           <span>${t('portfolio.builder.enabled')}</span>
           <a href=${publicUrl} target="_blank" class="portfolio-published-link">${t('portfolio.builder.viewPublic')}</a>
-          <button class="btn btn-ghost btn-sm" disabled=${uploading} onClick=${handleUnpublish}>
+          ${standaloneUrl && html`
+            <a href=${standaloneUrl} target="_blank" rel="noopener" class="portfolio-published-link">${tr('portfolio.builder.viewStandalone', 'Own address')} ↗</a>
+          `}
+          <button class="btn-ghost btn-sm" disabled=${uploading} onClick=${handleUnpublish}>
             ${tr('portfolio.builder.unpublish', 'Unpublish')}
           </button>
         </div>
@@ -684,7 +819,7 @@ function PortfolioBuilder({ session, navigate }) {
           <h3><span class="portfolio-step-number">4</span> ${t('portfolio.builder.step4Title')}</h3>
 
           <div class="portfolio-generate-row">
-            <button class="btn btn-primary" disabled=${totalSelected === 0} onClick=${handleGenerate}>
+            <button class="btn-primary" disabled=${totalSelected === 0} onClick=${handleGenerate}>
               ${t('portfolio.builder.generateBtn')}
             </button>
             ${totalSelected === 0 && html`
@@ -698,7 +833,7 @@ function PortfolioBuilder({ session, navigate }) {
             <div class="portfolio-prompt-actions">
               <${CopyButton} text=${generatedPrompt} className="btn-primary"
                 label=${t('portfolio.builder.copyPrompt')} copiedLabel=${t('portfolio.builder.promptCopied')} />
-              <button class="btn btn-ghost" onClick=${handleDownloadPrompt}>
+              <button class="btn-ghost" onClick=${handleDownloadPrompt}>
                 ${t('portfolio.builder.downloadPrompt')}
               </button>
             </div>
@@ -723,6 +858,17 @@ function PortfolioBuilder({ session, navigate }) {
             ${tr('portfolio.builder.publishTarget', 'Will be published at:')}
             <a href=${publicUrl} target="_blank" class="portfolio-publish-url">${publicUrl}</a>
           </div>
+          ${standaloneUrl && html`
+            <div class="portfolio-publish-target">
+              ${tr('portfolio.builder.standaloneTarget', 'Also served standalone at:')}
+              <a href=${standaloneUrl} target="_blank" rel="noopener" class="portfolio-publish-url">${standaloneUrl}</a>
+            </div>
+            <div class="portfolio-source-item portfolio-badge-toggle">
+              <input type="checkbox" id="pf-show-badge" checked=${showBadge}
+                onChange=${(e) => handleBadgeToggle(e.target.checked)} />
+              <label for="pf-show-badge">${tr('portfolio.builder.showBadge', 'Show the aimeat.io badge on the standalone page')}</label>
+            </div>
+          `}
 
           <div class="portfolio-upload-zone ${dragover ? 'dragover' : ''}"
             onClick=${() => fileInputRef.current?.click()}
@@ -750,18 +896,18 @@ function PortfolioBuilder({ session, navigate }) {
           ></textarea>
           ${pastedHtml.trim() && html`
             <div class="portfolio-paste-actions">
-              <button class="btn btn-primary"
+              <button class="btn-primary"
                 onClick=${handlePublishPaste} disabled=${uploading}>
                 ${uploading ? '...' : tr('portfolio.builder.publishPaste', 'Publish pasted HTML')}
               </button>
-              <button class="btn btn-ghost" onClick=${() => setShowPreview(p => !p)}>
+              <button class="btn-ghost" onClick=${() => setShowPreview(p => !p)}>
                 ${showPreview ? tr('portfolio.builder.closePreview', 'Close preview') : tr('portfolio.builder.previewBtn', 'Preview')}
               </button>
             </div>
           `}
           ${showPreview && pastedHtml.trim() && html`
             <!-- Same sandbox as the public viewer: opaque origin, no session access. -->
-            <iframe class="portfolio-viewer-frame portfolio-preview-frame" srcdoc=${pastedHtml}
+            <iframe class="portfolio-viewer-frame portfolio-preview-frame" srcdoc=${stampCspNonce(pastedHtml)}
               sandbox="allow-scripts"></iframe>
           `}
 
@@ -778,7 +924,7 @@ function PortfolioBuilder({ session, navigate }) {
       </div>
 
       <div style="margin-top:2rem;">
-        <button class="btn btn-ghost" onClick=${() => navigate('/v1/profile')}>
+        <button class="btn-ghost" onClick=${() => navigate('/v1/profile')}>
           ← ${tr('portfolio.builder.backToProfile', 'Profile')}
         </button>
       </div>
@@ -792,6 +938,76 @@ function PortfolioViewer({ username, navigate }) {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [errMsg, setErrMsg] = useState(null);
+  const frameRef = useRef(null);
+
+  // ── Portfolio bridge ──
+  // The sandboxed portfolio (opaque origin) cannot see the visitor's session.
+  // This trusted parent brokers two things over postMessage:
+  //   1. 'aimeat-portfolio-auth' {loggedIn} — posted on frame load + auth change,
+  //      so HTML-baked [data-auth-required] sections can toggle (convenience).
+  //   2. 'aimeat-portfolio-fetch' {gaii, key, id} → 'aimeat-portfolio-fetch-result'
+  //      {id, ok, gaii, key, value} — the parent fetches the record with the
+  //      VISITOR's JWT (which never enters the iframe) via the public read route,
+  //      so 'members'-visibility records reach logged-in viewers only. Requests
+  //      are allowlisted to the portfolio owner's identities (data.owner_gaiis)
+  //      so portfolio JS cannot spend the visitor's token on anything else.
+  const postAuthState = (win) => {
+    // '*' targetOrigin: an opaque-origin frame is not addressable any other way;
+    // the payload is just a boolean.
+    win?.postMessage({ type: 'aimeat-portfolio-auth', loggedIn: !!getSession() }, '*');
+  };
+
+  useEffect(() => {
+    if (!data?.has_html) return undefined;
+    const ownerGaiis = Array.isArray(data.owner_gaiis) ? data.owner_gaiis : [];
+
+    const onAuthChange = () => postAuthState(frameRef.current?.contentWindow);
+
+    const onMessage = async (e) => {
+      const win = frameRef.current?.contentWindow;
+      if (!win || e.source !== win) return; // only our portfolio frame
+      const d = e.data;
+      if (!d || d.type !== 'aimeat-portfolio-fetch') return;
+      const reply = (ok, value) => win.postMessage({
+        type: 'aimeat-portfolio-fetch-result',
+        id: d.id ?? null, ok, gaii: d.gaii ?? null, key: d.key ?? null, value,
+      }, '*');
+      if (typeof d.gaii !== 'string' || typeof d.key !== 'string' || !ownerGaiis.includes(d.gaii)) {
+        reply(false, null);
+        return;
+      }
+      const s = getSession();
+      try {
+        const resp = await fetch(`/v1/memory/${encodeURIComponent(d.gaii)}/${encodeURIComponent(d.key)}`,
+          s ? { headers: { Authorization: 'Bearer ' + s.jwt } } : undefined);
+        const j = await resp.json().catch(() => null);
+        const ok = !!(resp.ok && j && j.ok !== false);
+        reply(ok, ok ? (j.data?.value ?? null) : null);
+      } catch (_) {
+        reply(false, null);
+      }
+    };
+
+    window.addEventListener('message', onMessage);
+    window.addEventListener('aimeat-auth-change', onAuthChange);
+    // aimeat-auth-change fires from the login pill's onLogout BEFORE the async
+    // auth.logout() has cleared the session, so getSession() still reads the old
+    // state at that moment. The auth lib's own 'login'/'logout' events fire only
+    // AFTER the state change — subscribe to those too so the frame flips reliably.
+    const authApi = window.AIMEAT?.auth;
+    if (authApi?.on) {
+      authApi.on('login', onAuthChange);
+      authApi.on('logout', onAuthChange);
+    }
+    return () => {
+      window.removeEventListener('message', onMessage);
+      window.removeEventListener('aimeat-auth-change', onAuthChange);
+      if (authApi?.off) {
+        authApi.off('login', onAuthChange);
+        authApi.off('logout', onAuthChange);
+      }
+    };
+  }, [data]);
 
   useEffect(() => {
     fetch(`${NODE_URL}/v1/portfolio/data/${encodeURIComponent(username)}`)
@@ -818,7 +1034,7 @@ function PortfolioViewer({ username, navigate }) {
         <div class="portfolio-not-found">
           <h2>${t('portfolio.viewer.notFound')}</h2>
           <p>${t('portfolio.viewer.notFoundDesc')}</p>
-          <button class="btn btn-ghost" style="margin-top:1rem;" onClick=${() => navigate('/v1/portal')}>
+          <button class="btn-ghost" style="margin-top:1rem;" onClick=${() => navigate('/v1/portal')}>
             ${t('portfolio.viewer.backToPortal')}
           </button>
         </div>
@@ -826,25 +1042,32 @@ function PortfolioViewer({ username, navigate }) {
     `;
   }
 
-  // If portfolio HTML exists, render it in a sandboxed iframe
+  // If portfolio HTML exists, render it full-bleed in a sandboxed iframe:
+  // the frame fills the viewport below the nav + toolbar, the portfolio
+  // scrolls inside it. The toolbar offers native fullscreen for a truly
+  // chrome-free view (Esc exits).
   if (data.has_html && data.portfolio_html) {
     return html`
-      <div class="portfolio-container portfolio-viewer">
-        <div style="display:flex; align-items:center; gap:1rem; margin-bottom:1rem; flex-wrap:wrap;">
-          <button class="btn btn-ghost" onClick=${() => navigate('/v1/portal')}>
+      <div class="portfolio-viewer-full">
+        <div class="portfolio-viewer-bar">
+          <button class="btn-ghost btn-sm" onClick=${() => navigate('/v1/portal')}>
             ← ${t('portfolio.viewer.backToPortal')}
           </button>
-          <span style="color:var(--text-dim);">${escHtml(data.display_name || username)}'s portfolio</span>
+          <span class="portfolio-viewer-owner">${escHtml(data.display_name || username)}'s portfolio</span>
+          ${data.standalone_url && html`
+            <a class="btn-ghost btn-sm" href=${data.standalone_url} target="_blank" rel="noopener">
+              ${tr('portfolio.viewer.standalone', 'Own address')} ↗
+            </a>
+          `}
+          <button class="btn-ghost btn-sm portfolio-viewer-fs"
+            title=${tr('portfolio.viewer.fullscreen', 'Fullscreen')}
+            onClick=${() => frameRef.current?.requestFullscreen?.()}>
+            ⛶ ${tr('portfolio.viewer.fullscreen', 'Fullscreen')}
+          </button>
         </div>
-        <iframe class="portfolio-viewer-frame" srcdoc=${data.portfolio_html}
-          sandbox="allow-scripts"
-          onLoad=${(e) => {
-            try {
-              const h = e.target.contentDocument?.body?.scrollHeight;
-              if (h) e.target.style.height = h + 40 + 'px';
-            } catch (_) { /* cross-origin — ignore */ }
-          }}
-        ></iframe>
+        <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>
       </div>
     `;
   }
@@ -855,7 +1078,7 @@ function PortfolioViewer({ username, navigate }) {
       <div class="portfolio-not-found">
         <h2>${escHtml(data.display_name || username)}</h2>
         <p>${data.bio ? escHtml(data.bio) : t('portfolio.viewer.notFoundDesc')}</p>
-        <button class="btn btn-ghost" style="margin-top:1rem;" onClick=${() => navigate('/v1/portal')}>
+        <button class="btn-ghost" style="margin-top:1rem;" onClick=${() => navigate('/v1/portal')}>
           ${t('portfolio.viewer.backToPortal')}
         </button>
       </div>

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

@@ -3,6 +3,7 @@
  * @description Agent card component with collapsed/expanded states,
  *   Two-Zone Header (identity + state-dependent status), and tab bar.
  * @version-history
+ *   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.
  *   v1.17.0 -- 2026-06-24 -- Secretary P5 (S-A): render a "Specialist · <role>" badge for agents tagged
@@ -71,6 +72,7 @@ import TabIntegration from './tab-integration.js';
 import TabTasks from './tab-tasks.js';
 import TabMessages from './tab-messages.js';
 import TabDataAccess from './tab-data-access.js';
+import TabContracts from './tab-contracts.js';
 import TabDirectives from './tab-directives.js';
 import TabAgentConfig from './tab-agent-config.js';
 import TabActivity from './tab-activity.js';
@@ -94,6 +96,7 @@ const TABS = [
   { id: 'tasks', key: 'profile.agents.detail.tabs.tasks' },
   { id: 'messages', key: 'profile.agents.detail.tabs.messages' },
   { id: 'data-access', key: 'profile.agents.detail.tabs.data_access' },
+  { id: 'contracts', key: 'profile.agents.detail.tabs.contracts' },
   { id: 'quality', key: 'profile.agents.detail.tabs.quality' },
   { id: 'activity', key: 'profile.agents.detail.tabs.activity' },
   { id: 'schedules', key: 'profile.agents.detail.tabs.schedules' },
@@ -695,6 +698,7 @@ function renderTabContent(activeTab, agent, onboarding, session, showToast, allA
     case 'tasks': return html`<${TabTasks} ...${props} openTaskId=${openTaskId} openTaskNonce=${openTaskNonce} />`;
     case 'messages': return html`<${TabMessages} ...${props} />`;
     case 'data-access': return html`<${TabDataAccess} ...${props} />`;
+    case 'contracts': return html`<${TabContracts} ...${props} />`;
     case 'directives': return html`<${TabDirectives} ...${props} />`;
     case 'agent-config': return html`<${TabAgentConfig} ...${props} onDeleteClick=${onDeleteClick} />`;
     case 'activity': return html`<${TabActivity} ...${props} />`;

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

@@ -0,0 +1,112 @@
+/**
+ * @file tab-contracts.js
+ * @description Agent detail › Contracts sub-tab. Makes the agent's workspace-contract engagements
+ *   visible from the AGENT side (previously only the workspace knew, and only as a derived record
+ *   trace). Shows what the agent OFFERS (its contract.* capability tags) and, first-class, WHERE each
+ *   contract is currently active or was retired — with a Retire off-switch and a Re-adopt action.
+ * @structure TabContracts — offered-contracts row + Active engagements + Retired (history)
+ * @usage <${TabContracts} agent=${agent} agentName=${agent.name} showToast=${showToast} />
+ * @version-history
+ *   v1.0.0 — 2026-07-03 — Initial agent Contracts sub-tab (engagement visibility + activate/deactivate).
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
+import htm from 'htm';
+import { onLiveUpdate } from '/lib/live-updates.js';
+import { t } from '/js/i18n.js';
+import { getAgentEngagements, contractNamesOf, offersWorkspaceContract, adoptContractTask } from '/js/services/agents.js';
+import { retireEngagement, activateEngagement } from '/js/services/organisms.js';
+
+const html = htm.bind(h);
+
+const fmtDay = (iso) => { if (!iso) return ''; const d = new Date(iso); return isNaN(d.getTime()) ? '' : d.toLocaleDateString(); };
+const engKey = (e) => `${e.organism_id}:${e.ws}:${e.contract || ''}`;
+
+export default function TabContracts({ agent, agentName, showToast }) {
+  const [engagements, setEngagements] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState('');
+  const capabilities = contractNamesOf(agent);
+  const advertises = offersWorkspaceContract(agent);
+
+  const load = useCallback(async () => {
+    try { setEngagements(await getAgentEngagements(agentName)); }
+    finally { setLoading(false); }
+  }, [agentName]);
+  const loadRef = useRef(load); loadRef.current = load;
+  useEffect(() => { load(); return onLiveUpdate(['organisms'], () => loadRef.current()); }, [load]);
+
+  // Retire = the off-switch: the agent's loop skips this workspace once its engagement is retired.
+  const retire = async (e) => {
+    setBusy(engKey(e));
+    try {
+      const r = await retireEngagement(e.organism_id, e.ws, e.agent, e.contract);
+      if (r?.ok === false) showToast?.(r?.error?.message || (t('organisms.retireFailed') || 'Could not retire the contract'), true);
+      else showToast?.(t('profile.agents.detail.contracts.retiredToast') || 'Retired — the agent will skip this workspace');
+      await load();
+    } catch (err) { showToast?.(err?.message || 'Error', true); }
+    finally { setBusy(''); }
+  };
+  // Re-adopt = flip back to active + re-queue the provisioning task, mirroring the workspace panel.
+  const readopt = async (e) => {
+    setBusy(engKey(e));
+    try {
+      await activateEngagement(e.organism_id, e.ws, e.agent, e.contract).catch(() => {});
+      await adoptContractTask(agentName, { organismId: e.organism_id, ws: e.ws, contract: e.contract });
+      showToast?.(t('profile.agents.detail.contracts.readoptedToast') || 'Re-adopted — the agent will pick this workspace back up');
+      await load();
+    } catch (err) { showToast?.(err?.message || 'Error', true); }
+    finally { setBusy(''); }
+  };
+
+  if (loading) return html`<div class="pf-agd-empty">${t('profile.loading') || 'Loading…'}</div>`;
+
+  const active = engagements.filter(e => e.state === 'active');
+  const retired = engagements.filter(e => e.state === 'retired');
+  const label = (e) => e.contract || (t('organisms.bareContract') || 'contract');
+
+  return html`
+    <div class="pf-agd-contracts">
+      <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">
+        ${advertises || capabilities.length
+          ? (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 class="pf-agd-section-title agc-mt">${t('profile.agents.detail.contracts.activeTitle') || 'Active in these workspaces'}</div>
+      ${active.length ? html`
+        <div class="agc-list">
+          ${active.map(e => html`
+            <div class="agc-row" key=${engKey(e)}>
+              <span class="agc-where">
+                <span class="badge badge-success pj-mini">${'✓ '}${label(e)}</span>
+                <strong>${e.wsName || e.ws}</strong>
+                <span class="agc-org">${e.organismName || e.organism_id}</span>
+                <span class="agc-since">${(t('profile.agents.detail.contracts.since') || 'since {d}').replace('{d}', fmtDay(e.adoptedAt))}</span>
+              </span>
+              <button class="btn-outline btn-sm" disabled=${busy === engKey(e)}
+                title=${t('organisms.retireHint') || 'Stop this agent from working in this workspace — its loop skips it and the chip becomes “retired”. Its past work stays as history.'}
+                onClick=${() => retire(e)}>${busy === engKey(e) ? '…' : (t('organisms.retire') || 'Retire')}</button>
+            </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>`}
+
+      ${retired.length ? html`
+        <div class="pf-agd-section-title agc-mt">${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)}>
+              <span class="agc-where">
+                <span class="badge badge-muted pj-mini">${label(e)}</span>
+                <strong>${e.wsName || e.ws}</strong>
+                <span class="agc-org">${e.organismName || e.organism_id}</span>
+                <span class="agc-since">${(t('profile.agents.detail.contracts.until') || 'used here until {d}').replace('{d}', fmtDay(e.retiredAt))}</span>
+              </span>
+              <button class="btn-ghost btn-sm" disabled=${busy === engKey(e)}
+                onClick=${() => readopt(e)}>${busy === engKey(e) ? '…' : (t('organisms.reAdopt') || 'Re-adopt')}</button>
+            </div>`)}
+        </div>` : null}
+    </div>`;
+}

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

@@ -197,7 +197,7 @@ export function tierLevel(tier) {
 function EditProfileModal({ session, onClose, onSaved, onChangePassword }) {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-  const [fields, setFields] = useState({ display_name: '', bio: '', avatar: '', locale: 'en' });
+  const [fields, setFields] = useState({ display_name: '', bio: '', avatar: '', locale: 'en', directory_listed: false });
   const [currentEmail, setCurrentEmail] = useState('');
 
   useEffect(() => {
@@ -213,6 +213,7 @@ function EditProfileModal({ session, onClose, onSaved, onChangePassword }) {
             bio: d.bio || '',
             avatar: d.avatar || '',
             locale: d.locale || 'en',
+            directory_listed: d.directory_listed === true,
           });
           setCurrentEmail(d.notification_email || '');
         }
@@ -299,6 +300,14 @@ function EditProfileModal({ session, onClose, onSaved, onChangePassword }) {
               <a href="#" class="pf-edit-link" onClick=${(e) => { e.preventDefault(); onClose(); window.dispatchEvent(new CustomEvent('aimeat-open-tab', { detail: { tabId: 'email' } })); }}>
                 ${t('profile.landing.editEmailLink') || 'Change in the Email tab →'}</a>
             </div>
+            <label class="pf-edit-check">
+              <input type="checkbox" checked=${fields.directory_listed}
+                onChange=${(e) => set('directory_listed', e.target.checked)} />
+              <span>
+                <span class="pf-edit-check-title">${t('profile.landing.editDirectoryListed') || 'List me in the member directory'}</span>
+                <span class="pf-edit-hint">${t('profile.landing.editDirectoryHint') || 'Off by default. When on, other signed-in members can find you (name, bio, avatar) in the directory. Anonymous visitors never see it.'}</span>
+              </span>
+            </label>
           </div>
           <div class="pf-edit-footer">
             <a href="#" class="pf-edit-link pf-edit-footer-left" onClick=${(e) => { e.preventDefault(); onChangePassword?.(); }}>