From d393b5f1389bfd16dd1ac23c4dd2cf3f972b8a72 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 28 Mar 2026 17:15:47 +0800
Subject: [PATCH] fix: align workflow timeline labels inline

---
 .../agents/AgentWorkflowPanelDarkV2.tsx       | 88 ++++++++++---------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/components/agents/AgentWorkflowPanelDarkV2.tsx b/components/agents/AgentWorkflowPanelDarkV2.tsx
index fdf9992fc..7359c5a4e 100644
--- a/components/agents/AgentWorkflowPanelDarkV2.tsx
+++ b/components/agents/AgentWorkflowPanelDarkV2.tsx
@@ -728,7 +728,7 @@ export function AgentWorkflowPanelDarkV2({
 
                           return (
                             <Fragment key={step.key}>
-                              <div className="group relative flex min-w-0 flex-col items-start pr-2 text-left">
+                              <div className="group relative flex min-w-0 items-center pr-2 text-left">
                                 <button
                                   type="button"
                                   onClick={() => {
@@ -737,52 +737,53 @@ export function AgentWorkflowPanelDarkV2({
                                     setActiveEmbeddedStepKey(step.key);
                                     setActiveEmbeddedOptionDepth(1);
                                   }}
-                                  className="flex w-full flex-col items-start text-left transition-transform duration-200 hover:-translate-y-[1px]"
+                                  className="flex min-w-0 shrink-0 items-center gap-3 text-left transition-transform duration-200 hover:-translate-y-[1px]"
                                 >
-                                  <div className="flex w-full items-center gap-3">
-                                    <span
-                                      className={cn(
-                                        "flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-[11px] font-semibold transition-colors",
-                                        active
-                                          ? "border-emerald-300 bg-emerald-300 text-black shadow-[0_0_18px_rgba(52,211,153,0.28)]"
-                                          : completed
-                                            ? "border-white/30 bg-white text-black"
-                                            : "border-white/12 bg-white/[0.04] text-white/62 group-hover:border-white/24 group-hover:text-white/82"
-                                      )}
-                                    >
-                                      {stepIndex + 1}
+                                  <span
+                                    className={cn(
+                                      "flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-[11px] font-semibold transition-colors",
+                                      active
+                                        ? "border-emerald-300 bg-emerald-300 text-black shadow-[0_0_18px_rgba(52,211,153,0.28)]"
+                                        : completed
+                                          ? "border-white/30 bg-white text-black"
+                                          : "border-white/12 bg-white/[0.04] text-white/62 group-hover:border-white/24 group-hover:text-white/82"
+                                    )}
+                                  >
+                                    {stepIndex + 1}
+                                  </span>
+                                  <span
+                                    className={cn(
+                                      "truncate text-[13px] font-semibold transition-colors",
+                                      active
+                                        ? "text-white"
+                                        : completed
+                                          ? "text-white/82"
+                                          : "text-white/52 group-hover:text-white/76"
+                                    )}
+                                  >
+                                    {step.title}
+                                  </span>
+                                  {active ? (
+                                    <span className="shrink-0 rounded-full border border-emerald-300/30 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-medium text-emerald-200">
+                                      当前步骤
                                     </span>
-                                    <span
-                                      className={cn(
-                                        "truncate text-[13px] font-semibold transition-colors",
-                                        active
-                                          ? "text-white"
-                                          : completed
-                                            ? "text-white/82"
-                                            : "text-white/52 group-hover:text-white/76"
-                                      )}
-                                    >
-                                      {step.title}
-                                    </span>
-                                    {active ? (
-                                      <span className="rounded-full border border-emerald-300/30 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-medium text-emerald-200">
-                                        当前步骤
-                                      </span>
-                                    ) : null}
-                                  </div>
+                                  ) : null}
+                                </button>
+                                <div className="ml-3 flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
                                   {activeStepChildLabel ? (
                                     <span
                                       className={cn(
-                                        "mt-1.5 pl-10 text-[10px] leading-4",
-                                        active ? "text-emerald-100/78" : "text-white/28"
+                                        "shrink-0 rounded-full border px-2 py-0.5 text-[10px] leading-none",
+                                        active
+                                          ? "border-emerald-300/24 bg-emerald-400/10 text-emerald-100/82"
+                                          : "border-white/10 bg-white/[0.04] text-white/38"
                                       )}
                                     >
                                       {activeStepChildLabel}
                                     </span>
                                   ) : null}
-                                </button>
-                                {stepSelectedPath.length > 0 ? (
-                                  <div className="mt-2 flex flex-wrap gap-1.5 pl-10">
+                                  {stepSelectedPath.length > 0 ? (
+                                    <div className="agent-dark-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto pb-1">
                                     {stepSelectedPath.map((option, optionIndex) => {
                                       const optionDepth = optionIndex + 1;
                                       const optionLevelActive =
@@ -818,12 +819,13 @@ export function AgentWorkflowPanelDarkV2({
                                         </button>
                                       );
                                     })}
-                                  </div>
-                                ) : (
-                                  <span className="mt-1.5 pl-10 text-[10px] leading-4 text-white/32">
-                                    待选择
-                                  </span>
-                                )}
+                                    </div>
+                                  ) : (
+                                    <span className="truncate text-[10px] leading-4 text-white/32">
+                                      待选择
+                                    </span>
+                                  )}
+                                </div>
                                 {stepIndex < flattenedResolvedSteps.length - 1 ? (
                                   <div
                                     className={cn(