The website is loading, and the App Viewer is working normally, give it a moment. If it takes longer than 2 minutes, click the Refresh icon or check the Console panel for errors.

Agents can hit issues during the build, which occasionally causes webpage errors. Click Resolve and the agents repair it for you; once fixed, the preview returns to normal. Red messages are a signal, not a crisis.

Badge removal requires Pro or higher. Click your avatar in the top-right corner, select Settings, then go to Plans & Billing and choose the Pro or Max plan. Once upgraded, the Atoms badge is automatically removed from your published pages.

1. Open Design Mode and select the exact element that is misaligned or styled incorrectly.
2. State the page and breakpoint, the current problem, the desired result, and what must not change.
3. Use measurable instructions such as padding, alignment, width, color, or wrapping behavior. Attach a reference image when visual matching matters.
4. Apply one change, then verify desktop and mobile layouts plus important states such as loading, empty, hover, and error.
5. If the result breaks another area, return to the last working version and retry with a narrower target.

1. Confirm whether the problem affects only App Viewer, the Preview URL, or the published site as well.
2. Refresh once, open the Preview in a new tab, and test an Incognito window.
3. Check whether the current task or build is still running. Wait for it to finish before retrying.
4. If an explicit message says the Cloud & AI balance is insufficient or the app is suspended, open Settings → Cloud & AI and review that balance. Do not top up based on a blank screen alone.
5. Record any Console or Network error without sharing cookies, tokens, or secret values.

If the screen remains blank, contact Support with the Chat Link, full Viewer URL, time and timezone, affected environments, screenshot, and sanitized error details.

1. Check whether only App Viewer, the Preview URL, or the published site is affected.
2. Refresh once, open the Preview in a new tab, and test an Incognito window.
3. Check whether the current task or build is still running and wait for it to finish.
4. Test the last known working version. If that works, compare the recent change that introduced the blank screen.
5. Open Settings → Cloud & AI only when the product explicitly reports an insufficient balance or suspended app.

If the issue continues, contact Support with the Chat Link, full Viewer URL, version, time and timezone, affected environments, screenshot, and sanitized Console or Network error.

Preview and the published site are independent channels. Saving or previewing does not push changes to production.

1. Click Update in the Publish panel — Open the Publish panel and click Update. Wait until the status shows Up to date.
2. Hard refresh the live site — Press Cmd+Shift+R (Mac) or Ctrl+F5 (Windows), or open the URL in an Incognito window to rule out browser cache.
3. Check the published version number — In the Publish panel, confirm the version matches what you see in Preview. If they differ, publish again.
4. Test the platform Prod subdomain — If you use a custom domain, open the default Prod URL separately. If the Prod subdomain is updated but the custom domain is not, the issue is DNS or CDN caching.

If the issue persists, provide the Preview URL, Prod URL, side-by-side comparison screenshots, and the time you clicked Publish or Update.

When the agent modifies layout or styling, it may unintentionally break responsive behavior on smaller screens.

1. Preview at mobile width first — Use the device toggle in the App Viewer toolbar to switch to mobile view and check the result before publishing.
2. Use Design Mode on mobile view — Switch to Design Mode while the device toggle is set to mobile. Click the broken element so the agent targets only that component at that screen size.
3. Provide explicit responsive constraints — Tell the agent exactly what the mobile layout should look like. Example: "On screens narrower than 768px, stack the cards in a single column and set padding to 16px."
4. Ask the agent to preserve existing media queries — When requesting desktop changes, add: "Do not modify any existing responsive or mobile styles."

If the issue persists, provide the Chat Link, a screenshot of the broken mobile layout, and a reference image of the expected layout.

If images appear broken, show placeholder icons, or fail to load:

1. Check image file paths — Open the Files section and verify the image files exist at the paths referenced in your code. The agent may have moved or renamed files during edits.
2. Verify file size and format — Very large images or unsupported formats may fail to load. Compress images or convert to PNG, JPG, or WebP.
3. Check Cloud storage — Go to Settings > Cloud & AI to confirm you have available storage space.
4. Hard refresh — Press Cmd+Shift+R (Mac) or Ctrl+F5 (Windows) to clear cached image references.

If the issue persists, provide the Chat Link, the URL of the missing image, and a screenshot of the broken state.

When the agent modifies unrelated elements or introduces regressions in other parts of the page:

1. Roll back — Go to History and Remix from the last stable version. This resets the chat context while preserving your code.
2. Use Design Mode to isolate — Switch to Design Mode and click directly on the specific element. This anchors the agent's edit scope to that component.
3. Add explicit constraints — Clearly state what must NOT change. Example: "Change only the header background color to #1A365D. Do not modify the navigation bar, footer, or any other component."
4. One change per prompt — Make one change, verify the result, then proceed to the next.

If the agent repeatedly regresses other elements, Remix from a stable version and re-approach with a tightly scoped instruction.

If the Preview panel shows a build error, a red error banner, or a message about missing packages:

1. Use the Resolve button — If an Issue Report notification appears in the App Viewer, click Resolve and the AI analyzes and fixes all identified errors automatically. If no Resolve button appears, copy the exact error message from the Console panel and paste it to the agent with: "Fix this build error: [error message]."
2. Check recent changes — If the error appeared after a specific edit, go to History and compare with the last working version to identify which change caused the break.
3. Remix from the last working version — If the error is hard to resolve, Remix from your last successful checkpoint and re-apply changes incrementally.
4. Check package compatibility — If the error references a specific package, ask the agent: "Check whether [package name] is compatible with the current project setup and fix any version conflicts."

Note: If the error message references platform components (App Viewer, startup script, Publish, deploy record) or third-party package internal files (e.g., @vue/compiler-core, vite), this may be a platform issue rather than an agent issue. Contact Support with the full error message.

If the issue persists, provide the full error message, the Chat Link, and a screenshot of the error.

If the agent confirms the change is done but the visual result has not changed:

1. Hard refresh — Press Cmd+Shift+R (Mac) or Ctrl+F5 (Windows). CSS changes are frequently cached by the browser.
2. Check for CSS specificity conflicts — The agent may have added styles that are overridden by existing rules. Ask the agent: "Check whether the style I requested is being overridden by another CSS rule, and fix the specificity if needed."
3. Use Design Mode to inspect — Switch to Design Mode and click the element. The visual editor on the left shows currently applied colors, spacing, typography, and layout properties, so you can see whether your requested change was applied.
4. Verify the correct file — For projects with both global stylesheets and component-level styles, the agent may have edited the wrong file. Ask: "Where did you apply the change? Show me the file path and line."

If the issue persists, provide the Chat Link, a screenshot of the unchanged element, and the exact style values you requested.

Design Mode uses the visual layout to determine which component you are targeting. Nested or overlapping elements can cause incorrect selection.

1. Zoom in — Zoom into the area before clicking. This helps distinguish closely nested components.
2. Use text description as backup — If clicking repeatedly selects the wrong element, describe it in the chat instead. Example: "Select the second button inside the pricing card in the right column."
3. Reference by file path — If you know which file contains the component, tell the agent directly: "Edit the element in src/components/PricingCard.tsx, line 42."

If selection issues persist, provide a screenshot highlighting the element you want and the Chat Link.