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

2026-07-17 17:51:24 +03:00
parent 007ff9fff2
commit e94c64eebd
35 changed files with 8907 additions and 302 deletions
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
  AdminNavigationPanel,
  AppHeader,
@@ -26,10 +26,25 @@ import {
 } from "@nodedc/ui-react";

 import { LandingStage } from "./components/LandingStage";
+import { ObservationSessionSelect } from "./components/ObservationSessionSelect";
 import { useDevicePluginHost } from "./core/device-plugins/DevicePluginHost";
 import { useMissionRuntime } from "./core/runtime/MissionRuntimeContext";
 import type { ViewerSettings } from "./core/runtime/contracts";
+import {
+  createLatestAsyncCommitter,
+  type LatestAsyncCommitter,
+} from "./core/runtime/latestAsyncCommitter";
 import { useObservationLayout } from "./core/observation/useObservationLayout";
+import { recordedObservationSources } from "./core/observation/recordedObservationSources";
+import type { ObservationSessionReplayLaunch } from "./core/observation/sessionArchive";
+import { useRecordedSessionAdmission } from "./core/observation/useRecordedSessionAdmission";
+import { useWorkspaceLayoutProfile } from "./core/observation/useWorkspaceLayoutProfile";
+import {
+  OBSERVATION_WORKSPACE_ID,
+  OBSERVATION_WORKSPACE_LAYOUT_VERSION,
+  type ObservationToolWindowId,
+  type ObservationWorkspaceLayoutProfile,
+} from "./core/observation/workspaceLayout";
 import {
  rootById,
  roots,
@@ -48,7 +63,10 @@ import { DeviceWorkspace } from "./workspaces/DeviceWorkspace";
 import { WorkspaceRenderer } from "./workspaces/Workspaces";
 import "./styles/scene-windows.css";

-type SceneToolWindowId = "sources" | "display" | "layers" | "layout";
+type SceneToolWindowId = ObservationToolWindowId;
+
+const sceneToolWindowIds: readonly SceneToolWindowId[] = ["sources", "display", "layers"];
+const viewerSettingsQuietPeriodMs = 750;

 const colorModeOptions: Array<{ value: PointColorMode; label: string; description: string }> = [
  { value: "intensity", label: "Интенсивность", description: "Значение отражённого сигнала" },
@@ -116,28 +134,117 @@ export default function App() {

  const [activeRoot, setActiveRoot] = useState<RootId | null>(null);
  const [sourceUrl, setSourceUrl] = useState("");
+  const [recordedReplay, setRecordedReplay] = useState<ObservationSessionReplayLaunch | null>(null);
+  const [replayTransitioning, setReplayTransitioning] = useState(false);
  const [sourceDraft, setSourceDraft] = useState("");
  const [sourceWindowOpen, setSourceWindowOpen] = useState(false);
  const [displayWindowOpen, setDisplayWindowOpen] = useState(false);
  const [layerInspectorOpen, setLayerInspectorOpen] = useState(false);
  const [sceneWindowOrder, setSceneWindowOrder] = useState<SceneToolWindowId[]>([]);
-  const [layoutWindowOpen, setLayoutWindowOpen] = useState(false);
-  const [layoutName, setLayoutName] = useState("Операторская сцена");
-  const [layoutDraftSaved, setLayoutDraftSaved] = useState(false);
+  const [layoutSaveNotice, setLayoutSaveNotice] = useState<string | null>(null);
  const [sceneSettings, setSceneSettings] = useState<SceneSettings>(defaultSceneSettings);
  const [displayDraft, setDisplayDraft] = useState<SceneSettings>(defaultSceneSettings);
+  const appliedProfileKeyRef = useRef<string | null>(null);
+  const sceneSettingsRef = useRef<SceneSettings>(defaultSceneSettings);
+  const displayDraftRef = useRef<SceneSettings>(defaultSceneSettings);
+  const confirmedSceneSettingsRef = useRef<SceneSettings>(defaultSceneSettings);
+  const viewerSettingsCommitTimerRef = useRef<number | null>(null);
+  const runtimeUpdateViewerSettingsRef = useRef(runtime.updateViewerSettings);
+  const replayActiveRef = useRef(false);
+  const sceneSettingsCommitterActiveRef = useRef(true);
+  const sceneSettingsCommitterRef = useRef<LatestAsyncCommitter<SceneSettings> | null>(null);

  const currentRoot = rootById(activeRoot);
  const activeDefinition = workspaceById(workspace.activeView);
  const rootWorkspaces = workspacesForRoot(activeRoot);
  const activeSceneWindow = sceneWindowOrder[sceneWindowOrder.length - 1] ?? null;
  const automaticSourceUrl = runtime.state?.spatialSource?.url.trim() ?? "";
-  const effectiveSourceUrl = sourceUrl || automaticSourceUrl;
-  const observationLayout = useObservationLayout(
-    runtime.state?.observationSources ?? [],
-    runtime.setObservationSourceActive,
+  const effectiveSourceUrl = replayTransitioning ? "" : sourceUrl || automaticSourceUrl;
+  const replayActive = Boolean(recordedReplay && sourceUrl === recordedReplay.sourceUrl);
+  const recordedSessionAdmission = useRecordedSessionAdmission(
+    replayActive ? recordedReplay : null,
  );
-  const focusedObservationSource = runtime.state?.observationSources?.find(
+  const displayPaletteOptions = replayActive
+    ? paletteOptions.map((option) => {
+        if (option.value === "turbo") {
+          return {
+            ...option,
+            label: "Цвет записи",
+            description: "Вернуть цвета, сохранённые внутри RRD",
+          };
+        }
+        return option.value === "custom" ? option : { ...option, disabled: true };
+      })
+    : paletteOptions;
+  runtimeUpdateViewerSettingsRef.current = runtime.updateViewerSettings;
+  replayActiveRef.current = replayActive;
+
+  if (!sceneSettingsCommitterRef.current) {
+    sceneSettingsCommitterRef.current = createLatestAsyncCommitter<SceneSettings>({
+      commit: (settings) => replayActiveRef.current
+        ? Promise.resolve(true)
+        : runtimeUpdateViewerSettingsRef.current(toViewerSettings(settings)),
+      onSettled: ({ value, applied, superseded }) => {
+        if (!sceneSettingsCommitterActiveRef.current) return;
+        if (applied) confirmedSceneSettingsRef.current = value;
+        if (superseded) return;
+
+        const next = applied ? value : confirmedSceneSettingsRef.current;
+        sceneSettingsRef.current = next;
+        setSceneSettings(next);
+        if (!applied && displayDraftRef.current === value) {
+          displayDraftRef.current = next;
+          setDisplayDraft(next);
+        }
+      },
+    });
+  }
+  const replaySources = useMemo(
+    () => recordedObservationSources(recordedReplay),
+    [recordedReplay],
+  );
+  const activeObservationSources = replayActive
+    ? replaySources
+    : runtime.state?.observationSources ?? [];
+  const activeRuntimeState = useMemo(() => {
+    if (!replayActive || !recordedReplay) return runtime.state;
+    return {
+      ...(runtime.state ?? { phase: "replaying" as const }),
+      phase: "replaying" as const,
+      sourceMode: "replay" as const,
+      spatialSource: {
+        id: "recorded.spatial.primary",
+        url: recordedReplay.sourceUrl,
+        label: "Сохранённая пространственная сцена",
+        kind: "rrd" as const,
+      },
+      observationSources: replaySources,
+      observationTimeline: {
+        mode: "recorded" as const,
+        seekable: true,
+        sessionRecording: true,
+        synchronization: "host-arrival-best-effort" as const,
+        range: {
+          startSeconds: recordedReplay.timelineStartSeconds,
+          endSeconds: recordedReplay.timelineEndSeconds,
+        },
+      },
+    };
+  }, [recordedReplay, replayActive, replaySources, runtime.state]);
+  const viewerSettingsTargetIdentity = [
+    runtime.state?.activeDevice?.pluginId,
+    runtime.state?.activeDevice?.modelId,
+    runtime.state?.activeDevice?.instanceId,
+    runtime.state?.deviceSession?.sessionId,
+    runtime.state?.deviceSession?.deviceId,
+    runtime.state?.acquisition?.acquisitionId,
+  ].filter(Boolean).join(":") || "local-runtime";
+  const observationLayout = useObservationLayout(
+    activeObservationSources,
+    replayActive ? undefined : runtime.setObservationSourceActive,
+  );
+  const workspaceLayoutProfile = useWorkspaceLayoutProfile();
+  const focusedObservationSource = activeObservationSources.find(
    (source) => source.id === observationLayout.focusedSourceId,
  );
  const observationFullscreenActive = Boolean(
@@ -148,12 +255,80 @@ export default function App() {

  useEffect(() => {
    const remote = runtime.state?.viewerSettings;
-    if (!remote) return;
-    setSceneSettings((current) => mergeViewerSettings(current, remote));
-    if (!displayWindowOpen) {
-      setDisplayDraft((current) => mergeViewerSettings(current, remote));
+    if (
+      !remote ||
+      workspaceLayoutProfile.profile ||
+      sceneSettingsCommitterRef.current?.isBusy()
+    ) return;
+    const merged = mergeViewerSettings(sceneSettingsRef.current, remote);
+    sceneSettingsRef.current = merged;
+    confirmedSceneSettingsRef.current = merged;
+    setSceneSettings(merged);
+    if (viewerSettingsCommitTimerRef.current === null) {
+      displayDraftRef.current = merged;
+      setDisplayDraft(merged);
    }
-  }, [runtime.state?.viewerSettings, displayWindowOpen]);
+  }, [runtime.state?.viewerSettings, workspaceLayoutProfile.profile]);
+
+  useEffect(() => {
+    const profile = workspaceLayoutProfile.profile;
+    if (!profile) return;
+    if (viewerSettingsCommitTimerRef.current !== null) {
+      window.clearTimeout(viewerSettingsCommitTimerRef.current);
+      viewerSettingsCommitTimerRef.current = null;
+    }
+    sceneSettingsRef.current = profile.sceneSettings;
+    displayDraftRef.current = profile.sceneSettings;
+    confirmedSceneSettingsRef.current = profile.sceneSettings;
+    setSceneSettings(profile.sceneSettings);
+    setDisplayDraft(profile.sceneSettings);
+    setSourceWindowOpen(profile.toolWindows.sourcesOpen);
+    setDisplayWindowOpen(profile.toolWindows.displayOpen);
+    setLayerInspectorOpen(profile.toolWindows.layersOpen);
+    setSceneWindowOrder(profile.toolWindows.order.filter((windowId) => {
+      if (windowId === "sources") return profile.toolWindows.sourcesOpen;
+      if (windowId === "display") return profile.toolWindows.displayOpen;
+      return profile.toolWindows.layersOpen;
+    }));
+    observationLayout.restore(profile);
+  }, [observationLayout.restore, workspaceLayoutProfile.profile]);
+
+  useEffect(() => {
+    sceneSettingsCommitterActiveRef.current = true;
+    return () => {
+      sceneSettingsCommitterActiveRef.current = false;
+      if (viewerSettingsCommitTimerRef.current !== null) {
+        window.clearTimeout(viewerSettingsCommitTimerRef.current);
+        viewerSettingsCommitTimerRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const profile = workspaceLayoutProfile.profile;
+    const applicationKey = profile
+      ? `${profile.revision}:${viewerSettingsTargetIdentity}`
+      : null;
+    if (
+      !profile ||
+      runtime.backendStatus !== "online" ||
+      !applicationKey ||
+      appliedProfileKeyRef.current === applicationKey
+    ) {
+      return;
+    }
+    appliedProfileKeyRef.current = applicationKey;
+    void runtime.updateViewerSettings(toViewerSettings(profile.sceneSettings)).then((applied) => {
+      if (!applied && appliedProfileKeyRef.current === applicationKey) {
+        appliedProfileKeyRef.current = null;
+      }
+    });
+  }, [
+    runtime.backendStatus,
+    runtime.updateViewerSettings,
+    viewerSettingsTargetIdentity,
+    workspaceLayoutProfile.profile,
+  ]);

  const activateSceneWindow = useCallback((windowId: SceneToolWindowId) => {
    setSceneWindowOrder((current) => [
@@ -166,7 +341,6 @@ export default function App() {
    if (windowId === "sources") setSourceWindowOpen(false);
    if (windowId === "display") setDisplayWindowOpen(false);
    if (windowId === "layers") setLayerInspectorOpen(false);
-    if (windowId === "layout") setLayoutWindowOpen(false);
    setSceneWindowOrder((current) => current.filter((candidate) => candidate !== windowId));
  }, []);

@@ -204,8 +378,41 @@ export default function App() {
    activateSceneWindow("sources");
  };

+  const commitDisplaySettings = useCallback((next: SceneSettings) => {
+    if (viewerSettingsCommitTimerRef.current !== null) {
+      window.clearTimeout(viewerSettingsCommitTimerRef.current);
+      viewerSettingsCommitTimerRef.current = null;
+    }
+    displayDraftRef.current = next;
+    setDisplayDraft(next);
+    sceneSettingsCommitterRef.current?.enqueue(next);
+  }, []);
+
+  const stageDisplayPatch = useCallback((patch: Partial<SceneSettings>) => {
+    const next = { ...displayDraftRef.current, ...patch };
+    displayDraftRef.current = next;
+    setDisplayDraft(next);
+    if (viewerSettingsCommitTimerRef.current !== null) {
+      window.clearTimeout(viewerSettingsCommitTimerRef.current);
+    }
+    viewerSettingsCommitTimerRef.current = window.setTimeout(() => {
+      viewerSettingsCommitTimerRef.current = null;
+      sceneSettingsCommitterRef.current?.enqueue(displayDraftRef.current);
+    }, viewerSettingsQuietPeriodMs);
+  }, []);
+
+  const flushDisplaySettings = useCallback(() => {
+    if (viewerSettingsCommitTimerRef.current === null) return;
+    window.clearTimeout(viewerSettingsCommitTimerRef.current);
+    viewerSettingsCommitTimerRef.current = null;
+    sceneSettingsCommitterRef.current?.enqueue(displayDraftRef.current);
+  }, []);
+
+  const commitDisplayPatch = useCallback((patch: Partial<SceneSettings>) => {
+    commitDisplaySettings({ ...displayDraftRef.current, ...patch });
+  }, [commitDisplaySettings]);
+
  const openDisplay = () => {
-    setDisplayDraft(sceneSettings);
    setDisplayWindowOpen(true);
    activateSceneWindow("display");
  };
@@ -215,28 +422,90 @@ export default function App() {
    activateSceneWindow("layers");
  };

-  const openLayout = () => {
-    setLayoutDraftSaved(false);
-    setLayoutWindowOpen(true);
-    activateSceneWindow("layout");
-  };
+  const beginRecordedReplaySwitch = useCallback(async () => {
+    // useObservationSessions calls this only after backend preparation has
+    // produced a validated launch descriptor. Keep the old scene mounted
+    // before this point; now perform one controlled receiver teardown before
+    // accepting the already-ready archive.
+    setReplayTransitioning(true);
+    setRecordedReplay(null);
+    setSourceUrl("");
+    setSourceDraft("");
+    await new Promise<void>((resolve) => {
+      window.requestAnimationFrame(() => window.setTimeout(resolve, 0));
+    });
+  }, []);

-  const applyDisplaySettings = async () => {
-    const applied = await runtime.updateViewerSettings(toViewerSettings(displayDraft));
-    if (applied) setSceneSettings(displayDraft);
-  };
+  const acceptRecordedReplay = useCallback((launch: ObservationSessionReplayLaunch) => {
+    setRecordedReplay(launch);
+    setSourceUrl(launch.sourceUrl);
+    setSourceDraft(launch.sourceUrl);
+    setReplayTransitioning(false);
+  }, []);

-  const applyScenePatch = async (patch: Partial<SceneSettings>) => {
-    const previous = sceneSettings;
-    const next = { ...sceneSettings, ...patch };
-    setSceneSettings(next);
-    setDisplayDraft((current) => (displayWindowOpen ? { ...current, ...patch } : next));
-    const applied = await runtime.updateViewerSettings(toViewerSettings(next));
-    if (!applied) {
-      setSceneSettings(previous);
-      if (!displayWindowOpen) setDisplayDraft(previous);
+  const settleRecordedReplaySwitch = useCallback((outcome: "accepted" | "error" | "cancelled") => {
+    if (outcome !== "accepted") setReplayTransitioning(false);
+  }, []);
+
+  useEffect(() => {
+    // ObservationSessionSelect owns the cancellable request and unmounts when
+    // the operator leaves the spatial workspace. Its unmount cannot safely
+    // call back into this owner, so clear the transient blanking state here.
+    // Returning to Observation then starts from a deterministic idle source
+    // instead of an orphaned `replayTransitioning=true` state.
+    if (activeDefinition?.kind !== "spatial") setReplayTransitioning(false);
+  }, [activeDefinition?.kind]);
+
+  const applyScenePatch = (patch: Partial<SceneSettings>) => commitDisplayPatch(patch);
+
+  const saveWorkspaceLayout = useCallback(async () => {
+    flushDisplaySettings();
+    await sceneSettingsCommitterRef.current?.waitForIdle();
+
+    const layout = observationLayout.snapshot();
+    if (!layout) {
+      setLayoutSaveNotice("Сцена ещё не измерила рабочую область.");
+      return;
    }
-  };
+    const openWindowOrder = sceneWindowOrder.filter((windowId) => {
+      if (windowId === "sources") return sourceWindowOpen;
+      if (windowId === "display") return displayWindowOpen;
+      return layerInspectorOpen;
+    });
+    const completeWindowOrder = [
+      ...sceneToolWindowIds.filter((windowId) => !openWindowOrder.includes(windowId)),
+      ...openWindowOrder,
+    ];
+    const draft: ObservationWorkspaceLayoutProfile = {
+      version: OBSERVATION_WORKSPACE_LAYOUT_VERSION,
+      revision: workspaceLayoutProfile.profile?.revision ?? 0,
+      workspaceId: OBSERVATION_WORKSPACE_ID,
+      sceneSettings: sceneSettingsRef.current,
+      toolWindows: {
+        sourcesOpen: sourceWindowOpen,
+        displayOpen: displayWindowOpen,
+        layersOpen: layerInspectorOpen,
+        order: completeWindowOrder,
+      },
+      ...layout,
+    };
+    const saved = await workspaceLayoutProfile.save(draft);
+    setLayoutSaveNotice(saved ? "Компоновка сохранена" : workspaceLayoutProfile.error);
+  }, [
+    displayWindowOpen,
+    flushDisplaySettings,
+    layerInspectorOpen,
+    observationLayout.snapshot,
+    sceneWindowOrder,
+    sourceWindowOpen,
+    workspaceLayoutProfile,
+  ]);
+
+  useEffect(() => {
+    if (!layoutSaveNotice || layoutSaveNotice !== "Компоновка сохранена") return;
+    const timer = window.setTimeout(() => setLayoutSaveNotice(null), 2600);
+    return () => window.clearTimeout(timer);
+  }, [layoutSaveNotice]);

  const contentActions = useMemo<ApplicationPanelUtilityAction[]>(() => {
    const actions: ApplicationPanelUtilityAction[] = [];
@@ -251,25 +520,27 @@ export default function App() {

    if (activeDefinition?.kind === "spatial") {
      actions.push(
+        {
+          label: workspaceLayoutProfile.state === "saving"
+            ? "Сохраняем компоновку"
+            : "Сохранить компоновку",
+          icon: "save",
+          disabled: workspaceLayoutProfile.state === "saving",
+          onClick: () => void saveWorkspaceLayout(),
+        },
        { label: "Настроить визуальный движок", icon: "network", onClick: openSource },
        { label: "Настроить отображение", icon: "sliders", onClick: openDisplay },
        { label: "Открыть слои", icon: "list", onClick: openLayers },
      );
    }

-    actions.push({
-      label: "Сохранить компоновку",
-      icon: "save",
-      onClick: openLayout,
-    });
    return actions;
-  }, [activeDefinition?.kind, runtime, sceneSettings, sourceUrl]);
+  }, [activeDefinition?.kind, runtime, saveWorkspaceLayout, workspaceLayoutProfile.state]);

  const header = (
    <AppHeader
      brand={<img src="/nodedc-logo.svg" alt="NODE.DC" />}
      brandLabel="NODEDC MISSION CORE"
-      left={<span className="station-label">MISSION CORE</span>}
      center={
        <>
          <HeaderWorkspace kind="mark" label="Mission Core" imageUrl="/nodedc-mark.svg" />
@@ -363,9 +634,29 @@ export default function App() {
                  {phaseLabel(runtime.state?.phase)}
                </StatusBadge>
              ) : activeDefinition.kind === "spatial" ? (
-                <StatusBadge tone={effectiveSourceUrl ? "accent" : "warning"}>
-                  {effectiveSourceUrl ? "Источник назначен" : "Без источника"}
-                </StatusBadge>
+                <div className="observation-header-tools">
+                  <ObservationSessionSelect
+                    limit={3}
+                    disabled={runtime.pendingAction !== null}
+                    onReplayBegin={beginRecordedReplaySwitch}
+                    onReplayAccepted={(_session, launch) => acceptRecordedReplay(launch)}
+                    onReplaySettled={(_session, outcome) => settleRecordedReplaySwitch(outcome)}
+                  />
+                  {layoutSaveNotice || workspaceLayoutProfile.error ? (
+                    <span
+                      className="workspace-layout-feedback"
+                      data-error={workspaceLayoutProfile.error ? "true" : undefined}
+                      role={workspaceLayoutProfile.error ? "alert" : "status"}
+                    >
+                      <i
+                        className="api-dot"
+                        data-status={workspaceLayoutProfile.error ? "error" : "online"}
+                        aria-hidden="true"
+                      />
+                      {layoutSaveNotice || workspaceLayoutProfile.error}
+                    </span>
+                  ) : null}
+                </div>
              ) : (
                <StatusBadge tone="warning">Интерфейс готов</StatusBadge>
              )
@@ -380,10 +671,16 @@ export default function App() {
            ) : (
              <WorkspaceRenderer
                definition={activeDefinition}
-                state={runtime.state}
+                state={activeRuntimeState}
                backendStatus={runtime.backendStatus}
                sourceUrl={effectiveSourceUrl}
+                recordedReplay={replayActive ? recordedReplay : null}
+                recordedSessionAdmission={recordedSessionAdmission}
                sceneSettings={sceneSettings}
+                accumulationSeconds={displayDraft.accumulationSeconds}
+                onAccumulationChange={(accumulationSeconds) =>
+                  stageDisplayPatch({ accumulationSeconds })}
+                onAccumulationCommit={flushDisplaySettings}
                observationLayout={observationLayout}
                navigation={{
                  openView,
@@ -419,6 +716,7 @@ export default function App() {
              onClick={() => {
                setSourceDraft("");
                setSourceUrl("");
+                setRecordedReplay(null);
              }}
            >
              Сбросить адрес
@@ -429,6 +727,7 @@ export default function App() {
              disabled={!sourceDraft.trim()}
              onClick={() => {
                setSourceUrl(sourceDraft.trim());
+                setRecordedReplay(null);
              }}
            >
              Применить адрес
@@ -530,21 +829,6 @@ export default function App() {
        data-scene-active={activeSceneWindow === "display" ? "true" : undefined}
        onPointerDown={() => activateSceneWindow("display")}
        onClose={() => closeSceneWindow("display")}
-        footer={
-          <WindowFooterActions>
-            <Button variant="ghost" onClick={() => setDisplayDraft(defaultSceneSettings)}>
-              Сбросить
-            </Button>
-            <Button
-              variant="primary"
-              shape="pill"
-              disabled={runtime.pendingAction === "viewer"}
-              onClick={() => void applyDisplaySettings()}
-            >
-              {runtime.pendingAction === "viewer" ? "Применяем…" : "Применить к сцене"}
-            </Button>
-          </WindowFooterActions>
-        }
      >
        <Inspector
          defaultOpen={["points"]}
@@ -556,41 +840,66 @@ export default function App() {
              description: "Размер и способ окрашивания",
              content: (
                <div className="inspector-control-stack">
-                  <RangeControl
-                    label="Размер точки"
-                    value={displayDraft.pointSize}
-                    min={0.5}
-                    max={12}
-                    step={0.5}
-                    formatValue={(value) => `${value.toFixed(1)} пкс`}
-                    onChange={(pointSize) => setDisplayDraft((current) => ({ ...current, pointSize }))}
-                  />
-                  <ControlRow label="Атрибут цвета">
-                    <Select
-                      variant="split"
-                      label="Атрибут цвета"
-                      value={displayDraft.colorMode}
-                      options={colorModeOptions}
-                      onChange={(colorMode) => setDisplayDraft((current) => ({ ...current, colorMode }))}
+                  <div
+                    className="scene-settings-commit-field"
+                    onPointerUp={flushDisplaySettings}
+                    onKeyUp={flushDisplaySettings}
+                    onBlur={flushDisplaySettings}
+                  >
+                    <RangeControl
+                      label="Размер точки"
+                      value={displayDraft.pointSize}
+                      min={0.5}
+                      max={12}
+                      step={0.5}
+                      formatValue={(value) => `${value.toFixed(1)} пкс`}
+                      onChange={(pointSize) => stageDisplayPatch({ pointSize })}
                    />
-                  </ControlRow>
-                  <ControlRow label="Палитра">
-                    <Select
-                      variant="split"
-                      label="Палитра"
-                      value={displayDraft.palette}
-                      options={paletteOptions}
-                      onChange={(palette) => setDisplayDraft((current) => ({ ...current, palette }))}
-                    />
-                  </ControlRow>
-                  {displayDraft.palette === "custom" ? (
-                    <ControlRow label="Цвет точек">
-                      <ColorField
-                        label="Цвет точек"
-                        value={displayDraft.customColor}
-                        onChange={(customColor) => setDisplayDraft((current) => ({ ...current, customColor }))}
+                  </div>
+                  <div className="scene-settings-commit-field" onBlur={flushDisplaySettings}>
+                    <ControlRow label="Атрибут цвета">
+                      <Select
+                        variant="split"
+                        label="Атрибут цвета"
+                        value={displayDraft.colorMode}
+                        options={colorModeOptions}
+                        disabled={replayActive}
+                        onChange={(colorMode) => stageDisplayPatch({ colorMode })}
                      />
                    </ControlRow>
+                  </div>
+                  <div className="scene-settings-commit-field" onBlur={flushDisplaySettings}>
+                    <ControlRow label="Палитра">
+                      <Select
+                        variant="split"
+                        label="Палитра"
+                        value={displayDraft.palette}
+                        options={displayPaletteOptions}
+                        onChange={(palette) => stageDisplayPatch({ palette })}
+                      />
+                    </ControlRow>
+                  </div>
+                  {displayDraft.palette === "custom" ? (
+                    <div
+                      className="scene-settings-commit-field"
+                      onPointerUp={flushDisplaySettings}
+                      onKeyUp={flushDisplaySettings}
+                      onBlur={flushDisplaySettings}
+                    >
+                      <ControlRow label="Цвет точек">
+                        <ColorField
+                          label="Цвет точек"
+                          value={displayDraft.customColor}
+                          onChange={(customColor) => stageDisplayPatch({ customColor })}
+                        />
+                      </ControlRow>
+                    </div>
+                  ) : null}
+                  {replayActive ? (
+                    <p className="scene-window-note">
+                      В архиве градиентные цвета уже записаны в RRD. Без переэкспорта
+                      можно вернуть цвет записи или назначить один свой цвет.
+                    </p>
                  ) : null}
                </div>
              ),
@@ -601,21 +910,28 @@ export default function App() {
              description: "История облака и траектория",
              content: (
                <div className="inspector-control-stack">
-                  <RangeControl
-                    label="Окно накопления"
-                    value={displayDraft.accumulationSeconds}
-                    min={0}
-                    max={120}
-                    step={1}
-                    formatValue={(value) => (value === 0 ? "Только кадр" : `${value} с`)}
-                    onChange={(accumulationSeconds) => setDisplayDraft((current) => ({ ...current, accumulationSeconds }))}
-                  />
+                  <div
+                    className="scene-settings-commit-field"
+                    onPointerUp={flushDisplaySettings}
+                    onKeyUp={flushDisplaySettings}
+                    onBlur={flushDisplaySettings}
+                  >
+                    <RangeControl
+                      label="Окно накопления"
+                      value={displayDraft.accumulationSeconds}
+                      min={0}
+                      max={120}
+                      step={1}
+                      formatValue={(value) => (value === 0 ? "Только кадр" : `${value} с`)}
+                      onChange={(accumulationSeconds) => stageDisplayPatch({ accumulationSeconds })}
+                    />
+                  </div>
                  <div className="nodedc-field">
                    <span className="nodedc-field__description">Линия пути устройства в координатах сцены</span>
                    <Checker
                      checked={displayDraft.showTrajectory}
                      label="Показывать траекторию"
-                      onChange={(showTrajectory) => setDisplayDraft((current) => ({ ...current, showTrajectory }))}
+                      onChange={(showTrajectory) => commitDisplayPatch({ showTrajectory })}
                    />
                  </div>
                </div>
@@ -627,7 +943,7 @@ export default function App() {
              description: "Сетка, подписи и камеры",
              content: (
                <div className="inspector-control-stack">
-                  <Checker checked={displayDraft.showGrid} label="Сетка и оси" onChange={(showGrid) => setDisplayDraft((current) => ({ ...current, showGrid }))} />
+                  <Checker checked={displayDraft.showGrid} label="Сетка и оси" onChange={(showGrid) => commitDisplayPatch({ showGrid })} />
                  <div className="nodedc-field">
                    <span className="nodedc-field__description">Появятся после подключения семантических сущностей</span>
                    <Checker checked={false} disabled label="Подписи сущностей" onChange={() => undefined} />
@@ -726,59 +1042,6 @@ export default function App() {
        />
      </Window>

-      <Window
-        open={layoutWindowOpen}
-        title="Компоновка рабочей области"
-        subtitle="КОМПОНОВКА / ЧЕРНОВИК"
-        size="sm"
-        placement="end"
-        draggable
-        closeOnBackdrop={false}
-        closeOnEscape={false}
-        lockBodyScroll={false}
-        trapFocus={false}
-        className="scene-tool-window scene-tool-window--layout"
-        data-scene-window="layout"
-        data-scene-active={activeSceneWindow === "layout" ? "true" : undefined}
-        onPointerDown={() => activateSceneWindow("layout")}
-        onClose={() => closeSceneWindow("layout")}
-        footer={
-          <WindowFooterActions>
-            <Button onClick={() => closeSceneWindow("layout")}>Закрыть</Button>
-            <Button
-              variant="primary"
-              shape="pill"
-              disabled={!layoutName.trim()}
-              onClick={() => setLayoutDraftSaved(true)}
-            >
-              Зафиксировать черновик
-            </Button>
-          </WindowFooterActions>
-        }
-      >
-        <div className="modal-stack">
-          <TextField
-            label="Название компоновки"
-            value={layoutName}
-            onChange={(event) => {
-              setLayoutName(event.target.value);
-              setLayoutDraftSaved(false);
-            }}
-            placeholder="Название профиля"
-          />
-          <div className="modal-contract-note" data-tone={layoutDraftSaved ? "success" : "warning"}>
-            <Icon name={layoutDraftSaved ? "check" : "save"} />
-            <div>
-              <strong>{layoutDraftSaved ? "Черновик зафиксирован в текущем сеансе" : "Экспорт RBL ещё не подключён"}</strong>
-              <p>
-                {layoutDraftSaved
-                  ? "Это состояние интерфейса без записи на диск. Будущий адаптер сохранит профиль Rerun рядом с кодом."
-                  : "Окно и контракт сохранения готовы; запись файла не имитируется."}
-              </p>
-            </div>
-          </div>
-        </div>
-      </Window>
    </>
  );
 }