hh-shipments 0.3.6 → 0.3.7

package/package.json

@@ -18,7 +18,7 @@
     "test": "node test/run-tests.js && node test/run-carriers-tests.js"
   },
   "type": "commonjs",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "bin": {
     "hh-shipments": "server.js"
   },

package/public/app.js

@@ -169,7 +169,10 @@ async function ocrFile(file, statusEl) {
 }
 
 async function handlePhotoFile(f) {
+  const target = $('photo-result');
   try {
+    const url = URL.createObjectURL(f);
+    target.innerHTML = `<div class="review"><img src="${url}" style="max-width:100%;border-radius:10px"><p class="muted">📖 Reading screenshot…</p></div>`;
     const text = await ocrFile(f, $('ocr-status'));
     // Upload original for reference, then run the quick flow on OCR text
     const fd = new FormData();
@@ -203,25 +206,31 @@ function pastedImageFiles(e) {
   return files;
 }
 
-// Paste-text tab: pasting a screenshot runs OCR and extracts tracking numbers;
-// pasting plain text behaves normally
+// Paste-text tab: pasting a screenshot runs OCR and extracts automatically —
+// no "Extract" tap needed. Plain text paste still lands in the textarea.
 async function handlePastedImageFile(f) {
+  const target = $('quick-result');
   try {
+    // Instant feedback: show a thumbnail + progress the moment the image lands
+    const url = URL.createObjectURL(f);
+    target.innerHTML = `<div class="review"><img src="${url}" style="max-width:100%;border-radius:10px"><p class="muted" id="ocr-live">📖 Reading screenshot…</p></div>`;
     const text = await ocrFile(f, $('ocr-status-paste'));
+    const live = $('ocr-live');
+    if (live) live.textContent = '🔍 Finding tracking number…';
     const fd = new FormData();
     fd.append('image', f);
     const up = await fetch('/api/intake/image', { method: 'POST', body: fd });
     if (!up.ok) throw new Error('upload failed');
-    const r = await runQuick(text, $('quick-result'));
-    if (r && !r.added.length && !r.needs_review.length && !r.duplicates.length) showOcrRead($('quick-result'), text);
-  } catch (err) { $('ocr-status-paste').textContent = ''; $('quick-result').innerHTML = `<p class="error">${esc(err.message)}</p>`; }
+    const r = await runQuick(text, target);
+    if (r && !r.added.length && !r.needs_review.length && !r.duplicates.length) showOcrRead(target, text);
+  } catch (err) { $('ocr-status-paste').textContent = ''; target.innerHTML = `<p class="error">${esc(err.message)}</p>`; }
 }
 
 $('tab-paste').addEventListener('paste', async (e) => {
   const files = pastedImageFiles(e);
   if (!files.length) return; // text paste — let it land in the textarea
   e.preventDefault();
-  $('paste-box').innerHTML = '📋 <span class="muted">or tap here, then paste a screenshot</span>';
+  $('paste-box').innerHTML = '📋 <span class="muted">or tap here and paste a screenshot</span>';
   for (const f of files) await handlePastedImageFile(f);
 });
 
@@ -383,7 +392,11 @@ let searchT;
 $('search').addEventListener('input', () => { clearTimeout(searchT); searchT = setTimeout(loadDash, 400); });
 let searchAT;
 $('search-arch').addEventListener('input', () => { clearTimeout(searchAT); searchAT = setTimeout(loadArchive, 400); });
-$('btn-quick').onclick = () => runQuick($('paste-text').value, $('quick-result'));
+$('btn-quick').onclick = () => {
+  const t = $('paste-text').value.trim();
+  if (!t) { $('quick-result').innerHTML = '<p class="muted">Paste the seller\'s text above first — or tap <b>📋 Paste screenshot</b>, screenshots extract on their own.</p>'; return; }
+  runQuick(t, $('quick-result'));
+};
 $('btn-manual').onclick = async () => {
   $('manual-err').textContent = '';
   try {

package/public/index.html

@@ -61,11 +61,11 @@
       <button class="tab" data-tab="manual">Manual</button>
     </div>
     <div id="tab-paste" class="tabpanel">
-      <textarea id="paste-text" rows="6" placeholder="Paste the seller's message here…"></textarea>
-      <div id="paste-box" class="pastebox" contenteditable="true" spellcheck="false">📋 <span class="muted">or tap here, then paste a screenshot</span></div>
-      <div class="row" style="margin-top:8px"><button id="btn-clipboard" class="secondary">📋 Grab screenshot from clipboard</button></div>
+      <textarea id="paste-text" rows="4" placeholder="Paste the seller's message here…"></textarea>
+      <div class="row" style="margin:8px 0"><button id="btn-clipboard" class="primary">📋 Paste screenshot — extracts automatically</button></div>
+      <div id="paste-box" class="pastebox" contenteditable="true" spellcheck="false">📋 <span class="muted">or tap here and paste a screenshot</span></div>
       <div id="ocr-status-paste" class="muted"></div>
-      <button id="btn-quick" class="primary">Extract &amp; add</button>
+      <button id="btn-quick" class="secondary">Extract from text above</button>
       <div id="quick-result"></div>
     </div>
     <div id="tab-photo" class="tabpanel" hidden>