From e3150e66a4150627e0f069d6d473faec4b930c1a Mon Sep 17 00:00:00 2001
From: RockChinQ <rockchinq@gmail.com>
Date: Tue, 25 Aug 2026 12:36:57 +0800
Subject: [PATCH] refactor(web): use shadcn processor navigation

---
 .../agents/components/AgentFormComponent.tsx  | 55 +++++------
 .../ProcessorDetailWorkbench.tsx              |  8 +-
 .../pipeline-form/PipelineFormComponent.tsx   | 91 ++++++++-----------
 .../e2e/processor-detail-workbench.spec.ts    | 26 +++---
 .../unit/processor-detail-workbench.test.mjs  |  6 +-
 5 files changed, 78 insertions(+), 108 deletions(-)

diff --git a/web/src/app/home/agents/components/AgentFormComponent.tsx b/web/src/app/home/agents/components/AgentFormComponent.tsx
index 709df912f..5a28e1d7f 100644
--- a/web/src/app/home/agents/components/AgentFormComponent.tsx
+++ b/web/src/app/home/agents/components/AgentFormComponent.tsx
@@ -14,6 +14,7 @@ import {
 import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { Button } from '@/components/ui/button';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Switch } from '@/components/ui/switch';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
@@ -430,40 +431,26 @@ export default function AgentFormComponent({
             className="mb-2 flex h-full min-h-0 min-w-0 flex-1 flex-col"
           >
             <nav className="mb-4 shrink-0 space-y-2 border-b pb-4">
-              <div className="overflow-x-auto">
-                <ol className="grid min-w-[44rem] grid-cols-4 gap-2">
-                  {primarySections.map((section, index) => {
-                    const Icon = section.icon;
-                    return (
-                      <li key={section.name} className="min-w-0">
-                        <button
-                          type="button"
-                          onClick={() => setActiveSection(section.name)}
-                          className={`flex w-full min-w-0 items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm font-medium transition-colors ${
-                            activeSection === section.name
-                              ? 'border-primary/50 bg-primary/5 text-foreground shadow-sm'
-                              : 'border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground'
-                          }`}
-                        >
-                          <span
-                            className={`flex size-7 shrink-0 items-center justify-center rounded-full text-xs ${
-                              activeSection === section.name
-                                ? 'bg-primary text-primary-foreground'
-                                : 'bg-muted text-muted-foreground'
-                            }`}
-                          >
-                            {index + 1}
-                          </span>
-                          <Icon className="hidden size-4 shrink-0 xl:block" />
-                          <span className="min-w-0 leading-tight">
-                            {section.label}
-                          </span>
-                        </button>
-                      </li>
-                    );
-                  })}
-                </ol>
-              </div>
+              <Tabs
+                value={activeSection}
+                onValueChange={(value) =>
+                  setActiveSection(value as AgentConfigSection)
+                }
+              >
+                <div className="overflow-x-auto">
+                  <TabsList className="grid min-w-[44rem] w-full grid-cols-4">
+                    {primarySections.map((section) => {
+                      const Icon = section.icon;
+                      return (
+                        <TabsTrigger key={section.name} value={section.name}>
+                          <Icon />
+                          {section.label}
+                        </TabsTrigger>
+                      );
+                    })}
+                  </TabsList>
+                </div>
+              </Tabs>
             </nav>
 
             <div className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
diff --git a/web/src/app/home/components/processor-detail/ProcessorDetailWorkbench.tsx b/web/src/app/home/components/processor-detail/ProcessorDetailWorkbench.tsx
index 11e8cce5e..733046242 100644
--- a/web/src/app/home/components/processor-detail/ProcessorDetailWorkbench.tsx
+++ b/web/src/app/home/components/processor-detail/ProcessorDetailWorkbench.tsx
@@ -1,5 +1,6 @@
 import { ReactNode, useState } from 'react';
 import { BarChart3, Bug, Settings } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   Tooltip,
@@ -69,12 +70,13 @@ export default function ProcessorDetailWorkbench({
           {status && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <span
+                <Badge
+                  variant="outline"
                   role="status"
                   aria-label={status.label}
                   tabIndex={0}
                   className={cn(
-                    'inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2 py-1 text-xs font-medium',
+                    'rounded-full',
                     status.tone === 'success' &&
                       'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
                     status.tone === 'warning' &&
@@ -96,7 +98,7 @@ export default function ProcessorDetailWorkbench({
                     )}
                   />
                   {status.label}
-                </span>
+                </Badge>
               </TooltipTrigger>
               <TooltipContent side="bottom" className="max-w-72">
                 <p className="font-medium">{status.label}</p>
diff --git a/web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx b/web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
index f91a468c5..d0d4c5c2c 100644
--- a/web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
+++ b/web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
@@ -8,6 +8,7 @@ import {
 import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
 import { getDefaultValues } from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
 import { Button } from '@/components/ui/button';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -31,7 +32,6 @@ import {
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { extractI18nObject } from '@/i18n/I18nProvider';
-import { cn } from '@/lib/utils';
 import {
   Card,
   CardContent,
@@ -580,64 +580,45 @@ export default function PipelineFormComponent({
               {/* Keep the primary pipeline flow visible while editing. */}
               {formLabelList.length > 1 && (
                 <nav className="mb-4 shrink-0 space-y-2 border-b pb-4">
-                  <div className="overflow-x-auto">
-                    <ol className="grid min-w-[34rem] grid-cols-3 gap-2">
-                      {primarySections.map((section, index) => {
+                  <Tabs value={activeSection} onValueChange={setActiveSection}>
+                    <div className="overflow-x-auto">
+                      <TabsList className="grid min-w-[34rem] w-full grid-cols-3">
+                        {primarySections.map((section) => {
+                          const Icon = section.icon;
+                          return (
+                            <TabsTrigger
+                              key={section.name}
+                              value={section.name}
+                            >
+                              <Icon />
+                              {section.label}
+                            </TabsTrigger>
+                          );
+                        })}
+                      </TabsList>
+                    </div>
+                    <div className="flex flex-wrap gap-1">
+                      {secondarySections.map((section) => {
                         const Icon = section.icon;
                         return (
-                          <li key={section.name} className="relative min-w-0">
-                            <button
-                              type="button"
-                              onClick={() => setActiveSection(section.name)}
-                              className={cn(
-                                'flex w-full min-w-0 items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm font-medium transition-colors',
-                                activeSection === section.name
-                                  ? 'border-primary/50 bg-primary/5 text-foreground shadow-sm'
-                                  : 'border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground',
-                              )}
-                            >
-                              <span
-                                className={cn(
-                                  'flex size-7 shrink-0 items-center justify-center rounded-full text-xs',
-                                  activeSection === section.name
-                                    ? 'bg-primary text-primary-foreground'
-                                    : 'bg-muted text-muted-foreground',
-                                )}
-                              >
-                                {index + 1}
-                              </span>
-                              <Icon className="hidden size-4 shrink-0 xl:block" />
-                              <span className="min-w-0 leading-tight">
-                                {section.label}
-                              </span>
-                            </button>
-                          </li>
+                          <Button
+                            key={section.name}
+                            type="button"
+                            variant={
+                              activeSection === section.name
+                                ? 'secondary'
+                                : 'ghost'
+                            }
+                            size="sm"
+                            onClick={() => setActiveSection(section.name)}
+                          >
+                            <Icon />
+                            {section.label}
+                          </Button>
                         );
                       })}
-                    </ol>
-                  </div>
-                  <ul className="flex flex-wrap gap-1">
-                    {secondarySections.map((section) => {
-                      const Icon = section.icon;
-                      return (
-                        <li key={section.name}>
-                          <button
-                            type="button"
-                            onClick={() => setActiveSection(section.name)}
-                            className={cn(
-                              'flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors',
-                              activeSection === section.name
-                                ? 'bg-accent text-accent-foreground'
-                                : 'text-muted-foreground hover:bg-muted hover:text-foreground',
-                            )}
-                          >
-                            <Icon className="size-3.5" />
-                            {section.label}
-                          </button>
-                        </li>
-                      );
-                    })}
-                  </ul>
+                    </div>
+                  </Tabs>
                 </nav>
               )}
 
diff --git a/web/tests/e2e/processor-detail-workbench.spec.ts b/web/tests/e2e/processor-detail-workbench.spec.ts
index 79b290bfe..817abb0de 100644
--- a/web/tests/e2e/processor-detail-workbench.spec.ts
+++ b/web/tests/e2e/processor-detail-workbench.spec.ts
@@ -33,15 +33,15 @@ test.describe('processor detail workbench', () => {
       .toBe(0);
     expect(debugBox!.y).toBeGreaterThanOrEqual(0);
 
-    const flow = configPanel.locator('ol');
-    await expect(flow.getByRole('button').nth(0)).toContainText(
+    const flow = configPanel.getByRole('tablist');
+    await expect(flow.getByRole('tab').nth(0)).toContainText(
       'Basic Information',
     );
-    await expect(flow.getByRole('button').nth(1)).toContainText(
+    await expect(flow.getByRole('tab').nth(1)).toContainText(
       'Bindable Event Range',
     );
-    await expect(flow.getByRole('button').nth(2)).toContainText('Runner');
-    await expect(flow.getByRole('button').nth(3)).toContainText('Local Agent');
+    await expect(flow.getByRole('tab').nth(2)).toContainText('Runner');
+    await expect(flow.getByRole('tab').nth(3)).toContainText('Local Agent');
 
     await expect(configPanel.getByLabel('Name')).toBeVisible();
     await expect(configPanel.getByLabel('Icon')).toBeVisible();
@@ -56,11 +56,11 @@ test.describe('processor detail workbench', () => {
       ),
     ).toBeVisible();
 
-    await flow.getByRole('button').nth(1).click();
+    await flow.getByRole('tab').nth(1).click();
     await expect(
       configPanel.getByText('Bindable Event Range', { exact: true }).last(),
     ).toBeVisible();
-    await flow.getByRole('button').nth(3).click();
+    await flow.getByRole('tab').nth(3).click();
     await expect(
       configPanel.getByText('Local Agent', { exact: true }).last(),
     ).toBeVisible();
@@ -91,18 +91,16 @@ test.describe('processor detail workbench', () => {
       .toBe(0);
     expect(debugBox!.y).toBeGreaterThanOrEqual(0);
 
-    const flow = configPanel.locator('ol');
-    await expect(flow.getByRole('button').nth(0)).toContainText(
+    const flow = configPanel.getByRole('tablist');
+    await expect(flow.getByRole('tab').nth(0)).toContainText(
       'Trigger Conditions',
     );
-    await expect(flow.getByRole('button').nth(1)).toContainText(
-      'AI Capabilities',
-    );
-    await expect(flow.getByRole('button').nth(2)).toContainText(
+    await expect(flow.getByRole('tab').nth(1)).toContainText('AI Capabilities');
+    await expect(flow.getByRole('tab').nth(2)).toContainText(
       'Output Processing',
     );
 
-    await flow.getByRole('button').nth(1).click();
+    await flow.getByRole('tab').nth(1).click();
     await expect(
       configPanel.getByText('Runtime', { exact: true }).last(),
     ).toBeVisible();
diff --git a/web/tests/unit/processor-detail-workbench.test.mjs b/web/tests/unit/processor-detail-workbench.test.mjs
index e078391ae..c5be1962e 100644
--- a/web/tests/unit/processor-detail-workbench.test.mjs
+++ b/web/tests/unit/processor-detail-workbench.test.mjs
@@ -65,6 +65,8 @@ test('processor forms expose their primary orchestration flow horizontally', ()
     pipelineForm,
     /const primarySectionNames = \['trigger', 'ai', 'output'\]/,
   );
-  assert.match(agentForm, /grid min-w-\[44rem\] grid-cols-4/);
-  assert.match(pipelineForm, /grid min-w-\[34rem\] grid-cols-3/);
+  assert.match(agentForm, /<TabsList[^>]*grid-cols-4/);
+  assert.match(pipelineForm, /<TabsList[^>]*grid-cols-3/);
+  assert.doesNotMatch(agentForm, /<ol className=/);
+  assert.doesNotMatch(pipelineForm, /<ol className=/);
 });