From 57523a0c573e649b824e86340136c4b4b34c9a27 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Fri, 5 Dec 2025 14:53:28 -0800
Subject: [PATCH 1/5] Design: Model management (#7190)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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)
---
 src/locales/en/main.json                      |  2 +-
 .../assets/components/AssetBrowserModal.vue   |  2 +-
 src/platform/assets/components/AssetCard.vue  |  2 +-
 .../assets/components/AssetFilterBar.vue      | 45 ++++++++++---------
 .../form/dropdown/FormDropdownMenuFilter.vue  | 27 ++++++-----
 .../assets/components/AssetFilterBar.test.ts  | 17 -------
 6 files changed, 43 insertions(+), 52 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index cc2e62e9b..b1378bc7e 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2091,7 +2091,7 @@
     "connectionError": "Please check your connection and try again",
     "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
     "noModelsInFolder": "No {type} available in this folder",
-    "uploadModel": "Import model",
+    "uploadModel": "Import",
     "uploadModelFromCivitai": "Import a model from Civitai",
     "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
     "onlyCivitaiUrlsSupported": "Only Civitai URLs are supported",
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index 8a61e261d..ef85ce5f9 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -39,7 +39,7 @@
           :on-click="showUploadDialog"
         >
           <template #icon>
-            <i class="icon-[lucide--package-plus]" />
+            <i class="icon-[lucide--folder-input]" />
           </template>
         </IconTextButton>
       </div>
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 05daf7f93..d8e7e8398 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -26,7 +26,7 @@
         v-else
         :src="asset.preview_url"
         :alt="displayName"
-        class="size-full object-contain cursor-pointer"
+        class="size-full object-cover cursor-pointer"
         role="button"
         @click.self="interactive && $emit('select', asset)"
       />
diff --git a/src/platform/assets/components/AssetFilterBar.vue b/src/platform/assets/components/AssetFilterBar.vue
index 5ffb5d0af..a86a7a1a8 100644
--- a/src/platform/assets/components/AssetFilterBar.vue
+++ b/src/platform/assets/components/AssetFilterBar.vue
@@ -1,12 +1,18 @@
 <template>
-  <div :class="containerClasses" data-component-id="asset-filter-bar">
-    <div :class="leftSideClasses" data-component-id="asset-filter-bar-left">
+  <div
+    class="flex gap-4 items-center justify-between px-6 pt-2 pb-6"
+    data-component-id="asset-filter-bar"
+  >
+    <div
+      class="flex gap-4 items-center"
+      data-component-id="asset-filter-bar-left"
+    >
       <MultiSelect
         v-if="availableFileFormats.length > 0"
         v-model="fileFormats"
         :label="$t('assetBrowser.fileFormats')"
         :options="availableFileFormats"
-        :class="selectClasses"
+        class="min-w-32"
         data-component-id="asset-filter-file-formats"
         @update:model-value="handleFilterChange"
       />
@@ -16,18 +22,18 @@
         v-model="baseModels"
         :label="$t('assetBrowser.baseModels')"
         :options="availableBaseModels"
-        :class="selectClasses"
+        class="min-w-32"
         data-component-id="asset-filter-base-models"
         @update:model-value="handleFilterChange"
       />
     </div>
 
-    <div :class="rightSideClasses" data-component-id="asset-filter-bar-right">
+    <div class="flex items-center" data-component-id="asset-filter-bar-right">
       <SingleSelect
         v-model="sortBy"
         :label="$t('assetBrowser.sortBy')"
         :options="sortOptions"
-        :class="selectClasses"
+        class="min-w-32"
         data-component-id="asset-filter-sort"
         @update:model-value="handleFilterChange"
       >
@@ -48,7 +54,6 @@ import type { SelectOption } from '@/components/input/types'
 import { t } from '@/i18n'
 import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { cn } from '@/utils/tailwindUtil'
 
 export interface FilterState {
   fileFormats: string[]
@@ -56,35 +61,31 @@ export interface FilterState {
   sortBy: string
 }
 
+const SORT_OPTIONS = [
+  { name: t('assetBrowser.sortRecent'), value: 'recent' },
+  { name: t('assetBrowser.sortAZ'), value: 'name-asc' },
+  { name: t('assetBrowser.sortZA'), value: 'name-desc' }
+] as const
+
+type SortOption = (typeof SORT_OPTIONS)[number]['value']
+
+const sortOptions = [...SORT_OPTIONS]
+
 const { assets = [] } = defineProps<{
   assets?: AssetItem[]
 }>()
 
 const fileFormats = ref<SelectOption[]>([])
 const baseModels = ref<SelectOption[]>([])
-const sortBy = ref('name-asc')
+const sortBy = ref<SortOption>('recent')
 
 const { availableFileFormats, availableBaseModels } =
   useAssetFilterOptions(assets)
 
-const sortOptions = [
-  { name: t('assetBrowser.sortAZ'), value: 'name-asc' },
-  { name: t('assetBrowser.sortZA'), value: 'name-desc' },
-  { name: t('assetBrowser.sortRecent'), value: 'recent' }
-]
-
 const emit = defineEmits<{
   filterChange: [filters: FilterState]
 }>()
 
-const containerClasses = cn(
-  'flex gap-4 items-center justify-between',
-  'px-6 pt-2 pb-6'
-)
-const leftSideClasses = cn('flex gap-4 items-center')
-const rightSideClasses = cn('flex items-center')
-const selectClasses = cn('min-w-32')
-
 function handleFilterChange() {
   emit('filterChange', {
     fileFormats: fileFormats.value.map((option: SelectOption) => option.value),
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
index 3af54edb9..90d2565a6 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -1,31 +1,37 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import { useModelUpload } from '@/platform/assets/composables/useModelUpload'
 import { cn } from '@/utils/tailwindUtil'
 
 import type { FilterOption, OptionId } from './types'
 
-defineProps<{
+const { filterOptions } = defineProps<{
   filterOptions: FilterOption[]
 }>()
 
 const filterSelected = defineModel<OptionId>('filterSelected')
 
 const { isUploadButtonEnabled, showUploadDialog } = useModelUpload()
+
+// TODO: Add real check to differentiate between the Model dialogs and Load Image
+const singleFilterOption = computed(() => filterOptions.length === 1)
 </script>
 
 <template>
-  <div class="text-secondary mb-4 flex gap-1 px-4 justify-between">
-    <div
+  <div class="text-secondary mb-4 flex gap-1 px-4 justify-start">
+    <button
       v-for="option in filterOptions"
       :key="option.id"
+      type="button"
+      :disabled="singleFilterOption"
       :class="
         cn(
-          'px-4 py-2 rounded-md inline-flex justify-center items-center cursor-pointer select-none',
-          'transition-all duration-150',
-          'hover:text-base-foreground hover:bg-interface-menu-component-surface-hovered',
-          'active:scale-95',
-          filterSelected === option.id
+          'px-4 py-2 rounded-md inline-flex justify-center items-center select-none appearance-none border-0 text-base-foreground',
+          !singleFilterOption &&
+            'transition-all duration-150 hover:text-base-foreground hover:bg-interface-menu-component-surface-hovered cursor-pointer active:scale-95',
+          !singleFilterOption && filterSelected === option.id
             ? '!bg-interface-menu-component-surface-selected text-base-foreground'
             : 'bg-transparent'
         )
@@ -33,10 +39,11 @@ const { isUploadButtonEnabled, showUploadDialog } = useModelUpload()
       @click="filterSelected = option.id"
     >
       {{ option.name }}
-    </div>
+    </button>
     <IconTextButton
-      v-if="isUploadButtonEnabled"
+      v-if="isUploadButtonEnabled && singleFilterOption"
       :label="$t('g.import')"
+      class="ml-auto"
       type="secondary"
       @click="showUploadDialog"
     >
diff --git a/tests-ui/platform/assets/components/AssetFilterBar.test.ts b/tests-ui/platform/assets/components/AssetFilterBar.test.ts
index 8e659d24f..d9762e978 100644
--- a/tests-ui/platform/assets/components/AssetFilterBar.test.ts
+++ b/tests-ui/platform/assets/components/AssetFilterBar.test.ts
@@ -75,23 +75,6 @@ function mountAssetFilterBar(props = {}) {
 
 describe('AssetFilterBar', () => {
   describe('Filter State Management', () => {
-    it('maintains correct initial state', () => {
-      // Provide assets with options so filters are visible
-      const assets = [
-        createAssetWithSpecificExtension('safetensors'),
-        createAssetWithSpecificBaseModel('sd15')
-      ]
-      const wrapper = mountAssetFilterBar({ assets })
-
-      // Test initial state through component props
-      const multiSelects = wrapper.findAllComponents({ name: 'MultiSelect' })
-      const singleSelect = wrapper.findComponent({ name: 'SingleSelect' })
-
-      expect(multiSelects[0].props('modelValue')).toEqual([])
-      expect(multiSelects[1].props('modelValue')).toEqual([])
-      expect(singleSelect.props('modelValue')).toBe('name-asc')
-    })
-
     it('handles multiple simultaneous filter changes correctly', async () => {
       // Provide assets with options so filters are visible
       const assets = [

From 10fddc9694fc3da1a02a5cdcd72a217961c5554a Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Fri, 5 Dec 2025 15:03:31 -0800
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=A4=96=20AGENTS.md=20consolidation=20?=
 =?UTF-8?q?and=20updates=20(#7194)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Unify some of the different documentation intended for LLM consumption.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7194-AGENTS-md-consolidation-and-updates-2c06d73d36508123b10ed75f03d41e75)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .cursorrules |  61 -------------
 AGENTS.md    | 250 ++++++++++++++++++++++++++++++++++++++++++++++-----
 CLAUDE.md    | 120 ++-----------------------
 3 files changed, 234 insertions(+), 197 deletions(-)
 delete mode 100644 .cursorrules

diff --git a/.cursorrules b/.cursorrules
deleted file mode 100644
index 6f43623a3..000000000
--- a/.cursorrules
+++ /dev/null
@@ -1,61 +0,0 @@
-# Vue 3 Composition API Project Rules
-
-## Vue 3 Composition API Best Practices
-- 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. Example:
-
-```typescript
-const { nodes, showTotal = true } = defineProps<{
-  nodes: ApiNodeCost[]
-  showTotal?: boolean
-}>()
-```
-
-- Organize vue component in <template> <script> <style> order
-
-## Project Structure
-```
-src/
-  components/
-  constants/
-  composables/
-  views/
-  stores/
-  services/
-  App.vue
-  main.ts
-```
-
-## Styling Guidelines
-- Use Tailwind CSS for styling
-- Implement responsive design with Tailwind CSS
-
-## PrimeVue Component Guidelines
-DO NOT use deprecated PrimeVue components. Use these replacements instead:
-- Dropdown → Use Select (import from 'primevue/select')
-- OverlayPanel → Use Popover (import from 'primevue/popover')
-- Calendar → Use DatePicker (import from 'primevue/datepicker')
-- InputSwitch → Use ToggleSwitch (import from 'primevue/toggleswitch')
-- Sidebar → Use Drawer (import from 'primevue/drawer')
-- Chips → Use AutoComplete with multiple enabled and typeahead disabled
-- TabMenu → Use Tabs without panels
-- Steps → Use Stepper without panels
-- InlineMessage → Use Message component
-
-## Development Guidelines
-1. Leverage VueUse functions for performance-enhancing styles
-2. Use es-toolkit for utility functions
-3. Use TypeScript for type safety
-4. Implement proper props and emits definitions
-5. Utilize Vue 3's Teleport component when needed
-6. Use Suspense for async components
-7. Implement proper error handling
-8. Follow Vue 3 style guide and naming conventions
-9. Use Vite for fast development and building
-10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
-11. Never use deprecated PrimeVue components listed above
diff --git a/AGENTS.md b/AGENTS.md
index 0d060af1f..986a3e27e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,38 +1,242 @@
 # Repository Guidelines
 
 ## Project Structure & Module Organization
-- Source: `src/` (Vue 3 + TypeScript). Key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`.
-- Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`.
-- Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`.
-- Public assets: `public/`. Build output: `dist/`.
-- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.ts`, `.prettierrc`.
+
+- Source: `src/`
+  - Vue 3.5+
+  - TypeScript
+  - Tailwind 4
+  - Key areas:
+    - `components/`
+    - `views/`
+    - `stores/` (Pinia)
+    - `composables/`
+    - `services/`
+    - `utils/`
+    - `assets/`
+    - `locales/`
+- Routing: `src/router.ts`,
+- i18n: `src/i18n.ts`,
+- Entry Point: `src/main.ts`.
+- Tests:
+  - unit/component in `tests-ui/` and `src/**/*.test.ts`
+  - E2E (Playwright) in `browser_tests/**/*.spec.ts`
+- Public assets: `public/`
+- Build output: `dist/`
+- Configs
+  - `vite.config.mts`
+  - `vitest.config.ts`
+  - `playwright.config.ts`
+  - `eslint.config.ts`
+  - `.prettierrc`
+  - etc.
+
+## Monorepo Architecture
+
+The project now uses **Nx** for build orchestration and task management:
+
+- **Task Orchestration**: Commands like `dev`, `build`, `lint`, and `test:browser` run via Nx
+- **Caching**: Nx provides intelligent caching for faster rebuilds
+- **Configuration**: Managed through `nx.json` with plugins for ESLint, Storybook, Vite, and Playwright
+- **Dependencies**: Nx handles dependency graph analysis and parallel execution
+
+Key Nx features:
+
+- Build target caching and incremental builds
+- Parallel task execution across the monorepo
+- Plugin-based architecture for different tools
 
 ## Build, Test, and Development Commands
+
 - `pnpm dev`: Start Vite dev server.
-- `pnpm dev:electron`: Dev server with Electron API mocks.
-- `pnpm build`: Type-check then production build to `dist/`.
-- `pnpm preview`: Preview the production build locally.
-- `pnpm test:unit`: Run Vitest unit tests.
-- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`).
-- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint). `pnpm format` / `format:check`: Prettier.
-- `pnpm typecheck`: Vue TSC type checking.
+- `pnpm dev:electron`: Dev server with Electron API mocks
+- `pnpm build`: Type-check then production build to `dist/`
+- `pnpm preview`: Preview the production build locally
+- `pnpm test:unit`: Run Vitest unit tests
+- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`)
+- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
+- `pnpm format` / `pnpm format:check`: Prettier
+- `pnpm typecheck`: Vue TSC type checking
 
 ## Coding Style & Naming Conventions
-- Language: TypeScript, Vue SFCs (`.vue`). Indent 2 spaces; single quotes; no semicolons; width 80 (see `.prettierrc`).
-- Imports: sorted/grouped by plugin; run `pnpm format` before committing.
-- ESLint: Vue + TS rules; no floating promises; unused imports disallowed; i18n raw text restrictions in templates.
-- Naming: Vue components in PascalCase (e.g., `MenuHamburger.vue`); composables `useXyz.ts`; Pinia stores `*Store.ts`.
+
+- Language:
+  - TypeScript (exclusive, no new JavaScript)
+  - Vue 3 SFCs (`.vue`)
+    - Composition API only
+  - Tailwind 4 styling
+    - Avoid `<style>` blocks
+- Style: (see `.prettierrc`)
+  - Indent 2 spaces
+  - single quotes
+  - no trailing semicolons
+  - width 80
+- Imports:
+  - sorted/grouped by plugin
+  - run `pnpm format` before committing
+- ESLint:
+  - Vue + TS rules
+  - no floating promises
+  - unused imports disallowed
+  - i18n raw text restrictions in templates
+- Naming:
+  - Vue components in PascalCase (e.g., `MenuHamburger.vue`)
+  - composables `useXyz.ts`
+  - Pinia stores `*Store.ts`
 
 ## Testing Guidelines
-- Frameworks: Vitest (unit/component, happy-dom) and Playwright (E2E).
-- Test files: `**/*.{test,spec}.{ts,tsx,js}` under `tests-ui/`, `src/components/`, and `src/lib/litegraph/test/`.
-- Coverage: text/json/html reporters enabled; aim to cover critical logic and new features.
-- Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.
+
+- Frameworks:
+  - Vitest (unit/component, happy-dom)
+  - Playwright (E2E)
+- Test files:
+  - Unit/Component: `**/*.test.ts`
+  - E2E: `browser_tests/**/*.spec.ts`
+  - Litegraph Specific: `src/lib/litegraph/test/`
+- Coverage: text/json/html reporters enabled
+  - aim to cover critical logic and new features
+- Playwright:
+  - optional tags like `@mobile`, `@2x` are respected by config
 
 ## Commit & Pull Request Guidelines
-- Commits: Use `[skip ci]` for locale-only updates when appropriate.
-- PRs: Include clear description, linked issues (`- Fixes #123`), and screenshots/GIFs for UI changes.
-- Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass. Keep PRs focused and small.
+
+- Commits: Use `[skip ci]` for locale-only updates when appropriate
+- PRs: Include clear description, linked issues (`- Fixes #123`), and screenshots/GIFs for UI changes
+- Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass
+- Keep PRs focused and small
 
 ## Security & Configuration Tips
+
 - Secrets: Use `.env` (see `.env_example`); do not commit secrets.
+
+## Vue 3 Composition API Best Practices
+
+- Use `<script setup lang="ts">` for component logic
+- Utilize `ref` for reactive state
+- Implement computed properties with computed()
+- Use watch and watchEffect for side effects
+  - Avoid using a `ref` and a `watch` if a `computed` would work instead
+- Implement lifecycle hooks with onMounted, onUpdated, etc.
+- Utilize provide/inject for dependency injection
+  - Do not use dependency injection if a Store or a shared composable would be simpler
+- Use Vue 3.5 TypeScript style of default prop declaration
+  - Example:
+
+    ```typescript
+    const { nodes, showTotal = true } = defineProps<{
+    nodes: ApiNodeCost[]
+    showTotal?: boolean
+    }>()
+    ```
+
+  - Do not use `withDefaults` or runtime props declaration
+  - Do not import Vue macros unnecessarily
+  - Prefer `useModel` to separately defining a prop and emit
+  - Be judicious with addition of new refs or other state
+    - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
+    - If it's possible to use the `ref` or prop directly, don't add a `computed`
+    - If it's possible to use a `computed` to name and reuse a derived value, don't use a `watch`
+
+## Development Guidelines
+
+1. Leverage VueUse functions for performance-enhancing styles
+2. Use es-toolkit for utility functions
+3. Use TypeScript for type safety
+4. Implement proper props and emits definitions
+5. Utilize Vue 3's Teleport component when needed
+6. Use Suspense for async components
+7. Implement proper error handling
+8. Follow Vue 3 style guide and naming conventions
+9. Use Vite for fast development and building
+10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
+11. Avoid new usage of PrimeVue components
+
+## External Resources
+
+- Vue: <https://vuejs.org/api/>
+- Tailwind: <https://tailwindcss.com/docs/styling-with-utility-classes>
+- shadcn/vue: <https://www.shadcn-vue.com/>
+- Reka UI: <https://reka-ui.com/>
+- PrimeVue: <https://primevue.org>
+- ComfyUI: <https://docs.comfy.org>
+- Electron: <https://www.electronjs.org/docs/latest/>
+- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
+
+## Project Philosophy
+
+- Follow good software engineering principles
+  - YAGNI
+  - AHA
+  - DRY
+  - SOLID
+- Clean, stable public APIs
+- Domain-driven design
+- Thousands of users and extensions
+- Prioritize clean interfaces that restrict extension access
+
+## Repository Navigation
+
+- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
+- Prefer running single tests for performance
+- Use --help for unfamiliar CLI tools
+
+## GitHub Integration
+
+When referencing Comfy-Org repos:
+
+1. Check for local copy
+2. Use GitHub API for branches/PRs/metadata
+3. Curl GitHub website if needed
+
+## Settings and Feature Flags Quick Reference
+
+### Settings Usage
+
+```typescript
+const settingStore = useSettingStore()
+const value = settingStore.get('Comfy.SomeSetting')     // Get setting
+await settingStore.set('Comfy.SomeSetting', newValue)   // Update setting
+```
+
+### Dynamic Defaults
+
+```typescript
+{
+  id: 'Comfy.Example.Setting',
+  defaultValue: () => window.innerWidth < 1024 ? 'small' : 'large'  // Runtime context
+}
+```
+
+### Version-Based Defaults
+
+```typescript
+{
+  id: 'Comfy.Example.Feature',
+  defaultValue: 'legacy',
+  defaultsByInstallVersion: { '1.25.0': 'enhanced' }  // Gradual rollout
+}
+```
+
+### Feature Flags
+
+```typescript
+if (api.serverSupportsFeature('feature_name')) {  // Check capability
+  // Use enhanced feature
+}
+const value = api.getServerFeature('config_name', defaultValue)  // Get config
+```
+
+**Documentation:**
+
+- Settings system: `docs/SETTINGS.md`
+- Feature flags system: `docs/FEATURE_FLAGS.md`
+
+## Common Pitfalls
+
+- NEVER use `any` type - use proper TypeScript types
+- NEVER use `as any` type assertions - fix the underlying type issue
+- NEVER use `--no-verify` flag when committing
+- NEVER delete or disable tests to make them pass
+- NEVER circumvent quality checks
+- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
+- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
diff --git a/CLAUDE.md b/CLAUDE.md
index 7a456b1fa..85df32685 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,44 +1,19 @@
-# ComfyUI Frontend Project Guidelines
+# Claude Code specific instructions
+
+@Agents.md
 
 ## Repository Setup
 
 For first-time setup, use the Claude command:
-```
+
+```sh
 /setup_repo
 ```
+
 This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
 
 **Prerequisites:** Node.js >= 24, Git repository, available ports (5173, 6006)
 
-## Quick Commands
-
-- `pnpm`: See all available commands
-- `pnpm dev`: Start development server (port 5173, via nx)
-- `pnpm typecheck`: Type checking
-- `pnpm build`: Build for production (via nx)
-- `pnpm lint`: Linting (via nx)
-- `pnpm oxlint`: Fast Rust-based linting with Oxc
-- `pnpm format`: Prettier formatting
-- `pnpm test:unit`: Run all unit tests
-- `pnpm test:browser`: Run E2E tests via Playwright
-- `pnpm test:unit -- tests-ui/tests/example.test.ts`: Run single test file
-- `pnpm storybook`: Start Storybook development server (port 6006)
-- `pnpm knip`: Detect unused code and dependencies
-
-## Monorepo Architecture
-
-The project now uses **Nx** for build orchestration and task management:
-
-- **Task Orchestration**: Commands like `dev`, `build`, `lint`, and `test:browser` run via Nx
-- **Caching**: Nx provides intelligent caching for faster rebuilds
-- **Configuration**: Managed through `nx.json` with plugins for ESLint, Storybook, Vite, and Playwright
-- **Dependencies**: Nx handles dependency graph analysis and parallel execution
-
-Key Nx features:
-- Build target caching and incremental builds
-- Parallel task execution across the monorepo
-- Plugin-based architecture for different tools
-
 ## Development Workflow
 
 1. **First-time setup**: Run `/setup_repo` Claude command
@@ -50,87 +25,6 @@ Key Nx features:
 
 ## Git Conventions
 
-- Use [prefix] format: [feat], [bugfix], [docs]
+- Use `prefix:` format: `feat:`, `fix:`, `test:`
 - Add "Fixes #n" to PR descriptions
 - Never mention Claude/AI in commits
-
-## External Resources
-
-- PrimeVue docs: <https://primevue.org>
-- ComfyUI docs: <https://docs.comfy.org>
-- Electron: <https://www.electronjs.org/docs/latest/>
-- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
-
-## Project Philosophy
-
-- Follow good software engineering principles
-  - YAGNI
-  - AHA
-  - DRY
-  - SOLID
-- Clean, stable public APIs
-- Domain-driven design
-- Thousands of users and extensions
-- Prioritize clean interfaces that restrict extension access
-
-## Repository Navigation
-
-- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
-- Prefer running single tests for performance
-- Use --help for unfamiliar CLI tools
-
-## GitHub Integration
-
-When referencing Comfy-Org repos:
-
-1. Check for local copy
-2. Use GitHub API for branches/PRs/metadata
-3. Curl GitHub website if needed
-
-## Settings and Feature Flags Quick Reference
-
-### Settings Usage
-```typescript
-const settingStore = useSettingStore()
-const value = settingStore.get('Comfy.SomeSetting')     // Get setting
-await settingStore.set('Comfy.SomeSetting', newValue)   // Update setting
-```
-
-### Dynamic Defaults
-```typescript
-{
-  id: 'Comfy.Example.Setting',
-  defaultValue: () => window.innerWidth < 1024 ? 'small' : 'large'  // Runtime context
-}
-```
-
-### Version-Based Defaults
-```typescript
-{
-  id: 'Comfy.Example.Feature',
-  defaultValue: 'legacy',
-  defaultsByInstallVersion: { '1.25.0': 'enhanced' }  // Gradual rollout
-}
-```
-
-### Feature Flags
-```typescript
-if (api.serverSupportsFeature('feature_name')) {  // Check capability
-  // Use enhanced feature
-}
-const value = api.getServerFeature('config_name', defaultValue)  // Get config
-```
-
-**Documentation:**
-- Settings system: `docs/SETTINGS.md`
-- Feature flags system: `docs/FEATURE_FLAGS.md`
-
-## Common Pitfalls
-
-- NEVER use `any` type - use proper TypeScript types
-- NEVER use `as any` type assertions - fix the underlying type issue
-- NEVER use `--no-verify` flag when committing
-- NEVER delete or disable tests to make them pass
-- NEVER circumvent quality checks
-- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
-- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`

From 4bf766d45196a0a6ececb9eb71dff18a711a826e Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Fri, 5 Dec 2025 16:52:02 -0800
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=A4=96=20Address=20comments=20from=20?=
 =?UTF-8?q?#7194=20(#7198)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Addresses Christian's fantastic comments.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7198-Address-comments-from-7194-2c16d73d365081aaa7a1ea06c2d86ec0)
by [Unito](https://www.unito.io)
---
 AGENTS.md | 80 +++++++++++++++++++++----------------------------------
 1 file changed, 31 insertions(+), 49 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 986a3e27e..b395f650f 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -33,7 +33,7 @@
 
 ## Monorepo Architecture
 
-The project now uses **Nx** for build orchestration and task management:
+The project uses **Nx** for build orchestration and task management:
 
 - **Task Orchestration**: Commands like `dev`, `build`, `lint`, and `test:browser` run via Nx
 - **Caching**: Nx provides intelligent caching for faster rebuilds
@@ -97,13 +97,29 @@ Key Nx features:
   - aim to cover critical logic and new features
 - Playwright:
   - optional tags like `@mobile`, `@2x` are respected by config
+- Tests to avoid
+  - Change detector tests
+    - e.g. a test that just asserts that the defaults are certain values
+  - Tests that are dependent on non-behavioral features like utility classes or styles
+  - Redundant tests
 
 ## Commit & Pull Request Guidelines
 
-- Commits: Use `[skip ci]` for locale-only updates when appropriate
-- PRs: Include clear description, linked issues (`- Fixes #123`), and screenshots/GIFs for UI changes
-- Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass
+- PRs:
+  - Include clear description
+  - Reference linked issues (e.g. `- Fixes #123`)
+  - Keep it extremely concise and information-dense
+  - Don't use emojis or add excessive headers/sections
+  - Follow the PR description template in the `.github/` folder.
+- Quality gates:
+  - `pnpm lint`
+  - `pnpm typecheck`
+  - `pnpm knip`
+  - Relevant tests must pass
+- Never use `--no-verify` to bypass failing tests
+  - Identify the issue and present root cause analysis and possible solutions if you are unable to solve quickly yourself
 - Keep PRs focused and small
+  - If it looks like the current changes will have 300+ lines of non-test code, suggest ways it could be broken into multiple PRs
 
 ## Security & Configuration Tips
 
@@ -150,6 +166,10 @@ Key Nx features:
 9. Use Vite for fast development and building
 10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
 11. Avoid new usage of PrimeVue components
+12. Write tests for all changes, especially bug fixes to catch future regressions
+13. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
+14. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
+15. Refactoring should be used to make complex code simpler
 
 ## External Resources
 
@@ -188,49 +208,6 @@ When referencing Comfy-Org repos:
 2. Use GitHub API for branches/PRs/metadata
 3. Curl GitHub website if needed
 
-## Settings and Feature Flags Quick Reference
-
-### Settings Usage
-
-```typescript
-const settingStore = useSettingStore()
-const value = settingStore.get('Comfy.SomeSetting')     // Get setting
-await settingStore.set('Comfy.SomeSetting', newValue)   // Update setting
-```
-
-### Dynamic Defaults
-
-```typescript
-{
-  id: 'Comfy.Example.Setting',
-  defaultValue: () => window.innerWidth < 1024 ? 'small' : 'large'  // Runtime context
-}
-```
-
-### Version-Based Defaults
-
-```typescript
-{
-  id: 'Comfy.Example.Feature',
-  defaultValue: 'legacy',
-  defaultsByInstallVersion: { '1.25.0': 'enhanced' }  // Gradual rollout
-}
-```
-
-### Feature Flags
-
-```typescript
-if (api.serverSupportsFeature('feature_name')) {  // Check capability
-  // Use enhanced feature
-}
-const value = api.getServerFeature('config_name', defaultValue)  // Get config
-```
-
-**Documentation:**
-
-- Settings system: `docs/SETTINGS.md`
-- Feature flags system: `docs/FEATURE_FLAGS.md`
-
 ## Common Pitfalls
 
 - NEVER use `any` type - use proper TypeScript types
@@ -238,5 +215,10 @@ const value = api.getServerFeature('config_name', defaultValue)  // Get config
 - NEVER use `--no-verify` flag when committing
 - NEVER delete or disable tests to make them pass
 - NEVER circumvent quality checks
-- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
-- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
+- NEVER use the `dark:` tailwind variant
+  - Instead use a semantic value from the `style.css` theme
+    - e.g. `bg-node-component-surface`
+- NEVER use `:class="[]"` to merge class names
+  - Always use `import { cn } from '@/utils/tailwindUtil'`
+    - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
+  - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value

From 5db6d1af9a17dff9ee135b579ab32cecf8346c38 Mon Sep 17 00:00:00 2001
From: Luke Mino-Altherr <luke@comfy.org>
Date: Fri, 5 Dec 2025 18:38:52 -0800
Subject: [PATCH 4/5] [feat] Add video help dialog to Upload Model flow (#7177)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 src/locales/en/main.json                      |  2 +
 .../assets/components/UploadModelFooter.vue   | 32 +++++---
 .../assets/components/VideoHelpDialog.vue     | 75 +++++++++++++++++++
 3 files changed, 98 insertions(+), 11 deletions(-)
 create mode 100644 src/platform/assets/components/VideoHelpDialog.vue

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index b1378bc7e..2491075c3 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2113,6 +2113,8 @@
     "uploadingModel": "Importing model...",
     "uploadSuccess": "Model imported successfully!",
     "uploadFailed": "Import failed",
+    "uploadModelHelpVideo": "Upload Model Help Video",
+    "uploadModelHowDoIFindThis": "How do I find this?",
     "modelAssociatedWithLink": "The model associated with the link you provided:",
     "modelTypeSelectorLabel": "What type of model is this?",
     "modelTypeSelectorPlaceholder": "Select model type",
diff --git a/src/platform/assets/components/UploadModelFooter.vue b/src/platform/assets/components/UploadModelFooter.vue
index 7bb4cc966..82f597dd7 100644
--- a/src/platform/assets/components/UploadModelFooter.vue
+++ b/src/platform/assets/components/UploadModelFooter.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="flex justify-end gap-2 w-full">
-    <span
+    <IconTextButton
       v-if="currentStep === 1"
-      class="text-muted-foreground mr-auto underline flex items-center gap-2"
+      :label="$t('assetBrowser.uploadModelHowDoIFindThis')"
+      type="transparent"
+      size="md"
+      class="mr-auto underline text-muted-foreground"
+      data-attr="upload-model-step1-help-link"
+      @click="showVideoHelp = true"
     >
-      <i class="icon-[lucide--circle-question-mark]" />
-      <a
-        href="#"
-        target="_blank"
-        class="text-muted-foreground"
-        data-attr="upload-model-step1-help-link"
-        >{{ $t('How do I find this?') }}</a
-      >
-    </span>
+      <template #icon>
+        <i class="icon-[lucide--circle-question-mark]" />
+      </template>
+    </IconTextButton>
     <TextButton
       v-if="currentStep === 1"
       :label="$t('g.cancel')"
@@ -73,12 +73,22 @@
       data-attr="upload-model-step3-finish-button"
       @click="emit('close')"
     />
+    <VideoHelpDialog
+      v-model="showVideoHelp"
+      video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
+      :aria-label="$t('assetBrowser.uploadModelHelpVideo')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import TextButton from '@/components/button/TextButton.vue'
+import VideoHelpDialog from '@/platform/assets/components/VideoHelpDialog.vue'
+
+const showVideoHelp = ref(false)
 
 defineProps<{
   currentStep: number
diff --git a/src/platform/assets/components/VideoHelpDialog.vue b/src/platform/assets/components/VideoHelpDialog.vue
new file mode 100644
index 000000000..10f007472
--- /dev/null
+++ b/src/platform/assets/components/VideoHelpDialog.vue
@@ -0,0 +1,75 @@
+<template>
+  <Dialog
+    v-model:visible="isVisible"
+    modal
+    :closable="false"
+    :close-on-escape="false"
+    :dismissable-mask="true"
+    :pt="{
+      root: { class: 'video-help-dialog' },
+      header: { class: '!hidden' },
+      content: { class: '!p-0' },
+      mask: { class: '!bg-black/70' }
+    }"
+    :style="{ width: '90vw', maxWidth: '800px' }"
+  >
+    <div class="relative">
+      <IconButton
+        class="absolute top-4 right-6 z-10"
+        :aria-label="$t('g.close')"
+        @click="isVisible = false"
+      >
+        <i class="pi pi-times text-sm" />
+      </IconButton>
+      <video
+        autoplay
+        muted
+        loop
+        :aria-label="ariaLabel"
+        class="w-full rounded-lg"
+        :src="videoUrl"
+      >
+        {{ $t('g.videoFailedToLoad') }}
+      </video>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import Dialog from 'primevue/dialog'
+import { onWatcherCleanup, watch } from 'vue'
+
+import IconButton from '@/components/button/IconButton.vue'
+
+const isVisible = defineModel<boolean>({ required: true })
+
+const { videoUrl, ariaLabel = 'Help video' } = defineProps<{
+  videoUrl: string
+  ariaLabel?: string
+}>()
+
+const handleEscapeKey = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    event.stopImmediatePropagation()
+    event.stopPropagation()
+    event.preventDefault()
+    isVisible.value = false
+  }
+}
+
+// Add listener with capture phase to intercept before parent dialogs
+// Only active when dialog is visible
+watch(
+  isVisible,
+  (visible) => {
+    if (visible) {
+      const stop = useEventListener(document, 'keydown', handleEscapeKey, {
+        capture: true
+      })
+      onWatcherCleanup(stop)
+    }
+  },
+  { immediate: true }
+)
+</script>

From cde49d5b64939415334609feb1f098a8b3645e54 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Fri, 5 Dec 2025 18:40:11 -0800
Subject: [PATCH 5/5] refresh feature flags on auth or subscription state
 change (#7197)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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)
---
 src/extensions/core/cloudRemoteConfig.ts      | 17 ++++++++++++++
 .../remoteConfig/refreshRemoteConfig.ts       | 23 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/platform/remoteConfig/refreshRemoteConfig.ts

diff --git a/src/extensions/core/cloudRemoteConfig.ts b/src/extensions/core/cloudRemoteConfig.ts
index 8716269fb..0628800d8 100644
--- a/src/extensions/core/cloudRemoteConfig.ts
+++ b/src/extensions/core/cloudRemoteConfig.ts
@@ -1,4 +1,9 @@
+import { watchDebounced } from '@vueuse/core'
+
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { loadRemoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
 import { useExtensionService } from '@/services/extensionService'
 
 /**
@@ -9,6 +14,18 @@ useExtensionService().registerExtension({
   name: 'Comfy.Cloud.RemoteConfig',
 
   setup: async () => {
+    const { isLoggedIn } = useCurrentUser()
+    const { isActiveSubscription } = useSubscription()
+
+    watchDebounced(
+      [isLoggedIn, isActiveSubscription],
+      () => {
+        if (!isLoggedIn.value) return
+        void refreshRemoteConfig()
+      },
+      { debounce: 256, immediate: true }
+    )
+
     // Poll for config updates every 10 minutes
     setInterval(() => void loadRemoteConfig(), 600_000)
   }
diff --git a/src/platform/remoteConfig/refreshRemoteConfig.ts b/src/platform/remoteConfig/refreshRemoteConfig.ts
new file mode 100644
index 000000000..5000f2014
--- /dev/null
+++ b/src/platform/remoteConfig/refreshRemoteConfig.ts
@@ -0,0 +1,23 @@
+import { api } from '@/scripts/api'
+
+import { remoteConfig } from './remoteConfig'
+
+export async function refreshRemoteConfig(): Promise<void> {
+  try {
+    const response = await api.fetchApi('/features', { cache: 'no-store' })
+    if (response.ok) {
+      const config = await response.json()
+      window.__CONFIG__ = config
+      remoteConfig.value = config
+      return
+    }
+
+    console.warn('Failed to load remote config:', response.statusText)
+    if (response.status === 401 || response.status === 403) {
+      window.__CONFIG__ = {}
+      remoteConfig.value = {}
+    }
+  } catch (error) {
+    console.error('Failed to fetch remote config:', error)
+  }
+}