refactor: remove file paths from AGENTS.md to prevent staleness

Amp-Thread-ID: https://ampcode.com/threads/T-019bdfa7-58b4-731b-83ee-83f2b2bea030
Co-authored-by: Amp <amp@ampcode.com>

AGENTS.md

@@ -1,308 +1,37 @@
-# Repository Guidelines
+# ComfyUI Frontend
 
-See @docs/guidance/*.md for file-type-specific conventions (auto-loaded by glob).
+Vue 3.5+ / TypeScript / Tailwind 4 frontend for ComfyUI. Uses Nx monorepo with pnpm.
 
-## Project Structure & Module Organization
+## Commands
 
-- Source: `src/`
-  - Vue 3.5+
-  - TypeScript
-  - Tailwind 4
-  - Key areas:
-    - `components/`
-    - `views/`
-    - `stores/` (Pinia)
-    - `composables/`
-    - `services/`
-    - `utils/`
-    - `assets/`
-    - `locales/`
-- Routing: `src/router.ts`,
-- i18n: `src/i18n.ts`,
-- Entry Point: `src/main.ts`.
-- Tests:
-  - unit/component in `tests-ui/` and `src/**/*.test.ts`
-  - E2E (Playwright) in `browser_tests/**/*.spec.ts`
-- Public assets: `public/`
-- Build output: `dist/`
-- Configs
-  - `vite.config.mts`
-  - `playwright.config.ts`
-  - `eslint.config.ts`
-  - `.oxfmtrc.json`
-  - `.oxlintrc.json`
-  - etc.
+```bash
+pnpm dev              # Vite dev server
+pnpm build            # Type-check + production build
+pnpm typecheck        # Vue TSC
+pnpm lint             # ESLint
+pnpm format           # oxfmt
+pnpm test:unit        # Vitest
+pnpm test:browser     # Playwright E2E
+pnpm knip             # Dead code detection
+```
 
-## Monorepo Architecture
+## Key Conventions
 
-The project uses **Nx** for build orchestration and task management
+See `docs/guidance/*.md` for file-specific rules. Quick reference:
 
-## Build, Test, and Development Commands
+- **Vue**: Composition API only, `<script setup lang="ts">`, reactive props destructuring
+- **Styling**: Tailwind only (no `<style>` blocks), use `cn()` for conditional classes
+- **Types**: No `any`, no `as any`, fix type issues at the source
+- **i18n**: All strings via vue-i18n, entries in `src/locales/en/main.json`
+- **Tests**: Colocated `*.test.ts` files, behavioral coverage
 
-- `pnpm dev`: Start Vite dev server.
-- `pnpm dev:electron`: Dev server with Electron API mocks
-- `pnpm build`: Type-check then production build to `dist/`
-- `pnpm preview`: Preview the production build locally
-- `pnpm test:unit`: Run Vitest unit tests
-- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`)
-- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
-- `pnpm format` / `pnpm format:check`: oxfmt
-- `pnpm typecheck`: Vue TSC type checking
-- `pnpm storybook`: Start Storybook development server
+## Quality Gates
 
-## Development Workflow
+Before committing: `pnpm typecheck && pnpm lint && pnpm format`
 
-1. Make code changes
-2. Run relevant tests
-3. Run `pnpm typecheck`, `pnpm lint`, `pnpm format`
-4. Check if README updates are needed
-5. Suggest docs.comfy.org updates for user-facing changes
+## Agent Workspace
 
-## Git Conventions
-
-- Use `prefix:` format: `feat:`, `fix:`, `test:`
-- Add "Fixes #n" to PR descriptions
-- Never mention Claude/AI in commits
-
-## Coding Style & Naming Conventions
-
-- Language:
-  - TypeScript (exclusive, no new JavaScript)
-  - Vue 3 SFCs (`.vue`)
-    - Composition API only
-  - Tailwind 4 styling
-    - Avoid `<style>` blocks
-- Style: (see `.oxfmtrc.json`)
-  - Indent 2 spaces
-  - single quotes
-  - no trailing semicolons
-  - width 80
-- Imports:
-  - sorted/grouped by plugin
-  - run `pnpm format` before committing
-  - use separate `import type` statements, not inline `type` in mixed imports
-    - ✅ `import type { Foo } from './foo'` + `import { bar } from './foo'`
-    - ❌ `import { bar, type Foo } from './foo'`
-- ESLint:
-  - Vue + TS rules
-  - no floating promises
-  - unused imports disallowed
-  - i18n raw text restrictions in templates
-- Naming:
-  - Vue components in PascalCase (e.g., `MenuHamburger.vue`)
-  - composables `useXyz.ts`
-  - Pinia stores `*Store.ts`
-
-
-## Commit & Pull Request Guidelines
-
-- PRs:
-  - Include clear description
-  - Reference linked issues (e.g. `- Fixes #123`)
-  - Keep it extremely concise and information-dense
-  - Don't use emojis or add excessive headers/sections
-  - Follow the PR description template in the `.github/` folder.
-- Quality gates:
-  - `pnpm lint`
-  - `pnpm typecheck`
-  - `pnpm knip`
-  - Relevant tests must pass
-- Never use `--no-verify` to bypass failing tests
-  - Identify the issue and present root cause analysis and possible solutions if you are unable to solve quickly yourself
-- Keep PRs focused and small
-  - If it looks like the current changes will have 300+ lines of non-test code, suggest ways it could be broken into multiple PRs
-
-## Security & Configuration Tips
-
-- Secrets: Use `.env` (see `.env_example`); do not commit secrets.
-
-## Vue 3 Composition API Best Practices
-
-- Use `<script setup lang="ts">` for component logic
-- Utilize `ref` for reactive state
-- Implement computed properties with computed()
-- Use watch and watchEffect for side effects
-  - Avoid using a `ref` and a `watch` if a `computed` would work instead
-- Implement lifecycle hooks with onMounted, onUpdated, etc.
-- Utilize provide/inject for dependency injection
-  - Do not use dependency injection if a Store or a shared composable would be simpler
-- Use Vue 3.5 TypeScript style of default prop declaration
-  - Example:
-
-    ```typescript
-    const { nodes, showTotal = true } = defineProps<{
-    nodes: ApiNodeCost[]
-    showTotal?: boolean
-    }>()
-    ```
-
-  - Prefer reactive props destructuring to `const props = defineProps<...>`
-  - Do not use `withDefaults` or runtime props declaration
-  - Do not import Vue macros unnecessarily
-  - Prefer `defineModel` to separately defining a prop and emit for v-model bindings
-  - Define slots via template usage, not `defineSlots`
-  - Use same-name shorthand for slot prop bindings: `:isExpanded` instead of `:is-expanded="isExpanded"`
-  - Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files
-  - Be judicious with addition of new refs or other state
-    - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
-    - If it's possible to use the `ref` or prop directly, don't add a `computed`
-    - If it's possible to use a `computed` to name and reuse a derived value, don't use a `watch`
-
-## Development Guidelines
-
-1. Leverage VueUse functions for performance-enhancing styles
-2. Use es-toolkit for utility functions
-3. Use TypeScript for type safety
-4. If a complex type definition is inlined in multiple related places, extract and name it for reuse
-5. In Vue Components, implement proper props and emits definitions
-6. Utilize Vue 3's Teleport component when needed
-7. Use Suspense for async components
-8. Implement proper error handling
-9. Follow Vue 3 style guide and naming conventions
-10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json. Use the plurals system in i18n instead of hardcoding pluralization in templates.
-12. Avoid new usage of PrimeVue components
-13. Write tests for all changes, especially bug fixes to catch future regressions
-14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
-15. Do not add or retain redundant comments, clean as you go
-16. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
-17. [Refactoring](https://refactoring.com/catalog/) should be used to make complex code simpler
-18. Try to minimize the surface area (exported values) of each module and composable
-19. Don't use barrel files, e.g. `/some/package/index.ts` to re-export within `/src`
-20. Keep functions short and functional
-21. Minimize [nesting](https://wiki.c2.com/?ArrowAntiPattern), e.g. `if () { ... }` or `for () { ... }`
-22. Avoid mutable state, prefer immutability and assignment at point of declaration
-23. Favor pure functions (especially testable ones)
-24. Do not use function expressions if it's possible to use function declarations instead
-25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
-
-## Testing Guidelines
-
-See @docs/testing/*.md for detailed patterns.
-
-- Frameworks:
-  - Vitest (unit/component, happy-dom)
-  - Playwright (E2E)
-- Test files:
-  - Unit/Component: `**/*.test.ts`
-  - E2E: `browser_tests/**/*.spec.ts`
-  - Litegraph Specific: `src/lib/litegraph/test/`
-
-### General
-
-1. Do not write change detector tests  
-   e.g. a test that just asserts that the defaults are certain values
-2. Do not write tests that are dependent on non-behavioral features like utility classes or styles
-3. Be parsimonious in testing, do not write redundant tests  
-   See <https://tidyfirst.substack.com/p/composable-tests>
-4. [Don’t Mock What You Don’t Own](https://hynek.me/articles/what-to-mock-in-5-mins/)
-
-### Vitest / Unit Tests
-
-1. Do not write tests that just test the mocks  
-   Ensure that the tests fail when the code itself would behave in a way that was not expected or desired
-2. For mocking, leverage [Vitest's utilities](https://vitest.dev/guide/mocking.html) where possible
-3. Keep your module mocks contained  
-   Do not use global mutable state within the test file  
-   Use `vi.hoisted()` if necessary to allow for per-test Arrange phase manipulation of deeper mock state
-4. For Component testing, use [Vue Test Utils](https://test-utils.vuejs.org/) and especially follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
-5. Aim for behavioral coverage of critical and new features
-
-### Playwright / Browser / E2E Tests
-
-1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
-2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
-3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
-
-## External Resources
-
-- Vue: <https://vuejs.org/api/>
-- Tailwind: <https://tailwindcss.com/docs/styling-with-utility-classes>
-- VueUse: <https://vueuse.org/functions.html>
-- shadcn/vue: <https://www.shadcn-vue.com/>
-- Reka UI: <https://reka-ui.com/>
-- PrimeVue: <https://primevue.org>
-- ComfyUI: <https://docs.comfy.org>
-- Electron: <https://www.electronjs.org/docs/latest/>
-- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
-- Nx: <https://nx.dev/docs/reference/nx-commands>
-- [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html)
-
-## Project Philosophy
-
-- Follow good software engineering principles
-  - YAGNI
-  - AHA
-  - DRY
-  - SOLID
-- Clean, stable public APIs
-- Domain-driven design
-- Thousands of users and extensions
-- Prioritize clean interfaces that restrict extension access
-
-### Code Review
-
-In doing a code review, you should make sure that:
-
-- The code is well-designed.
-- The functionality is good for the users of the code.
-- Any UI changes are sensible and look good.
-- Any parallel programming is done safely.
-- The code isn’t more complex than it needs to be.
-- The developer isn’t implementing things they might need in the future but don’t know they need now.
-- Code has appropriate unit tests.
-- Tests are well-designed.
-- The developer used clear names for everything.
-- Comments are clear and useful, and mostly explain why instead of what.
-- Code is appropriately documented (generally in g3doc).
-- The code conforms to our style guides.
-
-#### [Complexity](https://google.github.io/eng-practices/review/reviewer/looking-for.html#complexity)
-
-Is the CL more complex than it should be? Check this at every level of the CL—are individual lines too complex? Are functions too complex? Are classes too complex? “Too complex” usually means “can’t be understood quickly by code readers.” It can also mean “developers are likely to introduce bugs when they try to call or modify this code.”
-
-A particular type of complexity is over-engineering, where developers have made the code more generic than it needs to be, or added functionality that isn’t presently needed by the system. Reviewers should be especially vigilant about over-engineering. Encourage developers to solve the problem they know needs to be solved now, not the problem that the developer speculates might need to be solved in the future. The future problem should be solved once it arrives and you can see its actual shape and requirements in the physical universe.
-
-## Repository Navigation
-
-- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
-- Prefer running single tests for performance
-- Use --help for unfamiliar CLI tools
-
-## GitHub Integration
-
-When referencing Comfy-Org repos:
-
-1. Check for local copy
-2. Use GitHub API for branches/PRs/metadata
-3. Curl GitHub website if needed
-
-## Common Pitfalls
-
-- NEVER use `any` type - use proper TypeScript types
-- NEVER use `as any` type assertions - fix the underlying type issue
-- NEVER use `--no-verify` flag when committing
-- NEVER delete or disable tests to make them pass
-- NEVER circumvent quality checks
-- NEVER use the `dark:` tailwind variant
-  - Instead use a semantic value from the `style.css` theme
-    - e.g. `bg-node-component-surface`
-- NEVER use `:class="[]"` to merge class names
-  - Always use `import { cn } from '@/utils/tailwindUtil'`
-    - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
-  - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
-- NEVER use `!important` or the `!` important prefix for tailwind classes
-  - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
-- NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
-  - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
-
-## Agent-only rules
-
-Rules for agent-based coding tasks.
-
-### Temporary Files
-
-- Put planning documents under `/temp/plans/`
-- Put scripts used under `/temp/scripts/`
-- Put summaries of work performed under `/temp/summaries/`
-- Put TODOs and status updates under `/temp/in_progress/`
+- Planning docs: `/temp/plans/`
+- Scripts: `/temp/scripts/`
+- Summaries: `/temp/summaries/`
+- In-progress work: `/temp/in_progress/`

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -119,8 +119,7 @@ class NodeSlotReference {
           window['app'].canvas.ds.convertOffsetToCanvas(rawPos)
 
         // Debug logging - convert Float64Arrays to regular arrays for visibility
-        // eslint-disable-next-line no-console
-        console.log(
+        console.warn(
           `NodeSlotReference debug for ${type} slot ${index} on node ${id}:`,
           {
             nodePos: [node.pos[0], node.pos[1]],

browser_tests/tests/colorPalette.spec.ts

@@ -232,11 +232,25 @@ test.describe('Node Color Adjustments', () => {
   }) => {
     await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
     await comfyPage.setSetting('Comfy.ColorPalette', 'light')
-    const saveWorkflowInterval = 1000
-    const workflow = await comfyPage.page.evaluate(() => {
-      return localStorage.getItem('workflow')
-    })
-    for (const node of JSON.parse(workflow ?? '{}').nodes) {
+    await comfyPage.nextFrame()
+    const parsed = await (
+      await comfyPage.page.waitForFunction(
+        () => {
+          const workflow = localStorage.getItem('workflow')
+          if (!workflow) return null
+          try {
+            const data = JSON.parse(workflow)
+            return Array.isArray(data?.nodes) ? data : null
+          } catch {
+            return null
+          }
+        },
+        { timeout: 3000 }
+      )
+    ).jsonValue()
+    expect(parsed.nodes).toBeDefined()
+    expect(Array.isArray(parsed.nodes)).toBe(true)
+    for (const node of parsed.nodes) {
       if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
       if (node.color) expect(node.color).not.toMatch(/hsla/)
     }

browser_tests/tests/featureFlags.spec.ts

@@ -27,7 +27,7 @@ test.describe('Feature Flags', () => {
         try {
           const parsed = JSON.parse(data)
           if (parsed.type === 'feature_flags') {
-            window.__capturedMessages.clientFeatureFlags = parsed
+            window.__capturedMessages!.clientFeatureFlags = parsed
           }
         } catch (e) {
           // Not JSON, ignore
@@ -41,7 +41,7 @@ test.describe('Feature Flags', () => {
           window['app']?.api?.serverFeatureFlags &&
           Object.keys(window['app'].api.serverFeatureFlags).length > 0
         ) {
-          window.__capturedMessages.serverFeatureFlags =
+          window.__capturedMessages!.serverFeatureFlags =
             window['app'].api.serverFeatureFlags
           clearInterval(checkInterval)
         }
@@ -57,8 +57,8 @@ test.describe('Feature Flags', () => {
     // Wait for both client and server feature flags
     await newPage.waitForFunction(
       () =>
-        window.__capturedMessages.clientFeatureFlags !== null &&
-        window.__capturedMessages.serverFeatureFlags !== null,
+        window.__capturedMessages!.clientFeatureFlags !== null &&
+        window.__capturedMessages!.serverFeatureFlags !== null,
       { timeout: 10000 }
     )
 
@@ -66,27 +66,27 @@ test.describe('Feature Flags', () => {
     const messages = await newPage.evaluate(() => window.__capturedMessages)
 
     // Verify client sent feature flags
-    expect(messages.clientFeatureFlags).toBeTruthy()
-    expect(messages.clientFeatureFlags).toHaveProperty('type', 'feature_flags')
-    expect(messages.clientFeatureFlags).toHaveProperty('data')
-    expect(messages.clientFeatureFlags.data).toHaveProperty(
+    expect(messages!.clientFeatureFlags).toBeTruthy()
+    expect(messages!.clientFeatureFlags).toHaveProperty('type', 'feature_flags')
+    expect(messages!.clientFeatureFlags).toHaveProperty('data')
+    expect(messages!.clientFeatureFlags!.data).toHaveProperty(
       'supports_preview_metadata'
     )
     expect(
-      typeof messages.clientFeatureFlags.data.supports_preview_metadata
+      typeof messages!.clientFeatureFlags!.data.supports_preview_metadata
     ).toBe('boolean')
 
     // Verify server sent feature flags back
-    expect(messages.serverFeatureFlags).toBeTruthy()
-    expect(messages.serverFeatureFlags).toHaveProperty(
+    expect(messages!.serverFeatureFlags).toBeTruthy()
+    expect(messages!.serverFeatureFlags).toHaveProperty(
       'supports_preview_metadata'
     )
-    expect(typeof messages.serverFeatureFlags.supports_preview_metadata).toBe(
+    expect(typeof messages!.serverFeatureFlags!.supports_preview_metadata).toBe(
       'boolean'
     )
-    expect(messages.serverFeatureFlags).toHaveProperty('max_upload_size')
-    expect(typeof messages.serverFeatureFlags.max_upload_size).toBe('number')
-    expect(Object.keys(messages.serverFeatureFlags).length).toBeGreaterThan(0)
+    expect(messages!.serverFeatureFlags).toHaveProperty('max_upload_size')
+    expect(typeof messages!.serverFeatureFlags!.max_upload_size).toBe('number')
+    expect(Object.keys(messages!.serverFeatureFlags!).length).toBeGreaterThan(0)
 
     await newPage.close()
   })
@@ -96,7 +96,7 @@ test.describe('Feature Flags', () => {
   }) => {
     // Get the actual server feature flags from the backend
     const serverFlags = await comfyPage.page.evaluate(() => {
-      return window['app'].api.serverFeatureFlags
+      return window['app']!.api.serverFeatureFlags
     })
 
     // Verify we received real feature flags from the backend
@@ -115,7 +115,7 @@ test.describe('Feature Flags', () => {
   }) => {
     // Test serverSupportsFeature with real backend flags
     const supportsPreviewMetadata = await comfyPage.page.evaluate(() => {
-      return window['app'].api.serverSupportsFeature(
+      return window['app']!.api.serverSupportsFeature(
         'supports_preview_metadata'
       )
     })
@@ -124,15 +124,17 @@ test.describe('Feature Flags', () => {
 
     // Test non-existent feature - should always return false
     const supportsNonExistent = await comfyPage.page.evaluate(() => {
-      return window['app'].api.serverSupportsFeature('non_existent_feature_xyz')
+      return window['app']!.api.serverSupportsFeature(
+        'non_existent_feature_xyz'
+      )
     })
     expect(supportsNonExistent).toBe(false)
 
     // Test that the method only returns true for boolean true values
     const testResults = await comfyPage.page.evaluate(() => {
       // Temporarily modify serverFeatureFlags to test behavior
-      const original = window['app'].api.serverFeatureFlags
-      window['app'].api.serverFeatureFlags = {
+      const original = window['app']!.api.serverFeatureFlags
+      window['app']!.api.serverFeatureFlags = {
         bool_true: true,
         bool_false: false,
         string_value: 'yes',
@@ -141,15 +143,15 @@ test.describe('Feature Flags', () => {
       }
 
       const results = {
-        bool_true: window['app'].api.serverSupportsFeature('bool_true'),
-        bool_false: window['app'].api.serverSupportsFeature('bool_false'),
-        string_value: window['app'].api.serverSupportsFeature('string_value'),
-        number_value: window['app'].api.serverSupportsFeature('number_value'),
-        null_value: window['app'].api.serverSupportsFeature('null_value')
+        bool_true: window['app']!.api.serverSupportsFeature('bool_true'),
+        bool_false: window['app']!.api.serverSupportsFeature('bool_false'),
+        string_value: window['app']!.api.serverSupportsFeature('string_value'),
+        number_value: window['app']!.api.serverSupportsFeature('number_value'),
+        null_value: window['app']!.api.serverSupportsFeature('null_value')
       }
 
       // Restore original
-      window['app'].api.serverFeatureFlags = original
+      window['app']!.api.serverFeatureFlags = original
       return results
     })
 
@@ -166,20 +168,20 @@ test.describe('Feature Flags', () => {
   }) => {
     // Test getServerFeature method
     const previewMetadataValue = await comfyPage.page.evaluate(() => {
-      return window['app'].api.getServerFeature('supports_preview_metadata')
+      return window['app']!.api.getServerFeature('supports_preview_metadata')
     })
     expect(typeof previewMetadataValue).toBe('boolean')
 
     // Test getting max_upload_size
     const maxUploadSize = await comfyPage.page.evaluate(() => {
-      return window['app'].api.getServerFeature('max_upload_size')
+      return window['app']!.api.getServerFeature('max_upload_size')
     })
     expect(typeof maxUploadSize).toBe('number')
     expect(maxUploadSize).toBeGreaterThan(0)
 
     // Test getServerFeature with default value for non-existent feature
     const defaultValue = await comfyPage.page.evaluate(() => {
-      return window['app'].api.getServerFeature(
+      return window['app']!.api.getServerFeature(
         'non_existent_feature_xyz',
         'default'
       )
@@ -192,7 +194,7 @@ test.describe('Feature Flags', () => {
   }) => {
     // Test getServerFeatures returns all flags
     const allFeatures = await comfyPage.page.evaluate(() => {
-      return window['app'].api.getServerFeatures()
+      return window['app']!.api.getServerFeatures()
     })
 
     expect(allFeatures).toBeTruthy()
@@ -205,14 +207,14 @@ test.describe('Feature Flags', () => {
   test('Client feature flags are immutable', async ({ comfyPage }) => {
     // Test that getClientFeatureFlags returns a copy
     const immutabilityTest = await comfyPage.page.evaluate(() => {
-      const flags1 = window['app'].api.getClientFeatureFlags()
-      const flags2 = window['app'].api.getClientFeatureFlags()
+      const flags1 = window['app']!.api.getClientFeatureFlags()
+      const flags2 = window['app']!.api.getClientFeatureFlags()
 
       // Modify the first object
       flags1.test_modification = true
 
       // Get flags again to check if original was modified
-      const flags3 = window['app'].api.getClientFeatureFlags()
+      const flags3 = window['app']!.api.getClientFeatureFlags()
 
       return {
         areEqual: flags1 === flags2,
@@ -238,14 +240,14 @@ test.describe('Feature Flags', () => {
   }) => {
     const immutabilityTest = await comfyPage.page.evaluate(() => {
       // Get a copy of server features
-      const features1 = window['app'].api.getServerFeatures()
+      const features1 = window['app']!.api.getServerFeatures()
 
       // Try to modify it
       features1.supports_preview_metadata = false
       features1.new_feature = 'added'
 
       // Get another copy
-      const features2 = window['app'].api.getServerFeatures()
+      const features2 = window['app']!.api.getServerFeatures()
 
       return {
         modifiedValue: features1.supports_preview_metadata,
@@ -274,7 +276,8 @@ test.describe('Feature Flags', () => {
     // Set up monitoring before navigation
     await newPage.addInitScript(() => {
       // Track when various app components are ready
-      ;(window as any).__appReadiness = {
+
+      window.__appReadiness = {
         featureFlagsReceived: false,
         apiInitialized: false,
         appInitialized: false
@@ -286,7 +289,10 @@ test.describe('Feature Flags', () => {
           window['app']?.api?.serverFeatureFlags?.supports_preview_metadata !==
           undefined
         ) {
-          ;(window as any).__appReadiness.featureFlagsReceived = true
+          window.__appReadiness = {
+            ...window.__appReadiness,
+            featureFlagsReceived: true
+          }
           clearInterval(checkFeatureFlags)
         }
       }, 10)
@@ -294,7 +300,10 @@ test.describe('Feature Flags', () => {
       // Monitor API initialization
       const checkApi = setInterval(() => {
         if (window['app']?.api) {
-          ;(window as any).__appReadiness.apiInitialized = true
+          window.__appReadiness = {
+            ...window.__appReadiness,
+            apiInitialized: true
+          }
           clearInterval(checkApi)
         }
       }, 10)
@@ -302,7 +311,10 @@ test.describe('Feature Flags', () => {
       // Monitor app initialization
       const checkApp = setInterval(() => {
         if (window['app']?.graph) {
-          ;(window as any).__appReadiness.appInitialized = true
+          window.__appReadiness = {
+            ...window.__appReadiness,
+            appInitialized: true
+          }
           clearInterval(checkApp)
         }
       }, 10)
@@ -331,8 +343,8 @@ test.describe('Feature Flags', () => {
     // Get readiness state
     const readiness = await newPage.evaluate(() => {
       return {
-        ...(window as any).__appReadiness,
-        currentFlags: window['app'].api.serverFeatureFlags
+        ...window.__appReadiness,
+        currentFlags: window['app']!.api.serverFeatureFlags
       }
     })
 

browser_tests/tests/nodeHelp.spec.ts

@@ -2,15 +2,17 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import { fitToViewInstant } from '../helpers/fitToView'
+import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 // TODO: there might be a better solution for this
 // Helper function to pan canvas and select node
-async function selectNodeWithPan(comfyPage: any, nodeRef: any) {
+async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
   const nodePos = await nodeRef.getPosition()
 
   await comfyPage.page.evaluate((pos) => {
-    const app = window['app']
+    const app = window['app']!
     const canvas = app.canvas
     canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
     canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2 + 100
@@ -345,7 +347,7 @@ This is documentation for a custom node.
 
       // Find and select a custom/group node
       const nodeRefs = await comfyPage.page.evaluate(() => {
-        return window['app'].graph.nodes.map((n: any) => n.id)
+        return window['app']!.graph!.nodes.map((n) => n.id)
       })
       if (nodeRefs.length > 0) {
         const firstNode = await comfyPage.getNodeRefById(nodeRefs[0])

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -15,7 +16,7 @@ test.describe('Selection Toolbox - More Options Submenus', () => {
     await comfyPage.nextFrame()
   })
 
-  const openMoreOptions = async (comfyPage: any) => {
+  const openMoreOptions = async (comfyPage: ComfyPage) => {
     const ksamplerNodes = await comfyPage.getNodeRefsByTitle('KSampler')
     if (ksamplerNodes.length === 0) {
       throw new Error('No KSampler nodes found')

browser_tests/tests/templates.spec.ts

@@ -82,9 +82,7 @@ test.describe('Templates', () => {
     await expect(comfyPage.templates.content).toBeVisible()
 
     await comfyPage.page
-      .locator(
-        'nav > div:nth-child(3) > div > span:has-text("Getting Started")'
-      )
+      .getByRole('button', { name: 'Getting Started' })
       .click()
     await comfyPage.templates.loadTemplate('default')
     await expect(comfyPage.templates.content).toBeHidden()
@@ -189,9 +187,7 @@ test.describe('Templates', () => {
     const templateGrid = comfyPage.page.locator(
       '[data-testid="template-workflows-content"]'
     )
-    const nav = comfyPage.page
-      .locator('header')
-      .filter({ hasText: 'Templates' })
+    const nav = comfyPage.page.locator('header', { hasText: 'Templates' })
 
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
@@ -201,7 +197,8 @@ test.describe('Templates', () => {
     await comfyPage.page.setViewportSize(mobileSize)
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
-    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
+    // Nav header is clipped by overflow-hidden parent at mobile size
+    await expect(nav).not.toBeInViewport()
 
     const tabletSize = { width: 1024, height: 800 }
     await comfyPage.page.setViewportSize(tabletSize)

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

@@ -419,7 +419,7 @@ test.describe('Vue Node Link Interaction', () => {
     // This avoids relying on an exact path hit-test position.
     await comfyPage.page.evaluate(
       ([targetNodeId, targetSlot, clientPoint]) => {
-        const app = (window as any)['app']
+        const app = window['app']
         const graph = app?.canvas?.graph ?? app?.graph
         if (!graph) throw new Error('Graph not available')
         const node = graph.getNodeById(targetNodeId)
@@ -505,7 +505,7 @@ test.describe('Vue Node Link Interaction', () => {
     // This avoids relying on an exact path hit-test position.
     await comfyPage.page.evaluate(
       ([targetNodeId, targetSlot, clientPoint]) => {
-        const app = (window as any)['app']
+        const app = window['app']
         const graph = app?.canvas?.graph ?? app?.graph
         if (!graph) throw new Error('Graph not available')
         const node = graph.getNodeById(targetNodeId)

build/plugins/comfyAPIPlugin.ts

@@ -76,6 +76,7 @@ function getModuleName(id: string): string {
 export function comfyAPIPlugin(isDev: boolean): Plugin {
   return {
     name: 'comfy-api-plugin',
+    apply: 'build',
     transform(code: string, id: string) {
       if (isDev) return null
 

build/tsconfig.json

@@ -5,7 +5,7 @@
     "noEmit": true,
     "strict": true,
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

docs/guidance/code-style.md

@@ -0,0 +1,56 @@
+---
+globs:
+  - '**/*.ts'
+  - '**/*.tsx'
+  - '**/*.vue'
+---
+
+# Code Style
+
+## Formatting (via oxfmt)
+
+- 2-space indent
+- Single quotes
+- No trailing semicolons
+- 80 character width
+
+Run `pnpm format` before committing.
+
+## Imports
+
+Use separate `import type` statements:
+
+```typescript
+// ✅ Correct
+import type { Foo } from './foo'
+import { bar } from './foo'
+
+// ❌ Wrong
+import { bar, type Foo } from './foo'
+```
+
+## Naming
+
+- Vue components: `PascalCase.vue` (e.g., `MenuHamburger.vue`)
+- Composables: `useXyz.ts`
+- Pinia stores: `*Store.ts`
+
+## Code Organization
+
+- Minimize exported surface area per module
+- No barrel files (`index.ts` re-exports) within `src/`
+- Prefer function declarations over function expressions
+- Keep functions short and focused
+- Minimize nesting (avoid arrow anti-pattern)
+- Favor immutability and pure functions
+
+## Comments
+
+Code should be self-documenting. Avoid comments unless absolutely necessary. If you must comment, explain *why*, not *what*.
+
+## Libraries
+
+- Use `es-toolkit` for utilities (not lodash)
+- Use `VueUse` for reactive utilities
+- Avoid new PrimeVue component usage
+- Use vue-i18n for all user-facing strings

docs/guidance/git-workflow.md

@@ -0,0 +1,31 @@
+---
+globs:
+  - '.github/**/*'
+---
+
+# Git & PR Workflow
+
+## Commit Messages
+
+Use `prefix:` format: `feat:`, `fix:`, `test:`, `refactor:`, `docs:`
+
+Never mention Claude/AI in commits.
+
+## Pull Requests
+
+- Reference linked issues: `Fixes #123`
+- Keep descriptions concise and information-dense
+- No emojis or excessive headers
+- Follow the template in `.github/`
+- Keep PRs focused — suggest splitting if >300 lines of non-test code
+
+## Quality Gates (CI)
+
+All must pass before merge:
+
+- `pnpm lint`
+- `pnpm typecheck`
+- `pnpm knip`
+- Relevant tests
+
+Never use `--no-verify` to bypass failing tests. If tests fail, identify root cause and fix or document blockers.

docs/guidance/tailwind.md

@@ -0,0 +1,45 @@
+---
+globs:
+  - '**/*.vue'
+  - '**/*.css'
+---
+
+# Tailwind Conventions
+
+## Class Merging
+
+Always use `cn()` for conditional classes:
+
+```vue
+<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />
+```
+
+Never use `:class="[]"` array syntax.
+
+## Theme & Dark Mode
+
+Never use the `dark:` variant. Use semantic tokens from `style.css`:
+
+```vue
+<!-- ❌ Wrong -->
+<div class="bg-white dark:bg-gray-900" />
+
+<!-- ✅ Correct -->
+<div class="bg-node-component-surface" />
+```
+
+## Sizing
+
+Use Tailwind fraction utilities, not arbitrary percentages:
+
+```vue
+<!-- ❌ Wrong -->
+<div class="w-[80%] h-[50%]" />
+
+<!-- ✅ Correct -->
+<div class="w-4/5 h-1/2" />
+```
+
+## Specificity
+
+Never use `!important` or the `!` prefix. If existing `!important` rules interfere, fix those instead.

docs/guidance/vue-components.md

@@ -10,10 +10,30 @@ Applies to all `.vue` files anywhere in the codebase.
 ## Vue 3 Composition API
 
 - Use `<script setup lang="ts">` for component logic
-- Destructure props (Vue 3.5 style with defaults) like `const { color = 'blue' } = defineProps<...>()`
-- Use `ref`/`reactive` for state
-- Use `computed()` for derived state
+- Destructure props (Vue 3.5 style with defaults):
+
+  ```typescript
+  const { nodes, showTotal = true } = defineProps<{
+    nodes: ApiNodeCost[]
+    showTotal?: boolean
+  }>()
+  ```
+
+- Do not use `withDefaults` or runtime props declaration
+- Do not import Vue macros unnecessarily
+- Prefer `defineModel` over separate prop/emit for v-model bindings
+- Define slots via template usage, not `defineSlots`
+- Use same-name shorthand for slot props: `:is-expanded` not `:is-expanded="isExpanded"`
+- Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`)
+
+## State Management
+
+- Use `ref`/`reactive` for state, `computed()` for derived state
 - Use lifecycle hooks: `onMounted`, `onUpdated`, etc.
+- Prefer `computed` over `watch` when possible
+- Prefer `watch`/`watchEffect` only for side effects
+- Be judicious with refs — if a prop suffices, don't add a ref
+- Use provide/inject only when a Store or shared composable won't work
 
 ## Component Communication
 

docs/testing/vitest-patterns.md

@@ -30,6 +30,10 @@ describe('MyStore', () => {
 
 **Why `stubActions: false`?** By default, testing pinia stubs all actions. Set to `false` when testing actual store behavior.
 
+## i18n in Component Tests
+
+Use real `createI18n` with empty messages instead of mocking `vue-i18n`. See `SearchBox.test.ts` for example.
+
 ## Mock Patterns
 
 ### Reset all mocks at once

index.html

@@ -10,7 +10,21 @@
     <meta name="mobile-web-app-capable" content="yes">
     <!-- Status bar style (eg. black or transparent) -->
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    
+    <style>
+      @media (prefers-color-scheme: dark) {
+        body {
+          /* Setting it early for background during load */
+          --bg-color: #202020;
+        }
+      }
+      body {
+        background-color: var(--bg-color);
+        background-image: var(--bg-img);
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+    </style>    
     <link rel="manifest" href="manifest.json">
   </head>
   

manifest.json

@@ -11,6 +11,6 @@
     }
   ],
   "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#000000"
+  "background_color": "#172dd7",
+  "theme_color": "#f0ff41"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.38.8",
+  "version": "1.38.11",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -169,6 +169,7 @@
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
     "glob": "^11.0.3",
+    "jsonata": "catalog:",
     "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",

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

@@ -584,8 +584,6 @@ body {
   height: 100vh;
   margin: 0;
   overflow: hidden;
-  background: var(--bg-color) var(--bg-img);
-  color: var(--fg-color);
   min-height: -webkit-fill-available;
   max-height: -webkit-fill-available;
   min-width: -webkit-fill-available;

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

@@ -1,19 +0,0 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <clipPath id="hollow">
-      <path
-    d="M -50 50
-       A 100 100, 0, 0, 1, 150 50
-       A 100 100, 0, 0, 1, -50 50
-       M 30 50
-       A 20 20, 0, 0, 0, 70 50
-       A 20 20, 0, 0, 0, 30 50"/>
-    </clipPath>
-  </defs>
-  <g clip-path="var(--shape)" stroke-width="4">
-    <path d="M 50 0 A 50 50, 0, 0, 1, 50 100" fill="var(--type1, red)"/>
-    <path d="M 50 100 A 50 50, 0, 0, 1, 50 0" fill="var(--type2, blue)"/>
-    <path d="M50 0L50 100" stroke="var(--inner-stroke, black)"/>
-    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
-  </g>
-</svg>

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

@@ -1,20 +0,0 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <clipPath id="hollow">
-        <path
-    d="M-50 50
-       A100 100 0 0 1 150 50
-       A100 100 0 0 1 -50 50
-       M30 50
-       A20 20 0 0 0 70 50
-       A20 20 0 0 0 30 50"/>
-    </clipPath>
-  </defs>
-  <g clip-path="var(--shape)" stroke-width="4">
-    <path d="M50 0A50 50 0 0 1 93 75L50 50" fill="var(--type1, red)"/>
-    <path d="M93 75A50 50 0 0 1 7 75L50 50" fill="var(--type2, blue)"/>
-    <path d="M7 75A50 50 0 0 1 50 0L50 50" fill="var(--type3, green)"/>
-    <path d="M50 50L50 0M50 50L93 75M50 50L7 75" stroke="var(--inner-stroke, black)"/>
-    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
-  </g>
-</svg>

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

@@ -120,8 +120,8 @@ describe('formatUtil', () => {
       })
 
       it('should handle null and undefined gracefully', () => {
-        expect(getMediaTypeFromFilename(null as any)).toBe('image')
-        expect(getMediaTypeFromFilename(undefined as any)).toBe('image')
+        expect(getMediaTypeFromFilename(null)).toBe('image')
+        expect(getMediaTypeFromFilename(undefined)).toBe('image')
       })
 
       it('should handle special characters in filenames', () => {

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

@@ -537,7 +537,9 @@ export function truncateFilename(
  * @param filename The filename to analyze
  * @returns The media type: 'image', 'video', 'audio', or '3D'
  */
-export function getMediaTypeFromFilename(filename: string): MediaType {
+export function getMediaTypeFromFilename(
+  filename: string | null | undefined
+): MediaType {
   if (!filename) return 'image'
   const ext = filename.split('.').pop()?.toLowerCase()
   if (!ext) return 'image'

pnpm-lock.yaml

@@ -186,6 +186,9 @@ catalogs:
     jsdom:
       specifier: ^27.4.0
       version: 27.4.0
+    jsonata:
+      specifier: ^2.1.0
+      version: 2.1.0
     knip:
       specifier: ^5.75.1
       version: 5.75.1
@@ -449,6 +452,9 @@ importers:
       glob:
         specifier: ^11.0.3
         version: 11.0.3
+      jsonata:
+        specifier: 'catalog:'
+        version: 2.1.0
       jsondiffpatch:
         specifier: ^0.6.0
         version: 0.6.0
@@ -6045,6 +6051,10 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonata@2.1.0:
+    resolution: {integrity: sha512-OCzaRMK8HobtX8fp37uIVmL8CY1IGc/a6gLsDqz3quExFR09/U78HUzWYr7T31UEB6+Eu0/8dkVD5fFDOl9a8w==}
+    engines: {node: '>= 8'}
+
   jsonc-eslint-parser@2.4.0:
     resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -14403,6 +14413,8 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonata@2.1.0: {}
+
   jsonc-eslint-parser@2.4.0:
     dependencies:
       acorn: 8.15.0

pnpm-workspace.yaml

@@ -62,6 +62,7 @@ catalog:
   happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
+  jsonata: ^2.1.0
   jsdom: ^27.4.0
   knip: ^5.75.1
   lint-staged: ^16.2.7

src/App.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script setup lang="ts">
+import { captureException } from '@sentry/vue'
 import { useEventListener } from '@vueuse/core'
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -16,10 +17,6 @@ import { computed, onMounted } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
-import { t } from '@/i18n'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { app } from '@/scripts/app'
-import { useDialogService } from '@/services/dialogService'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
@@ -27,8 +24,6 @@ import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const conflictDetection = useConflictDetection()
-const workflowStore = useWorkflowStore()
-const dialogService = useDialogService()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
 const handleKey = (e: KeyboardEvent) => {
   workspaceStore.shiftDown = e.shiftKey
@@ -54,23 +49,15 @@ onMounted(() => {
     document.addEventListener('contextmenu', showContextMenu)
   }
 
-  // Handle Vite preload errors (e.g., when assets are deleted after deployment)
-  window.addEventListener('vite:preloadError', async (_event) => {
-    // Auto-reload if app is not ready or there are no unsaved changes
-    if (!app.vueAppReady || !workflowStore.activeWorkflow?.isModified) {
-      window.location.reload()
+  window.addEventListener('vite:preloadError', (event) => {
+    event.preventDefault()
+    // eslint-disable-next-line no-undef
+    if (__DISTRIBUTION__ === 'cloud') {
+      captureException(event.payload, {
+        tags: { error_type: 'vite_preload_error' }
+      })
     } else {
-      // Show confirmation dialog if there are unsaved changes
-      await dialogService
-        .confirm({
-          title: t('g.vitePreloadErrorTitle'),
-          message: t('g.vitePreloadErrorMessage')
-        })
-        .then((confirmed) => {
-          if (confirmed) {
-            window.location.reload()
-          }
-        })
+      console.error('[vite:preloadError]', event.payload)
     }
   })
 

src/base/common/async.ts

@@ -14,6 +14,7 @@ interface IdleDeadline {
 interface IDisposable {
   dispose(): void
 }
+type GlobalWindow = typeof globalThis
 
 /**
  * Internal implementation function that handles the actual scheduling logic.
@@ -21,7 +22,7 @@ interface IDisposable {
  * or fall back to setTimeout-based implementation.
  */
 let _runWhenIdle: (
-  targetWindow: any,
+  targetWindow: GlobalWindow,
   callback: (idle: IdleDeadline) => void,
   timeout?: number
 ) => IDisposable
@@ -37,7 +38,7 @@ export let runWhenGlobalIdle: (
 
   // Self-invoking function to set up the idle callback implementation
 ;(function () {
-  const safeGlobal: any = globalThis
+  const safeGlobal: GlobalWindow = globalThis as GlobalWindow
 
   if (
     typeof safeGlobal.requestIdleCallback !== 'function' ||

src/components/TopMenuSection.test.ts

@@ -1,12 +1,21 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
+import type { MenuItem } from 'primevue/menuitem'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed } from 'vue'
+import { computed, nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
+import type {
+  JobListItem,
+  JobStatus
+} from '@/platform/remote/comfyui/jobs/jobTypes'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { isElectron } from '@/utils/envUtil'
 
 const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
@@ -27,7 +36,7 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   }))
 }))
 
-function createWrapper() {
+function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -36,7 +45,9 @@ function createWrapper() {
         sideToolbar: {
           queueProgressOverlay: {
             viewJobHistory: 'View job history',
-            expandCollapsedQueue: 'Expand collapsed queue'
+            expandCollapsedQueue: 'Expand collapsed queue',
+            activeJobsShort: '{count} active | {count} active',
+            clearQueueTooltip: 'Clear queue'
           }
         }
       }
@@ -45,12 +56,17 @@ function createWrapper() {
 
   return mount(TopMenuSection, {
     global: {
-      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
+      plugins: [pinia, i18n],
       stubs: {
         SubgraphBreadcrumb: true,
         QueueProgressOverlay: true,
         CurrentUserButton: true,
-        LoginButton: true
+        LoginButton: true,
+        ContextMenu: {
+          name: 'ContextMenu',
+          props: ['model'],
+          template: '<div />'
+        }
       },
       directives: {
         tooltip: () => {}
@@ -59,6 +75,19 @@ function createWrapper() {
   })
 }
 
+function createJob(id: string, status: JobStatus): JobListItem {
+  return {
+    id,
+    status,
+    create_time: 0,
+    priority: 0
+  }
+}
+
+function createTask(id: string, status: JobStatus): TaskItemImpl {
+  return new TaskItemImpl(createJob(id, status))
+}
+
 describe('TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -100,4 +129,104 @@ describe('TopMenuSection', () => {
       })
     })
   })
+
+  it('shows the active jobs label with the current count', async () => {
+    const wrapper = createWrapper()
+    const queueStore = useQueueStore()
+    queueStore.pendingTasks = [createTask('pending-1', 'pending')]
+    queueStore.runningTasks = [
+      createTask('running-1', 'in_progress'),
+      createTask('running-2', 'in_progress')
+    ]
+
+    await nextTick()
+
+    const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
+    expect(queueButton.text()).toContain('3 active')
+  })
+
+  it('hides queue progress overlay when QPO V2 is enabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+    const wrapper = createWrapper(pinia)
+
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="queue-overlay-toggle"]').exists()).toBe(
+      true
+    )
+    expect(
+      wrapper.findComponent({ name: 'QueueProgressOverlay' }).exists()
+    ).toBe(false)
+  })
+
+  it('toggles the queue progress overlay when QPO V2 is disabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? false : undefined
+    )
+    const wrapper = createWrapper(pinia)
+    const commandStore = useCommandStore(pinia)
+
+    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+
+    expect(commandStore.execute).toHaveBeenCalledWith(
+      'Comfy.Queue.ToggleOverlay'
+    )
+  })
+
+  it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+    const wrapper = createWrapper(pinia)
+    const sidebarTabStore = useSidebarTabStore(pinia)
+
+    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+
+    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+  })
+
+  it('toggles the assets sidebar tab when QPO V2 is enabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+    const wrapper = createWrapper(pinia)
+    const sidebarTabStore = useSidebarTabStore(pinia)
+    const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
+
+    await toggleButton.trigger('click')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+
+    await toggleButton.trigger('click')
+    expect(sidebarTabStore.activeSidebarTabId).toBe(null)
+  })
+
+  it('disables the clear queue context menu item when no queued jobs exist', () => {
+    const wrapper = createWrapper()
+    const menu = wrapper.findComponent({ name: 'ContextMenu' })
+    const model = menu.props('model') as MenuItem[]
+    expect(model[0]?.label).toBe('Clear queue')
+    expect(model[0]?.disabled).toBe(true)
+  })
+
+  it('enables the clear queue context menu item when queued jobs exist', async () => {
+    const wrapper = createWrapper()
+    const queueStore = useQueueStore()
+    queueStore.pendingTasks = [createTask('pending-1', 'pending')]
+
+    await nextTick()
+
+    const menu = wrapper.findComponent({ name: 'ContextMenu' })
+    const model = menu.props('model') as MenuItem[]
+    expect(model[0]?.disabled).toBe(false)
+  })
 })

src/components/TopMenuSection.vue

@@ -44,21 +44,31 @@
           <Button
             v-tooltip.bottom="queueHistoryTooltipConfig"
             type="destructive"
-            size="icon"
-            :aria-pressed="isQueueOverlayExpanded"
-            :aria-label="
-              t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+            size="md"
+            :aria-pressed="
+              isQueuePanelV2Enabled
+                ? activeSidebarTabId === 'assets'
+                : isQueueProgressOverlayEnabled
+                  ? isQueueOverlayExpanded
+                  : undefined
             "
+            class="px-3"
+            data-testid="queue-overlay-toggle"
             @click="toggleQueueOverlay"
+            @contextmenu.stop.prevent="showQueueContextMenu"
           >
-            <i class="icon-[lucide--history] size-4" />
-            <span
-              v-if="queuedCount > 0"
-              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground"
-            >
-              {{ queuedCount }}
+            <span class="text-sm font-normal tabular-nums">
+              {{ activeJobsLabel }}
+            </span>
+            <span class="sr-only">
+              {{
+                isQueuePanelV2Enabled
+                  ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
+                  : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+              }}
             </span>
           </Button>
+          <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
           <CurrentUserButton
             v-if="isLoggedIn && !isIntegratedTabBar"
             class="shrink-0"
@@ -77,6 +87,7 @@
         </div>
       </div>
       <QueueProgressOverlay
+        v-if="isQueueProgressOverlayEnabled"
         v-model:expanded="isQueueOverlayExpanded"
         :menu-hovered="isTopMenuHovered"
       />
@@ -86,6 +97,8 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
+import ContextMenu from 'primevue/contextmenu'
+import type { MenuItem } from 'primevue/menuitem'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -103,8 +116,10 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
@@ -117,27 +132,56 @@ const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
-const { t } = useI18n()
+const { t, n } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
+const executionStore = useExecutionStore()
 const queueUIStore = useQueueUIStore()
+const sidebarTabStore = useSidebarTabStore()
+const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
+const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
 const releaseStore = useReleaseStore()
 const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
   useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
-const queuedCount = computed(() => queueStore.pendingTasks.length)
+const activeJobsLabel = computed(() => {
+  const count = activeJobsCount.value
+  return t(
+    'sideToolbar.queueProgressOverlay.activeJobsShort',
+    { count: n(count) },
+    count
+  )
+})
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
+const isQueueProgressOverlayEnabled = computed(
+  () => !isQueuePanelV2Enabled.value
+)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
 const customNodesManagerTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.customNodesManager'))
 )
+const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
+const queueContextMenuItems = computed<MenuItem[]>(() => [
+  {
+    label: t('sideToolbar.queueProgressOverlay.clearQueueTooltip'),
+    icon: 'icon-[lucide--list-x] text-destructive-background',
+    class: '*:text-destructive-background',
+    disabled: queueStore.pendingTasks.length === 0,
+    command: () => {
+      void handleClearQueue()
+    }
+  }
+])
 
 // Use either release red dot or conflict red dot
 const shouldShowRedDot = computed((): boolean => {
@@ -161,9 +205,26 @@ onMounted(() => {
 })
 
 const toggleQueueOverlay = () => {
+  if (isQueuePanelV2Enabled.value) {
+    sidebarTabStore.toggleSidebarTab('assets')
+    return
+  }
   commandStore.execute('Comfy.Queue.ToggleOverlay')
 }
 
+const showQueueContextMenu = (event: MouseEvent) => {
+  queueContextMenu.value?.show(event)
+}
+
+const handleClearQueue = async () => {
+  const pendingPromptIds = queueStore.pendingTasks
+    .map((task) => task.promptId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
+  await commandStore.execute('Comfy.ClearPendingTasks')
+  executionStore.clearInitializationByPromptIds(pendingPromptIds)
+}
+
 const openCustomNodeManager = async () => {
   try {
     await managerState.openManager({

src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -1,6 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
+import type { Mock } from 'vitest'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -151,8 +152,8 @@ describe('BaseTerminal', () => {
     // Trigger the selection change callback that was registered during mount
     expect(mockTerminal.onSelectionChange).toHaveBeenCalled()
     // Access the mock calls - TypeScript can't infer the mock structure dynamically
-    const selectionCallback = (mockTerminal.onSelectionChange as any).mock
-      .calls[0][0]
+    const mockCalls = (mockTerminal.onSelectionChange as Mock).mock.calls
+    const selectionCallback = mockCalls[0][0] as () => void
     selectionCallback()
     await nextTick()
 

src/components/common/EditableText.test.ts

@@ -51,7 +51,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await wrapper.findComponent(InputText).setValue('New Text')
-    await wrapper.findComponent(InputText).trigger('keyup.enter')
+    await wrapper.findComponent(InputText).trigger('keydown.enter')
     // Blur event should have been triggered
     expect(wrapper.findComponent(InputText).element).not.toBe(
       document.activeElement
@@ -79,7 +79,7 @@ describe('EditableText', () => {
     await wrapper.findComponent(InputText).setValue('Modified Text')
 
     // Press escape
-    await wrapper.findComponent(InputText).trigger('keyup.escape')
+    await wrapper.findComponent(InputText).trigger('keydown.escape')
 
     // Should emit cancel event
     expect(wrapper.emitted('cancel')).toBeTruthy()
@@ -103,7 +103,7 @@ describe('EditableText', () => {
     await wrapper.findComponent(InputText).setValue('Modified Text')
 
     // Press escape (which triggers blur internally)
-    await wrapper.findComponent(InputText).trigger('keyup.escape')
+    await wrapper.findComponent(InputText).trigger('keydown.escape')
 
     // Manually trigger blur to simulate the blur that happens after escape
     await wrapper.findComponent(InputText).trigger('blur')
@@ -120,7 +120,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await enterWrapper.findComponent(InputText).setValue('Saved Text')
-    await enterWrapper.findComponent(InputText).trigger('keyup.enter')
+    await enterWrapper.findComponent(InputText).trigger('keydown.enter')
     // Trigger blur that happens after enter
     await enterWrapper.findComponent(InputText).trigger('blur')
     expect(enterWrapper.emitted('edit')).toBeTruthy()
@@ -133,7 +133,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
-    await escapeWrapper.findComponent(InputText).trigger('keyup.escape')
+    await escapeWrapper.findComponent(InputText).trigger('keydown.escape')
     expect(escapeWrapper.emitted('cancel')).toBeTruthy()
     expect(escapeWrapper.emitted('edit')).toBeFalsy()
   })

src/components/common/EditableText.vue

@@ -3,7 +3,7 @@
     <span v-if="!isEditing">
       {{ modelValue }}
     </span>
-    <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
+    <!-- Avoid double triggering finishEditing event when keydown.enter is triggered -->
     <InputText
       v-else
       ref="inputRef"
@@ -18,8 +18,8 @@
           ...inputAttrs
         }
       }"
-      @keyup.enter.capture.stop="blurInputElement"
-      @keyup.escape.stop="cancelEditing"
+      @keydown.enter.capture.stop="blurInputElement"
+      @keydown.escape.capture.stop="cancelEditing"
       @click.stop
       @contextmenu.stop
       @pointerdown.stop.capture

src/components/common/FormRadioGroup.test.ts

@@ -7,6 +7,7 @@ import { createApp } from 'vue'
 import type { SettingOption } from '@/platform/settings/types'
 
 import FormRadioGroup from './FormRadioGroup.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
 describe('FormRadioGroup', () => {
   beforeAll(() => {
@@ -14,7 +15,8 @@ describe('FormRadioGroup', () => {
     app.use(PrimeVue)
   })
 
-  const mountComponent = (props: any, options = {}) => {
+  type FormRadioGroupProps = ComponentProps<typeof FormRadioGroup>
+  const mountComponent = (props: FormRadioGroupProps, options = {}) => {
     return mount(FormRadioGroup, {
       global: {
         plugins: [PrimeVue],
@@ -92,9 +94,9 @@ describe('FormRadioGroup', () => {
 
     it('handles custom object with optionLabel and optionValue', () => {
       const options = [
-        { name: 'First Option', id: 1 },
-        { name: 'Second Option', id: 2 },
-        { name: 'Third Option', id: 3 }
+        { name: 'First Option', id: '1' },
+        { name: 'Second Option', id: '2' },
+        { name: 'Third Option', id: '3' }
       ]
 
       const wrapper = mountComponent({
@@ -108,9 +110,9 @@ describe('FormRadioGroup', () => {
       const radioButtons = wrapper.findAllComponents(RadioButton)
       expect(radioButtons).toHaveLength(3)
 
-      expect(radioButtons[0].props('value')).toBe(1)
-      expect(radioButtons[1].props('value')).toBe(2)
-      expect(radioButtons[2].props('value')).toBe(3)
+      expect(radioButtons[0].props('value')).toBe('1')
+      expect(radioButtons[1].props('value')).toBe('2')
+      expect(radioButtons[2].props('value')).toBe('3')
 
       const labels = wrapper.findAll('label')
       expect(labels[0].text()).toBe('First Option')
@@ -167,10 +169,7 @@ describe('FormRadioGroup', () => {
     })
 
     it('handles object with missing properties gracefully', () => {
-      const options = [
-        { label: 'Option 1', val: 'opt1' },
-        { text: 'Option 2', value: 'opt2' }
-      ]
+      const options = [{ label: 'Option 1', val: 'opt1' }]
 
       const wrapper = mountComponent({
         modelValue: 'opt1',
@@ -179,11 +178,10 @@ describe('FormRadioGroup', () => {
       })
 
       const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(2)
+      expect(radioButtons).toHaveLength(1)
 
       const labels = wrapper.findAll('label')
       expect(labels[0].text()).toBe('Unknown')
-      expect(labels[1].text()).toBe('Option 2')
     })
   })
 

src/components/common/FormRadioGroup.vue

@@ -28,7 +28,7 @@ import type { SettingOption } from '@/platform/settings/types'
 
 const props = defineProps<{
   modelValue: any
-  options: (SettingOption | string)[]
+  options?: (string | SettingOption | Record<string, string>)[]
   optionLabel?: string
   optionValue?: string
   id?: string

src/components/common/StatusBadge.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import StatusBadge from './StatusBadge.vue'
+
+const meta = {
+  title: 'Common/StatusBadge',
+  component: StatusBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    severity: {
+      control: 'select',
+      options: ['default', 'secondary', 'warn', 'danger', 'contrast']
+    },
+    variant: {
+      control: 'select',
+      options: ['label', 'dot', 'circle']
+    }
+  },
+  args: {
+    label: 'Status',
+    severity: 'default'
+  }
+} satisfies Meta<typeof StatusBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Failed: Story = {
+  args: {
+    label: 'Failed',
+    severity: 'danger'
+  }
+}
+
+export const Finished: Story = {
+  args: {
+    label: 'Finished',
+    severity: 'contrast'
+  }
+}
+
+export const Dot: Story = {
+  args: {
+    label: undefined,
+    variant: 'dot',
+    severity: 'danger'
+  }
+}
+
+export const Circle: Story = {
+  args: {
+    label: '3',
+    variant: 'circle'
+  }
+}
+
+export const AllSeverities: Story = {
+  render: () => ({
+    components: { StatusBadge },
+    template: `
+      <div class="flex items-center gap-2">
+        <StatusBadge label="Default" severity="default" />
+        <StatusBadge label="Secondary" severity="secondary" />
+        <StatusBadge label="Warn" severity="warn" />
+        <StatusBadge label="Danger" severity="danger" />
+        <StatusBadge label="Contrast" severity="contrast" />
+      </div>
+    `
+  })
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { StatusBadge },
+    template: `
+      <div class="flex items-center gap-4">
+        <div class="flex flex-col items-center gap-1">
+          <StatusBadge label="Label" variant="label" />
+          <span class="text-xs text-muted">label</span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <StatusBadge variant="dot" severity="danger" />
+          <span class="text-xs text-muted">dot</span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <StatusBadge label="5" variant="circle" />
+          <span class="text-xs text-muted">circle</span>
+        </div>
+      </div>
+    `
+  })
+}

src/components/common/StatusBadge.vue

@@ -1,30 +1,27 @@
 <script setup lang="ts">
-type Severity = 'default' | 'secondary' | 'warn' | 'danger' | 'contrast'
+import { statusBadgeVariants } from './statusBadge.variants'
+import type { StatusBadgeVariants } from './statusBadge.variants'
 
-const { label, severity = 'default' } = defineProps<{
-  label: string
-  severity?: Severity
+const {
+  label,
+  severity = 'default',
+  variant
+} = defineProps<{
+  label?: string | number
+  severity?: StatusBadgeVariants['severity']
+  variant?: StatusBadgeVariants['variant']
 }>()
-
-function badgeClasses(sev: Severity): string {
-  const baseClasses =
-    'inline-flex h-3.5 items-center justify-center rounded-full px-1 text-xxxs font-semibold uppercase'
-
-  switch (sev) {
-    case 'danger':
-      return `${baseClasses} bg-destructive-background text-white`
-    case 'contrast':
-      return `${baseClasses} bg-base-foreground text-base-background`
-    case 'warn':
-      return `${baseClasses} bg-warning-background text-base-background`
-    case 'secondary':
-      return `${baseClasses} bg-secondary-background text-base-foreground`
-    default:
-      return `${baseClasses} bg-primary-background text-base-foreground`
-  }
-}
 </script>
 
 <template>
-  <span :class="badgeClasses(severity)">{{ label }}</span>
+  <span
+    :class="
+      statusBadgeVariants({
+        severity,
+        variant: variant ?? (label == null ? 'dot' : 'label')
+      })
+    "
+  >
+    {{ label }}
+  </span>
 </template>

src/components/common/UrlInput.test.ts

@@ -7,6 +7,7 @@ import { beforeEach, describe, expect, it } from 'vitest'
 import { createApp, nextTick } from 'vue'
 
 import UrlInput from './UrlInput.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
 describe('UrlInput', () => {
   beforeEach(() => {
@@ -14,7 +15,13 @@ describe('UrlInput', () => {
     app.use(PrimeVue)
   })
 
-  const mountComponent = (props: any, options = {}) => {
+  const mountComponent = (
+    props: ComponentProps<typeof UrlInput> & {
+      placeholder?: string
+      disabled?: boolean
+    },
+    options = {}
+  ) => {
     return mount(UrlInput, {
       global: {
         plugins: [PrimeVue],
@@ -169,25 +176,25 @@ describe('UrlInput', () => {
       await input.setValue('  https://leading-space.com')
       await input.trigger('input')
       await nextTick()
-      expect(wrapper.vm.internalValue).toBe('https://leading-space.com')
+      expect(input.element.value).toBe('https://leading-space.com')
 
       // Test trailing whitespace
       await input.setValue('https://trailing-space.com  ')
       await input.trigger('input')
       await nextTick()
-      expect(wrapper.vm.internalValue).toBe('https://trailing-space.com')
+      expect(input.element.value).toBe('https://trailing-space.com')
 
       // Test both leading and trailing whitespace
       await input.setValue('  https://both-spaces.com  ')
       await input.trigger('input')
       await nextTick()
-      expect(wrapper.vm.internalValue).toBe('https://both-spaces.com')
+      expect(input.element.value).toBe('https://both-spaces.com')
 
       // Test whitespace in the middle of the URL
       await input.setValue('https:// middle-space.com')
       await input.trigger('input')
       await nextTick()
-      expect(wrapper.vm.internalValue).toBe('https://middle-space.com')
+      expect(input.element.value).toBe('https://middle-space.com')
     })
 
     it('trims whitespace when value set externally', async () => {
@@ -196,15 +203,17 @@ describe('UrlInput', () => {
         placeholder: 'Enter URL'
       })
 
+      const input = wrapper.find('input')
+
       // Check initial value is trimmed
-      expect(wrapper.vm.internalValue).toBe('https://initial-value.com')
+      expect(input.element.value).toBe('https://initial-value.com')
 
       // Update props with whitespace
       await wrapper.setProps({ modelValue: '  https://updated-value.com  ' })
       await nextTick()
 
       // Check updated value is trimmed
-      expect(wrapper.vm.internalValue).toBe('https://updated-value.com')
+      expect(input.element.value).toBe('https://updated-value.com')
     })
   })
 })

src/components/common/UserAvatar.test.ts

@@ -1,3 +1,5 @@
+import type { ComponentProps } from 'vue-component-type-helpers'
+
 import { mount } from '@vue/test-utils'
 import Avatar from 'primevue/avatar'
 import PrimeVue from 'primevue/config'
@@ -27,7 +29,7 @@ describe('UserAvatar', () => {
     app.use(PrimeVue)
   })
 
-  const mountComponent = (props: any = {}) => {
+  const mountComponent = (props: ComponentProps<typeof UserAvatar> = {}) => {
     return mount(UserAvatar, {
       global: {
         plugins: [PrimeVue, i18n],

src/components/common/VirtualGrid.vue

@@ -1,16 +1,20 @@
 <template>
-  <div ref="container" class="scroll-container">
-    <div :style="{ height: `${(state.start / cols) * itemHeight}px` }" />
-    <div :style="gridStyle">
-      <div v-for="item in renderedItems" :key="item.key" data-virtual-grid-item>
+  <div
+    ref="container"
+    class="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
+  >
+    <div :style="topSpacerStyle" />
+    <div :style="mergedGridStyle">
+      <div
+        v-for="item in renderedItems"
+        :key="item.key"
+        class="transition-[width] duration-150 ease-out"
+        data-virtual-grid-item
+      >
         <slot name="item" :item="item" />
       </div>
     </div>
-    <div
-      :style="{
-        height: `${((items.length - state.end) / cols) * itemHeight}px`
-      }"
-    />
+    <div :style="bottomSpacerStyle" />
   </div>
 </template>
 
@@ -28,19 +32,22 @@ type GridState = {
 
 const {
   items,
+  gridStyle,
   bufferRows = 1,
   scrollThrottle = 64,
   resizeDebounce = 64,
   defaultItemHeight = 200,
-  defaultItemWidth = 200
+  defaultItemWidth = 200,
+  maxColumns = Infinity
 } = defineProps<{
   items: (T & { key: string })[]
-  gridStyle: Partial<CSSProperties>
+  gridStyle: CSSProperties
   bufferRows?: number
   scrollThrottle?: number
   resizeDebounce?: number
   defaultItemHeight?: number
   defaultItemWidth?: number
+  maxColumns?: number
 }>()
 
 const emit = defineEmits<{
@@ -59,7 +66,18 @@ const { y: scrollY } = useScroll(container, {
   eventListenerOptions: { passive: true }
 })
 
-const cols = computed(() => Math.floor(width.value / itemWidth.value) || 1)
+const cols = computed(() =>
+  Math.min(Math.floor(width.value / itemWidth.value) || 1, maxColumns)
+)
+
+const mergedGridStyle = computed<CSSProperties>(() => {
+  if (maxColumns === Infinity) return gridStyle
+  return {
+    ...gridStyle,
+    gridTemplateColumns: `repeat(${maxColumns}, minmax(0, 1fr))`
+  }
+})
+
 const viewRows = computed(() => Math.ceil(height.value / itemHeight.value))
 const offsetRows = computed(() => Math.floor(scrollY.value / itemHeight.value))
 const isValidGrid = computed(() => height.value && width.value && items?.length)
@@ -83,6 +101,16 @@ const renderedItems = computed(() =>
   isValidGrid.value ? items.slice(state.value.start, state.value.end) : []
 )
 
+function rowsToHeight(rows: number): string {
+  return `${(rows / cols.value) * itemHeight.value}px`
+}
+const topSpacerStyle = computed<CSSProperties>(() => ({
+  height: rowsToHeight(state.value.start)
+}))
+const bottomSpacerStyle = computed<CSSProperties>(() => ({
+  height: rowsToHeight(items.length - state.value.end)
+}))
+
 whenever(
   () => state.value.isNearEnd,
   () => {
@@ -109,15 +137,6 @@ const onResize = debounce(updateItemSize, resizeDebounce)
 watch([width, height], onResize, { flush: 'post' })
 whenever(() => items, updateItemSize, { flush: 'post' })
 onBeforeUnmount(() => {
-  onResize.cancel() // Clear pending debounced calls
+  onResize.cancel()
 })
 </script>
-
-<style scoped>
-.scroll-container {
-  height: 100%;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--dialog-surface) transparent;
-}
-</style>

src/components/common/WorkspaceProfilePic.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="flex size-8 items-center justify-center rounded-md text-base font-semibold text-white"
+    :style="{
+      background: gradient,
+      textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)'
+    }"
+  >
+    {{ letter }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const { workspaceName } = defineProps<{
+  workspaceName: string
+}>()
+
+const letter = computed(() => workspaceName?.charAt(0)?.toUpperCase() ?? '?')
+
+const gradient = computed(() => {
+  const seed = letter.value.charCodeAt(0)
+
+  function mulberry32(a: number) {
+    return function () {
+      let t = (a += 0x6d2b79f5)
+      t = Math.imul(t ^ (t >>> 15), t | 1)
+      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+    }
+  }
+
+  const rand = mulberry32(seed)
+
+  const hue1 = Math.floor(rand() * 360)
+  const hue2 = (hue1 + 40 + Math.floor(rand() * 80)) % 360
+  const sat = 65 + Math.floor(rand() * 20)
+  const light = 55 + Math.floor(rand() * 15)
+
+  return `linear-gradient(135deg, hsl(${hue1}, ${sat}%, ${light}%), hsl(${hue2}, ${sat}%, ${light}%))`
+})
+</script>

src/components/common/statusBadge.variants.ts

@@ -0,0 +1,26 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const statusBadgeVariants = cva({
+  base: 'inline-flex items-center justify-center rounded-full',
+  variants: {
+    severity: {
+      default: 'bg-primary-background text-base-foreground',
+      secondary: 'bg-secondary-background text-base-foreground',
+      warn: 'bg-warning-background text-base-background',
+      danger: 'bg-destructive-background text-white',
+      contrast: 'bg-base-foreground text-base-background'
+    },
+    variant: {
+      label: 'h-3.5 px-1 text-xxxs font-semibold uppercase',
+      dot: 'size-2',
+      circle: 'size-3.5 text-xxxs font-semibold'
+    }
+  },
+  defaultVariants: {
+    severity: 'default',
+    variant: 'label'
+  }
+})
+
+export type StatusBadgeVariants = VariantProps<typeof statusBadgeVariants>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -3,17 +3,14 @@
     :content-title="$t('templateWorkflows.title', 'Workflow Templates')"
     class="workflow-template-selector-dialog"
   >
+    <template #leftPanelHeaderTitle>
+      <i class="icon-[comfy--template]" />
+      <h2 class="text-neutral text-base">
+        {{ $t('sideToolbar.templates', 'Templates') }}
+      </h2>
+    </template>
     <template #leftPanel>
-      <LeftSidePanel v-model="selectedNavItem" :nav-items="navItems">
-        <template #header-icon>
-          <i class="icon-[comfy--template]" />
-        </template>
-        <template #header-title>
-          <span class="text-neutral text-base">{{
-            $t('sideToolbar.templates', 'Templates')
-          }}</span>
-        </template>
-      </LeftSidePanel>
+      <LeftSidePanel v-model="selectedNavItem" :nav-items="navItems" />
     </template>
 
     <template #header>

src/components/dialog/GlobalDialog.vue

@@ -4,9 +4,14 @@
     v-for="item in dialogStore.dialogStack"
     :key="item.key"
     v-model:visible="item.visible"
-    class="global-dialog"
+    :class="[
+      'global-dialog',
+      item.key === 'global-settings' && teamWorkspacesEnabled
+        ? 'settings-dialog-workspace'
+        : ''
+    ]"
     v-bind="item.dialogComponentProps"
-    :pt="item.dialogComponentProps.pt"
+    :pt="getDialogPt(item)"
     :aria-labelledby="item.key"
   >
     <template #header>
@@ -36,11 +41,38 @@
 </template>
 
 <script setup lang="ts">
+import { merge } from 'es-toolkit/compat'
 import Dialog from 'primevue/dialog'
+import type { DialogPassThroughOptions } from 'primevue/dialog'
+import { computed } from 'vue'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
+import type { DialogComponentProps } from '@/stores/dialogStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
+const { flags } = useFeatureFlags()
+const teamWorkspacesEnabled = computed(
+  () => isCloud && flags.teamWorkspacesEnabled
+)
+
 const dialogStore = useDialogStore()
+
+function getDialogPt(item: {
+  key: string
+  dialogComponentProps: DialogComponentProps
+}): DialogPassThroughOptions {
+  const isWorkspaceSettingsDialog =
+    item.key === 'global-settings' && teamWorkspacesEnabled.value
+  const basePt = item.dialogComponentProps.pt || {}
+
+  if (isWorkspaceSettingsDialog) {
+    return merge(basePt, {
+      mask: { class: 'p-8' }
+    })
+  }
+  return basePt
+}
 </script>
 
 <style>
@@ -55,4 +87,30 @@ const dialogStore = useDialogStore()
   @apply p-2 2xl:p-[var(--p-dialog-content-padding)];
   @apply pt-0;
 }
+
+/* Workspace mode: wider settings dialog */
+.settings-dialog-workspace {
+  width: 100%;
+  max-width: 1440px;
+  height: 100%;
+}
+
+.settings-dialog-workspace .p-dialog-content {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.manager-dialog {
+  height: 80vh;
+  max-width: 1724px;
+  max-height: 1026px;
+}
+
+@media (min-width: 3000px) {
+  .manager-dialog {
+    max-width: 2200px;
+    max-height: 1320px;
+  }
+}
 </style>

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -31,7 +31,12 @@
         }}</label>
       </div>
 
-      <Button variant="secondary" autofocus @click="onCancel">
+      <Button
+        v-if="type !== 'info'"
+        variant="secondary"
+        autofocus
+        @click="onCancel"
+      >
         <i class="pi pi-undo" />
         {{ $t('g.cancel') }}
       </Button>
@@ -73,6 +78,10 @@
         <i class="pi pi-eraser" />
         {{ $t('desktopMenu.reinstall') }}
       </Button>
+      <!-- Info - just show an OK button -->
+      <Button v-else-if="type === 'info'" variant="primary" @click="onCancel">
+        {{ $t('g.ok') }}
+      </Button>
       <!-- Invalid - just show a close button. -->
       <Button v-else variant="primary" @click="onCancel">
         <i class="pi pi-times" />

src/components/dialog/content/setting/MembersPanelContent.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="grow overflow-auto pt-6">
+    <div
+      class="flex size-full flex-col gap-2 rounded-2xl border border-interface-stroke border-inter p-6"
+    >
+      <!-- Section Header -->
+      <div class="flex w-full items-center gap-9">
+        <div class="flex min-w-0 flex-1 items-baseline gap-2">
+          <span
+            v-if="uiConfig.showMembersList"
+            class="text-base font-semibold text-base-foreground"
+          >
+            <template v-if="activeView === 'active'">
+              {{
+                $t('workspacePanel.members.membersCount', {
+                  count: members.length
+                })
+              }}
+            </template>
+            <template v-else-if="permissions.canViewPendingInvites">
+              {{
+                $t(
+                  'workspacePanel.members.pendingInvitesCount',
+                  pendingInvites.length
+                )
+              }}
+            </template>
+          </span>
+        </div>
+        <div v-if="uiConfig.showSearch" class="flex items-start gap-2">
+          <SearchBox
+            v-model="searchQuery"
+            :placeholder="$t('g.search')"
+            size="lg"
+            class="w-64"
+          />
+        </div>
+      </div>
+
+      <!-- Members Content -->
+      <div class="flex min-h-0 flex-1 flex-col">
+        <!-- Table Header with Tab Buttons and Column Headers -->
+        <div
+          v-if="uiConfig.showMembersList"
+          :class="
+            cn(
+              'grid w-full items-center py-2',
+              activeView === 'pending'
+                ? uiConfig.pendingGridCols
+                : uiConfig.headerGridCols
+            )
+          "
+        >
+          <!-- Tab buttons in first column -->
+          <div class="flex items-center gap-2">
+            <Button
+              :variant="
+                activeView === 'active' ? 'secondary' : 'muted-textonly'
+              "
+              size="md"
+              @click="activeView = 'active'"
+            >
+              {{ $t('workspacePanel.members.tabs.active') }}
+            </Button>
+            <Button
+              v-if="uiConfig.showPendingTab"
+              :variant="
+                activeView === 'pending' ? 'secondary' : 'muted-textonly'
+              "
+              size="md"
+              @click="activeView = 'pending'"
+            >
+              {{
+                $t(
+                  'workspacePanel.members.tabs.pendingCount',
+                  pendingInvites.length
+                )
+              }}
+            </Button>
+          </div>
+          <!-- Date column headers -->
+          <template v-if="activeView === 'pending'">
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-start"
+              @click="toggleSort('inviteDate')"
+            >
+              {{ $t('workspacePanel.members.columns.inviteDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-start"
+              @click="toggleSort('expiryDate')"
+            >
+              {{ $t('workspacePanel.members.columns.expiryDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <div />
+          </template>
+          <template v-else>
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-end"
+              @click="toggleSort('joinDate')"
+            >
+              {{ $t('workspacePanel.members.columns.joinDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <!-- Empty cell for action column header (OWNER only) -->
+            <div v-if="permissions.canRemoveMembers" />
+          </template>
+        </div>
+
+        <!-- Members List -->
+        <div class="min-h-0 flex-1 overflow-y-auto">
+          <!-- Active Members -->
+          <template v-if="activeView === 'active'">
+            <!-- Personal Workspace: show only current user -->
+            <template v-if="isPersonalWorkspace">
+              <div
+                :class="
+                  cn(
+                    'grid w-full items-center rounded-lg p-2',
+                    uiConfig.membersGridCols
+                  )
+                "
+              >
+                <div class="flex items-center gap-3">
+                  <UserAvatar
+                    class="size-8"
+                    :photo-url="userPhotoUrl"
+                    :pt:icon:class="{ 'text-xl!': !userPhotoUrl }"
+                  />
+                  <div class="flex min-w-0 flex-1 flex-col gap-1">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm text-base-foreground">
+                        {{ userDisplayName }}
+                        <span class="text-muted-foreground">
+                          ({{ $t('g.you') }})
+                        </span>
+                      </span>
+                      <span
+                        v-if="uiConfig.showRoleBadge"
+                        class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                      >
+                        {{ $t('workspaceSwitcher.roleOwner') }}
+                      </span>
+                    </div>
+                    <span class="text-sm text-muted-foreground">
+                      {{ userEmail }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <!-- Team Workspace: sorted list (owner first, current user second, then rest) -->
+            <template v-else>
+              <div
+                v-for="(member, index) in filteredMembers"
+                :key="member.id"
+                :class="
+                  cn(
+                    'grid w-full items-center rounded-lg p-2',
+                    uiConfig.membersGridCols,
+                    index % 2 === 1 && 'bg-secondary-background/50'
+                  )
+                "
+              >
+                <div class="flex items-center gap-3">
+                  <UserAvatar
+                    class="size-8"
+                    :photo-url="
+                      isCurrentUser(member) ? userPhotoUrl : undefined
+                    "
+                    :pt:icon:class="{
+                      'text-xl!': !isCurrentUser(member) || !userPhotoUrl
+                    }"
+                  />
+                  <div class="flex min-w-0 flex-1 flex-col gap-1">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm text-base-foreground">
+                        {{ member.name }}
+                        <span
+                          v-if="isCurrentUser(member)"
+                          class="text-muted-foreground"
+                        >
+                          ({{ $t('g.you') }})
+                        </span>
+                      </span>
+                      <span
+                        v-if="uiConfig.showRoleBadge"
+                        class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                      >
+                        {{ getRoleBadgeLabel(member.role) }}
+                      </span>
+                    </div>
+                    <span class="text-sm text-muted-foreground">
+                      {{ member.email }}
+                    </span>
+                  </div>
+                </div>
+                <!-- Join date -->
+                <span
+                  v-if="uiConfig.showDateColumn"
+                  class="text-sm text-muted-foreground text-right"
+                >
+                  {{ formatDate(member.joinDate) }}
+                </span>
+                <!-- Remove member action (OWNER only, can't remove yourself) -->
+                <div
+                  v-if="permissions.canRemoveMembers"
+                  class="flex items-center justify-end"
+                >
+                  <Button
+                    v-if="!isCurrentUser(member)"
+                    v-tooltip="{
+                      value: $t('g.moreOptions'),
+                      showDelay: 300
+                    }"
+                    variant="muted-textonly"
+                    size="icon"
+                    :aria-label="$t('g.moreOptions')"
+                    @click="showMemberMenu($event, member)"
+                  >
+                    <i class="pi pi-ellipsis-h" />
+                  </Button>
+                </div>
+              </div>
+
+              <!-- Member actions menu (shared for all members) -->
+              <Menu ref="memberMenu" :model="memberMenuItems" :popup="true" />
+            </template>
+          </template>
+
+          <!-- Pending Invites -->
+          <template v-else>
+            <div
+              v-for="(invite, index) in filteredPendingInvites"
+              :key="invite.id"
+              :class="
+                cn(
+                  'grid w-full items-center rounded-lg p-2',
+                  uiConfig.pendingGridCols,
+                  index % 2 === 1 && 'bg-secondary-background/50'
+                )
+              "
+            >
+              <!-- Invite info -->
+              <div class="flex items-center gap-3">
+                <div
+                  class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-background"
+                >
+                  <span class="text-sm font-bold text-base-foreground">
+                    {{ getInviteInitial(invite.email) }}
+                  </span>
+                </div>
+                <div class="flex min-w-0 flex-1 flex-col gap-1">
+                  <span class="text-sm text-base-foreground">
+                    {{ getInviteDisplayName(invite.email) }}
+                  </span>
+                  <span class="text-sm text-muted-foreground">
+                    {{ invite.email }}
+                  </span>
+                </div>
+              </div>
+              <!-- Invite date -->
+              <span class="text-sm text-muted-foreground">
+                {{ formatDate(invite.inviteDate) }}
+              </span>
+              <!-- Expiry date -->
+              <span class="text-sm text-muted-foreground">
+                {{ formatDate(invite.expiryDate) }}
+              </span>
+              <!-- Actions -->
+              <div class="flex items-center justify-end gap-2">
+                <Button
+                  v-tooltip="{
+                    value: $t('workspacePanel.members.actions.copyLink'),
+                    showDelay: 300
+                  }"
+                  variant="secondary"
+                  size="md"
+                  :aria-label="$t('workspacePanel.members.actions.copyLink')"
+                  @click="handleCopyInviteLink(invite)"
+                >
+                  <i class="icon-[lucide--link] size-4" />
+                </Button>
+                <Button
+                  v-tooltip="{
+                    value: $t('workspacePanel.members.actions.revokeInvite'),
+                    showDelay: 300
+                  }"
+                  variant="secondary"
+                  size="md"
+                  :aria-label="
+                    $t('workspacePanel.members.actions.revokeInvite')
+                  "
+                  @click="handleRevokeInvite(invite)"
+                >
+                  <i class="icon-[lucide--mail-x] size-4" />
+                </Button>
+              </div>
+            </div>
+            <div
+              v-if="filteredPendingInvites.length === 0"
+              class="flex w-full items-center justify-center py-8 text-sm text-muted-foreground"
+            >
+              {{ $t('workspacePanel.members.noInvites') }}
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <!-- Personal Workspace Message -->
+    <div v-if="isPersonalWorkspace" class="flex items-center">
+      <p class="text-sm text-muted-foreground">
+        {{ $t('workspacePanel.members.personalWorkspaceMessage') }}
+      </p>
+      <button
+        class="underline bg-transparent border-none cursor-pointer"
+        @click="handleCreateWorkspace"
+      >
+        {{ $t('workspacePanel.members.createNewWorkspace') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Menu from 'primevue/menu'
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import type {
+  PendingInvite,
+  WorkspaceMember
+} from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogService } from '@/services/dialogService'
+import { cn } from '@/utils/tailwindUtil'
+
+const { d, t } = useI18n()
+const toast = useToast()
+const { userPhotoUrl, userEmail, userDisplayName } = useCurrentUser()
+const {
+  showRemoveMemberDialog,
+  showRevokeInviteDialog,
+  showCreateWorkspaceDialog
+} = useDialogService()
+const workspaceStore = useTeamWorkspaceStore()
+const {
+  members,
+  pendingInvites,
+  isInPersonalWorkspace: isPersonalWorkspace
+} = storeToRefs(workspaceStore)
+const { copyInviteLink } = workspaceStore
+const { permissions, uiConfig } = useWorkspaceUI()
+
+const searchQuery = ref('')
+const activeView = ref<'active' | 'pending'>('active')
+const sortField = ref<'inviteDate' | 'expiryDate' | 'joinDate'>('inviteDate')
+const sortDirection = ref<'asc' | 'desc'>('desc')
+
+const memberMenu = ref<InstanceType<typeof Menu> | null>(null)
+const selectedMember = ref<WorkspaceMember | null>(null)
+
+function getInviteDisplayName(email: string): string {
+  return email.split('@')[0]
+}
+
+function getInviteInitial(email: string): string {
+  return email.charAt(0).toUpperCase()
+}
+
+const memberMenuItems = computed(() => [
+  {
+    label: t('workspacePanel.members.actions.removeMember'),
+    icon: 'pi pi-user-minus',
+    command: () => {
+      if (selectedMember.value) {
+        handleRemoveMember(selectedMember.value)
+      }
+    }
+  }
+])
+
+function showMemberMenu(event: Event, member: WorkspaceMember) {
+  selectedMember.value = member
+  memberMenu.value?.toggle(event)
+}
+
+function isCurrentUser(member: WorkspaceMember): boolean {
+  return member.email.toLowerCase() === userEmail.value?.toLowerCase()
+}
+
+// All members sorted: owners first, current user second, then rest by join date
+const filteredMembers = computed(() => {
+  let result = [...members.value]
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(
+      (member) =>
+        member.name.toLowerCase().includes(query) ||
+        member.email.toLowerCase().includes(query)
+    )
+  }
+
+  result.sort((a, b) => {
+    // Owners always come first
+    if (a.role === 'owner' && b.role !== 'owner') return -1
+    if (a.role !== 'owner' && b.role === 'owner') return 1
+
+    // Current user comes second (after owner)
+    const aIsCurrentUser = isCurrentUser(a)
+    const bIsCurrentUser = isCurrentUser(b)
+    if (aIsCurrentUser && !bIsCurrentUser) return -1
+    if (!aIsCurrentUser && bIsCurrentUser) return 1
+
+    // Then sort by join date
+    const aValue = a.joinDate.getTime()
+    const bValue = b.joinDate.getTime()
+    return sortDirection.value === 'asc' ? aValue - bValue : bValue - aValue
+  })
+
+  return result
+})
+
+function getRoleBadgeLabel(role: 'owner' | 'member'): string {
+  return role === 'owner'
+    ? t('workspaceSwitcher.roleOwner')
+    : t('workspaceSwitcher.roleMember')
+}
+
+const filteredPendingInvites = computed(() => {
+  let result = [...pendingInvites.value]
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter((invite) =>
+      invite.email.toLowerCase().includes(query)
+    )
+  }
+
+  const field = sortField.value === 'joinDate' ? 'inviteDate' : sortField.value
+  result.sort((a, b) => {
+    const aDate = a[field]
+    const bDate = b[field]
+    if (!aDate || !bDate) return 0
+    const aValue = aDate.getTime()
+    const bValue = bDate.getTime()
+    return sortDirection.value === 'asc' ? aValue - bValue : bValue - aValue
+  })
+
+  return result
+})
+
+function toggleSort(field: 'inviteDate' | 'expiryDate' | 'joinDate') {
+  if (sortField.value === field) {
+    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortField.value = field
+    sortDirection.value = 'desc'
+  }
+}
+
+function formatDate(date: Date): string {
+  return d(date, { dateStyle: 'medium' })
+}
+
+async function handleCopyInviteLink(invite: PendingInvite) {
+  try {
+    await copyInviteLink(invite.id)
+    toast.add({
+      severity: 'success',
+      summary: t('g.copied'),
+      life: 2000
+    })
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      life: 3000
+    })
+  }
+}
+
+function handleRevokeInvite(invite: PendingInvite) {
+  showRevokeInviteDialog(invite.id)
+}
+
+function handleCreateWorkspace() {
+  showCreateWorkspaceDialog()
+}
+
+function handleRemoveMember(member: WorkspaceMember) {
+  showRemoveMemberDialog(member.id)
+}
+</script>

src/components/dialog/content/setting/SettingItem.test.ts

@@ -18,7 +18,7 @@ vi.mock('@/utils/formatUtil', () => ({
 }))
 
 describe('SettingItem', () => {
-  const mountComponent = (props: any, options = {}): any => {
+  const mountComponent = (props: Record<string, unknown>, options = {}) => {
     return mount(SettingItem, {
       global: {
         plugins: [PrimeVue, i18n, createPinia()],
@@ -32,6 +32,7 @@ describe('SettingItem', () => {
           'i-material-symbols:experiment-outline': true
         }
       },
+      // @ts-expect-error - Test utility accepts flexible props for testing edge cases
       props,
       ...options
     })
@@ -48,8 +49,9 @@ describe('SettingItem', () => {
       }
     })
 
-    // Get the options property of the FormItem
-    const options = wrapper.vm.formItem.options
+    // Check the FormItem component's item prop for the options
+    const formItem = wrapper.findComponent({ name: 'FormItem' })
+    const options = formItem.props('item').options
     expect(options).toEqual([
       { text: 'Correctly Translated', value: 'Correctly Translated' }
     ])
@@ -67,7 +69,8 @@ describe('SettingItem', () => {
     })
 
     // Should not throw an error and tooltip should be preserved as-is
-    expect(wrapper.vm.formItem.tooltip).toBe(
+    const formItem = wrapper.findComponent({ name: 'FormItem' })
+    expect(formItem.props('item').tooltip).toBe(
       'This will load a larger version of @mtb/markdown-parser that bundles shiki'
     )
   })

src/components/dialog/content/setting/UsageLogsTable.test.ts

@@ -12,6 +12,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import type { AuditLog } from '@/services/customerEventsService'
 import { EventType } from '@/services/customerEventsService'
 
 import UsageLogsTable from './UsageLogsTable.vue'
@@ -19,7 +20,7 @@ import UsageLogsTable from './UsageLogsTable.vue'
 type ComponentInstance = InstanceType<typeof UsageLogsTable> & {
   loading: boolean
   error: string | null
-  events: any[]
+  events: Partial<AuditLog>[]
   pagination: {
     page: number
     limit: number

src/components/dialog/content/setting/WorkspacePanel.vue

@@ -0,0 +1,11 @@
+<template>
+  <TabPanel value="Workspace" class="h-full">
+    <WorkspacePanelContent />
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import TabPanel from 'primevue/tabpanel'
+
+import WorkspacePanelContent from '@/components/dialog/content/setting/WorkspacePanelContent.vue'
+</script>

src/components/dialog/content/setting/WorkspacePanelContent.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="flex h-full w-full flex-col">
+    <div class="pb-8 flex items-center gap-4">
+      <WorkspaceProfilePic
+        class="size-12 !text-3xl"
+        :workspace-name="workspaceName"
+      />
+      <h1 class="text-3xl text-base-foreground">
+        {{ workspaceName }}
+      </h1>
+    </div>
+    <Tabs unstyled :value="activeTab" @update:value="setActiveTab">
+      <div class="flex w-full items-center">
+        <TabList unstyled class="flex w-full gap-2">
+          <Tab
+            value="plan"
+            :class="
+              cn(
+                buttonVariants({
+                  variant: activeTab === 'plan' ? 'secondary' : 'textonly',
+                  size: 'md'
+                }),
+                activeTab === 'plan' && 'text-base-foreground no-underline'
+              )
+            "
+          >
+            {{ $t('workspacePanel.tabs.planCredits') }}
+          </Tab>
+          <Tab
+            value="members"
+            :class="
+              cn(
+                buttonVariants({
+                  variant: activeTab === 'members' ? 'secondary' : 'textonly',
+                  size: 'md'
+                }),
+                activeTab === 'members' && 'text-base-foreground no-underline',
+                'ml-2'
+              )
+            "
+          >
+            {{
+              $t('workspacePanel.tabs.membersCount', {
+                count: isInPersonalWorkspace ? 1 : members.length
+              })
+            }}
+          </Tab>
+        </TabList>
+        <Button
+          v-if="permissions.canInviteMembers"
+          v-tooltip="
+            inviteTooltip
+              ? { value: inviteTooltip, showDelay: 0 }
+              : { value: $t('workspacePanel.inviteMember'), showDelay: 300 }
+          "
+          variant="secondary"
+          size="lg"
+          :disabled="isInviteLimitReached"
+          :class="isInviteLimitReached && 'opacity-50 cursor-not-allowed'"
+          :aria-label="$t('workspacePanel.inviteMember')"
+          @click="handleInviteMember"
+        >
+          {{ $t('workspacePanel.invite') }}
+          <i class="pi pi-plus ml-1 text-sm" />
+        </Button>
+        <template v-if="permissions.canAccessWorkspaceMenu">
+          <Button
+            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+            class="ml-2"
+            variant="secondary"
+            size="lg"
+            :aria-label="$t('g.moreOptions')"
+            @click="menu?.toggle($event)"
+          >
+            <i class="pi pi-ellipsis-h" />
+          </Button>
+          <Menu ref="menu" :model="menuItems" :popup="true">
+            <template #item="{ item }">
+              <div
+                v-tooltip="
+                  item.disabled && deleteTooltip
+                    ? { value: deleteTooltip, showDelay: 0 }
+                    : null
+                "
+                :class="[
+                  'flex items-center gap-2 px-3 py-2',
+                  item.class,
+                  item.disabled ? 'pointer-events-auto' : 'cursor-pointer'
+                ]"
+                @click="
+                  item.command?.({
+                    originalEvent: $event,
+                    item
+                  })
+                "
+              >
+                <i :class="item.icon" />
+                <span>{{ item.label }}</span>
+              </div>
+            </template>
+          </Menu>
+        </template>
+      </div>
+
+      <TabPanels unstyled>
+        <TabPanel value="plan">
+          <SubscriptionPanelContentWorkspace />
+        </TabPanel>
+        <TabPanel value="members">
+          <MembersPanelContent :key="workspaceRole" />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Menu from 'primevue/menu'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import TabPanel from 'primevue/tabpanel'
+import TabPanels from 'primevue/tabpanels'
+import Tabs from 'primevue/tabs'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
+import MembersPanelContent from '@/components/dialog/content/setting/MembersPanelContent.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { buttonVariants } from '@/components/ui/button/button.variants'
+import SubscriptionPanelContentWorkspace from '@/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue'
+import { cn } from '@/utils/tailwindUtil'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogService } from '@/services/dialogService'
+
+const { defaultTab = 'plan' } = defineProps<{
+  defaultTab?: string
+}>()
+
+const { t } = useI18n()
+const {
+  showLeaveWorkspaceDialog,
+  showDeleteWorkspaceDialog,
+  showInviteMemberDialog,
+  showEditWorkspaceDialog
+} = useDialogService()
+const workspaceStore = useTeamWorkspaceStore()
+const {
+  workspaceName,
+  members,
+  isInviteLimitReached,
+  isWorkspaceSubscribed,
+  isInPersonalWorkspace
+} = storeToRefs(workspaceStore)
+const { fetchMembers, fetchPendingInvites } = workspaceStore
+const { activeTab, setActiveTab, workspaceRole, permissions, uiConfig } =
+  useWorkspaceUI()
+
+const menu = ref<InstanceType<typeof Menu> | null>(null)
+
+function handleLeaveWorkspace() {
+  showLeaveWorkspaceDialog()
+}
+
+function handleDeleteWorkspace() {
+  showDeleteWorkspaceDialog()
+}
+
+function handleEditWorkspace() {
+  showEditWorkspaceDialog()
+}
+
+// Disable delete when workspace has an active subscription (to prevent accidental deletion)
+// Use workspace's own subscription status, not the global isActiveSubscription
+const isDeleteDisabled = computed(
+  () =>
+    uiConfig.value.workspaceMenuAction === 'delete' &&
+    isWorkspaceSubscribed.value
+)
+
+const deleteTooltip = computed(() => {
+  if (!isDeleteDisabled.value) return null
+  const tooltipKey = uiConfig.value.workspaceMenuDisabledTooltip
+  return tooltipKey ? t(tooltipKey) : null
+})
+
+const inviteTooltip = computed(() => {
+  if (!isInviteLimitReached.value) return null
+  return t('workspacePanel.inviteLimitReached')
+})
+
+function handleInviteMember() {
+  if (isInviteLimitReached.value) return
+  showInviteMemberDialog()
+}
+
+const menuItems = computed(() => {
+  const items = []
+
+  // Add edit option for owners
+  if (uiConfig.value.showEditWorkspaceMenuItem) {
+    items.push({
+      label: t('workspacePanel.menu.editWorkspace'),
+      icon: 'pi pi-pencil',
+      command: handleEditWorkspace
+    })
+  }
+
+  const action = uiConfig.value.workspaceMenuAction
+  if (action === 'delete') {
+    items.push({
+      label: t('workspacePanel.menu.deleteWorkspace'),
+      icon: 'pi pi-trash',
+      class: isDeleteDisabled.value
+        ? 'text-danger/50 cursor-not-allowed'
+        : 'text-danger',
+      disabled: isDeleteDisabled.value,
+      command: isDeleteDisabled.value ? undefined : handleDeleteWorkspace
+    })
+  } else if (action === 'leave') {
+    items.push({
+      label: t('workspacePanel.menu.leaveWorkspace'),
+      icon: 'pi pi-sign-out',
+      command: handleLeaveWorkspace
+    })
+  }
+
+  return items
+})
+
+onMounted(() => {
+  setActiveTab(defaultTab)
+  fetchMembers()
+  fetchPendingInvites()
+})
+</script>

src/components/dialog/content/setting/WorkspaceSidebarItem.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex items-center gap-2">
+    <WorkspaceProfilePic
+      class="size-6 text-xs"
+      :workspace-name="workspaceName"
+    />
+
+    <span>{{ workspaceName }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
+import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+
+const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
+</script>

src/components/dialog/content/signin/ApiKeyForm.test.ts

@@ -1,3 +1,5 @@
+import type { ComponentProps } from 'vue-component-type-helpers'
+
 import { Form } from '@primevue/forms'
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
@@ -63,7 +65,7 @@ describe('ApiKeyForm', () => {
     mockLoading.mockReset()
   })
 
-  const mountComponent = (props: any = {}) => {
+  const mountComponent = (props: ComponentProps<typeof ApiKeyForm> = {}) => {
     return mount(ApiKeyForm, {
       global: {
         plugins: [PrimeVue, createPinia(), i18n],

src/components/dialog/content/signin/SignInForm.test.ts

@@ -112,8 +112,10 @@ describe('SignInForm', () => {
 
       // Mock getElementById to track focus
       const mockFocus = vi.fn()
-      const mockElement = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(mockElement as any)
+      const mockElement: Partial<HTMLElement> = { focus: mockFocus }
+      vi.spyOn(document, 'getElementById').mockReturnValue(
+        mockElement as HTMLElement
+      )
 
       // Click forgot password link while email is empty
       await forgotPasswordSpan.trigger('click')
@@ -138,7 +140,10 @@ describe('SignInForm', () => {
 
     it('calls handleForgotPassword with email when link is clicked', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Spy on handleForgotPassword
       const handleForgotPasswordSpy = vi.spyOn(
@@ -161,7 +166,10 @@ describe('SignInForm', () => {
   describe('Form Submission', () => {
     it('emits submit event when onSubmit is called with valid data', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Call onSubmit directly with valid data
       component.onSubmit({
@@ -181,7 +189,10 @@ describe('SignInForm', () => {
 
     it('does not emit submit event when form is invalid', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Call onSubmit with invalid form
       component.onSubmit({ valid: false, values: {} })
@@ -254,12 +265,17 @@ describe('SignInForm', () => {
   describe('Focus Behavior', () => {
     it('focuses email input when handleForgotPassword is called with invalid email', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Mock getElementById to track focus
       const mockFocus = vi.fn()
-      const mockElement = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(mockElement as any)
+      const mockElement: Partial<HTMLElement> = { focus: mockFocus }
+      vi.spyOn(document, 'getElementById').mockReturnValue(
+        mockElement as HTMLElement
+      )
 
       // Call handleForgotPassword with no email
       await component.handleForgotPassword('', false)
@@ -273,12 +289,17 @@ describe('SignInForm', () => {
 
     it('does not focus email input when valid email is provided', async () => {
       const wrapper = mountComponent()
-      const component = wrapper.vm as any
+      const component = wrapper.vm as typeof wrapper.vm & {
+        handleForgotPassword: (email: string, valid: boolean) => void
+        onSubmit: (data: { valid: boolean; values: unknown }) => void
+      }
 
       // Mock getElementById
       const mockFocus = vi.fn()
-      const mockElement = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(mockElement as any)
+      const mockElement: Partial<HTMLElement> = { focus: mockFocus }
+      vi.spyOn(document, 'getElementById').mockReturnValue(
+        mockElement as HTMLElement
+      )
 
       // Call handleForgotPassword with valid email
       await component.handleForgotPassword('test@example.com', true)

src/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.createWorkspaceDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col gap-4 px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.createWorkspaceDialog.message') }}
+      </p>
+      <div class="flex flex-col gap-2">
+        <label class="text-sm text-base-foreground">
+          {{ $t('workspacePanel.createWorkspaceDialog.nameLabel') }}
+        </label>
+        <input
+          v-model="workspaceName"
+          type="text"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          :placeholder="
+            $t('workspacePanel.createWorkspaceDialog.namePlaceholder')
+          "
+          @keydown.enter="isValidName && onCreate()"
+        />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        :loading
+        :disabled="!isValidName"
+        @click="onCreate"
+      >
+        {{ $t('workspacePanel.createWorkspaceDialog.create') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { onConfirm } = defineProps<{
+  onConfirm?: (name: string) => void | Promise<void>
+}>()
+
+const { t } = useI18n()
+const dialogStore = useDialogStore()
+const toast = useToast()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+const workspaceName = ref('')
+
+const isValidName = computed(() => {
+  const name = workspaceName.value.trim()
+  const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_'.,()&+]*$/
+  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'create-workspace' })
+}
+
+async function onCreate() {
+  if (!isValidName.value) return
+  loading.value = true
+  try {
+    const name = workspaceName.value.trim()
+    // Call optional callback if provided
+    await onConfirm?.(name)
+    dialogStore.closeDialog({ key: 'create-workspace' })
+    // Create workspace and switch to it (triggers reload internally)
+    await workspaceStore.createWorkspace(name)
+  } catch (error) {
+    console.error('[CreateWorkspaceDialog] Failed to create workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToCreateWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/components/dialog/content/workspace/DeleteWorkspaceDialogContent.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.deleteDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{
+          workspaceName
+            ? $t('workspacePanel.deleteDialog.messageWithName', {
+                name: workspaceName
+              })
+            : $t('workspacePanel.deleteDialog.message')
+        }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onDelete">
+        {{ $t('g.delete') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { workspaceId, workspaceName } = defineProps<{
+  workspaceId?: string
+  workspaceName?: string
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'delete-workspace' })
+}
+
+async function onDelete() {
+  loading.value = true
+  try {
+    // Delete workspace (uses workspaceId if provided, otherwise current workspace)
+    await workspaceStore.deleteWorkspace(workspaceId)
+    dialogStore.closeDialog({ key: 'delete-workspace' })
+    window.location.reload()
+  } catch (error) {
+    console.error('[DeleteWorkspaceDialog] Failed to delete workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToDeleteWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/components/dialog/content/workspace/EditWorkspaceDialogContent.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.editWorkspaceDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col gap-4 px-4 py-4">
+      <div class="flex flex-col gap-2">
+        <label class="text-sm text-base-foreground">
+          {{ $t('workspacePanel.editWorkspaceDialog.nameLabel') }}
+        </label>
+        <input
+          v-model="newWorkspaceName"
+          type="text"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          @keydown.enter="isValidName && onSave()"
+        />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        :loading
+        :disabled="!isValidName"
+        @click="onSave"
+      >
+        {{ $t('workspacePanel.editWorkspaceDialog.save') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+const newWorkspaceName = ref(workspaceStore.workspaceName)
+
+const isValidName = computed(() => {
+  const name = newWorkspaceName.value.trim()
+  const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_'.,()&+]*$/
+  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'edit-workspace' })
+}
+
+async function onSave() {
+  if (!isValidName.value) return
+  loading.value = true
+  try {
+    await workspaceStore.updateWorkspaceName(newWorkspaceName.value.trim())
+    dialogStore.closeDialog({ key: 'edit-workspace' })
+    toast.add({
+      severity: 'success',
+      summary: t('workspacePanel.toast.workspaceUpdated.title'),
+      detail: t('workspacePanel.toast.workspaceUpdated.message'),
+      life: 5000
+    })
+  } catch (error) {
+    console.error('[EditWorkspaceDialog] Failed to update workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToUpdateWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/components/dialog/content/workspace/InviteMemberDialogContent.vue

@@ -0,0 +1,182 @@
+<template>
+  <div
+    class="flex w-full max-w-[512px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{
+          step === 'email'
+            ? $t('workspacePanel.inviteMemberDialog.title')
+            : $t('workspacePanel.inviteMemberDialog.linkStep.title')
+        }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body: Email Step -->
+    <template v-if="step === 'email'">
+      <div class="flex flex-col gap-4 px-4 py-4">
+        <p class="m-0 text-sm text-muted-foreground">
+          {{ $t('workspacePanel.inviteMemberDialog.message') }}
+        </p>
+        <input
+          v-model="email"
+          type="email"
+          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          :placeholder="$t('workspacePanel.inviteMemberDialog.placeholder')"
+        />
+      </div>
+
+      <!-- Footer: Email Step -->
+      <div class="flex items-center justify-end gap-4 px-4 py-4">
+        <Button variant="muted-textonly" @click="onCancel">
+          {{ $t('g.cancel') }}
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          :loading
+          :disabled="!isValidEmail"
+          @click="onCreateLink"
+        >
+          {{ $t('workspacePanel.inviteMemberDialog.createLink') }}
+        </Button>
+      </div>
+    </template>
+
+    <!-- Body: Link Step -->
+    <template v-else>
+      <div class="flex flex-col gap-4 px-4 py-4">
+        <p class="m-0 text-sm text-muted-foreground">
+          {{ $t('workspacePanel.inviteMemberDialog.linkStep.message') }}
+        </p>
+        <p class="m-0 text-sm font-medium text-base-foreground">
+          {{ email }}
+        </p>
+        <div class="relative">
+          <input
+            :value="generatedLink"
+            readonly
+            class="w-full cursor-pointer rounded-lg border border-border-default bg-transparent px-3 py-2 pr-10 text-sm text-base-foreground focus:outline-none"
+            @click="onSelectLink"
+          />
+          <div
+            class="absolute right-4 top-2 cursor-pointer"
+            @click="onCopyLink"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <g clip-path="url(#clip0_2127_14348)">
+                <path
+                  d="M2.66634 10.6666C1.93301 10.6666 1.33301 10.0666 1.33301 9.33325V2.66659C1.33301 1.93325 1.93301 1.33325 2.66634 1.33325H9.33301C10.0663 1.33325 10.6663 1.93325 10.6663 2.66659M6.66634 5.33325H13.333C14.0694 5.33325 14.6663 5.93021 14.6663 6.66658V13.3333C14.6663 14.0696 14.0694 14.6666 13.333 14.6666H6.66634C5.92996 14.6666 5.33301 14.0696 5.33301 13.3333V6.66658C5.33301 5.93021 5.92996 5.33325 6.66634 5.33325Z"
+                  stroke="white"
+                  stroke-width="1.3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_2127_14348">
+                  <rect width="16" height="16" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer: Link Step -->
+      <div class="flex items-center justify-end gap-4 px-4 py-4">
+        <Button variant="muted-textonly" @click="onCancel">
+          {{ $t('g.cancel') }}
+        </Button>
+        <Button variant="primary" size="lg" @click="onCopyLink">
+          {{ $t('workspacePanel.inviteMemberDialog.linkStep.copyLink') }}
+        </Button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const dialogStore = useDialogStore()
+const toast = useToast()
+const { t } = useI18n()
+const workspaceStore = useTeamWorkspaceStore()
+
+const loading = ref(false)
+const email = ref('')
+const step = ref<'email' | 'link'>('email')
+const generatedLink = ref('')
+
+const isValidEmail = computed(() => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email.value)
+})
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'invite-member' })
+}
+
+async function onCreateLink() {
+  if (!isValidEmail.value) return
+  loading.value = true
+  try {
+    generatedLink.value = await workspaceStore.createInviteLink(email.value)
+    step.value = 'link'
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.inviteMemberDialog.linkCopyFailed'),
+      detail: error instanceof Error ? error.message : undefined,
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onCopyLink() {
+  try {
+    await navigator.clipboard.writeText(generatedLink.value)
+    toast.add({
+      severity: 'success',
+      summary: t('workspacePanel.inviteMemberDialog.linkCopied'),
+      life: 2000
+    })
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.inviteMemberDialog.linkCopyFailed'),
+      life: 3000
+    })
+  }
+}
+
+function onSelectLink(event: Event) {
+  const input = event.target as HTMLInputElement
+  input.select()
+}
+</script>

src/components/dialog/content/workspace/LeaveWorkspaceDialogContent.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.leaveDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.leaveDialog.message') }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onLeave">
+        {{ $t('workspacePanel.leaveDialog.leave') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'leave-workspace' })
+}
+
+async function onLeave() {
+  loading.value = true
+  try {
+    // leaveWorkspace() handles switching to personal workspace internally and reloads
+    await workspaceStore.leaveWorkspace()
+    dialogStore.closeDialog({ key: 'leave-workspace' })
+    window.location.reload()
+  } catch (error) {
+    console.error('[LeaveWorkspaceDialog] Failed to leave workspace:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToLeaveWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError'),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/components/dialog/content/workspace/RemoveMemberDialogContent.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.removeMemberDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.removeMemberDialog.message') }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onRemove">
+        {{ $t('workspacePanel.removeMemberDialog.remove') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { memberId } = defineProps<{
+  memberId: string
+}>()
+
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const toast = useToast()
+const { t } = useI18n()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'remove-member' })
+}
+
+async function onRemove() {
+  loading.value = true
+  try {
+    await workspaceStore.removeMember(memberId)
+    toast.add({
+      severity: 'success',
+      summary: t('workspacePanel.removeMemberDialog.success'),
+      life: 2000
+    })
+    dialogStore.closeDialog({ key: 'remove-member' })
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.removeMemberDialog.error'),
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/components/dialog/content/workspace/RevokeInviteDialogContent.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{ $t('workspacePanel.revokeInviteDialog.title') }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onCancel"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('workspacePanel.revokeInviteDialog.message') }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onCancel">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="destructive" size="lg" :loading @click="onRevoke">
+        {{ $t('workspacePanel.revokeInviteDialog.revoke') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { inviteId } = defineProps<{
+  inviteId: string
+}>()
+
+const dialogStore = useDialogStore()
+const workspaceStore = useTeamWorkspaceStore()
+const toast = useToast()
+const { t } = useI18n()
+const loading = ref(false)
+
+function onCancel() {
+  dialogStore.closeDialog({ key: 'revoke-invite' })
+}
+
+async function onRevoke() {
+  loading.value = true
+  try {
+    await workspaceStore.revokeInvite(inviteId)
+    dialogStore.closeDialog({ key: 'revoke-invite' })
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: error instanceof Error ? error.message : undefined,
+      life: 3000
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>

src/components/graph/GraphCanvas.vue

@@ -160,6 +160,9 @@ import { isNativeWindow } from '@/utils/envUtil'
 import { forEachNode } from '@/utils/graphTraversalUtil'
 
 import SelectionRectangle from './SelectionRectangle.vue'
+import { isCloud } from '@/platform/distribution/types'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { useInviteUrlLoader } from '@/platform/workspace/composables/useInviteUrlLoader'
 
 const emit = defineEmits<{
   ready: []
@@ -394,6 +397,9 @@ const loadCustomNodesI18n = async () => {
 
 const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
+const { flags } = useFeatureFlags()
+// Set up invite loader during setup phase so useRoute/useRouter work correctly
+const inviteUrlLoader = isCloud ? useInviteUrlLoader() : null
 useCanvasDrop(canvasRef)
 useLitegraphSettings()
 useNodeBadge()
@@ -459,6 +465,22 @@ onMounted(async () => {
   // Load template from URL if present
   await workflowPersistence.loadTemplateFromUrlIfPresent()
 
+  // Accept workspace invite from URL if present (e.g., ?invite=TOKEN)
+  // Uses watch because feature flags load asynchronously - flag may be false initially
+  // then become true once remoteConfig or websocket features are loaded
+  if (inviteUrlLoader) {
+    const stopWatching = watch(
+      () => flags.teamWorkspacesEnabled,
+      async (enabled) => {
+        if (enabled) {
+          stopWatching()
+          await inviteUrlLoader.loadInviteFromUrl()
+        }
+      },
+      { immediate: true }
+    )
+  }
+
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)
   const { useReleaseStore } =
     await import('@/platform/updates/common/releaseStore')

src/components/graph/SelectionToolbox.test.ts

@@ -5,9 +5,26 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
+import {
+  createMockCanvas,
+  createMockPositionable
+} from '@/utils/__tests__/litegraphTestUtils'
+
+function createMockExtensionService(): ReturnType<typeof useExtensionService> {
+  return {
+    extensionCommands: { value: new Map() },
+    loadExtensions: vi.fn(),
+    registerExtension: vi.fn(),
+    invokeExtensions: vi.fn(() => []),
+    invokeExtensionsAsync: vi.fn()
+  } as Partial<ReturnType<typeof useExtensionService>> as ReturnType<
+    typeof useExtensionService
+  >
+}
 
 // Mock the composables and services
 vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
@@ -112,12 +129,7 @@ describe('SelectionToolbox', () => {
     canvasStore = useCanvasStore()
 
     // Mock the canvas to avoid "getCanvas: canvas is null" errors
-    canvasStore.canvas = {
-      setDirty: vi.fn(),
-      state: {
-        selectionChanged: false
-      }
-    } as any
+    canvasStore.canvas = createMockCanvas()
 
     vi.resetAllMocks()
   })
@@ -184,30 +196,27 @@ describe('SelectionToolbox', () => {
   describe('Button Visibility Logic', () => {
     beforeEach(() => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
     })
 
     it('should show info button only for single selections', () => {
       // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.info-button').exists()).toBe(true)
 
       // Multiple node selection
       canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
+        createMockPositionable(),
+        createMockPositionable()
+      ]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.info-button').exists()).toBe(false)
     })
 
     it('should not show info button when node definition is not found', () => {
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       // mock nodedef and return null
       nodeDefMock = null
       // remount component
@@ -217,7 +226,7 @@ describe('SelectionToolbox', () => {
 
     it('should show color picker for all selections', () => {
       // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('[data-testid="color-picker-button"]').exists()).toBe(
         true
@@ -225,9 +234,9 @@ describe('SelectionToolbox', () => {
 
       // Multiple node selection
       canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
+        createMockPositionable(),
+        createMockPositionable()
+      ]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(
@@ -237,15 +246,15 @@ describe('SelectionToolbox', () => {
 
     it('should show frame nodes only for multiple selections', () => {
       // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.frame-nodes').exists()).toBe(false)
 
       // Multiple node selection
       canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
+        createMockPositionable(),
+        createMockPositionable()
+      ]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.frame-nodes').exists()).toBe(true)
@@ -253,22 +262,22 @@ describe('SelectionToolbox', () => {
 
     it('should show bypass button for appropriate selections', () => {
       // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('[data-testid="bypass-button"]').exists()).toBe(true)
 
       // Multiple node selection
       canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
+        createMockPositionable(),
+        createMockPositionable()
+      ]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('[data-testid="bypass-button"]').exists()).toBe(true)
     })
 
     it('should show common buttons for all selections', () => {
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true)
@@ -286,13 +295,13 @@ describe('SelectionToolbox', () => {
 
       // Single image node
       isImageNodeSpy.mockReturnValue(true)
-      canvasStore.selectedItems = [{ type: 'ImageNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.mask-editor-button').exists()).toBe(true)
 
       // Single non-image node
       isImageNodeSpy.mockReturnValue(false)
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.mask-editor-button').exists()).toBe(false)
@@ -304,13 +313,13 @@ describe('SelectionToolbox', () => {
 
       // Single Load3D node
       isLoad3dNodeSpy.mockReturnValue(true)
-      canvasStore.selectedItems = [{ type: 'Load3DNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.load-3d-viewer-button').exists()).toBe(true)
 
       // Single non-Load3D node
       isLoad3dNodeSpy.mockReturnValue(false)
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.load-3d-viewer-button').exists()).toBe(false)
@@ -326,17 +335,17 @@ describe('SelectionToolbox', () => {
 
       // With output node selected
       isOutputNodeSpy.mockReturnValue(true)
-      filterOutputNodesSpy.mockReturnValue([{ type: 'SaveImage' }] as any)
-      canvasStore.selectedItems = [
-        { type: 'SaveImage', constructor: { nodeData: { output_node: true } } }
-      ] as any
+      filterOutputNodesSpy.mockReturnValue([
+        { type: 'SaveImage' }
+      ] as LGraphNode[])
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
       expect(wrapper.find('.execute-button').exists()).toBe(true)
 
       // Without output node selected
       isOutputNodeSpy.mockReturnValue(false)
       filterOutputNodesSpy.mockReturnValue([])
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       wrapper.unmount()
       const wrapper2 = mountComponent()
       expect(wrapper2.find('.execute-button').exists()).toBe(false)
@@ -352,7 +361,7 @@ describe('SelectionToolbox', () => {
   describe('Divider Visibility Logic', () => {
     it('should show dividers between button groups when both groups have buttons', () => {
       // Setup single node to show info + other buttons
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const dividers = wrapper.findAll('.vertical-divider')
@@ -378,10 +387,13 @@ describe('SelectionToolbox', () => {
             ['test-command', { id: 'test-command', title: 'Test Command' }]
           ])
         },
-        invokeExtensions: vi.fn(() => ['test-command'])
-      } as any)
+        loadExtensions: vi.fn(),
+        registerExtension: vi.fn(),
+        invokeExtensions: vi.fn(() => ['test-command']),
+        invokeExtensionsAsync: vi.fn()
+      } as ReturnType<typeof useExtensionService>)
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       expect(wrapper.find('.extension-command-button').exists()).toBe(true)
@@ -389,12 +401,9 @@ describe('SelectionToolbox', () => {
 
     it('should not render extension commands when none available', () => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       expect(wrapper.find('.extension-command-button').exists()).toBe(false)
@@ -404,12 +413,9 @@ describe('SelectionToolbox', () => {
   describe('Container Styling', () => {
     it('should apply minimap container styles', () => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const panel = wrapper.find('.panel')
@@ -418,12 +424,9 @@ describe('SelectionToolbox', () => {
 
     it('should have correct CSS classes', () => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const panel = wrapper.find('.panel')
@@ -435,12 +438,9 @@ describe('SelectionToolbox', () => {
 
     it('should handle animation class conditionally', () => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const panel = wrapper.find('.panel')
@@ -453,16 +453,18 @@ describe('SelectionToolbox', () => {
       const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
       const forwardEventToCanvasSpy = vi.fn()
       mockCanvasInteractions.mockReturnValue({
-        forwardEventToCanvas: forwardEventToCanvasSpy
-      } as any)
+        handleWheel: vi.fn(),
+        handlePointer: vi.fn(),
+        forwardEventToCanvas: forwardEventToCanvasSpy,
+        shouldHandleNodePointerEvents: { value: true } as ReturnType<
+          typeof useCanvasInteractions
+        >['shouldHandleNodePointerEvents']
+      } as ReturnType<typeof useCanvasInteractions>)
 
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
 
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      canvasStore.selectedItems = [createMockPositionable()]
       const wrapper = mountComponent()
 
       const panel = wrapper.find('.panel')
@@ -475,10 +477,7 @@ describe('SelectionToolbox', () => {
   describe('No Selection State', () => {
     beforeEach(() => {
       const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
+      mockExtensionService.mockReturnValue(createMockExtensionService())
     })
 
     it('should hide most buttons when no items selected', () => {

src/components/graph/selectionToolbox/BypassButton.test.ts

@@ -6,14 +6,14 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 
-const mockLGraphNode = {
-  type: 'TestNode',
-  title: 'Test Node',
-  mode: LGraphEventMode.ALWAYS
+function getMockLGraphNode(): LGraphNode {
+  return createMockLGraphNode({ type: 'TestNode' })
 }
 
 vi.mock('@/utils/litegraphUtil', () => ({
@@ -59,21 +59,21 @@ describe('BypassButton', () => {
   }
 
   it('should render bypass button', () => {
-    canvasStore.selectedItems = [mockLGraphNode] as any
+    canvasStore.selectedItems = [getMockLGraphNode()]
     const wrapper = mountComponent()
     const button = wrapper.find('button')
     expect(button.exists()).toBe(true)
   })
 
   it('should have correct test id', () => {
-    canvasStore.selectedItems = [mockLGraphNode] as any
+    canvasStore.selectedItems = [getMockLGraphNode()]
     const wrapper = mountComponent()
     const button = wrapper.find('[data-testid="bypass-button"]')
     expect(button.exists()).toBe(true)
   })
 
   it('should execute bypass command when clicked', async () => {
-    canvasStore.selectedItems = [mockLGraphNode] as any
+    canvasStore.selectedItems = [getMockLGraphNode()]
     const executeSpy = vi.spyOn(commandStore, 'execute').mockResolvedValue()
 
     const wrapper = mountComponent()
@@ -85,8 +85,10 @@ describe('BypassButton', () => {
   })
 
   it('should show bypassed styling when node is bypassed', async () => {
-    const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
-    canvasStore.selectedItems = [bypassedNode] as any
+    const bypassedNode = Object.assign(getMockLGraphNode(), {
+      mode: LGraphEventMode.BYPASS
+    })
+    canvasStore.selectedItems = [bypassedNode]
     vi.spyOn(commandStore, 'execute').mockResolvedValue()
     const wrapper = mountComponent()
 
@@ -100,7 +102,7 @@ describe('BypassButton', () => {
 
   it('should handle multiple selected items', () => {
     vi.spyOn(commandStore, 'execute').mockResolvedValue()
-    canvasStore.selectedItems = [mockLGraphNode, mockLGraphNode] as any
+    canvasStore.selectedItems = [getMockLGraphNode(), getMockLGraphNode()]
     const wrapper = mountComponent()
     const button = wrapper.find('button')
     expect(button.exists()).toBe(true)

src/components/graph/selectionToolbox/ColorPickerButton.test.ts

@@ -1,3 +1,4 @@
+import type { Mock } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
@@ -8,7 +9,20 @@ import { createI18n } from 'vue-i18n'
 // Import after mocks
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { createMockPositionable } from '@/utils/__tests__/litegraphTestUtils'
+
+function createMockWorkflow(
+  overrides: Partial<LoadedComfyWorkflow> = {}
+): LoadedComfyWorkflow {
+  return {
+    changeTracker: {
+      checkState: vi.fn() as Mock
+    },
+    ...overrides
+  } as Partial<LoadedComfyWorkflow> as LoadedComfyWorkflow
+}
 
 // Mock the litegraph module
 vi.mock('@/lib/litegraph/src/litegraph', async () => {
@@ -70,11 +84,7 @@ describe('ColorPickerButton', () => {
     canvasStore.selectedItems = []
 
     // Mock workflow store
-    workflowStore.activeWorkflow = {
-      changeTracker: {
-        checkState: vi.fn()
-      }
-    } as any
+    workflowStore.activeWorkflow = createMockWorkflow()
   })
 
   const createWrapper = () => {
@@ -90,13 +100,13 @@ describe('ColorPickerButton', () => {
 
   it('should render when nodes are selected', () => {
     // Add a mock node to selectedItems
-    canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
+    canvasStore.selectedItems = [createMockPositionable()]
     const wrapper = createWrapper()
     expect(wrapper.find('button').exists()).toBe(true)
   })
 
   it('should toggle color picker visibility on button click', async () => {
-    canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
+    canvasStore.selectedItems = [createMockPositionable()]
     const wrapper = createWrapper()
     const button = wrapper.find('button')
 

src/components/graph/selectionToolbox/ExecuteButton.test.ts

@@ -1,23 +1,16 @@
 import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
+import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 
-// Mock the stores
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: vi.fn()
-}))
-
-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: vi.fn()
-}))
-
 // Mock the utils
 vi.mock('@/utils/litegraphUtil', () => ({
   isLGraphNode: vi.fn((node) => !!node?.type)
@@ -37,10 +30,8 @@ vi.mock('@/composables/graph/useSelectionState', () => ({
 }))
 
 describe('ExecuteButton', () => {
-  let mockCanvas: any
-  let mockCanvasStore: any
-  let mockCommandStore: any
-  let mockSelectedNodes: any[]
+  let mockCanvas: LGraphCanvas
+  let mockSelectedNodes: LGraphNode[]
 
   const i18n = createI18n({
     legacy: false,
@@ -57,27 +48,27 @@ describe('ExecuteButton', () => {
   })
 
   beforeEach(async () => {
-    setActivePinia(createPinia())
+    // Set up Pinia with testing utilities
+    setActivePinia(
+      createTestingPinia({
+        createSpy: vi.fn
+      })
+    )
 
     // Reset mocks
-    mockCanvas = {
+    const partialCanvas: Partial<LGraphCanvas> = {
       setDirty: vi.fn()
     }
+    mockCanvas = partialCanvas as Partial<LGraphCanvas> as LGraphCanvas
 
     mockSelectedNodes = []
 
-    mockCanvasStore = {
-      getCanvas: vi.fn(() => mockCanvas),
-      selectedItems: []
-    }
+    // Get store instances and mock methods
+    const canvasStore = useCanvasStore()
+    const commandStore = useCommandStore()
 
-    mockCommandStore = {
-      execute: vi.fn()
-    }
-
-    // Setup store mocks
-    vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore as any)
-    vi.mocked(useCommandStore).mockReturnValue(mockCommandStore as any)
+    vi.spyOn(canvasStore, 'getCanvas').mockReturnValue(mockCanvas)
+    vi.spyOn(commandStore, 'execute').mockResolvedValue()
 
     // Update the useSelectionState mock
     const { useSelectionState } = vi.mocked(
@@ -87,7 +78,7 @@ describe('ExecuteButton', () => {
       selectedNodes: {
         value: mockSelectedNodes
       }
-    } as any)
+    } as ReturnType<typeof useSelectionState>)
 
     vi.clearAllMocks()
   })
@@ -114,15 +105,16 @@ describe('ExecuteButton', () => {
 
   describe('Click Handler', () => {
     it('should execute Comfy.QueueSelectedOutputNodes command on click', async () => {
+      const commandStore = useCommandStore()
       const wrapper = mountComponent()
       const button = wrapper.find('button')
 
       await button.trigger('click')
 
-      expect(mockCommandStore.execute).toHaveBeenCalledWith(
+      expect(commandStore.execute).toHaveBeenCalledWith(
         'Comfy.QueueSelectedOutputNodes'
       )
-      expect(mockCommandStore.execute).toHaveBeenCalledTimes(1)
+      expect(commandStore.execute).toHaveBeenCalledTimes(1)
     })
   })
 })

src/components/queue/QueueProgressOverlay.vue

@@ -200,7 +200,13 @@ const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
 
   if (item.state === 'running' || item.state === 'initialization') {
     // Running/initializing jobs: interrupt execution
-    await api.interrupt(promptId)
+    // Cloud backend uses deleteItem, local uses interrupt
+    if (isCloud) {
+      await api.deleteItem('queue', promptId)
+    } else {
+      await api.interrupt(promptId)
+    }
+    executionStore.clearInitializationByPromptId(promptId)
     await queueStore.update()
   } else if (item.state === 'pending') {
     // Pending jobs: remove from queue
@@ -268,7 +274,15 @@ const inspectJobAsset = wrapWithErrorHandlingAsync(
 )
 
 const cancelQueuedWorkflows = wrapWithErrorHandlingAsync(async () => {
+  // Capture pending promptIds before clearing
+  const pendingPromptIds = queueStore.pendingTasks
+    .map((task) => task.promptId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
   await commandStore.execute('Comfy.ClearPendingTasks')
+
+  // Clear initialization state for removed prompts
+  executionStore.clearInitializationByPromptIds(pendingPromptIds)
 })
 
 const interruptAll = wrapWithErrorHandlingAsync(async () => {
@@ -284,10 +298,14 @@ const interruptAll = wrapWithErrorHandlingAsync(async () => {
   // on cloud to ensure we cancel the workflow the user clicked.
   if (isCloud) {
     await Promise.all(promptIds.map((id) => api.deleteItem('queue', id)))
+    executionStore.clearInitializationByPromptIds(promptIds)
+    await queueStore.update()
     return
   }
 
   await Promise.all(promptIds.map((id) => api.interrupt(id)))
+  executionStore.clearInitializationByPromptIds(promptIds)
+  await queueStore.update()
 })
 
 const showClearHistoryDialog = () => {

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -5,25 +5,32 @@ import { cn } from '@/utils/tailwindUtil'
 
 import TransitionCollapse from './TransitionCollapse.vue'
 
-const props = defineProps<{
+const {
+  disabled,
+  label,
+  enableEmptyState,
+  tooltip,
+  class: className
+} = defineProps<{
   disabled?: boolean
   label?: string
   enableEmptyState?: boolean
   tooltip?: string
+  class?: string
 }>()
 
 const isCollapse = defineModel<boolean>('collapse', { default: false })
 
-const isExpanded = computed(() => !isCollapse.value && !props.disabled)
+const isExpanded = computed(() => !isCollapse.value && !disabled)
 
 const tooltipConfig = computed(() => {
-  if (!props.tooltip) return undefined
-  return { value: props.tooltip, showDelay: 1000 }
+  if (!tooltip) return undefined
+  return { value: tooltip, showDelay: 1000 }
 })
 </script>
 
 <template>
-  <div class="flex flex-col bg-comfy-menu-bg">
+  <div :class="cn('flex flex-col bg-comfy-menu-bg', className)">
     <div
       class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
     >

src/components/rightSidePanel/parameters/TabNodes.vue

@@ -8,7 +8,7 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
-import { searchWidgetsAndNodes } from '../shared'
+import { computedSectionDataList, searchWidgetsAndNodes } from '../shared'
 import type { NodeWidgetsListList } from '../shared'
 import SectionWidgets from './SectionWidgets.vue'
 
@@ -24,18 +24,7 @@ const nodes = computed((): LGraphNode[] => {
 const rightSidePanelStore = useRightSidePanelStore()
 const { searchQuery } = storeToRefs(rightSidePanelStore)
 
-const widgetsSectionDataList = computed((): NodeWidgetsListList => {
-  return nodes.value.map((node) => {
-    const { widgets = [] } = node
-    const shownWidgets = widgets
-      .filter((w) => !(w.options?.canvasOnly || w.options?.hidden))
-      .map((widget) => ({ node, widget }))
-    return {
-      widgets: shownWidgets,
-      node
-    }
-  })
-})
+const { widgetsSectionDataList } = computedSectionDataList(nodes)
 
 const searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>(
   widgetsSectionDataList.value

src/components/rightSidePanel/parameters/TabNormalInputs.vue

@@ -7,7 +7,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
-import { searchWidgetsAndNodes } from '../shared'
+import { computedSectionDataList, searchWidgetsAndNodes } from '../shared'
 import type { NodeWidgetsListList } from '../shared'
 import SectionWidgets from './SectionWidgets.vue'
 
@@ -21,21 +21,14 @@ const { t } = useI18n()
 const rightSidePanelStore = useRightSidePanelStore()
 const { searchQuery } = storeToRefs(rightSidePanelStore)
 
-const widgetsSectionDataList = computed((): NodeWidgetsListList => {
-  return nodes.map((node) => {
-    const { widgets = [] } = node
-    const shownWidgets = widgets
-      .filter(
-        (w) =>
-          !(w.options?.canvasOnly || w.options?.hidden || w.options?.advanced)
-      )
-      .map((widget) => ({ node, widget }))
-
-    return { widgets: shownWidgets, node }
-  })
-})
+const { widgetsSectionDataList, includesAdvanced } = computedSectionDataList(
+  () => nodes
+)
 
 const advancedWidgetsSectionDataList = computed((): NodeWidgetsListList => {
+  if (includesAdvanced.value) {
+    return []
+  }
   return nodes
     .map((node) => {
       const { widgets = [] } = node

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -43,7 +43,7 @@ const favoritedWidgetsStore = useFavoritedWidgetsStore()
 const isEditing = ref(false)
 
 const widgetComponent = computed(() => {
-  const component = getComponent(widget.type, widget.name)
+  const component = getComponent(widget.type)
   return component || WidgetLegacy
 })
 

src/components/rightSidePanel/settings/TabGlobalSettings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import InputNumber from 'primevue/inputnumber'
 import Select from 'primevue/select'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -23,7 +23,11 @@ const settingStore = useSettingStore()
 const dialogService = useDialogService()
 
 // NODES settings
-const showAdvancedParameters = ref(false) // Placeholder for future implementation
+const showAdvancedParameters = computed({
+  get: () => settingStore.get('Comfy.Node.AlwaysShowAdvancedWidgets'),
+  set: (value) =>
+    settingStore.set('Comfy.Node.AlwaysShowAdvancedWidgets', value)
+})
 
 const showToolbox = computed({
   get: () => settingStore.get('Comfy.Canvas.SelectionToolbox'),

src/components/rightSidePanel/shared.test.ts

@@ -38,10 +38,22 @@ describe('searchWidgets', () => {
 
     expect(searchWidgets(widgets, 'width')).toHaveLength(1)
     expect(searchWidgets(widgets, 'slider')).toHaveLength(1)
-    expect(searchWidgets(widgets, 'high')).toHaveLength(1)
     expect(searchWidgets(widgets, 'image')).toHaveLength(1)
   })
 
+  it('should support fuzzy matching (e.g., "high" matches both "height" and value "high")', () => {
+    const widgets = [
+      createWidget('width', 'number', '100', 'Size Control'),
+      createWidget('height', 'slider', '200', 'Image Height'),
+      createWidget('quality', 'text', 'high', 'Quality')
+    ]
+
+    const results = searchWidgets(widgets, 'high')
+    expect(results).toHaveLength(2)
+    expect(results.some((r) => r.widget.name === 'height')).toBe(true)
+    expect(results.some((r) => r.widget.name === 'quality')).toBe(true)
+  })
+
   it('should handle multiple search words', () => {
     const widgets = [
       createWidget('width', 'number', '100', 'Image Width'),

src/components/rightSidePanel/shared.ts

@@ -1,11 +1,14 @@
 import type { InjectionKey, MaybeRefOrGetter } from 'vue'
 import { computed, toValue } from 'vue'
+import Fuse from 'fuse.js'
+import type { IFuseOptions } from 'fuse.js'
 
 import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 export const GetNodeParentGroupKey: InjectionKey<
   (node: LGraphNode) => LGraphGroup | null
@@ -17,10 +20,18 @@ export type NodeWidgetsListList = Array<{
   widgets: NodeWidgetsList
 }>
 
+interface WidgetSearchItem {
+  index: number
+  searchableLabel: string
+  searchableName: string
+  searchableType: string
+  searchableValue: string
+}
+
 /**
- * Searches widgets in a list and returns search results.
+ * Searches widgets in a list using fuzzy search and returns search results.
+ * Uses Fuse.js for better matching with typo tolerance and relevance ranking.
  * Filters by name, localized label, type, and user-input value.
- * Performs basic tokenization of the query string.
  */
 export function searchWidgets<T extends { widget: IBaseWidget }[]>(
   list: T,
@@ -29,27 +40,48 @@ export function searchWidgets<T extends { widget: IBaseWidget }[]>(
   if (query.trim() === '') {
     return list
   }
-  const words = query.trim().toLowerCase().split(' ')
-  return list.filter(({ widget }) => {
-    const label = widget.label?.toLowerCase()
-    const name = widget.name.toLowerCase()
-    const type = widget.type.toLowerCase()
-    const value = widget.value?.toString().toLowerCase()
-    return words.every(
-      (word) =>
-        name.includes(word) ||
-        label?.includes(word) ||
-        type?.includes(word) ||
-        value?.includes(word)
-    )
-  }) as T
+
+  const searchableList: WidgetSearchItem[] = list.map((item, index) => {
+    const searchableItem = {
+      index,
+      searchableLabel: item.widget.label?.toLowerCase() || '',
+      searchableName: item.widget.name.toLowerCase(),
+      searchableType: item.widget.type.toLowerCase(),
+      searchableValue: item.widget.value?.toString().toLowerCase() || ''
+    }
+    return searchableItem
+  })
+
+  const fuseOptions: IFuseOptions<WidgetSearchItem> = {
+    keys: [
+      { name: 'searchableName', weight: 0.4 },
+      { name: 'searchableLabel', weight: 0.3 },
+      { name: 'searchableValue', weight: 0.3 },
+      { name: 'searchableType', weight: 0.2 }
+    ],
+    threshold: 0.3
+  }
+
+  const fuse = new Fuse(searchableList, fuseOptions)
+  const results = fuse.search(query.trim())
+
+  const matchedItems = new Set(
+    results.map((result) => list[result.item.index]!)
+  )
+
+  return list.filter((item) => matchedItems.has(item)) as T
+}
+
+type NodeSearchItem = {
+  nodeId: NodeId
+  searchableTitle: string
 }
 
 /**
- * Searches widgets and nodes in a list and returns search results.
+ * Searches widgets and nodes in a list using fuzzy search and returns search results.
+ * Uses Fuse.js for node title matching with typo tolerance and relevance ranking.
  * First checks if the node title matches the query (if so, keeps entire node).
  * Otherwise, filters widgets using searchWidgets.
- * Performs basic tokenization of the query string.
  */
 export function searchWidgetsAndNodes(
   list: NodeWidgetsListList,
@@ -58,12 +90,26 @@ export function searchWidgetsAndNodes(
   if (query.trim() === '') {
     return list
   }
-  const words = query.trim().toLowerCase().split(' ')
+
+  const searchableList: NodeSearchItem[] = list.map((item) => ({
+    nodeId: item.node.id,
+    searchableTitle: (item.node.getTitle() ?? '').toLowerCase()
+  }))
+
+  const fuseOptions: IFuseOptions<NodeSearchItem> = {
+    keys: [{ name: 'searchableTitle', weight: 1.0 }],
+    threshold: 0.3
+  }
+
+  const fuse = new Fuse(searchableList, fuseOptions)
+  const nodeMatches = fuse.search(query.trim())
+  const matchedNodeIds = new Set(
+    nodeMatches.map((result) => result.item.nodeId)
+  )
+
   return list
     .map((item) => {
-      const { node } = item
-      const title = node.getTitle().toLowerCase()
-      if (words.every((word) => title.includes(word))) {
+      if (matchedNodeIds.has(item.node.id)) {
         return { ...item, keep: true }
       }
       return {
@@ -203,3 +249,33 @@ function repeatItems<T>(items: T[]): T[] {
   }
   return result
 }
+
+export function computedSectionDataList(nodes: MaybeRefOrGetter<LGraphNode[]>) {
+  const settingStore = useSettingStore()
+
+  const includesAdvanced = computed(() =>
+    settingStore.get('Comfy.Node.AlwaysShowAdvancedWidgets')
+  )
+
+  const widgetsSectionDataList = computed((): NodeWidgetsListList => {
+    return toValue(nodes).map((node) => {
+      const { widgets = [] } = node
+      const shownWidgets = widgets
+        .filter(
+          (w) =>
+            !(
+              w.options?.canvasOnly ||
+              w.options?.hidden ||
+              (w.options?.advanced && !includesAdvanced.value)
+            )
+        )
+        .map((widget) => ({ node, widget }))
+      return { widgets: shownWidgets, node }
+    })
+  })
+
+  return {
+    widgetsSectionDataList,
+    includesAdvanced
+  }
+}

src/components/sidebar/ComfyMenuButton.vue

@@ -219,7 +219,7 @@ const extraMenuItems = computed(() => [
   {
     key: 'settings',
     label: t('g.settings'),
-    icon: 'mdi mdi-cog-outline',
+    icon: 'icon-[lucide--settings]',
     command: () => {
       telemetry?.trackUiButtonClicked({
         button_id: 'sidebar_settings_menu_opened'
@@ -230,7 +230,7 @@ const extraMenuItems = computed(() => [
   {
     key: 'manage-extensions',
     label: t('menu.manageExtensions'),
-    icon: 'mdi mdi-puzzle-outline',
+    icon: 'icon-[lucide--puzzle]',
     command: showManageExtensions
   }
 ])

src/components/sidebar/ModeToggle.vue

@@ -5,22 +5,35 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 
 const canvasStore = useCanvasStore()
+function toggleLinearMode() {
+  useCommandStore().execute('Comfy.ToggleLinear', {
+    metadata: { source: 'button' }
+  })
+}
 </script>
 <template>
   <div class="p-1 bg-secondary-background rounded-lg w-10">
     <Button
+      v-tooltip="{
+        value: t('linearMode.linearMode'),
+        showDelay: 300,
+        hideDelay: 300
+      }"
       size="icon"
-      :title="t('linearMode.linearMode')"
       :variant="canvasStore.linearMode ? 'inverted' : 'secondary'"
-      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+      @click="toggleLinearMode"
     >
       <i class="icon-[lucide--panels-top-left]" />
     </Button>
     <Button
+      v-tooltip="{
+        value: t('linearMode.graphMode'),
+        showDelay: 300,
+        hideDelay: 300
+      }"
       size="icon"
-      :title="t('linearMode.graphMode')"
       :variant="canvasStore.linearMode ? 'secondary' : 'inverted'"
-      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+      @click="toggleLinearMode"
     >
       <i class="icon-[comfy--workflow]" />
     </Button>

src/components/sidebar/tabs/AssetsSidebarGridView.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="flex h-full flex-col">
+    <!-- Active Jobs Grid -->
+    <div
+      v-if="activeJobItems.length"
+      class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
+      :style="gridStyle"
+    >
+      <ActiveMediaAssetCard
+        v-for="job in activeJobItems"
+        :key="job.id"
+        :job="job"
+      />
+    </div>
+
+    <!-- Assets Header -->
+    <div
+      v-if="assets.length"
+      :class="cn('px-2 2xl:px-4', activeJobItems.length && 'mt-2')"
+    >
+      <div
+        class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
+      >
+        {{
+          t(
+            assetType === 'input'
+              ? 'sideToolbar.importedAssetsHeader'
+              : 'sideToolbar.generatedAssetsHeader'
+          )
+        }}
+      </div>
+    </div>
+
+    <!-- Assets Grid -->
+    <VirtualGrid
+      class="flex-1"
+      :items="assetItems"
+      :grid-style="gridStyle"
+      @approach-end="emit('approach-end')"
+    >
+      <template #item="{ item }">
+        <MediaAssetCard
+          :asset="item.asset"
+          :selected="isSelected(item.asset.id)"
+          :show-output-count="showOutputCount(item.asset)"
+          :output-count="getOutputCount(item.asset)"
+          @click="emit('select-asset', item.asset)"
+          @context-menu="emit('context-menu', $event, item.asset)"
+          @zoom="emit('zoom', item.asset)"
+          @output-count-click="emit('output-count-click', item.asset)"
+        />
+      </template>
+    </VirtualGrid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import ActiveMediaAssetCard from '@/platform/assets/components/ActiveMediaAssetCard.vue'
+import { useJobList } from '@/composables/queue/useJobList'
+import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { isActiveJobState } from '@/utils/queueUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  assets,
+  isSelected,
+  assetType = 'output',
+  showOutputCount,
+  getOutputCount
+} = defineProps<{
+  assets: AssetItem[]
+  isSelected: (assetId: string) => boolean
+  assetType?: 'input' | 'output'
+  showOutputCount: (asset: AssetItem) => boolean
+  getOutputCount: (asset: AssetItem) => number
+}>()
+
+const emit = defineEmits<{
+  (e: 'select-asset', asset: AssetItem): void
+  (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
+  (e: 'approach-end'): void
+  (e: 'zoom', asset: AssetItem): void
+  (e: 'output-count-click', asset: AssetItem): void
+}>()
+
+const { t } = useI18n()
+const { jobItems } = useJobList()
+
+type AssetGridItem = { key: string; asset: AssetItem }
+
+const activeJobItems = computed(() =>
+  jobItems.value.filter((item) => isActiveJobState(item.state))
+)
+
+const assetItems = computed<AssetGridItem[]>(() =>
+  assets.map((asset) => ({
+    key: `asset-${asset.id}`,
+    asset
+  }))
+)
+
+const gridStyle = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+  padding: '0 0.5rem',
+  gap: '0.5rem'
+}
+</script>

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -2,7 +2,7 @@
   <div class="flex h-full flex-col">
     <div
       v-if="activeJobItems.length"
-      class="flex max-h-[50%] flex-col gap-2 overflow-y-auto px-2"
+      class="flex max-h-[50%] scrollbar-custom flex-col gap-2 overflow-y-auto px-2"
     >
       <AssetsListItem
         v-for="job in activeJobItems"
@@ -114,7 +114,7 @@ import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
-import type { JobState } from '@/types/queue'
+import { isActiveJobState } from '@/utils/queueUtil'
 import {
   formatDuration,
   formatSize,
@@ -172,12 +172,6 @@ const listGridStyle = {
   gap: '0.5rem'
 }
 
-function isActiveJobState(state: JobState): boolean {
-  return (
-    state === 'pending' || state === 'initialization' || state === 'running'
-  )
-}
-
 function getAssetPrimaryText(asset: AssetItem): string {
   return truncateFilename(asset.name)
 }