Refactor webstudio test results view

Author: ferpasri

docs/webstudio/WEBSTUDIO_FUNCTIONAL_SPEC.md

@@ -343,13 +343,93 @@ Workspace compatibility:
 
 ## Test Results
 
-The results page supports:
+The Test Results page supports inspection of Generate and CLI output folders.
+
+### Output Result Selection
+
+The page must support:
 
 - source toggle between Generate and CLI outputs
-- output result group selection
-- generated file selection
-- HTML report rendering
+- output result folder selection
+- output result folder sorting
+- output result folder filtering
+- generated file listing for the selected output folder
+- generated file filtering
 - verdict outcome summarization
+- HTML report rendering
+
+Default behavior:
+
+- output result folders are sorted latest first
+- selecting an output folder shows a run-level verdict outcome summary by default
+- selecting an output folder must not automatically select the first generated file
+- selecting a generated test sequence file manually shows the HTML report rendering
+
+### Results Preview
+
+When an output result folder is selected and no generated file is selected, the right preview area must show a run-level verdict outcome summary.
+
+The summary should include:
+
+- verdict outcomes
+- failure type distribution
+- sequence status overview
+- enough metadata to understand which run is selected
+
+When a generated file is selected, the right preview area must show the corresponding HTML report.
+
+The user must be able to return from the HTML report preview to the run-level verdict outcome summary.
+
+### Empty State
+
+The Test Results page must support an empty state.
+
+The empty state is shown when:
+
+- no output result folders exist for the selected source
+- filters hide all available output result folders
+- the last output result folder was deleted
+
+Expected empty-state behavior:
+
+- the left panel remains visible
+- `Output Results` remains available
+- `Generated Files` shows an empty message
+- the right preview area shows a clear empty-state message
+- no stale folder, file, summary, or HTML report remains selected
+
+### Filtering
+
+Output result folder filtering should support:
+
+- all folders
+- folders with failures
+- folders with only OK sequences
+
+Generated file filtering should support:
+
+- all files
+- failed files
+- OK files
+
+Filtering must not delete files. It only changes visibility in Web Studio.
+
+Removing the filtering category restores the visibility of all folders and files.
+
+### Deletion
+
+The page may support deleting generated result artifacts.
+
+Deletion rules:
+
+- deleting a generated file deletes only the selected test sequence report file
+- deleting an output result folder deletes the whole selected run folder
+- deleting an output result folder is more destructive than deleting a generated file
+- delete actions must require a modal confirmation
+- if confirmation is not explicit and clear, Web Studio must not delete anything
+- after deleting a selected generated file, Web Studio must clear the selected file and return to the run-level verdict outcome summary
+- after deleting a selected output result folder, Web Studio must refresh the output folder list and clear stale selections
+- if deleting an output result folder removes all existing run-level reports, WebStudio must show the default Test Results empty view
 
 ## State Model
 

docs/webstudio/WEBSTUDIO_UX_SPEC.md

@@ -237,20 +237,52 @@ The results page should provide fast visual understanding of output health.
 
 Expected behavior:
 
-- output source can switch between Generate and CLI
+- the left panel contains `Output Results`
+- `Output Results` allows switching between Generate and CLI
+- `Output Results` includes sorting and filtering controls without hiding the selected source context
+- the left panel also contains `Generated Files` for the selected output result
+- selecting an output result folder shows a run-level verdict outcome summary in the right preview area
+- selecting an output result folder does not automatically select the first generated file
+- selecting a generated file replaces the summary with the HTML report preview
+- the user can return from HTML report preview to the run-level verdict outcome summary
+- output folders can be sorted, with latest first as the default
+- output folders can be filtered without deleting or modifying files
+- generated files can be filtered without deleting or modifying files
 - green/red status color is consistent
 - selected result remains visually distinct
-- verdict outcome summary has fixed height
-- failure type rows scroll internally
-- generated files panel has fixed height
+- summary cards have fixed or predictable height
+- failure type rows scroll internally when needed
+- generated files panel has fixed height and scrolls internally when needed
 - generated file rows keep fixed or predictable size
 - report preview uses the remaining stable area
+- destructive delete actions are not embedded as tiny accidental row buttons
+- delete actions use a modal confirmation
+- unclear confirmation always cancels deletion
+- empty states keep the left panel visible and replace stale preview content with clear guidance
 
 Avoid:
 
 - panel height changing based on number of verdicts
 - horizontal scrolling for generated file names where a shorter label, ellipsis, or detail tooltip can preserve context
 - ambiguous color semantics
+- stale selected folders, files, summaries, or HTML reports after filtering or deletion
+
+Deletion confirmation behavior:
+
+- deleting one generated file must name the selected file
+- deleting one output result folder must name the selected folder
+- deleting one output result folder must use stronger wording than deleting one generated file
+- `Cancel` or closing the modal must not delete anything
+- if the user does not clearly confirm the exact destructive action, Web Studio must not delete anything
+- after deleting a generated file, the preview returns to the run-level verdict outcome summary
+- after deleting an output result folder, stale selections are cleared before the list is refreshed
+
+Empty state behavior:
+
+- no output result folders shows an empty message in the right preview area
+- filters hiding all output result folders show an empty filtered-results message
+- no generated files for a selected output folder shows an empty message in the `Generated Files` panel
+- deleting the last output result folder shows the default Test Results empty view
 
 ## State Model UX Contract
 

webstudio/frontend/src/App.svelte

@@ -1379,11 +1379,11 @@
 
     async function selectResultGroup(resultGroup) {
         selectedResultGroup = resultGroup;
-        if (resultGroup?.files?.length > 0) {
-            await loadResultFile(resultGroup.files[0]);
-        } else {
-            selectedResultFile = null;
-        }
+        selectedResultFile = null;
+    }
+
+    function showResultSummary() {
+        selectedResultFile = null;
     }
 
     async function loadResultFile(resultFile) {
@@ -1412,6 +1412,58 @@
         await loadResults(source);
     }
 
+    function applyRefreshedResults(refreshedResults, preferredGroupPath = "") {
+        resultsData = refreshedResults;
+        const resultGroups = resultsData?.groups || [];
+        if (resultGroups.length > 0) {
+            selectedResultGroup = resultGroups.find((resultGroup) => resultGroup.path === preferredGroupPath)
+                || resultGroups[resultGroups.length - 1];
+        } else {
+            selectedResultGroup = null;
+        }
+
+        selectedResultFile = null;
+    }
+
+    async function deleteResultFile(resultFile) {
+        if (!resultFile?.path) {
+            return;
+        }
+
+        try {
+            const resultPath = encodeURIComponent(resultFile.path);
+            const currentGroupPath = selectedResultGroup?.path || "";
+            const refreshedResults = await loadJson(
+                resultSource === "cli"
+                    ? `/api/execution/cli/results/${resultFile.name}?path=${resultPath}`
+                    : `/api/execution/scriptless/results/${resultFile.name}?path=${resultPath}`,
+                { method: "DELETE" }
+            );
+            applyRefreshedResults(refreshedResults, currentGroupPath);
+        } catch (deleteError) {
+            reportClientError(`Unable to delete result file ${resultFile.name}`, deleteError);
+        }
+    }
+
+    async function deleteResultGroup(resultGroup) {
+        if (!resultGroup?.path) {
+            return;
+        }
+
+        try {
+            const resultPath = encodeURIComponent(resultGroup.path);
+            const refreshedResults = await loadJson(
+                resultSource === "cli"
+                    ? `/api/execution/cli/result-groups?path=${resultPath}`
+                    : `/api/execution/scriptless/result-groups?path=${resultPath}`,
+                { method: "DELETE" }
+            );
+            applyRefreshedResults(refreshedResults);
+        } catch (deleteError) {
+            reportClientError(`Unable to delete result output folder ${resultGroup.name}`, deleteError);
+        }
+    }
+
     async function startRemoteSpyMode() {
         if (!selectedWorkspaceName || !workspaceAvailableInTestar()) {
             return;
@@ -1899,13 +1951,16 @@
 
     {#if currentPage === "results"}
         <TestResultsView
+            deleteResultFile={deleteResultFile}
+            deleteResultGroup={deleteResultGroup}
             loadResultFile={loadResultFile}
             resultsData={resultsData}
             resultSource={resultSource}
             selectedResultFile={selectedResultFile}
             selectedResultGroup={selectedResultGroup}
             selectResultSource={selectResultSource}
             selectResultGroup={selectResultGroup}
+            showResultSummary={showResultSummary}
         />
     {/if}