feat(agent-debug): edit event data with compact forms

2026-09-16 14:57:15 +00:00 · 2026-09-06 01:57:47 +08:00
parent 2a46325232
commit 5d0657b1db
14 changed files with 916 additions and 245 deletions
@@ -0,0 +1,92 @@
+import { expect, test } from '@playwright/test';
+import { installLangBotApiMocks } from './fixtures/langbot-api';
+
+test('event data stays in sync across the compact form, JSON and the request', async ({
+  page,
+}) => {
+  await installLangBotApiMocks(page, {
+    authenticated: true,
+    withAdapterEvents: true,
+  });
+  await page.route(
+    '**/api/v1/agents/agent-workbench/debug/stream',
+    async (route) => {
+      await route.fulfill({
+        contentType: 'application/x-ndjson',
+        body:
+          JSON.stringify({ kind: 'completed', data: { final_text: 'Done' } }) +
+          '\n',
+      });
+    },
+  );
+  await page.goto('/home/agents?id=agent-workbench');
+  const panel = page.getByRole('region', { name: 'Event Debug' });
+  await panel
+    .getByRole('textbox', { name: 'Message content', exact: true })
+    .fill('Hello Alice');
+  await panel.getByRole('button', { name: 'Full JSON' }).click();
+  const json = panel.getByRole('textbox', { name: 'Full JSON' });
+  expect(JSON.parse(await json.inputValue()).text).toBe('Hello Alice');
+  await json.fill('{');
+  await expect(panel.getByRole('button', { name: 'Run test' })).toBeDisabled();
+  await expect(panel.getByRole('alert').last()).toContainText('valid JSON');
+  await json.fill(
+    JSON.stringify({
+      text: 'Edited in JSON',
+      user_name: 'Alice',
+      extra: { keep: true },
+    }),
+  );
+  await panel.getByRole('button', { name: 'Common fields' }).click();
+  await expect(
+    panel.getByRole('textbox', { name: 'Message content', exact: true }),
+  ).toHaveValue('Edited in JSON');
+  await panel.getByRole('textbox', { name: 'User name' }).fill('Bob');
+  await panel.getByRole('button', { name: 'Full JSON' }).click();
+  expect(JSON.parse(await json.inputValue())).toMatchObject({
+    user_name: 'Bob',
+    extra: { keep: true },
+  });
+
+  await panel.getByRole('combobox', { name: 'Event type' }).click();
+  await page
+    .getByRole('option')
+    .filter({ hasText: 'group.member_joined' })
+    .click();
+  await expect(
+    panel.getByRole('textbox', { name: 'Message content', exact: true }),
+  ).toHaveCount(0);
+  await expect(
+    panel.getByRole('textbox', { name: 'Event summary' }),
+  ).toHaveCount(0);
+  await panel.getByRole('textbox', { name: 'Member name' }).fill('Carol');
+  await panel.getByRole('textbox', { name: 'Member ID' }).fill('member-42');
+  await panel.getByRole('textbox', { name: 'Group ID' }).fill('group-42');
+  const request = page.waitForRequest(
+    (req) => req.method() === 'POST' && req.url().endsWith('/debug/stream'),
+  );
+  await panel.getByRole('button', { name: 'Run test' }).click();
+  expect((await request).postDataJSON()).toMatchObject({
+    event_type: 'group.member_joined',
+    text: '',
+    data: {
+      member_name: 'Carol',
+      member_id: 'member-42',
+      group_id: 'group-42',
+    },
+  });
+  await expect(panel.getByText('Done', { exact: true })).toBeVisible();
+  await page.setViewportSize({ width: 1280, height: 650 });
+  await panel.getByRole('button', { name: 'Full JSON' }).click();
+  await panel.locator('summary').filter({ hasText: 'Mock scenario' }).click();
+  await expect(
+    panel.getByRole('button', { name: 'Run test' }),
+  ).toBeInViewport();
+
+  await panel.getByRole('combobox', { name: 'Event type' }).click();
+  await page.getByRole('option').filter({ hasText: 'Custom event' }).click();
+  await expect(panel.getByRole('textbox', { name: 'Full JSON' })).toBeVisible();
+  await expect(
+    panel.getByRole('button', { name: 'Common fields' }),
+  ).toHaveCount(0);
+});