fix(booth): backfill the live-feed plate + make plate search work
Two booth feed fixes: - Plate not showing until refresh. Plate recognition is async/advisory (snapshot.ts recognizePlate → a kind:"read" device_event keyed by the session identity), so it lands AFTER the entry/exit event already shipped over the WS without a plate; a refresh re-fetched via the bulk enrich path and showed it. Added a `plate-recognized` bus event (device-events.ts) emitted when the read is written; ws.ts forwards it; the client patchPlate(identity, plate) (live-store) backfills the already-rendered feed row in place and invalidates the Query-owned active-sessions list. No refresh. - Plate search didn't filter. Both the live-feed (BoothScreen) and active-sessions (ActiveSessions) search haystacks matched the wrong field — the displayed plate is the ENRICHED top-level e.plate/s.plate (set by enrichEvent), not payload.plate (the plate is unsigned, never in the signed payload). Switched the haystacks to the displayed field. Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
This commit is contained in:
@@ -52,6 +52,9 @@ interface LiveState {
|
||||
setLanes: (l: LaneStatus) => void;
|
||||
/** Set lane radar presence (WS hello + each lane-presence push). */
|
||||
setRadar: (r: LanePresence) => void;
|
||||
/** Backfill the enriched plate on every feed event matching `identity` (a late async
|
||||
* recognition that landed after the event's own push). No-op if no row matches. */
|
||||
patchPlate: (identity: string, plate: string) => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
@@ -80,5 +83,10 @@ export const useLiveStore = create<LiveState>((set) => ({
|
||||
upsertDevice: (d) => set((s) => ({ devices: { ...s.devices, [d.deviceId]: d } })),
|
||||
setLanes: (lanes) => set({ lanes }),
|
||||
setRadar: (radar) => set({ radar }),
|
||||
patchPlate: (identity, plate) =>
|
||||
set((s) => {
|
||||
if (!s.feed.some((e) => e.identity === identity && !e.plate)) return s; // nothing to fill
|
||||
return { feed: s.feed.map((e) => (e.identity === identity && !e.plate ? { ...e, plate } : e)) };
|
||||
}),
|
||||
reset: () => set({ status: "connecting", occupancy: null, feed: [], devices: {}, lanes: null, radar: null }),
|
||||
}));
|
||||
|
||||
@@ -19,12 +19,14 @@ type WsMessage =
|
||||
| { kind: "printer-status"; event: unknown }
|
||||
| { kind: "device-status"; event: DeviceStatus }
|
||||
| { kind: "lane-status"; lanes: LaneStatus }
|
||||
| { kind: "lane-presence"; radar: LanePresence };
|
||||
| { kind: "lane-presence"; radar: LanePresence }
|
||||
| { kind: "plate-recognized"; plate: { identity: string; plate: string; direction: "entry" | "exit" } };
|
||||
|
||||
|
||||
export function useLiveFeed(): void {
|
||||
const qc = useQueryClient();
|
||||
const { setStatus, setOccupancy, pushEvent, setDevices, upsertDevice, setLanes, setRadar } = useLiveStore();
|
||||
const { setStatus, setOccupancy, pushEvent, setDevices, upsertDevice, setLanes, setRadar, patchPlate } =
|
||||
useLiveStore();
|
||||
// Hold the socket + reconnect timer across renders; guard against StrictMode
|
||||
// double-invoke and unmount.
|
||||
const sockRef = useRef<WebSocket | null>(null);
|
||||
@@ -64,6 +66,11 @@ export function useLiveFeed(): void {
|
||||
setLanes(msg.lanes);
|
||||
} else if (msg.kind === "lane-presence") {
|
||||
setRadar(msg.radar);
|
||||
} else if (msg.kind === "plate-recognized") {
|
||||
// Backfill the badge on the already-rendered feed row, and refetch the
|
||||
// Query-owned active-sessions list (re-runs enrichEvents → the now-written plate).
|
||||
patchPlate(msg.plate.identity, msg.plate.plate);
|
||||
void qc.invalidateQueries({ queryKey: qk.activeSessions });
|
||||
} else if (msg.kind === "ledger") {
|
||||
setOccupancy(msg.occupancy);
|
||||
pushEvent(msg.event);
|
||||
|
||||
Reference in New Issue
Block a user