From 8b63cc0281f3c76bd41a2f1598e14adb5741854e Mon Sep 17 00:00:00 2001
From: RockChinQ <rockchinq@gmail.com>
Date: Wed, 26 Aug 2026 14:12:52 +0800
Subject: [PATCH] fix(events): show raw codes in test selectors

---
 .../agents/components/AgentDebugPanel.tsx     | 11 ++++++++--
 .../bot-form/EventBindingsEditor.tsx          | 20 +++++++++++++++----
 .../EventSelectOptionContent.tsx              | 18 +++++++++++++++++
 web/tests/e2e/crud-smoke.spec.ts              | 13 +++++++++++-
 .../e2e/processor-detail-workbench.spec.ts    |  4 ++++
 5 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 web/src/app/home/components/event-patterns/EventSelectOptionContent.tsx

diff --git a/web/src/app/home/agents/components/AgentDebugPanel.tsx b/web/src/app/home/agents/components/AgentDebugPanel.tsx
index d008670b5..81d180178 100644
--- a/web/src/app/home/agents/components/AgentDebugPanel.tsx
+++ b/web/src/app/home/agents/components/AgentDebugPanel.tsx
@@ -36,6 +36,7 @@ import {
   eventPatternLabel,
   groupEventPatterns,
 } from '@/app/home/components/event-patterns/event-pattern-groups';
+import EventSelectOptionContent from '@/app/home/components/event-patterns/EventSelectOptionContent';
 
 interface AgentDebugPanelProps {
   agentId: string;
@@ -303,7 +304,10 @@ export default function AgentDebugPanel({
                         description={eventPatternDescription(event, t)}
                         className="py-2"
                       >
-                        {eventPatternLabel(event, t)}
+                        <EventSelectOptionContent
+                          event={event}
+                          label={eventPatternLabel(event, t)}
+                        />
                       </SelectItem>
                     ))}
                   </SelectGroup>
@@ -316,7 +320,10 @@ export default function AgentDebugPanel({
                       description={t('bots.eventDescriptions.custom')}
                       className="py-2"
                     >
-                      {t('agents.debugCustomEvent')}
+                      <EventSelectOptionContent
+                        event="custom.event"
+                        label={t('agents.debugCustomEvent')}
+                      />
                     </SelectItem>
                   </SelectGroup>
                 )}
diff --git a/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx b/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx
index f794d3335..cf11290b4 100644
--- a/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx
+++ b/web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx
@@ -120,6 +120,7 @@ import {
   eventNamespaces,
   groupEventPatterns,
 } from '@/app/home/components/event-patterns/event-pattern-groups';
+import EventSelectOptionContent from '@/app/home/components/event-patterns/EventSelectOptionContent';
 
 export const PIPELINE_DISCARD = '__discard__';
 
@@ -1050,18 +1051,29 @@ function RouteDryRunDialog({
                     {t('bots.dryRunEventType')}
                   </label>
                   <Select value={eventType} onValueChange={setEventType}>
-                    <SelectTrigger className="h-9">
+                    <SelectTrigger
+                      className="h-auto min-h-9 w-full"
+                      aria-label={t('bots.dryRunEventType')}
+                    >
                       <SelectValue />
                     </SelectTrigger>
-                    <SelectContent>
+                    <SelectContent className="w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-2rem)]">
                       {groupEventPatterns(eventOptions).map((group) => (
                         <SelectGroup key={group.namespace}>
                           <SelectLabel>
                             {eventGroupLabel(group.namespace, t)}
                           </SelectLabel>
                           {group.patterns.map((event) => (
-                            <SelectItem key={event} value={event}>
-                              {eventLabel(event, t)}
+                            <SelectItem
+                              key={event}
+                              value={event}
+                              description={eventDescription(event, t)}
+                              className="py-2"
+                            >
+                              <EventSelectOptionContent
+                                event={event}
+                                label={eventLabel(event, t)}
+                              />
                             </SelectItem>
                           ))}
                         </SelectGroup>
diff --git a/web/src/app/home/components/event-patterns/EventSelectOptionContent.tsx b/web/src/app/home/components/event-patterns/EventSelectOptionContent.tsx
new file mode 100644
index 000000000..2d7f39103
--- /dev/null
+++ b/web/src/app/home/components/event-patterns/EventSelectOptionContent.tsx
@@ -0,0 +1,18 @@
+interface EventSelectOptionContentProps {
+  event: string;
+  label: string;
+}
+
+export default function EventSelectOptionContent({
+  event,
+  label,
+}: EventSelectOptionContentProps) {
+  return (
+    <span className="flex min-w-0 items-center gap-2">
+      <span className="truncate font-medium">{label}</span>
+      <code className="shrink-0 rounded-sm bg-muted px-1 py-0.5 font-mono text-[10px] font-normal text-muted-foreground">
+        {event}
+      </code>
+    </span>
+  );
+}
diff --git a/web/tests/e2e/crud-smoke.spec.ts b/web/tests/e2e/crud-smoke.spec.ts
index c37880b2b..681497897 100644
--- a/web/tests/e2e/crud-smoke.spec.ts
+++ b/web/tests/e2e/crud-smoke.spec.ts
@@ -474,13 +474,24 @@ test.describe('bot advanced flows', () => {
     await expect(
       routeDialog.getByRole('button', { name: 'Run full test' }),
     ).toBeVisible();
-    await routeDialog.getByRole('combobox').first().click();
+    const routeEventPicker = routeDialog.getByRole('combobox', {
+      name: 'Event type',
+    });
+    await expect(routeEventPicker).toContainText('message.received');
+    await routeEventPicker.click();
     await expect(
       page.getByText('Messages', { exact: true }).last(),
     ).toBeVisible();
     await expect(
       page.getByText('Groups', { exact: true }).last(),
     ).toBeVisible();
+    const receivedMessageOption = page
+      .getByRole('option')
+      .filter({ hasText: 'Message received' });
+    await expect(receivedMessageOption).toContainText('message.received');
+    await expect(receivedMessageOption).toContainText(
+      'A user or group sends a new message to the bot.',
+    );
     await page.keyboard.press('Escape');
 
     await routeDialog.getByRole('button', { name: 'Preview match' }).click();
diff --git a/web/tests/e2e/processor-detail-workbench.spec.ts b/web/tests/e2e/processor-detail-workbench.spec.ts
index 343947a29..41a6abc34 100644
--- a/web/tests/e2e/processor-detail-workbench.spec.ts
+++ b/web/tests/e2e/processor-detail-workbench.spec.ts
@@ -30,12 +30,16 @@ test.describe('processor detail workbench', () => {
     const debugEventPicker = debugPanel.getByRole('combobox', {
       name: 'Event type',
     });
+    await expect(debugEventPicker).toContainText('message.received');
     await debugEventPicker.click();
     await expect(page.getByRole('group', { name: 'Messages' })).toBeVisible();
     await expect(page.getByRole('group', { name: 'Groups' })).toBeVisible();
     await expect(
       page.getByRole('option').filter({ hasText: 'Member joined group' }),
     ).toContainText('A member joins a group where the bot is present.');
+    await expect(
+      page.getByRole('option').filter({ hasText: 'Member joined group' }),
+    ).toContainText('group.member_joined');
     await expect(
       page.getByRole('option').filter({ hasText: 'Message edited' }),
     ).toContainText('The platform reports that an existing message changed.');