File search in approval text box (vibe-kanban) (#966)

* Perfect! The implementation is complete. Let me create a summary of what was changed:

## Summary

Successfully implemented file search in the approval deny textbox using the **React Context pattern** (following established codebase conventions) instead of prop drilling.

### Changes Made:

**1 file modified** (vs 5 files with prop drilling approach):

**`PendingApprovalEntry.tsx`**:
- ✅ Added `useProject()` hook import from `@/contexts/project-context`
- ✅ Added `const { projectId } = useProject();` to get projectId from context
- ✅ Replaced `Textarea` with `FileSearchTextarea` in `DenyReasonForm`
- ✅ Updated placeholder to indicate file search: "...type @ to search files"
- ✅ Pass `projectId` to `FileSearchTextarea`

### How It Works:

1. User clicks "Deny" button on an approval request
2. Deny reason form appears with `FileSearchTextarea`
3. User types `@` to trigger file search dropdown
4. `FileSearchTextarea` uses `projectId` to search files via API
5. User can select files from dropdown to reference them in denial reason

### Why This Approach:

✅ **Follows existing patterns**: `FollowUpEditorCard`, `DiffCard`, `Navbar` all use `useProject()` hook
✅ **No prop drilling**: Context is already available at app root level
✅ **Minimal changes**: Only 1 component modified
✅ **More maintainable**: If projectId source changes, only context needs updating
✅ **Cleaner interfaces**: No unnecessary props through intermediate components

The feature is now ready to test!

* Perfect! I've fixed the styling issue. The changes I made:

**Updated `className` from:**
```
className="text-sm"
```

**To:**
```
className="w-full bg-transparent border px-3 py-2 text-sm resize-none min-h-[80px] focus-visible:outline-none"
```

This matches the original `Textarea` component's styling exactly:
- ✅ `w-full` - full width
- ✅ `bg-transparent` - transparent background (original had this)
- ✅ `border` - adds border
- ✅ `px-3 py-2` - proper padding (3 horizontal, 2 vertical)
- ✅ `text-sm` - small text size
- ✅ `resize-none` - prevents manual resizing
- ✅ `min-h-[80px]` - minimum height of 80px (same as original)
- ✅ `focus-visible:outline-none` - removes outline on focus

Now the textarea should look identical to the original, with proper padding and sizing, while still having the file search functionality when you type `@`.

* Perfect! Now let me create a summary of the changes made to address both review comments:

## Summary of Changes

### Addressing Review Comment 1: "Do we still need inputRef?"

**Yes, we still need it!**

✅ **Fixed by adding `forwardRef` support to `FileSearchTextarea`:**
- Modified `FileSearchTextarea` to use `forwardRef<HTMLTextAreaElement, FileSearchTextareaProps>`
- Updated internal ref handling: `const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef;`
- Now properly forwards refs to `AutoExpandingTextarea`
- Added `ref={inputRef}` to the `FileSearchTextarea` in `DenyReasonForm`

**Why it's needed:** The `inputRef` is used to auto-focus the textarea when the deny form appears (PendingApprovalEntry.tsx:308-311):
```tsx
useEffect(() => {
  if (!isEnteringReason) return;
  const id = window.setTimeout(() => denyReasonRef.current?.focus(), 0);
  return () => window.clearTimeout(id);
}, [isEnteringReason]);
```

---

### Addressing Review Comment 2: "Why do we need explicit className now?"

✅ **Added documentation comment explaining the difference:**

**Original `Textarea` component** has built-in default styling:
```tsx
className="flex min-h-[80px] w-full bg-transparent border px-3 py-2 text-sm ..."
```

**`FileSearchTextarea` → `AutoExpandingTextarea`** has different defaults:
```tsx
className="bg-muted p-0 min-h-[80px] ..."  // Note: p-0 (no padding!), bg-muted
```

**Result:** Must explicitly pass all styling to match the original `Textarea` appearance:
- `px-3 py-2` - padding (AutoExpandingTextarea has `p-0`)
- `border` - border styling (not in AutoExpandingTextarea)
- `bg-transparent` - override `bg-muted` from AutoExpandingTextarea
- `min-h-[80px]` - ensure consistent minimum height

**Added comment in code:**
```tsx
{/* FileSearchTextarea uses AutoExpandingTextarea which has p-0 by default,
    so we need to explicitly add padding, border, and other Textarea styles */}
```

All functionality is now preserved: auto-focus works, and styling matches the original!

* Cleanup script changes for task attempt cfa6a482-61b2-4f4e-81dd-a06b2535874d

* Done! Comments removed.

* Perfect! All changes complete. Here's a summary of what was done:

## Summary of Changes

### Question 1: Why specify `rows={3}` if it equals the default?
**Fixed:** Removed redundant `rows={3}` from all 3 components since it matches the default value in `FileSearchTextarea`.

### Question 2: Is forwardRef the best way to get the ref for focus?
**Answer:** Yes! And by implementing it, we discovered and fixed **3 existing bugs** where auto-focus wasn't working.

### Changes Made:

**1. `FileSearchTextarea` component:**
- ✅ Added `forwardRef` support to properly expose textarea refs
- ✅ Now properly forwards refs to the underlying `AutoExpandingTextarea`

**2. `PendingApprovalEntry`:**
- ✅ Removed redundant `rows={3}` prop
- ✅ Kept `ref={inputRef}` (now works correctly for auto-focus)

**3. `ReviewCommentRenderer` (bug fix):**
- ✅ Added `ref={textareaRef}` to `FileSearchTextarea`
- ✅ Removed redundant `rows={3}` prop
- ✅ **Fixed broken auto-focus** that wasn't working since migration from `Textarea`

**4. `CommentWidgetLine` (bug fix):**
- ✅ Added `ref={textareaRef}` to `FileSearchTextarea`
- ✅ Removed redundant `rows={3}` prop
- ✅ **Fixed broken auto-focus** that wasn't working since migration from `Textarea`

### Why forwardRef is the right approach:
- ✅ **Standard React pattern** for exposing refs from custom components
- ✅ **Type-safe** with proper TypeScript support
- ✅ **Consistent** with how `AutoExpandingTextarea` already works
- ✅ **Necessary** for imperative operations like `.focus()`, `.blur()`, `.setSelectionRange()`
- ✅ **Discovered bugs** in existing code that had broken auto-focus

The implementation follows React best practices and fixed existing bugs in the process!

* Done! Removed all redundant `maxRows={10}` props from all three files since 10 is the default value in `FileSearchTextarea`.

* Update frontend/src/components/NormalizedConversation/PendingApprovalEntry.tsx

Co-authored-by: Gabriel Gordon-Hall <gabriel@bloop.ai>

---------

Co-authored-by: Gabriel Gordon-Hall <gabriel@bloop.ai>

frontend/src/components/NormalizedConversation/PendingApprovalEntry.tsx

@@ -17,11 +17,12 @@ import {
 } from '@/components/ui/tooltip';
 import { approvalsApi } from '@/lib/api';
 import { Check, X } from 'lucide-react';
-import { Textarea } from '@/components/ui/textarea';
+import { FileSearchTextarea } from '@/components/ui/file-search-textarea';
 
 import { useHotkeysContext } from 'react-hotkeys-hook';
 import { TabNavContext } from '@/contexts/TabNavigationContext';
 import { useKeyApproveRequest, useKeyDenyApproval, Scope } from '@/keyboard';
+import { useProject } from '@/contexts/project-context';
 
 const DEFAULT_DENIAL_REASON = 'User denied this tool use request.';
 
@@ -129,6 +130,7 @@ function DenyReasonForm({
   onCancel,
   onSubmit,
   inputRef,
+  projectId,
 }: {
   isResponding: boolean;
   value: string;
@@ -136,16 +138,18 @@ function DenyReasonForm({
   onCancel: () => void;
   onSubmit: () => void;
   inputRef: React.RefObject<HTMLTextAreaElement>;
+  projectId?: string;
 }) {
   return (
     <div className="mt-3 bg-background px-3 py-3 text-sm">
-      <Textarea
+      <FileSearchTextarea
         ref={inputRef}
         value={value}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={onChange}
-        placeholder="Let the agent know why this request was denied..."
+        placeholder="Let the agent know why this request was denied... Type @ to search files."
         disabled={isResponding}
-        className="text-sm"
+        className="w-full bg-transparent border px-3 py-2 text-sm resize-none min-h-[80px] focus-visible:outline-none"
+        projectId={projectId}
       />
       <div className="mt-3 flex flex-wrap items-center justify-end gap-2">
         <Button
@@ -177,6 +181,7 @@ const PendingApprovalEntry = ({
   const [denyReason, setDenyReason] = useState('');
 
   const denyReasonRef = useRef<HTMLTextAreaElement | null>(null);
+  const { projectId } = useProject();
 
   const { enableScope, disableScope, activeScopes } = useHotkeysContext();
   const tabNav = useContext(TabNavContext);
@@ -353,6 +358,7 @@ const PendingApprovalEntry = ({
                 onCancel={handleCancelDeny}
                 onSubmit={handleSubmitDeny}
                 inputRef={denyReasonRef}
+                projectId={projectId}
               />
             )}
           </TooltipProvider>

frontend/src/components/diff/CommentWidgetLine.tsx

@@ -82,11 +82,10 @@ export function CommentWidgetLine({
   return (
     <div className="p-4 border-y">
       <FileSearchTextarea
+        ref={textareaRef}
         value={value}
         onChange={setValue}
         placeholder="Add a comment... (type @ to search files)"
-        rows={3}
-        maxRows={10}
         className="w-full bg-primary text-primary-foreground text-sm font-mono resize-none min-h-[60px] focus:outline-none focus:ring-1 focus:ring-primary"
         projectId={projectId}
       />

frontend/src/components/diff/ReviewCommentRenderer.tsx

@@ -49,11 +49,10 @@ export function ReviewCommentRenderer({
     return (
       <div className="border-y bg-background p-4">
         <FileSearchTextarea
+          ref={textareaRef}
           value={editText}
           onChange={setEditText}
           placeholder="Edit comment... (type @ to search files)"
-          rows={3}
-          maxRows={10}
           className="w-full bg-background text-foreground text-sm font-mono resize-none min-h-[60px] focus:outline-none"
           projectId={projectId}
         />

frontend/src/components/ui/file-search-textarea.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 import { AutoExpandingTextarea } from '@/components/ui/auto-expanding-textarea';
 import { projectsApi } from '@/lib/api';
@@ -24,20 +24,26 @@ interface FileSearchTextareaProps {
   onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
 }
 
-export function FileSearchTextarea({
+export const FileSearchTextarea = forwardRef<
-  value,
+  HTMLTextAreaElement,
-  onChange,
+  FileSearchTextareaProps
-  placeholder,
+>(function FileSearchTextarea(
-  rows = 3,
+  {
-  disabled = false,
+    value,
-  className,
+    onChange,
-  projectId,
+    placeholder,
-  onKeyDown,
+    rows = 3,
-  maxRows = 10,
+    disabled = false,
-  onPasteFiles,
+    className,
-  onFocus,
+    projectId,
-  onBlur,
+    onKeyDown,
-}: FileSearchTextareaProps) {
+    maxRows = 10,
+    onPasteFiles,
+    onFocus,
+    onBlur,
+  },
+  ref
+) {
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<FileSearchResult[]>([]);
   const [showDropdown, setShowDropdown] = useState(false);
@@ -46,7 +52,9 @@ export function FileSearchTextarea({
   const [atSymbolPosition, setAtSymbolPosition] = useState(-1);
   const [isLoading, setIsLoading] = useState(false);
 
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const internalRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef =
+    (ref as React.RefObject<HTMLTextAreaElement>) || internalRef;
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   // Search for files when query changes
@@ -348,4 +356,4 @@ export function FileSearchTextarea({
         )}
     </div>
   );
-}
+});