screengraft 0.25.2 → 0.37.0

package/ui/index.html

@@ -32,6 +32,9 @@
     /* A four-step raised ladder, added in the design file to fix two collapsed chip states: hover used to
        step DOWN to --float and selected-hover had collapsed onto --edge. */
     --raise:#2b2b30; --raise-mid:#333337; --raise-hi:#3a3a40; --raise-highest:#46464e;
+    /* surface/raise-low — the recessed step, under --raise rather than over it.
+       It is what a pressed control sits on, and what a disabled one sits on. */
+    --raise-low:#1c1c20;
     --panel:#161618;
     /* surface/float is a real token (#26262b, the chip hover surface). The
        canvas overlay is a separate thing and gets its own name. */
@@ -39,6 +42,8 @@
     --overlay:rgba(17,17,18,.98);
     --ink:#e9ecf1; --mute:#8f939a; --faint:#8f939ab2;
     --line:#1d1e20; --edge:#3a3b41; --edge-mid:#494a50; --edge-hi:#6d6f79;
+    /* border/edge-low — the dimmest bound, for a control that cannot be used. */
+    --edge-low:#2b2c31;
 
     /* Accent, per the Button variant matrix (4:14). Primary at REST is the
        accent at 85%, not solid — solid is the hover state. */
@@ -47,9 +52,12 @@
     --acc:#f23b0d; --acc-btn-rest:rgba(242,59,13,.85); --acc-press:#bb2b00;
     --acc-stroke:#ff6833; --acc-ink:#fbf9f9; --acc-soft:rgba(242,59,13,.14);
     /* Neutral button hover/pressed are explicit surfaces in Figma, not a
-       brightness filter on the rest state. */
-    --btn-hover:#333337; --btn-hover-edge:#3f4045;
-    --btn-press:#1c1c20; --btn-press-edge:#2b2c31;
+       brightness filter on the rest state. Re-picked 11 Sep 2026 against the
+       polished Button matrix (4:14): hover's border is border/edge-mid, and
+       pressed keeps border/edge rather than dimming to edge-low — pressing a
+       control must not make it look unavailable. Both had drifted. */
+    --btn-hover:#333337; --btn-hover-edge:#494a50;
+    --btn-press:#1c1c20; --btn-press-edge:#3a3b41;
     /* Accent disabled keeps the label READABLE rather than fading the whole
        button — the Button component in Figma says so explicitly. */
     --acc-dis:#bb2b00b2; --acc-dis-edge:#ff6833b2; --acc-dis-ink:#fbf9f966;
@@ -162,41 +170,114 @@
      filter over the rest state — a filter shifts hue and cannot be measured
      against a token.
      ------------------------------------------------------------------ */
+  /* Md is radius/md, Sm is radius/sm — one rule, both variants. Md had been
+     6px here while Primary/Md was 8px, so the neutral and accent buttons beside
+     each other in the top bar were not the same shape. Settled in Figma
+     11 Sep 2026: Md = 8, Sm = 6. */
   button{font:inherit;color:var(--ink);background:var(--raise);
-         border:1px solid var(--edge);border-radius:var(--r-sm);
+         border:1px solid var(--edge);border-radius:var(--r-md);
          padding:0 var(--s3);height:28px;font-size:13px;cursor:pointer;box-shadow:var(--hi);
          transition:var(--t-all), transform var(--t)}
   button:hover{background:var(--btn-hover);border-color:var(--btn-hover-edge)}
   button:active{background:var(--btn-press);border-color:var(--btn-press-edge);
                 box-shadow:none;transform:translateY(.5px)}
   button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
-  /* Default disabled keeps the raised surface and dims only the LABEL — the
-     component description is explicit that opacity is not the mechanism. */
-  button[disabled]{background:var(--raise);border-color:var(--edge);
+  /* Default/Disabled RECESSES: surface/raise-low with border/edge-low, label at
+     text/faint x 50%. It used to keep the raised surface and dim only the label.
+     The change is deliberate — a control you cannot press should not be sitting
+     at the same elevation as one you can — and it means the surface, the border
+     and the label all say the same thing rather than only the label.
+     The 50% the label layer carries in Figma is deliberately NOT applied, and
+     this is a disagreement inside the design file rather than a liberty: the
+     Button component's own description says "Disabled keeps its label readable
+     rather than using opacity", and the layer does the opposite. Measured, the
+     description is also the better outcome — text/faint on the recessed surface
+     is **3.37:1**, where the same label with the 50% on top is **1.80:1** and
+     what ships today (faint on --raise) is 3.01:1. So the new surface makes the
+     label MORE readable than before, and the multiplier would have made it the
+     dimmest text in the tool. The description wins until that is
+     settled in the file. */
+  button[disabled]{background:var(--raise-low);border-color:var(--edge-low);
                    color:var(--faint);cursor:default;font-weight:400;
                    box-shadow:none;transform:none}
-  button[disabled]:hover{background:var(--raise);border-color:var(--edge)}
+  button[disabled]:hover{background:var(--raise-low);border-color:var(--edge-low)}
   button.sm{height:24px;padding:0 9px;font-size:12px;border-radius:var(--r-sm)}
-  button.sm[disabled]{color:var(--mute)}
 
   /* Primary. The accent means exactly one thing: the next action, so only one
      of these is lit at a time (see the accent hand-off in the JS). */
   button.primary{background:var(--acc-btn-rest);color:var(--acc-ink);
-                 border-color:var(--acc-stroke);font-weight:600;
-                 border-radius:var(--r-md);box-shadow:none}
+                 border-color:var(--acc-stroke);font-weight:600;box-shadow:none}
   button.primary:hover{background:var(--acc);border-color:var(--acc-stroke)}
   button.primary:active{background:var(--acc-press);border-color:var(--acc-dis-edge);
                         transform:translateY(.5px)}
-  button.primary.sm{border-radius:var(--r-sm)}
   /* An accent-family button that is enabled but is NOT the next action reads
      as an ordinary neutral control. */
   button.accent:not(:disabled):not(.primary){
     background:var(--raise); color:var(--ink); border-color:var(--edge);
-    font-weight:400; box-shadow:var(--hi); border-radius:var(--r-md)}
+    font-weight:400; box-shadow:var(--hi)}
+  /* Radius is deliberately NOT restated in these three rules any more. It is the
+     base button's, so .sm keeps winning on size — an accent .sm button used to
+     be handed --r-md by specificity alone. */
   button.accent:disabled,button.primary:disabled{
     background:var(--acc-dis); border-color:var(--acc-dis-edge);
-    color:var(--acc-dis-ink); font-weight:600;
-    border-radius:var(--r-md); box-shadow:none; opacity:1}
+    color:var(--acc-dis-ink); font-weight:600; box-shadow:none; opacity:1}
+
+  /* ------------------------------------------------------------------
+     Render, while it is rendering: the button IS the progress bar.
+     The track is the disabled accent the button
+     already wears while it is busy; the fill is the lighter rest accent,
+     so the two are the same colour family one step apart and nothing new
+     enters the palette.
+
+     Two background layers rather than a child element: the label on this
+     button is written by several different code paths (Save / Render /
+     Saving… / a percentage), and a required child span would mean every
+     one of them has to maintain it — which is precisely the several-
+     writers-disagreeing defect this project has already shipped twice.
+     A custom property is one writer.
+
+     `background-clip: padding-box, border-box` is what makes the fill
+     "as high as the button minus the strokes": the fill layer is clipped
+     to the padding box, the track fills the border box behind it.
+
+     The spinner goes. It cannot be told apart from a stall — and in a
+     hidden pane it does not animate at all — where a percentage that
+     stops moving is a stall you can see.
+     ------------------------------------------------------------------
+     The name is `--fill`, NOT `--p`, and that is the whole of a regression
+     this shipped with in v0.33.0.
+
+     `@property` registers a custom property GLOBALLY, for every element on the
+     page — it is not scoped to the selector near it. `--p` was already in use:
+     the range sliders had been setting it to a unitless fraction (0.35) since
+     long before this button existed, and reading it back as
+     `calc(var(--p,0) * 100%)`.
+
+     Registering it as a `<percentage>` changed that everywhere at once. A
+     unitless 0.35 is invalid against that syntax, so it fell back to the
+     registered initial value `0%` — and the `0` fallback in `var(--p,0)` never
+     fired either, because a registered property ALWAYS has a value. The track
+     gradient computed to `calc(0% * 100%)`, which is invalid, so the whole
+     gradient was dropped and the Realism and Corner radius sliders simply
+     stopped being orange.
+
+     The rule: a name passed to @property is a page-wide type declaration.
+     Before registering one, check who else already uses that name — this is the
+     second time a page-wide fix here has caught unrelated components, after the
+     `[hidden]` rule. `ui-audit.js` now asserts the sliders are actually filled
+     with the accent, because nothing else in the project could see this.
+     ------------------------------------------------------------------ */
+  @property --fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
+  button.primary.progress,
+  button.primary.progress:hover,
+  button.primary.progress:active{
+    background-image:
+      linear-gradient(to right, var(--acc-btn-rest) var(--fill, 0%), transparent 0),
+      linear-gradient(var(--acc-dis), var(--acc-dis));
+    background-clip:padding-box,border-box;
+    border-color:var(--acc-dis-edge); color:var(--acc-ink);
+    font-weight:600; box-shadow:none; opacity:1;
+    transform:none; transition:--fill .45s linear}
 
   /* ------------------------------------------------------------------
      Chip (Figma 5:6). Selection is a raised neutral surface plus a lighter
@@ -235,13 +316,22 @@
      24px tall, which is exactly why +/- read as a different species from the
      buttons beside them. Only the corner radii and the shared middle border
      are special. */
+  /* ------------------------------------------------------------------
+     `hidden` must actually hide. THREE components have now needed this
+     patched one at a time — .cvbar, #outImg/#outVid, and the format
+     stepper — because ANY author rule that sets `display` beats the
+     browser's own [hidden]{display:none}, whatever its specificity.
+     Author styles win over the UA stylesheet by cascade origin, so
+     `display:inline-flex` on a class silently switches the attribute off.
+     Each instance shipped: the video one as a black panel under the
+     result (v0.30.1), this one as a Web/ProRes control sitting beside
+     Render for a still, where there is no format to choose.
+     `!important` is deliberate — it is the only thing that survives the
+     next component that styles `display` without thinking about it.
+     ------------------------------------------------------------------ */
+  [hidden]{display:none !important}
+
   .stepper{display:inline-flex;align-items:center}
-  /* A segmented control has to show which segment is on. `.sel` was only ever
-     styled for the thumbnail picker (.th.sel), so the web/ProRes pair rendered
-     with no selected state at all — reported 9 Sep 2026. Same step as the
-     device chips: selected sits on --raise-hi with the brighter border. */
-  .stepper button.sel{background:var(--raise-hi);border-color:var(--edge-hi);color:var(--ink)}
-  .stepper button.sel:hover{background:var(--raise-highest);border-color:var(--edge-hi)}
   .stepper button{border-radius:0}
   .stepper button:first-child{border-top-left-radius:var(--r-sm);border-bottom-left-radius:var(--r-sm)}
   .stepper button:last-child{border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
@@ -250,6 +340,41 @@
   .stepper button:hover,.stepper button:focus-visible{position:relative;z-index:1}
   /* The dock's stepper is Sm height but keeps 12px padding (Figma 8:31/8:33). */
   .dock-step button{padding:0 var(--s3)}
+
+  /* ------------------------------------------------------------------
+     Segmented control (Figma 84:177). NOT a stepper: a stepper is ordinary
+     buttons butted together, which is right for -/+ but wrong for a choice —
+     two adjacent buttons read as two actions, and the web/ProRes pair had been
+     borrowing the chip's selected step to say which one was on.
+     This is the component the design file actually specifies: a RECESSED track
+     with ONE raised thumb inside it. The selected option is the only thing at
+     button elevation, so the control reads as a single switch with a position
+     rather than as a pair.
+
+     Heights: the drawn thumb is 24px, which with 2px of track padding and a 1px
+     border makes the control 30px. Its neighbours in the top bar are 28px, and
+     a 2px mismatch in that row has already shipped once as a bug (v0.32.0, when
+     the stepper was 24px against 28px neighbours), so the thumb is 22px here so the track lands on 28px exactly. Everything else
+     — padding, gap, border, both radii — is as drawn.
+     ------------------------------------------------------------------ */
+  .seg{display:inline-flex;align-items:center;gap:2px;padding:2px;
+       background:var(--sunk);border:1px solid var(--edge);
+       border-radius:var(--r-md);transition:var(--t-all)}
+  .seg:hover{border-color:var(--edge-mid)}
+  .seg:active{border-color:var(--edge-mid)}
+  /* The track carries the border and the elevation, so a segment is a label
+     until it is selected: no border, no shadow, no lift on press. */
+  .seg button{height:22px;padding:0 11px;font-size:12px;border-radius:var(--r-sm);
+              background:transparent;border:0;box-shadow:none;color:var(--mute);
+              font-weight:400}
+  .seg button:hover{background:transparent;color:var(--ink)}
+  .seg button:active{background:transparent;transform:none}
+  /* The thumb. Its three surfaces are the Default button's own, which is the
+     point of the component: one raised thing, behaving like every other raised
+     thing on the page. */
+  .seg button.sel{background:var(--raise);color:var(--ink);font-weight:600}
+  .seg button.sel:hover{background:var(--raise-mid)}
+  .seg button.sel:active{background:var(--raise-low);transform:none}
   /* Input chip (Figma 5:14 / 5:20). Surface and shadow are declared here rather
    than inherited from the base button rule, so the filled state is explicit and
    the .is-empty override below has something definite to override.
@@ -367,22 +492,27 @@
          -webkit-backdrop-filter:blur(5px);
          border-radius:var(--r-lg);box-shadow:var(--shadow)}
   .cvbar-actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:nowrap}
+  /* The scrubber needs a floor, or the bar "fits" by crushing it. Moving the
+     format control out stopped the bar overflowing at 742px — and the space it
+     freed went to the other controls while the slider collapsed to FOUR pixels,
+     measured. The bar may scroll (it has overflow-x:auto by design); the one
+     control that is useless when small must not be the one that gives way. */
+  #vframe{min-width:140px;flex:1 1 180px}
   .cvbar{white-space:nowrap}
   /* `hidden` is a UA display:none, which any explicit display beats — and
      .cvbar sets display:flex. Without this the bar stays visible while the
      photo is chosen but the screenshot is not, offering corners to fit
      nothing. */
-  .cvbar[hidden]{display:none}
-  /* Render spinner. A determinate percentage was the first version and it read
-     as busier than the work felt; a single moving thing says "still going"
-     without asking to be read. prefers-reduced-motion gets a static ring —
-     the button's label already carries the meaning. */
-  .spin{display:inline-block;width:12px;height:12px;margin-left:8px;
-        vertical-align:-1px;border:2px solid currentColor;border-radius:50%;
-        border-right-color:transparent;opacity:.9;
-        animation:spin .7s linear infinite}
-  @keyframes spin{to{transform:rotate(360deg)}}
-  @media (prefers-reduced-motion:reduce){ .spin{animation:none} }
+  /* The render spinner was HERE, and it is worth writing down why it is not.
+     v0.19.0 replaced a determinate percentage with it, reasoning that the
+     number "read as busier than the work felt". That judgement was made
+     against a percentage that never moved: the poll feeding it had been
+     broken since v0.18.0 (it POSTed to a GET-only route and swallowed the
+     error), which was only found on 11 Sep. A number that never updates does
+     read as noise — but so would any number, and the conclusion did not
+     belong to percentages.
+     The button is the progress bar now (see button.primary.progress above).
+     A DECISION MADE AGAINST A BROKEN MEASUREMENT IS NOT A DECISION. */
 
   /* Preview popover: the composite at whatever size fits, on the sunk surface
      so the image edge is unambiguous against the panel. */
@@ -457,7 +587,28 @@
 
   #outPane{display:grid}
   #outWrap{overflow:auto;background:var(--well);display:grid;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
-  #outImg{display:block;margin:auto}
+  #outImg,#outVid{display:block;margin:auto}
+  /* The live layer stacks the clip on the photo. `position:relative` on the
+     wrapper and `transform-origin:0 0` on the video are what make the matrix3d
+     below map the video's own pixel rectangle onto the quad — change either and
+     the maths silently refers to a different origin. */
+  #liveWrap{position:relative;margin:auto;line-height:0}
+  #liveWrap img{display:block;width:100%}
+  #liveVid{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
+  /* Emissive, approximated: `screen` is 1-(1-a)(1-b) — the screen's own light
+     PLUS the glass under it, which is the same idea as the real blend and the
+     reason a true-black UI stops reading as a hole. It is NOT the same maths as
+     compose()'s emissive, and the page says so. */
+  #liveVid.emissive{mix-blend-mode:screen}
+  /* An icon button is square and centres its glyph; everything else about it —
+     height, border, the raise ladder — stays whatever .sm already is, so the bar
+     keeps one button shape. */
+  /* `flex:none` and a min-width, not just a width: the bar is a nowrap flex row
+     that overflows at narrow widths, and a flex item with a width will happily
+     shrink to its content. Measured at 742px before this: the button was 13px
+     wide — the glyph and its border — which is a target nobody can hit. */
+  .sm.icon{display:inline-flex;align-items:center;justify-content:center;
+           flex:none;width:28px;min-width:28px;padding:0}
   .empty{color:var(--mute);font-size:12px;padding:24px;text-align:center;align-self:center;justify-self:center;max-width:320px}
 
   .rail{min-width:0;overflow:auto;padding:0;display:grid;align-content:start;background:var(--card)}
@@ -752,9 +903,21 @@
       </div>
     </div>
     <span class="spacer"></span>
+    <!-- Order is the order of the work: choose the format, render, then send it.
+         The format was in the Result pane's clip bar, which is where you judge a
+         fit rather than where you decide what gets written — and it was the
+         fifth control in a bar that overflows at 742px, squeezing the frame
+         scrubber to nothing. It is a render setting, so it sits with Render.
+
+         The segmented control stays segmented: two mutually exclusive options of
+         equal weight, both readable without a click. It carries no accent, so
+         the one-accent-on-screen rule is untouched. -->
     <div class="tb-actions">
-      <button id="imp" class="accent" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
+      <span class="seg" id="fmt" role="radiogroup" aria-label="Output format" hidden>
+        <button class="sel" data-preset="web" role="radio" aria-checked="true" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button data-preset="prores" role="radio" aria-checked="false" title="ProRes 422 HQ — bigger file, no chroma subsampling. For a case study or further editing.">ProRes</button>
+      </span>
       <button id="save" class="accent" disabled>Preview first</button>
+      <button id="imp" class="accent" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
     </div>
   </header>
 
@@ -807,20 +970,37 @@
         <span class="spacer"></span>
         <span class="sm" style="color:var(--mute)">shares zoom &amp; pan</span>
       </div>
-      <div id="outWrap"><span class="empty" id="outEmpty">The composite appears here and updates as you drag.</span><img id="outImg" alt="" hidden></div>
+      <div id="outWrap"><span class="empty" id="outEmpty">The composite appears here and updates as you drag.</span><img id="outImg" alt="" hidden><video id="outVid" hidden loop muted playsinline controls></video><!--
+        The live layer: the PHOTOGRAPH with the source clip warped onto the
+        fitted quad by the browser. Not the composite — the composite already
+        has a frame burned into it, so playing over that would show two screens.
+      --><div id="liveWrap" hidden><img id="liveBg" alt=""><video id="liveVid" loop muted playsinline></video></div></div>
       <!-- Video controls. Hidden entirely for a still source: a scrubber over a
            screenshot is a control that can only confuse. The fit itself is
            unchanged — you match the edges on one frame and every frame gets the
            same geometry, because the photo does not move. -->
       <div class="cvbar" id="vidbar" hidden>
+        <!-- What is left in this bar is only what the RESULT pane is for:
+             which moment of the clip you are looking at, and the two ways of
+             looking at it. The output format left for the top bar, beside
+             Render, because deciding how a file is written is not judging a
+             fit — and as the fifth control here it was squeezing the scrubber
+             to nothing at 742px. -->
         <span class="sm" style="color:var(--mute)">Fit on frame</span>
         <span class="cvbar-actions">
           <input type="range" id="vframe" min="0" max="0" value="0" step="1"
                  aria-label="Which frame of the clip to match the edges on">
           <span class="sm" id="vframeLbl" style="color:var(--mute);min-width:9ch">0</span>
-          <span class="stepper" role="radiogroup" aria-label="Output format">
-            <button class="sm sel" data-preset="web" role="radio" aria-checked="true" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button class="sm" data-preset="prores" role="radio" aria-checked="false" title="ProRes 422 HQ — bigger file, no chroma subsampling. For a case study or further editing.">ProRes</button>
-          </span>
+          <!-- Viewing controls sit with the scrubber, which is the other viewing
+               control; the format stepper is about the OUTPUT and stays at the
+               end. Icon-only, so each carries an aria-label — a title alone
+               names it for a mouse and not for a screen reader. -->
+          <button class="sm icon" id="playlive" aria-label="Play the clip on the photo"
+                  title="Play the clip on the photo, right now. The browser applies the same four corners and corner radius, and approximates emissive with screen blending; the colour grade and grain are not in this view.">
+            <svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true" focusable="false"><path d="M3 1.5 10 6 3 10.5Z" fill="currentColor"/></svg>
+          </button>
+          <button class="sm" id="playclip"
+                  title="Composite a few seconds from the fitted frame through the real pipeline and play that. Slower — it is a render — but it is the only view with the grade, the grain and the true emissive blend.">Preview</button>
         </span>
       </div>
     </section>
@@ -1140,7 +1320,12 @@ const api = async (p, body, raw) => {
   const j = await r.json(); if (!r.ok) throw new Error(j.error || r.statusText); return j;
 };
 const fileURL = p => '/file?path=' + encodeURIComponent(p);
-const st = {photo:null, shot:null, corners:null, frac:0, type:null, preset:null, measured:null, presets:[]};
+const st = {photo:null, shot:null, corners:null, frac:0, type:null, preset:null, measured:null,
+            // Where the quad on screen came from: 'detected' | 'remembered' | 'restored'
+            // | 'default'. The tool's contract is that it never presents a guess as a
+            // fact, and each of those is a different strength of claim, so the status
+            // line has to be able to say which one is on the canvas.
+            remembered:null, quadFrom:null, presets:[]};
 const remember = (k,v) => { try{ localStorage.setItem('sg.'+k, v); }catch(e){} };
 const recall = (k,d) => { try{ const v = localStorage.getItem('sg.'+k); return v===null?d:v; }catch(e){ return d; } };
 
@@ -1192,6 +1377,68 @@ function casedText(c, text, x, y, color){
   c.restore();
 }
 
+/* ===== a saved fit, dropped back in =====================================
+   The corners are the expensive part of this job and they belong to the
+   photograph, so a fit written beside a mockup is worth carrying between runs:
+   the same scene with next week's UI, a re-export the automatic memory cannot
+   recognise (it keys on pixels, and a re-export changes them), or someone
+   else's machine entirely.
+
+   No file dialog is involved and none is needed. The file sits in the folder
+   the user already chose, Finder finds it, and it arrives here the same way a
+   photograph does. The drop is on the DOCUMENT rather than a zone, because a
+   fit is not a third source — it is an instruction about the photo already
+   loaded, and hunting for the right rectangle to aim at would be worse than
+   pasting a path.
+
+   The page reads the bytes and the SERVER judges them: whether this is the
+   photograph the fit was made for is a question only the side holding the
+   pixels can answer. */
+async function loadFitFile(file){
+  const s = $('#detSt');
+  try {
+    const text = await file.text();
+    s.className = 'status busy'; s.textContent = 'Reading that fit…';
+    const r = await api('/api/fit', {fit: JSON.parse(text)});
+    st.corners = r.corners.map(c => c.slice());
+    st.measured = null;
+    st.quadFrom = 'file';
+    if (r.device) setType(r.device);
+    else if (!st.type) setType('phone');
+    if (r.radius_frac != null) setFrac(r.radius_frac, 'from the fit you loaded');
+    else applyPreset();
+    // 'exact' and 'same-size' are the cases where the corners are used as they
+    // were saved; 'scaled' and 'reshaped' moved them, and 'reshaped' means the
+    // photograph is a different SHAPE, which is where a plausible-looking wrong
+    // answer comes from. Only the first is stated as a fact.
+    s.className = 'status ' + (r.match === 'exact' ? 'ok' : 'warn');
+    s.textContent = r.match === 'exact' ? `Fit loaded from ${file.name}`
+                  : r.match === 'same-size' ? 'Fit loaded — same size, different pixels'
+                  : r.match === 'reshaped' ? 'Fit loaded and STRETCHED — check every corner'
+                  : 'Fit loaded and scaled — check a corner';
+    s.title = r.message || '';
+    toast(r.match === 'exact' ? 'ok' : 'info', r.message || 'Fit loaded.',
+          { ms: 9000, dismissible: true });
+    pick = {kind:'edge', i:0};
+    draw(); drawStrip(); autoPreview();
+  } catch (e) {
+    s.className = 'status warn'; s.textContent = 'That fit could not be used';
+    s.title = e.message || '';
+    toast('err', 'Could not load that fit: ' + (e.message || e));
+  }
+}
+// Capture phase, so the per-role drop zones never see a fit file and try to
+// decode it as an image.
+addEventListener('dragover', e => {
+  if ([...(e.dataTransfer?.items || [])].some(i => i.kind === 'file')) e.preventDefault();
+}, true);
+addEventListener('drop', e => {
+  const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
+  if (!f || !/\.json$/i.test(f.name)) return;      // not ours: let the zones have it
+  e.preventDefault(); e.stopPropagation();
+  loadFitFile(f);
+}, true);
+
 /* ===== pickers (popovers over the canvas) ===== */
 async function loadRecent(){
   const {items} = await api('/api/recent?days=14&limit=40');
@@ -1222,7 +1469,11 @@ function setChosen(role, path, size, el, meta){
   chip.querySelector('.nm').textContent = `${path.split('/').pop()} · ${size[0]}×${size[1]}`
     + (meta && meta.video ? ` · ${meta.frames} frames @ ${Math.round(meta.fps)}fps` : '');
   $('#sw'+n).style.background = `center/cover no-repeat url("${fileURL(thumb)}")`;
-  if (role==='photo'){ st.photo = path; st.corners = null; }
+  // A fit the server recognised from this photograph's own pixels. Held
+  // rather than applied here: the quad only means anything once there is a
+  // screenshot to put inside it, which is what maybeStart() waits for.
+  if (role==='photo'){ st.photo = path; st.corners = null;
+    st.remembered = (meta && meta.remembered) || null; }
   else { st.shot = path; st.video = meta && meta.video ? meta : null; syncVideoUI(); }
   closePop();
   maybeStart();
@@ -1389,12 +1640,36 @@ async function maybeStart(){
       // something. No quad yet — there is nothing to fit into it.
       draw();
       $('#cvbar').hidden = true;
-      $('#detSt').className = 'status';
-      $('#detSt').textContent = 'Now choose the screenshot to place on the screen.';
+      $('#detSt').className = 'status' + (st.remembered ? ' ok' : '');
+      // Naming it here is the whole point: this is the first moment the page
+      // knows, and a feature nobody notices is a feature that does not exist.
+      $('#detSt').textContent = st.remembered
+        ? 'Your saved fit for this photo will be used — now choose the screenshot.'
+        : 'Now choose the screenshot to place on the screen.';
       return;
     }
     $('#cvbar').hidden = false;
-    if (!st.corners) detect(); else { draw(); drawStrip(); }
+    if (st.corners){
+      draw(); drawStrip();
+      // A reload arrives here with the session's corners already in hand, and
+      // the only thing on the status line is the "now choose the screenshot"
+      // text from the photo-only step above — a message about a step already
+      // done, and on this path it also claimed the SAVED fit was in use when
+      // the corners on screen are the ones from this session. Every other route
+      // to a quad states itself at the moment it acts; this one had nobody.
+      if (st.quadFrom === 'restored'){
+        const s = $('#detSt'); s.className = 'status ok';
+        s.textContent = 'Corners restored from this session — drag any edge to adjust';
+        // The pill is ~200px at 742px wide and every status this page sets is
+        // longer than that (measured: 278-426px against 197-207 available), so
+        // the full sentence lives on hover and the first three words have to
+        // carry the meaning on their own. Same shape as the abstain message.
+        s.title = 'These are the corners this session already had — a reload does not '
+                + 'throw away work. Press Re-detect or Reset to start over.';
+      }
+    }
+    else if (st.remembered) applyRemembered();
+    else detect();
   };
   img.src = fileURL(st.photo);
 }
@@ -1561,7 +1836,7 @@ async function pointAt(x, y){
   try {
     const r = await api('/api/detect', {click: [x, y]});
     if (r.found){
-      st.corners = r.corners; st.measured = r.corner_radius;
+      st.corners = r.corners; st.measured = r.corner_radius; st.quadFrom = 'detected';
       s.className = 'status ok';
       s.textContent = `Screen found from your click (${r.method})`;
       if (!st.type) setType(r.type_guess || 'phone');
@@ -1591,7 +1866,7 @@ async function detect(){
   const s = $('#detSt'); s.className='status busy'; s.textContent = 'Detecting…';
   const r = await api('/api/detect', {});
   if (r.found){
-    st.corners = r.corners; st.measured = r.corner_radius;
+    st.corners = r.corners; st.measured = r.corner_radius; st.quadFrom = 'detected';
     const corroborated = r.confidence === 'corroborated';
     s.className = 'status ' + (corroborated ? 'ok' : 'warn');
     s.textContent = corroborated ? `Both detectors agree (${r.method})`
@@ -1600,7 +1875,7 @@ async function detect(){
     if (r.corner_radius && r.corner_radius.confident){ setFrac(r.corner_radius.frac_of_width, 'measured from the photo'); }
     else { applyPreset(); $('#radSt').textContent = 'Radius not measurable here — using the device preset.'; }
   } else {
-    st.corners = defaultQuad();
+    st.corners = defaultQuad(); st.quadFrom = 'default';
     s.className='status warn';
     // Naming the control is the whole fix. The page knows the detector just
     // failed, which is exactly the moment "Point at screen" is worth doing —
@@ -1617,6 +1892,40 @@ async function detect(){
   draw(); drawStrip();
   autoPreview();   // if the compare pane is open, fill it straight away
 }
+/* The third source of a starting quad, beside detection and the default
+   rectangle — and the strongest of the three, so it says so.
+
+   It is not a guess being dressed up: the key is a hash of the photograph's
+   decoded pixels, so a hit means THIS image, not a similar one, and the corners
+   are the ones that produced a saved composite. Every correction path still
+   applies — Re-detect, Reset and dragging all work exactly as before. */
+function applyRemembered(){
+  const r = st.remembered;
+  st.corners = r.corners.map(c => c.slice());
+  st.measured = null;                      // nothing was measured on this run
+  st.quadFrom = 'remembered';
+  if (r.device) setType(r.device);
+  else if (!st.type) setType('phone');
+  // setType rebuilds the preset list but does not touch the radius, so the
+  // remembered fraction is applied after it and survives.
+  if (r.radius_frac != null) setFrac(r.radius_frac, 'remembered from your last fit');
+  else applyPreset();
+  const s = $('#detSt'); s.className = 'status ok';
+  s.textContent = 'Your saved fit for this photo' + (r.saved ? ' — ' + savedWhen(r.saved) : '');
+  s.title = 'These four corners come from a composite you saved from this exact '
+          + 'photograph. Drag any edge to adjust, or press Re-detect to start over.';
+  pick = {kind:'edge', i:0};
+  draw(); drawStrip(); autoPreview();
+}
+/* Dates on this page are relative: "3 days ago" answers "is this still the fit I
+   mean?" without the reader doing arithmetic against today. */
+function savedWhen(t){
+  const days = Math.floor((Date.now()/1000 - t) / 86400);
+  if (days <= 0) return 'saved today';
+  if (days === 1) return 'saved yesterday';
+  if (days < 30) return `saved ${days} days ago`;
+  return 'saved ' + new Date(t*1000).toLocaleDateString();
+}
 // One definition of "a sane starting position", used by the abstention path and
 // by Reset. Deliberately a plain centred rectangle: it claims nothing about
 // where the screen is, and every handle is on the picture where it can be
@@ -1628,7 +1937,7 @@ function defaultQuad(){
 $('#redetect').onclick = detect;
 $('#resetquad').onclick = () => {
   if (!img.naturalWidth) return;
-  st.corners = defaultQuad();
+  st.corners = defaultQuad(); st.quadFrom = 'default';
   const s = $('#detSt'); s.className='status warn';
   s.textContent = 'Edges reset — place them on the screen';
   s.title = '';
@@ -1638,6 +1947,10 @@ $('#resetquad').onclick = () => {
 };
 
 function draw(){
+  // The clip follows the quad while it is being dragged: the live layer IS the
+  // fit, so leaving it on the old corners would make the two panes disagree
+  // mid-drag — which is the one thing the side-by-side exists to prevent.
+  if (!$('#liveWrap').hidden) placeLiveVideo();
   ctx.clearRect(0,0,cv.width,cv.height);
   if (!img.naturalWidth) return;
   ctx.drawImage(img, 0,0, cv.width, cv.height);
@@ -1996,10 +2309,18 @@ function setType(t){
   st.type = t;
   document.querySelectorAll('#types .chip').forEach(c => c.classList.toggle('on', c.dataset.t===t));
   const sel = $('#preset'); sel.innerHTML='';
-  st.presets.filter(p=>p.type===t).forEach(p => { const o=document.createElement('option'); o.value=p.id; o.textContent=`${p.label} (${(p.frac*100).toFixed(1)}%)`; sel.appendChild(o); });
+  st.presets.filter(p=>p.type===t).forEach(p => { const o=document.createElement('option'); o.value=p.id;
+    o.textContent=`${p.label} (${(p.frac*100).toFixed(1)}%)`;
+    sel.appendChild(o); });
   st.preset = sel.value;
 }
-function applyPreset(){ const p = st.presets.find(p=>p.id===$('#preset').value); if (p) setFrac(p.frac, 'preset: '+p.label); }
+/* The caption gets the preset's FULL membership, not the short label the
+   dropdown shows. The label is cut to what a closed <select> can display, and a
+   `title` on an <option> is not reliably rendered in a native macOS popup — so
+   the caption is the only place the exact model list can actually be read.
+   It says where the number came from too (radius pt over width pt), because a
+   preset is a claim about a device and a claim should show its working. */
+function applyPreset(){ const p = st.presets.find(p=>p.id===$('#preset').value); if (p) setFrac(p.frac, 'preset: '+(p.full || p.label)); }
 function setFrac(f, why){ st.frac = f; $('#radius').value = f; syncSlider();
   $('#radSt').textContent = `${(f*100).toFixed(1)}% of screen width — ${why}`; markStale(); }
 $('#preset').onchange = () => { applyPreset(); autoPreview(); };
@@ -2019,6 +2340,16 @@ function setRadiusOn(on){
   setSwitch($('#radBtn'), on);
 }
 $('#radBtn').onclick = () => { setRadiusOn(!radiusOn); autoPreview(); };
+/* Corner smoothing follows the SELECTED PRESET, not the radius. A measured
+   radius is still a radius on that device, and the device is what has a shape:
+   an iPhone's corners are a continuous curve whether or not we measured how big
+   they are. So this reads the preset dropdown even when st.measured is in use.
+   Returns 0 for Android, the square entries, and anything with no preset at
+   all — 0 is a circular arc, which is what everything did before. */
+function smoothingValue(){
+  const p = st.presets.find(p => p.id === $('#preset').value);
+  return (p && p.smoothing) || 0;
+}
 function syncSlider(){ const r=$('#radius'); r.style.setProperty('--p', (r.value - r.min)/(r.max - r.min)); }
 
 /* ===== preview / compare / save ===== */
@@ -2048,9 +2379,23 @@ function markStale(){
   $('#imp').classList.remove('primary');
 }
 function syncOut(){
-  const im = $('#outImg');
-  if (!im.hidden && outNat){
-    im.style.width = Math.round(img.naturalWidth * scale) + 'px';
+  // The live layer is a photo plus a transformed video, so it re-places rather
+  // than being resized: the transform is computed FROM the zoom, and a stale
+  // matrix puts the clip somewhere the fit is not.
+  if (!$('#liveWrap').hidden){
+    placeLiveVideo();
+    const a = $('#scroller'), b = $('#outWrap');
+    b.scrollLeft = a.scrollLeft; b.scrollTop = a.scrollTop;
+    return;
+  }
+  // Whichever of the two is showing gets the SAME treatment: the pane exists to
+  // be compared with the fit beside it, and a clip that ignored the zoom would
+  // break the pairing the moment you looked closely at a corner. The proxy is
+  // smaller than the photo, so it is sized by the PHOTO's width — the composite
+  // covers the same frame either way.
+  const el = $('#outImg').hidden ? ($('#outVid').hidden ? null : $('#outVid')) : $('#outImg');
+  if (el && (outNat || el.id === 'outVid')){
+    el.style.width = Math.round(img.naturalWidth * scale) + 'px';
     const a = $('#scroller'), b = $('#outWrap');
     b.scrollLeft = a.scrollLeft; b.scrollTop = a.scrollTop;
   }
@@ -2062,24 +2407,261 @@ function autoPreview(){
   // Judge while you fit: with the compare pane open the composite re-renders
   // after each correction (compose() measures 0.06s server-side), so Preview
   // stops being a round trip.
+  //
+  // The live layer answers to the same settings — emissive and the corner
+  // radius both change what it draws — and it is free to update, so it does it
+  // immediately rather than on the debounce.
+  if (!$('#liveWrap').hidden) placeLiveVideo();
   clearTimeout(autoTimer);
   autoTimer = setTimeout(renderPreview, 350);
 }
+/* The Result pane holds either the still composite or a played clip, never
+   both. Several writers disagreeing about which is visible is a defect this
+   project has already shipped once: one function, and everything else calls
+   it. */
+function showResult(what){
+  $('#outImg').hidden = what !== 'still';
+  const v = $('#outVid');
+  if (what !== 'clip' && !v.hidden){ try { v.pause(); } catch(e){} }
+  v.hidden = what !== 'clip';
+  const live = $('#liveWrap');
+  if (what !== 'live' && !live.hidden){ try { $('#liveVid').pause(); } catch(e){} }
+  live.hidden = what !== 'live';
+  $('#outEmpty').style.display = (what === 'empty') ? '' : 'none';
+}
+
+/* ===== live playback: the clip on the photo, warped by the browser =========
+
+   The fit is a homography, and a homography is exactly what CSS `matrix3d`
+   applies — so the browser can put a moving video on the device's screen with
+   no compositing at all. Instant, where the rendered proxy costs seconds.
+
+   What it can and cannot show, stated because the page states it too:
+     geometry       — exact, the same four corners the render uses
+     corner radius  — applied in the video's own pixel space, before the warp,
+                      which is where compose() applies it
+     emissive       — APPROXIMATED with `screen` blending. Same idea (the
+                      screen's light plus the glass beneath it), not the same
+                      arithmetic as compose()'s emissive.
+     grade, grain   — not applied. Those are per-frame Python and are the reason
+                      the rendered preview costs what it costs.
+
+   So this answers "is it in the right place and does the motion read", and the
+   rendered preview answers "does it look real". Two questions, two controls. */
+
+/* Solve the 8 unknowns of the projective transform taking the video's own
+   rectangle to the quad. Plain Gaussian elimination on an 8x8 — no library, and
+   deterministic, which matters because everything else here is. */
+function solveHomography(src, dst){
+  const A = [], b = [];
+  for (let i = 0; i < 4; i++){
+    const [x, y] = src[i], [u, v] = dst[i];
+    A.push([x, y, 1, 0, 0, 0, -u * x, -u * y]); b.push(u);
+    A.push([0, 0, 0, x, y, 1, -v * x, -v * y]); b.push(v);
+  }
+  for (let c = 0; c < 8; c++){
+    let p = c;
+    for (let r = c + 1; r < 8; r++) if (Math.abs(A[r][c]) > Math.abs(A[p][c])) p = r;
+    if (Math.abs(A[p][c]) < 1e-12) return null;          // degenerate quad
+    [A[c], A[p]] = [A[p], A[c]]; [b[c], b[p]] = [b[p], b[c]];
+    for (let r = 0; r < 8; r++){
+      if (r === c) continue;
+      const f = A[r][c] / A[c][c];
+      if (!f) continue;
+      for (let k = c; k < 8; k++) A[r][k] -= f * A[c][k];
+      b[r] -= f * b[c];
+    }
+  }
+  const h = b.map((v, i) => v / A[i][i]);
+  return [h[0], h[1], h[2], h[3], h[4], h[5], h[6], h[7], 1];
+}
+
+/* Place the clip on the quad at the pane's current zoom. Called on every zoom,
+   pan and corner move, so it does arithmetic and touches two style properties —
+   nothing that reads layout back. */
+function placeLiveVideo(){
+  const wrap = $('#liveWrap'), v = $('#liveVid');
+  if (wrap.hidden || !st.corners || !v.videoWidth) return;
+  const W = v.videoWidth, H = v.videoHeight;
+  const dst = st.corners.map(([x, y]) => [x * scale, y * scale]);
+  const h = solveHomography([[0, 0], [W, 0], [W, H], [0, H]], dst);
+  if (!h) return;
+  v.style.width = W + 'px'; v.style.height = H + 'px';
+  // Column-major, and the third row/column is identity: this is a 2D projective
+  // transform expressed in a 4x4, not a 3D rotation.
+  v.style.transform = `matrix3d(${h[0]},${h[3]},0,${h[6]},`
+                    + `${h[1]},${h[4]},0,${h[7]},`
+                    + `0,0,1,0,`
+                    + `${h[2]},${h[5]},0,${h[8]})`;
+  // The radius is a fraction of the SCREENSHOT's width and is applied before the
+  // warp — same as compose(), which rounds the screenshot and then warps it.
+  v.style.borderRadius = (radiusValue() * W) + 'px';
+  v.classList.toggle('emissive', emisValue() !== null);
+  const bg = $('#liveBg');
+  bg.style.width = Math.round(img.naturalWidth * scale) + 'px';
+  wrap.style.width = bg.style.width;
+}
+
+/* Play and Stop are the same control, because they are the same question asked
+   twice: is it running. Two buttons would leave one of them meaningless at all
+   times. */
+const PLAY_ICON = '<svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true" focusable="false"><path d="M3 1.5 10 6 3 10.5Z" fill="currentColor"/></svg>';
+const STOP_ICON = '<svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true" focusable="false"><rect x="2.5" y="2.5" width="7" height="7" rx="1" fill="currentColor"/></svg>';
+function setPlayIcon(playing){
+  const b = $('#playlive');
+  b.innerHTML = playing ? STOP_ICON : PLAY_ICON;
+  // The icon is the only label this button has, so the accessible name has to
+  // carry the state as well — a screen reader on a square that still says
+  // "Play" is being told the opposite of what is happening.
+  b.setAttribute('aria-label', playing ? 'Stop and return to the fitted frame'
+                                       : 'Play the clip on the photo');
+}
+
+/* Stopping returns to the FITTED frame, not to wherever playback happened to
+   be. That frame is the one the edges were matched against and the one the
+   light match is bound from, so it is the only frame the fit is actually a
+   statement about — leaving a random one on screen would invite judging the
+   quad against something the render never uses. */
+function stopLive(){
+  const v = $('#liveVid');
+  try { v.pause(); } catch(e){}
+  const fps = st.video && st.video.fps;
+  if (fps) v.currentTime = (+$('#vframe').value || 0) / fps;
+  setPlayIcon(false);
+  const s = $('#outSt');
+  s.textContent = `Stopped on frame ${+$('#vframe').value || 0} — the frame the edges are matched against`;
+}
+
+async function playLive(){
+  if (!(st.photo && st.shot && st.corners && st.video)) return;
+  if (!$('#liveWrap').hidden && !$('#liveVid').paused) return stopLive();
+  const v = $('#liveVid'), s = $('#outSt');
+  $('#liveBg').src = fileURL(st.photo);
+  if (!v.src || v.dataset.src !== st.shot){
+    v.dataset.src = st.shot;
+    v.src = fileURL(st.shot);
+  }
+  showResult('live');
+  await new Promise(r => {
+    if (v.videoWidth) return r();
+    v.onloadedmetadata = r;
+    setTimeout(r, 4000);                 // never hang the page on a bad decode
+  });
+  placeLiveVideo();
+  v.currentTime = st.video && st.video.fps ? (+$('#vframe').value / st.video.fps) : 0;
+  v.play().catch(() => {});              // a blocked autoplay is not an error
+  setPlayIcon(true);
+  // The video can also end, pause or be stopped by its own controls, and the
+  // icon has to follow that rather than only the button press. One writer for
+  // the icon, driven by the element's real state.
+  v.onpause = () => setPlayIcon(false);
+  v.onplay  = () => setPlayIcon(true);
+  // Never claim more than it is. The honesty contract applies to a preview as
+  // much as to a detection: this is geometry plus a blend mode, and a person
+  // judging colour from it would be judging the wrong thing.
+  s.textContent = 'Playing live — geometry'
+    + (emisValue() !== null ? ' + emissive (approximated)' : '')
+    + ', no grade or grain. Use Render preview for the real look.';
+  s.title = 'The browser applies the same four corners and the corner radius, and '
+          + 'approximates emissive with screen blending. The colour grade and the '
+          + 'grain are computed per frame in Python and are not in this view.';
+}
+
+
+
+
+/* Watch the composite move before committing to a full render.
+
+   A proxy, not a shortcut: the same pipeline at PREVIEW_WIDTH, so the grade,
+   grain and emissive blend are all applied and what is watched is what will
+   render. The alternative — a <video> under a CSS perspective transform — would
+   show the geometry moving and none of the three, which is to say none of what
+   this is for. Measured on a 21s clip: 18s at 720px against 57s full size. */
+let building = false;
+async function playClip(){
+  const btn = $('#playclip'), s = $('#outSt');
+  btn.disabled = true; btn.textContent = 'Building…';
+  // Dragging an edge during a build re-renders the still, and renderPreview
+  // owns this same status line — so without this the frame counter is wiped by
+  // a preview the user did not ask for, and the wait goes silent again.
+  building = true;
+  try{
+    await api('/api/preview_video', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(),
+                                     device: st.type, grade: gradeValue(),
+                                     reflection: emisValue(), fit_frame: +$('#vframe').value});
+  }catch(e){
+    building = false;
+    btn.disabled = false; btn.textContent = 'Play';
+    toast('err', 'Could not build the preview: ' + e.message); return;
+  }
+  const tick = setInterval(async () => {
+    // fetch, NOT api(): api's third argument is `raw` (headers + body for an
+    // upload), not options — so `{method:'GET'}` made this a POST with a null
+    // body, /api/render_status is GET-only, and every poll threw "no such
+    // route" into a catch that swallows it. Shipped since v0.18.0: a render
+    // that FINISHED left the button on "Rendering…" for ever, with no toast and
+    // Send to Claude never enabled. It looks exactly like a hung encode, which
+    // is why it was reported as "no progress" rather than as a broken poll.
+    let d; try { d = await (await fetch('/api/render_status')).json(); }
+    catch(e){ return; }
+    if (d.state === 'running'){
+      // The wait is real — tens of seconds on a long clip — so it counts frames
+      // rather than spinning. A number that stops moving is a stall you can see;
+      // a spinner is not, and in a hidden pane it does not even animate.
+      s.textContent = d.total ? `Building preview — ${d.done} / ${d.total} frames`
+                              : 'Building preview…';
+    } else if (d.state === 'done'){
+      clearInterval(tick); building = false;
+      btn.disabled = false; btn.textContent = 'Play';
+      const v = $('#outVid');
+      v.src = `${fileURL(d.output)}&t=${Date.now()}`;
+      showResult('clip'); syncOut();
+      v.play().catch(()=>{});         // a blocked autoplay is not an error
+      // Say it is a SEGMENT. A preview that silently showed six seconds of a
+      // forty-second clip would look like a broken render.
+      const secs = d.info && d.info.fps ? (d.done / d.info.fps) : 0;
+      const at = d.info && d.info.start_frame ? ` from frame ${d.info.start_frame}` : '';
+      s.textContent = `Preview · ${secs ? secs.toFixed(1) + 's' : d.done + ' frames'}${at}`
+                    + ` at ${(d.info && d.info.output_size || []).join('×')} — drag an edge for the still`;
+    } else if (d.state === 'error'){
+      clearInterval(tick); building = false;
+      btn.disabled = false; btn.textContent = 'Play';
+      s.textContent = 'Preview failed';
+      toast('err', 'Preview failed: ' + (d.message || 'unknown'));
+    }
+  }, 900);
+}
+$('#playclip').onclick = playClip;
+$('#playlive').onclick = playLive;
+
 async function renderPreview(){
   if (!(st.photo && st.shot && st.corners)) return;
-  const s = $('#outSt'); s.textContent = 'Rendering…';
+  syncPlayable();
+  const s = $('#outSt');
+  // The status line describes what the pane is SHOWING. The still keeps
+  // rendering behind a clip that is playing — that is deliberate, so switching
+  // back is instant — but it must not narrate over it. Twice now a status has
+  // been overwritten by a preview nobody was looking at.
+  const say = t => { if (!building && $('#liveWrap').hidden) s.textContent = t; };
+  say('Rendering…');
   try{
-    const r = await api('/api/preview', {corners: st.corners, radius_frac: radiusValue(), device: st.type, grade: gradeValue(), reflection: emisValue()});
+    const r = await api('/api/preview', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), device: st.type, grade: gradeValue(), reflection: emisValue()});
     const im = $('#outImg');
-    im.onload = () => { outNat = im.naturalWidth; im.hidden = false; $('#outEmpty').style.display='none'; syncOut(); };
+    im.onload = () => {
+      outNat = im.naturalWidth;
+      // autoPreview runs on every drag, and it must not yank the pane away from
+      // a clip that is playing. The still is still rendered and waiting behind.
+      if ($('#liveWrap').hidden) showResult('still');
+      syncOut();
+    };
     im.src = `${fileURL(r.path)}&t=${Date.now()}`;
-    s.textContent = `radius ${r.radius_px}px on the screenshot`;
+    say(`radius ${r.radius_px}px on the screenshot`);
     const b = $('#save'); b.disabled = false; b.textContent = saveLabel();
     b.classList.add('primary');            // Save is now the next action
     if (!previewHinted){ previewHinted = true;
       toast('info', 'Check the corners in Result, then <b>Save</b> — Save renders at full resolution.');
     }
-  }catch(e){ s.textContent = e.message; }
+  }catch(e){ say(e.message); }
 }
 function prettyDir(p){
   // ~ for home, and show the last two segments of a long path: the interesting
@@ -2106,11 +2688,30 @@ document.querySelectorAll('[data-preset]').forEach(btn => {
    is shown on, and what the primary button does. Everything else — the edge
    matching, the loupe, the compare view, the realism rail — is untouched,
    because the geometry does not care whether the pixels move. */
+function syncPlayable(){
+  const ok = !!(st.video && st.corners);
+  for (const id of ['#playclip', '#playlive']){
+    const b = $(id);
+    if (b) b.disabled = !ok;
+  }
+  // Dragging a corner while the clip plays should move the clip, not leave it
+  // behind on the old quad.
+  if (!$('#liveWrap').hidden) placeLiveVideo();
+}
 function syncVideoUI(){
   const v = st.video;
   $('#vidbar').hidden = !v;
+  // A still has no format to choose, so the control is not there at all — the
+  // same rule the clip bar already follows. It lives in the top bar now, so it
+  // has to be told; it used to be inside the bar being hidden.
+  $('#fmt').hidden = !v;
+  syncPlayable();
   const b = $('#save');
   if (v && v.ffmpeg === false){
+    // Live playback needs no ffmpeg — it is the browser drawing. Only the
+    // rendered preview does.
+    $('#playclip').disabled = true;
+    $('#playclip').title = 'A rendered preview means compositing, which needs ffmpeg.';
     // Say it now, not after the fit. The fitting still works — it is only the
     // encode that cannot run — so the page stays usable and the message names
     // the one thing to do.
@@ -2134,6 +2735,13 @@ $('#vframe').onchange = async () => {
   // uses, so what you match the edges against is the frame you chose.
   try{
     await api('/api/frame', {index: +$('#vframe').value});
+    // If the clip is on screen and paused, the scrubber is choosing what you
+    // are looking at — so move it there too, or the number and the picture
+    // disagree.
+    const lv = $('#liveVid');
+    if (!$('#liveWrap').hidden && lv.paused && st.video && st.video.fps){
+      lv.currentTime = (+$('#vframe').value || 0) / st.video.fps;
+    }
     // Only the composite changes. The chip keeps frame 0 on purpose — at that
     // size one frame looks like any other, so updating it would be movement
     // without meaning.
@@ -2141,32 +2749,69 @@ $('#vframe').onchange = async () => {
   }catch(e){ toast('err', 'Could not read that frame: ' + e.message); }
 };
 
+/* One writer for the render button's progress state, so the class and the
+   custom property can never disagree about whether a render is running. */
+function setRenderProgress(pct){
+  const b = $('#save');
+  if (pct === null){
+    b.classList.remove('progress');
+    b.style.removeProperty('--fill');
+    b.removeAttribute('aria-busy');
+    b.removeAttribute('role'); b.removeAttribute('aria-valuenow');
+    return;
+  }
+  const p = Math.max(0, Math.min(100, pct));
+  b.classList.add('progress');
+  b.style.setProperty('--fill', p.toFixed(1) + '%');
+  // The bar is a colour change, which a screen reader cannot see. The label
+  // carries the number and the element says it is a progress bar while it is
+  // one — otherwise this is an animation that only sighted users can read.
+  b.setAttribute('aria-busy', 'true');
+  b.setAttribute('role', 'progressbar');
+  b.setAttribute('aria-valuenow', String(Math.round(p)));
+  b.textContent = `Rendering ${Math.round(p)}%`;
+}
+
 async function renderVideo(){
   const b = $('#save');
   b.disabled = true;
-  b.innerHTML = 'Rendering<span class="spin" aria-hidden="true"></span>';
+  setRenderProgress(0);
   try{
-    await api('/api/render', {corners: st.corners, radius_frac: radiusValue(), device: st.type,
+    await api('/api/render', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), device: st.type,
                               grade: gradeValue(), reflection: emisValue(), preset, fit_frame: +$('#vframe').value});
-  }catch(e){ toast('err','Could not start the render: '+e.message); b.disabled=false; b.textContent = saveLabel(); return; }
+  }catch(e){
+    setRenderProgress(null);
+    toast('err','Could not start the render: '+e.message);
+    b.disabled=false; b.textContent = saveLabel(); return;
+  }
   // Poll rather than hold a request open: a clip is hundreds of frames and a
   // browser would time the request out long before the render finished.
   const tick = setInterval(async () => {
-    let d; try { d = await api('/api/render_status', null, {method:'GET'}); }
+    // fetch, NOT api(): api's third argument is `raw` (headers + body for an
+    // upload), not options — so `{method:'GET'}` made this a POST with a null
+    // body, /api/render_status is GET-only, and every poll threw "no such
+    // route" into a catch that swallows it. Shipped since v0.18.0: a render
+    // that FINISHED left the button on "Rendering…" for ever, with no toast and
+    // Send to Claude never enabled. It looks exactly like a hung encode, which
+    // is why it was reported as "no progress" rather than as a broken poll.
+    let d; try { d = await (await fetch('/api/render_status')).json(); }
     catch(e){ return; }
     if (d.state === 'running'){
-      // The button says what it is doing; the frame counter beside the
-      // scrubber carries the numbers, so the primary control stays calm.
-      b.innerHTML = 'Rendering<span class="spin" aria-hidden="true"></span>';
+      // The button IS the progress bar now. A spinner cannot be told apart
+      // from a stall; a percentage that stops moving can, and the fill gives
+      // the same information at a glance.
+      setRenderProgress(d.total ? (100 * d.done / d.total) : 0);
       if (d.total) $('#vframeLbl').textContent = `${d.done} / ${d.total} frames`;
     } else if (d.state === 'done'){
       clearInterval(tick);
+      setRenderProgress(null);
       b.textContent = saveLabel(); b.disabled = false; b.classList.remove('primary');
       $('#vframeLbl').textContent = `${$('#vframe').value} / ${$('#vframe').max}`;
       toast('ok', `Rendered <code>${(d.output||'').split('/').pop()}</code> · ${d.done} frames to <code>${prettyDir(st.outDir||'')}</code>`);
       const imp = $('#imp'); imp.disabled = false; imp.textContent = 'Send to Claude'; imp.classList.add('primary');
     } else if (d.state === 'error'){
       clearInterval(tick);
+      setRenderProgress(null);
       b.textContent = saveLabel(); b.disabled = false;
       $('#vframeLbl').textContent = `${$('#vframe').value} / ${$('#vframe').max}`;
       toast('err', 'Render failed: ' + (d.message || 'unknown'));
@@ -2178,12 +2823,17 @@ $('#save').onclick = async () => {
   if (st.video) return renderVideo();
   const b = $('#save'); b.textContent = 'Saving…'; b.disabled = true;
   try{
-    const r = await api('/api/save', {corners: st.corners, radius_frac: radiusValue(), device: st.type, grade: gradeValue(), reflection: emisValue()});
+    const r = await api('/api/save', {corners: st.corners, radius_frac: radiusValue(), smoothing: smoothingValue(), device: st.type, grade: gradeValue(), reflection: emisValue()});
     b.textContent = saveLabel();
     // The real destination, not a hardcoded one: --out-dir means saves usually
     // land in the project folder now, and telling the user "~/Desktop" when
     // they aren't there is how you lose a file.
-    toast('ok', `Saved <code>${r.output.split('/').pop()}</code> to <code>${prettyDir(st.outDir || '')}</code>`);
+    // Naming the fit file here is the whole reason it is discoverable: it is
+    // written silently beside the mockup, and a file nobody knows about is a
+    // file nobody drags back in.
+    toast('ok', `Saved <code>${r.output.split('/').pop()}</code> to <code>${prettyDir(st.outDir || '')}</code>`
+      + (r.fit_file ? ` · the fit is beside it as <code>${r.fit_file.split('/').pop()}</code> — drop that back on this page to reuse these corners` : ''),
+      { ms: 9000, dismissible: true });
     const imp = $('#imp');
     imp.disabled = false; imp.textContent = 'Send to Claude';
     // Hand the accent on: the file exists, so sending it is what is next.
@@ -2266,7 +2916,6 @@ $('#imp').onclick = async () => {
   // The server keeps the session; the page used to start blank on reload,
   // silently discarding a photo, a screenshot and any corner work.
   if (s.photo || s.screenshot){
-    if (s.corners) st.corners = s.corners;
     if (s.radius_frac) st.frac = s.radius_frac;
     if (s.device) st.type = s.device;
     for (const [role, path] of [['photo', s.photo], ['screenshot', s.screenshot]]){
@@ -2274,6 +2923,13 @@ $('#imp').onclick = async () => {
       try { const r = await api('/api/use', {role, path}); setChosen(role, r.path, r.size, null, r); }
       catch(e){ /* file moved since: leave that slot empty */ }
     }
+    // AFTER the loop, not before it: choosing a photo clears the quad, because
+    // in every other case the new photo has nothing to do with the old corners.
+    // On the restore path it is the SAME photo, so the assignment above was
+    // being wiped by the /api/use it preceded, and a reload silently re-detected
+    // over hand-placed edges. maybeStart's fit runs on the image's load event,
+    // which cannot fire before this line, so the value is in place by then.
+    if (s.corners){ st.corners = s.corners; st.quadFrom = 'restored'; }
     // Populate the radius dropdown on the restore path too. detect() only
     // calls setType when st.type is unset, so a restored session used to come
     // back with an empty preset list and a zeroed slider.