fix: first-run QA sweep of the single-container image (#413)

Fixes found by manually testing a fresh install end to end:

- auth: the must-change-password gate returned 403 on public routes
  including /api/v1/health, so every fresh install showed a false
  "Reconnecting to server" banner on the forced password change
  screen. Public routes are now exempt (they need no session at all).
  Adds the gate's first direct tests.
- multipart: @fastify/multipart's parts() iterator (9.4.0 and 10.0.0)
  ends on the request stream's "close", which on a reused keep-alive
  connection fires while an earlier part is still streaming to storage,
  silently dropping the parts behind it. The object eraser lost its
  mask file on every second POST per connection. Replaced with a
  busboy-driven iterator (lib/multipart-parts.ts) that ends on busboy's
  own "finish", installed for all routes via a preValidation hook;
  the tool-factory field-recovery workaround for the same bug is now
  unnecessary and removed.
- eraser: the mask canvas backing store is natural resolution, but
  "absolute inset-0" does not stretch replaced elements, so the
  canvas rendered at intrinsic size and the brush ring, strokes, and
  exported mask were all misscaled on photos larger than the viewport.
  The canvas now gets an explicit CSS box at the fitted size.
- compare slider: solid white divider with a dark halo so it stays
  visible over light images; still initialised at the painted region.
- tool page: the AI bundle install prompt now centers in the content
  area instead of hugging the top.
- api docs: disabled Scalar's cloud features (Ask AI, Generate MCP,
  Open API Client, dev toolbar), hid the "Powered by Scalar" footer
  link, and set the page title to "SnapOtter API Reference". The docs
  CSP blocks those cloud calls by design, so the buttons were dead UI.
- docker: embedded Redis comes from packages.redis.io pinned to the
  8.x major (was Debian's 7.0.15), matching the Compose stack and the
  documented claim. Build fails fast if the major ever drifts.
- docs: DOCKERHUB.md quick start now leads with the one-command docker
  run (matching the README) with Compose as the production path;
  README says embedded Postgres 17 + Redis 8.

Claude-Session: https://claude.ai/code/session_01XGB4pGvTvb7sUX4JN745U7

apps/web/src/components/common/before-after-slider.tsx

@@ -13,7 +13,7 @@ interface BeforeAfterSliderProps {
   beforeSize?: number;
   /** Processed file size in bytes. */
   afterSize?: number;
-  /** Initial divider position as a percentage (0–100). Defaults to 50. */
+  /** Initial divider position as a percentage (0-100). Defaults to 50. */
   initialPosition?: number;
   /** Optional CSS preview layers for the "after" panel (remove-bg effects). */
   bgPreview?: BgPreviewState | null;
@@ -213,11 +213,11 @@ export function BeforeAfterSlider({
         {/* Divider line */}
         {isMobile ? (
           <div
-            className="absolute inset-x-0 h-0.5 bg-white/80 pointer-events-none"
+            className="absolute inset-x-0 h-0.5 bg-white pointer-events-none shadow-[0_0_0_1px_rgba(0,0,0,0.4),0_0_6px_rgba(0,0,0,0.35)]"
             style={{ top: `${position}%`, transform: "translateY(-50%)" }}
           >
             {/* Handle grip */}
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white border-2 border-primary shadow-lg flex items-center justify-center pointer-events-none">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white border-2 border-primary shadow-[0_0_0_1px_rgba(0,0,0,0.25),0_4px_12px_rgba(0,0,0,0.35)] flex items-center justify-center pointer-events-none">
               <svg
                 width="14"
                 height="14"
@@ -245,11 +245,11 @@ export function BeforeAfterSlider({
           </div>
         ) : (
           <div
-            className="absolute top-0 bottom-0 w-0.5 bg-white/80 pointer-events-none"
+            className="absolute top-0 bottom-0 w-0.5 bg-white pointer-events-none shadow-[0_0_0_1px_rgba(0,0,0,0.4),0_0_6px_rgba(0,0,0,0.35)]"
             style={{ left: `${position}%`, transform: "translateX(-50%)" }}
           >
             {/* Handle grip */}
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white border-2 border-primary shadow-lg flex items-center justify-center pointer-events-none">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white border-2 border-primary shadow-[0_0_0_1px_rgba(0,0,0,0.25),0_4px_12px_rgba(0,0,0,0.35)] flex items-center justify-center pointer-events-none">
               <svg
                 width="14"
                 height="14"

apps/web/src/components/tools/eraser-canvas.tsx

@@ -451,12 +451,20 @@ export const EraserCanvas = forwardRef<EraserCanvasRef, EraserCanvasProps>(funct
               style={{ width: canvasSize.w, height: canvasSize.h }}
               draggable={false}
             />
+            {/* Explicit CSS size is load-bearing: the backing store (width/height
+                attributes) is natural resolution, and `inset-0` alone does not
+                stretch a replaced element, so without it the canvas renders at
+                intrinsic size and every rect-based coordinate is misscaled. */}
             <canvas
               ref={canvasRef}
               width={renderDims.w}
               height={renderDims.h}
               className="absolute inset-0 touch-none"
-              style={{ cursor: isPanMode ? "grab" : "none" }}
+              style={{
+                width: canvasSize.w,
+                height: canvasSize.h,
+                cursor: isPanMode ? "grab" : "none",
+              }}
               onMouseDown={handleDown}
               onMouseMove={handleMove}
               onMouseUp={handleUp}

apps/web/src/pages/tool-page.tsx

@@ -365,7 +365,7 @@ export function ToolPage() {
   const [eraserHasStrokes, setEraserHasStrokes] = useState(false);
   const [eraserBrushSize, setEraserBrushSize] = useState(30);
   const [eraserMaskedCount, setEraserMaskedCount] = useState(0);
-  // Center of the painted mask as a 0-100 percentage — used to init the slider at the right spot
+  // Center of the painted mask as a 0-100 percentage, used to init the slider at the erased spot
   const [eraserSliderInitPos, setEraserSliderInitPos] = useState<number | null>(null);
 
   // Sign state
@@ -596,15 +596,16 @@ export function ToolPage() {
   if (isAiTool && !toolInstalled && featureBundle) {
     return (
       <AppLayout breadcrumb={breadcrumb}>
-        <div className="flex-1 overflow-y-auto bg-muted/20">
-          <div className="flex items-center justify-center min-h-full">
-            <FeatureInstallPrompt
-              bundle={featureBundle}
-              isAdmin={isAdmin}
-              toolName={tool?.name}
-              toolDescription={tool?.description}
-            />
-          </div>
+        {/* min-h-full (not flex-1): AppLayout's <main> is a block scroll
+            container, so flex-1 collapses to content height and the prompt
+            hugs the top instead of centering. */}
+        <div className="min-h-full bg-muted/20 flex items-center justify-center py-8">
+          <FeatureInstallPrompt
+            bundle={featureBundle}
+            isAdmin={isAdmin}
+            toolName={tool?.name}
+            toolDescription={tool?.description}
+          />
         </div>
       </AppLayout>
     );