@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/cadence/cadence-web/tests/contacts/filter-by-tag.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { TEST_CONSTANTS } from '../constants'
+
+const orgId = TEST_CONSTANTS.orgId
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({
+    id: 9100,
+    organizationId: orgId,
+    firstName: 'Tagged',
+    lastName: 'Contact',
+    tags: ['Lead']
+  }),
+  H.ContactSeed({
+    id: 9101,
+    organizationId: orgId,
+    firstName: 'Untagged',
+    lastName: 'Contact',
+    tags: []
+  })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('filter contacts by tag', async ({ page }) => {
+  await page.goto('/contacts')
+  await page.waitForLoadState('networkidle')
+
+  // Both contacts should be visible initially
+  await expect(page.getByRole('link', { name: 'Tagged Contact', exact: true })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Untagged Contact' })).toBeVisible()
+
+  // Open tag filter dropdown and select "Lead"
+  await page.getByRole('button', { name: /Tags/ }).click()
+  await page.getByRole('option', { name: 'Lead' }).click()
+
+  // Only tagged contact should be shown
+  await expect(page.getByRole('link', { name: 'Tagged Contact', exact: true })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Untagged Contact' })).not.toBeVisible()
+
+  // Remove the filter by reopening and clearing
+  await page.getByRole('button', { name: /Tags/ }).click()
+  await page.getByRole('option', { name: 'Clear' }).click()
+
+  // Both contacts should be visible again
+  await expect(page.getByRole('link', { name: 'Tagged Contact', exact: true })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Untagged Contact' })).toBeVisible()
+})

package/skills/maestro-examples/references/cadence/cadence-web/tests/contacts/global-search.spec.ts

@@ -0,0 +1,57 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { TEST_CONSTANTS } from '../constants'
+
+const orgId = TEST_CONSTANTS.orgId
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({ id: 9400, organizationId: orgId, firstName: 'Unique', lastName: 'Xylophone' }),
+  H.ContactSeed({ id: 9401, organizationId: orgId, firstName: 'Another', lastName: 'Person' })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('global search filters contacts and clearing restores all', async ({ page }) => {
+  await page.goto('/contacts')
+  await page.waitForLoadState('networkidle')
+
+  // Both contacts visible
+  await expect(page.getByText('Unique Xylophone')).toBeVisible()
+  await expect(page.getByText('Another Person')).toBeVisible()
+
+  // Type a unique last name in the search box
+  const searchInput = page.getByPlaceholder('Search contacts...')
+  await searchInput.fill('Xylophone')
+  await page.keyboard.press('Enter')
+
+  // Only matching contact shown
+  await expect(page.getByText('Unique Xylophone')).toBeVisible()
+  await expect(page.getByText('Another Person')).not.toBeVisible()
+
+  // Clear search
+  await searchInput.clear()
+  await page.keyboard.press('Enter')
+
+  // Both contacts visible again
+  await expect(page.getByText('Unique Xylophone')).toBeVisible()
+  await expect(page.getByText('Another Person')).toBeVisible()
+})

package/skills/maestro-examples/references/cadence/cadence-web/tests/contacts/sort-contacts.spec.ts

@@ -0,0 +1,60 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { TEST_CONSTANTS } from '../constants'
+
+const orgId = TEST_CONSTANTS.orgId
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({ id: 9300, organizationId: orgId, firstName: 'Alice', lastName: 'Zephyr' }),
+  H.ContactSeed({ id: 9301, organizationId: orgId, firstName: 'Charlie', lastName: 'Middle' }),
+  H.ContactSeed({ id: 9302, organizationId: orgId, firstName: 'Bob', lastName: 'Yates' })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('sort contacts by name ascending and descending', async ({ page }) => {
+  await page.goto('/contacts')
+  await page.waitForLoadState('networkidle')
+
+  // Sort by Name Z-A (descending)
+  await page.getByRole('button', { name: 'Sort' }).click()
+  await page.getByRole('option', { name: 'Name Z-A' }).click()
+
+  // Wait for sort to apply
+  await page.waitForLoadState('networkidle')
+
+  // First data row should be "Charlie Middle" (Z-A by first+last name)
+  const firstLinkDesc = page.getByRole('link').filter({ hasText: /Zephyr|Middle|Yates/ }).first()
+  const descName = await firstLinkDesc.textContent()
+
+  // Sort by Name A-Z (ascending)
+  await page.getByRole('button', { name: 'Sort' }).click()
+  await page.getByRole('option', { name: 'Name A-Z' }).click()
+
+  await page.waitForLoadState('networkidle')
+
+  const firstLinkAsc = page.getByRole('link').filter({ hasText: /Zephyr|Middle|Yates/ }).first()
+  const ascName = await firstLinkAsc.textContent()
+
+  // The order should have changed between the two sorts
+  expect(descName).not.toEqual(ascName)
+})

package/skills/maestro-examples/references/cadence/cadence-web/tests/contacts/tags.spec.ts

@@ -0,0 +1,85 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { TEST_CONSTANTS } from '../constants'
+
+const contactId = 8800
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({
+    id: contactId,
+    organizationId: TEST_CONSTANTS.orgId,
+    firstName: 'Dana',
+    lastName: 'Lee',
+    email: 'dana.lee@example.com',
+    tags: []
+  })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('add and remove tags on a contact', async ({ page }) => {
+  await page.goto(`/contacts/${contactId}`)
+  await page.waitForLoadState('networkidle')
+
+  // Click "Edit" to open the tag editor
+  await page.getByRole('button', { name: 'Edit' }).click()
+
+  // The tag input should be visible
+  const tagInput = page.getByLabel('Tags')
+  await expect(tagInput).toBeVisible()
+
+  // Type "Lead" and press Enter to add it
+  await tagInput.fill('Lead')
+  await tagInput.press('Enter')
+
+  // Type "VIP" and press Enter to add it (placeholder is gone now, but input still exists)
+  await tagInput.fill('VIP')
+  await tagInput.press('Enter')
+
+  // Save the tags
+  await page.getByRole('button', { name: 'Save Tags' }).click()
+
+  // Wait for the page to reload with updated data
+  await page.waitForLoadState('networkidle')
+
+  // Both tags should be shown on the detail page
+  await expect(page.getByText('Lead')).toBeVisible()
+  await expect(page.getByText('VIP')).toBeVisible()
+
+  // Now remove "Lead": open the tag editor again
+  await page.getByRole('button', { name: 'Edit' }).click()
+
+  // Click the remove button for "Lead"
+  const leadTag = page.locator('span.rounded-full', { hasText: 'Lead' }).first()
+  await leadTag.getByRole('button', { name: 'Remove' }).click()
+
+  // Save
+  await page.getByRole('button', { name: 'Save Tags' }).click()
+
+  // Wait for the page to reload with updated data
+  await page.waitForLoadState('networkidle')
+
+  // Only "VIP" should remain as a tag chip
+  await expect(page.getByText('VIP').first()).toBeVisible()
+  // "Lead" should no longer be visible
+  await expect(page.getByText('Lead')).not.toBeVisible()
+})

package/skills/maestro-examples/references/cadence/cadence-web/tests/contacts/view-detail.spec.ts

@@ -0,0 +1,58 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { TEST_CONSTANTS } from '../constants'
+
+const contactId = 8600
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({
+    id: contactId,
+    organizationId: TEST_CONSTANTS.orgId,
+    firstName: 'Bob',
+    lastName: 'Williams',
+    email: 'bob.williams@example.com',
+    phone: '(555) 987-6543',
+    jobTitle: 'Sales Director',
+    tags: ['Lead', 'Enterprise']
+  })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('view contact detail page shows all fields and tags', async ({ page }) => {
+  await page.goto('/contacts')
+  await page.waitForLoadState('networkidle')
+
+  // Click the contact row to navigate to detail
+  await page.getByText('Bob Williams').click()
+  await page.waitForURL(`/contacts/${contactId}`)
+
+  // Verify all contact fields
+  await expect(page.getByRole('heading', { name: 'Bob Williams' })).toBeVisible()
+  await expect(page.getByText('bob.williams@example.com')).toBeVisible()
+  await expect(page.getByText('(555) 987-6543')).toBeVisible()
+  await expect(page.getByText('Sales Director')).toBeVisible()
+
+  // Verify tags
+  await expect(page.getByText('Lead')).toBeVisible()
+  await expect(page.getByText('Enterprise')).toBeVisible()
+})

package/skills/maestro-examples/references/cadence/cadence-web/tests/interactions/delete-interaction.spec.ts

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { instantFns } from 'iso-fns'
+import { TEST_CONSTANTS } from '../constants'
+
+const orgId = TEST_CONSTANTS.orgId
+const userId = TEST_CONSTANTS.userId
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({ id: 9800, organizationId: orgId, firstName: 'Delete', lastName: 'Target' }),
+  H.InteractionSeed({
+    id: 9800,
+    contactId: 9800,
+    userId,
+    type: 'note',
+    body: '<p>Interaction to delete</p>',
+    date: instantFns.now()
+  })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('delete an interaction from a contact', async ({ page }) => {
+  await page.goto('/contacts/9800')
+  await page.waitForLoadState('networkidle')
+
+  // Verify the interaction is visible
+  await expect(page.getByText('Interaction to delete')).toBeVisible()
+
+  // Click "Delete" on the interaction - scope to the interaction card
+  const interactionCard = page.locator('.border-neutral-200').filter({ hasText: 'Interaction to delete' })
+  await interactionCard.getByRole('button', { name: 'Delete' }).click()
+
+  // Confirm deletion
+  await expect(page.getByText('Delete this interaction?')).toBeVisible()
+  await page.getByRole('button', { name: 'Confirm' }).click()
+
+  // The interaction should be removed
+  await expect(page.getByText('Interaction to delete')).not.toBeVisible()
+})

package/skills/maestro-examples/references/cadence/cadence-web/tests/interactions/edit-interaction.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { instantFns } from 'iso-fns'
+import { TEST_CONSTANTS } from '../constants'
+
+const orgId = TEST_CONSTANTS.orgId
+const userId = TEST_CONSTANTS.userId
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({ id: 9700, organizationId: orgId, firstName: 'Edit', lastName: 'Target' }),
+  H.InteractionSeed({
+    id: 9700,
+    contactId: 9700,
+    userId,
+    type: 'note',
+    body: '<p>Original note body</p>',
+    date: instantFns.now()
+  })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('edit an existing interaction', async ({ page }) => {
+  await page.goto('/contacts/9700')
+  await page.waitForLoadState('networkidle')
+
+  // Verify the original interaction is visible
+  await expect(page.getByText('Original note body')).toBeVisible()
+
+  // Click "Edit" on the interaction - scope to the interaction card
+  const interactionCard = page.locator('.border-neutral-200').filter({ hasText: 'Original note body' })
+  await interactionCard.getByRole('button', { name: 'Edit' }).click()
+
+  // The editor should appear with the existing content
+  const editor = page.locator('.ProseMirror')
+  await expect(editor).toBeVisible()
+
+  // Clear and update the body
+  await editor.click()
+  await page.keyboard.press('Meta+a')
+  await page.keyboard.type('Updated note body with new info')
+
+  // Save changes
+  await page.getByRole('button', { name: 'Save Changes' }).click()
+
+  // Verify the updated body appears
+  await expect(page.getByText('Updated note body with new info')).toBeVisible()
+  await expect(page.getByText('Original note body')).not.toBeVisible()
+})

package/skills/maestro-examples/references/cadence/cadence-web/tests/interactions/log-email.spec.ts

@@ -0,0 +1,57 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { TEST_CONSTANTS } from '../constants'
+
+const orgId = TEST_CONSTANTS.orgId
+const userId = TEST_CONSTANTS.userId
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({ id: 9500, organizationId: orgId, firstName: 'Email', lastName: 'Target' })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('log an email interaction on a contact', async ({ page }) => {
+  await page.goto('/contacts/9500')
+  await page.waitForLoadState('networkidle')
+
+  // Click "Log Email" button
+  await page.getByRole('button', { name: 'Log Email' }).click()
+
+  // Fill subject
+  await page.getByLabel('Subject').fill('Follow-up meeting')
+
+  // Fill body in rich text editor (Tiptap contenteditable)
+  const editor = page.locator('.ProseMirror')
+  await editor.click()
+  await editor.fill('Discussed next steps for the project.')
+
+  // Submit - use type="submit" to distinguish from the toggle button
+  await page.locator('button[type="submit"]', { hasText: 'Log Email' }).click()
+
+  // Wait for the form to close and the interaction to appear
+  await expect(page.getByText('Follow-up meeting')).toBeVisible()
+  await expect(page.getByText('Discussed next steps for the project.')).toBeVisible()
+
+  // Type badge should show "Email"
+  await expect(page.getByText('Email', { exact: true }).first()).toBeVisible()
+})

package/skills/maestro-examples/references/cadence/cadence-web/tests/interactions/log-note.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { TEST_CONSTANTS } from '../constants'
+
+const orgId = TEST_CONSTANTS.orgId
+const userId = TEST_CONSTANTS.userId
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({ id: 9600, organizationId: orgId, firstName: 'Note', lastName: 'Target' })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('log a note interaction on a contact', async ({ page }) => {
+  await page.goto('/contacts/9600')
+  await page.waitForLoadState('networkidle')
+
+  // Click "Log Note" button
+  await page.getByRole('button', { name: 'Log Note' }).click()
+
+  // No subject field for notes
+  await expect(page.getByLabel('Subject')).not.toBeVisible()
+
+  // Fill body in rich text editor
+  const editor = page.locator('.ProseMirror')
+  await editor.click()
+  await editor.fill('Spoke with contact about Q2 plans.')
+
+  // Submit - use type="submit" to distinguish from the toggle button
+  await page.locator('button[type="submit"]', { hasText: 'Log Note' }).click()
+
+  // Wait for the interaction to appear
+  await expect(page.getByText('Spoke with contact about Q2 plans.')).toBeVisible()
+
+  // Type badge should show "Note"
+  await expect(page.getByText('Note', { exact: true }).first()).toBeVisible()
+})

package/skills/maestro-examples/references/cadence/cadence-web/tests/interactions/rich-text-formatting.spec.ts

@@ -0,0 +1,97 @@
+import { test, expect } from '@playwright/test'
+import { H } from '@cadence/services'
+import { TEST_CONSTANTS } from '../constants'
+
+const orgId = TEST_CONSTANTS.orgId
+const userId = TEST_CONSTANTS.userId
+
+const seedData = H.SeedPipe(
+  H.OrganizationSeed({
+    id: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.orgName,
+    slug: TEST_CONSTANTS.orgSlug
+  }),
+  H.UserSeed({
+    id: TEST_CONSTANTS.userId,
+    organizationId: TEST_CONSTANTS.orgId,
+    name: TEST_CONSTANTS.userName,
+    email: TEST_CONSTANTS.email,
+    passwordHash: TEST_CONSTANTS.passwordHash,
+    role: 'admin'
+  }),
+  H.ContactSeed({ id: 10400, organizationId: orgId, firstName: 'RichText', lastName: 'Target' })
+)
+
+test.beforeAll(async () => {
+  await seedData.setup()
+})
+
+test.afterAll(async () => {
+  await seedData.teardown()
+})
+
+test('rich text formatting produces correct HTML tags', async ({ page }) => {
+  await page.goto('/contacts/10400')
+  await page.waitForLoadState('networkidle')
+
+  // Open email form
+  await page.getByRole('button', { name: 'Log Email' }).click()
+
+  // Fill subject
+  await page.getByLabel('Subject').fill('Formatted email')
+
+  // Focus the rich text editor
+  const editor = page.locator('.ProseMirror')
+  await editor.click()
+
+  // Type bold text: click Bold toolbar button, type, click Bold again to turn off
+  await page.locator('button[title="Bold"]').click()
+  await editor.pressSequentially('Bold text')
+  await page.locator('button[title="Bold"]').click()
+  await page.keyboard.press('Enter')
+
+  // Type H2: click H2 toolbar button, type
+  await page.locator('button[title="Heading 2"]').click()
+  await editor.pressSequentially('Section Heading')
+  await page.keyboard.press('Enter')
+
+  // Type bullet list
+  await page.locator('button[title="Bullet List"]').click()
+  await editor.pressSequentially('List item one')
+  await page.keyboard.press('Enter')
+  await editor.pressSequentially('List item two')
+  // Exit list
+  await page.keyboard.press('Enter')
+  await page.keyboard.press('Enter')
+
+  // Add a link: type some text, select it, add link
+  await editor.pressSequentially('Visit our site')
+  // Select the text we just typed
+  for (let i = 0; i < 14; i++) await page.keyboard.press('Shift+ArrowLeft')
+  await page.locator('button[title="Link"]').click()
+  await page.locator('input[type="url"]').fill('https://example.com')
+  await page.locator('button', { hasText: 'Apply' }).click()
+
+  // Submit the email - use type="submit" to distinguish from the toggle button
+  await page.locator('button[type="submit"]', { hasText: 'Log Email' }).click()
+
+  // Wait for interaction to render
+  await expect(page.getByText('Formatted email')).toBeVisible()
+
+  // Check the rendered HTML in the interaction body
+  const interactionBody = page.locator('.prose').last()
+
+  // Verify strong tag
+  await expect(interactionBody.locator('strong')).toBeVisible()
+
+  // Verify h2 tag
+  await expect(interactionBody.locator('h2')).toBeVisible()
+
+  // Verify ul/li tags
+  await expect(interactionBody.locator('ul')).toBeVisible()
+  await expect(interactionBody.locator('li').first()).toBeVisible()
+
+  // Verify anchor tag with href
+  const link = interactionBody.locator('a[href="https://example.com"]')
+  await expect(link).toBeVisible()
+})