[backport cloud/1.37] fix: version mismatch warning appearing in Playwright tests despite DisableWarnings setting (#8039)

Backport of #8036 to `cloud/1.37`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8039-backport-cloud-1-37-fix-version-mismatch-warning-appearing-in-Playwright-tests-despite-2e86d73d3650817d9534c0449798e7b1)
by [Unito](https://www.unito.io)

Co-authored-by: Christian Byrne <cbyrne@comfy.org>

.cursor/rules/unit-test.mdc

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

@@ -1,14 +0,0 @@
-# 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,3 +1,36 @@
-<!-- A rose by any other name would smell as sweet,
-     But Claude insists on files named for its own conceit. -->
-@AGENTS.md
+# 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`.

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

@@ -144,10 +144,9 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
+      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
 
       - name: Download blob reports
         uses: actions/download-artifact@v4
@@ -159,10 +158,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm dlx @playwright/test merge-reports --reporter=html ./all-blob-reports
+          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm dlx @playwright/test merge-reports --reporter=json ./all-blob-reports
+          pnpm exec playwright 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: Comfy-Org/ComfyUI
+          repository: comfyanonymous/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/Comfy-Org/ComfyUI.git master; then
+          if ! git fetch https://github.com/comfyanonymous/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 Comfy-Org/ComfyUI"
+          echo "Creating PR from ${COMFYUI_FORK} to comfyanonymous/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 Comfy-Org/ComfyUI \
+            --repo comfyanonymous/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 Comfy-Org/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
+            EXISTING_PR=$(gh pr list --repo comfyanonymous/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 Comfy-Org/ComfyUI" >> $GITHUB_STEP_SUMMARY
+          echo "Draft PR created in comfyanonymous/ComfyUI" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "### PR Body:" >> $GITHUB_STEP_SUMMARY
           cat pr-body.txt >> $GITHUB_STEP_SUMMARY

.storybook/AGENTS.md

@@ -1,17 +0,0 @@
-# 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,3 +1,197 @@
-<!-- Though standards bloom in open fields so wide,
-     Anthropic walks a path of lonely pride. -->
-@AGENTS.md
+# 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

AGENTS.md

@@ -1,7 +1,5 @@
 # Repository Guidelines
 
-See @docs/guidance/*.md for file-type-specific conventions (auto-loaded by glob).
-
 ## Project Structure & Module Organization
 
 - Source: `src/`
@@ -48,21 +46,6 @@ 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 +1,30 @@
-@AGENTS.md
+# 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

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,7 +55,8 @@
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
-/src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
+/src/locales/pt-BR/                               @JonatanAtila @Yorha4D @KarryCharon @shinshin86
 
 # LLM Instructions (blank on purpose)
 .claude/

browser_tests/AGENTS.md

@@ -1,8 +0,0 @@
-# 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,3 +1,17 @@
-<!-- In gardens where the agents freely play,
-     One stubborn flower turns the other way. -->
-@AGENTS.md
+# 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

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, LGraph } from '../../src/lib/litegraph/src/litegraph'
+import type { LGraphNode } 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,6 +21,7 @@ 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()
 
@@ -145,6 +146,8 @@ 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
@@ -298,6 +301,11 @@ export class ComfyPage {
     }
   }
 
+  setupHistory(): TaskHistory {
+    this._history ??= new TaskHistory(this)
+    return this._history
+  }
+
   async setup({
     clearStorage = true,
     mockReleases = true
@@ -1583,29 +1591,14 @@ export class ComfyPage {
       return window['app'].graph.nodes
     })
   }
-  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[]> {
+  async getNodeRefsByType(type: string): Promise<NodeReference[]> {
     return Promise.all(
       (
-        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 }
-        )
+        await this.page.evaluate((type) => {
+          return window['app'].graph.nodes
+            .filter((n: LGraphNode) => n.type === type)
+            .map((n: LGraphNode) => n.id)
+        }, type)
       ).map((id: NodeId) => this.getNodeRefById(id))
     )
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -159,18 +159,8 @@ export class VueNodeHelpers {
   getInputNumberControls(widget: Locator) {
     return {
       input: widget.locator('input'),
-      decrementButton: widget.getByTestId('decrement'),
-      incrementButton: widget.getByTestId('increment')
+      incrementButton: widget.locator('button').first(),
+      decrementButton: widget.locator('button').nth(1)
     }
   }
-
-  /**
-   * 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

@@ -0,0 +1,164 @@
+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,14 +22,8 @@ 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',
-      {
-        mask: [
-          comfyPage.settingDialog.root.getByTestId('current-user-indicator')
-        ]
-      }
+      'mobile-settings-dialog.png'
     )
   })
 })

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

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

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,51 +993,4 @@ 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)
-  })
 })

browser_tests/tests/widget.spec.ts

@@ -194,10 +194,7 @@ test.describe('Image widget', () => {
     const comboEntry = comfyPage.page.getByRole('menuitem', {
       name: 'image32x32.webp'
     })
-    await comboEntry.click()
-
-    // Stabilization for the image swap
-    await comfyPage.nextFrame()
+    await comboEntry.click({ noWaitAfter: true })
 
     // Expect the image preview to change automatically
     await expect(comfyPage.canvas).toHaveScreenshot(

docs/guidance/playwright.md

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

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

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

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

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

lint-staged.config.mjs

@@ -1,25 +0,0 @@
-import path from 'node:path'
-
-export default {
-  'tests-ui/**': () => 'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
-
-  './**/*.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,13 +3,6 @@
   "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.38.4",
+  "version": "1.37.10",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -192,10 +192,5 @@
     "yjs": "catalog:",
     "zod": "catalog:",
     "zod-validation-error": "catalog:"
-  },
-  "pnpm": {
-    "overrides": {
-      "vite": "^8.0.0-beta.8"
-    }
   }
 }

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

@@ -247,7 +247,6 @@
   --inverted-background-hover: var(--color-charcoal-600);
   --warning-background: var(--color-gold-400);
   --warning-background-hover: var(--color-gold-500);
-  --success-background: var(--color-jade-600);
   --border-default: var(--color-smoke-600);
   --border-subtle: var(--color-smoke-400);
   --muted-background: var(--color-smoke-700);
@@ -282,7 +281,7 @@
    --modal-card-border-highlighted: var(--secondary-background-selected);
    --modal-card-button-surface: var(--color-smoke-300);
    --modal-card-placeholder-background: var(--color-smoke-600);
-   --modal-card-tag-background: var(--color-smoke-200);
+   --modal-card-tag-background: var(--color-smoke-400);
    --modal-card-tag-foreground: var(--base-foreground);
    --modal-panel-background: var(--color-white);
 }
@@ -373,7 +372,6 @@
   --inverted-background-hover: var(--color-smoke-200);
   --warning-background: var(--color-gold-600);
   --warning-background-hover: var(--color-gold-500);
-  --success-background: var(--color-jade-600);
   --border-default: var(--color-charcoal-200);
   --border-subtle: var(--color-charcoal-300);
   --muted-background: var(--color-charcoal-100);
@@ -518,7 +516,6 @@
   --color-inverted-background-hover: var(--inverted-background-hover);
   --color-warning-background: var(--warning-background);
   --color-warning-background-hover: var(--warning-background-hover);
-  --color-success-background: var(--success-background);
   --color-border-default: var(--border-default);
   --color-border-subtle: var(--border-subtle);
   --color-muted-background: var(--muted-background);

pnpm-workspace.yaml

@@ -93,7 +93,7 @@ catalog:
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
-  vite: ^8.0.0-beta.8
+  vite: ^7.3.0
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0

src/AGENTS.md

@@ -1,26 +0,0 @@
-# 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,3 +1,57 @@
-<!-- We forked the path, yet here we are again—
-     Maintaining two files where one would have been sane. -->
-@AGENTS.md
+# 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`

src/assets/css/style.css

@@ -1,21 +1 @@
-@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%;
-  }
-}
+@import '@comfyorg/design-system/css/style.css';

src/components/AGENTS.md

@@ -1,6 +0,0 @@
-# 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,3 +1,45 @@
-<!-- "Play nice with others," mother always said,
-     But Claude prefers its own file name instead. -->
-@AGENTS.md
+# 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

src/components/actionbar/ComfyActionbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full items-center" :class="cn(!isDocked && '-ml-2')">
+  <div class="flex h-full items-center">
     <div
       v-if="isDragging && !isDocked"
       :class="actionbarClass"
@@ -77,6 +77,7 @@ 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)
@@ -87,7 +88,14 @@ const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
 const { x, y, style, isDragging } = useDraggable(panelRef, {
   initialValue: { x: 0, y: 0 },
   handle: dragHandleRef,
-  containerElement: document.body
+  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
+    }
+  }
 })
 
 // Update storedPosition when x or y changes

src/components/boundingbox/WidgetBoundingBox.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="grid grid-cols-[auto_1fr] gap-x-2 gap-y-1">
-    <label class="content-center text-xs text-node-component-slot-text">
-      {{ $t('boundingBox.x') }}
-    </label>
-    <input
-      v-model.number="x"
-      type="number"
-      :min="0"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
-    <label class="content-center text-xs text-node-component-slot-text">
-      {{ $t('boundingBox.y') }}
-    </label>
-    <input
-      v-model.number="y"
-      type="number"
-      :min="0"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
-    <label class="content-center text-xs text-node-component-slot-text">
-      {{ $t('boundingBox.width') }}
-    </label>
-    <input
-      v-model.number="width"
-      type="number"
-      :min="1"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
-    <label class="content-center text-xs text-node-component-slot-text">
-      {{ $t('boundingBox.height') }}
-    </label>
-    <input
-      v-model.number="height"
-      type="number"
-      :min="1"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import type { Bounds } from '@/renderer/core/layout/types'
-
-const modelValue = defineModel<Bounds>({
-  default: () => ({ x: 0, y: 0, width: 512, height: 512 })
-})
-
-const x = computed({
-  get: () => modelValue.value.x,
-  set: (x) => {
-    modelValue.value = { ...modelValue.value, x }
-  }
-})
-
-const y = computed({
-  get: () => modelValue.value.y,
-  set: (y) => {
-    modelValue.value = { ...modelValue.value, y }
-  }
-})
-
-const width = computed({
-  get: () => modelValue.value.width,
-  set: (width) => {
-    modelValue.value = { ...modelValue.value, width }
-  }
-})
-
-const height = computed({
-  get: () => modelValue.value.height,
-  set: (height) => {
-    modelValue.value = { ...modelValue.value, height }
-  }
-})
-</script>

src/components/button/MoreButton.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button
-      size="icon"
-      variant="secondary"
-      v-bind="$attrs"
-      @click="popover?.toggle"
-    >
+    <Button size="icon" variant="secondary" @click="popover?.toggle">
       <i
         :class="
           cn(
@@ -65,10 +60,6 @@ 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/WorkspaceProfilePic.vue

@@ -1,43 +0,0 @@
-<template>
-  <div
-    class="flex size-6 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/dialog/GlobalDialog.vue

@@ -4,12 +4,7 @@
     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="item.dialogComponentProps.pt"
     :aria-labelledby="item.key"
@@ -43,13 +38,8 @@
 <script setup lang="ts">
 import Dialog from 'primevue/dialog'
 
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
 import { useDialogStore } from '@/stores/dialogStore'
 
-const { flags } = useFeatureFlags()
-const teamWorkspacesEnabled = isCloud && flags.teamWorkspacesEnabled
-
 const dialogStore = useDialogStore()
 </script>
 
@@ -66,16 +56,6 @@ const dialogStore = useDialogStore()
   @apply pt-0;
 }
 
-/* Workspace mode: wider settings dialog */
-.settings-dialog-workspace {
-  width: 100%;
-  max-width: 1440px;
-}
-
-.settings-dialog-workspace .p-dialog-content {
-  width: 100%;
-}
-
 .manager-dialog {
   height: 80vh;
   max-width: 1724px;

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

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

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

@@ -1,483 +0,0 @@
-<template>
-  <div
-    class="flex size-full flex-col gap-2 rounded-2xl border border-border-default 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'">
-          <!-- Current user (always pinned at top, no date) -->
-          <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
-                      v-if="isPersonalWorkspace"
-                      class="text-muted-foreground"
-                    >
-                      ({{ $t('g.you') }})
-                    </span>
-                  </span>
-                  <div
-                    v-if="uiConfig.showRoleBadge"
-                    class="py-0.5 px-1.5 text-xs bg-background-muted"
-                  >
-                    {{ workspaceRole }}
-                  </div>
-                </div>
-                <span class="text-sm text-muted-foreground">
-                  {{ userEmail }}
-                </span>
-              </div>
-            </div>
-            <!-- Empty cell for grid alignment (no date for current user) -->
-            <span v-if="uiConfig.showDateColumn" />
-            <!-- Empty cell for action column (can't remove yourself) -->
-            <span v-if="permissions.canRemoveMembers" />
-          </div>
-
-          <!-- Other members (sorted) -->
-          <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">
-              <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">
-                  {{ member.name.charAt(0).toUpperCase() }}
-                </span>
-              </div>
-              <div class="flex min-w-0 flex-1 flex-col gap-1">
-                <span class="text-sm text-base-foreground">
-                  {{ member.name }}
-                </span>
-                <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) -->
-            <div
-              v-if="permissions.canRemoveMembers"
-              class="flex items-center justify-end"
-            >
-              <Button
-                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>
-
-        <!-- 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>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import Menu from 'primevue/menu'
-import { useToast } from 'primevue/usetoast'
-import { computed, onMounted, ref, watch } 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 { fetchMembers, fetchPendingInvites, copyInviteLink } = workspaceStore
-const { permissions, uiConfig, workspaceRole } = 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)
-}
-
-async function refreshData() {
-  await Promise.all([fetchMembers(), fetchPendingInvites()])
-}
-
-onMounted(() => {
-  void refreshData()
-})
-
-watch(workspaceRole, () => {
-  // Reset to active view if pending tab is not available for this role
-  if (!uiConfig.value.showPendingTab) {
-    activeView.value = 'active'
-  }
-  void refreshData()
-})
-
-// Other members (sorted, excluding current user)
-const filteredMembers = computed(() => {
-  let result = members.value.filter(
-    (member) => member.email.toLowerCase() !== userEmail.value?.toLowerCase()
-  )
-
-  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) => {
-    const aValue = a.joinDate.getTime()
-    const bValue = b.joinDate.getTime()
-    return sortDirection.value === 'asc' ? aValue - bValue : bValue - aValue
-  })
-
-  return result
-})
-
-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 as 'inviteDate' | 'expiryDate'
-  result.sort((a, b) => {
-    const aValue = a[field].getTime()
-    const bValue = b[field].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,201 +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 :value="activeTab" @update:value="setActiveTab">
-      <div class="flex w-full items-center">
-        <TabList class="w-full">
-          <Tab value="plan">{{ $t('workspacePanel.tabs.planCredits') }}</Tab>
-          <Tab value="members">{{
-            $t('workspacePanel.tabs.membersCount', { count: 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 }"
-            variant="muted-textonly"
-            size="icon"
-            :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' : ''
-                ]"
-                @click="
-                  item.command?.({
-                    originalEvent: $event,
-                    item
-                  })
-                "
-              >
-                <i :class="item.icon" />
-                <span>{{ item.label }}</span>
-              </div>
-            </template>
-          </Menu>
-        </template>
-      </div>
-
-      <TabPanels>
-        <TabPanel value="plan">
-          <SubscriptionPanelContent />
-        </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 SubscriptionPanelContent 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'
-
-const { defaultTab = 'plan' } = defineProps<{
-  defaultTab?: string
-}>()
-
-const { t } = useI18n()
-const {
-  showLeaveWorkspaceDialog,
-  showDeleteWorkspaceDialog,
-  showInviteMemberDialog,
-  showEditWorkspaceDialog
-} = useDialogService()
-const workspaceStore = useTeamWorkspaceStore()
-const { workspaceName, members, isInviteLimitReached, isWorkspaceSubscribed } =
-  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,113 +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()
-  // Allow alphanumeric, spaces, hyphens, underscores (safe characters)
-  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,175 +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'
-  } 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,68 +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 { ref } from 'vue'
-
-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 loading = ref(false)
-
-function onCancel() {
-  dialogStore.closeDialog({ key: 'remove-member' })
-}
-
-async function onRemove() {
-  loading.value = true
-  try {
-    await workspaceStore.removeMember(memberId)
-    dialogStore.closeDialog({ key: 'remove-member' })
-  } finally {
-    loading.value = false
-  }
-}
-</script>

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

@@ -1,68 +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 { ref } from 'vue'
-
-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 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' })
-  } 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'
@@ -396,7 +394,6 @@ const loadCustomNodesI18n = async () => {
 
 const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
-const { flags } = useFeatureFlags()
 useCanvasDrop(canvasRef)
 useLitegraphSettings()
 useNodeBadge()
@@ -462,13 +459,6 @@ onMounted(async () => {
   // Load template from URL if present
   await workflowPersistence.loadTemplateFromUrlIfPresent()
 
-  // Accept workspace invite from URL if present (e.g., ?invite=TOKEN)
-  if (isCloud && flags.teamWorkspacesEnabled) {
-    const { useInviteUrlLoader } =
-      await import('@/platform/workspace/composables/useInviteUrlLoader')
-    await useInviteUrlLoader().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-1 h-10 flex flex-row gap-1'
+          content: 'p-2 h-12 flex flex-row gap-1'
         }"
         @wheel="canvasInteractions.forwardEventToCanvas"
       >

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

@@ -6,19 +6,67 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
-import Button from '@/components/ui/button/Button.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'
 
-const { openPanelMock } = vi.hoisted(() => ({
-  openPanelMock: vi.fn()
+const mockLGraphNode = {
+  type: 'TestNode',
+  title: 'Test Node'
+}
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => true)
 }))
 
-vi.mock('@/stores/workspace/rightSidePanelStore', () => ({
-  useRightSidePanelStore: () => ({
-    openPanel: openPanelMock
+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
   })
 }))
 
 describe('InfoButton', () => {
+  let canvasStore: ReturnType<typeof useCanvasStore>
+  let nodeDefStore: ReturnType<typeof useNodeDefStore>
+
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -33,6 +81,9 @@ describe('InfoButton', () => {
 
   beforeEach(() => {
     setActivePinia(createPinia())
+    canvasStore = useCanvasStore()
+    nodeDefStore = useNodeDefStore()
+
     vi.clearAllMocks()
   })
 
@@ -41,15 +92,58 @@ describe('InfoButton', () => {
       global: {
         plugins: [i18n, PrimeVue],
         directives: { tooltip: Tooltip },
-        components: { Button }
+        stubs: {
+          'i-lucide:info': true,
+          Button: {
+            template:
+              '<button class="help-button" severity="secondary"><slot /></button>',
+            props: ['severity', 'text', 'class'],
+            emits: ['click']
+          }
+        }
       }
     })
   }
 
-  it('should open the info panel on click', async () => {
+  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)
     const wrapper = mountComponent()
-    const button = wrapper.find('[data-testid="info-button"]')
+    const button = wrapper.find('button')
     await button.trigger('click')
-    expect(openPanelMock).toHaveBeenCalledWith('info')
+    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)
   })
 })

src/components/imagecrop/WidgetImageCrop.vue

@@ -1,100 +0,0 @@
-<template>
-  <div
-    class="widget-expands relative flex h-full w-full flex-col gap-1"
-    @pointerdown.stop
-    @pointermove.stop
-    @pointerup.stop
-  >
-    <!-- Image preview container -->
-    <div
-      ref="containerEl"
-      class="relative min-h-0 flex-1 overflow-hidden rounded-[5px] bg-node-component-surface"
-    >
-      <div v-if="isLoading" class="flex size-full items-center justify-center">
-        <span class="text-sm">{{ $t('imageCrop.loading') }}</span>
-      </div>
-
-      <div
-        v-else-if="!imageUrl"
-        class="flex size-full flex-col items-center justify-center text-center"
-      >
-        <i class="mb-2 icon-[lucide--image] h-12 w-12" />
-        <p class="text-sm">{{ $t('imageCrop.noInputImage') }}</p>
-      </div>
-
-      <img
-        v-else
-        ref="imageEl"
-        :src="imageUrl"
-        :alt="$t('imageCrop.cropPreviewAlt')"
-        draggable="false"
-        class="block size-full object-contain select-none brightness-50"
-        @load="handleImageLoad"
-        @error="handleImageError"
-        @dragstart.prevent
-      />
-
-      <div
-        v-if="imageUrl && !isLoading"
-        class="absolute box-content cursor-move overflow-hidden border-2 border-white"
-        :style="cropBoxStyle"
-        @pointerdown="handleDragStart"
-        @pointermove="handleDragMove"
-        @pointerup="handleDragEnd"
-      >
-        <div class="pointer-events-none size-full" :style="cropImageStyle" />
-      </div>
-
-      <div
-        v-for="handle in resizeHandles"
-        v-show="imageUrl && !isLoading"
-        :key="handle.direction"
-        :class="['absolute', handle.class]"
-        :style="handle.style"
-        @pointerdown="(e) => handleResizeStart(e, handle.direction)"
-        @pointermove="handleResizeMove"
-        @pointerup="handleResizeEnd"
-      />
-    </div>
-
-    <WidgetBoundingBox v-model="modelValue" class="shrink-0" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-
-import WidgetBoundingBox from '@/components/boundingbox/WidgetBoundingBox.vue'
-import { useImageCrop } from '@/composables/useImageCrop'
-import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type { Bounds } from '@/renderer/core/layout/types'
-
-const props = defineProps<{
-  nodeId: NodeId
-}>()
-
-const modelValue = defineModel<Bounds>({
-  default: () => ({ x: 0, y: 0, width: 512, height: 512 })
-})
-
-const imageEl = useTemplateRef<HTMLImageElement>('imageEl')
-const containerEl = useTemplateRef<HTMLDivElement>('containerEl')
-
-const {
-  imageUrl,
-  isLoading,
-
-  cropBoxStyle,
-  cropImageStyle,
-  resizeHandles,
-
-  handleImageLoad,
-  handleImageError,
-  handleDragStart,
-  handleDragMove,
-  handleDragEnd,
-  handleResizeStart,
-  handleResizeMove,
-  handleResizeEnd
-} = useImageCrop(props.nodeId, { imageEl, containerEl, modelValue })
-</script>

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 { renderedHelpHtml, isLoading, error } = useNodeHelpContent(() => node)
+const nodeHelpStore = useNodeHelpStore()
+const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
 
 const inputList = computed(() =>
   Object.values(node.inputs).map((spec) => ({

src/components/primevueOverride/SelectPlus.vue

@@ -1,19 +0,0 @@
-<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) => {
-    await openResultGallery(item)
+    openResultGallery(item)
     await focusAssetInSidebar(item)
   }
 )

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

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import type {
-  JobListItem,
-  JobStatus
-} from '@/platform/remote/comfyui/jobs/jobTypes'
+import type { TaskStatus } from '@/schemas/apiSchema'
 import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 
@@ -40,86 +37,91 @@ 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,
-  priority: number,
-  createTimeMs: number
+  index: number,
+  createTimeMs?: number
 ): TaskItemImpl {
-  return makeTask(id, priority, {
-    status: 'pending',
-    create_time: createTimeMs
-  })
+  const extraData = {
+    client_id: 'c1',
+    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
+  }
+  return new TaskItemImpl('Pending', [index, id, {}, extraData, []])
 }
 
 function makeRunningTask(
   id: string,
-  priority: number,
-  createTimeMs: number
+  index: number,
+  createTimeMs?: number
 ): TaskItemImpl {
-  return makeTask(id, priority, {
-    status: 'in_progress',
-    create_time: createTimeMs
-  })
+  const extraData = {
+    client_id: 'c1',
+    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
+  }
+  return new TaskItemImpl('Running', [index, id, {}, extraData, []])
 }
 
 function makeRunningTaskWithStart(
   id: string,
-  priority: number,
+  index: number,
   startedSecondsAgo: number
 ): TaskItemImpl {
   const start = Date.now() - startedSecondsAgo * 1000
-  return makeTask(id, priority, {
-    status: 'in_progress',
-    create_time: start - 5000,
-    update_time: start
-  })
+  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
+  )
 }
 
 function makeHistoryTask(
   id: string,
-  priority: number,
+  index: number,
   durationSec: number,
   ok: boolean,
   errorMessage?: string
 ): TaskItemImpl {
-  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
-  })
+  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
+  )
 }
 
 export const Queued: Story = {
@@ -138,12 +140,8 @@ 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, Date.now() - 60_000)
-      )
-      queue.pendingTasks.push(
-        makePendingTask('job-older-2', 101, Date.now() - 30_000)
-      )
+      queue.pendingTasks.push(makePendingTask('job-older-1', 100))
+      queue.pendingTasks.push(makePendingTask('job-older-2', 101))
 
       // Queued at (in metadata on prompt[4])
 

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

@@ -4,7 +4,6 @@ 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',
@@ -26,25 +25,20 @@ const QueueJobItemStub = defineComponent({
   template: '<div class="queue-job-item-stub"></div>'
 })
 
-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 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 mountComponent = (groups: JobGroup[]) =>
   mount(JobGroupsList, {

src/components/queue/job/JobGroupsList.vue

@@ -12,7 +12,7 @@
         v-for="ji in group.items"
         :key="ji.id"
         :job-id="ji.id"
-        :workflow-id="ji.taskRef?.workflowId"
+        :workflow-id="ji.taskRef?.workflow?.id"
         :state="ji.state"
         :title="ji.title"
         :right-text="ji.meta"

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

@@ -2,49 +2,116 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 
+import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import type { TaskItemImpl } from '@/stores/queueStore'
-import type { JobErrorDialogService } from '@/components/queue/job/useJobErrorReporting'
-import { useJobErrorReporting } from '@/components/queue/job/useJobErrorReporting'
-import type { ExecutionError } from '@/platform/remote/comfyui/jobs/jobTypes'
+import type {
+  JobErrorDialogService,
+  UseJobErrorReportingOptions
+} from '@/components/queue/job/useJobErrorReporting'
+import * as jobErrorReporting from '@/components/queue/job/useJobErrorReporting'
 
-const createTaskWithError = (
-  promptId: string,
-  errorMessage?: string,
-  executionError?: ExecutionError,
-  createTime?: number
+const createExecutionErrorMessage = (
+  overrides: Partial<ExecutionErrorWsMessage> = {}
+): ExecutionErrorWsMessage => ({
+  prompt_id: 'prompt',
+  timestamp: 100,
+  node_id: 'node-1',
+  node_type: 'KSampler',
+  executed: [],
+  exception_message: 'default failure',
+  exception_type: 'RuntimeError',
+  traceback: ['Trace line'],
+  current_inputs: {},
+  current_outputs: {},
+  ...overrides
+})
+
+const createTaskWithMessages = (
+  messages: Array<[string, unknown]> | undefined = []
 ): TaskItemImpl =>
   ({
-    promptId,
-    errorMessage,
-    executionError,
-    createTime: createTime ?? Date.now()
-  }) as Partial<TaskItemImpl> as TaskItemImpl
+    status: {
+      status_str: 'error',
+      completed: false,
+      messages
+    }
+  }) as TaskItemImpl
+
+describe('extractExecutionError', () => {
+  it('returns null when task has no execution error messages', () => {
+    expect(jobErrorReporting.extractExecutionError(null)).toBeNull()
+    expect(
+      jobErrorReporting.extractExecutionError({
+        status: undefined
+      } as TaskItemImpl)
+    ).toBeNull()
+    expect(
+      jobErrorReporting.extractExecutionError({
+        status: {
+          status_str: 'error',
+          completed: false,
+          messages: {} as unknown as Array<[string, unknown]>
+        }
+      } as TaskItemImpl)
+    ).toBeNull()
+    expect(
+      jobErrorReporting.extractExecutionError(createTaskWithMessages([]))
+    ).toBeNull()
+    expect(
+      jobErrorReporting.extractExecutionError(
+        createTaskWithMessages([
+          ['execution_start', { prompt_id: 'prompt', timestamp: 1 }]
+        ] as Array<[string, unknown]>)
+      )
+    ).toBeNull()
+  })
+
+  it('returns detail and message for execution_error entries', () => {
+    const detail = createExecutionErrorMessage({ exception_message: 'Kaboom' })
+    const result = jobErrorReporting.extractExecutionError(
+      createTaskWithMessages([
+        ['execution_success', { prompt_id: 'prompt', timestamp: 2 }],
+        ['execution_error', detail]
+      ] as Array<[string, unknown]>)
+    )
+    expect(result).toEqual({
+      detail,
+      message: 'Kaboom'
+    })
+  })
+
+  it('falls back to an empty message when the tuple lacks detail', () => {
+    const result = jobErrorReporting.extractExecutionError(
+      createTaskWithMessages([
+        ['execution_error'] as unknown as [string, ExecutionErrorWsMessage]
+      ])
+    )
+    expect(result).toEqual({ detail: undefined, message: '' })
+  })
+})
 
 describe('useJobErrorReporting', () => {
   let taskState = ref<TaskItemImpl | null>(null)
   let taskForJob: ComputedRef<TaskItemImpl | null>
-  let copyToClipboard: ReturnType<typeof vi.fn>
-  let showErrorDialog: ReturnType<typeof vi.fn>
-  let showExecutionErrorDialog: ReturnType<typeof vi.fn>
+  let copyToClipboard: UseJobErrorReportingOptions['copyToClipboard']
+  let showExecutionErrorDialog: JobErrorDialogService['showExecutionErrorDialog']
+  let showErrorDialog: JobErrorDialogService['showErrorDialog']
   let dialog: JobErrorDialogService
-  let composable: ReturnType<typeof useJobErrorReporting>
+  let composable: ReturnType<typeof jobErrorReporting.useJobErrorReporting>
 
   beforeEach(() => {
-    vi.clearAllMocks()
     taskState = ref<TaskItemImpl | null>(null)
     taskForJob = computed(() => taskState.value)
     copyToClipboard = vi.fn()
-    showErrorDialog = vi.fn()
     showExecutionErrorDialog = vi.fn()
+    showErrorDialog = vi.fn()
     dialog = {
-      showErrorDialog,
-      showExecutionErrorDialog
-    } as unknown as JobErrorDialogService
-    composable = useJobErrorReporting({
+      showExecutionErrorDialog,
+      showErrorDialog
+    }
+    composable = jobErrorReporting.useJobErrorReporting({
       taskForJob,
-      copyToClipboard: copyToClipboard as (
-        value: string
-      ) => void | Promise<void>,
+      copyToClipboard,
       dialog
     })
   })
@@ -54,87 +121,73 @@ describe('useJobErrorReporting', () => {
   })
 
   it('exposes a computed message that reflects the current task error', () => {
-    taskState.value = createTaskWithError('job-1', 'First failure')
+    taskState.value = createTaskWithMessages([
+      [
+        'execution_error',
+        createExecutionErrorMessage({ exception_message: 'First failure' })
+      ]
+    ])
     expect(composable.errorMessageValue.value).toBe('First failure')
 
-    taskState.value = createTaskWithError('job-2', 'Second failure')
+    taskState.value = createTaskWithMessages([
+      [
+        'execution_error',
+        createExecutionErrorMessage({ exception_message: 'Second failure' })
+      ]
+    ])
     expect(composable.errorMessageValue.value).toBe('Second failure')
   })
 
-  it('returns empty string when no error message', () => {
-    taskState.value = createTaskWithError('job-1')
-    expect(composable.errorMessageValue.value).toBe('')
-  })
-
-  it('returns empty string when task is null', () => {
-    taskState.value = null
-    expect(composable.errorMessageValue.value).toBe('')
-  })
-
   it('only calls the copy handler when a message exists', () => {
-    taskState.value = createTaskWithError('job-1', 'Clipboard failure')
+    taskState.value = createTaskWithMessages([
+      [
+        'execution_error',
+        createExecutionErrorMessage({ exception_message: 'Clipboard failure' })
+      ]
+    ])
     composable.copyErrorMessage()
     expect(copyToClipboard).toHaveBeenCalledTimes(1)
     expect(copyToClipboard).toHaveBeenCalledWith('Clipboard failure')
 
-    copyToClipboard.mockClear()
-    taskState.value = createTaskWithError('job-2')
+    vi.mocked(copyToClipboard).mockClear()
+    taskState.value = createTaskWithMessages([])
     composable.copyErrorMessage()
     expect(copyToClipboard).not.toHaveBeenCalled()
   })
 
-  it('shows simple error dialog when only errorMessage present', () => {
-    taskState.value = createTaskWithError('job-1', 'Queue job error')
+  it('prefers the detailed execution dialog when detail is available', () => {
+    const detail = createExecutionErrorMessage({
+      exception_message: 'Detailed failure'
+    })
+    taskState.value = createTaskWithMessages([['execution_error', detail]])
     composable.reportJobError()
-
-    expect(showErrorDialog).toHaveBeenCalledTimes(1)
-    const [errorArg, optionsArg] = showErrorDialog.mock.calls[0]
-    expect(errorArg).toBeInstanceOf(Error)
-    expect(errorArg.message).toBe('Queue job error')
-    expect(optionsArg).toEqual({ reportType: 'queueJobError' })
-    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
-  })
-
-  it('does nothing when no task exists', () => {
-    taskState.value = null
-    composable.reportJobError()
-    expect(showErrorDialog).not.toHaveBeenCalled()
-    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
-  })
-
-  it('shows rich error dialog when execution_error available on task', () => {
-    const executionError: ExecutionError = {
-      prompt_id: 'job-1',
-      timestamp: 12345,
-      node_id: '5',
-      node_type: 'KSampler',
-      executed: ['1', '2'],
-      exception_message: 'CUDA out of memory',
-      exception_type: 'RuntimeError',
-      traceback: ['line 1', 'line 2'],
-      current_inputs: {},
-      current_outputs: {}
-    }
-    taskState.value = createTaskWithError(
-      'job-1',
-      'CUDA out of memory',
-      executionError,
-      12345
-    )
-
-    composable.reportJobError()
-
     expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
-    expect(showExecutionErrorDialog).toHaveBeenCalledWith(executionError)
+    expect(showExecutionErrorDialog).toHaveBeenCalledWith(detail)
     expect(showErrorDialog).not.toHaveBeenCalled()
   })
 
-  it('does nothing when no error message and no execution_error', () => {
-    taskState.value = createTaskWithError('job-1')
+  it('shows a fallback dialog when only a message is available', () => {
+    const message = 'Queue job error'
+    taskState.value = createTaskWithMessages([])
+    const valueSpy = vi
+      .spyOn(composable.errorMessageValue, 'value', 'get')
+      .mockReturnValue(message)
 
+    expect(composable.errorMessageValue.value).toBe(message)
     composable.reportJobError()
-
-    expect(showErrorDialog).not.toHaveBeenCalled()
     expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+    expect(showErrorDialog).toHaveBeenCalledTimes(1)
+    const [errorArg, optionsArg] = vi.mocked(showErrorDialog).mock.calls[0]
+    expect(errorArg).toBeInstanceOf(Error)
+    expect(errorArg.message).toBe(message)
+    expect(optionsArg).toEqual({ reportType: 'queueJobError' })
+    valueSpy.mockRestore()
+  })
+
+  it('does nothing when no error could be extracted', () => {
+    taskState.value = createTaskWithMessages([])
+    composable.reportJobError()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+    expect(showErrorDialog).not.toHaveBeenCalled()
   })
 })