The first five minutes, as the product and not as a developer's first run

The first launch was a code box with a link under it, then an empty
Live screen with 'No cameras' in amber in a far corner, then a form
asking for an IP address, and for the first few minutes of all of it
the engine silently downloading 275 MB with nothing on screen but a
stopped-looking status. Walked in a browser with the new mock; nobody
who was not an installer would have got through it.

Now: a welcome that asks the one question a shop owner can answer -
managed from a head office, or on this PC only - with each path in a
sentence; a Getting Started checklist on Live that reads its three steps
from the engine and ticks them itself (recognition ready, camera added
and connected, camera proven by a walk-past), with the one button for
the next step, and that disappears the moment somebody is recognised;
and the model download reported as a percentage in the tray, the
sidebar and the checklist, parsed by the supervisor from the engine's
own progress lines.

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

desktop/frontend/src/views/Live.jsx

@@ -16,7 +16,7 @@ import * as Icon from '../ui/icons.jsx'
 // No camera picture here - the person at the counter is not watching CCTV,
 // and a live video tile costs CPU the recognition pipeline needs. The picture
 // lives on the Cameras screen, where it is a setup tool.
-export default function Live() {
+export default function Live({ onNavigate }) {
   const { data, error } = usePolled(() => api.live(), 3000)
   const { data: pipe } = usePolled(() => api.pipelineStatus(), 5000)
 
@@ -47,6 +47,8 @@ export default function Live() {
 
       <PipelineStrip pipe={pipe} cameras={cameras} up={up} />
 
+      <GettingStarted cameras={cameras} arrivals={arrivals} onNavigate={onNavigate} />
+
       <div className="panel arrivals-panel">
         <div className="panelhead">
           <h3>Who just walked in</h3>
@@ -82,6 +84,65 @@ export default function Live() {
   )
 }
 
+// The first five minutes, as a checklist that ticks itself.
+//
+// Before this the Live screen after install was "Nobody yet" over a row of
+// dashes, with an amber "No cameras" in the far corner. Nothing said what to
+// do next. This says the three things, in order, and each step reads its own
+// state from the engine: recognition ready, a camera added, the camera
+// proven by a walk-past. It disappears on its own once someone has actually
+// been recognised, because at that point the product has explained itself.
+function GettingStarted({ cameras, arrivals, onNavigate }) {
+  const { data: eng } = usePolled(() => api.engineStatus(), 4000)
+  const [hidden, setHidden] = useState(() => { try { return localStorage.getItem('bv.gettingStarted') === 'done' } catch { return false } })
+  const hasCamera = cameras.length > 0
+  const anyUp = cameras.some(c => c.connected)
+  const { data: checks } = usePolled(async () => {
+    const out = {}
+    for (const c of cameras) { try { out[c.camera_id] = await api.placementResult(c.camera_id) } catch { /* not yet */ } }
+    return out
+  }, 10000, [cameras.map(c => c.camera_id).join('|')])
+  const proven = Object.values(checks ?? {}).some(r => r && !r.running && r.verdict === 'good')
+  const recognised = arrivals.length > 0
+
+  if (hidden || recognised) return null
+  const engineReady = Boolean(eng?.reachable && eng?.recognition_model)
+  const progress = eng?.progress
+
+  const steps = [
+    { done: engineReady, now: !engineReady,
+      title: engineReady ? `Recognition ready (${eng.recognition_model})` : progress ? `Downloading ${progress.what}… ${progress.percent}%` : 'Starting recognition…',
+      text: engineReady ? null : 'First start downloads about 275 MB of recognition models. A few minutes on a normal connection; nothing to do meanwhile.' },
+    { done: hasCamera && anyUp, now: engineReady && !(hasCamera && anyUp),
+      title: hasCamera ? (anyUp ? 'Camera connected' : 'Camera added — not connecting yet') : 'Add your camera',
+      text: hasCamera ? (anyUp ? null : 'Check its password and stream path under Cameras → Edit.') : 'Behavision can find it on the network; you type only its password.',
+      action: hasCamera ? null : { label: 'Add camera', go: 'cameras' } },
+    { done: proven, now: hasCamera && anyUp && !proven,
+      title: proven ? 'Camera proven — it can recognise faces' : 'Walk past the camera',
+      text: proven ? null : 'Run Check placement and walk past like a customer for 25 seconds. Only a “good” verdict means it will recognise people.',
+      action: hasCamera && anyUp && !proven ? { label: 'Check placement', go: 'cameras' } : null },
+  ]
+
+  return (
+    <section className="panel starter">
+      <div className="panelhead">
+        <h3>Getting started</h3>
+        <button className="btn sm ghost" onClick={() => { try { localStorage.setItem('bv.gettingStarted', 'done') } catch {} ; setHidden(true) }}>Hide</button>
+      </div>
+      <ol className="steps compact">
+        {steps.map((st, i) => (
+          <li key={i} className={st.done ? 'done' : st.now ? 'now' : ''}>
+            <b>{st.title}</b>
+            {st.text && <span>{st.text}</span>}
+            {st.action && <button className="btn sm primary" onClick={() => onNavigate?.(st.action.go)}>{st.action.label}</button>}
+          </li>
+        ))}
+      </ol>
+      <p className="note">The moment a customer is recognised, this list goes away.</p>
+    </section>
+  )
+}
+
 // One customer, big enough to match against the person in front of you.
 function Arrival({ e, fresh }) {
   const isNew = e.type === 'person.new'