🤖 Preserve hunk expand/collapse state and centralize keybinds (#332)

Remembers users' manual expand/collapse choices in Review tab,
centralizes keybinds, and fixes Space key to operate on selected hunk.

## Problems
1. When users manually expand or collapse hunks, their choices are lost
on remount (e.g., switching workspaces and back)
2. Keybind strings hardcoded in components instead of centralized
3. Space key operated on focused (blue border) hunk instead of selected
(yellow border) hunk during j/k navigation

## Solutions

### Persistent Expand/Collapse State
- Store per-workspace hunk expand state in localStorage via
`usePersistedState`
- Key: `reviewExpandState:{workspaceId}` → maps hunkId to isExpanded
boolean
- Manual choices override automatic collapse logic (read status, size
threshold)
- Storage copies on workspace fork, clears on workspace deletion
- Refactored with `PERSISTENT_WORKSPACE_KEY_FUNCTIONS` array for DRY

### Centralized Keybinds
- Added `TOGGLE_HUNK_COLLAPSE` to `KEYBINDS` registry in
`src/utils/ui/keybinds.ts`
- All keybind displays use `formatKeybind()` for dynamic OS-appropriate
formatting
- Added special handling for space key to display as "Space" (not
invisible whitespace)

### Fixed Space Key Behavior
- Removed confusing blue focus ring from HunkContainer
- Moved Space key handler from HunkViewer to ReviewPanel level
- Space now operates on selected (yellow border) hunk, not focused
element
- All keyboard shortcuts (j/k/m/Space) consistently operate on same
selection state

## Behavior

**Priority order for expand state:**
1. **Manual state** (user clicked expand/collapse or pressed Space) →
persisted
2. **Read status** (marked as read) → collapsed
3. **Size threshold** (>200 lines) → collapsed
4. **Default** → expanded

**Keybind Display:**
- Expand indicator: "Click to expand (N lines) or press Space"
- Collapse indicator: "Click here or press Space to collapse"
- Mark as read: "Mark as read (m)"
- All keybinds show OS-appropriate format (e.g., ⌘ on Mac, Ctrl+ on
Windows/Linux)

**Keyboard Navigation:**
- `j/k` - Navigate between hunks (updates yellow border selection)
- `m` - Toggle read state on selected hunk
- `Space` - Toggle expand/collapse on selected hunk
- All operations work on the yellow-bordered (selected) hunk

_Generated with `cmux`_

Author: ammar-agent

src/components/RightSidebar/CodeReview/HunkViewer.tsx

@@ -7,14 +7,19 @@ import styled from "@emotion/styled";
 import type { DiffHunk } from "@/types/review";
 import { SelectableDiffRenderer } from "../../shared/DiffRenderer";
 import { Tooltip, TooltipWrapper } from "../../Tooltip";
+import { usePersistedState } from "@/hooks/usePersistedState";
+import { getReviewExpandStateKey } from "@/constants/storage";
+import { KEYBINDS, formatKeybind } from "@/utils/ui/keybinds";
 
 interface HunkViewerProps {
   hunk: DiffHunk;
   hunkId: string;
+  workspaceId: string;
   isSelected?: boolean;
   isRead?: boolean;
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   onToggleRead?: (e: React.MouseEvent<HTMLElement>) => void;
+  onRegisterToggleExpand?: (hunkId: string, toggleFn: () => void) => void;
   onReviewNote?: (note: string) => void;
 }
 
@@ -27,6 +32,12 @@ const HunkContainer = styled.div<{ isSelected: boolean; isRead: boolean }>`
   cursor: pointer;
   transition: all 0.2s ease;
 
+  /* Remove default focus ring - keyboard navigation uses isSelected state */
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
   ${(props) =>
     props.isRead &&
     `
@@ -165,7 +176,17 @@ const ToggleReadButton = styled.button`
 `;
 
 export const HunkViewer = React.memo<HunkViewerProps>(
-  ({ hunk, hunkId, isSelected, isRead = false, onClick, onToggleRead, onReviewNote }) => {
+  ({
+    hunk,
+    hunkId,
+    workspaceId,
+    isSelected,
+    isRead = false,
+    onClick,
+    onToggleRead,
+    onRegisterToggleExpand,
+    onReviewNote,
+  }) => {
     // Parse diff lines (memoized - only recompute if hunk.content changes)
     // Must be done before state initialization to determine initial collapse state
     const { lineCount, additions, deletions, isLargeHunk } = React.useMemo(() => {
@@ -179,23 +200,69 @@ export const HunkViewer = React.memo<HunkViewerProps>(
       };
     }, [hunk.content]);
 
-    // Collapse by default if marked as read OR if hunk has >200 lines
-    const [isExpanded, setIsExpanded] = useState(() => !isRead && !isLargeHunk);
+    // Persist manual expand/collapse state across remounts per workspace
+    // Maps hunkId -> isExpanded for user's manual preferences
+    // Enable listener to synchronize updates across all HunkViewer instances
+    const [expandStateMap, setExpandStateMap] = usePersistedState<Record<string, boolean>>(
+      getReviewExpandStateKey(workspaceId),
+      {},
+      { listener: true }
+    );
 
-    // Auto-collapse when marked as read, auto-expand when unmarked (but respect large hunk threshold)
+    // Check if user has manually set expand state for this hunk
+    const hasManualState = hunkId in expandStateMap;
+    const manualExpandState = expandStateMap[hunkId];
+
+    // Determine initial expand state (priority: manual > read status > size)
+    const [isExpanded, setIsExpanded] = useState(() => {
+      if (hasManualState) {
+        return manualExpandState;
+      }
+      return !isRead && !isLargeHunk;
+    });
+
+    // Auto-collapse when marked as read, auto-expand when unmarked (unless user manually set)
     React.useEffect(() => {
+      // Don't override manual expand/collapse choices
+      if (hasManualState) {
+        return;
+      }
+
       if (isRead) {
         setIsExpanded(false);
       } else if (!isLargeHunk) {
         setIsExpanded(true);
       }
       // Note: When unmarking as read, large hunks remain collapsed
-    }, [isRead, isLargeHunk]);
+    }, [isRead, isLargeHunk, hasManualState]);
 
-    const handleToggleExpand = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      setIsExpanded(!isExpanded);
-    };
+    // Sync local state with persisted state when it changes
+    React.useEffect(() => {
+      if (hasManualState) {
+        setIsExpanded(manualExpandState);
+      }
+    }, [hasManualState, manualExpandState]);
+
+    const handleToggleExpand = React.useCallback(
+      (e?: React.MouseEvent) => {
+        e?.stopPropagation();
+        const newExpandState = !isExpanded;
+        setIsExpanded(newExpandState);
+        // Persist manual expand/collapse choice
+        setExpandStateMap((prev) => ({
+          ...prev,
+          [hunkId]: newExpandState,
+        }));
+      },
+      [isExpanded, hunkId, setExpandStateMap]
+    );
+
+    // Register toggle method with parent component
+    React.useEffect(() => {
+      if (onRegisterToggleExpand) {
+        onRegisterToggleExpand(hunkId, handleToggleExpand);
+      }
+    }, [hunkId, onRegisterToggleExpand, handleToggleExpand]);
 
     const handleToggleRead = (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
@@ -214,13 +281,6 @@ export const HunkViewer = React.memo<HunkViewerProps>(
         role="button"
         tabIndex={0}
         data-hunk-id={hunkId}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            // Cast to MouseEvent-like for onClick handler
-            onClick?.(e as unknown as React.MouseEvent<HTMLElement>);
-          }
-        }}
       >
         <HunkHeader>
           {isRead && (
@@ -247,12 +307,12 @@ export const HunkViewer = React.memo<HunkViewerProps>(
                 <ToggleReadButton
                   data-hunk-id={hunkId}
                   onClick={handleToggleRead}
-                  aria-label="Mark as read (m)"
+                  aria-label={`Mark as read (${formatKeybind(KEYBINDS.TOGGLE_HUNK_READ)})`}
                 >
                   {isRead ? "○" : "◉"}
                 </ToggleReadButton>
                 <Tooltip align="right" position="top">
-                  Mark as read (m)
+                  Mark as read ({formatKeybind(KEYBINDS.TOGGLE_HUNK_READ)})
                 </Tooltip>
               </TooltipWrapper>
             )}
@@ -283,12 +343,15 @@ export const HunkViewer = React.memo<HunkViewerProps>(
           </HunkContent>
         ) : (
           <CollapsedIndicator onClick={handleToggleExpand}>
-            {isRead && "Hunk marked as read. "}Click to expand ({lineCount} lines)
+            {isRead && "Hunk marked as read. "}Click to expand ({lineCount} lines) or press{" "}
+            {formatKeybind(KEYBINDS.TOGGLE_HUNK_COLLAPSE)}
           </CollapsedIndicator>
         )}
 
-        {isLargeHunk && isExpanded && !isPureRename && (
-          <CollapsedIndicator onClick={handleToggleExpand}>Click to collapse</CollapsedIndicator>
+        {hasManualState && isExpanded && !isPureRename && (
+          <CollapsedIndicator onClick={handleToggleExpand}>
+            Click here or press {formatKeybind(KEYBINDS.TOGGLE_HUNK_COLLAPSE)} to collapse
+          </CollapsedIndicator>
         )}
       </HunkContainer>
     );

src/components/RightSidebar/CodeReview/ReviewPanel.tsx

@@ -3,7 +3,7 @@
  * Displays diff hunks for viewing changes in the workspace
  */
 
-import React, { useState, useEffect, useMemo, useCallback } from "react";
+import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import styled from "@emotion/styled";
 import { HunkViewer } from "./HunkViewer";
 import { ReviewControls } from "./ReviewControls";
@@ -286,6 +286,8 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
   const [refreshTrigger, setRefreshTrigger] = useState(0);
   const [fileTree, setFileTree] = useState<FileTreeNode | null>(null);
   const [commonPrefix, setCommonPrefix] = useState<string | null>(null);
+  // Map of hunkId -> toggle function for expand/collapse
+  const toggleExpandFnsRef = useRef<Map<string, () => void>>(new Map());
 
   // Persist file filter per workspace
   const [selectedFilePath, setSelectedFilePath] = usePersistedState<string | null>(
@@ -539,6 +541,10 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
     [handleToggleRead]
   );
 
+  const handleRegisterToggleExpand = useCallback((hunkId: string, toggleFn: () => void) => {
+    toggleExpandFnsRef.current.set(hunkId, toggleFn);
+  }, []);
+
   // Calculate stats
   const stats = useMemo(() => {
     const total = hunks.length;
@@ -598,6 +604,13 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
         // Toggle read state of selected hunk
         e.preventDefault();
         handleToggleRead(selectedHunkId);
+      } else if (matchesKeybind(e, KEYBINDS.TOGGLE_HUNK_COLLAPSE)) {
+        // Toggle expand/collapse state of selected hunk
+        e.preventDefault();
+        const toggleFn = toggleExpandFnsRef.current.get(selectedHunkId);
+        if (toggleFn) {
+          toggleFn();
+        }
       }
     };
 
@@ -698,10 +711,12 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                       key={hunk.id}
                       hunk={hunk}
                       hunkId={hunk.id}
+                      workspaceId={workspaceId}
                       isSelected={isSelected}
                       isRead={hunkIsRead}
                       onClick={handleHunkClick}
                       onToggleRead={handleHunkToggleRead}
+                      onRegisterToggleExpand={handleRegisterToggleExpand}
                       onReviewNote={onReviewNote}
                     />
                   );

src/constants/storage.ts

@@ -84,23 +84,43 @@ export function getCompactContinueMessageKey(workspaceId: string): string {
   return `compactContinueMessage:${workspaceId}`;
 }
 
+/**
+ * Get the localStorage key for hunk expand/collapse state in Review tab
+ * Stores user's manual expand/collapse preferences per hunk
+ * Format: "reviewExpandState:{workspaceId}"
+ */
+export function getReviewExpandStateKey(workspaceId: string): string {
+  return `reviewExpandState:${workspaceId}`;
+}
+
+/**
+ * List of workspace-scoped key functions that should be copied on fork and deleted on removal
+ * Note: Excludes ephemeral keys like getCompactContinueMessageKey
+ */
+const PERSISTENT_WORKSPACE_KEY_FUNCTIONS: Array<(workspaceId: string) => string> = [
+  getModelKey,
+  getInputKey,
+  getModeKey,
+  getThinkingLevelKey,
+  getAutoRetryKey,
+  getRetryStateKey,
+  getReviewExpandStateKey,
+];
+
+/**
+ * Additional ephemeral keys to delete on workspace removal (not copied on fork)
+ */
+const EPHEMERAL_WORKSPACE_KEY_FUNCTIONS: Array<(workspaceId: string) => string> = [
+  getCancelledCompactionKey,
+  getCompactContinueMessageKey,
+];
+
 /**
  * Copy all workspace-specific localStorage keys from source to destination workspace
- * This includes: model, input, mode, thinking level, auto-retry, retry state
+ * This includes: model, input, mode, thinking level, auto-retry, retry state, review expand state
  */
 export function copyWorkspaceStorage(sourceWorkspaceId: string, destWorkspaceId: string): void {
-  // List of key-generating functions to copy
-  // Note: We deliberately skip getCompactContinueMessageKey as it's ephemeral
-  const keyFunctions: Array<(workspaceId: string) => string> = [
-    getModelKey,
-    getInputKey,
-    getModeKey,
-    getThinkingLevelKey,
-    getAutoRetryKey,
-    getRetryStateKey,
-  ];
-
-  for (const getKey of keyFunctions) {
+  for (const getKey of PERSISTENT_WORKSPACE_KEY_FUNCTIONS) {
     const sourceKey = getKey(sourceWorkspaceId);
     const destKey = getKey(destWorkspaceId);
     const value = localStorage.getItem(sourceKey);
@@ -109,3 +129,19 @@ export function copyWorkspaceStorage(sourceWorkspaceId: string, destWorkspaceId:
     }
   }
 }
+
+/**
+ * Delete all workspace-specific localStorage keys for a workspace
+ * Should be called when a workspace is deleted to prevent orphaned data
+ */
+export function deleteWorkspaceStorage(workspaceId: string): void {
+  const allKeyFunctions = [
+    ...PERSISTENT_WORKSPACE_KEY_FUNCTIONS,
+    ...EPHEMERAL_WORKSPACE_KEY_FUNCTIONS,
+  ];
+
+  for (const getKey of allKeyFunctions) {
+    const key = getKey(workspaceId);
+    localStorage.removeItem(key);
+  }
+}

src/hooks/useWorkspaceManagement.ts

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from "react";
 import type { FrontendWorkspaceMetadata } from "@/types/workspace";
 import type { WorkspaceSelection } from "@/components/ProjectSidebar";
 import type { ProjectConfig } from "@/config";
+import { deleteWorkspaceStorage } from "@/constants/storage";
 
 interface UseWorkspaceManagementProps {
   selectedWorkspace: WorkspaceSelection | null;
@@ -118,6 +119,9 @@ export function useWorkspaceManagement({
     ): Promise<{ success: boolean; error?: string }> => {
       const result = await window.api.workspace.remove(workspaceId, options);
       if (result.success) {
+        // Clean up workspace-specific localStorage keys
+        deleteWorkspaceStorage(workspaceId);
+
         // Backend has already updated the config - reload projects to get updated state
         const projectsList = await window.api.projects.list();
         const loadedProjects = new Map<string, ProjectConfig>(projectsList);

src/utils/ui/keybinds.ts

@@ -163,8 +163,15 @@ export function formatKeybind(keybind: Keybind): string {
     if (keybind.meta) parts.push("Meta");
   }
 
-  // Add the key (capitalize single letters)
-  const key = keybind.key.length === 1 ? keybind.key.toUpperCase() : keybind.key;
+  // Add the key (handle special cases, then capitalize single letters)
+  let key: string;
+  if (keybind.key === " ") {
+    key = "Space";
+  } else if (keybind.key.length === 1) {
+    key = keybind.key.toUpperCase();
+  } else {
+    key = keybind.key;
+  }
   parts.push(key);
 
   return isMac() ? parts.join("\u00B7") : parts.join("+"); // · on Mac, + elsewhere
@@ -257,4 +264,7 @@ export const KEYBINDS = {
 
   /** Mark selected hunk as read/unread in Code Review panel */
   TOGGLE_HUNK_READ: { key: "m" },
+
+  /** Toggle hunk expand/collapse in Code Review panel */
+  TOGGLE_HUNK_COLLAPSE: { key: " " },
 } as const;