feat(archive): complete recorded session lifecycle

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

@@ -1,4 +1,5 @@
-import { Dropdown, Icon } from "@nodedc/ui-react";
+import { useState } from "react";
+import { ConfirmationModal, Dropdown, Icon } from "@nodedc/ui-react";
 
 import {
   type ObservationSessionReplayLaunch,
@@ -93,7 +94,7 @@ function sessionDescription(session: ObservationSessionSummary): string {
 }
 
 export function ObservationSessionSelect({
-  limit = 3,
+  limit = 100,
   disabled = false,
   blockedReason = null,
   onReplayBegin,
@@ -116,6 +117,7 @@ export function ObservationSessionSelect({
     outcome: ObservationReplayOutcome,
   ) => void | Promise<void>;
 }) {
+  const [deleteTarget, setDeleteTarget] = useState<ObservationSessionSummary | null>(null);
   const sessions = useObservationSessions({
     limit,
     replayEnabled: blockedReason === null,
@@ -130,7 +132,7 @@ export function ObservationSessionSelect({
       : "Сохранённые сессии";
   const presentedTriggerCopy = blockedReason ?? triggerCopy;
 
-  return (
+  return <>
     <Dropdown
       className="observation-session-select"
       placement="bottom-end"
@@ -184,33 +186,48 @@ export function ObservationSessionSelect({
             <div className="observation-session-menu__list">
               {sessions.items.map((session) => {
                 const pending = sessions.replayingSessionId === session.id;
+                const deleting = sessions.deletingSessionId === session.id;
                 const failed = sessions.failedSessionId === session.id;
                 const visualState = observationSessionVisualState(session, { pending, failed });
                 return (
-                  <button
+                  <div
                     key={session.id}
-                    type="button"
-                    className="nodedc-dropdown-option observation-session-option"
-                    disabled={pending || !session.replayable}
-                    onClick={() => {
-                      void sessions.replay(session.id).then((accepted) => {
-                        if (accepted) close();
-                      });
-                    }}
+                    className="observation-session-option"
+                    data-deleting={deleting ? "true" : undefined}
                   >
-                    <span className="nodedc-dropdown-option__icon">
-                      <i data-session-visual-state={visualState} aria-hidden="true" />
-                    </span>
-                    <span className="nodedc-dropdown-option__body">
-                      <span className="nodedc-dropdown-option__label">{session.label}</span>
-                      <span className="nodedc-dropdown-option__description">
-                        {sessionDescription(session)}
+                    <button
+                      type="button"
+                      className="nodedc-dropdown-option observation-session-option__open"
+                      disabled={pending || deleting || !session.replayable}
+                      onClick={() => {
+                        void sessions.replay(session.id).then((accepted) => {
+                          if (accepted) close();
+                        });
+                      }}
+                    >
+                      <span className="nodedc-dropdown-option__icon">
+                        <i data-session-visual-state={visualState} aria-hidden="true" />
                       </span>
-                    </span>
-                    <span className="observation-session-option__state">
-                      {observationSessionVisualLabel(visualState)}
-                    </span>
-                  </button>
+                      <span className="nodedc-dropdown-option__body">
+                        <span className="nodedc-dropdown-option__label">{session.label}</span>
+                        <span className="nodedc-dropdown-option__description">
+                          {sessionDescription(session)}
+                        </span>
+                      </span>
+                      <span className="observation-session-option__state">
+                        {deleting ? "Удаление…" : observationSessionVisualLabel(visualState)}
+                      </span>
+                    </button>
+                    <button
+                      type="button"
+                      className="observation-session-option__delete"
+                      aria-label={`Удалить сохранённую сессию ${session.label}`}
+                      disabled={pending || deleting}
+                      onClick={() => setDeleteTarget(session)}
+                    >
+                      <Icon name="trash" size={15} />
+                    </button>
+                  </div>
                 );
               })}
             </div>
@@ -242,5 +259,29 @@ export function ObservationSessionSelect({
         </div>
       )}
     </Dropdown>
-  );
+    <ConfirmationModal
+      open={deleteTarget !== null}
+      title="Удалить сохранённую сессию?"
+      description={deleteTarget ? <>
+        <strong>{deleteTarget.label}</strong>
+        <p>
+          Сессия, исходные данные наблюдения, подготовленная Rerun-запись и
+          видеоматериалы будут удалены с этого сервера без возможности восстановления.
+        </p>
+        {sessions.error && sessions.deletingSessionId === null ? (
+          <p className="observation-session-delete-error" role="alert">{sessions.error}</p>
+        ) : null}
+      </> : null}
+      confirmLabel="Удалить сессию"
+      pendingLabel="Удаление…"
+      danger
+      onClose={() => {
+        if (sessions.deletingSessionId === null) setDeleteTarget(null);
+      }}
+      onConfirm={async () => {
+        if (!deleteTarget) return;
+        if (await sessions.remove(deleteTarget.id)) setDeleteTarget(null);
+      }}
+    />
+  </>;
 }

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

@@ -135,13 +135,17 @@ export function ObservationMedia({
   return (
     <div className="observation-media__empty">
       <Icon name={sourceIcon[source.modality]} size={20} />
-      <strong>{observationSourceStatusLabel(source)}</strong>
+      <strong>
+        {source.modality === "video" && source.activation && !source.activation.selected
+          ? "Источник отключён"
+          : observationSourceStatusLabel(source)}
+      </strong>
       <span>
         {source.modality === "video"
           ? source.activation?.controllable
             ? source.activation.selected
               ? "Повторите подключение — локальный адаптер перезапустит выбранную камеру"
-              : "Откройте канал — локальный адаптер подключит выбранную камеру"
+              : "Канал остановлен оператором; при необходимости его можно открыть снова"
             : "Канал известен, browser-preview сейчас недоступен"
           : source.description}
       </span>

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

@@ -393,15 +393,27 @@ async function mountVerifiedRecordedEpoch(
   signal: AbortSignal,
 ): Promise<() => void> {
   const descriptor = epoch.descriptor;
-  if (
-    descriptor.mediaType === "video/mp4" ||
-    !globalThis.MediaSource ||
-    !MediaSource.isTypeSupported(descriptor.mediaType)
-  ) {
+  if (!descriptor.mediaType.startsWith("video/mp4;") || !video.canPlayType(descriptor.mediaType)) {
     throw new Error("Archived camera codec is not supported");
   }
-  const mediaSource = new MediaSource();
-  const objectUrl = URL.createObjectURL(mediaSource);
+  if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+
+  // A sealed fragmented-MP4 generation is already complete and immutable.
+  // Present it as one Blob so Chromium can index and seek the whole archive
+  // without retaining the same 166+ MiB epoch in a quota-limited MSE
+  // SourceBuffer. Every constituent byte was fetched and SHA-256 verified
+  // before this boundary, and Blob preserves their canonical order.
+  const payload = new Blob([epoch.init, ...epoch.segments], {
+    type: descriptor.mediaType,
+  });
+  const expectedByteLength = epoch.init.byteLength + epoch.segments.reduce(
+    (total, segment) => total + segment.byteLength,
+    0,
+  );
+  if (payload.size !== expectedByteLength) {
+    throw new Error("Archived camera Blob is incomplete");
+  }
+  const objectUrl = URL.createObjectURL(payload);
   const cleanup = () => {
     video.pause();
     video.removeAttribute("src");
@@ -409,39 +421,8 @@ async function mountVerifiedRecordedEpoch(
     URL.revokeObjectURL(objectUrl);
   };
   video.src = objectUrl;
+  video.load();
   try {
-    await new Promise<void>((resolve, reject) => {
-      const onOpen = () => {
-        cleanupListeners();
-        resolve();
-      };
-      const onAbort = () => {
-        cleanupListeners();
-        reject(new DOMException("Aborted", "AbortError"));
-      };
-      const cleanupListeners = () => {
-        mediaSource.removeEventListener("sourceopen", onOpen);
-        signal.removeEventListener("abort", onAbort);
-      };
-      if (signal.aborted) {
-        onAbort();
-        return;
-      }
-      mediaSource.addEventListener("sourceopen", onOpen, { once: true });
-      signal.addEventListener("abort", onAbort, { once: true });
-    });
-    if (signal.aborted || mediaSource.readyState !== "open") {
-      throw new DOMException("Aborted", "AbortError");
-    }
-    const sourceBuffer = mediaSource.addSourceBuffer(descriptor.mediaType);
-    await appendRecordedMediaBuffer(sourceBuffer, epoch.init, signal);
-    for (const segment of epoch.segments) {
-      await appendRecordedMediaBuffer(sourceBuffer, segment, signal);
-    }
-    if (signal.aborted || mediaSource.readyState !== "open" || sourceBuffer.updating) {
-      throw new Error("Archived camera MediaSource closed before full append");
-    }
-    mediaSource.endOfStream();
     await waitForSeekableArchive(
       video,
       descriptor.timelineEndSeconds - descriptor.timelineStartSeconds,