aimeat 1.40.1 → 2.1.0

package/dist/public/views/companies.js

@@ -18,6 +18,8 @@ import { t } from '/js/i18n.js';
 import { apiGet, apiPost } from '/js/api.js';
 import { DeliverableBody } from '/components/ImageDeliverable.js';
 import { OfferCardView } from '/components/offer-card-view.js';
+import { Spinner } from '/components/Spinner.js';
+import { EmptyState } from '/components/EmptyState.js';
 
 const html = htm.bind(h);
 
@@ -129,7 +131,7 @@ export default function CompaniesView() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [companies]);
 
-  if (companies === null) return html`<div class="cm-container"><div class="cm-center"><div class="spinner"></div></div></div>`;
+  if (companies === null) return html`<div class="cm-container"><div class="cm-center"><${Spinner} /></div></div>`;
   if (companies === 'enterprise') return html`<div class="cm-container"><div class="cm-card"><h1 class="cm-title">${t('companies.title')}</h1><p class="cm-desc">${t('companies.enterpriseRequired')}</p></div></div>`;
 
   return html`
@@ -146,14 +148,14 @@ export default function CompaniesView() {
       ${showOrders && html`
         <div class="cm-col cm-orders-panel">
           <h2 class="cm-col-title">${t('companies.myOrders')}</h2>
-          ${myOrders === null ? html`<div class="cm-center"><div class="spinner"></div></div>`
-            : (myOrders.length === 0 ? html`<p class="cm-empty">${t('companies.noMyOrders')}</p>`
+          ${myOrders === null ? html`<div class="cm-center"><${Spinner} /></div>`
+            : (myOrders.length === 0 ? html`<${EmptyState} text=${t('companies.noMyOrders')} />`
               : html`<ul class="cm-receipt-list">${myOrders.map(o => html`<${ReceiptRow} key=${o.id} o=${o} />`)}</ul>`)}
         </div>`}
       <div class="cm-grid">
         <aside class="cm-col">
           <h2 class="cm-col-title">${t('companies.directory')} (${companies.length})</h2>
-          ${companies.length === 0 && html`<p class="cm-empty">${t('companies.none')}</p>`}
+          ${companies.length === 0 && html`<${EmptyState} text=${t('companies.none')} />`}
           <ul class="cm-dir-list">
             ${companies.map(c => html`<li key=${c.goii}>
               <button class="cm-dir-item ${selected?.slug === c.slug && selected?.owner === c.creatorOwner ? 'active' : ''}" onClick=${() => openCompany(c.creatorOwner, c.slug)}>
@@ -166,8 +168,8 @@ export default function CompaniesView() {
           </ul>
         </aside>
         <section class="cm-col">
-          ${!selected && html`<p class="cm-empty">${t('companies.selectHint')}</p>`}
-          ${selected && !profile && html`<div class="cm-center"><div class="spinner"></div></div>`}
+          ${!selected && html`<${EmptyState} text=${t('companies.selectHint')} />`}
+          ${selected && !profile && html`<div class="cm-center"><${Spinner} /></div>`}
           ${profile && html`
             <div class="cm-profile-head">
               <div class="cm-profile-id">
@@ -182,7 +184,7 @@ export default function CompaniesView() {
                 <a class="btn-outline btn-sm cm-pf-link" href=${profile.org.portfolio.publicUrl} target="_blank">${t('companies.viewPortfolio')}</a>`}
             </div>
             <h3 class="cm-form-title">${t('companies.catalogue')}</h3>
-            ${(profile.offerings ?? []).length === 0 && html`<p class="cm-empty">${t('companies.noOfferings')}</p>`}
+            ${(profile.offerings ?? []).length === 0 && html`<${EmptyState} text=${t('companies.noOfferings')} />`}
             <ul class="cm-cat-list">
               ${(profile.offerings ?? []).map(o => html`<${PublicOfferingCard} key=${o.agentName + '/' + o.offerId} o=${o} owner=${selected.owner} slug=${selected.slug} />`)}
             </ul>

package/dist/public/views/help.js

@@ -15,6 +15,7 @@ import htm from 'htm';
 import { t } from '/js/i18n.js';
 import { useViewCSS } from '/components/useViewCSS.js';
 import { CopyButton } from '/components/CopyButton.js';
+import { Spinner } from '/components/Spinner.js';
 
 const html = htm.bind(h);
 
@@ -42,7 +43,7 @@ export default function HelpView() {
         <p class="hlp-desc">${t('help.description')}</p>
 
         <div class="hlp-prompt-wrapper">
-          ${loading && html`<div class="hlp-loading"><div class="spinner"></div></div>`}
+          ${loading && html`<div class="hlp-loading"><${Spinner} /></div>`}
           ${error && html`<p class="hlp-error">${t('help.loadError')}</p>`}
           ${!loading && !error && html`
             <pre class="hlp-prompt-text"><code>${prompt}</code></pre>

package/dist/public/views/invite-accept.js

@@ -6,10 +6,14 @@
  *   visitor registers right here (username + password; the invited email is shown, locked, and
  *   recorded as verified) and is joined in one atomic POST /v1/invitations/:token/accept. An already
  *   registered / already logged-in visitor (including anyone returning from a social sign-in) accepts
- *   as their current account. Social sign-up + existing-user login reuse AIMEAT.auth.showLoginModal
- *   (its social buttons redirect back here logged-in; then "Accept" joins as that account). On accept
- *   the server sets the refresh cookie, so a full navigation to the redirect boots the SPA logged-in.
- * @structure default export InviteAccept() — load invitation → register-and-join OR accept-as-me.
+ *   as their current account — BUT only when that account's verified email matches the invited
+ *   address (recipient binding; the server enforces it and the page warns up front using the GET
+ *   `viewer` verdict, so a wrong signed-in session cannot silently absorb the grant). Social sign-up +
+ *   existing-user login reuse AIMEAT.auth.showLoginModal. On accept the server sets the refresh cookie
+ *   and returns a redirect target (the inviter's allowlisted app return URL, else the profile); a full
+ *   navigation there boots the SPA / opens the app logged-in.
+ * @structure default export InviteAccept() — load invitation (+viewer) → register-and-join OR
+ *   accept-as-me (email-matched) OR wrong-account panel (sign out / switch account).
  * @usage routed at /v1/invite?token=<token> by spa.html
  * @version-history
  *   v1.0.0 — 2026-07-04 — Initial (email invitations for unregistered users).
@@ -18,9 +22,13 @@
  *   v1.1.0 — 2026-07-10 — Social sign-in providers (GET /v1/auth/providers) rendered as co-equal
  *     "Continue with X" buttons: Google was hidden behind a text link, so invited first-timers
  *     concluded a password was mandatory.
+ *   v1.2.0 — 2026-07-18 — SECURITY (invite-hijack): a signed-in visitor whose verified email does NOT
+ *     match the invited address sees a "wrong account" panel (sign out / switch account) instead of an
+ *     accept button; the server's 403 EMAIL_MISMATCH is rendered the same way as a fallback. Re-fetch
+ *     the `viewer` verdict on login/logout. Redirect follows the accept response's return target.
  */
 import { h } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useCallback } from 'preact/hooks';
 import htm from 'htm';
 import { t } from '/js/i18n.js';
 import { api } from '/js/api.js';
@@ -28,14 +36,16 @@ import { escHtml } from '/js/utils.js';
 
 const html = htm.bind(h);
 const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+const fill = (s, vars) => Object.keys(vars).reduce((acc, k) => acc.split(`{${k}}`).join(vars[k]), s);
 
 export default function InviteAccept() {
   const token = new URLSearchParams(window.location.search).get('token') || '';
-  const [state, setState] = useState({ status: 'loading', inv: null, error: '' });
+  const [state, setState] = useState({ status: 'loading', inv: null, viewer: null, error: '' });
   const [authed, setAuthed] = useState(() => !!window.AIMEAT?.auth?.hasSession);
   const [form, setForm] = useState({ username: '', password: '', display_name: '' });
   const [submitting, setSubmitting] = useState(false);
   const [formError, setFormError] = useState('');
+  const [mismatch, setMismatch] = useState(false); // server said EMAIL_MISMATCH on POST (fallback path)
   const [providers, setProviders] = useState([]);
 
   // Social sign-in providers, rendered as co-equal buttons — an invited first-timer should not
@@ -56,10 +66,11 @@ export default function InviteAccept() {
   }
 
   // Become reactive to an in-place login/logout (username/password via the shared modal, or a
-  // logout on this page) so the view flips between the accept-as-me button and the register form.
+  // logout on this page) so the view flips between accept-as-me and the register form, and so we
+  // re-fetch the server's per-session `viewer` verdict for the newly-active (or cleared) session.
   useEffect(() => {
     const onLogin = () => setAuthed(true);
-    const onLogout = () => setAuthed(false);
+    const onLogout = () => { setAuthed(false); setMismatch(false); };
     window.AIMEAT?.auth?.on?.('login', onLogin);
     window.AIMEAT?.auth?.on?.('logout', onLogout);
     return () => {
@@ -68,30 +79,32 @@ export default function InviteAccept() {
     };
   }, []);
 
-  // Load the invitation details (public).
+  // Load the invitation details (public). Re-runs when the session changes so `viewer.email_matches`
+  // (whether accepting as the current account is allowed) reflects who is actually signed in.
   useEffect(() => {
-    if (!token) { setState({ status: 'error', error: tr('invite.missing', 'This invitation link is missing its token.') }); return undefined; }
+    if (!token) { setState({ status: 'error', inv: null, viewer: null, error: tr('invite.missing', 'This invitation link is missing its token.') }); return undefined; }
     let live = true;
     api('/v1/invitations/' + encodeURIComponent(token))
-      .then((res) => { if (live) setState({ status: 'ready', inv: res.data.invitation, error: '' }); })
-      .catch((e) => { if (live) setState({ status: 'error', error: e.message || tr('invite.invalid', 'This invitation is invalid, was cancelled, or has expired.') }); });
+      .then((res) => { if (live) setState({ status: 'ready', inv: res.data.invitation, viewer: res.data.viewer || null, error: '' }); })
+      .catch((e) => { if (live) setState({ status: 'error', inv: null, viewer: null, error: e.message || tr('invite.invalid', 'This invitation is invalid, was cancelled, or has expired.') }); });
     return () => { live = false; };
-  }, [token]);
+  }, [token, authed]);
 
   // POST accept: with a body (new account) or empty (accept as the current session). On success the
-  // server set the refresh cookie — a full navigation boots the SPA logged-in at the redirect.
-  async function accept(body) {
-    setSubmitting(true); setFormError('');
+  // server set the refresh cookie + returned a redirect target — a full navigation opens it logged-in.
+  const accept = useCallback(async (body) => {
+    setSubmitting(true); setFormError(''); setMismatch(false);
     try {
       const res = await api('/v1/invitations/' + encodeURIComponent(token) + '/accept', {
         method: 'POST', body: JSON.stringify(body || {}),
       });
       window.location.href = (res && res.data && res.data.redirect) || '/v1/profile#organisms';
     } catch (e) {
+      if (e && e.code === 'EMAIL_MISMATCH') { setMismatch(true); setSubmitting(false); return; }
       setFormError(e.message || tr('invite.acceptFailed', 'Could not accept the invitation.'));
       setSubmitting(false);
     }
-  }
+  }, [token]);
 
   function acceptAsNew() {
     const username = form.username.trim();
@@ -105,6 +118,13 @@ export default function InviteAccept() {
     if (window.AIMEAT?.auth?.showLoginModal) window.AIMEAT.auth.showLoginModal({ onLogin: () => setAuthed(true) });
   }
 
+  // Sign out and stay on the accept page, so the visitor can register the invited email or sign in as
+  // the account it belongs to. The 'logout' event handler above re-fetches the viewer verdict.
+  function signOutAndRetry() {
+    try { window.AIMEAT?.auth?.logout?.(); } catch { /* ignore */ }
+    setAuthed(false); setMismatch(false);
+  }
+
   if (state.status === 'loading') {
     return html`<div class="inv-wrap"><div class="inv-card"><p class="inv-muted">${tr('common.loading', 'Loading…')}</p></div></div>`;
   }
@@ -120,6 +140,7 @@ export default function InviteAccept() {
   }
 
   const inv = state.inv;
+  const viewer = state.viewer;
   const org = inv.organism || {};
   const workspaces = inv.workspaces || [];
   const summary = html`
@@ -137,7 +158,31 @@ export default function InviteAccept() {
       ${inv.message ? html`<p class="inv-message">“${escHtml(inv.message)}”</p>` : null}
     </div>`;
 
-  // Already signed in (incl. returning from a social sign-in): accept as the current account.
+  // Signed in, but this account is NOT the invited party (verified email doesn't match) — OR the
+  // server refused a POST with EMAIL_MISMATCH. Never let a wrong account absorb an operator-curated
+  // invitation: explain, and offer to sign out / switch account rather than showing an accept button.
+  const wrongAccount = authed && (mismatch || (viewer && viewer.email_matches === false));
+  if (wrongAccount) {
+    const who = (viewer && viewer.owner) || (window.AIMEAT?.auth?.getSession?.()?.owner) || '';
+    return html`
+      <div class="inv-wrap">
+        <div class="inv-card">
+          <span class="inv-badge">${tr('invite.badge', 'Invitation')}</span>
+          <h1 class="inv-title">${tr('invite.mismatchTitle', 'Wrong account')}</h1>
+          ${summary}
+          <p class="inv-error">
+            ${who ? fill(tr('invite.signedInAs', "You're signed in as {owner}."), { owner: who }) + ' ' : null}
+            ${fill(tr('invite.mismatchBody', 'This invitation was sent to {email}. It can only be accepted by the account whose verified email is that address. Sign out and open the link again, or ask the inviter to add your account directly.'), { email: inv.email || '' })}
+          </p>
+          <div class="inv-actions">
+            <button class="btn-primary inv-btn" onClick=${signOutAndRetry}>${tr('invite.signOutRetry', 'Sign out')}</button>
+            <button class="btn-outline inv-btn" onClick=${signInInstead}>${tr('invite.switchAccount', 'Use a different account')}</button>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  // Already signed in as the invited party (verified email matches): accept as the current account.
   if (authed) {
     return html`
       <div class="inv-wrap">
@@ -194,7 +239,7 @@ export default function InviteAccept() {
         <div class="inv-or">${tr('invite.or', 'OR')}</div>
         ${providers.map((p) => html`
           <button key=${p.id} class="btn-outline inv-btn inv-signin" onClick=${() => socialSignIn(p)}>
-            ${tr('invite.continueWith', 'Continue with {label}').replace('{label}', p.label || p.id)}
+            ${fill(tr('invite.continueWith', 'Continue with {label}'), { label: p.label || p.id })}
           </button>`)}
         <button class="btn-outline inv-btn inv-signin" onClick=${signInInstead}>
           ${tr('invite.signInInstead', 'Already have an account? Sign in')}

package/dist/public/views/landing.js

@@ -11,6 +11,9 @@
  * @structure default export Landing({ navigate }) + BuildHero/Gallery(live wall)/StatsPanel/BuildAppPrompt/BuildAgentPrompt/AskYourAI
  * @usage routed at /v1/portal (and '/' for browsers) by spa.html
  * @version-history
+ *   v2.2.0 — 2026-07-16 — Build-app prompt fetched from the canonical GET /v1/prompts/build-app
+ *     (registry-generated libraries + capability packs; kills the landing's 5th drifting copy);
+ *     the hand-built text remains only as the offline fallback. Template block via shared helper.
  *   v1.0.0 — 2026-06-10 — Initial: landing/portal split (owner spec).
  *   v1.1.0 — 2026-06-16 — Add BuildAppPrompt section: copyable Generate App Prompt from app-catalog.
  *   v1.2.0 — 2026-06-16 — Embed PublicActivityFeed (3 real-time tabs) after the proof gallery.
@@ -32,6 +35,10 @@
  *     iframe (openAppSandboxed) instead of a top-level apex ?mode=inline link.
  *   v3.3.0 — 2026-06-20 — Replace PublicActivityFeed (read as broken when empty) with NodeTotals:
  *     cumulative "this node has X" counters (apps/organisms/agents+online/knowledge/downloads).
+ *   v3.4.0 — 2026-07-14 — Footer GitHub link: fix href to the real repo
+ *     (github.com/miikkij/aimeat-protocol) + add the GitHub Octocat mark.
+ *   v3.5.0 — 2026-07-17 — Hero gains an Experience Center line (the hands-on academy at
+ *     experience-center.apps.aimeat.io) under the two CTAs.
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -45,6 +52,9 @@ import NodeTotals from './landing-node-totals.js';
 // t() echoes the key when a translation is missing — fall back to readable English.
 const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
 
+// The familiar GitHub "Octocat" mark. fill=currentColor so it inherits the link's themed color.
+const GhMark = html`<svg class="gh-mark" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>`;
+
 /* ── Today's stats + ownership line — THE sales core. Real numbers; zeros are omitted. ── */
 function StatsPanel({ navigate }) {
   const [stats, setStats] = useState(null);
@@ -170,6 +180,27 @@ hosting is the only subscription.`;
 
 // Mirrors buildPromptFromBuilder() in app-catalog.html for the "new app / no description" case,
 // with the current node URL injected. If no idea is given the prompt explicitly tells the AI to ask.
+// Canonical build prompt from the node (GET /v1/prompts/build-app - the single source of
+// truth the app-catalog + agentic coders use; includes the registry-generated library
+// sections and capability packs). Cached per locale. The hand-built text below is ONLY the
+// offline / older-node fallback and may lag behind the node's.
+const _canonicalPromptCache = {};
+async function fetchCanonicalBuildPrompt(locale) {
+  const key = locale || 'en';
+  if (_canonicalPromptCache[key]) return _canonicalPromptCache[key];
+  const d = await (await fetch('/v1/prompts/build-app?mode=new&lang=' + encodeURIComponent(key))).json();
+  const full = d && d.data && d.data.prompt;
+  if (typeof full === 'string' && full.length > 500) { _canonicalPromptCache[key] = full; return full; }
+  throw new Error('no canonical prompt');
+}
+
+// Appended to whichever prompt body is in use (canonical or fallback).
+function appendTemplateBlock(p, templateContent) {
+  if (!templateContent) return p;
+  return p + '\n## Starting template (copy from this)\nUse this skeleton as your base — keep its boot, login pill, and self-hosted theme wiring; fill the {{...}} slots; build your views inside <main>. Return the COMPLETE single HTML file based on it.\n```html\n' + templateContent + '\n```\n';
+}
+
+// FALLBACK ONLY - used until the canonical fetch resolves (first paint) or when it fails.
 function buildLandingAppPrompt(nodeUrl, templateContent) {
   const base = (nodeUrl || '').replace(/\/+$/, '') || window.location.origin;
   const LANGS = { en: 'English', fi: 'Finnish (Suomi)' };
@@ -289,10 +320,7 @@ function buildLandingAppPrompt(nodeUrl, templateContent) {
   p += '3. Click Publish.\n';
   p += 'I will be asked to sign in first — it is fast: one click with Google, or a quick email + password, and a brand-new account is created right there in seconds.\n';
   p += 'What I get: once published, the app is LIVE on my own AIMEAT node and PUBLIC — anyone can find it in the community catalogue and use it, and I get a link to share. From my catalogue I can launch it, publish updates (older versions are always kept), park it (hide it), or delete it. It keeps working with my AIMEAT login, saved data, files, AI and realtime features.\n';
-  if (templateContent) {
-    p += '\n## Starting template (copy from this)\nUse this skeleton as your base — keep its boot, login pill, and self-hosted theme wiring; fill the {{...}} slots; build your views inside <main>. Return the COMPLETE single HTML file based on it.\n```html\n' + templateContent + '\n```\n';
-  }
-  return p;
+  return appendTemplateBlock(p, templateContent);
 }
 
 function BuildAppPrompt() {
@@ -314,7 +342,9 @@ function BuildAppPrompt() {
     try { const d = await (await fetch('/v1/app-templates/' + encodeURIComponent(id))).json(); setTplContent((d.data && d.data.template && d.data.template.content) || ''); }
     catch { setTplContent(''); }
   };
-  const prompt = buildLandingAppPrompt(window.location.origin, tplContent);
+  const [canonical, setCanonical] = useState('');
+  useEffect(() => { fetchCanonicalBuildPrompt(getLocale()).then(setCanonical).catch(() => {}); }, []);
+  const prompt = appendTemplateBlock(canonical || buildLandingAppPrompt(window.location.origin), tplContent);
   const copy = async () => {
     try {
       await navigator.clipboard.writeText(prompt);
@@ -458,7 +488,9 @@ function AskYourAI() {
    proof that your creation lands on the same shelf as everyone else's. ── */
 function BuildHero() {
   const [copied, setCopied] = useState(false);
-  const prompt = buildLandingAppPrompt(window.location.origin);
+  const [canonical, setCanonical] = useState('');
+  useEffect(() => { fetchCanonicalBuildPrompt(getLocale()).then(setCanonical).catch(() => {}); }, []);
+  const prompt = canonical || buildLandingAppPrompt(window.location.origin);
   const copy = async () => {
     try { await navigator.clipboard.writeText(prompt); setCopied(true); setTimeout(() => setCopied(false), 2000); }
     catch { /* the full prompt is also visible lower on the page */ }
@@ -472,6 +504,7 @@ function BuildHero() {
         <button class="btn-primary" type="button" onClick=${copy}>${copied ? tr('landing.buildHeroCopied', 'Copied ✓ — paste into your AI') : tr('landing.buildHeroCopy', 'Copy the build prompt →')}</button>
         <a class="btn-outline" href="https://github.com/miikkij/aimeat-protocol/releases/latest" target="_blank" rel="noopener">${tr('landing.heroGetOwn', 'Get your own →')}</a>
       </div>
+      <p class="ld-hero2-after"><a href="https://experience-center.apps.aimeat.io" target="_blank" rel="noopener">🧭 ${tr('landing.ecLink', 'New here? Learn the whole ecosystem hands-on — open the Experience Center →')}</a></p>
       ${copied ? html`<p class="ld-hero2-after">${tr('landing.buildHeroAfter', 'Paste it into your AI and answer its questions. When your app is ready,')} <a href="/app-catalog.html">${tr('landing.openAppsToPublish', 'open your apps to add & publish it →')}</a> ${tr('landing.buildHeroAfter2', '(signing in takes seconds — Google or email).')}</p>` : ''}
     </section>
   `;
@@ -533,9 +566,9 @@ export default function Landing({ navigate }) {
       <!-- 7. Footer -->
       <footer class="ld-footer">
         <a href="/v1/pricing" onClick=${(e) => { e.preventDefault(); navigate('/v1/pricing'); }}>${tr('landing.footPricing', 'Pricing')}</a>
-        <a href="/v1/guides">${tr('landing.footDocs', 'Docs')}</a>
+        <a href="/v1/help">${tr('landing.footDocs', 'Docs')}</a>
         <a href="/v1/pricing#own-node" onClick=${(e) => { e.preventDefault(); navigate('/v1/pricing'); }}>${tr('landing.footOwnNode', 'Run your own node')}</a>
-        <a href="https://github.com/aimeat-protocol" target="_blank" rel="noopener">GitHub</a>
+        <a class="ld-gh" href="https://github.com/miikkij/aimeat-protocol" target="_blank" rel="noopener">${GhMark}GitHub</a>
         <a href="/v1/portal?view=dev">${tr('landing.footDev', 'For developers')}</a>
       </footer>
     </div>

package/dist/public/views/members.js

@@ -16,6 +16,8 @@ import { t } from '/js/i18n.js';
 import { apiGet } from '/js/api.js';
 import { escHtml } from '/js/utils.js';
 import { useViewCSS } from '/components/useViewCSS.js';
+import { Spinner } from '/components/Spinner.js';
+import { EmptyState } from '/components/EmptyState.js';
 
 export default function MembersView() {
   useViewCSS('/css/views/members.css');
@@ -28,8 +30,8 @@ export default function MembersView() {
     <div class="mbr">
       <h1 class="mbr-title">${t('members.title')}</h1>
       <p class="mbr-desc">${t('members.desc')}</p>
-      ${members === null ? html`<div class="mbr-empty">…</div>`
-        : members.length === 0 ? html`<div class="mbr-empty">${t('members.empty')}</div>`
+      ${members === null ? html`<${Spinner} />`
+        : members.length === 0 ? html`<${EmptyState} text=${t('members.empty')} />`
         : html`<div class="mbr-grid">
             ${members.map(m => html`
               <a class="mbr-card" key=${m.username} href=${`/v1/portfolio/${encodeURIComponent(m.username)}`}>

package/dist/public/views/my-company.js

@@ -24,6 +24,13 @@
  *     (describe → generate in-app / copy-prompt → review → apply) for departments/roles/people/reporting (GET/PUT /v1/orgs/:slug/model).
  *   v0.8.0 — 2026-07-01 — Company Secretary subtab hidden unless the node enables the Secretary feature
  *     (AIMEAT_SECRETARY_ENABLED, read from /v1/site/header-nav `features.secretary`). Governance + model unaffected.
+ *   v0.9.0 — 2026-07-16 — Member-add input is the shared ContactPicker (contacts + directory
+ *     suggestions + email resolve).
+ *   v0.10.0 — 2026-07-18 — Money UI (TARGET-043): Payments panel gains Stripe Connect (Platform)
+ *     onboarding (Express Account Links via POST /v1/orgs/{slug}/connect/onboard + status), a
+ *     Stripe-backed KYB badge, and the money books — payables owed to the seller (GET
+ *     /v1/orgs/{slug}/payables) + DAC7/ALV compliance (GET /v1/orgs/{slug}/dac7). The individual
+ *     standalone-key PSP form is demoted behind an "Advanced" toggle.
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback } from 'preact/hooks';
@@ -35,7 +42,11 @@ import { setOfferBilling } from '/js/services/offers.js';
 import { useViewCSS } from '/components/useViewCSS.js';
 import { DeliverableBody } from '/components/ImageDeliverable.js';
 import { OfferCardView } from '/components/offer-card-view.js';
+import { Spinner } from '/components/Spinner.js';
+import { EmptyState } from '/components/EmptyState.js';
 import { THEMES, buildPortfolioData } from '/views/portfolio-themes.js';
+import { ContactPicker } from '/components/ContactPicker.js';
+import { PaymentsPanel } from '/views/my-company.payments.js';
 
 const html = htm.bind(h);
 
@@ -71,7 +82,7 @@ function OrderRow({ o, view }) {
 }
 
 function OrdersList({ orders, view, empty }) {
-  if (!orders || orders.length === 0) return html`<p class="mc-empty">${empty}</p>`;
+  if (!orders || orders.length === 0) return html`<${EmptyState} text=${empty} />`;
   return html`<ul class="mc-order-list">${orders.map(o => html`<${OrderRow} key=${o.id} o=${o} view=${view} />`)}</ul>`;
 }
 
@@ -81,8 +92,8 @@ function CustomersPanel({ slug }) {
   useEffect(() => {
     apiGet(`/v1/orgs/${encodeURIComponent(slug)}/customers`).then(r => setCustomers(r.data?.customers ?? [])).catch(() => setCustomers([]));
   }, [slug]);
-  if (customers === null) return html`<div class="mc-center"><div class="spinner"></div></div>`;
-  if (!customers.length) return html`<p class="mc-empty">${t('myCompany.noCustomers')}</p>`;
+  if (customers === null) return html`<div class="mc-center"><${Spinner} /></div>`;
+  if (!customers.length) return html`<${EmptyState} text=${t('myCompany.noCustomers')} />`;
   return html`
     <ul class="mc-cust-list">
       ${customers.map(c => html`
@@ -108,7 +119,9 @@ function MembersPanel({ slug, creatorOwner, viewerRole }) {
   const load = useCallback(async () => { try { const r = await apiGet(`/v1/orgs/${encodeURIComponent(slug)}/members`); setMembers(r.data?.members ?? []); } catch { setMembers([]); } }, [slug]);
   useEffect(() => { load(); }, [load]);
   async function add(e) {
-    e.preventDefault(); setBusy(true); setErr('');
+    e.preventDefault();
+    if (!owner.trim()) return;   // the picker input carries no `required` attribute
+    setBusy(true); setErr('');
     try { await apiPost(`/v1/orgs/${encodeURIComponent(slug)}/members`, { owner: owner.trim().toLowerCase(), role }); setOwner(''); await load(); }
     catch (e) { setErr(e.message || 'Failed'); } finally { setBusy(false); }
   }
@@ -118,7 +131,7 @@ function MembersPanel({ slug, creatorOwner, viewerRole }) {
     <option value="admin">${t('myCompany.roleAdmin')}</option>
     <option value="member">${t('myCompany.roleMember')}</option>
     <option value="visitor">${t('myCompany.roleVisitor')}</option>`;
-  if (members === null) return html`<div class="mc-center"><div class="spinner"></div></div>`;
+  if (members === null) return html`<div class="mc-center"><${Spinner} /></div>`;
   return html`
     <ul class="mc-member-list">
       ${members.map(m => {
@@ -138,7 +151,7 @@ function MembersPanel({ slug, creatorOwner, viewerRole }) {
       <form class="mc-form" onSubmit=${add}>
         <h3 class="mc-form-title">${t('myCompany.addMember')}</h3>
         <div class="flex-row-wrap mc-manage-row">
-          <input class="input-field input-sm" placeholder=${t('myCompany.memberUsername')} value=${owner} onInput=${(e) => setOwner(e.target.value)} required />
+          <${ContactPicker} value=${owner} onChange=${setOwner} kinds=${['ghii']} placeholder=${t('myCompany.memberUsername')} />
           <select class="input-field input-sm" value=${role} onChange=${(e) => setRole(e.target.value)}>${roleOpts}</select>
           <button class="btn-primary btn-sm" type="submit" disabled=${busy}>${t('myCompany.addMemberBtn')}</button>
         </div>
@@ -224,69 +237,6 @@ function SettingsPanel({ org, onSaved }) {
     </form>`;
 }
 
-/** Payments (read-only): the node's payment handlers + checkout status from /.well-known/ucp,
- * and the company's KYB pre-stage (Y-tunnus given or not). Real-money handlers appear here
- * automatically once the node's EE edition registers them — no UI change needed. */
-function PaymentsPanel({ org }) {
-  const [profile, setProfile] = useState(null);
-  const [psp, setPsp] = useState(null);
-  const [keyIn, setKeyIn] = useState('');
-  const [pspBusy, setPspBusy] = useState(false);
-  const [pspMsg, setPspMsg] = useState('');
-  const loadPsp = useCallback(() => {
-    apiGet(`/v1/orgs/${encodeURIComponent(org.slug)}/psp`).then(r => setPsp(r.data?.psp ?? { configured: false })).catch(() => setPsp(false));
-  }, [org.slug]);
-  useEffect(() => {
-    let alive = true;
-    fetch('/.well-known/ucp').then(r => r.json()).then(p => { if (alive) setProfile(p); }).catch(() => { if (alive) setProfile(false); });
-    loadPsp();
-    return () => { alive = false; };
-  }, [loadPsp]);
-  async function savePsp() {
-    setPspBusy(true); setPspMsg('');
-    try { await apiPut(`/v1/orgs/${encodeURIComponent(org.slug)}/psp`, { secret_key: keyIn.trim() }); setKeyIn(''); setPspMsg(t('myCompany.pspSaved')); loadPsp(); }
-    catch (e) { setPspMsg(e.message || 'Save failed'); }
-    finally { setPspBusy(false); }
-  }
-  async function removePsp() {
-    setPspBusy(true); setPspMsg('');
-    try { await apiDelete(`/v1/orgs/${encodeURIComponent(org.slug)}/psp`); setPspMsg(t('myCompany.pspRemoved')); loadPsp(); }
-    catch (e) { setPspMsg(e.message || 'Remove failed'); }
-    finally { setPspBusy(false); }
-  }
-  if (profile === null) return html`<p class="mc-empty">${t('myCompany.loading')}</p>`;
-  const handlers = (profile && profile.ucp && profile.ucp.payment_handlers) || [];
-  const checkoutOn = !!(profile && profile.ucp && (profile.ucp.capabilities || []).length);
-  const hasKybPre = !!org.businessId;
-  return html`
-    <div class="mc-payments">
-      <div class="mc-label">${t('myCompany.pspTitle')}
-        ${psp && psp.configured
-          ? html`<span class="mc-chip mc-chip-ok">${t('myCompany.pspConfigured')} ${psp.keyHint || ''}</span>`
-          : html`<span class="mc-chip mc-chip-warn">${t('myCompany.pspMissing')}</span>`}
-      </div>
-      <span class="mc-mini">${t('myCompany.pspHint')}</span>
-      <div class="flex-row-wrap mc-manage-row">
-        <input class="input-field input-sm mc-psp-input" type="password" placeholder="sk_live_…" value=${keyIn} onInput=${(e) => setKeyIn(e.target.value)} />
-        <button class="btn-primary btn-sm" disabled=${pspBusy || keyIn.trim().length < 8} onClick=${savePsp}>${t('myCompany.pspSave')}</button>
-        ${psp && psp.configured && html`<button class="btn-ghost btn-sm mc-remove" disabled=${pspBusy} onClick=${removePsp}>${t('myCompany.pspRemove')}</button>`}
-      </div>
-      ${pspMsg && html`<span class="mc-mini">${pspMsg}</span>`}
-      <div class="mc-label">${t('myCompany.paymentsCheckout')}
-        <span class="mc-chip ${checkoutOn ? 'mc-chip-ok' : 'mc-chip-warn'}">${checkoutOn ? t('myCompany.paymentsOn') : t('myCompany.paymentsOff')}</span>
-      </div>
-      <div class="mc-label">${t('myCompany.paymentsHandlers')}</div>
-      ${handlers.length === 0
-        ? html`<p class="mc-empty">${t('myCompany.paymentsNone')}</p>`
-        : html`<ul class="mc-order-list">${handlers.map(h => html`
-            <li key=${h.id} class="mc-payment-row"><b>${h.title || h.id}</b> <span class="mc-mini">${h.id} · ${(h.currencies || []).join(', ')}</span></li>`)}</ul>`}
-      <div class="mc-label">${t('myCompany.paymentsKyb')}
-        <span class="mc-chip ${hasKybPre ? 'mc-chip-ok' : 'mc-chip-warn'}">${hasKybPre ? t('myCompany.paymentsKybPre') : t('myCompany.paymentsKybMissing')}</span>
-      </div>
-      <span class="mc-mini">${t('myCompany.paymentsKybHint')}</span>
-    </div>`;
-}
-
 /** Compose the prompt the user takes to their AI to generate the portfolio HTML (prompt-driven). */
 function buildPortfolioPrompt(org, offerings, c) {
   const origin = (typeof window !== 'undefined' && window.location.origin) || '';
@@ -372,7 +322,7 @@ function PortfolioPanel({ org, offerings }) {
     finally { setBusy(false); }
   }
 
-  if (cfg === undefined) return html`<div class="mc-center"><div class="spinner"></div></div>`;
+  if (cfg === undefined) return html`<div class="mc-center"><${Spinner} /></div>`;
   const published = cfg?.enabled && cfg?.publicUrl;
 
   return html`
@@ -559,8 +509,8 @@ function OfferPicker({ slug, alreadyListed, onListed }) {
     catch (e) { alert(e.message || 'Failed'); }
     finally { setBusy(''); }
   }
-  if (agents === null) return html`<div class="mc-center"><div class="spinner"></div></div>`;
-  if (agents.length === 0) return html`<p class="mc-empty">${t('myCompany.noOffersToList')}</p>`;
+  if (agents === null) return html`<div class="mc-center"><${Spinner} /></div>`;
+  if (agents.length === 0) return html`<${EmptyState} text=${t('myCompany.noOffersToList')} />`;
   return html`
     <div class="mc-pick-agents">
       ${agents.map(ag => html`
@@ -652,7 +602,7 @@ export default function MyCompanyView() {
     finally { setBusy(false); }
   }
 
-  if (state === 'loading') return html`<div class="mc-container"><div class="mc-center"><div class="spinner"></div></div></div>`;
+  if (state === 'loading') return html`<div class="mc-container"><div class="mc-center"><${Spinner} /></div></div>`;
   if (state === 'enterprise') return html`<div class="mc-container"><div class="mc-card mc-stub"><h1 class="mc-title">${t('myCompany.title')}</h1><p class="mc-stub-badge">${t('myCompany.enterpriseBadge')}</p><p class="mc-desc">${t('myCompany.enterpriseRequired')}</p></div></div>`;
   if (state === 'unauth') return html`<div class="mc-container"><div class="mc-card"><h1 class="mc-title">${t('myCompany.title')}</h1><p class="mc-desc">${t('myCompany.loginRequired')}</p></div></div>`;
   if (state === 'error') return html`<div class="mc-container"><div class="mc-card"><h1 class="mc-title">${t('myCompany.title')}</h1><p class="mc-error">${errMsg}</p></div></div>`;
@@ -673,14 +623,14 @@ export default function MyCompanyView() {
       ${showMyOrders && html`
         <div class="mc-card">
           <h2 class="mc-col-title">${t('myCompany.myOrders')}</h2>
-          ${myOrders === null ? html`<div class="mc-center"><div class="spinner"></div></div>`
+          ${myOrders === null ? html`<div class="mc-center"><${Spinner} /></div>`
             : html`<${OrdersList} orders=${myOrders} view="buyer" empty=${t('myCompany.noMyOrders')} />`}
         </div>`}
 
       <div class="mc-grid">
         <aside class="mc-col">
           <h2 class="mc-col-title">${t('myCompany.yourCompanies')}</h2>
-          ${orgs.length === 0 && html`<p class="mc-empty">${t('myCompany.noCompanies')}</p>`}
+          ${orgs.length === 0 && html`<${EmptyState} text=${t('myCompany.noCompanies')} />`}
           <ul class="mc-org-list">
             ${orgs.map(org => html`<li key=${org.slug}>
               <button class="mc-org-item ${selected?.slug === org.slug ? 'active' : ''}" onClick=${() => openOrg(org)}>
@@ -701,7 +651,7 @@ export default function MyCompanyView() {
         </aside>
 
         <section class="mc-col">
-          ${!selected && html`<p class="mc-empty">${t('myCompany.selectHint')}</p>`}
+          ${!selected && html`<${EmptyState} text=${t('myCompany.selectHint')} />`}
           ${selected && html`
             <div class="mc-detail-head">
               <div class="mc-head-id">
@@ -728,7 +678,7 @@ export default function MyCompanyView() {
                 <button class="btn-outline btn-sm" onClick=${() => setShowPicker(s => !s)}>${showPicker ? t('myCompany.done') : t('myCompany.addFromOffers')}</button>
               </div>
               ${showPicker && html`<div class="mc-picker"><p class="mc-pick-hint">${t('myCompany.pickHint')}</p><${OfferPicker} slug=${selected.slug} alreadyListed=${listedKeys} onListed=${() => openOrg(selected)} /></div>`}
-              ${offerings.length === 0 && !showPicker && html`<p class="mc-empty">${t('myCompany.noOfferings')}</p>`}
+              ${offerings.length === 0 && !showPicker && html`<${EmptyState} text=${t('myCompany.noOfferings')} />`}
               <ul class="mc-off-list">
                 ${offerings.map(o => html`<${OfferingCard} key=${o.agentName + '/' + o.offerId} o=${o} orgOwner=${selected.creatorOwner} slug=${selected.slug} callerOwner=${callerOwner} role=${selected.role} onOrdered=${afterOrder} onChanged=${() => openOrg(selected)} />`)}
               </ul>`}