aimeat 1.23.2 → 1.24.0

package/dist/public/spa.html

@@ -67,9 +67,11 @@
   <!-- 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">
+  <link rel="stylesheet" href="/css/views/landing.css">
   <link rel="stylesheet" href="/css/views/portal-classic.css">
   <link rel="stylesheet" href="/css/views/portal-dev.css">
   <link rel="stylesheet" href="/css/views/profile.css">
+  <link rel="stylesheet" href="/css/views/offers.css">
   <link rel="stylesheet" href="/css/views/foundry.css">
   <link rel="stylesheet" href="/css/views/calibrator.css">
 <link rel="stylesheet" href="/css/views/hobbies.css">
@@ -82,10 +84,12 @@
   <link rel="stylesheet" href="/css/views/capabilities.css">
   <link rel="stylesheet" href="/css/views/agents-detail.css">
   <link rel="stylesheet" href="/css/views/scheduler.css">
+  <link rel="stylesheet" href="/css/views/workflows.css">
   <link rel="stylesheet" href="/css/views/admin.css">
   <link rel="stylesheet" href="/css/views/admin-agent-integration.css">
   <link rel="stylesheet" href="/css/views/public-knowledge-viewer.css">
   <link rel="stylesheet" href="/css/views/public-workspace-viewer.css">
+  <link rel="stylesheet" href="/css/views/start.css">
   <script type="importmap">
   {
     "imports": {
@@ -98,6 +102,7 @@
       "/js/format.js": "/js/format.js",
       "/js/api.js": "/js/api.js",
       "/js/hooks.js": "/js/hooks.js",
+      "/js/recents.js": "/js/recents.js",
       "/js/services/admin.js": "/js/services/admin.js",
       "/js/services/agents.js": "/js/services/agents.js",
       "/js/services/apps.js": "/js/services/apps.js",
@@ -151,6 +156,7 @@
       "/js/services/memory.js": "/js/services/memory.js",
       "/js/services/nodes.js": "/js/services/nodes.js",
       "/js/services/organisms.js": "/js/services/organisms.js",
+      "/js/services/offers.js": "/js/services/offers.js",
       "/js/services/packages.js": "/js/services/packages.js",
       "/js/services/security.js": "/js/services/security.js",
       "/js/services/stats.js": "/js/services/stats.js",
@@ -165,6 +171,7 @@
       "/components/Mermaid.js": "/components/Mermaid.js",
       "/components/NotificationBell.js": "/components/NotificationBell.js",
       "/components/CopyButton.js": "/components/CopyButton.js",
+      "/components/ContactCard.js": "/components/ContactCard.js",
       "/components/Spinner.js": "/components/Spinner.js",
       "/components/EmptyState.js": "/components/EmptyState.js",
       "/components/ToggleSwitch.js": "/components/ToggleSwitch.js",
@@ -193,7 +200,8 @@
       "/js/services/agent-messages.js": "/js/services/agent-messages.js",
       "/js/services/agent-integration.js": "/js/services/agent-integration.js",
       "/js/services/admin-agent-integration.js": "/js/services/admin-agent-integration.js",
-      "/js/services/schedules.js": "/js/services/schedules.js"
+      "/js/services/schedules.js": "/js/services/schedules.js",
+      "/js/services/workflows.js": "/js/services/workflows.js"
     }
   }
   </script>
@@ -255,7 +263,14 @@
     // insufficient — modules stay in the module registry for the full session).
     const B = window.__B || '';
     const ROUTES = {
-      '/v1/portal':      () => import('/views/portal.js' + B),
+      // Landing/portal split (2026-06-10): the route serves the logged-out landing;
+      // logged-in visitors are forwarded to /v1/profile by the view itself. The old
+      // portal view stays reachable at /v1/classic (prompt boxes / "Build").
+      '/v1/portal':      () => import('/views/landing.js' + B),
+      '/v1/pricing':     () => import('/views/pricing.js' + B),
+      '/v1/start':       () => import('/views/start.js' + B),
+      '/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/guides':      () => import('/views/guides.js' + B),
       '/v1/hobbies':     () => import('/views/hobbies.js' + B),
@@ -347,6 +362,14 @@
           // Only intercept internal /v1/ links
           if (!href || !href.startsWith('/v1/')) return;
           if (e.ctrlKey || e.metaKey || e.shiftKey) return;
+          // Respect explicit new-tab / new-window targets — without this, an
+          // <a href="/v1/apps/.../launch?mode=inline" target="_blank"> from a
+          // child component would be hijacked, navigated in the same tab via
+          // matchRoute (which doesn't know /v1/apps/...), and dump the user
+          // back on the landing page.
+          const target = a.getAttribute('target');
+          if (target && target !== '_self' && target !== '') return;
+          if (a.hasAttribute('download')) return;
           e.preventDefault();
           navigate(href);
         };
@@ -438,6 +461,10 @@
 
       const handleNav = (e, path) => {
         e.preventDefault();
+        // Mark in-app navigation: the landing redirects logged-in users to their Home
+        // ONLY on direct arrival (bookmark/external link), never when they deliberately
+        // navigated here from inside the app (e.g. the brand link).
+        try { sessionStorage.setItem('aimeat.in-app', '1'); } catch {}
         navigate(path);
       };
 
@@ -456,7 +483,12 @@
             <button class="topnav-burger" aria-label="Menu" aria-expanded=${menuOpen ? 'true' : 'false'}
               onClick=${() => setMenuOpen(o => !o)}>☰</button>
             <div class="topnav-menu ${menuOpen ? 'open' : ''}">
-              <a href="/v1/classic" onClick=${(e) => { handleNav(e, '/v1/classic'); setMenuOpen(false); }} class="${currentPath === '/v1/classic' ? 'active' : ''}">${t('nav.try')}</a>
+              <!-- "Try it" leads to the landing's path cards + app gallery — an empty
+                   Welcome Board on /v1/classic was the weakest possible first experience.
+                   Classic stays reachable deeper (landing card B "Start building"). -->
+              <a href="/v1/portal" onClick=${(e) => { handleNav(e, '/v1/portal'); setMenuOpen(false); }} class="${currentPath === '/v1/portal' ? 'active' : ''}">${t('nav.try')}</a>
+              <a href="/v1/how-it-works" onClick=${(e) => { handleNav(e, '/v1/how-it-works'); setMenuOpen(false); }} class="${currentPath === '/v1/how-it-works' ? 'active' : ''}">${t('nav.howItWorks') || 'How it works'}</a>
+              <a href="/v1/business" onClick=${(e) => { handleNav(e, '/v1/business'); setMenuOpen(false); }} class="${currentPath === '/v1/business' ? 'active' : ''}">${t('nav.business') || 'For your business'}</a>
               <a href="/v1/portal?view=dev" onClick=${(e) => { handleNav(e, '/v1/portal?view=dev'); setMenuOpen(false); }}>${t('nav.devView')}</a>
               <a href="/v1/help" onClick=${(e) => { handleNav(e, '/v1/help'); setMenuOpen(false); }} class="${currentPath === '/v1/help' ? 'active' : ''}">${t('nav.help')}</a>
               ${session && html`

package/dist/public/views/admin/subdomains-tab.js

@@ -0,0 +1,182 @@
+/**
+ * @file subdomains-tab.js
+ * @description Admin dashboard Subdomains tab — operator management of
+ *   subdomain → site mappings (serve a published app at `<sub>.<apex>` or
+ *   301-redirect). Table with enabled-toggle, create form, and
+ *   type-to-confirm deletion.
+ * @structure SubdomainsAdminTab (default)
+ * @usage Mounted by the admin dashboard tab router (views/admin.js).
+ * @version-history
+ *   v1.0.0 — 2026-06-12 — Initial: subdomain routing (operator-only management)
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { dt, Spinner, Empty, ErrorBox } from './shared.js';
+import { Modal } from '/components/Modal.js';
+import * as adminService from '/js/services/admin.js';
+
+export default function SubdomainsAdminTab() {
+  const [sites, setSites] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [showCreate, setShowCreate] = useState(false);
+  const [form, setForm] = useState({ subdomain: '', kind: 'app', target: '' });
+  const [formError, setFormError] = useState(null);
+  const [saving, setSaving] = useState(false);
+  // Type-to-confirm delete state: { subdomain, typed }
+  const [deleting, setDeleting] = useState(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const resp = await adminService.getSubdomainSites();
+      setSites(resp?.data?.sites || []);
+    } catch (err) {
+      setError(err?.message || String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  useEffect(() => {
+    const handler = () => { load(); };
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [load]);
+
+  const create = useCallback(async () => {
+    setFormError(null);
+    setSaving(true);
+    try {
+      await adminService.createSubdomainSite({
+        subdomain: form.subdomain.trim().toLowerCase(),
+        kind: form.kind,
+        target: form.target.trim(),
+      });
+      setShowCreate(false);
+      setForm({ subdomain: '', kind: 'app', target: '' });
+      load();
+    } catch (err) {
+      setFormError(err?.message || String(err));
+    } finally {
+      setSaving(false);
+    }
+  }, [form, load]);
+
+  const toggleEnabled = useCallback(async (site) => {
+    try {
+      await adminService.updateSubdomainSite(site.subdomain, { enabled: !site.enabled });
+      load();
+    } catch (err) {
+      setError(err?.message || String(err));
+    }
+  }, [load]);
+
+  const doDelete = useCallback(async () => {
+    if (!deleting || deleting.typed !== deleting.subdomain) return;
+    try {
+      await adminService.deleteSubdomainSite(deleting.subdomain);
+      setDeleting(null);
+      load();
+    } catch (err) {
+      setError(err?.message || String(err));
+      setDeleting(null);
+    }
+  }, [deleting, load]);
+
+  // Public URL for a mapping, derived from the page's own host
+  const siteUrl = (sub) => `${location.protocol}//${sub}.${location.host}/`;
+
+  return html`
+    <p class="adm-text-sm adm-text-dim adm-mb-md">${t('admin.subdomains.desc')}</p>
+
+    <div class="adm-card">
+      <div class="adm-flex-between adm-mb-md">
+        <h2>${t('admin.subdomains.title')}</h2>
+        <button class="adm-btn-sm" onClick=${() => { setShowCreate(!showCreate); setFormError(null); }}>
+          ${showCreate ? t('common.cancel') : '+ ' + t('admin.subdomains.add')}
+        </button>
+      </div>
+
+      ${showCreate && html`
+        <div class="adm-subdomain-form adm-mb-md">
+          <input class="adm-input" placeholder=${t('admin.subdomains.subdomain')}
+            value=${form.subdomain}
+            onInput=${e => setForm({ ...form, subdomain: e.target.value })} />
+          <select class="adm-input" value=${form.kind}
+            onChange=${e => setForm({ ...form, kind: e.target.value })}>
+            <option value="app">${t('admin.subdomains.kindApp')}</option>
+            <option value="redirect">${t('admin.subdomains.kindRedirect')}</option>
+          </select>
+          <input class="adm-input" value=${form.target}
+            placeholder=${form.kind === 'app' ? t('admin.subdomains.targetHintApp') : t('admin.subdomains.targetHintRedirect')}
+            onInput=${e => setForm({ ...form, target: e.target.value })} />
+          <button class="adm-btn" disabled=${saving || !form.subdomain.trim() || !form.target.trim()}
+            onClick=${create}>${t('admin.subdomains.create')}</button>
+          ${formError && html`<div class="adm-text-error adm-text-sm">${formError}</div>`}
+        </div>
+      `}
+
+      ${error && html`<${ErrorBox} message=${error} />`}
+      ${loading ? html`<${Spinner} />` : sites.length === 0
+        ? html`<${Empty} text=${t('admin.subdomains.empty')} />`
+        : html`
+        <div class="scrollable">
+          <table>
+            <thead><tr>
+              <th>${t('admin.subdomains.subdomain')}</th>
+              <th>${t('admin.subdomains.kind')}</th>
+              <th>${t('admin.subdomains.target')}</th>
+              <th>${t('admin.subdomains.enabled')}</th>
+              <th>${t('admin.subdomains.createdBy')}</th>
+              <th>${t('admin.subdomains.created')}</th>
+              <th></th>
+            </tr></thead>
+            <tbody>
+              ${sites.map(s => html`
+                <tr>
+                  <td class="mono">
+                    <a href=${siteUrl(s.subdomain)} target="_blank" rel="noopener">\u{1F310} ${s.subdomain}</a>
+                  </td>
+                  <td>${s.kind === 'app' ? t('admin.subdomains.kindApp') : t('admin.subdomains.kindRedirect')}</td>
+                  <td class="mono">${s.target}</td>
+                  <td>
+                    <input type="checkbox" checked=${s.enabled} onChange=${() => toggleEnabled(s)}
+                      title=${t('admin.subdomains.enabled')} />
+                  </td>
+                  <td class="mono">${s.createdBy}</td>
+                  <td>${dt(s.createdAt)}</td>
+                  <td>
+                    <button class="adm-btn-sm adm-btn-danger"
+                      onClick=${() => setDeleting({ subdomain: s.subdomain, typed: '' })}>
+                      ${t('admin.subdomains.delete')}
+                    </button>
+                  </td>
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        </div>
+      `}
+    </div>
+
+    <${Modal} open=${!!deleting} onClose=${() => setDeleting(null)} title=${t('admin.subdomains.deleteTitle')}>
+      ${deleting && html`
+        <p>${t('admin.subdomains.deleteConfirm')} <strong class="mono">${deleting.subdomain}</strong></p>
+        <input class="adm-input adm-input-full" value=${deleting.typed}
+          onInput=${e => setDeleting({ ...deleting, typed: e.target.value })} />
+        <div class="adm-flex adm-mt-md adm-subdomain-modal-actions">
+          <button class="btn-ghost" onClick=${() => setDeleting(null)}>${t('common.cancel')}</button>
+          <button class="btn-danger-solid" disabled=${deleting.typed !== deleting.subdomain}
+            onClick=${doDelete}>${t('admin.subdomains.delete')}</button>
+        </div>
+      `}
+    <//>
+  `;
+}

package/dist/public/views/admin.js

@@ -52,6 +52,7 @@ import CapabilitiesAdminTab from './admin/capabilities-tab.js';
 import AgentTasksAdminTab from './admin/agent-tasks-tab.js';
 import SharingGroupsAdminTab from './admin/sharing-groups-tab.js';
 import AgentIntegrationAdminTab from './admin/agent-integration-tab.js';
+import SubdomainsAdminTab from './admin/subdomains-tab.js';
 
 // ── Sidebar nav structure ──
 const NAV_GROUPS = [
@@ -64,6 +65,7 @@ const NAV_GROUPS = [
     { id: 'maintenance',  icon: '\u{1F6A7}', key: 'dashboard.maintenance',component: MaintenanceTab },
     { id: 'hooks',        icon: '\u{1F517}', key: 'dashboard.hooks',      component: HooksTab },
     { id: 'portal',       icon: '\u{1F310}', key: 'dashboard.portal',     component: PortalTab },
+    { id: 'subdomains',   icon: '\u{1F517}', key: 'admin.subdomains.title', component: SubdomainsAdminTab },
     { id: 'stats',        icon: '\u{1F4C8}', key: 'dashboard.stats',      component: StatsTab },
     { id: 'prompts',      icon: '\u{1F4DD}', key: 'dashboard.promptsTab', component: PromptsTab },
   ]},

package/dist/public/views/business.js

@@ -0,0 +1,119 @@
+/**
+ * @file business.js
+ * @description "For your business" page: night-shift hero, six outcome cases
+ *   (first-person headline + live proof + CTA), an all-of-this-is-production
+ *   footer line and the shared ContactCard. Evidence links resolve to LIVE data
+ *   (public apps / the FreePartyLights public status page) — never the Wellprepd
+ *   organism (sensitive). No protocol terms; "organism" and "node" are product
+ *   names, explained on first use.
+ * @usage routed at /v1/business by spa.html
+ * @version-history
+ *   v1.0.0 — 2026-06-10 — Initial (owner spec).
+ */
+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';
+import { escHtml } from '/js/utils.js';
+import { ContactCard } from '/components/ContactCard.js';
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+const CONTACT = 'mailto:jouni.miikki@aimeat.io';
+
+export default function Business({ navigate }) {
+  // Live evidence: tonight's paper (public app) + the FreePartyLights public status
+  // page (resolved by name so the link works wherever the organism lives — and is
+  // simply hidden on nodes that don't have it). NEVER link the Wellprepd organism.
+  const [paper, setPaper] = useState(null);
+  useEffect(() => {
+    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(() => {});
+  }, []);
+  // The FreePartyLights public status page (org + workspace ids on aimeat.io; public
+  // document sharing verified ON — 5 docs readable without auth). NEVER Wellprepd.
+  const fplHref = 'https://aimeat.io/v1/publicworkspaceviewer?org=27b89c13-1cc7-4fde-9c3f-91c4c7d06aa9&ws=ws-mq4y3131522';
+
+  const Case = ({ id, title, text, quote, quoteBy, proofHref, proofLabel, proofNote, ctaLabel, ctaHref }) => html`
+    <div class="ld-case" id=${id}>
+      <h3 class="ld-case-title">${title}</h3>
+      <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>`
+        : proofNote && html`<div class="ld-case-proofnote">${proofNote}</div>`}
+      <a class="ld-path-cta" href=${ctaHref}>${ctaLabel}</a>
+    </div>
+  `;
+
+  return html`
+    <div class="ld ld-business">
+      <!-- Hero: the night-shift image (assets/yovuoro_freepartylights.png) — the text
+           column sits in the image's empty right side as HTML, never baked in. -->
+      <section class="ld-bhero">
+        <img class="ld-bhero-img" src="/img/business-hero.png" alt=""
+          onError=${(e) => { e.target.style.display = 'none'; e.target.closest('.ld-bhero')?.classList.add('ld-bhero--noimg'); }} />
+        <div class="ld-bhero-text">
+          <h1 class="ld-h1">${tr('biz.heroTitle', 'A digital employee that never sleeps')}</h1>
+          <p class="ld-hero-sub">${tr('biz.heroSub', 'Scheduled agents fetch, write, report and ship while you do something else. Every step traceable.')}</p>
+        </div>
+      </section>
+
+      <div class="ld-cases">
+        <${Case} id="case-news"
+          title=${tr('biz.c1Title', 'I wake up already knowing what happened in my field')}
+          text=${tr('biz.c1Text', 'AIMEAT Sanomat writes itself every evening. Six agents, zero human hours.')}
+          proofHref=${paper
+            ? `/v1/apps/${encodeURIComponent(paper.owner)}/${encodeURIComponent(paper.filename)}?mode=inline`
+            : 'https://aimeat.io/v1/apps/happydude500001/laimeat-sanomat.html?mode=inline'}
+          proofLabel=${tr('biz.c1Proof', "Read tonight's paper →") + (paper?.created_at && paper.created_at.slice(0, 10) === new Date().toISOString().slice(0, 10) ? ` · ${tr('biz.writtenToday', 'written today at')} ${new Date(paper.created_at).toLocaleTimeString('fi-FI', { hour: '2-digit', minute: '2-digit' })}` : '')}
+          ctaLabel=${tr('biz.c1Cta', 'The same, from your topics →')} ctaHref=${CONTACT} />
+        <${Case} id="case-report"
+          title=${tr('biz.c2Title', 'My 7 AM report is waiting on my phone')}
+          text=${tr('biz.c2Text', 'Tell it once what you want to know every morning. An agent gathers, summarizes and sends.')}
+          proofNote=${tr('biz.c2Proof', 'Example (anonymized, sent today 07:00): "3 new bookings · 1 review (4★, answered) · competitor X dropped prices · suggested action: weekend campaign."')}
+          ctaLabel=${tr('biz.c2Cta', 'Order your morning report →')} ctaHref=${CONTACT} />
+        <${Case} id="case-radar"
+          title=${tr('biz.c3Title', "I know what's being said about us — and what to do about it")}
+          text=${tr('biz.c3Text', 'An agent tracks mentions, competitors and trends, and produces an action list — not just a report.')}
+          proofNote=${tr('biz.c3Proof', 'Example action list: "1) Answer the review on platform Y today. 2) Trend Z is rising — draft a post. 3) Competitor launched a campaign — counter-offer attached."')}
+          ctaLabel=${tr('biz.c3Cta', 'Start the radar →')} ctaHref=${CONTACT} />
+        <${Case} id="case-dev"
+          title=${tr('biz.c4Title', 'My project knows its own status')}
+          text=${tr('biz.c4Text', 'When developers have agents, sprints slow things down. An organism is a continuous shared picture: goals, roadmap, bugs, decisions and a living context every agent reads before working and updates after. A human approves the decisions; everything else moves at agent speed.')}
+          quote=${tr('biz.c4Quote', 'This could replace Jira.')} quoteBy=${tr('biz.c4QuoteBy', 'game developer, large studio')}
+          proofHref=${fplHref}
+          proofLabel=${tr('biz.c4Proof', 'Open the FreePartyLights status page →')}
+          proofNote=${tr('biz.proofUnavailable', 'Live proof runs on aimeat.io.')}
+          ctaLabel=${tr('biz.c4Cta', 'Turn your project into an organism →')} ctaHref=${CONTACT} />
+        <${Case} id="case-feedback"
+          title=${tr('biz.c5Title', "A user's idea shipped the same day")}
+          text=${tr('biz.c5Text', 'A user left an idea in the morning. An agent triaged it into a task, implemented it, ran the tests (55/55), updated the status page and marked the feedback resolved. A human confirmed it works. The whole chain is traceable: feedback → task → release.')}
+          proofHref=${fplHref}
+          proofLabel=${tr('biz.c5Proof', 'Same status page — see zenmasta001 → task-015 →')}
+          proofNote=${tr('biz.proofUnavailable', 'Live proof runs on aimeat.io.')}
+          ctaLabel=${tr('biz.c5Cta', 'Open a feedback loop for your customers →')} ctaHref=${CONTACT} />
+        <${Case} id="case-node"
+          title=${tr('biz.c6Title', 'Kalle runs his whole company on its own node')}
+          text=${tr('biz.c6Text', "The Original Miskate Oy's homepage lives in agent memory on its own AIMEAT node, federated into the network. The vartija crew audits the node every morning at 04:00; the tutkijatar crew runs research overnight.")}
+          quote=${'Every discovery is a mistake that survived long enough to prove itself.'}
+          quoteBy=${'Kalle Määttä, founder, The Original Miskate Oy'}
+          proofHref="https://originalmiskate.com"
+          proofLabel=${tr('biz.c6Proof', 'originalmiskate.com — a living node →')}
+          ctaLabel=${tr('biz.c6Cta', 'See hosting packages →')} ctaHref="/v1/pricing" />
+      </div>
+
+      <div class="ld-stats">
+        <div class="ld-stats-line">${tr('biz.allLive', 'Everything above runs in production right now. No proof is a mockup.')}</div>
+        <div class="ld-ctarow">
+          <a class="btn-primary" href=${CONTACT}>${tr('biz.ctaDemo', 'Book a demo →')}</a>
+          <a class="btn-outline" href="/v1/pricing" onClick=${(e) => { e.preventDefault(); navigate('/v1/pricing'); }}>${tr('biz.ctaPricing', 'See pricing →')}</a>
+        </div>
+      </div>
+
+      <${ContactCard} />
+    </div>
+  `;
+}

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

@@ -0,0 +1,159 @@
+/**
+ * @file how-it-works.js
+ * @description "How it works" page: H1 + intro, a hand-written inline SVG pipeline
+ *   diagram (models → agents → organism → your assets, human at the gate), three
+ *   explainer cards, a live example box (real public app link) and a CTA row.
+ *   Diagram texts are i18n keys so the FI/EN switch translates the SVG too; a
+ *   vertical variant renders on mobile. No protocol terms in body copy.
+ * @usage routed at /v1/how-it-works by spa.html
+ * @version-history
+ *   v1.0.0 — 2026-06-10 — Initial (owner spec).
+ */
+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';
+import { escHtml } from '/js/utils.js';
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+/* Diagram block: rect + up to 5 short text lines. Colors via CSS vars so dark mode works.
+ * NB: htm passes attribute values as STRINGS — coerce before arithmetic, or "10" + 95
+ * becomes "1095" and every text lands far outside its box (the empty-boxes bug). */
+function Block({ x, y, w, h: hh, title, lines, hot }) {
+  const X = Number(x), Y = Number(y), W = Number(w);
+  return html`
+    <g>
+      <rect x=${X} y=${Y} width=${W} height=${Number(hh)} rx="10"
+        fill="var(--card)" stroke=${hot ? 'var(--accent, #E8564A)' : 'var(--border)'} stroke-width=${hot ? 2 : 1.5} />
+      <text x=${X + W / 2} y=${Y + 22} text-anchor="middle" font-size="13" font-weight="700" fill="var(--text)">${title}</text>
+      ${lines.map((l, i) => html`
+        <text key=${i} x=${X + W / 2} y=${Y + 42 + i * 16} text-anchor="middle" font-size="11" fill="var(--text-dim)">${l}</text>
+      `)}
+    </g>
+  `;
+}
+
+/* The model-swap caption, wrapped to two centered lines so it stays inside the viewBox. */
+function Caption({ x, y, note }) {
+  const parts = note.split(/\s*[—,]\s*/);
+  const lines = parts.length >= 2 ? [parts[0], parts.slice(1).join(', ')] : [note];
+  return html`
+    <g>
+      ${lines.map((l, i) => html`
+        <text key=${i} x=${Number(x)} y=${Number(y) + i * 13} text-anchor="middle" font-size="10" font-style="italic" fill="var(--text-dim)">${l}</text>
+      `)}
+    </g>
+  `;
+}
+
+// Same string-coercion trap as Block: htm passes attrs as strings, and "95" + 4
+// is "954" — the arrowhead's third point leaked far below the line. Coerce first.
+const Arrow = (props) => {
+  const x1 = Number(props.x1), y1 = Number(props.y1), x2 = Number(props.x2), y2 = Number(props.y2);
+  return html`
+    <g stroke="var(--text-dim)" stroke-width="1.5" fill="var(--text-dim)">
+      <line x1=${x1} y1=${y1} x2=${x2} y2=${y2} />
+      <polygon points=${`${x2},${y2} ${x2 - 7},${y2 - 4} ${x2 - 7},${y2 + 4}`}
+        transform=${y1 === y2 ? '' : `rotate(90 ${x2} ${y2})`} />
+    </g>
+  `;
+};
+
+function Diagram() {
+  const models = { title: tr('hiw.dModels', 'AI models'), lines: [tr('hiw.dModels1', 'Swappable:'), tr('hiw.dModels2', 'Claude, GPT, Grok'), tr('hiw.dModels3', 'CrewAI, your own')] };
+  const agents = { title: tr('hiw.dAgents', 'Agents'), lines: [tr('hiw.dAgents1', 'A job for an AI:'), tr('hiw.dAgents2', 'identity, memory'), tr('hiw.dAgents3', 'task queue, schedule'), tr('hiw.dAgents4', 'budget, quality')] };
+  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')] };
+  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')}>
+        <${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" />
+        <${Block} x="240" y="30" w="200" h="130" title=${agents.title} lines=${agents.lines} hot />
+        <${Arrow} x1="440" y1="95" x2="480" y2="95" />
+        <${Block} x="480" y="30" w="200" h="130" title=${org.title} lines=${org.lines} />
+        <line x1="580" y1="160" x2="580" y2="200" stroke="var(--text-dim)" stroke-width="1.5" />
+        <polygon points="580,205 576,198 584,198" fill="var(--text-dim)" />
+        <${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" />
+      </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')}>
+        <${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" />
+        <polygon points="160,170 156,163 164,163" fill="var(--text-dim)" />
+        <${Block} x="40" y="172" w="240" h="125" title=${agents.title} lines=${agents.lines} hot />
+        <line x1="160" y1="297" x2="160" y2="322" stroke="var(--text-dim)" stroke-width="1.5" />
+        <polygon points="160,327 156,320 164,320" fill="var(--text-dim)" />
+        <${Block} x="40" y="330" w="240" h="125" title=${org.title} lines=${org.lines} />
+        <${Block} x="40" y="470" w="240" h="70" title=${human.title} lines=${human.lines} />
+        <line x1="160" y1="455" x2="160" y2="470" stroke="var(--accent, #E8564A)" stroke-width="1.5" stroke-dasharray="4 3" />
+        <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 />
+      </svg>
+    </div>
+  `;
+}
+
+export default function HowItWorks({ navigate }) {
+  // Live example: find the public Sanomat app from the catalog (works without login).
+  const [paper, setPaper] = useState(null);
+  useEffect(() => {
+    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 */ });
+  }, []);
+
+  const card = (titleKey, titleFb, textKey, textFb) => html`
+    <div class="ld-path">
+      <h3>${tr(titleKey, titleFb)}</h3>
+      <p>${tr(textKey, textFb)}</p>
+    </div>
+  `;
+
+  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>
+      </section>
+
+      <${Diagram} />
+
+      <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.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>
+
+      <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-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">
+              ${tr('hiw.exampleCta', "Read tonight's paper →")}</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>
+        <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>
+    </div>
+  `;
+}