From 4882c9f2fafee9cba76ef8cb79fcb3938fb746fc Mon Sep 17 00:00:00 2001
From: Preston <childrep@vt.edu>
Date: Mon, 21 Sep 2026 22:58:07 -0400
Subject: [PATCH] Change how QR code system works

---
 app/page.tsx                       |  51 ++++++---
 components/match-submission-qr.tsx |  91 +++++++++++++++
 components/offline-readiness.tsx   |   3 +-
 components/qr-relay.tsx            | 178 ++---------------------------
 lib/qr-relay.ts                    |   6 +-
 tests/qr-relay.test.ts             |  48 ++++++++
 6 files changed, 184 insertions(+), 193 deletions(-)
 create mode 100644 components/match-submission-qr.tsx
 create mode 100644 tests/qr-relay.test.ts

diff --git a/app/page.tsx b/app/page.tsx
index e1aa058..37c2667 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -53,6 +53,7 @@ import { TeamTrendChart, type TeamTrend } from '@/components/team-trend-chart';
 import { ScoutingOperations } from '@/components/scouting-operations';
 import { OfflineReadiness } from '@/components/offline-readiness';
 import { QrRelay } from '@/components/qr-relay';
+import { MatchSubmissionQr } from '@/components/match-submission-qr';
 import {
   getCachedValue,
   getDraft,
@@ -61,6 +62,7 @@ import {
   saveCachedValue,
   saveDraft,
   synchronizePendingMutations,
+  type PendingMutation,
 } from '@/lib/offline-db';
 import { observedPoints, type ScoutingPayload } from '@/lib/scouting-metrics';
 import {
@@ -432,6 +434,8 @@ export default function Home() {
   const [submissionStatus, setSubmissionStatus] = useState<
     'draft' | 'queued' | 'synchronized' | 'rejected'
   >('draft');
+  const [submittedMatchMutation, setSubmittedMatchMutation] =
+    useState<PendingMutation | null>(null);
   const eventTeams = eventPack
     ? [
         ...new Set(
@@ -893,7 +897,7 @@ export default function Home() {
     }
     setSaveError('');
     try {
-      await queueMutation({
+      const mutation: PendingMutation = {
         id: scoutEntryMutationId(
           eventPack.event.key,
           currentMatch.key,
@@ -914,7 +918,9 @@ export default function Home() {
           schemaVersion: 1,
           ...currentPayload,
         },
-      });
+      };
+      await queueMutation(mutation);
+      setSubmittedMatchMutation(mutation);
       setQueuedCount((await getPendingMutations()).length);
       setSaved(true);
       setSubmissionStatus('queued');
@@ -1082,6 +1088,7 @@ export default function Home() {
     setSelectedStation(station);
     setSaved(false);
     setSubmissionStatus('draft');
+    setSubmittedMatchMutation(null);
     navigate('Scout');
   }
 
@@ -1779,11 +1786,7 @@ export default function Home() {
               online={online}
               onRefresh={() => loadEventPack(false, true)}
             />
-            <QrRelay
-              organizationId={eventPack?.organizationId ?? ''}
-              eventKey={eventPack?.event.key ?? ''}
-              online={online}
-            />
+            <QrRelay online={online} />
             <Card>
               <CardHeader>
                 <CardTitle>Event coverage</CardTitle>
@@ -2073,18 +2076,28 @@ export default function Home() {
               </Button>
               {(submissionStatus === 'queued' ||
                 submissionStatus === 'synchronized') && (
-                <Button
-                  className="h-12 w-full text-base"
-                  variant="outline"
-                  onClick={continueToNextAssignment}
-                >
-                  {myAssignments.some(
-                    ({ match }) => match && match.key !== selectedMatchKey,
-                  )
-                    ? 'Continue to next assignment'
-                    : 'Return home'}
-                  <ChevronRight />
-                </Button>
+                <>
+                  {submittedMatchMutation && eventPack && (
+                    <MatchSubmissionQr
+                      mutation={submittedMatchMutation}
+                      organizationId={eventPack.organizationId}
+                      eventKey={eventPack.event.key}
+                      online={online}
+                    />
+                  )}
+                  <Button
+                    className="h-12 w-full text-base"
+                    variant="outline"
+                    onClick={continueToNextAssignment}
+                  >
+                    {myAssignments.some(
+                      ({ match }) => match && match.key !== selectedMatchKey,
+                    )
+                      ? 'Continue to next assignment'
+                      : 'Return home'}
+                    <ChevronRight />
+                  </Button>
+                </>
               )}
             </div>
           </div>
diff --git a/components/match-submission-qr.tsx b/components/match-submission-qr.tsx
new file mode 100644
index 0000000..cce9e0a
--- /dev/null
+++ b/components/match-submission-qr.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import QRCode from 'qrcode';
+import { QrCode } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { PendingMutation } from '@/lib/offline-db';
+import {
+  createRelayFrames,
+  ensureRelayDeviceRegistered,
+} from '@/lib/qr-relay';
+
+export function MatchSubmissionQr({
+  mutation,
+  organizationId,
+  eventKey,
+  online,
+}: {
+  mutation: PendingMutation;
+  organizationId: string;
+  eventKey: string;
+  online: boolean;
+}) {
+  const [image, setImage] = useState('');
+  const [message, setMessage] = useState('Preparing match handoff code…');
+
+  useEffect(() => {
+    let cancelled = false;
+    setImage('');
+    setMessage('Preparing match handoff code…');
+    void ensureRelayDeviceRegistered(online)
+      .then((device) =>
+        createRelayFrames(device, organizationId, eventKey, [mutation]),
+      )
+      .then((frames) => {
+        if (frames.length !== 1)
+          throw new Error(
+            'This match contains too much data for one QR code. Shorten the notes and save again.',
+          );
+        return QRCode.toDataURL(frames[0], {
+          width: 420,
+          margin: 1,
+          errorCorrectionLevel: 'M',
+        });
+      })
+      .then((dataUrl) => {
+        if (cancelled) return;
+        setImage(dataUrl);
+        setMessage(
+          'Have a signed-in device with data service scan this code. You can also sync normally when service returns.',
+        );
+      })
+      .catch((error: unknown) => {
+        if (cancelled) return;
+        setMessage(
+          error instanceof Error
+            ? error.message
+            : 'Could not create the match handoff code.',
+        );
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [eventKey, mutation, online, organizationId]);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <QrCode /> Match handoff
+        </CardTitle>
+        <Badge variant="outline">One match</Badge>
+      </CardHeader>
+      <CardContent className="space-y-3 text-center">
+        {image && (
+          <Image
+            unoptimized
+            width={420}
+            height={420}
+            className="mx-auto w-full max-w-[420px] rounded-lg bg-white p-2"
+            src={image}
+            alt="QR code containing this match scouting submission"
+          />
+        )}
+        <p className="text-sm text-muted-foreground">{message}</p>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/offline-readiness.tsx b/components/offline-readiness.tsx
index dd24e9a..73416f8 100644
--- a/components/offline-readiness.tsx
+++ b/components/offline-readiness.tsx
@@ -201,7 +201,8 @@ export function OfflineReadiness({
             ) : (
               <TriangleAlert className="text-amber-500" />
             )}
-            <strong>{relayReady ? 'Registered' : 'Missing'}</strong> QR relay
+            <strong>{relayReady ? 'Registered' : 'Missing'}</strong> match QR
+            handoff
             key
           </span>
           <span>
diff --git a/components/qr-relay.tsx b/components/qr-relay.tsx
index 8e17900..71fcabe 100644
--- a/components/qr-relay.tsx
+++ b/components/qr-relay.tsx
@@ -1,107 +1,27 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import Image from 'next/image';
-import QRCode from 'qrcode';
-import {
-  Camera,
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  QrCode,
-  RadioTower,
-} from 'lucide-react';
+import { Camera, QrCode } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { getPendingMutations } from '@/lib/offline-db';
 import {
   assembleRelayEnvelope,
-  createRelayFrames,
-  ensureRelayDeviceRegistered,
   parseRelayFrame,
 } from '@/lib/qr-relay';
 
-export function QrRelay({
-  organizationId,
-  eventKey,
-  online,
-}: {
-  organizationId: string;
-  eventKey: string;
-  online: boolean;
-}) {
-  const [mode, setMode] = useState<'send' | 'receive'>('send');
-  const [frames, setFrames] = useState<string[]>([]);
-  const [frameIndex, setFrameIndex] = useState(0);
-  const [qrImage, setQrImage] = useState('');
+export function QrRelay({ online }: { online: boolean }) {
   const [message, setMessage] = useState('');
   const [progress, setProgress] = useState({ received: 0, total: 0 });
   const [manualFrame, setManualFrame] = useState('');
-  const [busy, setBusy] = useState(false);
   const videoRef = useRef<HTMLVideoElement>(null);
   const controlsRef = useRef<{ stop(): void } | null>(null);
   const transferRef = useRef('');
   const chunksRef = useRef(new Map<number, string>());
   const uploadingRef = useRef(false);
 
-  useEffect(() => {
-    if (!frames.length) return;
-    void QRCode.toDataURL(frames[frameIndex], {
-      width: 360,
-      margin: 1,
-      errorCorrectionLevel: 'M',
-    }).then(setQrImage);
-  }, [frameIndex, frames]);
-
-  useEffect(() => {
-    if (frames.length < 2) return;
-    const timer = window.setInterval(
-      () => setFrameIndex((index) => (index + 1) % frames.length),
-      1100,
-    );
-    return () => window.clearInterval(timer);
-  }, [frames]);
-
   useEffect(() => () => controlsRef.current?.stop(), []);
 
-  async function buildTransfer() {
-    setBusy(true);
-    setMessage('');
-    try {
-      const [device, pending] = await Promise.all([
-        ensureRelayDeviceRegistered(online),
-        getPendingMutations(),
-      ]);
-      const scoutEntries = pending.filter(
-        (item) => item.entity === 'scoutEntry',
-      );
-      if (!scoutEntries.length)
-        throw new Error(
-          'There are no queued match submissions on this device.',
-        );
-      const nextFrames = await createRelayFrames(
-        device,
-        organizationId,
-        eventKey,
-        scoutEntries,
-      );
-      setFrames(nextFrames);
-      setFrameIndex(0);
-      setMessage(
-        `${Math.min(24, scoutEntries.length)} submission${scoutEntries.length === 1 ? '' : 's'} ready in ${nextFrames.length} QR frame${nextFrames.length === 1 ? '' : 's'}. Keep this screen open until the other device confirms upload.`,
-      );
-    } catch (error) {
-      setMessage(
-        error instanceof Error
-          ? error.message
-          : 'Could not create the QR transfer.',
-      );
-    } finally {
-      setBusy(false);
-    }
-  }
-
   const acceptFrame = useCallback(
     async (text: string) => {
       if (uploadingRef.current) return;
@@ -186,95 +106,12 @@ export function QrRelay({
     <Card>
       <CardHeader>
         <CardTitle>
-          <QrCode /> QR data relay
+          <QrCode /> Scan a scout match
         </CardTitle>
-        <Badge variant="outline">Offline sender → online receiver</Badge>
+        <Badge variant="outline">Online receiving device</Badge>
       </CardHeader>
       <CardContent className="space-y-3">
-        <div className="grid grid-cols-2 gap-2">
-          <Button
-            variant={mode === 'send' ? 'default' : 'outline'}
-            onClick={() => {
-              controlsRef.current?.stop();
-              setMode('send');
-            }}
-          >
-            Show my data
-          </Button>
-          <Button
-            variant={mode === 'receive' ? 'default' : 'outline'}
-            onClick={() => setMode('receive')}
-          >
-            Scan scout data
-          </Button>
-        </div>
-        {mode === 'send' ? (
-          <>
-            {!frames.length ? (
-              <Button
-                className="w-full"
-                onClick={() => void buildTransfer()}
-                disabled={busy || !organizationId || !eventKey}
-              >
-                <RadioTower />
-                {busy ? 'Preparing…' : 'Create transfer QR'}
-              </Button>
-            ) : (
-              <div className="text-center">
-                {qrImage && (
-                  <Image
-                    unoptimized
-                    width={360}
-                    height={360}
-                    className="mx-auto w-full max-w-[360px] rounded-lg bg-white p-2"
-                    src={qrImage}
-                    alt={`QR transfer frame ${frameIndex + 1} of ${frames.length}`}
-                  />
-                )}
-                <div className="mt-2 flex items-center justify-center gap-2">
-                  <Button
-                    size="icon"
-                    variant="outline"
-                    aria-label="Previous QR frame"
-                    onClick={() =>
-                      setFrameIndex(
-                        (frameIndex - 1 + frames.length) % frames.length,
-                      )
-                    }
-                  >
-                    <ChevronLeft />
-                  </Button>
-                  <strong>
-                    Frame {frameIndex + 1} of {frames.length}
-                  </strong>
-                  <Button
-                    size="icon"
-                    variant="outline"
-                    aria-label="Next QR frame"
-                    onClick={() =>
-                      setFrameIndex((frameIndex + 1) % frames.length)
-                    }
-                  >
-                    <ChevronRight />
-                  </Button>
-                </div>
-                <Button
-                  className="mt-2"
-                  size="sm"
-                  variant="outline"
-                  onClick={() =>
-                    void navigator.clipboard
-                      .writeText(frames[frameIndex])
-                      .then(() => setMessage('Current frame copied.'))
-                  }
-                >
-                  <Copy /> Copy current frame
-                </Button>
-              </div>
-            )}
-          </>
-        ) : (
-          <>
+        <>
             <video
               ref={videoRef}
               className="aspect-video w-full rounded-lg bg-black object-cover"
@@ -302,7 +139,7 @@ export function QrRelay({
                 className="mt-2 min-h-24 w-full rounded-lg border bg-transparent p-2 text-xs"
                 value={manualFrame}
                 onChange={(event) => setManualFrame(event.target.value)}
-                placeholder="Paste one T401QR1 frame"
+                placeholder="Paste a Team 401 match QR value"
               />
               <Button
                 size="sm"
@@ -315,8 +152,7 @@ export function QrRelay({
                 Add frame
               </Button>
             </details>
-          </>
-        )}
+        </>
         {message && <p className="text-sm text-muted-foreground">{message}</p>}
       </CardContent>
     </Card>
diff --git a/lib/qr-relay.ts b/lib/qr-relay.ts
index 6d26b8c..c94ec02 100644
--- a/lib/qr-relay.ts
+++ b/lib/qr-relay.ts
@@ -3,10 +3,12 @@ import {
   saveRelayDevice,
   type PendingMutation,
   type RelayDevice,
-} from '@/lib/offline-db';
+} from './offline-db.ts';
 
 export const QR_PREFIX = 'T401QR1';
-const CHUNK_SIZE = 850;
+// A single scouting submission normally fits comfortably in one QR at this
+// size. Multi-frame parsing remains supported for older transfers.
+const CHUNK_SIZE = 1800;
 
 function toBase64Url(bytes: Uint8Array) {
   let binary = '';
diff --git a/tests/qr-relay.test.ts b/tests/qr-relay.test.ts
new file mode 100644
index 0000000..07e95c9
--- /dev/null
+++ b/tests/qr-relay.test.ts
@@ -0,0 +1,48 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import type { PendingMutation, RelayDevice } from '../lib/offline-db.ts';
+import { createRelayFrames, parseRelayFrame } from '../lib/qr-relay.ts';
+
+void test('creates one QR frame for one normal match submission', async () => {
+  const keys = await crypto.subtle.generateKey(
+    { name: 'ECDSA', namedCurve: 'P-256' },
+    true,
+    ['sign', 'verify'],
+  );
+  const device: RelayDevice = {
+    id: 'qr-relay',
+    deviceId: 'test-device',
+    privateKey: keys.privateKey,
+    publicKey: await crypto.subtle.exportKey('jwk', keys.publicKey),
+    registered: true,
+  };
+  const mutation: PendingMutation = {
+    id: 'entry:test',
+    organizationId: 'team-401',
+    entity: 'scoutEntry',
+    operation: 'upsert',
+    createdAt: Date.now(),
+    attempts: 0,
+    payload: {
+      eventKey: '2026vabla',
+      matchKey: '2026vabla_qm1',
+      teamNumber: 401,
+      station: 'red1',
+      seasonYear: 2026,
+      schemaVersion: 1,
+      autoFuel: 12,
+      activeFuel: 35,
+      inactiveFuel: 4,
+      cycles: 7,
+      autoTower: 'None',
+      tower: 'Level 2',
+      notes: 'Consistent scoring with brief defense in the middle of teleop.',
+    },
+  };
+
+  const frames = await createRelayFrames(device, 'team-401', '2026vabla', [
+    mutation,
+  ]);
+  assert.equal(frames.length, 1);
+  assert.equal(parseRelayFrame(frames[0]).total, 1);
+});