Add ability to discard processed videos from history

packages/api/src/routes/videos.ts

@@ -215,6 +215,50 @@ router.post('/:id/queue-upload', async (req: AuthRequest, res: Response) => {
   }
 });
 
+// DELETE /videos/:id - Remove a processed video from history
+router.delete('/:id', async (req: AuthRequest, res: Response) => {
+  try {
+    const userId = req.user!.userId;
+    const { id } = req.params;
+
+    const video = await prisma.video.findFirst({
+      where: { id, userId },
+    });
+
+    if (!video) {
+      res.status(404).json({
+        error: 'Not Found',
+        message: 'Video no encontrado',
+      });
+      return;
+    }
+
+    const deletableStatuses = [
+      VideoStatus.EDITED,
+      VideoStatus.FAILED_EDIT,
+      VideoStatus.FAILED_UPLOAD,
+    ];
+
+    if (!deletableStatuses.includes(video.status)) {
+      res.status(400).json({
+        error: 'Bad Request',
+        message: `Video en estado ${video.status} no se puede eliminar`,
+      });
+      return;
+    }
+
+    await prisma.video.delete({ where: { id: video.id } });
+
+    res.status(200).json({ ok: true });
+  } catch (error) {
+    console.error('Delete video error:', error);
+    res.status(500).json({
+      error: 'Internal Server Error',
+      message: 'Error al eliminar video',
+    });
+  }
+});
+
 // GET /videos/:id - Get video details with jobs
 router.get('/:id', async (req: AuthRequest, res: Response) => {
   try {

packages/web/src/pages/HistoryPage.tsx

@@ -45,12 +45,13 @@ const getStateLabel = (state: string) => {
 export const HistoryPage: React.FC = () => {
   const navigate = useNavigate();
   const { isAuthenticated, token } = useAuthStore();
-  const { jobs, fetchJobs } = useAppStore();
+  const { jobs, fetchJobs, deleteVideo } = useAppStore();
   const [previewVideo, setPreviewVideo] = useState<{
     id: string;
     url: string;
     title: string;
   } | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
 
   const queueForUpload = async (videoId: string) => {
     if (!token) return;
@@ -81,6 +82,35 @@ export const HistoryPage: React.FC = () => {
     }
   };
 
+  const handleDeleteJob = async (jobId: string) => {
+    if (!token) return;
+
+    const confirmDelete = window.confirm(
+      '¿Seguro que deseas descartar este video del historial?'
+    );
+
+    if (!confirmDelete) return;
+
+    setDeletingId(jobId);
+
+    try {
+      await deleteVideo(token, jobId);
+      if (previewVideo?.id === jobId) {
+        setPreviewVideo(null);
+      }
+      alert('🗑️ Video eliminado del historial');
+    } catch (error) {
+      console.error('Delete video error:', error);
+      alert(
+        `Error al eliminar video: ${
+          error instanceof Error ? error.message : 'Error desconocido'
+        }`
+      );
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
   useEffect(() => {
     if (!isAuthenticated) {
       navigate('/login');
@@ -148,6 +178,19 @@ export const HistoryPage: React.FC = () => {
                   <span className={`job-status ${getStateColor(job.state)}`}>
                     {getStateLabel(job.state)}
                   </span>
+                  {job.status &&
+                    ['failed', 'completed', 'edited'].includes(
+                      job.state.toLowerCase()
+                    ) && (
+                      <Button
+                        variant="danger"
+                        onClick={() => handleDeleteJob(job.id)}
+                        loading={deletingId === job.id}
+                        style={{ fontSize: '14px', padding: '6px 12px' }}
+                      >
+                        🗑️ Descartar
+                      </Button>
+                    )}
                   {job.state.toLowerCase() === 'completed' && (
                     <>
                       <Button

packages/web/src/store/appStore.ts

@@ -14,8 +14,15 @@ interface PublishJob {
   state: string;
   tiktokConnection: {
     displayName: string;
+    avatarUrl?: string | null;
   };
   createdAt: string;
+  editedUrl?: string | null;
+  status?: string;
+  videoAsset?: {
+    originalFilename: string;
+    sizeBytes: number;
+  } | null;
 }
 
 interface AppState {
@@ -36,6 +43,7 @@ interface AppState {
   fetchConnections: (token: string, forceRefresh?: boolean) => Promise<void>;
   fetchJobs: (token: string, forceRefresh?: boolean) => Promise<void>;
   deleteConnection: (token: string, connectionId: string) => Promise<void>;
+  deleteVideo: (token: string, videoId: string) => Promise<void>;
   setDefaultConnection: (token: string, connectionId: string) => Promise<void>;
   createMockConnection: (token: string, displayName: string) => Promise<void>;
 }
@@ -166,6 +174,32 @@ export const useAppStore = create<AppState>((set, get) => ({
     }
   },
 
+  deleteVideo: async (token: string, videoId: string) => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = await fetch(`${API_URL}/videos/${videoId}`, {
+        method: 'DELETE',
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => null);
+        throw new Error(error?.message || 'Error al eliminar video');
+      }
+
+      set(state => ({
+        jobs: state.jobs.filter(job => job.id !== videoId),
+        isLoading: false,
+        lastFetchJobs: null,
+      }));
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Error desconocido';
+      set({ error: message, isLoading: false });
+      throw error;
+    }
+  },
+
   setDefaultConnection: async (token: string, connectionId: string) => {
     set({ isLoading: true, error: null });
     try {