From 9c8a5ff527fcb080a2353c4adb82ed34d15fb0d4 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 26 Mar 2026 16:17:50 +0800
Subject: [PATCH] chore: skill in query to file

---
 .../__tests__/search-params.spec.ts             | 17 +++++++++++++++++
 .../components/workflow-app/search-params.ts    | 14 ++++++++++++--
 .../file-reference-block/file-preview-panel.tsx |  2 +-
 web/app/components/workflow/types.ts            |  2 +-
 web/app/components/workflow/view-picker.tsx     |  2 +-
 5 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 web/app/components/workflow-app/__tests__/search-params.spec.ts

diff --git a/web/app/components/workflow-app/__tests__/search-params.spec.ts b/web/app/components/workflow-app/__tests__/search-params.spec.ts
new file mode 100644
index 0000000000..44e5d33458
--- /dev/null
+++ b/web/app/components/workflow-app/__tests__/search-params.spec.ts
@@ -0,0 +1,17 @@
+import { ViewType } from '@/app/components/workflow/types'
+import { parseAsViewType } from '../search-params'
+
+describe('workflow-app search params', () => {
+  it('should parse the new file view value and keep serializing it as file', () => {
+    expect(parseAsViewType.parse('file')).toBe(ViewType.file)
+    expect(parseAsViewType.serialize(ViewType.file)).toBe('file')
+  })
+
+  it('should keep supporting legacy skill view links by mapping them to file', () => {
+    expect(parseAsViewType.parse('skill')).toBe(ViewType.file)
+  })
+
+  it('should reject unsupported view values', () => {
+    expect(parseAsViewType.parse('invalid-view')).toBeNull()
+  })
+})
diff --git a/web/app/components/workflow-app/search-params.ts b/web/app/components/workflow-app/search-params.ts
index 3a238c39be..d5c9bbcda8 100644
--- a/web/app/components/workflow-app/search-params.ts
+++ b/web/app/components/workflow-app/search-params.ts
@@ -1,7 +1,17 @@
-import { parseAsStringEnum } from 'nuqs'
+import { createParser } from 'nuqs'
 import { ViewType } from '@/app/components/workflow/types'
 
-export const parseAsViewType = parseAsStringEnum<ViewType>(Object.values(ViewType))
+const VIEW_TYPES = Object.values(ViewType) as ViewType[]
+
+export const parseAsViewType = createParser<ViewType>({
+  parse: (value) => {
+    if (value === 'skill')
+      return ViewType.file
+
+    return VIEW_TYPES.includes(value as ViewType) ? value as ViewType : null
+  },
+  serialize: value => value,
+})
   .withDefault(ViewType.graph)
   .withOptions({
     history: 'push',
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
index 61e8bda45c..6850a434ca 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
@@ -82,7 +82,7 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
     if (!canOpenInEditor)
       return
     const nextUrl = new URL(window.location.href)
-    nextUrl.searchParams.set('view', 'skill')
+    nextUrl.searchParams.set('view', 'file')
     nextUrl.searchParams.set('fileId', resourceId)
     window.open(nextUrl.toString(), '_blank', 'noopener,noreferrer')
   }, [canOpenInEditor, resourceId])
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index c8b922791f..c4eeef768a 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -606,6 +606,6 @@ export type Block = {
 
 export const ViewType = {
   graph: 'graph',
-  skill: 'skill',
+  file: 'file',
 } as const
 export type ViewType = typeof ViewType[keyof typeof ViewType]
diff --git a/web/app/components/workflow/view-picker.tsx b/web/app/components/workflow/view-picker.tsx
index f119d83dc5..e87264efae 100644
--- a/web/app/components/workflow/view-picker.tsx
+++ b/web/app/components/workflow/view-picker.tsx
@@ -24,7 +24,7 @@ const ViewPicker: FC<ViewPickerProps> = ({
   const { t } = useTranslation()
   const options = useMemo(() => ([
     { value: ViewType.graph, text: t('viewPicker.graph', { ns: 'workflow' }), disabled: disabled && value !== ViewType.graph },
-    { value: ViewType.skill, text: t('viewPicker.file', { ns: 'workflow' }), disabled: disabled && value !== ViewType.skill },
+    { value: ViewType.file, text: t('viewPicker.file', { ns: 'workflow' }), disabled: disabled && value !== ViewType.file },
   ]), [t, disabled, value])
 
   const handleChange = useCallback((nextValue: string | number | symbol) => {