Phase 5: Supervisor and Stall screens, weld map, heat table, clock and CO verification

The shop at parity with the old build. Supervisor screen (department chips, CO headline, numbers, Change orders
on hold, station grid with clocks and CO tags, boards) and Stall screen (station picker, hero, My packets,
Submitted). Shop steps on the packet page: assign with station, welder picker and stamp; pull back; Start, Pause,
Resume; Submit with a PIN signature and the missing steps as links; review with Send to Q.C., Return to station
and Skip Q.C. route; a lead's read-only review. Weld map (pdf.js viewer with pan, pinch, zoom, full screen; marks
with leader lines; weld sheet; weld record with field CAS; carried marks). Heat map (heat table placed, dragged,
sized, removed; legacy amber tags; borrowed heat map read-only). Checklist tab with templates from settings.
VOID stamps on voided pages. Change orders: CO-n labels, supervisor verify with signature, approval copies the
heat table to the new sheet and the BOM merge keeps the shop's values. Server clock of record with VISUAL ticket
hours beside it. Presence per packet over SSE. Migration 0006 (bfx, bfy, carried_from, checklist_templates).
New endpoints /api/shop/board, /api/shop/stations, /api/shop/stall, /api/departments/{code}/people.

Tests: policy oracle for every shop action, role and status; clock arithmetic; concurrent inserts; CO apply;
frontend geometry, heat table, clock, checklist, weld sheet, screens; seven Playwright scenarios. Docs updated.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

frontend/src/auth/roles.test.ts

@@ -1,7 +1,8 @@
-import { describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { memoryStorage } from "../screens/supervisor/memoryStorage";
 import { DEPARTMENTS } from "../test/auth";
 import type { Department } from "./types";
-import { firstScreen, homePath, roleChipClass, roleFromKind, roleLabel, screensFor } from "./roles";
+import { firstScreen, homePath, landingScreen, LAST_SCREEN_KEY, levelIn, myShopDepts, rememberScreen, roleChipClass, roleFromKind, roleLabel, screensFor } from "./roles";
 
 const depts = DEPARTMENTS as Department[];
 
@@ -36,4 +37,43 @@ describe("roles", () => {
     expect(roleChipClass("admin")).toBe("rchip admin");
     expect(roleChipClass("clerical")).toBe("rchip");
   });
+
+  describe("shop departments", () => {
+    it("levelIn gives the highest level in a department, admin is supervisor everywhere", () => {
+      expect(levelIn(["shop:03:worker"], "03")).toBe("worker");
+      expect(levelIn(["shop:03:worker", "shop:03:lead"], "03")).toBe("lead");
+      expect(levelIn(["clerical", "shop:06:supervisor"], "06")).toBe("supervisor");
+      expect(levelIn(["shop:06:supervisor"], "03")).toBeNull();
+      expect(levelIn(["clerical"], "03")).toBeNull();
+      expect(levelIn(["admin"], "09")).toBe("supervisor");
+    });
+
+    it("myShopDepts lists lead and supervisor departments for the Supervisor screen, every one for the Stall", () => {
+      const roles = ["clerical", "shop:09:worker", "shop:06:supervisor", "shop:03:lead"];
+      expect(myShopDepts(roles, "supervisor")).toEqual(["03", "06"]);
+      expect(myShopDepts(roles, "stall")).toEqual(["03", "06", "09"]);
+      expect(myShopDepts(["shop:03:worker"], "supervisor")).toEqual([]);
+      expect(myShopDepts(["shop:03:worker", "shop:03:lead"], "stall")).toEqual(["03"]);
+      expect(myShopDepts(["admin"], "supervisor", ["14", "03"])).toEqual(["03", "14"]);
+      expect(myShopDepts(["warehouse"], "stall", ["03"])).toEqual([]);
+    });
+  });
+
+  describe("landing screen", () => {
+    beforeEach(() => {
+      vi.stubGlobal("localStorage", memoryStorage());
+    });
+
+    it("lands on the last screen picked while it is still allowed", () => {
+      expect(landingScreen(["stall", "supervisor"], null)).toBe("supervisor");
+      expect(landingScreen(["stall", "supervisor"], "stall")).toBe("stall");
+      expect(landingScreen(["clerical"], "stall")).toBe("clerical");
+      rememberScreen("stall");
+      expect(window.localStorage.getItem(LAST_SCREEN_KEY)).toBe("stall");
+      expect(homePath(["supervisor", "stall"])).toBe("/stall");
+      expect(homePath(["clerical", "qc"])).toBe("/clerical");
+      window.localStorage.setItem(LAST_SCREEN_KEY, "nonsense");
+      expect(homePath(["supervisor", "stall"])).toBe("/supervisor");
+    });
+  });
 });

frontend/src/auth/roles.ts

@@ -79,17 +79,76 @@ export function orderScreens(list: readonly string[]): Screen[] {
   return SCREENS.filter((s) => list.includes(s));
 }
 
-/** The screen a user lands on: the first non-admin screen, else admin, else null. */
+/** The first non-admin screen, else admin, else null. */
 export function firstScreen(list: readonly string[]): Screen | null {
   const ordered = orderScreens(list);
   return ordered.find((s) => s !== "admin") ?? ordered[0] ?? null;
 }
 
+/** localStorage key for the last screen picked in the role switcher (the old build's ps.role). */
+export const LAST_SCREEN_KEY = "ps.role";
+
+/** The last screen picked, or null. Storage can be blocked; that reads as nothing remembered. */
+export function lastScreen(): Screen | null {
+  try {
+    const v = window.localStorage.getItem(LAST_SCREEN_KEY) ?? undefined;
+    return isScreen(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+
+export function rememberScreen(s: Screen): void {
+  try {
+    window.localStorage.setItem(LAST_SCREEN_KEY, s);
+  } catch {
+    // Nothing to do: the next sign-in lands on the first screen.
+  }
+}
+
+/** The screen a user lands on: the last one picked while it is still allowed, else the first non-admin screen. */
+export function landingScreen(list: readonly string[], last: Screen | null = lastScreen()): Screen | null {
+  const ordered = orderScreens(list);
+  if (last && ordered.includes(last)) return last;
+  return firstScreen(ordered);
+}
+
 export function homePath(list: readonly string[]): string {
-  const s = firstScreen(list);
+  const s = landingScreen(list);
   return s ? `/${s}` : "/account";
 }
 
+/**
+ * The user's level in one shop department (the old levelIn): the highest shop role there, or null.
+ * Admin counts as supervisor everywhere.
+ */
+export function levelIn(roles: readonly string[], dept: string): ShopLevel | null {
+  if (roles.includes("admin")) return "supervisor";
+  let best = -1;
+  for (const r of roles) {
+    const p = parseRole(r);
+    if (p.shop && p.dept === dept) best = Math.max(best, SHOP_LEVELS.indexOf(p.level));
+  }
+  return best < 0 ? null : (SHOP_LEVELS[best] ?? null);
+}
+
+/**
+ * The shop departments a user works in for a screen (the old myDepts), in code order.
+ * "supervisor": where the user is lead or supervisor. "stall": every shop department at any level.
+ * Admin gets every shop department in `allShop`.
+ */
+export function myShopDepts(roles: readonly string[], screen: "supervisor" | "stall", allShop: readonly string[] = []): string[] {
+  const out = new Set<string>();
+  if (roles.includes("admin")) allShop.forEach((d) => out.add(d));
+  for (const r of roles) {
+    const p = parseRole(r);
+    if (!p.shop) continue;
+    if (screen === "supervisor" && p.level === "worker") continue;
+    out.add(p.dept);
+  }
+  return [...out].sort((a, b) => a.localeCompare(b));
+}
+
 const OFFICE_LABELS: Record<string, string> = {
   admin: "Admin",
   clerical: "Clerical",

frontend/src/auth/useEvents.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { eventsUrl, othersOn } from "./useEvents";
+
+describe("packet presence", () => {
+  it("opens the stream with the packet in view", () => {
+    expect(eventsUrl(null)).toBe("/api/events");
+    expect(eventsUrl(42)).toBe("/api/events?packet_id=42");
+  });
+
+  it("lists the other people on the packet once each, sorted, without me", () => {
+    const users = [
+      { user_id: "w", display_name: "Wes Super", screen: "supervisor", packet_id: 7 },
+      { user_id: "a", display_name: "Andy Welder", screen: "stall", packet_id: "7" },
+      { user_id: "a", display_name: "Andy Welder", screen: "stall", packet_id: 7 },
+      { user_id: "me", display_name: "Me", screen: "stall", packet_id: 7 },
+      { user_id: "q", display_name: "Quinn QC", screen: "qc", packet_id: 8 },
+      { user_id: "c", display_name: "Clara Clerk", screen: "clerical", packet_id: null },
+    ];
+    expect(othersOn(users, 7, "me").map((u) => u.display_name)).toEqual(["Andy Welder", "Wes Super"]);
+  });
+});

frontend/src/auth/useEvents.ts

@@ -1,4 +1,5 @@
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { AuthCtx } from "./context";
 import type { PresenceUser } from "./types";
 
 interface EventHandlers {
@@ -8,6 +9,11 @@ interface EventHandlers {
   onChanged?: (payload: unknown) => void;
 }
 
+/** Phase 5: presence carries the packet each user has open. */
+export interface PacketPresenceUser extends PresenceUser {
+  packet_id?: number | string | null;
+}
+
 function parse(data: unknown): unknown {
   if (typeof data !== "string") return null;
   try {
@@ -17,13 +23,41 @@ function parse(data: unknown): unknown {
   }
 }
 
+/*
+ * The packet this browser is looking at. The packet page sets it (usePacketPresence) and the one EventSource
+ * reopens with ?packet_id= so the server's presence knows it. A module store keeps AuthProvider unchanged.
+ */
+let focusPacket: number | null = null;
+const focusListeners = new Set<() => void>();
+
+export function setPresencePacket(id: number | null): void {
+  if (focusPacket === id) return;
+  focusPacket = id;
+  for (const fn of focusListeners) fn();
+}
+
+function subscribeFocus(fn: () => void): () => void {
+  focusListeners.add(fn);
+  return () => {
+    focusListeners.delete(fn);
+  };
+}
+
+const getFocus = () => focusPacket;
+
+/** The stream URL for the packet in view. */
+export function eventsUrl(packetId: number | null): string {
+  return packetId ? `/api/events?packet_id=${encodeURIComponent(String(packetId))}` : "/api/events";
+}
+
 /**
  * Opens /api/events with EventSource while `sessionId` is set.
  * A `session` event with this session id and action "revoked" calls onRevoked.
- * `presence` is kept in state for later phases.
+ * `presence` is kept in state. The stream reopens when the packet in view changes.
  */
 export function useEvents(sessionId: string | null, handlers: EventHandlers): PresenceUser[] {
   const [presence, setPresence] = useState<PresenceUser[]>([]);
+  const packetId = useSyncExternalStore(subscribeFocus, getFocus, getFocus);
   const ref = useRef(handlers);
   useEffect(() => {
     ref.current = handlers;
@@ -31,7 +65,7 @@ export function useEvents(sessionId: string | null, handlers: EventHandlers): Pr
 
   useEffect(() => {
     if (!sessionId || typeof EventSource === "undefined") return;
-    const es = new EventSource("/api/events", { withCredentials: true });
+    const es = new EventSource(eventsUrl(packetId), { withCredentials: true });
 
     es.addEventListener("session", (ev) => {
       const p = parse((ev as MessageEvent).data);
@@ -59,7 +93,36 @@ export function useEvents(sessionId: string | null, handlers: EventHandlers): Pr
       es.close();
       setPresence([]);
     };
-  }, [sessionId]);
+  }, [sessionId, packetId]);
 
   return presence;
 }
+
+/** The other people on `packetId`, from the presence list. One entry per user, sorted by name. */
+export function othersOn(users: readonly PacketPresenceUser[], packetId: number, myId: string | null | undefined): PacketPresenceUser[] {
+  const seen = new Set<string>();
+  const out: PacketPresenceUser[] = [];
+  for (const u of users) {
+    if (u.packet_id === null || u.packet_id === undefined || Number(u.packet_id) !== packetId) continue;
+    if (myId && u.user_id === myId) continue;
+    if (seen.has(u.user_id)) continue;
+    seen.add(u.user_id);
+    out.push(u);
+  }
+  return out.sort((a, b) => a.display_name.localeCompare(b.display_name));
+}
+
+/**
+ * Marks `packetId` as the packet in view while mounted, and returns the other people looking at it.
+ * Works under AuthProvider; outside it (a bare test render) it returns an empty list.
+ */
+export function usePacketPresence(packetId: number | null): PacketPresenceUser[] {
+  const ctx = useContext(AuthCtx);
+  useEffect(() => {
+    if (!packetId) return;
+    setPresencePacket(packetId);
+    return () => setPresencePacket(null);
+  }, [packetId]);
+  if (!ctx || !packetId) return [];
+  return othersOn(ctx.presence as PacketPresenceUser[], packetId, ctx.me?.user.id);
+}