aimeat 1.40.1 → 2.1.0

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

@@ -0,0 +1,177 @@
+/**
+ * @file my-company.payments.js
+ * @description The "Payments" panel of the My Company (Enterprise) view — extracted from
+ *   my-company.js (line-budget). Drives real-money selling via Stripe Connect (Platform model):
+ *   the company onboards as a Stripe EXPRESS connected account under the operator's Platform
+ *   (POST /v1/orgs/{slug}/connect/onboard → hosted Account Link), its KYB verifies automatically
+ *   once the account can take charges and it carries a Y-tunnus (GET /v1/orgs/{slug}/connect/status),
+ *   and the money books render — payables owed to the seller (GET /v1/orgs/{slug}/payables) and
+ *   DAC7/ALV compliance (GET /v1/orgs/{slug}/dac7). The individual standalone-key PSP form is kept
+ *   behind an "Advanced" toggle. Funds settle to the seller's Stripe account — the node never holds
+ *   the key or the funds (non-custodial).
+ * @structure moneyRow (per-currency money row) · PaymentsPanel({ org })
+ * @usage import { PaymentsPanel } from '/views/my-company.payments.js';
+ * @version-history
+ *   v0.10.0 — 2026-07-18 — initial extraction from my-company.js + Stripe Connect onboarding, the
+ *     Stripe-backed KYB badge, and the payables + DAC7/ALV money books (TARGET-043).
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { apiGet, apiPost, apiPut, apiDelete } from '/js/api.js';
+import { fmtMoney } from '/js/utils.js';
+import { Spinner } from '/components/Spinner.js';
+import { EmptyState } from '/components/EmptyState.js';
+
+const html = htm.bind(h);
+
+/** One per-currency money row (micro-units → localized money). */
+function moneyRow(label, totals, field) {
+  const codes = Object.keys(totals || {});
+  if (!codes.length) return null;
+  return html`<div class="mc-money-row"><span class="mc-mini">${label}</span>
+    <b>${codes.map(c => fmtMoney(totals[c][field] ?? 0, c)).join(' · ')}</b></div>`;
+}
+
+/** Payments: Stripe Connect onboarding (Platform model), the node's payment handlers + checkout
+ * status, the KYB gate (Stripe-backed once the connected account can take charges), and the money
+ * books — payables owed to the seller + DAC7/ALV compliance. Sellers onboard as Stripe Express
+ * connected accounts under the operator's Platform; funds settle to their account (no custody). */
+export 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 [showLegacy, setShowLegacy] = useState(false);
+  // Stripe Connect (Platform) onboarding + status.
+  const [connect, setConnect] = useState(undefined); // undefined=loading | {connected,...} | {unavailable}
+  const [cBusy, setCBusy] = useState(false);
+  const [cMsg, setCMsg] = useState('');
+  // Money books.
+  const [payables, setPayables] = useState(null);
+  const [dac7, setDac7] = useState(null);
+
+  const loadPsp = useCallback(() => {
+    apiGet(`/v1/orgs/${encodeURIComponent(org.slug)}/psp`).then(r => setPsp(r.data?.psp ?? { configured: false })).catch(() => setPsp(false));
+  }, [org.slug]);
+  const loadConnect = useCallback(() => {
+    apiGet(`/v1/orgs/${encodeURIComponent(org.slug)}/connect/status`)
+      .then(r => setConnect(r.data ?? { connected: false }))
+      .catch(e => setConnect(e?.code === 'STRIPE_PLATFORM_NOT_CONFIGURED' ? { unavailable: true } : { connected: false, error: e?.message }));
+  }, [org.slug]);
+  const loadMoney = useCallback(() => {
+    apiGet(`/v1/orgs/${encodeURIComponent(org.slug)}/payables`).then(r => setPayables(r.data)).catch(() => setPayables(null));
+    apiGet(`/v1/orgs/${encodeURIComponent(org.slug)}/dac7`).then(r => setDac7(r.data)).catch(() => setDac7(null));
+  }, [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(); loadConnect(); loadMoney();
+    return () => { alive = false; };
+  }, [loadPsp, loadConnect, loadMoney]);
+  async function onboard() {
+    setCBusy(true); setCMsg('');
+    try {
+      const r = await apiPost(`/v1/orgs/${encodeURIComponent(org.slug)}/connect/onboard`, {});
+      const url = r.data?.onboardingUrl;
+      if (url) { window.open(url, '_blank', 'noopener'); setCMsg(t('myCompany.connectOpened')); }
+      setTimeout(loadConnect, 2000);
+    } catch (e) { setCMsg(e.message || 'Onboarding failed'); }
+    finally { setCBusy(false); }
+  }
+  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`<${Spinner} />`;
+  const handlers = (profile && profile.ucp && profile.ucp.payment_handlers) || [];
+  const checkoutOn = !!(profile && profile.ucp && (profile.ucp.capabilities || []).length);
+  const kyb = (connect && connect.kybStatus) || org.kybStatus || 'pending';
+  const kybVerified = kyb === 'verified';
+  const charges = !!(connect && connect.chargesEnabled);
+  const pt = payables && payables.totals ? payables.totals : {};
+  const d = dac7 && dac7.dac7 ? dac7.dac7 : null;
+  const vat = dac7 && dac7.vat ? dac7.vat : null;
+  return html`
+    <div class="mc-payments">
+      <!-- ── Stripe Connect (Platform model): the primary money-selling path ── -->
+      <div class="mc-label">${t('myCompany.connectTitle')}
+        ${connect === undefined ? null
+          : connect.unavailable ? html`<span class="mc-chip mc-chip-warn">${t('myCompany.connectUnavailable')}</span>`
+          : !connect.connected ? html`<span class="mc-chip mc-chip-warn">${t('myCompany.connectNotStarted')}</span>`
+          : charges ? html`<span class="mc-chip mc-chip-ok">${t('myCompany.connectReady')}</span>`
+          : html`<span class="mc-chip mc-chip-warn">${t('myCompany.connectPending')}</span>`}
+      </div>
+      <span class="mc-mini">${t('myCompany.connectHint')}</span>
+      ${connect && !connect.unavailable && html`
+        <div class="flex-row-wrap mc-manage-row">
+          <button class="btn-primary btn-sm" disabled=${cBusy} onClick=${onboard}>${connect.connected ? t('myCompany.connectContinue') : t('myCompany.connectOnboard')}</button>
+          ${connect.connected && html`<button class="btn-ghost btn-sm" disabled=${cBusy} onClick=${loadConnect}>${t('myCompany.connectRefresh')}</button>`}
+        </div>`}
+      ${connect && connect.connected && Array.isArray(connect.requirementsDue) && connect.requirementsDue.length > 0 && html`
+        <span class="mc-mini">${t('myCompany.connectRequirements')}: ${connect.requirementsDue.slice(0, 6).join(', ')}</span>`}
+      ${cMsg && html`<span class="mc-mini">${cMsg}</span>`}
+
+      <div class="mc-label">${t('myCompany.paymentsKyb')}
+        <span class="mc-chip ${kybVerified ? 'mc-chip-ok' : 'mc-chip-warn'}">${kybVerified ? t('myCompany.kybVerified') : (org.businessId ? t('myCompany.paymentsKybPre') : t('myCompany.paymentsKybMissing'))}</span>
+      </div>
+      <span class="mc-mini">${t('myCompany.kybHintConnect')}</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`<${EmptyState} text=${t('myCompany.paymentsNone')} />`
+        : html`<ul class="mc-order-list">${handlers.map(hd => html`
+            <li key=${hd.id} class="mc-payment-row"><b>${hd.title || hd.id}</b> <span class="mc-mini">${hd.id} · ${(hd.currencies || []).join(', ')}</span></li>`)}</ul>`}
+
+      <!-- ── Money books: payables owed to the seller + DAC7/ALV compliance ── -->
+      <div class="mc-label">${t('myCompany.payablesTitle')}</div>
+      ${Object.keys(pt).length === 0
+        ? html`<${EmptyState} text=${t('myCompany.payablesNone')} />`
+        : html`<div class="mc-money-box">
+            ${moneyRow(t('myCompany.payablesGross'), pt, 'gross')}
+            ${moneyRow(t('myCompany.payablesMember'), pt, 'memberCut')}
+            ${moneyRow(t('myCompany.payablesOrg'), pt, 'orgCut')}
+            ${moneyRow(t('myCompany.payablesFee'), pt, 'fee')}
+          </div>`}
+      ${(d || vat) && html`
+        <div class="mc-label">${t('myCompany.dac7Title')} <span class="mc-mini">${dac7?.year ?? ''}</span></div>
+        <div class="mc-money-box">
+          ${d && html`<div class="mc-money-row"><span class="mc-mini">${t('myCompany.dac7Consideration')}</span><b>${fmtMoney(d.totalConsideration ?? 0, d.currency || 'EUR')}</b></div>`}
+          ${d && html`<div class="mc-money-row"><span class="mc-mini">${t('myCompany.dac7Transactions')}</span><b>${d.totalTransactions ?? 0}</b></div>`}
+          ${vat && html`<div class="mc-money-row"><span class="mc-mini">${t('myCompany.vatTotal')} (${vat.rate}%)</span><b>${fmtMoney(vat.totalVat ?? 0, vat.currency || 'EUR')}</b></div>`}
+        </div>`}
+
+      <!-- ── Legacy: an individual seller's OWN standalone Stripe secret (rarely needed) ── -->
+      <div class="mc-label">
+        <button class="btn-ghost btn-sm" onClick=${() => setShowLegacy(v => !v)}>${showLegacy ? t('myCompany.pspHideLegacy') : t('myCompany.pspShowLegacy')}</button>
+      </div>
+      ${showLegacy && html`
+        <div>
+          <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_test_…" 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>`}
+    </div>`;
+}

package/dist/public/views/portal-classic.js

@@ -198,7 +198,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:
 1. What agent runtime are you using?
@@ -478,9 +477,6 @@ export default function PortalClassicView({ navigate }) {
               />
             </div>
           </div>
-          <div style="margin-top:0.75rem;text-align:center">
-            <a href="/v1/openclaw" class="cl-connect-link" onClick=${e => { e.preventDefault(); navigate('/v1/openclaw'); }}>${ct('groups.forAgents.readMore')} \u2192</a>
-          </div>
         </div>
       <//>
 

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

@@ -10,6 +10,8 @@
  *   v1.1.1 — 2026-06-19 — JSDoc type annotations for frontend type-checking
  *   v1.2.0 — 2026-07-13 — Split into sibling modules (shared/background/panels/
  *     upload) to satisfy max-file-lines; render output unchanged.
+ *   v1.3.0 — 2026-07-14 — Add a source-repos row at the top: GitHub links to
+ *     aimeat-protocol + crewaimeat, each with the GitHub Octocat mark.
  */
 import { useState, useEffect, useCallback } from 'preact/hooks';
 import { useViewCSS } from '/components/useViewCSS.js';
@@ -19,6 +21,9 @@ import { BackgroundLayer, BgSelector } from './portal-dev.background.js';
 import { CapTabs } from './portal-dev.panels.js';
 import { UploadSection, CommunityApps } from './portal-dev.upload.js';
 
+// The familiar GitHub "Octocat" mark. fill=currentColor so it inherits the link's themed color.
+const GH_MARK = 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>`;
+
 /* ══════════════════════════════════════════════
    MAIN VIEW
    ══════════════════════════════════════════════ */
@@ -88,6 +93,12 @@ export default function PortalDevView({ locale }) {
       <p class="dv-subtitle">${dt('subtitle', locale)}</p>
       <div class="dv-node-badge"><${StatusDot} status="online" /> ${NODE_URL}</div>
 
+      <!-- Source repos: the protocol/node and the local agent fleet, both on GitHub -->
+      <div class="dv-repos">
+        <a class="dv-repo-link" href="https://github.com/miikkij/aimeat-protocol" target="_blank" rel="noopener">${GH_MARK}${dt('repos.protocol', locale)}</a>
+        <a class="dv-repo-link" href="https://github.com/miikkij/crewaimeat" target="_blank" rel="noopener">${GH_MARK}${dt('repos.crew', locale)}</a>
+      </div>
+
       <!-- Stats -->
       <div class="stat-grid">
         <div class="stat-card"><div class="stat-card-value accent">${stats.agents}</div><div class="stat-card-label">${dt('stats.agents', locale)}</div></div>

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):