aimeat 1.26.0 → 1.27.0

package/dist/public/spa.html

@@ -67,6 +67,8 @@
   <!-- Canonical styles for the shared <Markdown> component — load before views so it styles
        rendered markdown everywhere the component is used (no per-view re-definition). -->
   <link rel="stylesheet" href="/css/components/markdown.css">
+  <link rel="stylesheet" href="/css/components/app-sandbox.css">
+  <link rel="stylesheet" href="/css/views/app-grant.css">
   <!-- View CSS preloaded so they are ready before any view renders (prevents FOUC) -->
   <!-- hrefs are stamped with ?v=BUILD_ID at serve time by portal.ts serveSpa() -->
   <link rel="stylesheet" href="/css/views/portal.css">
@@ -105,6 +107,7 @@
       "/js/i18n.js": "/js/i18n.js",
       "/js/theme.js": "/js/theme.js",
       "/js/utils.js": "/js/utils.js",
+      "/js/app-sandbox.js": "/js/app-sandbox.js",
       "/js/format.js": "/js/format.js",
       "/js/api.js": "/js/api.js",
       "/js/hooks.js": "/js/hooks.js",
@@ -276,6 +279,7 @@
     import { loadTranslations, t, getLocale, switchLocale, onLocaleChange } from '/js/i18n.js';
     import { initThemeSystem, getTheme, toggleTheme, onThemeChange } from '/js/theme.js';
     import { NotificationBell } from '/components/NotificationBell.js';
+    import { openAppSandboxed, isAppHtmlUrl } from '/js/app-sandbox.js';
     // generateStars no longer needed for light theme
 
     const html = htm.bind(h);
@@ -325,6 +329,7 @@
       '/v1/how-it-works': () => import('/views/how-it-works.js' + B),
       '/v1/business':    () => import('/views/business.js' + B),
       '/v1/profile':     () => import('/views/profile.js' + B),
+      '/v1/app-grant':   () => import('/views/app-grant.js' + B),
       '/v1/guides':      () => import('/views/guides.js' + B),
       '/v1/hobbies':     () => import('/views/hobbies.js' + B),
       '/v1/marketplace': () => import('/views/marketplace.js' + B),
@@ -412,6 +417,16 @@
           const a = e.target.closest('a[href]');
           if (!a) return;
           const href = a.getAttribute('href');
+          // H-2: a published-app HTML link must NEVER open as a top-level document on the
+          // apex origin (same origin as this authenticated SPA) — it could read the
+          // visitor's session. Force it into a sandboxed, opaque-origin iframe instead,
+          // regardless of target=_blank / modifier keys.
+          if (isAppHtmlUrl(href)) {
+            e.preventDefault();
+            const label = (a.textContent || '').trim() || 'App';
+            openAppSandboxed(href, label);
+            return;
+          }
           // Only intercept internal /v1/ links
           if (!href || !href.startsWith('/v1/')) return;
           if (e.ctrlKey || e.metaKey || e.shiftKey) return;
@@ -656,7 +671,7 @@
         const keys = [
           'descNew', 'descReturning', 'usernameLabel', 'usernamePlaceholder',
           'passwordLabel', 'passwordPlaceholder', 'displayNameLabel', 'displayNameHint',
-          'displayNamePlaceholder', 'signInBtn', 'cancelBtn', 'working',
+          'displayNamePlaceholder', 'signInBtn', 'cancelBtn', 'orLabel', 'googleSignIn', 'working',
           'errUserShort', 'errPassShort', 'errWrongPass', 'loggedIn', 'logoutBtn',
           'forgotPassword', 'forgotUsername', 'resetPasswordTitle', 'resetPasswordDesc',
           'sendResetCode', 'backToLogin', 'resetCodeSent', 'enterNewPasswordTitle',

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

@@ -0,0 +1,107 @@
+/**
+ * @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 Approves or Denies. Approve POSTs to /v1/app-grants/authorize-consent and the
+ *   server returns the app's redirect_url (carrying the one-time code) which we navigate to —
+ *   the app never sees the session, only the scoped grant token it then exchanges.
+ * @structure default export AppGrant() — loads the pending request, renders scopes + actions.
+ * @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).
+ */
+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 requestId = new URLSearchParams(window.location.search).get('req') || '';
+  const loggedIn = !!window.AIMEAT?.auth?.hasSession;
+
+  useEffect(() => {
+    if (!requestId) { setState({ status: 'error', error: tr('appGrant.missing', 'No authorization request.') }); return; }
+    if (!loggedIn) { setState({ status: 'login' }); return; }
+    let live = true;
+    api(`/v1/app-grants/request/${encodeURIComponent(requestId)}`)
+      .then((res) => { if (live) 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, loggedIn]);
+
+  async function approve() {
+    setSubmitting(true);
+    try {
+      const res = await api('/v1/app-grants/authorize-consent', { method: 'POST', body: JSON.stringify({ request_id: requestId }) });
+      window.location.href = res.data.redirect_url; // back to the app, carrying the one-time code
+    } catch (e) {
+      setState((s) => ({ ...s, status: 'error', error: e.message || 'Failed to approve.' }));
+      setSubmitting(false);
+    }
+  }
+
+  function deny() {
+    const origin = state.request?.app_origin;
+    if (origin) window.location.href = origin; else window.location.href = '/v1/profile';
+  }
+
+  if (state.status === 'loading') {
+    return html`<div class="agr-wrap"><p class="agr-muted">${tr('common.loading', 'Loading…')}</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>
+          <a class="btn-primary agr-btn" href="/v1/profile">${tr('appGrant.loginCta', 'Log in')}</a>
+        </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>
+          <a class="btn-outline agr-btn" href="/v1/profile">${tr('common.back', 'Back')}</a>
+        </div>
+      </div>`;
+  }
+
+  const req = state.request;
+  return html`
+    <div class="agr-wrap">
+      <div class="agr-card">
+        <h1 class="agr-title">${tr('appGrant.title', 'Allow this app to access your data?')}</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.intro', 'It will receive its own scoped, revocable token — never your login session. You can revoke it anytime in Profile › Access.')}</p>
+        <div class="agr-scopes-label">${tr('appGrant.scopesLabel', 'Requested access')}</div>
+        <ul class="agr-scopes">
+          ${req.scopes.map((s) => html`
+            <li class="agr-scope" key=${s.scope}>
+              <span class="agr-scope-name">${escHtml(s.scope)}</span>
+              <span class="agr-scope-desc">${escHtml(s.description || '')}</span>
+            </li>`)}
+        </ul>
+        <div class="agr-actions">
+          <button class="btn-outline agr-btn" onClick=${deny} disabled=${submitting}>${tr('appGrant.deny', 'Deny')}</button>
+          <button class="btn-primary agr-btn" onClick=${approve} disabled=${submitting}>
+            ${submitting ? tr('appGrant.approving', 'Approving…') : tr('appGrant.approve', 'Allow access')}
+          </button>
+        </div>
+      </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.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) → live activity feed →
  *   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,13 @@
  *   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.
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -31,6 +37,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';
 import PublicActivityFeed from './landing-activity.js';
 
 // t() echoes the key when a translation is missing — fall back to readable English.
@@ -67,44 +74,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 +258,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 +408,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,21 +451,13 @@ 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} />

package/dist/public/views/profile/access-tab.js

@@ -20,6 +20,8 @@
  *     neutral (access-h3, emojis dropped) and Add Node / New Token / New Group de-accented;
  *     Token Budget value is click-to-edit and the empty-rules state shows an example rule;
  *     sharing-groups section accepts the Memory tab's deep link (aimeat.access.focus).
+ *   v1.5.0 -- 2026-06-20 -- Add Connected Apps section (H-2 app grants): list + revoke the
+ *     scoped, user-approved access tokens published apps hold (GET/DELETE /v1/app-grants).
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
@@ -558,6 +560,78 @@ function AgentDefaultsSection({ showToast }) {
   `;
 }
 
+/* ═══════════════════════════════════════════════════════════════════
+   Connected Apps Section (H-2 app grants)
+   ═══════════════════════════════════════════════════════════════════ */
+
+// Apps the owner has explicitly granted scoped access to (the H-2 app-grant flow). Each
+// holds its OWN revocable token bound to a narrow scope set — never the login session.
+function ConnectedAppsSection({ showToast }) {
+  const { confirm, ConfirmUI } = useConfirm();
+  const [grants, setGrants] = useState(null);
+
+  const load = useCallback(async () => {
+    try { const r = await apiGet('/v1/app-grants'); setGrants(r.data?.grants || []); }
+    catch { setGrants([]); }
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const liveRef = useRef(load);
+  liveRef.current = load;
+  useEffect(() => {
+    const handler = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  const handleRevoke = useCallback((id, name) => {
+    confirm(
+      (t('profile.access.agConfirmRevoke') || 'Revoke access for "{name}"? It loses access immediately.').replace('{name}', name),
+      async () => {
+        try {
+          await apiDelete('/v1/app-grants/' + id);
+          showToast(t('profile.access.agRevoked') || 'App access revoked');
+          load();
+        } catch (e) { showToast(e.message); }
+      },
+      { danger: true },
+    );
+  }, [confirm, showToast, load]);
+
+  return html`
+    <h3 class="card-h3 access-h3 mt-section">${t('profile.access.agTitle') || 'Connected Apps'}</h3>
+    <div class="section-desc">${t('profile.access.agDesc') || 'Published apps you have granted scoped access to your data. Each holds its own revocable token — never your login session.'}</div>
+
+    ${grants === null
+      ? html`<div class="empty">${t('profile.access.agLoading') || 'Loading...'}</div>`
+      : grants.length === 0
+        ? html`<div class="access-empty-row"><span class="text-meta-sm">${t('profile.access.agEmpty') || 'No apps have access to your data.'}</span></div>`
+        : grants.map(g => html`
+            <div class="card" key=${g.grant_id}>
+              <div class="flex-between">
+                <div class="card-title">${escHtml(g.app_name || g.app)}</div>
+                <span class="badge badge-info">${(g.scopes || []).length} ${t('profile.access.agScopes') || 'scopes'}</span>
+              </div>
+              <div class="card-subtitle access-mono">${escHtml(g.app_origin || '')}</div>
+              <div class="detail-grid">
+                <div class="detail-item"><span class="detail-label">${t('profile.access.agGrantedAt') || 'Granted'}</span><span class="detail-value">${g.granted_at ? new Date(g.granted_at).toLocaleDateString() : '-'}</span></div>
+                <div class="detail-item"><span class="detail-label">${t('profile.access.agLastUsed') || 'Last used'}</span><span class="detail-value">${g.last_used_at ? new Date(g.last_used_at).toLocaleString() : (t('profile.access.agNever') || 'never')}</span></div>
+              </div>
+              ${(g.scopes || []).length > 0 && html`
+                <div class="flex-row-wrap mt-half">
+                  ${g.scopes.map(s => html`<span class="badge badge-muted" key=${s}>${escHtml(s)}</span>`)}
+                </div>
+              `}
+              <div class="card-actions">
+                <button class="btn-danger-solid btn-sm" onClick=${() => handleRevoke(g.grant_id, g.app_name || g.app)}>${t('profile.access.agRevoke') || 'Revoke'}</button>
+              </div>
+            </div>
+          `)
+    }
+    <${ConfirmUI} />
+  `;
+}
+
 /* ═══════════════════════════════════════════════════════════════════
    Agent Access Tokens Section
    ═══════════════════════════════════════════════════════════════════ */
@@ -999,6 +1073,7 @@ export default function AccessTab({ session, showToast }) {
     </div>`;
     })()}
 
+    <${ConnectedAppsSection} showToast=${showToast} />
     <${AccessTokensSection} session=${session} showToast=${showToast} />
     <${SharingGroupsSection} showToast=${showToast} />
     <${AgentDefaultsSection} showToast=${showToast} />

package/dist/scripts/screenshot-worker.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=screenshot-worker.d.ts.map

package/dist/scripts/screenshot-worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenshot-worker.d.ts","sourceRoot":"","sources":["../../scripts/screenshot-worker.ts"],"names":[],"mappings":""}

package/dist/scripts/screenshot-worker.js

@@ -0,0 +1,14 @@
+/**
+ * @file screenshot-worker.ts
+ * @description Dev wrapper for `pnpm screenshot:worker`. The implementation lives in
+ *   src/cli/screenshot-worker.ts and ships to npm users as the `aimeat screenshot-worker`
+ *   subcommand; this just invokes it with the current argv for local dev runs.
+ * @usage AIMEAT_OP_TOKEN=<token> pnpm screenshot:worker [--watch 600] [--dry-run] ...
+ * @version-history
+ *   v1.0.0 — 2026-06-20 — initial standalone worker.
+ *   v2.0.0 — 2026-06-20 — thin wrapper; logic moved to src/cli/screenshot-worker.ts (CLI subcommand
+ *     + playwright-core system-browser channel so npm/npx installs work without a browser download).
+ */
+import { runScreenshotWorker } from '../src/cli/screenshot-worker.js';
+runScreenshotWorker();
+//# sourceMappingURL=screenshot-worker.js.map

package/dist/scripts/screenshot-worker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenshot-worker.js","sourceRoot":"","sources":["../../scripts/screenshot-worker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAEtE,mBAAmB,EAAE,CAAC"}

package/dist/src/auth/jwt.d.ts

@@ -15,6 +15,7 @@ export interface JWTPayload {
     homeNode?: string;
     homeUrl?: string;
     eco_app?: string;
+    app_grant?: string;
 }
 /** Generate a unique session ID for JWT tracking. */
 export declare function generateSessionId(): string;
@@ -33,6 +34,7 @@ export interface VerifiedToken {
     homeNode?: string;
     homeUrl?: string;
     eco_app?: string;
+    app_grant?: string;
 }
 export declare function verifyJWT(token: string): Promise<VerifiedToken | null>;
 /**

package/dist/src/auth/jwt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jwt.d.ts","sourceRoot":"","sources":["../../../src/auth/jwt.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAQvD,wBAAgB,iBAAiB,IAAI;IAAE,UAAU,EAAE,SAAS,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAGnF;AAED,wBAAsB,YAAY,CAAC,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAmBnG;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qDAAqD;AACrD,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C;AAED,wBAAsB,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAyB3G;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAsB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CAwB5E;AAkBD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAmB5D;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAUjF;AAED;;;GAGG;AACH,wBAAsB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAiB/D"}
+{"version":3,"file":"jwt.d.ts","sourceRoot":"","sources":["../../../src/auth/jwt.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAQvD,wBAAgB,iBAAiB,IAAI;IAAE,UAAU,EAAE,SAAS,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAGnF;AAED,wBAAsB,YAAY,CAAC,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAmBnG;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qDAAqD;AACrD,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C;AAED,wBAAsB,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CA0B3G;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAsB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CAyB5E;AAkBD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAmB5D;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAUjF;AAED;;;GAGG;AACH,wBAAsB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAiB/D"}

package/dist/src/auth/jwt.js

@@ -55,6 +55,7 @@ export async function issueJWT(payload, ttlSeconds, sessionId) {
         ...(payload.homeNode ? { homeNode: payload.homeNode } : {}),
         ...(payload.homeUrl ? { homeUrl: payload.homeUrl } : {}),
         ...(payload.eco_app ? { eco_app: payload.eco_app } : {}),
+        ...(payload.app_grant ? { app_grant: payload.app_grant } : {}),
     })
         .setProtectedHeader({ alg: 'EdDSA', typ: 'JWT' })
         .setSubject(payload.sub)
@@ -86,6 +87,7 @@ export async function verifyJWT(token) {
             homeNode: payload.homeNode,
             homeUrl: payload.homeUrl,
             eco_app: payload.eco_app,
+            app_grant: payload.app_grant,
         };
     }
     catch {