feat(email): preview provider tokens with labeled sample values (Issue #70 Slice 3)

[TheAggressive]

Slice 3 of #70. Builds on Slice 2 (#91: canonical token resolution and snapshot provenance). This does not close #70.

What this slice does

The compiled preview showed provider-resolved tokens as raw {{cb:...}} text. The preview can now show a clearly labeled sample view with synthetic values, while the canonical artifact stays exactly as it is.

• Domain/Email/Token/Token_Preview (pure) derives the sample view from a successful artifact, using each token's registered preview behavior:

  Behavior	Tokens	Sample view
  sample	subscriber.first_name, subscriber.last_name, campaign.view_online_url, campaign.unsubscribe_url	Alex, Sample, https://example.com/campaignbridge-preview/...
  omit	subscriber.email	removed
  literal	none yet	left canonical

• Sample values are constants. Nothing reads subscriber data, options, or providers. URLs use the reserved example.com domain.
• Replacement is exact-match. It is safe because feat(email): resolve and preserve canonical tokens (Issue #70 Slice 2) #91's provenance invariant guarantees that every token left in a successful artifact is registered and was authored.
• A sample-previewed provider token without a sample value fails at construction. A parity test keeps SAMPLE_VALUES in step with the registry.

Artifact stays canonical

POST /campaignbridge/v1/preview adds one field, sample: { html, text }, or null when the compile failed or no token needs a sample. html, text, and fingerprint are unchanged. So:

• preview and download stay byte-identical;
• matches_review() fingerprints are unaffected;
• COMPILER_VERSION is unchanged (output is identical).

Editor preview

The preview modal shows a Personalization toggle, Sample values / Tokens, only when a sample view exists. It defaults to samples and shows a note: "Sample values stand in for each subscriber's data. Source and download keep the tokens." The iframe title names the sample view for assistive tech. The Source pane always shows the canonical HTML.

Tests

• Unit Token_Preview_Test: sample/registry parity, reserved domain, the compiled artifact's sample view (HTML escaping, VML + HTML button hrefs, plain text), the artifact left unchanged, literal/omit behavior, construction failure, and CampaignBridge-resolved tokens left alone.
• Integration Preview_Route_Test: sample is null without tokens and on failure, and it personalizes while html and text keep the tokens.
• Jest: the hook keeps canonical and sample HTML separate; the modal toggle, labeling, and the Source pane stay canonical.
• E2E preview-personalization.spec.ts: a real editor → preview → sample → tokens round trip.

Not in this slice

• Organization tokens in preview: there is still no canonical source for organization.* values, so templates using them report token.unresolved in preview. Supplying sample organization values would put samples into the artifact and break byte-identity, so this waits for that source.
• Editor token insertion UX, compliance-token validation, provider mapping (roadmap(M3): complete the Mailchimp end-to-end delivery vertical slice #64/feat(M3): expand provider capabilities and complete Mailchimp discovery contracts #76).

🤖 Generated with Claude Code