feat(gui): Calibrazione Piano tab (ROI + fit preview + 3D viewer)

New tab replaces the removed Servo Visuale. Shift+drag on the RGB image
defines a rectangle, 'Calcola piano' calls POST /api/work_plane/fit and
renders the plane + a colored scatter in 3D. Adjusting the offset slider
re-colors the scatter client-side. 'Salva piano' persists; 'Rimuovi piano
salvato' clears.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/index.html

@@ -13,6 +13,7 @@
     <button class="tab active" data-tab="home">Home</button>
     <button class="tab" data-tab="agent">Assistente AI</button>
     <button class="tab" data-tab="ai-settings">Impostazioni AI</button>
+    <button class="tab" data-tab="workplane">Calibrazione Piano</button>
     <button class="tab" data-tab="grasp">TrovaUtensile</button>
     <button class="tab" data-tab="view3d">Vista 3D</button>
     <button class="tab" data-tab="ee">Movimento EE</button>
@@ -173,6 +174,56 @@
   </div>
 </section>
 
+<!-- ============================== CALIBRAZIONE PIANO ============================== -->
+<section class="panel" id="tab-workplane">
+  <div class="diag3d-toolbar">
+    <span class="post-health" id="wpStatusChip">—</span>
+  </div>
+  <div class="grid-2 diag3d-layout">
+    <div>
+      <div id="wpViewport" style="position:relative;width:min(100%,720px);height:440px;overflow:hidden;background:#000;border:1px solid var(--border);border-radius:4px;cursor:grab;user-select:none">
+        <div id="wpPanZoom" style="position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform">
+          <img id="wpImg" alt="Nuwa RGB" style="display:block;max-width:none;pointer-events:none" draggable="false" />
+          <canvas id="wpOverlay" style="position:absolute;left:0;top:0;pointer-events:none"></canvas>
+        </div>
+      </div>
+      <div class="marker-info">RGB live · shift+drag = ROI · drag = pan · wheel = zoom · doppio click = reset</div>
+      <h3 style="margin-top:14px">Vista 3D (frame camera)</h3>
+      <div class="canvas-wrap" style="width:min(100%,720px)">
+        <canvas id="wp3dCanvas" width="720" height="360" style="display:block;background:#0a0d11;border:1px solid var(--border);border-radius:4px"></canvas>
+      </div>
+      <div class="marker-info">piano viola · verde = inlier · giallo = sopra piano+offset · rosso = sotto piano-offset · grigio = buffer · drag = ruota · wheel = zoom</div>
+    </div>
+    <div>
+      <h2>Calibrazione</h2>
+      <div class="ctrl-block">
+        <div class="info-box">
+          Disegna con shift+drag un rettangolo sul tavolo (senza oggetti), poi
+          clicca <strong>Calcola piano</strong>. Regola l'offset finché i punti
+          gialli rappresentano l'oggetto e i rossi spariscono. Poi <strong>Salva piano</strong>.
+        </div>
+        <div class="kv compact">
+          <label>ROI <span id="wpRoiInfo" class="dim">— · disegna con shift+drag</span></label>
+          <label>offset (mm) <input type="number" id="wpOffset" value="5.0" step="0.5" min="0" max="200" /></label>
+        </div>
+        <div class="actions">
+          <button id="wpFitBtn" class="primary" disabled>Calcola piano (preview)</button>
+          <button id="wpSaveBtn" disabled>Salva piano</button>
+          <button id="wpClearBtn" class="danger">Rimuovi piano salvato</button>
+        </div>
+      </div>
+
+      <h2>Stato</h2>
+      <div id="wpStateBlock" class="ctrl-block">
+        <div class="dim">nessun piano</div>
+      </div>
+
+      <h2>Dettagli piano</h2>
+      <pre id="wpDetails" class="log small">—</pre>
+    </div>
+  </div>
+</section>
+
 <!-- ============================== TROVA UTENSILE ============================== -->
 <section class="panel" id="tab-grasp">
   <div class="grid-2">
@@ -337,5 +388,6 @@
 }
 </script>
 <script src="/static/app.js"></script>
+<script type="module" src="/static/work_plane.js"></script>
 </body>
 </html>