hh-shipments 0.3.6 → 0.3.8

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.8",
   "bin": {
     "hh-shipments": "server.js"
   },

package/public/app.js

@@ -111,7 +111,10 @@ async function loadDash() {
 async function runQuick(text, targetEl, preset) {
   targetEl.innerHTML = '<p class="muted">Extracting…</p>';
   try {
-    const r = await api.post('/api/intake/quick', { text, seller_name: preset && preset.seller, device: preset && preset.device });
+    const r = await Promise.race([
+      api.post('/api/intake/quick', { text, seller_name: preset && preset.seller, device: preset && preset.device }),
+      new Promise((_, rej) => setTimeout(() => rej(new Error('extract timed out — check your connection and try again')), 45000)),
+    ]);
     let html = '';
     r.added.forEach((a) => { html += `<div class="review">✅ Added <b>${esc(a.number)}</b> (${esc(a.carrier.toUpperCase())})${r.simulated ? ' <span class="sim-badge">SIMULATED</span>' : ''}</div>`; });
     r.duplicates.forEach((n) => { html += `<div class="review">⛔ <b>${esc(n)}</b> is already tracked — skipped.</div>`; });
@@ -169,12 +172,18 @@ async function ocrFile(file, statusEl) {
 }
 
 async function handlePhotoFile(f) {
+  const target = $('photo-result');
   try {
+    f = await shrinkImage(f);
+    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();
     fd.append('image', f);
-    const up = await fetch('/api/intake/image', { method: 'POST', body: fd });
+    let up;
+    try { up = await fetchTimeout('/api/intake/image', { method: 'POST', body: fd }, 60000); }
+    catch (e) { throw new Error('upload timed out — check your connection and try again'); }
     if (!up.ok) throw new Error('upload failed');
     const r = await runQuick(text, $('photo-result'));
     if (r && !r.added.length && !r.needs_review.length && !r.duplicates.length) showOcrRead($('photo-result'), text);
@@ -203,25 +212,56 @@ function pastedImageFiles(e) {
   return files;
 }
 
-// Paste-text tab: pasting a screenshot runs OCR and extracts tracking numbers;
-// pasting plain text behaves normally
+// Shrink huge phone photos before OCR/upload: much faster to read and send,
+// and less exposed to a stalled connection. Falls back to the original file.
+async function shrinkImage(file, maxDim = 1600) {
+  try {
+    const bmp = await createImageBitmap(file);
+    const scale = Math.min(1, maxDim / Math.max(bmp.width, bmp.height));
+    if (scale >= 1) { bmp.close(); return file; }
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.round(bmp.width * scale);
+    canvas.height = Math.round(bmp.height * scale);
+    canvas.getContext('2d').drawImage(bmp, 0, 0, canvas.width, canvas.height);
+    bmp.close();
+    const blob = await new Promise((res) => canvas.toBlob(res, 'image/jpeg', 0.85));
+    return blob ? new File([blob], 'label.jpg', { type: 'image/jpeg' }) : file;
+  } catch (e) { return file; }
+}
+
+async function fetchTimeout(url, opts = {}, ms = 60000) {
+  const c = new AbortController();
+  const t = setTimeout(() => c.abort(), ms);
+  try { return await fetch(url, { ...opts, signal: c.signal }); }
+  finally { clearTimeout(t); }
+}
 async function handlePastedImageFile(f) {
+  const target = $('quick-result');
   try {
+    // Instant feedback: show a thumbnail + progress the moment the image lands
+    f = await shrinkImage(f);
+    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 = '⬆️ Uploading…';
     const fd = new FormData();
     fd.append('image', f);
-    const up = await fetch('/api/intake/image', { method: 'POST', body: fd });
+    let up;
+    try { up = await fetchTimeout('/api/intake/image', { method: 'POST', body: fd }, 60000); }
+    catch (e) { throw new Error('upload timed out — check your connection and try again'); }
     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>`; }
+    if (live) live.textContent = '🔍 Finding tracking number…';
+    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 +423,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>