Image capture — camera button, image preview, voice annotation, combined upload, client-side resize

app/capture/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || '';
 const DB_NAME = 'bird-capture-queue';
 const STORE_NAME = 'pending';
+const MAX_IMAGE_PX = 1568; // Claude vision optimal max dimension
 
-// IndexedDB queue for offline captures
+// IndexedDB queue
 async function openDB(): Promise<IDBDatabase> {
   return new Promise((resolve, reject) => {
     const req = indexedDB.open(DB_NAME, 1);
@@ -16,12 +17,19 @@ async function openDB(): Promise<IDBDatabase> {
   });
 }
 
-async function queueCapture(blob: Blob, mimeType: string) {
+async function queueCapture(formData: FormData) {
   const db = await openDB();
   const id = Date.now().toString();
+  const audio = formData.get('audio') as Blob | null;
+  const image = formData.get('image') as Blob | null;
   return new Promise<void>((resolve, reject) => {
     const tx = db.transaction(STORE_NAME, 'readwrite');
-    tx.objectStore(STORE_NAME).put({ id, blob, mimeType, timestamp: new Date().toISOString() });
+    tx.objectStore(STORE_NAME).put({
+      id,
+      audio: audio || null,
+      image: image || null,
+      timestamp: new Date().toISOString(),
+    });
     tx.oncomplete = () => resolve();
     tx.onerror = () => reject(tx.error);
   });
@@ -47,10 +55,36 @@ async function removeCapture(id: string) {
   });
 }
 
-async function submitCapture(blob: Blob, mimeType: string): Promise<boolean> {
+// Resize image client-side before upload
+async function resizeImage(file: File): Promise<Blob> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      const { width, height } = img;
+      const maxDim = MAX_IMAGE_PX;
+      let w = width, h = height;
+      if (w > maxDim || h > maxDim) {
+        if (w > h) { h = Math.round(h * maxDim / w); w = maxDim; }
+        else { w = Math.round(w * maxDim / h); h = maxDim; }
+      }
+      const canvas = document.createElement('canvas');
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d')!;
+      ctx.drawImage(img, 0, 0, w, h);
+      canvas.toBlob((blob) => resolve(blob!), 'image/jpeg', 0.88);
+    };
+    img.src = url;
+  });
+}
+
+async function submitCapture(audio: Blob | null, image: Blob | null): Promise<boolean> {
   try {
     const form = new FormData();
-    form.append('audio', blob, 'capture.webm');
+    if (audio) form.append('audio', audio, 'capture.webm');
+    if (image) form.append('image', image, 'capture.jpg');
     const res = await fetch(`${API_URL}/api/capture`, { method: 'POST', body: form });
     return res.ok;
   } catch {
@@ -58,23 +92,28 @@ async function submitCapture(blob: Blob, mimeType: string): Promise<boolean> {
   }
 }
 
+type CaptureMode = 'idle' | 'image-selected' | 'recording' | 'submitting' | 'saved' | 'queued' | 'error';
+
 export default function CapturePage() {
-  const [state, setState] = useState<'idle' | 'recording' | 'transcribing' | 'saved' | 'queued' | 'error'>('idle');
+  const [mode, setMode] = useState<CaptureMode>('idle');
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [imageBlob, setImageBlob] = useState<Blob | null>(null);
   const [countdown, setCountdown] = useState(0);
-  const [recentCaptures, setRecentCaptures] = useState<{name: string, duration: string}[]>([]);
   const [pendingCount, setPendingCount] = useState(0);
+  const [recentCaptures, setRecentCaptures] = useState<{name: string}[]>([]);
+
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const chunksRef = useRef<Blob[]>([]);
   const streamRef = useRef<MediaStream | null>(null);
   const wakeLockRef = useRef<any>(null);
   const countdownRef = useRef<any>(null);
   const mimeTypeRef = useRef('audio/webm');
-  const MAX_SECONDS = 600;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const MAX_SECONDS = 120; // shorter for annotation — 2 min max
 
   useEffect(() => {
     loadRecentCaptures();
-    checkPendingQueue();
+    checkPending();
-    // Retry queue on focus (when user returns to app)
     window.addEventListener('focus', retryQueue);
     window.addEventListener('online', retryQueue);
     return () => {
@@ -93,31 +132,54 @@ export default function CapturePage() {
     } catch {}
   }
 
-  async function checkPendingQueue() {
+  async function checkPending() {
     try {
-      const pending = await getPendingCaptures();
+      const p = await getPendingCaptures();
-      setPendingCount(pending.length);
+      setPendingCount(p.length);
     } catch {}
   }
 
   async function retryQueue() {
     try {
       const pending = await getPendingCaptures();
-      if (pending.length === 0) return;
       for (const item of pending) {
-        const ok = await submitCapture(item.blob, item.mimeType);
+        const ok = await submitCapture(item.audio, item.image);
-        if (ok) {
+        if (ok) await removeCapture(item.id);
-          await removeCapture(item.id);
-        }
       }
       const remaining = await getPendingCaptures();
       setPendingCount(remaining.length);
-      if (remaining.length < pending.length) {
+      if (remaining.length < pending.length) loadRecentCaptures();
-        await loadRecentCaptures();
-      }
     } catch {}
   }
 
+  // ── Image selection ────────────────────────────────────────────────────────
+
+  function handleCameraClick() {
+    fileInputRef.current?.click();
+  }
+
+  async function handleImageSelected(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const resized = await resizeImage(file);
+    setImageBlob(resized);
+    const preview = URL.createObjectURL(resized);
+    setImagePreview(preview);
+    setMode('image-selected');
+    // Reset input so same file can be reselected
+    e.target.value = '';
+  }
+
+  function clearImage() {
+    if (imagePreview) URL.revokeObjectURL(imagePreview);
+    setImagePreview(null);
+    setImageBlob(null);
+    setMode('idle');
+    stopRecording();
+  }
+
+  // ── Voice recording ────────────────────────────────────────────────────────
+
   async function acquireWakeLock() {
     try {
       if ('wakeLock' in navigator) {
@@ -145,29 +207,17 @@ export default function CapturePage() {
       mr.onstop = async () => {
         streamRef.current?.getTracks().forEach(t => t.stop());
         streamRef.current = null;
-        if (chunksRef.current.length === 0) return;
+        if (chunksRef.current.length === 0) {
-        setState('transcribing');
+          // No audio recorded — submit image only
-        const blob = new Blob(chunksRef.current, { type: mimeTypeRef.current });
+          await submitFinal(null);
-        const ok = await submitCapture(blob, mimeTypeRef.current);
+          return;
-        if (ok) {
-          setState('saved');
-          await loadRecentCaptures();
-          setTimeout(() => setState('idle'), 3000);
-        } else {
-          // Queue for later — don't lose the capture
-          try {
-            await queueCapture(blob, mimeTypeRef.current);
-            await checkPendingQueue();
-            setState('queued');
-          } catch {
-            setState('error');
-          }
-          setTimeout(() => setState('idle'), 4000);
         }
+        const audioBlob = new Blob(chunksRef.current, { type: mimeTypeRef.current });
+        await submitFinal(audioBlob);
       };
       mr.start(1000);
       mediaRecorderRef.current = mr;
-      setState('recording');
+      setMode('recording');
       setCountdown(MAX_SECONDS);
       await acquireWakeLock();
       countdownRef.current = setInterval(() => {
@@ -177,24 +227,64 @@ export default function CapturePage() {
         });
       }, 1000);
     } catch {
-      setState('error');
+      setMode('error');
-      setTimeout(() => setState('idle'), 3000);
+      setTimeout(() => setMode(imageBlob ? 'image-selected' : 'idle'), 3000);
     }
   }
 
   function stopRecording() {
     if (countdownRef.current) { clearInterval(countdownRef.current); countdownRef.current = null; }
     releaseWakeLock();
-    mediaRecorderRef.current?.stop();
+    if (mediaRecorderRef.current?.state === 'recording') {
+      mediaRecorderRef.current.stop();
+    }
   }
 
-  function handleTap() {
+  // ── Submission ─────────────────────────────────────────────────────────────
-    if (state === 'recording') stopRecording();
+
-    else if (state === 'idle') startRecording();
+  async function submitFinal(audioBlob: Blob | null) {
+    setMode('submitting');
+    const ok = await submitCapture(audioBlob, imageBlob);
+    if (ok) {
+      setMode('saved');
+      if (imagePreview) URL.revokeObjectURL(imagePreview);
+      setImagePreview(null);
+      setImageBlob(null);
+      await loadRecentCaptures();
+      setTimeout(() => setMode('idle'), 3000);
+    } else {
+      try {
+        const form = new FormData();
+        if (audioBlob) form.append('audio', audioBlob, 'capture.webm');
+        if (imageBlob) form.append('image', imageBlob, 'capture.jpg');
+        await queueCapture(form);
+        await checkPending();
+        setMode('queued');
+      } catch {
+        setMode('error');
+      }
+      if (imagePreview) URL.revokeObjectURL(imagePreview);
+      setImagePreview(null);
+      setImageBlob(null);
+      setTimeout(() => setMode('idle'), 4000);
+    }
   }
 
-  const isRecording = state === 'recording';
+  async function submitImageOnly() {
-  const isBusy = state === 'transcribing';
+    await submitFinal(null);
+  }
+
+  // ── Tap handler for voice button ───────────────────────────────────────────
+
+  function handleVoiceTap() {
+    if (mode === 'recording') stopRecording();
+    else if (mode === 'image-selected') startRecording();
+    else if (mode === 'idle') startRecording(); // voice-only capture
+  }
+
+  const isRecording = mode === 'recording';
+  const isBusy = mode === 'submitting';
+  const hasImage = imageBlob !== null;
 
   return (
     <div style={{
@@ -205,7 +295,7 @@ export default function CapturePage() {
       alignItems: 'center',
       justifyContent: 'space-between',
       paddingTop: 'max(48px, env(safe-area-inset-top))',
-      paddingBottom: 'max(48px, env(safe-area-inset-bottom))',
+      paddingBottom: 'max(32px, env(safe-area-inset-bottom))',
       paddingLeft: 'max(24px, env(safe-area-inset-left))',
       paddingRight: 'max(24px, env(safe-area-inset-right))',
       fontFamily: 'var(--font-mono)',
@@ -218,52 +308,104 @@ export default function CapturePage() {
         </p>
         {pendingCount > 0 && (
           <p style={{ fontSize: '9px', color: '#c8821a', letterSpacing: '0.1em', margin: '4px 0 0', textTransform: 'uppercase' }}>
-            {pendingCount} capture{pendingCount > 1 ? 's' : ''} queued — will sync when online
+            {pendingCount} capture{pendingCount > 1 ? 's' : ''} queued
           </p>
         )}
       </div>
 
-      {/* Main button area */}
+      {/* Main area */}
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '40px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '28px', width: '100%', maxWidth: '320px' }}>
 
-        {/* Waveform */}
+        {/* Image preview */}
-        <div style={{
+        {imagePreview && (
-          display: 'flex', alignItems: 'center', gap: '3px', height: '40px',
+          <div style={{ position: 'relative', width: '100%' }}>
-          opacity: isRecording ? 1 : 0.2, transition: 'opacity 0.4s ease',
+            <img
-        }}>
+              src={imagePreview}
-          {[4,8,16,6,24,10,32,14,20,8,12,28,6,18,4,22,10,16,8,4].map((h, i) => (
+              alt="capture preview"
+              style={{
+                width: '100%',
+                maxHeight: '240px',
+                objectFit: 'cover',
+                borderRadius: '12px',
+                border: '1px solid var(--border)',
+                display: 'block',
+              }}
+            />
+            <button
+              onClick={clearImage}
+              style={{
+                position: 'absolute', top: '8px', right: '8px',
+                background: 'rgba(0,0,0,0.6)', border: 'none',
+                borderRadius: '50%', width: '28px', height: '28px',
+                color: '#fff', cursor: 'pointer', fontSize: '16px',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}
+            >×</button>
+          </div>
+        )}
+
+        {/* Waveform — shows during recording */}
+        {isRecording && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '3px', height: '32px' }}>
+            {[4,8,16,6,24,10,32,14,20,8,12,28,6,18,4].map((h, i) => (
               <div key={i} style={{
                 width: '2px', height: `${h}px`, background: 'var(--accent)', borderRadius: '1px',
-              animation: isRecording ? `wave ${0.8 + (i % 4) * 0.2}s ease-in-out infinite alternate` : 'none',
+                animation: `wave ${0.8 + (i % 4) * 0.2}s ease-in-out infinite alternate`,
               }} />
             ))}
           </div>
+        )}
 
-        {/* Big button */}
+        {/* Capture buttons row */}
+        <div style={{ display: 'flex', gap: '24px', alignItems: 'center', justifyContent: 'center' }}>
+
+          {/* Camera button — always visible, opens image picker */}
           <button
-          onPointerUp={handleTap}
+            onClick={handleCameraClick}
+            disabled={isBusy || isRecording}
+            style={{
+              width: '72px', height: '72px', borderRadius: '50%',
+              border: `1.5px solid ${hasImage ? 'var(--accent)' : 'var(--border2)'}`,
+              background: hasImage ? 'var(--accent-light)' : 'var(--bg2)',
+              cursor: isBusy || isRecording ? 'not-allowed' : 'pointer',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              transition: 'all 0.2s', touchAction: 'manipulation',
+              opacity: isBusy || isRecording ? 0.5 : 1,
+            }}
+            aria-label="Take photo or choose image"
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke={hasImage ? 'var(--accent)' : 'var(--text3)'} strokeWidth="1.5">
+              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+              <circle cx="12" cy="13" r="4"/>
+            </svg>
+          </button>
+
+          {/* Mic / submit button — large center */}
+          <button
+            onPointerUp={handleVoiceTap}
             disabled={isBusy}
             style={{
-            width: '160px', height: '160px', borderRadius: '50%',
+              width: '120px', height: '120px', borderRadius: '50%',
               border: `1.5px solid ${isRecording ? '#a32d2d' : 'var(--accent)'}`,
               background: isRecording ? 'rgba(163,45,45,0.08)' : 'var(--bg2)',
               cursor: isBusy ? 'not-allowed' : 'pointer',
               display: 'flex', alignItems: 'center', justifyContent: 'center',
-            transition: 'all 0.3s ease', touchAction: 'manipulation',
+              transition: 'all 0.3s', touchAction: 'manipulation',
               animation: isBusy ? 'none' : isRecording ? 'recordPulse 1.5s ease-in-out infinite' : 'idlePulse 3s ease-in-out infinite',
             }}
-          aria-label={isRecording ? 'Stop recording' : 'Start recording'}
+            aria-label={isRecording ? 'Stop recording' : 'Record voice annotation'}
           >
             {isBusy ? (
-            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" style={{ color: 'var(--accent)' }}>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style={{ color: 'var(--accent)' }}>
                 <circle cx="12" cy="12" r="3" opacity="0.6">
                   <animate attributeName="opacity" values="0.6;1;0.6" dur="1s" repeatCount="indefinite"/>
                 </circle>
               </svg>
             ) : isRecording ? (
-            <div style={{ width: '24px', height: '24px', background: '#a32d2d', borderRadius: '4px' }} />
+              <div style={{ width: '20px', height: '20px', background: '#a32d2d', borderRadius: '4px' }} />
             ) : (
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5">
                 <path d="M12 1a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4z"/>
                 <path d="M5 11a7 7 0 0 0 14 0"/>
                 <line x1="12" y1="18" x2="12" y2="22"/>
@@ -272,56 +414,84 @@ export default function CapturePage() {
             )}
           </button>
 
-        {/* Status */}
+          {/* Submit image-only button — visible only when image selected and not recording */}
-        <div style={{ textAlign: 'center', minHeight: '36px' }}>
+          {hasImage && !isRecording && !isBusy ? (
-          {state === 'idle' && (
+            <button
-            <p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
+              onClick={submitImageOnly}
-              tap to capture
+              style={{
-            </p>
+                width: '72px', height: '72px', borderRadius: '50%',
+                border: '1.5px solid var(--accent)',
+                background: 'var(--accent-light)',
+                cursor: 'pointer',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                transition: 'all 0.2s', touchAction: 'manipulation',
+              }}
+              aria-label="Save image without annotation"
+            >
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2">
+                <polyline points="20 6 9 17 4 12"/>
+              </svg>
+            </button>
+          ) : (
+            <div style={{ width: '72px', height: '72px' }} />
           )}
-          {state === 'recording' && (
+        </div>
-            <>
+
-              <p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 10px' }}>
+        {/* Recording progress */}
-                recording
+        {isRecording && (
-              </p>
+          <div style={{ width: '100%' }}>
-              <div style={{ width: '160px', height: '2px', background: 'var(--border)', borderRadius: '1px', overflow: 'hidden', marginBottom: '8px' }}>
+            <div style={{ width: '100%', height: '2px', background: 'var(--border)', borderRadius: '1px', overflow: 'hidden', marginBottom: '6px' }}>
               <div style={{
                 height: '100%',
                 width: `${((MAX_SECONDS - countdown) / MAX_SECONDS) * 100}%`,
-                  background: countdown <= 30 ? '#a32d2d' : 'var(--accent)',
+                background: countdown <= 15 ? '#a32d2d' : 'var(--accent)',
-                  borderRadius: '1px',
+                borderRadius: '1px', transition: 'width 1s linear',
-                  transition: 'width 1s linear, background 0.5s ease',
               }} />
             </div>
-              <p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.08em', margin: 0 }}>
+            <p style={{ fontSize: '10px', color: 'var(--text3)', margin: 0, textAlign: 'center' }}>
               {(() => {
-                  const elapsed = MAX_SECONDS - countdown;
-                  const em = Math.floor(elapsed / 60);
-                  const es = elapsed % 60;
                 const rm = Math.floor(countdown / 60);
                 const rs = countdown % 60;
-                  return `${em}:${es.toString().padStart(2,'0')} / ${rm}:${rs.toString().padStart(2,'0')} left`;
+                return `${rm}:${rs.toString().padStart(2,'0')} left`;
               })()}
             </p>
-            </>
+          </div>
         )}
-          {state === 'transcribing' && (
+
-            <p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
+        {/* Status */}
-              transcribing...
+        <div style={{ textAlign: 'center', minHeight: '20px' }}>
+          {mode === 'idle' && (
+            <p style={{ fontSize: '10px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
+              tap camera or mic
             </p>
           )}
-          {state === 'saved' && (
+          {mode === 'image-selected' && (
-            <p style={{ fontSize: '11px', color: 'var(--accent)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
+            <p style={{ fontSize: '10px', color: 'var(--text3)', letterSpacing: '0.10em', textTransform: 'uppercase', margin: 0 }}>
+              annotate with voice or save now
+            </p>
+          )}
+          {mode === 'recording' && (
+            <p style={{ fontSize: '10px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
+              recording annotation
+            </p>
+          )}
+          {mode === 'submitting' && (
+            <p style={{ fontSize: '10px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
+              {hasImage ? 'processing image...' : 'transcribing...'}
+            </p>
+          )}
+          {mode === 'saved' && (
+            <p style={{ fontSize: '10px', color: 'var(--accent)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
               saved ✓
             </p>
           )}
-          {state === 'queued' && (
+          {mode === 'queued' && (
-            <p style={{ fontSize: '11px', color: '#c8821a', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
+            <p style={{ fontSize: '10px', color: '#c8821a', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
               queued — will sync when online
             </p>
           )}
-          {state === 'error' && (
+          {mode === 'error' && (
-            <p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
+            <p style={{ fontSize: '10px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
               error — try again
             </p>
           )}
@@ -330,19 +500,22 @@ export default function CapturePage() {
 
       {/* Recent captures */}
       <div style={{ width: '100%', maxWidth: '320px' }}>
-        <p style={{ fontSize: '9px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 10px' }}>
+        <p style={{ fontSize: '9px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 8px' }}>
           recent captures
         </p>
         {recentCaptures.length === 0 ? (
           <p style={{ fontSize: '10px', color: 'var(--text3)', margin: 0, opacity: 0.5 }}>none yet</p>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
             {recentCaptures.slice(0, 4).map((c, i) => (
               <div key={i} style={{
-                display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 10px',
+                display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 10px',
                 background: 'var(--bg2)', borderRadius: '6px', border: '1px solid var(--border)',
               }}>
-                <div style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--accent)', flexShrink: 0 }} />
+                <div style={{
+                  width: '6px', height: '6px', borderRadius: '50%', flexShrink: 0,
+                  background: c.name.includes('image') ? '#c8821a' : 'var(--accent)',
+                }} />
                 <span style={{ fontSize: '10px', color: 'var(--text2)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                   {c.name}
                 </span>
@@ -352,6 +525,16 @@ export default function CapturePage() {
         )}
       </div>
 
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        capture="environment"
+        onChange={handleImageSelected}
+        style={{ display: 'none' }}
+      />
+
       <style>{`
         @keyframes idlePulse {
           0%, 100% { box-shadow: 0 0 0 0 rgba(45,158,107,0); }