Commit Graph

281 Commits

Author SHA1 Message Date
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
Luke Mino-Altherr
ce4837a57c feat: display and upload Civitai preview images in model upload flow (#7274)
## Summary
Stores and displays base64-encoded preview images from Civitai during
the model upload flow, uploading the preview as a separate asset linked
to the model.

## Changes
- **Schema**: Added `preview_image` field to `AssetMetadata` schema
- **Service**: Added `uploadAssetFromBase64` method to convert base64
data to blob and upload via FormData
- **Upload Flow**: Modified wizard to first upload preview image as
asset, then link it to model via `preview_id`
- **UI**: Display 56x56px preview thumbnail alongside model filename in
confirmation and success steps

## Review Focus
- Base64 to blob conversion and FormData upload implementation
- Sequential upload flow (preview first, then model with preview_id
reference)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7274-feat-display-and-upload-Civitai-preview-images-in-model-upload-flow-2c46d73d365081ff9b74c1791d23f6dd)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-09 16:32:55 -08:00
Luke Mino-Altherr
6850c45d63 [feat] Add ownership filter to model browser (#7201)
## Summary
Adds a dropdown filter to the model browser that allows users to filter
assets by ownership (All, My models, Public models), based on the
`is_immutable` property.

## Changes
- **Filter UI**: Added ownership dropdown in
[AssetFilterBar.vue](src/platform/assets/components/AssetFilterBar.vue#L30-L38)
that only appears when user has uploaded models
- **Filter Logic**: Implemented `filterByOwnership` function in
[useAssetBrowser.ts](src/platform/assets/composables/useAssetBrowser.ts#L38-L45)
to filter by `is_immutable` property
- **i18n**: Added translation strings for ownership filter options
- **Tests**: Added comprehensive tests for ownership filtering in both
composable and component test files

## Review Focus
- The ownership filter visibility logic correctly checks for mutable
assets (`!is_immutable`)
- Default filter value is 'all' to show all models initially
- Filter integrates cleanly with existing file format and base model
filters

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7201-feat-Add-ownership-filter-to-model-browser-2c16d73d365081f280f6d1e42e5400af)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
2025-12-09 13:52:33 -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
8209f5a108 feat: add Stripe pricing table integration for subscription dialog (conditional on feature flag) (#7288)
Integrates Stripe's pricing table web component into the subscription
dialog when the subscription_tiers_enabled feature flag is active. The
implementation includes a new StripePricingTable component that loads
Stripe's pricing table script and renders the table with proper error
handling and loading states. The subscription dialog now displays the
Stripe pricing table with contact us and enterprise links, using a
1100px width that balances multi-column layout with visual design.
Configuration supports environment variables, remote config, and window
config for the Stripe publishable key and pricing table ID.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7288-feat-add-Stripe-pricing-table-integration-for-subscription-dialog-conditional-on-featur-2c46d73d365081fa9d93c213df118996)
by [Unito](https://www.unito.io)
2025-12-09 04:45:45 -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
Christian Byrne
4d3f918e8e feat: Enable system notifications on cloud (#7277)
Re-enables the system notification popup for cloud distribution,
allowing cloud devs to notify cloud users about new features and updates
without requiring a new release.

Cloud now fetches release notes from the "cloud" project (instead of
"comfyui") and uses the `cloud_version` field for version comparison.
Since cloud versions are git hashes rather than semver, a helper handles
both formats gracefully.

The "What's New" popup is enabled for cloud, while the update toast and
red dot indicator remain desktop-only since cloud auto-updates and
doesn't require user action.

You can test this by doing `pnpm dev:cloud` and you will see a
notification I added (for testing):

<img width="1891" height="2077" alt="image"
src="https://github.com/user-attachments/assets/6599a6dc-a3e1-406f-a22d-14262be1f258"
/>

Content is controlled by non-devs at cms.comfy.org.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7277-feat-Enable-system-notifications-on-cloud-2c46d73d365081bcb33cd79ec18faefe)
by [Unito](https://www.unito.io)
2025-12-09 02:32:13 -07:00
Christian Byrne
8f300c7163 fix: release notifications unit tests missing i18n mocks (#7281)
## Summary
- Fix missing `i18n` export in `@/i18n` mock for WhatsNewPopup tests
- Fix missing `createI18n` export in `vue-i18n` mock for
ReleaseNotificationToast tests

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7281-fix-release-notifications-unit-tests-missing-i18n-mocks-2c46d73d365081e595eadaca6a4ace5d)
by [Unito](https://www.unito.io)
2025-12-09 00:35:37 -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
Luke Mino-Altherr
5a4fd9ec40 fix: Vue Nodes dropdown doesn't show selected model from Asset Browser (#7251)
## Summary
Fixes Vue Nodes 2.0 dropdowns not displaying the selected model when
created from the Asset Browser.

## Root Cause
Widget values were set AFTER the node was added to the graph, causing
Vue's reactivity system to capture stale initial values.

## Solution
Set widget value BEFORE adding node to graph in
`createModelNodeFromAsset.ts`.

## Changes
- **1 file changed**: `createModelNodeFromAsset.ts`
- **4 lines added, 1 removed**: Move widget value assignment before
graph.add()

This ensures Vue's reactivity system captures the correct initial widget
value when the node is created.

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-08 16:12:21 -08:00
Luke Mino-Altherr
973d7678a1 fix: Refresh model dropdowns after upload (#7232)
## Summary
Model selection dropdowns now automatically refresh after uploading a
new model, ensuring users see newly uploaded models immediately.

## Changes
- **Cache Orchestration**: Upload wizard now refreshes model caches by
coordinating between `modelToNodeStore` and `assetsStore`
- **Smart Refetching**: Only refreshes node types that use the uploaded
model category (e.g., uploading a checkpoint refreshes
`CheckpointLoaderSimple` but not `LoraLoader`)
- **Clean Architecture**: Stores remain decoupled - the upload wizard
composable orchestrates the refresh logic

## Technical Details
After successful upload, `useUploadModelWizard`:
1. Gets all node providers for the model type from `modelToNodeStore`
2. Calls `assetsStore.updateModelsForNodeType()` for each affected node
type
3. Model dropdowns reactively update via Pinia store watchers

## Review Focus
- Orchestration pattern in upload wizard keeps stores decoupled
- Efficient cache invalidation - only refreshes affected node types

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
2025-12-08 23:42:08 +00:00
Luke Mino-Altherr
1b95cd25d1 fix: Prioritize filename over name in model upload dialogs (#7203)
## Summary
Updates model upload dialogs to display filename instead of name and
removes redundant background styling from confirmation dialog.

## Changes
- **What**: Swap priority of filename/name display in upload
confirmation and progress dialogs
- **What**: Remove background styling from filename display in
confirmation dialog

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7203-fix-Prioritize-filename-over-name-in-model-upload-dialogs-2c16d73d365081b788deec1bb2989ed5)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-06 15:51:07 -08:00
Alexander Brown
bca7a435ed fix: Button color and default ordering (#7199)
## Summary

Small fixes for the button and Modal sorting.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7199-fix-Button-color-and-default-ordering-2c16d73d3650812a8a08f8e8fcd7fd55)
by [Unito](https://www.unito.io)
2025-12-06 13:24:58 -08:00
Christian Byrne
cde49d5b64 refresh feature flags on auth or subscription state change (#7197)
Adds watch on auth state that refreshes remote config. In future PR, the
remote config system and feature flags should be consolidated and moved
out of ComfyApi. Currently, we need feature flags before GraphView
mounts, but also need to add auth headers after auth, which necessitates
these parallel systems temporarily

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7197-refresh-feature-flags-on-auth-or-subscription-state-change-2c06d73d3650810a906ad36a60c86600)
by [Unito](https://www.unito.io)
2025-12-05 19:40:11 -07:00
Luke Mino-Altherr
5db6d1af9a [feat] Add video help dialog to Upload Model flow (#7177)
## Summary
Adds an interactive video tutorial dialog to help users find CivitAI
model URLs during the Upload Model wizard.

## Changes
- **New Component**: Created reusable `VideoHelpDialog.vue` component
  - Full-width video player with floating close button
  - Configurable props: `videoUrl`, `loop`, `showControls`
  - Custom ESC key handling to prevent parent dialog from closing
  - Click backdrop to dismiss
  - 70% dark backdrop for better video focus
- **Upload Model Flow**: Integrated video help button in step 1 footer
  - "How do I find this?" button opens tutorial video
  - Video demonstrates finding model URLs on CivitAI
- PostHog tracking attribute maintained (`upload-model-step1-help-link`)

## Review Focus
- ESC key event handling uses capture phase to prevent propagation to
parent dialogs
- Component follows existing patterns from `MediaVideoTop.vue` and
`BaseModalLayout.vue`
- Video player accessibility (ARIA labels, keyboard navigation)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7177-feat-Add-video-help-dialog-to-Upload-Model-flow-2c06d73d36508148963ad9ee60038ea3)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-05 18:38:52 -08:00
Alexander Brown
57523a0c57 Design: Model management (#7190)
## Summary

Assorted updates to the components involved in uploading personal
models.

## Changes

- Standardize Import buttons
- Let the images fill the space on the card
- Order by recent by default
- Nicer display on the model select popover

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7190-Design-Model-management-2c06d73d365081e7b9fed7a83b730c0f)
by [Unito](https://www.unito.io)
2025-12-05 15:53:28 -07:00
Luke Mino-Altherr
57191151ac [feat] Add PostHog data-attr attributes to Upload Model flow (#7173)
## Summary
Adds step-specific `data-attr` attributes throughout the Upload Model
wizard to enable PostHog analytics tracking and action creation,
following PostHog's recommended best practices for element labeling.

## Changes
- **What**: Added `data-attr` attributes to all key interactive elements
in the Upload Model flow (buttons, inputs, selectors)
- **Step-based naming**: Attributes include step numbers for funnel
analysis (e.g., `upload-model-step1-continue-button`)
- **Coverage**: Entry button, URL input, help link, navigation buttons
(cancel/back/continue/confirm/finish), and model type selector

## Benefits
- Enables creation of stable PostHog actions using CSS selectors like
`[data-attr="upload-model-step2-confirm-button"]`
- Allows funnel analysis to track user progression through the 3-step
upload wizard
- Identifies drop-off points and help-seeking behavior
- Follows PostHog best practice of using data attributes over CSS
classes (especially important with Tailwind)

## Review Focus
- Naming consistency and clarity of data-attr values
- Completeness of coverage across the upload flow

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7173-feat-Add-PostHog-data-attr-attributes-to-Upload-Model-flow-2c06d73d365081699861d3d910250e32)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-04 19:04:16 -08:00
Luke Mino-Altherr
8d4a6df7f8 feat: add upgrade modal for model upload when private models disabled (#7124)
## Summary
Adds a dedicated upgrade modal that appears when users without private
models access try to upload models, providing a clear path to upgrade
their subscription.

## Changes
- **New upgrade modal**: Created `UploadModelUpgradeModal` with
dedicated body, header, and footer components
- **Conditional rendering**: Modified `AssetBrowserModal` to show
upgrade modal when `privateModelsEnabled` flag is false
- **Subscription integration**: Connected upgrade flow to existing
subscription system via `showSubscriptionDialog()`
- **Localization**: Added localization keys for upgrade messaging

## Review Focus
- Conditional logic in `AssetBrowserModal.handleUploadClick()` based on
feature flags
- Component naming consistency (all upgrade-related components prefixed
with `UploadModelUpgrade`)
- Footer component refactoring maintains existing upload wizard behavior

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7124-feat-add-upgrade-modal-for-model-upload-when-private-models-disabled-2be6d73d36508147b72eea8a1d6ab772)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
2025-12-03 20:14:00 -08:00
Luke Mino-Altherr
52e915baf0 [feat] Add remote config support for model upload and asset update feature flags (#7143)
## Summary
Feature flags for model upload button and asset update options now check
remote config from `/api/features` first, falling back to websocket
feature flags.

## Changes
- **What**: Added `model_upload_button_enabled` and
`asset_update_options_enabled` to `RemoteConfig` type
- **What**: Updated feature flag getters to prioritize remote config
over websocket flags
- **Why**: Enables dynamic feature control without requiring websocket
connection, consistent with other feature flags pattern

## Review Focus
- Pattern consistency with other remote config feature flags
- Proper fallback behavior when remote config is unavailable

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7143-feat-Add-remote-config-support-for-model-upload-and-asset-update-feature-flags-2bf6d73d3650819cb364f0ab69d77dd0)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-03 19:19:14 -08:00
Johnpaul Chiwetelu
c6988380c2 [feat] Allow opening workflows with same name as new tabs (#7104)
When importing a workflow file that has the same name as an existing
open workflow, create a new tab with a unique suffix (2), (3), etc.
instead of silently failing or replacing the existing workflow.

- Add forceNew parameter to createTemporary() in workflowStore
- Always create new temporary workflow when importing via file picker
- Remove logic that looked up persisted workflows by name during import




https://github.com/user-attachments/assets/9c9aebd3-37c2-464f-9fb4-9ef871ec2673





┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7104-feat-Allow-opening-workflows-with-same-name-as-new-tabs-2bd6d73d365081cd9182eaa35bf37c29)
by [Unito](https://www.unito.io)
2025-12-03 02:47:26 +00:00
Simula_r
9c5f8a619c feat: add workflowRendererVersion workflow schema (#7086)
## Summary

add workflowRendererVersion to workflow schema extra

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7086-feat-add-workflowRendererVersion-workflow-schema-2bd6d73d3650818dbcecf2b85b0553a2)
by [Unito](https://www.unito.io)
2025-12-02 19:28:48 -07:00
Alexander Brown
7ff8bcfea3 Feat: Add is_immutable gate for model edit button. (#7091)
## Summary

Only show the buttons for models that can be _mutated_.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7091-Feat-Add-is_immutable-gate-for-model-edit-button-2bd6d73d3650812e98c4e5cfb8726242)
by [Unito](https://www.unito.io)
2025-12-02 10:51:54 -08:00
Alexander Brown
a5f1eb0b92 Feat: Add model import button to Vue model list popover. (#7085)
## Summary

Adds a button to trigger the model upload on the Asset dropdown.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7085-Feat-Add-model-import-button-to-Vue-model-list-popover-2bd6d73d365081958c8ef23de55a341e)
by [Unito](https://www.unito.io)
2025-12-01 19:19:23 -08:00
Alexander Brown
04158deb02 Feat: Rename and Delete for imported Models ☁️ (#6969)
## Summary

Add Rename and Delete options for Personal Models.

Also updates and standardizes some styles for Cards and adds a simple
Confirmation dialog.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6969-WIP-Feat-Rename-and-Delete-for-custom-Models-2b86d73d36508140a687e929b0544ae6)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2025-12-01 17:16:05 -08:00
Christian Byrne
2b751200be test: add setting to ignore version compatibility toast warnings in e2e tests (#7004)
There's a warning toast shown if the frontend is considered out-of-date
(relative to the version in the requirements.txt of
comfyanonymous/ComfyUI). As a result, e2e tests run on older release
branches (e.g., when backporting or hotfixing) can sometimes trigger the
warning which obviously causes visual regression tests to fail. This PR
adds a hidden setting to disable the warning and sets it to `true` in
the e2e test fixtures.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7004-test-add-setting-to-ignore-version-compatibility-toast-warnings-in-e2e-tests-2b86d73d3650812d9e07f54a0c86b996)
by [Unito](https://www.unito.io)
2025-11-29 19:56:19 -07:00
JonatanAtila
e248ecfa4e feat(i18n): add Portuguese (Brazil) locale (pt-BR) (#6943)
Finalmente o idioma em Portugues do Brasil verá a luz do dia (se tudo
correr bem).

What has been done:

- Added pt-BR to .i18nrc.cjs and settings
- Included loaders in src/i18n.ts and apps/desktop-ui/src/i18n.ts
- Now Portuguese (BR) is displayed in the language selector
- Created empty main.json, commands.json, settings.json and
nodeDefs.json files to be populated by CI

- Checklist: the language appears in the dropdown list, selection occurs
without errors, the fallback to English, in case technical terms have no
translation, is working correctly.

- I will maintain the pt-br translation and review for as long as
necessary.

---------

Co-authored-by: Comfy Contributor <dev@example.com>
2025-11-27 15:46:27 -07:00
Jin Yi
9d131a4267 [feat] Add right-click context menu to MediaAssetCard (#6844)
## Summary
- Add right-click context menu functionality to MediaAssetCard
- Separate context menu into its own component
(MediaAssetContextMenu.vue)
- Ensure only one context menu is visible at a time within the same tab

## Changes
- Add `MediaAssetContextMenu.vue` - new component for context menu
- Update `MediaAssetCard.vue` - show context menu on right-click and
more button click
- Delete `MediaAssetMoreMenu.vue` - consolidated into context menu
- Delete `MediaAssetButtonDivider.vue` - unused
- Update `AssetsSidebarTab.vue` - add context menu state management
- Refactor `useMediaAssetActions.ts`

## Screenshot

[screen-capture.webm](https://github.com/user-attachments/assets/6fe414ef-b134-4fbe-98aa-6437bb354b41)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-11-26 23:02:32 -07:00
Christian Byrne
c57ceaf826 fix: add missing translations (#6970)
## Summary

Adds translations for things identified as "always English" during QA
testing.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6970-fix-add-missing-translations-2b86d73d365081ffa58ccef156d28028)
by [Unito](https://www.unito.io)
2025-11-26 18:25:49 -07:00
Christian Byrne
c5fe617347 feat: open template via URL in linear mode (#6945)
## 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)
2025-11-26 16:44:28 -07:00
Christian Byrne
8b2c1fc45d allow telemetry events to be disabled by name in feature flags (#6946)
## Summary

Adds ability to toggle events on/off by name from dynamic feature flags.
Also makes some events disabled by default (not being used for any
analysis and taking too much of event quota currently).

Note: telemetry is only enabled on cloud - this doesn't affect local
users in any way.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6946-allow-telemetry-events-to-be-disabled-by-name-in-feature-flags-2b76d73d365081ea8676cfbb8217e640)
by [Unito](https://www.unito.io)
2025-11-26 14:20:21 -07:00
Alexander Brown
df66a96976 Feat: Double Click on Image Assets to open the lightbox (#6955)
## Summary

Make it easier to open the lightbox preview.

## Review Focus

The first click still selects the image. I liked the suggestion to
require shift or ctrl to initiate selection and have click go back to
the previous behavior.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6955-Feat-Double-Click-on-Image-Assets-to-open-the-lightbox-2b76d73d365081f0bf0de847add5c820)
by [Unito](https://www.unito.io)
2025-11-26 11:52:54 -08:00
Simula_r
4b87b1fdc5 fix: remove LOD from vue nodes (#6950)
## Summary

Refactor to remove LOD from vue nodes. Also, hide Litegraph LOD settings
in vue nodes to prevent confusion / stale setting. Keep litegraph LOD
the exact same.

## Changes

- **What**: settings, all LOD related code in vue nodes

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6950-fix-remove-LOD-from-vue-nodes-2b76d73d365081568723f8cbc7be7e17)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-26 12:26:05 -07:00
Alexander Brown
e6332046b0 BYOM: Model Import Wizard (#6949)
## Summary

Design alignment for the model import wizard.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6949-BYOM-Model-Import-Wizard-2b76d73d365081a48632c40430e05c93)
by [Unito](https://www.unito.io)
2025-11-25 19:19:16 -08:00
Alexander Brown
8b5cfe7e55 Lint: Adding more checks for non internationalized strings (#5625)
## Summary

Catch more user visible (or audible) text that isn't
internationalizable.

## Changes

- **What**: Linter now checks other attributes for raw text.

## Review Focus

What other properties have leaked English text to non-English locales
that aren't in here?
2025-11-24 21:55:47 -08:00
Alexander Brown
9bd63dbe6a Cleanup: Consistent use of Nodes 2.0 in user facing strings. (#6898)
https://github.com/Comfy-Org/ComfyUI_frontend/issues/6888

## Summary

Did a quick pass to find user facing strings. Not sure if this gets them
all.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6898-Cleanup-Consistent-use-of-Nodes-2-0-in-user-facing-strings-2b66d73d36508124aee2f5f8373a4b60)
by [Unito](https://www.unito.io)
2025-11-24 17:26:16 -08:00
Alexander Brown
0b33470744 Minor: transformState and setting error cleanup (#6841)
## Summary

Fixes the routing of TransformState through the node and the console
error from a setting that ends up being undefined via
useRenderModeSetting.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6841-Minor-transformState-and-setting-error-cleanup-2b46d73d3650817a8da7fca5bc56ea9a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-23 12:24:37 -07:00
Christian Byrne
1dbb3fc1b9 make vue node settings appear higher in the settings dialog (#6820)
makes setting groups/categories be sorted by highest internal setting
field `sortOrder` and adds high `sortOrder` values to the Vue Nodes
(Nodes 2.0) settings.


<img width="2282" height="1872" alt="Selection_2371"
src="https://github.com/user-attachments/assets/71e7e76b-4637-42b5-9f0c-2617622cda23"
/>
2025-11-21 20:32:18 -08:00
Jin Yi
639975b804 fix: Prevent multiple asset card popovers from opening simultaneously (#6808)
## Summary

Ensures only one MediaAssetCard popover is open at a time.

## Changes

- Added `hide()` method exposure in MoreButton component
- Implemented parent-level state management for tracking open popover
- Added VueUse `whenever` to auto-close other popovers when one opens

## Test Plan

- Open multiple asset cards' more menus
- Verify only one popover remains open at a time

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6808-fix-Prevent-multiple-asset-card-popovers-from-opening-simultaneously-2b26d73d365081e1b3f0d97b869cedc5)
by [Unito](https://www.unito.io)
2025-11-21 14:01:19 -07:00
Luke Mino-Altherr
ff0d385db8 [bugfix] Fix double-click required after pasting URL in upload model dialog (#6801)
## Summary
Fixed an issue where users had to click twice to continue after pasting
a URL in the upload model dialog - once to blur the input, then again to
click the button.

## Changes
- **What**: Replaced `UrlInput` with plain `InputText` in
`UploadModelUrlInput` to emit value immediately on input instead of only
on blur
- **Cleanup**: Moved URL cleaning/normalization to the `fetchMetadata`
handler, removed unused `disableValidation` prop from `UrlInput`
component

## Review Focus
- URL normalization logic in `useUploadModelWizard.ts`

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6801-bugfix-Fix-double-click-required-after-pasting-URL-in-upload-model-dialog-2b26d73d3650811881aed0cc064efcc7)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-11-21 11:05:36 -08:00
Luke Mino-Altherr
6e2e591937 refactor: change model button terminology from Upload to Import (#6800)
## Summary
Changes user-facing text from "Upload" to "Import" for the model import
feature, as "Import" better describes importing models from external
sources like Civitai.

## Changes
- Updated button icon from `upload` to `package-plus`
- Changed all user-facing text in English locale from "Upload" to
"Import"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6800-refactor-change-model-button-terminology-from-Upload-to-Import-2b26d73d365081059ce6e4a548f943ce)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
2025-11-20 21:47:02 -08:00
Luke Mino-Altherr
acd855601c [feat] Add Civitai model upload wizard (#6694)
## Summary
Adds a complete model upload workflow that allows users to import models
from Civitai URLs directly into their library.

## Changes
- **Multi-step wizard**: URL input → metadata confirmation → upload
progress
- **Components**: UploadModelDialog, UploadModelUrlInput,
UploadModelConfirmation, UploadModelProgress, UploadModelDialogHeader
- **API integration**: New assetService methods for metadata retrieval
and URL-based uploads
- **Model type management**: useModelTypes composable for fetching and
formatting available model types
- **UX improvements**: Optional validation bypass for UrlInput component
- **Localization**: 26 new i18n strings for the upload workflow

## Review Focus
- Error handling for failed uploads and metadata retrieval
- Model type detection and selection logic
- Dialog state management across multi-step workflow

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6694-feat-Add-Civitai-model-upload-wizard-2ab6d73d36508193b3b1dd67c7cc5a09)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-11-19 20:37:22 -08:00
AustinMroz
bb51a5aa76 Add linear mode (#6670)
![linear-mode](https://github.com/user-attachments/assets/d1aa078a-00a8-4e71-86d5-ee929b269c90)

See also: #6642

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6670-Add-linear-mode-2aa6d73d365081d08887e4a6db3a8fa0)
by [Unito](https://www.unito.io)
2025-11-19 16:59:43 -07:00
Jin Yi
ada0993572 feat: Improve MediaAssetCard design and add responsive sidebar footer (#6749)
## Summary
Implements design feedback for the asset panel, improving visual
hierarchy, contrast, and responsiveness based on design tokens update.

## Changes

### 🎨 Design System Updates (style.css)
- **New tokens for MediaAssetCard states:**
  - `--modal-card-background-hovered`: Hover state background
  - `--modal-card-border-highlighted`: Selected state border color
- **Updated tag contrast:**
  - Light mode: `smoke-200` → `smoke-400`
  - Dark mode: `charcoal-200` → `ash-800`
- **Registered tokens in Tailwind** via `@theme inline` for proper class
generation

### 🖼️ MediaAssetCard Improvements
- **Added tooltips** to all interactive buttons:
  - Zoom button: "Inspect"
  - More button: "More options"
  - Output count button: "See more outputs"
- **Fixed tooltip event conflicts** by wrapping buttons in tooltip divs
- **Updated hover/selected states:**
  - Hover: Uses `--modal-card-background-hovered` for subtle highlight
- Selected: Uses `--modal-card-border-highlighted` for border only (no
background)
- **Updated placeholder background** to use
`--modal-card-placeholder-background`
- **Tag styling:** Changed from `variant="light"` to `variant="gray"`
for better contrast

### 📦 SquareChip Component
- **Added `gray` variant** that uses `--modal-card-tag-background` token
- Maintains consistency with design system tokens

### 📱 AssetsSidebarTab Responsive Footer
- **Responsive button display:**
  - Width > 350px: Shows icon + text buttons
  - Width ≤ 350px: Shows icon-only buttons
- **Text alignment:** Left-aligns selection count text in compact mode
- **Uses `useResizeObserver`** for automatic width detection

### 🌐 Internationalization
- Added new i18n keys for tooltips:
  - `mediaAsset.actions.inspect`
  - `mediaAsset.actions.more`
  - `mediaAsset.actions.seeMoreOutputs`

### 🔧 Minor Fixes
- **Media3DTop:** Improved text size and icon color for better visual
hierarchy

## Visual Changes
- **Increased contrast** for asset card tags (more visible in both
themes)
- **Hover state** now provides clear visual feedback
- **Selected state** uses border highlight instead of background fill
- **Sidebar footer** gracefully adapts to narrow widths

## Related
- Addresses feedback from:
https://www.notion.so/comfy-org/Asset-panel-feedback-2aa6d73d3650800baacaf739a49360b3
- Design token updates by @Alex Tov

## Test Plan
- [ ] Verify asset card hover states in both light and dark themes
- [ ] Verify asset card selected states show highlighted border
- [ ] Test tooltips on all MediaAssetCard buttons
- [ ] Resize sidebar to < 350px and verify footer shows icon-only
buttons
- [ ] Resize sidebar to > 350px and verify footer shows icon + text
buttons
- [ ] Verify tag contrast improvement in both themes
- [ ] Test 3D asset placeholder appearance

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6749-feat-Improve-MediaAssetCard-design-and-add-responsive-sidebar-footer-2b06d73d365081019b90e110df2f1ae8)
by [Unito](https://www.unito.io)
2025-11-19 12:13:03 -07:00
Jin Yi
7a0302ba7a Enhance MediaAssetCard selection UI and interaction (#6729) 2025-11-17 17:54:56 -08:00
Jin Yi
a4d979e4c9 [feat] Implement media asset workflow actions with shared utilities (#6696)
## Summary

Implements 4 missing media asset workflow features and creates shared
utilities to eliminate code duplication.

## Implemented Features

### 1. Copy Job ID 
- Properly extracts promptId using `getOutputAssetMetadata`
- Uses `useCopyToClipboard` composable

### 2. Add to Current Workflow 
- Adds LoadImage/LoadVideo/LoadAudio nodes to canvas
- Supports all media file types (JPEG, PNG, MP4, etc.)
- Auto-detects appropriate node type using `detectNodeTypeFromFilename`
utility

### 3. Open Workflow in New Tab 
- Extracts workflow from asset metadata or embedded PNG
- Opens workflow in new tab

### 4. Export Workflow 
- Exports workflow as JSON file
- Supports optional filename prompt

## Code Refactoring

### Created Shared Utilities:
1. **`assetTypeUtil.ts`** - `getAssetType()` function eliminates 6
instances of `asset.tags?.[0] || 'output'`
2. **`assetUrlUtil.ts`** - `getAssetUrl()` function consolidates 3 URL
construction patterns
3. **`workflowActionsService.ts`** - Shared service for workflow
export/open operations
4. **`workflowExtractionUtil.ts`** - Extract workflows from jobs/assets
5. **`loaderNodeUtil.ts`** - Detect loader node types from filenames

### Improvements to Existing Code:
- Refactored to use `formatUtil.getMediaTypeFromFilename()`
- Extracted `deleteAssetApi()` helper to reduce deletion logic
duplication (~40 lines)
- Moved `isResultItemType` type guard to shared `typeGuardUtil.ts`
- Added 9 i18n strings for proper localization
- Added `@comfyorg/shared-frontend-utils` dependency

## Input Assets Support

Improved input assets to support workflow features where applicable:
-  All media files (JPEG/PNG/MP4, etc.) → "Add to current workflow"
enabled
-  PNG/WEBP/FLAC with embedded metadata → "Open/Export workflow"
enabled

## Impact

- **~150+ lines** of duplicate code eliminated
- **5 new utility files** created to improve code reusability
- **11 files** changed, **483 insertions**, **234 deletions**

## Testing

 TypeScript typecheck passed  
 ESLint passed  
 Knip passed

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6696-feat-Implement-media-asset-workflow-actions-with-shared-utilities-2ab6d73d365081fb8ae9d71ce6e38589)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
2025-11-18 00:04:45 +00:00
Alexander Brown
471ccca1dd Style: Design System use across more components (#6705)
## Summary

Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to
be working on to consolidate our different buttons soon.

## Changes

- **What**: Replace light/dark colors with theme aware design system
tokens.

## Review Focus

Double check the chosen colors for the components

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="607" height="432" alt="image"
src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104"
/> | <img width="646" height="488" alt="image"
src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-17 12:27:10 -08:00
Jin Yi
ba768c32f3 fix: Prevent text selection in MediaAssetCard (#6708)
## Summary
- Prevent text selection when clicking or dragging MediaAssetCard
- Add `select-none` Tailwind class to prevent unwanted text highlighting

## Changes
- Changed class from `gap-1` to `gap-1 select-none` in MediaAssetCard
container

## Problem
When users click or drag on a MediaAssetCard, the text content (tags,
titles, descriptions, buttons) gets selected and highlighted, which
creates a poor user experience.

## Solution
Added the `select-none` Tailwind CSS class which applies `user-select:
none` to prevent text selection within the card during mouse
interactions.

## Test plan
- [x] Click on MediaAssetCard and verify text is not selected
- [x] Drag across MediaAssetCard and verify text is not highlighted
- [x] Verify card selection still works properly
- [x] Verify buttons and interactive elements still work

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6708-fix-Prevent-text-selection-in-MediaAssetCard-2ac6d73d365081f6bec2ffebad7cb7ed)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
2025-11-15 05:58:57 +00:00
Jin Yi
e3f19ab856 feat: Add media type filtering to Media Asset Panel (#6701) 2025-11-15 05:20:00 +00:00