@crvy/rprtr 0.2.3 → 0.3.0

package/dist/index.js

@@ -19336,13 +19336,14 @@ var RunTestDescriptorSchema = external_exports.object({
   titlePath: external_exports.array(external_exports.string())
 });
 var RunRequestBodySchema = external_exports.object({
-  tests: external_exports.array(RunTestDescriptorSchema).optional()
+  tests: external_exports.array(RunTestDescriptorSchema).optional(),
+  update: external_exports.boolean().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"])
+    reason: external_exports.enum(["no-config", "already-running", "no-tests", "docker-unavailable"])
   })
 ]);
 var StopResponseSchema = external_exports.discriminatedUnion("ok", [
@@ -19449,7 +19450,9 @@ var WebSocketMessageSchema = external_exports.discriminatedUnion("type", [
   external_exports.object({
     type: external_exports.literal("run-status"),
     data: external_exports.object({
-      running: external_exports.boolean()
+      running: external_exports.boolean(),
+      mode: external_exports.enum(["local", "docker"]).optional(),
+      phase: external_exports.string().optional()
     })
   })
 ]);
@@ -19479,6 +19482,7 @@ var RunEndDataSchema = external_exports.object({
 var RegisterDataSchema = external_exports.object({
   playwrightSnapshotDir: external_exports.string().optional(),
   playwrightTestDir: external_exports.string().optional(),
+  playwrightRootDir: external_exports.string().optional(),
   playwrightSnapshotPathTemplate: external_exports.string().optional(),
   playwrightToHaveScreenshotPathTemplate: external_exports.string().optional(),
   configFile: external_exports.string().optional(),
@@ -19511,7 +19515,8 @@ var ReportApiResponseSchema = external_exports.object({
   tests: external_exports.record(external_exports.string(), TestDataSchema),
   isUpdateMode: external_exports.boolean().optional(),
   isRunning: external_exports.boolean().optional(),
-  runEnabled: external_exports.boolean().optional()
+  runEnabled: external_exports.boolean().optional(),
+  runMode: external_exports.enum(["local", "docker"]).optional()
 });
 var ClientBootstrapDataSchema = external_exports.object({
   report: ReportApiResponseSchema.extend({
@@ -20338,18 +20343,19 @@ function TreeItem_1($$anchor, $$props) {
 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_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_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>`);
+var root_12 = from_html(`<div class="text-[10px] uppercase tracking-wide text-fg-muted mb-1"> </div>`);
+var root_22 = 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_32 = from_html(`<button><span></span> <span> </span></button>`);
+var root_4 = from_html(`<button><span class="size-2 rounded-full inline-block shrink-0 bg-info"></span> <span> </span></button>`);
+var root_6 = 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_7 = 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 disabled:opacity-40 disabled:cursor-not-allowed" aria-label="Start tests">&#9654;</button> <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 disabled:opacity-40 disabled:cursor-not-allowed" aria-label="Run and update baselines" title="Run &amp; update baselines">&#9654;&#8635;</button>`, 1);
+var root_5 = from_html(`<div class="mt-1 flex gap-1"><!></div>`);
+var root_8 = from_html(`<div class="mt-2 text-center text-xs text-fg-muted"> </div>`);
+var root_10 = from_html(`<div class="py-6 px-4 text-center text-fg-muted text-ui">No tests match filter</div>`);
+var root_11 = 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_122 = 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_13 = 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("");
@@ -20400,16 +20406,29 @@ function Sidebar($$anchor, $$props) {
   {
     var consequent = ($$anchor2) => {
       var div_4 = root_12();
+      var text2 = child(div_4, true);
+      reset(div_4);
+      template_effect(() => set_text(text2, $$props.runMode));
       append($$anchor2, div_4);
     };
     if_block(node, ($$render) => {
-      if ($$props.isUpdateMode) $$render(consequent);
+      if ($$props.runEnabled && $$props.runMode !== void 0) $$render(consequent);
     });
   }
-  var div_5 = sibling(node, 2);
-  var node_1 = child(div_5);
+  var node_1 = sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var div_5 = root_22();
+      append($$anchor2, div_5);
+    };
+    if_block(node_1, ($$render) => {
+      if ($$props.isUpdateMode) $$render(consequent_1);
+    });
+  }
+  var div_6 = sibling(node_1, 2);
+  var node_2 = child(div_6);
   each(
-    node_1,
+    node_2,
     17,
     () => [
       { key: "success", count: get2(status).successCount },
@@ -20420,17 +20439,17 @@ function Sidebar($$anchor, $$props) {
     ($$anchor2, $$item) => {
       let key2 = () => get2($$item).key;
       let count = () => get2($$item).count;
-      var button = root_22();
+      var button = root_32();
       var span = child(button);
       var span_1 = sibling(span, 2);
-      var text2 = child(span_1, true);
+      var text_1 = child(span_1, true);
       reset(span_1);
       reset(button);
       template_effect(
         ($0, $1) => {
           set_class(button, 1, $0);
           set_class(span, 1, $1);
-          set_text(text2, count());
+          set_text(text_1, count());
         },
         [
           () => clsx2(cn("flex items-center gap-1 px-2 py-1 min-h-[28px] bg-transparent border border-transparent rounded-sm text-fg cursor-pointer text-xs transition-colors hover:border-edge focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1", $$props.filter.status === key2() && "border-accent! bg-accent/15")),
@@ -20441,18 +20460,18 @@ function Sidebar($$anchor, $$props) {
       append($$anchor2, button);
     }
   );
-  var node_2 = sibling(node_1, 2);
+  var node_3 = sibling(node_2, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var button_1 = root_32();
+    var consequent_2 = ($$anchor2) => {
+      var button_1 = root_4();
       var span_2 = sibling(child(button_1), 2);
-      var text_1 = child(span_2, true);
+      var text_2 = child(span_2, true);
       reset(span_2);
       reset(button_1);
       template_effect(
         ($0) => {
           set_class(button_1, 1, $0);
-          set_text(text_1, get2(status).approvedCount);
+          set_text(text_2, get2(status).approvedCount);
         },
         [
           () => clsx2(cn("flex items-center gap-1 px-2 py-1 min-h-[28px] bg-transparent border border-transparent rounded-sm text-fg cursor-pointer text-xs transition-colors hover:border-edge focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1", $$props.filter.status === "approved" && "border-accent! bg-accent/15"))
@@ -20461,64 +20480,73 @@ function Sidebar($$anchor, $$props) {
       delegated("click", button_1, () => handleClickByStatus("approved"));
       append($$anchor2, button_1);
     };
-    if_block(node_2, ($$render) => {
-      if (get2(status).approvedCount > 0) $$render(consequent_1);
+    if_block(node_3, ($$render) => {
+      if (get2(status).approvedCount > 0) $$render(consequent_2);
     });
   }
-  reset(div_5);
+  reset(div_6);
   reset(div_3);
-  var node_3 = sibling(div_3, 2);
+  var node_4 = sibling(div_3, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var div_6 = root_4();
-      var node_4 = child(div_6);
+    var consequent_4 = ($$anchor2) => {
+      var div_7 = root_5();
+      var node_5 = child(div_7);
       {
-        var consequent_2 = ($$anchor3) => {
-          var button_2 = root_5();
+        var consequent_3 = ($$anchor3) => {
+          var button_2 = root_6();
           delegated("click", button_2, function(...$$args) {
             $$props.onStop?.apply(this, $$args);
           });
           append($$anchor3, button_2);
         };
         var alternate = ($$anchor3) => {
-          var button_3 = root_6();
+          var fragment = root_7();
+          var button_3 = first_child(fragment);
+          var button_4 = sibling(button_3, 2);
+          template_effect(() => {
+            button_3.disabled = $$props.isPreparing === true;
+            button_4.disabled = $$props.isPreparing === true;
+          });
           delegated("click", button_3, function(...$$args) {
             $$props.onStart?.apply(this, $$args);
           });
-          append($$anchor3, button_3);
+          delegated("click", button_4, function(...$$args) {
+            $$props.onUpdate?.apply(this, $$args);
+          });
+          append($$anchor3, fragment);
         };
-        if_block(node_4, ($$render) => {
-          if ($$props.isRunning) $$render(consequent_2);
+        if_block(node_5, ($$render) => {
+          if ($$props.isRunning) $$render(consequent_3);
           else $$render(alternate, -1);
         });
       }
-      reset(div_6);
-      append($$anchor2, div_6);
+      reset(div_7);
+      append($$anchor2, div_7);
     };
-    if_block(node_3, ($$render) => {
-      if ($$props.runEnabled) $$render(consequent_3);
+    if_block(node_4, ($$render) => {
+      if ($$props.runEnabled) $$render(consequent_4);
     });
   }
   reset(div_2);
   var input = sibling(div_2, 2);
   remove_input_defaults(input);
-  var node_5 = sibling(input, 2);
+  var node_6 = 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);
+    var consequent_5 = ($$anchor2) => {
+      var div_8 = root_8();
+      var text_3 = child(div_8, true);
+      reset(div_8);
+      template_effect(() => set_text(text_3, $$props.runMessage));
+      append($$anchor2, div_8);
     };
-    if_block(node_5, ($$render) => {
-      if ($$props.runMessage) $$render(consequent_4);
+    if_block(node_6, ($$render) => {
+      if ($$props.runMessage) $$render(consequent_5);
     });
   }
   reset(div_1);
-  var div_8 = sibling(div_1, 2);
-  var node_6 = child(div_8);
-  each(node_6, 17, () => get2(visibleChildren), index, ($$anchor2, child2) => {
+  var div_9 = sibling(div_1, 2);
+  var node_7 = child(div_9);
+  each(node_7, 17, () => get2(visibleChildren), index, ($$anchor2, child2) => {
     TreeItem_1($$anchor2, {
       get item() {
         return get2(child2);
@@ -20553,65 +20581,65 @@ function Sidebar($$anchor, $$props) {
       }
     });
   });
-  var node_7 = sibling(node_6, 2);
+  var node_8 = sibling(node_7, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var div_9 = root_9();
-      append($$anchor2, div_9);
+    var consequent_6 = ($$anchor2) => {
+      var div_10 = root_10();
+      append($$anchor2, div_10);
     };
-    if_block(node_7, ($$render) => {
-      if (get2(visibleChildren).length === 0) $$render(consequent_5);
+    if_block(node_8, ($$render) => {
+      if (get2(visibleChildren).length === 0) $$render(consequent_6);
     });
   }
-  reset(div_8);
-  var div_10 = sibling(div_8, 2);
-  var div_11 = child(div_10);
-  var node_8 = child(div_11);
+  reset(div_9);
+  var div_11 = sibling(div_9, 2);
+  var div_12 = child(div_11);
+  var node_9 = child(div_12);
   {
-    var consequent_6 = ($$anchor2) => {
-      var button_4 = root_10();
-      template_effect(() => button_4.disabled = !$$props.canApprove);
-      delegated("click", button_4, function(...$$args) {
+    var consequent_7 = ($$anchor2) => {
+      var button_5 = root_11();
+      template_effect(() => button_5.disabled = !$$props.canApprove);
+      delegated("click", button_5, function(...$$args) {
         $$props.onNext?.apply(this, $$args);
       });
-      append($$anchor2, button_4);
+      append($$anchor2, button_5);
     };
     var alternate_1 = ($$anchor2) => {
-      var button_5 = root_11();
-      template_effect(() => button_5.disabled = !$$props.canApprove);
-      delegated("click", button_5, function(...$$args) {
+      var button_6 = root_122();
+      template_effect(() => button_6.disabled = !$$props.canApprove);
+      delegated("click", button_6, function(...$$args) {
         $$props.onApprove?.apply(this, $$args);
       });
-      append($$anchor2, button_5);
+      append($$anchor2, button_6);
     };
-    if_block(node_8, ($$render) => {
-      if (get2(isAlt)) $$render(consequent_6);
+    if_block(node_9, ($$render) => {
+      if (get2(isAlt)) $$render(consequent_7);
       else $$render(alternate_1, -1);
     });
   }
-  var button_6 = sibling(node_8, 2);
-  reset(div_11);
-  var node_9 = sibling(div_11, 2);
+  var button_7 = sibling(node_9, 2);
+  reset(div_12);
+  var node_10 = sibling(div_12, 2);
   {
-    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);
+    var consequent_8 = ($$anchor2) => {
+      var div_13 = root_13();
+      var text_4 = child(div_13, true);
+      reset(div_13);
+      template_effect(() => set_text(text_4, $$props.approvalMessage));
+      append($$anchor2, div_13);
     };
-    if_block(node_9, ($$render) => {
-      if (!$$props.approvalEnabled && $$props.approvalMessage) $$render(consequent_7);
+    if_block(node_10, ($$render) => {
+      if (!$$props.approvalEnabled && $$props.approvalMessage) $$render(consequent_8);
     });
   }
-  reset(div_10);
+  reset(div_11);
   reset(div);
   template_effect(() => {
     set_value(input, get2(filterInput));
-    button_6.disabled = !$$props.approvalEnabled;
+    button_7.disabled = !$$props.approvalEnabled;
   });
   delegated("input", input, handleFilterInput);
-  delegated("click", button_6, () => {
+  delegated("click", button_7, () => {
     if (confirm("Approve all failed screenshots?")) $$props.onApproveAll();
   });
   append($$anchor, div);
@@ -20620,7 +20648,7 @@ function Sidebar($$anchor, $$props) {
 delegate(["click", "input"]);
 
 // src/client/components/SlideView.svelte
-var root_13 = from_html(`<div class="relative flex w-fit"><input class="slide-input" style="z-index: 30" type="range" aria-label="Slide comparison"/> <div class="absolute inset-0 rounded-xl border-2 border-error pointer-events-none z-10"><div class="h-9 px-3 flex items-center justify-end rounded-t-xl" style="background:color-mix(in srgb,var(--c-error) 15%,var(--c-surface))"><span class="text-xs font-bold text-error uppercase tracking-wider select-none">Actual</span></div></div> <div class="absolute overflow-hidden"><img class="max-w-full block" alt="actual"/></div> <div class="absolute inset-0 z-20"><div class="absolute inset-0 rounded-xl border-2 border-success pointer-events-none z-10"><div class="h-9 px-3 flex items-center rounded-t-xl" style="background:color-mix(in srgb,var(--c-success) 15%,var(--c-surface))"><span class="text-xs font-bold text-success uppercase tracking-wider select-none">Expected</span></div></div> <div class="absolute overflow-hidden"><img class="max-w-full block" alt="expect"/></div></div> <img class="opacity-0 max-w-full block" alt="diff"/></div>`);
+var root_14 = from_html(`<div class="relative flex w-fit"><input class="slide-input" style="z-index: 30" type="range" aria-label="Slide comparison"/> <div class="absolute inset-0 rounded-xl border-2 border-error pointer-events-none z-10"><div class="h-9 px-3 flex items-center justify-end rounded-t-xl" style="background:color-mix(in srgb,var(--c-error) 15%,var(--c-surface))"><span class="text-xs font-bold text-error uppercase tracking-wider select-none">Actual</span></div></div> <div class="absolute overflow-hidden"><img class="max-w-full block" alt="actual"/></div> <div class="absolute inset-0 z-20"><div class="absolute inset-0 rounded-xl border-2 border-success pointer-events-none z-10"><div class="h-9 px-3 flex items-center rounded-t-xl" style="background:color-mix(in srgb,var(--c-success) 15%,var(--c-surface))"><span class="text-xs font-bold text-success uppercase tracking-wider select-none">Expected</span></div></div> <div class="absolute overflow-hidden"><img class="max-w-full block" alt="expect"/></div></div> <img class="opacity-0 max-w-full block" alt="diff"/></div>`);
 var root_23 = from_html(`<div class="flex items-center justify-center p-10 text-fg-muted"></div>`);
 function SlideView($$anchor, $$props) {
   push($$props, true);
@@ -20655,7 +20683,7 @@ function SlideView($$anchor, $$props) {
   var node = first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_13();
+      var div = root_14();
       var input = child(div);
       remove_input_defaults(input);
       set_attribute2(input, "min", 0);
@@ -20701,7 +20729,7 @@ function SlideView($$anchor, $$props) {
 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_15 = 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_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>`);
@@ -20725,7 +20753,7 @@ function SideBySideView($$anchor, $$props) {
   var node = child(div);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_14();
+      var div_1 = root_15();
       var h3 = child(div_1);
       var text2 = child(h3, true);
       reset(h3);
@@ -20783,7 +20811,7 @@ function SideBySideView($$anchor, $$props) {
 }
 
 // src/client/components/SwapView.svelte
-var root_15 = from_html(`<img alt="Expected" class="col-start-1 row-start-1 block transition-opacity w-auto max-w-full mx-auto"/>`);
+var root_16 = from_html(`<img alt="Expected" class="col-start-1 row-start-1 block transition-opacity w-auto max-w-full mx-auto"/>`);
 var root_25 = from_html(`<img alt="Actual" class="col-start-1 row-start-1 block transition-opacity w-auto max-w-full mx-auto"/>`);
 var root4 = from_html(`<div class="flex flex-col gap-3 items-center"><div><h3> </h3> <div class="cursor-pointer p-2" role="button" tabindex="0"><div class="grid"><!> <!></div></div></div></div>`);
 function SwapView($$anchor, $$props) {
@@ -20808,7 +20836,7 @@ function SwapView($$anchor, $$props) {
   var node = child(div_3);
   {
     var consequent = ($$anchor2) => {
-      var img = root_15();
+      var img = root_16();
       let styles;
       template_effect(() => {
         set_attribute2(img, "src", $$props.image.expect);
@@ -20860,7 +20888,7 @@ function SwapView($$anchor, $$props) {
 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_17 = 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_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>`);
@@ -20873,7 +20901,7 @@ function BlendView($$anchor, $$props) {
   var node = child(div_3);
   {
     var consequent = ($$anchor2) => {
-      var div_4 = root_16();
+      var div_4 = root_17();
       var img = child(div_4);
       reset(div_4);
       template_effect(() => set_attribute2(img, "src", $$props.image.expect));
@@ -20923,7 +20951,7 @@ var root_52 = from_html(`<div class="flex-1 flex items-center justify-center tex
 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_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_9 = from_html(`<div class="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>`);
@@ -21052,7 +21080,7 @@ function ResultsPage($$anchor, $$props) {
       });
     };
     var consequent_8 = ($$anchor2) => {
-      var div_10 = root_92();
+      var div_10 = root_9();
       var node_5 = child(div_10);
       {
         var consequent_6 = ($$anchor3) => {
@@ -21177,7 +21205,7 @@ function ResultsPage($$anchor, $$props) {
 delegate(["click"]);
 
 // src/client/components/Toggle.svelte
-var root_17 = from_svg(`<svg class="block size-3 text-surface" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"></path></svg>`);
+var root_18 = from_svg(`<svg class="block size-3 text-surface" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"></path></svg>`);
 var root_28 = from_svg(`<svg class="block size-3 text-surface" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"></path></svg>`);
 var root7 = from_html(`<label class="relative inline-block w-12 h-6 cursor-pointer has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent has-[:focus-visible]:ring-offset-1"><input type="checkbox" aria-label="Toggle theme" class="opacity-0 w-0 h-0 absolute"/> <span class="absolute inset-0 bg-surface-input border border-edge rounded-full transition-colors"><span><!></span></span></label>`);
 function Toggle($$anchor, $$props) {
@@ -21190,7 +21218,7 @@ function Toggle($$anchor, $$props) {
   var node = child(span_1);
   {
     var consequent = ($$anchor2) => {
-      var svg = root_17();
+      var svg = root_18();
       append($$anchor2, svg);
     };
     var alternate = ($$anchor2) => {
@@ -21223,6 +21251,7 @@ function App($$anchor, $$props) {
   let tests = proxy($$props.initialTests);
   let isRunning = state(proxy($$props.isRunning));
   let runMessage = state(null);
+  let isPreparing = state(false);
   let runSnapshot = null;
   let runEventIds = /* @__PURE__ */ new Set();
   let openedTestPath = state(proxy([]));
@@ -21474,6 +21503,9 @@ function App($$anchor, $$props) {
   async function handleStop() {
     await fetch("/api/stop", { method: "POST" });
   }
+  async function handleUpdate() {
+    await handleStart({ update: true });
+  }
   function handleImageChange(name) {
     set(imageName, name, true);
   }
@@ -21536,6 +21568,12 @@ function App($$anchor, $$props) {
         case "approve":
           break;
         case "run-status": {
+          if (msg.data.phase === "pulling") {
+            set(isPreparing, true);
+            set(runMessage, "Pulling Docker image\u2026");
+            break;
+          }
+          set(isPreparing, false);
           if (msg.data.running) {
             set(isRunning, true);
             set(runMessage, null);
@@ -21598,6 +21636,13 @@ function App($$anchor, $$props) {
       onOpen: handleSuiteOpen,
       onToggle: handleSuiteToggle,
       onStart: handleStart,
+      onUpdate: handleUpdate,
+      get isPreparing() {
+        return get2(isPreparing);
+      },
+      get runMode() {
+        return $$props.runMode;
+      },
       onStop: handleStop,
       onRun: handleRunItem,
       onApprove: handleApproveAndGoNext,
@@ -21694,7 +21739,8 @@ async function loadReportData() {
     liveUpdates: true,
     approvalEnabled: true,
     runEnabled: parsed.runEnabled ?? false,
-    isRunning: parsed.isRunning ?? false
+    isRunning: parsed.isRunning ?? false,
+    runMode: parsed.runMode
   };
 }
 var handleApprove = async (id, retry, image) => {
@@ -21724,6 +21770,7 @@ mount(App, {
     approvalMessage: initialState.approvalMessage,
     runEnabled: initialState.runEnabled,
     isRunning: initialState.isRunning,
+    runMode: initialState.runMode,
     onApprove: handleApprove,
     onApproveAll: handleApproveAll
   }

package/dist/reporter-artifact-ops.d.ts

@@ -4,8 +4,6 @@ export type RunEvent = {
     type: 'test-begin' | 'test-end' | 'run-end';
     data: unknown;
 };
-export declare function encodeArtifactPathSegment(segment: string): string;
-export declare function safeArtifactPath(name: string): string;
 export declare function sanitizeId(id: string): string;
 export declare function copyResolvedBaseline(safeTestId: string, testScreenshotDir: string, target: ResolvedBaselineTarget, savedAttachments: AttachmentData[]): Promise<void>;
 export declare function saveAttachments(screenshotDir: string, testId: string, result: {

package/dist/reporter-artifact-ops.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reporter-artifact-ops.d.ts","sourceRoot":"","sources":["../src/reporter-artifact-ops.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAOzE,MAAM,MAAM,QAAQ,GAAG;IAAE,IAAI,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAAA;AAErF,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAMjE;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAErD;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,wBAAsB,oBAAoB,CACxC,UAAU,EAAE,MAAM,EAClB,iBAAiB,EAAE,MAAM,EACzB,MAAM,EAAE,sBAAsB,EAC9B,gBAAgB,EAAE,cAAc,EAAE,GACjC,OAAO,CAAC,IAAI,CAAC,CAUf;AAED,wBAAsB,eAAe,CACnC,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE;IAAE,WAAW,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAAE,GAC/E,OAAO,CAAC,cAAc,EAAE,CAAC,CAoC3B;AAED,wBAAsB,kBAAkB,CACtC,SAAS,EAAE,QAAQ,EAAE,EACrB,iBAAiB,EAAE,MAAM,EACzB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,IAAI,CAAC,CAiBf;AAED,wBAAsB,mBAAmB,CACvC,SAAS,EAAE,QAAQ,EAAE,EACrB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACrB,OAAO,CAAC,IAAI,CAAC,CAOf"}
+{"version":3,"file":"reporter-artifact-ops.d.ts","sourceRoot":"","sources":["../src/reporter-artifact-ops.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAIzE,MAAM,MAAM,QAAQ,GAAG;IAAE,IAAI,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAAA;AAErF,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAE7C;AAaD,wBAAsB,oBAAoB,CACxC,UAAU,EAAE,MAAM,EAClB,iBAAiB,EAAE,MAAM,EACzB,MAAM,EAAE,sBAAsB,EAC9B,gBAAgB,EAAE,cAAc,EAAE,GACjC,OAAO,CAAC,IAAI,CAAC,CAOf;AAED,wBAAsB,eAAe,CACnC,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE;IAAE,WAAW,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAAE,GAC/E,OAAO,CAAC,cAAc,EAAE,CAAC,CAiC3B;AAED,wBAAsB,kBAAkB,CACtC,SAAS,EAAE,QAAQ,EAAE,EACrB,iBAAiB,EAAE,MAAM,EACzB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,IAAI,CAAC,CAiBf;AAED,wBAAsB,mBAAmB,CACvC,SAAS,EAAE,QAAQ,EAAE,EACrB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACrB,OAAO,CAAC,IAAI,CAAC,CAOf"}