🤖 Review panel read state tracking and visual improvements (#323)

## Overview

Implements comprehensive read state tracking for code review hunks with
visual improvements and workflow optimizations.

## Read State Tracking

- Content-based hunk IDs (hash of file path + line range + diff content)
ensure stable tracking across refreshes
- LRU eviction with 1024-entry limit prevents unbounded localStorage
growth
- Persisted per-workspace with localStorage
- Keyboard shortcut (m) to toggle read state
- Auto-collapse read hunks, auto-expand unread

## Visual Improvements

**Color System**
- Centralized review accent color (muted yellow/orange at 75% opacity)
- Blue color for read state indicators (strikethrough, borders)
- Removed hover border clash on active hunks
- Added anti-pattern comment for inline alpha usage

**FileTree**
- Strikethrough with blue color for fully-read files
- Dimmed text for unknown state (when file not loaded)
- Distinguished three states: unread (normal), fully read (dimmed +
strikethrough), unknown (dimmed only)

**Hunk Display**
- Active hunk gets yellow border for selection feedback
- Clicking line to comment activates parent hunk
- Read hunks show checkmark and blue border
- Collapsed state shows line count and read status

## Workflow Improvements

**Auto-navigation**
- Marking hunk as read (m) auto-advances to next unread hunk when "Show
read" is off
- Smart selection: next → previous → none
- Scroll selected hunk into view on j/k navigation
- Manual expand/collapse state respected independent of read state

**Review Notes**
- Keybind hints in placeholder: "j, k to iterate through hunks, m to
toggle as read"
- Shift-click to select line ranges
- Cmd+Enter to submit, Esc to cancel

## Testing

- Unit tests for LRU eviction logic
- Refactored to export `evictOldestReviews` from source (no duplication
in tests)

_Generated with `cmux`_

Author: ammar-agent

src/components/RightSidebar/CodeReview/FileTree.tsx

@@ -33,14 +33,42 @@ const TreeNode = styled.div<{ depth: number; isSelected: boolean }>`
   }
 `;
 
-const FileName = styled.span`
+const FileName = styled.span<{ isFullyRead?: boolean; isUnknownState?: boolean }>`
   color: #ccc;
   flex: 1;
+  ${(props) =>
+    props.isFullyRead &&
+    `
+    color: #666;
+    text-decoration: line-through;
+    text-decoration-color: var(--color-read);
+    text-decoration-thickness: 2px;
+  `}
+  ${(props) =>
+    props.isUnknownState &&
+    !props.isFullyRead &&
+    `
+    color: #666;
+  `}
 `;
 
-const DirectoryName = styled.span`
+const DirectoryName = styled.span<{ isFullyRead?: boolean; isUnknownState?: boolean }>`
   color: #888;
   flex: 1;
+  ${(props) =>
+    props.isFullyRead &&
+    `
+    color: #666;
+    text-decoration: line-through;
+    text-decoration-color: var(--color-read);
+    text-decoration-thickness: 2px;
+  `}
+  ${(props) =>
+    props.isUnknownState &&
+    !props.isFullyRead &&
+    `
+    color: #666;
+  `}
 `;
 
 const DirectoryStats = styled.span<{ isOpen: boolean }>`
@@ -117,13 +145,56 @@ const EmptyState = styled.div`
   text-align: center;
 `;
 
+/**
+ * Compute read status for a directory by recursively checking all descendant files
+ * Returns "fully-read" if all files are fully read, "unknown" if any file has unknown status, null otherwise
+ */
+function computeDirectoryReadStatus(
+  node: FileTreeNode,
+  getFileReadStatus?: (filePath: string) => { total: number; read: number } | null
+): "fully-read" | "unknown" | null {
+  if (!node.isDirectory || !getFileReadStatus) return null;
+
+  let hasUnknown = false;
+  let fileCount = 0;
+  let fullyReadCount = 0;
+
+  const checkNode = (n: FileTreeNode) => {
+    if (n.isDirectory) {
+      // Recurse into children
+      n.children.forEach(checkNode);
+    } else {
+      // Check file status
+      fileCount++;
+      const status = getFileReadStatus(n.path);
+      if (status === null) {
+        hasUnknown = true;
+      } else if (status.read === status.total && status.total > 0) {
+        fullyReadCount++;
+      }
+    }
+  };
+
+  checkNode(node);
+
+  // If any file has unknown state, directory is unknown
+  if (hasUnknown) return "unknown";
+
+  // If all files are fully read, directory is fully read
+  if (fileCount > 0 && fullyReadCount === fileCount) return "fully-read";
+
+  // Otherwise, directory has partial/no read state
+  return null;
+}
+
 const TreeNodeContent: React.FC<{
   node: FileTreeNode;
   depth: number;
   selectedPath: string | null;
   onSelectFile: (path: string | null) => void;
   commonPrefix: string | null;
-}> = ({ node, depth, selectedPath, onSelectFile, commonPrefix }) => {
+  getFileReadStatus?: (filePath: string) => { total: number; read: number } | null;
+}> = ({ node, depth, selectedPath, onSelectFile, commonPrefix, getFileReadStatus }) => {
   const [isOpen, setIsOpen] = useState(depth < 2); // Auto-expand first 2 levels
 
   const handleClick = (e: React.MouseEvent) => {
@@ -154,6 +225,20 @@ const TreeNodeContent: React.FC<{
 
   const isSelected = selectedPath === node.path;
 
+  // Compute read status for files and directories
+  let isFullyRead = false;
+  let isUnknownState = false;
+
+  if (node.isDirectory) {
+    const dirStatus = computeDirectoryReadStatus(node, getFileReadStatus);
+    isFullyRead = dirStatus === "fully-read";
+    isUnknownState = dirStatus === "unknown";
+  } else if (getFileReadStatus) {
+    const readStatus = getFileReadStatus(node.path);
+    isFullyRead = readStatus ? readStatus.read === readStatus.total && readStatus.total > 0 : false;
+    isUnknownState = readStatus === null;
+  }
+
   return (
     <>
       <TreeNode depth={depth} isSelected={isSelected} onClick={handleClick}>
@@ -162,7 +247,9 @@ const TreeNodeContent: React.FC<{
             <ToggleIcon isOpen={isOpen} data-toggle onClick={handleToggleClick}>
               ▶
             </ToggleIcon>
-            <DirectoryName>{node.name || "/"}</DirectoryName>
+            <DirectoryName isFullyRead={isFullyRead} isUnknownState={isUnknownState}>
+              {node.name || "/"}
+            </DirectoryName>
             {node.totalStats &&
               (node.totalStats.additions > 0 || node.totalStats.deletions > 0) && (
                 <DirectoryStats isOpen={isOpen}>
@@ -184,7 +271,9 @@ const TreeNodeContent: React.FC<{
         ) : (
           <>
             <span style={{ width: "12px" }} />
-            <FileName>{node.name}</FileName>
+            <FileName isFullyRead={isFullyRead} isUnknownState={isUnknownState}>
+              {node.name}
+            </FileName>
             {node.stats && (
               <Stats>
                 {node.stats.additions > 0 && <Additions>+{node.stats.additions}</Additions>}
@@ -205,6 +294,7 @@ const TreeNodeContent: React.FC<{
             selectedPath={selectedPath}
             onSelectFile={onSelectFile}
             commonPrefix={commonPrefix}
+            getFileReadStatus={getFileReadStatus}
           />
         ))}
     </>
@@ -217,6 +307,7 @@ interface FileTreeExternalProps {
   onSelectFile: (path: string | null) => void;
   isLoading?: boolean;
   commonPrefix?: string | null;
+  getFileReadStatus?: (filePath: string) => { total: number; read: number } | null;
 }
 
 export const FileTree: React.FC<FileTreeExternalProps> = ({
@@ -225,6 +316,7 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
   onSelectFile,
   isLoading = false,
   commonPrefix = null,
+  getFileReadStatus,
 }) => {
   // Find the node at the common prefix path to start rendering from
   const startNode = React.useMemo(() => {
@@ -262,6 +354,7 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
               selectedPath={selectedPath}
               onSelectFile={onSelectFile}
               commonPrefix={commonPrefix}
+              getFileReadStatus={getFileReadStatus}
             />
           ))
         ) : (

src/components/RightSidebar/CodeReview/HunkViewer.tsx

@@ -10,11 +10,13 @@ import { SelectableDiffRenderer } from "../../shared/DiffRenderer";
 interface HunkViewerProps {
   hunk: DiffHunk;
   isSelected?: boolean;
+  isRead?: boolean;
   onClick?: () => void;
+  onToggleRead?: () => void;
   onReviewNote?: (note: string) => void;
 }
 
-const HunkContainer = styled.div<{ isSelected: boolean }>`
+const HunkContainer = styled.div<{ isSelected: boolean; isRead: boolean }>`
   background: #1e1e1e;
   border: 1px solid #3e3e42;
   border-radius: 4px;
@@ -24,18 +26,21 @@ const HunkContainer = styled.div<{ isSelected: boolean }>`
   transition: all 0.2s ease;
 
   ${(props) =>
-    props.isSelected &&
+    props.isRead &&
     `
-    border-color: #007acc;
-    box-shadow: 0 0 0 1px #007acc;
+    border-color: var(--color-read);
   `}
 
-  &:hover {
-    border-color: #007acc;
-  }
+  ${(props) =>
+    props.isSelected &&
+    `
+    border-color: var(--color-review-accent);
+    box-shadow: 0 0 0 1px var(--color-review-accent);
+  `}
 `;
 
 const HunkHeader = styled.div`
+  /* Keep grayscale to avoid clashing with green/red LoC indicators */
   background: #252526;
   padding: 8px 12px;
   border-bottom: 1px solid #3e3e42;
@@ -44,6 +49,7 @@ const HunkHeader = styled.div`
   align-items: center;
   font-family: var(--font-monospace);
   font-size: 12px;
+  gap: 8px;
 `;
 
 const FilePath = styled.div`
@@ -124,19 +130,64 @@ const RenameInfo = styled.div`
   }
 `;
 
+const ReadIndicator = styled.span`
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-read);
+  font-size: 14px;
+  margin-right: 4px;
+`;
+
+const ToggleReadButton = styled.button`
+  background: transparent;
+  border: 1px solid #3e3e42;
+  border-radius: 3px;
+  padding: 2px 6px;
+  color: #888;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--color-read);
+    color: var(--color-read);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+
 export const HunkViewer: React.FC<HunkViewerProps> = ({
   hunk,
   isSelected,
+  isRead = false,
   onClick,
+  onToggleRead,
   onReviewNote,
 }) => {
-  const [isExpanded, setIsExpanded] = useState(true);
+  // Collapse by default if marked as read
+  const [isExpanded, setIsExpanded] = useState(!isRead);
+
+  // Auto-collapse when marked as read, auto-expand when unmarked
+  React.useEffect(() => {
+    setIsExpanded(!isRead);
+  }, [isRead]);
 
   const handleToggleExpand = (e: React.MouseEvent) => {
     e.stopPropagation();
     setIsExpanded(!isExpanded);
   };
 
+  const handleToggleRead = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onToggleRead?.();
+  };
+
   // Parse diff lines
   const diffLines = hunk.content.split("\n").filter((line) => line.length > 0);
   const lineCount = diffLines.length;
@@ -153,9 +204,11 @@ export const HunkViewer: React.FC<HunkViewerProps> = ({
   return (
     <HunkContainer
       isSelected={isSelected ?? false}
+      isRead={isRead}
       onClick={onClick}
       role="button"
       tabIndex={0}
+      data-hunk-id={hunk.id}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
@@ -164,6 +217,7 @@ export const HunkViewer: React.FC<HunkViewerProps> = ({
       }}
     >
       <HunkHeader>
+        {isRead && <ReadIndicator title="Marked as read">✓</ReadIndicator>}
         <FilePath>{hunk.filePath}</FilePath>
         <LineInfo>
           {!isPureRename && (
@@ -175,6 +229,11 @@ export const HunkViewer: React.FC<HunkViewerProps> = ({
           <LineCount>
             ({lineCount} {lineCount === 1 ? "line" : "lines"})
           </LineCount>
+          {onToggleRead && (
+            <ToggleReadButton onClick={handleToggleRead} title="Mark as read (m)">
+              {isRead ? "○" : "◉"}
+            </ToggleReadButton>
+          )}
         </LineInfo>
       </HunkHeader>
 
@@ -190,11 +249,12 @@ export const HunkViewer: React.FC<HunkViewerProps> = ({
             oldStart={hunk.oldStart}
             newStart={hunk.newStart}
             onReviewNote={onReviewNote}
+            onLineClick={onClick}
           />
         </HunkContent>
       ) : (
         <CollapsedIndicator onClick={handleToggleExpand}>
-          Click to expand ({lineCount} lines)
+          {isRead && "Hunk marked as read. "}Click to expand ({lineCount} lines)
         </CollapsedIndicator>
       )}
 

src/components/RightSidebar/CodeReview/ReviewControls.tsx

@@ -166,6 +166,10 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
     onFiltersChange({ ...filters, includeUncommitted: e.target.checked });
   };
 
+  const handleShowReadToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onFiltersChange({ ...filters, showReadHunks: e.target.checked });
+  };
+
   const handleSetDefault = () => {
     setDefaultBase(filters.diffBase);
   };
@@ -210,6 +214,11 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         Uncommitted
       </CheckboxLabel>
 
+      <CheckboxLabel>
+        <input type="checkbox" checked={filters.showReadHunks} onChange={handleShowReadToggle} />
+        Show read
+      </CheckboxLabel>
+
       <UntrackedStatus
         workspaceId={workspaceId}
         workspacePath={workspacePath}
@@ -220,7 +229,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
       <Separator />
 
       <StatBadge>
-        {stats.total} {stats.total === 1 ? "hunk" : "hunks"}
+        {stats.read} read / {stats.total} total
       </StatBadge>
     </ControlsContainer>
   );