aimeat 1.26.0 → 1.27.1

package/dist/public/views/app-grant.js

@@ -0,0 +1,210 @@
+/**
+ * @file app-grant.js
+ * @description Trusted consent page (apex origin) for the H-2 app-grant flow. An app on the
+ *   isolated app origin sends the owner here (GET /v1/app-grants/authorize → 302 → /v1/app-grant
+ *   ?req=...). The owner, authenticated on aimeat.io, reviews the requesting app + the exact
+ *   scopes and Allows or Denies. On Allow we POST /v1/app-grants/authorize-consent and get back the
+ *   app's redirect_url carrying a one-time code. Two delivery modes:
+ *     • web_message (popup): postMessage { type:'aimeat_app_grant', code, state } to the app
+ *       popup-opener (targeted at the exact app origin) and close — the user stays in the app.
+ *     • query (full redirect, legacy): navigate to redirect_url.
+ *   The app never sees the session, only the scoped, revocable grant token it then exchanges.
+ *   "Advanced" lets the owner grant a SUBSET of the requested scopes (never more).
+ * @structure default export AppGrant() — loads the pending request, renders the trust prompt +
+ *   scopes (+ advanced per-scope checkboxes), Allow/Deny.
+ * @usage routed at /v1/app-grant?req=<id> by spa.html
+ * @version-history
+ *   v1.0.0 — 2026-06-20 — Initial (H-2 app-origin isolation, Phase 3: consent page).
+ *   v1.1.0 — 2026-06-20 — Popup (web_message) delivery + "trust this app" reframe + Advanced
+ *     per-scope subset selection (consent flow wired to apps via the SDK).
+ */
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { api } from '/js/api.js';
+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; };
+
+export default function AppGrant() {
+  const [state, setState] = useState({ status: 'loading', request: null, error: '' });
+  const [submitting, setSubmitting] = useState(false);
+  const [advanced, setAdvanced] = useState(false);
+  const [selected, setSelected] = useState(() => new Set());
+  const [existingGrant, setExistingGrant] = useState(null); // the grant this app already holds (manage mode)
+
+  const requestId = new URLSearchParams(window.location.search).get('req') || '';
+  const [authed, setAuthed] = useState(() => !!window.AIMEAT?.auth?.hasSession);
+
+  // Become reactive to login: the consent popup may open with no one logged in (login_required), and
+  // the user signs in right here (auth.showLoginModal) — flip to the consent view on success.
+  useEffect(() => {
+    const onLogin = () => setAuthed(true);
+    window.AIMEAT?.auth?.on?.('login', onLogin);
+    return () => window.AIMEAT?.auth?.off?.('login', onLogin);
+  }, []);
+
+  function doLogin() {
+    if (window.AIMEAT?.auth?.showLoginModal) window.AIMEAT.auth.showLoginModal({ onLogin: () => setAuthed(true) });
+    else window.location.href = '/v1/profile';
+  }
+
+  useEffect(() => {
+    if (!requestId) { setState({ status: 'error', error: tr('appGrant.missing', 'No authorization request.') }); return; }
+    if (!authed) { setState({ status: 'login' }); return; }
+    let live = true;
+    api(`/v1/app-grants/request/${encodeURIComponent(requestId)}`)
+      .then(async (res) => {
+        if (!live) return;
+        // If this app already holds a grant, this is "manage mode": pre-check the currently granted
+        // scopes and offer Revoke. Best-effort — a failed lookup just falls back to first-consent.
+        let grant = null;
+        try {
+          const list = await api('/v1/app-grants');
+          grant = (list.data?.grants || []).find((g) => g.app === res.data.app) || null;
+        } catch { /* ignore */ }
+        if (!live) return;
+        const reqScopes = (res.data.scopes || []).map((s) => s.scope);
+        const granted = grant ? grant.scopes : reqScopes;
+        setExistingGrant(grant);
+        setSelected(new Set(granted));
+        // Pass-through: when NOT explicitly managing (the gear) and the app already holds a grant that
+        // covers what it's asking for, just approve silently — no second prompt for an app you trust.
+        const covers = grant && reqScopes.every((s) => grant.scopes.includes(s));
+        if (grant && !res.data.manage && covers) { setState({ status: 'autoapprove', request: res.data }); return; }
+        if (grant) setAdvanced(true); // manage / add-scopes → show the per-scope checkboxes up front
+        setState({ status: 'ready', request: res.data });
+      })
+      .catch((e) => { if (live) setState({ status: 'error', error: e.message || tr('appGrant.expired', 'This request has expired.') }); });
+    return () => { live = false; };
+  }, [requestId, authed]);
+
+  // Pass-through approval (already-granted app, not managing): approve once, silently.
+  useEffect(() => {
+    if (state.status === 'autoapprove' && !submitting) approve();
+    // eslint-disable-next-line
+  }, [state.status]);
+
+  async function revoke() {
+    if (!existingGrant) return;
+    setSubmitting(true);
+    try {
+      await api(`/v1/app-grants/${encodeURIComponent(existingGrant.grant_id)}`, { method: 'DELETE' });
+      if (state.request?.response_mode === 'web_message' && window.opener) {
+        window.opener.postMessage({ type: 'aimeat_app_grant', revoked: true, state: state.request.state }, state.request.app_origin);
+        window.close();
+        return;
+      }
+      window.location.href = state.request?.app_origin || '/v1/profile';
+    } catch (e) {
+      setState((s) => ({ ...s, status: 'error', error: e.message || 'Failed to revoke.' }));
+      setSubmitting(false);
+    }
+  }
+
+  function toggle(scope) {
+    setSelected((prev) => { const n = new Set(prev); if (n.has(scope)) n.delete(scope); else n.add(scope); return n; });
+  }
+
+  async function approve() {
+    if (selected.size === 0) return;
+    setSubmitting(true);
+    try {
+      const res = await api('/v1/app-grants/authorize-consent', {
+        method: 'POST', body: JSON.stringify({ request_id: requestId, scopes: [...selected] }),
+      });
+      const url = new URL(res.data.redirect_url);
+      const code = url.searchParams.get('code');
+      const st = url.searchParams.get('state');
+      // Popup mode: hand the code back to the app (popup-opener) at its exact origin, then close.
+      if (state.request?.response_mode === 'web_message' && window.opener) {
+        window.opener.postMessage({ type: 'aimeat_app_grant', code, state: st }, state.request.app_origin);
+        window.close();
+        return;
+      }
+      window.location.href = res.data.redirect_url; // legacy full-redirect mode
+    } catch (e) {
+      setState((s) => ({ ...s, status: 'error', error: e.message || 'Failed to approve.' }));
+      setSubmitting(false);
+    }
+  }
+
+  function deny() {
+    if (state.request?.response_mode === 'web_message' && window.opener) {
+      window.opener.postMessage({ type: 'aimeat_app_grant', code: null, state: null }, state.request.app_origin);
+      window.close();
+      return;
+    }
+    const origin = state.request?.app_origin;
+    window.location.href = origin || '/v1/profile';
+  }
+
+  if (state.status === 'loading' || state.status === 'autoapprove') {
+    const msg = state.status === 'autoapprove' ? tr('appGrant.signingIn', 'Signing you in…') : tr('common.loading', 'Loading…');
+    return html`<div class="agr-wrap"><p class="agr-muted">${msg}</p></div>`;
+  }
+  if (state.status === 'login') {
+    return html`
+      <div class="agr-wrap">
+        <div class="agr-card">
+          <h1 class="agr-title">${tr('appGrant.loginTitle', 'Log in to continue')}</h1>
+          <p class="agr-muted">${tr('appGrant.loginBody', 'Log in on aimeat.io, then re-open the app’s link to approve access.')}</p>
+          <button class="btn-primary agr-btn" onClick=${doLogin}>${tr('appGrant.loginCta', 'Log in')}</button>
+        </div>
+      </div>`;
+  }
+  if (state.status === 'error') {
+    return html`
+      <div class="agr-wrap">
+        <div class="agr-card">
+          <h1 class="agr-title">${tr('appGrant.errorTitle', 'Cannot grant access')}</h1>
+          <p class="agr-muted">${escHtml(state.error)}</p>
+          <button class="btn-outline agr-btn" onClick=${deny}>${tr('common.back', 'Back')}</button>
+        </div>
+      </div>`;
+  }
+
+  const req = state.request;
+  return html`
+    <div class="agr-wrap">
+      <div class="agr-card">
+        <span class="agr-badge">${tr('appGrant.externalBadge', 'External app')}</span>
+        <h1 class="agr-title">${existingGrant ? tr('appGrant.manageTitle', 'Manage this app’s access') : tr('appGrant.trustTitle', 'Trust this app?')}</h1>
+        <div class="agr-app">
+          <div class="agr-app-name">${escHtml(req.app_name)}</div>
+          <div class="agr-app-origin">${escHtml(req.app_origin)}</div>
+        </div>
+        <p class="agr-muted">${tr('appGrant.trustIntro', 'This app is not yours. It gets its OWN scoped, revocable key — never your login session. You can revoke it anytime in Profile › Access.')}</p>
+
+        <div class="agr-scopes-label">${tr('appGrant.needsLabel', 'This app needs:')}</div>
+        <ul class="agr-scopes">
+          ${req.scopes.map((s) => html`
+            <li class="agr-scope" key=${s.scope}>
+              ${advanced && html`
+                <input type="checkbox" class="agr-scope-check" checked=${selected.has(s.scope)}
+                  onChange=${() => toggle(s.scope)} aria-label=${s.scope} />`}
+              <span class="agr-scope-text">
+                <span class="agr-scope-desc">${escHtml(s.description || s.scope)}</span>
+                <span class="agr-scope-name">${escHtml(s.scope)}</span>
+              </span>
+            </li>`)}
+        </ul>
+
+        <button class="agr-advanced-toggle" onClick=${() => setAdvanced((v) => !v)}>
+          ${advanced ? tr('appGrant.advancedHide', '▲ Hide advanced') : tr('appGrant.advancedShow', '⚙ Advanced — choose permissions')}
+        </button>
+
+        <div class="agr-actions">
+          ${existingGrant
+            ? html`<button class="btn-danger agr-btn" onClick=${revoke} disabled=${submitting}>${tr('appGrant.revoke', 'Revoke access')}</button>`
+            : html`<button class="btn-outline agr-btn" onClick=${deny} disabled=${submitting}>${tr('appGrant.deny', 'Don’t trust')}</button>`}
+          <button class="btn-primary agr-btn" onClick=${approve} disabled=${submitting || selected.size === 0}>
+            ${submitting ? tr('appGrant.approving', 'Allowing…') : (existingGrant ? tr('appGrant.saveCta', 'Save changes') : tr('appGrant.trustCta', '❤ Trust — allow access'))}
+          </button>
+        </div>
+        ${!existingGrant && html`<p class="agr-next">${tr('appGrant.nextNote', 'Next time this app logs you in automatically — no prompt.')}</p>`}
+      </div>
+    </div>`;
+}

package/dist/public/views/business.js

@@ -9,6 +9,8 @@
  * @usage routed at /v1/business by spa.html
  * @version-history
  *   v1.0.0 — 2026-06-10 — Initial (owner spec).
+ *   v1.1.0 — 2026-06-20 — H-2: published-app proof links open in a sandboxed opaque-origin
+ *     iframe (openAppSandboxed) instead of a top-level apex ?mode=inline tab.
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -17,6 +19,7 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
 import { ContactCard } from '/components/ContactCard.js';
+import { openAppSandboxed, isAppHtmlUrl } from '/js/app-sandbox.js';
 
 const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
 const CONTACT = 'mailto:jouni.miikki@aimeat.io';
@@ -42,7 +45,11 @@ export default function Business({ navigate }) {
       <p class="ld-case-text">${text}</p>
       ${quote && html`<blockquote class="ld-case-quote">“${quote}”<footer>— ${quoteBy}</footer></blockquote>`}
       ${proofHref
-        ? html`<a class="ld-case-proof" href=${proofHref} target="_blank" rel="noopener">${proofLabel}</a>`
+        // H-2: published-app proof links open in a sandboxed opaque-origin iframe, never a
+        // top-level apex document. Non-app evidence (public viewers, external sites) opens normally.
+        ? (isAppHtmlUrl(proofHref)
+          ? html`<a class="ld-case-proof" href="#" role="button" onClick=${(e) => { e.preventDefault(); openAppSandboxed(proofHref, proofLabel); }}>${proofLabel}</a>`
+          : html`<a class="ld-case-proof" href=${proofHref} target="_blank" rel="noopener">${proofLabel}</a>`)
         : proofNote && html`<div class="ld-case-proofnote">${proofNote}</div>`}
       <a class="ld-path-cta" href=${ctaHref}>${ctaLabel}</a>
     </div>

package/dist/public/views/how-it-works.js

@@ -8,6 +8,8 @@
  * @usage routed at /v1/how-it-works by spa.html
  * @version-history
  *   v1.0.0 — 2026-06-10 — Initial (owner spec).
+ *   v1.1.0 — 2026-06-20 — H-2: the live-example app link opens in a sandboxed opaque-origin
+ *     iframe (openAppSandboxed) instead of a top-level apex ?mode=inline tab.
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -15,6 +17,7 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
+import { openAppSandboxed } from '/js/app-sandbox.js';
 
 const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
 
@@ -144,7 +147,8 @@ export default function HowItWorks({ navigate }) {
         <div class="ld-stats-own">
           ${tr('hiw.exampleText', 'AIMEAT Sanomat writes itself every evening. news-fetcher pulls raw material at 17:00, six writer agents produce the articles, and the paper ships with zero human hours.')}
           ${paper && html`
-            <a class="ld-stats-cta" href=${`/v1/apps/${encodeURIComponent(paper.owner)}/${encodeURIComponent(paper.filename)}?mode=inline`} target="_blank">
+            <a class="ld-stats-cta" href="#" role="button" onClick=${(e) => { e.preventDefault();
+                openAppSandboxed(`/v1/apps/${encodeURIComponent(paper.owner)}/${encodeURIComponent(paper.filename)}?mode=inline`, paper.filename); }}>
               ${tr('hiw.exampleCta', "Read tonight's paper →")}</a>`}
         </div>
       </div>

package/dist/public/views/landing-node-totals.js

@@ -0,0 +1,71 @@
+/**
+ * @file landing-node-totals.js
+ * @description Landing-page "Happening on this node" panel. Replaces the previously
+ *   often-empty 3-tab activity feed with cumulative, never-empty node counters:
+ *   public apps, public organisms, connected agents (+ online now), public knowledge
+ *   packages, and total app downloads. One fetch of GET /v1/public/node-totals on
+ *   mount, refreshed on the aimeat-live-update window event and on a slow interval.
+ *   Rationale: an empty feed reads as "broken"; counts always show the node is alive.
+ * @structure default export NodeTotals() — sibling component imported by landing.js.
+ * @usage import NodeTotals from './landing-node-totals.js'; <${NodeTotals} />
+ * @version-history
+ *   v1.0.0 — 2026-06-20 — Initial: cumulative node counters replacing the activity feed.
+ */
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+const num = (n) => (Number(n) || 0).toLocaleString();
+
+export default function NodeTotals() {
+  const [totals, setTotals] = useState(null);
+
+  useEffect(() => {
+    let alive = true;
+    const load = () => {
+      fetch('/v1/public/node-totals')
+        .then(r => r.json())
+        .then(j => { if (alive && j && j.ok !== false && j.data) setTotals(j.data); })
+        .catch(() => { /* keep last value — panel renders a graceful placeholder */ });
+    };
+    load();
+    const onLive = () => load();
+    window.addEventListener('aimeat-live-update', onLive);
+    const iv = setInterval(load, 60_000);
+    return () => {
+      alive = false;
+      window.removeEventListener('aimeat-live-update', onLive);
+      clearInterval(iv);
+    };
+  }, []);
+
+  const d = totals || {};
+  const cards = [
+    { icon: '🎮', value: d.apps, label: tr('landing.totalApps', 'public apps') },
+    { icon: '🧬', value: d.organisms, label: tr('landing.totalOrganisms', 'organisms') },
+    {
+      icon: '🤖', value: d.agents, label: tr('landing.totalAgents', 'agents'),
+      sub: d.agents_online > 0 ? `${num(d.agents_online)} ${tr('landing.totalOnline', 'online now')}` : null,
+    },
+    { icon: '📚', value: d.knowledge_packages, label: tr('landing.totalKnowledge', 'knowledge packages') },
+    { icon: '⬇️', value: d.downloads, label: tr('landing.totalDownloads', 'app downloads') },
+  ];
+
+  return html`
+    <section class="pa nt">
+      <h2 class="pa-title">${tr('landing.feedTitle', 'Happening on this node')}</h2>
+      <p class="pa-sub">${tr('landing.totalsSub', "What's live on this node right now.")}</p>
+      <div class="nt-grid">
+        ${cards.map(c => html`
+          <div class="nt-card" key=${c.label}>
+            <span class="nt-icon">${c.icon}</span>
+            <span class="nt-value">${totals ? num(c.value) : '–'}</span>
+            <span class="nt-label">${c.label}</span>
+            ${c.sub ? html`<span class="nt-sub">${c.sub}</span>` : null}
+          </div>`)}
+      </div>
+    </section>`;
+}

package/dist/public/views/landing.js

@@ -1,15 +1,14 @@
 /**
  * @file landing.js
- * @description Logged-out landing page: reward first, explanation second. Hero is a
- *   newspaper-framed teaser for tonight's Sanomat that opens the REAL app in one click —
- *   no iframe (mobile-friendly) and no fake image: a designed masthead card by default,
- *   auto-upgrading to a real screenshot if/when one is uploaded (apps API screenshot_url
- *   only). Two CTAs (try it free · get your own) → proof gallery → live activity feed →
+ * @description Logged-out landing page: reward first, explanation second. Hero is the
+ *   build-prompt pitch — copy one prompt and your AI builds you a real app on AIMEAT that you
+ *   own and publish. Two CTAs (copy build prompt · get your own) → LIVE wall of the real apps
+ *   people published here (manifest-driven, from the apps API) → node totals panel →
  *   the 3-step build loop + build prompt → "ask your own AI" → today's node stats +
  *   ownership line (the sales close) → footer. Logged-in visitors are forwarded to the
  *   profile Home dashboard. No protocol terms (GHII/GAII/CSM/federation) above the fold;
  *   a working result does the selling.
- * @structure default export Landing({ navigate }) + Hero/StatsPanel/BuildAppPrompt/BuildAgentPrompt/AskYourAI/Gallery
+ * @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
  *   v1.0.0 — 2026-06-10 — Initial: landing/portal split (owner spec).
@@ -24,6 +23,15 @@
  *   v2.1.0 — 2026-06-17 — Add BuildAgentPrompt: a copy-paste "build an agent in 10 minutes" prompt
  *     for the local crewaimeat fleet (Ollama/Gemma, no keys); Hero "Get your own →" now points to
  *     the desktop installer GitHub Release (was /v1/pricing).
+ *   v3.0.0 — 2026-06-20 — Value-first hero: replace the Sanomat newspaper Hero with BuildHero
+ *     (copy the build prompt → your AI builds you an app you own + publish); the gallery becomes a
+ *     LIVE wall of the real apps people published here (manifest-driven from /v1/apps).
+ *   v3.1.0 — 2026-06-20 — Wall: fixed 3-up grid + filter search; cards show author + publish
+ *     date/time. Hero subline adds "let your agents keep it running" (Sanomat as the example).
+ *   v3.2.0 — 2026-06-20 — H-2: wall cards open published apps in a sandboxed opaque-origin
+ *     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).
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -31,7 +39,8 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
-import PublicActivityFeed from './landing-activity.js';
+import { openAppSandboxed } from '/js/app-sandbox.js';
+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; };
@@ -67,44 +76,63 @@ function StatsPanel({ navigate }) {
   `;
 }
 
-/* ── Proof gallery: six fully curated cards. Sanomat and Comicland lead because they
-   work solo, instantly; Deep Six needs two players (badged). Proof, not a shop. ── */
-function Gallery({ onApps }) {
-  const [, setApps] = useState([]);
+/* ── Live wall — the REAL apps people built with their AI and published to this node (from the
+   apps API, manifest-driven). Three per row + a filter. Each card: name · description · who made
+   it · when. The proof the loop works: your creation lands on this same wall. ── */
+function fmtPublished(iso) {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } catch { return ''; }
+}
+
+function Gallery() {
+  const [apps, setApps] = useState([]);
+  const [q, setQ] = useState('');
   useEffect(() => {
-    // The catalog still feeds card A's local-Sanomat lookup via onApps.
-    fetch('/v1/apps?sort=popular&limit=50').then(r => r.json())
-      .then(j => { const list = j?.data?.apps || []; setApps(list); onApps?.(list); })
-      .catch(() => { /* curated cards render regardless */ });
+    fetch('/v1/apps?sort=popular&limit=60').then(r => r.json())
+      .then(j => setApps(j?.data?.apps || []))
+      .catch(() => { /* empty state renders */ });
   }, []);
 
-  const cards = [
-    { name: 'AIMEAT Sanomat', desc: tr('landing.gallerySanomat', 'The paper that writes itself every evening. Six agents, zero human hours.'),
-      href: 'https://aimeat.io/v1/apps/happydude500001/laimeat-sanomat.html?mode=inline' },
-    { name: 'Comicland', desc: tr('landing.galleryComicland', 'Comics by agents — browse the catalog.'),
-      href: 'https://aimeat.io/v1/apps/happydude500001/comicland-v2-app.html?mode=inline#/catalog' },
-    { name: 'Battleship (Deep Six)', desc: tr('landing.galleryDeepSix', 'Two-player battleship on an agent platform. Bring an opponent — or two browsers.'),
-      href: 'https://aimeat.io/v1/apps/anonymous/deep-six.html?mode=inline', badge: tr('landing.twoPlayers', '2 players') },
-    { name: 'Solar System Simulator', desc: tr('landing.gallerySolar', 'Simulate the solar system.'),
-      href: 'https://aimeat.io/v1/apps/anonymous/solar-system.html?mode=inline' },
-    { name: 'Math Graph 3D', desc: tr('landing.galleryGraph', 'Plot 3D math functions in the browser.'),
-      href: 'https://aimeat.io/v1/apps/anonymous/graph.html?mode=inline' },
-    { name: 'Band Jam', desc: tr('landing.galleryBandJam', 'Make music with your friends, live!'),
-      href: 'https://aimeat.io/v1/apps/anonymous/band-jam.html?mode=inline' },
-  ];
+  const ql = q.trim().toLowerCase();
+  const shown = !ql ? apps : apps.filter((a) => {
+    const m = a.manifest || {};
+    return [m.name, m.description, m.authorDisplay, a.owner].some(v => (v || '').toLowerCase().includes(ql));
+  });
 
   return html`
     <div class="ld-section">
-      <h2 class="ld-h2">${tr('landing.galleryTitle', 'Built with this loop — real apps, try them')}</h2>
-      <div class="ld-gallery">
-        ${cards.map(c => html`
-          <a key=${c.href} class="ld-app-card" href=${c.href} target="_blank" rel="noopener">
-            <div class="ld-app-name">${escHtml(c.name)}${c.badge && html` <span class="ld-app-badge">${c.badge}</span>`}</div>
-            ${c.desc && html`<div class="ld-app-desc">${escHtml(c.desc)}</div>`}
-            <div class="ld-app-meta">${tr('landing.builtInChat', 'built in an AI chat session')}</div>
-          </a>
-        `)}
-      </div>
+      <h2 class="ld-h2">${tr('landing.wallTitle', 'Built by people with their AI. Yours goes here too.')}</h2>
+      <input class="ld-wall-search" type="search" value=${q}
+        onInput=${(e) => setQ(e.target.value)}
+        placeholder=${tr('landing.wallSearch', 'Search apps…')}
+        aria-label=${tr('landing.wallSearch', 'Search apps')} />
+      ${shown.length === 0
+        ? html`<p class="ld-app-desc">${apps.length === 0
+            ? tr('landing.wallEmpty', 'Be the first — copy the prompt above, build something, and it lands here.')
+            : tr('landing.wallNoMatch', 'No apps match your search.')}</p>`
+        : html`<div class="ld-gallery">
+            ${shown.map((a) => {
+              const m = a.manifest || {};
+              // H-2: open published apps in a sandboxed (opaque-origin) iframe, never as a
+              // top-level apex document. Click-to-open instead of an apex href, so middle-/
+              // ctrl-click can't bypass it either.
+              const href = `/v1/apps/${encodeURIComponent(a.owner)}/${encodeURIComponent(a.filename)}?mode=inline`;
+              const desc = (m.description || '').length > 140 ? m.description.slice(0, 140) + '…' : (m.description || '');
+              const author = m.authorDisplay || a.owner || tr('landing.wallAnon', 'someone');
+              const when = a.created_at ? fmtPublished(a.created_at) : '';
+              const open = () => openAppSandboxed(href, m.name || a.filename);
+              return html`
+                <div key=${a.owner + '/' + a.filename} class="ld-app-card" role="button" tabindex="0"
+                  onClick=${open} onKeyDown=${(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); } }}>
+                  ${a.screenshot_url ? html`<img class="ld-app-shot" src=${a.screenshot_url} loading="lazy" alt="" />` : ''}
+                  <div class="ld-app-name">${m.icon ? escHtml(m.icon) + ' ' : ''}${escHtml(m.name || a.filename)}</div>
+                  ${desc && html`<div class="ld-app-desc">${escHtml(desc)}</div>`}
+                  <div class="ld-app-meta">${escHtml(author)}${when ? ' · ' + when : ''}</div>
+                </div>`;
+            })}
+          </div>`}
     </div>
   `;
 }
@@ -232,6 +260,7 @@ function buildLandingAppPrompt(nodeUrl) {
   p += 'Always include <meta name="viewport" content="width=device-width, initial-scale=1.0">. Mobile-first, single self-contained HTML file with embedded CSS + JS.\n\n';
   p += '### Important Rules\n';
   p += '- Return the COMPLETE HTML file, not fragments\n';
+  p += '- Also write a one-sentence description of what the app does - it is REQUIRED when publishing and shows in the catalogue and on the landing wall\n';
   p += '- Never use literal closing script tags in JS comments or strings\n';
   p += '- Keep it as a single self-contained HTML file\n';
   p += '- Load only the libraries you actually use; load aimeat-auth before libs that need a session\n';
@@ -381,35 +410,23 @@ function AskYourAI() {
     </section>`;
 }
 
-/* ── Hero v2 — reward first: a REAL screenshot of tonight's Sanomat (no iframe, so it
-   works on mobile), framed as a newspaper that opens the REAL app in one click. No fake
-   image: it shows a designed masthead card by default and auto-upgrades to a real
-   screenshot the day one is uploaded (we trust ONLY the apps API's screenshot_url, never a
-   guessed URL — every app currently has none, so the card is what shows). The two CTAs are
-   the only fork (experience it now · own it). ── */
-function Hero({ sanomat, tryHref }) {
-  const shot = sanomat?.screenshot_url || null; // only a real, API-reported screenshot
+/* ── Hero — value first: AIMEAT is a safe place to build real apps with your AI in minutes, and
+   you own + publish them. One copyable prompt is the whole on-ramp; the live wall below is the
+   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 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 */ }
+  };
   return html`
     <section class="ld-hero2">
-      <p class="ld-hero2-kicker">${tr('landing.heroKicker', 'Tonight’s paper wrote itself.')}</p>
-      <h1 class="ld-hero2-title">${tr('landing.heroLead', 'Six agents. Zero human hours.')}</h1>
-      <a class="ld-hero2-shot" href=${tryHref} target="_blank" rel="noopener"
-        aria-label=${tr('landing.heroOpenPaper', 'Open tonight’s paper')}>
-        ${shot ? html`
-          <img class="ld-hero2-img" src=${shot} loading="lazy"
-            alt=${tr('landing.heroShotAlt', 'AIMEAT Sanomat — tonight’s edition')} />
-        ` : html`
-          <div class="ld-hero2-paper">
-            <span class="ld-hero2-masthead">AIMEAT Sanomat</span>
-            <span class="ld-hero2-paper-rule"></span>
-            <span class="ld-hero2-paper-line">${tr('landing.heroPaperLine', 'Tonight’s edition · written entirely by agents')}</span>
-          </div>
-        `}
-        <span class="ld-hero2-openbar">${tr('landing.cardACta', 'Read tonight’s paper →')}</span>
-      </a>
-      <p class="ld-hero2-sub">${tr('landing.heroSub2', 'A real app, built and run by AI on AIMEAT — look before you sign up.')}</p>
+      <p class="ld-hero2-kicker">${tr('landing.buildHeroKicker', 'A safe place to build with AI.')}</p>
+      <h1 class="ld-hero2-title">${tr('landing.buildHeroTitle', 'Build a real app with your AI in minutes, and it’s yours.')}</h1>
+      <p class="ld-hero2-sub">${tr('landing.buildHeroSub', 'Copy one prompt into Claude, ChatGPT or any AI. It builds you a working app on AIMEAT, published live and yours to keep. Then let your agents run it for you, the way AIMEAT Sanomat writes itself every evening.')}</p>
       <div class="ld-hero2-cta">
-        <a class="btn-primary" href=${tryHref} target="_blank" rel="noopener">${tr('landing.heroTryFree', 'Try it free →')}</a>
+        <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>
     </section>
@@ -436,24 +453,16 @@ export default function Landing({ navigate }) {
     return () => window.removeEventListener('aimeat-auth-change', onAuth);
   }, []);
 
-  const [apps, setApps] = useState([]);
-  // Card A sends the solo visitor to Sanomat — an instant experience alone, no login.
-  // (Battleship/Deep Six lives in the gallery with its "2 players" badge.)
-  const sanomat = apps.find(a => /sanomat/i.test((a.filename || '') + ' ' + (a.name || '')));
-  const tryHref = sanomat
-    ? `/v1/apps/${encodeURIComponent(sanomat.owner)}/${encodeURIComponent(sanomat.filename)}?mode=inline`
-    : 'https://aimeat.io/v1/apps/happydude500001/laimeat-sanomat.html?mode=inline';
-
   return html`
     <div class="ld">
-      <!-- 1. Hero — reward first: a real, mobile-friendly Sanomat screenshot + the two CTAs. -->
-      <${Hero} sanomat=${sanomat} tryHref=${tryHref} />
+      <!-- 1. Hero — value first: build a real app with your AI; the live wall below is the proof. -->
+      <${BuildHero} />
 
-      <!-- 2. Proof gallery — more apps to try instantly, no login (moved up: the reward, not the footer). -->
-      <${Gallery} onApps=${setApps} />
+      <!-- 2. Live wall — the real apps people built with their AI and published here (yours goes here). -->
+      <${Gallery} />
 
-      <!-- 3. Public activity feed — live proof it's happening right now. -->
-      <${PublicActivityFeed} />
+      <!-- 3. Node totals — cumulative "this node has X" counters; never empty, always proof it's alive. -->
+      <${NodeTotals} />
 
       <!-- 4. How building works: the 3-step loop + the copyable build prompt. -->
       <div class="ld-loop">