Use file search when leaving a review comment (vibe-kanban) (#743)

* Perfect! I've successfully implemented file search functionality for review comments. Here's a summary of what was completed:

## ✅ Implementation Complete

### **Changes Made:**

1. **Updated [`ReviewCommentRenderer.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/components/diff/ReviewCommentRenderer.tsx)**:
   - Replaced basic textarea with FileSearchTextarea in edit mode
   - Added `projectId` prop to interface
   - Imported and configured FileSearchTextarea with proper styling

2. **Updated [`CommentWidgetLine.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/components/diff/CommentWidgetLine.tsx)**:
   - Replaced textarea with FileSearchTextarea for new comment creation
   - Added `projectId` prop to interface

3. **Updated [`DiffCard.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/components/DiffCard.tsx)**:
   - Integrated useProject hook to get projectId from context
   - Passed projectId to both ReviewCommentRenderer and CommentWidgetLine

4. **Enhanced [`ReviewProvider.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/contexts/ReviewProvider.tsx)**:
   - Added regex pattern to format file paths with backticks in generated markdown
   - Preserves existing functionality while enhancing visual formatting

### **Key Features:**
- **@-mention file search** in both new and edit review comments
- **Auto-complete dropdown** with arrow key navigation
- **Project context integration** - no schema changes needed
- **Enhanced markdown export** with properly formatted file paths
- **Preserves all existing functionality** - keyboard shortcuts, styling, etc.

### **User Experience:**
1. Type `@` in any review comment field
2. Search dropdown appears automatically
3. Arrow keys ↑↓ to navigate, Enter to select, Esc to dismiss
4. Selected files inserted as full paths
5. Generated review markdown formats paths with backticks for readability

The implementation successfully integrates file search into the review comment workflow while maintaining the existing architecture and user experience!

* Cleanup script changes for task attempt a558e290-557a-475f-81e9-be9ae44a3621

* Perfect! Updated both placeholder texts to inform users about the file search functionality:

- **New comments**: `"Add a comment... (type @ to search files)"`
- **Edit comments**: `"Edit comment... (type @ to search files)"`

This provides clear user guidance about the @ file search feature right in the input fields.

frontend/src/components/DiffCard.tsx

@@ -26,6 +26,7 @@ import { useReview, type ReviewDraft } from '@/contexts/ReviewProvider';
 import { CommentWidgetLine } from '@/components/diff/CommentWidgetLine';
 import { ReviewCommentRenderer } from '@/components/diff/ReviewCommentRenderer';
 import { useDiffViewMode } from '@/stores/useDiffViewStore';
+import { useProject } from '@/contexts/project-context';
 
 type Props = {
   diff: Diff;
@@ -75,6 +76,7 @@ export default function DiffCard({
   const theme = getActualTheme(config?.theme);
   const { comments, drafts, setDraft } = useReview();
   const globalMode = useDiffViewMode();
+  const { projectId } = useProject();
 
   const oldName = diff.oldPath || undefined;
   const newName = diff.newPath || oldName || 'unknown';
@@ -173,12 +175,15 @@ export default function DiffCard({
         widgetKey={widgetKey}
         onSave={props.onClose}
         onCancel={props.onClose}
+        projectId={projectId}
       />
     );
   };
 
   const renderExtendLine = (lineData: any) => {
-    return <ReviewCommentRenderer comment={lineData.data} />;
+    return (
+      <ReviewCommentRenderer comment={lineData.data} projectId={projectId} />
+    );
   };
 
   // Title row

frontend/src/components/diff/CommentWidgetLine.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
+import { FileSearchTextarea } from '@/components/ui/file-search-textarea';
 import { useReview, type ReviewDraft } from '@/contexts/ReviewProvider';
 
 interface CommentWidgetLineProps {
@@ -7,6 +8,7 @@ interface CommentWidgetLineProps {
   widgetKey: string;
   onSave: () => void;
   onCancel: () => void;
+  projectId?: string;
 }
 
 export function CommentWidgetLine({
@@ -14,6 +16,7 @@ export function CommentWidgetLine({
   widgetKey,
   onSave,
   onCancel,
+  projectId,
 }: CommentWidgetLineProps) {
   const { setDraft, addComment } = useReview();
   const [value, setValue] = useState(draft.text);
@@ -52,14 +55,15 @@ export function CommentWidgetLine({
 
   return (
     <div className="p-4 border-y">
-      <textarea
+      <FileSearchTextarea
-        ref={textareaRef}
         value={value}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={setValue}
         onKeyDown={handleKeyDown}
-        placeholder="Add a comment..."
+        placeholder="Add a comment... (type @ to search files)"
-        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"
         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}
       />
       <div className="mt-2 flex gap-2">
         <Button size="xs" onClick={handleSave} disabled={!value.trim()}>

frontend/src/components/diff/ReviewCommentRenderer.tsx

@@ -1,13 +1,18 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Trash2, Pencil } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { FileSearchTextarea } from '@/components/ui/file-search-textarea';
 import { useReview, type ReviewComment } from '@/contexts/ReviewProvider';
 
 interface ReviewCommentRendererProps {
   comment: ReviewComment;
+  projectId?: string;
 }
 
-export function ReviewCommentRenderer({ comment }: ReviewCommentRendererProps) {
+export function ReviewCommentRenderer({
+  comment,
+  projectId,
+}: ReviewCommentRendererProps) {
   const { deleteComment, updateComment } = useReview();
   const [isEditing, setIsEditing] = useState(false);
   const [editText, setEditText] = useState(comment.text);
@@ -51,14 +56,15 @@ export function ReviewCommentRenderer({ comment }: ReviewCommentRendererProps) {
   if (isEditing) {
     return (
       <div className="border-y bg-background p-4">
-        <textarea
+        <FileSearchTextarea
-          ref={textareaRef}
           value={editText}
-          onChange={(e) => setEditText(e.target.value)}
+          onChange={setEditText}
           onKeyDown={handleKeyDown}
-          placeholder="Edit comment..."
+          placeholder="Edit comment... (type @ to search files)"
-          className="w-full bg-background text-foreground text-sm font-mono resize-none min-h-[60px] focus:outline-none"
           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}
         />
         <div className="mt-2 flex gap-2">
           <Button size="xs" onClick={handleSave} disabled={!editText.trim()}>

frontend/src/contexts/ReviewProvider.tsx

@@ -96,11 +96,14 @@ export function ReviewProvider({ children }: { children: ReactNode }) {
     const commentsMd = comments
       .map((comment) => {
         const codeLine = formatCodeLine(comment.codeLine);
-        const commentBody = comment.text.trim();
+        // Format file paths in comment body with backticks
+        const bodyWithFormattedPaths = comment.text
+          .trim()
+          .replace(/([/\\]?[\w.-]+(?:[/\\][\w.-]+)+)/g, '`$1`');
         if (codeLine) {
-          return `**${comment.filePath}** (Line ${comment.lineNumber})\n${codeLine}\n\n> ${commentBody}\n`;
+          return `**${comment.filePath}** (Line ${comment.lineNumber})\n${codeLine}\n\n> ${bodyWithFormattedPaths}\n`;
         }
-        return `**${comment.filePath}** (Line ${comment.lineNumber})\n\n> ${commentBody}\n`;
+        return `**${comment.filePath}** (Line ${comment.lineNumber})\n\n> ${bodyWithFormattedPaths}\n`;
       })
       .join('\n');