aimeat 1.27.0 → 1.28.0

package/dist/public/css/views/profile.css

@@ -1591,83 +1591,45 @@
 }
 .pf .pf-fed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success, #22c55e); }
 
-/* --- Hero Onboarding (new user) --- */
-.pf .pf-hero-onboard {
-  background: var(--card, #fff); border-radius: 16px;
-  padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.06);
-}
-.pf .pf-hero-ob-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.3px; }
-.pf .pf-hero-ob-subtitle {
-  font-size: .85rem; color: var(--text-dim, #6B7280); margin-bottom: 20px;
-  max-width: 560px; line-height: 1.6;
-}
-.pf .pf-onboard-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
-.pf .pf-onboard-card {
-  padding: 16px; border-radius: 12px; border: 1.5px solid var(--border, #e5e5e0);
-  cursor: pointer; transition: all .2s; position: relative;
-}
-.pf .pf-onboard-card:hover { border-color: var(--accent, #E8564A); box-shadow: 0 4px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
-.pf .pf-onboard-card.highlight { border-color: var(--accent, #E8564A); background: var(--accent-soft, #FFF0EE); }
-.pf .pf-onboard-card.highlight:hover { background: var(--accent-subtle); }
-.pf .pf-onboard-icon { font-size: 24px; margin-bottom: 8px; display: block; }
-.pf .pf-onboard-title { font-size: .93rem; font-weight: 600; margin-bottom: 4px; }
-.pf .pf-onboard-desc { font-size: .81rem; color: var(--text-dim, #6B7280); line-height: 1.5; }
-.pf .pf-onboard-tag {
-  position: absolute; top: 10px; right: 10px; font-size: .6rem; font-weight: 700;
-  text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 4px;
-  background: var(--accent, #E8564A); color: #fff;
-}
-.pf .pf-onboard-tag.pf-tag-later { background: var(--border, #e5e5e0); color: var(--text-dim, #6B7280); }
-
-/* --- Knowledge Callout (new user, after hero) --- */
-.pf .pf-knowledge-callout {
-  background: var(--pf-callout-gradient);
-  border-radius: 12px; padding: 16px 20px;
-  display: flex; align-items: flex-start; gap: 14px;
-  border: 1px solid rgba(99,102,241,.15); cursor: pointer;
-  transition: all .2s;
-}
-.pf .pf-knowledge-callout:hover { border-color: #6366F1; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
-.pf .pf-knowledge-callout-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
-.pf .pf-knowledge-callout-body { flex: 1; min-width: 0; }
-.pf .pf-knowledge-callout-title { font-size: .93rem; font-weight: 600; margin-bottom: 4px; }
-.pf .pf-knowledge-callout-desc { font-size: .81rem; color: var(--text-dim, #6B7280); line-height: 1.55; }
-.pf .pf-ai-pills { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
-.pf .pf-ai-pill {
-  font-size: .68rem; font-weight: 500; padding: 2px 10px; border-radius: 20px;
-  background: var(--card, #fff); color: var(--text-dim, #6B7280);
-  border: 1px solid var(--border, #e5e5e0);
-}
-
-/* --- Knowledge Button (active user) --- */
-.pf .pf-knowledge-btn {
-  display: flex; align-items: center; gap: 12px;
-  background: var(--pf-callout-gradient);
-  border: 1px solid rgba(99,102,241,.15);
-  border-radius: 12px; padding: 14px 20px;
-  cursor: pointer; transition: all .2s;
-  color: var(--text, #1a1a1a);
-}
-.pf .pf-knowledge-btn:hover { border-color: #6366F1; box-shadow: 0 4px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
-.pf .pf-kb-icon { font-size: 22px; flex-shrink: 0; }
-.pf .pf-kb-text { flex: 1; min-width: 0; }
-.pf .pf-kb-title { font-size: .87rem; font-weight: 600; }
-.pf .pf-kb-desc { font-size: .75rem; color: var(--text-dim, #6B7280); }
-.pf .pf-kb-arrow { font-size: 1rem; color: #6366F1; }
-
-/* --- Ghost App Tiles (new user) --- */
-.pf .pf-ghost-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
-.pf .pf-ghost-tile {
-  aspect-ratio: 1; border-radius: 12px;
-  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
-  cursor: pointer; transition: all .15s;
-  border: 1.5px dashed var(--border, #e5e5e0); background: var(--card, #FAFAF8);
-  padding: 8px; opacity: .55;
-}
-.pf .pf-ghost-tile:hover { opacity: .85; border-color: var(--accent, #E8564A); }
-.pf .pf-ghost-icon { font-size: 26px; filter: grayscale(50%); }
-.pf .pf-ghost-name { font-size: .68rem; font-weight: 500; text-align: center; color: var(--text-dim, #9CA3AF); line-height: 1.3; }
-.pf .pf-ghost-cta { font-size: .56rem; font-weight: 600; color: var(--accent, #E8564A); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
+/* --- Header actions + presence pill (ProfileCard header) --- */
+.pf .pf-lp-actions {
+  margin-left: auto; display: flex; align-items: center; gap: 10px;
+  align-self: flex-start; flex-wrap: wrap;
+}
+.pf .pf-presence-pill-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  border: 1px solid var(--border, #e5e5e0); background: var(--bg-dim, #FAFAF8);
+  color: var(--text, #1a1a1a); border-radius: 999px; padding: 4px 10px 4px 8px;
+  cursor: pointer; font: inherit; font-size: .8rem;
+  transition: border-color .15s, background .15s;
+}
+.pf .pf-presence-pill-btn:hover { border-color: var(--accent, #E8564A); background: var(--surface, var(--card)); }
+.pf .pf-presence-pill-caret { font-size: .7rem; color: var(--text-dim, #9CA3AF); margin-left: 2px; }
+
+/* --- Suggested next steps (home dashboard) --- */
+.pf .pf-next {
+  background: var(--card, #fff); border-radius: 16px; padding: 18px 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.04); border: 1px solid var(--border-soft, #f0f0ec);
+}
+.pf .pf-next-title {
+  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
+  color: var(--text-dim, #9CA3AF); margin-bottom: 12px;
+}
+.pf .pf-next-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
+.pf .pf-next-card {
+  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
+  padding: 14px 16px; border-radius: 12px; cursor: pointer; font: inherit;
+  border: 1.5px solid var(--border, #e5e5e0); background: var(--card, #fff);
+  color: var(--text, #1a1a1a); transition: all .18s;
+}
+.pf .pf-next-card:hover { border-color: var(--accent, #E8564A); box-shadow: 0 4px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
+.pf .pf-next-card--primary { border-color: var(--accent, #E8564A); background: var(--accent-soft, #FFF0EE); }
+.pf .pf-next-card--primary:hover { background: var(--accent-subtle); }
+.pf .pf-next-ico { font-size: 22px; flex-shrink: 0; line-height: 1; }
+.pf .pf-next-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.pf .pf-next-card-title { font-size: .92rem; font-weight: 600; }
+.pf .pf-next-card-desc { font-size: .8rem; color: var(--text-dim, #6B7280); line-height: 1.45; }
+.pf .pf-next-arrow { font-size: 1.1rem; color: var(--accent, #E8564A); flex-shrink: 0; opacity: .7; }
 
 /* --- Cortex Extensions (new user) --- */
 .pf .pf-cortex-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@@ -2035,11 +1997,7 @@
 }
 
 /* ─── Responsive: tablet ─── */
-@media (min-width: 480px) {
-  .pf .pf-ghost-grid { grid-template-columns: repeat(4, 1fr); }
-}
 @media (min-width: 640px) {
-  .pf .pf-onboard-grid { grid-template-columns: 1fr 1fr; }
   .pf .pf-cortex-grid  { grid-template-columns: 1fr 1fr; }
 }
 @media (min-width: 900px) {
@@ -2585,6 +2543,42 @@
 .pj-struct-body .md-body strong { font-weight: 600; }
 .pj-struct-body .md-body em { color: var(--muted); font-style: normal; }
 
+/* ── README panel (free-form description, Osa A) ── */
+.pj-readme { margin: 0.4rem 0 0.9rem; padding: 0.85rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
+.pj-readme-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between; }
+.pj-readme-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
+.pj-readme-actions { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
+.pj-readme-body .md-body { font-size: 0.9rem; color: var(--text); line-height: 1.55; }
+.pj-readme-body .md-body > :first-child { margin-top: 0; }
+.pj-readme-textarea { width: 100%; font-family: var(--font-mono, monospace); font-size: 0.82rem; line-height: 1.5; resize: vertical; }
+
+/* ── Interactive mindmap (Osa C) — reuses .of-mapwrap--clickable cursor/hover from offers.css ── */
+.pj-mindmap { margin: 0.4rem 0 0.9rem; }
+.pj-mindmap-body { margin-top: 0.4rem; padding: 0.75rem 0.9rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
+.pj-mindmap-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-bottom: 0.6rem; }
+.pj-mm-opt { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-dim); }
+.pj-mm-opt select { width: auto; }
+.pj-mm-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-dim); cursor: pointer; }
+.pj-mindmap-canvas { overflow: auto; max-height: 36rem; }
+.pj-mindmap-canvas .node { cursor: pointer; }
+.pj-mindmap-canvas .node:hover { opacity: 0.82; }
+.pj-mindmap-hint { margin-top: 0.4rem; }
+
+/* ── Structure timeline / development (Osa D) ── */
+.pj-timeline { margin: 0.4rem 0 0.9rem; }
+.pj-timeline-body { margin-top: 0.4rem; padding: 0.75rem 0.9rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
+.pj-timeline-grid { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 1rem; align-items: start; }
+.pj-timeline-list { list-style: none; margin: 0; padding: 0; max-height: 30rem; overflow: auto; }
+.pj-timeline-item { margin: 0; }
+.pj-timeline-entry { display: flex; flex-direction: column; gap: 0.1rem; width: 100%; text-align: left; background: none; border: none; border-left: 2px solid var(--border); padding: 0.4rem 0.6rem; cursor: pointer; color: var(--text); }
+.pj-timeline-entry:hover { background: var(--bg-dim); }
+.pj-timeline-item.is-active .pj-timeline-entry { border-left-color: var(--accent); background: var(--bg-dim); }
+.pj-timeline-date { font-size: 0.75rem; color: var(--muted); }
+.pj-timeline-event { font-size: 0.84rem; }
+.pj-timeline-counts { font-size: 0.72rem; }
+.pj-timeline-map { overflow: auto; max-height: 30rem; }
+@media (max-width: 720px) { .pj-timeline-grid { grid-template-columns: 1fr; } }
+
 /* ── Workspace renew (phase 2): header actions, review banner, add-space tab ── */
 .pj-ws-head-actions { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }
 .pj-ws-banner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; border: 1px solid var(--border); border-left: 3px solid var(--warn, var(--accent)); border-radius: 10px; background: var(--card); padding: 0.55rem 0.75rem; margin: 0.6rem 0 0.2rem; }
@@ -2668,7 +2662,6 @@
 .pf-home-row-meta.pf-ok { color: var(--success-fg, var(--text)); }
 .pf-lp-stat-link { background: none; border: none; padding: 0.15rem 0.35rem; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
 .pf-lp-stat-link:hover { background: var(--bg-surface); }
-.pf-lp-profile-btn { margin-left: auto; align-self: flex-start; }
 .pf-promo-dismiss { float: right; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 0.85rem; padding: 0 0.2rem; }
 .pf-promo-dismiss:hover { color: var(--text); }
 /* Edit profile / password dialogs */
@@ -2945,9 +2938,9 @@
 .pf-eco-tech-principal { display: inline-block; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .5rem; word-break: break-all; }
 .pf-eco-tech-access { margin: -.15rem 0 .4rem; }
 
-/* ── Presence control (Koti home) — backed by PresenceControl in landing-page.js.
-   Self-contained card; previews the same <PresenceDot> shown next to people. ── */
-.pf-presence-card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 1rem 1.1rem; margin-bottom: 1rem; }
+/* ── Presence settings dialog — backed by PresenceDialog in landing-page.js, opened
+   from the <PresencePill> in the ProfileCard header; previews the same <PresenceDot>
+   shown next to people. ── */
 .pf-presence-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
 .pf-presence-head .section-desc { margin-bottom: .75rem; }
 .pf-presence-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0; }

package/dist/public/js/app-sandbox.js

@@ -1,16 +1,22 @@
 /**
  * @file public/js/app-sandbox.js
- * @description Open a user-published app's HTML inside a full-screen, sandboxed,
- *   opaque-origin iframe overlay — the H-2-safe way to "view" an app from anywhere in
- *   the SPA. The iframe's `sandbox` deliberately omits `allow-same-origin`, so even
- *   apex-hosted (`/v1/apps/...?mode=inline`) content runs with an opaque origin and can
- *   neither read aimeat.io localStorage nor send credentialed same-origin requests
- *   (e.g. POST /v1/auth/refresh). Replaces every top-level `window.open(...?mode=inline)`
- *   / `<a target="_blank">` app link that previously ran app HTML on the apex origin.
- * @structure isAppHtmlUrl() route matcher · openAppSandboxed() overlay builder.
+ * @description Open a user-published app from anywhere in the SPA. Apps always open TOP-LEVEL
+ *   in a new tab via the apex `?mode=inline` URL — a clean, full-screen page (no overlay/X).
+ *   The server decides isolation:
+ *     - app origin OFF → the app is served inline on the apex (same host as the SPA), so the
+ *       user's session carries into the app (it can refresh + read its own data — "logged in");
+ *     - app origin ON  → the apex 301s to `apps.<domain>`, an isolated origin with no ambient
+ *       session (apps then use the explicit grant flow).
+ *   So "logged into aimeat.io ⇒ apps are logged in" is the OFF (default) behaviour; ON is the
+ *   opt-in hardened mode for multi-user/public nodes.
+ * @structure isAppHtmlUrl() route matcher · openAppSandboxed() top-level opener.
  * @usage import { openAppSandboxed, isAppHtmlUrl } from '/js/app-sandbox.js'
  * @version-history
  *   v1.0.0 — 2026-06-20 — Initial (H-2 app-origin isolation, Phase 0).
+ *   v1.1.0 — 2026-06-20 — App origin live → open apps top-level; opaque-sandbox overlay fallback.
+ *   v2.0.0 — 2026-06-20 — Always open apps TOP-LEVEL (the opaque sandbox gave apps origin `null`,
+ *     breaking their storage/API and forcing a re-login). Isolation is now the server's job via
+ *     the app origin; with it off, apps run on the apex and inherit the user's session.
  */
 
 /** Matches the published-app HTML route: /v1/apps/<owner>/<file> (optionally ?mode=inline). */
@@ -27,57 +33,10 @@ export function isAppHtmlUrl(href) {
   return /^\/v1\/apps\/[^/]+\/[^/]+$/.test(path);
 }
 
-let escHandler = null;
-
-/** Remove the overlay (if present) and detach the Escape handler. */
-function closeOverlay() {
-  const existing = document.getElementById('app-sandbox-overlay');
-  if (existing) existing.remove();
-  if (escHandler) {
-    document.removeEventListener('keydown', escHandler);
-    escHandler = null;
-  }
-}
-
 /**
- * Show `url` in a sandboxed (opaque-origin) iframe overlay. `name` labels the toolbar.
- * Any previously-open overlay is replaced.
+ * Open a published app in a new top-level tab. `url` is the apex `?mode=inline` URL; the server
+ * either serves it inline (session inherited) or 301s it to the isolated app origin.
  */
-export function openAppSandboxed(url, name) {
-  closeOverlay();
-
-  const overlay = document.createElement('div');
-  overlay.id = 'app-sandbox-overlay';
-  overlay.className = 'app-sandbox-overlay';
-
-  const toolbar = document.createElement('div');
-  toolbar.className = 'app-sandbox-toolbar';
-
-  const title = document.createElement('span');
-  title.className = 'app-sandbox-title';
-  title.textContent = name || 'App';
-
-  const close = document.createElement('button');
-  close.type = 'button';
-  close.className = 'app-sandbox-close';
-  close.setAttribute('aria-label', 'Close');
-  close.textContent = '✕';
-  close.addEventListener('click', closeOverlay);
-
-  toolbar.appendChild(title);
-  toolbar.appendChild(close);
-
-  const iframe = document.createElement('iframe');
-  iframe.className = 'app-sandbox-frame';
-  // No allow-same-origin → opaque origin. This is the entire H-2 protection.
-  iframe.setAttribute('sandbox', 'allow-scripts allow-forms allow-popups allow-modals');
-  iframe.setAttribute('referrerpolicy', 'no-referrer');
-  iframe.src = url;
-
-  overlay.appendChild(toolbar);
-  overlay.appendChild(iframe);
-  document.body.appendChild(overlay);
-
-  escHandler = (e) => { if (e.key === 'Escape') closeOverlay(); };
-  document.addEventListener('keydown', escHandler);
+export function openAppSandboxed(url, _name) {
+  window.open(url, '_blank', 'noopener');
 }

package/dist/public/js/presence-store.js

@@ -70,7 +70,13 @@ export function refreshAll() {
 function bindLive() {
   if (liveBound) return;
   liveBound = true;
-  window.addEventListener('aimeat-live-update', refreshAll);
+  // Refresh presence only when the 'presence' domain actually changed (or on a legacy
+  // "everything changed" payload), not on every unrelated live update.
+  window.addEventListener('aimeat-live-update', (e) => {
+    const d = /** @type {CustomEvent} */ (e).detail?.domains;
+    if (d && !d.has('presence')) return;
+    refreshAll();
+  });
 }
 
 /**

package/dist/public/js/services/agents.js

@@ -4,9 +4,16 @@
  */
 import { apiGet, apiPost, apiDelete, api } from '/js/api.js';
 
-/** List agents owned by the given owner. Returns array. */
-export async function listAgents(owner) {
-  const data = await apiGet('/v1/agents');
+/**
+ * List agents owned by the given owner. Returns array.
+ * @param {string} [owner] filter to this owner
+ * @param {{ include?: string }} [opts] `include:'stats'` attaches a per-agent `stats` projection
+ *   (task/message counts + latest timestamps + active_tasks + onboarding) in ONE request,
+ *   replacing the old N+1 per-agent fan-out.
+ */
+export async function listAgents(owner, opts = {}) {
+  const qs = opts.include ? `?include=${encodeURIComponent(opts.include)}` : '';
+  const data = await apiGet(`/v1/agents${qs}`);
   const list = data?.data?.agents || data?.data || [];
   return owner ? list.filter(a => a.owner === owner) : list;
 }

package/dist/public/js/services/generator-prompts-base.js

@@ -13,6 +13,8 @@
  *   import { AIMEAT_CONTEXT, INSTRUCTION_DISCLAIMER, COMPONENT_TEMPLATES } from '/js/services/generator-prompts-base.js';
  * @version-history
  *   v1.0.0 — 2026-03-22 — Extracted from generator-prompts.js
+ *   v1.1.0 — 2026-06-20 — App-build prompt: teach H-2 app-origin isolation (no ambient session;
+ *     public data via /v1/..., private data via the app-grant PKCE flow + scoped Bearer token).
  */
 
 export const AIMEAT_CONTEXT = `
@@ -600,9 +602,44 @@ Create an AIMEAT App (HTML/JS) for: ${label}
 
 ${context}
 
-## CRITICAL: Authentication & API Calls
-
-The app runs on the SAME ORIGIN as the AIMEAT node. Use relative API paths (e.g., "/v1/ext/..."), NOT absolute URLs.
+## CRITICAL: App origin isolation & data access (read this first)
+
+Your published app runs on an ISOLATED app origin (\`*.apps.<domain>\`, e.g. \`apps.aimeat.io\`) — a DIFFERENT browser origin from the AIMEAT node (\`aimeat.io\`). Consequences you MUST respect:
+- The app has NO access to the user's AIMEAT login session, cookie, or localStorage. There is no ambient/owner session.
+- NEVER call \`/v1/auth/refresh\` and NEVER fetch with \`credentials:'include'\` expecting the user's session — that pattern was removed for security (H-2) and now returns 401/403.
+- Same-origin \`fetch('/v1/...')\` to the app origin still works (CORS \`*\`) for PUBLIC data that needs no auth — public memory (\`getPublic\`), the catalogue, public boards.
+- For the user's OWN/PRIVATE data, you MUST use the explicit, revocable **app-grant** flow (OAuth-style, PKCE) below. The token you obtain is scoped and stored in YOUR OWN origin's localStorage; you call APIs with \`Authorization: Bearer <that token>\` — never the user's session.
+- Apps that use the user's OpenRouter key via cortex (\`AIMEAT.ai.complete()\`) are UNAFFECTED — that path is separate; use it as documented.
+
+### App-grant flow for private data (only when you need the user's own data)
+1. Send the user to the trusted apex to approve (PKCE \`code_challenge\` = base64url(SHA-256(verifier)), method S256):
+   \\\`\\\`\\\`javascript
+   // scope = space-separated agent scopes: memory:read memory:write memory:delete
+   //   catalogue:read social:read social:write wallet:read knowledge:read
+   const verifier = base64url(crypto.getRandomValues(new Uint8Array(32)));
+   sessionStorage.setItem('pkce', verifier);
+   const challenge = base64url(new Uint8Array(await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier))));
+   const url = 'https://aimeat.io/v1/app-grants/authorize'
+     + '?app=' + encodeURIComponent('<owner>/<file>')          // your published app id
+     + '&response_type=code&scope=' + encodeURIComponent('memory:read')
+     + '&redirect_uri=' + encodeURIComponent(location.origin + location.pathname)  // your URL on the app origin
+     + '&state=' + state + '&code_challenge=' + challenge + '&code_challenge_method=S256';
+   location.href = url;
+   \\\`\\\`\\\`
+2. On return, exchange the \`code\` for a scoped token (store it in YOUR localStorage):
+   \\\`\\\`\\\`javascript
+   const r = await fetch('https://aimeat.io/v1/app-grants/token', {
+     method: 'POST', headers: { 'Content-Type': 'application/json' },
+     body: JSON.stringify({ grant_type: 'authorization_code', code, code_verifier: verifier, redirect_uri: location.origin + location.pathname })
+   }).then(x => x.json());
+   localStorage.setItem('aimeat_token', r.data.access_token);      // scoped, revocable
+   localStorage.setItem('aimeat_refresh', r.data.refresh_token);    // re-exchange with grant_type:'refresh_token'
+   \\\`\\\`\\\`
+3. Call AIMEAT APIs with that Bearer token (NOT the user's session):
+   \\\`\\\`\\\`javascript
+   await fetch('https://aimeat.io/v1/memory/my.key', { headers: { Authorization: 'Bearer ' + localStorage.getItem('aimeat_token') } });
+   \\\`\\\`\\\`
+The user manages/revokes these tokens in Profile → Access → "Connected Apps". Request the FEWEST scopes you need.
 
 ### Library setup (copy this exactly — load BOTH libraries):
 \`\`\`javascript