Behavision/desktop/frontend/src/views/Live.jsx

import { useEffect, useRef, useState } from 'react'
import { api } from '../bridge.js'
import { usePolled, fmtTime } from '../hooks.js'
import * as Icon from '../ui/icons.jsx'

// The shop floor screen.
//
// Rebuilt around what somebody standing at the counter is actually here for:
// WHO JUST WALKED IN. The previous version led with four large stat boxes and
// left arrivals as a thin list of "person.seen" rows in the corner — the least
// actionable content taking the most space, and the product's whole reason for
// existing rendered as a log.
//
// Now: a status strip that answers "is this working" in one line, and arrivals
// as cards big enough to recognise a customer from while looking up at them.
// 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() {
  const { data, error } = usePolled(() => api.live(), 3000)
  const { data: pipe } = usePolled(() => api.pipelineStatus(), 5000)

  const cameras = data?.stats?.cameras ?? []
  const gallery = data?.stats?.gallery ?? {}
  const events = data?.events ?? []

  // fraction_below_gate is the number that decides a site: what share of the
  // faces this camera saw were too poor to enrol. Surfaced rather than buried,
  // because a high value looks exactly like "a quiet day".
  const worst = cameras.reduce((acc, c) => {
    const f = c?.pipeline?.best_quality?.fraction_below_gate
    return typeof f === 'number' && f > acc ? f : acc
  }, 0)
  const up = cameras.filter(c => c.connected).length

  const arrivals = events.filter(e => e.type === 'person.new' || e.type === 'person.seen')
  const freshest = useFreshest(arrivals[0])

  return (
    <div className="page">
      <header>
        <h2>Live</h2>
        <p>Who is in the shop, and whether it is reaching head office.</p>
      </header>

      {error && <div className="err"><Icon.Warning size={15} />{error}</div>}

      <PipelineStrip pipe={pipe} cameras={cameras} up={up} />

      <div className="panel arrivals-panel">
        <div className="panelhead">
          <h3>Who just walked in</h3>
          {arrivals.length > 0 && <span className="note">{arrivals.length} today</span>}
        </div>
        <div className="panelbody flush">
          {arrivals.length === 0
            ? <div className="empty">
                <Icon.NoFaces size={34} />
                <b>Nobody yet</b>
                <p>Customers appear here the moment a camera recognises a face.</p>
              </div>
            : <div className="arrivals">
                {arrivals.slice(0, 30).map((e, i) => (
                  <Arrival key={`${e.ts}-${i}`} e={e} fresh={i === 0 && freshest} />
                ))}
              </div>}
        </div>
      </div>

      <div className="metrics" style={{ marginTop: 'var(--sp-4)' }}>
        <Metric k="People known" v={gallery.identities ?? '—'} />
        <Metric k="Sightings" v={gallery.sightings ?? '—'} />
        <Metric k="Cameras live" v={cameras.length ? `${up}/${cameras.length}` : '—'}
                tone={!cameras.length ? null : up === 0 ? 'bad' : up < cameras.length ? 'warn' : 'ok'} />
        <Metric k="Faces too poor to use"
                v={cameras.length ? `${Math.round(worst * 100)}%` : '—'}
                tone={worst > 0.5 ? 'bad' : worst > 0.2 ? 'warn' : 'ok'}
                s={worst > 0.5 ? 'Most visitors are being missed — move the camera'
                               : 'Share of faces below the enrolment gate'} />
      </div>
    </div>
  )
}

// One customer, big enough to match against the person in front of you.
function Arrival({ e, fresh }) {
  const isNew = e.type === 'person.new'
  const name = e.data?.label || 'Unrecognised'
  const bits = [e.data?.gender, e.data?.age ?? e.data?.age_range, e.data?.emotion].filter(Boolean)
  const sim = typeof e.data?.similarity === 'number' ? e.data.similarity : null

  return (
    <article className={`arrival ${isNew ? 'is-new' : 'is-seen'} ${fresh ? 'fresh' : ''}`}>
      <div className="avatar">{avatarText(name)}</div>
      <div className="who">
        <div className="name">{name}</div>
        <div className="meta">
          {e.camera_id}
          {bits.length > 0 && <> · {bits.join(', ')}</>}
          {sim !== null && !isNew && <> · match {sim.toFixed(2)}</>}
        </div>
      </div>
      <div className="right">
        <span className={`tag ${isNew ? 'new' : 'seen'}`}>{isNew ? 'new' : 'returning'}</span>
        <span className="when">{fmtTime(e.ts)}</span>
      </div>
    </article>
  )
}

// "Visitor 13" must show 13, not V1 — initials() would give the same two
// characters to Visitor 10, 13 and 15, and read as the reference V-1 for a
// fourth person. Found by looking at the screen, not by a test.
function avatarText(name) {
  const auto = /^Visitor (\d+)$/.exec(String(name).trim())
  if (auto) return auto[1]
  const words = String(name).trim().split(/\s+/).filter(Boolean)
  if (!words.length) return '?'
  return (words[0][0] + (words[1]?.[0] ?? '')).toUpperCase()
}

// One line, above everything, answering the question every other screen is a
// detail of: is this shop working, and is anything leaving it.
function PipelineStrip({ pipe, cameras, up }) {
  if (!pipe) return null

  // A PC set up on its own is not "not linked yet" — nothing is coming, and an
  // idle dot beside a count of zero reads as a fault.
  if (pipe.standalone) {
    return (
      <div className="statusbar">
        <span className="item"><i className="dot ok" /><b>Running on this PC only</b></span>
        <span className="sep" />
        <span className="item note">Recognition and customers stay here.</span>
        <span className="grow" />
        <span className="item note"><Icon.Signal size={14} />{up} of {cameras.length} cameras</span>
      </div>
    )
  }

  const stuck = pipe.claimed && !pipe.broker_up
  const tone = !pipe.claimed ? 'idle' : pipe.broker_up ? 'ok' : 'bad'
  const text = !pipe.claimed ? 'Not linked to head office'
    : pipe.broker_up ? 'Sending to head office' : 'Offline — saving locally'

  return (
    <div className="statusbar">
      <span className="item">
        {pipe.broker_up ? <Icon.Cloud size={15} /> : <Icon.CloudOff size={15} />}
        <i className={`dot ${tone}`} /><b>{text}</b>
      </span>
      <span className="sep" />
      <span className="item note">{pipe.accepted} recorded today</span>
      {pipe.queued > 0 && (
        <span className={`item note ${stuck ? 'warn' : ''}`}>{pipe.queued} waiting to send</span>
      )}
      {pipe.dropped > 0 && (
        <span className="item note bad"><Icon.Warning size={14} />{pipe.dropped} lost — this PC was offline too long</span>
      )}
      <span className="grow" />
      <span className="item note"><Icon.Signal size={14} />{up} of {cameras.length} cameras</span>
    </div>
  )
}

function Metric({ k, v, s, tone }) {
  return (
    <div className={`metric ${tone ?? ''}`}>
      <div className="metric-k">{k}</div>
      <div className="metric-v">{v}</div>
      {s && <div className="metric-s">{s}</div>}
    </div>
  )
}

// True for a few seconds after a genuinely new arrival, so the top card can
// announce itself once. Keyed on the timestamp rather than the array, which
// changes identity on every poll.
function useFreshest(top) {
  const [fresh, setFresh] = useState(false)
  const seen = useRef(null)
  useEffect(() => {
    if (!top || top.ts === seen.current) return
    const first = seen.current === null
    seen.current = top.ts
    if (first) return              // do not flash the whole list on mount
    setFresh(true)
    const id = setTimeout(() => setFresh(false), 1200)
    return () => clearTimeout(id)
  }, [top?.ts])
  return fresh
}