Hotfix: restore cancel button in top menu #7234
Conversation
📝 WalkthroughWalkthroughAdds a cancel-current-job action to the top menu: a new interrupt IconButton that is disabled when execution is idle and invokes the command store to execute the "Comfy.Interrupt" command when clicked; integrates execution and command stores and adds a tooltip config. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant TopMenu as TopMenuSection.vue
participant ExecStore as ExecutionStore
participant CmdStore as CommandStore
User->>TopMenu: Click interrupt IconButton
TopMenu->>ExecStore: read isIdle
alt isIdle == true
TopMenu-->>User: No action (button disabled / early return)
else isIdle == false
TopMenu->>CmdStore: execute("Comfy.Interrupt")
CmdStore-->>TopMenu: execution started/ack
TopMenu-->>User: Feedback (button state / tooltip)
end
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro ⛔ Files ignored due to path filters (20)
📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (12)src/**/*.vue📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/components/**/*.vue📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/components/**/*.{vue,css}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/components/**/*.{vue,ts,js}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
**/*.vue📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/components/**/*.vue📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (1)📚 Learning: 2025-12-06T00:52:35.750ZApplied to files:
⏰ 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)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
benceruleanlu
added
needs-backport
🎭 Playwright Test Results⏰ Completed at: 12/08/2025, 11:29:50 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/08/2025, 11:15:43 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
dosubot
bot
added
the
size:S
DrJKL
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.2 MB (baseline 3.2 MB) • ⚪ 0 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 978 kB (baseline 977 kB) • 🔴 +1.43 kBGraph 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 — 177 kB (baseline 177 kB) • ⚪ 0 BReusable component library chunks
Status: 6 added / 6 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.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
There was a problem hiding this comment.
Pull request overview
This hotfix restores the interrupt/cancel button functionality to the top menu action bar, allowing users to cancel currently running jobs directly from the top menu.
- Adds a cancel button with destructive styling (red background) to make it visually distinct
- Integrates with the execution store to disable the button when no job is running
- Uses the existing
Comfy.Interruptcommand for cancellation logic
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/TopMenuSection.vue(4 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/TopMenuSection.vue
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/components/TopMenuSection.vue
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/components/TopMenuSection.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/TopMenuSection.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/TopMenuSection.vue
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/components/TopMenuSection.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components
Files:
src/components/TopMenuSection.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/TopMenuSection.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/TopMenuSection.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (use<script setup lang="ts">, not Options API)
Avoid using<style>blocks; use Tailwind 4 for all styling
UsedefinePropswith TypeScript style default declaration; do not usewithDefaultsor runtime props declaration
PreferuseModelover separately defining a prop and emit
Usecomputedinstead of arefandwatchif possible
Avoid usingrefif a prop would accomplish the design goals; avoid usingcomputedif arefor prop directly would work
Do not import Vue macros unnecessarily
Never use thedark:Tailwind variant; use semantic values from thestyle.csstheme instead (e.g.,bg-node-component-surface)
Never use:class="[]"to merge class names; always usecn()from@/utils/tailwindUtil(e.g.,<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />)
Leverage VueUse functions for performance-enhancing styles
Avoid new usage of PrimeVue components
Use Vue 3 Teleport component when needed
Use Vue 3 Suspense for async components
Files:
src/components/TopMenuSection.vue
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,vue}: Use camelCase for variable and function names
Indent with 2 spaces (see.prettierrc)
Use single quotes for strings (see.prettierrc)
No trailing semicolons (see.prettierrc)
Maximum line width of 80 characters (see.prettierrc)
Sort and group imports by plugin (runpnpm formatbefore committing)
Never useanytype; use proper TypeScript types instead
Never useas anytype assertions; fix the underlying type issue instead
Avoid code comments unless absolutely necessary; write expressive, self-documenting code instead
When writing new code, ask if there is a simpler way to introduce the same functionality; if yes, choose the simpler approach
Use refactoring to make complex code simpler
Use es-toolkit for utility functions
Use Vite for fast development and building
Implement proper error handling
Write tests for all changes, especially bug fixes to catch future regressions
Files:
src/components/TopMenuSection.vue
**/components/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/TopMenuSection.vue
⏰ 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). (3)
- GitHub Check: Upload results
- GitHub Check: setup
- GitHub Check: setup
🔇 Additional comments (2)
src/components/TopMenuSection.vue (2)
23-33: Cancel button integration, state, and accessibility look correctThe cancel IconButton is placed appropriately before history, uses destructive tokens, is correctly disabled via
isExecutionIdle, and exposes an i18n-basedaria-label, which matches the existing accessibility and design patterns in this action bar.
111-113: Tooltip config follows existing pattern and uses i18n correctly
cancelJobTooltipConfigmirrorsqueueHistoryTooltipConfigand usest('menu.interrupt')withbuildTooltipConfig, which keeps tooltip behavior consistent and satisfies the “no raw UI strings” guideline.
| import { useCommandStore } from '@/stores/commandStore' | ||
| import { useExecutionStore } from '@/stores/executionStore' |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Store wiring for execution/command state is idiomatic; minor simplification possible
Importing useExecutionStore/useCommandStore, using storeToRefs for isIdle, and then consuming isExecutionIdle in both template and script is correct and reactive. You could optionally avoid the extra executionStore variable since it isn’t reused:
-import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionStore } from '@/stores/executionStore'
-const executionStore = useExecutionStore()
const commandStore = useCommandStore()
+const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
-const { isIdle: isExecutionIdle } = storeToRefs(executionStore)This keeps the execution store usage a bit tighter while preserving behavior.
Also applies to: 99-100, 117-117
🤖 Prompt for AI Agents
In src/components/TopMenuSection.vue around lines 90-91 (and similarly at 99-100
and 117), you can remove the intermediate executionStore/commandStore variables
and call storeToRefs directly on the result of
useExecutionStore()/useCommandStore(); update the imports to keep
useExecutionStore and useCommandStore, replace the current two-step pattern with
a single call that destructures the needed refs (e.g., isIdle) from
storeToRefs(useExecutionStore()) so you preserve reactivity but avoid the unused
store variable.
| const cancelCurrentJob = async () => { | ||
| if (isExecutionIdle.value) return | ||
| await commandStore.execute('Comfy.Interrupt') | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider basic error handling and test coverage for interrupt command
The guard on isExecutionIdle plus delegating to commandStore.execute('Comfy.Interrupt') is straightforward and correct. To align with the project’s error-handling and testing guidelines, consider:
- Wrapping
commandStore.executein atry/catchto handle or at least log failures (and optionally surface a user notification if that’s the established pattern here). - Ensuring you have a unit/e2e test that covers both paths (idle = no-op, non-idle = interrupt is executed and button is enabled).
🤖 Prompt for AI Agents
In src/components/TopMenuSection.vue around lines 135 to 138, the
cancelCurrentJob function calls commandStore.execute('Comfy.Interrupt') without
error handling and lacks tests for both idle and non-idle paths; wrap the await
commandStore.execute call in a try/catch, log the caught error via the project’s
logger (or console.error if no logger available) and optionally surface a user
notification using the existing notification/toast utility consistent with other
components, and add unit/e2e tests that assert (1) when isExecutionIdle is true
the function is a no-op and the interrupt is not called, and (2) when
isExecutionIdle is false the interrupt command is executed and failures are
handled (simulate execute throwing and assert the error is logged and
notification shown if implemented).
github-actions
bot
removed
the
New Browser Test Expectations
DrJKL
force-pushed
the
hotfix/topmenu-cancel-button
branch
from
48ba7fe to
f10f527
Compare
|
@benceruleanlu Backport to Please manually cherry-pick commit Conflicting files
|
## Summary - restore the interrupt/cancel button in the top menu action bar ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7234-Hotfix-restore-cancel-button-in-top-menu-2c36d73d365081b18dede1e49183a429) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
## Summary - restore the interrupt/cancel button in the top menu action bar ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7234-Hotfix-restore-cancel-button-in-top-menu-2c36d73d365081b18dede1e49183a429) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
3 participants
Summary
┆Issue is synchronized with this Notion page by Unito