From 3d07faadc8794f7cc1f0f6b190ad6b6377dcd2e8 Mon Sep 17 00:00:00 2001
From: Alex-Gilbert <alexp.gilbert@pm.me>
Date: Fri, 20 Feb 2026 12:52:14 -0600
Subject: [PATCH] style: add OCR status indicator and edge case handling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 unredact/static/index.html |  2 ++
 unredact/static/main.js    | 12 +++++++++++-
 unredact/static/style.css  | 15 +++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/unredact/static/index.html b/unredact/static/index.html
index 70aa01a..8094e35 100644
--- a/unredact/static/index.html
+++ b/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">
diff --git a/unredact/static/main.js b/unredact/static/main.js
index 4d15bef..1093e35 100644
--- a/unredact/static/main.js
+++ b/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,
diff --git a/unredact/static/style.css b/unredact/static/style.css
index 55f74dd..3af81b7 100644
--- a/unredact/static/style.css
+++ b/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;