diff --git a/docs/architecture-decisions/063-integration-definitions-as-data.md b/docs/architecture-decisions/063-integration-definitions-as-data.md
index 357025bd9..5f1e31094 100644
--- a/docs/architecture-decisions/063-integration-definitions-as-data.md
+++ b/docs/architecture-decisions/063-integration-definitions-as-data.md
@@ -741,7 +741,7 @@ A UI extension is a `query` plus a `view`. The view is a tree of a **fixed compo
 - A `Button` can only point at a `userAction` workflow (checked by `validate`). A surface can therefore read data
   and trigger declared workflows, and nothing else.
 
-The renderers themselves are not in v0.1.
+**Preview renderers are not host renderers.** v0.1 has *preview* renderers (`renderers/`): they turn a resolved tree into Slack blocks, a HubSpot tree or HTML, and dry-run a workflow, so an author can see in the editor what an integration will show in the apps it connects. They run inside this app, over sample or real records, and nothing deploys them to a host. The *host* renderer described above, the one deployed card or panel inside each host that calls `POST /api/integrations/:id/actions/UI_<SURFACE>` and draws the answer, is not in v0.1.
 
 ### 17. Versioning (answers ADR-030 for data-defined integrations)
 
@@ -810,7 +810,7 @@ work kept apart from bulk work.
 | Missing | Why it matters | Plan |
 |---|---|---|
 | Per-module rate limits | Bursts (a backfill, a webhook storm) hit provider limits; today a 429 fails the step and the queue retries | A token bucket per module and installation, in the ports |
-| Host renderers (HubSpot card, Phone panel) | `renderSurface` returns trees that nothing draws yet | Per host |
+| Deployed host renderers (HubSpot card, phone panel) | `renderSurface` returns trees that no host draws yet. The preview renderers draw them, but only inside this app, for authors | Per host. Not the same work as the previews |
 | Real manifests | `capabilities/*.json` are mocks written to match the Api classes | Generated from, or checked against, each module's `Api` |
 
 Their order is decided by a month of iteration on v0.1, not fixed here.
diff --git a/packages/core/integrations/data-defined/README.md b/packages/core/integrations/data-defined/README.md
index 656165f05..fc1c7a294 100644
--- a/packages/core/integrations/data-defined/README.md
+++ b/packages/core/integrations/data-defined/README.md
@@ -144,6 +144,29 @@ different document at the same version is refused. So is a version that is not n
 semver bump smaller than the changes. Publishing goes through a conditional write, so two concurrent publishes of one
 version cannot both win. With `memoryDefinitions()` (definitions bundled in the app) the admin routes answer 501.
 
+## Previews: in the app
+
+An integration shows up inside the apps it connects: a HubSpot card, a Slack message, digest or approval request. A
+preview renders exactly that from the current settings and sample or real records, with the same query, view and step
+code production runs (`renderers/`):
+
+| Function | Does |
+|---|---|
+| `previewSurface({ def, installation, surfaceId, record, ports, host? })` | `{ surface, view, html, slack?, hubspot? }`. `slack` is Block Kit (`{ blocks, text, truncated }`), `hubspot` a data description of `@hubspot/ui-extensions` components, `html` the same card framed as its host looks. `host` defaults to the surface's own |
+| `previewWorkflow({ def, installation, workflowId, event?, record?, manifests, fixtures? })` | Dry run: `{ status, sends, calls, trace, waiting? }`. Each call is `{ stepId, module, capability, kind, args, output, rendered }`; `rendered` is `{ html, slack? }` for writes (a Slack post renders as the message, anything else as a "would call" card) |
+| `recordingPorts({ def, manifests, fixtures })` | Ports that record and answer instead of calling an API; give them to `previewSurface` for sample data |
+| `viewToSlack`, `viewToHubSpot`, `viewToHtml`, `slackMessageToHtml` | The renderers on their own. `decodeAction(value)` reads a Slack button click back to `{ integrationId?, workflow, surface }` |
+
+Dry-run rules: nothing is performed (the base ports' API function throws, and the recorder sits in front of it).
+`fixtures` answers calls, keyed `"<module key>.<capability>"` (a value, or `(args) => value`; `code:<ref>` for code
+steps, which are never run), otherwise the manifest's own record shape with ids filled. A webhook workflow with no
+`event` runs on the manifest's sample payload. A pausing step ends the preview with `waiting`.
+
+Everything that is record data is escaped for its target (mrkdwn `& < >` plus fenced `* _ ~`, HTML, text children for
+HubSpot), links are http(s) only, Block Kit limits are met by truncating with a marker (50 blocks, 3000/2000/150
+characters, 25 buttons), and nothing throws on an odd tree. Text a *definition* writes into a Slack message (templates)
+is sent as authored: a preview shows it as sent, including any raw record data a template interpolates.
+
 ## Syncs
 
 `sync-engine.js` runs `syncs`: backfill (a button or `onInstall`, one queued page per message, progress at
diff --git a/packages/core/integrations/data-defined/examples/asana-slack.definition.json b/packages/core/integrations/data-defined/examples/asana-slack.definition.json
index e12e9f01f..55ad9d973 100644
--- a/packages/core/integrations/data-defined/examples/asana-slack.definition.json
+++ b/packages/core/integrations/data-defined/examples/asana-slack.definition.json
@@ -178,14 +178,14 @@
           "use": "slack.message.post",
           "with": {
             "channel": "$.settings.channel",
-            "text": ":white_check_mark: {{steps.task.completed_by.name | default: 'Someone'}} completed <{{steps.task.permalink_url}}|{{steps.task.name}}>"
+            "text": ":white_check_mark: {{steps.task.completed_by.name | default: 'Someone' | mrkdwn}} completed <{{steps.task.permalink_url}}|{{steps.task.name | mrkdwn}}>"
           }
         }
       ]
     }
   ],
   "templates": {
-    "assignee-digest": ":spiral_calendar_pad: Hi {{item.firstName | default: item.name}}, you have {{item.count}} Asana task(s) due tomorrow:\n{{item.lines}}",
+    "assignee-digest": ":spiral_calendar_pad: Hi {{item.firstName | default: item.name | mrkdwn}}, you have {{item.count}} Asana task(s) due tomorrow:\n{{item.lines}}",
     "unassigned-digest": ":warning: {{steps.groups.unassignedCount}} task(s) due tomorrow have no assignee:\n{{steps.groups.unassignedLines}}"
   },
   "lifecycle": {
diff --git a/packages/core/integrations/data-defined/examples/hubspot-slack.definition.json b/packages/core/integrations/data-defined/examples/hubspot-slack.definition.json
index 18fd91775..9f90718c6 100644
--- a/packages/core/integrations/data-defined/examples/hubspot-slack.definition.json
+++ b/packages/core/integrations/data-defined/examples/hubspot-slack.definition.json
@@ -258,7 +258,7 @@
               "when": "$.steps.slackUser.id exists",
               "with": {
                 "channel": "$.steps.slackUser.id",
-                "text": "Due today: {{item.properties.hs_task_subject}}",
+                "text": "Due today: {{item.properties.hs_task_subject | mrkdwn}}",
                 "metadata": {
                   "event_type": "hubspot_task",
                   "event_payload": {
@@ -401,9 +401,9 @@
     }
   ],
   "templates": {
-    "deal-won": ":tada: *{{steps.deal.properties.dealname}}* closed won for ${{steps.deal.properties.amount | default: '?'}}. Nice work {{steps.owner.firstName | default: 'team'}}! <https://app.hubspot.com/contacts/{{install.portalId}}/record/0-3/{{steps.deal.id}}|Open deal>",
-    "high-value": ":moneybag: New deal over ${{settings.threshold}}: *{{steps.deal.properties.dealname}}* (${{steps.deal.properties.amount}}), closing {{steps.deal.properties.closedate | date}}. <https://app.hubspot.com/contacts/{{install.portalId}}/record/0-3/{{steps.deal.id}}|Open deal>",
-    "digest-line": "\u2022 <https://app.hubspot.com/contacts/{{install.portalId}}/record/0-3/{{item.id}}|{{item.properties.dealname}}>: ${{item.properties.amount | default: 0}}, closes {{item.properties.closedate | date}}",
+    "deal-won": ":tada: *{{steps.deal.properties.dealname | mrkdwn}}* closed won for ${{steps.deal.properties.amount | default: '?'}}. Nice work {{steps.owner.firstName | default: 'team' | mrkdwn}}! <https://app.hubspot.com/contacts/{{install.portalId}}/record/0-3/{{steps.deal.id}}|Open deal>",
+    "high-value": ":moneybag: New deal over ${{settings.threshold}}: *{{steps.deal.properties.dealname | mrkdwn}}* (${{steps.deal.properties.amount}}), closing {{steps.deal.properties.closedate | date}}. <https://app.hubspot.com/contacts/{{install.portalId}}/record/0-3/{{steps.deal.id}}|Open deal>",
+    "digest-line": "\u2022 <https://app.hubspot.com/contacts/{{install.portalId}}/record/0-3/{{item.id}}|{{item.properties.dealname | mrkdwn}}>: ${{item.properties.amount | default: 0}}, closes {{item.properties.closedate | date}}",
     "digest": ":calendar: *Closing in the next 7 days* ({{steps.deals | size}} deals)\n{{steps.build | join: '\\n'}}"
   }
 }
diff --git a/packages/core/integrations/data-defined/expressions.js b/packages/core/integrations/data-defined/expressions.js
index bd691406f..f9996bc8c 100644
--- a/packages/core/integrations/data-defined/expressions.js
+++ b/packages/core/integrations/data-defined/expressions.js
@@ -46,6 +46,8 @@ const FILTERS = {
     seconds: (v) => (v == null ? '' : String(Math.round(Number(v) / 1000))),
     date: (v) => (v ? new Date(v).toISOString().slice(0, 10) : ''),
     json: (v) => JSON.stringify(v),
+    // Record data inside a Slack message: escaped so a name like "*x* <!channel>" neither formats nor pings.
+    mrkdwn: (v) => require('./renderers/slack').escapeMrkdwn(v),
     default: (v, arg) => (v == null || v === '' ? arg : v),
     truncate: (v, arg) => { const s = String(v ?? ''); const n = Number(arg) || 80; return s.length > n ? s.slice(0, n - 1) + '…' : s; },
     // lists
diff --git a/packages/core/integrations/data-defined/index.js b/packages/core/integrations/data-defined/index.js
index fdfca851c..3bab1b943 100644
--- a/packages/core/integrations/data-defined/index.js
+++ b/packages/core/integrations/data-defined/index.js
@@ -15,6 +15,11 @@ const { TRANSFORMS, applyMapping } = require('./transforms');
 const { FILTERS } = require('./expressions');
 const { validateManifest } = require('./manifests');
 const { checkDefinition, checkManifest, checkInstallation } = require('./schema-check');
+const { viewToSlack, escapeMrkdwn } = require('./renderers/slack');
+const { viewToHubSpot } = require('./renderers/hubspot');
+const { viewToHtml, slackMessageToHtml } = require('./renderers/html');
+const { previewSurface, previewWorkflow, recordingPorts } = require('./renderers/preview');
+const { decodeAction } = require('./renderers/common');
 const useCases = require('./use-cases/definition-use-cases');
 
 /** Load every capabilities/*.capabilities.json (bundled mocks; real modules ship their own). */
@@ -35,5 +40,6 @@ module.exports = {
     defineIntegrationClass, defineSharedIntegrationClass, extendIntegrationClass, memoryDefinitions,
     BUILTINS, TRANSFORMS, FILTERS, applyMapping, resolveOptions,
     loadManifests, loadExamples,
+    viewToSlack, escapeMrkdwn, viewToHubSpot, viewToHtml, slackMessageToHtml, previewSurface, previewWorkflow, recordingPorts, decodeAction,
     ...useCases,
 };
diff --git a/packages/core/integrations/data-defined/renderers/common.js b/packages/core/integrations/data-defined/renderers/common.js
new file mode 100644
index 000000000..a8703107d
--- /dev/null
+++ b/packages/core/integrations/data-defined/renderers/common.js
@@ -0,0 +1,67 @@
+/**
+ * What every renderer shares: coercion of view props (they come from record data, so any type can arrive), the one
+ * URL rule, truncation that never leaves half an entity behind, and the button <-> Slack round trip.
+ */
+
+/** A view prop as text. Objects are JSON, null/undefined are empty: a renderer never prints "[object Object]" or "undefined". */
+function str(v) {
+    if (v == null) return '';
+    if (typeof v === 'string') return v;
+    if (typeof v === 'object') { try { return JSON.stringify(v); } catch (_) { return ''; } }
+    return String(v);
+}
+
+/**
+ * Only http(s) links leave a preview or a card. Record data decides these URLs ("{{data.proposal.recording}}"), and a
+ * `javascript:` or `data:` URL in a vendor field must not become a clickable thing in someone's HubSpot or Slack.
+ * @returns {string|null}
+ */
+function safeUrl(u) {
+    const s = str(u).trim();
+    if (!/^https?:\/\/[^\s<>"']+$/i.test(s)) return null;
+    try { new URL(s); } catch (_) { return null; }
+    return s;
+}
+
+/**
+ * Cut to at most `max` characters, ending in the marker. Never leaves a dangling half of a Slack entity ("&am"), which
+ * would render as literal junk instead of the character it stood for.
+ */
+function truncate(s, max, marker = '…') {
+    s = String(s);
+    if (s.length <= max) return s;
+    let cut = s.slice(0, Math.max(0, max - marker.length));
+    cut = cut.replace(/&(?:[a-z]{1,4}|#\d{0,6}|#x[0-9a-f]{0,5})?$/i, '');
+    return cut + marker;
+}
+
+/** Badge tone (`neutral`, or a Jira statusCategory key like `done`) -> one of four. Unknown is neutral, never an error. */
+function toneOf(tone) {
+    const t = str(tone).toLowerCase();
+    if (['positive', 'success', 'good', 'done', 'green', 'complete', 'completed'].includes(t)) return 'positive';
+    if (['warning', 'caution', 'indeterminate', 'yellow', 'in_progress', 'pending'].includes(t)) return 'warning';
+    if (['critical', 'danger', 'error', 'bad', 'red', 'failed'].includes(t)) return 'critical';
+    return 'neutral';
+}
+
+const ACTION_VALUE_MAX = 2000; // Slack's cap on a button's value
+
+/**
+ * A userAction button's identity as a Slack button value: which installation, which workflow, which surface it was on.
+ * `needsInput` marks a button whose workflow asks for values first (a Slack button cannot, so the handler opens a form).
+ */
+function encodeAction({ integrationId, workflow, surface, needsInput }) {
+    const value = JSON.stringify({ ...(integrationId ? { integrationId: String(integrationId) } : {}), workflow, surface, ...(needsInput ? { needsInput: true } : {}) });
+    return value.length <= ACTION_VALUE_MAX ? value : null;
+}
+
+/** The inverse, for the handler that receives a click. null for anything that is not one of ours. */
+function decodeAction(value) {
+    let v;
+    try { v = JSON.parse(value); } catch (_) { return null; }
+    if (!v || typeof v !== 'object' || typeof v.workflow !== 'string' || !v.workflow || typeof v.surface !== 'string') return null;
+    if (v.integrationId !== undefined && typeof v.integrationId !== 'string') return null;
+    return { ...(v.integrationId ? { integrationId: v.integrationId } : {}), workflow: v.workflow, surface: v.surface, ...(v.needsInput ? { needsInput: true } : {}) };
+}
+
+module.exports = { str, safeUrl, truncate, toneOf, encodeAction, decodeAction, ACTION_VALUE_MAX };
diff --git a/packages/core/integrations/data-defined/renderers/html.js b/packages/core/integrations/data-defined/renderers/html.js
new file mode 100644
index 000000000..46aee3b78
--- /dev/null
+++ b/packages/core/integrations/data-defined/renderers/html.js
@@ -0,0 +1,129 @@
+/**
+ * Safe, self-contained HTML for a preview pane. Every piece of data goes through `esc`, links are http(s) only, styles
+ * are inline attributes and there is no script, no `<style>`, no event handler and no external resource, so a pane can
+ * show a vendor's record next to the definition's chrome without that record being able to do anything.
+ */
+const { str, safeUrl, toneOf } = require('./common');
+
+const esc = (v) => str(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+const FONT = "font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif";
+
+/** How each host frames what it shows. `generic` is for hosts with no look of their own (a phone app, Zendesk, Shopify…). */
+const HOSTS = {
+    hubspot: { label: 'HubSpot card', frame: `${FONT};background:#fff;border:1px solid #cbd6e2;border-radius:3px;max-width:420px;color:#33475b;font-size:14px;box-shadow:0 1px 2px rgba(0,0,0,.08)`, head: 'background:#f5f8fa;border-bottom:1px solid #cbd6e2;padding:8px 14px;font-size:12px;color:#516f90;font-weight:600', body: 'padding:14px', accent: '#ff7a59' },
+    slack: { label: 'Slack message', frame: `${FONT};background:#fff;border:1px solid #e0e0e0;border-radius:8px;max-width:560px;color:#1d1c1d;font-size:15px`, head: 'padding:8px 14px 0;font-size:13px;color:#616061', body: 'padding:6px 14px 12px', accent: '#4a154b' },
+    generic: { label: 'Preview', frame: `${FONT};background:#fff;border:1px solid #d9dde3;border-radius:6px;max-width:480px;color:#1f2937;font-size:14px`, head: 'background:#f3f4f6;border-bottom:1px solid #d9dde3;padding:8px 14px;font-size:12px;color:#6b7280;font-weight:600', body: 'padding:14px', accent: '#2563eb' },
+};
+const hostOf = (h) => HOSTS[h] || HOSTS.generic;
+const TONE = { positive: 'background:#e6f4ea;color:#1e6b34', warning: 'background:#fff4d6;color:#8a5a00', critical: 'background:#fde8e6;color:#a4261b', neutral: 'background:#eceff3;color:#44505f' };
+
+/** The view tree as HTML, without the host frame. */
+function viewToHtmlBody(view, host = 'generic') {
+    const H = hostOf(host);
+    const go = (v) => {
+        if (!v || typeof v !== 'object') return '';
+        const p = v.props || {};
+        const kids = () => (v.children || []).map(go).join('');
+        switch (v.component) {
+            case 'Stack': return `<div style="display:flex;flex-direction:column;gap:10px">${kids()}</div>`;
+            case 'Heading': return `<h3 style="margin:0;font-size:16px;font-weight:700">${esc(p.text)}</h3>`;
+            case 'Text': return `<p style="margin:0;line-height:1.4">${esc(p.text)}</p>`;
+            case 'KeyValue': return `<dl style="margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 14px">${(Array.isArray(p.items) ? p.items : []).map((it) => `<dt style="color:#6b7280">${esc(it?.label)}</dt><dd style="margin:0">${esc(it?.value) || '—'}</dd>`).join('')}</dl>`;
+            case 'List': return `<ul style="margin:0;padding-left:18px">${(Array.isArray(p.items) ? p.items : []).map((it) => `<li>${esc(it?.title)}${it?.meta ? ` <span style="color:#6b7280;font-size:12px">${esc(it.meta)}</span>` : ''}</li>`).join('')}</ul>`;
+            case 'Table': return `<table style="border-collapse:collapse;width:100%"><thead><tr>${(Array.isArray(p.columns) ? p.columns : []).map((c) => `<th style="text-align:left;border-bottom:1px solid #d9dde3;padding:4px 8px;font-size:12px;color:#6b7280">${esc(c)}</th>`).join('')}</tr></thead><tbody>${(Array.isArray(p.rows) ? p.rows : []).map((r) => `<tr>${(Array.isArray(r) ? r : []).map((c) => `<td style="border-bottom:1px solid #eef0f3;padding:4px 8px">${esc(c)}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
+            case 'Badge': return `<span style="display:inline-block;align-self:flex-start;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:600;${TONE[toneOf(p.tone)]}">${esc(p.text)}</span>`;
+            case 'Empty': return `<p style="margin:0;color:#6b7280;font-style:italic">${esc(p.text)}</p>`;
+            case 'Divider': return '<hr style="border:0;border-top:1px solid #e5e7eb;margin:2px 0">';
+            case 'Button': return buttonHtml({ label: p.label, action: p.action, primary: p.style === 'primary', accent: H.accent });
+            default: return kids();
+        }
+    };
+    return go(view);
+}
+
+/** A button in a preview does nothing (no script), but says what it would do: a link for open_url, a `data-` marker for a workflow. */
+function buttonHtml({ label, action, primary, accent }) {
+    const style = `display:inline-block;align-self:flex-start;padding:6px 14px;border-radius:4px;font-size:14px;font-weight:600;text-decoration:none;cursor:default;${primary ? `background:${accent};color:#fff;border:1px solid ${accent}` : `background:#fff;color:${accent};border:1px solid ${accent}`}`;
+    if (action?.type === 'open_url') {
+        const url = safeUrl(action.url);
+        if (url) return `<a href="${esc(url)}" target="_blank" rel="noopener noreferrer" style="${style}">${esc(label || 'Open')}</a>`;
+    }
+    const wf = action?.type === 'userAction' ? ` data-workflow="${esc(action.workflow)}" title="${esc(`Runs the "${action.workflow}" workflow`)}"` : '';
+    return `<button type="button"${wf} style="${style}">${esc(label || 'Open')}</button>`;
+}
+
+/** The framed preview: a head line saying what this is and where it appears, then the body. */
+function frame(host, title, bodyHtml) {
+    const H = hostOf(host);
+    return `<div data-preview-host="${esc(host in HOSTS ? host : 'generic')}" style="${H.frame}"><div style="${H.head}">${esc(title || H.label)}</div><div style="${H.body}">${bodyHtml}</div></div>`;
+}
+
+/**
+ * @param {object|null} view
+ * @param {{ host?: string, title?: string }} [opts]
+ */
+function viewToHtml(view, { host = 'generic', title } = {}) {
+    const body = view ? viewToHtmlBody(view, host) : `<p style="margin:0;color:#6b7280;font-style:italic">Nothing to show for this record.</p>`;
+    return frame(host, title, body);
+}
+
+// ---- Slack: mrkdwn and Block Kit as HTML, so a posted message previews as it will look, not as a data dump ----
+
+/** Slack mrkdwn (already Slack-encoded: `&amp;`, `<url|label>`) to HTML. Only `* _ ~ \`` and links are interpreted. */
+function mrkdwnToHtml(text) {
+    const parts = str(text).split(/(<[^<>\n]*>)/);
+    const out = parts.map((seg) => {
+        const tok = /^<([^<>\n]*)>$/.exec(seg);
+        if (tok) {
+            // the target is Slack-encoded like the rest (`&amp;` in a query string): decode it once, then esc() it as an attribute
+            const [rawTarget, label] = tok[1].split('|');
+            const target = rawTarget.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+            if (/^https?:\/\//i.test(target)) { const url = safeUrl(target); return url ? `<a href="${esc(url)}" target="_blank" rel="noopener noreferrer" style="color:#1264a3">${esc(label || target)}</a>` : esc(label || ''); }
+            if (target.startsWith('!')) return `<span style="background:#fff3cd">@${esc(label || target.slice(1).split('^')[0])}</span>`;
+            if (target.startsWith('@')) return `<span style="background:#e8f5fa;color:#1264a3">@${esc(label || target.slice(1))}</span>`;
+            if (target.startsWith('#')) return `<span style="color:#1264a3">#${esc(label || target.slice(1))}</span>`;
+            return esc(label || '');
+        }
+        // decode Slack's three entities once, then escape for HTML, then emphasis on the escaped text
+        const raw = seg.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+        return esc(raw)
+            .replace(/`([^`\n]+)`/g, '<code style="background:#f4f4f4;border:1px solid #e0e0e0;border-radius:3px;padding:0 3px">$1</code>')
+            .replace(/(^|[\s(])\*([^*\n]+)\*(?=$|[\s).,!?:;])/g, '$1<strong>$2</strong>')
+            .replace(/(^|[\s(])_([^_\n]+)_(?=$|[\s).,!?:;])/g, '$1<em>$2</em>')
+            .replace(/(^|[\s(])~([^~\n]+)~(?=$|[\s).,!?:;])/g, '$1<del>$2</del>');
+    }).join('');
+    return out.replace(/\n/g, '<br>');
+}
+
+const textOf = (t) => (t && t.type === 'mrkdwn' ? mrkdwnToHtml(t.text) : esc(t?.text));
+
+function slackBlocksToHtml(blocks) {
+    return (Array.isArray(blocks) ? blocks : []).map((b) => {
+        switch (b?.type) {
+            case 'header': return `<div style="font-size:18px;font-weight:700;margin:6px 0">${esc(b.text?.text)}</div>`;
+            case 'section': return `<div style="margin:4px 0">${b.text ? `<div>${textOf(b.text)}</div>` : ''}${Array.isArray(b.fields) ? `<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:4px">${b.fields.map((f) => `<div>${textOf(f)}</div>`).join('')}</div>` : ''}</div>`;
+            case 'context': return `<div style="color:#616061;font-size:12px;margin:4px 0">${(b.elements || []).map(textOf).join(' ')}</div>`;
+            case 'divider': return '<hr style="border:0;border-top:1px solid #e0e0e0;margin:8px 0">';
+            case 'actions': return `<div style="display:flex;flex-wrap:wrap;gap:8px;margin:6px 0">${(b.elements || []).map((e) => (e.url
+                ? buttonHtml({ label: e.text?.text, action: { type: 'open_url', url: e.url }, accent: '#1264a3' })
+                : buttonHtml({ label: e.text?.text, action: { type: 'userAction', workflow: safeWorkflow(e.value) }, primary: e.style === 'primary', accent: e.style === 'primary' ? '#007a5a' : '#1264a3' }))).join('')}</div>`;
+            default: return `<div style="color:#616061;font-size:12px">(${esc(b?.type || 'unknown')} block)</div>`;
+        }
+    }).join('');
+}
+function safeWorkflow(value) { try { const w = JSON.parse(value)?.workflow; return typeof w === 'string' ? w : ''; } catch (_) { return ''; } }
+
+/** A Slack message as the channel will show it: who posts it, where, then the blocks (or the text). */
+function slackMessageToHtml({ channel, text, blocks, appName = 'Your integration' }) {
+    const to = channel ? esc(channel) : '<em>(channel not chosen yet)</em>';
+    const body = Array.isArray(blocks) && blocks.length ? slackBlocksToHtml(blocks) : `<div>${mrkdwnToHtml(text)}</div>`;
+    return `<div data-preview-host="slack" style="${HOSTS.slack.frame}"><div style="${HOSTS.slack.head}"><strong style="color:#1d1c1d">${esc(appName)}</strong> <span style="background:#e8e8e8;border-radius:3px;padding:0 4px;font-size:11px">APP</span> to ${to}</div><div style="${HOSTS.slack.body}">${body}</div></div>`;
+}
+
+/** Any other outbound call: what it is and what it carries. The values are escaped, and objects are shown as JSON. */
+function callToHtml({ module, capability, args }) {
+    const rows = Object.entries(args || {}).map(([k, v]) => `<dt style="color:#6b7280">${esc(k)}</dt><dd style="margin:0;white-space:pre-wrap;word-break:break-word">${esc(typeof v === 'string' ? v : JSON.stringify(v, null, 2))}</dd>`).join('');
+    return frame('generic', `Would call ${module} · ${capability}`, `<dl style="margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 14px">${rows}</dl>`);
+}
+
+module.exports = { viewToHtml, viewToHtmlBody, slackBlocksToHtml, slackMessageToHtml, mrkdwnToHtml, callToHtml, esc, HOSTS };
diff --git a/packages/core/integrations/data-defined/renderers/hubspot.js b/packages/core/integrations/data-defined/renderers/hubspot.js
new file mode 100644
index 000000000..e16b009b4
--- /dev/null
+++ b/packages/core/integrations/data-defined/renderers/hubspot.js
@@ -0,0 +1,54 @@
+/**
+ * Resolved view tree -> a JSON description of HubSpot UI-extension components (`@hubspot/ui-extensions` names). Data,
+ * not React: a thin card deployed once maps `{ type, props, children }` onto `React.createElement(components[type], ...)`
+ * and routes `props.action` to the actions endpoint, so a changed card is a publish, not a card deploy.
+ *
+ * A node is `{ type, props?, children? }`; a child is a string (text) or a node. Strings are text, never markup.
+ */
+const { str, safeUrl, toneOf } = require('./common');
+
+/** The component names this emits, so the card can fail closed on one it does not know. */
+const HUBSPOT_COMPONENTS = ['Flex', 'Heading', 'Text', 'List', 'Tag', 'Button', 'EmptyState', 'DescriptionList', 'DescriptionListItem', 'Divider', 'Table', 'TableHead', 'TableBody', 'TableRow', 'TableHeader', 'TableCell'];
+const TAG_VARIANT = { positive: 'success', warning: 'warning', critical: 'error', neutral: 'default' };
+
+const node = (type, props, children) => ({ type, ...(props && Object.keys(props).length ? { props } : {}), ...(children && children.length ? { children } : {}) });
+
+/**
+ * @param {object|null} view
+ * @param {{ integrationId?: string, surface?: string }} [opts]  carried on a button's `action`, so the card can post it back
+ * @returns {object|null}
+ */
+function viewToHubSpot(view, { integrationId, surface } = {}) {
+    const go = (v) => {
+        if (!v || typeof v !== 'object') return null;
+        const p = v.props || {};
+        const kids = () => (v.children || []).map(go).filter(Boolean);
+        switch (v.component) {
+            case 'Stack': return node('Flex', { direction: 'column', gap: 'sm' }, kids());
+            case 'Heading': return node('Heading', {}, [str(p.text)]);
+            case 'Text': return node('Text', {}, [str(p.text)]);
+            case 'KeyValue': return node('DescriptionList', { direction: 'row' }, (Array.isArray(p.items) ? p.items : []).map((it) => node('DescriptionListItem', { label: str(it?.label) }, [node('Text', {}, [str(it?.value) || '—'])])));
+            case 'List': return node('List', { variant: 'unordered' }, (Array.isArray(p.items) ? p.items : []).map((it) => node('Flex', { direction: 'column', gap: 'flush' }, [node('Text', { format: { fontWeight: 'demibold' } }, [str(it?.title)]), ...(it?.meta ? [node('Text', { variant: 'microcopy' }, [str(it.meta)])] : [])])));
+            case 'Table': return node('Table', {}, [
+                node('TableHead', {}, [node('TableRow', {}, (Array.isArray(p.columns) ? p.columns : []).map((c) => node('TableHeader', {}, [str(c)])))]),
+                node('TableBody', {}, (Array.isArray(p.rows) ? p.rows : []).map((r) => node('TableRow', {}, (Array.isArray(r) ? r : []).map((c) => node('TableCell', {}, [str(c)]))))),
+            ]);
+            case 'Badge': return node('Tag', { variant: TAG_VARIANT[toneOf(p.tone)] }, [str(p.text)]);
+            case 'Empty': return node('EmptyState', { title: str(p.text), layout: 'vertical' });
+            case 'Divider': return node('Divider', { distance: 'sm' });
+            case 'Button': {
+                const a = p.action;
+                const variant = p.style === 'primary' ? 'primary' : p.style === 'danger' ? 'destructive' : 'secondary';
+                let action;
+                if (a?.type === 'userAction' && typeof a.workflow === 'string') action = { type: 'userAction', workflow: a.workflow, surface, ...(integrationId ? { integrationId: String(integrationId) } : {}), ...(a.input ? { input: a.input } : {}) };
+                else if (a?.type === 'open_url' && safeUrl(a.url)) action = { type: 'open_url', url: safeUrl(a.url) };
+                // A button with no usable action still renders (disabled), so the card matches the definition.
+                return node('Button', { variant, ...(action ? { action } : { disabled: true }) }, [str(p.label) || 'Open']);
+            }
+            default: return kids().length === 1 ? kids()[0] : node('Flex', { direction: 'column', gap: 'sm' }, kids());
+        }
+    };
+    return go(view);
+}
+
+module.exports = { viewToHubSpot, HUBSPOT_COMPONENTS };
diff --git a/packages/core/integrations/data-defined/renderers/preview.js b/packages/core/integrations/data-defined/renderers/preview.js
new file mode 100644
index 000000000..0158455d2
--- /dev/null
+++ b/packages/core/integrations/data-defined/renderers/preview.js
@@ -0,0 +1,154 @@
+/**
+ * Previews: what an integration will show inside the apps it connects, rendered from the current settings and sample
+ * or real records. Same code path as production for everything that decides the content (queries, view resolution,
+ * the interpreter and its steps); the only thing swapped is where a capability call goes.
+ *
+ *   previewSurface   a UI surface (a HubSpot card, a Slack message menu...) -> view + html (+ slack blocks / hubspot tree)
+ *   previewWorkflow  dry-run a workflow: every outbound call is RECORDED with the args it would send, none is made
+ */
+const { makePorts, renderSurface, runWorkflow, recordOf } = require('../runtime');
+const { isBuiltin } = require('../steps');
+const { viewToSlack } = require('./slack');
+const { viewToHubSpot } = require('./hubspot');
+const { viewToHtml, slackMessageToHtml, callToHtml, slackBlocksToHtml, esc, HOSTS } = require('./html');
+
+class DryRunError extends Error { constructor(what) { super(`dry run: ${what} was not performed`); this.name = 'DryRunError'; } }
+
+const clone = (v) => (v === undefined ? v : JSON.parse(JSON.stringify(v)));
+
+/** A plausible empty record for a manifest object: ids are filled (a step that checks `$.steps.x.id exists` proceeds), the rest is empty of its type. */
+function sampleObject(manifest, name) {
+    const o = manifest?.objects?.[name];
+    const out = {};
+    for (const f of o?.fields || []) {
+        const keys = String(f.name).split('.');
+        let cur = out;
+        keys.slice(0, -1).forEach((k) => { cur = (cur[k] = cur[k] && typeof cur[k] === 'object' ? cur[k] : {}); });
+        const empty = f.type === 'id' ? `preview-${name}-${f.name}` : f.type === 'number' ? 0 : f.type === 'boolean' ? false : f.type === 'json' ? {} : f.type === 'array' ? [] : '';
+        cur[keys[keys.length - 1]] = empty;
+    }
+    return out;
+}
+function sampleOutput(manifest, cap) {
+    const o = String(cap?.output || '');
+    if (o.endsWith('[]')) return [];
+    if (/^page</.test(o)) return { results: [] };
+    return o && manifest?.objects?.[o] ? sampleObject(manifest, o) : {};
+}
+
+/**
+ * Ports for previews. `ports.call` answers from `fixtures` (key "<module key>.<capability>", a value or a function of
+ * the args), else from the manifest's own output shape, and records the call. The real `callApi` the base ports would
+ * use throws, so a call that somehow bypassed the recorder fails loudly instead of reaching an API.
+ *
+ * @param {{ def, manifests, fixtures?: object, store?: Map }} p  fixtures.store pre-seeds the link store (keys as the real store's)
+ * @returns {{ ports, calls: object[], refusing: object }}  `refusing`: the unwrapped ports, whose call() always throws (kept so a test can prove it)
+ */
+function recordingPorts({ def, manifests, fixtures = {}, store }) {
+    const calls = [];
+    const rows = store || new Map(Object.entries(clone(fixtures.store) || {}));
+    const mem = {
+        get: async (k) => rows.get(k) ?? null,
+        put: async (k, v) => { rows.set(k, v); },
+        claim: async (k, v) => { if (rows.has(k)) return false; rows.set(k, v); return true; },
+        release: async (k) => { rows.delete(k); },
+    };
+    const base = makePorts({
+        def, manifests, store: mem,
+        callApi: async (moduleKey, method) => { throw new DryRunError(`${moduleKey}.${method}`); },
+        runCode: async (ref, args) => answer('code', ref, 'code', args, fixtures[`code:${ref}`], {}),
+    });
+    const ports = { ...base }; // the seam below replaces call() on this copy; `base` keeps the one that reaches callApi
+    const manifestFor = (key) => manifests[def.modules[key]?.module];
+    async function answer(module, capability, kind, args, fixture, fallback) {
+        const call = { module, capability, kind, args: clone(args) };
+        calls.push(call);
+        try {
+            call.output = typeof fixture === 'function' ? clone(await fixture(clone(args), { module, capability })) : fixture !== undefined ? clone(fixture) : fallback;
+            return clone(call.output);
+        } catch (e) { call.error = String(e.message || e); throw e; }
+    }
+    // `refusing` is the base ports as they were before the seam below: their call() reaches callApi, which throws.
+    // The seam: the interpreter only ever reaches a module through ports.call.
+    ports.call = async (moduleKey, capability, args) => {
+        const m = manifestFor(moduleKey);
+        const c = m?.capabilities?.[capability];
+        if (!c) {
+            calls.push({ module: moduleKey, capability, kind: 'unknown', args: clone(args), error: 'not declared by the module manifest' });
+            throw new Error(`${moduleKey}.${capability} is not declared by the module manifest`);
+        }
+        return answer(moduleKey, capability, c.kind, args, fixtures[`${moduleKey}.${capability}`], sampleOutput(m, c));
+    };
+    return { ports, calls, refusing: base };
+}
+
+/** read/search/subscribe calls fetch; the rest (and code) is what leaves the integration. */
+const isSend = (call) => call.kind === 'write' || call.kind === 'delete';
+
+/** How one outbound call would look where it lands. Slack messages get the real Block Kit/mrkdwn rendering. */
+function renderCall(call, manifest, appName) {
+    if (manifest?.module === 'slack' && /^message\./.test(call.capability)) {
+        const a = call.args || {};
+        const slack = { channel: a.channel, text: a.text, ...(Array.isArray(a.blocks) ? { blocks: a.blocks } : {}) };
+        return { html: slackMessageToHtml({ ...slack, appName }), slack };
+    }
+    return { html: callToHtml(call) };
+}
+
+/**
+ * Dry-run one workflow. Nothing is performed: every capability call is recorded with the args it would carry and
+ * answered from `fixtures` (or an empty record shaped by the manifest). A webhook workflow with no `event` runs on
+ * the manifest's own sample payload for its trigger.
+ *
+ * @param {{ def, installation?, workflowId: string, event?, record?, manifests, fixtures?: object, now?: Function }} p
+ * @returns {Promise<{ workflow: string, status: string, reason?: string, error?: string, waiting?: object, sends: object[], calls: object[], trace: object[] }>}
+ *   `calls`: every call in order, `{ stepId, at, module, capability, kind, args, output, rendered }`; `sends`: the writes
+ *   among them (`rendered` is `{ html, slack? }` for those, null for reads)
+ */
+async function previewWorkflow({ def, installation = {}, workflowId, event, record, manifests, fixtures = {}, now }) {
+    const w = (def.workflows || []).find((x) => x.id === workflowId);
+    if (!w) throw new Error(`Unknown workflow "${workflowId}"`);
+    if (event === undefined) {
+        const t = w.trigger;
+        event = (t.type === 'webhook' && clone(manifests[def.modules[t.module]?.module]?.events?.[t.topic]?.payload)) || {};
+    }
+    const { ports, calls } = recordingPorts({ def, manifests, fixtures });
+    const run = await runWorkflow({ def, installation, workflowId, event, record, ports, manifests, ...(now ? { now } : {}) });
+
+    // The trace has one entry per step that ran; the calls, in the same order, belong to the entries that are capability steps (or code).
+    const callSteps = (run.trace || []).filter((t) => (!isBuiltin(t.use) || t.use === 'code') && (t.status === 'ok' || t.status === 'error'));
+    const aligned = callSteps.length === calls.length;
+    const out = calls.map((c, i) => {
+        const manifest = manifests[def.modules[c.module]?.module];
+        return { stepId: aligned ? callSteps[i].id : null, at: aligned ? callSteps[i].at : null, ...c, rendered: isSend(c) && manifest ? renderCall(c, manifest, def.label || def.id) : null };
+    });
+    const waiting = run.status === 'waiting' ? run.waitingFor : undefined;
+    return {
+        workflow: workflowId, status: run.status, ...(run.reason ? { reason: run.reason } : {}), ...(run.error ? { error: run.error } : {}),
+        ...(waiting ? { waiting: { ...waiting, ...(waiting.kind === 'approval' ? { html: `<div style="${HOSTS.generic.frame}"><div style="${HOSTS.generic.head}">Waits for approval</div><div style="${HOSTS.generic.body}">${esc(waiting.prompt)}</div></div>` } : {}) } } : {}),
+        sends: out.filter(isSend), calls: out, trace: run.trace || [],
+    };
+}
+
+/**
+ * Render one UI surface. `ports` answer the surface's query (real ports for real records; `recordingPorts(...).ports`
+ * with fixtures for samples). `host` defaults to the surface's own.
+ *
+ * @returns {Promise<{ surface, view, html: string, slack?: { blocks, text, truncated }, hubspot?: object }>}
+ */
+async function previewSurface({ def, installation = {}, surfaceId, record, ports, host }) {
+    const { surface, view } = await renderSurface({ def, installation, surfaceId, record, ports });
+    const h = host || surface.host;
+    const opts = { integrationId: installation.integrationId, surface: surface.id };
+    const out = { surface, view };
+    if (h === 'slack') {
+        out.slack = viewToSlack(view, opts);
+        out.html = `<div data-preview-host="slack" style="${HOSTS.slack.frame}"><div style="${HOSTS.slack.head}">${esc(surface.label || def.label || def.id)} · ${esc(surface.placement)}</div><div style="${HOSTS.slack.body}">${view ? slackBlocksToHtml(out.slack.blocks) : '<em>Nothing to show for this record.</em>'}</div></div>`;
+    } else {
+        if (h === 'hubspot') out.hubspot = viewToHubSpot(view, opts);
+        out.html = viewToHtml(view, { host: h, title: `${def.ui.find((u) => u.id === surface.id)?.label || surface.id} · ${surface.placement}` });
+    }
+    return out;
+}
+
+module.exports = { previewSurface, previewWorkflow, recordingPorts, DryRunError, recordOf };
diff --git a/packages/core/integrations/data-defined/renderers/slack.js b/packages/core/integrations/data-defined/renderers/slack.js
new file mode 100644
index 000000000..7a4a1773c
--- /dev/null
+++ b/packages/core/integrations/data-defined/renderers/slack.js
@@ -0,0 +1,146 @@
+/**
+ * Resolved view tree -> Slack Block Kit. Data comes from vendor records, so everything that is data is escaped for
+ * mrkdwn, and everything is cut to Slack's limits with a visible marker instead of letting chat.postMessage reject the
+ * whole message (a long deal name must not cost the approval request).
+ */
+const { str, safeUrl, truncate, toneOf, encodeAction } = require('./common');
+
+const LIMITS = { blocks: 50, header: 150, sectionText: 3000, fieldText: 2000, fields: 10, contextText: 3000, contextElements: 10, button: 75, buttonUrl: 3000, actionId: 255, actions: 25, listItems: 25, itemText: 300 };
+const MARK = '…';
+const ZWSP = '\u200b';
+
+/**
+ * Text that is DATA, for a mrkdwn field. `&`, `<` and `>` are the three characters Slack requires escaping (this also
+ * defuses `<!channel>` and `<https://evil|click>` in a vendor field). Slack has no backslash escape for `* _ ~ \``, so
+ * `* _ ~` are fenced with a zero-width space, which stops them pairing into bold/italic/strike without changing how they
+ * look. A fenced backtick would still pair into a code span, so it becomes the look-alike U+02CB.
+ */
+function escapeMrkdwn(v) {
+    return str(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/[*_~]/g, `${ZWSP}$&${ZWSP}`).replace(/`/g, '\u02cb');
+}
+const mrkdwn = (t) => ({ type: 'mrkdwn', text: t });
+const plain = (t) => ({ type: 'plain_text', text: t, emoji: false });
+const clip = (s, max) => truncate(s, max, MARK);
+
+/** Lines packed into as few sections as fit 3000 characters; one line is never split. */
+function linesToSections(lines) {
+    const out = [];
+    let cur = '';
+    for (const l of lines) {
+        const line = clip(l, LIMITS.itemText);
+        if (cur && cur.length + 1 + line.length > LIMITS.sectionText) { out.push(cur); cur = ''; }
+        cur = cur ? `${cur}\n${line}` : line;
+    }
+    if (cur) out.push(cur);
+    return out.map((text) => ({ type: 'section', text: mrkdwn(clip(text, LIMITS.sectionText)) }));
+}
+
+const TONE_EMOJI = { positive: ':large_green_circle:', warning: ':large_yellow_circle:', critical: ':red_circle:', neutral: ':white_circle:' };
+
+/**
+ * @param {object|null} view  resolveView output ({ component, props, children })
+ * @param {{ integrationId?: string, surface?: string }} [opts]  what a button's click carries back
+ * @returns {{ blocks: object[], text: string, truncated: boolean }}  `text` is the notification/fallback text
+ */
+function viewToSlack(view, { integrationId, surface } = {}) {
+    const blocks = [];
+    let text = '';
+    let truncated = false;
+    let pending = []; // consecutive buttons share one actions block
+    let n = 0;
+
+    const flush = () => {
+        if (!pending.length) return;
+        const els = pending.slice(0, LIMITS.actions);
+        if (pending.length > LIMITS.actions) truncated = true;
+        blocks.push({ type: 'actions', elements: els });
+        pending = [];
+    };
+    const push = (b) => { flush(); blocks.push(b); };
+
+    const walk = (node) => {
+        if (!node || typeof node !== 'object') return;
+        const p = node.props || {};
+        switch (node.component) {
+            case 'Heading': {
+                flush();
+                const t = clip(str(p.text), LIMITS.header);
+                if (!text) text = t;
+                if (t) blocks.push({ type: 'header', text: plain(t) });
+                break;
+            }
+            case 'Text': {
+                const t = str(p.text);
+                if (!text) text = t;
+                if (t) push({ type: 'section', text: mrkdwn(clip(escapeMrkdwn(t), LIMITS.sectionText)) });
+                break;
+            }
+            case 'KeyValue': {
+                const items = Array.isArray(p.items) ? p.items : [];
+                for (let i = 0; i < items.length; i += LIMITS.fields) {
+                    const fields = items.slice(i, i + LIMITS.fields).map((it) => mrkdwn(clip(`*${escapeMrkdwn(it?.label)}*\n${escapeMrkdwn(it?.value) || '—'}`, LIMITS.fieldText)));
+                    if (fields.length) push({ type: 'section', fields });
+                }
+                break;
+            }
+            case 'List': {
+                const items = Array.isArray(p.items) ? p.items : [];
+                const lines = items.slice(0, LIMITS.listItems).map((it) => `• ${escapeMrkdwn(it?.title)}${it?.meta ? ` — _${escapeMrkdwn(it.meta)}_` : ''}`);
+                if (items.length > LIMITS.listItems) { lines.push(`_${MARK} and ${items.length - LIMITS.listItems} more_`); truncated = true; }
+                flush();
+                blocks.push(...linesToSections(lines));
+                break;
+            }
+            case 'Table': {
+                const cols = Array.isArray(p.columns) ? p.columns : [];
+                const rows = Array.isArray(p.rows) ? p.rows : [];
+                const lines = [];
+                if (cols.length) lines.push(cols.map((c) => `*${escapeMrkdwn(c)}*`).join('  |  '));
+                for (const r of rows.slice(0, LIMITS.listItems)) lines.push((Array.isArray(r) ? r : []).map((c) => escapeMrkdwn(c) || '—').join('  |  '));
+                if (rows.length > LIMITS.listItems) { lines.push(`_${MARK} and ${rows.length - LIMITS.listItems} more_`); truncated = true; }
+                flush();
+                blocks.push(...linesToSections(lines));
+                break;
+            }
+            case 'Badge': {
+                const t = str(p.text);
+                if (t) push({ type: 'context', elements: [mrkdwn(clip(`${TONE_EMOJI[toneOf(p.tone)]} *${escapeMrkdwn(t)}*`, LIMITS.contextText))] });
+                break;
+            }
+            case 'Empty': {
+                const t = str(p.text);
+                if (t) push({ type: 'context', elements: [mrkdwn(clip(`_${escapeMrkdwn(t)}_`, LIMITS.contextText))] });
+                break;
+            }
+            case 'Divider': push({ type: 'divider' }); break;
+            case 'Button': {
+                const label = clip(str(p.label) || 'Open', LIMITS.button);
+                const style = p.style === 'primary' ? { style: 'primary' } : p.style === 'danger' ? { style: 'danger' } : {};
+                const a = p.action;
+                if (a?.type === 'userAction' && typeof a.workflow === 'string') {
+                    const value = encodeAction({ integrationId, workflow: a.workflow, surface, needsInput: !!a.input });
+                    if (value) pending.push({ type: 'button', text: plain(label), action_id: clip(`frigg:${a.workflow}`, LIMITS.actionId - 8) + `:${n++}`, value, ...style });
+                } else if (a?.type === 'open_url') {
+                    const url = safeUrl(a.url);
+                    if (url && url.length <= LIMITS.buttonUrl) pending.push({ type: 'button', text: plain(label), action_id: `frigg:open:${n++}`, url });
+                }
+                break;
+            }
+            default: break; // Stack, and anything a newer definition adds: just its children
+        }
+        for (const c of node.children || []) walk(c);
+    };
+    walk(view);
+    flush();
+
+    // 50 blocks is Slack's whole-message cap. Keep 49 and say so, rather than lose the message.
+    let out = blocks;
+    if (blocks.length > LIMITS.blocks) {
+        out = [...blocks.slice(0, LIMITS.blocks - 1), { type: 'context', elements: [mrkdwn(`_${MARK} ${blocks.length - (LIMITS.blocks - 1)} more blocks not shown_`)] }];
+        truncated = true;
+    }
+    // `text` is the notification fallback and Slack parses it as mrkdwn too, so a record's `<!channel>` must not ping from there either.
+    return { blocks: out, text: clip(escapeMrkdwn(text || 'Update'), LIMITS.sectionText), truncated };
+}
+
+module.exports = { viewToSlack, escapeMrkdwn, LIMITS };
diff --git a/packages/core/integrations/data-defined/tests/renderers.test.js b/packages/core/integrations/data-defined/tests/renderers.test.js
new file mode 100644
index 000000000..523188c20
--- /dev/null
+++ b/packages/core/integrations/data-defined/tests/renderers.test.js
@@ -0,0 +1,416 @@
+/**
+ * The renderers: a resolved view tree as Slack blocks, HubSpot components and HTML, and the previews that put real
+ * example definitions through them. What is asserted is the concrete output (escaped text, limits, the click's
+ * payload, what a dry run would send), against the real examples, with the guards mutation-checked.
+ */
+const http = require('http');
+const https = require('https');
+const d = require('..');
+const { decodeAction } = require('../renderers/common');
+const { esc, mrkdwnToHtml, viewToHtml, slackBlocksToHtml } = require('../renderers/html');
+const { HUBSPOT_COMPONENTS } = require('../renderers/hubspot');
+const { LIMITS } = require('../renderers/slack');
+
+const manifests = d.loadManifests();
+const example = (id) => JSON.parse(JSON.stringify(d.loadExamples().find((x) => x.id === id)));
+const view = (component, props, children) => ({ component, props: props || {}, ...(children ? { children } : {}) });
+const ZW = '​';
+const walk = (n, fn) => { if (!n || typeof n !== 'object') return; fn(n); (n.children || []).forEach((c) => walk(c, fn)); };
+
+describe('Slack blocks', () => {
+    const evil = 'Acme <!channel> <https://evil.example|click> & Co *bold* _it_ ~gone~ `code`';
+
+    it('escapes record data for mrkdwn: & < > by entity, formatting characters fenced, backticks swapped', () => {
+        const { blocks, text } = d.viewToSlack(view('Stack', {}, [
+            view('Heading', { text: evil }),
+            view('Text', { text: evil }),
+            view('KeyValue', { items: [{ label: 'Who <@U1>', value: evil }] }),
+            view('List', { items: [{ title: evil, meta: '*m*' }] }),
+            view('Badge', { text: evil, tone: 'done' }),
+        ]));
+        const section = blocks.find((b) => b.type === 'section' && b.text);
+        expect(section.text.text).toBe(`Acme &lt;!channel&gt; &lt;https://evil.example|click&gt; &amp; Co ${ZW}*${ZW}bold${ZW}*${ZW} ${ZW}_${ZW}it${ZW}_${ZW} ${ZW}~${ZW}gone${ZW}~${ZW} ˋcodeˋ`);
+        const all = JSON.stringify(blocks);
+        // nothing a record supplied survives as live mrkdwn: no raw <!channel>, no raw link, no unfenced bold
+        const mrkdwnTexts = [];
+        for (const b of blocks) { if (b.text?.type === 'mrkdwn') mrkdwnTexts.push(b.text.text); (b.fields || []).forEach((f) => mrkdwnTexts.push(f.text)); (b.elements || []).forEach((e) => e.type === 'mrkdwn' && mrkdwnTexts.push(e.text)); }
+        expect(mrkdwnTexts.length).toBe(4);
+        for (const t of mrkdwnTexts) { expect(t).not.toMatch(/<!channel>|<https:\/\/evil/); expect(t).not.toContain('`'); }
+        expect(all).toContain('&lt;@U1&gt;');
+        // the notification fallback is parsed as mrkdwn by Slack too
+        expect(text).not.toContain('<!channel>');
+        expect(text).toContain('&lt;!channel&gt;');
+        // a header is plain_text: no mrkdwn to escape, and never interpreted
+        expect(blocks[0]).toEqual({ type: 'header', text: { type: 'plain_text', text: evil, emoji: false } });
+    });
+
+    it('cuts a long header, text and field to Slack limits with a marker, and never leaves half an entity', () => {
+        const { blocks } = d.viewToSlack(view('Stack', {}, [
+            view('Heading', { text: 'H'.repeat(400) }),
+            view('Text', { text: 'x'.repeat(5000) }),
+            view('Text', { text: `${'a'.repeat(2997)}&&&&` }),
+            view('KeyValue', { items: [{ label: 'L', value: 'v'.repeat(3000) }] }),
+        ]));
+        expect(blocks[0].text.text).toHaveLength(LIMITS.header);
+        expect(blocks[0].text.text.endsWith('…')).toBe(true);
+        expect(blocks[1].text.text).toHaveLength(3000);
+        expect(blocks[1].text.text.endsWith('…')).toBe(true);
+        // 2997 chars + "&amp;" straddles the 3000 cut: the dangling "&a" must go with it
+        expect(blocks[2].text.text.length).toBeLessThanOrEqual(3000);
+        expect(blocks[2].text.text).toBe(`${'a'.repeat(2997)}…`);
+        expect(blocks[3].fields[0].text).toHaveLength(2000);
+    });
+
+    it('keeps a message at 50 blocks with a visible marker, and bounds list, table, field and button counts', () => {
+        const many = view('Stack', {}, Array.from({ length: 80 }, (_, i) => view('Text', { text: `line ${i}` })));
+        const out = d.viewToSlack(many);
+        expect(out.blocks).toHaveLength(50);
+        expect(out.truncated).toBe(true);
+        expect(out.blocks[49]).toEqual({ type: 'context', elements: [{ type: 'mrkdwn', text: '_… 31 more blocks not shown_' }] });
+        expect(out.blocks[48].text.text).toBe('line 48');
+
+        const list = d.viewToSlack(view('List', { items: Array.from({ length: 40 }, (_, i) => ({ title: `i${i}` })) }));
+        expect(list.truncated).toBe(true);
+        expect(list.blocks.map((b) => b.text.text).join('\n')).toContain('and 15 more');
+
+        const kv = d.viewToSlack(view('KeyValue', { items: Array.from({ length: 23 }, (_, i) => ({ label: `k${i}`, value: i })) }));
+        expect(kv.blocks.map((b) => b.fields.length)).toEqual([10, 10, 3]);
+
+        const btns = d.viewToSlack(view('Stack', {}, Array.from({ length: 30 }, (_, i) => view('Button', { label: `b${i}`, action: { type: 'open_url', url: `https://example.com/${i}` } }))));
+        expect(btns.blocks).toHaveLength(1);
+        expect(btns.blocks[0].elements).toHaveLength(25);
+        expect(btns.truncated).toBe(true);
+        // unique action_ids within the block, labels cut to 75
+        const ids = btns.blocks[0].elements.map((e) => e.action_id);
+        expect(new Set(ids).size).toBe(25);
+        const long = d.viewToSlack(view('Button', { label: 'L'.repeat(200), action: { type: 'open_url', url: 'https://example.com' } }));
+        expect(long.blocks[0].elements[0].text.text).toHaveLength(75);
+    });
+
+    it('never throws on odd input: null view, wrong types, unknown component', () => {
+        expect(d.viewToSlack(null)).toEqual({ blocks: [], text: 'Update', truncated: false });
+        const out = d.viewToSlack(view('Stack', {}, [view('KeyValue', { items: 'nope' }), view('List', { items: { a: 1 } }), view('Table', { rows: 7, columns: 'x' }), view('Mystery', { text: 't' }), view('Text', { text: { a: 1 } }), view('Text', { text: null })]));
+        expect(out.blocks).toEqual([{ type: 'section', text: { type: 'mrkdwn', text: '{"a":1}' } }]);
+    });
+
+    it('a userAction button carries { integrationId, workflow, surface } and decodes back (real example)', async () => {
+        const def = example('hubspot-slack');
+        const { ports } = d.recordingPorts({ def, manifests, fixtures: { 'hubspot.task.get': { id: '9', properties: { hs_task_subject: 'Call Dana', hs_task_status: 'OPEN' } } } });
+        const r = await d.previewSurface({ def, surfaceId: 'task-actions', record: { metadata: { event_type: 'hubspot_task', event_payload: { taskId: '9' } } }, ports, installation: { integrationId: 'int_42', portalId: '55' } });
+        const actions = r.slack.blocks.find((b) => b.type === 'actions');
+        const done = actions.elements.find((e) => e.text.text === 'Mark done');
+        expect(done.style).toBe('primary');
+        expect(done.action_id).toMatch(/^frigg:mark-task-done:\d+$/);
+        expect(JSON.parse(done.value)).toEqual({ integrationId: 'int_42', workflow: 'mark-task-done', surface: 'task-actions' });
+        expect(decodeAction(done.value)).toEqual({ integrationId: 'int_42', workflow: 'mark-task-done', surface: 'task-actions' });
+        // the open_url button is a link button with the interpolated URL, and no value
+        const open = actions.elements.find((e) => e.text.text === 'Open in HubSpot');
+        expect(open.url).toBe('https://app.hubspot.com/tasks/55/view/all/task/9');
+        expect(open.value).toBeUndefined();
+        // and the click's workflow really is one the definition has, triggered by a user action
+        expect(def.workflows.find((w) => w.id === decodeAction(done.value).workflow).trigger.type).toBe('userAction');
+    });
+
+    it('marks a button whose workflow asks for input, and refuses to decode what is not ours', () => {
+        const b = d.viewToSlack(view('Button', { label: 'Send', action: { type: 'userAction', workflow: 'w', input: { m: { type: 'text' } } } }), { surface: 's' });
+        expect(decodeAction(b.blocks[0].elements[0].value)).toEqual({ workflow: 'w', surface: 's', needsInput: true });
+        for (const bad of ['', 'nope', '{}', '{"workflow":5,"surface":"s"}', '{"workflow":"w"}', '{"workflow":"w","surface":"s","integrationId":7}', 'null']) expect(decodeAction(bad)).toBeNull();
+    });
+
+    it('drops a button whose URL is not http(s)', () => {
+        for (const url of ['javascript:alert(1)', 'data:text/html,<script>', 'ftp://x', '//evil.example', 'https://a b', '']) {
+            expect(d.viewToSlack(view('Button', { label: 'Go', action: { type: 'open_url', url } })).blocks).toEqual([]);
+        }
+    });
+});
+
+describe('HubSpot component description', () => {
+    it('describes the Zendesk-style card with real component names, status as a Tag, and the action on the button', async () => {
+        const def = example('phone-hubspot');
+        const { ports } = d.recordingPorts({ def, manifests });
+        const r = await d.previewSurface({ def, surfaceId: 'phone-card', record: { properties: { phone: '+15551230000' } }, ports, installation: { integrationId: 'int_1' } });
+        expect(r.hubspot.type).toBe('Flex');
+        const names = new Set();
+        walk({ children: [r.hubspot] }, (n) => n.type && names.add(n.type));
+        for (const n of names) expect(HUBSPOT_COMPONENTS).toContain(n);
+        const button = JSON.stringify(r.hubspot);
+        expect(JSON.parse(button)).toEqual(r.hubspot); // plain data
+        let send;
+        walk({ children: [r.hubspot] }, (n) => { if (n.type === 'Button' && n.children[0] === 'Send text') send = n; });
+        expect(send.props.action).toEqual({ type: 'userAction', workflow: 'text-from-card', surface: 'phone-card', integrationId: 'int_1', input: { message: { type: 'text', label: 'Message' } } });
+    });
+
+    it('maps tone to Tag variants, keeps data as text children, never as markup, and disables a button with no safe action', () => {
+        const t = (v) => d.viewToHubSpot(v);
+        expect(t(view('Badge', { text: 'Done', tone: 'done' }))).toEqual({ type: 'Tag', props: { variant: 'success' }, children: ['Done'] });
+        expect(t(view('Badge', { text: 'x', tone: 'indeterminate' })).props.variant).toBe('warning');
+        expect(t(view('Badge', { text: 'x', tone: 'weird' })).props.variant).toBe('default');
+        expect(t(view('Text', { text: '<script>alert(1)</script>' }))).toEqual({ type: 'Text', children: ['<script>alert(1)</script>'] });
+        const bad = t(view('Button', { label: 'Go', action: { type: 'open_url', url: 'javascript:alert(1)' } }));
+        expect(bad.props.disabled).toBe(true);
+        expect(bad.props.action).toBeUndefined();
+        expect(t(view('Button', { label: 'Go', action: { type: 'open_url', url: 'https://example.com/x' } })).props.action).toEqual({ type: 'open_url', url: 'https://example.com/x' });
+        expect(t(null)).toBeNull();
+    });
+
+    it('renders KeyValue as a DescriptionList and Table as Table parts, and a Jira escalation card as the Zendesk surface it is', async () => {
+        const kv = d.viewToHubSpot(view('KeyValue', { items: [{ label: 'Priority', value: 'High' }, { label: 'Owner', value: null }] }));
+        expect(kv).toEqual({ type: 'DescriptionList', props: { direction: 'row' }, children: [
+            { type: 'DescriptionListItem', props: { label: 'Priority' }, children: [{ type: 'Text', children: ['High'] }] },
+            { type: 'DescriptionListItem', props: { label: 'Owner' }, children: [{ type: 'Text', children: ['—'] }] },
+        ] });
+        const table = d.viewToHubSpot(view('Table', { columns: ['A', 'B'], rows: [['1', '2']] }));
+        expect(table.children.map((c) => c.type)).toEqual(['TableHead', 'TableBody']);
+        expect(table.children[1].children[0].children.map((c) => c.type)).toEqual(['TableCell', 'TableCell']);
+        const def = example('zendesk-jira');
+        const { ports } = d.recordingPorts({ def, manifests });
+        const r = await d.previewSurface({ def, surfaceId: 'jira-panel', record: {}, ports, installation: {} });
+        expect(r.surface.host).toBe('zendesk');
+        expect(r.hubspot).toBeUndefined(); // no hubspot tree unless that host is asked for
+        expect(d.viewToHubSpot(r.view).type).toBe('Flex');
+    });
+});
+
+describe('HTML', () => {
+    const script = '<script>alert(1)</script>';
+
+    it('escapes every piece of data, emits no script, handler or style element, and only http(s) links', () => {
+        const html = viewToHtml(view('Stack', {}, [
+            view('Heading', { text: script }),
+            view('Text', { text: `"><img src=x onerror=alert(1)>` }),
+            view('KeyValue', { items: [{ label: script, value: script }] }),
+            view('List', { items: [{ title: script, meta: script }] }),
+            view('Table', { columns: [script], rows: [[script]] }),
+            view('Badge', { text: script, tone: 'critical' }),
+            view('Empty', { text: script }),
+            view('Button', { label: script, action: { type: 'open_url', url: 'javascript:alert(1)' } }),
+            view('Button', { label: 'ok', action: { type: 'open_url', url: 'https://example.com/a?b=1&c="x"' } }),
+            view('Button', { label: 'wf', action: { type: 'userAction', workflow: '"><script>' } }),
+        ]), { host: 'hubspot' });
+        expect(html).not.toMatch(/<script/i);
+        expect(html).not.toMatch(/<style/i);
+        expect(html).not.toMatch(/<[^>]*\son[a-z]+\s*=/i); // an attribute, not the escaped text of one
+        expect(html).not.toMatch(/<img/i);
+        expect(html).not.toMatch(/javascript:/i);
+        expect(html).not.toMatch(/href="(?!https?:)/);
+        expect(html).toContain('&lt;script&gt;alert(1)&lt;/script&gt;');
+        expect(html).not.toContain('"x"'); // the quote in the URL could not become an attribute break
+    });
+
+    it('renders each real example surface for its host with no script', async () => {
+        let n = 0;
+        for (const def of d.loadExamples()) {
+            for (const u of def.ui || []) {
+                const { ports } = d.recordingPorts({ def, manifests });
+                const r = await d.previewSurface({ def, surfaceId: u.id, record: {}, ports, installation: { integrationId: 'i' } });
+                expect(r.html).not.toMatch(/<script|<style|<[^>]*\son[a-z]+\s*=|javascript:/i);
+                expect(r.html).toContain(`data-preview-host="${['hubspot', 'slack'].includes(u.host) ? u.host : 'generic'}"`);
+                n++;
+            }
+        }
+        expect(n).toBeGreaterThanOrEqual(10);
+    });
+
+    it('applies the host look: hubspot card, slack message and generic frames differ', () => {
+        const v = view('Heading', { text: 'Hi' });
+        const [h, s, g] = ['hubspot', 'slack', 'generic'].map((host) => viewToHtml(v, { host }));
+        expect(h).toContain('data-preview-host="hubspot"');
+        expect(h).toContain('HubSpot card');
+        expect(s).toContain('data-preview-host="slack"');
+        expect(s).toContain('Slack message');
+        expect(g).toContain('data-preview-host="generic"');
+        const btn = view('Button', { label: 'B', style: 'primary', action: { type: 'userAction', workflow: 'w' } });
+        expect(viewToHtml(btn, { host: 'hubspot' })).toContain('background:#ff7a59');
+        expect(viewToHtml(btn, { host: 'generic' })).toContain('background:#2563eb');
+        expect(viewToHtml(v, { host: 'phone' })).toBe(viewToHtml(v, { host: 'generic' }));
+        expect(new Set([h, s, g]).size).toBe(3);
+        expect(viewToHtml(null, { host: 'hubspot' })).toContain('Nothing to show');
+    });
+
+    it('esc covers the five characters and non-strings', () => {
+        expect(esc(`<>&"'`)).toBe('&lt;&gt;&amp;&quot;&#39;');
+        expect(esc(null)).toBe('');
+        expect(esc({ a: '<' })).toBe('{&quot;a&quot;:&quot;&lt;&quot;}');
+    });
+
+    it('renders Slack mrkdwn: bold, italic, code, links, entities decoded once; nothing else becomes markup', () => {
+        const h = mrkdwnToHtml(':tada: *Acme &amp; Co* closed <https://example.com/d?a=1&amp;b=2|Open deal>\n_nice_ `x < y`');
+        expect(h).toContain('<strong>Acme &amp; Co</strong>');
+        expect(h).toContain('<a href="https://example.com/d?a=1&amp;b=2" target="_blank" rel="noopener noreferrer" style="color:#1264a3">Open deal</a>');
+        expect(h).toContain('<em>nice</em>');
+        expect(h).toContain('<code');
+        expect(h).toContain('x &lt; y');
+        expect(h).toContain('<br>');
+        const nasty = mrkdwnToHtml('<script>alert(1)</script> <javascript:alert(1)|x> <https://a.example|"><script>>');
+        expect(nasty).not.toMatch(/<script/i);
+        expect(nasty).not.toMatch(/javascript:/i);
+        // an http(s)-looking target that is not a clean URL is not linked either
+        const spaced = mrkdwnToHtml('<https://ok.example/a b|x> <https://ok.example/a"b|y>');
+        expect(spaced).not.toContain('href=');
+        expect(spaced).toContain('x');
+        expect(slackBlocksToHtml([{ type: 'image' }, null])).not.toMatch(/<script/);
+    });
+});
+
+describe('previewSurface', () => {
+    it('gives view, html and the host-specific description for a Slack surface, from sample records', async () => {
+        const def = example('fathom-hubspot-notion');
+        const { ports } = d.recordingPorts({ def, manifests });
+        const r = await d.previewSurface({ def, surfaceId: 'stage-approval', record: { metadata: {} }, ports, installation: { integrationId: 'int_9' } });
+        expect(r.surface).toMatchObject({ id: 'stage-approval', host: 'slack', placement: 'message.actions' });
+        expect(r.view.component).toBe('Stack');
+        expect(r.slack.blocks.map((b) => b.type)).toContain('section');
+        expect(r.html).toContain('data-preview-host="slack"');
+        expect(r.hubspot).toBeUndefined();
+        // an explicit host re-renders the same data for another one
+        const asHub = await d.previewSurface({ def, surfaceId: 'stage-approval', record: { metadata: {} }, ports, installation: {}, host: 'hubspot' });
+        expect(asHub.hubspot.type).toBe('Flex');
+        expect(asHub.slack).toBeUndefined();
+        await expect(d.previewSurface({ def, surfaceId: 'nope', ports, installation: {} })).rejects.toThrow('Unknown UI surface');
+    });
+});
+
+describe('previewWorkflow: a dry run', () => {
+    const installFor = (id, settings) => ({ integrationId: 'int_1', portalId: '55', workflows: { [id]: { settings } } });
+
+    it('captures the Slack post exactly as it would be sent, rendered, with the step it came from', async () => {
+        const def = example('hubspot-slack');
+        const r = await d.previewWorkflow({
+            def, workflowId: 'deal-won', manifests, installation: installFor('deal-won', { channel: 'C123' }),
+            event: { propertyName: 'dealstage', propertyValue: 'closedwon', objectId: '77' },
+            fixtures: { 'hubspot.deal.get': { id: '77', properties: { dealname: 'Acme renewal', amount: '12000' } }, 'hubspot.owner.get': { firstName: 'Dana' } },
+        });
+        expect(r.status).toBe('completed');
+        expect(r.sends).toHaveLength(1);
+        const send = r.sends[0];
+        expect(send).toMatchObject({ module: 'slack', capability: 'message.post', kind: 'write', stepId: 'slack.message.post#3', at: 'steps[3]' });
+        expect(send.args).toEqual({ channel: 'C123', text: ':tada: *Acme renewal* closed won for $12000. Nice work Dana! <https://app.hubspot.com/contacts/55/record/0-3/77|Open deal>' });
+        expect(send.rendered.slack).toEqual(send.args);
+        expect(send.rendered.html).toContain('<strong>Acme renewal</strong>');
+        expect(send.rendered.html).toContain('href="https://app.hubspot.com/contacts/55/record/0-3/77"');
+        expect(send.rendered.html).toContain('to C123');
+        // reads are listed (with the step ids the definition gave them) but are not "sends"
+        expect(r.calls.map((c) => [c.stepId, c.capability, c.kind])).toEqual([['deal', 'deal.get', 'read'], ['owner', 'owner.get', 'read'], ['slack.message.post#3', 'message.post', 'write']]);
+        expect(r.calls[0].rendered).toBeNull();
+    });
+
+    it('says so when a setting is not chosen yet, and renders blocks when the step sends them', async () => {
+        const def = example('hubspot-slack');
+        const r = await d.previewWorkflow({ def, workflowId: 'deal-won', manifests, installation: { portalId: '1' }, event: { propertyName: 'dealstage', propertyValue: 'closedwon', objectId: '7' } });
+        expect(r.sends[0].rendered.html).toContain('channel not chosen yet');
+        // blocks on a slack call
+        const withBlocks = JSON.parse(JSON.stringify(def));
+        withBlocks.workflows.find((w) => w.id === 'deal-won').steps.find((s) => s.use === 'slack.message.post').with.blocks = [{ type: 'header', text: { type: 'plain_text', text: 'Won <b>' } }, { type: 'section', text: { type: 'mrkdwn', text: '*hi* <https://example.com|there>' } }];
+        const b = await d.previewWorkflow({ def: withBlocks, workflowId: 'deal-won', manifests, installation: installFor('deal-won', { channel: 'C1' }), event: { propertyName: 'dealstage', propertyValue: 'closedwon', objectId: '7' } });
+        expect(b.sends[0].rendered.slack.blocks).toHaveLength(2);
+        expect(b.sends[0].rendered.html).toContain('Won &lt;b&gt;');
+        expect(b.sends[0].rendered.html).toContain('<strong>hi</strong>');
+    });
+
+    it('renders a non-Slack write as a "would call" card with escaped args, and the sample payload drives a webhook workflow with no event', async () => {
+        const def = example('phone-hubspot');
+        const r = await d.previewWorkflow({ def, workflowId: 'text-from-card', manifests, installation: { settings: { fromNumber: '+15550000000' } }, event: { input: { message: 'Hi <script>' } }, record: { properties: { phone: '+15551234567' } } });
+        const send = r.sends[0];
+        expect(send.args).toEqual({ from: '+15550000000', to: ['+15551234567'], content: 'Hi <script>' });
+        expect(send.rendered.html).toContain('Would call phone');
+        expect(send.rendered.html).toContain('Hi &lt;script&gt;');
+        expect(send.rendered.html).not.toMatch(/<script/i);
+        expect(send.rendered.slack).toBeUndefined();
+        // no event given: the manifest's sample payload for the trigger stands in, and it is enough for the workflow to act
+        const sample = await d.previewWorkflow({ def: example('calendly-salesforce'), workflowId: 'booking-to-event', manifests });
+        expect(sample.status).toBe('completed');
+        expect(sample.sends.length).toBe(2);
+        expect(sample.sends[0].args.fields).toMatchObject({ FirstName: 'Priya', Email: 'priya@acme.example', Company: 'Acme Corp' });
+        expect(sample.sends[1].rendered.html).toContain('Discovery call (30 min) with Priya Natarajan');
+    });
+
+    it('answers from fixture functions with the call args, and from the manifest shape when there is no fixture', async () => {
+        const def = example('hubspot-slack');
+        let seen;
+        const r = await d.previewWorkflow({
+            def, workflowId: 'deal-won', manifests, installation: installFor('deal-won', { channel: 'C1' }),
+            event: { propertyName: 'dealstage', propertyValue: 'closedwon', objectId: '5' },
+            fixtures: { 'hubspot.deal.get': (args, meta) => { seen = [args, meta]; return { id: args.id, properties: { dealname: `Deal ${args.id}` } }; } },
+        });
+        expect(seen).toEqual([{ id: '5' }, { module: 'hubspot', capability: 'deal.get' }]);
+        expect(r.sends[0].args.text).toContain('*Deal 5*');
+        // owner.get had no fixture and the manifest declares no owner object: an empty record, so the template falls back to "team"
+        expect(r.calls[1].output).toEqual({});
+        expect(r.sends[0].args.text).toContain('Nice work team!');
+        // deal.get with no fixture at all: the manifest's own shape, ids filled so `exists` checks proceed
+        const bare = await d.previewWorkflow({ def, workflowId: 'deal-won', manifests, installation: installFor('deal-won', { channel: 'C1' }), event: { propertyName: 'dealstage', propertyValue: 'closedwon', objectId: '5' } });
+        expect(bare.calls[0].output).toEqual(expect.objectContaining({ id: 'preview-deal-id' }));
+    });
+
+    it('records a call that fails (an unknown capability) with its error, and reports the failed run', async () => {
+        const def = example('hubspot-slack');
+        def.workflows.find((w) => w.id === 'deal-won').steps.splice(0, 0, { id: 'bad', use: 'hubspot.nothing.here' });
+        const r = await d.previewWorkflow({ def, workflowId: 'deal-won', manifests, installation: {}, event: { propertyName: 'dealstage', propertyValue: 'closedwon', objectId: '1' } });
+        expect(r.status).toBe('failed');
+        expect(r.error).toContain('hubspot.nothing.here is not declared');
+        expect(r.calls[0]).toMatchObject({ stepId: 'bad', capability: 'nothing.here', kind: 'unknown', error: 'not declared by the module manifest' });
+        expect(r.sends).toEqual([]);
+    });
+
+    it('shows an approval pause instead of running past it', async () => {
+        const def = example('hubspot-slack');
+        const w = def.workflows.find((x) => x.id === 'deal-won');
+        w.steps.splice(1, 0, { id: 'ok', use: 'approval', with: { prompt: 'Post <b>this</b> to #wins?' } });
+        const r = await d.previewWorkflow({ def, workflowId: 'deal-won', manifests, installation: {}, event: { propertyName: 'dealstage', propertyValue: 'closedwon', objectId: '1' } });
+        expect(r.status).toBe('waiting');
+        expect(r.waiting).toMatchObject({ kind: 'approval', prompt: 'Post <b>this</b> to #wins?' });
+        expect(r.waiting.html).toContain('Post &lt;b&gt;this&lt;/b&gt; to #wins?');
+        expect(r.sends).toEqual([]);
+    });
+
+    it('stubs code steps: recorded, never run', async () => {
+        const def = example('hubspot-slack');
+        def.workflows.find((w) => w.id === 'deal-won').steps.splice(0, 0, { id: 'c', use: 'code', with: { ref: 'pkg#boom@1.0.0', with: { a: 1 } } });
+        const r = await d.previewWorkflow({ def, workflowId: 'deal-won', manifests, installation: {}, event: { propertyName: 'dealstage', propertyValue: 'closedwon', objectId: '1' }, fixtures: { 'code:pkg#boom@1.0.0': { grouped: true } } });
+        expect(r.calls[0]).toMatchObject({ stepId: 'c', module: 'code', capability: 'pkg#boom@1.0.0', kind: 'code', args: { a: 1 }, output: { grouped: true } });
+        expect(r.sends.find((s) => s.kind === 'code')).toBeUndefined();
+    });
+
+    it('makes zero real calls: every workflow of every example, with real network entry points trapped', async () => {
+        const hits = [];
+        const trap = (name) => (...a) => { hits.push([name, String(a[0]?.href || a[0]?.host || a[0])]); throw new Error(`REAL CALL: ${name}`); };
+        const saved = { fetch: global.fetch, http: http.request, https: https.request };
+        global.fetch = trap('fetch'); http.request = trap('http'); https.request = trap('https');
+        let ran = 0;
+        let sends = 0;
+        try {
+            for (const def of d.loadExamples()) {
+                for (const w of def.workflows || []) {
+                    const r = await d.previewWorkflow({ def, workflowId: w.id, manifests, installation: { integrationId: 'i', portalId: '1' } });
+                    // a DryRunError would mean a call got past the recorder to the base ports' API function
+                    expect(JSON.stringify(r)).not.toContain('dry run');
+                    expect(r.calls.every((c) => !c.error || c.kind === 'unknown')).toBe(true);
+                    ran++; sends += r.sends.length;
+                }
+            }
+        } finally { global.fetch = saved.fetch; http.request = saved.http; https.request = saved.https; }
+        expect(hits).toEqual([]);
+        expect(ran).toBeGreaterThan(40);
+        expect(sends).toBeGreaterThan(5);
+    });
+
+    it('the ports under the recorder refuse any real API call', async () => {
+        const def = example('hubspot-slack');
+        const { ports, refusing } = d.recordingPorts({ def, manifests });
+        await expect(refusing.call('hubspot', 'deal.get', { id: '1' })).rejects.toThrow('dry run: hubspot.getDealById was not performed');
+        await expect(ports.call('hubspot', 'deal.get', { id: '1' })).resolves.toEqual(expect.objectContaining({ id: 'preview-deal-id' }));
+    });
+});
+
+describe('the mrkdwn template filter', () => {
+    const { renderTemplate } = require('../expressions');
+    it('record data in a Slack message neither formats nor pings; the definition\'s own markup still does', () => {
+        const hubspotSlack = JSON.parse(JSON.stringify(require('..').loadExamples().find((x) => x.id === 'hubspot-slack')));
+        const out = renderTemplate(hubspotSlack.templates['deal-won'], { steps: { deal: { id: '9', properties: { dealname: '*Big* <!channel> & co', amount: 5 } }, owner: { firstName: '_Sam_' } }, install: { portalId: 1 } });
+        expect(out).not.toContain('<!channel>');
+        expect(out).toContain('&lt;!channel&gt;');
+        expect(out).not.toMatch(/\*Big\*/);
+        expect(out.startsWith(':tada: *')).toBe(true);                 // the template's own bold survives
+        expect(out).toContain('<https://app.hubspot.com/contacts/1/record/0-3/9|Open deal>');
+    });
+});