Capture — offline queue via IndexedDB, retry on focus/online, queued state

app/capture/page.tsx

@@ -3,11 +3,66 @@
 import { useState, useRef, useEffect } from 'react';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || '';
+const DB_NAME = 'bird-capture-queue';
+const STORE_NAME = 'pending';
+
+// IndexedDB queue for offline captures
+async function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, 1);
+    req.onupgradeneeded = () => req.result.createObjectStore(STORE_NAME, { keyPath: 'id' });
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function queueCapture(blob: Blob, mimeType: string) {
+  const db = await openDB();
+  const id = Date.now().toString();
+  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.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+async function getPendingCaptures(): Promise<any[]> {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readonly');
+    const req = tx.objectStore(STORE_NAME).getAll();
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function removeCapture(id: string) {
+  const db = await openDB();
+  return new Promise<void>((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readwrite');
+    tx.objectStore(STORE_NAME).delete(id);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+async function submitCapture(blob: Blob, mimeType: string): Promise<boolean> {
+  try {
+    const form = new FormData();
+    form.append('audio', blob, 'capture.webm');
+    const res = await fetch(`${API_URL}/api/capture`, { method: 'POST', body: form });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
 
 export default function CapturePage() {
-  const [state, setState] = useState<'idle' | 'recording' | 'transcribing' | 'saved' | 'error'>('idle');
+  const [state, setState] = useState<'idle' | 'recording' | 'transcribing' | 'saved' | 'queued' | 'error'>('idle');
   const [countdown, setCountdown] = useState(0);
   const [recentCaptures, setRecentCaptures] = useState<{name: string, duration: string}[]>([]);
+  const [pendingCount, setPendingCount] = useState(0);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const chunksRef = useRef<Blob[]>([]);
   const streamRef = useRef<MediaStream | null>(null);
@@ -18,6 +73,14 @@ export default function CapturePage() {
 
   useEffect(() => {
     loadRecentCaptures();
+    checkPendingQueue();
+    // Retry queue on focus (when user returns to app)
+    window.addEventListener('focus', retryQueue);
+    window.addEventListener('online', retryQueue);
+    return () => {
+      window.removeEventListener('focus', retryQueue);
+      window.removeEventListener('online', retryQueue);
+    };
   }, []);
 
   async function loadRecentCaptures() {
@@ -30,6 +93,31 @@ export default function CapturePage() {
     } catch {}
   }
 
+  async function checkPendingQueue() {
+    try {
+      const pending = await getPendingCaptures();
+      setPendingCount(pending.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);
+        if (ok) {
+          await removeCapture(item.id);
+        }
+      }
+      const remaining = await getPendingCaptures();
+      setPendingCount(remaining.length);
+      if (remaining.length < pending.length) {
+        await loadRecentCaptures();
+      }
+    } catch {}
+  }
+
   async function acquireWakeLock() {
     try {
       if ('wakeLock' in navigator) {
@@ -55,28 +143,26 @@ export default function CapturePage() {
       const mr = new MediaRecorder(streamRef.current, { mimeType });
       mr.ondataavailable = e => { if (e.data.size > 0) chunksRef.current.push(e.data); };
       mr.onstop = async () => {
-        // Release microphone immediately after stopping
         streamRef.current?.getTracks().forEach(t => t.stop());
         streamRef.current = null;
-
         if (chunksRef.current.length === 0) return;
         setState('transcribing');
-        try {
         const blob = new Blob(chunksRef.current, { type: mimeTypeRef.current });
-          const form = new FormData();
+        const ok = await submitCapture(blob, mimeTypeRef.current);
-          form.append('audio', blob, 'capture.webm');
+        if (ok) {
-          const res = await fetch(`${API_URL}/api/capture`, { method: 'POST', body: form });
-          if (res.ok) {
           setState('saved');
           await loadRecentCaptures();
           setTimeout(() => setState('idle'), 3000);
         } else {
-            setState('error');
+          // Queue for later — don't lose the capture
-            setTimeout(() => setState('idle'), 3000);
+          try {
-          }
+            await queueCapture(blob, mimeTypeRef.current);
+            await checkPendingQueue();
+            setState('queued');
           } catch {
             setState('error');
-          setTimeout(() => setState('idle'), 3000);
+          }
+          setTimeout(() => setState('idle'), 4000);
         }
       };
       mr.start(1000);
@@ -127,35 +213,27 @@ export default function CapturePage() {
 
       {/* Header */}
       <div style={{ textAlign: 'center' }}>
-        <p style={{
+        <p style={{ fontSize: '10px', letterSpacing: '0.15em', color: 'var(--text3)', textTransform: 'uppercase', margin: 0 }}>
-          fontSize: '10px',
-          letterSpacing: '0.15em',
-          color: 'var(--text3)',
-          textTransform: 'uppercase',
-          margin: 0,
-        }}>
           Bird — field recorder
         </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
+          </p>
+        )}
       </div>
 
       {/* Main button area */}
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '40px' }}>
 
-        {/* Waveform — decorative */}
+        {/* Waveform */}
         <div style={{
-          display: 'flex',
+          display: 'flex', alignItems: 'center', gap: '3px', height: '40px',
-          alignItems: 'center',
+          opacity: isRecording ? 1 : 0.2, transition: 'opacity 0.4s ease',
-          gap: '3px',
-          height: '40px',
-          opacity: isRecording ? 1 : 0.2,
-          transition: 'opacity 0.4s ease',
         }}>
           {[4,8,16,6,24,10,32,14,20,8,12,28,6,18,4,22,10,16,8,4].map((h, i) => (
             <div key={i} style={{
-              width: '2px',
+              width: '2px', height: `${h}px`, background: 'var(--accent)', borderRadius: '1px',
-              height: `${h}px`,
-              background: 'var(--accent)',
-              borderRadius: '1px',
               animation: isRecording ? `wave ${0.8 + (i % 4) * 0.2}s ease-in-out infinite alternate` : 'none',
             }} />
           ))}
@@ -166,17 +244,12 @@ export default function CapturePage() {
           onPointerUp={handleTap}
           disabled={isBusy}
           style={{
-            width: '160px',
+            width: '160px', height: '160px', borderRadius: '50%',
-            height: '160px',
-            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',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            alignItems: 'center',
+            transition: 'all 0.3s ease', touchAction: 'manipulation',
-            justifyContent: 'center',
-            transition: 'all 0.3s ease',
-            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'}
@@ -220,7 +293,7 @@ export default function CapturePage() {
                   transition: 'width 1s linear, background 0.5s ease',
                 }} />
               </div>
-              <p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.08em', margin: 0, fontFamily: 'var(--font-mono)' }}>
+              <p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.08em', margin: 0 }}>
                 {(() => {
                   const elapsed = MAX_SECONDS - countdown;
                   const em = Math.floor(elapsed / 60);
@@ -242,6 +315,11 @@ export default function CapturePage() {
               saved ✓
             </p>
           )}
+          {state === 'queued' && (
+            <p style={{ fontSize: '11px', color: '#c8821a', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
+              queued — will sync when online
+            </p>
+          )}
           {state === 'error' && (
             <p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
               error — try again
@@ -261,19 +339,13 @@ export default function CapturePage() {
           <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
             {recentCaptures.slice(0, 4).map((c, i) => (
               <div key={i} style={{
-                display: 'flex',
+                display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 10px',
-                alignItems: 'center',
+                background: 'var(--bg2)', borderRadius: '6px', border: '1px solid var(--border)',
-                gap: '8px',
-                padding: '8px 10px',
-                background: 'var(--bg2)',
-                borderRadius: '6px',
-                border: '1px solid var(--border)',
               }}>
                 <div style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--accent)', flexShrink: 0 }} />
                 <span style={{ fontSize: '10px', color: 'var(--text2)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                   {c.name}
                 </span>
-                <span style={{ fontSize: '9px', color: 'var(--text3)' }}>{c.duration}</span>
               </div>
             ))}
           </div>