Commit Graph

1267 Commits

Author SHA1 Message Date
Alexander Brown
db929220af Chore: Update several Develeoper Dependencies (#7590)
## Summary

Hopefully this will stabilize the precommit and prepush behavior for
developers using Windows and speed up the runtime of a few scripts for
everyone else.

Includes fixes for unused refs that were caught by the updated vue-tsc.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7590-Chore-Update-several-Develeoper-Dependencies-2cc6d73d365081fdb27cd00e53b169d5)
by [Unito](https://www.unito.io)
2025-12-17 15:24:07 -08:00
Simula_r
ed04215d40 feat: add pricing table to user popover (#7583)
## Summary

Add ability to show pricing table from user popover. Misc style changes
and logic.

## Changes

- **What**: CurrentUserPopover.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Screenshots (if applicable)

<img width="481" height="672" alt="image"
src="https://github.com/user-attachments/assets/3dd55bc4-b49e-4b4e-920e-c97cabaa448a"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7583-feat-add-pricing-table-to-user-popover-2cc6d73d365081e1bbf1f2b351e53289)
by [Unito](https://www.unito.io)
2025-12-17 15:07:04 -07:00
Johnpaul Chiwetelu
890ab2019f feat: add Update ComfyUI option to Help Center for non-desktop environments (#7578)
## Summary

- Adds "Update ComfyUI" menu item to Help Center for portable/localhost
environments
- Wires existing `/v2/manager/queue/update_comfyui` endpoint to the
frontend
- Only visible in non-desktop, non-cloud distributions (where Electron
update mechanism isn't available)

## Changes

1. **Service layer**: Added `updateComfyUI()` method to
`comfyManagerService.ts`
2. **UI**: Added menu item with download icon to
`HelpCenterMenuContent.vue`
3. **i18n**: Added translation key for the new menu item

## Context

The new Manager UI (v4) lost the ability to update ComfyUI core in
non-desktop environments. This restores that functionality by
integrating the existing manager endpoint into the Help Center menu.

## Test plan

- [ ] Verify menu item appears in portable/localhost environments
- [ ] Verify menu item does NOT appear in desktop (Electron)
environments
- [ ] Verify menu item does NOT appear in cloud environments
- [ ] Test clicking the menu item triggers update and reboot

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7578-feat-add-Update-ComfyUI-option-to-Help-Center-for-non-desktop-environments-2cc6d73d3650811e9e4fe55515f50333)
by [Unito](https://www.unito.io)
2025-12-17 21:54:05 +01:00
Johnpaul Chiwetelu
e21f43f398 [feat] Replace NodeOptions with PrimeVue ContextMenu (#7114)
## Summary
- Add `NodeContextMenu.vue` using PrimeVue ContextMenu component with
native submenu support
- Rename `SubmenuPopover.vue` to `ColorPickerMenu.vue` (specialized for
color picker)
- Delete old components: `NodeOptions.vue`, `MenuOptionItem.vue`,
`useSubmenuPositioning.ts`
- Wire up context menu converter in `useMoreOptionsMenu.ts`
- Update tests to use hover instead of click for submenus

## Dependencies
**This PR depends on #7113** - the context menu converter infrastructure
PR. It should be merged after that PR.

## Benefits
- Native PrimeVue submenu support with proper keyboard navigation
- Constrained menu dimensions with overflow scrolling (max-h-[80vh])
- Cleaner component architecture with ~280 fewer lines of code
- Better separation: ColorPickerMenu handles only the custom color
picker UI

## Test plan
- [x] Typecheck passes
- [x] Lint passes
- [x] Knip passes
- [ ] Browser tests for submenu interactions pass
- [ ] Manual testing of node context menu

## Screenshots
(Menu UI should look the same, with improved submenu behavior)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7114-feat-Replace-NodeOptions-with-PrimeVue-ContextMenu-2be6d73d365081fda576fd691175eacf)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-12-17 06:47:28 +01:00
Alexander Brown
8d7dd9ed67 Component: Button migration 1: TextButton (#7537)
## Summary

Setup the variants and migrate existing uses of
TextButton/TextIconButton/IconButton to a single Button component.

Still a work in progress.

## Changes

- **What**: Add a new Button
- **What**: Migrate old buttons
- **What**: Delete old buttons
- **Dependencies**: CVA, upgrade Storybook

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7537-WIP-Component-Button-migration-2cb6d73d36508156a81bfc7bbddb36e9)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-12-16 20:38:24 -08:00
Benjamin Lu
e1294d66cc Hide queue overlay header menu on cloud (#7571)
Hide the QueueOverlayHeader more-options (…) menu when running in Cloud
distribution

This is being hidden instead of fixed because it deletes all user assets
on cloud, will be touched by /jobs, replaced by the second iteration of
design changes, along with changes to asset deletion happening soon. It
would be too risky to have a proper fix for it in the cloud deploy
today.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7571-Hide-queue-overlay-header-menu-on-cloud-2cb6d73d3650815a8faac8a8f0de91f0)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-12-16 13:37:52 -08:00
Alexander Brown
18ce8e940a Fix: Add slot for footer (used by Assets Sidebar) (#7532)
## Summary

It contains the selected items controls.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7532-Fix-Add-slot-for-footer-used-by-Assets-Sidebar-2ca6d73d36508138b044da226dd24cea)
by [Unito](https://www.unito.io)
2025-12-15 23:59:03 +00:00
Alexander Brown
79ddff692e Fix: Extra Scrollbars in Media Assets Sidebar (#7508)
## Summary

The Divider was throwing off the sizing assumptions for the sidebar
tab's width and the interaction between the Sidebar Tab's container
height and the ScrollPanel's and VirtualGrid's sizing calculations.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7508-Fix-Extra-Scrollbars-in-Media-Assets-Sidebar-2ca6d73d365081dd8475e209d9b062c0)
by [Unito](https://www.unito.io)
2025-12-15 15:21:48 -05:00
Terry Jia
fb944fef56 refactor: standardize z-index Tailwind classes (#7509)
## Summary

Replace arbitrary z-index values (z-[n]) with standard Tailwind
utilities.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7499

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7509-refactor-standardize-z-index-Tailwind-classes-2ca6d73d365081339e66f0c8e6fcc20b)
by [Unito](https://www.unito.io)
2025-12-15 15:09:11 -05:00
Terry Jia
4ec4da785b fix: render selection rectangle in DOM layer to appear above DOM widgets (#7474)
## Summary
Selection box was being drawn on canvas which appeared below DOM widgets
like images and textareas.

Now rendered via SelectionRectangle.vue with high z-index to ensure
visibility during drag selection.

## Screenshots (if applicable)
before
<img width="1268" height="1258" alt="image"
src="https://github.com/user-attachments/assets/7cb1271c-9ce6-4fac-83a9-ac783a309d97"
/>

after
<img width="1509" height="1129" alt="image"
src="https://github.com/user-attachments/assets/55dd698f-1213-4e60-ae46-9ed292ecd70c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7474-fix-render-selection-rectangle-in-DOM-layer-to-appear-above-DOM-widgets-2c96d73d36508142bc2ac0d0943043c5)
by [Unito](https://www.unito.io)
2025-12-15 13:41:10 -05:00
Benjamin Lu
abf966ab83 Topbar: add Custom Nodes Manager button (#7400)
Adds a desktop-only "Custom Nodes Manager" topbar button (Lucide puzzle)
in its own bordered island left of the actionbar. Button opens the
manager via useManagerState().openManager().

- New i18n key: menu.customNodesManager

<img width="318" height="147" alt="image"
src="https://github.com/user-attachments/assets/e36c5c7f-80d1-454c-87de-e0daa822fad1"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7400-Topbar-add-Custom-Nodes-Manager-button-2c76d73d3650810b9122da61a3c4be39)
by [Unito](https://www.unito.io)
2025-12-15 09:35:38 -08:00
Christian Byrne
eb04dc20f3 fix: staging badge shown in cloud settings panel (#7444)
## Summary

Fixes issue where settings panel on cloud was showing a "Staging" badge
because the badge's logic was being dictated by the buildtime config.
Adds the same pattern used everywhere else where, if cloud distribution,
use runtime config; otherwise, fallback to buildtime config. Allows
cloud to switch between staging and prod at runtime while local switches
at buildtime.

After fix:

<img width="2062" height="811" alt="image"
src="https://github.com/user-attachments/assets/e53547c5-3dcc-42ea-9e75-602fe7f855a2"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7444-fix-staging-badge-shown-in-cloud-settings-panel-2c86d73d36508154a788e8e2a6dd025a)
by [Unito](https://www.unito.io)
2025-12-13 18:41:17 -07:00
Christian Byrne
fd9747375d fix: refreshing assets causes entire panel to re-render (enter loading state) (#7449)
## Problem

The Media Assets panel's loading state is currently determined by the
loading state of the assets store (or something similar). When the store
is refetching and reconciling, it displays a loading spinner briefly on
the entire panel. This causes the following issues:

1. **Visual jarring**: The loading spinner creates an unpleasant visual
flash
2. **Unnecessary reflow**: All assets must re-render after the loading
state changes, causing layout reflow
3. **Performance degradation**: Re-rendering all items is
computationally expensive

## Expected Behavior

Items should be able to be inserted into the list without:

- Re-rendering any other items
- Showing a jarring loading flash
- Causing unnecessary reflow

The loading state of individual items should be decoupled from the
panel's overall loading state, allowing for incremental updates to the
list without affecting the entire panel's UI.


## After

(ignore random progress spinner, removed it after taking the video)


https://github.com/user-attachments/assets/95d7f111-e844-44e2-a0c6-6bcbc4a34797

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7449-fix-refreshing-assets-causes-entire-panel-to-re-render-enter-loading-state-2c86d73d365081be8206f9fdbbf66772)
by [Unito](https://www.unito.io)
2025-12-13 12:55:42 -08:00
Christian Byrne
a7c694f248 fix: update pricing table link (#7402)
## Summary

Update to https://docs.comfy.org/tutorials/partner-nodes/pricing --
actual link to the pricing table (before was sending to just the Partner
Nodes docs).

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7402-fix-update-pricing-table-link-2c76d73d365081f2b890ee6887c0314e)
by [Unito](https://www.unito.io)
2025-12-12 15:42:46 -07:00
AustinMroz
f2a0e5102e Cleanup app.graph usage (#7399)
Prior to the release of subgraphs, there was a single graph accessed
through `app.graph`. Now that there's multiple graphs, there's a lot of
code that needs to be reviewed and potentially updated depending on if
it cares about nearby nodes, all nodes, or something else requiring
specific attention.

This was done by simply changing the type of `app.graph` to unknown so
the typechecker will complain about every place it's currently used.
References were then updated to `app.rootGraph` if the previous usage
was correct, or actually rewritten.

By not getting rid of `app.graph`, this change already ensures that
there's no loss of functionality for custom nodes, but the prior typing
of `app.graph` can always be restored if future dissuasion of
`app.graph` usage creates issues.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7399-Cleanup-app-graph-usage-2c76d73d365081178743dfdcf07f44d0)
by [Unito](https://www.unito.io)
2025-12-11 23:37:34 -07:00
Simula_r
c1808db7c4 Fix/run button floating calc (#7340)
## Summary

Ensures the undocked ComfyRunButton resets to a valid position when the
app reopens after a browser resize. Since the component is dynamically
imported, we defer setInitialPosition until the suspense boundary has
been resolved rather than calling it on mount (when the import has not
been loaded / wxh are incorrect).

## Changes

- **What**:  ComfyActionbar.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

Fixes:
https://www.notion.so/comfy-org/Bug-Run-button-missing-after-undocking-moving-to-bottom-right-and-resizing-window-2c06d73d3650810f89e5eb5692f08b83?source=copy_link

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7340-Fix-run-button-floating-calc-2c66d73d36508122b489c90c81c6129a)
by [Unito](https://www.unito.io)
2025-12-11 23:31:25 -07:00
Alexander Brown
18b133d22f Style: Larger Node Text, More Sidebar Alignment (#7223)
## Summary

See what it looks like. How it feels. What do you think?

- Also was able to unify down to a single SearchBox component.

## Changes

- Bigger widget / slot labels
- Smaller header text
- Unified Searchboxes across sidebar tabs

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7223-Style-prototype-with-larger-node-text-2c36d73d365081f8a371c86f178fa1ff)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-11 19:47:28 -08:00
Alexander Brown
03e9dd4789 Feat: Remove the Nodes 2.0 Trial Banner (#7390)
## Summary

The option to try it out is still in the Menu if you're looking for it.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7390-Feat-Remove-the-Nodes-2-0-Trial-Banner-2c66d73d365081c3817ad5c89dd4029b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-11 17:13:26 -08:00
Yourz
c99865ce7f fix: disable the sign up and sign in button when form is invalid (#7376)
## Summary

<!-- One sentence describing what changed and why. -->

Add a disabled state to the sign-up button in the cloud onboarding
views. The button should be disabled when the form is invalid to prevent
users from submitting incomplete or incorrectly formatted information.

## Changes

- **What**: <!-- Core functionality added/modified -->
- Add disabled state to SignUp button and SignIn button when SignUp or
SignIn form is invalid.
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

Changes for this notion:
https://www.notion.so/comfy-org/Implement-Disable-sign-up-button-when-form-is-invalid-in-cloud-onboarding-2c56d73d365081edbf8bf06b1f5e52e5

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)
Sign In button

Before(button not disabled when email is invalid)
![Kapture 2025-12-11 at 22 30
59](https://github.com/user-attachments/assets/4278473b-350e-4fea-a299-199697c354b7)

After
![Kapture 2025-12-11 at 22 28
45](https://github.com/user-attachments/assets/b677a444-39ce-487c-a2ad-31369585e333)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7376-fix-disable-the-sign-up-and-sign-in-button-when-form-is-invalid-2c66d73d36508139af44cd7cb1e1aeb9)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-12-11 07:47:41 -07:00
Christian Byrne
29af56c154 fix: remove useless/misleading toast in topup dialog (#7375)
## Summary

Removes a toast that says "Purchase successful" when clicking the "Add
credits" button -- that button just opens Stripe checkout in another
tab, so the toast is misleading and could be wrong.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7375-fix-remove-useless-misleading-toast-in-topup-dialog-2c66d73d36508124bb65feaf7cf26712)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-12-11 07:34:58 -07:00
Yourz
a65e63a322 fix: throttle sign-up and sign-in button (#7358)
## Summary

<!-- One sentence describing what changed and why. -->
Throttle signup button to prevent duplicate Firebase accounts

## Changes

- **What**: <!-- Core functionality added/modified -->
  - Add throttle to SignUp Button in SignUpForm component
  - Add throttle to SignIn Button in SignInForm component
  - Add loading state to SignUp Button in SignUpForm component

## Review Focus
related to this Notion page:
https://www.notion.so/comfy-org/Implement-Throttle-signup-button-to-prevent-duplicate-Firebase-accounts-2c46d73d36508193a8d1fb5146674956

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7358-fix-throttle-sign-up-and-sign-in-button-2c66d73d365081278f4dde0f34d60153)
by [Unito](https://www.unito.io)
2025-12-11 05:48:22 -07:00
Christian Byrne
ea59fb5fc3 fix: hardcoded color tokens (not theme-aware) (#7366)
## Summary

Fixes instances of hardcoded color tokens (not semantic) which are not
theme-aware and therefore are incorrect on e.g. light mode.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7366-fix-hardcoded-color-tokens-not-theme-aware-2c66d73d365081e294aaff366fc78a8f)
by [Unito](https://www.unito.io)
2025-12-11 04:05:42 -07:00
Christian Byrne
b6efc52bf8 feat: show subscription tier below name on cloud (#7356)
## Summary

<img width="427" height="557" alt="image"
src="https://github.com/user-attachments/assets/1183e741-762d-4e52-b24a-77c976e5ad5f"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7356-feat-show-subscription-tier-below-name-on-cloud-2c66d73d365081829576c276bb5762ac)
by [Unito](https://www.unito.io)
2025-12-11 01:40:24 -07:00
Christian Byrne
87244a6954 fix: credits loading skeleton in user popover (#7347)
Show skeleton loader while credits are being fetched instead of briefly
displaying '0 credits'.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7347-Fix-credits-loading-skeleton-in-user-popover-2c66d73d36508103ae65d82e9bceb97d)
by [Unito](https://www.unito.io)
2025-12-10 23:04:01 -07:00
Christian Byrne
0eb2b9171a remove fraction digits on topup credit number (#7345)
## Summary

Don't show fraction digits on credits in the topup dialog.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7345-remove-fraction-digits-on-topup-credit-number-2c66d73d365081028ef8cf73113dd20c)
by [Unito](https://www.unito.io)
2025-12-10 22:51:24 -07:00
Christian Byrne
73e09a7fff fix: subscribe button overflow on cloud (#7343)
## Summary


| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="958" height="724" alt="image"
src="https://github.com/user-attachments/assets/4c19c94e-646d-4247-8824-471e5a161930"
/> | <img width="493" height="559" alt="Screenshot from 2025-12-10
21-13-36"
src="https://github.com/user-attachments/assets/6e915a50-e44c-4d07-a850-27ad36aed546"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7343-fix-subscribe-button-overflow-on-cloud-2c66d73d36508101be6bca61a9172c94)
by [Unito](https://www.unito.io)
2025-12-10 22:44:05 -07:00
Alexander Brown
72b5444d5a Devex: Linter updates (#7309)
## Summary

Updates for the linter/formatter deps, turning on some more rules.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7309-WIP-Linter-updates-2c56d73d36508101b3ece6bcaf7e5212)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
2025-12-10 11:08:47 -08:00
Christian Byrne
356ebe538f style: redesign TopUpCredits dialog (#7305)
Redesigned the TopUpCredits dialog to match Figma design specifications
with proper layout, typography, colors and selection states. Updated
dialog to use workflow-aware messaging, removed header, applied design
system tokens, and integrated subscription renewal dates. Modified
credit packages to use clean USD amounts with realistic video estimates
and fixed button disabled states to show blue with 30% opacity per Figma
design.

| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="675" height="863" alt="Screenshot from 2025-12-09
18-08-21"
src="https://github.com/user-attachments/assets/331c7a48-74ae-4a58-b70f-aa476c3fc87c"
/> | <img width="675" height="863" alt="Screenshot from 2025-12-09
18-06-23"
src="https://github.com/user-attachments/assets/dcb7b358-6045-4c89-82ed-3283a20eea89"
/>
 |
2025-12-09 21:30:56 -07:00
Christian Byrne
2c06c58621 feat: update subscription panel with tier-based design and improved UX (#7307)
Transforms the subscription credits panel from legacy design to
tier-based layout with Creator tier details, updated typography using
design system tokens, improved responsive credit breakdown layout, and
better subscription management flow. Updates credit formatting to remove
unnecessary decimals and Credits suffix, replaces external Stripe
billing portal with inline dialog, and reorganizes plan benefits section
with proper v-for structure matching Figma specifications.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7307-feat-update-subscription-panel-with-tier-based-design-and-improved-UX-2c56d73d365081ef8b63e262a6822c72)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
2025-12-09 21:30:06 -07:00
Christian Byrne
c13343b8fb style: redesign user popover with improved layout and integration with design system (#7303)
Implements new Figma design for the user popover with cleaner row-based
layout, proper design system tokens, and improved spacing. Replaces
PrimeVue icons with Lucide icons, fixes credits display to show whole
numbers without unnecessary decimals, updates menu item order to match
design specifications, and ensures consistent hover states and
typography throughout. All styling now uses Tailwind classes with proper
semantic design tokens instead of inline styles.

| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="815" height="973" alt="image"
src="https://github.com/user-attachments/assets/b2c15fa0-f545-4dcf-b224-cee846885337"
/> | <img width="815" height="973" alt="image"
src="https://github.com/user-attachments/assets/1f0bf488-5e15-4bb9-84b7-019cdd5105ae"
/> |

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
2025-12-09 20:47:57 -07:00
Benjamin Lu
2903560416 Move cancel button into actionbar (#7297)
## Summary
Move the interrupt control into the actionbar so cancellation sits with
the run controls.

## Changes
- add a cancel button to the actionbar with the existing interrupt
tooltip and disabled state
- remove the cancel button and related execution wiring from the top
menu section to avoid duplication

## Review Focus
- spacing/hover states of the new cancel control in both docked and
floating modes

## Screenshots (if applicable)
- n/a

Tests: pnpm typecheck; pnpm lint:fix

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7297-Move-cancel-button-into-actionbar-2c46d73d36508198b00cf011390289f6)
by [Unito](https://www.unito.io)
2025-12-09 14:32:03 -08:00
Christian Byrne
aef40834f3 add shared comfy credit conversion helpers (#7061)
Introduces cents<->usd<->credit converters plus basic formatters and
adds test. Lays groundwork to start converting UI components into
displaying comfy credits.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7061-add-shared-comfy-credit-conversion-helpers-2bb6d73d3650810bb34fdf9bb3fc115b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-09 05:11:27 -07:00
Christian Byrne
d3e9e15f07 change credits icons and tooltips (conditional on feature flag) (#7276)
This PR changes the credits icons and tooltips based on state of the
`subscription_tiers_enabled` feature flag.

When the flag is enabled (or undefined -- for local), the dollar icon is
replaced with the lucide-component icon in UserCredit and node price
badges (Partner Nodes), and a new tooltip row appears in
CurrentUserPopover displaying "Credits have been unified" with a
detailed hover tooltip explaining the credit unification across Partner
Nodes and Cloud workflows.

<img width="539" height="535" alt="image"
src="https://github.com/user-attachments/assets/7e952f9b-0abb-4979-85b7-0eecdeaf808c"
/>

Related:

- https://github.com/Comfy-Org/ComfyUI_frontend/pull/6115 (borrows badge
implementation from this PR)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7276-change-credits-icons-and-tooltips-conditional-on-feature-flag-2c46d73d365081809a6afd5861018a15)
by [Unito](https://www.unito.io)
2025-12-09 02:41:32 -07:00
Benjamin Lu
79a6421329 Fix cloud queue cancel to target specific jobs (#7176)
## Summary
- switch QueueProgressOverlay cancel action to target explicit prompt
ids on cloud via /api/queue delete
- keep non-cloud behavior using /interrupt for local installs
- ensure prompt id list generation is straightforward

## Testing
- pnpm typecheck
- pnpm lint:fix

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7176-Fix-cloud-queue-cancel-to-target-specific-jobs-2c06d73d365081b38ab2f81d71f62186)
by [Unito](https://www.unito.io)
2025-12-09 00:59:43 -07:00
Alexander Brown
5b91434ac4 Cleanup: Sidebar Tabs component and style alignment (#7215)
## Summary

Unify the current sidebar tabs, structurally and aesthetically.

## Changes

- Removes the Assets only Layout
- Standardizes the title styling and spacing across the tabs.

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7215-WIP-Sidebar-Tabs-component-and-style-alignment-2c26d73d3650817193bfd752e0d0bbde)
by [Unito](https://www.unito.io)
2025-12-09 00:33:08 -07:00
Christian Byrne
51a336fd36 style: update ui and design of system notification components (what's new, new release notification, help center) (#6300)
## Summary

Migrated help center and release notification components from hardcoded
colors to semantic design tokens for automatic light/dark theme support.

<img width="808" height="874" alt="Selection_2298"
src="https://github.com/user-attachments/assets/c7fb956e-700b-49df-bba0-b85705e89ce7"
/>

<img width="852" height="710" alt="Selection_2265"
src="https://github.com/user-attachments/assets/618205e1-5068-499d-80ab-72626b32d7e1"
/>

<img width="493" height="838" alt="Screenshot from 2025-10-25 21-46-11"
src="https://github.com/user-attachments/assets/7b696673-ec19-4a16-a0b5-ca744ae62fe1"
/>

<img width="493" height="838" alt="Screenshot from 2025-10-25 21-46-25"
src="https://github.com/user-attachments/assets/2767d722-a0e1-426d-82d9-6d5a59f373ee"
/>

## Changes

- **What**: Replaced hardcoded hex/rgb colors with semantic tokens in
HelpCenterMenuContent, WhatsNewPopup, and ReleaseNotificationToast
components
- **Design System**: Added `--interface-menu-surface` and
`--interface-menu-stroke` tokens to style.css for consistent menu
theming
- **UX**: Updated help center menu structure - added "Give Feedback"
button, renamed "Help & Feedback" to "Help & Support", switched to
Lucide icons (except Discord brand logo), added external-link icons

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6300-style-update-ui-and-design-of-system-notification-components-what-s-new-new-release-no-2986d73d365081238458ea7d304b641e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
2025-12-09 00:07:02 -07:00
Alexander Brown
5139e0564e Style: Font Consistency (#7220)
## Summary

Reduce lower level font definitions in most places. Default to Inter.

See #6912 

## Review Focus

Comic Sans is still an option...

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7220-Style-Font-Consistency-2c26d73d365081348f2dd8909dd9bb8f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
2025-12-08 19:48:11 -07:00
Terry Jia
f385ee8ca2 feat: add showScrollbar prop to VirtualGrid (#7227)
## Summary

Enable vertical scrollbar in Media Assets sidebar for better navigation
when content overflows.

The original implementation hid the scrollbar by default. 
Since the intent behind hiding it wasn't documented, this change
preserves the default behavior (showScrollbar: false) while allowing
components to opt-in to visible scrollbars when needed.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/6914

## Screenshots (if applicable)
<img width="681" height="890" alt="image"
src="https://github.com/user-attachments/assets/af48a440-6d04-4226-9482-eb17f8d11a40"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7227-feat-add-showScrollbar-prop-to-VirtualGrid-2c36d73d365081c8955ee632c6c644f7)
by [Unito](https://www.unito.io)
2025-12-08 21:31:16 -05:00
Johnpaul Chiwetelu
2636136f87 feat(sidebar): autofocus search input in Workflows, Model, and Node tabs (#7179)
## Summary
This PR improves the user experience by automatically focusing the
search input field when opening the Workflows, Model Library, or Node
Library sidebar tabs.

## Changes
- **SearchBox.vue**: Exposed a `focus()` method to allow parent
components to programmatically set focus on the input.
- **WorkflowsSidebarTab.vue**: Added a watcher to focus the search box
when the tab is activated.
- **ModelLibrarySidebarTab.vue**: Added autofocus on component mount.
- **NodeLibrarySidebarTab.vue**: Added autofocus on component mount.

## Motivation
Users often switch to these tabs specifically to search for an item.
Automatically focusing the search box reduces friction and saves a
click.



https://github.com/user-attachments/assets/8438e71c-a5e4-4b6c-8665-04d535d3ad8e

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7179-feat-sidebar-autofocus-search-input-in-Workflows-Model-and-Node-tabs-2c06d73d36508199b8c0e83d19f1cd84)
by [Unito](https://www.unito.io)
2025-12-09 01:45:40 +01:00
Benjamin Lu
259e9563c8 Hotfix: restore cancel button in top menu (#7234)
## 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>
2025-12-08 15:31:04 -08:00
Benjamin Lu
97c7b33713 Fix job details popover sticking after cancel/delete (#6930)
## Summary
- close the job details popover when its job disappears or timers fire
after list changes, and clear hover timers on unmount
- emit an explicit details-leave on cancel/delete clicks so the popover
closes even if hover-out never fires

Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/6907

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6930-Fix-job-details-popover-sticking-after-cancel-delete-2b66d73d365081dc990ae87d01455bad)
by [Unito](https://www.unito.io)
2025-12-08 15:00:12 -08:00
Terry Jia
6081404abb feat: Don't hide scrollbar in BaseModalLayout (#7226)
## Summary
- Add showScrollbar prop to BaseModalLayout component to control
scrollbar visibility
- Enable scrollbar in Templates dialog for better navigation when
content overflows

The original implementation used scrollbar-hide class by default. Since
the intent behind hiding the scrollbar wasn't documented in the original
PR (#5290), this change preserves the default behavior (showScrollbar:
false) while allowing individual dialogs to opt-in to visible
scrollbars.

The Templates dialog specifically benefits from a visible scrollbar as
it contains a large grid of template cards that requires scrolling.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/6915

## Screenshots (if applicable)
<img width="2490" height="1097" alt="image"
src="https://github.com/user-attachments/assets/711b060c-9752-4cee-84c0-d90210969f5a"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7226-feat-add-showScrollbar-prop-to-BaseModalLayout-2c36d73d365081b1b55bdcd50ca89030)
by [Unito](https://www.unito.io)
2025-12-08 13:53:35 -05:00
Terry Jia
8c5584c997 fix: preserve custom nodes i18n data when locales are lazily loaded (#7214)
## Summary
Custom nodes can provide localized translations via their locales
folder.
After the switch to lazy-loading locales (only English pre-loaded),
custom node i18n data was being lost because:
1. loadCustomNodesI18n() merges data before locale is loaded
2. loadLocale() uses setLocaleMessage() which overwrites everything

Solution: Store custom nodes i18n data and re-merge it after each
lazy-loaded locale completes loading.

- Add mergeCustomNodesI18n() function to store and merge custom data
- Modify loadLocale() to re-merge stored data after loading
- Add unit tests for the i18n merging behavior

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7025

## Screenshots (if applicable)
<img width="706" height="1335" alt="image"
src="https://github.com/user-attachments/assets/41e4ba2c-b4c0-4d0d-a104-1ede8939ff92"
/>
<img width="672" height="1319" alt="image"
src="https://github.com/user-attachments/assets/6c3e55e5-20d2-4093-a86a-7496db3dfe94"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7214-fix-preserve-custom-nodes-i18n-data-when-locales-are-lazily-loaded-2c26d73d3650812fab31edd71cf51a19)
by [Unito](https://www.unito.io)
2025-12-07 20:31:13 -05:00
Terry Jia
23ab924405 fix: add fixed min-width to sidebar panels to prevent content clipping (#7212)
## Summary

The default 10% min-size is too small for panels like Media Assets,
causing content to be clipped.
Use a fixed minimum width to ensure the panel content displays properly.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7210

## Screenshots


https://github.com/user-attachments/assets/65a15f0f-45c1-4361-adc9-eee4ccfad0ee

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7212-fix-add-fixed-min-width-to-sidebar-panels-to-prevent-content-clipping-2c16d73d365081d8a5a4de30c8eb5e07)
by [Unito](https://www.unito.io)
2025-12-06 12:42:14 -08:00
Alexander Brown
f74c176423 Cleanup: Properties Panel (#7137)
## Summary

- Code cleanup
- Copy, padding, color, alignment of components
- Subgraph Edit mode changes
- Partial fix for the Node Info location (need to do context menu still)
- Editing node title

### Still to-do

- Bi-directionality in values

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7137-WIP-Cleanup-Properties-Panel-2be6d73d3650813e9430f6bcb09dfb4d)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-05 21:33:52 -08:00
Rizumu Ayaka
3443c8fb65 fix: unintended text selection when resizing the splitter (#7187)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7187-fix-unintended-text-selection-when-resizing-the-splitter-2c06d73d365081b38644daa1f07fa1fb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <DrJKL0424@gmail.com>
2025-12-05 18:04:43 +00:00
Simula_r
ab777bc65c fix: vue nodes preview node to match lg and add node when clicked (#7146)
## Summary

Make the preview node match recent LGraphNode.vue look. Also add support
to click from search.

## Changes

- **What**: NodeSearchBox.vue, LGraphNodePreview.vue, nodeDefStore.ts

## Screenshots (if applicable)


https://github.com/user-attachments/assets/ed46d641-66bf-4e23-a207-9102609a7a4a


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7146-fix-vue-nodes-preview-node-to-match-lg-and-add-node-when-clicked-2bf6d73d3650814383b2c786e2ab4d02)
by [Unito](https://www.unito.io)
2025-12-04 15:31:38 -08:00
Terry Jia
643533c572 fix: should allow autoCols=true when server doesn't provide size (#7132)
## Summary

set autoCols = true by default for Logs Terminal

## Changes
Previously, the logs terminal had autoCols: false to preserve
server-side progress bar rendering, However, this caused large black
empty areas when the server terminal was narrower than the UI panel,
Many server environments don't provide terminal size at all, making this
tradeoff not worthwhile.

The original implementation set autoCols: false because the server
renders progress bars based on its own terminal width. If the frontend
used a different column count, progress bars would display incorrectly
(e.g., wrapped or truncated).

However, this created a poor user experience:
1. The terminal only filled a portion of the panel width (often 80
columns)
  2. The remaining space appeared as a large black empty area
3. Many backend environments don't provide size data at all, making the
fixed-width approach pointless

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7117

## Screenshots (if applicable)
before

https://github.com/user-attachments/assets/e38af410-9cf1-4175-8acc-39d11a5b73ce

after

https://github.com/user-attachments/assets/3d180318-609f-44c5-aac5-230f9e4ef596

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7132-fix-should-allow-autoCols-true-when-server-doesn-t-provide-size-2be6d73d365081e7bf3bf5988bdba39a)
by [Unito](https://www.unito.io)
2025-12-03 22:18:27 -05:00
Terry Jia
e9d5ce7f3f selection rectangle for vueNodes (#7088)
## Summary

fix: render selection rectangle in DOM layer for Vue nodes mode.

When Vue nodes are enabled, the canvas selection rectangle was being
rendered behind Vue node elements due to DOM stacking order (canvas
layer is below the TransformPane layer).

## Changes
- Adds a new SelectionRectangle.vue component that renders the selection
box as a DOM element
- Places it above the Vue nodes layer so it's always visible during drag
selection
- Skips canvas-based selection rectangle rendering when Vue nodes mode
is active
- Bonus: adds a semi-transparent blue fill style for better visibility


## Screenshots
before

https://github.com/user-attachments/assets/a8ee2ca3-00fd-4fdc-925a-dc9f846f4280

after

https://github.com/user-attachments/assets/66b7f2f5-f0a0-486f-9556-3872d07d65be

One more thing, the following improvement will be live selection,
something like:


https://github.com/user-attachments/assets/05a2b7ea-89b1-4568-bd2a-792f4fc11d8e

but I don't want to increase this PR, so I will send live selection
after this selection rectangle

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7088-selection-rectangle-for-vueNodes-2bd6d73d3650817aa2e9cf4526f179d8)
by [Unito](https://www.unito.io)
2025-12-03 08:26:57 -05:00
Rizumu Ayaka
68274134c8 feat: right side panel (#6952)
<img width="1183" height="809" alt="CleanShot 2025-11-26 at 16 01 15"
src="https://github.com/user-attachments/assets/c14dc5c3-a672-4dcd-917d-14f16310188e"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6952-feat-right-side-panel-2b76d73d36508112b121c283a479f42a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-02 22:55:24 -07:00