test: add E2E tests for selection bounding box and collapsed node links

- 8 parameterized tests for selection bounds covering subgraph/regular
  nodes in expanded/collapsed states at different positions
- 3 tests for collapsed node slot positions: within bounds, after
  position change, and after expand recovery
- Use condition-based waits (waitForFunction, locator.waitFor) instead
  of fixed frame counts to avoid CI flakiness

.claude/skills/contain-audit/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: contain-audit
+description: 'Detect DOM elements where CSS contain:layout+style would improve rendering performance. Runs a Playwright-based audit on a large workflow, scores candidates by subtree size and sizing constraints, measures performance impact, and generates a ranked report.'
+---
+
+# CSS Containment Audit
+
+Automatically finds DOM elements where adding `contain: layout style` would reduce browser recalculation overhead.
+
+## What It Does
+
+1. Loads a large workflow (245 nodes) in a real browser
+2. Walks the DOM tree and scores every element as a containment candidate
+3. For each high-scoring candidate, applies `contain: layout style` via JavaScript
+4. Measures rendering performance (style recalcs, layouts, task duration) before and after
+5. Takes before/after screenshots to detect visual breakage
+6. Generates a ranked report with actionable recommendations
+
+## When to Use
+
+- After adding new Vue components to the node rendering pipeline
+- When investigating rendering performance on large workflows
+- Before and after refactoring node DOM structure
+- As part of periodic performance audits
+
+## How to Run
+
+```bash
+# Start the dev server first
+pnpm dev &
+
+# Run the audit (uses the @audit tag, not included in normal CI runs)
+pnpm exec playwright test browser_tests/tests/containAudit.spec.ts --project=audit
+
+# View the HTML report
+pnpm exec playwright show-report
+```
+
+## How to Read Results
+
+The audit outputs a table to the console:
+
+```text
+CSS Containment Audit Results
+=======================================================
+Rank | Selector                        | Subtree | Score | DRecalcs | DLayouts | Visual
+  1  | [data-testid="node-inner-wrap"] |     18  |  72   |    -34%  |    -12%  |   OK
+  2  | .node-body                      |     12  |  48   |     -8%  |     -3%  |   OK
+  3  | .node-header                    |      4  |  16   |     +1%  |      0%  |   OK
+```
+
+- **Subtree**: Number of descendant elements (higher = more to skip)
+- **Score**: Composite heuristic score (subtree size x sizing constraint bonus)
+- **DRecalcs / DLayouts**: Change in style recalcs / layout counts vs baseline (negative = improvement)
+- **Visual**: OK if no pixel change, DIFF if screenshot differs (may include subpixel noise — verify manually)
+
+## Candidate Scoring
+
+An element is a good containment candidate when:
+
+1. **Large subtree** -- many descendants that the browser can skip recalculating
+2. **Externally constrained size** -- width/height determined by CSS variables, flex, or explicit values (not by content)
+3. **No existing containment** -- `contain` is not already applied
+4. **Not a leaf** -- has at least a few child elements
+
+Elements that should NOT get containment:
+
+- Elements whose children overflow visually beyond bounds (e.g., absolute-positioned overlays with negative inset)
+- Elements whose height is determined by content and affects sibling layout
+- Very small subtrees (overhead of containment context outweighs benefit)
+
+## Limitations
+
+- Cannot fully guarantee `contain` safety -- visual review of screenshots is required
+- Performance measurements have natural variance; run multiple times for confidence
+- Only tests idle and pan scenarios; widget interactions may differ
+- The audit modifies styles at runtime via JS, which doesn't account for Tailwind purging or build-time optimizations
+
+## Example PR
+
+[#9946 — fix: add CSS contain:layout contain:style to node inner wrapper](https://github.com/Comfy-Org/ComfyUI_frontend/pull/9946)
+
+This PR added `contain-layout contain-style` to the node inner wrapper div in `LGraphNode.vue`. The audit tool would have flagged this element as a high-scoring candidate because:
+
+- **Large subtree** (18+ descendants: header, slots, widgets, content, badges)
+- **Externally constrained size** (`w-(--node-width)`, `flex-1` — dimensions set by CSS variables and flex parent)
+- **Natural isolation boundary** between frequently-changing content (widgets) and infrequently-changing overlays (selection outlines, borders)
+
+The actual change was a single line: adding `'contain-layout contain-style'` to the inner wrapper's class list at `src/renderer/extensions/vueNodes/components/LGraphNode.vue:79`.
+
+## Reference
+
+| Resource          | Path                                                    |
+| ----------------- | ------------------------------------------------------- |
+| Audit test        | `browser_tests/tests/containAudit.spec.ts`              |
+| PerformanceHelper | `browser_tests/fixtures/helpers/PerformanceHelper.ts`   |
+| Perf tests        | `browser_tests/tests/performance.spec.ts`               |
+| Large workflow    | `browser_tests/assets/large-graph-workflow.json`        |
+| Example PR        | https://github.com/Comfy-Org/ComfyUI_frontend/pull/9946 |

AGENTS.md

@@ -208,7 +208,7 @@ See @docs/testing/\*.md for detailed patterns.
 3. Keep your module mocks contained  
    Do not use global mutable state within the test file  
    Use `vi.hoisted()` if necessary to allow for per-test Arrange phase manipulation of deeper mock state
-4. For Component testing, use [Vue Test Utils](https://test-utils.vuejs.org/) and especially follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
+4. For Component testing, prefer [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/) with `@testing-library/user-event` for user-centric, behavioral tests. [Vue Test Utils](https://test-utils.vuejs.org/) is also accepted, especially for tests that need direct access to the component wrapper (e.g., `findComponent`, `emitted()`). Follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
 5. Aim for behavioral coverage of critical and new features
 
 ### Playwright / Browser / E2E Tests

browser_tests/assets/selection/subgraph-with-regular-node.json

@@ -0,0 +1,116 @@
+{
+  "id": "selection-bbox-test",
+  "revision": 0,
+  "last_node_id": 3,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "e5fb1765-9323-4548-801a-5aead34d879e",
+      "pos": [300, 200],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [1]
+        }
+      ],
+      "properties": {},
+      "widgets_values": []
+    },
+    {
+      "id": 3,
+      "type": "EmptyLatentImage",
+      "pos": [800, 200],
+      "size": [315, 106],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "latent",
+          "type": "LATENT",
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {},
+      "widgets_values": [512, 512, 1]
+    }
+  ],
+  "links": [[1, 2, 0, 3, 0, "LATENT"]],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "e5fb1765-9323-4548-801a-5aead34d879e",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 0,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Test Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "c5cc99d8-a2b6-4bf3-8be7-d4949ef736cd",
+            "name": "positive",
+            "type": "CONDITIONING",
+            "linkIds": [],
+            "pos": { "0": 200, "1": 220 }
+          }
+        ],
+        "outputs": [
+          {
+            "id": "9bd488b9-e907-4c95-a7a4-85c5597a87af",
+            "name": "LATENT",
+            "type": "LATENT",
+            "linkIds": [],
+            "pos": { "0": 520, "1": 220 }
+          }
+        ],
+        "widgets": [],
+        "nodes": [],
+        "groups": [],
+        "links": [],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/painter_widget.json

@@ -0,0 +1,48 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Painter",
+      "pos": [50, 50],
+      "size": [450, 550],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Painter"
+      },
+      "widgets_values": ["", 512, 512, "#000000"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -19,10 +19,12 @@ import { ContextMenu } from './components/ContextMenu'
 import { SettingDialog } from './components/SettingDialog'
 import { BottomPanel } from './components/BottomPanel'
 import {
+  AssetsSidebarTab,
   NodeLibrarySidebarTab,
   WorkflowsSidebarTab
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
+import { AssetsHelper } from './helpers/AssetsHelper'
 import { CanvasHelper } from './helpers/CanvasHelper'
 import { PerformanceHelper } from './helpers/PerformanceHelper'
 import { QueueHelper } from './helpers/QueueHelper'
@@ -55,6 +57,7 @@ class ComfyPropertiesPanel {
 }
 
 class ComfyMenu {
+  private _assetsTab: AssetsSidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
@@ -78,6 +81,11 @@ class ComfyMenu {
     return this._nodeLibraryTab
   }
 
+  get assetsTab() {
+    this._assetsTab ??= new AssetsSidebarTab(this.page)
+    return this._assetsTab
+  }
+
   get workflowsTab() {
     this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
     return this._workflowsTab
@@ -192,6 +200,7 @@ export class ComfyPage {
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
   public readonly perf: PerformanceHelper
+  public readonly assets: AssetsHelper
   public readonly queue: QueueHelper
 
   /** Worker index to test user ID */
@@ -238,6 +247,7 @@ export class ComfyPage {
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
     this.perf = new PerformanceHelper(page)
+    this.assets = new AssetsHelper(page)
     this.queue = new QueueHelper(page)
   }
 
@@ -452,12 +462,13 @@ export const comfyPageFixture = base.extend<{
 
     await comfyPage.setup()
 
-    const isPerf = testInfo.tags.includes('@perf')
-    if (isPerf) await comfyPage.perf.init()
+    const needsPerf =
+      testInfo.tags.includes('@perf') || testInfo.tags.includes('@audit')
+    if (needsPerf) await comfyPage.perf.init()
 
     await use(comfyPage)
 
-    if (isPerf) await comfyPage.perf.dispose()
+    if (needsPerf) await comfyPage.perf.dispose()
   },
   comfyMouse: async ({ comfyPage }, use) => {
     const comfyMouse = new ComfyMouse(comfyPage)

browser_tests/fixtures/components/SidebarTab.ts

@@ -168,3 +168,32 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .click()
   }
 }
+
+export class AssetsSidebarTab extends SidebarTab {
+  constructor(public override readonly page: Page) {
+    super(page, 'assets')
+  }
+
+  get generatedTab() {
+    return this.page.getByRole('tab', { name: 'Generated' })
+  }
+
+  get importedTab() {
+    return this.page.getByRole('tab', { name: 'Imported' })
+  }
+
+  get emptyStateMessage() {
+    return this.page.getByText(
+      'Upload files or generate content to see them here'
+    )
+  }
+
+  emptyStateTitle(title: string) {
+    return this.page.getByText(title)
+  }
+
+  override async open() {
+    await super.open()
+    await this.generatedTab.waitFor({ state: 'visible' })
+  }
+}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -142,6 +142,29 @@ export class AppModeHelper {
       .getByTestId(TestIds.builder.widgetActionsMenu)
   }
 
+  /** The builder footer nav containing save/navigation buttons. */
+  private get builderFooterNav(): Locator {
+    return this.page
+      .getByRole('button', { name: 'Exit app builder' })
+      .locator('..')
+  }
+
+  /** Get a button in the builder footer by its accessible name. */
+  getFooterButton(name: string | RegExp): Locator {
+    return this.builderFooterNav.getByRole('button', { name })
+  }
+
+  /** Click the save/save-as button in the builder footer. */
+  async clickSave() {
+    await this.getFooterButton(/^Save/).first().click()
+    await this.comfyPage.nextFrame()
+  }
+
+  /** The "Opens as" popover tab above the builder footer. */
+  get opensAsPopover(): Locator {
+    return this.page.getByTestId(TestIds.builder.opensAs)
+  }
+
   /**
    * Rename a widget by clicking its popover trigger, selecting "Rename",
    * and filling in the dialog.

browser_tests/fixtures/helpers/AssetsHelper.ts

@@ -0,0 +1,147 @@
+import type { Page, Route } from '@playwright/test'
+
+import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
+
+const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
+const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
+
+function parseLimit(url: URL, total: number): number {
+  const value = Number(url.searchParams.get('limit'))
+  if (!Number.isInteger(value) || value <= 0) {
+    return total
+  }
+  return value
+}
+
+function parseOffset(url: URL): number {
+  const value = Number(url.searchParams.get('offset'))
+  if (!Number.isInteger(value) || value < 0) {
+    return 0
+  }
+  return value
+}
+
+function getExecutionDuration(job: RawJobListItem): number {
+  const start = job.execution_start_time ?? 0
+  const end = job.execution_end_time ?? 0
+  return end - start
+}
+
+export class AssetsHelper {
+  private jobsRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private inputFilesRouteHandler: ((route: Route) => Promise<void>) | null =
+    null
+  private generatedJobs: RawJobListItem[] = []
+  private importedFiles: string[] = []
+
+  constructor(private readonly page: Page) {}
+
+  async mockOutputHistory(jobs: RawJobListItem[]): Promise<void> {
+    this.generatedJobs = [...jobs]
+
+    if (this.jobsRouteHandler) {
+      return
+    }
+
+    this.jobsRouteHandler = async (route: Route) => {
+      const url = new URL(route.request().url())
+      const statuses = url.searchParams
+        .get('status')
+        ?.split(',')
+        .map((status) => status.trim())
+        .filter(Boolean)
+      const workflowId = url.searchParams.get('workflow_id')
+      const sortBy = url.searchParams.get('sort_by')
+      const sortOrder = url.searchParams.get('sort_order') === 'asc' ? 1 : -1
+
+      let filteredJobs = [...this.generatedJobs]
+
+      if (statuses?.length) {
+        filteredJobs = filteredJobs.filter((job) =>
+          statuses.includes(job.status)
+        )
+      }
+
+      if (workflowId) {
+        filteredJobs = filteredJobs.filter(
+          (job) => job.workflow_id === workflowId
+        )
+      }
+
+      filteredJobs.sort((left, right) => {
+        const leftValue =
+          sortBy === 'execution_duration'
+            ? getExecutionDuration(left)
+            : left.create_time
+        const rightValue =
+          sortBy === 'execution_duration'
+            ? getExecutionDuration(right)
+            : right.create_time
+
+        return (leftValue - rightValue) * sortOrder
+      })
+
+      const offset = parseOffset(url)
+      const total = filteredJobs.length
+      const limit = parseLimit(url, total)
+      const visibleJobs = filteredJobs.slice(offset, offset + limit)
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          jobs: visibleJobs,
+          pagination: {
+            offset,
+            limit,
+            total,
+            has_more: offset + visibleJobs.length < total
+          }
+        })
+      })
+    }
+
+    await this.page.route(jobsListRoutePattern, this.jobsRouteHandler)
+  }
+
+  async mockInputFiles(files: string[]): Promise<void> {
+    this.importedFiles = [...files]
+
+    if (this.inputFilesRouteHandler) {
+      return
+    }
+
+    this.inputFilesRouteHandler = async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(this.importedFiles)
+      })
+    }
+
+    await this.page.route(inputFilesRoutePattern, this.inputFilesRouteHandler)
+  }
+
+  async mockEmptyState(): Promise<void> {
+    await this.mockOutputHistory([])
+    await this.mockInputFiles([])
+  }
+
+  async clearMocks(): Promise<void> {
+    this.generatedJobs = []
+    this.importedFiles = []
+
+    if (this.jobsRouteHandler) {
+      await this.page.unroute(jobsListRoutePattern, this.jobsRouteHandler)
+      this.jobsRouteHandler = null
+    }
+
+    if (this.inputFilesRouteHandler) {
+      await this.page.unroute(
+        inputFilesRoutePattern,
+        this.inputFilesRouteHandler
+      )
+      this.inputFilesRouteHandler = null
+    }
+  }
+}

browser_tests/fixtures/selectors.ts

@@ -20,7 +20,12 @@ export const TestIds = {
     main: 'graph-canvas',
     contextMenu: 'canvas-context-menu',
     toggleMinimapButton: 'toggle-minimap-button',
-    toggleLinkVisibilityButton: 'toggle-link-visibility-button'
+    toggleLinkVisibilityButton: 'toggle-link-visibility-button',
+    zoomControlsButton: 'zoom-controls-button',
+    zoomInAction: 'zoom-in-action',
+    zoomOutAction: 'zoom-out-action',
+    zoomToFitAction: 'zoom-to-fit-action',
+    zoomPercentageInput: 'zoom-percentage-input'
   },
   dialogs: {
     settings: 'settings-dialog',
@@ -29,6 +34,8 @@ export const TestIds = {
     confirm: 'confirm-dialog',
     errorOverlay: 'error-overlay',
     errorOverlaySeeErrors: 'error-overlay-see-errors',
+    errorOverlayDismiss: 'error-overlay-dismiss',
+    errorOverlayMessages: 'error-overlay-messages',
     runtimeErrorPanel: 'runtime-error-panel',
     missingNodeCard: 'missing-node-card',
     errorCardFindOnGithub: 'error-card-find-on-github',
@@ -72,7 +79,8 @@ export const TestIds = {
   builder: {
     ioItem: 'builder-io-item',
     ioItemTitle: 'builder-io-item-title',
-    widgetActionsMenu: 'widget-actions-menu'
+    widgetActionsMenu: 'widget-actions-menu',
+    opensAs: 'builder-opens-as'
   },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'

browser_tests/helpers/builderTestUtils.ts

@@ -0,0 +1,118 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+
+import { fitToViewInstant } from './fitToView'
+import { getPromotedWidgetNames } from './promotedWidgets'
+
+/** Click the first SaveImage/PreviewImage node on the canvas. */
+async function selectOutputNode(comfyPage: ComfyPage) {
+  const { page } = comfyPage
+
+  const saveImageNodeId = await page.evaluate(() =>
+    String(
+      window.app!.rootGraph.nodes.find(
+        (n: { type?: string }) =>
+          n.type === 'SaveImage' || n.type === 'PreviewImage'
+      )?.id
+    )
+  )
+  const saveImageRef = await comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
+  await saveImageRef.centerOnNode()
+
+  const canvasBox = await page.locator('#graph-canvas').boundingBox()
+  if (!canvasBox) throw new Error('Canvas not found')
+  await page.mouse.click(
+    canvasBox.x + canvasBox.width / 2,
+    canvasBox.y + canvasBox.height / 2
+  )
+  await comfyPage.nextFrame()
+}
+
+/** Center on a node and click its first widget to select it as input. */
+async function selectInputWidget(comfyPage: ComfyPage, node: NodeReference) {
+  const { page } = comfyPage
+
+  await comfyPage.canvasOps.setScale(1)
+  await node.centerOnNode()
+
+  const widgetRef = await node.getWidget(0)
+  const widgetPos = await widgetRef.getPosition()
+  const titleHeight = await page.evaluate(
+    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
+  )
+  await page.mouse.click(widgetPos.x, widgetPos.y + titleHeight)
+  await comfyPage.nextFrame()
+}
+
+/**
+ * Enter builder on the default workflow and select I/O.
+ *
+ * Loads the default workflow, optionally transforms it (e.g. convert a node
+ * to subgraph), then enters builder mode and selects inputs + outputs.
+ *
+ * @param comfyPage - The page fixture.
+ * @param getInputNode - Returns the node to click for input selection.
+ *   Receives the KSampler node ref and can transform the graph before
+ *   returning the target node. Defaults to using KSampler directly.
+ * @returns The node used for input selection.
+ */
+export async function setupBuilder(
+  comfyPage: ComfyPage,
+  getInputNode?: (ksampler: NodeReference) => Promise<NodeReference>
+): Promise<NodeReference> {
+  const { appMode } = comfyPage
+  await comfyPage.workflow.loadWorkflow('default')
+
+  const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+  const inputNode = getInputNode ? await getInputNode(ksampler) : ksampler
+
+  await fitToViewInstant(comfyPage)
+  await appMode.enterBuilder()
+  await appMode.goToInputs()
+  await selectInputWidget(comfyPage, inputNode)
+
+  await appMode.goToOutputs()
+  await selectOutputNode(comfyPage)
+
+  return inputNode
+}
+
+/**
+ * Convert the KSampler to a subgraph, then enter builder with I/O selected.
+ *
+ * Returns the subgraph node reference for further interaction.
+ */
+export async function setupSubgraphBuilder(
+  comfyPage: ComfyPage
+): Promise<NodeReference> {
+  return setupBuilder(comfyPage, async (ksampler) => {
+    await ksampler.click('title')
+    const subgraphNode = await ksampler.convertToSubgraph()
+    await comfyPage.nextFrame()
+
+    const promotedNames = await getPromotedWidgetNames(
+      comfyPage,
+      String(subgraphNode.id)
+    )
+    expect(promotedNames).toContain('seed')
+
+    return subgraphNode
+  })
+}
+
+/** Save the workflow, reopen it, and enter app mode. */
+export async function saveAndReopenInAppMode(
+  comfyPage: ComfyPage,
+  workflowName: string
+) {
+  await comfyPage.menu.topbar.saveWorkflow(workflowName)
+
+  const { workflowsTab } = comfyPage.menu
+  await workflowsTab.open()
+  await workflowsTab.getPersistedItem(workflowName).dblclick()
+  await comfyPage.nextFrame()
+
+  await comfyPage.appMode.toggleAppMode()
+}

browser_tests/tests/appModeWidgetRename.spec.ts

@@ -1,89 +1,11 @@
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import { fitToViewInstant } from '../helpers/fitToView'
-import { getPromotedWidgetNames } from '../helpers/promotedWidgets'
-
-/**
- * Convert the KSampler (id 3) in the default workflow to a subgraph,
- * enter builder, select the promoted seed widget as input and
- * SaveImage/PreviewImage as output.
- *
- * Returns the subgraph node reference for further interaction.
- */
-async function setupSubgraphBuilder(comfyPage: ComfyPage) {
-  const { page, appMode } = comfyPage
-  await comfyPage.workflow.loadWorkflow('default')
-
-  const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-  await ksampler.click('title')
-  const subgraphNode = await ksampler.convertToSubgraph()
-  await comfyPage.nextFrame()
-
-  const subgraphNodeId = String(subgraphNode.id)
-  const promotedNames = await getPromotedWidgetNames(comfyPage, subgraphNodeId)
-  expect(promotedNames).toContain('seed')
-
-  await fitToViewInstant(comfyPage)
-  await appMode.enterBuilder()
-  await appMode.goToInputs()
-
-  // Reset zoom to 1 and center on the subgraph node so click coords are accurate
-  await comfyPage.canvasOps.setScale(1)
-  await subgraphNode.centerOnNode()
-
-  // Click the promoted seed widget on the canvas to select it
-  const seedWidgetRef = await subgraphNode.getWidget(0)
-  const seedPos = await seedWidgetRef.getPosition()
-  const titleHeight = await page.evaluate(
-    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
-  )
-
-  await page.mouse.click(seedPos.x, seedPos.y + titleHeight)
-  await comfyPage.nextFrame()
-
-  // Select an output node
-  await appMode.goToOutputs()
-
-  const saveImageNodeId = await page.evaluate(() =>
-    String(
-      window.app!.rootGraph.nodes.find(
-        (n: { type?: string }) =>
-          n.type === 'SaveImage' || n.type === 'PreviewImage'
-      )?.id
-    )
-  )
-  const saveImageRef = await comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-  await saveImageRef.centerOnNode()
-
-  // Node is centered on screen, so click the canvas center
-  const canvasBox = await page.locator('#graph-canvas').boundingBox()
-  if (!canvasBox) throw new Error('Canvas not found')
-  await page.mouse.click(
-    canvasBox.x + canvasBox.width / 2,
-    canvasBox.y + canvasBox.height / 2
-  )
-  await comfyPage.nextFrame()
-
-  return subgraphNode
-}
-
-/** Save the workflow, reopen it, and enter app mode. */
-async function saveAndReopenInAppMode(
-  comfyPage: ComfyPage,
-  workflowName: string
-) {
-  await comfyPage.menu.topbar.saveWorkflow(workflowName)
-
-  const { workflowsTab } = comfyPage.menu
-  await workflowsTab.open()
-  await workflowsTab.getPersistedItem(workflowName).dblclick()
-  await comfyPage.nextFrame()
-
-  await comfyPage.appMode.toggleAppMode()
-}
+import {
+  saveAndReopenInAppMode,
+  setupSubgraphBuilder
+} from '../helpers/builderTestUtils'
 
 test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/builderSaveFlow.spec.ts

@@ -0,0 +1,251 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+import { setupSubgraphBuilder } from '../helpers/builderTestUtils'
+import { fitToViewInstant } from '../helpers/fitToView'
+
+test.describe('Builder save flow', { tag: ['@ui', '@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        linear_toggle_enabled: true
+      }
+    })
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.AppBuilder.VueNodeSwitchDismissed',
+      true
+    )
+  })
+
+  test('Save as dialog appears for unsaved workflow', async ({ comfyPage }) => {
+    const { page, appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+    await appMode.goToPreview()
+    await appMode.clickSave()
+
+    // The save-as dialog should appear with filename input and view type selection
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await expect(dialog.getByRole('textbox')).toBeVisible()
+    await expect(dialog.getByText('Save as')).toBeVisible()
+
+    // View type radio group should be present
+    const radioGroup = dialog.getByRole('radiogroup')
+    await expect(radioGroup).toBeVisible()
+  })
+
+  test('Save as dialog allows entering filename and saving', async ({
+    comfyPage
+  }) => {
+    const { page, appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+    await appMode.goToPreview()
+    await appMode.clickSave()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    const workflowName = `${Date.now()} builder-save-test`
+    const input = dialog.getByRole('textbox')
+    await input.fill(workflowName)
+
+    // Save button should be enabled now
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    // Success dialog should appear
+    const successDialog = page.getByRole('dialog')
+    await expect(successDialog.getByText('Successfully saved')).toBeVisible({
+      timeout: 5000
+    })
+  })
+
+  test('Save as dialog disables save when filename is empty', async ({
+    comfyPage
+  }) => {
+    const { page, appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+    await appMode.goToPreview()
+    await appMode.clickSave()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    // Clear the filename input
+    const input = dialog.getByRole('textbox')
+    await input.fill('')
+
+    // Save button should be disabled
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await expect(saveButton).toBeDisabled()
+  })
+
+  test('Builder step navigation works correctly', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+
+    // Should start at outputs (we ended there in setup)
+    // Navigate to inputs
+    await appMode.goToInputs()
+
+    // Back button should be disabled on first step
+    const backButton = appMode.getFooterButton('Back')
+    await expect(backButton).toBeDisabled()
+
+    // Next button should be enabled
+    const nextButton = appMode.getFooterButton('Next')
+    await expect(nextButton).toBeEnabled()
+
+    // Navigate forward
+    await appMode.next()
+
+    // Back button should now be enabled
+    await expect(backButton).toBeEnabled()
+
+    // Navigate to preview (last step)
+    await appMode.next()
+
+    // Next button should be disabled on last step
+    await expect(nextButton).toBeDisabled()
+  })
+
+  test('Escape key exits builder mode', async ({ comfyPage }) => {
+    const { page } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+
+    // Verify builder toolbar is visible
+    const toolbar = page.getByRole('navigation', { name: 'App Builder' })
+    await expect(toolbar).toBeVisible()
+
+    // Press Escape
+    await page.keyboard.press('Escape')
+    await comfyPage.nextFrame()
+
+    // Builder toolbar should be gone
+    await expect(toolbar).not.toBeVisible()
+  })
+
+  test('Exit builder button exits builder mode', async ({ comfyPage }) => {
+    const { page, appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+
+    const toolbar = page.getByRole('navigation', { name: 'App Builder' })
+    await expect(toolbar).toBeVisible()
+
+    await appMode.exitBuilder()
+
+    await expect(toolbar).not.toBeVisible()
+  })
+
+  test('Save button directly saves for previously saved workflow', async ({
+    comfyPage
+  }) => {
+    const { page, appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+    await appMode.goToPreview()
+
+    // First save via builder save-as to make it non-temporary
+    await appMode.clickSave()
+    const saveAsDialog = page.getByRole('dialog')
+    await expect(saveAsDialog).toBeVisible({ timeout: 5000 })
+    const workflowName = `${Date.now()} builder-direct-save`
+    await saveAsDialog.getByRole('textbox').fill(workflowName)
+    await saveAsDialog.getByRole('button', { name: 'Save' }).click()
+
+    // Dismiss the success dialog
+    const successDialog = page.getByRole('dialog')
+    await expect(successDialog.getByText('Successfully saved')).toBeVisible({
+      timeout: 5000
+    })
+    await successDialog.getByText('Close', { exact: true }).click()
+    await comfyPage.nextFrame()
+
+    // Now click save again — should save directly
+    await appMode.clickSave()
+
+    await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 2000 })
+    await expect(appMode.getFooterButton(/^Save$/)).toBeDisabled()
+  })
+
+  test('Split button chevron opens save-as for saved workflow', async ({
+    comfyPage
+  }) => {
+    const { page, appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+    await appMode.goToPreview()
+
+    // First save via builder save-as to make it non-temporary
+    await appMode.clickSave()
+    const saveAsDialog = page.getByRole('dialog')
+    await expect(saveAsDialog).toBeVisible({ timeout: 5000 })
+    const workflowName = `${Date.now()} builder-split-btn`
+    await saveAsDialog.getByRole('textbox').fill(workflowName)
+    await saveAsDialog.getByRole('button', { name: 'Save' }).click()
+
+    // Dismiss the success dialog
+    const successDialog = page.getByRole('dialog')
+    await expect(successDialog.getByText('Successfully saved')).toBeVisible({
+      timeout: 5000
+    })
+    await successDialog.getByText('Close', { exact: true }).click()
+    await comfyPage.nextFrame()
+
+    // Click the chevron dropdown trigger
+    const chevronButton = appMode.getFooterButton('Save as')
+    await chevronButton.click()
+
+    // "Save as" menu item should appear
+    const menuItem = page.getByRole('menuitem', { name: 'Save as' })
+    await expect(menuItem).toBeVisible({ timeout: 5000 })
+    await menuItem.click()
+
+    // Save-as dialog should appear
+    const newSaveAsDialog = page.getByRole('dialog')
+    await expect(newSaveAsDialog.getByText('Save as')).toBeVisible({
+      timeout: 5000
+    })
+    await expect(newSaveAsDialog.getByRole('textbox')).toBeVisible()
+  })
+
+  test('Connect output popover appears when no outputs selected', async ({
+    comfyPage
+  }) => {
+    const { page, appMode } = comfyPage
+    await comfyPage.workflow.loadWorkflow('default')
+    await fitToViewInstant(comfyPage)
+    await appMode.enterBuilder()
+
+    // Without selecting any outputs, click the save button
+    // It should trigger the connect-output popover
+    await appMode.clickSave()
+
+    // The popover should show a message about connecting outputs
+    await expect(
+      page.getByText('Connect an output', { exact: false })
+    ).toBeVisible({ timeout: 5000 })
+  })
+
+  test('View type can be toggled in save-as dialog', async ({ comfyPage }) => {
+    const { page, appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+    await appMode.goToPreview()
+    await appMode.clickSave()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    // App should be selected by default
+    const appRadio = dialog.getByRole('radio', { name: /App/ })
+    await expect(appRadio).toHaveAttribute('aria-checked', 'true')
+
+    // Click Node graph option
+    const graphRadio = dialog.getByRole('radio', { name: /Node graph/ })
+    await graphRadio.click()
+    await expect(graphRadio).toHaveAttribute('aria-checked', 'true')
+    await expect(appRadio).toHaveAttribute('aria-checked', 'false')
+  })
+})

browser_tests/tests/changeTrackerLoadGuard.spec.ts

@@ -0,0 +1,66 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+import type { WorkspaceStore } from '../types/globals'
+
+test.describe(
+  'Change Tracker - isLoadingGraph guard',
+  { tag: '@workflow' },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.setupWorkflowsDirectory({})
+    })
+
+    test('Prevents checkState from corrupting workflow state during tab switch', async ({
+      comfyPage
+    }) => {
+      // Tab 0: default workflow (7 nodes)
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
+
+      // Save tab 0 so it has a unique name for tab switching
+      await comfyPage.menu.topbar.saveWorkflow('workflow-a')
+
+      // Register an extension that forces checkState during graph loading.
+      // This simulates the bug scenario where a user clicks during graph loading
+      // which triggers a checkState call on the wrong graph, corrupting the activeState.
+      await comfyPage.page.evaluate(() => {
+        window.app!.registerExtension({
+          name: 'TestCheckStateDuringLoad',
+          afterConfigureGraph() {
+            const workflow = (window.app!.extensionManager as WorkspaceStore)
+              .workflow.activeWorkflow
+            if (!workflow) throw new Error('No workflow found')
+            // Bypass the guard to reproduce the corruption bug:
+            // ; (workflow.changeTracker.constructor as unknown as { isLoadingGraph: boolean }).isLoadingGraph = false
+
+            // Simulate the user clicking during graph loading
+            workflow.changeTracker.checkState()
+          }
+        })
+      })
+
+      // Create tab 1: blank workflow (0 nodes)
+      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+      await comfyPage.nextFrame()
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+      // Switch back to tab 0 (workflow-a).
+      const tab0 = comfyPage.menu.topbar.getWorkflowTab('workflow-a')
+      await tab0.click()
+      await comfyPage.nextFrame()
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
+
+      // switch to blank tab and back to verify no corruption
+      const tab1 = comfyPage.menu.topbar.getWorkflowTab('Unsaved Workflow')
+      await tab1.click()
+      await comfyPage.nextFrame()
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+      // switch again and verify no corruption
+      await tab0.click()
+      await comfyPage.nextFrame()
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
+    })
+  }
+)

browser_tests/tests/containAudit.spec.ts

@@ -0,0 +1,276 @@
+import { expect } from '@playwright/test'
+
+import type { PerfMeasurement } from '../fixtures/helpers/PerformanceHelper'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+interface ContainCandidate {
+  selector: string
+  testId: string | null
+  tagName: string
+  className: string
+  subtreeSize: number
+  hasFixedWidth: boolean
+  isFlexChild: boolean
+  hasExplicitDimensions: boolean
+  alreadyContained: boolean
+  score: number
+}
+
+interface AuditResult {
+  candidate: ContainCandidate
+  baseline: Pick<PerfMeasurement, 'styleRecalcs' | 'layouts' | 'taskDurationMs'>
+  withContain: Pick<
+    PerfMeasurement,
+    'styleRecalcs' | 'layouts' | 'taskDurationMs'
+  >
+  deltaRecalcsPct: number
+  deltaLayoutsPct: number
+  visuallyBroken: boolean
+}
+
+function formatPctDelta(value: number): string {
+  const sign = value >= 0 ? '+' : ''
+  return `${sign}${value.toFixed(1)}%`
+}
+
+function pctChange(baseline: number, measured: number): number {
+  if (baseline === 0) return 0
+  return ((measured - baseline) / baseline) * 100
+}
+
+const STABILIZATION_FRAMES = 60
+const SETTLE_FRAMES = 10
+
+test.describe('CSS Containment Audit', { tag: ['@audit'] }, () => {
+  test('scan large graph for containment candidates', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+
+    for (let i = 0; i < STABILIZATION_FRAMES; i++) {
+      await comfyPage.nextFrame()
+    }
+
+    // Walk the DOM and find candidates
+    const candidates = await comfyPage.page.evaluate((): ContainCandidate[] => {
+      const results: ContainCandidate[] = []
+
+      const graphContainer =
+        document.querySelector('.graph-canvas-container') ??
+        document.querySelector('[class*="comfy-vue-node"]')?.parentElement ??
+        document.querySelector('.lg-node')?.parentElement
+
+      const root = graphContainer ?? document.body
+      const allElements = root.querySelectorAll('*')
+
+      allElements.forEach((el) => {
+        if (!(el instanceof HTMLElement)) return
+
+        const subtreeSize = el.querySelectorAll('*').length
+        if (subtreeSize < 5) return
+
+        const computed = getComputedStyle(el)
+
+        const containValue = computed.contain || 'none'
+        const alreadyContained =
+          containValue.includes('layout') || containValue.includes('strict')
+
+        const hasFixedWidth =
+          computed.width !== 'auto' &&
+          !computed.width.includes('%') &&
+          computed.width !== '0px'
+
+        const isFlexChild =
+          el.parentElement !== null &&
+          getComputedStyle(el.parentElement).display.includes('flex') &&
+          (computed.flexGrow !== '0' || computed.flexShrink !== '1')
+
+        const hasExplicitDimensions =
+          hasFixedWidth ||
+          (computed.minWidth !== '0px' && computed.minWidth !== 'auto') ||
+          (computed.maxWidth !== 'none' && computed.maxWidth !== '0px')
+
+        let score = subtreeSize
+        if (hasExplicitDimensions) score *= 2
+        if (isFlexChild) score *= 1.5
+        if (alreadyContained) score = 0
+
+        let selector = el.tagName.toLowerCase()
+        const testId = el.getAttribute('data-testid')
+        if (testId) {
+          selector = `[data-testid="${testId}"]`
+        } else if (el.id) {
+          selector = `#${el.id}`
+        } else if (el.parentElement) {
+          // Use nth-child to disambiguate instead of fragile first-class fallback
+          // (e.g. Tailwind utilities like .flex, .relative are shared across many elements)
+          const children = Array.from(el.parentElement.children)
+          const index = children.indexOf(el) + 1
+          const parentTestId = el.parentElement.getAttribute('data-testid')
+          if (parentTestId) {
+            selector = `[data-testid="${parentTestId}"] > :nth-child(${index})`
+          } else if (el.parentElement.id) {
+            selector = `#${el.parentElement.id} > :nth-child(${index})`
+          } else {
+            const tag = el.tagName.toLowerCase()
+            selector = `${tag}:nth-child(${index})`
+          }
+        }
+
+        results.push({
+          selector,
+          testId,
+          tagName: el.tagName.toLowerCase(),
+          className:
+            typeof el.className === 'string' ? el.className.slice(0, 80) : '',
+          subtreeSize,
+          hasFixedWidth,
+          isFlexChild,
+          hasExplicitDimensions,
+          alreadyContained,
+          score
+        })
+      })
+
+      results.sort((a, b) => b.score - a.score)
+      return results.slice(0, 20)
+    })
+
+    console.log(`\nFound ${candidates.length} containment candidates\n`)
+
+    // Deduplicate candidates by selector (keep highest score)
+    const seen = new Set<string>()
+    const uniqueCandidates = candidates.filter((c) => {
+      if (seen.has(c.selector)) return false
+      seen.add(c.selector)
+      return true
+    })
+
+    // Measure baseline performance (idle)
+    await comfyPage.perf.startMeasuring()
+    for (let i = 0; i < STABILIZATION_FRAMES; i++) {
+      await comfyPage.nextFrame()
+    }
+    const baseline = await comfyPage.perf.stopMeasuring('baseline-idle')
+
+    // Take a baseline screenshot for visual comparison
+    const baselineScreenshot = await comfyPage.page.screenshot()
+
+    // For each candidate, apply contain and measure
+    const results: AuditResult[] = []
+
+    const testCandidates = uniqueCandidates
+      .filter((c) => !c.alreadyContained && c.score > 0)
+      .slice(0, 10)
+
+    for (const candidate of testCandidates) {
+      const applied = await comfyPage.page.evaluate((sel: string) => {
+        const elements = document.querySelectorAll(sel)
+        let count = 0
+        elements.forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.style.contain = 'layout style'
+            count++
+          }
+        })
+        return count
+      }, candidate.selector)
+
+      if (applied === 0) continue
+
+      for (let i = 0; i < SETTLE_FRAMES; i++) {
+        await comfyPage.nextFrame()
+      }
+
+      // Measure with containment
+      await comfyPage.perf.startMeasuring()
+      for (let i = 0; i < STABILIZATION_FRAMES; i++) {
+        await comfyPage.nextFrame()
+      }
+      const withContain = await comfyPage.perf.stopMeasuring(
+        `contain-${candidate.selector}`
+      )
+
+      // Take screenshot with containment applied to detect visual breakage.
+      // Note: PNG byte comparison can produce false positives from subpixel
+      // rendering and anti-aliasing. Treat "DIFF" as "needs manual review".
+      const containScreenshot = await comfyPage.page.screenshot()
+      const visuallyBroken = !baselineScreenshot.equals(containScreenshot)
+
+      // Remove containment
+      await comfyPage.page.evaluate((sel: string) => {
+        document.querySelectorAll(sel).forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.style.contain = ''
+          }
+        })
+      }, candidate.selector)
+
+      for (let i = 0; i < SETTLE_FRAMES; i++) {
+        await comfyPage.nextFrame()
+      }
+
+      results.push({
+        candidate,
+        baseline: {
+          styleRecalcs: baseline.styleRecalcs,
+          layouts: baseline.layouts,
+          taskDurationMs: baseline.taskDurationMs
+        },
+        withContain: {
+          styleRecalcs: withContain.styleRecalcs,
+          layouts: withContain.layouts,
+          taskDurationMs: withContain.taskDurationMs
+        },
+        deltaRecalcsPct: pctChange(
+          baseline.styleRecalcs,
+          withContain.styleRecalcs
+        ),
+        deltaLayoutsPct: pctChange(baseline.layouts, withContain.layouts),
+        visuallyBroken
+      })
+    }
+
+    // Print the report
+    const divider = '='.repeat(100)
+    const thinDivider = '-'.repeat(100)
+    console.log('\n')
+    console.log('CSS Containment Audit Results')
+    console.log(divider)
+    console.log(
+      'Rank | Selector                                   | Subtree | Score | DRecalcs   | DLayouts   | Visual'
+    )
+    console.log(thinDivider)
+
+    results
+      .sort((a, b) => a.deltaRecalcsPct - b.deltaRecalcsPct)
+      .forEach((r, i) => {
+        const sel = r.candidate.selector.padEnd(42)
+        const sub = String(r.candidate.subtreeSize).padStart(7)
+        const score = String(Math.round(r.candidate.score)).padStart(5)
+        const dr = formatPctDelta(r.deltaRecalcsPct)
+        const dl = formatPctDelta(r.deltaLayoutsPct)
+        const vis = r.visuallyBroken ? 'DIFF' : 'OK'
+        console.log(
+          `  ${String(i + 1).padStart(2)}  | ${sel} | ${sub} | ${score} | ${dr.padStart(10)} | ${dl.padStart(10)} | ${vis}`
+        )
+      })
+
+    console.log(divider)
+    console.log(
+      `\nBaseline: ${baseline.styleRecalcs} style recalcs, ${baseline.layouts} layouts, ${baseline.taskDurationMs.toFixed(1)}ms task duration\n`
+    )
+
+    const alreadyContained = uniqueCandidates.filter((c) => c.alreadyContained)
+    if (alreadyContained.length > 0) {
+      console.log('Already contained elements:')
+      alreadyContained.forEach((c) => {
+        console.log(`  ${c.selector} (subtree: ${c.subtreeSize})`)
+      })
+    }
+
+    expect(results.length).toBeGreaterThan(0)
+  })
+
+  // Pan interaction perf measurement removed — covered by PR #10001 (performance.spec.ts).
+  // The containment fix itself is tracked in PR #9946.
+})

browser_tests/tests/dialog.spec.ts

@@ -28,8 +28,11 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
-    await expect(missingNodesTitle).toBeVisible()
+    const messages = errorOverlay.getByTestId(
+      TestIds.dialogs.errorOverlayMessages
+    )
+    await expect(messages).toBeVisible()
+    await expect(messages).toHaveText(/missing.*installed/i)
   })
 
   test('Should show error overlay when loading a workflow with missing nodes in subgraphs', async ({
@@ -42,8 +45,11 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
-    await expect(missingNodesTitle).toBeVisible()
+    const messages = errorOverlay.getByTestId(
+      TestIds.dialogs.errorOverlayMessages
+    )
+    await expect(messages).toBeVisible()
+    await expect(messages).toHaveText(/missing.*installed/i)
 
     // Click "See Errors" to open the errors tab and verify subgraph node content
     await errorOverlay
@@ -102,7 +108,7 @@ test('Does not resurface missing nodes on undo/redo', async ({ comfyPage }) => {
   await expect(errorOverlay).toBeVisible()
 
   // Dismiss the error overlay
-  await errorOverlay.getByRole('button', { name: 'Dismiss' }).click()
+  await errorOverlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
   await expect(errorOverlay).not.toBeVisible()
 
   // Make a change to the graph by moving a node
@@ -210,8 +216,11 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
-    await expect(missingModelsTitle).toBeVisible()
+    const messages = errorOverlay.getByTestId(
+      TestIds.dialogs.errorOverlayMessages
+    )
+    await expect(messages).toBeVisible()
+    await expect(messages).toHaveText(/required model.*missing/i)
   })
 
   test('Should show missing models from node properties', async ({
@@ -226,8 +235,11 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
-    await expect(missingModelsTitle).toBeVisible()
+    const messages = errorOverlay.getByTestId(
+      TestIds.dialogs.errorOverlayMessages
+    )
+    await expect(messages).toBeVisible()
+    await expect(messages).toHaveText(/required model.*missing/i)
   })
 
   test('Should not show missing models when widget values have changed', async ({
@@ -240,7 +252,9 @@ test.describe('Missing models in Error Tab', () => {
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     ).not.toBeVisible()
-    await expect(comfyPage.page.getByText(/Missing Models/)).not.toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlayMessages)
+    ).not.toBeVisible()
   })
 
   // Flaky test after parallelization

browser_tests/tests/errorOverlaySeeErrors.spec.ts

@@ -4,6 +4,7 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -29,14 +30,14 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
     await triggerExecutionError(comfyPage)
 
     await expect(
-      comfyPage.page.locator('[data-testid="error-overlay"]')
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     ).toBeVisible()
   })
 
   test('Error overlay shows error message', async ({ comfyPage }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     await expect(overlay).toBeVisible()
     await expect(overlay).toHaveText(/\S/)
   })
@@ -44,10 +45,10 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
   test('"See Errors" opens right side panel', async ({ comfyPage }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     await expect(overlay).toBeVisible()
 
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
+    await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
 
     await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
   })
@@ -55,10 +56,10 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
   test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     await expect(overlay).toBeVisible()
 
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
+    await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
 
     await expect(overlay).not.toBeVisible()
   })
@@ -68,10 +69,10 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
   }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     await expect(overlay).toBeVisible()
 
-    await overlay.getByRole('button', { name: /Dismiss/i }).click()
+    await overlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
 
     await expect(overlay).not.toBeVisible()
     await expect(
@@ -82,7 +83,7 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
   test('Close button (X) dismisses overlay', async ({ comfyPage }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     await expect(overlay).toBeVisible()
 
     await overlay.getByRole('button', { name: /close/i }).click()

browser_tests/tests/execution.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -24,16 +25,14 @@ test.describe('Execution', { tag: ['@smoke', '@workflow'] }, () => {
       await comfyPage.page.keyboard.press('Escape')
 
       await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-      await expect(
-        comfyPage.page.locator('[data-testid="error-overlay"]')
-      ).toBeVisible()
-      await comfyPage.page
-        .locator('[data-testid="error-overlay"]')
-        .getByRole('button', { name: 'Dismiss' })
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
         .click()
-      await comfyPage.page
-        .locator('[data-testid="error-overlay"]')
-        .waitFor({ state: 'hidden' })
+      await errorOverlay.waitFor({ state: 'hidden' })
       await expect(comfyPage.canvas).toHaveScreenshot(
         'execution-error-unconnected-slot.png'
       )

browser_tests/tests/maskEditor.spec.ts

@@ -0,0 +1,92 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Mask Editor', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+  })
+
+  async function loadImageOnNode(comfyPage: ComfyPage) {
+    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const loadImageNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    )[0]
+    const { x, y } = await loadImageNode.getPosition()
+
+    await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
+      dropPosition: { x, y }
+    })
+
+    const imagePreview = comfyPage.page.locator('.image-preview')
+    await expect(imagePreview).toBeVisible()
+    await expect(imagePreview.locator('img')).toBeVisible()
+    await expect(imagePreview).toContainText('x')
+
+    return {
+      imagePreview,
+      nodeId: String(loadImageNode.id)
+    }
+  }
+
+  test(
+    'opens mask editor from image preview button',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ comfyPage }) => {
+      const { imagePreview } = await loadImageOnNode(comfyPage)
+
+      // Hover over the image panel to reveal action buttons
+      await imagePreview.getByRole('region').hover()
+      await comfyPage.page.getByLabel('Edit or mask image').click()
+
+      const dialog = comfyPage.page.locator('.mask-editor-dialog')
+      await expect(dialog).toBeVisible()
+
+      await expect(
+        dialog.getByRole('heading', { name: 'Mask Editor' })
+      ).toBeVisible()
+
+      const canvasContainer = dialog.locator('#maskEditorCanvasContainer')
+      await expect(canvasContainer).toBeVisible()
+      await expect(canvasContainer.locator('canvas')).toHaveCount(4)
+
+      await expect(dialog.locator('.maskEditor-ui-container')).toBeVisible()
+      await expect(dialog.getByText('Save')).toBeVisible()
+      await expect(dialog.getByText('Cancel')).toBeVisible()
+
+      await expect(dialog).toHaveScreenshot('mask-editor-dialog-open.png')
+    }
+  )
+
+  test(
+    'opens mask editor from context menu',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ comfyPage }) => {
+      const { nodeId } = await loadImageOnNode(comfyPage)
+
+      const nodeHeader = comfyPage.vueNodes
+        .getNodeLocator(nodeId)
+        .locator('.lg-node-header')
+      await nodeHeader.click()
+      await nodeHeader.click({ button: 'right' })
+
+      const contextMenu = comfyPage.page.locator('.p-contextmenu')
+      await expect(contextMenu).toBeVisible()
+
+      await contextMenu.getByText('Open in Mask Editor').click()
+
+      const dialog = comfyPage.page.locator('.mask-editor-dialog')
+      await expect(dialog).toBeVisible()
+      await expect(
+        dialog.getByRole('heading', { name: 'Mask Editor' })
+      ).toBeVisible()
+
+      await expect(dialog).toHaveScreenshot(
+        'mask-editor-dialog-from-context-menu.png'
+      )
+    }
+  )
+})

browser_tests/tests/painter.spec.ts

@@ -0,0 +1,92 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Painter', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test(
+    'Renders canvas and controls',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      const painterWidget = node.locator('.widget-expands')
+      await expect(painterWidget).toBeVisible()
+
+      await expect(painterWidget.locator('canvas')).toBeVisible()
+      await expect(painterWidget.getByText('Brush')).toBeVisible()
+      await expect(painterWidget.getByText('Eraser')).toBeVisible()
+      await expect(painterWidget.getByText('Clear')).toBeVisible()
+      await expect(
+        painterWidget.locator('input[type="color"]').first()
+      ).toBeVisible()
+
+      await expect(node).toHaveScreenshot('painter-default-state.png')
+    }
+  )
+
+  test(
+    'Drawing a stroke changes the canvas',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const canvas = node.locator('.widget-expands canvas')
+      await expect(canvas).toBeVisible()
+
+      const isEmptyBefore = await canvas.evaluate((el) => {
+        const ctx = (el as HTMLCanvasElement).getContext('2d')
+        if (!ctx) return true
+        const data = ctx.getImageData(
+          0,
+          0,
+          (el as HTMLCanvasElement).width,
+          (el as HTMLCanvasElement).height
+        )
+        return data.data.every((v, i) => (i % 4 === 3 ? v === 0 : true))
+      })
+      expect(isEmptyBefore).toBe(true)
+
+      const box = await canvas.boundingBox()
+      if (!box) throw new Error('Canvas bounding box not found')
+
+      await comfyPage.page.mouse.move(
+        box.x + box.width * 0.3,
+        box.y + box.height * 0.5
+      )
+      await comfyPage.page.mouse.down()
+      await comfyPage.page.mouse.move(
+        box.x + box.width * 0.7,
+        box.y + box.height * 0.5,
+        { steps: 10 }
+      )
+      await comfyPage.page.mouse.up()
+      await comfyPage.nextFrame()
+
+      await expect(async () => {
+        const hasContent = await canvas.evaluate((el) => {
+          const ctx = (el as HTMLCanvasElement).getContext('2d')
+          if (!ctx) return false
+          const data = ctx.getImageData(
+            0,
+            0,
+            (el as HTMLCanvasElement).width,
+            (el as HTMLCanvasElement).height
+          )
+          for (let i = 3; i < data.data.length; i += 4) {
+            if (data.data[i] > 0) return true
+          }
+          return false
+        })
+        expect(hasContent).toBe(true)
+      }).toPass()
+
+      await expect(node).toHaveScreenshot('painter-after-stroke.png')
+    }
+  )
+})

browser_tests/tests/selectionBoundingBox.spec.ts

@@ -0,0 +1,318 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+interface CanvasRect {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+interface MeasureResult {
+  selectionBounds: CanvasRect | null
+  nodeVisualBounds: Record<string, CanvasRect>
+}
+
+// Must match the padding value passed to createBounds() in selectionBorder.ts
+const SELECTION_PADDING = 10
+const SLOT_BOUNDS_MARGIN = 20
+
+async function waitForSelectedCount(page: Page, count: number) {
+  await page.waitForFunction(
+    (n) => window.app!.canvas.selectedItems.size === n,
+    count,
+    { timeout: 5000 }
+  )
+}
+
+async function waitForNodeLayout(page: Page, nodeId: string) {
+  await page.waitForFunction(
+    (id) => {
+      const el = document.querySelector(`[data-node-id="${id}"]`)
+      if (!el) return false
+      const rect = el.getBoundingClientRect()
+      return rect.width > 0 && rect.height > 0
+    },
+    nodeId,
+    { timeout: 5000 }
+  )
+}
+
+async function measureBounds(
+  page: Page,
+  nodeIds: string[]
+): Promise<MeasureResult> {
+  return page.evaluate(
+    ({ ids, padding }) => {
+      const canvas = window.app!.canvas
+      const ds = canvas.ds
+
+      const selectedItems = canvas.selectedItems
+      let minX = Infinity
+      let minY = Infinity
+      let maxX = -Infinity
+      let maxY = -Infinity
+      for (const item of selectedItems) {
+        const rect = item.boundingRect
+        minX = Math.min(minX, rect[0])
+        minY = Math.min(minY, rect[1])
+        maxX = Math.max(maxX, rect[0] + rect[2])
+        maxY = Math.max(maxY, rect[1] + rect[3])
+      }
+      const selectionBounds =
+        selectedItems.size > 0
+          ? {
+              x: minX - padding,
+              y: minY - padding,
+              w: maxX - minX + 2 * padding,
+              h: maxY - minY + 2 * padding
+            }
+          : null
+
+      const canvasEl = canvas.canvas as HTMLCanvasElement
+      const canvasRect = canvasEl.getBoundingClientRect()
+      const nodeVisualBounds: Record<string, CanvasRect> = {}
+
+      for (const id of ids) {
+        const nodeEl = document.querySelector(
+          `[data-node-id="${id}"]`
+        ) as HTMLElement | null
+        if (!nodeEl) continue
+
+        const domRect = nodeEl.getBoundingClientRect()
+        const footerEls = nodeEl.querySelectorAll(
+          '[data-testid="subgraph-enter-button"], [data-testid="node-footer"]'
+        )
+        let bottom = domRect.bottom
+        for (const footerEl of footerEls) {
+          bottom = Math.max(bottom, footerEl.getBoundingClientRect().bottom)
+        }
+
+        nodeVisualBounds[id] = {
+          x: (domRect.left - canvasRect.left) / ds.scale - ds.offset[0],
+          y: (domRect.top - canvasRect.top) / ds.scale - ds.offset[1],
+          w: domRect.width / ds.scale,
+          h: (bottom - domRect.top) / ds.scale
+        }
+      }
+
+      return { selectionBounds, nodeVisualBounds }
+    },
+    { ids: nodeIds, padding: SELECTION_PADDING }
+  ) as Promise<MeasureResult>
+}
+
+async function loadWithPositions(
+  page: Page,
+  positions: Record<string, [number, number]>
+) {
+  await page.evaluate(
+    async ({ positions }) => {
+      const data = window.app!.graph.serialize()
+      for (const node of data.nodes) {
+        const pos = positions[String(node.id)]
+        if (pos) node.pos = pos
+      }
+      await window.app!.loadGraphData(
+        data as ComfyWorkflowJSON,
+        true,
+        true,
+        null
+      )
+    },
+    { positions }
+  )
+}
+
+async function setNodeCollapsed(
+  page: Page,
+  nodeId: string,
+  collapsed: boolean
+) {
+  await page.evaluate(
+    ({ id, collapsed }) => {
+      const node = window.app!.graph._nodes.find(
+        (n: { id: number | string }) => String(n.id) === id
+      )
+      if (node) {
+        node.flags = node.flags || {}
+        node.flags.collapsed = collapsed
+        window.app!.canvas.setDirty(true, true)
+      }
+    },
+    { id: nodeId, collapsed }
+  )
+  await waitForNodeLayout(page, nodeId)
+}
+
+async function assertSlotsWithinNodeBounds(page: Page, nodeId: string) {
+  await page
+    .locator(`[data-node-id="${nodeId}"] [data-slot-key]`)
+    .first()
+    .waitFor()
+
+  const result = await page.evaluate(
+    ({ nodeId, margin }) => {
+      const nodeEl = document.querySelector(
+        `[data-node-id="${nodeId}"]`
+      ) as HTMLElement | null
+      if (!nodeEl) return { ok: false, violations: ['node element not found'] }
+
+      const nodeRect = nodeEl.getBoundingClientRect()
+      const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
+      const violations: string[] = []
+
+      for (const slotEl of slotEls) {
+        const slotRect = slotEl.getBoundingClientRect()
+        const cx = slotRect.left + slotRect.width / 2 - nodeRect.left
+        const cy = slotRect.top + slotRect.height / 2 - nodeRect.top
+
+        if (cx < -margin || cx > nodeRect.width + margin)
+          violations.push(`slot X=${cx} outside width=${nodeRect.width}`)
+        if (cy < -margin || cy > nodeRect.height + margin)
+          violations.push(`slot Y=${cy} outside height=${nodeRect.height}`)
+      }
+
+      return { ok: violations.length === 0, violations }
+    },
+    { nodeId, margin: SLOT_BOUNDS_MARGIN }
+  )
+
+  expect(
+    result.ok,
+    `Slot positions out of bounds: ${result.violations?.join(', ')}`
+  ).toBe(true)
+}
+
+const SUBGRAPH_ID = '2'
+const REGULAR_ID = '3'
+const WORKFLOW = 'selection/subgraph-with-regular-node'
+
+const REF_POS: [number, number] = [100, 100]
+const TARGET_POSITIONS: Record<string, [number, number]> = {
+  'bottom-left': [50, 500],
+  'bottom-right': [600, 500]
+}
+
+type NodeType = 'subgraph' | 'regular'
+type NodeState = 'expanded' | 'collapsed'
+type Position = 'bottom-left' | 'bottom-right'
+
+function getTargetId(type: NodeType): string {
+  return type === 'subgraph' ? SUBGRAPH_ID : REGULAR_ID
+}
+
+function getRefId(type: NodeType): string {
+  return type === 'subgraph' ? REGULAR_ID : SUBGRAPH_ID
+}
+
+test.describe('Selection bounding box', { tag: ['@canvas', '@node'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.canvasOps.resetView()
+  })
+
+  const nodeTypes: NodeType[] = ['subgraph', 'regular']
+  const nodeStates: NodeState[] = ['expanded', 'collapsed']
+  const positions: Position[] = ['bottom-left', 'bottom-right']
+
+  for (const type of nodeTypes) {
+    for (const state of nodeStates) {
+      for (const pos of positions) {
+        test(`${type} node (${state}) at ${pos}: selection bounds encompass node`, async ({
+          comfyPage
+        }) => {
+          const page = comfyPage.page
+          const targetId = getTargetId(type)
+          const refId = getRefId(type)
+
+          await loadWithPositions(page, {
+            [refId]: REF_POS,
+            [targetId]: TARGET_POSITIONS[pos]
+          })
+          await comfyPage.vueNodes.waitForNodes()
+          await waitForNodeLayout(page, targetId)
+          await waitForNodeLayout(page, refId)
+
+          if (state === 'collapsed') {
+            await setNodeCollapsed(page, targetId, true)
+          }
+
+          await comfyPage.canvas.press('Control+a')
+          await waitForSelectedCount(page, 2)
+          await comfyPage.nextFrame()
+
+          const result = await measureBounds(page, [refId, targetId])
+          expect(result.selectionBounds).not.toBeNull()
+
+          const sel = result.selectionBounds!
+          const vis = result.nodeVisualBounds[targetId]
+          expect(vis).toBeDefined()
+
+          const selRight = sel.x + sel.w
+          const selBottom = sel.y + sel.h
+          const visRight = vis.x + vis.w
+          const visBottom = vis.y + vis.h
+
+          expect(sel.x).toBeLessThanOrEqual(vis.x)
+          expect(selRight).toBeGreaterThanOrEqual(visRight)
+          expect(sel.y).toBeLessThanOrEqual(vis.y)
+          expect(selBottom).toBeGreaterThanOrEqual(visBottom)
+        })
+      }
+    }
+  }
+})
+
+test.describe(
+  'Collapsed node link positions',
+  { tag: ['@canvas', '@node'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.canvasOps.resetView()
+    })
+
+    test('link endpoints stay within collapsed node bounds', async ({
+      comfyPage
+    }) => {
+      await setNodeCollapsed(comfyPage.page, SUBGRAPH_ID, true)
+      await assertSlotsWithinNodeBounds(comfyPage.page, SUBGRAPH_ID)
+    })
+
+    test('links follow collapsed node after position change', async ({
+      comfyPage
+    }) => {
+      const page = comfyPage.page
+      await loadWithPositions(page, { [SUBGRAPH_ID]: [200, 200] })
+      await comfyPage.vueNodes.waitForNodes()
+      await setNodeCollapsed(page, SUBGRAPH_ID, true)
+      await assertSlotsWithinNodeBounds(page, SUBGRAPH_ID)
+    })
+
+    test('links recover correct positions after expand', async ({
+      comfyPage
+    }) => {
+      const page = comfyPage.page
+      await setNodeCollapsed(page, SUBGRAPH_ID, true)
+      await waitForNodeLayout(page, SUBGRAPH_ID)
+      await setNodeCollapsed(page, SUBGRAPH_ID, false)
+      await waitForNodeLayout(page, SUBGRAPH_ID)
+      await assertSlotsWithinNodeBounds(page, SUBGRAPH_ID)
+    })
+  }
+)

browser_tests/tests/sidebar/assets.spec.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Assets sidebar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockEmptyState()
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Shows empty-state copy for generated and imported tabs', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+
+    await tab.open()
+
+    await expect(tab.emptyStateTitle('No generated files found')).toBeVisible()
+    await expect(tab.emptyStateMessage).toBeVisible()
+
+    await tab.importedTab.click()
+
+    await expect(tab.emptyStateTitle('No imported files found')).toBeVisible()
+    await expect(tab.emptyStateMessage).toBeVisible()
+  })
+})

browser_tests/tests/sidebar/workflows.spec.ts

@@ -247,7 +247,7 @@ test.describe('Workflows sidebar', () => {
     await expect(errorOverlay).toBeVisible()
 
     // Dismiss the error overlay
-    await errorOverlay.getByRole('button', { name: 'Dismiss' }).click()
+    await errorOverlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
     await expect(errorOverlay).not.toBeVisible()
 
     // Load blank workflow

browser_tests/tests/subgraphViewport.spec.ts

@@ -0,0 +1,114 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+function hasVisibleNodeInViewport() {
+  const canvas = window.app!.canvas
+  if (!canvas?.graph?._nodes?.length) return false
+
+  const ds = canvas.ds
+  const cw = canvas.canvas.width / window.devicePixelRatio
+  const ch = canvas.canvas.height / window.devicePixelRatio
+  const visLeft = -ds.offset[0]
+  const visTop = -ds.offset[1]
+  const visRight = visLeft + cw / ds.scale
+  const visBottom = visTop + ch / ds.scale
+
+  for (const node of canvas.graph._nodes) {
+    const [nx, ny] = node.pos
+    const [nw, nh] = node.size
+    if (
+      nx + nw > visLeft &&
+      nx < visRight &&
+      ny + nh > visTop &&
+      ny < visBottom
+    )
+      return true
+  }
+  return false
+}
+
+test.describe('Subgraph viewport restoration', { tag: '@subgraph' }, () => {
+  test('first visit fits viewport to subgraph nodes (LG)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(
+      'subgraphs/subgraph-with-promoted-text-widget'
+    )
+    await comfyPage.nextFrame()
+
+    await comfyPage.page.evaluate(() => {
+      const canvas = window.app!.canvas
+      const graph = canvas.graph!
+      const sgNode = graph._nodes.find((n) =>
+        'isSubgraphNode' in n
+          ? (n as unknown as { isSubgraphNode: () => boolean }).isSubgraphNode()
+          : false
+      ) as unknown as { subgraph?: typeof graph } | undefined
+      if (!sgNode?.subgraph) throw new Error('No subgraph node')
+
+      canvas.setGraph(sgNode.subgraph)
+    })
+
+    await expect
+      .poll(() => comfyPage.page.evaluate(hasVisibleNodeInViewport), {
+        timeout: 2000
+      })
+      .toBe(true)
+  })
+
+  test('first visit fits viewport to subgraph nodes (Vue)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow(
+      'subgraphs/subgraph-with-promoted-text-widget'
+    )
+    await comfyPage.vueNodes.waitForNodes()
+
+    await comfyPage.vueNodes.enterSubgraph('11')
+
+    await expect
+      .poll(() => comfyPage.page.evaluate(hasVisibleNodeInViewport), {
+        timeout: 2000
+      })
+      .toBe(true)
+  })
+
+  test('viewport is restored when returning to root (Vue)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow(
+      'subgraphs/subgraph-with-promoted-text-widget'
+    )
+    await comfyPage.vueNodes.waitForNodes()
+
+    const rootViewport = await comfyPage.page.evaluate(() => {
+      const ds = window.app!.canvas.ds
+      return { scale: ds.scale, offset: [...ds.offset] }
+    })
+
+    await comfyPage.vueNodes.enterSubgraph('11')
+    await comfyPage.nextFrame()
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+
+    await expect
+      .poll(
+        () =>
+          comfyPage.page.evaluate(() => {
+            const ds = window.app!.canvas.ds
+            return { scale: ds.scale, offset: [...ds.offset] }
+          }),
+        { timeout: 2000 }
+      )
+      .toEqual({
+        scale: expect.closeTo(rootViewport.scale, 2),
+        offset: [
+          expect.closeTo(rootViewport.offset[0], 0),
+          expect.closeTo(rootViewport.offset[1], 0)
+        ]
+      })
+  })
+})

browser_tests/tests/zoomControls.spec.ts

@@ -0,0 +1,138 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
+
+test.describe('Zoom Controls', { tag: '@canvas' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.page.waitForFunction(() => window.app && window.app.canvas)
+  })
+
+  test('Default zoom is 100% and node has a size', async ({ comfyPage }) => {
+    const nodeSize = await comfyPage.page.evaluate(
+      () => window.app!.graph.nodes[0].size
+    )
+    expect(nodeSize[0]).toBeGreaterThan(0)
+    expect(nodeSize[1]).toBeGreaterThan(0)
+
+    const zoomButton = comfyPage.page.getByTestId(
+      TestIds.canvas.zoomControlsButton
+    )
+    await expect(zoomButton).toContainText('100%')
+
+    const scale = await comfyPage.canvasOps.getScale()
+    expect(scale).toBeCloseTo(1.0, 1)
+  })
+
+  test('Zoom to fit reduces percentage', async ({ comfyPage }) => {
+    const zoomButton = comfyPage.page.getByTestId(
+      TestIds.canvas.zoomControlsButton
+    )
+    await zoomButton.click()
+    await comfyPage.nextFrame()
+
+    const zoomToFit = comfyPage.page.getByTestId(TestIds.canvas.zoomToFitAction)
+    await expect(zoomToFit).toBeVisible()
+    await zoomToFit.click()
+
+    await expect
+      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
+      .toBeLessThan(1.0)
+
+    await expect(zoomButton).not.toContainText('100%')
+  })
+
+  test('Zoom out reduces percentage', async ({ comfyPage }) => {
+    const initialScale = await comfyPage.canvasOps.getScale()
+
+    const zoomButton = comfyPage.page.getByTestId(
+      TestIds.canvas.zoomControlsButton
+    )
+    await zoomButton.click()
+    await comfyPage.nextFrame()
+
+    const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
+    await zoomOut.click()
+    await comfyPage.nextFrame()
+
+    const newScale = await comfyPage.canvasOps.getScale()
+    expect(newScale).toBeLessThan(initialScale)
+  })
+
+  test('Zoom out clamps at 10% minimum', async ({ comfyPage }) => {
+    const zoomButton = comfyPage.page.getByTestId(
+      TestIds.canvas.zoomControlsButton
+    )
+    await zoomButton.click()
+    await comfyPage.nextFrame()
+
+    const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
+    for (let i = 0; i < 30; i++) {
+      await zoomOut.click()
+    }
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
+      .toBeCloseTo(0.1, 1)
+
+    await expect(zoomButton).toContainText('10%')
+  })
+
+  test('Manual percentage entry allows zoom in and zoom out', async ({
+    comfyPage
+  }) => {
+    const zoomButton = comfyPage.page.getByTestId(
+      TestIds.canvas.zoomControlsButton
+    )
+    await zoomButton.click()
+    await comfyPage.nextFrame()
+
+    const input = comfyPage.page
+      .getByTestId(TestIds.canvas.zoomPercentageInput)
+      .locator('input')
+    await input.focus()
+    await comfyPage.page.keyboard.press('Control+a')
+    await input.pressSequentially('100')
+    await input.press('Enter')
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
+      .toBeCloseTo(1.0, 1)
+
+    const zoomIn = comfyPage.page.getByTestId(TestIds.canvas.zoomInAction)
+    await zoomIn.click()
+    await comfyPage.nextFrame()
+
+    const scaleAfterZoomIn = await comfyPage.canvasOps.getScale()
+    expect(scaleAfterZoomIn).toBeGreaterThan(1.0)
+
+    const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
+    await zoomOut.click()
+    await comfyPage.nextFrame()
+
+    const scaleAfterZoomOut = await comfyPage.canvasOps.getScale()
+    expect(scaleAfterZoomOut).toBeLessThan(scaleAfterZoomIn)
+  })
+
+  test('Clicking zoom button toggles zoom controls visibility', async ({
+    comfyPage
+  }) => {
+    const zoomButton = comfyPage.page.getByTestId(
+      TestIds.canvas.zoomControlsButton
+    )
+    await zoomButton.click()
+    await comfyPage.nextFrame()
+
+    const zoomToFit = comfyPage.page.getByTestId(TestIds.canvas.zoomToFitAction)
+    await expect(zoomToFit).toBeVisible()
+
+    await zoomButton.click()
+    await comfyPage.nextFrame()
+
+    await expect(zoomToFit).not.toBeVisible()
+  })
+})

docs/testing/README.md

@@ -29,7 +29,9 @@ The ComfyUI Frontend project uses **colocated tests** - test files are placed al
 Our tests use the following frameworks and libraries:
 
 - [Vitest](https://vitest.dev/) - Test runner and assertion library
-- [@vue/test-utils](https://test-utils.vuejs.org/) - Vue component testing utilities
+- [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/) - Preferred for user-centric component testing
+- [@testing-library/user-event](https://testing-library.com/docs/user-event/intro/) - Realistic user interaction simulation
+- [@vue/test-utils](https://test-utils.vuejs.org/) - Vue component testing utilities (also accepted)
 - [Pinia](https://pinia.vuejs.org/cookbook/testing.html) - For store testing
 
 ## Getting Started

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.6",
+  "version": "1.43.7",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

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

@@ -25,6 +25,9 @@
 @theme {
   --shadow-interface: var(--interface-panel-box-shadow);
 
+  --text-2xs: 0.625rem;
+  --text-2xs--line-height: calc(1 / 0.625);
+
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 
@@ -230,6 +233,7 @@
   --interface-builder-mode-background: var(--color-ocean-300);
   --interface-builder-mode-button-background: var(--color-ocean-600);
   --interface-builder-mode-button-foreground: var(--color-white);
+  --interface-builder-mode-footer-background: var(--color-ocean-900);
 
   --nav-background: var(--color-white);
 
@@ -373,6 +377,7 @@
   --interface-builder-mode-background: var(--color-ocean-900);
   --interface-builder-mode-button-background: var(--color-ocean-600);
   --interface-builder-mode-button-foreground: var(--color-white);
+  --interface-builder-mode-footer-background: var(--color-ocean-900);
 
   --nav-background: var(--color-charcoal-800);
 
@@ -516,6 +521,9 @@
   --color-interface-builder-mode-button-foreground: var(
     --interface-builder-mode-button-foreground
   );
+  --color-interface-builder-mode-footer-background: var(
+    --interface-builder-mode-footer-background
+  );
   --color-interface-stroke: var(--interface-stroke);
   --color-nav-background: var(--nav-background);
   --color-node-border: var(--node-border);

playwright.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
       timeout: 15000,
-      grepInvert: /@mobile|@perf/ // Run all tests except those tagged with @mobile or @perf
+      grepInvert: /@mobile|@perf|@audit/ // Run all tests except those tagged with @mobile, @perf, or @audit
     },
 
     {
@@ -50,6 +50,17 @@ export default defineConfig({
       fullyParallel: false
     },
 
+    {
+      name: 'audit',
+      use: {
+        ...devices['Desktop Chrome'],
+        trace: 'retain-on-failure'
+      },
+      timeout: 120_000,
+      grep: /@audit/,
+      fullyParallel: false
+    },
+
     {
       name: 'chromium-2x',
       use: { ...devices['Desktop Chrome'], deviceScaleFactor: 2 },

src/App.vue

@@ -7,17 +7,15 @@
 <script setup lang="ts">
 import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
-import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { isDesktop } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI } from '@/utils/envUtil'
 import { parsePreloadError } from '@/utils/preloadErrorUtil'
-import { useDialogService } from '@/services/dialogService'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
 const workspaceStore = useWorkspaceStore()
@@ -129,26 +127,5 @@ onMounted(() => {
   // Initialize conflict detection in background
   // This runs async and doesn't block UI setup
   void conflictDetection.initializeConflictDetection()
-
-  // Show cloud notification for macOS desktop users (one-time)
-  if (isDesktop && electronAPI()?.getPlatform() === 'darwin') {
-    const settingStore = useSettingStore()
-    if (!settingStore.get('Comfy.Desktop.CloudNotificationShown')) {
-      const dialogService = useDialogService()
-      cloudNotificationTimer = setTimeout(async () => {
-        try {
-          await dialogService.showCloudNotification()
-        } catch (e) {
-          console.warn('[CloudNotification] Failed to show', e)
-        }
-        await settingStore.set('Comfy.Desktop.CloudNotificationShown', true)
-      }, 2000)
-    }
-  }
-})
-
-let cloudNotificationTimer: ReturnType<typeof setTimeout> | undefined
-onUnmounted(() => {
-  if (cloudNotificationTimer) clearTimeout(cloudNotificationTimer)
 })
 </script>

src/components/TopMenuSection.test.ts

@@ -71,8 +71,8 @@ vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
   })
 }))
 
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: vi.fn(() => ({
+vi.mock('@/stores/authStore', () => ({
+  useAuthStore: vi.fn(() => ({
     currentUser: null,
     loading: false
   }))

src/components/TopMenuSection.vue

@@ -46,7 +46,6 @@
             <ComfyActionbar
               :top-menu-container="actionbarContainerRef"
               :queue-overlay-expanded="isQueueOverlayExpanded"
-              :has-any-error="hasAnyError"
               @update:progress-target="updateProgressTarget"
             />
             <CurrentUserButton
@@ -67,16 +66,29 @@
                 {{ t('actionbar.share') }}
               </span>
             </Button>
-            <Button
-              v-if="!isRightSidePanelOpen"
-              v-tooltip.bottom="rightSidePanelTooltipConfig"
-              type="secondary"
-              size="icon"
-              :aria-label="t('rightSidePanel.togglePanel')"
-              @click="rightSidePanelStore.togglePanel"
-            >
-              <i class="icon-[lucide--panel-right] size-4" />
-            </Button>
+            <div v-if="!isRightSidePanelOpen" class="relative">
+              <Button
+                v-tooltip.bottom="rightSidePanelTooltipConfig"
+                :class="
+                  cn(
+                    showErrorIndicatorOnPanelButton &&
+                      'outline-1 outline-destructive-background'
+                  )
+                "
+                variant="secondary"
+                size="icon"
+                :aria-label="t('rightSidePanel.togglePanel')"
+                @click="rightSidePanelStore.togglePanel"
+              >
+                <i class="icon-[lucide--panel-right] size-4" />
+              </Button>
+              <StatusBadge
+                v-if="showErrorIndicatorOnPanelButton"
+                variant="dot"
+                severity="danger"
+                class="absolute -top-1 -right-1"
+              />
+            </div>
           </div>
         </div>
         <ErrorOverlay />
@@ -129,6 +141,7 @@ import ErrorOverlay from '@/components/error/ErrorOverlay.vue'
 import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
+import StatusBadge from '@/components/common/StatusBadge.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
@@ -206,12 +219,7 @@ const actionbarContainerClass = computed(() => {
     )
   }
 
-  const borderClass =
-    !isActionbarFloating.value && hasAnyError.value
-      ? 'border-destructive-background-hover'
-      : 'border-interface-stroke'
-
-  return cn(base, 'px-2', borderClass)
+  return cn(base, 'px-2', 'border-interface-stroke')
 })
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
@@ -254,7 +262,19 @@ const shouldShowRedDot = computed((): boolean => {
   return shouldShowConflictRedDot.value
 })
 
-const { hasAnyError } = storeToRefs(executionErrorStore)
+const { hasAnyError, isErrorOverlayOpen } = storeToRefs(executionErrorStore)
+
+const isErrorsTabEnabled = computed(() =>
+  settingStore.get('Comfy.RightSidePanel.ShowErrorsTab')
+)
+
+const showErrorIndicatorOnPanelButton = computed(
+  () =>
+    isErrorsTabEnabled.value &&
+    hasAnyError.value &&
+    !isRightSidePanelOpen.value &&
+    !isErrorOverlayOpen.value
+)
 
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)

src/components/actionbar/BatchCountEdit.test.ts

@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import { useQueueSettingsStore } from '@/stores/queueStore'
@@ -33,7 +33,7 @@ const i18n = createI18n({
   }
 })
 
-function createWrapper(initialBatchCount = 1) {
+function renderComponent(initialBatchCount = 1) {
   const pinia = createTestingPinia({
     createSpy: vi.fn,
     stubActions: false,
@@ -44,7 +44,9 @@ function createWrapper(initialBatchCount = 1) {
     }
   })
 
-  const wrapper = mount(BatchCountEdit, {
+  const user = userEvent.setup()
+
+  render(BatchCountEdit, {
     global: {
       plugins: [pinia, i18n],
       directives: {
@@ -55,44 +57,42 @@ function createWrapper(initialBatchCount = 1) {
 
   const queueSettingsStore = useQueueSettingsStore()
 
-  return { wrapper, queueSettingsStore }
+  return { user, queueSettingsStore }
 }
 
 describe('BatchCountEdit', () => {
   it('doubles the current batch count when increment is clicked', async () => {
-    const { wrapper, queueSettingsStore } = createWrapper(3)
+    const { user, queueSettingsStore } = renderComponent(3)
 
-    await wrapper.get('button[aria-label="Increment"]').trigger('click')
+    await user.click(screen.getByRole('button', { name: 'Increment' }))
 
     expect(queueSettingsStore.batchCount).toBe(6)
   })
 
   it('halves the current batch count when decrement is clicked', async () => {
-    const { wrapper, queueSettingsStore } = createWrapper(9)
+    const { user, queueSettingsStore } = renderComponent(9)
 
-    await wrapper.get('button[aria-label="Decrement"]').trigger('click')
+    await user.click(screen.getByRole('button', { name: 'Decrement' }))
 
     expect(queueSettingsStore.batchCount).toBe(4)
   })
 
   it('clamps typed values to queue limits on blur', async () => {
-    const { wrapper, queueSettingsStore } = createWrapper(2)
-    const input = wrapper.get('input')
+    const { user, queueSettingsStore } = renderComponent(2)
+    const input = screen.getByRole('textbox', { name: 'Batch Count' })
 
-    await input.setValue('999')
-    await input.trigger('blur')
-    await nextTick()
+    await user.clear(input)
+    await user.type(input, '999')
+    await user.tab()
 
     expect(queueSettingsStore.batchCount).toBe(maxBatchCount)
-    expect((input.element as HTMLInputElement).value).toBe(
-      String(maxBatchCount)
-    )
+    expect(input).toHaveValue(String(maxBatchCount))
 
-    await input.setValue('0')
-    await input.trigger('blur')
-    await nextTick()
+    await user.clear(input)
+    await user.type(input, '0')
+    await user.tab()
 
     expect(queueSettingsStore.batchCount).toBe(1)
-    expect((input.element as HTMLInputElement).value).toBe('1')
+    expect(input).toHaveValue('1')
   })
 })

src/components/actionbar/ComfyActionbar.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
@@ -20,15 +20,15 @@ const configureSettings = (
   })
 }
 
-const mountActionbar = (showRunProgressBar: boolean) => {
+const renderActionbar = (showRunProgressBar: boolean) => {
   const topMenuContainer = document.createElement('div')
   document.body.appendChild(topMenuContainer)
 
   const pinia = createTestingPinia({ createSpy: vi.fn })
   configureSettings(pinia, showRunProgressBar)
 
-  const wrapper = mount(ComfyActionbar, {
-    attachTo: document.body,
+  render(ComfyActionbar, {
+    container: document.body.appendChild(document.createElement('div')),
     props: {
       topMenuContainer,
       queueOverlayExpanded: false
@@ -57,10 +57,7 @@ const mountActionbar = (showRunProgressBar: boolean) => {
     }
   })
 
-  return {
-    wrapper,
-    topMenuContainer
-  }
+  return { topMenuContainer }
 }
 
 describe('ComfyActionbar', () => {
@@ -70,31 +67,33 @@ describe('ComfyActionbar', () => {
   })
 
   it('teleports inline progress when run progress bar is enabled', async () => {
-    const { wrapper, topMenuContainer } = mountActionbar(true)
+    const { topMenuContainer } = renderActionbar(true)
 
     try {
       await nextTick()
 
+      /* eslint-disable testing-library/no-node-access -- Teleport target verification requires scoping to the container element */
       expect(
         topMenuContainer.querySelector('[data-testid="queue-inline-progress"]')
       ).not.toBeNull()
+      /* eslint-enable testing-library/no-node-access */
     } finally {
-      wrapper.unmount()
       topMenuContainer.remove()
     }
   })
 
   it('does not teleport inline progress when run progress bar is disabled', async () => {
-    const { wrapper, topMenuContainer } = mountActionbar(false)
+    const { topMenuContainer } = renderActionbar(false)
 
     try {
       await nextTick()
 
+      /* eslint-disable testing-library/no-node-access -- Teleport target verification requires scoping to the container element */
       expect(
         topMenuContainer.querySelector('[data-testid="queue-inline-progress"]')
       ).toBeNull()
+      /* eslint-enable testing-library/no-node-access */
     } finally {
-      wrapper.unmount()
       topMenuContainer.remove()
     }
   })

src/components/actionbar/ComfyActionbar.vue

@@ -119,14 +119,9 @@ import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
 
-const {
-  topMenuContainer,
-  queueOverlayExpanded = false,
-  hasAnyError = false
-} = defineProps<{
+const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
   topMenuContainer?: HTMLElement | null
   queueOverlayExpanded?: boolean
-  hasAnyError?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -440,12 +435,7 @@ const panelClass = computed(() =>
     isDragging.value && 'pointer-events-none select-none',
     isDocked.value
       ? 'static border-none bg-transparent p-0'
-      : [
-          'fixed shadow-interface',
-          hasAnyError
-            ? 'border-destructive-background-hover'
-            : 'border-interface-stroke'
-        ]
+      : ['fixed shadow-interface', 'border-interface-stroke']
   )
 )
 </script>

src/components/actionbar/ComfyRunButton/ComfyQueueButton.test.ts

@@ -13,7 +13,8 @@ import {
   useQueueSettingsStore,
   useQueueStore
 } from '@/stores/queueStore'
-import { render, screen } from '@/utils/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
@@ -89,8 +90,9 @@ const stubs = {
 
 function renderQueueButton() {
   const pinia = createTestingPinia({ createSpy: vi.fn })
+  const user = userEvent.setup()
 
-  return render(ComfyQueueButton, {
+  const result = render(ComfyQueueButton, {
     global: {
       plugins: [pinia, i18n],
       directives: {
@@ -99,6 +101,8 @@ function renderQueueButton() {
       stubs
     }
   })
+
+  return { ...result, user }
 }
 
 describe('ComfyQueueButton', () => {
@@ -148,7 +152,7 @@ describe('ComfyQueueButton', () => {
     queueStore.runningTasks = [createTask('run-1', 'in_progress')]
     await nextTick()
 
-    await user!.click(screen.getByTestId('queue-button'))
+    await user.click(screen.getByTestId('queue-button'))
     await nextTick()
 
     expect(queueSettingsStore.mode).toBe('instant-idle')
@@ -167,7 +171,7 @@ describe('ComfyQueueButton', () => {
     queueSettingsStore.mode = 'instant-idle'
     await nextTick()
 
-    await user!.click(screen.getByTestId('queue-button'))
+    await user.click(screen.getByTestId('queue-button'))
     await nextTick()
 
     expect(queueSettingsStore.mode).toBe('instant-running')

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -21,7 +21,7 @@
     />
     <span class="p-breadcrumb-item-label px-2">{{ item.label }}</span>
     <Tag v-if="item.isBlueprint" value="Blueprint" severity="primary" />
-    <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
+    <i v-if="isActive" class="pi pi-angle-down text-2xs"></i>
   </div>
   <Menu
     v-if="isActive || isRoot"

src/components/builder/BuilderDefaultModeAppliedDialogContent.vue

@@ -1,63 +0,0 @@
-<template>
-  <BuilderDialog @close="$emit('close')">
-    <template #title>
-      <span class="inline-flex items-center gap-2">
-        {{ $t('builderToolbar.defaultModeAppliedTitle') }}
-        <i
-          aria-hidden="true"
-          class="icon-[lucide--circle-check-big] size-4 text-green-500"
-        />
-      </span>
-    </template>
-
-    <p class="m-0 text-sm text-muted-foreground">
-      {{
-        appliedAsApp
-          ? $t('builderToolbar.defaultModeAppliedAppBody')
-          : $t('builderToolbar.defaultModeAppliedGraphBody')
-      }}
-    </p>
-    <p class="m-0 text-sm text-muted-foreground">
-      {{
-        appliedAsApp
-          ? $t('builderToolbar.defaultModeAppliedAppPrompt')
-          : $t('builderToolbar.defaultModeAppliedGraphPrompt')
-      }}
-    </p>
-
-    <template #footer>
-      <template v-if="appliedAsApp">
-        <Button variant="muted-textonly" size="lg" @click="$emit('close')">
-          {{ $t('g.close') }}
-        </Button>
-        <Button variant="secondary" size="lg" @click="$emit('viewApp')">
-          {{ $t('builderToolbar.viewApp') }}
-        </Button>
-      </template>
-      <template v-else>
-        <Button variant="muted-textonly" size="lg" @click="$emit('viewApp')">
-          {{ $t('builderToolbar.viewApp') }}
-        </Button>
-        <Button variant="secondary" size="lg" @click="$emit('exitToWorkflow')">
-          {{ $t('builderToolbar.exitToWorkflow') }}
-        </Button>
-      </template>
-    </template>
-  </BuilderDialog>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-
-import BuilderDialog from './BuilderDialog.vue'
-
-defineProps<{
-  appliedAsApp: boolean
-}>()
-
-defineEmits<{
-  viewApp: []
-  close: []
-  exitToWorkflow: []
-}>()
-</script>

src/components/builder/BuilderDialog.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flex min-h-80 w-full min-w-116 flex-col rounded-2xl bg-base-background"
-  >
+  <div class="flex w-full min-w-116 flex-col rounded-2xl bg-base-background">
     <!-- Header -->
     <div
       class="flex h-12 items-center justify-between border-b border-border-default px-4"

src/components/builder/BuilderFooterToolbar.test.ts

@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
@@ -10,11 +11,11 @@ import BuilderFooterToolbar from '@/components/builder/BuilderFooterToolbar.vue'
 
 const mockSetMode = vi.hoisted(() => vi.fn())
 const mockExitBuilder = vi.hoisted(() => vi.fn())
-const mockShowDialog = vi.hoisted(() => vi.fn())
+const mockSave = vi.hoisted(() => vi.fn())
+const mockSaveAs = vi.hoisted(() => vi.fn())
 
 const mockState = {
-  mode: 'builder:select' as AppMode,
-  settingView: false
+  mode: 'builder:inputs' as AppMode
 }
 
 vi.mock('@/composables/useAppMode', () => ({
@@ -41,10 +42,37 @@ vi.mock('@/stores/dialogStore', () => ({
   })
 }))
 
-vi.mock('@/components/builder/useAppSetDefaultView', () => ({
-  useAppSetDefaultView: () => ({
-    settingView: computed(() => mockState.settingView),
-    showDialog: mockShowDialog
+const mockActiveWorkflow = ref<{
+  isTemporary: boolean
+  initialMode?: string
+  isModified?: boolean
+  changeTracker?: { checkState: () => void }
+} | null>({
+  isTemporary: true,
+  initialMode: 'app'
+})
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({
+    get activeWorkflow() {
+      return mockActiveWorkflow.value
+    }
+  })
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: { rootGraph: { extra: {} } }
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => null
+}))
+
+vi.mock('./useBuilderSave', () => ({
+  useBuilderSave: () => ({
+    save: mockSave,
+    saveAs: mockSaveAs,
+    isSaving: { value: false }
   })
 }))
 
@@ -54,7 +82,17 @@ const i18n = createI18n({
   messages: {
     en: {
       builderMenu: { exitAppBuilder: 'Exit app builder' },
-      g: { back: 'Back', next: 'Next' }
+      builderToolbar: {
+        viewApp: 'View app',
+        saveAs: 'Save as',
+        app: 'App',
+        nodeGraph: 'Node graph'
+      },
+      builderFooter: {
+        opensAsApp: 'Open as an {mode}',
+        opensAsGraph: 'Open as a {mode}'
+      },
+      g: { back: 'Back', next: 'Next', save: 'Save' }
     }
   }
 })
@@ -65,83 +103,114 @@ describe('BuilderFooterToolbar', () => {
     vi.clearAllMocks()
     mockState.mode = 'builder:inputs'
     mockHasOutputs.value = true
-    mockState.settingView = false
+    mockActiveWorkflow.value = { isTemporary: true, initialMode: 'app' }
   })
 
-  function mountComponent() {
-    return mount(BuilderFooterToolbar, {
+  function renderComponent() {
+    const user = userEvent.setup()
+
+    render(BuilderFooterToolbar, {
       global: {
         plugins: [i18n],
-        stubs: { Button: false }
+        stubs: {
+          Button: false,
+          BuilderOpensAsPopover: true,
+          ConnectOutputPopover: { template: '<div><slot /></div>' }
+        }
       }
     })
-  }
 
-  function getButtons(wrapper: ReturnType<typeof mountComponent>) {
-    const buttons = wrapper.findAll('button')
-    return {
-      exit: buttons[0],
-      back: buttons[1],
-      next: buttons[2]
-    }
+    return { user }
   }
 
   it('disables back on the first step', () => {
     mockState.mode = 'builder:inputs'
-    const { back } = getButtons(mountComponent())
-    expect(back.attributes('disabled')).toBeDefined()
+    renderComponent()
+    expect(screen.getByRole('button', { name: /back/i })).toBeDisabled()
   })
 
-  it('enables back on the second step', () => {
+  it('enables back on the arrange step', () => {
     mockState.mode = 'builder:arrange'
-    const { back } = getButtons(mountComponent())
-    expect(back.attributes('disabled')).toBeUndefined()
-  })
-
-  it('disables next on the setDefaultView step', () => {
-    mockState.settingView = true
-    const { next } = getButtons(mountComponent())
-    expect(next.attributes('disabled')).toBeDefined()
+    renderComponent()
+    expect(screen.getByRole('button', { name: /back/i })).toBeEnabled()
   })
 
   it('disables next on arrange step when no outputs', () => {
     mockState.mode = 'builder:arrange'
     mockHasOutputs.value = false
-    const { next } = getButtons(mountComponent())
-    expect(next.attributes('disabled')).toBeDefined()
+    renderComponent()
+    expect(screen.getByRole('button', { name: /next/i })).toBeDisabled()
   })
 
   it('enables next on inputs step', () => {
     mockState.mode = 'builder:inputs'
-    const { next } = getButtons(mountComponent())
-    expect(next.attributes('disabled')).toBeUndefined()
+    renderComponent()
+    expect(screen.getByRole('button', { name: /next/i })).toBeEnabled()
   })
 
   it('calls setMode on back click', async () => {
     mockState.mode = 'builder:arrange'
-    const { back } = getButtons(mountComponent())
-    await back.trigger('click')
+    const { user } = renderComponent()
+    await user.click(screen.getByRole('button', { name: /back/i }))
     expect(mockSetMode).toHaveBeenCalledWith('builder:outputs')
   })
 
   it('calls setMode on next click from inputs step', async () => {
     mockState.mode = 'builder:inputs'
-    const { next } = getButtons(mountComponent())
-    await next.trigger('click')
+    const { user } = renderComponent()
+    await user.click(screen.getByRole('button', { name: /next/i }))
     expect(mockSetMode).toHaveBeenCalledWith('builder:outputs')
   })
 
-  it('opens default view dialog on next click from arrange step', async () => {
-    mockState.mode = 'builder:arrange'
-    const { next } = getButtons(mountComponent())
-    await next.trigger('click')
-    expect(mockSetMode).toHaveBeenCalledWith('builder:arrange')
-    expect(mockShowDialog).toHaveBeenCalledOnce()
-  })
-
   it('calls exitBuilder on exit button click', async () => {
-    const { exit } = getButtons(mountComponent())
-    await exit.trigger('click')
+    const { user } = renderComponent()
+    await user.click(screen.getByRole('button', { name: /exit app builder/i }))
     expect(mockExitBuilder).toHaveBeenCalledOnce()
   })
+
+  it('calls setMode app on view app click', async () => {
+    const { user } = renderComponent()
+    await user.click(screen.getByRole('button', { name: /view app/i }))
+    expect(mockSetMode).toHaveBeenCalledWith('app')
+  })
+
+  it('shows "Save as" when workflow is temporary', () => {
+    mockActiveWorkflow.value = { isTemporary: true }
+    renderComponent()
+    expect(screen.getByRole('button', { name: 'Save as' })).toBeDefined()
+  })
+
+  it('shows "Save" when workflow is saved', () => {
+    mockActiveWorkflow.value = { isTemporary: false }
+    renderComponent()
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDefined()
+  })
+
+  it('calls saveAs when workflow is temporary', async () => {
+    mockActiveWorkflow.value = { isTemporary: true }
+    const { user } = renderComponent()
+    await user.click(screen.getByRole('button', { name: 'Save as' }))
+    expect(mockSaveAs).toHaveBeenCalledOnce()
+  })
+
+  it('calls save when workflow is saved and modified', async () => {
+    mockActiveWorkflow.value = { isTemporary: false, isModified: true }
+    const { user } = renderComponent()
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+    expect(mockSave).toHaveBeenCalledOnce()
+  })
+
+  it('disables save button when workflow has no unsaved changes', () => {
+    mockActiveWorkflow.value = { isTemporary: false, isModified: false }
+    renderComponent()
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+  })
+
+  it('does not call save when no outputs', async () => {
+    mockHasOutputs.value = false
+    const { user } = renderComponent()
+    await user.click(screen.getByRole('button', { name: 'Save as' }))
+    expect(mockSave).not.toHaveBeenCalled()
+    expect(mockSaveAs).not.toHaveBeenCalled()
+  })
 })

src/components/builder/BuilderFooterToolbar.vue

@@ -1,46 +1,160 @@
 <template>
-  <nav
-    class="fixed bottom-4 left-1/2 z-1000 flex -translate-x-1/2 items-center gap-2 rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
+  <div
+    class="fixed bottom-4 left-1/2 z-1000 flex -translate-x-1/2 flex-col items-center"
   >
-    <Button variant="textonly" size="lg" @click="onExitBuilder">
-      {{ t('builderMenu.exitAppBuilder') }}
-    </Button>
-    <Button
-      variant="textonly"
-      size="lg"
-      :disabled="isFirstStep"
-      @click="goBack"
+    <!-- "Opens as" attachment tab -->
+    <BuilderOpensAsPopover
+      v-if="isSaved"
+      :is-app-mode="isAppMode"
+      @select="onSetDefaultView"
+    />
+
+    <!-- Main toolbar -->
+    <nav
+      class="flex items-center gap-2 rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
     >
-      <i class="icon-[lucide--chevron-left]" aria-hidden="true" />
-      {{ t('g.back') }}
-    </Button>
-    <Button size="lg" :disabled="isLastStep" @click="goNext">
-      {{ t('g.next') }}
-      <i class="icon-[lucide--chevron-right]" aria-hidden="true" />
-    </Button>
-  </nav>
+      <Button variant="textonly" size="lg" @click="onExitBuilder">
+        {{ t('builderMenu.exitAppBuilder') }}
+      </Button>
+      <Button variant="secondary" size="lg" @click="onViewApp">
+        {{ t('builderToolbar.viewApp') }}
+      </Button>
+      <Button
+        variant="textonly"
+        size="lg"
+        :disabled="isFirstStep"
+        @click="goBack"
+      >
+        <i class="icon-[lucide--chevron-left]" aria-hidden="true" />
+        {{ t('g.back') }}
+      </Button>
+      <Button size="lg" :disabled="isLastStep" @click="goNext">
+        {{ t('g.next') }}
+        <i class="icon-[lucide--chevron-right]" aria-hidden="true" />
+      </Button>
+      <ConnectOutputPopover
+        v-if="!hasOutputs"
+        :is-select-active="isSelectStep"
+        @switch="navigateToStep('builder:outputs')"
+      >
+        <Button size="lg" :class="cn('w-24', disabledSaveClasses)">
+          {{ isSaved ? t('g.save') : t('builderToolbar.saveAs') }}
+        </Button>
+      </ConnectOutputPopover>
+      <ButtonGroup
+        v-else-if="isSaved"
+        class="w-24 rounded-lg bg-secondary-background has-[[data-save-chevron]:hover]:bg-secondary-background-hover"
+      >
+        <Button
+          size="lg"
+          :disabled="!isModified"
+          class="flex-1"
+          :class="isModified ? activeSaveClasses : disabledSaveClasses"
+          @click="save()"
+        >
+          {{ t('g.save') }}
+        </Button>
+        <DropdownMenuRoot>
+          <DropdownMenuTrigger as-child>
+            <Button
+              size="lg"
+              :aria-label="t('builderToolbar.saveAs')"
+              data-save-chevron
+              class="w-6 rounded-l-none border-l border-border-default px-0"
+            >
+              <i
+                class="icon-[lucide--chevron-down] size-4"
+                aria-hidden="true"
+              />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent
+              align="end"
+              :side-offset="4"
+              class="z-1001 min-w-36 rounded-lg border border-border-subtle bg-base-background p-1 shadow-interface"
+            >
+              <DropdownMenuItem as-child @select="saveAs()">
+                <Button
+                  variant="secondary"
+                  size="lg"
+                  class="w-full justify-start font-normal"
+                >
+                  {{ t('builderToolbar.saveAs') }}
+                </Button>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenuRoot>
+      </ButtonGroup>
+      <Button v-else size="lg" :class="activeSaveClasses" @click="saveAs()">
+        {{ t('builderToolbar.saveAs') }}
+      </Button>
+    </nav>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger
+} from 'reka-ui'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
+import ButtonGroup from '@/components/ui/button-group/ButtonGroup.vue'
 import { useAppMode } from '@/composables/useAppMode'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { cn } from '@/utils/tailwindUtil'
 
+import BuilderOpensAsPopover from './BuilderOpensAsPopover.vue'
+import { setWorkflowDefaultView } from './builderViewOptions'
+import ConnectOutputPopover from './ConnectOutputPopover.vue'
+import { useBuilderSave } from './useBuilderSave'
 import { useBuilderSteps } from './useBuilderSteps'
 
 const { t } = useI18n()
 const appModeStore = useAppModeStore()
 const dialogStore = useDialogStore()
-const { isBuilderMode } = useAppMode()
+const workflowStore = useWorkflowStore()
+const { isBuilderMode, setMode } = useAppMode()
 const { hasOutputs } = storeToRefs(appModeStore)
-const { isFirstStep, isLastStep, goBack, goNext } = useBuilderSteps({
+const {
+  isFirstStep,
+  isLastStep,
+  isSelectStep,
+  navigateToStep,
+  goBack,
+  goNext
+} = useBuilderSteps({
   hasOutputs
 })
+const { save, saveAs } = useBuilderSave()
+
+const isSaved = computed(
+  () => workflowStore.activeWorkflow?.isTemporary === false
+)
+
+const activeSaveClasses =
+  'bg-interface-builder-mode-button-background text-interface-builder-mode-button-foreground hover:bg-interface-builder-mode-button-background/80'
+const disabledSaveClasses =
+  'bg-secondary-background text-muted-foreground/50 disabled:opacity-100'
+
+const isModified = computed(
+  () => workflowStore.activeWorkflow?.isModified === true
+)
+
+const isAppMode = computed(
+  () => workflowStore.activeWorkflow?.initialMode !== 'graph'
+)
 
 useEventListener(window, 'keydown', (e: KeyboardEvent) => {
   if (
@@ -60,4 +174,14 @@ useEventListener(window, 'keydown', (e: KeyboardEvent) => {
 function onExitBuilder() {
   appModeStore.exitBuilder()
 }
+
+function onViewApp() {
+  setMode('app')
+}
+
+function onSetDefaultView(openAsApp: boolean) {
+  const workflow = workflowStore.activeWorkflow
+  if (!workflow) return
+  setWorkflowDefaultView(workflow, openAsApp)
+}
 </script>

src/components/builder/BuilderOpensAsPopover.vue

@@ -0,0 +1,84 @@
+<template>
+  <PopoverRoot>
+    <PopoverAnchor as-child>
+      <div
+        data-testid="builder-opens-as"
+        class="flex h-8 min-w-64 items-center justify-center gap-2 rounded-t-2xl bg-interface-builder-mode-footer-background px-4 text-sm text-interface-builder-mode-button-foreground"
+      >
+        <i :class="cn(currentModeIcon, 'size-4')" aria-hidden="true" />
+        <i18n-t
+          :keypath="
+            isAppMode
+              ? 'builderFooter.opensAsApp'
+              : 'builderFooter.opensAsGraph'
+          "
+          tag="span"
+        >
+          <template #mode>
+            <PopoverTrigger as-child>
+              <Button
+                class="-ml-0.5 h-6 gap-1 rounded-md border-none bg-transparent px-1.5 text-sm text-interface-builder-mode-button-foreground hover:bg-interface-builder-mode-button-background/70"
+              >
+                {{
+                  isAppMode
+                    ? t('builderToolbar.app').toLowerCase()
+                    : t('builderToolbar.nodeGraph').toLowerCase()
+                }}
+                <i
+                  class="icon-[lucide--chevron-down] size-3.5"
+                  aria-hidden="true"
+                />
+              </Button>
+            </PopoverTrigger>
+          </template>
+        </i18n-t>
+        <PopoverPortal>
+          <PopoverContent
+            side="top"
+            :side-offset="5"
+            :collision-padding="10"
+            class="z-1700 rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[transform,opacity]"
+          >
+            <ViewTypeRadioGroup
+              :model-value="isAppMode"
+              :aria-label="t('builderToolbar.defaultViewLabel')"
+              size="sm"
+              @update:model-value="$emit('select', $event)"
+            />
+          </PopoverContent>
+        </PopoverPortal>
+      </div>
+    </PopoverAnchor>
+  </PopoverRoot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  PopoverAnchor,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger
+} from 'reka-ui'
+import { useI18n } from 'vue-i18n'
+import Button from '@/components/ui/button/Button.vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+import ViewTypeRadioGroup from './ViewTypeRadioGroup.vue'
+
+const { isAppMode } = defineProps<{
+  isAppMode: boolean
+}>()
+
+defineEmits<{
+  select: [openAsApp: boolean]
+}>()
+
+const { t } = useI18n()
+
+const currentModeIcon = computed(() =>
+  isAppMode ? 'icon-[lucide--app-window]' : 'icon-[comfy--workflow]'
+)
+</script>

src/components/builder/BuilderSaveDialogContent.vue

@@ -0,0 +1,71 @@
+<template>
+  <BuilderDialog @close="emit('close')">
+    <template #title>
+      {{ $t('builderToolbar.saveAs') }}
+    </template>
+
+    <div class="flex flex-col gap-2">
+      <label :for="inputId" class="text-sm text-muted-foreground">
+        {{ $t('builderToolbar.filename') }}
+      </label>
+      <input
+        :id="inputId"
+        v-model="filename"
+        autofocus
+        type="text"
+        class="focus-visible:ring-ring flex h-10 min-h-8 items-center self-stretch rounded-lg border-none bg-secondary-background pl-4 text-sm text-base-foreground"
+        @keydown.enter="
+          filename.trim() && emit('save', filename.trim(), openAsApp)
+        "
+      />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label :id="radioGroupLabelId" class="text-sm text-muted-foreground">
+        {{ $t('builderToolbar.defaultViewLabel') }}
+      </label>
+      <ViewTypeRadioGroup
+        v-model="openAsApp"
+        :aria-labelledby="radioGroupLabelId"
+      />
+    </div>
+
+    <template #footer>
+      <Button variant="muted-textonly" size="lg" @click="emit('close')">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button
+        variant="secondary"
+        size="lg"
+        :disabled="!filename.trim()"
+        @click="emit('save', filename.trim(), openAsApp)"
+      >
+        {{ $t('g.save') }}
+      </Button>
+    </template>
+  </BuilderDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, useId } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+
+import BuilderDialog from './BuilderDialog.vue'
+import ViewTypeRadioGroup from './ViewTypeRadioGroup.vue'
+
+const { defaultFilename, defaultOpenAsApp = true } = defineProps<{
+  defaultFilename: string
+  defaultOpenAsApp?: boolean
+}>()
+
+const emit = defineEmits<{
+  save: [filename: string, openAsApp: boolean]
+  close: []
+}>()
+
+const inputId = useId()
+const radioGroupLabelId = useId()
+const filename = ref(defaultFilename)
+const openAsApp = ref(defaultOpenAsApp)
+</script>

src/components/builder/BuilderToolbar.vue

@@ -23,55 +23,21 @@
           <StepLabel :step />
         </button>
 
-        <div class="mx-1 h-px w-4 bg-border-default" role="separator" />
-      </template>
-
-      <!-- Default view -->
-      <ConnectOutputPopover
-        v-if="!hasOutputs"
-        :is-select-active="isSelectStep"
-        @switch="navigateToStep('builder:outputs')"
-      >
-        <button :class="cn(stepClasses, 'bg-transparent opacity-30')">
-          <StepBadge
-            :step="defaultViewStep"
-            :index="steps.length"
-            :model-value="activeStep"
-          />
-          <StepLabel :step="defaultViewStep" />
-        </button>
-      </ConnectOutputPopover>
-      <button
-        v-else
-        :class="
-          cn(
-            stepClasses,
-            activeStep === 'setDefaultView'
-              ? 'bg-interface-builder-mode-background'
-              : 'bg-transparent hover:bg-secondary-background'
-          )
-        "
-        @click="navigateToStep('setDefaultView')"
-      >
-        <StepBadge
-          :step="defaultViewStep"
-          :index="steps.length"
-          :model-value="activeStep"
+        <div
+          v-if="index < steps.length - 1"
+          class="mx-1 h-px w-4 bg-border-default"
+          role="separator"
         />
-        <StepLabel :step="defaultViewStep" />
-      </button>
+      </template>
     </div>
   </nav>
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
-import { useAppModeStore } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import ConnectOutputPopover from './ConnectOutputPopover.vue'
 import StepBadge from './StepBadge.vue'
 import StepLabel from './StepLabel.vue'
 import type { BuilderToolbarStep } from './types'
@@ -79,9 +45,7 @@ import type { BuilderStepId } from './useBuilderSteps'
 import { useBuilderSteps } from './useBuilderSteps'
 
 const { t } = useI18n()
-const appModeStore = useAppModeStore()
-const { hasOutputs } = storeToRefs(appModeStore)
-const { activeStep, isSelectStep, navigateToStep } = useBuilderSteps()
+const { activeStep, navigateToStep } = useBuilderSteps()
 
 const stepClasses =
   'inline-flex h-14 min-h-8 cursor-pointer items-center gap-3 rounded-lg py-2 pr-4 pl-2 transition-colors border-none'
@@ -107,11 +71,5 @@ const arrangeStep: BuilderToolbarStep<BuilderStepId> = {
   icon: 'icon-[lucide--layout-panel-left]'
 }
 
-const defaultViewStep: BuilderToolbarStep<BuilderStepId> = {
-  id: 'setDefaultView',
-  title: t('builderToolbar.defaultView'),
-  subtitle: t('builderToolbar.defaultViewDescription'),
-  icon: 'icon-[lucide--eye]'
-}
 const steps = [selectInputsStep, selectOutputsStep, arrangeStep]
 </script>

src/components/builder/ConnectOutputPopover.vue

@@ -5,7 +5,8 @@
     </PopoverTrigger>
     <PopoverContent
       side="bottom"
-      :side-offset="8"
+      align="end"
+      :side-offset="18"
       :collision-padding="10"
       class="data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-1001 w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity]"
     >

src/components/builder/DefaultViewDialogContent.vue

@@ -1,97 +0,0 @@
-<template>
-  <BuilderDialog @close="$emit('close')">
-    <template #title>
-      {{ $t('builderToolbar.defaultViewTitle') }}
-    </template>
-
-    <div class="flex flex-col gap-2">
-      <label class="text-sm text-muted-foreground">
-        {{ $t('builderToolbar.defaultViewLabel') }}
-      </label>
-      <div role="radiogroup" class="flex flex-col gap-2">
-        <Button
-          v-for="option in viewTypeOptions"
-          :key="option.value.toString()"
-          role="radio"
-          :aria-checked="openAsApp === option.value"
-          :class="
-            cn(
-              itemClasses,
-              openAsApp === option.value && 'bg-secondary-background'
-            )
-          "
-          variant="textonly"
-          @click="openAsApp = option.value"
-        >
-          <div
-            class="flex size-8 min-h-8 items-center justify-center rounded-lg bg-secondary-background-hover"
-          >
-            <i :class="cn(option.icon, 'size-4')" />
-          </div>
-          <div class="mx-2 flex flex-1 flex-col items-start">
-            <span class="text-sm font-medium text-base-foreground">
-              {{ option.title }}
-            </span>
-            <span class="text-xs text-muted-foreground">
-              {{ option.subtitle }}
-            </span>
-          </div>
-          <i
-            v-if="openAsApp === option.value"
-            class="icon-[lucide--check] size-4 text-base-foreground"
-          />
-        </Button>
-      </div>
-    </div>
-
-    <template #footer>
-      <Button variant="muted-textonly" size="lg" @click="$emit('close')">
-        {{ $t('g.cancel') }}
-      </Button>
-      <Button variant="secondary" size="lg" @click="$emit('apply', openAsApp)">
-        {{ $t('g.apply') }}
-      </Button>
-    </template>
-  </BuilderDialog>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { cn } from '@/utils/tailwindUtil'
-
-import BuilderDialog from './BuilderDialog.vue'
-
-const { t } = useI18n()
-
-const { initialOpenAsApp = true } = defineProps<{
-  initialOpenAsApp?: boolean
-}>()
-
-defineEmits<{
-  apply: [openAsApp: boolean]
-  close: []
-}>()
-
-const openAsApp = ref(initialOpenAsApp)
-
-const viewTypeOptions = [
-  {
-    value: true,
-    icon: 'icon-[lucide--app-window]',
-    title: t('builderToolbar.app'),
-    subtitle: t('builderToolbar.appDescription')
-  },
-  {
-    value: false,
-    icon: 'icon-[comfy--workflow]',
-    title: t('builderToolbar.nodeGraph'),
-    subtitle: t('builderToolbar.nodeGraphDescription')
-  }
-]
-
-const itemClasses =
-  'flex h-14 cursor-pointer items-center gap-2 self-stretch rounded-lg border-none bg-transparent py-2 pr-4 pl-2 text-base-foreground transition-colors hover:bg-secondary-background'
-</script>

src/components/builder/ViewTypeRadioGroup.vue

@@ -0,0 +1,74 @@
+<template>
+  <div role="radiogroup" v-bind="$attrs" :class="cn('flex flex-col', gapClass)">
+    <Button
+      v-for="option in viewTypeOptions"
+      :key="option.value.toString()"
+      role="radio"
+      :aria-checked="modelValue === option.value"
+      :class="
+        cn(
+          'flex cursor-pointer items-center gap-2 self-stretch rounded-lg border-none bg-transparent py-2 pr-4 pl-2 text-base-foreground transition-colors hover:bg-secondary-background',
+          heightClass,
+          modelValue === option.value && 'bg-secondary-background'
+        )
+      "
+      variant="textonly"
+      @click="
+        modelValue !== option.value && emit('update:modelValue', option.value)
+      "
+    >
+      <div
+        class="flex size-8 min-h-8 items-center justify-center rounded-lg bg-secondary-background-hover"
+      >
+        <i :class="cn(option.icon, 'size-4')" aria-hidden="true" />
+      </div>
+      <div class="mx-2 flex flex-1 flex-col items-start">
+        <span class="text-sm font-medium text-base-foreground">
+          {{ option.title }}
+        </span>
+        <span class="text-xs text-muted-foreground">
+          {{ option.subtitle }}
+        </span>
+      </div>
+      <i
+        v-if="modelValue === option.value"
+        class="icon-[lucide--check] size-4 text-base-foreground"
+        aria-hidden="true"
+      />
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const { size = 'md' } = defineProps<{
+  modelValue: boolean
+  size?: 'sm' | 'md'
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const viewTypeOptions = [
+  {
+    value: true,
+    icon: 'icon-[lucide--app-window]',
+    title: t('builderToolbar.app'),
+    subtitle: t('builderToolbar.appDescription')
+  },
+  {
+    value: false,
+    icon: 'icon-[comfy--workflow]',
+    title: t('builderToolbar.nodeGraph'),
+    subtitle: t('builderToolbar.nodeGraphDescription')
+  }
+]
+const heightClass = size === 'sm' ? 'h-12' : 'h-14'
+const gapClass = size === 'sm' ? 'gap-1' : 'gap-2'
+</script>

src/components/builder/builderViewOptions.test.ts

@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { createMockLoadedWorkflow } from '@/utils/__tests__/litegraphTestUtils'
+
+import type { setWorkflowDefaultView as SetWorkflowDefaultViewFn } from './builderViewOptions'
+
+const mockTrackDefaultViewSet = vi.hoisted(() => vi.fn())
+
+vi.mock('@/i18n', () => ({ t: (key: string) => key }))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({ trackDefaultViewSet: mockTrackDefaultViewSet })
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: { rootGraph: { extra: {} } }
+}))
+
+describe('setWorkflowDefaultView', () => {
+  let setWorkflowDefaultView: typeof SetWorkflowDefaultViewFn
+  let app: { rootGraph: { extra: Record<string, unknown> } }
+
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    const mod = await import('./builderViewOptions')
+    setWorkflowDefaultView = mod.setWorkflowDefaultView
+    app = (await import('@/scripts/app')).app as typeof app
+    app.rootGraph.extra = {}
+  })
+
+  it('sets initialMode to app when openAsApp is true', () => {
+    const workflow = createMockLoadedWorkflow({ initialMode: undefined })
+    setWorkflowDefaultView(workflow, true)
+    expect(workflow.initialMode).toBe('app')
+  })
+
+  it('sets initialMode to graph when openAsApp is false', () => {
+    const workflow = createMockLoadedWorkflow({ initialMode: undefined })
+    setWorkflowDefaultView(workflow, false)
+    expect(workflow.initialMode).toBe('graph')
+  })
+
+  it('sets linearMode on rootGraph.extra', () => {
+    const workflow = createMockLoadedWorkflow()
+    setWorkflowDefaultView(workflow, true)
+    expect(app.rootGraph.extra.linearMode).toBe(true)
+
+    setWorkflowDefaultView(workflow, false)
+    expect(app.rootGraph.extra.linearMode).toBe(false)
+  })
+
+  it('calls changeTracker.checkState', () => {
+    const workflow = createMockLoadedWorkflow()
+    setWorkflowDefaultView(workflow, true)
+    expect(workflow.changeTracker.checkState).toHaveBeenCalledOnce()
+  })
+
+  it('tracks telemetry with correct default_view', () => {
+    const workflow = createMockLoadedWorkflow()
+    setWorkflowDefaultView(workflow, true)
+    expect(mockTrackDefaultViewSet).toHaveBeenCalledWith({
+      default_view: 'app'
+    })
+
+    setWorkflowDefaultView(workflow, false)
+    expect(mockTrackDefaultViewSet).toHaveBeenCalledWith({
+      default_view: 'graph'
+    })
+  })
+})

src/components/builder/builderViewOptions.ts

@@ -0,0 +1,16 @@
+import { useTelemetry } from '@/platform/telemetry'
+import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/comfyWorkflow'
+import { app } from '@/scripts/app'
+
+export function setWorkflowDefaultView(
+  workflow: LoadedComfyWorkflow,
+  openAsApp: boolean
+) {
+  workflow.initialMode = openAsApp ? 'app' : 'graph'
+  const extra = (app.rootGraph.extra ??= {})
+  extra.linearMode = openAsApp
+  workflow.changeTracker?.checkState()
+  useTelemetry()?.trackDefaultViewSet({
+    default_view: openAsApp ? 'app' : 'graph'
+  })
+}

src/components/builder/useAppSetDefaultView.test.ts

@@ -1,240 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-const mockDialogService = vi.hoisted(() => ({
-  showLayoutDialog: vi.fn()
-}))
-
-const mockDialogStore = vi.hoisted(() => ({
-  closeDialog: vi.fn(),
-  isDialogOpen: vi.fn<(key: string) => boolean>().mockReturnValue(false)
-}))
-
-const mockWorkflowStore = vi.hoisted(() => ({
-  activeWorkflow: null as {
-    initialMode?: string | null
-    changeTracker?: { checkState: () => void }
-  } | null
-}))
-
-const mockApp = vi.hoisted(() => ({
-  rootGraph: { extra: {} as Record<string, unknown> }
-}))
-
-const mockSetMode = vi.hoisted(() => vi.fn())
-
-const mockAppModeStore = vi.hoisted(() => ({
-  exitBuilder: vi.fn()
-}))
-
-vi.mock('@/services/dialogService', () => ({
-  useDialogService: () => mockDialogService
-}))
-
-vi.mock('@/stores/dialogStore', () => ({
-  useDialogStore: () => mockDialogStore
-}))
-
-vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
-  useWorkflowStore: () => mockWorkflowStore
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: mockApp
-}))
-
-vi.mock('@/composables/useAppMode', () => ({
-  useAppMode: () => ({ setMode: mockSetMode })
-}))
-
-vi.mock('@/stores/appModeStore', () => ({
-  useAppModeStore: () => mockAppModeStore
-}))
-
-vi.mock('./DefaultViewDialogContent.vue', () => ({
-  default: { name: 'MockDefaultViewDialogContent' }
-}))
-
-vi.mock('./BuilderDefaultModeAppliedDialogContent.vue', () => ({
-  default: { name: 'MockBuilderDefaultModeAppliedDialogContent' }
-}))
-
-import { useAppSetDefaultView } from './useAppSetDefaultView'
-
-describe('useAppSetDefaultView', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockWorkflowStore.activeWorkflow = null
-    mockApp.rootGraph.extra = {}
-  })
-
-  describe('settingView', () => {
-    it('reflects dialogStore.isDialogOpen', () => {
-      mockDialogStore.isDialogOpen.mockReturnValue(true)
-      const { settingView } = useAppSetDefaultView()
-      expect(settingView.value).toBe(true)
-    })
-  })
-
-  describe('showDialog', () => {
-    it('opens dialog via dialogService', () => {
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      expect(mockDialogService.showLayoutDialog).toHaveBeenCalledOnce()
-    })
-
-    it('passes initialOpenAsApp true when initialMode is not graph', () => {
-      mockWorkflowStore.activeWorkflow = { initialMode: 'app' }
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      expect(call.props.initialOpenAsApp).toBe(true)
-    })
-
-    it('passes initialOpenAsApp false when initialMode is graph', () => {
-      mockWorkflowStore.activeWorkflow = { initialMode: 'graph' }
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      expect(call.props.initialOpenAsApp).toBe(false)
-    })
-
-    it('passes initialOpenAsApp true when no active workflow', () => {
-      mockWorkflowStore.activeWorkflow = null
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      expect(call.props.initialOpenAsApp).toBe(true)
-    })
-  })
-
-  describe('handleApply', () => {
-    it('sets initialMode to app when openAsApp is true', () => {
-      const workflow = { initialMode: null as string | null }
-      mockWorkflowStore.activeWorkflow = workflow
-
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      call.props.onApply(true)
-
-      expect(workflow.initialMode).toBe('app')
-    })
-
-    it('sets initialMode to graph when openAsApp is false', () => {
-      const workflow = { initialMode: null as string | null }
-      mockWorkflowStore.activeWorkflow = workflow
-
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      call.props.onApply(false)
-
-      expect(workflow.initialMode).toBe('graph')
-    })
-
-    it('sets linearMode on rootGraph.extra', () => {
-      mockWorkflowStore.activeWorkflow = { initialMode: null }
-
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      call.props.onApply(true)
-
-      expect(mockApp.rootGraph.extra.linearMode).toBe(true)
-    })
-
-    it('closes dialog after applying', () => {
-      mockWorkflowStore.activeWorkflow = { initialMode: null }
-
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      call.props.onApply(true)
-
-      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
-        key: 'builder-default-view'
-      })
-    })
-
-    it('shows confirmation dialog after applying', () => {
-      mockWorkflowStore.activeWorkflow = { initialMode: null }
-
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      call.props.onApply(true)
-
-      expect(mockDialogService.showLayoutDialog).toHaveBeenCalledTimes(2)
-      const confirmCall = mockDialogService.showLayoutDialog.mock.calls[1][0]
-      expect(confirmCall.key).toBe('builder-default-view-applied')
-      expect(confirmCall.props.appliedAsApp).toBe(true)
-    })
-
-    it('passes appliedAsApp false to confirmation dialog when graph', () => {
-      mockWorkflowStore.activeWorkflow = { initialMode: null }
-
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      call.props.onApply(false)
-
-      const confirmCall = mockDialogService.showLayoutDialog.mock.calls[1][0]
-      expect(confirmCall.props.appliedAsApp).toBe(false)
-    })
-  })
-
-  describe('applied dialog', () => {
-    function applyAndGetConfirmDialog(openAsApp: boolean) {
-      mockWorkflowStore.activeWorkflow = { initialMode: null }
-
-      const { showDialog } = useAppSetDefaultView()
-      showDialog()
-
-      const applyCall = mockDialogService.showLayoutDialog.mock.calls[0][0]
-      applyCall.props.onApply(openAsApp)
-
-      return mockDialogService.showLayoutDialog.mock.calls[1][0]
-    }
-
-    it('onViewApp sets mode to app and closes dialog', () => {
-      const confirmCall = applyAndGetConfirmDialog(true)
-      confirmCall.props.onViewApp()
-
-      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
-        key: 'builder-default-view-applied'
-      })
-      expect(mockSetMode).toHaveBeenCalledWith('app')
-    })
-
-    it('onExitToWorkflow exits builder and closes dialog', () => {
-      const confirmCall = applyAndGetConfirmDialog(true)
-      confirmCall.props.onExitToWorkflow()
-
-      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
-        key: 'builder-default-view-applied'
-      })
-      expect(mockAppModeStore.exitBuilder).toHaveBeenCalledOnce()
-    })
-
-    it('onClose closes confirmation dialog', () => {
-      const confirmCall = applyAndGetConfirmDialog(true)
-
-      mockDialogStore.closeDialog.mockClear()
-      confirmCall.props.onClose()
-
-      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
-        key: 'builder-default-view-applied'
-      })
-    })
-  })
-})

src/components/builder/useAppSetDefaultView.ts

@@ -1,82 +0,0 @@
-import { computed } from 'vue'
-
-import { useAppMode } from '@/composables/useAppMode'
-import { useTelemetry } from '@/platform/telemetry'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { app } from '@/scripts/app'
-import { useDialogService } from '@/services/dialogService'
-import { useDialogStore } from '@/stores/dialogStore'
-
-import BuilderDefaultModeAppliedDialogContent from './BuilderDefaultModeAppliedDialogContent.vue'
-import DefaultViewDialogContent from './DefaultViewDialogContent.vue'
-import { useAppModeStore } from '@/stores/appModeStore'
-
-const DIALOG_KEY = 'builder-default-view'
-const APPLIED_DIALOG_KEY = 'builder-default-view-applied'
-
-export function useAppSetDefaultView() {
-  const workflowStore = useWorkflowStore()
-  const dialogService = useDialogService()
-  const dialogStore = useDialogStore()
-  const appModeStore = useAppModeStore()
-  const { setMode } = useAppMode()
-
-  const settingView = computed(() => dialogStore.isDialogOpen(DIALOG_KEY))
-
-  function showDialog() {
-    dialogService.showLayoutDialog({
-      key: DIALOG_KEY,
-      component: DefaultViewDialogContent,
-      props: {
-        initialOpenAsApp: workflowStore.activeWorkflow?.initialMode !== 'graph',
-        onApply: handleApply,
-        onClose: closeDialog
-      }
-    })
-  }
-
-  function handleApply(openAsApp: boolean) {
-    const workflow = workflowStore.activeWorkflow
-    if (!workflow) return
-
-    workflow.initialMode = openAsApp ? 'app' : 'graph'
-    const extra = (app.rootGraph.extra ??= {})
-    extra.linearMode = openAsApp
-    workflow.changeTracker?.checkState()
-    useTelemetry()?.trackDefaultViewSet({
-      default_view: openAsApp ? 'app' : 'graph'
-    })
-    closeDialog()
-    showAppliedDialog(openAsApp)
-  }
-
-  function showAppliedDialog(appliedAsApp: boolean) {
-    dialogService.showLayoutDialog({
-      key: APPLIED_DIALOG_KEY,
-      component: BuilderDefaultModeAppliedDialogContent,
-      props: {
-        appliedAsApp,
-        onViewApp: () => {
-          closeAppliedDialog()
-          useTelemetry()?.trackEnterLinear({ source: 'app_builder' })
-          setMode('app')
-        },
-        onExitToWorkflow: () => {
-          closeAppliedDialog()
-          appModeStore.exitBuilder()
-        },
-        onClose: closeAppliedDialog
-      }
-    })
-  }
-
-  function closeDialog() {
-    dialogStore.closeDialog({ key: DIALOG_KEY })
-  }
-
-  function closeAppliedDialog() {
-    dialogStore.closeDialog({ key: APPLIED_DIALOG_KEY })
-  }
-
-  return { settingView, showDialog }
-}

src/components/builder/useBuilderSave.test.ts

@@ -0,0 +1,337 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useBuilderSave } from './useBuilderSave'
+
+const mockSetMode = vi.hoisted(() => vi.fn())
+const mockToastErrorHandler = vi.hoisted(() => vi.fn())
+const mockTrackEnterLinear = vi.hoisted(() => vi.fn())
+const mockSaveWorkflow = vi.hoisted(() => vi.fn<() => Promise<void>>())
+const mockSaveWorkflowAs = vi.hoisted(() =>
+  vi.fn<() => Promise<boolean | null>>()
+)
+const mockShowLayoutDialog = vi.hoisted(() => vi.fn())
+const mockShowConfirmDialog = vi.hoisted(() => vi.fn())
+const mockCloseDialog = vi.hoisted(() => vi.fn())
+const mockSetWorkflowDefaultView = vi.hoisted(() => vi.fn())
+const mockExitBuilder = vi.hoisted(() => vi.fn())
+
+const mockActiveWorkflow = ref<{
+  filename: string
+  initialMode?: string | null
+} | null>(null)
+
+vi.mock('@/composables/useAppMode', () => ({
+  useAppMode: () => ({ setMode: mockSetMode })
+}))
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({ toastErrorHandler: mockToastErrorHandler })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({ trackEnterLinear: mockTrackEnterLinear })
+}))
+
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
+  useWorkflowService: () => ({
+    saveWorkflow: mockSaveWorkflow,
+    saveWorkflowAs: mockSaveWorkflowAs
+  })
+}))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({
+    get activeWorkflow() {
+      return mockActiveWorkflow.value
+    }
+  })
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({ showLayoutDialog: mockShowLayoutDialog })
+}))
+
+vi.mock('@/stores/appModeStore', () => ({
+  useAppModeStore: () => ({ exitBuilder: mockExitBuilder })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({ closeDialog: mockCloseDialog })
+}))
+
+vi.mock('./builderViewOptions', () => ({
+  setWorkflowDefaultView: mockSetWorkflowDefaultView
+}))
+
+vi.mock('@/components/dialog/confirm/confirmDialog', () => ({
+  showConfirmDialog: mockShowConfirmDialog
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string, params?: Record<string, string>) => {
+    if (params) return `${key}:${JSON.stringify(params)}`
+    return key
+  }
+}))
+
+vi.mock('./BuilderSaveDialogContent.vue', () => ({
+  default: { template: '<div />' }
+}))
+
+const SAVE_DIALOG_KEY = 'builder-save'
+const SUCCESS_DIALOG_KEY = 'builder-save-success'
+
+describe('useBuilderSave', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockActiveWorkflow.value = null
+  })
+
+  describe('save()', () => {
+    it('does nothing when there is no active workflow', async () => {
+      const { save } = useBuilderSave()
+
+      await save()
+
+      expect(mockSaveWorkflow).not.toHaveBeenCalled()
+    })
+
+    it('saves workflow directly without showing a dialog', async () => {
+      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
+      mockSaveWorkflow.mockResolvedValueOnce(undefined)
+      const { save } = useBuilderSave()
+
+      await save()
+
+      expect(mockSaveWorkflow).toHaveBeenCalledOnce()
+      expect(mockShowConfirmDialog).not.toHaveBeenCalled()
+    })
+
+    it('toasts error on failure', async () => {
+      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
+      const error = new Error('save failed')
+      mockSaveWorkflow.mockRejectedValueOnce(error)
+      const { save } = useBuilderSave()
+
+      await save()
+
+      expect(mockToastErrorHandler).toHaveBeenCalledWith(error)
+      expect(mockShowConfirmDialog).not.toHaveBeenCalled()
+    })
+
+    it('prevents concurrent saves', async () => {
+      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
+      let resolveSave!: () => void
+      mockSaveWorkflow.mockReturnValueOnce(
+        new Promise<void>((r) => {
+          resolveSave = r
+        })
+      )
+      const { save, isSaving } = useBuilderSave()
+
+      const firstSave = save()
+      expect(isSaving.value).toBe(true)
+
+      await save()
+      expect(mockSaveWorkflow).toHaveBeenCalledOnce()
+
+      resolveSave()
+      await firstSave
+      expect(isSaving.value).toBe(false)
+    })
+  })
+
+  describe('saveAs()', () => {
+    it('does nothing when there is no active workflow', () => {
+      mockActiveWorkflow.value = null
+      const { saveAs } = useBuilderSave()
+
+      saveAs()
+
+      expect(mockShowLayoutDialog).not.toHaveBeenCalled()
+    })
+
+    it('opens save dialog with correct defaultFilename and defaultOpenAsApp', () => {
+      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
+      const { saveAs } = useBuilderSave()
+
+      saveAs()
+
+      expect(mockShowLayoutDialog).toHaveBeenCalledOnce()
+      const { key, props } = mockShowLayoutDialog.mock.calls[0][0]
+      expect(key).toBe(SAVE_DIALOG_KEY)
+      expect(props.defaultFilename).toBe('my-workflow')
+      expect(props.defaultOpenAsApp).toBe(true)
+    })
+
+    it('passes defaultOpenAsApp: false when initialMode is graph', () => {
+      mockActiveWorkflow.value = {
+        filename: 'my-workflow',
+        initialMode: 'graph'
+      }
+      const { saveAs } = useBuilderSave()
+
+      saveAs()
+
+      const { props } = mockShowLayoutDialog.mock.calls[0][0]
+      expect(props.defaultOpenAsApp).toBe(false)
+    })
+  })
+
+  describe('save dialog callbacks', () => {
+    function getSaveDialogProps() {
+      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
+      const { saveAs } = useBuilderSave()
+      saveAs()
+      return mockShowLayoutDialog.mock.calls[0][0].props as {
+        onSave: (filename: string, openAsApp: boolean) => Promise<void>
+        onClose: () => void
+      }
+    }
+
+    it('onSave calls saveWorkflowAs then setWorkflowDefaultView on success', async () => {
+      mockSaveWorkflowAs.mockResolvedValueOnce(true)
+      const { onSave } = getSaveDialogProps()
+
+      await onSave('new-name', true)
+
+      expect(mockSaveWorkflowAs).toHaveBeenCalledWith(
+        mockActiveWorkflow.value,
+        {
+          filename: 'new-name'
+        }
+      )
+      expect(mockSetWorkflowDefaultView).toHaveBeenCalledWith(
+        mockActiveWorkflow.value,
+        true
+      )
+    })
+
+    it('onSave uses fresh activeWorkflow reference for setWorkflowDefaultView', async () => {
+      const newWorkflow = { filename: 'new-name', initialMode: 'app' }
+      mockSaveWorkflowAs.mockImplementationOnce(async () => {
+        mockActiveWorkflow.value = newWorkflow
+        return true
+      })
+      const { onSave } = getSaveDialogProps()
+
+      await onSave('new-name', true)
+
+      expect(mockSetWorkflowDefaultView).toHaveBeenCalledWith(newWorkflow, true)
+    })
+
+    it('onSave does not mutate or close when saveWorkflowAs returns falsy', async () => {
+      mockSaveWorkflowAs.mockResolvedValueOnce(null)
+      const { onSave } = getSaveDialogProps()
+
+      await onSave('new-name', false)
+
+      expect(mockSetWorkflowDefaultView).not.toHaveBeenCalled()
+      expect(mockCloseDialog).not.toHaveBeenCalled()
+    })
+
+    it('onSave closes dialog and shows success dialog after successful save', async () => {
+      mockSaveWorkflowAs.mockResolvedValueOnce(true)
+      const { onSave } = getSaveDialogProps()
+
+      await onSave('new-name', true)
+
+      expect(mockCloseDialog).toHaveBeenCalledWith({ key: SAVE_DIALOG_KEY })
+      expect(mockShowConfirmDialog).toHaveBeenCalledOnce()
+      const successCall = mockShowConfirmDialog.mock.calls[0][0]
+      expect(successCall.key).toBe(SUCCESS_DIALOG_KEY)
+    })
+
+    it('shows app success message when openAsApp is true', async () => {
+      mockSaveWorkflowAs.mockResolvedValueOnce(true)
+      const { onSave } = getSaveDialogProps()
+
+      await onSave('new-name', true)
+
+      const successCall = mockShowConfirmDialog.mock.calls[0][0]
+      expect(successCall.props.promptText).toBe('builderSave.successBodyApp')
+    })
+
+    it('shows graph success message with exit builder button when openAsApp is false', async () => {
+      mockSaveWorkflowAs.mockResolvedValueOnce(true)
+      const { onSave } = getSaveDialogProps()
+
+      await onSave('new-name', false)
+
+      const successCall = mockShowConfirmDialog.mock.calls[0][0]
+      expect(successCall.props.promptText).toBe('builderSave.successBodyGraph')
+      expect(successCall.footerProps.confirmText).toBe(
+        'linearMode.builder.exit'
+      )
+      expect(successCall.footerProps.cancelText).toBe('builderToolbar.viewApp')
+    })
+
+    it('onSave toasts error and closes dialog on failure', async () => {
+      const error = new Error('save-as failed')
+      mockSaveWorkflowAs.mockRejectedValueOnce(error)
+      const { onSave } = getSaveDialogProps()
+
+      await onSave('new-name', false)
+
+      expect(mockToastErrorHandler).toHaveBeenCalledWith(error)
+      expect(mockCloseDialog).toHaveBeenCalledWith({ key: SAVE_DIALOG_KEY })
+    })
+
+    it('prevents concurrent handleSaveAs calls', async () => {
+      let resolveSaveAs!: (v: boolean) => void
+      mockSaveWorkflowAs.mockReturnValueOnce(
+        new Promise<boolean>((r) => {
+          resolveSaveAs = r
+        })
+      )
+      const { onSave } = getSaveDialogProps()
+
+      const firstSave = onSave('new-name', true)
+
+      await onSave('other-name', true)
+      expect(mockSaveWorkflowAs).toHaveBeenCalledOnce()
+
+      resolveSaveAs(true)
+      await firstSave
+    })
+  })
+
+  describe('graph success dialog callbacks', () => {
+    async function getGraphSuccessDialogProps() {
+      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
+      mockSaveWorkflowAs.mockResolvedValueOnce(true)
+      const { saveAs } = useBuilderSave()
+      saveAs()
+      const { onSave } = mockShowLayoutDialog.mock.calls[0][0].props as {
+        onSave: (filename: string, openAsApp: boolean) => Promise<void>
+      }
+      await onSave('new-name', false)
+      return mockShowConfirmDialog.mock.calls[0][0].footerProps as {
+        onConfirm: () => void
+        onCancel: () => void
+      }
+    }
+
+    it('onConfirm closes dialog and exits builder', async () => {
+      const { onConfirm } = await getGraphSuccessDialogProps()
+
+      onConfirm()
+
+      expect(mockCloseDialog).toHaveBeenCalledWith({ key: SUCCESS_DIALOG_KEY })
+      expect(mockExitBuilder).toHaveBeenCalledOnce()
+    })
+
+    it('onCancel closes dialog and switches to app mode', async () => {
+      const { onCancel } = await getGraphSuccessDialogProps()
+
+      onCancel()
+
+      expect(mockCloseDialog).toHaveBeenCalledWith({ key: SUCCESS_DIALOG_KEY })
+      expect(mockTrackEnterLinear).toHaveBeenCalledWith({
+        source: 'app_builder'
+      })
+      expect(mockSetMode).toHaveBeenCalledWith('app')
+    })
+  })
+})

src/components/builder/useBuilderSave.ts

@@ -0,0 +1,135 @@
+import { useAppMode } from '@/composables/useAppMode'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
+import { t } from '@/i18n'
+import { useTelemetry } from '@/platform/telemetry'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useDialogService } from '@/services/dialogService'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import { ref } from 'vue'
+
+import { setWorkflowDefaultView } from './builderViewOptions'
+import BuilderSaveDialogContent from './BuilderSaveDialogContent.vue'
+
+const SAVE_DIALOG_KEY = 'builder-save'
+const SUCCESS_DIALOG_KEY = 'builder-save-success'
+
+const isSaving = ref(false)
+
+export function useBuilderSave() {
+  const { toastErrorHandler } = useErrorHandling()
+  const { setMode } = useAppMode()
+  const workflowStore = useWorkflowStore()
+  const workflowService = useWorkflowService()
+  const dialogService = useDialogService()
+  const appModeStore = useAppModeStore()
+  const dialogStore = useDialogStore()
+
+  function closeDialog(key: string) {
+    dialogStore.closeDialog({ key })
+  }
+
+  async function save() {
+    if (isSaving.value) return
+    const workflow = workflowStore.activeWorkflow
+    if (!workflow) return
+
+    isSaving.value = true
+    try {
+      await workflowService.saveWorkflow(workflow)
+    } catch (e) {
+      toastErrorHandler(e)
+    } finally {
+      isSaving.value = false
+    }
+  }
+
+  function saveAs() {
+    if (isSaving.value) return
+    const workflow = workflowStore.activeWorkflow
+    if (!workflow) return
+
+    dialogService.showLayoutDialog({
+      key: SAVE_DIALOG_KEY,
+      component: BuilderSaveDialogContent,
+      props: {
+        defaultFilename: workflow.filename,
+        defaultOpenAsApp: workflow.initialMode !== 'graph',
+        onSave: handleSaveAs,
+        onClose: () => closeDialog(SAVE_DIALOG_KEY)
+      }
+    })
+  }
+
+  async function handleSaveAs(filename: string, openAsApp: boolean) {
+    if (isSaving.value) return
+    isSaving.value = true
+    try {
+      const workflow = workflowStore.activeWorkflow
+      if (!workflow) return
+
+      const saved = await workflowService.saveWorkflowAs(workflow, {
+        filename
+      })
+
+      if (!saved) return
+      const activeWorkflow = workflowStore.activeWorkflow
+      if (!activeWorkflow) return
+      setWorkflowDefaultView(activeWorkflow, openAsApp)
+      closeDialog(SAVE_DIALOG_KEY)
+      showSuccessDialog(openAsApp ? 'app' : 'graph')
+    } catch (e) {
+      toastErrorHandler(e)
+      closeDialog(SAVE_DIALOG_KEY)
+    } finally {
+      isSaving.value = false
+    }
+  }
+
+  function showSuccessDialog(viewType: 'app' | 'graph') {
+    const promptText =
+      viewType === 'app'
+        ? t('builderSave.successBodyApp')
+        : t('builderSave.successBodyGraph')
+
+    showConfirmDialog({
+      key: SUCCESS_DIALOG_KEY,
+      headerProps: {
+        title: t('builderSave.successTitle'),
+        icon: 'icon-[lucide--circle-check-big] text-green-500'
+      },
+      props: { promptText, preserveNewlines: true },
+      footerProps:
+        viewType === 'graph'
+          ? {
+              cancelText: t('builderToolbar.viewApp'),
+              confirmText: t('linearMode.builder.exit'),
+              confirmVariant: 'secondary' as const,
+              onCancel: () => {
+                closeDialog(SUCCESS_DIALOG_KEY)
+                useTelemetry()?.trackEnterLinear({ source: 'app_builder' })
+                setMode('app')
+              },
+              onConfirm: () => {
+                closeDialog(SUCCESS_DIALOG_KEY)
+                appModeStore.exitBuilder()
+              }
+            }
+          : {
+              cancelText: t('g.close'),
+              confirmText: t('builderToolbar.viewApp'),
+              confirmVariant: 'secondary' as const,
+              onCancel: () => closeDialog(SUCCESS_DIALOG_KEY),
+              onConfirm: () => {
+                closeDialog(SUCCESS_DIALOG_KEY)
+                useTelemetry()?.trackEnterLinear({ source: 'app_builder' })
+                setMode('app')
+              }
+            }
+    })
+  }
+
+  return { save, saveAs, isSaving }
+}

src/components/builder/useBuilderSteps.ts

@@ -4,13 +4,10 @@ import { computed } from 'vue'
 
 import { useAppMode } from '@/composables/useAppMode'
 
-import { useAppSetDefaultView } from './useAppSetDefaultView'
-
 const BUILDER_STEPS = [
   'builder:inputs',
   'builder:outputs',
-  'builder:arrange',
-  'setDefaultView'
+  'builder:arrange'
 ] as const
 
 export type BuilderStepId = (typeof BUILDER_STEPS)[number]
@@ -19,10 +16,8 @@ const ARRANGE_INDEX = BUILDER_STEPS.indexOf('builder:arrange')
 
 export function useBuilderSteps(options?: { hasOutputs?: Ref<boolean> }) {
   const { mode, isBuilderMode, setMode } = useAppMode()
-  const { settingView, showDialog } = useAppSetDefaultView()
 
   const activeStep = computed<BuilderStepId>(() => {
-    if (settingView.value) return 'setDefaultView'
     if (isBuilderMode.value) {
       return mode.value as BuilderStepId
     }
@@ -47,23 +42,14 @@ export function useBuilderSteps(options?: { hasOutputs?: Ref<boolean> }) {
       activeStep.value === 'builder:outputs'
   )
 
-  function navigateToStep(stepId: BuilderStepId) {
-    if (stepId === 'setDefaultView') {
-      setMode('builder:arrange')
-      showDialog()
-    } else {
-      setMode(stepId)
-    }
-  }
-
   function goBack() {
     if (isFirstStep.value) return
-    navigateToStep(BUILDER_STEPS[activeStepIndex.value - 1])
+    setMode(BUILDER_STEPS[activeStepIndex.value - 1])
   }
 
   function goNext() {
     if (isLastStep.value) return
-    navigateToStep(BUILDER_STEPS[activeStepIndex.value + 1])
+    setMode(BUILDER_STEPS[activeStepIndex.value + 1])
   }
 
   return {
@@ -72,7 +58,7 @@ export function useBuilderSteps(options?: { hasOutputs?: Ref<boolean> }) {
     isFirstStep,
     isLastStep,
     isSelectStep,
-    navigateToStep,
+    navigateToStep: setMode,
     goBack,
     goNext
   }

src/components/common/BadgePill.test.ts

@@ -1,89 +1,103 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 
 import BadgePill from './BadgePill.vue'
 
 describe('BadgePill', () => {
   it('renders text content', () => {
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       props: { text: 'Test Badge' }
     })
-    expect(wrapper.text()).toBe('Test Badge')
+    expect(screen.getByText('Test Badge')).toBeInTheDocument()
   })
 
   it('renders icon when provided', () => {
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       props: { icon: 'icon-[comfy--credits]', text: 'Credits' }
     })
-    expect(wrapper.find('i.icon-\\[comfy--credits\\]').exists()).toBe(true)
+    expect(screen.getByTestId('badge-icon')).toHaveClass(
+      'icon-[comfy--credits]'
+    )
   })
 
   it('applies iconClass to icon', () => {
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       props: {
         icon: 'icon-[comfy--credits]',
         iconClass: 'text-amber-400'
       }
     })
-    const icon = wrapper.find('i')
-    expect(icon.classes()).toContain('text-amber-400')
+    expect(screen.getByTestId('badge-icon')).toHaveClass('text-amber-400')
   })
 
   it('uses default border color when no borderStyle', () => {
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       props: { text: 'Default' }
     })
-    expect(wrapper.attributes('style')).toContain(
-      'border-color: var(--border-color)'
+    expect(screen.getByTestId('badge-pill')).toHaveAttribute(
+      'style',
+      expect.stringContaining('border-color: var(--border-color)')
     )
   })
 
   it('applies solid border color when borderStyle is a color', () => {
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       props: { text: 'Colored', borderStyle: '#f59e0b' }
     })
-    expect(wrapper.attributes('style')).toContain('border-color: #f59e0b')
+    expect(screen.getByTestId('badge-pill')).toHaveAttribute(
+      'style',
+      expect.stringContaining('border-color: #f59e0b')
+    )
   })
 
   it('applies gradient border when borderStyle contains linear-gradient', () => {
     const gradient = 'linear-gradient(90deg, #3186FF, #FABC12)'
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       props: { text: 'Gradient', borderStyle: gradient }
     })
-    const element = wrapper.element as HTMLElement
+    const element = screen.getByTestId('badge-pill') as HTMLElement
     expect(element.style.borderColor).toBe('transparent')
     expect(element.style.backgroundOrigin).toBe('border-box')
     expect(element.style.backgroundClip).toBe('padding-box, border-box')
   })
 
   it('applies filled style with background and text color', () => {
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       props: { text: 'Filled', borderStyle: '#f59e0b', filled: true }
     })
-    const style = wrapper.attributes('style')
-    expect(style).toContain('border-color: #f59e0b')
-    expect(style).toContain('background-color: #f59e0b33')
-    expect(style).toContain('color: #f59e0b')
+    const pill = screen.getByTestId('badge-pill')
+    expect(pill).toHaveAttribute(
+      'style',
+      expect.stringContaining('border-color: #f59e0b')
+    )
+    expect(pill).toHaveAttribute(
+      'style',
+      expect.stringContaining('background-color: #f59e0b33')
+    )
+    expect(pill).toHaveAttribute(
+      'style',
+      expect.stringContaining('color: #f59e0b')
+    )
   })
 
   it('has foreground text when not filled', () => {
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       props: { text: 'Not Filled', borderStyle: '#f59e0b' }
     })
-    expect(wrapper.classes()).toContain('text-foreground')
+    expect(screen.getByTestId('badge-pill')).toHaveClass('text-foreground')
   })
 
   it('does not have foreground text class when filled', () => {
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       props: { text: 'Filled', borderStyle: '#f59e0b', filled: true }
     })
-    expect(wrapper.classes()).not.toContain('text-foreground')
+    expect(screen.getByTestId('badge-pill')).not.toHaveClass('text-foreground')
   })
 
   it('renders slot content', () => {
-    const wrapper = mount(BadgePill, {
+    render(BadgePill, {
       slots: { default: 'Slot Content' }
     })
-    expect(wrapper.text()).toBe('Slot Content')
+    expect(screen.getByText('Slot Content')).toBeInTheDocument()
   })
 })

src/components/common/BadgePill.vue

@@ -1,5 +1,6 @@
 <template>
   <span
+    data-testid="badge-pill"
     :class="
       cn(
         'flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-xxs',
@@ -8,7 +9,11 @@
     "
     :style="customStyle"
   >
-    <i v-if="icon" :class="cn(icon, 'size-2.5', iconClass)" />
+    <i
+      v-if="icon"
+      data-testid="badge-icon"
+      :class="cn(icon, 'size-2.5', iconClass)"
+    />
     <slot>{{ text }}</slot>
   </span>
 </template>

src/components/common/ColorCustomizationSelector.test.ts

@@ -1,8 +1,9 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import ColorPicker from 'primevue/colorpicker'
 import PrimeVue from 'primevue/config'
 import SelectButton from 'primevue/selectbutton'
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createApp, nextTick } from 'vue'
 
 import ColorCustomizationSelector from './ColorCustomizationSelector.vue'
@@ -14,13 +15,17 @@ describe('ColorCustomizationSelector', () => {
   ]
 
   beforeEach(() => {
-    // Setup PrimeVue
     const app = createApp({})
     app.use(PrimeVue)
   })
 
-  const mountComponent = (props = {}) => {
-    return mount(ColorCustomizationSelector, {
+  function renderComponent(
+    props: Record<string, unknown> = {},
+    callbacks: { 'onUpdate:modelValue'?: (value: string | null) => void } = {}
+  ) {
+    const user = userEvent.setup()
+
+    const result = render(ColorCustomizationSelector, {
       global: {
         plugins: [PrimeVue],
         components: { SelectButton, ColorPicker }
@@ -28,102 +33,123 @@ describe('ColorCustomizationSelector', () => {
       props: {
         modelValue: null,
         colorOptions,
-        ...props
+        ...props,
+        ...callbacks
       }
     })
+
+    return { ...result, user }
+  }
+
+  /** PrimeVue SelectButton renders toggle buttons with aria-pressed */
+  function getToggleButtons(container: Element) {
+    return container.querySelectorAll<HTMLButtonElement>( // eslint-disable-line testing-library/no-node-access -- PrimeVue SelectButton renders toggle buttons without standard ARIA radiogroup roles
+      '[data-pc-name="pctogglebutton"]'
+    )
   }
 
   it('renders predefined color options and custom option', () => {
-    const wrapper = mountComponent()
-    const selectButton = wrapper.findComponent(SelectButton)
-
-    expect(selectButton.props('options')).toHaveLength(colorOptions.length + 1)
-    expect(selectButton.props('options')?.at(-1)?.name).toBe('_custom')
+    const { container } = renderComponent()
+    expect(getToggleButtons(container)).toHaveLength(colorOptions.length + 1)
   })
 
   it('initializes with predefined color when provided', async () => {
-    const wrapper = mountComponent({
-      modelValue: '#0d6efd'
-    })
-
+    const { container } = renderComponent({ modelValue: '#0d6efd' })
     await nextTick()
-    const selectButton = wrapper.findComponent(SelectButton)
-    expect(selectButton.props('modelValue')).toEqual({
-      name: 'Blue',
-      value: '#0d6efd'
-    })
+
+    const buttons = getToggleButtons(container)
+    expect(buttons[0]).toHaveAttribute('aria-pressed', 'true')
   })
 
   it('initializes with custom color when non-predefined color provided', async () => {
-    const wrapper = mountComponent({
-      modelValue: '#123456'
-    })
-
+    const { container } = renderComponent({ modelValue: '#123456' })
     await nextTick()
-    const selectButton = wrapper.findComponent(SelectButton)
-    const colorPicker = wrapper.findComponent(ColorPicker)
 
-    expect(selectButton.props('modelValue').name).toBe('_custom')
-    expect(colorPicker.props('modelValue')).toBe('123456')
+    const buttons = getToggleButtons(container)
+    const customButton = buttons[buttons.length - 1]
+    expect(customButton).toHaveAttribute('aria-pressed', 'true')
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue ColorPicker uses readonly input preview with no ARIA role
+    const colorPreview = container.querySelector(
+      '.p-colorpicker-preview'
+    ) as HTMLInputElement | null
+    expect(colorPreview).not.toBeNull()
   })
 
   it('shows color picker when custom option is selected', async () => {
-    const wrapper = mountComponent()
-    const selectButton = wrapper.findComponent(SelectButton)
+    const { container, user } = renderComponent()
 
-    // Select custom option
-    await selectButton.setValue({ name: '_custom', value: '' })
+    const buttons = getToggleButtons(container)
+    await user.click(buttons[buttons.length - 1])
 
-    expect(wrapper.findComponent(ColorPicker).exists()).toBe(true)
+    expect(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue ColorPicker internal DOM
+      container.querySelector('[data-pc-name="colorpicker"]')
+    ).not.toBeNull()
   })
 
   it('emits update when predefined color is selected', async () => {
-    const wrapper = mountComponent()
-    const selectButton = wrapper.findComponent(SelectButton)
+    const onUpdate = vi.fn()
+    const { container, user } = renderComponent(
+      {},
+      { 'onUpdate:modelValue': onUpdate }
+    )
 
-    await selectButton.setValue(colorOptions[0])
+    const buttons = getToggleButtons(container)
+    await user.click(buttons[0])
 
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#0d6efd'])
+    expect(onUpdate).toHaveBeenCalledWith('#0d6efd')
   })
 
   it('emits update when custom color is changed', async () => {
-    const wrapper = mountComponent()
-    const selectButton = wrapper.findComponent(SelectButton)
+    const onUpdate = vi.fn()
+    const { container, user } = renderComponent(
+      {},
+      { 'onUpdate:modelValue': onUpdate }
+    )
 
-    // Select custom option
-    await selectButton.setValue({ name: '_custom', value: '' })
+    // Custom is already selected by default (modelValue: null)
+    // Select Blue first, then switch to custom so onUpdate fires for Blue
+    const buttons = getToggleButtons(container)
+    await user.click(buttons[0]) // Select Blue
+    expect(onUpdate).toHaveBeenCalledWith('#0d6efd')
 
-    // Change custom color
-    const colorPicker = wrapper.findComponent(ColorPicker)
-    await colorPicker.setValue('ff0000')
+    onUpdate.mockClear()
+    await user.click(buttons[buttons.length - 1]) // Switch to custom
 
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#ff0000'])
+    // When switching to custom, the custom color value inherits from Blue ('0d6efd')
+    // and the watcher on customColorValue emits the update
+    expect(onUpdate).toHaveBeenCalledWith('#0d6efd')
   })
 
   it('inherits color from previous selection when switching to custom', async () => {
-    const wrapper = mountComponent()
-    const selectButton = wrapper.findComponent(SelectButton)
+    const onUpdate = vi.fn()
+    const { container, user } = renderComponent(
+      {},
+      { 'onUpdate:modelValue': onUpdate }
+    )
 
-    // First select a predefined color
-    await selectButton.setValue(colorOptions[0])
+    const buttons = getToggleButtons(container)
 
-    // Then switch to custom
-    await selectButton.setValue({ name: '_custom', value: '' })
+    // First select Blue
+    await user.click(buttons[0])
+    expect(onUpdate).toHaveBeenCalledWith('#0d6efd')
 
-    const colorPicker = wrapper.findComponent(ColorPicker)
-    expect(colorPicker.props('modelValue')).toBe('0d6efd')
+    onUpdate.mockClear()
+
+    // Then switch to custom — inherits the Blue color
+    await user.click(buttons[buttons.length - 1])
+
+    // The customColorValue watcher fires with the inherited Blue value
+    expect(onUpdate).toHaveBeenCalledWith('#0d6efd')
   })
 
   it('handles null modelValue correctly', async () => {
-    const wrapper = mountComponent({
-      modelValue: null
-    })
-
+    const { container } = renderComponent({ modelValue: null })
     await nextTick()
-    const selectButton = wrapper.findComponent(SelectButton)
-    expect(selectButton.props('modelValue')).toEqual({
-      name: '_custom',
-      value: ''
-    })
+
+    const buttons = getToggleButtons(container)
+    const customButton = buttons[buttons.length - 1]
+    expect(customButton).toHaveAttribute('aria-pressed', 'true')
   })
 })

src/components/common/EditableText.test.ts

@@ -1,140 +1,120 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
-import { beforeAll, describe, expect, it } from 'vitest'
-import { createApp } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
 
 import EditableText from './EditableText.vue'
 
 describe('EditableText', () => {
-  beforeAll(() => {
-    // Create a Vue app instance for PrimeVue
-    const app = createApp({})
-    app.use(PrimeVue)
-  })
+  function renderComponent(
+    props: { modelValue: string; isEditing?: boolean },
+    callbacks: {
+      onEdit?: (...args: unknown[]) => void
+      onCancel?: (...args: unknown[]) => void
+    } = {}
+  ) {
+    const user = userEvent.setup()
 
-  // @ts-expect-error fixme ts strict error
-  const mountComponent = (props, options = {}) => {
-    return mount(EditableText, {
+    render(EditableText, {
       global: {
         plugins: [PrimeVue],
         components: { InputText }
       },
-      props,
-      ...options
+      props: {
+        ...props,
+        ...(callbacks.onEdit && { onEdit: callbacks.onEdit }),
+        ...(callbacks.onCancel && { onCancel: callbacks.onCancel })
+      }
     })
+
+    return { user }
   }
 
   it('renders span with modelValue when not editing', () => {
-    const wrapper = mountComponent({
-      modelValue: 'Test Text',
-      isEditing: false
-    })
-    expect(wrapper.find('span').text()).toBe('Test Text')
-    expect(wrapper.findComponent(InputText).exists()).toBe(false)
+    renderComponent({ modelValue: 'Test Text', isEditing: false })
+    expect(screen.getByText('Test Text')).toBeInTheDocument()
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
   })
 
   it('renders input with modelValue when editing', () => {
-    const wrapper = mountComponent({
-      modelValue: 'Test Text',
-      isEditing: true
-    })
-    expect(wrapper.find('span').exists()).toBe(false)
-    expect(wrapper.findComponent(InputText).props()['modelValue']).toBe(
-      'Test Text'
-    )
+    renderComponent({ modelValue: 'Test Text', isEditing: true })
+    expect(screen.queryByText('Test Text')).not.toBeInTheDocument()
+    expect(screen.getByRole('textbox')).toHaveValue('Test Text')
   })
 
   it('emits edit event when input is submitted', async () => {
-    const wrapper = mountComponent({
-      modelValue: 'Test Text',
-      isEditing: true
-    })
-    await wrapper.findComponent(InputText).setValue('New Text')
-    await wrapper.findComponent(InputText).trigger('keydown.enter')
-    // Blur event should have been triggered
-    expect(wrapper.findComponent(InputText).element).not.toBe(
-      document.activeElement
+    const onEdit = vi.fn()
+    const { user } = renderComponent(
+      { modelValue: 'Test Text', isEditing: true },
+      { onEdit }
     )
+
+    const input = screen.getByRole('textbox')
+    await user.clear(input)
+    await user.type(input, 'New Text')
+    await user.keyboard('{Enter}')
+
+    expect(onEdit).toHaveBeenCalledWith('New Text')
   })
 
   it('finishes editing on blur', async () => {
-    const wrapper = mountComponent({
-      modelValue: 'Test Text',
-      isEditing: true
-    })
-    await wrapper.findComponent(InputText).trigger('blur')
-    expect(wrapper.emitted('edit')).toBeTruthy()
-    // @ts-expect-error fixme ts strict error
-    expect(wrapper.emitted('edit')[0]).toEqual(['Test Text'])
+    const onEdit = vi.fn()
+    renderComponent({ modelValue: 'Test Text', isEditing: true }, { onEdit })
+
+    await fireEvent.blur(screen.getByRole('textbox'))
+
+    expect(onEdit).toHaveBeenCalledWith('Test Text')
   })
 
   it('cancels editing on escape key', async () => {
-    const wrapper = mountComponent({
-      modelValue: 'Original Text',
-      isEditing: true
-    })
-
-    // Change the input value
-    await wrapper.findComponent(InputText).setValue('Modified Text')
-
-    // Press escape
-    await wrapper.findComponent(InputText).trigger('keydown.escape')
-
-    // Should emit cancel event
-    expect(wrapper.emitted('cancel')).toBeTruthy()
-
-    // Should NOT emit edit event
-    expect(wrapper.emitted('edit')).toBeFalsy()
-
-    // Input value should be reset to original
-    expect(wrapper.findComponent(InputText).props()['modelValue']).toBe(
-      'Original Text'
+    const onEdit = vi.fn()
+    const onCancel = vi.fn()
+    const { user } = renderComponent(
+      { modelValue: 'Original Text', isEditing: true },
+      { onEdit, onCancel }
     )
+
+    const input = screen.getByRole('textbox')
+    await user.clear(input)
+    await user.type(input, 'Modified Text')
+    await user.keyboard('{Escape}')
+
+    expect(onCancel).toHaveBeenCalled()
+    expect(onEdit).not.toHaveBeenCalled()
+    expect(input).toHaveValue('Original Text')
   })
 
-  it('does not save changes when escape is pressed and blur occurs', async () => {
-    const wrapper = mountComponent({
-      modelValue: 'Original Text',
-      isEditing: true
-    })
+  it('does not save changes when escape is pressed', async () => {
+    const onEdit = vi.fn()
+    const onCancel = vi.fn()
+    const { user } = renderComponent(
+      { modelValue: 'Original Text', isEditing: true },
+      { onEdit, onCancel }
+    )
 
-    // Change the input value
-    await wrapper.findComponent(InputText).setValue('Modified Text')
+    const input = screen.getByRole('textbox')
+    await user.clear(input)
+    await user.type(input, 'Modified Text')
+    // Escape triggers cancelEditing → blur internally, so no separate blur needed
+    await user.keyboard('{Escape}')
 
-    // Press escape (which triggers blur internally)
-    await wrapper.findComponent(InputText).trigger('keydown.escape')
-
-    // Manually trigger blur to simulate the blur that happens after escape
-    await wrapper.findComponent(InputText).trigger('blur')
-
-    // Should emit cancel but not edit
-    expect(wrapper.emitted('cancel')).toBeTruthy()
-    expect(wrapper.emitted('edit')).toBeFalsy()
+    expect(onCancel).toHaveBeenCalled()
+    expect(onEdit).not.toHaveBeenCalled()
   })
 
   it('saves changes on enter but not on escape', async () => {
-    // Test Enter key saves changes
-    const enterWrapper = mountComponent({
-      modelValue: 'Original Text',
-      isEditing: true
-    })
-    await enterWrapper.findComponent(InputText).setValue('Saved Text')
-    await enterWrapper.findComponent(InputText).trigger('keydown.enter')
-    // Trigger blur that happens after enter
-    await enterWrapper.findComponent(InputText).trigger('blur')
-    expect(enterWrapper.emitted('edit')).toBeTruthy()
-    // @ts-expect-error fixme ts strict error
-    expect(enterWrapper.emitted('edit')[0]).toEqual(['Saved Text'])
+    const onEditEnter = vi.fn()
+    const { user: userEnter } = renderComponent(
+      { modelValue: 'Original Text', isEditing: true },
+      { onEdit: onEditEnter }
+    )
 
-    // Test Escape key cancels changes with a fresh wrapper
-    const escapeWrapper = mountComponent({
-      modelValue: 'Original Text',
-      isEditing: true
-    })
-    await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
-    await escapeWrapper.findComponent(InputText).trigger('keydown.escape')
-    expect(escapeWrapper.emitted('cancel')).toBeTruthy()
-    expect(escapeWrapper.emitted('edit')).toBeFalsy()
+    const enterInput = screen.getByRole('textbox')
+    await userEnter.clear(enterInput)
+    await userEnter.type(enterInput, 'Saved Text')
+    await userEnter.keyboard('{Enter}')
+
+    expect(onEditEnter).toHaveBeenCalledWith('Saved Text')
   })
 })

src/components/common/FormRadioGroup.test.ts

@@ -1,241 +1,210 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import PrimeVue from 'primevue/config'
-import RadioButton from 'primevue/radiobutton'
-import { beforeAll, describe, expect, it } from 'vitest'
-import { createApp } from 'vue'
+import { describe, expect, it } from 'vitest'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
 import type { SettingOption } from '@/platform/settings/types'
 
 import FormRadioGroup from './FormRadioGroup.vue'
-import type { ComponentProps } from 'vue-component-type-helpers'
+
+type FormRadioGroupProps = ComponentProps<typeof FormRadioGroup>
 
 describe('FormRadioGroup', () => {
-  beforeAll(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
-  })
-
-  type FormRadioGroupProps = ComponentProps<typeof FormRadioGroup>
-  const mountComponent = (props: FormRadioGroupProps, options = {}) => {
-    return mount(FormRadioGroup, {
-      global: {
-        plugins: [PrimeVue],
-        components: { RadioButton }
-      },
-      props,
-      ...options
+  function renderComponent(props: FormRadioGroupProps) {
+    return render(FormRadioGroup, {
+      global: { plugins: [PrimeVue] },
+      props
     })
   }
 
   describe('normalizedOptions computed property', () => {
     it('handles string array options', () => {
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: 'option1',
         options: ['option1', 'option2', 'option3'],
         id: 'test-radio'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
+      const radios = screen.getAllByRole('radio')
+      expect(radios).toHaveLength(3)
 
-      expect(radioButtons[0].props('value')).toBe('option1')
-      expect(radioButtons[1].props('value')).toBe('option2')
-      expect(radioButtons[2].props('value')).toBe('option3')
+      expect(radios[0]).toHaveAttribute('value', 'option1')
+      expect(radios[1]).toHaveAttribute('value', 'option2')
+      expect(radios[2]).toHaveAttribute('value', 'option3')
 
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('option1')
-      expect(labels[1].text()).toBe('option2')
-      expect(labels[2].text()).toBe('option3')
+      expect(screen.getByText('option1')).toBeInTheDocument()
+      expect(screen.getByText('option2')).toBeInTheDocument()
+      expect(screen.getByText('option3')).toBeInTheDocument()
     })
 
     it('handles SettingOption array', () => {
-      const options: SettingOption[] = [
-        { text: 'Small', value: 'sm' },
-        { text: 'Medium', value: 'md' },
-        { text: 'Large', value: 'lg' }
-      ]
-
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: 'md',
-        options,
+        options: [
+          { text: 'Small', value: 'sm' },
+          { text: 'Medium', value: 'md' },
+          { text: 'Large', value: 'lg' }
+        ] satisfies SettingOption[],
         id: 'test-radio'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
+      const radios = screen.getAllByRole('radio')
+      expect(radios).toHaveLength(3)
 
-      expect(radioButtons[0].props('value')).toBe('sm')
-      expect(radioButtons[1].props('value')).toBe('md')
-      expect(radioButtons[2].props('value')).toBe('lg')
+      expect(radios[0]).toHaveAttribute('value', 'sm')
+      expect(radios[1]).toHaveAttribute('value', 'md')
+      expect(radios[2]).toHaveAttribute('value', 'lg')
 
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('Small')
-      expect(labels[1].text()).toBe('Medium')
-      expect(labels[2].text()).toBe('Large')
+      expect(screen.getByText('Small')).toBeInTheDocument()
+      expect(screen.getByText('Medium')).toBeInTheDocument()
+      expect(screen.getByText('Large')).toBeInTheDocument()
     })
 
     it('handles SettingOption with undefined value (uses text as value)', () => {
-      const options: SettingOption[] = [
-        { text: 'Option A', value: undefined },
-        { text: 'Option B' }
-      ]
-
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: 'Option A',
-        options,
+        options: [
+          { text: 'Option A', value: undefined },
+          { text: 'Option B' }
+        ] satisfies SettingOption[],
         id: 'test-radio'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-
-      expect(radioButtons[0].props('value')).toBe('Option A')
-      expect(radioButtons[1].props('value')).toBe('Option B')
+      const radios = screen.getAllByRole('radio')
+      expect(radios[0]).toHaveAttribute('value', 'Option A')
+      expect(radios[1]).toHaveAttribute('value', 'Option B')
     })
 
     it('handles custom object with optionLabel and optionValue', () => {
-      const options = [
-        { name: 'First Option', id: '1' },
-        { name: 'Second Option', id: '2' },
-        { name: 'Third Option', id: '3' }
-      ]
-
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: 2,
-        options,
+        options: [
+          { name: 'First Option', id: '1' },
+          { name: 'Second Option', id: '2' },
+          { name: 'Third Option', id: '3' }
+        ],
         optionLabel: 'name',
         optionValue: 'id',
         id: 'test-radio'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
+      const radios = screen.getAllByRole('radio')
+      expect(radios).toHaveLength(3)
 
-      expect(radioButtons[0].props('value')).toBe('1')
-      expect(radioButtons[1].props('value')).toBe('2')
-      expect(radioButtons[2].props('value')).toBe('3')
+      expect(radios[0]).toHaveAttribute('value', '1')
+      expect(radios[1]).toHaveAttribute('value', '2')
+      expect(radios[2]).toHaveAttribute('value', '3')
 
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('First Option')
-      expect(labels[1].text()).toBe('Second Option')
-      expect(labels[2].text()).toBe('Third Option')
+      expect(screen.getByText('First Option')).toBeInTheDocument()
+      expect(screen.getByText('Second Option')).toBeInTheDocument()
+      expect(screen.getByText('Third Option')).toBeInTheDocument()
     })
 
     it('handles mixed array with strings and SettingOptions', () => {
-      const options: (string | SettingOption)[] = [
-        'Simple String',
-        { text: 'Complex Option', value: 'complex' },
-        'Another String'
-      ]
-
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: 'complex',
-        options,
+        options: [
+          'Simple String',
+          { text: 'Complex Option', value: 'complex' },
+          'Another String'
+        ] as (string | SettingOption)[],
         id: 'test-radio'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
+      const radios = screen.getAllByRole('radio')
+      expect(radios).toHaveLength(3)
 
-      expect(radioButtons[0].props('value')).toBe('Simple String')
-      expect(radioButtons[1].props('value')).toBe('complex')
-      expect(radioButtons[2].props('value')).toBe('Another String')
+      expect(radios[0]).toHaveAttribute('value', 'Simple String')
+      expect(radios[1]).toHaveAttribute('value', 'complex')
+      expect(radios[2]).toHaveAttribute('value', 'Another String')
 
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('Simple String')
-      expect(labels[1].text()).toBe('Complex Option')
-      expect(labels[2].text()).toBe('Another String')
+      expect(screen.getByText('Simple String')).toBeInTheDocument()
+      expect(screen.getByText('Complex Option')).toBeInTheDocument()
+      expect(screen.getByText('Another String')).toBeInTheDocument()
     })
 
     it('handles empty options array', () => {
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: null,
         options: [],
         id: 'test-radio'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(0)
+      expect(screen.queryAllByRole('radio')).toHaveLength(0)
     })
 
     it('handles undefined options gracefully', () => {
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: null,
         options: undefined,
         id: 'test-radio'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(0)
+      expect(screen.queryAllByRole('radio')).toHaveLength(0)
     })
 
     it('handles object with missing properties gracefully', () => {
-      const options = [{ label: 'Option 1', val: 'opt1' }]
-
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: 'opt1',
-        options,
+        options: [{ label: 'Option 1', val: 'opt1' }],
         id: 'test-radio'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(1)
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('Unknown')
+      expect(screen.getAllByRole('radio')).toHaveLength(1)
+      expect(screen.getByText('Unknown')).toBeInTheDocument()
     })
   })
 
   describe('component functionality', () => {
-    it('sets correct input-id and name attributes', () => {
-      const options = ['A', 'B']
-
-      const wrapper = mountComponent({
+    it('sets correct id and name attributes on inputs', () => {
+      renderComponent({
         modelValue: 'A',
-        options,
+        options: ['A', 'B'],
         id: 'my-radio-group'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
+      const radios = screen.getAllByRole('radio')
 
-      expect(radioButtons[0].props('inputId')).toBe('my-radio-group-A')
-      expect(radioButtons[0].props('name')).toBe('my-radio-group')
-      expect(radioButtons[1].props('inputId')).toBe('my-radio-group-B')
-      expect(radioButtons[1].props('name')).toBe('my-radio-group')
+      expect(radios[0]).toHaveAttribute('id', 'my-radio-group-A')
+      expect(radios[0]).toHaveAttribute('name', 'my-radio-group')
+      expect(radios[1]).toHaveAttribute('id', 'my-radio-group-B')
+      expect(radios[1]).toHaveAttribute('name', 'my-radio-group')
     })
 
     it('associates labels with radio buttons correctly', () => {
-      const options = ['Yes', 'No']
-
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: 'Yes',
-        options,
+        options: ['Yes', 'No'],
         id: 'confirm-radio'
       })
 
-      const labels = wrapper.findAll('label')
-
-      expect(labels[0].attributes('for')).toBe('confirm-radio-Yes')
-      expect(labels[1].attributes('for')).toBe('confirm-radio-No')
+      expect(screen.getByText('Yes')).toHaveAttribute(
+        'for',
+        'confirm-radio-Yes'
+      )
+      expect(screen.getByText('No')).toHaveAttribute('for', 'confirm-radio-No')
     })
 
     it('sets aria-describedby attribute correctly', () => {
-      const options: SettingOption[] = [
-        { text: 'Option 1', value: 'opt1' },
-        { text: 'Option 2', value: 'opt2' }
-      ]
-
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: 'opt1',
-        options,
+        options: [
+          { text: 'Option 1', value: 'opt1' },
+          { text: 'Option 2', value: 'opt2' }
+        ] satisfies SettingOption[],
         id: 'test-radio'
       })
 
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-
-      expect(radioButtons[0].attributes('aria-describedby')).toBe(
+      const radios = screen.getAllByRole('radio')
+      // PrimeVue RadioButton places aria-describedby on its root <div>, not the <input>
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(radios[0].closest('[aria-describedby]')).toHaveAttribute(
+        'aria-describedby',
         'Option 1-label'
       )
-      expect(radioButtons[1].attributes('aria-describedby')).toBe(
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(radios[1].closest('[aria-describedby]')).toHaveAttribute(
+        'aria-describedby',
         'Option 2-label'
       )
     })

src/components/common/ImageLightbox.test.ts

@@ -1,6 +1,6 @@
-import { DOMWrapper, flushPromises, mount } from '@vue/test-utils'
-import type { VueWrapper } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
+import userEvent from '@testing-library/user-event'
+import { render, screen, waitFor } from '@testing-library/vue'
+import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import ImageLightbox from './ImageLightbox.vue'
@@ -13,49 +13,39 @@ const i18n = createI18n({
   fallbackWarn: false
 })
 
-function findCloseButton() {
-  const el = document.body.querySelector('[aria-label="g.close"]')
-  return el ? new DOMWrapper(el) : null
-}
-
 describe(ImageLightbox, () => {
-  let wrapper: VueWrapper
-
-  afterEach(() => {
-    wrapper.unmount()
-  })
-
-  function mountComponent(props: { src: string; alt?: string }, open = true) {
-    wrapper = mount(ImageLightbox, {
+  function renderComponent(props: { src: string; alt?: string }, open = true) {
+    const user = userEvent.setup()
+    const onUpdate = vi.fn()
+    const result = render(ImageLightbox, {
       global: { plugins: [i18n] },
-      props: { ...props, modelValue: open },
-      attachTo: document.body
+      props: {
+        ...props,
+        modelValue: open,
+        'onUpdate:modelValue': onUpdate
+      }
     })
-    return wrapper
+    return { ...result, user, onUpdate }
   }
 
   it('renders the image with correct src and alt when open', async () => {
-    mountComponent({ src: '/test.png', alt: 'Test image' })
-    await flushPromises()
-    const img = document.body.querySelector('img')
-    expect(img).toBeTruthy()
-    expect(img?.getAttribute('src')).toBe('/test.png')
-    expect(img?.getAttribute('alt')).toBe('Test image')
+    renderComponent({ src: '/test.png', alt: 'Test image' })
+    const img = await screen.findByRole('img')
+    expect(img).toHaveAttribute('src', '/test.png')
+    expect(img).toHaveAttribute('alt', 'Test image')
   })
 
-  it('does not render dialog content when closed', async () => {
-    mountComponent({ src: '/test.png' }, false)
-    await flushPromises()
-    expect(document.body.querySelector('img')).toBeNull()
+  it('does not render dialog content when closed', () => {
+    renderComponent({ src: '/test.png' }, false)
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
   })
 
   it('emits update:modelValue false when close button is clicked', async () => {
-    mountComponent({ src: '/test.png' })
-    await flushPromises()
-    const closeButton = findCloseButton()
-    expect(closeButton).toBeTruthy()
-    await closeButton!.trigger('click')
-    await flushPromises()
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    const { user, onUpdate } = renderComponent({ src: '/test.png' })
+    const closeButton = await screen.findByLabelText('g.close')
+    await user.click(closeButton)
+    await waitFor(() => {
+      expect(onUpdate).toHaveBeenCalledWith(false)
+    })
   })
 })

src/components/common/TreeExplorerTreeNode.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import Badge from 'primevue/badge'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
@@ -12,7 +12,6 @@ import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'
 
-// Create a mock i18n instance
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -33,7 +32,6 @@ describe('TreeExplorerTreeNode', () => {
   const mockHandleEditLabel = vi.fn()
 
   beforeAll(() => {
-    // Create a Vue app instance for PrimeVuePrimeVue
     const app = createApp({})
     app.use(PrimeVue)
     vi.useFakeTimers()
@@ -44,7 +42,7 @@ describe('TreeExplorerTreeNode', () => {
   })
 
   it('renders correctly', () => {
-    const wrapper = mount(TreeExplorerTreeNode, {
+    render(TreeExplorerTreeNode, {
       props: { node: mockNode },
       global: {
         components: { EditableText, Badge },
@@ -55,18 +53,16 @@ describe('TreeExplorerTreeNode', () => {
       }
     })
 
-    expect(wrapper.find('.tree-node').exists()).toBe(true)
-    expect(wrapper.find('.tree-folder').exists()).toBe(true)
-    expect(wrapper.find('.tree-leaf').exists()).toBe(false)
-    expect(wrapper.findComponent(EditableText).props('modelValue')).toBe(
-      'Test Node'
-    )
-    // @ts-expect-error fixme ts strict error
-    expect(wrapper.findComponent(Badge).props()['value'].toString()).toBe('3')
+    const treeNode = screen.getByTestId('tree-node-1')
+    expect(treeNode).toBeInTheDocument()
+    expect(treeNode).toHaveClass('tree-folder')
+    expect(treeNode).not.toHaveClass('tree-leaf')
+    expect(screen.getByText('Test Node')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
   })
 
-  it('makes node label editable when renamingEditingNode matches', async () => {
-    const wrapper = mount(TreeExplorerTreeNode, {
+  it('makes node label editable when isEditingLabel is true', () => {
+    render(TreeExplorerTreeNode, {
       props: {
         node: {
           ...mockNode,
@@ -82,14 +78,13 @@ describe('TreeExplorerTreeNode', () => {
       }
     })
 
-    const editableText = wrapper.findComponent(EditableText)
-    expect(editableText.props('isEditing')).toBe(true)
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
   })
 
   it('triggers handleEditLabel callback when editing is finished', async () => {
     const handleEditLabelMock = vi.fn()
 
-    const wrapper = mount(TreeExplorerTreeNode, {
+    render(TreeExplorerTreeNode, {
       props: {
         node: {
           ...mockNode,
@@ -103,8 +98,9 @@ describe('TreeExplorerTreeNode', () => {
       }
     })
 
-    const editableText = wrapper.findComponent(EditableText)
-    editableText.vm.$emit('edit', 'New Node Name')
+    // Trigger blur on the input to finish editing (fires the 'edit' event)
+    await fireEvent.blur(screen.getByRole('textbox'))
+
     expect(handleEditLabelMock).toHaveBeenCalledOnce()
   })
 })

src/components/common/UrlInput.test.ts

@@ -1,64 +1,66 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
-import { beforeEach, describe, expect, it } from 'vitest'
-import { createApp, nextTick } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
 
 import UrlInput from './UrlInput.vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
 
 describe('UrlInput', () => {
-  beforeEach(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
-  })
-
-  const mountComponent = (
+  function renderComponent(
     props: ComponentProps<typeof UrlInput> & {
       placeholder?: string
       disabled?: boolean
-    },
-    options = {}
-  ) => {
-    return mount(UrlInput, {
+      'onUpdate:modelValue'?: (value: string) => void
+    }
+  ) {
+    const user = userEvent.setup()
+
+    const result = render(UrlInput, {
       global: {
         plugins: [PrimeVue],
         components: { IconField, InputIcon, InputText }
       },
-      props,
-      ...options
+      props
     })
+
+    return { ...result, user }
   }
 
   it('passes through additional attributes to input element', () => {
-    const wrapper = mountComponent({
+    renderComponent({
       modelValue: '',
       placeholder: 'Enter URL',
       disabled: true
     })
 
-    expect(wrapper.find('input').attributes('disabled')).toBe('')
+    expect(screen.getByRole('textbox')).toBeDisabled()
   })
 
   it('emits update:modelValue on blur', async () => {
-    const wrapper = mountComponent({
+    const onUpdate = vi.fn()
+    const { user } = renderComponent({
       modelValue: '',
-      placeholder: 'Enter URL'
+      placeholder: 'Enter URL',
+      'onUpdate:modelValue': onUpdate
     })
 
-    const input = wrapper.find('input')
-    await input.setValue('https://test.com/')
-    await input.trigger('blur')
+    const input = screen.getByRole('textbox')
+    await user.type(input, 'https://test.com/')
+    expect(onUpdate).not.toHaveBeenCalled()
 
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
-      'https://test.com/'
-    ])
+    await user.tab()
+
+    expect(onUpdate).toHaveBeenCalledTimes(1)
+    expect(onUpdate).toHaveBeenCalledWith('https://test.com/')
   })
 
   it('renders spinner when validation is loading', async () => {
-    const wrapper = mountComponent({
+    const { container, rerender } = renderComponent({
       modelValue: '',
       placeholder: 'Enter URL',
       validateUrlFn: () =>
@@ -67,43 +69,46 @@ describe('UrlInput', () => {
         })
     })
 
-    await wrapper.setProps({ modelValue: 'https://test.com' })
+    await rerender({ modelValue: 'https://test.com' })
     await nextTick()
     await nextTick()
 
-    expect(wrapper.find('.pi-spinner').exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue InputIcon uses pi-spinner class with no ARIA role
+    expect(container.querySelector('.pi-spinner')).not.toBeNull()
   })
 
   it('renders check icon when validation is valid', async () => {
-    const wrapper = mountComponent({
+    const { container, rerender } = renderComponent({
       modelValue: '',
       placeholder: 'Enter URL',
       validateUrlFn: () => Promise.resolve(true)
     })
 
-    await wrapper.setProps({ modelValue: 'https://test.com' })
+    await rerender({ modelValue: 'https://test.com' })
     await nextTick()
     await nextTick()
 
-    expect(wrapper.find('.pi-check').exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue InputIcon uses pi-check class with no ARIA role
+    expect(container.querySelector('.pi-check')).not.toBeNull()
   })
 
   it('renders cross icon when validation is invalid', async () => {
-    const wrapper = mountComponent({
+    const { container, rerender } = renderComponent({
       modelValue: '',
       placeholder: 'Enter URL',
       validateUrlFn: () => Promise.resolve(false)
     })
 
-    await wrapper.setProps({ modelValue: 'https://test.com' })
+    await rerender({ modelValue: 'https://test.com' })
     await nextTick()
     await nextTick()
 
-    expect(wrapper.find('.pi-times').exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue InputIcon uses pi-times class with no ARIA role
+    expect(container.querySelector('.pi-times')).not.toBeNull()
   })
 
   it('validates on mount', async () => {
-    const wrapper = mountComponent({
+    const { container } = renderComponent({
       modelValue: 'https://test.com',
       validateUrlFn: () => Promise.resolve(true)
     })
@@ -111,12 +116,13 @@ describe('UrlInput', () => {
     await nextTick()
     await nextTick()
 
-    expect(wrapper.find('.pi-check').exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue InputIcon uses pi-check class with no ARIA role
+    expect(container.querySelector('.pi-check')).not.toBeNull()
   })
 
   it('triggers validation when clicking the validation icon', async () => {
     let validationCount = 0
-    const wrapper = mountComponent({
+    const { container, user } = renderComponent({
       modelValue: 'https://test.com',
       validateUrlFn: () => {
         validationCount++
@@ -129,7 +135,9 @@ describe('UrlInput', () => {
     await nextTick()
 
     // Click the validation icon
-    await wrapper.find('.pi-check').trigger('click')
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue InputIcon uses pi-check class with no ARIA role
+    const icon = container.querySelector('.pi-check')!
+    await user.click(icon)
     await nextTick()
     await nextTick()
 
@@ -138,7 +146,7 @@ describe('UrlInput', () => {
 
   it('prevents multiple simultaneous validations', async () => {
     let validationCount = 0
-    const wrapper = mountComponent({
+    const { container, rerender, user } = renderComponent({
       modelValue: '',
       validateUrlFn: () => {
         validationCount++
@@ -148,14 +156,16 @@ describe('UrlInput', () => {
       }
     })
 
-    await wrapper.setProps({ modelValue: 'https://test.com' })
+    await rerender({ modelValue: 'https://test.com' })
     await nextTick()
     await nextTick()
 
     // Trigger multiple validations in quick succession
-    await wrapper.find('.pi-spinner').trigger('click')
-    await wrapper.find('.pi-spinner').trigger('click')
-    await wrapper.find('.pi-spinner').trigger('click')
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue InputIcon
+    const spinner = container.querySelector('.pi-spinner')!
+    await user.click(spinner)
+    await user.click(spinner)
+    await user.click(spinner)
 
     await nextTick()
     await nextTick()
@@ -165,55 +175,49 @@ describe('UrlInput', () => {
 
   describe('input cleaning functionality', () => {
     it('trims whitespace when user types', async () => {
-      const wrapper = mountComponent({
+      renderComponent({
         modelValue: '',
         placeholder: 'Enter URL'
       })
 
-      const input = wrapper.find('input')
+      const input = screen.getByRole('textbox')
 
-      // Test leading whitespace
-      await input.setValue('  https://leading-space.com')
-      await input.trigger('input')
+      // The component strips whitespace on input via handleInput
+      // We use fireEvent.input to simulate the input event handler directly
+      await fireEvent.update(input, '  https://leading-space.com')
       await nextTick()
-      expect(input.element.value).toBe('https://leading-space.com')
+      expect(input).toHaveValue('https://leading-space.com')
 
-      // Test trailing whitespace
-      await input.setValue('https://trailing-space.com  ')
-      await input.trigger('input')
+      await fireEvent.update(input, 'https://trailing-space.com  ')
       await nextTick()
-      expect(input.element.value).toBe('https://trailing-space.com')
+      expect(input).toHaveValue('https://trailing-space.com')
 
-      // Test both leading and trailing whitespace
-      await input.setValue('  https://both-spaces.com  ')
-      await input.trigger('input')
+      await fireEvent.update(input, '  https://both-spaces.com  ')
       await nextTick()
-      expect(input.element.value).toBe('https://both-spaces.com')
+      expect(input).toHaveValue('https://both-spaces.com')
 
-      // Test whitespace in the middle of the URL
-      await input.setValue('https:// middle-space.com')
-      await input.trigger('input')
+      await fireEvent.update(input, 'https:// middle-space.com')
       await nextTick()
-      expect(input.element.value).toBe('https://middle-space.com')
+      expect(input).toHaveValue('https://middle-space.com')
     })
 
     it('trims whitespace when value set externally', async () => {
-      const wrapper = mountComponent({
+      const { rerender } = renderComponent({
         modelValue: '  https://initial-value.com  ',
         placeholder: 'Enter URL'
       })
 
-      const input = wrapper.find('input')
+      const input = screen.getByRole('textbox')
 
       // Check initial value is trimmed
-      expect(input.element.value).toBe('https://initial-value.com')
+      expect(input).toHaveValue('https://initial-value.com')
 
       // Update props with whitespace
-      await wrapper.setProps({ modelValue: '  https://updated-value.com  ' })
+      await rerender({ modelValue: '  https://updated-value.com  ' })
       await nextTick()
 
       // Check updated value is trimmed
-      expect(input.element.value).toBe('https://updated-value.com')
+      expect(input).toHaveValue('https://updated-value.com')
     })
   })
 })

src/components/common/UserAvatar.test.ts

@@ -1,10 +1,9 @@
 import type { ComponentProps } from 'vue-component-type-helpers'
 
-import { mount } from '@vue/test-utils'
-import Avatar from 'primevue/avatar'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import PrimeVue from 'primevue/config'
-import { beforeEach, describe, expect, it } from 'vitest'
-import { createApp, nextTick } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import UserAvatar from './UserAvatar.vue'
@@ -24,85 +23,73 @@ const i18n = createI18n({
 })
 
 describe('UserAvatar', () => {
-  beforeEach(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
-  })
-
-  const mountComponent = (props: ComponentProps<typeof UserAvatar> = {}) => {
-    return mount(UserAvatar, {
+  function renderComponent(props: ComponentProps<typeof UserAvatar> = {}) {
+    return render(UserAvatar, {
       global: {
-        plugins: [PrimeVue, i18n],
-        components: { Avatar }
+        plugins: [PrimeVue, i18n]
       },
       props
     })
   }
 
-  it('renders correctly with photo Url', async () => {
-    const wrapper = mountComponent({
+  it('renders correctly with photo Url', () => {
+    renderComponent({
       photoUrl: 'https://example.com/avatar.jpg'
     })
 
-    const avatar = wrapper.findComponent(Avatar)
-    expect(avatar.exists()).toBe(true)
-    expect(avatar.props('image')).toBe('https://example.com/avatar.jpg')
-    expect(avatar.props('icon')).toBeNull()
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'src',
+      'https://example.com/avatar.jpg'
+    )
+    expect(screen.queryByTestId('avatar-icon')).not.toBeInTheDocument()
   })
 
   it('renders with default icon when no photo Url is provided', () => {
-    const wrapper = mountComponent({
+    renderComponent({
       photoUrl: undefined
     })
 
-    const avatar = wrapper.findComponent(Avatar)
-    expect(avatar.exists()).toBe(true)
-    expect(avatar.props('image')).toBeNull()
-    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    expect(screen.getByTestId('avatar-icon')).toBeInTheDocument()
   })
 
   it('renders with default icon when provided photo Url is null', () => {
-    const wrapper = mountComponent({
+    renderComponent({
       photoUrl: null
     })
 
-    const avatar = wrapper.findComponent(Avatar)
-    expect(avatar.exists()).toBe(true)
-    expect(avatar.props('image')).toBeNull()
-    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    expect(screen.getByTestId('avatar-icon')).toBeInTheDocument()
   })
 
   it('falls back to icon when image fails to load', async () => {
-    const wrapper = mountComponent({
+    renderComponent({
       photoUrl: 'https://example.com/broken-image.jpg'
     })
 
-    const avatar = wrapper.findComponent(Avatar)
-    expect(avatar.props('icon')).toBeNull()
+    const img = screen.getByRole('img')
+    expect(screen.queryByTestId('avatar-icon')).not.toBeInTheDocument()
 
-    // Simulate image load error
-    avatar.vm.$emit('error')
+    await fireEvent.error(img)
     await nextTick()
 
-    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
+    expect(screen.getByTestId('avatar-icon')).toBeInTheDocument()
   })
 
   it('uses provided ariaLabel', () => {
-    const wrapper = mountComponent({
+    renderComponent({
       photoUrl: 'https://example.com/avatar.jpg',
       ariaLabel: 'Custom Label'
     })
 
-    const avatar = wrapper.findComponent(Avatar)
-    expect(avatar.attributes('aria-label')).toBe('Custom Label')
+    expect(screen.getByLabelText('Custom Label')).toBeInTheDocument()
   })
 
   it('falls back to i18n translation when no ariaLabel is provided', () => {
-    const wrapper = mountComponent({
+    renderComponent({
       photoUrl: 'https://example.com/avatar.jpg'
     })
 
-    const avatar = wrapper.findComponent(Avatar)
-    expect(avatar.attributes('aria-label')).toBe('User Avatar')
+    expect(screen.getByLabelText('User Avatar')).toBeInTheDocument()
   })
 })

src/components/common/UserAvatar.vue

@@ -3,7 +3,12 @@
     class="aspect-square bg-interface-panel-selected-surface"
     :image="photoUrl ?? undefined"
     :icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
-    :pt:icon:class="{ 'size-4': !hasAvatar }"
+    :pt="{
+      icon: {
+        class: { 'size-4': !hasAvatar },
+        'data-testid': 'avatar-icon'
+      }
+    }"
     shape="circle"
     :aria-label="ariaLabel ?? $t('auth.login.userAvatar')"
     @error="handleImageError"

src/components/common/UserCredit.test.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -32,8 +32,8 @@ const mockBalance = vi.hoisted(() => ({
 
 const mockIsFetchingBalance = vi.hoisted(() => ({ value: false }))
 
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: vi.fn(() => ({
+vi.mock('@/stores/authStore', () => ({
+  useAuthStore: vi.fn(() => ({
     balance: mockBalance.value,
     isFetchingBalance: mockIsFetchingBalance.value
   }))
@@ -50,19 +50,19 @@ describe('UserCredit', () => {
     mockIsFetchingBalance.value = false
   })
 
-  const mountComponent = (props = {}) => {
+  const renderComponent = (props = {}) => {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
       messages: { en: enMessages }
     })
 
-    return mount(UserCredit, {
+    return render(UserCredit, {
       props,
       global: {
         plugins: [i18n],
         stubs: {
-          Skeleton: true,
+          Skeleton: { template: '<div data-testid="skeleton" />' },
           Tag: true
         }
       }
@@ -77,8 +77,8 @@ describe('UserCredit', () => {
         currency: 'usd'
       }
 
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('Credits')
+      renderComponent()
+      expect(screen.getByText(/Credits/)).toBeInTheDocument()
     })
 
     it('uses effective_balance_micros when zero', () => {
@@ -88,8 +88,8 @@ describe('UserCredit', () => {
         currency: 'usd'
       }
 
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('0')
+      renderComponent()
+      expect(screen.getByText(/\b0\b/)).toBeInTheDocument()
     })
 
     it('uses effective_balance_micros when negative', () => {
@@ -99,8 +99,8 @@ describe('UserCredit', () => {
         currency: 'usd'
       }
 
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('-')
+      renderComponent()
+      expect(screen.getByText((text) => text.includes('-'))).toBeInTheDocument()
     })
 
     it('falls back to amount_micros when effective_balance_micros is missing', () => {
@@ -109,8 +109,8 @@ describe('UserCredit', () => {
         currency: 'usd'
       } as typeof mockBalance.value
 
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('Credits')
+      renderComponent()
+      expect(screen.getByText(/Credits/)).toBeInTheDocument()
     })
 
     it('falls back to 0 when both effective_balance_micros and amount_micros are missing', () => {
@@ -118,8 +118,8 @@ describe('UserCredit', () => {
         currency: 'usd'
       } as typeof mockBalance.value
 
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('0')
+      renderComponent()
+      expect(screen.getByText(/\b0\b/)).toBeInTheDocument()
     })
   })
 
@@ -127,8 +127,8 @@ describe('UserCredit', () => {
     it('shows skeleton when loading', () => {
       mockIsFetchingBalance.value = true
 
-      const wrapper = mountComponent()
-      expect(wrapper.findComponent({ name: 'Skeleton' }).exists()).toBe(true)
+      renderComponent()
+      expect(screen.getAllByTestId('skeleton').length).toBeGreaterThan(0)
     })
   })
 })

src/components/common/UserCredit.vue

@@ -30,14 +30,14 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useAuthStore } from '@/stores/authStore'
 
 const { textClass, showCreditsOnly } = defineProps<{
   textClass?: string
   showCreditsOnly?: boolean
 }>()
 
-const authStore = useFirebaseAuthStore()
+const authStore = useAuthStore()
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 const { t, locale } = useI18n()
 

src/components/dialog/confirm/ConfirmHeader.vue

@@ -2,11 +2,15 @@
   <div
     class="flex items-center gap-2 p-4 font-inter text-sm font-bold text-base-foreground"
   >
+    <i v-if="icon" :class="cn(icon, 'size-4')" aria-hidden="true" />
     <span v-if="title" class="flex-auto">{{ title }}</span>
   </div>
 </template>
 <script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
 defineProps<{
   title?: string
+  icon?: string
 }>()
 </script>

src/components/dialog/confirm/confirmDialog.ts

@@ -5,6 +5,7 @@ import { useDialogStore } from '@/stores/dialogStore'
 import type { ComponentAttrs } from 'vue-component-type-helpers'
 
 interface ConfirmDialogOptions {
+  key?: string
   headerProps?: ComponentAttrs<typeof ConfirmHeader>
   props?: ComponentAttrs<typeof ConfirmBody>
   footerProps?: ComponentAttrs<typeof ConfirmFooter>
@@ -12,8 +13,9 @@ interface ConfirmDialogOptions {
 
 export function showConfirmDialog(options: ConfirmDialogOptions = {}) {
   const dialogStore = useDialogStore()
-  const { headerProps, props, footerProps } = options
+  const { key, headerProps, props, footerProps } = options
   return dialogStore.showDialog({
+    key,
     headerComponent: ConfirmHeader,
     component: ConfirmBody,
     footerComponent: ConfirmFooter,

src/components/dialog/content/ConfirmationDialogContent.test.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -22,8 +22,8 @@ describe('ConfirmationDialogContent', () => {
     setActivePinia(createPinia())
   })
 
-  function mountComponent(props: Partial<Props> = {}) {
-    return mount(ConfirmationDialogContent, {
+  function renderComponent(props: Partial<Props> = {}) {
+    return render(ConfirmationDialogContent, {
       global: {
         plugins: [PrimeVue, i18n]
       },
@@ -39,7 +39,7 @@ describe('ConfirmationDialogContent', () => {
   it('renders long messages without breaking layout', () => {
     const longFilename =
       'workflow_checkpoint_' + 'a'.repeat(200) + '.safetensors'
-    const wrapper = mountComponent({ message: longFilename })
-    expect(wrapper.text()).toContain(longFilename)
+    renderComponent({ message: longFilename })
+    expect(screen.getByText(longFilename)).toBeInTheDocument()
   })
 })

src/components/dialog/content/SignInContent.vue

@@ -147,7 +147,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import {
   configValueOrDefault,
@@ -167,7 +167,7 @@ const { onSuccess } = defineProps<{
 }>()
 
 const { t } = useI18n()
-const authActions = useFirebaseAuthActions()
+const authActions = useAuthActions()
 const isSecureContext = window.isSecureContext
 const isSignIn = ref(true)
 const showApiKeyForm = ref(false)

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -156,7 +156,7 @@ import { useI18n } from 'vue-i18n'
 import { creditsToUsd, usdToCredits } from '@/base/credits/comfyCredits'
 import Button from '@/components/ui/button/Button.vue'
 import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
@@ -171,7 +171,7 @@ const { isInsufficientCredits = false } = defineProps<{
 }>()
 
 const { t } = useI18n()
-const authActions = useFirebaseAuthActions()
+const authActions = useAuthActions()
 const dialogStore = useDialogStore()
 const settingsDialog = useSettingsDialog()
 const telemetry = useTelemetry()

src/components/dialog/content/UpdatePasswordContent.vue

@@ -21,10 +21,10 @@ import { ref } from 'vue'
 
 import PasswordFields from '@/components/dialog/content/signin/PasswordFields.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { updatePasswordSchema } from '@/schemas/signInSchema'
 
-const authActions = useFirebaseAuthActions()
+const authActions = useAuthActions()
 const loading = ref(false)
 
 const { onSuccess } = defineProps<{

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

@@ -116,12 +116,12 @@ import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useAuthStore } from '@/stores/authStore'
 import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 interface CreditHistoryItemData {
@@ -133,8 +133,8 @@ interface CreditHistoryItemData {
 
 const { buildDocsUrl, docsPaths } = useExternalLink()
 const dialogService = useDialogService()
-const authStore = useFirebaseAuthStore()
-const authActions = useFirebaseAuthActions()
+const authStore = useAuthStore()
+const authActions = useAuthActions()
 const commandStore = useCommandStore()
 const telemetry = useTelemetry()
 const { isActiveSubscription } = useBillingContext()

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

@@ -18,8 +18,8 @@ import ApiKeyForm from './ApiKeyForm.vue'
 const mockStoreApiKey = vi.fn()
 const mockLoading = vi.fn(() => false)
 
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: vi.fn(() => ({
+vi.mock('@/stores/authStore', () => ({
+  useAuthStore: vi.fn(() => ({
     loading: mockLoading()
   }))
 }))

src/components/dialog/content/signin/ApiKeyForm.vue

@@ -100,9 +100,9 @@ import {
 } from '@/platform/remoteConfig/remoteConfig'
 import { apiKeySchema } from '@/schemas/signInSchema'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useAuthStore } from '@/stores/authStore'
 
-const authStore = useFirebaseAuthStore()
+const authStore = useAuthStore()
 const apiKeyStore = useApiKeyAuthStore()
 const loading = computed(() => authStore.loading)
 const comfyPlatformBaseUrl = computed(() =>

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

@@ -1,22 +1,20 @@
 import { Form } from '@primevue/forms'
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import Button from '@/components/ui/button/Button.vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
 import ProgressSpinner from 'primevue/progressspinner'
 import ToastService from 'primevue/toastservice'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import SignInForm from './SignInForm.vue'
 
-type ComponentInstance = InstanceType<typeof SignInForm>
-
 // Mock firebase auth modules
 vi.mock('firebase/app', () => ({
   initializeApp: vi.fn(),
@@ -35,17 +33,17 @@ vi.mock('firebase/auth', () => ({
 
 // Mock the auth composables and stores
 const mockSendPasswordReset = vi.fn()
-vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
-  useFirebaseAuthActions: vi.fn(() => ({
+vi.mock('@/composables/auth/useAuthActions', () => ({
+  useAuthActions: vi.fn(() => ({
     sendPasswordReset: mockSendPasswordReset
   }))
 }))
 
-let mockLoading = false
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: vi.fn(() => ({
+const mockLoadingRef = ref(false)
+vi.mock('@/stores/authStore', () => ({
+  useAuthStore: vi.fn(() => ({
     get loading() {
-      return mockLoading
+      return mockLoadingRef.value
     }
   }))
 }))
@@ -58,259 +56,145 @@ vi.mock('primevue/usetoast', () => ({
   }))
 }))
 
+const forgotPasswordText = enMessages.auth.login.forgotPassword
+const loginButtonText = enMessages.auth.login.loginButton
+
 describe('SignInForm', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
     mockSendPasswordReset.mockReset()
     mockToastAdd.mockReset()
-    mockLoading = false
+    mockLoadingRef.value = false
   })
 
-  const mountComponent = (
-    props = {},
-    options = {}
-  ): VueWrapper<ComponentInstance> => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  function renderComponent(props: Record<string, unknown> = {}) {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
       messages: { en: enMessages }
     })
-
-    return mount(SignInForm, {
+    const user = userEvent.setup()
+    const result = render(SignInForm, {
       global: {
         plugins: [PrimeVue, i18n, ToastService],
-        components: {
-          Form,
-          Button,
-          InputText,
-          Password,
-          ProgressSpinner
-        }
+        components: { Form, Button, InputText, Password, ProgressSpinner }
       },
-      props,
-      ...options
+      props
     })
+    return { ...result, user }
+  }
+
+  function getEmailInput() {
+    return screen.getByPlaceholderText(enMessages.auth.login.emailPlaceholder)
+  }
+
+  function getPasswordInput() {
+    return screen.getByPlaceholderText(
+      enMessages.auth.login.passwordPlaceholder
+    )
   }
 
   describe('Forgot Password Link', () => {
-    it('shows disabled style when email is empty', async () => {
-      const wrapper = mountComponent()
-      await nextTick()
-
-      const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.select-none'
-      )
-
-      expect(forgotPasswordSpan.classes()).toContain('cursor-not-allowed')
-      expect(forgotPasswordSpan.classes()).toContain('opacity-50')
-    })
-
     it('shows toast and focuses email input when clicked while disabled', async () => {
-      const wrapper = mountComponent()
-      const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.select-none'
-      )
+      const { user } = renderComponent()
 
-      // Mock getElementById to track focus
-      const mockFocus = vi.fn()
-      const mockElement: Partial<HTMLElement> = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(
-        mockElement as HTMLElement
-      )
+      const emailInput = getEmailInput()
+      const focusSpy = vi.spyOn(emailInput, 'focus')
 
-      // Click forgot password link while email is empty
-      await forgotPasswordSpan.trigger('click')
-      await nextTick()
+      await user.click(screen.getByText(forgotPasswordText))
 
-      // Should show toast warning
       expect(mockToastAdd).toHaveBeenCalledWith({
         severity: 'warn',
         summary: enMessages.auth.login.emailPlaceholder,
         life: 5000
       })
 
-      // Should focus email input
-      expect(document.getElementById).toHaveBeenCalledWith(
-        'comfy-org-sign-in-email'
-      )
-      expect(mockFocus).toHaveBeenCalled()
+      expect(focusSpy).toHaveBeenCalled()
 
-      // Should NOT call sendPasswordReset
       expect(mockSendPasswordReset).not.toHaveBeenCalled()
     })
-
-    it('calls handleForgotPassword with email when link is clicked', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as typeof wrapper.vm & {
-        handleForgotPassword: (email: string, valid: boolean) => void
-        onSubmit: (data: { valid: boolean; values: unknown }) => void
-      }
-
-      // Spy on handleForgotPassword
-      const handleForgotPasswordSpy = vi.spyOn(
-        component,
-        'handleForgotPassword'
-      )
-
-      const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.select-none'
-      )
-
-      // Click the forgot password link
-      await forgotPasswordSpan.trigger('click')
-
-      // Should call handleForgotPassword
-      expect(handleForgotPasswordSpy).toHaveBeenCalled()
-    })
   })
 
   describe('Form Submission', () => {
-    it('emits submit event when onSubmit is called with valid data', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as typeof wrapper.vm & {
-        handleForgotPassword: (email: string, valid: boolean) => void
-        onSubmit: (data: { valid: boolean; values: unknown }) => void
-      }
+    it('emits submit event when form is submitted with valid data', async () => {
+      const onSubmit = vi.fn()
+      const { user } = renderComponent({ onSubmit })
 
-      // Call onSubmit directly with valid data
-      component.onSubmit({
-        valid: true,
-        values: { email: 'test@example.com', password: 'password123' }
+      await user.type(getEmailInput(), 'test@example.com')
+      await user.type(getPasswordInput(), 'password123')
+      await user.click(screen.getByRole('button', { name: loginButtonText }))
+
+      expect(onSubmit).toHaveBeenCalledWith({
+        email: 'test@example.com',
+        password: 'password123'
       })
-
-      // Check emitted event
-      expect(wrapper.emitted('submit')).toBeTruthy()
-      expect(wrapper.emitted('submit')?.[0]).toEqual([
-        {
-          email: 'test@example.com',
-          password: 'password123'
-        }
-      ])
     })
 
-    it('does not emit submit event when form is invalid', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as typeof wrapper.vm & {
-        handleForgotPassword: (email: string, valid: boolean) => void
-        onSubmit: (data: { valid: boolean; values: unknown }) => void
-      }
+    it('does not emit submit event when form data is invalid', async () => {
+      const onSubmit = vi.fn()
+      const { user } = renderComponent({ onSubmit })
 
-      // Call onSubmit with invalid form
-      component.onSubmit({ valid: false, values: {} })
+      await user.type(getEmailInput(), 'invalid-email')
+      await user.type(getPasswordInput(), 'password123')
+      await user.click(screen.getByRole('button', { name: loginButtonText }))
 
-      // Should not emit submit event
-      expect(wrapper.emitted('submit')).toBeFalsy()
+      expect(onSubmit).not.toHaveBeenCalled()
     })
   })
 
   describe('Loading State', () => {
-    it('shows spinner when loading', async () => {
-      mockLoading = true
+    it('shows spinner when loading', () => {
+      mockLoadingRef.value = true
+      renderComponent()
 
-      try {
-        const wrapper = mountComponent()
-        await nextTick()
-
-        expect(wrapper.findComponent(ProgressSpinner).exists()).toBe(true)
-        expect(wrapper.findComponent(Button).exists()).toBe(false)
-      } catch (error) {
-        // Fallback test - check HTML content if component rendering fails
-        mockLoading = true
-        const wrapper = mountComponent()
-        expect(wrapper.html()).toContain('p-progressspinner')
-        expect(wrapper.html()).not.toContain('<button')
-      }
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: loginButtonText })
+      ).not.toBeInTheDocument()
     })
 
     it('shows button when not loading', () => {
-      mockLoading = false
+      renderComponent()
 
-      const wrapper = mountComponent()
-
-      expect(wrapper.findComponent(ProgressSpinner).exists()).toBe(false)
-      expect(wrapper.findComponent(Button).exists()).toBe(true)
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: loginButtonText })
+      ).toBeInTheDocument()
     })
   })
 
   describe('Component Structure', () => {
     it('renders email input with correct attributes', () => {
-      const wrapper = mountComponent()
-      const emailInput = wrapper.findComponent(InputText)
+      renderComponent()
 
-      expect(emailInput.attributes('id')).toBe('comfy-org-sign-in-email')
-      expect(emailInput.attributes('autocomplete')).toBe('email')
-      expect(emailInput.attributes('name')).toBe('email')
-      expect(emailInput.attributes('type')).toBe('text')
+      const emailInput = getEmailInput()
+      expect(emailInput).toHaveAttribute('id', 'comfy-org-sign-in-email')
+      expect(emailInput).toHaveAttribute('autocomplete', 'email')
+      expect(emailInput).toHaveAttribute('name', 'email')
+      expect(emailInput).toHaveAttribute('type', 'text')
     })
 
     it('renders password input with correct attributes', () => {
-      const wrapper = mountComponent()
-      const passwordInput = wrapper.findComponent(Password)
+      renderComponent()
 
-      // Check props instead of attributes for Password component
-      expect(passwordInput.props('inputId')).toBe('comfy-org-sign-in-password')
-      // Password component passes name as prop, not attribute
-      expect(passwordInput.props('name')).toBe('password')
-      expect(passwordInput.props('feedback')).toBe(false)
-      expect(passwordInput.props('toggleMask')).toBe(true)
-    })
-
-    it('renders form with correct resolver', () => {
-      const wrapper = mountComponent()
-      const form = wrapper.findComponent(Form)
-
-      expect(form.props('resolver')).toBeDefined()
+      const passwordInput = getPasswordInput()
+      expect(passwordInput).toHaveAttribute('id', 'comfy-org-sign-in-password')
+      expect(passwordInput).toHaveAttribute('name', 'password')
     })
   })
 
-  describe('Focus Behavior', () => {
-    it('focuses email input when handleForgotPassword is called with invalid email', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as typeof wrapper.vm & {
-        handleForgotPassword: (email: string, valid: boolean) => void
-        onSubmit: (data: { valid: boolean; values: unknown }) => void
-      }
+  describe('Forgot Password with valid email', () => {
+    it('calls sendPasswordReset when email is valid', async () => {
+      const { user } = renderComponent()
 
-      // Mock getElementById to track focus
-      const mockFocus = vi.fn()
-      const mockElement: Partial<HTMLElement> = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(
-        mockElement as HTMLElement
-      )
+      await user.type(getEmailInput(), 'test@example.com')
+      await user.click(screen.getByText(forgotPasswordText))
 
-      // Call handleForgotPassword with no email
-      await component.handleForgotPassword('', false)
-
-      // Should focus email input
-      expect(document.getElementById).toHaveBeenCalledWith(
-        'comfy-org-sign-in-email'
-      )
-      expect(mockFocus).toHaveBeenCalled()
-    })
-
-    it('does not focus email input when valid email is provided', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as typeof wrapper.vm & {
-        handleForgotPassword: (email: string, valid: boolean) => void
-        onSubmit: (data: { valid: boolean; values: unknown }) => void
-      }
-
-      // Mock getElementById
-      const mockFocus = vi.fn()
-      const mockElement: Partial<HTMLElement> = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(
-        mockElement as HTMLElement
-      )
-
-      // Call handleForgotPassword with valid email
-      await component.handleForgotPassword('test@example.com', true)
-
-      // Should NOT focus email input
-      expect(document.getElementById).not.toHaveBeenCalled()
-      expect(mockFocus).not.toHaveBeenCalled()
-
-      // Should call sendPasswordReset
       expect(mockSendPasswordReset).toHaveBeenCalledWith('test@example.com')
+      expect(mockToastAdd).not.toHaveBeenCalled()
     })
   })
 })

src/components/dialog/content/signin/SignInForm.vue

@@ -88,14 +88,14 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { signInSchema } from '@/schemas/signInSchema'
 import type { SignInData } from '@/schemas/signInSchema'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useAuthStore } from '@/stores/authStore'
 import { cn } from '@/utils/tailwindUtil'
 
-const authStore = useFirebaseAuthStore()
-const firebaseAuthActions = useFirebaseAuthActions()
+const authStore = useAuthStore()
+const authActions = useAuthActions()
 const loading = computed(() => authStore.loading)
 const toast = useToast()
 
@@ -127,6 +127,6 @@ const handleForgotPassword = async (
     document.getElementById(emailInputId)?.focus?.()
     return
   }
-  await firebaseAuthActions.sendPasswordReset(email)
+  await authActions.sendPasswordReset(email)
 }
 </script>

src/components/dialog/content/signin/SignUpForm.vue

@@ -54,12 +54,12 @@ import { useI18n } from 'vue-i18n'
 import Button from '@/components/ui/button/Button.vue'
 import { signUpSchema } from '@/schemas/signInSchema'
 import type { SignUpData } from '@/schemas/signInSchema'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useAuthStore } from '@/stores/authStore'
 
 import PasswordFields from './PasswordFields.vue'
 
 const { t } = useI18n()
-const authStore = useFirebaseAuthStore()
+const authStore = useAuthStore()
 const loading = computed(() => authStore.loading)
 
 const emit = defineEmits<{

src/components/error/ErrorOverlay.vue

@@ -9,7 +9,7 @@
         role="alert"
         aria-live="assertive"
         data-testid="error-overlay"
-        class="pointer-events-auto flex w-80 min-w-72 flex-col overflow-hidden rounded-lg border border-interface-stroke bg-comfy-menu-bg shadow-interface transition-colors duration-200 ease-in-out"
+        class="pointer-events-auto flex w-80 min-w-72 flex-col overflow-hidden rounded-lg border border-destructive-background bg-comfy-menu-bg shadow-interface transition-colors duration-200 ease-in-out"
       >
         <!-- Header -->
         <div class="flex h-12 items-center gap-2 px-4">
@@ -27,10 +27,10 @@
         </div>
 
         <!-- Body -->
-        <div class="px-4 pb-3">
+        <div class="px-4 pb-3" data-testid="error-overlay-messages">
           <ul class="m-0 flex list-none flex-col gap-1.5 p-0">
             <li
-              v-for="(message, idx) in groupedErrorMessages"
+              v-for="(message, idx) in overlayMessages"
               :key="idx"
               class="flex min-w-0 items-baseline gap-2 text-sm/snug text-muted-foreground"
             >
@@ -46,7 +46,12 @@
 
         <!-- Footer -->
         <div class="flex items-center justify-end gap-4 px-4 py-3">
-          <Button variant="muted-textonly" size="unset" @click="dismiss">
+          <Button
+            variant="muted-textonly"
+            size="unset"
+            data-testid="error-overlay-dismiss"
+            @click="dismiss"
+          >
             {{ t('g.dismiss') }}
           </Button>
           <Button
@@ -55,9 +60,7 @@
             data-testid="error-overlay-see-errors"
             @click="seeErrors"
           >
-            {{
-              appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
-            }}
+            {{ appMode ? t('linearMode.error.goto') : seeErrorsLabel }}
           </Button>
         </div>
       </div>
@@ -84,7 +87,59 @@ const rightSidePanelStore = useRightSidePanelStore()
 const canvasStore = useCanvasStore()
 
 const { totalErrorCount, isErrorOverlayOpen } = storeToRefs(executionErrorStore)
-const { groupedErrorMessages } = useErrorGroups(ref(''), t)
+const { allErrorGroups, missingModelGroups } = useErrorGroups(ref(''), t)
+
+const singleErrorType = computed(() => {
+  const types = new Set(allErrorGroups.value.map((g) => g.type))
+  return types.size === 1 ? [...types][0] : null
+})
+
+const friendlyMessageMap: Record<string, () => string> = {
+  missing_node: () => t('errorOverlay.missingNodes'),
+  swap_nodes: () => t('errorOverlay.swapNodes'),
+  missing_media: () => t('errorOverlay.missingMedia'),
+  missing_model: () => {
+    const modelCount = missingModelGroups.value.reduce(
+      (count, g) => count + g.models.length,
+      0
+    )
+    return t('errorOverlay.missingModels', { count: modelCount }, modelCount)
+  }
+}
+
+function toFriendlyMessage(group: (typeof allErrorGroups.value)[number]) {
+  return friendlyMessageMap[group.type]?.() ?? null
+}
+
+const overlayMessages = computed<string[]>(() => {
+  const messages = new Set<string>()
+  for (const group of allErrorGroups.value) {
+    const friendly = toFriendlyMessage(group)
+    if (friendly) {
+      messages.add(friendly)
+    } else if (group.type === 'execution') {
+      for (const card of group.cards) {
+        for (const err of card.errors) {
+          messages.add(err.message)
+        }
+      }
+    }
+  }
+  return Array.from(messages)
+})
+
+const seeErrorsLabel = computed(() => {
+  const labelMap: Record<string, string> = {
+    missing_node: t('errorOverlay.showMissingNodes'),
+    missing_model: t('errorOverlay.showMissingModels'),
+    swap_nodes: t('errorOverlay.showSwapNodes'),
+    missing_media: t('errorOverlay.showMissingMedia')
+  }
+  if (singleErrorType.value) {
+    return labelMap[singleErrorType.value] ?? t('errorOverlay.seeErrors')
+  }
+  return t('errorOverlay.seeErrors')
+})
 
 const errorCountLabel = computed(() =>
   t(

src/components/graph/SelectionToolbox.test.ts

@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+/* eslint-disable testing-library/no-container, testing-library/no-node-access */
+import { fireEvent, render } from '@testing-library/vue'
 import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -129,6 +130,10 @@ describe('SelectionToolbox', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     canvasStore = useCanvasStore()
+    nodeDefMock = {
+      type: 'TestNode',
+      title: 'Test Node'
+    } as unknown
 
     // Mock the canvas to avoid "getCanvas: canvas is null" errors
     canvasStore.canvas = createMockCanvas()
@@ -136,8 +141,8 @@ describe('SelectionToolbox', () => {
     vi.resetAllMocks()
   })
 
-  const mountComponent = (props = {}) => {
-    return mount(SelectionToolbox, {
+  function renderComponent(props = {}): { container: Element } {
+    const { container } = render(SelectionToolbox, {
       props,
       global: {
         plugins: [i18n, PrimeVue],
@@ -169,7 +174,9 @@ describe('SelectionToolbox', () => {
           Load3DViewerButton: {
             template: '<div class="load-3d-viewer-button" />'
           },
-          MaskEditorButton: { template: '<div class="mask-editor-button" />' },
+          MaskEditorButton: {
+            template: '<div class="mask-editor-button" />'
+          },
           DeleteButton: {
             template:
               '<button data-testid="delete-button" class="delete-button" />'
@@ -193,6 +200,7 @@ describe('SelectionToolbox', () => {
         }
       }
     })
+    return { container }
   }
 
   describe('Button Visibility Logic', () => {
@@ -204,91 +212,91 @@ describe('SelectionToolbox', () => {
     it('should show info button only for single selections', () => {
       // Single node selection
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-      expect(wrapper.find('.info-button').exists()).toBe(true)
+      const { container } = renderComponent()
+      expect(container.querySelector('.info-button')).toBeTruthy()
 
-      // Multiple node selection
+      // Multiple node selection - render in separate test scope
       canvasStore.selectedItems = [
         createMockPositionable(),
         createMockPositionable()
       ]
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.info-button').exists()).toBe(false)
+      const { container: container2 } = renderComponent()
+      expect(container2.querySelector('.info-button')).toBeFalsy()
     })
 
     it('should not show info button when node definition is not found', () => {
       canvasStore.selectedItems = [createMockPositionable()]
-      // mock nodedef and return null
       nodeDefMock = null
-      // remount component
-      const wrapper = mountComponent()
-      expect(wrapper.find('.info-button').exists()).toBe(false)
+      const { container } = renderComponent()
+      expect(container.querySelector('.info-button')).toBeFalsy()
     })
 
     it('should show color picker for all selections', () => {
       // Single node selection
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-      expect(wrapper.find('[data-testid="color-picker-button"]').exists()).toBe(
-        true
-      )
+      const { container } = renderComponent()
+      expect(
+        container.querySelector('[data-testid="color-picker-button"]')
+      ).toBeTruthy()
 
       // Multiple node selection
       canvasStore.selectedItems = [
         createMockPositionable(),
         createMockPositionable()
       ]
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
+      const { container: container2 } = renderComponent()
       expect(
-        wrapper2.find('[data-testid="color-picker-button"]').exists()
-      ).toBe(true)
+        container2.querySelector('[data-testid="color-picker-button"]')
+      ).toBeTruthy()
     })
 
     it('should show frame nodes only for multiple selections', () => {
       // Single node selection
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-      expect(wrapper.find('.frame-nodes').exists()).toBe(false)
+      const { container } = renderComponent()
+      expect(container.querySelector('.frame-nodes')).toBeFalsy()
 
       // Multiple node selection
       canvasStore.selectedItems = [
         createMockPositionable(),
         createMockPositionable()
       ]
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.frame-nodes').exists()).toBe(true)
+      const { container: container2 } = renderComponent()
+      expect(container2.querySelector('.frame-nodes')).toBeTruthy()
     })
 
     it('should show bypass button for appropriate selections', () => {
       // Single node selection
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-      expect(wrapper.find('[data-testid="bypass-button"]').exists()).toBe(true)
+      const { container } = renderComponent()
+      expect(
+        container.querySelector('[data-testid="bypass-button"]')
+      ).toBeTruthy()
 
       // Multiple node selection
       canvasStore.selectedItems = [
         createMockPositionable(),
         createMockPositionable()
       ]
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('[data-testid="bypass-button"]').exists()).toBe(true)
+      const { container: container2 } = renderComponent()
+      expect(
+        container2.querySelector('[data-testid="bypass-button"]')
+      ).toBeTruthy()
     })
 
     it('should show common buttons for all selections', () => {
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true)
       expect(
-        wrapper.find('[data-testid="convert-to-subgraph-button"]').exists()
-      ).toBe(true)
-      expect(wrapper.find('[data-testid="more-options-button"]').exists()).toBe(
-        true
-      )
+        container.querySelector('[data-testid="delete-button"]')
+      ).toBeTruthy()
+      expect(
+        container.querySelector('[data-testid="convert-to-subgraph-button"]')
+      ).toBeTruthy()
+      expect(
+        container.querySelector('[data-testid="more-options-button"]')
+      ).toBeTruthy()
     })
 
     it('should show mask editor only for single image nodes', () => {
@@ -297,15 +305,14 @@ describe('SelectionToolbox', () => {
       // Single image node
       isImageNodeSpy.mockReturnValue(true)
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-      expect(wrapper.find('.mask-editor-button').exists()).toBe(true)
+      const { container } = renderComponent()
+      expect(container.querySelector('.mask-editor-button')).toBeTruthy()
 
       // Single non-image node
       isImageNodeSpy.mockReturnValue(false)
       canvasStore.selectedItems = [createMockPositionable()]
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.mask-editor-button').exists()).toBe(false)
+      const { container: container2 } = renderComponent()
+      expect(container2.querySelector('.mask-editor-button')).toBeFalsy()
     })
 
     it('should show Color picker button only for single Load3D nodes', () => {
@@ -314,15 +321,14 @@ describe('SelectionToolbox', () => {
       // Single Load3D node
       isLoad3dNodeSpy.mockReturnValue(true)
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-      expect(wrapper.find('.load-3d-viewer-button').exists()).toBe(true)
+      const { container } = renderComponent()
+      expect(container.querySelector('.load-3d-viewer-button')).toBeTruthy()
 
       // Single non-Load3D node
       isLoad3dNodeSpy.mockReturnValue(false)
       canvasStore.selectedItems = [createMockPositionable()]
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.load-3d-viewer-button').exists()).toBe(false)
+      const { container: container2 } = renderComponent()
+      expect(container2.querySelector('.load-3d-viewer-button')).toBeFalsy()
     })
 
     it('should show ExecuteButton only when output nodes are selected', () => {
@@ -335,22 +341,20 @@ describe('SelectionToolbox', () => {
         { type: 'SaveImage' }
       ] as LGraphNode[])
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-      expect(wrapper.find('.execute-button').exists()).toBe(true)
+      const { container } = renderComponent()
+      expect(container.querySelector('.execute-button')).toBeTruthy()
 
       // Without output node selected
       isOutputNodeSpy.mockReturnValue(false)
       filterOutputNodesSpy.mockReturnValue([])
       canvasStore.selectedItems = [createMockPositionable()]
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.execute-button').exists()).toBe(false)
+      const { container: container2 } = renderComponent()
+      expect(container2.querySelector('.execute-button')).toBeFalsy()
 
       // No selection at all
       canvasStore.selectedItems = []
-      wrapper2.unmount()
-      const wrapper3 = mountComponent()
-      expect(wrapper3.find('.execute-button').exists()).toBe(false)
+      const { container: container3 } = renderComponent()
+      expect(container3.querySelector('.execute-button')).toBeFalsy()
     })
   })
 
@@ -358,19 +362,20 @@ describe('SelectionToolbox', () => {
     it('should show dividers between button groups when both groups have buttons', () => {
       // Setup single node to show info + other buttons
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      const dividers = wrapper.findAll('.vertical-divider')
+      const dividers = container.querySelectorAll('.vertical-divider')
       expect(dividers.length).toBeGreaterThan(0)
     })
 
     it('should not show dividers when adjacent groups are empty', () => {
       // No selection should show minimal buttons and dividers
       canvasStore.selectedItems = []
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      const buttons = wrapper.find('.panel').element.children
-      expect(buttons.length).toBeGreaterThan(0) // At least MoreOptions should show
+      expect(
+        container.querySelector('[data-testid="more-options-button"]')
+      ).toBeTruthy()
     })
   })
 
@@ -390,9 +395,9 @@ describe('SelectionToolbox', () => {
       } as ReturnType<typeof useExtensionService>)
 
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      expect(wrapper.find('.extension-command-button').exists()).toBe(true)
+      expect(container.querySelector('.extension-command-button')).toBeTruthy()
     })
 
     it('should not render extension commands when none available', () => {
@@ -400,47 +405,9 @@ describe('SelectionToolbox', () => {
       mockExtensionService.mockReturnValue(createMockExtensionService())
 
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      expect(wrapper.find('.extension-command-button').exists()).toBe(false)
-    })
-  })
-
-  describe('Container Styling', () => {
-    it('should apply minimap container styles', () => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue(createMockExtensionService())
-
-      canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-
-      const panel = wrapper.find('.panel')
-      expect(panel.exists()).toBe(true)
-    })
-
-    it('should have correct CSS classes', () => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue(createMockExtensionService())
-
-      canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-
-      const panel = wrapper.find('.panel')
-      expect(panel.classes()).toContain('selection-toolbox')
-      expect(panel.classes()).toContain('absolute')
-      expect(panel.classes()).toContain('left-1/2')
-      expect(panel.classes()).toContain('rounded-lg')
-    })
-
-    it('should handle animation class conditionally', () => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue(createMockExtensionService())
-
-      canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
-
-      const panel = wrapper.find('.panel')
-      expect(panel.exists()).toBe(true)
+      expect(container.querySelector('.extension-command-button')).toBeFalsy()
     })
   })
 
@@ -461,10 +428,11 @@ describe('SelectionToolbox', () => {
       mockExtensionService.mockReturnValue(createMockExtensionService())
 
       canvasStore.selectedItems = [createMockPositionable()]
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      const panel = wrapper.find('.panel')
-      await panel.trigger('wheel')
+      const panel = container.querySelector('.panel')
+      expect(panel).toBeTruthy()
+      await fireEvent.wheel(panel!)
 
       expect(forwardEventToCanvasSpy).toHaveBeenCalled()
     })
@@ -478,12 +446,12 @@ describe('SelectionToolbox', () => {
 
     it('should hide most buttons when no items selected', () => {
       canvasStore.selectedItems = []
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      expect(wrapper.find('.info-button').exists()).toBe(false)
-      expect(wrapper.find('.color-picker-button').exists()).toBe(false)
-      expect(wrapper.find('.frame-nodes').exists()).toBe(false)
-      expect(wrapper.find('.bookmark-button').exists()).toBe(false)
+      expect(container.querySelector('.info-button')).toBeFalsy()
+      expect(container.querySelector('.color-picker-button')).toBeFalsy()
+      expect(container.querySelector('.frame-nodes')).toBeFalsy()
+      expect(container.querySelector('.bookmark-button')).toBeFalsy()
     })
   })
 })

src/components/graph/modals/ZoomControlsModal.vue

@@ -11,6 +11,7 @@
       <div class="flex flex-col gap-1">
         <div
           class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          data-testid="zoom-in-action"
           @mousedown="startRepeat('Comfy.Canvas.ZoomIn')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
@@ -23,6 +24,7 @@
 
         <div
           class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          data-testid="zoom-out-action"
           @mousedown="startRepeat('Comfy.Canvas.ZoomOut')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
@@ -35,6 +37,7 @@
 
         <div
           class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          data-testid="zoom-to-fit-action"
           @click="executeCommand('Comfy.Canvas.FitView')"
         >
           <span class="font-medium">{{ $t('zoomControls.zoomToFit') }}</span>
@@ -46,6 +49,7 @@
         <div
           ref="zoomInputContainer"
           class="zoomInputContainer flex items-center gap-1 rounded-sm bg-input-surface p-2"
+          data-testid="zoom-percentage-input"
         >
           <InputNumber
             :default-value="canvasStore.appScalePercentage"