+
@@ -153,15 +151,20 @@ const SIZE_CLASSES = {
} as const
type ModalSize = keyof typeof SIZE_CLASSES
+type ContentPadding = 'default' | 'compact' | 'none'
const {
contentTitle,
rightPanelTitle,
- size = 'lg'
+ size = 'lg',
+ leftPanelWidth = '14rem',
+ contentPadding = 'default'
} = defineProps<{
contentTitle: string
rightPanelTitle?: string
size?: ModalSize
+ leftPanelWidth?: string
+ contentPadding?: ContentPadding
}>()
const sizeClasses = computed(() => SIZE_CLASSES[size])
@@ -197,10 +200,18 @@ const showLeftPanel = computed(() => {
return shouldShow
})
+const contentContainerClass = computed(() =>
+ cn(
+ 'flex min-h-0 flex-1 flex-col overflow-y-auto scrollbar-custom',
+ contentPadding === 'default' && 'px-6 pt-0 pb-10',
+ contentPadding === 'compact' && 'px-6 pt-0 pb-2'
+ )
+)
+
const gridStyle = computed(() => ({
gridTemplateColumns: hasRightPanel.value
- ? `${hasLeftPanel.value && showLeftPanel.value ? '14rem' : '0rem'} 1fr ${isRightPanelOpen.value ? '18rem' : '0rem'}`
- : `${hasLeftPanel.value && showLeftPanel.value ? '14rem' : '0rem'} 1fr`
+ ? `${hasLeftPanel.value && showLeftPanel.value ? leftPanelWidth : '0rem'} 1fr ${isRightPanelOpen.value ? '18rem' : '0rem'}`
+ : `${hasLeftPanel.value && showLeftPanel.value ? leftPanelWidth : '0rem'} 1fr`
}))
const toggleLeftPanel = () => {
diff --git a/src/composables/README.md b/src/composables/README.md
index cccc7d3df8..e1be581685 100644
--- a/src/composables/README.md
+++ b/src/composables/README.md
@@ -247,7 +247,7 @@ General-purpose composables:
| `useTreeExpansion` | Handles tree node expansion state |
| `useWorkflowAutoSave` | Handles automatic workflow saving |
-| `useWorkflowPersistence` | Manages workflow persistence |
+| `useWorkflowPersistenceV2` | Manages workflow persistence |
| `useWorkflowValidation` | Validates workflow integrity |
## Usage Guidelines
diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index 88e48a9b26..601cf5cc63 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -23,7 +23,10 @@ export enum ServerFeatureFlag {
TEAM_WORKSPACES_ENABLED = 'team_workspaces_enabled',
USER_SECRETS_ENABLED = 'user_secrets_enabled',
NODE_REPLACEMENTS = 'node_replacements',
- NODE_LIBRARY_ESSENTIALS_ENABLED = 'node_library_essentials_enabled'
+ NODE_LIBRARY_ESSENTIALS_ENABLED = 'node_library_essentials_enabled',
+ WORKFLOW_SHARING_ENABLED = 'workflow_sharing_enabled',
+ COMFYHUB_UPLOAD_ENABLED = 'comfyhub_upload_enabled',
+ COMFYHUB_PROFILE_GATE_ENABLED = 'comfyhub_profile_gate_enabled'
}
/**
@@ -130,6 +133,29 @@ export function useFeatureFlags() {
false
)
)
+ },
+ get workflowSharingEnabled() {
+ // UI is also gated on `isCloud` in TopMenuSection; default false
+ // to match other flags' opt-in convention.
+ return resolveFlag(
+ ServerFeatureFlag.WORKFLOW_SHARING_ENABLED,
+ remoteConfig.value.workflow_sharing_enabled,
+ false
+ )
+ },
+ get comfyHubUploadEnabled() {
+ return resolveFlag(
+ ServerFeatureFlag.COMFYHUB_UPLOAD_ENABLED,
+ remoteConfig.value.comfyhub_upload_enabled,
+ false
+ )
+ },
+ get comfyHubProfileGateEnabled() {
+ return resolveFlag(
+ ServerFeatureFlag.COMFYHUB_PROFILE_GATE_ENABLED,
+ remoteConfig.value.comfyhub_profile_gate_enabled,
+ false
+ )
}
})
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index c7b3ffd326..72d5315eb7 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2998,7 +2998,131 @@
"actionbar": {
"dockToTop": "Dock to top",
"feedback": "Feedback",
- "feedbackTooltip": "Feedback"
+ "feedbackTooltip": "Feedback",
+ "share": "Share",
+ "shareTooltip": "Share workflow"
+ },
+ "shareWorkflow": {
+ "shareLinkTab": "Share",
+ "publishToHubTab": "Publish",
+ "loadingTitle": "Share workflow",
+ "unsavedTitle": "Save workflow first",
+ "unsavedDescription": "You must save your workflow before sharing. Save it now to continue.",
+ "saveButton": "Save workflow",
+ "saving": "Saving...",
+ "workflowNameLabel": "Workflow name",
+ "createLinkTitle": "Share workflow",
+ "createLinkDescription": "When you create a link for your workflow, you will share these media items along with your workflow",
+ "privateAssetsDescription": "Your workflow contains private models and/or media files",
+ "createLinkButton": "Create a link",
+ "creatingLink": "Creating a link...",
+ "successTitle": "Workflow successfully published!",
+ "successDescription": "Anyone with this link can view and use this workflow. If you make changes to this workflow, you can republish to update the shared version.",
+ "hasChangesTitle": "Share workflow",
+ "hasChangesDescription": "You have made changes since this workflow was last published.",
+ "updateLinkButton": "Update link",
+ "updatingLink": "Updating link...",
+ "publishedOn": "Published on {date}",
+ "copyLink": "Copy",
+ "linkCopied": "Copied!",
+ "shareUrlLabel": "Share URL",
+ "loadFailed": "Failed to load shared workflow",
+ "saveFailedTitle": "Save failed",
+ "saveFailedDescription": "Failed to save workflow. Please try again.",
+ "mediaLabel": "{count} Media File | {count} Media Files",
+ "modelsLabel": "{count} Model | {count} Models",
+ "checkingAssets": "Checking media visibility…",
+ "acknowledgeCheckbox": "I understand these media items will be published and made public",
+ "inLibrary": "In library",
+ "comfyHubTitle": "Upload to ComfyHub",
+ "comfyHubDescription": "ComfyHub is ComfyUI's official community hub.\nYour workflow will have a public page viewable by all.",
+ "comfyHubButton": "Upload to ComfyHub"
+ },
+ "openSharedWorkflow": {
+ "dialogTitle": "Open shared workflow",
+ "author": "Author:",
+ "copyDescription": "Opening the workflow will create a new copy in your workspace",
+ "nonPublicAssetsWarningLine1": "This workflow comes with non-public assets.",
+ "nonPublicAssetsWarningLine2": "These will be imported to your library when you open the workflow",
+ "copyAssetsAndOpen": "Import assets & open workflow",
+ "openWorkflow": "Open workflow",
+ "openWithoutImporting": "Open without importing",
+ "importFailed": "Failed to import workflow assets",
+ "loadError": "Could not load this shared workflow. Please try again later."
+ },
+ "comfyHubPublish": {
+ "title": "Publish to ComfyHub",
+ "stepDescribe": "Describe your workflow",
+ "stepExamples": "Add output examples",
+ "stepFinish": "Finish publishing",
+ "workflowName": "Workflow name",
+ "workflowNamePlaceholder": "Tip: enter a descriptive name that's easy to search",
+ "workflowDescription": "Workflow description",
+ "workflowDescriptionPlaceholder": "What makes your workflow exciting and special? Be specific so people know what to expect.",
+ "workflowType": "Workflow type",
+ "workflowTypePlaceholder": "Select the type",
+ "workflowTypeImageGeneration": "Image generation",
+ "workflowTypeVideoGeneration": "Video generation",
+ "workflowTypeUpscaling": "Upscaling",
+ "workflowTypeEditing": "Editing",
+ "tags": "Tags",
+ "tagsDescription": "Select tags so people can find your workflow faster",
+ "tagsPlaceholder": "Enter tags that match your workflow to help people find it e.g #nanobanana, #anime or #faceswap",
+ "selectAThumbnail": "Select a thumbnail",
+ "showMoreTags": "Show more...",
+ "showLessTags": "Show less...",
+ "suggestedTags": "Suggested tags",
+ "thumbnailImage": "Image",
+ "thumbnailVideo": "Video",
+ "thumbnailImageComparison": "Image comparison",
+ "uploadThumbnail": "Upload an image",
+ "uploadVideo": "Upload a video",
+ "uploadComparison": "Upload before and after",
+ "thumbnailPreview": "Thumbnail preview",
+ "uploadPromptClickToBrowse": "Click to browse or",
+ "uploadPromptDropImage": "drop an image here",
+ "uploadPromptDropVideo": "drop a video here",
+ "uploadComparisonBeforePrompt": "Before",
+ "uploadComparisonAfterPrompt": "After",
+ "uploadThumbnailHint": "1:1 preferred, 1080p max",
+ "back": "Back",
+ "next": "Next",
+ "publishButton": "Publish to ComfyHub",
+ "examplesDescription": "Add up to {total} additional sample images",
+ "uploadAnImage": "Click to browse or drag an image",
+ "uploadExampleImage": "Upload example image",
+ "exampleImage": "Example image {index}",
+ "videoPreview": "Video thumbnail preview",
+ "maxExamples": "You can select up to {max} examples",
+ "createProfileToPublish": "Create a profile to publish to ComfyHub",
+ "createProfileCta": "Create a profile"
+ },
+ "comfyHubProfile": {
+ "checkingAccess": "Checking your publishing access...",
+ "profileCreationNav": "Profile creation",
+ "introTitle": "Publish to the ComfyHub",
+ "introDescription": "Publish your workflows, build your portfolio and get discovered by millions of users",
+ "introSubtitle": "To share your workflow on ComfyHub, let's first create your profile.",
+ "createProfileButton": "Create my profile",
+ "startPublishingButton": "Start publishing",
+ "modalTitle": "Create your profile on ComfyHub",
+ "createProfileTitle": "Create your Comfy Hub profile",
+ "uploadCover": "+ Upload a cover",
+ "uploadProfilePicture": "+ Upload a profile picture",
+ "chooseProfilePicture": "Choose a profile picture",
+ "nameLabel": "Your name",
+ "namePlaceholder": "Enter your name here",
+ "usernameLabel": "Your username (required)",
+ "usernamePlaceholder": "@",
+ "descriptionLabel": "Your description",
+ "descriptionPlaceholder": "Tell the community about yourself...",
+ "createProfile": "Create profile",
+ "creatingProfile": "Creating profile...",
+ "successTitle": "Looking good, {'@'}{username}!",
+ "successProfileUrl": "Your profile page is live at",
+ "successProfileLink": "comfy.com/p/{username}",
+ "successDescription": "You can now upload your workflow to your creator page",
+ "uploadWorkflowButton": "Upload my workflow"
},
"desktopDialogs": {
"": {
diff --git a/src/platform/navigation/preservedQueryNamespaces.ts b/src/platform/navigation/preservedQueryNamespaces.ts
index f8fb0a50e9..944e578e05 100644
--- a/src/platform/navigation/preservedQueryNamespaces.ts
+++ b/src/platform/navigation/preservedQueryNamespaces.ts
@@ -1,4 +1,5 @@
export const PRESERVED_QUERY_NAMESPACES = {
TEMPLATE: 'template',
- INVITE: 'invite'
+ INVITE: 'invite',
+ SHARE: 'share'
} as const
diff --git a/src/platform/remoteConfig/types.ts b/src/platform/remoteConfig/types.ts
index 63846e4523..f931259a98 100644
--- a/src/platform/remoteConfig/types.ts
+++ b/src/platform/remoteConfig/types.ts
@@ -48,4 +48,7 @@ export type RemoteConfig = {
node_library_essentials_enabled?: boolean
free_tier_credits?: number
new_free_tier_subscriptions?: boolean
+ workflow_sharing_enabled?: boolean
+ comfyhub_upload_enabled?: boolean
+ comfyhub_profile_gate_enabled?: boolean
}
diff --git a/src/platform/workflow/management/stores/workflowStore.test.ts b/src/platform/workflow/management/stores/workflowStore.test.ts
index 22a153e1ca..fcbe6ca187 100644
--- a/src/platform/workflow/management/stores/workflowStore.test.ts
+++ b/src/platform/workflow/management/stores/workflowStore.test.ts
@@ -183,6 +183,31 @@ describe('useWorkflowStore', () => {
const workflow = store.createTemporary('a.json')
expect(workflow.path).toBe('workflows/a (2).json')
})
+
+ it('should assign a workflow id to newly created temporary workflows', () => {
+ const workflow = store.createTemporary('id-test.json')
+ const state = JSON.parse(workflow.content!)
+
+ expect(typeof state.id).toBe('string')
+ expect(state.id.length).toBeGreaterThan(0)
+ })
+
+ it('should assign an id when temporary workflow data is missing one', () => {
+ const workflowDataWithoutId = {
+ ...defaultGraph,
+ id: undefined
+ }
+
+ const workflow = store.createTemporary(
+ 'missing-id.json',
+ workflowDataWithoutId
+ )
+ const state = JSON.parse(workflow.content!)
+
+ expect(typeof state.id).toBe('string')
+ expect(state.id.length).toBeGreaterThan(0)
+ expect(workflowDataWithoutId.id).toBeUndefined()
+ })
})
describe('openWorkflow', () => {
diff --git a/src/platform/workflow/management/stores/workflowStore.ts b/src/platform/workflow/management/stores/workflowStore.ts
index e493ff882b..d97193a7a5 100644
--- a/src/platform/workflow/management/stores/workflowStore.ts
+++ b/src/platform/workflow/management/stores/workflowStore.ts
@@ -255,6 +255,20 @@ export const useWorkflowStore = defineStore('workflow', () => {
return workflow
}
+ const ensureWorkflowId = (
+ workflowData?: ComfyWorkflowJSON
+ ): ComfyWorkflowJSON => {
+ const base = workflowData
+ ? (JSON.parse(JSON.stringify(workflowData)) as ComfyWorkflowJSON)
+ : (JSON.parse(defaultGraphJSON) as ComfyWorkflowJSON)
+
+ if (!base.id) {
+ base.id = generateUUID()
+ }
+
+ return base
+ }
+
/**
* Helper to create a new temporary workflow
*/
@@ -268,9 +282,9 @@ export const useWorkflowStore = defineStore('workflow', () => {
size: -1
})
- workflow.originalContent = workflow.content = workflowData
- ? JSON.stringify(workflowData)
- : defaultGraphJSON
+ const initialWorkflowData = ensureWorkflowId(workflowData)
+ workflow.originalContent = workflow.content =
+ JSON.stringify(initialWorkflowData)
workflowLookup.value[workflow.path] = workflow
return workflow
@@ -284,9 +298,13 @@ export const useWorkflowStore = defineStore('workflow', () => {
ComfyWorkflow.basePath + (path ?? 'Unsaved Workflow.json')
)
+ const normalizedWorkflowData = workflowData
+ ? ensureWorkflowId(workflowData)
+ : undefined
+
// Try to reuse an existing loaded workflow with the same filename
// that is not stored in the workflows directory
- if (path && workflowData) {
+ if (path && normalizedWorkflowData) {
const existingWorkflow = workflows.value.find(
(w) => w.fullFilename === path
)
@@ -296,12 +314,12 @@ export const useWorkflowStore = defineStore('workflow', () => {
ComfyWorkflow.basePath.slice(0, -1)
)
) {
- existingWorkflow.changeTracker.reset(workflowData)
+ existingWorkflow.changeTracker.reset(normalizedWorkflowData)
return existingWorkflow
}
}
- return createNewWorkflow(fullPath, workflowData)
+ return createNewWorkflow(fullPath, normalizedWorkflowData)
}
/**
diff --git a/src/platform/workflow/persistence/composables/useWorkflowPersistence.test.ts b/src/platform/workflow/persistence/composables/useWorkflowPersistence.test.ts
deleted file mode 100644
index e40a3e2440..0000000000
--- a/src/platform/workflow/persistence/composables/useWorkflowPersistence.test.ts
+++ /dev/null
@@ -1,289 +0,0 @@
-import { createTestingPinia } from '@pinia/testing'
-import { setActivePinia } from 'pinia'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import type * as I18n from 'vue-i18n'
-
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import type { WorkflowDraftSnapshot } from '@/platform/workflow/persistence/base/draftCache'
-import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
-import { useWorkflowDraftStore } from '@/platform/workflow/persistence/stores/workflowDraftStore'
-import { defaultGraphJSON } from '@/scripts/defaultGraph'
-import { setStorageValue } from '@/scripts/utils'
-
-const settingMocks = vi.hoisted(() => ({
- persistRef: null as { value: boolean } | null
-}))
-
-vi.mock('@/platform/settings/settingStore', async () => {
- const { ref } = await import('vue')
- settingMocks.persistRef = ref(true)
- return {
- useSettingStore: vi.fn(() => ({
- get: vi.fn((key: string) => {
- if (key === 'Comfy.Workflow.Persist')
- return settingMocks.persistRef!.value
- return undefined
- }),
- set: vi.fn()
- }))
- }
-})
-
-const mockToastAdd = vi.fn()
-vi.mock('primevue', () => ({
- useToast: () => ({
- add: mockToastAdd
- })
-}))
-
-vi.mock('vue-i18n', async (importOriginal) => {
- const actual = await importOriginal
()
- return {
- ...actual,
- useI18n: () => ({
- t: (key: string) => key
- })
- }
-})
-
-const loadBlankWorkflow = vi.fn()
-vi.mock('@/platform/workflow/core/services/workflowService', () => ({
- useWorkflowService: () => ({
- loadBlankWorkflow
- })
-}))
-
-vi.mock(
- '@/platform/workflow/templates/composables/useTemplateUrlLoader',
- () => ({
- useTemplateUrlLoader: () => ({
- loadTemplateFromUrlParams: vi.fn()
- })
- })
-)
-
-const executeCommand = vi.fn()
-vi.mock('@/stores/commandStore', () => ({
- useCommandStore: () => ({
- execute: executeCommand
- })
-}))
-
-type GraphChangedHandler = (() => void) | null
-
-const mocks = vi.hoisted(() => {
- const state = {
- graphChangedHandler: null as GraphChangedHandler,
- currentGraph: {} as Record
- }
- const serializeMock = vi.fn(() => state.currentGraph)
- const loadGraphDataMock = vi.fn()
- const apiMock = {
- clientId: 'test-client',
- initialClientId: 'test-client',
- addEventListener: vi.fn((event: string, handler: () => void) => {
- if (event === 'graphChanged') {
- state.graphChangedHandler = handler
- }
- }),
- removeEventListener: vi.fn(),
- getUserData: vi.fn(),
- storeUserData: vi.fn(),
- listUserDataFullInfo: vi.fn(),
- storeSetting: vi.fn(),
- getSettings: vi.fn(),
- deleteUserData: vi.fn(),
- moveUserData: vi.fn(),
- apiURL: vi.fn((path: string) => path)
- }
- return { state, serializeMock, loadGraphDataMock, apiMock }
-})
-
-vi.mock('@/scripts/app', () => ({
- app: {
- graph: {
- serialize: () => mocks.serializeMock()
- },
- rootGraph: {
- serialize: () => mocks.serializeMock()
- },
- loadGraphData: (...args: unknown[]) => mocks.loadGraphDataMock(...args),
- canvas: {}
- }
-}))
-
-vi.mock('@/scripts/api', () => ({
- api: mocks.apiMock
-}))
-
-describe('useWorkflowPersistence', () => {
- beforeEach(() => {
- vi.useFakeTimers()
- vi.setSystemTime(new Date('2025-01-01T00:00:00Z'))
- setActivePinia(createTestingPinia({ stubActions: false }))
- localStorage.clear()
- sessionStorage.clear()
- vi.clearAllMocks()
- settingMocks.persistRef!.value = true
- mockToastAdd.mockClear()
- useWorkflowDraftStore().reset()
- mocks.state.graphChangedHandler = null
- mocks.state.currentGraph = { initial: true }
- mocks.serializeMock.mockImplementation(() => mocks.state.currentGraph)
- mocks.loadGraphDataMock.mockReset()
- mocks.apiMock.clientId = 'test-client'
- mocks.apiMock.initialClientId = 'test-client'
- mocks.apiMock.addEventListener.mockImplementation(
- (event: string, handler: () => void) => {
- if (event === 'graphChanged') {
- mocks.state.graphChangedHandler = handler
- }
- }
- )
- mocks.apiMock.removeEventListener.mockImplementation(() => {})
- mocks.apiMock.listUserDataFullInfo.mockResolvedValue([])
- mocks.apiMock.getUserData.mockResolvedValue({
- status: 200,
- text: () => Promise.resolve(defaultGraphJSON)
- } as Response)
- mocks.apiMock.apiURL.mockImplementation((path: string) => path)
- })
-
- afterEach(() => {
- vi.useRealTimers()
- })
-
- it('persists snapshots for multiple workflows', async () => {
- const workflowStore = useWorkflowStore()
- const workflowA = workflowStore.createTemporary('DraftA.json')
- await workflowStore.openWorkflow(workflowA)
-
- const persistence = useWorkflowPersistence()
- expect(persistence).toBeDefined()
- expect(mocks.state.graphChangedHandler).toBeTypeOf('function')
-
- const graphA = { title: 'A' }
- mocks.state.currentGraph = graphA
- mocks.state.graphChangedHandler!()
- await vi.advanceTimersByTimeAsync(800)
-
- const workflowB = workflowStore.createTemporary('DraftB.json')
- await workflowStore.openWorkflow(workflowB)
- const graphB = { title: 'B' }
- mocks.state.currentGraph = graphB
- mocks.state.graphChangedHandler!()
- await vi.advanceTimersByTimeAsync(800)
-
- const drafts = JSON.parse(
- localStorage.getItem('Comfy.Workflow.Drafts') ?? '{}'
- ) as Record
-
- expect(Object.keys(drafts)).toEqual(
- expect.arrayContaining(['workflows/DraftA.json', 'workflows/DraftB.json'])
- )
- expect(JSON.parse(drafts['workflows/DraftA.json'].data)).toEqual(graphA)
- expect(JSON.parse(drafts['workflows/DraftB.json'].data)).toEqual(graphB)
- expect(drafts['workflows/DraftA.json'].isTemporary).toBe(true)
- expect(drafts['workflows/DraftB.json'].isTemporary).toBe(true)
- })
-
- it('evicts least recently used drafts beyond the limit', async () => {
- const workflowStore = useWorkflowStore()
- useWorkflowPersistence()
- expect(mocks.state.graphChangedHandler).toBeTypeOf('function')
-
- for (let i = 0; i < 33; i++) {
- const workflow = workflowStore.createTemporary(`Draft${i}.json`)
- await workflowStore.openWorkflow(workflow)
- mocks.state.currentGraph = { index: i }
- mocks.state.graphChangedHandler!()
- await vi.advanceTimersByTimeAsync(800)
- vi.setSystemTime(new Date(Date.now() + 60000))
- }
-
- const drafts = JSON.parse(
- localStorage.getItem('Comfy.Workflow.Drafts') ?? '{}'
- ) as Record
-
- expect(Object.keys(drafts).length).toBe(32)
- expect(drafts['workflows/Draft0.json']).toBeUndefined()
- expect(drafts['workflows/Draft32.json']).toBeDefined()
- })
-
- it('restores temporary tabs from cached drafts', async () => {
- const workflowStore = useWorkflowStore()
- const draftStore = useWorkflowDraftStore()
- const draftData = JSON.parse(defaultGraphJSON)
- draftStore.saveDraft('workflows/Unsaved Workflow.json', {
- data: JSON.stringify(draftData),
- updatedAt: Date.now(),
- name: 'Unsaved Workflow.json',
- isTemporary: true
- })
- setStorageValue(
- 'Comfy.OpenWorkflowsPaths',
- JSON.stringify(['workflows/Unsaved Workflow.json'])
- )
- setStorageValue('Comfy.ActiveWorkflowIndex', JSON.stringify(0))
-
- const { restoreWorkflowTabsState } = useWorkflowPersistence()
- restoreWorkflowTabsState()
-
- const restored = workflowStore.getWorkflowByPath(
- 'workflows/Unsaved Workflow.json'
- )
- expect(restored).toBeTruthy()
- expect(restored?.isTemporary).toBe(true)
- expect(
- workflowStore.openWorkflows.map((workflow) => workflow?.path)
- ).toContain('workflows/Unsaved Workflow.json')
- })
-
- it('shows error toast when draft save fails', async () => {
- const workflowStore = useWorkflowStore()
- const draftStore = useWorkflowDraftStore()
-
- const workflow = workflowStore.createTemporary('FailingDraft.json')
- await workflowStore.openWorkflow(workflow)
-
- useWorkflowPersistence()
- expect(mocks.state.graphChangedHandler).toBeTypeOf('function')
-
- vi.spyOn(draftStore, 'saveDraft').mockImplementation(() => {
- throw new Error('Storage quota exceeded')
- })
-
- mocks.state.currentGraph = { title: 'Test' }
- mocks.state.graphChangedHandler!()
- await vi.advanceTimersByTimeAsync(800)
-
- expect(mockToastAdd).toHaveBeenCalledWith(
- expect.objectContaining({
- severity: 'error',
- detail: expect.any(String)
- })
- )
- })
-
- it('clears all drafts when Persist is switched from true to false', async () => {
- const workflowStore = useWorkflowStore()
- const draftStore = useWorkflowDraftStore()
- const workflow = workflowStore.createTemporary('ClearDraft.json')
- await workflowStore.openWorkflow(workflow)
-
- useWorkflowPersistence()
- expect(mocks.state.graphChangedHandler).toBeTypeOf('function')
-
- mocks.state.currentGraph = { title: 'Draft to clear' }
- mocks.state.graphChangedHandler!()
- await vi.advanceTimersByTimeAsync(800)
-
- expect(draftStore.getDraft('workflows/ClearDraft.json')).toBeDefined()
-
- settingMocks.persistRef!.value = false
- await nextTick()
-
- expect(draftStore.getDraft('workflows/ClearDraft.json')).toBeUndefined()
- })
-})
diff --git a/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts b/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
deleted file mode 100644
index 37eedd5150..0000000000
--- a/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
+++ /dev/null
@@ -1,263 +0,0 @@
-import { useToast } from 'primevue'
-import { tryOnScopeDispose } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-
-import {
- hydratePreservedQuery,
- mergePreservedQueryIntoQuery
-} from '@/platform/navigation/preservedQueryManager'
-import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import {
- ComfyWorkflow,
- useWorkflowStore
-} from '@/platform/workflow/management/stores/workflowStore'
-import { useWorkflowDraftStore } from '@/platform/workflow/persistence/stores/workflowDraftStore'
-import { useTemplateUrlLoader } from '@/platform/workflow/templates/composables/useTemplateUrlLoader'
-import { api } from '@/scripts/api'
-import { app as comfyApp } from '@/scripts/app'
-import { getStorageValue, setStorageValue } from '@/scripts/utils'
-import { useCommandStore } from '@/stores/commandStore'
-
-export function useWorkflowPersistence() {
- const { t } = useI18n()
- const workflowStore = useWorkflowStore()
- const settingStore = useSettingStore()
- const route = useRoute()
- const router = useRouter()
- const templateUrlLoader = useTemplateUrlLoader()
- const TEMPLATE_NAMESPACE = PRESERVED_QUERY_NAMESPACES.TEMPLATE
- const workflowDraftStore = useWorkflowDraftStore()
- const toast = useToast()
-
- const ensureTemplateQueryFromIntent = async () => {
- hydratePreservedQuery(TEMPLATE_NAMESPACE)
- const mergedQuery = mergePreservedQueryIntoQuery(
- TEMPLATE_NAMESPACE,
- route.query
- )
-
- if (mergedQuery) {
- await router.replace({ query: mergedQuery })
- }
-
- return mergedQuery ?? route.query
- }
-
- const workflowPersistenceEnabled = computed(() =>
- settingStore.get('Comfy.Workflow.Persist')
- )
-
- const lastSavedJsonByPath = ref>({})
-
- watch(workflowPersistenceEnabled, (enabled) => {
- if (!enabled) {
- workflowDraftStore.reset()
- lastSavedJsonByPath.value = {}
- }
- })
-
- const persistCurrentWorkflow = () => {
- if (!workflowPersistenceEnabled.value) return
- const activeWorkflow = workflowStore.activeWorkflow
- if (!activeWorkflow) return
- const graphData = comfyApp.rootGraph.serialize()
- const workflowJson = JSON.stringify(graphData)
- const workflowPath = activeWorkflow.path
-
- if (workflowJson === lastSavedJsonByPath.value[workflowPath]) return
-
- try {
- workflowDraftStore.saveDraft(activeWorkflow.path, {
- data: workflowJson,
- updatedAt: Date.now(),
- name: activeWorkflow.key,
- isTemporary: activeWorkflow.isTemporary
- })
- } catch (error) {
- console.error('Failed to save draft', error)
- toast.add({
- severity: 'error',
- summary: t('g.error'),
- detail: t('toastMessages.failedToSaveDraft'),
- life: 3000
- })
- return
- }
-
- try {
- localStorage.setItem('workflow', workflowJson)
- if (api.clientId) {
- sessionStorage.setItem(`workflow:${api.clientId}`, workflowJson)
- }
- } catch (error) {
- // Only log our own keys and aggregate stats
- const ourKeys = Object.keys(sessionStorage).filter(
- (key) => key.startsWith('workflow:') || key === 'workflow'
- )
- console.error('QuotaExceededError details:', {
- workflowSizeKB: Math.round(workflowJson.length / 1024),
- totalStorageItems: Object.keys(sessionStorage).length,
- ourWorkflowKeys: ourKeys.length,
- ourWorkflowSizes: ourKeys.map((key) => ({
- key,
- sizeKB: Math.round(sessionStorage[key].length / 1024)
- })),
- error: error instanceof Error ? error.message : String(error)
- })
- throw error
- }
-
- lastSavedJsonByPath.value[workflowPath] = workflowJson
-
- if (!activeWorkflow.isTemporary && !activeWorkflow.isModified) {
- workflowDraftStore.removeDraft(activeWorkflow.path)
- return
- }
- }
-
- const loadPreviousWorkflowFromStorage = async () => {
- const workflowName = getStorageValue('Comfy.PreviousWorkflow')
- const preferredPath = workflowName
- ? `${ComfyWorkflow.basePath}${workflowName}`
- : null
- return await workflowDraftStore.loadPersistedWorkflow({
- workflowName,
- preferredPath,
- fallbackToLatestDraft: !workflowName
- })
- }
-
- const loadDefaultWorkflow = async () => {
- if (!settingStore.get('Comfy.TutorialCompleted')) {
- await settingStore.set('Comfy.TutorialCompleted', true)
- await useWorkflowService().loadBlankWorkflow()
- await useCommandStore().execute('Comfy.BrowseTemplates')
- } else {
- await comfyApp.loadGraphData()
- }
- }
-
- const initializeWorkflow = async () => {
- if (!workflowPersistenceEnabled.value) return
-
- try {
- const restored = await loadPreviousWorkflowFromStorage()
- if (!restored) {
- await loadDefaultWorkflow()
- }
- } catch (err) {
- console.error('Error loading previous workflow', err)
- await loadDefaultWorkflow()
- }
- }
-
- const loadTemplateFromUrlIfPresent = async () => {
- const query = await ensureTemplateQueryFromIntent()
- const hasTemplateUrl = query.template && typeof query.template === 'string'
-
- if (hasTemplateUrl) {
- await templateUrlLoader.loadTemplateFromUrl()
- }
- }
-
- // Setup watchers
- watch(
- () => workflowStore.activeWorkflow?.key,
- (activeWorkflowKey) => {
- if (!activeWorkflowKey) return
- setStorageValue('Comfy.PreviousWorkflow', activeWorkflowKey)
- // When the activeWorkflow changes, the graph has already been loaded.
- // Saving the current state of the graph to the localStorage.
- persistCurrentWorkflow()
- }
- )
-
- api.addEventListener('graphChanged', persistCurrentWorkflow)
-
- // Clean up event listener when component unmounts
- tryOnScopeDispose(() => {
- api.removeEventListener('graphChanged', persistCurrentWorkflow)
- })
-
- // Restore workflow tabs states
- const openWorkflows = computed(() => workflowStore.openWorkflows)
- const activeWorkflow = computed(() => workflowStore.activeWorkflow)
- const restoreState = computed<{ paths: string[]; activeIndex: number }>(
- () => {
- if (!openWorkflows.value || !activeWorkflow.value) {
- return { paths: [], activeIndex: -1 }
- }
-
- const paths = openWorkflows.value
- .map((workflow) => workflow?.path)
- .filter(
- (path): path is string =>
- typeof path === 'string' && path.startsWith(ComfyWorkflow.basePath)
- )
- const activeIndex = paths.indexOf(activeWorkflow.value.path)
-
- return { paths, activeIndex }
- }
- )
-
- // Get storage values before setting watchers
- const parsedWorkflows = JSON.parse(
- getStorageValue('Comfy.OpenWorkflowsPaths') || '[]'
- )
- const storedWorkflows = Array.isArray(parsedWorkflows)
- ? parsedWorkflows.filter(
- (entry): entry is string => typeof entry === 'string'
- )
- : []
- const parsedIndex = JSON.parse(
- getStorageValue('Comfy.ActiveWorkflowIndex') || '-1'
- )
- const storedActiveIndex =
- typeof parsedIndex === 'number' && Number.isFinite(parsedIndex)
- ? parsedIndex
- : -1
- watch(restoreState, ({ paths, activeIndex }) => {
- if (workflowPersistenceEnabled.value) {
- setStorageValue('Comfy.OpenWorkflowsPaths', JSON.stringify(paths))
- setStorageValue('Comfy.ActiveWorkflowIndex', JSON.stringify(activeIndex))
- }
- })
-
- const restoreWorkflowTabsState = () => {
- if (!workflowPersistenceEnabled.value) return
- const isRestorable = storedWorkflows?.length > 0 && storedActiveIndex >= 0
- if (!isRestorable) return
-
- storedWorkflows.forEach((path: string) => {
- if (workflowStore.getWorkflowByPath(path)) return
- const draft = workflowDraftStore.getDraft(path)
- if (!draft?.isTemporary) return
- try {
- const workflowData = JSON.parse(draft.data)
- workflowStore.createTemporary(draft.name, workflowData)
- } catch (err) {
- console.warn(
- 'Failed to parse workflow draft, creating with default',
- err
- )
- workflowDraftStore.removeDraft(path)
- workflowStore.createTemporary(draft.name)
- }
- })
-
- workflowStore.openWorkflowsInBackground({
- left: storedWorkflows.slice(0, storedActiveIndex),
- right: storedWorkflows.slice(storedActiveIndex)
- })
- }
-
- return {
- initializeWorkflow,
- loadTemplateFromUrlIfPresent,
- restoreWorkflowTabsState
- }
-}
diff --git a/src/platform/workflow/persistence/composables/useWorkflowPersistenceV2.ts b/src/platform/workflow/persistence/composables/useWorkflowPersistenceV2.ts
index ceec7d6429..93ff5bd168 100644
--- a/src/platform/workflow/persistence/composables/useWorkflowPersistenceV2.ts
+++ b/src/platform/workflow/persistence/composables/useWorkflowPersistenceV2.ts
@@ -33,6 +33,7 @@ import { clearAllV2Storage } from '../base/storageIO'
import { migrateV1toV2 } from '../migration/migrateV1toV2'
import { useWorkflowDraftStoreV2 } from '../stores/workflowDraftStoreV2'
import { useWorkflowTabState } from './useWorkflowTabState'
+import { useSharedWorkflowUrlLoader } from '@/platform/workflow/sharing/composables/useSharedWorkflowUrlLoader'
import { useTemplateUrlLoader } from '@/platform/workflow/templates/composables/useTemplateUrlLoader'
import { api } from '@/scripts/api'
import { app as comfyApp } from '@/scripts/app'
@@ -44,6 +45,7 @@ export function useWorkflowPersistenceV2() {
const settingStore = useSettingStore()
const route = useRoute()
const router = useRouter()
+ const sharedWorkflowUrlLoader = useSharedWorkflowUrlLoader()
const templateUrlLoader = useTemplateUrlLoader()
const TEMPLATE_NAMESPACE = PRESERVED_QUERY_NAMESPACES.TEMPLATE
const draftStore = useWorkflowDraftStoreV2()
@@ -183,6 +185,10 @@ export function useWorkflowPersistenceV2() {
}
}
+ const loadSharedWorkflowFromUrlIfPresent = async () => {
+ return await sharedWorkflowUrlLoader.loadSharedWorkflowFromUrl()
+ }
+
// Setup watchers
watch(
() => workflowStore.activeWorkflow?.key,
@@ -279,6 +285,7 @@ export function useWorkflowPersistenceV2() {
return {
initializeWorkflow,
+ loadSharedWorkflowFromUrlIfPresent,
loadTemplateFromUrlIfPresent,
restoreWorkflowTabsState
}
diff --git a/src/platform/workflow/sharing/components/AssetSectionList.vue b/src/platform/workflow/sharing/components/AssetSectionList.vue
new file mode 100644
index 0000000000..88626f99dd
--- /dev/null
+++ b/src/platform/workflow/sharing/components/AssetSectionList.vue
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+ -
+
+
+ {{ item.name }}
+
+
+ {{ $t('shareWorkflow.inLibrary') }}
+
+
+
+
+
+
+
+
+ {{ $t('openSharedWorkflow.dialogTitle') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('openSharedWorkflow.loadError') }}
+
+
+
+
+
+
+
+
+
+ {{ workflowName }}
+
+
+ {{ $t('openSharedWorkflow.copyDescription') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.test.ts b/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.test.ts
new file mode 100644
index 0000000000..56d67f4c5d
--- /dev/null
+++ b/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.test.ts
@@ -0,0 +1,532 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, reactive } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import ShareWorkflowDialogContent from '@/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue'
+
+const mockWorkflowStore = reactive<{
+ activeWorkflow: {
+ path: string
+ directory: string
+ filename: string
+ isTemporary: boolean
+ isModified: boolean
+ lastModified: number
+ } | null
+}>({
+ activeWorkflow: null
+})
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+ useWorkflowStore: () => mockWorkflowStore
+}))
+
+const mockToast = vi.hoisted(() => ({ add: vi.fn() }))
+
+vi.mock('primevue/usetoast', () => ({
+ useToast: () => mockToast
+}))
+
+vi.mock('@formkit/auto-animate/vue', () => ({
+ vAutoAnimate: {}
+}))
+
+const mockFlags = vi.hoisted(() => ({
+ comfyHubUploadEnabled: false,
+ comfyHubProfileGateEnabled: true
+}))
+
+const mockShowPublishDialog = vi.hoisted(() => vi.fn())
+
+vi.mock('@/composables/useFeatureFlags', () => ({
+ useFeatureFlags: () => ({
+ flags: mockFlags
+ })
+}))
+
+vi.mock(
+ '@/platform/workflow/sharing/composables/useComfyHubPublishDialog',
+ () => ({
+ useComfyHubPublishDialog: () => ({
+ show: mockShowPublishDialog
+ })
+ })
+)
+
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
+ useWorkflowService: () => ({
+ saveWorkflow: vi.fn(),
+ renameWorkflow: vi.fn()
+ })
+}))
+
+const mockShareServiceData = vi.hoisted(() => ({
+ items: [
+ {
+ id: 'test.png',
+ name: 'test.png',
+ preview_url: '',
+ storage_url: '',
+ model: false,
+ public: false,
+ in_library: false
+ },
+ {
+ id: 'model.safetensors',
+ name: 'model.safetensors',
+ preview_url: '',
+ storage_url: '',
+ model: true,
+ public: false,
+ in_library: false
+ }
+ ]
+}))
+
+const mockGetPublishStatus = vi.hoisted(() => vi.fn())
+const mockPublishWorkflow = vi.hoisted(() => vi.fn())
+const mockGetShareableAssets = vi.hoisted(() => vi.fn())
+
+vi.mock('@/platform/workflow/sharing/services/workflowShareService', () => ({
+ useWorkflowShareService: () => ({
+ getPublishStatus: mockGetPublishStatus,
+ publishWorkflow: mockPublishWorkflow,
+ getShareableAssets: mockGetShareableAssets
+ })
+}))
+
+const i18n = createI18n({
+ legacy: false,
+ locale: 'en',
+ messages: {
+ en: {
+ g: { close: 'Close', error: 'Error' },
+ shareWorkflow: {
+ unsavedDescription: 'You must save your workflow before sharing.',
+ shareLinkTab: 'Share',
+ publishToHubTab: 'Publish',
+ workflowNameLabel: 'Workflow name',
+ saving: 'Saving...',
+ saveButton: 'Save workflow',
+ createLinkButton: 'Create link',
+ creatingLink: 'Creating link...',
+ checkingAssets: 'Checking assets...',
+ successDescription: 'Anyone with this link...',
+ hasChangesDescription: 'You have made changes...',
+ updateLinkButton: 'Update link',
+ updatingLink: 'Updating link...',
+ publishedOn: 'Published on {date}',
+ mediaLabel: '{count} Media File | {count} Media Files',
+ modelsLabel: '{count} Model | {count} Models',
+ acknowledgeCheckbox: 'I understand these assets...',
+ loadFailed: 'Failed to load publish status'
+ },
+ comfyHubProfile: {
+ introTitle: 'Introducing ComfyHub',
+ createProfileButton: 'Create my profile',
+ startPublishingButton: 'Start publishing'
+ }
+ }
+ }
+})
+
+describe('ShareWorkflowDialogContent', () => {
+ const onClose = vi.fn()
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockPublishWorkflow.mockReset()
+ mockGetShareableAssets.mockReset()
+ mockWorkflowStore.activeWorkflow = {
+ path: 'workflows/test.json',
+ directory: 'workflows',
+ filename: 'test.json',
+ isTemporary: false,
+ isModified: false,
+ lastModified: 1000
+ }
+ mockGetPublishStatus.mockResolvedValue({
+ isPublished: false,
+ shareId: null,
+ shareUrl: null,
+ publishedAt: null
+ })
+ mockFlags.comfyHubUploadEnabled = false
+ mockShareServiceData.items = [
+ {
+ id: 'test.png',
+ name: 'test.png',
+ preview_url: '',
+ storage_url: '',
+ model: false,
+ public: false,
+ in_library: false
+ },
+ {
+ id: 'model.safetensors',
+ name: 'model.safetensors',
+ preview_url: '',
+ storage_url: '',
+ model: true,
+ public: false,
+ in_library: false
+ }
+ ]
+ mockPublishWorkflow.mockResolvedValue({
+ shareId: 'test-123',
+ shareUrl: 'https://comfy.org/shared/test-123',
+ publishedAt: new Date('2026-01-15')
+ })
+ mockGetShareableAssets.mockResolvedValue(mockShareServiceData.items)
+ })
+
+ function createWrapper() {
+ return mount(ShareWorkflowDialogContent, {
+ props: { onClose },
+ global: {
+ plugins: [i18n],
+ stubs: {
+ ComfyHubPublishIntroPanel: {
+ template:
+ '',
+ props: ['onCreateProfile']
+ },
+ 'comfy-hub-publish-intro-panel': {
+ template:
+ '',
+ props: ['onCreateProfile']
+ },
+ Input: {
+ template: '',
+ methods: { focus() {}, select() {} }
+ }
+ }
+ }
+ })
+ }
+
+ it('renders in unsaved state when workflow is modified', async () => {
+ mockWorkflowStore.activeWorkflow = {
+ path: 'workflows/test.json',
+ directory: 'workflows',
+ filename: 'test.json',
+ isTemporary: false,
+ isModified: true,
+ lastModified: 1000
+ }
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ expect(wrapper.text()).toContain(
+ 'You must save your workflow before sharing.'
+ )
+ expect(wrapper.text()).toContain('Save workflow')
+ })
+
+ it('renders share-link and publish tabs when comfy hub upload is enabled', async () => {
+ mockFlags.comfyHubUploadEnabled = true
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ expect(wrapper.text()).toContain('Share')
+ expect(wrapper.text()).toContain('Publish')
+ const publishTabPanel = wrapper.find('[data-testid="publish-tab-panel"]')
+ expect(publishTabPanel.exists()).toBe(true)
+ expect(publishTabPanel.attributes('style')).toContain('display: none')
+ })
+
+ it('hides the publish tab when comfy hub upload is disabled', async () => {
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ expect(wrapper.text()).toContain('Share')
+ expect(wrapper.text()).not.toContain('Publish')
+ expect(wrapper.find('[data-testid="publish-intro"]').exists()).toBe(false)
+ })
+
+ it('shows publish intro panel in the share dialog', async () => {
+ mockFlags.comfyHubUploadEnabled = true
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ const publishTab = wrapper
+ .findAll('button')
+ .find((button) => button.text().includes('Publish'))
+
+ expect(publishTab).toBeDefined()
+ await publishTab!.trigger('click')
+ await flushPromises()
+
+ expect(wrapper.find('[data-testid="publish-intro"]').exists()).toBe(true)
+ })
+
+ it('shows start publishing CTA in the publish intro panel', async () => {
+ mockFlags.comfyHubUploadEnabled = true
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ const publishTab = wrapper
+ .findAll('button')
+ .find((button) => button.text().includes('Publish'))
+ expect(publishTab).toBeDefined()
+
+ await publishTab!.trigger('click')
+ await flushPromises()
+
+ expect(wrapper.find('[data-testid="publish-intro-cta"]').text()).toBe(
+ 'Start publishing'
+ )
+ })
+
+ it('opens publish dialog from intro cta and closes share dialog', async () => {
+ mockFlags.comfyHubUploadEnabled = true
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ const publishTab = wrapper
+ .findAll('button')
+ .find((button) => button.text().includes('Publish'))
+
+ expect(publishTab).toBeDefined()
+ await publishTab!.trigger('click')
+ await flushPromises()
+
+ await wrapper.find('[data-testid="publish-intro-cta"]').trigger('click')
+ await nextTick()
+
+ expect(onClose).toHaveBeenCalledOnce()
+ expect(mockShowPublishDialog).toHaveBeenCalledOnce()
+ })
+
+ it('disables publish button when acknowledgment is unchecked', async () => {
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ const publishButton = wrapper
+ .findAll('button')
+ .find((button) => button.text().includes('Create link'))
+
+ expect(publishButton?.attributes('disabled')).toBeDefined()
+ })
+
+ it('enables publish button when acknowledgment is checked', async () => {
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ const checkbox = wrapper.find('input[type="checkbox"]')
+ await checkbox.setValue(true)
+ await nextTick()
+
+ const publishButton = wrapper
+ .findAll('button')
+ .find((button) => button.text().includes('Create link'))
+
+ expect(publishButton?.attributes('disabled')).toBeUndefined()
+ })
+
+ it('calls onClose when close button is clicked', async () => {
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ const closeButton = wrapper.find('[aria-label="Close"]')
+ await closeButton.trigger('click')
+
+ expect(onClose).toHaveBeenCalled()
+ })
+
+ it('publishes using acknowledged assets from initial load', async () => {
+ const initialShareableAssets = [
+ {
+ id: 'local-photo-id',
+ name: 'photo.png',
+ preview_url: '',
+ storage_url: '',
+ model: false,
+ public: false,
+ in_library: false
+ },
+ {
+ id: 'local-model-id',
+ name: 'model.safetensors',
+ preview_url: '',
+ storage_url: '',
+ model: true,
+ public: false,
+ in_library: false
+ }
+ ]
+
+ mockGetShareableAssets.mockResolvedValueOnce(initialShareableAssets)
+
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ const checkbox = wrapper.find('input[type="checkbox"]')
+ await checkbox.setValue(true)
+ await nextTick()
+
+ const publishButton = wrapper
+ .findAll('button')
+ .find((button) => button.text().includes('Create link'))
+ expect(publishButton).toBeDefined()
+
+ await publishButton!.trigger('click')
+ await flushPromises()
+
+ expect(mockGetShareableAssets).toHaveBeenCalledTimes(1)
+ expect(mockPublishWorkflow).toHaveBeenCalledWith(
+ 'workflows/test.json',
+ initialShareableAssets
+ )
+ })
+
+ it('shows update button when workflow was saved after last publish', async () => {
+ const publishedAt = new Date('2026-01-15T00:00:00Z')
+ const savedAfterPublishMs = publishedAt.getTime() + 60_000
+
+ mockWorkflowStore.activeWorkflow = {
+ path: 'workflows/test.json',
+ directory: 'workflows',
+ filename: 'test.json',
+ isTemporary: false,
+ isModified: false,
+ lastModified: savedAfterPublishMs
+ }
+ mockGetPublishStatus.mockResolvedValue({
+ isPublished: true,
+ shareId: 'abc-123',
+ shareUrl: 'https://comfy.org/shared/abc-123',
+ publishedAt
+ })
+
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ expect(wrapper.text()).toContain('You have made changes...')
+ expect(wrapper.text()).toContain('Update link')
+ })
+
+ it('shows copy URL when workflow has not changed since publish', async () => {
+ const publishedAt = new Date('2026-01-15T00:00:00Z')
+ const savedBeforePublishMs = publishedAt.getTime() - 60_000
+
+ mockWorkflowStore.activeWorkflow = {
+ path: 'workflows/test.json',
+ directory: 'workflows',
+ filename: 'test.json',
+ isTemporary: false,
+ isModified: false,
+ lastModified: savedBeforePublishMs
+ }
+ mockGetPublishStatus.mockResolvedValue({
+ isPublished: true,
+ shareId: 'abc-123',
+ shareUrl: 'https://comfy.org/shared/abc-123',
+ publishedAt
+ })
+
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ expect(wrapper.text()).toContain('Anyone with this link...')
+ expect(wrapper.text()).not.toContain('Update link')
+ })
+
+ describe('error and edge cases', () => {
+ it('renders unsaved state when workflow is temporary', async () => {
+ mockWorkflowStore.activeWorkflow = {
+ path: 'workflows/Unsaved Workflow.json',
+ directory: 'workflows',
+ filename: 'Unsaved Workflow.json',
+ isTemporary: true,
+ isModified: false,
+ lastModified: 1000
+ }
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ expect(wrapper.text()).toContain(
+ 'You must save your workflow before sharing.'
+ )
+ expect(wrapper.text()).toContain('Workflow name')
+ })
+
+ it('shows error toast when getPublishStatus rejects', async () => {
+ mockGetPublishStatus.mockRejectedValue(new Error('Server down'))
+
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ expect(wrapper.text()).toContain('Create link')
+ expect(mockToast.add).toHaveBeenCalledWith({
+ severity: 'error',
+ summary: 'Failed to load publish status'
+ })
+ })
+
+ it('shows error toast when publishWorkflow rejects', async () => {
+ mockGetShareableAssets.mockResolvedValue([])
+
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ mockPublishWorkflow.mockRejectedValue(new Error('Publish failed'))
+
+ const publishButton = wrapper
+ .findAll('button')
+ .find((btn) => btn.text().includes('Create link'))
+ expect(publishButton).toBeDefined()
+ await publishButton!.trigger('click')
+ await flushPromises()
+
+ expect(wrapper.text()).not.toContain('Anyone with this link...')
+ expect(mockToast.add).toHaveBeenCalledWith({
+ severity: 'error',
+ summary: 'Error',
+ detail: 'Publish failed',
+ life: 5000
+ })
+ })
+
+ it('renders unsaved state when no active workflow exists', async () => {
+ mockWorkflowStore.activeWorkflow = null
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ expect(wrapper.text()).toContain(
+ 'You must save your workflow before sharing.'
+ )
+ })
+
+ it('does not call publishWorkflow when workflow is null during publish', async () => {
+ mockGetShareableAssets.mockResolvedValue([])
+
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ mockWorkflowStore.activeWorkflow = null
+
+ const publishButton = wrapper
+ .findAll('button')
+ .find((btn) => btn.text().includes('Create link'))
+ if (publishButton) {
+ await publishButton.trigger('click')
+ await flushPromises()
+ }
+
+ expect(mockPublishWorkflow).not.toHaveBeenCalled()
+ })
+
+ it('does not switch to publishToHub mode when flag is disabled', async () => {
+ mockFlags.comfyHubUploadEnabled = false
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ expect(wrapper.find('[data-testid="publish-tab-panel"]').exists()).toBe(
+ false
+ )
+ expect(wrapper.text()).not.toContain('Publish')
+ })
+ })
+})
diff --git a/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue b/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue
new file mode 100644
index 0000000000..76f25adc81
--- /dev/null
+++ b/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue
@@ -0,0 +1,400 @@
+
+
+
+
+
+
+
+
+ {{ $t('shareWorkflow.shareLinkTab') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('shareWorkflow.unsavedDescription') }}
+
+
+
+
+
+
+
+ {{ $t('shareWorkflow.hasChangesDescription') }}
+
+
+ {{ $t('shareWorkflow.checkingAssets') }}
+
+
+
+
+
+
+
+
+
+ {{ $t('shareWorkflow.publishedOn', { date: formattedDate }) }}
+
+
+ {{ $t('shareWorkflow.successDescription') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('comfyHubProfile.introTitle') }}
+
+
+ {{ $t('comfyHubProfile.introDescription') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{
+ $t('comfyHubPublish.examplesDescription', {
+ selected: selectedExampleIds.length,
+ total: MAX_EXAMPLES
+ })
+ }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('comfyHubPublish.createProfileToPublish') }}
+
+
+
+
'
+ },
+ ComfyHubPublishNav: {
+ template: '',
+ props: ['currentStep']
+ },
+ 'comfy-hub-publish-nav': {
+ template: '',
+ props: ['currentStep']
+ },
+ ComfyHubPublishWizardContent: {
+ template:
+ '',
+ props: [
+ 'currentStep',
+ 'formData',
+ 'isFirstStep',
+ 'isLastStep',
+ 'onGoNext',
+ 'onGoBack',
+ 'onRequireProfile',
+ 'onGateComplete',
+ 'onGateClose'
+ ]
+ }
+ }
+ }
+ })
+ }
+
+ it('starts in publish wizard mode and prefetches profile asynchronously', async () => {
+ createWrapper()
+ await flushPromises()
+
+ expect(mockFetchProfile).toHaveBeenCalledWith()
+ })
+
+ it('switches to profile creation step when final-step publish requires profile', async () => {
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ await wrapper.find('[data-testid="require-profile"]').trigger('click')
+
+ expect(mockOpenProfileCreationStep).toHaveBeenCalledOnce()
+ })
+
+ it('returns to finish state after gate complete and does not auto-close', async () => {
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ await wrapper.find('[data-testid="require-profile"]').trigger('click')
+ await wrapper.find('[data-testid="gate-complete"]').trigger('click')
+
+ expect(mockOpenProfileCreationStep).toHaveBeenCalledOnce()
+ expect(mockCloseProfileCreationStep).toHaveBeenCalledOnce()
+ expect(mockFetchProfile).toHaveBeenCalledWith({ force: true })
+ expect(onClose).not.toHaveBeenCalled()
+ })
+
+ it('returns to finish state when profile gate is closed', async () => {
+ const wrapper = createWrapper()
+ await flushPromises()
+
+ await wrapper.find('[data-testid="require-profile"]').trigger('click')
+ await wrapper.find('[data-testid="gate-close"]').trigger('click')
+
+ expect(mockOpenProfileCreationStep).toHaveBeenCalledOnce()
+ expect(mockCloseProfileCreationStep).toHaveBeenCalledOnce()
+ expect(onClose).not.toHaveBeenCalled()
+ })
+})
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue b/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue
new file mode 100644
index 0000000000..776acf5251
--- /dev/null
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue
@@ -0,0 +1,94 @@
+
+
+
+
+ {{ $t('comfyHubPublish.title') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishFooter.vue b/src/platform/workflow/sharing/components/publish/ComfyHubPublishFooter.vue
new file mode 100644
index 0000000000..71afe4947f
--- /dev/null
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishFooter.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishNav.vue b/src/platform/workflow/sharing/components/publish/ComfyHubPublishNav.vue
new file mode 100644
index 0000000000..b318b46cc4
--- /dev/null
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishNav.vue
@@ -0,0 +1,122 @@
+
+
+
+
+
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.test.ts b/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.test.ts
new file mode 100644
index 0000000000..a80813e571
--- /dev/null
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.test.ts
@@ -0,0 +1,263 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import ComfyHubPublishWizardContent from './ComfyHubPublishWizardContent.vue'
+import type { ComfyHubPublishFormData } from '@/platform/workflow/sharing/types/comfyHubTypes'
+
+const mockCheckProfile = vi.hoisted(() => vi.fn())
+const mockToastErrorHandler = vi.hoisted(() => vi.fn())
+const mockHasProfile = ref(true)
+
+vi.mock(
+ '@/platform/workflow/sharing/composables/useComfyHubProfileGate',
+ () => ({
+ useComfyHubProfileGate: () => ({
+ checkProfile: mockCheckProfile,
+ hasProfile: mockHasProfile
+ })
+ })
+)
+
+vi.mock('@/composables/useErrorHandling', () => ({
+ useErrorHandling: () => ({
+ toastErrorHandler: mockToastErrorHandler
+ })
+}))
+
+const mockFlags = vi.hoisted(() => ({
+ comfyHubProfileGateEnabled: true
+}))
+
+vi.mock('@/composables/useFeatureFlags', () => ({
+ useFeatureFlags: () => ({
+ flags: mockFlags
+ })
+}))
+
+function createDefaultFormData(): ComfyHubPublishFormData {
+ return {
+ name: 'Test Workflow',
+ description: '',
+ workflowType: '',
+ tags: [],
+ thumbnailType: 'image',
+ thumbnailFile: null,
+ comparisonBeforeFile: null,
+ comparisonAfterFile: null,
+ exampleImages: [],
+ selectedExampleIds: []
+ }
+}
+
+describe('ComfyHubPublishWizardContent', () => {
+ const onPublish = vi.fn()
+ const onGoNext = vi.fn()
+ const onGoBack = vi.fn()
+ const onUpdateFormData = vi.fn()
+ const onRequireProfile = vi.fn()
+ const onGateComplete = vi.fn()
+ const onGateClose = vi.fn()
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockCheckProfile.mockResolvedValue(true)
+ mockHasProfile.value = true
+ mockFlags.comfyHubProfileGateEnabled = true
+ })
+
+ function createWrapper(
+ overrides: Partial<
+ InstanceType['$props']
+ > = {}
+ ) {
+ return mount(ComfyHubPublishWizardContent, {
+ props: {
+ currentStep: 'finish',
+ formData: createDefaultFormData(),
+ isFirstStep: false,
+ isLastStep: true,
+ onGoNext,
+ onGoBack,
+ onUpdateFormData,
+ onPublish,
+ onRequireProfile,
+ onGateComplete,
+ onGateClose,
+ ...overrides
+ },
+ global: {
+ mocks: {
+ $t: (key: string) => key
+ },
+ stubs: {
+ ComfyHubCreateProfileForm: {
+ template: '',
+ props: ['onProfileCreated', 'onClose', 'showCloseButton']
+ },
+ 'comfy-hub-create-profile-form': {
+ template: '',
+ props: ['onProfileCreated', 'onClose', 'showCloseButton']
+ },
+ ComfyHubDescribeStep: {
+ template: ''
+ },
+ ComfyHubExamplesStep: {
+ template: ''
+ },
+ ComfyHubThumbnailStep: {
+ template: ''
+ },
+ ComfyHubProfilePromptPanel: {
+ template:
+ '',
+ emits: ['request-profile']
+ },
+ ComfyHubPublishFooter: {
+ template:
+ '',
+ props: ['isFirstStep', 'isLastStep', 'isPublishDisabled'],
+ emits: ['publish', 'next', 'back']
+ }
+ }
+ }
+ })
+ }
+
+ describe('handlePublish — double-click guard', () => {
+ it('prevents concurrent publish calls', async () => {
+ let resolveCheck!: (v: boolean) => void
+ mockCheckProfile.mockReturnValue(
+ new Promise((resolve) => {
+ resolveCheck = resolve
+ })
+ )
+
+ const wrapper = createWrapper()
+
+ const publishBtn = wrapper.find('[data-testid="publish-btn"]')
+ await publishBtn.trigger('click')
+ await publishBtn.trigger('click')
+
+ resolveCheck(true)
+ await flushPromises()
+
+ expect(mockCheckProfile).toHaveBeenCalledTimes(1)
+ expect(onPublish).toHaveBeenCalledTimes(1)
+ })
+ })
+
+ describe('handlePublish — feature flag bypass', () => {
+ it('calls onPublish directly when profile gate is disabled', async () => {
+ mockFlags.comfyHubProfileGateEnabled = false
+
+ const wrapper = createWrapper()
+ await wrapper.find('[data-testid="publish-btn"]').trigger('click')
+ await flushPromises()
+
+ expect(mockCheckProfile).not.toHaveBeenCalled()
+ expect(onPublish).toHaveBeenCalledOnce()
+ })
+ })
+
+ describe('handlePublish — profile check routing', () => {
+ it('calls onPublish when profile exists', async () => {
+ mockCheckProfile.mockResolvedValue(true)
+
+ const wrapper = createWrapper()
+ await wrapper.find('[data-testid="publish-btn"]').trigger('click')
+ await flushPromises()
+
+ expect(mockCheckProfile).toHaveBeenCalledOnce()
+ expect(onPublish).toHaveBeenCalledOnce()
+ expect(onRequireProfile).not.toHaveBeenCalled()
+ })
+
+ it('calls onRequireProfile when no profile exists', async () => {
+ mockCheckProfile.mockResolvedValue(false)
+
+ const wrapper = createWrapper()
+ await wrapper.find('[data-testid="publish-btn"]').trigger('click')
+ await flushPromises()
+
+ expect(onRequireProfile).toHaveBeenCalledOnce()
+ expect(onPublish).not.toHaveBeenCalled()
+ })
+
+ it('shows toast and aborts when checkProfile throws', async () => {
+ const error = new Error('Network error')
+ mockCheckProfile.mockRejectedValue(error)
+
+ const wrapper = createWrapper()
+ await wrapper.find('[data-testid="publish-btn"]').trigger('click')
+ await flushPromises()
+
+ expect(mockToastErrorHandler).toHaveBeenCalledWith(error)
+ expect(onPublish).not.toHaveBeenCalled()
+ expect(onRequireProfile).not.toHaveBeenCalled()
+ })
+
+ it('resets guard after checkProfile error so retry is possible', async () => {
+ mockCheckProfile.mockRejectedValueOnce(new Error('Network error'))
+
+ const wrapper = createWrapper()
+ const publishBtn = wrapper.find('[data-testid="publish-btn"]')
+
+ await publishBtn.trigger('click')
+ await flushPromises()
+ expect(onPublish).not.toHaveBeenCalled()
+
+ mockCheckProfile.mockResolvedValue(true)
+ await publishBtn.trigger('click')
+ await flushPromises()
+ expect(onPublish).toHaveBeenCalledOnce()
+ })
+ })
+
+ describe('isPublishDisabled', () => {
+ it('disables publish when gate enabled and hasProfile is not true', () => {
+ mockHasProfile.value = null
+ const wrapper = createWrapper()
+
+ const footer = wrapper.find('[data-testid="publish-footer"]')
+ expect(footer.attributes('data-publish-disabled')).toBe('true')
+ })
+
+ it('enables publish when gate enabled and hasProfile is true', () => {
+ mockHasProfile.value = true
+ const wrapper = createWrapper()
+
+ const footer = wrapper.find('[data-testid="publish-footer"]')
+ expect(footer.attributes('data-publish-disabled')).toBe('false')
+ })
+
+ it('enables publish when gate is disabled regardless of profile', () => {
+ mockFlags.comfyHubProfileGateEnabled = false
+ mockHasProfile.value = null
+ const wrapper = createWrapper()
+
+ const footer = wrapper.find('[data-testid="publish-footer"]')
+ expect(footer.attributes('data-publish-disabled')).toBe('false')
+ })
+ })
+
+ describe('profileCreation step rendering', () => {
+ it('shows profile creation form when on profileCreation step', () => {
+ const wrapper = createWrapper({ currentStep: 'profileCreation' })
+ expect(wrapper.find('[data-testid="publish-gate-flow"]').exists()).toBe(
+ true
+ )
+ expect(wrapper.find('[data-testid="publish-footer"]').exists()).toBe(
+ false
+ )
+ })
+
+ it('shows wizard content when not on profileCreation step', () => {
+ const wrapper = createWrapper({ currentStep: 'finish' })
+ expect(wrapper.find('[data-testid="publish-gate-flow"]').exists()).toBe(
+ false
+ )
+ expect(wrapper.find('[data-testid="publish-footer"]').exists()).toBe(true)
+ })
+ })
+})
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.vue b/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.vue
new file mode 100644
index 0000000000..ba28d3f36a
--- /dev/null
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.vue
@@ -0,0 +1,143 @@
+
+
+
+
+
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubThumbnailStep.vue b/src/platform/workflow/sharing/components/publish/ComfyHubThumbnailStep.vue
new file mode 100644
index 0000000000..de741adb01
--- /dev/null
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubThumbnailStep.vue
@@ -0,0 +1,391 @@
+
+
+
+
+
+
+
+ {{ uploadSectionLabel }}
+
+
+
+
+
+
+
+
![]()
+
![]()
+
+
+
+
+
+
+
+
+
+
+