Commit Graph

17 Commits

Author SHA1 Message Date
Alexander Brown
e4308a7258 refactor: rename CLAUDE.md to AGENTS.md (#8052)
## Summary

Pure rename of CLAUDE.md files to AGENTS.md (no content changes).

## Changes

| Old Path | New Path |
|----------|----------|
| `.github/CLAUDE.md` | `.github/AGENTS.md` |
| `.storybook/CLAUDE.md` | `.storybook/AGENTS.md` |
| `browser_tests/CLAUDE.md` | `browser_tests/AGENTS.md` |
| `src/CLAUDE.md` | `src/AGENTS.md` |
| `src/components/CLAUDE.md` | `src/components/AGENTS.md` |
| `src/lib/litegraph/CLAUDE.md` | `src/lib/litegraph/AGENTS.md` |

Root `CLAUDE.md` deleted (content will be merged into `AGENTS.md` in
follow-up PR).

## Follow-up

A second PR will add glob-based guidance files and consolidate
redundancies.

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
2026-01-16 13:32:18 -08:00
Benjamin Lu
818c5c32e5 [QPOv2] Add stories for list view and general job card (#7743)
Add stories for the media assets sidebar tab for easier prototyping.

Includes mocks for storybook.

Because some functions in the mocks are only used in the storybook
main.ts resolve, knip flags them as unused because it doesn't check that
path. So knipIgnoreUnusedButUsedByStorybook was added.

Part of the QPO v2 iteration, figma design can be found
[here](https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3330-37286&m=dev).
This will be implemented in a series of stacked PRs that can be reviewed
and merged individually.

main <-- #7737, #7743, #7745

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7743-QPOv2-Add-stories-for-list-view-and-general-job-card-2d26d73d365081bca59afa925fb232d7)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2026-01-10 22:34:37 -07:00
Alexander Brown
e26e1f0c9e feat: add HoneyToast component for persistent progress notifications (#7902)
## Summary

Add HoneyToast, a persistent bottom-anchored notification component for
long-running task progress, and migrate existing progress dialogs to use
it.

## Changes

- **What**: 
- New `HoneyToast` component with slot-based API, Teleport, transitions,
and accessibility
  - Migrated `ModelImportProgressDialog` to use HoneyToast
- Created `ManagerProgressToast` combining the old Header/Content/Footer
components
- Deleted deprecated `ManagerProgressDialogContent`,
`ManagerProgressHeader`, `ManagerProgressFooter`, and
`useManagerProgressDialogStore`
- Removed no-op
`showManagerProgressDialog`/`toggleManagerProgressDialog` functions
  - Added Storybook stories for HoneyToast and ProgressToastItem

## Review Focus

- HoneyToast component design and slot API
- ManagerProgressToast self-contained state management (auto-shows when
`comfyManagerStore.taskLogs.length > 0`)
- Accessibility attributes on the toast component

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7902-feat-add-HoneyToast-component-for-persistent-progress-notifications-2e26d73d365081c78ae6edc5accb326e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: sno <snomiao@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>
2026-01-08 16:49:56 -08:00
Alexander Brown
89e67b1558 Deps: Update Storybook to v10 (#7559)
## Summary

Update Storybook and the related dependencies to v10.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7559-Deps-Update-Storybook-to-v10-2cb6d73d365081a1ab64e835b84b2a0e)
by [Unito](https://www.unito.io)
2025-12-16 17:41:34 +00:00
Alexander Brown
135169003f Devex: Remove Importmap plugin (#6899)
## Summary

See [this
page](https://www.notion.so/comfy-org/Remove-importmap-and-replace-with-better-solution-if-it-exists-2ab6d73d3650801d83afe006fa0d9929?source=copy_link).

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6899-Devex-Remove-Importmap-plugin-2b66d73d365081b28167c9ae70100092)
by [Unito](https://www.unito.io)
2025-11-24 20:39:46 -08:00
Jin Yi
e9b641cfb7 [bugfix] Fix Storybook _sfc_main undefined error after v1.29.3 (#6635)
## Summary

Fixes Storybook rendering issue where all components fail to load with
`_sfc_main is not defined` error in **local development** since v1.29.3.

## Problem

After upgrading to v1.29.3, all Storybook components fail to render **in
local development** (`pnpm storybook`) with the following error:

```
ReferenceError: _sfc_main is not defined
The component failed to render properly, likely due to a configuration issue in Storybook.
```

**Important**: This issue only affects **local development**
environments. The deployed/built Storybook works correctly.

This affects both:
- Main Storybook (`pnpm storybook`)
- Desktop-ui Storybook instances

## Root Cause

In v1.29.3, commit `64430708e` ("perf: tree shaking and minify #6068")
enabled build optimizations in `vite.config.mts`:

```typescript
// Before (v1.29.2)
rollupOptions: {
  treeshake: false
}
esbuild: {
  minifyIdentifiers: false
}

// After (v1.29.3)
rollupOptions: {
  treeshake: true  // ⚠️ Enabled
}
esbuild: {
  minifyIdentifiers: SHOULD_MINIFY  // ⚠️ Conditionally enabled
}
```

While these optimizations are beneficial for production builds, they
cause issues in **Storybook's local dev server**:

1. **Tree-shaking in dev mode**: Rollup incorrectly identifies Vue SFC's
`_sfc_main` exports as unused code during the dev server's module
transformation
2. **Identifier minification**: esbuild minifies `_sfc_main` to shorter
names in development, breaking Storybook's HMR (Hot Module Replacement)
and dynamic module loading

Since Storybook's `main.ts` inherits settings from `vite.config.mts` via
`mergeConfig`, these optimizations were applied to Storybook's dev
server configuration, causing Vue components to fail rendering in local
development.

**Why deployed Storybook works**: Production builds have different
optimization pipelines that handle Vue SFCs correctly, but the dev
server's real-time transformation breaks with these settings.

## Solution

Added explicit build configuration overrides in both Storybook
configurations to ensure the **dev server** doesn't inherit problematic
optimizations:

**Files changed:**
- `.storybook/main.ts`
- `apps/desktop-ui/.storybook/main.ts`

**Changes:**
```typescript
esbuild: {
  // Prevent minification of identifiers to preserve _sfc_main in dev mode
  minifyIdentifiers: false,
  keepNames: true
},
build: {
  rollupOptions: {
    // Disable tree-shaking for Storybook dev server to prevent Vue SFC exports from being removed
    treeshake: false,
    // ... existing onwarn config
  }
}
```

This ensures Storybook's **local development server** prioritizes
stability and debuggability over bundle size optimization, while
production builds continue to benefit from tree-shaking and
minification.

## Testing

1. Cleared Storybook and Vite caches: `rm -rf .storybook/.cache
node_modules/.vite`
2. Started local Storybook dev server with `pnpm storybook`
3. Verified all component stories render correctly without `_sfc_main`
errors
4. Ran `pnpm typecheck` to ensure TypeScript compilation succeeds
5. Tested HMR (Hot Module Replacement) works correctly with component
changes

## Context

- This is a **local development-only** issue; deployed Storybook builds
work fine
- Storybook dev server requires special handling because it dynamically
imports and hot-reloads all stories at runtime
- Vue SFC compilation generates `_sfc_main` as an internal identifier
that must be preserved during dev transformations
- Development tools like Storybook benefit from unoptimized builds for
better debugging, HMR, and stability
- Production builds remain optimized with tree-shaking and minification
enabled

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6635-bugfix-Fix-Storybook-_sfc_main-undefined-error-after-v1-29-3-2a56d73d36508194a25eef56789e5e2b)
by [Unito](https://www.unito.io)
2025-11-08 10:40:33 -07:00
Alexander Brown
99b3a59679 Style: Standardize icon use Part 1 (#5947)
## Summary

Remove the mix of class based and component style icons in favor of just
[classes](https://iconify.design/docs/usage/css/tailwind/tailwind4/#basic-usage).

## Changes

- **What**: Migrate existing lucide icons

## Review Focus

What differs between the icons before and now?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5947-Style-Standardize-icon-use-Part-1-2846d73d365081bfa66ceb6bdaa9ff02)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-10-07 17:53:38 -07:00
filtered
07a74e3cdc Decouple Desktop UI into monorepo app (#5912)
## Summary

Extracts desktop UI into apps/desktop-ui package with minimal changes.

## Changes

- **What**:
- Separates desktop-specific code into standalone package with
independent Vite config, router, and i18n
- Drastically simplifies the main app router by removing all desktop
routes
  - Adds a some code duplication, most due to the existing design
- Some duplication can be refactored to be *simpler* on either side - no
need to split things by `isElectron()`
  - Rudimentary storybook support has been added
- **Breaking**: Stacked PR for publishing must be merged before this PR
makes it to stable core (but publishing _could_ be done manually)
  - #5915
- **Dependencies**: Takes full advantage of pnpm catalog. No additional
dependencies added.

## Review Focus

- Should be no changes to normal frontend operation
- Scripts added to root package.json are acceptable
- The duplication in this PR is copied as is, wherever possible. Any
corrections or fix-ups beyond the scope of simply migrating the
functionality as-is, can be addressed in later PRs. That said, if any
changes are made, it instantly becomes more difficult to separate the
duplicated code out into a shared utility.
  - Tracking issue to address concerns: #5925

### i18n

Fixing i18n is out of scope for this PR. It is a larger task that we
should consider carefully and implement properly. Attempting to isolate
the desktop i18n and duplicate the _current_ localisation scripts would
be wasted energy.
2025-10-05 05:04:27 +00:00
Alexander Brown
b994608506 Tests: Vitest configuration cleanup (#5888)
## Summary

Simplify default scripts. Filtering is still available to users, we can
revisit tagging or grouping later.
This fixes the issue where we had tests that were in the codebase but
never run because they weren't under `/src/components`

Also deletes the duplicate litegraph tests and their associated vitest
config file.

## Changes

- **What**: Test cleanup

## Review Focus

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5888-Tests-Vitest-configuration-cleanup-2806d73d36508197b800f68f0b028279)
by [Unito](https://www.unito.io)
2025-10-02 21:01:42 -07:00
filtered
9f19d8fb4b Migrate Tailwind styles to design-system package (#5794)
## Summary

Consolidates Tailwind configuration and styles into a shared
`@comfyorg/design-system` package for reuse across monorepo apps.

The goal was not to make changes to how the design system works; merely
to separate it cleanly. I _would_ strongly recommend some drastic
sweeping changes, however I believe that should be done after the
migration.

## Changes

- **What**: Migrates CSS files, Tailwind config, and custom icons to
design-system package
- **Dependencies**: Moves `@iconify-json/lucide` and `@iconify/tailwind`
to design-system package
2025-09-26 12:01:53 -07:00
Arjan Singh
dfa1cbba4f Asset Browser Modal Component (#5607)
* [ci] ignore playwright mcp directory

* [feat] add AssetBrowserModal

And all related sub components

* [feat] reactive filter functions

* [ci] clean up storybook config

* [feat] add sematic AssetCard

* [fix] i love lucide

* [fix] AssetCard layout issues

* [fix] add AssetBadge type

* [fix] simplify useAssetBrowser

* [fix] modal layout

* [fix] simplify useAssetBrowserDialog

* [fix] add tailwind back to storybook

* [fix] better reponsive layout

* [fix] missed i18n string

* [fix] missing i18n translations

* [fix] remove erroneous prevent on keyboard.space

* [feat] add asset metadata validation utilities

* [fix] remove erroneous test code

* [fix] remove forced min and max width on AssetCard

* [fix] import statement nits
2025-09-17 16:17:09 -07:00
Jin Yi
e70ddea684 fix: Add dropdown size control to Select components and improve UI (#5290)
* feature: size adjust

* feature: design adjust

* fix: popover width, height added

* fix: li style override

* refactor: improve component readability and
  maintainability per PR feedback

  - Replace CardGridList component with
  createGridStyle utility function
  - Add runtime validation for grid column values
  - Remove !important usage in MultiSelect, use cn()
  function instead
  - Extract popover sizing logic into
  usePopoverSizing composable
  - Improve class string readability by splitting
  into logical groups
  - Use Tailwind size utilities (size-8, size-10)
  instead of separate width/height
  - Remove magic numbers in SearchBox, align with
  button sizes
  - Rename BaseWidgetLayout to BaseModalLayout for
  clarity
  - Enhance SearchBox click area to cover entire
  component
  - Refactor long class strings using cn() utility
  across components

* fix: BaseWidgetLayout => BaseModalLayout

* fix: CardGrid deleted

* fix: unused exported types

* Update test expectations [skip ci]

* chore: code review

* Update test expectations [skip ci]

* chore: restore screenshot

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-09-11 03:01:06 -07:00
Jin Yi
f8b8b1c6ed [feat] Enhance MultiSelect component and Storybook stories (#5154) 2025-08-31 14:50:49 +09:00
Alexander Brown
1b83d6b5a6 Migration: pnpm (#5215)
* migration: npm to pnpm
Step 1, package and lockfile

* migration: npm to pnpm
Step 2: docs / LLM instructions

* migration: npm to pnpm
Step 3: More documentation updates

* migration: npm to pnpm
Step 4: Even more documentation

* migration: npm to pnpm
Step 5: GitHub Actions

* migration: npm to pnpm
Step 6: PNPM installation in actions. This merge is going to be painful.

* migration: npm to pnpm
Unignore and add pnpm lockfile.

* migration: npm to pnpm
package-lock.json -> pnpm-lock.yaml

* migration: explicit @primeuix/styled, move glob to prod deps

* migration: more explicit deps required by the importmap plugin and vite

* fix: missed merge artifact

* fix: Make sure pnpm is available to install wrangler

* migration: pnpm for dev-release.yaml

* migration: new setup action version
Won't work until that is updated and a new release is cut.

* migration: Playwright needs uuid

* migration: Add explicit deps for lobehub

* chore(version-bump.yaml): change cache from npm to pnpm to optimize package management and improve build performance

* migration: install pnpm in version-bump action

---------

Co-authored-by: snomiao <snomiao@gmail.com>
2025-08-27 06:10:15 -07:00
Jin Yi
11f5439d29 [feat] Add comprehensive Storybook stories for custom UI components (#5098) 2025-08-21 08:41:54 +09:00
Jin Yi
5f349ed3cd chore: storybook-doc added (#5122) 2025-08-20 08:15:43 -07:00
snomiao
451ef24ea6 [feat] Add Storybook setup and NodePreview story (#4861)
* [feat] Add Storybook setup and NodePreview story

- Install and configure Storybook v9.1.1 for Vue 3
- Set up Storybook configuration with Vite integration
- Add Pinia store support for Storybook environment
- Create comprehensive NodePreview.stories.ts with multiple node examples:
  - KSampler node (complex node with multiple inputs/outputs)
  - CLIP Text Encode node (simple text input node)
  - VAE Decode node (image processing node)
  - Example with long markdown description
- Configure project paths and aliases for Storybook
- Stories demonstrate various ComfyUI node types with realistic mock data
- Update tsconfig.eslint.json to include Storybook files
- Fix ESLint issues with imports and number precision
- Add Storybook ESLint plugin configuration

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

Co-Authored-By: Claude <noreply@anthropic.com>

* [feat] Improve Storybook configuration and setup

- Add comprehensive PrimeVue theme setup with ComfyUI preset
- Configure proper Vue app setup with Pinia stores, i18n, and services
- Remove unused onboarding addon from Storybook dependencies
- Improve Vite configuration with better chunking and alias resolution
- Add proper CSS imports and styling for ComfyUI components

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

Co-Authored-By: Claude <noreply@anthropic.com>

* [docs] Add comprehensive Storybook documentation

- Add README.md explaining Storybook usage, benefits, and comparison with other tools
- Add CLAUDE.md with development guidelines for working with Storybook
- Include best practices, troubleshooting tips, and integration notes
- Address PR review feedback for better developer onboarding

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

Co-Authored-By: Claude <noreply@anthropic.com>

* [refactor] Remove ts-expect-error comment from Storybook preview

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

Co-Authored-By: Claude <noreply@anthropic.com>

* [bugfix] Fix TypeScript errors in Load3D components and GLTF test

- Fix type mismatches in Load3DScene eventConfig by casting string values to proper enum types (MaterialMode, CameraType, UpDirection)
- Fix Uint8Array vs ArrayBuffer type issues in GLTF test by using .buffer property
- Remove unused @ts-expect-error comment in Rectangle.ts

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

Co-Authored-By: Claude <noreply@anthropic.com>

* [feat] Add Chromatic GitHub Action for Storybook visual testing

- Add automated visual regression testing for Storybook components
- Configure workflow to run on main branch and PRs
- Auto-accept changes on main branch for baseline updates
- Uses build-storybook script for optimized builds

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

Co-Authored-By: Claude <noreply@anthropic.com>

* [docs] Add Chromatic documentation to Storybook README

- Document Chromatic visual testing integration
- Add information about automated testing workflow
- Include best practices for visual regression testing
- Explain how to view and manage test results

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

Co-Authored-By: Claude <noreply@anthropic.com>

* chore(chromatic.yaml): restrict push branches to main only for better workflow management

* [feat] Rebase branch onto main and update Storybook configuration

- Rebase sno-storybook branch onto origin/main with latest changes
- Update .storybook/main.ts with additional plugins and component configuration
- Add icons and component resolvers for Storybook support
- Update .gitignore with new entries
- Regenerate package-lock.json after rebase conflicts

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

Co-Authored-By: Claude <noreply@anthropic.com>

* [bugfix] Fix TypeScript errors in SubgraphNode type checking

Add proper type validation for subgraph node selection before calling
SubgraphNode-specific methods. This prevents undefined values from being
passed to functions expecting SubgraphNode parameters.

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

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(vite.config.mts): correct path alias for src directory to ensure proper resolution in the project
refactor(vite.config.mts): adjust templates proxy configuration for better readability and maintainability

* [feat] Remove bun.lock as it's now ignored

* [bugfix] Fix Storybook builder require() error by converting main.ts to main.mjs

- Convert .storybook/main.ts to main.mjs to resolve ES module compatibility
- Use dynamic imports instead of static imports to avoid require() errors
- Add .storybook directory to tsconfig.json includes
- Storybook build and dev server now work correctly

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

Co-Authored-By: Claude <noreply@anthropic.com>

* chore(storybook): replace main.mjs with main.ts for improved type safety and maintainability
fix(storybook): remove unused import map plugins in Storybook configuration to prevent potential issues
fix(storybook): update color palette store initialization to streamline code and improve readability

* [feat] Optimize Chromatic workflow with automated PR status comments

- Replace complex GitHub Script actions with edumserrano/find-create-or-update-comment@v3
- Add comprehensive PR comments showing Storybook build progress and results
- Include build metrics: components, stories, visual changes, and errors
- Add direct links to Chromatic builds and Storybook previews
- Reduce workflow complexity by ~60 lines while maintaining functionality
- Use native GitHub Actions expressions for cleaner maintainability

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

* chore(chromatic.yaml): move permissions section inside the chromatic-deployment job for better organization and clarity

* [fix] Resolve Vite CJS deprecation warning in Storybook config

- Use dynamic import for mergeConfig to avoid CJS build warning
- Replace static import with dynamic import in viteFinal function
- Maintain type safety with separate type import
- Fixes "The CJS build of Vite's Node API is deprecated" warning

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

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(chromatic.yaml): change edit-mode from replace to append to preserve existing comments in pull request

* [fix] Replace __dirname with process.cwd() in Storybook config

__dirname is not available in all environments. Using process.cwd()
provides better compatibility and resolves path issues in Storybook.

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

Co-Authored-By: Claude <noreply@anthropic.com>

* feature: storybook-setting (#5088)

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Jin Yi <jin12cc@gmail.com>
2025-08-18 20:05:28 -07:00