improve type guard

> "The watcher that should keep the active workflow tab visible compares
the tab’s bounds against the scroll panel’s content element, whose
rectangle spans the entire scroll width instead of the visible viewport.
As a result, when the active tab starts off-screen, the computed offsets
stay ≤ 0 and no corrective scroll occurs, so the selected tab remains
hidden."

fixes #6057

------
https://chatgpt.com/codex/tasks/task_e_68efe2b5b4a08330940a20552c1db339

.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

@@ -0,0 +1,21 @@
+# GitHub Workflows
+
+## Naming Convention
+
+Workflow files follow a consistent naming pattern: `<prefix>-<descriptive-name>.yaml`
+
+### Category Prefixes
+
+| 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`              |
+
+## 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 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).

.github/workflows/api-update-electron-api-types.yaml

@@ -1,4 +1,5 @@
-name: Update Electron Types
+name: 'Api: Update Electron API Types'
+description: 'When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   workflow_dispatch:

.github/workflows/api-update-manager-api-types.yaml

@@ -1,4 +1,5 @@
-name: Update ComfyUI-Manager API Types
+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'
 
 on:
   # Manual trigger

.github/workflows/api-update-registry-api-types.yaml

@@ -1,4 +1,5 @@
-name: Update Comfy Registry API Types
+name: 'Api: Update Registry API Types'
+description: 'When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   # Manual trigger

.github/workflows/ci-json-validation.yaml

@@ -1,4 +1,5 @@
-name: Validate JSON
+name: "CI: JSON Validation"
+description: "Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq"
 
 on:
   push:

.github/workflows/ci-lint-format.yaml

@@ -1,4 +1,5 @@
-name: Lint and Format
+name: "CI: Lint Format"
+description: "Linting and code formatting validation for pull requests"
 
 on:
   pull_request:

.github/workflows/ci-python-validation.yaml

@@ -1,4 +1,5 @@
-name: Devtools Python Check
+name: "CI: Python Validation"
+description: "Validates Python code in tools/devtools directory"
 
 on:
   pull_request:

.github/workflows/ci-tests-e2e-forks.yaml

@@ -1,8 +1,9 @@
-name: PR Playwright Deploy (Forks)
+name: "CI: Tests E2E (Deploy for Forks)"
+description: "Deploys test results from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:
-    workflows: ["Tests CI"]
+    workflows: ["CI: Tests E2E"]
     types: [requested, completed]
 
 env:

.github/workflows/ci-tests-e2e.yaml

@@ -1,4 +1,5 @@
-name: Tests CI
+name: "CI: Tests E2E"
+description: "End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages"
 
 on:
   push:

.github/workflows/ci-tests-storybook-forks.yaml

@@ -1,8 +1,9 @@
-name: PR Storybook Deploy (Forks)
+name: "CI: Tests Storybook (Deploy for Forks)"
+description: "Deploys Storybook previews from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:
-    workflows: ['Storybook and Chromatic CI']
+    workflows: ["CI: Tests Storybook"]
     types: [requested, completed]
 
 env:

.github/workflows/ci-tests-storybook.yaml

@@ -1,6 +1,5 @@
-name: Storybook and Chromatic CI
-
-# - [Automate Chromatic with GitHub Actions • Chromatic docs]( https://www.chromatic.com/docs/github-actions/ )
+name: "CI: Tests Storybook"
+description: "Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages"
 
 on:
   workflow_dispatch: # Allow manual triggering

.github/workflows/ci-tests-unit.yaml

@@ -1,4 +1,5 @@
-name: Vitest Tests
+name: "CI: Tests Unit"
+description: "Unit and component testing with Vitest"
 
 on:
   push:

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

@@ -1,4 +1,5 @@
-name: Update Locales
+name: "i18n: Update Core"
+description: "Generates and updates translations for core ComfyUI components using OpenAI"
 
 on:
   # Manual dispatch for urgent translation updates  
@@ -18,14 +19,14 @@ jobs:
       uses: actions/checkout@v5
 
     # Setup playwright environment
-    - name: Setup ComfyUI Server
-      uses: ./.github/actions/setup-comfyui-server
-      with:
-        launch_server: true
     - name: Setup ComfyUI Frontend
       uses: ./.github/actions/setup-frontend
       with:
         include_build_step: true
+    - name: Setup ComfyUI Server
+      uses: ./.github/actions/setup-comfyui-server
+      with:
+        launch_server: true
     - name: Setup Playwright
       uses: ./.github/actions/setup-playwright
 
@@ -54,5 +55,5 @@ jobs:
         # Apply the stashed changes if any
         git stash pop || true
         git add src/locales/
-        git diff --staged --quiet || git commit -m "Update locales [skip ci]"
+        git diff --staged --quiet || git commit -m "Update locales"
         git push origin HEAD:${{ github.head_ref }}

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

@@ -1,4 +1,4 @@
-name: Update Locales for given custom node repository
+name: i18n Update Custom Nodes
 
 on:
   workflow_dispatch:

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

@@ -1,4 +1,4 @@
-name: Update Node Definitions Locales
+name: i18n Update Nodes
 
 on:
   workflow_dispatch:

.github/workflows/pr-backport.yaml

@@ -1,4 +1,4 @@
-name: Auto Backport
+name: PR Backport
 
 on:
   pull_request_target:

.github/workflows/pr-claude-review.yaml

@@ -1,4 +1,5 @@
-name: Claude PR Review
+name: "PR: Claude Review"
+description: "AI-powered code review triggered by adding the 'claude-review' label to a PR"
 
 permissions:
   contents: read

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

@@ -1,5 +1,5 @@
 # Setting test expectation screenshots for Playwright
-name: Update Playwright Expectations
+name: "PR: Update Playwright Expectations"
 
 on:
   pull_request:

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

@@ -1,4 +1,4 @@
-name: Create Release Branch
+name: Release Branch Create
 
 on:
   pull_request:

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

@@ -1,4 +1,4 @@
-name: Create Release Draft
+name: Release Draft Create
 
 on:
   pull_request:
@@ -126,7 +126,7 @@ jobs:
 
   publish_types:
     needs: build
-    uses: ./.github/workflows/publish-frontend-types.yaml
+    uses: ./.github/workflows/release-npm-types.yaml
     with:
       version: ${{ needs.build.outputs.version }}
       ref: ${{ github.event.pull_request.merge_commit_sha }}

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

@@ -1,4 +1,4 @@
-name: Publish Frontend Types
+name: Release NPM Types
 
 on:
   workflow_dispatch:

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

@@ -1,4 +1,4 @@
-name: Create Dev PyPI Package
+name: Release PyPI Dev
 
 on:
   workflow_dispatch:

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

@@ -1,4 +1,5 @@
-name: Version Bump
+name: "Release: Version Bump"
+description: "Manual workflow to increment package version with semantic versioning support"
 
 on:
   workflow_dispatch:

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

@@ -1,6 +1,5 @@
 import type { APIRequestContext, Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-import { test as base } from '@playwright/test'
+import { test as base, expect } from '@playwright/test'
 import dotenv from 'dotenv'
 import * as fs from 'fs'
 
@@ -47,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
@@ -130,7 +133,8 @@ export class ComfyPage {
 
   // Buttons
   public readonly resetViewButton: Locator
-  public readonly queueButton: Locator
+  public readonly queueButton: Locator // Run button in Legacy UI
+  public readonly runButton: Locator // Run button (renamed "Queue" -> "Run")
 
   // Inputs
   public readonly workflowUploadInput: Locator
@@ -165,6 +169,9 @@ export class ComfyPage {
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
+    this.runButton = page
+      .getByTestId('queue-button')
+      .getByRole('button', { name: 'Run' })
     this.workflowUploadInput = page.locator('#comfy-file-input')
     this.visibleToasts = page.locator('.p-toast-message:visible')
 
@@ -1086,12 +1093,6 @@ export class ComfyPage {
 
     const targetPosition = await targetSlot.getPosition()
 
-    // Debug: Log the positions we're trying to use
-    console.log('Drag positions:', {
-      source: sourcePosition,
-      target: targetPosition
-    })
-
     await this.dragAndDrop(sourcePosition, targetPosition)
     await this.nextFrame()
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -3,6 +3,8 @@
  */
 import type { Locator, Page } from '@playwright/test'
 
+import { VueNodeFixture } from './utils/vueNodeFixtures'
+
 export class VueNodeHelpers {
   constructor(private page: Page) {}
 
@@ -106,6 +108,24 @@ export class VueNodeHelpers {
     await this.page.keyboard.press('Backspace')
   }
 
+  /**
+   * Return a DOM-focused VueNodeFixture for the first node matching the title.
+   * Resolves the node id up front so subsequent interactions survive title changes.
+   */
+  async getFixtureByTitle(title: string): Promise<VueNodeFixture> {
+    const node = this.getNodeByTitle(title).first()
+    await node.waitFor({ state: 'visible' })
+
+    const nodeId = await node.evaluate((el) => el.getAttribute('data-node-id'))
+    if (!nodeId) {
+      throw new Error(
+        `Vue node titled "${title}" is missing its data-node-id attribute`
+      )
+    }
+
+    return new VueNodeFixture(this.getNodeLocator(nodeId))
+  }
+
   /**
    * Wait for Vue nodes to be rendered
    */

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/fixtures/utils/vueNodeFixtures.ts

@@ -1,131 +1,66 @@
-import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
 
-import type { NodeReference } from './litegraphUtils'
-
-/**
- * VueNodeFixture provides Vue-specific testing utilities for interacting with
- * Vue node components. It bridges the gap between litegraph node references
- * and Vue UI components.
- */
+/** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
-  constructor(
-    private readonly nodeRef: NodeReference,
-    private readonly page: Page
-  ) {}
+  constructor(private readonly locator: Locator) {}
 
-  /**
-   * Get the node's header element using data-testid
-   */
-  async getHeader(): Promise<Locator> {
-    const nodeId = this.nodeRef.id
-    return this.page.locator(`[data-testid="node-header-${nodeId}"]`)
+  get header(): Locator {
+    return this.locator.locator('[data-testid^="node-header-"]')
   }
 
-  /**
-   * Get the node's title element
-   */
-  async getTitleElement(): Promise<Locator> {
-    const header = await this.getHeader()
-    return header.locator('[data-testid="node-title"]')
+  get title(): Locator {
+    return this.locator.locator('[data-testid="node-title"]')
+  }
+
+  get titleInput(): Locator {
+    return this.locator.locator('[data-testid="node-title-input"]')
+  }
+
+  get body(): Locator {
+    return this.locator.locator('[data-testid^="node-body-"]')
+  }
+
+  get collapseButton(): Locator {
+    return this.locator.locator('[data-testid="node-collapse-button"]')
+  }
+
+  get collapseIcon(): Locator {
+    return this.collapseButton.locator('i')
+  }
+
+  get root(): Locator {
+    return this.locator
   }
 
-  /**
-   * Get the current title text
-   */
   async getTitle(): Promise<string> {
-    const titleElement = await this.getTitleElement()
-    return (await titleElement.textContent()) || ''
+    return (await this.title.textContent()) ?? ''
   }
 
-  /**
-   * Set a new title by double-clicking and entering text
-   */
-  async setTitle(newTitle: string): Promise<void> {
-    const titleElement = await this.getTitleElement()
-    await titleElement.dblclick()
-
-    const input = (await this.getHeader()).locator(
-      '[data-testid="node-title-input"]'
-    )
-    await input.fill(newTitle)
+  async setTitle(value: string): Promise<void> {
+    await this.header.dblclick()
+    const input = this.titleInput
+    await expect(input).toBeVisible()
+    await input.fill(value)
     await input.press('Enter')
   }
 
-  /**
-   * Cancel title editing
-   */
   async cancelTitleEdit(): Promise<void> {
-    const titleElement = await this.getTitleElement()
-    await titleElement.dblclick()
-
-    const input = (await this.getHeader()).locator(
-      '[data-testid="node-title-input"]'
-    )
+    await this.header.dblclick()
+    const input = this.titleInput
+    await expect(input).toBeVisible()
     await input.press('Escape')
   }
 
-  /**
-   * Check if the title is currently being edited
-   */
-  async isEditingTitle(): Promise<boolean> {
-    const header = await this.getHeader()
-    const input = header.locator('[data-testid="node-title-input"]')
-    return await input.isVisible()
-  }
-
-  /**
-   * Get the collapse/expand button
-   */
-  async getCollapseButton(): Promise<Locator> {
-    const header = await this.getHeader()
-    return header.locator('[data-testid="node-collapse-button"]')
-  }
-
-  /**
-   * Toggle the node's collapsed state
-   */
   async toggleCollapse(): Promise<void> {
-    const button = await this.getCollapseButton()
-    await button.click()
+    await this.collapseButton.click()
   }
 
-  /**
-   * Get the collapse icon element
-   */
-  async getCollapseIcon(): Promise<Locator> {
-    const button = await this.getCollapseButton()
-    return button.locator('i')
-  }
-
-  /**
-   * Get the collapse icon's CSS classes
-   */
   async getCollapseIconClass(): Promise<string> {
-    const icon = await this.getCollapseIcon()
-    return (await icon.getAttribute('class')) || ''
+    return (await this.collapseIcon.getAttribute('class')) ?? ''
   }
 
-  /**
-   * Check if the collapse button is visible
-   */
-  async isCollapseButtonVisible(): Promise<boolean> {
-    const button = await this.getCollapseButton()
-    return await button.isVisible()
-  }
-
-  /**
-   * Get the node's body/content element
-   */
-  async getBody(): Promise<Locator> {
-    const nodeId = this.nodeRef.id
-    return this.page.locator(`[data-testid="node-body-${nodeId}"]`)
-  }
-
-  /**
-   * Check if the node body is visible (not collapsed)
-   */
-  async isBodyVisible(): Promise<boolean> {
-    const body = await this.getBody()
-    return await body.isVisible()
+  boundingBox(): ReturnType<Locator['boundingBox']> {
+    return this.locator.boundingBox()
   }
 }

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/graphCanvasMenu.spec.ts

@@ -39,15 +39,15 @@ test.describe('Graph Canvas Menu', () => {
     )
   })
 
-  test('Focus mode button is clickable and has correct test id', async ({
+  test('Toggle minimap button is clickable and has correct test id', async ({
     comfyPage
   }) => {
-    const focusButton = comfyPage.page.getByTestId('focus-mode-button')
-    await expect(focusButton).toBeVisible()
-    await expect(focusButton).toBeEnabled()
+    const minimapButton = comfyPage.page.getByTestId('toggle-minimap-button')
+    await expect(minimapButton).toBeVisible()
+    await expect(minimapButton).toBeEnabled()
 
     // Test that the button can be clicked without error
-    await focusButton.click()
+    await minimapButton.click()
     await comfyPage.nextFrame()
   })
 

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

@@ -3,10 +3,10 @@ import { expect } from '@playwright/test'
 import type { Position } from '@vueuse/core'
 
 import {
-  type ComfyPage,
   comfyPageFixture as test,
   testComfySnapToGridGridSize
 } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
@@ -786,24 +786,25 @@ test.describe('Viewport settings', () => {
     // Screenshot the canvas element
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
 
-    // Open zoom controls dropdown first
-    const zoomControlsButton = comfyPage.page.getByTestId(
-      'zoom-controls-button'
-    )
-    await zoomControlsButton.click()
-
     const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
     await toggleButton.click()
-    // close zoom menu
-    await zoomControlsButton.click()
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
 
     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)
@@ -815,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/minimap.spec.ts

@@ -35,12 +35,6 @@ test.describe('Minimap', () => {
   })
 
   test('Validate minimap toggle button state', async ({ comfyPage }) => {
-    // Open zoom controls dropdown first
-    const zoomControlsButton = comfyPage.page.getByTestId(
-      'zoom-controls-button'
-    )
-    await zoomControlsButton.click()
-
     const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
 
     await expect(toggleButton).toBeVisible()
@@ -51,13 +45,6 @@ test.describe('Minimap', () => {
 
   test('Validate minimap can be toggled off and on', async ({ comfyPage }) => {
     const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
-
-    // Open zoom controls dropdown first
-    const zoomControlsButton = comfyPage.page.getByTestId(
-      'zoom-controls-button'
-    )
-    await zoomControlsButton.click()
-
     const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
 
     await expect(minimapContainer).toBeVisible()
@@ -67,22 +54,10 @@ test.describe('Minimap', () => {
 
     await expect(minimapContainer).not.toBeVisible()
 
-    // Open zoom controls dropdown again
-    await zoomControlsButton.click()
-    await comfyPage.nextFrame()
-
-    await expect(toggleButton).toContainText('Show Minimap')
-
     await toggleButton.click()
     await comfyPage.nextFrame()
 
     await expect(minimapContainer).toBeVisible()
-
-    // Open zoom controls dropdown again to verify button text
-    await zoomControlsButton.click()
-    await comfyPage.nextFrame()
-
-    await expect(toggleButton).toContainText('Hide Minimap')
   })
 
   test('Validate minimap keyboard shortcut Alt+M', async ({ comfyPage }) => {

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -60,7 +60,6 @@ async function getInputLinkDetails(
   )
 }
 
-// Test helpers to reduce repetition across cases
 function slotLocator(
   page: Page,
   nodeId: NodeId,
@@ -789,6 +788,45 @@ test.describe('Vue Node Link Interaction', () => {
     })
   })
 
+  test('should batch disconnect all links with ctrl+alt+click on slot', async ({
+    comfyPage
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 1 },
+      () => comfyPage.nextFrame()
+    )
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 2 },
+      () => comfyPage.nextFrame()
+    )
+
+    const clipOutput = await clipNode.getOutput(0)
+    expect(await clipOutput.getLinkCount()).toBe(2)
+
+    const clipOutputSlot = slotLocator(comfyPage.page, clipNode.id, 0, false)
+
+    await clipOutputSlot.dispatchEvent('pointerdown', {
+      button: 0,
+      buttons: 1,
+      ctrlKey: true,
+      altKey: true,
+      shiftKey: false,
+      bubbles: true,
+      cancelable: true
+    })
+    await comfyPage.nextFrame()
+
+    expect(await clipOutput.getLinkCount()).toBe(0)
+  })
+
   test.describe('Release actions (Shift-drop)', () => {
     test('Context menu opens and endpoint is pinned on Shift-drop', async ({
       comfyPage,

browser_tests/tests/vueNodes/interactions/node/rename.spec.ts

@@ -2,70 +2,46 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
-import { VueNodeFixture } from '../../../../fixtures/utils/vueNodeFixtures'
 
 test.describe('Vue Nodes Renaming', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.setup()
+    await comfyPage.vueNodes.waitForNodes()
   })
 
   test('should display node title', async ({ comfyPage }) => {
-    // Get the KSampler node from the default workflow
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    expect(nodes.length).toBeGreaterThanOrEqual(1)
-
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
-    const title = await vueNode.getTitle()
-    expect(title).toBe('KSampler')
-
-    // Verify title is visible in the header
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('KSampler')
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await expect(vueNode.header).toContainText('KSampler')
   })
 
   test('should allow title renaming by double clicking on the node header', async ({
     comfyPage
   }) => {
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
     // Test renaming with Enter
     await vueNode.setTitle('My Custom Sampler')
-    const newTitle = await vueNode.getTitle()
-    expect(newTitle).toBe('My Custom Sampler')
-
-    // Verify the title is displayed
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('My Custom Sampler')
+    await expect(await vueNode.getTitle()).toBe('My Custom Sampler')
+    await expect(vueNode.header).toContainText('My Custom Sampler')
 
     // Test cancel with Escape
-    const titleElement = await vueNode.getTitleElement()
-    await titleElement.dblclick()
+    await vueNode.title.dblclick()
     await comfyPage.nextFrame()
-
-    // Type a different value but cancel
-    const input = (await vueNode.getHeader()).locator(
-      '[data-testid="node-title-input"]'
-    )
-    await input.fill('This Should Be Cancelled')
-    await input.press('Escape')
+    await vueNode.titleInput.fill('This Should Be Cancelled')
+    await vueNode.titleInput.press('Escape')
     await comfyPage.nextFrame()
 
     // Title should remain as the previously saved value
-    const titleAfterCancel = await vueNode.getTitle()
-    expect(titleAfterCancel).toBe('My Custom Sampler')
+    await expect(await vueNode.getTitle()).toBe('My Custom Sampler')
   })
 
   test('Double click node body does not trigger edit', async ({
     comfyPage
   }) => {
-    const loadCheckpointNode =
-      comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const loadCheckpointNode = comfyPage.vueNodes
+      .getNodeByTitle('Load Checkpoint')
+      .first()
     const nodeBbox = await loadCheckpointNode.boundingBox()
     if (!nodeBbox) throw new Error('Node not found')
     await loadCheckpointNode.dblclick()

browser_tests/tests/vueNodes/interactions/node/select.spec.ts

@@ -50,15 +50,23 @@ test.describe('Vue Node Selection', () => {
     })
   }
 
+  test('should select all nodes with ctrl+a', async ({ comfyPage }) => {
+    const initialCount = await comfyPage.vueNodes.getNodeCount()
+    expect(initialCount).toBeGreaterThan(0)
+
+    await comfyPage.canvas.press('Control+a')
+
+    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
+    expect(selectedCount).toBe(initialCount)
+  })
+
   test('should select pinned node without dragging', async ({ comfyPage }) => {
     const PIN_HOTKEY = 'p'
     const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
 
-    // Select a node by clicking its title
     const checkpointNodeHeader = comfyPage.page.getByText('Load Checkpoint')
     await checkpointNodeHeader.click()
 
-    // Pin it using the hotkey (as a user would)
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')

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

@@ -20,6 +20,9 @@ test.describe('Vue Node Bypass', () => {
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
     await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-bypassed-state.png'
+    )
 
     await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
     await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)

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

@@ -2,7 +2,6 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
-import { VueNodeFixture } from '../../../fixtures/utils/vueNodeFixtures'
 
 test.describe('Vue Node Collapse', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -10,43 +9,50 @@ test.describe('Vue Node Collapse', () => {
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.setup()
+    await comfyPage.vueNodes.waitForNodes()
   })
 
   test('should allow collapsing node with collapse icon', async ({
     comfyPage
   }) => {
-    // Get the KSampler node from the default workflow
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await expect(vueNode.root).toBeVisible()
 
     // Initially should not be collapsed
-    expect(await node.isCollapsed()).toBe(false)
-    const body = await vueNode.getBody()
+    const body = vueNode.body
     await expect(body).toBeVisible()
+    const expandedBoundingBox = await vueNode.boundingBox()
+    if (!expandedBoundingBox)
+      throw new Error('Failed to get node bounding box before collapse')
 
     // Collapse the node
     await vueNode.toggleCollapse()
-    expect(await node.isCollapsed()).toBe(true)
+    await comfyPage.nextFrame()
 
     // Verify node content is hidden
-    const collapsedSize = await node.getSize()
     await expect(body).not.toBeVisible()
+    const collapsedBoundingBox = await vueNode.boundingBox()
+    if (!collapsedBoundingBox)
+      throw new Error('Failed to get node bounding box after collapse')
+    expect(collapsedBoundingBox.height).toBeLessThan(expandedBoundingBox.height)
 
     // Expand again
     await vueNode.toggleCollapse()
-    expect(await node.isCollapsed()).toBe(false)
+    await comfyPage.nextFrame()
     await expect(body).toBeVisible()
 
     // Size should be restored
-    const expandedSize = await node.getSize()
-    expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
+    const expandedBoundingBoxAfter = await vueNode.boundingBox()
+    if (!expandedBoundingBoxAfter)
+      throw new Error('Failed to get node bounding box after expand')
+    expect(expandedBoundingBoxAfter.height).toBeGreaterThanOrEqual(
+      collapsedBoundingBox.height
+    )
   })
 
   test('should show collapse/expand icon state', async ({ comfyPage }) => {
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await expect(vueNode.root).toBeVisible()
 
     // Check initial expanded state icon
     let iconClass = await vueNode.getCollapseIconClass()
@@ -66,9 +72,8 @@ test.describe('Vue Node Collapse', () => {
   test('should preserve title when collapsing/expanding', async ({
     comfyPage
   }) => {
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await expect(vueNode.root).toBeVisible()
 
     // Set custom title
     await vueNode.setTitle('Test Sampler')
@@ -83,7 +88,6 @@ test.describe('Vue Node Collapse', () => {
     expect(await vueNode.getTitle()).toBe('Test Sampler')
 
     // Verify title is still displayed
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('Test Sampler')
+    await expect(vueNode.header).toContainText('Test Sampler')
   })
 })

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

@@ -3,7 +3,7 @@ import {
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
 
-const ERROR_CLASS = /border-error/
+const ERROR_CLASS = /border-node-stroke-error/
 
 test.describe('Vue Node Error', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -17,16 +17,21 @@ test.describe('Vue Node Error', () => {
     await comfyPage.setup()
     await comfyPage.loadWorkflow('missing/missing_nodes')
 
-    // Close missing nodes warning dialog
-    await comfyPage.page.getByRole('button', { name: 'Close' }).click()
-    await comfyPage.page.waitForSelector('.comfy-missing-nodes', {
-      state: 'hidden'
-    })
-
     // Expect error state on missing unknown node
     const unknownNode = comfyPage.page.locator('[data-node-id]').filter({
       hasText: 'UNKNOWN NODE'
     })
     await expect(unknownNode).toHaveClass(ERROR_CLASS)
   })
+
+  test('should display error state when node causes execution error', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('nodes/execution_error')
+    await comfyPage.runButton.click()
+
+    const raiseErrorNode = comfyPage.vueNodes.getNodeByTitle('Raise Error')
+    await expect(raiseErrorNode).toHaveClass(ERROR_CLASS)
+  })
 })

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

@@ -4,7 +4,7 @@ import {
 } from '../../../fixtures/ComfyPage'
 
 const MUTE_HOTKEY = 'Control+m'
-const MUTE_CLASS = /opacity-50/
+const MUTE_OPACITY = '0.5'
 
 test.describe('Vue Node Mute', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -19,10 +19,11 @@ test.describe('Vue Node Mute', () => {
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-muted-state.png')
 
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
   })
 
   test('should allow toggling mute on multiple selected nodes with hotkey', async ({
@@ -35,11 +36,11 @@ test.describe('Vue Node Mute', () => {
     const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
 
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
-    await expect(ksamplerNode).toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
+    await expect(ksamplerNode).toHaveCSS('opacity', MUTE_OPACITY)
 
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
-    await expect(ksamplerNode).not.toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
+    await expect(ksamplerNode).not.toHaveCSS('opacity', MUTE_OPACITY)
   })
 })

browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts

@@ -0,0 +1,51 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+test.describe('Vue Widget Reactivity', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+  test('Should display added widgets', async ({ comfyPage }) => {
+    const loadCheckpointNode = comfyPage.page.locator(
+      'css=[data-testid="node-body-4"] > .lg-node-widgets > div'
+    )
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['4']
+      node.widgets.push(node.widgets[0])
+    })
+    await expect(loadCheckpointNode).toHaveCount(2)
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['4']
+      node.widgets[2] = node.widgets[0]
+    })
+    await expect(loadCheckpointNode).toHaveCount(3)
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['4']
+      node.widgets.splice(0, 0, node.widgets[0])
+    })
+    await expect(loadCheckpointNode).toHaveCount(4)
+  })
+  test('Should hide removed widgets', async ({ comfyPage }) => {
+    const loadCheckpointNode = comfyPage.page.locator(
+      'css=[data-testid="node-body-3"] > .lg-node-widgets > div'
+    )
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['3']
+      node.widgets.pop()
+    })
+    await expect(loadCheckpointNode).toHaveCount(5)
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['3']
+      node.widgets.length--
+    })
+    await expect(loadCheckpointNode).toHaveCount(4)
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['3']
+      node.widgets.splice(0, 1)
+    })
+    await expect(loadCheckpointNode).toHaveCount(3)
+  })
+})

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'
           ]
         }
       }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.29.1",
+  "version": "1.30.0",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -11,6 +11,7 @@
     "build:desktop": "nx build @comfyorg/desktop-ui",
     "build-storybook": "storybook build",
     "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",
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
@@ -88,6 +89,7 @@
     "nx": "catalog:",
     "postcss-html": "catalog:",
     "prettier": "catalog:",
+    "rollup-plugin-visualizer": "catalog:",
     "storybook": "catalog:",
     "stylelint": "catalog:",
     "tailwindcss": "catalog:",

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

@@ -24,11 +24,14 @@
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 
+  /* Spacing */
+  --spacing-xs: 8px;
+
   /* Font Families */
   --font-inter: 'Inter', sans-serif;
 
   /* Palette Colors */
-  --color-charcoal-100: #55565e;
+  --color-charcoal-100: #171718;
   --color-charcoal-200: #494a50;
   --color-charcoal-300: #3c3d42;
   --color-charcoal-400: #313235;
@@ -60,6 +63,7 @@
   --color-sand-200: #d6cfc2;
   --color-sand-300: #888682;
 
+  --color-pure-black: #000000;
   --color-pure-white: #ffffff;
 
   --color-slate-100: #9c9eab;
@@ -85,10 +89,29 @@
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
+  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
+  --text-xxxs: 0.5625rem;
+  --text-xxxs--line-height: calc(1 / 0.5625);
+
   --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
   --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
   --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
+  --color-alpha-charcoal-600-30: color-mix(
+    in srgb,
+    var(--color-charcoal-600) 30%,
+    transparent
+  );
+  --color-alpha-stone-100-20: color-mix(
+    in srgb,
+    var(--color-stone-100) 20%,
+    transparent
+  );
+  --color-alpha-gray-500-50: color-mix(
+    in srgb,
+    var(--color-gray-500) 50%,
+    transparent
+  );
 
   /* PrimeVue pulled colors */
   --color-muted: var(--p-text-muted-color);
@@ -122,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);
@@ -129,9 +155,20 @@
 
   /* --- */
 
+  --accent-primary: var(--color-charcoal-700);
   --backdrop: var(--color-white);
+  --button-hover-surface: var(--color-gray-200);
+  --button-active-surface: var(--color-gray-400);
   --dialog-surface: var(--color-neutral-200);
+  --interface-menu-component-surface-hovered: var(--color-gray-200);
+  --interface-menu-component-surface-selected: var(--color-gray-400);
+  --interface-menu-keybind-surface-default: var(--color-gray-500);
+  --interface-panel-surface: var(--color-pure-white);
+  --interface-stroke: var(--color-gray-300);
+  --nav-background: var(--color-pure-white);
+  --node-border: var(--color-gray-300);
   --node-component-border: var(--color-gray-400);
+  --node-component-disabled: var(--color-alpha-stone-100-20);
   --node-component-executing: var(--color-blue-500);
   --node-component-header: var(--fg-color);
   --node-component-header-icon: var(--color-stone-200);
@@ -143,7 +180,7 @@
   --node-component-slot-dot-outline: var(--color-black);
   --node-component-slot-text: var(--color-stone-200);
   --node-component-surface-highlight: var(--color-stone-100);
-  --node-component-surface-hovered: var(--color-charcoal-400);
+  --node-component-surface-hovered: var(--color-gray-200);
   --node-component-surface-selected: var(--color-charcoal-200);
   --node-component-surface: var(--color-white);
   --node-component-tooltip: var(--color-charcoal-700);
@@ -154,13 +191,36 @@
     from var(--color-zinc-500) r g b / 10%
   );
   --node-component-widget-skeleton-surface: var(--color-zinc-300);
-  --node-stroke: var(--color-stone-100);
+  --node-divider: var(--color-sand-100);
+  --node-icon-disabled: var(--color-alpha-gray-500-50);
+  --node-stroke: var(--color-gray-400);
+  --node-stroke-selected: var(--color-accent-primary);
+  --node-stroke-error: var(--color-error);
+  --node-stroke-executing: var(--color-blue-100);
+  --text-secondary: var(--color-stone-100);
+  --text-primary: var(--color-charcoal-700);
+  --input-surface: rgba(0, 0, 0, 0.15);
 }
 
 .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);
   --dialog-surface: var(--color-neutral-700);
+  --interface-menu-component-surface-hovered: var(--color-charcoal-400);
+  --interface-menu-component-surface-selected: var(--color-charcoal-300);
+  --interface-menu-keybind-surface-default: var(--color-charcoal-200);
+  --interface-panel-surface: var(--color-charcoal-100);
+  --interface-stroke: var(--color-charcoal-400);
+  --nav-background: var(--color-charcoal-100);
+  --node-border: var(--color-charcoal-500);
   --node-component-border: var(--color-stone-200);
+  --node-component-border-error: var(--color-danger-100);
+  --node-component-border-executing: var(--color-blue-500);
+  --node-component-border-selected: var(--color-charcoal-200);
   --node-component-header-icon: var(--color-slate-300);
   --node-component-header-surface: var(--color-charcoal-800);
   --node-component-outline: var(--color-white);
@@ -169,19 +229,39 @@
   --node-component-slot-dot-outline: var(--color-white);
   --node-component-slot-text: var(--color-slate-200);
   --node-component-surface-highlight: var(--color-slate-100);
-  --node-component-surface-hovered: var(--color-charcoal-400);
+  --node-component-surface-hovered: var(--color-charcoal-600);
   --node-component-surface-selected: var(--color-charcoal-200);
   --node-component-surface: var(--color-charcoal-800);
   --node-component-tooltip: var(--color-white);
   --node-component-tooltip-border: var(--color-slate-300);
   --node-component-tooltip-surface: var(--color-charcoal-800);
   --node-component-widget-skeleton-surface: var(--color-zinc-800);
-  --node-stroke: var(--color-slate-100);
+  --node-component-disabled: var(--color-alpha-charcoal-600-30);
+  --node-divider: var(--color-charcoal-500);
+  --node-icon-disabled: var(--color-alpha-stone-100-20);
+  --node-stroke: var(--color-stone-200);
+  --node-stroke-selected: var(--color-pure-white);
+  --node-stroke-error: var(--color-error);
+  --node-stroke-executing: var(--color-blue-100);
+  --text-secondary: var(--color-slate-100);
+  --text-primary: var(--color-pure-white);
+  --input-surface: rgba(130, 130, 130, 0.1);
 }
 
 @theme inline {
   --color-backdrop: var(--backdrop);
+  --color-button-hover-surface: var(--button-hover-surface);
+  --color-button-active-surface: var(--button-active-surface);
+  --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);
+  --color-interface-menu-keybind-surface-default: var(--interface-menu-keybind-surface-default);
+  --color-interface-panel-surface: var(--interface-panel-surface);
+  --color-interface-stroke: var(--interface-stroke);
+  --color-nav-background: var(--nav-background);
+  --color-node-border: var(--node-border);
   --color-node-component-border: var(--node-component-border);
   --color-node-component-executing: var(--node-component-executing);
   --color-node-component-header: var(--node-component-header);
@@ -213,7 +293,16 @@
   --color-node-component-widget-skeleton-surface: var(
     --node-component-widget-skeleton-surface
   );
+  --color-node-component-disabled: var(--node-component-disabled);
+  --color-node-divider: var(--node-divider);
+  --color-node-icon-disabled: var(--node-icon-disabled);
   --color-node-stroke: var(--node-stroke);
+  --color-node-stroke-selected: var(--node-stroke-selected);
+  --color-node-stroke-error: var(--node-stroke-error);
+  --color-node-stroke-executing: var(--node-stroke-executing);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-primary: var(--text-primary);
+  --color-input-surface: var(--input-surface);
 }
 
 @custom-variant dark-theme {

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>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3" d="m4 2 9.333 6L4 14V2Z"/></svg>

packages/shared-frontend-utils/src/formatUtil.ts

@@ -82,7 +82,7 @@ export function formatSize(value?: number) {
  * - filename: 'file'
  * - suffix: 'txt'
  */
-function getFilenameDetails(fullFilename: string) {
+export function getFilenameDetails(fullFilename: string) {
   if (fullFilename.includes('.')) {
     return {
       filename: fullFilename.split('.').slice(0, -1).join('.'),
@@ -451,3 +451,26 @@ export function stringToLocale(locale: string): SupportedLocale {
     ? (locale as SupportedLocale)
     : 'en'
 }
+
+export function formatDuration(milliseconds: number): string {
+  if (!milliseconds || milliseconds < 0) return '0s'
+
+  const totalSeconds = Math.floor(milliseconds / 1000)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const remainingSeconds = Math.floor(totalSeconds % 60)
+
+  const parts: string[] = []
+
+  if (hours > 0) {
+    parts.push(`${hours}h`)
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`)
+  }
+  if (remainingSeconds > 0 || parts.length === 0) {
+    parts.push(`${remainingSeconds}s`)
+  }
+
+  return parts.join(' ')
+}

pnpm-lock.yaml

@@ -193,14 +193,17 @@ 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
     primeicons:
       specifier: ^7.0.0
       version: 7.0.0
     primevue:
       specifier: ^4.2.5
       version: 4.2.5
+    rollup-plugin-visualizer:
+      specifier: ^6.0.4
+      version: 6.0.4
     storybook:
       specifier: ^9.1.6
       version: 9.1.6
@@ -473,7 +476,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)
@@ -485,19 +488,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
@@ -545,10 +548,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)
@@ -590,10 +593,13 @@ importers:
         version: 1.8.0
       prettier:
         specifier: 'catalog:'
-        version: 3.3.2
+        version: 3.6.2
+      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)
@@ -6361,8 +6367,8 @@ 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
 
@@ -6668,6 +6674,19 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
+  rollup-plugin-visualizer@6.0.4:
+    resolution: {integrity: sha512-q8Q7J/6YofkmaGW1sH/fPRAz37x/+pd7VBuaUU7lwvOS/YikuiiEU9jeb9PH8XHiq50XFrUsBbOxeAMYQ7KZkg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      rolldown: 1.x || ^1.0.0-beta
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+
   rollup@4.22.4:
     resolution: {integrity: sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -6822,6 +6841,10 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
   speakingurl@14.0.1:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
@@ -9645,7 +9668,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)
@@ -9653,7 +9676,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'
@@ -10004,29 +10027,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': {}
@@ -10036,19 +10059,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)
@@ -10056,10 +10079,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
@@ -10324,7 +10347,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
@@ -10332,7 +10355,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:
@@ -12110,20 +12133,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
@@ -14284,7 +14307,7 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier@3.3.2: {}
+  prettier@3.6.2: {}
 
   pretty-format@27.5.1:
     dependencies:
@@ -14733,6 +14756,15 @@ snapshots:
 
   rfdc@1.4.1: {}
 
+  rollup-plugin-visualizer@6.0.4(rollup@4.22.4):
+    dependencies:
+      open: 8.4.2
+      picomatch: 4.0.3
+      source-map: 0.7.6
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.22.4
+
   rollup@4.22.4:
     dependencies:
       '@types/estree': 1.0.5
@@ -14924,6 +14956,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  source-map@0.7.6: {}
+
   speakingurl@14.0.1: {}
 
   sprintf-js@1.0.3: {}
@@ -14950,7 +14984,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
@@ -14965,7 +14999,7 @@ snapshots:
       semver: 7.7.2
       ws: 8.18.3
     optionalDependencies:
-      prettier: 3.3.2
+      prettier: 3.6.2
     transitivePeerDependencies:
       - '@testing-library/dom'
       - bufferutil

pnpm-workspace.yaml

@@ -65,9 +65,10 @@ catalog:
   nx: 21.4.1
   pinia: ^2.1.7
   postcss-html: ^1.8.0
-  prettier: ^3.3.2
+  prettier: ^3.6.2
   primeicons: ^7.0.0
   primevue: ^4.2.5
+  rollup-plugin-visualizer: ^6.0.4
   storybook: ^9.1.6
   stylelint: ^16.24.0
   tailwindcss: ^4.1.12
@@ -97,9 +98,6 @@ catalog:
 
 cleanupUnusedCatalogs: true
 
-overrides:
-  '@types/eslint': '-'
-
 ignoredBuiltDependencies:
   - '@firebase/util'
   - protobufjs
@@ -114,3 +112,6 @@ onlyBuiltDependencies:
   - esbuild
   - nx
   - oxc-resolver
+
+overrides:
+  '@types/eslint': '-'

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/button/IconGroup.vue

@@ -12,6 +12,7 @@ const iconGroupClasses = cn(
   'outline-hidden border-none p-0 rounded-lg',
   'bg-white dark-theme:bg-zinc-700',
   'text-neutral-950 dark-theme:text-white',
+  'transition-all duration-200',
   'cursor-pointer'
 )
 </script>

src/components/button/MoreButton.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="relative inline-flex items-center">
-    <IconButton @click="toggle">
-      <i class="icon-[lucide--more-vertical] text-sm" />
+    <IconButton :size="size" :type="type" @click="toggle">
+      <i v-if="!isVertical" class="icon-[lucide--ellipsis] text-sm" />
+      <i v-else class="icon-[lucide--more-vertical] text-sm" />
     </IconButton>
 
     <Popover
@@ -13,6 +14,8 @@
       :close-on-escape="true"
       unstyled
       :pt="pt"
+      @show="$emit('menuOpened')"
+      @hide="$emit('menuClosed')"
     >
       <div class="flex min-w-40 flex-col gap-2 p-2">
         <slot :close="hide" />
@@ -25,12 +28,28 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
+import type { BaseButtonProps } from '@/types/buttonTypes'
 import { cn } from '@/utils/tailwindUtil'
 
 import IconButton from './IconButton.vue'
 
+interface MoreButtonProps extends BaseButtonProps {
+  isVertical?: boolean
+}
+
 const popover = ref<InstanceType<typeof Popover>>()
 
+const {
+  size = 'md',
+  type = 'secondary',
+  isVertical = false
+} = defineProps<MoreButtonProps>()
+
+defineEmits<{
+  menuOpened: []
+  menuClosed: []
+}>()
+
 const toggle = (event: Event) => {
   popover.value?.toggle(event)
 }
@@ -45,7 +64,7 @@ const pt = computed(() => ({
   },
   content: {
     class: cn(
-      'mt-2 rounded-lg',
+      'mt-1 rounded-lg',
       'bg-white dark-theme:bg-zinc-800',
       'text-neutral dark-theme:text-white',
       'shadow-lg',

src/components/card/Card.stories.ts

@@ -11,7 +11,15 @@ import CardTop from './CardTop.vue'
 
 interface CardStoryArgs {
   // CardContainer props
-  containerRatio: 'square' | 'portrait' | 'tallPortrait'
+  containerSize: 'mini' | 'compact' | 'regular' | 'portrait' | 'tall'
+  variant: 'default' | 'ghost' | 'outline'
+  rounded: 'none' | 'sm' | 'lg' | 'xl'
+  customAspectRatio?: string
+  hasBorder: boolean
+  hasBackground: boolean
+  hasShadow: boolean
+  hasCursor: boolean
+  customClass: string
   maxWidth: number
   minWidth: number
 
@@ -44,10 +52,44 @@ interface CardStoryArgs {
 const meta: Meta<CardStoryArgs> = {
   title: 'Components/Card/Card',
   argTypes: {
-    containerRatio: {
+    containerSize: {
       control: 'select',
-      options: ['square', 'portrait', 'tallPortrait'],
-      description: 'Card container aspect ratio'
+      options: ['mini', 'compact', 'regular', 'portrait', 'tall'],
+      description: 'Card container size preset'
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'ghost', 'outline'],
+      description: 'Card visual variant'
+    },
+    rounded: {
+      control: 'select',
+      options: ['none', 'sm', 'lg', 'xl'],
+      description: 'Border radius size'
+    },
+    customAspectRatio: {
+      control: 'text',
+      description: 'Custom aspect ratio (e.g., "16/9")'
+    },
+    hasBorder: {
+      control: 'boolean',
+      description: 'Add border styling'
+    },
+    hasBackground: {
+      control: 'boolean',
+      description: 'Add background styling'
+    },
+    hasShadow: {
+      control: 'boolean',
+      description: 'Add shadow styling'
+    },
+    hasCursor: {
+      control: 'boolean',
+      description: 'Add cursor pointer'
+    },
+    customClass: {
+      control: 'text',
+      description: 'Additional custom CSS classes'
     },
     topRatio: {
       control: 'select',
@@ -149,8 +191,15 @@ const createCardTemplate = (args: CardStoryArgs) => ({
   template: `
     <div class="min-h-screen">
       <CardContainer 
-        :ratio="args.containerRatio" 
-        class="max-w-[320px] mx-auto"
+        :size="args.containerSize"
+        :variant="args.variant"
+        :rounded="args.rounded"
+        :custom-aspect-ratio="args.customAspectRatio"
+        :has-border="args.hasBorder"
+        :has-background="args.hasBackground"
+        :has-shadow="args.hasShadow"
+        :has-cursor="args.hasCursor"
+        :class="args.customClass || 'max-w-[320px] mx-auto'"
       >
         <template #top>
           <CardTop :ratio="args.topRatio">
@@ -205,7 +254,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
         </template>
         
         <template #bottom>
-          <CardBottom class="p-3 bg-neutral-100">
+          <CardBottom>
             <CardTitle v-if="args.showTitle">{{ args.title }}</CardTitle>
             <CardDescription v-if="args.showDescription">{{ args.description }}</CardDescription>
           </CardBottom>
@@ -218,7 +267,15 @@ const createCardTemplate = (args: CardStoryArgs) => ({
 export const Default: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'portrait',
+    containerSize: 'portrait',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'square',
     showTopLeft: false,
     showTopRight: true,
@@ -243,7 +300,15 @@ export const Default: Story = {
 export const SquareCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'square',
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'landscape',
     showTopLeft: false,
     showTopRight: true,
@@ -268,7 +333,15 @@ export const SquareCard: Story = {
 export const TallPortraitCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'tallPortrait',
+    containerSize: 'tall',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'square',
     showTopLeft: true,
     showTopRight: true,
@@ -293,7 +366,15 @@ export const TallPortraitCard: Story = {
 export const ImageCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'portrait',
+    containerSize: 'portrait',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'square',
     showTopLeft: false,
     showTopRight: true,
@@ -314,10 +395,50 @@ export const ImageCard: Story = {
   }
 }
 
+export const MiniCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'mini',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: false,
+    title: 'Mini Asset',
+    description: '',
+    backgroundColor: '#06b6d4',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Asset'],
+    showFileSize: true,
+    fileSize: '124 KB',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
 export const MinimalCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'square',
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'landscape',
     showTopLeft: false,
     showTopRight: false,
@@ -338,10 +459,209 @@ export const MinimalCard: Story = {
   }
 }
 
+export const GhostVariant: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'compact',
+    variant: 'ghost',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: true,
+    title: 'Workflow Template',
+    description: 'Ghost variant for workflow templates',
+    backgroundColor: '#10b981',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Template'],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const OutlineVariant: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'outline',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'landscape',
+    showTopLeft: false,
+    showTopRight: true,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Outline Card',
+    description: 'Card with outline variant styling',
+    backgroundColor: '#f59e0b',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const CustomAspectRatio: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    customAspectRatio: '16/9',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'landscape',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: false,
+    title: 'Wide Format Card',
+    description: '',
+    backgroundColor: '#8b5cf6',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Wide'],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const RoundedNone: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'none',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Sharp Corners',
+    description: 'Card with no border radius',
+    backgroundColor: '#dc2626',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const RoundedXL: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'xl',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Extra Rounded',
+    description: 'Card with extra large border radius',
+    backgroundColor: '#059669',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const NoStylesCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: false,
+    hasBackground: false,
+    hasShadow: false,
+    hasCursor: true,
+    customClass: 'bg-gradient-to-br from-blue-500 to-purple-600',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Custom Styled Card',
+    description: 'Card with all default styles removed and custom gradient',
+    backgroundColor: 'transparent',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
 export const FullFeaturedCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'tallPortrait',
+    containerSize: 'tall',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'square',
     showTopLeft: true,
     showTopRight: true,

src/components/card/CardContainer.vue

@@ -8,26 +8,78 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const { ratio = 'square', type } = defineProps<{
-  ratio?: 'smallSquare' | 'square' | 'portrait' | 'tallPortrait'
-  type?: string
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  size = 'regular',
+  variant = 'default',
+  rounded = 'md',
+  customAspectRatio,
+  hasBorder = true,
+  hasBackground = true,
+  hasShadow = true,
+  hasCursor = true,
+  class: customClass = ''
+} = defineProps<{
+  size?: 'mini' | 'compact' | 'regular' | 'portrait' | 'tall'
+  variant?: 'default' | 'ghost' | 'outline'
+  rounded?: 'none' | 'md' | 'lg' | 'xl'
+  customAspectRatio?: string
+  hasBorder?: boolean
+  hasBackground?: boolean
+  hasShadow?: boolean
+  hasCursor?: boolean
+  class?: string
 }>()
 
+// Base structure classes
+const structureClasses = 'flex flex-col overflow-hidden'
+
+// Rounded corners
+const roundedClasses = {
+  none: 'rounded-none',
+  md: 'rounded',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl'
+} as const
+
 const containerClasses = computed(() => {
-  const baseClasses =
-    'cursor-pointer flex flex-col bg-white dark-theme:bg-zinc-800 rounded-lg shadow-sm border border-zinc-200 dark-theme:border-zinc-700 overflow-hidden'
-
-  if (type === 'workflow-template-card') {
-    return `cursor-pointer p-2 flex flex-col hover:bg-white dark-theme:hover:bg-zinc-800 rounded-lg transition-background duration-200 ease-in-out`
+  // Variant styles
+  const variantClasses = {
+    default: cn(
+      hasBackground && 'bg-white dark-theme:bg-zinc-800',
+      hasBorder && 'border border-zinc-200 dark-theme:border-zinc-700',
+      hasShadow && 'shadow-sm',
+      hasCursor && 'cursor-pointer'
+    ),
+    ghost: cn(
+      hasCursor && 'cursor-pointer',
+      'p-2 transition-colors duration-200'
+    ),
+    outline: cn(
+      hasBorder && 'border-2 border-zinc-300 dark-theme:border-zinc-600',
+      hasCursor && 'cursor-pointer',
+      'hover:border-zinc-400 dark-theme:hover:border-zinc-500 transition-colors'
+    )
   }
 
-  const ratioClasses = {
-    smallSquare: 'aspect-240/311',
-    square: 'aspect-256/308',
-    portrait: 'aspect-256/325',
-    tallPortrait: 'aspect-256/353'
-  }
+  // Size/aspect ratio
+  const aspectRatio = customAspectRatio
+    ? `aspect-[${customAspectRatio}]`
+    : {
+        mini: 'aspect-100/120',
+        compact: 'aspect-240/311',
+        regular: 'aspect-256/308',
+        portrait: 'aspect-256/325',
+        tall: 'aspect-256/353'
+      }[size]
 
-  return `${baseClasses} ${ratioClasses[ratio]}`
+  return cn(
+    structureClasses,
+    roundedClasses[rounded],
+    variantClasses[variant],
+    aspectRatio,
+    customClass
+  )
 })
 </script>

src/components/card/CardTop.vue

@@ -2,31 +2,27 @@
   <div :class="topStyle">
     <slot class="absolute top-0 left-0 h-full w-full"></slot>
 
-    <div
-      v-if="slots['top-left']"
-      class="absolute top-2 left-2 flex flex-wrap justify-start gap-2"
-    >
+    <div v-if="slots['top-left']" :class="slotClasses['top-left']">
       <slot name="top-left"></slot>
     </div>
 
-    <div
-      v-if="slots['top-right']"
-      class="absolute top-2 right-2 flex flex-wrap justify-end gap-2"
-    >
+    <div v-if="slots['top-right']" :class="slotClasses['top-right']">
       <slot name="top-right"></slot>
     </div>
 
-    <div
-      v-if="slots['bottom-left']"
-      class="absolute bottom-2 left-2 flex flex-wrap justify-start gap-2"
-    >
+    <div v-if="slots['center-left']" :class="slotClasses['center-left']">
+      <slot name="center-left"></slot>
+    </div>
+
+    <div v-if="slots['center-right']" :class="slotClasses['center-right']">
+      <slot name="center-right"></slot>
+    </div>
+
+    <div v-if="slots['bottom-left']" :class="slotClasses['bottom-left']">
       <slot name="bottom-left"></slot>
     </div>
 
-    <div
-      v-if="slots['bottom-right']"
-      class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"
-    >
+    <div v-if="slots['bottom-right']" :class="slotClasses['bottom-right']">
       <slot name="bottom-right"></slot>
     </div>
   </div>
@@ -35,10 +31,26 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 const slots = useSlots()
 
-const { ratio = 'square' } = defineProps<{
+const {
+  ratio = 'square',
+  topLeftClass,
+  topRightClass,
+  centerLeftClass,
+  centerRightClass,
+  bottomLeftClass,
+  bottomRightClass
+} = defineProps<{
   ratio?: 'square' | 'landscape'
+  topLeftClass?: string
+  topRightClass?: string
+  centerLeftClass?: string
+  centerRightClass?: string
+  bottomLeftClass?: string
+  bottomRightClass?: string
 }>()
 
 const topStyle = computed(() => {
@@ -51,4 +63,26 @@ const topStyle = computed(() => {
 
   return `${baseClasses} ${ratioClasses[ratio]}`
 })
+
+// Get default classes for each slot position
+const defaultSlotClasses = {
+  'top-left': 'absolute top-2 left-2 flex flex-wrap justify-start gap-2',
+  'top-right': 'absolute top-2 right-2 flex flex-wrap justify-end gap-2',
+  'center-left':
+    'absolute top-1/2 left-2 flex -translate-y-1/2 flex-wrap justify-start gap-2',
+  'center-right':
+    'absolute top-1/2 right-2 flex -translate-y-1/2 flex-wrap justify-end gap-2',
+  'bottom-left': 'absolute bottom-2 left-2 flex flex-wrap justify-start gap-2',
+  'bottom-right': 'absolute right-2 bottom-2 flex flex-wrap justify-end gap-2'
+}
+
+// Compute all slot classes once and cache them
+const slotClasses = computed(() => ({
+  'top-left': cn(defaultSlotClasses['top-left'], topLeftClass),
+  'top-right': cn(defaultSlotClasses['top-right'], topRightClass),
+  'center-left': cn(defaultSlotClasses['center-left'], centerLeftClass),
+  'center-right': cn(defaultSlotClasses['center-right'], centerRightClass),
+  'bottom-left': cn(defaultSlotClasses['bottom-left'], bottomLeftClass),
+  'bottom-right': cn(defaultSlotClasses['bottom-right'], bottomRightClass)
+}))
 </script>

src/components/chip/SquareChip.vue

@@ -1,13 +1,28 @@
 <template>
-  <div
-    class="inline-flex shrink-0 items-center justify-center gap-1 rounded bg-[#D9D9D966]/40 px-2 py-1 text-xs font-bold text-white/90"
-  >
-    <slot name="icon" class="text-xs text-white/90"></slot>
+  <div :class="chipClasses">
+    <slot name="icon"></slot>
     <span>{{ label }}</span>
   </div>
 </template>
 <script setup lang="ts">
-const { label } = defineProps<{
+import { computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { label, variant = 'dark' } = defineProps<{
   label: string
+  variant?: 'dark' | 'light'
 }>()
+
+const baseClasses =
+  'inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold'
+
+const variantStyles = {
+  dark: 'bg-zinc-500/40 text-white/90',
+  light: 'backdrop-blur-[2px] bg-white/50 text-zinc-900 dark-theme:text-white'
+}
+
+const chipClasses = computed(() => {
+  return cn(baseClasses, variantStyles[variant])
+})
 </script>

src/components/common/LazyImage.vue

@@ -2,6 +2,7 @@
   <div
     ref="containerRef"
     class="relative flex h-full w-full items-center justify-center overflow-hidden"
+    :class="containerClass"
   >
     <Skeleton
       v-if="!isImageLoaded"
@@ -41,17 +42,20 @@ import { computed, onUnmounted, ref, watch } from 'vue'
 
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useMediaCache } from '@/services/mediaCacheService'
+import type { ClassValue } from '@/utils/tailwindUtil'
 
 const {
   src,
   alt = '',
+  containerClass = '',
   imageClass = '',
   imageStyle,
   rootMargin = '300px'
 } = defineProps<{
   src: string
   alt?: string
-  imageClass?: string | string[] | Record<string, boolean>
+  containerClass?: ClassValue
+  imageClass?: ClassValue
   imageStyle?: Record<string, any>
   rootMargin?: string
 }>()

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -141,8 +141,10 @@
           <CardContainer
             v-for="n in isLoading ? 12 : 0"
             :key="`initial-skeleton-${n}`"
-            ratio="smallSquare"
-            type="workflow-template-card"
+            size="compact"
+            variant="ghost"
+            rounded="lg"
+            class="hover:bg-white dark-theme:hover:bg-zinc-800"
           >
             <template #top>
               <CardTop ratio="landscape">
@@ -172,9 +174,11 @@
             v-for="template in isLoading ? [] : displayTemplates"
             :key="template.name"
             ref="cardRefs"
-            ratio="smallSquare"
-            type="workflow-template-card"
+            size="compact"
+            variant="ghost"
+            rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
+            class="hover:bg-white dark-theme:hover:bg-zinc-800"
             @mouseenter="hoveredTemplate = template.name"
             @mouseleave="hoveredTemplate = null"
             @click="onLoadWorkflow(template)"
@@ -316,8 +320,10 @@
           <CardContainer
             v-for="n in isLoadingMore ? 6 : 0"
             :key="`skeleton-${n}`"
-            ratio="smallSquare"
-            type="workflow-template-card"
+            size="compact"
+            variant="ghost"
+            rounded="lg"
+            class="hover:bg-white dark-theme:hover:bg-zinc-800"
           >
             <template #top>
               <CardTop ratio="square">