feat: open template via URL in linear mode #6945
Conversation
christian-byrne
requested review from
a team,
Myestery and
comfyui-wiki
as code owners
dosubot
bot
added
the
size:S
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds support for a URL Changes
Sequence Diagram(s)sequenceDiagram
participant U as URL
participant R as Router
participant L as TemplateLoader
participant C as CanvasStore
U->>R: Request with query (`template`, `source`, `mode`)
R->>R: Preserve keys (`template`,`source`,`mode`)
R->>L: Invoke loader with query
L->>L: Parse `template` / `source` and `mode`
alt mode present
L->>L: Validate `mode` (^[a-zA-Z0-9_-]+$)
alt valid
L->>L: Load template
alt load success
opt mode == "linear"
L->>C: set linearMode = true
end
else load failure
L-->>C: do not change linearMode
end
else invalid
L-->>L: console.warn and ignore `mode`
end
else no mode
L->>L: Load template normally
end
L->>L: Remove `template`, `source`, `mode` from URL
L-->>R: Complete
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 11/26/2025, 11:32:56 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 11/26/2025, 11:41:33 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.18 MB (baseline 3.18 MB) • 🔴 +8 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 945 kB (baseline 944 kB) • 🔴 +778 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 138 kB (baseline 138 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.84 MB (baseline 3.84 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (1)
77-84: Consider validating recognized mode values.The format validation is correct, but currently any alphanumeric value passes validation even though only
mode=linearis supported (line 103). Other values are silently ignored.Consider adding a check for recognized mode values to provide better user feedback:
if (modeParam && !isValidParameter(modeParam)) { console.warn( `[useTemplateUrlLoader] Invalid mode parameter format: ${modeParam}` ) return } + +const SUPPORTED_MODES = ['linear'] as const +if (modeParam && !SUPPORTED_MODES.includes(modeParam)) { + console.warn( + `[useTemplateUrlLoader] Unsupported mode parameter: ${modeParam}. Supported modes: ${SUPPORTED_MODES.join(', ')}` + ) +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts(6 hunks)src/router.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/router.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables in the format
useXyz.ts
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
🧠 Learnings (2)
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{services,composables}/**/*.{ts,tsx} : Use `api.fileURL()` for static file access instead of constructing URLs directly
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:14.779Z
Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue files
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
🧬 Code graph analysis (1)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (1)
src/renderer/core/canvas/canvasStore.ts (1)
useCanvasStore(24-152)
🪛 ESLint
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
[error] 7-7: Unable to resolve path to module '@/renderer/core/canvas/canvasStore'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: collect
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
🔇 Additional comments (5)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (4)
17-20: Documentation clearly describes the new mode parameter.The updated comments appropriately document the new URL parameter format and validation requirements.
29-29: LGTM: Canvas store correctly initialized.The store initialization follows Vue composition API best practices and is necessary for toggling linear mode.
42-48: LGTM: URL cleanup correctly includes mode parameter.The cleanup function appropriately removes the
modeparameter along withtemplateandsource, ensuring the URL is clean after template loading completes.
103-106: Based on my analysis of the codebase, I can now provide the rewritten review comment.No initialization guards needed—
linearModeis a Vue ref that can be assigned directly.The pattern at lines 103–106 is correct and idiomatic.
linearModeis defined asref(false)in canvasStore and supports direct assignment. This same pattern is used elsewhere in the codebase (e.g.,workflowStore.ts:333), and a comment inuseVueNodeResizeTracking.ts:65explicitly states "Canvas is ready when this code runs; no defensive guards needed." The timing is appropriate since linearMode is set only after successful template load.src/router.ts (1)
80-85: LGTM: Mode parameter correctly added to preserved queries.The addition of
'mode'to the preserved query keys ensures the parameter persists across navigation, which is essential for the template URL loading feature to work correctly. This change aligns perfectly with the implementation inuseTemplateUrlLoader.ts.
christian-byrne
added
needs-backport
christian-byrne
force-pushed
the
linear-mode-url
branch
from
07fd472 to
126140a
Compare
dosubot
bot
added
size:L
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (1)
77-85: Optional: make mode parameter type check explicit for symmetry
modeParamis validated with the same regex as other params, which is good. For consistency withtemplateParam, you might also explicitly guard ontypeof modeParam === 'string'before validating, so non-string values (e.g. arrays) are clearly treated as unsupported rather than implicitly rejected via string coercion.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts(6 hunks)src/router.ts(1 hunks)tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/router.ts
🧰 Additional context used
📓 Path-based instructions (17)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
tests-ui/**/*.test.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)
tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features
Follow existing test patterns in the codebase
Use existing test utilities rather than writing custom utilities
Mock external dependencies in tests
Always prefer vitest mock functions over writing verbose manual mocks
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
**/*.{test,spec}.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Unit and component tests should be located in
tests-ui/or co-located with components assrc/components/**/*.{test,spec}.ts; E2E tests should be inbrowser_tests/
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
**/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables in the format
useXyz.ts
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
🧠 Learnings (10)
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebase
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Use existing test utilities rather than writing custom utilities
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Check assets/ directory for test data when writing tests
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test across multiple viewports
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{services,composables}/**/*.{ts,tsx} : Use `api.fileURL()` for static file access instead of constructing URLs directly
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:14.779Z
Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue files
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
🧬 Code graph analysis (2)
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts (1)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (1)
useTemplateUrlLoader(23-127)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (1)
src/renderer/core/canvas/canvasStore.ts (1)
useCanvasStore(24-152)
🪛 ESLint
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
[error] 7-7: Unable to resolve path to module '@/renderer/core/canvas/canvasStore'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: setup
- GitHub Check: collect
- GitHub Check: lint-and-format
🔇 Additional comments (6)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (2)
11-21: Mode parameter documentation and cleanup are consistent and clearThe JSDoc and
cleanupUrlParamscorrectly includemodealongsidetemplateandsource, and the shared validation rule is clearly documented. No changes requested.Also applies to: 39-47
7-8: Canvas store integration for linear mode looks correctImporting
useCanvasStoreand enablingcanvasStore.linearMode = trueonly when the template load succeeds andmode === 'linear'is a clean, side‑effect‑controlled way to hook URL state into the canvas. This matches the intended “linear mode via URL” behavior without impacting other modes.Also applies to: 29-30, 103-106
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts (4)
5-14: Test description updated to cover mode and validation is accurateThe header comment now correctly documents the
mode=linearbehavior and the inclusion of mode in input validation, keeping the test file self‑describing.
74-81: Canvas store mocking and reset strategy are appropriateMocking
useCanvasStorewith a sharedmockCanvasStoreand resettinglinearModeinbeforeEachgives you deterministic state across tests and isolates URL‑driven behavior cleanly. This aligns well with the existing mocking style. Based on learnings, this matches the preference for vitest mocks and existing utilities.Also applies to: 87-88
246-260: URL cleanup test correctly exercises mode removalIncluding
mode: 'linear'inmockQueryParamsand asserting thatrouter.replaceis called with only{ other: 'param' }verifies thatmodeis cleaned alongsidetemplateandsource. This gives good regression coverage for the new query key.
286-353: Linear mode behavior tests are comprehensiveThe new tests cover:
- Enabling
linearModeonly whenmode=linearand the template load succeeds.- Keeping
linearModefalse on load failure or when mode is notlinear.- Rejecting invalid mode values and accepting multiple valid formats while asserting the right
linearModestate.This gives strong confidence in the new URL‑driven linear mode behavior.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts(6 hunks)tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (17)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
tests-ui/**/*.test.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)
tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features
Follow existing test patterns in the codebase
Use existing test utilities rather than writing custom utilities
Mock external dependencies in tests
Always prefer vitest mock functions over writing verbose manual mocks
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
**/*.{test,spec}.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Unit and component tests should be located in
tests-ui/or co-located with components assrc/components/**/*.{test,spec}.ts; E2E tests should be inbrowser_tests/
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
**/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables in the format
useXyz.ts
Files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.tssrc/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
🧠 Learnings (9)
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebase
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Use existing test utilities rather than writing custom utilities
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Check assets/ directory for test data when writing tests
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test across multiple viewports
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{services,composables}/**/*.{ts,tsx} : Use `api.fileURL()` for static file access instead of constructing URLs directly
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
🧬 Code graph analysis (2)
tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts (1)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (1)
useTemplateUrlLoader(23-137)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (1)
src/platform/navigation/preservedQueryNamespaces.ts (1)
PRESERVED_QUERY_NAMESPACES(1-3)
🪛 ESLint
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
[error] 7-7: Unable to resolve path to module '@/renderer/core/canvas/canvasStore'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: collect
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
🔇 Additional comments (5)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (3)
78-94: Good defensive validation for the mode parameter.The validation logic correctly:
- Checks type and format using the same pattern as template/source
- Returns early for invalid formats to prevent injection
- Warns about unsupported modes while allowing graceful degradation
113-116: Correct timing for linear mode activation.Setting linear mode only after successful template load ensures the canvas state is only modified when the template is actually available.
7-7: Perfect! I now have enough information to verify the review comment. The TypeScript configuration shows that@/*maps to./src/*, which means:
@/renderer/core/canvas/canvasStoreresolves tosrc/renderer/core/canvas/canvasStore.ts- The file exists at this exact location
- The import is actively used in the composable function
The ESLint error is indeed a configuration issue where ESLint is not properly picking up TypeScript's path alias configuration, but the import resolves correctly at runtime.
ESLint import resolution error is a configuration issue, not an actual path problem.
The path alias
@/renderer/core/canvas/canvasStorecorrectly resolves tosrc/renderer/core/canvas/canvasStore.tsper the TypeScript configuration ("@/*": ["./src/*"]). The file exists and the import is actively used in the composable. ESLint's inability to resolve the path is a configuration oversight in ESLint's setup, not a genuine import issue—the import works correctly at runtime.tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts (2)
74-81: Well-structured mock for canvas store.The mock setup follows the existing pattern used for other dependencies (toast, router) and correctly exposes the
linearModeproperty needed for testing.
286-401: Excellent test coverage for the mode parameter.The test suite comprehensively covers:
- Successful linear mode activation
- Failure scenarios (no mode set on template load failure)
- Invalid input validation (special characters, arrays)
- Unsupported mode handling (warns but continues)
- Edge cases and integration with URL cleanup
The tests follow existing patterns and ensure the feature works correctly.
Based on learnings, the tests follow existing test patterns in the codebase and provide comprehensive coverage for the new feature.
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
Outdated
Show resolved
Hide resolved
christian-byrne
added
the
claude-review
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Comprehensive PR Review
This review is generated by Claude. It may not always be accurate, as with human reviewers. If you believe that any of the comments are invalid or incorrect, please state why for each. For others, please implement the changes in one way or another.
Review Summary
PR: feat: open template via URL in linear mode (#6945)
Impact: 159 additions, 4 deletions across 3 files
Issue Distribution
- Critical: 0
- High: 0
- Medium: 1
- Low: 0
Category Breakdown
- Architecture: 0 issues
- Security: 0 issues
- Performance: 0 issues
- Code Quality: 1 issue
Key Findings
Architecture & Design
The implementation follows established patterns in the ComfyUI frontend codebase. The feature properly integrates with the existing template loading system, URL query parameter handling, and canvas state management. The separation of concerns is maintained with proper use of composables and the router's preserved query tracker system.
Security Considerations
The implementation includes robust input validation using regex patterns to prevent path traversal and injection attacks. All URL parameters (template, source, and mode) are properly validated before use. The validation approach is consistent with existing security patterns in the codebase.
Performance Impact
The changes have minimal performance impact. The new mode parameter validation adds minimal overhead, and the linear mode activation only occurs after successful template loading, preventing unnecessary state changes on failed loads.
Integration Points
The integration with the preserved query tracker ensures proper URL state management across navigation. The canvas store integration is clean and follows the established reactive patterns. The feature gracefully handles edge cases like unsupported modes without breaking existing functionality.
Positive Observations
- Comprehensive Testing: The PR includes extensive unit tests covering all edge cases, validation scenarios, and error conditions
- Documentation: Clear JSDoc comments explain the functionality and supported URL formats
- Input Validation: Robust security measures prevent malicious input
- Error Handling: Proper error handling with user-friendly toast notifications
- Backward Compatibility: The feature is purely additive and doesn't break existing functionality
- Code Style: Consistent with established patterns and formatting standards
- Type Safety: Generally good TypeScript usage throughout the implementation
Next Steps
- Address the type safety issue in the inline comment to maintain strict TypeScript compliance
- Consider the suggested type predicate approach for better maintainability
- The implementation is otherwise ready for merge after addressing the minor type safety concern
This is a comprehensive automated review. For architectural decisions requiring human judgment, please request additional manual review.
github-actions
bot
removed
the
claude-review
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (2)
31-32: TightenisSupportedModeto avoid type assertions (optional)The
SUPPORTED_MODES+SupportedModepattern is good, butmode as SupportedModeinincludesis still an assertion you can avoid while keeping the type guard.You can slightly simplify and drop the cast like this:
- const isSupportedMode = (mode: string): mode is SupportedMode => { - return SUPPORTED_MODES.includes(mode as SupportedMode) - } + const isSupportedMode = (mode: string): mode is SupportedMode => { + return SUPPORTED_MODES.some(supportedMode => supportedMode === mode) + }This keeps the type predicate, avoids assertions on untrusted input, and still backs the console warning with the same
SUPPORTED_MODESlist.Also applies to: 42-46, 98-102
86-97: Consider avoidingas stringonroute.query.modeand clarifying invalid/array handlingCurrent logic works at runtime, but
const modeParam = route.query.mode as string | undefinedweakens type safety and makes thetypeof modeParam !== 'string'check misleading to TypeScript.You could make this more explicit and avoid the assertion:
- const modeParam = route.query.mode as string | undefined - - if ( - modeParam && - (typeof modeParam !== 'string' || !isValidParameter(modeParam)) - ) { - console.warn( - `[useTemplateUrlLoader] Invalid mode parameter format: ${modeParam}` - ) - return - } + const rawModeParam = route.query.mode + + if (Array.isArray(rawModeParam)) { + console.warn( + `[useTemplateUrlLoader] Invalid mode parameter format (array): ${rawModeParam}` + ) + return + } + + const modeParam = + typeof rawModeParam === 'string' ? rawModeParam : undefined + + if (modeParam && !isValidParameter(modeParam)) { + console.warn( + `[useTemplateUrlLoader] Invalid mode parameter format: ${modeParam}` + ) + return + }Optionally, since
modeis purely client‑side view state, you might also choose to ignore invalidmodevalues instead of aborting the template load (in contrast totemplate/source), depending on the product requirements.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts(6 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
**/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables in the format
useXyz.ts
Files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
🧠 Learnings (7)
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{services,composables}/**/*.{ts,tsx} : Use `api.fileURL()` for static file access instead of constructing URLs directly
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:14.779Z
Learning: Applies to **/*.{ts,tsx} : Never use `as any` type assertions - fix the underlying type issue
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:14.779Z
Learning: Applies to **/*.{ts,tsx} : Never use `any` type - use proper TypeScript types
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript for type safety
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.ts : Use TypeScript for type safety
Applied to files:
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
🧬 Code graph analysis (1)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (1)
src/platform/navigation/preservedQueryNamespaces.ts (1)
PRESERVED_QUERY_NAMESPACES(1-3)
🪛 ESLint
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
[error] 7-7: Unable to resolve path to module '@/renderer/core/canvas/canvasStore'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: collect
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
🔇 Additional comments (4)
src/platform/workflow/templates/composables/useTemplateUrlLoader.ts (4)
7-7: Verify canvas store import path resolutionThe
useCanvasStoreintegration itself looks fine, but ESLint reportsimport-x/no-unresolvedfor'@/renderer/core/canvas/canvasStore'. Please double‑check that:
src/renderer/core/canvas/canvasStore.tsexists and exportsuseCanvasStore- The
'@'alias is configured for this path in both TS and ESLintIf the path is correct, this may be a lint config/path‑mapping issue rather than a code issue.
Also applies to: 29-29
17-21: JSDoc updates correctly document the newmodeparameterThe extended examples and validation notes accurately reflect the new
modesupport and format constraints; nothing to change here.
48-49: URL/query cleanup extended tomodelooks consistentRemoving
modealongsidetemplateandsource, and then clearing the TEMPLATE preserved query namespace, keeps the URL state clean after handling template links; this matches the existing pattern.Also applies to: 55-55, 137-139
121-123: Linear mode activation after successful template load is well‑placedEnabling
canvasStore.linearModeonly when:
- the template load succeeds, and
modeParam === 'linear'is a clear and side‑effect‑scoped way to wire URL
modeinto the canvas store. No changes needed here.
## Summary Adds `mode` as a valid url query param when opening template from URL. https://github.com/user-attachments/assets/8e7efb1c-d842-4953-822a-f3cea7ddecb6 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6945-feat-open-template-via-URL-in-linear-mode-2b76d73d365081d8ad4af3d49a68a4ff) by [Unito](https://www.unito.io)
## Summary Adds `mode` as a valid url query param when opening template from URL. https://github.com/user-attachments/assets/8e7efb1c-d842-4953-822a-f3cea7ddecb6 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6945-feat-open-template-via-URL-in-linear-mode-2b76d73d365081d8ad4af3d49a68a4ff) by [Unito](https://www.unito.io)
|
@christian-byrne Successfully backported to #6967 |
|
@christian-byrne Successfully backported to #6968 |
github-actions
bot
removed
the
needs-backport
Backport of #6945 to `cloud/1.33` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6968-backport-cloud-1-33-feat-open-template-via-URL-in-linear-mode-2b76d73d365081c4b5d5c0727106fc29) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Backport of #6945 to `cloud/1.32` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6967-backport-cloud-1-32-feat-open-template-via-URL-in-linear-mode-2b76d73d3650810aaf26efea68272ed0) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Summary
Adds
modeas a valid url query param when opening template from URL.2025-11-25.17-05-30_processed_20251125_170610.mp4
┆Issue is synchronized with this Notion page by Unito