From ce9ed88b0354baa6c7172d092835991bc978a605 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 15 Jan 2026 15:09:12 +0800
Subject: [PATCH] refactor(skill-editor): hoist SkillEditorProvider for state
 persistence

Move SkillEditorProvider from SkillMain to WorkflowAppWrapper so that
store state persists across view switches between Graph and Skill views.
Also add URL query state for view type using nuqs.
---
 web/app/components/workflow-app/index.tsx  | 18 +++++----
 web/app/components/workflow/skill/main.tsx | 43 +++++++---------------
 2 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/web/app/components/workflow-app/index.tsx b/web/app/components/workflow-app/index.tsx
index 9005f2da24..4642ba514d 100644
--- a/web/app/components/workflow-app/index.tsx
+++ b/web/app/components/workflow-app/index.tsx
@@ -3,10 +3,11 @@
 import type { Features as FeaturesData } from '@/app/components/base/features/types'
 import type { InjectWorkflowStoreSliceFn } from '@/app/components/workflow/store'
 import { useSearchParams } from 'next/navigation'
+import { useQueryState } from 'nuqs'
 import {
+  useCallback,
   useEffect,
   useMemo,
-  useState,
 } from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FeaturesProvider } from '@/app/components/base/features'
@@ -16,6 +17,7 @@ import WorkflowWithDefaultContext from '@/app/components/workflow'
 import {
   WorkflowContextProvider,
 } from '@/app/components/workflow/context'
+import { SkillEditorProvider } from '@/app/components/workflow/skill/context'
 import SkillMain from '@/app/components/workflow/skill/main'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useTriggerStatusStore } from '@/app/components/workflow/store/trigger-status'
@@ -37,6 +39,7 @@ import { useGetRunAndTraceUrl } from './hooks/use-get-run-and-trace-url'
 import {
   useWorkflowInit,
 } from './hooks/use-workflow-init'
+import { parseAsViewType, WORKFLOW_VIEW_PARAM_KEY } from './search-params'
 import { createWorkflowSlice } from './store/workflow/workflow-slice'
 
 const WorkflowAppWithAdditionalContext = () => {
@@ -49,13 +52,12 @@ const WorkflowAppWithAdditionalContext = () => {
   const workflowStore = useWorkflowStore()
   const { isLoadingCurrentWorkspace, currentWorkspace } = useAppContext()
 
-  const [viewType, doSetViewType] = useState(ViewType.graph)
-  const setViewType = (type: ViewType) => {
+  const [viewType, doSetViewType] = useQueryState(WORKFLOW_VIEW_PARAM_KEY, parseAsViewType)
+  const setViewType = useCallback((type: ViewType) => {
     doSetViewType(type)
-    if (type === ViewType.graph) {
+    if (type === ViewType.graph)
       reload()
-    }
-  }
+  }, [doSetViewType, reload])
 
   // Initialize trigger status at application level
   const { setTriggerStatuses } = useTriggerStatusStore()
@@ -250,7 +252,9 @@ const WorkflowAppWrapper = () => {
     <WorkflowContextProvider
       injectWorkflowStoreSliceFn={createWorkflowSlice as InjectWorkflowStoreSliceFn}
     >
-      <WorkflowAppWithAdditionalContext />
+      <SkillEditorProvider>
+        <WorkflowAppWithAdditionalContext />
+      </SkillEditorProvider>
     </WorkflowContextProvider>
   )
 }
diff --git a/web/app/components/workflow/skill/main.tsx b/web/app/components/workflow/skill/main.tsx
index df2436176d..de3cb719ae 100644
--- a/web/app/components/workflow/skill/main.tsx
+++ b/web/app/components/workflow/skill/main.tsx
@@ -2,7 +2,6 @@
 
 import type { FC } from 'react'
 import * as React from 'react'
-import { SkillEditorProvider } from './context'
 import EditorArea from './editor-area'
 import EditorBody from './editor-body'
 import EditorTabs from './editor-tabs'
@@ -12,36 +11,22 @@ import SidebarSearchAdd from './sidebar-search-add'
 import SkillDocEditor from './skill-doc-editor'
 import SkillPageLayout from './skill-page-layout'
 
-/**
- * SkillMain - Main entry point for Skill Editor view
- *
- * This component provides the SkillEditorContext and renders the
- * complete Skill Editor UI including:
- * - File tree sidebar
- * - Tab bar
- * - Editor area
- *
- * The store is created at this level and shared with all child components.
- * API data is fetched using TanStack Query hooks within child components.
- */
 const SkillMain: FC = () => {
   return (
-    <SkillEditorProvider>
-      <div className="h-full bg-workflow-canvas-workflow-top-bar-1 pl-3 pt-[52px]">
-        <SkillPageLayout>
-          <Sidebar>
-            <SidebarSearchAdd />
-            <Files />
-          </Sidebar>
-          <EditorArea>
-            <EditorTabs />
-            <EditorBody>
-              <SkillDocEditor />
-            </EditorBody>
-          </EditorArea>
-        </SkillPageLayout>
-      </div>
-    </SkillEditorProvider>
+    <div className="h-full bg-workflow-canvas-workflow-top-bar-1 pl-3 pt-[52px]">
+      <SkillPageLayout>
+        <Sidebar>
+          <SidebarSearchAdd />
+          <Files />
+        </Sidebar>
+        <EditorArea>
+          <EditorTabs />
+          <EditorBody>
+            <SkillDocEditor />
+          </EditorBody>
+        </EditorArea>
+      </SkillPageLayout>
+    </div>
   )
 }