diff --git a/src/browser/components/AIView.tsx b/src/browser/components/AIView.tsx
index 03dc7ea25f..53b0df58d4 100644
--- a/src/browser/components/AIView.tsx
+++ b/src/browser/components/AIView.tsx
@@ -50,6 +50,9 @@ import { useAutoCompactionSettings } from "../hooks/useAutoCompactionSettings";
 import { useSendMessageOptions } from "@/browser/hooks/useSendMessageOptions";
 import { useForceCompaction } from "@/browser/hooks/useForceCompaction";
 import { useAPI } from "@/browser/contexts/API";
+import { useReviews } from "@/browser/hooks/useReviews";
+import { ReviewsBanner } from "./ReviewsBanner";
+import type { ReviewNoteData } from "@/common/types/review";
 
 interface AIViewProps {
   workspaceId: string;
@@ -105,6 +108,9 @@ const AIViewInner: React.FC<AIViewProps> = ({
   const workspaceState = useWorkspaceState(workspaceId);
   const aggregator = useWorkspaceAggregator(workspaceId);
   const workspaceUsage = useWorkspaceUsage(workspaceId);
+
+  // Reviews state
+  const reviews = useReviews(workspaceId);
   const { options } = useProviderOptions();
   const use1M = options.anthropic?.use1MContext ?? false;
   // Get pending model for auto-compaction settings (threshold is per-model)
@@ -213,10 +219,14 @@ const AIViewInner: React.FC<AIViewProps> = ({
     chatInputAPI.current = api;
   }, []);
 
-  // Handler for review notes from Code Review tab
-  const handleReviewNote = useCallback((note: string) => {
-    chatInputAPI.current?.appendText(note);
-  }, []);
+  // Handler for review notes from Code Review tab - adds review (starts attached)
+  const handleReviewNote = useCallback(
+    (data: ReviewNoteData) => {
+      reviews.addReview(data);
+      // New reviews start with status "attached" so they appear in chat input immediately
+    },
+    [reviews]
+  );
 
   // Handler for manual compaction from CompactionWarning click
   const handleCompactClick = useCallback(() => {
@@ -532,6 +542,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
                             onEditUserMessage={handleEditUserMessage}
                             workspaceId={workspaceId}
                             isCompacting={isCompacting}
+                            onReviewNote={handleReviewNote}
                           />
                         </div>
                         {isAtCutoff && (
@@ -606,6 +617,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
             onCompactClick={handleCompactClick}
           />
         )}
+        <ReviewsBanner workspaceId={workspaceId} />
         <ChatInput
           variant="workspace"
           workspaceId={workspaceId}
@@ -621,6 +633,10 @@ const AIViewInner: React.FC<AIViewProps> = ({
           canInterrupt={canInterrupt}
           onReady={handleChatInputReady}
           autoCompactionCheck={autoCompactionResult}
+          attachedReviews={reviews.attachedReviews}
+          onDetachReview={reviews.detachReview}
+          onCheckReviews={(ids) => ids.forEach((id) => reviews.checkReview(id))}
+          onUpdateReviewNote={reviews.updateReviewNote}
         />
       </div>
 
diff --git a/src/browser/components/ChatInput/index.tsx b/src/browser/components/ChatInput/index.tsx
index 247b60d299..6def801975 100644
--- a/src/browser/components/ChatInput/index.tsx
+++ b/src/browser/components/ChatInput/index.tsx
@@ -63,6 +63,7 @@ import {
 
 import type { ThinkingLevel } from "@/common/types/thinking";
 import type { MuxFrontendMetadata } from "@/common/types/message";
+import { prepareUserMessageForSend } from "@/common/types/message";
 import { MODEL_ABBREVIATION_EXAMPLES } from "@/common/constants/knownModels";
 import { useTelemetry } from "@/browser/hooks/useTelemetry";
 
@@ -75,6 +76,7 @@ import { useTutorial } from "@/browser/contexts/TutorialContext";
 import { useVoiceInput } from "@/browser/hooks/useVoiceInput";
 import { VoiceInputButton } from "./VoiceInputButton";
 import { RecordingOverlay } from "./RecordingOverlay";
+import { ReviewBlockFromData } from "../shared/ReviewBlock";
 
 type TokenCountReader = () => number;
 
@@ -140,11 +142,14 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
 
   const [input, setInput] = usePersistedState(storageKeys.inputKey, "", { listener: true });
   const [isSending, setIsSending] = useState(false);
+  const [hideReviewsDuringSend, setHideReviewsDuringSend] = useState(false);
   const [showCommandSuggestions, setShowCommandSuggestions] = useState(false);
   const [commandSuggestions, setCommandSuggestions] = useState<SlashSuggestion[]>([]);
   const [providerNames, setProviderNames] = useState<string[]>([]);
   const [toast, setToast] = useState<Toast | null>(null);
   const [imageAttachments, setImageAttachments] = useState<ImageAttachment[]>([]);
+  // Attached reviews come from parent via props (persisted in pendingReviews state)
+  const attachedReviews = variant === "workspace" ? (props.attachedReviews ?? []) : [];
   const handleToastDismiss = useCallback(() => {
     setToast(null);
   }, []);
@@ -152,7 +157,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   const modelSelectorRef = useRef<ModelSelectorRef>(null);
 
   // Draft state combines text input and image attachments
-  // Use these helpers to avoid accidentally losing images when modifying text
+  // Reviews are managed separately via props (persisted in pendingReviews state)
   interface DraftState {
     text: string;
     images: ImageAttachment[];
@@ -236,7 +241,8 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   );
   const hasTypedText = input.trim().length > 0;
   const hasImages = imageAttachments.length > 0;
-  const canSend = (hasTypedText || hasImages) && !disabled && !isSending;
+  const hasReviews = attachedReviews.length > 0;
+  const canSend = (hasTypedText || hasImages || hasReviews) && !disabled && !isSending;
   // Setter for model - updates localStorage directly so useSendMessageOptions picks it up
   const setPreferredModel = useCallback(
     (model: string) => {
@@ -946,8 +952,8 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       }
       setIsSending(true);
 
-      // Save current state for restoration on error
-      const previousImageAttachments = [...imageAttachments];
+      // Save current draft state for restoration on error
+      const preSendDraft = getDraft();
 
       // Auto-compaction check (workspace variant only)
       // Check if we should auto-compact before sending this message
@@ -962,9 +968,18 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           mediaType: img.mediaType,
         }));
 
+        // Prepare reviews data for the continue message (orthogonal to compaction)
+        // Review.data is already ReviewNoteData shape
+        const reviewsData =
+          attachedReviews.length > 0 ? attachedReviews.map((r) => r.data) : undefined;
+
+        // Capture review IDs for marking as checked on success
+        const sentReviewIds = attachedReviews.map((r) => r.id);
+
         // Clear input immediately for responsive UX
         setInput("");
         setImageAttachments([]);
+        setHideReviewsDuringSend(true);
 
         try {
           const result = await executeCompaction({
@@ -974,14 +989,14 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
               text: messageText,
               imageParts,
               model: sendMessageOptions.model,
+              reviews: reviewsData,
             },
             sendMessageOptions,
           });
 
           if (!result.success) {
             // Restore on error
-            setInput(messageText);
-            setImageAttachments(previousImageAttachments);
+            setDraft(preSendDraft);
             setToast({
               id: Date.now().toString(),
               type: "error",
@@ -989,6 +1004,10 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
               message: result.error ?? "Failed to start auto-compaction",
             });
           } else {
+            // Mark reviews as checked on success
+            if (sentReviewIds.length > 0) {
+              props.onCheckReviews?.(sentReviewIds);
+            }
             setToast({
               id: Date.now().toString(),
               type: "success",
@@ -998,8 +1017,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           }
         } catch (error) {
           // Restore on unexpected error
-          setInput(messageText);
-          setImageAttachments(previousImageAttachments);
+          setDraft(preSendDraft);
           setToast({
             id: Date.now().toString(),
             type: "error",
@@ -1009,6 +1027,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           });
         } finally {
           setIsSending(false);
+          setHideReviewsDuringSend(false);
         }
 
         return; // Skip normal send
@@ -1072,10 +1091,25 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           }
         }
 
-        // Clear input and images immediately for responsive UI
-        // These will be restored if the send operation fails
+        // Process reviews into message text and metadata using shared utility
+        // Review.data is already ReviewNoteData shape
+        const reviewsData =
+          attachedReviews.length > 0 ? attachedReviews.map((r) => r.data) : undefined;
+        const { finalText: finalMessageText, metadata: reviewMetadata } = prepareUserMessageForSend(
+          { text: actualMessageText, reviews: reviewsData },
+          muxMetadata
+        );
+        muxMetadata = reviewMetadata;
+
+        // Capture review IDs before clearing (for marking as checked on success)
+        const sentReviewIds = attachedReviews.map((r) => r.id);
+
+        // Clear input, images, and hide reviews immediately for responsive UI
+        // Text/images are restored if send fails; reviews remain "attached" in state
+        // so they'll reappear naturally on failure (we only call onCheckReviews on success)
         setInput("");
         setImageAttachments([]);
+        setHideReviewsDuringSend(true);
         // Clear inline height style - VimTextArea's useLayoutEffect will handle sizing
         if (inputRef.current) {
           inputRef.current.style.height = "";
@@ -1083,7 +1117,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
 
         const result = await api.workspace.sendMessage({
           workspaceId: props.workspaceId,
-          message: actualMessageText,
+          message: finalMessageText,
           options: {
             ...sendMessageOptions,
             ...compactionOptions,
@@ -1098,20 +1132,24 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           console.error("Failed to send message:", result.error);
           // Show error using enhanced toast
           setToast(createErrorToast(result.error));
-          // Restore input and images on error so user can try again
-          setInput(messageText);
-          setImageAttachments(previousImageAttachments);
+          // Restore draft on error so user can try again
+          setDraft(preSendDraft);
         } else {
           // Track telemetry for successful message send
           telemetry.messageSent(
             props.workspaceId,
             sendMessageOptions.model,
             mode,
-            actualMessageText.length,
+            finalMessageText.length,
             runtimeType,
             sendMessageOptions.thinkingLevel ?? "off"
           );
 
+          // Mark attached reviews as completed (checked)
+          if (sentReviewIds.length > 0) {
+            props.onCheckReviews?.(sentReviewIds);
+          }
+
           // Exit editing mode if we were editing
           if (editingMessage && props.onCancelEdit) {
             props.onCancelEdit();
@@ -1127,10 +1165,11 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
             raw: error instanceof Error ? error.message : "Failed to send message",
           })
         );
-        setInput(messageText);
-        setImageAttachments(previousImageAttachments);
+        // Restore draft on error
+        setDraft(preSendDraft);
       } finally {
         setIsSending(false);
+        setHideReviewsDuringSend(false);
       }
     } finally {
       // Always restore focus at the end
@@ -1308,6 +1347,27 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
             <ChatInputToast toast={toast} onDismiss={handleToastDismiss} />
           )}
 
+          {/* Attached reviews preview - show styled blocks with remove/edit buttons */}
+          {/* Hide during send to avoid duplicate display with the sent message */}
+          {variant === "workspace" && attachedReviews.length > 0 && !hideReviewsDuringSend && (
+            <div className="border-border max-h-[50vh] space-y-2 overflow-y-auto border-b px-1.5 py-1.5">
+              {attachedReviews.map((review) => (
+                <ReviewBlockFromData
+                  key={review.id}
+                  data={review.data}
+                  onRemove={
+                    props.onDetachReview ? () => props.onDetachReview!(review.id) : undefined
+                  }
+                  onEditComment={
+                    props.onUpdateReviewNote
+                      ? (newNote) => props.onUpdateReviewNote!(review.id, newNote)
+                      : undefined
+                  }
+                />
+              ))}
+            </div>
+          )}
+
           {/* Command suggestions - workspace only */}
           {variant === "workspace" && (
             <CommandSuggestions
diff --git a/src/browser/components/ChatInput/types.ts b/src/browser/components/ChatInput/types.ts
index 2be6e1d655..f8050c5f54 100644
--- a/src/browser/components/ChatInput/types.ts
+++ b/src/browser/components/ChatInput/types.ts
@@ -2,6 +2,7 @@ import type { ImagePart } from "@/common/orpc/types";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import type { TelemetryRuntimeType } from "@/common/telemetry/payload";
 import type { AutoCompactionCheckResult } from "@/browser/utils/compaction/autoCompactionCheck";
+import type { Review } from "@/common/types/review";
 
 export interface ChatInputAPI {
   focus: () => void;
@@ -29,6 +30,14 @@ export interface ChatInputWorkspaceVariant {
   disabled?: boolean;
   onReady?: (api: ChatInputAPI) => void;
   autoCompactionCheck?: AutoCompactionCheckResult; // Computed in parent (AIView) to avoid duplicate calculation
+  /** Reviews currently attached to chat (from useReviews hook) */
+  attachedReviews?: Review[];
+  /** Detach a review from chat input (sets status to pending) */
+  onDetachReview?: (reviewId: string) => void;
+  /** Mark reviews as checked after sending */
+  onCheckReviews?: (reviewIds: string[]) => void;
+  /** Update a review's comment/note */
+  onUpdateReviewNote?: (reviewId: string, newNote: string) => void;
 }
 
 // Creation variant: simplified for first message / workspace creation
diff --git a/src/browser/components/Messages/MessageRenderer.tsx b/src/browser/components/Messages/MessageRenderer.tsx
index 9f74ebabde..fca1ad1726 100644
--- a/src/browser/components/Messages/MessageRenderer.tsx
+++ b/src/browser/components/Messages/MessageRenderer.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import type { DisplayedMessage } from "@/common/types/message";
+import type { ReviewNoteData } from "@/common/types/review";
 import { UserMessage } from "./UserMessage";
 import { AssistantMessage } from "./AssistantMessage";
 import { ToolMessage } from "./ToolMessage";
@@ -15,11 +16,13 @@ interface MessageRendererProps {
   onEditQueuedMessage?: () => void;
   workspaceId?: string;
   isCompacting?: boolean;
+  /** Handler for adding review notes from inline diffs */
+  onReviewNote?: (data: ReviewNoteData) => void;
 }
 
 // Memoized to prevent unnecessary re-renders when parent (AIView) updates
 export const MessageRenderer = React.memo<MessageRendererProps>(
-  ({ message, className, onEditUserMessage, workspaceId, isCompacting }) => {
+  ({ message, className, onEditUserMessage, workspaceId, isCompacting, onReviewNote }) => {
     // Route based on message type
     switch (message.type) {
       case "user":
@@ -41,7 +44,14 @@ export const MessageRenderer = React.memo<MessageRendererProps>(
           />
         );
       case "tool":
-        return <ToolMessage message={message} className={className} workspaceId={workspaceId} />;
+        return (
+          <ToolMessage
+            message={message}
+            className={className}
+            workspaceId={workspaceId}
+            onReviewNote={onReviewNote}
+          />
+        );
       case "reasoning":
         return <ReasoningMessage message={message} className={className} />;
       case "stream-error":
diff --git a/src/browser/components/Messages/ToolMessage.tsx b/src/browser/components/Messages/ToolMessage.tsx
index 77b0f61554..1de41ffb36 100644
--- a/src/browser/components/Messages/ToolMessage.tsx
+++ b/src/browser/components/Messages/ToolMessage.tsx
@@ -35,11 +35,14 @@ import type {
   WebFetchToolArgs,
   WebFetchToolResult,
 } from "@/common/types/tools";
+import type { ReviewNoteData } from "@/common/types/review";
 
 interface ToolMessageProps {
   message: DisplayedMessage & { type: "tool" };
   className?: string;
   workspaceId?: string;
+  /** Handler for adding review notes from inline diffs */
+  onReviewNote?: (data: ReviewNoteData) => void;
 }
 
 // Type guards using Zod schemas for single source of truth
@@ -108,7 +111,12 @@ function isBashBackgroundTerminateTool(
   return TOOL_DEFINITIONS.bash_background_terminate.schema.safeParse(args).success;
 }
 
-export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className, workspaceId }) => {
+export const ToolMessage: React.FC<ToolMessageProps> = ({
+  message,
+  className,
+  workspaceId,
+  onReviewNote,
+}) => {
   // Route to specialized components based on tool name
   if (isBashTool(message.toolName, message.args)) {
     return (
@@ -143,6 +151,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className, wo
           args={message.args}
           result={message.result as FileEditReplaceStringToolResult | undefined}
           status={message.status}
+          onReviewNote={onReviewNote}
         />
       </div>
     );
@@ -156,6 +165,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className, wo
           args={message.args}
           result={message.result as FileEditInsertToolResult | undefined}
           status={message.status}
+          onReviewNote={onReviewNote}
         />
       </div>
     );
@@ -169,6 +179,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className, wo
           args={message.args}
           result={message.result as FileEditReplaceLinesToolResult | undefined}
           status={message.status}
+          onReviewNote={onReviewNote}
         />
       </div>
     );
diff --git a/src/browser/components/Messages/UserMessage.tsx b/src/browser/components/Messages/UserMessage.tsx
index 9f7ffdd6e5..657a9e74b2 100644
--- a/src/browser/components/Messages/UserMessage.tsx
+++ b/src/browser/components/Messages/UserMessage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import type { DisplayedMessage } from "@/common/types/message";
+import type { DisplayedMessage, ReviewNoteDataForDisplay } from "@/common/types/message";
 import type { ButtonConfig } from "./MessageWindow";
 import { MessageWindow } from "./MessageWindow";
 import { TerminalOutput } from "./TerminalOutput";
@@ -9,6 +9,24 @@ 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 { ReviewBlockFromData } from "../shared/ReviewBlock";
+
+/** Helper component to render reviews from structured data with optional text */
+const ReviewsWithText: React.FC<{
+  reviews: ReviewNoteDataForDisplay[];
+  textContent: string;
+}> = ({ reviews, textContent }) => (
+  <div className="space-y-2">
+    {reviews.map((review, idx) => (
+      <ReviewBlockFromData key={idx} data={review} />
+    ))}
+    {textContent && (
+      <pre className="font-primary m-0 leading-6 break-words whitespace-pre-wrap text-[var(--color-user-text)]">
+        {textContent}
+      </pre>
+    )}
+  </div>
+);
 
 interface UserMessageProps {
   message: DisplayedMessage & { type: "user" };
@@ -89,6 +107,14 @@ export const UserMessage: React.FC<UserMessageProps> = ({
     );
   }
 
+  // Check if we have structured review data in metadata
+  const hasReviews = message.reviews && message.reviews.length > 0;
+
+  // Extract plain text content (without review tags) for display alongside review blocks
+  const plainTextContent = hasReviews
+    ? content.replace(/<review>[\s\S]*?<\/review>\s*/g, "").trim()
+    : content;
+
   // Otherwise, render as normal user message
   return (
     <MessageWindow
@@ -98,10 +124,16 @@ export const UserMessage: React.FC<UserMessageProps> = ({
       className={className}
       variant="user"
     >
-      {content && (
-        <pre className="font-primary m-0 leading-6 break-words whitespace-pre-wrap text-[var(--color-user-text)]">
-          {content}
-        </pre>
+      {hasReviews ? (
+        // Use structured review data from metadata
+        <ReviewsWithText reviews={message.reviews!} textContent={plainTextContent} />
+      ) : (
+        // No reviews - just plain text
+        content && (
+          <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">
diff --git a/src/browser/components/ReviewsBanner.tsx b/src/browser/components/ReviewsBanner.tsx
new file mode 100644
index 0000000000..b9ea84254c
--- /dev/null
+++ b/src/browser/components/ReviewsBanner.tsx
@@ -0,0 +1,496 @@
+/**
+ * ReviewsBanner - Self-contained reviews UI
+ *
+ * Features:
+ * - Collapsible banner above chat input
+ * - Full review display with diff and editable comments
+ * - Pending reviews first, then completed with "show more"
+ * - Relative timestamps
+ * - Error boundary for corrupted data
+ */
+
+import React, { useState, useCallback, useMemo, Component, type ReactNode, useRef } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Check,
+  Undo2,
+  Send,
+  Trash2,
+  MessageSquare,
+  AlertTriangle,
+  Pencil,
+  X,
+} from "lucide-react";
+import { cn } from "@/common/lib/utils";
+import { Button } from "./ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
+import type { Review } from "@/common/types/review";
+import { useReviews } from "@/browser/hooks/useReviews";
+import { formatRelativeTime } from "@/browser/utils/ui/dateTime";
+import { DiffRenderer } from "./shared/DiffRenderer";
+import { matchesKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// ERROR BOUNDARY
+// ═══════════════════════════════════════════════════════════════════════════════
+
+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 size-3" />
+            Clear all
+          </Button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// REVIEW ITEM COMPONENT
+// ═══════════════════════════════════════════════════════════════════════════════
+
+interface ReviewItemProps {
+  review: Review;
+  onCheck: () => void;
+  onUncheck: () => void;
+  onSendToChat: () => void;
+  onRemove: () => void;
+  onUpdateNote: (newNote: string) => void;
+}
+
+const ReviewItem: React.FC<ReviewItemProps> = ({
+  review,
+  onCheck,
+  onUncheck,
+  onSendToChat,
+  onRemove,
+  onUpdateNote,
+}) => {
+  const isChecked = review.status === "checked";
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(review.data.userNote);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleToggleExpand = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const handleStartEdit = useCallback(() => {
+    setEditValue(review.data.userNote);
+    setIsEditing(true);
+    // Focus textarea after render
+    setTimeout(() => textareaRef.current?.focus(), 0);
+  }, [review.data.userNote]);
+
+  const handleSaveEdit = useCallback(() => {
+    if (editValue.trim() !== review.data.userNote) {
+      onUpdateNote(editValue.trim());
+    }
+    setIsEditing(false);
+  }, [editValue, review.data.userNote, onUpdateNote]);
+
+  const handleCancelEdit = useCallback(() => {
+    setEditValue(review.data.userNote);
+    setIsEditing(false);
+  }, [review.data.userNote]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (matchesKeybind(e, KEYBINDS.SAVE_EDIT)) {
+        e.preventDefault();
+        handleSaveEdit();
+      } else if (matchesKeybind(e, KEYBINDS.CANCEL_EDIT)) {
+        e.preventDefault();
+        handleCancelEdit();
+      }
+    },
+    [handleSaveEdit, handleCancelEdit]
+  );
+
+  // Format code for diff display - add diff markers if not present
+  const diffContent = useMemo(() => {
+    const lines = review.data.selectedCode.split("\n");
+    // Check if lines already have diff markers
+    const hasDiffMarkers = lines.some((l) => /^[+-\s]/.test(l));
+    if (hasDiffMarkers) {
+      return review.data.selectedCode;
+    }
+    // Add context markers
+    return lines.map((l) => ` ${l}`).join("\n");
+  }, [review.data.selectedCode]);
+
+  const age = formatRelativeTime(review.createdAt);
+
+  return (
+    <div
+      className={cn(
+        "group rounded border transition-colors",
+        isChecked
+          ? "border-border-light bg-hover/50 opacity-70"
+          : "border-border-medium bg-border-medium/20"
+      )}
+    >
+      {/* Header row - always visible */}
+      <div className="flex items-center gap-2 px-2 py-1.5 text-xs">
+        {/* Expand toggle */}
+        <button
+          type="button"
+          onClick={handleToggleExpand}
+          className="text-muted hover:text-secondary shrink-0"
+        >
+          {isExpanded ? (
+            <ChevronDown className="size-3.5" />
+          ) : (
+            <ChevronRight className="size-3.5" />
+          )}
+        </button>
+
+        {/* Check/Uncheck button */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn("size-5 shrink-0 [&_svg]:size-3", isChecked && "text-success")}
+              onClick={isChecked ? onUncheck : onCheck}
+            >
+              {isChecked ? <Undo2 /> : <Check />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{isChecked ? "Mark as pending" : "Mark as done"}</TooltipContent>
+        </Tooltip>
+
+        {/* Send to chat - always visible for pending items, away from delete */}
+        {!isChecked && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-5 shrink-0 [&_svg]:size-3"
+                onClick={onSendToChat}
+              >
+                <Send />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Send to chat</TooltipContent>
+          </Tooltip>
+        )}
+
+        {/* File path, comment preview, and age */}
+        <button
+          type="button"
+          onClick={handleToggleExpand}
+          className="flex min-w-0 flex-1 items-center gap-2 text-left"
+        >
+          <span className="shrink-0 truncate font-mono text-[var(--color-review-accent)]">
+            {review.data.filePath}:{review.data.lineRange}
+          </span>
+          {review.data.userNote && (
+            <span className="text-secondary min-w-0 flex-1 truncate italic">
+              {review.data.userNote.split("\n")[0]}
+            </span>
+          )}
+          <span className="text-muted shrink-0 text-[10px]">{age}</span>
+        </button>
+
+        {/* Delete action - separate from safe actions */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-error size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100 [&_svg]:size-3"
+              onClick={onRemove}
+            >
+              <Trash2 />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Remove</TooltipContent>
+        </Tooltip>
+      </div>
+
+      {/* Expanded content */}
+      {isExpanded && (
+        <div className="border-border-light border-t">
+          {/* Code diff */}
+          <div className="max-h-32 overflow-auto text-[11px]">
+            <DiffRenderer content={diffContent} showLineNumbers={false} fontSize="11px" />
+          </div>
+
+          {/* Comment section */}
+          <div className="border-border-light border-t p-2">
+            {isEditing ? (
+              <div className="space-y-1.5">
+                <textarea
+                  ref={textareaRef}
+                  value={editValue}
+                  onChange={(e) => setEditValue(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  className="bg-dark border-border text-secondary w-full resize-none rounded border p-2 text-xs focus:border-[var(--color-review-accent)] focus:outline-none"
+                  rows={2}
+                  placeholder="Your comment..."
+                />
+                <div className="flex items-center justify-end gap-1">
+                  <span className="text-muted mr-2 text-[10px]">⌘Enter to save, Esc to cancel</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-5 px-2 text-xs"
+                    onClick={handleCancelEdit}
+                  >
+                    <X className="mr-1 size-3" />
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    className="h-5 px-2 text-xs"
+                    onClick={handleSaveEdit}
+                  >
+                    <Check className="mr-1 size-3" />
+                    Save
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="group/comment flex items-start gap-2">
+                <blockquote className="text-primary flex-1 border-l-2 border-[var(--color-review-accent)] pl-2 text-xs italic">
+                  {review.data.userNote || <span className="text-muted">No comment</span>}
+                </blockquote>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-5 shrink-0 opacity-0 transition-opacity group-hover/comment:opacity-100 [&_svg]:size-3"
+                  onClick={handleStartEdit}
+                >
+                  <Pencil />
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// MAIN BANNER COMPONENT
+// ═══════════════════════════════════════════════════════════════════════════════
+
+interface ReviewsBannerInnerProps {
+  workspaceId: string;
+}
+
+const ReviewsBannerInner: React.FC<ReviewsBannerInnerProps> = ({ workspaceId }) => {
+  const reviewsHook = useReviews(workspaceId);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showAllCompleted, setShowAllCompleted] = useState(false);
+
+  const INITIAL_COMPLETED_COUNT = 3;
+
+  // Separate pending and completed reviews
+  // "attached" reviews are shown in ChatInput, so we only show "pending" and "checked" here
+  const { pendingList, completedList } = useMemo(() => {
+    const pending = reviewsHook.reviews.filter((r) => r.status === "pending");
+    const completed = reviewsHook.reviews.filter((r) => r.status === "checked");
+    return { pendingList: pending, completedList: completed };
+  }, [reviewsHook.reviews]);
+
+  // Completed reviews to display (limited unless expanded)
+  const displayedCompleted = useMemo(() => {
+    if (showAllCompleted) return completedList;
+    return completedList.slice(0, INITIAL_COMPLETED_COUNT);
+  }, [completedList, showAllCompleted]);
+
+  const hiddenCompletedCount = completedList.length - INITIAL_COMPLETED_COUNT;
+
+  const handleToggle = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const handleSendToChat = useCallback(
+    (reviewId: string) => {
+      reviewsHook.attachReview(reviewId);
+    },
+    [reviewsHook]
+  );
+
+  const handleUpdateNote = useCallback(
+    (reviewId: string, newNote: string) => {
+      reviewsHook.updateReviewNote(reviewId, newNote);
+    },
+    [reviewsHook]
+  );
+
+  // Don't show anything if no reviews
+  if (reviewsHook.reviews.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="border-border bg-dark border-t px-[15px]">
+      {/* Collapsed banner - thin stripe, content aligned with chat */}
+      <button
+        type="button"
+        onClick={handleToggle}
+        className="hover:bg-hover mx-auto flex w-full max-w-4xl items-center gap-2 rounded px-2 py-1.5 text-xs transition-colors"
+      >
+        <MessageSquare
+          className={cn(
+            "size-3.5",
+            reviewsHook.pendingCount > 0 ? "text-[var(--color-review-accent)]" : "text-muted"
+          )}
+        />
+        <span className="text-secondary">
+          {reviewsHook.pendingCount > 0 ? (
+            <>
+              <span className="font-medium text-[var(--color-review-accent)]">
+                {reviewsHook.pendingCount}
+              </span>
+              {" pending review"}
+              {reviewsHook.pendingCount !== 1 && "s"}
+            </>
+          ) : (
+            <span className="text-muted">No pending reviews</span>
+          )}
+          {reviewsHook.checkedCount > 0 && (
+            <span className="text-muted"> · {reviewsHook.checkedCount} completed</span>
+          )}
+        </span>
+        <div className="ml-auto">
+          {isExpanded ? (
+            <ChevronDown className="text-muted size-3.5" />
+          ) : (
+            <ChevronRight className="text-muted size-3.5" />
+          )}
+        </div>
+      </button>
+
+      {/* Expanded view - content aligned with chat */}
+      {isExpanded && (
+        <div className="border-border mx-auto max-h-80 max-w-4xl space-y-3 overflow-y-auto border-t py-2">
+          {/* Pending reviews section */}
+          {pendingList.length > 0 && (
+            <div className="space-y-1.5">
+              <div className="text-muted text-[10px] font-medium tracking-wide uppercase">
+                Pending ({pendingList.length})
+              </div>
+              {pendingList.map((review) => (
+                <ReviewItem
+                  key={review.id}
+                  review={review}
+                  onCheck={() => reviewsHook.checkReview(review.id)}
+                  onUncheck={() => reviewsHook.uncheckReview(review.id)}
+                  onSendToChat={() => handleSendToChat(review.id)}
+                  onRemove={() => reviewsHook.removeReview(review.id)}
+                  onUpdateNote={(note) => handleUpdateNote(review.id, note)}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Completed reviews section */}
+          {completedList.length > 0 && (
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between">
+                <div className="text-muted text-[10px] font-medium tracking-wide uppercase">
+                  Completed ({completedList.length})
+                </div>
+                {completedList.length > 0 && (
+                  <button
+                    type="button"
+                    onClick={reviewsHook.clearChecked}
+                    className="text-muted hover:text-error text-[10px] transition-colors"
+                  >
+                    Clear
+                  </button>
+                )}
+              </div>
+              {displayedCompleted.map((review) => (
+                <ReviewItem
+                  key={review.id}
+                  review={review}
+                  onCheck={() => reviewsHook.checkReview(review.id)}
+                  onUncheck={() => reviewsHook.uncheckReview(review.id)}
+                  onSendToChat={() => handleSendToChat(review.id)}
+                  onRemove={() => reviewsHook.removeReview(review.id)}
+                  onUpdateNote={(note) => handleUpdateNote(review.id, note)}
+                />
+              ))}
+              {hiddenCompletedCount > 0 && !showAllCompleted && (
+                <button
+                  type="button"
+                  onClick={() => setShowAllCompleted(true)}
+                  className="text-muted hover:text-secondary w-full py-1 text-center text-xs transition-colors"
+                >
+                  Show {hiddenCompletedCount} more completed review
+                  {hiddenCompletedCount !== 1 && "s"}
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Empty state */}
+          {pendingList.length === 0 && completedList.length === 0 && (
+            <div className="text-muted py-3 text-center text-xs">No reviews yet</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// EXPORTED COMPONENT
+// ═══════════════════════════════════════════════════════════════════════════════
+
+interface ReviewsBannerProps {
+  workspaceId: string;
+}
+
+/**
+ * Self-contained reviews banner.
+ * Uses useReviews hook internally - only needs workspaceId.
+ * Shows only "pending" and "checked" reviews (not "attached" which are in ChatInput).
+ */
+export const ReviewsBanner: React.FC<ReviewsBannerProps> = ({ workspaceId }) => {
+  const reviewsHook = useReviews(workspaceId);
+
+  return (
+    <BannerErrorBoundary onClear={reviewsHook.clearAll}>
+      <ReviewsBannerInner workspaceId={workspaceId} />
+    </BannerErrorBoundary>
+  );
+};
diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx
index c5eef45ab9..a98855ce50 100644
--- a/src/browser/components/RightSidebar.tsx
+++ b/src/browser/components/RightSidebar.tsx
@@ -12,6 +12,7 @@ import { calculateTokenMeterData } from "@/common/utils/tokens/tokenMeterUtils";
 import { matchesKeybind, KEYBINDS, formatKeybind } from "@/browser/utils/ui/keybinds";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import { cn } from "@/common/lib/utils";
+import type { ReviewNoteData } from "@/common/types/review";
 
 interface SidebarContainerProps {
   collapsed: boolean;
@@ -84,7 +85,7 @@ interface RightSidebarProps {
   /** Whether currently resizing */
   isResizing?: boolean;
   /** Callback when user adds a review note from Code Review tab */
-  onReviewNote?: (note: string) => void;
+  onReviewNote?: (data: ReviewNoteData) => void;
   /** Workspace is still being created (git operations in progress) */
   isCreating?: boolean;
 }
diff --git a/src/browser/components/RightSidebar/CodeReview/HunkViewer.tsx b/src/browser/components/RightSidebar/CodeReview/HunkViewer.tsx
index 64341a682b..8b88107415 100644
--- a/src/browser/components/RightSidebar/CodeReview/HunkViewer.tsx
+++ b/src/browser/components/RightSidebar/CodeReview/HunkViewer.tsx
@@ -3,7 +3,7 @@
  */
 
 import React, { useState, useMemo } from "react";
-import type { DiffHunk } from "@/common/types/review";
+import type { DiffHunk, ReviewNoteData } from "@/common/types/review";
 import { SelectableDiffRenderer } from "../../shared/DiffRenderer";
 import {
   type SearchHighlightConfig,
@@ -24,7 +24,7 @@ interface HunkViewerProps {
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   onToggleRead?: (e: React.MouseEvent<HTMLElement>) => void;
   onRegisterToggleExpand?: (hunkId: string, toggleFn: () => void) => void;
-  onReviewNote?: (note: string) => void;
+  onReviewNote?: (data: ReviewNoteData) => void;
   searchConfig?: SearchHighlightConfig;
 }
 
diff --git a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
index 6ec5eb679b..3331e99596 100644
--- a/src/browser/components/RightSidebar/CodeReview/ReviewPanel.tsx
+++ b/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 } 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";
@@ -42,7 +46,7 @@ import { useAPI } from "@/browser/contexts/API";
 interface ReviewPanelProps {
   workspaceId: string;
   workspacePath: string;
-  onReviewNote?: (note: string) => void;
+  onReviewNote?: (data: ReviewNoteData) => void;
   /** Trigger to focus panel (increment to trigger) */
   focusTrigger?: number;
   /** Workspace is still being created (git operations in progress) */
diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx
index 6d2c4621c5..b7c7f72611 100644
--- a/src/browser/components/shared/DiffRenderer.tsx
+++ b/src/browser/components/shared/DiffRenderer.tsx
@@ -18,6 +18,7 @@ import {
   highlightSearchMatches,
   type SearchHighlightConfig,
 } from "@/browser/utils/highlighting/highlightSearchTerms";
+import type { ReviewNoteData } from "@/common/types/review";
 
 // Shared type for diff line types
 export type DiffLineType = "add" | "remove" | "context" | "header";
@@ -164,6 +165,8 @@ interface DiffRendererProps {
   fontSize?: string;
   /** Max height for diff container (default: "400px", use "none" for no limit) */
   maxHeight?: string;
+  /** Additional className for container (e.g., "rounded-none" to remove rounding) */
+  className?: string;
 }
 
 /**
@@ -240,6 +243,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   filePath,
   fontSize,
   maxHeight,
+  className,
 }) => {
   // Detect language for syntax highlighting (memoized to prevent repeated detection)
   const { theme } = useTheme();
@@ -253,14 +257,14 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   // Show loading state while highlighting
   if (!highlightedChunks) {
     return (
-      <DiffContainer fontSize={fontSize} maxHeight={maxHeight}>
+      <DiffContainer fontSize={fontSize} maxHeight={maxHeight} className={className}>
         <div style={{ opacity: 0.5, padding: "8px" }}>Processing...</div>
       </DiffContainer>
     );
   }
 
   return (
-    <DiffContainer fontSize={fontSize} maxHeight={maxHeight}>
+    <DiffContainer fontSize={fontSize} maxHeight={maxHeight} className={className}>
       {highlightedChunks.flatMap((chunk) =>
         chunk.lines.map((line) => {
           const indicator = chunk.type === "add" ? "+" : chunk.type === "remove" ? "-" : " ";
@@ -313,8 +317,8 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
 interface SelectableDiffRendererProps extends Omit<DiffRendererProps, "filePath"> {
   /** File path for generating review notes */
   filePath: string;
-  /** Callback when user submits a review note */
-  onReviewNote?: (note: string) => void;
+  /** Callback when user submits a review note with structured data */
+  onReviewNote?: (data: ReviewNoteData) => void;
   /** Callback when user clicks on a line (to activate parent hunk) */
   onLineClick?: () => void;
   /** Search highlight configuration (optional) */
@@ -339,7 +343,7 @@ interface ReviewNoteInputProps {
   lineData: Array<{ index: number; type: DiffLineType; lineNum: number }>;
   lines: string[]; // Original diff lines with +/- prefix
   filePath: string;
-  onSubmit: (note: string) => void;
+  onSubmit: (data: ReviewNoteData) => void;
   onCancel: () => void;
 }
 
@@ -378,34 +382,37 @@ const ReviewNoteInput: React.FC<ReviewNoteInputProps> = React.memo(
         return `${lineInfo.lineNum} ${indicator} ${content}`;
       });
 
-      // Elide middle lines if more than 3 lines selected
-      let selectedLines: string;
-      if (allLines.length <= 3) {
-        selectedLines = allLines.join("\n");
+      // Elide middle lines if more than 20 lines selected (show 10 at start, 10 at end)
+      let selectedCode: string;
+      const CONTEXT_LINES = 10;
+      const MAX_FULL_LINES = CONTEXT_LINES * 2;
+      if (allLines.length <= MAX_FULL_LINES) {
+        selectedCode = allLines.join("\n");
       } else {
-        const omittedCount = allLines.length - 2;
-        selectedLines = [
-          allLines[0],
+        const omittedCount = allLines.length - MAX_FULL_LINES;
+        selectedCode = [
+          ...allLines.slice(0, CONTEXT_LINES),
           `    (${omittedCount} lines omitted)`,
-          allLines[allLines.length - 1],
+          ...allLines.slice(-CONTEXT_LINES),
         ].join("\n");
       }
 
-      const reviewNote = `<review>\nRe ${filePath}:${lineRange}\n\`\`\`\n${selectedLines}\n\`\`\`\n> ${noteText.trim()}\n</review>`;
-      onSubmit(reviewNote);
+      // Pass structured data instead of formatted message
+      onSubmit({
+        filePath,
+        lineRange,
+        selectedCode,
+        userNote: noteText.trim(),
+      });
     };
 
     return (
-      <div
-        className="bg-dark m-0 border-t px-2 py-1.5"
-        style={{ borderColor: "hsl(from var(--color-review-accent) h s l / 0.3)" }}
-      >
+      <div className="m-0 border-t border-[var(--color-review-accent)]/30 bg-[var(--color-review-accent)]/5 px-2 py-1.5">
         <textarea
           ref={textareaRef}
-          className="bg-dark text-text placeholder:text-muted w-full resize-none overflow-y-hidden rounded-sm border px-2 py-1.5 font-mono text-xs leading-[1.4] focus:border-[hsl(from_var(--color-review-accent)_h_s_l_/_0.6)] focus:outline-none"
+          className="text-primary placeholder:text-muted w-full resize-none overflow-y-hidden rounded border border-[var(--color-review-accent)]/40 bg-[var(--color-review-accent)]/10 px-2 py-1.5 text-xs leading-[1.4] focus:border-[var(--color-review-accent)]/60 focus:outline-none"
           style={{
             minHeight: "calc(12px * 1.4 * 3 + 12px)",
-            borderColor: "hsl(from var(--color-review-accent) h s l / 0.4)",
           }}
           placeholder="Add a review note to chat (Shift-click + button to select range, Enter to submit, Shift+Enter for newline, Esc to cancel)&#10;j, k to iterate through hunks, m to toggle as read"
           value={noteText}
@@ -530,9 +537,9 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       });
     };
 
-    const handleSubmitNote = (reviewNote: string) => {
+    const handleSubmitNote = (data: ReviewNoteData) => {
       if (!onReviewNote) return;
-      onReviewNote(reviewNote);
+      onReviewNote(data);
       setSelection(null);
     };
 
diff --git a/src/browser/components/shared/ReviewBlock.tsx b/src/browser/components/shared/ReviewBlock.tsx
new file mode 100644
index 0000000000..fed2053525
--- /dev/null
+++ b/src/browser/components/shared/ReviewBlock.tsx
@@ -0,0 +1,209 @@
+/**
+ * ReviewBlock - Renders review data as styled components
+ *
+ * Used in:
+ * - UserMessage to display submitted reviews (from metadata)
+ * - ChatInput preview to show reviews before sending
+ */
+
+import React, { useState, useCallback, useRef, useMemo } from "react";
+import { MessageSquare, X, Pencil, Check } from "lucide-react";
+import { DiffRenderer } from "./DiffRenderer";
+import { Button } from "../ui/button";
+import { matchesKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
+import type { ReviewNoteDataForDisplay } from "@/common/types/message";
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SHARED INTERNAL COMPONENT
+// ═══════════════════════════════════════════════════════════════════════════════
+
+interface ReviewBlockCoreProps {
+  filePath: string;
+  lineRange: string;
+  code: string;
+  comment: string;
+  onRemove?: () => void;
+  onEditComment?: (newComment: string) => void;
+}
+
+/**
+ * Core review block rendering - used by both ReviewBlock and ReviewBlockFromData
+ */
+const ReviewBlockCore: React.FC<ReviewBlockCoreProps> = ({
+  filePath,
+  lineRange,
+  code,
+  comment,
+  onRemove,
+  onEditComment,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(comment);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Format code for diff display - add context markers if needed
+  const diffContent = useMemo(() => {
+    if (!code) return "";
+    const lines = code.split("\n");
+    const hasDiffMarkers = lines.some((l) => /^[+-\s]/.test(l));
+    if (hasDiffMarkers) return code;
+    return lines.map((l) => ` ${l}`).join("\n");
+  }, [code]);
+
+  const handleStartEdit = useCallback(() => {
+    setEditValue(comment);
+    setIsEditing(true);
+    setTimeout(() => textareaRef.current?.focus(), 0);
+  }, [comment]);
+
+  const handleSaveEdit = useCallback(() => {
+    if (onEditComment && editValue.trim() !== comment) {
+      onEditComment(editValue.trim());
+    }
+    setIsEditing(false);
+  }, [editValue, comment, onEditComment]);
+
+  const handleCancelEdit = useCallback(() => {
+    setEditValue(comment);
+    setIsEditing(false);
+  }, [comment]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (matchesKeybind(e, KEYBINDS.SAVE_EDIT)) {
+        e.preventDefault();
+        handleSaveEdit();
+      } else if (matchesKeybind(e, KEYBINDS.CANCEL_EDIT)) {
+        e.preventDefault();
+        handleCancelEdit();
+      }
+    },
+    [handleSaveEdit, handleCancelEdit]
+  );
+
+  return (
+    <div className="min-w-0 overflow-hidden rounded border border-[var(--color-review-accent)]/30 bg-[var(--color-review-accent)]/5">
+      {/* Header */}
+      <div className="flex items-center gap-1.5 border-b border-[var(--color-review-accent)]/20 bg-[var(--color-review-accent)]/10 px-2 py-1 text-xs">
+        <MessageSquare className="size-3 shrink-0 text-[var(--color-review-accent)]" />
+        <span className="text-primary min-w-0 flex-1 truncate font-mono">
+          {filePath}:{lineRange}
+        </span>
+        {onRemove && (
+          <button
+            type="button"
+            onClick={onRemove}
+            className="text-muted hover:text-error -mr-0.5 flex shrink-0 items-center justify-center rounded p-0.5 transition-colors"
+            title="Remove from message"
+          >
+            <X className="size-3" />
+          </button>
+        )}
+      </div>
+
+      {/* Code snippet - horizontal scroll for long lines, vertical scroll limited to max-h-64 */}
+      {code && (
+        <div className="max-h-64 overflow-auto border-b border-[var(--color-review-accent)]/20 text-[11px]">
+          <DiffRenderer
+            content={diffContent}
+            showLineNumbers={false}
+            fontSize="11px"
+            filePath={filePath}
+            maxHeight="none"
+            className="min-w-fit rounded-none"
+          />
+        </div>
+      )}
+
+      {/* Comment - editable when onEditComment provided */}
+      {(comment || onEditComment) && (
+        <div className="group/comment px-2 py-1">
+          {isEditing ? (
+            <div className="space-y-1">
+              <textarea
+                ref={textareaRef}
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className="text-primary w-full resize-none rounded border border-[var(--color-review-accent)]/40 bg-[var(--color-review-accent)]/10 px-1.5 py-1 text-xs focus:border-[var(--color-review-accent)]/60 focus:outline-none"
+                rows={2}
+                placeholder="Your comment..."
+              />
+              <div className="flex items-center justify-end gap-1">
+                <span className="text-muted mr-1 text-[10px]">⌘Enter save, Esc cancel</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 px-1.5 text-[10px]"
+                  onClick={handleCancelEdit}
+                >
+                  <X className="mr-0.5 size-2.5" />
+                  Cancel
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  className="h-5 px-1.5 text-[10px]"
+                  onClick={handleSaveEdit}
+                >
+                  <Check className="mr-0.5 size-2.5" />
+                  Save
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-start gap-1">
+              <blockquote className="text-primary flex-1 border-l-2 border-[var(--color-review-accent)] pl-1.5 text-xs italic">
+                {comment || <span className="text-muted">No comment</span>}
+              </blockquote>
+              {onEditComment && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-5 shrink-0 opacity-0 transition-opacity group-hover/comment:opacity-100 [&_svg]:size-3"
+                  onClick={handleStartEdit}
+                >
+                  <Pencil />
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// PUBLIC COMPONENT
+// ═══════════════════════════════════════════════════════════════════════════════
+
+interface ReviewBlockFromDataProps {
+  /** Structured review data (no parsing needed) */
+  data: ReviewNoteDataForDisplay;
+  /** Optional callback to remove the review */
+  onRemove?: () => void;
+  /** Optional callback to edit the comment */
+  onEditComment?: (newComment: string) => void;
+}
+
+/**
+ * ReviewBlock that takes structured data directly (preferred)
+ * Used when review data is available from muxMetadata
+ */
+export const ReviewBlockFromData: React.FC<ReviewBlockFromDataProps> = ({
+  data,
+  onRemove,
+  onEditComment,
+}) => {
+  return (
+    <ReviewBlockCore
+      filePath={data.filePath}
+      lineRange={data.lineRange}
+      code={data.selectedCode}
+      comment={data.userNote}
+      onRemove={onRemove}
+      onEditComment={onEditComment}
+    />
+  );
+};
diff --git a/src/browser/components/tools/FileEditToolCall.tsx b/src/browser/components/tools/FileEditToolCall.tsx
index ff2c52d518..53eaca55a1 100644
--- a/src/browser/components/tools/FileEditToolCall.tsx
+++ b/src/browser/components/tools/FileEditToolCall.tsx
@@ -25,6 +25,7 @@ import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/to
 import { useCopyToClipboard } from "@/browser/hooks/useCopyToClipboard";
 import { DiffContainer, DiffRenderer, SelectableDiffRenderer } from "../shared/DiffRenderer";
 import { KebabMenu, type KebabMenuItem } from "../KebabMenu";
+import type { ReviewNoteData } from "@/common/types/review";
 
 type FileEditOperationArgs =
   | FileEditReplaceStringToolArgs
@@ -41,13 +42,13 @@ interface FileEditToolCallProps {
   args: FileEditOperationArgs;
   result?: FileEditToolResult;
   status?: ToolStatus;
-  onReviewNote?: (note: string) => void;
+  onReviewNote?: (data: ReviewNoteData) => void;
 }
 
 function renderDiff(
   diff: string,
   filePath?: string,
-  onReviewNote?: (note: string) => void
+  onReviewNote?: (data: ReviewNoteData) => void
 ): React.ReactNode {
   try {
     const patches = parsePatch(diff);
diff --git a/src/browser/hooks/useReviews.ts b/src/browser/hooks/useReviews.ts
new file mode 100644
index 0000000000..60e82b8dec
--- /dev/null
+++ b/src/browser/hooks/useReviews.ts
@@ -0,0 +1,286 @@
+/**
+ * Hook for managing reviews per workspace
+ * Provides interface for adding, checking, and removing reviews
+ */
+
+import { useCallback, useMemo } from "react";
+import { usePersistedState } from "./usePersistedState";
+import { getReviewsKey } from "@/common/constants/storage";
+import type { Review, ReviewsState, ReviewNoteData } from "@/common/types/review";
+
+/**
+ * Generate a unique ID for a review
+ */
+function generateReviewId(): string {
+  return `review-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export interface UseReviewsReturn {
+  /** All reviews (pending, attached, and checked) */
+  reviews: Review[];
+  /** Count of pending reviews (not attached, not checked) */
+  pendingCount: number;
+  /** Count of attached reviews (in chat input draft) */
+  attachedCount: number;
+  /** Count of checked reviews */
+  checkedCount: number;
+  /** Reviews currently attached to chat input */
+  attachedReviews: Review[];
+  /** Add a new review from structured data (starts as attached) */
+  addReview: (data: ReviewNoteData) => Review;
+  /** Mark a review as attached to chat input */
+  attachReview: (reviewId: string) => void;
+  /** Detach a review from chat input (back to pending) */
+  detachReview: (reviewId: string) => void;
+  /** Mark a review as checked (sent) */
+  checkReview: (reviewId: string) => void;
+  /** Uncheck a review (mark as pending again) */
+  uncheckReview: (reviewId: string) => void;
+  /** Remove a review entirely */
+  removeReview: (reviewId: string) => void;
+  /** Update a review's note/comment */
+  updateReviewNote: (reviewId: string, newNote: string) => void;
+  /** Clear all checked reviews */
+  clearChecked: () => void;
+  /** Clear all reviews (for error recovery) */
+  clearAll: () => void;
+  /** Get a review by ID */
+  getReview: (reviewId: string) => Review | undefined;
+}
+
+/**
+ * Hook for managing reviews for a workspace
+ * Persists reviews to localStorage
+ */
+export function useReviews(workspaceId: string): UseReviewsReturn {
+  const [state, setState] = usePersistedState<ReviewsState>(
+    getReviewsKey(workspaceId),
+    {
+      workspaceId,
+      reviews: {},
+      lastUpdated: Date.now(),
+    },
+    { listener: true } // Enable cross-component sync so banner updates when AIView adds reviews
+  );
+
+  // Convert reviews object to sorted array (oldest first - newest at end)
+  const reviews = useMemo(() => {
+    return Object.values(state.reviews).sort((a, b) => a.createdAt - b.createdAt);
+  }, [state.reviews]);
+
+  // Filter reviews by status
+  const attachedReviews = useMemo(() => {
+    return reviews.filter((r) => r.status === "attached");
+  }, [reviews]);
+
+  // Count reviews by status
+  const pendingCount = useMemo(() => {
+    return reviews.filter((r) => r.status === "pending").length;
+  }, [reviews]);
+
+  const attachedCount = attachedReviews.length;
+
+  const checkedCount = useMemo(() => {
+    return reviews.filter((r) => r.status === "checked").length;
+  }, [reviews]);
+
+  const addReview = useCallback(
+    (data: ReviewNoteData): Review => {
+      const review: Review = {
+        id: generateReviewId(),
+        data,
+        status: "attached", // New reviews start attached to chat input
+        createdAt: Date.now(),
+      };
+
+      setState((prev) => ({
+        ...prev,
+        reviews: {
+          ...prev.reviews,
+          [review.id]: review,
+        },
+        lastUpdated: Date.now(),
+      }));
+
+      return review;
+    },
+    [setState]
+  );
+
+  const attachReview = useCallback(
+    (reviewId: string) => {
+      setState((prev) => {
+        const review = prev.reviews[reviewId];
+        if (!review || review.status === "attached") return prev;
+
+        return {
+          ...prev,
+          reviews: {
+            ...prev.reviews,
+            [reviewId]: {
+              ...review,
+              status: "attached",
+              statusChangedAt: Date.now(),
+            },
+          },
+          lastUpdated: Date.now(),
+        };
+      });
+    },
+    [setState]
+  );
+
+  const detachReview = useCallback(
+    (reviewId: string) => {
+      setState((prev) => {
+        const review = prev.reviews[reviewId];
+        if (review?.status !== "attached") return prev;
+
+        return {
+          ...prev,
+          reviews: {
+            ...prev.reviews,
+            [reviewId]: {
+              ...review,
+              status: "pending",
+              statusChangedAt: Date.now(),
+            },
+          },
+          lastUpdated: Date.now(),
+        };
+      });
+    },
+    [setState]
+  );
+
+  const checkReview = useCallback(
+    (reviewId: string) => {
+      setState((prev) => {
+        const review = prev.reviews[reviewId];
+        if (!review || review.status === "checked") return prev;
+
+        return {
+          ...prev,
+          reviews: {
+            ...prev.reviews,
+            [reviewId]: {
+              ...review,
+              status: "checked",
+              statusChangedAt: Date.now(),
+            },
+          },
+          lastUpdated: Date.now(),
+        };
+      });
+    },
+    [setState]
+  );
+
+  const uncheckReview = useCallback(
+    (reviewId: string) => {
+      setState((prev) => {
+        const review = prev.reviews[reviewId];
+        if (!review || review.status === "pending") return prev;
+
+        return {
+          ...prev,
+          reviews: {
+            ...prev.reviews,
+            [reviewId]: {
+              ...review,
+              status: "pending",
+              statusChangedAt: Date.now(),
+            },
+          },
+          lastUpdated: Date.now(),
+        };
+      });
+    },
+    [setState]
+  );
+
+  const removeReview = useCallback(
+    (reviewId: string) => {
+      setState((prev) => {
+        const { [reviewId]: _, ...rest } = prev.reviews;
+        return {
+          ...prev,
+          reviews: rest,
+          lastUpdated: Date.now(),
+        };
+      });
+    },
+    [setState]
+  );
+
+  const updateReviewNote = useCallback(
+    (reviewId: string, newNote: string) => {
+      setState((prev) => {
+        const review = prev.reviews[reviewId];
+        if (!review) return prev;
+
+        return {
+          ...prev,
+          reviews: {
+            ...prev.reviews,
+            [reviewId]: {
+              ...review,
+              data: {
+                ...review.data,
+                userNote: newNote,
+              },
+            },
+          },
+          lastUpdated: Date.now(),
+        };
+      });
+    },
+    [setState]
+  );
+
+  const clearChecked = useCallback(() => {
+    setState((prev) => {
+      const filtered = Object.fromEntries(
+        Object.entries(prev.reviews).filter(([_, r]) => r.status !== "checked")
+      );
+      return {
+        ...prev,
+        reviews: filtered,
+        lastUpdated: Date.now(),
+      };
+    });
+  }, [setState]);
+
+  const clearAll = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      reviews: {},
+      lastUpdated: Date.now(),
+    }));
+  }, [setState]);
+
+  const getReview = useCallback(
+    (reviewId: string): Review | undefined => {
+      return state.reviews[reviewId];
+    },
+    [state.reviews]
+  );
+
+  return {
+    reviews,
+    pendingCount,
+    attachedCount,
+    checkedCount,
+    attachedReviews,
+    addReview,
+    attachReview,
+    detachReview,
+    checkReview,
+    uncheckReview,
+    removeReview,
+    updateReviewNote,
+    clearChecked,
+    clearAll,
+    getReview,
+  };
+}
diff --git a/src/browser/stories/App.reviews.stories.tsx b/src/browser/stories/App.reviews.stories.tsx
new file mode 100644
index 0000000000..b2b053de21
--- /dev/null
+++ b/src/browser/stories/App.reviews.stories.tsx
@@ -0,0 +1,158 @@
+/**
+ * Stories for reviews feature
+ */
+
+import { appMeta, AppWithMocks, type AppStory } from "./meta.js";
+import { setupSimpleChatStory, setReviews, createReview } from "./storyHelpers";
+import { createUserMessage, createAssistantMessage } from "./mockFactory";
+
+export default {
+  ...appMeta,
+  title: "App/Reviews",
+};
+
+/**
+ * Shows reviews banner with multiple reviews in different states.
+ * Banner appears above chat input as a thin collapsible stripe.
+ */
+export const ReviewsBanner: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        const workspaceId = "ws-reviews";
+
+        // Set up reviews
+        setReviews(workspaceId, [
+          createReview(
+            "review-1",
+            "src/api/auth.ts",
+            "42-48",
+            "Consider using a constant for the token expiry",
+            "pending"
+          ),
+          createReview(
+            "review-2",
+            "src/utils/helpers.ts",
+            "15",
+            "This function could be simplified",
+            "pending"
+          ),
+          createReview(
+            "review-3",
+            "src/components/Button.tsx",
+            "23-25",
+            "Already addressed in another PR",
+            "checked"
+          ),
+        ]);
+
+        return setupSimpleChatStory({
+          workspaceId,
+          workspaceName: "feature/auth",
+          projectName: "my-app",
+          messages: [
+            createUserMessage("msg-1", "Add authentication to the API", { historySequence: 1 }),
+            createAssistantMessage("msg-2", "I'll help you add authentication.", {
+              historySequence: 2,
+            }),
+          ],
+        });
+      }}
+    />
+  ),
+};
+
+/**
+ * Shows empty state - no reviews banner when there are no reviews.
+ */
+export const NoReviews: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        return setupSimpleChatStory({
+          workspaceId: "ws-no-reviews",
+          workspaceName: "feature/clean",
+          projectName: "my-app",
+          messages: [
+            createUserMessage("msg-1", "Help me refactor this code", { historySequence: 1 }),
+            createAssistantMessage("msg-2", "I'd be happy to help with refactoring.", {
+              historySequence: 2,
+            }),
+          ],
+        });
+      }}
+    />
+  ),
+};
+
+/**
+ * Shows banner with only checked reviews (all pending resolved).
+ */
+export const AllReviewsChecked: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        const workspaceId = "ws-all-checked";
+
+        setReviews(workspaceId, [
+          createReview("review-1", "src/api/users.ts", "10-15", "Fixed the null check", "checked"),
+          createReview("review-2", "src/utils/format.ts", "42", "Added error handling", "checked"),
+        ]);
+
+        return setupSimpleChatStory({
+          workspaceId,
+          workspaceName: "feature/fixes",
+          projectName: "my-app",
+          messages: [
+            createUserMessage("msg-1", "Fix the reported issues", { historySequence: 1 }),
+            createAssistantMessage("msg-2", "All issues have been addressed.", {
+              historySequence: 2,
+            }),
+          ],
+        });
+      }}
+    />
+  ),
+};
+
+/**
+ * Shows banner with many reviews to test scrolling.
+ */
+export const ManyReviews: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        const workspaceId = "ws-many-reviews";
+
+        // Create many reviews to test scroll behavior
+        const reviewItems = Array.from({ length: 10 }, (_, i) =>
+          createReview(
+            `review-${i + 1}`,
+            `src/components/Feature${i + 1}.tsx`,
+            `${10 + i * 5}-${15 + i * 5}`,
+            `Review comment ${i + 1}: This needs attention`,
+            i < 7 ? "pending" : "checked"
+          )
+        );
+
+        setReviews(workspaceId, reviewItems);
+
+        return setupSimpleChatStory({
+          workspaceId,
+          workspaceName: "feature/big-refactor",
+          projectName: "my-app",
+          messages: [
+            createUserMessage("msg-1", "Review all the changes", { historySequence: 1 }),
+            createAssistantMessage(
+              "msg-2",
+              "I've reviewed the changes. There are several items to address.",
+              {
+                historySequence: 2,
+              }
+            ),
+          ],
+        });
+      }}
+    />
+  ),
+};
diff --git a/src/browser/stories/storyHelpers.ts b/src/browser/stories/storyHelpers.ts
index 19161f6e9a..b913870640 100644
--- a/src/browser/stories/storyHelpers.ts
+++ b/src/browser/stories/storyHelpers.ts
@@ -13,7 +13,10 @@ import {
   EXPANDED_PROJECTS_KEY,
   getInputKey,
   getModelKey,
+  getReviewsKey,
 } from "@/common/constants/storage";
+import { updatePersistedState } from "@/browser/hooks/usePersistedState";
+import type { Review, ReviewsState } from "@/common/types/review";
 import { DEFAULT_MODEL } from "@/common/constants/knownModels";
 import {
   createWorkspace,
@@ -57,6 +60,38 @@ export function expandProjects(projectPaths: string[]): void {
   localStorage.setItem(EXPANDED_PROJECTS_KEY, JSON.stringify(projectPaths));
 }
 
+/** Set reviews for a workspace */
+export function setReviews(workspaceId: string, reviews: Review[]): void {
+  const state: ReviewsState = {
+    workspaceId,
+    reviews: Object.fromEntries(reviews.map((r) => [r.id, r])),
+    lastUpdated: Date.now(),
+  };
+  updatePersistedState(getReviewsKey(workspaceId), state);
+}
+
+/** Create a sample review for stories */
+export function createReview(
+  id: string,
+  filePath: string,
+  lineRange: string,
+  note: string,
+  status: "pending" | "checked" = "pending"
+): Review {
+  return {
+    id,
+    data: {
+      filePath,
+      lineRange,
+      selectedCode: "// sample code",
+      userNote: note,
+    },
+    status,
+    createdAt: Date.now() - Math.random() * 3600000, // Random time in last hour
+    statusChangedAt: status === "checked" ? Date.now() : undefined,
+  };
+}
+
 // ═══════════════════════════════════════════════════════════════════════════════
 // GIT STATUS EXECUTOR
 // ═══════════════════════════════════════════════════════════════════════════════
diff --git a/src/browser/utils/chatCommands.ts b/src/browser/utils/chatCommands.ts
index f55bc9f9bf..809b1be044 100644
--- a/src/browser/utils/chatCommands.ts
+++ b/src/browser/utils/chatCommands.ts
@@ -615,19 +615,21 @@ export function prepareCompactionMessage(options: CompactionOptions): {
   const effectiveModel = resolveCompactionModel(options.model);
 
   // Create compaction metadata (will be stored in user message)
-  // Only include continueMessage if there's text or images to queue after compaction
+  // Only include continueMessage if there's text, images, or reviews to queue after compaction
   const hasText = options.continueMessage?.text;
   const hasImages =
     options.continueMessage?.imageParts && options.continueMessage.imageParts.length > 0;
+  const hasReviews = options.continueMessage?.reviews && options.continueMessage.reviews.length > 0;
   const compactData: CompactionRequestData = {
     model: effectiveModel,
     maxOutputTokens: options.maxOutputTokens,
     continueMessage:
-      hasText || hasImages
+      hasText || hasImages || hasReviews
         ? {
             text: options.continueMessage?.text ?? "",
             imageParts: options.continueMessage?.imageParts,
             model: options.continueMessage?.model ?? options.sendMessageOptions.model,
+            reviews: options.continueMessage?.reviews,
           }
         : undefined,
   };
diff --git a/src/browser/utils/messages/StreamingMessageAggregator.ts b/src/browser/utils/messages/StreamingMessageAggregator.ts
index 55b433e46d..4e0c8f9ec1 100644
--- a/src/browser/utils/messages/StreamingMessageAggregator.ts
+++ b/src/browser/utils/messages/StreamingMessageAggregator.ts
@@ -862,6 +862,9 @@ export class StreamingMessageAggregator {
                 }
               : undefined;
 
+          // Extract reviews from muxMetadata for rich UI display (orthogonal to message type)
+          const reviews = muxMeta?.reviews;
+
           displayedMessages.push({
             type: "user",
             id: message.id,
@@ -871,6 +874,7 @@ export class StreamingMessageAggregator {
             historySequence,
             timestamp: baseTimestamp,
             compactionRequest,
+            reviews,
           });
         } else if (message.role === "assistant") {
           // Assistant messages: each part becomes a separate DisplayedMessage
diff --git a/src/browser/utils/ui/keybinds.ts b/src/browser/utils/ui/keybinds.ts
index 2e3c6ecfda..130e4069ba 100644
--- a/src/browser/utils/ui/keybinds.ts
+++ b/src/browser/utils/ui/keybinds.ts
@@ -205,6 +205,9 @@ export const KEYBINDS = {
   /** Cancel editing message (exit edit mode) */
   CANCEL_EDIT: { key: "Escape" },
 
+  /** Save edit (Cmd/Ctrl+Enter) */
+  SAVE_EDIT: { key: "Enter", ctrl: true },
+
   /** Interrupt active stream (destructive - stops AI generation) */
   // Vim mode: Ctrl+C (familiar from terminal interrupt)
   // Non-Vim mode: Esc (intuitive cancel/stop key)
diff --git a/src/common/constants/storage.ts b/src/common/constants/storage.ts
index 80127b7b1a..48571c8aea 100644
--- a/src/common/constants/storage.ts
+++ b/src/common/constants/storage.ts
@@ -223,6 +223,15 @@ export function getReviewSearchStateKey(workspaceId: string): string {
   return `reviewSearchState:${workspaceId}`;
 }
 
+/**
+ * Get the localStorage key for reviews per workspace
+ * Stores: ReviewsState (reviews created from diff viewer - pending, attached, or checked)
+ * Format: "reviews:{workspaceId}"
+ */
+export function getReviewsKey(workspaceId: string): string {
+  return `reviews:${workspaceId}`;
+}
+
 /**
  * Get the localStorage key for auto-compaction enabled preference per workspace
  * Format: "autoCompaction:enabled:{workspaceId}"
@@ -253,6 +262,7 @@ const PERSISTENT_WORKSPACE_KEY_FUNCTIONS: Array<(workspaceId: string) => string>
   getReviewExpandStateKey,
   getFileTreeExpandStateKey,
   getReviewSearchStateKey,
+  getReviewsKey,
   getAutoCompactionEnabledKey,
   getStatusUrlKey,
   // Note: getAutoCompactionThresholdKey is per-model, not per-workspace
diff --git a/src/common/types/message.ts b/src/common/types/message.ts
index 791cd19fc2..fc402fc5dd 100644
--- a/src/common/types/message.ts
+++ b/src/common/types/message.ts
@@ -5,11 +5,31 @@ import type { ToolPolicy } from "@/common/utils/tools/toolPolicy";
 import type { ChatUsageDisplay } from "@/common/utils/tokens/usageAggregator";
 import type { ImagePart, MuxToolPartSchema } from "@/common/orpc/schemas";
 import type { z } from "zod";
+import { type ReviewNoteData, formatReviewForModel } from "./review";
 
-// Message to continue with after compaction
-export interface ContinueMessage {
+/**
+ * Review data stored in message metadata for display.
+ * Alias for ReviewNoteData - they have identical shape.
+ */
+export type ReviewNoteDataForDisplay = ReviewNoteData;
+
+/**
+ * Content that a user wants to send in a message.
+ * Shared between normal send and continue-after-compaction to ensure
+ * both paths handle the same fields (text, images, reviews).
+ */
+export interface UserMessageContent {
   text: string;
   imageParts?: ImagePart[];
+  /** Review data - formatted into message text AND stored in metadata for display */
+  reviews?: ReviewNoteDataForDisplay[];
+}
+
+/**
+ * Message to continue with after compaction.
+ * Extends UserMessageContent with model preference.
+ */
+export interface ContinueMessage extends UserMessageContent {
   model?: string;
 }
 
@@ -20,17 +40,53 @@ export interface CompactionRequestData {
   continueMessage?: ContinueMessage;
 }
 
-// Frontend-specific metadata stored in muxMetadata field
-// Backend stores this as-is without interpretation (black-box)
-export type MuxFrontendMetadata =
-  | {
-      type: "compaction-request";
-      rawCommand: string; // The original /compact command as typed by user (for display)
-      parsed: CompactionRequestData;
-    }
-  | {
-      type: "normal"; // Regular messages
-    };
+/**
+ * Process UserMessageContent into final message text and metadata.
+ * Used by both normal send path and backend continue message processing.
+ *
+ * @param content - The user message content (text, images, reviews)
+ * @param existingMetadata - Optional existing metadata to merge with (e.g., for compaction messages)
+ * @returns Object with finalText (reviews prepended) and metadata (reviews for display)
+ */
+export function prepareUserMessageForSend(
+  content: UserMessageContent,
+  existingMetadata?: MuxFrontendMetadata
+): {
+  finalText: string;
+  metadata: MuxFrontendMetadata | undefined;
+} {
+  const { text, reviews } = content;
+
+  // Format reviews into message text
+  const reviewsText = reviews?.length ? reviews.map(formatReviewForModel).join("\n\n") : "";
+  const finalText = reviewsText ? reviewsText + (text ? "\n\n" + text : "") : text;
+
+  // Build metadata with reviews for display
+  let metadata: MuxFrontendMetadata | undefined = existingMetadata;
+  if (reviews?.length) {
+    metadata = metadata ? { ...metadata, reviews } : { type: "normal", reviews };
+  }
+
+  return { finalText, metadata };
+}
+
+/** Base fields common to all metadata types */
+interface MuxFrontendMetadataBase {
+  /** Structured review data for rich UI display (orthogonal to message type) */
+  reviews?: ReviewNoteDataForDisplay[];
+}
+
+export type MuxFrontendMetadata = MuxFrontendMetadataBase &
+  (
+    | {
+        type: "compaction-request";
+        rawCommand: string; // The original /compact command as typed by user (for display)
+        parsed: CompactionRequestData;
+      }
+    | {
+        type: "normal"; // Regular messages
+      }
+  );
 
 // Our custom metadata type
 export interface MuxMetadata {
@@ -109,6 +165,8 @@ export type DisplayedMessage =
         rawCommand: string;
         parsed: CompactionRequestData;
       };
+      /** Structured review data for rich UI display (from muxMetadata) */
+      reviews?: ReviewNoteDataForDisplay[];
     }
   | {
       type: "assistant";
diff --git a/src/common/types/review.ts b/src/common/types/review.ts
index 2a4e2fe9ba..cdc0ba9e43 100644
--- a/src/common/types/review.ts
+++ b/src/common/types/review.ts
@@ -93,3 +93,65 @@ export interface ReviewStats {
   /** Number of unread hunks */
   unread: number;
 }
+
+/**
+ * Status of a review
+ * - pending: In banner, not attached to chat input
+ * - attached: Currently attached to chat input draft
+ * - checked: Marked as done (after being sent)
+ */
+export type ReviewStatus = "pending" | "attached" | "checked";
+
+/**
+ * Structured data for a review note.
+ * Passed from DiffRenderer when user creates a review.
+ * Stored as-is for rich UI display, formatted to message only when sending to chat.
+ */
+export interface ReviewNoteData {
+  /** File path being reviewed */
+  filePath: string;
+  /** Line range (e.g., "42" or "42-45") */
+  lineRange: string;
+  /** Selected code lines with line numbers and +/-/space indicators */
+  selectedCode: string;
+  /** User's review comment */
+  userNote: string;
+}
+
+/**
+ * A single review note
+ * Created when user adds a review note from the diff viewer
+ */
+export interface Review {
+  /** Unique identifier */
+  id: string;
+  /** Structured review data for rich UI display */
+  data: ReviewNoteData;
+  /** Current status */
+  status: ReviewStatus;
+  /** Timestamp when created */
+  createdAt: number;
+  /** Timestamp when status changed (checked/unchecked) */
+  statusChangedAt?: number;
+}
+
+/**
+ * Persisted state for reviews (per workspace)
+ * Contains reviews in all states: pending, attached, and checked
+ */
+export interface ReviewsState {
+  /** Workspace ID */
+  workspaceId: string;
+  /** All reviews keyed by ID */
+  reviews: Record<string, Review>;
+  /** Last update timestamp */
+  lastUpdated: number;
+}
+
+/**
+ * Format a ReviewNoteData into the message format for the model.
+ * Used when preparing reviews for sending to chat.
+ */
+export function formatReviewForModel(data: ReviewNoteData): string {
+  return `<review>\nRe ${data.filePath}:${data.lineRange}\n\`\`\`\n${data.selectedCode}\n\`\`\`\n> ${data.userNote.trim()}\n</review>`;
+}
diff --git a/src/node/services/agentSession.ts b/src/node/services/agentSession.ts
index 61503b301d..b15d13cc9d 100644
--- a/src/node/services/agentSession.ts
+++ b/src/node/services/agentSession.ts
@@ -22,7 +22,8 @@ import { createUnknownSendMessageError } from "@/node/services/utils/sendMessage
 import type { Result } from "@/common/types/result";
 import { Ok, Err } from "@/common/types/result";
 import { enforceThinkingPolicy } from "@/browser/utils/thinking/policy";
-import type { MuxFrontendMetadata } from "@/common/types/message";
+import type { MuxFrontendMetadata, ContinueMessage } from "@/common/types/message";
+import { prepareUserMessageForSend } from "@/common/types/message";
 import { createRuntime } from "@/node/runtime/runtimeFactory";
 import { MessageQueue } from "./messageQueue";
 import type { StreamEndEvent } from "@/common/types/stream";
@@ -33,7 +34,7 @@ import type { BackgroundProcessManager } from "./backgroundProcessManager";
 interface CompactionRequestMetadata {
   type: "compaction-request";
   parsed: {
-    continueMessage?: string;
+    continueMessage?: ContinueMessage;
   };
 }
 
@@ -393,25 +394,35 @@ export class AgentSession {
       typedMuxMetadata.parsed.continueMessage &&
       options
     ) {
-      // Strip out compaction-specific fields so the queued message is a fresh user message
-      // Use Omit to avoid unsafe destructuring of any-typed muxMetadata
       const continueMessage = typedMuxMetadata.parsed.continueMessage;
+
+      // Process the continue message content (handles reviews -> text formatting + metadata)
+      const { finalText, metadata } = prepareUserMessageForSend(continueMessage);
+
+      // Build options for the queued message (strip compaction-specific fields)
       const sanitizedOptions: Omit<
         SendMessageOptions,
         "muxMetadata" | "mode" | "editMessageId" | "imageParts" | "maxOutputTokens"
-      > & { imageParts?: typeof continueMessage.imageParts } = {
+      > & { imageParts?: typeof continueMessage.imageParts; muxMetadata?: typeof metadata } = {
         model: continueMessage.model ?? options.model,
         thinkingLevel: options.thinkingLevel,
         toolPolicy: options.toolPolicy,
         additionalSystemInstructions: options.additionalSystemInstructions,
         providerOptions: options.providerOptions,
       };
+
+      // Add image parts if present
       const continueImageParts = continueMessage.imageParts;
-      const continuePayload =
-        continueImageParts && continueImageParts.length > 0
-          ? { ...sanitizedOptions, imageParts: continueImageParts }
-          : sanitizedOptions;
-      this.messageQueue.add(continueMessage.text, continuePayload);
+      if (continueImageParts && continueImageParts.length > 0) {
+        sanitizedOptions.imageParts = continueImageParts;
+      }
+
+      // Add metadata with reviews if present
+      if (metadata) {
+        sanitizedOptions.muxMetadata = metadata;
+      }
+
+      this.messageQueue.add(finalText, sanitizedOptions);
       this.emitQueuedMessageChanged();
     }