The shop PC's avatar had the same V1 collision

Fixed on the web arrivals feed and not here, which is the failure this
codebase already warns about: two surfaces disagreeing about one fact.
Taking the first letter of each word of "Visitor 13" gives "V1" - and so
do "Visitor 10" and "Visitor 15", so three different customers wear the
same badge and it reads as the V-1 reference for a fourth.

Shows the number itself, same rule as the web app. customerRef, not
ref: React reserves that prop name and it would never arrive.

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

desktop/frontend/dist/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Behavision</title>
-    <script type="module" crossorigin src="./assets/index-B3nvDQ-a.js"></script>
+    <script type="module" crossorigin src="./assets/index-B3NH0cQK.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-XjqO50wd.css">
   </head>
   <body>

desktop/frontend/src/views/CustomerForm.jsx

@@ -57,6 +57,7 @@ export default function CustomerForm({ customer, session, onClose, onSaved }) {
       <div className="panel">
         <div className="who">
           <CustomerPhoto photo={shown} name={customer.full_name || customer.label}
+                         customerRef={customer.ref}
                          onBroken={() => setPhoto({ available: false,
                            reason: 'The photo could not be loaded.' })} />
           <div className="grow">

desktop/frontend/src/views/CustomerPhoto.jsx

@@ -30,16 +30,31 @@ export function useCustomerPhoto(id) {
 
 // No photo is the normal case — images are off by default — so this renders
 // initials, not an error.
-export default function CustomerPhoto({ photo, name, onBroken }) {
+export default function CustomerPhoto({ photo, name, customerRef, onBroken }) {
   if (photo?.available) {
     return <img className="avatar" src={photo.url} alt={`Photo of ${name}`}
                 onError={onBroken} />
   }
-  const initials = String(name || '').split(/\s+/).filter(Boolean).slice(0, 2)
-    .map(w => w[0].toUpperCase()).join('') || '?'
   return (
     <div className="avatar none" role="img" aria-label={`No photo of ${name}`}>
-      <span>{initials}</span>
+      <span>{avatarText(name, customerRef)}</span>
     </div>
   )
 }
+
+// Initials of a name a human typed; the NUMBER for a customer the system named
+// itself. Taking the first letter of each word of "Visitor 13" gives "V1" —
+// which is also what "Visitor 10" and "Visitor 15" give, so three different
+// people wear the same badge, and it reads as the V-1 reference for a fourth.
+// Same fix as the web app's arrivals feed; the two must not disagree.
+//
+// customerRef, not `ref`: React reserves that prop name and it would never
+// reach this component.
+function avatarText(name, customerRef) {
+  const auto = /^Visitor (\d+)$/.exec(String(name || '').trim())
+  if (auto) return auto[1]
+  const n = /^V-(\d+)$/.exec(String(customerRef || ''))
+  if (n) return n[1]
+  return String(name || '').split(/\s+/).filter(Boolean).slice(0, 2)
+    .map(w => w[0].toUpperCase()).join('') || '?'
+}