fix: E2E test stability and UI performance improvements#823
fix: E2E test stability and UI performance improvements#823gsxdsm merged 2 commits intoAutoMaker-Org:v1.0.0rcfrom
Conversation
- Fix sandbox warning dialog blocking pointer events in E2E tests by dismissing it in agent-output-modal-responsive and success-log-contrast specs - Set skipSandboxWarning in test project setup localStorage cache - Add eslint-disable for empty destructuring pattern in feature-deep-link spec - Fix event-hooks-settings spec: wait for success toast before asserting dialog hidden, update empty state text, use Playwright .or() instead of Promise.race for locator matching - Remove stale eslint-disable comment in use-board-effects hook - Cap dev server log buffer at 50KB to prevent unbounded memory growth - Memoize line count calculation in DevServerLogsPanel to avoid repeated string splits on every render
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the application's reliability and user experience by resolving E2E test flakiness and boosting UI performance. The changes ensure that automated tests run more consistently and that the dev server logs panel remains responsive even with extensive output, preventing memory-related slowdowns. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
📝 WalkthroughWalkthroughIntroduces in-memory log buffering with trimming and versioning, memoizes log line counting in the UI, removes an ESLint suppression, and adds test utilities and setup flags to dismiss an intermittent sandbox warning and stabilize tests. Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces several valuable improvements to E2E test stability and UI performance. My review focuses on a couple of areas for further refinement. I've suggested a more robust log truncation method to prevent potential rendering issues in the dev server logs. Additionally, I've pointed out an opportunity to refactor duplicated code in the E2E tests into a shared helper function for better maintainability. The other changes, including performance optimizations and test reliability fixes, look solid.
| if (newLogs.length > MAX_LOG_BUFFER_SIZE) { | ||
| newLogs = newLogs.slice(-MAX_LOG_BUFFER_SIZE); | ||
| } |
There was a problem hiding this comment.
The current log truncation logic using slice(-MAX_LOG_BUFFER_SIZE) can cut lines in the middle, and potentially break multi-byte characters or ANSI escape sequences, leading to corrupted output at the beginning of the log buffer. To make this more robust, you could find the first newline character after the truncation point and slice from there, ensuring only full lines are discarded.
if (newLogs.length > MAX_LOG_BUFFER_SIZE) {
const slicePoint = newLogs.length - MAX_LOG_BUFFER_SIZE;
// Find the next newline character after the slice point to avoid cutting a line in half.
const firstNewlineIndex = newLogs.indexOf('\n', slicePoint);
newLogs = newLogs.slice(firstNewlineIndex > -1 ? firstNewlineIndex + 1 : slicePoint);
}| // Dismiss sandbox warning dialog if it appears (blocks pointer events) | ||
| const sandboxAcceptBtn = page.locator('button:has-text("I Accept the Risks")'); | ||
| const sandboxVisible = await sandboxAcceptBtn | ||
| .waitFor({ state: 'visible', timeout: 2000 }) | ||
| .then(() => true) | ||
| .catch(() => false); | ||
| if (sandboxVisible) { | ||
| await sandboxAcceptBtn.click(); | ||
| await page | ||
| .locator('[role="dialog"][data-state="open"]') | ||
| .first() | ||
| .waitFor({ state: 'hidden', timeout: 3000 }) | ||
| .catch(() => {}); | ||
| } |
There was a problem hiding this comment.
This block of code for dismissing the sandbox warning dialog is duplicated in apps/ui/tests/features/success-log-contrast.spec.ts. To improve maintainability and reduce code duplication, consider extracting this logic into a reusable helper function within your test utilities (e.g., in apps/ui/tests/utils/components/dialogs.ts).
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/ui/tests/settings/event-hooks-settings.spec.ts (1)
227-229: Avoid hardcoded toast timeout value.Please move
10000into the localTIMEOUTSobject (e.g.,toastVisible) to keep timeout tuning centralized and reduce drift.♻️ Suggested small cleanup
const TIMEOUTS = { sectionVisible: 10000, dialogVisible: 5000, dialogHidden: 5000, endpointVisible: 5000, + toastVisible: 10000, } as const; @@ - await waitForSuccessToast(page, 'Endpoint added', { timeout: 10000 }); + await waitForSuccessToast(page, 'Endpoint added', { + timeout: TIMEOUTS.toastVisible, + });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/tests/settings/event-hooks-settings.spec.ts` around lines 227 - 229, Replace the hardcoded 10000 timeout passed to waitForSuccessToast with a named constant in the local TIMEOUTS object (e.g., add TIMEOUTS.toastVisible) and use TIMEOUTS.toastVisible when calling waitForSuccessToast in the test; update any nearby TIMEOUTS declaration and any other toast timeout usages to use this new key so timeout tuning is centralized (reference: waitForSuccessToast call and the local TIMEOUTS object in event-hooks-settings.spec.ts).apps/ui/tests/features/success-log-contrast.spec.ts (1)
112-125: Extract sandbox-warning dismissal into a shared test helper.This block is now duplicated across specs; centralizing it will keep selectors/timeouts consistent and reduce future flake drift.
♻️ Suggested extraction
- // Dismiss sandbox warning dialog if it appears (blocks pointer events) - const sandboxAcceptBtn = page.locator('button:has-text("I Accept the Risks")'); - const sandboxVisible = await sandboxAcceptBtn - .waitFor({ state: 'visible', timeout: 2000 }) - .then(() => true) - .catch(() => false); - if (sandboxVisible) { - await sandboxAcceptBtn.click(); - await page - .locator('[role="dialog"][data-state="open"]') - .first() - .waitFor({ state: 'hidden', timeout: 3000 }) - .catch(() => {}); - } + await dismissSandboxWarningIfPresent(page);// tests/utils (example helper) export async function dismissSandboxWarningIfPresent(page: Page): Promise<void> { const sandboxAcceptBtn = page.locator('button:has-text("I Accept the Risks")'); const sandboxVisible = await sandboxAcceptBtn .waitFor({ state: 'visible', timeout: 2000 }) .then(() => true) .catch(() => false); if (!sandboxVisible) return; await sandboxAcceptBtn.click(); await page .locator('[role="dialog"][data-state="open"]') .first() .waitFor({ state: 'hidden', timeout: 3000 }) .catch(() => {}); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/tests/features/success-log-contrast.spec.ts` around lines 112 - 125, Duplicate sandbox-warning dismissal logic is present; extract it into a shared test helper (e.g., dismissSandboxWarningIfPresent) and replace the inline block in tests with a call to that helper. Implement a function that locates 'button:has-text("I Accept the Risks")' as sandboxAcceptBtn, waits up to 2000ms for visibility, returns early if not visible, clicks when visible, then waits for the '[role="dialog"][data-state="open"]' first() to become hidden (3000ms) and swallows errors the same way as the original snippet so existing timeout behavior and selectors remain identical; update specs to import and invoke dismissSandboxWarningIfPresent(page) instead of duplicating the logic.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts`:
- Around line 146-155: The current append logic inside setState (updating
prev.logs -> newLogs and slicing when exceeding MAX_LOG_BUFFER_SIZE) can produce
same-length strings after trimming so the panel’s incremental writer ignores
updates; modify this update to also emit truncation metadata (e.g., increment a
logsVersion or set a didTrim flag) whenever newLogs is sliced so consumers can
detect a buffer shift—update the state shape returned by the setState call to
include the new logsVersion/didTrim field and ensure DevServerLogsPanel listens
to logsVersion or didTrim (not just logs.length) to trigger a full rewrite when
trimming occurs.
---
Nitpick comments:
In `@apps/ui/tests/features/success-log-contrast.spec.ts`:
- Around line 112-125: Duplicate sandbox-warning dismissal logic is present;
extract it into a shared test helper (e.g., dismissSandboxWarningIfPresent) and
replace the inline block in tests with a call to that helper. Implement a
function that locates 'button:has-text("I Accept the Risks")' as
sandboxAcceptBtn, waits up to 2000ms for visibility, returns early if not
visible, clicks when visible, then waits for the
'[role="dialog"][data-state="open"]' first() to become hidden (3000ms) and
swallows errors the same way as the original snippet so existing timeout
behavior and selectors remain identical; update specs to import and invoke
dismissSandboxWarningIfPresent(page) instead of duplicating the logic.
In `@apps/ui/tests/settings/event-hooks-settings.spec.ts`:
- Around line 227-229: Replace the hardcoded 10000 timeout passed to
waitForSuccessToast with a named constant in the local TIMEOUTS object (e.g.,
add TIMEOUTS.toastVisible) and use TIMEOUTS.toastVisible when calling
waitForSuccessToast in the test; update any nearby TIMEOUTS declaration and any
other toast timeout usages to use this new key so timeout tuning is centralized
(reference: waitForSuccessToast call and the local TIMEOUTS object in
event-hooks-settings.spec.ts).
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/ui/src/components/views/board-view/hooks/use-board-effects.tsapps/ui/src/components/views/board-view/worktree-panel/components/dev-server-logs-panel.tsxapps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.tsapps/ui/tests/features/feature-deep-link.spec.tsapps/ui/tests/features/responsive/agent-output-modal-responsive.spec.tsapps/ui/tests/features/success-log-contrast.spec.tsapps/ui/tests/settings/event-hooks-settings.spec.tsapps/ui/tests/utils/project/setup.ts
💤 Files with no reviewable changes (1)
- apps/ui/src/components/views/board-view/hooks/use-board-effects.ts
apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts
Show resolved
Hide resolved
- Slice log buffer at newline boundaries to avoid cutting lines in half - Add logsVersion/didTrim metadata to DevServerLogState so the panel's incremental writer detects buffer shifts and triggers a full rewrite - Extract sandbox warning dismissal into shared dismissSandboxWarningIfVisible() helper in test utils to reduce duplication
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts (1)
14-17:logsVersioncontract is broader than current updates.Line 14 says
logsVersionchanges wheneverlogschanges, but onlyappendLogsincrements it. Direct replacements (e.g., in fetch/start handlers) updatelogswithout bumpinglogsVersionor clearingdidTrim, which can desync metadata from content.Suggested direction
// When setting logs outside appendLogs, keep metadata in sync: setState((prev) => ({ ...prev, logs: nextLogs, + logsVersion: prev.logsVersion + 1, + didTrim: false, }));Apply this pattern to all direct
logsassignments (including initial fetch and restart-clear paths), or centralize log writes in a small helper.Also applies to: 62-63, 135-136
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts` around lines 14 - 17, The comment points out that logsVersion and didTrim are only updated in appendLogs, but other code paths directly assign to logs (initial fetch, restart/clear handlers) without updating these metadata fields; fix by centralizing all mutations of logs into a single helper (e.g., a setLogsWithMeta or normalizeLogsUpdate) or by ensuring every direct assignment to logs (including initial fetch handler, restart/clear paths, and any replace operations) also increments logsVersion and sets/clears didTrim consistently; update references to appendLogs, logsVersion, didTrim, and any fetch/start/restart handlers to use the new helper or to perform the same metadata updates so content and metadata stay in sync.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/ui/tests/utils/components/dialogs.ts`:
- Around line 19-22: The waitFor call currently uses
.locator('[role="dialog"][data-state="open"]').first().waitFor(...) which
targets the first global open dialog and swallows errors via .catch(() => {});
update the selector to scope to the sandbox dialog that contains the accept
button (e.g., locate the accept button and call locator('..') or use a
has/hasText filter to target the dialog that contains that button) and remove
the .catch so the waitFor timeout will throw on failure; ensure you keep the
.waitFor({ state: 'hidden', timeout: 3000 }) invocation but let its errors
surface instead of being caught silently.
---
Nitpick comments:
In
`@apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts`:
- Around line 14-17: The comment points out that logsVersion and didTrim are
only updated in appendLogs, but other code paths directly assign to logs
(initial fetch, restart/clear handlers) without updating these metadata fields;
fix by centralizing all mutations of logs into a single helper (e.g., a
setLogsWithMeta or normalizeLogsUpdate) or by ensuring every direct assignment
to logs (including initial fetch handler, restart/clear paths, and any replace
operations) also increments logsVersion and sets/clears didTrim consistently;
update references to appendLogs, logsVersion, didTrim, and any
fetch/start/restart handlers to use the new helper or to perform the same
metadata updates so content and metadata stay in sync.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/ui/src/components/views/board-view/worktree-panel/components/dev-server-logs-panel.tsxapps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.tsapps/ui/tests/features/responsive/agent-output-modal-responsive.spec.tsapps/ui/tests/features/success-log-contrast.spec.tsapps/ui/tests/utils/components/dialogs.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/ui/tests/features/success-log-contrast.spec.ts
- apps/ui/tests/features/responsive/agent-output-modal-responsive.spec.ts
- apps/ui/src/components/views/board-view/worktree-panel/components/dev-server-logs-panel.tsx
| .locator('[role="dialog"][data-state="open"]') | ||
| .first() | ||
| .waitFor({ state: 'hidden', timeout: 3000 }) | ||
| .catch(() => {}); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, check the actual file structure and lines in question
echo "=== File content: apps/ui/tests/utils/components/dialogs.ts ==="
cat -n apps/ui/tests/utils/components/dialogs.tsRepository: AutoMaker-Org/automaker
Length of output: 7804
🏁 Script executed:
#!/bin/bash
# Verify how this helper is used
echo "=== Usage of dismissSandboxWarningIfVisible ==="
rg -n -C3 'dismissSandboxWarningIfVisible\(' apps/ui/tests 2>/dev/null || echo "No matches found"
echo -e "\n=== Silent catch patterns in dialogs.ts ==="
rg -n -C3 'waitFor\(\{ state: .hidden.|catch\(\(\) => \{\}\)' apps/ui/tests/utils/components/dialogs.ts 2>/dev/null || echo "No matches found"Repository: AutoMaker-Org/automaker
Length of output: 2669
🏁 Script executed:
#!/bin/bash
# Check for other similar patterns in test utilities
echo "=== Other silent catch patterns in test utils ==="
rg -n 'catch\(\(\) => \{\}\)' apps/ui/tests/ --type ts --type tsx 2>/dev/null | head -20 || echo "Pattern search failed"Repository: AutoMaker-Org/automaker
Length of output: 116
Scope dialog dismissal to the specific sandbox dialog and expose timeout failures.
Line 19 targets the first open dialog globally via .first(), and line 22's silent catch hides timeout errors. If the sandbox dialog fails to close, the error is masked—but subsequent tests will fail with pointer-blocking errors, introducing hard-to-debug flakiness. Filter the wait to the specific dialog containing the accept button and remove the silent catch so dismissal failures surface immediately.
Proposed fix
export async function dismissSandboxWarningIfVisible(page: Page): Promise<void> {
const sandboxAcceptBtn = page.locator('button:has-text("I Accept the Risks")');
+ const sandboxDialog = page.locator('[role="dialog"]').filter({ has: sandboxAcceptBtn });
const sandboxVisible = await sandboxAcceptBtn
.waitFor({ state: 'visible', timeout: 2000 })
.then(() => true)
.catch(() => false);
if (sandboxVisible) {
await sandboxAcceptBtn.click();
- await page
- .locator('[role="dialog"][data-state="open"]')
- .first()
- .waitFor({ state: 'hidden', timeout: 3000 })
- .catch(() => {});
+ await sandboxDialog.waitFor({ state: 'hidden', timeout: 3000 });
}
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/ui/tests/utils/components/dialogs.ts` around lines 19 - 22, The waitFor
call currently uses
.locator('[role="dialog"][data-state="open"]').first().waitFor(...) which
targets the first global open dialog and swallows errors via .catch(() => {});
update the selector to scope to the sandbox dialog that contains the accept
button (e.g., locate the accept button and call locator('..') or use a
has/hasText filter to target the dialog that contains that button) and remove
the .catch so the waitFor timeout will throw on failure; ensure you keep the
.waitFor({ state: 'hidden', timeout: 3000 }) invocation but let its errors
surface instead of being caught silently.
1 participant
Summary
Fixes E2E test flakiness and improves UI performance in the dev server logs panel.
E2E Test Fixes
agent-output-modal-responsiveandsuccess-log-contrastspecs — it was blocking pointer events and causing test failuresskipSandboxWarning: truein the test project localStorage cache to prevent the dialog from appearingNo ntfy endpoints configured), and use Playwright.or()instead ofPromise.racefor more reliable locator matchingeslint-disablefor empty destructuring pattern inbeforeEachcallbackUI Performance
MAX_SCROLLBACK_SIZE) to prevent unbounded memory growth and progressive UI lag from long-running dev serversuseMemowith a character-scanning approach instead ofString.split()on every render inDevServerLogsPanelCleanup
eslint-disable-next-line react-hooks/exhaustive-depscomment inuse-board-effectshookSummary by CodeRabbit
Improvements
Tests