deploy: update Space from deploy_preflight --push

app.py

@@ -913,13 +913,12 @@ def build() -> gr.Blocks:
                 gr.HTML(tab_intro("The pre-flight check, <b>before it prints</b>: slice the part, read "
                                   "precedent, flag failures, and get a second opinion. Then → PRINT."))
                 with gr.Group(visible=False, elem_classes=["ce-part-card"]) as build_results:
-                    # slice + motion preview side by side — grouped like LOAD's PART card
-                    gr.HTML(rule("SLICE · CROSS-SECTION"))
-                    with gr.Row(equal_height=False, elem_classes=["ce-part-row"]):
-                        with gr.Column(scale=3):
+                    # slice + motion preview side by side — equal width columns
+                    gr.HTML(rule("SLICE · CROSS-SECTION + MOTION PREVIEW"))
+                    with gr.Row(equal_height=False, elem_classes=["ce-part-row", "ce-slice-viz"]):
+                        with gr.Column(scale=1, elem_classes=["ce-slice-col"]):
                             vp_layer = gr.Image(label="", height=360, show_label=False)
-                        with gr.Column(scale=1, elem_classes=["ce-vp"]):
-                            gr.HTML(rule("MOTION PREVIEW"))
+                        with gr.Column(scale=1, elem_classes=["ce-slice-col", "ce-vp"]):
                             vprint = gr.HTML()
                     with gr.Column(elem_classes=["ce-hslider"]):
                         vp_slider = gr.Slider(1, SCRUB_LAYERS, value=1, step=1,

core/theme.py

@@ -563,11 +563,19 @@ CSS += """
 
 /* Virtual print preview — bigger, framed, motion-aware */
 .ce-vp { padding:8px !important; border:1px solid var(--ao-outline-dim) !important;
-  background:var(--ao-void) !important; min-height:340px !important;
-  display:flex !important; flex-direction:column !important; gap:6px !important; }
+  background:var(--ao-void) !important; display:flex !important; flex-direction:column !important; gap:6px !important; }
+.ce-vp-wrap { border:1px solid var(--ao-outline-dim); background:#0a0c14; display:inline-block; }
+.ce-vp canvas { display:block; max-width:100%; height:auto; }
 .ce-vp svg { width:100% !important; height:auto !important; max-height:300px !important; }
 .ce-vp .ce-vp-caption { color:var(--ao-outline); font-size:11px;
   letter-spacing:1px; text-transform:uppercase; padding:4px 2px; }
+.ce-vp-replay { align-self:flex-start; }
+/* side-by-side slice visualizers: equal-width columns */
+.ce-slice-viz { gap:16px !important; }
+.ce-slice-viz .ce-slice-col { flex:1 1 0 !important; min-width:0 !important; }
+.ce-slice-viz .ce-slice-col .gr-image,
+.ce-slice-viz .ce-slice-col .gr-image > div,
+.ce-slice-viz .ce-slice-col .gr-image img { width:100% !important; height:auto !important; display:block !important; }
 
 /* Mini loader (Second Opinion in-flight — smaller than the full preflight loader).
    Same scanning-bar look but condensed. */

core/widgets.py

@@ -26,9 +26,7 @@ def _projected_layers(mesh_path: str | Path, layer_height_mm: float = 0.2,
 
     {bounds:[xmin,xmax,ymin,ymax], layers:[[[x0,y0,x1,y1],...], ...]}  — projected
     oblique screen space, rounded to keep the data-attribute payload small. Segments
-    per layer are capped (down-sampled) so a high-res mesh doesn't bloat the page —
-    the rising animation only needs enough segments to read; the layer SCRUBBER
-    (layer_image) renders full fidelity server-side.
+    per layer are capped (down-sampled) so a high-res mesh doesn't bloat the page.
     """
     from sim.virtual_printer import slice_segments
 
@@ -140,7 +138,8 @@ def virtual_printer_html(mesh_path: str | Path | None,
     """A live virtual-printer canvas for the cockpit (animated by VP_JS).
 
     Uses the layer height from the proposed PrintSettings so the preview is tied
-    to the actual recommendation rather than a hard-coded default.
+    to the actual recommendation rather than a hard-coded default. Canvas size is
+    chosen from the projected mesh aspect ratio so the preview is not squished.
     """
     if not mesh_path or not Path(str(mesh_path)).exists():
         return ("<div class='ce-rule'>VIRTUAL PRINT</div>"
@@ -152,13 +151,28 @@ def virtual_printer_html(mesh_path: str | Path | None,
                 "<div class='ce-sub'>mesh too thin to slice.</div>")
     payload = json.dumps(data).replace("'", "&#39;")
     lh_note = f"{layer_height:.2f} mm layers"
+
+    # Canvas size derived from projected bounds so the preview is not squished.
+    # Max width is clamped to the column; height follows aspect ratio.
+    xmin, xmax, ymin, ymax = data["bounds"]
+    proj_w = max(xmax - xmin, 1)
+    proj_h = max(ymax - ymin, 1)
+    aspect = proj_h / proj_w
+    max_css_w = 560
+    css_h = min(round(max_css_w * aspect), 340)
+    canvas_w, canvas_h = max_css_w, css_h
+
     return (
-        "<div class='ce-rule'>VIRTUAL PRINT</div>"
-        "<div style='border:1px solid var(--ao-outline-dim);background:#0a0c14;'>"
-        f"<canvas class='ce-vp' width='520' height='300' data-vp='{payload}' "
-        "style='width:100%;height:auto;display:block;'></canvas></div>"
-        f"<div class='ce-sub' style='margin-top:2px;'>{caption} · {lh_note} · real cross-sections of "
-        "this part, layer by layer (motion preview — not a slicer)</div>"
+        "<div class='ce-rule'>VIRTUAL PRINT · MOTION PREVIEW</div>"
+        "<div class='ce-vp-wrap'>"
+        f"<canvas class='ce-vp' width='{canvas_w}' height='{canvas_h}' data-vp='{payload}' "
+        f"data-aspect='{aspect:.4f}' style='width:{max_css_w}px;height:{css_h}px;display:block;'></canvas>"
+        "</div>"
+        f"<div class='ce-sub ce-vp-caption'>{caption} · {lh_note} · real cross-sections of "
+        "this part, rising layer by layer (motion preview — not a slicer). Click REPLAY to restart.</div>"
+        "<button class='ce-pillbtn ce-vp-replay' type='button' "
+        "onclick=\"const cv=this.parentNode.querySelector('canvas.ce-vp');"
+        "if(window.__vp_replay) window.__vp_replay(cv);\">REPLAY</button>"
     )
 
 
@@ -178,6 +192,12 @@ VP_HEAD = r"""
 
   // --- virtual-printer animator ---
   const DONE='#46627f', CUR='#ff9c00', NOZ='#ffe6b4', BG='#0a0c14';
+  window.__vp_replay = function(cv){
+    if(cv._raf){ cancelAnimationFrame(cv._raf); cv._raf=null; }
+    cv.removeAttribute('data-init');
+    const ctx = cv.getContext('2d'); ctx.fillStyle=BG; ctx.fillRect(0,0,cv.width,cv.height);
+    scan();
+  };
   function animate(cv){
     let data; try { data = JSON.parse(cv.getAttribute('data-vp')); } catch(e){ return; }
     if(!data || !data.layers || !data.layers.length) return;
@@ -188,6 +208,8 @@ VP_HEAD = r"""
     const X = x => pad + (x-xmin)*s, Y = y => H - (pad + (y-ymin)*s);
     const N = data.layers.length;
     let upto = 0, hold = 0;
+    // bigger hold count = slower animation. default 6; override with window.__vp_speed.
+    const speed = Math.max(1, Math.min(20, Number(window.__vp_speed || 6)));
     function frame(){
       ctx.fillStyle=BG; ctx.fillRect(0,0,W,H);
       for(let li=0; li<=upto && li<N; li++){
@@ -204,8 +226,8 @@ VP_HEAD = r"""
       // HUD
       ctx.fillStyle='#9fb0c8'; ctx.font='10px ui-monospace,monospace';
       ctx.fillText('LAYER '+(upto+1)+'/'+N+'  ·  '+Math.round(100*(upto+1)/N)+'%', pad, 14);
-      if(upto < N-1){ if(++hold>=3){ hold=0; upto++; } cv._raf = requestAnimationFrame(frame); }
-      // else: the full part is drawn — hold the final frame and STOP (no perpetual loop)
+      if(upto < N-1){ if(++hold>=speed){ hold=0; upto++; } cv._raf = requestAnimationFrame(frame); }
+      // else: full part drawn — hold final frame
     }
     frame();
   }