From 59383e88c217f3ad1625aa53e7695b8da2e7dd23 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Thu, 27 Aug 2026 07:51:07 +0000
Subject: [PATCH] fix(web): refine agent configure section states (#41371)

---
 .../orchestrate/advanced/__tests__/index.spec.tsx |  6 +++---
 .../components/orchestrate/advanced/env.tsx       |  4 ++--
 .../components/orchestrate/common/section.tsx     | 15 +++++----------
 .../components/orchestrate/tools/index.tsx        |  5 ++++-
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/__tests__/index.spec.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/__tests__/index.spec.tsx
index eb726953acd..6ced885453f 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/__tests__/index.spec.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/__tests__/index.spec.tsx
@@ -14,13 +14,13 @@ describe('AgentAdvancedSettings', () => {
     render(<AgentAdvancedSettings />)
 
     const label = 'agentV2.agentDetail.configure.advancedSettings.label'
-    const triggers = screen.getAllByRole('button', { name: label })
+    const trigger = screen.getByRole('button', { name: label })
 
-    expect(triggers[0]).not.toHaveAttribute('data-panel-open')
+    expect(trigger).not.toHaveAttribute('data-panel-open')
     expect(screen.queryByText('advanced-env-editor')).not.toBeInTheDocument()
     expect(screen.queryByText('advanced-content-moderation')).not.toBeInTheDocument()
 
-    fireEvent.click(triggers[0]!)
+    fireEvent.click(trigger)
 
     expect(screen.getByText('advanced-env-editor')).toBeInTheDocument()
     expect(screen.queryByText('advanced-content-moderation')).not.toBeInTheDocument()
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/env.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/env.tsx
index b020814bc95..0abf2087e80 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/env.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/env.tsx
@@ -540,9 +540,9 @@ export function AgentEnvEditor() {
       panelId={envEditorTableId}
       tip={<AgentConfigureTipContent type="env" />}
       tipAriaLabel={envEditorTip}
-      rootClassName="gap-1 pt-3"
+      rootClassName="gap-1 py-3"
       headerClassName="mb-0 gap-1 px-3"
-      panelContentClassName="px-3 pb-3"
+      panelContentClassName="px-3"
       actions={
         !readOnly ? (
           <>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/common/section.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/common/section.tsx
index 95d7c2d472f..b2540e58577 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/common/section.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/common/section.tsx
@@ -67,7 +67,7 @@ export function ConfigureSection({
     >
       <div className={cn('mb-2 flex min-h-6 items-center gap-2', headerClassName)}>
         <div className="min-w-0 flex-1">
-          <div className={cn('flex min-w-0 items-center', titleRowClassName)}>
+          <div className={cn('group/collapse-title flex min-w-0 items-center', titleRowClassName)}>
             <Heading id={labelId} className="relative min-w-0 shrink-0">
               {isBuildDraftChanged && <AgentBuildDraftChangeDot />}
               <CollapsibleTrigger className="h-6 min-h-0 w-auto max-w-full justify-start gap-0 rounded-sm px-0 text-text-secondary hover:not-data-disabled:bg-transparent hover:not-data-disabled:text-text-secondary data-panel-open:text-text-secondary">
@@ -83,15 +83,10 @@ export function ConfigureSection({
                 {tip}
               </Infotip>
             )}
-            <CollapsibleTrigger
-              aria-labelledby={labelId}
-              className="group/collapse-icon size-3.5 min-h-0 shrink-0 justify-center rounded-sm p-0 text-text-quaternary hover:not-data-disabled:bg-transparent hover:not-data-disabled:text-text-secondary data-panel-open:text-text-quaternary"
-            >
-              <span
-                aria-hidden="true"
-                className="i-custom-vender-solid-general-arrow-down-round-fill size-3.5 rotate-270 transition-transform group-data-panel-open/collapse-icon:rotate-0 motion-reduce:transition-none"
-              />
-            </CollapsibleTrigger>
+            <span
+              aria-hidden="true"
+              className="i-custom-vender-solid-general-arrow-down-round-fill size-3.5 shrink-0 rotate-270 text-text-quaternary transition-transform group-has-data-panel-open/collapse-title:rotate-0 motion-reduce:transition-none"
+            />
           </div>
           {hasDescription && <p className="system-xs-regular text-text-tertiary">{description}</p>}
         </div>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/tools/index.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/tools/index.tsx
index 0cedda983c8..7160bf46c50 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/tools/index.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/tools/index.tsx
@@ -333,7 +333,10 @@ function AddToolMenu({
     <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverTrigger
         render={
-          <ConfigureSectionAddButton ariaLabel={t(($) => $['agentDetail.configure.tools.add'])} />
+          <ConfigureSectionAddButton
+            ariaLabel={t(($) => $['agentDetail.configure.tools.add'])}
+            className="data-popup-open:bg-state-base-hover"
+          />
         }
       />
       <PopoverContent