feat(control-station): add atomic recorded-session playback

apps/control-station/src/components/FloatingObservationWindow.tsx

@@ -4,6 +4,11 @@ import { WorkspaceWindow } from "@nodedc/ui-react";
 import type { ObservationWindowRect } from "../core/observation/useObservationLayout";
 import type { ObservationSourceDescriptor } from "../core/runtime/contracts";
 import { ObservationMedia, observationSourceStatusLabel } from "./ObservationSources";
+import type { RecordedObservationPlayback } from "./RecordedFmp4Player";
+import type {
+  RecordedAdmissionPhase,
+  RecordedCameraAdmissionState,
+} from "../core/observation/recordedSessionAdmission";
 
 const WINDOW_WIDTH = 336;
 const WINDOW_HEIGHT = 210;
@@ -11,6 +16,18 @@ const WINDOW_GAP = 16;
 const WINDOW_INSET = 18;
 const TIMELINE_CLEARANCE = 64;
 
+type ClosestTarget = { closest: (selectors: string) => unknown };
+
+export function shouldCaptureWorkspacePointer(
+  button: number,
+  target: ClosestTarget | null,
+): boolean {
+  if (button !== 0 || !target) return false;
+  if (target.closest(".nodedc-workspace-window__resize")) return true;
+  if (!target.closest(".nodedc-workspace-window__head")) return false;
+  return !target.closest("button, input, select, textarea, a");
+}
+
 export function initialObservationWindowRect(
   index: number,
   count = 1,
@@ -59,6 +76,11 @@ export function FloatingObservationWindow({
   onMaximizedChange,
   onActivate,
   onClose,
+  playback,
+  prepareRecorded,
+  recordedSessionGate,
+  recordedAdmissionKey,
+  onRecordedAdmissionChange,
 }: {
   source: ObservationSourceDescriptor;
   index: number;
@@ -71,6 +93,14 @@ export function FloatingObservationWindow({
   onMaximizedChange: (maximized: boolean) => void;
   onActivate: () => void;
   onClose: () => void;
+  playback?: RecordedObservationPlayback | null;
+  prepareRecorded?: boolean;
+  recordedSessionGate?: RecordedAdmissionPhase;
+  recordedAdmissionKey?: string | null;
+  onRecordedAdmissionChange?: (
+    sourceId: string,
+    state: RecordedCameraAdmissionState,
+  ) => void;
 }) {
   const [bounds, setBounds] = useState<{ width: number; height: number } | null>(null);
 
@@ -124,13 +154,29 @@ export function FloatingObservationWindow({
       active={active}
       zIndex={maximized ? 15 : active ? 9 : 7}
       className="floating-observation-window"
+      onPointerDownCapture={(event) => {
+        if (!shouldCaptureWorkspacePointer(event.button, event.target as HTMLElement)) return;
+        try {
+          event.currentTarget.setPointerCapture(event.pointerId);
+        } catch {
+          // Pointer capture can fail if the browser ended the pointer between
+          // dispatch and capture. The donor's window listeners remain fallback.
+        }
+      }}
       closeLabel={`Закрыть ${source.label}`}
       maximizeLabel={`Развернуть ${source.label}`}
       restoreLabel={`Восстановить ${source.label}`}
       moveLabel={`Переместить ${source.label}`}
       resizeLabel={`Изменить размер ${source.label}`}
     >
-      <ObservationMedia source={source} />
+      <ObservationMedia
+        source={source}
+        playback={playback}
+        prepareRecorded={prepareRecorded}
+        recordedSessionGate={recordedSessionGate}
+        recordedAdmissionKey={recordedAdmissionKey}
+        onRecordedAdmissionChange={onRecordedAdmissionChange}
+      />
     </WorkspaceWindow>
   );
 }