feat: add delete button for failed runs

messages/en.json

@@ -198,6 +198,7 @@
   "runs_status_running": "Running",
   "runs_status_completed": "Completed",
   "runs_status_failed": "Failed",
+  "runs_deleteRun": "Delete run",
   "runs_status_pending": "Pending",
 
   "analysis_title": "Analysis",

src/main/ipc/catalog.ts

@@ -9,7 +9,7 @@ import {
 } from '../db/detections';
 import { clearDatabase } from '../db/database';
 import { getLocations, getLocationsWithCounts } from '../db/locations';
-import { getRunsWithStats } from '../db/runs';
+import { getRunsWithStats, deleteRun } from '../db/runs';
 import { resolveAll, searchByCommonName } from '../labels/label-service';
 import type {
   Detection,
@@ -42,6 +42,10 @@ export function registerCatalogHandlers(): void {
     return getRunsWithStats();
   });
 
+  ipcMain.handle('catalog:delete-run', (_event, id: number) => {
+    deleteRun(id);
+  });
+
   ipcMain.handle('catalog:get-detections', (_event, filter: DetectionFilter) => {
     // If species filter is set, also resolve common name matches from label service
     if (filter.species) {

src/preload/index.ts

@@ -18,6 +18,7 @@ const ALLOWED_INVOKE_CHANNELS = new Set([
   'clip:get-spectrogram',
   'clip:export-region',
   'catalog:get-runs',
+  'catalog:delete-run',
   'catalog:get-detections',
   'catalog:search-species',
   'catalog:get-species-summary',

src/renderer/src/lib/components/RunList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AudioLines, CircleAlert, Loader } from '@lucide/svelte';
+  import { AudioLines, CircleAlert, Loader, X } from '@lucide/svelte';
   import { formatDate } from '$lib/utils/format';
   import type { RunWithStats } from '$shared/types';
   import * as m from '$paraglide/messages';
@@ -8,11 +8,13 @@
     runs,
     selectedRunId,
     onselect,
+    ondelete,
     loading = false,
   }: {
     runs: RunWithStats[];
     selectedRunId: number | null;
     onselect: (runId: number) => void;
+    ondelete?: (runId: number) => void;
     loading?: boolean;
   } = $props();
 
@@ -45,13 +47,33 @@
       </div>
     {:else}
       {#each runs as run (run.id)}
-        <button
+        <div
           onclick={() => {
             onselect(run.id);
           }}
-          class="border-base-300 w-full border-b px-3 py-2.5 text-left transition-colors
+          onkeydown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              if (e.target === e.currentTarget) onselect(run.id);
+            }
+          }}
+          role="button"
+          tabindex="0"
+          class="border-base-300 relative w-full cursor-pointer border-b px-3 py-2.5 text-left transition-colors
             {selectedRunId === run.id ? 'bg-primary/10 border-l-primary border-l-2' : 'hover:bg-base-300/50'}"
         >
+          {#if run.status === 'failed' && ondelete}
+            <button
+              onclick={(e) => {
+                e.stopPropagation();
+                ondelete(run.id);
+              }}
+              class="text-base-content/30 hover:text-error absolute top-1.5 right-1.5 rounded p-0.5 transition-colors"
+              title={m.runs_deleteRun()}
+            >
+              <X size={14} />
+            </button>
+          {/if}
           <div class="truncate text-sm font-medium">{sourceName(run.source_path)}</div>
           <div class="text-base-content/50 mt-0.5 flex items-center gap-1.5 text-xs">
             <span class="truncate">{run.model}</span>
@@ -75,7 +97,7 @@
               </span>
             {/if}
           </div>
-        </button>
+        </div>
       {/each}
     {/if}
   </div>

src/renderer/src/lib/utils/ipc.ts

@@ -44,6 +44,10 @@ export function getRuns(): Promise<RunWithStats[]> {
   return window.birda.invoke('catalog:get-runs') as Promise<RunWithStats[]>;
 }
 
+export function deleteRun(id: number): Promise<void> {
+  return window.birda.invoke('catalog:delete-run', id) as Promise<void>;
+}
+
 export function getDetections(filter: DetectionFilter): Promise<{ detections: EnrichedDetection[]; total: number }> {
   return window.birda.invoke('catalog:get-detections', filter) as Promise<{
     detections: EnrichedDetection[];

src/renderer/src/pages/DetectionsPage.svelte

@@ -3,7 +3,7 @@
   import RunList from '$lib/components/RunList.svelte';
   import AnalysisTable from '$lib/components/AnalysisTable.svelte';
   import { appState } from '$lib/stores/app.svelte';
-  import { getRuns, getDetections } from '$lib/utils/ipc';
+  import { getRuns, getDetections, deleteRun, getCatalogStats } from '$lib/utils/ipc';
   import { formatNumber, parseRecordingStart } from '$lib/utils/format';
   import type { EnrichedDetection, RunWithStats } from '$shared/types';
   import { onMount } from 'svelte';
@@ -68,6 +68,19 @@
     appState.selectedRunId = runId;
   }
 
+  async function handleRunDelete(runId: number) {
+    try {
+      await deleteRun(runId);
+      runs = runs.filter((r) => r.id !== runId);
+      if (appState.selectedRunId === runId) {
+        appState.selectedRunId = null;
+      }
+      appState.catalogStats = await getCatalogStats();
+    } catch (error) {
+      console.error('Failed to delete run', runId, error);
+    }
+  }
+
   function handleSort(column: string) {
     if (sortColumn === column) {
       sortDir = sortDir === 'asc' ? 'desc' : 'asc';
@@ -135,7 +148,13 @@
 </script>
 
 <div class="flex flex-1 overflow-hidden">
-  <RunList {runs} selectedRunId={appState.selectedRunId} onselect={handleRunSelect} loading={runsLoading} />
+  <RunList
+    {runs}
+    selectedRunId={appState.selectedRunId}
+    onselect={handleRunSelect}
+    ondelete={handleRunDelete}
+    loading={runsLoading}
+  />
 
   {#if appState.selectedRunId && selectedRun}
     <div class="flex flex-1 flex-col overflow-hidden">