Behavision: face recognition for retail, edge to head office

Five components that ship as one product:

- behavision/  the recognition engine. RTSP ingest, YuNet detection, IoU
               tracking, ArcFace embeddings, a FAISS/SQLite gallery, and a
               FastAPI dashboard. Identity is decided once per TRACK from an
               average of at least three embeddings, never per frame.
- agent/       the Go edge agent: supervises the engine, holds a durable
               spool, and drains it to MQTT. Nothing is acked before the
               broker confirms.
- desktop/     the shop PC application (Wails + React + tray).
- server/      the cloud API, MQTT consumer, reports and assistant.
- web/         platform.loyaly.ai, the head-office app, embedded in the
               server binary.

The gallery stores 512-float embeddings and timestamps - no images unless
`app.store_faces` is switched on. Those embeddings are biometric personal
data under GDPR and India's DPDP: template inversion reconstructs a
recognisable face from an ArcFace vector, so data/behavision.db is treated
as a biometric database and DELETE /api/visitors/{id} is a real erasure.

CLAUDE.md carries the reasoning behind every non-obvious decision here,
including the ones that were measured and the ones that were wrong first.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HViLj9gYNRtSr7YVZmW5sn

desktop/frontend/src/views/Customers.jsx

@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import { api } from '../bridge.js'
+import { usePolled, fmtDate } from '../hooks.js'
+import CustomerForm from './CustomerForm.jsx'
+
+// The customer database, and the form staff fill in when someone walks in.
+export default function Customers({ session }) {
+  const [query, setQuery] = useState('')
+  const [selected, setSelected] = useState(null)
+  const { data, error, reload } = usePolled(
+    () => api.customers(query, 200), 30000, [query])
+
+  const rows = data ?? []
+  const named = rows.filter(r => r.has_profile).length
+
+  return (
+    <div className="page">
+      <header>
+        <h2>Customers</h2>
+        <p>Everyone this business has recognised. Fill in details once and they
+           are known at every store.</p>
+      </header>
+
+      {error && <div className="err">{error}</div>}
+
+      <div className="grid cols-4" style={{ marginBottom: 16 }}>
+        <Stat label="Known people" value={rows.length || '—'} />
+        <Stat label="With details" value={named || '—'}
+              sub={rows.length ? `${Math.round(100 * named / rows.length)}% captured` : null} />
+        <Stat label="Returning" value={rows.filter(r => r.visit_count > 1).length || '—'} />
+        <Stat label="With consent" value={rows.filter(r => r.has_consent).length || '—'} />
+      </div>
+
+      <div className="card">
+        <div style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
+          <input className="field" style={{ flex: 1, margin: 0, background: 'var(--ground)',
+                   border: '1px solid var(--line)', borderRadius: 6, padding: '8px 10px' }}
+                 placeholder="Search by name or phone"
+                 value={query} onChange={e => setQuery(e.target.value)} />
+          <button className="btn" onClick={reload}>Refresh</button>
+        </div>
+
+        {rows.length === 0
+          ? <div className="empty">
+              No customers yet. They appear here the first time a camera sees them.
+            </div>
+          : <div className="tablewrap">
+              <table>
+                <thead>
+                  <tr>
+                    <th>Customer</th><th>Phone</th>
+                    <th className="num">Visits</th>
+                    <th>First seen</th><th>Last seen</th><th>Details</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map(c => (
+                    <tr key={c.id} className="click" onClick={() => setSelected(c)}>
+                      <td>{c.full_name || <span className="note">{c.label}</span>}</td>
+                      <td className="mono">{c.phone || '—'}</td>
+                      <td className="num">{c.visit_count}</td>
+                      <td>{fmtDate(c.first_seen_at)}</td>
+                      <td>{fmtDate(c.last_seen_at)}</td>
+                      <td>
+                        {c.has_profile
+                          ? <span className="pill ok"><i className="dot ok" />captured</span>
+                          : <span className="pill warn"><i className="dot warn" />needed</span>}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>}
+      </div>
+
+      {selected && (
+        <CustomerForm customer={selected} session={session}
+                      onClose={() => setSelected(null)}
+                      onSaved={() => { setSelected(null); reload() }} />
+      )}
+    </div>
+  )
+}
+
+function Stat({ label, value, sub }) {
+  return (
+    <div className="card stat">
+      <h3>{label}</h3><div className="value">{value}</div>
+      {sub && <div className="sub">{sub}</div>}
+    </div>
+  )
+}