archy/packages/app/e2e/content-surfaces.spec.ts

import { test, expect } from '@playwright/test'

test.describe('Content surfaces', () => {
  test('empty state shows when no conversation selected', async ({ page }) => {
    await page.goto('/')
    const main = page.locator('main.path-glass-card')
    await expect(main).toBeVisible()
  })

  test('chat can receive input', async ({ page }) => {
    await page.goto('/')
    await page.waitForLoadState('networkidle')
    const input = page.getByPlaceholder(/Message AIUI/)
    await input.click()
    await input.pressSequentially('Recommend some films')
    await expect(input).toHaveValue('Recommend some films', { timeout: 3000 })
  })

  test('films surface: films conversation loads and shows film cards', async ({ page }) => {
    await Promise.all([
      page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
      page.goto('/'),
    ])
    await expect(page.getByText('Recommend some sci-fi films')).toBeVisible({ timeout: 10000 })
    await page.getByRole('button', { name: /View all \d+ films/i }).click()
    await expect(page.locator('main').getByText('Blade Runner 2049').first()).toBeVisible({ timeout: 5000 })
  })

  test('films surface: clicking assistant bubble opens panel', async ({ page }) => {
    await Promise.all([
      page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
      page.goto('/'),
    ])
    await expect(page.getByText('Recommend some sci-fi films')).toBeVisible({ timeout: 10000 })
    await page.locator('.path-glass-bubble').filter({ hasText: /Blade Runner|Arrival|Dune/ }).first().click()
    await expect(page.locator('main').getByText('Blade Runner 2049').first()).toBeVisible({ timeout: 5000 })
  })

  test('magazine surface: BIP brief shows sections', async ({ page }) => {
    await Promise.all([
      page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
      page.goto('/'),
    ])
    await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
    await page.getByRole('button', { name: 'BIP 110 brief' }).click()
    await expect(page.getByText(/BIP 110|Pro camp|Summary/i).first()).toBeVisible({ timeout: 8000 })
    await page.getByRole('button', { name: 'View brief' }).click()
    await expect(page.getByText(/AI Brief|Summary|Pro camp/i).first()).toBeVisible({ timeout: 5000 })
  })

  test('songs surface: songs conversation shows song cards', async ({ page }) => {
    await Promise.all([
      page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
      page.goto('/'),
    ])
    await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
    await page.getByRole('button', { name: 'Music recommendations' }).click()
    await expect(page.getByText('Never Meant').first()).toBeVisible({ timeout: 8000 })
    await page.getByRole('button', { name: /View all \d+ songs/i }).click()
    await expect(page.locator('main').getByText('Never Meant').first()).toBeVisible({ timeout: 5000 })
  })

  test('podcasts surface: podcasts conversation shows podcast cards', async ({ page }) => {
    await Promise.all([
      page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
      page.goto('/'),
    ])
    await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
    await page.getByRole('button', { name: 'Bitcoin podcasts' }).click()
    await expect(page.getByText('What Bitcoin Did').first()).toBeVisible({ timeout: 8000 })
    await page.getByRole('button', { name: /View all \d+ podcasts/i }).click()
    await expect(page.locator('main').getByText('What Bitcoin Did').first()).toBeVisible({ timeout: 5000 })
  })

  test('websites surface: websites tab shows link cards', async ({ page }) => {
    await Promise.all([
      page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
      page.goto('/'),
    ])
    await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
    await page.getByRole('button', { name: 'Bitcoin resources' }).click()
    await expect(page.getByText('Bitcoin Magazine').first()).toBeVisible({ timeout: 8000 })
    await page.getByRole('button', { name: /View all \d+ websites/i }).click()
    await expect(page.locator('main').getByText('Bitcoin Magazine').first()).toBeVisible({ timeout: 5000 })
  })

  test('news surface: news conversation shows articles', async ({ page }) => {
    await Promise.all([
      page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
      page.goto('/'),
    ])
    await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
    await page.getByRole('button', { name: 'Latest Bitcoin news' }).click()
    await expect(page.getByText(/Bitcoin hits|ETF inflows/i).first()).toBeVisible({ timeout: 8000 })
    await page.getByRole('button', { name: /View all \d+ articles/i }).click()
    await expect(page.locator('main').getByText(/Bitcoin hits|ETF inflows/i).first()).toBeVisible({ timeout: 5000 })
  })
})