Add file search to the edit box

2025-06-17 23:41:24 -04:00
parent 5d44865a5e
commit 3ad567cd1c
11 changed files with 652 additions and 325 deletions
--- a/backend/src/bin/generate_types.rs
+++ b/backend/src/bin/generate_types.rs
@@ -60,12 +60,18 @@ export {}

 export {}

+export {}
+
+export {}
+
 export {}"#,
        vibe_kanban::models::ApiResponse::<()>::decl(),
        vibe_kanban::executor::ExecutorConfig::decl(),
        vibe_kanban::models::project::CreateProject::decl(),
        vibe_kanban::models::project::Project::decl(),
        vibe_kanban::models::project::UpdateProject::decl(),
+        vibe_kanban::models::project::SearchResult::decl(),
+        vibe_kanban::models::project::SearchMatchType::decl(),
        vibe_kanban::models::task::CreateTask::decl(),
        vibe_kanban::models::task::TaskStatus::decl(),
        vibe_kanban::models::task::Task::decl(),
--- a/backend/src/models/project.rs
+++ b/backend/src/models/project.rs
@@ -32,6 +32,22 @@ pub struct UpdateProject {
    pub git_repo_path: Option<String>,
 }

+#[derive(Debug, Serialize, TS)]
+#[ts(export)]
+pub struct SearchResult {
+    pub path: String,
+    pub is_file: bool,
+    pub match_type: SearchMatchType,
+}
+
+#[derive(Debug, Serialize, TS)]
+#[ts(export)]
+pub enum SearchMatchType {
+    FileName,
+    DirectoryName,
+    FullPath,
+}
+
 impl Project {
    pub async fn find_all(pool: &SqlitePool) -> Result<Vec<Self>, sqlx::Error> {
        sqlx::query_as!(
--- a/backend/src/routes/projects.rs
+++ b/backend/src/routes/projects.rs
@@ -1,15 +1,16 @@
 use axum::{
-    extract::{Extension, Path},
+    extract::{Extension, Path, Query},
    http::StatusCode,
    response::Json as ResponseJson,
    routing::get,
    Json, Router,
 };
 use sqlx::SqlitePool;
+use std::collections::HashMap;
 use uuid::Uuid;

 use crate::models::{
-    project::{CreateProject, Project, UpdateProject},
+    project::{CreateProject, Project, SearchMatchType, SearchResult, UpdateProject},
    ApiResponse,
 };

@@ -240,6 +241,143 @@ pub async fn delete_project(
    }
 }

+pub async fn search_project_files(
+    Path(id): Path<Uuid>,
+    Query(params): Query<HashMap<String, String>>,
+    Extension(pool): Extension<SqlitePool>,
+) -> Result<ResponseJson<ApiResponse<Vec<SearchResult>>>, StatusCode> {
+    let query = match params.get("q") {
+        Some(q) if !q.trim().is_empty() => q.trim(),
+        _ => {
+            return Ok(ResponseJson(ApiResponse {
+                success: false,
+                data: None,
+                message: Some("Query parameter 'q' is required and cannot be empty".to_string()),
+            }));
+        }
+    };
+
+    // Check if project exists
+    let project = match Project::find_by_id(&pool, id).await {
+        Ok(Some(project)) => project,
+        Ok(None) => return Err(StatusCode::NOT_FOUND),
+        Err(e) => {
+            tracing::error!("Failed to fetch project: {}", e);
+            return Err(StatusCode::INTERNAL_SERVER_ERROR);
+        }
+    };
+
+    // Search files in the project repository
+    match search_files_in_repo(&project.git_repo_path, query).await {
+        Ok(results) => Ok(ResponseJson(ApiResponse {
+            success: true,
+            data: Some(results),
+            message: None,
+        })),
+        Err(e) => {
+            tracing::error!("Failed to search files: {}", e);
+            Err(StatusCode::INTERNAL_SERVER_ERROR)
+        }
+    }
+}
+
+async fn search_files_in_repo(
+    repo_path: &str,
+    query: &str,
+) -> Result<Vec<SearchResult>, Box<dyn std::error::Error + Send + Sync>> {
+    use std::path::Path;
+
+    let repo_path = Path::new(repo_path);
+
+    if !repo_path.exists() {
+        return Err("Repository path does not exist".into());
+    }
+
+    let mut results = Vec::new();
+    let query_lower = query.to_lowercase();
+
+    // Recursively search through the repository
+    fn walk_dir(
+        dir: &Path,
+        repo_root: &Path,
+        query: &str,
+        results: &mut Vec<SearchResult>,
+    ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+        if dir.file_name().map_or(false, |name| name == ".git") {
+            return Ok(());
+        }
+
+        for entry in std::fs::read_dir(dir)? {
+            let entry = entry?;
+            let path = entry.path();
+
+            // Skip .git directories
+            if path.is_dir() && path.file_name().map_or(false, |name| name == ".git") {
+                continue;
+            }
+
+            let relative_path = path.strip_prefix(repo_root)?;
+            let relative_path_str = relative_path.to_string_lossy().to_lowercase();
+
+            let file_name = path
+                .file_name()
+                .map(|name| name.to_string_lossy().to_lowercase())
+                .unwrap_or_default();
+
+            // Check for matches
+            if file_name.contains(query) {
+                results.push(SearchResult {
+                    path: relative_path.to_string_lossy().to_string(),
+                    is_file: path.is_file(),
+                    match_type: SearchMatchType::FileName,
+                });
+            } else if relative_path_str.contains(query) {
+                // Check if it's a directory name match or full path match
+                let match_type = if path
+                    .parent()
+                    .and_then(|p| p.file_name())
+                    .map(|name| name.to_string_lossy().to_lowercase())
+                    .unwrap_or_default()
+                    .contains(query)
+                {
+                    SearchMatchType::DirectoryName
+                } else {
+                    SearchMatchType::FullPath
+                };
+
+                results.push(SearchResult {
+                    path: relative_path.to_string_lossy().to_string(),
+                    is_file: path.is_file(),
+                    match_type,
+                });
+            }
+
+            if path.is_dir() {
+                walk_dir(&path, repo_root, query, results)?;
+            }
+        }
+        Ok(())
+    }
+
+    walk_dir(repo_path, repo_path, &query_lower, &mut results)?;
+
+    // Sort results by priority: FileName > DirectoryName > FullPath
+    results.sort_by(|a, b| {
+        use SearchMatchType::*;
+        let priority = |match_type: &SearchMatchType| match match_type {
+            FileName => 0,
+            DirectoryName => 1,
+            FullPath => 2,
+        };
+
+        priority(&a.match_type)
+            .cmp(&priority(&b.match_type))
+            .then_with(|| a.path.cmp(&b.path))
+    });
+
+    Ok(results)
+}
+
 pub fn projects_router() -> Router {
    Router::new()
        .route("/projects", get(get_projects).post(create_project))
@@ -247,6 +385,7 @@ pub fn projects_router() -> Router {
            "/projects/:id",
            get(get_project).put(update_project).delete(delete_project),
        )
+        .route("/projects/:id/search", get(search_project_files))
 }

 #[cfg(test)]
--- a/frontend/src/components/tasks/TaskCreateDialog.tsx
+++ b/frontend/src/components/tasks/TaskCreateDialog.tsx
@@ -1,71 +0,0 @@
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Label } from '@/components/ui/label'
-
-interface TaskCreateDialogProps {
-  isOpen: boolean
-  onOpenChange: (open: boolean) => void
-  onCreateTask: (title: string, description: string) => Promise<void>
-}
-
-export function TaskCreateDialog({ isOpen, onOpenChange, onCreateTask }: TaskCreateDialogProps) {
-  const [title, setTitle] = useState('')
-  const [description, setDescription] = useState('')
-
-  const handleCreate = async () => {
-    if (!title.trim()) return
-    
-    await onCreateTask(title, description)
-    setTitle('')
-    setDescription('')
-    onOpenChange(false)
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create New Task</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4">
-          <div>
-            <Label htmlFor="title">Title</Label>
-            <Input
-              id="title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="Enter task title"
-            />
-          </div>
-          <div>
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="Enter task description (optional)"
-              rows={3}
-            />
-          </div>
-          <div className="flex justify-end space-x-2">
-            <Button
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-            >
-              Cancel
-            </Button>
-            <Button onClick={handleCreate}>Create Task</Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
--- a/frontend/src/components/tasks/TaskEditDialog.tsx
+++ b/frontend/src/components/tasks/TaskEditDialog.tsx
@@ -1,115 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Label } from '@/components/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import type { TaskStatus } from 'shared/types'
-
-interface Task {
-  id: string
-  project_id: string
-  title: string
-  description: string | null
-  status: TaskStatus
-  created_at: string
-  updated_at: string
-}
-
-interface TaskEditDialogProps {
-  isOpen: boolean
-  onOpenChange: (open: boolean) => void
-  task: Task | null
-  onUpdateTask: (title: string, description: string, status: TaskStatus) => Promise<void>
-}
-
-export function TaskEditDialog({ isOpen, onOpenChange, task, onUpdateTask }: TaskEditDialogProps) {
-  const [title, setTitle] = useState('')
-  const [description, setDescription] = useState('')
-  const [status, setStatus] = useState<TaskStatus>('todo')
-
-  useEffect(() => {
-    if (task) {
-      setTitle(task.title)
-      setDescription(task.description || '')
-      setStatus(task.status)
-    }
-  }, [task])
-
-  const handleUpdate = async () => {
-    if (!title.trim()) return
-    
-    await onUpdateTask(title, description, status)
-    onOpenChange(false)
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Edit Task</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4">
-          <div>
-            <Label htmlFor="edit-title">Title</Label>
-            <Input
-              id="edit-title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="Enter task title"
-            />
-          </div>
-          <div>
-            <Label htmlFor="edit-description">Description</Label>
-            <Textarea
-              id="edit-description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="Enter task description (optional)"
-              rows={3}
-            />
-          </div>
-          <div>
-            <Label htmlFor="edit-status">Status</Label>
-            <Select
-              value={status}
-              onValueChange={(value) => setStatus(value as TaskStatus)}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="todo">To Do</SelectItem>
-                <SelectItem value="inprogress">In Progress</SelectItem>
-                <SelectItem value="inreview">In Review</SelectItem>
-                <SelectItem value="done">Done</SelectItem>
-                <SelectItem value="cancelled">Cancelled</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex justify-end space-x-2">
-            <Button
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-            >
-              Cancel
-            </Button>
-            <Button onClick={handleUpdate}>Update Task</Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
--- a/frontend/src/components/tasks/TaskFormDialog.tsx
+++ b/frontend/src/components/tasks/TaskFormDialog.tsx
@@ -0,0 +1,181 @@
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { FileSearchTextarea } from '@/components/ui/file-search-textarea'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
+import type { TaskStatus } from 'shared/types'
+
+interface Task {
+  id: string
+  project_id: string
+  title: string
+  description: string | null
+  status: TaskStatus
+  created_at: string
+  updated_at: string
+}
+
+interface TaskFormDialogProps {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  task?: Task | null // Optional for create mode
+  projectId?: string // For file search functionality
+  onCreateTask?: (title: string, description: string) => Promise<void>
+  onUpdateTask?: (title: string, description: string, status: TaskStatus) => Promise<void>
+}
+
+export function TaskFormDialog({ 
+  isOpen, 
+  onOpenChange, 
+  task, 
+  projectId,
+  onCreateTask, 
+  onUpdateTask 
+}: TaskFormDialogProps) {
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [status, setStatus] = useState<TaskStatus>('todo')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const isEditMode = Boolean(task)
+
+  useEffect(() => {
+    if (task) {
+      // Edit mode - populate with existing task data
+      setTitle(task.title)
+      setDescription(task.description || '')
+      setStatus(task.status)
+    } else {
+      // Create mode - reset to defaults
+      setTitle('')
+      setDescription('')
+      setStatus('todo')
+    }
+  }, [task, isOpen])
+
+  const handleSubmit = async () => {
+    if (!title.trim()) return
+    
+    setIsSubmitting(true)
+    try {
+      if (isEditMode && onUpdateTask) {
+        await onUpdateTask(title, description, status)
+      } else if (!isEditMode && onCreateTask) {
+        await onCreateTask(title, description)
+      }
+      
+      // Reset form on successful creation
+      if (!isEditMode) {
+        setTitle('')
+        setDescription('')
+        setStatus('todo')
+      }
+      
+      onOpenChange(false)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleCancel = () => {
+    // Reset form state when canceling
+    if (task) {
+      setTitle(task.title)
+      setDescription(task.description || '')
+      setStatus(task.status)
+    } else {
+      setTitle('')
+      setDescription('')
+      setStatus('todo')
+    }
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{isEditMode ? 'Edit Task' : 'Create New Task'}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="task-title">Title</Label>
+            <Input
+              id="task-title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Enter task title"
+              disabled={isSubmitting}
+            />
+          </div>
+          
+          <div>
+            <Label htmlFor="task-description">Description</Label>
+            <FileSearchTextarea
+              value={description}
+              onChange={setDescription}
+              placeholder="Enter task description (optional). Type @ to search files."
+              rows={3}
+              disabled={isSubmitting}
+              projectId={projectId}
+            />
+          </div>
+          
+          {isEditMode && (
+            <div>
+              <Label htmlFor="task-status">Status</Label>
+              <Select
+                value={status}
+                onValueChange={(value) => setStatus(value as TaskStatus)}
+                disabled={isSubmitting}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="todo">To Do</SelectItem>
+                  <SelectItem value="inprogress">In Progress</SelectItem>
+                  <SelectItem value="inreview">In Review</SelectItem>
+                  <SelectItem value="done">Done</SelectItem>
+                  <SelectItem value="cancelled">Cancelled</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+          
+          <div className="flex justify-end space-x-2">
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button 
+              onClick={handleSubmit}
+              disabled={isSubmitting || !title.trim()}
+            >
+              {isSubmitting 
+                ? (isEditMode ? 'Updating...' : 'Creating...') 
+                : (isEditMode ? 'Update Task' : 'Create Task')
+              }
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/frontend/src/components/tasks/index.ts
+++ b/frontend/src/components/tasks/index.ts
@@ -1,4 +1,3 @@
-export { TaskCreateDialog } from './TaskCreateDialog'
-export { TaskEditDialog } from './TaskEditDialog'
+export { TaskFormDialog } from './TaskFormDialog'
 export { TaskCard } from './TaskCard'
 export { TaskKanbanBoard } from './TaskKanbanBoard'
--- a/frontend/src/components/ui/file-search-textarea.tsx
+++ b/frontend/src/components/ui/file-search-textarea.tsx
@@ -0,0 +1,232 @@
+import { useState, useRef, useEffect, KeyboardEvent } from 'react'
+import { Textarea } from '@/components/ui/textarea'
+import { makeRequest } from '@/lib/api'
+
+interface FileSearchResult {
+  path: string
+  name: string
+}
+
+interface ApiResponse<T> {
+  success: boolean
+  data: T | null
+  message: string | null
+}
+
+interface FileSearchTextareaProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  rows?: number
+  disabled?: boolean
+  className?: string
+  projectId?: string
+}
+
+export function FileSearchTextarea({
+  value,
+  onChange,
+  placeholder,
+  rows = 3,
+  disabled = false,
+  className,
+  projectId
+}: FileSearchTextareaProps) {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [searchResults, setSearchResults] = useState<FileSearchResult[]>([])
+  const [showDropdown, setShowDropdown] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState(-1)
+
+  const [atSymbolPosition, setAtSymbolPosition] = useState(-1)
+  const [isLoading, setIsLoading] = useState(false)
+  
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  // Search for files when query changes
+  useEffect(() => {
+    if (!searchQuery || !projectId || searchQuery.length < 1) {
+      setSearchResults([])
+      setShowDropdown(false)
+      return
+    }
+
+    const searchFiles = async () => {
+      setIsLoading(true)
+      try {
+        const response = await makeRequest(
+          `/api/projects/${projectId}/search?q=${encodeURIComponent(searchQuery)}`
+        )
+        
+        if (response.ok) {
+          const result: ApiResponse<FileSearchResult[]> = await response.json()
+          if (result.success && result.data) {
+            setSearchResults(result.data)
+            setShowDropdown(true)
+            setSelectedIndex(-1)
+          }
+        }
+      } catch (error) {
+        console.error('Failed to search files:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    const debounceTimer = setTimeout(searchFiles, 300)
+    return () => clearTimeout(debounceTimer)
+  }, [searchQuery, projectId])
+
+  // Handle text changes and detect @ symbol
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value
+    const newCursorPosition = e.target.selectionStart || 0
+    
+    onChange(newValue)
+
+    // Check if @ was just typed
+    const textBeforeCursor = newValue.slice(0, newCursorPosition)
+    const lastAtIndex = textBeforeCursor.lastIndexOf('@')
+    
+    if (lastAtIndex !== -1) {
+      // Check if there's no space after the @ (still typing the search query)
+      const textAfterAt = textBeforeCursor.slice(lastAtIndex + 1)
+      const hasSpace = textAfterAt.includes(' ') || textAfterAt.includes('\n')
+      
+      if (!hasSpace) {
+        setAtSymbolPosition(lastAtIndex)
+        setSearchQuery(textAfterAt)
+        return
+      }
+    }
+    
+    // If no valid @ context, hide dropdown
+    setShowDropdown(false)
+    setSearchQuery('')
+    setAtSymbolPosition(-1)
+  }
+
+  // Handle keyboard navigation
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!showDropdown || searchResults.length === 0) return
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        setSelectedIndex(prev => 
+          prev < searchResults.length - 1 ? prev + 1 : 0
+        )
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setSelectedIndex(prev => 
+          prev > 0 ? prev - 1 : searchResults.length - 1
+        )
+        break
+      case 'Enter':
+        if (selectedIndex >= 0) {
+          e.preventDefault()
+          selectFile(searchResults[selectedIndex])
+        }
+        break
+      case 'Escape':
+        e.preventDefault()
+        setShowDropdown(false)
+        setSearchQuery('')
+        setAtSymbolPosition(-1)
+        break
+    }
+  }
+
+  // Select a file and insert it into the text
+  const selectFile = (file: FileSearchResult) => {
+    if (atSymbolPosition === -1) return
+    
+    const beforeAt = value.slice(0, atSymbolPosition)
+    const afterQuery = value.slice(atSymbolPosition + 1 + searchQuery.length)
+    const newValue = beforeAt + file.path + afterQuery
+    
+    onChange(newValue)
+    setShowDropdown(false)
+    setSearchQuery('')
+    setAtSymbolPosition(-1)
+    
+    // Focus back to textarea
+    setTimeout(() => {
+      if (textareaRef.current) {
+        const newCursorPos = atSymbolPosition + file.path.length
+        textareaRef.current.focus()
+        textareaRef.current.setSelectionRange(newCursorPos, newCursorPos)
+      }
+    }, 0)
+  }
+
+  // Calculate dropdown position
+  const getDropdownPosition = () => {
+    if (!textareaRef.current || atSymbolPosition === -1) return { top: 0, left: 0 }
+    
+    const textBeforeAt = value.slice(0, atSymbolPosition)
+    const lines = textBeforeAt.split('\n')
+    const currentLine = lines.length - 1
+    const charInLine = lines[lines.length - 1].length
+    
+    // Rough calculation - this is an approximation
+    const lineHeight = 20
+    const charWidth = 8
+    const top = (currentLine + 1) * lineHeight + 10
+    const left = charWidth * charInLine
+    
+    return { top, left }
+  }
+
+  const dropdownPosition = getDropdownPosition()
+
+  return (
+    <div className="relative">
+      <Textarea
+        ref={textareaRef}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        rows={rows}
+        disabled={disabled}
+        className={className}
+      />
+      
+      {showDropdown && (
+        <div
+          ref={dropdownRef}
+          className="absolute z-50 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto min-w-64"
+          style={{
+            top: dropdownPosition.top,
+            left: dropdownPosition.left,
+          }}
+        >
+          {isLoading ? (
+            <div className="p-2 text-sm text-gray-500">Searching...</div>
+          ) : searchResults.length === 0 ? (
+            <div className="p-2 text-sm text-gray-500">No files found</div>
+          ) : (
+            <div className="py-1">
+              {searchResults.map((file, index) => (
+                <div
+                  key={file.path}
+                  className={`px-3 py-2 cursor-pointer text-sm ${
+                    index === selectedIndex
+                      ? 'bg-blue-50 text-blue-900'
+                      : 'hover:bg-gray-50'
+                  }`}
+                  onClick={() => selectFile(file)}
+                >
+                  <div className="font-medium truncate">{file.name}</div>
+                  <div className="text-xs text-gray-500 truncate">{file.path}</div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/frontend/src/pages/project-tasks.tsx
+++ b/frontend/src/pages/project-tasks.tsx
@@ -4,8 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { ArrowLeft, Plus } from "lucide-react";
 import { makeRequest } from "@/lib/api";
-import { TaskCreateDialog } from "@/components/tasks/TaskCreateDialog";
-import { TaskEditDialog } from "@/components/tasks/TaskEditDialog";
+import { TaskFormDialog } from "@/components/tasks/TaskFormDialog";

 import { TaskKanbanBoard } from "@/components/tasks/TaskKanbanBoard";
 import type { TaskStatus, TaskWithAttemptStatus } from "shared/types";
@@ -34,9 +33,8 @@ export function ProjectTasks() {
  const [project, setProject] = useState<Project | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
  const [editingTask, setEditingTask] = useState<Task | null>(null);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);

  useEffect(() => {
    if (projectId) {
@@ -177,7 +175,12 @@ export function ProjectTasks() {

  const handleEditTask = (task: Task) => {
    setEditingTask(task);
-    setIsEditDialogOpen(true);
+    setIsTaskDialogOpen(true);
+  };
+
+  const handleCreateNewTask = () => {
+    setEditingTask(null);
+    setIsTaskDialogOpen(true);
  };

  const handleViewTaskDetails = (task: Task) => {
@@ -266,16 +269,19 @@ export function ProjectTasks() {
          </div>
        </div>

-        <Button onClick={() => setIsCreateDialogOpen(true)}>
+        <Button onClick={handleCreateNewTask}>
          <Plus className="h-4 w-4 mr-2" />
          Add Task
        </Button>
      </div>

-      <TaskCreateDialog
-        isOpen={isCreateDialogOpen}
-        onOpenChange={setIsCreateDialogOpen}
+      <TaskFormDialog
+        isOpen={isTaskDialogOpen}
+        onOpenChange={setIsTaskDialogOpen}
+        task={editingTask}
+        projectId={projectId}
        onCreateTask={handleCreateTask}
+        onUpdateTask={handleUpdateTask}
      />

      {/* Tasks View */}
@@ -287,7 +293,7 @@ export function ProjectTasks() {
            </p>
            <Button
              className="mt-4"
-              onClick={() => setIsCreateDialogOpen(true)}
+              onClick={handleCreateNewTask}
            >
              <Plus className="h-4 w-4 mr-2" />
              Create First Task
@@ -304,12 +310,7 @@ export function ProjectTasks() {
        />
      )}

-      <TaskEditDialog
-        isOpen={isEditDialogOpen}
-        onOpenChange={setIsEditDialogOpen}
-        task={editingTask}
-        onUpdateTask={handleUpdateTask}
-      />
+
    </div>
  );
 }
--- a/frontend/src/pages/task-details.tsx
+++ b/frontend/src/pages/task-details.tsx
@@ -3,8 +3,6 @@ import { useParams, useNavigate } from "react-router-dom";
 import { Card, CardContent } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import {
  Select,
  SelectContent,
@@ -15,6 +13,7 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { ArrowLeft, FileText } from "lucide-react";
 import { makeRequest } from "@/lib/api";
+import { TaskFormDialog } from "@/components/tasks/TaskFormDialog";
 import type {
  TaskStatus,
  TaskAttempt,
@@ -69,12 +68,7 @@ export function TaskDetailsPage() {
  const [stoppingAttempt, setStoppingAttempt] = useState(false);
  const [error, setError] = useState<string | null>(null);

-  // Edit mode state
-  const [isEditMode, setIsEditMode] = useState(false);
-  const [editedTitle, setEditedTitle] = useState("");
-  const [editedDescription, setEditedDescription] = useState("");
-  const [editedStatus, setEditedStatus] = useState<TaskStatus>("todo");
-  const [savingTask, setSavingTask] = useState(false);
+  const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);

  // Check if the selected attempt is currently running (latest activity is "inprogress" or "init")
  const isAttemptRunning =
@@ -106,11 +100,6 @@ export function TaskDetailsPage() {
  useEffect(() => {
    if (task) {
      fetchTaskAttempts(task.id);
-      // Initialize edit state with current task values
-      setEditedTitle(task.title);
-      setEditedDescription(task.description || "");
-      setEditedStatus(task.status);
-      setIsEditMode(false);
    }
  }, [task]);

@@ -232,11 +221,12 @@ export function TaskDetailsPage() {
    fetchAttemptActivities(attempt.id);
  };

-  const saveTaskChanges = async () => {
+
+
+  const handleUpdateTaskFromDialog = async (title: string, description: string, status: TaskStatus) => {
    if (!task || !projectId) return;

    try {
-      setSavingTask(true);
      const response = await makeRequest(
        `/api/projects/${projectId}/tasks/${task.id}`,
        {
@@ -245,41 +235,29 @@ export function TaskDetailsPage() {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
-            title: editedTitle,
-            description: editedDescription || null,
-            status: editedStatus,
+            title,
+            description: description || null,
+            status,
          }),
        }
      );

      if (response.ok) {
-        setIsEditMode(false);
        // Update the local task state
        setTask({
          ...task,
-          title: editedTitle,
-          description: editedDescription || null,
-          status: editedStatus,
+          title,
+          description: description || null,
+          status,
        });
      } else {
        setError("Failed to save task changes");
      }
    } catch (err) {
      setError("Failed to save task changes");
-    } finally {
-      setSavingTask(false);
    }
  };

-  const cancelEdit = () => {
-    if (task) {
-      setEditedTitle(task.title);
-      setEditedDescription(task.description || "");
-      setEditedStatus(task.status);
-    }
-    setIsEditMode(false);
-  };
-
  const createNewAttempt = async () => {
    if (!task || !projectId) return;

@@ -396,29 +374,16 @@ export function TaskDetailsPage() {
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Tasks
          </Button>
-          <h1 className="text-2xl font-bold">
-            {isEditMode ? "Edit Task" : "Task Details"}
-          </h1>
+          <h1 className="text-2xl font-bold">Task Details</h1>
        </div>
        <div className="flex gap-2">
-          {isEditMode ? (
-            <>
-              <Button onClick={saveTaskChanges} disabled={savingTask} size="sm">
-                {savingTask ? "Saving..." : "Save"}
-              </Button>
-              <Button onClick={cancelEdit} variant="outline" size="sm">
-                Cancel
-              </Button>
-            </>
-          ) : (
-            <Button
-              onClick={() => setIsEditMode(true)}
-              variant="outline"
-              size="sm"
-            >
-              Edit
-            </Button>
-          )}
+          <Button
+            onClick={() => setIsTaskDialogOpen(true)}
+            variant="outline"
+            size="sm"
+          >
+            Edit Task
+          </Button>
        </div>
      </div>

@@ -431,40 +396,22 @@ export function TaskDetailsPage() {
              <div className="space-y-4">
                <div>
                  <Label className="text-sm font-medium">Title</Label>
-                  {isEditMode ? (
-                    <Input
-                      value={editedTitle}
-                      onChange={(e) => setEditedTitle(e.target.value)}
-                      className="mt-1"
-                      placeholder="Enter task title..."
-                    />
-                  ) : (
-                    <h2 className="text-lg font-semibold mt-1">{task.title}</h2>
-                  )}
+                  <h2 className="text-lg font-semibold mt-1">{task.title}</h2>
                </div>

                <div>
                  <Label className="text-sm font-medium">Description</Label>
-                  {isEditMode ? (
-                    <Textarea
-                      value={editedDescription}
-                      onChange={(e) => setEditedDescription(e.target.value)}
-                      className="mt-1 min-h-[100px]"
-                      placeholder="Enter task description..."
-                    />
-                  ) : (
-                    <div className="mt-1 p-3 bg-gray-50 rounded-md min-h-[60px]">
-                      {task.description ? (
-                        <p className="text-sm text-gray-700 whitespace-pre-wrap">
-                          {task.description}
-                        </p>
-                      ) : (
-                        <p className="text-sm text-gray-500 italic">
-                          No description provided
-                        </p>
-                      )}
-                    </div>
-                  )}
+                  <div className="mt-1 p-3 bg-gray-50 rounded-md min-h-[60px]">
+                    {task.description ? (
+                      <p className="text-sm text-gray-700 whitespace-pre-wrap">
+                        {task.description}
+                      </p>
+                    ) : (
+                      <p className="text-sm text-gray-500 italic">
+                        No description provided
+                      </p>
+                    )}
+                  </div>
                </div>
              </div>
            </CardContent>
@@ -528,41 +475,21 @@ export function TaskDetailsPage() {
                  <Label className="text-xs text-muted-foreground">
                    Status
                  </Label>
-                  {isEditMode ? (
-                    <Select
-                      value={editedStatus}
-                      onValueChange={(value) =>
-                        setEditedStatus(value as TaskStatus)
-                      }
-                    >
-                      <SelectTrigger className="mt-1">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="todo">To Do</SelectItem>
-                        <SelectItem value="inprogress">In Progress</SelectItem>
-                        <SelectItem value="inreview">In Review</SelectItem>
-                        <SelectItem value="done">Done</SelectItem>
-                        <SelectItem value="cancelled">Cancelled</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  ) : (
-                    <div
-                      className={`mt-1 px-2 py-1 rounded-full text-xs font-medium w-fit ${
-                        task.status === "todo"
-                          ? "bg-gray-100 text-gray-800"
-                          : task.status === "inprogress"
-                          ? "bg-blue-100 text-blue-800"
-                          : task.status === "inreview"
-                          ? "bg-yellow-100 text-yellow-800"
-                          : task.status === "done"
-                          ? "bg-green-100 text-green-800"
-                          : "bg-red-100 text-red-800"
-                      }`}
-                    >
-                      {statusLabels[task.status]}
-                    </div>
-                  )}
+                  <div
+                    className={`mt-1 px-2 py-1 rounded-full text-xs font-medium w-fit ${
+                      task.status === "todo"
+                        ? "bg-gray-100 text-gray-800"
+                        : task.status === "inprogress"
+                        ? "bg-blue-100 text-blue-800"
+                        : task.status === "inreview"
+                        ? "bg-yellow-100 text-yellow-800"
+                        : task.status === "done"
+                        ? "bg-green-100 text-green-800"
+                        : "bg-red-100 text-red-800"
+                    }`}
+                  >
+                    {statusLabels[task.status]}
+                  </div>
                </div>

                <Separator />
@@ -769,6 +696,14 @@ export function TaskDetailsPage() {
          )}
        </div>
      </div>
+
+      <TaskFormDialog
+        isOpen={isTaskDialogOpen}
+        onOpenChange={setIsTaskDialogOpen}
+        task={task}
+        projectId={projectId}
+        onUpdateTask={handleUpdateTaskFromDialog}
+      />
    </div>
  );
 }
--- a/shared/types.ts
+++ b/shared/types.ts
@@ -11,6 +11,10 @@ export type Project = { id: string, name: string, git_repo_path: string, created

 export type UpdateProject = { name: string | null, git_repo_path: string | null, };

+export type SearchResult = { path: string, is_file: boolean, match_type: SearchMatchType, };
+
+export type SearchMatchType = "FileName" | "DirectoryName" | "FullPath";
+
 export type CreateTask = { project_id: string, title: string, description: string | null, };

 export type TaskStatus = "todo" | "inprogress" | "inreview" | "done" | "cancelled";