another demo

When a node has a missing input connection, the slot is highlighted with
a red outline. This PR makes the error indicator round like the slot
instead of an oval.

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/2d5ebc93-fa74-492d-92a7-3a1b3af4754f"
/> | <img width="360" alt="after"
src="https://github.com/user-attachments/assets/57c15503-d94a-48d7-8c35-7760f1b860e6"
/>|

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8123-Fix-roundness-of-slot-error-indicator-in-vue-2eb6d73d3650810383a2f5532117c29f)
by [Unito](https://www.unito.io)

.cursor/rules/unit-test.mdc

@@ -1,21 +0,0 @@
----
-description: Creating unit tests
-globs: 
-alwaysApply: false
----
-
-# Creating unit tests
-
-- This project uses `vitest` for unit testing
-- Tests are stored in the `test/` directory
-- Tests should be cross-platform compatible; able to run on Windows, macOS, and linux
-  - e.g. the use of `path.resolve`, or `path.join` and `path.sep` to ensure that tests work the same on all platforms
-- Tests should be mocked properly
-  - Mocks should be cleanly written and easy to understand
-  - Mocks should be re-usable where possible
-
-## Unit test style
-
-- Prefer the use of `test.extend` over loose variables
-  - To achieve this, import `test as baseTest` from `vitest`
-- Never use `it`; `test` should be used in place of this

.github/AGENTS.md

@@ -0,0 +1,14 @@
+# PR Review Context
+
+Context for automated PR review system.
+
+## Review Scope
+
+This automated review performs comprehensive analysis:
+- Architecture and design patterns
+- Security vulnerabilities
+- Performance implications
+- Code quality and maintainability
+- Integration concerns
+
+For implementation details, see `.claude/commands/comprehensive-pr-review.md`.

.github/CLAUDE.md

@@ -1,36 +1,3 @@
-# ComfyUI Frontend - Claude Review Context
-
-This file provides additional context for the automated PR review system.
-
-## Quick Reference
-
-### PrimeVue Component Migrations
-
-When reviewing, flag these deprecated components:
-- `Dropdown` → Use `Select` from 'primevue/select'
-- `OverlayPanel` → Use `Popover` from 'primevue/popover'
-- `Calendar` → Use `DatePicker` from 'primevue/datepicker'
-- `InputSwitch` → Use `ToggleSwitch` from 'primevue/toggleswitch'
-- `Sidebar` → Use `Drawer` from 'primevue/drawer'
-- `Chips` → Use `AutoComplete` with multiple enabled and typeahead disabled
-- `TabMenu` → Use `Tabs` without panels
-- `Steps` → Use `Stepper` without panels
-- `InlineMessage` → Use `Message` component
-
-### API Utilities Reference
-
-- `api.apiURL()` - Backend API calls (/prompt, /queue, /view, etc.)
-- `api.fileURL()` - Static file access (templates, extensions)
-- `$t()` / `i18n.global.t()` - Internationalization
-- `DOMPurify.sanitize()` - HTML sanitization
-
-## Review Scope
-
-This automated review performs comprehensive analysis including:
-- Architecture and design patterns
-- Security vulnerabilities
-- Performance implications
-- Code quality and maintainability
-- Integration concerns
-
-For implementation details, see `.claude/commands/comprehensive-pr-review.md`.
+<!-- A rose by any other name would smell as sweet,
+     But Claude insists on files named for its own conceit. -->
+@AGENTS.md

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

@@ -144,9 +144,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
-      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
 
       - name: Download blob reports
         uses: actions/download-artifact@v4
@@ -158,10 +159,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
+          pnpm dlx @playwright/test merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
+          pnpm dlx @playwright/test merge-reports --reporter=json ./all-blob-reports
 
       - name: Upload HTML report
         uses: actions/upload-artifact@v4

.github/workflows/release-biweekly-comfyui.yaml

@@ -69,7 +69,7 @@ jobs:
       - name: Checkout ComfyUI (sparse)
         uses: actions/checkout@v5
         with:
-          repository: comfyanonymous/ComfyUI
+          repository: Comfy-Org/ComfyUI
           sparse-checkout: |
             requirements.txt
           path: comfyui
@@ -184,7 +184,7 @@ jobs:
           # Note: This only affects the local checkout, NOT the fork's master branch
           # We only push the automation branch, leaving the fork's master untouched
           echo "Fetching upstream master..."
-          if ! git fetch https://github.com/comfyanonymous/ComfyUI.git master; then
+          if ! git fetch https://github.com/Comfy-Org/ComfyUI.git master; then
             echo "Failed to fetch upstream master"
             exit 1
           fi
@@ -257,7 +257,7 @@ jobs:
           # Extract fork owner from repository name
           FORK_OWNER=$(echo "$COMFYUI_FORK" | cut -d'/' -f1)
 
-          echo "Creating PR from ${COMFYUI_FORK} to comfyanonymous/ComfyUI"
+          echo "Creating PR from ${COMFYUI_FORK} to Comfy-Org/ComfyUI"
 
           # Configure git
           git config user.name "github-actions[bot]"
@@ -288,7 +288,7 @@ jobs:
 
           # Try to create PR, ignore error if it already exists
           if ! gh pr create \
-            --repo comfyanonymous/ComfyUI \
+            --repo Comfy-Org/ComfyUI \
             --head "${FORK_OWNER}:${BRANCH}" \
             --base master \
             --title "Bump comfyui-frontend-package to ${{ needs.resolve-version.outputs.target_version }}" \
@@ -297,7 +297,7 @@ jobs:
 
             # Check if PR already exists
             set +e
-            EXISTING_PR=$(gh pr list --repo comfyanonymous/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
+            EXISTING_PR=$(gh pr list --repo Comfy-Org/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
             PR_LIST_EXIT=$?
             set -e
 
@@ -318,7 +318,7 @@ jobs:
         run: |
           echo "## ComfyUI PR Created" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
-          echo "Draft PR created in comfyanonymous/ComfyUI" >> $GITHUB_STEP_SUMMARY
+          echo "Draft PR created in Comfy-Org/ComfyUI" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "### PR Body:" >> $GITHUB_STEP_SUMMARY
           cat pr-body.txt >> $GITHUB_STEP_SUMMARY

.storybook/AGENTS.md

@@ -0,0 +1,17 @@
+# Storybook Guidelines
+
+See `@docs/guidance/storybook.md` for story patterns (auto-loaded for `*.stories.ts`).
+
+## Available Context
+
+Stories have access to:
+- All ComfyUI stores
+- PrimeVue with ComfyUI theming
+- i18n system
+- CSS variables and styling
+
+## Troubleshooting
+
+1. **Import Errors**: Verify `@/` alias works
+2. **Missing Styles**: Check CSS imports in `preview.ts`
+3. **Store Errors**: Check store initialization in setup

.storybook/CLAUDE.md

@@ -1,197 +1,3 @@
-# Storybook Development Guidelines for Claude
-
-## Quick Commands
-
-- `pnpm storybook`: Start Storybook development server
-- `pnpm build-storybook`: Build static Storybook
-- `pnpm test:unit`: Run unit tests (includes Storybook components)
-
-## Development Workflow for Storybook
-
-1. **Creating New Stories**:
-   - Place `*.stories.ts` files alongside components
-   - Follow the naming pattern: `ComponentName.stories.ts`
-   - Use realistic mock data that matches ComfyUI schemas
-
-2. **Testing Stories**:
-   - Verify stories render correctly in Storybook UI
-   - Test different component states and edge cases
-   - Ensure proper theming and styling
-
-3. **Code Quality**:
-   - Run `pnpm typecheck` to verify TypeScript
-   - Run `pnpm lint` to check for linting issues
-   - Follow existing story patterns and conventions
-
-## Story Creation Guidelines
-
-### Basic Story Structure
-
-```typescript
-import type { Meta, StoryObj } from '@storybook/vue3'
-import ComponentName from './ComponentName.vue'
-
-const meta: Meta<typeof ComponentName> = {
-  title: 'Category/ComponentName',
-  component: ComponentName,
-  parameters: {
-    layout: 'centered' // or 'fullscreen', 'padded'
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    // Component props
-  }
-}
-```
-
-### Mock Data Patterns
-
-For ComfyUI components, use realistic mock data:
-
-```typescript
-// Node definition mock
-const mockNodeDef = {
-  input: {
-    required: {
-      prompt: ["STRING", { multiline: true }]
-    }
-  },
-  output: ["CONDITIONING"],
-  output_is_list: [false],
-  category: "conditioning"
-}
-
-// Component instance mock
-const mockComponent = {
-  id: "1",
-  type: "CLIPTextEncode",
-  // ... other properties
-}
-```
-
-### Common Story Variants
-
-Always include these story variants when applicable:
-
-- **Default**: Basic component with minimal props
-- **WithData**: Component with realistic data
-- **Loading**: Component in loading state
-- **Error**: Component with error state
-- **LongContent**: Component with edge case content
-- **Empty**: Component with no data
-
-### Storybook-Specific Code Patterns
-
-#### Store Access
-```typescript
-// In stories, access stores through the setup function
-export const WithStore: Story = {
-  render: () => ({
-    setup() {
-      const store = useMyStore()
-      return { store }
-    },
-    template: '<MyComponent :data="store.data" />'
-  })
-}
-```
-
-#### Event Testing
-```typescript
-export const WithEvents: Story = {
-  args: {
-    onUpdate: fn() // Use Storybook's fn() for action logging
-  }
-}
-```
-
-## Configuration Notes
-
-### Vue App Setup
-The Storybook preview is configured with:
-- Pinia stores initialized
-- PrimeVue with ComfyUI theme
-- i18n internationalization
-- All necessary CSS imports
-
-### Build Configuration
-- Vite integration with proper alias resolution
-- Manual chunking for better performance
-- TypeScript support with strict checking
-- CSS processing for Vue components
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Import Errors**: Verify `@/` alias is working correctly
-2. **Missing Styles**: Ensure CSS imports are in `preview.ts`
-3. **Store Errors**: Check store initialization in setup
-4. **Type Errors**: Use proper TypeScript types for story args
-
-### Debug Commands
-
-```bash
-# Check TypeScript issues
-pnpm typecheck
-
-# Lint Storybook files
-pnpm lint .storybook/
-
-# Build to check for production issues
-pnpm build-storybook
-```
-
-## File Organization
-
-```
-.storybook/
-├── main.ts          # Core configuration
-├── preview.ts       # Global setup and decorators
-├── README.md        # User documentation
-└── CLAUDE.md        # This file - Claude guidelines
-
-src/
-├── components/
-│   └── MyComponent/
-│       ├── MyComponent.vue
-│       └── MyComponent.stories.ts
-```
-
-## Integration with ComfyUI
-
-### Available Context
-
-Stories have access to:
-- All ComfyUI stores (widgetStore, colorPaletteStore, etc.)
-- PrimeVue components with ComfyUI theming
-- Internationalization system
-- ComfyUI CSS variables and styling
-
-### Testing Components
-
-When testing ComfyUI-specific components:
-1. Use realistic node definitions and data structures
-2. Test with different node types (sampling, conditioning, etc.)
-3. Verify proper CSS theming and dark/light modes
-4. Check component behavior with various input combinations
-
-### Performance Considerations
-
-- Use manual chunking for large dependencies
-- Minimize bundle size by avoiding unnecessary imports
-- Leverage Storybook's lazy loading capabilities
-- Profile build times and optimize as needed
-
-## Best Practices
-
-1. **Keep Stories Focused**: Each story should demonstrate one specific use case
-2. **Use Descriptive Names**: Story names should clearly indicate what they show
-3. **Document Complex Props**: Use JSDoc comments for complex prop types
-4. **Test Edge Cases**: Create stories for unusual but valid use cases
-5. **Maintain Consistency**: Follow established patterns in existing stories
+<!-- Though standards bloom in open fields so wide,
+     Anthropic walks a path of lonely pride. -->
+@AGENTS.md

AGENTS.md

@@ -1,5 +1,7 @@
 # Repository Guidelines
 
+See @docs/guidance/*.md for file-type-specific conventions (auto-loaded by glob).
+
 ## Project Structure & Module Organization
 
 - Source: `src/`
@@ -46,6 +48,21 @@ The project uses **Nx** for build orchestration and task management
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
 - `pnpm format` / `pnpm format:check`: Prettier
 - `pnpm typecheck`: Vue TSC type checking
+- `pnpm storybook`: Start Storybook development server
+
+## Development Workflow
+
+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
+
+## Git Conventions
+
+- Use `prefix:` format: `feat:`, `fix:`, `test:`
+- Add "Fixes #n" to PR descriptions
+- Never mention Claude/AI in commits
 
 ## Coding Style & Naming Conventions
 

CLAUDE.md

@@ -1,30 +1 @@
-# Claude Code specific instructions
-
-@Agents.md
-
-## Repository Setup
-
-For first-time setup, use the Claude command:
-
-```sh
-/setup_repo
-```
-
-This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
-
-**Prerequisites:** Node.js >= 24, Git repository, available ports for dev server, storybook, etc.
-
-## Development Workflow
-
-1. **First-time setup**: Run `/setup_repo` Claude command
-2. Make code changes
-3. Run tests (see subdirectory CLAUDE.md files)
-4. Run typecheck, lint, format
-5. Check README updates
-6. Consider docs.comfy.org updates
-
-## Git Conventions
-
-- Use `prefix:` format: `feat:`, `fix:`, `test:`
-- Add "Fixes #n" to PR descriptions
-- Never mention Claude/AI in commits
+@AGENTS.md

CODEOWNERS

@@ -37,7 +37,7 @@
 /src/components/graph/selectionToolbox/           @Myestery
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery 
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery
 
 # Workflow Templates
 /src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
@@ -55,8 +55,7 @@
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
-/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
-/src/locales/pt-BR/                               @JonatanAtila @Yorha4D @KarryCharon @shinshin86
+/src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
 
 # LLM Instructions (blank on purpose)
 .claude/

README.md

@@ -539,4 +539,4 @@ For comprehensive troubleshooting and technical support, please refer to our off
 
 - **[General Troubleshooting Guide](https://docs.comfy.org/troubleshooting/overview)** - Common issues, performance optimization, and reporting bugs
 - **[Custom Node Issues](https://docs.comfy.org/troubleshooting/custom-node-issues)** - Debugging custom node problems and conflicts
-- **[Desktop Installation Guide](https://docs.comfy.org/installation/desktop/windows)** - Desktop-specific installation and troubleshooting
+- **[Desktop Installation Guide](https://docs.comfy.org/installation/desktop/windows)** - Desktop-specific installation and troubleshooting

browser_tests/AGENTS.md

@@ -0,0 +1,8 @@
+# E2E Testing Guidelines
+
+See `@docs/guidance/playwright.md` for Playwright best practices (auto-loaded for `*.spec.ts`).
+
+## Directory Structure
+
+- `assets/` - Test data (JSON workflows, fixtures)
+- Tests use premade JSON workflows to load desired graph state

browser_tests/CLAUDE.md

@@ -1,17 +1,3 @@
-# E2E Testing Guidelines
-
-## Browser Tests
-- Test user workflows
-- Use Playwright fixtures
-- Follow naming conventions
-
-## Best Practices
-- Check assets/ for test data
-- Prefer specific selectors
-- Test across viewports
-
-## Testing Process
-After code changes:
-1. Create browser tests as appropriate
-2. Run tests until passing
-3. Then run typecheck, lint, format
+<!-- In gardens where the agents freely play,
+     One stubborn flower turns the other way. -->
+@AGENTS.md

browser_tests/fixtures/ComfyPage.ts

@@ -3,7 +3,7 @@ import { test as base, expect } from '@playwright/test'
 import dotenv from 'dotenv'
 import * as fs from 'fs'
 
-import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
+import type { LGraphNode, LGraph } from '../../src/lib/litegraph/src/litegraph'
 import type { NodeId } from '../../src/platform/workflow/validation/schemas/workflowSchema'
 import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
@@ -21,7 +21,6 @@ import {
 import { Topbar } from './components/Topbar'
 import type { Position, Size } from './types'
 import { NodeReference, SubgraphSlotReference } from './utils/litegraphUtils'
-import TaskHistory from './utils/taskHistory'
 
 dotenv.config()
 
@@ -146,8 +145,6 @@ class ConfirmDialog {
 }
 
 export class ComfyPage {
-  private _history: TaskHistory | null = null
-
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
   public readonly canvas: Locator
@@ -301,11 +298,6 @@ export class ComfyPage {
     }
   }
 
-  setupHistory(): TaskHistory {
-    this._history ??= new TaskHistory(this)
-    return this._history
-  }
-
   async setup({
     clearStorage = true,
     mockReleases = true
@@ -1591,14 +1583,29 @@ export class ComfyPage {
       return window['app'].graph.nodes
     })
   }
-  async getNodeRefsByType(type: string): Promise<NodeReference[]> {
+  async waitForGraphNodes(count: number) {
+    await this.page.waitForFunction((count) => {
+      return window['app']?.canvas.graph?.nodes?.length === count
+    }, count)
+  }
+  async getNodeRefsByType(
+    type: string,
+    includeSubgraph: boolean = false
+  ): Promise<NodeReference[]> {
     return Promise.all(
       (
-        await this.page.evaluate((type) => {
-          return window['app'].graph.nodes
-            .filter((n: LGraphNode) => n.type === type)
-            .map((n: LGraphNode) => n.id)
-        }, type)
+        await this.page.evaluate(
+          ({ type, includeSubgraph }) => {
+            const graph = (
+              includeSubgraph ? window['app'].canvas.graph : window['app'].graph
+            ) as LGraph
+            const nodes = graph.nodes
+            return nodes
+              .filter((n: LGraphNode) => n.type === type)
+              .map((n: LGraphNode) => n.id)
+          },
+          { type, includeSubgraph }
+        )
       ).map((id: NodeId) => this.getNodeRefById(id))
     )
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -159,8 +159,18 @@ export class VueNodeHelpers {
   getInputNumberControls(widget: Locator) {
     return {
       input: widget.locator('input'),
-      incrementButton: widget.locator('button').first(),
-      decrementButton: widget.locator('button').nth(1)
+      decrementButton: widget.getByTestId('decrement'),
+      incrementButton: widget.getByTestId('increment')
     }
   }
+
+  /**
+   * Enter the subgraph of a node.
+   * @param nodeId - The ID of the node to enter the subgraph of. If not provided, the first matched subgraph will be entered.
+   */
+  async enterSubgraph(nodeId?: string): Promise<void> {
+    const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
+    const editButton = locator.getByTestId('subgraph-enter-button')
+    await editButton.click()
+  }
 }

browser_tests/fixtures/utils/taskHistory.ts

@@ -1,164 +0,0 @@
-import type { Request, Route } from '@playwright/test'
-import _ from 'es-toolkit/compat'
-import fs from 'fs'
-import path from 'path'
-import { v4 as uuidv4 } from 'uuid'
-
-import type {
-  HistoryTaskItem,
-  TaskItem,
-  TaskOutput
-} from '../../../src/schemas/apiSchema'
-import type { ComfyPage } from '../ComfyPage'
-
-/** keyof TaskOutput[string] */
-type OutputFileType = 'images' | 'audio' | 'animated'
-
-const DEFAULT_IMAGE = 'example.webp'
-
-const getFilenameParam = (request: Request) => {
-  const url = new URL(request.url())
-  return url.searchParams.get('filename') || DEFAULT_IMAGE
-}
-
-const getContentType = (filename: string, fileType: OutputFileType) => {
-  const subtype = path.extname(filename).slice(1)
-  switch (fileType) {
-    case 'images':
-      return `image/${subtype}`
-    case 'audio':
-      return `audio/${subtype}`
-    case 'animated':
-      return `video/${subtype}`
-  }
-}
-
-const setQueueIndex = (task: TaskItem) => {
-  task.prompt[0] = TaskHistory.queueIndex++
-}
-
-const setPromptId = (task: TaskItem) => {
-  task.prompt[1] = uuidv4()
-}
-
-export default class TaskHistory {
-  static queueIndex = 0
-  static readonly defaultTask: Readonly<HistoryTaskItem> = {
-    prompt: [0, 'prompt-id', {}, { client_id: uuidv4() }, []],
-    outputs: {},
-    status: {
-      status_str: 'success',
-      completed: true,
-      messages: []
-    },
-    taskType: 'History'
-  }
-  private tasks: HistoryTaskItem[] = []
-  private outputContentTypes: Map<string, string> = new Map()
-
-  constructor(readonly comfyPage: ComfyPage) {}
-
-  private loadAsset: (filename: string) => Buffer = _.memoize(
-    (filename: string) => {
-      const filePath = this.comfyPage.assetPath(filename)
-      return fs.readFileSync(filePath)
-    }
-  )
-
-  private async handleGetHistory(route: Route) {
-    return route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify(this.tasks)
-    })
-  }
-
-  private async handleGetView(route: Route) {
-    const fileName = getFilenameParam(route.request())
-    if (!this.outputContentTypes.has(fileName)) {
-      return route.continue()
-    }
-
-    const asset = this.loadAsset(fileName)
-    return route.fulfill({
-      status: 200,
-      contentType: this.outputContentTypes.get(fileName),
-      body: asset,
-      headers: {
-        'Cache-Control': 'public, max-age=31536000',
-        'Content-Length': asset.byteLength.toString()
-      }
-    })
-  }
-
-  async setupRoutes() {
-    return this.comfyPage.page.route(
-      /.*\/api\/(view|history)(\?.*)?$/,
-      async (route) => {
-        const request = route.request()
-        const method = request.method()
-
-        const isViewReq = request.url().includes('view') && method === 'GET'
-        if (isViewReq) return this.handleGetView(route)
-
-        const isHistoryPath = request.url().includes('history')
-        const isGetHistoryReq = isHistoryPath && method === 'GET'
-        if (isGetHistoryReq) return this.handleGetHistory(route)
-
-        const isClearReq =
-          method === 'POST' &&
-          isHistoryPath &&
-          request.postDataJSON()?.clear === true
-        if (isClearReq) return this.clearTasks()
-
-        return route.continue()
-      }
-    )
-  }
-
-  private createOutputs(
-    filenames: string[],
-    filetype: OutputFileType
-  ): TaskOutput {
-    return filenames.reduce((outputs, filename, i) => {
-      const nodeId = `${i + 1}`
-      outputs[nodeId] = {
-        [filetype]: [{ filename, subfolder: '', type: 'output' }]
-      }
-      const contentType = getContentType(filename, filetype)
-      this.outputContentTypes.set(filename, contentType)
-      return outputs
-    }, {})
-  }
-
-  private addTask(task: HistoryTaskItem) {
-    setPromptId(task)
-    setQueueIndex(task)
-    this.tasks.unshift(task) // Tasks are added to the front of the queue
-  }
-
-  clearTasks(): this {
-    this.tasks = []
-    return this
-  }
-
-  withTask(
-    outputFilenames: string[],
-    outputFiletype: OutputFileType = 'images',
-    overrides: Partial<HistoryTaskItem> = {}
-  ): this {
-    this.addTask({
-      ...TaskHistory.defaultTask,
-      outputs: this.createOutputs(outputFilenames, outputFiletype),
-      ...overrides
-    })
-    return this
-  }
-
-  /** Repeats the last task in the task history a specified number of times. */
-  repeat(n: number): this {
-    for (let i = 0; i < n; i++)
-      this.addTask(structuredClone(this.tasks.at(0)) as HistoryTaskItem)
-    return this
-  }
-}

browser_tests/tests/mobileBaseline.spec.ts

@@ -22,8 +22,14 @@ test.describe('Mobile Baseline Snapshots', () => {
   test('@mobile settings dialog', async ({ comfyPage }) => {
     await comfyPage.settingDialog.open()
     await comfyPage.nextFrame()
+
     await expect(comfyPage.settingDialog.root).toHaveScreenshot(
-      'mobile-settings-dialog.png'
+      'mobile-settings-dialog.png',
+      {
+        mask: [
+          comfyPage.settingDialog.root.getByTestId('current-user-indicator')
+        ]
+      }
     )
   })
 })

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

@@ -8,13 +8,11 @@ test.describe('Properties panel', () => {
 
     const { propertiesPanel } = comfyPage.menu
 
-    await expect(propertiesPanel.panelTitle).toContainText(
-      'No item(s) selected'
-    )
+    await expect(propertiesPanel.panelTitle).toContainText('Workflow Overview')
 
     await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
 
-    await expect(propertiesPanel.panelTitle).toContainText('3 nodes selected')
+    await expect(propertiesPanel.panelTitle).toContainText('3 items selected')
     await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
     await expect(
       propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')

browser_tests/tests/templates.spec.ts

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

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

@@ -102,7 +102,7 @@ test.describe('Vue Node Link Interaction', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
+    // await comfyPage.setup()
     await comfyPage.loadWorkflow('vueNodes/simple-triple')
     await comfyPage.vueNodes.waitForNodes()
     await fitToViewInstant(comfyPage)
@@ -993,4 +993,51 @@ test.describe('Vue Node Link Interaction', () => {
       expect(linked).toBe(true)
     })
   })
+
+  test('Dragging from subgraph input connects to correct slot', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    // Setup workflow with a KSampler node
+    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.waitForGraphNodes(0)
+    await comfyPage.executeCommand('Workspace.SearchBox.Toggle')
+    await comfyPage.nextFrame()
+    await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+    await comfyPage.waitForGraphNodes(1)
+
+    // Convert the KSampler node to a subgraph
+    let ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler'))?.[0]
+    await comfyPage.vueNodes.selectNode(String(ksamplerNode.id))
+    await comfyPage.executeCommand('Comfy.Graph.ConvertToSubgraph')
+
+    // Enter the subgraph
+    await comfyPage.vueNodes.enterSubgraph()
+    await fitToViewInstant(comfyPage)
+
+    // Get the KSampler node inside the subgraph
+    ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler', true))?.[0]
+    const positiveInput = await ksamplerNode.getInput(1)
+    const negativeInput = await ksamplerNode.getInput(2)
+
+    const positiveInputPos = await getSlotCenter(
+      comfyPage.page,
+      ksamplerNode.id,
+      1,
+      true
+    )
+
+    const sourceSlot = await comfyPage.getSubgraphInputSlot()
+    const calculatedSourcePos = await sourceSlot.getOpenSlotPosition()
+
+    await comfyMouse.move(calculatedSourcePos)
+    await comfyMouse.drag(positiveInputPos)
+    await comfyMouse.drop()
+
+    // Verify connection went to the correct slot
+    const positiveLinks = await positiveInput.getLinkCount()
+    const negativeLinks = await negativeInput.getLinkCount()
+    expect(positiveLinks).toBe(1)
+    expect(negativeLinks).toBe(0)
+  })
 })

docs/guidance/playwright.md

@@ -0,0 +1,33 @@
+---
+globs:
+  - '**/*.spec.ts'
+---
+
+# Playwright E2E Test Conventions
+
+See `docs/testing/*.md` for detailed patterns.
+
+## Best Practices
+
+- Follow [Playwright Best Practices](https://playwright.dev/docs/best-practices)
+- Do NOT use `waitForTimeout` - use Locator actions and retrying assertions
+- Prefer specific selectors (role, label, test-id)
+- Test across viewports
+
+## Test Tags
+
+Tags are respected by config:
+- `@mobile` - Mobile viewport tests
+- `@2x` - High DPI tests
+
+## Test Data
+
+- Check `browser_tests/assets/` for test data and fixtures
+- Use realistic ComfyUI workflows for E2E tests
+
+## Running Tests
+
+```bash
+pnpm test:browser                 # Run all E2E tests
+pnpm test:browser -- --ui         # Interactive UI mode
+```

docs/guidance/storybook.md

@@ -0,0 +1,55 @@
+---
+globs:
+  - '**/*.stories.ts'
+---
+
+# Storybook Conventions
+
+## File Placement
+
+Place `*.stories.ts` files alongside their components:
+```
+src/components/MyComponent/
+├── MyComponent.vue
+└── MyComponent.stories.ts
+```
+
+## Story Structure
+
+```typescript
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ComponentName from './ComponentName.vue'
+
+const meta: Meta<typeof ComponentName> = {
+  title: 'Category/ComponentName',
+  component: ComponentName,
+  parameters: { layout: 'centered' }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { /* props */ }
+}
+```
+
+## Required Story Variants
+
+Include when applicable:
+- **Default** - Minimal props
+- **WithData** - Realistic data
+- **Loading** - Loading state
+- **Error** - Error state
+- **Empty** - No data
+
+## Mock Data
+
+Use realistic ComfyUI schemas for mocks (node definitions, components).
+
+## Running Storybook
+
+```bash
+pnpm storybook        # Development server
+pnpm build-storybook  # Production build
+```

docs/guidance/typescript.md

@@ -0,0 +1,37 @@
+---
+globs:
+  - '**/*.ts'
+  - '**/*.tsx'
+  - '**/*.vue'
+---
+
+# TypeScript Conventions
+
+## Type Safety
+
+- Never use `any` type - use proper TypeScript types
+- Never use `as any` type assertions - fix the underlying type issue
+- Type assertions are a last resort; they lead to brittle code
+- Avoid `@ts-expect-error` - fix the underlying issue instead
+
+## Utility Libraries
+
+- Use `es-toolkit` for utility functions (not lodash)
+
+## API Utilities
+
+When making API calls in `src/`:
+
+```typescript
+// ✅ Correct - use api helpers
+const response = await api.get(api.apiURL('/prompt'))
+const template = await fetch(api.fileURL('/templates/default.json'))
+
+// ❌ Wrong - direct URL construction
+const response = await fetch('/api/prompt')
+```
+
+## Security
+
+- Sanitize HTML with `DOMPurify.sanitize()`
+- Never log secrets or sensitive data

docs/guidance/vitest.md

@@ -0,0 +1,36 @@
+---
+globs:
+  - '**/*.test.ts'
+---
+
+# Vitest Unit Test Conventions
+
+See `docs/testing/*.md` for detailed patterns.
+
+## Test Quality
+
+- Do not write change detector tests (tests that just assert defaults)
+- Do not write tests dependent on non-behavioral features (styles, classes)
+- Do not write tests that just test mocks - ensure real code is exercised
+- Be parsimonious; avoid redundant tests
+
+## Mocking
+
+- Use Vitest's mocking utilities (`vi.mock`, `vi.spyOn`)
+- Keep module mocks contained - no global mutable state
+- Use `vi.hoisted()` for per-test mock manipulation
+- Don't mock what you don't own
+
+## Component Testing
+
+- Use Vue Test Utils for component tests
+- Follow advice about making components easy to test
+- Wait for reactivity with `await nextTick()` after state changes
+
+## Running Tests
+
+```bash
+pnpm test:unit                    # Run all unit tests
+pnpm test:unit -- path/to/file    # Run specific test
+pnpm test:unit -- --watch         # Watch mode
+```

docs/guidance/vue-components.md

@@ -0,0 +1,46 @@
+---
+globs:
+  - '**/*.vue'
+---
+
+# Vue Component Conventions
+
+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
+- Use lifecycle hooks: `onMounted`, `onUpdated`, etc.
+
+## Component Communication
+
+- Prefer `emit/@event-name` for state changes (promotes loose coupling)
+- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
+- Proper props and emits definitions
+
+## VueUse Composables
+
+Prefer VueUse composables over manual event handling:
+
+- `useElementHover` instead of manual mouseover/mouseout listeners
+- `useIntersectionObserver` for visibility detection instead of scroll handlers
+- `useFocusTrap` for modal/dialog focus management
+- `useEventListener` for auto-cleanup event listeners
+
+Prefer Vue native options when available:
+
+- `defineModel` instead of `useVModel` for two-way binding with props
+
+## Styling
+
+- Use inline Tailwind CSS only (no `<style>` blocks)
+- Use `cn()` from `@/utils/tailwindUtil` for conditional classes
+- Refer to packages/design-system/src/css/style.css for design tokens and tailwind configuration
+
+## Best Practices
+
+- Extract complex conditionals to `computed`
+- In unmounted hooks, implement cleanup for async operations

docs/testing/vitest-patterns.md

@@ -30,10 +30,6 @@ 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

lint-staged.config.mjs

@@ -0,0 +1,23 @@
+import path from 'node:path'
+
+export default {
+  './**/*.js': (stagedFiles) => formatAndEslint(stagedFiles),
+
+  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
+    ...formatAndEslint(stagedFiles),
+    'pnpm typecheck'
+  ]
+}
+
+function formatAndEslint(fileNames) {
+  // Convert absolute paths to relative paths for better ESLint resolution
+  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
+  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
+  return [
+    `pnpm exec prettier --cache --write ${joinedPaths}`,
+    `pnpm exec oxlint --fix ${joinedPaths}`,
+    `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
+  ]
+}
+
+

manifest.json

@@ -3,6 +3,13 @@
   "short_name": "ComfyUI",
   "description": "ComfyUI: AI image generation platform",
   "start_url": "/",
+  "icons": [
+    {
+      "src": "/assets/images/comfy-logo-single.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ],
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#000000"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.37.10",
+  "version": "1.38.4",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

src/AGENTS.md

@@ -0,0 +1,26 @@
+# Source Code Guidelines
+
+## Error Handling
+
+- User-friendly and actionable messages
+- Proper error propagation
+
+## Security
+
+- Sanitize HTML with DOMPurify
+- Validate trusted sources
+- Never log secrets
+
+## State Management (Stores)
+
+- Follow domain-driven design for organizing files/folders
+- Clear public interfaces
+- Restrict extension access
+- Clean up subscriptions
+
+## General Guidelines
+
+- Use `es-toolkit` for utility functions
+- Use TypeScript for type safety
+- Avoid `@ts-expect-error` - fix the underlying issue
+- Use `vue-i18n` for ALL user-facing strings (`src/locales/en/main.json`)

src/CLAUDE.md

@@ -1,57 +1,3 @@
-# Source Code Guidelines
-
-## Service Layer
-
-### API Calls
-
-- Use `api.apiURL()` for backend endpoints
-- Use `api.fileURL()` for static files
-
-#### ✅ Correct Usage
-```typescript
-// Backend API call
-const response = await api.get(api.apiURL('/prompt'))
-
-// Static file
-const template = await fetch(api.fileURL('/templates/default.json'))
-```
-
-#### ❌ Incorrect Usage
-```typescript
-// WRONG - Direct URL construction
-const response = await fetch('/api/prompt')
-const template = await fetch('/templates/default.json')
-```
-
-### Error Handling
-
-- User-friendly and actionable messages
-- Proper error propagation
-
-### Security
-
-- Sanitize HTML with DOMPurify
-- Validate trusted sources
-- Never log secrets
-
-## State Management (Stores)
-
-### Store Design
-
-- Follow domain-driven design
-- Clear public interfaces
-- Restrict extension access
-
-### Best Practices
-
-- Use TypeScript for type safety
-- Implement proper error handling
-- Clean up subscriptions
-- Avoid @ts-expect-error
-
-## General Guidelines
-
-- Use es-toolkit for utility functions
-- Implement proper TypeScript types
-- Follow Vue 3 composition API style guide
-- Use vue-i18n for ALL user-facing strings in `src/locales/en/main.json`
+<!-- We forked the path, yet here we are again—
+     Maintaining two files where one would have been sane. -->
+@AGENTS.md

src/assets/css/style.css

@@ -1 +1,21 @@
-@import '@comfyorg/design-system/css/style.css';
+@import '@comfyorg/design-system/css/style.css';
+
+@media (prefers-reduced-motion: no-preference) {
+  /* List transition animations */
+  .list-scale-move,
+  .list-scale-enter-active,
+  .list-scale-leave-active {
+    transition: opacity 150ms ease, transform 150ms ease;
+  }
+
+  .list-scale-enter-from,
+  .list-scale-leave-to {
+    opacity: 0;
+    transform: scale(70%);
+  }
+
+  .list-scale-leave-active {
+    position: absolute;
+    width: 100%;
+  }
+}

src/components/AGENTS.md

@@ -0,0 +1,6 @@
+# Component Guidelines
+
+## Component Communication
+
+- Prefer `emit/@event-name` for state changes
+- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)

src/components/CLAUDE.md

@@ -1,45 +1,3 @@
-# Component Guidelines
-
-## Vue 3 Composition API
-
-- Use setup() function
-- Destructure props (Vue 3.5 style)
-- Use ref/reactive for state
-- Implement computed() for derived state
-- Use provide/inject for dependency injection
-
-## Component Communication
-
-- Prefer `emit/@event-name` for state changes
-- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
-- Events promote loose coupling
-
-## UI Framework
-
-- Deprecated PrimeVue component replacements:
-  - Dropdown → Select
-  - OverlayPanel → Popover
-  - Calendar → DatePicker
-  - InputSwitch → ToggleSwitch
-  - Sidebar → Drawer
-  - Chips → AutoComplete with multiple enabled
-  - TabMenu → Tabs without panels
-  - Steps → Stepper without panels
-  - InlineMessage → Message
-
-## Styling
-
-- Use Tailwind CSS only (no custom CSS)
-- Use the correct tokens from style.css in the design system package
-- For common operations, try to use existing VueUse composables that automatically handle effect scope
-  - Example: Use `useElementHover` instead of manually managing mouseover/mouseout event listeners
-  - Example: Use `useIntersectionObserver` for visibility detection instead of custom scroll handlers
-
-## Best Practices
-
-- Extract complex conditionals to computed
-- Implement cleanup for async operations
-- Use vue-i18n for ALL UI strings
-- Use lifecycle hooks: onMounted, onUpdated
-- Use Teleport/Suspense when needed
-- Proper props and emits definitions
+<!-- "Play nice with others," mother always said,
+     But Claude prefers its own file name instead. -->
+@AGENTS.md

src/components/actionbar/ComfyActionbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full items-center">
+  <div class="flex h-full items-center" :class="cn(!isDocked && '-ml-2')">
     <div
       v-if="isDragging && !isDocked"
       :class="actionbarClass"
@@ -77,7 +77,6 @@ const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
 const visible = computed(() => position.value !== 'Disabled')
 
-const tabContainer = document.querySelector('.workflow-tabs-container')
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
 const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
@@ -88,14 +87,7 @@ const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
 const { x, y, style, isDragging } = useDraggable(panelRef, {
   initialValue: { x: 0, y: 0 },
   handle: dragHandleRef,
-  containerElement: document.body,
-  onMove: (event) => {
-    // Prevent dragging the menu over the top of the tabs
-    const minY = tabContainer?.getBoundingClientRect().bottom ?? 40
-    if (event.y < minY) {
-      event.y = minY
-    }
-  }
+  containerElement: document.body
 })
 
 // Update storedPosition when x or y changes

src/components/auth/WorkspaceAuthGate.test.ts

@@ -1,206 +0,0 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-
-import WorkspaceAuthGate from './WorkspaceAuthGate.vue'
-
-const mockIsInitialized = ref(false)
-const mockCurrentUser = ref<object | null>(null)
-
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: () => ({
-    isInitialized: mockIsInitialized,
-    currentUser: mockCurrentUser
-  })
-}))
-
-const mockRefreshRemoteConfig = vi.fn()
-vi.mock('@/platform/remoteConfig/refreshRemoteConfig', () => ({
-  refreshRemoteConfig: (options: unknown) => mockRefreshRemoteConfig(options)
-}))
-
-const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: false }))
-vi.mock('@/composables/useFeatureFlags', () => ({
-  useFeatureFlags: () => ({
-    flags: {
-      get teamWorkspacesEnabled() {
-        return mockTeamWorkspacesEnabled.value
-      }
-    }
-  })
-}))
-
-const mockWorkspaceStoreInitialize = vi.fn()
-const mockWorkspaceStoreInitState = vi.hoisted(() => ({
-  value: 'uninitialized' as string
-}))
-vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
-  useTeamWorkspaceStore: () => ({
-    get initState() {
-      return mockWorkspaceStoreInitState.value
-    },
-    initialize: mockWorkspaceStoreInitialize
-  })
-}))
-
-const mockIsCloud = vi.hoisted(() => ({ value: true }))
-vi.mock('@/platform/distribution/types', () => ({
-  get isCloud() {
-    return mockIsCloud.value
-  }
-}))
-
-vi.mock('primevue/progressspinner', () => ({
-  default: { template: '<div class="progress-spinner" />' }
-}))
-
-describe('WorkspaceAuthGate', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockIsCloud.value = true
-    mockIsInitialized.value = false
-    mockCurrentUser.value = null
-    mockTeamWorkspacesEnabled.value = false
-    mockWorkspaceStoreInitState.value = 'uninitialized'
-    mockRefreshRemoteConfig.mockResolvedValue(undefined)
-    mockWorkspaceStoreInitialize.mockResolvedValue(undefined)
-  })
-
-  const mountComponent = () =>
-    mount(WorkspaceAuthGate, {
-      slots: {
-        default: '<div data-testid="slot-content">App Content</div>'
-      }
-    })
-
-  describe('non-cloud builds', () => {
-    it('renders slot immediately when isCloud is false', async () => {
-      mockIsCloud.value = false
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      expect(wrapper.find('.progress-spinner').exists()).toBe(false)
-      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('cloud builds - unauthenticated user', () => {
-    it('shows spinner while waiting for Firebase auth', () => {
-      mockIsInitialized.value = false
-
-      const wrapper = mountComponent()
-
-      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false)
-    })
-
-    it('renders slot when Firebase initializes with no user', async () => {
-      mockIsInitialized.value = false
-
-      const wrapper = mountComponent()
-      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
-
-      mockIsInitialized.value = true
-      mockCurrentUser.value = null
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('cloud builds - authenticated user', () => {
-    beforeEach(() => {
-      mockIsInitialized.value = true
-      mockCurrentUser.value = { uid: 'user-123' }
-    })
-
-    it('refreshes remote config with auth after Firebase init', async () => {
-      mountComponent()
-      await flushPromises()
-
-      expect(mockRefreshRemoteConfig).toHaveBeenCalledWith({ useAuth: true })
-    })
-
-    it('renders slot when teamWorkspacesEnabled is false', async () => {
-      mockTeamWorkspacesEnabled.value = false
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
-    })
-
-    it('initializes workspace store when teamWorkspacesEnabled is true', async () => {
-      mockTeamWorkspacesEnabled.value = true
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(mockWorkspaceStoreInitialize).toHaveBeenCalled()
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-
-    it('skips workspace init when store is already initialized', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockWorkspaceStoreInitState.value = 'ready'
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-  })
-
-  describe('error handling - graceful degradation', () => {
-    beforeEach(() => {
-      mockIsInitialized.value = true
-      mockCurrentUser.value = { uid: 'user-123' }
-    })
-
-    it('renders slot when remote config refresh fails', async () => {
-      mockRefreshRemoteConfig.mockRejectedValue(new Error('Network error'))
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-
-    it('renders slot when remote config refresh times out', async () => {
-      vi.useFakeTimers()
-      // Never-resolving promise simulates a hanging request
-      mockRefreshRemoteConfig.mockReturnValue(new Promise(() => {}))
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      // Still showing spinner before timeout
-      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
-
-      // Advance past the 10 second timeout
-      await vi.advanceTimersByTimeAsync(10_001)
-      await flushPromises()
-
-      // Should render slot after timeout (graceful degradation)
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      vi.useRealTimers()
-    })
-
-    it('renders slot when workspace store initialization fails', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockWorkspaceStoreInitialize.mockRejectedValue(
-        new Error('Workspace init failed')
-      )
-
-      const wrapper = mountComponent()
-      await flushPromises()
-
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-    })
-  })
-})

src/components/auth/WorkspaceAuthGate.vue

@@ -1,129 +0,0 @@
-<template>
-  <slot v-if="isReady" />
-  <div
-    v-else
-    class="fixed inset-0 z-[1100] flex items-center justify-center bg-[var(--p-mask-background)]"
-  >
-    <ProgressSpinner />
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * WorkspaceAuthGate - Conditional auth checkpoint for workspace mode.
- *
- * This gate ensures proper initialization order for workspace-scoped auth:
- * 1. Wait for Firebase auth to resolve
- * 2. Check if teamWorkspacesEnabled feature flag is on
- * 3. If YES: Initialize workspace token and store before rendering
- * 4. If NO: Render immediately using existing Firebase auth
- *
- * This prevents race conditions where API calls use Firebase tokens
- * instead of workspace tokens when the workspace feature is enabled.
- */
-import { promiseTimeout, until } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import ProgressSpinner from 'primevue/progressspinner'
-import { onMounted, ref } from 'vue'
-
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
-import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-
-const FIREBASE_INIT_TIMEOUT_MS = 16_000
-const CONFIG_REFRESH_TIMEOUT_MS = 10_000
-
-const isReady = ref(!isCloud)
-
-async function initialize(): Promise<void> {
-  if (!isCloud) return
-
-  const authStore = useFirebaseAuthStore()
-  const { isInitialized, currentUser } = storeToRefs(authStore)
-
-  try {
-    // Step 1: Wait for Firebase auth to resolve
-    // This is shared with router guard - both wait for the same thing,
-    // but this gate blocks rendering while router guard blocks navigation
-    if (!isInitialized.value) {
-      await until(isInitialized).toBe(true, {
-        timeout: FIREBASE_INIT_TIMEOUT_MS
-      })
-    }
-
-    // Step 2: If not authenticated, nothing more to do
-    // Unauthenticated users don't have workspace context
-    if (!currentUser.value) {
-      isReady.value = true
-      return
-    }
-
-    // Step 3: Refresh feature flags with auth context
-    // This ensures teamWorkspacesEnabled reflects the authenticated user's state
-    // Timeout prevents hanging if server is slow/unresponsive
-    try {
-      await Promise.race([
-        refreshRemoteConfig({ useAuth: true }),
-        promiseTimeout(CONFIG_REFRESH_TIMEOUT_MS).then(() => {
-          throw new Error('Config refresh timeout')
-        })
-      ])
-    } catch (error) {
-      console.warn(
-        '[WorkspaceAuthGate] Failed to refresh remote config:',
-        error
-      )
-      // Continue - feature flags will use defaults (teamWorkspacesEnabled=false)
-      // App will render with Firebase auth fallback
-    }
-
-    // Step 4: THE CHECKPOINT - Are we in workspace mode?
-    const { flags } = useFeatureFlags()
-    if (!flags.teamWorkspacesEnabled) {
-      // Not in workspace mode - use existing Firebase auth flow
-      // No additional initialization needed
-      isReady.value = true
-      return
-    }
-
-    // Step 5: WORKSPACE MODE - Full initialization
-    await initializeWorkspaceMode()
-  } catch (error) {
-    console.error('[WorkspaceAuthGate] Initialization failed:', error)
-  } finally {
-    // Always render (graceful degradation)
-    // If workspace init failed, API calls fall back to Firebase token
-    isReady.value = true
-  }
-}
-
-async function initializeWorkspaceMode(): Promise<void> {
-  // Initialize the full workspace store which handles:
-  // - Restoring workspace token from session (fast path for refresh)
-  // - Fetching workspace list
-  // - Switching to last used workspace if needed
-  // - Setting active workspace
-  try {
-    const workspaceStore = useTeamWorkspaceStore()
-    if (workspaceStore.initState === 'uninitialized') {
-      await workspaceStore.initialize()
-    }
-  } catch (error) {
-    // Log but don't block - workspace UI features may not work but app will render
-    // API calls will fall back to Firebase token
-    console.warn(
-      '[WorkspaceAuthGate] Failed to initialize workspace store:',
-      error
-    )
-  }
-}
-
-// Initialize on mount. This gate should be placed on the authenticated layout
-// (LayoutDefault) so it mounts fresh after login and unmounts on logout.
-// The router guard ensures only authenticated users reach this layout.
-onMounted(() => {
-  void initialize()
-})
-</script>

src/components/button/MoreButton.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button size="icon" variant="secondary" @click="popover?.toggle">
+    <Button
+      size="icon"
+      variant="secondary"
+      v-bind="$attrs"
+      @click="popover?.toggle"
+    >
       <i
         :class="
           cn(
@@ -60,6 +65,10 @@ import { ref } from 'vue'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 interface MoreButtonProps {
   isVertical?: boolean
 }

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('keydown.enter')
+    await wrapper.findComponent(InputText).trigger('keyup.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('keydown.escape')
+    await wrapper.findComponent(InputText).trigger('keyup.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('keydown.escape')
+    await wrapper.findComponent(InputText).trigger('keyup.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('keydown.enter')
+    await enterWrapper.findComponent(InputText).trigger('keyup.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('keydown.escape')
+    await escapeWrapper.findComponent(InputText).trigger('keyup.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 keydown.enter is triggered -->
+    <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
     <InputText
       v-else
       ref="inputRef"
@@ -18,8 +18,8 @@
           ...inputAttrs
         }
       }"
-      @keydown.enter.capture.stop="blurInputElement"
-      @keydown.escape.capture.stop="cancelEditing"
+      @keyup.enter.capture.stop="blurInputElement"
+      @keyup.escape.stop="cancelEditing"
       @click.stop
       @contextmenu.stop
       @pointerdown.stop.capture

src/components/common/StatusBadge.stories.ts

@@ -1,95 +0,0 @@
-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,27 +1,30 @@
 <script setup lang="ts">
-import { statusBadgeVariants } from './statusBadge.variants'
-import type { StatusBadgeVariants } from './statusBadge.variants'
+type Severity = 'default' | 'secondary' | 'warn' | 'danger' | 'contrast'
 
-const {
-  label,
-  severity = 'default',
-  variant
-} = defineProps<{
-  label?: string | number
-  severity?: StatusBadgeVariants['severity']
-  variant?: StatusBadgeVariants['variant']
+const { label, severity = 'default' } = defineProps<{
+  label: string
+  severity?: Severity
 }>()
+
+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="
-      statusBadgeVariants({
-        severity,
-        variant: variant ?? (label == null ? 'dot' : 'label')
-      })
-    "
-  >
-    {{ label }}
-  </span>
+  <span :class="badgeClasses(severity)">{{ label }}</span>
 </template>

src/components/common/VirtualGrid.vue

@@ -1,20 +1,16 @@
 <template>
-  <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
-      >
+  <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>
         <slot name="item" :item="item" />
       </div>
     </div>
-    <div :style="bottomSpacerStyle" />
+    <div
+      :style="{
+        height: `${((items.length - state.end) / cols) * itemHeight}px`
+      }"
+    />
   </div>
 </template>
 
@@ -32,22 +28,19 @@ type GridState = {
 
 const {
   items,
-  gridStyle,
   bufferRows = 1,
   scrollThrottle = 64,
   resizeDebounce = 64,
   defaultItemHeight = 200,
-  defaultItemWidth = 200,
-  maxColumns = Infinity
+  defaultItemWidth = 200
 } = defineProps<{
   items: (T & { key: string })[]
-  gridStyle: CSSProperties
+  gridStyle: Partial<CSSProperties>
   bufferRows?: number
   scrollThrottle?: number
   resizeDebounce?: number
   defaultItemHeight?: number
   defaultItemWidth?: number
-  maxColumns?: number
 }>()
 
 const emit = defineEmits<{
@@ -66,18 +59,7 @@ const { y: scrollY } = useScroll(container, {
   eventListenerOptions: { passive: true }
 })
 
-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 cols = computed(() => Math.floor(width.value / itemWidth.value) || 1)
 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)
@@ -101,16 +83,6 @@ 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,
   () => {
@@ -137,6 +109,15 @@ const onResize = debounce(updateItemSize, resizeDebounce)
 watch([width, height], onResize, { flush: 'post' })
 whenever(() => items, updateItemSize, { flush: 'post' })
 onBeforeUnmount(() => {
-  onResize.cancel()
+  onResize.cancel() // Clear pending debounced calls
 })
 </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

@@ -1,43 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-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,14 +3,17 @@
     :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" />
+      <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>
     </template>
 
     <template #header>

src/components/dialog/GlobalDialog.vue

@@ -4,14 +4,9 @@
     v-for="item in dialogStore.dialogStack"
     :key="item.key"
     v-model:visible="item.visible"
-    :class="[
-      'global-dialog',
-      item.key === 'global-settings' && teamWorkspacesEnabled
-        ? 'settings-dialog-workspace'
-        : ''
-    ]"
+    class="global-dialog"
     v-bind="item.dialogComponentProps"
-    :pt="getDialogPt(item)"
+    :pt="item.dialogComponentProps.pt"
     :aria-labelledby="item.key"
   >
     <template #header>
@@ -41,38 +36,11 @@
 </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>
@@ -87,17 +55,4 @@ function getDialogPt(item: {
   @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;
-}
 </style>

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -31,12 +31,7 @@
         }}</label>
       </div>
 
-      <Button
-        v-if="type !== 'info'"
-        variant="secondary"
-        autofocus
-        @click="onCancel"
-      >
+      <Button variant="secondary" autofocus @click="onCancel">
         <i class="pi pi-undo" />
         {{ $t('g.cancel') }}
       </Button>
@@ -78,10 +73,6 @@
         <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/CurrentUserMessage.vue

@@ -7,7 +7,7 @@
     pt:text="w-full"
   >
     <div class="flex items-center justify-between">
-      <div>
+      <div data-testid="current-user-indicator">
         {{ $t('g.currentUser') }}: {{ userStore.currentUser?.username }}
       </div>
       <Button

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

@@ -1,511 +0,0 @@
-<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/WorkspacePanel.vue

@@ -1,11 +0,0 @@
-<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

@@ -1,238 +0,0 @@
-<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 { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useDialogService } from '@/services/dialogService'
-import { cn } from '@/utils/tailwindUtil'
-
-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

@@ -1,19 +0,0 @@
-<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/workspace/CreateWorkspaceDialogContent.vue

@@ -1,112 +0,0 @@
-<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

@@ -1,89 +0,0 @@
-<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

@@ -1,104 +0,0 @@
-<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

@@ -1,182 +0,0 @@
-<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

@@ -1,78 +0,0 @@
-<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

@@ -1,83 +0,0 @@
-<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

@@ -1,79 +0,0 @@
-<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

@@ -126,13 +126,11 @@ import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { mergeCustomNodesI18n, t } from '@/i18n'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { isCloud } from '@/platform/distribution/types'
 import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -141,7 +139,6 @@ import { useWorkflowService } from '@/platform/workflow/core/services/workflowSe
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
-import { useInviteUrlLoader } from '@/platform/workspace/composables/useInviteUrlLoader'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
@@ -397,9 +394,6 @@ 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()
@@ -465,12 +459,6 @@ onMounted(async () => {
   // Load template from URL if present
   await workflowPersistence.loadTemplateFromUrlIfPresent()
 
-  // Accept workspace invite from URL if present (e.g., ?invite=TOKEN)
-  // WorkspaceAuthGate ensures flag state is resolved before GraphCanvas mounts
-  if (inviteUrlLoader && flags.teamWorkspacesEnabled) {
-    await inviteUrlLoader.loadInviteFromUrl()
-  }
-
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)
   const { useReleaseStore } =
     await import('@/platform/updates/common/releaseStore')

src/components/graph/SelectionToolbox.vue

@@ -10,7 +10,7 @@
         class="selection-toolbox pointer-events-auto rounded-lg border border-interface-stroke bg-interface-panel-surface"
         :pt="{
           header: 'hidden',
-          content: 'p-2 h-12 flex flex-row gap-1'
+          content: 'p-1 h-10 flex flex-row gap-1'
         }"
         @wheel="canvasInteractions.forwardEventToCanvas"
       >

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

@@ -6,67 +6,19 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
-// NOTE: The component import must come after mocks so they take effect.
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
+import Button from '@/components/ui/button/Button.vue'
 
-const mockLGraphNode = {
-  type: 'TestNode',
-  title: 'Test Node'
-}
-
-vi.mock('@/utils/litegraphUtil', () => ({
-  isLGraphNode: vi.fn(() => true)
+const { openPanelMock } = vi.hoisted(() => ({
+  openPanelMock: vi.fn()
 }))
 
-vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
-  useNodeLibrarySidebarTab: () => ({
-    id: 'node-library'
-  })
-}))
-
-const openHelpMock = vi.fn()
-const closeHelpMock = vi.fn()
-const nodeHelpState: { currentHelpNode: any } = { currentHelpNode: null }
-vi.mock('@/stores/workspace/nodeHelpStore', () => ({
-  useNodeHelpStore: () => ({
-    openHelp: (def: any) => {
-      nodeHelpState.currentHelpNode = def
-      openHelpMock(def)
-    },
-    closeHelp: () => {
-      nodeHelpState.currentHelpNode = null
-      closeHelpMock()
-    },
-    get currentHelpNode() {
-      return nodeHelpState.currentHelpNode
-    },
-    get isHelpOpen() {
-      return nodeHelpState.currentHelpNode !== null
-    }
-  })
-}))
-
-const toggleSidebarTabMock = vi.fn((id: string) => {
-  sidebarState.activeSidebarTabId =
-    sidebarState.activeSidebarTabId === id ? null : id
-})
-const sidebarState: { activeSidebarTabId: string | null } = {
-  activeSidebarTabId: 'other-tab'
-}
-vi.mock('@/stores/workspace/sidebarTabStore', () => ({
-  useSidebarTabStore: () => ({
-    get activeSidebarTabId() {
-      return sidebarState.activeSidebarTabId
-    },
-    toggleSidebarTab: toggleSidebarTabMock
+vi.mock('@/stores/workspace/rightSidePanelStore', () => ({
+  useRightSidePanelStore: () => ({
+    openPanel: openPanelMock
   })
 }))
 
 describe('InfoButton', () => {
-  let canvasStore: ReturnType<typeof useCanvasStore>
-  let nodeDefStore: ReturnType<typeof useNodeDefStore>
-
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -81,9 +33,6 @@ describe('InfoButton', () => {
 
   beforeEach(() => {
     setActivePinia(createPinia())
-    canvasStore = useCanvasStore()
-    nodeDefStore = useNodeDefStore()
-
     vi.clearAllMocks()
   })
 
@@ -92,58 +41,15 @@ describe('InfoButton', () => {
       global: {
         plugins: [i18n, PrimeVue],
         directives: { tooltip: Tooltip },
-        stubs: {
-          'i-lucide:info': true,
-          Button: {
-            template:
-              '<button class="help-button" severity="secondary"><slot /></button>',
-            props: ['severity', 'text', 'class'],
-            emits: ['click']
-          }
-        }
+        components: { Button }
       }
     })
   }
 
-  it('should handle click without errors', async () => {
-    const mockNodeDef = {
-      nodePath: 'test/node',
-      display_name: 'Test Node'
-    }
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+  it('should open the info panel on click', async () => {
     const wrapper = mountComponent()
-    const button = wrapper.find('button')
+    const button = wrapper.find('[data-testid="info-button"]')
     await button.trigger('click')
-    expect(button.exists()).toBe(true)
-  })
-
-  it('should have correct CSS classes', () => {
-    const mockNodeDef = {
-      nodePath: 'test/node',
-      display_name: 'Test Node'
-    }
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
-
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-
-    expect(button.classes()).toContain('help-button')
-    expect(button.attributes('severity')).toBe('secondary')
-  })
-
-  it('should have correct tooltip', () => {
-    const mockNodeDef = {
-      nodePath: 'test/node',
-      display_name: 'Test Node'
-    }
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
-
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-
-    expect(button.exists()).toBe(true)
+    expect(openPanelMock).toHaveBeenCalledWith('info')
   })
 })

src/components/node/NodeHelpContent.vue

@@ -70,17 +70,17 @@
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed } from 'vue'
 
+import { useNodeHelpContent } from '@/composables/useNodeHelpContent'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 
-const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
+const { node } = defineProps<{
+  node: ComfyNodeDefImpl
+}>()
 
-const nodeHelpStore = useNodeHelpStore()
-const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
+const { renderedHelpHtml, isLoading, error } = useNodeHelpContent(() => node)
 
 const inputList = computed(() =>
   Object.values(node.inputs).map((spec) => ({

src/components/primevueOverride/SelectPlus.vue

@@ -0,0 +1,19 @@
+<script>
+import Select from 'primevue/select'
+
+export default {
+  name: 'SelectPlus',
+  extends: Select,
+  emits: ['hide'],
+  methods: {
+    onOverlayLeave() {
+      this.unbindOutsideClickListener()
+      this.unbindScrollListener()
+      this.unbindResizeListener()
+
+      this.$emit('hide')
+      this.overlay = null
+    }
+  }
+}
+</script>

src/components/queue/QueueProgressOverlay.vue

@@ -262,7 +262,7 @@ const focusAssetInSidebar = async (item: JobListItem) => {
 
 const inspectJobAsset = wrapWithErrorHandlingAsync(
   async (item: JobListItem) => {
-    openResultGallery(item)
+    await openResultGallery(item)
     await focusAssetInSidebar(item)
   }
 )

src/components/queue/job/JobDetailsPopover.stories.ts

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import type { TaskStatus } from '@/schemas/apiSchema'
+import type {
+  JobListItem,
+  JobStatus
+} from '@/platform/remote/comfyui/jobs/jobTypes'
 import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 
@@ -37,91 +40,86 @@ function resetStores() {
   exec.nodeProgressStatesByPrompt = {}
 }
 
+function makeTask(
+  id: string,
+  priority: number,
+  fields: Partial<JobListItem> & { status: JobStatus; create_time: number }
+): TaskItemImpl {
+  const job: JobListItem = {
+    id,
+    priority,
+    last_state_update: null,
+    update_time: fields.create_time,
+    ...fields
+  }
+  return new TaskItemImpl(job)
+}
+
 function makePendingTask(
   id: string,
-  index: number,
-  createTimeMs?: number
+  priority: number,
+  createTimeMs: number
 ): TaskItemImpl {
-  const extraData = {
-    client_id: 'c1',
-    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
-  }
-  return new TaskItemImpl('Pending', [index, id, {}, extraData, []])
+  return makeTask(id, priority, {
+    status: 'pending',
+    create_time: createTimeMs
+  })
 }
 
 function makeRunningTask(
   id: string,
-  index: number,
-  createTimeMs?: number
+  priority: number,
+  createTimeMs: number
 ): TaskItemImpl {
-  const extraData = {
-    client_id: 'c1',
-    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
-  }
-  return new TaskItemImpl('Running', [index, id, {}, extraData, []])
+  return makeTask(id, priority, {
+    status: 'in_progress',
+    create_time: createTimeMs
+  })
 }
 
 function makeRunningTaskWithStart(
   id: string,
-  index: number,
+  priority: number,
   startedSecondsAgo: number
 ): TaskItemImpl {
   const start = Date.now() - startedSecondsAgo * 1000
-  const status: TaskStatus = {
-    status_str: 'success',
-    completed: false,
-    messages: [['execution_start', { prompt_id: id, timestamp: start } as any]]
-  }
-  return new TaskItemImpl(
-    'Running',
-    [index, id, {}, { client_id: 'c1', create_time: start - 5000 }, []],
-    status
-  )
+  return makeTask(id, priority, {
+    status: 'in_progress',
+    create_time: start - 5000,
+    update_time: start
+  })
 }
 
 function makeHistoryTask(
   id: string,
-  index: number,
+  priority: number,
   durationSec: number,
   ok: boolean,
   errorMessage?: string
 ): TaskItemImpl {
-  const start = Date.now() - durationSec * 1000 - 1000
-  const end = start + durationSec * 1000
-  const messages: TaskStatus['messages'] = ok
-    ? [
-        ['execution_start', { prompt_id: id, timestamp: start } as any],
-        ['execution_success', { prompt_id: id, timestamp: end } as any]
-      ]
-    : [
-        ['execution_start', { prompt_id: id, timestamp: start } as any],
-        [
-          'execution_error',
-          {
-            prompt_id: id,
-            timestamp: end,
-            node_id: '1',
-            node_type: 'Node',
-            executed: [],
-            exception_message:
-              errorMessage || 'Demo error: Node failed during execution',
-            exception_type: 'RuntimeError',
-            traceback: [],
-            current_inputs: {},
-            current_outputs: {}
-          } as any
-        ]
-      ]
-  const status: TaskStatus = {
-    status_str: ok ? 'success' : 'error',
-    completed: true,
-    messages
-  }
-  return new TaskItemImpl(
-    'History',
-    [index, id, {}, { client_id: 'c1', create_time: start }, []],
-    status
-  )
+  const now = Date.now()
+  const executionEndTime = now
+  const executionStartTime = now - durationSec * 1000
+  return makeTask(id, priority, {
+    status: ok ? 'completed' : 'failed',
+    create_time: executionStartTime - 5000,
+    update_time: now,
+    execution_start_time: executionStartTime,
+    execution_end_time: executionEndTime,
+    execution_error: errorMessage
+      ? {
+          prompt_id: id,
+          timestamp: now,
+          node_id: '1',
+          node_type: 'ExampleNode',
+          exception_message: errorMessage,
+          exception_type: 'RuntimeError',
+          traceback: [],
+          current_inputs: {},
+          current_outputs: {}
+        }
+      : undefined
+  })
 }
 
 export const Queued: Story = {
@@ -140,8 +138,12 @@ export const Queued: Story = {
         makePendingTask(jobId, queueIndex, Date.now() - 90_000)
       ]
       // Add some other pending jobs to give context
-      queue.pendingTasks.push(makePendingTask('job-older-1', 100))
-      queue.pendingTasks.push(makePendingTask('job-older-2', 101))
+      queue.pendingTasks.push(
+        makePendingTask('job-older-1', 100, Date.now() - 60_000)
+      )
+      queue.pendingTasks.push(
+        makePendingTask('job-older-2', 101, Date.now() - 30_000)
+      )
 
       // Queued at (in metadata on prompt[4])
 

src/components/queue/job/JobGroupsList.test.ts

@@ -4,6 +4,7 @@ import { defineComponent, nextTick } from 'vue'
 
 import JobGroupsList from '@/components/queue/job/JobGroupsList.vue'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+import type { TaskItemImpl } from '@/stores/queueStore'
 
 const QueueJobItemStub = defineComponent({
   name: 'QueueJobItemStub',
@@ -25,20 +26,25 @@ const QueueJobItemStub = defineComponent({
   template: '<div class="queue-job-item-stub"></div>'
 })
 
-const createJobItem = (overrides: Partial<JobListItem> = {}): JobListItem => ({
-  id: 'job-id',
-  title: 'Example job',
-  meta: 'Meta text',
-  state: 'running',
-  iconName: 'icon',
-  iconImageUrl: 'https://example.com/icon.png',
-  showClear: true,
-  taskRef: { workflow: { id: 'workflow-id' } },
-  progressTotalPercent: 60,
-  progressCurrentPercent: 30,
-  runningNodeName: 'Node A',
-  ...overrides
-})
+const createJobItem = (overrides: Partial<JobListItem> = {}): JobListItem => {
+  const { taskRef, ...rest } = overrides
+  return {
+    id: 'job-id',
+    title: 'Example job',
+    meta: 'Meta text',
+    state: 'running',
+    iconName: 'icon',
+    iconImageUrl: 'https://example.com/icon.png',
+    showClear: true,
+    taskRef: (taskRef ?? {
+      workflow: { id: 'workflow-id' }
+    }) as TaskItemImpl,
+    progressTotalPercent: 60,
+    progressCurrentPercent: 30,
+    runningNodeName: 'Node A',
+    ...rest
+  }
+}
 
 const mountComponent = (groups: JobGroup[]) =>
   mount(JobGroupsList, {