fix: update for coderabbitai, write e2e tests for cloud page

- Add HeroSection, CloudBannerSection, ReasonSection, EcoSystemSection,
  ProductCardsSection, FAQSection components
- Add ProductHeroBadge with two-size node badge variant
- Extend NodeBadge with per-segment class and configurable union icon
- Add useDownloadUrl composable for OS-aware download links
- Add all en/zh-CN translations for the download page
- Replace zh-CN hardcoded download page with shared components
- Add icon-mask utility for CSS mask-based icons
- Add Playwright e2e tests (smoke, interaction, mobile)
- FAQ uses independent expand/collapse (all open by default)
- Sticky headings in ReasonSection and FAQSection on all viewports

apps/website/e2e/cloud.spec.ts

@@ -0,0 +1,137 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Cloud page @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/cloud')
+  })
+
+  test('has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Comfy Cloud — AI in the Cloud')
+  })
+
+  test('HeroSection heading and subtitle are visible', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: /The full power of/i, level: 1 })
+    ).toBeVisible()
+    await expect(
+      page.getByText(/The easiest way to start with ComfyUI/)
+    ).toBeVisible()
+  })
+
+  test('HeroSection has CTA button linking to cloud', async ({ page }) => {
+    const cta = page.getByRole('link', { name: /TRY COMFY CLOUD FOR FREE/i })
+    await expect(cta).toBeVisible()
+  })
+
+  test('ReasonSection heading and reasons are visible', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: /Why.*professionals.*choose/i })
+    ).toBeVisible()
+
+    for (const title of [
+      'Powerful GPUs',
+      'All models',
+      'More control',
+      'Community workflows'
+    ]) {
+      await expect(page.getByText(title).first()).toBeVisible()
+    }
+  })
+
+  test('AIModelsSection heading and 5 model cards are visible', async ({
+    page
+  }) => {
+    await expect(
+      page.getByRole('heading', { name: /leading AI models/i })
+    ).toBeVisible()
+
+    const grid = page.locator('.grid', {
+      has: page.getByText('Grok Imagine')
+    })
+    const modelCards = grid.locator('a[href="https://comfy.org/workflows"]')
+    await expect(modelCards).toHaveCount(5)
+  })
+
+  test('AIModelsSection CTA links to workflows', async ({ page }) => {
+    const cta = page.getByRole('link', {
+      name: /EXPLORE WORKFLOWS/i
+    })
+    await expect(cta.first()).toBeVisible()
+    await expect(cta.first()).toHaveAttribute(
+      'href',
+      'https://comfy.org/workflows'
+    )
+  })
+
+  test('AudienceSection heading and cards are visible', async ({ page }) => {
+    await expect(page.getByText(/creators/i).first()).toBeVisible()
+
+    for (const label of ['CREATORS', 'TEAMS & STUDIOS']) {
+      await expect(page.getByText(label).first()).toBeVisible()
+    }
+  })
+
+  test('PricingSection heading and CTA are visible', async ({ page }) => {
+    await expect(page.getByText(/Simple, credit-based pricing/)).toBeVisible()
+
+    const cta = page.getByRole('link', { name: /SEE PRICING PLANS/i })
+    await expect(cta).toBeVisible()
+    await expect(cta).toHaveAttribute('href', '/cloud/pricing')
+  })
+
+  test('ProductCardsSection has 3 product cards', async ({ page }) => {
+    const section = page.locator('section', {
+      has: page.getByRole('heading', { name: /The AI creation/ })
+    })
+    const cards = section.locator('a[href]')
+    await expect(cards).toHaveCount(3)
+  })
+
+  test('FAQSection heading is visible with 15 items', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: /FAQ/i })).toBeVisible()
+
+    const faqButtons = page.locator('button[aria-controls^="faq-panel-"]')
+    await expect(faqButtons).toHaveCount(15)
+  })
+})
+
+test.describe('Cloud FAQ accordion @interaction', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/cloud')
+  })
+
+  test('all FAQs are expanded by default', async ({ page }) => {
+    await expect(
+      page.getByText(/Comfy Cloud is a version of ComfyUI/i)
+    ).toBeVisible()
+  })
+
+  test('clicking an expanded FAQ collapses it', async ({ page }) => {
+    const firstQuestion = page.getByRole('button', {
+      name: /What is Comfy Cloud/i
+    })
+    await firstQuestion.scrollIntoViewIfNeeded()
+    await firstQuestion.click()
+
+    await expect(
+      page.getByText(/Comfy Cloud is a version of ComfyUI/i)
+    ).toBeHidden()
+  })
+
+  test('clicking a collapsed FAQ expands it again', async ({ page }) => {
+    const firstQuestion = page.getByRole('button', {
+      name: /What is Comfy Cloud/i
+    })
+    await firstQuestion.scrollIntoViewIfNeeded()
+
+    await firstQuestion.click()
+    await expect(
+      page.getByText(/Comfy Cloud is a version of ComfyUI/i)
+    ).toBeHidden()
+
+    await firstQuestion.click()
+    await expect(
+      page.getByText(/Comfy Cloud is a version of ComfyUI/i)
+    ).toBeVisible()
+  })
+})

apps/website/e2e/download.spec.ts

@@ -0,0 +1,167 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Download page @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/download')
+  })
+
+  test('has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Download Comfy — Run AI Locally')
+  })
+
+  test('CloudBannerSection is visible with cloud link', async ({ page }) => {
+    const link = page.getByRole('link', { name: /TRY COMFY CLOUD/i })
+    await expect(link).toBeVisible()
+    await expect(link).toHaveAttribute('href', 'https://app.comfy.org')
+  })
+
+  test('HeroSection heading and subtitle are visible', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: /Run on your hardware/i, level: 1 })
+    ).toBeVisible()
+    await expect(page.getByText(/The full ComfyUI engine/)).toBeVisible()
+  })
+
+  test('HeroSection has download and GitHub buttons', async ({ page }) => {
+    const hero = page.locator('section', {
+      has: page.getByRole('heading', {
+        name: /Run on your hardware/i,
+        level: 1
+      })
+    })
+    const downloadBtn = hero.getByRole('link', { name: /DOWNLOAD LOCAL/i })
+    await expect(downloadBtn).toBeVisible()
+    await expect(downloadBtn).toHaveAttribute('target', '_blank')
+
+    const githubBtn = hero.getByRole('link', { name: /INSTALL FROM GITHUB/i })
+    await expect(githubBtn).toBeVisible()
+    await expect(githubBtn).toHaveAttribute(
+      'href',
+      'https://github.com/Comfy-Org/ComfyUI'
+    )
+  })
+
+  test('ReasonSection heading and reasons are visible', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: /Why.*professionals.*choose/i })
+    ).toBeVisible()
+
+    for (const title of [
+      'Unlimited',
+      'Any model',
+      'Your machine',
+      'Free. Open Source'
+    ]) {
+      await expect(page.getByText(title).first()).toBeVisible()
+    }
+  })
+
+  test('EcoSystemSection heading is visible', async ({ page }) => {
+    await expect(page.getByText(/An ecosystem that moves faster/)).toBeVisible()
+  })
+
+  test('ProductCardsSection has 3 product cards', async ({ page }) => {
+    const section = page.locator('section', {
+      has: page.getByRole('heading', { name: /The AI creation/ })
+    })
+    const cards = section.locator('a[href]')
+    await expect(cards).toHaveCount(3)
+  })
+
+  test('ProductCardsSection links to cloud, api, enterprise', async ({
+    page
+  }) => {
+    const section = page.locator('section', {
+      has: page.getByRole('heading', { name: /The AI creation/ })
+    })
+
+    for (const href of ['/cloud', '/api', '/cloud/enterprise']) {
+      await expect(section.locator(`a[href="${href}"]`)).toBeVisible()
+    }
+  })
+
+  test('FAQSection heading is visible with 8 items', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: /FAQ/i })).toBeVisible()
+
+    const faqButtons = page.locator('button[aria-controls^="faq-panel-"]')
+    await expect(faqButtons).toHaveCount(8)
+  })
+})
+
+test.describe('FAQ accordion @interaction', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/download')
+  })
+
+  test('all FAQs are expanded by default', async ({ page }) => {
+    await expect(
+      page.getByText(/A dedicated GPU is strongly recommended/i)
+    ).toBeVisible()
+    await expect(page.getByText(/ComfyUI is lightweight/i)).toBeVisible()
+  })
+
+  test('clicking an expanded FAQ collapses it', async ({ page }) => {
+    const firstQuestion = page.getByRole('button', {
+      name: /Do I need a GPU/i
+    })
+    await firstQuestion.scrollIntoViewIfNeeded()
+    await firstQuestion.click()
+
+    await expect(
+      page.getByText(/A dedicated GPU is strongly recommended/i)
+    ).toBeHidden()
+  })
+
+  test('clicking a collapsed FAQ expands it again', async ({ page }) => {
+    const firstQuestion = page.getByRole('button', {
+      name: /Do I need a GPU/i
+    })
+    await firstQuestion.scrollIntoViewIfNeeded()
+
+    await firstQuestion.click()
+    await expect(
+      page.getByText(/A dedicated GPU is strongly recommended/i)
+    ).toBeHidden()
+
+    await firstQuestion.click()
+    await expect(
+      page.getByText(/A dedicated GPU is strongly recommended/i)
+    ).toBeVisible()
+  })
+})
+
+test.describe('Download page mobile @mobile', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/download')
+  })
+
+  test('CloudBannerSection is visible', async ({ page }) => {
+    await expect(page.getByText(/Need more power/)).toBeVisible()
+  })
+
+  test('HeroSection heading is visible', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: /Run on your hardware/i, level: 1 })
+    ).toBeVisible()
+  })
+
+  test('download buttons are stacked vertically', async ({ page }) => {
+    const hero = page.locator('section', {
+      has: page.getByRole('heading', {
+        name: /Run on your hardware/i,
+        level: 1
+      })
+    })
+    const downloadBtn = hero.getByRole('link', { name: /DOWNLOAD LOCAL/i })
+    const githubBtn = hero.getByRole('link', { name: /INSTALL FROM GITHUB/i })
+
+    await downloadBtn.scrollIntoViewIfNeeded()
+
+    const downloadBox = await downloadBtn.boundingBox()
+    const githubBox = await githubBtn.boundingBox()
+
+    expect(downloadBox, 'download button bounding box').not.toBeNull()
+    expect(githubBox, 'github button bounding box').not.toBeNull()
+    expect(githubBox!.y).toBeGreaterThan(downloadBox!.y)
+  })
+})

apps/website/public/icons/ai-models/gemini.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.0589 13.0316H16.014V19.1831H24.6589C24.5199 20.0537 24.2078 20.9101 23.7509 21.691C23.2273 22.5858 22.5801 23.2669 21.9167 23.7857C19.9294 25.3395 17.6126 25.6572 16.0035 25.6572C11.9389 25.6572 8.46594 22.9766 7.12148 19.3341C7.06723 19.2019 7.0312 19.0654 6.98733 18.9304C6.69023 18.0034 6.5279 17.0215 6.5279 16.001C6.5279 14.939 6.70369 13.9223 7.0242 12.9621C8.28844 9.17522 11.8397 6.34675 16.0064 6.34675C16.8445 6.34675 17.6516 6.44854 18.417 6.65159C20.1661 7.11561 21.4034 8.0295 22.1615 8.75237L26.7361 4.18101C23.9534 1.57756 20.3259 3.9369e-09 15.9988 3.9369e-09C12.5396 -7.59723e-05 9.34593 1.09971 6.72881 2.95838C4.60641 4.46571 2.86573 6.48384 1.69099 8.82767C0.598311 11.0009 0 13.4092 0 15.9986C0 18.5881 0.599225 21.0215 1.69191 23.1746V23.1891C2.84605 25.4749 4.5338 27.4431 6.58508 28.9435C8.3771 30.2543 11.5904 32 15.9988 32C18.534 32 20.7809 31.5336 22.7625 30.6595C24.192 30.029 25.4585 29.2066 26.6052 28.1496C28.1203 26.753 29.3069 25.0255 30.1168 23.038C30.9268 21.0505 31.36 18.8029 31.36 16.3662C31.36 15.2314 31.2483 14.0791 31.0589 13.0316Z" fill="white"/>
+</svg>

apps/website/public/icons/ai-models/grok.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3587 19.8988L22.9972 11.9646C23.5187 11.5757 24.2642 11.7274 24.5127 12.3316C25.8207 15.5179 25.2363 19.3471 22.634 21.9762C20.0318 24.6052 16.411 25.1818 13.1015 23.8686L9.48617 25.5598C14.6716 29.1406 20.9684 28.255 24.9032 24.277C28.0243 21.1237 28.9909 16.8255 28.0871 12.9496L28.0952 12.9578C26.7845 7.26377 28.4175 4.98781 31.7625 0.333808C31.8416 0.223459 31.9208 0.113108 32 0L27.5982 4.44709V4.4333L12.356 19.9016" fill="white"/>
+<path d="M10.1634 21.8272C6.44151 18.2353 7.0832 12.6764 10.2589 9.47079C12.6072 7.09824 16.4546 6.12993 19.8133 7.55344L23.4204 5.87061C22.7706 5.3961 21.9377 4.88574 20.982 4.52709C16.6622 2.73116 11.4904 3.62499 7.97884 7.16997C4.60108 10.5825 3.53887 15.8297 5.36292 20.3071C6.72549 23.6535 4.49185 26.0204 2.24183 28.4096C1.44449 29.2564 0.644421 30.1034 0 31L10.1606 21.8299" fill="white"/>
+</svg>

apps/website/public/icons/ai-models/ltx.svg

@@ -0,0 +1,5 @@
+<svg width="38" height="16" viewBox="0 0 38 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.6714 2.88536C26.1493 2.82951 26.7876 2.87631 27.2746 2.87552C29.4061 2.87217 29.7407 4.85107 31.0086 6.17285C31.3057 5.47951 31.7391 4.76441 32.1866 4.149C32.6673 3.48769 33.0911 3.10066 33.953 2.95519C34.7328 2.82353 36.8597 2.74599 37.4893 3.17876C37.6223 3.27022 37.7198 3.40009 37.7342 3.55864C37.7879 4.1504 34.524 8.38331 33.8977 9.14783C34.6224 10.5615 37.9453 14.0003 37.9993 15.2938C38.0058 15.4508 37.9689 15.5748 37.8512 15.6902C37.4841 16.0502 36.5552 15.9679 36.0583 15.9783C35.4029 15.9928 34.8918 16.0117 34.2446 15.9184C32.7906 15.7089 32.4029 14.8649 31.7106 13.8079C31.4542 13.4166 31.1547 13.018 30.868 12.641C29.8939 13.549 29.4433 14.7027 28.431 15.5215C27.7186 16.0978 24.0748 16.1659 23.6489 15.5402C23.3554 14.4588 26.2687 11.0941 26.96 10.1276C27.1912 9.80439 27.3923 9.66031 27.5531 9.23699L27.5618 9.21374C27.0682 8.21459 23.6269 4.06408 23.8836 3.31986C24.2686 2.90918 25.1029 2.92321 25.6714 2.88536Z" fill="white"/>
+<path d="M13.5798 0.0217006C14.0245 0.0102399 17.731 -0.0733401 17.8671 0.188355C18.0783 0.594232 18.0745 2.39664 17.9571 2.91885C18.7829 2.90052 20.9815 2.73358 21.576 3.24255C21.9254 3.54165 21.8894 6.31329 21.4914 6.7223C20.9809 6.93681 18.6254 6.86654 17.9992 6.8141C18.2005 8.24188 17.6814 9.92179 18.1662 11.2688C18.2188 11.4149 18.4418 11.6515 18.5582 11.7758L18.5851 11.7807C19.4248 11.9253 20.4783 11.7921 21.4193 11.8541C21.5894 11.9423 21.7529 12.0279 21.8509 12.193C22.2597 12.8822 22.1381 14.3802 21.9594 15.1114C21.9191 15.307 21.8419 15.6435 21.6653 15.748C20.9367 16.1792 19.0596 15.9477 18.2447 15.8484C16.5346 15.6399 15.0424 15.373 13.9488 14.018C12.762 12.5472 12.9954 10.9199 12.9709 9.17573C12.9618 8.52672 12.9588 7.41995 13.0502 6.80867C12.4361 6.84166 10.8569 7.01497 10.4917 6.5846C10.1043 6.12824 10.3072 3.9303 10.3518 3.3296C10.9517 2.70004 12.1816 2.90197 13.0395 2.9117C13.0534 2.19219 12.7947 0.87298 13.1333 0.195009C13.203 0.055524 13.4145 0.0516102 13.5798 0.0217006Z" fill="white"/>
+<path d="M1.66628 2.88823C2.58555 2.81214 4.10841 2.81874 4.945 3.20141C5.33248 5.15667 4.99029 7.60389 5.06565 9.60325C5.07579 9.8735 4.9874 11.6351 5.25399 11.7357C6.28618 12.1249 11.1291 11.506 11.8399 12.0455C12.163 12.56 12.0235 15.1134 11.8775 15.7598C11.3062 15.9103 11.0189 15.8876 10.4264 15.8899L5.78094 15.8919C3.59892 15.9082 2.36972 16.0953 0.208639 15.5943C0.116058 15.3247 0.0349184 14.7783 0.0303189 14.4959C-0.0272935 10.99 0.0150458 7.4781 0.0142792 3.97146C0.0140433 2.80644 0.604555 2.93016 1.66628 2.88823Z" fill="white"/>
+</svg>

apps/website/public/icons/ai-models/qwen.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1935 32L24.9858 15.5745L27.22 19.5198H31.4952L27.22 12.0998L29.4765 8.3063H12.2615L14.5178 4.36093L12.2615 0.332235L7.41455 8.3063H2.39172L11.6896 23.9422H7.41455L4.85911 27.9711H13.194L15.6878 32L15.6431 31.9985C15.4212 31.9838 15.2231 31.8597 15.1159 31.668L13.1938 28.3031H4.85911C4.6194 28.3031 4.40156 28.1756 4.2872 27.9711L2.03092 24.1776C1.85061 23.8609 1.8506 23.4694 2.03092 23.1527L3.95303 19.7881L0.135229 12.9026C-0.0450889 12.586 -0.0450637 12.1944 0.135229 11.8778L2.39151 8.08424C2.50586 7.87972 2.72371 7.75222 2.96341 7.75222H7.41455L11.6896 0.332235C11.8039 0.127714 12.0218 0 12.2615 0H16.7124C16.9521 0 17.17 0.127714 17.2843 0.332235L19.2064 3.69689H27.5411C27.7808 3.69689 27.9986 3.82439 28.113 4.02891L30.3693 7.82245C30.5496 8.13912 30.5496 8.53061 30.3693 8.84729L28.113 12.6408L31.6316 19.0976C31.8119 19.4143 31.8119 19.8058 31.6316 20.1224L29.3751 23.916C29.2608 24.1204 29.0431 24.248 28.8034 24.248H24.9856L20.7106 31.668C20.5962 31.8725 20.3784 32 20.1387 32H16.1935Z" fill="white"/>
+<path d="M22.0609 13.703H10.6869L16.1935 23.001L22.0609 13.703Z" fill="white"/>
+</svg>

apps/website/public/icons/ai-models/wan.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1935 32L24.9858 15.5745L27.22 19.5198H31.4952L27.22 12.0998L29.4765 8.3063H12.2615L14.5178 4.36093L12.2615 0.332235L7.41455 8.3063H2.39172L11.6896 23.9422H7.41455L4.85911 27.9711H13.194L15.6878 32L15.6431 31.9985C15.4212 31.9838 15.2231 31.8597 15.1159 31.668L13.1938 28.3031H4.85911C4.6194 28.3031 4.40156 28.1756 4.2872 27.9711L2.03092 24.1776C1.85061 23.8609 1.8506 23.4694 2.03092 23.1527L3.95303 19.7881L0.135229 12.9026C-0.0450889 12.586 -0.0450637 12.1944 0.135229 11.8778L2.39151 8.08424C2.50586 7.87972 2.72371 7.75222 2.96341 7.75222H7.41455L11.6896 0.332235C11.8039 0.127714 12.0218 0 12.2615 0H16.7124C16.9521 0 17.17 0.127714 17.2843 0.332235L19.2064 3.69689H27.5411C27.7808 3.69689 27.9986 3.82439 28.113 4.02891L30.3693 7.82245C30.5496 8.13912 30.5496 8.53061 30.3693 8.84729L28.113 12.6408L31.6316 19.0976C31.8119 19.4143 31.8119 19.8058 31.6316 20.1224L29.3751 23.916C29.2608 24.1204 29.0431 24.248 28.8034 24.248H24.9856L20.7106 31.668C20.5962 31.8725 20.3784 32 20.1387 32H16.1935Z" fill="white"/>
+<path d="M22.0609 13.703H10.6869L16.1935 23.001L22.0609 13.703Z" fill="white"/>
+</svg>

apps/website/public/icons/node-union-2size.svg

@@ -0,0 +1,3 @@
+<svg width="62" height="94.14" viewBox="0 0 62 80" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.9346 0C33.456 0.000149153 39.6242 8.20368 36.7305 18.3115L33.9385 28.0635C32.7454 32.2159 35.8674 36.3555 40.1826 36.3555C42.9814 36.3555 45.4493 34.5653 46.3311 31.9268L47.7129 27.002C49.4225 20.9287 55.812 16 62 16V64H48.5342C42.3461 64 38.7182 59.0713 40.4199 52.998L40.8398 51.5L40.8301 51.4922C42.0104 47.3146 38.8756 43.1751 34.5352 43.1748C31.6287 43.1748 29.0515 45.1048 28.252 47.9111L24.3047 61.6885H24.2793C21.3855 71.7964 10.5089 80 0 80V0H22.9346Z" fill="#F2FF59"/>
+</svg>

apps/website/public/images/cloud/hero-cube.svg

@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 900" fill="none">
+  <!-- Background geometric lines -->
+  <g stroke="#49378B" stroke-width="1.5" fill="none" opacity="0.4">
+    <!-- Outer hexagonal frame layers -->
+    <path d="M400 80 L600 200 L600 440 L400 560 L200 440 L200 200 Z" />
+    <path d="M400 120 L570 220 L570 420 L400 520 L230 420 L230 220 Z" />
+    <!-- Connector lines going up -->
+    <line x1="300" y1="160" x2="300" y2="60" />
+    <line x1="400" y1="120" x2="400" y2="20" />
+    <line x1="500" y1="160" x2="500" y2="60" />
+    <!-- Bottom platform layers -->
+    <path d="M250 520 L550 520 L600 560 L600 600 L400 700 L200 600 L200 560 Z" opacity="0.3" />
+    <path d="M280 620 L520 620 L560 650 L560 680 L400 760 L240 680 L240 650 Z" opacity="0.2" />
+    <path d="M320 700 L480 700 L510 720 L510 740 L400 800 L290 740 L290 720 Z" opacity="0.15" />
+  </g>
+
+  <!-- 3D Isometric cube cluster -->
+  <g transform="translate(400, 380)">
+    <!-- Back layer cubes (purple/dark) -->
+    <!-- Top back -->
+    <g transform="translate(0, -100)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#49378B" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#5a45a0" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#3d2d75" />
+    </g>
+
+    <!-- Middle row - left back -->
+    <g transform="translate(-70, -55)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#49378B" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#5a45a0" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#3d2d75" />
+    </g>
+    <!-- Middle row - right back -->
+    <g transform="translate(70, -55)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#49378B" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#5a45a0" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#3d2d75" />
+    </g>
+
+    <!-- Yellow accent cubes - front facing -->
+    <!-- Top -->
+    <g transform="translate(0, -65)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#f2ff59" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#f2ff59" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#d4e04e" />
+      <polygon points="0,-5 -35,-20 -35,20 0,40" fill="#e0ec50" />
+    </g>
+
+    <!-- Middle left yellow -->
+    <g transform="translate(-70, -20)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#f2ff59" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#f2ff59" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#d4e04e" />
+      <polygon points="0,-5 -35,-20 -35,20 0,40" fill="#e0ec50" />
+    </g>
+    <!-- Middle right yellow -->
+    <g transform="translate(70, -20)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#f2ff59" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#f2ff59" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#d4e04e" />
+      <polygon points="0,-5 -35,-20 -35,20 0,40" fill="#e0ec50" />
+    </g>
+
+    <!-- Center purple -->
+    <g transform="translate(0, -20)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#49378B" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#5a45a0" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#3d2d75" />
+    </g>
+
+    <!-- Bottom row -->
+    <g transform="translate(-70, 25)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#49378B" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#5a45a0" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#3d2d75" />
+    </g>
+    <g transform="translate(70, 25)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#49378B" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#5a45a0" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#3d2d75" />
+    </g>
+
+    <!-- Front bottom yellow -->
+    <g transform="translate(0, 25)">
+      <polygon points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20" fill="#f2ff59" />
+      <polygon points="0,-40 35,-20 0,-5 -35,-20" fill="#f2ff59" />
+      <polygon points="0,-5 35,-20 35,20 0,40" fill="#d4e04e" />
+      <polygon points="0,-5 -35,-20 -35,20 0,40" fill="#e0ec50" />
+    </g>
+
+    <!-- Outer corner yellow accents -->
+    <g transform="translate(-105, 5)">
+      <polygon points="0,-25 20,-12 20,12 0,25 -20,12 -20,-12" fill="#f2ff59" />
+      <polygon points="0,-25 20,-12 0,-2 -20,-12" fill="#f2ff59" />
+      <polygon points="0,-2 20,-12 20,12 0,25" fill="#d4e04e" />
+    </g>
+    <g transform="translate(105, 5)">
+      <polygon points="0,-25 20,-12 20,12 0,25 -20,12 -20,-12" fill="#f2ff59" />
+      <polygon points="0,-25 20,-12 0,-2 -20,-12" fill="#f2ff59" />
+      <polygon points="0,-2 -20,-12 -20,12 0,25" fill="#e0ec50" />
+    </g>
+    <g transform="translate(0, -135)">
+      <polygon points="0,-25 20,-12 20,12 0,25 -20,12 -20,-12" fill="#f2ff59" />
+      <polygon points="0,-25 20,-12 0,-2 -20,-12" fill="#f2ff59" />
+    </g>
+  </g>
+
+  <!-- Bottom arrow/chevron shape -->
+  <path d="M340 780 L400 820 L460 780 L460 850 L400 890 L340 850 Z" fill="#211927" stroke="#49378B" stroke-width="1" opacity="0.5" />
+</svg>

apps/website/src/components/common/BrandButton.vue

@@ -8,7 +8,7 @@ const {
   className = ''
 } = defineProps<{
   href: string
-  label: string
+  label?: string
   variant?: 'solid' | 'outline'
   className?: string
 }>()
@@ -27,6 +27,6 @@ const {
       )
     "
   >
-    {{ label }}
+    <slot>{{ label }}</slot>
   </a>
 </template>

apps/website/src/components/common/FAQSection.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import FAQSection from './FAQSection.vue'
+
+const meta: Meta<typeof FAQSection> = {
+  title: 'Website/Common/FAQSection',
+  component: FAQSection,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div class="bg-primary-comfy-ink p-8"><story /></div>'
+    })
+  ],
+  args: {
+    headingKey: 'download.faq.heading',
+    faqPrefix: 'download.faq',
+    faqCount: 3
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const ManyItems: Story = {
+  args: {
+    headingKey: 'download.faq.heading',
+    faqPrefix: 'download.faq',
+    faqCount: 8
+  }
+}

apps/website/src/components/common/FAQSection.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+
+const {
+  locale = 'en',
+  headingKey,
+  faqPrefix,
+  faqCount
+} = defineProps<{
+  locale?: Locale
+  headingKey: TranslationKey
+  faqPrefix: string
+  faqCount: number
+}>()
+
+const faqKeys: Array<{ q: TranslationKey; a: TranslationKey }> = Array.from(
+  { length: faqCount },
+  (_, i) => ({
+    q: `${faqPrefix}.${i + 1}.q` as TranslationKey,
+    a: `${faqPrefix}.${i + 1}.a` as TranslationKey
+  })
+)
+
+const faqs = faqKeys.map(({ q, a }) => ({
+  question: t(q, locale),
+  answer: t(a, locale)
+}))
+
+const expanded = reactive(faqs.map(() => true))
+
+function toggle(index: number) {
+  expanded[index] = !expanded[index]
+}
+</script>
+
+<template>
+  <section class="px-4 py-24 md:px-20 md:py-40">
+    <div class="flex flex-col gap-6 md:flex-row md:gap-16">
+      <!-- Left heading -->
+      <div
+        class="bg-primary-comfy-ink sticky top-20 z-10 w-full shrink-0 self-start py-4 md:top-28 md:w-80 md:py-0"
+      >
+        <h2 class="text-primary-comfy-canvas text-4xl font-light md:text-5xl">
+          {{ t(headingKey, locale) }}
+        </h2>
+      </div>
+
+      <!-- Right FAQ list -->
+      <div class="flex-1">
+        <div
+          v-for="(faq, index) in faqs"
+          :key="index"
+          class="border-primary-comfy-canvas/20 border-b"
+        >
+          <button
+            :id="`faq-trigger-${index}`"
+            :aria-expanded="expanded[index]"
+            :aria-controls="`faq-panel-${index}`"
+            class="flex w-full cursor-pointer items-center justify-between text-left"
+            :class="index === 0 ? 'pb-6' : 'py-6'"
+            @click="toggle(index)"
+          >
+            <span
+              class="text-lg font-light md:text-xl"
+              :class="
+                expanded[index]
+                  ? 'text-primary-comfy-yellow'
+                  : 'text-primary-comfy-canvas'
+              "
+            >
+              {{ faq.question }}
+            </span>
+            <span
+              class="text-primary-comfy-yellow ml-4 shrink-0 text-2xl"
+              aria-hidden="true"
+            >
+              {{ expanded[index] ? '−' : '+' }}
+            </span>
+          </button>
+          <section
+            v-if="expanded[index]"
+            :id="`faq-panel-${index}`"
+            :aria-labelledby="`faq-trigger-${index}`"
+            class="pb-6"
+          >
+            <p class="text-primary-comfy-canvas/70 text-sm whitespace-pre-line">
+              {{ faq.answer }}
+            </p>
+          </section>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/common/ProductCardsSection.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+import ProductCard from './ProductCard.vue'
+
+type Product = 'local' | 'cloud' | 'api' | 'enterprise'
+
+const {
+  locale = 'en',
+  excludeProduct,
+  labelKey = 'products.label'
+} = defineProps<{
+  locale?: Locale
+  excludeProduct?: Product
+  labelKey?: TranslationKey
+}>()
+
+const routes = getRoutes(locale)
+
+const allCards: (ReturnType<typeof cardDef> & { product: Product })[] = [
+  cardDef('local', routes.download, 'bg-primary-warm-gray'),
+  cardDef('cloud', routes.cloud, 'bg-secondary-mauve'),
+  cardDef('api', routes.api, 'bg-primary-comfy-plum'),
+  cardDef('enterprise', routes.cloudEnterprise, 'bg-illustration-forest')
+]
+
+function cardDef(product: Product, href: string, bg: string) {
+  return {
+    product,
+    title: t(`products.${product}.title`, locale),
+    description: t(`products.${product}.description`, locale),
+    cta: t(`products.${product}.cta`, locale),
+    href,
+    bg
+  }
+}
+
+const cards = excludeProduct
+  ? allCards.filter((c) => c.product !== excludeProduct)
+  : allCards
+</script>
+
+<template>
+  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
+    <!-- Header -->
+    <div class="flex flex-col items-center text-center">
+      <p
+        class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
+      >
+        {{ t(labelKey, locale) }}
+      </p>
+      <h2
+        class="text-primary-comfy-canvas mt-4 text-4xl font-light whitespace-pre-line lg:text-5xl"
+      >
+        {{ t('products.heading', locale) }}
+      </h2>
+      <p class="text-primary-comfy-canvas/70 mt-4 text-sm">
+        {{ t('products.subheading', locale) }}
+      </p>
+    </div>
+
+    <!-- Cards -->
+    <div
+      :class="[
+        'mt-16 grid grid-cols-1 gap-4',
+        cards.length === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3'
+      ]"
+    >
+      <ProductCard v-for="card in cards" :key="card.product" v-bind="card" />
+    </div>
+  </section>
+</template>

apps/website/src/components/common/ProductHeroBadge.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const {
+  logoSrc = '/icons/logo.svg',
+  logoAlt = 'Comfy',
+  text = 'LOCAL'
+} = defineProps<{
+  logoSrc?: string
+  logoAlt?: string
+  text?: string
+}>()
+</script>
+
+<template>
+  <div class="font-formula-condensed flex items-stretch font-semibold">
+    <img
+      src="/icons/node-left.svg"
+      alt=""
+      class="-mx-px my-auto h-12 self-center lg:my-0 lg:h-auto lg:self-stretch"
+      aria-hidden="true"
+    />
+
+    <span
+      class="bg-primary-comfy-yellow text-primary-comfy-ink my-auto flex h-12 items-center justify-center lg:my-0 lg:h-auto lg:p-8"
+    >
+      <img
+        :src="logoSrc"
+        :alt="logoAlt"
+        class="inline-block h-6 brightness-0 lg:h-10"
+      />
+    </span>
+
+    <img
+      src="/icons/node-union-2size.svg"
+      alt=""
+      class="-mx-px my-auto h-12 self-center lg:my-0 lg:h-auto lg:self-stretch"
+      aria-hidden="true"
+    />
+
+    <span
+      class="bg-primary-comfy-yellow text-primary-comfy-ink my-auto flex h-7.25 items-center justify-center lg:h-15.5 lg:px-6"
+    >
+      <span
+        class="inline-block translate-y-0.5 text-2xl leading-none font-bold lg:text-3xl"
+      >
+        {{ text }}
+      </span>
+    </span>
+
+    <img
+      src="/icons/node-right.svg"
+      alt=""
+      class="-mx-px my-auto h-7.25 self-center lg:h-15.5"
+      aria-hidden="true"
+    />
+  </div>
+</template>

apps/website/src/components/home/HeroSection.vue

@@ -24,7 +24,7 @@ useFrameScrub(canvasRef, {
 
 <template>
   <section
-    class="flex flex-col items-center px-4 pt-36 pb-16 lg:px-20 lg:pt-50 lg:pb-8"
+    class="flex flex-col items-center px-4 py-16 lg:px-20 lg:pt-18 lg:pb-8"
   >
     <h1
       class="text-primary-comfy-canvas text-center text-5xl font-light whitespace-pre-line lg:text-8xl"

apps/website/src/components/home/ProductCardsSection.vue

@@ -1,67 +1,11 @@
 <script setup lang="ts">
 import type { Locale } from '../../i18n/translations'
 
-import { getRoutes } from '../../config/routes'
-import { t } from '../../i18n/translations'
-import ProductCard from '../common/ProductCard.vue'
+import ProductCardsSection from '../common/ProductCardsSection.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-const routes = getRoutes(locale)
-
-const cards = [
-  {
-    title: t('products.local.title', locale),
-    description: t('products.local.description', locale),
-    cta: t('products.local.cta', locale),
-    href: routes.download,
-    bg: 'bg-primary-warm-gray'
-  },
-  {
-    title: t('products.cloud.title', locale),
-    description: t('products.cloud.description', locale),
-    cta: t('products.cloud.cta', locale),
-    href: routes.cloud,
-    bg: 'bg-secondary-mauve'
-  },
-  {
-    title: t('products.api.title', locale),
-    description: t('products.api.description', locale),
-    cta: t('products.api.cta', locale),
-    href: routes.api,
-    bg: 'bg-primary-comfy-plum'
-  },
-  {
-    title: t('products.enterprise.title', locale),
-    description: t('products.enterprise.description', locale),
-    cta: t('products.enterprise.cta', locale),
-    href: routes.cloudEnterprise,
-    bg: 'bg-illustration-forest'
-  }
-]
 </script>
 
 <template>
-  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
-    <!-- Header -->
-    <div class="flex flex-col items-center text-center">
-      <p
-        class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
-      >
-        {{ t('products.label', locale) }}
-      </p>
-      <h2
-        class="text-primary-comfy-canvas mt-4 text-4xl font-light whitespace-pre-line lg:text-5xl"
-      >
-        {{ t('products.heading', locale) }}
-      </h2>
-      <p class="text-primary-warm-gray mt-4 text-sm">
-        {{ t('products.subheading', locale) }}
-      </p>
-    </div>
-
-    <!-- Cards -->
-    <div class="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-      <ProductCard v-for="card in cards" :key="card.title" v-bind="card" />
-    </div>
-  </section>
+  <ProductCardsSection :locale="locale" />
 </template>

apps/website/src/components/product/cloud/AIModelsSection.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import { externalLinks } from '../../../config/routes'
+import { t } from '../../../i18n/translations'
+import BrandButton from '../../common/BrandButton.vue'
+
+type ModelCard = {
+  titleKey:
+    | 'cloud.aiModels.card.grokImagine'
+    | 'cloud.aiModels.card.nanoBananaPro'
+    | 'cloud.aiModels.card.ltx23'
+    | 'cloud.aiModels.card.qwenImageEdit'
+    | 'cloud.aiModels.card.wan22TextToVideo'
+  imageSrc: string
+  badgeIcon: string
+  badgeClass: string
+  layoutClass: string
+}
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const modelCards: ModelCard[] = [
+  {
+    titleKey: 'cloud.aiModels.card.grokImagine',
+    imageSrc: '/images/cloud/ai-models/grok-imagine.webp',
+    badgeIcon: '/icons/ai-models/grok.svg',
+    badgeClass:
+      'bg-white/20 text-white rounded-2xl backdrop-blur-sm group-hover:bg-primary-comfy-yellow group-hover:text-primary-comfy-ink',
+    layoutClass: 'lg:col-span-6 lg:aspect-[16/7]'
+  },
+  {
+    titleKey: 'cloud.aiModels.card.nanoBananaPro',
+    imageSrc: '/images/cloud/ai-models/nano-banana-pro.webp',
+    badgeIcon: '/icons/ai-models/gemini.svg',
+    badgeClass:
+      'bg-white/20 text-white rounded-full backdrop-blur-sm group-hover:bg-primary-comfy-yellow group-hover:text-primary-comfy-ink',
+    layoutClass: 'lg:col-span-6 lg:aspect-[16/7]'
+  },
+  {
+    titleKey: 'cloud.aiModels.card.ltx23',
+    imageSrc: '/images/cloud/ai-models/ltx-23.webp',
+    badgeIcon: '/icons/ai-models/ltx.svg',
+    badgeClass:
+      'bg-white/20 text-white rounded-full backdrop-blur-sm group-hover:bg-primary-comfy-yellow group-hover:text-primary-comfy-ink',
+    layoutClass: 'lg:col-span-4 lg:aspect-[4/3]'
+  },
+  {
+    titleKey: 'cloud.aiModels.card.qwenImageEdit',
+    imageSrc: '/images/cloud/ai-models/qwen-image-edit.webp',
+    badgeIcon: '/icons/ai-models/qwen.svg',
+    badgeClass:
+      'bg-white/20 text-white rounded-full backdrop-blur-sm group-hover:bg-primary-comfy-yellow group-hover:text-primary-comfy-ink',
+    layoutClass: 'lg:col-span-4 lg:aspect-[4/3]'
+  },
+  {
+    titleKey: 'cloud.aiModels.card.wan22TextToVideo',
+    imageSrc: '/images/cloud/ai-models/wan-22.webp',
+    badgeIcon: '/icons/ai-models/wan.svg',
+    badgeClass:
+      'bg-white/20 text-white rounded-full backdrop-blur-sm group-hover:bg-primary-comfy-yellow group-hover:text-primary-comfy-ink',
+    layoutClass: 'lg:col-span-4 lg:aspect-[4/3]'
+  }
+]
+
+function getCardClass(layoutClass: string): string {
+  return `${layoutClass} group relative h-72 overflow-hidden rounded-4xl bg-black/40 lg:h-auto cursor-pointer`
+}
+</script>
+
+<template>
+  <section class="bg-primary-comfy-ink px-4 py-24 lg:px-20 lg:py-40">
+    <div class="mx-auto flex w-full max-w-7xl flex-col items-center">
+      <p
+        class="text-primary-comfy-yellow text-center text-sm font-bold tracking-widest uppercase"
+      >
+        {{ t('cloud.aiModels.label', locale) }}
+      </p>
+
+      <h2
+        class="text-primary-comfy-canvas text-3.5xl/tight mt-8 max-w-4xl text-center font-light lg:text-5xl"
+      >
+        {{ t('cloud.aiModels.heading', locale) }}
+      </h2>
+
+      <p
+        class="text-primary-comfy-canvas mt-8 max-w-xl text-center text-sm font-light lg:text-base/snug"
+      >
+        {{ t('cloud.aiModels.subtitle', locale) }}
+      </p>
+
+      <div class="mt-24 w-full">
+        <div class="rounded-4xl border border-white/12 p-2 lg:p-1.5">
+          <div class="grid grid-cols-1 gap-2 lg:grid-cols-12">
+            <a
+              v-for="card in modelCards"
+              :key="card.titleKey"
+              :href="externalLinks.workflows"
+              :class="getCardClass(card.layoutClass)"
+            >
+              <img
+                :src="card.imageSrc"
+                alt=""
+                class="size-full object-cover"
+                loading="lazy"
+                decoding="async"
+              />
+
+              <div
+                class="absolute inset-0 bg-linear-to-t from-black/50 via-transparent to-black/15"
+              />
+
+              <div
+                class="absolute top-5 right-5 flex h-12 min-w-12 items-center justify-center px-3 lg:top-6 lg:right-6"
+                :class="card.badgeClass"
+              >
+                <span
+                  class="inline-block size-6 bg-current"
+                  :style="{
+                    maskImage: `url(${card.badgeIcon})`,
+                    maskSize: 'contain',
+                    maskRepeat: 'no-repeat',
+                    maskPosition: 'center'
+                  }"
+                />
+              </div>
+
+              <p
+                class="text-primary-warm-white absolute inset-x-6 bottom-6 text-5xl/tight font-light whitespace-pre-line lg:top-6 lg:right-auto lg:bottom-auto lg:text-4xl"
+              >
+                {{ t(card.titleKey, locale) }}
+              </p>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <BrandButton
+        :href="externalLinks.workflows"
+        variant="outline"
+        class-name="mt-4 lg:mt-8 w-full max-w-md text-center text-sm lg:w-auto"
+      >
+        <span class="lg:hidden">{{
+          t('cloud.aiModels.ctaMobile', locale)
+        }}</span>
+        <span class="hidden lg:inline">{{
+          t('cloud.aiModels.ctaDesktop', locale)
+        }}</span>
+      </BrandButton>
+    </div>
+  </section>
+</template>

apps/website/src/components/product/cloud/AudienceSection.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import { t } from '../../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const cards = [
+  {
+    labelKey: 'cloud.audience.creators.label' as const,
+    titleKey: 'cloud.audience.creators.title' as const,
+    descriptionKey: 'cloud.audience.creators.description' as const,
+    image: '/images/cloud/audience-creator.jpg'
+  },
+  {
+    labelKey: 'cloud.audience.teams.label' as const,
+    titleKey: 'cloud.audience.teams.title' as const,
+    descriptionKey: 'cloud.audience.teams.description' as const,
+    image: '/images/cloud/audience-team.jpg'
+  }
+]
+</script>
+
+<template>
+  <section class="px-4 pt-24 lg:px-20 lg:pt-40">
+    <h2
+      class="text-primary-comfy-canvas text-3.5xl/tight mx-auto max-w-3xl text-center font-light lg:text-5xl/tight"
+    >
+      {{ t('cloud.audience.heading', locale).split('{creators}')[0]
+      }}<span class="text-white">{{
+        t('cloud.audience.headingHighlight', locale)
+      }}</span
+      >{{ t('cloud.audience.heading', locale).split('{creators}')[1] }}
+    </h2>
+
+    <div
+      class="rounded-5xl bg-transparency-white-t4 mt-12 grid grid-cols-1 gap-6 p-2 lg:mt-20 lg:grid-cols-2"
+    >
+      <div
+        v-for="card in cards"
+        :key="card.labelKey"
+        class="bg-primary-comfy-ink rounded-4.5xl overflow-hidden"
+      >
+        <img
+          :src="card.image"
+          :alt="t(card.titleKey, locale)"
+          class="aspect-4/3 w-full rounded-4xl object-cover"
+        />
+
+        <div class="mt-8 p-6">
+          <p
+            class="text-primary-comfy-yellow text-sm font-bold tracking-widest uppercase"
+          >
+            {{ t(card.labelKey, locale) }}
+          </p>
+
+          <h3
+            class="text-primary-comfy-canvas mt-8 text-3xl/tight font-light whitespace-pre-line"
+          >
+            {{ t(card.titleKey, locale) }}
+          </h3>
+
+          <p class="text-primary-comfy-canvas mt-8 text-base/normal">
+            {{ t(card.descriptionKey, locale) }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/product/cloud/FAQSection.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import FAQSection from '../../common/FAQSection.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <FAQSection
+    :locale="locale"
+    heading-key="cloud.faq.heading"
+    faq-prefix="cloud.faq"
+    :faq-count="15"
+  />
+</template>

apps/website/src/components/product/cloud/HeroSection.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import { t } from '../../../i18n/translations'
+import BrandButton from '../../common/BrandButton.vue'
+import ProductHeroBadge from '../../common/ProductHeroBadge.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section class="flex flex-col items-center px-4 py-24 lg:px-20 lg:py-24">
+    <ProductHeroBadge text="CLOUD" />
+
+    <h1
+      class="text-primary-comfy-canvas text-3.5xl mt-8 text-center font-light whitespace-pre-line lg:text-5xl"
+    >
+      {{ t('cloud.hero.heading', locale) }}
+    </h1>
+
+    <p
+      class="mt-8 max-w-md text-center text-base/relaxed text-white/60 lg:mt-20 lg:max-w-lg"
+    >
+      {{ t('cloud.hero.subtitle', locale) }}
+    </p>
+
+    <BrandButton
+      href="https://www.comfy.org"
+      :label="t('cloud.hero.cta', locale)"
+      class="mt-12 w-full text-center lg:mt-8 lg:w-auto"
+    />
+
+    <div class="mt-12 w-full max-w-2xl lg:mt-16">
+      <img
+        src="/images/cloud/hero-cube.svg"
+        alt="ComfyUI Cloud — 3D node cube illustration"
+        class="w-full"
+      />
+    </div>
+  </section>
+</template>

apps/website/src/components/product/cloud/PricingSection.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import { getRoutes } from '../../../config/routes'
+import { t } from '../../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section
+    class="bg-transparency-white-t4 rounded-5xl mx-4 mt-4 mb-24 p-2 lg:mx-20 lg:mt-8 lg:mb-40"
+  >
+    <div
+      class="bg-primary-comfy-yellow flex flex-col gap-24 rounded-4xl p-8 lg:flex-row lg:items-end lg:justify-between"
+    >
+      <div class="max-w-2xl">
+        <h2
+          class="text-primary-comfy-ink text-2xl/tight font-medium lg:text-3xl/tight"
+        >
+          {{ t('cloud.pricing.title', locale) }}
+        </h2>
+
+        <p class="text-primary-comfy-ink mt-4 text-base">
+          {{ t('cloud.pricing.description', locale) }}
+        </p>
+
+        <p class="text-primary-comfy-ink mt-4 text-base font-bold">
+          {{ t('cloud.pricing.tagline', locale) }}
+        </p>
+      </div>
+
+      <a
+        :href="getRoutes(locale).cloudPricing"
+        class="bg-primary-comfy-ink text-primary-comfy-yellow shrink-0 rounded-2xl px-6 py-3 text-center text-sm font-semibold transition-opacity hover:opacity-90"
+      >
+        {{ t('cloud.pricing.cta', locale) }}
+      </a>
+    </div>
+  </section>
+</template>

apps/website/src/components/product/cloud/ProductCardsSection.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import ProductCardsSection from '../../common/ProductCardsSection.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <ProductCardsSection
+    :locale="locale"
+    exclude-product="cloud"
+    label-key="products.labelProducts"
+  />
+</template>

apps/website/src/components/product/cloud/ReasonSection.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+import { t } from '../../../i18n/translations'
+
+import type { Reason } from '../shared/ReasonSection.vue'
+
+import ReasonSection from '../shared/ReasonSection.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+interface CloudReason extends Reason {
+  badge?: boolean
+}
+
+const reasons: CloudReason[] = [
+  {
+    titleKey: 'cloud.reason.1.title',
+    descriptionKey: 'cloud.reason.1.description'
+  },
+  {
+    titleKey: 'cloud.reason.2.title',
+    descriptionKey: 'cloud.reason.2.description',
+    badge: true
+  },
+  {
+    titleKey: 'cloud.reason.3.title',
+    descriptionKey: 'cloud.reason.3.description'
+  },
+  {
+    titleKey: 'cloud.reason.4.title',
+    descriptionKey: 'cloud.reason.4.description'
+  }
+]
+</script>
+
+<template>
+  <ReasonSection
+    :locale="locale"
+    heading-key="cloud.reason.heading"
+    heading-highlight-key="cloud.reason.headingHighlight"
+    :reasons="reasons"
+  >
+    <template #reason-extra="{ reason }">
+      <div v-if="(reason as CloudReason).badge" class="mt-3">
+        <span
+          class="font-formula-condensed text-primary-comfy-yellow text-lg font-bold tracking-wide"
+        >
+          {{ t('cloud.reason.2.badge.onlyOn', locale) }}
+          <img src="/icons/logo.svg" alt="Comfy" class="inline-block h-5" />
+          {{ t('cloud.reason.2.badge.cloud', locale) }}
+        </span>
+      </div>
+    </template>
+  </ReasonSection>
+</template>

apps/website/src/components/product/local/CloudBannerSection.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import { externalLinks } from '../../../config/routes'
+import { t } from '../../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section class="bg-transparency-white-t4 p-4 text-center lg:px-20 lg:py-8">
+    <p
+      class="text-primary-comfy-canvas text-lg font-semibold lg:text-sm lg:font-normal"
+    >
+      {{ t('download.cloud.prefix', locale) }}
+      <a
+        :href="externalLinks.app"
+        class="text-primary-comfy-yellow mx-1 font-bold tracking-widest uppercase hover:underline"
+      >
+        {{ t('download.cloud.cta', locale) }}
+      </a>
+      <span class="mt-1 block lg:mt-0 lg:inline">
+        {{ t('download.cloud.suffix', locale) }}
+      </span>
+    </p>
+  </section>
+</template>

apps/website/src/components/product/local/EcoSystemSection.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import { useDownloadUrl } from '../../../composables/useDownloadUrl'
+import { externalLinks } from '../../../config/routes'
+import { t } from '../../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const { downloadUrl } = useDownloadUrl()
+</script>
+
+<template>
+  <section class="px-4 py-24 lg:px-20 lg:py-40">
+    <div
+      class="flex flex-col-reverse items-stretch gap-10 lg:flex-row lg:gap-16"
+    >
+      <!-- Text content -->
+      <div class="flex flex-1 flex-col justify-between">
+        <div>
+          <h2 class="text-primary-comfy-canvas text-3xl font-light lg:text-4xl">
+            {{ t('download.ecosystem.heading', locale) }}
+          </h2>
+          <p class="text-primary-comfy-canvas/70 mt-6 text-sm">
+            {{ t('download.ecosystem.description', locale) }}
+          </p>
+        </div>
+
+        <!-- CTA buttons -->
+        <div class="mt-10 flex flex-col gap-4 lg:flex-row">
+          <a
+            :href="downloadUrl"
+            target="_blank"
+            rel="noopener"
+            class="bg-primary-comfy-yellow text-primary-comfy-ink rounded-full px-8 py-4 text-center text-sm font-bold tracking-wider transition-opacity hover:opacity-90"
+          >
+            {{ t('download.hero.downloadLocal', locale) }}
+          </a>
+          <a
+            :href="externalLinks.github"
+            target="_blank"
+            rel="noopener"
+            class="border-primary-comfy-yellow text-primary-comfy-yellow hover:bg-primary-comfy-yellow hover:text-primary-comfy-ink flex items-center justify-center gap-2 rounded-full border px-8 py-4 text-sm font-bold tracking-wider transition-colors"
+          >
+            <span
+              class="icon-mask size-5 mask-[url('/icons/social/github.svg')]"
+              aria-hidden="true"
+            />
+            {{ t('download.hero.installGithub', locale) }}
+          </a>
+        </div>
+      </div>
+
+      <!-- TODO: Replace with final ecosystem illustration -->
+      <div class="flex-1">
+        <div
+          class="aspect-4/3 w-full overflow-hidden rounded-3xl bg-linear-to-b from-emerald-300 to-amber-200"
+        >
+          <div class="flex h-full items-center justify-center">
+            <span
+              class="bg-primary-comfy-ink text-primary-comfy-yellow rounded-full px-4 py-2 text-sm font-bold"
+            >
+              4x
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/product/local/FAQSection.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import FAQSection from '../../common/FAQSection.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <FAQSection
+    :locale="locale"
+    heading-key="download.faq.heading"
+    faq-prefix="download.faq"
+    :faq-count="8"
+  />
+</template>

apps/website/src/components/product/local/HeroSection.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import { useDownloadUrl } from '../../../composables/useDownloadUrl'
+import { externalLinks } from '../../../config/routes'
+import { t } from '../../../i18n/translations'
+import ProductHeroBadge from '../../common/ProductHeroBadge.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const { downloadUrl } = useDownloadUrl()
+</script>
+
+<template>
+  <section class="overflow-hidden px-4 pt-20 pb-16 lg:px-20 lg:py-24">
+    <div class="mx-auto flex max-w-5xl flex-col items-center">
+      <div class="flex w-full max-w-2xl flex-col items-center text-center">
+        <ProductHeroBadge />
+
+        <h1
+          class="text-primary-comfy-canvas mt-8 max-w-[10ch] text-5xl/tight font-light whitespace-pre-line lg:max-w-none lg:text-5xl"
+        >
+          {{ t('download.hero.heading', locale) }}
+        </h1>
+
+        <p
+          class="text-primary-comfy-canvas mt-8 max-w-xs text-sm lg:mt-20 lg:max-w-xl lg:text-base"
+        >
+          {{ t('download.hero.subtitle', locale) }}
+        </p>
+
+        <div
+          class="mt-10 flex w-full max-w-md flex-col gap-4 lg:w-auto lg:max-w-none lg:flex-row"
+        >
+          <a
+            :href="downloadUrl"
+            target="_blank"
+            rel="noopener"
+            class="bg-primary-comfy-yellow text-primary-comfy-ink rounded-full px-8 py-4 text-center text-sm font-bold tracking-wider transition-opacity hover:opacity-90 lg:min-w-60"
+          >
+            {{ t('download.hero.downloadLocal', locale) }}
+          </a>
+          <a
+            :href="externalLinks.github"
+            target="_blank"
+            rel="noopener"
+            class="border-primary-comfy-yellow text-primary-comfy-yellow hover:bg-primary-comfy-yellow hover:text-primary-comfy-ink flex items-center justify-center gap-2 rounded-full border px-8 py-4 text-sm font-bold tracking-wider transition-colors lg:min-w-60"
+          >
+            <span
+              class="icon-mask size-5 mask-[url('/icons/social/github.svg')]"
+              aria-hidden="true"
+            />
+            {{ t('download.hero.installGithub', locale) }}
+          </a>
+        </div>
+      </div>
+
+      <!-- Placeholder for future animation; clipped within hero section -->
+      <div
+        class="relative mt-4 flex h-104 w-full max-w-4xl items-start justify-center overflow-hidden lg:mt-12 lg:h-136 lg:items-center"
+      >
+        <div
+          class="border-secondary-mauve/35 bg-primary-comfy-ink/35 absolute top-20 left-2 h-64 w-44 rotate-30 rounded-4xl border"
+        />
+        <div
+          class="border-secondary-mauve/35 bg-primary-comfy-ink/35 absolute top-28 left-20 h-56 w-40 rotate-30 rounded-4xl border"
+        />
+        <div
+          class="border-secondary-mauve/35 bg-primary-comfy-ink/35 absolute top-52 right-4 h-56 w-40 rotate-30 rounded-4xl border"
+        />
+
+        <div class="relative z-10 mt-28 grid grid-cols-3 gap-0.5 lg:mt-0">
+          <span class="bg-secondary-mauve block size-9 rounded-lg" />
+          <span class="bg-primary-comfy-plum block size-9 rounded-lg" />
+          <span class="bg-secondary-mauve block size-9 rounded-lg" />
+          <span class="bg-primary-comfy-plum block size-9 rounded-lg" />
+          <span class="bg-primary-comfy-yellow block size-9 rounded-lg" />
+          <span class="bg-secondary-mauve block size-9 rounded-lg" />
+          <span class="bg-secondary-mauve block size-9 rounded-lg" />
+          <span class="bg-primary-comfy-plum block size-9 rounded-lg" />
+          <span class="bg-secondary-mauve block size-9 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/product/local/ProductCardsSection.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import ProductCardsSection from '../../common/ProductCardsSection.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <ProductCardsSection
+    :locale="locale"
+    exclude-product="local"
+    label-key="products.labelProducts"
+  />
+</template>

apps/website/src/components/product/local/ReasonSection.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations'
+
+import type { Reason } from '../shared/ReasonSection.vue'
+
+import ReasonSection from '../shared/ReasonSection.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const reasons: Reason[] = [
+  {
+    titleKey: 'download.reason.1.title',
+    descriptionKey: 'download.reason.1.description'
+  },
+  {
+    titleKey: 'download.reason.2.title',
+    descriptionKey: 'download.reason.2.description'
+  },
+  {
+    titleKey: 'download.reason.3.title',
+    descriptionKey: 'download.reason.3.description'
+  },
+  {
+    titleKey: 'download.reason.4.title',
+    descriptionKey: 'download.reason.4.description'
+  }
+]
+</script>
+
+<template>
+  <ReasonSection
+    :locale="locale"
+    heading-key="download.reason.heading"
+    heading-highlight-key="download.reason.headingHighlight"
+    highlight-class="text-primary-warm-white"
+    :reasons="reasons"
+  />
+</template>

apps/website/src/components/product/shared/ReasonSection.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { Reason } from './ReasonSection.vue'
+
+import ReasonSection from './ReasonSection.vue'
+
+const defaultReasons: Reason[] = [
+  {
+    titleKey: 'download.reason.1.title',
+    descriptionKey: 'download.reason.1.description'
+  },
+  {
+    titleKey: 'download.reason.2.title',
+    descriptionKey: 'download.reason.2.description'
+  },
+  {
+    titleKey: 'download.reason.3.title',
+    descriptionKey: 'download.reason.3.description'
+  },
+  {
+    titleKey: 'download.reason.4.title',
+    descriptionKey: 'download.reason.4.description'
+  }
+]
+
+const meta: Meta<typeof ReasonSection> = {
+  title: 'Website/Product/ReasonSection',
+  component: ReasonSection,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div class="bg-primary-comfy-ink p-8"><story /></div>'
+    })
+  ],
+  args: {
+    headingKey: 'download.reason.heading',
+    headingHighlightKey: 'download.reason.headingHighlight',
+    highlightClass: 'text-primary-warm-white',
+    reasons: defaultReasons
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const FewReasons: Story = {
+  args: {
+    reasons: defaultReasons.slice(0, 2)
+  }
+}

apps/website/src/components/product/shared/ReasonSection.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { Locale, TranslationKey } from '../../../i18n/translations'
+
+import { t } from '../../../i18n/translations'
+
+export interface Reason {
+  titleKey: TranslationKey
+  descriptionKey: TranslationKey
+}
+
+const {
+  locale = 'en',
+  headingKey,
+  headingHighlightKey,
+  highlightClass = 'text-white',
+  reasons
+} = defineProps<{
+  locale?: Locale
+  headingKey: TranslationKey
+  headingHighlightKey: TranslationKey
+  highlightClass?: string
+  reasons: Reason[]
+}>()
+</script>
+
+<template>
+  <section
+    class="flex flex-col gap-4 px-4 py-24 md:flex-row md:gap-16 md:px-20 md:py-40"
+  >
+    <!-- Left heading -->
+    <div
+      class="bg-primary-comfy-ink sticky top-20 z-10 w-full shrink-0 self-start py-4 md:top-28 md:w-115 md:py-0"
+    >
+      <h2
+        class="text-primary-comfy-canvas text-4xl font-light whitespace-pre-line md:text-5xl"
+      >
+        {{ t(headingKey, locale)
+        }}<span :class="highlightClass">{{
+          t(headingHighlightKey, locale)
+        }}</span>
+      </h2>
+    </div>
+
+    <!-- Right reasons list -->
+    <div class="flex-1">
+      <div
+        v-for="reason in reasons"
+        :key="reason.titleKey"
+        class="border-primary-comfy-canvas/20 flex flex-col gap-4 border-b py-10 first:pt-0 md:flex-row md:gap-12"
+      >
+        <div class="shrink-0 md:w-52">
+          <h3
+            class="text-primary-comfy-canvas text-2xl font-light whitespace-pre-line"
+          >
+            {{ t(reason.titleKey, locale) }}
+          </h3>
+          <slot name="reason-extra" :reason="reason" />
+        </div>
+        <p class="text-primary-comfy-canvas/70 flex-1 text-sm">
+          {{ t(reason.descriptionKey, locale) }}
+        </p>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/composables/useDownloadUrl.ts

@@ -0,0 +1,28 @@
+import { externalLinks } from '@/config/routes'
+
+const downloadUrls = {
+  windows: 'https://download.comfy.org/windows/nsis/x64',
+  macArm: 'https://download.comfy.org/mac/dmg/arm64'
+} as const
+
+function isMobile(ua: string): boolean {
+  return /iphone|ipad|ipod|android/.test(ua)
+}
+
+// TODO: Only Windows x64 and macOS arm64 are available today.
+// When Linux and/or macIntel builds are added, extend detection and URLs here.
+function getDownloadUrl(): string {
+  if (typeof navigator === 'undefined') return externalLinks.github
+
+  const ua = navigator.userAgent.toLowerCase()
+  if (isMobile(ua)) return externalLinks.github
+  if (ua.includes('win')) return downloadUrls.windows
+  if (ua.includes('macintosh') || ua.includes('mac os x'))
+    return downloadUrls.macArm
+
+  return externalLinks.github
+}
+
+export function useDownloadUrl() {
+  return { downloadUrl: getDownloadUrl() }
+}

apps/website/src/i18n/translations.ts

@@ -134,6 +134,10 @@ const translations = {
     en: 'Comfy UI',
     'zh-CN': 'Comfy UI'
   },
+  'products.labelProducts': {
+    en: 'Products',
+    'zh-CN': '产品'
+  },
   'products.heading': {
     en: 'The AI creation\nengine for complete control',
     'zh-CN': '完全掌控的\nAI 创作引擎'
@@ -218,6 +222,476 @@ const translations = {
     en: "Comfy gives you the building blocks to create workflows nobody's imagined yet — and share them with everyone.",
     'zh-CN': 'Comfy 为您提供构建模块，创造出前所未有的工作流——并与所有人分享。'
   },
+
+  // Download – FAQSection
+  'download.faq.heading': {
+    en: "FAQ's",
+    'zh-CN': '常见问题'
+  },
+  'download.faq.1.q': {
+    en: 'Do I need a GPU to run ComfyUI locally?',
+    'zh-CN': '本地运行 ComfyUI 需要 GPU 吗？'
+  },
+  'download.faq.1.a': {
+    en: 'A dedicated GPU is strongly recommended — more VRAM means bigger models and batches. No GPU? Run the same workflow on Comfy Cloud.',
+    'zh-CN':
+      '强烈建议使用独立 GPU——更大的显存意味着更大的模型和批量。没有 GPU？在 Comfy Cloud 上运行相同的工作流。'
+  },
+  'download.faq.2.q': {
+    en: 'How much disk space do I need?',
+    'zh-CN': '需要多少磁盘空间？'
+  },
+  'download.faq.2.a': {
+    en: 'ComfyUI is lightweight, models are the heavy part. Plan for a dedicated drive as your library grows.',
+    'zh-CN':
+      'ComfyUI 本身很轻量，模型才是大头。随着库的增长，建议准备专用硬盘。'
+  },
+  'download.faq.3.q': {
+    en: "Is it really free? What's the catch?",
+    'zh-CN': '真的免费吗？有什么附加条件？'
+  },
+  'download.faq.3.a': {
+    en: 'Yes. Free and open source under GPL-3.0. No feature gates, no trials, no catch.',
+    'zh-CN':
+      '是的。基于 GPL-3.0 免费开源。没有功能限制、没有试用期、没有附加条件。'
+  },
+  'download.faq.4.q': {
+    en: 'Why would I pay for Comfy Cloud if Local is free?',
+    'zh-CN': '既然本地版免费，为什么还要付费使用 Comfy Cloud？'
+  },
+  'download.faq.4.a': {
+    en: 'Your machine or ours. Cloud gives you powerful GPUs on demand, pre-loaded models, end-to-end security and infrastructure out of the box and partner models cleared for commercial use.',
+    'zh-CN':
+      '你的机器或我们的。Cloud 按需提供强大 GPU、预加载模型、端到端安全性和开箱即用的基础设施，以及经过商业许可的合作伙伴模型。'
+  },
+  'download.faq.5.q': {
+    en: "What's the difference between Desktop, Portable, and CLI install?",
+    'zh-CN': 'Desktop、Portable 和 CLI 安装有什么区别？'
+  },
+  'download.faq.5.a': {
+    en: 'Desktop: one-click installer with auto-updates. Portable: self-contained build you can run from any folder. CLI: clone from GitHub for full developer control, for developers who want to customize the environment or contribute upstream.',
+    'zh-CN':
+      'Desktop：一键安装，自动更新。Portable：独立构建，可从任意文件夹运行。CLI：从 GitHub 克隆，完全开发者控制，适合想自定义环境或参与上游贡献的开发者。'
+  },
+  'download.faq.6.q': {
+    en: 'Can I use my local workflows in Comfy Cloud?',
+    'zh-CN': '我可以在 Comfy Cloud 中使用本地工作流吗？'
+  },
+  'download.faq.6.a': {
+    en: 'Yes — same file, same results. No conversion, no rework.',
+    'zh-CN': '可以——同样的文件，同样的结果。无需转换，无需返工。'
+  },
+  'download.faq.7.q': {
+    en: 'How do I install custom nodes and extensions?',
+    'zh-CN': '如何安装自定义节点和扩展？'
+  },
+  'download.faq.7.a': {
+    en: 'ComfyUI Manager lets you browse, install, update, and manage 5,000+ extensions from inside the app.',
+    'zh-CN': 'ComfyUI Manager 让你在应用内浏览、安装、更新和管理 5,000+ 扩展。'
+  },
+  'download.faq.8.q': {
+    en: 'My workflow is running slowly. Should I switch to Cloud?',
+    'zh-CN': '我的工作流运行缓慢。应该切换到 Cloud 吗？'
+  },
+  'download.faq.8.a': {
+    en: 'No need to switch. Push heavy jobs to Comfy Cloud when you need more compute, keep building locally the rest of the time.',
+    'zh-CN':
+      '无需切换。需要更多算力时将繁重任务推送到 Comfy Cloud，其余时间继续在本地构建。'
+  },
+
+  // Download – EcoSystemSection
+  'download.ecosystem.heading': {
+    en: 'An ecosystem that moves faster than any company could.',
+    'zh-CN': '一个比任何公司都迭代更快的生态系统。'
+  },
+  'download.ecosystem.description': {
+    en: 'Over 5,000 community-built extensions — totaling 60,000+ nodes — plug into ComfyUI and extend what it can do. When a new open model launches, ComfyUI implements it, and the community customizes and builds it into their workflows immediately. When a research paper drops a new technique, an extension appears within days.',
+    'zh-CN':
+      '超过 5,000 个社区构建的扩展——共计 60,000+ 节点——接入 ComfyUI 并扩展其能力。当新的开源模型发布时，ComfyUI 会实现它，社区会立即将其定制并构建到工作流中。当研究论文发布新技术时，几天内就会出现相应扩展。'
+  },
+
+  // Download – ReasonSection
+  'download.reason.heading': {
+    en: 'Why\nprofessionals\nchoose ',
+    'zh-CN': '专业人士为何\n选择'
+  },
+  'download.reason.headingHighlight': {
+    en: 'Local',
+    'zh-CN': '本地版'
+  },
+  'download.reason.1.title': {
+    en: 'Unlimited\nCustomization',
+    'zh-CN': '无限\n自定义'
+  },
+  'download.reason.1.description': {
+    en: 'Install any of 5,000+ community extensions, totaling 60,000+ nodes. Build your own custom nodes. Integrate with Photoshop, Nuke, Blender, Houdini, and any tool in your existing pipeline.',
+    'zh-CN':
+      '安装 5,000+ 社区扩展中的任何一个，共计 60,000+ 节点。构建自定义节点。与 Photoshop、Nuke、Blender、Houdini 及现有管线中的任何工具集成。'
+  },
+  'download.reason.2.title': {
+    en: 'Any model.\nNo exceptions.',
+    'zh-CN': '任何模型。\n无一例外。'
+  },
+  'download.reason.2.description': {
+    en: 'Run every open-source model — Wan 2.1, Flux, LTX and more. Finetune, customize, control the full inference process. Or use partner models like Nano Banana and Grok.',
+    'zh-CN':
+      '运行每个开源模型——Wan 2.1、Flux、LTX 等。微调、自定义、控制完整推理过程。或使用 Nano Banana 和 Grok 等合作伙伴模型。'
+  },
+  'download.reason.3.title': {
+    en: 'Your machine.\nYour data.\nYour terms.',
+    'zh-CN': '你的机器。\n你的数据。\n你的规则。'
+  },
+  'download.reason.3.description': {
+    en: 'Run entirely offline. No internet connection required after setup. Your workflows, your models, your data.',
+    'zh-CN':
+      '完全离线运行。安装后无需网络连接。你的工作流、你的模型、你的数据。'
+  },
+  'download.reason.4.title': {
+    en: 'Free. Open Source.\nNo ceiling.',
+    'zh-CN': '免费。开源。\n没有上限。'
+  },
+  'download.reason.4.description': {
+    en: 'No feature gates, no trial periods, no "pro" tier for core functionality. No vendor can lock you in or force you off the platform. Build your own nodes and modify ComfyUI as your own.',
+    'zh-CN':
+      '没有功能限制、没有试用期、核心功能没有"专业"层级。没有供应商可以锁定你或强迫你离开平台。构建自己的节点，随心修改 ComfyUI。'
+  },
+
+  // Download – HeroSection
+  'download.hero.heading': {
+    en: 'Run on your hardware.\nFree forever.',
+    'zh-CN': '在你的硬件上运行。\n永久免费。'
+  },
+  'download.hero.subtitle': {
+    en: 'The full ComfyUI engine — open source, fast, extensible, and yours to run however you want.',
+    'zh-CN': '完整的 ComfyUI 引擎——开源、快速、可扩展，随你运行。'
+  },
+  'download.hero.downloadLocal': {
+    en: 'DOWNLOAD LOCAL',
+    'zh-CN': '下载本地版'
+  },
+  'download.hero.installGithub': {
+    en: 'INSTALL FROM GITHUB',
+    'zh-CN': '从 GITHUB 安装'
+  },
+
+  // Download – CloudBannerSection
+  'download.cloud.prefix': {
+    en: 'Need more power?',
+    'zh-CN': '需要更强算力？'
+  },
+  'download.cloud.cta': {
+    en: 'TRY COMFY CLOUD',
+    'zh-CN': '试试 COMFY CLOUD'
+  },
+  'download.cloud.suffix': {
+    en: 'Powerful GPUs, same workflow, same results, from anywhere.',
+    'zh-CN': '强大 GPU，同样的工作流，同样的结果，随时随地。'
+  },
+  // Cloud – HeroSection
+  'cloud.hero.heading': {
+    en: 'The full power of\nComfyUI — from\nanywhere.',
+    'zh-CN': 'ComfyUI 的全部能力\n随时随地。'
+  },
+  'cloud.hero.subtitle': {
+    en: 'The easiest way to start with ComfyUI. Pre-loaded models. Pre-installed custom nodes. Concurrent jobs. The full power of ComfyUI on Blackwell RTX 6000 Pros. Open a tab and start creating.',
+    'zh-CN':
+      '最简单的 ComfyUI 入门方式。预加载模型。预安装自定义节点。并发任务。在 Blackwell RTX 6000 Pro 上体验 ComfyUI 的全部能力。打开标签页，开始创作。'
+  },
+  'cloud.hero.cta': {
+    en: 'TRY COMFY CLOUD FOR FREE',
+    'zh-CN': '免费试用 COMFY CLOUD'
+  },
+
+  // Cloud – ReasonSection
+  'cloud.reason.heading': {
+    en: 'Why\nprofessionals\nchoose ',
+    'zh-CN': '专业人士为何\n选择'
+  },
+  'cloud.reason.headingHighlight': {
+    en: 'Cloud',
+    'zh-CN': 'Cloud'
+  },
+  'cloud.reason.1.title': {
+    en: 'Powerful GPUs with end-\nto-end security built-in',
+    'zh-CN': '强大 GPU\n端到端安全内置'
+  },
+  'cloud.reason.1.description': {
+    en: 'Comfy Cloud works on any device. Pay only for running workflows, not idle time. With Comfy Cloud, you get security and infrastructure built-in with access to the most popular custom nodes.',
+    'zh-CN':
+      'Comfy Cloud 可在任何设备上使用。只需为运行工作流付费，无需为闲置时间付费。使用 Comfy Cloud，您可获得内置的安全性和基础设施，并访问最流行的自定义节点。'
+  },
+  'cloud.reason.2.title': {
+    en: 'All models. Commercial\nlicense guaranteed.',
+    'zh-CN': '所有模型。\n商业许可保证。'
+  },
+  'cloud.reason.2.description': {
+    en: 'Run open-source models like Wan 2.2, Flux, LTX and Qwen alongside partner models like Nano Banana, Seedance, Seedream, Grok, Kling, Hunyuan 3D and more. Every model on Comfy Cloud is cleared for commercial use. No license ambiguity. All through one credit balance.',
+    'zh-CN':
+      '运行 Wan 2.2、Flux、LTX 和 Qwen 等开源模型，以及 Nano Banana、Seedance、Seedream、Grok、Kling、Hunyuan 3D 等合作伙伴模型。Comfy Cloud 上的每个模型都已获得商业使用许可。无许可证歧义。通过统一的积分余额使用。'
+  },
+  'cloud.reason.2.badge.onlyOn': {
+    en: 'ONLY ON',
+    'zh-CN': '仅在'
+  },
+  'cloud.reason.2.badge.cloud': {
+    en: 'CLOUD',
+    'zh-CN': '云端'
+  },
+  'cloud.reason.3.title': {
+    en: 'More control than any\nother visual AI tool',
+    'zh-CN': '比任何其他\n视觉 AI 工具更强的控制力'
+  },
+  'cloud.reason.3.description': {
+    en: 'Every node exposed. Every setting adjustable. ComfyUI gives you the full inference pipeline. Choose your sampler, your scheduler, your model chain. The cloud simplifies the setup and supercharges the hardware underneath it.',
+    'zh-CN':
+      '每个节点都可见。每个设置都可调。ComfyUI 为您提供完整的推理管线。选择您的采样器、调度器、模型链。云端简化了设置并增强了底层硬件。'
+  },
+  'cloud.reason.4.title': {
+    en: 'Community workflows,\nunlimited customization\nthrough pre-installed\ncustom nodes',
+    'zh-CN': '社区工作流，\n通过预安装自定义节点\n实现无限自定义'
+  },
+  'cloud.reason.4.description': {
+    en: 'Browse, run, and remix workflows built by thousands of creators. Start from proven templates instead of blank canvases. Upload custom LoRAs or finetuned foundational models from CivitAI and Hugging Face. The nodes powering ~90% of local ComfyUI workflows are now in the cloud.',
+    'zh-CN':
+      '浏览、运行和混搭由数千名创作者构建的工作流。从经过验证的模板开始，而非空白画布。上传自定义 LoRA 或来自 CivitAI 和 Hugging Face 的微调基础模型。驱动约 90% 本地 ComfyUI 工作流的节点现已上云。'
+  },
+
+  // Cloud – AIModelsSection
+  'cloud.aiModels.label': {
+    en: 'AI MODELS',
+    'zh-CN': 'AI 模型'
+  },
+  'cloud.aiModels.heading': {
+    en: 'Run the world’s\nleading AI models',
+    'zh-CN': '运行全球领先的\nAI 模型'
+  },
+  'cloud.aiModels.subtitle': {
+    en: 'New models are added as they launch.',
+    'zh-CN': '新模型发布后会第一时间上线。'
+  },
+  'cloud.aiModels.card.grokImagine': {
+    en: 'Grok Imagine',
+    'zh-CN': 'Grok Imagine'
+  },
+  'cloud.aiModels.card.nanoBananaPro': {
+    en: 'Nano Banana Pro',
+    'zh-CN': 'Nano Banana Pro'
+  },
+  'cloud.aiModels.card.ltx23': {
+    en: 'LTX 2.3',
+    'zh-CN': 'LTX 2.3'
+  },
+  'cloud.aiModels.card.qwenImageEdit': {
+    en: 'Advanced image\nediting with Qwen',
+    'zh-CN': 'Qwen 高级\n图像编辑'
+  },
+  'cloud.aiModels.card.wan22TextToVideo': {
+    en: 'Wan 2.2\ntext to video',
+    'zh-CN': 'Wan 2.2\n文生视频'
+  },
+  'cloud.aiModels.ctaDesktop': {
+    en: 'EXPLORE WORKFLOWS WITH THE LATEST MODELS',
+    'zh-CN': '探索最新模型工作流'
+  },
+  'cloud.aiModels.ctaMobile': {
+    en: 'EXPLORE WORKFLOWS',
+    'zh-CN': '探索工作流'
+  },
+
+  // Cloud – AudienceSection
+  'cloud.audience.heading': {
+    en: 'Built for {creators} who need quality, control, and simplicity.',
+    'zh-CN': '为追求质量、控制与简约的{creators}而生。'
+  },
+  'cloud.audience.headingHighlight': {
+    en: 'creators',
+    'zh-CN': '创作者'
+  },
+  'cloud.audience.creators.label': {
+    en: 'CREATORS',
+    'zh-CN': '创作者'
+  },
+  'cloud.audience.creators.title': {
+    en: 'From idea to output\nin minutes.',
+    'zh-CN': '从创意到成品，\n只需几分钟。'
+  },
+  'cloud.audience.creators.description': {
+    en: 'For those who want to generate images, video, and 3D with more control than prompt-based tools offer — without spending a weekend configuring your machine.',
+    'zh-CN':
+      '适合那些想要生成图像、视频和 3D 内容，且需要比基于提示词的工具更精细控制的人——无需花一整个周末配置机器。'
+  },
+  'cloud.audience.teams.label': {
+    en: 'TEAMS & STUDIOS',
+    'zh-CN': '团队与工作室'
+  },
+  'cloud.audience.teams.title': {
+    en: 'Onboard your\nteam today.',
+    'zh-CN': '立即开始\n团队协作。'
+  },
+  'cloud.audience.teams.description': {
+    en: 'No IT setup, no GPU procurement, no environment headaches. Everyone works from the same up-to-date platform. Share workflows via App Mode links — your team runs them instantly, no training required.',
+    'zh-CN':
+      '无需 IT 部署、GPU 采购，也没有环境配置的烦恼。所有人在同一个最新平台上工作。通过 App Mode 链接分享工作流——团队立即运行，无需培训。'
+  },
+
+  // Cloud – PricingSection
+  'cloud.pricing.title': {
+    en: 'Simple, credit-based pricing',
+    'zh-CN': '简单的按积分计费'
+  },
+  'cloud.pricing.description': {
+    en: 'One balance for Cloud GPU time and Partner Node API models. Build and edit workflows for free — credits are consumed only when the GPU runs.',
+    'zh-CN':
+      '一个余额即可使用云端 GPU 算力和合作伙伴节点 API 模型。免费构建和编辑工作流——仅在 GPU 运行时消耗积分。'
+  },
+  'cloud.pricing.tagline': {
+    en: "Start free. Upgrade when you're ready.",
+    'zh-CN': '免费开始，随时升级。'
+  },
+  'cloud.pricing.cta': {
+    en: 'SEE PRICING PLANS',
+    'zh-CN': '查看定价方案'
+  },
+
+  // Cloud – FAQSection
+  'cloud.faq.heading': {
+    en: "FAQ's",
+    'zh-CN': '常见问题'
+  },
+  'cloud.faq.1.q': {
+    en: 'What is Comfy Cloud / ComfyUI Cloud?',
+    'zh-CN': '什么是 Comfy Cloud / ComfyUI Cloud？'
+  },
+  'cloud.faq.1.a': {
+    en: 'Comfy Cloud is a version of ComfyUI that we officially host — no setup, no GPU required. Run your workflows instantly on high-performance cloud GPUs.',
+    'zh-CN':
+      'Comfy Cloud 是我们官方托管的 ComfyUI 版本——无需设置，无需 GPU。在高性能云端 GPU 上即时运行您的工作流。'
+  },
+  'cloud.faq.2.q': {
+    en: 'How is Cloud different from running ComfyUI locally?',
+    'zh-CN': 'Cloud 与本地运行 ComfyUI 有什么区别？'
+  },
+  'cloud.faq.2.a': {
+    en: 'Cloud runs on powerful remote GPUs and is accessible from any device. Local runs entirely on your computer, giving you full control and offline use.',
+    'zh-CN':
+      'Cloud 在强大的远程 GPU 上运行，可从任何设备访问。本地版完全在您的电脑上运行，提供完全控制和离线使用。'
+  },
+  'cloud.faq.3.q': {
+    en: 'Which version should I choose, Comfy Cloud or local ComfyUI (self-hosted)?',
+    'zh-CN': '我应该选择 Comfy Cloud 还是本地 ComfyUI（自托管）？'
+  },
+  'cloud.faq.3.a': {
+    en: "Comfy Cloud (beta) has zero setup, is easy to share with your team, and is faster than most GPUs you can run on a desktop workstation. You can immediately run the best models and workflows from the community on Comfy Cloud.\nLocal ComfyUI is infinitely customizable, works offline, and you don't need to worry about queue times. However, depending on what you want to create, you might need to have a good GPU and some amount of technical knowledge to install community-created custom nodes.",
+    'zh-CN':
+      'Comfy Cloud（测试版）无需任何设置，方便与团队共享，比大多数桌面工作站 GPU 更快。您可以立即在 Comfy Cloud 上运行社区中最好的模型和工作流。\n本地 ComfyUI 可以无限定制，支持离线工作，无需担心排队时间。但根据您的创作需求，可能需要一块好的 GPU 以及一定的技术知识来安装社区创建的自定义节点。'
+  },
+  'cloud.faq.4.q': {
+    en: 'Do I need a GPU or a strong computer to use Comfy Cloud?',
+    'zh-CN': '使用 Comfy Cloud 需要 GPU 或高性能电脑吗？'
+  },
+  'cloud.faq.4.a': {
+    en: 'No, you can start creating instantly from your browser, no matter what computer you use.',
+    'zh-CN': '不需要，无论使用什么电脑，您都可以从浏览器即时开始创作。'
+  },
+  'cloud.faq.5.q': {
+    en: 'What machine or GPU does Comfy Cloud run on?',
+    'zh-CN': 'Comfy Cloud 使用什么机器或 GPU？'
+  },
+  'cloud.faq.5.a': {
+    en: 'Comfy Cloud runs on Blackwell RTX 6000 Pros — 96GB VRAM.',
+    'zh-CN': 'Comfy Cloud 运行在 Blackwell RTX 6000 Pro 上——96GB 显存。'
+  },
+  'cloud.faq.6.q': {
+    en: 'Can I use my existing workflows with Comfy Cloud?',
+    'zh-CN': '我可以在 Comfy Cloud 上使用现有的工作流吗？'
+  },
+  'cloud.faq.6.a': {
+    en: 'Yes, your workflows work across Local and Cloud. Just note that only the most popular custom nodes are supported for now, but more will be added soon.',
+    'zh-CN':
+      '可以，您的工作流在本地和云端都能使用。请注意，目前仅支持最热门的自定义节点，但很快会添加更多。'
+  },
+  'cloud.faq.7.q': {
+    en: 'Are all ComfyUI extensions and custom nodes supported?',
+    'zh-CN': '所有 ComfyUI 扩展和自定义节点都支持吗？'
+  },
+  'cloud.faq.7.a': {
+    en: 'You can always check Cloud to see the list of extensions and models that we support, for free.\nMost popular ones are available, and new ones are added over time.',
+    'zh-CN':
+      '您可以随时在 Cloud 上免费查看我们支持的扩展和模型列表。\n大多数热门扩展已可用，新的扩展会持续添加。'
+  },
+  'cloud.faq.8.q': {
+    en: 'Can I use my own models or checkpoints?',
+    'zh-CN': '我可以使用自己的模型或检查点吗？'
+  },
+  'cloud.faq.8.a': {
+    en: 'You can always check Cloud to see the list of extensions and models that we support, for free.\nCurrently, we support a wide variety of preinstalled models.\nFor those on the Creator or Pro plans, you can bring in your own fine-tuned LoRAs from CivitAI to perfect your own style.\nImporting from HuggingFace and direct file upload for larger models is on our roadmap.',
+    'zh-CN':
+      '您可以随时在 Cloud 上免费查看我们支持的扩展和模型列表。\n目前我们支持大量预装模型。\n对于 Creator 或 Pro 计划用户，您可以导入自己从 CivitAI 微调的 LoRA 来打造专属风格。\n从 HuggingFace 导入和大型模型的直接上传功能已在我们的路线图中。'
+  },
+  'cloud.faq.9.q': {
+    en: 'Can I run long or multiple workflows?',
+    'zh-CN': '我可以运行长时间或多个工作流吗？'
+  },
+  'cloud.faq.9.a': {
+    en: "Each workflow can run for up to 30 minutes, with one active job at a time. We're adding higher tiers and parallel runs soon for even more flexibility.",
+    'zh-CN':
+      '每个工作流最长可运行 30 分钟，同时运行一个活跃任务。我们即将推出更高层级和并行运行，提供更大灵活性。'
+  },
+  'cloud.faq.10.q': {
+    en: 'How is my user data stored and secured in Comfy Cloud?',
+    'zh-CN': '我的用户数据在 Comfy Cloud 中如何存储和保护？'
+  },
+  'cloud.faq.10.a': {
+    en: 'By default, all your inputs, outputs, and workflows are private to your account.\nFor enhanced security features or enterprise-level options, please contact our team via support@comfy.org for more details.',
+    'zh-CN':
+      '默认情况下，您的所有输入、输出和工作流都是您账户的私有数据。\n如需增强安全功能或企业级选项，请通过 support@comfy.org 联系我们的团队了解更多详情。'
+  },
+  'cloud.faq.11.q': {
+    en: 'How does pricing for Comfy Cloud work?',
+    'zh-CN': 'Comfy Cloud 的定价是怎样的？'
+  },
+  'cloud.faq.11.a': {
+    en: 'Your monthly plan grants you a single credit balance that you can spend anywhere. Partner Nodes (formerly API nodes) will have set credit prices per usage. For Cloud workflows, you will be charged credits based on the exact duration of your workflow run — longer runs consume more credits.',
+    'zh-CN':
+      '您的月度计划会授予一个可在任何地方使用的积分余额。合作伙伴节点（原 API 节点）按使用量设定积分价格。对于云端工作流，将根据工作流运行的确切时长收取积分——运行时间越长消耗的积分越多。'
+  },
+  'cloud.faq.12.q': {
+    en: "What's the difference between Partner Node credits and my Cloud subscription?",
+    'zh-CN': '合作伙伴节点积分和我的 Cloud 订阅有什么区别？'
+  },
+  'cloud.faq.12.a': {
+    en: 'Comfy Cloud has a credit system that is used for both Partner nodes (formerly API nodes) and running workflows on cloud.\n1. Partner Nodes (Pay-as-you-go): These nodes (formerly called API nodes) run third-party models via API calls and can be used on both Comfy Cloud and Local/Self-Hosted ComfyUI. Each node has its own usage cost, determined by the API provider, and we directly match their pricing.\n2. Running workflows on cloud: Exclusive to Comfy Cloud, you get a set amount of credits per month, with the amount differing based on your plan. More credits can be topped up anytime. Credits are only used up for GPU time while workflows are running — not while editing or building them. No idle costs, no setup, and no infrastructure to manage.',
+    'zh-CN':
+      'Comfy Cloud 有一个积分系统，用于合作伙伴节点（原 API 节点）和在云端运行工作流。\n1. 合作伙伴节点（按需付费）：这些节点（原称 API 节点）通过 API 调用运行第三方模型，可在 Comfy Cloud 和本地/自托管 ComfyUI 上使用。每个节点有其自身的使用成本，由 API 提供商决定，我们直接匹配他们的定价。\n2. 在云端运行工作流：Comfy Cloud 专属，您每月获得一定数量的积分，数量根据您的计划而不同。积分可随时充值。积分仅在工作流运行时用于 GPU 时间——编辑或构建时不消耗。无闲置成本，无需设置，无需管理基础设施。'
+  },
+  'cloud.faq.13.q': {
+    en: 'Can I cancel my subscription?',
+    'zh-CN': '我可以取消订阅吗？'
+  },
+  'cloud.faq.13.a': {
+    en: "Yes. You can cancel your subscription anytime through your account's billing settings, powered by Stripe. Your plan will remain active until the end of your current billing period.",
+    'zh-CN':
+      '可以。您可以随时通过账户的账单设置取消订阅（由 Stripe 提供支持）。您的计划将在当前计费周期结束前保持有效。'
+  },
+  'cloud.faq.14.q': {
+    en: "Where can I find my invoices or add my company's tax ID?",
+    'zh-CN': '我在哪里可以找到发票或添加公司税号？'
+  },
+  'cloud.faq.14.a': {
+    en: "You can manage all billing details directly through your Stripe portal.\nGo to Settings → Plans & Credits → Invoice History to open the Stripe portal. From there, you can view and download invoices, update your billing information, and add your company's tax ID.",
+    'zh-CN':
+      '您可以通过 Stripe 门户直接管理所有账单详情。\n前往设置 → 计划与积分 → 发票历史以打开 Stripe 门户。在那里，您可以查看和下载发票、更新账单信息并添加公司税号。'
+  },
+  'cloud.faq.15.q': {
+    en: 'Will ComfyUI always be free to run locally?',
+    'zh-CN': 'ComfyUI 本地运行会一直免费吗？'
+  },
+  'cloud.faq.15.a': {
+    en: "Yes, absolutely. ComfyUI will always be free and open source. You can deploy it however you want, such as downloading it from GitHub, using Docker, custom setups, etc.\n\nComfy Cloud is an optional hosted service for those who prefer convenience, accessibility, or don't have powerful GPUs.",
+    'zh-CN':
+      '是的，绝对如此。ComfyUI 将始终免费且开源。您可以按任何方式部署它，例如从 GitHub 下载、使用 Docker、自定义设置等。\n\nComfy Cloud 是一项可选的托管服务，适合偏好便捷性、可访问性或没有强大 GPU 的用户。'
+  },
+
   'buildWhat.row1': { en: 'BUILD WHAT', 'zh-CN': '构建' },
   'buildWhat.row2a': { en: "DOESN'T EXIST", 'zh-CN': '尚不存在的' },
   'buildWhat.row2b': { en: 'YET', 'zh-CN': '事物' },
@@ -278,4 +752,4 @@ export function t(key: TranslationKey, locale: Locale = 'en'): string {
   return translations[key][locale] ?? translations[key].en
 }
 
-export type { Locale }
+export type { Locale, TranslationKey }

apps/website/src/layouts/BaseLayout.astro

@@ -119,7 +119,7 @@ const websiteJsonLd = {
     )}
 
     <SiteNav locale={locale} client:load />
-    <main>
+    <main class="mt-20 lg:mt-32">
       <slot />
     </main>
     <SiteFooter locale={locale} client:load />

apps/website/src/pages/cloud/index.astro

@@ -1,8 +1,20 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro'
-import ComingSoon from '../../components/common/ComingSoon.astro'
+import HeroSection from '../../components/product/cloud/HeroSection.vue'
+import ReasonSection from '../../components/product/cloud/ReasonSection.vue'
+import AIModelsSection from '../../components/product/cloud/AIModelsSection.vue'
+import AudienceSection from '../../components/product/cloud/AudienceSection.vue'
+import PricingSection from '../../components/product/cloud/PricingSection.vue'
+import ProductCardsSection from '../../components/product/cloud/ProductCardsSection.vue'
+import FAQSection from '../../components/product/cloud/FAQSection.vue'
 ---
 
-<BaseLayout title="Comfy Cloud — Run AI From Anywhere">
-  <ComingSoon />
+<BaseLayout title="Comfy Cloud — AI in the Cloud">
+  <HeroSection />
+  <ReasonSection />
+  <AIModelsSection />
+  <AudienceSection />
+  <PricingSection />
+  <ProductCardsSection />
+  <FAQSection client:visible />
 </BaseLayout>

apps/website/src/pages/download.astro

@@ -1,8 +1,18 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro'
-import ComingSoon from '../components/common/ComingSoon.astro'
+import HeroSection from '../components/product/local/HeroSection.vue'
+import CloudBannerSection from '../components/product/local/CloudBannerSection.vue'
+import ReasonSection from '../components/product/local/ReasonSection.vue'
+import EcoSystemSection from '../components/product/local/EcoSystemSection.vue'
+import ProductCardsSection from '../components/product/local/ProductCardsSection.vue'
+import FAQSection from '../components/product/local/FAQSection.vue'
 ---
 
 <BaseLayout title="Download Comfy — Run AI Locally">
-  <ComingSoon />
+  <CloudBannerSection />
+  <HeroSection client:load />
+  <ReasonSection />
+  <EcoSystemSection client:visible />
+  <ProductCardsSection />
+  <FAQSection client:visible />
 </BaseLayout>

apps/website/src/pages/zh-CN/download.astro

@@ -1,76 +1,18 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro'
-
-const cards = [
-  {
-    icon: '🪟',
-    title: 'Windows',
-    description: '需要 NVIDIA 或 AMD 显卡',
-    cta: '下载 Windows 版',
-    href: 'https://download.comfy.org/windows/nsis/x64',
-    outlined: false,
-  },
-  {
-    icon: '🍎',
-    title: 'Mac',
-    description: '需要 Apple Silicon (M 系列)',
-    cta: '下载 Mac 版',
-    href: 'https://download.comfy.org/mac/dmg/arm64',
-    outlined: false,
-  },
-  {
-    icon: '🐙',
-    title: 'GitHub',
-    description: '在任何平台上从源码构建',
-    cta: '从 GitHub 安装',
-    href: 'https://github.com/comfyanonymous/ComfyUI',
-    outlined: true,
-  },
-]
+import CloudBannerSection from '../../components/product/local/CloudBannerSection.vue'
+import HeroSection from '../../components/product/local/HeroSection.vue'
+import ReasonSection from '../../components/product/local/ReasonSection.vue'
+import EcoSystemSection from '../../components/product/local/EcoSystemSection.vue'
+import ProductCardsSection from '../../components/product/local/ProductCardsSection.vue'
+import FAQSection from '../../components/product/local/FAQSection.vue'
 ---
 
 <BaseLayout title="下载 — Comfy">
-  <div class="mx-auto max-w-5xl px-6 py-32 text-center">
-    <h1 class="text-4xl font-bold text-white md:text-5xl">
-      下载 ComfyUI
-    </h1>
-    <p class="mt-4 text-lg text-smoke-700">
-      在本地体验 AI 创作
-    </p>
-
-    <div class="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3">
-      {cards.map((card) => (
-        <a
-          href={card.href}
-          class="flex flex-col items-center rounded-xl border border-white/10 bg-charcoal-600 p-8 text-center transition-colors hover:border-brand-yellow"
-        >
-          <span class="text-4xl" aria-hidden="true">{card.icon}</span>
-          <h2 class="mt-4 text-xl font-semibold text-white">{card.title}</h2>
-          <p class="mt-2 text-sm text-smoke-700">{card.description}</p>
-          <span
-            class:list={[
-              'mt-6 inline-block rounded-full px-6 py-2 text-sm font-semibold transition-opacity hover:opacity-90',
-              card.outlined
-                ? 'border border-brand-yellow text-brand-yellow'
-                : 'bg-brand-yellow text-black',
-            ]}
-          >
-            {card.cta}
-          </span>
-        </a>
-      ))}
-    </div>
-
-    <div class="mt-20 rounded-xl border border-white/10 bg-charcoal-800 p-8">
-      <p class="text-lg text-smoke-700">
-        没有 GPU？{' '}
-        <a
-          href="https://app.comfy.org"
-          class="font-semibold text-brand-yellow hover:underline"
-        >
-          试试 Comfy Cloud →
-        </a>
-      </p>
-    </div>
-  </div>
+  <CloudBannerSection locale="zh-CN" />
+  <HeroSection locale="zh-CN" client:load />
+  <ReasonSection locale="zh-CN" />
+  <EcoSystemSection locale="zh-CN" client:visible />
+  <ProductCardsSection locale="zh-CN" />
+  <FAQSection locale="zh-CN" client:visible />
 </BaseLayout>

apps/website/src/styles/global.css

@@ -62,8 +62,10 @@
   --color-transparency-white-t4: rgb(255 255 255 / 0.04);
   --font-formula: 'PP Formula', sans-serif;
   --font-formula-condensed: 'PP Formula Condensed', sans-serif;
+  --text-3\.5xl: 2rem;
   --text-6\.5xl: 4.125rem;
   --radius-4xl: 2rem;
+  --radius-4\.5xl: 2.25rem;
   --radius-5xl: 2.5rem;
 }
 
@@ -113,3 +115,16 @@
     scroll-behavior: auto !important;
   }
 }
+
+@utility icon-mask {
+  background-color: currentColor;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+
+:root {
+  --site-bg: #211927;
+  --site-bg-soft: color-mix(in srgb, var(--site-bg) 88%, black 12%);
+  --site-border-subtle: rgb(255 255 255 / 0.1);
+}

apps/website/tsconfig.json

@@ -6,5 +6,6 @@
     }
   },
   "include": ["src/**/*", "e2e/**/*", "astro.config.ts"],
-  "exclude": ["src/**/*.stories.ts"]
+  "exclude": ["src/**/*.stories.ts"],
+  "references": [{ "path": "./tsconfig.stories.json" }]
 }

apps/website/tsconfig.stories.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "composite": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.stories.ts"]
+}

browser_tests/fixtures/ComfyPage.ts

@@ -10,7 +10,7 @@ import { ComfyMouse } from '@e2e/fixtures/ComfyMouse'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { comfyExpect } from '@e2e/fixtures/utils/customMatchers'
 import { assetPath } from '@e2e/fixtures/utils/paths'
-import { nextFrame, sleep } from '@e2e/fixtures/utils/timing'
+import { sleep } from '@e2e/fixtures/utils/timing'
 import { VueNodeHelpers } from '@e2e/fixtures/VueNodeHelpers'
 import { BottomPanel } from '@e2e/fixtures/components/BottomPanel'
 import { ComfyNodeSearchBox } from '@e2e/fixtures/components/ComfyNodeSearchBox'
@@ -23,7 +23,6 @@ import { SettingDialog } from '@e2e/fixtures/components/SettingDialog'
 import { TemplatesDialog } from '@e2e/fixtures/components/TemplatesDialog'
 import {
   AssetsSidebarTab,
-  JobHistorySidebarTab,
   ModelLibrarySidebarTab,
   NodeLibrarySidebarTab,
   NodeLibrarySidebarTabV2,
@@ -31,6 +30,9 @@ import {
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
 import { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
+import type { AssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
+import { createAssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
+import { AssetsHelper } from '@e2e/fixtures/helpers/AssetsHelper'
 import { CanvasHelper } from '@e2e/fixtures/helpers/CanvasHelper'
 import { ClipboardHelper } from '@e2e/fixtures/helpers/ClipboardHelper'
 import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
@@ -63,7 +65,6 @@ class ComfyPropertiesPanel {
 
 class ComfyMenu {
   private _assetsTab: AssetsSidebarTab | null = null
-  private _jobHistoryTab: JobHistorySidebarTab | null = null
   private _modelLibraryTab: ModelLibrarySidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _nodeLibraryTabV2: NodeLibrarySidebarTabV2 | null = null
@@ -102,11 +103,6 @@ class ComfyMenu {
     return this._assetsTab
   }
 
-  get jobHistoryTab() {
-    this._jobHistoryTab ??= new JobHistorySidebarTab(this.page)
-    return this._jobHistoryTab
-  }
-
   get workflowsTab() {
     this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
     return this._workflowsTab
@@ -182,6 +178,8 @@ export class ComfyPage {
   public readonly bottomPanel: BottomPanel
   public readonly queuePanel: QueuePanel
   public readonly perf: PerformanceHelper
+  public readonly assets: AssetsHelper
+  public readonly assetApi: AssetHelper
   public readonly modelLibrary: ModelLibraryHelper
   public readonly cloudAuth: CloudAuthHelper
   public readonly visibleToasts: Locator
@@ -234,6 +232,8 @@ export class ComfyPage {
     this.bottomPanel = new BottomPanel(page)
     this.queuePanel = new QueuePanel(page)
     this.perf = new PerformanceHelper(page)
+    this.assets = new AssetsHelper(page)
+    this.assetApi = createAssetHelper(page)
     this.modelLibrary = new ModelLibraryHelper(page)
     this.cloudAuth = new CloudAuthHelper(page)
   }
@@ -336,7 +336,9 @@ export class ComfyPage {
   }
 
   async nextFrame() {
-    await nextFrame(this.page)
+    await this.page.evaluate(() => {
+      return new Promise<number>(requestAnimationFrame)
+    })
   }
 
   async delay(ms: number) {
@@ -391,27 +393,6 @@ export class ComfyPage {
     return this.page.locator('.dom-widget')
   }
 
-  async expectScreenshot(
-    locator: Locator,
-    name: string | string[],
-    options?: {
-      animations?: 'disabled' | 'allow'
-      caret?: 'hide' | 'initial'
-      mask?: Array<Locator>
-      maskColor?: string
-      maxDiffPixelRatio?: number
-      maxDiffPixels?: number
-      omitBackground?: boolean
-      scale?: 'css' | 'device'
-      stylePath?: string | Array<string>
-      threshold?: number
-      timeout?: number
-    }
-  ): Promise<void> {
-    await this.nextFrame()
-    await comfyExpect(locator).toHaveScreenshot(name, options)
-  }
-
   async setFocusMode(focusMode: boolean) {
     await this.page.evaluate((focusMode) => {
       ;(window.app!.extensionManager as WorkspaceStore).focusMode = focusMode
@@ -499,6 +480,7 @@ export const comfyPageFixture = base.extend<{
 
     await use(comfyPage)
 
+    await comfyPage.assetApi.clearMocks()
     if (needsPerf) await comfyPage.perf.dispose()
   },
   comfyMouse: async ({ comfyPage }, use) => {

browser_tests/fixtures/assetApiFixture.ts

@@ -1,16 +0,0 @@
-import { test as base } from '@playwright/test'
-
-import type { AssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
-import { createAssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
-
-export const assetApiFixture = base.extend<{
-  assetApi: AssetHelper
-}>({
-  assetApi: async ({ page }, use) => {
-    const assetApi = createAssetHelper(page)
-
-    await use(assetApi)
-
-    await assetApi.clearMocks()
-  }
-})

browser_tests/fixtures/assetScenarioFixture.ts

@@ -1,14 +0,0 @@
-import { jobsApiMockFixture } from '@e2e/fixtures/jobsApiMockFixture'
-import { AssetScenarioHelper } from '@e2e/fixtures/helpers/AssetScenarioHelper'
-
-export const assetScenarioFixture = jobsApiMockFixture.extend<{
-  assetScenario: AssetScenarioHelper
-}>({
-  assetScenario: async ({ page, jobsApi }, use) => {
-    const assetScenario = new AssetScenarioHelper(page, jobsApi)
-
-    await use(assetScenario)
-
-    await assetScenario.clear()
-  }
-})

browser_tests/fixtures/components/SidebarTab.ts

@@ -204,43 +204,6 @@ export class WorkflowsSidebarTab extends SidebarTab {
   }
 }
 
-export class JobHistorySidebarTab extends SidebarTab {
-  public readonly root: Locator
-  public readonly searchInput: Locator
-  public readonly allTab: Locator
-  public readonly completedTab: Locator
-  public readonly failedTab: Locator
-  public readonly moreOptionsButton: Locator
-  public readonly clearQueuedButton: Locator
-  public readonly jobRows: Locator
-
-  constructor(public override readonly page: Page) {
-    super(page, 'job-history')
-    this.root = page.locator('.sidebar-content-container')
-    this.searchInput = this.root.getByPlaceholder('Search...')
-    this.allTab = this.root.getByRole('tab', { name: 'All', exact: true })
-    this.completedTab = this.root.getByRole('tab', {
-      name: 'Completed',
-      exact: true
-    })
-    this.failedTab = this.root.getByRole('tab', { name: 'Failed', exact: true })
-    this.moreOptionsButton = this.root.getByLabel('More options')
-    this.clearQueuedButton = this.root.getByRole('button', {
-      name: 'Clear queue'
-    })
-    this.jobRows = this.root.locator('[data-job-id]')
-  }
-
-  jobRow(jobId: string) {
-    return this.root.locator(`[data-job-id="${jobId}"]`)
-  }
-
-  override async open() {
-    await super.open()
-    await this.searchInput.waitFor({ state: 'visible' })
-  }
-}
-
 export class ModelLibrarySidebarTab extends SidebarTab {
   public readonly searchInput: Locator
   public readonly modelTree: Locator
@@ -286,62 +249,70 @@ export class ModelLibrarySidebarTab extends SidebarTab {
 }
 
 export class AssetsSidebarTab extends SidebarTab {
-  public readonly root: Locator
+  // --- Tab navigation ---
   public readonly generatedTab: Locator
   public readonly importedTab: Locator
+
+  // --- Empty state ---
   public readonly emptyStateMessage: Locator
+
+  // --- Search & filter ---
   public readonly searchInput: Locator
   public readonly settingsButton: Locator
+
+  // --- View mode ---
   public readonly listViewOption: Locator
   public readonly gridViewOption: Locator
-  public readonly backToAssetsButton: Locator
-  public readonly copyJobIdButton: Locator
-  public readonly previewDialog: Locator
+
+  // --- Sort options (cloud-only, shown inside settings popover) ---
   public readonly sortNewestFirst: Locator
   public readonly sortOldestFirst: Locator
+
+  // --- Asset cards ---
   public readonly assetCards: Locator
   public readonly selectedCards: Locator
+
+  // --- List view items ---
   public readonly listViewItems: Locator
+
+  // --- Selection footer ---
   public readonly selectionFooter: Locator
   public readonly selectionCountButton: Locator
   public readonly deselectAllButton: Locator
   public readonly deleteSelectedButton: Locator
   public readonly downloadSelectedButton: Locator
+
+  // --- Folder view ---
+  public readonly backToAssetsButton: Locator
+
+  // --- Loading ---
   public readonly skeletonLoaders: Locator
 
   constructor(public override readonly page: Page) {
     super(page, 'assets')
-    this.root = page.locator('.sidebar-content-container')
     this.generatedTab = page.getByRole('tab', { name: 'Generated' })
     this.importedTab = page.getByRole('tab', { name: 'Imported' })
     this.emptyStateMessage = page.getByText(
       'Upload files or generate content to see them here'
     )
-    this.searchInput = this.root.getByPlaceholder(/Search Assets/i)
-    this.settingsButton = this.root.getByLabel('View settings')
+    this.searchInput = page.getByPlaceholder('Search Assets...')
+    this.settingsButton = page.getByRole('button', { name: 'View settings' })
     this.listViewOption = page.getByText('List view')
     this.gridViewOption = page.getByText('Grid view')
-    this.backToAssetsButton = page.getByRole('button', {
-      name: 'Back to all assets'
-    })
-    this.copyJobIdButton = page.getByRole('button', {
-      name: 'Copy job ID'
-    })
-    this.previewDialog = page.getByRole('dialog', { name: 'Gallery' })
     this.sortNewestFirst = page.getByText('Newest first')
     this.sortOldestFirst = page.getByText('Oldest first')
-    this.assetCards = this.root
+    this.assetCards = page
       .getByRole('button')
-      .and(this.root.locator('[data-selected]'))
-    this.selectedCards = this.root.locator('[data-selected="true"]')
-    this.listViewItems = this.root.getByRole('button', { name: /asset$/i })
-    this.selectionFooter = this.root.locator('..').getByRole('toolbar', {
-      name: 'Selected asset actions'
-    })
-    this.selectionCountButton = this.root
-      .getByRole('button', { name: /Assets Selected:/ })
-      .or(page.getByText(/Assets Selected: \d+/))
-      .first()
+      .and(page.locator('[data-selected]'))
+    this.selectedCards = page.locator('[data-selected="true"]')
+    this.listViewItems = page.locator(
+      '.sidebar-content-container [role="button"][tabindex="0"]'
+    )
+    this.selectionFooter = page
+      .locator('.sidebar-content-container')
+      .locator('..')
+      .locator('[class*="h-18"]')
+    this.selectionCountButton = page.getByText(/Assets Selected: \d+/)
     this.deselectAllButton = page.getByText('Deselect all')
     this.deleteSelectedButton = page
       .getByTestId('assets-delete-selected')
@@ -351,113 +322,28 @@ export class AssetsSidebarTab extends SidebarTab {
       .getByTestId('assets-download-selected')
       .or(page.locator('button:has(.icon-\\[lucide--download\\])').last())
       .first()
-    this.skeletonLoaders = this.root.locator('.animate-pulse')
+    this.backToAssetsButton = page.getByText('Back to all assets')
+    this.skeletonLoaders = page.locator(
+      '.sidebar-content-container .animate-pulse'
+    )
   }
 
   emptyStateTitle(title: string) {
     return this.page.getByText(title)
   }
 
-  previewImage(filename: string) {
-    return this.previewDialog.getByRole('img', { name: filename })
-  }
-
-  asset(name: string) {
-    return this.getAssetCardByName(name)
-  }
-
   getAssetCardByName(name: string) {
-    return this.assetCards.filter({ hasText: name }).first()
+    return this.assetCards.filter({ hasText: name })
   }
 
   contextMenuItem(label: string) {
     return this.page.locator('.p-contextmenu').getByText(label)
   }
 
-  contextMenuAction(label: string) {
-    return this.contextMenuItem(label)
-  }
-
-  async showGenerated() {
-    await this.switchToGenerated()
-  }
-
-  async showImported() {
-    await this.switchToImported()
-  }
-
-  async search(query: string) {
-    await this.searchInput.fill(query)
-  }
-
-  async switchToListView() {
-    await this.openSettingsMenu()
-    await this.listViewOption.click()
-  }
-
-  async switchToGridView() {
-    await this.openSettingsMenu()
-    await this.gridViewOption.click()
-  }
-
-  async openContextMenuForAsset(name: string) {
-    await this.asset(name).click({ button: 'right' })
-    await this.page
-      .locator('.p-contextmenu')
-      .waitFor({ state: 'visible', timeout: 3000 })
-  }
-
-  async runContextMenuAction(assetName: string, actionName: string) {
-    await this.openContextMenuForAsset(assetName)
-    await this.contextMenuAction(actionName).click()
-  }
-
-  async openAssetPreview(name: string) {
-    const asset = this.asset(name)
-    await asset.hover()
-
-    const zoomButton = asset.getByLabel('Zoom in')
-    if (await zoomButton.isVisible().catch(() => false)) {
-      await zoomButton.click()
-      return
-    }
-
-    await asset.dblclick()
-  }
-
-  async openOutputFolder(name: string) {
-    await this.asset(name)
-      .getByRole('button', { name: 'See more outputs' })
-      .click()
-
-    await this.backToAssetsButton.waitFor({ state: 'visible' })
-  }
-
-  async toggleStack(name: string) {
-    await this.asset(name)
-      .getByRole('button', { name: 'See more outputs' })
-      .click()
-  }
-
-  async selectAssets(names: string[]) {
-    if (names.length === 0) {
-      return
-    }
-
-    await this.asset(names[0]).click()
-
-    for (const name of names.slice(1)) {
-      await this.asset(name).click({
-        modifiers: ['ControlOrMeta']
-      })
-    }
-  }
-
   override async open() {
     // Remove any toast notifications that may overlay the sidebar button
     await this.dismissToasts()
     await super.open()
-    await this.root.waitFor({ state: 'visible' })
     await this.generatedTab.waitFor({ state: 'visible' })
   }
 

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -160,15 +160,6 @@ export class AppModeHelper {
 
   /** Enter builder mode via the "Workflow actions" dropdown. */
   async enterBuilder() {
-    // Wait for any workflow-tab popover to dismiss before clicking —
-    // the popover overlay can intercept the "Workflow actions" click.
-    // Best-effort: the popover may or may not exist; if it stays visible
-    // past the timeout we still proceed with the click.
-    await this.page
-      .locator('.workflow-popover-fade')
-      .waitFor({ state: 'hidden', timeout: 5000 })
-      .catch(() => {})
-
     await this.page
       .getByRole('button', { name: 'Workflow actions' })
       .first()
@@ -183,6 +174,7 @@ export class AppModeHelper {
   async toggleAppMode() {
     await this.comfyPage.workflow.waitForActiveWorkflow()
     await this.comfyPage.command.executeCommand('Comfy.ToggleLinear')
+    await this.comfyPage.nextFrame()
   }
 
   /**

browser_tests/fixtures/helpers/AssetScenarioHelper.ts

@@ -1,275 +0,0 @@
-import { readFile } from 'node:fs/promises'
-
-import type { Page, Route } from '@playwright/test'
-import type { JobDetailResponse, JobEntry } from '@comfyorg/ingest-types'
-
-import { buildMockJobOutputs } from '@e2e/fixtures/helpers/buildMockJobOutputs'
-import type {
-  GeneratedJobFixture,
-  GeneratedOutputFixture,
-  ImportedAssetFixture
-} from '@e2e/fixtures/helpers/assetScenarioTypes'
-import { JobsApiMock } from '@e2e/fixtures/helpers/JobsApiMock'
-import { getMimeType } from '@e2e/fixtures/helpers/mimeTypeUtil'
-import {
-  buildFileRequestKey,
-  buildMockAssetFiles,
-  defaultFileFor
-} from '@e2e/fixtures/helpers/mockAssetFiles'
-import type { MockAssetFile } from '@e2e/fixtures/helpers/mockAssetFiles'
-
-const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
-const viewRoutePattern = /\/api\/view(?:\?.*)?$/
-const DEFAULT_FIXTURE_CREATE_TIME = Date.UTC(2024, 0, 1, 0, 0, 0)
-
-type MockPreviewOutput = NonNullable<JobEntry['preview_output']> & {
-  filename?: string
-  subfolder?: string
-  type?: GeneratedOutputFixture['type']
-  nodeId: string
-  mediaType?: string
-  display_name?: string
-}
-
-function normalizeOutputFixture(
-  output: GeneratedOutputFixture
-): GeneratedOutputFixture {
-  const fallback = defaultFileFor(output.filename)
-
-  return {
-    mediaType: 'images',
-    subfolder: '',
-    type: 'output',
-    ...output,
-    filePath: output.filePath ?? fallback.filePath,
-    contentType: output.contentType ?? fallback.contentType
-  }
-}
-
-function createOutputFilename(baseFilename: string, index: number): string {
-  if (index === 0) {
-    return baseFilename
-  }
-
-  const extensionIndex = baseFilename.lastIndexOf('.')
-  if (extensionIndex === -1) {
-    return `${baseFilename}-${index + 1}`
-  }
-
-  return `${baseFilename.slice(0, extensionIndex)}-${index + 1}${baseFilename.slice(extensionIndex)}`
-}
-
-function getPreviewOutput(
-  previewOutput: JobEntry['preview_output'] | undefined
-): MockPreviewOutput | undefined {
-  return previewOutput as MockPreviewOutput | undefined
-}
-
-function outputsFromJobEntry(
-  job: JobEntry
-): [GeneratedOutputFixture, ...GeneratedOutputFixture[]] {
-  const previewOutput = getPreviewOutput(job.preview_output)
-  const outputCount = Math.max(job.outputs_count ?? 1, 1)
-  const baseFilename = previewOutput?.filename ?? `output_${job.id}.png`
-  const mediaType: GeneratedOutputFixture['mediaType'] =
-    previewOutput?.mediaType === 'video' || previewOutput?.mediaType === 'audio'
-      ? previewOutput.mediaType
-      : 'images'
-  const outputs = Array.from({ length: outputCount }, (_, index) => ({
-    filename: createOutputFilename(baseFilename, index),
-    displayName: index === 0 ? previewOutput?.display_name : undefined,
-    mediaType,
-    subfolder: previewOutput?.subfolder ?? '',
-    type: previewOutput?.type ?? 'output'
-  }))
-
-  return [outputs[0], ...outputs.slice(1)]
-}
-
-function generatedJobFromJobEntry(job: JobEntry): GeneratedJobFixture {
-  return {
-    jobId: job.id,
-    status: job.status,
-    outputs: outputsFromJobEntry(job),
-    createTime: job.create_time,
-    executionStartTime: job.execution_start_time,
-    executionEndTime: job.execution_end_time,
-    workflowId: job.workflow_id
-  }
-}
-
-function buildMockJobRecord(job: GeneratedJobFixture) {
-  const outputs = job.outputs.map(normalizeOutputFixture)
-  const preview = outputs[0]
-  const createTime =
-    job.createTime ??
-    (job.createdAt
-      ? new Date(job.createdAt).getTime()
-      : DEFAULT_FIXTURE_CREATE_TIME)
-  const executionStartTime = job.executionStartTime ?? createTime
-  const executionEndTime = job.executionEndTime ?? createTime + 2_000
-
-  const listItem: JobEntry = {
-    id: job.jobId,
-    status: job.status ?? 'completed',
-    create_time: createTime,
-    execution_start_time: executionStartTime,
-    execution_end_time: executionEndTime,
-    preview_output: {
-      filename: preview.filename,
-      subfolder: preview.subfolder ?? '',
-      type: preview.type ?? 'output',
-      nodeId: job.nodeId ?? '5',
-      mediaType: preview.mediaType ?? 'images',
-      display_name: preview.displayName
-    },
-    outputs_count: outputs.length,
-    ...(job.workflowId ? { workflow_id: job.workflowId } : {})
-  }
-
-  const detail: JobDetailResponse = {
-    ...listItem,
-    workflow: job.workflow,
-    outputs: buildMockJobOutputs(job, outputs),
-    update_time: executionEndTime
-  }
-
-  return { listItem, detail }
-}
-
-export class AssetScenarioHelper {
-  private inputFilesRouteHandler: ((route: Route) => Promise<void>) | null =
-    null
-  private viewRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private generatedJobs: GeneratedJobFixture[] = []
-  private importedFiles: ImportedAssetFixture[] = []
-  private filesByRequestKey = new Map<string, MockAssetFile>()
-
-  constructor(
-    private readonly page: Page,
-    private readonly jobsApi = new JobsApiMock(page)
-  ) {}
-
-  async mockGeneratedHistory(jobs: readonly JobEntry[]): Promise<void> {
-    await this.mockScenario({
-      generated: jobs.map(generatedJobFromJobEntry),
-      imported: this.importedFiles
-    })
-  }
-
-  async mockImportedFiles(files: readonly string[]): Promise<void> {
-    await this.mockScenario({
-      generated: this.generatedJobs,
-      imported: files.map((name) => ({ name }))
-    })
-  }
-
-  async mockEmptyState(): Promise<void> {
-    await this.mockScenario({ generated: [], imported: [] })
-  }
-
-  async clear(): Promise<void> {
-    this.generatedJobs = []
-    this.importedFiles = []
-    this.filesByRequestKey.clear()
-
-    await this.jobsApi.clear()
-
-    if (this.inputFilesRouteHandler) {
-      await this.page.unroute(
-        inputFilesRoutePattern,
-        this.inputFilesRouteHandler
-      )
-      this.inputFilesRouteHandler = null
-    }
-
-    if (this.viewRouteHandler) {
-      await this.page.unroute(viewRoutePattern, this.viewRouteHandler)
-      this.viewRouteHandler = null
-    }
-  }
-
-  private async mockScenario({
-    generated,
-    imported
-  }: {
-    generated: GeneratedJobFixture[]
-    imported: ImportedAssetFixture[]
-  }): Promise<void> {
-    this.generatedJobs = [...generated]
-    this.importedFiles = [...imported]
-    this.filesByRequestKey = buildMockAssetFiles({
-      generated: this.generatedJobs,
-      imported: this.importedFiles
-    })
-
-    await this.jobsApi.mockJobs(this.generatedJobs.map(buildMockJobRecord))
-    await this.ensureInputFilesRoute()
-    await this.ensureViewRoute()
-  }
-
-  private async ensureInputFilesRoute(): Promise<void> {
-    if (this.inputFilesRouteHandler) {
-      return
-    }
-
-    this.inputFilesRouteHandler = async (route: Route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(this.importedFiles.map((asset) => asset.name))
-      })
-    }
-
-    await this.page.route(inputFilesRoutePattern, this.inputFilesRouteHandler)
-  }
-
-  private async ensureViewRoute(): Promise<void> {
-    if (this.viewRouteHandler) {
-      return
-    }
-
-    this.viewRouteHandler = async (route: Route) => {
-      const url = new URL(route.request().url())
-      const filename = url.searchParams.get('filename')
-      const type = url.searchParams.get('type') ?? 'output'
-      const subfolder = url.searchParams.get('subfolder') ?? ''
-
-      if (!filename) {
-        await route.fulfill({
-          status: 400,
-          contentType: 'application/json',
-          body: JSON.stringify({ error: 'Missing filename' })
-        })
-        return
-      }
-
-      const mockFile =
-        this.filesByRequestKey.get(
-          buildFileRequestKey({
-            filename,
-            type,
-            subfolder
-          })
-        ) ?? defaultFileFor(filename)
-
-      if (mockFile.filePath) {
-        const body = await readFile(mockFile.filePath)
-        await route.fulfill({
-          status: 200,
-          contentType: mockFile.contentType ?? getMimeType(filename),
-          body
-        })
-        return
-      }
-
-      await route.fulfill({
-        status: 200,
-        contentType: mockFile.contentType ?? getMimeType(filename),
-        body: mockFile.textContent ?? ''
-      })
-    }
-
-    await this.page.route(viewRoutePattern, this.viewRouteHandler)
-  }
-}

browser_tests/fixtures/helpers/AssetsHelper.ts

@@ -0,0 +1,251 @@
+import type { Page, Route } from '@playwright/test'
+import type { JobsListResponse } from '@comfyorg/ingest-types'
+
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+
+const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
+const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
+const historyRoutePattern = /\/api\/history$/
+
+/** Factory to create a mock completed job with preview output. */
+export function createMockJob(
+  overrides: Partial<RawJobListItem> & { id: string }
+): RawJobListItem {
+  const now = Date.now()
+  return {
+    status: 'completed',
+    create_time: now,
+    execution_start_time: now,
+    execution_end_time: now + 5000,
+    preview_output: {
+      filename: `output_${overrides.id}.png`,
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1,
+    priority: 0,
+    ...overrides
+  }
+}
+
+/** Create multiple mock jobs with sequential IDs and staggered timestamps. */
+export function createMockJobs(
+  count: number,
+  baseOverrides?: Partial<RawJobListItem>
+): RawJobListItem[] {
+  const now = Date.now()
+  return Array.from({ length: count }, (_, i) =>
+    createMockJob({
+      id: `job-${String(i + 1).padStart(3, '0')}`,
+      create_time: now - i * 60_000,
+      execution_start_time: now - i * 60_000,
+      execution_end_time: now - i * 60_000 + 5000 + i * 1000,
+      preview_output: {
+        filename: `image_${String(i + 1).padStart(3, '0')}.png`,
+        subfolder: '',
+        type: 'output',
+        nodeId: '1',
+        mediaType: 'images'
+      },
+      ...baseOverrides
+    })
+  )
+}
+
+/** Create mock imported file names with various media types. */
+export function createMockImportedFiles(count: number): string[] {
+  const extensions = ['png', 'jpg', 'mp4', 'wav', 'glb', 'txt']
+  return Array.from(
+    { length: count },
+    (_, i) =>
+      `imported_${String(i + 1).padStart(3, '0')}.${extensions[i % extensions.length]}`
+  )
+}
+
+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 deleteHistoryRouteHandler: ((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)
+
+      const response = {
+        jobs: visibleJobs,
+        pagination: {
+          offset,
+          limit,
+          total,
+          has_more: offset + visibleJobs.length < total
+        }
+      } satisfies {
+        jobs: unknown[]
+        pagination: JobsListResponse['pagination']
+      }
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(response)
+      })
+    }
+
+    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)
+  }
+
+  /**
+   * Mock the POST /api/history endpoint used for deleting history items.
+   * On receiving a `{ delete: [id] }` payload, removes matching jobs from
+   * the in-memory mock state so subsequent /api/jobs fetches reflect the
+   * deletion.
+   */
+  async mockDeleteHistory(): Promise<void> {
+    if (this.deleteHistoryRouteHandler) return
+
+    this.deleteHistoryRouteHandler = async (route: Route) => {
+      const request = route.request()
+      if (request.method() !== 'POST') {
+        await route.continue()
+        return
+      }
+
+      const body = request.postDataJSON() as { delete?: string[] }
+      if (body.delete) {
+        const idsToRemove = new Set(body.delete)
+        this.generatedJobs = this.generatedJobs.filter(
+          (job) => !idsToRemove.has(job.id)
+        )
+      }
+
+      await route.fulfill({ status: 200, body: '{}' })
+    }
+
+    await this.page.route(historyRoutePattern, this.deleteHistoryRouteHandler)
+  }
+
+  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
+    }
+
+    if (this.deleteHistoryRouteHandler) {
+      await this.page.unroute(
+        historyRoutePattern,
+        this.deleteHistoryRouteHandler
+      )
+      this.deleteHistoryRouteHandler = null
+    }
+  }
+}

browser_tests/fixtures/helpers/CanvasHelper.ts

@@ -2,7 +2,6 @@ import type { Locator, Page } from '@playwright/test'
 
 import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
 import type { Position } from '@e2e/fixtures/types'
-import { nextFrame } from '@e2e/fixtures/utils/timing'
 
 export class CanvasHelper {
   constructor(
@@ -11,12 +10,18 @@ export class CanvasHelper {
     private resetViewButton: Locator
   ) {}
 
+  private async nextFrame(): Promise<void> {
+    await this.page.evaluate(() => {
+      return new Promise<number>(requestAnimationFrame)
+    })
+  }
+
   async resetView(): Promise<void> {
     if (await this.resetViewButton.isVisible()) {
       await this.resetViewButton.click()
     }
     await this.page.mouse.move(10, 10)
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async zoom(deltaY: number, steps: number = 1): Promise<void> {
@@ -24,7 +29,7 @@ export class CanvasHelper {
     for (let i = 0; i < steps; i++) {
       await this.page.mouse.wheel(0, deltaY)
     }
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async pan(offset: Position, safeSpot?: Position): Promise<void> {
@@ -33,7 +38,7 @@ export class CanvasHelper {
     await this.page.mouse.down()
     await this.page.mouse.move(offset.x + safeSpot.x, offset.y + safeSpot.y)
     await this.page.mouse.up()
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async panWithTouch(offset: Position, safeSpot?: Position): Promise<void> {
@@ -51,22 +56,22 @@ export class CanvasHelper {
       type: 'touchEnd',
       touchPoints: []
     })
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async rightClick(x: number = 10, y: number = 10): Promise<void> {
     await this.page.mouse.click(x, y, { button: 'right' })
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async doubleClick(): Promise<void> {
     await this.page.mouse.dblclick(10, 10, { delay: 5 })
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async click(position: Position): Promise<void> {
     await this.canvas.click({ position })
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   /**
@@ -102,7 +107,7 @@ export class CanvasHelper {
     } finally {
       for (const mod of modifiers) await this.page.keyboard.up(mod)
     }
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   /**
@@ -111,12 +116,12 @@ export class CanvasHelper {
   async mouseDblclickAt(position: Position): Promise<void> {
     const abs = await this.toAbsolute(position)
     await this.page.mouse.dblclick(abs.x, abs.y)
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async clickEmptySpace(): Promise<void> {
     await this.canvas.click({ position: DefaultGraphPositions.emptySpaceClick })
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async dragAndDrop(source: Position, target: Position): Promise<void> {
@@ -124,7 +129,7 @@ export class CanvasHelper {
     await this.page.mouse.down()
     await this.page.mouse.move(target.x, target.y, { steps: 100 })
     await this.page.mouse.up()
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async moveMouseToEmptyArea(): Promise<void> {
@@ -147,7 +152,7 @@ export class CanvasHelper {
     await this.page.evaluate((s) => {
       window.app!.canvas.ds.scale = s
     }, scale)
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async convertOffsetToCanvas(
@@ -231,12 +236,12 @@ export class CanvasHelper {
     // Sweep forward
     for (let i = 0; i < steps; i++) {
       await this.page.mouse.move(centerX + i * dx, centerY + i * dy)
-      await nextFrame(this.page)
+      await this.nextFrame()
     }
     // Sweep back
     for (let i = steps; i > 0; i--) {
       await this.page.mouse.move(centerX + i * dx, centerY + i * dy)
-      await nextFrame(this.page)
+      await this.nextFrame()
     }
 
     await this.page.mouse.up({ button: 'middle' })

browser_tests/fixtures/helpers/CommandHelper.ts

@@ -1,7 +1,6 @@
 import type { Page } from '@playwright/test'
 
 import type { KeyCombo } from '@/platform/keybindings/types'
-import { nextFrame } from '@e2e/fixtures/utils/timing'
 
 export class CommandHelper {
   constructor(private readonly page: Page) {}
@@ -21,7 +20,6 @@ export class CommandHelper {
       },
       { commandId, metadata }
     )
-    await nextFrame(this.page)
   }
 
   async registerCommand(

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -5,11 +5,18 @@ import type { Page } from '@playwright/test'
 import type { Position } from '@e2e/fixtures/types'
 import { getMimeType } from '@e2e/fixtures/helpers/mimeTypeUtil'
 import { assetPath } from '@e2e/fixtures/utils/paths'
-import { nextFrame } from '@e2e/fixtures/utils/timing'
 
 export class DragDropHelper {
   constructor(private readonly page: Page) {}
 
+  private async nextFrame(): Promise<void> {
+    await this.page.evaluate(() => {
+      return new Promise<void>((resolve) => {
+        requestAnimationFrame(() => resolve())
+      })
+    })
+  }
+
   async dragAndDropExternalResource(
     options: {
       fileName?: string
@@ -138,7 +145,7 @@ export class DragDropHelper {
       await uploadResponsePromise
     }
 
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async dragAndDropFile(

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -1,19 +1,18 @@
 import type { WebSocketRoute } from '@playwright/test'
-import type { JobEntry } from '@comfyorg/ingest-types'
 
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { AssetScenarioHelper } from '@e2e/fixtures/helpers/AssetScenarioHelper'
-import { createMockJob } from '@e2e/fixtures/helpers/jobFixtures'
+import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
 
 /**
  * Helper for simulating prompt execution in e2e tests.
  */
 export class ExecutionHelper {
   private jobCounter = 0
-  private readonly completedJobs: JobEntry[] = []
+  private readonly completedJobs: RawJobListItem[] = []
   private readonly page: ComfyPage['page']
   private readonly command: ComfyPage['command']
-  private readonly assetScenario: AssetScenarioHelper
+  private readonly assets: ComfyPage['assets']
 
   constructor(
     comfyPage: ComfyPage,
@@ -21,7 +20,7 @@ export class ExecutionHelper {
   ) {
     this.page = comfyPage.page
     this.command = comfyPage.command
-    this.assetScenario = new AssetScenarioHelper(comfyPage.page)
+    this.assets = comfyPage.assets
   }
 
   /**
@@ -173,6 +172,8 @@ export class ExecutionHelper {
   /**
    * Complete a job by adding it to mock history, sending execution_success,
    * and triggering a history refresh via a status event.
+   *
+   * Requires an {@link AssetsHelper} to be passed in the constructor.
    */
   async completeWithHistory(
     jobId: string,
@@ -192,7 +193,7 @@ export class ExecutionHelper {
       })
     )
 
-    await this.assetScenario.mockGeneratedHistory(this.completedJobs)
+    await this.assets.mockOutputHistory(this.completedJobs)
     this.executionSuccess(jobId)
     // Trigger queue/history refresh
     this.status(0)

browser_tests/fixtures/helpers/JobsApiMock.ts

@@ -1,183 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-import type {
-  JobDetailResponse,
-  JobEntry,
-  JobsListResponse
-} from '@comfyorg/ingest-types'
-
-const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
-const jobDetailRoutePattern = /\/api\/jobs\/[^/?#]+(?:\?.*)?$/
-const historyRoutePattern = /\/api\/history(?:\?.*)?$/
-
-export type MockJobRecord = {
-  listItem: JobEntry
-  detail: JobDetailResponse
-}
-
-type JobsListMockResponse = Omit<JobsListResponse, 'pagination'> & {
-  pagination: Omit<JobsListResponse['pagination'], 'limit'> & {
-    limit: number | null
-  }
-}
-
-function parsePositiveIntegerParam(url: URL, name: string): number | undefined {
-  const value = Number(url.searchParams.get(name))
-
-  return Number.isInteger(value) && value > 0 ? value : undefined
-}
-
-function getJobIdFromRequest(route: Route): string | null {
-  const url = new URL(route.request().url())
-  const jobId = url.pathname.split('/').at(-1)
-
-  return jobId ? decodeURIComponent(jobId) : null
-}
-
-export class JobsApiMock {
-  private listRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private detailRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private historyRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private jobsById = new Map<string, MockJobRecord>()
-
-  constructor(private readonly page: Page) {}
-
-  async mockJobs(jobs: MockJobRecord[]): Promise<void> {
-    this.jobsById = new Map(
-      jobs.map(
-        (job) => [job.listItem.id, job] satisfies [string, MockJobRecord]
-      )
-    )
-    await this.ensureRoutesRegistered()
-  }
-
-  async clear(): Promise<void> {
-    this.jobsById.clear()
-
-    if (this.listRouteHandler) {
-      await this.page.unroute(jobsListRoutePattern, this.listRouteHandler)
-      this.listRouteHandler = null
-    }
-
-    if (this.detailRouteHandler) {
-      await this.page.unroute(jobDetailRoutePattern, this.detailRouteHandler)
-      this.detailRouteHandler = null
-    }
-
-    if (this.historyRouteHandler) {
-      await this.page.unroute(historyRoutePattern, this.historyRouteHandler)
-      this.historyRouteHandler = null
-    }
-  }
-
-  private async ensureRoutesRegistered(): Promise<void> {
-    if (!this.listRouteHandler) {
-      this.listRouteHandler = async (route: Route) => {
-        const url = new URL(route.request().url())
-        const statuses = url.searchParams
-          .get('status')
-          ?.split(',')
-          .map((status) => status.trim())
-          .filter(Boolean)
-
-        let filteredJobs = Array.from(
-          this.jobsById.values(),
-          ({ listItem }) => listItem
-        )
-
-        if (statuses?.length) {
-          filteredJobs = filteredJobs.filter((job) =>
-            statuses.includes(job.status)
-          )
-        }
-
-        const offset = parsePositiveIntegerParam(url, 'offset') ?? 0
-        const limit = parsePositiveIntegerParam(url, 'limit')
-        const total = filteredJobs.length
-        const visibleJobs =
-          limit === undefined
-            ? filteredJobs.slice(offset)
-            : filteredJobs.slice(offset, offset + limit)
-
-        const response = {
-          jobs: visibleJobs,
-          pagination: {
-            offset,
-            limit: limit ?? null,
-            total,
-            has_more: offset + visibleJobs.length < total
-          }
-        } satisfies JobsListMockResponse
-
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify(response)
-        })
-      }
-
-      await this.page.route(jobsListRoutePattern, this.listRouteHandler)
-    }
-
-    if (!this.detailRouteHandler) {
-      this.detailRouteHandler = async (route: Route) => {
-        const jobId = getJobIdFromRequest(route)
-        const job = jobId ? this.jobsById.get(jobId) : undefined
-
-        if (!job) {
-          await route.fulfill({
-            status: 404,
-            contentType: 'application/json',
-            body: JSON.stringify({ error: 'Job not found' })
-          })
-          return
-        }
-
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify(job.detail)
-        })
-      }
-
-      await this.page.route(jobDetailRoutePattern, this.detailRouteHandler)
-    }
-
-    if (!this.historyRouteHandler) {
-      this.historyRouteHandler = async (route: Route) => {
-        const request = route.request()
-        if (request.method() !== 'POST') {
-          await route.continue()
-          return
-        }
-
-        const requestBody = request.postDataJSON() as
-          | { delete?: string[]; clear?: boolean }
-          | undefined
-
-        if (requestBody?.clear) {
-          this.jobsById = new Map(
-            Array.from(this.jobsById).filter(([, job]) => {
-              const status = job.listItem.status
-
-              return status === 'pending' || status === 'in_progress'
-            })
-          )
-        }
-
-        if (requestBody?.delete?.length) {
-          for (const jobId of requestBody.delete) {
-            this.jobsById.delete(jobId)
-          }
-        }
-
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify({})
-        })
-      }
-
-      await this.page.route(historyRoutePattern, this.historyRouteHandler)
-    }
-  }
-}

browser_tests/fixtures/helpers/KeyboardHelper.ts

@@ -1,21 +1,13 @@
 import type { Locator, Page } from '@playwright/test'
 
-import { nextFrame } from '@e2e/fixtures/utils/timing'
-
 export class KeyboardHelper {
   constructor(
     private readonly page: Page,
     private readonly canvas: Locator
   ) {}
 
-  async press(key: string, locator?: Locator | null): Promise<void> {
-    const target = locator ?? this.canvas
-    await target.press(key)
-    await nextFrame(this.page)
-  }
-
-  async delete(locator?: Locator | null): Promise<void> {
-    await this.press('Delete', locator)
+  private async nextFrame(): Promise<void> {
+    await this.page.evaluate(() => new Promise<number>(requestAnimationFrame))
   }
 
   async ctrlSend(
@@ -24,7 +16,7 @@ export class KeyboardHelper {
   ): Promise<void> {
     const target = locator ?? this.page.keyboard
     await target.press(`Control+${keyToPress}`)
-    await nextFrame(this.page)
+    await this.nextFrame()
   }
 
   async selectAll(locator?: Locator | null): Promise<void> {

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -140,11 +140,13 @@ export class NodeOperationsHelper {
       { x: bottomRight.x - 2, y: bottomRight.y - 1 },
       target
     )
+    await this.comfyPage.nextFrame()
     if (revertAfter) {
       await this.comfyPage.canvasOps.dragAndDrop(
         { x: target.x - 2, y: target.y - 1 },
         bottomRight
       )
+      await this.comfyPage.nextFrame()
     }
   }
 
@@ -156,6 +158,7 @@ export class NodeOperationsHelper {
     }
     await node.clickContextMenuOption('Convert to Group Node')
     await this.fillPromptDialog(groupNodeName)
+    await this.comfyPage.nextFrame()
   }
 
   async fillPromptDialog(value: string): Promise<void> {
@@ -189,6 +192,7 @@ export class NodeOperationsHelper {
         y: 300
       }
     )
+    await this.comfyPage.nextFrame()
   }
 
   async adjustEmptyLatentWidth(): Promise<void> {

browser_tests/fixtures/helpers/SettingsHelper.ts

@@ -1,7 +1,5 @@
 import type { Page } from '@playwright/test'
 
-import { nextFrame } from '@e2e/fixtures/utils/timing'
-
 export class SettingsHelper {
   constructor(private readonly page: Page) {}
 
@@ -12,7 +10,6 @@ export class SettingsHelper {
       },
       { id: settingId, value: settingValue }
     )
-    await nextFrame(this.page)
   }
 
   async getSetting<T = unknown>(settingId: string): Promise<T> {

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -465,7 +465,11 @@ export class SubgraphHelper {
     const serialized = await this.page.evaluate(() =>
       window.app!.graph!.serialize()
     )
-    await this.comfyPage.workflow.loadGraphData(serialized as ComfyWorkflowJSON)
+    await this.page.evaluate(
+      (workflow: ComfyWorkflowJSON) => window.app!.loadGraphData(workflow),
+      serialized as ComfyWorkflowJSON
+    )
+    await this.comfyPage.nextFrame()
   }
 
   async convertDefaultKSamplerToSubgraph(): Promise<NodeReference> {
@@ -473,12 +477,14 @@ export class SubgraphHelper {
     const ksampler = await this.comfyPage.nodeOps.getNodeRefById('3')
     await ksampler.click('title')
     const subgraphNode = await ksampler.convertToSubgraph()
+    await this.comfyPage.nextFrame()
     return subgraphNode
   }
 
   async packAllInteriorNodes(hostNodeId: string): Promise<void> {
     await this.comfyPage.vueNodes.enterSubgraph(hostNodeId)
     await this.comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+    await this.comfyPage.nextFrame()
     await this.comfyPage.canvas.dispatchEvent('pointerdown', {
       bubbles: true,
       cancelable: true,

browser_tests/fixtures/helpers/WorkflowHelper.ts

@@ -70,19 +70,10 @@ export class WorkflowHelper {
     )
   }
 
-  async loadGraphData(workflow: ComfyWorkflowJSON): Promise<void> {
-    await this.comfyPage.page.evaluate(
-      (wf) => window.app!.loadGraphData(wf),
-      workflow
-    )
-    await this.comfyPage.nextFrame()
-  }
-
   async loadWorkflow(workflowName: string) {
     await this.comfyPage.workflowUploadInput.setInputFiles(
       assetPath(`${workflowName}.json`)
     )
-    await this.waitForWorkflowIdle()
     await this.comfyPage.nextFrame()
     if (test.info().tags.includes('@vue-nodes')) {
       await this.comfyPage.vueNodes.waitForNodes()

browser_tests/fixtures/helpers/assetScenarioTypes.ts

@@ -1,32 +0,0 @@
-import type { JobDetailResponse, JobEntry } from '@comfyorg/ingest-types'
-
-import type { ResultItemType } from '@/schemas/apiSchema'
-
-export type ImportedAssetFixture = {
-  name: string
-  filePath?: string
-  contentType?: string
-}
-
-export type GeneratedOutputFixture = {
-  filename: string
-  displayName?: string
-  filePath?: string
-  contentType?: string
-  mediaType?: 'images' | 'video' | 'audio'
-  subfolder?: string
-  type?: ResultItemType
-}
-
-export type GeneratedJobFixture = {
-  jobId: string
-  status?: JobEntry['status']
-  outputs: [GeneratedOutputFixture, ...GeneratedOutputFixture[]]
-  createdAt?: string
-  createTime?: number
-  executionStartTime?: number
-  executionEndTime?: number
-  workflowId?: string
-  workflow?: JobDetailResponse['workflow']
-  nodeId?: string
-}

browser_tests/fixtures/helpers/buildMockJobOutputs.ts

@@ -1,34 +0,0 @@
-import type { JobDetailResponse } from '@comfyorg/ingest-types'
-
-import type { TaskOutput } from '@/schemas/apiSchema'
-
-import type {
-  GeneratedJobFixture,
-  GeneratedOutputFixture
-} from '@e2e/fixtures/helpers/assetScenarioTypes'
-
-export function buildMockJobOutputs(
-  job: GeneratedJobFixture,
-  outputs: GeneratedOutputFixture[]
-): NonNullable<JobDetailResponse['outputs']> {
-  const nodeId = job.nodeId ?? '5'
-  const nodeOutputs: Pick<TaskOutput[string], 'audio' | 'images' | 'video'> = {}
-
-  for (const output of outputs) {
-    const mediaType = output.mediaType ?? 'images'
-
-    nodeOutputs[mediaType] = [
-      ...(nodeOutputs[mediaType] ?? []),
-      {
-        filename: output.filename,
-        subfolder: output.subfolder ?? '',
-        type: output.type ?? 'output',
-        display_name: output.displayName
-      }
-    ]
-  }
-
-  const taskOutput = { [nodeId]: nodeOutputs } satisfies TaskOutput
-
-  return taskOutput
-}

browser_tests/fixtures/helpers/jobFixtures.ts

@@ -1,76 +0,0 @@
-import type { JobDetailResponse, JobEntry } from '@comfyorg/ingest-types'
-
-import type { MockJobRecord } from '@e2e/fixtures/helpers/JobsApiMock'
-
-export function createMockJob(
-  overrides: Partial<JobEntry> & { id: string }
-): JobEntry {
-  const now = Date.now()
-
-  return {
-    status: 'completed',
-    create_time: now,
-    execution_start_time: now,
-    execution_end_time: now + 5_000,
-    preview_output: {
-      filename: `output_${overrides.id}.png`,
-      subfolder: '',
-      type: 'output',
-      nodeId: '1',
-      mediaType: 'images'
-    },
-    outputs_count: 1,
-    ...overrides
-  }
-}
-
-export function createMockJobs(
-  count: number,
-  baseOverrides?: Partial<JobEntry>
-): JobEntry[] {
-  const now = Date.now()
-
-  return Array.from({ length: count }, (_, index) =>
-    createMockJob({
-      id: `job-${String(index + 1).padStart(3, '0')}`,
-      create_time: now - index * 60_000,
-      execution_start_time: now - index * 60_000,
-      execution_end_time: now - index * 60_000 + (5 + index) * 1_000,
-      preview_output: {
-        filename: `image_${String(index + 1).padStart(3, '0')}.png`,
-        subfolder: '',
-        type: 'output',
-        nodeId: '1',
-        mediaType: 'images'
-      },
-      ...baseOverrides
-    })
-  )
-}
-
-function isTerminalStatus(status: JobEntry['status']) {
-  return status === 'completed' || status === 'failed' || status === 'cancelled'
-}
-
-function createMockJobRecord(listItem: JobEntry): MockJobRecord {
-  const updateTime =
-    listItem.execution_end_time ??
-    listItem.execution_start_time ??
-    listItem.create_time
-  const detail: JobDetailResponse = {
-    ...listItem,
-    update_time: updateTime,
-    ...(isTerminalStatus(listItem.status) ? { outputs: {} } : {})
-  }
-
-  return {
-    listItem,
-    detail
-  }
-}
-
-export function createMockJobRecords(
-  listItems: readonly JobEntry[]
-): MockJobRecord[] {
-  return listItems.map(createMockJobRecord)
-}

browser_tests/fixtures/helpers/mockAssetFiles.ts

@@ -1,140 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import path from 'node:path'
-
-import type {
-  GeneratedJobFixture,
-  GeneratedOutputFixture,
-  ImportedAssetFixture
-} from '@e2e/fixtures/helpers/assetScenarioTypes'
-import { getMimeType } from '@e2e/fixtures/helpers/mimeTypeUtil'
-
-const helperDir = path.dirname(fileURLToPath(import.meta.url))
-
-export type MockAssetFile = {
-  filePath?: string
-  contentType?: string
-  textContent?: string
-}
-
-export type MockFileLocation = {
-  filename: string
-  type: string
-  subfolder: string
-}
-
-function getFixturePath(relativePath: string): string {
-  return path.resolve(helperDir, '../../assets', relativePath)
-}
-
-export function buildFileRequestKey({
-  filename,
-  type,
-  subfolder
-}: MockFileLocation): string {
-  return new URLSearchParams({
-    filename,
-    type,
-    subfolder
-  }).toString()
-}
-
-export function defaultFileFor(filename: string): MockAssetFile {
-  const normalized = filename.toLowerCase()
-
-  if (normalized.endsWith('.png')) {
-    return {
-      filePath: getFixturePath('workflowInMedia/workflow_itxt.png'),
-      contentType: 'image/png'
-    }
-  }
-
-  if (normalized.endsWith('.webp')) {
-    return {
-      filePath: getFixturePath('example.webp'),
-      contentType: 'image/webp'
-    }
-  }
-
-  if (normalized.endsWith('.webm')) {
-    return {
-      filePath: getFixturePath('workflowInMedia/workflow.webm'),
-      contentType: 'video/webm'
-    }
-  }
-
-  if (normalized.endsWith('.mp4')) {
-    return {
-      filePath: getFixturePath('workflowInMedia/workflow.mp4'),
-      contentType: 'video/mp4'
-    }
-  }
-
-  if (normalized.endsWith('.glb')) {
-    return {
-      filePath: getFixturePath('workflowInMedia/workflow.glb'),
-      contentType: 'model/gltf-binary'
-    }
-  }
-
-  if (normalized.endsWith('.json')) {
-    return {
-      textContent: JSON.stringify({ mocked: true }, null, 2),
-      contentType: 'application/json'
-    }
-  }
-
-  return {
-    textContent: 'mocked asset content',
-    contentType: getMimeType(filename)
-  }
-}
-
-function outputLocation(output: GeneratedOutputFixture): MockFileLocation {
-  return {
-    filename: output.filename,
-    type: output.type ?? 'output',
-    subfolder: output.subfolder ?? ''
-  }
-}
-
-function importedAssetLocation(asset: ImportedAssetFixture): MockFileLocation {
-  return {
-    filename: asset.name,
-    type: 'input',
-    subfolder: ''
-  }
-}
-
-export function buildMockAssetFiles({
-  generated,
-  imported
-}: {
-  generated: readonly GeneratedJobFixture[]
-  imported: readonly ImportedAssetFixture[]
-}): Map<string, MockAssetFile> {
-  const mockFiles = new Map<string, MockAssetFile>()
-
-  for (const job of generated) {
-    for (const output of job.outputs) {
-      const fallback = defaultFileFor(output.filename)
-
-      mockFiles.set(buildFileRequestKey(outputLocation(output)), {
-        filePath: output.filePath ?? fallback.filePath,
-        contentType: output.contentType ?? fallback.contentType,
-        textContent: fallback.textContent
-      })
-    }
-  }
-
-  for (const asset of imported) {
-    const fallback = defaultFileFor(asset.name)
-
-    mockFiles.set(buildFileRequestKey(importedAssetLocation(asset)), {
-      filePath: asset.filePath ?? fallback.filePath,
-      contentType: asset.contentType ?? fallback.contentType,
-      textContent: fallback.textContent
-    })
-  }
-
-  return mockFiles
-}

browser_tests/fixtures/jobsApiMockFixture.ts

@@ -1,15 +0,0 @@
-import { test as base } from '@playwright/test'
-
-import { JobsApiMock } from '@e2e/fixtures/helpers/JobsApiMock'
-
-export const jobsApiMockFixture = base.extend<{
-  jobsApi: JobsApiMock
-}>({
-  jobsApi: async ({ page }, use) => {
-    const jobsApi = new JobsApiMock(page)
-
-    await use(jobsApi)
-
-    await jobsApi.clear()
-  }
-})

browser_tests/fixtures/selectors.ts

@@ -198,16 +198,6 @@ export const TestIds = {
   },
   load3dViewer: {
     sidebar: 'load3d-viewer-sidebar'
-  },
-  imageCompare: {
-    viewport: 'image-compare-viewport',
-    empty: 'image-compare-empty',
-    batchNav: 'batch-nav',
-    beforeBatch: 'before-batch',
-    afterBatch: 'after-batch',
-    batchCounter: 'batch-counter',
-    batchNext: 'batch-next',
-    batchPrev: 'batch-prev'
   }
 } as const
 
@@ -241,4 +231,3 @@ export type TestIdValue =
   | (typeof TestIds.errors)[keyof typeof TestIds.errors]
   | (typeof TestIds.loading)[keyof typeof TestIds.loading]
   | (typeof TestIds.load3dViewer)[keyof typeof TestIds.load3dViewer]
-  | (typeof TestIds.imageCompare)[keyof typeof TestIds.imageCompare]

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -388,6 +388,7 @@ export class NodeReference {
   async copy() {
     await this.click('title')
     await this.comfyPage.clipboard.copy()
+    await this.comfyPage.nextFrame()
   }
   async delete(): Promise<void> {
     await this.click('title')
@@ -433,6 +434,7 @@ export class NodeReference {
   async convertToGroupNode(groupNodeName: string = 'GroupNode') {
     await this.clickContextMenuOption('Convert to Group Node')
     await this.comfyPage.nodeOps.fillPromptDialog(groupNodeName)
+    await this.comfyPage.nextFrame()
     const nodes = await this.comfyPage.nodeOps.getNodeRefsByType(
       `workflow>${groupNodeName}`
     )

browser_tests/fixtures/utils/timing.ts

@@ -1,9 +1,3 @@
-import type { Page } from '@playwright/test'
-
 export function sleep(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
-
-export function nextFrame(page: Page): Promise<number> {
-  return page.evaluate(() => new Promise<number>(requestAnimationFrame))
-}

browser_tests/tests/assetHelper.spec.ts

@@ -1,7 +1,6 @@
-import { expect, mergeTests } from '@playwright/test'
+import { expect } from '@playwright/test'
 
-import { assetApiFixture } from '@e2e/fixtures/assetApiFixture'
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import {
   createAssetHelper,
   withModels,
@@ -18,8 +17,6 @@ import {
   STABLE_OUTPUT
 } from '@e2e/fixtures/data/assetFixtures'
 
-const test = mergeTests(comfyPageFixture, assetApiFixture)
-
 test.describe('AssetHelper', () => {
   test.describe('operators and configuration', () => {
     test('creates helper with models via withModels operator', async ({
@@ -69,7 +66,8 @@ test.describe('AssetHelper', () => {
   })
 
   test.describe('mock API routes', () => {
-    test('GET /assets returns all assets', async ({ comfyPage, assetApi }) => {
+    test('GET /assets returns all assets', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
       assetApi.configure(
         withAsset(STABLE_CHECKPOINT),
         withAsset(STABLE_INPUT_IMAGE)
@@ -89,12 +87,12 @@ test.describe('AssetHelper', () => {
       expect(data.assets).toHaveLength(2)
       expect(data.total).toBe(2)
       expect(data.has_more).toBe(false)
+
+      await assetApi.clearMocks()
     })
 
-    test('GET /assets respects pagination params', async ({
-      comfyPage,
-      assetApi
-    }) => {
+    test('GET /assets respects pagination params', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
       assetApi.configure(
         withModels(5),
         withPagination({ total: 10, hasMore: true })
@@ -112,12 +110,12 @@ test.describe('AssetHelper', () => {
       expect(data.assets).toHaveLength(2)
       expect(data.total).toBe(10)
       expect(data.has_more).toBe(true)
+
+      await assetApi.clearMocks()
     })
 
-    test('GET /assets filters by include_tags', async ({
-      comfyPage,
-      assetApi
-    }) => {
+    test('GET /assets filters by include_tags', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
       assetApi.configure(
         withAsset(STABLE_CHECKPOINT),
         withAsset(STABLE_LORA),
@@ -131,12 +129,14 @@ test.describe('AssetHelper', () => {
       const data = body as { assets: Array<{ id: string }> }
       expect(data.assets).toHaveLength(1)
       expect(data.assets[0].id).toBe(STABLE_CHECKPOINT.id)
+
+      await assetApi.clearMocks()
     })
 
     test('GET /assets/:id returns single asset or 404', async ({
-      comfyPage,
-      assetApi
+      comfyPage
     }) => {
+      const { assetApi } = comfyPage
       assetApi.configure(withAsset(STABLE_CHECKPOINT))
       await assetApi.mock()
 
@@ -151,12 +151,12 @@ test.describe('AssetHelper', () => {
         `${comfyPage.url}/api/assets/nonexistent-id`
       )
       expect(notFound.status).toBe(404)
+
+      await assetApi.clearMocks()
     })
 
-    test('PUT /assets/:id updates asset in store', async ({
-      comfyPage,
-      assetApi
-    }) => {
+    test('PUT /assets/:id updates asset in store', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
       assetApi.configure(withAsset(STABLE_CHECKPOINT))
       await assetApi.mock()
 
@@ -175,12 +175,14 @@ test.describe('AssetHelper', () => {
       expect(assetApi.getAsset(STABLE_CHECKPOINT.id)?.name).toBe(
         'renamed.safetensors'
       )
+
+      await assetApi.clearMocks()
     })
 
     test('DELETE /assets/:id removes asset from store', async ({
-      comfyPage,
-      assetApi
+      comfyPage
     }) => {
+      const { assetApi } = comfyPage
       assetApi.configure(withAsset(STABLE_CHECKPOINT), withAsset(STABLE_LORA))
       await assetApi.mock()
 
@@ -191,12 +193,11 @@ test.describe('AssetHelper', () => {
       expect(status).toBe(204)
       expect(assetApi.assetCount).toBe(1)
       expect(assetApi.getAsset(STABLE_CHECKPOINT.id)).toBeUndefined()
+
+      await assetApi.clearMocks()
     })
 
-    test('POST /assets returns upload response', async ({
-      comfyPage,
-      assetApi
-    }) => {
+    test('POST /assets returns upload response', async ({ comfyPage }) => {
       const customUpload = {
         id: 'custom-upload-001',
         name: 'custom.safetensors',
@@ -204,6 +205,7 @@ test.describe('AssetHelper', () => {
         created_at: '2025-01-01T00:00:00Z',
         created_new: true
       }
+      const { assetApi } = comfyPage
       assetApi.configure(withUploadResponse(customUpload))
       await assetApi.mock()
 
@@ -215,12 +217,14 @@ test.describe('AssetHelper', () => {
       const data = body as { id: string; name: string }
       expect(data.id).toBe('custom-upload-001')
       expect(data.name).toBe('custom.safetensors')
+
+      await assetApi.clearMocks()
     })
 
     test('POST /assets/download returns async download response', async ({
-      comfyPage,
-      assetApi
+      comfyPage
     }) => {
+      const { assetApi } = comfyPage
       await assetApi.mock()
 
       const { status, body } = await assetApi.fetch(
@@ -231,14 +235,14 @@ test.describe('AssetHelper', () => {
       const data = body as { task_id: string; status: string }
       expect(data.task_id).toBe('download-task-001')
       expect(data.status).toBe('created')
+
+      await assetApi.clearMocks()
     })
   })
 
   test.describe('mutation tracking', () => {
-    test('tracks POST, PUT, DELETE mutations', async ({
-      comfyPage,
-      assetApi
-    }) => {
+    test('tracks POST, PUT, DELETE mutations', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
       assetApi.configure(withAsset(STABLE_CHECKPOINT))
       await assetApi.mock()
 
@@ -261,12 +265,12 @@ test.describe('AssetHelper', () => {
       expect(mutations[0].method).toBe('POST')
       expect(mutations[1].method).toBe('PUT')
       expect(mutations[2].method).toBe('DELETE')
+
+      await assetApi.clearMocks()
     })
 
-    test('GET requests are not tracked as mutations', async ({
-      comfyPage,
-      assetApi
-    }) => {
+    test('GET requests are not tracked as mutations', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
       assetApi.configure(withAsset(STABLE_CHECKPOINT))
       await assetApi.mock()
 
@@ -276,14 +280,14 @@ test.describe('AssetHelper', () => {
       )
 
       expect(assetApi.getMutations()).toHaveLength(0)
+
+      await assetApi.clearMocks()
     })
   })
 
   test.describe('mockError', () => {
-    test('returns error status for all asset routes', async ({
-      comfyPage,
-      assetApi
-    }) => {
+    test('returns error status for all asset routes', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
       await assetApi.mockError(503, 'Service Unavailable')
 
       const { status, body } = await assetApi.fetch(
@@ -292,14 +296,16 @@ test.describe('AssetHelper', () => {
       expect(status).toBe(503)
       const data = body as { error: string }
       expect(data.error).toBe('Service Unavailable')
+
+      await assetApi.clearMocks()
     })
   })
 
   test.describe('clearMocks', () => {
     test('resets store, mutations, and unroutes handlers', async ({
-      comfyPage,
-      assetApi
+      comfyPage
     }) => {
+      const { assetApi } = comfyPage
       assetApi.configure(withAsset(STABLE_CHECKPOINT))
       await assetApi.mock()
 

browser_tests/tests/builderReorder.spec.ts

@@ -157,10 +157,7 @@ test.describe('Builder input reordering', { tag: '@ui' }, () => {
 
   test('Reordering inputs in one app does not corrupt another app', async ({
     comfyPage
-  }, testInfo) => {
-    // This test creates 2 apps, switches tabs 3 times, and enters builder 3
-    // times — the default 15s timeout is insufficient in CI.
-    testInfo.setTimeout(45_000)
+  }) => {
     const { appMode } = comfyPage
     const app2Widgets = ['seed', 'steps']
     const app1Reordered = ['steps', 'cfg', 'seed']

browser_tests/tests/builderSaveFlow.spec.ts

@@ -110,7 +110,8 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
 
     await expect(comfyPage.appMode.steps.toolbar).toBeVisible()
 
-    await comfyPage.keyboard.press('Escape')
+    await comfyPage.page.keyboard.press('Escape')
+    await comfyPage.nextFrame()
 
     await expect(comfyPage.appMode.steps.toolbar).toBeHidden()
   })

browser_tests/tests/canvasModeSelector.spec.ts

@@ -29,6 +29,7 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
     await comfyPage.command.executeCommand('Comfy.Canvas.Unlock')
+    await comfyPage.nextFrame()
   })
 
   test.describe('Trigger button', () => {
@@ -45,6 +46,7 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
         comfyPage
       }) => {
         await comfyPage.command.executeCommand(mode.activateCommand)
+        await comfyPage.nextFrame()
         const { trigger } = getLocators(comfyPage.page)
         const modeIcon = trigger.locator('i[aria-hidden="true"]').first()
         await expect(modeIcon).toHaveClass(mode.iconPattern)
@@ -101,6 +103,7 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
       }) => {
         if (!mode.isReadOnly) {
           await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+          await comfyPage.nextFrame()
         }
         const { trigger, menu, selectItem, handItem } = getLocators(
           comfyPage.page
@@ -153,6 +156,7 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
         comfyPage
       }) => {
         await comfyPage.command.executeCommand(mode.activateCommand)
+        await comfyPage.nextFrame()
         const { trigger, menu, selectItem, handItem } = getLocators(
           comfyPage.page
         )
@@ -204,6 +208,7 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
         comfyPage
       }) => {
         await comfyPage.command.executeCommand(mode.activateCommand)
+        await comfyPage.nextFrame()
         const { trigger, menu, selectItem, handItem } = getLocators(
           comfyPage.page
         )
@@ -224,7 +229,8 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
         await comfyPage.canvasOps.isReadOnly(),
         'Precondition: canvas starts unlocked'
       ).toBe(false)
-      await comfyPage.keyboard.press('KeyH')
+      await comfyPage.canvas.press('KeyH')
+      await comfyPage.nextFrame()
       expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
       const { trigger } = getLocators(comfyPage.page)
       const modeIcon = trigger.locator('i[aria-hidden="true"]').first()
@@ -235,11 +241,13 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
       comfyPage
     }) => {
       await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+      await comfyPage.nextFrame()
       expect(
         await comfyPage.canvasOps.isReadOnly(),
         'Precondition: canvas starts locked'
       ).toBe(true)
-      await comfyPage.keyboard.press('KeyV')
+      await comfyPage.canvas.press('KeyV')
+      await comfyPage.nextFrame()
       expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
       const { trigger } = getLocators(comfyPage.page)
       const modeIcon = trigger.locator('i[aria-hidden="true"]').first()

browser_tests/tests/changeTracker.spec.ts

@@ -223,7 +223,8 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
       await beforeChange(comfyPage)
       await comfyPage.keyboard.bypass()
       await expect(node).toBeBypassed()
-      await comfyPage.keyboard.press('KeyP')
+      await comfyPage.page.keyboard.press('KeyP')
+      await comfyPage.nextFrame()
       await expect(node).toBePinned()
       await afterChange(comfyPage)
     }

browser_tests/tests/cloud-asset-default.spec.ts

@@ -74,23 +74,18 @@ test.describe('Asset-supported node default value', { tag: '@cloud' }, () => {
       return node!.id
     })
 
-    // Wait for the asset widget to mount AND its value to resolve.
-    // The widget type becomes 'asset' before the value is populated,
-    // so poll for both conditions together to avoid a race where the
-    // type check passes but the value is still the placeholder.
     await expect
       .poll(
-        () =>
-          comfyPage.page.evaluate((id) => {
+        async () => {
+          return await comfyPage.page.evaluate((id) => {
             const node = window.app!.graph.getNodeById(id)
             const widget = node?.widgets?.find(
               (w: { name: string }) => w.name === 'ckpt_name'
             )
-            if (widget?.type !== 'asset') return 'waiting:type'
-            const val = String(widget?.value ?? '')
-            return val === 'Select model' ? 'waiting:value' : val
-          }, nodeId),
-        { timeout: 15_000 }
+            return String(widget?.value ?? '')
+          }, nodeId)
+        },
+        { timeout: 10_000 }
       )
       .toBe(CLOUD_ASSETS[0].name)
   })

browser_tests/tests/colorPalette.spec.ts

@@ -157,15 +157,18 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
 
     await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
     await comfyPage.settings.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark-all-colors.png'
     )
     await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light_red')
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-light-red.png'
     )
 
     await comfyPage.settings.setSetting('Comfy.ColorPalette', 'dark')
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
   })
 
@@ -178,6 +181,7 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
     await expect(comfyPage.toast.toastErrors).toHaveCount(0)
 
     await comfyPage.settings.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
@@ -186,6 +190,7 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
       'Comfy.ColorPalette',
       'custom_obsidian_dark'
     )
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
@@ -207,12 +212,15 @@ test.describe(
 
       // Drag mouse to force canvas to redraw
       await comfyPage.page.mouse.move(0, 0)
-      await comfyPage.expectScreenshot(comfyPage.canvas, 'node-opacity-0.5.png')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-0.5.png')
 
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 1.0)
 
       await comfyPage.page.mouse.move(8, 8)
-      await comfyPage.expectScreenshot(comfyPage.canvas, 'node-opacity-1.png')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-1.png')
     })
 
     test('should persist color adjustments when changing themes', async ({
@@ -221,8 +229,8 @@ test.describe(
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.2)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'arc')
       await comfyPage.page.mouse.move(0, 0)
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'node-opacity-0.2-arc-theme.png'
       )
     })
@@ -232,6 +240,7 @@ test.describe(
     }) => {
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.5)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
+      await comfyPage.nextFrame()
       await expect
         .poll(() =>
           comfyPage.page.evaluate(() => {
@@ -270,6 +279,7 @@ test.describe(
       comfyPage
     }) => {
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
+      await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
         'node-lightened-colors.png'
       )

browser_tests/tests/copyPaste.spec.ts

@@ -155,6 +155,7 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
       const loadImageNodes =
         await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
       await loadImageNodes[0].click('title')
+      await comfyPage.nextFrame()
 
       const uploadPromise = comfyPage.page.waitForResponse(
         (resp) => resp.url().includes('/upload/') && resp.status() === 200,

browser_tests/tests/defaultKeybindings.spec.ts

@@ -52,7 +52,8 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'Alt+=' zooms in", async ({ comfyPage }) => {
       const initialScale = await comfyPage.canvasOps.getScale()
 
-      await comfyPage.keyboard.press('Alt+Equal')
+      await comfyPage.canvas.press('Alt+Equal')
+      await comfyPage.nextFrame()
 
       await expect
         .poll(() => comfyPage.canvasOps.getScale())
@@ -62,7 +63,8 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'Alt+-' zooms out", async ({ comfyPage }) => {
       const initialScale = await comfyPage.canvasOps.getScale()
 
-      await comfyPage.keyboard.press('Alt+Minus')
+      await comfyPage.canvas.press('Alt+Minus')
+      await comfyPage.nextFrame()
 
       await expect
         .poll(() => comfyPage.canvasOps.getScale())
@@ -80,7 +82,8 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
       await comfyPage.nextFrame()
 
-      await comfyPage.keyboard.press('Period')
+      await comfyPage.canvas.press('Period')
+      await comfyPage.nextFrame()
 
       await expect
         .poll(() => comfyPage.canvasOps.getScale())
@@ -90,7 +93,8 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'h' locks canvas", async ({ comfyPage }) => {
       await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(false)
 
-      await comfyPage.keyboard.press('KeyH')
+      await comfyPage.canvas.press('KeyH')
+      await comfyPage.nextFrame()
 
       await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(true)
     })
@@ -98,9 +102,11 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'v' unlocks canvas", async ({ comfyPage }) => {
       // Lock first
       await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+      await comfyPage.nextFrame()
       await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(true)
 
-      await comfyPage.keyboard.press('KeyV')
+      await comfyPage.canvas.press('KeyV')
+      await comfyPage.nextFrame()
 
       await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(false)
     })
@@ -115,13 +121,16 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       const node = nodes[0]
 
       await node.click('title')
+      await comfyPage.nextFrame()
 
       await expect.poll(() => node.isCollapsed()).toBe(false)
 
-      await comfyPage.keyboard.press('Alt+KeyC')
+      await comfyPage.canvas.press('Alt+KeyC')
+      await comfyPage.nextFrame()
       await expect.poll(() => node.isCollapsed()).toBe(true)
 
-      await comfyPage.keyboard.press('Alt+KeyC')
+      await comfyPage.canvas.press('Alt+KeyC')
+      await comfyPage.nextFrame()
       await expect.poll(() => node.isCollapsed()).toBe(false)
     })
 
@@ -131,6 +140,7 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       const node = nodes[0]
 
       await node.click('title')
+      await comfyPage.nextFrame()
 
       // Normal mode is ALWAYS (0)
       const getMode = () =>
@@ -140,11 +150,13 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
 
       await expect.poll(() => getMode()).toBe(0)
 
-      await comfyPage.keyboard.press('Control+KeyM')
+      await comfyPage.canvas.press('Control+KeyM')
+      await comfyPage.nextFrame()
       // NEVER (2) = muted
       await expect.poll(() => getMode()).toBe(2)
 
-      await comfyPage.keyboard.press('Control+KeyM')
+      await comfyPage.canvas.press('Control+KeyM')
+      await comfyPage.nextFrame()
       await expect.poll(() => getMode()).toBe(0)
     })
   })
@@ -227,14 +239,16 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'Ctrl+s' triggers save workflow", async ({ comfyPage }) => {
       // On a new unsaved workflow, Ctrl+s triggers Save As dialog.
       // The dialog appearing proves the keybinding was intercepted by the app.
-      await comfyPage.keyboard.press('Control+s')
+      await comfyPage.page.keyboard.press('Control+s')
+      await comfyPage.nextFrame()
 
       // The Save As dialog should appear (p-dialog overlay)
       const dialogOverlay = comfyPage.page.locator('.p-dialog-mask')
       await expect(dialogOverlay).toBeVisible()
 
       // Dismiss the dialog
-      await comfyPage.keyboard.press('Escape')
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
     })
 
     test("'Ctrl+o' triggers open workflow", async ({ comfyPage }) => {
@@ -251,7 +265,8 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
         }
       })
 
-      await comfyPage.keyboard.press('Control+o')
+      await comfyPage.page.keyboard.press('Control+o')
+      await comfyPage.nextFrame()
 
       await expect
         .poll(() => comfyPage.page.evaluate(() => window.TestCommand))
@@ -273,9 +288,11 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
       // Select all nodes
-      await comfyPage.keyboard.press('Control+a')
+      await comfyPage.canvas.press('Control+a')
+      await comfyPage.nextFrame()
 
-      await comfyPage.keyboard.press('Control+Shift+KeyE')
+      await comfyPage.page.keyboard.press('Control+Shift+KeyE')
+      await comfyPage.nextFrame()
 
       // After conversion, node count should decrease
       // (multiple nodes replaced by single subgraph node)

browser_tests/tests/dialogs/settingsDialog.spec.ts

@@ -145,27 +145,15 @@ test.describe('Settings dialog', { tag: '@ui' }, () => {
       const settingRow = dialog.root.locator(`[data-setting-id="${settingId}"]`)
       await expect(settingRow).toBeVisible()
 
-      // Wait for the search filter to fully settle — PrimeVue re-renders
-      // the entire settings list after typing, and the combobox element is
-      // replaced during re-render. Wait until the filtered list stabilises
-      // before interacting with the combobox.
-      const settingItems = dialog.root.locator('[data-setting-id]')
-      await expect
-        .poll(() => settingItems.count(), { timeout: 5000 })
-        .toBeLessThanOrEqual(5)
-
-      const select = settingRow.getByRole('combobox')
-      await expect(select).toBeVisible()
-      await expect(select).toBeEnabled()
-
       // Open the dropdown via its combobox role and verify it expanded.
-      // Retry because the PrimeVue Select may still re-render after the
-      // filter settles, causing the first click to land on a stale element.
+      // Retry because the PrimeVue Select may re-render during search
+      // filtering, causing the first click to land on a stale element.
+      const select = settingRow.getByRole('combobox')
       await expect(async () => {
         const expanded = await select.getAttribute('aria-expanded')
         if (expanded !== 'true') await select.click()
         await expect(select).toHaveAttribute('aria-expanded', 'true')
-      }).toPass({ timeout: 10_000 })
+      }).toPass({ timeout: 5000 })
 
       // Pick the option that is not the current value
       const targetValue = initialValue === 'Top' ? 'Disabled' : 'Top'

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -24,8 +24,8 @@ test.describe('Graph Canvas Menu', { tag: ['@screenshot', '@canvas'] }, () => {
         TestIds.canvas.toggleLinkVisibilityButton
       )
       await button.click()
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'canvas-with-hidden-links.png'
       )
       const hiddenLinkRenderMode = await comfyPage.page.evaluate(() => {
@@ -36,8 +36,8 @@ test.describe('Graph Canvas Menu', { tag: ['@screenshot', '@canvas'] }, () => {
         .toBe(hiddenLinkRenderMode)
 
       await button.click()
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'canvas-with-visible-links.png'
       )
       await expect

browser_tests/tests/groupNode.spec.ts

@@ -170,6 +170,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
     await comfyPage.workflow.loadWorkflow(
       'groupnodes/group_node_identical_nodes_hidden_inputs'
     )
+    await comfyPage.nextFrame()
 
     const groupNodeId = 19
     const groupNodeName = 'two_VAE_decode'
@@ -335,9 +336,12 @@ test.describe('Group Node', { tag: '@node' }, () => {
       )
 
       await test.step('Load workflow containing a group node pasted from a different workflow', async () => {
-        await comfyPage.workflow.loadGraphData(
-          currentGraphState as ComfyWorkflowJSON
+        await comfyPage.page.evaluate(
+          (workflow) =>
+            window.app!.loadGraphData(workflow as ComfyWorkflowJSON),
+          currentGraphState
         )
+        await comfyPage.nextFrame()
         await verifyNodeLoaded(comfyPage, 1)
       })
     })

browser_tests/tests/groupSelectChildren.spec.ts

@@ -60,6 +60,7 @@ test.describe('Group Select Children', { tag: ['@canvas', '@node'] }, () => {
       true
     )
     await comfyPage.workflow.loadWorkflow('groups/nested-groups-1-inner-node')
+    await comfyPage.nextFrame()
 
     const outerPos = await getGroupTitlePosition(comfyPage, 'Outer Group')
     await comfyPage.canvas.click({ position: outerPos })
@@ -83,6 +84,7 @@ test.describe('Group Select Children', { tag: ['@canvas', '@node'] }, () => {
       false
     )
     await comfyPage.workflow.loadWorkflow('groups/nested-groups-1-inner-node')
+    await comfyPage.nextFrame()
 
     const outerPos = await getGroupTitlePosition(comfyPage, 'Outer Group')
     await comfyPage.canvas.click({ position: outerPos })
@@ -105,6 +107,7 @@ test.describe('Group Select Children', { tag: ['@canvas', '@node'] }, () => {
       true
     )
     await comfyPage.workflow.loadWorkflow('groups/nested-groups-1-inner-node')
+    await comfyPage.nextFrame()
 
     // Select the outer group (cascades to children)
     const outerPos = await getGroupTitlePosition(comfyPage, 'Outer Group')

browser_tests/tests/imageCompare.spec.ts

@@ -3,7 +3,6 @@ import { expect } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -88,6 +87,10 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     })
   }
 
+  // ---------------------------------------------------------------------------
+  // Rendering
+  // ---------------------------------------------------------------------------
+
   test(
     'Shows empty state when no images are set',
     { tag: '@smoke' },
@@ -95,7 +98,7 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
       const node = comfyPage.vueNodes.getNodeLocator('1')
       await expect(node).toBeVisible()
 
-      await expect(node.getByTestId(TestIds.imageCompare.empty)).toBeVisible()
+      await expect(node.getByTestId('image-compare-empty')).toBeVisible()
       await expect(node.locator('img')).toHaveCount(0)
       await expect(node.getByRole('presentation')).toHaveCount(0)
     }
@@ -123,6 +126,10 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     }
   )
 
+  // ---------------------------------------------------------------------------
+  // Slider defaults
+  // ---------------------------------------------------------------------------
+
   test(
     'Slider defaults to 50% with both images set',
     { tag: ['@smoke', '@screenshot'] },
@@ -157,6 +164,10 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     }
   )
 
+  // ---------------------------------------------------------------------------
+  // Slider interaction
+  // ---------------------------------------------------------------------------
+
   test(
     'Mouse hover moves slider position',
     { tag: '@smoke' },
@@ -172,7 +183,7 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
       const handle = node.getByRole('presentation')
       const beforeImg = node.locator('img[alt="Before image"]')
       const afterImg = node.locator('img[alt="After image"]')
-      const viewport = node.getByTestId(TestIds.imageCompare.viewport)
+      const viewport = node.getByTestId('image-compare-viewport')
       await expect(afterImg).toBeVisible()
       await expect(viewport).toBeVisible()
 
@@ -213,7 +224,7 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     const node = comfyPage.vueNodes.getNodeLocator('1')
     const handle = node.getByRole('presentation')
     const afterImg = node.locator('img[alt="After image"]')
-    const viewport = node.getByTestId(TestIds.imageCompare.viewport)
+    const viewport = node.getByTestId('image-compare-viewport')
     await expect(afterImg).toBeVisible()
     await expect(viewport).toBeVisible()
 
@@ -250,7 +261,7 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
 
     const node = comfyPage.vueNodes.getNodeLocator('1')
     const handle = node.getByRole('presentation')
-    const compareArea = node.getByTestId(TestIds.imageCompare.viewport)
+    const compareArea = node.getByTestId('image-compare-viewport')
     await expect(compareArea).toBeVisible()
 
     await expect
@@ -281,6 +292,10 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
       .toBeCloseTo(100, 0)
   })
 
+  // ---------------------------------------------------------------------------
+  // Single image modes
+  // ---------------------------------------------------------------------------
+
   test('Only before image shows without slider when afterImages is empty', async ({
     comfyPage
   }) => {
@@ -309,6 +324,10 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     await expect(node.getByRole('presentation')).toBeHidden()
   })
 
+  // ---------------------------------------------------------------------------
+  // Batch navigation
+  // ---------------------------------------------------------------------------
+
   test(
     'Batch navigation appears when before side has multiple images',
     { tag: '@smoke' },
@@ -323,21 +342,13 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
       })
 
       const node = comfyPage.vueNodes.getNodeLocator('1')
-      const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
+      const beforeBatch = node.getByTestId('before-batch')
 
-      await expect(
-        node.getByTestId(TestIds.imageCompare.batchNav)
-      ).toBeVisible()
-      await expect(
-        beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
-      ).toHaveText('1 / 3')
+      await expect(node.getByTestId('batch-nav')).toBeVisible()
+      await expect(beforeBatch.getByTestId('batch-counter')).toHaveText('1 / 3')
       // after-batch renders only when afterBatchCount > 1
-      await expect(
-        node.getByTestId(TestIds.imageCompare.afterBatch)
-      ).toBeHidden()
-      await expect(
-        beforeBatch.getByTestId(TestIds.imageCompare.batchPrev)
-      ).toBeDisabled()
+      await expect(node.getByTestId('after-batch')).toBeHidden()
+      await expect(beforeBatch.getByTestId('batch-prev')).toBeDisabled()
     }
   )
 
@@ -351,7 +362,7 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     })
 
     const node = comfyPage.vueNodes.getNodeLocator('1')
-    await expect(node.getByTestId(TestIds.imageCompare.batchNav)).toBeHidden()
+    await expect(node.getByTestId('batch-nav')).toBeHidden()
   })
 
   test(
@@ -367,10 +378,10 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
       })
 
       const node = comfyPage.vueNodes.getNodeLocator('1')
-      const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
-      const counter = beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
-      const nextBtn = beforeBatch.getByTestId(TestIds.imageCompare.batchNext)
-      const prevBtn = beforeBatch.getByTestId(TestIds.imageCompare.batchPrev)
+      const beforeBatch = node.getByTestId('before-batch')
+      const counter = beforeBatch.getByTestId('batch-counter')
+      const nextBtn = beforeBatch.getByTestId('batch-next')
+      const prevBtn = beforeBatch.getByTestId('batch-prev')
 
       await nextBtn.click()
       await expect(counter).toHaveText('2 / 3')
@@ -396,10 +407,10 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     })
 
     const node = comfyPage.vueNodes.getNodeLocator('1')
-    const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
-    const counter = beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
-    const nextBtn = beforeBatch.getByTestId(TestIds.imageCompare.batchNext)
-    const prevBtn = beforeBatch.getByTestId(TestIds.imageCompare.batchPrev)
+    const beforeBatch = node.getByTestId('before-batch')
+    const counter = beforeBatch.getByTestId('batch-counter')
+    const nextBtn = beforeBatch.getByTestId('batch-next')
+    const prevBtn = beforeBatch.getByTestId('batch-prev')
 
     await nextBtn.click()
     await nextBtn.click()
@@ -425,18 +436,14 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     })
 
     const node = comfyPage.vueNodes.getNodeLocator('1')
-    const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
-    const afterBatch = node.getByTestId(TestIds.imageCompare.afterBatch)
+    const beforeBatch = node.getByTestId('before-batch')
+    const afterBatch = node.getByTestId('after-batch')
 
-    await beforeBatch.getByTestId(TestIds.imageCompare.batchNext).click()
-    await afterBatch.getByTestId(TestIds.imageCompare.batchNext).click()
+    await beforeBatch.getByTestId('batch-next').click()
+    await afterBatch.getByTestId('batch-next').click()
 
-    await expect(
-      beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
-    ).toHaveText('2 / 3')
-    await expect(
-      afterBatch.getByTestId(TestIds.imageCompare.batchCounter)
-    ).toHaveText('2 / 2')
+    await expect(beforeBatch.getByTestId('batch-counter')).toHaveText('2 / 3')
+    await expect(afterBatch.getByTestId('batch-counter')).toHaveText('2 / 2')
     await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
       'src',
       url2
@@ -447,9 +454,11 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     )
   })
 
+  // ---------------------------------------------------------------------------
+  // Node sizing
+  // ---------------------------------------------------------------------------
+
   test('ImageCompare node enforces minimum size', async ({ comfyPage }) => {
-    const minWidth = 400
-    const minHeight = 350
     const size = await comfyPage.page.evaluate(() => {
       const graphNode = window.app!.graph.getNodeById(1)
       if (!graphNode?.size) return null
@@ -463,13 +472,17 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     expect(
       size.width,
       'ImageCompare node minimum width'
-    ).toBeGreaterThanOrEqual(minWidth)
+    ).toBeGreaterThanOrEqual(400)
     expect(
       size.height,
       'ImageCompare node minimum height'
-    ).toBeGreaterThanOrEqual(minHeight)
+    ).toBeGreaterThanOrEqual(350)
   })
 
+  // ---------------------------------------------------------------------------
+  // Visual regression screenshots
+  // ---------------------------------------------------------------------------
+
   for (const { pct, expectedClipMin, expectedClipMax } of [
     { pct: 25, expectedClipMin: 70, expectedClipMax: 80 },
     { pct: 75, expectedClipMin: 20, expectedClipMax: 30 }
@@ -487,7 +500,7 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
 
         const node = comfyPage.vueNodes.getNodeLocator('1')
         const beforeImg = node.locator('img[alt="Before image"]')
-        const viewport = node.getByTestId(TestIds.imageCompare.viewport)
+        const viewport = node.getByTestId('image-compare-viewport')
         await waitForImagesLoaded(node)
         await expect(viewport).toBeVisible()
         await moveToPercentage(comfyPage.page, viewport, pct)
@@ -503,6 +516,10 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     )
   }
 
+  // ---------------------------------------------------------------------------
+  // Edge cases
+  // ---------------------------------------------------------------------------
+
   test('Widget handles image load failure gracefully', async ({
     comfyPage
   }) => {
@@ -569,14 +586,9 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     })
 
     const node = comfyPage.vueNodes.getNodeLocator('1')
-    await node
-      .getByTestId(TestIds.imageCompare.beforeBatch)
-      .getByTestId(TestIds.imageCompare.batchNext)
-      .click()
+    await node.getByTestId('before-batch').getByTestId('batch-next').click()
     await expect(
-      node
-        .getByTestId(TestIds.imageCompare.beforeBatch)
-        .getByTestId(TestIds.imageCompare.batchCounter)
+      node.getByTestId('before-batch').getByTestId('batch-counter')
     ).toHaveText('2 / 2')
 
     await setImageCompareValue(comfyPage, {
@@ -589,9 +601,7 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
       green1Url
     )
     await expect(
-      node
-        .getByTestId(TestIds.imageCompare.beforeBatch)
-        .getByTestId(TestIds.imageCompare.batchCounter)
+      node.getByTestId('before-batch').getByTestId('batch-counter')
     ).toHaveText('1 / 2')
   })
 
@@ -646,35 +656,23 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     })
 
     const node = comfyPage.vueNodes.getNodeLocator('1')
-    const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
-    const afterBatch = node.getByTestId(TestIds.imageCompare.afterBatch)
+    const beforeBatch = node.getByTestId('before-batch')
+    const afterBatch = node.getByTestId('after-batch')
 
-    await expect(
-      beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
-    ).toHaveText('1 / 20')
-    await expect(
-      afterBatch.getByTestId(TestIds.imageCompare.batchCounter)
-    ).toHaveText('1 / 20')
+    await expect(beforeBatch.getByTestId('batch-counter')).toHaveText('1 / 20')
+    await expect(afterBatch.getByTestId('batch-counter')).toHaveText('1 / 20')
 
-    const beforeNext = beforeBatch.getByTestId(TestIds.imageCompare.batchNext)
-    const afterNext = afterBatch.getByTestId(TestIds.imageCompare.batchNext)
+    const beforeNext = beforeBatch.getByTestId('batch-next')
+    const afterNext = afterBatch.getByTestId('batch-next')
     for (let i = 0; i < 19; i++) {
       await beforeNext.click()
       await afterNext.click()
     }
 
-    await expect(
-      beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
-    ).toHaveText('20 / 20')
-    await expect(
-      afterBatch.getByTestId(TestIds.imageCompare.batchCounter)
-    ).toHaveText('20 / 20')
-    await expect(
-      beforeBatch.getByTestId(TestIds.imageCompare.batchPrev)
-    ).toBeEnabled()
-    await expect(
-      afterBatch.getByTestId(TestIds.imageCompare.batchPrev)
-    ).toBeEnabled()
+    await expect(beforeBatch.getByTestId('batch-counter')).toHaveText('20 / 20')
+    await expect(afterBatch.getByTestId('batch-counter')).toHaveText('20 / 20')
+    await expect(beforeBatch.getByTestId('batch-prev')).toBeEnabled()
+    await expect(afterBatch.getByTestId('batch-prev')).toBeEnabled()
     await expect(beforeNext).toBeDisabled()
     await expect(afterNext).toBeDisabled()
   })

browser_tests/tests/interaction.spec.ts

@@ -31,9 +31,11 @@ test.describe('Item Interaction', { tag: ['@screenshot', '@node'] }, () => {
   test('Can pin/unpin items with keyboard shortcut', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('groups/mixed_graph_items')
     await comfyPage.canvas.press('Control+a')
-    await comfyPage.keyboard.press('KeyP')
+    await comfyPage.canvas.press('KeyP')
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('pinned-all.png')
-    await comfyPage.keyboard.press('KeyP')
+    await comfyPage.canvas.press('KeyP')
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('unpinned-all.png')
   })
 })
@@ -74,11 +76,13 @@ test.describe('Node Interaction', () => {
         await comfyPage.canvas.click({
           position: DefaultGraphPositions.textEncodeNode1
         })
-        await comfyPage.expectScreenshot(comfyPage.canvas, 'selected-node1.png')
+        await comfyPage.nextFrame()
+        await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
         await comfyPage.canvas.click({
           position: DefaultGraphPositions.textEncodeNode2
         })
-        await comfyPage.expectScreenshot(comfyPage.canvas, 'selected-node2.png')
+        await comfyPage.nextFrame()
+        await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
       }
     )
 
@@ -170,7 +174,8 @@ test.describe('Node Interaction', () => {
     await comfyPage.nodeOps.dragTextEncodeNode2()
     // Move mouse away to avoid hover highlight on the node at the drop position.
     await comfyPage.canvasOps.moveMouseToEmptyArea()
-    await comfyPage.expectScreenshot(comfyPage.canvas, 'dragged-node1.png', {
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png', {
       maxDiffPixels: 50
     })
   })
@@ -180,6 +185,7 @@ test.describe('Node Interaction', () => {
       // Pin this suite to the legacy canvas path so Alt+drag exercises
       // LGraphCanvas, not the Vue node drag handler.
       await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+      await comfyPage.nextFrame()
     })
 
     test('Can duplicate a regular node via Alt+drag', async ({ comfyPage }) => {
@@ -279,6 +285,7 @@ test.describe('Node Interaction', () => {
     }) => {
       await comfyPage.settings.setSetting('Comfy.Node.AutoSnapLinkToSlot', true)
       await comfyPage.settings.setSetting('Comfy.Node.SnapHighlightsNode', true)
+      await comfyPage.nextFrame()
 
       await comfyMouse.move(DefaultGraphPositions.clipTextEncodeNode1InputSlot)
       await comfyMouse.drag(DefaultGraphPositions.clipTextEncodeNode2InputSlot)
@@ -352,8 +359,8 @@ test.describe('Node Interaction', () => {
         modifiers: ['Control', 'Alt'],
         position: loadCheckpointClipSlotPos
       })
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'batch-disconnect-links-disconnected.png'
       )
     }
@@ -403,8 +410,8 @@ test.describe('Node Interaction', () => {
       await expect.poll(() => targetNode.isCollapsed()).toBe(false)
       // Move mouse away to avoid hover highlight differences.
       await comfyPage.canvasOps.moveMouseToEmptyArea()
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'text-encode-toggled-back-open.png'
       )
     }
@@ -507,7 +514,8 @@ test.describe('Node Interaction', () => {
       await comfyPage.page.keyboard.up('Control')
       await comfyPage.nextFrame()
       // Confirm group title
-      await comfyPage.keyboard.press('Enter')
+      await comfyPage.page.keyboard.press('Enter')
+      await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
         'group-selected-nodes.png'
       )
@@ -1163,8 +1171,8 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       await comfyPage.page.mouse.down({ button: 'middle' })
       await comfyPage.page.mouse.move(150, 150)
       await comfyPage.page.mouse.up({ button: 'middle' })
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'legacy-middle-drag-pan.png'
       )
     })
@@ -1172,14 +1180,14 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
     test('Mouse wheel should zoom in/out', async ({ comfyPage }) => {
       await comfyPage.page.mouse.move(400, 300)
       await comfyPage.page.mouse.wheel(0, -120)
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'legacy-wheel-zoom-in.png'
       )
 
       await comfyPage.page.mouse.wheel(0, 240)
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'legacy-wheel-zoom-out.png'
       )
     })
@@ -1239,8 +1247,8 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       await comfyPage.page.mouse.down({ button: 'middle' })
       await comfyPage.page.mouse.move(150, 150)
       await comfyPage.page.mouse.up({ button: 'middle' })
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'standard-middle-drag-pan.png'
       )
     })
@@ -1250,16 +1258,16 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       await comfyPage.page.keyboard.down('Control')
       await comfyPage.page.mouse.wheel(0, -120)
       await comfyPage.page.keyboard.up('Control')
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'standard-ctrl-wheel-zoom-in.png'
       )
 
       await comfyPage.page.keyboard.down('Control')
       await comfyPage.page.mouse.wheel(0, 240)
       await comfyPage.page.keyboard.up('Control')
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'standard-ctrl-wheel-zoom-out.png'
       )
     })
@@ -1351,31 +1359,33 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
     )
 
     await comfyPage.canvas.click()
-    await comfyPage.expectScreenshot(comfyPage.canvas, 'standard-initial.png')
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.canvas).toHaveScreenshot('standard-initial.png')
 
     await comfyPage.page.mouse.move(400, 300)
 
     await comfyPage.page.keyboard.down('Shift')
     await comfyPage.page.mouse.wheel(0, 120)
     await comfyPage.page.keyboard.up('Shift')
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'standard-shift-wheel-pan-right.png'
     )
 
     await comfyPage.page.keyboard.down('Shift')
     await comfyPage.page.mouse.wheel(0, -240)
     await comfyPage.page.keyboard.up('Shift')
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'standard-shift-wheel-pan-left.png'
     )
 
     await comfyPage.page.keyboard.down('Shift')
     await comfyPage.page.mouse.wheel(0, 120)
     await comfyPage.page.keyboard.up('Shift')
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'standard-shift-wheel-pan-center.png'
     )
   })

browser_tests/tests/load3d/load3d.spec.ts

@@ -112,8 +112,9 @@ test.describe('Load3D', () => {
       await expect.poll(() => modelFileWidget.getValue()).toContain('cube.obj')
 
       await load3d.waitForModelLoaded()
-      await comfyPage.expectScreenshot(
-        load3d.node,
+      await comfyPage.nextFrame()
+
+      await expect(load3d.node).toHaveScreenshot(
         'load3d-uploaded-cube-obj.png',
         { maxDiffPixelRatio: 0.1 }
       )
@@ -141,8 +142,9 @@ test.describe('Load3D', () => {
       await expect.poll(() => modelFileWidget.getValue()).toContain('cube.obj')
 
       await load3d.waitForModelLoaded()
-      await comfyPage.expectScreenshot(
-        load3d.node,
+      await comfyPage.nextFrame()
+
+      await expect(load3d.node).toHaveScreenshot(
         'load3d-dropped-cube-obj.png',
         { maxDiffPixelRatio: 0.1 }
       )

browser_tests/tests/minimap.spec.ts

@@ -143,7 +143,8 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
         canvas.ds.offset[1] = -600
         canvas.setDirty(true, true)
       })
-      await comfyPage.expectScreenshot(minimap, 'minimap-after-pan.png')
+      await comfyPage.nextFrame()
+      await expect(minimap).toHaveScreenshot('minimap-after-pan.png')
     }
   )
 

browser_tests/tests/mobileBaseline.spec.ts

@@ -11,10 +11,8 @@ test.describe(
       await comfyPage.settings.setSetting('Comfy.ConfirmClear', false)
       await comfyPage.command.executeCommand('Comfy.ClearWorkflow')
       await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
-        'mobile-empty-canvas.png'
-      )
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot('mobile-empty-canvas.png')
     })
 
     test('@mobile default workflow', async ({ comfyPage }) => {
@@ -26,6 +24,7 @@ test.describe(
 
     test('@mobile graph canvas toolbar visible', async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
+      await comfyPage.nextFrame()
 
       const minimapButton = comfyPage.page.getByTestId(
         TestIds.canvas.toggleMinimapButton
@@ -39,8 +38,9 @@ test.describe(
 
     test('@mobile settings dialog', async ({ comfyPage }) => {
       await comfyPage.settingDialog.open()
-      await comfyPage.expectScreenshot(
-        comfyPage.settingDialog.root,
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.settingDialog.root).toHaveScreenshot(
         'mobile-settings-dialog.png',
         {
           mask: [

browser_tests/tests/nodeContextMenuOverflow.spec.ts

@@ -13,6 +13,7 @@ test.describe(
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
       await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
       await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+      await comfyPage.nextFrame()
     })
 
     async function openMoreOptions(comfyPage: ComfyPage) {
@@ -34,6 +35,7 @@ test.describe(
       await comfyPage.nextFrame()
 
       await ksamplerNodes[0].click('title')
+      await comfyPage.nextFrame()
 
       await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
 

browser_tests/tests/nodeGhostPlacement.spec.ts

@@ -14,6 +14,7 @@ async function setVueMode(comfyPage: ComfyPage, enabled: boolean) {
 
 async function addGhostAtCenter(comfyPage: ComfyPage) {
   await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+  await comfyPage.nextFrame()
 
   const viewport = comfyPage.page.viewportSize()!
   const centerX = Math.round(viewport.width / 2)
@@ -52,6 +53,7 @@ for (const mode of ['litegraph', 'vue'] as const) {
 
     test('positions ghost node at cursor', async ({ comfyPage }) => {
       await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+      await comfyPage.nextFrame()
 
       const viewport = comfyPage.page.viewportSize()!
       const centerX = Math.round(viewport.width / 2)
@@ -108,7 +110,8 @@ for (const mode of ['litegraph', 'vue'] as const) {
       expect(before).not.toBeNull()
       expect(before!.ghost).toBe(true)
 
-      await comfyPage.keyboard.press('Escape')
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
 
       const after = await getNodeById(comfyPage, nodeId)
       expect(after).toBeNull()
@@ -121,7 +124,8 @@ for (const mode of ['litegraph', 'vue'] as const) {
       expect(before).not.toBeNull()
       expect(before!.ghost).toBe(true)
 
-      await comfyPage.keyboard.press('Delete')
+      await comfyPage.page.keyboard.press('Delete')
+      await comfyPage.nextFrame()
 
       const after = await getNodeById(comfyPage, nodeId)
       expect(after).toBeNull()
@@ -134,7 +138,8 @@ for (const mode of ['litegraph', 'vue'] as const) {
       expect(before).not.toBeNull()
       expect(before!.ghost).toBe(true)
 
-      await comfyPage.keyboard.press('Backspace')
+      await comfyPage.page.keyboard.press('Backspace')
+      await comfyPage.nextFrame()
 
       const after = await getNodeById(comfyPage, nodeId)
       expect(after).toBeNull()

browser_tests/tests/nodeSearchBox.spec.ts

@@ -303,8 +303,8 @@ test.describe('Release context menu', { tag: '@node' }, () => {
         'CLIP | CLIP'
       )
       await comfyPage.page.mouse.move(10, 10)
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'link-release-context-menu.png'
       )
     }

browser_tests/tests/queue/queueOverlay.spec.ts

@@ -1,19 +1,13 @@
-import { expect, mergeTests } from '@playwright/test'
-import type { JobEntry } from '@comfyorg/ingest-types'
+import { expect } from '@playwright/test'
 
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
-import { jobsApiMockFixture } from '@e2e/fixtures/jobsApiMockFixture'
-import {
-  createMockJob,
-  createMockJobRecords
-} from '@e2e/fixtures/helpers/jobFixtures'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
-
-const test = mergeTests(comfyPageFixture, jobsApiMockFixture)
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 
 const now = Date.now()
 
-const MOCK_JOBS: JobEntry[] = [
+const MOCK_JOBS: RawJobListItem[] = [
   createMockJob({
     id: 'job-completed-1',
     status: 'completed',
@@ -41,14 +35,16 @@ const MOCK_JOBS: JobEntry[] = [
 ]
 
 test.describe('Queue overlay', () => {
-  test.beforeEach(async ({ comfyPage, jobsApi }) => {
-    await jobsApi.mockJobs(createMockJobRecords(MOCK_JOBS))
-    await comfyPage.setupSettings({
-      'Comfy.Queue.QPOV2': false
-    })
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(MOCK_JOBS)
+    await comfyPage.settings.setSetting('Comfy.Queue.QPOV2', false)
     await comfyPage.setup()
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
   test('Toggle button opens expanded queue overlay', async ({ comfyPage }) => {
     const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
     await toggle.click()

browser_tests/tests/rightClickMenu.spec.ts

@@ -19,10 +19,8 @@ test.describe(
       await comfyPage.page.getByText('loaders').click()
       await comfyPage.page.getByText('Load VAE').click()
       await comfyPage.contextMenu.waitForHidden()
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
-        'add-node-node-added.png'
-      )
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot('add-node-node-added.png')
     })
 
     test('Can add group', async ({ comfyPage }) => {
@@ -30,8 +28,8 @@ test.describe(
       await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png')
       await comfyPage.page.getByText('Add Group', { exact: true }).click()
       await comfyPage.contextMenu.waitForHidden()
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'add-group-group-added.png'
       )
     })
@@ -47,8 +45,8 @@ test.describe(
       await comfyPage.nodeOps.promptDialogInput.fill('GroupNode2CLIP')
       await comfyPage.page.keyboard.press('Enter')
       await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'hidden' })
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
         'right-click-node-group-node.png'
       )
     })
@@ -62,11 +60,12 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
     await comfyPage.page.getByText('Properties Panel').click()
     await comfyPage.contextMenu.waitForHidden()
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-node-properties-panel.png'
     )
   })
@@ -77,11 +76,12 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
     await comfyPage.page.getByText('Collapse').click()
     await comfyPage.contextMenu.waitForHidden()
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-node-collapsed.png'
     )
   })
@@ -104,8 +104,8 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     await comfyPage.nextFrame()
     await comfyPage.page.getByText('Collapse').click()
     await comfyPage.contextMenu.waitForHidden()
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-node-collapsed-badge.png'
     )
   })
@@ -116,11 +116,12 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
     await comfyPage.page.getByText('Bypass').click()
     await comfyPage.contextMenu.waitForHidden()
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-node-bypassed.png'
     )
   })
@@ -132,7 +133,8 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
     await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
     await comfyPage.contextMenu.waitForHidden()
     await comfyPage.nextFrame()
@@ -147,8 +149,8 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-pinned-node.png'
     )
     await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
@@ -158,8 +160,8 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-unpinned-node.png'
     )
   })
@@ -204,10 +206,8 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
     await comfyPage.page.keyboard.up('Control')
     await comfyPage.contextMenu.waitForHidden()
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
-      'selected-nodes-pinned.png'
-    )
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('selected-nodes-pinned.png')
     await comfyPage.canvas.click({
       position: DefaultGraphPositions.emptyLatentWidgetClick,
       button: 'right'
@@ -216,8 +216,8 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     await comfyPage.nextFrame()
     await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
     await comfyPage.contextMenu.waitForHidden()
-    await comfyPage.expectScreenshot(
-      comfyPage.canvas,
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
       'selected-nodes-unpinned.png'
     )
   })

browser_tests/tests/selectionRectangle.spec.ts

@@ -11,13 +11,15 @@ test.describe('@canvas Selection Rectangle', { tag: '@vue-nodes' }, () => {
     const totalCount = await comfyPage.vueNodes.getNodeCount()
 
     // Use canvas press for keyboard shortcuts (doesn't need click target)
-    await comfyPage.keyboard.press('Control+a')
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.nextFrame()
 
     await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(totalCount)
   })
 
   test('Click empty space deselects all', async ({ comfyPage }) => {
-    await comfyPage.keyboard.press('Control+a')
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.nextFrame()
     await expect(comfyPage.vueNodes.selectedNodes).not.toHaveCount(0)
 
     // Deselect by Ctrl+clicking the already-selected node (reliable cross-env)
@@ -68,7 +70,8 @@ test.describe('@canvas Selection Rectangle', { tag: '@vue-nodes' }, () => {
 
     // Use Ctrl+A to select all, which is functionally equivalent to
     // drag-selecting the entire canvas and more reliable in CI
-    await comfyPage.keyboard.press('Control+a')
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.nextFrame()
 
     await expect
       .poll(() => comfyPage.vueNodes.getNodeCount())

browser_tests/tests/selectionToolbox.spec.ts

@@ -267,7 +267,8 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
         .click()
 
       // Undo the colorization
-      await comfyPage.keyboard.press('Control+Z')
+      await comfyPage.page.keyboard.press('Control+Z')
+      await comfyPage.nextFrame()
 
       // Node should be uncolored again
       const selectedNode = (

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -32,6 +32,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
     await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.nextFrame()
   })
 
   test('delete button removes selected node', async ({ comfyPage }) => {
@@ -68,6 +69,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.nextFrame()
 
     await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
     await comfyPage.nextFrame()
@@ -81,6 +83,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.nextFrame()
 
     await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
     await comfyPage.nextFrame()
@@ -157,6 +160,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.nextFrame()
 
     const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
@@ -183,6 +187,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.nextFrame()
 
     const initialGroupCount = await comfyPage.page.evaluate(
       () => window.app!.graph.groups.length
@@ -224,6 +229,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.nextFrame()
 
     // Select the SaveImage node by panning to it
     const saveImageRef = (

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -14,6 +14,7 @@ test.describe(
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
       await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+      await comfyPage.nextFrame()
       await comfyPage.nodeOps.selectNodes(['KSampler'])
       await comfyPage.nextFrame()
     })
@@ -42,6 +43,7 @@ test.describe(
       await comfyPage.nextFrame()
 
       await ksamplerNodes[0].click('title')
+      await comfyPage.nextFrame()
 
       await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
 

browser_tests/tests/sidebar/assets.spec.ts

@@ -1,21 +1,22 @@
-import { expect, mergeTests } from '@playwright/test'
-import type { JobEntry } from '@comfyorg/ingest-types'
+import { expect } from '@playwright/test'
 
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
-import { assetScenarioFixture } from '@e2e/fixtures/assetScenarioFixture'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import {
   createMockJob,
   createMockJobs
-} from '@e2e/fixtures/helpers/jobFixtures'
+} from '@e2e/fixtures/helpers/AssetsHelper'
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 
-const test = mergeTests(comfyPageFixture, assetScenarioFixture)
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
 
-const SAMPLE_JOBS: JobEntry[] = [
+const SAMPLE_JOBS: RawJobListItem[] = [
   createMockJob({
     id: 'job-alpha',
-    create_time: 1_000_000,
-    execution_start_time: 1_000_000,
-    execution_end_time: 1_010_000,
+    create_time: 1000,
+    execution_start_time: 1000,
+    execution_end_time: 1010,
     preview_output: {
       filename: 'landscape.png',
       subfolder: '',
@@ -27,9 +28,9 @@ const SAMPLE_JOBS: JobEntry[] = [
   }),
   createMockJob({
     id: 'job-beta',
-    create_time: 2_000_000,
-    execution_start_time: 2_000_000,
-    execution_end_time: 2_003_000,
+    create_time: 2000,
+    execution_start_time: 2000,
+    execution_end_time: 2003,
     preview_output: {
       filename: 'portrait.png',
       subfolder: '',
@@ -41,9 +42,9 @@ const SAMPLE_JOBS: JobEntry[] = [
   }),
   createMockJob({
     id: 'job-gamma',
-    create_time: 3_000_000,
-    execution_start_time: 3_000_000,
-    execution_end_time: 3_020_000,
+    create_time: 3000,
+    execution_start_time: 3000,
+    execution_end_time: 3020,
     preview_output: {
       filename: 'abstract_art.png',
       subfolder: '',
@@ -61,12 +62,20 @@ const SAMPLE_IMPORTED_FILES = [
   'audio_clip.wav'
 ]
 
+// ==========================================================================
+// 1. Empty states
+// ==========================================================================
+
 test.describe('Assets sidebar - empty states', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockEmptyState()
+  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 tab', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
@@ -92,13 +101,21 @@ test.describe('Assets sidebar - empty states', () => {
   })
 })
 
+// ==========================================================================
+// 2. Tab navigation
+// ==========================================================================
+
 test.describe('Assets sidebar - tab navigation', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
-    await assetScenario.mockImportedFiles(SAMPLE_IMPORTED_FILES)
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles(SAMPLE_IMPORTED_FILES)
     await comfyPage.setup()
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
   test('Generated tab is active by default', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
@@ -113,10 +130,12 @@ test.describe('Assets sidebar - tab navigation', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Switch to Imported
     await tab.switchToImported()
     await expect(tab.importedTab).toHaveAttribute('aria-selected', 'true')
     await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'false')
 
+    // Switch back to Generated
     await tab.switchToGenerated()
     await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'true')
   })
@@ -125,21 +144,31 @@ test.describe('Assets sidebar - tab navigation', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Type search in Generated tab
     await tab.searchInput.fill('landscape')
     await expect(tab.searchInput).toHaveValue('landscape')
 
+    // Switch to Imported tab
     await tab.switchToImported()
     await expect(tab.searchInput).toHaveValue('')
   })
 })
 
+// ==========================================================================
+// 3. Asset display - grid view
+// ==========================================================================
+
 test.describe('Assets sidebar - grid view display', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
-    await assetScenario.mockImportedFiles(SAMPLE_IMPORTED_FILES)
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles(SAMPLE_IMPORTED_FILES)
     await comfyPage.setup()
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
   test('Displays generated assets as cards in grid view', async ({
     comfyPage
   }) => {
@@ -164,8 +193,8 @@ test.describe('Assets sidebar - grid view display', () => {
     await expect.poll(() => tab.assetCards.count()).toBeGreaterThanOrEqual(1)
   })
 
-  test('Displays svg outputs', async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory([
+  test('Displays svg outputs', async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory([
       createMockJob({
         id: 'job-alpha',
         create_time: 1000,
@@ -189,22 +218,31 @@ test.describe('Assets sidebar - grid view display', () => {
   })
 })
 
+// ==========================================================================
+// 4. View mode toggle (grid <-> list)
+// ==========================================================================
+
 test.describe('Assets sidebar - view mode toggle', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
-    await assetScenario.mockImportedFiles([])
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
     await comfyPage.setup()
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
   test('Can switch to list view via settings menu', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
     await tab.waitForAssets()
 
+    // Open settings menu and select list view
     await tab.openSettingsMenu()
     await tab.listViewOption.click()
 
-    await expect(tab.assetCards).toHaveCount(0)
+    // List view items should now be visible
     await expect(tab.listViewItems.first()).toBeVisible()
   })
 
@@ -213,10 +251,12 @@ test.describe('Assets sidebar - view mode toggle', () => {
     await tab.open()
     await tab.waitForAssets()
 
+    // Switch to list view
     await tab.openSettingsMenu()
     await tab.listViewOption.click()
     await expect(tab.listViewItems.first()).toBeVisible()
 
+    // Switch back to grid view (settings popover is still open)
     await tab.gridViewOption.click()
     await tab.waitForAssets()
 
@@ -225,13 +265,21 @@ test.describe('Assets sidebar - view mode toggle', () => {
   })
 })
 
+// ==========================================================================
+// 5. Search functionality
+// ==========================================================================
+
 test.describe('Assets sidebar - search', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
-    await assetScenario.mockImportedFiles([])
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
     await comfyPage.setup()
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
   test('Search input is visible', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
@@ -248,6 +296,7 @@ test.describe('Assets sidebar - search', () => {
 
     const initialCount = await tab.assetCards.count()
 
+    // Search for a specific filename that matches only one asset
     await tab.searchInput.fill('landscape')
 
     // Wait for filter to reduce the count
@@ -261,6 +310,7 @@ test.describe('Assets sidebar - search', () => {
 
     const initialCount = await tab.assetCards.count()
 
+    // Filter then clear
     await tab.searchInput.fill('landscape')
     await expect.poll(() => tab.assetCards.count()).toBeLessThan(initialCount)
 
@@ -278,20 +328,30 @@ test.describe('Assets sidebar - search', () => {
   })
 })
 
+// ==========================================================================
+// 6. Asset selection
+// ==========================================================================
+
 test.describe('Assets sidebar - selection', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
-    await assetScenario.mockImportedFiles([])
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
     await comfyPage.setup()
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
   test('Clicking an asset card selects it', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
     await tab.waitForAssets()
 
+    // Click first asset card
     await tab.assetCards.first().click()
 
+    // Should have data-selected="true"
     await expect(tab.selectedCards).toHaveCount(1)
   })
 
@@ -303,9 +363,11 @@ test.describe('Assets sidebar - selection', () => {
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
 
+    // Click first card
     await cards.first().click()
     await expect(tab.selectedCards).toHaveCount(1)
 
+    // Ctrl+click second card
     await cards.nth(1).click({ modifiers: ['ControlOrMeta'] })
     await expect(tab.selectedCards).toHaveCount(2)
   })
@@ -317,6 +379,7 @@ test.describe('Assets sidebar - selection', () => {
     await tab.open()
     await tab.waitForAssets()
 
+    // Select an asset
     await tab.assetCards.first().click()
 
     // Footer should show selection count
@@ -328,12 +391,15 @@ test.describe('Assets sidebar - selection', () => {
     await tab.open()
     await tab.waitForAssets()
 
+    // Select an asset
     await tab.assetCards.first().click()
     await expect(tab.selectedCards).toHaveCount(1)
 
+    // Hover over the selection count button to reveal "Deselect all"
     await tab.selectionCountButton.hover()
     await expect(tab.deselectAllButton).toBeVisible()
 
+    // Click "Deselect all"
     await tab.deselectAllButton.click()
     await expect(tab.selectedCards).toHaveCount(0)
   })
@@ -343,31 +409,44 @@ test.describe('Assets sidebar - selection', () => {
     await tab.open()
     await tab.waitForAssets()
 
+    // Select an asset
     await tab.assetCards.first().click()
     await expect(tab.selectedCards).toHaveCount(1)
 
+    // Switch to Imported tab
     await tab.switchToImported()
 
+    // Switch back - selection should be cleared
     await tab.switchToGenerated()
     await tab.waitForAssets()
     await expect(tab.selectedCards).toHaveCount(0)
   })
 })
 
+// ==========================================================================
+// 7. Context menu
+// ==========================================================================
+
 test.describe('Assets sidebar - context menu', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
-    await assetScenario.mockImportedFiles([])
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
     await comfyPage.setup()
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
   test('Right-clicking an asset shows context menu', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
     await tab.waitForAssets()
 
+    // Right-click first asset
     await tab.assetCards.first().click({ button: 'right' })
 
+    // Context menu should appear with standard items
     const contextMenu = comfyPage.page.locator('.p-contextmenu')
     await expect(contextMenu).toBeVisible()
   })
@@ -460,17 +539,23 @@ test.describe('Assets sidebar - context menu', () => {
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
 
+    // Dismiss any toasts that appeared after asset loading
     await tab.dismissToasts()
 
+    // Multi-select: use keyboard.down/up so useKeyModifier('Control') detects
+    // the modifier — click({ modifiers }) only sets the mouse event flag and
+    // does not fire a keydown event that VueUse tracks.
     await cards.first().click()
-    await comfyPage.page.keyboard.down('ControlOrMeta')
+    await comfyPage.page.keyboard.down('Control')
     await cards.nth(1).click()
-    await comfyPage.page.keyboard.up('ControlOrMeta')
+    await comfyPage.page.keyboard.up('Control')
 
     // Verify multi-selection took effect and footer is stable before right-clicking
     await expect(tab.selectedCards).toHaveCount(2)
     await expect(tab.selectionFooter).toBeVisible()
 
+    // Use dispatchEvent instead of click({ button: 'right' }) to avoid any
+    // overlay intercepting the event, and assert directly without toPass.
     const contextMenu = comfyPage.page.locator('.p-contextmenu')
     await cards.first().dispatchEvent('contextmenu', {
       bubbles: true,
@@ -479,17 +564,26 @@ test.describe('Assets sidebar - context menu', () => {
     })
     await expect(contextMenu).toBeVisible()
 
+    // Bulk menu should show bulk download action
     await expect(tab.contextMenuItem('Download all')).toBeVisible()
   })
 })
 
+// ==========================================================================
+// 8. Bulk actions (footer)
+// ==========================================================================
+
 test.describe('Assets sidebar - bulk actions', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
-    await assetScenario.mockImportedFiles([])
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
     await comfyPage.setup()
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
   test('Footer shows download button when assets selected', async ({
     comfyPage
   }) => {
@@ -521,14 +615,17 @@ test.describe('Assets sidebar - bulk actions', () => {
     await tab.open()
     await tab.waitForAssets()
 
+    // Select the two single-output assets (job-alpha, job-beta).
+    // The count reflects total outputs, not cards — job-gamma has
+    // outputs_count: 2 which would inflate the total.
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(3)
 
     // Cards are sorted newest-first: gamma (idx 0), beta (1), alpha (2)
     await cards.nth(1).click()
-    await comfyPage.page.keyboard.down('ControlOrMeta')
+    await comfyPage.page.keyboard.down('Control')
     await cards.nth(2).click()
-    await comfyPage.page.keyboard.up('ControlOrMeta')
+    await comfyPage.page.keyboard.up('Control')
 
     // Selection count should show the count
     await expect(tab.selectionCountButton).toBeVisible()
@@ -536,11 +633,82 @@ test.describe('Assets sidebar - bulk actions', () => {
   })
 })
 
-test.describe('Assets sidebar - delete confirmation', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
-    await assetScenario.mockImportedFiles([])
+// ==========================================================================
+// 9. Pagination
+// ==========================================================================
+
+test.describe('Assets sidebar - pagination', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('initial load fetches first batch with offset 0', async ({
+    comfyPage
+  }) => {
+    const manyJobs = createMockJobs(250)
+    await comfyPage.assets.mockOutputHistory(manyJobs)
     await comfyPage.setup()
+
+    // Capture the first history fetch (terminal statuses only).
+    // Queue polling also hits /jobs but with status=in_progress,pending.
+    const firstRequest = comfyPage.page.waitForRequest((req) => {
+      if (!/\/api\/jobs\?/.test(req.url())) return false
+      const url = new URL(req.url())
+      const status = url.searchParams.get('status') ?? ''
+      return status.includes('completed')
+    })
+
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const req = await firstRequest
+    const url = new URL(req.url())
+    expect(url.searchParams.get('offset')).toBe('0')
+    expect(Number(url.searchParams.get('limit'))).toBeGreaterThan(0)
+  })
+})
+
+// ==========================================================================
+// 10. Settings menu visibility
+// ==========================================================================
+
+test.describe('Assets sidebar - settings menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Settings menu shows view mode options', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.openSettingsMenu()
+
+    await expect(tab.listViewOption).toBeVisible()
+    await expect(tab.gridViewOption).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 11. Delete confirmation
+// ==========================================================================
+
+test.describe('Assets sidebar - delete confirmation', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockDeleteHistory()
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
   })
 
   test('Right-click delete shows confirmation dialog', async ({
@@ -576,7 +744,7 @@ test.describe('Assets sidebar - delete confirmation', () => {
     const dialog = comfyPage.confirmDialog.root
     await expect(dialog).toBeVisible()
 
-    await comfyPage.confirmDialog.click('delete')
+    await comfyPage.confirmDialog.delete.click()
 
     await expect(dialog).toBeHidden()
     await expect(tab.assetCards).toHaveCount(initialCount - 1)
@@ -598,54 +766,9 @@ test.describe('Assets sidebar - delete confirmation', () => {
     const dialog = comfyPage.confirmDialog.root
     await expect(dialog).toBeVisible()
 
-    await comfyPage.confirmDialog.click('reject')
+    await comfyPage.confirmDialog.reject.click()
 
     await expect(dialog).toBeHidden()
     await expect(tab.assetCards).toHaveCount(initialCount)
   })
 })
-
-test.describe('Assets sidebar - pagination', () => {
-  test('initial load fetches first batch with offset 0', async ({
-    comfyPage,
-    assetScenario
-  }) => {
-    const manyJobs = createMockJobs(250)
-    await assetScenario.mockGeneratedHistory(manyJobs)
-    await comfyPage.setup()
-
-    const firstRequest = comfyPage.page.waitForRequest((req) => {
-      if (!/\/api\/jobs\?/.test(req.url())) return false
-      const url = new URL(req.url())
-      const status = url.searchParams.get('status') ?? ''
-      return status.includes('completed')
-    })
-
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    const req = await firstRequest
-    const url = new URL(req.url())
-    expect(url.searchParams.get('offset')).toBe('0')
-    expect(Number(url.searchParams.get('limit'))).toBeGreaterThan(0)
-  })
-})
-
-test.describe('Assets sidebar - settings menu', () => {
-  test.beforeEach(async ({ comfyPage, assetScenario }) => {
-    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
-    await assetScenario.mockImportedFiles([])
-    await comfyPage.setup()
-  })
-
-  test('Settings menu shows view mode options', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-
-    await tab.openSettingsMenu()
-
-    await expect(tab.listViewOption).toBeVisible()
-    await expect(tab.gridViewOption).toBeVisible()
-  })
-})