fix: add custom fallback to AIChatPanel ErrorBoundary

[Somil450]

Summary

Closes #526
Adds a dedicated crash fallback UI to the AIChatPanel ErrorBoundary in playground-modals.tsx.

Context

Both ErrorBoundary wraps were already in place:

• Monaco Editor - had a full custom fallback with "Editor crashed" + "Reload Editor" button
• • AIChatPanel - had ErrorBoundary but no custom fallback, falling back to the generic "Something went wrong" message

Change

// modules/playground/components/playground-modals.tsx

-<ErrorBoundary name="AIChatPanel">
+<ErrorBoundary
+  name="AIChatPanel"
+  fallback={({ reset }) => (
+    <div className="fixed bottom-4 right-4 z-50 max-w-xs rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-center shadow-lg">
+      <p className="mb-2 text-sm font-medium text-destructive">AI Chat crashed</p>
+      <button onClick={reset} className="text-xs underline text-muted-foreground hover:text-foreground">
+        Reload Chat
+      </button>
+    </div>
+  )}
+>
   <AIChatPanel ... />
 </ErrorBoundary>

The fallback is position: fixed so it floats at the bottom-right where the chat sheet would normally appear, giving users a clear recovery path without affecting the rest of the playground.

Files Changed

• modules/playground/components/playground-modals.tsx - 13 lines added

[coderabbitai]

Warning

Review limit reached

@Somil450, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 25 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: dacd04a2-1a20-4f91-a729-c27e9018a9fa

📥 Commits

Reviewing files that changed from the base of the PR and between 4ffe26f and aa57220.

📒 Files selected for processing (1)

• modules/playground/components/playground-modals.tsx

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

👋 Thanks for opening a PR, @Somil450!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[qodo-code-review]

PR Summary by Qodo

Add AI Chat crash fallback UI to PlaygroundModals ErrorBoundary

🐞 Bug fix 🕐 10-20 Minutes

AI Description

• Add a dedicated fallback UI for the AIChatPanel ErrorBoundary.
• Provide a "Reload Chat" reset action without disrupting the rest of the playground.

Diagram

graph TD
  A["PlaygroundModals"] --> B["ErrorBoundary (AIChatPanel)"] --> C["AIChatPanel"]
  B --> D["Fallback UI (fixed)"] --> E["Reload Chat (reset)"] --> B

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Standardize named fallbacks in ErrorBoundary

• ➕ Avoids inline JSX duplication across panels (editor/chat/others)
• ➕ Encourages consistent error UX patterns
• ➖ Requires extending ErrorBoundary API and agreeing on global UX defaults
• ➖ More refactor than needed for a targeted fix

2. Use the app's toast/notification system for crash recovery

• ➕ Consistent look/behavior with other transient UI notifications
• ➕ Potentially reusable for other non-fatal panel errors
• ➖ May be harder to guarantee visibility/persistence vs a dedicated fallback render
• ➖ Could introduce extra dependencies/complexity for a simple panel-only recovery

Recommendation: The PR’s inline fallback is appropriate for a localized, low-risk fix and provides an immediate recovery path. If more panels need bespoke crash UX, consider standardizing named fallbacks (or a shared component) to reduce repetition and enforce consistency.

Files changed (1) +14 / -1

Bug fix (1) +14 / -1

playground-modals.tsxAdd fixed-position AIChatPanel crash fallback with reset +14/-1

Add fixed-position AIChatPanel crash fallback with reset

• Adds a custom ErrorBoundary fallback for AIChatPanel that displays a bottom-right floating "AI Chat crashed" message. Includes a "Reload Chat" button wired to the ErrorBoundary reset to allow recovery without impacting other playground overlays.

modules/playground/components/playground-modals.tsx

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

_{To customize comments, go to the Qodo configuration screen, or learn more in the docs.}