From c2527027d62cd9bc106589c9f8302ad57482fac6 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 28 Mar 2026 17:26:55 +0800
Subject: [PATCH] fix: normalize workflow timeline chip alignment

---
 .../agents/AgentWorkflowPanelDarkV2.tsx       | 100 ++++++++----------
 1 file changed, 42 insertions(+), 58 deletions(-)

diff --git a/components/agents/AgentWorkflowPanelDarkV2.tsx b/components/agents/AgentWorkflowPanelDarkV2.tsx
index 7359c5a4e..51a39c653 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 items-center pr-2 text-left">
+                              <div className="group relative flex min-w-0 items-center gap-3 pr-2 text-left">
                                 <button
                                   type="button"
                                   onClick={() => {
@@ -737,7 +737,7 @@ export function AgentWorkflowPanelDarkV2({
                                     setActiveEmbeddedStepKey(step.key);
                                     setActiveEmbeddedOptionDepth(1);
                                   }}
-                                  className="flex min-w-0 shrink-0 items-center gap-3 text-left transition-transform duration-200 hover:-translate-y-[1px]"
+                                  className="flex min-w-0 shrink-0 items-center gap-3 self-center text-left transition-transform duration-200 hover:-translate-y-[1px]"
                                 >
                                   <span
                                     className={cn(
@@ -753,7 +753,7 @@ export function AgentWorkflowPanelDarkV2({
                                   </span>
                                   <span
                                     className={cn(
-                                      "truncate text-[13px] font-semibold transition-colors",
+                                      "truncate text-[13px] font-semibold leading-none transition-colors",
                                       active
                                         ? "text-white"
                                         : completed
@@ -764,16 +764,16 @@ export function AgentWorkflowPanelDarkV2({
                                     {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 className="inline-flex h-7 shrink-0 items-center rounded-full border border-emerald-300/30 bg-emerald-400/10 px-2.5 text-[10px] font-medium leading-none text-emerald-200">
                                       当前步骤
                                     </span>
                                   ) : null}
                                 </button>
-                                <div className="ml-3 flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+                                <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
                                   {activeStepChildLabel ? (
                                     <span
                                       className={cn(
-                                        "shrink-0 rounded-full border px-2 py-0.5 text-[10px] leading-none",
+                                        "inline-flex h-7 shrink-0 items-center rounded-full border px-2.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"
@@ -783,45 +783,45 @@ export function AgentWorkflowPanelDarkV2({
                                     </span>
                                   ) : null}
                                   {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 =
-                                        active &&
-                                        (activeEmbeddedOptionLevel?.depth || 1) === optionDepth;
+                                    <div className="agent-dark-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
+                                      {stepSelectedPath.map((option, optionIndex) => {
+                                        const optionDepth = optionIndex + 1;
+                                        const optionLevelActive =
+                                          active &&
+                                          (activeEmbeddedOptionLevel?.depth || 1) === optionDepth;
 
-                                      return (
-                                        <button
-                                          key={`${step.key}-${option.key}-${optionDepth}`}
-                                          type="button"
-                                          onClick={() => {
-                                            setPendingAutoAdvanceStepKey(null);
-                                            setAutoAdvanceNotice(null);
-                                            setActiveEmbeddedStepKey(step.key);
-                                            setActiveEmbeddedOptionDepth(optionDepth);
-                                          }}
-                                          className={cn(
-                                            "inline-flex max-w-full items-center gap-1 rounded-full border px-2 py-1 text-[10px] leading-none transition-colors",
-                                            optionLevelActive
-                                              ? "border-emerald-300/35 bg-emerald-400/12 text-emerald-100"
-                                              : active || completed
-                                                ? "border-white/14 bg-white/[0.06] text-white/72 hover:border-white/22 hover:bg-white/[0.09] hover:text-white"
-                                                : "border-white/10 bg-white/[0.03] text-white/48 hover:border-white/18 hover:text-white/72"
-                                          )}
-                                          title={`返回${getWorkflowOptionDepthLabel(optionDepth)}：${option.buttonName}`}
-                                        >
-                                          <span className="text-[9px] opacity-70">
-                                            {getWorkflowOptionDepthShortLabel(optionDepth)}
-                                          </span>
-                                          <span className="max-w-[9rem] truncate">
-                                            {option.buttonName}
-                                          </span>
-                                        </button>
-                                      );
-                                    })}
+                                        return (
+                                          <button
+                                            key={`${step.key}-${option.key}-${optionDepth}`}
+                                            type="button"
+                                            onClick={() => {
+                                              setPendingAutoAdvanceStepKey(null);
+                                              setAutoAdvanceNotice(null);
+                                              setActiveEmbeddedStepKey(step.key);
+                                              setActiveEmbeddedOptionDepth(optionDepth);
+                                            }}
+                                            className={cn(
+                                              "inline-flex h-7 max-w-full shrink-0 items-center gap-1 rounded-full border px-2.5 text-[10px] leading-none transition-colors",
+                                              optionLevelActive
+                                                ? "border-emerald-300/35 bg-emerald-400/12 text-emerald-100"
+                                                : active || completed
+                                                  ? "border-white/14 bg-white/[0.06] text-white/72 hover:border-white/22 hover:bg-white/[0.09] hover:text-white"
+                                                  : "border-white/10 bg-white/[0.03] text-white/48 hover:border-white/18 hover:text-white/72"
+                                            )}
+                                            title={`返回${getWorkflowOptionDepthLabel(optionDepth)}：${option.buttonName}`}
+                                          >
+                                            <span className="text-[9px] opacity-70">
+                                              {getWorkflowOptionDepthShortLabel(optionDepth)}
+                                            </span>
+                                            <span className="max-w-[9rem] truncate whitespace-nowrap">
+                                              {option.buttonName}
+                                            </span>
+                                          </button>
+                                        );
+                                      })}
                                     </div>
                                   ) : (
-                                    <span className="truncate text-[10px] leading-4 text-white/32">
+                                    <span className="truncate text-[10px] leading-none text-white/32">
                                       待选择
                                     </span>
                                   )}
@@ -869,22 +869,6 @@ export function AgentWorkflowPanelDarkV2({
                           </motion.div>
                         ) : null}
 
-                        <div className="rounded-2xl border border-emerald-300/12 bg-emerald-400/[0.05] px-4 py-3">
-                          <div className="flex flex-wrap items-center gap-2">
-                            <span className="rounded-full border border-emerald-300/24 bg-emerald-400/10 px-2.5 py-1 text-[11px] font-medium text-emerald-200">
-                              当前正在选择
-                            </span>
-                            <span className="text-sm font-semibold text-white">
-                              {activeEmbeddedStepEntry.step.title}
-                            </span>
-                          </div>
-                          <div className="mt-1 text-xs leading-5 text-emerald-50/68">
-                            {activeEmbeddedOptionLevel.depth === 1
-                              ? "当前区域展示的是这个步骤的主卡片。选中后系统会继续切到该步骤的下一级，或自动进入下一个步骤。"
-                              : `当前区域展示的是「${activeEmbeddedStepEntry.step.title}」的第 ${activeEmbeddedOptionLevel.depth} 级子卡片，不是上一个已完成步骤的卡片。`}
-                          </div>
-                        </div>
-
                         <div className="flex items-center gap-2">
                           <span className="rounded-full border border-white/12 px-2.5 py-1 text-[11px] font-medium text-white/45">
                             {activeEmbeddedOptionLevel.depth === 1