UX: Remove 'Waiting for camera', icon toggle, native phone camera, fix VLM error

frontend/camera.js

@@ -41,6 +41,7 @@
       $("#statusPill").classList.add("live");
       $("#statusPill span").textContent = "Live · private preview";
       $("#captureButton").disabled = false;
+      $("#qualityPill").hidden = false;
       setStatus("Camera ready", "Position the document inside the frame and hold still. Capture starts automatically when the page is clear.");
       requestAnimationFrame(monitor);
     } catch (error) {
@@ -87,6 +88,7 @@
         : !sharp ? "Move closer / focus"
         : !still ? "Hold steady"
         : stableFrames < 12 ? "Almost stable…" : "Frame stable";
+      $("#qualityPill").hidden = false;
 
       if (stableFrames >= 12 && !processing && Date.now() - lastAutoScan > 8000) {
         lastAutoScan = Date.now();
@@ -184,6 +186,7 @@
       $("#statusPill").classList.add("live");
       $("#statusPill span").textContent = "Uploaded · not stored";
       $("#qualityPill").textContent = file.name;
+      $("#qualityPill").hidden = false;
       $("#captureButton").disabled = true;
       renderAnalysis(data, data.frame_width, data.frame_height);
     } catch (error) {
@@ -266,13 +269,22 @@
 
   async function analyzeVlm() {
     $("#vlmButton").disabled = true;
-    const data = await fetch("/analyze-document-vlm", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ user_requested: true }),
-    }).then((response) => response.json());
-    toast(data.message);
-    setTimeout(() => { $("#vlmButton").disabled = false; }, 1200);
+    try {
+      const response = await fetch("/analyze-document-vlm", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ user_requested: true }),
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.detail || "Full document analysis failed");
+      }
+      toast(data.message || "Analysis complete");
+    } catch (error) {
+      toast(error.message || "Full document analysis is not available on this device.");
+    } finally {
+      setTimeout(() => { $("#vlmButton").disabled = false; }, 1200);
+    }
   }
 
   function setStatus(title, message) {
@@ -292,7 +304,50 @@
     window.FalconFeedback.init();
     window.FalconInsights.init();
     setDetails(false);
+
+    // Detect touch/mobile device
+    const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent) || ('ontouchstart' in window);
+    if (isMobile) {
+      $("#startCamera").style.display = "none";
+      $("#startCameraPhone").style.display = "";
+    }
+
     $("#startCamera").onclick = start;
+
+    // Mobile: use native camera input for photo capture
+    $("#startCameraPhone").onclick = () => {
+      $("#phoneCameraInput").click();
+    };
+    $("#phoneCameraInput").onchange = async (event) => {
+      const file = event.target.files?.[0];
+      event.target.value = "";
+      if (!file) return;
+      // Normalize to JPEG for iOS compatibility (HEIC/HEIF may not be supported server-side)
+      let processFile = file;
+      const mimeType = file.type.toLowerCase();
+      if (mimeType === "image/heic" || mimeType === "image/heif" || !file.name.match(/\.(jpg|jpeg|png|webp)$/i)) {
+        try {
+          const objectUrl = URL.createObjectURL(file);
+          const img = await new Promise((res, rej) => {
+            const image = new Image();
+            image.onload = () => res(image);
+            image.onerror = rej;
+            image.src = objectUrl;
+          });
+          const cvs = document.createElement("canvas");
+          cvs.width = img.naturalWidth; cvs.height = img.naturalHeight;
+          cvs.getContext("2d").drawImage(img, 0, 0);
+          const blob = await new Promise(res => cvs.toBlob(res, "image/jpeg", 0.85));
+          URL.revokeObjectURL(objectUrl);
+          processFile = new File([blob], "camera-photo.jpg", { type: "image/jpeg" });
+        } catch (_) {
+          // fallback: try passing original
+          processFile = new File([file], "camera-photo.jpg", { type: "image/jpeg" });
+        }
+      }
+      handleUpload({ target: { files: [processFile], value: "" } });
+    };
+
     $("#captureButton").onclick = analyze;
     $("#vlmButton").onclick = analyzeVlm;
     $("#detailsToggle").onclick = () => setDetails(!$("#scannerShell").classList.contains("details-open"));

frontend/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
   <meta name="theme-color" content="#071a18">
   <title>FalconScan — Customs terms, made clear</title>
-  <link rel="stylesheet" href="/static/styles.css?v=1.1">
+  <link rel="stylesheet" href="/static/styles.css?v=1.2">
 </head>
 <body>
   <header>
@@ -39,13 +39,13 @@
         <canvas id="captureCanvas" hidden></canvas>
         <div id="overlay" class="overlay"></div>
         <div class="corner tl"></div><div class="corner tr"></div><div class="corner bl"></div><div class="corner br"></div>
-        <div id="emptyState" class="empty-state"><div class="lens">◎</div><strong>Camera is ready when you are</strong><span>Position a customs document inside the frame</span><button id="startCamera" class="primary">Start camera</button></div>
+        <div id="emptyState" class="empty-state"><div class="lens">◎</div><strong>Camera is ready when you are</strong><span>Position a customs document inside the frame</span><button id="startCamera" class="primary">Start Camera</button><button id="startCameraPhone" class="primary phone-camera-btn" style="display:none">📷 Use Camera</button><input id="phoneCameraInput" type="file" accept="image/*" capture="environment" hidden></div>
         <div id="scanLine" class="scan-line"></div>
         <div id="statusPill" class="status-pill"><i></i><span>Camera off</span></div>
-        <div id="qualityPill" class="quality-pill">Waiting for camera</div>
+        <div id="qualityPill" class="quality-pill" hidden></div>
         <div id="selectionHint" class="selection-hint" hidden>Select or highlight document text for a live business insight</div>
         <button id="documentInfo" class="document-info" type="button" aria-label="Summarize this document" hidden><span aria-hidden="true">i</span></button>
-        <button id="detailsToggle" class="details-toggle" aria-expanded="false" aria-controls="scanDetails"><span>Scan</span><i aria-hidden="true">⌃</i></button>
+        <button id="detailsToggle" class="details-toggle" aria-expanded="false" aria-controls="scanDetails"><span aria-hidden="true">⊹</span><i aria-hidden="true">⌃</i></button>
       </div>
       <aside id="scanDetails" class="control-panel" aria-hidden="true">
         <button id="detailsClose" class="details-close" aria-label="Close scan details">×</button>
@@ -69,6 +69,6 @@
   <div id="adminModal" class="modal" aria-hidden="true"><div class="admin-card" role="dialog" aria-modal="true"><button class="close" data-close="adminModal">×</button><p class="eyebrow">KNOWLEDGE GOVERNANCE</p><h2>SME correction review</h2><p class="muted">Approve suggestions to make them the official definition.</p><div id="adminList" class="admin-list"></div></div></div>
   <div id="insightModal" class="modal" aria-hidden="true"><div class="insight-card" role="dialog" aria-modal="true" aria-labelledby="insightTitle"><button id="insightClose" class="close" aria-label="Close insight">×</button><p class="eyebrow">LIVE DOCUMENT INSIGHT</p><h2 id="insightTitle">Selection insight</h2><blockquote id="insightSelection"></blockquote><section><small>SUMMARY</small><p id="insightSummary"></p></section><section><small>BUSINESS MEANING</small><p id="insightBusiness"></p></section><div id="insightTerms" class="insight-terms"></div><div class="definition-meta"><span id="insightSource"></span><span id="insightConfidence"></span></div></div></div>
   <div id="toast" class="toast"></div>
-  <script src="/static/insights.js?v=1.1" defer></script><script src="/static/overlay.js?v=1.1" defer></script><script src="/static/feedback.js?v=1.1" defer></script><script src="/static/camera.js?v=1.1" defer></script>
+  <script src="/static/insights.js?v=1.2" defer></script><script src="/static/overlay.js?v=1.2" defer></script><script src="/static/feedback.js?v=1.2" defer></script><script src="/static/camera.js?v=1.2" defer></script>
 </body>
 </html>

frontend/styles.css

@@ -264,6 +264,7 @@ main { width: 100%; max-width: 1320px; margin: auto; padding: 30px 14px calc(64p
 }
 .status-pill { left: 12px; }
 .quality-pill { right: 12px; top: 58px; }
+.quality-pill[hidden] { display: none; }
 .status-pill i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #647570; border-radius: 50%; }
 
 /* Status pill indicator pulsing animation */
@@ -280,11 +281,12 @@ main { width: 100%; max-width: 1320px; margin: auto; padding: 30px 14px calc(64p
 /* Drawer Toggle Control */
 .details-toggle {
   position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%);
-  display: flex; align-items: center; gap: 8px; min-height: 42px;
-  border: 1px solid rgba(255, 255, 255, 0.16); padding: 8px 11px 8px 14px;
+  display: flex; align-items: center; gap: 6px; min-height: 36px;
+  border: 1px solid rgba(255, 255, 255, 0.16); padding: 7px 12px;
   background: rgba(14, 23, 21, 0.85); color: white; border-radius: 99px;
   backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 8px 30px rgba(0,0,0,.4);
-  font-size: 11px; font-weight: 650; transition: border-color 0.2s, background 0.2s;
+  font-size: 14px; font-weight: 650; transition: border-color 0.2s, background 0.2s;
+  white-space: nowrap;
 }
 .details-toggle:hover {
   background: rgba(22, 38, 34, 0.95);