aimeat 1.23.2 → 1.23.3

package/dist/public/views/landing.js

@@ -0,0 +1,235 @@
+/**
+ * @file landing.js
+ * @description Logged-out landing page: one story, proven live. Hero → live activity
+ *   ticker → today's real node stats + ownership line (the sales core) → three audience
+ *   path cards → the 3-step prompt loop → proof gallery of real public apps → footer.
+ *   Logged-in visitors are forwarded to the profile Home dashboard. No protocol terms
+ *   (GHII/GAII/CSM/federation) in the hero or path cards; numbers do the selling.
+ * @structure default export Landing({ navigate }) + Ticker/StatsPanel/PathCards/Gallery
+ * @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).
+ */
+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';
+
+// t() echoes the key when a translation is missing — fall back to readable English.
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+const relMin = (iso) => {
+  const mins = Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 60000));
+  if (mins < 60) return (tr('landing.minAgo', '{n} min ago')).replace('{n}', String(mins));
+  return (tr('landing.hAgo', '{n} h ago')).replace('{n}', String(Math.round(mins / 60)));
+};
+
+/* ── Live ticker: one line, refreshed every 10 s from real public activity. ── */
+function Ticker() {
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    let alive = true;
+    const load = () => fetch('/v1/public/activity-ticker').then(r => r.json())
+      .then(j => { if (alive && j?.ok !== false) setData(j.data); })
+      .catch(() => { /* static fallback stays */ });
+    load();
+    const iv = setInterval(load, 10_000);
+    return () => { alive = false; clearInterval(iv); };
+  }, []);
+
+  // Event → human sentence WHITELIST. Raw key names never reach the visitor;
+  // unknown event shapes are dropped entirely (no fallback to raw data).
+  const humanize = (item) => {
+    const actor = item.actor || '';
+    const key = item.key || '';
+    if (/statistics|last-init|timestamp|config|cache|readme|\.ui$/i.test(key)) return null;
+    if (actor.startsWith('ext:')) {
+      const name = actor.slice(4).replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+      return `${name} ${tr('landing.evExtension', 'published an update')}`;
+    }
+    if (/news|article|sanomat|notes|\bdoc|d-/i.test(key)) return tr('landing.evDocument', 'A new document was published');
+    if (/task/i.test(key)) return tr('landing.evTask', 'An agent completed a task');
+    if (/schedule|cron|daily/i.test(key)) return tr('landing.evSchedule', 'A scheduled job ran');
+    return null;
+  };
+  // Freshness rule: a "live" ticker showing a 45-hour-old event undermines the claim.
+  // Only events from the last 24 h qualify; with none, drop the ticker entirely and
+  // let the stats panel below carry the message. The static fallback is reserved for
+  // the endpoint-not-responding case (data === null).
+  const FRESH_MS = 24 * 3600 * 1000;
+  const hit = (data?.items || [])
+    .filter(i => i.at && Date.now() - new Date(i.at).getTime() < FRESH_MS)
+    .map(i => ({ i, txt: humanize(i) })).find(x => x.txt);
+  if (data && !hit) return null;
+  const agentsBit = data?.agents_online > 0
+    ? ` · ${data.agents_online} ${data.agents_online === 1 ? tr('landing.agentOnlineOne', 'agent online') : tr('landing.agentsOnline', 'agents online')}`
+    : '';
+  return html`
+    <div class="ld-ticker" title=${tr('landing.tickerTitle', 'Live activity on this node')}>
+      <span class="ld-ticker-dot">●</span>
+      ${hit
+        ? html`<span class="ld-ticker-text">${escHtml(hit.txt)} · ${relMin(hit.i.at)}${agentsBit}</span>`
+        : html`<span class="ld-ticker-text">${tr('landing.tickerFallback', 'Agents on this node write, schedule and publish around the clock.')}${agentsBit}</span>`}
+    </div>
+  `;
+}
+
+/* ── Today's stats + ownership line — THE sales core. Real numbers; zeros are omitted. ── */
+function StatsPanel({ navigate }) {
+  const [stats, setStats] = useState(null);
+  useEffect(() => {
+    fetch('/v1/public/node-stats-today').then(r => r.json())
+      .then(j => { if (j?.ok !== false) setStats(j.data); })
+      .catch(() => { /* fallback line stays */ });
+  }, []);
+
+  const parts = [];
+  if (stats?.public_writes > 0) parts.push(`${stats.public_writes} ${tr('landing.statWrites', 'public entries written')}`);
+  if (stats?.tasks_completed > 0) parts.push(`${stats.tasks_completed} ${tr('landing.statTasks', 'tasks completed')}`);
+  if (stats?.schedules_fired > 0) parts.push(`${stats.schedules_fired} ${tr('landing.statSchedules', 'schedules fired')}`);
+
+  return html`
+    <div class="ld-stats">
+      <div class="ld-stats-line">
+        ${parts.length > 0
+          ? html`${tr('landing.todayPrefix', 'This node today:')} ${parts.join(' · ')} · 0 ${tr('landing.humanHours', 'human hours')}`
+          : tr('landing.statsFallback', 'This node runs agents around the clock — schedules, tasks and publishing without human hours.')}
+      </div>
+      <div class="ld-stats-own">
+        ${tr('landing.ownLine', 'The same could run for you. Your own node, your data, your agents.')}
+        <a class="ld-stats-cta" href="/v1/pricing" onClick=${(e) => { e.preventDefault(); navigate('/v1/pricing'); }}>
+          ${tr('landing.ownCta', 'From 49 €/mo →')}
+        </a>
+      </div>
+    </div>
+  `;
+}
+
+/* ── 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([]);
+  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 */ });
+  }, []);
+
+  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' },
+  ];
+
+  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>
+    </div>
+  `;
+}
+
+export default function Landing({ navigate }) {
+  // Logged-in users arriving DIRECTLY (bookmark, external link, address bar) go straight
+  // to the Home dashboard. But a deliberate in-app navigation here (brand link, footer)
+  // shows the landing — otherwise a logged-in user could never see this page at all.
+  // The in-app flag is set by spa.html's handleNav (sessionStorage, per browser tab).
+  useEffect(() => {
+    try { if (sessionStorage.getItem('aimeat.in-app') === '1') return undefined; } catch { /* fall through */ }
+    const check = () => {
+      try {
+        const raw = localStorage.getItem('aimeat_session');
+        if (raw && JSON.parse(raw)?.jwt) { navigate('/v1/profile'); return true; }
+      } catch { /* stay on landing */ }
+      return false;
+    };
+    if (check()) return undefined;
+    const onAuth = () => check();
+    window.addEventListener('aimeat-auth-change', onAuth);
+    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 — no protocol terms here. -->
+      <section class="ld-hero">
+        <h1 class="ld-h1">${tr('landing.heroTitle', 'Your AI gets memory, agents and a place to build.')}</h1>
+        <p class="ld-hero-sub">${tr('landing.heroSub', 'Open protocol. Run your own node or use ours.')}</p>
+      </section>
+
+      <!-- 2. Live ticker -->
+      <${Ticker} />
+
+      <!-- 3. Today's stats + ownership line -->
+      <${StatsPanel} navigate=${navigate} />
+
+      <!-- 4. Three path cards -->
+      <div class="ld-paths">
+        <div class="ld-path">
+          <h3>${tr('landing.cardATitle', 'Try the apps')}</h3>
+          <p>${tr('landing.cardAText', 'Play instantly, no login. All built with an AI chat.')}</p>
+          <a class="ld-path-cta" href=${tryHref} target="_blank">${tr('landing.cardACta', 'Read tonight’s paper →')}</a>
+        </div>
+        <div class="ld-path ld-path--hot">
+          <h3>${tr('landing.cardBTitle', 'Build with your AI chat')}</h3>
+          <p>${tr('landing.cardBText', 'Claude or ChatGPT interviews you and builds the app. AIMEAT is the server.')}</p>
+          <a class="ld-path-cta" href="/v1/classic" onClick=${(e) => { e.preventDefault(); navigate('/v1/classic'); }}>${tr('landing.cardBCta', 'Start building →')}</a>
+        </div>
+        <div class="ld-path">
+          <h3>${tr('landing.cardCTitle', 'A digital employee that never sleeps')}</h3>
+          <p>${tr('landing.cardCText', 'Scheduled agents fetch, write and report while you work. Ready-made packages for small businesses.')}</p>
+          <a class="ld-path-cta" href="/v1/business" onClick=${(e) => { e.preventDefault(); navigate('/v1/business'); }}>${tr('landing.cardCCta', 'See packages →')}</a>
+        </div>
+      </div>
+
+      <!-- 5. The prompt loop -->
+      <div class="ld-loop">
+        <span class="ld-loop-step">① ${tr('landing.loop1', 'Copy the prompt into your AI chat')}</span>
+        <span class="ld-loop-arrow">→</span>
+        <span class="ld-loop-step">② ${tr('landing.loop2', 'The AI interviews you and builds the app')}</span>
+        <span class="ld-loop-arrow">→</span>
+        <span class="ld-loop-step">③ ${tr('landing.loop3', 'The app lives on your node. Share the link.')}</span>
+      </div>
+
+      <!-- 6. Proof gallery -->
+      <${Gallery} onApps=${setApps} />
+
+      <!-- 7. Footer -->
+      <footer class="ld-footer">
+        <a href="/v1/pricing" onClick=${(e) => { e.preventDefault(); navigate('/v1/pricing'); }}>${tr('landing.footPricing', 'Pricing')}</a>
+        <a href="/v1/guides">${tr('landing.footDocs', 'Docs')}</a>
+        <a href="/v1/pricing#own-node" onClick=${(e) => { e.preventDefault(); navigate('/v1/pricing'); }}>${tr('landing.footOwnNode', 'Run your own node')}</a>
+        <a href="https://github.com/aimeat-protocol" target="_blank" rel="noopener">GitHub</a>
+        <a href="/v1/portal?view=dev">${tr('landing.footDev', 'For developers')}</a>
+      </footer>
+    </div>
+  `;
+}

package/dist/public/views/portfolio.js

@@ -3,6 +3,12 @@
  * @description Portfolio view — builder (select content, generate AI prompt,
  *   upload HTML) and public viewer (sandboxed iframe render).
  * @version-history
+ *   v1.2.0 — 2026-06-10 — Workflow round: ①②③ flow banner explains the AI-chat round-trip;
+ *     group summaries show selected/total + select-all checkbox; Generate disabled with a hint
+ *     when nothing is selected; "Custom" type and custom auth-gate open describe-textareas that
+ *     feed the prompt; prompt output shows a character count; step 5 shows the publish URL,
+ *     gains a sandboxed preview (same allow-scripts srcdoc sandbox as the public viewer) and an
+ *     Unpublish in the published banner; bottom button says Profile (where it actually goes).
  *   v1.1.0 — 2026-06-02 — Migrate bespoke prompt-copy button to canonical CopyButton component
  */
 import { h } from 'preact';
@@ -11,6 +17,10 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml, handleImgError } from '/js/utils.js';
+
+// t() echoes the key when a translation is missing (e.g. a server still serving
+// pre-update locales) — fall back to readable English instead of raw keys.
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
 import { apiGet, apiPut } from '/js/api.js';
 import TagCloud from '/js/components/tag-cloud.js';
 import { CopyButton } from '/components/CopyButton.js';
@@ -65,7 +75,7 @@ function formatMemoryKey(key) {
 }
 
 /* ── Prompt Builder ── */
-function buildPortfolioPrompt({ session, catalog, selectedImages, selectedApps, selectedBoards, selectedCortex, selectedMemories, portfolioType, designStyle, authGates }) {
+function buildPortfolioPrompt({ session, catalog, selectedImages, selectedApps, selectedBoards, selectedCortex, selectedMemories, portfolioType, designStyle, authGates, customTypeDesc, customGateDesc }) {
   const ghii = session.ghii || (session.owner + '@unknown');
   const url = NODE_URL;
 
@@ -132,13 +142,13 @@ The user wants to create a personal portfolio website. Generate a single, self-c
 
   prompt += `
 ## Portfolio Requirements
-- Type: ${typeLabels[portfolioType] || portfolioType}
+- Type: ${typeLabels[portfolioType] || portfolioType}${portfolioType === 'custom' && customTypeDesc ? ` — ${customTypeDesc}` : ''}
 - Design Style: ${styleLabels[designStyle] || designStyle}
 `;
 
   // Auth-gated sections
   if (authGates.length > 0) {
-    const gateLabels = { contact: 'Contact information', projectDetails: 'Project details', downloads: 'Download links', custom: 'Custom sections (ask user)' };
+    const gateLabels = { contact: 'Contact information', projectDetails: 'Project details', downloads: 'Download links', custom: customGateDesc ? `Custom sections: ${customGateDesc}` : 'Custom sections (ask user)' };
     prompt += `- Auth-gated sections (show only to logged-in viewers):\n`;
     for (const gate of authGates) {
       prompt += `  - ${gateLabels[gate] || gate}\n`;
@@ -282,6 +292,30 @@ function PortfolioBuilder({ session, navigate }) {
     });
   };
 
+  // Custom descriptions (step 2 "Custom" type / step 3 "Custom sections")
+  const [customTypeDesc, setCustomTypeDesc] = useState('');
+  const [customGateDesc, setCustomGateDesc] = useState('');
+
+  // Group <summary> with selected/total + a select-all checkbox. The checkbox click
+  // must not toggle the <details> open state (stopPropagation + preventDefault on the
+  // summary's default toggle is handled by stopping the click at the input).
+  const groupSummary = (label, ids, selectedSet, setter) => {
+    const selCount = ids.filter(id => selectedSet.has(id)).length;
+    const all = ids.length > 0 && selCount === ids.length;
+    return html`
+      <summary>
+        <input type="checkbox" class="portfolio-group-checkall" checked=${all}
+          title=${tr('portfolio.builder.selectAll', 'Select all')}
+          onClick=${(e) => e.stopPropagation()}
+          onChange=${() => setter(prev => {
+            const next = new Set(prev);
+            if (all) ids.forEach(i => next.delete(i)); else ids.forEach(i => next.add(i));
+            return next;
+          })} />
+        ${label} — ${tr('portfolio.builder.selectedOf', '{sel}/{total} selected').replace('{sel}', String(selCount)).replace('{total}', String(ids.length))}
+      </summary>`;
+  };
+
   // Generate prompt
   const handleGenerate = () => {
     if (!catalog) return;
@@ -302,6 +336,8 @@ function PortfolioBuilder({ session, navigate }) {
       portfolioType,
       designStyle,
       authGates: [...authGates],
+      customTypeDesc: customTypeDesc.trim(),
+      customGateDesc: customGateDesc.trim(),
     });
     setGeneratedPrompt(prompt);
 
@@ -333,11 +369,12 @@ function PortfolioBuilder({ session, navigate }) {
 
   // Paste HTML
   const [pastedHtml, setPastedHtml] = useState('');
+  const [showPreview, setShowPreview] = useState(false);
 
   const handlePublishPaste = async () => {
     const text = pastedHtml.trim();
     if (!text) {
-      setUploadStatus({ ok: false, msg: t('portfolio.builder.pasteEmpty') || 'Paste HTML content first' });
+      setUploadStatus({ ok: false, msg: tr('portfolio.builder.pasteEmpty', 'Paste HTML content first') });
       return;
     }
     await publishHtml(text);
@@ -384,6 +421,19 @@ function PortfolioBuilder({ session, navigate }) {
     setUploading(false);
   };
 
+  // Unpublish: flip enabled off — the public route 404s until the next publish.
+  const handleUnpublish = async () => {
+    setUploading(true);
+    try {
+      await apiPut('/v1/portfolio/config', { ...(existingConfig || {}), enabled: false, tags: ['portfolio'] });
+      setExistingConfig({ ...(existingConfig || {}), enabled: false });
+      setUploadStatus({ ok: true, msg: tr('portfolio.builder.unpublished', 'Portfolio unpublished') });
+    } catch (err) {
+      setUploadStatus({ ok: false, msg: err.message || 'Failed' });
+    }
+    setUploading(false);
+  };
+
   // Upload HTML file (reads text from file, then publishes)
   const handleUpload = async (file) => {
     if (!file || !file.name.endsWith('.html')) {
@@ -408,16 +458,32 @@ function PortfolioBuilder({ session, navigate }) {
 
   const hasContent = catalog && (catalog.images.length || catalog.apps.length || catalog.boards.length || catalog.cortex.length || catalog.memories.length);
 
+  const totalSelected = selectedImages.size + selectedApps.size + selectedBoards.size + selectedCortex.size + selectedMemories.size;
+  const publicUrl = `${NODE_URL}/v1/portfolio/${encodeURIComponent(session.owner)}`;
+
   return html`
     <div class="portfolio-container">
       <h1>${t('portfolio.builder.heading')}</h1>
-      <p style="color:var(--text-dim); margin-bottom:2rem;">${t('portfolio.builder.subtitle')}</p>
+      <p class="portfolio-subtitle-text">${t('portfolio.builder.subtitle')}</p>
+
+      <!-- The loop is the whole point: AIMEAT composes a prompt, YOUR AI chat builds the
+           HTML, you paste it back. Without this banner step 1 gives no hint of steps 4-5. -->
+      <div class="portfolio-flow">
+        <span class="portfolio-flow-step"><span class="portfolio-flow-num">①</span> ${tr('portfolio.builder.flow1', 'Select your content and style')}</span>
+        <span class="portfolio-flow-arrow">→</span>
+        <span class="portfolio-flow-step"><span class="portfolio-flow-num">②</span> ${tr('portfolio.builder.flow2', 'Generate a prompt and run it in your AI chat (Claude, ChatGPT, …)')}</span>
+        <span class="portfolio-flow-arrow">→</span>
+        <span class="portfolio-flow-step"><span class="portfolio-flow-num">③</span> ${tr('portfolio.builder.flow3', 'Paste the resulting HTML back here and publish')}</span>
+      </div>
 
       ${existingConfig?.enabled && html`
-        <div style="margin-bottom:1.5rem; padding:0.75rem 1rem; background:rgba(80,200,120,0.08); border:1px solid rgba(80,200,120,0.2); border-radius:8px; display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;">
-          <span style="color:#50c878;">●</span>
+        <div class="portfolio-published-bar">
+          <span class="portfolio-published-dot">●</span>
           <span>${t('portfolio.builder.enabled')}</span>
-          <a href="/v1/portfolio/${encodeURIComponent(session.owner)}" target="_blank" style="margin-left:auto;">${t('portfolio.builder.viewPublic')}</a>
+          <a href=${publicUrl} target="_blank" class="portfolio-published-link">${t('portfolio.builder.viewPublic')}</a>
+          <button class="btn btn-ghost btn-sm" disabled=${uploading} onClick=${handleUnpublish}>
+            ${tr('portfolio.builder.unpublish', 'Unpublish')}
+          </button>
         </div>
       `}
 
@@ -431,7 +497,7 @@ function PortfolioBuilder({ session, navigate }) {
 
           ${catalog.images.length > 0 && html`
             <details class="portfolio-source-group" open>
-              <summary>${t('portfolio.builder.imagesGroup')} (${catalog.images.length})</summary>
+              ${groupSummary(t('portfolio.builder.imagesGroup'), catalog.images.map(i => i.key), selectedImages, setSelectedImages)}
               ${(() => {
                 const allImgTags = new Set();
                 for (const img of catalog.images) {
@@ -470,7 +536,7 @@ function PortfolioBuilder({ session, navigate }) {
 
           ${catalog.apps.length > 0 && html`
             <details class="portfolio-source-group">
-              <summary>${t('portfolio.builder.appsGroup')} (${catalog.apps.length})</summary>
+              ${groupSummary(t('portfolio.builder.appsGroup'), catalog.apps.map(a => a.filename), selectedApps, setSelectedApps)}
               <div class="portfolio-source-list">
                 ${catalog.apps.map(app => html`
                   <div class="portfolio-source-item">
@@ -486,7 +552,7 @@ function PortfolioBuilder({ session, navigate }) {
 
           ${catalog.boards.length > 0 && html`
             <details class="portfolio-source-group">
-              <summary>${t('portfolio.builder.boardsGroup')} (${catalog.boards.length})</summary>
+              ${groupSummary(t('portfolio.builder.boardsGroup'), catalog.boards.map(b => b.id), selectedBoards, setSelectedBoards)}
               <div class="portfolio-source-list">
                 ${catalog.boards.map(board => html`
                   <div class="portfolio-source-item">
@@ -502,7 +568,7 @@ function PortfolioBuilder({ session, navigate }) {
 
           ${catalog.cortex.length > 0 && html`
             <details class="portfolio-source-group">
-              <summary>${t('portfolio.builder.cortexGroup')} (${catalog.cortex.length})</summary>
+              ${groupSummary(t('portfolio.builder.cortexGroup'), catalog.cortex.map(c => c.name), selectedCortex, setSelectedCortex)}
               <div class="portfolio-source-list">
                 ${catalog.cortex.map(ext => html`
                   <div class="portfolio-source-item">
@@ -518,7 +584,7 @@ function PortfolioBuilder({ session, navigate }) {
 
           ${catalog.memories.length > 0 && html`
             <details class="portfolio-source-group">
-              <summary>${t('portfolio.builder.memoriesGroup')} (${catalog.memories.length})</summary>
+              ${groupSummary(t('portfolio.builder.memoriesGroup'), catalog.memories.map(m => m.key), selectedMemories, setSelectedMemories)}
               ${(() => {
                 const allMemTags = new Set();
                 for (const mem of catalog.memories) {
@@ -575,6 +641,11 @@ function PortfolioBuilder({ session, navigate }) {
               </div>
             `)}
           </div>
+          ${portfolioType === 'custom' && html`
+            <textarea class="portfolio-custom-desc" rows="3"
+              placeholder=${tr('portfolio.builder.customTypePlaceholder', 'Describe what kind of portfolio you want…')}
+              value=${customTypeDesc} onInput=${(e) => setCustomTypeDesc(e.target.value)}></textarea>
+          `}
 
           <p style="color:var(--text-bright); font-size:0.95rem; margin:1.5rem 0 0.5rem;">${t('portfolio.builder.designStyle')}</p>
           <div class="portfolio-options">
@@ -601,18 +672,29 @@ function PortfolioBuilder({ session, navigate }) {
               </div>
             `)}
           </div>
+          ${authGates.has('custom') && html`
+            <textarea class="portfolio-custom-desc" rows="2"
+              placeholder=${tr('portfolio.builder.customGatePlaceholder', 'Describe the custom auth-gated sections…')}
+              value=${customGateDesc} onInput=${(e) => setCustomGateDesc(e.target.value)}></textarea>
+          `}
         </div>
 
         <!-- Step 4: Generate Prompt -->
         <div class="portfolio-step">
           <h3><span class="portfolio-step-number">4</span> ${t('portfolio.builder.step4Title')}</h3>
 
-          <button class="btn btn-primary" onClick=${handleGenerate} style="margin-bottom:1rem;">
-            ${t('portfolio.builder.generateBtn')}
-          </button>
+          <div class="portfolio-generate-row">
+            <button class="btn btn-primary" disabled=${totalSelected === 0} onClick=${handleGenerate}>
+              ${t('portfolio.builder.generateBtn')}
+            </button>
+            ${totalSelected === 0 && html`
+              <span class="portfolio-generate-hint">${tr('portfolio.builder.generateDisabledHint', 'Select at least one item in step 1')}</span>
+            `}
+          </div>
 
           ${generatedPrompt && html`
             <div class="portfolio-prompt-output">${generatedPrompt}</div>
+            <div class="portfolio-prompt-meta">${tr('portfolio.builder.charCount', '{n} characters').replace('{n}', generatedPrompt.length.toLocaleString())}</div>
             <div class="portfolio-prompt-actions">
               <${CopyButton} text=${generatedPrompt} className="btn-primary"
                 label=${t('portfolio.builder.copyPrompt')} copiedLabel=${t('portfolio.builder.promptCopied')} />
@@ -637,6 +719,11 @@ function PortfolioBuilder({ session, navigate }) {
         <div class="portfolio-step">
           <h3><span class="portfolio-step-number">5</span> ${t('portfolio.builder.step5Title')}</h3>
 
+          <div class="portfolio-publish-target">
+            ${tr('portfolio.builder.publishTarget', 'Will be published at:')}
+            <a href=${publicUrl} target="_blank" class="portfolio-publish-url">${publicUrl}</a>
+          </div>
+
           <div class="portfolio-upload-zone ${dragover ? 'dragover' : ''}"
             onClick=${() => fileInputRef.current?.click()}
             onDragOver=${(e) => { e.preventDefault(); setDragover(true); }}
@@ -651,21 +738,31 @@ function PortfolioBuilder({ session, navigate }) {
 
           <div style="display:flex; align-items:center; gap:0.75rem; margin:1rem 0; color:var(--text-dim); font-size:0.9rem;">
             <hr style="flex:1; border:none; border-top:1px solid var(--border-dim);" />
-            <span>${t('portfolio.builder.orPaste') || 'or paste HTML directly'}</span>
+            <span>${tr('portfolio.builder.orPaste', 'or paste HTML directly')}</span>
             <hr style="flex:1; border:none; border-top:1px solid var(--border-dim);" />
           </div>
 
           <textarea class="portfolio-paste-area"
-            placeholder=${t('portfolio.builder.pasteHint') || 'Paste your portfolio HTML here from AI chat...'}
+            placeholder=${tr('portfolio.builder.pasteHint', 'Paste your portfolio HTML here from AI chat...')}
             value=${pastedHtml}
             onInput=${(e) => setPastedHtml(e.target.value)}
             rows="6"
           ></textarea>
           ${pastedHtml.trim() && html`
-            <button class="btn btn-primary" style="margin-top:0.5rem;"
-              onClick=${handlePublishPaste} disabled=${uploading}>
-              ${uploading ? '...' : (t('portfolio.builder.publishPaste') || 'Publish pasted HTML')}
-            </button>
+            <div class="portfolio-paste-actions">
+              <button class="btn btn-primary"
+                onClick=${handlePublishPaste} disabled=${uploading}>
+                ${uploading ? '...' : tr('portfolio.builder.publishPaste', 'Publish pasted HTML')}
+              </button>
+              <button class="btn btn-ghost" onClick=${() => setShowPreview(p => !p)}>
+                ${showPreview ? tr('portfolio.builder.closePreview', 'Close preview') : tr('portfolio.builder.previewBtn', 'Preview')}
+              </button>
+            </div>
+          `}
+          ${showPreview && pastedHtml.trim() && html`
+            <!-- Same sandbox as the public viewer: opaque origin, no session access. -->
+            <iframe class="portfolio-viewer-frame portfolio-preview-frame" srcdoc=${pastedHtml}
+              sandbox="allow-scripts"></iframe>
           `}
 
           ${uploadStatus && html`
@@ -682,7 +779,7 @@ function PortfolioBuilder({ session, navigate }) {
 
       <div style="margin-top:2rem;">
         <button class="btn btn-ghost" onClick=${() => navigate('/v1/profile')}>
-          ${t('portfolio.viewer.backToPortal')}
+          ← ${tr('portfolio.builder.backToProfile', 'Profile')}
         </button>
       </div>
     </div>

package/dist/public/views/pricing.js

@@ -0,0 +1,75 @@
+/**
+ * @file pricing.js
+ * @description Pricing ladder: Try it (0 €) → Own node (49 €/mo) → Own node Pro (99 €/mo)
+ *   → Done for you (setup + monthly) → Enterprise (contact). No payment integration at
+ *   this stage — CTAs are mailto links. #packages anchors the Done-for-you section
+ *   (landing path card C links here). Short sentences, no hype adjectives.
+ * @usage routed at /v1/pricing by spa.html
+ * @version-history
+ *   v1.0.0 — 2026-06-10 — Initial pricing page (landing/portal split).
+ */
+import { h } from 'preact';
+import { useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.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 Pricing() {
+  // Honour the #packages anchor on arrival.
+  useEffect(() => {
+    if (window.location.hash) {
+      setTimeout(() => document.getElementById(window.location.hash.slice(1))?.scrollIntoView({ behavior: 'smooth' }), 200);
+    }
+  }, []);
+
+  const tier = (id, name, price, lines, ctaLabel, ctaHref, hot) => html`
+    <div class="ld-tier${hot ? ' ld-tier--hot' : ''}" id=${id || null}>
+      <h3 class="ld-tier-name">${name}</h3>
+      <div class="ld-tier-price">${price}</div>
+      <ul class="ld-tier-lines">${lines.map(l => html`<li key=${l}>${l}</li>`)}</ul>
+      <a class="ld-path-cta" href=${ctaHref}>${ctaLabel}</a>
+    </div>
+  `;
+
+  return html`
+    <div class="ld ld-pricing">
+      <h1 class="ld-h1">${tr('pricing.title', 'Pricing')}</h1>
+      <p class="ld-hero-sub">${tr('pricing.sub', 'Start free. Move to your own node when the data should be yours.')}</p>
+
+      <div class="ld-tiers">
+        ${tier('try-it', tr('pricing.tryName', 'Try it'), '0 €', [
+          tr('pricing.try1', 'On the genesis node.'),
+          tr('pricing.try2', 'Morsels, public apps, the prompt loop.'),
+        ], tr('pricing.tryCta', 'Start free →'), '/v1/portal')}
+        ${tier('own-node', tr('pricing.ownName', 'Own node'), '49 €/' + tr('pricing.mo', 'mo'), [
+          tr('pricing.own1', 'Your own instance, your data, BYOK.'),
+          tr('pricing.own2', 'No backups, community support.'),
+        ], tr('pricing.contactCta', 'Contact us →'), CONTACT)}
+        ${tier('own-node-pro', tr('pricing.proName', 'Own node Pro'), '99 €/' + tr('pricing.mo', 'mo'), [
+          tr('pricing.pro1', 'Backups and a bigger instance.'),
+          tr('pricing.pro2', 'Ready-made agent packages (CrewAI crew installed).'),
+          tr('pricing.pro3', 'Email support.'),
+        ], tr('pricing.contactCta', 'Contact us →'), CONTACT, true)}
+      </div>
+
+      <div class="ld-tiers" id="packages">
+        ${tier(null, tr('pricing.dfyName', 'Done for you'), '990 € + 49 €/' + tr('pricing.mo', 'mo') + ' · 2500 € + 250 €/' + tr('pricing.mo', 'mo'), [
+          tr('pricing.dfy1', 'Installation, your agents built, onboarding.'),
+          tr('pricing.dfy2', 'For small businesses.'),
+          tr('pricing.dfyExample', 'Example: a barbershop. Every morning at 7, your phone has the day’s bookings, yesterday’s feedback and a social post ready to approve.'),
+        ], tr('pricing.dfyCta', 'See what it looks like →'), '/v1/business')}
+        ${tier(null, tr('pricing.entName', 'Enterprise'), tr('pricing.entPrice', 'contact'), [
+          tr('pricing.ent1', 'Governance, data inside your own walls.'),
+          tr('pricing.ent2', 'Health and finance sectors.'),
+        ], tr('pricing.contactCta', 'Contact us →'), CONTACT)}
+      </div>
+
+      <${ContactCard} />
+    </div>
+  `;
+}