The shop app gets its help panel, and its last two old screens catch up

Ask Behavision: a panel beside any screen that talks to the head-office
assistant as the signed-in user - setup questions and 'is my shop
working' answered by the same thing, without leaving the app. The
assistant's prompt now knows how the product is set up (installation
codes, adding a camera, what a placement verdict means, the model
download on first run), so it is the help and not only the analyst. A
PC running on its own has nobody to ask and gets the essentials as text.

Cameras and Customers were still on the pre-redesign markup - the add
camera drawer ran off the right edge of the window because it used a
class the new stylesheet never sized. Both are rebuilt: cameras as
picture-led cards with connection and 'proven' as two separate claims
and a placement check laid out as the two steps it is; the customer
record as a proper sheet.

mock.js renders the app in a browser with fake bindings
(?mock=fresh|standalone|claimed, dev server only), so a screen can be
put in front of somebody without a Windows build. It is how these were
reviewed.

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

desktop/frontend/src/views/Assistant.jsx

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from 'react'
+import { api, message } from '../bridge.js'
+import * as Icon from '../ui/icons.jsx'
+import logo from '../assets/loyaly-mark.png'
+
+// The help. A conversation with the head-office assistant, which answers from
+// the shop's own data and knows how the product is set up - so "why is nobody
+// being recognised" and "how do I add my camera" are both answered here, by
+// the same thing, without leaving the app.
+//
+// The history lives in this component and is resent whole; nothing is stored
+// anywhere. A PC running on its own has no head office to ask and is told so.
+const SUGGESTED = [
+  'How do I add my camera?',
+  'Is everything working right now?',
+  'Why has nobody been recognised today?',
+  'Where do I get an installation code?',
+]
+
+export default function Assistant({ session, onClose }) {
+  const [turns, setTurns] = useState([])
+  const [draft, setDraft] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState(null)
+  const scroller = useRef(null)
+  const standalone = session?.standalone
+
+  useEffect(() => { scroller.current?.scrollTo({ top: 1e9, behavior: 'smooth' }) }, [turns, busy])
+
+  async function ask(text) {
+    const q = (text ?? draft).trim()
+    if (!q || busy) return
+    const history = [...turns, { role: 'user', text: q }]
+    setTurns(history); setDraft(''); setBusy(true); setError(null)
+    try {
+      const a = await api.ask(history.map(t => ({ role: t.role, text: t.text })))
+      setTurns([...history, { role: 'assistant', text: a.text, used: a.used ?? [] }])
+    } catch (e) {
+      setError(message(e))
+      setTurns(turns) // the question stays in the box, not in the transcript
+      setDraft(q)
+    } finally { setBusy(false) }
+  }
+
+  return (
+    <aside className="helper" role="dialog" aria-label="Ask Behavision">
+      <header className="helperhead">
+        <img src={logo} alt="" />
+        <div>
+          <b>Ask Behavision</b>
+          <span>Setup help, and what your shop is doing right now.</span>
+        </div>
+        <button className="close" onClick={onClose} aria-label="Close"><Icon.Close size={16} /></button>
+      </header>
+
+      <div className="helperbody" ref={scroller}>
+        {standalone && (
+          <div className="helpernote">
+            <Icon.CloudOff size={16} />
+            <div>
+              <b>This PC runs on its own</b>
+              <span>The assistant lives at head office. Link this PC to a shop to ask it questions; the basics are below.</span>
+            </div>
+          </div>
+        )}
+        {turns.length === 0 && (
+          <div className="helperintro">
+            <p>Ask in plain words. It reads your shop’s own cameras and arrivals, and it knows how the setup works.</p>
+            <div className="chips">
+              {SUGGESTED.map(s => <button key={s} className="chip" onClick={() => ask(s)} disabled={busy || standalone}>{s}</button>)}
+            </div>
+            {standalone && <QuickHelp />}
+          </div>
+        )}
+        {turns.map((t, i) => (
+          <div key={i} className={`turn ${t.role}`}>
+            <div className="bubble">{t.text}</div>
+            {t.used?.length > 0 && <span className="used">Looked at: {t.used.join(', ')}</span>}
+          </div>
+        ))}
+        {busy && <div className="turn assistant"><div className="bubble thinking"><span /><span /><span /></div></div>}
+        {error && <div className="err"><Icon.Warning size={15} />{error}</div>}
+      </div>
+
+      <form className="helperask" onSubmit={e => { e.preventDefault(); ask() }}>
+        <input value={draft} onChange={e => setDraft(e.target.value)} disabled={busy || standalone}
+               placeholder={standalone ? 'Link this PC to head office to ask' : 'Ask anything about this shop…'} />
+        <button className="btn primary" disabled={busy || standalone || !draft.trim()} aria-label="Ask"><Icon.Chevron size={16} /></button>
+      </form>
+    </aside>
+  )
+}
+
+// What a PC with no head office can still be told. Static on purpose: there is
+// nobody to ask, and a chat box that always fails is worse than a short list.
+function QuickHelp() {
+  return (
+    <dl className="quickhelp">
+      <dt>Adding a camera</dt>
+      <dd>Cameras → Add camera. The address is on a label on the camera; pick the make and the stream path fills itself in. Test, then save.</dd>
+      <dt>Proving it works</dt>
+      <dd>Press Check placement and walk past the camera like a customer for 25 seconds. Only “good” means it can recognise faces — otherwise move it to head height, facing the way people approach.</dd>
+      <dt>Nothing showing on Live</dt>
+      <dd>Check the camera is Connected and Proven. A camera aimed from above or the side streams fine and recognises nobody.</dd>
+      <dt>Linking to head office later</dt>
+      <dd>Use the link button at the bottom of the sidebar and type an installation code from head office. Nothing recorded here is lost.</dd>
+    </dl>
+  )
+}