feat: enhance pending reviews UI with full features

Major improvements to PendingReviewsBanner:
- Self-contained ConnectedPendingReviewsBanner - only needs workspaceId + chatInputAPI
- Full review display with expandable diff viewer and editable comments
- Pending reviews first, then completed reviews with 'show more' load
- Relative timestamps (ages) for each review
- updateReviewNote() method in usePendingReviews hook

Styled review rendering in chat:
- New shared ReviewBlock component in shared/ReviewBlock.tsx
- Reviews render as styled cards in UserMessage (not raw text)
- Live preview of reviews in ChatInput before sending
- Custom 'review' element handler in MarkdownComponents

Also removes ~10 props from AIView → PendingReviewsBanner wiring

Author: ammar-agent

src/browser/components/AIView.tsx

@@ -51,9 +51,8 @@ import { useSendMessageOptions } from "@/browser/hooks/useSendMessageOptions";
 import { useForceCompaction } from "@/browser/hooks/useForceCompaction";
 import { useAPI } from "@/browser/contexts/API";
 import { usePendingReviews } from "@/browser/hooks/usePendingReviews";
-import { PendingReviewsBanner } from "./PendingReviewsBanner";
+import { ConnectedPendingReviewsBanner } from "./PendingReviewsBanner";
 import type { ReviewNoteData } from "@/common/types/review";
-import { formatReviewNoteForChat } from "@/common/types/review";
 
 interface AIViewProps {
   workspaceId: string;
@@ -228,11 +227,6 @@ const AIViewInner: React.FC<AIViewProps> = ({
     [pendingReviews]
   );
 
-  // Handler to send a review to chat input (formats to message string)
-  const handleSendReviewToChat = useCallback((data: ReviewNoteData) => {
-    chatInputAPI.current?.appendText(formatReviewNoteForChat(data));
-  }, []);
-
   // Handler for manual compaction from CompactionWarning click
   const handleCompactClick = useCallback(() => {
     chatInputAPI.current?.prependText("/compact\n");
@@ -622,17 +616,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
             onCompactClick={handleCompactClick}
           />
         )}
-        <PendingReviewsBanner
-          reviews={pendingReviews.reviews}
-          pendingCount={pendingReviews.pendingCount}
-          checkedCount={pendingReviews.checkedCount}
-          onCheck={pendingReviews.checkReview}
-          onUncheck={pendingReviews.uncheckReview}
-          onSendToChat={handleSendReviewToChat}
-          onRemove={pendingReviews.removeReview}
-          onClearChecked={pendingReviews.clearChecked}
-          onClearAll={pendingReviews.clearAll}
-        />
+        <ConnectedPendingReviewsBanner workspaceId={workspaceId} chatInputAPI={chatInputAPI} />
         <ChatInput
           variant="workspace"
           workspaceId={workspaceId}

src/browser/components/ChatInput/index.tsx

@@ -75,6 +75,7 @@ import { useTutorial } from "@/browser/contexts/TutorialContext";
 import { useVoiceInput } from "@/browser/hooks/useVoiceInput";
 import { VoiceInputButton } from "./VoiceInputButton";
 import { RecordingOverlay } from "./RecordingOverlay";
+import { ReviewBlock, hasReviewBlocks } from "../shared/ReviewBlock";
 
 type TokenCountReader = () => number;
 
@@ -1308,6 +1309,15 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
             <ChatInputToast toast={toast} onDismiss={handleToastDismiss} />
           )}
 
+          {/* Review preview - show styled review blocks above input */}
+          {variant === "workspace" && hasReviewBlocks(input) && (
+            <div className="border-border max-h-40 overflow-y-auto border-b px-2 pb-2">
+              {input.match(/<review>([\s\S]*?)<\/review>/g)?.map((match, idx) => (
+                <ReviewBlock key={idx} content={match.slice(8, -9)} />
+              ))}
+            </div>
+          )}
+
           {/* Command suggestions - workspace only */}
           {variant === "workspace" && (
             <CommandSuggestions

src/browser/components/Messages/MarkdownComponents.tsx

@@ -5,6 +5,7 @@ import { highlightCode } from "@/browser/utils/highlighting/highlightWorkerClien
 import { extractShikiLines } from "@/browser/utils/highlighting/shiki-shared";
 import { useTheme } from "@/browser/contexts/ThemeContext";
 import { CopyButton } from "@/browser/components/ui/CopyButton";
+import { ReviewBlock } from "@/browser/components/shared/ReviewBlock";
 
 interface CodeProps {
   node?: unknown;
@@ -111,11 +112,38 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
   );
 };
 
+// Helper to extract text content from children
+function extractTextContent(children: ReactNode): string {
+  if (typeof children === "string") return children;
+  if (Array.isArray(children)) {
+    return children
+      .map((child): string => {
+        if (typeof child === "string") return child;
+        // Handle React elements - check if it's a valid element with props
+        if (child !== null && typeof child === "object" && "props" in child) {
+          const element = child as React.ReactElement<{ children?: ReactNode }>;
+          if (element.props.children) {
+            return extractTextContent(element.props.children);
+          }
+        }
+        return "";
+      })
+      .join("");
+  }
+  return "";
+}
+
 // Custom components for markdown rendering
 export const markdownComponents = {
   // Pass through pre element - let code component handle the wrapping
   pre: ({ children }: PreProps) => <>{children}</>,
 
+  // Custom review component - renders <review> tags as styled blocks
+  review: ({ children }: { children?: ReactNode }) => {
+    const content = extractTextContent(children);
+    return <ReviewBlock content={content} />;
+  },
+
   // Custom anchor to open links externally
   a: ({ href, children }: AnchorProps) => (
     <a href={href} target="_blank" rel="noopener noreferrer">

src/browser/components/Messages/UserMessage.tsx

@@ -9,6 +9,7 @@ import { copyToClipboard } from "@/browser/utils/clipboard";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
 import { VIM_ENABLED_KEY } from "@/common/constants/storage";
 import { Clipboard, ClipboardCheck, Pencil } from "lucide-react";
+import { ContentWithReviews, hasReviewBlocks } from "../shared/ReviewBlock";
 
 interface UserMessageProps {
   message: DisplayedMessage & { type: "user" };
@@ -89,6 +90,9 @@ export const UserMessage: React.FC<UserMessageProps> = ({
     );
   }
 
+  // Check if content has review blocks
+  const containsReviews = content && hasReviewBlocks(content);
+
   // Otherwise, render as normal user message
   return (
     <MessageWindow
@@ -99,9 +103,16 @@ export const UserMessage: React.FC<UserMessageProps> = ({
       variant="user"
     >
       {content && (
-        <pre className="font-primary m-0 leading-6 break-words whitespace-pre-wrap text-[var(--color-user-text)]">
-          {content}
-        </pre>
+        containsReviews ? (
+          <ContentWithReviews
+            content={content}
+            textClassName="font-primary m-0 leading-6 break-words whitespace-pre-wrap text-[var(--color-user-text)]"
+          />
+        ) : (
+          <pre className="font-primary m-0 leading-6 break-words whitespace-pre-wrap text-[var(--color-user-text)]">
+            {content}
+          </pre>
+        )
       )}
       {message.imageParts && message.imageParts.length > 0 && (
         <div className="mt-3 flex flex-wrap gap-3">