style: add OCR status indicator and edge case handling

Co-Authored-By: Claude Opus 4.6 <[email protected]>

unredact/static/index.html

@@ -35,6 +35,7 @@
       <div id="workspace">
         <div id="left-panel">
           <button id="detect-btn" disabled>Detect Redactions</button>
+          <div id="ocr-status"></div>
           <div id="redaction-list"></div>
         </div>
 
@@ -131,6 +132,7 @@
           <div id="doc-container">
             <img id="doc-image" alt="Document page">
             <canvas id="overlay-canvas"></canvas>
+            <div id="inline-edit-layer"></div>
           </div>
           <div id="text-edit-bar" hidden>
             <input type="text" id="left-text-input" class="seg-input" spellcheck="false" autocomplete="off" placeholder="left text">

unredact/static/main.js

@@ -145,10 +145,13 @@ function startOcrSSE() {
   es.onmessage = (e) => {
     const data = JSON.parse(e.data);
     if (data.event === "page_ocr_complete") {
-      // OCR cached for this page on the backend
+      const statusEl = document.getElementById("ocr-status");
+      if (statusEl) statusEl.textContent = `OCR: page ${data.page} done`;
     } else if (data.event === "ocr_complete") {
       es.close();
       state.ocrReady = true;
+      const statusEl = document.getElementById("ocr-status");
+      if (statusEl) statusEl.textContent = "OCR complete";
       showToast("OCR complete — ready to detect redactions", "success");
       if (detectBtn) detectBtn.disabled = false;
     } else if (data.event === "error") {
@@ -364,6 +367,13 @@ canvas.addEventListener("dblclick", async (e) => {
   }
   const r = await resp.json();
 
+  if (!r.analysis) {
+    showToast(state.ocrReady
+      ? "No text found near this redaction"
+      : "OCR still processing — redaction added without analysis",
+      "info");
+  }
+
   const redaction = {
     id: r.id, x: r.x, y: r.y, w: r.w, h: r.h,
     page: state.currentPage,

unredact/static/style.css

@@ -166,6 +166,13 @@ main {
   cursor: not-allowed;
 }
 
+#ocr-status {
+  font-size: 12px;
+  color: #888;
+  margin-bottom: 4px;
+  min-height: 16px;
+}
+
 /* Redaction list items */
 .redaction-item {
   padding: 0.5rem 0.75rem;
@@ -273,6 +280,14 @@ main {
   pointer-events: auto;
 }
 
+#inline-edit-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
 .loading {
   color: var(--accent);
   text-align: center;