From 404ac3aeab8bc809f66b8ae7bf330b8c0b361166 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Sun, 8 Feb 2026 13:56:31 +0800
Subject: [PATCH] feat(skill-editor): hide tab dividers when only Start tab is
 visible

Remove border-right on Start tab and border-bottom on tab bar when no
file tabs are open, making the tab area blend seamlessly with the
content area below.
---
 .../workflow/skill/skill-body/tabs/file-tabs.tsx           | 7 ++++++-
 .../workflow/skill/skill-body/tabs/start-tab-item.spec.tsx | 1 +
 .../workflow/skill/skill-body/tabs/start-tab-item.tsx      | 5 ++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/skill/skill-body/tabs/file-tabs.tsx b/web/app/components/workflow/skill/skill-body/tabs/file-tabs.tsx
index 21dee3932c..4829d78755 100644
--- a/web/app/components/workflow/skill/skill-body/tabs/file-tabs.tsx
+++ b/web/app/components/workflow/skill/skill-body/tabs/file-tabs.tsx
@@ -23,6 +23,7 @@ const FileTabs = () => {
   const { data: nodeMap } = useSkillAssetNodeMap()
 
   const isStartTabActive = activeTabId === START_TAB_ID
+  const isStartTabOnly = openTabIds.length === 0
 
   const handleStartTabClick = useCallback(() => {
     storeApi.getState().activateTab(START_TAB_ID)
@@ -69,11 +70,15 @@ const FileTabs = () => {
     <>
       <div
         className={cn(
-          'flex items-center overflow-hidden rounded-t-lg border-b border-components-panel-border-subtle bg-components-panel-bg-alt',
+          'flex items-center overflow-hidden rounded-t-lg',
+          isStartTabOnly
+            ? 'bg-components-panel-bg'
+            : 'border-b border-components-panel-border-subtle bg-components-panel-bg-alt',
         )}
       >
         <StartTabItem
           isActive={isStartTabActive}
+          isOnly={isStartTabOnly}
           onClick={handleStartTabClick}
         />
         {openTabIds.map((fileId) => {
diff --git a/web/app/components/workflow/skill/skill-body/tabs/start-tab-item.spec.tsx b/web/app/components/workflow/skill/skill-body/tabs/start-tab-item.spec.tsx
index dab6de90cf..9bec26dc53 100644
--- a/web/app/components/workflow/skill/skill-body/tabs/start-tab-item.spec.tsx
+++ b/web/app/components/workflow/skill/skill-body/tabs/start-tab-item.spec.tsx
@@ -8,6 +8,7 @@ const createProps = (overrides: Partial<StartTabItemProps> = {}) => {
   const onClick = vi.fn()
   const props: StartTabItemProps = {
     isActive: false,
+    isOnly: false,
     onClick,
     ...overrides,
   }
diff --git a/web/app/components/workflow/skill/skill-body/tabs/start-tab-item.tsx b/web/app/components/workflow/skill/skill-body/tabs/start-tab-item.tsx
index 3f6559293e..ade4f9f580 100644
--- a/web/app/components/workflow/skill/skill-body/tabs/start-tab-item.tsx
+++ b/web/app/components/workflow/skill/skill-body/tabs/start-tab-item.tsx
@@ -7,11 +7,13 @@ import { cn } from '@/utils/classnames'
 
 type StartTabItemProps = {
   isActive: boolean
+  isOnly: boolean
   onClick: () => void
 }
 
 const StartTabItem = ({
   isActive,
+  isOnly,
   onClick,
 }: StartTabItemProps) => {
   const { t } = useTranslation('workflow')
@@ -19,7 +21,8 @@ const StartTabItem = ({
   return (
     <div
       className={cn(
-        'relative flex shrink-0 items-center border-r border-components-panel-border-subtle',
+        'relative flex shrink-0 items-center',
+        !isOnly && 'border-r border-components-panel-border-subtle',
         isActive ? 'bg-components-panel-bg' : 'bg-transparent hover:bg-state-base-hover',
       )}
     >