From e6f6789e8b81feb4e535f69f20fa56c8774b62b5 Mon Sep 17 00:00:00 2001
From: RockChinQ <rockchinq@gmail.com>
Date: Thu, 27 Aug 2026 15:28:43 +0800
Subject: [PATCH] fix(agents): make pipeline flow animation seamless

---
 web/src/app/home/agents/components/ProcessorTypeDiagram.tsx | 3 ++-
 web/tests/e2e/crud-smoke.spec.ts                            | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/app/home/agents/components/ProcessorTypeDiagram.tsx b/web/src/app/home/agents/components/ProcessorTypeDiagram.tsx
index a95f172af..d6ae78277 100644
--- a/web/src/app/home/agents/components/ProcessorTypeDiagram.tsx
+++ b/web/src/app/home/agents/components/ProcessorTypeDiagram.tsx
@@ -287,10 +287,11 @@ function PipelineDiagram() {
         fill="none"
         stroke={LANGBOT_BLUE}
         strokeWidth="3"
-        strokeDasharray="4 14"
+        strokeDasharray="4 11"
         strokeLinecap="round"
         className="processor-line-flow"
         data-motion="flow"
+        data-dash-cycle="15"
       />
 
       {steps.map((step, index) => {
diff --git a/web/tests/e2e/crud-smoke.spec.ts b/web/tests/e2e/crud-smoke.spec.ts
index c5c0c04c7..608a99147 100644
--- a/web/tests/e2e/crud-smoke.spec.ts
+++ b/web/tests/e2e/crud-smoke.spec.ts
@@ -196,7 +196,7 @@ test.describe('frontend CRUD smoke flows', () => {
     await expect(page.getByTestId('pipeline-diagram')).toBeVisible();
     await expect(
       page.getByTestId('pipeline-diagram').locator('[data-motion="flow"]'),
-    ).toHaveCount(1);
+    ).toHaveAttribute('data-dash-cycle', '15');
     await expect(page.getByTestId('agent-diagram')).toHaveCount(0);
 
     await expect(page.locator('input[name="name"]')).toBeVisible();