fix: add error boundary to PendingReviewsBanner for corrupted data

- Add BannerErrorBoundary class component to catch rendering errors
- Show 'Reviews data corrupted' message with clear button on error
- Add clearAll() method to usePendingReviews hook
- Wire up onClearAll prop through AIView

Handles old localStorage format gracefully by catching render errors
rather than requiring migration logic.

Author: ammar-agent

src/browser/components/AIView.tsx

@@ -631,6 +631,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           onSendToChat={handleSendReviewToChat}
           onRemove={pendingReviews.removeReview}
           onClearChecked={pendingReviews.clearChecked}
+          onClearAll={pendingReviews.clearAll}
         />
         <ChatInput
           variant="workspace"

src/browser/components/PendingReviewsBanner.tsx

@@ -6,7 +6,7 @@
  * that map to CSS variables defined in globals.css.
  */
 
-import React, { useState, useCallback, useMemo } from "react";
+import React, { useState, useCallback, useMemo, Component, type ReactNode } from "react";
 import {
   ChevronDown,
   ChevronUp,
@@ -17,12 +17,55 @@ import {
   MessageSquare,
   Eye,
   EyeOff,
+  AlertTriangle,
 } from "lucide-react";
 import { cn } from "@/common/lib/utils";
 import { Button } from "./ui/button";
 import { Tooltip, TooltipWrapper } from "./Tooltip";
 import type { PendingReview, ReviewNoteData } from "@/common/types/review";
 
+/**
+ * Error boundary for the banner - catches rendering errors from malformed data
+ */
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class BannerErrorBoundary extends Component<
+  { children: ReactNode; onClear: () => void },
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="border-border bg-dark flex items-center gap-2 border-t px-3 py-1.5 text-xs">
+          <AlertTriangle className="text-warning size-3.5" />
+          <span className="text-muted">Reviews data corrupted</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-error h-5 px-2 text-xs"
+            onClick={() => {
+              this.props.onClear();
+              this.setState({ hasError: false });
+            }}
+          >
+            <Trash2 className="mr-1 h-3 w-3" />
+            Clear all
+          </Button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 interface PendingReviewsBannerProps {
   /** All reviews (pending and checked) */
   reviews: PendingReview[];
@@ -40,6 +83,8 @@ interface PendingReviewsBannerProps {
   onRemove: (reviewId: string) => void;
   /** Clear all checked reviews */
   onClearChecked: () => void;
+  /** Clear all reviews (used for error recovery) */
+  onClearAll: () => void;
 }
 
 /**
@@ -122,7 +167,7 @@ const ReviewItem: React.FC<{
   );
 };
 
-export const PendingReviewsBanner: React.FC<PendingReviewsBannerProps> = ({
+const PendingReviewsBannerInner: React.FC<PendingReviewsBannerProps> = ({
   reviews,
   pendingCount,
   checkedCount,
@@ -249,3 +294,14 @@ export const PendingReviewsBanner: React.FC<PendingReviewsBannerProps> = ({
     </div>
   );
 };
+
+/**
+ * Exported component wrapped in error boundary
+ */
+export const PendingReviewsBanner: React.FC<PendingReviewsBannerProps> = (props) => {
+  return (
+    <BannerErrorBoundary onClear={props.onClearAll}>
+      <PendingReviewsBannerInner {...props} />
+    </BannerErrorBoundary>
+  );
+};

src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx

@@ -32,7 +32,11 @@ import { parseDiff, extractAllHunks, buildGitDiffCommand } from "@/common/utils/
 import { getReviewSearchStateKey } from "@/common/constants/storage";
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/browser/components/ui/tooltip";
 import { parseNumstat, buildFileTree, extractNewPath } from "@/common/utils/git/numstatParser";
-import type { DiffHunk, ReviewFilters as ReviewFiltersType, ReviewNoteData } from "@/common/types/review";
+import type {
+  DiffHunk,
+  ReviewFilters as ReviewFiltersType,
+  ReviewNoteData,
+} from "@/common/types/review";
 import type { FileTreeNode } from "@/common/utils/git/numstatParser";
 import { matchesKeybind, KEYBINDS, formatKeybind } from "@/browser/utils/ui/keybinds";
 import { applyFrontendFilters } from "@/browser/utils/review/filterHunks";

src/browser/hooks/usePendingReviews.ts

@@ -32,6 +32,8 @@ export interface UsePendingReviewsReturn {
   removeReview: (reviewId: string) => void;
   /** Clear all checked reviews */
   clearChecked: () => void;
+  /** Clear all reviews (for error recovery) */
+  clearAll: () => void;
   /** Get a review by ID */
   getReview: (reviewId: string) => PendingReview | undefined;
 }
@@ -160,6 +162,14 @@ export function usePendingReviews(workspaceId: string): UsePendingReviewsReturn
     });
   }, [setState]);
 
+  const clearAll = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      reviews: {},
+      lastUpdated: Date.now(),
+    }));
+  }, [setState]);
+
   const getReview = useCallback(
     (reviewId: string): PendingReview | undefined => {
       return state.reviews[reviewId];
@@ -176,6 +186,7 @@ export function usePendingReviews(workspaceId: string): UsePendingReviewsReturn
     uncheckReview,
     removeReview,
     clearChecked,
+    clearAll,
     getReview,
   };
 }