Phase 8: Project Management, find bar, presence and motion

The Project Management screen (/pm, view only) with Overview, Projects & units, Bottlenecks & aging, Hours vs target,
Quality & issues and Find jobs, the period picker, health per unit and per project, drill down, Excel (CSV) per table
and for all, and the PESCO production status report PDF with the controlled-copy stamp; every export logged as
"report exported". The find bar on every home screen: the full search set, the dropdowns, quick flags with Mine, the
flag kinds, Board and List with sorts, filters saved per browser; every filter applied by the server on the list and
the boards, with facets. Presence in packets with role, lock and revoke drop; the motion switch with reduced motion
honoured, card glides, glow and count-up; Back restores the scroll spot; sheet placement and the iPad layout pass. The
data book compared page by page with the old build and six layout differences fixed. Tests for the PM aggregates,
search, filters, presence and exports; Playwright scenarios for the PM screen, the find bar and presence at desktop and
iPad viewports. Docs updated; PLAN.md questions 38 to 42.

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

frontend/src/packet/PacketPage.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
-import { Link, useNavigate, useParams, useSearchParams } from "react-router";
+import { Link, useLocation, useNavigate, useParams, useSearchParams } from "react-router";
 import { assetsApi } from "../api/assets";
 import { ApiError, errorCode } from "../api/client";
 import { packetsApi } from "../api/packets";
 import type { PacketHeader, PacketRead, TransitionBody } from "../api/types";
 import { homePath } from "../auth/roles";
 import { useAuth } from "../auth/useAuth";
-import { usePacketPresence } from "../auth/useEvents";
+import { presenceText, usePacketPresence } from "../auth/useEvents";
 import { useGuard } from "../components/useGuard";
 import { useChanged } from "../lib/changes";
 import { errorText } from "../lib/format";
@@ -116,6 +116,10 @@ export function PacketPage() {
   const [editing, setEditing] = useState(false);
   const [toast, setToast] = useState<string | null>(null);
   const others = usePacketPresence(Number.isFinite(id) ? id : null);
+  // Phase 8: Back is one step back in this app's history (to the same scroll spot); a packet opened straight
+  // from a link has no app entry before it ("default"), so Back goes to the screen home.
+  const location = useLocation();
+  const hasAppHistory = location.key !== "default";
   const versionRef = useRef<number | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
 
@@ -342,7 +346,15 @@ export function PacketPage() {
 
   return (
     <>
-      <Link className="back" to={backTo}>
+      <Link
+        className="back"
+        to={backTo}
+        onClick={(e) => {
+          if (!hasAppHistory || e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+          e.preventDefault();
+          navigate(-1);
+        }}
+      >
         ← Back
       </Link>
       <div className="dhead">
@@ -464,7 +476,7 @@ export function PacketPage() {
       {others.length ? (
         <div className="presence small" data-testid="presence" role="status">
           <span className="pdot" aria-hidden="true" />
-          Also here: {others.map((u) => u.display_name).join(", ")}
+          {presenceText(others)}
         </div>
       ) : null}
       {msg ? (
@@ -628,7 +640,7 @@ export function PacketPage() {
           </button>
         ))}
       </div>
-      <div role="tabpanel" id={`ppanel-${shownTab}`} aria-labelledby={`ptab-${shownTab}`}>
+      <div key={shownTab} className="m-tab" role="tabpanel" id={`ppanel-${shownTab}`} aria-labelledby={`ptab-${shownTab}`}>
         {shownTab === "drawing" ? (
           <div className="stack">
             {draft && can("edit_document_set") && drawingPages.length ? (