Add Tavily web search and project editing improvements

README.md

@@ -73,6 +73,7 @@ SUPABASE_URL=your_project_url
 SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
 OPENAI_API_KEY=optional_key
 GROQ_API_KEY=optional_key
+TAVILY_API_KEY=optional_key
 # See SPEC.md for all available providers
 ```
 
@@ -126,6 +127,7 @@ GROQ_API_KEY=optional_key
 OPENAI_API_KEY=optional_key
 GEMINI_API_KEY=optional_key
 AMD_API_KEY=optional_key
+TAVILY_API_KEY=optional_key
 TASK_QUEUE_EMBEDDED_WORKER=true
 ```
 

backend/.env.example

@@ -7,6 +7,7 @@ OPENAI_API_KEY=your-openai-key
 GROQ_API_KEY=your-groq-key
 GEMINI_API_KEY=your-gemini-key
 ANTHROPIC_API_KEY=your-anthropic-key
+TAVILY_API_KEY=your-tavily-key
 
 # App Settings
 PORT=8000

backend/services/config.py

@@ -14,6 +14,7 @@ class Settings(BaseSettings):
     GEMINI_API_KEY: Optional[str] = None
     ANTHROPIC_API_KEY: Optional[str] = None
     AMD_API_KEY: Optional[str] = None
+    TAVILY_API_KEY: Optional[str] = None
     
     # App Config
     TASK_QUEUE_EMBEDDED_WORKER: bool = True

backend/tools/browser.py

@@ -1,35 +1,111 @@
-from playwright.async_api import async_playwright
 import logging
+from typing import Any
+
+import httpx
+from playwright.async_api import async_playwright
+
+from services.config import settings
 
 logger = logging.getLogger("uvicorn")
 
+
 class BrowserTool:
     """
-    A tool that allows agents to browse the web and extract content.
+    Tools for live web search and direct URL extraction.
     """
+
+    def __init__(self) -> None:
+        self.tavily_api_key = settings.TAVILY_API_KEY
+
     async def search_and_extract(self, url: str) -> str:
         """
-        Navigates to a URL and returns the text content.
+        Navigates to a URL and returns the page text content.
         """
-        logger.info(f"BrowserTool: Navigating to {url}")
-        async with async_playwright() as p:
-            browser = await p.chromium.launch(headless=True)
+        logger.info("BrowserTool: Navigating to %s", url)
+        async with async_playwright() as playwright:
+            browser = await playwright.chromium.launch(headless=True)
             page = await browser.new_page()
             try:
                 await page.goto(url, wait_until="networkidle", timeout=30000)
-                # Simple extraction: get all text from body
+                title = await page.title()
                 content = await page.inner_text("body")
-                # Truncate if too long for LLM context
-                return content[:10000] 
-            except Exception as e:
-                logger.error(f"BrowserTool error: {str(e)}")
-                return f"Error accessing {url}: {str(e)}"
+                combined = f"Title: {title}\nURL: {url}\n\n{content}".strip()
+                return combined[:12000]
+            except Exception as exc:
+                logger.error("BrowserTool extract error for %s: %s", url, exc)
+                return f"Error accessing {url}: {exc}"
             finally:
                 await browser.close()
 
-    async def google_search(self, query: str) -> str:
+    async def web_search(self, query: str, topic: str = "general", max_results: int = 5) -> str:
         """
-        Performs a Google search and returns results.
+        Searches the public web with Tavily and returns LLM-friendly results.
         """
-        search_url = f"https://www.google.com/search?q={query}"
-        return await self.search_and_extract(search_url)
+        if not self.tavily_api_key:
+            return (
+                "Web search is unavailable: TAVILY_API_KEY is not configured. "
+                "Add it to the backend environment to enable internet search."
+            )
+
+        payload = {
+            "query": query,
+            "topic": topic if topic in {"general", "news", "finance"} else "general",
+            "search_depth": "advanced",
+            "max_results": max(1, min(max_results, 10)),
+            "include_answer": "advanced",
+            "include_raw_content": False,
+            "include_images": False,
+        }
+
+        headers = {
+            "Authorization": f"Bearer {self.tavily_api_key}",
+            "Content-Type": "application/json",
+        }
+
+        try:
+            async with httpx.AsyncClient(timeout=45.0) as client:
+                response = await client.post(
+                    "https://api.tavily.com/search",
+                    headers=headers,
+                    json=payload,
+                )
+                response.raise_for_status()
+        except httpx.HTTPStatusError as exc:
+            detail = exc.response.text[:500] if exc.response is not None else str(exc)
+            logger.error("Tavily HTTP error: %s", detail)
+            return f"Tavily search failed with status {exc.response.status_code}: {detail}"
+        except Exception as exc:
+            logger.error("Tavily request error: %s", exc)
+            return f"Tavily search failed: {exc}"
+
+        data = response.json()
+        return self._format_tavily_results(query, data)
+
+    def _format_tavily_results(self, query: str, data: dict[str, Any]) -> str:
+        answer = data.get("answer")
+        results = data.get("results") or []
+
+        lines = [f"Search query: {query}"]
+        if answer:
+            lines.extend(["", "Answer:", str(answer).strip()])
+
+        if not results:
+            lines.extend(["", "No search results returned."])
+            return "\n".join(lines)
+
+        lines.extend(["", "Sources:"])
+        for index, result in enumerate(results, start=1):
+            title = result.get("title") or "Untitled"
+            url = result.get("url") or ""
+            snippet = (result.get("content") or "").strip()
+            score = result.get("score")
+
+            lines.append(f"{index}. {title}")
+            if url:
+                lines.append(f"   URL: {url}")
+            if score is not None:
+                lines.append(f"   Score: {score}")
+            if snippet:
+                lines.append(f"   Snippet: {snippet[:900]}")
+
+        return "\n".join(lines)[:12000]

backend/tools/registry.py

@@ -16,8 +16,8 @@ class ToolRegistry:
         self.visuals = VisualsTool()
         self.tools = {
             "web_search": {
-                "func": self.browser.google_search,
-                "description": "Searches the web for a given query and returns the results."
+                "func": self.browser.web_search,
+                "description": "Searches the public web using Tavily and returns summarized results with source URLs."
             },
             "extract_url": {
                 "func": self.browser.search_and_extract,
@@ -70,11 +70,21 @@ class ToolRegistry:
                 "type": "function",
                 "function": {
                     "name": "web_search",
-                    "description": "Search the web for information",
+                    "description": "Search the public web for information using Tavily. Use this when the task requires current external information.",
                     "parameters": {
                         "type": "object",
                         "properties": {
-                            "query": {"type": "string", "description": "The search query"}
+                            "query": {"type": "string", "description": "The search query"},
+                            "topic": {
+                                "type": "string",
+                                "enum": ["general", "news", "finance"],
+                                "description": "The search category. Use news for recent events and finance for market/company financial queries."
+                            },
+                            "max_results": {
+                                "type": "integer",
+                                "description": "Maximum number of results to return. Keep this small to control context size.",
+                                "default": 5
+                            }
                         },
                         "required": ["query"]
                     }

frontend/src/components/AgentsView.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Bot, CheckCircle2, PlusCircle, RefreshCw } from 'lucide-react';
+import { Bot, CheckCircle2, PlusCircle, RefreshCw, X } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { supabase } from '../services/supabase';
 import { useAuth } from '../context/useAuth';
@@ -20,6 +20,7 @@ const AgentsView: React.FC = () => {
   const { user } = useAuth();
   const defaultProvider = useMemo(() => getDefaultProvider(), []);
   const [agents, setAgents] = useState<Agent[]>([]);
+  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
   const [name, setName] = useState('');
   const [role, setRole] = useState('');
   const [provider, setProvider] = useState<SupportedProvider>(defaultProvider);
@@ -31,6 +32,7 @@ const AgentsView: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
 
   const providerModels = providerOptions.find((option) => option.id === provider)?.models ?? [];
+  const isEditing = selectedAgentId !== null;
 
   const loadAgents = async () => {
     setLoading(true);
@@ -55,10 +57,30 @@ const AgentsView: React.FC = () => {
     setModel(getDefaultModel(value));
   };
 
-  const createAgent = async (event: React.FormEvent) => {
+  const resetForm = () => {
+    setSelectedAgentId(null);
+    setName('');
+    setRole('');
+    setProvider(defaultProvider);
+    setModel(getDefaultModel(defaultProvider));
+    setSystemPrompt('');
+  };
+
+  const selectAgent = (agent: Agent) => {
+    setSelectedAgentId(agent.id);
+    setName(agent.name);
+    setRole(agent.role ?? '');
+    setProvider(agent.api_provider);
+    setModel(agent.model);
+    setSystemPrompt(agent.system_prompt ?? '');
+    setMessage(null);
+    setError(null);
+  };
+
+  const saveAgent = async (event: React.FormEvent) => {
     event.preventDefault();
     if (!user) {
-      setError('You must be signed in to create an agent.');
+      setError(`You must be signed in to ${isEditing ? 'update' : 'create'} an agent.`);
       return;
     }
 
@@ -66,22 +88,24 @@ const AgentsView: React.FC = () => {
     setError(null);
     setMessage(null);
 
-    const { error: insertError } = await supabase.from('agents').insert({
+    const payload = {
       user_id: user.id,
       name,
       role,
       api_provider: provider,
       model,
       system_prompt: systemPrompt || `You are ${name}, acting as ${role || 'an AI agent'}.`
-    });
+    };
+
+    const response = isEditing
+      ? await supabase.from('agents').update(payload).eq('id', selectedAgentId)
+      : await supabase.from('agents').insert(payload);
 
-    if (insertError) {
-      setError(insertError.message);
+    if (response.error) {
+      setError(response.error.message);
     } else {
-      setName('');
-      setRole('');
-      setSystemPrompt('');
-      setMessage('Agent created successfully.');
+      resetForm();
+      setMessage(isEditing ? 'Agent updated successfully.' : 'Agent created successfully.');
       await loadAgents();
     }
 
@@ -109,11 +133,18 @@ const AgentsView: React.FC = () => {
 
       <div className="project-detail-grid">
         <section className="glass-panel project-form">
-          <div className="settings-section-title">
-            <PlusCircle size={22} color="var(--accent)" />
-            <h3>Create Agent</h3>
+          <div className="settings-section-title" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
+              <PlusCircle size={22} color="var(--accent)" />
+              <h3>{isEditing ? 'Edit Agent' : 'Create Agent'}</h3>
+            </div>
+            {isEditing && (
+              <button className="btn btn-icon" type="button" onClick={resetForm} title="Close editor">
+                <X size={18} />
+              </button>
+            )}
           </div>
-          <form onSubmit={createAgent} style={{ display: 'grid', gap: 'var(--space-md)' }}>
+          <form onSubmit={saveAgent} style={{ display: 'grid', gap: 'var(--space-md)' }}>
             <label>
               <span>Name</span>
               <input value={name} onChange={(event) => setName(event.target.value)} required placeholder="Research Analyst" />
@@ -146,7 +177,7 @@ const AgentsView: React.FC = () => {
             </label>
             <button className="btn btn-primary" type="submit" disabled={saving}>
               <Bot size={18} />
-              {saving ? 'Creating...' : 'Create Agent'}
+              {saving ? (isEditing ? 'Saving...' : 'Creating...') : (isEditing ? 'Save Agent' : 'Create Agent')}
             </button>
           </form>
         </section>
@@ -159,13 +190,25 @@ const AgentsView: React.FC = () => {
           {agents.length === 0 && <p style={{ color: 'var(--text-dim)' }}>No agents created yet.</p>}
           <div className="task-list">
             {agents.map((agent) => (
-              <div key={agent.id} className="task-row">
+              <button
+                key={agent.id}
+                type="button"
+                className="task-row"
+                onClick={() => selectAgent(agent)}
+                style={{
+                  width: '100%',
+                  background: selectedAgentId === agent.id ? 'rgba(255,255,255,0.06)' : undefined,
+                  borderColor: selectedAgentId === agent.id ? 'var(--accent)' : undefined,
+                  textAlign: 'left',
+                  cursor: 'pointer'
+                }}
+              >
                 <div>
                   <strong>{agent.name}</strong>
                   <p>{agent.role || 'No role provided.'}</p>
                 </div>
                 <span>{agent.api_provider} / {agent.model}</span>
-              </div>
+              </button>
             ))}
           </div>
         </section>

frontend/src/components/NewProject.tsx

@@ -1,18 +1,177 @@
-import React, { useState } from 'react';
-import { CheckCircle2, FileText, PlusCircle } from 'lucide-react';
+import React, { useRef, useState } from 'react';
+import { CheckCircle2, FileText, Link2, Paperclip, PlusCircle, StickyNote, Trash2 } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { supabase } from '../services/supabase';
 import { useAuth } from '../context/useAuth';
 
+type ProjectSource =
+  | {
+      id: string;
+      kind: 'link';
+      label: string;
+      url: string;
+    }
+  | {
+      id: string;
+      kind: 'note';
+      label: string;
+      content: string;
+    }
+  | {
+      id: string;
+      kind: 'file';
+      label: string;
+      fileName: string;
+      mimeType: string;
+      size: number;
+      content?: string;
+      extracted: boolean;
+    };
+
+const supportedTextMimeTypes = new Set([
+  'text/plain',
+  'text/markdown',
+  'text/csv',
+  'application/json',
+]);
+
+const formatFileSize = (size: number) => {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const buildContextPayload = (baseContext: string, sources: ProjectSource[]) => {
+  const sections: string[] = [];
+
+  const trimmedContext = baseContext.trim();
+  if (trimmedContext) {
+    sections.push(trimmedContext);
+  }
+
+  if (sources.length) {
+    const sourceLines = sources.flatMap((source, index) => {
+      if (source.kind === 'link') {
+        return [`${index + 1}. [${source.label}](${source.url})`];
+      }
+
+      if (source.kind === 'note') {
+        return [
+          `${index + 1}. ${source.label}`,
+          source.content,
+        ];
+      }
+
+      const metadata = `${source.fileName} (${source.mimeType || 'unknown'}, ${formatFileSize(source.size)})`;
+      if (source.extracted && source.content) {
+        return [
+          `${index + 1}. ${source.label} - ${metadata}`,
+          source.content,
+        ];
+      }
+
+      return [`${index + 1}. ${source.label} - ${metadata}`];
+    });
+
+    sections.push(`Project Sources:\n${sourceLines.join('\n\n')}`);
+  }
+
+  return sections.join('\n\n').trim();
+};
+
 const NewProject: React.FC<{ onCreated?: () => void }> = ({ onCreated }) => {
   const { user } = useAuth();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [context, setContext] = useState('');
+  const [sourceLabel, setSourceLabel] = useState('');
+  const [sourceUrl, setSourceUrl] = useState('');
+  const [noteLabel, setNoteLabel] = useState('');
+  const [noteContent, setNoteContent] = useState('');
+  const [sources, setSources] = useState<ProjectSource[]>([]);
   const [isPublic, setIsPublic] = useState(false);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
 
+  const appendSource = (source: ProjectSource) => {
+    setSources((current) => [...current, source]);
+  };
+
+  const handleAddLink = () => {
+    if (!sourceUrl.trim()) {
+      setMessage('Add a valid link before saving it.');
+      return;
+    }
+
+    appendSource({
+      id: crypto.randomUUID(),
+      kind: 'link',
+      label: sourceLabel.trim() || sourceUrl.trim(),
+      url: sourceUrl.trim(),
+    });
+
+    setSourceLabel('');
+    setSourceUrl('');
+    setMessage(null);
+  };
+
+  const handleAddNote = () => {
+    if (!noteContent.trim()) {
+      setMessage('Write some note content before saving it.');
+      return;
+    }
+
+    appendSource({
+      id: crypto.randomUUID(),
+      kind: 'note',
+      label: noteLabel.trim() || 'Inline note',
+      content: noteContent.trim(),
+    });
+
+    setNoteLabel('');
+    setNoteContent('');
+    setMessage(null);
+  };
+
+  const handleFileSelection = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? []);
+    const nextSources: ProjectSource[] = [];
+
+    for (const file of files) {
+      const canExtractText =
+        supportedTextMimeTypes.has(file.type) ||
+        /\.(md|txt|csv|json)$/i.test(file.name);
+
+      let content: string | undefined;
+      if (canExtractText) {
+        content = (await file.text()).slice(0, 12000);
+      }
+
+      nextSources.push({
+        id: crypto.randomUUID(),
+        kind: 'file',
+        label: file.name,
+        fileName: file.name,
+        mimeType: file.type,
+        size: file.size,
+        content,
+        extracted: Boolean(content),
+      });
+    }
+
+    if (nextSources.length) {
+      setSources((current) => [...current, ...nextSources]);
+      setMessage(null);
+    }
+
+    event.target.value = '';
+  };
+
+  const removeSource = (id: string) => {
+    setSources((current) => current.filter((source) => source.id !== id));
+  };
+
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
     if (!user) {
@@ -23,10 +182,12 @@ const NewProject: React.FC<{ onCreated?: () => void }> = ({ onCreated }) => {
     setSaving(true);
     setMessage(null);
 
+    const contextPayload = buildContextPayload(context, sources);
+
     const { error } = await supabase.from('projects').insert({
       name,
       description,
-      context,
+      context: contextPayload,
       owner_id: user.id,
       is_public: isPublic,
       status: 'active'
@@ -38,6 +199,11 @@ const NewProject: React.FC<{ onCreated?: () => void }> = ({ onCreated }) => {
       setName('');
       setDescription('');
       setContext('');
+      setSourceLabel('');
+      setSourceUrl('');
+      setNoteLabel('');
+      setNoteContent('');
+      setSources([]);
       setIsPublic(false);
       setMessage('Project created successfully.');
       window.setTimeout(() => onCreated?.(), 500);
@@ -72,6 +238,79 @@ const NewProject: React.FC<{ onCreated?: () => void }> = ({ onCreated }) => {
           <textarea value={context} onChange={(event) => setContext(event.target.value)} placeholder="Business constraints, preferred tone, source links, acceptance criteria..." rows={6} />
         </label>
 
+        <div className="default-agent-panel" style={{ gap: 'var(--space-lg)' }}>
+          <div className="settings-section-title">
+            <Paperclip size={20} color="var(--accent)" />
+            <h3>Project Sources</h3>
+          </div>
+
+          <div className="responsive-two-col">
+            <label>
+              <span>Link Label</span>
+              <input value={sourceLabel} onChange={(event) => setSourceLabel(event.target.value)} placeholder="Market report" />
+            </label>
+            <label>
+              <span>Link URL</span>
+              <input value={sourceUrl} onChange={(event) => setSourceUrl(event.target.value)} placeholder="https://..." />
+            </label>
+          </div>
+          <button className="btn btn-glass" type="button" onClick={handleAddLink}>
+            <Link2 size={16} />
+            Add Link
+          </button>
+
+          <label>
+            <span>Quick Note</span>
+            <input value={noteLabel} onChange={(event) => setNoteLabel(event.target.value)} placeholder="Stakeholder note" />
+          </label>
+          <label>
+            <span>Note Content</span>
+            <textarea value={noteContent} onChange={(event) => setNoteContent(event.target.value)} rows={3} placeholder="Paste text, markdown, requirements, or snippets..." />
+          </label>
+          <button className="btn btn-glass" type="button" onClick={handleAddNote}>
+            <StickyNote size={16} />
+            Add Text
+          </button>
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept=".pdf,.md,.txt,.doc,.docx,.xls,.xlsx,.csv,.json,.rtf"
+            onChange={handleFileSelection}
+            style={{ display: 'none' }}
+          />
+          <button className="btn btn-glass" type="button" onClick={() => fileInputRef.current?.click()}>
+            <Paperclip size={16} />
+            Add Files
+          </button>
+
+          <p style={{ color: 'var(--text-dim)', fontSize: '0.85rem', marginTop: '-0.25rem' }}>
+            Text and markdown files are embedded into project context. PDF, Word, and Excel files are stored as named references in the context.
+          </p>
+
+          {sources.length > 0 && (
+            <div className="task-list">
+              {sources.map((source) => (
+                <div key={source.id} className="task-row">
+                  <div style={{ flex: 1 }}>
+                    <strong>{source.label}</strong>
+                    <p>
+                      {source.kind === 'link' && source.url}
+                      {source.kind === 'note' && source.content}
+                      {source.kind === 'file' && `${source.fileName} · ${formatFileSize(source.size)}${source.extracted ? ' · text imported' : ' · reference only'}`}
+                    </p>
+                  </div>
+                  <button className="btn btn-glass btn-sm" type="button" onClick={() => removeSource(source.id)}>
+                    <Trash2 size={14} />
+                    Remove
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
         <label className="toggle-row">
           <input type="checkbox" checked={isPublic} onChange={(event) => setIsPublic(event.target.checked)} />
           <span>Make project visible to authenticated users</span>

frontend/src/components/ProjectDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { ArrowLeft, Bot, CheckCircle2, Download, FileText, ListTodo, PlayCircle, PlusCircle, RefreshCw } from 'lucide-react';
+import { ArrowLeft, Bot, CheckCircle2, Download, FilePenLine, FileText, ListTodo, PlayCircle, PlusCircle, RefreshCw, Trash2, X } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { supabase } from '../services/supabase';
 import { useAuth } from '../context/useAuth';
@@ -17,6 +17,7 @@ interface Project {
 interface Agent {
   id: string;
   name: string;
+  role?: string | null;
   model: string;
 }
 
@@ -73,6 +74,7 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, onBack }) => {
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
   const [agentId, setAgentId] = useState('');
+  const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
   const [orchestrating, setOrchestrating] = useState(false);
   const [approvingAll, setApprovingAll] = useState(false);
@@ -134,7 +136,7 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, onBack }) => {
     const [{ data: projectData, error: projectError }, { data: taskData, error: taskError }, { data: agentData }] = await Promise.all([
       supabase.from('projects').select('id,name,description,context,status').eq('id', projectId).single(),
       supabase.from('tasks').select('id,title,description,status,priority,assigned_agent_id,output_data').eq('project_id', projectId).order('created_at', { ascending: false }),
-      supabase.from('agents').select('id,name,model').order('created_at', { ascending: false })
+      supabase.from('agents').select('id,name,role,model').order('created_at', { ascending: false })
     ]);
 
     if (projectError) setError(projectError.message);
@@ -149,33 +151,100 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, onBack }) => {
     loadProject();
   }, [loadProject]);
 
+  const resetTaskForm = () => {
+    setEditingTaskId(null);
+    setTitle('');
+    setDescription('');
+    setAgentId('');
+  };
+
+  const startEditingTask = (task: Task) => {
+    setEditingTaskId(task.id);
+    setTitle(task.title);
+    setDescription(task.description ?? '');
+    setAgentId(task.assigned_agent_id ?? '');
+    setError(null);
+    setMessage(null);
+  };
+
   const createTask = async (event: React.FormEvent) => {
     event.preventDefault();
     setSaving(true);
     setError(null);
+    setMessage(null);
 
-    const { error: insertError } = await supabase.from('tasks').insert({
-      project_id: projectId,
+    const payload = {
       title,
       description,
       assigned_agent_id: agentId || null,
-      status: 'todo',
-      priority: 0
-    });
-
-    if (insertError) {
-      setError(insertError.message);
+    };
+
+    const response = editingTaskId
+      ? await supabase.from('tasks').update(payload).eq('id', editingTaskId)
+      : await supabase.from('tasks').insert({
+          project_id: projectId,
+          ...payload,
+          status: 'todo',
+          priority: 0
+        });
+
+    if (response.error) {
+      setError(response.error.message);
     } else {
-      setTitle('');
-      setDescription('');
-      setAgentId('');
+      resetTaskForm();
       await loadProject();
-      setMessage('Task added.');
+      setMessage(editingTaskId ? 'Task updated.' : 'Task added.');
     }
 
     setSaving(false);
   };
 
+  const handleDeleteTask = async (task: Task) => {
+    const confirmed = window.confirm(`Delete task "${task.title}"? This cannot be undone.`);
+    if (!confirmed) return;
+
+    setError(null);
+    setMessage(null);
+
+    const { error: deleteError } = await supabase.from('tasks').delete().eq('id', task.id);
+    if (deleteError) {
+      setError(deleteError.message);
+      return;
+    }
+
+    if (editingTaskId === task.id) {
+      resetTaskForm();
+    }
+    if (selectedTask?.id === task.id) {
+      setSelectedTask(null);
+    }
+
+    await loadProject();
+    setMessage('Task deleted.');
+  };
+
+  const assignTaskAgent = async (taskId: string, assignedAgentId: string) => {
+    setError(null);
+    setMessage(null);
+
+    const { error: updateError } = await supabase
+      .from('tasks')
+      .update({ assigned_agent_id: assignedAgentId || null })
+      .eq('id', taskId);
+
+    if (updateError) {
+      setError(updateError.message);
+      return;
+    }
+
+    if (editingTaskId === taskId) {
+      setAgentId(assignedAgentId);
+    }
+
+    await loadProject();
+    setMessage('Task assignment updated.');
+  };
+
   const createDefaultAgents = async () => {
     if (!user) {
       setError('You must be signed in to create default agents.');
@@ -527,9 +596,16 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, onBack }) => {
             </button>
           </div>
 
-          <div className="settings-section-title">
-            <PlusCircle size={22} color="var(--accent)" />
-            <h3>Add Task</h3>
+          <div className="settings-section-title" style={{ justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
+              <PlusCircle size={22} color="var(--accent)" />
+              <h3>{editingTaskId ? 'Edit Task' : 'Add Task'}</h3>
+            </div>
+            {editingTaskId && (
+              <button className="btn btn-icon" type="button" onClick={resetTaskForm} title="Cancel edit">
+                <X size={18} />
+              </button>
+            )}
           </div>
           <form onSubmit={createTask} style={{ display: 'grid', gap: 'var(--space-md)' }}>
             <label>
@@ -551,7 +627,7 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, onBack }) => {
             </label>
             <button className="btn btn-primary" type="submit" disabled={saving}>
               <CheckCircle2 size={18} />
-              {saving ? 'Adding...' : 'Add Task'}
+              {saving ? (editingTaskId ? 'Saving...' : 'Adding...') : (editingTaskId ? 'Save Task' : 'Add Task')}
             </button>
           </form>
         </section>
@@ -591,6 +667,45 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, onBack }) => {
                 <div style={{ flex: 1 }}>
                   <strong>{task.title}</strong>
                   <p>{task.description || 'No description provided.'}</p>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-sm)', marginTop: 'var(--space-sm)', alignItems: 'center' }}>
+                    <select
+                      value={task.assigned_agent_id ?? ''}
+                      onClick={(e) => e.stopPropagation()}
+                      onChange={(e) => {
+                        e.stopPropagation();
+                        assignTaskAgent(task.id, e.target.value);
+                      }}
+                      style={{ maxWidth: '320px' }}
+                    >
+                      <option value="">Unassigned</option>
+                      {agents.map((agent) => (
+                        <option key={agent.id} value={agent.id}>{agent.name} ({agent.model})</option>
+                      ))}
+                    </select>
+                    <button
+                      className="btn btn-glass btn-sm"
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        startEditingTask(task);
+                      }}
+                    >
+                      <FilePenLine size={14} />
+                      Edit
+                    </button>
+                    <button
+                      className="btn btn-glass btn-sm"
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteTask(task);
+                      }}
+                      style={{ color: 'var(--danger)', borderColor: 'rgba(231, 76, 60, 0.25)' }}
+                    >
+                      <Trash2 size={14} />
+                      Delete
+                    </button>
+                  </div>
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
                   <span className={`status-badge status-${task.status}`}>