🤖 Add untracked files status indicator to Code Review (#318)

## Summary

Adds an UntrackedStatus component to the Code Review panel that displays
the count of untracked files with an interactive tooltip for managing
them.

## Changes

### New UntrackedStatus Component
- Shows "N Untracked" badge next to the Dirty checkbox
- Subtle styling when count is 0, highlighted (amber) when files exist
- Interactive tooltip on click showing list of untracked files
- "Track All" button to stage all untracked files at once
- Integrates with refresh button to reload on Ctrl+R

### Bug Fixes
- Fixed RefreshButton tooltip stuck on "Refreshing..." by splitting
useEffect into separate concerns
- Added performance pattern documentation to AGENTS.md about avoiding
O(n) IPC calls

### UX Improvements
- UntrackedStatus loads independently without blocking diff/tree loading
- Uses single IPC call instead of O(n) calls per file
- Consistent loading behavior with other components

## Testing

- Verified untracked files display correctly
- Tested "Track All" button stages files properly
- Confirmed refresh button reloads all three data sources
- Tooltip dismisses when clicking outside

_Generated with `cmux`_

Author: ammar-agent

docs/AGENTS.md

@@ -139,6 +139,10 @@ in `/tmp/ai-sdk-docs/**.mdx`.
 - Workspaces using git worktrees
 - Configuration persisted to `~/.cmux/config.json`
 
+## Performance Patterns
+
+**Avoid O(n) IPC calls from Frontend->Backend.** When displaying lists of items, fetch them in a single IPC call and process in the frontend. Never loop over items in the frontend making separate IPC calls for each.
+
 ## Package Manager
 
 - **Using bun** - All dependencies are managed with bun (not npm)

src/components/RightSidebar/CodeReview/RefreshButton.tsx

@@ -64,7 +64,7 @@ export const RefreshButton: React.FC<RefreshButtonProps> = ({ onClick, isLoading
   const [animationState, setAnimationState] = useState<"idle" | "spinning" | "stopping">("idle");
   const spinOnceTimeoutRef = useRef<number | null>(null);
 
-  // Manage animation state based on loading prop
+  // Watch isLoading changes and manage animation transitions
   useEffect(() => {
     if (isLoading) {
       // Start spinning
@@ -83,13 +83,16 @@ export const RefreshButton: React.FC<RefreshButtonProps> = ({ onClick, isLoading
         spinOnceTimeoutRef.current = null;
       }, 800); // Match animation duration
     }
+  }, [isLoading, animationState]);
 
+  // Cleanup timeout on unmount only
+  useEffect(() => {
     return () => {
       if (spinOnceTimeoutRef.current) {
         clearTimeout(spinOnceTimeoutRef.current);
       }
     };
-  }, [isLoading, animationState]);
+  }, []);
 
   const className =
     animationState === "spinning" ? "spinning" : animationState === "stopping" ? "spin-once" : "";

src/components/RightSidebar/CodeReview/ReviewControls.tsx

@@ -7,13 +7,17 @@ import styled from "@emotion/styled";
 import { usePersistedState } from "@/hooks/usePersistedState";
 import type { ReviewFilters, ReviewStats } from "@/types/review";
 import { RefreshButton } from "./RefreshButton";
+import { UntrackedStatus } from "./UntrackedStatus";
 
 interface ReviewControlsProps {
   filters: ReviewFilters;
   stats: ReviewStats;
   onFiltersChange: (filters: ReviewFilters) => void;
   onRefresh?: () => void;
   isLoading?: boolean;
+  workspaceId: string;
+  workspacePath: string;
+  refreshTrigger?: number;
 }
 
 const ControlsContainer = styled.div`
@@ -117,6 +121,9 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
   onFiltersChange,
   onRefresh,
   isLoading = false,
+  workspaceId,
+  workspacePath,
+  refreshTrigger,
 }) => {
   // Local state for input value - only commit on blur/Enter
   const [inputValue, setInputValue] = useState(filters.diffBase);
@@ -196,9 +203,15 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
 
       <CheckboxLabel>
         <input type="checkbox" checked={filters.includeDirty} onChange={handleDirtyToggle} />
-        Include dirty
+        Dirty
       </CheckboxLabel>
 
+      <UntrackedStatus
+        workspaceId={workspaceId}
+        workspacePath={workspacePath}
+        refreshTrigger={refreshTrigger}
+      />
+
       <Separator />
 
       <StatBadge>

src/components/RightSidebar/CodeReview/ReviewPanel.tsx

@@ -526,6 +526,9 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
         onFiltersChange={setFilters}
         onRefresh={() => setRefreshTrigger((prev) => prev + 1)}
         isLoading={isLoadingHunks || isLoadingTree}
+        workspaceId={workspaceId}
+        workspacePath={workspacePath}
+        refreshTrigger={refreshTrigger}
       />
 
       {error ? (

src/components/RightSidebar/CodeReview/UntrackedStatus.tsx

@@ -0,0 +1,250 @@
+/**
+ * UntrackedStatus - Shows untracked files count with interactive tooltip
+ */
+
+import React, { useState, useEffect, useRef } from "react";
+import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+
+interface UntrackedStatusProps {
+  workspaceId: string;
+  workspacePath: string;
+  refreshTrigger?: number;
+}
+
+const Container = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const Badge = styled.div<{ hasUntracked: boolean }>`
+  padding: 4px 10px;
+  border-radius: 3px;
+  font-weight: 500;
+  font-size: 11px;
+  background: ${(props) => (props.hasUntracked ? "#3e2a00" : "transparent")};
+  border: 1px solid ${(props) => (props.hasUntracked ? "#806000" : "transparent")};
+  color: ${(props) => (props.hasUntracked ? "#ffb347" : "#888")};
+  white-space: nowrap;
+  cursor: ${(props) => (props.hasUntracked ? "pointer" : "default")};
+  transition: all 0.2s ease;
+
+  &:hover {
+    ${(props) =>
+      props.hasUntracked &&
+      `
+      background: #4a3200;
+      border-color: #a07000;
+    `}
+  }
+`;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const Tooltip = styled.div`
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  background: #2d2d30;
+  border: 1px solid #454545;
+  border-radius: 4px;
+  padding: 8px;
+  min-width: 200px;
+  max-width: 400px;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  animation: ${fadeIn} 0.15s ease;
+`;
+
+const TooltipHeader = styled.div`
+  font-size: 11px;
+  font-weight: 600;
+  color: #ccc;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #3e3e42;
+`;
+
+const FileList = styled.div`
+  max-height: 200px;
+  overflow-y: auto;
+  margin-bottom: 8px;
+`;
+
+const FileItem = styled.div`
+  font-size: 11px;
+  color: #aaa;
+  padding: 3px 4px;
+  font-family: var(--font-monospace);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:hover {
+    background: #37373d;
+  }
+`;
+
+const TrackButton = styled.button`
+  width: 100%;
+  padding: 4px 8px;
+  background: transparent;
+  color: #888;
+  border: 1px solid #444;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: var(--font-primary);
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: #ccc;
+    border-color: #666;
+  }
+
+  &:active {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  &:disabled {
+    color: #555;
+    border-color: #333;
+    cursor: not-allowed;
+    background: transparent;
+  }
+`;
+
+export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
+  workspaceId,
+  workspacePath,
+  refreshTrigger,
+}) => {
+  const [untrackedFiles, setUntrackedFiles] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [isTracking, setIsTracking] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hasLoadedOnce = useRef(false);
+
+  // Load untracked files
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadUntracked = async () => {
+      // Only show loading on first load ever, not on subsequent refreshes
+      if (!hasLoadedOnce.current) {
+        setIsLoading(true);
+      }
+
+      try {
+        const result = await window.api.workspace.executeBash(
+          workspaceId,
+          "git ls-files --others --exclude-standard",
+          { timeout_secs: 5 }
+        );
+
+        if (cancelled) return;
+
+        if (result.success) {
+          const files = (result.data.output ?? "")
+            .split("\n")
+            .map((f) => f.trim())
+            .filter(Boolean);
+          setUntrackedFiles(files);
+        }
+
+        hasLoadedOnce.current = true;
+      } catch (err) {
+        console.error("Failed to load untracked files:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void loadUntracked();
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspaceId, workspacePath, refreshTrigger]);
+
+  // Close tooltip when clicking outside
+  useEffect(() => {
+    if (!showTooltip) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setShowTooltip(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showTooltip]);
+
+  const handleTrackAll = async () => {
+    if (untrackedFiles.length === 0 || isTracking) return;
+
+    setIsTracking(true);
+    try {
+      // Use git add with -- to treat all arguments as file paths
+      // Escape single quotes by replacing ' with '\'' for safe shell quoting
+      const escapedFiles = untrackedFiles.map((f) => `'${f.replace(/'/g, "'\\''")}'`).join(" ");
+      const result = await window.api.workspace.executeBash(
+        workspaceId,
+        `git add -- ${escapedFiles}`,
+        { timeout_secs: 10 }
+      );
+
+      if (result.success) {
+        setUntrackedFiles([]);
+        setShowTooltip(false);
+      } else {
+        console.error("Failed to track files:", result.error);
+      }
+    } catch (err) {
+      console.error("Failed to track files:", err);
+    } finally {
+      setIsTracking(false);
+    }
+  };
+
+  const count = untrackedFiles.length;
+  const hasUntracked = count > 0;
+
+  return (
+    <Container ref={containerRef}>
+      <Badge
+        hasUntracked={hasUntracked}
+        onClick={() => hasUntracked && setShowTooltip(!showTooltip)}
+      >
+        {isLoading ? "..." : `${count} Untracked`}
+      </Badge>
+
+      {showTooltip && hasUntracked && (
+        <Tooltip>
+          <TooltipHeader>Untracked Files ({count})</TooltipHeader>
+          <FileList>
+            {untrackedFiles.map((file) => (
+              <FileItem key={file}>{file}</FileItem>
+            ))}
+          </FileList>
+          <TrackButton onClick={() => void handleTrackAll()} disabled={isTracking}>
+            {isTracking ? "Tracking..." : "Track All"}
+          </TrackButton>
+        </Tooltip>
+      )}
+    </Container>
+  );
+};