Phase 7: Collaborative Editing (Manual output editing in review modal)

backend/routers/agent_runner.py

@@ -341,6 +341,36 @@ async def run_task(task_id: str, background_tasks: BackgroundTasks, use_queue: b
     
     return {"message": "Task execution started", "task_id": task_id}
 
+@router.patch("/{task_id}/output")
+async def update_task_output(task_id: str, payload: dict):
+    """
+    Updates the output_data of a task. Allows for manual human corrections.
+    """
+    if "output_data" not in payload:
+        raise HTTPException(status_code=400, detail="Missing output_data in payload")
+    
+    # Verify task existence and project state
+    task_res = supabase.table("tasks").select("id, project_id").eq("id", task_id).single().execute()
+    if not task_res.data:
+        raise HTTPException(status_code=404, detail="Task not found")
+    _assert_task_project_is_mutable(task_res.data)
+
+    result = supabase.table("tasks").update({
+        "output_data": payload["output_data"]
+    }).eq("id", task_id).execute()
+
+    if not result.data:
+        raise HTTPException(status_code=500, detail="Failed to update task output")
+        
+    await audit_service.log_action(
+        user_id=None,
+        action="task_output_manually_edited",
+        task_id=task_id,
+        metadata={"project_id": task_res.data["project_id"]}
+    )
+
+    return {"message": "Task output updated", "task": result.data[0]}
+
 @router.post("/{task_id}/approve")
 async def approve_task(task_id: str, background_tasks: BackgroundTasks):
     task_res = supabase.table("tasks").select("*").eq("id", task_id).single().execute()

frontend/src/components/ProjectDetail.tsx

@@ -94,6 +94,8 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, uiMode, initia
   const [reportLoading, setReportLoading] = useState(false);
   const [pdfLoading, setPdfLoading] = useState(false);
   const [activeTab, setActiveTab] = useState<'tasks' | 'evidence'>('tasks');
+  const [isEditingOutput, setIsEditingOutput] = useState(false);
+  const [editedOutput, setEditedOutput] = useState('');
   const defaultProvider = getDefaultProvider();
   const defaultModel = getDefaultModel(defaultProvider);
 
@@ -653,6 +655,31 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, uiMode, initia
     }
   };
 
+  const saveEditedOutput = async () => {
+    if (!selectedTask || !canModifyProject) return;
+    setTaskActionPending(true);
+    setTaskActionError(null);
+    try {
+      const apiUrl = getApiUrl();
+      const response = await fetch(`${apiUrl}/tasks/${selectedTask.id}/output`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ output_data: editedOutput })
+      });
+      await ensureBackendOk(response);
+      
+      const updatedTask = { ...selectedTask, output_data: editedOutput };
+      setSelectedTask(updatedTask);
+      setTasks(prev => prev.map(t => t.id === updatedTask.id ? updatedTask : t));
+      setIsEditingOutput(false);
+      setMessage('Task output updated manually.');
+    } catch (exc) {
+      setTaskActionError(exc instanceof Error ? exc.message : 'Failed to update output.');
+    } finally {
+      setTaskActionPending(false);
+    }
+  };
+
   const downloadFinalReportPdf = async () => {
     setPdfLoading(true);
     setError(null);
@@ -1083,8 +1110,41 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, uiMode, initia
         <div className="modal-overlay" onClick={() => setSelectedTask(null)}>
           <div className="glass-panel modal-content task-review-modal" onClick={(e) => e.stopPropagation()}>
             <h3>Review: {selectedTask.title}</h3>
-            <div className="task-output-preview">
-              <pre>{formatTaskOutput(selectedTask.output_data)}</pre>
+            <div className="task-output-preview" style={{ position: 'relative' }}>
+              {isEditingOutput ? (
+                <textarea
+                  className="edit-output-textarea"
+                  value={editedOutput}
+                  onChange={(e) => setEditedOutput(e.target.value)}
+                  style={{
+                    width: '100%',
+                    height: '400px',
+                    background: 'rgba(0,0,0,0.2)',
+                    color: 'var(--text-main)',
+                    border: '1px solid var(--accent)',
+                    borderRadius: '8px',
+                    padding: 'var(--space-md)',
+                    fontFamily: 'monospace',
+                    fontSize: '0.9rem'
+                  }}
+                />
+              ) : (
+                <pre>{formatTaskOutput(selectedTask.output_data)}</pre>
+              )}
+              
+              {canModifyProject && !hasTaskErrorOutput(selectedTask) && selectedTask.status !== 'done' && (
+                <button 
+                  className="btn btn-glass btn-sm" 
+                  onClick={() => {
+                    if (!isEditingOutput) setEditedOutput(formatTaskOutput(selectedTask.output_data));
+                    setIsEditingOutput(!isEditingOutput);
+                  }}
+                  style={{ position: 'absolute', top: '-40px', right: '0' }}
+                >
+                  <FilePenLine size={14} />
+                  {isEditingOutput ? 'Cancel Editing' : 'Edit Output Manually'}
+                </button>
+              )}
             </div>
             {taskActionError && <div className="inline-status modal-error">{taskActionError}</div>}
             <div className="button-row modal-actions">
@@ -1101,6 +1161,10 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, uiMode, initia
                     This task has a saved execution error and needs to be retried.
                   </div>
                 </>
+              ) : isEditingOutput ? (
+                <button className="btn btn-primary" onClick={saveEditedOutput} disabled={taskActionPending}>
+                  {taskActionPending ? 'Saving...' : 'Save Changes'}
+                </button>
               ) : selectedTask.status === 'awaiting_approval' ? (
                 <>
                   <button className="btn btn-primary" onClick={() => approveTask(selectedTask.id)} disabled={taskActionPending}>
@@ -1115,7 +1179,10 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ projectId, uiMode, initia
                   This task is completed and approved.
                 </div>
               )}
-              <button className="btn btn-glass" onClick={() => setSelectedTask(null)} disabled={taskActionPending}>
+              <button className="btn btn-glass" onClick={() => {
+                setSelectedTask(null);
+                setIsEditingOutput(false);
+              }} disabled={taskActionPending}>
                 Close
               </button>
             </div>