feat(frontend): hierarchical equipment picker wired to ISA-95 tree

Replace the flat hardcoded equipment select with a SCADA-style
command-palette that reflects the real DB model (Enterprise → Site →
Area → Line → Cell) via `GET /api/v1/hierarchy/tree`.

- `EquipmentPicker`: trigger button with bracketed breadcrumb
  (`[EQ] cellName · SITE · AREA · LINE`) + `⌘⇧E` shortcut. Popover
  with search (token-split, case-insensitive), tree grouped by line,
  keyboard navigation (↑↓ Home End wrap, Enter commit, Esc restore),
  StatusRail per row, disabled cells greyed. Full ARIA (dialog+modal,
  listbox/option, activedescendant, expanded/haspopup/controls).
- `lib/hierarchy`: ISA-95 DTO types, `useHierarchyTree` TanStack query
  (staleTime 60s), `flattenTree/searchCells/groupByLine`, `findCell`
  helpers. `EquipmentSelection` now carries `{lineId, lineName, cellId,
  cellName, siteName, areaName}` for live MetaStrip binding.
- `TopBar`: MetaStrip binds to the live selection (`SITE / LINE / REV`
  instead of hardcoded `UNIT / CELL / REV`).
- `AppShell`: `aria.selectedEquipment` shape migrated; old string
  payload ("P-01") is dropped via a new `validator` option on
  `useLocalStorage`, which also filters out stale shapes arriving on
  cross-tab `storage` events. Auto-seeds the first enabled cell when
  no selection exists.

Zero new deps. All tokens-only (no hex literals). Icons via DS wrapper.
Motion via `Motion.fadeInUp` + `--ds-motion-*` tokens.

`npm run typecheck` / `npm run build` / `npm run check` all green.
Bundle 453.33 kB / 143.36 kB gzipped (+3 kB vs baseline).

Author: vgtray

frontend/src/app/AppShell.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useId } from "react";
 import { Outlet } from "react-router-dom";
+import type { EquipmentSelection } from "../lib/hierarchy";
 import { useLocalStorage } from "../lib/useLocalStorage";
 import { DRAWER_DEFAULT_WIDTH, DRAWER_MAX_WIDTH, DRAWER_MIN_WIDTH, Drawer } from "./Drawer";
-import { EQUIPMENT_OPTIONS, TopBar } from "./TopBar";
+import { TopBar } from "./TopBar";
 
 interface ChatDrawerState {
     open: boolean;
@@ -27,6 +28,15 @@ function sanitizeDrawer(state: ChatDrawerState): ChatDrawerState {
     };
 }
 
+function validateEquipmentSelection(raw: unknown): EquipmentSelection | null {
+    if (!raw || typeof raw !== "object") return null;
+    const r = raw as Record<string, unknown>;
+    if (typeof r.cellId !== "number" || typeof r.lineId !== "number") return null;
+    if (typeof r.cellName !== "string" || typeof r.lineName !== "string") return null;
+    if (typeof r.areaName !== "string" || typeof r.siteName !== "string") return null;
+    return raw as EquipmentSelection;
+}
+
 function isTypingTarget(target: EventTarget | null) {
     if (!(target instanceof HTMLElement)) return false;
     const tag = target.tagName;
@@ -40,9 +50,10 @@ export function AppShell() {
         CHAT_DRAWER_KEY,
         DEFAULT_DRAWER_STATE,
     );
-    const [equipmentId, setEquipmentId] = useLocalStorage<string>(
+    const [selection, setSelection] = useLocalStorage<EquipmentSelection | null>(
         EQUIPMENT_KEY,
-        EQUIPMENT_OPTIONS[0].id,
+        null,
+        { validator: validateEquipmentSelection },
     );
 
     const safeDrawer = sanitizeDrawer(drawer);
@@ -77,8 +88,8 @@ export function AppShell() {
     return (
         <div className="flex h-screen w-screen flex-col overflow-hidden bg-[var(--ds-bg-base)] text-[var(--ds-fg-primary)]">
             <TopBar
-                equipmentId={equipmentId}
-                onEquipmentChange={setEquipmentId}
+                selection={selection}
+                onSelectionChange={setSelection}
                 drawerOpen={safeDrawer.open}
                 drawerControlsId={drawerId}
                 onDrawerToggle={toggleDrawer}