slop

webui/src/App.jsx

@@ -172,11 +172,11 @@ function MobileFeatureTabs({
             <div className={`flex flex-col ${themeGapClass}`}>
               <NeatoCard />
               <LiftCard />
+              <BalanceBoardPanel />
               <BarcodeGamesPanel />
               <OdometerPanel />
               <ButtonBoxPanel />
               <KinectPanel />
-              <BalanceBoardPanel />
             </div>
           </TabPanel>
           <TabPanel id="vip" keepMounted>

webui/src/components/BalanceBoardPanel/index.jsx

@@ -7,25 +7,53 @@ import { useSessionSelector } from '../../context/SessionContext.jsx';
 import { isFeatureEnabled } from '../../lib/features.js';
 import CardFrame from '../CardFrame/index.jsx';
 
-const EMPTY_FRAME = { totalKg: 0, batteryPercent: null };
+const EMPTY_CORNERS = {
+  topLeft: 0,
+  topRight: 0,
+  bottomLeft: 0,
+  bottomRight: 0,
+};
+const EMPTY_FRAME = { totalKg: 0, batteryPercent: null, corners: EMPTY_CORNERS };
 
 function formatWeight(value) {
   const weight = Number(value);
   return Number.isFinite(weight) ? `${weight.toFixed(2)} kg` : '0.00 kg';
 }
 
-function statusPresentation(value) {
-  const status = String(value || 'starting');
-  if (status === 'connected') return { label: 'Connected', tone: 'border-emerald-600 bg-emerald-950 text-emerald-200' };
-  if (status === 'zeroing') return { label: 'Zeroing', tone: 'border-violet-600 bg-violet-950 text-violet-200' };
-  if (status === 'pairing') return { label: 'Pairing', tone: 'border-sky-600 bg-sky-950 text-sky-200' };
-  if (status === 'waiting-for-sync') return { label: 'Waiting for red Sync', tone: 'border-amber-600 bg-amber-950 text-amber-200' };
-  if (status === 'waiting') return { label: 'Waiting for front button', tone: 'border-amber-600 bg-amber-950 text-amber-200' };
-  if (status === 'sleeping') return { label: 'Sleeping', tone: 'border-slate-600 bg-slate-900 text-slate-200' };
-  if (status === 'connecting') return { label: 'Connecting', tone: 'border-sky-600 bg-sky-950 text-sky-200' };
-  if (status === 'connection-failed') return { label: 'Connection failed', tone: 'border-red-600 bg-red-950 text-red-200' };
-  if (status === 'error') return { label: 'Error', tone: 'border-red-600 bg-red-950 text-red-200' };
-  return { label: 'Starting', tone: 'border-slate-600 bg-slate-900 text-slate-200' };
+function finiteNumber(value) {
+  if (value == null || value === '') return null;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+
+function centerOfPressure(corners) {
+  const topLeft = Math.max(0, finiteNumber(corners.topLeft) || 0);
+  const topRight = Math.max(0, finiteNumber(corners.topRight) || 0);
+  const bottomLeft = Math.max(0, finiteNumber(corners.bottomLeft) || 0);
+  const bottomRight = Math.max(0, finiteNumber(corners.bottomRight) || 0);
+  const total = topLeft + topRight + bottomLeft + bottomRight;
+
+  // An empty board naturally has tiny load-cell noise. Keep the marker centered
+  // and subdued until there is enough weight for its position to mean anything;
+  // once loaded, map the normalized left/right and top/bottom balance into the
+  // safe interior of the illustrated board.
+  if (total < 0.5) return { left: 50, top: 50, active: false };
+  const horizontal = ((topRight + bottomRight) - (topLeft + bottomLeft)) / total;
+  const vertical = ((bottomLeft + bottomRight) - (topLeft + topRight)) / total;
+  return {
+    left: 50 + Math.max(-1, Math.min(1, horizontal)) * 37,
+    top: 50 + Math.max(-1, Math.min(1, vertical)) * 37,
+    active: true,
+  };
+}
+
+function CornerReading({ className, label, value }) {
+  return (
+    <div className={`absolute rounded bg-slate-950/80 px-1 py-0.5 text-center shadow ${className}`}>
+      <div className="text-[0.62rem] text-slate-400">{label}</div>
+      <div className="font-mono text-sm font-semibold text-slate-100">{formatWeight(value)}</div>
+    </div>
+  );
 }
 
 export default function BalanceBoardPanel() {
@@ -39,15 +67,35 @@ export default function BalanceBoardPanel() {
 function BalanceBoardPanelContent() {
   const socket = useSocket();
   const board = useSessionSelector((state) => state.session?.balanceBoard || null);
+  const role = useSessionSelector((state) => state.session?.role || null);
   const [frame, setFrame] = useState(EMPTY_FRAME);
+  const [unpairing, setUnpairing] = useState(false);
+  const [adminMessage, setAdminMessage] = useState('');
 
   useEffect(() => {
     if (!socket) return undefined;
     const handleFrame = (next = {}) => setFrame({ ...EMPTY_FRAME, ...next });
+
+    // Socket.IO room membership belongs to one server-side connection, not to
+    // the long-lived browser socket object. A brief network interruption gives
+    // the browser a new server-side socket while React keeps this component and
+    // this effect mounted, so subscribing only here would silently lose all
+    // later weight frames. Rejoin after every connection as well as immediately
+    // for the already-connected case.
+    const subscribe = () => {
+      socket.emit('balanceBoard:subscribe', {}, () => {});
+    };
+
     socket.on('balanceBoard:frame', handleFrame);
-    socket.emit('balanceBoard:subscribe', {}, () => {});
+    socket.on('connect', subscribe);
+    subscribe();
+
     return () => {
       socket.off('balanceBoard:frame', handleFrame);
+      socket.off('connect', subscribe);
+      // The panel is the only consumer represented by this component. Leaving
+      // the room on unmount prevents an inactive route or tab from continuing
+      // to receive the board's continuous measurement stream.
       socket.emit('balanceBoard:unsubscribe');
     };
   }, [socket]);
@@ -55,33 +103,95 @@ function BalanceBoardPanelContent() {
   // Mask the previous reading immediately when disconnected. Keeping the last
   // socket frame in state avoids effect-driven state resets and stale flashes.
   const liveFrame = board?.connected ? frame : EMPTY_FRAME;
-  const battery = Number.isFinite(Number(liveFrame.batteryPercent))
-    ? Number(liveFrame.batteryPercent)
-    : Number.isFinite(Number(board?.batteryPercent))
-      ? Number(board.batteryPercent)
-      : null;
-  const presentation = statusPresentation(board?.status);
-  const actions = (
-    <span className={`rounded border px-1.5 py-0.5 text-xs font-semibold ${presentation.tone}`}>
-      {presentation.label}
-    </span>
-  );
+  const corners = { ...EMPTY_CORNERS, ...(liveFrame.corners || {}) };
+  const center = centerOfPressure(corners);
+  const liveBattery = finiteNumber(liveFrame.batteryPercent);
+  const sessionBattery = finiteNumber(board?.batteryPercent);
+  const battery = liveBattery ?? sessionBattery;
+  const sleeping = board?.status === 'sleeping';
+  const isAdmin = role === 'admin' || role === 'lockdown';
+
+  const unpair = () => {
+    if (unpairing || !board?.paired) return;
+    if (!window.confirm('Unpair this Balance Board and require the red Sync button to pair it again?')) return;
+    setUnpairing(true);
+    setAdminMessage('');
+    socket.emit('balanceBoard:unpair', {}, (response = {}) => {
+      setUnpairing(false);
+      if (response.error) {
+        setAdminMessage(response.error);
+      } else if (response.warning) {
+        setAdminMessage('Board forgotten locally, but BlueZ reported a bond-removal warning.');
+      } else {
+        setAdminMessage('Board unpaired. Press the red Sync button to pair it again.');
+      }
+    });
+  };
 
   return (
-    <CardFrame title="Balance Board" actions={actions} bodyClassName="p-2">
-      <div className="flex min-w-0 items-center justify-between gap-4 rounded border border-slate-700 bg-slate-950/50 p-2">
-        <div className="min-w-0">
-          <div className="font-mono text-4xl font-bold leading-none text-white">
-            {formatWeight(liveFrame.totalKg)}
+    <CardFrame
+      title="Balance Board"
+      className="relative w-full"
+      bodyClassName="text-sm text-slate-200"
+      actions={battery != null ? (
+        <span className="font-mono text-xs text-slate-300">{Math.round(battery)}% battery</span>
+      ) : null}
+    >
+      {sleeping ? (
+        <div className="absolute inset-0 z-20 flex items-center justify-center rounded-md bg-slate-950/85 px-2 text-center">
+          <div className="space-y-0.5">
+            <p className="text-lg font-semibold text-slate-100">Balance Board is asleep</p>
+            <p className="text-sm text-slate-300">Press the front power button on the board to wake it.</p>
           </div>
-          <p className="mt-2 break-words text-sm text-slate-300">{board?.detail || 'Starting Balance Board support.'}</p>
-          {board?.address ? <p className="mt-1 font-mono text-[0.65rem] text-slate-600">{board.address}</p> : null}
         </div>
-        {battery != null ? (
-          <div className="shrink-0 text-right text-xs text-slate-400">
-            Battery<br /><span className="font-mono text-base text-slate-200">{Math.round(battery)}%</span>
+      ) : null}
+
+      <div className="grid gap-0.5 md:grid-cols-[minmax(0,1.25fr)_minmax(9rem,0.75fr)]">
+        <section className="surface-muted p-1">
+          <div className="relative mx-auto aspect-[1.35/1] w-full max-w-md overflow-hidden rounded-[1.5rem] border-2 border-slate-500 bg-gradient-to-b from-slate-700 to-slate-800 shadow-inner">
+            <div className="absolute inset-[12%] rounded-[1rem] border border-slate-500/70 bg-slate-900/35" />
+            <CornerReading className="left-1 top-1" label="Top left" value={corners.topLeft} />
+            <CornerReading className="right-1 top-1" label="Top right" value={corners.topRight} />
+            <CornerReading className="bottom-1 left-1" label="Bottom left" value={corners.bottomLeft} />
+            <CornerReading className="bottom-1 right-1" label="Bottom right" value={corners.bottomRight} />
+            <div
+              aria-label="Center of pressure"
+              className={`absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 shadow-lg transition-all duration-100 ${
+                center.active
+                  ? 'border-cyan-100 bg-cyan-400 shadow-cyan-400/50'
+                  : 'border-slate-400 bg-slate-600 opacity-50'
+              }`}
+              style={{ left: `${center.left}%`, top: `${center.top}%` }}
+            />
+            <div className="absolute bottom-0.5 left-1/2 h-1.5 w-8 -translate-x-1/2 rounded-full bg-sky-400/70" />
           </div>
-        ) : null}
+        </section>
+
+        <div className="grid content-start gap-0.5">
+          <section className="surface-muted px-1 py-1.5 text-center">
+            <div className="text-xs text-slate-400">Total weight</div>
+            <div className="mt-0.5 font-mono text-4xl font-bold leading-none text-white">
+              {formatWeight(liveFrame.totalKg)}
+            </div>
+          </section>
+
+          {isAdmin ? (
+            <section className="surface-muted grid gap-0.5 p-0.5">
+              {board?.address ? (
+                <div className="truncate text-center font-mono text-[0.65rem] text-slate-500">{board.address}</div>
+              ) : null}
+              <button
+                type="button"
+                className="button-dark w-full text-xs disabled:opacity-50"
+                disabled={!board?.paired || unpairing}
+                onClick={unpair}
+              >
+                {unpairing ? 'Unpairing…' : 'Unpair board'}
+              </button>
+              {adminMessage ? <p className="text-center text-xs text-slate-400">{adminMessage}</p> : null}
+            </section>
+          ) : null}
+        </div>
       </div>
     </CardFrame>
   );

webui/src/components/RightPaneTabs/index.jsx

@@ -421,11 +421,11 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
             <div className={`flex flex-col ${themeGapClass}`}>
               <NeatoCard />
               <LiftCard />
+              <BalanceBoardPanel />
               <BarcodeGamesPanel />
               <OdometerPanel />
               <ButtonBoxPanel />
               <KinectPanel />
-              <BalanceBoardPanel />
             </div>
           </TabPanel>