Code reorganization Update

README.md

@@ -62,13 +62,18 @@ Updates the numeric benchmarking metrics (`search_time` and `total_time`) for a
 - **Request Body:** JSON object containing floats: `{"search_time": 25.4, "total_time": 105.8}`
 - **Response:** JSON object `{"status": "success"}`
 
+### `PUT /api/simulations/:id/hardware`
+Updates the physical hardware strings tied directly to a specific simulation run to properly map system configurations to benchmark outcomes.
+- **Request Body:** JSON object containing string fields (nullable): `{"cpu_info": "Intel i9", "gpu_info": "RTX 4090", "ram_info": "64GB DDR5"}`
+- **Response:** JSON object `{"status": "success"}`
+
 ### `PUT /api/simulations/:id/rename`
 Renames a specific simulation. Automatically updates the database and physically renames the matching directory path on the system filesystem to mirror structural links.
 - **Request Body:** JSON object containing the new underlying name: `{"name": "new_simulation_name"}`
 - **Response:** JSON object `{"status": "success", "new_name": "new_simulation_name"}`
 
 ### `POST /api/simulations/:id/upload`
-Uploads a new media or data resource file directly into a completed simulation run. Supports both images (e.g., PNGs) and heavy video files (e.g., AVIs) out of the box with an initial multi-part allocation pool mapping of 500 MB.
+Uploads a new media or data resource file directly into a completed simulation run. Supports both images (e.g., PNGs) and heavy video files (e.g., AVIs) out of the box with an initial multi-part memory bounds mapping of 32 MB (spilling to disk for larger files).
 - **Request Data:** `multipart/form-data` packet using the `file` keyword carrying the binary data blocks.
 - **Behavior:** The Go service validates the simulation ID exists, dynamically builds the memory pool, opens a stream writer caching the binary blob into the `../results/simulation_X/filename.ext` directory path, and records the resource in the primary SQLite instance.
 - **Response:** JSON object `{"status": "success", "filename": "example.png"}`

server/db.go

@@ -34,6 +34,9 @@ func initDBConnection() {
 	db.Exec("ALTER TABLE simulations ADD COLUMN config TEXT")
 	db.Exec("ALTER TABLE simulations ADD COLUMN search_time REAL")
 	db.Exec("ALTER TABLE simulations ADD COLUMN total_time REAL")
+	db.Exec("ALTER TABLE simulations ADD COLUMN cpu_info TEXT")
+	db.Exec("ALTER TABLE simulations ADD COLUMN gpu_info TEXT")
+	db.Exec("ALTER TABLE simulations ADD COLUMN ram_info TEXT")
 
 	createResourcesTableSQL := `CREATE TABLE IF NOT EXISTS resources (
 		"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
@@ -65,7 +68,6 @@ func syncResults() {
 			simName := entry.Name()
 			simID := insertSimulation(simName)
 
-			// Read subfiles
 			subFiles, err := os.ReadDir(filepath.Join(resultsDir, simName))
 			if err == nil {
 				db.Exec("DELETE FROM resources WHERE simulation_id = ?", simID)

server/routes/hardware.go

@@ -0,0 +1,34 @@
+package routes
+
+import (
+	"encoding/json"
+	"log"
+	"net/http"
+)
+
+func (rt *Router) UpdateSimulationHardware(w http.ResponseWriter, r *http.Request, idStr string) {
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+
+	var reqBody struct {
+		CPUInfo *string `json:"cpu_info"`
+		GPUInfo *string `json:"gpu_info"`
+		RAMInfo *string `json:"ram_info"`
+	}
+
+	err := json.NewDecoder(r.Body).Decode(&reqBody)
+	if err != nil {
+		http.Error(w, "Invalid request body", http.StatusBadRequest)
+		return
+	}
+	defer r.Body.Close()
+
+	_, err = rt.DB.Exec("UPDATE simulations SET cpu_info = ?, gpu_info = ?, ram_info = ? WHERE id = ?", reqBody.CPUInfo, reqBody.GPUInfo, reqBody.RAMInfo, idStr)
+	if err != nil {
+		log.Println("Update simulation hardware error:", err)
+		http.Error(w, "Failed to update", http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]string{"status": "success"})
+}

server/routes/models.go

@@ -9,4 +9,7 @@ type Simulation struct {
 	SearchTime     *float64 `json:"search_time"`
 	TotalTime      *float64 `json:"total_time"`
 	TotalSizeBytes int64    `json:"total_size_bytes"`
+	CPUInfo        *string  `json:"cpu_info"`
+	GPUInfo        *string  `json:"gpu_info"`
+	RAMInfo        *string  `json:"ram_info"`
 }

server/routes/resources.go

@@ -24,7 +24,7 @@ func (rt *Router) UploadSimulationResource(w http.ResponseWriter, r *http.Reques
 		return
 	}
 
-	err = r.ParseMultipartForm(32 << 20) // 32 MB max memory bounds, rest spills to disk
+	err = r.ParseMultipartForm(32 << 20)
 	if err != nil {
 		http.Error(w, "Error parsing form: "+err.Error(), http.StatusBadRequest)
 		return

server/routes/router.go

@@ -72,6 +72,10 @@ func (rt *Router) handleSimulationsPath(w http.ResponseWriter, r *http.Request)
 			rt.RenameSimulation(w, r, idStr)
 			return
 		}
+		if r.Method == "PUT" && action == "hardware" {
+			rt.UpdateSimulationHardware(w, r, idStr)
+			return
+		}
 		if r.Method == "POST" && action == "upload" {
 			rt.UploadSimulationResource(w, r, idStr)
 			return

server/routes/simulations.go

@@ -57,17 +57,7 @@ func (rt *Router) CreateSimulation(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	var existingID int
+
-	var existingName string
-	err = rt.DB.QueryRow("SELECT id, name FROM simulations WHERE config = ?", configStr).Scan(&existingID, &existingName)
-	if err == nil {
-		w.Header().Set("Content-Type", "application/json")
-		json.NewEncoder(w).Encode(map[string]interface{}{
-			"id":   existingID,
-			"name": existingName,
-		})
-		return
-	}
 
 	var count int
 	rt.DB.QueryRow("SELECT COUNT(*) FROM simulations").Scan(&count)
@@ -104,7 +94,7 @@ func (rt *Router) CreateSimulation(w http.ResponseWriter, r *http.Request) {
 func (rt *Router) GetSimulations(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Access-Control-Allow-Origin", "*")
 
-	rows, err := rt.DB.Query("SELECT id, name, config, created_at, search_time, total_time FROM simulations")
+	rows, err := rt.DB.Query("SELECT id, name, config, created_at, search_time, total_time, cpu_info, gpu_info, ram_info FROM simulations")
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -114,7 +104,7 @@ func (rt *Router) GetSimulations(w http.ResponseWriter, r *http.Request) {
 	var sims []Simulation
 	for rows.Next() {
 		var s Simulation
-		err = rows.Scan(&s.ID, &s.Name, &s.Config, &s.CreatedAt, &s.SearchTime, &s.TotalTime)
+		err = rows.Scan(&s.ID, &s.Name, &s.Config, &s.CreatedAt, &s.SearchTime, &s.TotalTime, &s.CPUInfo, &s.GPUInfo, &s.RAMInfo)
 		if err != nil {
 			log.Println("Row scan error:", err)
 			continue
@@ -134,7 +124,7 @@ func (rt *Router) GetSimulationDetails(w http.ResponseWriter, r *http.Request, i
 	w.Header().Set("Access-Control-Allow-Origin", "*")
 
 	var s Simulation
-	err := rt.DB.QueryRow("SELECT id, name, config, created_at, search_time, total_time FROM simulations WHERE id = ?", idStr).Scan(&s.ID, &s.Name, &s.Config, &s.CreatedAt, &s.SearchTime, &s.TotalTime)
+	err := rt.DB.QueryRow("SELECT id, name, config, created_at, search_time, total_time, cpu_info, gpu_info, ram_info FROM simulations WHERE id = ?", idStr).Scan(&s.ID, &s.Name, &s.Config, &s.CreatedAt, &s.SearchTime, &s.TotalTime, &s.CPUInfo, &s.GPUInfo, &s.RAMInfo)
 	if err != nil {
 		if err == sql.ErrNoRows {
 			http.Error(w, "Simulation not found", http.StatusNotFound)
@@ -188,7 +178,6 @@ func (rt *Router) RenameSimulation(w http.ResponseWriter, r *http.Request, idStr
 		return
 	}
 
-	// Make sure the new name doesn't already exist
 	var tempID int
 	err = rt.DB.QueryRow("SELECT id FROM simulations WHERE name = ?", newName).Scan(&tempID)
 	if err == nil {
@@ -196,7 +185,6 @@ func (rt *Router) RenameSimulation(w http.ResponseWriter, r *http.Request, idStr
 		return
 	}
 
-	// Rename the physical storage folder to maintain link parity
 	oldDirPath := filepath.Join("../results", oldName)
 	newDirPath := filepath.Join("../results", newName)
 	if _, statErr := os.Stat(oldDirPath); statErr == nil {
@@ -207,13 +195,11 @@ func (rt *Router) RenameSimulation(w http.ResponseWriter, r *http.Request, idStr
 			return
 		}
 	} else {
-		// Just ensure target dir exists
 		os.MkdirAll(newDirPath, 0755)
 	}
 
 	_, err = rt.DB.Exec("UPDATE simulations SET name = ? WHERE id = ?", newName, idStr)
 	if err != nil {
-		// Attempt revert if DB dies halfway 
 		os.Rename(newDirPath, oldDirPath)
 		log.Println("Update simulation name error:", err)
 		http.Error(w, "Failed to update database", http.StatusInternalServerError)
@@ -238,7 +224,6 @@ func (rt *Router) DeleteSimulation(w http.ResponseWriter, r *http.Request, idStr
 		return
 	}
 
-	// Attempt dropping resource map hooks first
 	_, err = rt.DB.Exec("DELETE FROM resources WHERE simulation_id = ?", idStr)
 	if err != nil {
 		log.Println("Warning: Error deleting resources map from DB:", err)
@@ -251,7 +236,6 @@ func (rt *Router) DeleteSimulation(w http.ResponseWriter, r *http.Request, idStr
 		return
 	}
 
-	// Physically destroy data payload mapped onto it 
 	dirPath := filepath.Join("../results", name)
 	if _, statErr := os.Stat(dirPath); statErr == nil {
 		err = os.RemoveAll(dirPath)

src/lib/css/simulation.css

@@ -0,0 +1,224 @@
+:global(body) {
+    font-family: "JetBrains Mono", Courier, monospace;
+    background-color: #ffffff;
+    color: #000000;
+}
+h1 {
+    font-size: 24px;
+}
+h2 {
+    font-size: 20px;
+    margin-top: 30px;
+    border-bottom: 1px solid #000;
+}
+a {
+    color: #0000ff;
+    text-decoration: underline;
+}
+a:visited {
+    color: #800080;
+}
+.back-link {
+    display: inline-block;
+    margin-bottom: 20px;
+}
+.error {
+    color: red;
+    font-weight: bold;
+}
+hr {
+    border: 0;
+    border-top: 1px solid #000;
+    margin: 20px 0;
+}
+.config-box,
+.hardware-box {
+    margin-top: 20px;
+    border: 1px solid #000;
+    padding: 10px;
+    background-color: #f8f8f8;
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow-x: auto;
+}
+.hardware-box h3 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    text-decoration: underline;
+}
+.hardware-box p {
+    margin: 5px 0;
+}
+pre {
+    margin: 10px 0 0 0;
+    white-space: pre-wrap;
+}
+.table-label {
+    margin: 0 0 5px 0;
+    font-size: 16px;
+    text-decoration: underline;
+}
+.tables-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    align-items: flex-start;
+    margin-top: 10px;
+}
+.table-wrapper {
+    flex: 1 1 300px;
+    max-width: 100%;
+    overflow-x: auto;
+}
+.config-table {
+    margin-top: 10px;
+    width: 100%;
+    border-collapse: collapse;
+    background-color: #ffffff;
+}
+.config-table th,
+.config-table td {
+    border: 1px solid #000;
+    padding: 8px 10px;
+    text-align: left;
+    word-break: break-all;
+}
+.config-table th {
+    background-color: #e0e0e0;
+}
+.header-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 20px;
+}
+.header-container h1 {
+    margin: 0;
+}
+.edit-btn,
+.export-btn,
+.save-btn,
+.cancel-btn,
+.delete-btn {
+    padding: 6px 15px;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    border: 1px solid #000;
+    background-color: #e0e0e0;
+    font-family: inherit;
+}
+.edit-btn:hover:not(:disabled),
+.export-btn:hover:not(:disabled),
+.save-btn:hover:not(:disabled),
+.cancel-btn:hover:not(:disabled) {
+    background-color: #d0d0d0;
+}
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.delete-btn {
+    background-color: #ffcccc;
+    color: #990000;
+    border-color: #990000;
+    margin-left: auto;
+}
+.delete-btn:hover {
+    background-color: #ff9999;
+}
+
+.edit-form {
+    border: 1px dashed #000;
+    padding: 15px;
+    background-color: #f5f5f5;
+    width: 100%;
+}
+.edit-form h2 {
+    margin-top: 0;
+    border-bottom: none;
+}
+.form-group {
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.edit-form label {
+    display: inline-block;
+    width: 100px;
+    font-weight: bold;
+}
+.edit-form input[type="text"] {
+    flex: 1;
+    padding: 5px;
+    border: 1px solid #000;
+    font-family: inherit;
+}
+.progress-bar-container {
+    width: 100%;
+    background-color: #ddd;
+    border: 1px solid #000;
+    margin-top: 10px;
+    position: relative;
+    height: 25px;
+}
+.progress-bar {
+    height: 100%;
+    background-color: #4caf50;
+    transition: width 0.2s ease-in-out;
+}
+.progress-text {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    top: 0;
+    left: 0;
+    line-height: 25px;
+    font-weight: bold;
+    color: #000;
+}
+.form-group input[type="file"] {
+    font-family: inherit;
+    font-size: 14px;
+    cursor: pointer;
+}
+.form-group input[type="file"]::file-selector-button {
+    padding: 6px 15px;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    border: 1px solid #000;
+    background-color: #e0e0e0;
+    font-family: inherit;
+    margin-right: 10px;
+}
+.form-group input[type="file"]::file-selector-button:hover {
+    background-color: #d0d0d0;
+}
+.form-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+@media print {
+    :global(.no-print) {
+        display: none !important;
+    }
+    :global(body) {
+        background-color: #fff !important;
+        color: #000 !important;
+        padding: 0 !important;
+    }
+    :global(*) {
+        box-shadow: none !important;
+    }
+    table {
+        border: 1px solid #000;
+    }
+    th,
+    td {
+        border: 1px solid #000;
+    }
+}

src/lib/simulationState.svelte.ts

@@ -76,7 +76,6 @@ export class SimulationState {
 
     constructor() {
         $effect(() => {
-            // Reset to page 1 whenever filters change
             if (
                 this.searchQuery !== undefined ||
                 this.sortOrder !== undefined ||
@@ -90,7 +89,6 @@ export class SimulationState {
                 this.filterUgvMax !== undefined ||
                 this.filterPattern !== undefined
             ) {
-                // Tracking any mutation will trigger this effect
                 let triggerVar = this.searchQuery + this.sortOrder + this.filterDateFrom + this.filterDateTo + this.filterAltMin + this.filterAltMax + this.filterUavMin + this.filterUavMax + this.filterUgvMin + this.filterUgvMax + this.filterPattern;
                 this.currentPage = 1;
             }
@@ -104,7 +102,6 @@ export class SimulationState {
 
             let simDate = new Date(sim.created_at).getTime();
             if (this.filterDateFrom && simDate < new Date(this.filterDateFrom).getTime()) return false;
-            // Provide +86400000 ms (1 day) to include the "To" date fully.
             if (this.filterDateTo && simDate > new Date(this.filterDateTo).getTime() + 86400000) return false;
 
             let p = parseConfig(sim.config);

src/lib/ts/test.ts

@@ -0,0 +1 @@
+export let count = 0;

src/lib/ts/utils.ts

@@ -0,0 +1,74 @@
+export type SimulationDetails = {
+    id: number;
+    name: string;
+    created_at: string;
+    resources: string[];
+    config: string | null;
+    search_time: number | null;
+    total_time: number | null;
+    total_size_bytes: number;
+    cpu_info: string | null;
+    gpu_info: string | null;
+    ram_info: string | null;
+};
+
+export function formatBytes(bytes: number) {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+
+export function flattenJSON(
+    obj: any,
+    prefix = "",
+): { key: string; value: string }[] {
+    let result: { key: string; value: string }[] = [];
+    if (!obj) return result;
+    for (let key in obj) {
+        if (typeof obj[key] === "object" && obj[key] !== null) {
+            if (Array.isArray(obj[key])) {
+                result.push({
+                    key: prefix + key,
+                    value: JSON.stringify(obj[key]),
+                });
+            } else {
+                result = result.concat(
+                    flattenJSON(obj[key], prefix + key + "."),
+                );
+            }
+        } else {
+            result.push({ key: prefix + key, value: String(obj[key]) });
+        }
+    }
+    return result;
+}
+
+export function isImage(fname: string) {
+    return (
+        fname.toLowerCase().endsWith(".png") ||
+        fname.toLowerCase().endsWith(".jpg") ||
+        fname.toLowerCase().endsWith(".jpeg")
+    );
+}
+
+export function isVideo(fname: string) {
+    return (
+        fname.toLowerCase().endsWith(".mp4") ||
+        fname.toLowerCase().endsWith(".avi") ||
+        fname.toLowerCase().endsWith(".webm") ||
+        fname.toLowerCase().endsWith(".mkv")
+    );
+}
+
+export function getResourceUrl(simName: string, resourceName: string) {
+    return `/results/${simName}/${resourceName}`;
+}
+
+export function formatTime(s: number) {
+    if (s == null || isNaN(s)) return "N/A";
+    const mins = Math.floor(s / 60);
+    const secs = (s % 60).toFixed(2).padStart(5, "0");
+    return `${mins.toString().padStart(2, "0")}:${secs}`;
+}

src/routes/simulation/[id]/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import "$lib/css/simulation.css";
+    
     import { onMount } from "svelte";
     import MediaItem from "$lib/MediaItem.svelte";
     import LogViewer from "$lib/LogViewer.svelte";
@@ -6,56 +8,22 @@
     import DualVideoViewer from "$lib/DualVideoViewer.svelte";
     import { formatDate } from "$lib/simulationState.svelte";
 
+    import {
+        type SimulationDetails,
+        formatBytes,
+        flattenJSON,
+        isImage,
+        isVideo,
+        getResourceUrl,
+        formatTime,
+    } from "$lib/ts/utils";
+
     let { data } = $props();
     let id = $derived(data.id);
 
-    type SimulationDetails = {
-        id: number;
-        name: string;
-        created_at: string;
-        resources: string[];
-        config: string | null;
-        search_time: number | null;
-        total_time: number | null;
-        total_size_bytes: number;
-    };
-
     let simulation = $state<SimulationDetails | null>(null);
     let error = $state("");
 
-    function formatBytes(bytes: number) {
-        if (bytes === 0) return "0 Bytes";
-        const k = 1024;
-        const sizes = ["Bytes", "KB", "MB", "GB"];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-    }
-
-    function flattenJSON(
-        obj: any,
-        prefix = "",
-    ): { key: string; value: string }[] {
-        let result: { key: string; value: string }[] = [];
-        if (!obj) return result;
-        for (let key in obj) {
-            if (typeof obj[key] === "object" && obj[key] !== null) {
-                if (Array.isArray(obj[key])) {
-                    result.push({
-                        key: prefix + key,
-                        value: JSON.stringify(obj[key]),
-                    });
-                } else {
-                    result = result.concat(
-                        flattenJSON(obj[key], prefix + key + "."),
-                    );
-                }
-            } else {
-                result.push({ key: prefix + key, value: String(obj[key]) });
-            }
-        }
-        return result;
-    }
-
     let parsedConfig: { key: string; value: string }[] | null = $derived.by(
         () => {
             if (!simulation?.config) return null;
@@ -89,22 +57,6 @@
         ),
     );
 
-    function isImage(fname: string) {
-        return (
-            fname.toLowerCase().endsWith(".png") ||
-            fname.toLowerCase().endsWith(".jpg") ||
-            fname.toLowerCase().endsWith(".jpeg")
-        );
-    }
-
-    function isVideo(fname: string) {
-        return (
-            fname.toLowerCase().endsWith(".mp4") ||
-            fname.toLowerCase().endsWith(".avi") ||
-            fname.toLowerCase().endsWith(".webm")
-        );
-    }
-
     let flightPathVideo: string | undefined = $derived(
         simulation && simulation.resources
             ? simulation.resources.find(
@@ -138,16 +90,15 @@
             : [],
     );
 
-    function getResourceUrl(simName: string, resourceName: string) {
-        return `/results/${simName}/${resourceName}`;
-    }
-
     onMount(async () => {
         try {
             const res = await fetch(`/api/simulations/${id}`);
             if (!res.ok) throw new Error("Failed to fetch simulation details");
             simulation = await res.json();
             newName = simulation!.name;
+            newCPU = simulation!.cpu_info || "";
+            newGPU = simulation!.gpu_info || "";
+            newRAM = simulation!.ram_info || "";
         } catch (e: any) {
             error = e.message;
         }
@@ -155,6 +106,9 @@
 
     let isEditing = $state(false);
     let newName = $state("");
+    let newCPU = $state("");
+    let newGPU = $state("");
+    let newRAM = $state("");
     let uploadFiles = $state<FileList | null>(null);
     let saveError = $state("");
     let uploadProgress = $state(0);
@@ -164,7 +118,6 @@
         if (!simulation) return;
         saveError = "";
 
-        // 1. Rename logic
         if (newName.trim() !== simulation.name) {
             const renameRes = await fetch(`/api/simulations/${id}/rename`, {
                 method: "PUT",
@@ -182,7 +135,32 @@
             simulation.name = renameData.new_name;
         }
 
-        // 2. Upload Logic
+        if (
+            newCPU !== (simulation.cpu_info || "") ||
+            newGPU !== (simulation.gpu_info || "") ||
+            newRAM !== (simulation.ram_info || "")
+        ) {
+            const hwRes = await fetch(`/api/simulations/${id}/hardware`, {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    cpu_info: newCPU,
+                    gpu_info: newGPU,
+                    ram_info: newRAM,
+                }),
+            });
+
+            if (!hwRes.ok) {
+                const text = await hwRes.text();
+                saveError = text || "Failed to update hardware info.";
+                return;
+            }
+
+            simulation.cpu_info = newCPU;
+            simulation.gpu_info = newGPU;
+            simulation.ram_info = newRAM;
+        }
+
         if (uploadFiles && uploadFiles.length > 0) {
             isUploading = true;
             for (let i = 0; i < uploadFiles.length; i++) {
@@ -196,7 +174,9 @@
 
                         xhr.upload.onprogress = (event) => {
                             if (event.lengthComputable) {
-                                uploadProgress = Math.round((event.loaded / event.total) * 100);
+                                uploadProgress = Math.round(
+                                    (event.loaded / event.total) * 100,
+                                );
                             }
                         };
 
@@ -204,11 +184,15 @@
                             if (xhr.status >= 200 && xhr.status < 300) {
                                 resolve(JSON.parse(xhr.responseText));
                             } else {
-                                reject(xhr.responseText || `Failed to upload: ${file.name}`);
+                                reject(
+                                    xhr.responseText ||
+                                        `Failed to upload: ${file.name}`,
+                                );
                             }
                         };
 
-                        xhr.onerror = () => reject(`Network error uploading: ${file.name}`);
+                        xhr.onerror = () =>
+                            reject(`Network error uploading: ${file.name}`);
 
                         const formData = new FormData();
                         formData.append("file", file);
@@ -238,6 +222,9 @@
     function cancelEdit() {
         if (simulation) {
             newName = simulation.name;
+            newCPU = simulation.cpu_info || "";
+            newGPU = simulation.gpu_info || "";
+            newRAM = simulation.ram_info || "";
         }
         isEditing = false;
         saveError = "";
@@ -246,6 +233,10 @@
         isUploading = false;
     }
 
+    function handleExportPDF() {
+        window.open(`/simulation/${id}/print`, "_blank");
+    }
+
     async function handleDelete() {
         if (
             !confirm(
@@ -259,7 +250,6 @@
         });
 
         if (res.ok) {
-            // Force client-side redirect back to cleanly wiped root
             window.location.href = "/";
         } else {
             const text = await res.text();
@@ -283,7 +273,6 @@
             simulation!.resources = simulation!.resources.filter(
                 (r) => r !== resourceName,
             );
-            // Re-run stat calculation internally if needed or just sync state
         } else {
             const text = await res.text();
             alert("Failed to delete resource: " + text);
@@ -291,7 +280,7 @@
     }
 </script>
 
-<a href="/" class="back-link">&lt;&lt; Back to Index</a>
+<a href="/" class="back-link no-print">&lt;&lt; Back to Index</a>
 
 {#if error}
     <p class="error">Error: {error}</p>
@@ -301,10 +290,16 @@
     <div class="header-container">
         {#if !isEditing}
             <h1>Simulation Detail: {simulation.name}</h1>
-            <button class="edit-btn" onclick={() => (isEditing = true)}
+            <div class="header-actions no-print">
-                >Edit</button
+                <button class="export-btn" onclick={handleExportPDF}
-            >
+                    >Export PDF</button
-            <button class="delete-btn" onclick={handleDelete}>Delete</button>
+                >
+                <button class="edit-btn" onclick={() => (isEditing = true)}
+                    >Edit</button
+                >
+                <button class="delete-btn" onclick={handleDelete}>Delete</button
+                >
+            </div>
         {:else}
             <div class="edit-form">
                 <h2>Edit Simulation</h2>
@@ -312,6 +307,33 @@
                     <label for="sim-name">Name:</label>
                     <input id="sim-name" type="text" bind:value={newName} />
                 </div>
+                <div class="form-group">
+                    <label for="sim-cpu">CPU:</label>
+                    <input
+                        id="sim-cpu"
+                        type="text"
+                        bind:value={newCPU}
+                        placeholder="e.g. Intel Core i9-13900K"
+                    />
+                </div>
+                <div class="form-group">
+                    <label for="sim-gpu">GPU:</label>
+                    <input
+                        id="sim-gpu"
+                        type="text"
+                        bind:value={newGPU}
+                        placeholder="e.g. NVIDIA RTX 4090"
+                    />
+                </div>
+                <div class="form-group">
+                    <label for="sim-ram">RAM:</label>
+                    <input
+                        id="sim-ram"
+                        type="text"
+                        bind:value={newRAM}
+                        placeholder="e.g. 64GB DDR5 6000MHz"
+                    />
+                </div>
                 <div class="form-group">
                     <label for="sim-files">Upload Media:</label>
                     <input
@@ -326,13 +348,24 @@
                 {/if}
                 {#if isUploading}
                     <div class="progress-bar-container">
-                        <div class="progress-bar" style={`width: ${uploadProgress}%`}></div>
+                        <div
+                            class="progress-bar"
+                            style={`width: ${uploadProgress}%`}
+                        ></div>
                         <span class="progress-text">{uploadProgress}%</span>
                     </div>
                 {/if}
                 <div class="form-actions">
-                    <button class="save-btn" onclick={handleSave} disabled={isUploading}>Save</button>
+                    <button
-                    <button class="cancel-btn" onclick={cancelEdit} disabled={isUploading}>Cancel</button>
+                        class="save-btn"
+                        onclick={handleSave}
+                        disabled={isUploading}>Save</button
+                    >
+                    <button
+                        class="cancel-btn"
+                        onclick={cancelEdit}
+                        disabled={isUploading}>Cancel</button
+                    >
                 </div>
             </div>
         {/if}
@@ -359,8 +392,8 @@
     {#if simulation.search_time !== null && simulation.total_time !== null}
         <p>
             <strong>Search Time:</strong>
-            {simulation.search_time.toFixed(2)}s | <strong>Total Time:</strong>
+            {formatTime(simulation.search_time)} | <strong>Total Time:</strong>
-            {simulation.total_time.toFixed(2)}s
+            {formatTime(simulation.total_time)}
         </p>
     {/if}
     <p>
@@ -368,6 +401,15 @@
         {formatBytes(simulation.total_size_bytes || 0)}
     </p>
 
+    {#if simulation.cpu_info || simulation.gpu_info || simulation.ram_info}
+        <div class="hardware-box">
+            <h3>Hardware Spec</h3>
+            <p><strong>CPU:</strong> {simulation.cpu_info || "N/A"}</p>
+            <p><strong>GPU:</strong> {simulation.gpu_info || "N/A"}</p>
+            <p><strong>RAM:</strong> {simulation.ram_info || "N/A"}</p>
+        </div>
+    {/if}
+
     {#if simulation.config}
         <div class="config-box">
             <strong>Configuration Options:</strong>
@@ -468,197 +510,3 @@
     {/if}
 {/if}
 
-<style>
-    :global(body) {
-        font-family: "JetBrains Mono", Courier, monospace;
-        background-color: #ffffff;
-        color: #000000;
-    }
-    h1 {
-        font-size: 24px;
-    }
-    h2 {
-        font-size: 20px;
-        margin-top: 30px;
-        border-bottom: 1px solid #000;
-    }
-    a {
-        color: #0000ff;
-        text-decoration: underline;
-    }
-    a:visited {
-        color: #800080;
-    }
-    .back-link {
-        display: inline-block;
-        margin-bottom: 20px;
-    }
-    .error {
-        color: red;
-        font-weight: bold;
-    }
-    hr {
-        border: 0;
-        border-top: 1px solid #000;
-        margin: 20px 0;
-    }
-    .config-box {
-        margin-top: 20px;
-        border: 1px solid #000;
-        padding: 10px;
-        background-color: #f8f8f8;
-        max-width: 100%;
-        box-sizing: border-box;
-        overflow-x: auto;
-    }
-    pre {
-        margin: 10px 0 0 0;
-        white-space: pre-wrap;
-    }
-    .table-label {
-        margin: 0 0 5px 0;
-        font-size: 16px;
-        text-decoration: underline;
-    }
-    .tables-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 20px;
-        align-items: flex-start;
-        margin-top: 10px;
-    }
-    .table-wrapper {
-        flex: 1 1 300px;
-        max-width: 100%;
-        overflow-x: auto;
-    }
-    .config-table {
-        margin-top: 10px;
-        width: 100%;
-        border-collapse: collapse;
-        background-color: #ffffff;
-    }
-    .config-table th,
-    .config-table td {
-        border: 1px solid #000;
-        padding: 8px 10px;
-        text-align: left;
-        word-break: break-all;
-    }
-    .config-table th {
-        background-color: #e0e0e0;
-    }
-    .header-container {
-        display: flex;
-        align-items: center;
-        gap: 15px;
-        margin-bottom: 20px;
-    }
-    .header-container h1 {
-        margin: 0;
-    }
-    .edit-btn,
-    .save-btn,
-    .cancel-btn,
-    .delete-btn {
-        padding: 6px 15px;
-        font-size: 14px;
-        font-weight: bold;
-        cursor: pointer;
-        border: 1px solid #000;
-        background-color: #e0e0e0;
-        font-family: inherit;
-    }
-    .edit-btn:hover:not(:disabled),
-    .save-btn:hover:not(:disabled),
-    .cancel-btn:hover:not(:disabled) {
-        background-color: #d0d0d0;
-    }
-    button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-    .delete-btn {
-        background-color: #ffcccc;
-        color: #990000;
-        border-color: #990000;
-        margin-left: auto;
-    }
-    .delete-btn:hover {
-        background-color: #ff9999;
-    }
-
-    .edit-form {
-        border: 1px dashed #000;
-        padding: 15px;
-        background-color: #f5f5f5;
-        width: 100%;
-    }
-    .edit-form h2 {
-        margin-top: 0;
-        border-bottom: none;
-    }
-    .form-group {
-        margin-bottom: 15px;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-    .edit-form label {
-        display: inline-block;
-        width: 100px;
-        font-weight: bold;
-    }
-    .edit-form input[type="text"] {
-        flex: 1;
-        padding: 5px;
-        border: 1px solid #000;
-        font-family: inherit;
-    }
-    .progress-bar-container {
-        width: 100%;
-        background-color: #ddd;
-        border: 1px solid #000;
-        margin-top: 10px;
-        position: relative;
-        height: 25px;
-    }
-    .progress-bar {
-        height: 100%;
-        background-color: #4CAF50;
-        transition: width 0.2s ease-in-out;
-    }
-    .progress-text {
-        position: absolute;
-        width: 100%;
-        text-align: center;
-        top: 0;
-        left: 0;
-        line-height: 25px;
-        font-weight: bold;
-        color: #000;
-    }
-    .form-group input[type="file"] {
-        font-family: inherit;
-        font-size: 14px;
-        cursor: pointer;
-    }
-    .form-group input[type="file"]::file-selector-button {
-        padding: 6px 15px;
-        font-size: 14px;
-        font-weight: bold;
-        cursor: pointer;
-        border: 1px solid #000;
-        background-color: #e0e0e0;
-        font-family: inherit;
-        margin-right: 10px;
-    }
-    .form-group input[type="file"]::file-selector-button:hover {
-        background-color: #d0d0d0;
-    }
-    .form-actions {
-        display: flex;
-        gap: 10px;
-        margin-top: 10px;
-    }
-</style>

src/routes/simulation/[id]/print/+page.svelte

@@ -0,0 +1,295 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { formatDate } from "$lib/simulationState.svelte";
+
+    import {
+        type SimulationDetails,
+        flattenJSON,
+        isImage,
+        getResourceUrl,
+        formatTime,
+    } from "$lib/ts/utils";
+
+    let { data } = $props();
+    let id = $derived(data.id);
+
+    let simulation = $state<SimulationDetails | null>(null);
+
+    let parsedConfig: { key: string; value: string }[] | null = $derived.by(
+        () => {
+            if (!simulation?.config) return null;
+            try {
+                let cleanedConfig = simulation.config.replace(
+                    /"([^"]+)\.yaml"\s*:/g,
+                    '"$1":',
+                );
+                return flattenJSON(JSON.parse(cleanedConfig));
+            } catch {
+                return null;
+            }
+        },
+    );
+
+    let searchConfig = $derived(
+        parsedConfig?.filter((c) => c.key.startsWith("search.")),
+    );
+    let uavConfig = $derived(
+        parsedConfig?.filter((c) => c.key.startsWith("uav.")),
+    );
+    let ugvConfig = $derived(
+        parsedConfig?.filter((c) => c.key.startsWith("ugv.")),
+    );
+    let otherConfig = $derived(
+        parsedConfig?.filter(
+            (c) =>
+                !c.key.startsWith("search.") &&
+                !c.key.startsWith("uav.") &&
+                !c.key.startsWith("ugv."),
+        ),
+    );
+
+    let imagesList = $derived<string[]>(
+        simulation && simulation.resources
+            ? simulation.resources.filter(isImage)
+            : [],
+    );
+
+    onMount(async () => {
+        try {
+            const res = await fetch(`/api/simulations/${id}`);
+            if (res.ok) {
+                simulation = await res.json();
+
+                setTimeout(() => {
+                    window.print();
+                }, 500);
+            }
+        } catch (e: any) {
+            console.error(e);
+        }
+    });
+</script>
+
+{#if simulation}
+    <div class="print-container">
+        <h1>Simulation Report: {simulation.name}</h1>
+        <p><strong>ID:</strong> {simulation.id}</p>
+        <p>
+            <strong>Search Pattern:</strong>
+            <span style="text-transform: capitalize;">
+                {parsedConfig?.find((c) => c.key === "search.spiral.max_legs")
+                    ? "Spiral"
+                    : parsedConfig?.find(
+                            (c) => c.key === "search.lawnmower.width",
+                        )
+                      ? "Lawnmower"
+                      : parsedConfig?.find(
+                              (c) => c.key === "search.levy.max_steps",
+                          )
+                        ? "Levy"
+                        : "Unknown"}
+            </span>
+        </p>
+        <p><strong>Date Code:</strong> {formatDate(simulation.created_at)}</p>
+
+        {#if simulation.search_time !== null && simulation.total_time !== null}
+            <p>
+                <strong>Search Time:</strong>
+                {formatTime(simulation.search_time)} |
+                <strong>Total Time:</strong>
+                {formatTime(simulation.total_time)}
+            </p>
+        {/if}
+
+        {#if simulation.cpu_info || simulation.gpu_info || simulation.ram_info}
+            <div
+                class="hardware-box"
+                style="margin-top: 20px; border: 1px solid #ccc; padding: 15px; background-color: #f9f9f9; break-inside: avoid;"
+            >
+                <h3>Hardware Spec</h3>
+                <p><strong>CPU:</strong> {simulation.cpu_info || "N/A"}</p>
+                <p><strong>GPU:</strong> {simulation.gpu_info || "N/A"}</p>
+                <p><strong>RAM:</strong> {simulation.ram_info || "N/A"}</p>
+            </div>
+        {/if}
+
+        {#if simulation.config}
+            <div class="config-box">
+                <strong>Configuration Options:</strong>
+                <div class="tables-container">
+                    {#if searchConfig && searchConfig.length > 0}
+                        <div class="table-wrapper">
+                            <h3>Search</h3>
+                            <table class="config-table">
+                                <tbody>
+                                    {#each searchConfig as item}
+                                        <tr
+                                            ><td>{item.key}</td><td
+                                                >{item.value}</td
+                                            ></tr
+                                        >
+                                    {/each}
+                                </tbody>
+                            </table>
+                        </div>
+                    {/if}
+                    {#if ugvConfig && ugvConfig.length > 0}
+                        <div class="table-wrapper">
+                            <h3>UGV</h3>
+                            <table class="config-table">
+                                <tbody>
+                                    {#each ugvConfig as item}
+                                        <tr
+                                            ><td>{item.key}</td><td
+                                                >{item.value}</td
+                                            ></tr
+                                        >
+                                    {/each}
+                                </tbody>
+                            </table>
+                        </div>
+                    {/if}
+                    {#if uavConfig && uavConfig.length > 0}
+                        <div class="table-wrapper">
+                            <h3>UAV</h3>
+                            <table class="config-table">
+                                <tbody>
+                                    {#each uavConfig as item}
+                                        <tr
+                                            ><td>{item.key}</td><td
+                                                >{item.value}</td
+                                            ></tr
+                                        >
+                                    {/each}
+                                </tbody>
+                            </table>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        {/if}
+
+        <h2>Visuals</h2>
+        {#if imagesList.length > 0}
+            <div class="image-grid">
+                {#each imagesList as image}
+                    <div class="image-wrapper">
+                        <img
+                            src={getResourceUrl(simulation.name, image)}
+                            alt={image}
+                        />
+                        <p class="caption">{image}</p>
+                    </div>
+                {/each}
+            </div>
+        {:else}
+            <p>No images found in this simulation.</p>
+        {/if}
+    </div>
+{:else}
+    <p>Loading printable report...</p>
+{/if}
+
+<style>
+    :global(body) {
+        font-family: Arial, sans-serif;
+        color: #000;
+        background: #fff;
+    }
+
+    .print-container {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    h1 {
+        border-bottom: 2px solid #000;
+        padding-bottom: 5px;
+        margin-bottom: 20px;
+    }
+
+    h2 {
+        margin-top: 30px;
+        border-bottom: 1px solid #ccc;
+    }
+
+    h3 {
+        margin-bottom: 5px;
+    }
+
+    .config-box {
+        margin-top: 20px;
+        border: 1px solid #ccc;
+        padding: 15px;
+        background-color: #f9f9f9;
+        break-inside: avoid;
+    }
+
+    .tables-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        margin-top: 10px;
+    }
+
+    .table-wrapper {
+        flex: 1;
+        min-width: 250px;
+    }
+
+    .config-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 14px;
+    }
+
+    .config-table td {
+        border: 1px solid #888;
+        padding: 5px;
+    }
+
+    .config-table tr:nth-child(even) {
+        background-color: #f0f0f0;
+    }
+
+    .image-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 20px;
+        margin-top: 20px;
+    }
+
+    .image-wrapper {
+        break-inside: avoid;
+        text-align: center;
+        border: 1px solid #ddd;
+        padding: 10px;
+        background: #fafafa;
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .caption {
+        margin-top: 5px;
+        font-size: 12px;
+        color: #555;
+    }
+
+    @media print {
+        @page {
+            margin: 1cm;
+        }
+        .print-container {
+            width: 100%;
+            max-width: none;
+            padding: 0;
+            margin: 0;
+        }
+    }
+</style>

src/routes/simulation/[id]/print/+page.ts

@@ -0,0 +1,5 @@
+export function load({ params }) {
+    return {
+        id: params.id
+    };
+}