hitl: inline canvas-overlay editor, confidence-tier colors, smarter auto-zoom

- AnnotationCanvas: add `activeBoxId` + `renderActiveBoxOverlay` render-prop
  so callers can anchor an HTML widget under the active bounding box;
  expose `getFitScale` / `getCanvasSize` for zoom-to-fit calculations;
  gate `BoundingBoxLayer` behind a `hideBoxes` prop; move stage deselect
  from `mouseDown` to `onClick` so drag-pan no longer clears the active
  field. The `screenRect` passed to overlays now also includes `height`
  for height-aware widgets.
- CanvasFieldOverlay (new): inline edit widget anchored beneath the
  active bounding box. Single-line `TextInput` (or `Checkbox` for
  selection-mark fields) exactly matching the bounding-box width.
  Font-size auto-scales so the rendered text fills the input width
  (text natural width measured via canvas `measureText`). Confidence-
  tier border. Mouse-hover and F2-keyboard fade together for
  peek-behind. Field key + confidence percentage label sits below the
  input, fading in lockstep with the editor.
- useFieldFocus: per-field smart zoom — target a 50 px on-screen box
  height as a floor, cap at a configurable fraction of canvas width,
  and relax that cap up to an absolute ceiling when the inline
  overlay's font would otherwise be too small. Smooth pan-to via
  Konva tween (existing behaviour preserved).
- ReviewWorkspacePage: wires the canvas overlay; adds an F2 shortcut
  (`alwaysActive: true`) for keyboard peek; adds an eye-icon toggle in
  the canvas corner that suppresses bounding boxes entirely while
  keeping the active-field overlay; switches sidebar field-row borders
  to confidence-tier colors (replacing field-key-based colors); and
  teaches `navigateToField` to detect when the cursor is inside the
  canvas overlay so Tab navigation keeps focus on the overlay instead
  of bouncing to the matching sidebar input.
- ConfidenceIndicator: exports `getConfidenceBorderColor` (CSS
  variable, for borders) and `getConfidenceCanvasColor` (hex, for
  Konva strokes) so confidence semantics propagate to borders,
  document-view bounding-box strokes, and inline overlay borders
  consistently.
- SnippetView: borders driven by confidence tier instead of field-key
  color (matching the document view); crop padding bumped so each
  snippet shows more surrounding document context; label/confidence
  stacked vertically on the left under the field name.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: 2 people

apps/frontend/src/features/annotation/core/canvas/AnnotationCanvas.tsx

@@ -2,6 +2,7 @@ import Konva from "konva";
 import { KonvaEventObject } from "konva/lib/Node";
 import {
   forwardRef,
+  ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -19,6 +20,14 @@ import { useCanvasSelection } from "./hooks/useCanvasSelection";
 
 export interface AnnotationCanvasHandle {
   panTo: (centerX: number, centerY: number, targetZoom: number) => void;
+  /**
+   * Returns the auto-fit base scale (effectiveScale = fitScale × userZoom).
+   * Callers that need to compute a userZoom from a target effective scale
+   * (e.g. zoom-to-fit-text logic) need this to invert the relationship.
+   */
+  getFitScale: () => number;
+  /** Returns the canvas container's pixel size — useful for fit/cap calcs. */
+  getCanvasSize: () => { width: number; height: number };
 }
 
 interface AnnotationCanvasProps {
@@ -41,6 +50,33 @@ interface AnnotationCanvasProps {
   verticalAlign?: "top" | "center";
   /** Fraction of container used when fitting (1 = edge-to-edge). Default 0.95. */
   fitPadding?: number;
+  /**
+   * Identifies the currently-active box, controlled by the parent. Used to
+   * position the optional overlay (renderActiveBoxOverlay) right below
+   * the corresponding bounding box.
+   */
+  activeBoxId?: string | null;
+  /**
+   * Render-prop for an HTML overlay anchored beneath the active box. The
+   * `screenRect` is in container-relative pixels and already incorporates
+   * the Stage's pan and zoom. Use it for inline edit widgets so the
+   * reviewer can see input + bounding box at the same time.
+   */
+  renderActiveBoxOverlay?: (params: {
+    boxId: string;
+    screenRect: {
+      left: number;
+      top: number;
+      width: number;
+      height: number;
+    };
+  }) => ReactNode;
+  /**
+   * When true, the BoundingBoxLayer (boxes, labels) is suppressed. The
+   * active-box overlay (renderActiveBoxOverlay) still renders so callers
+   * can keep inline editing while hiding canvas chrome.
+   */
+  hideBoxes?: boolean;
 }
 
 export const AnnotationCanvas = forwardRef<
@@ -60,6 +96,9 @@ export const AnnotationCanvas = forwardRef<
       rotation = 0,
       verticalAlign = "center",
       fitPadding = 0.95,
+      activeBoxId,
+      renderActiveBoxOverlay,
+      hideBoxes,
     },
     ref,
   ) => {
@@ -171,6 +210,8 @@ export const AnnotationCanvas = forwardRef<
             }).play();
           }
         },
+        getFitScale: () => fitScale,
+        getCanvasSize: () => ({ width, height }),
       }),
       [fitScale, width, height, clampPan, setPan],
     );
@@ -213,11 +254,12 @@ export const AnnotationCanvas = forwardRef<
       const pos = stage.getPointerPosition();
       if (!pos) return;
 
-      // Click on empty canvas area deselects
+      // We intentionally do NOT deselect on mouseDown — that runs the
+      // deselect before the user has a chance to drag-pan, clearing
+      // their selection mid-drag. Deselection lives on the Stage's click
+      // handler (handleStageClick), which Konva only fires when the user
+      // pressed and released without dragging.
       if (e.target === e.target.getStage()) {
-        selectBox(null);
-        onBoxSelect?.(null);
-
         // If we're in DRAW_BOX mode, start drawing
         if (activeTool === CanvasTool.DRAW_BOX) {
           const relativePos = {
@@ -271,13 +313,62 @@ export const AnnotationCanvas = forwardRef<
       [],
     );
 
+    /**
+     * Deselect on click outside any box. Konva's Stage onClick fires only
+     * on a real click (mousedown + mouseup without enough movement to be
+     * classified as a drag), so a drag-pan keeps the current selection.
+     */
+    const handleStageClick = (e: KonvaEventObject<MouseEvent>) => {
+      if (e.target === e.target.getStage()) {
+        selectBox(null);
+        onBoxSelect?.(null);
+      }
+    };
+
+    // Compute container-relative screen rect for the active box so the
+    // overlay (if any) can be positioned directly beneath it.
+    const activeOverlayPlacement = useMemo(() => {
+      if (!activeBoxId || !renderActiveBoxOverlay) return null;
+      const target = boxes.find((b) => b.id === activeBoxId);
+      if (!target) return null;
+      const points = target.box.polygon;
+      if (!points || points.length === 0) return null;
+      let minX = Infinity;
+      let maxX = -Infinity;
+      let minY = Infinity;
+      let maxY = -Infinity;
+      for (const p of points) {
+        if (p.x < minX) minX = p.x;
+        if (p.x > maxX) maxX = p.x;
+        if (p.y < minY) minY = p.y;
+        if (p.y > maxY) maxY = p.y;
+      }
+      if (
+        !Number.isFinite(minX) ||
+        !Number.isFinite(maxX) ||
+        !Number.isFinite(minY) ||
+        !Number.isFinite(maxY)
+      )
+        return null;
+      return {
+        boxId: target.id,
+        screenRect: {
+          left: minX * effectiveScale + pan.x,
+          top: maxY * effectiveScale + pan.y,
+          width: (maxX - minX) * effectiveScale,
+          height: (maxY - minY) * effectiveScale,
+        },
+      };
+    }, [activeBoxId, renderActiveBoxOverlay, boxes, effectiveScale, pan]);
+
     return (
       <Box
         style={{
           width: "100%",
           height: "100%",
           overflow: "hidden",
           cursor: "default",
+          position: "relative",
         }}
       >
         <Stage
@@ -292,6 +383,7 @@ export const AnnotationCanvas = forwardRef<
           onMouseDown={handleMouseDown}
           onMouseMove={handleMouseMove}
           onMouseUp={handleMouseUp}
+          onClick={handleStageClick}
           onMouseEnter={forceDefaultCursor}
           onMouseLeave={forceDefaultCursor}
           draggable={isPanEnabled}
@@ -319,30 +411,32 @@ export const AnnotationCanvas = forwardRef<
             </Layer>
           )}
 
-          <BoundingBoxLayer
-            boxes={boxes}
-            selectedBoxId={selectedBoxId}
-            hoveredBoxId={hoveredBoxId}
-            onBoxClick={handleBoxClick}
-            onBoxMouseEnter={(id) => {
-              hoverBox(id);
-              if (onBoxHover && stageRef.current) {
-                const pointer = stageRef.current.getPointerPosition();
-                if (pointer) {
-                  onBoxHover({ boxId: id, x: pointer.x, y: pointer.y });
+          {!hideBoxes && (
+            <BoundingBoxLayer
+              boxes={boxes}
+              selectedBoxId={selectedBoxId}
+              hoveredBoxId={hoveredBoxId}
+              onBoxClick={handleBoxClick}
+              onBoxMouseEnter={(id) => {
+                hoverBox(id);
+                if (onBoxHover && stageRef.current) {
+                  const pointer = stageRef.current.getPointerPosition();
+                  if (pointer) {
+                    onBoxHover({ boxId: id, x: pointer.x, y: pointer.y });
+                  }
                 }
-              }
-            }}
-            onBoxMouseLeave={() => {
-              hoverBox(null);
-              onBoxHover?.(null);
-            }}
-            rotation={rotation}
-            offsetX={imageSize ? imageSize.width / 2 : 0}
-            offsetY={imageSize ? imageSize.height / 2 : 0}
-            x={imageSize ? imageSize.width / 2 : 0}
-            y={imageSize ? imageSize.height / 2 : 0}
-          />
+              }}
+              onBoxMouseLeave={() => {
+                hoverBox(null);
+                onBoxHover?.(null);
+              }}
+              rotation={rotation}
+              offsetX={imageSize ? imageSize.width / 2 : 0}
+              offsetY={imageSize ? imageSize.height / 2 : 0}
+              x={imageSize ? imageSize.width / 2 : 0}
+              y={imageSize ? imageSize.height / 2 : 0}
+            />
+          )}
 
           <DrawingLayer
             drawingBox={drawingBox}
@@ -353,6 +447,26 @@ export const AnnotationCanvas = forwardRef<
             y={imageSize ? imageSize.height / 2 : 0}
           />
         </Stage>
+        {activeOverlayPlacement && renderActiveBoxOverlay && (
+          <div
+            style={{
+              position: "absolute",
+              left: activeOverlayPlacement.screenRect.left,
+              top: activeOverlayPlacement.screenRect.top,
+              minWidth: activeOverlayPlacement.screenRect.width,
+              pointerEvents: "auto",
+              zIndex: 10,
+            }}
+            // Prevent canvas pan/drag handlers (which sit on the Stage) from
+            // hijacking text-input mouse events inside the overlay.
+            onMouseDown={(e) => e.stopPropagation()}
+            onMouseMove={(e) => e.stopPropagation()}
+            onMouseUp={(e) => e.stopPropagation()}
+            onWheel={(e) => e.stopPropagation()}
+          >
+            {renderActiveBoxOverlay(activeOverlayPlacement)}
+          </div>
+        )}
       </Box>
     );
   },