From 21ffaf9a1436b6be5548a0a5bfad863829cc5327 Mon Sep 17 00:00:00 2001
From: RockChinQ <rockchinq@gmail.com>
Date: Thu, 27 Aug 2026 15:52:59 +0800
Subject: [PATCH] refactor(agents): move debug event picker to input area

---
 .../agents/components/AgentDebugPanel.tsx     | 150 +++++++++---------
 .../e2e/processor-detail-workbench.spec.ts    |  12 ++
 2 files changed, 86 insertions(+), 76 deletions(-)

diff --git a/web/src/app/home/agents/components/AgentDebugPanel.tsx b/web/src/app/home/agents/components/AgentDebugPanel.tsx
index 81d180178..913d7ecc3 100644
--- a/web/src/app/home/agents/components/AgentDebugPanel.tsx
+++ b/web/src/app/home/agents/components/AgentDebugPanel.tsx
@@ -280,82 +280,6 @@ export default function AgentDebugPanel({
 
   return (
     <div className="flex h-full min-h-0 min-w-0 flex-col">
-      <div className="shrink-0 space-y-3 border-b p-3">
-        <div className="flex items-end gap-2">
-          <div className="min-w-0 flex-1 space-y-1.5">
-            <Label>{t('agents.debugEventType')}</Label>
-            <Select value={preset} onValueChange={selectPreset}>
-              <SelectTrigger
-                className="w-full"
-                aria-label={t('agents.debugEventType')}
-              >
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent className="w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-2rem)]">
-                {eventGroups.map((group) => (
-                  <SelectGroup key={group.namespace}>
-                    <SelectLabel>
-                      {eventGroupLabel(group.namespace, t)}
-                    </SelectLabel>
-                    {group.patterns.map((event) => (
-                      <SelectItem
-                        key={event}
-                        value={event}
-                        description={eventPatternDescription(event, t)}
-                        className="py-2"
-                      >
-                        <EventSelectOptionContent
-                          event={event}
-                          label={eventPatternLabel(event, t)}
-                        />
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                ))}
-                {supportsCustomEvent && (
-                  <SelectGroup>
-                    <SelectLabel>{t('agents.debugCustomEvent')}</SelectLabel>
-                    <SelectItem
-                      value="custom"
-                      description={t('bots.eventDescriptions.custom')}
-                      className="py-2"
-                    >
-                      <EventSelectOptionContent
-                        event="custom.event"
-                        label={t('agents.debugCustomEvent')}
-                      />
-                    </SelectItem>
-                  </SelectGroup>
-                )}
-              </SelectContent>
-            </Select>
-          </div>
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            onClick={resetSession}
-            title={t('agents.debugResetSession')}
-          >
-            <RotateCcw className="size-4" />
-          </Button>
-        </div>
-
-        {preset === 'custom' && (
-          <div className="space-y-1.5">
-            <Label htmlFor="agent-debug-custom-event">
-              {t('agents.debugCustomEventType')}
-            </Label>
-            <Input
-              id="agent-debug-custom-event"
-              value={customEventType}
-              onChange={(event) => setCustomEventType(event.target.value)}
-              placeholder="custom.event"
-            />
-          </div>
-        )}
-      </div>
-
       <div className="min-h-0 flex-1 overflow-y-auto p-3">
         <div className="mb-3">
           <p className="text-sm font-medium">{t('agents.debugTranscript')}</p>
@@ -437,6 +361,80 @@ export default function AgentDebugPanel({
       </div>
 
       <div className="shrink-0 space-y-3 border-t p-3">
+        <div className="flex items-end gap-2">
+          <div className="min-w-0 flex-1 space-y-1.5">
+            <Label>{t('agents.debugEventType')}</Label>
+            <Select value={preset} onValueChange={selectPreset}>
+              <SelectTrigger
+                className="w-full"
+                aria-label={t('agents.debugEventType')}
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-2rem)]">
+                {eventGroups.map((group) => (
+                  <SelectGroup key={group.namespace}>
+                    <SelectLabel>
+                      {eventGroupLabel(group.namespace, t)}
+                    </SelectLabel>
+                    {group.patterns.map((event) => (
+                      <SelectItem
+                        key={event}
+                        value={event}
+                        description={eventPatternDescription(event, t)}
+                        className="py-2"
+                      >
+                        <EventSelectOptionContent
+                          event={event}
+                          label={eventPatternLabel(event, t)}
+                        />
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                ))}
+                {supportsCustomEvent && (
+                  <SelectGroup>
+                    <SelectLabel>{t('agents.debugCustomEvent')}</SelectLabel>
+                    <SelectItem
+                      value="custom"
+                      description={t('bots.eventDescriptions.custom')}
+                      className="py-2"
+                    >
+                      <EventSelectOptionContent
+                        event="custom.event"
+                        label={t('agents.debugCustomEvent')}
+                      />
+                    </SelectItem>
+                  </SelectGroup>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={resetSession}
+            title={t('agents.debugResetSession')}
+          >
+            <RotateCcw className="size-4" />
+          </Button>
+        </div>
+
+        {preset === 'custom' && (
+          <div className="space-y-1.5">
+            <Label htmlFor="agent-debug-custom-event">
+              {t('agents.debugCustomEventType')}
+            </Label>
+            <Input
+              id="agent-debug-custom-event"
+              value={customEventType}
+              onChange={(event) => setCustomEventType(event.target.value)}
+              placeholder="custom.event"
+            />
+          </div>
+        )}
+
         <div className="space-y-1.5">
           <Label htmlFor="agent-debug-input">
             {isMessageEvent
diff --git a/web/tests/e2e/processor-detail-workbench.spec.ts b/web/tests/e2e/processor-detail-workbench.spec.ts
index 41a6abc34..b15c4700b 100644
--- a/web/tests/e2e/processor-detail-workbench.spec.ts
+++ b/web/tests/e2e/processor-detail-workbench.spec.ts
@@ -31,6 +31,18 @@ test.describe('processor detail workbench', () => {
       name: 'Event type',
     });
     await expect(debugEventPicker).toContainText('message.received');
+    const transcriptBox = await debugPanel
+      .getByText('Debug transcript', { exact: true })
+      .boundingBox();
+    const eventPickerBox = await debugEventPicker.boundingBox();
+    const conversationInputBox = await debugPanel
+      .getByRole('textbox', { name: 'Conversation input' })
+      .boundingBox();
+    expect(transcriptBox).not.toBeNull();
+    expect(eventPickerBox).not.toBeNull();
+    expect(conversationInputBox).not.toBeNull();
+    expect(eventPickerBox!.y).toBeGreaterThan(transcriptBox!.y);
+    expect(eventPickerBox!.y).toBeLessThan(conversationInputBox!.y);
     await debugEventPicker.click();
     await expect(page.getByRole('group', { name: 'Messages' })).toBeVisible();
     await expect(page.getByRole('group', { name: 'Groups' })).toBeVisible();