import { expect, test } from '@playwright/test'
import { authenticate, mockChatSocket, mockHermesApi, TEST_ACCESS_KEY } from './fixtures'

test('thinking tool rows fill the chat width and shrink without overflowing', async ({ page }) => {
  await page.setViewportSize({ width: 1920, height: 1080 })
  await authenticate(page, TEST_ACCESS_KEY, 'research')
  await mockHermesApi(page)
  await mockChatSocket(page)
  await page.goto('/#/hermes/chat')
  await page.locator('textarea.input-textarea').fill('Inspect the working directory')
  await page.getByRole('button', { name: 'Send', exact: true }).click()
  await page.waitForFunction(() => (window as any).__PW_CHAT_SOCKET__?.emitted.some((event: any) => event.event === 'run'))
  await page.evaluate(() => {
    const state = (window as any).__PW_CHAT_SOCKET__
    const sid = state.emitted.find((event: any) => event.event === 'run').payload.session_id
    const common = { session_id: sid, run_id: 'width-run' }
    state.latest.__trigger('run.started', { ...common, event: 'run.started' })
    state.latest.__trigger('tool.started', {
      ...common, event: 'tool.started', tool_call_id: 'width-tool', tool: 'terminal',
      preview: 'Read a long project path and inspect the current repository state '.repeat(30),
      arguments: JSON.stringify({ command: 'git status --short' }),
    })
  })
  const panel = page.locator('.tool-calls-panel')
  const row = panel.locator('.tool-call-item').first()
  await expect(row).toBeVisible()
  for (const width of [1920, 900, 390]) {
    await page.setViewportSize({ width, height: 1080 })
    await expect.poll(async () => {
      const panelBox = await panel.boundingBox()
      const rowBox = await row.boundingBox()
      return panelBox && rowBox ? Math.abs(rowBox.width - panelBox.width) : Infinity
    }).toBeLessThan(2)
    const fits = await panel.evaluate(element => element.scrollWidth <= element.clientWidth + 1)
    expect(fits).toBe(true)
    const box = await row.boundingBox()
    expect(box!.x + box!.width).toBeLessThanOrEqual(width)
  }
})