feat: add user information display in extractions table and update extraction retrieval method

src/components/extractions/ExtractionsRow.tsx

@@ -9,7 +9,8 @@ import {
   CheckCircle, 
   Clock, 
   ExternalLink, 
-  Loader2 
+  Loader2,
+  User
 } from 'lucide-react'
 
 interface ExtractionsRowProps {
@@ -88,6 +89,14 @@ export function ExtractionsRow({ extraction }: ExtractionsRowProps) {
       <TableCell className="text-center">
         {getServiceBadge(extraction.service)}
       </TableCell>
+      <TableCell>
+        <div className="flex items-center gap-2">
+          <User className="h-4 w-4 text-muted-foreground" />
+          <span className="font-medium">
+            {extraction.user_name || 'Unknown'}
+          </span>
+        </div>
+      </TableCell>
       <TableCell>
         <div className="space-y-1">
           {getStatusBadge(extraction.status)}

src/components/extractions/ExtractionsTable.tsx

@@ -20,6 +20,7 @@ export function ExtractionsTable({ extractions }: ExtractionsTableProps) {
           <TableRow>
             <TableHead>Title</TableHead>
             <TableHead className="text-center">Service</TableHead>
+            <TableHead>User</TableHead>
             <TableHead>Status</TableHead>
             <TableHead>Created</TableHead>
             <TableHead className="text-center">Actions</TableHead>

src/lib/api/services/extractions.ts

@@ -9,6 +9,7 @@ export interface ExtractionInfo {
   service_id?: string
   sound_id?: number
   user_id: number
+  user_name?: string
   error?: string
   created_at: string
   updated_at: string
@@ -56,9 +57,9 @@ export class ExtractionsService {
   }
 
   /**
-   * Get user's extractions
+   * Get all extractions
    */
-  async getUserExtractions(params?: GetExtractionsParams): Promise<ExtractionInfo[]> {
+  async getAllExtractions(params?: GetExtractionsParams): Promise<ExtractionInfo[]> {
     const searchParams = new URLSearchParams()
     
     if (params?.search) {
@@ -80,6 +81,32 @@ export class ExtractionsService {
     const response = await apiClient.get<GetExtractionsResponse>(url)
     return response.extractions
   }
+
+  /**
+   * Get user's extractions
+   */
+  async getUserExtractions(params?: GetExtractionsParams): Promise<ExtractionInfo[]> {
+    const searchParams = new URLSearchParams()
+    
+    if (params?.search) {
+      searchParams.append('search', params.search)
+    }
+    if (params?.sort_by) {
+      searchParams.append('sort_by', params.sort_by)
+    }
+    if (params?.sort_order) {
+      searchParams.append('sort_order', params.sort_order)
+    }
+    if (params?.status_filter) {
+      searchParams.append('status_filter', params.status_filter)
+    }
+    
+    const queryString = searchParams.toString()
+    const url = queryString ? `/api/v1/extractions/user?${queryString}` : '/api/v1/extractions/user'
+    
+    const response = await apiClient.get<GetExtractionsResponse>(url)
+    return response.extractions
+  }
 }
 
 export const extractionsService = new ExtractionsService()

src/pages/ExtractionsPage.tsx

@@ -48,7 +48,7 @@ export function ExtractionsPage() {
     try {
       setLoading(true)
       setError(null)
-      const data = await extractionsService.getUserExtractions({
+      const data = await extractionsService.getAllExtractions({
         search: debouncedSearchQuery.trim() || undefined,
         sort_by: sortBy,
         sort_order: sortOrder,