🤖 Add Code Review tab with interactive diff viewing and review notes

src/components/AIView.tsx

@@ -7,7 +7,8 @@ import { RetryBarrier } from "./Messages/ChatBarrier/RetryBarrier";
 import { PinnedTodoList } from "./PinnedTodoList";
 import { getAutoRetryKey } from "@/constants/storage";
 import { ChatInput, type ChatInputAPI } from "./ChatInput";
-import { ChatMetaSidebar } from "./ChatMetaSidebar";
+import { RightSidebar, type TabType } from "./RightSidebar";
+import { useResizableSidebar } from "@/hooks/useResizableSidebar";
 import {
   shouldShowInterruptedBarrier,
   mergeConsecutiveStreamErrors,
@@ -44,7 +45,7 @@ const ViewContainer = styled.div`
 
 const ChatArea = styled.div`
   flex: 1;
-  min-width: 750px;
+  min-width: 400px; /* Reduced from 750px to allow narrower layout when Review panel is wide */
   display: flex;
   flex-direction: column;
 `;
@@ -64,13 +65,26 @@ const WorkspaceTitle = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0; /* Allow flex children to shrink */
+  overflow: hidden;
 `;
 
 const WorkspacePath = styled.span`
   font-family: var(--font-monospace);
   color: #888;
   font-weight: 400;
   font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+`;
+
+const WorkspaceName = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 `;
 
 const TerminalIconButton = styled.button`
@@ -197,12 +211,33 @@ const AIViewInner: React.FC<AIViewProps> = ({
 }) => {
   const chatAreaRef = useRef<HTMLDivElement>(null);
 
-  // NEW: Get workspace state from store (only re-renders when THIS workspace changes)
+  // Track active tab to conditionally enable resize functionality
+  // RightSidebar notifies us of tab changes via onTabChange callback
+  const [activeTab, setActiveTab] = useState<TabType>("costs");
+  const isReviewTabActive = activeTab === "review";
+
+  // Resizable sidebar for Review tab only
+  // Hook encapsulates all drag logic, persistence, and constraints
+  // Returns width to apply to RightSidebar and startResize for handle's onMouseDown
+  const {
+    width: sidebarWidth,
+    isResizing,
+    startResize,
+  } = useResizableSidebar({
+    enabled: isReviewTabActive, // Only active on Review tab
+    defaultWidth: 600, // Initial width or fallback
+    minWidth: 300, // Can't shrink smaller
+    maxWidth: 1200, // Can't grow larger
+    storageKey: "review-sidebar-width", // Persists across sessions
+  });
+
+  // Get workspace state from store (only re-renders when THIS workspace changes)
   const workspaceState = useWorkspaceState(workspaceId);
   const aggregator = useWorkspaceAggregator(workspaceId);
 
   // Get git status for this workspace
   const gitStatus = useGitStatus(workspaceId);
+
   const [editingMessage, setEditingMessage] = useState<{ id: string; content: string } | undefined>(
     undefined
   );
@@ -239,6 +274,11 @@ 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);
+  }, []);
+
   // Thinking level state from context
   const { thinkingLevel: currentWorkspaceThinking, setThinkingLevel } = useThinking();
 
@@ -431,7 +471,9 @@ const AIViewInner: React.FC<AIViewProps> = ({
               workspaceId={workspaceId}
               tooltipPosition="bottom"
             />
-            {projectName} / {branch}
+            <WorkspaceName>
+              {projectName} / {branch}
+            </WorkspaceName>
             <WorkspacePath>{namedWorkspacePath}</WorkspacePath>
             <TooltipWrapper inline>
               <TerminalIconButton onClick={handleOpenTerminal}>
@@ -555,7 +597,17 @@ const AIViewInner: React.FC<AIViewProps> = ({
         />
       </ChatArea>
 
-      <ChatMetaSidebar key={workspaceId} workspaceId={workspaceId} chatAreaRef={chatAreaRef} />
+      <RightSidebar
+        key={workspaceId}
+        workspaceId={workspaceId}
+        workspacePath={namedWorkspacePath}
+        chatAreaRef={chatAreaRef}
+        onTabChange={setActiveTab} // Notifies us when tab changes
+        width={isReviewTabActive ? sidebarWidth : undefined} // Custom width only on Review tab
+        onStartResize={isReviewTabActive ? startResize : undefined} // Pass resize handler when Review active
+        isResizing={isResizing} // Pass resizing state
+        onReviewNote={handleReviewNote} // Pass review note handler to append to chat
+      />
     </ViewContainer>
   );
 };

src/components/ChatInput.tsx

@@ -46,6 +46,7 @@ const InputSection = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+  container-type: inline-size; /* Enable container queries for responsive behavior */
 `;
 
 const InputControls = styled.div`
@@ -72,6 +73,12 @@ const ModeToggleWrapper = styled.div`
   align-items: center;
   gap: 6px;
   margin-left: auto;
+
+  /* Hide mode toggle on narrow containers */
+  /* Note: Text area border changes color with mode, so this omission is acceptable */
+  @container (max-width: 700px) {
+    display: none;
+  }
 `;
 
 const StyledToggleContainer = styled.div<{ mode: UIMode }>`
@@ -121,11 +128,19 @@ const ModelDisplayWrapper = styled.div`
   gap: 4px;
   margin-right: 12px;
   height: 11px;
+
+  /* Hide help indicators on narrow containers */
+  @container (max-width: 700px) {
+    .help-indicator-wrapper {
+      display: none;
+    }
+  }
 `;
 
 export interface ChatInputAPI {
   focus: () => void;
   restoreText: (text: string) => void;
+  appendText: (text: string) => void;
 }
 
 export interface ChatInputProps {
@@ -258,15 +273,26 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     [focusMessageInput]
   );
 
+  // Method to append text to input (used by Code Review notes)
+  const appendText = useCallback((text: string) => {
+    setInput((prev) => {
+      // Add blank line before if there's existing content
+      const separator = prev.trim() ? "\n\n" : "";
+      return prev + separator + text;
+    });
+    // Don't focus - user wants to keep reviewing
+  }, []);
+
   // Provide API to parent via callback
   useEffect(() => {
     if (onReady) {
       onReady({
         focus: focusMessageInput,
         restoreText,
+        appendText,
       });
     }
-  }, [onReady, focusMessageInput, restoreText]);
+  }, [onReady, focusMessageInput, restoreText, appendText]);
 
   useEffect(() => {
     const handleGlobalKeyDown = (event: KeyboardEvent) => {
@@ -871,25 +897,27 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                 recentModels={recentModels}
                 onComplete={() => inputRef.current?.focus()}
               />
-              <TooltipWrapper inline>
-                <HelpIndicator>?</HelpIndicator>
-                <Tooltip className="tooltip" align="left" width="wide">
-                  <strong>Click to edit</strong> or use{" "}
-                  {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
-                  <br />
-                  <br />
-                  <strong>Abbreviations:</strong>
-                  <br />• <code>/model opus</code> - Claude Opus 4.1
-                  <br />• <code>/model sonnet</code> - Claude Sonnet 4.5
-                  <br />
-                  <br />
-                  <strong>Full format:</strong>
-                  <br />
-                  <code>/model provider:model-name</code>
-                  <br />
-                  (e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
-                </Tooltip>
-              </TooltipWrapper>
+              <span className="help-indicator-wrapper">
+                <TooltipWrapper inline>
+                  <HelpIndicator>?</HelpIndicator>
+                  <Tooltip className="tooltip" align="left" width="wide">
+                    <strong>Click to edit</strong> or use{" "}
+                    {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
+                    <br />
+                    <br />
+                    <strong>Abbreviations:</strong>
+                    <br />• <code>/model opus</code> - Claude Opus 4.1
+                    <br />• <code>/model sonnet</code> - Claude Sonnet 4.5
+                    <br />
+                    <br />
+                    <strong>Full format:</strong>
+                    <br />
+                    <code>/model provider:model-name</code>
+                    <br />
+                    (e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
+                  </Tooltip>
+                </TooltipWrapper>
+              </span>
             </ModelDisplayWrapper>
           </ChatToggles>
           <ModeToggleWrapper>
@@ -903,18 +931,20 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                 onChange={setMode}
               />
             </StyledToggleContainer>
-            <TooltipWrapper inline>
-              <HelpIndicator>?</HelpIndicator>
-              <Tooltip className="tooltip" align="center" width="wide">
-                <strong>Exec Mode:</strong> AI edits files and execute commands
-                <br />
-                <br />
-                <strong>Plan Mode:</strong> AI proposes plans but does not edit files
-                <br />
-                <br />
-                Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
-              </Tooltip>
-            </TooltipWrapper>
+            <span className="help-indicator-wrapper">
+              <TooltipWrapper inline>
+                <HelpIndicator>?</HelpIndicator>
+                <Tooltip className="tooltip" align="center" width="wide">
+                  <strong>Exec Mode:</strong> AI edits files and execute commands
+                  <br />
+                  <br />
+                  <strong>Plan Mode:</strong> AI proposes plans but does not edit files
+                  <br />
+                  <br />
+                  Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
+                </Tooltip>
+              </TooltipWrapper>
+            </span>
           </ModeToggleWrapper>
         </ModeTogglesRow>
       </ModeToggles>