Merge branch 'main' into copilot/standardize-triggering-and-docs

## Summary

Added configurable base branch selection to version bump workflows,
enabling patch releases from `core/*` branches via GitHub Actions UI.

## Changes

- **What**: Extended [workflow_dispatch
inputs](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#workflow_dispatch)
with `branch` parameter for both main frontend and desktop-ui version
bump workflows
- **Validation**: Added branch existence check that lists available
`core/*` branches on error
- **Workflow modifications**:
- `release-version-bump.yaml`: Checkout and create PRs targeting
user-specified branch
- `version-bump-desktop-ui.yaml`: Same behavior for desktop-ui releases

## Review Focus

Branch validation logic correctly handles both local (`refs/heads/`) and
remote (`refs/remotes/origin/`) refs. Default value preserves backward
compatibility for release sheriffs unfamiliar with new feature.

## Use Case

Previously, patch releases from `core/1.29` required manual version
bumping. Now maintainers can trigger from Actions UI with dropdown
selections.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6117-ci-allow-manual-workflow-dispatch-to-do-version-bumping-on-core-branches-rather-than-j-2906d73d365081cba3aff46471206a9e)
by [Unito](https://www.unito.io)

.claude/commands/create-frontend-release.md

@@ -458,15 +458,15 @@ echo "Workflow triggered. Waiting for PR creation..."
 3. **IMMEDIATELY CHECK**: Did release workflow trigger?
    ```bash
    sleep 10
-   gh run list --workflow=release.yaml --limit=1
+   gh run list --workflow=release-draft-create.yaml --limit=1
    ```
-4. **For Minor/Major Version Releases**: The create-release-candidate-branch workflow will automatically:
+4. **For Minor/Major Version Releases**: The release-branch-create workflow will automatically:
    - Create a `core/x.yy` branch for the PREVIOUS minor version
    - Apply branch protection rules
    - Document the feature freeze policy
    ```bash
    # Monitor branch creation (for minor/major releases)
-   gh run list --workflow=create-release-candidate-branch.yaml --limit=1
+   gh run list --workflow=release-branch-create.yaml --limit=1
    ```
 4. If workflow didn't trigger due to [skip ci]:
    ```bash
@@ -477,7 +477,7 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```
 5. If workflow triggered, monitor execution:
    ```bash
-   WORKFLOW_RUN_ID=$(gh run list --workflow=release.yaml --limit=1 --json databaseId --jq '.[0].databaseId')
+   WORKFLOW_RUN_ID=$(gh run list --workflow=release-draft-create.yaml --limit=1 --json databaseId --jq '.[0].databaseId')
    gh run watch ${WORKFLOW_RUN_ID}
    ```
 

.claude/commands/create-hotfix-release.md

@@ -246,7 +246,7 @@ For each commit:
 3. Merge the PR: `gh pr merge --merge`
 4. Monitor release workflow:
    ```bash
-   gh run list --workflow=release.yaml --limit=1
+   gh run list --workflow=release-draft-create.yaml --limit=1
    gh run watch
    ```
 5. Track progress:

.github/workflows/README.md

@@ -1,5 +1,10 @@
 # GitHub Workflows
 
+This directory contains GitHub Actions workflow files that automate various aspects of the ComfyUI frontend development and release process.
+
+> **Note:** This documentation is auto-generated from workflow files. Do not edit manually.
+> Run `pnpm workflow:docs` to regenerate.
+
 ## Naming Convention
 
 Workflow files follow a consistent naming pattern: `<prefix>-<descriptive-name>.yaml`
@@ -8,14 +13,286 @@ Workflow files follow a consistent naming pattern: `<prefix>-<descriptive-name>.
 
 | Prefix     | Purpose                             | Example                              |
 | ---------- | ----------------------------------- | ------------------------------------ |
-| `ci-`      | Testing, linting, validation        | `ci-tests-e2e.yaml`                  |
-| `release-` | Version management, publishing      | `release-version-bump.yaml`          |
-| `pr-`      | PR automation (triggered by labels) | `pr-claude-review.yaml`              |
-| `api-`     | External Api type generation        | `api-update-registry-api-types.yaml` |
-| `i18n-`    | Internationalization updates        | `i18n-update-core.yaml`              |
+| `ci-` | Testing, linting, validation | `ci-json-validation.yaml` |
+| `pr-` | PR automation (triggered by labels) | `pr-backport.yaml` |
+| `release-` | Version management, publishing | `release-branch-create.yaml` |
+| `api-` | External API type generation | `api-update-electron-api-types.yaml` |
+| `i18n-` | Internationalization updates | `i18n-update-core.yaml` |
+| `publish-` | Publishing and deployment | `publish-desktop-ui-on-merge.yaml` |
+| `version-` | Version management | `version-bump-desktop-ui.yaml` |
+
+
+## Quick Reference
+
+For label-triggered workflows, add the corresponding label to a PR to trigger the workflow:
+- `New Browser Test Expectations` - Updates Playwright test snapshots when triggered by label or comment
+- `Release` - Triggers 3 workflows
+- `claude-review` - AI-powered code review triggered by adding the 'claude-review' label to a PR
+- `needs-backport` - Automatically backports merged PRs to release branches when 'needs-backport' label is applied
+
+For manual workflows, use the "Run workflow" button in the Actions tab.
+
+
+## Workflow Details
+
+
+### CI
+
+#### [`ci-json-validation.yaml`](./ci-json-validation.yaml)
+
+**Name:** CI: JSON Validation
+
+**Description:** Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq
+
+**Triggers:** push
+
+#### [`ci-lint-format.yaml`](./ci-lint-format.yaml)
+
+**Name:** CI: Lint Format
+
+**Description:** Linting and code formatting validation for pull requests
+
+**Triggers:** pull_request
+
+#### [`ci-python-validation.yaml`](./ci-python-validation.yaml)
+
+**Name:** CI: Python Validation
+
+**Description:** Validates Python code in tools/devtools directory
+
+**Triggers:** pull_request, push
+
+#### [`ci-tests-e2e-forks.yaml`](./ci-tests-e2e-forks.yaml)
+
+**Name:** CI: Tests E2E (Deploy for Forks)
+
+**Description:** Deploys test results from forked PRs (forks can't access deployment secrets)
+
+#### [`ci-tests-e2e.yaml`](./ci-tests-e2e.yaml)
+
+**Name:** CI: Tests E2E
+
+**Description:** End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages
+
+**Triggers:** pull_request, push
+
+#### [`ci-tests-storybook-forks.yaml`](./ci-tests-storybook-forks.yaml)
+
+**Name:** CI: Tests Storybook (Deploy for Forks)
+
+**Description:** Deploys Storybook previews from forked PRs (forks can't access deployment secrets)
+
+#### [`ci-tests-storybook.yaml`](./ci-tests-storybook.yaml)
+
+**Name:** CI: Tests Storybook
+
+**Description:** Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages
+
+**Triggers:** workflow_dispatch (manual), pull_request
+
+#### [`ci-tests-unit.yaml`](./ci-tests-unit.yaml)
+
+**Name:** CI: Tests Unit
+
+**Description:** Unit and component testing with Vitest
+
+**Triggers:** pull_request, push
+
+#### [`ci-workflow-docs.yaml`](./ci-workflow-docs.yaml)
+
+**Name:** CI: Workflow Documentation
+
+**Description:** Validates that workflow documentation is up-to-date with workflow files
+
+**Triggers:** pull_request
+
+
+### PR
+
+#### [`pr-backport.yaml`](./pr-backport.yaml)
+
+**Name:** PR Backport
+
+**Description:** Automatically backports merged PRs to release branches when 'needs-backport' label is applied
+
+**Triggers:** workflow_dispatch (manual), pull_request_target (closed, labeled)
+
+**Label Triggers:** `needs-backport`
+
+#### [`pr-claude-review.yaml`](./pr-claude-review.yaml)
+
+**Name:** PR: Claude Review
+
+**Description:** AI-powered code review triggered by adding the 'claude-review' label to a PR
+
+**Triggers:** pull_request (labeled)
+
+**Label Triggers:** `claude-review`
+
+#### [`pr-update-playwright-expectations.yaml`](./pr-update-playwright-expectations.yaml)
+
+**Name:** PR: Update Playwright Expectations
+
+**Description:** Updates Playwright test snapshots when triggered by label or comment
+
+**Triggers:** pull_request (labeled), issue_comment (created)
+
+**Label Triggers:** `New Browser Test Expectations`, `/update-playwright`
+
+
+### RELEASE
+
+#### [`release-branch-create.yaml`](./release-branch-create.yaml)
+
+**Name:** Release Branch Create
+
+**Description:** Creates release branch when version bump PR with 'Release' label is merged
+
+**Triggers:** pull_request (closed)
+
+**Label Triggers:** `Release`
+
+#### [`release-draft-create.yaml`](./release-draft-create.yaml)
+
+**Name:** Release Draft Create
+
+**Description:** Creates GitHub release draft when version bump PR with 'Release' label is merged
+
+**Triggers:** pull_request (closed)
+
+**Label Triggers:** `Release`
+
+#### [`release-npm-types.yaml`](./release-npm-types.yaml)
+
+**Name:** Release NPM Types
+
+**Description:** Manual workflow to publish TypeScript type definitions to npm
+
+**Triggers:** workflow_dispatch (manual)
+
+#### [`release-pypi-dev.yaml`](./release-pypi-dev.yaml)
+
+**Name:** Release PyPI Dev
+
+**Description:** Manual workflow to publish development version to PyPI
+
+**Triggers:** workflow_dispatch (manual)
+
+#### [`release-version-bump.yaml`](./release-version-bump.yaml)
+
+**Name:** Release: Version Bump
+
+**Description:** Manual workflow to increment package version with semantic versioning support
+
+**Triggers:** workflow_dispatch (manual)
+
+
+### API
+
+#### [`api-update-electron-api-types.yaml`](./api-update-electron-api-types.yaml)
+
+**Name:** Api: Update Electron API Types
+
+**Description:** When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo
+
+**Triggers:** workflow_dispatch (manual)
+
+#### [`api-update-manager-api-types.yaml`](./api-update-manager-api-types.yaml)
+
+**Name:** Api: Update Manager API Types
+
+**Description:** When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo
+
+**Triggers:** workflow_dispatch (manual)
+
+#### [`api-update-registry-api-types.yaml`](./api-update-registry-api-types.yaml)
+
+**Name:** Api: Update Registry API Types
+
+**Description:** When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo
+
+**Triggers:** workflow_dispatch (manual)
+
+
+### I18N
+
+#### [`i18n-update-core.yaml`](./i18n-update-core.yaml)
+
+**Name:** i18n: Update Core
+
+**Description:** Generates and updates translations for core ComfyUI components using OpenAI
+
+**Triggers:** workflow_dispatch (manual), pull_request (opened, synchronize, reopened)
+
+#### [`i18n-update-custom-nodes.yaml`](./i18n-update-custom-nodes.yaml)
+
+**Name:** i18n Update Custom Nodes
+
+**Description:** Updates translations for custom node repositories using OpenAI
+
+**Triggers:** workflow_dispatch (manual)
+
+#### [`i18n-update-nodes.yaml`](./i18n-update-nodes.yaml)
+
+**Name:** i18n Update Nodes
+
+**Description:** Updates translations for ComfyUI node definitions
+
+**Triggers:** workflow_dispatch (manual)
+
+
+### PUBLISH
+
+#### [`publish-desktop-ui-on-merge.yaml`](./publish-desktop-ui-on-merge.yaml)
+
+**Name:** Publish Desktop UI on PR Merge
+
+**Description:** Automatically publishes desktop UI package to npm when version bump PR is merged
+
+**Triggers:** pull_request (closed)
+
+**Label Triggers:** `Release`
+
+#### [`publish-desktop-ui.yaml`](./publish-desktop-ui.yaml)
+
+**Name:** Publish Desktop UI
+
+**Description:** Manual workflow to publish desktop UI package to npm with specified version
+
+**Triggers:** workflow_dispatch (manual)
+
+
+### VERSION
+
+#### [`version-bump-desktop-ui.yaml`](./version-bump-desktop-ui.yaml)
+
+**Name:** Version Bump Desktop UI
+
+**Description:** Manual workflow to increment desktop UI package version with semantic versioning support
+
+**Triggers:** workflow_dispatch (manual)
+
+
 
 ## Documentation
 
-Each workflow file contains comments explaining its purpose, triggers, and behavior. For specific details about what each workflow does, refer to the comments at the top of each `.yaml` file.
+For more information about GitHub Actions, see:
+- [Events that trigger workflows](https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows)
+- [Workflow syntax](https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions)
 
-For GitHub Actions documentation, see [Events that trigger workflows](https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows).
+## Maintaining Workflows
+
+### Adding a New Workflow
+
+1. Create a new workflow file following the naming convention
+2. Include `name` and `description` fields at the top of the workflow
+3. Run `pnpm workflow:docs` to update this README
+4. Commit both the workflow file and updated README
+
+### Best Practices
+
+1. **Always include a description**: Add a `description` field after the `name` field
+2. **Use consistent prefixes**: Follow the established prefix conventions
+3. **Label-triggered workflows**: For PR automation, use the `pr-` prefix
+4. **Document triggers**: Make trigger conditions clear in the workflow description
+5. **Keep docs in sync**: Run `pnpm workflow:docs` after any workflow changes

.github/workflows/ci-workflow-docs.yaml

@@ -0,0 +1,43 @@
+name: "CI: Workflow Documentation"
+description: "Validates that workflow documentation is up-to-date with workflow files"
+
+on:
+  pull_request:
+    paths:
+      - '.github/workflows/*.yaml'
+      - '.github/workflows/*.yml'
+      - 'scripts/cicd/generate-workflow-docs.ts'
+
+jobs:
+  check-docs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate workflow documentation
+        run: pnpm workflow:docs
+
+      - name: Check if documentation is up-to-date
+        run: |
+          if [ -n "$(git status --porcelain .github/workflows/README.md)" ]; then
+            echo "::error::Workflow documentation is out of date. Please run 'pnpm workflow:docs' and commit the changes."
+            git diff .github/workflows/README.md
+            exit 1
+          else
+            echo "✓ Workflow documentation is up-to-date"
+          fi

.github/workflows/i18n-update-custom-nodes.yaml

@@ -1,4 +1,5 @@
 name: i18n Update Custom Nodes
+description: "Updates translations for custom node repositories using OpenAI"
 
 on:
   workflow_dispatch:

.github/workflows/i18n-update-nodes.yaml

@@ -1,4 +1,5 @@
 name: i18n Update Nodes
+description: "Updates translations for ComfyUI node definitions"
 
 on:
   workflow_dispatch:

.github/workflows/pr-backport.yaml

@@ -1,4 +1,5 @@
 name: PR Backport
+description: "Automatically backports merged PRs to release branches when 'needs-backport' label is applied"
 
 on:
   pull_request_target:
@@ -95,41 +96,61 @@ jobs:
           echo "skip=true" >> $GITHUB_OUTPUT
           echo "::warning::Backport PRs already exist for PR #${PR_NUMBER}, skipping to avoid duplicates"
 
-      - name: Extract version labels
+      - name: Collect backport targets
         if: steps.check-existing.outputs.skip != 'true'
-        id: versions
+        id: targets
         run: |
-          # Extract version labels (e.g., "1.24", "1.22")
-          VERSIONS=""
-          
+          TARGETS=()
+          declare -A SEEN=()
+
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            # For manual triggers, get labels from the PR
             LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
           else
-            # For automatic triggers, extract from PR event
             LABELS='${{ toJSON(github.event.pull_request.labels) }}'
             LABELS=$(echo "$LABELS" | jq -r '.[].name')
           fi
-          
-          for label in $LABELS; do
-            # Match version labels like "1.24" (major.minor only)
-            if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
-              # Validate the branch exists before adding to list
-              if git ls-remote --exit-code origin "core/${label}" >/dev/null 2>&1; then
-                VERSIONS="${VERSIONS}${label} "
-              else
-                echo "::warning::Label '${label}' found but branch 'core/${label}' does not exist"
-              fi
-            fi
-          done
 
-          if [ -z "$VERSIONS" ]; then
-            echo "::error::No version labels found (e.g., 1.24, 1.22)"
+          add_target() {
+            local label="$1"
+            local target="$2"
+
+            if [ -z "$target" ]; then
+              return
+            fi
+
+            target=$(echo "$target" | xargs)
+
+            if [ -z "$target" ] || [ -n "${SEEN[$target]}" ]; then
+              return
+            fi
+
+            if git ls-remote --exit-code origin "$target" >/dev/null 2>&1; then
+              TARGETS+=("$target")
+              SEEN["$target"]=1
+            else
+              echo "::warning::Label '${label}' references missing branch '${target}'"
+            fi
+          }
+
+          while IFS= read -r label; do
+            [ -z "$label" ] && continue
+
+            if [[ "$label" =~ ^branch:(.+)$ ]]; then
+              add_target "$label" "${BASH_REMATCH[1]}"
+            elif [[ "$label" =~ ^backport:(.+)$ ]]; then
+              add_target "$label" "${BASH_REMATCH[1]}"
+            elif [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
+              add_target "$label" "core/${label}"
+            fi
+          done <<< "$LABELS"
+
+          if [ "${#TARGETS[@]}" -eq 0 ]; then
+            echo "::error::No backport targets found (use labels like '1.24' or 'branch:release/hotfix')"
             exit 1
           fi
 
-          echo "versions=${VERSIONS}" >> $GITHUB_OUTPUT
-          echo "Found version labels: ${VERSIONS}"
+          echo "targets=${TARGETS[*]}" >> $GITHUB_OUTPUT
+          echo "Found backport targets: ${TARGETS[*]}"
 
       - name: Backport commits
         if: steps.check-existing.outputs.skip != 'true'
@@ -150,16 +171,17 @@ jobs:
             MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
           fi
 
-          for version in ${{ steps.versions.outputs.versions }}; do
-            echo "::group::Backporting to core/${version}"
+          for target in ${{ steps.targets.outputs.targets }}; do
+            TARGET_BRANCH="${target}"
+            SAFE_TARGET=$(echo "$TARGET_BRANCH" | tr '/' '-')
+            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
 
-            TARGET_BRANCH="core/${version}"
-            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${version}"
+            echo "::group::Backporting to ${TARGET_BRANCH}"
 
             # Fetch target branch (fail if doesn't exist)
             if ! git fetch origin "${TARGET_BRANCH}"; then
               echo "::error::Target branch ${TARGET_BRANCH} does not exist"
-              FAILED="${FAILED}${version}:branch-missing "
+              FAILED="${FAILED}${TARGET_BRANCH}:branch-missing "
               echo "::endgroup::"
               continue
             fi
@@ -170,7 +192,7 @@ jobs:
             # Try cherry-pick
             if git cherry-pick "${MERGE_COMMIT}"; then
               git push origin "${BACKPORT_BRANCH}"
-              SUCCESS="${SUCCESS}${version}:${BACKPORT_BRANCH} "
+              SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
               echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
               # Return to main (keep the branch, we need it for PR)
               git checkout main
@@ -180,7 +202,7 @@ jobs:
               git cherry-pick --abort
 
               echo "::error::Cherry-pick failed due to conflicts"
-              FAILED="${FAILED}${version}:conflicts:${CONFLICTS} "
+              FAILED="${FAILED}${TARGET_BRANCH}:conflicts:${CONFLICTS} "
 
               # Clean up the failed branch
               git checkout main
@@ -214,13 +236,13 @@ jobs:
           fi
           
           for backport in ${{ steps.backport.outputs.success }}; do
-            IFS=':' read -r version branch <<< "${backport}"
+            IFS=':' read -r target branch <<< "${backport}"
 
             if PR_URL=$(gh pr create \
-              --base "core/${version}" \
+              --base "${target}" \
               --head "${branch}" \
-              --title "[backport ${version}] ${PR_TITLE}" \
-              --body "Backport of #${PR_NUMBER} to \`core/${version}\`"$'\n\n'"Automatically created by backport workflow." \
+              --title "[backport ${target}] ${PR_TITLE}" \
+              --body "Backport of #${PR_NUMBER} to \`${target}\`"$'\n\n'"Automatically created by backport workflow." \
               --label "backport" 2>&1); then
 
               # Extract PR number from URL
@@ -230,9 +252,9 @@ jobs:
                 gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
               fi
             else
-              echo "::error::Failed to create PR for ${version}: ${PR_URL}"
+              echo "::error::Failed to create PR for ${target}: ${PR_URL}"
               # Still try to comment on the original PR about the failure
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`core/${version}\`. Please create the PR manually from branch \`${branch}\`"
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`${target}\`. Please create the PR manually from branch \`${branch}\`"
             fi
           done
 
@@ -253,16 +275,16 @@ jobs:
           fi
 
           for failure in ${{ steps.backport.outputs.failed }}; do
-            IFS=':' read -r version reason conflicts <<< "${failure}"
+            IFS=':' read -r target reason conflicts <<< "${failure}"
 
             if [ "${reason}" = "branch-missing" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`core/${version}\` does not exist"
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist"
 
             elif [ "${reason}" = "conflicts" ]; then
               # Convert comma-separated conflicts back to newlines for display
               CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
 
-              COMMENT_BODY="@${PR_AUTHOR} Backport to \`core/${version}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`core/${version}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
+              COMMENT_BODY="@${PR_AUTHOR} Backport to \`${target}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`${target}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
               gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
             fi
           done

.github/workflows/pr-update-playwright-expectations.yaml

@@ -1,5 +1,6 @@
 # Setting test expectation screenshots for Playwright
 name: "PR: Update Playwright Expectations"
+description: "Updates Playwright test snapshots when triggered by label or comment"
 
 on:
   pull_request:

.github/workflows/publish-desktop-ui-on-merge.yaml

@@ -1,4 +1,5 @@
 name: Publish Desktop UI on PR Merge
+description: "Automatically publishes desktop UI package to npm when version bump PR is merged"
 
 on:
   pull_request:

.github/workflows/publish-desktop-ui.yaml

@@ -1,4 +1,5 @@
 name: Publish Desktop UI
+description: "Manual workflow to publish desktop UI package to npm with specified version"
 
 on:
   workflow_dispatch:
@@ -44,6 +45,7 @@ jobs:
       contents: read
     env:
       PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+      ENABLE_MINIFY: 'true'
     steps:
       - name: Validate inputs
         env:

.github/workflows/release-branch-create.yaml

@@ -1,4 +1,5 @@
 name: Release Branch Create
+description: "Creates release branch when version bump PR with 'Release' label is merged"
 
 on:
   pull_request:

.github/workflows/release-draft-create.yaml

@@ -1,4 +1,5 @@
 name: Release Draft Create
+description: "Creates GitHub release draft when version bump PR with 'Release' label is merged"
 
 on:
   pull_request:
@@ -55,6 +56,7 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
+          ENABLE_MINIFY: 'true'
           USE_PROD_CONFIG: 'true'
         run: |
           pnpm install --frozen-lockfile

.github/workflows/release-npm-types.yaml

@@ -1,4 +1,5 @@
 name: Release NPM Types
+description: "Manual workflow to publish TypeScript type definitions to npm"
 
 on:
   workflow_dispatch:

.github/workflows/release-pypi-dev.yaml

@@ -1,4 +1,5 @@
 name: Release PyPI Dev
+description: "Manual workflow to publish development version to PyPI"
 
 on:
   workflow_dispatch:
@@ -44,6 +45,7 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
+          ENABLE_MINIFY: 'true'
           USE_PROD_CONFIG: 'true'
         run: |
           pnpm install --frozen-lockfile

.github/workflows/release-version-bump.yaml

@@ -15,6 +15,11 @@ on:
         required: false
         default: ''
         type: string
+      branch:
+        description: 'Base branch to bump (e.g., main, core/1.29, core/1.30)'
+        required: true
+        default: 'main'
+        type: string
 
 jobs:
   bump-version:
@@ -26,6 +31,24 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
+        with:
+          ref: ${{ github.event.inputs.branch }}
+          fetch-depth: 0
+
+      - name: Validate branch exists
+        run: |
+          BRANCH="${{ github.event.inputs.branch }}"
+          if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
+            echo "❌ Branch '$BRANCH' does not exist"
+            echo ""
+            echo "Available core branches:"
+            git branch -r | grep 'origin/core/' | sed 's/.*origin\//  - /' || echo "  (none found)"
+            echo ""
+            echo "Main branch:"
+            echo "  - main"
+            exit 1
+          fi
+          echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -59,7 +82,9 @@ jobs:
           title: ${{ steps.bump-version.outputs.NEW_VERSION }}
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
+
+            **Base branch:** `${{ github.event.inputs.branch }}`
           branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: main
+          base: ${{ github.event.inputs.branch }}
           labels: |
             Release

.github/workflows/size-data.yml

@@ -0,0 +1,52 @@
+name: size data
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  collect:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.1.0
+        with:
+          version: 10
+
+      - name: Install Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build project
+        run: pnpm build
+
+      - name: Collect size data
+        run: node scripts/size-collect.js
+
+      - name: Save PR number & base branch
+        if: ${{ github.event_name == 'pull_request' }}
+        run: |
+          echo ${{ github.event.number }} > ./temp/size/number.txt
+          echo ${{ github.base_ref }} > ./temp/size/base.txt
+
+      - name: Upload size data
+        uses: actions/upload-artifact@v4
+        with:
+          name: size-data
+          path: temp/size

.github/workflows/size-report.yml

@@ -0,0 +1,104 @@
+name: size report
+
+on:
+  workflow_run:
+    workflows: ['size data']
+    types:
+      - completed
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        description: 'PR number to report on'
+        required: true
+        type: number
+      run_id:
+        description: 'Size data workflow run ID'
+        required: true
+        type: string
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+
+jobs:
+  size-report:
+    runs-on: ubuntu-latest
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      (
+        (github.event_name == 'workflow_run' &&
+         github.event.workflow_run.event == 'pull_request' &&
+         github.event.workflow_run.conclusion == 'success') ||
+        github.event_name == 'workflow_dispatch'
+      )
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.1.0
+        with:
+          version: 10
+
+      - name: Install Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Download size data
+        uses: dawidd6/action-download-artifact@v11
+        with:
+          name: size-data
+          run_id: ${{ github.event_name == 'workflow_dispatch' && inputs.run_id || github.event.workflow_run.id }}
+          path: temp/size
+
+      - name: Set PR number
+        id: pr-number
+        run: |
+          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
+            echo "content=${{ inputs.pr_number }}" >> $GITHUB_OUTPUT
+          else
+            echo "content=$(cat temp/size/number.txt)" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Set base branch
+        id: pr-base
+        run: |
+          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
+            echo "content=main" >> $GITHUB_OUTPUT
+          else
+            echo "content=$(cat temp/size/base.txt)" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Download previous size data
+        uses: dawidd6/action-download-artifact@v11
+        with:
+          branch: ${{ steps.pr-base.outputs.content }}
+          workflow: size-data.yml
+          event: push
+          name: size-data
+          path: temp/size-prev
+          if_no_artifact_found: warn
+
+      - name: Generate size report
+        run: node scripts/size-report.js > size-report.md
+
+      - name: Read size report
+        id: size-report
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: ./size-report.md
+
+      - name: Create or update PR comment
+        uses: actions-cool/maintain-one-comment@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ steps.pr-number.outputs.content }}
+          body: |
+            ${{ steps.size-report.outputs.content }}
+            <!-- COMFYUI_FRONTEND_SIZE -->
+          body-include: '<!-- COMFYUI_FRONTEND_SIZE -->'

.github/workflows/version-bump-desktop-ui.yaml

@@ -1,4 +1,5 @@
 name: Version Bump Desktop UI
+description: "Manual workflow to increment desktop UI package version with semantic versioning support"
 
 on:
   workflow_dispatch:
@@ -14,6 +15,11 @@ on:
         required: false
         default: ''
         type: string
+      branch:
+        description: 'Base branch to bump (e.g., main, core/1.29, core/1.30)'
+        required: true
+        default: 'main'
+        type: string
 
 jobs:
   bump-version-desktop-ui:
@@ -26,8 +32,25 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
+          ref: ${{ github.event.inputs.branch }}
+          fetch-depth: 0
           persist-credentials: false
 
+      - name: Validate branch exists
+        run: |
+          BRANCH="${{ github.event.inputs.branch }}"
+          if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
+            echo "❌ Branch '$BRANCH' does not exist"
+            echo ""
+            echo "Available core branches:"
+            git branch -r | grep 'origin/core/' | sed 's/.*origin\//  - /' || echo "  (none found)"
+            echo ""
+            echo "Main branch:"
+            echo "  - main"
+            exit 1
+          fi
+          echo "✅ Branch '$BRANCH' exists"
+
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
@@ -64,8 +87,10 @@ jobs:
           title: desktop-ui ${{ steps.bump-version.outputs.NEW_VERSION }}
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment for @comfyorg/desktop-ui to ${{ steps.bump-version.outputs.NEW_VERSION }}
+
+            **Base branch:** `${{ github.event.inputs.branch }}`
           branch: desktop-ui-version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: main
+          base: ${{ github.event.inputs.branch }}
           labels: |
             Release
 

apps/desktop-ui/src/components/maintenance/TaskCard.vue

@@ -1,23 +1,23 @@
 <template>
   <div
-    class="task-div max-w-48 min-h-52 grid relative"
+    class="task-div relative grid min-h-52 max-w-48"
     :class="{ 'opacity-75': isLoading }"
   >
     <Card
-      class="max-w-48 relative h-full overflow-hidden"
+      class="relative h-full max-w-48 overflow-hidden"
       :class="{ 'opacity-65': runner.state !== 'error' }"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
         <i
           v-if="runner.state === 'error'"
-          class="pi pi-exclamation-triangle text-red-500 absolute m-2 top-0 -right-14 opacity-15"
+          class="pi pi-exclamation-triangle absolute top-0 -right-14 m-2 text-red-500 opacity-15"
           style="font-size: 10rem"
         />
         <img
           v-if="task.headerImg"
           :src="task.headerImg"
-          class="object-contain w-full h-full opacity-25 pt-4 px-4"
+          class="h-full w-full object-contain px-4 pt-4 opacity-25"
         />
       </template>
       <template #title>
@@ -27,7 +27,7 @@
         {{ description }}
       </template>
       <template #footer>
-        <div class="flex gap-4 mt-1">
+        <div class="mt-1 flex gap-4">
           <Button
             :icon="task.button?.icon"
             :label="task.button?.text"
@@ -73,7 +73,7 @@ defineEmits<{
 // Bindings
 const description = computed(() =>
   runner.value.state === 'error'
-    ? props.task.errorDescription ?? props.task.shortDescription
+    ? (props.task.errorDescription ?? props.task.shortDescription)
     : props.task.shortDescription
 )
 

browser_tests/fixtures/ComfyPage.ts

@@ -46,6 +46,10 @@ class ComfyMenu {
       .nth(0)
   }
 
+  get buttons() {
+    return this.sideToolbar.locator('.side-bar-button')
+  }
+
   get nodeLibraryTab() {
     this._nodeLibraryTab ??= new NodeLibrarySidebarTab(this.page)
     return this._nodeLibraryTab

browser_tests/fixtures/components/Topbar.ts

@@ -7,7 +7,7 @@ export class Topbar {
 
   constructor(public readonly page: Page) {
     this.menuLocator = page.locator('.comfy-command-menu')
-    this.menuTrigger = page.locator('.comfyui-logo-wrapper')
+    this.menuTrigger = page.locator('.comfy-menu-button-wrapper')
   }
 
   async getTabNames(): Promise<string[]> {
@@ -105,7 +105,7 @@ export class Topbar {
    * Close the topbar menu by clicking outside
    */
   async closeTopbarMenu() {
-    await this.page.locator('body').click({ position: { x: 10, y: 10 } })
+    await this.page.locator('body').click({ position: { x: 300, y: 10 } })
     await expect(this.menuLocator).not.toBeVisible()
   }
 

browser_tests/tests/actionbar.spec.ts

@@ -116,9 +116,10 @@ test.describe('Actionbar', () => {
   test('Can dock actionbar into top menu', async ({ comfyPage }) => {
     await comfyPage.page.dragAndDrop(
       '.actionbar .drag-handle',
-      '.comfyui-menu',
+      '.actionbar-container',
       {
-        targetPosition: { x: 0, y: 0 }
+        targetPosition: { x: 50, y: 20 },
+        force: true
       }
     )
     expect(await comfyPage.actionbar.isDocked()).toBe(true)

browser_tests/tests/groupNode.spec.ts

@@ -233,6 +233,7 @@ test.describe('Group Node', () => {
     }
 
     const isRegisteredNodeDefStore = async (comfyPage: ComfyPage) => {
+      await comfyPage.menu.nodeLibraryTab.open()
       const groupNodesFolderCt = await comfyPage.menu.nodeLibraryTab
         .getFolder(GROUP_NODE_CATEGORY)
         .count()
@@ -253,8 +254,6 @@ test.describe('Group Node', () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.loadWorkflow(WORKFLOW_NAME)
-      await comfyPage.menu.nodeLibraryTab.open()
-
       groupNode = await comfyPage.getFirstNodeRef()
       if (!groupNode)
         throw new Error(`Group node not found in workflow ${WORKFLOW_NAME}`)

browser_tests/tests/interaction.spec.ts

@@ -792,10 +792,19 @@ test.describe('Viewport settings', () => {
 
     await comfyPage.menu.topbar.saveWorkflow('Workflow A')
     await comfyPage.nextFrame()
-    const screenshotA = (await comfyPage.canvas.screenshot()).toString('base64')
 
     // Save workflow as a new file, then zoom out before screen shot
     await comfyPage.menu.topbar.saveWorkflowAs('Workflow B')
+
+    await comfyPage.nextFrame()
+    const tabA = comfyPage.menu.topbar.getWorkflowTab('Workflow A')
+    await changeTab(tabA)
+
+    const screenshotA = (await comfyPage.canvas.screenshot()).toString('base64')
+
+    const tabB = comfyPage.menu.topbar.getWorkflowTab('Workflow B')
+    await changeTab(tabB)
+
     await comfyMouse.move(comfyPage.emptySpace)
     for (let i = 0; i < 4; i++) {
       await comfyMouse.wheel(0, 60)
@@ -807,9 +816,6 @@ test.describe('Viewport settings', () => {
     // Ensure that the screenshots are different due to zoom level
     expect(screenshotB).not.toBe(screenshotA)
 
-    const tabA = comfyPage.menu.topbar.getWorkflowTab('Workflow A')
-    const tabB = comfyPage.menu.topbar.getWorkflowTab('Workflow B')
-
     // Go back to Workflow A
     await changeTab(tabA)
     expect((await comfyPage.canvas.screenshot()).toString('base64')).toBe(

browser_tests/tests/menu.spec.ts

@@ -8,9 +8,7 @@ test.describe('Menu', () => {
   })
 
   test('Can register sidebar tab', async ({ comfyPage }) => {
-    const initialChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
-      (el) => el.children.length
-    )
+    const initialChildrenCount = await comfyPage.menu.buttons.count()
 
     await comfyPage.page.evaluate(async () => {
       window['app'].extensionManager.registerSidebarTab({
@@ -26,9 +24,7 @@ test.describe('Menu', () => {
     })
     await comfyPage.nextFrame()
 
-    const newChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
-      (el) => el.children.length
-    )
+    const newChildrenCount = await comfyPage.menu.buttons.count()
     expect(newChildrenCount).toBe(initialChildrenCount + 1)
   })
 

browser_tests/tests/recordAudio.spec.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Record Audio Node', () => {
+  test('should add a record audio node and take a screenshot', async ({
+    comfyPage
+  }) => {
+    // Open the search box by double clicking on the canvas
+    await comfyPage.doubleClickCanvas()
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+
+    // Search for and add the RecordAudio node
+    await comfyPage.searchBox.fillAndSelectFirstNode('RecordAudio')
+    await comfyPage.nextFrame()
+
+    // Verify the RecordAudio node was added
+    const recordAudioNodes = await comfyPage.getNodeRefsByType('RecordAudio')
+    expect(recordAudioNodes.length).toBe(1)
+
+    // Take a screenshot of the canvas with the RecordAudio node
+    await expect(comfyPage.canvas).toHaveScreenshot('record_audio_node.png')
+  })
+})

browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts

@@ -12,21 +12,26 @@ test.describe('Vue Node Bypass', () => {
     await comfyPage.vueNodes.waitForNodes()
   })
 
-  test('should allow toggling bypass on a selected node with hotkey', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.getByText('Load Checkpoint').click()
-    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+  test.fixme(
+    'should allow toggling bypass on a selected node with hotkey',
+    async ({ comfyPage }) => {
+      await comfyPage.setup()
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
 
-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-bypassed-state.png'
-    )
+      const checkpointNode =
+        comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+      await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+      await comfyPage.page.mouse.click(400, 300)
+      await comfyPage.page.waitForTimeout(128)
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-bypassed-state.png'
+      )
 
-    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
-    await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
-  })
+      await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+      await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
+    }
+  )
 
   test('should allow toggling bypass on multiple selected nodes with hotkey', async ({
     comfyPage

eslint.config.ts

@@ -1,6 +1,7 @@
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import pluginJs from '@eslint/js'
 import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
+import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
@@ -23,10 +24,17 @@ const commonGlobals = {
 } as const
 
 const settings = {
-  'import/resolver': {
-    typescript: true,
-    node: true
-  },
+  'import-x/resolver-next': [
+    createTypeScriptImportResolver({
+      alwaysTryTypes: true,
+      project: [
+        './tsconfig.json',
+        './apps/*/tsconfig.json',
+        './packages/*/tsconfig.json'
+      ],
+      noWarnOnMultipleProjects: true
+    })
+  ],
   tailwindcss: {
     config: `${import.meta.dirname}/packages/design-system/src/css/style.css`,
     functions: ['cn', 'clsx', 'tw']
@@ -67,11 +75,8 @@ export default defineConfig([
         ...commonParserOptions,
         projectService: {
           allowDefaultProject: [
-            'vite.config.mts',
             'vite.electron.config.mts',
-            'vite.types.config.mts',
-            'playwright.config.ts',
-            'playwright.i18n.config.ts'
+            'vite.types.config.mts'
           ]
         }
       }
@@ -249,5 +254,17 @@ export default defineConfig([
     rules: {
       'no-console': 'off'
     }
+  },
+  {
+    files: ['scripts/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node
+      }
+    },
+    rules: {
+      '@typescript-eslint/no-floating-promises': 'off',
+      'no-console': 'off'
+    }
   }
 ])

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.29.2",
+  "version": "1.30.1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -13,6 +13,8 @@
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
     "build:analyze": "cross-env ANALYZE_BUNDLE=true pnpm build",
     "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && nx build",
+    "size:collect": "node scripts/size-collect.js",
+    "size:report": "node scripts/size-report.js",
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
     "dev:electron": "nx serve --config vite.electron.config.mts",
@@ -41,6 +43,7 @@
     "test:browser": "pnpm exec nx e2e",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
+    "workflow:docs": "tsx scripts/cicd/generate-workflow-docs.ts",
     "zipdist": "node scripts/zipdist.js"
   },
   "devDependencies": {
@@ -86,9 +89,12 @@
     "jsdom": "catalog:",
     "knip": "catalog:",
     "lint-staged": "catalog:",
+    "markdown-table": "catalog:",
     "nx": "catalog:",
+    "picocolors": "catalog:",
     "postcss-html": "catalog:",
     "prettier": "catalog:",
+    "pretty-bytes": "catalog:",
     "rollup-plugin-visualizer": "catalog:",
     "storybook": "catalog:",
     "stylelint": "catalog:",
@@ -109,6 +115,7 @@
     "vue-component-type-helpers": "catalog:",
     "vue-eslint-parser": "catalog:",
     "vue-tsc": "catalog:",
+    "yaml": "catalog:",
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "catalog:"
   },

packages/design-system/src/css/style.css

@@ -63,6 +63,7 @@
   --color-sand-200: #d6cfc2;
   --color-sand-300: #888682;
 
+  --color-pure-black: #000000;
   --color-pure-white: #ffffff;
 
   --color-slate-100: #9c9eab;
@@ -144,6 +145,9 @@
   --content-hover-bg: #adadad;
   --content-hover-fg: #000;
 
+  --button-surface: var(--color-pure-white);
+  --button-surface-contrast: var(--color-pure-black);
+
   /* Code styling colors for help menu*/
   --code-text-color: rgb(0 122 255 / 1);
   --code-bg-color: rgb(96 165 250 / 0.2);
@@ -155,6 +159,7 @@
   --backdrop: var(--color-white);
   --button-hover-surface: var(--color-gray-200);
   --button-active-surface: var(--color-gray-400);
+  --button-icon: var(--color-gray-600);
   --dialog-surface: var(--color-neutral-200);
   --interface-menu-component-surface-hovered: var(--color-gray-200);
   --interface-menu-component-surface-selected: var(--color-gray-400);
@@ -201,8 +206,11 @@
 .dark-theme {
   --accent-primary: var(--color-pure-white);
   --backdrop: var(--color-neutral-900);
+  --button-surface: var(--color-charcoal-600);
+  --button-surface-contrast: var(--color-pure-white);
   --button-hover-surface: var(--color-charcoal-600);
   --button-active-surface: var(--color-charcoal-600);
+  --button-icon: var(--color-gray-800);
   --dialog-surface: var(--color-neutral-700);
   --interface-menu-component-surface-hovered: var(--color-charcoal-400);
   --interface-menu-component-surface-selected: var(--color-charcoal-300);
@@ -244,8 +252,11 @@
 
 @theme inline {
   --color-backdrop: var(--backdrop);
-  --color-button-hover-surface: var(--button-hover-surface);
   --color-button-active-surface: var(--button-active-surface);
+  --color-button-hover-surface: var(--button-hover-surface);
+  --color-button-icon: var(--button-icon);
+  --color-button-surface: var(--button-surface);
+  --color-button-surface-contrast: var(--button-surface-contrast);
   --color-dialog-surface: var(--dialog-surface);
   --color-interface-menu-component-surface-hovered: var(--interface-menu-component-surface-hovered);
   --color-interface-menu-component-surface-selected: var(--interface-menu-component-surface-selected);

packages/design-system/src/icons/mask.svg

@@ -1,14 +1,14 @@
 <svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16" fill="none">
   <g clip-path="url(#clip0_704_2695)">
-    <path d="M6.05048 2C5.52055 7.29512 9.23033 10.4722 14 9.94267" stroke="#9C9EAB" stroke-width="1.3"/>
-    <path d="M6.5 5.5L10 2" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
-    <path d="M8 8L12.5 3.5" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="square"/>
-    <path d="M10.5 9.5L14 6" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
-    <path d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6818 1.33337 7.99992 1.33337C4.31802 1.33337 1.33325 4.31814 1.33325 8.00004C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M6.05048 2C5.52055 7.29512 9.23033 10.4722 14 9.94267" stroke="currentColor" stroke-width="1.3"/>
+    <path d="M6.5 5.5L10 2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+    <path d="M8 8L12.5 3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="square"/>
+    <path d="M10.5 9.5L14 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+    <path d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6818 1.33337 7.99992 1.33337C4.31802 1.33337 1.33325 4.31814 1.33325 8.00004C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
   </g>
   <defs>
     <clipPath id="clip0_704_2695">
       <rect width="16" height="16" fill="white"/>
     </clipPath>
   </defs>
-</svg>
+</svg>

pnpm-lock.yaml

@@ -183,9 +183,15 @@ catalogs:
     lint-staged:
       specifier: ^15.2.7
       version: 15.2.7
+    markdown-table:
+      specifier: ^3.0.4
+      version: 3.0.4
     nx:
       specifier: 21.4.1
       version: 21.4.1
+    picocolors:
+      specifier: ^1.1.1
+      version: 1.1.1
     pinia:
       specifier: ^2.1.7
       version: 2.2.2
@@ -193,8 +199,11 @@ catalogs:
       specifier: ^1.8.0
       version: 1.8.0
     prettier:
-      specifier: ^3.3.2
-      version: 3.3.2
+      specifier: ^3.6.2
+      version: 3.6.2
+    pretty-bytes:
+      specifier: ^7.1.0
+      version: 7.1.0
     primeicons:
       specifier: ^7.0.0
       version: 7.0.0
@@ -254,7 +263,7 @@ catalogs:
       version: 3.5.13
     vue-component-type-helpers:
       specifier: ^3.0.7
-      version: 3.1.0
+      version: 3.1.1
     vue-eslint-parser:
       specifier: ^10.2.0
       version: 10.2.0
@@ -270,6 +279,9 @@ catalogs:
     vuefire:
       specifier: ^3.2.1
       version: 3.2.1
+    yaml:
+      specifier: ^2.8.1
+      version: 2.8.1
     yjs:
       specifier: ^13.6.27
       version: 13.6.27
@@ -476,7 +488,7 @@ importers:
         version: 21.4.1(@babel/traverse@7.28.3)(@playwright/test@1.52.0)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
       '@nx/storybook':
         specifier: 'catalog:'
-        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
+        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
       '@nx/vite':
         specifier: 'catalog:'
         version: 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)(typescript@5.9.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vitest@3.2.4)
@@ -488,19 +500,19 @@ importers:
         version: 1.52.0
       '@storybook/addon-docs':
         specifier: 'catalog:'
-        version: 9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
+        version: 9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
       '@storybook/vue3':
         specifier: 'catalog:'
-        version: 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))
+        version: 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))
       '@storybook/vue3-vite':
         specifier: 'catalog:'
-        version: 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))
+        version: 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))
       '@tailwindcss/vite':
         specifier: 'catalog:'
         version: 4.1.12(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       '@trivago/prettier-plugin-sort-imports':
         specifier: 'catalog:'
-        version: 5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.3.2)
+        version: 5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.6.2)
       '@types/eslint-plugin-tailwindcss':
         specifier: 'catalog:'
         version: 3.17.0
@@ -548,10 +560,10 @@ importers:
         version: 4.16.1(@typescript-eslint/utils@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint@9.35.0(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: 'catalog:'
-        version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2)
+        version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.6.2)
       eslint-plugin-storybook:
         specifier: 'catalog:'
-        version: 9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
+        version: 9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
       eslint-plugin-tailwindcss:
         specifier: 'catalog:'
         version: 4.0.0-beta.0(tailwindcss@4.1.12)
@@ -585,21 +597,30 @@ importers:
       lint-staged:
         specifier: 'catalog:'
         version: 15.2.7
+      markdown-table:
+        specifier: 'catalog:'
+        version: 3.0.4
       nx:
         specifier: 'catalog:'
         version: 21.4.1
+      picocolors:
+        specifier: 'catalog:'
+        version: 1.1.1
       postcss-html:
         specifier: 'catalog:'
         version: 1.8.0
       prettier:
         specifier: 'catalog:'
-        version: 3.3.2
+        version: 3.6.2
+      pretty-bytes:
+        specifier: 'catalog:'
+        version: 7.1.0
       rollup-plugin-visualizer:
         specifier: 'catalog:'
         version: 6.0.4(rollup@4.22.4)
       storybook:
         specifier: 'catalog:'
-        version: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+        version: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       stylelint:
         specifier: 'catalog:'
         version: 16.24.0(typescript@5.9.2)
@@ -647,13 +668,16 @@ importers:
         version: 3.2.4(@types/debug@4.1.12)(@types/node@20.14.10)(@vitest/ui@3.2.4)(happy-dom@15.11.0)(jsdom@26.1.0)(lightningcss@1.30.1)(terser@5.39.2)
       vue-component-type-helpers:
         specifier: 'catalog:'
-        version: 3.1.0
+        version: 3.1.1
       vue-eslint-parser:
         specifier: 'catalog:'
         version: 10.2.0(eslint@9.35.0(jiti@2.4.2))
       vue-tsc:
         specifier: 'catalog:'
         version: 3.0.7(typescript@5.9.2)
+      yaml:
+        specifier: 'catalog:'
+        version: 2.8.1
       zip-dir:
         specifier: ^2.0.0
         version: 2.0.0
@@ -4892,9 +4916,6 @@ packages:
   get-tsconfig@4.10.1:
     resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
 
-  get-tsconfig@4.7.5:
-    resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==}
-
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -5999,11 +6020,6 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@3.3.8:
-    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
   nanoid@5.1.5:
     resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
     engines: {node: ^18 || >=20}
@@ -6351,10 +6367,6 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.5.1:
-    resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -6367,11 +6379,15 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
-  prettier@3.3.2:
-    resolution: {integrity: sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==}
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-bytes@7.1.0:
+    resolution: {integrity: sha512-nODzvTiYVRGRqAOvE84Vk5JDPyyxsVk0/fbA/bq7RqlnhksGpset09XTxbpvLTIjoaF7K8Z8DG8yHtKGTPSYRw==}
+    engines: {node: '>=20'}
+
   pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -7473,9 +7489,6 @@ packages:
   vue-component-type-helpers@2.2.12:
     resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
 
-  vue-component-type-helpers@3.1.0:
-    resolution: {integrity: sha512-cC1pYNRZkSS1iCvdlaMbbg2sjDwxX098FucEjtz9Yig73zYjWzQsnMe5M9H8dRNv55hAIDGUI29hF2BEUA4FMQ==}
-
   vue-component-type-helpers@3.1.1:
     resolution: {integrity: sha512-B0kHv7qX6E7+kdc5nsaqjdGZ1KwNKSUQDWGy7XkTYT7wFsOpkEyaJ1Vq79TjwrrtuLRgizrTV7PPuC4rRQo+vw==}
 
@@ -9668,7 +9681,7 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/storybook@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)':
+  '@nx/storybook@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)':
     dependencies:
       '@nx/cypress': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
       '@nx/devkit': 21.4.1(nx@21.4.1)
@@ -9676,7 +9689,7 @@ snapshots:
       '@nx/js': 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.9.2)
       semver: 7.7.2
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       tslib: 2.8.1
     transitivePeerDependencies:
       - '@babel/traverse'
@@ -10027,29 +10040,29 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@storybook/addon-docs@9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
+  '@storybook/addon-docs@9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
     dependencies:
       '@mdx-js/react': 3.1.0(@types/react@19.1.9)(react@19.1.1)
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
+      '@storybook/csf-plugin': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
       '@storybook/icons': 1.4.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
+      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/builder-vite@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))':
+  '@storybook/builder-vite@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))':
     dependencies:
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      '@storybook/csf-plugin': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       ts-dedent: 2.2.0
       vite: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
 
-  '@storybook/csf-plugin@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
+  '@storybook/csf-plugin@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
     dependencies:
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       unplugin: 1.16.1
 
   '@storybook/global@5.0.0': {}
@@ -10059,19 +10072,19 @@ snapshots:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
 
-  '@storybook/react-dom-shim@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
+  '@storybook/react-dom-shim@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
     dependencies:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
 
-  '@storybook/vue3-vite@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))':
+  '@storybook/vue3-vite@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))':
     dependencies:
-      '@storybook/builder-vite': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
-      '@storybook/vue3': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))
+      '@storybook/builder-vite': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      '@storybook/vue3': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))
       find-package-json: 1.2.0
       magic-string: 0.30.19
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       typescript: 5.9.2
       vite: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
       vue-component-meta: 2.2.12(typescript@5.9.2)
@@ -10079,10 +10092,10 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  '@storybook/vue3@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))':
+  '@storybook/vue3@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
       vue-component-type-helpers: 3.1.1
@@ -10347,7 +10360,7 @@ snapshots:
       '@tiptap/extension-text-style': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
       '@tiptap/pm': 2.10.4
 
-  '@trivago/prettier-plugin-sort-imports@5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.3.2)':
+  '@trivago/prettier-plugin-sort-imports@5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.6.2)':
     dependencies:
       '@babel/generator': 7.28.3
       '@babel/parser': 7.28.4
@@ -10355,7 +10368,7 @@ snapshots:
       '@babel/types': 7.28.4
       javascript-natural-sort: 0.7.1
       lodash: 4.17.21
-      prettier: 3.3.2
+      prettier: 3.6.2
     optionalDependencies:
       '@vue/compiler-sfc': 3.5.13
     transitivePeerDependencies:
@@ -12133,20 +12146,20 @@ snapshots:
       - supports-color
     optional: true
 
-  eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2):
+  eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.6.2):
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
-      prettier: 3.3.2
+      prettier: 3.6.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.11
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.35.0(jiti@2.4.2))
 
-  eslint-plugin-storybook@9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2):
+  eslint-plugin-storybook@9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2):
     dependencies:
       '@typescript-eslint/utils': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
       eslint: 9.35.0(jiti@2.4.2)
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -12585,10 +12598,6 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  get-tsconfig@4.7.5:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -13883,8 +13892,6 @@ snapshots:
 
   nanoid@3.3.11: {}
 
-  nanoid@3.3.8: {}
-
   nanoid@5.1.5: {}
 
   napi-postinstall@0.3.3: {}
@@ -14264,14 +14271,14 @@ snapshots:
     dependencies:
       htmlparser2: 8.0.2
       js-tokens: 9.0.1
-      postcss: 8.5.1
-      postcss-safe-parser: 6.0.0(postcss@8.5.1)
+      postcss: 8.5.6
+      postcss-safe-parser: 6.0.0(postcss@8.5.6)
 
   postcss-resolve-nested-selector@0.1.6: {}
 
-  postcss-safe-parser@6.0.0(postcss@8.5.1):
+  postcss-safe-parser@6.0.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.1
+      postcss: 8.5.6
 
   postcss-safe-parser@7.0.1(postcss@8.5.6):
     dependencies:
@@ -14289,12 +14296,6 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.5.1:
-    dependencies:
-      nanoid: 3.3.8
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
@@ -14307,7 +14308,9 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier@3.3.2: {}
+  prettier@3.6.2: {}
+
+  pretty-bytes@7.1.0: {}
 
   pretty-format@27.5.1:
     dependencies:
@@ -14984,7 +14987,7 @@ snapshots:
       internal-slot: 1.1.0
     optional: true
 
-  storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)):
+  storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)):
     dependencies:
       '@storybook/global': 5.0.0
       '@testing-library/jest-dom': 6.6.4
@@ -14999,7 +15002,7 @@ snapshots:
       semver: 7.7.2
       ws: 8.18.3
     optionalDependencies:
-      prettier: 3.3.2
+      prettier: 3.6.2
     transitivePeerDependencies:
       - '@testing-library/dom'
       - bufferutil
@@ -15321,7 +15324,7 @@ snapshots:
   tsx@4.19.4:
     dependencies:
       esbuild: 0.25.5
-      get-tsconfig: 4.7.5
+      get-tsconfig: 4.10.1
     optionalDependencies:
       fsevents: 2.3.3
 
@@ -15673,7 +15676,7 @@ snapshots:
   vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.5.1
+      postcss: 8.5.6
       rollup: 4.22.4
     optionalDependencies:
       '@types/node': 20.14.10
@@ -15738,8 +15741,6 @@ snapshots:
 
   vue-component-type-helpers@2.2.12: {}
 
-  vue-component-type-helpers@3.1.0: {}
-
   vue-component-type-helpers@3.1.1: {}
 
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):

pnpm-workspace.yaml

@@ -62,10 +62,13 @@ catalog:
   jsdom: ^26.1.0
   knip: ^5.62.0
   lint-staged: ^15.2.7
+  markdown-table: ^3.0.4
   nx: 21.4.1
+  picocolors: ^1.1.1
   pinia: ^2.1.7
   postcss-html: ^1.8.0
-  prettier: ^3.3.2
+  prettier: ^3.6.2
+  pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5
   rollup-plugin-visualizer: ^6.0.4
@@ -91,6 +94,7 @@ catalog:
   vue-router: ^4.4.3
   vue-tsc: ^3.0.7
   vuefire: ^3.2.1
+  yaml: ^2.8.1
   yjs: ^13.6.27
   zod: ^3.23.8
   zod-to-json-schema: ^3.24.1
@@ -98,9 +102,6 @@ catalog:
 
 cleanupUnusedCatalogs: true
 
-overrides:
-  '@types/eslint': '-'
-
 ignoredBuiltDependencies:
   - '@firebase/util'
   - protobufjs
@@ -115,3 +116,6 @@ onlyBuiltDependencies:
   - esbuild
   - nx
   - oxc-resolver
+
+overrides:
+  '@types/eslint': '-'

scripts/bundle-categories.js

@@ -0,0 +1,93 @@
+// @ts-check
+/**
+ * Bundle categorization configuration
+ *
+ * This file defines how bundles are categorized in size reports.
+ * Categories help identify which parts of the application are growing.
+ */
+
+/**
+ * @typedef {Object} BundleCategory
+ * @property {string} name - Display name of the category
+ * @property {string} description - Description of what this category includes
+ * @property {RegExp[]} patterns - Regex patterns to match bundle files
+ * @property {number} order - Sort order for display (lower = first)
+ */
+
+/** @type {BundleCategory[]} */
+export const BUNDLE_CATEGORIES = [
+  {
+    name: 'App Entry Points',
+    description: 'Main application bundles',
+    patterns: [/^index-.*\.js$/],
+    order: 1
+  },
+  {
+    name: 'Core Views',
+    description: 'Major application views and screens',
+    patterns: [/GraphView-.*\.js$/, /UserSelectView-.*\.js$/],
+    order: 2
+  },
+  {
+    name: 'UI Panels',
+    description: 'Settings and configuration panels',
+    patterns: [/.*Panel-.*\.js$/],
+    order: 3
+  },
+  {
+    name: 'UI Components',
+    description: 'Reusable UI components',
+    patterns: [/Avatar-.*\.js$/, /Badge-.*\.js$/],
+    order: 4
+  },
+  {
+    name: 'Services',
+    description: 'Business logic and services',
+    patterns: [/.*Service-.*\.js$/, /.*Store-.*\.js$/],
+    order: 5
+  },
+  {
+    name: 'Utilities',
+    description: 'Helper functions and utilities',
+    patterns: [/.*[Uu]til.*\.js$/],
+    order: 6
+  },
+  {
+    name: 'Other',
+    description: 'Uncategorized bundles',
+    patterns: [/.*/], // Catch-all pattern
+    order: 99
+  }
+]
+
+/**
+ * Categorize a bundle file based on its name
+ *
+ * @param {string} fileName - The bundle file name (e.g., "assets/GraphView-BnV6iF9h.js")
+ * @returns {string} - The category name
+ */
+export function categorizeBundle(fileName) {
+  // Extract just the file name without path
+  const baseName = fileName.split('/').pop() || fileName
+
+  // Find the first matching category
+  for (const category of BUNDLE_CATEGORIES) {
+    for (const pattern of category.patterns) {
+      if (pattern.test(baseName)) {
+        return category.name
+      }
+    }
+  }
+
+  return 'Other'
+}
+
+/**
+ * Get category metadata by name
+ *
+ * @param {string} categoryName - The category name
+ * @returns {BundleCategory | undefined} - The category metadata
+ */
+export function getCategoryMetadata(categoryName) {
+  return BUNDLE_CATEGORIES.find((cat) => cat.name === categoryName)
+}

scripts/cicd/generate-workflow-docs.ts

@@ -0,0 +1,450 @@
+#!/usr/bin/env tsx
+/**
+ * Generate workflow documentation from GitHub Actions workflow files
+ *
+ * This script:
+ * 1. Scans all workflow YAML files in .github/workflows
+ * 2. Extracts metadata (name, description, triggers, labels)
+ * 3. Updates the workflows README.md with current information
+ */
+import { readFileSync, readdirSync, writeFileSync } from 'fs'
+import { join } from 'path'
+import { parse } from 'yaml'
+
+interface WorkflowMetadata {
+  filename: string
+  name: string
+  description?: string
+  prefix: string
+  triggers: string[]
+  labelTriggers: string[]
+}
+
+interface WorkflowsByPrefix {
+  [prefix: string]: {
+    description: string
+    workflows: WorkflowMetadata[]
+  }
+}
+
+const WORKFLOWS_DIR = join(process.cwd(), '.github/workflows')
+const README_PATH = join(WORKFLOWS_DIR, 'README.md')
+
+// Category descriptions for workflow prefixes
+const PREFIX_DESCRIPTIONS: Record<string, string> = {
+  'ci-': 'Testing, linting, validation',
+  'release-': 'Version management, publishing',
+  'pr-': 'PR automation (triggered by labels)',
+  'api-': 'External API type generation',
+  'i18n-': 'Internationalization updates',
+  'publish-': 'Publishing and deployment',
+  'version-': 'Version management'
+}
+
+/**
+ * Add a label to the list if it's not already present
+ */
+function addUniqueLabel(labels: string[], label: string): void {
+  if (!labels.includes(label)) {
+    labels.push(label)
+  }
+}
+
+/**
+ * Extract label triggers from workflow content
+ */
+function extractLabelTriggers(content: string, workflowData: any): string[] {
+  const labels: string[] = []
+
+  // Check for label_trigger in anthropics/claude-code-action
+  const labelTriggerMatch = content.match(/label_trigger:\s*["']([^"']+)["']/i)
+  if (labelTriggerMatch) {
+    labels.push(labelTriggerMatch[1])
+  }
+
+  // Check for github.event.label.name == 'label-name' pattern
+  const labelNameMatches = content.matchAll(
+    /github\.event\.label\.name\s*==\s*['"]([^'"]+)['"]/gi
+  )
+  for (const match of labelNameMatches) {
+    addUniqueLabel(labels, match[1])
+  }
+
+  // Check for contains(github.event.pull_request.labels.*.name, 'label-name') pattern
+  const containsLabelMatches = content.matchAll(
+    /contains\(github\.event\.pull_request\.labels\.\*\.name,\s*['"]([^'"]+)['"]\)/gi
+  )
+  for (const match of containsLabelMatches) {
+    addUniqueLabel(labels, match[1])
+  }
+
+  // Check for startsWith patterns with comment commands (e.g., /update-playwright)
+  // These are included as they can trigger workflows through PR comments
+  const labelCommentMatches = content.matchAll(
+    /startsWith\(github\.event\.comment\.body,\s*['"]([^'"]+)['"]\)/gi
+  )
+  for (const match of labelCommentMatches) {
+    const command = match[1]
+    if (command) {
+      addUniqueLabel(labels, command)
+    }
+  }
+
+  return labels
+}
+
+/**
+ * Extract trigger information from workflow
+ */
+function extractTriggers(workflowData: any): string[] {
+  const triggers: string[] = []
+  const on = workflowData.on
+
+  if (!on) return triggers
+
+  if (typeof on === 'string') {
+    triggers.push(on)
+  } else if (Array.isArray(on)) {
+    triggers.push(...on)
+  } else if (typeof on === 'object') {
+    // Handle workflow_dispatch
+    if (on.workflow_dispatch !== undefined) {
+      triggers.push('workflow_dispatch (manual)')
+    }
+
+    // Handle pull_request with types
+    if (on.pull_request) {
+      if (typeof on.pull_request === 'object' && on.pull_request.types) {
+        const types = Array.isArray(on.pull_request.types)
+          ? on.pull_request.types.join(', ')
+          : on.pull_request.types
+        triggers.push(`pull_request (${types})`)
+      } else {
+        triggers.push('pull_request')
+      }
+    }
+
+    // Handle pull_request_target
+    if (on.pull_request_target) {
+      if (
+        typeof on.pull_request_target === 'object' &&
+        on.pull_request_target.types
+      ) {
+        const types = Array.isArray(on.pull_request_target.types)
+          ? on.pull_request_target.types.join(', ')
+          : on.pull_request_target.types
+        triggers.push(`pull_request_target (${types})`)
+      } else {
+        triggers.push('pull_request_target')
+      }
+    }
+
+    // Handle push
+    if (on.push) {
+      triggers.push('push')
+    }
+
+    // Handle schedule
+    if (on.schedule) {
+      triggers.push('schedule')
+    }
+
+    // Handle issue_comment
+    if (on.issue_comment) {
+      if (typeof on.issue_comment === 'object' && on.issue_comment.types) {
+        const types = Array.isArray(on.issue_comment.types)
+          ? on.issue_comment.types.join(', ')
+          : on.issue_comment.types
+        triggers.push(`issue_comment (${types})`)
+      } else {
+        triggers.push('issue_comment')
+      }
+    }
+  }
+
+  return triggers
+}
+
+/**
+ * Parse a single workflow file and extract metadata
+ */
+function parseWorkflowFile(filename: string): WorkflowMetadata | null {
+  try {
+    const filepath = join(WORKFLOWS_DIR, filename)
+    const content = readFileSync(filepath, 'utf-8')
+    const workflowData = parse(content)
+
+    if (!workflowData || !workflowData.name) {
+      console.warn(`Skipping ${filename}: no name field`)
+      return null
+    }
+
+    // Determine prefix from filename
+    const prefixMatch = filename.match(/^([a-z0-9]+)-/)
+    const prefix = prefixMatch ? prefixMatch[1] + '-' : 'other-'
+
+    const metadata: WorkflowMetadata = {
+      filename,
+      name: workflowData.name,
+      description: workflowData.description,
+      prefix,
+      triggers: extractTriggers(workflowData),
+      labelTriggers: extractLabelTriggers(content, workflowData)
+    }
+
+    return metadata
+  } catch (error) {
+    console.error(`Error parsing ${filename}:`, error)
+    return null
+  }
+}
+
+/**
+ * Group workflows by prefix
+ */
+function groupWorkflowsByPrefix(
+  workflows: WorkflowMetadata[]
+): WorkflowsByPrefix {
+  const grouped: WorkflowsByPrefix = {}
+
+  for (const workflow of workflows) {
+    if (!grouped[workflow.prefix]) {
+      grouped[workflow.prefix] = {
+        description: PREFIX_DESCRIPTIONS[workflow.prefix] || 'Other workflows',
+        workflows: []
+      }
+    }
+    grouped[workflow.prefix].workflows.push(workflow)
+  }
+
+  // Sort workflows within each group by filename
+  for (const prefix in grouped) {
+    grouped[prefix].workflows.sort((a, b) =>
+      a.filename.localeCompare(b.filename)
+    )
+  }
+
+  return grouped
+}
+
+/**
+ * Generate markdown table for workflow categories
+ */
+function generateCategoryTable(grouped: WorkflowsByPrefix): string {
+  const prefixOrder = [
+    'ci-',
+    'pr-',
+    'release-',
+    'api-',
+    'i18n-',
+    'publish-',
+    'version-',
+    'other-'
+  ]
+
+  let table =
+    '| Prefix     | Purpose                             | Example                              |\n'
+  table +=
+    '| ---------- | ----------------------------------- | ------------------------------------ |\n'
+
+  for (const prefix of prefixOrder) {
+    if (grouped[prefix]) {
+      const example = grouped[prefix].workflows[0]?.filename || ''
+      const purpose = grouped[prefix].description
+      table += `| \`${prefix}\` | ${purpose} | \`${example}\` |\n`
+    }
+  }
+
+  return table
+}
+
+/**
+ * Generate detailed workflow list with descriptions
+ */
+function generateWorkflowList(grouped: WorkflowsByPrefix): string {
+  const prefixOrder = [
+    'ci-',
+    'pr-',
+    'release-',
+    'api-',
+    'i18n-',
+    'publish-',
+    'version-',
+    'other-'
+  ]
+  let markdown = ''
+
+  for (const prefix of prefixOrder) {
+    if (!grouped[prefix]) continue
+
+    const category = grouped[prefix]
+    const prefixName =
+      prefix === 'other-'
+        ? 'Other Workflows'
+        : prefix.replace('-', '').toUpperCase()
+
+    markdown += `\n### ${prefixName}\n\n`
+
+    for (const workflow of category.workflows) {
+      markdown += `#### [\`${workflow.filename}\`](./${workflow.filename})\n\n`
+      markdown += `**Name:** ${workflow.name}\n\n`
+
+      if (workflow.description) {
+        markdown += `**Description:** ${workflow.description}\n\n`
+      }
+
+      if (workflow.triggers.length > 0) {
+        markdown += `**Triggers:** ${workflow.triggers.join(', ')}\n\n`
+      }
+
+      if (workflow.labelTriggers.length > 0) {
+        markdown += `**Label Triggers:** \`${workflow.labelTriggers.join('`, `')}\`\n\n`
+      }
+    }
+  }
+
+  return markdown
+}
+
+/**
+ * Generate quick reference for label-triggered workflows
+ */
+function generateQuickReference(grouped: WorkflowsByPrefix): string {
+  const allWorkflows = Object.values(grouped).flatMap((g) => g.workflows)
+  const labelWorkflows = allWorkflows.filter((w) => w.labelTriggers.length > 0)
+
+  if (labelWorkflows.length === 0) {
+    return ''
+  }
+
+  // Group workflows by label to avoid duplicates
+  const labelMap = new Map<string, string[]>()
+  for (const workflow of labelWorkflows) {
+    for (const label of workflow.labelTriggers) {
+      // Filter out comment-based triggers (commands starting with /) from Quick Reference
+      // These are still shown in detailed workflow sections with full context
+      if (label.startsWith('/')) {
+        continue
+      }
+      const description = workflow.description || workflow.name
+      if (!labelMap.has(label)) {
+        labelMap.set(label, [])
+      }
+      labelMap.get(label)!.push(description)
+    }
+  }
+
+  let markdown = '## Quick Reference\n\n'
+  markdown +=
+    'For label-triggered workflows, add the corresponding label to a PR to trigger the workflow:\n'
+
+  // Sort labels alphabetically for consistency
+  const sortedLabels = Array.from(labelMap.keys()).sort()
+  for (const label of sortedLabels) {
+    const descriptions = labelMap.get(label)!
+    // Use the first description, or note if multiple workflows share the same label
+    const description =
+      descriptions.length === 1
+        ? descriptions[0]
+        : `Triggers ${descriptions.length} workflows`
+    markdown += `- \`${label}\` - ${description}\n`
+  }
+
+  markdown +=
+    '\nFor manual workflows, use the "Run workflow" button in the Actions tab.\n'
+
+  return markdown
+}
+
+/**
+ * Generate the complete README content
+ */
+function generateReadme(grouped: WorkflowsByPrefix): string {
+  const categoryTable = generateCategoryTable(grouped)
+  const quickReference = generateQuickReference(grouped)
+  const workflowList = generateWorkflowList(grouped)
+
+  return `# GitHub Workflows
+
+This directory contains GitHub Actions workflow files that automate various aspects of the ComfyUI frontend development and release process.
+
+> **Note:** This documentation is auto-generated from workflow files. Do not edit manually.
+> Run \`pnpm workflow:docs\` to regenerate.
+
+## Naming Convention
+
+Workflow files follow a consistent naming pattern: \`<prefix>-<descriptive-name>.yaml\`
+
+### Category Prefixes
+
+${categoryTable}
+
+${quickReference}
+
+## Workflow Details
+
+${workflowList}
+
+## Documentation
+
+For more information about GitHub Actions, see:
+- [Events that trigger workflows](https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows)
+- [Workflow syntax](https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions)
+
+## Maintaining Workflows
+
+### Adding a New Workflow
+
+1. Create a new workflow file following the naming convention
+2. Include \`name\` and \`description\` fields at the top of the workflow
+3. Run \`pnpm workflow:docs\` to update this README
+4. Commit both the workflow file and updated README
+
+### Best Practices
+
+1. **Always include a description**: Add a \`description\` field after the \`name\` field
+2. **Use consistent prefixes**: Follow the established prefix conventions
+3. **Label-triggered workflows**: For PR automation, use the \`pr-\` prefix
+4. **Document triggers**: Make trigger conditions clear in the workflow description
+5. **Keep docs in sync**: Run \`pnpm workflow:docs\` after any workflow changes
+`
+}
+
+/**
+ * Main function
+ */
+function main() {
+  // Read all workflow files
+  const files = readdirSync(WORKFLOWS_DIR).filter(
+    (f) => f.endsWith('.yaml') || f.endsWith('.yml')
+  )
+  const workflowFiles = files.filter((f) => f !== 'README.md')
+
+  // Parse each workflow
+  const workflows: WorkflowMetadata[] = []
+  for (const filename of workflowFiles) {
+    const metadata = parseWorkflowFile(filename)
+    if (metadata) {
+      workflows.push(metadata)
+    }
+  }
+
+  // Group workflows by prefix
+  const grouped = groupWorkflowsByPrefix(workflows)
+
+  // Generate README
+  const readme = generateReadme(grouped)
+  writeFileSync(README_PATH, readme, 'utf-8')
+
+  // Show label-triggered workflows for validation
+  const labelWorkflows = workflows.filter((w) => w.labelTriggers.length > 0)
+  if (labelWorkflows.length > 0 && process.env.VERBOSE) {
+    for (const workflow of labelWorkflows) {
+      console.warn(
+        `Label-triggered: ${workflow.name}: ${workflow.labelTriggers.join(', ')}`
+      )
+    }
+  }
+}
+
+main()

scripts/size-collect.js

@@ -0,0 +1,90 @@
+// @ts-check
+import { existsSync } from 'node:fs'
+import { mkdir, readFile, readdir, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+import { brotliCompressSync, gzipSync } from 'node:zlib'
+import pico from 'picocolors'
+import prettyBytes from 'pretty-bytes'
+
+import { categorizeBundle } from './bundle-categories.js'
+
+const distDir = path.resolve('dist')
+const sizeDir = path.resolve('temp/size')
+
+/**
+ * @typedef {Object} SizeResult
+ * @property {string} file
+ * @property {string} category
+ * @property {number} size
+ * @property {number} gzip
+ * @property {number} brotli
+ */
+
+run()
+
+/**
+ * Main function to collect bundle size data
+ */
+async function run() {
+  if (!existsSync(distDir)) {
+    console.error(pico.red('Error: dist directory does not exist'))
+    console.error(pico.yellow('Please run "pnpm build" first'))
+    process.exit(1)
+  }
+
+  console.log(pico.blue('\nCollecting bundle size data...\n'))
+
+  // Collect main bundle files from dist/assets
+  const assetsDir = path.join(distDir, 'assets')
+  const bundles = []
+
+  if (existsSync(assetsDir)) {
+    const files = await readdir(assetsDir)
+    const jsFiles = files.filter(
+      (file) => file.endsWith('.js') && !file.includes('legacy')
+    )
+
+    for (const file of jsFiles) {
+      const filePath = path.join(assetsDir, file)
+      const content = await readFile(filePath, 'utf-8')
+      const size = Buffer.byteLength(content)
+      const gzip = gzipSync(content).length
+      const brotli = brotliCompressSync(content).length
+      const fileName = `assets/${file}`
+      const category = categorizeBundle(fileName)
+
+      bundles.push({
+        file: fileName,
+        category,
+        size,
+        gzip,
+        brotli
+      })
+
+      console.log(
+        `${pico.green(file)} ${pico.dim(`[${category}]`)} - ` +
+          `Size: ${prettyBytes(size)} / ` +
+          `Gzip: ${prettyBytes(gzip)} / ` +
+          `Brotli: ${prettyBytes(brotli)}`
+      )
+    }
+  }
+
+  // Create temp/size directory
+  await mkdir(sizeDir, { recursive: true })
+
+  // Write individual bundle files
+  for (const bundle of bundles) {
+    const fileName = bundle.file.replace(/[/\\]/g, '_').replace('.js', '.json')
+    await writeFile(
+      path.join(sizeDir, fileName),
+      JSON.stringify(bundle, null, 2),
+      'utf-8'
+    )
+  }
+
+  console.log(
+    pico.green(`\n✓ Collected size data for ${bundles.length} bundles\n`)
+  )
+  console.log(pico.blue(`Data saved to: ${sizeDir}\n`))
+}

scripts/size-report.js

@@ -0,0 +1,162 @@
+// @ts-check
+import { markdownTable } from 'markdown-table'
+import { existsSync } from 'node:fs'
+import { readdir } from 'node:fs/promises'
+import path from 'node:path'
+import prettyBytes from 'pretty-bytes'
+
+import { getCategoryMetadata } from './bundle-categories.js'
+
+/**
+ * @typedef {Object} SizeResult
+ * @property {number} size
+ * @property {number} gzip
+ * @property {number} brotli
+ */
+
+/**
+ * @typedef {SizeResult & { file: string, category?: string }} BundleResult
+ */
+
+const currDir = path.resolve('temp/size')
+const prevDir = path.resolve('temp/size-prev')
+let output = '## Bundle Size Report\n\n'
+const sizeHeaders = ['Size', 'Gzip', 'Brotli']
+
+run()
+
+/**
+ * Main function to generate the size report
+ */
+async function run() {
+  if (!existsSync(currDir)) {
+    console.error('Error: temp/size directory does not exist')
+    console.error('Please run "pnpm size:collect" first')
+    process.exit(1)
+  }
+
+  await renderFiles()
+  process.stdout.write(output)
+}
+
+/**
+ * Renders file sizes and diffs between current and previous versions
+ */
+async function renderFiles() {
+  /**
+   * @param {string[]} files
+   * @returns {string[]}
+   */
+  const filterFiles = (files) => files.filter((file) => file.endsWith('.json'))
+
+  const curr = filterFiles(await readdir(currDir))
+  const prev = existsSync(prevDir) ? filterFiles(await readdir(prevDir)) : []
+  const fileList = new Set([...curr, ...prev])
+
+  // Group bundles by category
+  /** @type {Map<string, Array<{fileName: string, curr: BundleResult | undefined, prev: BundleResult | undefined}>>} */
+  const bundlesByCategory = new Map()
+
+  for (const file of fileList) {
+    const currPath = path.resolve(currDir, file)
+    const prevPath = path.resolve(prevDir, file)
+
+    const curr = await importJSON(currPath)
+    const prev = await importJSON(prevPath)
+    const fileName = curr?.file || prev?.file || ''
+    const category = curr?.category || prev?.category || 'Other'
+
+    if (!bundlesByCategory.has(category)) {
+      bundlesByCategory.set(category, [])
+    }
+
+    // @ts-expect-error - get is valid
+    bundlesByCategory.get(category).push({ fileName, curr, prev })
+  }
+
+  // Sort categories by their order
+  const sortedCategories = Array.from(bundlesByCategory.keys()).sort((a, b) => {
+    const metaA = getCategoryMetadata(a)
+    const metaB = getCategoryMetadata(b)
+    return (metaA?.order ?? 99) - (metaB?.order ?? 99)
+  })
+
+  let totalSize = 0
+  let totalCount = 0
+
+  // Render each category
+  for (const category of sortedCategories) {
+    const bundles = bundlesByCategory.get(category) || []
+    if (bundles.length === 0) continue
+
+    const categoryMeta = getCategoryMetadata(category)
+    output += `### ${category}\n\n`
+    if (categoryMeta?.description) {
+      output += `_${categoryMeta.description}_\n\n`
+    }
+
+    const rows = []
+    let categorySize = 0
+
+    for (const { fileName, curr, prev } of bundles) {
+      if (!curr) {
+        // File was deleted
+        rows.push([`~~${fileName}~~`])
+      } else {
+        rows.push([
+          fileName,
+          `${prettyBytes(curr.size)}${getDiff(curr.size, prev?.size)}`,
+          `${prettyBytes(curr.gzip)}${getDiff(curr.gzip, prev?.gzip)}`,
+          `${prettyBytes(curr.brotli)}${getDiff(curr.brotli, prev?.brotli)}`
+        ])
+        categorySize += curr.size
+        totalSize += curr.size
+        totalCount++
+      }
+    }
+
+    // Sort rows by file name within category
+    rows.sort((a, b) => {
+      const fileA = a[0].replace(/~~/g, '')
+      const fileB = b[0].replace(/~~/g, '')
+      return fileA.localeCompare(fileB)
+    })
+
+    output += markdownTable([['File', ...sizeHeaders], ...rows])
+    output += `\n\n**Category Total:** ${prettyBytes(categorySize)}\n\n`
+  }
+
+  // Add overall summary
+  if (totalCount > 0) {
+    output += '---\n\n'
+    output += `**Overall Total Size:** ${prettyBytes(totalSize)}\n`
+    output += `**Total Bundle Count:** ${totalCount}\n`
+  }
+}
+
+/**
+ * Imports JSON data from a specified path
+ *
+ * @template T
+ * @param {string} filePath - Path to the JSON file
+ * @returns {Promise<T | undefined>} The JSON content or undefined if the file does not exist
+ */
+async function importJSON(filePath) {
+  if (!existsSync(filePath)) return undefined
+  return (await import(filePath, { with: { type: 'json' } })).default
+}
+
+/**
+ * Calculates the difference between the current and previous sizes
+ *
+ * @param {number} curr - The current size
+ * @param {number} [prev] - The previous size
+ * @returns {string} The difference in pretty format
+ */
+function getDiff(curr, prev) {
+  if (prev === undefined) return ''
+  const diff = curr - prev
+  if (diff === 0) return ''
+  const sign = diff > 0 ? '+' : ''
+  return ` (**${sign}${prettyBytes(diff)}**)`
+}

src/assets/palettes/light.json

@@ -53,7 +53,7 @@
     "comfy_base": {
       "fg-color": "#222",
       "bg-color": "#DDD",
-      "comfy-menu-bg": "#F5F5F5",
+      "comfy-menu-bg": "#FFFFFF",
       "comfy-menu-hover-bg": "#ccc",
       "comfy-menu-secondary-bg": "#EEE",
       "comfy-input-bg": "#C9C9C9",

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -1,48 +1,88 @@
 <template>
-  <Splitter
-    :key="sidebarStateKey"
-    class="splitter-overlay-root splitter-overlay"
-    :pt:gutter="sidebarPanelVisible ? '' : 'hidden'"
-    :state-key="sidebarStateKey"
-    state-storage="local"
-  >
-    <SplitterPanel
-      v-show="sidebarPanelVisible"
-      v-if="sidebarLocation === 'left'"
-      class="side-bar-panel"
-      :min-size="10"
-      :size="20"
-    >
-      <slot name="side-bar-panel" />
-    </SplitterPanel>
+  <div class="splitter-overlay-root pointer-events-none flex flex-col">
+    <slot name="workflow-tabs" />
+
+    <div
+      class="pointer-events-none flex flex-1 overflow-hidden"
+      :class="{
+        'flex-row': sidebarLocation === 'left',
+        'flex-row-reverse': sidebarLocation === 'right'
+      }"
+    >
+      <div class="side-toolbar-container">
+        <slot name="side-toolbar" />
+      </div>
 
-    <SplitterPanel :size="100">
       <Splitter
-        class="splitter-overlay max-w-full"
-        layout="vertical"
-        :pt:gutter="bottomPanelVisible ? '' : 'hidden'"
-        state-key="bottom-panel-splitter"
+        key="main-splitter-stable"
+        class="splitter-overlay flex-1 overflow-hidden"
+        :pt:gutter="sidebarPanelVisible ? '' : 'hidden'"
+        :state-key="sidebarStateKey || 'main-splitter'"
         state-storage="local"
       >
-        <SplitterPanel class="graph-canvas-panel relative">
-          <slot name="graph-canvas-panel" />
+        <SplitterPanel
+          v-if="sidebarLocation === 'left'"
+          class="side-bar-panel pointer-events-auto"
+          :min-size="10"
+          :size="20"
+          :style="{
+            display:
+              sidebarPanelVisible && sidebarLocation === 'left'
+                ? 'flex'
+                : 'none'
+          }"
+        >
+          <slot
+            v-if="sidebarPanelVisible && sidebarLocation === 'left'"
+            name="side-bar-panel"
+          />
         </SplitterPanel>
-        <SplitterPanel v-show="bottomPanelVisible" class="bottom-panel">
-          <slot name="bottom-panel" />
+
+        <SplitterPanel :size="80" class="flex flex-col">
+          <slot name="topmenu" :sidebar-panel-visible="sidebarPanelVisible" />
+
+          <Splitter
+            class="splitter-overlay splitter-overlay-bottom mr-2 mb-2 ml-2 flex-1"
+            layout="vertical"
+            :pt:gutter="
+              'rounded-tl-lg rounded-tr-lg ' +
+              (bottomPanelVisible ? '' : 'hidden')
+            "
+            state-key="bottom-panel-splitter"
+            state-storage="local"
+          >
+            <SplitterPanel class="graph-canvas-panel relative">
+              <slot name="graph-canvas-panel" />
+            </SplitterPanel>
+            <SplitterPanel
+              v-show="bottomPanelVisible"
+              class="bottom-panel pointer-events-auto rounded-lg"
+            >
+              <slot name="bottom-panel" />
+            </SplitterPanel>
+          </Splitter>
+        </SplitterPanel>
+
+        <SplitterPanel
+          v-if="sidebarLocation === 'right'"
+          class="side-bar-panel pointer-events-auto"
+          :min-size="10"
+          :size="20"
+          :style="{
+            display:
+              sidebarPanelVisible && sidebarLocation === 'right'
+                ? 'flex'
+                : 'none'
+          }"
+        >
+          <slot
+            v-if="sidebarPanelVisible && sidebarLocation === 'right'"
+            name="side-bar-panel"
+          />
         </SplitterPanel>
       </Splitter>
-    </SplitterPanel>
-
-    <SplitterPanel
-      v-show="sidebarPanelVisible"
-      v-if="sidebarLocation === 'right'"
-      class="side-bar-panel"
-      :min-size="10"
-      :size="20"
-    >
-      <slot name="side-bar-panel" />
-    </SplitterPanel>
-  </Splitter>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -74,7 +114,11 @@ const activeSidebarTabId = computed(
 )
 
 const sidebarStateKey = computed(() => {
-  return unifiedWidth.value ? 'unified-sidebar' : activeSidebarTabId.value ?? ''
+  if (unifiedWidth.value) {
+    return 'unified-sidebar'
+  }
+  // When no tab is active, use a default key to maintain state
+  return activeSidebarTabId.value ?? 'default-sidebar'
 })
 </script>
 
@@ -93,12 +137,17 @@ const sidebarStateKey = computed(() => {
 
 .side-bar-panel {
   background-color: var(--bg-color);
-  pointer-events: auto;
 }
 
 .bottom-panel {
-  background-color: var(--bg-color);
-  pointer-events: auto;
+  background-color: var(--comfy-menu-bg);
+  border: 1px solid var(--p-panel-border-color);
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.splitter-overlay-bottom :deep(.p-splitter-gutter) {
+  transform: translateY(5px);
 }
 
 .splitter-overlay {

src/components/MenuHamburger.vue

@@ -1,8 +1,7 @@
 <template>
   <div
     v-show="workspaceState.focusMode"
-    class="comfy-menu-hamburger no-drag"
-    :style="positionCSS"
+    class="comfy-menu-hamburger no-drag top-0 right-0"
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
@@ -15,14 +14,13 @@
       @click="exitFocusMode"
       @contextmenu="showNativeSystemMenu"
     />
-    <div v-show="menuSetting !== 'Bottom'" class="window-actions-spacer" />
+    <div class="window-actions-spacer" />
   </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import type { CSSProperties } from 'vue'
-import { computed, watchEffect } from 'vue'
+import { watchEffect } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
@@ -45,15 +43,6 @@ watchEffect(() => {
     app.ui.menuContainer.style.display = 'block'
   }
 })
-
-const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
-const positionCSS = computed<CSSProperties>(() =>
-  // 'Bottom' menuSetting shows the hamburger button in the bottom right corner
-  // 'Disabled', 'Top' menuSetting shows the hamburger button in the top right corner
-  menuSetting.value === 'Bottom'
-    ? { bottom: '0px', right: '0px' }
-    : { top: '0px', right: '0px' }
-)
 </script>
 
 <style scoped>

src/components/TopMenuSection.vue

@@ -0,0 +1,51 @@
+<template>
+  <div v-if="!workspaceStore.focusMode" class="ml-2 flex pt-2">
+    <div class="min-w-0 flex-1">
+      <SubgraphBreadcrumb />
+    </div>
+
+    <div
+      class="actionbar-container pointer-events-auto mx-2 flex h-12 items-center rounded-lg px-2 shadow-md"
+    >
+      <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
+      <div
+        ref="legacyCommandsContainerRef"
+        class="[&:not(:has(*>*:not(:empty)))]:hidden"
+      ></div>
+      <ComfyActionbar />
+      <LoginButton v-if="!isLoggedIn" />
+      <CurrentUserButton v-else class="shrink-0" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
+import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
+import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
+import LoginButton from '@/components/topbar/LoginButton.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { app } from '@/scripts/app'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+
+const workspaceStore = useWorkspaceStore()
+const { isLoggedIn } = useCurrentUser()
+
+// Maintain support for legacy topbar elements attached by custom scripts
+const legacyCommandsContainerRef = ref<HTMLElement>()
+onMounted(() => {
+  if (legacyCommandsContainerRef.value) {
+    app.menu.element.style.width = 'fit-content'
+    legacyCommandsContainerRef.value.appendChild(app.menu.element)
+  }
+})
+</script>
+
+<style scoped>
+.actionbar-container {
+  background-color: var(--comfy-menu-bg);
+  border: 1px solid var(--p-panel-border-color);
+}
+</style>

src/components/actionbar/ComfyActionbar.vue

@@ -1,38 +1,57 @@
 <template>
-  <Panel
-    class="actionbar w-fit"
-    :style="style"
-    :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
-  >
-    <div ref="panelRef" class="actionbar-content flex items-center select-none">
-      <span
-        ref="dragHandleRef"
-        :class="
-          cn(
-            'drag-handle cursor-grab w-3 h-max mr-2',
-            isDragging && 'cursor-grabbing'
-          )
-        "
-      />
-      <ComfyQueueButton />
+  <div class="flex h-full items-center">
+    <div
+      v-if="isDragging && !isDocked"
+      class="actionbar-drop-zone m-1.5 flex items-center justify-center self-stretch rounded-md"
+      :class="{
+        'drop-zone-active': isMouseOverDropZone
+      }"
+      @mouseenter="onMouseEnterDropZone"
+      @mouseleave="onMouseLeaveDropZone"
+    >
+      {{ t('actionbar.dockToTop') }}
     </div>
-  </Panel>
+
+    <Panel
+      class="actionbar"
+      :style="style"
+      :class="{
+        fixed: !isDocked,
+        'is-dragging': isDragging,
+        'is-docked static mr-2 border-none bg-transparent p-0': isDocked
+      }"
+    >
+      <div
+        ref="panelRef"
+        class="actionbar-content flex items-center select-none"
+      >
+        <span
+          ref="dragHandleRef"
+          :class="
+            cn(
+              'drag-handle cursor-grab w-3 h-max mr-2',
+              isDragging && 'cursor-grabbing'
+            )
+          "
+        />
+        <ComfyQueueButton />
+      </div>
+    </Panel>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import {
   useDraggable,
-  useElementBounding,
-  useEventBus,
   useEventListener,
   useLocalStorage,
   watchDebounced
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
-import type { Ref } from 'vue'
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
+import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -41,10 +60,9 @@ import ComfyQueueButton from './ComfyQueueButton.vue'
 const settingsStore = useSettingStore()
 
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
-
 const visible = computed(() => position.value !== 'Disabled')
 
-const topMenuRef = inject<Ref<HTMLDivElement | null>>('topMenuRef')
+const tabContainer = document.querySelector('.workflow-tabs-container')
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
 const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
@@ -63,11 +81,9 @@ const {
   containerElement: document.body,
   onMove: (event) => {
     // Prevent dragging the menu over the top of the tabs
-    if (position.value === 'Top') {
-      const minY = topMenuRef?.value?.getBoundingClientRect().top ?? 40
-      if (event.y < minY) {
-        event.y = minY
-      }
+    const minY = tabContainer?.getBoundingClientRect().bottom ?? 40
+    if (event.y < minY) {
+      event.y = minY
     }
   }
 })
@@ -202,39 +218,38 @@ const adjustMenuPosition = () => {
 
 useEventListener(window, 'resize', adjustMenuPosition)
 
-const topMenuBounds = useElementBounding(topMenuRef)
-const overlapThreshold = 20 // pixels
-const isOverlappingWithTopMenu = computed(() => {
-  if (!panelRef.value) {
-    return false
+// Drop zone state
+const isMouseOverDropZone = ref(false)
+
+// Mouse event handlers for self-contained drop zone
+const onMouseEnterDropZone = () => {
+  if (isDragging.value) {
+    isMouseOverDropZone.value = true
   }
-  const { height } = panelRef.value.getBoundingClientRect()
-  const actionbarBottom = y.value + height
-  const topMenuBottom = topMenuBounds.bottom.value
+}
 
-  const overlapPixels =
-    Math.min(actionbarBottom, topMenuBottom) -
-    Math.max(y.value, topMenuBounds.top.value)
-  return overlapPixels > overlapThreshold
-})
+const onMouseLeaveDropZone = () => {
+  if (isDragging.value) {
+    isMouseOverDropZone.value = false
+  }
+}
 
-watch(isDragging, (newIsDragging) => {
-  if (!newIsDragging) {
-    // Stop dragging
-    isDocked.value = isOverlappingWithTopMenu.value
+// Handle drag state changes
+watch(isDragging, (dragging) => {
+  if (dragging) {
+    // Starting to drag - undock if docked
+    if (isDocked.value) {
+      isDocked.value = false
+    }
   } else {
-    // Start dragging
-    isDocked.value = false
+    // Stopped dragging - dock if mouse is over drop zone
+    if (isMouseOverDropZone.value) {
+      isDocked.value = true
+    }
+    // Reset drop zone state
+    isMouseOverDropZone.value = false
   }
 })
-
-const eventBus = useEventBus<string>('topMenu')
-watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
-  eventBus.emit('updateHighlight', {
-    isDragging: dragging,
-    isOverlapping: overlapping
-  })
-})
 </script>
 
 <style scoped>
@@ -242,17 +257,27 @@ watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
 
 .actionbar {
   pointer-events: all;
-  position: fixed;
   z-index: 1000;
 }
 
-.actionbar.is-docked {
-  position: static;
-  @apply bg-transparent border-none p-0;
+.actionbar-drop-zone {
+  width: 265px;
+  border: 2px dashed var(--p-primary-color);
+  opacity: 0.8;
+}
+
+.actionbar-drop-zone.drop-zone-active {
+  background: var(--p-highlight-background-focus);
+  border-color: var(--p-primary-color);
+  border-width: 3px;
+  box-shadow: 0 0 20px var(--p-primary-color);
+  opacity: 1;
+  transform: scale(1.05);
 }
 
 .actionbar.is-dragging {
   user-select: none;
+  pointer-events: none;
 }
 
 :deep(.p-panel-content) {

src/components/bottomPanel/BottomPanel.vue

@@ -3,17 +3,42 @@
     <Tabs
       :key="$i18n.locale"
       v-model:value="bottomPanelStore.activeBottomPanelTabId"
+      style="--p-tabs-tablist-background: var(--comfy-menu-bg)"
     >
-      <TabList pt:tab-list="border-none">
+      <TabList
+        pt:tab-list="border-none h-full flex items-center py-2 border-b-1 border-solid"
+        class="bg-transparent"
+      >
         <div class="flex w-full justify-between">
           <div class="tabs-container">
             <Tab
               v-for="tab in bottomPanelStore.bottomPanelTabs"
               :key="tab.id"
               :value="tab.id"
-              class="border-none p-3"
+              class="m-1 mx-2 border-none"
+              :class="{
+                'tab-list-single-item':
+                  bottomPanelStore.bottomPanelTabs.length === 1
+              }"
+              :pt:root="
+                (x: TabPassThroughMethodOptions) => ({
+                  class: {
+                    'p-3 rounded-lg': true,
+                    'pointer-events-none':
+                      bottomPanelStore.bottomPanelTabs.length === 1
+                  },
+                  style: {
+                    color: 'var(--fg-color)',
+                    backgroundColor:
+                      !x.context.active ||
+                      bottomPanelStore.bottomPanelTabs.length === 1
+                        ? ''
+                        : 'var(--bg-color)'
+                  }
+                })
+              "
             >
-              <span class="font-bold">
+              <span class="font-normal">
                 {{ getTabDisplayTitle(tab) }}
               </span>
             </Tab>
@@ -56,6 +81,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Tab from 'primevue/tab'
+import type { TabPassThroughMethodOptions } from 'primevue/tab'
 import TabList from 'primevue/tablist'
 import Tabs from 'primevue/tabs'
 import { computed } from 'vue'
@@ -95,3 +121,9 @@ const closeBottomPanel = () => {
   bottomPanelStore.activePanel = null
 }
 </script>
+
+<style scoped>
+:deep(.p-tablist-active-bar) {
+  display: none;
+}
+</style>

src/components/bottomPanel/tabs/terminal/CommandTerminal.vue

@@ -64,7 +64,6 @@ const terminalCreated = (
 }
 
 :deep(.p-terminal) .xterm-screen {
-  background-color: black;
   overflow-y: hidden;
 }
 </style>

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full bg-black">
+  <div class="h-full w-full bg-transparent">
     <p v-if="errorMessage" class="p-4 text-center">
       {{ errorMessage }}
     </p>
@@ -94,7 +94,6 @@ const terminalCreated = (
 }
 
 :deep(.p-terminal) .xterm-screen {
-  background-color: black;
   overflow-y: hidden;
 }
 </style>

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,12 +1,13 @@
 <template>
   <div
-    class="subgraph-breadcrumb w-auto"
+    class="subgraph-breadcrumb w-auto drop-shadow-md"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs
     }"
     :style="{
-      '--p-breadcrumb-gap': `${ITEM_GAP}px`,
+      '--p-breadcrumb-gap': `0px`,
+      '--p-breadcrumb-item-margin': `${ITEM_GAP / 2}px`,
       '--p-breadcrumb-item-min-width': `${MIN_WIDTH}px`,
       '--p-breadcrumb-item-padding': `${ITEM_PADDING}px`,
       '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
@@ -14,8 +15,9 @@
   >
     <Breadcrumb
       ref="breadcrumbRef"
-      class="bg-transparent p-0"
+      class="w-fit rounded-lg p-0"
       :model="items"
+      :pt="{ item: { class: 'pointer-events-auto' } }"
       aria-label="Graph navigation"
     >
       <template #item="{ item }">
@@ -174,30 +176,65 @@ onUpdated(() => {
   @apply overflow-hidden;
 }
 
+:deep(.p-breadcrumb) {
+  width: 100%;
+  background-color: transparent;
+}
+
 :deep(.p-breadcrumb-item) {
-  @apply flex items-center rounded-lg overflow-hidden;
+  @apply flex items-center overflow-hidden;
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem);
   /* Collapse middle items first */
   flex-shrink: 10000;
 }
 
+:deep(.p-breadcrumb-separator) {
+  display: flex;
+  padding: 0 var(--p-breadcrumb-item-margin);
+}
+
+:deep(.p-breadcrumb-item-link) {
+  padding: 0
+    calc(var(--p-breadcrumb-item-margin) + var(--p-breadcrumb-item-padding));
+}
+
+:deep(.p-breadcrumb-separator),
+:deep(.p-breadcrumb-item) {
+  @apply h-12;
+  border-top: 1px solid var(--p-panel-border-color);
+  border-bottom: 1px solid var(--p-panel-border-color);
+  background-color: var(--comfy-menu-bg);
+}
+
 :deep(.p-breadcrumb-item:has(.p-breadcrumb-item-link-icon-visible)) {
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem + 20px);
 }
 
 :deep(.p-breadcrumb-item:first-child) {
+  @apply rounded-l-lg;
   /* Then collapse the root workflow */
   flex-shrink: 5000;
+  border-left: 1px solid var(--p-panel-border-color);
+
+  .p-breadcrumb-item-link {
+    padding-left: var(--p-breadcrumb-item-padding);
+  }
 }
 
 :deep(.p-breadcrumb-item:last-child) {
+  @apply rounded-r-lg;
   /* Then collapse the active item */
   flex-shrink: 1;
+  border-right: 1px solid var(--p-panel-border-color);
 }
 
-:deep(.p-breadcrumb-item:hover),
-:deep(.p-breadcrumb-item:has(.p-breadcrumb-item-link-menu-visible)) {
-  background-color: color-mix(in srgb, var(--fg-color) 10%, transparent);
+:deep(.p-breadcrumb-item-link:hover),
+:deep(.p-breadcrumb-item-link-menu-visible) {
+  background-color: color-mix(
+    in srgb,
+    var(--fg-color) 10%,
+    var(--comfy-menu-bg)
+  ) !important;
   color: var(--fg-color);
 }
 </style>
@@ -214,7 +251,7 @@ onUpdated(() => {
   .p-breadcrumb-item:nth-last-child(3),
   .p-breadcrumb-separator:nth-last-child(2),
   .p-breadcrumb-item:nth-last-child(1) {
-    @apply block;
+    @apply flex;
   }
 }
 </style>

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -6,7 +6,7 @@
       showDelay: 512
     }"
     href="#"
-    class="p-breadcrumb-item-link cursor-pointer"
+    class="p-breadcrumb-item-link h-12 cursor-pointer px-2"
     :class="{
       'flex items-center gap-1': isActive,
       'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
@@ -15,7 +15,7 @@
     }"
     @click="handleClick"
   >
-    <span class="p-breadcrumb-item-label">{{ item.label }}</span>
+    <span class="p-breadcrumb-item-label px-2">{{ item.label }}</span>
     <Tag v-if="item.isBlueprint" :value="'Blueprint'" severity="primary" />
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
   </a>
@@ -26,7 +26,7 @@
     :popup="true"
     :pt="{
       root: {
-        style: 'background-color: var(--comfy-menu-secondary-bg)'
+        style: 'background-color: var(--comfy-menu-bg)'
       },
       itemLink: {
         class: 'py-2'
@@ -38,7 +38,7 @@
     ref="itemInputRef"
     v-model="itemLabel"
     class="fixed z-10000 px-2 py-2 text-[.8rem]"
-    @blur="inputBlur(true)"
+    @blur="inputBlur(false)"
     @click.stop
     @keydown.enter="inputBlur(true)"
     @keydown.esc="inputBlur(false)"
@@ -240,7 +240,6 @@ const inputBlur = async (doRename: boolean) => {
 
 .p-breadcrumb-item-link {
   @apply overflow-hidden;
-  padding: var(--p-breadcrumb-item-padding);
 }
 
 .p-breadcrumb-item-label {

src/components/graph/GraphCanvas.vue

@@ -2,28 +2,46 @@
   <!-- Load splitter overlay only after comfyApp is ready. -->
   <!-- If load immediately, the top-level splitter stateKey won't be correctly
   synced with the stateStorage (localStorage). -->
-  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady && betaMenuEnabled">
-    <template v-if="!workspaceStore.focusMode" #side-bar-panel>
+  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady">
+    <template v-if="showUI && workflowTabsPosition === 'Topbar'" #workflow-tabs>
+      <div
+        class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
+      >
+        <!-- Native drag area for Electron -->
+        <div
+          v-if="isNativeWindow() && workflowTabsPosition !== 'Topbar'"
+          class="app-drag fixed top-0 left-0 z-10 h-[var(--comfy-topbar-height)] w-full"
+        />
+        <div class="flex">
+          <WorkflowTabs />
+          <TopbarBadges />
+        </div>
+      </div>
+    </template>
+    <template v-if="showUI" #side-toolbar>
       <SideToolbar />
     </template>
-    <template v-if="!workspaceStore.focusMode" #bottom-panel>
+    <template v-if="showUI" #side-bar-panel>
+      <div
+        class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto"
+      >
+        <ExtensionSlot v-if="activeSidebarTab" :extension="activeSidebarTab" />
+      </div>
+    </template>
+    <template v-if="showUI" #topmenu>
+      <TopMenuSection />
+    </template>
+    <template v-if="showUI" #bottom-panel>
       <BottomPanel />
     </template>
     <template #graph-canvas-panel>
-      <div class="pointer-events-auto absolute top-0 left-0 w-auto max-w-full">
-        <SecondRowWorkflowTabs
-          v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
-        />
-      </div>
       <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
-
       <MiniMap
-        v-if="comfyAppReady && minimapEnabled"
+        v-if="comfyAppReady && minimapEnabled && showUI"
         class="pointer-events-auto"
       />
     </template>
   </LiteGraphCanvasSplitterOverlay>
-  <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
   <canvas
     id="graph-canvas"
     ref="canvasRef"
@@ -81,7 +99,9 @@ import {
 } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
+import TopMenuSection from '@/components/TopMenuSection.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
+import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
@@ -90,7 +110,8 @@ import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodeOptions from '@/components/graph/selectionToolbox/NodeOptions.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
-import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
@@ -129,6 +150,7 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { isNativeWindow } from '@/utils/envUtil'
 
 const emit = defineEmits<{
   ready: []
@@ -160,6 +182,12 @@ const tooltipEnabled = computed(() => settingStore.get('Comfy.EnableTooltips'))
 const selectionToolboxEnabled = computed(() =>
   settingStore.get('Comfy.Canvas.SelectionToolbox')
 )
+const activeSidebarTab = computed(() => {
+  return workspaceStore.sidebarTab.activeSidebarTab
+})
+const showUI = computed(
+  () => !workspaceStore.focusMode && betaMenuEnabled.value
+)
 
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 

src/components/graph/GraphCanvasMenu.vue

@@ -10,7 +10,7 @@
     ></div>
 
     <ButtonGroup
-      class="absolute right-2 bottom-2 z-[1200] flex-row gap-1 border-[1px] border-node-border bg-interface-panel-surface p-2"
+      class="absolute right-0 bottom-0 z-[1200] flex-row gap-1 border-[1px] border-node-border bg-interface-panel-surface p-2"
       :style="stringifiedMinimapStyles.buttonGroupStyles"
       @wheel="canvasInteractions.handleWheel"
     >

src/components/graph/widgets/ChatHistoryWidget.vue

@@ -75,7 +75,7 @@ let promptInput = findPromptInput()
 const previousPromptInput = ref<string | null>(null)
 
 const getPreviousResponseId = (index: number) =>
-  index > 0 ? parsedHistory.value[index - 1]?.response_id ?? '' : ''
+  index > 0 ? (parsedHistory.value[index - 1]?.response_id ?? '') : ''
 
 const storePromptInput = () => {
   promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')

src/components/icons/ComfyLogoTransparent.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg
+    :class="iconClass"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.8193 0.600586C15.1248 0.600586 15.3296 0.70893 15.459 0.881836C15.5914 1.05888 15.6471 1.33774 15.5527 1.66895L14.8037 4.30176C14.7063 4.64386 14.4729 4.97024 14.1641 5.21191C13.8544 5.45415 13.496 5.58984 13.1699 5.58984H13.1689L9.5791 5.59668H7.90625C7.52654 5.59668 7.19496 5.84986 7.09082 6.21289L5.69434 11.0889C5.63007 11.3133 5.66134 11.5534 5.77734 11.7529L5.83203 11.8359C5.99177 12.0491 6.24252 12.1758 6.50977 12.1758H6.51074L8.88281 12.1709H11.4971C11.7643 12.171 11.9541 12.254 12.084 12.3906L12.1357 12.4521C12.2685 12.6295 12.3249 12.9089 12.2305 13.2402L11.4805 15.8721C11.383 16.2144 11.1498 16.5415 10.8408 16.7832C10.5314 17.0252 10.1736 17.161 9.84766 17.1611H9.84668L6.25684 17.168H3.64258C3.33762 17.1679 3.13349 17.0588 3.00391 16.8857C2.87135 16.7087 2.81482 16.43 2.90918 16.0986L3.39551 14.3887C3.46841 14.1327 3.41794 13.8576 3.25879 13.6445V13.6436C3.09901 13.4303 2.84745 13.3037 2.58008 13.3037H1.18066C0.875088 13.3037 0.670398 13.1953 0.541016 13.0225C0.408483 12.8451 0.351891 12.5655 0.446289 12.2344L2.11914 6.38965L2.30371 5.74707V5.74609C2.40139 5.40341 2.63456 5.07671 2.94336 4.83496C3.25302 4.59258 3.61143 4.45705 3.9375 4.45703H5.6123C5.94484 4.45703 6.24083 4.26316 6.37891 3.9707L6.42773 3.83984L6.98145 1.89551C7.07894 1.55317 7.31212 1.22614 7.62109 0.984375C7.93074 0.742127 8.2892 0.606445 8.61523 0.606445H8.61621L12.1982 0.600586H14.8193Z"
+      :stroke="color"
+      stroke-width="1"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: number | string
+  color?: string
+  class?: string
+}
+const {
+  size = 16,
+  color = 'currentColor',
+  class: className
+} = defineProps<Props>()
+const iconClass = computed(() => className || '')
+</script>

src/components/input/SingleSelect.vue

@@ -106,7 +106,7 @@ const getLabel = (val: string | null | undefined) => {
   if (val == null) return label ?? ''
   if (!options) return label ?? ''
   const found = options.find((o) => o.value === val)
-  return found ? found.name : label ?? ''
+  return found ? found.name : (label ?? '')
 }
 
 // Extract complex style logic from template

src/components/sidebar/ComfyMenuButton.vue

@@ -1,30 +1,28 @@
 <template>
   <div
-    class="comfyui-logo-wrapper mr-2 flex cursor-pointer items-center justify-center rounded-md p-1"
+    class="comfy-menu-button-wrapper flex shrink-0 cursor-pointer flex-col items-center justify-center rounded-t-md p-2 transition-colors"
     :class="{
-      'comfyui-logo-menu-visible': menuRef?.visible
-    }"
-    :style="{
-      minWidth: isLargeSidebar ? '4rem' : 'auto'
+      'comfy-menu-button-active': menuRef?.visible
     }"
     @click="menuRef?.toggle($event)"
   >
-    <img
-      src="/assets/images/comfy-logo-mono.svg"
+    <ComfyLogoTransparent
       alt="ComfyUI Logo"
-      class="comfyui-logo h-7"
-      @contextmenu="showNativeSystemMenu"
+      class="comfyui-logo h-[18px] w-[18px]"
     />
-    <i class="pi pi-angle-down ml-1 text-[10px]" />
+
+    <span
+      v-if="!isSmall"
+      class="side-bar-button-label mt-1 text-center text-[10px]"
+      >{{ t('sideToolbar.labels.menu') }}</span
+    >
   </div>
+
   <TieredMenu
     ref="menuRef"
     :model="translatedItems"
     :popup="true"
     class="comfy-command-menu"
-    :class="{
-      'comfy-command-menu-top': isTopMenu
-    }"
     @show="onMenuShow"
   >
     <template #item="{ item, props }">
@@ -48,7 +46,7 @@
           v-else-if="
             item.icon && item.comfyCommand?.id !== 'Comfy.NewBlankWorkflow'
           "
-          class="p-menubar-item-icon"
+          class="p-menubar-item-icon text-sm"
           :class="item.icon"
         />
         <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
@@ -67,8 +65,6 @@
       </a>
     </template>
   </TieredMenu>
-
-  <SubgraphBreadcrumb />
 </template>
 
 <script setup lang="ts">
@@ -78,38 +74,34 @@ import type { TieredMenuMethods, TieredMenuState } from 'primevue/tieredmenu'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
+import ComfyLogoTransparent from '@/components/icons/ComfyLogoTransparent.vue'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { showNativeSystemMenu } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const menuItemStore = useMenuItemStore()
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
-const menuItemsStore = useMenuItemStore()
-const commandStore = useCommandStore()
 const dialogStore = useDialogStore()
-const settingStore = useSettingStore()
-const { t } = useI18n()
-
 const managerState = useManagerState()
 
+const { isSmall = false } = defineProps<{
+  isSmall?: boolean
+}>()
+
 const menuRef = ref<
   ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)
-const isLargeSidebar = computed(
-  () => settingStore.get('Comfy.Sidebar.Size') !== 'small'
-)
-const isTopMenu = computed(() => settingStore.get('Comfy.UseNewMenu') === 'Top')
 
 const translateMenuItem = (item: MenuItem): MenuItem => {
   const label = typeof item.label === 'function' ? item.label() : item.label
@@ -185,7 +177,7 @@ const extraMenuItems = computed(() => [
 ])
 
 const translatedItems = computed(() => {
-  const items = menuItemsStore.menuItems.map(translateMenuItem)
+  const items = menuItemStore.menuItems.map(translateMenuItem)
   let helpIndex = items.findIndex((item) => item.key === 'Help')
   let helpItem: MenuItem | undefined
 
@@ -272,16 +264,24 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
   return (
     item.parentPath &&
     (item.parentPath === 'theme' ||
-      menuItemsStore.menuItemHasActiveStateChildren[item.parentPath])
+      menuItemStore.menuItemHasActiveStateChildren[item.parentPath])
   )
 }
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
+.comfy-menu-button-wrapper {
+  width: var(--sidebar-width);
+  height: var(--sidebar-item-height);
+}
 
-:deep(.p-menubar-submenu.dropdown-direction-up) {
-  @apply top-auto bottom-full flex-col-reverse;
+.comfy-menu-button-wrapper:hover {
+  background: var(--p-button-text-secondary-hover-background);
+}
+
+.comfy-menu-button-active,
+.comfy-menu-button-active:hover {
+  background-color: var(--content-hover-bg);
 }
 
 .keybinding-tag {
@@ -289,11 +289,6 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
   border-color: var(--p-content-border-color);
   border-style: solid;
 }
-
-.comfyui-logo-menu-visible,
-.comfyui-logo-wrapper:hover {
-  background-color: color-mix(in srgb, var(--fg-color) 10%, transparent);
-}
 </style>
 
 <style>
@@ -309,22 +304,8 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
     transparent
   );
 }
+
 .comfy-command-menu ul {
-  background-color: var(--comfy-menu-secondary-bg) !important;
-}
-.comfy-command-menu-top .p-tieredmenu-submenu {
-  left: calc(100% + 15px) !important;
-  top: -4px !important;
-}
-@media (max-height: 700px) {
-  .comfy-command-menu .p-tieredmenu-submenu {
-    @apply absolute max-h-[90vh] overflow-y-auto;
-  }
-  /* Help (last) submenu upward offset in compact mode */
-  .p-tieredmenu-root-list
-    > .p-tieredmenu-item:last-of-type
-    .p-tieredmenu-submenu {
-    top: -188px !important;
-  }
+  background-color: var(--comfy-menu-bg) !important;
 }
 </style>

src/components/sidebar/SideToolbar.vue

@@ -1,48 +1,69 @@
 <template>
-  <teleport :to="teleportTarget">
-    <nav class="side-tool-bar-container" :class="{ 'small-sidebar': isSmall }">
-      <SidebarIcon
-        v-for="tab in tabs"
-        :key="tab.id"
-        :icon="tab.icon"
-        :icon-badge="tab.iconBadge"
-        :tooltip="tab.tooltip"
-        :tooltip-suffix="getTabTooltipSuffix(tab)"
-        :label="tab.label || tab.title"
-        :is-small="isSmall"
-        :selected="tab.id === selectedTab?.id"
-        :class="tab.id + '-tab-button'"
-        @click="onTabClick(tab)"
-      />
-      <SidebarTemplatesButton />
-      <div class="side-tool-bar-end">
-        <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
-        <SidebarHelpCenterIcon />
-        <SidebarBottomPanelToggleButton />
-        <SidebarShortcutsToggleButton />
-      </div>
-    </nav>
-  </teleport>
-  <div
-    v-if="selectedTab"
-    class="sidebar-content-container h-full overflow-x-hidden overflow-y-auto"
+  <nav
+    ref="sideToolbarRef"
+    class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2"
+    :class="{
+      'small-sidebar': isSmall,
+      'connected-sidebar': isConnected,
+      'floating-sidebar': !isConnected,
+      'overflowing-sidebar': isOverflowing
+    }"
   >
-    <ExtensionSlot :extension="selectedTab" />
-  </div>
+    <div
+      ref="contentMeasureRef"
+      :class="
+        isOverflowing
+          ? 'side-tool-bar-container overflow-y-auto'
+          : 'flex flex-col h-full'
+      "
+    >
+      <div ref="topToolbarRef" :class="groupClasses">
+        <ComfyMenuButton :is-small="isSmall" />
+        <SidebarIcon
+          v-for="tab in tabs"
+          :key="tab.id"
+          :icon="tab.icon"
+          :icon-badge="tab.iconBadge"
+          :tooltip="tab.tooltip"
+          :tooltip-suffix="getTabTooltipSuffix(tab)"
+          :label="tab.label || tab.title"
+          :is-small="isSmall"
+          :selected="tab.id === selectedTab?.id"
+          :class="tab.id + '-tab-button'"
+          @click="onTabClick(tab)"
+        />
+        <SidebarTemplatesButton />
+      </div>
+
+      <div ref="bottomToolbarRef" class="mt-auto" :class="groupClasses">
+        <SidebarLogoutIcon
+          v-if="userStore.isMultiUserServer"
+          :is-small="isSmall"
+        />
+        <SidebarHelpCenterIcon :is-small="isSmall" />
+        <SidebarBottomPanelToggleButton :is-small="isSmall" />
+        <SidebarShortcutsToggleButton :is-small="isSmall" />
+      </div>
+    </div>
+  </nav>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { debounce } from 'es-toolkit/compat'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useKeybindingStore } from '@/stores/keybindingStore'
 import { useUserStore } from '@/stores/userStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 import SidebarHelpCenterIcon from './SidebarHelpCenterIcon.vue'
 import SidebarIcon from './SidebarIcon.vue'
@@ -53,16 +74,25 @@ const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const userStore = useUserStore()
 const commandStore = useCommandStore()
-
-const teleportTarget = computed(() =>
-  settingStore.get('Comfy.Sidebar.Location') === 'left'
-    ? '.comfyui-body-left'
-    : '.comfyui-body-right'
-)
+const canvasStore = useCanvasStore()
+const sideToolbarRef = ref<HTMLElement>()
+const contentMeasureRef = ref<HTMLElement>()
+const topToolbarRef = ref<HTMLElement>()
+const bottomToolbarRef = ref<HTMLElement>()
 
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
+const sidebarLocation = computed<'left' | 'right'>(() =>
+  settingStore.get('Comfy.Sidebar.Location')
+)
+const sidebarStyle = computed(() => settingStore.get('Comfy.Sidebar.Style'))
+const isConnected = computed(
+  () =>
+    selectedTab.value ||
+    isOverflowing.value ||
+    sidebarStyle.value === 'connected'
+)
 
 const tabs = computed(() => workspaceStore.getSidebarTabs())
 const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
@@ -79,6 +109,68 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   )
   return keybinding ? ` (${keybinding.combo.toString()})` : ''
 }
+
+const isOverflowing = ref(false)
+const groupClasses = computed(() =>
+  cn(
+    'sidebar-item-group pointer-events-auto flex flex-col items-center overflow-hidden flex-shrink-0' +
+      (isConnected.value ? '' : ' rounded-lg shadow-md')
+  )
+)
+
+const ENTER_OVERFLOW_MARGIN = 20
+const EXIT_OVERFLOW_MARGIN = 50
+
+const checkOverflow = debounce(() => {
+  if (!sideToolbarRef.value || !topToolbarRef.value || !bottomToolbarRef.value)
+    return
+
+  const containerHeight = sideToolbarRef.value.clientHeight
+  const topHeight = topToolbarRef.value.scrollHeight
+  const bottomHeight = bottomToolbarRef.value.scrollHeight
+  const contentHeight = topHeight + bottomHeight
+
+  if (isOverflowing.value) {
+    isOverflowing.value = containerHeight < contentHeight + EXIT_OVERFLOW_MARGIN
+  } else {
+    isOverflowing.value =
+      containerHeight < contentHeight + ENTER_OVERFLOW_MARGIN
+  }
+}, 16)
+
+onMounted(() => {
+  if (!sideToolbarRef.value) return
+
+  const overflowObserver = useResizeObserver(
+    sideToolbarRef.value,
+    checkOverflow
+  )
+
+  checkOverflow()
+
+  onBeforeUnmount(() => {
+    overflowObserver.stop()
+  })
+
+  watch(
+    [isSmall, sidebarLocation],
+    async () => {
+      if (canvasStore.canvas) {
+        if (sidebarLocation.value === 'left') {
+          await nextTick()
+          canvasStore.canvas.fpsInfoLocation = [
+            sideToolbarRef.value?.getBoundingClientRect()?.right,
+            null
+          ]
+        } else {
+          canvasStore.canvas.fpsInfoLocation = null
+        }
+        canvasStore.canvas.setDirty(false, true)
+      }
+    },
+    { immediate: true }
+  )
+})
 </script>
 
 <style>
@@ -88,36 +180,64 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
  * but need to reference sidebar dimensions for proper positioning.
  */
 :root {
-  --sidebar-width: 4rem;
+  --sidebar-padding: 8px;
   --sidebar-icon-size: 1rem;
+
+  --sidebar-default-floating-width: 56px;
+  --sidebar-default-connected-width: calc(
+    var(--sidebar-default-floating-width) + var(--sidebar-padding) * 2
+  );
+  --sidebar-default-item-height: 56px;
+
+  --sidebar-small-floating-width: 48px;
+  --sidebar-small-connected-width: calc(
+    var(--sidebar-small-floating-width) + var(--sidebar-padding) * 2
+  );
+  --sidebar-small-item-height: 48px;
+
+  --sidebar-width: var(--sidebar-default-floating-width);
+  --sidebar-item-height: var(--sidebar-default-item-height);
 }
 
 :root:has(.side-tool-bar-container.small-sidebar) {
-  --sidebar-width: 2.5rem;
+  --sidebar-width: var(--sidebar-small-floating-width);
+  --sidebar-item-height: var(--sidebar-small-item-height);
+}
+
+:root:has(.side-tool-bar-container.connected-sidebar) {
+  --sidebar-width: var(--sidebar-default-connected-width);
+}
+
+:root:has(.side-tool-bar-container.small-sidebar.connected-sidebar) {
+  --sidebar-width: var(--sidebar-small-connected-width);
 }
 </style>
 
 <style scoped>
-.side-tool-bar-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+@reference "tailwindcss";
 
-  width: var(--sidebar-width);
-  height: 100%;
-
-  background-color: var(--comfy-menu-secondary-bg);
-  color: var(--fg-color);
-  box-shadow: var(--bar-shadow);
+.floating-sidebar {
+  padding: var(--sidebar-padding);
 }
 
-.side-tool-bar-container.small-sidebar {
-  --sidebar-width: 2.5rem;
-  --sidebar-icon-size: 1rem;
+.floating-sidebar .sidebar-item-group {
+  border-color: var(--p-panel-border-color);
 }
 
-.side-tool-bar-end {
-  align-self: flex-end;
-  margin-top: auto;
+.connected-sidebar {
+  padding: var(--sidebar-padding) 0;
+  background-color: var(--comfy-menu-bg);
+}
+
+.sidebar-item-group {
+  background-color: var(--comfy-menu-bg);
+  border: 1px solid transparent;
+}
+
+.overflowing-sidebar :deep(.comfy-menu-button-wrapper) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--comfy-menu-bg);
 }
 </style>

src/components/sidebar/SidebarBottomPanelToggleButton.vue

@@ -1,5 +1,6 @@
 <template>
   <SidebarIcon
+    label="sideToolbar.labels.console"
     :tooltip="$t('menu.toggleBottomPanel')"
     :selected="bottomPanelStore.activePanel == 'terminal'"
     @click="bottomPanelStore.toggleBottomPanel"

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -3,8 +3,10 @@
     <SidebarIcon
       icon="pi pi-question-circle"
       class="comfy-help-center-btn"
+      label="menu.help"
       :tooltip="$t('sideToolbar.helpCenter')"
       :icon-badge="shouldShowRedDot ? '•' : ''"
+      :is-small="isSmall"
       @click="toggleHelpCenter"
     />
 
@@ -16,7 +18,7 @@
         :class="{
           'sidebar-left': sidebarLocation === 'left',
           'sidebar-right': sidebarLocation === 'right',
-          'small-sidebar': sidebarSize === 'small'
+          'small-sidebar': isSmall
         }"
       >
         <HelpCenterMenuContent @close="closeHelpCenter" />
@@ -29,7 +31,7 @@
         :class="{
           'sidebar-left': sidebarLocation === 'left',
           'sidebar-right': sidebarLocation === 'right',
-          'small-sidebar': sidebarSize === 'small'
+          'small-sidebar': isSmall
         }"
       />
     </Teleport>
@@ -40,7 +42,7 @@
         :class="{
           'sidebar-left': sidebarLocation === 'left',
           'sidebar-right': sidebarLocation === 'right',
-          'small-sidebar': sidebarSize === 'small'
+          'small-sidebar': isSmall
         }"
         @whats-new-dismissed="handleWhatsNewDismissed"
       />
@@ -59,7 +61,7 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, toRefs } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -87,6 +89,11 @@ const { showNodeConflictDialog } = useDialogService()
 const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =
   useConflictAcknowledgment()
 
+const props = defineProps<{
+  isSmall: boolean
+}>()
+const { isSmall } = toRefs(props)
+
 // Use either release red dot or conflict red dot
 const shouldShowRedDot = computed((): boolean => {
   const releaseRedDot = showReleaseRedDot.value
@@ -97,8 +104,6 @@ const sidebarLocation = computed(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 
-const sidebarSize = computed(() => settingStore.get('Comfy.Sidebar.Size'))
-
 const toggleHelpCenter = () => {
   helpCenterStore.toggle()
 }

src/components/sidebar/SidebarIcon.vue

@@ -8,10 +8,8 @@
     text
     :pt="{
       root: {
-        class: `side-bar-button ${
-          selected
-            ? 'p-button-primary side-bar-button-selected'
-            : 'p-button-secondary'
+        class: `side-bar-button p-button-secondary ${
+          selected ? 'side-bar-button-selected' : ''
         }`,
         'aria-label': computedTooltip
       }
@@ -76,7 +74,7 @@ const emit = defineEmits<{
   (e: 'click', event: MouseEvent): void
 }>()
 const overlayValue = computed(() =>
-  typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
+  typeof iconBadge === 'function' ? (iconBadge() ?? '') : iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
 const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
@@ -87,9 +85,13 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
   font-size: var(--sidebar-icon-size) !important;
 }
 
+.side-bar-button-selected {
+  background-color: var(--content-hover-bg);
+  color: var(--content-hover-fg);
+}
+
 .side-bar-button-selected .side-bar-button-icon {
   font-size: var(--sidebar-icon-size) !important;
-  font-weight: 700;
 }
 </style>
 
@@ -98,8 +100,9 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 
 .side-bar-button {
   width: var(--sidebar-width);
-  height: calc(var(--sidebar-width) + 0.5rem);
+  height: var(--sidebar-item-height);
   border-radius: 0;
+  flex-shrink: 0;
 }
 
 .side-tool-bar-end .side-bar-button {

src/components/sidebar/SidebarLogoutIcon.vue

@@ -1,5 +1,10 @@
 <template>
-  <SidebarIcon icon="pi pi-sign-out" :tooltip="tooltip" @click="logout" />
+  <SidebarIcon
+    icon="pi pi-sign-out"
+    :tooltip="tooltip"
+    label="sideToolbar.logout"
+    @click="logout"
+  />
 </template>
 
 <script setup lang="ts">

src/components/sidebar/SidebarShortcutsToggleButton.vue

@@ -1,5 +1,6 @@
 <template>
   <SidebarIcon
+    label="shortcuts.shortcuts"
     :tooltip="tooltipText"
     :selected="isShortcutsPanelVisible"
     @click="toggleShortcutsPanel"

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -100,9 +100,9 @@ const coverResult = flatOutputs.length
 // Using `==` instead of `===` because NodeId can be a string or a number
 const node: ComfyNode | null =
   flatOutputs.length && props.task.workflow
-    ? props.task.workflow.nodes.find(
+    ? (props.task.workflow.nodes.find(
         (n: ComfyNode) => n.id == coverResult?.nodeId
-      ) ?? null
+      ) ?? null)
     : null
 const progressPreviewBlobUrl = ref('')
 

src/components/topbar/LoginButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <Button
+    v-if="!isLoggedIn"
+    :label="t('auth.login.loginButton')"
+    outlined
+    severity="secondary"
+    class="text-neutral border-black/50 px-4 capitalize dark-theme:border-white/50 dark-theme:text-white"
+    @click="handleSignIn()"
+    @mouseenter="showPopover"
+    @mouseleave="hidePopover"
+  />
+
+  <Popover
+    ref="popoverRef"
+    class="p-2"
+    @mouseout="hidePopover"
+    @mouseover="cancelHidePopover"
+  >
+    <div>
+      <div class="mb-1">{{ t('auth.loginButton.tooltipHelp') }}</div>
+      <a
+        href="https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes"
+        target="_blank"
+        class="text-neutral-500 hover:text-primary"
+        >{{ t('auth.loginButton.tooltipLearnMore') }}</a
+      >
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import { ref } from 'vue'
+
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { t } from '@/i18n'
+
+const { isLoggedIn, handleSignIn } = useCurrentUser()
+const popoverRef = ref<InstanceType<typeof Popover> | null>(null)
+let hideTimeout: ReturnType<typeof setTimeout> | null = null
+let showTimeout: ReturnType<typeof setTimeout> | null = null
+
+const showPopover = (event: Event) => {
+  // Clear any existing timeouts
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+  if (showTimeout) {
+    clearTimeout(showTimeout)
+    showTimeout = null
+  }
+
+  showTimeout = setTimeout(() => {
+    if (popoverRef.value) {
+      popoverRef.value.show(event, event.target as HTMLElement)
+    }
+  }, 200)
+}
+
+const cancelHidePopover = () => {
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+}
+
+const hidePopover = () => {
+  // Clear show timeout if mouse leaves before popover appears
+  if (showTimeout) {
+    clearTimeout(showTimeout)
+    showTimeout = null
+  }
+
+  hideTimeout = setTimeout(() => {
+    if (popoverRef.value) {
+      popoverRef.value.hide()
+    }
+  }, 150) // Minimal delay to allow moving to popover
+}
+</script>

src/components/topbar/SecondRowWorkflowTabs.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="w-auto max-w-full">
-    <WorkflowTabs />
-  </div>
-</template>
-
-<script setup lang="ts">
-import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
-</script>
-
-<style scoped>
-:deep(.workflow-tabs) {
-  background-color: var(--comfy-menu-bg);
-}
-</style>

src/components/topbar/TopMenubar.vue

@@ -1,158 +0,0 @@
-<template>
-  <div>
-    <div
-      v-show="showTopMenu && workflowTabsPosition === 'Topbar'"
-      class="z-1001 flex h-9.5 w-full content-end"
-      style="background: var(--border-color)"
-    >
-      <WorkflowTabs />
-      <TopbarBadges />
-    </div>
-    <div
-      v-show="showTopMenu"
-      ref="topMenuRef"
-      class="comfyui-menu flex items-center bg-gray-100"
-      :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
-    >
-      <CommandMenubar />
-      <div class="app-drag h-full min-w-0 grow"></div>
-      <div
-        ref="menuRight"
-        class="comfyui-menu-right flex-shrink-1 overflow-auto"
-      />
-      <Actionbar />
-      <CurrentUserButton class="shrink-0" />
-    </div>
-
-    <!-- Virtual top menu for native window (drag handle) -->
-    <div
-      v-show="isNativeWindow() && !showTopMenu"
-      class="app-drag fixed top-0 left-0 h-(--comfy-topbar-height) w-full"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useEventBus } from '@vueuse/core'
-import { computed, onMounted, provide, ref } from 'vue'
-
-import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
-import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
-import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
-import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { app } from '@/scripts/app'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
-
-import TopbarBadges from './TopbarBadges.vue'
-
-const workspaceState = useWorkspaceStore()
-const settingStore = useSettingStore()
-const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
-const betaMenuEnabled = computed(() => menuSetting.value !== 'Disabled')
-const showTopMenu = computed(
-  () => betaMenuEnabled.value && !workspaceState.focusMode
-)
-const workflowTabsPosition = computed(() =>
-  settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
-)
-
-const menuRight = ref<HTMLDivElement | null>(null)
-// Menu-right holds legacy topbar elements attached by custom scripts
-onMounted(() => {
-  if (menuRight.value) {
-    app.menu.element.style.width = 'fit-content'
-    menuRight.value.appendChild(app.menu.element)
-  }
-})
-
-const topMenuRef = ref<HTMLDivElement | null>(null)
-provide('topMenuRef', topMenuRef)
-const eventBus = useEventBus<string>('topMenu')
-const isDropZone = ref(false)
-const isDroppable = ref(false)
-eventBus.on((event: string, payload: any) => {
-  if (event === 'updateHighlight') {
-    isDropZone.value = payload.isDragging
-    isDroppable.value = payload.isOverlapping && payload.isDragging
-  }
-})
-
-onMounted(() => {
-  if (isElectron()) {
-    electronAPI().changeTheme({
-      height: topMenuRef.value?.getBoundingClientRect().height ?? 0
-    })
-  }
-})
-</script>
-
-<style scoped>
-.comfyui-menu {
-  width: 100vw;
-  height: var(--comfy-topbar-height);
-  background: var(--comfy-menu-bg);
-  color: var(--fg-color);
-  box-shadow: var(--bar-shadow);
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 0.8em;
-  box-sizing: border-box;
-  z-index: 1000;
-  order: 0;
-  grid-column: 1/-1;
-}
-
-.comfyui-menu.dropzone {
-  background: var(--p-highlight-background);
-}
-
-.comfyui-menu.dropzone-active {
-  background: var(--p-highlight-background-focus);
-}
-
-:deep(.p-menubar-item-label) {
-  line-height: revert;
-}
-
-.comfyui-logo {
-  user-select: none;
-  cursor: default;
-  filter: invert(0);
-}
-
-.dark-theme .comfyui-logo {
-  filter: invert(1);
-}
-
-.comfyui-menu-button-hide {
-  background-color: var(--comfy-menu-secondary-bg);
-  border-left: 1px solid var(--border-color);
-}
-</style>
-
-<style>
-.comfyui-menu-right::-webkit-scrollbar {
-  max-height: 5px;
-}
-
-.comfyui-menu-right:hover::-webkit-scrollbar {
-  cursor: grab;
-}
-
-.comfyui-menu-right::-webkit-scrollbar-track {
-  background: color-mix(in srgb, var(--border-color) 60%, transparent);
-}
-
-.comfyui-menu-right:hover::-webkit-scrollbar-track {
-  background: color-mix(in srgb, var(--border-color) 80%, transparent);
-}
-
-.comfyui-menu-right::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--fg-color) 30%, transparent);
-}
-
-.comfyui-menu-right::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--fg-color) 80%, transparent);
-}
-</style>

src/components/topbar/WorkflowTabPopover.vue

@@ -1,19 +1,15 @@
 <template>
   <div
     ref="positionRef"
-    class="absolute left-1/2 -translate-x-1/2"
-    :class="positions.positioner"
+    class="absolute bottom-0 left-1/2 -translate-x-1/2"
   ></div>
   <Popover
     ref="popoverRef"
     append-to="body"
     :pt="{
       root: {
-        class: 'workflow-popover-fade fit-content ' + positions.root,
-        'data-popover-id': id,
-        style: {
-          transform: positions.active
-        }
+        class: 'workflow-popover-fade fit-content',
+        'data-popover-id': id
       }
     }"
     @mouseenter="cancelHidePopover"
@@ -39,9 +35,7 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
-import { computed, nextTick, ref, toRefs, useId } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
+import { nextTick, ref, toRefs, useId } from 'vue'
 
 const POPOVER_WIDTH = 250
 
@@ -53,29 +47,6 @@ interface Props {
 
 const props = defineProps<Props>()
 const { thumbnailUrl, isActiveTab } = toRefs(props)
-
-const settingStore = useSettingStore()
-const positions = computed<{
-  positioner: string
-  root?: string
-  active?: string
-}>(() => {
-  if (
-    settingStore.get('Comfy.Workflow.WorkflowTabsPosition') === 'Topbar' &&
-    settingStore.get('Comfy.UseNewMenu') === 'Bottom'
-  ) {
-    return {
-      positioner: 'top-0',
-      root: 'p-popover-flipped',
-      active: isActiveTab.value ? 'translateY(-100%)' : undefined
-    }
-  }
-
-  return {
-    positioner: 'bottom-0'
-  }
-})
-
 const popoverRef = ref<InstanceType<typeof Popover> | null>(null)
 const positionRef = ref<HTMLElement | null>(null)
 let hideTimeout: ReturnType<typeof setTimeout> | null = null
@@ -174,7 +145,7 @@ defineExpose({
 .workflow-preview-content {
   @apply flex flex-col rounded-xl overflow-hidden;
   max-width: var(--popover-width);
-  background-color: var(--comfy-menu-secondary-bg);
+  background-color: var(--comfy-menu-bg);
   color: var(--fg-color);
 }
 
@@ -184,11 +155,7 @@ defineExpose({
 
 .workflow-preview-thumbnail img {
   @apply shadow-md;
-  background-color: color-mix(
-    in srgb,
-    var(--comfy-menu-secondary-bg) 70%,
-    black
-  );
+  background-color: color-mix(in srgb, var(--comfy-menu-bg) 70%, black);
 }
 
 .dark-theme .workflow-preview-thumbnail img {

src/components/topbar/WorkflowTabs.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="containerRef"
     class="workflow-tabs-container flex h-full max-w-full flex-auto flex-row overflow-hidden"
     :class="{ 'workflow-tabs-container-desktop': isDesktop }"
   >
@@ -13,7 +14,6 @@
       @mousedown="whileMouseDown($event, () => scroll(-1))"
     />
     <ScrollPanel
-      ref="scrollPanelRef"
       class="no-drag overflow-hidden"
       :pt:content="{
         class: 'p-0 w-full flex',
@@ -63,10 +63,7 @@
       @click="() => commandStore.execute('Comfy.NewBlankWorkflow')"
     />
     <ContextMenu ref="menu" :model="contextMenuItems" />
-    <div
-      v-if="menuSetting !== 'Bottom' && isDesktop"
-      class="window-actions-spacer app-drag shrink-0"
-    />
+    <div v-if="isDesktop" class="window-actions-spacer app-drag shrink-0" />
   </div>
 </template>
 
@@ -77,11 +74,11 @@ import ContextMenu from 'primevue/contextmenu'
 import ScrollPanel from 'primevue/scrollpanel'
 import SelectButton from 'primevue/selectbutton'
 import { computed, nextTick, onUpdated, ref, watch } from 'vue'
+import type { WatchStopHandle } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import {
@@ -108,18 +105,16 @@ const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
 const workflowBookmarkStore = useWorkflowBookmarkStore()
-const settingStore = useSettingStore()
 const workflowService = useWorkflowService()
 
 const rightClickedTab = ref<WorkflowOption | undefined>()
 const menu = ref()
-const scrollPanelRef = ref()
+const containerRef = ref<HTMLElement | null>(null)
 const showOverflowArrows = ref(false)
 const leftArrowEnabled = ref(false)
 const rightArrowEnabled = ref(false)
 
 const isDesktop = isElectron()
-const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
 
 const workflowToOption = (workflow: ComfyWorkflow): WorkflowOption => ({
   value: workflow.path,
@@ -227,75 +222,98 @@ const handleWheel = (event: WheelEvent) => {
   })
 }
 
+const scrollContent = computed(
+  () =>
+    (containerRef.value?.querySelector(
+      '.p-scrollpanel-content'
+    ) as HTMLElement | null) ?? null
+)
+
 const scroll = (direction: number) => {
-  const scrollElement = scrollPanelRef.value.$el.querySelector(
-    '.p-scrollpanel-content'
-  ) as HTMLElement
-  scrollElement.scrollBy({ left: direction * 20 })
+  const el = scrollContent.value
+  if (!el) return
+  el.scrollBy({ left: direction * 20 })
+}
+
+const ensureActiveTabVisible = async (
+  options: { waitForDom?: boolean } = {}
+) => {
+  if (!selectedWorkflow.value) return
+
+  if (options.waitForDom !== false) {
+    await nextTick()
+  }
+
+  const containerElement = containerRef.value
+  if (!containerElement) return
+
+  const activeTabElement = containerElement.querySelector(
+    '.p-togglebutton-checked'
+  )
+  if (!activeTabElement) return
+
+  activeTabElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 
 // Scroll to active offscreen tab when opened
 watch(
   () => workflowStore.activeWorkflow,
-  async () => {
-    if (!selectedWorkflow.value) return
-
-    await nextTick()
-
-    const activeTabElement = document.querySelector('.p-togglebutton-checked')
-    if (!activeTabElement || !scrollPanelRef.value) return
-
-    const container = scrollPanelRef.value.$el.querySelector(
-      '.p-scrollpanel-content'
-    )
-    if (!container) return
-
-    const tabRect = activeTabElement.getBoundingClientRect()
-    const containerRect = container.getBoundingClientRect()
-
-    const offsetLeft = tabRect.left - containerRect.left
-    const offsetRight = tabRect.right - containerRect.right
-
-    if (offsetRight > 0) {
-      container.scrollBy({ left: offsetRight })
-    } else if (offsetLeft < 0) {
-      container.scrollBy({ left: offsetLeft })
-    }
+  () => {
+    void ensureActiveTabVisible()
   },
   { immediate: true }
 )
 
-const scrollContent = computed(
-  () =>
-    scrollPanelRef.value?.$el.querySelector(
-      '.p-scrollpanel-content'
-    ) as HTMLElement
-)
 let overflowObserver: ReturnType<typeof useOverflowObserver> | null = null
-let overflowWatch: ReturnType<typeof watch> | null = null
-watch(scrollContent, (value) => {
-  const scrollState = useScroll(value)
+let stopArrivedWatch: WatchStopHandle | null = null
+let stopOverflowWatch: WatchStopHandle | null = null
 
-  watch(scrollState.arrivedState, () => {
-    leftArrowEnabled.value = !scrollState.arrivedState.left
-    rightArrowEnabled.value = !scrollState.arrivedState.right
-  })
+watch(
+  scrollContent,
+  (el, _prev, onCleanup) => {
+    stopArrivedWatch?.()
+    stopOverflowWatch?.()
+    overflowObserver?.dispose()
 
-  overflowObserver?.dispose()
-  overflowWatch?.stop()
-  overflowObserver = useOverflowObserver(value)
-  overflowWatch = watch(
-    overflowObserver.isOverflowing,
-    (value) => {
-      showOverflowArrows.value = value
-      void nextTick(() => {
-        // Force a new check after arrows are updated
-        scrollState.measure()
-      })
-    },
-    { immediate: true }
-  )
-})
+    if (!el) return
+
+    const scrollState = useScroll(el)
+
+    stopArrivedWatch = watch(
+      [
+        () => scrollState.arrivedState.left,
+        () => scrollState.arrivedState.right
+      ],
+      ([atLeft, atRight]) => {
+        leftArrowEnabled.value = !atLeft
+        rightArrowEnabled.value = !atRight
+      },
+      { immediate: true }
+    )
+
+    overflowObserver = useOverflowObserver(el)
+    stopOverflowWatch = watch(
+      overflowObserver.isOverflowing,
+      (isOverflow) => {
+        showOverflowArrows.value = isOverflow
+        if (!isOverflow) return
+        void nextTick(() => {
+          // Force a new check after arrows are updated
+          scrollState.measure()
+          void ensureActiveTabVisible({ waitForDom: false })
+        })
+      },
+      { immediate: true }
+    )
+
+    onCleanup(() => {
+      stopArrivedWatch?.()
+      stopOverflowWatch?.()
+      overflowObserver?.dispose()
+    })
+  },
+  { immediate: true }
+)
 
 onUpdated(() => {
   if (!overflowObserver?.disposed.value) {
@@ -308,7 +326,7 @@ onUpdated(() => {
 @reference '../../assets/css/style.css';
 
 .workflow-tabs-container {
-  background-color: var(--comfy-menu-secondary-bg);
+  background-color: var(--comfy-menu-bg);
 }
 
 :deep(.p-togglebutton) {

src/composables/auth/useFirebaseAuthActions.ts

@@ -1,9 +1,12 @@
 import { FirebaseError } from 'firebase/app'
+import { AuthErrorCodes } from 'firebase/auth'
 import { ref } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { ErrorRecoveryStrategy } from '@/composables/useErrorHandling'
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { usdToMicros } from '@/utils/formatUtil'
 
@@ -122,6 +125,47 @@ export const useFirebaseAuthActions = () => {
     reportError
   )
 
+  /**
+   * Recovery strategy for Firebase auth/requires-recent-login errors.
+   * Prompts user to reauthenticate and retries the operation after successful login.
+   */
+  const createReauthenticationRecovery = <
+    TArgs extends unknown[],
+    TReturn
+  >(): ErrorRecoveryStrategy<TArgs, TReturn> => {
+    const dialogService = useDialogService()
+
+    return {
+      shouldHandle: (error: unknown) =>
+        error instanceof FirebaseError &&
+        error.code === AuthErrorCodes.CREDENTIAL_TOO_OLD_LOGIN_AGAIN,
+
+      recover: async (
+        _error: unknown,
+        retry: (...args: TArgs) => Promise<TReturn> | TReturn,
+        args: TArgs
+      ) => {
+        const confirmed = await dialogService.confirm({
+          title: t('auth.reauthRequired.title'),
+          message: t('auth.reauthRequired.message'),
+          type: 'default'
+        })
+
+        if (!confirmed) {
+          return
+        }
+
+        await authStore.logout()
+
+        const signedIn = await dialogService.showSignInDialog()
+
+        if (signedIn) {
+          await retry(...args)
+        }
+      }
+    }
+  }
+
   const updatePassword = wrapWithErrorHandlingAsync(
     async (newPassword: string) => {
       await authStore.updatePassword(newPassword)
@@ -132,18 +176,25 @@ export const useFirebaseAuthActions = () => {
         life: 5000
       })
     },
-    reportError
+    reportError,
+    undefined,
+    [createReauthenticationRecovery<[string], void>()]
   )
 
-  const deleteAccount = wrapWithErrorHandlingAsync(async () => {
-    await authStore.deleteAccount()
-    toastStore.add({
-      severity: 'success',
-      summary: t('auth.deleteAccount.success'),
-      detail: t('auth.deleteAccount.successDetail'),
-      life: 5000
-    })
-  }, reportError)
+  const deleteAccount = wrapWithErrorHandlingAsync(
+    async () => {
+      await authStore.deleteAccount()
+      toastStore.add({
+        severity: 'success',
+        summary: t('auth.deleteAccount.success'),
+        detail: t('auth.deleteAccount.successDetail'),
+        life: 5000
+      })
+    },
+    reportError,
+    undefined,
+    [createReauthenticationRecovery<[], void>()]
+  )
 
   return {
     logout,

src/composables/graph/useWidgetValue.ts

@@ -125,7 +125,7 @@ export function useNumberWidgetValue(
     transform: (value: number | number[]) => {
       // Handle PrimeVue Slider which can emit number | number[]
       if (Array.isArray(value)) {
-        return value.length > 0 ? value[0] ?? 0 : 0
+        return value.length > 0 ? (value[0] ?? 0) : 0
       }
       return Number(value) || 0
     }

src/composables/node/useNodeAnimatedImage.ts

@@ -1,8 +1,7 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IWidget } from '@/lib/litegraph/src/types/widgets'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { ANIM_PREVIEW_WIDGET } from '@/scripts/app'
-import { createImageHost } from '@/scripts/ui/imagePreview'
-import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'
+import { isDOMWidget } from '@/scripts/domWidget'
 
 /**
  * Composable for handling animated image previews in nodes
@@ -20,38 +19,38 @@ export function useNodeAnimatedImage() {
       (w) => w.name === ANIM_PREVIEW_WIDGET
     )
 
+    node.imgs[0].classList.value = 'block size-full object-contain'
     if (widgetIdx > -1) {
       // Replace content in existing widget
-      const widget = node.widgets[widgetIdx] as IWidget & {
-        options: { host: ReturnType<typeof createImageHost> }
-      }
-      widget.options.host.updateImages(node.imgs)
+      const widget = node.widgets[widgetIdx]
+      if (!isDOMWidget(widget)) return
+      widget.element.replaceChildren(node.imgs[0])
     } else {
       // Create new widget
-      const host = createImageHost(node)
-      // @ts-expect-error host is not a standard DOM widget option.
-      const widget = node.addDOMWidget(ANIM_PREVIEW_WIDGET, 'img', host.el, {
-        host,
-        // @ts-expect-error `getHeight` of image host returns void instead of number.
-        getHeight: host.getHeight,
-        onDraw: host.onDraw,
+      const element = document.createElement('div')
+      element.appendChild(node.imgs[0])
+      const widget = node.addDOMWidget(ANIM_PREVIEW_WIDGET, 'img', element, {
         hideOnZoom: false
-      }) as IWidget & {
-        options: { host: ReturnType<typeof createImageHost> }
-      }
+      })
+      node.overIndex = 0
+
+      // Add event listeners for canvas interactions
+      const { handleWheel, handlePointer, forwardEventToCanvas } =
+        useCanvasInteractions()
+      node.imgs[0].style.pointerEvents = 'none'
+      element.addEventListener('wheel', handleWheel)
+      element.addEventListener('pointermove', handlePointer)
+      element.addEventListener('pointerup', handlePointer)
+      element.addEventListener(
+        'pointerdown',
+        (e) => {
+          return e.button !== 2 ? handlePointer(e) : forwardEventToCanvas(e)
+        },
+        true
+      )
+
       widget.serialize = false
       widget.serializeValue = () => undefined
-      widget.options.host.updateImages(node.imgs)
-      widget.computeLayoutSize = () => {
-        const img = widget.options.host.getCurrentImage()
-        if (!img) return { minHeight: 0, minWidth: 0 }
-
-        return fitDimensionsToNodeWidth(
-          img.naturalWidth,
-          img.naturalHeight,
-          node.size?.[0] || 0
-        )
-      }
     }
   }
 

src/composables/node/useNodeBadge.ts

@@ -86,10 +86,10 @@ export const useNodeBadge = () => {
                   ? `#${node.id}`
                   : '',
                 badgeTextVisible(nodeDef, nodeLifeCycleBadgeMode.value)
-                  ? nodeDef?.nodeLifeCycleBadgeText ?? ''
+                  ? (nodeDef?.nodeLifeCycleBadgeText ?? '')
                   : '',
                 badgeTextVisible(nodeDef, nodeSourceBadgeMode.value)
-                  ? nodeDef?.nodeSource?.badgeText ?? ''
+                  ? (nodeDef?.nodeSource?.badgeText ?? '')
                   : ''
               ]
                 .filter((s) => s.length > 0)

src/composables/node/useNodePricing.ts

@@ -1647,7 +1647,7 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
             ? '720p'
             : resolutionStr.includes('480')
               ? '480p'
-              : resolutionStr.match(/^\s*(\d{3,4}p)/)?.[1] ?? ''
+              : (resolutionStr.match(/^\s*(\d{3,4}p)/)?.[1] ?? '')
 
         const pricePerSecond: Record<string, number> = {
           '480p': 0.05,

src/composables/useCoreCommands.ts

@@ -5,7 +5,11 @@ import {
   DEFAULT_DARK_COLOR_PALETTE,
   DEFAULT_LIGHT_COLOR_PALETTE
 } from '@/constants/coreColorPalettes'
-import { promoteRecommendedWidgets } from '@/core/graph/subgraph/proxyWidgetUtils'
+import {
+  promoteRecommendedWidgets,
+  tryToggleWidgetPromotion
+} from '@/core/graph/subgraph/proxyWidgetUtils'
+import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
 import { t } from '@/i18n'
 import {
   LGraphEventMode,
@@ -888,7 +892,7 @@ export function useCoreCommands(): ComfyCommand[] {
     },
     {
       id: 'Comfy.Graph.ConvertToSubgraph',
-      icon: 'pi pi-sitemap',
+      icon: 'icon-[lucide--shrink]',
       label: 'Convert Selection to Subgraph',
       versionAdded: '1.20.1',
       category: 'essentials' as const,
@@ -916,10 +920,9 @@ export function useCoreCommands(): ComfyCommand[] {
     },
     {
       id: 'Comfy.Graph.UnpackSubgraph',
-      icon: 'pi pi-sitemap',
+      icon: 'icon-[lucide--expand]',
       label: 'Unpack the selected Subgraph',
-      versionAdded: '1.20.1',
-      category: 'essentials' as const,
+      versionAdded: '1.26.3',
       function: () => {
         const canvas = canvasStore.getCanvas()
         const graph = canvas.subgraph ?? canvas.graph
@@ -931,6 +934,20 @@ export function useCoreCommands(): ComfyCommand[] {
         graph.unpackSubgraph(subgraphNode)
       }
     },
+    {
+      id: 'Comfy.Graph.EditSubgraphWidgets',
+      label: 'Edit Subgraph Widgets',
+      icon: 'icon-[lucide--settings-2]',
+      versionAdded: '1.28.5',
+      function: showSubgraphNodeDialog
+    },
+    {
+      id: 'Comfy.Graph.ToggleWidgetPromotion',
+      icon: 'icon-[lucide--arrow-left-right]',
+      label: 'Toggle promotion of hovered widget',
+      versionAdded: '1.30.1',
+      function: tryToggleWidgetPromotion
+    },
     {
       id: 'Comfy.OpenManagerDialog',
       icon: 'mdi mdi-puzzle-outline',

src/composables/useErrorHandling.ts

@@ -1,6 +1,54 @@
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 
+/**
+ * Strategy for recovering from specific error conditions.
+ * Allows operations to be retried after resolving the error condition.
+ *
+ * @template TArgs - The argument types of the operation to be retried
+ * @template TReturn - The return type of the operation
+ *
+ * @example
+ * ```typescript
+ * const networkRecovery: ErrorRecoveryStrategy = {
+ *   shouldHandle: (error) => error instanceof NetworkError,
+ *   recover: async (error, retry) => {
+ *     await waitForNetwork()
+ *     await retry()
+ *   }
+ * }
+ * ```
+ */
+export interface ErrorRecoveryStrategy<
+  TArgs extends unknown[] = unknown[],
+  TReturn = unknown
+> {
+  /**
+   * Determines if this strategy should handle the given error.
+   * @param error - The error to check
+   * @returns true if this strategy can handle the error
+   */
+  shouldHandle: (error: unknown) => boolean
+
+  /**
+   * Attempts to recover from the error and retry the operation.
+   * This function is responsible for:
+   * 1. Resolving the error condition (e.g., reauthentication, network reconnect)
+   * 2. Calling retry() to re-execute the original operation
+   * 3. Handling the retry result (success or failure)
+   *
+   * @param error - The error that occurred
+   * @param retry - Function to retry the original operation
+   * @param args - Original arguments passed to the operation
+   * @returns Promise that resolves when recovery completes (whether successful or not)
+   */
+  recover: (
+    error: unknown,
+    retry: (...args: TArgs) => Promise<TReturn> | TReturn,
+    args: TArgs
+  ) => Promise<void>
+}
+
 export function useErrorHandling() {
   const toast = useToastStore()
   const toastErrorHandler = (error: unknown) => {
@@ -13,9 +61,9 @@ export function useErrorHandling() {
   }
 
   const wrapWithErrorHandling =
-    <TArgs extends any[], TReturn>(
+    <TArgs extends unknown[], TReturn>(
       action: (...args: TArgs) => TReturn,
-      errorHandler?: (error: any) => void,
+      errorHandler?: (error: unknown) => void,
       finallyHandler?: () => void
     ) =>
     (...args: TArgs): TReturn | undefined => {
@@ -29,15 +77,27 @@ export function useErrorHandling() {
     }
 
   const wrapWithErrorHandlingAsync =
-    <TArgs extends any[], TReturn>(
+    <TArgs extends unknown[], TReturn>(
       action: (...args: TArgs) => Promise<TReturn> | TReturn,
-      errorHandler?: (error: any) => void,
-      finallyHandler?: () => void
+      errorHandler?: (error: unknown) => void,
+      finallyHandler?: () => void,
+      recoveryStrategies: ErrorRecoveryStrategy<TArgs, TReturn>[] = []
     ) =>
     async (...args: TArgs): Promise<TReturn | undefined> => {
       try {
         return await action(...args)
       } catch (e) {
+        for (const strategy of recoveryStrategies) {
+          if (strategy.shouldHandle(e)) {
+            try {
+              await strategy.recover(e, action, args)
+              return
+            } catch (recoveryError) {
+              console.error('Recovery strategy failed:', recoveryError)
+            }
+          }
+        }
+
         ;(errorHandler ?? toastErrorHandler)(e)
       } finally {
         finallyHandler?.()

src/core/graph/subgraph/proxyWidgetUtils.ts

@@ -1,11 +1,14 @@
 import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
 import type { ProxyWidgetsProperty } from '@/core/schemas/proxyWidget'
+import { t } from '@/i18n'
 import type {
   IContextMenuValue,
   LGraphNode
 } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets.ts'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 
@@ -63,7 +66,15 @@ function getParentNodes(): SubgraphNode[] {
   //or by adding a new event for parent listeners to collect from
   const { navigationStack } = useSubgraphNavigationStore()
   const subgraph = navigationStack.at(-1)
-  if (!subgraph) throw new Error("Can't promote widget when not in subgraph")
+  if (!subgraph) {
+    useToastStore().add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: t('subgraphStore.promoteOutsideSubgraph'),
+      life: 2000
+    })
+    return []
+  }
   const parentGraph = navigationStack.at(-2) ?? subgraph.rootGraph
   return parentGraph.nodes.filter(
     (node): node is SubgraphNode =>
@@ -96,6 +107,21 @@ export function addWidgetPromotionOptions(
     })
   }
 }
+export function tryToggleWidgetPromotion() {
+  const canvas = useCanvasStore().getCanvas()
+  const [x, y] = canvas.graph_mouse
+  const node = canvas.graph?.getNodeOnPos(x, y, canvas.visible_nodes)
+  if (!node) return
+  const widget = node.getWidgetOnPos(x, y, true)
+  const parents = getParentNodes()
+  if (!parents.length || !widget) return
+  const promotableParents = parents.filter(
+    (s) => !getProxyWidgets(s).some(matchesPropertyItem([node, widget]))
+  )
+  if (promotableParents.length > 0)
+    promoteWidget(node, widget, promotableParents)
+  else demoteWidget(node, widget, parents)
+}
 const recommendedNodes = [
   'CLIPTextEncode',
   'LoadImage',

src/extensions/core/cloudBadge.ts

@@ -1,16 +1,12 @@
 import { t } from '@/i18n'
-import { isCloud } from '@/platform/distribution/types'
 import { useExtensionService } from '@/services/extensionService'
 
 useExtensionService().registerExtension({
   name: 'Comfy.CloudBadge',
-  // Only show badge when running in cloud environment
-  topbarBadges: isCloud
-    ? [
-        {
-          label: t('g.beta'),
-          text: 'Comfy Cloud'
-        }
-      ]
-    : undefined
+  topbarBadges: [
+    {
+      label: t('g.beta'),
+      text: 'Comfy Cloud'
+    }
+  ]
 })

src/extensions/core/groupNode.ts

@@ -542,7 +542,7 @@ export class GroupNodeConfig {
         primitiveConfig
       )
       primitiveConfig[1] =
-        config?.customConfig ?? inputs[inputName][1]
+        (config?.customConfig ?? inputs[inputName][1])
           ? { ...inputs[inputName][1] }
           : {}