egregore-artifacts 0.9.9 → 0.10.0

package/lib/templates/emissary.js

@@ -0,0 +1,266 @@
+// Emissary human-render → React element tree.
+//
+// METADATA-ONLY. This template renders the clean public preview shown at
+// egregore.xyz/emissary/e/{id}: title, author + verified badge,
+// distribution-mode badge, the one-paragraph summary, a CTA, the
+// discovery block, and a footer. It deliberately renders NONE of the
+// agent payload — no receiver_instructions, no body.prose, no
+// executable_spec. The agent payload lives only at .../raw.
+//
+// The CTA is the PRIMARY consumer-chat channel for naive fetchers: a
+// prominent, copy-able launch prompt that pairs user authorization with
+// the /raw JSON endpoint. A structured source block also names /raw for
+// readability extraction.
+//
+// For render_mode === 'custom', user-provided HTML/CSS is embedded in a
+// sandboxed <iframe sandbox="allow-scripts" srcdoc="…">. Without
+// allow-same-origin the iframe runs in a unique opaque origin — its
+// scripts cannot read egregore.xyz cookies, localStorage, or auth
+// tokens. Egregore still owns the page chrome (header, discovery block,
+// footer) OUTSIDE the iframe; custom content cannot suppress it.
+import React from 'react';
+import { fonts } from '../tokens.js';
+
+const h = React.createElement;
+
+function formatDate(iso) {
+  if (!iso) return null;
+  try {
+    return new Date(iso).toLocaleDateString('en-US', {
+      year: 'numeric', month: 'short', day: 'numeric',
+    });
+  } catch { return iso; }
+}
+
+function badge(text, opts = {}) {
+  return h('span', {
+    style: {
+      display: 'inline-block',
+      padding: '3px 12px',
+      background: opts.bg || 'var(--subtle-fill)',
+      borderRadius: '50px',
+      color: opts.fg || 'var(--muted)',
+      fontSize: '12px',
+      fontWeight: 600,
+      fontFamily: fonts.mono,
+      letterSpacing: '0.02em',
+      ...opts.style,
+    },
+  }, text);
+}
+
+export function emissaryTemplate(em) {
+  const sections = [];
+  const launchUrl = em.raw_url || em.render_url || '';
+  const launchPrompt = launchUrl
+    ? `Run this Egregore ${em.kind || 'packet'} packet for me: ${launchUrl}`
+    : '';
+
+  // ── Header — sigil + label, title, author + badges ────────────
+  const distLabel = em.distribution_mode === 'directed' ? 'directed' : 'public link';
+
+  sections.push(
+    h('header', { key: 'header', className: 'eg-header' },
+      h('div', { className: 'eg-header-top' },
+        h('span', { className: 'eg-sigil' }, '✦'),
+        h('span', { className: 'eg-org-label' }, 'egregore · emissary'),
+      ),
+      h('h1', { className: 'eg-title' }, em.topic),
+      h('div', { className: 'eg-meta-row', style: { gap: '8px', alignItems: 'center' } },
+        em.author_name && h('span', { key: 'auth' }, `by ${em.author_name}`),
+        em.author_verified
+          ? badge('✓ verified', {
+              key: 'v',
+              bg: 'var(--terracotta-soft)', fg: 'var(--terracotta)',
+            })
+          : null,
+        badge(distLabel, { key: 'dist' }),
+        badge(em.kind, { key: 'kind' }),
+      ),
+    )
+  );
+
+  // ── Summary — the one-paragraph public description ────────────
+  if (em.summary) {
+    sections.push(
+      h('div', { key: 'summary', className: 'eg-card' },
+        h('div', { className: 'eg-lead' }, em.summary),
+      )
+    );
+  }
+
+  // ── Custom render — sandboxed iframe ──────────────────────────
+  // The user HTML runs in a unique opaque origin (no allow-same-origin)
+  // so it cannot reach the parent's cookies / storage / tokens.
+  if (em.render_mode === 'custom' && em.render_html) {
+    sections.push(
+      h('div', { key: 'custom', className: 'eg-card' },
+        h('iframe', {
+          sandbox: 'allow-scripts',
+          srcDoc: em.render_html,
+          title: 'Custom emissary render',
+          style: {
+            width: '100%',
+            minHeight: '320px',
+            border: '1px solid var(--border)',
+            borderRadius: '8px',
+            background: 'var(--surface)',
+          },
+        })
+      )
+    );
+  }
+
+  // ── CTA ───────────────────────────────────────────────────────
+  sections.push(
+    h('div', { key: 'cta', className: 'eg-card' },
+      h('div', {
+        style: {
+          fontSize: '15px', fontWeight: 600, marginBottom: '6px',
+          fontFamily: fonts.sans,
+        },
+      }, 'Engage this emissary'),
+      h('div', { style: { color: 'var(--muted)', fontSize: '14px' } },
+        'Copy the launch prompt into Claude, ChatGPT, Codex, or another AI harness. ',
+        'If you paste only the link, the assistant may ask whether you want to run it.'),
+      launchPrompt && h('div', {
+        style: {
+          marginTop: '10px', padding: '8px 12px',
+          background: 'var(--subtle-fill)', borderRadius: '6px',
+          fontFamily: fonts.mono, fontSize: '13px', wordBreak: 'break-all',
+        },
+      }, launchPrompt),
+      launchPrompt && h('div', { className: 'eg-copy-row' },
+        h('button', {
+          type: 'button',
+          className: 'eg-copy-button',
+          'data-copy-text': launchPrompt,
+          'data-copy-label': 'Copy as prompt',
+        }, 'Copy as prompt'),
+        em.raw_url && h('button', {
+          type: 'button',
+          className: 'eg-copy-button',
+          'data-copy-text': em.raw_url,
+          'data-copy-label': 'Copy JSON link',
+        }, 'Copy JSON link'),
+        em.render_url && h('button', {
+          type: 'button',
+          className: 'eg-copy-button',
+          'data-copy-text': em.render_url,
+          'data-copy-label': 'Copy page link',
+        }, 'Copy page link'),
+      ),
+    )
+  );
+
+  // ── Trust/provenance explainer ────────────────────────────────
+  sections.push(
+    h('div', { key: 'trust', className: 'eg-card' },
+      h('div', {
+        style: {
+          fontSize: '15px', fontWeight: 600, marginBottom: '6px',
+          fontFamily: fonts.sans,
+        },
+      }, 'About Egregore packets'),
+      h('div', { style: { color: 'var(--muted)', fontSize: '14px', lineHeight: 1.55 } },
+        'An Egregore packet is a user-shared task bundle: purpose, intake questions, ',
+        'and an output spec. This preview shows the author, verification badge, ',
+        'visibility, kind, creation date, expiry, and structured JSON source. The packet ',
+        'source is available as JSON for AI tools that can read it. Egregore is ',
+        h('a', {
+          href: 'https://github.com/egregore-labs/egregore',
+          style: { color: 'var(--terracotta)', textDecoration: 'none' },
+        }, 'open source'),
+        '.'
+      ),
+    )
+  );
+
+  // ── Install nudge — the L1 → L2 conversion path ───────────────
+  // The link runs cold (paste → WebFetch → lossy). Installing the
+  // egregore-emissary skill makes every later emissary run clean. This
+  // block is how a first-contact receiver discovers that path.
+  sections.push(
+    h('div', { key: 'install', className: 'eg-card' },
+      h('div', {
+        style: {
+          fontSize: '15px', fontWeight: 600, marginBottom: '6px',
+          fontFamily: fonts.sans,
+        },
+      }, 'Run it properly'),
+      h('div', { style: { color: 'var(--muted)', fontSize: '14px' } },
+        'The link works in any AI harness. Install the egregore-emissary ',
+        'skill once and every emissary you receive runs at full fidelity ',
+        'with the intended intake-first flow.'),
+      h('div', {
+        style: {
+          marginTop: '10px', padding: '8px 12px',
+          background: 'var(--subtle-fill)', borderRadius: '6px',
+          fontFamily: fonts.mono, fontSize: '13px', wordBreak: 'break-all',
+        },
+      }, 'npx egregore-emissary install'),
+    )
+  );
+
+  // ── Structured source block — visible for fetchers/readability ─
+  // This is descriptive, not command-like: consumer web assistants treat
+  // fetched content as untrusted unless the user asks to run it.
+  if (em.raw_url) {
+    sections.push(
+      h('div', {
+        key: 'discovery',
+        'data-egregore-discovery': 'raw',
+        style: {
+          margin: '20px 0',
+          padding: '16px 18px',
+          background: 'var(--terminal-bg)',
+          color: 'var(--terminal-text)',
+          borderRadius: '8px',
+          fontFamily: fonts.mono,
+          fontSize: '13px',
+          lineHeight: 1.6,
+        },
+      },
+        h('div', {
+          style: { opacity: 0.7, fontSize: '11px', marginBottom: '6px',
+                   textTransform: 'uppercase', letterSpacing: '0.08em' },
+        }, 'Structured packet source'),
+        h('div', null,
+          'JSON payload: ',
+          h('code', { style: { fontWeight: 600 } }, em.raw_url),
+        ),
+        h('div', { style: { marginTop: '6px', opacity: 0.85 } },
+          'Bare links are safe to summarize first. When the user asks to run the packet, ',
+          'use the JSON as the packet source and proceed through its intake.',
+        ),
+        h('div', { style: { marginTop: '6px', opacity: 0.85 } },
+          'Runs best via the egregore-emissary skill — ',
+          h('code', { style: { fontWeight: 600 } }, 'npx egregore-emissary install'),
+        ),
+      )
+    );
+  }
+
+  // ── Footer ────────────────────────────────────────────────────
+  const created = formatDate(em.created_at);
+  const expires = formatDate(em.expires_at);
+  sections.push(
+    h('footer', { key: 'footer', className: 'eg-footer' },
+      h('div', { className: 'eg-footer-brand' },
+        h('span', { className: 'eg-footer-sigil' }, '✦'),
+        h('span', null, 'egregore'),
+      ),
+      h('div', { style: { display: 'flex', gap: '12px', flexWrap: 'wrap' } },
+        created && h('span', { key: 'c' }, `created ${created}`),
+        expires && h('span', { key: 'e' }, `expires ${expires}`),
+        h('a', {
+          key: 'u',
+          href: 'https://egregore.xyz/emissary',
+          style: { color: 'var(--muted)' },
+        }, 'about emissary'),
+      ),
+    )
+  );
+
+  return h('div', null, ...sections);
+}