@crvy/rprtr 0.1.4 → 0.2.2

package/dist/index.js

@@ -19322,10 +19322,42 @@ function date4(params) {
 // node_modules/zod/v4/classic/external.js
 config(en_default());
 
+// src/schemas/http.ts
+var ApproveRequestBodySchema = external_exports.object({
+  id: external_exports.string(),
+  retry: external_exports.number(),
+  image: external_exports.string()
+});
+var RunTestDescriptorSchema = external_exports.object({
+  file: external_exports.string(),
+  line: external_exports.number(),
+  column: external_exports.number().optional(),
+  projectName: external_exports.string().optional(),
+  titlePath: external_exports.array(external_exports.string())
+});
+var RunRequestBodySchema = external_exports.object({
+  tests: external_exports.array(RunTestDescriptorSchema).optional()
+});
+var RunResponseSchema = external_exports.discriminatedUnion("ok", [
+  external_exports.object({ ok: external_exports.literal(true) }),
+  external_exports.object({
+    ok: external_exports.literal(false),
+    reason: external_exports.enum(["no-config", "already-running", "no-tests"])
+  })
+]);
+var StopResponseSchema = external_exports.discriminatedUnion("ok", [
+  external_exports.object({ ok: external_exports.literal(true) }),
+  external_exports.object({
+    ok: external_exports.literal(false),
+    reason: external_exports.literal("not-running")
+  })
+]);
+
 // src/schemas.ts
 var LocationSchema = external_exports.object({
   file: external_exports.string(),
-  line: external_exports.number()
+  line: external_exports.number(),
+  column: external_exports.number().optional()
 });
 var VisualSourceSchema = external_exports.enum(["comparison", "baseline-only", "declared-only"]);
 var ImagesSchema = external_exports.object({
@@ -19413,7 +19445,13 @@ var WebSocketMessageSchema = external_exports.discriminatedUnion("type", [
       isUpdateMode: external_exports.boolean().optional()
     })
   }),
-  external_exports.object({ type: external_exports.literal("approve"), data: external_exports.unknown() })
+  external_exports.object({ type: external_exports.literal("approve"), data: external_exports.unknown() }),
+  external_exports.object({
+    type: external_exports.literal("run-status"),
+    data: external_exports.object({
+      running: external_exports.boolean()
+    })
+  })
 ]);
 var TestBeginDataSchema = external_exports.object({
   id: external_exports.string(),
@@ -19442,7 +19480,9 @@ var RegisterDataSchema = external_exports.object({
   playwrightSnapshotDir: external_exports.string().optional(),
   playwrightTestDir: external_exports.string().optional(),
   playwrightSnapshotPathTemplate: external_exports.string().optional(),
-  playwrightToHaveScreenshotPathTemplate: external_exports.string().optional()
+  playwrightToHaveScreenshotPathTemplate: external_exports.string().optional(),
+  configFile: external_exports.string().optional(),
+  cwd: external_exports.string().optional()
 });
 var ReportDataSchema = external_exports.object({
   isRunning: external_exports.boolean(),
@@ -19467,14 +19507,11 @@ var OfflineReportSchema = external_exports.object({
   workers: external_exports.number(),
   events: external_exports.array(OfflineEventSchema)
 });
-var ApproveRequestBodySchema = external_exports.object({
-  id: external_exports.string(),
-  retry: external_exports.number(),
-  image: external_exports.string()
-});
 var ReportApiResponseSchema = external_exports.object({
   tests: external_exports.record(external_exports.string(), TestDataSchema),
-  isUpdateMode: external_exports.boolean().optional()
+  isUpdateMode: external_exports.boolean().optional(),
+  isRunning: external_exports.boolean().optional(),
+  runEnabled: external_exports.boolean().optional()
 });
 var ClientBootstrapDataSchema = external_exports.object({
   report: ReportApiResponseSchema.extend({
@@ -19482,7 +19519,9 @@ var ClientBootstrapDataSchema = external_exports.object({
   }),
   liveUpdates: external_exports.boolean(),
   approvalEnabled: external_exports.boolean(),
-  approvalMessage: external_exports.string().optional()
+  approvalMessage: external_exports.string().optional(),
+  runEnabled: external_exports.boolean().optional(),
+  isRunning: external_exports.boolean().optional()
 });
 var ImagesViewModeSchema = external_exports.enum(["side-by-side", "swap", "slide", "blend"]);
 function safeParse3(schema, data) {
@@ -20066,6 +20105,42 @@ function recalcAllSuiteStatuses(suite) {
   }
   suite.status = getChildrenArray(suite.children).map(({ status }) => status).reduce(calcStatus);
 }
+function markTestsPending(node) {
+  if (isTest(node)) {
+    node.status = "pending";
+    return;
+  }
+  getChildrenArray(node.children).forEach(markTestsPending);
+}
+
+// src/client/helpers/run-snapshot.ts
+function captureTestStatuses(node) {
+  const snapshot2 = /* @__PURE__ */ new Map();
+  const walk = (n) => {
+    if (isTest(n)) {
+      snapshot2.set(n.id, n.status);
+      return;
+    }
+    for (const child2 of getChildrenArray(n.children)) walk(child2);
+  };
+  walk(node);
+  return snapshot2;
+}
+function restoreTestStatuses(root10, snapshot2, receivedIds) {
+  let restored = 0;
+  const walk = (n) => {
+    if (isTest(n)) {
+      if (snapshot2.has(n.id) && !receivedIds.has(n.id)) {
+        n.status = snapshot2.get(n.id);
+        restored++;
+      }
+      return;
+    }
+    for (const child2 of getChildrenArray(n.children)) walk(child2);
+  };
+  walk(root10);
+  return restored;
+}
 
 // src/client/viewMode.ts
 var VIEW_MODE_KEY = "crvy-rprtr-view-mode";
@@ -20105,8 +20180,9 @@ function statusDotClass(status) {
 
 // src/client/components/TreeItem.svelte
 var root_1 = from_html(`<span aria-hidden="true">\u25B6</span>`);
-var root_2 = from_html(`<span></span>`);
-var root = from_html(`<div role="treeitem" tabindex="-1"><!> <span class="flex-1 text-ui whitespace-nowrap overflow-hidden text-ellipsis"> </span> <!></div> <!>`, 1);
+var root_2 = from_html(`<button>&#9654;</button>`);
+var root_3 = from_html(`<span></span>`);
+var root = from_html(`<div role="treeitem" tabindex="-1"><!> <span class="flex-1 text-ui whitespace-nowrap overflow-hidden text-ellipsis"> </span> <!> <!></div> <!>`, 1);
 function TreeItem_1($$anchor, $$props) {
   push($$props, true);
   let itemIsTest = user_derived(() => isTest($$props.item));
@@ -20149,24 +20225,50 @@ function TreeItem_1($$anchor, $$props) {
   var node_1 = sibling(span_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var span_2 = root_2();
+      var button = root_2();
+      template_effect(
+        ($0) => {
+          set_class(button, 1, $0);
+          set_attribute2(button, "aria-label", `Run ${get2(itemIsTest) ? "this test" : "this suite"}`);
+          set_attribute2(button, "title", `Run ${get2(itemIsTest) ? "this test" : "this suite"}`);
+          button.disabled = $$props.isRunning;
+        },
+        [
+          () => clsx2(cn("size-5 flex items-center justify-center text-success text-[10px] rounded transition-opacity", $$props.isRunning ? "opacity-0 pointer-events-none" : "opacity-0 group-hover:opacity-100 focus:opacity-100 hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent"))
+        ]
+      );
+      delegated("click", button, (e) => {
+        e.stopPropagation();
+        $$props.onRun($$props.item);
+      });
+      delegated("keydown", button, (e) => e.stopPropagation());
+      append($$anchor2, button);
+    };
+    if_block(node_1, ($$render) => {
+      if ($$props.runEnabled) $$render(consequent_1);
+    });
+  }
+  var node_2 = sibling(node_1, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var span_2 = root_3();
       template_effect(($0) => set_class(span_2, 1, $0), [
         () => clsx2(cn("size-2 rounded-full inline-block shrink-0", statusDotClass($$props.item.status)))
       ]);
       append($$anchor2, span_2);
     };
-    if_block(node_1, ($$render) => {
-      if ($$props.item.status) $$render(consequent_1);
+    if_block(node_2, ($$render) => {
+      if ($$props.item.status) $$render(consequent_2);
     });
   }
   reset(div);
   bind_this(div, ($$value) => set(rowEl, $$value), () => get2(rowEl));
-  var node_2 = sibling(div, 2);
+  var node_3 = sibling(div, 2);
   {
-    var consequent_2 = ($$anchor2) => {
+    var consequent_3 = ($$anchor2) => {
       var fragment_1 = comment();
-      var node_3 = first_child(fragment_1);
-      each(node_3, 17, () => Object.values(get2(suiteItem).children).filter(isDefined).filter((c) => hasScreenshots(c)), index, ($$anchor3, child2) => {
+      var node_4 = first_child(fragment_1);
+      each(node_4, 17, () => Object.values(get2(suiteItem).children).filter(isDefined).filter((c) => hasScreenshots(c)), index, ($$anchor3, child2) => {
         {
           let $0 = user_derived(() => $$props.level + 1);
           TreeItem_1($$anchor3, {
@@ -20185,6 +20287,12 @@ function TreeItem_1($$anchor, $$props) {
             get isUpdateMode() {
               return $$props.isUpdateMode;
             },
+            get runEnabled() {
+              return $$props.runEnabled;
+            },
+            get isRunning() {
+              return $$props.isRunning;
+            },
             get onSelect() {
               return $$props.onSelect;
             },
@@ -20193,14 +20301,17 @@ function TreeItem_1($$anchor, $$props) {
             },
             get onToggle() {
               return $$props.onToggle;
+            },
+            get onRun() {
+              return $$props.onRun;
             }
           });
         }
       });
       append($$anchor2, fragment_1);
     };
-    if_block(node_2, ($$render) => {
-      if (get2(isOpen)) $$render(consequent_2);
+    if_block(node_3, ($$render) => {
+      if (get2(isOpen)) $$render(consequent_3);
     });
   }
   template_effect(
@@ -20214,7 +20325,7 @@ function TreeItem_1($$anchor, $$props) {
       set_text(text2, get2(itemIsTest) ? get2(testItem).browser ?? get2(testItem).title : get2(suiteItem).path[get2(suiteItem).path.length - 1] ?? "Tests");
     },
     [
-      () => clsx2(cn("flex items-center py-1 cursor-pointer transition-colors select-none gap-1 hover:bg-surface-hover", get2(isSelected) && "bg-surface-selected", get2(isFocused) && "outline outline-1 outline-accent -outline-offset-1"))
+      () => clsx2(cn("group flex items-center py-1 cursor-pointer transition-colors select-none gap-1 hover:bg-surface-hover", get2(isSelected) && "bg-surface-selected", get2(isFocused) && "outline outline-1 outline-accent -outline-offset-1"))
     ]
   );
   delegated("click", div, handleClick);
@@ -20229,15 +20340,16 @@ delegate(["click", "keydown"]);
 // src/client/components/Sidebar.svelte
 var root_12 = from_html(`<div class="text-xs mb-2 px-2 py-1 text-success bg-success/10 rounded-sm">Review and approve screenshots</div>`);
 var root_22 = from_html(`<button><span></span> <span> </span></button>`);
-var root_3 = from_html(`<button><span class="size-2 rounded-full inline-block shrink-0 bg-info"></span> <span> </span></button>`);
+var root_32 = from_html(`<button><span class="size-2 rounded-full inline-block shrink-0 bg-info"></span> <span> </span></button>`);
 var root_5 = from_html(`<button class="size-9 flex items-center justify-center bg-surface-input border border-edge rounded text-error cursor-pointer text-sm transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent" aria-label="Stop tests">&#9632;</button>`);
 var root_6 = from_html(`<button class="size-9 flex items-center justify-center bg-surface-input border border-edge rounded text-success cursor-pointer text-sm transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent" aria-label="Start tests">&#9654;</button>`);
 var root_4 = from_html(`<div class="mt-1"><!></div>`);
-var root_8 = from_html(`<div class="py-6 px-4 text-center text-fg-muted text-ui">No tests match filter</div>`);
-var root_9 = from_html(`<button class="flex-1 px-4 py-1.5 border border-edge rounded text-ui cursor-pointer transition-colors text-center bg-transparent text-fg hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-accent">Next &#8250;</button>`);
-var root_10 = from_html(`<button class="flex-1 px-4 py-1.5 border border-success rounded text-ui cursor-pointer transition-colors text-center bg-success text-white font-semibold hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-accent">Approve &#8250;</button>`);
-var root_11 = from_html(`<div class="mt-2 text-center text-xs text-fg-muted"> </div>`);
-var root2 = from_html(`<div class="w-[300px] min-w-[300px] max-md:w-full max-md:min-w-0 max-md:max-h-[40vh] max-md:border-b max-md:border-r-0 bg-surface-alt border-r border-edge flex flex-col overflow-hidden"><div class="p-4 border-b border-edge bg-surface-alt shrink-0"><div class="flex justify-between items-start"><div><h1 class="m-0 mb-2 text-base font-normal text-fg-bright">Crvy Rprtr</h1> <!> <div class="flex gap-2 text-xs mb-3 tabular-nums"><!> <!></div></div> <!></div> <input type="text" class="w-full px-2.5 py-1.5 bg-surface-input border border-edge rounded text-fg text-ui outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors focus:border-accent placeholder:text-fg-muted" placeholder="Filter tests\u2026 (status:failed)" aria-label="Filter tests" autocomplete="off"/></div> <div class="flex-1 overflow-y-auto overscroll-y-contain py-1" role="tree"><!> <!></div> <div class="py-3 px-4 border-t border-edge bg-surface-alt shrink-0"><div class="flex gap-2"><!> <button class="flex-1 px-4 py-1.5 border border-edge rounded text-ui cursor-pointer transition-colors text-center bg-transparent text-fg hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-accent">Approve All</button></div> <!></div></div>`);
+var root_7 = from_html(`<div class="mt-2 text-center text-xs text-fg-muted"> </div>`);
+var root_9 = from_html(`<div class="py-6 px-4 text-center text-fg-muted text-ui">No tests match filter</div>`);
+var root_10 = from_html(`<button class="flex-1 px-4 py-1.5 border border-edge rounded text-ui cursor-pointer transition-colors text-center bg-transparent text-fg hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-accent">Next &#8250;</button>`);
+var root_11 = from_html(`<button class="flex-1 px-4 py-1.5 border border-success rounded text-ui cursor-pointer transition-colors text-center bg-success text-white font-semibold hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-accent">Approve &#8250;</button>`);
+var root_122 = from_html(`<div class="mt-2 text-center text-xs text-fg-muted"> </div>`);
+var root2 = from_html(`<div class="w-[300px] min-w-[300px] max-md:w-full max-md:min-w-0 max-md:max-h-[40vh] max-md:border-b max-md:border-r-0 bg-surface-alt border-r border-edge flex flex-col overflow-hidden"><div class="p-4 border-b border-edge bg-surface-alt shrink-0"><div class="flex justify-between items-start"><div><h1 class="m-0 mb-2 text-base font-normal text-fg-bright">Crvy Rprtr</h1> <!> <div class="flex gap-2 text-xs mb-3 tabular-nums"><!> <!></div></div> <!></div> <input type="text" class="w-full px-2.5 py-1.5 bg-surface-input border border-edge rounded text-fg text-ui outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors focus:border-accent placeholder:text-fg-muted" placeholder="Filter tests\u2026 (status:failed)" aria-label="Filter tests" autocomplete="off"/> <!></div> <div class="flex-1 overflow-y-auto overscroll-y-contain py-1" role="tree"><!> <!></div> <div class="py-3 px-4 border-t border-edge bg-surface-alt shrink-0"><div class="flex gap-2"><!> <button class="flex-1 px-4 py-1.5 border border-edge rounded text-ui cursor-pointer transition-colors text-center bg-transparent text-fg hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-accent">Approve All</button></div> <!></div></div>`);
 function Sidebar($$anchor, $$props) {
   push($$props, true);
   let filterInput = state("");
@@ -20332,7 +20444,7 @@ function Sidebar($$anchor, $$props) {
   var node_2 = sibling(node_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var button_1 = root_3();
+      var button_1 = root_32();
       var span_2 = sibling(child(button_1), 2);
       var text_1 = child(span_2, true);
       reset(span_2);
@@ -20384,16 +20496,29 @@ function Sidebar($$anchor, $$props) {
       append($$anchor2, div_6);
     };
     if_block(node_3, ($$render) => {
-      if (!$$props.isReport && !$$props.isUpdateMode) $$render(consequent_3);
+      if ($$props.runEnabled) $$render(consequent_3);
     });
   }
   reset(div_2);
   var input = sibling(div_2, 2);
   remove_input_defaults(input);
+  var node_5 = sibling(input, 2);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var div_7 = root_7();
+      var text_2 = child(div_7, true);
+      reset(div_7);
+      template_effect(() => set_text(text_2, $$props.runMessage));
+      append($$anchor2, div_7);
+    };
+    if_block(node_5, ($$render) => {
+      if ($$props.runMessage) $$render(consequent_4);
+    });
+  }
   reset(div_1);
-  var div_7 = sibling(div_1, 2);
-  var node_5 = child(div_7);
-  each(node_5, 17, () => get2(visibleChildren), index, ($$anchor2, child2) => {
+  var div_8 = sibling(div_1, 2);
+  var node_6 = child(div_8);
+  each(node_6, 17, () => get2(visibleChildren), index, ($$anchor2, child2) => {
     TreeItem_1($$anchor2, {
       get item() {
         return get2(child2);
@@ -20408,6 +20533,12 @@ function Sidebar($$anchor, $$props) {
       get isUpdateMode() {
         return $$props.isUpdateMode;
       },
+      get runEnabled() {
+        return $$props.runEnabled;
+      },
+      get isRunning() {
+        return $$props.isRunning;
+      },
       get onSelect() {
         return $$props.onSelect;
       },
@@ -20416,26 +20547,29 @@ function Sidebar($$anchor, $$props) {
       },
       get onToggle() {
         return $$props.onToggle;
+      },
+      get onRun() {
+        return $$props.onRun;
       }
     });
   });
-  var node_6 = sibling(node_5, 2);
+  var node_7 = sibling(node_6, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var div_8 = root_8();
-      append($$anchor2, div_8);
+    var consequent_5 = ($$anchor2) => {
+      var div_9 = root_9();
+      append($$anchor2, div_9);
     };
-    if_block(node_6, ($$render) => {
-      if (get2(visibleChildren).length === 0) $$render(consequent_4);
+    if_block(node_7, ($$render) => {
+      if (get2(visibleChildren).length === 0) $$render(consequent_5);
     });
   }
-  reset(div_7);
-  var div_9 = sibling(div_7, 2);
-  var div_10 = child(div_9);
-  var node_7 = child(div_10);
+  reset(div_8);
+  var div_10 = sibling(div_8, 2);
+  var div_11 = child(div_10);
+  var node_8 = child(div_11);
   {
-    var consequent_5 = ($$anchor2) => {
-      var button_4 = root_9();
+    var consequent_6 = ($$anchor2) => {
+      var button_4 = root_10();
       template_effect(() => button_4.disabled = !$$props.canApprove);
       delegated("click", button_4, function(...$$args) {
         $$props.onNext?.apply(this, $$args);
@@ -20443,34 +20577,34 @@ function Sidebar($$anchor, $$props) {
       append($$anchor2, button_4);
     };
     var alternate_1 = ($$anchor2) => {
-      var button_5 = root_10();
+      var button_5 = root_11();
       template_effect(() => button_5.disabled = !$$props.canApprove);
       delegated("click", button_5, function(...$$args) {
         $$props.onApprove?.apply(this, $$args);
       });
       append($$anchor2, button_5);
     };
-    if_block(node_7, ($$render) => {
-      if (get2(isAlt)) $$render(consequent_5);
+    if_block(node_8, ($$render) => {
+      if (get2(isAlt)) $$render(consequent_6);
       else $$render(alternate_1, -1);
     });
   }
-  var button_6 = sibling(node_7, 2);
-  reset(div_10);
-  var node_8 = sibling(div_10, 2);
+  var button_6 = sibling(node_8, 2);
+  reset(div_11);
+  var node_9 = sibling(div_11, 2);
   {
-    var consequent_6 = ($$anchor2) => {
-      var div_11 = root_11();
-      var text_2 = child(div_11, true);
-      reset(div_11);
-      template_effect(() => set_text(text_2, $$props.approvalMessage));
-      append($$anchor2, div_11);
+    var consequent_7 = ($$anchor2) => {
+      var div_12 = root_122();
+      var text_3 = child(div_12, true);
+      reset(div_12);
+      template_effect(() => set_text(text_3, $$props.approvalMessage));
+      append($$anchor2, div_12);
     };
-    if_block(node_8, ($$render) => {
-      if (!$$props.approvalEnabled && $$props.approvalMessage) $$render(consequent_6);
+    if_block(node_9, ($$render) => {
+      if (!$$props.approvalEnabled && $$props.approvalMessage) $$render(consequent_7);
     });
   }
-  reset(div_9);
+  reset(div_10);
   reset(div);
   template_effect(() => {
     set_value(input, get2(filterInput));
@@ -20569,7 +20703,7 @@ delegate(["input"]);
 // src/client/components/SideBySideView.svelte
 var root_14 = from_html(`<div class="flex-1 flex flex-col bg-surface-panel rounded-md overflow-hidden min-w-0 border-2 border-green-500/60"><h3 class="m-0 px-3 py-2 text-xs font-bold bg-green-500/25 text-green-800 dark:text-green-200 uppercase tracking-wider"> </h3> <div class="flex items-center justify-center p-2"><img alt="Expected" class="w-auto max-w-full object-contain mx-auto" loading="lazy"/></div></div>`);
 var root_24 = from_html(`<div class="flex-1 flex flex-col bg-surface-panel rounded-md overflow-hidden min-w-0 border-2 border-yellow-500/60"><h3 class="m-0 px-3 py-2 text-xs font-bold bg-yellow-500/25 text-yellow-800 dark:text-yellow-200 uppercase tracking-wider">Diff</h3> <div class="flex items-center justify-center p-2"><img alt="Diff" class="w-auto max-w-full object-contain mx-auto" loading="lazy"/></div></div>`);
-var root_32 = from_html(`<div class="flex-1 flex flex-col bg-surface-panel rounded-md overflow-hidden min-w-0 border-2 border-red-500/60"><h3 class="m-0 px-3 py-2 text-xs font-bold bg-red-500/25 text-red-800 dark:text-red-200 uppercase tracking-wider">Actual</h3> <div class="flex items-center justify-center p-2"><img alt="Actual" class="w-auto max-w-full object-contain mx-auto" loading="lazy"/></div></div>`);
+var root_33 = from_html(`<div class="flex-1 flex flex-col bg-surface-panel rounded-md overflow-hidden min-w-0 border-2 border-red-500/60"><h3 class="m-0 px-3 py-2 text-xs font-bold bg-red-500/25 text-red-800 dark:text-red-200 uppercase tracking-wider">Actual</h3> <div class="flex items-center justify-center p-2"><img alt="Actual" class="w-auto max-w-full object-contain mx-auto" loading="lazy"/></div></div>`);
 var root3 = from_html(`<div><!> <!> <!></div>`);
 function SideBySideView($$anchor, $$props) {
   push($$props, true);
@@ -20627,7 +20761,7 @@ function SideBySideView($$anchor, $$props) {
   var node_2 = sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_5 = root_32();
+      var div_5 = root_33();
       var div_6 = sibling(child(div_5), 2);
       var img_3 = child(div_6);
       reset(div_6);
@@ -20728,7 +20862,7 @@ delegate(["click", "keydown"]);
 // src/client/components/BlendView.svelte
 var root_16 = from_html(`<div class="absolute w-full h-full flex"><img alt="Expected" class="max-w-full border border-green-500 invert"/></div>`);
 var root_26 = from_html(`<img alt="Diff" class="border border-transparent max-w-full invert opacity-0"/>`);
-var root_33 = from_html(`<div class="absolute w-full h-full flex"><img alt="Actual" class="max-w-full border border-red-500 mix-blend-difference invert"/></div>`);
+var root_34 = from_html(`<div class="absolute w-full h-full flex"><img alt="Actual" class="max-w-full border border-red-500 mix-blend-difference invert"/></div>`);
 var root5 = from_html(`<div class="flex flex-col gap-3 items-center"><div class="flex flex-col bg-surface-panel rounded-md overflow-hidden w-fit max-w-full border-2 border-purple-500/60"><h3 class="m-0 px-3 py-2 text-xs font-bold bg-purple-500/25 text-purple-800 dark:text-purple-400 uppercase tracking-wider">Blend (Difference)</h3> <div class="p-2"><div class="relative flex invert"><!> <!> <!></div></div></div></div>`);
 function BlendView($$anchor, $$props) {
   push($$props, true);
@@ -20763,7 +20897,7 @@ function BlendView($$anchor, $$props) {
   var node_2 = sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_5 = root_33();
+      var div_5 = root_34();
       var img_2 = child(div_5);
       reset(div_5);
       template_effect(() => set_attribute2(img_2, "src", $$props.image.actual));
@@ -20784,13 +20918,13 @@ function BlendView($$anchor, $$props) {
 // src/client/components/ResultsPage.svelte
 var root_27 = from_html(`<button> </button>`);
 var root_42 = from_html(`<button> </button>`);
-var root_34 = from_html(`<div class="flex gap-1 flex-wrap justify-center mt-1"></div>`);
+var root_35 = from_html(`<div class="flex gap-1 flex-wrap justify-center mt-1"></div>`);
 var root_52 = from_html(`<div class="flex-1 flex items-center justify-center text-fg-muted text-base">No image to display</div>`);
 var root_62 = from_html(`<div class="max-w-xl w-full rounded-md border border-edge bg-surface-panel px-5 py-6 text-center"><h3 class="m-0 text-sm font-semibold text-fg-bright uppercase tracking-wide">Passed Visual Assertion</h3> <p class="mt-3 text-sm leading-6 text-fg-muted">Playwright reported this screenshot assertion, but did not emit an actual, expected, or diff artifact for the passing comparison.</p></div>`);
-var root_7 = from_html(`<div class="w-full flex flex-col gap-3"><!></div>`);
+var root_72 = from_html(`<div class="w-full flex flex-col gap-3"><!></div>`);
 var root_112 = from_html(`<div class="flex flex-col bg-surface-panel rounded-md overflow-hidden min-w-0 border-2 border-red-500/60"><h3 class="m-0 px-3 py-2 text-xs font-bold bg-red-500/25 text-red-800 dark:text-red-200 uppercase tracking-wider">Actual</h3> <div class="flex items-center justify-center p-2"><img alt="Actual" class="w-auto max-w-full object-contain mx-auto" loading="lazy"/></div></div>`);
 var root_92 = from_html(`<div class="flex flex-col gap-3"><!></div>`);
-var root_122 = from_html(`<div class="w-full flex flex-col gap-3"><!></div>`);
+var root_123 = from_html(`<div class="w-full flex flex-col gap-3"><!></div>`);
 var root_152 = from_html(`<button> </button>`);
 var root_162 = from_html(`<span class="px-1 text-fg-muted text-xs"></span>`);
 var root_132 = from_html(`<div class="py-2 px-5 bg-surface-alt border-t border-edge flex items-center justify-center gap-1 shrink-0"><button aria-label="Previous retry">&#8249;</button> <div class="flex gap-0.5 items-center"></div> <button aria-label="Next retry">&#8250;</button></div>`);
@@ -20861,7 +20995,7 @@ function ResultsPage($$anchor, $$props) {
   var node_2 = sibling(h2, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var div_4 = root_34();
+      var div_4 = root_35();
       each(div_4, 21, () => get2(imageNames), index, ($$anchor3, name) => {
         var button_1 = root_42();
         var text_2 = child(button_1, true);
@@ -20900,7 +21034,7 @@ function ResultsPage($$anchor, $$props) {
       append($$anchor2, div_8);
     };
     var consequent_4 = ($$anchor2) => {
-      var div_9 = root_7();
+      var div_9 = root_72();
       var node_4 = child(div_9);
       SideBySideView(node_4, {
         get image() {
@@ -20952,7 +21086,7 @@ function ResultsPage($$anchor, $$props) {
       append($$anchor2, div_10);
     };
     var consequent_9 = ($$anchor2) => {
-      var div_13 = root_122();
+      var div_13 = root_123();
       var node_6 = child(div_13);
       BlendView(node_6, {
         get image() {
@@ -21087,7 +21221,10 @@ var root8 = from_html(`<div class="flex h-dvh relative max-md:flex-col overflow-
 function App($$anchor, $$props) {
   push($$props, true);
   let tests = proxy($$props.initialTests);
-  let isRunning = false;
+  let isRunning = state(proxy($$props.isRunning));
+  let runMessage = state(null);
+  let runSnapshot = null;
+  let runEventIds = /* @__PURE__ */ new Set();
   let openedTestPath = state(proxy([]));
   let filter = state(proxy({ status: null, subStrings: [] }));
   let viewMode = state(proxy(getViewMode()));
@@ -21275,9 +21412,67 @@ function App($$anchor, $$props) {
     });
     recalcAllSuiteStatuses(tests);
   }
-  function handleStart() {
+  async function handleStart(filters, target) {
+    if (get2(isRunning) || runSnapshot !== null) {
+      set(runMessage, "A run is already in progress");
+      return;
+    }
+    const markTarget = target ?? tests;
+    runSnapshot = captureTestStatuses(markTarget);
+    runEventIds = /* @__PURE__ */ new Set();
+    markTestsPending(markTarget);
+    recalcAllSuiteStatuses(tests);
+    const res = await fetch("/api/run", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(filters ?? {})
+    });
+    if (res.status === 409 || res.status === 400) {
+      if (runSnapshot !== null) {
+        restoreTestStatuses(tests, runSnapshot, runEventIds);
+        recalcAllSuiteStatuses(tests);
+        runSnapshot = null;
+        runEventIds = /* @__PURE__ */ new Set();
+      }
+      const body = await res.json().catch(() => null);
+      set(
+        runMessage,
+        body?.reason === "already-running" ? "A run is already in progress" : body?.reason === "no-tests" ? "No tests selected" : "Connect a Playwright reporter to enable running",
+        true
+      );
+    }
   }
-  function handleStop() {
+  function finalizeRunSnapshot() {
+    if (runSnapshot === null) return;
+    restoreTestStatuses(tests, runSnapshot, runEventIds);
+    recalcAllSuiteStatuses(tests);
+    if (runEventIds.size === 0) {
+      set(runMessage, "Run produced no results \u2014 see the server terminal for details.");
+    }
+    runSnapshot = null;
+    runEventIds = /* @__PURE__ */ new Set();
+  }
+  function toDescriptor(test) {
+    const { file: file2, line, column } = test.location ?? {};
+    if (file2 === void 0 || line === void 0) return null;
+    return {
+      file: file2,
+      line,
+      column,
+      projectName: test.projectName,
+      titlePath: [...test.titlePath ?? [], test.title]
+    };
+  }
+  function handleRunItem(item) {
+    const descriptors = (isTest(item) ? [item] : getAllTests(item)).map(toDescriptor).filter((d) => d !== null);
+    if (descriptors.length === 0) {
+      set(runMessage, "Cannot run: no source location for the selected test(s)");
+      return;
+    }
+    handleStart({ tests: descriptors }, item);
+  }
+  async function handleStop() {
+    await fetch("/api/stop", { method: "POST" });
   }
   function handleImageChange(name) {
     set(imageName, name, true);
@@ -21320,6 +21515,7 @@ function App($$anchor, $$props) {
           const current = collectTestsById(tests);
           current[msg.data.id] = msg.data;
           syncTreeState(tests, current);
+          if (runSnapshot !== null) runEventIds.add(msg.data.id);
           break;
         }
         case "run-end": {
@@ -21339,6 +21535,16 @@ function App($$anchor, $$props) {
         }
         case "approve":
           break;
+        case "run-status": {
+          if (msg.data.running) {
+            set(isRunning, true);
+            set(runMessage, null);
+          } else {
+            set(isRunning, false);
+            finalizeRunSnapshot();
+          }
+          break;
+        }
       }
     };
     ws.onmessage = handleMessage;
@@ -21363,7 +21569,9 @@ function App($$anchor, $$props) {
       get isReport() {
         return $$props.isReport;
       },
-      isRunning,
+      get isRunning() {
+        return get2(isRunning);
+      },
       get isUpdateMode() {
         return $$props.isUpdateMode;
       },
@@ -21373,6 +21581,12 @@ function App($$anchor, $$props) {
       get approvalMessage() {
         return $$props.approvalMessage;
       },
+      get runEnabled() {
+        return $$props.runEnabled;
+      },
+      get runMessage() {
+        return get2(runMessage);
+      },
       get filter() {
         return get2(filter);
       },
@@ -21385,6 +21599,7 @@ function App($$anchor, $$props) {
       onToggle: handleSuiteToggle,
       onStart: handleStart,
       onStop: handleStop,
+      onRun: handleRunItem,
       onApprove: handleApproveAndGoNext,
       onNext: handleGoToNextFailed,
       onApproveAll: handleApproveAllTests
@@ -21460,7 +21675,9 @@ function loadBootstrapData() {
     isUpdateMode: parsed.report.isUpdateMode,
     liveUpdates: parsed.liveUpdates,
     approvalEnabled: parsed.approvalEnabled,
-    approvalMessage: parsed.approvalMessage
+    approvalMessage: parsed.approvalMessage,
+    runEnabled: parsed.runEnabled ?? false,
+    isRunning: parsed.report.isRunning ?? false
   };
 }
 async function loadReportData() {
@@ -21475,7 +21692,9 @@ async function loadReportData() {
     isReport: true,
     isUpdateMode: parsed.isUpdateMode ?? false,
     liveUpdates: true,
-    approvalEnabled: true
+    approvalEnabled: true,
+    runEnabled: parsed.runEnabled ?? false,
+    isRunning: parsed.isRunning ?? false
   };
 }
 var handleApprove = async (id, retry, image) => {
@@ -21503,6 +21722,8 @@ mount(App, {
     liveUpdates: initialState.liveUpdates,
     approvalEnabled: initialState.approvalEnabled,
     approvalMessage: initialState.approvalMessage,
+    runEnabled: initialState.runEnabled,
+    isRunning: initialState.isRunning,
     onApprove: handleApprove,
     onApproveAll: handleApproveAll
   }