Simulation Details page layout Update

src/lib/SimulationSidebar.svelte

@@ -2,6 +2,33 @@
     import type { SimulationState } from "./simulationState.svelte";
 
     let { state }: { state: SimulationState } = $props();
+
+    async function clearFails() {
+        if (
+            !confirm(
+                "Are you sure you want to permanently delete all failed simulations?",
+            )
+        ) {
+            return;
+        }
+        try {
+            const res = await fetch("/api/simulations/clear-fails", {
+                method: "DELETE",
+            });
+            if (res.ok) {
+                const data = await res.json();
+                alert(
+                    `Successfully cleared ${data.deleted_count} failed runs.`,
+                );
+                window.location.reload();
+            } else {
+                alert("Failed to clear simulations.");
+            }
+        } catch (e) {
+            console.error("Error clearing fails:", e);
+            alert("Network error clearing fails.");
+        }
+    }
 </script>
 
 <aside class="sidebar">
@@ -127,10 +154,12 @@
     <button class="reset-btn" onclick={() => state.resetFilters()}>
         Reset Filters
     </button>
+    <button class="clear-fails-btn" onclick={clearFails}> Clear Fails </button>
 </aside>
 
 <style>
-    .reset-btn {
+    .reset-btn,
+    .clear-fails-btn {
         width: 100%;
         margin-top: 20px;
         padding: 10px;
@@ -145,4 +174,13 @@
     .reset-btn:hover {
         background-color: #d0d0d0;
     }
+    .clear-fails-btn {
+        margin-top: 10px;
+        background-color: #ffcccc;
+        color: #990000;
+        border-color: #990000;
+    }
+    .clear-fails-btn:hover {
+        background-color: #ff9999;
+    }
 </style>