aimeat 2.2.0 → 2.3.0

package/dist/public/views/help.js

@@ -1,13 +1,21 @@
 /**
  * @file help.js
- * @description Help page — fetches the AI help prompt from /v1/help/prompt
- *   and displays it in a copyable text area so users can paste it to their AI chat.
+ * @description Help page, two audiences on one page. "For me" answers the questions a
+ *   human actually arrives with; "For my AI" serves the node's help prompt, rendered as
+ *   markdown and copyable as raw text. The page used to be the second tab alone, dumping
+ *   the prompt's markdown SOURCE into a <pre> — so a person who clicked Help got
+ *   "## Step 0 — Orient yourself" and code fences.
  * @structure
- *   - HelpView — main Preact component (title, description, prompt area, copy button)
+ *   - HelpView — tab shell
+ *   - HumanHelp — start here, common questions, who to ask
+ *   - AgentHelp — the copyable prompt + the machine-readable entry points
  * @usage import HelpView from '/views/help.js'
  * @version-history
  *   v1.0.0 — 2026-03-23 — Initial implementation
  *   v1.1.0 — 2026-06-02 — Migrate bespoke copy button to canonical CopyButton component
+ *   v2.0.0 — 2026-07-28 — Split into "For me" / "For my AI". Human tab is new; the prompt is
+ *     rendered through <Markdown> instead of shown as source. Learn/feedback links come from
+ *     siteLinks so they only appear on nodes that have them.
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -16,12 +24,82 @@ import { t } from '/js/i18n.js';
 import { useViewCSS } from '/components/useViewCSS.js';
 import { CopyButton } from '/components/CopyButton.js';
 import { Spinner } from '/components/Spinner.js';
+import { Markdown } from '/components/Markdown.js';
+import { Collapsible } from '/components/Collapsible.js';
+import { siteLink, hasSite, contactHref } from '/js/site.js';
 
 const html = htm.bind(h);
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+// The questions people actually arrive with. Each answer is a few sentences, not a link list —
+// a link list is what sends someone back to the search box.
+const QUESTIONS = ['agent', 'organism', 'privacy', 'cost', 'connect', 'broken'];
+
+/* Canonical Collapsible is controlled; each question owns its own open state. */
+function Question({ id }) {
+  const [open, setOpen] = useState(false);
+  return html`
+    <${Collapsible} title=${tr(`help.q.${id}.q`, id)} open=${open} onToggle=${() => setOpen(o => !o)}>
+      <p class="hlp-answer">${tr(`help.q.${id}.a`, '')}</p>
+    <//>
+  `;
+}
+
+function HumanHelp({ onAskAi }) {
+  const contact = contactHref(tr('help.contactSubject', 'A question about AIMEAT'));
+  return html`
+    <div class="hlp-human">
+      <h2 class="section-title">${tr('help.startTitle', 'Getting started')}</h2>
+      <ol class="hlp-steps">
+        <li>${tr('help.start1', 'Sign in or create an account. One click with Google, or email and password.')}</li>
+        <li>${tr('help.start2', 'Connect your AI assistant so it can work here.')} <a href="/v1/portal?view=dev">${tr('help.start2Link', 'Connection instructions')}</a></li>
+        <li>${tr('help.start3', 'Build your first app by describing it to your AI.')} <a href="/app-catalog.html">${tr('help.start3Link', 'Open the app catalog')}</a></li>
+        ${hasSite('learn') ? html`
+          <li>${tr('help.start4', 'Learn the whole platform hands-on, free, without an account.')} <a href=${siteLink('learn')} target="_blank" rel="noopener">${tr('help.start4Link', 'Open the Experience Center')}</a></li>` : ''}
+      </ol>
+
+      <h2 class="section-title">${tr('help.qTitle', 'Common questions')}</h2>
+      <div class="hlp-questions">
+        ${QUESTIONS.map(k => html`<${Question} key=${k} id=${k} />`)}
+      </div>
+
+      <h2 class="section-title">${tr('help.stuckTitle', 'Still stuck')}</h2>
+      <div class="hlp-stuck">
+        <button class="btn-outline" type="button" onClick=${onAskAi}>${tr('help.stuckAi', 'Ask your own AI: get the help prompt →')}</button>
+        ${contact ? html`<a class="btn-ghost" href=${contact}>${tr('help.stuckHuman', 'Ask a human →')}</a>` : ''}
+      </div>
+    </div>
+  `;
+}
+
+function AgentHelp({ prompt, loading, error }) {
+  return html`
+    <div class="hlp-agent">
+      <p class="hlp-desc">${tr('help.description', 'If your AI assistant is having trouble connecting to or using this node, copy the prompt below and paste it into your AI chat. It will guide your AI through connecting, authenticating, and using all available features.')}</p>
+
+      ${loading && html`<div class="hlp-loading"><${Spinner} /></div>`}
+      ${error && html`<p class="hlp-error">${t('help.loadError')}</p>`}
+      ${!loading && !error && html`
+        <${CopyButton} text=${prompt} label=${t('help.copyBtn')} copiedLabel=${t('help.copied')} className="hlp-copy-btn" />
+        <div class="hlp-prompt-rendered"><${Markdown} text=${prompt} /></div>
+      `}
+
+      <h2 class="section-title">${tr('help.agentEntryTitle', 'For an agent reading this page directly')}</h2>
+      <ul class="hlp-endpoints">
+        <li><code>GET /?format=json</code> — ${tr('help.epRoot', 'machine-readable getting started')}</li>
+        <li><code>GET /llms.txt</code> — ${tr('help.epLlms', 'the full agent manual')}</li>
+        <li><code>GET /v1/spec</code> — ${tr('help.epSpec', 'the OpenAPI contract')}</li>
+        <li><code>POST /v1/mcp</code> — ${tr('help.epMcp', 'the MCP endpoint')}</li>
+        <li><code>GET /v1/help/prompt</code> — ${tr('help.epPrompt', 'this prompt as plain markdown')}</li>
+      </ul>
+    </div>
+  `;
+}
 
 export default function HelpView() {
   useViewCSS('/css/views/help.css');
 
+  const [tab, setTab] = useState('human');
   const [prompt, setPrompt] = useState('');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
@@ -39,20 +117,22 @@ export default function HelpView() {
   return html`
     <div class="hlp-container">
       <div class="hlp-card">
-        <h1 class="hlp-title">${t('help.title')}</h1>
-        <p class="hlp-desc">${t('help.description')}</p>
-
-        <div class="hlp-prompt-wrapper">
-          ${loading && html`<div class="hlp-loading"><${Spinner} /></div>`}
-          ${error && html`<p class="hlp-error">${t('help.loadError')}</p>`}
-          ${!loading && !error && html`
-            <pre class="hlp-prompt-text"><code>${prompt}</code></pre>
-          `}
+        <h1 class="hlp-title">${tr('help.pageTitle', 'Help')}</h1>
+
+        <div class="hlp-tabs" role="tablist">
+          <button type="button" role="tab" aria-selected=${tab === 'human'}
+            class=${`hlp-tab ${tab === 'human' ? 'active' : ''}`} onClick=${() => setTab('human')}>
+            ${tr('help.tabHuman', 'For me')}
+          </button>
+          <button type="button" role="tab" aria-selected=${tab === 'agent'}
+            class=${`hlp-tab ${tab === 'agent' ? 'active' : ''}`} onClick=${() => setTab('agent')}>
+            ${tr('help.tabAgent', 'For my AI')}
+          </button>
         </div>
 
-        ${!loading && !error && html`
-          <${CopyButton} text=${prompt} label=${t('help.copyBtn')} copiedLabel=${t('help.copied')} className="hlp-copy-btn" />
-        `}
+        ${tab === 'human'
+          ? html`<${HumanHelp} onAskAi=${() => setTab('agent')} />`
+          : html`<${AgentHelp} prompt=${prompt} loading=${loading} error=${error} />`}
       </div>
     </div>
   `;

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

@@ -10,6 +10,12 @@
  *   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.
+ *   v2.0.0 — 2026-07-28 — The chain ends at EXCHANGE, not at "your assets": one more box is
+ *     what separates this from any other agent platform, because the result can carry a price.
+ *     Two cards added (Apps — the thing the front page tells you to build, absent here until
+ *     now; Consent — the ownership guarantee that sells to a regulated buyer). Examples go from
+ *     one to three, one per layer, each rendered only if this node has that app (siteLinks).
+ *     Both SVG variants grew a box: wide viewBox 330 → 430, tall 690 → 810.
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -17,6 +23,8 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { openAppSandboxed } from '/js/app-sandbox.js';
+import { siteLink, hasSite } from '/js/site.js';
+import { swallowed } from '/js/swallowed.js';
 
 const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
 
@@ -69,12 +77,15 @@ function Diagram() {
   const org = { title: tr('hiw.dOrg', 'Organism'), lines: [tr('hiw.dOrg1', 'Shared truth:'), tr('hiw.dOrg2', 'workspaces, versions'), tr('hiw.dOrg3', 'humans + agents'), tr('hiw.dOrg4', 'publish gate')] };
   const assets = { title: tr('hiw.dAssets', 'Your assets'), lines: [tr('hiw.dAssets1', 'Versioned knowledge'), tr('hiw.dAssets2', 'apps and reports')] };
   const human = { title: tr('hiw.dHuman', 'Human at the gate'), lines: [tr('hiw.dHuman1', 'Decisions approved')] };
+  // The chain used to stop at "your assets", which describes a tool. One more box is what
+  // separates this from every other agent platform: the result can carry a price.
+  const exch = { title: tr('hiw.dExchange', 'EXCHANGE'), lines: [tr('hiw.dExchange1', 'Priced capabilities'), tr('hiw.dExchange2', 'contracts, settlement'), tr('hiw.dExchange3', 'other companies')] };
   const note = tr('hiw.dNote', 'The model can change — work and memory stay');
 
   return html`
     <div class="hiw-diagram">
-      <!-- Desktop: left → right, assets below organism, human wired to the gate. -->
-      <svg class="hiw-svg hiw-svg--wide" viewBox="0 0 880 330" role="img" aria-label=${tr('hiw.dAria', 'How AIMEAT works')}>
+      <!-- Desktop: left → right, assets below organism, human wired to the gate, EXCHANGE last. -->
+      <svg class="hiw-svg hiw-svg--wide" viewBox="0 0 880 430" role="img" aria-label=${tr('hiw.dAria', 'How AIMEAT works')}>
         <${Block} x="10" y="40" w="190" h="110" title=${models.title} lines=${models.lines} />
         <${Caption} x="105" y="172" note=${note} />
         <${Arrow} x1="200" y1="95" x2="240" y2="95" />
@@ -86,9 +97,12 @@ function Diagram() {
         <${Block} x="480" y="205" w="200" h="85" title=${assets.title} lines=${assets.lines} hot />
         <${Block} x="710" y="50" w="160" h="70" title=${human.title} lines=${human.lines} />
         <line x1="710" y1="85" x2="680" y2="85" stroke="var(--accent, #E8564A)" stroke-width="1.5" stroke-dasharray="4 3" />
+        <line x1="580" y1="290" x2="580" y2="325" stroke="var(--text-dim)" stroke-width="1.5" />
+        <polygon points="580,330 576,323 584,323" fill="var(--text-dim)" />
+        <${Block} x="480" y="330" w="200" h="90" title=${exch.title} lines=${exch.lines} hot />
       </svg>
       <!-- Mobile: same content stacked vertically. -->
-      <svg class="hiw-svg hiw-svg--tall" viewBox="0 0 320 690" role="img" aria-label=${tr('hiw.dAria', 'How AIMEAT works')}>
+      <svg class="hiw-svg hiw-svg--tall" viewBox="0 0 320 810" role="img" aria-label=${tr('hiw.dAria', 'How AIMEAT works')}>
         <${Block} x="40" y="10" w="240" h="105" title=${models.title} lines=${models.lines} />
         <${Caption} x="160" y="128" note=${note} />
         <line x1="160" y1="140" x2="160" y2="165" stroke="var(--text-dim)" stroke-width="1.5" />
@@ -102,6 +116,9 @@ function Diagram() {
         <line x1="160" y1="540" x2="160" y2="565" stroke="var(--text-dim)" stroke-width="1.5" />
         <polygon points="160,570 156,563 164,563" fill="var(--text-dim)" />
         <${Block} x="40" y="575" w="240" h="90" title=${assets.title} lines=${assets.lines} hot />
+        <line x1="160" y1="665" x2="160" y2="690" stroke="var(--text-dim)" stroke-width="1.5" />
+        <polygon points="160,695 156,688 164,688" fill="var(--text-dim)" />
+        <${Block} x="40" y="700" w="240" h="95" title=${exch.title} lines=${exch.lines} hot />
       </svg>
     </div>
   `;
@@ -114,7 +131,7 @@ export default function HowItWorks({ navigate }) {
     fetch('/v1/apps?limit=100').then(r => r.json()).then(j => {
       const apps = j?.data?.apps || [];
       setPaper(apps.find(a => /sanomat/i.test(a.filename || '') || /sanomat/i.test(a.name || '')) || null);
-    }).catch(() => { /* box renders without link */ });
+    }).catch(err => { swallowed('how-it-works: HowItWorks', err); });
   }, []);
 
   const card = (titleKey, titleFb, textKey, textFb) => html`
@@ -127,8 +144,8 @@ export default function HowItWorks({ navigate }) {
   return html`
     <div class="ld">
       <section class="ld-hero">
-        <h1 class="ld-h1">${tr('hiw.title', 'A place where AIs go to work')}</h1>
-        <p class="ld-hero-sub">${tr('hiw.intro', "AIMEAT doesn't run AI models. It gives any AI an identity, a memory, a task queue and a manager — and the results stay yours.")}</p>
+        <h1 class="ld-h1">${tr('hiw.title', 'A place where AIs go to work, and where the work is yours to sell')}</h1>
+        <p class="ld-hero-sub">${tr('hiw.intro', 'AIMEAT does not run AI models. It gives any AI an identity, a memory, a task queue and a manager. What the work produces stays yours, and it can carry a price.')}</p>
       </section>
 
       <${Diagram} />
@@ -136,13 +153,17 @@ export default function HowItWorks({ navigate }) {
       <div class="ld-paths">
         ${card('hiw.cardAgentsTitle', 'Agents', 'hiw.cardAgentsText', 'An agent is not an AI — it is a job for an AI. It has an identity, a memory that persists, a task queue you feed in plain language, working hours and a spending cap. Quality can be reviewed afterwards. Run it on any model — CrewAI, Claude, GPT, your own runtime.')}
         ${card('hiw.cardOrgTitle', 'Organisms', 'hiw.cardOrgText', "An organism turns agent output into assets. Workspaces, versioning and publish gates: agents get to do a lot, fast, but meaningful decisions pass through a human. Humans and agents work side by side, and every change is attributed to its author.")}
+        ${card('hiw.cardAppsTitle', 'Apps', 'hiw.cardAppsText', 'Describe what you want and your AI builds it. The app runs on your node, isolated on its own address, versioned, with a link you can share. It reaches your data only through permissions you granted and can take back.')}
+        ${card('hiw.cardConsentTitle', 'Consent', 'hiw.cardConsentText', 'Every agent and every app works under named permissions, and every action is attributed to whoever took it. Take a permission back and the door closes. The audit is a report, not a project.')}
         ${card('hiw.cardAssetsTitle', 'Your assets', 'hiw.cardAssetsText', 'Models come and go. Identity, memory, work history and results stay on your node. Swap Grok for Claude mid-flight — the agent picks up where it left off.')}
       </div>
 
+      <!-- Three examples from three layers, so the page shows more than one thing the
+           platform does. Each renders only if this node actually has it. -->
       <div class="ld-stats ld-stats--withimg">
         <img class="ld-example-img" src="/img/toimitus.png" alt="" loading="lazy"
           onError=${(e) => { e.target.style.display = 'none'; }} />
-        <div class="ld-stats-line">${tr('hiw.exampleTitle', 'An example from this node')}</div>
+        <div class="ld-stats-line">${tr('hiw.exampleTitle', 'Examples from this node')}</div>
         <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`
@@ -150,10 +171,22 @@ export default function HowItWorks({ navigate }) {
                 openAppSandboxed(`/v1/apps/${encodeURIComponent(paper.owner)}/${encodeURIComponent(paper.filename)}?mode=inline`, paper.filename); }}>
               ${tr('hiw.exampleCta', "Read tonight's paper →")}</a>`}
         </div>
+        ${hasSite('crm') ? html`
+          <div class="ld-stats-own">
+            ${tr('hiw.exampleApps', 'An app you own: CADENCE is a CRM built by describing it. Contacts, deals and follow-ups as versioned records, kept fed by agents.')}
+            <a class="ld-stats-cta" href=${siteLink('crm')} target="_blank" rel="noopener">${tr('hiw.exampleAppsCta', 'Open it →')}</a>
+          </div>` : ''}
+        ${hasSite('exchange') ? html`
+          <div class="ld-stats-own">
+            ${tr('hiw.exampleExchange', 'Work with a price: a capability listed on EXCHANGE, bought by another company’s agent under a contract, every call logged and settled.')}
+            <a class="ld-stats-cta" href=${siteLink('exchange')} target="_blank" rel="noopener">${tr('hiw.exampleExchangeCta', 'See the market →')}</a>
+          </div>` : ''}
       </div>
 
       <div class="ld-ctarow">
-        <a class="btn-primary" href="/v1/portal" onClick=${(e) => { e.preventDefault(); navigate('/v1/portal'); }}>${tr('hiw.ctaTry', 'Try it free →')}</a>
+        ${hasSite('learn')
+          ? html`<a class="btn-primary" href=${siteLink('learn')} target="_blank" rel="noopener">${tr('hiw.ctaLearn', 'Learn it hands-on, free →')}</a>`
+          : html`<a class="btn-primary" href="/v1/portal" onClick=${(e) => { e.preventDefault(); navigate('/v1/portal'); }}>${tr('hiw.ctaTry', 'Try it free →')}</a>`}
         <a class="btn-outline" href="/v1/pricing" onClick=${(e) => { e.preventDefault(); navigate('/v1/pricing'); }}>${tr('hiw.ctaPricing', 'See pricing →')}</a>
         <a class="btn-outline" href="/v1/business" onClick=${(e) => { e.preventDefault(); navigate('/v1/business'); }}>${tr('hiw.ctaBusiness', 'For your business →')}</a>
       </div>

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

@@ -33,6 +33,7 @@ import htm from 'htm';
 import { t } from '/js/i18n.js';
 import { api } from '/js/api.js';
 import { escHtml } from '/js/utils.js';
+import { swallowed } from '/js/swallowed.js';
 
 const html = htm.bind(h);
 const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
@@ -54,7 +55,7 @@ export default function InviteAccept() {
     let live = true;
     api('/v1/auth/providers')
       .then((res) => { if (live) setProviders(res?.data?.providers || []); })
-      .catch(() => { /* no providers — password form stands alone */ });
+      .catch(err => { swallowed('invite-accept: InviteAccept', err); });
     return () => { live = false; };
   }, []);
 
@@ -121,7 +122,7 @@ export default function InviteAccept() {
   // Sign out and stay on the accept page, so the visitor can register the invited email or sign in as
   // the account it belongs to. The 'logout' event handler above re-fetches the viewer verdict.
   function signOutAndRetry() {
-    try { window.AIMEAT?.auth?.logout?.(); } catch { /* ignore */ }
+    try { window.AIMEAT?.auth?.logout?.(); } catch (err) { swallowed('invite-accept: signOutAndRetry', err); }
     setAuthed(false); setMismatch(false);
   }
 

package/dist/public/views/landing-activity.js

@@ -18,6 +18,7 @@ import { useState, useEffect, useRef } from 'preact/hooks';
 import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
+import { swallowed } from '/js/swallowed.js';
 // NOTE: text interpolated as a child below (${ev.summary} etc.) is auto-escaped by
 // Preact, so it is XSS-safe AND renders quotes correctly — do NOT call escHtml here
 // (that would double-escape, surfacing literal " in titles).
@@ -92,7 +93,7 @@ export default function PublicActivityFeed() {
     let es;
     try {
       es = new EventSource('/v1/public/events');
-    } catch { return undefined; }
+    } catch (err) { swallowed('landing-activity: PublicActivityFeed', err); return undefined; }
     es.onmessage = (msg) => {
       let ev;
       try { ev = JSON.parse(msg.data); } catch { return; }
@@ -106,7 +107,7 @@ export default function PublicActivityFeed() {
         setUnseen(u => ({ ...u, [ev.category]: (u[ev.category] || 0) + 1 }));
       }
     };
-    return () => { try { es.close(); } catch { /* ignore */ } };
+    return () => { try { es.close(); } catch (err) { swallowed('landing-activity: PublicActivityFeed', err); } };
   }, []);
 
   const selectTab = (cat) => {

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

@@ -17,6 +17,7 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { onLiveUpdate } from '/lib/live-updates.js';
+import { swallowed } from '/js/swallowed.js';
 
 const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
 const num = (n) => (Number(n) || 0).toLocaleString();
@@ -30,7 +31,7 @@ export default function NodeTotals() {
       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 */ });
+        .catch(err => { swallowed('landing-node-totals: load', err); });
     };
     load();
     const off = onLiveUpdate(['agents', 'apps', 'organisms'], () => load());