feat: demo walkthroughs for the AI Agent, Blueprints, and Cloud Library

[lightbulbman]

Summary

Adds the guided demo walkthroughs for the AI Agent, Blueprints, and Cloud Library screens, and brings the AI Agent walkthrough in line with the current AI Agent page design.

Changes

AI Agent demo

• Updated manage/_ai-agent.scss to the current AI Agent stylesheet: card-style main column, status pills, tabbed sidebar, empty state, and composer pinned to the foot of the column.
• Replaced the demo sidebar with the tabbed layout — Prompt Actions (prompt examples and usage meters) and Past Conversations (a history rail whose status pill follows the script).
• Added the starter prompt empty state, shown until the scripted prompt is sent.
• The composer now stays on the page for the whole walkthrough, disabled while the agent is working, instead of being removed once the prompt is sent.
• The refine section carries the select and cancel actions, and "Make changes" is a secondary button.
• The closing panel moved out of the conversation thread to below the agent container, and the walkthrough scrolls to it when it finishes.

Demo callouts

• Step commentary now renders above a modal's overlay rather than being dimmed by it, narrowing to the gutter beside the modal so it stays clear of the dialog. Its position is unchanged.
• The preview modal width moved into a --cs-preview-modal-inline-size token shared by the modal and the callout.

Testing

• npm run lint:styles, npm run lint:js, tsc --noEmit, and npm run build all pass.
• npm run test:playwright -- demo — 47 demo E2E tests pass across both snippet storage projects, including new coverage for the refreshed layout, the position of the closing panel, and the callout's layering over the modal overlay.

🤖 Generated with Claude Code

[github-actions]

Playwright Test Failure

One or more Playwright targets failed in this workflow run.

See all Playwright errors (click to expand)

---

Affected Playwright test: all

FAILURE: cloud-download-eligibility.spec.ts:100:6 unlicensed card view select-all only downloads eligible snippets
[chromium-db-snippets] › cloud-download-eligibility.spec.ts:100:6 › Cloud bulk download eligibility › unlicensed card view select-all only downloads eligible snippets Error: expect(locator).toBeChecked() failed
Locator: locator('.cloud-search-results').getByRole('checkbox', { name: 'Select Eligible Alpha' })
Expected: checked
Received: unchecked
Timeout: 30000ms
Call log:
- Expect "toBeChecked" with timeout 30000ms
- waiting for locator('.cloud-search-results').getByRole('checkbox', { name: 'Select Eligible Alpha' })
34 × locator resolved to <input type="checkbox" class="snippet-card-select" aria-label="Select Eligible Alpha"/>
- unexpected value "unchecked"
110 |
111 | await page.getByRole('checkbox', { name: 'Select all items' }).check()
> 112 | await expect(cards.getByRole('checkbox', { name: 'Select Eligible Alpha' })).toBeChecked()
| ^
113 |
114 | await applyBulkDownload(page)
115 | await expect.poll(() => state.downloads).toEqual([ELIGIBLE.id])
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:112:80
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeChecked() failed
Locator: locator('.cloud-search-results').getByRole('checkbox', { name: 'Select Eligible Alpha' })
Expected: checked
Received: unchecked
Timeout: 30000ms
Call log:
- Expect "toBeChecked" with timeout 30000ms
- waiting for locator('.cloud-search-results').getByRole('checkbox', { name: 'Select Eligible Alpha' })
34 × locator resolved to <input type="checkbox" class="snippet-card-select" aria-label="Select Eligible Alpha"/>
- unexpected value "unchecked"
110 |
111 | await page.getByRole('checkbox', { name: 'Select all items' }).check()
> 112 | await expect(cards.getByRole('checkbox', { name: 'Select Eligible Alpha' })).toBeChecked()
| ^
113 |
114 | await applyBulkDownload(page)
115 | await expect.poll(() => state.downloads).toEqual([ELIGIBLE.id])
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:112:80
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry1/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry1/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry1/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry1/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeChecked() failed
Locator: locator('.cloud-search-results').getByRole('checkbox', { name: 'Select Eligible Alpha' })
Expected: checked
Received: unchecked
Timeout: 30000ms
Call log:
- Expect "toBeChecked" with timeout 30000ms
- waiting for locator('.cloud-search-results').getByRole('checkbox', { name: 'Select Eligible Alpha' })
34 × locator resolved to <input type="checkbox" class="snippet-card-select" aria-label="Select Eligible Alpha"/>
- unexpected value "unchecked"
110 |
111 | await page.getByRole('checkbox', { name: 'Select all items' }).check()
> 112 | await expect(cards.getByRole('checkbox', { name: 'Select Eligible Alpha' })).toBeChecked()
| ^
113 |
114 | await applyBulkDownload(page)
115 | await expect.poll(() => state.downloads).toEqual([ELIGIBLE.id])
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:112:80
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry2/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry2/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry2/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry2/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-6de66-downloads-eligible-snippets-chromium-db-snippets-retry2/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────

---

Affected Playwright test: all

FAILURE: cloud-download-eligibility.spec.ts:118:6 licensed table view select-all includes Pro snippets but not linked ones
[chromium-db-snippets] › cloud-download-eligibility.spec.ts:118:6 › Cloud bulk download eligibility › licensed table view select-all includes Pro snippets but not linked ones Error: expect(received).toEqual(expected) // deep equality
- Expected - 4
+ Received + 1
- Array [
- 101,
- 103,
- ]
+ Array []
Call Log:
- Timeout 30000ms exceeded while waiting on the predicate
128 | await table.getByRole('checkbox', { name: 'Select all snippets' }).check()
129 | await applyBulkDownload(page)
> 130 | await expect.poll(() => [...state.downloads].sort((a, b) => a - b)).toEqual([ELIGIBLE.id, PRO_LOCKED.id])
| ^
131 | })
132 |
133 | test('selections hidden by a new search are not downloaded', async ({ page }) => {
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:130:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(received).toEqual(expected) // deep equality
- Expected - 4
+ Received + 1
- Array [
- 101,
- 103,
- ]
+ Array []
Call Log:
- Timeout 30000ms exceeded while waiting on the predicate
128 | await table.getByRole('checkbox', { name: 'Select all snippets' }).check()
129 | await applyBulkDownload(page)
> 130 | await expect.poll(() => [...state.downloads].sort((a, b) => a - b)).toEqual([ELIGIBLE.id, PRO_LOCKED.id])
| ^
131 | })
132 |
133 | test('selections hidden by a new search are not downloaded', async ({ page }) => {
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:130:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry1/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry1/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry1/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry1/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(received).toEqual(expected) // deep equality
- Expected - 4
+ Received + 1
- Array [
- 101,
- 103,
- ]
+ Array []
Call Log:
- Timeout 30000ms exceeded while waiting on the predicate
128 | await table.getByRole('checkbox', { name: 'Select all snippets' }).check()
129 | await applyBulkDownload(page)
> 130 | await expect.poll(() => [...state.downloads].sort((a, b) => a - b)).toEqual([ELIGIBLE.id, PRO_LOCKED.id])
| ^
131 | })
132 |
133 | test('selections hidden by a new search are not downloaded', async ({ page }) => {
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:130:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry2/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry2/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry2/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry2/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-b6aa9-nippets-but-not-linked-ones-chromium-db-snippets-retry2/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────

---

Affected Playwright test: all

FAILURE: cloud-download-eligibility.spec.ts:133:6 selections hidden by a new search are not downloaded
[chromium-db-snippets] › cloud-download-eligibility.spec.ts:133:6 › Cloud bulk download eligibility › selections hidden by a new search are not downloaded Error: expect(received).toEqual(expected) // deep equality
- Expected - 3
+ Received + 1
- Array [
- 104,
- ]
+ Array []
Call Log:
- Timeout 30000ms exceeded while waiting on the predicate
149 |
150 | await applyBulkDownload(page)
> 151 | await expect.poll(() => state.downloads).toEqual([ELIGIBLE_OTHER.id])
| ^
152 | })
153 | })
154 |
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:151:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(received).toEqual(expected) // deep equality
- Expected - 3
+ Received + 1
- Array [
- 104,
- ]
+ Array []
Call Log:
- Timeout 30000ms exceeded while waiting on the predicate
149 |
150 | await applyBulkDownload(page)
> 151 | await expect.poll(() => state.downloads).toEqual([ELIGIBLE_OTHER.id])
| ^
152 | })
153 | })
154 |
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:151:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry1/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry1/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry1/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry1/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(received).toEqual(expected) // deep equality
- Expected - 3
+ Received + 1
- Array [
- 104,
- ]
+ Array []
Call Log:
- Timeout 30000ms exceeded while waiting on the predicate
149 |
150 | await applyBulkDownload(page)
> 151 | await expect.poll(() => state.downloads).toEqual([ELIGIBLE_OTHER.id])
| ^
152 | })
153 | })
154 |
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:151:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry2/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry2/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry2/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry2/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-884d5-w-search-are-not-downloaded-chromium-db-snippets-retry2/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────

---

Affected Playwright test: all

FAILURE: cloud-download-eligibility.spec.ts:82:6 unlicensed table view only offers and downloads eligible snippets
[chromium-db-snippets] › cloud-download-eligibility.spec.ts:82:6 › Cloud bulk download eligibility › unlicensed table view only offers and downloads eligible snippets Error: expect(received).toEqual(expected) // deep equality
- Expected - 3
+ Received + 1
- Array [
- 101,
- ]
+ Array []
Call Log:
- Timeout 30000ms exceeded while waiting on the predicate
95 |
96 | await applyBulkDownload(page)
> 97 | await expect.poll(() => state.downloads).toEqual([ELIGIBLE.id])
| ^
98 | })
99 |
100 | test('unlicensed card view select-all only downloads eligible snippets', async ({ page }) => {
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:97:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(received).toEqual(expected) // deep equality
- Expected - 3
+ Received + 1
- Array [
- 101,
- ]
+ Array []
Call Log:
- Timeout 30000ms exceeded while waiting on the predicate
95 |
96 | await applyBulkDownload(page)
> 97 | await expect.poll(() => state.downloads).toEqual([ELIGIBLE.id])
| ^
98 | })
99 |
100 | test('unlicensed card view select-all only downloads eligible snippets', async ({ page }) => {
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:97:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry1/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry1/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry1/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry1/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(received).toEqual(expected) // deep equality
- Expected - 3
+ Received + 1
- Array [
- 101,
- ]
+ Array []
Call Log:
- Timeout 30000ms exceeded while waiting on the predicate
95 |
96 | await applyBulkDownload(page)
> 97 | await expect.poll(() => state.downloads).toEqual([ELIGIBLE.id])
| ^
98 | })
99 |
100 | test('unlicensed card view select-all only downloads eligible snippets', async ({ page }) => {
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-download-eligibility.spec.ts:97:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry2/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry2/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry2/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry2/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-download-eligibility-74235-downloads-eligible-snippets-chromium-db-snippets-retry2/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────

---

Affected Playwright test: all

FAILURE: cloud-library-demo.spec.ts:116:6 the walkthrough ends scrolled to the closing panel
[chromium-db-snippets] › cloud-library-demo.spec.ts:116:6 › Cloud Library demo › the walkthrough ends scrolled to the closing panel Error: expect(locator).toBeInViewport() failed
Locator: locator('.demo-upsell')
Expected: in viewport
Received: viewport ratio 0.9988135695457458
Timeout: 30000ms
Call log:
- Expect "toBeInViewport" with timeout 30000ms
- waiting for locator('.demo-upsell')
- locator resolved to <div class="demo-upsell">…</div>
- unexpected value "viewport ratio 0.36798393726348877"
- locator resolved to <div class="demo-upsell">…</div>
- unexpected value "viewport ratio 0.6133065819740295"
32 × locator resolved to <div class="demo-upsell">…</div>
- unexpected value "viewport ratio 0.9988135695457458"
125 | const closing = page.locator('.demo-upsell')
126 | await expect(closing).toBeVisible()
> 127 | await expect(closing).toBeInViewport({ ratio: 1 })
| ^
128 | })
129 |
130 | test('replaying returns the snippet to its undownloaded state', async ({ page }) => {
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-library-demo.spec.ts:127:25
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeInViewport() failed
Locator: locator('.demo-upsell')
Expected: in viewport
Received: viewport ratio 0.9988135695457458
Timeout: 30000ms
Call log:
- Expect "toBeInViewport" with timeout 30000ms
- waiting for locator('.demo-upsell')
- locator resolved to <div class="demo-upsell">…</div>
- unexpected value "viewport ratio 0.36798393726348877"
- locator resolved to <div class="demo-upsell">…</div>
- unexpected value "viewport ratio 0.6133065819740295"
32 × locator resolved to <div class="demo-upsell">…</div>
- unexpected value "viewport ratio 0.9988135695457458"
125 | const closing = page.locator('.demo-upsell')
126 | await expect(closing).toBeVisible()
> 127 | await expect(closing).toBeInViewport({ ratio: 1 })
| ^
128 | })
129 |
130 | test('replaying returns the snippet to its undownloaded state', async ({ page }) => {
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-library-demo.spec.ts:127:25
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry1/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry1/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry1/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry1/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeInViewport() failed
Locator: locator('.demo-upsell')
Expected: in viewport
Received: viewport ratio 0.9988135695457458
Timeout: 30000ms
Call log:
- Expect "toBeInViewport" with timeout 30000ms
- waiting for locator('.demo-upsell')
- locator resolved to <div class="demo-upsell">…</div>
- unexpected value "viewport ratio 0.36798393726348877"
- locator resolved to <div class="demo-upsell">…</div>
- unexpected value "viewport ratio 0.6133065819740295"
32 × locator resolved to <div class="demo-upsell">…</div>
- unexpected value "viewport ratio 0.9988135695457458"
125 | const closing = page.locator('.demo-upsell')
126 | await expect(closing).toBeVisible()
> 127 | await expect(closing).toBeInViewport({ ratio: 1 })
| ^
128 | })
129 |
130 | test('replaying returns the snippet to its undownloaded state', async ({ page }) => {
at /home/runner/work/code-snippets/code-snippets/tests/e2e/cloud-library-demo.spec.ts:127:25
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry2/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry2/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry2/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry2/trace.zip
Usage:
npx playwright show-trace ../../test-results/cloud-library-demo-Cloud-L-068be-rolled-to-the-closing-panel-chromium-db-snippets-retry2/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────

---

Affected Playwright test: all

FAILURE: code-snippets-insights.spec.ts:38:6 opens a zero-data dashboard from the upper toolbar
[chromium-db-snippets] › code-snippets-insights.spec.ts:38:6 › Insights screen › opens a zero-data dashboard from the upper toolbar Error: locator.click: Error: strict mode violation: getByRole('link', { name: 'Insights', exact: true }) resolved to 2 elements:
1) <a href="admin.php?page=code-snippets-insights">Insights</a> aka getByLabel('Main menu', { exact: true }).getByRole('link', { name: 'Insights' })
2) <a class="insights-link" href="http://localhost:8888/wp-admin/admin.php?page=code-snippets-insights">Insights</a> aka getByLabel('Main links').getByRole('link', { name: 'Insights' })
Call log:
- waiting for getByRole('link', { name: 'Insights', exact: true })
38 | test('opens a zero-data dashboard from the upper toolbar', async ({ page }) => {
39 | await page.goto(URLS.SNIPPETS_ADMIN)
> 40 | await page.getByRole('link', { name: 'Insights', exact: true }).click()
| ^
41 | const activationChart = page.locator('[data-insights-chart="activation"]')
42 | const totalChart = page.locator('[data-insights-chart="total"]')
43 |
at /home/runner/work/code-snippets/code-snippets/tests/e2e/code-snippets-insights.spec.ts:40:67
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets/trace.zip
Usage:
npx playwright show-trace ../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: locator.click: Error: strict mode violation: getByRole('link', { name: 'Insights', exact: true }) resolved to 2 elements:
1) <a href="admin.php?page=code-snippets-insights">Insights</a> aka getByLabel('Main menu', { exact: true }).getByRole('link', { name: 'Insights' })
2) <a class="insights-link" href="http://localhost:8888/wp-admin/admin.php?page=code-snippets-insights">Insights</a> aka getByLabel('Main links').getByRole('link', { name: 'Insights' })
Call log:
- waiting for getByRole('link', { name: 'Insights', exact: true })
38 | test('opens a zero-data dashboard from the upper toolbar', async ({ page }) => {
39 | await page.goto(URLS.SNIPPETS_ADMIN)
> 40 | await page.getByRole('link', { name: 'Insights', exact: true }).click()
| ^
41 | const activationChart = page.locator('[data-insights-chart="activation"]')
42 | const totalChart = page.locator('[data-insights-chart="total"]')
43 |
at /home/runner/work/code-snippets/code-snippets/tests/e2e/code-snippets-insights.spec.ts:40:67
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry1/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry1/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry1/trace.zip
Usage:
npx playwright show-trace ../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry1/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: locator.click: Error: strict mode violation: getByRole('link', { name: 'Insights', exact: true }) resolved to 2 elements:
1) <a href="admin.php?page=code-snippets-insights">Insights</a> aka getByLabel('Main menu', { exact: true }).getByRole('link', { name: 'Insights' })
2) <a class="insights-link" href="http://localhost:8888/wp-admin/admin.php?page=code-snippets-insights">Insights</a> aka getByLabel('Main links').getByRole('link', { name: 'Insights' })
Call log:
- waiting for getByRole('link', { name: 'Insights', exact: true })
38 | test('opens a zero-data dashboard from the upper toolbar', async ({ page }) => {
39 | await page.goto(URLS.SNIPPETS_ADMIN)
> 40 | await page.getByRole('link', { name: 'Insights', exact: true }).click()
| ^
41 | const activationChart = page.locator('[data-insights-chart="activation"]')
42 | const totalChart = page.locator('[data-insights-chart="total"]')
43 |
at /home/runner/work/code-snippets/code-snippets/tests/e2e/code-snippets-insights.spec.ts:40:67
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry2/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry2/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry2/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry2/trace.zip
Usage:
npx playwright show-trace ../../test-results/code-snippets-insights-Ins-57802-oard-from-the-upper-toolbar-chromium-db-snippets-retry2/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────

---

Affected Playwright test: all

FAILURE: code-snippets-notice-filter.spec.ts:34:6 Filters foreign notices from the settings page
[chromium-db-snippets] › code-snippets-notice-filter.spec.ts:34:6 › Code Snippets admin notice filtering › Filters foreign notices from the settings page Error: expect(locator).toHaveCSS(expected) failed
Locator: locator('.settings-section:visible input[type="checkbox"]:not(.switch)').first()
Expected: "#2271b1"
Received: "rgb(34, 113, 177)"
Timeout: 30000ms
Call log:
- Expect "toHaveCSS" with timeout 30000ms
- waiting for locator('.settings-section:visible input[type="checkbox"]:not(.switch)').first()
34 × locator resolved to <input type="checkbox" checked="checked" name="code_snippets_settings[general][activate_by_default]"/>
- unexpected value "rgb(34, 113, 177)"
at helpers/checkbox.ts:12
10 | export const expectCanonicalCheckbox = async (checkbox: Locator): Promise<void> => {
11 | await expect(checkbox).toHaveCSS('width', '20px')
> 12 | await expect(checkbox).toHaveCSS(
| ^
13 | 'border-top-color',
14 | await checkbox.isChecked() ? '#2271b1' : '#c3c4c7'
15 | )
at expectCanonicalCheckbox (/home/runner/work/code-snippets/code-snippets/tests/e2e/helpers/checkbox.ts:12:25)
at /home/runner/work/code-snippets/code-snippets/tests/e2e/code-snippets-notice-filter.spec.ts:69:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets/trace.zip
Usage:
npx playwright show-trace ../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveCSS(expected) failed
Locator: locator('.settings-section:visible input[type="checkbox"]:not(.switch)').first()
Expected: "#2271b1"
Received: "rgb(34, 113, 177)"
Timeout: 30000ms
Call log:
- Expect "toHaveCSS" with timeout 30000ms
- waiting for locator('.settings-section:visible input[type="checkbox"]:not(.switch)').first()
34 × locator resolved to <input type="checkbox" checked="checked" name="code_snippets_settings[general][activate_by_default]"/>
- unexpected value "rgb(34, 113, 177)"
at helpers/checkbox.ts:12
10 | export const expectCanonicalCheckbox = async (checkbox: Locator): Promise<void> => {
11 | await expect(checkbox).toHaveCSS('width', '20px')
> 12 | await expect(checkbox).toHaveCSS(
| ^
13 | 'border-top-color',
14 | await checkbox.isChecked() ? '#2271b1' : '#c3c4c7'
15 | )
at expectCanonicalCheckbox (/home/runner/work/code-snippets/code-snippets/tests/e2e/helpers/checkbox.ts:12:25)
at /home/runner/work/code-snippets/code-snippets/tests/e2e/code-snippets-notice-filter.spec.ts:69:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry1/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry1/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry1/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry1/trace.zip
Usage:
npx playwright show-trace ../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry1/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveCSS(expected) failed
Locator: locator('.settings-section:visible input[type="checkbox"]:not(.switch)').first()
Expected: "#2271b1"
Received: "rgb(34, 113, 177)"
Timeout: 30000ms
Call log:
- Expect "toHaveCSS" with timeout 30000ms
- waiting for locator('.settings-section:visible input[type="checkbox"]:not(.switch)').first()
34 × locator resolved to <input type="checkbox" checked="checked" name="code_snippets_settings[general][activate_by_default]"/>
- unexpected value "rgb(34, 113, 177)"
at helpers/checkbox.ts:12
10 | export const expectCanonicalCheckbox = async (checkbox: Locator): Promise<void> => {
11 | await expect(checkbox).toHaveCSS('width', '20px')
> 12 | await expect(checkbox).toHaveCSS(
| ^
13 | 'border-top-color',
14 | await checkbox.isChecked() ? '#2271b1' : '#c3c4c7'
15 | )
at expectCanonicalCheckbox (/home/runner/work/code-snippets/code-snippets/tests/e2e/helpers/checkbox.ts:12:25)
at /home/runner/work/code-snippets/code-snippets/tests/e2e/code-snippets-notice-filter.spec.ts:69:3
attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry2/test-failed-1.png
────────────────────────────────────────────────────────────────────────────────────────────────
attachment #2: video (video/webm) ──────────────────────────────────────────────────────────────
../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry2/video.webm
────────────────────────────────────────────────────────────────────────────────────────────────
Error Context: ../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry2/error-context.md
attachment #4: trace (application/zip) ─────────────────────────────────────────────────────────
../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry2/trace.zip
Usage:
npx playwright show-trace ../../test-results/code-snippets-notice-filte-49445-ices-from-the-settings-page-chromium-db-snippets-retry2/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────

---

Please review the failing jobs and fix the issues before merging.