feat(cropper): move the Image Cropper into the tools app at /cropper

- Smart Photo Editor ported from id-image-bot: queue/by-ID picture
  loading, vue-croppa editing, carvekit background cleanup, nodered
  review flow, a2loft save — restyled to the tools design language
- unified login: YOUreka session identity, phone prefilled, OTP only at
  save (a2loft's requirement); artist-login step removed
- crop_image @ domain:idid OpenFGA gate on every cropper route: cached
  5-min on reads, live on save, fail closed
- credentials (minio/azure/nodered/carvekit) via env, sole exception to
  hardcoded config; 503 when unconfigured; native FormData replaces
  form-data; new deps minio + azure-storage
- 10 new tests (35 total) with fake minio/queue/nodered/removebg/a2loft

tools/public/assets/cropper/app.js

@@ -0,0 +1,270 @@
+/* Image Cropper — review, crop, clean and save identity photos.
+   Identity comes from the YOUreka session; the only operator credential is
+   the save-time OTP (required by a2loft). */
+/* global Vue, axios, toastr, Croppa */
+Vue.use(Croppa);
+(function () {
+  'use strict';
+
+  var REVIEW_OPTIONS = [
+    'IMAGE: Not in the midline of the photo frame (aligned to the left or right)',
+    'IMAGE: Taken too close-up (Only head is visible, shoulders barely visible)',
+    'IMAGE: Blurry ',
+    'IMAGE: Improper lighting ',
+    'IMAGE: Not coloured.',
+    'IMAGE: Scanned photo',
+    'IMAGE: Has no adequate space to allow for proper cropping   ',
+    'IMAGE: Not taken on a recommended background.',
+    'IMAGE: Photo is a selfie',
+    'DRESSING: Unacceptable dress. ',
+    'HEAD: Skewed (leaning away from the midline - vertically or horizontally)',
+    'EYES: Not looking into the camera (looking downward, upward, or sideward)',
+    'EYES: Not properly opened',
+    'EARS: Not visible ',
+    'EARS: Both ears are not equally visible (face not aligned central)',
+    'FACIAL EXPRESSION: NOT neutral (subject has a facial expression)',
+    'GLASSES: Subject is wearing glasses ',
+    'JUST WRING: Goes against almost all acceptable passport criteria.',
+    'Others not specified.',
+  ];
+
+  var app = new Vue({
+    el: '#app',
+    data: {
+      loading: true,
+      session: null,
+      message: {
+        message: { caption: null, file_url: null, domain: '' },
+      },
+      agent: null,
+      process: null,
+      reviewed: false,
+      accepted: false,
+      cleanedImage: null,
+      requiresCleaning: '',
+      otp: '',
+      reviewOptions: REVIEW_OPTIONS.map(function (name, index) {
+        return { index: index + 1, name: name };
+      }),
+      selectedReviewOptions: [],
+      otherReviewOption: '',
+      busy: { load: false, clean: false, review: false, save: false },
+      myCroppa: {},
+    },
+
+    computed: {
+      initials: function () {
+        var n = (this.session && (this.session.firstName || this.session.phone)) || '?';
+        return n.slice(0, 2).toUpperCase();
+      },
+      canReview: function () {
+        if (this.busy.review) return false;
+        if (this.accepted) return true;
+        return this.selectedReviewOptions.length > 0 || this.otherReviewOption.length > 0;
+      },
+      canSave: function () {
+        return !this.busy.save && this.otp.length > 0 && this.requiresCleaning !== '';
+      },
+    },
+
+    created: function () {
+      var self = this;
+      axios.get('/auth/session').then(function (r) {
+        self.session = r.data;
+        self.loading = false;
+      }).catch(function (err) {
+        if (err.response && err.response.status === 401) {
+          window.location.href = '/auth/login';
+          return;
+        }
+        self.loading = false;
+        toastr.error('Could not load your session. Please refresh the page.', 'Oops!');
+      });
+    },
+
+    methods: {
+      reset: function () {
+        this.message = { message: { caption: null, file_url: null, domain: '' } };
+        this.agent = null;
+        this.process = null;
+        this.reviewed = false;
+        this.accepted = false;
+        this.cleanedImage = null;
+        this.selectedReviewOptions = [];
+        this.otherReviewOption = '';
+        this.requiresCleaning = '';
+        this.otp = '';
+      },
+
+      loadPicture: async function (mode) {
+        var self = this;
+        this.busy.load = true;
+        try {
+          var uploadId = null;
+          if (mode === 'by-id') {
+            uploadId = prompt('Enter picture upload ID');
+            if (!uploadId) return;
+          }
+          var { data } = await axios.get(
+            uploadId ? '/cropper/picture/load/' + encodeURIComponent(uploadId) : '/cropper/picture/next'
+          );
+          if (!data.ok) {
+            this.reset(); // nothing (more) to review — back to the load state
+            toastr.error(data.message, 'Oops!');
+            return;
+          }
+          this.message = data.data;
+          var image = await axios.get(
+            '/cropper/picture/' + encodeURIComponent(this.message.message.file_name.replace(/\//gi, '_'))
+          );
+          if (!image.data.ok) {
+            this.reset();
+            toastr.error("Couldn't load the attached image. Please try again.", 'Oops!');
+            return;
+          }
+          this.message.message.file_url = image.data.data;
+          this.cleanedImage = null;
+          this.agent = null;
+          this.process = this.message.message.process || null;
+          if (this.message.message.upload_id) {
+            var review = await axios.get(
+              '/cropper/picture/review/' + encodeURIComponent(this.message.message.upload_id)
+            );
+            this.agent = review.data.ok ? review.data.data : null;
+          }
+        } catch ({ message }) {
+          toastr.error(message, 'Operation Failed');
+        } finally {
+          this.reviewed = false;
+          this.accepted = false;
+          this.selectedReviewOptions = [];
+          this.otherReviewOption = '';
+          this.requiresCleaning = '';
+          this.otp = '';
+          this.busy.load = false;
+        }
+      },
+
+      cleanImage: async function () {
+        var self = this;
+        this.busy.clean = true;
+        try {
+          var dataUrl = this.myCroppa.generateDataUrl('image/jpeg');
+          var response = await fetch('/cropper/api/removebg', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ image_file_b64: dataUrl.split(',')[1] }),
+          });
+          if (!response.ok) {
+            var err = await response.json().catch(function () { return {}; });
+            throw new Error(err.message || 'Failed to clean image.');
+          }
+          var contentType = response.headers.get('content-type') || '';
+          if (contentType.indexOf('image/') !== 0) {
+            throw new Error('Image cleanup service returned an invalid response.');
+          }
+          var blob = await response.blob();
+          var fr = new FileReader();
+          fr.onload = function () { self.cleanedImage = fr.result; };
+          fr.readAsDataURL(blob);
+        } catch ({ message }) {
+          toastr.error(message, 'Image Cleanup Failed');
+        } finally {
+          this.busy.clean = false;
+        }
+      },
+
+      reviewPicture: async function () {
+        var self = this;
+        if (!this.canReview) return;
+        if (!this.accepted && this.selectedReviewOptions.length === 0 && !this.otherReviewOption) {
+          toastr.error('Please indicate why this image is not good enough.', 'Operation Failed');
+          return;
+        }
+        this.busy.review = true;
+        var options = [...this.selectedReviewOptions, this.otherReviewOption].filter(function (o) {
+          return o && o.length > 0;
+        });
+        var reviewMessage = this.accepted ? null : options.join('\n\n');
+        try {
+          var hasProcess = !!this.message.message.process;
+          var data = {};
+          if (hasProcess) {
+            var { domain, reference } = this.message.message.process.variables;
+            data.process = {
+              correlationKey: domain + '-' + reference,
+              name: 'PictureReviewed',
+              variables: { ok: this.accepted, reviewRejectMessage: reviewMessage },
+            };
+          } else {
+            data.raw = { phone: this.message.message.caption, reviewRejectMessage: reviewMessage };
+          }
+          var { data: result } = await axios.post('/cropper/picture/review', {
+            deleteFromQueue: true,
+            message: this.message,
+            mode: hasProcess ? 'process' : 'raw',
+            ...data,
+          });
+          if (!result.ok) {
+            toastr.error(result.message, 'Operation Failed');
+            return;
+          }
+          if (reviewMessage) {
+            toastr.success('Profile owner has been notified of the review.', 'Review Sent');
+          }
+          this.reset();
+        } catch ({ message }) {
+          toastr.error(message, 'Operation Failed');
+        } finally {
+          this.busy.review = false;
+        }
+      },
+
+      removeFromQueue: async function () {
+        var self = this;
+        if (!confirm('Are you sure you want to dequeue?')) return;
+        this.busy.review = true;
+        try {
+          var { data } = await axios.post('/cropper/dequeue', { message: this.message });
+          if (!data.ok) {
+            toastr.error(data.message, 'Not Removed');
+            return;
+          }
+          toastr.success(data.message, 'Removed!');
+          this.reset();
+        } catch ({ message }) {
+          toastr.error(message, 'Not Removed');
+        } finally {
+          this.busy.review = false;
+        }
+      },
+
+      saveChanges: async function () {
+        var self = this;
+        if (!this.canSave) return;
+        this.busy.save = true;
+        try {
+          var { data } = await axios.post(
+            '/cropper/profile/picture?otp=' + encodeURIComponent(this.otp),
+            {
+              pictureDataUrl: this.cleanedImage || this.myCroppa.generateDataUrl('image/jpeg'),
+              phone: this.message.message.caption,
+              message: this.message,
+              requiresCleaning: this.requiresCleaning !== 'No',
+            }
+          );
+          if (!data.ok) {
+            toastr.error(data.message, 'Not Saved');
+            return;
+          }
+          toastr.success('Picture saved for ' + this.message.message.caption, 'Saved');
+          this.reset();
+        } catch ({ message }) {
+          toastr.error(message, 'Not Saved');
+        } finally {
+          this.busy.save = false;
+        }
+      },
+    },
+  });
+})();

tools/public/assets/cropper/index.html

@@ -0,0 +1,180 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Image Cropper · YOUreka Tools</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="/assets/style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='6' fill='%233b4fd8'/><path d='M12 5a6 6 0 0 0-6 6c0 2.6.8 4.1 1.5 5.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M15.5 19a7.5 7.5 0 0 0 3-9.7A6 6 0 0 0 7.1 7.9' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M9.5 18.5a5.5 5.5 0 0 1-.8-7.6 3.8 3.8 0 0 1 7.2 1.5 4.3 4.3 0 0 1-3.4 4.6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>">
+  <style>
+    .croppa-pad { border: 1px dashed var(--faint); border-radius: 12px; width: 252px; height: 270px; overflow: hidden; background: #fafbfe; }
+    .croppa-pad img { width: 250px; display: block; }
+    .review-options .form-check { margin-bottom: 0.35rem; }
+  </style>
+</head>
+<body class="app">
+<div id="app">
+  <nav class="nav">
+    <div class="container">
+      <a class="brand" href="/">
+        <span class="brand-mark">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>
+        </span>
+        YOUreka <small>Tools</small>
+      </a>
+      <div class="nav-right" v-cloak v-if="session">
+        <span class="user-chip">
+          <span class="avatar">{{ initials }}</span>
+          {{ session.firstName || session.phone }}
+        </span>
+        <a class="linklike" href="/auth/logout">Sign out</a>
+      </div>
+    </div>
+  </nav>
+
+  <main class="container" v-cloak v-if="session">
+    <div class="page-head">
+      <div>
+        <h1>Image Cropper</h1>
+        <p class="sub">Review, crop and save identity photos</p>
+      </div>
+    </div>
+
+    <!-- 1 · load -->
+    <section class="card panel">
+      <div class="panel-head">
+        <span class="step-chip">1</span>
+        <h2>Load a picture</h2>
+        <span class="hint" v-if="message && message.message">Working on {{ message.message.caption }} &middot; {{ message.message.domain }}</span>
+      </div>
+      <div class="row-gap">
+        <button class="btn btn-primary" v-bind:disabled="busy.load" v-on:click="loadPicture('next')">
+          <span v-if="!busy.load">Load next queued</span>
+          <span v-else>Loading&hellip;</span>
+        </button>
+        <button class="btn btn-ghost" v-bind:disabled="busy.load" v-on:click="loadPicture('by-id')">Load by upload ID</button>
+        <button class="btn btn-ghost" v-if="message && message.message" v-on:click="reset">Clear</button>
+      </div>
+    </section>
+
+    <!-- 2 · review & crop -->
+    <section class="card panel" v-if="message && message.message">
+      <div class="panel-head">
+        <span class="step-chip">2</span>
+        <h2>Review picture</h2>
+        <span class="hint">Accept, or reject with reasons</span>
+      </div>
+
+      <dl class="details">
+        <div><dt>Phone</dt><dd>{{ message.message.caption }}</dd></div>
+        <div><dt>Domain</dt><dd>{{ message.message.domain }}</dd></div>
+        <div v-if="agent"><dt>Agent</dt><dd>{{ agent.name }} <span class="faint">{{ agent.phone }}</span></dd></div>
+        <div v-if="message.message.process">
+          <dt>Process</dt>
+          <dd>{{ message.message.process.variables.name }} <span class="badge-soft badge-brand">{{ message.message.process.variables.environment }}</span></dd>
+        </div>
+      </dl>
+
+      <div class="finger-grid mt-2">
+        <div>
+          <label>Original — crop it</label>
+          <div class="croppa-pad mt-1">
+            <croppa v-model="myCroppa" :show-remove-button="false" :width="250" :height="267.44" :quality="2">
+              <img slot="initial" crossOrigin="anonymous" :src="message.message.file_url" style="width: 300px">
+            </croppa>
+          </div>
+        </div>
+        <div v-if="cleanedImage">
+          <label>Cleaned preview</label>
+          <div class="croppa-pad mt-1">
+            <img :src="cleanedImage" alt="cleaned preview">
+          </div>
+        </div>
+      </div>
+
+      <div class="row-gap mt-2" style="align-items:flex-end;">
+        <div style="min-width:200px;">
+          <label for="requiresCleaning">Requires cleaning?</label>
+          <select id="requiresCleaning" class="form-control" v-model="requiresCleaning">
+            <option value="">--Choose--</option>
+            <option value="Yes">Yes</option>
+            <option value="No">No</option>
+          </select>
+        </div>
+        <button class="btn btn-primary" v-if="requiresCleaning === 'Yes'" v-bind:disabled="busy.clean" v-on:click="cleanImage">
+          <span v-if="!busy.clean">Clean background</span>
+          <span v-else>Cleaning&hellip;</span>
+        </button>
+        <button class="btn btn-danger-ghost" v-if="cleanedImage" v-on:click="cleanedImage = null">Remove cleaned image</button>
+      </div>
+
+      <hr class="mt-2">
+
+      <div class="row-gap" v-if="!reviewed">
+        <div class="btn btn-success" style="border-radius:10px; padding:0.55rem 1.1rem; font-weight:600; cursor:pointer;" v-on:click="reviewed = true; accepted = true">Accept picture</div>
+        <div class="btn btn-danger" style="border-radius:10px; padding:0.55rem 1.1rem; font-weight:600; cursor:pointer;" v-on:click="reviewed = true; accepted = false">Reject picture</div>
+      </div>
+
+      <div v-if="reviewed && accepted" class="mt-2">
+        <div class="row-gap" style="align-items:flex-end;">
+          <div style="min-width:150px; max-width:200px;">
+            <label for="otpSave">OTP</label>
+            <input id="otpSave" class="form-control" v-model.trim="otp" autocomplete="one-time-code">
+          </div>
+          <button class="btn btn-primary" v-bind:disabled="!canSave" v-on:click="saveChanges">
+            <span v-if="!busy.save">Crop and upload picture</span>
+            <span v-else>Saving&hellip;</span>
+          </button>
+          <button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
+        </div>
+      </div>
+
+      <div v-if="reviewed && !accepted" class="mt-2">
+        <label>Please state why this picture is not good enough.</label>
+        <div class="review-options mt-1">
+          <div class="form-check" v-for="item in reviewOptions" v-bind:key="item.index">
+            <input class="form-check-input" type="checkbox" v-model="selectedReviewOptions" v-bind:id="'reason-' + item.index" v-bind:value="item.name">
+            <label class="form-check-label" v-bind:for="'reason-' + item.index">{{ item.name }}</label>
+          </div>
+        </div>
+        <div class="mt-1" style="max-width:480px;">
+          <label for="otherReviewOption">Others (please specify).</label>
+          <textarea id="otherReviewOption" rows="3" class="form-control" v-model="otherReviewOption"></textarea>
+        </div>
+        <div class="row-gap mt-2">
+          <button class="btn btn-primary" v-bind:disabled="!canReview" v-on:click="reviewPicture()">
+            <span v-if="!busy.review">Send review</span>
+            <span v-else>Sending&hellip;</span>
+          </button>
+          <button class="btn btn-danger-ghost" v-if="!message.message.process" v-bind:disabled="!canReview" v-on:click="removeFromQueue">Dequeue only</button>
+          <button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <main class="container" v-cloak v-if="loading && !session">
+    <div class="narrow center-v">
+      <div class="card panel" style="text-align:center;">Loading your session&hellip;</div>
+    </div>
+  </main>
+
+  <footer class="foot" v-cloak v-if="session">
+    <div class="container">
+      <span>Smart Photo Editor</span>
+      <span>Signed in as {{ session.phone }}</span>
+    </div>
+  </footer>
+
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
+  <script src="/assets/cropper/app.js"></script>
+</div>
+</body>
+</html>

tools/public/index.html

@@ -30,14 +30,14 @@
     </div>
 
     <div class="tool-grid">
-      <a class="tool-card" href="https://smart-pxa.yrka.app" target="_blank" rel="noopener">
+      <a class="tool-card" href="/cropper">
         <span class="tool-icon">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>
         </span>
         <h3>Image Cropper</h3>
-        <p>Prepare and crop identity photos to the dimensions required by YOUreka profiles.</p>
+        <p>Review, crop and save identity photos submitted for YOUreka ID domain profiles.</p>
         <span class="go">Open Image Cropper
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg>
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
         </span>
       </a>